/* ==========================================================================
   Retire Ton Post — feuille de style commune (identité « Appli / pop »)
   Téléphone d'abord : 390 px est l'écran de référence.
   Fond lilas, cartes blanches, encre presque noire ; signature en dégradé
   violet -> fuchsia -> pêche ; menthe pour les états positifs.
   Variante nuit automatique (prefers-color-scheme: dark).
   Tout passe par les variables ci-dessous : aucune couleur en dur ailleurs.

   Sommaire
    1. Polices            7. Héros, animation signature   13. Article long, prose, légal
    2. Variables          8. Tuiles, listes, étapes       14. Aide d'urgence
    3. Base               9. Bulles, stories, autocollants 15. Appel final, 404, pied de page
    4. Mise en page      10. Tarifs                        16. Conversion, barre d'onglets
    5. Typographie       11. Encadrés, accordéon, cartes   17. Compatibilité socle
    6. Boutons, en-tête  12. Formulaire                    18. Mouvement, impression
   ========================================================================== */

/* 1. Polices --------------------------------------------------------------- */
/* Hébergées avec le site (licence SIL OFL : LICENSE-*.txt dans assets/fonts). */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Replis système aux mesures ajustées : pendant le chargement (font-display: swap),
   le texte occupe la même place qu'avec la police finale — pas de saut de mise en page.
   Mesures prises sur les fichiers (largeur moyenne d'un texte français, hauteurs). */
@font-face {
  font-family: "RTP Titre Repli";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Neue Bold"), local("Helvetica Bold"), local("Roboto Bold"), local("Arial");
  font-weight: 200 800;
  size-adjust: 101.4%;
  ascent-override: 91.7%;
  descent-override: 26.6%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "RTP Texte Repli";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica"), local("Roboto");
  font-weight: 200 500;
  size-adjust: 103%;
  ascent-override: 101%;
  descent-override: 21.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "RTP Texte Repli";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Neue Bold"), local("Helvetica Bold"), local("Roboto Bold");
  font-weight: 600 800;
  size-adjust: 100%;
  ascent-override: 104%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* 2. Variables ------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Marque */
  --violet: #6d28d9;
  --violet-mid: #a826c9;
  --fuchsia: #cf1f8f;
  --peach: #ffb38a;
  --peach-deep: #ff9e7a;
  --lilac: #eadfff;
  --mint: #12d6a6;
  --ink: #160d2e;
  --white: #ffffff;
  --violet-rgb: 109, 40, 217;
  --fuchsia-rgb: 207, 31, 143;
  --peach-rgb: 255, 179, 138;
  --ink-rgb: 22, 13, 46;
  --light-rgb: 255, 255, 255;

  /* Dégradés.
     --grad-brand  : la signature complète (décor, pictogrammes, bordures) — jamais sous du texte clair.
     --grad-action : violet -> fuchsia, AA partout sous du texte blanc (bouton, héros, bulles). */
  --grad-brand: linear-gradient(120deg, #6d28d9 0%, #cf1f8f 56%, #ffb38a 100%);
  --grad-action: linear-gradient(112deg, #6d28d9 0%, #a826c9 54%, #cf1f8f 100%);
  --grad-soft: linear-gradient(120deg, rgba(109, 40, 217, 0.12), rgba(207, 31, 143, 0.1) 56%, rgba(255, 179, 138, 0.22));
  --on-grad: #ffffff;
  --on-grad-2: #f7edff;
  --on-peach: #160d2e;

  /* Rôles (mode clair) */
  --bg: #f4eeff;
  --bg-2: #eadfff;
  --surface: #ffffff;
  --surface-2: #f8f4ff;
  --panel: #1f1042;
  --panel-2: #2c1760;
  --text: #160d2e;
  --text-2: #463a66;
  --text-3: #5d5280;
  --link: #6d28d9;
  --line: #ddd0f7;
  --line-strong: #8f7bc7;
  --focus: #160d2e;
  --field-bg: #ffffff;
  --field-line: #8f7bc7;
  --positive: #00785f;
  --positive-bg: #d7faef;
  --positive-line: #12d6a6;
  --on-mint: #160d2e;
  --danger: #b0185c;
  --danger-bg: #ffeef4;
  --danger-line: #e58bb0;
  --todo-text: #6b4700;
  --todo-bg: #fff1c2;
  --todo-line: #c99a1e;
  --hl: #ffc9a8;
  --hl-text: #160d2e;
  --scrim: rgba(22, 13, 46, 0.5);

  /* Ombres colorées douces */
  --shadow-card: 0 1px 2px rgba(64, 24, 128, 0.06), 0 12px 28px -16px rgba(109, 40, 217, 0.3);
  --shadow-lift: 0 2px 4px rgba(64, 24, 128, 0.08), 0 22px 44px -20px rgba(109, 40, 217, 0.46);
  --shadow-pop: 0 12px 26px -12px rgba(207, 31, 143, 0.6);
  --shadow-bar: 0 -2px 4px rgba(64, 24, 128, 0.04), 0 -14px 34px -14px rgba(64, 24, 128, 0.34);

  /* Polices */
  --font-title: "Bricolage Grotesque", "RTP Titre Repli", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", "RTP Texte Repli", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Tailles de texte */
  --fs-display: clamp(2.5rem, 9.4vw + 0.25rem, 5.5rem);
  --fs-h1: clamp(2.125rem, 7.6vw + 0.25rem, 4.25rem);
  --fs-h2: clamp(1.75rem, 5.4vw + 0.4rem, 3rem);
  --fs-h3: clamp(1.1875rem, 1vw + 1rem, 1.5rem);
  --fs-title: clamp(1.375rem, 1.6vw + 1.05rem, 1.875rem);
  --fs-lead: clamp(1.0625rem, 0.6vw + 0.95rem, 1.25rem);
  --fs-statement: clamp(1.25rem, 1.6vw + 0.9rem, 1.75rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-fine: 0.8125rem;

  /* Espaces */
  --gutter-page: clamp(1.125rem, 4.6vw, 2.5rem);
  --inset: clamp(0.5rem, 1.7vw, 1.5rem);
  --gutter: var(--gutter-page);
  --space-section: clamp(3rem, 9vw, 6.5rem);
  --space-block: clamp(1.5rem, 4.5vw, 2.75rem);
  --gap: clamp(0.875rem, 1.6vw, 1.25rem);
  --header-h: 4rem;
  --target: 2.75rem;
  --target-lg: 3.5rem;
  --action-bar-h: 4.75rem;

  /* Largeurs */
  --w-page: 75rem;
  --w-narrow: 46rem;
  --w-text: 42.5rem;

  /* Rayons */
  --radius-s: 0.75rem;
  --radius-m: 1.25rem;
  --radius-l: 1.5rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  /* Mouvement */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 360ms;
  --t-blob: 26s;
}

@media (min-width: 600px) {
  :root {
    --fs-body: 1.0625rem;
  }
}

/* Variante nuit : violet très sombre, mêmes dégradés. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #140a26;
    --bg-2: #1c0f34;
    --surface: #22143e;
    --surface-2: #2b1a4d;
    --panel: #2a1558;
    --panel-2: #3a1d78;
    --text: #f3edff;
    --text-2: #cdc3ea;
    --text-3: #ab9ed2;
    --link: #cdaeff;
    --line: #3b2866;
    --line-strong: #7a63b8;
    --focus: #ffd2b8;
    --field-bg: #180c2e;
    --field-line: #7a63b8;
    --positive: #5eead4;
    --positive-bg: #0f3a36;
    --positive-line: #12d6a6;
    --danger: #ffa3c4;
    --danger-bg: #3d1230;
    --danger-line: #a8356c;
    --todo-text: #ffd97a;
    --todo-bg: #3a2a05;
    --todo-line: #a07a14;
    --hl: #7a1f8f;
    --hl-text: #ffffff;
    --scrim: rgba(8, 3, 20, 0.55);
    --grad-soft: linear-gradient(120deg, rgba(139, 47, 224, 0.26), rgba(207, 31, 143, 0.2) 56%, rgba(255, 179, 138, 0.16));
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 30px -18px rgba(0, 0, 0, 0.7);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 46px -20px rgba(0, 0, 0, 0.8);
    --shadow-pop: 0 12px 28px -12px rgba(207, 31, 143, 0.7);
    --shadow-bar: 0 -14px 34px -14px rgba(0, 0, 0, 0.8);
  }
}

/* Contextes « sur dégradé » et « panneau sombre » : le texte passe en clair. */
.hero,
.page-hero,
.section-dark,
.theme-dark,
.cta-section,
.site-footer,
.story-card,
.tile-accent,
.tile-dark,
.free-box .help-side,
.on-grad {
  --text: #ffffff;
  --text-2: #ffffff;
  --text-3: #ffffff;
  --link: #ffffff;
  --line: rgba(255, 255, 255, 0.28);
  --line-strong: rgba(255, 255, 255, 0.6);
  --focus: #ffffff;
  --hl: #ffffff;
  --hl-text: #5b21b6;
  --positive: #ffffff;
  color: var(--text);
}

/* Sur le panneau violet nuit (et non sur un aplat dégradé), le texte secondaire peut être adouci. */
.section-dark,
.theme-dark,
.site-footer,
.tile-dark {
  --text-2: #ece2ff;
  --text-3: #d3c6f3;
}

/* Contextes clairs à l'intérieur d'un contexte sombre (carte blanche dans un héros). */
.surface,
.contact-form,
.post-demo,
.bubble,
.aside-box,
.risk-box,
.contact-assurances,
.contact-call,
.emergency,
.minor-note,
.free-box,
.price-card,
.callout,
.notice,
.article-notice,
.article-toc,
.table-wrap,
.hero-foot,
.timeline-item,
.trust-grid > div,
.steps > li,
.proof-grid > div,
.options-grid > article,
.case-card,
.blog-card,
.situation-list li,
.pricing-table tbody tr,
.accordion-list details > :not(summary),
.tile:not(.tile-accent):not(.tile-dark),
.legal-hero,
.contact-hero,
.article-hero,
.error-page {
  --text: var(--root-text);
  --text-2: var(--root-text-2);
  --text-3: var(--root-text-3);
  --link: var(--root-link);
  --line: var(--root-line);
  --line-strong: var(--root-line-strong);
  --focus: var(--root-focus);
  --hl: var(--root-hl);
  --hl-text: var(--root-hl-text);
  --positive: var(--root-positive);
  color: var(--text);
}

:root {
  --root-text: #160d2e;
  --root-text-2: #463a66;
  --root-text-3: #5d5280;
  --root-link: #6d28d9;
  --root-line: #ddd0f7;
  --root-line-strong: #8f7bc7;
  --root-focus: #160d2e;
  --root-hl: #ffc9a8;
  --root-hl-text: #160d2e;
  --root-positive: #00785f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --root-text: #f3edff;
    --root-text-2: #cdc3ea;
    --root-text-3: #ab9ed2;
    --root-link: #cdaeff;
    --root-line: #3b2866;
    --root-line-strong: #7a63b8;
    --root-focus: #ffd2b8;
    --root-hl: #7a1f8f;
    --root-hl-text: #ffffff;
    --root-positive: #5eead4;
  }
}

/* 3. Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scroll-padding-bottom: calc(var(--action-bar-h) + 1.5rem);
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

main {
  display: block;
}

main:focus {
  outline: none;
}

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

img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--link);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.2em;
}

strong,
b {
  font-weight: 700;
}

small {
  font-size: var(--fs-small);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

a,
button,
summary,
label,
input,
select,
textarea {
  touch-action: manipulation;
}

::selection {
  background: var(--fuchsia);
  color: var(--white);
}

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

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 1.125rem;
  border-radius: var(--radius-s);
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  outline-color: var(--peach);
}

/* Pictogrammes : trait épais et rond, grille de 24. */
.icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-small {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 3;
}

/* 4. Mise en page ---------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--w-page));
  margin-inline: auto;
}

.container.narrow {
  width: min(100% - 2 * var(--gutter), var(--w-narrow));
}

.container.legal-layout {
  width: min(100% - 2 * var(--gutter), var(--w-text));
}

/* Trois niveaux : la page lilas (.section), la feuille blanche (.section-tinted)
   et le grand panneau violet nuit (.section-dark). Les deux derniers sont des
   panneaux arrondis posés sur le fond, comme les feuilles d'une appli. */
.section {
  position: relative;
  padding-block: var(--space-section);
}

.section-tinted,
.section-dark,
.theme-pearl,
.theme-dark {
  --gutter: calc(var(--gutter-page) - var(--inset));
  margin-inline: var(--inset);
  border-radius: var(--radius-xl);
}

.section-tinted,
.theme-pearl {
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.section-dark,
.theme-dark {
  background:
    radial-gradient(34rem 22rem at 108% -12%, rgba(var(--fuchsia-rgb), 0.5), transparent 68%),
    radial-gradient(26rem 20rem at -10% 112%, rgba(var(--violet-rgb), 0.55), transparent 70%),
    var(--panel);
  overflow: hidden;
}

/* Deux panneaux qui se suivent : un peu d'air entre eux. */
.section-tinted + .section-tinted,
.section-tinted + .section-dark,
.section-dark + .section-tinted,
.section-dark + .section-dark,
.hero + .section-tinted,
.hero + .section-dark,
.page-hero + .section-tinted,
.page-hero + .section-dark {
  margin-top: var(--inset);
}

.section-compact {
  padding-block: calc(var(--space-section) * 0.5);
}

.section-flush-top {
  padding-top: 0;
}

.section-flush-bottom {
  padding-bottom: 0;
}

.section-heading {
  max-width: 44rem;
  margin-bottom: var(--space-block);
}

.section-heading > * + * {
  margin-top: 0.875rem;
}

.section-heading.heading-center {
  margin-inline: auto;
  text-align: center;
}

.section-heading.heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  max-width: none;
}

.section-heading.heading-row > * + * {
  margin-top: 0;
}

/* Rythme vertical automatique */
.flow > * + *,
.stack > * + * {
  margin-top: var(--gap);
}

/* Dans une section, les grands blocs qui se suivent sont espacés automatiquement
   (sauf dans les conteneurs qui gèrent leur propre rythme). */
.section > .container:not(.statement):not(.prose):not(.flow):not(.stack):not(.split):not(.content-grid):not(.contact-layout):not(.contact-grid):not(.hero-grid):not(.cta-inner):not(.article-layout) > * + * {
  margin-top: var(--space-block);
}

/* Carte blanche générique, et grande carte en aplat dégradé (texte blanc). */
.surface,
.on-grad {
  padding: clamp(1.125rem, 4vw, 2rem);
  border-radius: var(--radius-l);
}

.surface {
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.on-grad {
  background: var(--grad-action);
}

.surface > * + *,
.on-grad > * + * {
  margin-top: 0.75rem;
}

.text-center {
  text-align: center;
}

.muted {
  color: var(--text-2);
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.actions > .button-small {
  align-self: flex-start;
}

.center-action {
  display: flex;
  justify-content: center;
  margin-top: var(--space-block);
}

@media (min-width: 600px) {
  .actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
  }
}

/* Deux colonnes : titre à gauche, contenu à droite (empilé sur téléphone). */
.content-grid,
.split {
  display: grid;
  gap: var(--space-block);
}

@media (min-width: 900px) {
  .content-grid,
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }

  .split.split-even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .split.split-sticky > :first-child {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}

.content-grid > :first-child > * + *,
.split > :first-child > * + * {
  margin-top: 0.875rem;
}

/* 5. Typographie ----------------------------------------------------------- */
h1,
h2,
h3,
h4,
.h-display,
.h-large,
.h-medium,
.h-small {
  color: var(--text);
  font-family: var(--font-title);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

h1,
.h-large {
  font-size: var(--fs-h1);
}

h2,
.h-medium {
  font-size: var(--fs-h2);
  line-height: 1.05;
}

h3,
.h-small {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
}

h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.h-display {
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.h-large {
  line-height: 1.02;
}

/* Sur-titre : une étiquette en pastille (jamais de capitales espacées). */
.eyebrow {
  display: inline-block;
  justify-self: start;
  max-width: 100%;
  padding: 0.3125rem 0.75rem 0.3125rem 1.625rem;
  border: 1.5px solid var(--line);
  border-radius: 0.875rem;
  background:
    radial-gradient(circle at 0.8125rem 50%, var(--fuchsia) 0 0.25rem, transparent 0.3125rem),
    var(--surface);
  color: var(--text);
  font-size: var(--fs-fine);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero .eyebrow,
.page-hero .eyebrow,
.section-dark .eyebrow,
.theme-dark .eyebrow,
.cta-section .eyebrow,
.story-card .eyebrow,
.on-grad .eyebrow {
  border-color: transparent;
  background:
    radial-gradient(circle at 0.8125rem 50%, var(--peach) 0 0.25rem, transparent 0.3125rem),
    var(--scrim);
  color: var(--white);
}

.legal-hero .eyebrow,
.contact-hero .eyebrow,
.article-hero .eyebrow,
.contact-form .eyebrow {
  border-color: var(--line);
  background:
    radial-gradient(circle at 0.8125rem 50%, var(--fuchsia) 0 0.25rem, transparent 0.3125rem),
    var(--surface);
  color: var(--text);
}

.lead {
  color: var(--text-2);
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
}

.lead strong {
  color: var(--text);
}

.fine-print,
.pricing-note {
  color: var(--text-3);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pricing-note {
  margin-top: 1.25rem;
}

.pricing-note strong,
.fine-print strong {
  color: var(--text);
}

/* Dégradé de marque sur un mot très gros (titre d'au moins 28 px, fond clair uniquement). */
.text-gradient {
  background-image: linear-gradient(112deg, #6d28d9, #cf1f8f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (prefers-color-scheme: dark) {
  .text-gradient {
    background-image: linear-gradient(112deg, #cdaeff, #ff9fd2 60%, #ffc39e);
  }
}

/* Mot surligné au marqueur (fond clair) ou en pastille blanche (sur dégradé). */
.hl {
  padding: 0 0.18em;
  border-radius: 0.28em;
  background: var(--hl);
  color: var(--hl-text);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 6. Boutons, liens, en-tête ----------------------------------------------- */
/* Bouton principal : aplat dégradé violet -> fuchsia, pastille pêche à flèche.
   Haut (56 px), pleine largeur sur téléphone, léger rebond au toucher. */
.button {
  --btn-bg: var(--grad-action);
  --btn-fg: var(--on-grad);
  --btn-chip: var(--peach);
  --btn-shadow: var(--shadow-pop);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: var(--target-lg);
  padding: 0.625rem 1.25rem;
  border: 0;
  border-radius: 1.125rem;
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.button::after {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  margin-right: -0.5rem;
  border-radius: 50%;
  background: var(--btn-chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23160d2e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m13 6.5 5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / 1.125rem no-repeat;
}

.button:focus-visible {
  outline-offset: 4px;
  border-radius: 1.125rem;
}

@media (max-width: 599px) {
  .button {
    width: 100%;
  }

  .button::after {
    margin-left: auto;
  }

  .button::before {
    content: "";
    flex: none;
    width: 1.5rem;
    margin-right: auto;
  }
}

@media (max-width: 399px) {
  .button {
    padding-inline: 1rem;
    font-size: 1rem;
  }

  .button::before {
    display: none;
  }
}

/* Sur un aplat dégradé ou un panneau sombre, le bouton principal devient blanc. */
.hero .button,
.page-hero .button,
.section-dark .button,
.theme-dark .button,
.cta-section .button,
.story-card .button,
.on-grad .button,
.button-light {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  --btn-shadow: 0 14px 28px -16px rgba(var(--ink-rgb), 0.7);
}

/* … sauf dans une carte claire posée dessus (formulaire, encadré). */
.contact-form .button,
.surface .button,
.aside-box .button,
.price-card .button,
.legal-hero .button,
.contact-hero .button,
.article-hero .button,
.error-page .button {
  --btn-bg: var(--grad-action);
  --btn-fg: var(--on-grad);
  --btn-shadow: var(--shadow-pop);
}

/* Bouton secondaire : surface claire, encre. .button-dark en est l'ancien nom. */
.button.button-secondary,
.button.button-dark {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-shadow: inset 0 0 0 2px var(--line-strong);
}

.hero .button.button-secondary,
.page-hero .button.button-secondary,
.section-dark .button.button-secondary,
.theme-dark .button.button-secondary,
.cta-section .button.button-secondary,
.on-grad .button.button-secondary {
  --btn-bg: var(--scrim);
  --btn-fg: var(--white);
  --btn-shadow: inset 0 0 0 2px rgba(var(--light-rgb), 0.7);
}

.button.button-outline {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-shadow: inset 0 0 0 2px currentColor;
}

.button.button-secondary::after,
.button.button-dark::after,
.button.button-outline::after,
.button.button-small::after,
.button.button-secondary::before,
.button.button-dark::before,
.button.button-outline::before,
.button.button-small::before {
  display: none;
}

.button.button-small {
  width: auto;
  min-height: var(--target);
  padding: 0.375rem 1rem;
  border-radius: 0.875rem;
  font-size: 0.9375rem;
}

.button.button-large {
  min-height: 3.75rem;
  font-size: 1.125rem;
}

.button.button-full {
  width: 100%;
}

/* .button-beam : nom conservé du socle ; ici, le bouton principal (aucun contour lumineux). */
.button.button-beam {
  isolation: isolate;
}

/* Lien d'action */
.text-link {
  --link-line: var(--fuchsia);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--target);
  color: var(--link);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.hero .text-link,
.page-hero .text-link,
.section-dark .text-link,
.theme-dark .text-link,
.cta-section .text-link,
.site-footer .text-link,
.on-grad .text-link {
  --link-line: var(--peach);
}

.contact-form .text-link,
.surface .text-link,
.aside-box .text-link,
.risk-box .text-link,
.minor-note .text-link,
.emergency .text-link,
.price-card .text-link,
.legal-hero .text-link,
.contact-hero .text-link,
.article-hero .text-link,
.error-page .text-link,
.tile:not(.tile-accent):not(.tile-dark) .text-link {
  --link-line: var(--fuchsia);
}

@media (prefers-color-scheme: dark) {
  .text-link {
    --link-line: #ff8fcf;
  }
}

.text-link > span[aria-hidden="true"] {
  display: inline-block;
  font-size: 1.25em;
  line-height: 0.8;
  text-decoration: none;
}

.text-link.text-link-large {
  font-size: var(--fs-lead);
}

/* Lien qui rend toute la carte cliquable (la carte est en position relative :
   .tile, .price-card, .case-card, .blog-card, .story-card le sont). */
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* En-tête : une barre pleine, minimale. Le nom, le bouton, le menu. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--bg);
}

.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1.5px;
  background: var(--line);
  opacity: 0;
  pointer-events: none;
}

.site-header.is-condensed::after {
  opacity: 1;
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
}

/* Logotype : « retire ton post », le mot « post » en autocollant incliné, avec sa croix de retrait. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: var(--target);
  margin-right: auto;
  padding-right: 0.5em;
  color: var(--text);
  font-family: var(--font-title);
  font-size: 1.3125rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  position: relative;
  display: inline-block;
  padding: 0.16em 0.42em 0.22em;
  border-radius: 0.5em;
  background: var(--grad-action);
  color: var(--white);
  transform: rotate(-4deg);
}

.brand-mark::after {
  content: "";
  position: absolute;
  top: -0.42em;
  right: -0.5em;
  width: 0.95em;
  height: 0.95em;
  border: 0.11em solid var(--bg);
  border-radius: 50%;
  background: var(--peach) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23160d2e' stroke-width='4.5' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E") center / 62% no-repeat;
}

.site-footer .brand-mark::after {
  border-color: var(--panel);
}

@media (max-width: 399px) {
  .brand {
    font-size: 1.1875rem;
  }
}

/* Bouton d'action de la barre : toujours visible (téléphone et tablette). */
.header-cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--on-grad);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.header-cta > span {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding-inline: 0.9375rem;
  border-radius: 0.875rem;
  background: var(--grad-action);
}

/* Très petits écrans (320 px) : tout tient encore sur une ligne. */
@media (max-width: 359px) {
  .header-inner {
    gap: 0.375rem;
  }

  .brand {
    padding-right: 0.25em;
    font-size: 1.0625rem;
  }

  .header-cta {
    font-size: 0.875rem;
  }

  .header-cta > span {
    padding-inline: 0.625rem;
  }
}

.nav-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--target);
  height: var(--target);
  padding: 0;
  border: 0;
  border-radius: 0.875rem;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.25rem;
  height: 0.1875rem;
  margin: -0.09375rem 0 0 -0.625rem;
  border-radius: 0.125rem;
  background: currentColor;
}

.nav-toggle-bar:nth-of-type(2) {
  transform: translateY(-0.25rem);
}

.nav-toggle-bar:nth-of-type(3) {
  transform: translateY(0.25rem);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-of-type(2) {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-of-type(3) {
  transform: rotate(-45deg);
}

/* Menu : une feuille plein écran sous la barre, grandes lignes faciles à toucher. */
.main-nav {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--gutter));
  right: calc(-1 * var(--gutter));
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  padding: 0.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
}

.main-nav.is-open {
  visibility: visible;
  opacity: 1;
}

.main-nav > a:not(.nav-cta) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  min-height: 3.5rem;
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.main-nav > a:not(.nav-cta)::after {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border: solid var(--text-3);
  border-width: 0.1875rem 0.1875rem 0 0;
  border-radius: 0.125rem;
  transform: rotate(45deg);
}

.main-nav > a[aria-current="page"]:not(.nav-cta) {
  box-shadow: inset 0 0 0 2px var(--link);
  color: var(--link);
}

/* Dernière ligne du menu : l'aide immédiate. Sobre, jamais animée. */
.nav-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  flex: none;
  margin-top: 0.75rem;
  padding: 0.75rem 1.125rem;
  border: 2px solid var(--text);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.nav-help-label {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--text);
  font-weight: 700;
  text-underline-offset: 0.25em;
}

.nav-help-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nav-help-numbers a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: var(--target);
  padding: 0 0.75rem;
  border-radius: 0.75rem;
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.nav-help-short {
  display: none;
}

/* Le bouton d'action du menu n'apparaît que sur grand écran : sur téléphone et tablette,
   celui de la barre reste visible, menu ouvert compris. */
.main-nav .nav-cta {
  display: none;
  flex: none;
  margin-top: 0.75rem;
  color: var(--on-grad);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.main-nav .nav-cta > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--target-lg);
  padding: 0.5rem 1.25rem;
  border-radius: 1.125rem;
  background: var(--grad-action);
  box-shadow: var(--shadow-pop);
  text-align: center;
}

/* Menu ouvert : page figée. */
.nav-open,
.nav-open body {
  overflow: hidden;
}

@media (min-width: 1280px) {
  .nav-toggle,
  .header-cta {
    display: none;
  }

  .main-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 0.125rem;
    height: 100%;
    padding: 0;
    overflow: visible;
    background: transparent;
    visibility: visible;
    opacity: 1;
  }

  .main-nav > a:not(.nav-cta) {
    min-height: var(--target);
    padding: 0 0.4375rem;
    border-radius: 0.75rem;
    background: transparent;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.84375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .main-nav > a:not(.nav-cta)::after {
    display: none;
  }

  .main-nav > a:not(.nav-cta):hover {
    background: var(--bg-2);
  }

  .main-nav > a[aria-current="page"]:not(.nav-cta) {
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line);
    color: var(--link);
  }

  /* « Parents » et « Questions » : à droite, plus discrets. */
  .main-nav > a.nav-minor {
    color: var(--text-2);
    font-size: 0.8125rem;
    font-weight: 500;
  }

  .main-nav > a.nav-minor {
    order: 2;
  }

  .main-nav > a.nav-push {
    margin-left: auto;
  }

  .nav-help {
    order: 3;
  }

  .main-nav .nav-cta {
    display: flex;
    order: 4;
  }

  .nav-help-long {
    display: none;
  }

  .nav-help-short {
    display: inline;
  }

  .main-nav {
    flex: 1;
    min-width: 0;
    margin-left: 0.5rem;
  }

  .nav-help {
    flex-wrap: nowrap;
    margin: 0 0 0 0.25rem;
    padding: 0 0.625rem;
    border-width: 1.5px;
    border-radius: 0.875rem;
  }

  .nav-help-label {
    font-size: 0.8125rem;
    white-space: nowrap;
    text-decoration: none;
  }

  .nav-help-numbers {
    display: none;
  }

  .main-nav .nav-cta {
    margin: 0 0 0 0.375rem;
    font-size: 0.9375rem;
  }

  .main-nav .nav-cta > span {
    width: auto;
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: 0.875rem;
    box-shadow: none;
    white-space: nowrap;
  }
}

/* 7. Héros, animation signature ------------------------------------------- */
/* Tous les héros sont de grandes cartes arrondies posées sous la barre.
   .hero (accueil) et .page-hero : aplat dégradé, texte blanc, aligné à gauche. */
.hero,
.page-hero {
  --gutter: calc(var(--gutter-page) - var(--inset));
  position: relative;
  margin-inline: var(--inset);
  padding-block: clamp(1.75rem, 6vw, 4.5rem);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, #6d28d9 0%, #9a27cf 46%, #cf1f8f 100%);
  overflow: hidden;
  isolation: isolate;
}

.hero > .container,
.page-hero > .container {
  position: relative;
  z-index: 1;
}

.hero h1,
.page-hero h1,
.page-hero .h-large {
  margin-top: 0.875rem;
  max-width: 17ch;
}

.hero .lead,
.page-hero .lead {
  margin-top: 1rem;
  max-width: 36rem;
}

.hero .reassurance,
.page-hero .reassurance {
  margin-top: 1rem;
}

.hero-copy,
.hero-inner {
  min-width: 0;
}

.hero-stage {
  margin-top: var(--space-block);
}

/* Pied du héros : une carte blanche posée sur l'aplat (sélecteur de situation). */
.hero-foot {
  margin-top: var(--space-block);
  padding: clamp(1rem, 4vw, 1.75rem);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}

/* Tablette : le texte à gauche, l'animation à droite. */
@media (min-width: 760px) {
  .hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }

  .hero-stage {
    margin-top: 0;
  }
}

@media (min-width: 760px) and (max-width: 999px) {
  .hero h1 {
    font-size: clamp(2.5rem, 5.6vw, 3.25rem);
  }
}

@media (min-width: 1000px) {
  .hero-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 5rem);
  }

  .hero-stage .post-demo {
    width: min(100%, 23rem);
  }
}

/* Héros de page : plus court. Variante centrée : .hero-center. */
.page-hero {
  padding-block: clamp(1.75rem, 5vw, 3.75rem);
}

.page-hero.hero-center {
  text-align: center;
}

.page-hero.hero-center h1,
.page-hero.hero-center .h-large,
.page-hero.hero-center .lead {
  margin-inline: auto;
}

.page-hero.hero-center .actions {
  align-items: center;
  justify-content: center;
}

.page-hero.hero-center .reassurance {
  justify-content: center;
}

/* .hero-left : nom conservé du socle (ici, l'alignement à gauche est le défaut). */
.page-hero.hero-left {
  text-align: left;
}

/* Héros scindé : texte + visuel (le visuel n'apparaît qu'à partir de 900 px). */
.page-hero-split .hero-grid,
.hero-grid {
  display: grid;
  gap: var(--space-block);
}

.page-hero-visual {
  display: none;
}

.page-hero-image {
  width: 100%;
  border-radius: var(--radius-l);
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }

  .page-hero-visual {
    display: block;
  }
}

/* Héros sobres : pages légales, contact, article, 404 — sur le fond lilas, encre. */
.page-hero.legal-hero,
.page-hero.contact-hero,
.article-hero {
  margin-inline: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.page-hero.legal-hero,
.article-hero {
  padding-block: clamp(1.5rem, 5vw, 3.5rem) 0;
}

.page-hero.legal-hero h1,
.page-hero.legal-hero .h-large,
.article-hero h1,
.article-hero .h-large {
  max-width: 22ch;
}

.page-hero.legal-hero,
.page-hero.contact-hero,
.article-hero {
  --gutter: var(--gutter-page);
}

/* Page légale : le titre s'aligne sur la colonne de texte. */
.page-hero.legal-hero > .container {
  width: min(100% - 2 * var(--gutter), var(--w-text));
}

/* Fond de héros : dégradé animé très lent (trois nappes de couleur qui dérivent).
   Premier enfant du héros, décoratif. Les nappes violette et fuchsia restent
   lisibles sous du texte blanc ; la nappe pêche est cantonnée au coin bas droit. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.hero-bg > i {
  position: absolute;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  will-change: transform;
}

.hero-bg > i:nth-child(1) {
  top: -14rem;
  left: -12rem;
  background: radial-gradient(closest-side, #5b21b6, rgba(91, 33, 182, 0));
}

.hero-bg > i:nth-child(2) {
  top: 18%;
  right: -16rem;
  background: radial-gradient(closest-side, #d0208c, rgba(208, 32, 140, 0));
}

.hero-bg > i:nth-child(3) {
  right: -13rem;
  bottom: -15rem;
  width: 30rem;
  height: 30rem;
  background: radial-gradient(closest-side, rgba(255, 179, 138, 0.95), rgba(255, 179, 138, 0));
}

/* Héros de page (plus court) : la nappe pêche est plus petite et plus loin dans le coin,
   pour ne jamais passer sous le texte. */
.page-hero .hero-bg > i:nth-child(3) {
  right: -10rem;
  bottom: -12rem;
  width: 20rem;
  height: 20rem;
}

/* Mot qui change dans un titre. Tous les mots sont dans le HTML, superposés :
   la largeur du plus long est réservée dès le premier affichage (aucun saut). */
.flip-words {
  display: inline-grid;
  vertical-align: baseline;
  padding: 0 0.2em 0.04em;
  border-radius: 0.3em;
  background: var(--grad-action);
  color: var(--white);
  text-align: left;
}

.hero .flip-words,
.page-hero .flip-words,
.section-dark .flip-words,
.theme-dark .flip-words,
.cta-section .flip-words,
.on-grad .flip-words {
  background: var(--white);
  color: #5b21b6;
}

.legal-hero .flip-words,
.contact-hero .flip-words,
.article-hero .flip-words {
  background: var(--grad-action);
  color: var(--white);
}

.flip-words > * {
  grid-area: 1 / 1;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
}

.flip-words > .is-current,
.flip-words:not(.is-ready) > :first-child {
  visibility: visible;
  opacity: 1;
}

.flip-words > .is-leaving {
  visibility: visible;
}

/* Animation signature : un faux post abstrait se dissout en petits fragments,
   puis laisse la place à une coche. Décoratif (aria-hidden), hauteur fixe.
   Sans JavaScript ou avec « moins d'animations » : image fixe (post estompé + coche). */
.post-demo {
  position: relative;
  width: min(100%, 19rem);
  aspect-ratio: 19 / 21;
  margin-inline: auto;
}

.post-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(var(--light-rgb), 0.55);
  border-radius: var(--radius-l);
  opacity: 0;
}

.post-demo-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 0.75rem;
  padding: 0.875rem;
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: var(--shadow-lift);
  transform: rotate(-2deg);
}

.post-demo-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.post-demo-avatar {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--grad-brand);
}

.post-demo-lines {
  display: grid;
  gap: 0.375rem;
  flex: 1;
}

.post-demo-lines i,
.post-demo-caption i {
  display: block;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: #ddd0f7;
}

.post-demo-lines i:first-child {
  width: 46%;
  background: #b9a5ea;
}

.post-demo-lines i:last-child {
  width: 28%;
}

.post-demo-media {
  position: relative;
  min-height: 0;
  border-radius: 1rem;
  background: linear-gradient(150deg, #eadfff, #ffd9ec 60%, #ffe1cf);
  overflow: hidden;
}

.post-demo-media i {
  position: absolute;
  border-radius: 50%;
}

.post-demo-media i:nth-child(1) {
  left: 12%;
  top: 16%;
  width: 34%;
  aspect-ratio: 1;
  background: #a826c9;
}

.post-demo-media i:nth-child(2) {
  right: -8%;
  bottom: -22%;
  width: 62%;
  aspect-ratio: 1;
  background: #ffb38a;
}

.post-demo-media i:nth-child(3) {
  left: 34%;
  bottom: 14%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 28%;
  background: #6d28d9;
  transform: rotate(18deg);
}

/* Compteurs : des barres, jamais de chiffres. */
.post-demo-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.post-demo-actions i {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: #eadfff;
}

.post-demo-actions i:first-child {
  background: #cf1f8f;
}

.post-demo-actions b {
  width: 3rem;
  height: 0.5rem;
  margin-left: auto;
  border-radius: 0.25rem;
  background: #b9a5ea;
}

.post-demo-caption {
  display: grid;
  gap: 0.375rem;
}

.post-demo-caption i:last-child {
  width: 62%;
}

.post-demo-tag {
  position: absolute;
  top: 3.5rem;
  right: 0.5rem;
  z-index: 1;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--peach);
  color: var(--on-peach);
  font-family: var(--font-title);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  transform: rotate(5deg);
}

.post-demo-frags {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.post-demo-frag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 0.875rem);
  height: var(--s, 0.875rem);
  border-radius: 28%;
  background: var(--c, var(--white));
  opacity: 0;
}

.post-demo-done {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  width: max-content;
  max-width: 94%;
  padding: 1rem 1.25rem 1.125rem;
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: var(--shadow-lift);
  color: #160d2e;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
}

.post-demo-check {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.25rem;
  border-radius: 50%;
  background: var(--mint);
  color: #160d2e;
}

.post-demo-check .icon {
  width: 2rem;
  height: 2rem;
  stroke-width: 3.25;
}

.post-demo-done strong {
  font-family: var(--font-title);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.post-demo-done small {
  color: #463a66;
  font-size: var(--fs-fine);
  font-weight: 600;
  line-height: 1.3;
}

/* Au repos : le post entier, la coche masquée. main.js pose .is-playing (animation),
   puis .is-done (état final : la coche seule, le contour du post en pointillé).
   Image fixe (post estompé + coche) : avec « moins d'animations » ci-dessous, et sans
   JavaScript dans noscript.css. */
.post-demo.is-done .post-demo-card {
  opacity: 0;
  visibility: hidden;
}

.post-demo.is-done .post-demo-done,
.post-demo.is-done::before {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .post-demo .post-demo-card {
    opacity: 0.38;
    transform: rotate(-4deg) scale(0.92);
  }

  .post-demo .post-demo-done {
    opacity: 1;
    visibility: visible;
  }
}

/* Hors du héros (fond clair) : le contour en pointillé prend la couleur des filets. */
.section:not(.section-dark) .post-demo::before {
  border-color: var(--line-strong);
}

/* Visuels abstraits (décoratifs, toujours aria-hidden) : formes pleines, arrondies. */
.visual {
  position: relative;
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: var(--radius-xl);
  background: rgba(var(--light-rgb), 0.16);
  overflow: hidden;
}

.visual span {
  position: absolute;
  border-radius: 1.125rem;
}

/* Trois cartes « photo » empilées */
.visual-photos span:nth-child(1) {
  inset: 22% 30% 26% 14%;
  background: #ffb38a;
  transform: rotate(-9deg);
}

.visual-photos span:nth-child(2) {
  inset: 18% 20% 30% 24%;
  background: #f7edff;
  transform: rotate(4deg);
}

.visual-photos span:nth-child(3) {
  inset: 26% 12% 20% 34%;
  background: #160d2e;
  transform: rotate(11deg);
}

/* Un post : un rond et des lignes */
.visual-press span {
  left: 16%;
  height: 7%;
  border-radius: 999px;
  background: #f7edff;
}

.visual-press span:nth-child(1) { top: 18%; width: 16%; height: 16%; background: #ffb38a; }
.visual-press span:nth-child(2) { top: 22%; left: 38%; width: 40%; }
.visual-press span:nth-child(3) { top: 44%; width: 68%; }
.visual-press span:nth-child(4) { top: 56%; width: 56%; }
.visual-press span:nth-child(5) { top: 68%; width: 62%; background: #160d2e; }
.visual-press span:nth-child(6) { top: 80%; width: 30%; }

/* Un bouclier : deux formes emboîtées */
.visual-shield span:nth-child(1) {
  inset: 16%;
  border-radius: 32%;
  background: #f7edff;
}

.visual-shield span:nth-child(2) {
  inset: 34%;
  border-radius: 50%;
  background: #12d6a6;
}

/* Des bulles de discussion */
.visual-voices span {
  height: 16%;
  border-radius: 1.25rem 1.25rem 1.25rem 0.375rem;
  background: #f7edff;
}

.visual-voices span:nth-child(1) { top: 14%; left: 12%; width: 54%; }
.visual-voices span:nth-child(2) { top: 36%; right: 12%; width: 44%; border-radius: 1.25rem 1.25rem 0.375rem 1.25rem; background: #ffb38a; }
.visual-voices span:nth-child(3) { top: 58%; left: 12%; width: 64%; }
.visual-voices span:nth-child(4) { top: 78%; right: 12%; width: 30%; border-radius: 1.25rem 1.25rem 0.375rem 1.25rem; background: #160d2e; }

/* 8. Tuiles, listes, étapes ------------------------------------------------ */
/* Bandeau d'engagements : trois pastilles larges */
.trust-bar {
  padding-block: var(--space-block);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.625rem;
}

.trust-grid > div {
  display: grid;
  gap: 0.125rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.trust-grid strong {
  font-family: var(--font-title);
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.trust-grid span {
  color: var(--text-2);
  font-size: var(--fs-small);
}

/* Grille de tuiles (6 colonnes sur PC) */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  grid-column: span 6;
  min-width: 0;
  padding: clamp(1.125rem, 3.5vw, 1.625rem);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

@media (min-width: 600px) {
  .tile-2,
  .tile-3 {
    grid-column: span 3;
  }

  .tile-md-6 {
    grid-column: span 6;
  }
}

@media (min-width: 1025px) {
  .bento {
    gap: 1rem;
  }

  .tile-2 {
    grid-column: span 2;
  }

  .tile-3 {
    grid-column: span 3;
  }

  .tile-4 {
    grid-column: span 4;
  }

  .tile-md-6 {
    grid-column: auto;
  }

  .tile-2.tile-md-6 {
    grid-column: span 2;
  }

  .tile-3.tile-md-6 {
    grid-column: span 3;
  }
}

.tile > p {
  color: var(--text-2);
}

.tile-label {
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--text);
  font-size: var(--fs-fine);
  font-weight: 700;
}

.tile-title {
  font-size: var(--fs-h3);
}

.tile-text {
  color: var(--text-2);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.tile-text strong {
  color: var(--text);
}

/* Grande tuile violet nuit, tuile d'accent en aplat dégradé (une par page au plus). */
.tile.tile-dark {
  background: var(--panel);
}

.tile.tile-accent {
  background: var(--grad-action);
}

.tile-dark .tile-label,
.tile-accent .tile-label {
  background: var(--scrim);
  color: var(--white);
}

.tile-center {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.tile-bottom {
  justify-content: flex-end;
}

.tile-tall {
  min-height: 15rem;
}

.tile-foot,
.tile > .text-link:last-child {
  margin-top: auto;
}

/* Pictogramme de tuile : une icône d'appli (carré arrondi dégradé, trait blanc épais).
   SVG en ligne, grille de 24, sans fill ni stroke : la classe s'en charge. */
.tile-icon {
  flex: none;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.375rem;
  padding: 0.6875rem;
  border-radius: 1rem;
  background: var(--grad-action);
  fill: none;
  stroke: var(--white);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tile-dark .tile-icon,
.tile-accent .tile-icon {
  background: var(--white);
  stroke: #5b21b6;
}

.tile-icon.icon-peach {
  background: var(--peach);
  stroke: var(--on-peach);
}

.tile-icon.icon-mint {
  background: var(--mint);
  stroke: var(--on-mint);
}

/* Décor d'une tuile (aria-hidden, premier enfant) : un grand rond pêche dans le coin. */
.tile-rings {
  position: absolute;
  top: -4.5rem;
  right: -4.5rem;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: var(--peach);
  box-shadow: 0 0 0 1.5rem rgba(var(--peach-rgb), 0.28);
  pointer-events: none;
}

.tile > :not(.tile-rings) {
  position: relative;
}

.tile > .stretched-link {
  position: static;
}

/* Grille « mise au point » : la carte survolée reste nette, les autres s'effacent un peu. */
@media (hover: hover) and (pointer: fine) {
  .hover-grid > * {
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  }

  .hover-grid:hover > :not(:hover),
  .hover-grid:focus-within > :not(:focus-within) {
    opacity: 0.62;
    transform: scale(0.985);
  }

  .hover-grid > :hover,
  .hover-grid > :focus-within {
    box-shadow: var(--shadow-lift);
    transform: translateY(-0.1875rem);
  }
}

/* Liste de situations : de grandes lignes en pastilles */
.situation-list {
  display: grid;
  gap: 0.5rem;
}

.situation-list li {
  position: relative;
  padding: 0.875rem 1.125rem 0.875rem 2.75rem;
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--root-text-2);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.35;
}

.situation-list li strong {
  color: var(--root-text);
}

.situation-list li::before {
  content: "";
  position: absolute;
  left: 1.125rem;
  top: 1.3125rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--grad-brand);
}

/* Liste d'arguments : un titre en gras suivi d'une phrase */
.feature-list {
  display: grid;
  gap: 0.875rem;
}

.feature-list li {
  position: relative;
  padding-left: 2.25rem;
  color: var(--text-2);
}

.feature-list li strong {
  color: var(--text);
}

/* Liste à coches (menthe) */
.check-list {
  display: grid;
  gap: 0.625rem;
}

.check-list li {
  position: relative;
  padding-left: 2.25rem;
  color: var(--text-2);
}

.check-list li strong {
  color: var(--text);
}

.check-list li::before,
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.0625rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23160d2e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 0.9375rem no-repeat;
}

/* Étapes numérotées et grille « preuves » : des cartes à gros numéro */
.steps,
.proof-grid {
  display: grid;
  gap: 0.75rem;
  counter-reset: none;
}

@media (min-width: 600px) {
  .steps,
  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .steps,
  .proof-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .steps.steps-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.steps > li,
.proof-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: clamp(1.125rem, 3.5vw, 1.5rem);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.steps > li > span,
.proof-grid > div > span {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.25rem;
  padding: 0 0.625rem;
  border-radius: 1rem;
  background: var(--grad-action);
  color: var(--white);
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  transform: rotate(-4deg);
}

.steps > li:nth-child(even) > span,
.proof-grid > div:nth-child(even) > span {
  background: var(--peach);
  color: var(--on-peach);
  transform: rotate(4deg);
}

.steps > li > p,
.proof-grid > div > p {
  color: var(--text-2);
}

/* Déclaration en grand texte */
.statement {
  max-width: 50rem;
}

.statement > * + * {
  margin-top: 1.125rem;
}

.statement > p:not([class]) {
  color: var(--text-2);
  font-size: var(--fs-lead);
}

.statement-text {
  color: var(--text-2);
  font-size: var(--fs-statement);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.statement-text strong {
  color: var(--text);
  font-weight: 700;
}

.statement .button {
  margin-top: 1.5rem;
}

/* Bandeau d'image en tête de section */
.section-media {
  width: min(100% - 2 * var(--gutter), var(--w-page));
  margin: 0 auto var(--space-block);
  border-radius: var(--radius-l);
  overflow: hidden;
}

.section-media img {
  width: 100%;
  max-height: 22rem;
  object-fit: cover;
}

/* Chronologie « étapes » façon fil de discussion : un rail épais, des numéros
   ronds, chaque étape dans une bulle. Le rail se remplit au défilement (main.js). */
.timeline {
  position: relative;
  display: grid;
  gap: 0.875rem;
  padding-left: 3.5rem;
}

.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 0.25rem;
  border-radius: 0.125rem;
  background: var(--line);
}

.timeline::after {
  background: linear-gradient(180deg, #8b2fe0, #cf1f8f 60%, #ffb38a);
  transform: scaleY(var(--progress, 1));
  transform-origin: 50% 0;
}

.timeline-item {
  position: relative;
  padding: 1rem 1.125rem 1.125rem;
  border-radius: 1.375rem 1.375rem 1.375rem 0.375rem;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.timeline-item > * + * {
  margin-top: 0.375rem;
}

.timeline-item > p {
  color: var(--text-2);
}

.timeline-num {
  position: absolute;
  left: -3.5rem;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--grad-action);
  color: var(--white);
  font-family: var(--font-title);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.timeline.is-tracking .timeline-item:not(.is-active) .timeline-num {
  background: var(--root-surface, var(--surface));
  box-shadow: inset 0 0 0 3px var(--root-line-strong);
  color: var(--root-text);
}

/* 9. Bulles, stories, autocollants ---------------------------------------- */
/* Bulles de discussion : réassurance, questions-réponses. */
.bubble-thread {
  display: grid;
  gap: 0.625rem;
}

.bubble {
  position: relative;
  justify-self: start;
  max-width: min(100%, 36rem);
  padding: 0.875rem 1.125rem 1rem;
  border-radius: 1.375rem 1.375rem 1.375rem 0.375rem;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.bubble > * + * {
  margin-top: 0.3125rem;
}

.bubble > p {
  color: var(--text-2);
}

.bubble > h3,
.bubble > .bubble-title {
  color: var(--text);
  font-family: var(--font-title);
  font-size: var(--fs-title);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
}

.bubble.bubble-out {
  --text: #ffffff;
  --text-2: #ffffff;
  --link: #ffffff;
  justify-self: end;
  border-radius: 1.375rem 1.375rem 0.375rem 1.375rem;
  background: var(--grad-action);
  box-shadow: none;
  color: var(--white);
}

.bubble.bubble-wide {
  max-width: none;
  justify-self: stretch;
}

/* Petit nom au-dessus d'une bulle (« Toi », « Nous »). */
.bubble-meta {
  justify-self: start;
  margin-bottom: -0.25rem;
  padding-left: 0.5rem;
  color: var(--text-3);
  font-size: var(--fs-fine);
  font-weight: 700;
}

.bubble-meta.bubble-meta-out {
  justify-self: end;
  padding: 0 0.5rem 0 0;
}

/* Bulles côte à côte à partir de 768 px : deux colonnes en quinconce (.bubble-columns),
   trois colonnes en escalier à partir de 1 025 px (.bubble-columns.bubble-columns-three). */
@media (min-width: 768px) {
  .bubble-thread.bubble-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
  }

  .bubble-thread.bubble-columns > .bubble {
    max-width: none;
    justify-self: stretch;
  }

  .bubble-thread.bubble-columns > .bubble:nth-child(even) {
    margin-top: 1.5rem;
  }
}

@media (min-width: 1025px) {
  .bubble-thread.bubble-columns.bubble-columns-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bubble-thread.bubble-columns.bubble-columns-three > .bubble:nth-child(even) {
    margin-top: 0;
  }

  .bubble-thread.bubble-columns.bubble-columns-three > .bubble:nth-child(3n + 2) {
    margin-top: 1.5rem;
  }

  .bubble-thread.bubble-columns.bubble-columns-three > .bubble:nth-child(3n) {
    margin-top: 3rem;
  }
}

/* Cartes « story » : les situations. Sur téléphone, elles défilent au doigt
   (la suivante dépasse) ; à partir de 900 px, trois colonnes « mise au point ». */
.story-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 17.5rem);
  gap: 0.75rem;
  margin-inline: calc(-1 * var(--gutter));
  padding: 0.25rem var(--gutter) 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.story-row::-webkit-scrollbar {
  display: none;
}

.story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 24rem;
  padding: 1.125rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, #6d28d9 0%, #a826c9 58%, #cf1f8f 100%);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  scroll-snap-align: start;
  isolation: isolate;
}

.story-card.story-b {
  background: linear-gradient(165deg, #cf1f8f 0%, #a826c9 52%, #6d28d9 100%);
}

.story-card.story-c {
  background: linear-gradient(165deg, #3b1a8f 0%, #6d28d9 55%, #a826c9 100%);
}

/* Décor : une grande forme dans le coin haut droit, un voile sombre en bas (lisibilité). */
.story-card::before {
  content: "";
  position: absolute;
  top: -3.5rem;
  right: -3.5rem;
  z-index: -1;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: var(--peach);
}

.story-card.story-b::before {
  top: -2.5rem;
  right: -4rem;
  border-radius: 34%;
  background: var(--mint);
  transform: rotate(24deg);
}

.story-card.story-c::before {
  top: -5rem;
  right: -3rem;
  background: transparent;
  box-shadow: inset 0 0 0 2.25rem var(--peach);
}

.story-card::after {
  content: "";
  position: absolute;
  inset: 34% 0 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(var(--ink-rgb), 0.62), rgba(var(--ink-rgb), 0));
}

.story-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin-top: 0.75rem;
  padding: 0.8125rem;
  border-radius: 1.125rem;
  background: var(--white);
  fill: none;
  stroke: #5b21b6;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story-card h3 {
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: clamp(1.5rem, 1.2vw + 1.2rem, 1.875rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.story-card p {
  color: var(--white);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.story-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  align-self: stretch;
  min-height: 3rem;
  margin-top: 0.625rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-radius: 1rem;
  background: var(--white);
  color: #160d2e;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.story-link::before {
  content: "";
  order: 2;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--peach) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23160d2e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m13 6.5 5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / 1.125rem no-repeat;
}

@media (min-width: 900px) {
  .story-row {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }

  .story-card {
    min-height: 27rem;
    padding: 1.375rem;
  }
}

/* Autocollants typographiques : des mots en capsule, légèrement inclinés. */
.sticker {
  --sticker-bg: var(--peach);
  --sticker-fg: var(--on-peach);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: 0.25rem 0.75rem 0.3125rem;
  border-radius: var(--radius-pill);
  background: var(--sticker-bg);
  color: var(--sticker-fg);
  font-family: var(--font-title);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  transform: rotate(-3deg);
}

.sticker.sticker-mint {
  --sticker-bg: var(--mint);
  --sticker-fg: var(--on-mint);
}

.sticker.sticker-violet {
  --sticker-bg: var(--grad-action);
  --sticker-fg: var(--white);
}

.sticker.sticker-white {
  --sticker-bg: var(--white);
  --sticker-fg: #160d2e;
  box-shadow: inset 0 0 0 1.5px rgba(var(--ink-rgb), 0.14);
}

.sticker.sticker-ink {
  --sticker-bg: #160d2e;
  --sticker-fg: var(--white);
}

@media (prefers-color-scheme: dark) {
  .sticker.sticker-ink {
    --sticker-bg: #f3edff;
    --sticker-fg: #160d2e;
  }
}

.sticker.sticker-large {
  padding: 0.375rem 1rem 0.4375rem;
  font-size: 1.25rem;
}

.sticker.tilt-right {
  transform: rotate(3deg);
}

.sticker.tilt-none {
  transform: none;
}

/* Rangée d'autocollants (titres de section, sous un titre). */
.sticker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
  padding-block: 0.25rem;
}

/* Bandeau d'autocollants qui défile (décoratif, aria-hidden). Sans JavaScript ou
   avec « moins d'animations » : une rangée fixe. Un toucher met en pause. */
.marquee {
  --marquee-t: 40s;
  overflow: hidden;
  padding-block: 0.625rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.marquee-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  padding-right: 0.75rem;
}

.marquee-track > * {
  flex: none;
  white-space: nowrap;
}

/* 10. Tarifs : cartes, tableau, options ----------------------------------- */
.pricing-grid,
.two-cards {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 600px) {
  .pricing-grid,
  .two-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .pricing-grid.pricing-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .pricing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .pricing-grid.pricing-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
  padding: clamp(1.125rem, 3.5vw, 1.625rem);
  border: 3px solid transparent;
  border-radius: var(--radius-l);
  background: var(--surface);
  background-clip: padding-box;
  box-shadow: var(--shadow-card);
}

.price-card > p {
  color: var(--text-2);
}

.price-card > .text-link,
.price-card > .button,
.price-card > .tile-foot {
  margin-top: auto;
}

.card-label {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--text);
  font-size: var(--fs-fine);
  font-weight: 700;
  line-height: 1.5;
}

.price-card .price,
.price {
  color: var(--text);
  font-family: var(--font-title);
  font-size: clamp(2.25rem, 3vw + 1.5rem, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.price small {
  color: var(--text-3);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0;
}

/* Formule mise en avant : liseré au dégradé de la marque (immobile). Une par grille. */
.price-card.featured {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: var(--shadow-lift);
}

.price-card.featured .card-label {
  background: var(--grad-action);
  color: var(--white);
}

/* Options */
.options-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .options-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

.options-grid > article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: clamp(1.125rem, 3.5vw, 1.5rem);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.options-grid > article > p {
  color: var(--text-2);
}

.options-grid > article > strong:last-child {
  margin-top: auto;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--peach);
  color: var(--on-peach);
  font-family: var(--font-title);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Tableau de prix : une carte par ligne sur téléphone (attribut data-label sur
   chaque <td>), un vrai tableau à partir de 768 px. */
.table-wrap {
  min-width: 0;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.pricing-table th,
.pricing-table td {
  padding: 0;
  font-weight: 400;
  vertical-align: top;
}

.pricing-table tbody th {
  color: var(--text);
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.pricing-table .table-price,
.table-price {
  color: var(--text);
  font-family: var(--font-title);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .pricing-table,
  .pricing-table tbody,
  .pricing-table tr,
  .pricing-table th,
  .pricing-table td {
    display: block;
  }

  .pricing-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .pricing-table tbody {
    display: grid;
    gap: 0.75rem;
  }

  .pricing-table tbody tr {
    display: grid;
    gap: 0.625rem;
    padding: 1.125rem;
    border-radius: var(--radius-l);
    background: var(--surface);
    box-shadow: var(--shadow-card);
  }

  .section-tinted .pricing-table tbody tr {
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1.5px var(--line);
  }

  .pricing-table td {
    color: var(--text-2);
  }

  .pricing-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--text-3);
    font-size: var(--fs-fine);
    font-weight: 700;
  }

  .pricing-table td.table-price {
    color: var(--text);
  }

  .pricing-table tbody tr.plan-featured {
    box-shadow: inset 0 0 0 3px var(--link);
  }
}

@media (min-width: 768px) {
  .table-wrap {
    padding: 0.5rem clamp(1rem, 2vw, 1.75rem);
    border-radius: var(--radius-l);
    background: var(--surface);
    box-shadow: var(--shadow-card);
  }

  .section-tinted .table-wrap {
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1.5px var(--line);
  }

  .pricing-table thead th {
    padding: 1rem 1rem 0.75rem 0;
    color: var(--text-3);
    font-size: var(--fs-fine);
    font-weight: 700;
  }

  .pricing-table tbody th,
  .pricing-table tbody td {
    padding: 1.125rem 1rem 1.125rem 0;
    border-top: 1.5px solid var(--line);
    color: var(--text-2);
  }

  .pricing-table tbody th {
    color: var(--text);
    width: 24%;
  }

  .pricing-table tbody td.table-price {
    padding-right: 0;
    color: var(--text);
    text-align: right;
  }

  .pricing-table thead th:last-child {
    padding-right: 0;
    text-align: right;
  }

  .pricing-table .plan-featured > * {
    background: var(--grad-soft);
  }

  .pricing-table .plan-featured > :first-child {
    padding-left: 1rem;
    border-radius: var(--radius-m) 0 0 var(--radius-m);
  }

  .pricing-table .plan-featured > :last-child {
    padding-right: 1rem;
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
  }
}

/* Noms conservés du socle (feuille conversion.css, désormais intégrée ici). */
.pricing-table-inset {
  border-spacing: 0;
}

.notice-terms > h2 + .check-list,
.notice-terms > h3 + .check-list {
  margin-top: 1rem;
}

/* 11. Encadrés, accordéon, cartes ----------------------------------------- */
.notice {
  padding: clamp(1rem, 3.5vw, 1.5rem);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--text);
}

.notice > * + * {
  margin-top: 0.5rem;
}

.notice h2,
.notice h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
}

.notice p,
.notice li {
  color: var(--text-2);
}

.notice p strong {
  color: var(--text);
}

/* Bandeau « informations à finaliser » des pages légales, champ « [À compléter …] ». */
.notice.notice-todo {
  background: var(--todo-bg);
  box-shadow: inset 0 0 0 1.5px var(--todo-line);
}

.notice.notice-todo p,
.notice.notice-todo p strong {
  color: var(--todo-text);
}

.todo-field {
  padding: 0.0625rem 0.3125rem;
  border-radius: 0.375rem;
  background: var(--todo-bg);
  box-shadow: inset 0 0 0 1px var(--todo-line);
  color: var(--todo-text);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Encadré mis en valeur (option, information chiffrée) */
.callout {
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: clamp(1.125rem, 4vw, 2rem);
  border-radius: var(--radius-l);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-brand) border-box;
  border: 3px solid transparent;
  box-shadow: var(--shadow-card);
}

.callout > div > * + * {
  margin-top: 0.5rem;
}

.callout p {
  color: var(--text-2);
}

.callout-figure {
  justify-self: start;
  padding: 0.5rem 1rem;
  border-radius: 1.125rem;
  background: var(--peach);
  color: var(--on-peach);
  font-family: var(--font-title);
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  transform: rotate(-3deg);
}

.callout .callout-figure {
  color: var(--on-peach);
}

.callout-figure small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .callout {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
  }

  .callout-figure {
    justify-self: end;
  }
}

/* Accordéon en bulles : la question est une bulle « envoyée » (à droite, dégradé),
   la réponse une bulle « reçue » (à gauche, blanche). Un <details> par question. */
.accordion-list {
  display: grid;
  gap: 0.75rem;
}

.accordion-list details {
  display: grid;
}

.accordion-list summary {
  position: relative;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: fit-content;
  max-width: 94%;
  min-height: var(--target-lg);
  margin-left: auto;
  padding: 0.75rem 3.375rem 0.75rem 1.125rem;
  border-radius: 1.375rem 1.375rem 0.375rem 1.375rem;
  background: var(--grad-action);
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.accordion-list summary::-webkit-details-marker {
  display: none;
}

.accordion-list summary::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 2rem;
  height: 2rem;
  margin-top: -1rem;
  border-radius: 50%;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23160d2e' stroke-width='3.25' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 1.125rem no-repeat;
}

.accordion-list details[open] > summary::after {
  transform: rotate(45deg);
}

.accordion-list summary:focus-visible {
  outline-color: var(--focus);
  border-radius: 1.375rem 1.375rem 0.375rem 1.375rem;
}

.accordion-list details > :not(summary) {
  justify-self: start;
  max-width: 94%;
  margin-top: 0.5rem;
  padding: 0.875rem 1.125rem;
  border-radius: 1.375rem 1.375rem 1.375rem 0.375rem;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text-2);
}

.accordion-list details > ul:not([class]),
.accordion-list details > ol:not([class]) {
  padding-left: 2.25rem;
  list-style: disc;
}

.accordion-list details > ol:not([class]) {
  list-style: decimal;
}

.section-tinted .accordion-list details > :not(summary) {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

/* Variante numérotée : le numéro dans une pastille. */
.faq-list summary > span:first-child {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.375rem;
  border-radius: 0.625rem;
  background: var(--scrim);
  font-family: var(--font-title);
  font-size: 0.8125rem;
  font-weight: 800;
}

/* Titre d'un groupe de questions (FAQ longue). */
.faq-group-title {
  margin-top: var(--space-block);
  font-size: var(--fs-title);
}

.faq-group-title + .accordion-list {
  margin-top: 1rem;
}

/* Cartes de cas, cartes d'article (noms conservés du socle) */
.case-grid,
.blog-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .case-grid,
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

.case-card,
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  padding: clamp(1.125rem, 3.5vw, 1.625rem);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.case-card h2,
.blog-card h2 {
  font-size: var(--fs-title);
}

.case-card h3 {
  font-size: 1.0625rem;
}

.case-card p,
.blog-card p {
  color: var(--text-2);
}

.case-limit {
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-s);
  background: var(--bg-2);
  font-size: var(--fs-small);
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  color: var(--text-3);
  font-size: var(--fs-fine);
  font-weight: 700;
}

.article-status {
  margin-top: auto;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--text);
  font-size: var(--fs-fine);
  font-weight: 700;
}

/* 12. Formulaire ----------------------------------------------------------- */
/* Court, grands champs, utilisable d'une main. Liseré dégradé au focus. */
.contact-form {
  position: relative;
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1.125rem, 4vw, 2rem);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}

.form-heading > * + * {
  margin-top: 0.5rem;
}

.form-heading h2,
.form-heading h3 {
  font-size: var(--fs-title);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.form-heading p {
  color: var(--text-2);
  font-size: var(--fs-small);
}

.field {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.field-row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 600px) {
  .field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field label {
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.field label span {
  color: var(--text-3);
  font-weight: 500;
}

.field input,
.field select,
.field textarea,
.form-confirm textarea {
  display: block;
  width: 100%;
  min-height: var(--target-lg);
  padding: 0.875rem 1rem;
  border: 2px solid transparent;
  border-radius: 1rem;
  background:
    linear-gradient(var(--field-bg), var(--field-bg)) padding-box,
    linear-gradient(var(--field-line), var(--field-line)) border-box;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}

.field select {
  padding-right: 2.75rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f7bc7' stroke-width='3.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") right 0.875rem center / 1.25rem no-repeat,
    linear-gradient(var(--field-bg), var(--field-bg)) padding-box,
    linear-gradient(var(--field-line), var(--field-line)) border-box;
  cursor: pointer;
}

.field select option {
  background: var(--field-bg);
  color: var(--text);
}

.field textarea,
.form-confirm textarea {
  min-height: 9rem;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-3);
  opacity: 1;
}

/* Liseré au dégradé de la marque + halo au focus (aussi au survol à la souris). */
.field input:focus,
.field textarea:focus,
.form-confirm textarea:focus {
  outline: none;
  background:
    linear-gradient(var(--field-bg), var(--field-bg)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: 0 0 0 0.25rem rgba(var(--violet-rgb), 0.28);
}

.field select:focus {
  outline: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f7bc7' stroke-width='3.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") right 0.875rem center / 1.25rem no-repeat,
    linear-gradient(var(--field-bg), var(--field-bg)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: 0 0 0 0.25rem rgba(var(--violet-rgb), 0.28);
}

@media (prefers-color-scheme: dark) {
  .field input:focus,
  .field textarea:focus,
  .field select:focus,
  .form-confirm textarea:focus {
    box-shadow: 0 0 0 0.25rem rgba(205, 174, 255, 0.4);
  }
}

.field small,
.field-help {
  color: var(--text-3);
  font-size: var(--fs-fine);
  line-height: 1.45;
}

/* Erreurs : gentilles et claires. Posées par main.js (aria-invalid + message). */
.field [aria-invalid="true"] {
  background:
    linear-gradient(var(--field-bg), var(--field-bg)) padding-box,
    linear-gradient(var(--danger), var(--danger)) border-box;
}

.field select[aria-invalid="true"] {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f7bc7' stroke-width='3.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") right 0.875rem center / 1.25rem no-repeat,
    linear-gradient(var(--field-bg), var(--field-bg)) padding-box,
    linear-gradient(var(--danger), var(--danger)) border-box;
}

.field-error {
  justify-self: start;
  padding: 0.3125rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
}

/* Case à cocher : grande, facile à toucher. */
.checkbox-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
  align-items: start;
}

.checkbox-field input[type="checkbox"] {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0.5rem 0 0;
  border: 2px solid var(--field-line);
  border-radius: 0.5rem;
  background: var(--field-bg);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.checkbox-field input[type="checkbox"]:checked {
  border-color: transparent;
  background: var(--grad-action) border-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E"), linear-gradient(112deg, #6d28d9, #cf1f8f);
  background-position: center;
  background-size: 1.125rem, cover;
  background-repeat: no-repeat;
}

.checkbox-field input[type="checkbox"][aria-invalid="true"] {
  border-color: var(--danger);
}

.checkbox-field label {
  display: flex;
  align-items: center;
  min-height: var(--target);
  padding-block: 0.375rem;
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.45;
  cursor: pointer;
}

.checkbox-field label > span,
.checkbox-field label {
  min-width: 0;
}

.checkbox-field .field-error {
  grid-column: 1 / -1;
}

/* Texte qui apparaît quand la case précédente est cochée (CSS seul). */
.field-reveal {
  display: none;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-s);
  background: var(--positive-bg);
  color: var(--text);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.checkbox-field:has(input:checked) + .field-reveal {
  display: block;
}

.contact-form > .button {
  width: 100%;
  margin-top: 0.25rem;
}

.contact-form .reassurance {
  justify-content: center;
  margin-top: 0;
}

.contact-form .reassurance li {
  padding-right: 0.5rem;
  font-size: 0.75rem;
}

.form-note {
  color: var(--text-3);
  font-size: var(--fs-fine);
  line-height: 1.5;
  text-align: center;
}

.form-note a {
  color: var(--link);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* État du formulaire (zone role="status") */
.form-status {
  padding: 0.625rem 1rem;
  border-radius: var(--radius-s);
  background: var(--positive-bg);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: center;
}

.form-status:empty {
  display: none;
}

.form-status.is-error {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Bouton en cours d'envoi (mode envoi direct). */
.button[aria-busy="true"] {
  opacity: 0.75;
  cursor: progress;
}

/* Panneau de confirmation : remplace les champs après un envoi valide.
   Jamais d'impasse : copie du message, adresse en clair, retour au formulaire. */
.contact-form.is-confirmed > :not(.form-confirm),
.contact-form.is-confirmed > .checkbox-field + .field-reveal {
  display: none !important;
}

.form-confirm {
  display: grid;
  gap: 0.875rem;
  justify-items: start;
}

.form-confirm:focus {
  outline: none;
}

.form-confirm-check {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--mint);
  color: var(--on-mint);
}

.form-confirm-check .icon {
  width: 2rem;
  height: 2rem;
  stroke-width: 3.25;
}

.form-confirm-title {
  font-size: var(--fs-title);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.form-confirm > p {
  color: var(--text-2);
}

.form-rescue {
  display: grid;
  gap: 0.625rem;
  justify-self: stretch;
  padding: 1rem;
  border-radius: var(--radius-m);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.form-rescue .form-rescue-title {
  color: var(--text);
  font-family: var(--font-title);
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.form-rescue p {
  color: var(--text-2);
  font-size: var(--fs-small);
}

.form-rescue .button {
  width: 100%;
}

.form-rescue-address {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.form-rescue-address strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

.form-copied {
  color: var(--positive);
  font-size: var(--fs-small);
  font-weight: 700;
}

.form-copied:empty {
  display: none;
}

.form-confirm-message {
  justify-self: stretch;
}

.form-confirm-message summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--link);
  font-weight: 700;
  cursor: pointer;
}

.form-confirm-message textarea {
  margin-top: 0.375rem;
  min-height: 12rem;
  font-size: 0.9375rem;
}

.form-confirm-edit {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* 13. Article long, prose, pages légales ---------------------------------- */
.prose {
  color: var(--text-2);
}

.prose > * + * {
  margin-top: 1rem;
}

.prose h2 {
  margin-top: 2.5rem;
  color: var(--text);
  font-size: var(--fs-title);
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.prose h3 {
  margin-top: 1.75rem;
  color: var(--text);
  font-size: 1.1875rem;
}

.prose > :first-child {
  margin-top: 0;
}

.prose strong {
  color: var(--text);
}

.prose a:not([class]) {
  color: var(--link);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.prose ul:not([class]),
.prose ol:not([class]) {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.375rem;
}

.prose ul:not([class]) {
  list-style: disc;
}

.prose ol:not([class]) {
  list-style: decimal;
}

.prose li::marker {
  color: var(--fuchsia);
  font-weight: 700;
}

.prose blockquote {
  padding: 0.875rem 1.125rem;
  border-radius: 1.375rem 1.375rem 1.375rem 0.375rem;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text);
}

.prose hr {
  height: 1.5px;
  margin-block: 2rem;
  border: 0;
  background: var(--line);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.prose th,
.prose td {
  padding: 0.625rem 0.75rem 0.625rem 0;
  border-bottom: 1.5px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  color: var(--text);
  font-weight: 700;
}

/* Article long */
.article-header > * + * {
  margin-top: 0.875rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  color: var(--text-3);
  font-size: var(--fs-fine);
  font-weight: 600;
}

.breadcrumbs li + li::before {
  content: "›";
  margin-right: 0.5rem;
}

.breadcrumbs a {
  color: inherit;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.article-meta span {
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--text-2);
  font-size: var(--fs-fine);
  font-weight: 700;
}

.article-layout {
  display: grid;
  gap: var(--space-block);
  padding-block: var(--space-block) var(--space-section);
}

.article-body {
  min-width: 0;
  max-width: var(--w-text);
}

.article-body section + section {
  margin-top: 2.5rem;
}

.article-body section > * + * {
  margin-top: 1rem;
}

.article-body section > * + h3 {
  margin-top: 1.75rem;
}

.article-body section {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* Sommaire : replié sur téléphone, collant sur PC. */
.article-toc {
  min-width: 0;
  padding: 0.25rem 1.125rem;
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.article-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--target-lg);
  color: var(--text);
  font-family: var(--font-title);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
}

.article-toc summary::-webkit-details-marker {
  display: none;
}

.article-toc summary::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.25rem;
  border: solid var(--text-3);
  border-width: 0 0.1875rem 0.1875rem 0;
  border-radius: 0.125rem;
  transform: rotate(45deg) translate(-0.125rem, -0.125rem);
}

.article-toc details[open] summary::after {
  transform: rotate(-135deg) translate(-0.125rem, -0.125rem);
}

.article-toc ol {
  display: grid;
  padding-bottom: 0.75rem;
  counter-reset: toc;
}

.article-toc li {
  counter-increment: toc;
}

.article-toc a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--target);
  padding: 0.25rem 0.5rem;
  border-radius: 0.75rem;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.article-toc a::before {
  content: counter(toc);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 0.5rem;
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--font-title);
  font-size: 0.8125rem;
  font-weight: 800;
}

.article-toc a.is-active {
  background: var(--bg-2);
  color: var(--text);
}

.article-toc a.is-active::before {
  background: var(--grad-action);
  color: var(--white);
}

@media (min-width: 1025px) {
  .article-layout {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }

  .article-toc {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    max-height: calc(100vh - var(--header-h) - 2rem);
    overflow-y: auto;
  }

  .article-toc summary {
    cursor: default;
  }

  .article-toc summary::after {
    display: none;
  }
}

/* Encadré « À retenir », conclusion */
.article-notice {
  padding: 1rem 1.125rem;
  border-radius: var(--radius-m);
  background: var(--positive-bg);
  color: var(--text);
}

.article-notice strong {
  color: var(--text);
}

.article-conclusion {
  padding-top: 2rem;
  border-top: 1.5px solid var(--line);
}

/* Pages légales : sobres, aucun effet. */
.legal-layout {
  padding-bottom: var(--space-block);
}

/* 14. Aide d'urgence ------------------------------------------------------- */
/* L'élément le plus important après le bouton. Parfaitement lisible, jamais animé,
   jamais décoratif : une carte calme, un filet d'encre, les numéros en gros liens tel:. */
.emergency {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.125rem, 4vw, 2rem);
  border: 2px solid var(--text);
  border-radius: var(--radius-l);
  background: var(--surface);
  color: var(--text);
}

.emergency h2,
.emergency h3,
.emergency-title {
  color: var(--text);
  font-family: var(--font-title);
  font-size: var(--fs-title);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
}

.emergency p {
  color: var(--text-2);
}

.emergency p strong {
  color: var(--text);
}

.emergency a:not([class]) {
  color: var(--text);
  font-weight: 700;
}

.emergency-number {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 4.25rem;
  min-height: 3.25rem;
  padding: 0.25rem 0.875rem;
  border-radius: 1rem;
  background: var(--text);
  color: var(--surface);
  font-family: var(--font-title);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.emergency-number small {
  margin-top: 0.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-fine);
  font-weight: 600;
  letter-spacing: 0;
  white-space: normal;
}

.emergency-number:focus-visible {
  outline-offset: 3px;
  border-radius: 1rem;
}

/* Version complète : une ligne par service (numéro au-dessus de la phrase sur téléphone). */
.emergency-list {
  display: grid;
}

.emergency-list > li {
  display: grid;
  gap: 0.5rem 1.25rem;
  padding-block: 1rem;
  border-top: 1.5px solid var(--line);
}

.emergency-list > li > p {
  align-self: center;
}

.emergency-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  color: var(--text-2);
  font-weight: 600;
}

@media (min-width: 600px) {
  .emergency-list > li {
    grid-template-columns: 11.5rem minmax(0, 1fr);
  }
}

.emergency-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

/* Version courte (une carte compacte sous le héros). */
.emergency.emergency-short {
  gap: 0.5rem;
  padding: 1rem 1.125rem;
}

.emergency-short .emergency-title {
  font-size: 1.1875rem;
}

.emergency-lines {
  display: grid;
  gap: 0.375rem;
}

.emergency-lines > li {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.emergency-lines .emergency-number {
  margin: 0.125rem 0.1875rem;
  vertical-align: middle;
}

.emergency-short .emergency-number {
  min-width: 3.25rem;
  min-height: var(--target);
  padding: 0 0.75rem;
  border-radius: 0.875rem;
  font-size: 1.3125rem;
}

/* Ancien balisage du socle (texte + grand numéro à droite). */
@media (min-width: 768px) {
  .emergency:not(.emergency-short):has(> div + .emergency-number) {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
  }
}

/* 15. Appel final, 404, pied de page -------------------------------------- */
.cta-section {
  --gutter: calc(var(--gutter-page) - var(--inset));
  position: relative;
  margin: var(--space-section) var(--inset) 0;
  padding-block: var(--space-section);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, #6d28d9 0%, #9a27cf 46%, #cf1f8f 100%);
  overflow: hidden;
}

.cta-inner {
  display: grid;
  gap: 1.5rem;
}

.cta-inner > div > * + * {
  margin-top: 0.875rem;
}

.cta-inner p:not([class]) {
  color: var(--text-2);
  font-size: var(--fs-lead);
}

@media (min-width: 900px) {
  .cta-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3rem;
  }
}

/* Page 404 */
.error-page {
  padding-block: clamp(2rem, 8vw, 5rem) var(--space-section);
}

.error-page .container > * + * {
  margin-top: 1rem;
}

.error-code {
  display: inline-block;
  padding: 0 0.2em 0.04em;
  border-radius: 0.22em;
  background: var(--grad-action);
  color: var(--white);
  font-family: var(--font-title);
  font-size: clamp(4.5rem, 24vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  transform: rotate(-4deg);
}

.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding-top: 0.5rem;
}

/* Pied de page : un grand panneau violet nuit, arrondi en haut. */
.site-footer {
  --gutter: calc(var(--gutter-page) - var(--inset));
  margin: var(--space-section) var(--inset) 0;
  padding-block: clamp(2rem, 6vw, 3.5rem) 2rem;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--panel);
}

.footer-grid {
  display: grid;
  gap: 2rem 1.5rem;
}

@media (min-width: 600px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-about {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1025px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }

  .footer-about {
    grid-column: auto;
  }
}

.footer-about > * + * {
  margin-top: 0.875rem;
}

.footer-brand {
  font-size: 1.5rem;
}

.footer-tagline {
  max-width: 24rem;
  color: var(--white);
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.footer-note {
  max-width: 26rem;
  color: var(--text-3);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.footer-col h2 {
  color: #ffc9a8;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.footer-col ul {
  margin-top: 0.375rem;
}

.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--white);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.footer-col a:hover {
  text-decoration: underline;
}

/* Renvoi discret vers les deux autres sites. */
.footer-cross {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1.5px solid var(--line);
  color: var(--text-3);
  font-size: var(--fs-fine);
  line-height: 1.6;
}

.footer-cross a {
  color: var(--white);
  font-weight: 600;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 1.25rem;
  color: var(--text-3);
  font-size: var(--fs-fine);
}

.footer-bottom a {
  color: var(--white);
}

/* 16. Conversion, barre d'onglets ----------------------------------------- */
/* Puces de réassurance : sous chaque bouton d'action principal. */
.reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.875rem;
}

.reassurance li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.6875rem 0.25rem 0.3125rem;
  border-radius: var(--radius-pill);
  background: var(--positive-bg);
  color: var(--text);
  font-size: var(--fs-fine);
  font-weight: 600;
  line-height: 1.3;
}

.reassurance li::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23160d2e' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

.hero .reassurance li,
.page-hero .reassurance li,
.section-dark .reassurance li,
.theme-dark .reassurance li,
.cta-section .reassurance li,
.on-grad .reassurance li {
  background: var(--scrim);
  color: var(--white);
}

.contact-form .reassurance li,
.surface .reassurance li,
.legal-hero .reassurance li,
.contact-hero .reassurance li,
.article-hero .reassurance li,
.error-page .reassurance li {
  background: var(--positive-bg);
  color: var(--text);
}

.heading-center .reassurance,
.statement .reassurance,
.text-center .reassurance {
  justify-content: center;
}

/* Ligne d'option (urgence 48 h) près d'un appel à l'action */
.urgency-note {
  max-width: 36rem;
  margin-top: 1rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-s);
  background: var(--scrim);
  color: var(--text);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.section:not(.section-dark) .urgency-note {
  background: var(--bg-2);
}

/* Sélecteur de situation : de grandes tuiles à toucher, vers le formulaire. */
.situation-picker-label {
  color: var(--text);
  font-family: var(--font-title);
  font-size: var(--fs-title);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.situation-picker ul {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

@media (min-width: 600px) {
  .situation-picker ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .hero-foot .situation-picker ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.situation-picker-note {
  margin-top: 0.75rem;
  color: var(--text-3);
  font-size: var(--fs-small);
}

/* .picker-left : nom conservé du socle (ici, l'alignement à gauche est le défaut). */
.situation-picker.picker-left {
  text-align: left;
}

.chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  min-height: var(--target-lg);
  padding: 0.625rem 2.5rem 0.625rem 0.75rem;
  border-radius: 1.125rem;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--text);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.chip > span[aria-hidden="true"]:last-child {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  color: var(--text-3);
  font-size: 1.5rem;
  line-height: 1;
  transform: translateY(-56%);
}

.chip small {
  display: block;
  margin-top: 0.125rem;
  color: var(--text-2);
  font-size: var(--fs-fine);
  font-weight: 500;
  line-height: 1.35;
}

.chip-text {
  min-width: 0;
}

.chip .tile-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0.5625rem;
  border-radius: 0.875rem;
}

/* Navigation par pastilles (ancres d'une page : #tiktok, #instagram…).
   Sur téléphone, la rangée défile au doigt. */
.anchor-nav ul {
  display: flex;
  gap: 0.5rem;
  margin-inline: calc(-1 * var(--gutter));
  padding: 0.25rem var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.anchor-nav ul::-webkit-scrollbar {
  display: none;
}

.anchor-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 1rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.section-tinted .anchor-nav a {
  background: var(--surface-2);
}

@media (min-width: 768px) {
  .anchor-nav ul {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

/* Section de contact : texte, formulaire, levée du risque. */
.contact-section {
  scroll-margin-top: var(--header-h);
}

.contact-layout {
  display: grid;
  gap: var(--space-block);
}

.contact-intro > * + * {
  margin-top: 0.875rem;
}

.contact-aside,
.contact-extras {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

@media (min-width: 600px) {
  .contact-extras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .contact-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas:
      "intro form"
      "aside form"
      "aside extras";
    grid-template-rows: auto auto 1fr;
    gap: 1.5rem clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .contact-intro { grid-area: intro; }
  .contact-layout > .contact-form { grid-area: form; }
  .contact-aside { grid-area: aside; }
  .contact-extras { grid-area: extras; }
}

/* Page de contact : deux colonnes à partir de 1 000 px. */
.contact-grid {
  display: grid;
  gap: var(--space-block);
}

.contact-grid > div > * + * {
  margin-top: 1rem;
}

@media (min-width: 1000px) {
  .contact-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
}

.page-hero.contact-hero {
  padding-block: clamp(1.5rem, 5vw, 3.5rem) var(--space-section);
}

.contact-assurances,
.contact-call,
.aside-box,
.risk-box {
  padding: clamp(1rem, 3.5vw, 1.5rem);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text);
}

.contact-assurances > * + *,
.contact-call > * + *,
.aside-box > * + *,
.risk-box > * + * {
  margin-top: 0.75rem;
}

.contact-assurances h2,
.contact-call h2,
.aside-box h2,
.aside-box h3,
.risk-box h2,
.risk-box h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.aside-box p,
.contact-call p {
  color: var(--text-2);
}

/* « Levée du risque » : liseré menthe. */
.risk-box {
  box-shadow: var(--shadow-card), inset 0 0 0 2px var(--positive-line);
}

/* « Ce qui se passe après ton message » : trois étapes reliées, façon fil. */
.next-steps {
  position: relative;
  display: grid;
  gap: 1rem;
  counter-reset: next;
}

.next-steps::before {
  content: "";
  position: absolute;
  left: 0.875rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 0.25rem;
  border-radius: 0.125rem;
  background: var(--line);
}

.next-steps li {
  position: relative;
  display: grid;
  gap: 0.125rem;
  padding-left: 2.75rem;
  counter-increment: next;
}

.next-steps li::before {
  content: counter(next);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--grad-action);
  color: var(--white);
  font-family: var(--font-title);
  font-size: 0.9375rem;
  font-weight: 800;
}

.next-steps strong {
  color: var(--text);
  line-height: 1.3;
}

.next-steps span {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Encart « moins de 18 ans » : discret, sans cadre d'alerte. */
.minor-note {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  padding: clamp(1rem, 3.5vw, 1.5rem);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--text);
}

.section-tinted .minor-note {
  background: var(--surface-2);
}

.minor-note h2,
.minor-note h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
}

.minor-note p {
  color: var(--text-2);
}

.minor-note-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

/* Bloc « c'est gratuit de le faire toi-même » : la voie gratuite d'abord (menthe),
   puis « quand on t'aide » (aplat dégradé). Les deux moitiés se suivent sur téléphone. */
.free-box {
  display: grid;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text);
  overflow: hidden;
}

.free-box > * {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  justify-items: start;
  padding: clamp(1.125rem, 4vw, 2rem);
}

.free-box .free-side {
  background: var(--positive-bg);
}

.free-box .help-side {
  background: var(--grad-action);
}

.free-box h2,
.free-box h3 {
  font-size: var(--fs-title);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.free-box p {
  color: var(--text-2);
}

.free-box .help-side .check-list li::before {
  background-color: var(--white);
}

.free-box.free-box-single > * {
  background: var(--positive-bg);
}

@media (min-width: 900px) {
  .free-box:not(.free-box-single) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ligne discrète, en petit corps, sans encadré (« on aide aussi les garçons »). */
.aside-line {
  max-width: 40rem;
  color: var(--text-3);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* Barre d'onglets (téléphone et tablette) : dans le partiel de pied de page.
   Toujours là, comme dans une appli : l'aide immédiate à gauche, l'action à droite.
   main.js pose .is-compact quand un formulaire est à l'écran (seule l'aide reste).
   Désactivée par la classe de page « no-action-bar ». */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 0 var(--inset) calc(0.5rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.action-bar-inner {
  display: flex;
  align-items: stretch;
  gap: 0.375rem;
  width: min(100%, 30rem);
  margin-inline: auto;
  padding: 0.375rem;
  border-radius: 1.5rem;
  background: var(--surface);
  box-shadow: var(--shadow-bar), inset 0 0 0 1.5px var(--line);
  pointer-events: auto;
}

.action-bar-help {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  flex: none;
  min-width: 6.25rem;
  min-height: var(--target-lg);
  padding: 0.25rem 0.75rem;
  border-radius: 1.125rem;
  box-shadow: inset 0 0 0 2px var(--text);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.action-bar-help .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.action-bar-write {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.0625rem;
  flex: 1;
  min-height: var(--target-lg);
  padding: 0.25rem 0.75rem;
  border-radius: 1.125rem;
  background: var(--grad-action);
  color: var(--white);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.action-bar-write strong {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.action-bar-write small {
  font-size: 0.6875rem;
  font-weight: 600;
}

.action-bar.is-compact .action-bar-write {
  display: none;
}

.action-bar.is-compact .action-bar-inner {
  width: max-content;
  margin-inline: 0 auto;
}

.action-bar.is-compact .action-bar-help {
  flex-direction: row;
  gap: 0.5rem;
  min-height: var(--target);
  font-size: 0.8125rem;
}

.no-action-bar .action-bar,
.nav-open .action-bar,
body:has([data-contact-form] :is(input:not([type="checkbox"]), textarea, select):focus) .action-bar {
  display: none;
}

/* L'espace de la barre est réservé en fin de page : elle ne masque jamais le dernier contenu. */
body:not(.no-action-bar) .site-footer {
  padding-bottom: calc(2rem + var(--action-bar-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1280px) {
  .action-bar {
    display: none;
  }

  body:not(.no-action-bar) .site-footer {
    padding-bottom: 2rem;
  }

  html {
    scroll-padding-bottom: 1.5rem;
  }
}

/* Tutoiement / vouvoiement dans les partiels : deux libellés, un seul affiché. */
.tone-vous,
.page-posee .tone-tu {
  display: none;
}

.page-posee .tone-vous {
  display: inline;
}

/* Page « posée » (Parents, pages légales) : mêmes composants, ton plus calme —
   héros violet nuit sans nappes animées, autocollants droits, titres un peu moins gras. */
.page-posee h1,
.page-posee h2,
.page-posee .h-display,
.page-posee .h-large,
.page-posee .h-medium {
  font-weight: 700;
  letter-spacing: -0.028em;
}

.page-posee .hero,
.page-posee .page-hero:not(.legal-hero):not(.contact-hero),
.page-posee .cta-section {
  background: var(--panel);
}

.page-posee .hero-bg,
.page-posee .marquee {
  display: none;
}

.page-posee .sticker,
.page-posee .callout-figure,
.page-posee .steps > li > span,
.page-posee .proof-grid > div > span,
.page-posee .error-code {
  transform: none;
}

.page-posee .story-card,
.page-posee .story-card.story-b,
.page-posee .story-card.story-c {
  background: var(--panel);
}

.page-posee .story-card::before {
  opacity: 0.9;
}

/* 17. Compatibilité socle -------------------------------------------------- */
/* Noms du socle V2 dont l'effet n'existe pas dans cette identité (grille, faisceaux,
   lampe, bordure lumineuse, texte brouillé) : acceptés, sans rendu. */
.bg-grid,
.bg-dots,
.spotlight,
.spotlight-right,
.beams,
.lamp,
.card-halo {
  display: none;
}

.lamp-header,
.glow-border,
.tracing-beam,
.text-generate,
.word,
.hero-inner {
  background-image: none;
}

/* 18. Mouvement, impression ------------------------------------------------ */
/* Animations courtes (400 ms au plus hors héros), en transform et opacity seulement,
   toutes optionnelles : rien ici ne s'applique avec « moins d'animations ». */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Apparitions au défilement : .reveal est visible par défaut ;
     main.js n'ajoute .reveal-pending qu'aux éléments encore hors écran. */
  .reveal:not(.reveal-done) {
    transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
    transition-delay: var(--reveal-delay, 0s);
  }

  .reveal.reveal-pending {
    opacity: 0;
    transform: translate3d(0, 0.875rem, 0) scale(0.985);
  }

  /* Rebond au toucher : le bouton s'enfonce, puis revient avec un léger ressort. */
  .button,
  .chip,
  .story-link,
  .header-cta > span,
  .main-nav .nav-cta > span,
  .action-bar-write,
  .anchor-nav a,
  .nav-toggle {
    transition: transform 320ms var(--ease-bounce), box-shadow var(--t-med) var(--ease);
  }

  .button::after {
    transition: transform 320ms var(--ease-bounce);
  }

  .button:active,
  .chip:active,
  .story-link:active,
  .header-cta:active > span,
  .main-nav .nav-cta:active > span,
  .action-bar-write:active,
  .anchor-nav a:active,
  .nav-toggle:active {
    transform: scale(0.96);
    transition-duration: 90ms;
  }

  .site-header::after {
    transition: opacity var(--t-med) var(--ease);
  }

  .nav-toggle-bar {
    transition: transform var(--t-med) var(--ease-bounce);
  }

  .accordion-list summary::after {
    transition: transform var(--t-med) var(--ease-bounce);
  }

  .accordion-list details[open] > :not(summary) {
    animation: bubble-in 300ms var(--ease-bounce) both;
  }

  .accordion-list details[open] > :not(summary):nth-child(3) { animation-delay: 60ms; }
  .accordion-list details[open] > :not(summary):nth-child(n + 4) { animation-delay: 120ms; }

  @keyframes bubble-in {
    from {
      opacity: 0;
      transform: translate3d(-0.5rem, 0.5rem, 0) scale(0.96);
    }
  }

  /* Fond de héros : les nappes dérivent très lentement (26 s, aller-retour). */
  .hero-bg > i:nth-child(1) {
    animation: blob-a var(--t-blob) ease-in-out infinite alternate;
  }

  .hero-bg > i:nth-child(2) {
    animation: blob-b calc(var(--t-blob) * 1.3) ease-in-out infinite alternate;
  }

  .hero-bg > i:nth-child(3) {
    animation: blob-c calc(var(--t-blob) * 0.8) ease-in-out infinite alternate;
  }

  @keyframes blob-a {
    to {
      transform: translate3d(7rem, 5rem, 0) scale(1.15);
    }
  }

  @keyframes blob-b {
    to {
      transform: translate3d(-6rem, -4rem, 0) scale(1.1);
    }
  }

  @keyframes blob-c {
    to {
      transform: translate3d(-2rem, -1.5rem, 0) scale(1.08);
    }
  }

  /* Mot qui change (classes posées par main.js) */
  .flip-words.is-running > .is-current {
    animation: flip-in 380ms var(--ease-bounce) both;
  }

  .flip-words.is-running > .is-leaving {
    animation: flip-out 220ms var(--ease) both;
  }

  @keyframes flip-in {
    from {
      opacity: 0;
      transform: translate3d(0, 0.45em, 0) scale(0.94);
    }
  }

  @keyframes flip-out {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
      transform: translate3d(0, -0.4em, 0) scale(0.96);
    }
  }

  /* Animation signature (jouée une fois, environ 2,6 s) :
     0,9 s  le post se dissout de gauche à droite, ses fragments s'envolent ;
     2,0 s  la coche prend sa place, avec un petit rebond. */
  .post-demo.is-playing .post-demo-card {
    -webkit-mask-image: linear-gradient(100deg, transparent 0 34%, #000 48% 100%);
    mask-image: linear-gradient(100deg, transparent 0 34%, #000 48% 100%);
    -webkit-mask-size: 340% 100%;
    mask-size: 340% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: post-dissolve 800ms var(--ease) 0.9s both;
  }

  @keyframes post-dissolve {
    from {
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0;
    }

    to {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
      transform: rotate(-2deg) scale(0.985);
    }
  }

  .post-demo.is-playing .post-demo-frag {
    animation: frag-fly 900ms var(--ease) calc(0.9s + var(--d, 0s)) both;
  }

  @keyframes frag-fly {
    0% {
      opacity: 0;
      transform: translate3d(0, 0, 0);
    }

    10%,
    62% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate3d(var(--dx, 2rem), var(--dy, -3rem), 0) rotate(var(--r, 90deg)) scale(0.35);
    }
  }

  .post-demo.is-playing .post-demo-done {
    visibility: visible;
    animation: done-pop 420ms var(--ease-bounce) 2s both;
  }

  @keyframes done-pop {
    from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.6);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .post-demo.is-playing::before {
    animation: fade-in 400ms var(--ease) 1.6s both;
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .post-demo.is-playing .post-demo-check path {
    stroke-dasharray: 22;
    animation: check-draw 320ms var(--ease) 2.2s both;
  }

  @keyframes check-draw {
    from {
      stroke-dashoffset: 22;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  /* Bandeau d'autocollants : défilement continu, en pause au survol, au focus, au toucher. */
  .marquee.is-ready .marquee-track {
    animation: marquee var(--marquee-t, 40s) linear infinite;
  }

  .marquee.is-paused .marquee-track,
  .marquee:hover .marquee-track {
    animation-play-state: paused;
  }

  @keyframes marquee {
    to {
      transform: translate3d(-50%, 0, 0);
    }
  }

  /* Chronologie : le numéro prend sa couleur avec un petit rebond. */
  .timeline.is-tracking::after {
    transition: transform 160ms linear;
  }

  .timeline.is-tracking .timeline-item.is-active .timeline-num {
    animation: num-pop 360ms var(--ease-bounce) both;
  }

  @keyframes num-pop {
    from {
      transform: scale(0.8);
    }
  }

  /* Panneau de confirmation du formulaire */
  .form-confirm-check {
    animation: num-pop 380ms var(--ease-bounce) both;
  }

  /* Menu (téléphone et tablette) : la feuille apparaît, les lignes montent. */
  @media (max-width: 1279px) {
    .main-nav {
      transition: opacity var(--t-med) var(--ease), visibility 0s linear var(--t-med);
    }

    .main-nav.is-open {
      transition: opacity var(--t-med) var(--ease), visibility 0s;
    }

    .main-nav > a {
      opacity: 0;
      transform: translate3d(0, 0.5rem, 0);
      transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
    }

    .main-nav.is-open > a {
      opacity: 1;
      transform: none;
    }

    .main-nav.is-open > a:nth-child(2) { transition-delay: 25ms; }
    .main-nav.is-open > a:nth-child(3) { transition-delay: 50ms; }
    .main-nav.is-open > a:nth-child(4) { transition-delay: 75ms; }
    .main-nav.is-open > a:nth-child(5) { transition-delay: 100ms; }
    .main-nav.is-open > a:nth-child(6) { transition-delay: 125ms; }
    .main-nav.is-open > a:nth-child(n + 7) { transition-delay: 150ms; }
  }

  /* Hors écran : toute animation décorative est suspendue (classe posée par main.js). */
  .is-offscreen,
  .is-offscreen::before,
  .is-offscreen::after,
  .is-offscreen *,
  .is-offscreen *::before,
  .is-offscreen *::after {
    animation-play-state: paused !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .button:hover {
      transform: translateY(-0.125rem);
    }

    .button:hover::after {
      transform: translateX(0.1875rem);
    }

    .button:active {
      transform: scale(0.96);
    }

    .chip:hover,
    .anchor-nav a:hover {
      box-shadow: inset 0 0 0 2px var(--link);
    }
  }
}

/* L'aide d'urgence n'est jamais animée, quel que soit le réglage. */
.emergency,
.emergency *,
.nav-help,
.nav-help *,
.action-bar-help {
  animation: none !important;
  transition: none !important;
}

.emergency.reveal-pending {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  :root {
    --bg: #fff;
    --bg-2: #fff;
    --surface: #fff;
    --surface-2: #fff;
    --panel: #fff;
    --text: #000;
    --text-2: #222;
    --text-3: #444;
    --link: #000;
    --line: #999;
    --line-strong: #666;
    --root-text: #000;
    --root-text-2: #222;
    --root-text-3: #444;
    --root-link: #000;
    --root-line: #999;
    --root-line-strong: #666;
    --hl: #fff;
    --hl-text: #000;
    --root-hl: #fff;
    --root-hl-text: #000;
    --positive: #000;
    --root-positive: #000;
    --positive-bg: #fff;
    --danger: #000;
    --danger-bg: #fff;
    --todo-text: #000;
    --todo-bg: #fff;
    --todo-line: #000;
    --field-bg: #fff;
    --field-line: #555;
    --scrim: #fff;
    --space-section: 1.5rem;
    --space-block: 1rem;
    color-scheme: light;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html,
  body {
    background: #fff !important;
    color: #000;
  }

  body {
    font-size: 11pt;
  }

  .hero,
  .page-hero,
  .section-dark,
  .theme-dark,
  .cta-section,
  .site-footer,
  .story-card,
  .tile-accent,
  .tile-dark,
  .free-box .help-side,
  .on-grad,
  .bubble.bubble-out {
    --text: #000;
    --text-2: #222;
    --text-3: #444;
    --link: #000;
    --line: #999;
    --hl: #fff;
    --hl-text: #000;
    --positive: #000;
  }

  .hero,
  .page-hero,
  .section,
  .section-dark,
  .section-tinted,
  .cta-section,
  .site-footer,
  .story-card,
  .tile,
  .free-box > *,
  .bubble,
  .accordion-list summary,
  .eyebrow,
  .sticker,
  .flip-words,
  .brand-mark,
  .error-code,
  .timeline-num,
  .steps > li > span,
  .proof-grid > div > span,
  .next-steps li::before,
  .callout-figure,
  .card-label,
  .reassurance li,
  .urgency-note,
  .emergency-number,
  .article-notice,
  .price-card.featured,
  .callout,
  .button {
    margin-inline: 0;
    background: #fff !important;
    color: #000 !important;
  }

  .site-header {
    position: static;
    height: auto;
  }

  .nav-toggle,
  .header-cta,
  .main-nav,
  .skip-link,
  .hero-bg,
  .hero-stage,
  .post-demo,
  .marquee,
  .action-bar,
  .situation-picker,
  .anchor-nav,
  .section-media,
  .visual,
  .page-hero-visual,
  .tile-rings,
  .story-card::before,
  .story-card::after,
  .footer-col,
  .article-toc,
  .cta-section .button,
  .center-action,
  .button::before,
  .button::after,
  .brand-mark::after,
  .form-confirm {
    display: none !important;
  }

  .button,
  .chip,
  .sticker,
  .emergency-number,
  .accordion-list summary,
  .timeline-num,
  .steps > li > span,
  .proof-grid > div > span,
  .story-link {
    border: 1px solid #000;
  }

  .tile,
  .price-card,
  .options-grid > article,
  .case-card,
  .blog-card,
  .notice,
  .contact-form,
  .emergency,
  .callout,
  .risk-box,
  .aside-box,
  .minor-note,
  .free-box,
  .bubble,
  .story-card,
  .timeline-item,
  .steps > li,
  .proof-grid > div,
  .accordion-list details > :not(summary),
  .pricing-table tbody tr {
    border: 1px solid #999;
    break-inside: avoid;
  }

  .story-row {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .story-card {
    min-height: 0;
  }

  .sticker,
  .callout-figure,
  .error-code,
  .brand-mark,
  .steps > li > span,
  .proof-grid > div > span {
    transform: none;
  }

  .reveal,
  .reveal.reveal-pending {
    opacity: 1 !important;
    transform: none !important;
  }

  .timeline::after {
    display: none;
  }

  .text-gradient {
    background-image: none !important;
    color: #000 !important;
    -webkit-text-fill-color: #000;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  h1 {
    font-size: 26pt;
  }

  h2 {
    font-size: 18pt;
  }

  .statement-text {
    font-size: 13pt;
  }

  .todo-field {
    border: 1px solid #000;
    background: #fff;
  }

  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}

/* 19. Ajouts de l'intégration (pages réelles) ------------------------------ */
/* Liste neutre : les lignes de .feature-list, avec une puce pêche au lieu de la coche menthe
   (ce qu'on ne peut pas faire, ce qui est plus difficile : une coche y serait trompeuse). */
.dot-list {
  display: grid;
  gap: 0.875rem;
}

.dot-list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--text-2);
}

.dot-list li strong {
  color: var(--text);
}

.dot-list li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--peach-deep);
}

.section-dark .dot-list li::before,
.theme-dark .dot-list li::before {
  background: var(--peach);
}

/* Guide pas à pas en fil de discussion (.article-body.article-thread) : chaque étape est une
   bulle « reçue », son numéro dans une pastille. Aucune animation : la page se lit la nuit,
   d'une main. L'étape 1 (.thread-aid) porte l'aide d'urgence : elle reste hors bulle, sans dégradé. */
.article-thread > section + section {
  margin-top: 0.875rem;
}

.article-thread > .thread-step {
  padding: 1.125rem 1.125rem 1.375rem;
  border-radius: 1.375rem 1.375rem 1.375rem 0.375rem;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.article-thread > .thread-aid {
  margin-bottom: 1.75rem;
}

.article-thread > section > h2 {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0;
}

.thread-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -0.3125rem;
  border-radius: 50%;
  background: var(--grad-action);
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.thread-num.thread-num-ink {
  background: var(--text);
  color: var(--surface);
}

.article-thread .notice {
  background: var(--bg);
}

@media (min-width: 600px) {
  .article-thread > .thread-step {
    padding: 1.5rem 1.625rem 1.75rem;
  }
}

.article-thread .notice h3 {
  margin-top: 0;
}

/* Liste déroulante : un libellé trop long pour l'écran se termine par « … » au lieu d'être rogné. */
.field select {
  text-overflow: ellipsis;
}

/* Page introuvable : le sur-titre sur sa propre ligne, sous le grand « 404 ». */
.error-page .eyebrow {
  display: table;
}

/* Défauts du socle corrigés pour la page Contact (formulaire dans le héros sobre) :
   1. à partir de 1 000 px, .contact-aside portait « grid-area: aside » (zone de .contact-layout) ;
      dans .contact-grid, qui n'a pas de zones nommées, cela créait des colonnes vides et écrasait
      la colonne du formulaire ;
   2. dans une carte claire posée sur un héros sobre, le bouton secondaire (« Copier mon message »,
      « Copier l'adresse ») prenait la forme prévue pour un aplat : texte blanc sur fond clair. */
.contact-grid > .contact-aside {
  grid-area: auto;
}

.contact-form .button.button-secondary,
.legal-hero .button.button-secondary,
.contact-hero .button.button-secondary,
.article-hero .button.button-secondary {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-shadow: inset 0 0 0 2px var(--line-strong);
}

/* Phrase à dire, à copier : une bulle « envoyée » et, avec JavaScript, un bouton « Copier ». */
.say-this {
  justify-items: end;
}

.say-this .bubble.bubble-out > p {
  color: var(--white);
  font-weight: 600;
}

.say-this .copy-button {
  justify-self: end;
}

/* Petits téléphones peu hauts (360 × 640, 375 × 667) : le bouton principal passe juste sous le
   titre du héros, pour rester visible sans défiler ; le chapeau suit. Aucun texte n'est retiré,
   l'ordre de lecture (lecteurs d'écran, sans feuille de style) ne change pas. */
@media (max-width: 599px) and (max-height: 739px) {
  .hero-copy,
  .page-hero:not(.legal-hero):not(.contact-hero) > .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-copy > .actions,
  .page-hero > .container > .actions {
    order: 1;
    align-self: stretch;
  }

  .hero-copy > .reassurance,
  .page-hero > .container > .reassurance {
    order: 2;
  }

  .hero-copy > .lead,
  .page-hero > .container > .lead {
    order: 3;
  }
}

@media print {
  .article-thread > .thread-step {
    padding: 0;
    box-shadow: none;
  }

  .thread-num {
    background: none;
    color: #000;
  }

  .copy-button {
    display: none;
  }
}

/* 20. Se reconnaître, sans faux avis ---------------------------------------- */
/* « Ce que tu te dis peut-être » : une pensée (bulle pêche, à droite, suivie de deux petits ronds
   comme une bulle de pensée) puis une réponse (bulle blanche, à gauche). Ce ne sont ni des avis ni
   des témoignages : aucun nom, aucune note, et la ligne .thought-note reste sous la série. */
.thought-list {
  display: grid;
  gap: 1.75rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thought-pair {
  align-content: start;
}

.bubble.bubble-thought {
  --text: var(--on-peach);
  justify-self: end;
  max-width: min(94%, 30rem);
  margin-bottom: 0.875rem;
  border-radius: 1.375rem 1.375rem 0.375rem 1.375rem;
  background: var(--peach);
  box-shadow: none;
  color: var(--on-peach);
}

.bubble.bubble-thought > h3 {
  font-size: clamp(1.1875rem, 0.5vw + 1.0625rem, 1.375rem);
  line-height: 1.14;
  letter-spacing: -0.022em;
}

.bubble.bubble-thought::before,
.bubble.bubble-thought::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--peach);
}

.bubble.bubble-thought::before {
  right: 0.375rem;
  bottom: -0.6875rem;
  width: 0.5625rem;
  height: 0.5625rem;
}

.bubble.bubble-thought::after {
  right: -0.125rem;
  bottom: -1.0625rem;
  width: 0.3125rem;
  height: 0.3125rem;
}

.thought-pair > .bubble:not(.bubble-thought) {
  max-width: min(96%, 34rem);
}

.thought-pair > .bubble:not(.bubble-thought) > p {
  color: var(--text);
}

/* Variante nuit : la bulle de réponse, sombre sur le panneau sombre, garde un contour net. */
@media (prefers-color-scheme: dark) {
  .thought-pair > .bubble:not(.bubble-thought) {
    box-shadow: inset 0 0 0 1px rgba(var(--light-rgb), 0.18);
  }
}

/* La ligne d'honnêteté : toujours visible, jamais en petit gris. */
.thought-note {
  max-width: 44rem;
  margin-top: var(--space-block);
  padding: 0.875rem 1.125rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-m);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.thought-note > strong {
  font-family: var(--font-title);
  font-weight: 800;
  letter-spacing: -0.015em;
}

@media (min-width: 768px) {
  .thought-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }
}

@media (min-width: 1025px) {
  .thought-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .thought-list > .thought-pair:nth-child(3n + 2) {
    margin-top: 1.5rem;
  }
}

/* Cartes de situation (« Ce qui t'arrive ressemble à quoi ? ») : texte un peu plus grand et plus aéré
   qu'à l'intégration (15 px -> 16 px), pour que chaque scène se lise d'un coup d'œil. */
.story-card:not(.story-tale) > p {
  font-size: 1rem;
  line-height: 1.5;
}

/* « Histoires inventées » : cartes story plus larges, qui portent un récit en cinq temps.
   La fiction est dite dans le titre de la section et par l'autocollant de chaque carte ; le dernier
   temps (.story-limit, la limite du service) est dans un encadré blanc. Cartes non cliquables. */
.story-row.story-row-tales {
  grid-auto-columns: min(88%, 21rem);
}

.story-card.story-tale {
  min-height: 0;
  gap: 0;
}

.story-card.story-tale::before {
  top: -2.25rem;
  right: -2.25rem;
  width: 5.5rem;
  height: 5.5rem;
}

.story-card.story-tale.story-b::before {
  top: -3rem;
  right: -3rem;
}

.story-card.story-tale.story-c::before {
  box-shadow: inset 0 0 0 1.125rem var(--peach);
}

.story-card.story-tale h3 {
  margin-top: 1.125rem;
  padding-top: 0;
  font-size: clamp(1.375rem, 0.6vw + 1.25rem, 1.625rem);
  line-height: 1.08;
}

.story-steps {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-self: stretch;
  gap: 0.75rem;
  margin: 1rem 0 0;
}

.story-steps > div + div {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--light-rgb), 0.3);
}

.story-steps dt {
  color: var(--white);
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.story-steps dd {
  margin: 0.25rem 0 0;
  color: var(--white);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.story-steps > .story-limit {
  --link: #5b21b6;
  margin-top: auto;
  padding: 0.875rem 1rem 1rem;
  border-top: 0;
  border-radius: 1rem;
  background: var(--white);
}

.story-steps > .story-limit dt,
.story-steps > .story-limit dd {
  color: #160d2e;
}

@media (min-width: 900px) {
  .story-row.story-row-tales {
    grid-auto-columns: auto;
  }

  .story-card.story-tale {
    min-height: 0;
  }
}

/* Composant « avis » — PRÊT MAIS NON UTILISÉ. Il ne sert qu'à de vrais retours, recueillis après la
   clôture d'un dossier, avec un accord écrit (AVIS-REELS.md). Volontairement sans note ni étoile. */
.avis-list {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.avis-card {
  --text: var(--root-text);
  --text-2: var(--root-text-2);
  --text-3: var(--root-text-3);
  --link: var(--root-link);
  --line: var(--root-line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line);
  color: var(--text);
}

.avis-text {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.avis-author {
  margin-top: auto;
  color: var(--text);
  font-family: var(--font-title);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.avis-flag {
  display: block;
  margin-top: 0.125rem;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--fs-fine);
  font-weight: 600;
  letter-spacing: 0;
}

.avis-consent {
  align-self: stretch;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: 1.4;
}

@media (min-width: 768px) {
  .avis-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .avis-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media print {
  .bubble.bubble-thought,
  .story-steps > .story-limit,
  .avis-card,
  .thought-note {
    border: 1px solid #999;
    background: none;
    color: #000;
  }

  .bubble.bubble-thought::before,
  .bubble.bubble-thought::after {
    display: none;
  }

  .story-steps dt,
  .story-steps dd {
    color: #000;
  }
}