/* Leçons futées — Site vitrine, direction A « Nuit étoilée » (maquette de la cliente : docs/maquettes/lecons-futees-site-vitrine.zip).
   Feuille COMMUNE à l’accueil (/), aux formules (/formules), aux pages « Bientôt disponible » et à /compte/.
   Les valeurs viennent de la maquette (README § 3) : ne pas les changer sans la cliente.
   Point de rupture unique : 900 px (comme la maquette). Sous 600 px, seules les gouttières passent de 32 à 20 px. */

:root{
  --night-1:#120F38;      /* haut des dégradés sombres */
  --night-2:#231A5E;      /* milieu des dégradés sombres */
  --night-2b:#2E1F6E;
  --night-3:#3A2A7E;      /* bas des dégradés sombres */
  --night-card:#1A1446;   /* cartes sombres */
  --accent:#FFCC3F;       /* jaune étoile */
  --accent-soft:#FFE69A;  /* étoiles décoratives, texte d’accent sur fond sombre */
  --navy:#1F2A5A;
  --violet:#6C4BD6;
  --ink:#171A33;
  --muted:#555A7A;
  --bg:#FFFFFF;
  --bg-alt:#F4F3FC;
  --line:#E4E2F3;
  --on-dark-text:#D6D2F2;
  --on-dark-link:#DCD8F5;
  --success:#2E7D4F;
  --placeholder:#FFF3C4;
  /* couleurs des jeux (pastilles de l’application) et fonds pastel associés */
  --jeu-bleu:#2F6FE8; --jeu-orange:#E85A3C; --jeu-violet:#7B46D6; --jeu-turquoise:#1E8E9A; --jeu-jaune:#F0B429;
  --pastel-bleu:#EEF3FF; --pastel-orange:#FDEEEA; --pastel-violet:#F1EAFB; --pastel-turquoise:#E6F4F5; --pastel-jaune:#FFF6DF;
  --ciel:linear-gradient(180deg, #120F38 0%, #231A5E 55%, #3A2A7E 100%);
  --ciel-appel:linear-gradient(135deg, #120F38 0%, #3A2A7E 100%);
  --titres:Fredoka, 'Trebuchet MS', sans-serif;
  --texte:Nunito, 'Segoe UI', sans-serif;
  --gouttiere:2rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:100%}
/* Ordinateur (au-dessus de 900 px) : tout est 10 % plus petit, comme un zoom du navigateur à 90 % (demande de Jerem).
   Toutes les tailles de ces pages sont en rem (1rem = 16 px sur téléphone, 14,4 px sur ordinateur) : il suffit de changer
   cette base. Les points de rupture (@media) restent en px. Téléphone et tablette : rien ne change. */
@media (min-width:901px){html{font-size:90%}}
/* Icônes SVG : leur taille est écrite en attribut (width="24") ; on la donne aussi en rem pour qu’elles suivent la base. */
svg[width="14"]:not(.etoiles){width:0.875rem;height:0.875rem}
svg[width="16"]:not(.etoiles){width:1rem;height:1rem}
svg[width="18"]:not(.etoiles){width:1.125rem;height:1.125rem}
svg[width="22"]:not(.etoiles){width:1.375rem;height:1.375rem}
svg[width="24"]:not(.etoiles){width:1.5rem;height:1.5rem}
svg[width="26"]:not(.etoiles){width:1.625rem;height:1.625rem}
svg[width="28"]:not(.etoiles){width:1.75rem;height:1.75rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--texte);text-wrap:pretty;-webkit-text-size-adjust:100%}
a{color:var(--navy)}
a:hover{color:var(--violet)}
h1,h2,h3,.display{font-family:var(--titres);letter-spacing:-0.01em}
h1,h2,h3,p{margin:0}
img{max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:0.125rem}
.sr-only{position:absolute;top:0;left:0;width:0.0625rem;height:0.0625rem;padding:0;margin:-0.0625rem;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lien-evitement{position:absolute;left:0.75rem;top:-3.75rem;z-index:20;background:var(--accent);color:var(--ink);font-weight:800;padding:0.625rem 1rem;border-radius:999px;text-decoration:none}
.lien-evitement:focus{top:0.75rem;color:var(--ink)}

.wrap{max-width:75rem;margin:0 auto;padding-left:var(--gouttiere);padding-right:var(--gouttiere)}
.pile{display:flex;flex-direction:column}
.grille{display:grid;gap:1.5rem}

/* ---------- Ciel étoilé (sections sombres) ---------- */
.ciel{position:relative;overflow:hidden;background:var(--ciel);color:#FFFFFF}
.ciel-court{position:relative;overflow:hidden;background:linear-gradient(180deg, #120F38 0%, #2A1E6A 100%);color:#FFFFFF}
.etoiles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ciel > :not(.etoiles), .ciel-court > :not(.etoiles), .appel > :not(.etoiles){position:relative}

/* ---------- Logo ---------- */
.logo{display:flex;align-items:center;gap:0.75rem;text-decoration:none;color:#FFFFFF}
.logo:hover{color:#FFFFFF}
.logo-carre{flex:none;width:2.75rem;height:2.75rem;border-radius:0.75rem;background:#2F6FE8;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0.375rem 1.125rem rgba(47,111,232,0.45)}
.logo-nom{font-size:1.5rem;font-weight:700}

/* ---------- Navigation + menu burger ---------- */
.nav{position:relative;z-index:5;max-width:75rem;margin:0 auto;padding:1.5rem var(--gouttiere);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.navlinks{display:flex;gap:2rem;font-weight:700;font-size:1rem}
.navlinks a{color:var(--on-dark-link);text-decoration:none}
.navlinks a:hover{color:#FFFFFF}
.navlinks a[aria-current="page"]{color:#FFFFFF;border-bottom:2px solid var(--accent);padding-bottom:0.125rem}
.nav-actions{display:flex;align-items:center;gap:1rem}
.nav-connexion{color:#FFFFFF;font-weight:700;text-decoration:none;padding:0.75rem 0.5rem}
.nav-connexion:hover{color:var(--accent-soft)}
.burger{display:none;flex:none;align-items:center;justify-content:center;gap:0.5rem;min-width:2.75rem;min-height:2.75rem;padding:0 0.75rem;border-radius:999px;border:1.5px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.08);color:#FFFFFF;font:inherit;font-weight:800;font-size:0.9375rem;cursor:pointer}
.burger svg{display:block}
.burger .ferme{display:none}
.burger[aria-expanded="true"] .ouvre{display:none}
.burger[aria-expanded="true"] .ferme{display:block}
.menu-mobile{display:none}

/* ---------- Boutons (pilules) ---------- */
.btn{display:inline-block;border-radius:999px;font-weight:800;text-decoration:none;font-size:1rem;padding:1rem 1.5rem;text-align:center;line-height:1.25;cursor:pointer;font-family:var(--texte)}
.btn:hover{filter:brightness(1.06)}
.btn-jaune{background:var(--accent);color:var(--ink)}
.btn-jaune:hover{color:var(--ink)}
.btn-grand{padding:1.125rem 1.875rem;font-size:1.125rem}
.btn-nav{padding:0.875rem 1.375rem;font-size:1rem}
.btn-halo{box-shadow:0 0.625rem 1.875rem rgba(255,204,63,0.35)}
.btn-verre{background:rgba(255,255,255,0.08);border:1.5px solid rgba(255,255,255,0.35);color:#FFFFFF;font-weight:700;padding:1.0625rem 1.75rem;font-size:1.125rem}
.btn-contour-sombre{border:1.5px solid rgba(255,255,255,0.4);color:#FFFFFF;font-weight:700;padding:1.0625rem 1.75rem;font-size:1.125rem}
.btn-verre:hover,.btn-contour-sombre:hover{color:#FFFFFF}
.btn-contour{display:block;border:2px solid var(--navy);color:var(--navy)}
.btn-navy{display:block;background:var(--navy);color:#FFFFFF}
.btn-navy:hover{color:#FFFFFF}
.btn-bloc{display:block}
.boutons{display:flex;flex-wrap:wrap;gap:0.875rem;align-items:center}

/* ---------- Pastilles, sur-titres, textes ---------- */
.pastille{display:inline-flex;align-items:center;gap:0.625rem;align-self:flex-start;padding:0.5rem 1rem;border-radius:999px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.22);font-weight:700;font-size:0.875rem;color:var(--accent-soft)}
.surtitre{font-weight:800;font-size:0.875rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--violet)}
.surtitre-clair{color:var(--accent-soft)}
.entete{display:flex;flex-direction:column;gap:0.875rem;max-width:45rem}
.entete h2{font-size:2.75rem;line-height:1.1;font-weight:700}
.entete p{font-size:1.125rem;line-height:1.6;color:var(--muted)}
.accent{color:var(--accent)}
mark{background:var(--placeholder);color:var(--ink)}

/* ---------- Cartes ---------- */
.card{transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-0.1875rem);box-shadow:0 1.125rem 2.5rem rgba(23,26,51,0.12)}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}

/* ---------- Coches (listes d’inclusions) ---------- */
.coche{flex:none;width:1.875rem;height:1.875rem;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.liste-coches{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.liste-coches li{display:flex;gap:0.875rem;align-items:flex-start;font-size:1.0625rem;line-height:1.5}

/* ---------- Cadre des captures de l’appli ---------- */
.cadre{position:relative;width:21.25rem;max-width:100%;border-radius:1.75rem;padding:0.625rem;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.25);box-shadow:0 1.875rem 5rem rgba(0,0,0,0.45)}
.cadre img{display:block;width:100%;object-fit:cover;object-position:top;border-radius:1.25rem}
.halo{position:absolute;width:26.25rem;height:26.25rem;max-width:100%;border-radius:50%;background:radial-gradient(circle, rgba(255,204,63,0.35) 0%, rgba(255,204,63,0) 70%)}
.flottante{position:absolute;display:flex;align-items:center;gap:0.75rem;background:#FFFFFF;color:var(--ink);padding:0.875rem 1.125rem;border-radius:1rem;box-shadow:0 1rem 2.5rem rgba(0,0,0,0.35)}
.flottante .ic{flex:none;width:2.5rem;height:2.5rem;border-radius:0.75rem;display:inline-flex;align-items:center;justify-content:center}
.flottante .tx{display:flex;flex-direction:column;line-height:1.2}
.flottante strong{font-size:0.9375rem}
.flottante .tx span{font-size:0.8125rem;color:var(--muted)}

/* ---------- Formules (accueil et page Formules) ---------- */
.formules{grid-template-columns:repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));align-items:stretch}
.formule{background:#FFFFFF;border:1.5px solid var(--line);border-radius:1.75rem;padding:2.25rem;display:flex;flex-direction:column;gap:1.375rem}
.formule-sombre{background:var(--night-card);color:#FFFFFF;border:2px solid var(--accent);box-shadow:0 1.5rem 3.75rem rgba(26,20,70,0.35)}
.etiquette{align-self:flex-start;font-weight:800;font-size:0.8125rem;padding:0.375rem 0.75rem;border-radius:999px}
.etiquette-bleue{background:var(--pastel-bleu);color:var(--navy)}
.etiquette-choisie{background:var(--placeholder);color:#6B4E00}
.etiquette-jaune{background:var(--accent);color:var(--ink)}
.formule-tete{display:flex;flex-direction:column;gap:0.375rem}
.formule-tete h2,.formule-tete h3{font-size:1.5rem;font-weight:700}
.formule-prix{font-size:2.75rem;font-weight:700}
.formule-periode{font-size:0.9375rem;color:var(--muted)}
.formule-sombre .formule-periode{color:var(--on-dark-text)}
/* V2F : prix à l’année et lien annuel, communs aux cartes de l’accueil et de /formules (avant dans formules.css). */
.formule-annuel{font-size:0.9375rem;line-height:1.45;color:var(--ink)}
.formule-sombre .formule-annuel{color:#FFFFFF}
.f-annuel{align-self:center;font-weight:800;font-size:0.9375rem;color:var(--ink);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;margin-top:-0.75rem}
.formule-sombre .f-annuel{color:var(--accent)}
.f-annuel:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.inclus{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.75rem;font-size:1rem;flex:1}
.inclus li{display:flex;gap:0.625rem}
.inclus .ok{color:var(--success);font-weight:800}
.formule-sombre .inclus .ok{color:var(--accent)}
.inclus .non{color:var(--muted)}
.inclus .non span{font-weight:800}

/* ---------- Bloc d’appel final ---------- */
.appel{position:relative;overflow:hidden;background:var(--ciel-appel);color:#FFFFFF;border-radius:2rem}
.appel h2{font-size:2.75rem;line-height:1.1;font-weight:700}
.appel p{font-size:1.125rem;color:var(--on-dark-text)}

/* ---------- Pied de page ---------- */
.pied{border-top:1px solid var(--line);background:#FFFFFF}
.pied-dedans{max-width:75rem;margin:0 auto;padding:2.5rem var(--gouttiere);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem}
.pied-logo{display:flex;align-items:center;gap:0.625rem}
.pied-logo .logo-carre{width:2.125rem;height:2.125rem;border-radius:0.625rem;box-shadow:none}
.pied-logo .display{font-size:1.125rem;font-weight:700}
.pied-liens{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:0.9375rem;font-weight:700}
.pied-liens a{text-decoration:none}
.pied-droite{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.pied-copie{font-size:0.875rem;color:var(--muted)}
/* Mention « Un site KiPéNA » (demande de Jerem), discrète */
.kipena{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.8125rem;color:var(--muted);text-decoration:none}
.kipena img{display:block;height:1.5rem;width:auto;border-radius:0.375rem;border:1px solid var(--line)}

/* ---------- Téléphone et tablette (≤ 900 px) ---------- */
@media (max-width:900px){
  .navlinks{display:none}
  .js .burger{display:inline-flex}
  .js .nav-connexion{display:none}
  .js .menu-mobile{display:block;position:absolute;top:100%;left:var(--gouttiere);right:var(--gouttiere);z-index:10;background:var(--night-card);border:1px solid rgba(255,255,255,0.22);border-radius:1.375rem;padding:0.625rem;box-shadow:0 1.5rem 3.75rem rgba(0,0,0,0.45)}
  .js .menu-mobile[hidden]{display:none}
  .menu-mobile ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .menu-mobile a{display:flex;align-items:center;min-height:3rem;padding:0.625rem 1rem;border-radius:0.875rem;color:#FFFFFF;font-weight:700;font-size:1.0625rem;text-decoration:none}
  .menu-mobile a:hover,.menu-mobile a:focus-visible{background:rgba(255,255,255,0.1);color:#FFFFFF}
  .menu-mobile a[aria-current="page"]{color:var(--accent)}
  /* Sans JavaScript : les liens de navigation restent visibles, sur une ligne à part. */
  html:not(.js) .nav{flex-wrap:wrap}
  html:not(.js) .navlinks{display:flex;flex-wrap:wrap;gap:0.5rem 1.25rem;order:3;width:100%}
  .menu-essai{margin-top:0.375rem}
  .menu-mobile .menu-essai a{justify-content:center;background:var(--accent);color:var(--ink);font-weight:800;border-radius:999px}
  .menu-mobile .menu-essai a:hover{background:var(--accent);color:var(--ink);filter:brightness(1.06)}
}
/* Petit téléphone : le bouton « Essayer gratuitement » de la barre ne tient plus à côté du logo ; il passe dans le menu
   (il reste aussi juste dessous, dans le haut de page). */
@media (max-width:600px){
  :root{--gouttiere:1.25rem}
  .nav{gap:0.75rem}
  .js .nav-actions .btn-nav{display:none}
}
@media (min-width:601px){
  .menu-essai{display:none}
}