/* ================================
   VARIABLES
================================ */
:root {
  --creme:      #f5ede0;
  --rouge:      #b14d29;
  --bleu:       #0076ba;
  --brun-nuit:  #1a1208;
  --or:         #b07d3a;
  --or-clair:   #c9a96e;
  --brun-texte: #3d2b1a;
  --brun-doux:  #7a5c3d;
  --font-titre: 'Cormorant Garamond', serif;
  --font-corps: 'Lato', sans-serif;
  --font-hero:  'Space Grotesk', sans-serif;
  --max-width:  1920px;
}

/* ================================
   RESET
================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }

/* N'importe quelle règle auteur qui fixe `display` sur un élément (ex:
   .contact-ligne { display:flex }) prend le pas sur le display:none par
   défaut du navigateur pour [hidden] (l'origine "auteur" gagne toujours
   sur l'origine "user agent", quelle que soit la spécificité). Sans cette
   règle, tout élément masqué via l'attribut hidden mais stylé en display
   par ailleurs reste visible en permanence. */
[hidden] { display: none !important; }

body {
  background: var(--creme);
  color: var(--brun-texte);
  font-family: var(--font-corps);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ================================
   ACCESSIBILITÉ
================================ */
/* Lien d'évitement */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--bleu);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 14px;
  z-index: 9999;
  transition: top 0.2s ease;
  border-radius: 0 0 4px 0;
}

.skip-link:focus { top: 0; }

/* Focus visible pour navigation clavier */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ================================
   CONTENEUR GLOBAL 1920px
================================ */
.inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  position: relative;
}

/* ================================
   HEADER
================================ */
#header {
  background-color: #f3f1dd;
  background-image: url('../images/background-beige.jpg');
  background-size: cover;
  background-position: center;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 70px);
  height: 120px;
  width: 100%;
  position: relative;
}

.nav-logo img {
  width: 155px;
  height: 60px;
  object-fit: contain;
}

/* ================================
   NAVIGATION
================================ */
.nav-links {
  display: flex;
  list-style: none;
  gap: 30px;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-links a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.nav-label {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 18px;
  color: var(--rouge);
  line-height: 1.3;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.nav-underline {
  display: block;
  width: 100%;
  height: 3px;
  background-image: url('../images/line.svg');
  background-repeat: repeat-x;
  background-size: auto 3px;
  background-position: left center;
  transition: filter 0.3s ease;
}

.nav-links a:hover .nav-label { color: var(--bleu); }
.nav-links a:hover .nav-underline {
  filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1000%) hue-rotate(185deg);
}

/* ================================
   TÉLÉPHONE
================================ */
.nav-tel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.nav-tel-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-tel-icon {
  color: var(--rouge);
  transition: color 0.3s ease;
  flex-shrink: 0;
}

.nav-tel-numero {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 18px;
  color: var(--rouge);
  transition: color 0.3s ease;
}

.nav-tel:hover .nav-tel-numero { color: var(--bleu); }
.nav-tel:hover .nav-tel-icon { color: var(--bleu); }
.nav-tel:hover .nav-underline {
  filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1000%) hue-rotate(185deg);
}

.separateur-amazigh {
  width: 100%;
  height: 38px;
  background-image: url('../images/separateur-unit.svg'), url('../images/background-beige.jpg');
  background-repeat: repeat-x, no-repeat;
  background-position: left center, center;
  background-size: 41.258px 38px, cover;
}
/* ================================
   BURGER MENU MOBILE
================================ */
.nav-burger {
  display: none;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-burger-icone {
  display: block;
  transition: opacity 0.2s ease;
}

.nav-burger[aria-expanded="true"] .nav-burger-icone { opacity: 0; }

/* Croix affichée par-dessus l'icône (masquée) quand le menu est ouvert. */
.nav-burger::before,
.nav-burger::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--bleu);
  opacity: 0;
  transition: all 0.2s ease;
}

.nav-burger[aria-expanded="true"]::before,
.nav-burger[aria-expanded="true"]::after {
  width: 22px;
  opacity: 1;
}

.nav-burger[aria-expanded="true"]::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-burger[aria-expanded="true"]::after { transform: translate(-50%, -50%) rotate(-45deg); }

#hero {
  position: relative;
  width: 100%;
  height: 801px;
  background-color: #f3f1dd;
  background-image: url('../images/background-hero.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 clamp(24px, 8vw, 160px);
  position: relative;
  justify-content: space-between;
  box-sizing: border-box;
}

.hero-inner > *,
.hero-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 893px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  flex-shrink: 1;
  min-width: 0;
}

.hero-titre {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 65px);
  line-height: 100%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.hero-titre-bleu { color: var(--bleu); }
.hero-titre-rouge { color: var(--rouge); }

.hero-sous-titre {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 18px;
  line-height: 130%;
  color: var(--brun-nuit);
}

.hero-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  width: 280px;
  height: 66px;
  margin-left: -27px;
}



.hero-cta-ellipse {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 66px;
}



.hero-cta-texte {
  position: relative;
  z-index: 1;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 16px;
  line-height: 130%;
  color: var(--rouge);
  white-space: nowrap;
}



.hero-cta:hover .hero-cta-texte { color: var(--bleu); }


.hero-visuel {
  position: relative;
  width: clamp(220px, 24vw, 439px);
  height: auto;
  aspect-ratio: 439 / 641;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.hero-tajine-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-top-left-radius: 220px;
  border-top-right-radius: 220px;
  overflow: visible;
}

.hero-tajine {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 220px;
  border-top-right-radius: 220px;
}

.hero-tampon {
  position: absolute;
  top: -10px;
  right: 0px;
  width: clamp(90px, 9vw, 160px);
  height: auto;
  aspect-ratio: 160 / 130;
  transform-origin: center;
  object-fit: contain;
  z-index: 4;
}

/* Femmes couscous */
.hero-femmes {
  position: absolute;
  bottom: 0;
  left: 0px;
  width: clamp(220px, 20vw, 388px);
  height: auto;
  z-index: 3;
  object-fit: contain;
}

/* ================================
   RESPONSIVE TABLETTE — HEADER
   Le menu horizontal (liens centrés en absolute + logo + téléphone) a
   besoin d'environ 1100px pour tenir sans se chevaucher : en dessous, on
   repasse en menu burger (mêmes mesures que le cadre mobile Figma 393px,
   qui restent cohérentes sur toute cette plage plus large).
================================ */
@media (max-width: 1100px) {

  /* #header (position:sticky) n'a pas de hauteur propre : elle dépend
     entièrement de ses enfants en flux normal. À l'ouverture du menu,
     .nav-container passe en position:absolute (cf. plus bas) ET le
     séparateur amazigh juste après passe en display:none (pour éviter le
     doublon) — les deux sortent donc du flux en même temps, et #header
     s'effondrait à une hauteur quasi nulle, décalant tout le contenu
     en dessous vers le haut. Un min-height (bandeau 52px + séparateur
     38px fermé) l'empêche de s'effondrer, ouvert ou fermé. */
  #header { min-height: 90px; }

  /* Header — mesures reprises de la maquette Figma (cadre mobile 393px) :
     bandeau 393×52, contenu 361×28 (marge 16px de chaque côté), logo
     72×28, icône burger 36×12. */
  .nav-container {
    padding: 12px 16px;
    height: auto;
    flex-wrap: wrap;
    gap: 0;
  }

  .nav-logo img {
    width: 72px;
    height: 28px;
  }

  .nav-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 20px;
    padding: 0;
  }

  .nav-burger-icone {
    width: 36px;
    height: auto;
  }

  /* Toujours display:flex (plus de display:none) pour pouvoir animer
     l'ouverture/fermeture : la liste part repliée (max-height:0) et se
     déplie classiquement de haut en bas. Une seule propriété animée
     (max-height, pas d'opacity en même temps) pour éviter un bug de
     rendu où le texte disparaissait pendant/après la transition. Comme
     c'est une transition CSS classique (pas des keyframes séparées),
     retirer .open à la fermeture rejoue exactement l'inverse. */
  .nav-links {
    display: flex;
    position: static;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    /* Casse le padding de .nav-container (16px) pour repasser en pleine
       largeur, comme le séparateur amazigh utilisé ailleurs sur le site. */
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
    gap: 0;
    margin-top: 0;
    padding-top: 0;
    max-height: 0;
    overflow: hidden;
    background-image: url('../images/separateur-unit.svg');
    background-repeat: repeat-x;
    background-position: top left;
    background-size: 41.258px 38px;
    transition: max-height 0.35s ease, margin-top 0.35s ease, padding-top 0.35s ease;
  }

  .nav-links.open {
    margin-top: 16px;
    padding-top: 38px;
    max-height: 600px;
  }

  .nav-links li { width: 100%; border-bottom: 1px solid rgba(177, 77, 41, 0.15); }

  .nav-links a {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px;
  }

  .nav-label { font-size: 16px; }

  .nav-underline { display: none; }

  .nav-links a::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--bleu);
    border-bottom: 2px solid var(--bleu);
    transform: rotate(-45deg);
    flex-shrink: 0;
  }

  .nav-tel { display: none; }

  /* Évite le doublon avec le séparateur ajouté en haut de la liste ouverte. */
  .nav-container.nav-container--ouvert + .separateur-amazigh { display: none; }

  /* Le panneau ouvert flotte par-dessus le hero (position absolute) au lieu
     de pousser le contenu vers le bas : #header (position:sticky) sert de
     repère de positionnement, sa propre hauteur ne change donc pas. Classe
     posée en JS (pas :has()) pour une compatibilité garantie. */
  .nav-container.nav-container--ouvert {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: #f3f1dd;
    background-image: url('../images/background-beige.jpg');
    background-size: cover;
    background-position: center;
    border-bottom: 2px solid var(--rouge);
  }

  .nav-container.nav-container--ouvert .nav-tel {
    display: flex;
    width: 100%;
    align-items: flex-end;
    padding-top: 16px;
  }

  .nav-tel-numero { font-size: 16px; }
}

/* ================================
   RESPONSIVE MOBILE
================================ */
@media (max-width: 768px) {

  /* Hero */
  #hero {
    height: auto;
    padding-bottom: 0;
  }

  .hero-inner {
    flex-wrap: wrap;
    align-items: center;
    padding: 32px 16px 16px;
    gap: 24px 0;
  }

  /* "Déballe" .hero-content pour que titre/sous-titre/CTA redeviennent
     des enfants directs de .hero-inner : ça permet de placer le titre à
     côté de la photo, puis le sous-titre et le CTA en pleine largeur
     en dessous, plutôt que de tout empiler d'un bloc. */
  .hero-content { display: contents; }

  /* Valeurs fixes reprises directement de la maquette Figma (cadre
     mobile 393px) : titre 199px + photo 162px = 361px, sans espace
     entre les deux — plus fiable que des pourcentages approchés. */
  .hero-titre {
    order: 1;
    flex: 0 0 199px;
    min-width: 0;
    font-size: 28px;
  }

  .hero-visuel {
    order: 2;
    flex: 0 0 162px;
    min-width: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
  }

  .hero-tajine-wrapper,
  .hero-tajine { min-width: 0; }

  .hero-tajine-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 162 / 224;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
  }

  .hero-tajine {
    width: 100%;
    height: 100%;
    position: static;
    transform: none;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
  }

  .hero-tampon {
    display: block;
    top: -13px;
    right: -6px;
    width: 63px;
    height: 62px;
  }

  .hero-sous-titre {
    order: 3;
    flex: 1 1 100%;
    font-size: 16px;
  }

  .hero-cta {
    order: 4;
    margin-left: 0;
    width: 190px;
    height: 57px;
  }

  .hero-cta-ellipse { width: 190px; height: 57px; }

  .hero-cta-texte {
    font-size: 14px;
    font-weight: 600;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    max-width: 156px;
    padding: 0 8px;
  }

  .hero-femmes {
    left: auto;
    right: -10px;
    bottom: 0;
    width: 150px;
  }

}
/* ================================
   ÉVÉNEMENTIEL & MARIAGES
================================ */
/* #evenementiel reste un bloc tout simple (comme à l'origine) : le
   centrage de .evenementiel-inner via max-width/margin:auto est donc
   garanti, sans dépendre du comportement d'alignement d'axe croisé de
   flex/grid (deux tentatives précédentes qui cassaient le centrage
   au-delà de 1920px de large). Le "grandit au-delà de 685px si le texte
   a besoin de plus de place" se fait directement via min-height sur
   .evenementiel-inner, une valeur absolue qui n'a besoin d'aucune
   résolution de pourcentage — .evenementiel-gauche/.evenementiel-droite
   (height:100%) s'étirent ensuite pour remplir cette hauteur via
   align-items:stretch, qu'elle vaille 685px ou plus. */
#evenementiel {
  width: 100%;
  background-color: #f3f1dd;
}

.evenementiel-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  min-height: 685px;
}

.evenementiel-gauche {
  width: 50%;
  flex-shrink: 0;
  background-image: url('../images/background-yellow.jpg');
  background-size: cover;
  background-position: center;
  /* Haut/bas asymétriques : le CTA absorbe déjà tout l'espace restant en
     bas via ses marges auto (équidistant pictos/bas), donc le padding du
     bloc lui-même doit être plus généreux en haut (où rien d'autre ne
     pousse le contenu) et plus resserré en bas. */
  padding: clamp(64px, 9vw, 110px) clamp(24px, 6vw, 120px) clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  box-sizing: border-box;
}

.evenementiel-gauche > *,
.evenementiel-textes > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.evenementiel-titre {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 100%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.evenementiel-titre-bleu { color: var(--bleu); }
.evenementiel-titre-rouge { color: var(--rouge); }

.evenementiel-textes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.evenementiel-texte {
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 18px;
  line-height: 130%;
  color: var(--brun-nuit);
}

.evenementiel-pictos {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 720px;
  justify-content: space-between !important;
  flex-wrap: wrap;
  row-gap: 24px;
}

.evenementiel-picto {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
}

.evenementiel-picto-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.evenementiel-picto * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.evenementiel-picto-titre {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 18px;
  line-height: 120%;
  color: var(--brun-nuit);
  text-align: center;
  margin-top: 8px !important; 
}

.evenementiel-picto-texte {
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 16px;
  line-height: 130%;
  color: var(--brun-nuit);
  text-align: center;
  margin-top: 8px !important; 
}

.evenementiel-picto:nth-child(1) { width: 124px; }
.evenementiel-picto:nth-child(2) { width: 181px; }
.evenementiel-picto:nth-child(3) { width: 195px; }

.evenementiel-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 220px;
  height: 66px;
  /* margin-top ET margin-bottom auto : les deux se partagent à parts
     égales tout l'espace restant dans la colonne, donc le CTA se
     retrouve mathématiquement à égale distance des pictos au-dessus et
     du bas de la section — plutôt qu'une valeur fixe qui ne s'adapte pas
     si la section devient plus ou moins haute. */
  margin-top: auto !important;
  margin-bottom: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.evenementiel-cta-ellipse {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 66px;
}

.evenementiel-cta-texte {
  position: relative;
  top: 1px;
  z-index: 1;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 16px;
  color: var(--rouge);
  white-space: nowrap;
}

.evenementiel-cta:hover .evenementiel-cta-texte { color: var(--bleu); }

.evenementiel-droite {
  flex: 1;
  overflow: hidden;
}

.evenementiel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Seuil relevé à 1100px (au lieu de 768) : la colonne de 50% devient trop
   étroite pour le titre + la rangée de pictos bien avant le format mobile,
   et comme #evenementiel a une hauteur fixe (685px) sans overflow:hidden,
   le contenu qui dépasse déborde visuellement sur les sections voisines
   au lieu d'être contenu. On repasse donc en pile (comme en mobile) plus
   tôt, avant que ce débordement ne puisse se produire. */
@media (max-width: 1100px) {
  .evenementiel-inner { flex-direction: column; height: auto; min-height: 0; }
  .evenementiel-gauche { width: 100%; height: auto; padding: clamp(40px, 10vw, 64px) clamp(16px, 4vw, 60px); order: 2; }
  .evenementiel-droite { width: 100%; order: 1; }
  .evenementiel-image { height: auto; aspect-ratio: 16 / 9; }
  .evenementiel-titre { font-size: 28px; }
  /* Disposition en ligne (icône à gauche, titre+texte à droite, tout aligné
     à gauche) plutôt qu'empilé/centré — grid à 2 colonnes pour que l'icône
     s'étende sur les 2 lignes de texte sans toucher au HTML. */
  .evenementiel-pictos { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }

  .evenementiel-picto {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    width: 100% !important;
    text-align: left;
  }

  .evenementiel-picto-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 48px;
    height: 48px;
  }

  .evenementiel-picto-titre {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    font-size: 16px;
  }

  .evenementiel-picto-texte {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    font-size: 14px;
  }

  /* Même gabarit de CTA que le hero (158×44, 14px) sur tout le site mobile. */
  .evenementiel-cta { width: 190px; height: 57px; margin-left: 0 !important; margin-right: auto !important; }
  .evenementiel-cta-ellipse { width: 190px; height: 57px; }
  .evenementiel-cta-texte {
    font-size: 14px;
    font-weight: 600;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    max-width: 156px;
    padding: 0 8px;
  }
}
/* ================================
   À PROPOS — NOUS CUISINONS POUR VOTRE ...
================================ */
:root {
  --jaune: #ffd24d;
}

#apropos {
  width: 100%;
  background-color: #f3f1dd;
  overflow: hidden;
}

/* Au-delà de 1920px, la rangée zelij/rouge ne s'étend plus : elle reste
   figée à 1920px (960px + 960px) et c'est le beige de #apropos qui
   remplit les marges de chaque côté. En dessous de 1920px, gauche/droite
   restent en 50% / 50% et se réduisent avec l'écran comme avant. */
.apropos-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}

.apropos-gauche {
  width: 50%;
  position: relative;
  background-image: url('../images/background-zelij.jpg');
  background-size: cover;
  background-position: center;
}

.apropos-gauche-inner {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 960px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bloc figé regroupant les 3 visuels : leurs positions internes sont
   fixes les unes par rapport aux autres (même chevauchement que sur
   Figma), et c'est ce bloc entier qui est centré dans le fond zelij. */
.apropos-collage {
  position: relative;
  width: clamp(280px, 34vw, 587.97px);
  aspect-ratio: 587.97 / 519.19;
  flex-shrink: 0;
}

.apropos-img {
  position: absolute;
  display: block;
}

.apropos-couscous {
  width: 65.48%;
  height: 93.8%;
  left: 0;
  top: 0;
  z-index: 2;
}

.apropos-masfouf {
  width: 49.32%;
  height: 69.15%;
  left: 50.68%;
  top: 30.85%;
  z-index: 1;
}

.apropos-tampon {
  width: 19.4%;
  height: 16.2%;
  left: 76.53%;
  top: 36.02%;
  transform: rotate(-0.55deg);
  z-index: 3;
}

/* ---- Partie droite : texte sur fond rouge ---- */
.apropos-droite {
  width: 50%;
  background-image: url('../images/background-red.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 8vw, 165px);
  box-sizing: border-box;
}

.apropos-titre {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 100%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--creme);
}

/* Mot rotatif : mariage -> anniversaire -> séminaire -> fiançailles -> baptêmes -> réception */
.mot-rotatif-wrapper {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: bottom;
}

.mot-rotatif {
  display: inline-block;
  color: var(--jaune);
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Sortie vers le haut */
.mot-rotatif.sortie {
  transform: translateY(-100%);
  opacity: 0;
}

/* Positionnement instantané sous la ligne avant l'entrée (sans transition) */
.mot-rotatif.pret-entree {
  transition: none;
  transform: translateY(100%);
  opacity: 0;
}

.apropos-texte {
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 18px;
  line-height: 130%;
  color: var(--creme);
  width: 100%;
  max-width: 630px;
}

.apropos-pictos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.apropos-picto {
  display: flex;
  align-items: center;
  gap: 12px;
}

.apropos-picto img {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.apropos-picto span {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 18px;
  line-height: 120%;
  color: var(--creme);
}

/* ================================
   PLATEAUX REPAS
================================ */
#plateaux {
  width: 100%;
  background-color: #f3f1dd;
}

.plateaux-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}

.plateaux-gauche {
  width: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.plateaux-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.plateaux-droite {
  width: 50%;
  background-color: var(--bleu);
  background-image: url('../images/background-blue.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 120px);
  box-sizing: border-box;
}

.plateaux-droite > *,
.plateaux-textes > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.plateaux-titre {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 105%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.plateaux-titre-blanc { color: var(--creme); }
.plateaux-titre-jaune { color: var(--jaune); }

.plateaux-textes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plateaux-texte {
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 18px;
  line-height: 130%;
  color: var(--creme);
}

.plateaux-lien {
  text-decoration: underline;
  color: inherit;
  transition: color 0.3s ease;
}

.plateaux-lien:hover { color: var(--jaune); }

.plateaux-pictos {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.plateaux-picto {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.plateaux-picto * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.plateaux-picto-icon {
  width: 58px;
  height: 58px;
}

.plateaux-picto-titre {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 18px;
  line-height: 120%;
  color: var(--jaune);
  text-align: center;
  margin-top: 12px !important;
}

.plateaux-picto-texte {
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 16px;
  line-height: 130%;
  color: var(--creme);
  text-align: center;
  margin-top: 8px !important;
}

.plateaux-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 220px;
  height: 66px;
  align-self: center;
}

.plateaux-cta-ellipse {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 66px;
}

.plateaux-cta-texte {
  position: relative;
  z-index: 1;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 16px;
  color: var(--jaune);
  white-space: nowrap;
}

.plateaux-cta:hover .plateaux-cta-texte { color: var(--creme); }

/* Seuil relevé à 1100px, comme événementiel juste au-dessus : la colonne
   de 50% + son CTA à largeur fixe (220px) et sa rangée de pictos se
   tassent bien avant le format mobile. */
@media (max-width: 1100px) {
  .plateaux-inner { flex-direction: column; }
  .plateaux-gauche { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .plateaux-droite { width: 100%; padding: clamp(40px, 10vw, 64px) clamp(16px, 4vw, 60px); }
  .plateaux-titre { font-size: 28px; }
  /* Disposition en ligne (icône à gauche, titre+texte à droite, tout aligné
     à gauche), comme pour la section événementiel. */
  .plateaux-pictos { flex-direction: column; align-items: stretch; gap: 12px; }

  .plateaux-picto {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    text-align: left;
  }

  .plateaux-picto-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 48px;
    height: 48px;
  }

  .plateaux-picto-titre {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    font-size: 16px;
  }

  .plateaux-picto-texte {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    font-size: 14px;
  }

  /* Même gabarit de CTA que le hero (158×44, 14px). */
  .plateaux-cta { width: 190px; height: 57px; align-self: flex-start; }
  .plateaux-cta-ellipse { width: 190px; height: 57px; }
  .plateaux-cta-texte {
    font-size: 14px;
    font-weight: 600;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    max-width: 156px;
    padding: 0 8px;
  }
}

/* Seuil relevé à 1100px, même raison que les 2 sections voisines : le
   collage (couscous/masfouf/tampon) a besoin d'assez de largeur pour ne
   pas se retrouver écrasé/rogné dans une colonne de 50% trop étroite. */
@media (max-width: 1100px) {
  .apropos-inner { flex-direction: column; }

  .apropos-gauche { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  /* Centré via left:50% + translateX(-50%) plutôt que left:0 : la colonne
     peut aller jusqu'à 1100px de large ici, largeur bien supérieure au
     max-width:960px de la règle de base — ancrer à gauche laissait un
     vide non centré du côté droit dès que la colonne dépassait 960px. */
  .apropos-gauche-inner { width: 100%; right: auto; left: 50%; transform: translateX(-50%); }

  /* La hauteur du bloc zelij est pilotée en JS (moitié de la hauteur du
     texte, cf. main.js) et varie donc avec le contenu — dimensionner le
     collage à partir d'une largeur de viewport (comme avant) pouvait le
     rendre plus haut que ce conteneur désormais plus court, et il
     débordait sur la section suivante. On part maintenant de la hauteur
     réelle du conteneur (.apropos-gauche-inner a height:100% d'un
     .apropos-gauche à hauteur définie) : le collage ne peut plus jamais
     dépasser. max-width en garde-fou si jamais le conteneur devenait
     très large et peu haut. */
  .apropos-collage { width: auto; height: 85%; max-width: 92%; aspect-ratio: 587.97 / 519.19; }

  .apropos-droite { width: 100%; padding: clamp(32px, 8vw, 56px) clamp(24px, 6vw, 50px); }
  .apropos-titre { font-size: 28px; }
  .apropos-texte { width: 100%; }
}

/* ================================
   AVIS — ILS PARLENT DE NOUS
================================ */
:root {
  --marron-avis: #3a0c0c;
  --rouge-erreur: #DB312B;
}

#avis {
  width: 100%;
  background-color: #f3f1dd;
  background-image: url('../images/background-beige.jpg');
  background-size: cover;
  background-position: center;
}

.avis-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.avis-titre {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 100%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: center;
}

.avis-titre-bleu { color: var(--bleu); }
.avis-titre-rouge { color: var(--rouge); }

/* Galerie à défilement horizontal natif : scroll-snap plutôt qu'un
   carrousel piloté en JS — le navigateur gère lui-même le geste de
   swipe/scroll (mouvement réel et fluide, pas une transform simulée), et
   le nombre de cartes visibles à la fois (1, 2, 3...) découle simplement
   de la largeur disponible plutôt que d'être calculé/basculé en JS. Les
   cartes ont une taille fixe (clamp) et restent toujours carrées
   (aspect-ratio:1) — on ne les déforme jamais pour en faire tenir un
   nombre précis par rangée. */
.avis-carousel {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}

.avis-fleche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  color: var(--rouge);
  cursor: pointer;
  opacity: 1;
  transition: color 0.3s ease, opacity 0.3s ease;
}

/* Plus rien à défiler de ce côté : la flèche reste cliquable (au cas où)
   mais s'affiche à 70% d'opacité pour signaler qu'on est au bout. */
.avis-fleche:disabled {
  opacity: 0.7;
  cursor: default;
}

.avis-fleche:hover:not(:disabled) { color: var(--bleu); }

.avis-track {
  display: flex;
  gap: 24px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px clamp(16px, 4vw, 60px) 12px;
  box-sizing: border-box;
  scrollbar-width: none;
  /* Centre les cartes tant qu'elles tiennent toutes dans l'espace
     disponible (peu importe qu'il y en ait 1, 2 ou 3) ; "safe" bascule
     automatiquement sur un alignement à gauche si jamais ça déborde, pour
     qu'on puisse toujours atteindre la première carte au scroll. */
  justify-content: center;
  justify-content: safe center;
}

.avis-track::-webkit-scrollbar { display: none; }

.avis-carte-cadre {
  flex: 0 0 auto;
  scroll-snap-align: start;
  /* Toujours carrée : la largeur (fluide selon la fenêtre) et la hauteur
     (plafonnée à 65% de la hauteur d'écran) sont bornées indépendamment,
     et c'est la plus petite des deux qui l'emporte via aspect-ratio — une
     fenêtre basse (paysage mobile) ne peut donc jamais couper le bas de
     la carte. */
  width: min(clamp(260px, 42vw, 420px), 65vh);
  aspect-ratio: 1;
  background-image: url('../images/background-zelij.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 12px;
  box-sizing: border-box;
}

.avis-carte {
  background-color: var(--marron-avis);
  width: 100%;
  height: 100%;
  padding: 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.avis-carte-guillemet {
  width: 18px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

/* Taille de texte fixe et réduite (pas de scroll interne) : les cartes
   restant carrées, il ne doit jamais être nécessaire de faire défiler un
   témoignage pour le lire en entier — le texte doit tenir tel quel. */
.avis-carte-texte {
  font-family: var(--font-corps);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 125%;
  letter-spacing: 0;
  color: var(--creme);
  margin-top: 8px;
  flex-grow: 1;
}

.avis-carte-nom {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 12px;
  color: var(--creme);
  margin-top: 10px;
  flex-shrink: 0;
}

/* Texte un peu plus grand et davantage d'air dès qu'on quitte le format
   empilé (mêmes cartes plus grandes, donc plus de place) — tout reste
   plus resserré en dessous, où la place manque. */
@media (min-width: 1101px) {
  .avis-carte { padding: 32px; }
  .avis-carte-guillemet { width: 30px; height: 33px; }
  .avis-carte-texte { font-size: 16px; margin-top: 16px; }
  .avis-carte-nom { margin-top: 20px; }
}

/* ================================
   SÉPARATEUR AVIS / FAQ
   En flux normal (ni sticky ni fixed) : le header sticky (fond opaque,
   z-index:100) recouvre proprement ce séparateur pendant le scroll,
   sans jamais que les deux motifs amazigh se superposent à l'écran.
================================ */
.separateur-avis-faq {
  width: 100%;
  height: 38px;
  background-image: url('../images/separateur-amazigh.svg'), url('../images/background-beige.jpg');
  background-repeat: repeat-x, no-repeat;
  background-size: 1440px 38px, cover;
  background-position: left center, center;
}

/* ================================
   FAQ — FOIRES À QUESTIONS
================================ */
#faq {
  width: 100%;
  background-image: url('../images/background-beige.jpg');
  background-size: cover;
  background-position: center;
}

.faq-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.faq-titre-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.faq-picto {
  width: auto;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
}

.faq-titre {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 100%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: center;
}

.faq-titre-bleu { color: var(--bleu); }
.faq-titre-rouge { color: var(--rouge); }

.faq-liste {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid rgba(122, 92, 61, 0.25);
  transition: border-color 0.3s ease;
}

.faq-item:has(.faq-question[aria-expanded="true"]) {
  border-bottom-color: rgba(177, 77, 41, 0.6);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: none;
  border: none;
  padding: 28px 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 28px;
  line-height: 100%;
  color: var(--rouge);
}

.faq-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--bleu);
}

.faq-icone-etoile {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.faq-icone-moins { display: none; width: 20px; height: 4px; }

.faq-question[aria-expanded="true"] .faq-icone-etoile { display: none; }
.faq-question[aria-expanded="true"] .faq-icone-moins { display: block; }

.faq-reponse {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.35s ease;
}

.faq-reponse p {
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 18px;
  line-height: 130%;
  color: var(--bleu);
  max-width: 900px;
  padding-bottom: 24px;
}

.faq-lien {
  text-decoration: underline;
  color: inherit;
  transition: color 0.3s ease;
}

.faq-lien:hover { color: var(--rouge); }

@media (max-width: 768px) {
  .faq-inner { padding: 40px 24px; gap: 32px; }
  .faq-titre-wrapper { gap: 16px; }
  .faq-picto { height: 48px; }
  .faq-titre { font-size: 28px; }
  .faq-question { font-size: 18px; padding: 20px 0; }
}

/* ================================
   CONTACT — ON PASSE À TABLE ?
================================ */
#contact {
  width: 100%;
  background-image: url('../images/background-zelij.jpg');
  /* "cover" recalcule l'échelle ET le cadrage à partir de la hauteur de la
     boîte — donc dès que le formulaire affiche/masque des champs et fait
     varier la hauteur de #contact, le motif se redimensionnait ("bougeait").
     Ici la taille ne dépend que de la largeur (jamais de la hauteur) : le
     motif ne peut donc plus jamais changer d'échelle quand la section
     grandit ou rétrécit verticalement. La répétition verticale sert de
     filet de sécurité si la section devient plus haute qu'une image. */
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: top center;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 60px);
  box-sizing: border-box;
}

.contact-cadre {
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 70px);
  box-sizing: border-box;
}

.contact-panneau {
  max-width: 1400px;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 8vw, 110px);
  padding: clamp(24px, 5vw, 70px);
  box-sizing: border-box;
}

/* Une fois le formulaire déplié (plusieurs champs, colonne de gauche haute),
   la photo s'aligne en haut avec le titre plutôt que de se centrer sur
   toute la hauteur du formulaire. */
.contact-panneau.contact-panneau--etendu { align-items: flex-start; }

.contact-panneau-gauche {
  flex: 1 1 450px;
  min-width: 400px;
  display: flex;
  flex-direction: column;
}

.contact-panneau-gauche > * { margin-top: 0 !important; margin-bottom: 0 !important; }

.contact-titre {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 100%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.contact-titre-bleu { color: var(--bleu); }
.contact-titre-rouge { color: var(--rouge); }

.contact-intro {
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: var(--brun-texte);
  margin-top: 20px !important;
}

.contact-champs-obligatoires {
  font-family: var(--font-corps);
  font-style: italic;
  font-size: 13px;
  color: var(--rouge);
  text-align: left;
  margin-top: 24px !important;
}

.contact-etape,
.contact-formulaire {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-etape { margin-top: 16px !important; }
.contact-formulaire { margin-top: 8px !important; }

.requis { color: var(--rouge); }
.contact-optionnel { font-weight: 400; font-style: italic; color: var(--brun-doux); font-size: 14px; }

.contact-note-champ {
  display: block;
  font-family: var(--font-corps);
  font-style: italic;
  font-size: 13px;
  color: var(--brun-doux);
  margin-top: 4px;
}

/* ---- Champs ---- */
.contact-ligne {
  display: flex;
  gap: 24px;
}

.contact-ligne .champ { flex: 1; min-width: 0; }

.champ {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.champ label,
.champ legend {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 15px;
  color: var(--brun-texte);
}

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ input[type="number"],
.champ input[type="date"],
.champ select,
.champ textarea {
  font-family: var(--font-corps);
  font-size: 15px;
  line-height: 1.2;
  color: var(--brun-texte);
  background-color: #f3ecd8;
  border: 1px solid var(--brun-doux);
  padding: 14px 16px;
  box-sizing: border-box;
  width: 100%;
}

.champ textarea { resize: vertical; }

.champ input::placeholder,
.champ textarea::placeholder { color: var(--brun-doux); opacity: 0.8; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: 2px solid var(--bleu);
  outline-offset: 1px;
  background-color: #FFFEFF;
}

.champ select:hover { border-color: var(--bleu); }

.champ select option:checked,
.champ select option:hover {
  background-color: var(--bleu);
  color: #fff;
}

.champ select {
  appearance: none;
  background-image: url('../images/arrow-open.svg');
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 9px;
  padding-right: 40px;
}

/* Champ date : pas de raison qu'il occupe toute la largeur du formulaire
   comme un champ texte long (adresse, message…) — un gabarit resserré,
   cohérent avec les champs jumelés en paire au-dessus, évite qu'il
   paraisse anormalement long et empêche tout débordement du input
   natif (qui a une largeur minimale incompressible selon le navigateur). */
.champ-date { max-width: 320px; }

.champ-date-wrapper { position: relative; max-width: 100%; }
.champ-date-wrapper input[type="date"] {
  min-width: 0;
  padding-right: 44px;
  /* Safari iOS applique sa propre mise en forme au input natif type=date
     (hauteur et largeur qui débordent du gabarit CSS habituel) : on
     désactive son style natif pour forcer le même gabarit que les autres
     champs du formulaire (hauteur, bordure, padding identiques). */
  -webkit-appearance: none;
  appearance: none;
  height: 48px;
}
.champ-date-wrapper img {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* Masque l'icône native du input[type=date] pour ne garder que picto-calendar.svg */
.champ-date-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 40px;
  height: 100%;
  cursor: pointer;
}

/* Honeypot anti-spam : présent dans le DOM et remplissable par les robots,
   mais invisible pour un utilisateur humain (jamais display:none, que
   certains bots détectent et ignorent). */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Radios / checkbox groupes ---- */
.champ-radio,
.champ-checkbox-groupe {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.champ-radio legend,
.champ-checkbox-groupe legend { padding: 0; }

.contact-radio-principal,
.contact-radio-secondaire { flex-direction: column; gap: 10px; }

.champ-radio > label,
.champ-checkbox-groupe > label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 15px;
  color: var(--brun-texte);
  cursor: pointer;
}

.contact-radio-principal,
.contact-radio-secondaire,
.contact-radio-inline,
.popup-radio-ligne { flex-direction: row; flex-wrap: wrap; gap: 12px 32px; }

.champ-checkbox-groupe { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }

.champ input[type="radio"],
.champ input[type="checkbox"] {
  accent-color: #370000;
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.champ-checkbox {
  flex-direction: row;
  align-items: flex-start;
}

.champ-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  color: var(--brun-texte);
  cursor: pointer;
}

.champ-checkbox input { margin-top: 3px; }

.contact-sous-titre {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 18px;
  color: var(--brun-texte);
  margin-top: 8px !important;
}

.contact-sous-etape {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px !important;
}

.contact-cta-envoyer-distincte {
  margin-top: 20px !important;
}

.contact-note {
  font-family: var(--font-corps);
  font-style: italic;
  font-size: 14px;
  line-height: 150%;
  color: var(--brun-doux);
  background-color: #f3ecd8;
  border-left: 3px solid var(--rouge);
  padding: 12px 16px;
}

/* ---- Erreurs ---- */
.contact-erreur {
  font-family: var(--font-corps);
  font-size: 13px;
  color: var(--rouge-erreur);
  display: block;
  min-height: 0;
}

.champ.champ-invalide input,
.champ.champ-invalide select,
.champ.champ-invalide textarea {
  border-color: var(--rouge-erreur);
  background-color: #fbe9e4;
}

.contact-erreur-globale {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 14px;
  color: var(--rouge-erreur);
}

/* ---- Boutons ---- */
.contact-cta-retour {
  align-self: flex-start;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 15px;
  color: var(--bleu);
  transition: color 0.3s ease;
}

.contact-cta-retour:hover { color: var(--rouge); }

.contact-cta-envoyer {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 220px;
  height: 66px;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.contact-cta-envoyer-ellipse {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 66px;
}

.contact-cta-envoyer-texte {
  position: relative;
  z-index: 1;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 16px;
  color: var(--bleu);
  white-space: nowrap;
}

.contact-cta-envoyer:hover .contact-cta-envoyer-texte { color: var(--rouge); }

/* ---- Confirmation ---- */
.contact-confirmation {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 16px;
  color: var(--rouge-erreur);
  background-color: #fbe9e4;
  border-left: 3px solid var(--rouge-erreur);
  padding: 16px 20px;
  margin-top: 32px !important;
}

.contact-confirmation-icone {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: none;
}

.contact-confirmation.contact-confirmation--succes {
  color: #2E7D32;
  background-color: #eaf4ea;
  border-left-color: #2E7D32;
}

.contact-confirmation.contact-confirmation--succes .contact-confirmation-icone { display: block; }

/* ---- Colonne droite : photo + footer ---- */
.contact-panneau-droite {
  flex: 1 1 420px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.contact-photo-wrapper {
  position: relative;
  width: 100%;
  max-width: 420px;
}

.contact-photo {
  width: 100%;
  height: auto;
  display: block;
}

.contact-timbre {
  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 90px;
  height: auto;
}

.contact-footer {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.contact-footer-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-footer-icon {
  width: 22px;
  height: 22px;
  color: var(--brun-texte);
  flex-shrink: 0;
}

.contact-footer-texte {
  display: flex;
  flex-direction: column;
}

.contact-footer-label {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 14px;
  color: var(--brun-texte);
}

.contact-footer-texte a {
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 14px;
  color: var(--brun-texte);
  transition: color 0.3s ease;
}

.contact-footer-texte a:hover { color: var(--rouge); }

/* Les deux colonnes rétrécissent maintenant ensemble (flex-shrink) au lieu
   de rester à largeur fixe : la photo reste à côté du texte le plus
   longtemps possible (pas de bande blanche en dessous), et ne passe en
   dessous qu'à l'approche du seuil où même réduites au minimum (400px +
   280px) elles empièteraient l'une sur l'autre — autour de 1150px avec
   les 3 niveaux de padding imbriqués (#contact + .contact-cadre +
   .contact-panneau) et le gap. */
@media (max-width: 1150px) {
  .contact-panneau { flex-direction: column; align-items: center; }
  .contact-panneau-gauche { flex-basis: auto; width: 100%; min-width: 0; }
  .contact-panneau-droite { flex-basis: auto; align-items: flex-start; min-width: 0; }
  .contact-photo-wrapper { max-width: 280px; }
}

@media (max-width: 768px) {
  #contact { padding: 40px 16px; }
  .contact-cadre { padding: 24px; }
  .contact-panneau { padding: 32px 24px; gap: 32px; }
  .contact-titre { font-size: 28px; }
  .contact-ligne { flex-direction: column; gap: 24px; }
  .contact-radio-principal,
  .contact-radio-secondaire,
  .champ-checkbox-groupe { flex-direction: column; gap: 12px; }
  .contact-footer { gap: 16px; }
}

/* ================================
   CONFIGURATEUR POP-UP (devis événementiel)
================================ */
.popup-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  /* Empêche un balayage tactile qui commence sur le fond sombre (en
     dehors de la fenêtre) de faire défiler la page derrière. */
  touch-action: none;
}

/* Zoom-in bref et sec à l'ouverture (pas un fondu long/élégant) : la
   fenêtre part nettement réduite et arrive net à sa taille finale. Le
   redémarrage est forcé en JS (cf. ouvrirPopup dans main.js) plutôt que
   de compter sur le rejeu automatique au passage display:none → visible,
   pas fiable partout. */
@keyframes popup-zoom-in {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.popup-fenetre {
  animation: popup-zoom-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: 100%;
  max-width: 1040px;
  max-height: 90vh;
  overflow-y: auto;
  /* Empêche le scroll de "remonter" à la page derrière une fois arrivé
     en haut/bas de la pop-up (comportement par défaut du navigateur sans
     ça, particulièrement sur mobile). */
  overscroll-behavior: contain;
  background-color: #e8dfc4;
  background-image: url('../images/background-beige.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border: 3px solid #370000;
  border-radius: 20px;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--rouge) transparent;
}

.popup-contenu {
  padding: 10px 60px 50px;
}

/* Le défileur natif est un rectangle droit qui chevauche les coins arrondis
   de la pop-up : on le rend fin et on l'inset avec une marge sur la piste
   pour qu'il reste dans la partie droite du cadre, sans toucher la courbe. */
.popup-fenetre::-webkit-scrollbar { width: 10px; }
.popup-fenetre::-webkit-scrollbar-track { background: transparent; margin: 24px 0; }
.popup-fenetre::-webkit-scrollbar-thumb {
  background-color: var(--rouge);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Barre sticky à part entière (avec sa propre hauteur et son propre fond
   opaque) : la croix reste visible en permanence au scroll sans jamais
   chevaucher le contenu, puisque .popup-contenu est un flux normal placé
   après elle plutôt que superposé par-dessus. */
.popup-barre-fermer {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  padding: 20px 24px 0;
  background-color: #e8dfc4;
  background-image: url('../images/background-beige.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-radius: 20px 20px 0 0;
}

.popup-fermer {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-bottom: 16px;
}

.popup-fermer img { width: 22px; height: 22px; }

.popup-etapes-nav {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
}

.popup-titre-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.popup-simulateur-prix {
  display: inline-flex;
  align-items: center;
  background-color: var(--marron-avis);
  color: var(--jaune);
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 18px;
  padding: 12px 20px;
  border-radius: 8px;
  white-space: nowrap;
}

.popup-recap-titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.popup-recap-titre .popup-simulateur-prix {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: clamp(13px, 2.5vw, 16px);
  /* Le prix ne doit plus refuser de passer à la ligne (white-space:nowrap
     hérité de la règle de base) : dans une carte étroite, ça le faisait
     déborder du cadre plutôt que de passer sous le titre. */
  white-space: normal;
}

.popup-simulateur-montant { margin-left: 6px; }

/* Récapitulatif (étape 4) : seul le montant passe en blanc, le label
   "Prix estimé :" garde la couleur jaune héritée. */
.popup-recap-titre .popup-simulateur-montant { color: #fff; }

.popup-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 130px;
  flex-shrink: 0;
}

.popup-badge-img { width: 30px; height: 30px; }

.popup-badge-texte {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 14px;
  line-height: 120%;
  color: #370000;
  text-align: center;
}

.popup-badge-trait {
  flex: 1;
  min-width: 16px;
  height: 2px;
  background-color: #370000;
  margin-top: 15px;
}

.popup-badge-item.courant .popup-badge-texte { color: var(--rouge); }

.popup-etape > *,
.popup-recap-corps p { margin-top: 0 !important; margin-bottom: 0 !important; }

.popup-titre {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: 44px;
  line-height: 100%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.popup-titre-sombre { color: var(--brun-texte); }
.popup-titre-rouge { color: var(--rouge); }

.popup-sous-titre {
  font-family: var(--font-corps);
  font-size: 16px;
  color: var(--brun-texte);
  margin-top: 12px !important;
  margin-bottom: 32px !important;
}

/* ---- Étape 1 : cartes formule ---- */
.popup-cartes-formule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.popup-carte {
  position: relative;
  cursor: pointer;
  display: block;
}

.popup-carte-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.popup-carte-formule {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #f3ecd8;
  border: 2px solid #fff;
  border-radius: 16px;
  padding: 28px;
  box-sizing: border-box;
}

.popup-carte-formule:has(.popup-carte-input:checked) {
  background-color: #fff;
  border-color: var(--bleu);
}

.popup-carte-coche {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  display: none;
}

.popup-carte-input:checked ~ .popup-carte-coche { display: block; }

.popup-carte-entete {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.popup-carte-option {
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 15px;
  color: var(--brun-texte);
}

.popup-carte-titre {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--brun-texte);
}

.popup-carte-texte {
  font-family: var(--font-corps);
  font-size: 15px;
  line-height: 140%;
  color: var(--brun-texte);
}

.popup-carte-prix {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-corps);
  font-size: 15px;
  color: var(--brun-texte);
  margin-top: auto !important;
}

.popup-carte-prix strong { color: var(--bleu); }

/* ---- Étape 2/3 : grille entrées & plats ---- */
.popup-grille-cartes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.popup-carte-entree,
.popup-carte-plat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background-color: #f3ecd8;
  border: 1px solid #FFFEFF;
  border-radius: 12px;
  padding: 18px 20px;
  box-sizing: border-box;
}

.popup-carte-entree:has(.popup-carte-input:checked),
.popup-carte-plat:has(.popup-carte-input:checked) {
  background-color: #fff;
  border-color: var(--bleu);
}

.popup-carte-case {
  width: 20px;
  height: 20px;
  border: 2px solid var(--brun-doux);
  background-color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
}

.popup-carte-entree .popup-carte-case { border-radius: 50%; }
.popup-carte-plat .popup-carte-case { border-radius: 50%; }

.popup-carte-entree .popup-carte-input:checked ~ .popup-carte-case {
  border-color: var(--bleu);
  background-image: url('../images/coche-choix-unique.svg');
}

.popup-carte-plat .popup-carte-input:checked ~ .popup-carte-case {
  border-color: var(--bleu);
  background-image: url('../images/coche-choix-unique.svg');
}

.popup-carte-input:disabled ~ .popup-carte-case { opacity: 0.4; }
.popup-carte:has(.popup-carte-input:disabled) { opacity: 0.5; cursor: not-allowed; }

.popup-carte-corps strong {
  display: block;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 15px;
  color: var(--bleu);
  margin-bottom: 4px;
}

.popup-carte-supplement {
  color: var(--rouge);
  margin-left: 6px;
  white-space: nowrap;
}

.popup-carte-corps p {
  font-family: var(--font-corps);
  font-size: 14px;
  line-height: 140%;
  color: var(--brun-texte);
}

/* ---- Étape 4 : récapitulatif ---- */
.popup-recap {
  margin-bottom: 32px !important;
}

.popup-recap-titre {
  background-color: var(--marron-avis);
  color: var(--jaune);
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: clamp(14px, 3vw, 16px);
  padding: clamp(14px, 3vw, 18px) clamp(16px, 4vw, 24px);
}

.popup-recap-corps {
  background-color: #fff;
  padding: clamp(16px, 4vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Le flexbox précédent traitait la valeur comme un bloc "tout ou rien" :
   soit elle tenait entière à côté du libellé, soit elle passait
   entièrement à la ligne — impossible d'avoir un début sur la même
   ligne que le libellé puis une suite alignée à droite. Icône + libellé
   en float:left (comme une étiquette) : la valeur (bloc normal, pas flex)
   vient alors se placer à côté sur la première ligne, puis s'enroule
   normalement sur toute la largeur une fois l'étiquette dépassée —
   text-align:right aligne chacune de ses lignes. */
.popup-recap-corps p {
  overflow: hidden;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: clamp(13px, 2.2vw, 15px);
  color: var(--brun-texte);
}

.popup-recap-corps p img {
  float: left;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  margin-right: 8px;
}

.popup-recap-label {
  float: left;
  margin-right: 8px;
  white-space: nowrap;
}

.popup-recap-valeur {
  display: block;
  color: var(--bleu);
  text-align: right;
}

/* ---- Navigation étapes pop-up ---- */
.popup-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 32px !important;
}

.popup-lien-retour,
.popup-lien-suivant,
.popup-lien-envoyer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: clamp(14px, 3vw, 18px);
  padding: 0;
  transition: color 0.3s ease;
}

.popup-lien-retour { color: var(--bleu); }
.popup-lien-suivant,
.popup-lien-envoyer { color: var(--rouge); }

.popup-lien-retour:hover { color: var(--rouge); }
.popup-lien-suivant:hover:not(:disabled),
.popup-lien-envoyer:hover { color: var(--bleu); }

.popup-lien-suivant:disabled,
.popup-lien-envoyer:disabled {
  color: var(--brun-doux);
  opacity: 0.5;
  cursor: not-allowed;
}

.popup-lien-retour svg,
.popup-lien-suivant svg,
.popup-lien-envoyer svg { width: clamp(13px, 2vw, 16px); height: clamp(13px, 2vw, 16px); flex-shrink: 0; }

@media (max-width: 768px) {
  .popup-fenetre { border-radius: 12px; }
  .popup-contenu { padding: 8px 24px 32px; }
  .popup-barre-fermer { padding: 16px 16px 0; border-radius: 12px 12px 0 0; }
  .popup-titre { font-size: 30px; }
  .popup-cartes-formule,
  .popup-grille-cartes { grid-template-columns: 1fr; }
}

/* Les 4 badges (130px chacun) + leurs traits de liaison tiennent encore
   confortablement sur une seule ligne jusqu'ici — comme en desktop —
   inutile de les tasser plus tôt juste parce qu'on est passé sous 768px. */
@media (max-width: 680px) {
  .popup-etapes-nav { flex-wrap: wrap; gap: 8px 0; }
  .popup-badge-trait { display: none; }
  .popup-badge-item { width: 70px; }
}

/* ================================
   FOOTER
================================ */
#footer {
  width: 100%;
  background-color: #f3f1dd;
  background-image: url('../images/background-hero.jpg');
  background-size: cover;
  background-position: center;
}

.footer-haut {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 90px) clamp(24px, 5vw, 70px) 0;
  box-sizing: border-box;
}

.footer-colonnes {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 220px;
  padding-bottom: 40px;
}

.footer-colonne {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-picto {
  position: absolute;
  display: block;
}

/* top doit être <= -(hauteur de l'icône) pour qu'elle passe entièrement
   au-dessus de "Nos services" (y=0), quelle que soit sa position
   horizontale — -20px laissait 40px de l'icône (60px de haut) chevaucher
   le titre. */
.footer-picto-couscoussier {
  top: -64px;
  left: 160px;
  width: 60px;
  height: auto;
}

.footer-picto-theiere {
  right: 0;
  bottom: -20px;
  width: 110px;
  height: auto;
}

.footer-titre {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 18px;
  color: var(--rouge);
}

.footer-liens {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-liens a {
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 16px;
  color: var(--bleu);
  transition: color 0.3s ease;
}

.footer-liens a:hover { color: var(--rouge); }

.footer-colonne-services .footer-liens a { white-space: nowrap; }

.footer-copyright {
  font-family: var(--font-corps);
  font-size: 14px;
  color: var(--bleu);
  margin-top: 24px;
  text-align: center;
}

.footer-trait {
  width: 100%;
  height: 2px;
  background-color: var(--rouge);
}

.footer-bas {
  width: 100%;
  padding: 30px 24px 0;
  box-sizing: border-box;
}

.footer-logo-grand {
  display: block;
  width: 100%;
  max-width: 1123px;
  height: auto;
  margin: 0 auto;
}

/* Seuil relevé à 1100px : le gap fixe de 220px entre les 3 colonnes texte
   ne peut pas rétrécir (les pictos sont ancrés en px fixes dessus), donc
   l'empilement doit intervenir avant que les colonnes ne se resserrent.
   En dessous de 1100px, les 3 blocs s'empilent alignés à gauche (comme
   le reste du site), avec les pictos ancrés dans les coins de la zone —
   même traitement du plus grand tablette jusqu'au plus petit mobile,
   seuls le padding et l'espacement entre liens se resserrent encore un
   peu plus bas (768px). */
@media (max-width: 1100px) {
  .footer-colonnes { flex-direction: column; align-items: flex-start; gap: 24px; }

  .footer-picto-couscoussier {
    position: absolute;
    top: -36px;
    left: auto;
    right: 0;
    width: 44px;
    margin-bottom: 0;
  }

  .footer-picto-theiere {
    position: absolute;
    right: 0;
    bottom: -8px;
    width: 64px;
    margin-top: 0;
  }

  .footer-copyright { text-align: left; }
}

@media (max-width: 768px) {
  .footer-haut { padding: 40px 16px 0; }
  .footer-liens { gap: 4px; }
}

/* ================================
   PAGE MENU — menu.html
================================ */

/* ---- Intro ---- */
#menu-intro {
  width: 100%;
  background-color: #f3f1dd;
  background-image: url('../images/background-hero.jpg');
  background-size: cover;
  background-position: center;
}

.menu-intro-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 6vw, 100px);
  padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 70px);
  box-sizing: border-box;
}

.menu-intro-texte {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu-titre {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 65px);
  line-height: 100%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.menu-titre-bleu { color: var(--bleu); }
.menu-titre-rouge { color: var(--rouge); }

.menu-intro-description {
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: 18px;
  line-height: 150%;
  color: #000;
}

/* Largeur fluide + aspect-ratio (au lieu d'un bloc figé 340×400) : les 3
   visuels en dessous passent en pourcentages pour suivre automatiquement,
   comme le collage à-propos. */
.menu-intro-collage {
  position: relative;
  width: clamp(220px, 18vw, 340px);
  aspect-ratio: 340 / 400;
  flex-shrink: 0;
}

.menu-collage-img {
  position: absolute;
  width: auto;
  height: auto;
}

.menu-collage-1 {
  width: 70.59%;
  top: 0;
  left: 0;
  z-index: 1;
}

.menu-collage-2 {
  width: 55.88%;
  bottom: 0;
  right: 0;
  z-index: 2;
}

.menu-collage-badge {
  position: absolute;
  top: 27.5%;
  left: 60.29%;
  width: 41.18%;
  height: 35%;
  z-index: 3;
}

/* ---- La carte ---- */
#menu-carte {
  width: 100%;
  background-image: url('../images/background-yellow.jpg');
  background-size: cover;
  background-position: center;
}

.menu-carte-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(24px, 6vw, 70px);
  box-sizing: border-box;
}

.menu-categorie { display: flex; flex-direction: column; gap: 4px; }

.menu-categorie-titre {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.menu-categorie-sombre { color: var(--brun-nuit); }
.menu-categorie-rouge { color: var(--rouge); }

.menu-categorie-sous-titre {
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 18px);
  color: #000;
  margin-bottom: 16px;
}

.menu-grille {
  columns: 2;
  column-gap: 40px;
  margin-top: 40px;
}

.menu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  break-inside: avoid;
  margin-bottom: 20px;
}

.menu-item-picto {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  flex-shrink: 0;
}

.menu-item-corps h3 {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--bleu);
}

.menu-item-corps p {
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 140%;
  color: #000;
  margin-top: 2px;
}

.menu-grille-desserts { columns: 1; }

.menu-item-inline p {
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 18px);
  color: #000;
}

.menu-item-inline p strong { font-weight: 700; color: var(--bleu); margin-right: 6px; }

.menu-separateur-fin {
  height: 1px;
  background-color: rgba(122, 92, 61, 0.3);
  margin: 40px 0;
}

.menu-note {
  font-family: var(--font-corps);
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--bleu);
  background-color: #f3ecd8;
  padding: 20px 24px;
  margin-top: 40px;
}

.menu-lien {
  color: var(--bleu);
  text-decoration: underline;
  font-weight: 700;
  transition: color 0.3s ease;
}

.menu-lien:hover { color: var(--rouge); }

/* ---- Formules ---- */
#menu-formules {
  width: 100%;
  background-image: url('../images/background-red.jpg');
  background-size: cover;
  background-position: center;
}

.menu-formules-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 70px);
  box-sizing: border-box;
}

.menu-formules-titre {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(24px, 3.5vw, 40px);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-align: center;
}

.menu-formules-blanc { color: var(--creme); }
.menu-formules-jaune { color: var(--jaune); }

.menu-formules-cartes {
  display: flex;
  gap: 32px;
  width: 100%;
  max-width: 1100px;
}

.menu-formule-carte {
  flex: 1;
  background-color: #f3ecd8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.menu-formule-entete {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--marron-avis);
  padding: 20px 24px;
}

.menu-formule-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 2px solid var(--jaune);
  border-radius: 50%;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 15px;
  color: var(--jaune);
}

.menu-formule-entete-texte h3 {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--creme);
}

.menu-formule-entete-texte p {
  font-family: var(--font-corps);
  font-size: 13px;
  color: var(--creme);
  opacity: 0.85;
}

.menu-formule-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.menu-formule-liste li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 140%;
  color: #000;
}

.menu-formule-liste li img {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  flex-shrink: 0;
}

.menu-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 66px;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.menu-cta-ellipse {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 66px;
}

.menu-cta-texte {
  position: relative;
  z-index: 1;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--jaune);
  white-space: nowrap;
}

.menu-cta:hover .menu-cta-texte { color: var(--creme); }

/* ---- CTA flottant (apparaît après l'intro, disparaît une fois les formules atteintes) ---- */
.menu-cta-flottant {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--rouge);
  color: var(--creme);
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  padding: 18px 34px;
  border: none;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.menu-cta-flottant.menu-cta-flottant--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.menu-cta-flottant:hover { background-color: var(--bleu); }

@media (max-width: 900px) {
  .menu-intro-inner { flex-direction: column; align-items: flex-start; padding: 60px 24px; }
  .menu-carte-inner { padding: 60px 24px; }
  .menu-grille { columns: 1; }
  .menu-formules-inner { padding: 60px 24px; }
  .menu-formules-cartes { flex-direction: column; }
}

.menu-confirmation-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Marge portée par le message lui-même (pas par le wrapper) : comme
   .contact-confirmation passe en display:none via [hidden], le wrapper
   se réduit naturellement à 0 quand aucune confirmation n'est affichée,
   au lieu de garder son padding même vide. */
.menu-confirmation-wrapper .contact-confirmation {
  margin: 40px 70px;
}

@media (max-width: 600px) {
  .menu-cta-flottant { bottom: 16px; right: 16px; left: 16px; justify-content: center; }
  .menu-confirmation-wrapper .contact-confirmation { margin: 24px; }
}

/* ================================
   PAGES LÉGALES (CGU / Mentions légales / Protection des données)
================================ */
.legal-intro {
  width: 100%;
  background-color: #f3f1dd;
  background-image: url('../images/background-beige.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.legal-intro-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 70px 40px 56px;
}

.legal-fil-ariane {
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: 14px;
  color: var(--brun-doux);
  margin-bottom: 16px;
}

.legal-fil-ariane a { color: var(--bleu); }
.legal-fil-ariane a:hover { color: var(--rouge); }

.legal-titre {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 100%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--brun-nuit);
}

.legal-titre span { color: var(--rouge); }

.legal-maj {
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: 14px;
  color: var(--brun-doux);
  margin-top: 16px;
}

.legal-corps {
  width: 100%;
  background-color: #f3f1dd;
  background-image: url('../images/background-beige.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.legal-corps-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 40px 100px;
}

.legal-sommaire {
  padding: 0;
  margin-bottom: 48px;
}

.legal-sommaire p {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 16px;
  color: var(--bleu);
  margin-bottom: 12px;
}

.legal-sommaire ol {
  list-style: none;
  counter-reset: sommaire;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-sommaire li { counter-increment: sommaire; }

.legal-sommaire a {
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: 15px;
  color: var(--bleu);
}

.legal-sommaire a::before { content: counter(sommaire) ". "; }
.legal-sommaire a:hover { color: var(--rouge); }

.legal-section { margin-top: 40px; }
.legal-section:first-of-type { margin-top: 0; }

.legal-section h2 {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 12px;
  scroll-margin-top: 24px;
}

.legal-section h3 {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 17px;
  color: var(--brun-nuit);
  margin-top: 20px;
  margin-bottom: 8px;
}

.legal-section p {
  font-family: var(--font-corps);
  font-size: 16px;
  line-height: 1.7;
  color: var(--brun-texte);
  margin-bottom: 12px;
}

.legal-section ul {
  margin: 0 0 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal-section li {
  font-family: var(--font-corps);
  font-size: 16px;
  line-height: 1.6;
  color: var(--brun-texte);
}

.legal-section a { color: var(--bleu); text-decoration: underline; }
.legal-section a:hover { color: var(--rouge); }

.legal-note {
  font-family: var(--font-corps);
  font-size: 15px;
  color: var(--bleu);
  background-color: #f3ecd8;
  padding: 18px 22px;
  margin-top: 16px;
}

.legal-alerte {
  font-family: var(--font-corps);
  font-size: 15px;
  line-height: 1.6;
  color: var(--rouge-erreur);
  background-color: #fbe9e4;
  border-left: 3px solid var(--rouge-erreur);
  padding: 18px 22px;
  margin-bottom: 40px;
}

.legal-alerte strong { display: block; margin-bottom: 6px; font-size: 15px; }
.legal-alerte code { font-family: monospace; background: rgba(0,0,0,0.06); padding: 1px 5px; }

@media (max-width: 600px) {
  .legal-intro-inner { padding: 48px 24px 40px; }
  .legal-corps-inner { padding: 40px 24px 70px; }
  .legal-titre { font-size: 34px; }
}

/* ================================
   BANDEAU COOKIES
================================ */
.bandeau-cookies {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 720px;
  margin: 0 auto;
  background-color: #f3f1dd;
  background-image: url('../images/background-beige.jpg');
  background-size: cover;
  background-position: center;
  border: 2px solid var(--rouge);
  padding: 20px 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.bandeau-cookies-texte {
  font-family: var(--font-corps);
  font-size: 14px;
  line-height: 1.6;
  color: var(--brun-texte);
  flex: 1 1 320px;
}

.bandeau-cookies-texte a { color: var(--bleu); text-decoration: underline; }
.bandeau-cookies-texte a:hover { color: var(--rouge); }

.bandeau-cookies-boutons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.bandeau-cookies-btn {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 14px;
  border: 2px solid var(--rouge);
  padding: 12px 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.bandeau-cookies-btn--accepter { color: var(--creme); background-color: var(--rouge); }
.bandeau-cookies-btn--accepter:hover { background-color: var(--bleu); border-color: var(--bleu); }

.bandeau-cookies-btn--refuser { color: var(--rouge); background-color: transparent; }
.bandeau-cookies-btn--refuser:hover { color: var(--bleu); border-color: var(--bleu); }

@media (max-width: 600px) {
  .bandeau-cookies { left: 12px; right: 12px; bottom: 12px; padding: 16px 20px; gap: 16px; }
}

/* ================================
   PAGE 404
================================ */
.notfound-section {
  width: 100%;
  min-height: calc(100vh - 200px);
  background-color: #f3f1dd;
  background-image: url('../images/background-hero.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notfound-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  position: relative;
}

.notfound-picto {
  position: absolute;
  top: -10px;
  width: auto;
  height: 90px;
  object-fit: contain;
}

.notfound-picto-gauche { left: -20px; transform: rotate(-8deg); }
.notfound-picto-droite { right: -20px; top: auto; bottom: -10px; transform: rotate(8deg); }

.notfound-code {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(90px, 12vw, 140px);
  line-height: 100%;
  letter-spacing: -0.04em;
  color: var(--rouge);
  opacity: 0.15;
}

.notfound-titre {
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 110%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--brun-nuit);
  margin-top: -48px;
}

.notfound-titre span { color: var(--rouge); }

.notfound-texte {
  font-family: var(--font-corps);
  font-size: 17px;
  line-height: 1.7;
  color: var(--brun-texte);
  max-width: 520px;
  margin-top: 8px;
}

.notfound-ctas {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 24px;
}

@media (max-width: 600px) {
  .notfound-code { font-size: 90px; }
  .notfound-titre { font-size: 28px; margin-top: -28px; }
  .notfound-picto { height: 56px; }
  .notfound-ctas { flex-direction: column; align-items: center; gap: 16px; }
}

/* ================================
   RIDEAU D'OUVERTURE DE PAGE (menu.html)
   Panneau plein écran qui recouvre la page au chargement puis se translate
   vers le haut : la zone révélée grandit depuis le bas du viewport vers
   le haut, jusqu'à disparaître entièrement de l'écran.
================================ */
.page-reveal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--rouge);
  transform: translateY(0);
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.page-reveal.page-reveal--ouvert {
  transform: translateY(-100%);
}

.page-reveal--bleu { background-color: var(--bleu); }

/* ================================
   ANIMATIONS AU SCROLL
   Système générique : chaque élément part masqué/décalé et rejoint son
   état final au passage en JS de la classe .reveal--visible (déclenchée
   par IntersectionObserver, cf. main.js). Le stagger sur les grilles se
   fait via un délai de transition croissant par enfant (nth-child).
================================ */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.33, 1, 0.68, 1), transform 1.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.reveal { transform: translateY(48px); }
.reveal-left { transform: translateX(-48px); will-change: transform, opacity; }
.reveal-right { transform: translateX(48px); will-change: transform, opacity; }
.reveal-scale { transform: scale(0.94); }

.reveal.reveal--visible,
.reveal-left.reveal--visible,
.reveal-right.reveal--visible,
.reveal-scale.reveal--visible {
  opacity: 1;
  transform: none;
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1.1s cubic-bezier(0.33, 1, 0.68, 1), transform 1.1s cubic-bezier(0.33, 1, 0.68, 1);
}

.reveal-stagger.reveal--visible > * { opacity: 1; transform: none; }

.reveal-stagger.reveal--visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.reveal--visible > *:nth-child(2) { transition-delay: 120ms; }
.reveal-stagger.reveal--visible > *:nth-child(3) { transition-delay: 240ms; }
.reveal-stagger.reveal--visible > *:nth-child(4) { transition-delay: 360ms; }
.reveal-stagger.reveal--visible > *:nth-child(5) { transition-delay: 480ms; }
.reveal-stagger.reveal--visible > *:nth-child(6) { transition-delay: 600ms; }
.reveal-stagger.reveal--visible > *:nth-child(7) { transition-delay: 720ms; }
.reveal-stagger.reveal--visible > *:nth-child(8) { transition-delay: 840ms; }
.reveal-stagger.reveal--visible > *:nth-child(n+9) { transition-delay: 960ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ================================
   ENTRÉE DU H1 (accueil / menu)
   Animation de chargement (pas liée au scroll) : le titre principal
   remonte du bas vers le haut en fondu à l'arrivée sur la page.
================================ */
@keyframes titre-entree {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-titre,
.menu-titre {
  animation: titre-entree 3s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 1.1s;
}

@media (prefers-reduced-motion: reduce) {
  .hero-titre,
  .menu-titre {
    animation: none;
  }
}

/* ================================
   BANDEAU DÉFILANT (entre le hero et à propos)
   Boucle infinie : le contenu du track est dupliqué à l'identique, et
   l'animation translate exactement de -50% de sa largeur totale — au
   moment où elle boucle, la seconde moitié (copie) prend visuellement
   la place de la première : aucune coupure, aucune zone vide.
================================ */
.marquee-bandeau {
  width: 100%;
  overflow: hidden;
  background-color: var(--jaune);
  padding: clamp(10px, 2vw, 20px) 0;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  width: max-content;
  animation: marquee-defile 96s linear infinite;
}

.marquee-item {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: clamp(13px, 2.2vw, 30px);
  color: var(--rouge);
  white-space: nowrap;
}

.marquee-separateur {
  width: clamp(10px, 1.2vw, 16px);
  height: clamp(10px, 1.2vw, 16px);
  flex-shrink: 0;
}

@keyframes marquee-defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .popup-fenetre { animation: none; }
}

.marquee-bandeau--bleu { background-color: var(--bleu); }
.marquee-bandeau--bleu .marquee-item { color: var(--jaune); }

/* ================================
   CORRECTIF FLOU iOS — background-attachment:fixed
   Safari iOS ne supporte pas vraiment les fonds fixes : il les "simule"
   au prix d'un rendu net dégradé (flou), particulièrement visible sur les
   grandes zones comme le fond zelij de la section contact. L'effet de
   fond fixe n'apporte de toute façon pas grand-chose sur un petit écran
   qui défile peu à la fois : on repasse en scroll normal en dessous de
   1100px, où la plupart des visites mobiles/iPhone se produisent.
================================ */
@media (max-width: 1100px) {
  .popup-fenetre,
  .popup-barre-fermer,
  .legal-intro,
  .legal-corps {
    background-attachment: scroll;
  }
}

/* Version allégée de background-zelij.jpg (1400px au lieu de 4500px) sur
   mobile/tablette : la pleine résolution desktop n'apporte rien sur un
   écran étroit et pèse inutilement sur la connexion, ce qui retardait
   fortement l'affichage (LCP) sur mobile. */
@media (max-width: 1100px) {
  .apropos-gauche,
  .avis-carte-cadre,
  #contact {
    background-image: url('../images/background-zelij-mobile.jpg');
  }
}