/* ==========================================================================
   hacktonfutur.com · couche site, identité 2026-2027
   Repose sur le design system Hack ton Futur :
     assets/ds/tokens.css  jetons (copie du fichier généré par le design system)
     assets/ds/marque.css  règles de marque (fonds, surtitres, point final, mascotte)
   Ici : uniquement la mise en page du site. Aucune couleur en dur.
   ========================================================================== */
@import url('../ds/tokens.css?v=202611031427');
@import url('../ds/marque.css?v=202611031427');

/* --- 1. Base ------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{overflow-x:hidden}
*{margin:0}
img,svg{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
ul,ol{list-style:none;padding:0}
h1{font-size:var(--type-display);line-height:var(--leading-tight)}
h2{font-size:clamp(28px,3.4vw,42px);line-height:1.08}
h3{font-size:var(--type-h3)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
b,strong{font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:absolute;left:-9999px;top:0;z-index:200;background:var(--htf-gold);color:var(--htf-ink-950);padding:12px 20px;border-radius:var(--r-pill);font-family:var(--font-display);font-weight:700}
.saut:focus{left:16px;top:16px}

/* --- 2. Grille et sections ---------------------------------------------- */
.env{max-width:var(--maxw-page);margin-inline:auto;padding-inline:var(--gutter)}
.sec{position:relative;padding-block:clamp(56px,7vw,104px)}
.sec--serre{padding-block:clamp(40px,5vw,64px)}
.tete{max-width:var(--maxw-text);margin-bottom:var(--sp-10)}
.tete h2{margin:var(--sp-4) 0 var(--sp-4)}
.lede{font-size:var(--type-lede);line-height:1.6}
.muet{color:var(--text-muted)}
.htf-ink .lede{color:var(--htf-ink-body)}
.deux{display:grid;gap:clamp(32px,5vw,64px);align-items:start}
@media (min-width:900px){.deux{grid-template-columns:1.15fr .85fr}}
.grille{display:grid;gap:var(--sp-4)}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

/* Méta : dates, surtitres secondaires, poids de fichiers */
.meta{font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.htf-ink .meta--date{color:var(--htf-gold)}
.meta--date{color:var(--htf-blue-600)}

/* Accent pixel : 1 à 3 mots, jamais sous 16 px */
.pixel{font-family:var(--font-pixel);line-height:1;letter-spacing:.02em}
.puce-pixel{display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-pill);padding:12px 20px;font-family:var(--font-pixel);font-size:18px;line-height:1}
.htf-ink .puce-pixel{background:var(--htf-navy-700);color:var(--htf-gold)}
.puce-pixel{background:var(--htf-navy-950);color:var(--htf-gold)}

/* --- 3. Boutons ----------------------------------------------------------
   Libellés en 19 px gras : blanc sur framboise (4,3:1) et sur corail (3,8:1)
   n'atteignent l'AA qu'en grand texte. */
.btn{
  --bg:var(--action-primary);--fg:#fff;--bd:transparent;--sh:var(--sh-btn-framboise);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.2;
  padding:14px 28px;min-height:52px;border-radius:var(--r-pill);
  border:1.5px solid var(--bd);background:var(--bg);color:var(--fg);box-shadow:var(--sh);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast),box-shadow var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.btn:hover{transform:translateY(-2px);text-decoration:none}
a.btn,a.btn:hover,.htf-ink a.btn,.htf-ink a.btn:hover{color:var(--fg);text-decoration:none}
.btn:active{transform:scale(.98)}
.btn--primaire:hover{--bg:var(--action-primary-hover)}
.btn--secondaire{--bg:var(--action-secondary);--sh:var(--sh-btn-blue)}
.btn--secondaire:hover{--bg:var(--action-secondary-hover)}
.btn--contour{--bg:transparent;--fg:var(--action-secondary);--bd:rgba(45,45,185,.4);--sh:none;font-size:16px}
.btn--contour:hover{--bg:var(--action-secondary);--fg:#fff;--bd:var(--action-secondary)}
.btn--sm{padding:9px 20px;min-height:var(--hit-min)}
/* Sur encre : CTA corail à ombre dure, cadre crème */
.btn--cta{--bg:var(--htf-coral-500);--fg:#fff;--sh:7px 7px 0 var(--htf-coral-700);border-radius:8px}
.btn--cta:hover{--bg:var(--htf-coral-400);transform:translate(-2px,-2px);--sh:9px 9px 0 var(--htf-coral-700)}
.btn--cta:active{transform:translate(2px,2px);--sh:3px 3px 0 var(--htf-coral-700)}
.btn--cadre{--bg:transparent;--fg:var(--htf-cream);--bd:var(--htf-ink-muted);--sh:none;border-radius:8px;font-size:16px}
.btn--cadre:hover{--bd:var(--htf-cream);--bg:rgba(244,241,232,.07)}
/* Sur framboise : bouton blanc */
.btn--blanc{--bg:#fff;--fg:var(--htf-framboise-700);--sh:0 10px 24px rgba(13,0,64,.18)}
.btn--blanc:hover{--bg:var(--htf-rose-50)}
.groupe{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.ico{flex:none;transition:transform var(--dur-fast) var(--ease-out)}
.btn:hover .ico--d{transform:translateX(3px)}

/* --- 4. En-tête ----------------------------------------------------------- */
.bandeau{background:var(--htf-framboise-700);color:#fff;text-align:center;padding:10px var(--gutter);font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.bandeau a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.bandeau a:hover{color:#fff}
.entete{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-soft);transition:box-shadow var(--dur-base)}
.entete--ombre{box-shadow:var(--sh-sm)}
.entete__nav{display:flex;align-items:center;gap:var(--sp-6);min-height:76px}
.entete__logo{flex:none;display:block}
.entete__logo img{height:34px;width:auto}
.entete__liens{display:flex;gap:0;margin-left:auto;font-family:var(--font-display);font-weight:600;font-size:14px}
.entete__liens a{white-space:nowrap;color:var(--text-title);padding:10px 12px;border-radius:var(--r-pill);text-decoration:none;transition:background var(--dur-fast)}
.entete__liens a:hover{background:var(--htf-rose-50);color:var(--text-title);text-decoration:none}
.burger{display:none;margin-left:auto;width:var(--hit-min);height:var(--hit-min);border:1px solid var(--border-soft);border-radius:var(--r-pill);background:#fff;align-items:center;justify-content:center;cursor:pointer}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--text-title);position:relative;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1180px){
  .burger{display:flex}
  .entete__liens{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--border-soft);box-shadow:var(--sh-md);padding:var(--sp-3) var(--gutter) var(--sp-5);font-size:16px;display:none}
  .entete__liens[data-ouvert="true"]{display:flex}
  .entete__liens a{padding:13px 12px;border-radius:var(--r-md)}
  .entete .btn--entete{display:none}
}

/* --- 5. Héros encre ------------------------------------------------------- */
.heros{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,112px) clamp(64px,9vw,128px)}
.heros__texte{position:relative;z-index:1;max-width:44rem}
.heros h1{margin:var(--sp-6) 0 0}
.heros .lede{margin:var(--sp-6) 0 var(--sp-8);max-width:52ch}
.heros__accent{color:var(--htf-coral-500)}
.heros .puce-pixel{margin-bottom:var(--sp-8)}
.heros__note{margin-top:var(--sp-8)}
/* Le Lycéen, en coin, toujours plus petit que le titre */
.heros .htf-mascotte-coin{--mascotte-taille:clamp(170px,22vw,280px);--mascotte-marge:clamp(20px,5vw,64px);z-index:0}
@media (max-width:899px){
  .heros{padding-bottom:calc(clamp(170px,40vw,220px) + 48px)}
  .heros .htf-mascotte-coin{--mascotte-taille:clamp(150px,38vw,200px)}
}

/* --- 6. Chiffres ---------------------------------------------------------- */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--sp-4)}
.chiffre{background:var(--htf-rose-100);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-6) var(--sp-5)}
.chiffre__v{font-family:var(--font-round);font-weight:800;font-size:clamp(34px,3.6vw,46px);line-height:1;letter-spacing:-.02em;color:var(--htf-framboise-500)}
.chiffre__v .ico{display:inline-block;vertical-align:middle;margin:0 6px}
.chiffre .meta{display:block;margin-top:var(--sp-3);color:var(--htf-navy-950);font-size:11px;letter-spacing:.16em;line-height:1.5}

/* --- 7. Cartes ------------------------------------------------------------ */
.carte{background:var(--surface-card);border-radius:var(--r-lg);border:1px solid var(--border-soft);padding:var(--sp-6) var(--sp-6) var(--sp-8)}
.htf-blanc .carte{box-shadow:var(--sh-sm)}
.htf-rose .carte,.carte--rose{border:none;box-shadow:none}
.htf-rose .carte{background:#fff}
.carte--rose{background:var(--htf-rose-100)}
.carte--blob{border-radius:var(--r-blob);padding:var(--sp-8) var(--sp-8) var(--sp-10)}
.htf-ink .carte{background:var(--htf-ink-card);border-color:var(--htf-ink-border);box-shadow:none}
.carte h3{margin:var(--sp-3) 0 var(--sp-2)}
.carte p{font-size:15.5px}
.num{font-family:var(--font-pixel);font-size:24px;line-height:1;color:var(--htf-framboise-500)}
.htf-ink .num{color:var(--htf-coral-500)}

/* Liste « l'essentiel » */
.essentiel{display:grid;gap:var(--sp-4);margin-top:var(--sp-5)}
.essentiel dt{color:var(--text-muted);font-size:11px}
.essentiel dd{margin:4px 0 0;color:var(--text-title);font-size:15.5px;line-height:1.45}

/* Puces d'étape : marque pixel corail et or */
.liste{display:grid;gap:var(--sp-4)}
.liste li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:16px}
.liste li::before{content:"";flex:none;width:14px;height:14px;margin-top:6px;
  background:linear-gradient(var(--htf-framboise-500),var(--htf-framboise-500)) 0 0/9px 9px no-repeat,
             linear-gradient(var(--htf-gold),var(--htf-gold)) 6px 6px/8px 8px no-repeat}
.htf-ink .liste li::before{background:linear-gradient(var(--htf-coral-500),var(--htf-coral-500)) 0 0/9px 9px no-repeat,linear-gradient(var(--htf-gold),var(--htf-gold)) 6px 6px/8px 8px no-repeat}
.liste b{color:var(--text-title)}

/* --- 8. Calendrier -------------------------------------------------------- */
.calendrier{border-top:1px solid var(--border-strong)}
.cal{display:grid;gap:var(--sp-2) var(--sp-8);padding:var(--sp-5) 0;border-bottom:1px solid var(--border-strong);align-items:start}
@media (min-width:760px){.cal{grid-template-columns:260px 1fr}}
.cal__date{display:flex;align-items:center;gap:var(--sp-4)}
.cal__date::before{content:"";flex:none;width:13px;height:13px;background:var(--htf-ink-muted)}
.cal--fort .cal__date::before{background:var(--htf-coral-500)}
.cal b{display:block;font-family:var(--font-round);font-weight:800;font-size:19px;color:var(--text-title);letter-spacing:-.01em}
.cal span{font-size:15px}
.htf-note{margin-top:var(--sp-8);display:flex;gap:var(--sp-3);align-items:flex-start;font-size:15px}
.htf-note::before{content:"";flex:none;width:14px;height:14px;margin-top:4px;background:linear-gradient(var(--htf-coral-500),var(--htf-coral-500)) 0 0/9px 9px no-repeat,linear-gradient(var(--htf-gold),var(--htf-gold)) 6px 6px/8px 8px no-repeat}

/* --- 9. Thème de l'édition (rose) ---------------------------------------- */
.theme-edition{position:relative;overflow:hidden}
.theme-edition .htf-mascotte-coin{--mascotte-taille:clamp(140px,16vw,210px);--mascotte-marge:clamp(16px,4vw,48px)}
.theme-edition .env{position:relative;z-index:1}
@media (max-width:899px){.theme-edition{padding-bottom:calc(clamp(140px,34vw,190px) + 56px)}}
.mot-geant{font-family:var(--font-pixel);font-size:clamp(40px,7vw,88px);line-height:1;color:var(--htf-framboise-500);text-shadow:8px 8px 0 var(--htf-rose-100);margin:var(--sp-6) 0}

/* --- 10. Onglets et documents -------------------------------------------- */
.onglets__liste{display:flex;gap:4px;background:var(--htf-rose-50);border-radius:var(--r-pill);padding:4px;width:max-content;max-width:100%;overflow-x:auto}
.onglet{border:none;background:transparent;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-body);padding:10px 22px;border-radius:var(--r-pill);cursor:pointer;min-height:var(--hit-min);white-space:nowrap;transition:background var(--dur-fast),color var(--dur-fast)}
.onglet:hover{background:var(--htf-rose-100)}
.onglet[aria-selected="true"]{background:var(--htf-navy-950);color:#fff}
.panneau{padding-top:var(--sp-6)}
.panneau[hidden]{display:none}
.docs{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.doc{display:flex;gap:var(--sp-4);align-items:center;background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);min-height:var(--hit-min);text-decoration:none;color:var(--text-title);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast),border-color var(--dur-fast)}
.doc:hover{transform:translateY(-2px);box-shadow:var(--sh-sm);border-color:var(--border-strong);text-decoration:none;color:var(--text-title)}
.doc__type{flex:none;width:40px;height:46px;border-radius:6px;background:var(--htf-navy-950);display:grid;place-items:center;color:var(--htf-gold);font-family:var(--font-mono);font-weight:700;font-size:10px;letter-spacing:.08em}
.doc__nom{font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.35}
.doc .meta{display:block;margin-top:6px;font-size:10.5px;color:var(--text-muted);letter-spacing:.14em}
.doc .ico{margin-left:auto;color:var(--htf-framboise-500)}

/* --- 11. Éditions --------------------------------------------------------- */
.editions{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.edition{display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:var(--r-lg);border:1px solid var(--border-soft);text-decoration:none;color:inherit;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)}
.htf-rose .edition{border:none}
.edition:hover{transform:translateY(-4px);box-shadow:var(--sh-md);text-decoration:none;color:inherit}
.edition__visuel{aspect-ratio:16/10;overflow:hidden;background:var(--htf-ink-950);display:grid;place-items:center}
.edition__visuel img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.edition:hover .edition__visuel img{transform:scale(1.04)}
.edition__ville{font-family:var(--font-pixel);font-size:clamp(26px,3vw,36px);color:var(--htf-gold);text-align:center;line-height:1.1}
.edition__ville small{display:block;font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.22em;color:var(--htf-ink-body);margin-top:14px}
.edition__corps{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.edition__pays{font-family:var(--font-round);font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--htf-navy-950)}
.edition__corps .meta{color:var(--text-muted);font-size:11px}
.etiquette{align-self:flex-start;display:inline-flex;font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);background:var(--htf-rose-100);color:var(--htf-navy-950)}
.etiquette--live{background:var(--htf-framboise-700);color:#fff}
.edition p{font-size:15.5px}
.edition__lien{margin-top:auto;padding-top:var(--sp-2);font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--htf-framboise-700);display:inline-flex;align-items:center;gap:8px}
.edition:hover .ico--d{transform:translateX(3px)}

/* --- 12. Photos ----------------------------------------------------------- */
.photos{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.photos figure{margin:0;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--border-soft)}
.photos img{width:100%;aspect-ratio:4/3;object-fit:cover}
.photos figcaption{padding:var(--sp-4) var(--sp-5);font-size:14px;color:var(--text-body)}
@media (min-width:1000px){.photos{grid-template-columns:repeat(4,1fr)}}

/* --- 13. Temps fort framboise -------------------------------------------- */
.fort{position:relative;overflow:hidden;text-align:left}
.fort .env{position:relative;z-index:1}
.fort h2{color:#fff;max-width:20ch}
.fort .lede{color:#fff;font-weight:700;max-width:54ch;margin:var(--sp-5) 0 var(--sp-8)}
.fort .meta{color:#fff;opacity:.9}
.fort .htf-mascotte-coin{--mascotte-taille:clamp(150px,18vw,240px);--mascotte-marge:clamp(16px,5vw,64px)}
@media (max-width:899px){.fort{padding-bottom:calc(clamp(150px,36vw,200px) + 56px)}}

/* --- 14. Équipe et partenaires ------------------------------------------- */
.equipe{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--sp-3);margin-top:var(--sp-5)}
.equipe img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-pill);border:3px solid #fff;box-shadow:var(--sh-sm)}
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3)}
.logos__case{flex:1 1 140px;max-width:196px;min-height:92px;display:grid;place-items:center;padding:var(--sp-4);background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-md)}
.logos__case img{max-height:44px;width:auto;object-fit:contain}
.logos__case--sombre{background:var(--htf-ink-950);border-color:var(--htf-ink-950)}

/* --- 15. Pied de page encre ---------------------------------------------- */
.pied{padding-block:clamp(48px,6vw,80px) var(--sp-8)}
.pied__haut{display:grid;gap:var(--sp-10)}
@media (min-width:900px){.pied__haut{grid-template-columns:1.3fr repeat(3,1fr)}}
.pied__logo{height:76px;width:auto}
.pied p{font-size:14px;color:var(--htf-ink-body);margin:var(--sp-5) 0;max-width:32ch}
.pied__lftc{display:flex;align-items:center;gap:var(--sp-4)}
.pied__lftc .meta{color:var(--htf-ink-muted);font-size:10.5px}
.pied__lftc img{height:56px;width:auto}
.pied h4{font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--htf-ink-muted);margin-bottom:var(--sp-4)}
.pied ul{display:grid;gap:var(--sp-3)}
.pied ul a{color:var(--htf-ink-body);font-size:14.5px;text-decoration:none}
.pied ul a:hover{color:var(--htf-cream);text-decoration:underline}
.reseaux{display:flex;gap:var(--sp-2);margin-top:var(--sp-5)}
.reseaux a{width:var(--hit-min);height:var(--hit-min);display:grid;place-items:center;border:1px solid var(--htf-ink-border);border-radius:var(--r-pill);transition:background var(--dur-fast),transform var(--dur-fast) var(--ease-out)}
.reseaux a:hover{background:var(--htf-ink-card);transform:translateY(-2px)}
.reseaux svg{width:17px;height:17px;fill:var(--htf-cream)}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-4);align-items:center;margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:1px solid var(--htf-ink-border);font-size:13px;color:var(--htf-ink-muted)}
.pied__bas a{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--htf-ink-muted)}
.pied__bas img{height:30px;width:auto}

/* --- 16. Apparitions ------------------------------------------------------ */
.anim [data-anim]{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);transition-delay:var(--retard,0ms)}
.anim [data-anim].vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-anim]{opacity:1;transform:none}}

/* Photos sur fond encre */
.htf-ink .photos figure{background:var(--htf-ink-card);border-color:var(--htf-ink-border)}
.htf-ink .photos figcaption{color:var(--htf-ink-body)}
/* Bandeau court sur mobile */
@media (max-width:640px){.bandeau__plus{display:none}}

/* --- 17. Partenaires, podium, palmarès, board ---------------------------- */
.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
@media (min-width:900px){.logos{grid-template-columns:repeat(4,1fr)}}
.logos__case--orga{background:var(--htf-rose-50);border-color:transparent}
.logos__case--orga img{max-height:56px}
.logos__case{max-width:none;min-height:150px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);text-align:center}
.logos__case img{max-height:52px;max-width:80%}
.logos__case figcaption{font-size:12.5px;line-height:1.4;color:var(--text-muted)}

.podium{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-bottom:var(--sp-8)}
.podium .meta{display:block;margin:4px 0 var(--sp-3);font-size:11px;letter-spacing:.14em;line-height:1.5}
.podium h3{font-size:24px}

.palmares{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.palm{background:var(--htf-rose-50);border-radius:var(--r-lg);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2)}
.palm__an{font-size:28px;color:var(--htf-framboise-500)}
.palm .meta{font-size:11px;color:var(--text-muted)}
.palm h3{font-size:22px}
.palm p{font-size:15px;color:var(--text-title)}
.palm p .meta{display:block;margin-bottom:2px}
.palm__marraine{display:flex;gap:var(--sp-3);align-items:center;margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--border-soft)}
.palm__marraine img{width:56px;height:56px;border-radius:var(--r-pill);object-fit:cover;flex:none}
.palm__marraine b{display:block;font-family:var(--font-display);font-size:15px;color:var(--text-title)}
.palm__marraine span span{font-size:13px;color:var(--text-muted)}
.palm__marraine > span{display:flex;flex-direction:column}

.board{display:grid;gap:var(--sp-5) var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.board figure{margin:0}
.board img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-lg);background:var(--htf-rose-50)}
.board figcaption{margin-top:var(--sp-3)}
.board b{display:block;font-family:var(--font-display);font-size:15px;color:var(--text-title)}
.board span{font-size:13px;color:var(--text-muted);line-height:1.4}

/* --- 18. Page « L'histoire » ------------------------------------------------ */
.frise{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin-top:var(--sp-6)}
@media (min-width:900px){.frise{grid-template-columns:repeat(6,1fr)}}
.frise a{display:flex;flex-direction:column;gap:4px;padding:var(--sp-4);border-radius:var(--r-md);border:1px solid var(--border-soft);text-decoration:none;color:var(--text-title);transition:background var(--dur-fast),transform var(--dur-fast) var(--ease-out)}
.frise a:hover{background:var(--htf-rose-50);transform:translateY(-2px);text-decoration:none;color:var(--text-title)}
.frise .pixel{font-size:22px;color:var(--htf-framboise-500)}
.frise span:last-child{font-family:var(--font-display);font-weight:600;font-size:13px}

.edition-bloc__tete{display:grid;gap:var(--sp-4) var(--sp-8);align-items:end;margin-bottom:var(--sp-8)}
@media (min-width:900px){.edition-bloc__tete{grid-template-columns:auto 1fr}}
.edition-bloc__an{font-size:clamp(56px,9vw,112px);line-height:.9;color:var(--htf-framboise-500);text-shadow:6px 6px 0 var(--htf-rose-100)}
.htf-rose .edition-bloc__an{text-shadow:6px 6px 0 #fff}
.edition-bloc__tete h2{margin:var(--sp-3) 0;max-width:24ch}
.edition-bloc__corps{display:grid;gap:var(--sp-8);align-items:start}
@media (min-width:900px){.edition-bloc__corps{grid-template-columns:1.3fr .7fr}}
.bloc__t{font-size:19px;margin:var(--sp-6) 0 var(--sp-3)}
.bloc__t:first-child{margin-top:0}
.laureats{display:grid;gap:var(--sp-3)}
.laureats li{display:flex;gap:var(--sp-4);align-items:flex-start;background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5)}
.htf-rose .laureats li{border-color:transparent}
.laureats .rang{font-size:20px;color:var(--htf-framboise-500);flex:none;margin-top:2px}
.laureats b{display:block;font-family:var(--font-round);font-weight:800;font-size:19px;color:var(--text-title)}
.laureats .meta{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--htf-blue-600);margin:2px 0 6px}
.laureats li > span > span:last-child:not(.meta){font-size:15px}
.partenaires-ed{margin-top:var(--sp-6);font-size:15px}
.partenaires-ed .meta{display:block;color:var(--text-muted);font-size:11px;margin-bottom:4px}
.marraine{background:var(--htf-ink-950);color:var(--htf-ink-body);border-radius:var(--r-lg);overflow:hidden}
.marraine img{width:100%;aspect-ratio:1;object-fit:cover}
.marraine > div{padding:var(--sp-5) var(--sp-6) var(--sp-6)}
.marraine .meta{color:var(--htf-gold);font-size:11px}
.marraine b{display:block;font-family:var(--font-round);font-weight:800;font-size:22px;color:var(--htf-cream);margin:6px 0 8px}
.marraine p{font-size:14.5px}
.marraine--vide{background:transparent;border:1.5px dashed var(--border-strong);color:var(--text-muted)}
.marraine--vide .meta{color:var(--text-muted)}
.photos--ed{margin-top:var(--sp-10)}
.photos--ed figcaption{font-size:13px}
.presse{display:grid;gap:var(--sp-3)}
.presse a{display:block;padding:var(--sp-4) var(--sp-5);background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-md);text-decoration:none;transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease-out)}
.presse a:hover{border-color:var(--htf-framboise-500);transform:translateY(-2px);text-decoration:none}
.presse .meta{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--text-muted);margin-bottom:4px}
.presse b{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-title)}
.presse--grille{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.marraines{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.marraine-carte{margin:0;background:var(--htf-ink-card);border:1px solid var(--htf-ink-border);border-radius:var(--r-lg);overflow:hidden}
.marraine-carte img{width:100%;aspect-ratio:1;object-fit:cover}
.marraine-carte figcaption{padding:var(--sp-4) var(--sp-5) var(--sp-5);display:flex;flex-direction:column;gap:6px}
.marraine-carte .meta{color:var(--htf-gold);font-size:10.5px}
.marraine-carte b{font-family:var(--font-round);font-weight:800;font-size:19px;color:var(--htf-cream)}
.marraine-carte span:last-child{font-size:13.5px;color:var(--htf-ink-body)}
.carte--action .num{font-size:20px}
.carte--action,.carte--action:hover{color:var(--text-body)}
.carte--action p{color:var(--text-body)}

/* 19. partenaires historiques, édition sans marraine */
.logos__titre{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.4vw,26px);color:var(--text-title);margin:var(--sp-10,56px) 0 var(--sp-5)}
.logos--histo{grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.logos--histo{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1000px){.logos--histo{grid-template-columns:repeat(6,1fr)}}
.logos--histo .logos__case{min-height:104px;padding:var(--sp-3) var(--sp-4)}
.logos--histo .logos__case img{max-height:52px;max-width:100%}
.logos__case--nom span{font-family:var(--font-display);font-weight:800;font-size:15px;line-height:1.2;color:var(--text-title);text-align:center}
.edition-bloc__corps--seul{grid-template-columns:1fr!important}

/* 20. Lycéen de chaque édition dans l'histoire */
.edition-bloc__tete{position:relative}
.edition-bloc__lyceen{position:absolute;top:0;right:0;width:auto;height:92px;transform:rotate(-4deg);pointer-events:none}
@media (min-width:900px){
  .edition-bloc__tete{grid-template-columns:auto 1fr auto}
  .edition-bloc__lyceen{position:static;height:136px;align-self:end}
}

/* 21. Bandeau de mesure d'audience (consentement) */
.mesure{position:fixed;z-index:60;left:16px;right:16px;bottom:16px;max-width:560px;margin-left:auto;background:#fff;color:var(--htf-ink-950);border:1px solid var(--htf-ink-border);border-radius:var(--r-lg);box-shadow:0 12px 40px rgba(16,12,45,.18);padding:18px 20px;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;font-size:14px;line-height:1.5}
.mesure p{margin:0;flex:1 1 260px}
.mesure__actions{display:flex;gap:8px}
.mesure__btn{min-height:44px;padding:0 18px;border-radius:8px;border:1.5px solid var(--htf-ink-950);background:#fff;color:var(--htf-ink-950);font:inherit;font-weight:700;cursor:pointer}
.mesure__btn--ok{background:var(--htf-ink-950);color:#fff}
.mesure__btn:focus-visible{outline:3px solid var(--htf-blue-600);outline-offset:2px}
.pied__bas a[data-mesure-reglages]{color:inherit;text-decoration:underline}

/* 22. Logos partenaires cliquables */
.logos__legende{font-size:12.5px;line-height:1.4;color:var(--text-muted)}
a.logos__case--lien{text-decoration:none;color:inherit;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base),border-color var(--dur-base)}
a.logos__case--lien:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(16,12,45,.08);border-color:var(--htf-rose-100)}
a.logos__case--lien:focus-visible{outline:3px solid var(--htf-blue-600);outline-offset:3px}

/* 23. Animations
   Principe : mouvements courts et doux, jamais bloquants. Tout est neutralisé
   si le visiteur a demandé à réduire les animations. */
@keyframes htf-flotte{0%,100%{translate:0 var(--parallaxe,0px)}50%{translate:0 calc(var(--parallaxe,0px) - 10px)}}
@keyframes htf-entree{from{opacity:0;transform:translateY(28px) rotate(-8deg) scale(.92)}to{opacity:1;transform:rotate(var(--mascotte-tilt,-4deg))}}
@keyframes htf-titre{from{opacity:0;filter:blur(10px);transform:translateY(18px)}to{opacity:1;filter:none;transform:none}}
@keyframes htf-point{0%,100%{opacity:1}50%{opacity:.25}}

.anim .heros h1{animation:htf-titre .9s var(--ease-out) both}
.anim .heros .lede{animation:htf-titre .9s .15s var(--ease-out) both}
.anim .heros .groupe{animation:htf-titre .9s .3s var(--ease-out) both}
.anim .heros .htf-mascotte-coin{animation:htf-entree 1s .35s var(--ease-bounce) both, htf-flotte 5s 1.4s ease-in-out infinite}
.anim .htf-mascotte-coin{translate:0 var(--parallaxe,0px)}
.anim .fort .htf-mascotte-coin,.anim .theme-edition .htf-mascotte-coin{animation:htf-flotte 6s ease-in-out infinite}
.heros h1 .htf-dot,.heros h1 .point{display:inline-block;animation:htf-point 1.6s 1.2s steps(1) 3}

/* Cascade des cases dans les grilles révélées */
.anim [data-anim] .cascade{opacity:0;transform:translateY(18px) scale(.98);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--rang,0) * 55ms + 80ms)}
.anim [data-anim].vu .cascade{opacity:1;transform:none}
.anim .logos .cascade{transform:translateY(12px) scale(.94)}

/* Survols vivants */
.carte,.edition,.doc,.marraine,.membre{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.carte:hover,.edition:hover,.doc:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(16,12,45,.10)}
.edition__visuel img{transition:transform .8s var(--ease-out)}
.edition:hover .edition__visuel img{transform:scale(1.04)}
.btn{transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast),background var(--dur-fast)}
.chiffre__v{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .anim .heros h1,.anim .heros .lede,.anim .heros .groupe,.anim .htf-mascotte-coin,.heros h1 .htf-dot,.heros h1 .point{animation:none!important}
  .anim [data-anim] .cascade{opacity:1;transform:none;transition:none}
  .carte:hover,.edition:hover,.doc:hover,a.logos__case--lien:hover{transform:none}
}
@media print{.anim [data-anim],.anim [data-anim] .cascade{opacity:1!important;transform:none!important}}