/*
Theme Name: Retrouver la clarté
Theme URI: https://www.retrouverlaclarte.fr/
Author: Chan Ing
Description: Thème bloc sur mesure du site du livre Retrouver la clarté. Contenus 100 % modifiables dans l'éditeur.
Version: 1.10.2
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: retrouver-la-clarte
*/

:root {
  --encre: #111111;
  --texte: #2b2b2b;
  --blanc: #ffffff;
  --trait: #d9d9d9;
  --gris: #5f5f5f;
  --police: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --col-a: 25%;
}

*, *::before, *::after { box-sizing: border-box; }
/* les ancres s'arrêtent sous l'en-tête fixe (hauteur mesurée par app.js, valeur de repli sinon) */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--rlc-entete, 56px) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wp-site-blocks { padding: 0 28px; }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
cite { font-style: normal; }
em, i { font-style: italic; } /* Inter Tight italique, auto-hébergée (theme.json) */

/* Gutenberg ajoute des marges entre blocs : neutralisées à la source
   (blockGap: 0px dans theme.json) et ici à spécificité nulle, pour ne
   jamais écraser les marges des composants. */
:where(.wp-block-group) > :where(*) { margin-block: 0; }
.wp-block-image, .wp-block-quote { margin: 0; }

.wp-block-group.page {
  max-width: 1440px;
  margin: 0 auto;
  border-left: 1px solid var(--trait);
  border-right: 1px solid var(--trait);
  overflow: hidden;
  overflow: clip; /* « clip » ne bloque pas l'en-tête collant ; les navigateurs anciens gardent « hidden » */
}

/* ---------- Typographie commune ---------- */
.texte {
  font-size: 17px;
  line-height: 1.6;
  color: var(--texte);
  max-width: 38em;
}
.texte--grand { font-size: 19px; line-height: 1.55; color: var(--encre); }
.surtitre {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
}
.legende { font-size: 13px; line-height: 1.4; color: var(--gris); }
.titre-section {
  font-size: clamp(32px, 3.4vw, 50px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.015em;
}
.titre-moyen {
  font-size: clamp(28px, 2.5vw, 36px);
  line-height: 1.2;
  font-weight: 400;
}
.parenthese { font-size: 14px; letter-spacing: .02em; }

/* Carré noir : marqueur de grille, toujours en pseudo-élément */
.heros__pied::before,
.parties::after,
.doute::after,
.auteur__marge::after,
.lecteurs-tete::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  background: var(--encre);
  z-index: 2;
}

/* ---------- En-tête ---------- */
/* Il reste en haut pendant la lecture (sous la barre d'administration quand elle est là). */
header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 20;
  background: var(--blanc);
}
.entete {
  position: relative;
  padding: 0 20px;
  border-bottom: 1px solid var(--trait);
}
.entete .wp-block-navigation.entete__nav { display: block; font-size: 14px; }
.entete .wp-block-navigation.entete__nav .wp-block-navigation__container {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr repeat(2, auto);
  grid-template-columns: repeat(3, auto) 1fr auto;
  column-gap: 36px;
  row-gap: 0;
  align-items: center;
}
.entete .wp-block-navigation .wp-block-navigation-item__content { display: inline-block; padding: 16px 0; }
.entete .wp-block-navigation .entete__droite { justify-self: end; }
.entete__mono {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}
.entete__mono a { display: inline-block; padding: 6px; }
.entete__mono a:hover { text-decoration: none; }

/* ---------- 1 · Héros ---------- */
.heros {
  display: grid;
  grid-template-columns: 7% 38% 1fr;
  border-bottom: 1px solid var(--trait);
}
.heros::before { content: ""; border-right: 1px solid var(--trait); }
.heros__livre {
  border-right: 1px solid var(--trait);
  padding: 32px 9% 56px;
}
.wp-block-image.livre {
  box-shadow: 0 34px 40px -12px rgba(0,0,0,.30), 0 8px 12px rgba(0,0,0,.12);
  aspect-ratio: 2 / 3;
}
.wp-block-image.livre img { width: 100%; height: 100%; object-fit: cover; }

.heros__droite {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.heros__tete {
  padding: 34px 32px 64px;
  border-bottom: 1px solid var(--trait);
}
.heros__titre {
  font-size: clamp(36px, 3.9vw, 60px);
  line-height: 1.04;
  max-width: 14em;
  text-wrap: balance;
  font-weight: 500;
  letter-spacing: -.03em;
}
.heros__sous-titre {
  margin-top: 22px;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.25;
  letter-spacing: -.01em;
  max-width: 19em;
}
.heros__intro {
  margin-top: 26px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--texte);
  max-width: 30em;
}
.heros__recit {
  display: grid;
  grid-template-columns: 38% 1fr;
}
.heros__accroche {
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.2;
  letter-spacing: -.01em;
  padding: 28px 32px;
}
.wp-block-quote.heros__citation {
  padding: 28px 32px 40px;
  border-left: 1px solid var(--trait);
}
.heros__citation p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--texte);
  max-width: 32em;
}
.heros__citation p + p { margin-top: 12px; color: var(--encre); }
.heros__citation cite { display: block; margin-top: 18px; font-size: 13px; line-height: 1.4; color: var(--gris); }
.heros__pied {
  position: relative;
  border-top: 1px solid var(--trait);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 28px;
  padding: 14px 20px;
}
.heros__pied { align-items: center; }
.heros__pied a { display: inline-block; padding: 6px 0; }
.heros__pied::before { left: 38%; top: -22px; }

/* ---------- 2 · Démarche ---------- */
.demarche { border-bottom: 1px solid var(--trait); }
.demarche__titre-rangee {
  display: grid;
  grid-template-columns: var(--col-a) 1fr;
  border-bottom: 1px solid var(--trait);
}
.demarche__titre-rangee::before { content: ""; border-right: 1px solid var(--trait); }
.demarche__titre-rangee .titre-section { padding: 30px 32px 38px; }
.demarche__grille {
  display: grid;
  grid-template-columns: var(--col-a) 1fr;
}
.demarche__etiquette {
  border-right: 1px solid var(--trait);
  padding: 34px 32px 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.etape {
  display: grid;
  grid-template-columns: 72px 1fr 27%;
  border-bottom: 1px solid var(--trait);
}
.etape:last-child { border-bottom: 0; }
.etape__num {
  padding: 30px 0 0 32px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gris);
}
.etape__corps { padding: 26px 40px 30px 12px; }
.etape__titre {
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -.01em;
}
.etape__titre strong { font-weight: 500; }
.etape__corps .texte { margin-top: 10px; max-width: 34em; }
.etape__ref {
  padding: 30px 24px;
  border-left: 1px solid var(--trait);
  font-size: 16px;
  line-height: 1.4;
}
.etape__ref .surtitre { margin-bottom: 6px; }

/* ---------- 3 · Les trois parties ---------- */
.parties {
  position: relative;
  display: grid;
  grid-template-columns: var(--col-a) 1fr;
  border-bottom: 1px solid var(--trait);
}
.parties__gauche {
  border-right: 1px solid var(--trait);
  padding: 42px 32px 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.parties__gauche .titre-moyen { max-width: 7.6em; }
.parties__liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.partie {
  padding: 42px 28px 40px;
  border-right: 1px solid var(--trait);
  display: flex;
  flex-direction: column;
}
.partie:last-child { border-right: 0; }
.partie__titre {
  margin-top: 14px;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -.015em;
}
.partie__exergue {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--texte);
}
.partie__chapitres { margin-top: auto; padding-top: 30px; }
.partie__chapitres summary {
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--trait);
}
.partie__chapitres summary::-webkit-details-marker { display: none; }
.partie__chapitres summary::before { content: "( + ) "; }
.partie__chapitres[open] summary::before { content: "( – ) "; }
.partie__chapitres ol {
  list-style: decimal;
  padding-left: 1.6em;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texte);
}
.partie__chapitres li + li { margin-top: 4px; }
.parties::after { left: calc(var(--col-a) - 11px); bottom: -11px; }

/* ---------- 4 · Bandeau ---------- */
.bandeau { position: relative; border-bottom: 1px solid var(--trait); }
.bandeau::before {
  /* bande de grille au-dessus de la photo : 25 % | 31 % | 13 % | 31 % */
  content: "";
  display: block;
  height: 110px;
  border-bottom: 1px solid var(--trait);
  background:
    linear-gradient(var(--trait), var(--trait)) calc(var(--col-a) - 1px) 0 / 1px 100% no-repeat,
    linear-gradient(var(--trait), var(--trait)) 56% 0 / 1px 100% no-repeat,
    linear-gradient(var(--trait), var(--trait)) 69% 0 / 1px 100% no-repeat;
}
.wp-block-image.bandeau__photo {
  position: relative;
  height: clamp(520px, 48vw, 690px);
  overflow: hidden;
  background: #555;
}
.wp-block-image.bandeau__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(1.08);
}
.wp-block-image.bandeau__photo::after {
  /* grain + voile pour la lisibilité du texte */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.48) 42%, rgba(0,0,0,.08) 72%, rgba(0,0,0,0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}
.bandeau__contenu {
  position: absolute;
  left: 0; right: 0;
  top: calc(110px + 22%);
  display: grid;
  grid-template-columns: var(--col-a) 1fr;
  color: var(--blanc);
  z-index: 2;
}
.bandeau__mono {
  justify-self: end;
  font-size: clamp(110px, 12vw, 172px);
  line-height: .78;
  font-weight: 500;
  letter-spacing: -.04em;
}
.bandeau__textes {
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 34em;
}
.bandeau__textes p {
  font-size: 18px;
  line-height: 1.55;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.wp-block-quote.bandeau__citation {
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.55);
}
.bandeau__textes .legende { color: rgba(255,255,255,.85); font-size: 13px; }

/* ---------- 5 · Le doute ---------- */
.doute {
  position: relative;
  display: grid;
  grid-template-columns: var(--col-a) 1fr;
  border-bottom: 1px solid var(--trait);
}
.doute::before { content: ""; border-right: 1px solid var(--trait); }
.doute::after { left: calc(var(--col-a) - 1px); top: 0; }
.wp-block-quote.doute__citation { padding: 120px 48px 110px 32px; }
.doute__citation p {
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1.08;
  letter-spacing: -.025em;
  max-width: 13.5em;
  text-wrap: balance;
}
.doute__citation cite { display: block; margin-top: 36px; font-size: 15px; line-height: 1.4; color: var(--gris); }

/* ---------- 6 · Auteur ---------- */
.auteur {
  display: grid;
  grid-template-columns: var(--col-a) 36% 1fr;
  border-bottom: 1px solid var(--trait);
}
.auteur__marge {
  position: relative;
  border-right: 1px solid var(--trait);
  padding: 34px 20px;
}
.auteur__marge::after { left: 0; top: 46%; }
.wp-block-image.auteur__photo { border-right: 1px solid var(--trait); aspect-ratio: 2 / 3; overflow: hidden; }
.wp-block-image.auteur__photo img { width: 100%; height: 100%; object-fit: cover; }
.auteur__infos {
  padding: 34px 40px 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.auteur__infos .titre-section { margin-bottom: 6px; }
.auteur__lien a { display: inline-block; padding: 10px 0; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--trait); }
.auteur__lien a:hover { text-decoration-color: currentColor; }
.chiffres {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--trait);
}
.chiffre { padding: 20px 0 0; }
.chiffre + .chiffre { padding-left: 24px; border-left: 1px solid var(--trait); }
.chiffre__valeur {
  font-size: clamp(36px, 3.3vw, 48px);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.chiffre__valeur sup { font-size: .4em; vertical-align: top; position: relative; top: .3em; }

/* ---------- 7 · Extraits ---------- */
.extraits { position: relative; border-bottom: 1px solid var(--trait); }
.extraits__haut {
  display: grid;
  grid-template-columns: 50% 1fr;
  border-bottom: 1px solid var(--trait);
}
.extraits__intro { padding: 110px 32px 26px 20px; max-width: 24em; align-self: end; }
.extraits__titre {
  padding: 110px 40px 26px 32px;
  border-left: 1px solid var(--trait);
  max-width: calc(13.5em + 72px);
}
.extraits__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% / 3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.extraits__rail::-webkit-scrollbar { display: none; }
.extraits__rail:focus-visible { outline-offset: -3px; }
.extrait {
  position: relative;
  scroll-snap-align: start;
  min-height: 300px;
  padding: 32px 32px 20px;
  border-right: 1px solid var(--trait);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.extrait::before {
  content: "";
  position: absolute;
  top: 16px; right: 16px;
  width: 6px; height: 6px;
  background: var(--encre);
}
.extrait__texte p {
  font-size: clamp(21px, 1.7vw, 25px);
  line-height: 1.35;
  letter-spacing: -.01em;
  max-width: 17em;
}
.extrait__pied {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gris);
}
.extrait__compte { white-space: nowrap; }
.extraits__fleches {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 40px;
  border-top: 1px solid var(--trait);
}
.fleche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--encre);
  color: var(--blanc);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.fleche.est-inactif { opacity: .25; cursor: default; }

/* ---------- 8 · Aller plus loin ---------- */
.poursuivre {
  display: grid;
  grid-template-columns: var(--col-a) 1fr;
  border-bottom: 1px solid var(--trait);
}
.poursuivre__titre {
  font-size: clamp(34px, 3.4vw, 50px);
  line-height: 1.12;
  letter-spacing: -.01em;
  font-weight: 400;
  padding: 26px 24px 40px 20px;
  border-right: 1px solid var(--trait);
}
.actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.action {
  padding: 30px 28px 48px;
  border-right: 1px solid var(--trait);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.action:last-child { border-right: 0; }
.action__titre {
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.015em;
}
.action__liens {
  margin-top: auto;
  padding-top: 18px;
  font-size: 15px;
  border-top: 1px solid var(--trait);
}
.action__liens a { display: inline-block; padding: 11px 0; overflow-wrap: anywhere; }


/* ---------- Bouton (achat, espace lecteurs) ---------- */
.bouton a,
.entete .entete__acheter .wp-block-navigation-item__content {
  display: inline-block;
  padding: 13px 22px;
  background: var(--encre);
  color: var(--blanc);
  border: 1px solid var(--encre);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: .01em;
  text-decoration: none;
}
.entete .entete__acheter .wp-block-navigation-item__content { padding: 8px 14px; font-size: 14px; }
.bouton a:is(:hover, :focus-visible),
.entete .entete__acheter .wp-block-navigation-item__content:is(:hover, :focus-visible) { background: var(--blanc); color: var(--encre); text-decoration: none; }
.heros__pied .bouton a { padding: 9px 18px; font-size: 14px; }

/* ---------- Sections éditoriales de l'accueil (constat, public, lecteurs, achat) ---------- */
.propos {
  display: grid;
  grid-template-columns: var(--col-a) 1fr;
  border-bottom: 1px solid var(--trait);
}
.propos__marge { border-right: 1px solid var(--trait); padding: 34px 20px; }
.propos__corps { padding: 34px 40px 48px 32px; display: flex; flex-direction: column; gap: 18px; }
.propos__corps .titre-section { max-width: 17em; margin-bottom: 6px; text-wrap: balance; }
.propos__corps .texte { max-width: 40em; }
.propos__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 8px; }
.propos__secondaire { font-size: 15px; color: var(--gris); max-width: 40em; }
.propos__secondaire a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--trait); }
.propos__secondaire a:hover { text-decoration-color: currentColor; }
.propos--discret .titre-section { font-size: clamp(26px, 2.4vw, 36px); }
.propos--discret .propos__corps { padding-bottom: 40px; }
.propos--discret .bouton { margin-top: 4px; }
.propos--achat .propos__corps { padding-top: 56px; padding-bottom: 64px; }

/* résumé d'une partie, l'auteur nommé sous le titre de section */
.partie__resume { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--texte); }
.auteur__nom { font-size: 15px; letter-spacing: .02em; color: var(--gris); margin-top: -10px; }

/* pied : quatre groupes de liens */
.pied__groupes {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--trait);
}
.pied__groupe { padding: 22px 20px 6px 6px; }
.pied__groupe + .pied__groupe { padding-left: 20px; border-left: 1px solid var(--trait); }
.pied__liens { margin-top: 10px; font-size: 15px; }
.pied__liens a { display: inline-block; padding: 5px 0; }
.pied__groupes + .pied__bas { margin-top: 28px; }

/* ---------- Page de vente Nouvelle Clarté (page 103) : styles réservés à cette page ---------- */
.page-id-103 .nc-prix-court { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.01em; margin-top: 4px; }
.page-id-103 .lecteurs-tete .propos__actions { margin-top: 6px; }
.page-id-103 .propos__corps :is(.texte, .nc__liste) a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--trait); }
.page-id-103 .propos__corps :is(.texte, .nc__liste) a:hover { text-decoration-color: currentColor; }

/* schéma des sept dimensions : une chaîne de cinq maillons reliés par des flèches, deux dimensions transversales */
.page-id-103 .nc-systeme { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 6px; }
.page-id-103 .nc-systeme__chaine { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--encre); }
.page-id-103 .nc-systeme__transversal { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--trait); border-top: 3px solid var(--encre); }
.page-id-103 .nc-systeme__maillon { position: relative; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.page-id-103 .nc-systeme__chaine .nc-systeme__maillon + .nc-systeme__maillon { border-left: 1px solid var(--trait); }
.page-id-103 .nc-systeme__chaine .nc-systeme__maillon + .nc-systeme__maillon::before {
  content: "→"; content: "→" / ""; position: absolute; left: -9px; top: 14px; width: 17px; height: 22px; line-height: 22px;
  text-align: center; background: var(--blanc); color: var(--encre); font-size: 15px;
}
.page-id-103 .nc-systeme__transversal .nc-systeme__maillon + .nc-systeme__maillon { border-left: 1px solid var(--trait); }
.page-id-103 .nc-systeme__num { font-size: 12px; letter-spacing: .06em; color: var(--gris); }
.page-id-103 .nc-systeme__nom { font-size: 16px; line-height: 1.3; }
.page-id-103 .nc-systeme__nom strong { font-weight: 500; }
.page-id-103 .nc-systeme__texte { font-size: 14px; line-height: 1.45; color: var(--texte); }

/* livrables : compris et non compris côte à côte */
.page-id-103 .nc-deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.page-id-103 .nc-colonne { display: flex; flex-direction: column; gap: 12px; }

/* bloc tarifaire, sobre */
.page-id-103 .nc-tarif { border: 1px solid var(--encre); padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 12px; max-width: 40em; }
.page-id-103 .nc-tarif__prix { font-size: clamp(34px, 3.4vw, 48px); line-height: 1; letter-spacing: -.02em; }
.page-id-103 .nc-tarif__detail { font-size: 16px; color: var(--texte); }

@media (max-width: 1100px) {
  .page-id-103 .nc-systeme__chaine { grid-template-columns: 1fr; }
  .page-id-103 .nc-systeme__chaine .nc-systeme__maillon + .nc-systeme__maillon { border-left: 0; border-top: 1px solid var(--trait); }
  .page-id-103 .nc-systeme__chaine .nc-systeme__maillon + .nc-systeme__maillon::before { content: "↓"; content: "↓" / ""; left: 18px; top: -11px; }
  .page-id-103 .nc-deux-colonnes { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  .page-id-103 .nc-systeme__transversal { grid-template-columns: 1fr; }
  .page-id-103 .nc-systeme__transversal .nc-systeme__maillon + .nc-systeme__maillon { border-left: 0; border-top: 1px solid var(--trait); }
  .page-id-103 .nc-tarif { padding: 20px 18px 22px; }
  /* premier écran mobile : le nom de l'offre figure déjà dans l'en-tête et dans le texte ; le bouton remonte */
  .page-id-103 .lecteurs-tete > .surtitre:first-child { display: none; }
  .page-id-103 .lecteurs-tete > :last-child { padding-top: 22px; padding-bottom: 28px; }
  .page-id-103 .lecteurs-tete h1 { font-size: 32px; }
  .page-id-103 .lecteurs-tete .texte--grand { font-size: 17px; }
}

/* page Nouvelle Clarté : précisions en fin de page, sous le dernier bouton */
.nc-precisions { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--trait); display: flex; flex-direction: column; gap: 8px; max-width: 40em; }

/* page Nouvelle Clarté : renvoi au livre sous chaque dimension, liste de ce qui est compris */
.nc__ref { display: block; margin-top: 4px; font-size: 15px; color: var(--gris); }
.nc__ref a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--trait); }
.nc__ref a:hover { text-decoration-color: currentColor; }
.nc__liste { max-width: 40em; font-size: 17px; line-height: 1.5; }
.nc__liste li { padding: 10px 0 10px 1.6em; border-top: 1px solid var(--trait); position: relative; }
.nc__liste li:last-child { border-bottom: 1px solid var(--trait); }
.nc__liste li::before { content: "—"; position: absolute; left: 0; color: var(--gris); }

/* ---------- Pages sans menu (vente et commande Nouvelle Clarté) ---------- */
.entete-minimal { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--trait); }
.entete-minimal__marque { margin: 0; }
.entete-minimal__marque a { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; color: var(--encre); text-decoration: none; }
.entete-minimal__mono { font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.entete-minimal__nom { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; }
.entete-minimal__marque a:is(:hover, :focus-visible) .entete-minimal__nom { color: var(--encre); text-decoration-color: currentColor; }
@media (prefers-reduced-motion: no-preference) { .entete-minimal__nom { transition: color var(--mvt-court), text-decoration-color var(--mvt-court); } }
.pied-minimal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; padding: 26px 20px 30px; font-size: 13px; line-height: 1.5; color: var(--gris); }
.pied-minimal > p { margin: 0; }
.pied-minimal a { display: inline-block; padding: 6px 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--trait); }
.pied-minimal a:hover { text-decoration-color: currentColor; }
@media (max-width: 720px) {
  .entete-minimal { padding: 12px 16px; }
  .pied-minimal { flex-direction: column; align-items: flex-start; gap: 0; padding: 20px 16px 24px; }
}

/* Lettre d'information : le formulaire Brevo collé dans la composition synchronisée prend la typographie du site */
.lettre-info__formulaire { max-width: 40em; }
.lettre-info__formulaire :is(#sib-container, .sib-form, .sib-form-container) { background: transparent !important; border: 0 !important; padding: 0 !important; max-width: none !important; font-family: var(--police) !important; text-align: left !important; }
.lettre-info__formulaire :is(input[type="text"], input[type="email"]) { font: inherit !important; font-size: 17px !important; border: 1px solid #8a8a8a !important; border-radius: 0 !important; padding: 12px 14px !important; min-height: 48px; }
.lettre-info__formulaire :is(button, .sib-form-block__button) { font: inherit !important; font-size: 15px !important; background: var(--encre) !important; color: var(--blanc) !important; border: 1px solid var(--encre) !important; border-radius: 0 !important; padding: 13px 22px !important; min-height: 48px; }
.lettre-info__formulaire :is(label, p, .entry__label, .sib-text-form-block p) { font-family: var(--police) !important; color: var(--texte) !important; }

/* ---------- Pied ---------- */
.pied { position: relative; padding: 70px 0 0; }
.pied::before, .pied::after {
  content: "+";
  position: absolute;
  font-size: 22px;
  line-height: 1;
}
.pied::before { left: 0; top: 70px; transform: translate(-30%, -50%); }
.pied::after { left: 88%; top: 60px; transform: translate(-50%, -50%); }
.pied__nom {
  font-size: clamp(40px, 6.7vw, 98px);
  line-height: .9;
  letter-spacing: -.045em;
  padding-left: 4px;
}
.pied__bas {
  margin-top: 48px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 13px;
  color: var(--gris);
  padding: 0 20px 18px 6px;
}

/* ---------- En-tête des pages intérieures ---------- */
.lecteurs-tete {
  position: relative;
  display: grid;
  grid-template-columns: var(--col-a) 1fr;
  border-bottom: 1px solid var(--trait);
}
.lecteurs-tete > :first-child { border-right: 1px solid var(--trait); padding: 34px 20px; }
.lecteurs-tete > :last-child { padding: 60px 40px 56px 32px; }
.lecteurs-tete h1 {
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -.03em;
}
.lecteurs-tete .texte { margin-top: 22px; }
.lecteurs-tete::after { left: calc(var(--col-a) - 11px); bottom: -11px; }

/* ---------- Mentions légales ---------- */
.mention {
  display: grid;
  grid-template-columns: var(--col-a) 1fr;
  border-bottom: 1px solid var(--trait);
}
.mention__titre {
  padding: 34px 24px 34px 20px;
  border-right: 1px solid var(--trait);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 500;
}
.mention__corps { padding: 34px 40px 40px 32px; display: flex; flex-direction: column; gap: 14px; }
.mention__corps a, .pied__bas a, .lecteurs-tete a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--trait); }
.mention__corps a:hover, .pied__bas a:hover, .lecteurs-tete a:hover { text-decoration-color: currentColor; }
.mention__sous-titre { margin-top: 12px; font-size: 18px; font-weight: 500; }
.mention__liste { max-width: 46em; }
.mention__ligne {
  display: grid;
  grid-template-columns: 15em 1fr;
  gap: 4px 24px;
  padding: 12px 0;
  border-top: 1px solid var(--trait);
  font-size: 17px;
  line-height: 1.5;
}
.mention__terme { color: var(--gris); }

/* ---------- Espace lecteurs ---------- */
.sommaire-lecteurs { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 15px; }
.sommaire-lecteurs a { display: inline-block; padding: 10px 0; }
.mention__corps > .surtitre { margin-top: 22px; }
.mention__corps > .surtitre:first-child { margin-top: 0; }
.wp-block-details.depliant { border-top: 1px solid var(--trait); }
.wp-block-details.depliant + .surtitre { border-top: 1px solid var(--trait); padding-top: 22px; }
.depliant summary {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  line-height: 1.4;
}
.depliant summary::-webkit-details-marker { display: none; }
.depliant summary::before { content: "+"; flex: 0 0 1em; color: var(--gris); }
.depliant[open] summary::before { content: "–"; }
.depliant > :not(summary) { margin-left: calc(1em + 14px); max-width: 40em; font-size: 17px; line-height: 1.6; color: var(--texte); }
.depliant > :not(summary) + :not(summary) { margin-top: 10px; }
.depliant > :last-child { padding-bottom: 20px; }
.quiz__reponse { color: var(--encre); }
.quiz__source { font-size: 15px; color: var(--gris); }
.exercice__fin { margin-top: 10px; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; letter-spacing: -.01em; max-width: 24em; }
.exercice__conseil { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--trait); font-size: 15px; color: var(--gris); max-width: 40em; }

/* ---------- Flashcards ---------- */
.flashcards__aide { font-size: 15px; color: var(--gris); }
.flashcards.est-masquee { display: none; }
.wp-block-details.flashcard { border-top: 1px solid var(--trait); }
.flashcard summary { display: flex; gap: 14px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 18px; line-height: 1.4; }
.flashcard summary::-webkit-details-marker { display: none; }
.flashcard summary::before { content: "+"; flex: 0 0 1em; color: var(--gris); }
.flashcard[open] summary::before { content: "–"; }
.flashcard > :not(summary) { margin-left: calc(1em + 14px); max-width: 40em; }
.flashcard > :last-child { padding-bottom: 20px; }
.flashcard__reponse { font-size: 17px; line-height: 1.6; }
.flashcard__source, .carte__source { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--gris); }
.flashcard__source a, .carte__source a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; }

.paquet { margin-top: 8px; max-width: 46em; }
.paquet__tete { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.paquet__compte { font-size: 13px; letter-spacing: .06em; color: var(--gris); font-variant-numeric: tabular-nums; min-width: 4.5em; }
.paquet__barre { position: relative; flex: 1; height: 1px; background: var(--trait); overflow: hidden; }
.paquet__jauge {
  position: absolute; inset: 0;
  background: var(--encre);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

.paquet__scene { perspective: 1600px; }
.carte {
  position: relative;
  cursor: pointer;
  outline: none;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.carte:hover { transform: translateY(-3px); }
.carte:focus-visible .carte__face { outline: 2px solid var(--encre); outline-offset: 4px; }
.carte__interieur {
  display: grid;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.22,.61,.36,1);
}
.carte.est-retournee .carte__interieur { transform: rotateY(180deg); }
.carte__face {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: clamp(260px, 26vw, 340px);
  padding: 34px 36px 28px;
  border: 1px solid var(--encre);
  background: var(--blanc);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: box-shadow .3s cubic-bezier(.2,.7,.2,1);
}
.carte:hover .carte__face { box-shadow: 0 18px 30px -18px rgba(0,0,0,.35); }
.carte__face::before {
  /* le petit carré noir, signature de la grille */
  content: "";
  position: absolute;
  top: 14px; right: 14px;
  width: 7px; height: 7px;
  background: var(--encre);
}
.carte__verso { transform: rotateY(180deg); background: var(--encre); color: var(--blanc); }
.carte__verso::before { background: var(--blanc); }
.carte__verso .carte__source { color: rgba(255,255,255,.75); margin-top: auto; }
.carte__etiquette { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.carte__verso .carte__etiquette { color: rgba(255,255,255,.65); }
.carte__texte { font-size: clamp(21px, 2vw, 27px); line-height: 1.3; letter-spacing: -.01em; max-width: 26em; text-wrap: pretty; }
.carte__verso .carte__texte { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.4; }
.carte__indice {
  margin-top: auto;
  align-self: flex-start;
  font-size: 14px;
  color: var(--gris);
  transition: color .2s, transform .3s cubic-bezier(.2,.7,.2,1);
}
.carte__indice::after { content: "↻"; display: inline-block; margin-left: .4em; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.carte:hover .carte__indice { color: var(--encre); }
.carte:hover .carte__indice::after { transform: rotate(180deg); }

.paquet__commandes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.paquet__bouton {
  min-width: 44px; min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--encre);
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .2s, color .2s, transform .15s;
}
.paquet__bouton:hover:not(:disabled) { background: var(--encre); color: var(--blanc); }
.paquet__bouton:active:not(:disabled) { transform: scale(.96); }
.paquet__bouton:disabled { opacity: .3; cursor: default; }
.paquet__prec, .paquet__suiv { font-size: 22px; line-height: 1; padding: 0; }
.paquet__retourner { background: var(--encre); color: var(--blanc); }
.paquet__retourner:hover:not(:disabled) { background: var(--blanc); color: var(--encre); }
.paquet__melanger, .paquet__liste { margin-left: 0; }
.paquet__liste { margin-left: auto; border-color: var(--trait); }
.paquet__annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.paquet.est-replie .paquet__tete,
.paquet.est-replie .paquet__scene,
.paquet.est-replie .paquet__commandes > :not(.paquet__liste) { display: none; }
.paquet.est-replie .paquet__liste { margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .carte__interieur { transition: none; }
  .carte.est-retournee .carte__interieur { transform: none; }
  .carte__face { backface-visibility: visible; transition: opacity .2s; }
  .carte__verso { transform: none; opacity: 0; }
  .carte.est-retournee .carte__verso { opacity: 1; }
  .carte.est-retournee .carte__recto { opacity: 0; }
  .carte, .carte:hover, .carte__indice::after { transform: none; }
}

@media (max-width: 720px) {
  .carte__face { padding: 26px 20px 22px; min-height: 280px; }
  .paquet__liste { margin-left: 0; }
}

/* ---------- Exercice d'attestation ---------- */
.qcm__avertissement { font-size: 14px; color: var(--gris); }
.wp-block-details.qcm__depliant { display: none; }
.qcm__depliant { border-top: 1px solid var(--trait); }
.qcm__depliant > summary { padding: 14px 0; cursor: pointer; font-size: 16px; list-style: none; }
.qcm__depliant > summary::-webkit-details-marker { display: none; }
.qcm__depliant > summary::before { content: "+ "; color: var(--gris); }
.qcm__depliant[open] > summary::before { content: "– "; }
.qcm__question { padding: 18px 0; border-top: 1px solid var(--trait); display: grid; gap: 6px; max-width: 44em; }
.qcm__cas { color: var(--texte); }
.qcm__intitule { font-weight: 500; }
.qcm__choix { padding-left: 1.4em; position: relative; color: var(--texte); }
.qcm__choix::before { content: "○"; position: absolute; left: 0; color: var(--gris); }
.qcm__choix.qcm__juste { color: var(--encre); font-weight: 500; }
.qcm__choix.qcm__juste::before { content: "✓"; color: var(--encre); }
.qcm__explication, .qcm__source { font-size: 15px; color: var(--gris); }
.qcm__source a, .qcm-retour__source a, .qcm-relire a { text-decoration: underline; text-underline-offset: 3px; }

.qcm-app { margin-top: 10px; max-width: 46em; }
.qcm-ecran { display: grid; gap: 18px; }
.qcm-ecran--accueil { justify-items: start; gap: 14px; padding: 26px 28px; border: 1px solid var(--encre); position: relative; }
.qcm-ecran--accueil::before, .qcm-carte::before { content: ""; position: absolute; top: 14px; right: 14px; width: 7px; height: 7px; background: var(--encre); }
.qcm-ecran__chiffres { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.qcm-go { font-size: 16px; padding: 0 22px; }
.qcm-carte { position: relative; border: 1px solid var(--encre); padding: 30px 32px 26px; display: grid; gap: 20px; }
.qcm-carte__cas { font-size: 18px; line-height: 1.55; color: var(--texte); max-width: 36em; }
.qcm-carte__choix { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.qcm-carte__question { padding: 0; margin-bottom: 8px; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.qcm-option {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--trait);
  cursor: pointer;
  font-size: 17px;
  line-height: 1.45;
  transition: border-color .2s, background-color .2s, transform .15s;
}
.qcm-option:hover { border-color: var(--encre); }
.qcm-option:active { transform: scale(.99); }
.qcm-option input { position: absolute; opacity: 0; pointer-events: none; }
.qcm-option:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }
.qcm-option__repere {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--encre);
  font-size: 14px; font-weight: 500;
  transition: background-color .2s, color .2s;
}
.qcm-option.est-choisie { border-color: var(--encre); }
.qcm-option.est-choisie .qcm-option__repere { background: var(--encre); color: var(--blanc); }
.qcm-carte__choix:disabled .qcm-option { cursor: default; }
.qcm-option.est-juste { border-color: var(--encre); background: var(--encre); color: var(--blanc); animation: qcm-juste .45s cubic-bezier(.2,.7,.2,1); }
.qcm-option.est-juste .qcm-option__repere { background: var(--blanc); color: var(--encre); border-color: var(--blanc); }
.qcm-option.est-juste .qcm-option__repere::after { content: "✓"; position: absolute; }
.qcm-option.est-juste .qcm-option__repere, .qcm-option.est-faux .qcm-option__repere { position: relative; color: transparent; }
.qcm-option.est-juste .qcm-option__repere::after { color: var(--encre); }
.qcm-option.est-faux { color: var(--gris); text-decoration: line-through; text-decoration-color: var(--gris); animation: qcm-faux .4s cubic-bezier(.36,.07,.19,.97); }
.qcm-option.est-faux .qcm-option__repere { border-color: var(--gris); background: transparent; }
.qcm-option.est-faux .qcm-option__repere::after { content: "✕"; position: absolute; color: var(--gris); }
@keyframes qcm-juste { 0% { transform: scale(1); } 40% { transform: scale(1.015); } 100% { transform: scale(1); } }
@keyframes qcm-faux { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.qcm-retour { display: grid; gap: 8px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.qcm-retour.est-visible { max-height: 480px; opacity: 1; padding: 4px 0 0 18px; border-left: 2px solid var(--encre); }
.qcm-retour--faux.est-visible { border-left-color: var(--gris); }
.qcm-retour__verdict { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.qcm-retour__texte { font-size: 17px; line-height: 1.55; max-width: 38em; }
.qcm-retour__source { font-size: 14px; color: var(--gris); }
.qcm-ecran--resultat { padding: 30px 32px; border: 1px solid var(--encre); }
.qcm-ecran--resultat.est-reussi { background: var(--encre); color: var(--blanc); }
.qcm-ecran--resultat.est-reussi .qcm-score__detail, .qcm-ecran--resultat.est-reussi .qcm-champ__libelle { color: rgba(255,255,255,.7); }
.qcm-score { font-size: clamp(56px, 7vw, 96px); line-height: 1; letter-spacing: -.04em; font-weight: 500; outline: none; animation: qcm-score .7s cubic-bezier(.2,.7,.2,1); }
@keyframes qcm-score { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.qcm-score__detail { font-size: 15px; color: var(--gris); }
.qcm-message { font-size: 18px; line-height: 1.5; max-width: 34em; }
.qcm-relire { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 16px; }
.qcm-relire li::before { content: "→ "; color: var(--gris); }
.qcm-attestation { display: grid; gap: 16px; }
.qcm-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qcm-champ { display: grid; gap: 6px; }
.qcm-champ__libelle { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.qcm-champ input { font: inherit; font-size: 18px; padding: 12px 14px; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 0; }
.qcm-champ input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.qcm-erreur { font-size: 15px; min-height: 1.2em; }
.est-reussi .paquet__bouton.paquet__retourner { background: var(--blanc); color: var(--encre); border-color: var(--blanc); }
.est-reussi .paquet__bouton.paquet__retourner:hover { background: transparent; color: var(--blanc); }
.est-reussi .paquet__bouton.paquet__liste { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,.4); }
.qcm-apercu { width: 100%; height: auto; border: 1px solid rgba(255,255,255,.3); animation: qcm-score .6s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .qcm-option, .qcm-option.est-juste, .qcm-option.est-faux, .qcm-score, .qcm-apercu { animation: none; transition: none; }
  .qcm-retour { transition: none; }
}
@media (max-width: 720px) {
  .qcm-carte, .qcm-ecran--accueil, .qcm-ecran--resultat { padding: 24px 18px; }
  .qcm-champs { grid-template-columns: 1fr; }
  .qcm-carte__cas { font-size: 17px; }
}

/* ---------- Mouvement ----------
   Un seul vocabulaire pour tout le site : une courbe de sortie, trois durées.
   Principe : le contenu est visible par défaut. Les états d'attente (opacité,
   carrés non posés) n'existent que sous html.rlc-mouvement, classe posée par
   assets/app.js quand l'appareil accepte les animations. Sans JavaScript, dans
   l'éditeur de blocs ou avec « réduire les animations », rien ne bouge. */
:root {
  --mvt-courbe: cubic-bezier(.2, .7, .2, 1);
  --mvt-court: .2s;
  --mvt-moyen: .45s;
  --mvt-long: .7s;
}

/* Micro-interactions : le soulignement remonte et se fonce au survol */
.entete .wp-block-navigation .wp-block-navigation-item__content,
.action__liens a,
.heros__pied a:not(.bouton a),
.pied__liens a,
.sommaire-lecteurs a,
:is(.depliant, .flashcard, .qcm__depliant) > summary,
.lecteurs-tete a,
.auteur__infos .texte a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: 7px;
}
.auteur__infos .texte a, .lecteurs-tete a { text-decoration-color: var(--trait); text-underline-offset: 3px; }
.entete .wp-block-navigation .wp-block-navigation-item__content:is(:hover, :focus-visible),
.action__liens a:is(:hover, :focus-visible),
.heros__pied a:not(.bouton a):is(:hover, :focus-visible),
.pied__liens a:is(:hover, :focus-visible),
.sommaire-lecteurs a:is(:hover, :focus-visible),
:is(.depliant, .flashcard, .qcm__depliant) > summary:is(:hover, :focus-visible) { text-decoration-color: currentColor; text-underline-offset: 3px; }
.auteur__infos .texte a:is(:hover, :focus-visible) { text-decoration-color: currentColor; }
.fleche-ext { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  header.wp-block-template-part { transition: transform var(--mvt-moyen) var(--mvt-courbe); }
  .entete .wp-block-navigation .wp-block-navigation-item__content,
  .action__liens a, .heros__pied a, .lecteurs-tete a, .auteur__infos .texte a, .pied__liens a, .propos__secondaire a,
  .bouton a, .entete .entete__acheter .wp-block-navigation-item__content,
  .sommaire-lecteurs a, :is(.depliant, .flashcard, .qcm__depliant) > summary,
  .auteur__lien a, .pied__bas a, .mention__corps a {
    transition: text-decoration-color var(--mvt-court) ease-out, text-underline-offset var(--mvt-moyen) var(--mvt-courbe), background-color var(--mvt-court), color var(--mvt-court);
  }
  /* la flèche des liens externes part dans sa direction */
  .fleche-ext { transition: transform var(--mvt-moyen) var(--mvt-courbe); }
  a:is(:hover, :focus-visible) .fleche-ext { transform: translate(2px, -2px); }
  /* flèches du carrousel : inversion au survol, léger appui au clic */
  .fleche { transition: background-color var(--mvt-court), color var(--mvt-court), box-shadow var(--mvt-court), transform .15s var(--mvt-courbe); }
  .fleche:not(.est-inactif):active { transform: scale(.94); }
  /* la couverture se soulève légèrement, comme un livre qu'on prend en main */
  .wp-block-image.livre { transition: transform var(--mvt-long) var(--mvt-courbe), box-shadow var(--mvt-long) var(--mvt-courbe); }
}
@media (hover: hover) {
  .fleche:not(.est-inactif):hover { background: var(--blanc); color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
  .heros__livre:hover .wp-block-image.livre { transform: translateY(-6px); box-shadow: 0 44px 48px -14px rgba(0,0,0,.30), 0 10px 16px rgba(0,0,0,.12); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Apparition : un léger glissement vers le haut, en cascade entre éléments voisins */
  html.rlc-mouvement .rlc-apparait {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--mvt-long) var(--mvt-courbe), transform var(--mvt-long) var(--mvt-courbe);
    transition-delay: calc(var(--rlc-rang, 0) * 80ms);
  }
  html.rlc-mouvement .rlc-apparait:is(.est-visible, :focus-within) { opacity: 1; transform: none; }

  /* Entre les sections : le filet qui les sépare se trace de gauche à droite quand on l'atteint.
     Pendant le tracé, la bordure est remplacée par un dégradé de même couleur ; à la fin,
     app.js retire les classes et la bordure d'origine reprend sa place, au pixel près. */
  html.rlc-mouvement .rlc-trait {
    border-bottom-color: transparent;
    background-image: linear-gradient(var(--trait), var(--trait));
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position: left bottom;
    background-size: 0 1px;
    transition: background-size 1.1s var(--mvt-courbe);
  }
  html.rlc-mouvement .rlc-trait.est-trace { background-size: 100% 1px; }

  /* Repères de grille : les carrés noirs se posent, les « + » du pied pivotent */
  html.rlc-mouvement :is(.parties, .doute, .auteur__marge, .lecteurs-tete).rlc-repere::after,
  html.rlc-mouvement .heros__pied.rlc-repere::before {
    transition: scale var(--mvt-moyen) var(--mvt-courbe) .25s;
  }
  html.rlc-mouvement :is(.parties, .doute, .auteur__marge, .lecteurs-tete).rlc-repere:not(.est-pose)::after,
  html.rlc-mouvement .heros__pied.rlc-repere:not(.est-pose)::before { scale: 0; }
  html.rlc-mouvement .pied.rlc-repere::before,
  html.rlc-mouvement .pied.rlc-repere::after { transition: rotate var(--mvt-long) var(--mvt-courbe) .2s, opacity var(--mvt-moyen) .2s; }
  html.rlc-mouvement .pied.rlc-repere:not(.est-pose)::before,
  html.rlc-mouvement .pied.rlc-repere:not(.est-pose)::after { rotate: -90deg; opacity: 0; }

  /* Démarche : la méthode se trace étape par étape au fil de la lecture */
  html.rlc-mouvement .etape { position: relative; }
  html.rlc-mouvement .etape::before {
    content: "";
    position: absolute;
    left: -1px; top: 0; bottom: -1px;
    width: 2px;
    background: var(--encre);
    scale: 1 0;
    transform-origin: top;
    transition: scale var(--mvt-long) var(--mvt-courbe);
  }
  html.rlc-mouvement .etape.est-lue::before { scale: 1 1; }
  html.rlc-mouvement .etape__num { transition: color var(--mvt-moyen); }
  html.rlc-mouvement .etape.est-lue .etape__num { color: var(--encre); }

  /* Dépliants : ouverture en douceur là où le navigateur sait animer <details> */
  @supports selector(::details-content) {
    html.rlc-mouvement { interpolate-size: allow-keywords; }
    html.rlc-mouvement :is(.depliant, .partie__chapitres, .flashcard)::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size var(--mvt-moyen) var(--mvt-courbe), content-visibility var(--mvt-moyen) allow-discrete;
    }
    html.rlc-mouvement :is(.depliant, .partie__chapitres, .flashcard)[open]::details-content { block-size: auto; }
  }
}
/* un bouton reste un bouton, y compris dans le corps des pages intérieures */
:is(.mention__corps, .propos__corps, .lecteurs-tete) .bouton a { text-decoration: none; color: var(--blanc); }
:is(.mention__corps, .propos__corps, .lecteurs-tete) .bouton a:is(:hover, :focus-visible) { color: var(--encre); }
.nc__liste + .exercice__conseil { border-top: 0; padding-top: 4px; }
/* le bouton d'achat du menu : ni soulignement, ni marges des liens ordinaires */
.entete .wp-block-navigation .entete__acheter .wp-block-navigation-item__content { text-decoration: none; padding: 8px 14px; }
@media (max-width: 600px) { header.wp-block-template-part { top: 0; } }
@media print {
  header.wp-block-template-part { position: static; }
  .rlc-apparait { opacity: 1 !important; transform: none !important; }
}

/* ---------- Liste d'articles (gabarit de secours) ---------- */
.liste-articles { padding: 60px 32px; }

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  :root { --col-a: 22%; }
  .wp-site-blocks { padding: 0 16px; }
  .entete .wp-block-navigation.entete__nav .wp-block-navigation__container { column-gap: 22px; }
  .heros { grid-template-columns: 4% 40% 1fr; }
  .heros__recit { grid-template-columns: 1fr; }
  .heros__accroche { padding: 26px 28px 0; }
  .wp-block-quote.heros__citation { border-left: 0; padding: 14px 28px 32px; }
  .heros__pied::before { left: auto; right: 22px; }
  .heros__tete { padding: 30px 28px 48px; }
  .demarche__titre-rangee, .demarche__grille { grid-template-columns: 1fr; }
  .demarche__titre-rangee::before { display: none; }
  .demarche__titre-rangee .titre-section { padding: 28px; }
  .demarche__etiquette { border-right: 0; border-bottom: 1px solid var(--trait); padding: 26px 28px; }
  .doute { grid-template-columns: 8% 1fr; }
  .doute::after { left: calc(8% - 1px); }
  .wp-block-quote.doute__citation { padding: 90px 28px 80px; }
  .etape { grid-template-columns: 60px 1fr; }
  .etape__ref { grid-column: 2; border-left: 0; padding: 0 40px 28px 12px; }
  .parties { grid-template-columns: 1fr; }
  .parties__gauche { border-right: 0; border-bottom: 1px solid var(--trait); padding: 34px 28px; gap: 16px; }
  .parties__gauche .titre-moyen { max-width: none; }
  .parties::after { left: 0; }
  .lecteurs-tete::after { left: 0; }
  .auteur { grid-template-columns: 40% 1fr; }
  .auteur__marge { display: none; }
  .extraits__rail { grid-auto-columns: 50%; }
  .poursuivre { grid-template-columns: 1fr; }
  .poursuivre__titre { border-right: 0; border-bottom: 1px solid var(--trait); padding: 28px; }
  .lecteurs-tete, .mention, .propos { grid-template-columns: 1fr; }
  .propos__marge:empty, .demarche__etiquette:empty { display: none; }
  .propos__marge { border-right: 0; border-bottom: 1px solid var(--trait); padding: 24px 28px; }
  .propos__corps { padding: 28px 28px 40px; }
  .pied__groupes { grid-template-columns: 1fr 1fr; }
  .pied__groupe:nth-child(3) { padding-left: 6px; border-left: 0; }
  .pied__groupe:nth-child(n+3) { border-top: 1px solid var(--trait); }
  .mention__titre { border-right: 0; padding: 30px 28px 0; }
  .mention__corps { padding: 16px 28px 34px; }
  .lecteurs-tete > :first-child { border-right: 0; border-bottom: 1px solid var(--trait); }
}

/* ---------- Petite tablette ---------- */
@media (max-width: 900px) {
  .parties__liste { grid-template-columns: 1fr; }
  .partie { border-right: 0; border-bottom: 1px solid var(--trait); padding: 30px 28px; }
  .partie:last-child { border-bottom: 0; }
  .partie__exergue { max-width: 32em; }
  .actions { grid-template-columns: 1fr; }
  .action { border-right: 0; border-bottom: 1px solid var(--trait); }
  .action:last-child { border-bottom: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .wp-site-blocks { padding: 0 10px; }
  .wp-block-group.page { border-left: 0; border-right: 0; }

  .entete { display: flex; flex-direction: column; padding: 0 16px; }
  header.wp-block-template-part.est-replie:not(:focus-within) { transform: translateY(-100%); }
  .entete__mono { position: static; transform: none; padding: 14px 0 2px; align-self: flex-start; order: -1; }
  .entete__mono a { padding: 10px 0; }
  .entete .wp-block-navigation.entete__nav { font-size: 15px; }
  .entete .wp-block-navigation.entete__nav .wp-block-navigation__container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
  }
  .entete .wp-block-navigation .wp-block-navigation-item__content { padding: 11px 0; }
  .entete .wp-block-navigation .entete__droite { justify-self: auto; }

  .heros { grid-template-columns: 1fr; }
  .heros::before { display: none; }
  /* mobile : la question et l'introduction d'abord, la couverture ensuite */
  .heros__droite { display: contents; }
  .heros__tete { order: 1; }
  .heros__livre { order: 2; }
  .heros__recit { order: 3; }
  .heros__pied { order: 4; }
  .heros__livre { border-right: 0; padding: 28px 16% 40px; border-bottom: 1px solid var(--trait); }
  .heros__tete { padding: 28px 16px 36px; }
  .heros__accroche { padding: 24px 16px 0; }
  .wp-block-quote.heros__citation { padding: 12px 16px 28px; }
  .heros__pied { justify-content: flex-start; flex-direction: column; gap: 0; padding: 14px 16px; }
  .heros__pied a { padding: 10px 0; }

  .demarche__titre-rangee .titre-section { padding: 26px 16px; }
  .demarche__etiquette { padding: 22px 16px; }
  .etape { grid-template-columns: 1fr; }
  .etape__num { padding: 24px 16px 0; }
  .etape__corps { padding: 8px 16px 14px; }
  .etape__ref { grid-column: 1; padding: 0 16px 24px; }

  .parties__gauche { padding: 28px 16px; }
  .partie { padding: 28px 16px; }
  .partie__chapitres { padding-top: 20px; }
  .partie__chapitres summary { padding: 12px 0; }

  .bandeau::before { height: 40px; }
  .wp-block-image.bandeau__photo { height: auto; aspect-ratio: 4 / 3; }
  .wp-block-image.bandeau__photo::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  }
  .bandeau__contenu {
    position: static;
    grid-template-columns: 1fr;
    background: var(--encre);
    padding: 0 16px 30px;
  }
  .bandeau__mono { justify-self: start; font-size: 88px; margin-top: -40px; position: relative; }
  .bandeau__textes { padding: 26px 0 0; gap: 18px; }
  .bandeau__textes p { font-size: 17px; text-shadow: none; }

  .doute { grid-template-columns: 1fr; }
  .doute::before, .doute::after { display: none; }
  .wp-block-quote.doute__citation { padding: 64px 16px 60px; }
  .doute__citation p { font-size: clamp(32px, 9vw, 44px); }

  .auteur { grid-template-columns: 1fr; }
  .wp-block-image.auteur__photo { border-right: 0; aspect-ratio: 4 / 5; }
  .wp-block-image.auteur__photo img { object-position: 50% 20%; }
  .auteur__infos { padding: 28px 16px 36px; }
  .texte--grand { font-size: 18px; }

  .extraits__haut { grid-template-columns: 1fr; }
  .extraits__intro { padding: 50px 16px 10px; }
  .extraits__titre { border-left: 0; padding: 0 16px 24px; max-width: none; }
  .extraits__rail { grid-auto-columns: 86%; }
  .extrait { padding: 28px 20px 18px; min-height: 260px; }
  .extrait__pied { flex-direction: column; gap: 4px; }
  .extraits__fleches { padding: 12px 16px 32px; justify-content: flex-start; gap: 12px; }

  .poursuivre__titre { padding: 28px 16px; }
  .actions { grid-template-columns: 1fr; }
  .action { border-right: 0; border-bottom: 1px solid var(--trait); padding: 26px 16px 30px; }
  .action:last-child { border-bottom: 0; }

  .pied { padding-top: 50px; }
  .pied__nom { font-size: 12.5vw; }
  .pied::before, .pied::after { display: none; }
  .pied__bas { flex-direction: column; gap: 0; padding: 0 16px 18px 6px; }
  .propos__marge { padding: 20px 16px; }
  .propos__corps { padding: 24px 16px 34px; }
  .pied__groupe { padding: 18px 12px 6px 6px; }
  .pied__groupe + .pied__groupe { padding-left: 12px; }
  .pied__groupe:nth-child(3) { padding-left: 6px; }
  .pied__liens a { padding: 10px 0; }
  .pied__bas > * { padding: 4px 0; }
  .pied__bas a { display: inline-block; padding: 12px 0; }

  .lecteurs-tete > :first-child { padding: 24px 16px; }
  .lecteurs-tete > :last-child { padding: 34px 16px; }
  .mention__titre { padding: 28px 16px 0; }
  .mention__corps { padding: 14px 16px 30px; }
  .mention__ligne { grid-template-columns: 1fr; }
}