@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,300&display=swap');

  .navbar {
    max-width: 1300px;
    margin: auto;

  }

  body {
    padding:  1px;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
    background: none;
    color: var(--gris-marque);
    font-size: 15px;
  }

  .content-container {
    width: 80%;
    margin: auto;
   
}
.restrict-copy {
  user-select: none;
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
}
.titre1{
  grid-area: titre1;
  margin: 0;              /* titre principal (h1) : sans les marges et la graisse par defaut */
  font-weight: normal;
  line-height: inherit;
  height: 130px;
  font-size:35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: lato;
  color: #ba9966;
}

.texte-titre {
  border-top: 2px solid #ba9966;
  border-bottom: 2px solid #ba9966;
  line-height: 2;
  padding: 10px;
  text-align: center;
  font-size: 23px;
  max-width : 100%;
  height : 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ba9966;
}


.texte1{
  grid-area: texte1;
  text-align: center;
  font-size: 23px;
  padding-left:5px ;
  max-width : 100%;
  height : 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-marque);
}

.custom-hr {
  border-top: 2px solid #ba9966;
  margin: 20px auto; /* Centre la ligne horizontalement */
}

.section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px 0;
    padding-bottom: 40px;
}

.section .image {
    flex: 1;
    text-align: left; /* Alignement normal pour les images */
    filter: drop-shadow(0 0 0.50rem var(--gris-marque));
    border-radius: 10px;
    max-width : 90%;
    height : 90%;
    opacity: 0.8; /* 50% d'opacité */
}
.photo1{
  filter: drop-shadow(0 0 0.75rem #93bcdc);
  display: flex;
  align-items: center;
  justify-content: center;
}


.section .text {
    text-align: center; /* Alignement du texte à droite */
    font-size: 20px;
    max-width : 100%;
    height : 90%;
    color: var(--gris-marque);
    font-weight: 600;
}

.gradient-text {
  background: linear-gradient(to right, rgb(245, 2, 2), rgb(18, 171, 206), rgb(216, 216, 5), green);
  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.text-patrick p {
  color: #166305;
  font-weight: 600;
}


.text-carnival p {
  color: #ba9966;
  font-weight: 600;
}

.text-songkran p {
  color: #07719a;
  font-weight: 600;
}

.reverse .image {
    text-align: right; /* Inverser l'alignement de l'image */
    filter: drop-shadow(0 0 0.75rem #ba9966);
    border-radius: 10px;
    max-width : 90%;
    height : 90%;
}

.reverse .text {
    text-align: center; /* Inverser l'alignement du texte */
    font-size: 20px;
    max-width : 100%;
    height : 90%;
    color: var(--gris-marque);
}

.cta {
  text-align: center;
  margin-top: 40px;
  font-size: 25px;
  color: var(--gris-marque);
}

.cta a {
  color: #ba9966;
  text-decoration: none;
  
}
.cta a:hover {
color: var(--gris-marque);
text-decoration: underline;

font-weight: 600;
}

.ctb {
text-align: center;
margin-top: 40px;
font-size: 20px;
color: var(--gris-marque);
}

.ctb a {
color: var(--gris-marque);
text-decoration: none;

}
.ctb a:hover {
color: #ba9966;
text-decoration: underline;

font-weight: 600;
}





.after_grid {
  max-width: 1300px;
  margin: 30px auto; /* Centre le conteneur horizontalement */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colonnes de taille adaptative */
  gap: 20px; /* Espacement entre les éléments */
  justify-content: center; /* Centre les éléments dans le conteneur */
}

.footer {
  /*background: purple;*/
  padding: 1rem;
}





.photo2{
 
  filter: drop-shadow(0 0 0.75rem #93bcdc);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo2 img{
  border-radius: 5px;
  max-width: 70%;
  height: 50%;
}
.photo3{
  grid-area: photo3;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 3;
  grid-row-end: 3;
  filter: drop-shadow(0 0 0.75rem #93bcdc);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo3 img{
  border-radius: 5px;
  max-width : 75%;
  height : auto;
}

.photo4{
  grid-area: photo4;
  font-size: 15px;
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 3;
  padding: 10px;
  border-radius: 10px;
  color: var(--gris-marque);
  display: flex;
  align-items: center;
  justify-content: center;
 }

.photo4 h4 {
  text-align: center;
  font-weight: 700;
  font-family: lato;
  color: #ba9966;
  filter: none;
  justify-content: center;
}

.photo4 .form {
  color: var(--gris-marque);
  font-weight: 600;
  font-size: 17px;
  filter: drop-shadow(0 0 0.35rem #93bcdc);
 
}


  
 input, textarea {
  padding:3px;
  background-color: white;
  font-weight: 200;
 
  border-radius:5px;
  width:200px;
  }

  input[type=submit], input[type=reset] {
    width:100px;
    background-color: #ba9966;
    color: white;
    margin-left:5px;
    cursor:pointer;
    }

    input[type=submit], input[type=reset] {
      transition-duration: 0.2s;
  }
  
    input[type=submit]:hover, input[type=reset]:hover {
      background-color: var(--gris-marque);
      color: bisque;
  
    }

.texte2{
  grid-area: texte2;
  text-align: center;
  font-size: 30px;
  font-family: lato;
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 3;
  max-width : 80%;
  height : 100%;
  display: flex;
  align-items: center;
  justify-content: center;


}
.texte2 img{
  border-radius: 5px;
  max-width : 80%;
  height : 80%;
}

.texte2 h2{
  font-size: 8px;
  border-radius: 5px;
  max-width : 50%;
  height : 50%;
  color: #ba9066;
}

.text1{
  grid-area: text1;
  font-family: lato;
  color: var(--gris-marque);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  /*grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 5;
  grid-row-end: 5;*/

  /*border: solid 1px rgb(84, 10, 204); */
  max-width : auto;
  display: flex;
  align-items: center;
  justify-content: center;
}





.titre2{
  grid-area: titre2;
  padding-top: 5px;
  height: 50px;
  font-size:30px;
  font-weight: bold;
  align-items: center;
  color: #ba9066;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10%;
}

/* Images dans les sections normales */
.section .image img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0 auto;
}



div.gallery {
  /*background: yellow;*/
  text-align: center;
  /*margin: 5px;*/
  border: 1px solid #eb5920;
  /*width: 180px;*/
  font-size: 16px;
  filter: drop-shadow(0 0 0.75rem #93bcdc);
  border-radius: 30px;
  font-weight: bold;
  color: var(--gris-marque);
  /*display: grid;*/
  padding: 10px;
  /* Colonne : image en haut, legende poussee en bas de la case */
  display: flex;
  flex-direction: column;
}


/* Images dans la galerie (after_grid) : cadre de format fixe 4:3, image
   entiere a ses proportions d'origine (contain), ni deformee ni rognee.
   Toutes les cases ont ainsi la meme hauteur d'image, et les legendes
   s'alignent au lieu de suivre la taille de chaque image. */
.after_grid .gallery img {
  width: 100%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

div.desc {
  padding: 15px;
  text-align: center;
  margin-top: auto;
}

/* Legendes de la galerie : hauteur de deux lignes reservee, texte centre.
   Les legendes sur une ligne et sur deux lignes ("Fete de Holi ...")
   commencent et finissent ainsi a la meme hauteur dans une rangee. */
.after_grid .desc {
  line-height: 1.3;
  min-height: calc(2.6em + 30px); /* 2 lignes + marges interieures */
  display: flex;
  align-items: center;
  justify-content: center;
}


* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 1080px) {
  .container {
    flex: 50%;
  }
}
@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .grid_container {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}


/* Responsive pour petits écrans */
@media only screen and (max-width: 768px) {
  /* Sections verticales */
  .content-container .section,
  .content-container .section.reverse {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  .section .image img {
    width: 90%;
    max-width: 250px;
    height: auto;
    display: block;
    margin: 10px auto;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .after_grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    text-align: center;
  }

  .after_grid .gallery {
    width: 90%;
    max-width: 200px;
    margin: 10px auto;
  }

  .after_grid .gallery img {
    width: 60%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .after_grid .desc {
    font-size: 13px;
    margin-top: 5px;
  }
}