/* Classes du site, bâties sur les tokens de tokens/.

   Les conventions — sept registres typographiques, neuf couleurs, les deux
   familles et leurs rôles — sont définies dans CLAUDE.md à la racine, qui fait
   foi. Ne pas les redire ici : toute règle ajoutée doit se rattacher à un
   registre existant.

   Ce fichier est né de la transposition d'une maquette, supprimée depuis (tag
   maquette-approuvee) : site/index.html est désormais la seule référence.
   Restent en dur les valeurs que la maquette fixait elle-même : largeurs de
   filets et d'images, interlettrages de listes, hauteurs de bandeau. */

/* ─── Base ───────────────────────────────────────────────────────────────── */

body {
  margin: 0;
  background-color: var(--surface-page);
  background-image: var(--texture-canvas);
  color: var(--text-body);
  font-family: var(--font-ui);
}

/* Liens de texte — norme définie dans CLAUDE.md, section « États ». */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: var(--transition-color);
}
a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}
a:focus-visible {
  outline: none;
  border-radius: var(--radius-xs);
  box-shadow: var(--focus-ring);
}
.lien--sur-encre { color: var(--text-on-ink); }
::selection { background: var(--apricot); color: var(--ink); }

/* ─── Mise en page ───────────────────────────────────────────────────────── */

.zone {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}

.colonne-lecture { max-width: var(--container-narrow); }

.filet-haut { border-top: 1px solid var(--border-hairline); }

/* ─── Bandeau de titre ───────────────────────────────────────────────────── */

.bandeau {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-sticky);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sticky);
}

.bandeau__zone {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-7);
}

.marque {
  font-family: var(--font-display);
  font-size: var(--title-4);
  font-weight: var(--weight-ui-bold);
  letter-spacing: var(--tracking-title);
  color: var(--text-title);
  white-space: nowrap;
}

/* ─── Boutons ────────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: var(--weight-ui-medium);
  letter-spacing: var(--tracking-ui-tight);
  border-radius: var(--radius-xs);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-color);
}

.bouton--achat {
  font-size: var(--ui-md);
  background: var(--action-bg);
  color: var(--action-fg);
  border: 0;
  padding: 16px 26px;
}
.bouton--achat:hover { background: var(--action-bg-hover); color: var(--action-fg); }

/* Le CTA du bandeau garde le rouge, à l'échelle du bandeau. */
.bandeau__zone .bouton--achat {
  flex: none;
  font-size: var(--ui-base);
  padding: 8px 14px;
}

.bouton--discret {
  flex: none;
  font-size: var(--ui-base);
  color: var(--action-quiet-fg);
  background: transparent;
  border: 1px solid var(--action-quiet-border);
  padding: 8px 14px;
}
.bouton--discret:hover { background: var(--surface-sunken); color: var(--action-quiet-fg); }

/* Rang intermédiaire : plus affirmé que l'action discrète, sans prendre le
   rouge, qui n'appartient qu'aux trois appels à l'achat. */
.bouton--encre {
  font-size: var(--ui-md);
  background: var(--surface-ink);
  color: var(--text-on-ink);
  border: 0;
  padding: 12px 22px;
}
.bouton--encre:hover { background: var(--ink-2); color: var(--text-on-ink); }

.bouton--pleine-largeur { width: 100%; padding: 15px 22px; }

.bouton:focus-visible {
  outline: none;
  border-color: var(--border-ink);
  box-shadow: var(--focus-ring);
}

/* ─── Surtitre ───────────────────────────────────────────────────────────── */

.surtitre {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--ui-eyebrow);
  font-weight: var(--weight-ui-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.surtitre::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--rule-strong);
  display: block;
  flex: none;
}

.surtitre--espace { margin-bottom: var(--space-6); }

.surtitre--sur-encre { color: var(--text-on-ink-muted); }
.surtitre--sur-encre::before { background: var(--text-on-ink-muted); }

/* ─── Titres et textes ───────────────────────────────────────────────────── */

.titre-hero,
.titre-1,
.titre-2,
.titre-3 {
  font-family: var(--font-display);
  font-weight: var(--weight-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-title);
  margin: 0;
}

.titre-hero {
  font-size: var(--title-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  margin: var(--space-6) 0 var(--space-7);
  text-wrap: balance;
}
.titre-hero em { font-style: italic; color: var(--red); }

.titre-1 { font-size: var(--title-1); }
.titre-2 { font-size: var(--title-2); }
.titre-3 { font-size: var(--title-3); }

.titre--sur-encre { color: var(--text-on-ink); max-width: var(--measure-title); }

.chapeau {
  font-family: var(--font-display);
  font-size: var(--read-lede);
  line-height: var(--leading-read);
  color: var(--text-body);
  max-width: var(--measure-lede);
  margin: 0 0 var(--space-9);
}

.texte {
  display: grid;
  gap: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--read-body);
  line-height: var(--leading-read);
  color: var(--text-body);
}
.texte p { margin: 0; }
.texte--mesure { max-width: var(--measure-read); }

.mention {
  font-size: var(--ui-base);
  line-height: var(--leading-ui);
  color: var(--text-muted);
}

/* Pas de largeur propre : la colonne de lecture de 760 px fait déjà la mesure. */
.citation {
  margin: var(--space-10) 0 0;
  padding-left: var(--space-7);
  border-left: 2px solid var(--ochre);
}
.citation p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--quote);
  line-height: var(--leading-quote);
  color: var(--text-title);
  margin: 0 0 var(--space-4);
}
.citation footer { font-size: var(--ui-base); color: var(--text-muted); }

/* ─── Hero ───────────────────────────────────────────────────────────────── */

.hero { padding-top: var(--space-13); }

.hero__grille {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: var(--grid-gap-wide);
  align-items: center;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.hero__couverture { display: flex; justify-content: flex-end; }

.couverture {
  width: 360px;
  max-width: 100%;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-book);
}

/* ─── Sommaire ───────────────────────────────────────────────────────────── */

.sommaire {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

.sommaire__grille {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--grid-gap-wide);
  align-items: start;
}

.sommaire__intro { position: sticky; top: 96px; }
.sommaire__intro .titre-2 { margin-bottom: var(--space-5); max-width: var(--measure-title); }

.chapitres {
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--border-hairline);
}

.chapitre {
  display: grid;
  grid-template-columns: var(--space-7) 1fr;
  gap: var(--space-7);
  padding: var(--space-7) 0;
  border-top: 1px solid var(--border-hairline);
}

.chapitre__numero {
  font-family: var(--font-ui);
  font-size: var(--ui-base);
  font-weight: var(--weight-ui-bold);
  letter-spacing: .08em;
  color: var(--text-muted);
  padding-top: 5px;
}

.chapitre__titre {
  font-family: var(--font-display);
  font-weight: var(--weight-title-strong);
  font-size: var(--title-4);
  line-height: 1.25;
  letter-spacing: var(--tracking-title);
  color: var(--text-title);
  margin: 0 0 var(--space-2);
}

.chapitre__texte {
  font-family: var(--font-display);
  font-size: var(--read-body);
  line-height: var(--leading-read);
  color: var(--text-body);
  margin: 0;
  max-width: 36em;
}

/* ─── Sommaire complet (page /sommaire) ──────────────────────────────────── */

/* La page réemploie .chapitres, .chapitre, .chapitre__numero et
   .chapitre__titre de la page de vente : même filet, même gouttière de
   numérotation. Seuls le groupement en parties et la liste des sections
   lui sont propres. */
.partie + .partie { margin-top: var(--space-12); }
.partie__titre { margin-bottom: var(--space-6); }

/* Conclusion, remerciements, page auteur : un titre seul, sans chapitre. Le
   filet que porterait le premier chapitre est repris par la partie elle-même,
   pour que ces trois-là s'espacent et se soulignent comme toutes les autres. */
.partie--seule { border-bottom: 1px solid var(--border-hairline); }

.sous-chapitres {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-3);
}

/* Le filet ocre de 14 px en puce, comme la liste de l'offre — mais sur papier,
   donc en encre de corps et non en encre claire. */
.sous-chapitres li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: baseline;
  font-family: var(--font-display);
  font-size: var(--read-body);
  line-height: var(--leading-read);
  color: var(--text-body);
}

.sous-chapitres li::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--ochre);
  display: block;
  transform: translateY(-4px);
}

/* La marque devient un lien vers l'accueil sur les pages annexes. Elle garde
   son dessin : ni soulignement, ni passage au rouge. */
.marque--lien { text-decoration: none; color: var(--text-title); }

/* ─── Auteur ─────────────────────────────────────────────────────────────── */

.auteur__grille {
  display: grid;
  grid-template-columns: .42fr 1fr;
  gap: var(--grid-gap-wide);
  align-items: start;
}

/* Registre métadonnée, à l'intérieur de la colonne de lecture en serif : la
   famille et la taille doivent être reposées, elles ne s'héritent pas ici. */
.auteur__contact {
  font-family: var(--font-ui);
  font-size: var(--ui-base);
  line-height: var(--leading-ui);
  color: var(--text-muted);
}

.portrait {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
}

/* ─── Offre ──────────────────────────────────────────────────────────────── */

.offre {
  background-color: var(--surface-ink);
  background-image: var(--texture-canvas-strong);
  scroll-margin-top: 80px;
}

.offre__grille {
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: var(--grid-gap-wide);
  align-items: center;
}

.inclus {
  list-style: none;
  padding: 0;
  margin: var(--space-9) 0;
  display: grid;
  gap: var(--space-5);
}

.inclus li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: baseline;
  font-family: var(--font-display);
  font-size: var(--read-body);
  line-height: var(--leading-read);
  color: var(--text-on-ink-body);
}

.inclus li::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--ochre);
  display: block;
  transform: translateY(-4px);
}

.prix {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.prix__montant {
  font-family: var(--font-display);
  font-weight: var(--weight-title);
  font-size: var(--title-1);
  line-height: 1;
  letter-spacing: var(--tracking-title);
  color: var(--text-on-ink);
}

.prix__mention { font-size: var(--ui-base); color: var(--text-on-ink-muted); }

/* ─── Panneau de commande ────────────────────────────────────────────────── */

.panneau {
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
  padding: var(--panel-padding);
}

.panneau__formulaire { display: grid; gap: var(--space-6); }

.panneau__intro p {
  font-size: var(--ui-base);
  color: var(--text-muted);
  margin: 0;
}
.panneau__intro .titre-3 { margin-bottom: var(--space-3); }

.champ { display: grid; gap: var(--space-3); }

.champ__libelle {
  font-size: var(--ui-eyebrow);
  font-weight: var(--weight-ui-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.champ input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-ui);
  font-size: var(--ui-md);
  color: var(--text-title);
  background: var(--paper);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  outline: none;
  transition: var(--transition-color);
}

.champ input:focus {
  border-color: var(--border-ink);
  box-shadow: var(--focus-ring);
}

.panneau__reassurance {
  font-size: var(--ui-base);
  line-height: var(--leading-ui);
  color: var(--text-muted);
  margin: 0;
  text-align: center;
}

/* ─── Pied de page ───────────────────────────────────────────────────────── */

.pied__zone {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-9) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--ui-base);
  color: var(--text-muted);
}

.pied__liens { display: flex; gap: var(--space-7); align-items: center; }

/* Icônes de partage. Pas de soulignement : c'est une image, pas un mot. Les
   fichiers sont en encre pleine ; à 55 % sur le papier, elles retrouvent le
   poids de --text-muted, la couleur du reste du pied de page. */
.partage {
  display: flex;
  text-decoration: none;
  opacity: .55;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.partage:hover { opacity: 1; }
.partage img { display: block; }

/* ─── Rupture à 1100 px : tout en une colonne ────────────────────────────── */

@media (max-width: 1100px) {
  .hero__grille,
  .sommaire__grille,
  .auteur__grille,
  .offre__grille {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .sommaire__intro { position: static; }
  .hero__couverture { justify-content: flex-start; }
  .zone,
  .bandeau__zone,
  .pied__zone {
    padding-left: var(--gutter-sm);
    padding-right: var(--gutter-sm);
  }
}

/* Espacements ponctuels après un titre */
.texte--espace { margin-top: var(--space-8); }
.titre--espace { margin-bottom: var(--space-10); }

/* ─── Avis de lecteurs ───────────────────────────────────────────────────── */

.avis__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-9);
  flex-wrap: wrap;
}

.avis__position {
  font-size: var(--ui-base);
  font-weight: var(--weight-ui-bold);
  letter-spacing: .08em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Source dite une fois pour les cinq cartes : leurs signatures ne portent plus
   que le nom du lecteur. En note de pied de section, jamais entre le titre et
   les cartes, où une ligne se lirait comme un second sous-titre. Registre
   métadonnée, d'où .mention pour le reste. */
.avis__source { margin: var(--space-6) 0 0; }

.avis__scene { position: relative; margin-top: var(--space-10); }

/* Chevrons de défilement, posés sur les cartes elles-mêmes, à mi-hauteur et
   alignés sur leur bord. Action discrète : le filet d'encre et le survol sable
   viennent de .bouton--discret, seul le gabarit carré est redéfini ici. */
.avis__fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  /* Opaque, contrairement à l'action discrète : le chevron couvre la carte et
     doit masquer le texte qui passe dessous, pas le laisser transparaître. */
  background: var(--surface-raised);
}
.avis__fleche--precedent { left: 0; }
.avis__fleche--suivant { right: 0; }
.avis__fleche:disabled { opacity: .40; cursor: default; background: var(--surface-raised); }

.avis__piste {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.avis__piste::-webkit-scrollbar { display: none; }

.avis-carte {
  margin: 0;
  flex: 0 0 calc((100% - var(--grid-gap)) / 2);
  scroll-snap-align: start;
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-top: 2px solid var(--ochre);
  border-radius: var(--radius-sm);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* 27 px : exception graphique déclarée dans CLAUDE.md. Valeur en dur et non
   var(--quote), pour ne pas coupler la taille des étoiles à celle des citations. */
.avis-carte__etoiles {
  font-size: 27px;
  letter-spacing: .24em;
  color: var(--terracotta);
}

.avis-carte blockquote p { margin: 0 0 var(--space-5); }
.avis-carte blockquote p:last-child { margin-bottom: 0; }

.avis-carte blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--read-body);
  line-height: var(--leading-read);
  color: var(--text-body);
}

.avis-carte figcaption {
  margin-top: auto;
  font-size: var(--ui-base);
  color: var(--text-muted);
}

/* Carte en attente de son avis réel : ni étoiles, ni citation, ni signature,
   pour qu'aucun visiteur ne puisse la prendre pour un témoignage. */
.avis-carte--attente { border-top-color: var(--border-hairline); }
.avis-carte--attente blockquote {
  font-style: normal;
  font-family: var(--font-ui);
  font-size: var(--ui-md);
  line-height: var(--leading-ui);
  color: var(--text-muted);
}

@media (max-width: 1100px) {
  .avis-carte { flex: 0 0 100%; }
}

/* Chapitres d'une section du sommaire : énumération en ligne, séparée par le
   point médian de la marque. Registre métadonnée — grotesque, petit, discret. */
.chapitre__contenu {
  font-family: var(--font-ui);
  font-size: var(--ui-md);
  line-height: var(--leading-ui);
  color: var(--text-muted);
  margin: var(--space-4) 0 0;
  max-width: 36em;
}

/* Lien vers le sommaire complet : à la suite de la liste, dont il prolonge
   la lecture. Aligné sur la colonne de droite, sous le filet de clôture. */
/* Aligné sur le texte des sections, pas sur leur numéro : le retrait vaut la
   colonne du numéro plus la gouttière, toutes deux réglées sur --space-7. */
.chapitres-suite {
  margin: var(--space-7) 0 0;
  padding-left: calc(var(--space-7) * 2);
  font-family: var(--font-ui);
  font-size: var(--ui-md);
}

/* ─── Outils gratuits ────────────────────────────────────────────────────── */

/* Même traitement que le sommaire : creux de sable entre deux filets. C'est le
   second creux de la page, et il est assumé — il détache les trois documents
   du texte courant, et le bandeau d'encre qui suit reste la seule surface
   forte. */
.outils {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

/* Aucune mesure, contrairement aux autres titres de section : à 22ch celui-ci
   tomberait sur trois lignes, alors qu'il tient sur une dans le conteneur
   entier. `balance` répartit le report en deux lignes égales quand la fenêtre
   ne suffit plus. */
.outils .titre-2 { text-wrap: balance; }

.outils__liste {
  list-style: none;
  padding: 0;
  margin: var(--space-10) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

/* Carte ordinaire du système : filet 1 px, blanc cassé, sans ombre. Pas de
   filet ocre en tête — celui-ci marque un avis ou une citation, et l'étendre
   à un troisième usage lui ferait perdre ce qu'il dit. */
.outil {
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* La page posée à plat, comme la couverture : un filet, l'angle de 2 px des
   images, aucune ombre ni perspective. Son blanc se détache du blanc cassé de
   la carte, qui se détache lui-même du sable de la section. */
.outil__apercu {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xs);
}

/* Légende et non titre : la vignette porte déjà le titre du document, en gros
   et en serif. Le répéter dans le même registre le dirait deux fois. Mais il
   doit rester du texte — dans l'image il ne fait que 12,6 px, sous le plancher
   de 16, et il n'est ni sélectionnable ni lisible par un lecteur d'écran ou un
   moteur de réponse. Reste un `h3` : c'est bien le nom du document. */
.outil__nom {
  /* Posée sous la vignette, pas épinglée au bas de la carte : les trois
     vignettes ayant la même hauteur, les légendes démarrent alors toutes à la
     même ligne. Avec `margin-top: auto` c'étaient les bas qui s'alignaient, et
     un nom replié sur deux lignes décalait sa première. */
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--ui-base);
  font-weight: var(--weight-ui-medium);
  line-height: var(--leading-ui);
  letter-spacing: 0;
  color: var(--text-title);
}

/* Le point médian de la marque sépare le nom du format. */
.outil__format { color: var(--text-muted); }
.outil__format::before { content: "· "; }

/* Bloc plat, encadré d'un filet : l'ombre reste au seul panneau de commande. */
.outils__demande {
  margin-top: var(--space-10);
  padding: var(--panel-padding);
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: var(--grid-gap);
  align-items: center;
}
.outils__demande .titre-3 { margin-bottom: var(--space-3); }
.outils__demande .mention { margin: 0; }

.outils__saisie {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.outils__saisie .champ { flex: 1 1 220px; min-width: 0; }

/* Réponse et vérification occupent la largeur entière : elles commentent le
   formulaire, pas la colonne de saisie. */
.outils__verification,
.outils__reponse { grid-column: 1 / -1; }

.outils__reponse {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--ui-base);
  line-height: var(--leading-ui);
  color: var(--text-muted);
}
.outils__reponse--echec { color: var(--red); }

@media (max-width: 1100px) {
  .outils__liste { grid-template-columns: 1fr; }
  .outils__demande { grid-template-columns: 1fr; align-items: start; }
}

/* .outils__saisie est en flex : sans cette ligne, l'attribut `hidden` posé
   après un envoi réussi ne masquerait rien du tout. */
.outils__saisie[hidden] { display: none; }