/* ==========================================================================
   ARCANO ACADEMY — identité Fight Nation : jaune & noir.
   Couleurs relevées directement sur planning_arcano.png.
   Les couleurs de ceinture ne servent QUE sur la page progression (BJJ) —
   ailleurs c'est une académie multi-sports, pas un club de BJJ.
   ========================================================================== */
/* Barlow & Barlow Condensed — auto-hébergées (sous-ensemble latin), SIL Open Font License */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/barlow-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/barlow-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlow-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/barlow-condensed-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-condensed-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-condensed-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlow-condensed-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --jaune:#FFC800;          /* jaune Fight Nation, saturation poussée */
  --jaune-2:#FFB300;
  --jaune-soft:#FFD84A;
  --amber:#FFC81A;          /* fond des sections planning */
  --amber-2:#F0B400;
  --noir:#000000;
  --noir-2:#0A0A0B;
  --noir-3:#141416;
  --bone:#F4F1EA;
  --bone-dim:#A8A399;
  --dim:#787269;
  --hair:rgba(244,241,234,.12);
  --hair-2:rgba(244,241,234,.24);

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem; --s7:7rem;
  --shell:min(1340px,90vw);
  --r:1.25rem;
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-o:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--noir-2); color:var(--bone);
  font-family:'Barlow',system-ui,sans-serif; font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--jaune); outline-offset:3px; border-radius:4px}
h1,h2,h3,.cond{font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; line-height:.86; letter-spacing:-.012em; margin:0}
p{margin:0}
.shell{width:var(--shell); margin-inline:auto}

.eyebrow{font-family:'Barlow Condensed',sans-serif; font-size:.6875rem; font-weight:600;
  letter-spacing:.36em; text-transform:uppercase; color:var(--jaune);
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; row-gap:.35rem}
.eyebrow::before{content:''; width:2rem; height:2px; background:currentColor; flex:none}

/* Grain — la texture mouchetée du planning */
.grain{position:fixed; inset:-50%; z-index:80; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:gr 6s steps(5) infinite}
@keyframes gr{0%,100%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,-3%)}80%{transform:translate(4%,4%)}}

/* Rideau de transition — jaune/noir */
.curtain{position:fixed; inset:0; z-index:95; pointer-events:none; display:grid; grid-template-rows:repeat(5,1fr)}
.curtain i{display:block; background:var(--jaune); transform:scaleX(0); transform-origin:left center}
.is-entering .curtain i{transform:scaleX(1); transform-origin:right center}
.curtain-word{position:fixed; inset:0; z-index:96; display:grid; place-items:center; pointer-events:none; opacity:0;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(2.5rem,9vw,7rem); color:var(--noir)}

/* ---------- Nav ---------- */
.nav{position:fixed; top:1rem; left:50%; translate:-50% 0; z-index:70;
  display:flex; align-items:center; gap:1.3rem; max-width:calc(100vw - 1.5rem);
  padding:.5rem .5rem .5rem 1rem; border-radius:99px;
  background:rgba(10,10,11,.72); backdrop-filter:blur(22px) saturate(1.7); -webkit-backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid var(--hair); box-shadow:0 22px 60px -22px #000, inset 0 1px 0 rgba(255,255,255,.06)}
.nav .logo{height:40px; width:auto; flex:none}
.nav-links{display:flex; gap:1.1rem; align-items:center}
.nav-links a{position:relative; padding:.45rem .1rem;
  font-family:'Barlow Condensed',sans-serif; font-size:.8125rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--bone-dim); white-space:nowrap; transition:color .35s var(--ease)}
.nav-links a::after{content:''; position:absolute; left:0; right:100%; bottom:.2rem; height:2px; background:var(--jaune); transition:right .5s var(--ease)}
.nav-links a:hover{color:var(--bone)} .nav-links a:hover::after{right:0}
.nav-links a[aria-current="page"]{color:var(--jaune)} .nav-links a[aria-current="page"]::after{right:0}
@media (max-width:1020px){.nav-links{display:none}}

/* ---------- Menu mobile ---------- */
.burger{display:none; width:44px; height:44px; flex:none; border-radius:99px; place-items:center;
  border:1px solid var(--hair-2); position:relative}
.burger i{position:absolute; left:50%; top:50%; width:16px; height:2px; margin:-1px 0 0 -8px; background:var(--bone);
  border-radius:2px; transition:transform .45s var(--ease)}
.burger i:first-child{transform:translateY(-3.5px)} .burger i:last-child{transform:translateY(3.5px)}
.burger[aria-expanded="true"] i:first-child{transform:rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:rotate(-45deg)}
@media (max-width:1020px){.burger{display:grid} .nav > .btn{margin-left:auto}}
.menu{position:fixed; inset:0; z-index:65; background:var(--noir-2); display:flex; flex-direction:column; justify-content:flex-end;
  padding:7rem 1.5rem calc(2rem + env(safe-area-inset-bottom)); visibility:hidden; opacity:0;
  transition:opacity .45s var(--ease), visibility 0s .45s}
.menu.is-open{visibility:visible; opacity:1; transition:opacity .45s var(--ease)}
.menu nav{display:flex; flex-direction:column; gap:.2rem}
.menu nav a{font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; line-height:1;
  font-size:clamp(2.4rem,11vw,3.6rem); color:var(--bone); padding-block:.3rem; border-bottom:1px solid var(--hair)}
.menu nav a[aria-current="page"]{color:var(--jaune)}
.menu .menu-meta{margin-top:var(--s4); display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; color:var(--bone-dim); font-size:.875rem}
.menu .menu-meta a{color:var(--jaune)}
html.menu-open{overflow:hidden}
@media (min-width:1021px){.menu{display:none}}

/* ---------- Boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:.8rem; min-height:46px;
  padding:.55rem .55rem .55rem 1.4rem; border-radius:99px;
  font-family:'Barlow Condensed',sans-serif; font-size:.8125rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; white-space:nowrap;
  background:var(--jaune); color:var(--noir); will-change:transform;
  transition:background .4s var(--ease), box-shadow .5s var(--ease);
  box-shadow:0 14px 40px -14px rgba(255,200,0,.55)}
.btn .ico{width:1.9rem; height:1.9rem; flex:none; border-radius:99px; display:grid; place-items:center;
  background:rgba(0,0,0,.16); transition:transform .5s var(--ease), background .4s var(--ease)}
.btn:hover{background:var(--jaune-soft)}
.btn:hover .ico{transform:translate(3px,-2px) scale(1.07); background:rgba(0,0,0,.28)}
.btn:active{transform:scale(.97)}
.btn--ghost{background:transparent; color:var(--bone); border:1px solid var(--hair-2); box-shadow:none}
.btn--ghost .ico{background:rgba(244,241,234,.09)}
.btn--ghost:hover{background:rgba(244,241,234,.06)}
.btn--dark{background:var(--noir); color:var(--jaune); box-shadow:none}
.btn--dark .ico{background:rgba(242,199,77,.16)}
.btn--dark:hover{background:var(--noir-3)}

/* ---------- Sections ---------- */
.sec{padding-block:var(--s7); position:relative}
.sec--tight{padding-block:var(--s6)}
.sec--yellow{background:var(--amber); color:var(--noir)}
.sec--yellow .eyebrow{color:var(--noir)}
.sec--yellow .lede{color:rgba(0,0,0,.72)}
/* la texture du poster */
.sec--yellow::before{content:''; position:absolute; inset:0; pointer-events:none; opacity:.14; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E")}
.sec--yellow > .shell{position:relative; z-index:1}

.giant{font-size:clamp(2.9rem,9.5vw,9rem); max-width:14ch}
.giant .ln{display:block; overflow:hidden}
.giant .ln > span{display:block}
.giant em{font-style:normal; color:var(--jaune)}
.sec--yellow .giant em,.sec--yellow .h2 em{
  background:var(--noir); color:var(--jaune); padding:0 .16em; display:inline-block; margin-inline:-.04em}
.h2{font-size:clamp(2rem,5.4vw,4.6rem); max-width:24ch}
@media (min-width:761px){.h2 .ln > span{white-space:nowrap}}
.lede{max-width:50ch; color:var(--bone-dim); font-size:clamp(1rem,1.3vw,1.12rem); margin-top:1.2rem}
.actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:100dvh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; padding-bottom:0}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; filter:grayscale(.6) contrast(1.08) brightness(.82)}
.hero-bg::after{content:''; position:absolute; inset:0;
  background:radial-gradient(115% 80% at 20% 25%, rgba(10,10,11,.05), rgba(10,10,11,.55) 62%, rgba(10,10,11,.85) 100%),
             linear-gradient(to top, var(--noir-2) 1%, transparent 35%)}
.hero .shell{position:relative; z-index:2; padding-bottom:var(--s5)}
.hero-top{position:relative; z-index:2; flex:1; display:flex; align-items:flex-end}
/* bandeau défilant jaune, façon poster */
.ticker{position:relative; z-index:2; background:var(--jaune); color:var(--noir); overflow:hidden; padding-block:.7rem; display:flex}
.ticker-row{display:flex; gap:2.5rem; white-space:nowrap; will-change:transform; padding-right:2.5rem}
.ticker-row span{font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:clamp(.9rem,1.5vw,1.2rem);
  text-transform:uppercase; letter-spacing:.14em; display:flex; align-items:center; gap:2.5rem}
.ticker-row span::after{content:''; width:7px; height:7px; background:var(--noir); border-radius:99px; flex:none}

/* ---------- Partenaires ---------- */
.partners{border-block:1px solid var(--hair); background:var(--noir)}
.partners .shell{display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; justify-content:space-between; padding-block:var(--s3)}
.partners .lbl{font-family:'Barlow Condensed',sans-serif; font-size:.625rem; letter-spacing:.32em; text-transform:uppercase; color:var(--dim)}
.partner-logos{display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap}
.partner{display:flex; align-items:center; gap:.9rem; transition:transform .5s var(--ease), opacity .4s var(--ease); opacity:.85}
.partner:hover{opacity:1; transform:translateY(-2px)}
.partner img{height:36px; width:auto}
.partner .chip{background:#fff; border-radius:.6rem; padding:.45rem .65rem; display:flex; align-items:center}
.partner .chip img{height:30px}
.partner small{font-family:'Barlow Condensed',sans-serif; font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); display:block}

/* ---------- Disciplines ---------- */
.rail{display:grid; gap:.45rem; margin-top:var(--s4)}
@media (min-width:900px){.rail{display:flex; height:min(46vh,420px)}}
.slab{position:relative; overflow:hidden; border-radius:var(--r); border:1px solid var(--hair);
  min-height:128px; display:flex; align-items:flex-end; padding:1.1rem; transition:flex-grow .8s var(--ease)}
@media (min-width:900px){.slab{flex:1 1 0; min-height:0} .rail:hover .slab{flex-grow:.72} .rail .slab:hover{flex-grow:2.5}}
.slab img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:grayscale(.35) brightness(.8) contrast(1.05); transition:transform 1.2s var(--ease), filter .8s var(--ease)}
.slab:hover img{transform:scale(1.08); filter:grayscale(0) brightness(.92) contrast(1.05)}
.slab::after{content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.25) 45%, transparent 70%)}
.slab .in{position:relative; z-index:2; width:100%}
.slab h3{font-size:clamp(1.2rem,1.9vw,1.85rem)}
.slab .tg{font-family:'Barlow Condensed',sans-serif; font-size:.5625rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--jaune); display:block; margin-bottom:.35rem}
.slab p{font-size:.85rem; color:var(--bone-dim); max-width:34ch; margin-top:.4rem; opacity:0; max-height:0; overflow:hidden;
  transition:opacity .5s var(--ease), max-height .7s var(--ease)}
.slab:hover p{opacity:1; max-height:9rem}
@media (max-width:899px){.slab p{opacity:1; max-height:none}}

/* ---------- PLANNING : filtre qui éteint le reste ---------- */
.filters{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:var(--s3)}
.chip-f{padding:.5rem 1rem; border-radius:99px; border:2px solid rgba(0,0,0,.18); min-height:42px;
  font-family:'Barlow Condensed',sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(0,0,0,.55);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), opacity .35s var(--ease)}
.chip-f:hover{border-color:var(--noir); color:var(--noir)}
.chip-f[aria-pressed="true"]{background:var(--noir); color:var(--jaune); border-color:var(--noir)}
.grid-days{display:grid; gap:.5rem; margin-top:var(--s3)}
@media (min-width:760px){.grid-days{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1150px){.grid-days{grid-template-columns:repeat(6,1fr)}}
.day{border-left:2px solid rgba(0,0,0,.22); padding:0 .75rem .2rem}
.day h3{font-size:1.15rem; letter-spacing:.04em; margin-bottom:.55rem; color:var(--noir)}
/* chaque créneau s'éteint quand il n'est pas dans le filtre */
.slot{display:grid; gap:0; padding-block:.34rem; transition:opacity .5s var(--ease), filter .5s var(--ease)}
.slot time{font-family:'Barlow Condensed',sans-serif; font-size:.6875rem; font-weight:600; letter-spacing:.05em; color:rgba(0,0,0,.6); line-height:1.25}
.slot .nm{font-family:'Barlow Condensed',sans-serif; font-size:.9375rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--noir); line-height:1.15}
.slot .lv{font-size:.5625rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(0,0,0,.5)}
.slot.is-off{opacity:.1}
.day.is-off h3{opacity:.25}
.sched-count{font-family:'Barlow Condensed',sans-serif; font-size:.75rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(0,0,0,.6); margin-top:var(--s3)}

/* ---------- Progression BJJ (seul endroit où les ceintures vivent) ---------- */
.belts{display:grid; gap:1.4rem; margin-top:var(--s4)}
@media (min-width:960px){.belts{grid-template-columns:auto 1fr; gap:3.2rem; align-items:center}}
.belt-pick{display:flex; gap:.5rem; flex-wrap:wrap}
@media (min-width:960px){.belt-pick{flex-direction:column}}
.belt-pick button{display:flex; align-items:center; gap:.85rem; padding:.65rem .9rem; border-radius:.7rem;
  border:1px solid var(--hair); min-height:44px; transition:background .45s var(--ease), border-color .45s var(--ease)}
.belt-pick button:hover{background:rgba(244,241,234,.05)}
.belt-pick button[aria-selected="true"]{background:rgba(244,241,234,.08); border-color:var(--jaune)}
.belt-pick .sw{width:2.6rem; height:.5rem; border-radius:2px; position:relative; flex:none; background:var(--b)}
.belt-pick .sw::after{content:''; position:absolute; right:.3rem; top:0; bottom:0; width:.26rem; background:var(--jaune)}
.belt-pick span{font-family:'Barlow Condensed',sans-serif; font-size:.8125rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim)}
.belt-pick button[aria-selected="true"] span{color:var(--bone)}
.belt-panel{min-height:clamp(230px,32vh,300px)}
.belt-panel .n{font-family:'Barlow Condensed',sans-serif; font-size:.6875rem; letter-spacing:.3em; text-transform:uppercase; color:var(--jaune)}
.belt-panel h3{font-size:clamp(1.9rem,5vw,4rem); margin-block:.5rem .8rem; max-width:16ch}
.belt-panel p{max-width:50ch; color:var(--bone-dim)}
.belt-panel .yrs{margin-top:1.2rem; display:flex; gap:2rem; flex-wrap:wrap}
.belt-panel .yrs div{display:flex; flex-direction:column}
.belt-panel .yrs b{font-family:'Barlow Condensed',sans-serif; font-size:2rem; font-weight:700; color:var(--jaune); line-height:1}
.belt-panel .yrs i{font-style:normal; font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); margin-top:.3rem}

/* ---------- Cartes / coachs / infos ---------- */
.cols{display:grid; gap:1.1rem; margin-top:var(--s4)}
@media (min-width:900px){.cols{grid-template-columns:repeat(3,1fr); gap:1.4rem}}
.card{border:1px solid var(--hair); border-radius:var(--r); padding:1.3rem; background:rgba(244,241,234,.03)}
.card .sw{width:2.6rem; height:.5rem; border-radius:2px; background:var(--b,var(--jaune)); position:relative; margin-bottom:.85rem}
.card .sw::after{content:''; position:absolute; right:.3rem; top:0; bottom:0; width:.26rem; background:var(--jaune)}
.card h3{font-size:1.45rem}
.card .role{font-family:'Barlow Condensed',sans-serif; font-size:.625rem; letter-spacing:.26em; text-transform:uppercase; color:var(--dim); margin-block:.3rem .7rem; display:block}
.card p{font-size:.9rem; color:var(--bone-dim)}
.card h4{font-family:'Barlow Condensed',sans-serif; font-size:.625rem; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); margin:0 0 .8rem}
.card ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.5rem; color:var(--bone-dim); font-size:.95rem}
.card a:hover{color:var(--jaune)}

/* chiffres */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:var(--s4)}
@media (min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat b{display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:clamp(2.4rem,5vw,4rem); line-height:.9; color:var(--jaune)}
.sec--yellow .stat b{color:var(--noir)}
.stat i{font-style:normal; display:block; margin-top:.4rem; font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim)}
.sec--yellow .stat i{color:rgba(0,0,0,.6)}

/* pied de page */
.foot{background:var(--noir); border-top:1px solid var(--hair); padding-block:var(--s5) var(--s3)}
.foot-grid{display:grid; gap:var(--s4)}
@media (min-width:880px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.foot img.logo{height:84px; width:auto; margin-bottom:1rem}
.foot h4{font-family:'Barlow Condensed',sans-serif; font-size:.625rem; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); margin:0 0 .9rem}
.foot ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.5rem; color:var(--bone-dim); font-size:.95rem}
.foot a:hover{color:var(--jaune)}
.foot-legal{margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--hair);
  display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; font-size:.75rem; color:var(--dim)}

/* reveal + curseur */
.js .rv{opacity:0; transform:translateY(20px)}
.rv-failsafe .rv{opacity:1!important; transform:none!important}
/* Les titres découpés caractère par caractère doivent aussi retomber sur leurs
   pieds si GSAP ne démarre jamais — sinon un titre reste à moitié invisible. */
.rv-failsafe .giant,.rv-failsafe .h2{opacity:1!important}
.rv-failsafe .ch{opacity:1!important; transform:none!important}
.cursor{position:fixed; top:0; left:0; width:34px; height:34px; border-radius:99px; border:2px solid var(--jaune);
  z-index:90; pointer-events:none; mix-blend-mode:difference; opacity:0; will-change:transform}
@media (hover:none){.cursor{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .grain{animation:none} .js .rv{opacity:1; transform:none} .cursor{display:none}
  html{scroll-behavior:auto}
}
@media (max-width:760px){
  :root{--shell:min(1340px,92vw); --s7:4.5rem; --s6:3.5rem}
  .giant{max-width:100%}
  .actions .btn{width:100%; justify-content:space-between}
  .nav{gap:.6rem; padding:.4rem .4rem .4rem .75rem; width:calc(100vw - 1.5rem); justify-content:space-between}
  .nav .logo{height:32px}
  .partners .shell{gap:var(--s3); justify-content:flex-start}
  .partner-logos{gap:var(--s4)}
}

/* ==========================================================================
   MOBILE — doit claquer : typo plus grosse, photos plein cadre,
   planning en cartes qu'on fait défiler au pouce.
   ========================================================================== */
@media (max-width:760px){
  /* la typo prend toute la place disponible */
  .giant{font-size:clamp(3.2rem,14vw,5.5rem); letter-spacing:-.025em}
  .h2{font-size:clamp(2.3rem,10vw,3.4rem); max-width:100%}
  .lede{font-size:1.05rem; max-width:100%}
  .eyebrow{font-size:.625rem; letter-spacing:.28em}

  /* hero plein écran, texte calé en bas */
  .hero{min-height:100svh}
  .hero .shell{padding-bottom:var(--s4)}
  .hero-bg img{filter:grayscale(.6) contrast(1.08) brightness(.75)}

  /* bandeau jaune plus épais et plus rapide */
  .ticker{padding-block:.85rem}
  .ticker-row span{font-size:1.05rem; letter-spacing:.1em}

  /* disciplines : vraies cartes photo plein cadre, plus de survol */
  .rail{gap:.6rem}
  .slab{min-height:62vw; border-radius:1rem; align-items:flex-end; padding:1.1rem}
  .slab img{filter:grayscale(.2) brightness(.8) contrast(1.05)}
  .slab h3{font-size:2rem}
  .slab .tg{font-size:.625rem; color:var(--jaune)}
  .slab p{font-size:.9rem}

  /* chiffres en 2×2, énormes */
  .stats{grid-template-columns:1fr 1fr; gap:1.6rem 1rem}
  .stat b{font-size:3.4rem}

  /* PLANNING : une carte par jour, on swipe */
  .grid-days{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78vw;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    gap:.75rem; padding-bottom:.9rem;
    margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50% + 0px);
    scrollbar-width:none;
  }
  .grid-days::-webkit-scrollbar{display:none}
  .day{
    scroll-snap-align:start; border-left:0; border:2px solid rgba(0,0,0,.16);
    border-radius:1rem; padding:1rem; background:rgba(0,0,0,.05);
  }
  .day h3{font-size:1.4rem; border-bottom:2px solid rgba(0,0,0,.2); padding-bottom:.5rem}
  .slot .nm{font-size:1.05rem}
  .slot time{font-size:.75rem}
  .filters{gap:.35rem}
  .chip-f{font-size:.8125rem; padding:.55rem 1rem}
  .swipe-hint{display:block}

  /* cartes et pied de page */
  .card{padding:1.2rem; border-radius:1rem}
  .partners .shell{flex-direction:column; align-items:flex-start; gap:1.1rem}
  .partner-logos{gap:1.8rem}
  .foot-grid{gap:2rem}
}
.swipe-hint{display:none; font-family:'Barlow Condensed',sans-serif; font-size:.6875rem;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(0,0,0,.5); margin-top:.6rem}
@media (max-width:760px){
  .swipe-hint{display:block}
  .grid-days--dark + .swipe-hint{color:var(--dim)}
  /* Le `em` en inline-block (le bloc noir) dépasse de la boîte de ligne :
     `overflow:hidden` le décapitait. On ouvre la ligne et on aère. */
  .h2 .ln{overflow:visible}
  .h2{line-height:1.02}
  .sec--yellow .h2 em{margin-inline:0; padding:.04em .16em; line-height:1.06}
}

/* très petits écrans */
@media (max-width:380px){
  .giant{font-size:clamp(2.8rem,13vw,4rem)}
  .grid-days{grid-auto-columns:86vw}
}

/* ==========================================================================
   SOUS-PAGES DISCIPLINES
   ========================================================================== */
.hero--sub{min-height:82vh}
.hero--sub .hero-bg img{filter:grayscale(.5) contrast(1.05) brightness(.72)}

.crumb{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:1.1rem;
  font-family:'Barlow Condensed',sans-serif; font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim)}
.crumb a{color:var(--bone-dim); transition:color .3s var(--ease)}
.crumb a:hover{color:var(--jaune)}
.crumb b{color:var(--jaune); font-weight:600}
.crumb span{opacity:.4}

.split{display:grid; gap:var(--s3)}
@media (min-width:960px){.split{grid-template-columns:.8fr 1.2fr; gap:var(--s6); align-items:start}}
.sec--yellow .split .lede{color:rgba(0,0,0,.76)}
.sec--yellow .h2{color:var(--noir)}
.sec--yellow .card{border-color:rgba(0,0,0,.18); background:rgba(0,0,0,.05)}
.sec--yellow .card h3,.sec--yellow .card p{color:var(--noir)}
.sec--yellow .card p{opacity:.72}

.cols--4{grid-template-columns:1fr}
@media (min-width:700px){.cols--4{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.cols--4{grid-template-columns:repeat(4,1fr)}}
.cols--4 .card h3{font-size:1.15rem; line-height:1.05; margin-bottom:.55rem}
.cols--4 .card p{font-size:.9rem}

.ticks{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.55rem}
.ticks li{position:relative; padding-left:1.7rem; color:rgba(0,0,0,.78); font-size:.98rem}
.ticks li::before{content:''; position:absolute; left:0; top:.55em; width:.75rem; height:.75rem;
  background:var(--noir); border-radius:2px}

.faqs{display:flex; flex-direction:column; gap:.6rem}
.faq{border:1px solid var(--hair); border-radius:1rem; background:rgba(244,241,234,.03); overflow:hidden}
.faq summary{cursor:pointer; list-style:none; padding:1.05rem 1.2rem; display:flex; justify-content:space-between;
  align-items:center; gap:1rem; font-family:'Barlow Condensed',sans-serif; font-weight:600;
  font-size:1.05rem; letter-spacing:.02em; text-transform:uppercase; transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; font-size:1.4rem; line-height:1; color:var(--jaune); flex:none; transition:transform .45s var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--jaune)}
.faq p{padding:0 1.2rem 1.15rem; color:var(--bone-dim); font-size:.95rem; max-width:62ch}

.grid-days--dark .day{border-left:2px solid var(--hair); background:none; border-radius:0; padding:0 .8rem .2rem}
.grid-days--dark .day h3{color:var(--jaune)}
.grid-days--dark .slot time{color:var(--dim)}
.grid-days--dark .slot .nm{color:var(--bone)}
.grid-days--dark .slot .lv{color:var(--dim)}
@media (max-width:760px){
  .grid-days--dark .day{border:2px solid var(--hair); border-radius:1rem; padding:1rem; background:rgba(244,241,234,.03)}
  .grid-days--dark .day h3{border-bottom:2px solid var(--hair)}
}

/* vignette « en savoir plus » */
.slab .more{display:block; margin-top:.6rem; color:var(--jaune); font-family:'Barlow Condensed',sans-serif;
  font-weight:600; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase}
.rail--small{margin-top:var(--s3)}
@media (min-width:900px){.rail--small{height:min(26vh,230px)}}
.rail--small .slab h3{font-size:1.1rem}

/* ---------- Mentions légales ---------- */
.legal{max-width:72ch}
.legal h2{font-size:clamp(1.6rem,3.5vw,2.2rem); color:var(--jaune); margin:var(--s5) 0 var(--s2)}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--bone-dim); margin-bottom:var(--s2)}
.legal a{color:var(--bone); text-decoration:underline; text-underline-offset:3px}
.legal mark{background:rgba(255,200,0,.16); color:var(--jaune); padding:0 .25em; border-radius:3px}
.legal-date{font-size:.875rem; margin-top:var(--s4)}
.foot-legal a{text-decoration:underline; text-underline-offset:3px}

/* ---------- Tarifs ---------- */
.plans{display:grid; gap:1.1rem; margin-top:var(--s4)}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,1fr); gap:1.4rem}}
.plan{border:1px solid var(--hair); border-radius:var(--r); padding:1.5rem; background:rgba(244,241,234,.03); display:flex; flex-direction:column}
.plan h3{font-size:1.6rem; margin-bottom:1rem}
.prices{list-style:none; margin:0; padding:0}
.prices li{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-block:.6rem; border-bottom:1px solid var(--hair)}
.prices li:last-child{border-bottom:0}
.prices span{color:var(--bone)}
.prices small{display:block; font-size:.75rem; color:var(--dim)}
.prices b{font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.5rem; color:var(--jaune); white-space:nowrap}
.plan .per{margin-top:auto; padding-top:.8rem; font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim)}
.plan--hot{background:var(--jaune); border-color:var(--jaune); color:var(--noir)}
.plan--hot h3{color:var(--noir)}
.plan--hot .tag{align-self:flex-start; font-family:'Barlow Condensed',sans-serif; font-size:.625rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  background:var(--noir); color:var(--jaune); padding:.35rem .7rem; border-radius:99px; margin-bottom:1rem}
.plan--hot .big{display:flex; align-items:baseline; gap:.4rem; margin-bottom:.8rem}
.plan--hot .big b{font-family:'Barlow Condensed',sans-serif; font-size:clamp(3.4rem,6vw,5rem); line-height:.9}
.plan--hot .big i{font-style:normal; font-weight:600}
.plan--hot p{color:rgba(0,0,0,.75)}
.card a{text-decoration:underline; text-underline-offset:3px}

/* ---------- Sélecteur de langue ---------- */
.lang{display:flex; gap:.15rem; padding:.2rem; border:1px solid var(--hair); border-radius:99px}
.lang a{font-family:'Barlow Condensed',sans-serif; font-size:.6875rem; font-weight:600; letter-spacing:.12em;
  padding:.3rem .45rem; border-radius:99px; color:var(--bone-dim); transition:color .3s var(--ease), background .3s var(--ease)}
.lang a:hover{color:var(--bone)}
.lang a[aria-current="true"]{background:var(--jaune); color:var(--noir)}
.nav > .lang{flex:none}
@media (max-width:1020px){.nav > .lang{display:none}}
@media (max-width:1180px) and (min-width:1021px){.nav{gap:.9rem} .nav-links{gap:.75rem} .nav-links a{letter-spacing:.1em}}
.menu .menu-meta .lang{margin-top:.6rem}
.menu .menu-meta .lang a{color:var(--bone-dim); font-size:.8125rem; padding:.45rem .7rem}
.menu .menu-meta .lang a[aria-current="true"]{color:var(--noir)}

/* ---------- Académie : histoire & équipe ---------- */
.photo{margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--hair)}
.photo img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:50% 72%}
@media (min-width:960px){.split .photo{position:sticky; top:7rem} .photo img{aspect-ratio:4/5}}
.prose{margin-top:var(--s3); display:flex; flex-direction:column; gap:1rem; color:var(--bone-dim); max-width:60ch}
.quote{margin:var(--s4) 0 0; padding-left:1.2rem; border-left:3px solid var(--jaune);
  font-family:'Barlow Condensed',sans-serif; font-weight:600; text-transform:uppercase; font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.1; color:var(--bone)}
.card--coach p + p{margin-top:.7rem}
.card--coach .ph{width:calc(100% + 2.6rem); height:auto; max-width:none; margin:-1.3rem -1.3rem 1.2rem; aspect-ratio:1/1; object-fit:cover; object-position:60% 55%;
  border-radius:var(--r) var(--r) 0 0}

/* ---------- Avis Google ---------- */
.partner--reviews .note{display:flex; flex-direction:column; align-items:flex-start; line-height:1}
.partner--reviews .note b{font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.9rem; color:var(--bone)}
.partner--reviews .stars{font-size:.8rem; letter-spacing:.12em; color:var(--jaune); margin-top:.2rem}

/* ---------- Kids ---------- */
@media (min-width:900px){.plans--4{grid-template-columns:repeat(4,1fr)}}
.plans--4 .plan p{color:var(--bone-dim); font-size:.95rem}
.tag--line{align-self:flex-start; font-family:'Barlow Condensed',sans-serif; font-size:.625rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--jaune); border:1px solid rgba(255,200,0,.4); padding:.3rem .65rem; border-radius:99px; margin-bottom:1rem}
.plan--hot .actions{margin-top:auto; padding-top:1.2rem}
.plan--hot .actions .btn{width:100%; justify-content:space-between}

/* ---------- Appli MAAT ---------- */
.app-band{display:grid; gap:var(--s4); padding:clamp(1.5rem,4vw,3rem); border-radius:calc(var(--r) * 1.4);
  background:linear-gradient(135deg, var(--noir-3), var(--noir-2)); border:1px solid var(--hair-2)}
@media (min-width:900px){.app-band{grid-template-columns:1.4fr 1fr; align-items:center}}
.app-band .h2{margin-top:.6rem}
.app-band .lede{margin-top:1rem; max-width:52ch}
.steps{list-style:none; counter-reset:s; margin:1.4rem 0 0; padding:0; display:grid; gap:.6rem}
.steps li{counter-increment:s; display:flex; gap:.8rem; align-items:baseline; color:var(--bone)}
.steps li::before{content:counter(s); flex:none; width:1.6rem; height:1.6rem; border-radius:99px; display:grid; place-items:center;
  background:var(--jaune); color:var(--noir); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.85rem}
.app-band .first{margin-top:1.2rem; font-size:.9rem; color:var(--dim)}
.app-band .first a{color:var(--jaune); text-decoration:underline; text-underline-offset:3px}
.stores{display:flex; flex-direction:column; gap:.7rem}
.store{display:flex; align-items:center; gap:.9rem; padding:.85rem 1.2rem; border-radius:1rem; background:var(--bone); color:var(--noir);
  transition:transform .4s var(--ease), background .3s var(--ease)}
.store:hover{transform:translateY(-2px); background:#fff}
.store span{display:flex; flex-direction:column; line-height:1.05; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.35rem}
.store small{font-family:'Barlow',sans-serif; font-weight:500; font-size:.7rem; letter-spacing:.02em}
.store-more{align-self:center; font-size:.8rem; color:var(--dim); text-decoration:underline; text-underline-offset:3px}

/* ---------- Crédit agence ---------- */
.foot-links{display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center}
.foot-andmore{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none!important}
.foot-andmore small{font-size:.6875rem; letter-spacing:.08em; color:var(--dim)}
.foot-andmore img{height:14px; width:auto; opacity:.7; transition:opacity .3s var(--ease)}
.foot-andmore:hover img{opacity:1}

/* ---------- Zones tactiles (mobile) : liens d'au moins ~32 px de haut ---------- */
@media (max-width:1020px){
  .foot ul{gap:0}
  .foot li a{display:inline-block; padding-block:.4rem}
  .foot-links a, .crumb a, .store-more, .card li a{display:inline-block; padding-block:.4rem}
}