/* Site public — mise en page (ticket K1).

   Ce fichier ne redéfinit AUCUN jeton : les couleurs, les espacements, les
   polices et les composants (.btn, .field, .input) viennent du design system
   « Modernist », servi sur /static/organisateur/design-system.css et posé
   par C3. Il est chargé avant celui-ci. Le chemin dit « organisateur » alors
   qu'on est sur des pages publiques — c'est un défaut de nommage, pas une
   raison de dupliquer le fichier.

   Pas d'étape de build, pas de préprocesseur : du CSS lisible tel quel, avec
   les noms de classes en français comme le reste des textes visibles. */

/* ── Ossature ─────────────────────────────────────────────────────────── */

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

.conteneur {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  box-sizing: border-box;
}

.section { padding: var(--space-8) 0; }

main:focus-visible { outline: none; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.1;
  text-wrap: balance;
}

a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent); }

/* Le lien d'évitement est retiré de l'écran, pas de l'ordre de tabulation :
   display:none le rendrait infocalisable, donc inutile. */
.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  z-index: 10;
}
.lien-evitement:focus {
  left: 0;
}

/* ── En-tête et navigation ────────────────────────────────────────────── */

.entete-publique {
  border-bottom: 1.5px solid var(--color-rule);
  background: var(--color-bg);
}

.entete-publique__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.marque {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
}

/* Le nom s'écrit comme une signature : serré, gras, en bas de casse. Il
   était en capitales espacées de 0,14 em — une mise en lettres qui appartient
   au vocabulaire modernist qu'on a quitté, et qui faisait ressembler le nom
   à une étiquette de rubrique plutôt qu'à une marque. */
.marque__nom {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.04em;
}

/* Le point qui suit le nom : la seule ponctuation de l'identité. */
.marque__nom::after { content: "\00b7"; color: var(--color-accent); }

.entete-publique__identite {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

/* La prononciation et l'origine, à côté du nom. Elle cède en taille avant de
   céder la place, et ne s'efface que sous 620 px — là où la barre a besoin
   de toute sa largeur pour « Se connecter » et « Créer ma galerie », qui ne
   disparaissent à aucune largeur. */
.marque__prononciation {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 1.5px solid var(--color-divider);
  font-size: 14px;
  color: var(--color-neutral-700);
  text-wrap: nowrap;
}

@media (max-width: 860px) {
  .marque__prononciation { font-size: 12.5px; }
}
@media (max-width: 620px) {
  .marque__prononciation { display: none; }
}

/* L'étiquette « nom provisoire » doit se voir sans crier : elle est là pour
   rappeler une décision en attente, pas pour concurrencer le nom. */
.marque__provisoire {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  border: 1.5px solid var(--color-divider);
  border-radius: 999px;
  padding: 1px var(--space-2);
  white-space: nowrap;
}

.menu__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
}

@media (max-width: 560px) {
  .menu__liste { gap: var(--space-3); font-size: 13.5px; }
  .marque__nom { font-size: 19px; }
}

/* Sans nowrap, chaque entrée est un élément flexible qui accepte de
   rétrécir : « Comment ça marche » se replierait sur deux lignes dans une
   colonne étroite au lieu de faire passer la rangée à la ligne. */
.menu__liste li { white-space: nowrap; }

.menu__liste a { text-decoration: none; }
.menu__liste a:hover { text-decoration: underline; }

.menu__cta { text-decoration: none; }

/* ── Accroche ─────────────────────────────────────────────────────────── */

.section--hero { padding-top: calc(var(--space-8) * 2); }

.surtitre {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  /* accent-700 : la tomate pleine ne tient pas le contraste à 12 px. */
  color: var(--color-accent-700);
}

.hero__titre {
  margin: var(--space-4) 0 0;
  font-size: clamp(32px, 6vw, 56px);
  max-width: 18ch;
}

.hero__chapo {
  margin: var(--space-4) 0 0;
  max-width: 62ch;
  font-size: 17px;
  color: var(--color-neutral-800);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__actions .btn { text-decoration: none; }

.hero__rassurance {
  margin: var(--space-4) 0 0;
  font-size: 14px;
  color: var(--color-neutral-700);
}

/* ── La pile de tirages ───────────────────────────────────────────────── */

/* Quatre photographies posées les unes sur les autres, chacune avec son bout
   de ruban adhésif et sa légende à la main. C'est la seule chose de cette
   page qui montre le produit plutôt que de le décrire.

   Les tirages sont positionnés en absolu dans une boîte de hauteur fixe :
   ils SE CHEVAUCHENT, ce qu'une grille ne sait pas faire. La contrepartie est
   que la hauteur est écrite à la main et doit suivre la largeur des tirages
   si on y touche — deux rangées de 206 px de côté, plus la marge de la
   légende, plus le décalage vertical de la seconde rangée. */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
}

.pile {
  position: relative;
  height: 448px;
}

.tirage {
  position: absolute;
  width: 206px;
  margin: 0;
  padding: 10px 10px 36px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  /* Une vraie ombre portée, floue, et c'est la seule de tout le produit : un
     tirage posé sur une table en projette une, alors qu'une fiche de
     l'interface n'en projette pas (le système n'a que des décalages pleins).
     L'exception dit « ceci est un objet », pas « ceci est un composant ». */
  box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--color-text) 45%, transparent);
}

.tirage img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--color-neutral-200);
}

.tirage__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 15.5px;
  color: var(--color-neutral-700);
  white-space: nowrap;
}

.tirage__ruban {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 74px;
  height: 22px;
  transform: translateX(-50%) rotate(-2deg);
  background: color-mix(in srgb, var(--color-warn) 42%, transparent);
}

.tirage:nth-child(1) { left: 0;   top: 18px;  transform: rotate(-7deg); }
.tirage:nth-child(2) { left: 33%; top: 0;     transform: rotate(3deg);  z-index: 2; }
.tirage:nth-child(3) { left: 10%; top: 214px; transform: rotate(4deg);  z-index: 4; }
.tirage:nth-child(4) { left: 44%; top: 230px; transform: rotate(-4deg); z-index: 3; }

/* Sous 900 px la pile passe sous le texte et se resserre ; sous 620 px elle
   disparaît. Quatre tirages superposés sur une colonne de téléphone se
   recouvrent au point de ne plus rien montrer, et une accroche qui se lit
   vaut mieux qu'une illustration qu'on devine. */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .pile { height: 400px; margin-top: var(--space-6); }
  .tirage { width: 176px; }
  .tirage:nth-child(3) { top: 186px; }
  .tirage:nth-child(4) { top: 200px; }
}

@media (max-width: 620px) {
  .pile { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .tirage { transition: transform .18s ease; }
  .tirage:hover { transform: rotate(0deg) scale(1.02); z-index: 5; }
}

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

.pied-public {
  border-top: 1.5px solid var(--color-rule);
  margin-top: calc(var(--space-8) * 2);
  padding: var(--space-8) 0;
}

.pied-public__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
}

.pied-public__baseline {
  margin: var(--space-3) 0 0;
  max-width: 38ch;
  color: var(--color-neutral-800);
  font-size: 14px;
}

/* L'origine du nom : plus petite et plus pâle que la baseline, parce qu'elle
   ne vend rien. Elle se lit quand on la cherche, pas avant. Le gris reste
   celui des textes secondaires du système (--color-neutral-700) et non une
   valeur choisie à l'œil : « discret » ne doit pas vouloir dire illisible. */
.pied-public__origine {
  margin: var(--space-2) 0 0;
  max-width: 42ch;
  color: var(--color-neutral-700);
  font-size: 13px;
  line-height: 1.5;
}

.pied-public__contact {
  margin: var(--space-3) 0 0;
  font-size: 14px;
  color: var(--color-neutral-800);
}

.pied-public__titre {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

.pied-public__rubrique ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 14px;
}

.pied-public__rubrique a { text-decoration: none; }
.pied-public__rubrique a:hover { text-decoration: underline; }

/* Les libellés légaux ne sont pas des liens tant que K4 n'a pas écrit les
   pages : ils ne doivent donc pas ressembler à des liens. */
.pied-public__inerte { color: var(--color-neutral-700); }

.pied-public__note {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-4);
  border-top: 1.5px solid var(--color-divider);
  font-size: 13px;
  color: var(--color-neutral-700);
}

/* ══ Contenu de la landing (K2) ═══════════════════════════════════════ */

.section--alt {
  background: var(--color-neutral-200);
  border-top: 1.5px solid var(--color-rule);
  border-bottom: 1.5px solid var(--color-rule);
}

.section__titre {
  margin: var(--space-3) 0 0;
  font-size: clamp(26px, 3.6vw, 38px);
  max-width: 22ch;
}

.section__chapo {
  margin: var(--space-4) 0 var(--space-6);
  max-width: 62ch;
  color: var(--color-neutral-800);
  text-wrap: pretty;
}

/* ── Emplacements d'illustration ──────────────────────────────────────── */

.visuel { margin: var(--space-6) 0 0; }

.visuel img {
  display: block;
  width: 100%;
  height: auto;
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Le cadre en attente : un aplat neutre et une légende qui dit ce que
   l'image montrera. Jamais un <img> vers un fichier absent, qui donnerait
   l'icône d'image cassée du navigateur sur la page commerciale. */
.visuel__attente {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border: 1.5px dashed var(--color-neutral-400);
  border-radius: var(--radius-md);
  background: var(--color-neutral-200);
  color: var(--color-neutral-500);
  font-size: 40px;
}

.visuel__legende {
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--color-neutral-700);
}

/* La paire d'écrans.
   Le téléphone est deux fois plus haut que large, l'ordinateur une fois et
   demie plus large que haut : à colonnes égales, la capture mobile faisait
   850 px de haut à côté d'une capture bureau de 430 px, et la section ne
   tenait plus dans un écran. On donne donc au téléphone une colonne étroite
   — la largeur qu'un téléphone a — et on cale les DEUX captures sur la même
   hauteur, pour qu'elles se lisent comme une paire et non comme une grande
   image et sa vignette. */
/* Deux colonnes calculées pour que les deux captures aient EXACTEMENT la même
   hauteur, à n'importe quelle largeur de fenêtre.
   Les captures ne sont pas au même format : le téléphone fait 1170 × 1992
   (h = 1,70256 × l), l'ordinateur 2560 × 1600 (h = 0,625 × l). Hauteurs
   égales ⟺ l_ordi / l_tel = 1,70256 / 0,625 = 2,7241. En fr et non en pixels :
   les fr se partagent la place restante après la gouttière, donc le rapport —
   et l'égalité des hauteurs — tient à toutes les largeurs, pas seulement à
   1080 px.
   Si une capture change de format, ce nombre est à recalculer : il vient de
   la taille des fichiers, pas d'un goût.
   La contrainte porte sur la largeur et jamais sur la hauteur : max-height +
   width:auto donnait la même image à l'arrivée, mais laissait la case vide
   tant que le fichier n'était pas chargé — sans largeur intrinsèque, l'<img>
   mesurait 3 px de côté et la section se dépliait d'un coup. */
.visuels-paire {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.7241fr);
  gap: var(--space-6);
  align-items: start;
}

/* La bordure de ces deux images passe en outline TRACÉE À L'INTÉRIEUR.
   Même trait à l'œil, mais l'outline ne prend aucune place dans la boîte :
   avec la bordure, les 1,5 px de chaque côté retiraient 3 px de contenu à
   CHAQUE capture, et 3 px constants ne se répartissent pas en fr. Les
   hauteurs tombaient à 458,71 et 461,95 — invisible, mais pas égal. Sans
   bordure dans la boîte, le rapport des colonnes s'applique au contenu lui-
   même et les deux hauteurs coïncident. */
.visuels-paire .visuel img {
  border: 0;
  outline: 1.5px solid var(--color-rule);
  outline-offset: -1.5px;
}

/* Empilées, les deux captures ne se comparent plus : le téléphone reprend une
   taille de téléphone au lieu de s'étirer sur toute la ligne. */
@media (max-width: 760px) {
  .visuels-paire { grid-template-columns: 1fr; }
  .visuels-paire__mobile .visuel {
    max-width: 250px;
    margin-inline: auto;
  }
}

/* ── Les trois étapes ─────────────────────────────────────────────────── */

.etapes {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}

.etape { border-top: 1.5px solid var(--color-rule); padding-top: var(--space-3); }

/* Le numéro en gros, évidé : il numérote sans peser, comme au crayon dans la
   marge. -webkit-text-stroke est le seul contour de texte que les
   navigateurs implémentent ; sans lui, la couleur de repli reste lisible. */
.etape__numero {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-neutral-400);
  -webkit-text-stroke: 1.5px var(--color-rule);
}

@supports (-webkit-text-stroke: 1px black) {
  .etape__numero { color: var(--color-bg); }
}

.etape__titre { margin: var(--space-2) 0 0; font-size: 19px; }

.etape__corps {
  margin: var(--space-2) 0 0;
  color: var(--color-neutral-800);
  font-size: 15px;
  text-wrap: pretty;
}

/* ── Comparatif ───────────────────────────────────────────────────────── */

/* Le tableau défile dans son propre cadre : sans cela, quatre colonnes de
   texte font déborder la page entière sur un téléphone. */
.tableau-cadre {
  margin-top: var(--space-6);
  overflow-x: auto;
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.comparatif {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 14px;
}

.comparatif__legende {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--space-3);
  color: var(--color-neutral-700);
  font-size: 13px;
}

.comparatif th,
.comparatif td {
  border-top: 1.5px solid var(--color-divider);
  padding: var(--space-3);
  text-align: left;
  vertical-align: top;
}
.comparatif thead th { border-top: 0; }

.comparatif thead th {
  background: var(--color-neutral-200);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* La colonne du produit est la seule mise en avant : le tableau doit rester
   lisible comme un tableau, pas comme une publicité. */
.comparatif thead th:nth-child(2) { background: var(--color-warn); color: var(--color-text); }

.comparatif tbody th {
  background: var(--color-neutral-200);
  font-weight: 600;
  white-space: nowrap;
}

.comparatif tbody td:first-of-type {
  background: color-mix(in srgb, var(--color-warn) 12%, transparent);
  font-weight: 600;
}

/* ── Tarifs ───────────────────────────────────────────────────────────── */

.offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
  align-items: start;
}

.offre {
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--color-surface);
}

/* Une seule offre porte le filet d'encre et l'ombre pleine : celle qu'on
   vend. Deux cartes également marquées ne mettent plus rien en avant. */
.offre--principale {
  border-color: var(--color-rule);
  box-shadow: var(--shadow-md);
}

.offre__nom {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

.offre__prix {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.offre__detail {
  margin: var(--space-3) 0 0;
  font-size: 14px;
  color: var(--color-neutral-800);
}

.offre__note {
  margin: var(--space-3) 0 0;
  font-size: 13px;
  color: var(--color-neutral-700);
}

.offre__inclus {
  list-style: none;
  margin: var(--space-4) 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 14px;
}

.offre__inclus li { padding-left: var(--space-4); position: relative; }
.offre__inclus li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-ok);
}

.offre .btn { text-decoration: none; }

.options__titre {
  margin: calc(var(--space-8) * 1.5) 0 0;
  font-size: 20px;
}

.options__chapo {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 14px;
  color: var(--color-neutral-700);
}

.options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

.option {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  border-top: 1.5px solid var(--color-rule);
  padding-top: var(--space-2);
  font-size: 15px;
}

.option__prix {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* Une option pas encore livrable occupe la place du prix sans en prendre le
   poids : police de texte, graisse normale, gris secondaire. Laissée dans le
   style du montant, « Bientôt disponible » aurait la typographie d'un tarif
   et se lirait comme une valeur — la ligne annoncerait un chiffre qui n'en
   est pas un. */
.option__prix--bientot {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--color-neutral-700);
}

.tarifs__indisponible {
  margin-top: var(--space-6);
  border: 1.5px solid var(--color-accent-700);
  border-radius: var(--radius-md);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  padding: var(--space-4);
  max-width: 62ch;
}

/* ── Questions fréquentes ─────────────────────────────────────────────── */

.faq { margin-top: var(--space-6); max-width: 74ch; }

.faq__item { border-top: 1.5px solid var(--color-divider); }
.faq__item:last-child { border-bottom: 1.5px solid var(--color-divider); }

.faq__question {
  cursor: pointer;
  padding: var(--space-4) 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  list-style-position: outside;
}

.faq__question:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.faq__reponse {
  padding: 0 0 var(--space-4);
  color: var(--color-neutral-800);
  font-size: 15px;
  max-width: 68ch;
  text-wrap: pretty;
}

/* ── Bannière finale ──────────────────────────────────────────────────── */

/* La dernière bande n'est plus un pavé d'encre. Elle reste du papier, un
   ton plus soutenu, cerné de deux filets francs : la page se ferme sans
   changer de matière. */
.banniere {
  background: var(--color-neutral-200);
  border-top: 1.5px solid var(--color-rule);
  border-bottom: 1.5px solid var(--color-rule);
  text-align: center;
}

.banniere__titre {
  margin: 0;
  font-size: clamp(26px, 4vw, 40px);
  max-width: 20ch;
}

.banniere__titre { margin-inline: auto; }

.banniere__corps {
  margin: var(--space-4) auto var(--space-6);
  max-width: 56ch;
  color: var(--color-neutral-800);
}

.banniere .btn { text-decoration: none; }

/* ══ Pages légales (K4) ═══════════════════════════════════════════════ */

/* Une colonne étroite et rien d'autre. Un document juridique se lit en
   entier ou pas du tout : ce qui compte est la longueur de ligne, pas la mise
   en scène. 68 caractères, la même mesure que la prose de l'accueil. */
.conteneur--texte {
  max-width: 68ch;
}

.section--legal {
  padding-top: var(--space-8);
}

.legal__titre {
  margin: 0;
  /* --font-display n'a jamais existé dans le système : la déclaration était
     invalide, donc ignorée, et le titre des pages légales tombait sur la
     police du corps. Il prend la police de titre comme tous les autres. */
  font-family: var(--font-heading);
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15;
  text-wrap: balance;
}

.legal__maj {
  margin: var(--space-2) 0 var(--space-8);
  font-size: 13px;
  color: var(--color-neutral-700);
}

.legal__section {
  margin-bottom: var(--space-8);
}

.legal__section-titre {
  margin: 0 0 var(--space-3);
  font-size: 18px;
  line-height: 1.3;
}

.legal__paragraphe {
  margin: 0 0 var(--space-3);
  line-height: 1.65;
}

.legal__liste {
  margin: var(--space-3) 0 0;
  /* --space-5 n'existe pas dans l'échelle (1, 2, 3, 4, 6, 8) : la
     déclaration était invalide, donc ignorée, et la liste tombait sur le
     retrait par défaut du navigateur. */
  padding-left: var(--space-6);
  line-height: 1.65;
}

.legal__contact {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1.5px solid var(--color-divider);
  font-size: 14px;
}

/* L'avis « ce document ne fait pas foi ». Il précède le titre et il est
   encadré : sa raison d'être est de gêner la lecture de quelqu'un qui
   croirait lire un document définitif. Il disparaît avec
   LegalDetailsProvisional. */
.avis-provisoire {
  margin: 0 0 var(--space-6);
  padding: var(--space-4);
  border: 1.5px solid var(--color-warn);
  border-left-width: 6px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}

.avis-provisoire__titre {
  margin: 0 0 var(--space-2);
  font-weight: 600;
  font-size: 15px;
}

.avis-provisoire__corps {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-neutral-800);
}