/* ==========================================================================
   BOLAMA — Burgers & Friends · bolama.ch
   Design system fidèle aux maquettes Figma « Bolama Website (final) »
   ========================================================================== */

/* ---- Variables ---------------------------------------------------------- */
:root {
  /* Palette officielle */
  --vert: #0B3D27;
  --vert-selecteur: #2B5643;
  --vert-plaque: #052617;          /* blocs photo sur fond vert */
  --vert-equipe: #0E3222;          /* fond de la section équipe */
  --creme: #F4F5F0;
  --orange: #F6921D;               /* accent sur fonds foncés */
  --orange-fonce: #EB8309;         /* accent sur fonds clairs (contraste) */
  --gold: #AD8F15;                 /* carte GOAT */
  --noir: #000000;
  --blanc: #FFFFFF;

  /* Couleurs dérivées des maquettes */
  --texte-desc: #404D42;
  --vert-clair-texte: #CCD6C9;
  --gris-note: #9B9B9B;
  --bord-carte: rgba(11, 61, 39, 0.8);

  /* Typographies — si les fontes de marque (Aracne, DIN) sont ajoutées
     en @font-face, elles prennent automatiquement le dessus. */
  --font-display: "Aracne Soft Cond Reg", "Amatic SC", cursive;
  --font-script: "Sign Painting Corporate", "Caveat", "Caveat Fallback", cursive;
  --font-titres: "DIN Condensed", "D-DIN Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-btn: "D-DIN Condensed", "DIN Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-corps-cond: "DIN Condensed Light", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-corps: "DIN Alternate", "D-DIN", "Barlow", "Helvetica Neue", sans-serif;

  --header-h: 70px;
  --radius-carte: 20px;
  --transition-moment: 320ms cubic-bezier(.4, 0, .2, 1);
}

/* ---- Reset léger --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-corps);
  font-size: 16px;
  line-height: 1.45;
  color: var(--vert);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: normal; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ---- Fonds quadrillés (papier millimétré) ------------------------------- */
.grille-claire {
  background-color: #FDFDFB;
  background-image:
    linear-gradient(rgba(11, 61, 39, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 61, 39, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(11, 61, 39, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 61, 39, 0.035) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
.grille-foncee {
  background-color: var(--vert);
  background-image:
    linear-gradient(rgba(244, 245, 240, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 245, 240, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(244, 245, 240, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 245, 240, 0.035) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

/* ---- Typo utilitaires ---------------------------------------------------- */
.titre-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis: none;            /* pas de faux-gras sur Aracne */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.08;
}
.script,
.carte .alias,
.hero-script,
.membre .prenom,
.carte-formulaire .titre-form,
.form-confirmation,
.legende-script {
  font-optical-sizing: auto;
  font-style: normal;
}
.script {
  font-family: var(--font-script);
  font-weight: 700;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(14, 50, 34, 0.9);   /* --vert-equipe à 90 % d'opacité */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;                 /* pas de padding vertical : le logo prend toute la hauteur */
}
.site-header .logo {
  height: 27px;                    /* logo texte */
  margin-right: auto;              /* le groupe lama + texte reste à gauche */
  padding-right: 20px;             /* espace à droite du logo texte */
  display: block;
  flex-shrink: 0;
}
.site-header .logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
}
/* La tête du lama sort du bas du header, à gauche du logo texte */
.site-header .lama-header {
  align-self: flex-end;            /* collée au bord inférieur du header */
  height: 70px;
  width: auto;
  display: block;
  margin-right: 13px;              /* espace lama ↔ logo texte */
  flex-shrink: 0;
}
.actions-cta { display: flex; gap: 10px; align-items: center; }

.btn {
  display: inline-block;
  font-family: var(--font-btn);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  padding: 14px 24px;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 120ms ease, filter 120ms ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn-secondaire {
  border: 2px solid var(--blanc);
  color: var(--blanc);
  padding: 12px 22px;
}
.btn-primaire {
  background: var(--orange);
  color: var(--vert);
}
.btn-orange-fonce {
  background: var(--orange-fonce);
  color: var(--blanc);
}
/* Afterwork : texte du bouton boissons dans le même vert que « Commander » */
.moment-panneau[data-moment-panneau="afterwork"] .btn-orange-fonce {
  color: var(--vert);
}

/* ==========================================================================
   HERO adaptatif + sélecteur de créneau
   ========================================================================== */
.hero {
  position: relative;
  background: var(--vert);
  color: var(--creme);
  display: grid;
  /* le hero passe sous le header (translucide) : la vidéo va jusqu'en haut */
  margin-top: calc(var(--header-h) * -1);
  min-height: 85vh;
  min-height: 85svh;               /* section 1 = 85 % de l'écran */
  padding: calc(84px + var(--header-h)) 24px 104px;
}
/* Image de fond du hero : sous les panneaux, avec un voile vert pour la
   lisibilité du texte. La source (créneau + desktop/mobile) est gérée en JS. */
.hero-fond {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-fond img,
.hero-fond video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease;
}
.hero-fond img.pret,
.hero-fond video.pret { opacity: 1; }
.hero-voile {
  position: absolute;
  inset: 0;
  background: rgba(11, 61, 39, 0.68);
}
.hero .hero-panneau { position: relative; z-index: 1; }

.hero-panneau {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--transition-moment), transform var(--transition-moment);
}
.hero-panneau.actif {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.hero-titre {
  font-size: clamp(42px, 5.8vw, 68px);
  color: var(--creme);
}
.hero-script {
  font-size: clamp(24px, 3vw, 32px);
  color: var(--orange);
  margin-top: 12px;                /* espace titre ↔ accroche script */
}
.hero-sous-titre {
  font-family: var(--font-corps-cond);
  font-weight: 400;
  font-size: 18px;
  color: var(--vert-clair-texte);
}

/* Sélecteur persistant : centré dans le header sur desktop, juste sous le
   header sur mobile. Visible uniquement quand le sélecteur du hero est
   dépassé ET que la partie dynamique est encore à l'écran. */
.selecteur-sticky-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.selecteur-sticky-wrap .selecteur {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
body.selecteur-fixe-visible .selecteur-sticky-wrap {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 900px) {
  /* La copie vit DANS le header, à gauche des boutons. Repliée sur l'option
     active (style et dimensions du slider) ; au clic elle se déplie en
     version complète, ancrée sous le header à droite. */
  .selecteur-sticky-wrap {
    position: static;              /* le dépliage s'ancre sur le header */
    transform: none;
    margin-right: auto;            /* à la place du logo, à gauche */
    display: none;
    justify-content: flex-start;
  }
  body.selecteur-fixe-visible .selecteur-sticky-wrap { display: flex; }
  /* le slider remplace le logo texte ; la tête de lama reste */
  body.selecteur-fixe-visible .site-header .logo { display: none; }
  .selecteur-sticky-wrap .selecteur:not(.ouvert) [data-moment][aria-selected="false"] {
    display: none;
  }
  /* Déplié : il s'étale sur place, les boutons s'effacent pour lui laisser
     la place */
  body.selecteur-deplie .site-header .actions-cta { display: none; }
}

/* Sélecteur Matin / Burgers / Afterwork
   Desktop et mobile : à cheval sur la frontière entre le hero
   et la section suivante. */
.selecteur-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  transform: translateY(50%);
  pointer-events: none;
}
.selecteur {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  padding: 5px;
  border-radius: 999px;
  background: var(--vert-selecteur);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.selecteur-curseur {
  position: absolute;
  top: 5px;
  bottom: 5px;
  border-radius: 999px;
  background: var(--blanc);
  transition: left 260ms cubic-bezier(.5, 0, .2, 1.2), width 260ms cubic-bezier(.5, 0, .2, 1.2);
  z-index: 0;
}
.selecteur button {
  position: relative;
  z-index: 1;
  font-family: var(--font-btn);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--creme);
  opacity: 0.6;
  padding: 8px 23px;
  border-radius: 999px;
  transition: color 200ms ease, opacity 200ms ease;
}
.selecteur button[aria-selected="true"] {
  color: var(--vert-selecteur);
  opacity: 1;
}

/* ==========================================================================
   PANNEAUX DE MOMENT (menus)
   ========================================================================== */
.moment-panneau { display: none; }
.moment-panneau.actif { display: block; animation: apparait 380ms ease; }
@keyframes apparait {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.section {
  padding: 88px 24px;
}
.contenu {
  max-width: 1080px;
  margin: 0 auto;
}

/* En-tête de section : gros titre display + script orange */
.entete-section { text-align: center; margin-bottom: 56px; }
.entete-section .titre-display {
  font-size: clamp(34px, 4.2vw, 40px);
  color: var(--vert);
}
.entete-section .script {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  color: var(--orange-fonce);
}
.entete-section.sur-fonce .titre-display { color: var(--creme); }
.entete-section.sur-fonce .script { color: var(--orange); }

/* ---- Cartes produit (burgers, boissons) --------------------------------- */
.grille-cartes {
  display: flex;
  flex-wrap: wrap;
  gap: 130px 16px;                 /* place pour les photos au-dessus des cartes */
  justify-content: center;
  margin-top: 120px;               /* 1re rangée : place pour les photos */
}
/* Photo détourée qui flotte au-dessus de chaque carte */
.carte-photo {
  position: absolute;
  top: -112px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 150px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(11, 61, 39, 0.25));
}
.carte {
  position: relative;             /* ancre la photo flottante */
  background: var(--blanc);
  border: 2px solid var(--bord-carte);
  border-radius: var(--radius-carte);
  padding: 46px 20px 15px;        /* haut : la photo déborde dans la carte */
  width: 258px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.carte .nom {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.carte h3 {
  font-family: var(--font-titres);
  font-weight: 500;
  font-size: 20px;
  color: var(--vert);
  line-height: 1.1;
}
.carte .alias {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 18px;
  color: var(--orange-fonce);
  line-height: 1;
}
.carte .desc {
  font-family: var(--font-corps-cond);
  font-size: 16px;
  line-height: 1.35;
  color: var(--texte-desc);
  margin-top: 6px;
}
.carte .prix {
  font-family: var(--font-titres);
  font-weight: 500;
  font-size: 24px;
  color: var(--orange-fonce);
  line-height: 1;
  margin-top: 2px;
}
.carte-goat { border-color: var(--gold); }
.carte-goat .alias, .carte-goat .prix { color: var(--gold); }

/* ---- Bloc « à ta façon » + « petites folies » ---------------------------- */
.rangee-options {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-top: 26px;
}
.bloc-facon {
  background: var(--vert);
  border-radius: 16px;
  padding: 22px 24px;
  width: 340px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bloc-facon .entete-bloc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
}
.bloc-facon .titre-display { font-size: 30px; color: var(--blanc); text-transform: none; letter-spacing: 0; }
.bloc-facon .script { font-size: 18px; color: var(--orange); }
.bloc-facon .colonnes { display: flex; gap: 12px; }
.bloc-facon .colonnes > div { flex: 1; opacity: 0.9; }
.bloc-facon .libelle {
  font-family: var(--font-corps-cond);
  font-weight: 400;
  font-size: 16px;
  color: var(--blanc);
  margin-bottom: 10px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.chip {
  display: inline-block;
  font-family: var(--font-btn);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--blanc);
  color: var(--blanc);
  white-space: nowrap;
}
.bloc-folies {
  background: var(--blanc);
  border: 1.5px dashed var(--orange-fonce);
  border-radius: 24px;
  padding: 22px 24px;
  width: 340px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bloc-folies .entete-bloc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
}
.bloc-folies .titre-display { font-size: 30px; color: var(--noir); text-transform: none; letter-spacing: 0; }
.bloc-folies .script { font-size: 18px; color: var(--orange-fonce); }
.chip-orange { border-color: var(--orange-fonce); color: var(--orange-fonce); }
.chip-vert   { border-color: var(--vert); color: var(--vert); text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.4px; }
.chip-creme  { border-color: var(--blanc); color: var(--blanc); text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.4px; }

/* ---- « Le menu » --------------------------------------------------------- */
.bloc-menu-titre { text-align: center; margin: 70px 0 40px; }
.bloc-menu-titre .titre-display { font-size: 48px; color: var(--vert); }
.bloc-menu-titre .script { display: block; margin-top: 10px; font-size: 24px; color: var(--orange-fonce); }

.bande-menu {
  background: var(--vert);
  border-radius: 32px;
  padding: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
}
.bande-menu .carte-simple {
  background: var(--blanc);
  border-radius: 20px;
  padding: 22px;
  width: 270px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bande-menu .carte-simple h3 {
  font-family: var(--font-titres);
  font-weight: 500;
  font-size: 20px;
  color: var(--vert);
}
.bande-menu .carte-simple p {
  font-family: var(--font-corps-cond);
  font-size: 16px;
  color: var(--texte-desc);
}
.bande-menu .col-boissons {
  width: 270px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  text-align: left;
}
.bande-menu .col-boissons .q {
  font-family: var(--font-titres);
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  color: var(--blanc);
}
/* ---- Menu Junior : bandeau mis en avant sous la bande menu ---------------- */
.bandeau-junior {
  margin-top: 20px;
  background: var(--blanc);
  border: 2px dashed var(--orange-fonce);
  border-radius: 24px;
  padding: 22px 28px;
  display: flex;
  flex-wrap: wrap;                 /* passe en colonne naturellement sur mobile */
  align-items: center;
  justify-content: center;
  gap: 12px 40px;
  text-align: center;
}
.bandeau-junior .titre-display { font-size: 30px; color: var(--vert); }
.bandeau-junior .script { display: block; margin-top: 4px; font-size: 20px; color: var(--orange-fonce); }
.bandeau-junior .junior-desc {
  font-family: var(--font-corps-cond);
  font-size: 17px;
  color: var(--texte-desc);
  max-width: 420px;
}
.bandeau-junior .junior-prix { font-family: var(--font-titres); font-size: 24px; color: var(--orange-fonce); }

.bande-menu .col-boissons .r {
  font-family: var(--font-corps-cond);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.65);
}

/* ---- Suggestions (matin / afterwork) ------------------------------------ */
.legende-script {
  text-align: center;
  font-size: 20px;
  margin-bottom: 44px;
}
.legende-script.sur-clair { color: var(--vert); }
.legende-script.sur-fonce { color: rgba(244, 245, 240, 0.6); }

.note-centre {
  text-align: center;
  font-family: var(--font-corps-cond);
  font-size: 15.5px;
  color: var(--texte-desc);
  margin: 28px 0;
}
.note-centre.sur-fonce { color: var(--vert-clair-texte); }

.ligne-prix-info {
  text-align: center;
  font-family: var(--font-corps-cond);
  font-size: 15.5px;
  color: var(--creme);
  opacity: 0.85;
  margin: 28px auto;
  max-width: 860px;
}

.centre { display: flex; justify-content: center; }

/* ---- Listes à points de conduite (afterwork, salades) ------------------- */
.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 88px;
  align-items: start;
}
.item-ligne { padding: 18px 0; }
.item-ligne .haut {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.item-ligne h3 {
  font-family: var(--font-titres);
  font-weight: 500;
  font-size: 20px;
  white-space: nowrap;
}
.item-ligne .points {
  flex: 1;
  border-bottom: 2px dotted currentColor;
  opacity: 0.4;
  transform: translateY(-4px);
  min-width: 24px;
}
.item-ligne .prix {
  font-family: var(--font-titres);
  font-weight: 500;
  font-size: 24px;
  white-space: nowrap;
}
.item-ligne .desc {
  font-family: var(--font-corps-cond);
  font-size: 15px;
  margin-top: 6px;
  max-width: 46ch;
}
.sur-fonce .item-ligne h3 { color: var(--blanc); }
.sur-fonce .item-ligne .prix { color: var(--orange); }
.sur-fonce .item-ligne .desc { color: var(--vert-clair-texte); }
.sur-fonce .item-ligne .points { color: var(--creme); }

/* ---- Salades & douceurs (burgers) / douceurs (matin) --------------------- */
.duo-salades-douceurs { gap: 48px 96px; }
.grille-douceurs-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .col-salades { padding-left: 10px; padding-right: 10px; }
  .deux-colonnes.duo-salades-douceurs {
    row-gap: 144px;                /* espace salades ↔ desserts */
    max-width: 350px;              /* bloc compact et centré sur mobile */
    margin-left: auto;
    margin-right: auto;
  }
  .grille-douceurs-4 { grid-template-columns: 1fr 1fr; }  /* douceurs : 2 en haut, 2 en bas */
}
.demi-section { padding: 88px 24px; }
.item-carte-menu { display: flex; gap: 24px; align-items: center; padding: 15px 0; }
.item-carte-menu .infos { flex: 1; }
.item-carte-menu h3 {
  font-family: var(--font-titres);
  font-weight: 500;
  font-size: 20px;
  color: var(--vert);
  line-height: 1.15;
}
.item-carte-menu .desc {
  font-family: var(--font-corps-cond);
  font-size: 16px;
  color: var(--texte-desc);
  margin-top: 6px;
  max-width: 42ch;
}
.item-carte-menu .prix {
  font-family: var(--font-titres);
  font-weight: 500;
  font-size: 24px;
  color: var(--orange-fonce);
  padding-top: 2px;
  white-space: nowrap;
}
.badge-dash {
  display: inline-block;
  border: 1.5px dashed var(--vert);
  border-radius: 12px;
  padding: 14px;
  font-family: var(--font-corps-cond);
  font-weight: 400;
  font-size: 18px;
  color: var(--vert);
}
.grille-douceurs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px 32px;
  text-align: center;
}
.grille-douceurs h3 {
  font-family: var(--font-titres);
  font-weight: 500;
  font-size: 19px;
  color: var(--vert);
}
.grille-douceurs p {
  font-family: var(--font-corps-cond);
  font-size: 16px;
  color: var(--texte-desc);
  margin-top: 8px;
}

/* ==========================================================================
   PHILOSOPHIE — « Bolama commence un nouveau chapitre »
   ========================================================================== */
.philosophie { background: var(--vert); color: var(--creme); }
.philosophie .contenu {
  display: grid;
  grid-template-columns: 508fr 508fr;
  gap: 64px;
  align-items: center;
}
.plaque-photo {
  background: var(--vert-plaque);
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  position: relative;
}
.plaque-photo img { width: 100%; height: 100%; object-fit: cover; }
.plaque-photo .filigrane {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0.14;
}
.plaque-photo .filigrane img { width: 55%; height: auto; object-fit: contain; }
/* Portraits de l'équipe : cadrage vers le haut pour garder les visages */
.membre .plaque-photo .photo-membre { object-position: center 22%; }

/* TEMPORAIRE : photos de l'équipe masquées, conteneur compris
   (retirer ce bloc pour les réafficher) */
.membre .plaque-photo { display: none; }

.philosophie .titre-display {
  font-size: clamp(36px, 4.4vw, 46px);
  color: var(--creme);
}
.philosophie .tiret {
  width: 14px;
  height: 2px;
  background: rgba(244, 245, 240, 0.4);
  margin: 20px 0;
}
.philosophie .texte-intro {
  font-family: var(--font-corps-cond);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.09px;
  color: var(--blanc);
  opacity: 0.8;
  max-width: 46ch;
}
.badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.badge-plein {
  background: var(--blanc);
  color: var(--vert);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-btn);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
}
.badge-contour {
  border: 2px solid var(--orange);
  color: var(--orange);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-btn);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
}
.philosophie .script {
  display: block;
  margin-top: 28px;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.35;
  color: var(--orange);
}

/* ==========================================================================
   ÉQUIPE
   ========================================================================== */
.equipe {
  background-color: var(--vert-equipe);
  /* quadrillage fin, distinct du carnet (pas de lignes majeures, maille
     serrée, trait très léger) */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 12px 12px;
  color: var(--creme);
}
.equipe .entete-equipe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  margin-bottom: 64px;
}
.equipe .titre-display { font-size: 48px; color: var(--blanc); }
.equipe .script { font-size: 22px; color: var(--orange); }
.br-mobile { display: none; }
.grille-equipe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 76px 28px;
}
.membre { text-align: center; }
.membre .plaque-photo {
  aspect-ratio: 213 / 133;         /* 1.5x plus petit */
  border-radius: 20px;
  margin-bottom: 26px;
}
.membre .prenom {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 30px;
  color: var(--creme);
}
.membre .role-secondaire {
  font-family: var(--font-titres);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vert-clair-texte);
  margin-top: 2px;
}
.membre .role {
  font-family: var(--font-titres);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 4px;
}
.membre .tiret {
  width: 14px;
  height: 1px;
  background: rgba(244, 245, 240, 0.35);
  margin: 12px auto;
}
.membre .bio {
  font-family: var(--font-corps-cond);
  font-size: 16px;
  line-height: 20px;
  color: var(--vert-clair-texte);
  opacity: 0.7;
  max-width: 255px;
  margin: 0 auto;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { background: var(--blanc); color: var(--texte-desc); }
.contact .contenu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* trois colonnes égales jusqu'au breakpoint mobile */
  gap: 44px;
  align-items: start;
}
.contact .titre-display { font-size: clamp(34px, 3.4vw, 40px); color: var(--vert); text-align: center; }
.horaires {
  display: grid;
  grid-template-columns: auto auto; /* colonnes partagées par toutes les lignes */
  gap: 10px 14px;
  align-items: baseline;
  width: fit-content;               /* bloc réellement centré sous le titre */
  margin: 40px auto 0;
}
.horaires .ligne { display: contents; }
.horaires .jour {
  font-family: var(--font-titres);
  font-weight: 500;
  font-size: 17px;
  text-transform: uppercase;
  color: var(--orange);
  text-align: right;
}
.horaires .heures {
  font-family: var(--font-corps-cond);
  font-weight: 400;
  font-size: 17px;
  text-transform: uppercase;
  color: var(--texte-desc);        /* même couleur que les ingrédients */
}
.bloc-carte-map {
  text-align: center;
  align-self: stretch;             /* même hauteur que le formulaire sur desktop */
  display: flex;
  flex-direction: column;
}
.map-wrap {
  border: 2px solid var(--bord-carte);   /* comme les cartes (desktop) */
  border-radius: 20px;
  overflow: hidden;
  background: #E0E3D9;
  flex: 1;
  min-height: 300px;
  width: 100%;
}
#carte-bolama {
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: #E0E3D9;             /* visible pendant le chargement des tuiles */
  z-index: 0;                      /* la carte reste sous le header / sélecteur */
}
.map-wrap noscript a {
  display: block;
  padding: 24px;
  color: var(--vert);
}

/* Marqueur Bolama (épingle orange dessinée en SVG dans un divIcon) */
.marqueur-bolama {
  background: none;
  border: none;
}
.marqueur-bolama svg {
  display: block;
  filter: drop-shadow(0 5px 10px rgba(11, 61, 39, 0.35));
}

/* Popup Leaflet aux couleurs de la maison */
.leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(11, 61, 39, 0.22);
}
.leaflet-popup-content {
  margin: 14px 18px;
  font-family: var(--font-corps);
  color: var(--vert);
  text-align: center;
  line-height: 1.45;
}
.leaflet-popup-content .popup-nom {
  display: block;
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.leaflet-popup-content .popup-adresse {
  display: block;
  font-size: 13px;
  margin-top: 2px;
}
.leaflet-popup-content .popup-itineraire {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-btn);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange-fonce);
  text-decoration: none;
  border-bottom: 2px solid var(--orange-fonce);
  padding-bottom: 1px;
}
.leaflet-popup-content .popup-itineraire:hover { opacity: 0.75; }
.leaflet-popup-tip { box-shadow: none; }

/* Contrôles de zoom discrets */
.leaflet-control-zoom a {
  color: var(--vert);
}
.leaflet-container {
  font-family: var(--font-corps);
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(0.85);
}
.bloc-carte-map .adresse {
  font-family: var(--font-titres);
  font-weight: 500;
  font-size: 17px;
  color: var(--blanc);
  opacity: 0.9;
  margin-top: 18px;
}
.bloc-carte-map .coordonnees {
  font-family: var(--font-corps-cond);
  font-weight: 400;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 6px;
}
.bloc-carte-map .coordonnees a { text-decoration: none; }
.bloc-carte-map .coordonnees a:hover { color: var(--orange); }

.carte-formulaire {
  background: var(--vert);               /* mode dark */
  border: 2px solid var(--bord-carte);   /* comme les cartes de la carte */
  border-radius: 20px;
  padding: 22px;
  color: var(--creme);
}
.carte-formulaire .titre-form {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
  color: var(--creme);
  margin-bottom: 20px;
}
.carte-formulaire .champ { margin-bottom: 12px; }
.carte-formulaire input,
.carte-formulaire textarea {
  width: 100%;
  background: var(--vert-plaque);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font-corps-cond);
  font-size: 16px;
  color: var(--creme);
  outline: none;
  transition: border-color 150ms ease;
  resize: vertical;
}
.carte-formulaire input:focus,
.carte-formulaire textarea:focus { border-color: var(--orange); }
.carte-formulaire input::placeholder,
.carte-formulaire textarea::placeholder { color: rgba(244, 245, 240, 0.55); }
.carte-formulaire textarea { min-height: 96px; }
.btn-envoyer {
  background: var(--orange);
  color: var(--blanc);
  font-family: var(--font-btn);
  font-weight: 500;
  font-size: 18px;               /* aligné sur Réserver / Commander */
  border-radius: 10px;
  padding: 14px 24px;
  margin-top: 8px;
  transition: filter 150ms ease;
}
.btn-envoyer:hover { filter: brightness(1.15); }
.form-confirmation {
  display: none;
  margin-top: 14px;
  font-family: var(--font-script);
  font-size: 19px;
  color: var(--orange);            /* lisible sur la carte sombre */
}
.form-confirmation.visible { display: block; }

/* ==========================================================================
   MODALE RÉSERVATION (Lightspeed en iframe)
   ========================================================================== */
.modal-reservation {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-reservation[hidden] { display: none; }
.modal-fond {
  position: absolute;
  inset: 0;
  background: rgba(5, 38, 23, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-carte {
  position: relative;
  width: min(460px, 100%);
  height: min(760px, 88vh);
  height: min(760px, 88svh);
  background: var(--blanc);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  animation: modale-apparait 260ms cubic-bezier(.3, 1.1, .4, 1);
}
@keyframes modale-apparait {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.modal-carte iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}
.modal-fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--vert);
  color: var(--blanc);
  font-size: 15px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: filter 140ms ease, transform 140ms ease;
}
.modal-fermer:hover { filter: brightness(1.2); transform: rotate(90deg); }
.modal-chargement {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--vert);
  color: var(--vert-clair-texte);
  font-family: var(--font-script);
  font-size: 22px;
}
.modal-chargement img { width: 72px; opacity: 0.5; }
@media (max-width: 520px) {
  .modal-reservation { padding: 10px; align-items: flex-end; }
  .modal-carte {
    height: 92vh;
    height: 92svh;
    border-radius: 24px 24px 0 0;
    animation-name: modale-glisse;
  }
  @keyframes modale-glisse {
    from { opacity: 0.4; transform: translateY(60px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--vert);
  border-top: 1px solid rgba(244, 245, 240, 0.12);
  height: var(--header-h);         /* même hauteur que le header */
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(244, 245, 240, 0.55);
  font-family: var(--font-titres);
  font-size: 13.5px;
  letter-spacing: 0.4px;
}
.footer img { width: 24px; height: 24px; opacity: 0.55; }   /* logo rond, en petit, fondu comme le texte */
.footer .footer-maj { text-transform: uppercase; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--orange); }

/* ==========================================================================
   RESPONSIVE — mobile-first ajustements (maquettes 400 px)
   ========================================================================== */
@media (max-width: 900px) {
  .site-header { padding: 0 16px; }
  .btn { font-size: 17px; padding: 13px 18px; }
  .btn-secondaire { padding: 11px 16px; }
  .btn-envoyer { font-size: 17px; padding: 13px 18px; }

  .hero {
    min-height: 92vh;
    min-height: 92svh;             /* hero plus haut sur mobile */
    padding: calc(48px + var(--header-h)) 20px 72px;
  }
  .hero-titre { font-size: 46px; }
  .hero-script { font-size: 24px; }
  .hero-sous-titre { font-size: 14.5px; }

  .section, .demi-section { padding: 72px 20px; }

  /* séparation nette entre philosophie et équipe */
  .equipe { border-top: 8px solid var(--blanc); }

  .grille-cartes { flex-direction: column; align-items: stretch; }
  .carte { width: 100%; max-width: 340px; margin: 0 auto; }

  .rangee-options { flex-direction: column; align-items: stretch; }
  .bloc-facon, .bloc-folies { width: 100%; max-width: 360px; margin: 0 auto; }

  .bande-menu {
    border-radius: 28px;
    padding: 24px 20px;
    max-width: 330px;              /* bande compacte, centrée comme sur desktop */
    margin-left: auto;
    margin-right: auto;
  }
  .bande-menu .carte-simple, .bande-menu .col-boissons { width: 100%; }
  .bande-menu .col-boissons {
    align-items: center;           /* texte + bouton centrés sur mobile */
    text-align: center;
  }

  .bandeau-junior {
    max-width: 330px;              /* aligné sur la bande menu mobile */
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
  }

  .deux-colonnes { grid-template-columns: 1fr; gap: 4px; }

  .philosophie .contenu { grid-template-columns: 1fr; gap: 0; }
  .philosophie .texte { text-align: center; }
  .philosophie .texte-intro { margin-left: auto; margin-right: auto; }
  .equipe .entete-equipe {
    flex-direction: column;
    align-items: center;
    text-align: center;
    row-gap: 8px;
  }
  .br-mobile { display: inline; }
  .equipe .script { font-size: 20px; }
  .philosophie .plaque-photo {
    border-radius: 0;
    margin: -72px -20px 56px;      /* photo pleine largeur en haut */
    aspect-ratio: 400 / 300;
  }
  .philosophie .texte { text-align: center; }
  .philosophie .tiret { margin: 20px auto; }
  .badges { justify-content: center; }

  .grille-equipe { grid-template-columns: 1fr; gap: 64px; max-width: 360px; margin: 0 auto; }
  .membre .plaque-photo { aspect-ratio: 340 / 200; } /* 1.5x plus petit */

  .moment-panneau[data-moment-panneau="afterwork"] .demi-section { padding-left: 30px; padding-right: 30px; }

  .contact .contenu { grid-template-columns: 1fr; gap: 56px; }
  .contact .titre-display { text-align: center; }
  .horaires { max-width: 320px; margin: 36px auto 0; }
  .map-wrap {
    flex: none;
    aspect-ratio: auto;
    height: 260px;
    min-height: 0;
    border: none;                  /* pleine largeur sans bordure sur mobile */
    border-radius: 0;
    max-width: none;
    width: calc(100% + 40px);
    margin: 0 -20px;
  }
  .carte-formulaire { max-width: 360px; margin: 0 auto; width: 100%; }

  .grille-douceurs { gap: 36px 20px; }
}

@media (max-width: 420px) {
  .btn { font-size: 16px; }
}

/* Accessibilité : focus visibles */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-panneau, .moment-panneau.actif, .selecteur-curseur { transition: none; animation: none; }
}

/* ---- Mobile : tous les titres h2 à 40 px -------------------------------- */
@media (max-width: 900px) {
  h2.titre-display,
  .entete-section .titre-display,
  .bloc-menu-titre .titre-display,
  .philosophie .titre-display,
  .equipe .titre-display,
  .contact .titre-display {
    font-size: 36px;
  }
  /* titre de la section concept, un cran au-dessus */
  .philosophie .texte h2.titre-display {
    font-size: 44px;
  }
}

/* ==========================================================================
   STICKER RÉGIMES — sans gluten & végétarien (hero)
   ========================================================================== */
.etiquette-regimes {
  display: none;                   /* visible uniquement sur le créneau burgers */
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  bottom: 110px;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: var(--creme);
  color: var(--vert);
  padding: 13px 22px 11px;
  border-radius: 14px;
  transform-origin: center center;
  transform: rotate(1.5deg);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  text-align: center;
  animation: etiquette-flotte 5s ease-in-out infinite;
}
body[data-moment="burgers"] .etiquette-regimes { display: flex; }
.etiquette-titre {
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.1;
}
.etiquette-script {
  font-size: 17px;
  line-height: 1.15;
  color: var(--orange-fonce);
}
@keyframes etiquette-flotte {
  0%, 100% { transform: rotate(1.5deg) translateY(0); }
  50%      { transform: rotate(-1deg) translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .etiquette-regimes { animation: none; }
}
@media (max-width: 900px) {
  .etiquette-regimes {
    bottom: 88px;
    padding: 10px 16px 9px;
  }
  .etiquette-titre { font-size: 15px; }
  .etiquette-script { font-size: 15px; }
}