/* ==========================================================================
   FREEMAN RH PRO, feuille de styles des composants.
   Version 2, 12 septembre 2026. Direction artistique refondue sur le logo
   du client, voir _site_docs/DA_FREEMAN.md et _site_docs/BRIEF_FREEMAN.md.
   Dépend de tokens.css, qui doit être chargé avant.
   Aucune règle ici ne code une couleur en dur, tout passe par les tokens.
   Sommaire :
     1. Remise à zéro et bases
     2. Typographie
     3. Mise en page, conteneurs, sections, grilles
     4. Utilitaires
     5. Boutons
     6. En tête et navigation
     7. Héros
     8. Cartes (service, prix, article)
     9. Blocs de preuve, encarts, étapes
    10. Tableaux et comparatifs
    11. Bandeau d'appel à l'action
    12. FAQ et accordéons
    13. Formulaires
    14. Fil d'Ariane, pagination, pages légales
    15. Pied de page
    16. Mouvement et impression
   ========================================================================== */

/* ==========================================================================
   1. REMISE À ZÉRO ET BASES
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--surface-1);
  color: var(--color-text);
  font-family: var(--font-corps);
  font-size: var(--fs-200);
  line-height: var(--lh-corps);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-text);
}

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

:where(a) {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
:where(a):hover { color: var(--color-link-hover); }
:where(a):visited { color: var(--color-link-visited); }

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-xs);
}

/* Lien d'évitement, visible seulement au clavier */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: calc(var(--space-md) * -6);
  z-index: var(--z-bandeau);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: top var(--duree-rapide) var(--easing);
}
.skip-link:focus { top: var(--space-md); }

/* ==========================================================================
   2. TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-titres);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-titre);
  color: inherit;
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}

h1 { font-size: var(--fs-600); line-height: var(--lh-titre); }
h2 { font-size: var(--fs-500); line-height: var(--lh-titre); margin-top: var(--space-2xl); }
h3 { font-size: var(--fs-400); line-height: var(--lh-sous-titre); margin-top: var(--space-xl); }
h4 { font-size: var(--fs-300); line-height: var(--lh-sous-titre); font-weight: var(--fw-medium); }

@media (min-width: 48rem) {
  h1 { font-size: var(--fs-700); line-height: var(--lh-display); }
}

/* Un titre en tête de section ne doit pas cumuler la marge de la section */
:where(section, article, header, .card, .callout, .section__head, .cta-band, .hero) > :where(h2, h3):first-child { margin-top: 0; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--space-md); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-300);
  line-height: var(--lh-chapo);
  color: var(--color-text-muted);
  max-width: var(--measure);
}

.eyebrow {
  display: block;
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-xs);
}

.prose { max-width: var(--measure); }
.prose li + li { margin-top: var(--space-2xs); }
.prose ul, .prose ol { padding-left: 1.25em; }

strong, b { font-weight: var(--fw-bold); }

small, .fine-print {
  font-size: var(--fs-100);
  line-height: var(--lh-compact);
  color: var(--color-text-faint);
}

.num {
  font-family: var(--font-chiffres);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

abbr[title] { text-decoration: underline dotted; cursor: help; }

blockquote {
  border-left: var(--border-rail) solid var(--color-border-brand);
  padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
  color: var(--color-text-muted);
}

hr {
  border: 0;
  border-top: var(--border-hairline) solid var(--color-border);
  margin: var(--space-2xl) 0;
}

/* ==========================================================================
   3. MISE EN PAGE
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 48rem) {
  .wrap { padding-inline: var(--space-xl); }
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--space-xl); }
.section--alt { background: var(--surface-2); }

.section--inverse {
  background: var(--surface-inverse);
  color: var(--color-text-inverse);
}
.section--inverse .lead,
.section--inverse .fine-print { color: var(--color-text-inverse); opacity: .82; }
.section--inverse a { color: inherit; }
.section--inverse .eyebrow { color: var(--color-accent-soft); }

.section__head { max-width: 44rem; margin-bottom: var(--space-xl); }
.section__head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--gutter); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 40rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Deux colonnes asymétriques, contenu principal plus large */
.split { display: grid; gap: var(--space-2xl); }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  .split--reverse > :first-child { order: 2; }
}

.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-xl); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* Colonne collante pour les sommaires de pages longues */
.sticky-aside { position: sticky; top: 6rem; }

/* ==========================================================================
   4. UTILITAIRES
   ========================================================================== */

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

.u-center { text-align: center; }
.u-muted { color: var(--color-text-muted); }
.u-measure { max-width: var(--measure); }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-nowrap { white-space: nowrap; }

/* Placeholder de contenu à fournir, volontairement visible en relecture */
.todo {
  display: inline-block;
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: var(--border-hairline) dashed var(--color-warning);
  border-radius: var(--radius-xs);
  padding: 0 var(--space-2xs);
  font-family: var(--font-chiffres);
  font-size: 0.9em;
}

/* ==========================================================================
   5. BOUTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--touch-target);
  padding: var(--space-sm) var(--space-lg);
  border: var(--border-strong) solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-corps);
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree-rapide) var(--easing),
              border-color var(--duree-rapide) var(--easing),
              color var(--duree-rapide) var(--easing);
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}
.btn-primary:hover,
.btn-primary:visited:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-on-primary-hover);
}
.btn-primary:visited { color: var(--color-text-on-primary); }

.btn-secondary {
  background: transparent;
  border-color: var(--color-border-brand);
  color: var(--color-link);
}
.btn-secondary:hover { background: var(--surface-3); color: var(--color-link-hover); }
.btn-secondary:visited { color: var(--color-link); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-link);
  padding-inline: var(--space-sm);
  text-decoration: underline;
}
.btn-ghost:hover { background: var(--surface-3); }

.btn-sm { min-height: 44px; padding: var(--space-xs) var(--space-md); font-size: var(--fs-100); }
.btn-lg { font-size: var(--fs-300); padding: var(--space-md) var(--space-xl); }
.btn-block { display: flex; width: 100%; }

/* Boutons posés sur une section sombre */
.section--inverse .btn-primary {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
}
.section--inverse .btn-primary:hover { background: var(--color-neutral-200); border-color: var(--color-neutral-200); }
.section--inverse .btn-secondary { border-color: currentColor; color: inherit; }
.section--inverse .btn-secondary:hover { background: rgba(255,255,255,.1); }

/* ==========================================================================
   6. EN TÊTE ET NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: var(--surface-1);
  border-bottom: var(--border-hairline) solid var(--color-border);
}
.site-header.is-scrolled { box-shadow: var(--shadow-1); }

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

.site-logo {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  text-decoration: none;
  flex: 0 0 auto;
}
.site-logo:visited { color: var(--color-primary); }
.site-logo img { height: 2rem; width: auto; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--touch-target);
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.nav-toggle__bars {
  position: relative;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.site-nav a:not(.btn) {
  display: block;
  padding: var(--space-sm) var(--space-xs);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--fw-medium);
  border-radius: var(--radius-sm);
}
.site-nav a:not(.btn):hover { color: var(--color-link); text-decoration: underline; }
.site-nav a[aria-current="page"] {
  color: var(--color-link);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

/* Panneau mobile */
@media (max-width: 61.999rem) {
  .site-nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--surface-1);
    border-bottom: var(--border-hairline) solid var(--color-border);
    box-shadow: var(--shadow-2);
    padding: var(--space-md);
    z-index: var(--z-menu);
  }
  .site-header__inner { position: relative; }
  .site-nav .btn { width: 100%; margin-top: var(--space-xs); }
}

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  .site-nav[hidden] { display: block; }
  .site-nav__list { flex-direction: row; align-items: center; gap: var(--space-xs); }
  .site-nav a:not(.btn) { padding: var(--space-xs) var(--space-sm); }
}

/* ==========================================================================
   7. HÉROS
   ========================================================================== */

.hero {
  padding-block: var(--space-2xl) var(--space-3xl);
  background: var(--surface-2);
  border-bottom: var(--border-hairline) solid var(--color-border);
}
.hero__inner { display: grid; gap: var(--space-2xl); }
.hero__title { margin-bottom: var(--space-md); }
.hero__lead { font-size: var(--fs-300); line-height: var(--lh-chapo); color: var(--color-text-muted); }
.hero__actions { margin-top: var(--space-xl); }
.hero__note { margin-top: var(--space-md); }

@media (min-width: 62rem) {
  .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
}

/* Bloc chiffre posé dans le héros ou en bas de section */
.stat-row {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  padding-top: var(--space-xl);
  margin-top: var(--space-xl);
  border-top: var(--border-hairline) solid var(--color-border);
}
.stat__value {
  display: block;
  font-family: var(--font-chiffres);
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  color: var(--color-accent-text);
  font-variant-numeric: tabular-nums;
}
.stat__label { display: block; font-size: var(--fs-100); color: var(--color-text-muted); }

/* ==========================================================================
   8. CARTES
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.section--alt .card { background: var(--surface-1); }

.card__icon {
  width: 2.5rem; height: 2.5rem;
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}
.card__title { font-size: var(--fs-400); margin: 0 0 var(--space-xs); }
.card__text { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.card__link { margin-top: auto; font-weight: var(--fw-medium); }

/* Carte service, rail coloré en tête */
.card-service { border-top: var(--border-rail) solid var(--color-primary); }
.card-service:hover { box-shadow: var(--shadow-2); }

/* Carte prix */
.card-price {
  border: var(--border-strong) solid var(--color-border-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  background: var(--surface-1);
}
.card-price__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  font-family: var(--font-chiffres);
  font-size: var(--fs-700);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--color-text);
  margin-block: var(--space-sm);
  /* Un placeholder de preproduction est un mot insecable long. Sans ces trois
     regles il deborde de sa carte et pousse la page entiere vers la droite en
     largeur telephone. Constat bloquant de l'audit technique du 12 septembre. */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.card-price__amount .todo {
  font-family: var(--font-corps);
  font-size: var(--fs-200);
  font-weight: var(--fw-regular);
  line-height: 1.3;
}
.card-price__period {
  font-family: var(--font-corps);
  font-size: var(--fs-200);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}
.card-price__meta { font-size: var(--fs-100); color: var(--color-text-muted); }
.card-price__list { list-style: none; padding: 0; margin: var(--space-lg) 0; }
.card-price__list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--space-xs);
}
.card-price__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 0.75rem; height: 0.4rem;
  border-left: var(--border-strong) solid var(--color-success);
  border-bottom: var(--border-strong) solid var(--color-success);
  transform: rotate(-45deg);
}
.card-price__list li.is-excluded::before {
  border: 0;
  top: 0.55em;
  width: 0.75rem; height: 0;
  border-top: var(--border-strong) solid var(--color-text-faint);
  transform: none;
}

/* ==========================================================================
   9. PREUVE, ENCARTS, ÉTAPES
   ========================================================================== */

.proof-block {
  background: var(--surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.proof-block__quote { font-family: var(--font-titres); font-size: var(--fs-400); line-height: var(--lh-sous-titre); }
.proof-block__source { font-size: var(--fs-100); color: var(--color-text-muted); margin-top: var(--space-md); }

.callout {
  border-left: var(--border-rail) solid var(--color-info);
  background: var(--color-info-bg);
  color: var(--color-text);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-lg);
  margin-block: var(--space-lg);
}
.callout__title {
  font-family: var(--font-corps);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-xs);
}
.callout--success { border-left-color: var(--color-success); background: var(--color-success-bg); }
.callout--warning { border-left-color: var(--color-warning); background: var(--color-warning-bg); }
.callout--danger  { border-left-color: var(--color-danger);  background: var(--color-danger-bg); }
.callout--plain   { border-left-color: var(--color-border-strong); background: var(--surface-2); }

/* Étapes numérotées */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.step {
  position: relative;
  counter-increment: etape;
  padding-left: 3.5rem;
  padding-bottom: var(--space-xl);
}
.step:last-child { padding-bottom: 0; }
.step::before {
  content: counter(etape);
  position: absolute;
  left: 0; top: 0;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-chiffres);
  font-weight: var(--fw-bold);
}
.step::after {
  content: "";
  position: absolute;
  left: 1.25rem; top: 2.75rem; bottom: 0.5rem;
  width: 2px;
  background: var(--color-border);
}
.step:last-child::after { display: none; }
.step__title { font-size: var(--fs-400); margin: 0.25rem 0 var(--space-xs); }
.step__meta { font-size: var(--fs-100); color: var(--color-text-muted); }

/* Liste à coches et à croix, pour les périmètres inclus et exclus */
.list-check, .list-cross { list-style: none; padding: 0; margin: 0 0 var(--space-md); }
.list-check li, .list-cross li { position: relative; padding-left: 1.75rem; margin-bottom: var(--space-xs); }
.list-check li::before {
  content: "";
  position: absolute; left: 0.15rem; top: 0.4em;
  width: 0.7rem; height: 0.35rem;
  border-left: var(--border-strong) solid var(--color-success);
  border-bottom: var(--border-strong) solid var(--color-success);
  transform: rotate(-45deg);
}
.list-cross li::before {
  content: "";
  position: absolute; left: 0.15rem; top: 0.55em;
  width: 0.8rem; height: 0;
  border-top: var(--border-strong) solid var(--color-danger);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--color-text-muted);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
}
.badge--accent { background: var(--color-warning-bg); color: var(--color-warning); }

/* ==========================================================================
   10. TABLEAUX
   ========================================================================== */

.table-scroll {
  overflow-x: auto;
  margin-bottom: var(--space-lg);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
}

table { width: 100%; border-collapse: collapse; font-size: var(--fs-200); }
caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-100);
  color: var(--color-text-muted);
}
th, td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-compact);
  border-bottom: var(--border-hairline) solid var(--color-border);
}
thead th {
  background: var(--surface-3);
  font-family: var(--font-corps);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td .num, th .num { white-space: nowrap; }

.compare-table th[scope="row"] { font-weight: var(--fw-medium); width: 40%; }
.compare-table .is-yes { color: var(--color-success); font-weight: var(--fw-bold); }
.compare-table .is-no  { color: var(--color-text-faint); }

/* ==========================================================================
   11. BANDEAU D'APPEL À L'ACTION
   ========================================================================== */

.cta-band {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.cta-band h2, .cta-band h3 { color: var(--color-white); margin-top: 0; }
.cta-band p { color: var(--color-white); opacity: .9; margin-bottom: 0; }
.cta-band .btn-primary {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
}
.cta-band .btn-primary:hover { background: var(--color-neutral-200); border-color: var(--color-neutral-200); }
.cta-band .btn-secondary { border-color: var(--color-white); color: var(--color-white); }
.cta-band .btn-secondary:hover { background: rgba(255,255,255,.12); }

@media (min-width: 48rem) {
  .cta-band { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-2xl); }
}

/* ==========================================================================
   12. FAQ ET ACCORDÉONS
   ========================================================================== */

.faq { border-top: var(--border-hairline) solid var(--color-border); }
.faq details {
  border-bottom: var(--border-hairline) solid var(--color-border);
  margin: 0;
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  cursor: pointer;
  font-family: var(--font-corps);
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  line-height: var(--lh-sous-titre);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.7rem; height: 0.7rem;
  margin-top: 0.45em;
  border-right: var(--border-strong) solid var(--color-primary);
  border-bottom: var(--border-strong) solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform var(--duree-normale) var(--easing);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--color-link); }
.faq__answer { padding-bottom: var(--space-lg); max-width: var(--measure); color: var(--color-text-muted); }

/* ==========================================================================
   13. FORMULAIRES
   ========================================================================== */

.form { max-width: 40rem; }
.form__row { margin-bottom: var(--space-lg); }
.form__row--split { display: grid; gap: var(--space-lg); }
@media (min-width: 40rem) { .form__row--split { grid-template-columns: 1fr 1fr; } }

label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-weight: var(--fw-medium);
}
.form__hint { display: block; font-size: var(--fs-100); color: var(--color-text-muted); margin-top: var(--space-2xs); }
.form__required { color: var(--color-danger); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
select, textarea {
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-1);
  color: var(--color-text);
  border: var(--border-hairline) solid var(--color-border-field);
  border-radius: var(--radius-sm);
  font: inherit;
}
textarea { min-height: 9rem; resize: vertical; line-height: var(--lh-corps); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-primary); }
input::placeholder, textarea::placeholder { color: var(--color-text-faint); }

.form__consent {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: var(--fs-100);
  color: var(--color-text-muted);
}
.form__consent input[type="checkbox"] {
  width: 1.25rem; height: 1.25rem;
  min-height: 0;
  margin-top: 0.15rem;
  flex: 0 0 auto;
  accent-color: var(--color-primary);
}
.form__status {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  border-left: var(--border-rail) solid var(--color-warning);
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

/* ==========================================================================
   14. FIL D'ARIANE ET PAGES LÉGALES
   ========================================================================== */

.breadcrumb { padding-block: var(--space-md); font-size: var(--fs-100); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: var(--space-xs); color: var(--color-text-faint); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: var(--fw-medium); }

.legal { max-width: 46rem; }
.legal h2 { font-size: var(--fs-400); margin-top: var(--space-2xl); }
.legal h3 { font-size: var(--fs-300); }
.legal p, .legal li { color: var(--color-text-muted); }
.legal .fine-print { display: block; margin-top: var(--space-2xl); }

.page-404 { text-align: center; padding-block: var(--space-4xl); }
.page-404 .num { font-size: var(--fs-700); color: var(--color-text-faint); display: block; }

/* ==========================================================================
   15. PIED DE PAGE
   ========================================================================== */

.site-footer {
  margin-top: var(--space-4xl);
  background: var(--surface-inverse);
  color: var(--color-text-inverse);
  padding-top: var(--space-3xl);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:visited { color: inherit; }
.site-footer a:hover { text-decoration: underline; }

/* LOGO DU PIED DE PAGE.
   Le pied utilise --surface-inverse : il est SOMBRE en thème clair et CLAIR en
   thème sombre. Le logo doit donc suivre l'inverse du thème, pas le thème.
   En thème clair, le mot FREEMAN en bleu nuit ne vaudrait que 1.35 sur le fond
   #12171C du pied : illisible. On bascule ici sur le jeu fond sombre défini
   dans tokens.css, section 4 bis. Aucun markup n'est dupliqué, les 18 pages
   gardent le même SVG inline.
   Ratios obtenus : mot blanc 18.03, tuile éclairée 3.16, glyphe blanc sur tuile
   5.70, barre pâle sur tuile 3.68, mention RH PRO en turquoise du logo 7.14. */
.site-footer {
  --logo-tile:   var(--logo-sombre-tile);
  --logo-glyph:  var(--logo-sombre-glyph);
  --logo-accent: var(--logo-sombre-accent);
  --logo-word:   var(--logo-sombre-word);
  --logo-sub:    var(--logo-sombre-sub);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-xl);
  padding-bottom: var(--space-2xl);
}
@media (min-width: 40rem) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.site-footer__brand img { filter: none; }
.site-footer__pitch { margin-top: var(--space-md); opacity: .8; font-size: var(--fs-100); max-width: 24rem; }

.site-footer__title {
  font-family: var(--font-corps);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  opacity: .7;
  margin: 0 0 var(--space-md);
}
.site-footer__col ul, .site-footer__contact { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin-bottom: var(--space-xs); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-lg);
  border-top: var(--border-hairline) solid var(--color-border-strong);
  font-size: var(--fs-100);
  opacity: .78;
}
.site-footer__legal p { margin: 0; }
.site-footer__legal-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-md); margin: 0; padding: 0; }

/* En thème sombre, --surface-inverse devient BLANC : le pied de page devient clair.
   Le logo doit donc repasser au jeu fond clair, c'est à dire redevenir bleu nuit.
   Sans cette règle, le mot FREEMAN resterait blanc sur blanc.
   Les deux blocs ci dessous sont synchronisés, comme les deux blocs de thème
   sombre de tokens.css : l'un suit le réglage système, l'autre le choix explicite.
   Ratios obtenus : mot bleu nuit 13.31 sur blanc, tuile 13.31, glyphe blanc sur
   tuile 13.31, barre turquoise du logo sur tuile 5.28, mention RH PRO 7.33. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer {
    color: var(--color-text-inverse);
    --logo-tile:   var(--logo-clair-tile);
    --logo-glyph:  var(--logo-clair-glyph);
    --logo-accent: var(--logo-clair-accent);
    --logo-word:   var(--logo-clair-word);
    --logo-sub:    var(--logo-clair-sub);
  }
}

:root[data-theme="dark"] .site-footer {
  color: var(--color-text-inverse);
  --logo-tile:   var(--logo-clair-tile);
  --logo-glyph:  var(--logo-clair-glyph);
  --logo-accent: var(--logo-clair-accent);
  --logo-word:   var(--logo-clair-word);
  --logo-sub:    var(--logo-clair-sub);
}

/* ==========================================================================
   16. MOUVEMENT ET IMPRESSION
   ========================================================================== */

/* Amélioration progressive : l'état masqué n'est appliqué que si le JavaScript
   s'est exécuté et a posé la classe js sur l'element racine. Sans JavaScript,
   le contenu reste visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 320ms var(--easing), transform 320ms var(--easing);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

@media print {
  .site-header, .site-footer, .cta-band, .skip-link, .nav-toggle { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .section { padding-block: 1rem; }
  .card, .callout, .table-scroll { break-inside: avoid; }
}

/* ==========================================================================
   17. COMPLÉMENTS
   Ajoutés après le premier lot d'intégration, en réponse au relevé
   _docs/CSS_MANQUANT.md remonté par les agents d'intégration.
   ========================================================================== */

/* Libellé du bouton de menu mobile */
.nav-toggle__label { font-size: var(--fs-100); font-weight: var(--fw-medium); }

/* Question de FAQ portée par un titre, sans reprendre la typographie sérif des titres.
   Permet d'avoir une vraie hiérarchie de titres dans le document. */
.faq__question {
  font-family: var(--font-corps);
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  line-height: var(--lh-sous-titre);
  letter-spacing: var(--ls-normal);
  margin: 0;
}
.faq summary > .faq__question { flex: 1 1 auto; }

/* Exergue du héros, plus léger qu'un encart d'information */
.hero__exergue {
  margin-top: var(--space-lg);
  padding-left: var(--space-md);
  border-left: var(--border-rail) solid var(--color-accent);
  font-size: var(--fs-300);
  line-height: var(--lh-chapo);
  color: var(--color-text);
  max-width: var(--measure);
}

/* Notes numérotées sous un tableau */
.table-note {
  margin-top: calc(var(--space-lg) * -1 + var(--space-xs));
  margin-bottom: var(--space-lg);
  padding-left: 1.5em;
  font-size: var(--fs-100);
  line-height: var(--lh-compact);
  color: var(--color-text-muted);
}
.table-note li + li { margin-top: var(--space-2xs); }

/* Colonne d'actions du bandeau d'appel à l'action */
.cta-band__actions { display: flex; flex-direction: column; gap: var(--space-sm); }
@media (min-width: 48rem) {
  .cta-band__actions { align-items: flex-end; text-align: right; }
}
.cta-band__actions .fine-print { color: var(--color-white); opacity: .8; margin: 0; }

/* Remise à zéro du groupe de champs, sinon le navigateur dessine un cadre */
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend {
  padding: 0;
  margin-bottom: var(--space-md);
  font-family: var(--font-titres);
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  line-height: var(--lh-sous-titre);
}

/* Listes posées dans une carte, retrait aligné sur celui de .prose */
.card ol, .card ul { padding-left: 1.25em; }
.card li + li { margin-top: var(--space-2xs); }

/* Fil d'Ariane placé juste avant un héros, on évite le collage */
.breadcrumb + .hero { padding-top: var(--space-xl); }

/* Cellule volontairement vide dans un tableau comparatif.
   Le contenu textuel destiné aux lecteurs d'écran est porté par .u-visually-hidden. */
.compare-table td.is-empty { background: var(--surface-2); }

/* Listes dans un encart, retrait aligné sur celui du texte courant */
.callout ol, .callout ul { padding-left: 1.25em; }
.callout li + li { margin-top: var(--space-2xs); }
.callout__title + p, .callout__title + ul, .callout__title + ol { margin-top: 0; }

/* ==========================================================================
   18. CORRECTIONS D'AUDIT, 22 août 2026
   Rapport source : _docs/AUDIT_TECHNIQUE.md
   ========================================================================== */

/* B1. Logo posé en SVG dans le flux, il hérite donc de la couleur du contexte.
   En tête il prend la couleur de marque, en pied il prend la couleur du pied. */
.site-logo svg { height: 2rem; width: auto; display: block; }
.site-footer__brand svg { height: 2rem; width: auto; display: block; }

/* B5. Navigation utilisable sans JavaScript. Tant que le script n'a pas posé la
   classe js sur l'element racine, le panneau reste dans le flux et reste atteignable.
   Le script prend ensuite la main et gère l'attribut hidden. */
@media (max-width: 61.999rem) {
  html:not(.js) .site-nav {
    position: static;
    box-shadow: none;
    padding-inline: 0;
  }
  html:not(.js) .site-header__inner { flex-wrap: wrap; }
  html:not(.js) .nav-toggle { display: none; }
}

/* B7. Conteneur de tableau défilant atteignable au clavier.
   Le focus doit rester visible malgré le débordement masqué. */
.table-scroll:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: calc(var(--focus-offset) * -1);
}

/* S2 et S3. Anneau de focus lisible sur les surfaces foncées.
   Le bandeau d'appel à l'action est toujours de couleur de marque, donc anneau blanc.
   Le pied s'inverse avec le thème, il suit le rôle inverse. */
.cta-band :focus-visible,
.section--inverse :focus-visible { outline-color: var(--color-focus-on-brand); }
.site-footer :focus-visible { outline-color: var(--color-focus-inverse); }

/* S6. La zone de statut du formulaire reste dans le document, sans attribut hidden,
   pour que role="status" soit réellement observé par les technologies d'assistance.
   Elle disparaît visuellement tant qu'elle est vide. */
.form__status:empty { display: none; }

/* M4. Liens du pied de page, soulignés pour ne pas dépendre de la seule couleur. */
.site-footer__col a,
.site-footer__legal-links a { text-decoration: underline; text-underline-offset: 0.18em; }
.site-footer a:hover { text-decoration-thickness: 2px; }

/* M8. Mots longs, adresses et références, jamais de débordement horizontal. */
body { overflow-wrap: break-word; }
td, th, .card__text, .prose li { overflow-wrap: anywhere; }

/* Cible du lien d'évitement, pour que le focus se pose réellement sur le contenu. */
main:focus { outline: none; }

/* Bouton neutralisé tant que la donnée de contact n'est pas fournie.
   Ce n'est pas un lien, il ne doit ni recevoir le focus ni se comporter comme cliquable. */
.btn.is-disabled {
  background: var(--surface-3);
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ==========================================================================
   19. SYSTÈME D'ANIMATION, 22 août 2026
   Documentation d'intégration : _docs/ANIMATIONS.md
   Principes tenus dans toute cette section :
     a. le contenu est visible par défaut, l'état masqué n'existe que sous .js ;
     b. seules des propriétés sans recalcul de mise en page sont animées,
        transform et opacity, plus les propriétés de peinture (couleur, ombre) ;
     c. la seule exception de hauteur est l'accordéon, traitée en JavaScript ;
     d. tout est neutralisé sous prefers-reduced-motion reduce ;
     e. aucune boucle infinie, hors barre de progression pilotée par le défilement.
   ========================================================================== */

/* --------------------------------------------------------------------------
   19.0 Tokens locaux de mouvement
   -------------------------------------------------------------------------- */

:root {
  --duree-reveal: 320ms;     /* révélation au défilement */
  --duree-lente: 400ms;      /* rail d'étapes, durée maximale du site */
  --reveal-pas: 60ms;        /* décalage entre deux elements d'une même grille */
  --reveal-distance: 0.75rem;/* déplacement d'entrée, volontairement court */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duree-reveal: 1ms;
    --duree-lente: 1ms;
    --reveal-pas: 0ms;
    --reveal-distance: 0rem;
  }
}

/* --------------------------------------------------------------------------
   19.1 Révélation au défilement
   Base héritée de la section 16, enrichie ici de variantes de direction
   et d'un décalage progressif porté par la variable --reveal-index,
   posée par le script sur les enfants d'un groupe.
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  transition-property: opacity, transform;
  transition-duration: var(--duree-reveal);
  transition-timing-function: var(--easing);
  transition-delay: calc(var(--reveal-index, 0) * var(--reveal-pas));
}

/* Variante par défaut, entrée depuis le bas */
.js [data-reveal],
.js [data-reveal="bas"] { transform: translateY(var(--reveal-distance)); }

/* Entrée depuis la gauche, pour les elements de liste et les étapes */
.js [data-reveal="gauche"] { transform: translateX(calc(var(--reveal-distance) * -1)); }

/* Variante sans déplacement, pour les blocs denses, tableaux et longs textes */
.js [data-reveal="fondu"] { transform: none; }

.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Un groupe ne porte aucun style propre, il sert seulement de repère au script :
   c'est lui qui numérote ses enfants et pose --reveal-index sur chacun. */

/* --------------------------------------------------------------------------
   19.2 Micro interactions, boutons
   Au survol rien ne bouge de place, conformément au brand kit.
   Le déplacement est réservé à l'état pressé, un pixel vers le bas.
   -------------------------------------------------------------------------- */

.btn {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: var(--duree-rapide);
  transition-timing-function: var(--easing);
}
.btn:active:not(.is-disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.btn.is-disabled:active, .btn[aria-disabled="true"]:active { transform: none; }

/* Bouton de menu, même logique */
.nav-toggle {
  transition: background-color var(--duree-rapide) var(--easing),
              border-color var(--duree-rapide) var(--easing),
              transform var(--duree-rapide) var(--easing);
}
.nav-toggle:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   19.3 Micro interactions, cartes
   Élévation discrète, uniquement sur les pointeurs qui savent survoler.
   En thème sombre les ombres sont neutralisées, le bord prend le relais.
   -------------------------------------------------------------------------- */

.card, .card-service, .card-price {
  transition-property: border-color, box-shadow, transform;
  transition-duration: var(--duree-normale);
  transition-timing-function: var(--easing);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-1);
  }
  .card-service:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
  }
  .card-price:hover { box-shadow: var(--shadow-2); }
}

/* Une carte contenant un lien focalisé au clavier réagit comme au survol. */
.card:focus-within { border-color: var(--color-border-strong); }
.card-service:focus-within { box-shadow: var(--shadow-2); }

/* --------------------------------------------------------------------------
   19.4 Micro interactions, lignes de tableau
   Repérage de ligne au survol, propriété de peinture seulement.
   -------------------------------------------------------------------------- */

tbody tr { transition: background-color var(--duree-rapide) var(--easing); }

@media (hover: hover) and (pointer: fine) {
  tbody tr:hover { background: var(--surface-2); }
  tbody tr:hover th[scope="row"] { color: var(--color-text); }
}

/* --------------------------------------------------------------------------
   19.5 Micro interactions, liens de navigation
   Filet d'accent qui se déploie depuis la gauche, en transform seul.
   Réservé au grand écran : sur le panneau mobile le soulignement natif reste.
   Le filet est une forme, pas une simple couleur, le repère ne dépend donc
   pas de la seule teinte.
   -------------------------------------------------------------------------- */

@media (min-width: 62rem) {
  .site-nav a:not(.btn) {
    position: relative;
    transition: color var(--duree-rapide) var(--easing);
  }
  .site-nav a:not(.btn)::after {
    content: "";
    position: absolute;
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: 0.2rem;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duree-rapide) var(--easing);
  }
  .site-nav a:not(.btn):hover::after,
  .site-nav a:not(.btn):focus-visible::after { transform: scaleX(1); }
  .site-nav a:not(.btn):hover { text-decoration: none; }
  /* La page courante porte déjà son propre filet, on évite le doublon. */
  .site-nav a[aria-current="page"]::after { display: none; }
}

/* Liens de pied de page et liens de contenu, épaisseur de soulignement animée */
.site-footer__col a,
.site-footer__legal-links a { transition: text-decoration-thickness var(--duree-rapide) var(--easing); }

/* --------------------------------------------------------------------------
   19.6 Micro interactions, chevron d'accordéon
   La rotation existait, on ajoute l'appui visuel au survol et la couleur.
   -------------------------------------------------------------------------- */

.faq summary { transition: color var(--duree-rapide) var(--easing); }
.faq summary::after {
  transition: transform var(--duree-normale) var(--easing),
              border-color var(--duree-rapide) var(--easing);
}
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover::after {
    border-color: var(--color-link-hover);
    transform: rotate(45deg) translate(1px, 1px);
  }
  .faq details[open] summary:hover::after { transform: rotate(-135deg) translate(1px, 1px); }
}

/* Pendant l'animation de hauteur le script pose cet attribut sur le details. */
.faq details[data-etat="ouverture"] .faq__answer,
.faq details[data-etat="fermeture"] .faq__answer { overflow: hidden; }

/* --------------------------------------------------------------------------
   19.7 Étapes numérotées
   La pastille se pose et le rail se déploie vers le bas, en transform seul.
   Ne s'applique qu'aux étapes qui portent data-reveal.
   -------------------------------------------------------------------------- */

.js .step[data-reveal]::before {
  transform: scale(0.86);
  opacity: 0;
  transition: transform var(--duree-normale) var(--easing) 80ms,
              opacity var(--duree-normale) var(--easing) 80ms;
}
.js .step[data-reveal].is-revealed::before { transform: none; opacity: 1; }

.js .step[data-reveal]::after {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--duree-lente) var(--easing) 140ms;
}
.js .step[data-reveal].is-revealed::after { transform: scaleY(1); }

/* --------------------------------------------------------------------------
   19.8 Compteurs animés
   Chiffres à chasse fixe pour que la largeur ne bouge pas pendant le comptage.
   -------------------------------------------------------------------------- */

[data-count-to] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   19.9 Barre de progression de lecture
   Injectée par le script uniquement si le corps de page porte data-progression.
   Épaisseur de 3 pixels, couleur d'accent, aucune ombre, aucune boucle.
   -------------------------------------------------------------------------- */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: var(--z-bandeau);
  background: transparent;
  pointer-events: none;
}
.reading-progress__bar {
  display: block;
  height: 100%;
  background: var(--color-accent-text);
  transform: scaleX(0);
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   19.10 En tête intelligente
   Elle ne disparaît jamais au défilement, le lecteur remonte souvent.
   La compaction est visuelle et sans recalcul de mise en page : la hauteur
   de l'en tête reste constante, sinon le contenu de la page sauterait
   à chaque franchissement du seuil. Ce qui change : l'ombre, le bord,
   et l'échelle du logo, en transform.
   -------------------------------------------------------------------------- */

.site-header {
  transition: box-shadow var(--duree-normale) var(--easing),
              border-color var(--duree-normale) var(--easing);
}
.site-header.is-scrolled { border-bottom-color: var(--color-border-strong); }

.site-logo {
  transform-origin: left center;
  transition: transform var(--duree-normale) var(--easing);
}
.site-header.is-scrolled .site-logo { transform: scale(0.92); }

/* Element optionnel de l'en tête, effacé une fois le défilement engagé.
   Il conserve sa place, seule l'opacité change. */
.site-header [data-header-secondaire] {
  transition: opacity var(--duree-normale) var(--easing);
}
.site-header.is-scrolled [data-header-secondaire] { opacity: 0; }

/* --------------------------------------------------------------------------
   19.11 Neutralisation sous mouvement réduit
   Les durées sont déjà coupées à la source par tokens.css et par 19.0.
   Ce bloc supprime en plus tout déplacement résiduel.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal="bas"],
  .js [data-reveal="gauche"],
  .js [data-reveal="fondu"] {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0ms;
  }
  .js .step[data-reveal]::before,
  .js .step[data-reveal]::after {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn:active,
  .nav-toggle:active,
  .card:hover,
  .card-service:hover,
  .site-header.is-scrolled .site-logo { transform: none; }
  .site-nav a:not(.btn)::after { transition: none; }
  .reading-progress__bar { transition: none; }
}

/* --------------------------------------------------------------------------
   19.12 Impression
   Aucun élément de mouvement à l'impression.
   -------------------------------------------------------------------------- */

@media print {
  .reading-progress { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   20. ILLUSTRATIONS
   Bibliothèque SVG posée dans le flux, voir _site_docs/ILLUSTRATIONS.md.
   Les illustrations n'ont aucune couleur en dur, elles consomment les tokens,
   elles suivent donc le thème clair et le thème sombre sans traitement.
   ========================================================================== */

.illu {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  color: var(--color-primary);
}

.illu--hero    { max-width: 34rem; }
.illu--service { max-width: 28rem; }
.illu--frise   { max-width: 40rem; }
.illu--contact { max-width: 24rem; }
.illu--404     { max-width: 20rem; margin-inline: auto; }

/* Sur une section foncée, l'illustration passe en couleur de texte inversée */
.section--inverse .illu,
.cta-band .illu { color: currentColor; }

/* Bloc illustration plus texte, l'image ne doit jamais écraser le propos */
.illu-bloc { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 48rem) {
  .illu-bloc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .illu-bloc--texte-droite > .illu-media { order: 1; }
  .illu-bloc--texte-droite > .illu-texte { order: 2; }
}
.illu-media { display: flex; justify-content: center; }

/* Motif de fond, discret, jamais au premier plan */
.section--motif { position: relative; isolation: isolate; }
.section--motif > .motif-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  color: var(--color-border);
}

/* À l'impression, les illustrations décoratives disparaissent */
@media print {
  .illu, .motif-fond { display: none !important; }
}

/* Page d'erreur, tout est centré, boutons compris */
.page-404 .cluster { justify-content: center; }
.page-404 .lead { margin-inline: auto; }