/* ANAELA, l'accueil, d'après la maquette « Anaela Landing Mobile ».
 *
 * Feuille CHARGÉE APRÈS public.css, et seulement sur l'accueil. Elle ne
 * modifie aucune règle existante : les pages légales ne sont pas dessinées,
 * elles gardent leur habillage. Réviser ce fichier et `pages.accueil()`
 * rend l'ancien accueil, tel quel.
 *
 * Aucun nom de classe n'est repris de public.css. Les homonymes, `.section`,
 * `.bandeau`, `.page-photo`, appartiennent à l'ancien accueil et aux pages
 * légales ; deux règles du même nom dans deux feuilles finissent toujours par
 * s'annuler l'une l'autre, au moment où on a le moins envie de le chercher.
 *
 * Toutes les valeurs viennent de /jetons.css. Aucune couleur, aucune taille
 * n'est écrite en clair ici, sauf les cotes de mise en page relevées une à
 * une sur la maquette, qui n'ont pas de jeton.
 */

body.page-accueil {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--text-body-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
:where(body.page-accueil) a { color: var(--text-primary); text-decoration: none; }
:where(body.page-accueil) a:hover { color: var(--grey-600); }
body.page-accueil h1,
body.page-accueil h2,
body.page-accueil h3 { margin: 0; font-weight: var(--weight-regular); }
body.page-accueil p { margin: 0; }

/* La maquette ne couvre que le téléphone. Au-delà, la même colonne, centrée
   sur un fond qui s'étend, pas un écran de bureau inventé. */
.colonne-accueil {
  width: 100%;
  max-width: var(--colonne-max);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--surface-page);
  display: flex;
  flex-direction: column;
}

/* ---------- l'en-tête, collante ---------- */

.entete-accueil {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface-header);
  backdrop-filter: var(--blur-header);
  -webkit-backdrop-filter: var(--blur-header);
  border-bottom: var(--border-hairline);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: var(--header-pad-y) var(--gouttiere);
}
.marque-accueil {
  font-family: var(--font-display);
  font-size: var(--wordmark-size); line-height: 1;
  letter-spacing: var(--wordmark-track);
  text-transform: uppercase;
}
.bouton-essayer {
  padding: 10px 13px;
  background: var(--action-fill); color: var(--text-on-dark);
  font-size: 14px; line-height: 1;
  letter-spacing: var(--label-cta-track); text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--transition-hover);
}
.bouton-essayer:hover { background: var(--action-fill-hover); color: var(--text-on-dark); }

/* ---------- l'image du bandeau ---------- */

/* La fente d'image de la maquette tenait la place, en attendant une
   photographie. En voici une : les livres Anaela, chacun dans la couleur et
   le titre de sa famille. */
.bandeau-image {
  height: var(--hero-image-h);
  background: var(--surface-image);
  overflow: hidden;
}
.bandeau-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------- le titre ---------- */

.bloc-titre { padding: 26px var(--gouttiere) 0; text-align: center; }
.surtitre-bandeau {
  font-size: var(--label-size); line-height: 1.35;
  letter-spacing: var(--label-track); text-transform: uppercase;
  color: var(--text-muted);
}
.bloc-titre h1 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: var(--display-hero-size); line-height: var(--display-hero-line);
  text-transform: uppercase; text-wrap: balance;
}
.chapo-accueil {
  margin-top: 16px;
  font-weight: var(--weight-light);
  font-size: var(--text-lead-size); line-height: var(--text-lead-line);
  color: var(--text-secondary); text-wrap: pretty;
}

/* ---------- les deux appels ---------- */

.appels {
  padding: 22px var(--gouttiere) 0;
  display: flex; flex-direction: column; gap: 9px;
}
.bouton-plein, .bouton-trait, .bouton-clair {
  display: block; width: 100%; text-align: center;
  font-size: var(--label-cta-size); line-height: 1;
  letter-spacing: var(--label-cta-track); text-transform: uppercase;
  transition: background var(--transition-hover), color var(--transition-hover);
}
.bouton-plein {
  padding: 17px;
  background: var(--action-fill); color: var(--text-on-dark);
}
.bouton-plein:hover { background: var(--action-fill-hover); color: var(--text-on-dark); }
.bouton-trait { padding: 16px; border: var(--border-strong); }
.bouton-trait:hover { background: var(--action-fill); color: var(--text-on-dark); }
.bouton-clair {
  padding: 16px;
  background: var(--ink-inverse); color: var(--ink);
}
.bouton-clair:hover { background: var(--grey-300); color: var(--ink); }

/* Garde-fou : le prix est l'information qui decide l'achat, il doit se lire.
   Audit de marque du 26 septembre 2026 (marketing/audit-branding), element
   Jost : en --label-size (9,5 px) et --text-muted sur blanc, le contraste
   etait d'environ 2,8 pour 1, sous le seuil de lisibilite (WCAG AA, 4,5 pour
   1). --text-body-size (13,5 px, deja utilise plus bas dans ce fichier) et
   --text-primary (l'encre) donnent un contraste d'environ 20 pour 1. */
.meta-prix {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 4px;
  font-size: var(--text-body-size); line-height: 1.4;
  letter-spacing: 0; text-transform: none; text-align: center;
  color: var(--text-primary);
}
.meta-prix .point { width: 3px; height: 3px; background: var(--grey-600); }

/* ---------- les sections ---------- */

.pan { padding: var(--section-gap) var(--gouttiere) 0; }
.pan-gris {
  margin-top: var(--section-gap);
  padding: 24px var(--gouttiere);
  background: var(--surface-muted);
}
.pan-sombre {
  margin-top: var(--section-gap);
  padding: 30px var(--gouttiere);
  background: var(--surface-inverse); color: var(--text-on-dark);
}
.surtitre-section {
  font-size: var(--label-size); line-height: 1.35;
  letter-spacing: var(--label-section-track); text-transform: uppercase;
  color: var(--text-primary);
}
.pan h2 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: var(--display-section-size); line-height: var(--display-section-line);
  text-transform: uppercase;
}
.pan-sombre h2 {
  font-family: var(--font-display);
  font-size: var(--display-cta-size); line-height: var(--display-cta-line);
  text-transform: uppercase; color: var(--text-on-dark);
}
.texte {
  margin-top: 12px;
  font-weight: var(--weight-light);
  font-size: var(--text-body-size); line-height: var(--text-body-line);
  color: var(--text-secondary);
}
.pan-sombre .texte { color: var(--text-on-dark-muted); }
.pan-sombre .bouton-clair { margin-top: 18px; }

/* ---------- les trois étapes ---------- */

.etapes { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; }
.etape {
  border-top: 1px solid var(--line-step);
  padding: 16px 0;
  display: flex; gap: 14px; align-items: flex-start;
}
.etape-rang {
  flex: none; width: 26px;
  font-size: 14px; line-height: 1.5;
  letter-spacing: var(--label-nav-track); color: var(--text-muted);
}
.etape-dedans { flex: 1; min-width: 0; }
.etape-titre {
  display: block;
  font-family: var(--font-display);
  font-size: var(--display-step-size); line-height: var(--display-step-line);
  text-transform: uppercase;
}
.etape-texte {
  display: block; margin-top: 7px;
  font-weight: var(--weight-light);
  font-size: var(--text-body-size); line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------- la double page ---------- */

.double-page {
  display: flex; gap: 2px; margin-top: 18px;
  background: var(--surface-muted); padding: 10px;
}
.page-gauche {
  flex: 1; background: #EFECE7;
  display: flex; align-items: center; justify-content: center; padding: 0 8px;
}
.page-droite {
  flex: 1; background: var(--surface-card);
  border: var(--border-hairline); padding: 13px 12px;
  display: flex; flex-direction: column;
}
/* Les deux vraies images de « Le couscous de mamie » : plus de filets à
   caler, l'image remplit le cadre que le mime tenait. */
.page-gauche-exemple, .page-droite-exemple { padding: 0; overflow: hidden; }
.page-image-exemple {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* ---------- les éditions ---------- */

.editions { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.edition { border: var(--border-hairline); padding: 20px 18px; }
.edition-vive { border: var(--border-strong); }
.edition-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.edition h3, .edition-prix {
  font-family: var(--font-display);
  font-size: var(--display-price-size); line-height: var(--display-price-line);
}
.edition h3 { text-transform: uppercase; }
.edition-tag {
  font-size: var(--label-size); line-height: 1.35;
  letter-spacing: var(--label-cta-track); text-transform: uppercase;
  color: var(--text-muted);
}
.edition .texte { margin-top: 10px; }
.edition .bouton-plein { margin-top: 14px; padding: 15px; font-size: var(--label-cta-small-size); }

/* ---------- les questions ---------- */

.questions { display: flex; flex-direction: column; margin-top: 12px; }
.question { border-top: var(--border-hairline); }
.question summary {
  list-style: none; cursor: pointer;
  padding: 15px 0;
  display: flex; align-items: baseline; gap: 12px;
}
.question summary::-webkit-details-marker { display: none; }
.question-texte {
  flex: 1;
  font-size: var(--text-faq-size); line-height: var(--text-faq-line);
}
/* Le signe bascule avec l'état natif de `details` : rien à tenir en script. */
.question-signe {
  flex: none;
  font-weight: var(--weight-light); font-size: 16px; line-height: 1;
  color: var(--grey-300);
}
.question-signe::before { content: "+"; }
.question[open] .question-signe::before { content: "\2013"; }
.question-reponse {
  padding-bottom: 15px;
  font-weight: var(--weight-light);
  font-size: var(--text-body-size); line-height: var(--text-body-line);
  color: var(--text-secondary);
}

/* ---------- le pied ---------- */

.pied-accueil { padding: 22px var(--gouttiere) 26px; color: var(--text-muted); }
.pied-accueil-liens {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  font-size: var(--label-size); line-height: 1.4;
  letter-spacing: var(--label-nav-track); text-transform: uppercase;
}
/* Pas dessinée par la maquette : reprise du pied existant, habillée à ses
   jetons. En bas de casse, c'est une phrase, pas un libellé. */
.pied-accueil a { color: inherit; }
.pied-accueil a:hover { color: var(--text-primary); }

@media print {
  .entete-accueil, .appels, .bouton-essayer { display: none; }
  .colonne-accueil { max-width: none; }
}

/* ==========================================================================
 * L'ÉCRAN LARGE
 *
 * Tout ce qui suit est sous `@media (min-width: 900px)`, la bascule que la
 * maquette pose elle-même. En dessous, rien ne change : la colonne de 390 px
 * dessinée pour le téléphone, telle quelle. Au-dessus, la page occupe la
 * largeur, à la marge de 48 px de la maquette bureau, et les sections qui se
 * lisent à deux se mettent à deux.
 *
 * Aucune couleur, aucune fonte, aucun libellé n'est touché ici : la charte est
 * la même d'un support à l'autre, c'est la COMPOSITION qui change.
 * ========================================================================== */

@media (min-width: 900px) {
  :root { --marge-accueil: max(48px, (100% - 1440px) / 2); }

  /* Le fond gris était la marge du téléphone. Sur un écran large la page est
     la surface : elle va de bord à bord, et ses filets aussi. */
  body.page-accueil { background: var(--surface-page); }
  .colonne-accueil { max-width: none; }

  .entete-accueil { padding: 18px var(--marge-accueil); }
  .marque-accueil { font-size: 22px; }
  .bouton-essayer { padding: 13px 20px; font-size: 14px; }

  /* ---------- le bandeau ---------- */

  /* Le texte à gauche, l'image à droite, et un filet dessous : c'est la
     première chose que la maquette bureau change, et celle qui décide de
     l'allure de toute la page. L'image passe en second dans le HTML parce
     qu'elle vient après le titre sur un téléphone ; ici on la renvoie dans sa
     colonne, sans toucher à l'ordre de lecture. */
  .bandeau-accueil {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: 1fr auto;
    border-bottom: var(--border-hairline);
  }
  .bandeau-accueil .bandeau-image {
    grid-column: 2; grid-row: 1 / span 2;
    height: auto; min-height: 620px;
    border-left: var(--border-hairline);
  }
  .bandeau-accueil .bloc-titre {
    grid-column: 1; grid-row: 1;
    align-self: end; text-align: left;
    padding: 76px 56px 0 var(--marge-accueil);
  }
  .bandeau-accueil .appels {
    grid-column: 1; grid-row: 2;
    align-self: start; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 10px; padding: 30px 56px 72px var(--marge-accueil);
  }
  .bloc-titre h1 { max-width: 14em; font-size: clamp(40px, 4.6vw, 66px); }
  .chapo-accueil { max-width: 34em; font-size: 17px; }
  /* Un appel à l'action ne prend pas la largeur d'une page : il prend la
     largeur de ce qu'il dit. */
  .appels .bouton-plein, .appels .bouton-trait { width: auto; padding: 18px 26px; }
  .appels .meta-prix { flex-basis: 100%; justify-content: flex-start; margin-top: 8px; }

  /* ---------- les sections ---------- */

  .pan { padding: 64px var(--marge-accueil) 0; }
  .pan-gris, .pan-sombre { margin-top: 0; padding: 64px var(--marge-accueil); }
  .pan h2 { font-size: 42px; max-width: 16em; }
  .pan .texte { max-width: 44em; font-size: 16px; }

  /* Les trois temps, côte à côte : ils se lisent ensemble, c'est une suite. */
  .etapes {
    display: grid; gap: 0 40px; margin-top: 26px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .etape { border-top: 1px solid var(--line-strong); padding: 20px 0 0; display: block; }
  .etape-rang { width: auto; }
  .etape-titre { margin-top: 14px; font-size: 26px; line-height: 1.12; }
  .etape-texte { max-width: 26em; font-size: 16px; }

  /* ---------- la double page ---------- */

  /* La page du livre est l'objet de la section : elle passe à droite, à sa
     taille, pendant que le texte qui l'annonce tient sa colonne. */
  #exemple {
    display: grid; gap: 48px; align-items: center;
    grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
    background: var(--surface-muted); margin-top: 0;
    padding: 64px var(--marge-accueil);
  }
  #exemple > .exemple-texte { grid-column: 1; }
  #exemple > .double-page {
    grid-column: 2; margin-top: 0;
    background: var(--surface-card); padding: 16px; gap: 3px;
  }
  #exemple .page-gauche, #exemple .page-droite { aspect-ratio: .707; }

  /* ---------- les éditions ---------- */

  /* Une seule édition, au milieu de la page, son libellé au-dessus d'elle :
     la carte garde la largeur d'une colonne du gabarit à deux cartes plutôt
     que d'étirer un livre relié sur toute la page. Le dedans de la carte
     reste aligné à gauche, un prix et un bouton centrés ne se lisent pas
     bien sur une largeur de carte. */
  #offre { text-align: center; }
  #offre .edition { text-align: left; }
  .editions {
    display: grid; gap: 24px; margin: 24px auto 0; max-width: 488px;
    grid-template-columns: minmax(0, 1fr);
  }
  .edition { padding: 30px 28px; display: flex; flex-direction: column; }
  .edition h3, .edition-prix { font-size: 30px; }
  .edition .texte { font-size: 16px; }
  .edition .bouton-plein {
    width: auto; align-self: flex-start; margin-top: auto; padding: 16px 22px;
  }

  /* ---------- les questions ---------- */

  /* Le libellé au-dessus de la file, l'ensemble au milieu de la page. La file
     garde ses 760 px : une question qui traverse l'écran perd son signe « + »
     de vue. Les questions elles-mêmes restent alignées à gauche, sans quoi le
     texte et le signe ne se font plus face. */
  .pan:has(> .questions) { text-align: center; }
  .questions { margin: 24px auto 0; max-width: 760px; text-align: left; }
  .question summary { padding: 19px 0; }
  .question-texte { font-size: 17px; }
  .question-reponse { max-width: 52em; font-size: 16px; }

  /* ---------- le dernier appel, et le pied ---------- */

  /* Le dernier appel : ce qu'on promet à gauche, le bouton à droite. La
     phrase suit le titre, elle ne se met pas à côté de lui, d'où les deux
     rangées de la colonne de gauche. */
  .pan-sombre {
    display: grid; align-items: center; gap: 14px 48px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .pan-sombre h2 { grid-column: 1; font-size: 40px; max-width: 14em; }
  .pan-sombre .texte { grid-column: 1; margin-top: 0; max-width: 38em; }
  .pan-sombre .bouton-clair {
    grid-column: 2; grid-row: 1 / span 2;
    width: auto; margin-top: 0; padding: 18px 26px;
  }

  .pied-accueil { padding: 28px var(--marge-accueil) 34px; }
}


/* ==========================================================================
 * L'ACCUEIL COURT du 7 octobre 2026 : sans image, sans capitales espacées.
 * Les blocs d'avant (bandeau photo, double page, édition, étapes) ne sont
 * plus dans la page ; leurs règles plus haut ne servent plus.
 * ========================================================================== */
:root { --gout-accueil: 20px; }
.colonne-accueil { min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
.entete-accueil, .bloc-titre, .pan, .pan-sombre, .pied-accueil {
  padding-left: var(--gout-accueil); padding-right: var(--gout-accueil); }
body.page-accueil h1, body.page-accueil h2, body.page-accueil h3 {
  text-transform: none; letter-spacing: 0; }
.bloc-titre { padding-top: 32px; text-align: left; }
.bloc-titre h1 { font-size: 36px; line-height: 1.1; margin-top: 0; }
.chapo-accueil { font-size: 18px; line-height: 1.55; color: var(--grey-600); }
.bloc-titre .bouton-plein { margin-top: 24px; }
.bouton-plein, .bouton-clair, .bouton-trait {
  min-height: 52px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; letter-spacing: .02em; text-transform: none; font-weight: 500; }
.pan h2 { font-size: 28px; }
.pan-sombre h2 { font-size: 26px; }
.blocs { display: flex; flex-direction: column; gap: 22px; padding-top: 34px; }
.bloc-argument { border-top: var(--border-hairline); padding-top: 16px; }
.bloc-argument h3 { font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.bloc-argument p { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--grey-600); }
.paliers { list-style: none; margin: 14px 0 0; padding: 0; }
.palier { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-top: var(--border-hairline); padding: 14px 0; }
.palier-dedans { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.palier-nom { font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.palier-pages { font-size: 16px; color: var(--grey-600); }
.palier-prix { font-family: var(--font-display); font-size: 24px; white-space: nowrap; }
.paliers + .meta-prix { margin-top: 10px; }
.meta-prix { justify-content: flex-start; text-align: left; }
.question-texte { font-size: 16px; }
.question summary { min-height: 48px; align-items: center; }
.pied-accueil { padding-top: 22px; padding-bottom: max(26px, env(safe-area-inset-bottom)); }
.pied-accueil-liens { flex-wrap: nowrap; justify-content: space-between; gap: 8px;
  font-size: 14px; letter-spacing: 0; text-transform: none; }
.pied-accueil-liens a { white-space: nowrap; }
em, i, cite { font-style: normal; }

@media (min-width: 900px) {
  .colonne-accueil { max-width: 720px; }
  .bloc-titre h1 { font-size: 52px; max-width: none; }
  .pan { padding-left: var(--gout-accueil); padding-right: var(--gout-accueil); }
  .pan h2 { font-size: 34px; max-width: none; }
}

/* Sur un appareil tactile, le survol ne colle pas au doigt (lot 5). */
@media (hover: none) {
  .bouton-plein:hover, .bouton-essayer:hover { background: var(--action-fill); color: var(--text-on-dark); }
  .bouton-clair:hover { background: var(--ink-inverse); color: var(--ink); }
}