#culture
{
  font-family: "Quicksand", sans-serif;
  font-size: calc(15px + 0.390625vw);
}

#culture .bandeau-titre
{
  position: relative;
  font-family: "Quicksand", sans-serif;
  font-size: calc(40px + 0.390625vw);
  text-align: center;
  color: white;
}

#culture .bandeau-titre .texte
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#culture .bandeau-titre img { width: 100%; vertical-align: middle; }

@media all and (max-width: 1200px)
{
  #culture .bandeau-titre
  {
    font-family: "Quicksand", sans-serif;
    font-size: calc(40px + 0.390625vw);
    text-align: center;
    color: white;
    background: #324259;
    padding: 100px 20px;
  }

  #culture .bandeau-titre .texte
  {

  }

  #culture .bandeau-titre img { display: none }
}

#culture .culture-contenu {  }


/*******************************/
/*** CONTEXTE ***/
/*******************************/

#culture #contexte
{
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(2, 1fr);
  padding: 60px 30px;
  background: #fff8e16b;
}

#culture #contexte .titre
{
  white-space: nowrap;
  font-size: calc(30px + 0.390625vw);
  font-weight: bold;
  text-align: center;
}

@media all and (max-width: 1200px)
{
  #culture #contexte
  {
    display: flex;
    flex-wrap: wrap;
    padding: 60px 8vw;
    background: #fff8e16b;
  }  
}

/*******************************/
/*** SITUATION ***/
/*******************************/

#culture #situation
{
  padding: 60px 8vw;
}

#culture #situation .presentation, #culture #situation .conclusion
{
  text-align: left;
  font-size: calc(30px + 0.390625vw);
  margin: 80px;
}

#culture #situation .detail
{
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
}

#culture #situation .detail .titre
{
  font-weight: bold;
  padding: 20px 0;
}

#culture #situation .detail .image
{
  overflow: hidden;
  aspect-ratio: 1;
}

#culture #situation .detail .texte
{
  text-align: justify;
}

#culture #situation .detail .image img
{
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

@media all and (max-width: 1200px)
{
  #culture #situation .detail
  {
    display: flex;
    flex-wrap: wrap;
  }
  
  #culture #situation .detail .titre
  {
    font-weight: bold;
    padding: 20px 0;
  }
  
  #culture #situation .detail .image
  {
    overflow: hidden;
    aspect-ratio: auto;
    text-align: center;
  }
  
  #culture #situation .detail .texte
  {
    text-align: justify;
  }
  
  #culture #situation .detail .image img
  {
    min-width: 20vw;
    max-width: 80vw;
    min-height: 20vh;
    max-height: 60vh;
    object-fit: contain;
    object-position: 50% 50%;
  }
}

/*******************************/
/*** ART ***/
/*******************************/

#culture #arts
{
  padding: 60px 8vw;
  background: #DFD0B8;
}

#culture #arts .liste
{
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}

#culture #arts .liste .titre
{
  font-weight: bold;
  padding: 20px 0;
}

#culture #arts .liste .image
{
  overflow: hidden;
  aspect-ratio: 1;
}

#culture #arts .liste .image img
{
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

#culture #arts .texte
{
  text-align: justify;
}

@media all and (max-width: 1200px)
{
  #culture #arts .liste
  {
    display: flex;
    flex-wrap: wrap;
  }
  
  #culture #arts .liste .titre
  {
    font-weight: bold;
    padding: 20px 0;
  }
  
  #culture #arts .liste .image
  {
    overflow: hidden;
    aspect-ratio: auto;
    text-align: center;
  }
  
  #culture #arts .liste .image img
  {
    min-width: 20vw;
    max-width: 80vw;
    min-height: 20vh;
    max-height: 60vh;
    object-fit: contain;
    object-position: 50% 50%;
  }
  
  #culture #arts .texte
  {
    text-align: justify;
  }
}

/*******************************/
/*** ARANJUEZ ***/
/*******************************/

#culture #aranjuez
{
}

#culture #aranjuez .palais
{
  padding: 60px 8vw;
  background: url("culture/aranjuez2.jpg");
}

#culture #aranjuez .palais .titre
{
  font-weight: bold;
  padding: 20px 0;
  font-size: calc(30px + 0.390625vw);
}

#culture #aranjuez .inspiration
{
  padding: 60px 8vw;
  background: #DFD0B8;
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

#culture #aranjuez .inspiration .texte
{
  font-size: calc(30px + 0.390625vw);
  font-weight: bold;
  padding-top: 50px;
}

#culture #aranjuez .inspiration .image img
{
  max-width: 100%;
  width: auto;
}

@media all and (max-width: 1200px)
{
  #culture #aranjuez .inspiration
  {
    padding: 60px 8vw;
    background: #DFD0B8;
    display: flex;
    flex-wrap:wrap;
  }
  
  #culture #aranjuez .inspiration .texte
  {
    font-size: calc(30px + 0.390625vw);
    font-weight: bold;
    padding-top: 50px;
  }
}

#culture #aranjuez .jardin
{
  padding: 60px 8vw;
  background: white;
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

#culture #aranjuez .jardin .texte
{
  padding: 50px;
}

@media all and (max-width: 1200px)
{
  #culture #aranjuez .jardin
  {
    padding: 60px 8vw;
    background: white;
    display: flex;
    flex-wrap: wrap;
  }
}