/* ============ Pages publiques orientées bénéfices (accueil, Lecture, Calcul, Mémoire) ============
   Reprend la structure de l'accueil du site unifié, sur les jetons de spikto.css. */

.v-section{padding:72px 0}
.v-section.doux{background:var(--fond-3)}
.v-section.sombre{background:var(--encre);color:#E9E4E1}
.v-section.sombre h2,.v-section.sombre h3{color:#fff}
.v-centre{text-align:center;max-width:760px;margin:0 auto}
.eyebrow{display:inline-block;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mauve);font-weight:600;margin-bottom:10px}
.sombre .eyebrow{color:#D9B8CE}
.v-section h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.v-lead{font-size:1.15rem;margin-top:14px}

/* Bandeau d'engagements */
.bandeau{background:var(--encre);color:#F4F0EC;font-size:.88rem;letter-spacing:.03em}
.bandeau ul{list-style:none;display:flex;justify-content:center;gap:34px;flex-wrap:wrap;padding:10px 16px;margin:0}
.bandeau li::before{content:"✓ ";color:#8BC97E}

/* 1. Promesse */
.promesse{padding:64px 0 56px;background:linear-gradient(180deg,var(--fond) 0%,var(--fond-2) 100%)}
.promesse-grille{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.preuve-courte{display:inline-flex;align-items:center;gap:10px;background:var(--fond);border:1px solid var(--trait);border-radius:999px;padding:7px 16px;font-size:.9rem;color:var(--texte);margin-bottom:22px}
.preuve-courte img{width:18px;height:18px}
.promesse h1{font-size:clamp(2.3rem,5vw,3.8rem);margin-bottom:20px;letter-spacing:-.01em}
.promesse h1 em{font-style:normal;color:var(--mauve)}
.promesse .lead{font-size:1.2rem;margin-bottom:26px;max-width:600px}
.benefices{list-style:none;display:grid;gap:12px;margin:0 0 32px;padding:0}
.benefices li{display:flex;gap:12px;align-items:flex-start;font-size:1.06rem;color:var(--encre)}
.benefices img{width:26px;height:26px;flex:none;margin-top:1px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-grand{font-size:1.1rem;padding:15px 30px}
.ctas small{color:var(--doux);font-size:.9rem;width:100%}
.composition{position:relative;width:100%;aspect-ratio:1;max-width:440px;margin-left:auto}
.composition img{position:absolute;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(58,54,56,.18));animation:flotte 7s ease-in-out infinite}
.composition .c1{width:42%;left:4%;top:6%}
.composition .c2{width:36%;right:4%;top:0;animation-delay:-2s}
.composition .c3{width:34%;left:14%;bottom:4%;animation-delay:-4s}
.composition .c4{width:40%;right:0;bottom:12%;animation-delay:-1s}
.composition .c5{width:24%;left:40%;top:38%;animation-delay:-3s}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.composition img{animation:none}}

/* 2. Situations */
.situations{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:40px}
.situation{background:var(--fond);border:1px solid var(--trait);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:10px}
.situation .qui{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--doux)}
.situation h3{font-size:1.25rem}
.situation ul{list-style:none;display:grid;gap:8px;margin:4px 0 8px;flex:1;padding:0}
.situation li{padding-left:24px;position:relative}
.situation li::before{content:"✓";position:absolute;left:0;color:var(--vert);font-weight:700}

/* 3. Produits */
.produits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:44px}
.produit{border-radius:22px;padding:28px 26px;display:flex;flex-direction:column;gap:12px;transition:.25s;text-decoration:none;color:var(--texte)}
.produit:hover{transform:translateY(-4px);box-shadow:var(--ombre);color:var(--texte)}
.produit.mauve{background:var(--mauve-pale)} .produit.jaune{background:var(--jaune-pale)}
.produit.bleu{background:var(--bleu-pale)}  .produit.vert{background:var(--vert-pale)}
.produit img{width:58px;height:58px;object-fit:contain}
.produit .nom{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--doux)}
.produit .resultat{font-family:var(--font-titre);font-size:1.4rem;color:var(--encre);line-height:1.2}
.produit .detail{flex:1}
.produit .meta{display:flex;gap:8px;flex-wrap:wrap}
.produit .meta span{background:#fff;border-radius:999px;padding:4px 12px;font-size:.82rem}
.produit .go{font-weight:600;color:var(--encre)}

/* 4. Étapes */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.etape{text-align:center;padding:0 10px}
.etape .num{width:52px;height:52px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-size:1.35rem;margin:0 auto 16px}
.etape h3{font-size:1.25rem;margin-bottom:8px}

/* 5. Pourquoi ça marche + démo */
.science-grille{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.demo{font-size:1.5rem;line-height:1.9;color:#fff;background:rgba(255,255,255,.06);border-radius:20px;padding:28px}
.demo .lettre-picto{width:1.05em;height:1.05em}
.demo-mot{display:flex;align-items:center;justify-content:center;gap:4px;font-size:3rem;flex-wrap:wrap}
.demo-mot img{width:52px;height:52px}
.demo-legende{text-align:center;color:#B9B2AE;font-size:.95rem;margin-top:12px}
.demo-ops{display:grid;gap:14px}
.demo-ops div{display:flex;align-items:center;gap:10px;font-size:1.6rem;color:#fff}
.demo-ops img{width:44px;height:44px}
.demo-ops small{font-size:.85rem;color:#B9B2AE;min-width:130px}
.grille-demo{display:grid;grid-template-columns:auto repeat(5,1fr);gap:8px;align-items:center}
.grille-demo img{width:100%;max-width:46px;margin:0 auto;display:block}
.grille-demo span{font-size:.85rem;color:#C9C2BE}
.piliers{display:grid;gap:20px;margin-top:22px}
.pilier h3{font-size:1.15rem;margin-bottom:4px}
.pilier p{color:#C9C2BE}
.source{font-size:.85rem;color:#9A938F;margin-top:20px}

/* 6. Gains */
.gains{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:40px}
.gain{background:var(--fond);border:1px solid var(--trait);border-radius:18px;padding:22px 24px}
.gain b{display:block;font-family:var(--font-titre);font-weight:500;font-size:1.15rem;color:var(--encre);margin-bottom:6px}
.gain .n{color:var(--mauve);margin-right:6px}

/* 7. Chiffres */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.chiffre{text-align:center;padding:24px 14px;border:1px solid var(--trait);border-radius:18px;background:var(--fond)}
.chiffre b{display:block;font-family:var(--font-titre);font-size:2.6rem;font-weight:500;color:var(--mauve);line-height:1;margin-bottom:10px}
.chiffre small{display:block;color:var(--doux);font-size:.78rem;margin-top:8px}

/* 8. Offres */
.offres{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.offre{border:1.5px solid var(--trait);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:12px;background:var(--fond)}
.offre.vedette{border-color:var(--encre);box-shadow:var(--ombre);position:relative}
.offre.vedette .pastille-offre{position:absolute;top:-13px;left:30px;background:var(--encre);color:#fff;border-radius:999px;font-size:.8rem;padding:4px 14px}
.offre h3{font-size:1.5rem}
.offre .accroche{color:var(--doux)}
.offre ul{list-style:none;display:grid;gap:9px;flex:1;padding:0}
.offre li{padding-left:24px;position:relative}
.offre li::before{content:"✓";position:absolute;left:0;color:var(--vert);font-weight:700}
.garanties{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:28px;font-size:.95rem}

/* 9. FAQ */
.faq{max-width:820px;margin:40px auto 0;display:grid;gap:12px;text-align:left}
.faq details{border:1px solid var(--trait);border-radius:14px;padding:18px 22px;background:var(--fond)}
.faq summary{cursor:pointer;font-size:1.08rem;color:var(--encre);list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mauve);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px}

/* 10. Appel final */
.final{text-align:center;background:linear-gradient(135deg,var(--mauve-pale),var(--jaune-pale) 50%,var(--bleu-pale))}
.final .ctas{justify-content:center;margin-top:24px}

@media (max-width:900px){
  .promesse-grille,.science-grille{grid-template-columns:1fr;gap:36px}
  .composition{max-width:220px;margin:0 auto}
  .promesse{padding-top:36px}
  .bandeau li:nth-child(n+3){display:none}
  .etapes,.offres{grid-template-columns:1fr}
  .chiffres{grid-template-columns:1fr 1fr}
  .v-section{padding:52px 0}
}

/* ── Formation ───────────────────────────────────────────── */
.sous-nav{background:var(--fond);border-bottom:1px solid var(--trait)}
.sous-nav .conteneur{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:8px;padding-bottom:8px}
.sous-nav a{white-space:nowrap;padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--texte);font-size:.9rem}
.sous-nav a[aria-current=page],.sous-nav a:hover{background:var(--fond-3);color:var(--encre)}
.photo{width:100%;border-radius:22px;box-shadow:var(--ombre);object-fit:cover;aspect-ratio:4/3}
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.deux-col.inverse>:first-child{order:2}
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.galerie img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px}
.sessions{display:grid;gap:12px;margin-top:28px}
.session-ligne{display:grid;grid-template-columns:1.2fr 2fr auto;gap:16px;align-items:center;background:var(--fond);border:1px solid var(--trait);border-radius:16px;padding:16px 20px}
.session-ligne b{font-family:var(--font-titre);font-weight:500;font-size:1.15rem;color:var(--encre)}
.session-ligne .complet{color:var(--doux)}
.cinq-etapes{grid-template-columns:repeat(5,1fr)}
.liste-coche{list-style:none;padding:0;display:grid;gap:8px}
.liste-coche li{padding-left:24px;position:relative}
.liste-coche li::before{content:"✓";position:absolute;left:0;color:var(--vert);font-weight:700}
.alphabet{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:28px}
.alphabet div{background:var(--fond);border:1px solid var(--trait);border-radius:14px;padding:12px;text-align:center;font-size:.85rem}
.alphabet img{width:44px;height:44px;display:block;margin:0 auto 6px}
.alphabet b{font-family:var(--font-titre);font-size:1.3rem;color:var(--encre);margin-right:6px}
.echelle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.echelle span{display:flex;flex-direction:column;align-items:center;font-size:.85rem;gap:4px}
.echelle img{width:46px;height:46px}
.pastilles-public{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.pastilles-public span{background:var(--fond);border:1px solid var(--trait);border-radius:999px;padding:6px 14px}
@media (max-width:900px){
  .deux-col{grid-template-columns:1fr;gap:28px}.deux-col.inverse>:first-child{order:0}
  .galerie{grid-template-columns:1fr 1fr}.cinq-etapes{grid-template-columns:1fr}
  .session-ligne{grid-template-columns:1fr}
}

/* ── Calcul : pages pédagogiques ────────────────────────── */
.nombre-nu{display:inline-grid;place-items:center;border-radius:50%;background:var(--fond-3);font-weight:700;color:var(--encre)}
.fiche{background:var(--fond);border:1px solid var(--trait);border-radius:22px;padding:28px;scroll-margin-top:120px}
.fiche+.fiche{margin-top:20px}
.fiche-tete{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.fiche-tete .grand-picto{width:84px;height:84px;object-fit:contain;font-size:1.6rem}
.fiche-tete b{font-family:var(--font-titre);font-size:2.4rem;font-weight:500;color:var(--encre);line-height:1}
.fiche-tete h2{font-size:1.4rem}
.fiche-tete .soustitre{color:var(--doux);font-size:.9rem}
.fiche-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:14px}
.fiche-grille h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--doux);margin-bottom:8px;font-family:var(--font)}
.puces{display:flex;gap:8px;flex-wrap:wrap}
.puces span,.puces a{display:inline-flex;align-items:center;gap:6px;background:var(--fond-2);border-radius:999px;padding:5px 12px;font-size:.9rem;text-decoration:none;color:var(--texte)}
.puces img{width:22px;height:22px}
.index-fiches{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:24px 0}
.index-fiches a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--trait);background:var(--fond);border-radius:999px;padding:6px 14px 6px 8px;text-decoration:none;color:var(--encre);font-weight:600}
.index-fiches img,.index-fiches .nombre-nu{width:28px;height:28px}
.frise{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin:16px 0}
.frise div{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.8rem;text-align:center;background:var(--fond-2);border-radius:12px;padding:8px 4px}
.frise img,.frise .nombre-nu{width:40px;height:40px;font-size:.85rem}
.frise .hors{opacity:.6}
.chemin{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:1.3rem;font-weight:600;color:var(--encre);margin:6px 0}
.chemin img,.chemin .nombre-nu{width:40px;height:40px;font-size:.9rem}
.chemin small{font-size:.85rem;font-weight:400;color:var(--doux)}
.famille-pictos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.famille-pictos div{background:var(--fond);border:1px solid var(--trait);border-radius:14px;padding:12px;text-align:center}
.famille-pictos img{width:52px;height:52px;display:block;margin:0 auto 6px}
.famille-pictos b{font-family:var(--font-titre);font-size:1.4rem;color:var(--encre)}
.jour.fait{border-color:var(--vert);background:var(--vert-pale)}
.jour .marquer{margin-top:12px}
.tirage{display:flex;align-items:center;justify-content:center;gap:24px;font-size:3rem;color:var(--encre);margin:20px 0}
.tirage div{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:1rem}
.tirage img{width:110px;height:110px}

/* Kadran */
.kadran{--taille:min(640px,calc(100vw - 32px));--r-picto:calc(var(--taille) * .36);--r-romain:calc(var(--taille) * .465);
  position:relative;width:var(--taille);aspect-ratio:1;margin:24px auto 40px;border-radius:50%;background:var(--fond);
  box-shadow:inset 0 0 0 2px var(--encre),8px 8px 0 var(--jaune)}
.kadran-anneau{position:absolute;inset:6%;border-radius:50%;opacity:.9;
  background:conic-gradient(from -7.5deg,
    var(--mauve-pale) 0 15deg,var(--jaune-pale) 15deg 30deg,var(--bleu-pale) 30deg 45deg,var(--vert-pale) 45deg 60deg,
    var(--mauve-pale) 60deg 75deg,var(--jaune-pale) 75deg 90deg,var(--bleu-pale) 90deg 105deg,var(--vert-pale) 105deg 120deg,
    var(--mauve-pale) 120deg 135deg,var(--jaune-pale) 135deg 150deg,var(--bleu-pale) 150deg 165deg,var(--vert-pale) 165deg 180deg,
    var(--mauve-pale) 180deg 195deg,var(--jaune-pale) 195deg 210deg,var(--bleu-pale) 210deg 225deg,var(--vert-pale) 225deg 240deg,
    #2a2a2a 240deg 300deg,
    var(--mauve-pale) 300deg 315deg,var(--jaune-pale) 315deg 330deg,var(--bleu-pale) 330deg 345deg,var(--vert-pale) 345deg 360deg);
  -webkit-mask-image:radial-gradient(circle,transparent 58%,#000 58%,#000 80%,transparent 80%);mask-image:radial-gradient(circle,transparent 58%,#000 58%,#000 80%,transparent 80%)}
.kadran-heure,.kadran-romain{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1))}
.kadran-heure{--r:var(--r-picto);display:flex;flex-direction:column;align-items:center;z-index:3}
.kadran-heure span.rond{width:calc(var(--taille) * .075);height:calc(var(--taille) * .075);background:#fff;border:2px solid var(--encre);border-radius:50%;padding:3px;display:grid;place-items:center}
.kadran-heure img{width:100%;height:100%}
.kadran-heure.maintenant span.rond{outline:3px dashed var(--mauve);outline-offset:3px}
.kadran-heure small{font-size:calc(var(--taille) * .015);font-weight:700;color:var(--doux)}
.kadran-romain{--r:var(--r-romain);font-size:calc(var(--taille) * .018);font-weight:700;color:var(--texte)}
.kadran-aiguille{position:absolute;top:50%;left:50%;transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(var(--angle,0deg));z-index:5;pointer-events:none;background:var(--encre)}
.kadran-aiguille.heures{width:12px;height:calc(var(--taille) * .25);border-radius:6px 6px 0 0;clip-path:polygon(50% 0,100% 14px,100% 100%,0 100%,0 14px)}
.kadran-aiguille.minutes{width:5px;height:calc(var(--taille) * .34);opacity:.8;border-radius:3px 3px 0 0}
.kadran-aiguille.secondes{width:2px;height:calc(var(--taille) * .35);background:var(--mauve)}
.kadran-centre{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36%;aspect-ratio:1;border-radius:50%;background:#fff;
  border:2px solid var(--encre);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;z-index:4;text-align:center;font-size:calc(var(--taille) * .02)}
.kadran-centre div{display:flex;gap:10px}
.kadran-centre img{width:calc(var(--taille) * .085);height:calc(var(--taille) * .085)}
.kadran-centre b{font-family:var(--font-titre);font-size:calc(var(--taille) * .03);color:var(--encre)}
.kadran-maintenant{text-align:center}
.kadran-maintenant img{width:96px;height:96px;vertical-align:middle}
.kadran-maintenant strong{font-family:var(--font-titre);font-size:2.4rem;color:var(--encre);margin-left:10px}
@media (max-width:700px){.frise{grid-template-columns:repeat(5,1fr)}.kadran-heure small,.kadran-romain{display:none}}