/* ==========================================================================
   Pied Main — feuille de style du site
   --------------------------------------------------------------------------
    0. Polices (hébergées sur le site, dossier fonts/)
    1. Variables
    2. Base
    3. En-tête (barre du haut, logos, menu, menu mobile)
    4. Pied de page
    5. Composants communs (sections, titres, boutons, étiquettes, filtres…)
    6. Bandeaux photo (accueil et pages intérieures)
    7. Accueil
    8. Le club (et Les copains, Technique, Matériel)
    9. Agenda
   10. Sorties & actus
   11. Page d'une sortie
   12. Adhésion
   13. Shop et panier
   14. Pages en construction
   15. Adaptations écrans moyens et mobiles
   ========================================================================== */


/* 0. Polices (hébergées sur le site : aucune requête vers Google, licence OFL dans fonts/)
   ========================================================================== */
@font-face{font-family:'Archivo';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/archivo-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/archivo-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/archivo-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:900;font-style:normal;font-display:swap;src:url(../fonts/archivo-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format('woff2')}


/* 1. Variables
   ========================================================================== */
:root{
  /* Espace réservé sous le grand logo (bas du logo + zone de fondu), voir js/pma.js */
  --sous-logo:240px;
  /* Couleurs */
  --ink:#141414;        /* texte, fonds sombres */
  --paper:#f3f0ea;      /* fond de page */
  --rock:#2a2826;       /* sections sombres */
  --muted:#8a847c;      /* texte secondaire */
  --line:#d8d2c8;       /* filets, bordures */
  --accent:#e2572b;     /* orange du club */
  --accent-d:#c4441c;   /* orange au survol */
  --ok:#2f7d4f;         /* validation */
  /* Typographie */
  --display:'Archivo',system-ui,sans-serif;
  --text:'Inter',system-ui,sans-serif;
  /* Mise en page */
  --gut:clamp(16px,4vw,48px);  /* marge latérale */
  --radius:6px;
}


/* 2. Base
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}   /* pas de surbrillance bleue au toucher (mobile) */
body{font-family:var(--text);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus:not(:focus-visible){outline:none}                       /* pas de contour au clic… */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}   /* …mais toujours au clavier (accessibilité) */

/* Icônes du sprite (inc/sprite.svg) */
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}


/* 3. En-tête
   ========================================================================== */
.top{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:12px var(--gut);color:#fff;transition:background .3s,color .3s,box-shadow .3s}
.top.solid{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.08)}   /* mini-en-tête */
body.no-over{padding-top:84px}                                                                 /* page sans photo en haut */

/* Logos : deux logos superposés, chacun apparaît / disparaît en fondu, sans changement de taille.
   - grand logo rond : visible sur la photo, s'efface juste avant de toucher les textes
     (opacité calculée par js/pma.js dans la variable --logo-big)
   - petit logo sans texte : visible sur le mini-en-tête (classe .solid)                       */
.logo{display:flex;align-items:center}
.top .logo{position:relative;width:84px;height:84px}
.top.solid .logo{width:60px;height:60px}
.top .logo svg.lg{position:absolute;left:0;top:50%;transform:translateY(-50%);fill:currentColor;transition:opacity .35s ease}
.top .logo svg.lg-big{width:168px;height:168px;top:0;transform:none;opacity:var(--logo-big,1);transition:none;pointer-events:none}   /* déborde sur la photo sans agrandir l'en-tête ; ne capte pas les clics (le lien reste la zone du logo) */
.top .logo svg.lg-small{width:60px;height:60px;opacity:0}
.top.solid .logo svg.lg-big{opacity:0;visibility:hidden}
.top.solid .logo svg.lg-small{opacity:1}

/* Menu */
.top > .logo{margin-right:auto}   /* le menu et le panier se calent à droite */
.menu{display:flex;gap:4px}
.menu a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;font-weight:500;font-size:14px;transition:background .15s,color .15s}
.menu a:hover{background:rgba(255,255,255,.14);color:var(--accent)}
.top.solid .menu a:hover{background:rgba(0,0,0,.06)}
.menu a.on{box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}

/* Menu mobile plein écran */
.burger{display:none;background:none;border:0;color:inherit;padding:6px;cursor:pointer}
.burger svg.i{width:28px;height:28px}
.drawer{position:fixed;inset:0;z-index:60;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:var(--gut)}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(34px,10vw,56px);line-height:1.05;letter-spacing:-.03em;padding:4px 0}
.drawer nav a.on{color:var(--accent)}
.drawer-x{position:absolute;top:20px;right:var(--gut);background:none;border:0;color:#fff;cursor:pointer}
.drawer-x svg.i{width:30px;height:30px}


/* 4. Pied de page
   ========================================================================== */
.foot{padding:48px var(--gut);background:var(--ink);color:#bdb6ad;display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;font-size:14px;line-height:1.8}
.foot .logo{color:#fff;margin-bottom:12px}
.foot .logo svg.lg{width:120px;height:120px;fill:currentColor}
.foot h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.foot-docs{margin-top:12px}
.foot-docs a{text-decoration:underline;text-underline-offset:3px}
.foot-docs a:hover{color:#fff}


/* 5. Composants communs
   ========================================================================== */

/* Sections */
section.s{padding:clamp(48px,8vw,100px) var(--gut)}
section.s.s-tight{padding-top:0}                          /* section qui suit directement une autre */
.dark{background:var(--rock);color:#fff}

/* Titres */
.s-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.s-head h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,48px);letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.rule-title{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(22px,3vw,32px);letter-spacing:-.02em;
  margin:40px 0 4px;padding-bottom:10px;border-bottom:2px solid var(--ink)}   /* titre souligné (mois de l'agenda, photos…) */
.rule-title:first-child{margin-top:0}
.eyebrow{color:var(--muted);font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.more{font-weight:600;font-size:14px;border-bottom:2px solid var(--accent);padding-bottom:2px}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:600;font-size:15px;border:0;cursor:pointer;transition:background .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn.o{background:var(--accent);color:#fff}
.btn.o:hover{background:var(--accent-d)}
.btn.k{background:var(--ink);color:#fff}
.btn.k:hover{background:#000}
.btn.w{background:#fff;color:var(--ink)}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.lnk{background:var(--paper);border:0;border-radius:999px;padding:6px 14px;font-weight:600;font-size:14px;cursor:pointer}   /* petit bouton discret */
.lnk:hover{background:var(--line)}

/* Étiquettes de type */
.tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:4px;background:var(--ink);color:#fff;white-space:nowrap}
.tag.o{background:var(--accent)}
.tag.k{background:#6b645c}
.tag.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}

/* Filtres (pastilles) — voir js/filtres.js */
.filter-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:500;background:#fff;border:1px solid var(--line);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Sous-menu de rubrique (onglets sous le bandeau) */
.subnav{display:flex;gap:4px;overflow-x:auto;padding:0 var(--gut);background:#fff;border-bottom:1px solid var(--line)}
.subnav a{padding:16px 14px;font-size:14px;font-weight:600;white-space:nowrap;color:var(--muted);box-shadow:inset 0 -2px 0 transparent;transition:color .15s,box-shadow .15s}
.subnav a:hover{color:var(--ink)}
.subnav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.subnav a svg.i{width:14px;height:14px;margin-left:4px;vertical-align:-2px;color:var(--accent)}

/* Photo en fond (vignettes) */
.ph{position:relative;background:#3a3531 center/cover no-repeat}

/* Encadré */
.callout{background:#fff;border-left:3px solid var(--accent);padding:14px 16px;border-radius:0 var(--radius) var(--radius) 0;font-size:14px;margin:16px 0}

/* Jauge de places */
.places{font-weight:600;color:var(--ink)}
.places.full{color:var(--accent)}
.bar{display:block;width:90px;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink)}
.places.full + .bar i{background:var(--accent)}

/* Cartes d'article (accueil, sorties & actus) */
.post .ph{aspect-ratio:4/3;border-radius:4px;margin-bottom:14px;overflow:hidden;transition:filter .3s}
.post:hover .ph{filter:brightness(1.1)}
.post .meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.dark .post .meta{color:#b9b1a7}
.post h3{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.15}
.post p.chapo{font-size:15px;color:var(--muted);margin-top:8px;max-width:60ch}

/* Texte long (articles) */
.prose{font-size:17px;line-height:1.75;max-width:68ch}
.prose p{margin-bottom:1.1em}
.prose h2{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;margin:1.6em 0 .5em}
.prose h3{font-size:17px;font-weight:600;margin:1.4em 0 .4em}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose blockquote{border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin:1.4em 0;font-family:var(--display);font-weight:600;font-size:22px;line-height:1.35}
.prose h2{clear:both}
/* Images dans le texte : largeur du texte, ou « petite » (à droite du texte ; pleine largeur sur mobile) */
.prose .pimg{margin:1.6em 0}
.prose .pimg img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.prose .pimg figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.prose .pimg.petite{float:right;width:min(42%,280px);margin:.3em 0 1em 24px}
@media (max-width:600px){ .prose .pimg.petite{float:none;width:auto;margin:1.4em 0} }


/* 6. Bandeaux photo
   ========================================================================== */
.trame{position:absolute;inset:0;z-index:1;pointer-events:none}

/* Accueil : diaporama plein écran avec trame */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#1b1918}
.hero .trame{background:
    radial-gradient(circle,rgba(0,0,0,.2) 0 .9px,transparent 1.3px) 0 0/3px 3px,
    linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.78) 100%)}
.slides{position:absolute;inset:0;z-index:0}
.slides div{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transform:scale(1.08);transition:opacity 1.6s ease,transform 7.5s linear}
.slides div.on{opacity:1;transform:scale(1)}
.dots{position:absolute;z-index:3;right:var(--gut);bottom:56px;display:flex;gap:8px}
.dots button{width:26px;height:3px;border:0;background:rgba(255,255,255,.35);cursor:pointer;padding:0;transition:background .3s,width .3s}
.dots button.on{background:var(--accent);width:44px}
.scroll{z-index:3;position:absolute;bottom:22px;right:var(--gut);font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}

/* Pages intérieures : photo fixe, simple dégradé pour la lisibilité du titre (pas de trame) */
.phero{position:relative;min-height:clamp(340px,52vh,520px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#1b1918 center/cover no-repeat}
.phero .trame{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.7) 100%)}
.phero .in{position:relative;z-index:2;width:100%;padding:var(--sous-logo) var(--gut) clamp(28px,5vh,48px)}
.phero h1{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(44px,9vw,120px);line-height:.9;letter-spacing:-.04em}
.phero p.k{font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;margin-bottom:14px}
.phero p.lead{max-width:56ch;font-size:17px;opacity:.9;margin-top:14px}
.phero-article{min-height:clamp(380px,62vh,620px)}
.phero-article h1{font-size:clamp(36px,6.5vw,88px);max-width:18ch}
.crumb{display:inline-flex;align-items:center;gap:6px;font-size:13px;opacity:.85;margin-bottom:16px}
.crumb:hover{opacity:1}
.crumb svg.i{width:16px;height:16px}


/* 7. Accueil
   ========================================================================== */
/* Rubriques en gros titres sur le diaporama */
.hero-in{position:relative;z-index:2;width:100%;padding:var(--sous-logo) var(--gut) clamp(28px,6vh,64px)}
.kicker{font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;margin-bottom:18px}
.cats{list-style:none;display:flex;flex-direction:column}
.cats a{display:flex;align-items:baseline;gap:18px;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,8.2vw,112px);line-height:.92;letter-spacing:-.035em;padding:4px 0;transition:color .2s,transform .2s}
.cats a small{font-family:var(--text);font-weight:500;font-size:13px;letter-spacing:.08em;opacity:0;transform:translateX(-8px);transition:.25s}
.cats a:hover{color:var(--accent);transform:translateX(10px)}
.cats a:hover small{opacity:.9;transform:none}

/* Prochains rendez-vous */
.events{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.ev{background:var(--paper);padding:24px;display:flex;flex-direction:column;gap:10px;min-height:200px;transition:background .2s}
.ev:hover{background:#fff}
.ev .d{font-family:var(--display);font-weight:900;font-size:44px;line-height:1;letter-spacing:-.03em}
.ev .d span{font-size:15px;font-weight:600;letter-spacing:.06em;margin-left:6px;color:var(--muted)}
.ev .tag{align-self:flex-start}
.ev h3{font-size:18px;font-weight:600}
.ev p{font-size:14px;color:var(--muted);margin-top:auto}

/* Derniers articles : le premier en grand */
.posts{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.posts .post:first-child .ph{aspect-ratio:16/10}
.posts .post:first-child h3{font-size:30px}

/* Cartes adhésion & shop */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{border-radius:var(--radius);padding:clamp(24px,4vw,48px);min-height:340px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;position:relative;overflow:hidden}
.card h3{font-family:var(--display);font-weight:900;font-size:clamp(30px,4vw,52px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.card p{max-width:34ch;line-height:1.55;margin-top:12px}
.card.join{background:var(--accent);color:#fff}
.card.shop{background:#fff}
.tee{position:absolute;right:-20px;bottom:-30px;width:240px;height:240px;fill:var(--ink)}


/* 8. Le club
   ========================================================================== */
.cl-intro{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,6vw,96px);align-items:start}
.cl-big{font-family:var(--display);font-weight:900;font-size:clamp(32px,4.4vw,60px);line-height:1;letter-spacing:-.035em;text-transform:uppercase}

/* Objectifs */
.cl-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,48px)}
.cl-3 > div{border-top:2px solid rgba(255,255,255,.25);padding-top:20px}
.cl-n{font-family:var(--display);font-weight:900;font-size:15px;color:var(--accent);letter-spacing:.06em}
.cl-3 h3{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;margin:8px 0 10px}
.cl-3 p{color:#cfc8bf;line-height:1.6}

/* Lieux de pratique */
.cl-lead{font-size:18px;max-width:60ch;margin:-8px 0 32px;color:var(--muted)}
.cl-lieux{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cl-lieux .ph{aspect-ratio:4/3;border-radius:4px;margin-bottom:16px}
.cl-lieux h3{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;margin:10px 0 6px}
.cl-lieux p{color:var(--muted);font-size:15px}

/* Escalade / Slackline */
.cl-disc{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cl-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3.5vw,44px)}
.cl-card h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(44px,5.5vw,72px);line-height:.9;letter-spacing:-.04em;margin:6px 0 20px}
.cl-card > p{font-size:16px;line-height:1.65;margin-bottom:10px}
.cl-card h3{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:28px 0 12px}
.cl-card .callout{margin-top:28px}
.cl-list{list-style:none;display:grid;gap:10px}
.cl-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.cl-list svg.i{width:18px;height:18px;color:var(--accent);margin-top:2px}
.cl-note{font-size:14px;color:var(--muted);margin-top:12px}

/* Conclusion */
.cl-end{text-align:center;padding-top:clamp(40px,6vw,80px)}
.cl-end blockquote{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.2vw,42px);line-height:1.15;letter-spacing:-.02em;max-width:30ch;margin:0 auto}
.cl-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}


/* 8 bis. Les copains */
.cop-cat + .cop-cat{margin-top:56px}
.cop-intro{color:var(--muted);margin:10px 0 20px}
.cop-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.cop{position:relative;display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 44px 18px 18px;transition:border-color .15s}
a.cop:hover{border-color:var(--ink)}
.cop strong{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.01em}
.cop span{font-size:14px;color:var(--muted)}
.cop small{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);margin-top:6px}
.cop small svg.i{width:14px;height:14px}
.cop-go{position:absolute;right:16px;top:20px;color:var(--accent)}

/* 8 ter. Technique (reprend les rubriques et cartes des copains) */
.tech-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:20px}
.tech-video{margin:0}
.tech-video iframe,.video-clic{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius);background:var(--ink)}
.video-clic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;color:#fff;text-align:center}
.video-play{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--accent);transition:transform .15s}
.video-play svg.i{width:28px;height:28px;fill:#fff;stroke:none;margin-left:3px}
.video-clic:hover .video-play{transform:scale(1.08)}
.video-txt{display:flex;flex-direction:column;gap:4px;font-weight:600}
.video-txt small{font-size:12px;font-weight:400;opacity:.7;max-width:36ch}
.tech-video figcaption{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.tech-video figcaption strong{font-family:var(--display);font-weight:800;font-size:16px}
.tech-video figcaption span{font-size:13px;color:var(--muted)}

/* 8 quater. Matériel : listes par pratique, boutiques */
.kits{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:12px}
.kit{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.kit h3{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em}
.kit-pour{font-size:14px;color:var(--muted);margin:4px 0 14px}
.kit ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.kit li{position:relative;padding-left:18px;font-size:14px}
.kit li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.kit li.option::before{background:none;border:1.5px solid var(--accent)}
.kit li small{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kit-budget{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;font-weight:600}
.kit-longe{margin-top:20px}
.kit-longe a{display:inline-block;margin-top:6px;font-weight:600;text-decoration:underline}
.cop-tel{font-size:14px;font-weight:600;margin-top:6px;text-decoration:underline}


/* 9. Agenda
   ========================================================================== */
/* Bascule liste / mois */
.ag-views{display:flex;border:1px solid var(--line);border-radius:999px;background:#fff;padding:3px}
.ag-views button{display:flex;align-items:center;gap:6px;border:0;background:none;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:500;cursor:pointer}
.ag-views button.on{background:var(--ink);color:#fff}

/* Vue liste */
.ag-row{display:grid;grid-template-columns:110px 1fr auto;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);transition:background .15s,padding .15s}
a.ag-row:hover{background:#fff;padding-left:12px;padding-right:12px}
.ag-date{font-family:var(--display);line-height:1}
.ag-date b{font-size:38px;font-weight:900;letter-spacing:-.03em}
.ag-date small{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.ag-main h3{font-size:18px;font-weight:600;margin-top:6px}
.ag-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-top:4px}
.ag-meta span{display:inline-flex;align-items:center;gap:5px}
.ag-meta svg.i{width:15px;height:15px}
.ag-side{text-align:right;font-size:13px;color:var(--muted);display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ag-empty{padding:40px 0;color:var(--muted)}

/* Vue calendrier */
.cal-head{margin-bottom:16px}
.cal-head h2{font-size:clamp(22px,3vw,32px)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);background:#fff}
.cal .dow{padding:10px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.cal .day{min-height:110px;padding:8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.cal .day.off{background:var(--paper);color:#bbb}
.cal .day .n{font-family:var(--display);font-weight:800;font-size:15px}
.cal .day.today .n{color:var(--accent)}
.cal .pill{display:block;font-size:12px;line-height:1.25;padding:4px 6px;border-radius:4px;background:var(--paper);border-left:3px solid var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal .pill.o{border-left-color:var(--accent)}
.cal .pill.k{border-left-color:#6b645c}
.cal .pill:hover{background:#ebe6dd}


/* 10. Sorties & actus
   ========================================================================== */
/* Article à la une */
.feed-top{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(20px,4vw,56px);align-items:center;margin-bottom:56px}
.feed-top .ph{aspect-ratio:16/11}
.feed-top h2{font-family:var(--display);font-weight:900;font-size:clamp(30px,4vw,52px);line-height:1;letter-spacing:-.03em;margin:12px 0 14px}
.feed-top .meta{margin-top:16px}

/* Grille des autres articles */
.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px}

/* Pagination */
.pager{display:flex;justify-content:center;gap:6px;margin-top:56px}
.pager a{min-width:42px;height:42px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:14px}
.pager a.on{background:var(--ink);color:#fff;border-color:var(--ink)}


/* 11. Page d'une sortie
   ========================================================================== */
.art{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,6vw,80px);align-items:start}
.byline{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--line)}

/* Photos */
.gal-title{margin-top:56px}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.gal a{aspect-ratio:1;border-radius:3px;overflow:hidden;position:relative}
.gal a:first-child{grid-column:span 2;grid-row:span 2}
.gal a .ph{position:absolute;inset:0;transition:transform .4s}
.gal a:hover .ph{transform:scale(1.05)}
.gal a.more-ph{display:grid;place-items:center;background:var(--ink);color:#fff;font-family:var(--display);font-weight:800;font-size:22px}

/* Infos pratiques */
.info{position:sticky;top:100px;background:#fff;border-radius:var(--radius);padding:24px;border:1px solid var(--line)}
.info h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:18px;margin-bottom:16px}
.info dl{display:grid;grid-template-columns:24px 1fr;gap:12px 10px;margin-bottom:22px;font-size:15px}
.info dt{color:var(--muted);padding-top:1px}
.info dd b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.info .bar{width:100%;margin-top:6px}
.info .btn{width:100%}
.info .note{font-size:13px;color:var(--muted);margin-top:10px;text-align:center}


/* 12. Adhésion
   ========================================================================== */
/* 12a. Choix de la fédération */
.fed-intro{max-width:70ch;margin-bottom:36px}
#choix-fed,#parcours{scroll-margin-top:100px}   /* défilement sous le mini-en-tête */
.fed-intro p{color:var(--muted);margin-top:10px}
.fed-intro .lead2{font-size:clamp(17px,1.6vw,20px);color:var(--ink);line-height:1.55;margin-top:0}
.feds{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fedcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column}
.fedcard .fc-k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fedcard h2{font-family:var(--display);font-weight:900;font-size:clamp(56px,7vw,92px);line-height:.9;letter-spacing:-.04em;margin:8px 0 6px}
.fedcard .fc-acc{font-size:18px;font-weight:600;margin-bottom:22px}
.fedcard ul{list-style:none;display:grid;gap:10px;margin-bottom:22px}
.fedcard li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.fedcard li svg.i{width:18px;height:18px;color:var(--accent);margin-top:2px}
.fedcard .fc-pour{font-size:14px;color:var(--muted);padding:14px 16px;background:var(--paper);border-radius:var(--radius);margin-bottom:24px}
.fedcard .fc-pour strong{color:var(--ink)}
.fc-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line)}
.fc-prix{font-family:var(--display);font-weight:900;font-size:40px;line-height:1;letter-spacing:-.02em}
.fc-prix small{display:block;font-family:var(--text);font-weight:500;font-size:13px;color:var(--muted);letter-spacing:0}
.fc-prix small:last-child{display:inline}

/* 12a bis. Questionnaire de santé */
#sante{scroll-margin-top:100px}
.sante-bloc{max-width:820px}
.sante-bloc > h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin-bottom:6px}
.sante-bloc > p.sub{color:var(--muted);margin-bottom:12px}
.sante-bloc h3{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:28px 0 12px}
.sante-bloc .grid2{margin-bottom:20px}
.qs-q{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:0;border-bottom:1px solid var(--line);padding:12px 0}
.qs-q legend{float:left;flex:1 1 320px;font-size:15px;padding-right:12px}
.qs-q.err legend{color:var(--accent)}
.attest{background:#fff;border-left:3px solid var(--accent);padding:16px 20px;margin:16px 0 24px;font-size:15px;line-height:1.6}
.sign{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.sign-code{flex:1;max-width:320px}
.sign .hint,.sante-bloc > .hint{font-size:13px;color:var(--muted);margin-top:8px}

/* 12b. Parcours : mise en page, fédération choisie, étapes */
.ins{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,5vw,64px);align-items:start}
.fed-sel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 18px;margin-bottom:28px;font-size:15px;width:fit-content}
.fed-sel strong{font-family:var(--display);font-weight:900;font-size:17px}
.steps{display:flex;list-style:none;margin-bottom:36px;counter-reset:st}
.steps li{flex:1;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--muted);padding:0 0 14px;border-bottom:3px solid var(--line);counter-increment:st}
.steps li::before{content:counter(st);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--line);color:var(--ink);font-weight:700;font-size:13px;flex:none}
.steps li.on{color:var(--ink);border-color:var(--accent)}
.steps li.on::before{background:var(--accent);color:#fff}
.steps li.done{color:var(--ink);border-color:var(--ink)}
.steps li.done::before{content:"✓";background:var(--ink);color:#fff}
.pane{display:none}
.pane.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pane h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin-bottom:6px}
.pane > p.sub{color:var(--muted);margin-bottom:24px}
.pane h3{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:28px 0 12px}
.nav-steps{display:flex;justify-content:space-between;gap:12px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}

/* 12c. Cartes de choix (formule, assurance) */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.choice{position:relative;display:block;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:20px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.choice:hover{border-color:#a9a196}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.choice strong{display:block;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em}
.choice span.d{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.choice .price{font-family:var(--display);font-weight:900;font-size:30px;margin-top:10px;letter-spacing:-.02em}
.choice .price.sm{font-size:22px}
.choice .price small{font-size:14px;font-weight:600;color:var(--muted)}
.choice .ck{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center}
.choice .ck svg.i{width:14px;height:14px;opacity:0}
.choice:has(input:checked) .ck{background:var(--ink);border-color:var(--ink);color:#fff}
.choice:has(input:checked) .ck svg.i{opacity:1}
.choice .detail{display:block;font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.choice .note{display:block;font-size:12.5px;font-weight:600;color:var(--accent);margin-top:8px}
.choice.off{opacity:.55;cursor:not-allowed}
.offre-validite{font-size:14px;font-weight:600;margin-bottom:4px}

/* 12d. Champs de formulaire et cases à cocher */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:14px;font-weight:600}
.field input,.field select,.field textarea{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:12px 14px;font-size:16px;transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field .hint{font-size:13px;color:var(--muted)}
.field .msg{font-size:13px;color:var(--accent);display:none}
.field.err input,.field.err select{border-color:var(--accent)}
.field.err .msg{display:block}
.req{font-style:normal;color:var(--accent)}
.aide{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;
  font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;vertical-align:1px;margin-left:4px;transition:color .15s}   /* « ? » vers une explication */
.aide:hover{color:var(--accent)}                 /* astérisque « obligatoire » */
.check{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);cursor:pointer;font-size:15px;margin-bottom:10px}
.check input{width:20px;height:20px;accent-color:var(--ink);margin-top:2px;flex:none}
.check small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.check small a{text-decoration:underline}
.opt-detail{margin:-2px 0 10px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 10px}
.oui-non{border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;padding:14px 16px;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.oui-non legend{float:left;width:100%;font-size:15px;font-weight:600;margin-bottom:4px}
.oui-non legend small{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:2px}
.oui-non .msg{display:none;font-size:13px;color:var(--accent);margin-left:8px}
.oui-non.err{border-color:var(--accent)}
.oui-non.err .msg{display:inline}
.info-rgpd{font-size:13px;color:var(--muted);margin:4px 0 10px}
.promo{display:flex;gap:10px;align-items:flex-end}
.promo .field{flex:1;min-width:0;max-width:320px}
.promo-msg{font-size:14px;color:var(--ok);margin-top:10px}
.check.don{flex-direction:column;gap:12px;cursor:default}
.check.don .field input{width:180px}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}                               /* précision sous une option (taille, certificat) */

/* 12e. Récapitulatif, paiement, confirmation */
.recap{position:sticky;top:100px;background:var(--ink);color:#fff;border-radius:var(--radius);padding:24px}
.recap h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:18px;margin-bottom:16px}
.recap ul{list-style:none;font-size:14px}
.recap li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.recap li span:first-child{color:#bdb6ad}
.recap .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px}
.recap .tot b{font-family:var(--display);font-weight:900;font-size:36px;letter-spacing:-.02em}
.recap .secure{display:flex;gap:8px;align-items:center;font-size:12px;color:#bdb6ad;margin-top:16px}
.recap .secure svg.i{width:16px;height:16px}
.sum{background:#fff;border-radius:var(--radius);border:1px solid var(--line);padding:4px 20px;margin-bottom:16px}
.sum div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.sum div:last-child{border:0}
.sum span:first-child{color:var(--muted);flex:none}
.sum strong{min-width:0;text-align:right;overflow-wrap:anywhere}   /* longues adresses email : retour à la ligne au lieu d'élargir la page */
.ha{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);margin-top:14px}
.ha svg.i{flex-shrink:0}
.info-tshirt{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:14px 16px;font-size:14px;color:var(--muted);margin-bottom:12px}
.info-tshirt svg.i{flex-shrink:0;color:var(--accent);margin-top:2px}
.info-tshirt strong{color:var(--ink)}


/* 13. Shop et panier
   ========================================================================== */
/* Bouton panier de l'en-tête (pastille = nombre d'articles) */
.panier-btn{position:relative;display:flex;padding:8px;margin-left:8px}
.panier-btn svg.i{width:24px;height:24px}
.panier-btn b{position:absolute;top:0;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;line-height:18px;text-align:center}
.lien{font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Vêtement : photo du coloris + logo imprimé superposé (position en % : voir pma_vetement()) */
.vet{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#fff;border-radius:var(--radius)}
.vet-photo{width:100%;height:100%;object-fit:cover}
.vet-logo{position:absolute;left:var(--x);top:var(--y);width:var(--l);transform:translate(-50%,-50%);pointer-events:none}

/* Catalogue */
.shop-info{max-width:none;margin:0 0 32px}
.shop-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:28px 20px}
.shop-carte{display:flex;flex-direction:column;gap:4px}
.shop-ph{display:block;aspect-ratio:1;background:#fff;border-radius:var(--radius);overflow:hidden;margin-bottom:10px}
.shop-ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.shop-carte:hover .shop-ph img{transform:scale(1.04)}
.shop-nom{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.01em}
.shop-prix{font-size:15px;color:var(--muted)}
.shop-pastilles{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.shop-pastilles i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

/* Fiche produit */
.produit-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.produit-visuel{position:sticky;top:96px}
.faces{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px}
.faces .chip{background:rgba(255,255,255,.92)}
.faces .chip.on{background:var(--ink);color:#fff}
.faces .chip:disabled{opacity:.4;cursor:default}
.produit-choix h1{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(32px,4vw,52px);line-height:.95;letter-spacing:-.03em}
.produit-prix{font-size:22px;font-weight:600;margin:10px 0 6px}
.produit-desc{color:var(--muted);margin-bottom:24px}
.opt{border:0;padding:0;margin:0 0 22px}
.opt legend{font-size:14px;font-weight:600;margin-bottom:10px}
.opt legend span{font-weight:400;color:var(--muted);margin-left:6px}
.pastilles{display:flex;flex-wrap:wrap;gap:8px}
.pastille{position:relative;cursor:pointer}
.pastille input{position:absolute;opacity:0;pointer-events:none}
.pastille i{display:block;width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s}
.pastille:has(input:checked) i{outline-color:var(--ink)}
.pastille:has(input:focus-visible) i{outline-color:var(--accent)}
.produit-ajout{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-top:8px}
.qte{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.qte input{width:84px;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:12px 14px;font-size:16px}
.produit-choix .note,.panier-recap .note{font-size:13px;color:var(--muted)}
.produit-choix .note{margin-top:20px}

/* Message « ajouté au panier » */
.ajoute{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:14px var(--gut);background:#fff;border-bottom:1px solid var(--line);font-weight:600}
.ajoute span{display:flex;align-items:center;gap:8px;margin-right:auto}
.ajoute span svg.i{color:var(--accent)}
.ajoute .btn{padding:10px 18px}
.ajoute.erreur{color:var(--accent)}

/* Panier */
.panier-titre,.legal-titre{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(36px,5vw,64px);letter-spacing:-.03em;margin-bottom:28px}
.panier-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.panier-lignes{display:flex;flex-direction:column;gap:12px}
.ligne{display:grid;grid-template-columns:88px minmax(0,1fr) auto auto auto;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.ligne-txt{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--muted)}
.ligne-txt strong{font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink)}
.ligne-qte{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px}
.ligne-qte button{width:34px;height:34px;border:0;background:none;font-size:18px;cursor:pointer}
.ligne-qte button:disabled{opacity:.3;cursor:default}
.ligne-qte b{min-width:20px;text-align:center}
.ligne-total{min-width:56px;text-align:right}
.ligne-x{display:flex;border:0;background:none;padding:6px;color:var(--muted);cursor:pointer}
.ligne-x:hover{color:var(--ink)}
.panier-ajouts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:8px}
.ligne-adh{grid-template-columns:56px minmax(0,1fr) auto auto}
.ligne-ico{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--paper);color:var(--accent);align-self:start}
.ligne-ico svg.i{width:26px;height:26px}
.ligne-ok{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--ok)}
.ligne-ok svg.i{width:14px;height:14px}
.panier-msg{margin-bottom:24px;max-width:none}
.panier-actions{display:flex;flex-wrap:wrap;gap:12px}
.panier-recap .check{margin-bottom:8px}
.rappel-panier{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:12px var(--gut);background:var(--ink);color:#fff;font-size:14px}
.rappel-panier span{margin-right:auto}
.rappel-panier a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.panier-recap{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.panier-recap h2{display:flex;justify-content:space-between;font-family:var(--display);font-weight:800;font-size:26px}
.panier-recap h3{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin:24px 0 12px}
.panier-recap .btn{width:100%;margin-top:20px}
.panier-recap .note{margin-top:10px}
.panier-vide{max-width:520px;padding:24px 0 40px}
.panier-vide svg.i{width:48px;height:48px;color:var(--muted)}
.panier-vide svg.ok{color:var(--accent)}
.panier-vide h2{font-family:var(--display);font-weight:800;font-size:28px;margin:12px 0 8px}
.panier-vide p{color:var(--muted);margin-bottom:24px}


/* 14. Pages en construction
   ========================================================================== */
.soon{padding:clamp(48px,8vw,100px) var(--gut);max-width:720px}
.soon p{font-size:17px;color:var(--muted);margin:12px 0 28px}


/* Mobile et tablette à l'horizontale : message « tourne ton téléphone » (pas sur ordinateur) */
.paysage{display:none}
@media (orientation:landscape) and (hover:none) and (pointer:coarse){
  .paysage{display:flex;position:fixed;inset:0;z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:18px;
    background:var(--ink);color:#fff;text-align:center;padding:var(--gut)}
  .paysage svg.i{width:64px;height:64px;stroke-width:1.4}
  .paysage p{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:20px;letter-spacing:-.01em}
  body{overflow:hidden}
}


/* 15. Adaptations écrans moyens et mobiles
   ========================================================================== */

/* Tablettes et petits écrans : menu burger (le menu complet toucherait le grand logo) */
@media (max-width:1024px){
  .menu{display:none}
  .burger{display:block}
}

/* Écrans moyens (tablette) */
@media (max-width:980px){
  /* Sortie & adhésion : colonne latérale sous le contenu */
  .art,.ins{grid-template-columns:minmax(0,1fr)}
  .info,.recap{position:static}
  .recap{order:-1}
  /* Sorties & actus */
  .feed{grid-template-columns:1fr 1fr}
}

/* Mobiles */
@media (max-width:860px){
  /* En-tête */
  .top .logo{width:64px;height:64px}
  .top .logo svg.lg-big{width:128px;height:128px}
  .top.solid .logo,
  .top .logo svg.lg-small{width:50px;height:50px}
  body.no-over{padding-top:74px}

  /* Pied de page */
  .foot{grid-template-columns:1fr}

  /* Shop et panier */
  .produit-in,.panier-in{grid-template-columns:minmax(0,1fr)}
  .produit-visuel{position:relative;top:auto}
  .panier-recap{position:static}
  .ligne{grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"ph txt x" "ph qte total"}
  .ligne-ph{grid-area:ph;align-self:start} .ligne-txt{grid-area:txt} .ligne-qte{grid-area:qte;justify-self:start}
  .ligne-total{grid-area:total} .ligne > form:last-child{grid-area:x;justify-self:end;align-self:start}
  .ligne-adh{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"ph txt x" "ph txt total"}
  .ligne-ico{grid-area:ph;width:44px;height:44px}
  .ligne-adh .ligne-total{align-self:end}

  /* Bandeaux */
  :root{--sous-logo:200px}
  .dots,.scroll{display:none}

  /* Accueil */
  .hero-in{padding-bottom:84px}
  .cats a small{display:none}
  .posts,.split{grid-template-columns:1fr}

  /* Le club */
  .cl-intro,.cl-3,.cl-lieux,.cl-disc{grid-template-columns:1fr}

  /* Agenda */
  .ag-row{grid-template-columns:64px 1fr;gap:14px}
  .ag-date b{font-size:28px}
  .ag-side{grid-column:2;flex-direction:row;align-items:center;text-align:left;gap:10px}
  .cal .dow{padding:6px 4px;font-size:10px;letter-spacing:.04em}
  .cal .day{min-height:64px;padding:4px}
  .cal .pill{font-size:0;padding:0;height:6px;border-left-width:0;background:var(--ink)}
  .cal .pill.o{background:var(--accent)}
  .cal .pill.k{background:#6b645c}

  /* Sorties & actus */
  .feed-top,.feed{grid-template-columns:1fr}

  /* Page d'une sortie */
  .gal{grid-template-columns:repeat(3,1fr)}

  /* Adhésion */
  .feds,.grid2{grid-template-columns:minmax(0,1fr)}
  .steps li{font-size:0;gap:0;justify-content:center}
  .nav-steps .btn{flex:1}
}