/* ==========================================================================
   BDS Brasero Events — feuille de style
   Univers : feu, métal, nuit. Poppins auto-hébergée, Heroicons outline.
   ========================================================================== */

/* ---------- Typographie auto-hébergée (jamais Google Fonts) ---------- */
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* StGenix — typographie de titrage dessinée par Raphaël, auto-hébergée. */
@font-face{font-family:"StGenix";src:url("/assets/fonts/stgenix-400.woff2?v=2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"StGenix";src:url("/assets/fonts/stgenix-700.woff2?v=2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --font-titre:"StGenix",ui-serif,Georgia,serif;   /* grands titres uniquement */
  --font-display:"Poppins",ui-sans-serif,system-ui,sans-serif;
  --font-sans:"Poppins",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Poppins",ui-sans-serif,system-ui,sans-serif;
  /* un utilitaire framework pourrait chercher --font-mono : on le renvoie sur
     Poppins plutôt que de le supprimer. Aucune chasse fixe sur ce site. */
  --font-mono:"Poppins",ui-sans-serif,system-ui,sans-serif;

  --noir:#12100E;
  --noir-2:#1A1613;
  --noir-3:#221C18;
  --metal:#3A332D;
  --metal-clair:#584E45;
  --creme:#F6F1EA;
  --creme-doux:#A79E94;
  --creme-faible:#6E655C;
  --braise:#E2571F;
  --braise-clair:#F58A3C;
  --ambre:#F2B544;
  --braise-fonce:#AA4117;

  --rayon:14px;
  --rayon-s:10px;
  --gouttiere:24px;
  --largeur:1180px;
  --header-h:70px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  background:var(--noir);
  color:var(--creme);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
/* StGenix est la police principale de titrage (h1-h3), en écho au serif du logo.
   Poppins reste sur le texte courant, les intertitres de libellé et h4 (pied de page). */
h1,h2,h3{font-family:var(--font-titre);font-weight:700;margin:0;line-height:1.18;letter-spacing:-.015em}
h4{font-family:var(--font-display);margin:0;line-height:1.18;letter-spacing:-.015em}
.hero h1,.titre-section,.bande-cta h2{letter-spacing:-.005em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.conteneur{width:100%;max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere)}
main{padding-top:var(--header-h)}
.section{padding:clamp(64px,9vw,112px) 0}
.section--serree{padding:clamp(48px,6vw,72px) 0}
.section--fond{background:var(--noir-2)}

/* ---------- Libellés, titres ---------- */
.eyebrow{
  font-family:var(--font-sans);
  font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--braise-clair);
  margin:0 0 18px;
}
.eyebrow--doux{color:var(--creme-faible)}
.titre-section{font-size:clamp(27px,4.4vw,44px);font-weight:700;margin:0 0 16px}
.titre-souligne{
  background-image:linear-gradient(var(--braise),var(--braise));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:calc(var(--titre-progress,0)*100%) 4px;
}
.chapo{color:var(--creme-doux);font-size:clamp(15px,2vw,17px);max-width:60ch;margin:0}
.entete-section{margin-bottom:clamp(32px,5vw,52px);max-width:720px}
.entete-section--centre{margin-inline:auto;text-align:center}
.entete-section--centre .chapo{margin-inline:auto}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-sans);font-size:14px;font-weight:600;
  letter-spacing:.04em;text-decoration:none;
  padding:14px 24px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;touch-action:manipulation;white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none}
.btn--feu{background:var(--braise);color:#fff;border-color:var(--braise)}
.btn--feu:hover{background:var(--braise-clair);border-color:var(--braise-clair)}
.btn--fantome{background:transparent;color:var(--creme);border-color:var(--metal)}
.btn--fantome:hover{border-color:var(--metal-clair);background:rgba(255,255,255,.04)}
.btn--blanc{background:var(--creme);color:var(--noir);border-color:var(--creme)}
.btn--blanc:hover{background:#EAE2D3;border-color:#EAE2D3}
.btn--large{width:100%}
.btn--s{padding:11px 18px;font-size:13px}

.lien-fleche{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;text-decoration:none;color:var(--braise-clair);
}
.lien-fleche svg{width:16px;height:16px}
.lien-fleche:hover{color:var(--ambre)}

/* ---------- En-tête ---------- */
/* Modèle commun du groupe Rabilloud (charte navigation) : header fixe et
   transparent en haut, flouté/assombri au scroll (.is-scrolled), menu
   mobile plein écran séparé (.mobile-nav) plutôt qu'un tiroir sous le
   header. Fond + flou posés sur un ::before dédié plutôt que directement
   sur .site-header : un backdrop-filter sur .site-header lui-même en
   ferait le bloc conteneur de .mobile-nav (position:fixed, enfant du
   header) et casserait son plein-écran -- voir le piège header/backdrop-
   filter de charte-site. Le ::before, lui, n'a pas de descendant fixed,
   donc aucun risque. Couleur/opacité/flou repris du réglage validé le
   23-24/09/2026 sur brasserie-des-sports-site (charte-navigation),
   adaptés au --noir de ce site. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:40;
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:transparent;
  transition:background-color .25s ease,backdrop-filter .25s ease;
}
.site-header.is-scrolled::before{
  background:rgba(18,16,14,.55); /* --noir en rgba, pas un aplat plein */
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); /* préfixe obligatoire, Safari ne le prend pas sans */
}
.header-inner{
  height:var(--header-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
}
.marque{display:flex;align-items:center;text-decoration:none;line-height:1;position:relative;z-index:110;justify-self:start;grid-column:1}
.marque-logo{height:32px;width:auto;display:block}

.site-nav{justify-self:center;grid-column:2}
.site-nav ul{display:flex;align-items:center;gap:28px}
.site-nav a{
  text-decoration:none;font-size:14px;font-weight:500;color:var(--creme-doux);
  padding:6px 0;border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--creme);border-color:var(--braise)}
.site-nav a[aria-current="page"]{color:var(--creme)}
.header-actions{display:flex;align-items:center;gap:12px;justify-self:end;grid-column:3}

.burger{
  display:none;appearance:none;background:transparent;border:0;
  width:44px;height:44px;position:relative;z-index:110;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;touch-action:manipulation;
}
.burger span{display:block;width:20px;height:2px;background:var(--creme);border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.site-header.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.nav-open .burger span:nth-child(2){opacity:0}
.site-header.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none}
body.nav-lock{overflow:hidden}
html:has(body.nav-lock){overflow:hidden} /* iOS Safari ignore parfois overflow:hidden sur body seul */

@media (max-width:900px){
  .site-nav{display:none}
  .burger{display:flex}
  .header-actions .btn{display:none}

  .mobile-nav{
    position:fixed;inset:0;z-index:90;
    background:linear-gradient(180deg,var(--noir-2) 0%,var(--braise-fonce) 60%,var(--braise) 100%);
    display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    padding:24px;overflow-y:auto;
  }
  .mobile-nav.open{display:flex}
  .mobile-nav a{
    font-family:var(--font-sans);font-weight:600;font-size:1.5rem;
    color:var(--creme);text-decoration:none;
    padding:.6rem 1.3rem;border-radius:14px;
  }
  .mobile-nav a:hover{background:rgba(255,255,255,.22)}
  .mobile-nav a.btn-primaire{
    margin-top:18px;min-height:48px;padding:0 22px;border-radius:999px;
    font-family:var(--font-sans);font-size:14px;font-weight:600;
    background:var(--noir);color:var(--creme);border-color:var(--noir);
    display:inline-flex;align-items:center;justify-content:center;
  }
  .mobile-nav a.btn-primaire:hover{background:var(--noir-2)}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;margin-top:calc(var(--header-h) * -1);display:flex;align-items:center;overflow:hidden;padding:clamp(56px,8vw,88px) 0}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,16,14,.55) 0%,rgba(18,16,14,.78) 55%,var(--noir) 100%);
  z-index:1;
}
.hero-contenu{position:relative;z-index:3;max-width:760px}
.hero h1{font-size:clamp(34px,7vw,66px);font-weight:700;letter-spacing:-.005em;margin:0 0 22px}
.hero .accroche{color:var(--creme-doux);font-size:clamp(16px,2.3vw,19px);line-height:1.62;max-width:56ch;margin:0 0 34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
@media (max-width:900px){
  .hero-actions{flex-direction:column;align-items:center}
  .hero-actions .btn{width:100%}
}
.hero-reassurance{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:12.5px;color:var(--creme-doux)}
.hero-reassurance li{display:flex;align-items:center;gap:8px}
.hero-reassurance svg{width:16px;height:16px;color:var(--braise)}

/* Hero video (accueil) -- photo statique en repli mobile / avant lecture,
   fondu vers la video sur grand ecran (voir main.js) */
.hero-still{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;opacity:1;transition:opacity .8s ease}

.hero-video{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1s ease} /* z-index:0 = contexte d'empilement fixe : les z-index des videos (fondu) restent sous le voile .hero-media::after */
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.has-video .hero-still{opacity:0}
@media (prefers-reduced-motion:reduce){.hero-still,.hero-video{transition:none}}

/* ---------- Emplacements média (assets client à venir) ---------- */
.media-ph{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% 110%,rgba(226,87,31,.26),transparent 62%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 2px,transparent 2px 9px),
    var(--noir-2);
  border:1px solid var(--metal);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:24px;color:var(--creme-faible);
  border-radius:var(--rayon);
}
.media-ph svg{width:30px;height:30px;color:var(--metal-clair)}
.media-ph span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;max-width:26ch;line-height:1.7}
.media-ph--hero{border:0;border-radius:0;height:100%;width:100%;justify-content:flex-end;padding-bottom:40px}
.media-ph--hero svg{display:none}
.media-ph--hero span{position:relative;z-index:2}
.media-ph--carre{aspect-ratio:1}
.media-ph--paysage{aspect-ratio:16/9}
.media-ph--portrait{aspect-ratio:3/4}

/* ---------- Grilles et cartes ---------- */
.grille{display:grid;gap:18px}
.grille--2{grid-template-columns:repeat(2,1fr)}
.grille--3{grid-template-columns:repeat(3,1fr)}
.grille--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grille--3,.grille--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grille--3,.grille--4{grid-template-columns:1fr}}
@media (max-width:600px){.grille--3.grille--personnalisation{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grille--2{grid-template-columns:1fr}}
@media (max-width:600px){.grille--4.grille--mobile2col{grid-template-columns:repeat(2,1fr)}}

/* Carrousel horizontal (formules) : les 3 cartes de formules defilent au
   swipe sur mobile/tablette, au lieu de s'empiler comme les autres grilles.
   Les autres grilles de la page (Personnalisation, Cas particuliers)
   restent en colonne unique. */
@media (max-width:900px){
  .grille--formules{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:18px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gouttiere) * -1);
    padding-inline:var(--gouttiere);
    scroll-padding-inline:var(--gouttiere);
  }
  .grille--formules{
    padding-top:16px;
    margin-top:-16px;
  }
  .grille--formules > .formule{
    flex:0 0 82%;
    max-width:340px;
    scroll-snap-align:start;
  }
}

/* Carrousel horizontal (accueil, "Pour qui") : les 3 cartes defilent au
   swipe sur mobile/tablette au lieu de s'empiler. */
@media (max-width:900px){
  .grille--pourqui{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:18px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gouttiere) * -1);
    padding-inline:var(--gouttiere);
    scroll-padding-inline:var(--gouttiere);
  }
  .grille--pourqui > .carte{
    flex:0 0 82%;
    max-width:340px;
    scroll-snap-align:start;
  }
}

/* Carrousel horizontal (realisations) : piste a defilement a TOUS les
   breakpoints (pas seulement mobile), repris du pattern .section-band
   .carrousel-mobile de brasserie-des-sports-site -- debordement asymetrique
   en tablette/desktop (aligne a gauche sur le texte, va jusqu'au bord droit
   de l'ecran), points de pagination sous la piste. Format de carte plus
   grand qu'avant (largeur superieure, l'aspect-ratio 4/5 suit). */
.grille--realisations{
  display:flex;
  flex-wrap:nowrap;
  grid-template-columns:none;
  overflow-x:auto;
  gap:18px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--gouttiere) * -1);
  padding-inline:var(--gouttiere);
  padding-bottom:4px;
  scroll-padding-inline:var(--gouttiere);
  scrollbar-width:none;-ms-overflow-style:none;
}
.grille--realisations::-webkit-scrollbar{display:none}
.grille--realisations > .realisation{
  flex:0 0 82%;
  max-width:420px;
  scroll-snap-align:start;
}
@media (min-width:641px){
  .grille--realisations{
    margin-right:calc(50% - 50vw);
    padding-right:var(--gouttiere);
  }
  .grille--realisations > .realisation{flex:0 0 clamp(300px,25vw,360px)}
}
.realisations-dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
.realisations-dots .dot{
  width:7px;height:7px;border-radius:50%;background:var(--metal);padding:0;border:none;
  cursor:pointer;touch-action:manipulation;transition:background-color .15s ease,transform .15s ease;
}
.realisations-dots .dot.is-active{background:var(--braise);transform:scale(1.3)}
@media (prefers-reduced-motion:reduce){.realisations-dots .dot{transition:none}}

.carte{
  background:var(--noir-2);border:1px solid var(--metal);border-radius:var(--rayon);
  padding:26px 24px;display:flex;flex-direction:column;gap:12px;
  touch-action:manipulation;min-width:0;
  text-decoration:none;color:inherit;
}
.carte h3{font-size:19px;font-weight:700}
.carte p{color:var(--creme-doux);font-size:14.5px}
.carte:hover{border-color:var(--metal-clair)}
.grille--principe .carte,
.grille--principe .carte:hover{border-color:transparent}
/* "Pour qui" : cartes non cliquables, donc pas de reaction au survol. */
.grille--pourqui .carte:hover{border-color:var(--metal)}
/* Accueil, "Pour qui" : zones d'intervention en pastilles (non cliquables, pas de survol). */
.zones{margin-top:clamp(36px,5vw,56px);text-align:center}
.zones-titre{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--creme-doux)}
.zones-titre svg{width:16px;height:16px;flex:none;color:var(--braise)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:820px;margin:0 auto}
.chips li{font-size:13.5px;line-height:1.2;color:var(--creme);background:var(--noir-3);
  border:1px solid var(--metal);border-radius:999px;padding:7px 14px}
/* Concept : cartes Formules / Realisations sur un fond un cran plus clair que la section,
   sans bordure au repos (elle apparait au survol), titres agrandis. */
.grille--concept-liens .carte{background:var(--noir-3);border-color:transparent}
.grille--concept-liens .carte:hover{border-color:var(--metal-clair)}
.grille--concept-liens .carte h3{font-size:clamp(22px,2.4vw,27px)}
/* Accueil, "Le principe" : brasero detoure vu de dessus, qui sort de sous les cartes
   et s'arrete au bord de la section (on n'en voit que la moitie haute). */
.section--principe{padding-bottom:0;overflow:hidden}
.principe-brasero{display:flex;justify-content:center;position:relative;z-index:0}
.principe-brasero img{width:100%;max-width:none;height:auto;opacity:.5}
/* Desktop : les cartes, sans fond, s'organisent en arc autour du brasero.
   .grille--principe passe en display:contents pour que cartes et brasero
   partagent la meme grille de 20 colonnes. */
@media (min-width:901px){
  .principe-disposition{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));row-gap:28px;align-items:start}
  .principe-disposition .grille--principe{display:contents}
  .principe-disposition .carte{background:transparent;padding:0 12px;position:relative;z-index:1}
  .principe-feu{grid-column:6/10;grid-row:1}
  .principe-viandes{grid-column:12/16;grid-row:1}
  .principe-convivialite{grid-column:1/5;grid-row:2}
  .principe-cle{grid-column:17/21;grid-row:2}
  .principe-brasero{grid-column:3/19;grid-row:2;align-self:end}
  .principe-brasero img{width:92%}
  /* Traits de liaison sous chaque carte, qui pointent vers le brasero. */
  .principe-disposition .carte::after{
    content:"";position:absolute;top:calc(100% + 14px);width:110px;height:34px;
    background:var(--braise-fonce);opacity:.8;pointer-events:none;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 34'%3E%3Cpolyline points='1,2 80,2 107,32' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 34'%3E%3Cpolyline points='1,2 80,2 107,32' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  }
  .principe-disposition .principe-feu::after,.principe-disposition .principe-convivialite::after{left:12px}
  .principe-disposition .principe-viandes::after,.principe-disposition .principe-cle::after{left:-18px;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 34'%3E%3Cpolyline points='3,32 30,2 109,2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 34'%3E%3Cpolyline points='3,32 30,2 109,2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
/* Mobile / tablette : cartes en carrousel horizontal, brasero dessous. */
@media (max-width:900px){
  .grille--principe{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:18px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gouttiere) * -1);padding-inline:var(--gouttiere);
    scroll-padding-inline:var(--gouttiere);scrollbar-width:none;
  }
  .grille--principe::-webkit-scrollbar{display:none}
  .grille--principe > .carte{flex:0 0 82%;max-width:340px;scroll-snap-align:start}
  .principe-brasero{margin-top:32px}
}
.carte-icone{
  width:42px;height:42px;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--braise-clair);
}
.carte-icone svg{width:21px;height:21px}
.liste-puces{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.liste-puces li{display:flex;gap:10px;font-size:14px;color:var(--creme-doux)}
.liste-puces svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--braise)}

/* ---------- Partenaires (accueil) ---------- */
/* Bloc place dans la section "Pour qui" (meme fond), sous ses cartes. */
.bloc-partenaires{margin-top:clamp(56px,8vw,96px)}
.grille--partenaires{align-items:center}
.partenaire{display:flex;align-items:center;justify-content:center;height:96px;padding:0 12px}
/* Monochrome blanc. Hauteurs reglees a surface visuelle egale (~5 000 px2),
   le chateau un peu au-dessus car son trait est fin. */
.partenaire img{width:auto;height:44px;max-width:100%;object-fit:contain;filter:brightness(0) invert(1);opacity:.85;transition:opacity .15s ease}
.partenaire--tresserve img{height:88px}
.partenaire--ecoris img{height:46px}
.partenaire--fcc img{height:47px}
.partenaire--utmb img{height:37px}
.partenaire--nge img{height:40px}
.partenaire--hbi img{height:44px}
.partenaire:hover img{opacity:1}
@media (prefers-reduced-motion: reduce){.partenaire img{transition-duration:.01ms}}

/* ---------- Étapes ---------- */
.etape{position:relative;padding-top:26px;border-top:1px solid var(--metal)}
.etape-num{
  position:absolute;top:-1px;left:0;height:2px;width:34px;background:var(--braise);
}
.etape .num{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--braise);display:block;margin-bottom:10px}
.etape h3{font-size:17px;font-weight:700;margin-bottom:8px}
.etape p{color:var(--creme-doux);font-size:14.5px}
/* Page Concept : photo du brasero en bas de la section "Quatre etapes", pleine largeur. */
.section--etapes{padding-bottom:0}
.section--etapes > .conteneur{position:relative;z-index:1}
.etapes-photo{margin-top:clamp(32px,5vw,56px)}
/* Desktop : la photo demarre juste sous le texte des etapes. */
@media (min-width:901px){.etapes-photo{margin-top:0}}
.etapes-photo img{width:100%;height:clamp(170px,21.5vw,400px);max-width:none;object-fit:cover;object-position:center 60%;opacity:.5}

/* ---------- Formules ---------- */
.formule{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--noir-2);border:1px solid var(--metal);border-radius:var(--rayon);padding:28px 26px}
.formule--phare{border-color:rgba(226,87,31,.5)}
.formule-badge{position:absolute;top:-11px;left:26px;background:var(--braise);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.formule h3{font-size:27px;font-weight:700;line-height:1.2;max-width:13ch}
.formule-meta{display:flex;flex-wrap:wrap;gap:8px}
.pastille{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--creme-doux);border:1px solid var(--metal);border-radius:999px;padding:6px 12px;
  touch-action:manipulation;
}
.pastille svg{width:14px;height:14px;color:var(--braise)}

/* Donnees de carte realisation : icone + valeur, sans habillage en chip
   (contrairement aux .pastille des formules). */
.donnee{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--creme-doux)}
.formule .donnee{color:var(--braise)}
.donnee svg{width:15px;height:15px;color:var(--braise);flex-shrink:0}
.formule-prix{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ambre)}

/* ---------- Réalisations (format carte photo/vidéo, cf. .carte-photo
   sur brasserie-des-sports-site) ---------- */
.realisation{
  position:relative;display:block;overflow:hidden;aspect-ratio:3/4;
  border-radius:var(--rayon);border:1px solid transparent;cursor:pointer;touch-action:manipulation;
  transition:border-color .15s ease;
}
.realisation:hover,.realisation:focus-visible{border-color:var(--metal-clair)}
.realisation:focus-visible{outline:2px solid var(--braise);outline-offset:2px}
.realisation .media-ph{position:absolute;inset:0;z-index:0;height:100%;width:100%;border:0;border-radius:0}
.realisation-img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .6s ease;
}
.realisation:hover .realisation-img{transform:scale(1.03)}
.realisation-video-box{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .6s ease}
.realisation-video-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.realisation.has-video .realisation-img{opacity:0}
.realisation::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,16,14,0) 38%,rgba(18,16,14,.6) 68%,rgba(14,12,11,.94) 100%);
}
.realisation-corps{
  position:relative;z-index:3;height:100%;padding:20px 20px 22px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
}
.realisation h3{font-size:18px;font-weight:700;color:var(--creme)}
.realisation-corps>p{display:none}
.realisation-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:2px}
@media (prefers-reduced-motion:reduce){
  .realisation,.realisation-img,.realisation-video-box{transition:none}
}

/* ---------- Modale de realisation ---------- */
.realisation-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.realisation-modal.open{display:flex}
.realisation-modal-fond{position:absolute;inset:0;background:rgba(18,16,14,.82)}
.realisation-modal-panneau{
  position:relative;z-index:1;max-width:640px;width:100%;max-height:88vh;overflow-y:auto;
  background:var(--noir-2);border:1px solid var(--metal);border-radius:var(--rayon);
}
.realisation-modal-fermer{
  position:absolute;top:14px;right:14px;z-index:2;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--noir);border:1px solid var(--metal);border-radius:999px;color:var(--creme);
  transition:border-color .15s ease,background-color .15s ease;touch-action:manipulation;
}
.realisation-modal-fermer:hover{border-color:var(--metal-clair);background:var(--noir-2)}
.realisation-modal-media{aspect-ratio:16/9;position:relative}
.realisation-modal-media .media-ph{border:0;border-radius:0;height:100%}
.realisation-modal-corps{padding:24px 26px 28px;display:flex;flex-direction:column;gap:12px}
.realisation-modal-corps h3{font-size:22px;font-weight:700}
.realisation-modal-corps p{color:var(--creme-doux);font-size:15px;line-height:1.6}
@media (prefers-reduced-motion:reduce){.realisation-modal-fermer{transition:none}}

/* ---------- Modale de devis (popup, toutes les pages sauf devis.html) ----------
   Meme pattern que .realisation-modal (fond + panneau + bouton fermer, classe
   .open plutot que l'attribut hidden). Le formulaire y est le meme #form-devis
   que sur devis.html, recupere par fetch en JS -- .formulaire y perd son
   habillage de carte (deja porte par le panneau) pour ne pas empiler deux
   cadres. */
.devis-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.devis-modal.open{display:flex}
.devis-modal-fond{position:absolute;inset:0;background:rgba(18,16,14,.82)}
.devis-modal-panneau{
  position:relative;z-index:1;width:100%;max-width:640px;max-height:calc(100vh - 48px);
  overflow-y:auto;background:var(--noir-2);border:1px solid var(--metal);border-radius:var(--rayon);
  padding:0 30px 30px;
}
/* En-tete fixe de la fenetre de devis : titre, croix et barre de progression
   restent en haut, le formulaire defile dessous (22/10/2026). */
.devis-modal-entete{position:sticky;top:0;z-index:3;background:var(--noir-2);margin:0 -30px 26px;padding:30px 30px 16px}
.devis-modal-entete .devis-progression{margin:0}
.devis-modal-fermer{
  position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--noir);border:1px solid var(--metal);
  color:var(--creme-doux);cursor:pointer;touch-action:manipulation;transition:border-color .15s ease,background-color .15s ease;
}
.devis-modal-fermer:hover{border-color:var(--metal-clair);background:var(--noir-2)}
.devis-modal-fermer svg{width:18px;height:18px}
.devis-modal-titre{font-size:22px;font-weight:700;margin:0 0 16px;padding-right:44px}
.devis-modal-corps .formulaire{background:transparent;border:0;padding:0}
.devis-modal-chargement{color:var(--creme-doux);font-size:14px}
@media (prefers-reduced-motion:reduce){.devis-modal-fermer{transition:none}}
/* Mobile : le devis en plein ecran (22/10/2026) -- plus de cadre ni de fond
   visible, la croix reste accessible pendant le defilement. */
@media (max-width:760px){
  .devis-modal{padding:0;align-items:stretch}
  .devis-modal-panneau{max-width:none;height:100vh;height:100dvh;max-height:none;border:0;border-radius:0;
    padding:0 20px calc(28px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  .devis-modal-entete{margin:0 -20px 22px;padding:calc(18px + env(safe-area-inset-top)) 20px 14px}
  .devis-modal-fermer{top:calc(12px + env(safe-area-inset-top));right:14px}
}

/* ---------- Bande d'appel final ---------- */
.bande-cta{
  position:relative;overflow:hidden;
  background:
    linear-gradient(180deg,var(--noir) 0,transparent 160px),
    radial-gradient(90% 150% at 50% 130%,rgba(226,87,31,.34),transparent 65%),
    var(--noir-2);
  border-bottom:1px solid var(--metal);
  text-align:center;
}
/* Quand la section precedente est deja --noir-2 (section--fond), le degrade
   vers --noir ferait une marche visible au lieu d'en corriger une : la bande
   demarre alors directement sur --noir-2, deja raccord avec ce qui precede. */
.section--fond + .bande-cta{
  background:
    radial-gradient(90% 150% at 50% 130%,rgba(226,87,31,.34),transparent 65%),
    var(--noir-2);
}
.bande-cta h2{font-size:clamp(26px,4.4vw,40px);font-weight:700;margin:0 0 16px}
.bande-cta p{color:var(--creme-doux);max-width:52ch;margin:0 auto 30px}

/* ---------- Formulaire ---------- */
.devis-grille{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:900px){.devis-grille{grid-template-columns:1fr}}

.formulaire{background:var(--noir-2);border:1px solid var(--metal);border-radius:var(--rayon);padding:clamp(22px,3vw,34px)}
.champ-groupe{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:640px){.champ-groupe{grid-template-columns:1fr}}
.champ{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.champ label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--creme-doux)}
.champ .obligatoire{color:var(--braise)}
.champ input,.champ select,.champ textarea{
  /* 16px minimum : en dessous, Safari iOS zoome sur le champ a chaque saisie. */
  font-family:var(--font-body);font-size:16px;color:var(--creme);
  background:var(--noir-3);border:1px solid var(--metal);border-radius:var(--rayon-s);
  padding:13px 14px;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.champ textarea{min-height:130px;resize:vertical}
.champ input::placeholder,.champ textarea::placeholder{color:var(--creme-faible)}
/* Champ actif (charte-site, « Formulaires ») : une seule bordure, epaissie a 2 px
   par une ombre interne (rien ne bouge dans le champ), a la couleur du texte du
   site -- ici la creme, puisque le site est sur fond sombre -- jamais l'accent. */
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--creme);box-shadow:inset 0 0 0 1px var(--creme)}
.champ select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:48px;background:var(--noir-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A79E94'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") no-repeat right 16px center/18px 18px}
/* Fenetre de validation apres envoi (formulaire-contact-brevo, §10) */
.merci-popup{border:0;padding:0;background:transparent;color:var(--creme);width:calc(100% - 32px);max-width:440px}
.merci-popup::backdrop{background:rgba(18,16,14,.82)}
.merci-carte{background:var(--noir-2);border:1px solid var(--metal);border-radius:var(--rayon);padding:32px 28px 28px;text-align:center}
.merci-carte .merci-image{display:block;width:72px;height:auto;margin:0 auto 16px} /* main OK au trait, creme sur fond transparent (formulaire-contact-brevo, §10) */
.merci-carte h2{font-size:22px;font-weight:700;line-height:1.3;margin:0 0 10px}
.merci-carte p{color:var(--creme-doux);font-size:15px;line-height:1.6;margin:0 0 24px}
.merci-carte form{margin:0}
.merci-carte .btn{min-width:160px;justify-content:center}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:640px){.cases{grid-template-columns:1fr}}
.case{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--creme-doux);background:var(--noir-3);border:1px solid var(--metal);border-radius:var(--rayon-s);padding:12px 13px;cursor:pointer;touch-action:manipulation}
.case input{accent-color:var(--braise);margin-top:2px;width:16px;height:16px;flex:none}
.case:hover{border-color:var(--metal-clair)}
.mention-legale{font-size:12.5px;color:var(--creme-faible);line-height:1.6;margin-top:6px}
.mention-legale a{color:var(--creme-doux)}

.encart{background:var(--noir-2);border:1px solid var(--metal);border-radius:var(--rayon);padding:26px 24px;margin-bottom:18px}
.encart h3{font-size:16px;font-weight:700;margin-bottom:14px}
.encart p,.encart li{font-size:14px;color:var(--creme-doux)}
.encart .liste-puces{margin-top:0}

.avis-chantier{
  display:flex;gap:12px;align-items:flex-start;
  background:rgba(242,181,68,.07);border:1px solid rgba(242,181,68,.3);
  border-radius:var(--rayon-s);padding:14px 16px;margin-bottom:22px;
}
.avis-chantier svg{width:19px;height:19px;flex:none;color:var(--ambre);margin-top:2px}
.avis-chantier p{font-size:13.5px;color:var(--creme-doux)}

/* ---------- Formulaire de devis en plusieurs etapes ---------- */
/* Barre de progression minimaliste (pas de ronds numerotes ni de labels
   d'etape) : un simple trait qui se remplit, dans l'esprit de raphaeldutoit.com.
   Remplissage anime via transform:scaleX (propriete composee, jamais width --
   voir la regle de la charte sur les transitions couleur/transform uniquement). */
.devis-progression{height:4px;border-radius:999px;background:var(--metal);overflow:hidden;margin-bottom:30px}
.devis-progression-remplissage{
  height:100%;width:100%;background:var(--braise);border-radius:999px;
  transform:scaleX(.3333);transform-origin:left center;
  transition:transform .3s ease;
}

.devis-etape{display:none}
.devis-etape.active{display:block}

.devis-nav{display:flex;align-items:center;gap:12px;margin-top:26px}
.devis-nav .btn:only-child{margin-left:auto}
@media (max-width:480px){.devis-nav{flex-wrap:wrap}.devis-nav .btn{flex:1 1 auto}}

/* ---------- Pied de page ----------
   Modele commun aux 4 sites du groupe Rabilloud (charte footer, validee sur
   Brasserie des Sports) : grille 4 colonnes, tout le texte en 12px. */
.site-footer{background:var(--noir-2);padding:clamp(48px,6vw,72px) 0 28px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;row-gap:28px}.footer-grid>div:first-child{grid-column:1 / -1}}
.footer-grid h4{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--creme-doux);margin:0 0 14px}
.footer-grid p,.footer-grid address{font-style:normal;color:var(--creme-doux);font-size:12px;margin:0 0 8px}
.footer-grid a{text-decoration:none;color:var(--creme-doux);font-size:12px}
.footer-grid a:hover{color:var(--creme)}
.footer-link-ext{display:inline-flex;align-items:center;gap:5px}
.footer-link-ext svg{width:12px;height:12px;flex:none}
.footer-logo img,.footer-logo-svg{height:29px;width:auto;display:block;opacity:.64;margin-bottom:14px}
.footer-nav{display:flex;flex-direction:column;gap:9px}
.footer-social{display:flex;align-items:center;gap:14px;margin-top:14px}
.footer-social a{color:var(--creme-doux);display:flex}
.footer-social a:hover{color:var(--creme)}
.footer-social svg{width:18px;height:18px}
.footer-bottom{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--metal);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px 18px;
  font-size:12px;color:var(--creme-doux);
}
.footer-bottom a{color:inherit;text-decoration:underline;text-decoration-color:var(--metal);text-underline-offset:3px}
.footer-bottom a:hover{color:var(--creme)}
.footer-bottom-links{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center}
@media (max-width:640px){
  .footer-bottom{grid-template-columns:1fr;justify-items:center;text-align:center}
  .footer-bottom-links{justify-content:center}
  .credit{justify-self:center;text-align:center}
}

/* Credit "Site realise en Savoie" -- variante statique (competence
   footer-credit-savoie, §4) : credit.js n'est pas encore heberge sur
   raphaeldutoit.com (verifie le 24/09/2026, encore 404). Lien nofollow,
   drapeau croix de Savoie par defaut. Exception ouverture nouvel onglet
   decidee pour ce site (comme Mentions legales ci-dessus). */
.credit{font-size:.8125rem;line-height:1.6;margin:0;justify-self:end;text-align:right}
.credit a{display:inline-flex;align-items:center;gap:.35em;color:inherit;text-decoration:none}
.credit a>span{opacity:.62;transition:opacity .18s}
.credit a:hover>span,.credit a:focus-visible>span{opacity:1}
.credit a:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.credit .cx{width:1.15em;height:1.15em;flex:none}
.credit .cx path,.credit .cx rect{fill:#fdfeff}
@media (prefers-reduced-motion:reduce){.credit a>span{transition-duration:.01ms}}

/* ---------- Carte (plats), alimentee par l'admin au build ----------
   Marqueurs CARTES:NAV / CARTES:BODY dans formules.html : injectes par
   build-cartes.js a partir de /api/public/cartes?site=bds. Reste vide/repli
   statique tant qu'aucune carte n'est publiee cote admin. */
.carte-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.carte-nav a{
  font-family:var(--font-sans);font-size:13px;font-weight:600;
  color:var(--creme-doux);text-decoration:none;
  border:1px solid var(--metal);border-radius:999px;padding:7px 16px;
}
.carte-nav a:hover{color:var(--creme);border-color:var(--braise)}
.carte-groupe{scroll-margin-top:calc(var(--header-h) + 20px)}
.carte-groupe+.carte-groupe{margin-top:48px;padding-top:40px;border-top:1px solid var(--metal)}
.carte-titre{font-size:26px;font-weight:800;color:var(--creme);margin-bottom:18px}
.carte-section+.carte-section{margin-top:28px}
.carte-section h3{font-size:19px;font-weight:700;color:var(--creme)}
.carte-section-note{font-size:13.5px;color:var(--creme-doux);margin-top:4px}
.carte-section-prix{
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ambre);font-variant-numeric:tabular-nums;margin-top:6px;
}
.carte-plats{margin-top:16px;display:flex;flex-direction:column;gap:16px}
.carte-plat{border-top:1px solid var(--metal);padding-top:14px}
.carte-plat-entete{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.carte-plat-entete h4{font-size:15.5px;font-weight:600;color:var(--creme)}
.carte-plat-tarifs{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.carte-tarif{font-size:14px;color:var(--braise-clair);font-variant-numeric:tabular-nums;white-space:nowrap}
.carte-tarif-libelle{color:var(--creme-doux);font-size:12.5px;margin-right:6px}
.carte-plat-description{font-size:13.5px;color:var(--creme-doux);margin-top:4px}
.carte-plat-allergenes{font-size:12px;color:var(--creme-faible);margin-top:4px;font-style:italic}

/* ---------- Transitions : règle groupée, couleurs uniquement ---------- */
.btn,.pastille,.carte,.formule,.realisation,.case,.site-nav a,.lien-fleche,
.footer-grid a,.footer-social a,.burger,.marque,.carte-nav a,.faq-question,.footer-bottom a{
  transition:color .15s ease,background-color .15s ease,border-color .15s ease;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn,.pastille,.carte,.formule,.realisation,.case,.site-nav a,.lien-fleche,
  .footer-grid a,.footer-social a,.burger,.marque,.carte-nav a,.faq-question,.footer-bottom a{transition-duration:.01ms}
  .devis-progression-remplissage{transition-duration:.01ms}
}

/* ---------- FAQ (formules) ---------- */
.faq-liste{margin-top:20px;border-top:1px solid var(--metal)}
.faq-item{border-bottom:1px solid var(--metal)}
.faq-question{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:16px 2px;cursor:pointer;list-style:none;
  color:var(--creme);touch-action:manipulation;
}
.faq-question::-webkit-details-marker{display:none}
.faq-question:hover,.faq-question:focus-visible{color:var(--braise-clair)}
.faq-question:focus-visible{outline:2px solid var(--braise);outline-offset:2px}
.faq-question strong{font-weight:600}
.faq-icone{flex-shrink:0;width:20px;height:20px;color:var(--braise);transition:transform .15s ease}
.faq-item[open] .faq-icone{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.faq-icone{transition:none}}
.faq-reponse{padding:0 2px 18px}
.faq-reponse p{margin:0;color:var(--creme-doux)}

/* ---------- Divers ---------- */
.saut{height:1px}
.visuellement-cache{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-vide{text-align:center;max-width:560px;margin-inline:auto}
.page-vide .titre-section{margin-bottom:14px}

/* ---------- Mentions légales : texte courant ---------- */
.mentions-corps{margin-top:8px;display:flex;flex-direction:column;gap:30px}
.mentions-corps h2{font-size:19px;font-weight:700;color:var(--creme);margin-bottom:10px}
.mentions-corps p{color:var(--creme-doux);font-size:15px;line-height:1.65}
.mentions-corps p+p{margin-top:8px}
.mentions-corps a{color:var(--braise-clair)}

/* Partenaires : 6 logos sur 2 lignes de 3 en desktop (22/10/2026) */
@media (min-width:901px){.grille--partenaires{grid-template-columns:repeat(3,1fr)}}