/* Leçons futées — Accueil (/), direction A « Nuit étoilée ». Ce qui est propre à cette page ;
   le reste (tokens, boutons, cartes, nav, formules, pied de page) est dans vitrine.css. Valeurs de la maquette. */

/* ---------- Haut de page ---------- */
.hero-grid{max-width:75rem;margin:0 auto;padding:3.5rem var(--gouttiere) 6rem;display:grid;grid-template-columns:1.1fr 0.9fr;gap:3rem;align-items:center}
.hero-texte{display:flex;flex-direction:column;gap:1.75rem}
.hero-texte h1{font-size:4rem;line-height:1.04;font-weight:700;color:#FFFFFF}
.hero-texte .chapo{font-size:1.25rem;line-height:1.55;color:var(--on-dark-text);max-width:35rem}
.hero-texte .petit{font-size:0.9375rem;color:#B9B3E3}
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:35rem}
.hero-visual .cadre img{height:35rem}
.flot-bas{left:0;bottom:3.5rem}
.flot-haut{right:0;top:3rem}
.ic-etoile{background:var(--pastel-bleu)}
.ic-mot{background:var(--jeu-violet);color:#FFFFFF;font-weight:800;font-size:0.8125rem}

/* ---------- Bande de faits ---------- */
.faits{border-top:1px solid rgba(255,255,255,0.14);background:rgba(0,0,0,0.18)}
.faits-grille{list-style:none;margin:0 auto;padding-top:1.375rem;padding-bottom:1.375rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(13.75rem, 100%), 1fr));gap:1rem}
.fait{display:flex;align-items:center;gap:0.75rem;color:#E6E2FA;font-weight:700}
.fait svg{flex:none}

/* ---------- Comment ça marche ---------- */
.s-fonctionnement{padding-top:6.5rem;padding-bottom:5rem;display:flex;flex-direction:column;gap:3.5rem}
.etapes{grid-template-columns:repeat(auto-fit, minmax(min(20rem, 100%), 1fr))}
.etape{background:var(--bg-alt);border-radius:1.5rem;padding:1.75rem;display:flex;flex-direction:column;gap:1.25rem}
.etape-num{font-weight:700;color:var(--violet);font-size:0.9375rem}
.etape h3{font-size:1.5rem;font-weight:700}
.etape-texte{display:flex;flex-direction:column;gap:0.5rem}
.etape-texte p{font-size:1rem;line-height:1.55;color:var(--muted)}
.depot{border:2px dashed #B9B3E3;border-radius:1.125rem;background:#FFFFFF;padding:1.75rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:0.625rem;text-align:center}
.depot .ic{width:3rem;height:3rem;border-radius:0.875rem;background:var(--pastel-bleu);display:inline-flex;align-items:center;justify-content:center}
.depot strong{font-size:0.9375rem}
.depot span:last-child{font-size:0.8125rem;color:var(--muted)}
.mini-parcours{background:#FFFFFF;border-radius:1.125rem;padding:1.25rem;display:flex;flex-direction:column;gap:0.625rem}
.mini-etape{display:inline-flex;align-items:center;gap:0.625rem;border:1.5px solid;border-radius:999px;padding:0.5rem 0.875rem;font-size:0.8125rem;font-weight:700;color:var(--ink)}
.mini-etape .n{flex:none;width:1.375rem;height:1.375rem;border-radius:50%;color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;font-size:0.75rem}
.mini-etape .j{font-weight:600}
.me-violet{border-color:var(--jeu-violet)} .me-violet .n{background:var(--jeu-violet)} .me-violet .j{color:var(--jeu-violet)}
.me-orange{border-color:var(--jeu-orange)} .me-orange .n{background:var(--jeu-orange)} .me-orange .j{color:#C2452A}
.me-turquoise{border-color:var(--jeu-turquoise)} .me-turquoise .n{background:var(--jeu-turquoise)} .me-turquoise .j{color:#167A85} /* maquette : #1E8E9A (3,9:1 en 13 px) ; foncé pour atteindre 4,5:1 */
.mini-etoiles{background:var(--night-card);border-radius:1.125rem;padding:1.25rem;display:flex;flex-direction:column;gap:0.75rem;color:#FFFFFF}
.mini-etoiles .ligne{display:flex;justify-content:space-between;align-items:center;font-size:0.8125rem;font-weight:700}
.mini-etoiles .ligne span:last-child{color:var(--accent-soft)}
.barre{height:0.625rem;border-radius:999px;background:rgba(255,255,255,0.15);overflow:hidden}
.barre div{width:75%;height:100%;background:var(--accent);border-radius:999px}
.mini-etoiles .stars{display:flex;gap:0.5rem;align-items:center}
.mini-etoiles .stars span{font-size:0.8125rem;color:var(--on-dark-text);margin-left:0.375rem}

/* ---------- Les jeux ---------- */
.s-jeux{background:var(--bg-alt)}
.s-jeux .wrap{padding-top:6rem;padding-bottom:6rem;display:flex;flex-direction:column;gap:3rem}
.jeux-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem}
.jeux-tete .entete{max-width:42.5rem}
.autres-jeux{display:inline-flex;align-items:center;gap:0.5rem;background:#FFFFFF;border:1.5px solid var(--on-dark-link);border-radius:999px;padding:0.75rem 1.125rem;font-weight:700;font-size:0.9375rem;color:var(--navy)}
.jeux{grid-template-columns:repeat(auto-fit, minmax(min(16.25rem, 100%), 1fr));gap:1.25rem}
.jeu{border:1.5px solid;border-radius:1.375rem;padding:1.5rem;display:flex;flex-direction:column;gap:0.875rem}
.jeu h3{font-size:1.25rem;font-weight:700}
.jeu p{font-size:0.9375rem;line-height:1.5;color:var(--muted)}
.jeu .glyphe{width:3.25rem;height:3.25rem;border-radius:50%;color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1.25rem}
.j-bleu{background:var(--pastel-bleu);border-color:#C9D8FB} .j-bleu .glyphe{background:var(--jeu-bleu)}
.j-orange{background:var(--pastel-orange);border-color:#F6C9BD} .j-orange .glyphe{background:var(--jeu-orange)}
.j-violet{background:var(--pastel-violet);border-color:#D9C8F5} .j-violet .glyphe{background:var(--jeu-violet)}
.j-turquoise{background:var(--pastel-turquoise);border-color:#B8E0E3} .j-turquoise .glyphe{background:var(--jeu-turquoise)}
.j-jaune{background:var(--pastel-jaune);border-color:#F5DFA3} .j-jaune .glyphe{background:var(--jeu-jaune);color:var(--ink)}
.g18{font-size:1.125rem !important} .g16{font-size:1rem !important} .g15{font-size:0.9375rem !important} .g14{font-size:0.875rem !important}

/* ---------- Le parcours (section sombre) ---------- */
.s-parcours{background:linear-gradient(180deg, #1A1446 0%, #2E1F6E 100%);color:#FFFFFF;position:relative;overflow:hidden}
.split{padding-top:6rem;padding-bottom:6rem;display:grid;grid-template-columns:0.9fr 1.1fr;gap:4rem;align-items:center}
.split-image{display:flex;justify-content:center}
.split-image .cadre{width:22.5rem}
.split-image .cadre img{height:37.5rem}
.split-texte{display:flex;flex-direction:column;gap:1.75rem}
.split-texte h2{font-size:2.75rem;line-height:1.1;font-weight:700}
.split-texte > p{font-size:1.125rem;line-height:1.6;color:var(--on-dark-text)}
.s-parcours .coche svg{display:block}

/* ---------- Pour qui ---------- */
.s-pourqui .wrap{padding-top:6.5rem;padding-bottom:6rem;display:flex;flex-direction:column;gap:3rem}
.publics{grid-template-columns:repeat(auto-fit, minmax(min(20rem, 100%), 1fr))}
.public{border:1.5px solid var(--line);border-radius:1.5rem;padding:2rem;display:flex;flex-direction:column;gap:1rem;background:#FFFFFF}
.public .ic{width:3.5rem;height:3.5rem;border-radius:1rem;display:inline-flex;align-items:center;justify-content:center}
.public h3{font-size:1.625rem;font-weight:700}
.public p{font-size:1rem;line-height:1.6;color:var(--muted)}

/* ---------- Formules (aperçu) ---------- */
.s-formules{background:var(--bg-alt)}
.s-formules .wrap{padding-top:6rem;padding-bottom:6rem;display:flex;flex-direction:column;gap:3rem}

/* ---------- Appel final ---------- */
.s-essai .wrap{padding-top:3rem;padding-bottom:6rem}
.s-essai .appel{padding:4.5rem 3rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem}
.s-essai .appel h2{max-width:45rem}
.s-essai .appel p{max-width:35rem}
.s-essai .boutons{justify-content:center}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .hero-texte h1{font-size:2.75rem}
  .hero-visual{margin-top:1rem}
}
@media (max-width:600px){
  .s-essai .appel{padding:3.5rem 1.5rem}
}

/* ---------- Ordinateur : le premier écran ne montre que des blocs entiers (demande de Jerem) ----------
   Navigation + haut de page occupent la hauteur visible (100svh, avec un minimum) ; la bande de faits commence juste
   dessous. La capture et les marges s’adaptent à la hauteur de la fenêtre. Rien ne change sous 900 px. */
@media (min-width:901px){
  .premier-ecran{display:flex;flex-direction:column;min-height:max(32rem, 100vh);min-height:max(32rem, 100svh)}
  .premier-ecran .hero-grid{flex:1;width:100%;padding-top:1rem;padding-bottom:2.5rem}
  .hero-visual{min-height:0}
  .hero-visual .cadre img{height:clamp(20rem, 100vh - 13.5rem, 35rem);height:clamp(20rem, 100svh - 13.5rem, 35rem)}
}

/* ---------- Démo « Ne nous croyez pas. Testez. » (design v2, js/demo-accueil.js) ---------- */
.s-demo{background:linear-gradient(180deg, #1A1446 0%, #2E1F6E 100%);color:#FFFFFF;position:relative;overflow:hidden}
.demo-dedans{position:relative;padding-top:6rem;padding-bottom:6rem;display:flex;flex-direction:column;gap:2.5rem}
.s-demo .entete h2{font-size:3.5rem;line-height:1.05;color:#FFFFFF}
.s-demo .entete p{color:var(--on-dark-text)}
.demo-grille{display:grid;grid-template-columns:0.9fr 1.1fr;gap:1.5rem;align-items:stretch}
.demo-carte{background:#FFFFFF;color:var(--ink);border-radius:1.5rem;padding:1.75rem;display:flex;flex-direction:column;gap:1rem;box-shadow:0 1.875rem 5rem rgba(0,0,0,0.35);min-width:0}
.demo-jeu{border:2.5px solid var(--accent);gap:1.125rem}
.demo-surtitre{font-family:var(--texte);font-weight:800;font-size:0.8125rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--violet)}
.demo-lecon h3{font-size:1.75rem;font-weight:700}
.demo-extrait{background:var(--bg-alt);border-radius:1rem;padding:1rem 1.125rem;font-size:1rem;line-height:1.6}
.demo-sous-titre{font-size:0.8125rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
.demo-etapes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.625rem}
.demo-etape{display:flex;align-items:center;gap:0.75rem;border:1.5px solid var(--line);border-radius:0.875rem;padding:0.625rem 0.875rem;font-size:0.9375rem;font-weight:700}
.demo-etape.en-cours{background:var(--pastel-jaune);border-color:#F5DFA3}
.demo-etape.verrou{border-style:dashed;border-color:#CFCCE6;color:var(--muted)}
.demo-num{flex:none;width:1.875rem;height:1.875rem;border-radius:50%;background:var(--bg-alt);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9375rem}
.en-cours .demo-num{background:var(--accent);color:var(--ink)}
.verrou .demo-num{background:var(--night-card)}
.demo-fin{margin-left:auto;font-size:0.8125rem;font-weight:800;color:#8A5A00}
.verrou .demo-fin{font-weight:400;color:var(--muted)}
.demo-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.625rem}
.demo-etoiles{display:inline-flex;gap:0.1875rem}
.demo-etoiles svg{fill:#D9D6EE;width:1.25rem;height:1.25rem}
.demo-jeu.reussi .demo-etoiles svg{fill:var(--accent)}
.demo-phrase{font-size:2rem;font-weight:600;line-height:1.4}
.demo-trou{display:inline-block;min-width:9.375rem;border-bottom:4px solid #C9C5E6;color:var(--violet);text-align:center;padding:0 0.625rem;font-weight:700}
.demo-trou.faux{border-bottom-color:#B42318}
.demo-trou.juste{border-bottom-color:var(--success)}
.demo-mots{display:flex;flex-wrap:wrap;gap:0.75rem}
.demo-mot{font-family:var(--titres);font-size:1.375rem;font-weight:600;border-radius:999px;padding:0.75rem 1.625rem;min-height:2.75rem;cursor:pointer;border:2px solid var(--line);background:var(--bg-alt);color:var(--ink)}
.demo-mot:hover{filter:brightness(1.06)}
.demo-mot.faux{border-color:#8E1B13;background:#B42318;color:#FFFFFF}
.demo-mot.juste{border-color:#1F5A38;background:var(--success);color:#FFFFFF;box-shadow:0 0.625rem 1.5rem rgba(46,125,79,0.35)}
.demo-mot:disabled{border-color:#EEEDF7;background:#FAFAFE;color:#A8A6C2;cursor:default;filter:none}
.demo-retour{display:flex;flex-direction:column;gap:0.25rem;border-radius:1rem;padding:0.875rem 1.125rem}
.demo-retour:empty{display:none}
.demo-retour.faux{background:#FDEEEA;color:#7A1A12}
.demo-retour.juste{background:#E3F3EA;color:#1F5A38}
.demo-retour strong{font-family:var(--titres);font-size:1.25rem;font-weight:700}
.demo-retour span{font-size:1rem;line-height:1.5}
.demo-continuer{align-self:flex-start;display:inline-flex;align-items:center;gap:0.625rem;padding:1rem 1.625rem;font-size:1.0625rem}
.demo-continuer[hidden]{display:none}
.demo-aide,.demo-sans-js{font-size:0.875rem;color:var(--muted)}
.js .demo-sans-js,html:not(.js) .demo-aide{display:none}

@media (max-width:900px){
  .demo-grille{grid-template-columns:1fr}
  .s-demo .entete h2{font-size:2.75rem}
}
@media (max-width:600px){
  .demo-carte{padding:1.25rem}
  .demo-phrase{font-size:1.625rem}
}

/* ---------- Animations de l'accueil (design v2, 01-site-vitrine-changements § 3) ----------
   CSS seul. Toutes coupées si le système demande moins de mouvement (bloc prefers-reduced-motion plus bas). */
@keyframes lfRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes lfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes lfFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes lfTwinkle{0%{opacity:.2}100%{opacity:1}}
@keyframes lfGlow{from{box-shadow:0 10px 30px rgba(255,204,63,.35)}to{box-shadow:0 12px 48px rgba(255,204,63,.75)}}
@keyframes lfHalo{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.12);opacity:1}}
@keyframes lfShoot{0%{transform:translate(0,0) rotate(-28deg);opacity:0}4%{opacity:1}22%{transform:translate(-560px,300px) rotate(-28deg);opacity:0}100%{transform:translate(-560px,300px) rotate(-28deg);opacity:0}}
@keyframes lfPop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}

.rise{animation:lfRise .8s cubic-bezier(.2,.7,.2,1) both}
.rise-1{animation-delay:.05s}
.rise-2{animation-delay:.15s}
.rise-3{animation-delay:.28s}
.rise-4{animation-delay:.4s}
.rise-5{animation-delay:.55s}
.float{animation:lfFloat 6s ease-in-out infinite}
.float2{animation:lfFloatB 5s ease-in-out infinite 1s}
.float3{animation:lfFloat 7s ease-in-out infinite .5s}
.hero-visual .halo{animation:lfHalo 5s ease-in-out infinite}
.glowbtn{animation:lfGlow 2.2s ease-in-out infinite alternate}
.stars circle{animation:lfTwinkle 2.6s ease-in-out infinite alternate}
.stars circle:nth-child(2n){animation-duration:3.4s;animation-delay:.6s}
.stars circle:nth-child(3n){animation-duration:4.2s;animation-delay:1.3s}
.stars path{animation:lfTwinkle 3s ease-in-out infinite alternate .4s;transform-box:fill-box;transform-origin:center}
.ciel > span.shoot{position:absolute;top:6.875rem;right:14%;width:10.625rem;height:2px;border-radius:2px;background:linear-gradient(90deg, rgba(255,230,154,0) 0%, #FFE69A 100%);transform-origin:right center;opacity:0;animation:lfShoot 9s ease-out infinite 2s;pointer-events:none}
.pop{animation:lfPop .35s ease-out}

@media (prefers-reduced-motion:reduce){
  .rise,.float,.float2,.float3,.hero-visual .halo,.glowbtn,.stars circle,.stars path,.pop{animation:none !important}
  .rise{opacity:1;transform:none}
  .ciel > span.shoot{display:none}
}

/* ---------- V2F : intros sur toute la largeur, paragraphes justifiés sur ordinateur ----------
   Les intros de Comment ça marche ?, Testez, Les jeux, Pour qui ? et Formules ne sont plus limitées à 45rem :
   elles prennent la largeur du conteneur .wrap (75rem au plus). « Et 10 autres jeux » passe sous l'intro.
   Justification à partir de 901 px (même rupture que la grille) ; alignés à gauche en dessous.
   Exception : l'intro de Formules reste alignée à gauche, sans césure (demande de Jerem). */
#fonctionnement .entete,#demo .entete,#jeux .entete,#pourqui .entete,#formules .entete{max-width:none}
.jeux-tete{flex-direction:column;align-items:flex-start}
.jeux-tete .entete{max-width:none;width:100%}
@media (min-width:901px){
  .hero-texte .chapo,.entete p,.split-texte > p,.public p{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
  #formules .entete p{text-align:left;-webkit-hyphens:manual;hyphens:manual}
}