/* Météo du vol libre — la page d'accueil (index.html), par-dessus style.css et livre/livre.css.
   Maquette validée par Pierre le 22/10/2026 (maquettes/accueil/retenue.html). */

:root { --large: 1080px; --chaud: #d9731a; }

.accueil main { max-width: none; padding: 0; }
.accueil .site-header .inner, .accueil .site-footer .inner { max-width: var(--large); }
.accueil .fig { margin: 0; }
.v { white-space: nowrap; }      /* un nombre et son unité, un mot et sa ponctuation : U+00A0 est trop large en Charter */

/* ------------------------------------------------ cadres */
.large { max-width: var(--large); margin: 0 auto; padding: 0 16px; }
.etroit { max-width: 46rem; margin: 0 auto; padding: 0 16px; }
.bande { padding: 56px 0; }
.bande.douce { background: var(--surface-2); }
.bande.blanche { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bande h2, .appel h2 { font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.2; margin: 0 0 .4em; letter-spacing: -.01em; }
.surtitre { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--chaud); }
.chapeau { font-family: var(--lecture); font-size: 1.15rem; line-height: 1.6; color: var(--text); max-width: 42rem; }
.serif { font-family: var(--lecture); }

.grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 20px; }
.grille-2 { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; margin-top: 20px; }
.tuile {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px;
  box-shadow: 0 4px 18px rgba(20, 40, 70, .06);
}
.tuile h3 { margin: .2em 0 .35em; font-size: 1.1rem; }
.tuile p { margin: .4em 0; color: var(--muted); }
.tuile .ico-rond {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem;
  background: color-mix(in srgb, var(--c, var(--primary)) 14%, var(--surface));
}
.tuile a.suite { font-weight: 700; text-decoration: none; }
.tuile a.suite::after { content: " →"; }

.badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; flex: none; align-self: center;
  font-size: .76rem; font-weight: 700; background: var(--ok-bg); color: var(--ok); white-space: nowrap;
}
.cadenas { color: var(--muted); font-size: .85em; }
.connecte .cadenas { display: none; }

.btn.chaud { background: var(--chaud); border-color: var(--chaud); color: #fff; }
.btn.clair { background: rgba(255, 255, 255, .85); border-color: rgba(27, 36, 48, .25); color: #1b2430; }

/* ------------------------------------------------ ouverture */
.ouverture {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--ciel-haut), var(--ciel-bas) 82%);
  padding: 64px 0 150px;
}
.ouverture::before {
  content: ""; position: absolute; width: 520px; height: 520px; right: 6%; top: -220px; z-index: -1;
  background: radial-gradient(circle, rgba(255, 244, 214, .95), rgba(255, 255, 255, 0) 62%);
}
.ouverture .hero-relief { height: 150px; }
.ouverture h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; margin: 6px 0 16px; color: #1b2430; }
.ouverture .chapeau { color: #1b2430; font-size: 1.22rem; }
.ouverture .hero-actions { margin-top: 24px; }
.ouverture .btn { padding: 12px 20px; font-size: 1.02rem; }
.rassurance { margin: 14px 0 0; font-size: .9rem; color: #33404f; }
.vitrine-livre { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.vitrine-livre .couv { perspective: 1200px; text-align: center; }
.vitrine-livre .couv img {
  width: min(290px, 70vw); height: auto; border-radius: 4px 10px 10px 4px; transform: rotateY(-12deg) rotateX(2deg);
  box-shadow: -8px 18px 40px rgba(20, 30, 50, .35);
}
@media (max-width: 760px) { .vitrine-livre { grid-template-columns: 1fr; } .vitrine-livre .couv img { width: 150px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ouverture { background: linear-gradient(180deg, color-mix(in srgb, var(--ciel-haut) 45%, #0f151d), var(--bg) 85%); }
  :root:not([data-theme="light"]) .ouverture h1, :root:not([data-theme="light"]) .ouverture .chapeau,
  :root:not([data-theme="light"]) .rassurance { color: var(--text); }
  :root:not([data-theme="light"]) .btn.clair { background: var(--surface); color: var(--text); border-color: var(--border); }
}
:root[data-theme="dark"] .ouverture { background: linear-gradient(180deg, color-mix(in srgb, var(--ciel-haut) 45%, #0f151d), var(--bg) 85%); }
:root[data-theme="dark"] .ouverture h1, :root[data-theme="dark"] .ouverture .chapeau, :root[data-theme="dark"] .rassurance { color: var(--text); }
:root[data-theme="dark"] .btn.clair { background: var(--surface); color: var(--text); border-color: var(--border); }

/* Pour qui revient */
.retour { background: var(--surface); border-bottom: 1px solid var(--border); }
.retour .large { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding-top: 12px; padding-bottom: 12px; font-size: .95rem; }
.retour .progress-bar { width: 140px; display: inline-block; vertical-align: middle; }

/* ------------------------------------------------ feuilleter */
.chiffres { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.chiffres li { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: .88rem; }
.chiffres b { font-weight: 800; }
.feuilleter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 320px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 18px; margin: 20px -16px 0; list-style: none; }
.feuilleter li { scroll-snap-align: start; }
.feuilleter a { display: block; height: 100%; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 18px rgba(20, 40, 70, .06); }
.feuilleter a:hover { border-color: var(--primary); }
.feuilleter img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #fff; }
.feuilleter .legende { display: block; padding: 10px 14px 14px; font-size: .88rem; color: var(--muted); }
.feuilleter .legende b { display: flex; justify-content: space-between; gap: 8px; color: var(--text); margin-bottom: 4px; }
.reperes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; font-size: .85rem; color: var(--muted); }
.reperes .repere { padding: 2px 10px; border-radius: 999px; background: var(--f); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); font-weight: 700; font-size: .8rem; }

/* ------------------------------------------------ l'atelier */
/* L'animation, puis la question qu'elle aide à résoudre : dans cet ordre partout, l'une sous l'autre.
   En grand écran, le texte de l'animation passe à droite de la scène (la scène garde ≈ 760 px, sa taille dans le livre,
   et ses textes restent lisibles), et la réponse au quiz s'aligne sur cette colonne. Sous 980 px, l'animation reprend
   sa forme du livre ; sous 560 px de large, illus.js passe à sa version téléphone. */
.atelier { display: grid; gap: 20px; margin-top: 20px; --colonne: 18rem; }
.essai-quiz { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px; box-shadow: 0 6px 24px rgba(20, 40, 70, .08); }
.essai-quiz .quiz-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: .85rem; color: var(--muted); margin: 0 0 10px; }
.essai-quiz .feedback { margin-top: 14px; }
@media (min-width: 980px) {
  .atelier .illus { display: grid; grid-template-columns: minmax(0, 1fr) var(--colonne); grid-template-rows: auto 1fr; }
  .atelier .illus-scene { grid-column: 1; grid-row: 1; }
  .atelier .illus-commandes { grid-column: 1; grid-row: 2; }
  .atelier .illus-texte { grid-column: 2; grid-row: 1 / span 2; min-height: 0; border-top: 0; border-left: 1px solid var(--border); padding: 1em 1.2em; }
  .essai-quiz { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--colonne) - 22px); column-gap: 32px; align-items: end; }
  .essai-quiz .quiz-tete, .essai-quiz .feedback { grid-column: 1 / -1; }
  .essai-quiz .question { grid-column: 1; margin: 0; }
  .essai-quiz .num-form, .essai-quiz .choices { grid-column: 2; }
}
/* les quatre tuiles sous l'atelier : 4, 2 ou 1 par rangée, jamais une seule tuile orpheline */
#atelier .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 980px) { #atelier .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 559px) { #atelier .grille { grid-template-columns: 1fr; } }

/* ------------------------------------------------ la liseuse */
.liseuse { width: min(300px, 100%); margin: 0 auto; background: #2b2f36; border-radius: 22px; padding: 18px 16px 34px; box-shadow: 0 16px 40px rgba(20, 30, 50, .25); }
.liseuse .ecran { background: #f4f2ec; color: #222; border-radius: 6px; padding: 18px 16px; font-family: var(--lecture); font-size: .86rem; line-height: 1.5; filter: grayscale(1); }
.liseuse .ecran p { margin: .4em 0; }
.liseuse .titre-ch { font-family: var(--font); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #555; }
.liseuse .ecran img { display: block; width: 100%; height: auto; border: 1px solid #ccc; margin: 8px 0; background: #fff; }
.liseuse .code-imprime { font-family: var(--font); font-size: .78rem; border-top: 1px dashed #999; padding-top: 6px; }
.form-code { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.form-code label { width: 100%; font-weight: 600; }
.form-code input { font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); min-width: 0; flex: 1 1 180px; text-transform: uppercase; }

/* ------------------------------------------------ sommaire compact */
.sommaire-compact { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 20px; }
.partie-mini { border-radius: 14px; padding: 16px; background: linear-gradient(180deg, var(--ciel-bas), var(--surface)); border: 1px solid var(--border); }
.partie-mini h3 { margin: 0 0 8px; font-size: .95rem; }
.partie-mini h3 small { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texte); }
.partie-mini ul { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.partie-mini li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--border); }
.partie-mini li a { color: var(--text); text-decoration: none; }
.partie-mini li a:hover { color: var(--primary); text-decoration: underline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .partie-mini { background: var(--surface); } }
:root[data-theme="dark"] .partie-mini { background: var(--surface); }

/* ------------------------------------------------ formules */
.sans-inscription { background: var(--surface-2); border-radius: 12px; padding: 12px 16px; margin: 16px 0 28px; }
.formules { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: stretch; }
.formule { display: flex; flex-direction: column; position: relative; }
.formule h3 { margin-top: 0; }
.formule .prix { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--text); margin: .1em 0; }
.formule .prix small { font-size: .9rem; font-weight: 600; color: var(--muted); }
.formule .prix .avant, .formule .prix .apres { display: block; }
.formule .pour { font-size: .9rem; margin: 0 0 .4em; }
.formule ul { padding-left: 1.1em; margin: .4em 0 1em; color: var(--muted); font-size: .95rem; }
.formule li { margin: .25em 0; }
.formule .btn { margin-top: auto; text-align: center; }
.formule.recommandee { border: 2px solid var(--chaud); box-shadow: 0 10px 30px rgba(217, 115, 26, .18); }
.formule .etiquette { position: absolute; top: -13px; left: 18px; margin: 0; background: var(--chaud); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.note-soutien { margin-top: 20px; color: var(--muted); font-size: .95rem; max-width: 46rem; }

/* ------------------------------------------------ appel final */
.appel { text-align: center; padding: 64px 16px; background: linear-gradient(180deg, var(--surface-2), var(--bg)); }
.appel .chapeau { margin: 0 auto 20px; }
.appel .btn-row { justify-content: center; }
.appel .petit { font-size: .88rem; color: var(--muted); }

@media (max-width: 600px) {
  .bande { padding: 40px 0; }
  .ouverture { padding: 40px 0 110px; }
  .ouverture .hero-relief { height: 100px; }
  .ouverture .chapeau { font-size: 1.08rem; }
}

/* Les formules payantes, en attendant le paiement (Mollie, Qonto) */
.formule .prix.prix-mots { font-size: 1.45rem; }
.btn[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }

/* ------------------------------------------------ téléphone : une page plus courte (maquette du 23/10/2026) */
.soutien-bientot { display: none; margin: 16px 0 0; padding: 12px 16px; border: 1px dashed var(--border); border-radius: 12px; font-size: .95rem; color: var(--muted); }
.soutien-bientot strong { color: var(--text); }
@media (max-width: 600px) {
  /* en-tête : « Accueil » ne sert à rien sur l'accueil */
  .accueil .site-nav a[aria-current="page"] { display: none; }
  /* ouverture : la phrase sur l'auteur attend « La démarche » ; la couverture remonte dans le premier écran */
  .ouverture { padding: 28px 0 86px; }
  .ouverture .hero-relief { height: 76px; }
  .ouverture h1 { margin-bottom: 12px; }
  .ouverture .chapeau-suite { display: none; }
  .ouverture .hero-actions { margin-top: 18px; }
  .vitrine-livre { gap: 20px; }
  .vitrine-livre .couv img { width: 132px; }
  /* feuilleter : les chiffres suffisent */
  #feuilleter .reperes { display: none; }
  /* atelier : les tuiles deviennent des lignes de liens ; « Une question ? » (sans lien) attend le livre */
  #atelier .grille { gap: 8px; }
  #atelier .grille .tuile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
  #atelier .grille .tuile h3 { margin: 0; font-size: 1rem; }
  #atelier .grille .tuile a.suite { flex: none; white-space: nowrap; }
  #atelier .grille .tuile p { display: none; }
  #atelier .grille .tuile:not(:has(a)) { display: none; }
  /* liseuse : le texte, la page de la liseuse, puis le code à essayer */
  #liseuse .grille-2 { display: flex; flex-direction: column; gap: 0; }
  #liseuse .grille-2 > div:first-child { display: contents; }
  #liseuse .liseuse { order: 1; margin: 6px auto 8px; }
  #liseuse .form-code { order: 2; }
  /* démarche : l'icône à côté du titre, le texte sur toute la largeur */
  #demarche .grille { gap: 10px; }
  #demarche .tuile { display: grid; grid-template-columns: 36px 1fr; gap: 8px 12px; align-items: center; padding: 16px; }
  #demarche .tuile .ico-rond { width: 36px; height: 36px; font-size: 1.05rem; }
  #demarche .tuile h3 { margin: 0; }
  #demarche .tuile p { grid-column: 1 / -1; margin: 0; }
  /* formules : tant que le soutien est fermé, la seule carte utile, et une ligne pour les trois autres */
  .formules:has(.btn[aria-disabled="true"]) .formule:has(.btn[aria-disabled="true"]) { display: none; }
  .formules:has(.btn[aria-disabled="true"]) ~ .soutien-bientot { display: block; }
}