/* Page d'accueil de lumilire.com (carte M5) : accueil.html (/) et en.html (/en).
   Lueur de papier (docs/design/lueur-de-papier.md) : la nuit, les mots sur du papier crème, la lumière dorée.
   Fraunces pour les titres, Lexend pour lire, servies par nous (les déclarations latines de css/fonts.css, recopiées ici :
   une seule feuille bloque l'affichage). Aucun script chargé, aucun autre site. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { /* le mot « lumilire » seulement : Fraunces italique figée et réduite à ses lettres (tools/wordmark_font.py, 3 Ko au lieu de 150) */
  font-family: 'Fraunces Mot';
  font-style: italic;
  font-weight: 380;
  font-display: swap;
  src: url(../fonts/fraunces-wordmark.woff2) format('woff2');
  unicode-range: U+0049, U+004C-004D, U+0052, U+0055, U+0065, U+0069, U+006C-006D, U+0072, U+0075, U+0131;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/lexend-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --nuit: #0E1033; --nuit-2: #161946; --brume: #2C2F6E; --lueur: #FFD27A; --braise: #FF9D5C; --luciole: #7DF3E1;
  --papier: #F3E6C9; --feutre: #2E3384; --fil: #E9B040; --fil-sombre: #C9A24A; --encre: #26224A; --encre-2: #4A4468;
  --syl1: #2457D3; --syl2: #D23C4E; --brume-txt: #B9B4E0; --ciel: #EDE8FF;
  --display: 'Fraunces', Georgia, serif; --read: 'Lexend', system-ui, sans-serif;
  --grain: url(../img/accueil/papier.webp);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--nuit); color: var(--ciel); font: 17px/1.6 var(--read); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--lueur); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--fil); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-variation-settings: 'SOFT' 100, 'WONK' 1; font-weight: 560; line-height: 1.12; text-wrap: balance; margin: 0; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--papier); color: var(--encre); padding: 8px 14px; border-radius: 8px; z-index: 9; }
.skip:focus { left: 8px; }

/* ---------- Le mot « lumilire » : ı sans point, une étincelle à la place ---------- */
.wm { font: italic 380 28px/1 'Fraunces Mot', var(--display); color: #FFF1CF; text-decoration: none; letter-spacing: .005em; }
.wm .i { position: relative; }
.wm .i::after { content: ""; position: absolute; left: 50%; top: .02em; width: .17em; height: .17em; margin-left: calc(-.085em + .09em); border-radius: 50%;
  background: #FFF6DA; box-shadow: 0 0 .18em .06em var(--lueur), 0 0 .5em .12em rgba(255, 157, 92, .5); }

/* ---------- En-tête ---------- */
.top { position: sticky; top: 0; z-index: 5; background: rgba(14, 16, 51, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 210, 122, .1); }
.top .wrap { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.top nav a { color: var(--ciel); text-decoration: none; font-size: 15px; padding: 10px 10px; border-radius: 99px; min-height: 44px; display: inline-flex; align-items: center; }
.top nav a:hover { color: var(--lueur); }
.top nav .lang { border: 1.5px solid rgba(255, 210, 122, .35); padding: 6px 12px; min-height: 36px; font-size: 14px; }
.top nav .login { background: var(--papier) var(--grain); color: var(--encre); font-weight: 600; padding: 8px 16px; }
.top nav .login:hover { color: var(--encre); }
@media (max-width: 420px) { .top nav .lang { padding: 6px 10px; } .top nav .login { padding: 8px 12px; } .wm { font-size: 25px; } }

/* ---------- Boutons : pilule d'or (§Components · Buttons) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 24px; border-radius: 99px;
  font: 600 17px/1.2 var(--read); text-decoration: none; transition: transform 120ms ease-out; text-align: center; }
.btn:active { transform: scale(.95); }
.btn.or { background: var(--lueur) var(--grain); color: #2A1C05; box-shadow: 0 0 34px rgba(255, 210, 122, .35), 2px 5px 0 rgba(3, 4, 15, .5); }
.btn.encre { background: var(--feutre); color: #FFF4DA; box-shadow: 2px 5px 0 rgba(3, 4, 15, .45); }
.btn.fil { color: var(--lueur); border: 1.5px solid rgba(255, 210, 122, .5); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Haut de page ---------- */
.hero { position: relative; overflow: hidden; padding: 40px 0 56px; background: radial-gradient(90% 70% at 70% 30%, #23276A 0%, rgba(35, 39, 106, 0) 70%); }
.hero .wrap { display: grid; gap: 32px; align-items: center; }
.kicker { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--brume-txt); margin-bottom: 14px; }
.hero h1 { font-size: clamp(38px, 9vw, 64px); color: #FFF1CF; }
.hero h1 em { font-style: normal; color: var(--lueur); text-shadow: 0 0 26px rgba(255, 210, 122, .45); }
.hero .lead { font-size: 19px; color: var(--ciel); margin: 18px 0 26px; max-width: 34em; }
.hero .fine { font-size: 14px; color: var(--brume-txt); margin-top: 14px; }
/* Image fixe en attendant le montage animé (carte E5) */
.hero-art { position: relative; margin: 0; justify-self: center; width: min(100%, 360px); }
.hero-art::before { content: ""; position: absolute; inset: -12% -8%; background: radial-gradient(closest-side, rgba(255, 210, 122, .28), rgba(255, 210, 122, 0)); pointer-events: none; }
.hero-art img { position: relative; border-radius: 22px; box-shadow: 0 0 0 1px rgba(255, 210, 122, .18), 4px 14px 0 rgba(3, 4, 15, .55); }
/* La tour vivante (E5, js/accueil-hero.js) : la scène se pose sur l'image fixe, à la même taille */
.hero-tour .hero-scene { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; border-radius: 22px; clip-path: inset(0 round 22px); }
.hero-ctl { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.hero-btn { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(14, 16, 51, .72); color: var(--lueur); border: 1.5px solid rgba(255, 210, 122, .45); }
.hero-btn svg { width: 20px; height: 20px; }
.hero-btn:hover { background: rgba(44, 47, 110, .9); }
.hero-btn:focus-visible { outline: 3px solid var(--fil); outline-offset: 2px; }
.hero-btn[aria-pressed="true"] { background: var(--lueur); color: #2A1C05; }
@media (min-width: 860px) { .hero { padding: 64px 0 80px; } .hero .wrap { grid-template-columns: 1.15fr .85fr; gap: 48px; } }

/* ---------- Sections ---------- */
section { padding: 56px 0; }
section > .wrap > h2 { font-size: clamp(30px, 6vw, 44px); color: #FFF1CF; }
.intro { color: var(--brume-txt); font-size: 18px; margin: 12px 0 32px; max-width: 40em; }
.band { background: linear-gradient(180deg, var(--nuit-2), var(--nuit)); }

/* Ce que fait votre enfant : trois pas */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; counter-reset: pas; }
.step { counter-increment: pas; background: var(--papier) var(--grain); color: var(--encre); border-radius: 18px; overflow: hidden; box-shadow: 2px 7px 0 rgba(3, 4, 15, .45); display: flex; flex-direction: column; }
.step img { width: 100%; aspect-ratio: 39 / 35; object-fit: cover; }
.step div { padding: 18px 20px 22px; }
.step h3 { font-size: 23px; color: var(--encre); }
.step h3::before { content: counter(pas); display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-right: .4em; border-radius: 50%;
  background: var(--feutre); color: var(--lueur); font: 600 .7em var(--read); vertical-align: .2em; }
.step p { color: var(--encre-2); margin-top: 8px; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* Le Grand Effaceur */
.effaceur { margin-top: 40px; display: grid; gap: 20px; align-items: center; background: #0A0B22; border-radius: 22px; padding: 22px; box-shadow: inset 0 0 0 1px rgba(140, 155, 255, .25); }
.effaceur img { border-radius: 14px; width: 100%; max-width: 340px; justify-self: center; }
.effaceur h3 { font-size: 27px; color: #FFF1CF; }
.effaceur p { color: var(--ciel); margin-top: 10px; }
@media (min-width: 760px) { .effaceur { grid-template-columns: 300px 1fr; padding: 30px; gap: 34px; } }

/* La méthode : lettres → syllabes → mots → phrases → livres */
.chemin { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 8px; align-items: center; }
.chemin li { display: flex; align-items: center; gap: 8px; }
.chemin li:not(:last-child)::after { content: "→"; color: var(--lueur); font-size: 20px; }
.chemin b { display: inline-block; background: var(--papier) var(--grain); color: var(--encre); font: 600 17px var(--read); padding: 9px 14px; border-radius: 10px; box-shadow: 2px 4px 0 rgba(3, 4, 15, .45); }
.chemin .s1 { color: var(--syl1); } .chemin .s2 { color: var(--syl2); }
.terms { display: grid; gap: 14px; margin: 0; }
.terms > div { border-left: 3px solid var(--fil); padding: 4px 0 4px 16px; }
.terms dt { font-weight: 600; color: #FFF1CF; }
.terms dd { margin: 4px 0 0; color: var(--brume-txt); }
@media (min-width: 760px) { .terms { grid-template-columns: 1fr 1fr; gap: 20px 32px; } }

.tour { margin-top: 44px; }
.tour h3 { font-size: 26px; color: #FFF1CF; margin-bottom: 6px; }
.tour > p { color: var(--brume-txt); margin-bottom: 16px; }
.etages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.etages li { display: grid; grid-template-columns: 2.1em 1fr; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; background: rgba(44, 47, 110, .45); }
.etages .n { grid-row: span 2; display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--lueur); color: #2A1C05; font-weight: 600; }
.etages .nom { font-family: var(--display); font-weight: 560; color: #FFF1CF; }
.etages .quoi { font-size: 15px; color: var(--brume-txt); }
.etages .sons { color: var(--lueur); font-weight: 600; }
@media (min-width: 640px) { .etages { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .etages { grid-template-columns: 1fr 1fr 1fr; } }

.diff { margin-top: 44px; display: grid; gap: 12px; list-style: none; padding: 0; }
.diff li { display: flex; gap: 12px; align-items: flex-start; }
.diff li::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: .5em; border-radius: 50%; background: var(--lueur); box-shadow: 0 0 10px var(--lueur); }
.diff b { color: #FFF1CF; }
@media (min-width: 760px) { .diff { grid-template-columns: 1fr 1fr; gap: 16px 32px; } }

.profs { margin-top: 44px; background: var(--papier) var(--grain); color: var(--encre); border-radius: 18px; padding: 24px 22px; box-shadow: 2px 7px 0 rgba(3, 4, 15, .45); }
.profs h3 { font-size: 25px; }
.profs p { color: var(--encre-2); margin-top: 10px; }
.profs a { color: var(--feutre); font-weight: 600; }

/* Ce que vous voyez + vie privée */
.parents { display: grid; gap: 28px; align-items: start; }
.parents figure { margin: 0; }
.parents figure img { border-radius: 16px; box-shadow: 4px 12px 0 rgba(3, 4, 15, .5); background: #F0EEF8; }
.parents figcaption { font-size: 14px; color: var(--brume-txt); margin-top: 10px; }
.parents ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.prive { margin-top: 26px; border: 1.5px solid rgba(125, 243, 225, .35); border-radius: 16px; padding: 18px 20px; }
.prive h3 { font-size: 22px; color: var(--luciole); margin-bottom: 10px; }
.prive ul { list-style: none; padding: 0; }
.prive li::before { content: "✓"; color: var(--luciole); margin-right: 10px; font-weight: 600; }
@media (min-width: 860px) { .parents { grid-template-columns: 1.1fr .9fr; gap: 40px; } }

/* Prix */
.prix .wrap { display: grid; gap: 20px; }
.plans { display: grid; gap: 20px; }
.plan { border-radius: 20px; padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.plan h3 { font-size: 27px; }
.plan ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.plan .btn { margin-top: auto; }
.plan.essai { border: 1.5px solid rgba(255, 210, 122, .4); }
.plan.achat { background: var(--papier) var(--grain); color: var(--encre); box-shadow: 0 0 70px rgba(255, 210, 122, .18), 2px 8px 0 rgba(3, 4, 15, .5); }
.plan.achat li { color: var(--encre-2); }
.montant { font-size: 18px; }
.montant b { font: 600 46px/1 var(--display); color: var(--encre); }
.montant s { color: #8A84A6; margin: 0 4px 0 8px; }
.fondateur { font-size: 15px; background: #FBF1DA; border: 1.5px dashed var(--fil-sombre); border-radius: 12px; padding: 10px 12px; }
.plan.essai .montant b { color: #FFF1CF; }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }

/* Questions */
.faq { display: grid; gap: 10px; max-width: 780px; }
.faq details { background: rgba(44, 47, 110, .45); border-radius: 14px; padding: 0 18px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; font-weight: 600; color: #FFF1CF; position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 24px; color: var(--lueur); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 16px; color: var(--brume-txt); }

/* Fin de page */
.fin { text-align: center; padding: 64px 0 40px; background: radial-gradient(70% 90% at 50% 100%, #23276A 0%, rgba(35, 39, 106, 0) 70%); }
.fin h2 { font-size: clamp(30px, 6vw, 44px); color: #FFF1CF; margin-bottom: 22px; }
.fin .btns { justify-content: center; }
footer { padding: 28px 0 40px; border-top: 1px solid rgba(255, 210, 122, .12); font-size: 15px; color: var(--brume-txt); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
footer a { color: var(--brume-txt); }
footer .wm { font-size: 22px; margin-right: auto; }