/* ==========================================================================
   DE MONTIGNY — layout.css
   Header, navigation, footer et grilles communes à toutes les pages.
   ========================================================================== */

/* =========================================================== HEADER ===== */

.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--h-header-mobile);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: var(--marge-page);
  color: var(--blanc);
  background: transparent;
  transition: background var(--duree-moyenne) var(--courbe),
              color    var(--duree-moyenne) var(--courbe),
              height   var(--duree-moyenne) var(--courbe);
}
@media (min-width: 768px) { .entete { height: var(--h-header); } }

/* État « posé » : dès que la page défile, ou sur les pages sans hero. */
.entete.est-pose,
.entete.est-opaque {
  background: var(--blanc);
  color: var(--noir);
  border-bottom: var(--filet) solid var(--gris-clair);
}

.entete__zone { display: flex; align-items: center; gap: var(--e-6); }
.entete__zone--fin { justify-content: flex-end; }

.entete__lien {
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  padding-block: var(--e-2);
  transition: opacity var(--duree-courte) var(--courbe);
}
.entete__lien:hover { opacity: .55; }

.entete__logo { justify-self: center; display: block; }
.entete__logo img { height: 26px; width: auto; transition: filter var(--duree-moyenne) var(--courbe); }
/* Sur un hero sombre, le monogramme noir est inversé en blanc. */
.entete:not(.est-pose):not(.est-opaque):not(.entete--texte-noir) .entete__logo img { filter: invert(1); }
@media (min-width: 768px) { .entete__logo img { height: 32px; } }

.entete__compteur { font-variant-numeric: tabular-nums; }

/* Masquage responsive. */
.sur-desktop { display: none; }
@media (min-width: 900px) {
  .sur-desktop { display: flex; }
  .sur-mobile  { display: none !important; }
}

/* --- Volet déroulant « Découvrir » --------------------------------------- */

.volet {
  position: fixed;
  top: var(--h-header); left: 0; right: 0;
  z-index: 99;
  background: var(--blanc);
  color: var(--noir);
  border-bottom: var(--filet) solid var(--gris-clair);
  padding: var(--e-12) var(--marge-page) var(--e-16);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e-8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--duree-moyenne) var(--courbe),
              transform var(--duree-moyenne) var(--courbe),
              visibility var(--duree-moyenne);
}
.volet.est-ouvert { opacity: 1; visibility: visible; transform: none; }
.volet h3 { margin-bottom: var(--e-4); color: var(--gris); }
.volet li { padding-block: var(--e-1); }
.volet li a { font-size: var(--t-petit); }
.volet li a:hover { color: var(--azalea); }

/* --- Menu plein écran (mobile) ------------------------------------------- */

.menu-mobile {
  position: fixed; inset: 0; z-index: 98;
  background: var(--blanc); color: var(--noir);
  padding: calc(var(--h-header-mobile) + var(--e-12)) var(--marge-page) var(--e-12);
  display: flex; flex-direction: column; gap: var(--e-8);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--duree-moyenne) var(--courbe), visibility var(--duree-moyenne);
}
.menu-mobile.est-ouvert { opacity: 1; visibility: visible; }
.menu-mobile a { display: block; padding-block: var(--e-2); }

/* Le bouton mesure 44 × 44 px — la taille minimale confortable au doigt —
   alors que les trois barres n'en occupent que 28 × 18 au centre. */
.burger { width: 44px; height: 44px; position: relative; margin-left: -8px; }
.burger span {
  position: absolute; left: 8px; width: 28px; height: 1.5px;
  background: currentColor;
  transition: transform var(--duree-courte) var(--courbe),
              opacity var(--duree-courte), top var(--duree-courte) var(--courbe);
}
.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 29px; }
.burger.est-actif span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger.est-actif span:nth-child(2) { opacity: 0; }
.burger.est-actif span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* =========================================================== SECTIONS === */

.section        { padding-block: var(--e-24); }
.section--serree{ padding-block: var(--e-16); }
.section__tete  { margin-bottom: var(--e-12); }

/* Grille produit : 2 colonnes en mobile, 3 en tablette, 4 en grand écran. */
.grille-produits {
  display: grid;
  gap: var(--e-8) var(--gouttiere);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .grille-produits { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grille-produits { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================== FOOTER ===== */

.pied {
  background: var(--noir);
  color: var(--blanc);
  padding: var(--e-24) var(--marge-page) var(--e-12);
}
.pied__colonnes {
  display: grid;
  gap: var(--e-12) var(--e-8);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.pied h3 { color: rgba(255,255,255,.55); margin-bottom: var(--e-4); }
.pied li a, .pied li span { font-size: var(--t-petit); color: rgba(255,255,255,.8); }
.pied li { padding-block: 3px; }
.pied li a:hover { color: var(--blanc); }

.pied__bas {
  margin-top: var(--e-16);
  padding-top: var(--e-8);
  border-top: var(--filet) solid rgba(255,255,255,.15);
  display: flex; flex-wrap: wrap; gap: var(--e-6);
  justify-content: space-between; align-items: center;
}
.pied__reseaux { display: flex; gap: var(--e-6); }
/* Icône de 18 px, zone de contact de 42 px : la marge négative annule
   l'espace ajouté par la marge intérieure. */
.pied__reseaux a {
  color: rgba(255,255,255,.6);
  display: inline-flex; padding: 12px; margin: -12px;
  transition: color var(--duree-courte);
}
.pied__reseaux a:hover { color: var(--blanc); }
.pied__reseaux svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.pied__mention { font-size: var(--t-label); letter-spacing: var(--ls-label);
                 text-transform: uppercase; color: rgba(255,255,255,.4); }

/* =========================================================== NEWSLETTER = */

.newsletter {
  padding: var(--e-24) var(--marge-page);
  background: var(--ivoire);
  text-align: center;
}
.newsletter__form {
  display: flex; gap: 0;
  max-width: 480px; margin: var(--e-8) auto 0;
  border-bottom: var(--filet) solid var(--noir);
}
.newsletter__form input {
  flex: 1; min-height: 52px; padding-inline: var(--e-2);
  font-size: var(--t-petit);
}
.newsletter__form input::placeholder {
  font-size: var(--t-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--gris);
}
.newsletter__form button {
  font-size: var(--t-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; padding-inline: var(--e-4);
  transition: color var(--duree-courte);
}
.newsletter__form button:hover { color: var(--azalea); }
.newsletter__message { min-height: 1.4em; margin-top: var(--e-4); color: var(--azalea); }


/* ============================================ ZONES TACTILES (mobile) =====
   Sur écran tactile, tout élément cliquable doit rester atteignable au doigt.
   On épaissit les listes de liens sans changer leur apparence. */
@media (max-width: 900px) {
  .pied li a,
  .volet li a,
  .menu-mobile a,
  .champ__lien,
  .lien-inline,
  .fil-ariane a { display: inline-block; padding-block: 7px; }
  .entete__logo { display: flex; align-items: center; height: 44px; }
}