/* =================================================================
   SHAOLIN ROMAINVILLE — Feuille de style
   Palette issue du logo : noir, bronze/or, rouge Shaolin, crème.
   ================================================================= */

:root{
  --noir:#0B0B0C;
  --noir-2:#121216;
  --noir-3:#191920;
  --noir-4:#22222b;
  --creme:#F4EFE6;
  --creme-2:#EAE2D4;
  --bronze:#B98A5A;
  --or:#E3B274;
  --or-clair:#F3D9AE;
  --rouge:#E01F1A;
  --rouge-2:#B01512;

  --txt:rgba(244,239,230,.70);
  --txt-fort:#F4EFE6;
  --txt-accent:rgba(244,239,230,.86);
  --txt-sombre:rgba(11,11,12,.72);

  --bord:rgba(185,138,90,.22);
  --bord-fort:rgba(185,138,90,.45);

  --display:'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --corps:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cn:'Noto Serif SC', 'Songti SC', serif;

  --wrap:1240px;
  --r:4px;
  --tr:.45s cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noir);color:var(--txt);
  font-family:var(--corps);font-size:17px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--rouge);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--noir)}
::-webkit-scrollbar-thumb{background:var(--noir-4);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--bronze)}

.skip{position:absolute;left:-9999px;top:0;background:var(--or);color:#000;padding:.8rem 1.2rem;z-index:999}
.skip:focus{left:0}

/* Repère clavier : visible sur fond sombre comme sur fond clair */
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:2px}
.section--clair :focus-visible{outline-color:var(--alt-accent)}
.btn:focus-visible{outline-offset:4px}

.wrap{width:min(100% - 3rem,var(--wrap));margin-inline:auto}
@media(max-width:640px){.wrap{width:min(100% - 2rem,var(--wrap))}}

/* ---------------- Typographie ---------------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:.01em;color:var(--txt-fort);margin:0;text-transform:uppercase}
.t-geant{font-size:clamp(3rem,10.5vw,9rem)}
.t-xl{font-size:clamp(2.4rem,6vw,5rem)}
.t-l{font-size:clamp(1.9rem,3.6vw,3.1rem)}
.t-m{font-size:clamp(1.35rem,2.2vw,1.85rem)}
.t-s{font-size:clamp(1.05rem,1.5vw,1.25rem)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
.chapo{font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.65;color:var(--txt-accent);font-weight:300}
.section--clair .chapo{color:var(--alt-txt-fort)}

.etiquette{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--corps);font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--or);margin-bottom:1.4rem;
}
.etiquette::before{content:"";width:34px;height:1px;background:var(--rouge)}
.section--clair .etiquette{color:var(--alt-accent)}

.cn{font-family:var(--cn)}

/* ---------------- Boutons ---------------- */
.btn{
  --bg:var(--or);--fg:#0B0B0C;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.05rem 2.1rem;background:var(--bg);color:var(--fg);
  font-family:var(--corps);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;border:1px solid transparent;border-radius:var(--r);overflow:hidden;
  transition:transform var(--tr),background var(--tr),color var(--tr),border-color var(--tr);
}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--rouge);
  transform:translateY(101%);transition:transform var(--tr);z-index:0;
}
.btn>*{position:relative;z-index:1}
.btn:hover{color:#fff;transform:translateY(-3px)}
.btn:hover::after{transform:translateY(0)}
.btn--sm{padding:.78rem 1.4rem;font-size:.7rem}
.btn--ligne{--bg:transparent;--fg:var(--or);border-color:var(--bord-fort)}
.btn--ligne:hover{border-color:var(--rouge)}
.btn--sombre{--bg:var(--noir);--fg:var(--creme)}
.section--clair .btn--ligne{--fg:var(--alt-titre);border-color:var(--alt-bord-fort)}

/* ---------------- En-tête ---------------- */
.entete{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background var(--tr),backdrop-filter var(--tr),border-color var(--tr),padding var(--tr);
  border-bottom:1px solid transparent;
}
.entete__inner{
  width:min(100% - 3rem,1500px);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.1rem 0;transition:padding var(--tr);
}
.entete.est-fixe{background:rgba(11,11,12,.86);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--bord)}
.entete.est-fixe .entete__inner{padding:.55rem 0}

.marque{display:flex;align-items:center;gap:.85rem}
.marque__logo{width:52px;height:52px;object-fit:contain;transition:width var(--tr),height var(--tr)}
.entete.est-fixe .marque__logo{width:42px;height:42px}
.marque__txt{display:flex;flex-direction:column;line-height:1}
.marque__txt strong{font-family:var(--display);font-size:1.28rem;letter-spacing:.06em;color:var(--creme);text-transform:uppercase}
.marque__txt em{font-style:normal;font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--or);margin-top:.28rem}

.nav__liste{display:flex;align-items:center;gap:.2rem;list-style:none;margin:0;padding:0}
.nav__lien{
  position:relative;display:block;padding:.6rem .68rem;white-space:nowrap;
  font-size:.74rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:rgba(244,239,230,.68);
  transition:color .3s;
}
.nav__lien::after{
  content:"";position:absolute;left:.68rem;right:.68rem;bottom:.32rem;height:1px;background:var(--rouge);
  transform:scaleX(0);transform-origin:left;transition:transform var(--tr);
}
.nav__lien:hover,.nav__lien.est-actif{color:var(--creme)}
.nav__lien:hover::after,.nav__lien.est-actif::after{transform:scaleX(1)}
.entete__cta{white-space:nowrap}
.nav__cta-mobile{display:none}

.entete__actions{display:flex;align-items:center;gap:1rem}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px}
.burger span{display:block;height:2px;background:var(--creme);transition:transform .35s,opacity .25s,width .35s}
.burger span:nth-child(1){width:26px}
.burger span:nth-child(2){width:18px}
.burger span:nth-child(3){width:22px}
.burger.est-ouvert span:nth-child(1){transform:translateY(8px) rotate(45deg);width:26px}
.burger.est-ouvert span:nth-child(2){opacity:0}
.burger.est-ouvert span:nth-child(3){transform:translateY(-8px) rotate(-45deg);width:26px}

@media(max-width:1250px){
  .entete__cta{display:none}
  .burger{display:flex}
  .nav{
    position:fixed;inset:0;background:var(--noir);
    display:flex;align-items:center;justify-content:center;
    clip-path:circle(0% at calc(100% - 3rem) 3rem);transition:clip-path .7s cubic-bezier(.77,0,.18,1);
  }
  .nav.est-ouvert{clip-path:circle(150% at calc(100% - 3rem) 3rem)}
  .nav__liste{flex-direction:column;gap:.2rem;text-align:center}
  .nav__lien{font-family:var(--display);font-size:clamp(1.6rem,6vw,2.4rem);letter-spacing:.02em;padding:.35rem 1rem;color:var(--creme)}
  .nav__lien::after{display:none}
  .nav__lien.est-actif{color:var(--or)}
  .nav__cta-mobile{display:block;margin-top:1.6rem}
}

/* ---------------- Héros ---------------- */
.heros{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.heros__media{position:absolute;inset:-8% 0 0 0;z-index:-2}
.heros__media img{width:100%;height:112%;object-fit:cover;object-position:center 48%;filter:grayscale(.55) contrast(1.15) brightness(.5) saturate(.8)}
.heros__voile{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 15% 100%, rgba(224,31,26,.20) 0%, transparent 55%),
    linear-gradient(to top, var(--noir) 3%, rgba(11,11,12,.84) 38%, rgba(11,11,12,.60) 100%),
    linear-gradient(to right, rgba(11,11,12,.85) 0%, rgba(11,11,12,.25) 60%, transparent 100%);
}
.heros__grain{position:absolute;inset:0;z-index:-1;opacity:.35;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");}
.heros__cn{
  position:absolute;right:-.06em;top:44%;transform:translateY(-50%);z-index:-1;
  font-family:var(--cn);font-size:min(34vw,30rem);line-height:.8;font-weight:700;
  color:transparent;-webkit-text-stroke:1px rgba(185,138,90,.16);user-select:none;pointer-events:none;
}
.heros__inner{width:min(100% - 3rem,var(--wrap));margin-inline:auto;padding:0 0 clamp(4rem,10vh,7.5rem)}
.heros__surtitre{
  display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem;
  font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:var(--or);font-weight:600;
}
.heros__surtitre::before{content:"";width:60px;height:1px;background:var(--rouge)}
.heros__titre{font-size:clamp(3rem,11vw,9.4rem);line-height:.84;margin-bottom:1.8rem}
.heros__titre span{display:block;overflow:hidden}
.heros__titre b{display:block;font-weight:400}
.heros__titre .ligne-2{color:transparent;-webkit-text-stroke:2px var(--or)}
.heros__txt{max-width:44ch;font-size:clamp(1rem,1.4vw,1.16rem);color:rgba(244,239,230,.78);margin-bottom:2.4rem;font-weight:300}
.heros__actions{display:flex;flex-wrap:wrap;gap:1rem}
.heros__scroll{
  position:absolute;left:50%;bottom:1.8rem;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,239,230,.45);
}
.heros__scroll i{display:block;width:1px;height:52px;background:linear-gradient(to bottom,var(--or),transparent);animation:descend 2.2s ease-in-out infinite}
@keyframes descend{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* bandeau défilant */
.bandeau{background:var(--rouge);color:#fff;padding:.85rem 0;overflow:hidden;position:relative;z-index:3}
.bandeau__piste{display:flex;width:max-content;animation:defile 34s linear infinite}
.bandeau:hover .bandeau__piste{animation-play-state:paused}
.bandeau__item{display:flex;align-items:center;gap:2.2rem;padding-right:2.2rem;font-size:.76rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.bandeau__item span.cn{font-size:.95rem;letter-spacing:.1em}
.bandeau__item::after{content:"✦";color:rgba(255,255,255,.6)}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------------- Sections génériques ---------------- */
.section{position:relative;padding:clamp(4.5rem,9vw,8.5rem) 0}
.section--clair{background:var(--alt-fond);color:var(--alt-txt)}
.section--clair h1,.section--clair h2,.section--clair h3,.section--clair h4{color:var(--alt-titre)}
.section--noir2{background:var(--noir-2)}
.section__filigrane{
  position:absolute;right:2%;top:6%;font-family:var(--cn);font-size:min(24vw,20rem);line-height:1;font-weight:700;
  color:rgba(185,138,90,.045);pointer-events:none;user-select:none;z-index:0;
}
.section--clair .section__filigrane{color:var(--alt-filigrane)}
.section>.wrap{position:relative;z-index:1}
.entete-sec{max-width:62ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.entete-sec--centre{margin-inline:auto;text-align:center}
.entete-sec--centre .etiquette{justify-content:center}
.entete-sec p{margin-top:1.2rem}

.grille{display:grid;gap:1.6rem}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(400px, 100%), 1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(280px, 100%), 1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(230px, 100%), 1fr))}

/* ---------------- Cartes ---------------- */
.carte{
  position:relative;background:var(--noir-2);border:1px solid var(--bord);border-radius:var(--r);
  padding:2.1rem 1.9rem;overflow:hidden;transition:transform var(--tr),border-color var(--tr),background var(--tr);
}
.carte::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--rouge);transform:scaleX(0);transform-origin:left;transition:transform var(--tr)}
.carte:hover{transform:translateY(-6px);border-color:var(--bord-fort);background:var(--noir-3)}
.carte:hover::before{transform:scaleX(1)}
.carte__cn{font-family:var(--cn);font-size:2.6rem;line-height:1;color:var(--bronze);opacity:.85;margin-bottom:1rem;display:block}
.carte__titre{margin-bottom:.8rem}
.section--clair .carte{background:var(--alt-surface);border-color:var(--alt-bord)}
.section--clair .carte:hover{background:var(--alt-surface);border-color:var(--alt-bord-fort)}
.section--clair .carte__cn{color:var(--alt-accent);opacity:.7}

/* valeurs numérotées */
.valeur{position:relative;padding-top:2.4rem}
.valeur__num{
  position:absolute;top:1.1rem;right:1.4rem;font-family:var(--display);font-size:3.4rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(185,138,90,.35);
}

/* ---------------- Chiffres ---------------- */
.chiffres{border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.chiffres__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px, 100%), 1fr))}
.chiffre{padding:clamp(2rem,4vw,3.2rem) 1.4rem;text-align:center;border-right:1px solid var(--bord)}
.chiffre:last-child{border-right:0}
.chiffre__val{font-family:var(--display);font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;color:var(--or)}
.chiffre__lbl{display:block;margin-top:.8rem;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,239,230,.62);line-height:1.5}
@media(max-width:760px){.chiffre:nth-child(2n){border-right:0}.chiffre{border-bottom:1px solid var(--bord)}}

/* ---------------- Proverbes ---------------- */
.proverbes{background:var(--noir-2);border-block:1px solid var(--bord);position:relative;overflow:hidden}
.proverbe{text-align:center;max-width:56ch;margin-inline:auto}
.proverbe__cn{display:block;font-family:var(--cn);font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.25;color:var(--or);font-weight:700}
.proverbe__py{display:block;margin-top:.9rem;font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bronze)}
.proverbe__fr{display:block;margin-top:1.6rem;font-family:var(--display);font-size:clamp(1.2rem,2.4vw,2rem);color:var(--creme);text-transform:none;line-height:1.3}
.proverbes__points{display:flex;justify-content:center;gap:.6rem;margin-top:2.6rem}
.proverbes__points button{width:34px;height:2px;background:rgba(185,138,90,.3);transition:background .3s}
.proverbes__points button.est-actif{background:var(--rouge)}
.proverbe{display:none}
.proverbe.est-actif{display:block;animation:fondu .7s ease}
@keyframes fondu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------------- Duo texte / image ---------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.duo{grid-template-columns:1fr}}
.duo--inverse .duo__media{order:2}
.duo__media{position:relative}
.duo__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);filter:grayscale(.2) contrast(1.05)}
.duo__media::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--bord-fort);border-radius:var(--r);z-index:-1}
.duo__badge{
  position:absolute;left:-1.2rem;bottom:1.6rem;background:var(--rouge);color:#fff;
  padding:1rem 1.4rem;font-family:var(--display);font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase;border-radius:var(--r);
}

/* ---------------- Cours / horaires ---------------- */
.jour{background:var(--noir-2);border:1px solid var(--bord);border-radius:var(--r)}
.jour__tete{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.7rem 1.9rem;background:linear-gradient(120deg,rgba(224,31,26,.16),transparent 65%);border-bottom:1px solid var(--bord);border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
.jour__nom{font-family:var(--display);font-size:clamp(1.8rem,3vw,2.6rem);color:var(--creme);text-transform:uppercase}
.jour__lieu{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or)}
.creneau{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;padding:1.15rem 1.9rem;border-bottom:1px solid rgba(185,138,90,.12);transition:background .3s}
.creneau:last-child{border-bottom:0}
.creneau:hover{background:rgba(185,138,90,.06)}
.creneau__h{font-family:var(--display);font-size:1.22rem;color:var(--or);letter-spacing:.02em;white-space:nowrap}
.creneau__grp{font-weight:600;color:var(--creme);letter-spacing:.02em}
.creneau__age{font-size:.86rem;color:rgba(244,239,230,.5);white-space:nowrap}
.jour__pied{position:relative;z-index:2;padding:1.5rem 1.9rem;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;justify-content:space-between}
.jour__adr{font-size:.92rem;color:var(--txt);max-width:38ch}
.carte-map{width:100%;aspect-ratio:16/9;border:0;filter:grayscale(1) invert(.92) contrast(.85);border-top:1px solid var(--bord);border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px);display:block}

/* ---------------- Galerie ---------------- */
.galeries{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px, 100%), 1fr));gap:1.5rem}
.gal-carte{position:relative;display:block;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3;background:var(--noir-3)}
.gal-carte img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1),filter .6s;filter:grayscale(.4) brightness(.75)}
.gal-carte:hover img{transform:scale(1.08);filter:grayscale(0) brightness(.85)}
.gal-carte__voile{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,12,.94) 0%,rgba(11,11,12,.15) 55%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.6rem}
.gal-carte__titre{font-family:var(--display);font-size:1.5rem;color:var(--creme);text-transform:uppercase;line-height:1.05}
.gal-carte__meta{margin-top:.5rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or)}

.mosaique{columns:3 280px;column-gap:1.1rem}
.mosaique figure{break-inside:avoid;margin:0 0 1.1rem;position:relative;overflow:hidden;border-radius:var(--r);cursor:zoom-in;background:var(--noir-3)}
.mosaique img{width:100%;transition:transform .8s cubic-bezier(.22,1,.36,1),filter .5s;filter:grayscale(.25) brightness(.9)}
.mosaique figure:hover img{transform:scale(1.05);filter:none}
.mosaique figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.6rem 1.1rem .9rem;font-size:.82rem;color:var(--creme);
  background:linear-gradient(to top,rgba(11,11,12,.9),transparent);
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;
}
.mosaique figure:hover figcaption{opacity:1;transform:none}

/* ---------------- Agenda ---------------- */
.event{display:grid;grid-template-columns:110px 1fr;gap:1.8rem;padding:1.9rem 0;border-bottom:1px solid var(--bord);align-items:start}
.event:first-of-type{border-top:1px solid var(--bord)}
.event__date{text-align:center;border:1px solid var(--bord-fort);border-radius:var(--r);padding:.9rem .4rem;background:var(--noir-2)}
.event__j{display:block;font-family:var(--display);font-size:2.5rem;line-height:1;color:var(--or)}
.event__m{display:block;font-size:.68rem;letter-spacing:.2em;color:var(--rouge);font-weight:700;margin-top:.35rem}
.event__a{display:block;font-size:.68rem;letter-spacing:.12em;color:rgba(244,239,230,.4);margin-top:.2rem}
.event__corps{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:start}
.event__titre{margin-bottom:.6rem}
.event__infos{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or);margin-bottom:.8rem}
.event__img{width:210px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);filter:grayscale(.3)}
.event--passe{opacity:.5}
.event--passe .event__j{color:rgba(244,239,230,.5)}
@media(max-width:760px){
  .event{grid-template-columns:80px 1fr;gap:1.1rem}
  .event__corps{grid-template-columns:1fr}
  .event__img{width:100%;max-width:none}
  .event__j{font-size:1.9rem}
}

/* ---------------- Actualités ---------------- */
.actu{display:flex;flex-direction:column;overflow:hidden;background:var(--noir-2);border:1px solid var(--bord);border-radius:var(--r);transition:transform var(--tr),border-color var(--tr)}
.actu:hover{transform:translateY(-6px);border-color:var(--bord-fort)}
.actu__img{aspect-ratio:16/10;overflow:hidden;background:var(--noir-3)}
.actu__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1);filter:grayscale(.3) brightness(.85)}
.actu:hover .actu__img img{transform:scale(1.07);filter:none}
.actu__corps{padding:1.7rem;display:flex;flex-direction:column;flex:1}
.actu__date{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-bottom:.85rem}
.actu__titre{font-size:1.35rem;line-height:1.1;margin-bottom:.8rem}
.actu__lire{margin-top:auto;padding-top:1.2rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or);display:inline-flex;gap:.5rem;align-items:center}
.actu__lire::after{content:"→";transition:transform .35s}
.actu:hover .actu__lire::after{transform:translateX(6px)}
.epingle{position:absolute;top:1rem;left:1rem;background:var(--rouge);color:#fff;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding:.35rem .7rem;font-weight:700;z-index:2;border-radius:2px}

/* ---------------- Frise du maître ---------------- */
.frise{position:relative;margin-left:1rem;padding-left:2.6rem}
.frise::before{content:"";position:absolute;left:0;top:.6rem;bottom:.6rem;width:1px;background:linear-gradient(to bottom,var(--rouge),var(--bronze),transparent)}
.frise__item{position:relative;padding-bottom:2.6rem}
.frise__item:last-child{padding-bottom:0}
.frise__item::before{content:"";position:absolute;left:-2.95rem;top:.55rem;width:11px;height:11px;background:var(--noir);border:2px solid var(--rouge);border-radius:50%;transition:background .3s,transform .3s}
.frise__item:hover::before{background:var(--rouge);transform:scale(1.3)}
.frise__annee{font-family:var(--display);font-size:1.6rem;color:var(--or);line-height:1;margin-bottom:.45rem}
.frise__titre{font-size:1.05rem;font-weight:600;color:var(--creme);margin-bottom:.4rem;letter-spacing:.01em}
.frise__txt{font-size:.95rem;color:var(--txt)}
.section--clair .frise__titre{color:var(--alt-titre)}
.section--clair .frise__txt{color:var(--alt-txt-fort)}
.section--clair .frise__annee{color:var(--alt-accent)}
.section--clair .frise__item::before{background:var(--alt-fond)}

/* films */
.films{display:flex;flex-direction:column;gap:.55rem;list-style:none;padding:0;margin:1.6rem 0 0}
/* Simple liste de titres : aucun effet de survol, pour ne pas laisser croire à un lien. */
.films li{display:flex;align-items:center;gap:.5rem;border-left:2px solid var(--rouge);padding:.35rem 0 .35rem .8rem;font-size:.88rem;letter-spacing:.01em;color:var(--creme);cursor:default}
.films li::before{content:"▸";color:var(--bronze);font-size:.7rem}
.section--clair .films li{color:var(--alt-titre)}

/* ---------------- Étapes / FAQ / documents ---------------- */
.etape{position:relative;padding-left:4.2rem}
.etape__num{position:absolute;left:0;top:0;width:3rem;height:3rem;display:grid;place-items:center;border:1px solid var(--bord-fort);border-radius:50%;font-family:var(--display);font-size:1.2rem;color:var(--or)}
.etape__titre{margin-bottom:.5rem}

.doc{display:flex;align-items:center;gap:1.2rem;padding:1.4rem 1.6rem;background:var(--noir-2);border:1px solid var(--bord);border-radius:var(--r);transition:border-color var(--tr),transform var(--tr)}
.doc:hover{border-color:var(--rouge);transform:translateX(6px)}
.doc__ico{width:44px;height:44px;flex:none;display:grid;place-items:center;background:rgba(224,31,26,.12);color:var(--rouge);border-radius:var(--r);font-size:.62rem;font-weight:700;letter-spacing:.06em}
.doc__t{font-weight:600;color:var(--creme)}
.doc__d{font-size:.88rem;color:var(--txt)}
.doc__fl{margin-left:auto;color:var(--or);font-size:1.3rem}
.section--clair .doc{background:var(--alt-surface);border-color:var(--alt-bord)}
.section--clair .doc__t{color:var(--alt-titre)}
.section--clair .doc__d{color:var(--alt-txt)}

.faq__item{border-bottom:1px solid var(--bord)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.4rem 0;text-align:left;font-size:1.05rem;font-weight:600;color:var(--creme);letter-spacing:.01em}
.faq__q i{font-style:normal;font-size:1.5rem;color:var(--or);transition:transform .4s;line-height:1}
.faq__item.est-ouvert .faq__q i{transform:rotate(45deg)}
.faq__r{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,1,.36,1)}
.faq__r p{padding-bottom:1.4rem;color:rgba(244,239,230,.65)}
.section--clair .faq__q{color:var(--alt-titre)}
.section--clair .faq__r p{color:var(--alt-txt-fort)}
.section--clair .faq__item{border-color:var(--alt-bord)}

/* ---------------- Bandeau d'appel ---------------- */
.appel{position:relative;overflow:hidden;background:var(--noir-2);text-align:center;isolation:isolate}
.appel__fond{position:absolute;inset:0;z-index:-2}
.appel__fond img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.28)}
.appel::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 90% at 50% 100%,rgba(224,31,26,.28),transparent 70%)}
.appel__titre{font-size:clamp(2.2rem,6vw,5rem);margin-bottom:1.4rem}
.appel__txt{max-width:52ch;margin:0 auto 2.4rem}
.appel__actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* ---------------- Bannière de page ---------------- */
.banniere{position:relative;padding:clamp(9rem,17vw,13rem) 0 clamp(3rem,6vw,5rem);overflow:hidden;isolation:isolate;border-bottom:1px solid var(--bord)}
.banniere__fond{position:absolute;inset:0;z-index:-2}
.banniere__fond img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6) brightness(.42)}
.banniere::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--noir) 2%,rgba(11,11,12,.72) 60%,rgba(11,11,12,.55))}
.banniere__cn{position:absolute;right:1%;bottom:-.18em;font-family:var(--cn);font-size:min(28vw,22rem);line-height:.8;font-weight:700;color:transparent;-webkit-text-stroke:1px rgba(185,138,90,.14);z-index:-1;user-select:none}
.fil{display:flex;gap:.6rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,230,.45);margin-top:1.4rem}
.fil a:hover{color:var(--or)}

/* ---------------- Formulaire ---------------- */
.form{display:grid;gap:1.2rem}
.champ{display:flex;flex-direction:column;gap:.5rem}
.champ label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or);font-weight:600}
.champ input,.champ select,.champ textarea{
  width:100%;padding:.95rem 1.1rem;background:var(--noir-2);border:1px solid var(--bord);border-radius:var(--r);
  color:var(--creme);font-family:var(--corps);font-size:1rem;transition:border-color .3s,background .3s;
}
.champ textarea{min-height:150px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:0;border-color:var(--or);background:var(--noir-3)}
.champ input::placeholder,.champ textarea::placeholder{color:rgba(244,239,230,.3)}
.form__duo{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:640px){.form__duo{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px}
.alerte{padding:1.1rem 1.4rem;border-radius:var(--r);border:1px solid;font-size:.95rem;margin-bottom:1.6rem}
.alerte--ok{border-color:rgba(120,200,120,.5);background:rgba(120,200,120,.1);color:#bfe6bf}
.alerte--ko{border-color:rgba(224,31,26,.5);background:rgba(224,31,26,.1);color:#f3b3b1}

.contact-info{display:flex;flex-direction:column;gap:1.4rem}
.contact-ligne{display:flex;gap:1.1rem;align-items:flex-start}
.contact-ligne__ico{width:42px;height:42px;flex:none;display:grid;place-items:center;border:1px solid var(--bord-fort);border-radius:50%;color:var(--or)}
.contact-ligne__lbl{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-bottom:.25rem}
.carte li>.contact-ligne__lbl{margin-bottom:.15rem}

/* ---------------- Pied de page ---------------- */
.pied{background:var(--noir-2);border-top:1px solid var(--bord);position:relative}
.pied__haut{padding:clamp(3.5rem,7vw,5.5rem) 0 3rem}
.pied__grille{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2.6rem}
@media(max-width:900px){.pied__grille{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pied__grille{grid-template-columns:1fr}}
.pied__logo{width:88px;margin-bottom:1.3rem}
.pied__baseline{display:flex;align-items:center;gap:.85rem;font-family:var(--display);font-size:1.02rem;text-transform:uppercase;color:var(--creme);letter-spacing:.04em;margin-bottom:.9rem;line-height:1.15}
.pied__sceau{width:46px;height:46px;flex:none;object-fit:contain;opacity:.95}
.pied__texte{font-size:.92rem;color:rgba(244,239,230,.55);max-width:38ch}
.pied__titre{font-size:.78rem;letter-spacing:.22em;color:var(--or);margin-bottom:1.3rem;font-family:var(--corps);font-weight:700}
.pied__liens{list-style:none;padding:0;margin:0 0 1.4rem;display:flex;flex-direction:column;gap:.7rem;font-size:.94rem}
.pied__liens a{color:rgba(244,239,230,.6);transition:color .3s,padding-left .3s}
.pied__liens a:hover{color:var(--or);padding-left:.4rem}
.pied__liens--infos li{color:rgba(244,239,230,.6)}
.reseaux{display:flex;gap:.7rem;list-style:none;padding:0;margin:1.6rem 0 0}
.reseaux a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--bord);border-radius:50%;transition:background .3s,border-color .3s,transform .3s}
.reseaux svg{width:18px;height:18px;fill:var(--creme);transition:fill .3s}
.reseaux a:hover{background:var(--rouge);border-color:var(--rouge);transform:translateY(-3px)}
.reseaux a:hover svg{fill:#fff}
.pied__proverbe{text-align:center;padding:2.4rem 1.5rem;border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.pied__cn{display:block;font-family:var(--cn);font-size:1.9rem;color:var(--or);font-weight:700;letter-spacing:.12em}
.pied__fr{display:block;margin-top:.6rem;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,230,.45)}
.pied__bas{padding:1.5rem 0}
.pied__bas-inner{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;font-size:.78rem;color:rgba(244,239,230,.55)}
.pied__bas a:hover{color:var(--or)}

/* ---------------- Lightbox ---------------- */
/* L'attribut hidden doit l'emporter : sans cette règle, le calque reste
   présent, invisible et par-dessus toute la page — plus rien n'est cliquable. */
.lightbox[hidden]{display:none !important}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,6,7,.97);display:flex;align-items:center;justify-content:center;padding:4rem 1.5rem;opacity:0;transition:opacity .35s}
.lightbox.est-visible{opacity:1}
.lightbox__fig{margin:0;max-width:min(1200px,92vw);text-align:center}
.lightbox__fig img{max-height:78vh;width:auto;margin-inline:auto;border-radius:var(--r)}
.lightbox__fig figcaption{margin-top:1.1rem;font-size:.88rem;color:rgba(244,239,230,.6);letter-spacing:.06em}
.lightbox__fermer{position:absolute;top:1.2rem;right:1.6rem;font-size:2.6rem;line-height:1;color:var(--creme);transition:color .3s,transform .3s}
.lightbox__fermer:hover{color:var(--rouge);transform:rotate(90deg)}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;font-size:2.4rem;color:var(--creme);background:rgba(255,255,255,.05);border-radius:50%;transition:background .3s,color .3s}
.lightbox__nav:hover{background:var(--rouge);color:#fff}
.lightbox__nav--prev{left:1.2rem}
.lightbox__nav--next{right:1.2rem}
@media(max-width:640px){.lightbox__nav{width:44px;height:44px;font-size:1.8rem}}

/* ---------------- Retour haut ---------------- */
.haut{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:90;width:48px;height:48px;border-radius:50%;
  background:var(--or);color:#0B0B0C;font-size:1.2rem;display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(14px);transition:opacity .4s,transform .4s,background .3s;
}
.haut.est-visible{opacity:1;pointer-events:auto;transform:none}
.haut:hover{background:var(--rouge);color:#fff}

/* ---------------- Animations d'apparition ---------------- */
.rev{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.rev.est-vu{opacity:1;transform:none}
.rev-d1{transition-delay:.09s}.rev-d2{transition-delay:.18s}.rev-d3{transition-delay:.27s}.rev-d4{transition-delay:.36s}
.rev-l{opacity:0;transform:translateX(-40px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.rev-l.est-vu{opacity:1;transform:none}

.heros__titre b,.heros__surtitre,.heros__txt,.heros__actions{opacity:0;transform:translateY(60px);animation:monte 1.15s cubic-bezier(.22,1,.36,1) forwards}
.heros__surtitre{animation-delay:.15s}
.heros__titre span:nth-child(1) b{animation-delay:.3s}
.heros__titre span:nth-child(2) b{animation-delay:.42s}
.heros__txt{animation-delay:.58s}
.heros__actions{animation-delay:.7s}
@keyframes monte{to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rev,.rev-l{opacity:1;transform:none}
}

/* ---------------- Utilitaires ---------------- */
.centre{text-align:center}
.mt-s{margin-top:1rem}.mt-m{margin-top:2rem}.mt-l{margin-top:3.2rem}
.vide{padding:4rem 1.5rem;text-align:center;border:1px dashed var(--bord);border-radius:var(--r);color:var(--txt)}
.section--clair .vide{border-color:var(--alt-bord);color:var(--alt-txt)}
@media(max-width:960px){.mosaique{columns:2 220px}}
@media(max-width:540px){.mosaique{columns:1}}

/* ---------- Ajustements mobile ---------- */
@media(max-width:640px){
  .heros__scroll{display:none}
  .heros__actions{flex-direction:column;align-items:stretch}
  .heros__actions .btn{width:100%}
  .heros__inner{padding-bottom:3.5rem}
  .appel__actions .btn{width:100%}
  .duo__badge{left:0;bottom:1rem;font-size:.95rem;padding:.75rem 1rem}
  .frise{margin-left:.2rem;padding-left:2rem}
  .frise__item::before{left:-2.35rem}
  .etape{padding-left:3.6rem}
  .creneau{grid-template-columns:auto 1fr;row-gap:.25rem;padding:1rem 1.2rem}
  .creneau__age{grid-column:2;justify-self:start}
  .jour__tete,.jour__pied{padding:1.2rem}
}

/* ---------- Pages légales ---------- */
.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:900px){.legal{grid-template-columns:1fr;gap:2rem}.legal__cote{position:static !important}}
.legal__cote{position:sticky;top:6.5rem}
.legal__menu{display:flex;flex-direction:column;gap:.1rem;border-left:1px solid var(--bord)}
.legal__menu a{padding:.55rem 1rem;font-size:.9rem;color:var(--txt);border-left:2px solid transparent;margin-left:-1px;transition:color .25s,border-color .25s}
.legal__menu a:hover{color:var(--or);border-left-color:var(--rouge)}
.legal__maj{margin-top:1.8rem;font-size:.8rem;color:var(--txt);line-height:1.6}
.legal__maj strong{color:var(--or);font-weight:500}
@media(max-width:900px){
  .legal__menu{flex-direction:row;flex-wrap:wrap;border-left:0;gap:.4rem}
  .legal__menu a{border:1px solid var(--bord);border-radius:var(--r);padding:.45rem .9rem;font-size:.82rem;margin-left:0}
  .legal__menu a:hover{border-color:var(--rouge)}
}
.legal__bloc{padding-bottom:clamp(2.5rem,5vw,4rem);scroll-margin-top:6.5rem}
.legal__bloc:last-child{padding-bottom:0}
.legal__articles{display:flex;flex-direction:column;gap:1.9rem;margin-top:1.8rem}
.legal__article{border-top:1px solid var(--bord);padding-top:1.5rem}
.legal__article h3{display:flex;align-items:baseline;gap:.9rem;margin-bottom:.8rem;text-transform:none;font-size:1.15rem;letter-spacing:0}
.legal__num{font-family:var(--display);font-size:.9rem;color:var(--rouge);flex:none}
.legal__texte{font-size:.98rem;max-width:70ch}
.legal__liste{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-direction:column;gap:1rem;font-size:.96rem}
.legal__liste li{display:flex;flex-direction:column;gap:.15rem;color:var(--creme)}
.legal__liste span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.legal__liste a:hover{color:var(--or)}
.pied__bas-liens{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
.pied__bas-liens a{position:relative}
.pied__bas-liens a:not(:last-child)::after{content:"·";position:absolute;right:-.85rem;color:rgba(244,239,230,.25)}

/* ---------- Sécurité d'affichage : hidden doit toujours l'emporter ---------- */
[hidden]{display:none !important}

/* ---------- Choix de l'application d'itinéraire ---------- */
.iti{position:relative;display:inline-block}
.iti__panneau{
  position:absolute;left:0;top:calc(100% + .6rem);z-index:60;min-width:230px;
  background:var(--noir-2);border:1px solid var(--bord-fort);border-radius:var(--r);
  padding:.9rem;box-shadow:0 18px 44px rgba(0,0,0,.55);
  animation:itiApparait .28s cubic-bezier(.22,1,.36,1);
}
.iti__panneau.vers-haut{top:auto;bottom:calc(100% + .6rem)}
.iti__panneau.vers-droite{left:auto;right:0}
@keyframes itiApparait{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.iti__titre{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin:0 0 .7rem;padding:0 .3rem}
.iti__apps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.iti__apps a{
  display:flex;align-items:center;gap:.75rem;padding:.6rem .55rem;border-radius:3px;
  font-size:.94rem;color:var(--creme);transition:background .2s,padding-left .2s;
}
.iti__apps a:hover,.iti__apps a:focus-visible{background:rgba(185,138,90,.14);padding-left:.85rem}
.iti__ico{width:22px;height:22px;flex:none;border-radius:5px;display:block;position:relative}
.iti__ico--plans{background:linear-gradient(150deg,#6ad06a,#3aa7e0)}
.iti__ico--google{background:linear-gradient(150deg,#ea4335 0 38%,#4285f4 38% 68%,#34a853 68%)}
.iti__ico--waze{background:linear-gradient(150deg,#33ccff,#0099e6)}
.iti__ico--citymapper{background:linear-gradient(150deg,#0bbf75,#08965c)}
.iti__copier{
  width:100%;margin-top:.6rem;padding:.55rem;border-top:1px solid var(--bord);
  font-size:.8rem;letter-spacing:.06em;color:rgba(244,239,230,.62);transition:color .2s;text-align:center;
}
.iti__copier:hover{color:var(--or)}
.iti__copier.est-copie{color:#8fd39a}
.section--clair .iti__panneau{background:var(--alt-surface);border-color:var(--alt-bord-fort);box-shadow:0 18px 44px rgba(11,11,12,.14)}
.section--clair .iti__apps a{color:var(--alt-titre)}
.section--clair .iti__apps a:hover{background:var(--alt-survol)}
.section--clair .iti__titre{color:var(--alt-accent)}
.section--clair .iti__copier{color:var(--alt-txt);border-top-color:var(--alt-bord)}
@media(max-width:560px){
  .iti{display:block}
  .iti>.btn{width:100%}
  .iti__panneau{left:0;right:0;min-width:0}
}

/* ---------- Barre de progression de lecture ---------- */
.progression{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent;pointer-events:none}
.progression i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rouge),var(--or));transition:width .12s linear}

/* ---------- Héros : respiration lente de l'image ---------- */
.heros__media img{animation:respire 26s ease-in-out infinite alternate;transform-origin:center 45%}
@keyframes respire{from{transform:scale(1)}to{transform:scale(1.075)}}
@media(prefers-reduced-motion:reduce){.heros__media img{animation:none}}

/* ---------- Visionneuse : compteur et confort tactile ---------- */
.lightbox__fig figcaption{display:flex;flex-direction:column;gap:.4rem;align-items:center}
.lightbox__compteur{font-family:var(--display);font-size:.82rem;letter-spacing:.22em;color:var(--or)}
.lightbox__fig img{touch-action:pan-y;user-select:none}

/* ---------- Barre d'action fixe (mobile) ---------- */
.barre-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:.6rem;padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(11,11,12,.93);backdrop-filter:blur(14px);border-top:1px solid var(--bord);
  transform:translateY(110%);transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.barre-mobile.est-visible{transform:none}
.barre-mobile__cta{
  flex:1;display:grid;place-items:center;padding:.9rem 1rem;background:var(--or);color:#0B0B0C;border-radius:var(--r);
  font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.barre-mobile__lien{
  display:grid;place-items:center;padding:.9rem 1.1rem;border:1px solid var(--bord-fort);border-radius:var(--r);
  color:var(--or);font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
}
@media(max-width:760px){
  .barre-mobile{display:flex}
  .haut{bottom:5.4rem}
}

/* ---------- État vide soigné ---------- */
.vide--riche{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:clamp(3rem,7vw,4.5rem) 1.5rem}
.vide__cn{font-family:var(--cn);font-size:clamp(3rem,8vw,5rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(185,138,90,.35);margin-bottom:.6rem}
.vide__titre{font-family:var(--display);font-size:clamp(1.3rem,3vw,1.9rem);text-transform:uppercase;color:var(--creme);letter-spacing:.02em}
.section--clair .vide__titre{color:var(--alt-titre)}
.vide__actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.2rem}

/* =================================================================
   MODE SOMBRE / MODE CLAIR
   Le site est sombre par défaut. Le mode clair inverse la palette de
   base ; les blocs volontairement sombres (bannière, appel, pied de
   page) gardent des couleurs figées dans les deux modes.
   ================================================================= */

:root{
  /* couleurs qui ne changent jamais : blocs toujours sombres */
  --fixe-noir:#0B0B0C;
  --fixe-noir-2:#121216;
  --fixe-creme:#F4EFE6;
  --fixe-or:#E3B274;
  --fixe-bronze:#B98A5A;
  --fixe-bord:rgba(185,138,90,.22);
  --fixe-bord-fort:rgba(185,138,90,.45);
  --fixe-txt:rgba(244,239,230,.70);

  /* section alternée — en mode sombre, elle est claire */
  --alt-fond:#F4EFE6;
  --alt-surface:#FFFFFF;
  --alt-txt:rgba(11,11,12,.62);
  --alt-txt-fort:rgba(11,11,12,.78);
  --alt-titre:#0B0B0C;
  --alt-accent:#B01512;
  --alt-bord:rgba(11,11,12,.10);
  --alt-bord-fort:rgba(11,11,12,.25);
  --alt-filigrane:rgba(11,11,12,.045);
  --alt-survol:rgba(11,11,12,.06);

  /* barre de navigation une fois la page défilée */
  --nav-fond:rgba(11,11,12,.86);
  --nav-txt:rgba(244,239,230,.68);
  --nav-txt-fort:#F4EFE6;
}

html[data-theme="clair"]{
  --noir:#F7F5F0;
  --noir-2:#FFFFFF;
  --noir-3:#F1EEE7;
  --noir-4:#E5E1D7;
  --creme:#16161A;
  --creme-2:#2A2A31;
  --or:#8A6733;
  --or-clair:#6E5227;
  --bronze:#8A6733;
  --rouge:#C0221D;
  --rouge-2:#8E1512;

  --txt:rgba(22,22,26,.70);
  --txt-fort:#16161A;
  --txt-accent:rgba(22,22,26,.84);
  --txt-sombre:rgba(22,22,26,.72);

  --bord:rgba(138,103,51,.22);
  --bord-fort:rgba(138,103,51,.48);

  /* en mode clair, la section alternée devient la section sombre */
  --alt-fond:#16161A;
  --alt-surface:#1E1E25;
  --alt-txt:rgba(244,239,230,.66);
  --alt-txt-fort:rgba(244,239,230,.84);
  --alt-titre:#F4EFE6;
  --alt-accent:#E3B274;
  --alt-bord:rgba(185,138,90,.20);
  --alt-bord-fort:rgba(185,138,90,.45);
  --alt-filigrane:rgba(244,239,230,.05);
  --alt-survol:rgba(244,239,230,.08);

  --nav-fond:rgba(247,245,240,.92);
  --nav-txt:rgba(22,22,26,.66);
  --nav-txt-fort:#16161A;
}

html[data-theme="clair"] ::-webkit-scrollbar-track{background:var(--noir)}
html[data-theme="clair"] ::-webkit-scrollbar-thumb{background:#D8D3C6}
html[data-theme="clair"] ::-webkit-scrollbar-thumb:hover{background:var(--bronze)}

/* ---- Blocs toujours sombres, quel que soit le mode ---- */
.heros__voile{
  background:
    radial-gradient(120% 90% at 15% 100%, rgba(224,31,26,.20) 0%, transparent 55%),
    linear-gradient(to top, var(--fixe-noir) 3%, rgba(11,11,12,.84) 38%, rgba(11,11,12,.60) 100%),
    linear-gradient(to right, rgba(11,11,12,.85) 0%, rgba(11,11,12,.25) 60%, transparent 100%);
}
.heros{background:var(--fixe-noir)}
.heros__cn{-webkit-text-stroke-color:rgba(185,138,90,.16)}
.heros__titre{color:var(--fixe-creme)}
.heros__titre .ligne-2{color:transparent;-webkit-text-stroke:2px var(--fixe-or)}
.heros__surtitre{color:var(--fixe-or)}
.heros__txt{color:rgba(244,239,230,.78)}
.heros__scroll{color:rgba(244,239,230,.45)}
.heros .btn--ligne{--fg:var(--fixe-or);border-color:var(--fixe-bord-fort)}

.banniere{background:var(--fixe-noir);border-bottom-color:var(--fixe-bord)}
.banniere::before{background:linear-gradient(to top,var(--fixe-noir) 2%,rgba(11,11,12,.72) 60%,rgba(11,11,12,.55))}
.banniere h1{color:var(--fixe-creme)}
.banniere .etiquette{color:var(--fixe-or)}
.banniere .chapo{color:rgba(244,239,230,.86)}
.heros .chapo,.appel .chapo{color:rgba(244,239,230,.82)}
.banniere__cn{-webkit-text-stroke-color:rgba(185,138,90,.14)}
.fil{color:rgba(244,239,230,.45)}
.fil a:hover{color:var(--fixe-or)}

.appel{background:var(--fixe-noir-2)}
.appel__titre{color:var(--fixe-creme)}
.appel .chapo{color:rgba(244,239,230,.82)}
.appel .etiquette{color:var(--fixe-or)}
.appel .btn--ligne{--fg:var(--fixe-or);border-color:var(--fixe-bord-fort)}

.pied{background:var(--fixe-noir-2);border-top-color:var(--fixe-bord);color:var(--fixe-txt)}
.pied__titre{color:var(--fixe-or)}
.pied__baseline{color:var(--fixe-creme)}
.pied__texte,.pied__liens a,.pied__liens--infos li{color:rgba(244,239,230,.6)}
.pied__liens a:hover{color:var(--fixe-or)}
.pied__proverbe{border-color:var(--fixe-bord)}
.pied__cn{color:var(--fixe-or)}
.pied__fr{color:rgba(244,239,230,.45)}
.pied__bas-inner{color:rgba(244,239,230,.55)}
.pied .btn--ligne{--fg:var(--fixe-or);border-color:var(--fixe-bord-fort)}
.reseaux a{border-color:var(--fixe-bord)}
.reseaux svg{fill:var(--fixe-creme)}

/* ---- Barre de navigation ---- */
.entete.est-fixe{background:var(--nav-fond);border-bottom-color:var(--bord)}
.entete.est-fixe .nav__lien{color:var(--nav-txt)}
.entete.est-fixe .nav__lien:hover,.entete.est-fixe .nav__lien.est-actif{color:var(--nav-txt-fort)}
.entete.est-fixe .marque__txt strong{color:var(--nav-txt-fort)}
.entete.est-fixe .burger span{background:var(--nav-txt-fort)}
@media(max-width:1250px){
  html[data-theme="clair"] .nav{background:var(--noir)}
  html[data-theme="clair"] .nav__lien{color:var(--txt-fort)}
  html[data-theme="clair"] .nav__lien.est-actif{color:var(--rouge)}
}

/* ---- Bouton de bascule ---- */
.theme-bascule{
  width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--fixe-bord-fort);color:var(--fixe-creme);background:transparent;
  transition:background .3s,border-color .3s,color .3s,transform .3s;
}
.entete.est-fixe .theme-bascule{border-color:var(--bord-fort);color:var(--nav-txt-fort)}
.theme-bascule:hover{background:var(--rouge);border-color:var(--rouge);color:#fff;transform:rotate(-15deg)}
.theme-bascule svg{width:19px;height:19px;fill:currentColor}
.theme-bascule .ico-lune{display:none}
html[data-theme="clair"] .theme-bascule .ico-lune{display:block}
html[data-theme="clair"] .theme-bascule .ico-soleil{display:none}
@media(max-width:1250px){.theme-bascule{margin-right:.2rem}}

/* ---- Ajustements du mode clair ---- */
html[data-theme="clair"] .actu__img img,
html[data-theme="clair"] .gal-carte img,
html[data-theme="clair"] .mosaique img{filter:none}
html[data-theme="clair"] .duo__media img{filter:contrast(1.02)}
html[data-theme="clair"] .carte-map{filter:grayscale(.4) contrast(1.05)}
html[data-theme="clair"] .chiffres{border-color:var(--bord)}
html[data-theme="clair"] .chiffre__lbl{color:rgba(22,22,26,.62)}
html[data-theme="clair"] .proverbes{background:var(--noir-2)}
html[data-theme="clair"] .proverbe__fr{color:var(--txt-fort)}
html[data-theme="clair"] .creneau__grp{color:var(--txt-fort)}
html[data-theme="clair"] .creneau__age{color:rgba(22,22,26,.5)}
html[data-theme="clair"] .jour__nom{color:var(--txt-fort)}
html[data-theme="clair"] .jour__adr{color:rgba(22,22,26,.62)}
html[data-theme="clair"] .actu__titre{color:var(--txt-fort) !important}
html[data-theme="clair"] .gal-carte__titre{color:var(--fixe-creme)}
html[data-theme="clair"] .valeur__num{-webkit-text-stroke-color:rgba(138,103,51,.4)}
html[data-theme="clair"] .event__a{color:rgba(22,22,26,.45)}
html[data-theme="clair"] .legal__menu a{color:rgba(22,22,26,.62)}
html[data-theme="clair"] .legal__liste li{color:var(--txt-fort)}
html[data-theme="clair"] .legal__maj{color:rgba(22,22,26,.5)}
html[data-theme="clair"] .champ input,html[data-theme="clair"] .champ select,html[data-theme="clair"] .champ textarea{background:var(--noir-2)}
html[data-theme="clair"] .champ input::placeholder,html[data-theme="clair"] .champ textarea::placeholder{color:rgba(22,22,26,.35)}
html[data-theme="clair"] .alerte--ok{background:#e8f7ee;color:#12633a;border-color:#b6e2c6}
html[data-theme="clair"] .alerte--ko{background:#fdecec;color:#9a1f1b;border-color:#f5c2c0}
html[data-theme="clair"] .iti__panneau{box-shadow:0 18px 44px rgba(22,22,26,.16)}
html[data-theme="clair"] .carte{box-shadow:0 1px 2px rgba(22,22,26,.04),0 8px 24px rgba(22,22,26,.05)}


/* ---- En haut de page, l'en-tête est posé sur le héros sombre :
        ses couleurs restent claires dans les deux modes. ---- */
.entete:not(.est-fixe) .marque__txt strong{color:var(--fixe-creme)}
.entete:not(.est-fixe) .marque__txt em{color:var(--fixe-or)}
.entete:not(.est-fixe) .burger span{background:var(--fixe-creme)}
.entete:not(.est-fixe) .theme-bascule{border-color:var(--fixe-bord-fort);color:var(--fixe-creme)}
@media(min-width:1251px){
  .entete:not(.est-fixe) .nav__lien{color:rgba(244,239,230,.68)}
  .entete:not(.est-fixe) .nav__lien:hover,
  .entete:not(.est-fixe) .nav__lien.est-actif{color:var(--fixe-creme)}
}

/* ---- Boutons posés sur un bloc toujours sombre ---- */
.heros .btn:not(.btn--ligne),
.appel .btn:not(.btn--ligne),
.banniere .btn:not(.btn--ligne),
.entete__cta,
.nav__cta-mobile .btn{--bg:var(--fixe-or);--fg:#0B0B0C}
.pied .btn--ligne{--fg:var(--fixe-or)}

/* ---- Mode clair : quelques finitions ---- */
html[data-theme="clair"] .bandeau{background:var(--rouge)}
html[data-theme="clair"] .haut{background:var(--or);color:#fff}
html[data-theme="clair"] .haut:hover{background:var(--rouge)}
html[data-theme="clair"] .barre-mobile{background:rgba(247,245,240,.95);border-top-color:var(--bord)}
html[data-theme="clair"] .barre-mobile__cta{background:var(--or);color:#fff}
html[data-theme="clair"] .barre-mobile__lien{color:var(--or);border-color:var(--bord-fort)}
html[data-theme="clair"] .heros__scroll span{color:rgba(244,239,230,.45)}
html[data-theme="clair"] .proverbe__cn{color:var(--or)}
html[data-theme="clair"] .proverbe__py{color:var(--bronze)}
html[data-theme="clair"] .event__m{color:var(--rouge)}
html[data-theme="clair"] .event__date{background:var(--noir-2)}
html[data-theme="clair"] .etape__num{color:var(--or);border-color:var(--bord-fort)}

/* =================================================================
   GARDE-FOUS D'ADAPTATION AUX PETITS ÉCRANS
   Un enfant de grille ou de flexbox refuse par défaut de descendre
   sous la largeur de son contenu : c'est la cause classique d'une
   page qui déborde horizontalement sur téléphone.
   ================================================================= */
.grille > *, .duo > *, .legal > *, .chiffres__grille > *,
.galeries > *, .bloc__corps > *, .form__duo > *, .event__corps > *{min-width:0}

.legal__liste li, .legal__liste span, .legal__texte,
.contact-ligne, .contact-ligne span, .pied__liens li,
.repere__val, .doc__t, .doc__d, .msg__corps{min-width:0;overflow-wrap:anywhere}

a[href^="mailto:"], a[href^="tel:"], .media__chemin{overflow-wrap:anywhere}

/* Les étiquettes très espacées se coupent plutôt que de pousser la page. */
.legal__liste span, .contact-ligne__lbl{white-space:normal;word-break:break-word}

/* Dernier filet : rien ne dépasse jamais du cadre de la page. */
html, body{max-width:100%}

/* ---------- L'équipe : dernière ligne toujours centrée ---------- */
.equipe{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem}
.equipe > *{flex:1 1 200px;max-width:300px;min-width:0}
@media(max-width:560px){.equipe > *{flex:1 1 100%;max-width:none}}

/* ---------------------------------------------------------------
   Menu mobile : le flou d'arrière-plan de l'en-tête crée un cadre
   de référence pour les éléments fixes qu'il contient. Le menu s'y
   retrouvait enfermé — coupé en haut et sans fond. On le neutralise
   pendant toute la durée de l'ouverture.
   --------------------------------------------------------------- */
body.menu-ouvert .entete,
body.menu-ouvert .entete.est-fixe{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:transparent;
  border-bottom-color:transparent;
}
body.menu-ouvert .progression{opacity:0}

@media(max-width:1250px){
  /* Le panneau couvre l'écran entier, encoches comprises. */
  .nav{
    background:var(--noir);
    padding:calc(env(safe-area-inset-top) + 4.5rem) 1.5rem calc(env(safe-area-inset-bottom) + 2rem);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav__liste{width:100%}
}


/* ---------------------------------------------------------------
   Section alternée : les accents doivent suivre le fond de cette
   section, pas celui de la page.
   --------------------------------------------------------------- */
.section--clair .faq__q i{color:var(--alt-accent)}
.section--clair .etape__num{color:var(--alt-accent);border-color:var(--alt-bord-fort)}
.section--clair .accent{color:var(--alt-accent)}
.section--clair .legal__menu a{color:var(--alt-txt)}
.section--clair .legal__maj{color:var(--alt-txt)}
html[data-theme="clair"] .legal__menu a{color:var(--txt)}
html[data-theme="clair"] .legal__maj{color:var(--txt)}
.accent{color:var(--rouge)}

/* ---------------------------------------------------------------
   Page « L'équipe » — grille de portraits
   --------------------------------------------------------------- */
.equipe-grille{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));
  gap:clamp(1.2rem,2.4vw,1.9rem);
  max-width:980px;margin-inline:auto;
}
.membre{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--noir-2);border:1px solid var(--bord);border-radius:var(--r);
  overflow:hidden;transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr);
}
.membre::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;z-index:2;
  background:var(--rouge);transform:scaleX(0);transform-origin:left;transition:transform var(--tr);
}
.membre:hover{transform:translateY(-6px);border-color:var(--bord-fort)}
.membre:hover::before{transform:scaleX(1)}

.membre__media{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(150deg,var(--noir-3),var(--noir-4));
  display:flex;align-items:center;justify-content:center;
}
.membre__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.membre:hover .membre__media img{transform:scale(1.05)}
.membre__media--vide{aspect-ratio:16/9}
.membre__mono{font-family:var(--cn);font-size:clamp(2.6rem,7vw,3.6rem);line-height:1;color:var(--bronze);opacity:.5}

.membre__corps{padding:1.5rem 1.4rem 1.7rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.membre__nom{font-family:var(--display);font-size:1.22rem;letter-spacing:.01em;line-height:1.2;color:var(--txt-fort);margin:0}
.membre__dh{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin:0}
.membre__role{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt);margin:0}
.membre__txt{margin-top:.5rem;font-size:.93rem}
.membre__txt p{margin:0 0 .6rem}
.membre__txt p:last-child{margin-bottom:0}
.membre__lien{
  margin-top:auto;padding-top:.9rem;align-self:flex-start;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or);
  border-bottom:1px solid transparent;transition:border-color var(--tr),color var(--tr);
}
.membre__lien:hover{border-bottom-color:currentColor}

/* Sur fond alterné (clair en mode nuit, sombre en mode jour) */
.section--clair .membre{background:var(--alt-surface);border-color:var(--alt-bord)}
.section--clair .membre:hover{border-color:var(--alt-bord-fort)}
.section--clair .membre__media{background:linear-gradient(150deg,var(--alt-fond),var(--alt-surface))}
.section--clair .membre__mono{color:var(--alt-accent);opacity:.42}
.section--clair .membre__nom{color:var(--alt-titre)}
.section--clair .membre__dh{color:var(--alt-accent)}
.section--clair .membre__role{color:var(--alt-txt)}
.section--clair .membre__txt{color:var(--alt-txt)}
.section--clair .membre__lien{color:var(--alt-accent)}

/* ---- Aperçu de l'équipe sur la page « Le club » ---- */
.equipe-appercu{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.6rem;margin-top:2rem}
.equipe-vignettes{display:flex;align-items:center;padding-left:14px}
.equipe-vignettes__item{
  width:64px;height:64px;border-radius:50%;margin-left:-14px;overflow:hidden;flex:0 0 auto;
  border:2px solid var(--alt-fond);background:linear-gradient(150deg,var(--fixe-noir-2),var(--fixe-noir));
  display:flex;align-items:center;justify-content:center;
}
.equipe-vignettes__item img{width:100%;height:100%;object-fit:cover;display:block}
.equipe-vignettes__item span{font-family:var(--cn);font-size:1.4rem;color:var(--fixe-or)}
.equipe-vignettes__plus{
  font-size:.9rem;font-weight:600;color:var(--fixe-creme);
  background:linear-gradient(150deg,var(--fixe-noir),var(--fixe-noir-2))
}
@media(max-width:420px){
  .equipe-vignettes__item{width:52px;height:52px}
}