* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient(135deg, #3c302b, #1f1713);
  font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
  color: #2c1d10;
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
@media (max-width: 900px) {
  .container {
    padding: 0;
  }
}
/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  align-content: center;
  flex-wrap: wrap;
  padding-bottom: 20px;
  gap: 20px;
}
@media (max-width: 900px) {
  /* éléments à cacher en mobile */
  header {
    justify-content: center;
    padding-inline: 20px;
    gap: 0;
    padding-block: 1rem;
  }
}
h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  color: #f5eee0;
  font-size: clamp(24px, 5vw, 38px);
  font-size: clamp(1.5rem, 0rem + 4vw, 2.5rem);
  font-size: clamp(2rem, 1.25rem + 2vw, 2.5rem);
  letter-spacing: 0.25rem;
}

h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  color: #f5eee0;
  letter-spacing: 0.2ch;
  font-style: italic;
  font-weight: normal;
}
@media (max-width: 900px) {
  h2 {
    text-align: center;
  }
}
h3 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  text-align: center;
  padding-block: 2rem;
  font-weight: 500;
}
p {
  font-size: 1.1rem;
}
.hide {
  display: block;
}
@media (max-width: 900px) {
  /* éléments à cacher en mobile */
  .hide {
    display: none !important;
  }
}
.center {
  text-align: center;
}
/* Bloc texte */
.text-block {
  padding: clamp(1.5rem, 0rem + 4vw, 2.5rem);
}
.bg-dark {
  background-color: #4f351c;
}
.sous-titre {
  font-size: 1.3rem;
  text-align: center;
  font-weight: bold;
  text-wrap: balance;
}

.separateur {
  min-height: 4rem;
  width: 100%;
  background-color: #4f351c;
}
.separateur h3 {
  color: white;
}
/* Grid Layout pour la première section d'images */
.image-grid {
  display: grid;
  grid-template-columns: 1fr 0.5fr 0.5fr;
  grid-auto-rows: 250px;
  max-width: 1200px;
  margin: 0 auto;
  gap: 0;
  color: #c5a78a;
}
.image-grid .row-responsive {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  display: none;
}
.image-grid .image-item {
  overflow: hidden;
}

.image-grid .image-item.large {
  grid-row: 1 / 3;
}

.image-grid .image-item.bg-dark {
  background-color: #4f351c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-grid .image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.image-grid img.blason {
  max-height: 85% !important;
  height: 85% !important;
  width: auto !important;
}

/* Responsive */
@media (max-width: 900px) {
  /* La grille principale passe à 1 colonne */
  .image-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
  }
  .image-grid .row-responsive {
    display: grid;
  }

  /* Annuler le span vertical du .large */
  .image-item.large {
    grid-row: auto;
  }

  /* 🎯 Les blocs .row-responsive deviennent des grilles indépendantes 2 colonnes */
  .row-responsive {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% / 50% */
    gap: 0;
  }

  .row-responsive .item img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* Section de bienvenue */
.welcome-section {
  background-color: #cab642;
  padding: clamp(1.5rem, 0rem + 4vw, 2.5rem);
  text-align: center;
  margin-top: 0;
}

.welcome-section p {
  font-size: 1.25rem;
  margin: 0.5rem 0;
  line-height: 1.5;
}

.welcome-section p.titre {
  font-size: 1.5rem;
  font-weight: 700px;
  line-height: 1.8;
}

/*** 2ème section d'images ***/
.atelier-grid {
  display: grid;
  max-width: 1200px;
  margin: 0 auto;
  gap: 0;

  /* 3 colonnes : 50% / 25% / 25% */
  grid-template-columns: 1fr 0.5fr 0.5fr;

  /* hauteur automatique des lignes */
  grid-auto-rows: auto;
}

/* Colonne 1 : occupe 3 lignes */
.atelier-grid .col1 {
  grid-row: span 3;
  display: flex;
  flex-direction: column;
}

.atelier-grid .col1 img {
  width: 100%;
  height: 50%;
  display: block;
}

/* Images */
.atelier-grid .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bloc texte */
.atelier-grid .text-block {
  grid-column: 2 / 4; /* occupe colonnes 2 et 3 */
  background: #cab642;
}

.atelier-grid .row-responsive {
  display: none;
}

/* Responsive mobile */
@media (max-width: 900px) {
  .atelier-grid {
    grid-template-columns: 1fr; /* 1 colonne par défaut */
  }

  .atelier-grid .text-block {
    grid-column: 1 / -1; /* pleine largeur */
  }

  /* 🎯 Ligne 3 = deux colonnes seulement pour ces deux items */
  .atelier-grid .item.item-row {
    grid-column: span 1;
  }

  /* Le parent repasse en 2 colonnes UNIQUEMENT pour ces deux items */
  .atelier-grid .row-responsive {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% / 50% */
    width: 100%;
  }

  .atelier-grid .col1 img {
    width: 100%;
    height: 100%;
  }
}

/**** Google Map ***/
.map {
  padding-top: 2rem;
  background-color: #cab642;
}
.map h3 {
  padding-bottom: 0.5rem;
}
.map a {
  color: #0048b7;
  font-size: 1.2rem;
  text-underline-offset: -0.2rem;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  transition: 0.3s ease-in-out;
  white-space: nowrap;
}
.map a:hover {
  text-underline-offset: 0.3rem;
  text-decoration-color: #023581;
  color: #023581;
}

.map iframe {
  height: min(500px, 80vh);
  width: 100%;
  margin-top: clamp(1.5rem, 0rem + 4vw, 2.5rem);
  background-color: #cab642;
  display: block;
}
.map p {
  text-align: center;
}

/** Crèche de Noel **/
.creche-de-noel {
  background-color: #cab642;
}
.creche-de-noel h3 {
}

/*** Formulaire ***/
.form-container {
  background-color: #cab642;
  padding-block: 2rem;
}
.contact-form {
  max-width: 500px;
  background: #f7f4e3; /* rappel discret de la teinte #CAB642 */
  padding: 20px 25px;
  margin: 1rem auto;
  border-radius: 6px;
  border: 1px solid #d5c690;
  font-family: Verdana, Arial, sans-serif;
}

.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  margin-bottom: 6px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid #bbb;
  border-radius: 4px;
  box-sizing: border-box;
}

.contact-form textarea {
  resize: vertical;
}

.required-note {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: #777;
}

.form-actions {
  text-align: right;
}

.contact-form button {
  padding: 8px 16px;
  background: #c2a83e;
  border: none;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}

.contact-form button:hover {
  background: #ad9436;
}
.form-group.website {
  display: none;
}
/* Footer */
footer {
  text-align: center;
  padding: 2rem 1rem;
  color: #e1cba5;
}

footer a {
  color: #e1cba5;
  text-decoration: none;
  white-space: nowrap;
}

footer a:hover {
  text-decoration: underline;
}