/* ==========================================================================
   Construktible — home
   Système : DESIGN.md. Autorité visuelle : logo.svg.
   Trait plein = ce qui existe. Pointillé vert = ce qui est projeté.
   Deux verts : l'aplat profond est une surface, le vert vif est un signal.
   ========================================================================== */

/* Archivo, auto-hébergée (licence SIL OFL, assets/fonts/OFL.txt). Fichiers
   variables : un seul par style couvre les graisses 300 à 500. Le sous-ensemble
   latin couvre le français complet — œ, €, guillemets, espaces fines. */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin-italic.woff2') format('woff2');
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --ground:       #F5F0E8;
  --ground-deep:  #EAE4D9;
  --deep:         #08402A;
  --on-deep:      #F5F0E8;
  --on-deep-soft: rgba(245, 240, 232, 0.78);
  --on-deep-line: rgba(245, 240, 232, 0.55);
  --ink:          #14140F;
  --ink-soft:     #5A5A4E;
  --panel:        #FFFFFF;
  --accent:       #079D57;
  --accent-hover: #0AAE60;
  --control:      #82826F;
  --hairline:     #DCD5C8;
  --hairline-deep:#D3CBBC;
  --error:        #B3261E;

  --font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t--1: 0.875rem;
  --t-0:  1.0625rem;
  --t-1:  1.1875rem;
  --t-2:  clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
  --t-3:  clamp(1.8rem, 1.35rem + 1.9vw, 2.45rem);
  --t-4:  clamp(2.35rem, 1.6rem + 3.6vw, 3.9rem);

  --section:  clamp(3.5rem, 6vw, 5.5rem);
  --pad:      clamp(1.75rem, 4.5vw, 4rem);
  --shell:    76rem;
  --measure:  66ch;

  --r-panel: 2.5rem;
  --r-btn:   0.875rem;
  --r-field: 0.625rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------- reset + base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* L'en-tête est collant : les ancres doivent s'arrêter sous lui. */
[id] { scroll-margin-top: 6rem; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-0);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-4); letter-spacing: -0.028em; line-height: 1.06; }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-2); }

p { margin: 0; }
p + p { margin-top: 1.15em; }

a { color: inherit; }

img, svg { display: block; max-width: 100%; }

::selection { background: var(--accent); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--ground);
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- layout */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.measure { max-width: var(--measure); }

.section { padding-block: var(--section); }

.lede {
  font-size: var(--t-1);
  line-height: 1.65;
  margin-top: 1.5rem;
}

/* ------------------------------------------------------- aplats profonds */

.panel-deep {
  position: relative;
  isolation: isolate;
  background: var(--deep);
  color: var(--on-deep);
  border-radius: var(--r-panel);
  padding: var(--pad);
  overflow: hidden;
}

/* Grille millimétrée : texture, jamais distraction. */
.panel-deep::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  rgba(245,240,232,.07) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, rgba(245,240,232,.07) 0 1px, transparent 1px 26px);
}

.panel-deep :focus-visible { outline-color: var(--on-deep); }

/* --------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ground);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  padding-block: 0.5rem;
}

.brand__mark { flex: none; width: auto; height: 2.5rem; }

.mark-ink,
.mark-projected { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mark-ink       { stroke: var(--ink); stroke-width: 1.6; }
.mark-projected { stroke: var(--accent); stroke-width: 1.6; }

.mark-projected .d44   { stroke-dasharray: 4.4 4.4; }
.mark-projected .d443  { stroke-dasharray: 4.4286 4.4286; }
.mark-projected .d549  { stroke-dasharray: 5.4937 5.4937; }
.mark-projected .d409  { stroke-dasharray: 4.0912 4.0912; }

.wordmark {
  display: grid;
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.32;
  text-transform: uppercase;
}
.wordmark > span:first-child { letter-spacing: 0.1em; }
.wordmark > span:last-child  { letter-spacing: 0.25em; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  font-size: var(--t--1);
}

.site-nav > a:not(.btn) {
  text-decoration: none;
  color: var(--ink);
  padding-block: 0.5rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s var(--ease);
}
.site-nav > a:not(.btn):hover { border-bottom-color: var(--ink); }

@media (max-width: 44rem) {
  .site-nav > a:not(.btn) { display: none; }
}

/* Le bouton de l'en-tête garde une seule ligne : libellé court sous 26rem,
   wordmark masqué sous 22.5rem — le hero, juste dessous, le porte en grand. */
.label-short { display: none; }

@media (max-width: 26rem) {
  .label-long  { display: none; }
  .label-short { display: inline; }
  .site-header__inner { gap: 1rem; }
}

@media (max-width: 22.5rem) {
  .brand .wordmark { display: none; }
}

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font: inherit;
  font-size: var(--t-0);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

/* Le vert vif ne porte que de l'encre : 5,25:1. Au survol il s'éclaircit au
   lieu de s'assombrir, ce qui éloigne le fond de l'encre (6,37:1). */
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: var(--accent-hover); }

.btn--outline {
  background: transparent;
  color: var(--on-deep);
  border-color: var(--on-deep-line);
}
.btn--outline:hover { background: rgba(245, 240, 232, 0.1); border-color: var(--on-deep); }

/* Bouton secondaire sur fond clair (pages de contenu). */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: rgba(20, 20, 15, 0.06); }

.btn--sm { min-height: 2.5rem; padding: 0.55rem 1.15rem; font-size: var(--t--1); border-radius: 0.6rem; }
.btn--block { width: 100%; }

/* ----------------------------------------------------------------- hero */

.hero { padding-block: 0.5rem clamp(1rem, 2vw, 2rem); }

.hero__panel {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: clamp(2.75rem, 6vw, 5rem);
}

@media (min-width: 60rem) {
  .hero__panel {
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.hero__kicker {
  font-style: italic;
  color: var(--on-deep-soft);
  max-width: 44ch;
}

.hero__title { margin-top: 1.3rem; max-width: 16ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.5rem;
}

/* Le logo à l'échelle de la page. Il reprend les classes .mark-* de l'en-tête ;
   seul le trait plein change, l'anthracite étant illisible sur l'aplat profond. */
.hero__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.hero__logo-mark {
  flex: 0 0 auto;
  width: auto;
  height: clamp(9rem, 21vw, 14rem);
}

.hero__logo .mark-ink { stroke: var(--on-deep); }

.wordmark--hero {
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: var(--on-deep);
}

/* Le bloc logo se mesure à sa propre largeur plutôt qu'à celle de la fenêtre :
   dessin et wordmark gardent leur proportion et tiennent dans le panneau
   jusqu'à 320 px. L'écart passe sur le wordmark, une unité de conteneur ne
   pouvant pas dimensionner le conteneur lui-même. */
@supports (width: 1cqi) {
  .hero__logo { container-type: inline-size; gap: 0; }
  .hero__logo-mark { height: min(14rem, 44cqi); }
  .wordmark--hero {
    font-size: min(3rem, 10cqi);
    margin-left: min(1.75rem, 4cqi);
  }
}

/* -------------------------------------------------------------- problème */

.section--problem { padding-block: clamp(4rem, 8vw, 7rem); }

/* Le texte tient la colonne de gauche, l'illustration occupe le vide de droite.
   Le PNG est détouré : posé à même le fond clair, il n'a besoin d'aucune
   plaque — contrairement à celui du hero, qui se détache sur l'aplat profond. */
.problem {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .problem { grid-template-columns: 1fr 0.85fr; }
}

.problem__illustration {
  width: 100%;
  max-width: 32rem;
  height: auto;
  justify-self: center;
}

/* ------------------------------------------------------ 3. la méthode */

.method__panel h2,
.method__panel .lede { color: var(--on-deep); }
.method__panel .lede { color: var(--on-deep-soft); }

.steps {
  list-style: none;
  margin: clamp(2.75rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  row-gap: clamp(3rem, 6vw, 5rem);
}

.steps__pair {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
}

/* Les trois étapes tiennent sur une seule ligne : la règle qui les surmonte
   passe alors du trait plein au pointillé sur toute la séquence, et dit à elle
   seule ce que la page raconte — l'existant à gauche, le projeté à droite. */
@media (min-width: 62rem) {
  .steps__pair { grid-template-columns: repeat(3, 1fr); }
}

.rule {
  width: 100%;
  height: 2px;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  overflow: visible;
}

.rule line { vector-effect: non-scaling-stroke; stroke-width: 2; }
.rule__ink       { stroke: var(--on-deep); }
.rule__projected { stroke: var(--accent); stroke-dasharray: 6 6; }

/* Le seul moment orchestré de la page : la liaison se trace au défilement.
   Elle avance de gauche à droite quand la paire entre dans le champ, reste
   pleine le temps de la lecture, puis se retire dans le même sens quand la
   paire sort. Le mouvement est piloté par la position de défilement, donc il
   s'inverse naturellement quand on remonte. */

@supports (animation-timeline: view()) {
  .steps__row {
    view-timeline-name: --row;
    view-timeline-axis: block;
  }

  .rule {
    animation: rule-scrub linear both;
    animation-timeline: --row;
    animation-range: cover 0% cover 100%;
  }

  @keyframes rule-scrub {
    0%   { clip-path: inset(0 100% 0 0); }
    38%  { clip-path: inset(0 0 0 0); }
    72%  { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 100%); }
  }
}

/* Repli : sans animation liée au défilement, un tracé unique à l'entrée. */
.rule.js-draw {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.05s var(--ease);
}
.rule.js-draw.is-drawn { clip-path: inset(0 0 0 0); }

.step__num {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--on-deep-soft);
}

.step__title { margin-top: 1.15rem; color: var(--on-deep); }

.step p:not(.step__num) {
  margin-top: 0.9rem;
  max-width: 44ch;
  color: var(--on-deep-soft);
}

/* ------------------------------------------------------------ 4. tarifs */

/* Le filet en tête de bloc porte le sens, comme aux piliers — et il le porte
   ici selon le principe du logo : plein pour le prix certain, pointillé vert
   pour celui qui reste à déterminer. */
.tarifs {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  gap: clamp(2.25rem, 4vw, 3rem);
}

@media (min-width: 52rem) {
  .tarifs { grid-template-columns: repeat(2, 1fr); }
}

.tarif { border-top: 1px solid var(--ink); padding-top: 1.5rem; }
.tarif p:last-child { margin-top: 0.9rem; max-width: 42ch; }

/* Le montant n'est pas arrêté : le filet passe au pointillé vert. Il est
   épaissi, un trait discontinu de 1px se lisant mal à cette échelle. */
.tarif--variable { border-top: 2px dashed var(--accent); padding-top: 1.4375rem; }

.tarif__prix {
  font-size: var(--t-3);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.tarifs__note {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  color: var(--ink-soft);
  font-size: var(--t--1);
}

/* -------------------------------------------------------- 5. comparatif */

/* Deux panneaux en vis-à-vis plutôt qu'un aplat pleine largeur : l'opposition
   se lit au changement de surface, avant même le texte. La colonne de droite
   est plus large — le regard doit aller d'abord à ce qu'on propose. */
.compare {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  align-items: stretch;
  gap: 1.5rem;
}

@media (min-width: 60rem) {
  .compare { grid-template-columns: 1fr 1.15fr; }
}

/* Le fond clair densifié, pas un gris : la palette ne compte aucune couleur
   froide, et un gris franc se verrait aussitôt à côté de l'aplat vert. Aucune
   ombre ici — elle reste au seul panneau blanc du formulaire. */
.compare__alone {
  background: var(--ground-deep);
  border-radius: var(--r-panel);
  padding: var(--pad);
}

.compare__head {
  margin: 0 0 1.75rem;
  font-size: var(--t-2);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.14;
}

.compare__list { margin: 0; padding: 0; list-style: none; }
.compare__list li { padding: 1.1rem 0; max-width: 42ch; }

/* Sur le fond densifié, le filet courant s'efface : il est repris d'un cran. */
.compare__alone .compare__list li {
  border-top: 1px solid var(--hairline-deep);
  color: var(--ink-soft);
}

/* Sur l'aplat profond, encre et filet plein seraient illisibles : tout repasse
   en ivoire, comme aux étapes de la méthode. */
.compare__with .compare__head { color: var(--on-deep); }
.compare__with .compare__list li {
  border-top: 1px solid var(--on-deep-line);
  color: var(--on-deep-soft);
}
.compare__with .compare__list strong { color: var(--on-deep); font-weight: 500; }

/* Ce sur quoi on ne s'engage pas. Un comparatif est le format où la promesse
   implicite s'installe le plus vite : la réserve est structurelle, pas une
   mention légale reléguée. */
.compare__note {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  color: var(--ink-soft);
  font-size: var(--t--1);
}

/* --------------------------------------------------------------- 5. FAQ */

.faq-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }

@media (min-width: 56rem) {
  .faq-layout { grid-template-columns: 4fr 7fr; gap: clamp(3rem, 6vw, 5rem); }
  .faq-layout__head { position: sticky; top: 7rem; }
}

.faq {
  max-width: 68ch;
  border-bottom: 1px solid var(--hairline);
}

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

.qa summary {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding-block: 1.5rem;
  font-size: var(--t-1);
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary > span { flex: 1; text-wrap: pretty; }

/* Marqueur + / − dessiné au trait, pas une icône rapportée. */
.qa summary::after {
  content: '';
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.45rem;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink));
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 1px, 1px 100%;
  transition: background-size 0.24s var(--ease);
}
.qa[open] summary::after { background-size: 100% 1px, 1px 0; }

.qa__body { padding-bottom: 1.75rem; max-width: 64ch; }
.qa__body p { line-height: 1.75; }

/* ------------------------------------------------------------- 6. devis */

.devis { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); align-items: start; }

@media (min-width: 56rem) {
  .devis { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 6vw, 5rem); }
  .devis__intro { position: sticky; top: 7rem; }
}

.panel {
  background: var(--panel);
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: 0 1px 2px rgba(20, 20, 15, 0.04), 0 12px 32px rgba(20, 20, 15, 0.06);
}

.field { margin-bottom: 1.5rem; }

.field label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0.45rem;
}

.field__opt { font-weight: 400; color: var(--ink-soft); }

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--control);
  border-radius: var(--r-field);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.16s var(--ease);
}
.field textarea { resize: vertical; min-height: 8.5rem; }

.field input:hover,
.field textarea:hover { border-color: var(--ink); }

.field input:focus-visible,
.field textarea:focus-visible { border-color: var(--ink); }

.field__hint { margin-top: 0.45rem; font-size: var(--t--1); color: var(--ink-soft); }

.field__error,
.form__error {
  margin-top: 0.5rem;
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--error);
}

.form__error {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--error);
  border-radius: var(--r-field);
}

.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--error); }

.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.rgpd {
  margin-top: 1.5rem;
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--ink-soft);
}
.rgpd a { color: var(--ink); text-underline-offset: 0.2em; }

.btn[aria-busy='true'] { opacity: 0.75; pointer-events: none; }

.form-sent h3 { margin-bottom: 1rem; }
.form-sent p { max-width: 46ch; color: var(--ink-soft); }

/* -------------------------------------------------------------- footer */

.site-footer { padding-block: 0 clamp(1rem, 2vw, 2rem); }

.site-footer__inner {
  display: grid;
  gap: 1.5rem;
  background: var(--deep);
  color: var(--on-deep);
  border-radius: var(--r-panel);
  padding: clamp(2rem, 4.5vw, 3.5rem);
}

@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
    row-gap: 2rem;
  }
  .site-footer__brand   { grid-column: 1; }
  .site-footer__nav     { grid-column: 2; grid-row: 1; justify-self: end; }
  .site-footer__legal   { grid-column: 2; grid-row: 2; justify-self: end; }
  .site-footer__contact { grid-column: 1; grid-row: 2; }
  .site-footer__copy    { grid-column: 1 / -1; }
}

.site-footer__brand { font-weight: 500; }

.site-footer__nav,
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  font-size: var(--t--1);
}

/* Souligné par text-decoration et non par une bordure : la zone de clic peut
   ainsi atteindre 44 px de haut sans éloigner le trait du texte. */
.site-footer a {
  display: inline-block;
  padding-block: 0.7rem;
  color: var(--on-deep);
  text-decoration: underline;
  text-decoration-color: var(--on-deep-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.18s var(--ease);
}
.site-footer a:hover { text-decoration-color: var(--on-deep); }

.site-footer :focus-visible { outline-color: var(--on-deep); }

.site-footer__legal a,
.site-footer__copy { color: var(--on-deep-soft); }

.site-footer__contact { font-size: var(--t-0); }

.site-footer__copy {
  font-size: var(--t--1);
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* ------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Une animation liée au défilement n'a pas de durée : il faut la couper
     explicitement, sinon la règle ci-dessus ne l'atteint pas. */
  .rule {
    animation: none !important;
    clip-path: none !important;
  }
}

/* ---------------------------------------------------- pages de contenu */

/* Mentions légales, confidentialité, confirmation d'envoi, page introuvable :
   une colonne de lecture posée sur le fond clair, sans panneau. Ce sont des
   pages qu'on consulte, pas des pages qu'on parcourt. */
.doc { padding-block: clamp(3rem, 7vw, 5.5rem) var(--section); }
.doc h1 { font-size: var(--t-3); max-width: 24ch; }
.doc__lede { margin-top: 1.25rem; font-size: var(--t-1); color: var(--ink-soft); }

.doc h2 {
  font-size: var(--t-2);
  margin-top: clamp(2.5rem, 5vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.doc h2 + * { margin-top: 1rem; }
.doc p + p { margin-top: 1em; }
.doc ul { margin: 1rem 0 0; padding-left: 1.2rem; }
.doc li + li { margin-top: 0.4rem; }
.doc a { text-underline-offset: 0.2em; }

.doc dl {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: 0.6rem 1.5rem;
  margin: 1rem 0 0;
}
.doc dt { color: var(--ink-soft); }
.doc dd { margin: 0; }

@media (max-width: 36rem) {
  .doc dl { grid-template-columns: 1fr; gap: 0.1rem; }
  .doc dd + dt { margin-top: 0.8rem; }
}

.doc__date { margin-top: clamp(2.5rem, 5vw, 3.25rem); font-size: var(--t--1); color: var(--ink-soft); }
.doc__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.25rem; }

/* Information à compléter avant la mise en ligne : visible à l'écran, pour
   qu'aucune ne parte en ligne par mégarde. */
.todo {
  background: #F6E3A8;
  color: var(--ink);
  padding: 0 0.3em;
  border-radius: 0.25rem;
}