/* ============================================================================
   VELM — velm-page.css
   ----------------------------------------------------------------------------
   Grammaire des pages intérieures : Solutions, Maison, et les pages qui
   suivront. Complète velm-home.css, chargé avant, dont elle reprend les
   variables, les tuiles, les pilules, le pied de page et les finitions.

   Ce fichier ne contient que ce qui n'existe pas sur la home : le hero de
   page avec son fil d'Ariane, la prose éditoriale longue, les decls de
   navigation vers les sous-pages, et la clôture.

   Créé le 4 septembre 2026, dans le prolongement de la refonte de la home.
   ============================================================================ */

/* ============================================================================
   HERO DE PAGE — vert profond, plus court que celui de la home
   ============================================================================ */
.page-hero {
  background: var(--vert);
  position: relative;
  overflow: hidden;
  text-align: center;
  min-height: 88vh;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(23, 69, 53, 0.5) 0%, transparent 62%),
    radial-gradient(ellipse at 18% 88%, rgba(184, 147, 90, 0.06) 0%, transparent 55%);
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
}
.page-hero__kick {
  color: var(--laiton-soft);
  margin-bottom: 26px;
}
.page-hero__ti {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 68px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ivoire);
  font-variation-settings: "opsz" 144, "SOFT" 40;
  margin-bottom: 30px;
}
.page-hero__ti em {
  font-style: italic;
  color: var(--laiton-soft);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.page-hero__lede {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(242, 235, 218, 0.75);
  max-width: 620px;
  margin: 0 auto;
}


/* ============================================================================
   PROSE ÉDITORIALE — les passages longs, mis en page pour la lecture
   ============================================================================ */
.prose {
  max-width: 660px;
  text-align: left;
  margin-top: 16px;
}
.prose p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.75;
  color: var(--charbon-soft);
  margin-bottom: 26px;
  font-variation-settings: "opsz" 60;
}
.prose p:last-child { margin-bottom: 0; }
.prose b {
  font-weight: 500;
  color: var(--vert);
}
.prose__fin {
  font-style: italic;
  color: var(--vert) !important;
  padding-top: 26px;
  border-top: 1px solid rgba(28, 26, 23, 0.1);
  font-variation-settings: "opsz" 80, "SOFT" 100 !important;
}
.tuile--sombre .prose p { color: rgba(242, 235, 218, 0.75); }
.tuile--sombre .prose b { color: var(--ivoire); }
.tuile--sombre .prose__fin {
  color: var(--ivoire) !important;
  border-top-color: rgba(242, 235, 218, 0.14);
}

/* ============================================================================
   LEVIER — une section thématique avec sa tête et ses decls
   ============================================================================ */
.levier {
  justify-content: center;
  padding-top: 130px;
  padding-bottom: 130px;
}
.levier__tete {
  max-width: 720px;
  margin-bottom: 76px;
}
.levier__tete .lede {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  max-width: 620px;
}
.lede__em {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 80, "SOFT" 100;
}
.tuile--sombre .lede__em { color: var(--laiton-soft); }
.tuile--warm .lede__em { color: var(--laiton-deep); }

/* ============================================================================
   CARTES — la navigation vers les sous-pages, en artefacts cliquables
   ============================================================================ */
.decls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1180px;
  width: 100%;
  align-items: stretch;
}
.decls--une {
  grid-template-columns: 1fr;
  max-width: 560px;
}
.decl {
  display: flex;
  flex-direction: column;
  text-align: left;
  text-decoration: none;
  background: rgba(242, 235, 218, 0.05);
  border: 1px solid rgba(242, 235, 218, 0.09);
  border-radius: 18px;
  padding: 38px 32px 32px;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.34s ease,
              border-color 0.34s ease,
              box-shadow 0.34s ease;
}
.decl:hover {
  transform: translateY(-4px);
  background: rgba(242, 235, 218, 0.08);
  border-color: rgba(184, 147, 90, 0.4);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.24);
}
/* Variante sur fond clair */
.decl--claire {
  background: #fff;
  border-color: var(--ivoire-warm);
  box-shadow: 0 20px 50px rgba(15, 46, 36, 0.07);
}
.decl--claire:hover {
  background: #fff;
  border-color: var(--laiton);
  box-shadow: 0 34px 80px rgba(15, 46, 36, 0.12);
}

.decl__n {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  color: var(--laiton-soft);
  margin-bottom: 22px;
  font-variation-settings: "opsz" 144;
}
.decl--claire .decl__n { color: var(--laiton-texte); }

.decl__ti {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.2;
  color: var(--ivoire);
  margin-bottom: 16px;
  font-variation-settings: "opsz" 80;
}
.decl--claire .decl__ti { color: var(--vert); }

.decl__desc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(242, 235, 218, 0.68);
  margin-bottom: 20px;
}
.decl--claire .decl__desc { color: var(--charbon-soft); }

.decl__chute {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(242, 235, 218, 0.85);
  padding-top: 20px;
  border-top: 1px solid rgba(242, 235, 218, 0.12);
  margin-bottom: 26px;
  flex: 1;
  font-variation-settings: "opsz" 80, "SOFT" 100;
}
.decl--claire .decl__chute {
  color: var(--vert);
  border-top-color: rgba(28, 26, 23, 0.1);
}

.decl__lien {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--laiton-soft);
  margin-top: auto;
  transition: gap 0.24s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.decl--claire .decl__lien { color: var(--laiton-deep); }
.decl:hover .decl__lien { gap: 14px; }

/* ============================================================================
   CLÔTURE — le dernier mot avant l'appel à l'action
   ============================================================================ */
.cloture {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.6;
  color: var(--vert);
  max-width: 700px;
  margin-bottom: 44px;
  font-variation-settings: "opsz" 100;
}
.cloture b {
  font-weight: 500;
  font-style: italic;
  color: var(--laiton-deep);
  font-variation-settings: "opsz" 100, "SOFT" 100;
}
.tuile--sombre .cloture { color: var(--ivoire); }
.tuile--sombre .cloture b { color: var(--laiton-soft); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1080px) {
  .decls { grid-template-columns: 1fr; max-width: 560px; }
  .page-hero__ti { font-size: 52px; }
}
@media (max-width: 900px) {
  .page-hero { min-height: auto; padding-top: 130px; padding-bottom: 100px; }
  .page-hero__ti { font-size: 40px; }
  .page-hero__lede { font-size: 18px; }
  .levier { padding-top: 96px; padding-bottom: 96px; }
  .levier__tete { margin-bottom: 52px; }
  .prose p { font-size: 17px; }
  .cloture { font-size: 20px; }
  .decl { padding: 32px 26px 28px; }
}
@media (max-width: 560px) {
  .page-hero__ti { font-size: 33px; }
  .decl__ti { font-size: 22px; }
}

/* ============================================================================
   IMPRESSION
   ============================================================================ */
@media print {
  .page-hero,
  .levier,
  .decls,
  .decl {
    background: #fff !important;
    color: #000 !important;
    min-height: auto !important;
    box-shadow: none !important;
    border-color: #999 !important;
    page-break-inside: avoid;
  }
  .page-hero__ti,
  .decl__ti,
  .cloture { color: #000 !important; }
  .page-hero__lede,
  .decl__desc,
  .decl__chute,
  .prose p { color: #333 !important; }
  .decl__lien { display: none !important; }
}

/* ============================================================================
   GESTES — les trois étapes d'une déclinaison
   ----------------------------------------------------------------------------
   Chaque geste occupe une ligne pleine largeur : le chiffre romain à gauche,
   le titre et le texte à droite. Le filet qui les sépare est le seul trait de
   la page ; ailleurs, c'est l'alternance des fonds qui découpe.
   ============================================================================ */
.gestes {
  justify-content: center;
  padding-top: 130px;
  padding-bottom: 130px;
}
.gestes__tete {
  max-width: 760px;
  margin-bottom: 76px;
}
.gestes__liste {
  max-width: 860px;
  width: 100%;
  text-align: left;
}
.geste {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 34px;
  padding: 46px 0;
  border-bottom: 1px solid rgba(242, 235, 218, 0.13);
  align-items: start;
}
.geste:first-child { padding-top: 0; }
.geste:last-child { border-bottom: none; padding-bottom: 0; }
.geste__n {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 38px;
  line-height: 1;
  color: var(--laiton-soft);
  padding-top: 4px;
  font-variation-settings: "opsz" 144;
}
.geste__ti {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.25;
  color: var(--ivoire);
  margin-bottom: 16px;
  font-variation-settings: "opsz" 80;
}
.geste__co p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(242, 235, 218, 0.72);
  margin-bottom: 14px;
}
.geste__co p:last-child { margin-bottom: 0; }

/* ============================================================================
   VOISINES — la navigation entre déclinaisons, en pied de page
   ============================================================================ */
.voisines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 880px;
  width: 100%;
  margin-top: 72px;
  padding-top: 44px;
  border-top: 1px solid rgba(28, 26, 23, 0.1);
}
.voisine {
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-decoration: none;
  padding: 24px 26px;
  border-radius: 14px;
  background: rgba(15, 46, 36, 0.03);
  border: 1px solid rgba(28, 26, 23, 0.08);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease,
              background 0.3s ease;
}
.voisine:hover {
  transform: translateY(-3px);
  border-color: var(--laiton);
  background: rgba(184, 147, 90, 0.06);
}
.voisine--prec { text-align: left; }
.voisine--suiv { text-align: right; grid-column: 2; }
.voisines > .voisine--prec:only-child { grid-column: 1; }
.voisine__lb {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laiton-deep);
}
.voisine__ti {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  color: var(--vert);
  font-variation-settings: "opsz" 80;
}

@media (max-width: 900px) {
  .gestes { padding-top: 96px; padding-bottom: 96px; }
  .gestes__tete { margin-bottom: 52px; }
  .geste {
    grid-template-columns: 58px 1fr;
    gap: 22px;
    padding: 34px 0;
  }
  .geste__n { font-size: 28px; }
  .geste__ti { font-size: 22px; }
  .geste__co p { font-size: 16px; }
  .voisines { grid-template-columns: 1fr; margin-top: 52px; }
  .voisine--suiv { grid-column: 1; text-align: left; }
}

@media print {
  .gestes, .geste { background: #fff !important; page-break-inside: avoid; }
  .geste__ti { color: #000 !important; }
  .geste__co p { color: #333 !important; }
  .geste__n { color: #666 !important; }
  .voisines { display: none !important; }
}

/* ============================================================================
   MANIFESTE — une affirmation par écran
   ----------------------------------------------------------------------------
   Le manifeste est un texte court et dense. Chaque paragraphe porte une idée
   qui se suffit : lui donner son écran, c'est lui rendre son poids. Les fonds
   alternent, comme partout, et c'est cette alternance qui découpe.
   ============================================================================ */
.manif {
  padding-top: 118px;
  padding-bottom: 118px;
}
.manif__ouverture {
  max-width: 900px;
}
.manif__p {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.72;
  color: var(--charbon-soft);
  max-width: 760px;
  text-align: left;
  font-variation-settings: "opsz" 100;
}
.manif__p em {
  font-style: italic;
  color: var(--vert);
  font-variation-settings: "opsz" 100, "SOFT" 100;
}
.manif--fin {
  padding-top: 130px;
  padding-bottom: 130px;
}
.manif__cloture {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1.5;
  color: var(--ivoire);
  max-width: 700px;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.manif__sceau {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.42em;
  color: var(--laiton-soft);
  padding-left: 0.42em;
  margin-top: 56px;
}

/* ============================================================================
   ESSAI — un texte long, à lire d'un trait
   ----------------------------------------------------------------------------
   On ne découpe pas un essai en tuiles pleine hauteur : ce serait un
   contresens. Il garde sa colonne de lecture, sa mesure généreuse, et les
   points de suspension qui séparent ses mouvements.
   ============================================================================ */
.essai-tete {
  padding-top: 140px;
  padding-bottom: 70px;
}
.essai-tete .titre {
  max-width: 820px;
}
.essai-byline {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--charbon-mute);
  margin-top: 10px;
}

/* Le corps de l'essai contient DEUX blocs : la colonne de lecture et le
   bloc de fin. En flex sur une ligne, ils se plaçaient côte à côte — d'où
   le texte poussé à gauche et le colophon flottant à droite. On empile
   en colonne et on centre chaque bloc. */
.essai-corps {
  background: var(--ivoire-pur);
  padding: 20px 40px 140px;
  /* Bloc simple plutôt que flex : le centrage par marges automatiques ne
     dépend d'aucune subtilité d'axe. La version flex plaçait les deux
     enfants côte à côte — d'où le texte contre le bord gauche et le
     colophon flottant à droite. */
  display: block;
}
.essai-colonne {
  max-width: 660px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.essai-mouv p {
  font-family: var(--serif);
  font-size: 19.5px;
  line-height: 1.85;
  color: var(--charbon);
  margin-bottom: 30px;
  font-variation-settings: "opsz" 60;
}
.essai-mouv p:last-child { margin-bottom: 0; }
.essai-mouv em {
  font-style: italic;
  font-variation-settings: "opsz" 60, "SOFT" 100;
}
/* Le premier paragraphe du premier mouvement ouvre le texte */
.essai-mouv:first-child p:first-child::first-letter {
  font-size: 62px;
  line-height: 0.86;
  float: left;
  margin: 6px 12px 0 0;
  color: var(--vert);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
}
.essai-sep {
  text-align: center;
  color: var(--laiton);
  font-size: 15px;
  letter-spacing: 0.7em;
  margin: 62px 0;
  user-select: none;
}

.essai-fin {
  width: 100%;
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 96px;
  padding-top: 52px;
  border-top: 1px solid rgba(28, 26, 23, 0.12);
  text-align: center;
}
.essai-fin__lo {
  color: var(--laiton);
  font-size: 17px;
  margin-bottom: 30px;
}
.essai-fin__col {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: var(--charbon-mute);
  max-width: 520px;
  margin: 0 auto 34px;
}
.essai-fin__sig {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.essai-fin__nom {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  color: var(--vert);
  font-variation-settings: "opsz" 80;
}
.essai-fin__role {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13.5px;
  color: var(--charbon-mute);
}

@media (max-width: 900px) {
  .manif { padding-top: 88px; padding-bottom: 88px; }
  .manif__p { font-size: 20px; line-height: 1.68; }
  .manif__cloture { font-size: 24px; }
  .manif__sceau { font-size: 13px; margin-top: 42px; }
  .essai-tete { padding-top: 110px; padding-bottom: 50px; }
  .essai-corps { padding: 16px 24px 100px; }
  .essai-mouv p { font-size: 17.5px; line-height: 1.8; }
  .essai-mouv:first-child p:first-child::first-letter { font-size: 50px; }
  .essai-sep { margin: 46px 0; }
  .essai-fin { margin-top: 70px; }
}

@media print {
  .manif, .manif--fin, .essai-tete, .essai-corps, .essai-fin {
    background: #fff !important;
    color: #000 !important;
    min-height: auto !important;
    padding: 14px 0 !important;
  }
  .manif__p, .manif__cloture, .essai-mouv p { color: #000 !important; }
  .manif__sceau, .essai-sep, .essai-fin__lo { color: #666 !important; }
  .essai-mouv { page-break-inside: avoid; }
  .essai-mouv:first-child p:first-child::first-letter { font-size: inherit; float: none; margin: 0; }
}

/* ============================================================================
   ANIMATIONS LIÉES AU SCROLL — 4 septembre 2026
   ----------------------------------------------------------------------------
   Le moteur est dans velm-commun.js, piloté par attributs. Ici, les états
   qu'il pilote : l'estompage des blocs hors focus et la barre de progression.
   ============================================================================ */

/* Groupes à bloc actif — les gestes s'éclairent l'un après l'autre.
   L'estompage n'est appliqué que si le JS tourne : sans lui, tout reste
   pleinement lisible. */
.js .groupe-actif > * {
  opacity: 0.3;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .groupe-actif > *.actif { opacity: 1; }

/* Le chiffre du geste actif passe en laiton plein et grandit légèrement */
.js .geste .geste__n {
  transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: left center;
}
.js .geste.actif .geste__n {
  color: var(--laiton);
  transform: scale(1.12);
}

/* Barre de progression de lecture — un filet laiton en haut de l'écran,
   qui n'apparaît qu'une fois entré dans le texte long. */
.progression {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 150;
  background: rgba(28, 26, 23, 0.07);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.progression.visible { opacity: 1; }
.progression__jauge {
  height: 100%;
  background: var(--laiton);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Les cartes de déclinaison portent une parallaxe : leur transform est piloté
   par le JS. On retire donc le translate du survol, qui entrerait en conflit,
   et on garde l'élévation par l'ombre seule. */
.decl[data-parallaxe]:hover {
  transform: none;
  box-shadow: 0 36px 84px rgba(0, 0, 0, 0.3);
}
.decl--claire[data-parallaxe]:hover {
  box-shadow: 0 40px 90px rgba(15, 46, 36, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .js .groupe-actif > * { opacity: 1 !important; }
  .js .geste.actif .geste__n { transform: none !important; }
  .progression { display: none !important; }
  [data-parallaxe] { transform: none !important; }
}

@media print {
  .progression { display: none !important; }
  .js .groupe-actif > * { opacity: 1 !important; }
}

/* ============================================================================
   DÉVOILEMENT PAR LIGNES MASQUÉES — 4 septembre 2026
   ----------------------------------------------------------------------------
   Chaque ligne d'un titre monte depuis derrière un masque invisible. Le
   masque, c'est le overflow: hidden du .ligne ; le mouvement, c'est le
   translate du .ligne__in. Rien ne dépasse, le texte semble émerger.

   Tant que le JS n'a pas mesuré, le titre reste visible tel quel : un texte
   caché en attendant un script serait une faute.
   ============================================================================ */
[data-lignes] .ligne {
  display: block;
  overflow: hidden;
  /* Un peu d'air en bas, sinon les jambages des g et des p sont rognés */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
[data-lignes] .ligne__in {
  display: block;
  transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Les mots restent dans le flux : ils ne servent qu'à repérer les lignes,
   et demeurent ensuite à l'intérieur de celles-ci. */
[data-lignes] .mot { display: inline; }

/* Le masquage n'est appliqué qu'une fois le JS passé ET l'observateur en
   place — c'est le rôle de .lignes-pretes. Sans cette condition, un script
   qui échoue laisserait le titre invisible pour toujours. */
[data-lignes].lignes-pretes .ligne__in {
  transform: translateY(105%);
  will-change: transform;
}
[data-lignes].lignes-vues .ligne__in {
  transform: translateY(0);
  will-change: auto;
}

/* ============================================================================
   DÉVOILEMENT MOT À MOT — la clôture, au tempo de la parole
   ============================================================================ */
[data-mots].mots-prets .mot-a-mot {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-mots].mots-vus .mot-a-mot {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-lignes] .ligne__in { transform: none !important; }
  [data-mots] .mot-a-mot {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
}

@media print {
  [data-lignes] .ligne__in { transform: none !important; }
  [data-lignes] .ligne { overflow: visible; }
  [data-mots] .mot-a-mot { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   LE CARNET — index et essais
   ----------------------------------------------------------------------------
   Le Carnet ne se ferme sur aucun appel à l'action, et aucun essai ne renvoie
   vers un autre. Cette absence est délibérée, énoncée dans l'avant-propos :
   « Le Carnet n'est pas un outil commercial. » La mise en page la respecte.
   ============================================================================ */

/* Hero d'essai — plus sobre que celui d'une page de vente */
.page-hero--essai { min-height: 78vh; }
.page-hero--essai .page-hero__ti { font-size: 56px; max-width: 900px; }

/* Index — une liste par groupe thématique, chaque essai sur sa ligne */
.carnet-groupe {
  padding-top: 110px;
  padding-bottom: 110px;
}
.carnet-liste {
  max-width: 820px;
  width: 100%;
  text-align: left;
  margin-top: 34px;
}
.carnet-lien {
  display: grid;
  grid-template-columns: 62px 1fr 28px;
  gap: 20px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid rgba(28, 26, 23, 0.09);
  text-decoration: none;
  transition: padding-left 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.carnet-lien:last-child { border-bottom: none; }
.carnet-lien:hover { padding-left: 12px; }
.carnet-lien__n {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  color: var(--laiton-texte);
  font-variation-settings: "opsz" 144;
}
.carnet-lien__ti {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.32;
  color: var(--vert);
  font-variation-settings: "opsz" 80;
  transition: color 0.28s ease;
}
.carnet-lien:hover .carnet-lien__ti { color: var(--laiton-deep); }
.carnet-lien__fl {
  font-family: var(--sans);
  font-size: 17px;
  color: var(--laiton);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  justify-self: end;
}
.carnet-lien:hover .carnet-lien__fl { opacity: 1; transform: translateX(0); }

/* Sceau de fin — la signature collective de la maison */
.carnet-fin { padding-top: 110px; padding-bottom: 110px; }
.carnet-sceau {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 56px;
}
.carnet-sceau__sig {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.34em;
  color: var(--laiton-soft);
  padding-left: 0.34em;
}
.carnet-sceau__col {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13px;
  color: rgba(242, 235, 218, 0.45);
}
.carnet-sceau__lo {
  color: var(--laiton);
  font-size: 16px;
  margin-top: 10px;
}

/* Retour au Carnet — navigation, pas commerce */
.carnet-retour {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 52px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  color: rgba(242, 235, 218, 0.6);
  text-decoration: none;
  padding: 12px 24px;
  border: 1px solid rgba(242, 235, 218, 0.16);
  border-radius: 9999px;
  transition: color 0.26s ease, border-color 0.26s ease, gap 0.26s ease;
}
.carnet-retour:hover {
  color: var(--laiton-soft);
  border-color: var(--laiton);
  gap: 16px;
}

@media (max-width: 900px) {
  .page-hero--essai .page-hero__ti { font-size: 36px; }
  .carnet-groupe { padding-top: 82px; padding-bottom: 82px; }
  .carnet-lien {
    grid-template-columns: 44px 1fr;
    gap: 14px;
    padding: 22px 0;
  }
  .carnet-lien__n { font-size: 18px; }
  .carnet-lien__ti { font-size: 19px; }
  .carnet-lien__fl { display: none; }
  .carnet-fin { padding-top: 82px; padding-bottom: 82px; }
}

@media print {
  .carnet-groupe, .carnet-fin { background: #fff !important; padding: 14px 0 !important; }
  .carnet-lien__ti { color: #000 !important; }
  .carnet-lien__n { color: #666 !important; }
  .carnet-lien__fl, .carnet-retour { display: none !important; }
  .carnet-sceau__sig, .carnet-sceau__col { color: #666 !important; }
}

/* ============================================================================
   PAGES LÉGALES — documents de référence
   ----------------------------------------------------------------------------
   Ces pages ne sont ni des pages de vente ni des pages de lecture. On les
   consulte pour vérifier un point précis. La mise en page suit cette
   fonction : hero court, sommaire cliquable, colonne de document à forte
   lisibilité, titres de section repérables. Et une impression soignée —
   on imprime des conditions générales.
   ============================================================================ */
.page-hero--doc {
  min-height: 62vh;
  padding-top: 150px;
  padding-bottom: 90px;
}
.page-hero--doc .page-hero__ti {
  font-size: 52px;
  max-width: 780px;
}

.doc {
  background: var(--ivoire-pur);
  padding: 90px 40px 130px;
  display: grid;
  grid-template-columns: 250px minmax(0, 660px);
  gap: 70px;
  justify-content: center;
  align-items: start;
}
.doc--court { grid-template-columns: minmax(0, 660px); }

/* Sommaire — épinglé pendant la lecture du document */
.doc-sommaire {
  position: sticky;
  top: 118px;
  font-family: var(--sans);
}
.doc-sommaire__ti {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laiton-deep);
  margin-bottom: 18px;
}
.doc-sommaire ol {
  list-style: none;
  counter-reset: som;
}
.doc-sommaire li {
  counter-increment: som;
  margin-bottom: 12px;
}
.doc-sommaire a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--charbon-soft);
  text-decoration: none;
  transition: color 0.24s ease;
}
.doc-sommaire a::before {
  content: counter(som, decimal-leading-zero);
  color: var(--laiton-texte);
  font-weight: 500;
}
.doc-sommaire a:hover { color: var(--vert); }

/* Corps du document — la colonne de droite, ou l'unique colonne si la page
   est courte et n'a pas de sommaire. */
.doc-corps { min-width: 0; }

.doc-section { margin-bottom: 60px; }
.doc-section:last-child { margin-bottom: 0; }
.doc-section__ti {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.3;
  color: var(--vert);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(28, 26, 23, 0.1);
  font-variation-settings: "opsz" 80;
  scroll-margin-top: 120px;
}
.doc-section p,
.doc-avis p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--charbon-soft);
  margin-bottom: 18px;
}
.doc-section p:last-child,
.doc-avis p:last-child { margin-bottom: 0; }
.doc-section ul,
.doc-section ol {
  margin: 0 0 18px 0;
  padding-left: 22px;
}
.doc-section li {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--charbon-soft);
  margin-bottom: 9px;
}
.doc-section a,
.doc-avis a,
.doc-fin a {
  color: var(--laiton-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.doc-section a:hover,
.doc-avis a:hover,
.doc-fin a:hover { color: var(--vert); }
.doc-section strong,
.doc-avis strong { font-weight: 500; color: var(--vert); }

/* Avis — pour un document en préparation */
.doc-avis {
  background: var(--ivoire);
  border-left: 2px solid var(--laiton);
  border-radius: 0 12px 12px 0;
  padding: 34px 34px 34px 32px;
}

.doc-fin {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 76px;
  padding-top: 46px;
  border-top: 1px solid rgba(28, 26, 23, 0.1);
}
.doc--court .doc-fin { grid-column: 1; }
.doc-fin__lo {
  display: block;
  color: var(--laiton);
  font-size: 16px;
  margin-bottom: 20px;
}
.doc-fin__tx {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  color: var(--charbon-mute);
}

/* ============================================================================
   MERCI — la confirmation qui suit l'envoi du formulaire
   ============================================================================ */
.merci-hero { min-height: 100vh; }
.merci-texte {
  max-width: 560px;
  margin: 0 auto 44px;
}
.merci-texte p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.65;
  color: rgba(242, 235, 218, 0.78);
  margin-bottom: 16px;
}
.merci-texte p:last-child { margin-bottom: 0; }
.merci-retour { margin-top: 4px; }
.merci-hero .losange-fin { margin-top: 52px; }

@media (max-width: 1080px) {
  .doc {
    grid-template-columns: minmax(0, 660px);
    gap: 46px;
    padding: 70px 24px 100px;
  }
  .doc-sommaire {
    position: static;
    padding-bottom: 34px;
    border-bottom: 1px solid rgba(28, 26, 23, 0.1);
  }
  .doc-sommaire ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
  }
}
@media (max-width: 900px) {
  .page-hero--doc { min-height: auto; padding-top: 128px; padding-bottom: 66px; }
  .page-hero--doc .page-hero__ti { font-size: 34px; }
  .doc-section__ti { font-size: 22px; }
  .doc-section p, .doc-section li, .doc-avis p { font-size: 16px; }
  .doc-sommaire ol { grid-template-columns: 1fr; }
  .merci-texte p { font-size: 17px; }
}

@media print {
  .page-hero--doc, .doc, .doc-avis, .merci-hero {
    background: #fff !important;
    color: #000 !important;
    min-height: auto !important;
    padding: 12px 0 !important;
    display: block !important;
  }
  .page-hero--doc .page-hero__ti, .doc-section__ti { color: #000 !important; }
  .doc-section p, .doc-section li, .doc-avis p { color: #222 !important; font-size: 11pt; }
  .doc-sommaire { display: none !important; }
  .doc-section { page-break-inside: avoid; margin-bottom: 24px; }
  .doc-avis { border-left: 2px solid #999 !important; }
}

/* ============================================================================
   LIENS DANS LES BLOCS DE TEXTE CLAIRS SUR FOND SOMBRE — 4 septembre 2026
   ----------------------------------------------------------------------------
   Ces blocs portent une couleur de texte propre : leurs liens doivent suivre,
   sinon ils héritent d'une teinte pensée pour un autre fond.
   ============================================================================ */
.merci-texte a,
.carnet-sceau a,
.cloture a {
  color: var(--laiton-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.24s ease;
}
.merci-texte a:hover,
.carnet-sceau a:hover,
.cloture a:hover { color: var(--ivoire); }

/* Les liens du sommaire ne sont pas soulignés : ce sont des repères de
   navigation, pas des renvois dans le texte. */
.doc-sommaire a { text-decoration: none; }

/* Les titres de section restent des titres, même quand ils portent une
   ancre : pas de soulignement, pas de laiton. */
.doc-section__ti a { color: inherit; text-decoration: none; }