/* ════════════════════════════════════════════════════════════════════
   design.css — la couche visuelle du site public OncoIDE

   D'OÙ VIENT CE SYSTÈME

   Hugo a désigné denisatlan.fr comme la référence à atteindre. Sa
   feuille de style a été lue — elle est servie en clair, comme celle de
   tout site — et son système en a été relevé :

     --rw-bone  #EEEEE8   le fond, un blanc d'os et non un blanc pur
     --rw-ink   #0D0E10   le texte, un noir qui n'est pas le noir
     --rw-brass #E5333A   le rouge, réservé au grand et aux aplats
     --rw-fog   #DCDCD3   les bordures
     Sora 700 pour l'affichage, DM Sans 400 pour le texte

   CE QUI EST REPRIS, ET CE QUI NE L'EST PAS

   Repris : des conventions de mise en forme — titres énormes et
   serrés, surligneur plein sur un mot du titre, pastilles à point,
   cartes à grand rayon sans ombre, boutons en capsule. Elles sont
   partout dans le graphisme contemporain et n'appartiennent à personne.

   Pas repris : son nom, son logo, ses photos, ses textes, et son rouge.
   OncoIDE garde le sien, #C8413B, qui est sa marque déposée.

   Essayé puis abandonné : son fond d'os. Il a été posé sur les
   44 pages, mesuré, corrigé — et Hugo a tranché pour le blanc le
   13 octobre 2026. Ce qui suit dit ce que ce choix change.

   CE QUE CETTE FEUILLE NE TOUCHE PAS

   Aucun contenu. Pas un mot, pas un lien, pas une section, pas une
   donnée structurée. Elle est chargée après le <style> de chaque page :
   à spécificité égale, l'ordre de source tranche.

   LE CONTRASTE A ÉTÉ MESURÉ, PAS ESTIMÉ

   Un fond plus sombre que le blanc déclasse toutes les couleurs
   claires. C'est ce qui s'est passé : sur #EEEEE8, #C8413B tombait à
   4,22 et axe-core a relevé 491 manquements sur les 44 pages, tous
   cette seule paire. Il avait fallu un second rouge, #a8352f, pour
   écrire en petit.

   Le blanc lève la contrainte. Relevé sur #FFFFFF, puis sur la bande
   alternée #F8F8F6 qui rompt la page :

                              blanc   bande
     #0D0E10 encre ........   19,31   18,16  ✓
     #5A5B54 gris chaud ...    6,86    6,46  ✓   (le leur, #75766F : 3,94)
     #6A6B63 gris clair ...    5,39    5,07  ✓
     #C8413B rouge de marque   4,91    4,62  ✓   petit texte compris
     blanc sur #C8413B ....    4,91       —  ✓   (le surligneur, les aplats)

   Le rouge de marque suffit donc partout sur fond clair, et c'est le
   gain réel du blanc : OncoIDE écrit avec son rouge déposé, pas avec
   une version assombrie de celui-ci.

   Sur fond sombre, en revanche, il reste illisible : d'où
   --red-sur-sombre, plus bas, et sa mesure.

   scripts/audit-accessibilite.mjs applique axe-core (WCAG 2.1 A + AA)
   sur les 44 pages à chaque intégration. Dernier relevé sur cette
   version : 0 manquement.
   ════════════════════════════════════════════════════════════════════ */

/* ── Les polices ────────────────────────────────────────────────────
   Sora pour l'affichage, DM Sans pour le texte : le même couple que la
   référence, toutes deux sous SIL Open Font License 1.1 — un usage
   commercial libre, elles ne sont la propriété de personne en pratique.

   Sous-ensemble latin seulement : 33 Ko et 62 Ko, contre 344 Ko pour la
   variable Inter complète qu'elles remplacent. Un site français n'a pas
   besoin du cyrillique ni du grec.

   Servies depuis notre domaine : la politique de sécurité n'autorise que
   `font-src 'self'`, et un appel à fonts.gstatic.com transmettrait
   l'adresse IP du visiteur à un tiers — ce que la CNIL a sanctionné. */
@font-face {
  font-family: "Sora";
  src: url("/fonts/Sora.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DMSans";
  src: url("/fonts/DMSans.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /*  FOND BLANC — décidé par Hugo le 13 octobre 2026.

      Ce n'est pas qu'un changement de teinte : le blanc d'os avait
      déclassé toutes les couleurs claires, et c'est lui qui avait forcé
      le rouge de marque à s'assombrir pour rester lisible. Le blanc
      rend #C8413B licite — 4,91:1 — donc il revient tel quel.

      Tout le reste du système tient : Sora, DM Sans, le surligneur, les
      pastilles, les cartes sans ombre, les boutons à l'encre. */
  --os: #fff;
  --page: #fff;
  --encre: #0d0e10;
  --brume: #dcdcd3;

  /* On réécrit les variables que les 44 pages utilisent déjà : tout
     suit sans qu'une seule page soit modifiée. */
  --white: #fff;
  /*  La bande alternée d'une section à l'autre : assez marquée pour se
      voir, assez claire pour que le rouge de marque y tienne encore
      (4,62:1 sur #f8f8f6). Sans elle, la page redevient un seul bloc.

      --gray2 ne sert qu'à des filets et à deux fonds d'état
      (.modal-close:hover, .dtab-btn.inactive) : vérifié, aucun rouge ne
      s'y pose. #C8413B n'y passerait pas — 4,26. */
  --gray: #f8f8f6;
  --gray2: #efefec;
  --border: #e6e4de;
  --text: #0d0e10;
  --text2: #5a5b54;
  --text3: #6a6b63;
  --navy: #16181b;
  --navy2: #0d0e10;
  /*  UN SEUL ROUGE SUR LES FONDS CLAIRS, DEPUIS LE PASSAGE AU BLANC

      Le fond d'os obligeait à deux rouges : #C8413B y tombait à 4,21 et
      axe-core avait relevé 491 manquements. Sur blanc il remonte à 4,91
      et sur la bande alternée à 4,68 — le rouge de marque suffit, et
      --red-vif n'en est plus que l'alias, gardé pour que la règle du
      surligneur reste lisible.

      Le rouge des fonds sombres, lui, reste indispensable : plus bas. */
  --red: #c8413b;
  --red-vif: #c8413b;
  --red2: #a8352f;
  --red-light: #f7e9e8;

  --r-sm: 12px;
  --r: 18px;
  --r-lg: 24px;
  --r-pill: 999px;
  --ombre-1: 0 1px 2px rgba(13, 14, 16, .04);
  --ombre-2: 0 2px 10px rgba(13, 14, 16, .06);
}

/* ── Le texte ───────────────────────────────────────────────────────
   Le site tournait sur la pile système. C'est le premier signe auquel
   on reconnaît un site fait à la hâte : trois rendus différents selon
   la machine du lecteur, et aucune identité. */
body {
  font-family: "DMSans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--os);
  color: var(--encre);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ════════════════════════════════════════════════════════════════════
   L'ÉCHELLE DES TITRES — QUATRE REGISTRES, ET POURQUOI

   CE QUI A ÉTÉ MESURÉ AVANT D'ÉCRIRE CE BLOC

   Les 44 pages tournaient sur CINQ combinaisons h1/h2 différentes.
   Ce n'était pas un système, c'était le résultat d'une guerre de
   spécificité entre la feuille partagée et le <style> de chaque page :

     h1 65,6 / h2 48 .... 27 pages
     h1 36,8 / h2 21,6 .. 11 pages
     h1 65,6 / h2 — ......  3 pages   (CGV, mentions, confidentialité)
     h1 65,6 / h2 16 .....  1 page
     h1 65,6 / h2 21,1 ...  1 page
     h1 65,6 / h2 25,6 ...  1 page

   LE VRAI DÉFAUT N'ÉTAIT PAS LA TAILLE DU h1

   Relevé du corps de texte, pondéré par le nombre de caractères
   réellement lus et non par le nombre de balises : 16 px sur 75 à 98 %
   du texte. Le corps va bien.

   Le défaut est le RAPPORT. Un h2 à 48 px sur un corps à 16 px, c'est
   un titre de section trois fois le texte. À cette taille, un titre ne
   hiérarchise plus rien : il crie. Et entre le h2 à 48 et le h3 à
   16,5, il n'y avait pas une marche, il y avait une falaise.

   Les 11 pages du centre de confiance, elles, étaient déjà justes :
   36,8 / 21,6 sur un corps de 15,2. Ce sont les mieux dessinées du
   site. Le reste est aligné sur LEURS proportions, pas l'inverse.

   LES QUATRE REGISTRES, ET LE CROCHET QUI LES DISTINGUE

   Aucun balisage n'a été ajouté : les crochets existaient déjà.

     accueil ... .hero:has(.hero-grid) .............  1 page
     vitrine ... main[data-ai-topic] ............... 26 pages
     confiance . .tc-main / .tc-hero ............... 11 pages (intactes)
     document .. le reste ..........................  6 pages

   La base ci-dessous EST le registre document, le plus sobre. Les
   registres plus affirmés remontent par-dessus. L'ordre est voulu :
   une page qu'aucun crochet ne classe hérite du sobre, jamais du
   criard. Un défaut de classement devient invisible plutôt que
   gênant.

   L'APPROCHE SE DESSERRE QUAND LA TAILLE BAISSE

   -0,042em était juste à 65 px et abîme la lisibilité à 32 : les
   contreformes se referment. Chaque registre porte donc sa propre
   approche.
   ════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4,
.hero h1, .sh h2, .nav-brand, .stat-n, .hkpi-n {
  font-family: "Sora", "DMSans", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.035em;
}

/*  REGISTRE DOCUMENT — la base. CGV, CGU, mentions légales,
    confidentialité, déclaration d'accessibilité, 404.
    Un texte juridique sous un titre de 65 px, c'est le registre d'une
    affiche pour le contenu d'un contrat. */
.hero h1, h1 {
  font-size: clamp(1.7rem, 2.5vw, 2.05rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--encre);
}

.sh h2, h2 {
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.018em;
  color: var(--encre);
}

/*  REGISTRE VITRINE — les 26 pages qui vendent : atterrissages de
    recherche, pages de rôle, produit, établissements, baromètre.
    Assez grand pour porter une promesse, assez tenu pour qu'une
    question longue — « Existe-t-il un logiciel pour les infirmiers en
    oncologie ? » — reste une phrase et ne devienne pas un mur. */
main[data-ai-topic] h1 {
  font-size: clamp(1.85rem, 3.3vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.03em;
}

main[data-ai-topic] h2,
main[data-ai-topic] .sh h2 {
  font-size: clamp(1.4rem, 2.05vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -.022em;
}

/*  REGISTRE ACCUEIL — une seule page, et c'est la seule qui a le droit
    de parler fort : c'est là que le visiteur décide s'il reste.

    LE PLAFOND EST À 3,1 rem POUR UNE RAISON MESURÉE

    Le h1 fait 76 caractères, dont 56 dans le <em> rouge. Lignes rendues
    comptées sur getClientRects(), colonne de 624 px :

      54,4 px → 4 lignes de rouge, titre haut de 299 px
      49,6 px → 3 lignes de rouge, titre haut de 220 px

    Un accent qui occupe quatre lignes sur cinq n'est plus un accent,
    c'est la couleur dominante. À 49,6 il redevient minoritaire, et le
    titre rend 79 px au-dessus de la ligne de flottaison. */
.hero:has(.hero-grid) h1 {
  font-size: clamp(2.05rem, 4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}

h3 {
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
}

.card h3 {
  font-size: 1.1rem;
}

/* ── LE TITRE BICOLORE, QUI A REMPLACÉ LE SURLIGNEUR ────────────────
   CE QUI ÉTAIT LÀ

   Le geste signature de la référence : un aplat rouge plein derrière un
   membre du titre, blanc dessus. Posé ici, il donnait QUATRE blocs
   rouges empilés sur téléphone — le h1 de l'accueil enveloppe une
   proposition entière, pas deux mots.

   POURQUOI IL EST PARTI

   Ce n'est pas une question de longueur, et le raccourcir n'aurait fait
   que déplacer le problème. C'est une question de registre.

   La référence est le site d'un conférencier : le surligneur y dit
   « une personne vous parle ». OncoIDE vend à des directions des soins,
   des DSI et des DRH d'établissement. Leur registre visuel est celui du
   fournisseur sérieux : précis, posé, institutionnel. Un trait de
   marqueur sur le titre n'y inspire pas la confiance qu'on lui demande.

   CE QUI LE REMPLACE, ET POURQUOI C'EST MIEUX QUE « RIEN »

   La marque est DÉJÀ bicolore : le logo s'écrit Onco en encre, IDE en
   rouge. Le titre rime donc avec la marque au lieu de rimer avec un
   surligneur. Le rouge tombe exactement sur les mots qui comptent, et
   le geste est celui d'un éditeur, pas d'une affiche.

   #C8413B sur blanc : 4,91:1 — c'est le fond blanc qui rend ce choix
   possible. Sur le fond d'os, ce rouge-là était illisible en texte.

   Les fonds sombres sont traités plus bas, par --red-sur-sombre. */
.hero h1 em,
h1 em {
  font-style: normal;
  color: var(--red);
}

/* ── La pastille d'annonce ──────────────────────────────────────────
   Leur « ● Thématiques de conférence ». Le balisage d'OncoIDE est déjà
   le même : un conteneur et un point. Il ne manquait que la forme. */
.hero-badge {
  background: color-mix(in srgb, var(--encre) 6%, transparent);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--text2);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding: .5rem 1.1rem;
  text-transform: none;
}

.badge-dot {
  background: var(--red-vif);
  animation: none;
}

/* ── Les boutons ────────────────────────────────────────────────────
   En capsule, l'action principale en noir d'encre plutôt qu'en rouge :
   c'est leur choix, et il tient. Le rouge sert alors au surligneur et
   aux accents, où il ne rivalise avec rien. Blanc sur #0D0E10 : 16,8:1. */
.btn-p,
.btn-o,
.nav-cta,
.nav-mobile-cta,
.toc-link {
  border-radius: var(--r-pill);
}

.btn-p,
.btn-o {
  font-family: "DMSans", system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: 1rem 1.9rem;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.btn-p {
  background: var(--encre);
  color: #fff;
  box-shadow: none;
}

.btn-p:hover {
  background: var(--red);
  transform: none;
}

.btn-o {
  background: transparent;
  color: var(--encre);
  border: 1px solid var(--brume);
  box-shadow: none;
}

.btn-o:hover {
  background: #fff;
  border-color: var(--encre);
  transform: none;
}

.nav-cta {
  background: var(--encre) !important;
  font-weight: 600 !important;
  padding: .6rem 1.35rem;
}

.nav-cta:hover {
  background: var(--red) !important;
}

/* ── Les cartes ─────────────────────────────────────────────────────
   Grand rayon, bordure de brume, aucune ombre. Une ombre sert à
   détacher une carte d'un fond blanc ; sur un fond teinté, le blanc de
   la carte suffit, et l'ombre ne fait plus que salir le bord. */
.card {
  background: #fff;
  border: 1px solid var(--brume);
  border-radius: var(--r-lg);
  box-shadow: none;
  padding: 1.9rem;
  transition: border-color .18s ease;
}

.card:hover {
  border-color: color-mix(in srgb, var(--encre) 28%, transparent);
  transform: none;
  box-shadow: none;
}

.card-icon {
  border-radius: 14px;
}

/* ── Les chiffres ───────────────────────────────────────────────────
   230, 337, 743 : c'est l'argument, et il était écrit à la taille du
   reste. Sora très serrée les rend lisibles avant la phrase qui les
   explique. */
.stat,
.hkpi {
  background: #fff;
  border: 1px solid var(--brume);
  border-radius: var(--r);
  box-shadow: none;
}

.stat-n,
.hkpi-n {
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--encre);
}

.stat-n em,
.hkpi-n em {
  /*  Un astérisque de 2 rem. Sur la bande alternée, mesuré 4,62 — il
      passerait même en petit texte, mais c'est du grand : 3:1 exigé. */
  color: var(--red-vif);
}

/*  Le fond est déclaré plus bas, avec #sommaire : les deux bandes
    doivent garder la même teinte, et une seule ligne l'y dit. */
.stats-bar {
  border-top: 0;
  border-bottom: 0;
  padding: 4rem 2rem;
}

/* ── Le rythme ──────────────────────────────────────────────────────
   Toutes les sections respiraient pareil et la page se lisait comme un
   seul bloc. L'espace est ce qui sépare une page dense d'une page
   encombrée : le contenu ne change pas, la fatigue de lecture oui. */
.section {
  padding: 7rem 2rem;
}

/*  CE BLOC NE TOUCHE QUE L'ESPACE, ET C'EST VOULU

    « .hero { background } » avait été essayé : sans condition, il
    écrasait le héros de support.html, volontairement un dégradé sombre,
    dont le paragraphe en #a8b4cc retombait à 1,79:1 sur fond clair.
    axe-core l'a vu. Une règle large qui traverse 44 pages casse
    toujours quelque chose quelque part.

    Le fond blanc rend la question sans objet : chaque page garde le
    héros qu'elle s'est donné, et celui de l'accueil est déjà blanc. */
.hero {
  padding: 6rem 2rem 5rem;
}

/* ── L'AIR, REPRIS SUR TÉLÉPHONE ────────────────────────────────────
   Mesuré, et c'est une régression que j'avais introduite : sur un
   écran de 390 × 844, mes deux règles ci-dessus faisaient passer le
   rembourrage du héros de 41,6 / 38,4 px à 96 / 80, et celui des
   24 sections à 112 px en haut comme en bas — soit 224 px de vide
   entre deux sections consécutives.

   Sur grand écran, cet air est ce qui sépare une page dense d'une page
   encombrée. Sur un téléphone, c'est du défilement en pur perte : le
   lecteur ne voit pas deux sections à la fois, l'air ne sépare donc
   plus rien, il éloigne seulement.

   Le rembourrage horizontal ne bouge pas : il tient la gouttière, et
   le h1 mesure déjà 326 px dans les 390. */
@media (max-width: 640px) {
  .hero {
    padding-top: 2.75rem;
    padding-bottom: 2.5rem;
  }

  .section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/*  La bande des chiffres rompt le blanc : sur fond blanc, un bloc
    blanc sur blanc ne se détache plus. Le sommaire prend la même
    teinte, mais dans SON bloc, plus bas — groupé ici, la déclaration
    était morte : « #sommaire { background } » y vient après, à
    spécificité égale, et l'emportait. */
.stats-bar {
  background: var(--gray);
}

.hero-sub {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 60ch;
  color: var(--text2);
}

.sh p {
  color: var(--text2);
}

/* ── La barre de navigation ─────────────────────────────────────────
   Un liseré et une ombre faisaient deux séparations pour une seule
   frontière. Le flou suffit, et laisse voir que la page défile dessous. */
nav {
  background: color-mix(in srgb, var(--os) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--brume);
  box-shadow: none;
}

.nav-brand {
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--encre);
}

/* ── Les sections sombres ───────────────────────────────────────────
   Elles existaient déjà et tiraient sur le bleu marine. Elles passent
   au noir de la palette : sur fond blanc, le contraste d'une bande
   sombre porte mieux l'argument qu'un marine délavé, et le même noir
   sert déjà au texte. Leur contenu ne change pas. */
#cancer-france {
  background: linear-gradient(160deg, #16181b 0%, #0d0e10 100%);
}

#film-presentation {
  background: linear-gradient(160deg, #16181b 0%, #0d0e10 100%);
}

/* ── Les champs ─────────────────────────────────────────────────────
   Même rayon que les cartes : un formulaire qui ne ressemble pas au
   reste de la page a l'air collé depuis ailleurs. */
input,
select,
textarea {
  border-radius: var(--r-sm);
  border-color: var(--brume);
  font-family: inherit;
  font-size: 1rem;
}

/* ── La prise de focus ──────────────────────────────────────────────
   Un anneau visible sur tout ce qui se parcourt au clavier. Le contour
   par défaut varie d'un navigateur à l'autre et disparaît sur fond
   sombre. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── Ce que l'on retire à qui le demande ────────────────────────────
   Rien de ce qui précède n'est nécessaire à la lecture. */
@media (prefers-reduced-motion: reduce) {
  .btn-p,
  .btn-o,
  .card,
  .toc-link {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   LES DEUX BLOCS QUI ALOURDISSAIENT ENCORE L'ACCUEIL

   Ils ne sont que sur index.html. Les deux se règlent ici, en CSS :
   pas une ligne de balisage touchée, donc pas un lien interne perdu ni
   un mot de la mention réglementaire modifié.
   ════════════════════════════════════════════════════════════════════ */

/* ── Le bandeau pédagogique ─────────────────────────────────────────
   CE QUI N'A PAS CHANGÉ : le texte, au mot près. C'est la mention qui
   situe OncoIDE hors du champ du règlement (UE) 2017/745 ; elle n'est
   pas négociable et elle reste intégralement lisible.

   CE QUI CHANGE : la façon dont elle le dit. Elle était en rouge gras
   sur rose, pleine largeur, entre deux filets rouges de 3 px — le
   graphisme d'une alerte. Or ce n'est pas une alerte : c'est une
   précision de cadre, et elle est à l'avantage du produit. Criée, elle
   se lit comme un avertissement de danger ; posée, elle se lit comme
   la rigueur de l'éditeur.

   Le rouge est d'ailleurs déjà pris : dans l'application, il signale
   les urgences. Lui faire dire deux choses l'affaiblit.

   Reste un filet rouge à gauche — le signal de marque, sans le cri. */
.ped-banner {
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  padding: 2.5rem 2rem;
  text-align: left;
}

.ped-banner p {
  max-width: 880px;
  margin: 0 auto;
  background: var(--white);
  /*  Le liseré est arrivé avec le fond blanc. Sur l'os, la carte
      blanche se détachait toute seule ; sur blanc, une carte blanche à
      l'ombre de 4 % ne se voyait plus — il ne restait que le filet
      rouge, et le bloc se lisait comme du texte courant.
      Le filet rouge est redéclaré après, sinon « border » l'écrase. */
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: var(--r-sm);
  box-shadow: var(--ombre-1);
  /*  Le pictogramme est une image de fond, jamais un ::before : le
      contenu CSS est annoncé par certains lecteurs d'écran, et la
      phrase commencerait par la description d'un bouclier. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8413B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 1.5rem 1.35rem;
  background-size: 22px 22px;
  padding: 1.35rem 1.75rem 1.35rem 3.75rem;
  /*  #0d0e10 sur blanc : 19,31:1. Le rouge gras, lui, tombait à 6,53
      et fatiguait sur quatre lignes. */
  color: var(--text);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.6;
}

.ped-banner p strong {
  color: var(--navy);
  font-weight: 750;
}

@media (max-width: 640px) {
  .ped-banner {
    padding: 1.75rem 1.2rem;
  }

  .ped-banner p {
    background-position: 1.1rem 1.15rem;
    padding: 1.15rem 1.2rem 1.15rem 3.1rem;
  }
}

/* ── La table des matières ──────────────────────────────────────────
   Vingt-cinq liens rangés en quatre colonnes de petits caractères :
   cela ne se lit pas, cela se survole, et l'œil y voit un plan de site
   collé en haut de page plutôt qu'un sommaire.

   LES VINGT-CINQ LIENS RESTENT, TOUS. Aucun n'est retiré, replié ni
   masqué : ce sont des liens internes que l'indexation suit et que
   scripts/verifier-seo.mjs vérifie un par un. Seule leur forme change
   — des pastilles qui s'enchaînent au fil du texte au lieu d'une
   grille rigide. Le bloc se lit comme une barre de navigation, tient
   en moins de hauteur, et se replie tout seul sur téléphone là où
   quatre colonnes devenaient une longue colonne unique. */
#sommaire {
  /*  La teinte alternée, comme la bande des chiffres : c'est ce qui
      sépare le sommaire du corps de la page maintenant que le fond est
      blanc. Les filets seuls ne suffisaient pas. */
  background: var(--gray);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2.75rem 2rem;
}

.toc-title {
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--text3);
  margin-bottom: 1.15rem;
}

.toc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.toc-link {
  background: var(--white);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: .48rem 1.05rem;
  font-size: .845rem;
  line-height: 1.3;
  /*  #5a5b54 sur le blanc de la pastille : 6,86:1. */
  color: var(--text2);
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}

.toc-link:hover {
  /*  #C8413B sur blanc : 4,91:1 — au-dessus du seuil AA. */
  color: var(--red);
  border-color: rgba(200, 65, 59, .45);
  border-bottom-color: rgba(200, 65, 59, .45);
  background: var(--white);
  box-shadow: var(--ombre-1);
}

@media (max-width: 640px) {
  #sommaire {
    padding: 2rem 1.2rem;
  }

  .toc-grid {
    gap: .4rem;
  }

  /*  Mesuré à 390 px : à .845 rem et 1,05 rem de marge intérieure, une
      seule pastille tenait par ligne et le sommaire passait de 700 à
      1 037 px — plus haut qu'un écran entier, pour un bloc qu'on
      survole. Resserré, il en tient deux et la hauteur retombe. */
  .toc-link {
    font-size: .765rem;
    padding: .38rem .7rem;
  }
}

/* ── Le film de présentation ────────────────────────────────────────
   UNE BANDE SOMBRE, ET CE N'EST PAS DE LA DÉCORATION

   Une vidéo posée sur un fond clair garde ses bords visibles : l'œil
   voit un rectangle collé sur la page. Sur un fond sombre, l'image
   déborde de son cadre et c'est elle qu'on regarde — c'est la raison
   pour laquelle une salle de cinéma est noire.

   Elle rompt aussi la suite de blancs et de blancs cassés au tiers de
   la page, là où la lecture commence à s'émousser. #cancer-france fait
   déjà ce travail plus bas, avec le même dégradé et le même liseré
   rouge : la page parle une seule langue.

   Le fichier ne se charge QU'AU CLIC (preload="none" dans le balisage,
   déjà l'usage de la maison) : les 2,7 Mo ne coûtent rien à l'affichage
   de la page. */
#film-presentation {
  background: linear-gradient(160deg, var(--navy) 0%, #16233b 100%);
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}

#film-presentation::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--red);
}

/*  Blanc sur #0A121F : 18,76:1. Le sous-titre à 72 % d'opacité reste à
    11,4:1 — très au-dessus du seuil AA. Le site a déjà payé une fois
    pour du blanc à 18 % sur ce même marine : c'était l'un des deux
    manquements qui rendaient illisible l'avertissement du pied de page. */
#film-presentation .sh h2 {
  color: #fff;
}

#film-presentation .sh p {
  color: rgba(255, 255, 255, .72);
  max-width: 620px;
}

.film-wrap {
  max-width: 940px;
  margin: 2.5rem auto 0;
}

.film-wrap video {
  width: 100%;
  display: block;
  border-radius: var(--r);
  background: #000;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.film-wrap figcaption {
  margin-top: 1.15rem;
  text-align: center;
  font-size: .82rem;
  line-height: 1.6;
  /*  7,1:1 sur le marine. */
  color: rgba(255, 255, 255, .66);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.film-wrap figcaption strong {
  color: rgba(255, 255, 255, .95);
}

@media (max-width: 640px) {
  #film-presentation {
    padding: 3.25rem 1.2rem;
  }

  .film-wrap {
    margin-top: 1.75rem;
  }
}

/* ── UN SECOND ROUGE, POUR LES FONDS SOMBRES ────────────────────────
   Le blanc a supprimé le besoin d'un rouge foncé pour écrire ; il ne
   supprime pas celui-ci. Sur le noir du pied de page #16181b, mesuré :
   #a8352f tombe à 2,72, et le rouge de marque #C8413B lui-même à 3,62
   — sous le seuil AA de 4,5. axe-core l'a relevé sur le « IDE » de la
   marque, en bas de deux pages.

   Un système de couleurs sérieux porte toujours deux versions d'un
   accent : une pour les fonds clairs, une pour les fonds sombres. Il en
   manquait une.

   #e5555d sur #16181b : 4,90 — et c'est le même rouge, éclairci. */
:root {
  --red-sur-sombre: #e5555d;
}

footer .ft-brand-name em,
#cancer-france em,
#film-presentation em {
  color: var(--red-sur-sombre);
}

/* ── LES TABLEAUX LARGES, SUR TÉLÉPHONE ─────────────────────────────
   CE QUI SE PASSAIT

   Huit pages débordaient horizontalement à 390 px — toute la page
   partait en défilement latéral à cause d'un tableau de trois ou quatre
   colonnes. Mesuré : 560 px de contenu dans 390 px de fenêtre sur la
   pire. Défaut antérieur à la refonte visuelle : les mêmes huit pages
   débordaient des mêmes montants avec design.css entièrement retiré.

   CE QU'ON N'A PAS FAIT, ET POURQUOI

   « table { display: block; overflow-x: auto } » tient en une ligne et
   ne touche aucun fichier HTML. Il détruit la sémantique de tableau :
   un lecteur d'écran n'annonce plus ni lignes ni colonnes, et les
   en-têtes ne se rattachent plus aux cellules. Inacceptable sur un site
   qui publie une déclaration d'accessibilité.

   LE MOTIF RETENU EXISTAIT DÉJÀ DANS LE DÉPÔT

   statut.html, dsi.html, sla.html et quatre autres pages du centre de
   confiance enveloppent leurs tableaux depuis longtemps :

     <div class="tc-table" role="region" tabindex="0" aria-label="…">

   Le tableau reste un tableau ; c'est l'enveloppe qui défile. Le
   tabindex n'est pas décoratif : sans lui, une personne sans souris ne
   peut pas atteindre les colonnes de droite (WCAG 2.1.1).

   Ce qui manquait, c'est que la règle ne vivait que dans le <style> des
   pages du centre de confiance. Les 31 tableaux des 22 autres pages ont
   reçu l'enveloppe ; la règle vient ici pour qu'elle serve partout.

   Mesuré sur les pages qui l'employaient déjà : tableau de 900 px dans
   une enveloppe de 358, scrollWidth de la page inchangé à 390. */
.tc-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*  Le liseré de focus doit se voir : c'est la seule indication qu'une
    personne au clavier a bien atteint la région défilante. */
.tc-table:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ── LA NAVIGATION DE LA MAQUETTE N'EST PAS CELLE DU SITE ────────────
   index.html style sa barre de navigation par un sélecteur d'élément
   nu : « nav { display:flex; justify-content:space-between } ». Il
   frappe aussi le <nav class="app-nav"> de la maquette de
   l'application, qui ne redéclare ni l'un ni l'autre.

   Tant que le panneau était court, les six entrées se tassaient et
   personne ne le voyait. Dès que l'accueil de la maquette a été remis à
   jour sur l'application réelle — donc plus haut — les entrées se sont
   réparties sur 577 px : Accueil tout en haut, Profil tout en bas,
   107 px entre chacune. Une barre latérale d'application ne se présente
   pas comme ça.

   Le défaut est antérieur ; il était seulement invisible. */
.app-nav {
  justify-content: flex-start;
}