/* Ski Club Jura Gessien – section Thoiry
   Direction : « piste damée ». Fond neige, marine et rouge du logo — les couleurs des portes
   de slalom. La ligne de trace (un virage entre portes rouges et bleues) est le motif signature.
   Typo : Barlow Semi Condensed (la police du logo du club) pour les titres, Barlow pour le texte. */
:root{
  --neige:#F4F7FB;      /* fond de page */
  --blanc:#FFFFFF;      /* cartes, surfaces */
  --glace:#E3EBF5;      /* aplats clairs, pastilles */
  --ligne:#D3DCE8;      /* filets */
  --encre:#111B3F;      /* texte principal */
  --brume:#4F5D7E;      /* texte secondaire (5,9:1 sur neige) */
  --marine:#22326D;     /* bleu du logo */
  --marine-2:#18244F;   /* marine profond (bandeaux) */
  --rouge:#BC1F39;      /* rouge du logo */
  --rouge-2:#9E1830;    /* rouge au survol */
  --ciel:#9FC1EA;       /* accents sur fond marine */
  --sur-marine:#E9EFF9; /* texte sur marine */
  --sur-marine-2:#AFC0DE;
  --vert:#1F7A47;       /* piste verte, états positifs */
  --ambre:#8A5A00; --ambre-fond:#FBEFD3;

  --f-titre:"Barlow Semi Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-texte:"Barlow","Helvetica Neue",Arial,sans-serif;

  --r:14px; --r-s:8px;
  --ombre:0 1px 2px rgba(17,27,63,.06),0 12px 32px -18px rgba(17,27,63,.35);
  --gouttiere:max(20px,env(safe-area-inset-left,0px));
  --gouttiere-d:max(20px,env(safe-area-inset-right,0px));
  --large:1200px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--neige);color:var(--encre);font-family:var(--f-texte);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--marine);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--rouge)}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--f-titre);line-height:1.04;margin:0;text-wrap:balance;letter-spacing:-.005em}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:absolute;left:-999px;top:8px;background:var(--marine);color:#fff;padding:10px 14px;border-radius:8px;z-index:100}
.saut:focus{left:12px}

.cadre{max-width:var(--large);margin:0 auto;padding-left:var(--gouttiere);padding-right:var(--gouttiere-d)}
.etroit{max-width:820px}

/* ---------- En-tête ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--blanc)}
.entete{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.entete.defile{border-bottom-color:var(--ligne);box-shadow:0 8px 24px -20px rgba(17,27,63,.5)}
.entete .cadre{display:flex;align-items:center;gap:20px;min-height:76px;transition:min-height .3s}
.entete.defile .cadre{min-height:62px}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--encre);flex:none}
.marque img{width:52px;height:52px;transition:width .3s,height .3s}
.entete.defile .marque img{width:42px;height:42px}
.marque span{display:flex;flex-direction:column;line-height:1}
.marque b{font-family:var(--f-titre);font-weight:800;font-size:21px;letter-spacing:.01em;text-transform:uppercase;color:var(--marine)}
.marque small{font-family:var(--f-titre);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge);margin-top:4px}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{position:relative;font-family:var(--f-titre);font-weight:600;font-size:16.5px;color:var(--encre);text-decoration:none;padding:10px 11px;border-radius:8px;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:11px;right:11px;bottom:5px;height:2px;background:var(--rouge);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--marine)}
.nav .btn{margin-left:8px}
.nav a.nav-insta{display:grid;place-items:center;width:42px;height:42px;padding:0;margin-left:6px;border-radius:50%;color:var(--marine);border:1px solid var(--ligne);transition:color .2s,border-color .2s,background .2s}
.nav a.nav-insta::after{display:none}
.nav a.nav-insta:hover{color:var(--rouge);border-color:var(--rouge);background:color-mix(in srgb,var(--rouge) 6%,#fff)}
.nav-insta svg{width:22px;height:22px}
.menu-panneau a.menu-insta{display:flex;align-items:center;gap:10px}
.menu-insta svg{width:24px;height:24px;color:var(--rouge)}
.pied .btn svg{width:18px;height:18px}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:var(--f-titre);font-weight:700;font-size:16px;padding:10px 14px;border:1px solid var(--ligne);border-radius:999px;color:var(--marine);background:var(--blanc)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:18px;height:18px}
.menu[open] summary{background:var(--marine);color:#fff;border-color:var(--marine)}
.menu-panneau{position:absolute;left:0;right:0;top:100%;background:var(--blanc);border-bottom:1px solid var(--ligne);box-shadow:0 24px 40px -24px rgba(17,27,63,.45);padding:8px var(--gouttiere-d) 20px var(--gouttiere);display:grid;gap:2px;animation:deroule .28s cubic-bezier(.2,.8,.2,1)}
.menu-panneau a{font-family:var(--f-titre);font-weight:700;font-size:22px;color:var(--encre);text-decoration:none;padding:10px 4px;border-bottom:1px solid var(--glace)}
.menu-panneau a[aria-current="page"]{color:var(--rouge)}
.menu-panneau .btn{margin-top:12px;justify-content:center}
@keyframes deroule{from{opacity:0;transform:translateY(-8px)}}
@media (max-width:1320px){.nav a{padding:10px 8px;font-size:16px}.nav a::after{left:8px;right:8px}}
@media (max-width:1180px){.nav{display:none}.menu{display:block}}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-titre);font-weight:700;font-size:17px;letter-spacing:.01em;text-decoration:none;border:2px solid transparent;border-radius:999px;padding:11px 20px;cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s,box-shadow .2s;line-height:1.1;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none;transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}
.btn-rouge{background:var(--rouge);color:#fff}
.btn-rouge:hover{background:var(--rouge-2);color:#fff;box-shadow:0 10px 24px -12px rgba(188,31,57,.8)}
.btn-marine{background:var(--marine);color:#fff}
.btn-marine:hover{background:var(--marine-2);color:#fff}
.btn-contour{border-color:currentColor;color:var(--marine);background:transparent}
.btn-contour:hover{background:var(--marine);border-color:var(--marine);color:#fff}
.btn-clair{border-color:rgba(233,239,249,.55);color:var(--sur-marine);background:transparent}
.btn-clair:hover{background:var(--sur-marine);color:var(--marine-2);border-color:var(--sur-marine)}
.btn:active{transform:translateY(1px)}
.lien-fleche{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-titre);font-weight:700;font-size:17px;text-decoration:none;color:var(--marine)}
.lien-fleche svg{width:18px;height:18px;transition:transform .25s}
.lien-fleche:hover svg{transform:translateX(4px)}

/* ---------- Typo de section ---------- */
.surtitre{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-titre);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--rouge)}
.surtitre::before{content:"";width:22px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--rouge) 0 50%,var(--marine) 50% 100%)}
.titre-section{font-weight:800;font-size:clamp(34px,4.6vw,56px);text-transform:uppercase;color:var(--marine);margin-top:10px}
.chapo{font-size:clamp(17px,1.5vw,19.5px);color:var(--brume);max-width:60ch;margin-top:14px}
.tete-section{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:36px}
.tete-section > div{min-width:0;max-width:760px}
.bloc{padding-block:clamp(64px,8vw,112px)}
.bloc-serre{padding-block:clamp(48px,6vw,72px)}

/* ---------- Héros (accueil) ---------- */
.heros{position:relative;background:var(--marine-2);color:var(--sur-marine);overflow:hidden;isolation:isolate}
.heros-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:clamp(560px,72vh,720px)}
.heros-texte{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:72px 48px 120px var(--gouttiere);padding-left:max(var(--gouttiere),calc((100vw - var(--large))/2 + 20px))}
.heros-texte .surtitre{color:var(--ciel)}
.heros-texte .surtitre::before{background:linear-gradient(90deg,var(--rouge) 0 50%,var(--ciel) 50% 100%)}
.heros h1{font-weight:800;font-size:clamp(46px,5.6vw,92px);line-height:.88;text-transform:uppercase;color:#fff;letter-spacing:-.01em}
.heros h1 .ligne{display:block;overflow:hidden;padding-bottom:.04em}
.heros h1 .ligne > span{display:block}
.heros h1 em{font-style:normal;color:var(--ciel)}
.heros p{font-size:clamp(17px,1.5vw,20px);max-width:44ch;color:var(--sur-marine)}
.heros-actions{display:flex;flex-wrap:wrap;gap:12px}
.heros-photo{position:relative;min-height:340px;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);overflow:hidden}
.heros-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 55%;transform-origin:60% 60%}
.heros-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,36,79,.35),transparent 30%)}
.heros-legende{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:84px;z-index:3;font-size:13px;letter-spacing:.04em;color:#fff;background:rgba(17,27,63,.55);padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}
#neige{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%}
.trace{position:absolute;left:0;right:0;bottom:0;height:88px;z-index:3;pointer-events:none}
.trace svg{width:100%;height:100%;display:block}
.trace .sol{fill:var(--neige)}
.trace .sillon{fill:none;stroke:var(--marine);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1 7;opacity:.55}
.trace .porte-r{stroke:var(--rouge)}.trace .porte-b{stroke:var(--marine)}
.trace .porte-r,.trace .porte-b{stroke-width:3;stroke-linecap:round}
.trace .fanion-r{fill:var(--rouge)}.trace .fanion-b{fill:var(--marine)}

/* Animations d'arrivée du héros : état final = état au repos */
@media (prefers-reduced-motion:no-preference){
  .anime .heros-photo img{animation:zoomlent 9s cubic-bezier(.2,.7,.2,1) both}
  .anime .heros h1 .ligne > span{animation:monte .9s cubic-bezier(.2,.8,.2,1) both}
  .anime .heros h1 .ligne:nth-child(2) > span{animation-delay:.08s}
  .anime .heros h1 .ligne:nth-child(3) > span{animation-delay:.16s}
  .anime .heros .surtitre,.anime .heros p,.anime .heros-actions{animation:apparait .8s .35s cubic-bezier(.2,.8,.2,1) both}
  .anime .heros-actions{animation-delay:.48s}
  .anime .trace .sillon{animation:trace 2.4s .5s ease-out both}
  .anime .trace .porte{animation:plante .5s cubic-bezier(.3,1.6,.5,1) both;transform-box:fill-box;transform-origin:bottom}
}
@keyframes zoomlent{from{transform:scale(1.12)}}
@keyframes monte{from{transform:translateY(105%)}}
@keyframes apparait{from{opacity:0;transform:translateY(14px)}}
@keyframes trace{from{stroke-dashoffset:900}}
@keyframes plante{from{transform:scaleY(0)}}

@media (max-width:900px){
  .heros-grille{grid-template-columns:minmax(0,1fr);min-height:0}
  .heros-photo{order:-1;height:min(62vw,420px);min-height:0;clip-path:polygon(0 0,100% 0,100% 86%,0 100%)}
  .heros-texte{padding:28px var(--gouttiere-d) 112px var(--gouttiere)}
  .heros-legende{bottom:auto;top:12px}
}

/* ---------- En-tête de page intérieure ---------- */
.page-tete{position:relative;background:var(--marine-2);color:var(--sur-marine);overflow:hidden;isolation:isolate}
.page-tete .cadre{position:relative;z-index:2;padding-block:clamp(56px,7vw,92px) clamp(100px,10vw,130px)}
.page-tete h1{font-weight:800;font-size:clamp(44px,6.4vw,84px);text-transform:uppercase;color:#fff;line-height:.92;margin-top:14px;max-width:16ch}
.page-tete p{margin-top:18px;max-width:58ch;font-size:clamp(17px,1.5vw,19.5px)}
.page-tete .surtitre{color:var(--ciel)}
.page-tete .surtitre::before{background:linear-gradient(90deg,var(--rouge) 0 50%,var(--ciel) 50% 100%)}
.page-tete-photo{position:absolute;inset:0;z-index:0}
.page-tete-photo img{width:100%;height:100%;object-fit:cover;opacity:.32;filter:saturate(.8)}
.page-tete-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--marine-2) 20%,rgba(24,36,79,.55) 70%,rgba(24,36,79,.3))}
.fil{font-size:14px;color:var(--sur-marine-2);display:flex;gap:8px;flex-wrap:wrap}
.fil a{color:var(--sur-marine);text-decoration:none}
.fil a:hover{color:#fff;text-decoration:underline}
@media (prefers-reduced-motion:no-preference){
  .anime .page-tete h1,.anime .page-tete p,.anime .page-tete .surtitre{animation:apparait .8s cubic-bezier(.2,.8,.2,1) both}
  .anime .page-tete h1{animation-delay:.06s}.anime .page-tete p{animation-delay:.16s}
  .anime .page-tete-photo img{animation:zoomlent 9s cubic-bezier(.2,.7,.2,1) both}
}

/* ---------- Bandeau d'état (inscriptions) ---------- */
.etat{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:16px 20px;box-shadow:var(--ombre)}
.etat b{font-family:var(--f-titre);font-size:20px;font-weight:700;color:var(--encre)}
.etat p{color:var(--brume);font-size:15.5px;flex:1 1 320px;min-width:0}
.pastille{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-titre);font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 12px;white-space:nowrap}
.pastille i{width:8px;height:8px;border-radius:50%;background:currentColor}
.pastille.fermee{background:var(--ambre-fond);color:var(--ambre)}
.pastille.ouverte{background:#DCF1E4;color:var(--vert)}
.pastille.info{background:var(--glace);color:var(--marine)}
.pastille.rouge{background:#F9E0E4;color:var(--rouge-2)}

/* ---------- À la une ---------- */
.une{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:stretch}
@media (max-width:900px){.une{grid-template-columns:minmax(0,1fr)}}
.carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;min-width:0}
.loto{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:0;box-shadow:var(--ombre)}
.loto-texte{padding:28px 30px;display:flex;flex-direction:column;gap:16px}
.loto h3{font-weight:800;font-size:clamp(30px,3.4vw,42px);text-transform:uppercase;color:var(--marine)}
.loto-infos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:16px}
.loto-infos dt{font-family:var(--f-titre);font-weight:700;color:var(--brume);text-transform:uppercase;letter-spacing:.06em;font-size:13.5px;padding-top:3px}
.loto-infos dd{margin:0}
.loto-affiche{background:var(--glace);display:block;position:relative;overflow:hidden}
.loto-affiche img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.loto-affiche:hover img{transform:scale(1.04)}
.loto-affiche span{position:absolute;left:10px;bottom:10px;font-size:13px;background:rgba(17,27,63,.82);color:#fff;padding:4px 10px;border-radius:999px}
.compte{display:flex;align-items:baseline;gap:10px;font-family:var(--f-titre)}
.compte b{font-size:52px;font-weight:800;line-height:.9;color:var(--rouge)}
.compte span{font-weight:600;font-size:16px;color:var(--brume);text-transform:uppercase;letter-spacing:.08em}
@media (max-width:620px){.loto{grid-template-columns:minmax(0,1fr)}.loto-affiche{height:260px;order:-1}}
.appel{background:var(--marine);color:var(--sur-marine);border:0;padding:28px 30px;display:flex;flex-direction:column;gap:14px;position:relative}
.appel h3{color:#fff;font-weight:800;font-size:clamp(26px,2.8vw,34px);text-transform:uppercase}
.appel p{color:var(--sur-marine)}
.appel .btn{align-self:flex-start;margin-top:auto}
.appel .jauge{margin-top:4px}

/* ---------- Sections (cartes) ---------- */
.sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:980px){.sections{grid-template-columns:minmax(0,1fr)}}
.section-carte{position:relative;display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.section-carte:hover{transform:translateY(-6px);box-shadow:0 28px 50px -30px rgba(17,27,63,.55);color:inherit}
.section-carte figure{margin:0;aspect-ratio:4/3;overflow:hidden;position:relative;max-width:100%}
.section-carte figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.section-carte:hover figure img{transform:scale(1.06)}
.section-carte .porte-num{position:absolute;left:16px;top:16px;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-family:var(--f-titre);font-weight:800;font-size:15px;color:#fff;letter-spacing:.04em}
.section-carte .corps{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.section-carte h3{font-weight:800;font-size:30px;text-transform:uppercase;color:var(--marine)}
.section-carte p{color:var(--brume);font-size:16px}
.faits{list-style:none;margin:4px 0 0;padding:14px 0 0;border-top:1px solid var(--glace);display:grid;gap:8px;font-size:15.5px}
.faits li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start}
.faits svg{width:18px;height:18px;margin-top:3px;color:var(--rouge)}
.faits b{font-weight:600}
.section-carte .lien-fleche{margin-top:auto;padding-top:8px}

/* ---------- Agenda (prochains rendez-vous) ---------- */
.prochains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.prochains{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.prochains{grid-template-columns:minmax(0,1fr)}}
.rdv{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0;position:relative;overflow:hidden}
.rdv::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--glace)}
.rdv.manif::before{background:var(--rouge)}
.rdv.compet::before,.rdv.stage::before{background:var(--marine)}
.rdv.entrainement::before{background:var(--ciel)}
.date-bloc{display:flex;align-items:flex-end;gap:10px;font-family:var(--f-titre);color:var(--marine)}
.date-bloc b{font-size:48px;font-weight:800;line-height:.82}
.date-bloc span{display:flex;flex-direction:column;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.08em;line-height:1.15}
.date-bloc small{color:var(--brume);font-weight:600;font-size:13px}
.rdv h3{font-size:22px;font-weight:700;color:var(--encre)}
.rdv p{font-size:15px;color:var(--brume)}
.rdv .pastille{align-self:flex-start}
.vide{border:1px dashed var(--ligne);border-radius:var(--r);padding:24px;color:var(--brume);text-align:center}

/* ---------- Bilan / chiffres ---------- */
.bilan{background:var(--blanc);border-block:1px solid var(--ligne)}
.temps-forts{margin-top:44px}
.temps-forts h3{font-family:var(--f-titre);font-weight:800;font-size:clamp(24px,3vw,30px);text-transform:uppercase;color:var(--marine);margin:0 0 18px;line-height:1.1}
.temps-forts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px}
.temps-forts li{position:relative;background:var(--neige,#f4f7fc);border:1px solid var(--ligne);border-radius:16px;padding:18px 20px 18px 46px;line-height:1.55;color:var(--encre)}
.temps-forts li::before{content:"";position:absolute;left:20px;top:25px;width:12px;height:12px;border-radius:50%;background:var(--rouge);box-shadow:0 0 0 4px color-mix(in srgb,var(--rouge) 18%,transparent)}
.temps-forts b{color:var(--marine)}
.temps-forts-merci{margin:22px 0 0;color:var(--brume);font-style:italic}
.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;background:var(--neige)}
@media (max-width:900px){.chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chiffre{padding:26px 24px;border-left:1px solid var(--ligne);display:flex;flex-direction:column;gap:6px;min-width:0}
.chiffre:first-child{border-left:0}
@media (max-width:900px){.chiffre:nth-child(3){border-left:0}.chiffre:nth-child(n+3){border-top:1px solid var(--ligne)}}
.chiffre b{font-family:var(--f-titre);font-weight:800;font-size:clamp(46px,5.4vw,70px);line-height:.9;color:var(--marine);font-variant-numeric:tabular-nums}
.chiffre b sup{font-size:.45em;vertical-align:.9em;margin-left:2px;color:var(--rouge)}
.chiffre > span{font-family:var(--f-titre);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.04em}
.chiffre small{color:var(--brume);font-size:14.5px}
.podiums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px;margin-top:40px}
@media (max-width:820px){.podiums{grid-template-columns:minmax(0,1fr)}}
.podiums p{color:var(--encre);font-size:16.5px;padding-left:18px;border-left:3px solid var(--glace)}
.podiums p b{color:var(--marine)}

/* ---------- Pellicule photos ---------- */
.pellicule{overflow:hidden;padding-block:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pellicule-piste{display:flex;gap:16px;width:max-content}
.pellicule figure{margin:0;height:clamp(220px,26vw,320px);flex:none;border-radius:var(--r);overflow:hidden;background:var(--glace)}
.pellicule img{height:100%;width:auto;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .pellicule-piste{animation:defile 70s linear infinite}
  .pellicule:hover .pellicule-piste{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){.pellicule{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------- Bandeau « le club a besoin de vous » ---------- */
.besoin{background:var(--marine-2);color:var(--sur-marine);position:relative;overflow:hidden;isolation:isolate}
.besoin::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(-62deg,transparent 0 46px,rgba(159,193,234,.05) 46px 47px)}
.besoin .titre-section{color:#fff}
.besoin .surtitre{color:var(--ciel)}
.besoin .chapo{color:var(--sur-marine-2)}
.besoin-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:8px}
@media (max-width:1100px){.besoin-grille{grid-template-columns:repeat(2,minmax(0,1fr))}.besoin-grille .besoin-carte:last-child{grid-column:1/-1}}
@media (max-width:820px){.besoin-grille{grid-template-columns:minmax(0,1fr)}}
.besoin-carte{border:1px solid rgba(175,192,222,.25);background:rgba(255,255,255,.04);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:14px;transition:background .3s,border-color .3s}
.besoin-carte:hover{background:rgba(255,255,255,.07);border-color:rgba(175,192,222,.45)}
.besoin-carte h3{color:#fff;font-weight:800;font-size:30px;text-transform:uppercase}
.besoin-carte p{color:var(--sur-marine-2)}
.besoin-carte .btn{align-self:flex-start;margin-top:auto}
.icone-rond{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--rouge);color:#fff}
.icone-rond svg{width:26px;height:26px}

/* ---------- Magic Pass ---------- */
.mp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center}
@media (max-width:900px){.mp{grid-template-columns:minmax(0,1fr)}}
.mp-carte{border-radius:var(--r);overflow:hidden;border:1px solid var(--ligne);box-shadow:var(--ombre);background:var(--blanc)}
.mp ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.mp li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px}
.mp li svg{width:20px;height:20px;color:var(--rouge);margin-top:3px}
.mp-logo{height:46px;width:auto;margin-bottom:6px}

/* ---------- Partenaires ---------- */
.partenaires{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:820px){.partenaires{grid-template-columns:repeat(2,minmax(0,1fr))}}
.partenaire{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:22px 18px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;min-width:0;transition:transform .3s,box-shadow .3s}
.partenaire:hover{transform:translateY(-3px);box-shadow:var(--ombre)}
.partenaire .logo{height:76px;display:grid;place-items:center;width:100%}
.partenaire img{max-height:70px;max-width:100%;width:auto;object-fit:contain}
.partenaire span{font-size:14px;color:var(--brume);line-height:1.3}
.soutiens{display:flex;align-items:center;gap:20px 40px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid var(--ligne)}
.soutiens > span{font-family:var(--f-titre);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:14px;color:var(--brume)}
.soutiens img{height:54px;width:auto}

/* ---------- Pied de page ---------- */
.pied{background:var(--encre);color:#C9D3E6;padding-top:72px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));position:relative;overflow:hidden}
.pied-grille{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:36px}
@media (max-width:900px){.pied-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.pied-grille{grid-template-columns:minmax(0,1fr)}}
.pied h2{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.pied a{color:#E1E8F5;text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15.5px}
.pied-marque{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.pied-marque img{width:64px;height:64px;background:#fff;border-radius:50%;padding:4px}
.pied-marque b{font-family:var(--f-titre);font-weight:800;font-size:22px;color:#fff;text-transform:uppercase;line-height:1}
.pied-marque small{display:block;font-family:var(--f-titre);color:#F08A9B;letter-spacing:.12em;text-transform:uppercase;font-weight:600;font-size:13px;margin-top:4px}
.pied p{font-size:15px;max-width:40ch}
.mail{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.mail code{font-family:var(--f-texte);font-size:16px;color:#fff;background:rgba(255,255,255,.08);padding:6px 10px;border-radius:8px;user-select:all;word-break:break-all}
.copier{appearance:none;border:1px solid rgba(201,211,230,.35);background:transparent;color:#E1E8F5;border-radius:999px;padding:6px 12px;font:600 13px var(--f-texte);cursor:pointer}
.copier:hover{background:rgba(255,255,255,.1)}
.pied-bas{margin-top:56px;padding-top:20px;border-top:1px solid rgba(201,211,230,.15);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:13.5px;color:#9AA8C4}
.pied-bas a{color:#C9D3E6}

/* ---------- Contenu éditorial des pages ---------- */
.contenu{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
@media (max-width:980px){.contenu{grid-template-columns:minmax(0,1fr)}}
.texte{display:flex;flex-direction:column;gap:18px;min-width:0}
.texte h2{font-weight:800;font-size:clamp(30px,3.4vw,42px);text-transform:uppercase;color:var(--marine);margin-top:22px}
.texte h2:first-child{margin-top:0}
.texte h3{font-weight:700;font-size:25px;color:var(--encre);margin-top:8px}
.texte p,.texte li{max-width:68ch}
.texte ul{margin:0;padding-left:22px;display:grid;gap:8px}
.texte ul li::marker{color:var(--rouge)}
.aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
@media (max-width:980px){.aside{position:static}}
.fiche{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--ombre)}
.fiche h2{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge)}
.fiche dl{margin:0;display:grid;gap:14px}
.fiche dt{font-family:var(--f-titre);font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brume)}
.fiche dd{margin:2px 0 0;font-size:16px}
.fiche dd b{font-family:var(--f-titre);font-size:30px;font-weight:800;color:var(--marine);line-height:1}
.encadre{background:var(--glace);border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.encadre.alerte{background:var(--ambre-fond)}
.encadre.alerte b{color:var(--ambre)}
.encadre b{font-family:var(--f-titre);font-size:19px;font-weight:700;color:var(--marine)}

/* Échelle des niveaux ESF (signature des pages section) */
.echelle{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:26px 24px 22px;overflow-x:auto}
.echelle h3{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge);margin-bottom:22px}
.echelle ol{--n:8;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(76px,1fr));position:relative;min-width:640px}
.echelle ol::before{content:"";position:absolute;left:calc(100% / (2 * var(--n)));right:calc(100% / (2 * var(--n)));top:15px;height:4px;border-radius:2px;background:var(--glace)}
.echelle .remplissage{position:absolute;top:15px;height:4px;border-radius:2px;background:var(--marine);transform-origin:left}
.echelle li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-family:var(--f-titre);font-weight:600;font-size:15px;line-height:1.1;color:var(--brume);padding:0 4px}
.echelle li i{width:34px;height:34px;border-radius:50%;background:var(--blanc);border:3px solid var(--ligne);display:grid;place-items:center;position:relative;z-index:1}
.echelle li i svg{width:16px;height:16px}
.echelle li.dans{color:var(--encre)}
.echelle li.dans i{border-color:var(--marine);background:var(--marine);color:#fff}
.echelle li.requis{color:var(--rouge-2)}
.echelle li.requis i{border-color:var(--rouge);background:var(--rouge);color:#fff}
.echelle li.test{color:var(--rouge-2)}
.echelle li.test i{border-color:var(--rouge);border-style:dashed;color:var(--rouge)}
.echelle li small{font-family:var(--f-texte);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.echelle-legende{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:14px;color:var(--brume)}
.echelle-legende span{display:inline-flex;align-items:center;gap:8px}
.echelle-legende i{width:12px;height:12px;border-radius:50%}
@media (prefers-reduced-motion:no-preference){.echelle.vu .remplissage{animation:remplit 1.4s .2s cubic-bezier(.2,.8,.2,1) both}.echelle.vu li.dans i,.echelle.vu li.requis i{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.2s + var(--k,0) * .1s)}}
@keyframes remplit{from{transform:scaleX(0)}}
@keyframes pop{from{transform:scale(.4)}}

.tableau{overflow-x:auto;border:1px solid var(--ligne);border-radius:var(--r);background:var(--blanc)}
.tableau table{border-collapse:collapse;width:100%;font-size:16px;min-width:460px}
.tableau th{text-align:left;font-family:var(--f-titre);font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brume);padding:12px 16px;border-bottom:1px solid var(--ligne);background:var(--neige)}
.tableau td{padding:13px 16px;border-bottom:1px solid var(--glace);vertical-align:top}
.tableau tr:last-child td{border-bottom:0}
.tableau td.prix{font-family:var(--f-titre);font-weight:800;font-size:22px;color:var(--marine);white-space:nowrap;text-align:right}

/* ---------- Page agenda ---------- */
.filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.filtre{appearance:none;border:1px solid var(--ligne);background:var(--blanc);border-radius:999px;padding:8px 16px;font:600 15px var(--f-texte);color:var(--brume);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s}
.filtre i{width:10px;height:10px;border-radius:50%}
.filtre[aria-pressed="true"]{background:var(--marine);border-color:var(--marine);color:#fff}
.mois{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding-block:28px;border-top:1px solid var(--ligne)}
.mois:first-of-type{border-top:0}
@media (max-width:720px){.mois{grid-template-columns:minmax(0,1fr);gap:12px}}
.mois h2{font-weight:800;font-size:34px;text-transform:uppercase;color:var(--marine);position:sticky;top:96px;align-self:start}
.mois h2 small{display:block;font-size:17px;color:var(--brume);font-weight:600;letter-spacing:.1em}
@media (max-width:720px){.mois h2{position:static}}
.evts{display:grid;gap:10px;min-width:0}
.evt{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:start;background:var(--blanc);border:1px solid var(--ligne);border-radius:12px;padding:14px 18px;position:relative;overflow:hidden}
.evt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--glace)}
.evt.manif::before{background:var(--rouge)}.evt.compet::before,.evt.stage::before{background:var(--marine)}.evt.entrainement::before{background:var(--ciel)}
.evt.passe{opacity:.55}
.evt .quand{font-family:var(--f-titre);font-weight:700;color:var(--marine);font-size:18px;line-height:1.15}
.evt h3{font-family:var(--f-texte);font-size:17px;font-weight:600;color:var(--encre);line-height:1.35}
.evt p{font-size:15px;color:var(--brume);margin-top:2px}
@media (max-width:560px){.evt{grid-template-columns:minmax(0,1fr)}.evt .pastille{justify-self:start}}
.legende-types{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--brume)}
.legende-types span{display:inline-flex;align-items:center;gap:8px}
.legende-types i{width:12px;height:12px;border-radius:3px}

/* ---------- Bénévoles ---------- */
.mission{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre)}
.mission-tete{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;padding:24px 26px;border-bottom:1px solid var(--ligne)}
@media (max-width:720px){.mission-tete{grid-template-columns:auto minmax(0,1fr)}.mission-tete .jauge-bloc{grid-column:1/-1}}
.calendrier-mini{width:76px;border-radius:10px;overflow:hidden;text-align:center;border:1px solid var(--ligne);font-family:var(--f-titre)}
.calendrier-mini span{display:block;background:var(--rouge);color:#fff;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:3px 0}
.calendrier-mini b{display:block;font-size:38px;font-weight:800;color:var(--marine);line-height:1.15}
.mission h2{font-weight:800;font-size:clamp(26px,3vw,36px);text-transform:uppercase;color:var(--marine)}
.mission-tete p{color:var(--brume);font-size:15.5px;margin-top:4px}
.jauge-bloc{min-width:220px}
.jauge-bloc small{display:block;font-size:14px;color:var(--brume);margin-bottom:6px}
.jauge{height:10px;border-radius:999px;background:var(--glace);overflow:hidden}
.jauge i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--marine),var(--rouge));transition:width 1s cubic-bezier(.2,.8,.2,1)}
.appel .jauge{background:rgba(255,255,255,.14)}
.appel .jauge i{background:linear-gradient(90deg,var(--ciel),#fff)}
.postes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:22px 26px 26px}
.poste{appearance:none;text-align:left;font:inherit;color:inherit;border:2px solid var(--ligne);background:var(--neige);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:border-color .2s,background .2s,transform .2s;min-width:0}
.poste:hover{border-color:var(--marine);transform:translateY(-2px)}
.poste[aria-pressed="true"]{border-color:var(--rouge);background:#FDF1F3}
.poste b{font-family:var(--f-titre);font-size:21px;font-weight:700;color:var(--encre);line-height:1.1}
.poste .horaire{font-size:15px;color:var(--brume);display:flex;align-items:center;gap:6px}
.poste .horaire svg{width:16px;height:16px}
.places{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.places i{width:18px;height:18px;border-radius:5px;border:2px solid var(--marine);background:transparent}
.places i.pris{background:var(--marine)}
.places i.moi{background:var(--rouge);border-color:var(--rouge)}
.poste .reste{font-size:14px;font-weight:600;color:var(--rouge-2)}
.poste .reste.ok{color:var(--vert)}
.poste .choisir{margin-top:auto;font-family:var(--f-titre);font-weight:700;font-size:15px;color:var(--marine);display:flex;align-items:center;gap:6px}
.poste[aria-pressed="true"] .choisir{color:var(--rouge-2)}

.formulaire{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:620px){.formulaire{grid-template-columns:minmax(0,1fr)}}
.formulaire .large{grid-column:1/-1}
.champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.champ label{font-family:var(--f-titre);font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--encre)}
.champ label small{font-family:var(--f-texte);font-weight:400;color:var(--brume);letter-spacing:0}
.champ input,.champ textarea,.champ select{font:inherit;font-size:16px;color:var(--encre);background:var(--blanc);border:1.5px solid var(--ligne);border-radius:10px;padding:12px 14px;min-width:0;width:100%;transition:border-color .2s,box-shadow .2s}
.champ textarea{min-height:110px;resize:vertical}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--marine);box-shadow:0 0 0 4px rgba(34,50,109,.14)}
.choix-resume{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:40px;padding:10px 14px;border-radius:10px;background:var(--glace);font-size:15px}
.choix-resume .pastille{background:var(--blanc)}
.case{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--brume)}
.case input{width:20px;height:20px;margin-top:2px;accent-color:var(--rouge);flex:none}
.confirmation{border:2px solid var(--vert);background:#EEF8F2;border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.confirmation b{font-family:var(--f-titre);font-size:24px;font-weight:800;color:var(--vert);text-transform:uppercase}
.confirmation pre{white-space:pre-wrap;font:15px/1.5 var(--f-texte);background:var(--blanc);border:1px solid var(--ligne);border-radius:10px;padding:14px;margin:0;max-height:260px;overflow:auto}
.a-venir{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.a-venir .carte{padding:20px;display:flex;flex-direction:column;gap:8px}
.a-venir h3{font-size:24px;font-weight:700;color:var(--marine)}
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:e}
@media (max-width:820px){.etapes{grid-template-columns:minmax(0,1fr)}}
.etapes li{counter-increment:e;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:22px 22px 22px 76px;position:relative;min-height:96px}
.etapes li::before{content:counter(e);position:absolute;left:20px;top:20px;width:40px;height:40px;border-radius:50%;background:var(--marine);color:#fff;font-family:var(--f-titre);font-weight:800;font-size:20px;display:grid;place-items:center}
.etapes b{display:block;font-family:var(--f-titre);font-size:20px;font-weight:700;color:var(--encre);margin-bottom:4px}
.etapes span{color:var(--brume);font-size:15.5px}

/* ---------- Animations au défilement ---------- */
@media (prefers-reduced-motion:no-preference){
  .apparition.vu{animation:apparait .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 90ms)}
}

/* ---------- Divers ---------- */
.deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:820px){.deux{grid-template-columns:minmax(0,1fr)}}
.photo-cadre{border-radius:var(--r);overflow:hidden;background:var(--glace);max-width:100%}
.photo-cadre img{width:100%;height:100%;object-fit:cover}
.courses{list-style:none;margin:0;padding:0;display:grid;gap:0;border:1px solid var(--ligne);border-radius:var(--r);background:var(--blanc);overflow:hidden}
.courses li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px 18px;border-top:1px solid var(--glace);align-items:baseline}
.courses li:first-child{border-top:0}
.courses time{font-family:var(--f-titre);font-weight:700;color:var(--marine);font-size:17px}
.courses span{font-weight:500}
.courses small{display:block;color:var(--brume);font-size:14.5px;font-weight:400}
@media (max-width:520px){.courses li{grid-template-columns:minmax(0,1fr);gap:2px}}
.courses-resultats li{grid-template-columns:minmax(0,1fr)}
.courses-saison li[hidden]{display:none}
.courses-saison li[data-club]{background:var(--neige);box-shadow:inset 4px 0 0 var(--marine)}
.courses-saison li.passe{opacity:.55}
.courses-saison .course-club{font-style:normal;font-size:12px;padding:3px 10px;margin-left:8px;vertical-align:2px}
@media (max-width:520px){.courses-saison .course-club{margin:6px 0 2px;display:inline-flex}}
.notice-envoi{font-size:14px;color:var(--brume)}

/* ---------- Parcours en étapes (inscription, bénévoles, lots) — même logique que la Nage Glaciale ---------- */
.parcours{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:28px;align-items:start}
@media (max-width:1000px){.parcours{grid-template-columns:minmax(0,1fr)}}
.parcours-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.etapes-fil{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:10px;font-family:var(--f-titre);font-weight:700;font-size:16px}
.etapes-fil li{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:999px;background:var(--glace);color:var(--marine);transition:background .3s,color .3s}
.etapes-fil li span{width:30px;height:30px;border-radius:50%;background:var(--blanc);display:grid;place-items:center;font-size:15px;transition:background .3s,color .3s}
.etapes-fil li.ici{background:var(--marine);color:#fff}
.etapes-fil li.ici span{background:#fff;color:var(--marine)}
.etapes-fil li.fait span{background:var(--vert);color:#fff}
.panneau{background:var(--blanc);border:1px solid var(--ligne);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:18px;min-width:0}
.panneau > h2{font-weight:800;font-size:26px;text-transform:uppercase;color:var(--marine)}
.panneau > h2 small{font-family:var(--f-texte);text-transform:none;font-weight:500;font-size:16px;color:var(--brume);margin-left:8px}
.skieur{border:1.5px solid var(--ligne);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:16px;animation:apparait .4s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.skieur{animation:none}}
.skieur-tete{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1fr) auto;gap:14px;align-items:end}
@media (max-width:620px){.skieur-tete{grid-template-columns:48px minmax(0,1fr) auto}.skieur-tete .champ:nth-of-type(2){grid-column:1/-1}}
.initiale{width:48px;height:48px;border-radius:50%;background:var(--marine);color:#fff;display:grid;place-items:center;font-family:var(--f-titre);font-weight:800;font-size:22px}
.retirer{appearance:none;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--brume);cursor:pointer;display:grid;place-items:center}
.retirer:hover{background:var(--glace);color:var(--rouge)}
.retirer svg{width:20px;height:20px}
.choix-sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.poste:disabled{cursor:not-allowed;opacity:.5;transform:none;border-style:dashed}
.ajouts{display:flex;flex-wrap:wrap;gap:10px}
.recap{position:sticky;top:96px;background:var(--marine-2);color:var(--sur-marine);border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:18px;box-shadow:0 30px 60px -36px rgba(17,27,63,.8)}
@media (max-width:1000px){.recap{position:static}}
.recap .eti{font-family:var(--f-titre);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ciel)}
.recap .gros{font-family:var(--f-titre);font-weight:800;font-size:68px;line-height:.9;color:#fff;font-variant-numeric:tabular-nums}
#rp-formule{font-size:clamp(34px,10vw,52px);line-height:1}
.recap ul{list-style:none;margin:0;padding:16px 0;border-block:1px solid rgba(175,192,222,.25);display:grid;gap:10px;font-size:15.5px}
.recap li{display:flex;justify-content:space-between;gap:12px}
.recap li span{color:var(--sur-marine-2)}
.recap li small{color:var(--sur-marine-2);font-size:14px;white-space:nowrap}
.recap li.rien{color:var(--sur-marine-2);font-style:italic}
.recap li b{color:#fff;white-space:nowrap}
.recap p{font-size:15px;color:var(--sur-marine-2)}
.recap .btn{justify-content:center;font-size:18px;padding:16px 22px}
.recap .btn[disabled]{opacity:.45;cursor:not-allowed}
.recap .note-test{background:rgba(251,239,211,.12);border:1px solid rgba(251,239,211,.35);color:#F7DFA6;border-radius:12px;padding:10px 12px;font-size:14.5px}
.recap .ferme{display:flex;gap:10px;align-items:flex-start;background:rgba(188,31,57,.18);border:1px solid rgba(240,138,155,.4);border-radius:12px;padding:12px;font-size:14.5px;color:#FAD3DA}
.helloasso{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--sur-marine-2)}
.helloasso svg{width:18px;height:18px;flex:none;color:var(--ciel)}

.piege{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.confirmation.erreur{border-color:var(--rouge);background:#FDF1F3}
.confirmation.erreur b{color:var(--rouge-2)}

/* Vidéo de fond du héros (un jeune du club entre les piquets) : la photo reste dessous pendant le chargement,
   et seule la photo s'affiche si le visiteur réduit les animations ou économise ses données. */
.heros-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:0;transition:opacity .9s ease}
.heros.video-ok .heros-video{opacity:1}
/* ---------- Petites annonces : vitrine, fiche, dépôt avec aperçu ---------- */
.annonces-barre{display:flex;justify-content:space-between;align-items:flex-start;gap:14px 24px;flex-wrap:wrap;margin-bottom:22px}
.annonces-barre .filtres{margin-bottom:0;flex:1 1 420px}
.filtre .num{font-size:13px;opacity:.7}
.annonces-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.segment{display:inline-flex;background:var(--blanc);border:1px solid var(--ligne);border-radius:999px;padding:4px;gap:2px}
.segment.large{display:flex}
.segment.large .seg{flex:1;justify-content:center}
.seg{appearance:none;border:0;background:transparent;border-radius:999px;padding:8px 16px;font:600 15px var(--f-texte);color:var(--brume);cursor:pointer;display:inline-flex;align-items:center;transition:background .2s,color .2s;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg[aria-pressed="true"],.seg:has(input:checked){background:var(--marine);color:#fff}
.seg:has(input:focus-visible){outline:3px solid var(--rouge);outline-offset:2px}
.note-demo{background:var(--ambre-fond);color:var(--ambre);border-radius:var(--r-s);padding:10px 14px;font-size:15px;margin:0 0 18px}
.annonces-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.annonce{min-width:0}
.annonce-ouvrir{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.annonce-ouvrir:hover{transform:translateY(-3px);box-shadow:var(--ombre);border-color:#C2CEDF}
.annonce-ouvrir:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}
.annonce-ouvrir:disabled{cursor:default}
.annonce.apercu{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;color:var(--encre)}
.annonce-media{position:relative;aspect-ratio:1;background:var(--glace);overflow:hidden}
.annonce-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.annonce-ouvrir:hover .annonce-media img{transform:scale(1.04)}
.ill{width:100%;height:100%;display:grid;place-items:center;position:relative;color:var(--marine);background:radial-gradient(circle at 30% 20%,#fff 0,transparent 55%),linear-gradient(160deg,#EEF3FA,#DCE6F3)}
.ill svg{width:56%;height:56%;position:relative}
.ill::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.9) 1.4px,transparent 1.6px);background-size:22px 22px;opacity:.7}
.ill-chaussures,.ill-batons{color:var(--marine-2);background:radial-gradient(circle at 70% 20%,#fff 0,transparent 55%),linear-gradient(160deg,#EAF0F8,#D6E1EF)}
.ill-vetements{color:#1F5E8A;background:radial-gradient(circle at 30% 20%,#fff 0,transparent 55%),linear-gradient(160deg,#E8F2F8,#D3E5F0)}
.ill-casque{color:var(--rouge-2);background:radial-gradient(circle at 30% 20%,#fff 0,transparent 55%),linear-gradient(160deg,#F7EEF0,#EDDCE1)}
.annonce-prix{position:absolute;left:12px;bottom:12px;background:var(--marine-2);color:#fff;font-family:var(--f-titre);font-weight:800;font-size:22px;line-height:1;padding:8px 12px 7px;border-radius:10px;letter-spacing:.01em;box-shadow:0 6px 16px -8px rgba(17,27,63,.6)}
.annonce-prix.don{background:var(--rouge)}
.annonce-vendu{position:absolute;inset:0;display:grid;place-items:center;background:rgba(24,36,79,.55);color:#fff;font-family:var(--f-titre);font-weight:800;font-size:30px;letter-spacing:.14em;text-transform:uppercase}
.annonce.vendue .annonce-corps{opacity:.6}
.annonce-corps{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.annonce-cat{font-family:var(--f-titre);font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--rouge)}
.annonce-corps h3{margin:0;font-family:var(--f-titre);font-size:21px;font-weight:700;line-height:1.15;color:var(--encre);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.annonce-meta{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0}
.annonce-meta span{background:var(--glace);color:var(--marine);border-radius:999px;padding:2px 10px;font-size:13.5px;font-weight:600}
.annonce-qui{margin:auto 0 0;padding-top:8px;font-size:14px;color:var(--brume)}
.annonces-vide{grid-column:1/-1;display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:24px}
.annonces-vide .ill{aspect-ratio:1;border-radius:var(--r)}
.annonces-vide h3{margin:0 0 6px;font-family:var(--f-titre);font-size:28px;color:var(--marine)}
.annonces-vide p{color:var(--brume);margin:0 0 16px;max-width:52ch}
@media (max-width:620px){.annonces-vide{grid-template-columns:minmax(0,1fr)}.annonces-vide .ill{max-width:180px}}
.deposer{background:linear-gradient(180deg,transparent,rgba(227,235,245,.6) 30%,transparent)}
.tuiles-cat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
@media (max-width:620px){.tuiles-cat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tuile-cat{position:relative;cursor:pointer}
.tuile-cat input{position:absolute;opacity:0}
.tuile-cat span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 12px;border:1.5px solid var(--ligne);border-radius:12px;background:var(--blanc);font-family:var(--f-titre);font-weight:700;font-size:16px;color:var(--encre);text-align:center;transition:border-color .2s,background .2s,transform .2s}
.tuile-cat:hover span{border-color:var(--marine)}
.tuile-cat input:checked + span{border-color:var(--marine);background:var(--glace);box-shadow:inset 0 0 0 1px var(--marine)}
.tuile-cat input:focus-visible + span{outline:3px solid var(--rouge);outline-offset:2px}
.ill-mini{width:38px;height:38px;color:var(--marine);display:block}
.ill-mini svg{width:100%;height:100%}
.etiquette{font-family:var(--f-titre);font-weight:700;font-size:15px;letter-spacing:.04em}
.prix-champ{position:relative}
.prix-champ span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-weight:600;color:var(--brume)}
.prix-champ input{padding-right:34px}
.prix-champ input:disabled{background:var(--glace);color:var(--brume)}
#form-annonce h2{font-family:var(--f-titre);font-size:22px;margin:26px 0 12px;color:var(--marine)}
#form-annonce h2:first-child{margin-top:0}
#form-annonce h2 small{font-family:var(--f-texte);font-size:15px;font-weight:400;color:var(--brume)}
.depot-photo{position:relative;display:block;border:2px dashed var(--ligne);border-radius:var(--r);background:var(--blanc);cursor:pointer;transition:border-color .2s;overflow:hidden;max-width:320px;aspect-ratio:1}
.depot-photo:hover{border-color:var(--marine)}
.depot-photo input{position:absolute;inset:0;opacity:0;cursor:pointer}
.depot-vide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:20px;text-align:center;color:var(--brume);font-size:14.5px;pointer-events:none}
.depot-vide b{font-family:var(--f-titre);font-size:19px;color:var(--marine)}
.depot-vide::before{content:"+";display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--glace);color:var(--marine);font:700 26px var(--f-titre);margin-bottom:4px}
.depot-photo.plein{border-style:solid;border-color:var(--marine)}
.depot-photo.plein .depot-vide{display:none}
.depot-photo img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.lien-retirer{all:unset;cursor:pointer;color:var(--rouge-2);font-weight:600;font-size:15px;margin-top:8px;text-decoration:underline;text-underline-offset:3px}
.compteur{align-self:flex-end;color:var(--brume);font-size:13px}
.erreur-form{margin:18px 0 0;padding:12px 14px;border-radius:10px;background:#F9E0E4;color:var(--rouge-2);font-weight:600}
.recap-annonce #apercu-annonce{margin:6px 0 4px}
.recap-annonce .annonce.apercu{box-shadow:0 18px 40px -20px rgba(0,0,0,.6)}
.fiche-annonce{border:0;padding:0;border-radius:20px;width:min(960px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;background:var(--blanc);color:var(--encre);box-shadow:0 30px 80px -20px rgba(17,27,63,.5)}
.fiche-annonce::backdrop{background:rgba(17,27,63,.55);backdrop-filter:blur(3px)}
@media (prefers-reduced-motion:no-preference){.fiche-annonce[open]{animation:fiche-entre .35s cubic-bezier(.2,.8,.2,1)}@keyframes fiche-entre{from{opacity:0;transform:translateY(16px) scale(.98)}}}
#fiche-contenu{position:relative}
.fiche-fermer{position:absolute;right:14px;top:14px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--encre);font-size:28px;line-height:1;cursor:pointer;box-shadow:0 4px 14px -6px rgba(17,27,63,.5)}
.fiche-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:760px){.fiche-grille{grid-template-columns:minmax(0,1fr)}}
.fiche-media{aspect-ratio:1;background:var(--glace)}
.fiche-media img{width:100%;height:100%;object-fit:cover}
.fiche-infos{padding:28px 28px 24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.fiche-infos h2{margin:0;font-family:var(--f-titre);font-size:32px;line-height:1.05;color:var(--encre)}
.fiche-prix{margin:0;font-family:var(--f-titre);font-weight:800;font-size:40px;line-height:1;color:var(--marine)}
.fiche-prix.don{color:var(--rouge)}
.fiche-puces{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fiche-puces li{background:var(--glace);color:var(--marine);border-radius:999px;padding:3px 12px;font-weight:600;font-size:14.5px}
.fiche-texte{margin:0;white-space:pre-line}
.fiche-contact{border-top:1px solid var(--ligne);margin-top:8px;padding-top:16px;display:flex;flex-direction:column;gap:12px}
.fiche-contact h3{margin:0;font-family:var(--f-titre);font-size:22px}
.fiche-contact .btn{align-self:flex-start}
.fiche-contact textarea{min-height:90px}
.fiche-note{margin:0;font-size:14px;color:var(--brume)}
.fiche-signaler summary{cursor:pointer;color:var(--brume);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.fiche-signaler form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px;font-size:15px}
.fiche-signaler select{font:inherit;padding:8px 10px;border:1.5px solid var(--ligne);border-radius:10px;max-width:100%}
.gestion{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:center;background:var(--blanc);border:2px solid var(--marine);border-radius:var(--r);padding:22px;margin-bottom:36px}
@media (max-width:700px){.gestion{grid-template-columns:minmax(0,1fr)}.gestion-carte{max-width:260px}}
.gestion-texte h2{margin:4px 0 10px;font-family:var(--f-titre);font-size:30px;color:var(--marine)}
.gestion-texte p{margin:0 0 10px}
.gestion-boutons{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
@media (min-width:761px){.fiche-media{aspect-ratio:auto;min-height:100%;position:relative}.fiche-media > *{position:absolute;inset:0;width:100%;height:100%}}
@media (max-width:700px){
  .annonces-barre .filtres{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex-basis:100%;margin-inline:calc(-1 * var(--gouttiere)) calc(-1 * var(--gouttiere-d));padding-inline:var(--gouttiere) var(--gouttiere-d);padding-bottom:2px}
  .annonces-barre .filtres::-webkit-scrollbar{display:none}
  .filtre{flex:none}
  .annonces-actions{width:100%;justify-content:space-between}
}
@media (max-width:560px){
  .annonces-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .annonce-corps{padding:10px 12px 12px;gap:3px}
  .annonce-corps h3{font-size:17px}
  .annonce-cat{font-size:11.5px;letter-spacing:.06em}
  .annonce-prix{font-size:17px;left:8px;bottom:8px;padding:6px 9px 5px;border-radius:8px}
  .annonce-meta span{font-size:12px;padding:1px 8px}
  .annonce-qui{font-size:12.5px}
  .annonce-vendu{font-size:22px}
  .annonces-actions .btn{padding:10px 16px;font-size:16px}
}

/* ---------- Page Devenir partenaire (sans formules ni prix) ---------- */
.soutien{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.soutien-texte p{margin:0 0 16px}.soutien-texte .chapo{margin:12px 0 18px}
.soutien-points{margin:0;grid-template-columns:minmax(0,1fr)}
@media (max-width:960px){.soutien{grid-template-columns:minmax(0,1fr);gap:28px}}
.pistes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px}
.piste{background:var(--blanc);border:1px solid var(--ligne);border-radius:20px;padding:26px 24px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:transform .3s,box-shadow .3s}
.piste:hover{transform:translateY(-3px);box-shadow:var(--ombre)}
.piste h3{font-family:var(--f-titre);font-size:22px;font-weight:700;color:var(--encre);margin:6px 0 0;line-height:1.15}
.piste p{margin:0;color:var(--brume);font-size:16px;line-height:1.5}
.piste-icone{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--rouge) 10%,#fff);color:var(--rouge)}
.piste-icone svg{width:26px;height:26px}
.piste-large{grid-column:1/-1;flex-direction:row;align-items:center;gap:20px;background:color-mix(in srgb,var(--glace) 45%,#fff)}
.piste-large h3{margin:0 0 4px}
.piste a{color:var(--rouge);font-weight:600}
@media (max-width:560px){.piste-large{flex-direction:column;align-items:flex-start}}
.logos-merci{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px}
.logos-merci li{background:var(--blanc);border:1px solid var(--ligne);border-radius:16px;padding:14px 22px;display:grid;place-items:center;height:96px;min-width:150px}
.logos-merci img{max-height:66px;max-width:180px;width:auto;height:auto;object-fit:contain}
.cases-interets{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px 18px}
.cases-interets legend{font-weight:600;color:var(--encre);margin-bottom:10px;padding:0;font-size:15px}
@media (prefers-reduced-motion:reduce){.piste,.piste:hover{transition:none;transform:none}}

/* ---------- Page contact ---------- */
.contact-raccourcis{display:grid;gap:2px!important}
.contact-raccourcis li{display:block}
.contact-raccourcis a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;color:#fff;font-weight:600;text-decoration:none}
.contact-raccourcis a:hover{color:var(--ciel)}
.contact-raccourcis svg{width:18px;height:18px;flex:none}
.pied .btn-clair{font-size:15px;padding:10px 18px}
/* Agenda : renvoi vers le calendrier des courses */
.renvoi-courses{display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:14px 18px;border-radius:14px;background:var(--glace);border-left:4px solid var(--marine);color:var(--encre);text-decoration:none;line-height:1.45}
.renvoi-courses:hover{background:#d6e1f0}
.renvoi-courses .renvoi-icone{font-size:22px;flex:none}
.renvoi-courses span{flex:1}
.renvoi-courses svg{width:18px;height:18px;flex:none;color:var(--marine);transition:transform .25s}
.renvoi-courses:hover svg{transform:translateX(3px)}

/* Menu « Nous soutenir » (partenaire, lot, bénévole) */
.nav-groupe{position:relative}
.nav-groupe summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px;position:relative;font-family:var(--f-titre);font-weight:600;font-size:16.5px;color:var(--encre);padding:10px 11px;border-radius:8px;white-space:nowrap;user-select:none}
.nav-groupe summary::-webkit-details-marker{display:none}
.nav-groupe summary svg{width:16px;height:16px;transition:transform .25s}
.nav-groupe[open] summary svg{transform:rotate(180deg)}
.nav-groupe summary::after{content:"";position:absolute;left:11px;right:27px;bottom:5px;height:2px;background:var(--rouge);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nav-groupe summary:hover::after,.nav-groupe summary.actif::after,.nav-groupe[open] summary::after{transform:scaleX(1)}
.nav-groupe summary.actif{color:var(--marine)}
.nav-groupe summary:focus-visible{outline:2px solid var(--marine);outline-offset:2px}
.sous-menu{position:absolute;top:calc(100% + 8px);right:-60px;width:330px;background:var(--blanc);border:1px solid var(--ligne);border-radius:14px;box-shadow:0 24px 48px -20px rgba(17,27,63,.4);padding:8px;display:grid;gap:2px;z-index:60;animation:deroule .22s cubic-bezier(.2,.8,.2,1)}
.nav .sous-menu a{display:grid;gap:2px;white-space:normal;padding:11px 14px;border-radius:10px}
.nav .sous-menu a::after{display:none}
.nav .sous-menu a b{font-weight:700;font-size:17px;color:var(--marine)}
.nav .sous-menu a small{font-family:var(--f-texte,inherit);font-weight:400;font-size:14px;color:var(--brume);line-height:1.35}
.nav .sous-menu a:hover,.nav .sous-menu a[aria-current="page"]{background:var(--glace)}
@media (max-width:1320px){.nav-groupe summary{padding:10px 8px;font-size:16px}}
.menu-panneau .menu-titre{margin:14px 4px 0;font-family:var(--f-titre);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--rouge)}
.menu-panneau a.menu-sous{padding-left:18px}
.champ .aide{font-size:14px;color:var(--brume);line-height:1.4}