/* ================= Handies Peak Training — styles ================= */
:root{
  --bg:#0A1024; --bg-2:#0E1630; --surf:#141D3C; --surf-2:#1B2650;
  --line:rgba(150,170,230,.16);
  --txt:#EDF1FB; --mut:#8E9AC4;
  --lime:#C6F24E; --coral:#FF6B4A; --cyan:#5EE0FF;
  --fd:"Archivo",system-ui,sans-serif;
  --fb:"Inter",system-ui,sans-serif;
  --fm:"JetBrains Mono",monospace;
  --pad:clamp(20px,5vw,60px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--fb);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--lime);color:#0A1024;padding:10px 16px;border-radius:8px}

.disp{font-family:var(--fd);font-variation-settings:"wdth" 112,"wght" 800;text-transform:uppercase;letter-spacing:-.015em;line-height:.94}
h1{font-size:clamp(42px,8.4vw,104px)}
h2{font-size:clamp(30px,4.6vw,58px)}
h3{font-family:var(--fd);font-variation-settings:"wdth" 108,"wght" 700;text-transform:uppercase;font-size:21px;letter-spacing:-.005em;line-height:1.1}
.mono{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.lede{font-size:clamp(16px,1.7vw,19.5px);color:var(--mut);max-width:54ch;line-height:1.62}
section{padding:clamp(64px,10vw,132px) 0;position:relative}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
header.on{background:rgba(10,16,36,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.hbar{display:flex;align-items:center;justify-content:space-between;height:70px;gap:14px}
.logo{font-family:var(--fd);font-variation-settings:"wdth" 112,"wght" 800;text-transform:uppercase;font-size:16px;letter-spacing:.01em}
.logo i{font-style:normal;color:var(--lime)}
.hnav{display:flex;align-items:center;gap:26px}
.hnav a.l{font-size:14px;color:var(--mut)}
.hnav a.l:hover{color:var(--txt)}
@media(max-width:820px){.hnav a.l{display:none}}

.btn{display:inline-flex;align-items:center;gap:9px;background:var(--lime);color:#0A1024;font-family:var(--fd);font-variation-settings:"wdth" 106,"wght" 700;text-transform:uppercase;font-size:13px;letter-spacing:.03em;padding:12px 22px;border-radius:8px;border:0;cursor:pointer;transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(198,242,78,.28)}
.btn.out{background:transparent;color:var(--txt);border:1px solid var(--line)}
.btn.out:hover{border-color:var(--lime);color:var(--lime);box-shadow:none}
.btn.sm{padding:9px 16px;font-size:12px}

/* hero */
.hero{padding-top:clamp(120px,17vw,190px);padding-bottom:0;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.g1{width:520px;height:520px;background:rgba(198,242,78,.16);top:-140px;right:-90px}
.g2{width:460px;height:460px;background:rgba(255,107,74,.15);top:180px;left:-160px}
.hero .wrap{position:relative;z-index:1}
h1 em{font-style:normal;color:var(--lime)}
.hero .lede{margin-top:26px}
.hcta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap;align-items:center}
.tag{font-family:var(--fm);font-size:11px;letter-spacing:.1em;color:var(--mut)}
.band{margin-top:clamp(48px,7vw,80px);position:relative}
.band svg{display:block;width:100%;height:auto}

.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:14px 0;background:var(--bg-2)}
.tk{display:inline-block;animation:tk 28s linear infinite;font-family:var(--fd);font-variation-settings:"wdth" 108,"wght" 700;text-transform:uppercase;font-size:15px;color:var(--mut)}
.tk span{margin:0 26px}
.tk b{color:var(--lime);font-weight:inherit}
@keyframes tk{to{transform:translateX(-50%)}}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .tk{animation:none}
  html{scroll-behavior:auto}
}

/* philosophie */
.phil{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:start}
@media(max-width:880px){.phil{grid-template-columns:1fr;gap:26px}}
.phil p{color:var(--mut);font-size:17px}
.phil p+p{margin-top:16px}
.phil strong{color:var(--txt);font-weight:600}

/* piliers */
.pil{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
@media(max-width:900px){.pil{grid-template-columns:1fr}}
.p{position:relative;background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:30px 26px 26px;overflow:hidden;transition:transform .25s,border-color .25s}
.p:hover{transform:translateY(-5px);border-color:rgba(198,242,78,.4)}
.p::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--lime),var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .35s}
.p:hover::before{transform:scaleX(1)}
.p .k{font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:var(--coral)}
.p h3{margin-top:14px}
.p p{color:var(--mut);font-size:15px;margin-top:12px}
.p .gr{margin-top:22px;height:52px}
.p .gr svg{display:block;width:100%;height:100%}

/* convergence */
.conv{background:linear-gradient(160deg,#111B3E,#0B1229);border:1px solid var(--line);border-radius:22px;padding:clamp(24px,4vw,46px);overflow:hidden}
.convhead{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-end}
.readout{font-family:var(--fm);font-size:12px;color:var(--mut);text-align:right}
.readout b{display:block;font-family:var(--fd);font-variation-settings:"wdth" 110,"wght" 800;font-size:clamp(28px,4vw,46px);color:var(--lime);letter-spacing:-.01em;line-height:1}
.cvwrap{margin-top:30px}
#cone{display:block;width:100%;height:auto}
.scrub{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.scrub input{flex:1;min-width:170px;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--lime) 0%,var(--lime) var(--pc,10%),rgba(150,170,230,.2) var(--pc,10%));outline:none}
.scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--lime);cursor:pointer;box-shadow:0 0 0 5px rgba(198,242,78,.18)}
.scrub input::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--lime);cursor:pointer}
.scrub .lab{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);min-width:126px}

/* tarifs */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px;align-items:stretch}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.pl{background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:30px 26px;display:flex;flex-direction:column;transition:transform .25s,border-color .25s}
.pl:hover{transform:translateY(-4px)}
.pl.hi{border-color:rgba(198,242,78,.5);background:linear-gradient(170deg,#182352,#111A38);position:relative}
.pl .badge{position:absolute;top:-11px;left:26px;background:var(--lime);color:#0A1024;font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;border-radius:99px}
.pl .nm{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.pl .pr{font-family:var(--fd);font-variation-settings:"wdth" 110,"wght" 800;font-size:44px;line-height:1;margin-top:16px;letter-spacing:-.02em}
.pl .pr small{font-family:var(--fb);font-variation-settings:normal;font-size:13px;font-weight:400;color:var(--mut);letter-spacing:0;text-transform:none;display:block;margin-top:8px}
.pl ul{list-style:none;margin-top:24px;display:grid;gap:11px;flex:1}
.pl li{display:flex;gap:10px;font-size:14.5px;color:var(--mut)}
.pl li svg{flex:none;margin-top:4px}
.pl .btn{margin-top:26px;justify-content:center}
.pricenote{margin-top:22px;font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:var(--mut)}

/* accès */
.acc{background:linear-gradient(135deg,rgba(198,242,78,.1),rgba(255,107,74,.09));border:1px solid var(--line);border-radius:24px;padding:clamp(34px,6vw,70px);text-align:center}
.acc h2{max-width:16ch;margin:14px auto 0}
.acc .lede{margin:20px auto 0}
.accbtns{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}

/* footer */
footer{border-top:1px solid var(--line);background:var(--bg-2);padding:clamp(40px,6vw,64px) 0 34px;margin-top:0}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fcol h4{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:16px;font-weight:500}
.fcol ul{list-style:none;display:grid;gap:10px}
.fcol a{font-size:14px;color:var(--mut)}
.fcol a:hover{color:var(--txt)}
.fbrand p{color:var(--mut);font-size:14px;margin-top:14px;max-width:34ch}
.social{display:flex;gap:10px;margin-top:22px}
.social a{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;color:var(--mut);transition:all .2s}
.social a:hover{color:#0A1024;background:var(--lime);border-color:var(--lime);transform:translateY(-2px)}
.fbot{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.fbot a{color:var(--mut)}
.fbot a:hover{color:var(--lime)}

/* pages de contenu */
.doc{padding-top:clamp(120px,15vw,170px)}
.doc .head{border-bottom:1px solid var(--line);padding-bottom:34px}
.doc h1{font-size:clamp(34px,5.4vw,64px)}
.doc .body{max-width:74ch;padding:44px 0 20px}
.doc .body h2{font-family:var(--fd);font-variation-settings:"wdth" 108,"wght" 700;text-transform:uppercase;font-size:22px;letter-spacing:0;margin-top:46px;padding-top:26px;border-top:1px solid var(--line);line-height:1.2}
.doc .body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc .body h3{font-size:16px;margin-top:26px;color:var(--lime)}
.doc .body p{color:var(--mut);margin-top:14px}
.doc .body ul,.doc .body ol{color:var(--mut);margin-top:14px;padding-left:22px;display:grid;gap:9px}
.doc .body strong{color:var(--txt);font-weight:600}
.doc .body table{width:100%;border-collapse:collapse;margin-top:18px;font-size:14.5px}
.doc .body th,.doc .body td{border:1px solid var(--line);padding:10px 12px;text-align:left;color:var(--mut);vertical-align:top}
.doc .body th{color:var(--txt);font-weight:600;background:var(--surf)}
.doc .upd{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-top:18px}
.todo{background:rgba(255,107,74,.09);border:1px dashed rgba(255,107,74,.5);border-radius:10px;padding:14px 16px;margin-top:18px;font-family:var(--fm);font-size:12.5px;color:#FFB09B;line-height:1.6}
.todo b{color:var(--coral)}

/* cookies */
.cbanner{position:fixed;left:14px;right:14px;bottom:14px;z-index:90;background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:22px;max-width:520px;box-shadow:0 20px 50px rgba(0,0,0,.5);display:none}
.cbanner.show{display:block}
.cbanner h4{font-family:var(--fd);font-variation-settings:"wdth" 108,"wght" 700;text-transform:uppercase;font-size:16px}
.cbanner p{font-size:14px;color:var(--mut);margin-top:10px}
.cbtns{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.clink{background:none;border:0;color:var(--mut);font-family:var(--fb);font-size:13px;text-decoration:underline;cursor:pointer;padding:10px 4px}
.clink:hover{color:var(--txt)}
.cprefs{display:none;margin-top:18px;border-top:1px solid var(--line);padding-top:16px;display:none}
.cprefs.show{display:block}
.crow{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}
.crow .t{font-size:14px;color:var(--txt)}
.crow .d{font-size:12.5px;color:var(--mut);margin-top:3px;max-width:40ch}
.sw{position:relative;width:42px;height:24px;flex:none;margin-top:2px}
.sw input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sw span{position:absolute;inset:0;background:var(--surf-2);border:1px solid var(--line);border-radius:99px;pointer-events:none;transition:background .2s}
.sw span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mut);transition:transform .2s,background .2s}
.sw input:checked+span{background:rgba(198,242,78,.25);border-color:var(--lime)}
.sw input:checked+span::after{transform:translateX(18px);background:var(--lime)}
.sw input:disabled+span{opacity:.5}

/* ═══════════════════════════════════════════════════ mobile
   Ajouté le 19/09/2026. Tout ce qui suit ne s'applique qu'aux petits
   écrans : rien n'est modifié au-dessus de 720 px. */

/*  Garde-fou : plus rien ne peut dépasser la largeur de l'écran. Un seul
    élément trop large décale toute la page et coupe les bandeaux pleine
    largeur (vu sur le pied de page et le bandeau défilant). */
html,body{overflow-x:hidden;max-width:100%}
img,svg,video{max-width:100%}

@media(max-width:720px){
  /*  Le menu disparaissait entièrement sous 820 px : il ne restait que le
      logo et le bouton d'accès, sans moyen d'atteindre les sections. Les
      liens reviennent sous forme de ligne défilante. */
  .hbar{flex-wrap:wrap;row-gap:10px}
  .hnav{width:100%;display:flex;gap:18px;overflow-x:auto;padding-bottom:2px;
        -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hnav::-webkit-scrollbar{display:none}
  .hnav a.l{display:inline-block;white-space:nowrap;font-size:13px}
  .hnav .btn{display:none}          /* le bouton d'accès reste en haut à droite */
  .hbar .logo{flex:1 1 auto}

  /*  Titres : des mots entiers, pas de « ? » esseulé sur sa ligne. */
  .disp{font-size:clamp(30px,8.6vw,44px);line-height:1.04;text-wrap:balance}
  h1.disp br{display:none}

  /*  La section « Prêt à commencer » était centrée, seule de tout le site :
      un texte centré sur six lignes se lit mal sur un téléphone. */
  .acc{text-align:left;padding:28px 22px;border-radius:18px}
  .acc h2{max-width:none;margin:12px 0 0}
  .acc .lede{margin:16px 0 0}
  .accbtns{justify-content:flex-start;margin-top:24px;gap:10px}

  /*  Boutons : pleine largeur, atteignables au pouce. */
  .hcta,.accbtns{flex-direction:column;align-items:stretch}
  .hcta .btn,.accbtns .btn{width:100%;justify-content:center;padding:15px 20px;font-size:14px}
  .hcta .tag{margin-top:4px}

  /*  Respirations et blocs. */
  .wrap{padding-left:18px;padding-right:18px}
  section{padding-top:56px;padding-bottom:56px}
  .pl{padding:26px 20px}
  .ticker{padding:11px 0}
  .tk{font-size:13px}
  .tk span{margin:0 18px}
  .band svg{height:120px}
  .lede{font-size:16px;line-height:1.55}
}

@media(max-width:400px){
  .disp{font-size:clamp(26px,8.2vw,34px)}
  .wrap{padding-left:15px;padding-right:15px}
}

/*  Filet de sécurité : les blocs « .rv » sont masqués en attendant que le
    script les révèle au défilement. Si `assets/site.js` manque ou échoue,
    la page reste blanche — c'est arrivé. Après 3 secondes, tout s'affiche,
    animation ou pas. */
@keyframes rv_secours{to{opacity:1;transform:none}}
.rv{animation:rv_secours .4s linear 3s forwards}
.rv.in{animation:none}

/* ═══════════════════════════════════════════════════ lot vitrine 1
   Ajouté le 16/10/2026. Identité inchangée : mêmes couleurs, même logo,
   mêmes reliefs. Seuls la lisibilité et les états changent. */

/*  Bouton secondaire : sa bordure (--line) ne contrastait qu'à 1,31:1 avec
    le fond. Elle passe à --mut (6,80:1) ; le survol reste distinct du
    bouton principal (pas de remplissage lime). */
.btn.out{border-color:var(--mut)}
.btn.out:hover{color:var(--txt);border-color:var(--txt);background:rgba(237,241,251,.06)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.btn[aria-disabled=true],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/*  En-tête sous 820 px : le bouton d'accès était masqué sous 720 px, et
    entre 721 et 820 px les liens de section disparaissaient. On applique
    la même disposition sur deux lignes à toute cette plage : logo et
    bouton d'accès en haut, liens de section en ligne défilante dessous. */
.hacc{display:none}
@media(max-width:820px){
  .hbar{flex-wrap:wrap;row-gap:10px}
  .hbar .logo{order:1;flex:1 1 auto}
  .hacc{display:inline-flex;order:2}
  .hnav{order:3;width:100%;display:flex;gap:18px;overflow-x:auto;padding-bottom:2px;
        -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hnav::-webkit-scrollbar{display:none}
  .hnav a.l{display:inline-block;white-space:nowrap;font-size:13px}
  .hnav .btn{display:none}
}

/*  Section « Le moteur » : schéma illustratif et ses trois temps. */
.temps-moteur{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.temps-moteur li{color:var(--mut);font-size:15px;line-height:1.55;border-top:1px solid var(--line);padding-top:14px}
.temps-moteur b{display:block;color:var(--txt);font-weight:600;margin-bottom:6px}
.note-schema,.note-acces{color:var(--mut);font-size:13px;margin-top:14px}
@media(max-width:720px){.temps-moteur{grid-template-columns:1fr}}

/*  Encadré d'accès : fond opaque sous sa teinte, les reliefs ne passent
    plus derrière le texte. */
.acc{background:linear-gradient(135deg,rgba(198,242,78,.1),rgba(255,107,74,.09)),var(--bg)}

/*  Pages légales : sous 330 px, une adresse ou un nom long faisait déborder
    les tableaux. Les mots trop longs passent désormais à la ligne. */
.doc .body th,.doc .body td{overflow-wrap:anywhere}

/*  En-tête sur téléphone : avec la police réelle (Archivo large), le logo
    poussait le bouton « Accès » sur une ligne à part. Sous 420 px, le logo
    est légèrement réduit pour que le bouton reste à côté de lui. */
@media(max-width:820px){.hbar{height:auto;min-height:70px;padding-top:10px;padding-bottom:10px}}
@media(max-width:420px){
  .hbar .logo.marque{min-width:0;font-size:12.5px;gap:9px}
  .hbar .logo.marque img{width:34px;height:34px}
  .hacc{padding:8px 12px}
}
@media(max-width:359px){
  .hbar .logo.marque{font-size:11px;gap:7px}
  .hbar .logo.marque img{width:28px;height:28px}
}

/*  Zoom fort sur téléphone (375 px à 200 %, soit environ 188 px CSS) :
    la carte d'accès et les adresses e-mail dépassaient de l'écran. La
    colonne de la carte peut désormais rétrécir, le grand libellé se réduit,
    et un mot trop long passe à la ligne plutôt que de sortir de l'écran. */
@media(max-width:900px){.plans{grid-template-columns:minmax(0,1fr)}}
.pl{min-width:0;overflow-wrap:break-word}
a[href^="mailto:"]{overflow-wrap:anywhere}
@media(max-width:360px){.pl{padding:24px 16px}.pl .pr{font-size:clamp(20px,10.5vw,44px)}}

/* ═══════════════════════════════════════════════════ rc2
   Ajouté le 17/10/2026. Héros : moins de vide entre les boutons et le profil.
   Section moteur : les trois étapes passent au premier plan, une seule légende. */
/*  Le relief du héros se positionne désormais par rapport au héros lui-même (il se
    calait jusqu'ici sur la fenêtre, d'où sa coupure franche en bas d'écran). */
.hero{position:relative}
.band{margin-top:clamp(36px,4.5vw,60px)}
.cvwrap{margin:26px 0 0}
.cvwrap svg{display:block;width:100%;height:auto}
.cvwrap .note-schema{margin-top:6px}
.temps-moteur{margin-top:20px;gap:16px}
.temps-moteur li{font-size:16px;line-height:1.6;border:1px solid var(--line);border-top:2px solid var(--lime);
  border-radius:14px;padding:18px 20px;background:rgba(237,241,251,.03)}
.temps-moteur b{font-size:17px;margin-bottom:8px}
/*  Téléphone : les deux halos du héros, superposés derrière le chapô, en abaissaient
    le contraste sous 4,5:1. Ils sont atténués sous 760 px. */
@media(max-width:760px){.hero .glow{opacity:.6}}