/* ============================================================
   DCP : LA feuille de style du site, et la seule
   ------------------------------------------------------------
   Regle du depot (7 octobre 2026) : le site n'a qu'UN fichier CSS. Il y en
   avait vingt, un par page ou presque, et chaque page y avait refait ses
   propres choix de largeur, d'alignement et de titres : le site paraissait
   monte par morceaux. Toutes les pages chargent ce fichier, et lui seul.

   Ne pas creer d'autre feuille, ne pas declarer de « css: » dans le front
   matter d'une page. Un ajout se range dans la partie qui convient :

   1. SOCLE : commun a toutes les pages, et seul a definir la mise en page
      - Polices du site, hebergees dans le depot
      - Couleurs et themes clair et sombre
      - Base, mise en page commune, le fil, composants partages
      - En-tete et menu
      - Pied de page
   2. COMPOSANTS : blocs reutilises par plusieurs pages
      - Ossature des pages internes : entete, sections, encarts, texte
      - Feuille de route
      - Chassis des outils de parcours
      - Schemas animes (resume, services, contribuer)
      - Visionneuse de la documentation
   3. PAGES : ce qui n'existe que sur une page ; ne redefinit jamais le socle
      - Participer : principes et socle juridique
      - Participer
      - Ressources
      - Utiliser le DCP
      - Simulateur et cas d'usage
      - Utiliser : situations
      - FAQ
      - Contact
      - Actus
      - Outil du modele
      - Accueil

   La mise en page (cadre, alignement, titres, le fil) vit dans le socle et
   nulle part ailleurs. La partie 3 n'y touche pas : elle ajoute au plus une
   marge propre a sa page. scripts/verifier-gabarit.js le controle, et le
   build Docker echoue s'il trouve un ecart.
   ============================================================ */

/* ######################################################################
   1. SOCLE : commun a toutes les pages, et seul a definir la mise en page
   ###################################################################### */

/* ============================================================
   Polices du site, hebergees dans le depot
   ============================================================ */

/* Polices du site, hebergees ici (licence SIL Open Font License).
   Elles venaient de Google Fonts, qui recevait l'adresse IP de chaque
   visiteur, y compris sur les sites tiers qui embarquent nos animations.
   Genere une fois depuis l'API Google Fonts ; sous-ensembles latin et
   latin-ext seulement. */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexSans-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexSans-400-italic-latin.woff2') format('woff2');
  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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexSans-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexSans-variable-latin.woff2') format('woff2');
  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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexSans-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexSans-variable-latin.woff2') format('woff2');
  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: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/SourceSerifPro-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/SourceSerifPro-400-latin.woff2') format('woff2');
  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: 'Source Serif Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/SourceSerifPro-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/SourceSerifPro-700-latin.woff2') format('woff2');
  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;
}

/* ============================================================
   Couleurs et themes clair et sombre
   ============================================================ */

/* ============================================================
   DCP — Variables de thème
   Bascule via data-theme="clair" | data-theme="sombre" sur <html>
   ============================================================ */

:root,
[data-theme="clair"] {
  --bg:               #FBFAF6;
  --surface:          #F4F1EA;
  --surface-alt:      #ECEAE1;
  --text-primary:     #0F1F33;
  --text-secondary:   #4A5568;
  --border:           #D8D4C8;
  --accent-gold:      #BF9100;
  /* Lien du bandeau : le bandeau prend la couleur du texte, donc il est
     sombre ici et clair en theme sombre. Or vif sur marine : 5,8:1. */
  --banniere-lien:    #BF9100;
  /* Anneau de focus clavier. L'or vif ne faisait que 2,77:1 sur le fond
     clair, sous les 3:1 d'un indicateur (WCAG 1.4.11, audit du
     7 octobre 2026). Or fonce : 4,08:1 au pire, sur le fond d'un bloc. */
  --focus:            #8C6A00;
  /* Or de texte, distinct de l'or de marque : celui-ci sert aux petits
     libelles, souvent en capitales a 11px, et doit tenir le 4.5:1 sur les
     trois fonds clairs. #966E0A n'y arrivait sur aucun (4.44/4.11/3.84). */
  --accent-gold-text: #856009;
  --accent-blue:      #7FA8C9;
  --accent-blue-light:#CFE0EC;
  --status-ok-bg:     #E7F0E9;
  /* Le vert sert aussi de texte (« Demain, avec le DCP », la reponse du
     protocole dans le hero). #4C7A5C ne passait que sur le fond de page,
     et tombait a 4.10 des qu'il etait pose sur une carte. */
  --status-ok-text:   #457055;
  --status-err-bg:    #F7E6E3;
  --status-err-text:  #B23A2E;
  /* Blocs inverses : ceux dont le fond est --text-primary. Comme ce fond
     bascule du marine au papier selon le theme, leur texte ne peut pas
     reutiliser les jetons courants, qui basculent dans le meme sens et
     deviendraient illisibles. En clair, le bloc est marine. */
  --sur-inverse:      #FBFAF6;
  --sur-inverse-doux: #CFE0EC;
  --sur-inverse-lien: #BF9100;
  /* Teintes de vendeur, pour les schemas animes : cinq paires fond pale
     et accent, une par vendeur. Volontairement eloignees du rouge (sans
     le DCP) et du vert (avec), et peu saturees : elles disent « un autre
     vendeur », pas « bien » ni « mal ». Les teintes se suivent en
     alternant les familles (indigo 241°, ambre 30°, ardoise 211°, mauve
     292°, sarcelle 178°) pour que deux vendeurs consecutifs se distinguent
     au premier coup d'oeil : l'ardoise venait juste apres l'indigo et
     l'ecart ne se voyait pas. Indigo : 5.01:1 icone sur fond, 8.52:1
     libelle sur zone a 35 % ; ambre : 4.69:1 et 8.60:1. */
  --vendeur-1-fond:   #E8E6F2;
  --vendeur-1-accent: #5B5A9E;
  --vendeur-2-fond:   #F6E8D3;
  --vendeur-2-accent: #96581A;
  --vendeur-3-fond:   #E3EAF2;
  --vendeur-3-accent: #4A6A8C;
  --vendeur-4-fond:   #EBE3EF;
  --vendeur-4-accent: #7A5580;
  --vendeur-5-fond:   #DDEDEC;
  --vendeur-5-accent: #3F7A78;

  --shadow:           0 2px 8px rgba(15, 31, 51, 0.10);
  --shadow-header:    0 1px 4px rgba(15, 31, 51, 0.12);
  --logo-src:         url('/images/logo_light_trans.png');
  --signature-src:    url('/images/signature_navy.png');
}

[data-theme="sombre"] {
  --bg:               #0F1F33;
  --surface:          #1B3A5C;
  --surface-alt:      #152E4A;
  --text-primary:     #F4F1EA;
  --text-secondary:   #A8B8C8;
  --border:           #2A4A6A;
  --accent-gold:      #BF9100;
  /* Bandeau clair en theme sombre : l'or vif n'y faisait que 2,56:1
     (audit d'accessibilite du 7 octobre 2026). Or fonce : 5,5:1. */
  --banniere-lien:    #7A5800;
  /* L'or vif tient sur marine : 4,02:1 au pire, sur --surface. */
  --focus:            #BF9100;
  /* Meme raison en sombre, en sens inverse : l'or de marque tombait a
     4.02 sur le fond teinte, celui des cartes de renversement. */
  --accent-gold-text: #D2A517;
  --accent-blue:      #7FA8C9;
  --accent-blue-light:#CFE0EC;
  --status-ok-bg:     #1A3D26;
  --status-ok-text:   #7EC89A;
  --status-err-bg:    #3D1A18;
  --status-err-text:  #E88880;
  /* En sombre, le bloc inverse est papier : son texte redevient sombre. */
  --sur-inverse:      #0F1F33;
  --sur-inverse-doux: #3E4C5E;
  --sur-inverse-lien: #7A5A08;
  /* Memes vendeurs en sombre : fond fonce, accent eclairci. */
  --vendeur-1-fond:   #28284A;
  --vendeur-1-accent: #A9A8DC;
  --vendeur-2-fond:   #3E2C14;
  --vendeur-2-accent: #E0A868;
  --vendeur-3-fond:   #1E3350;
  --vendeur-3-accent: #8FB0D0;
  --vendeur-4-fond:   #33253A;
  --vendeur-4-accent: #B892C0;
  --vendeur-5-fond:   #1F3A39;
  --vendeur-5-accent: #7FBFBB;

  --shadow:           0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-header:    0 1px 4px rgba(0, 0, 0, 0.40);
  --logo-src:         url('/images/logo_night_trans.png');
  --signature-src:    url('/images/signature_paper.png');
}

/* ------------------------------------------------------------
   Avant / sans le DCP, contre avec le DCP

   Regle d'ensemble du site : tout ce qui montre la situation AVANT ou SANS
   le protocole se pose sur un rouge leger ; tout ce qui montre la situation
   AVEC lui se pose sur du vert. Chaque couleur vient en deux intensites, le
   fond tres pale et l'accent soutenu (bord, libelle, marqueur) : c'est cette
   gradation qui porte la lecture, pas une couleur pleine.

   Alias volontaires : une seule source de verite reste la famille
   --status-*, deja calibree en contraste dans les deux themes. Les declarer
   apres les deux blocs suffit, var() resolvant la valeur du theme actif.

   S'en servir partout ou le site oppose les deux etats : la comparaison de
   Cas d'usage, les apercus de l'accueil, les cartes de renversement. Ne PAS
   s'en servir pour la colonne des apports, qui porte deja le rouge des
   irregularites et le bleu des eclairages : la couleur y dit la nature de
   ce qui est trouve, pas la presence du protocole.
   ------------------------------------------------------------ */
:root {
  --sans-dcp-fond:   var(--status-err-bg);
  --sans-dcp-accent: var(--status-err-text);
  --avec-dcp-fond:   var(--status-ok-bg);
  --avec-dcp-accent: var(--status-ok-text);
}

/* ============================================================
   Base, mise en page commune, le fil, composants partages
   ============================================================ */

/* ============================================================
   DCP — Reset et styles de base
   ============================================================ */

/* Gabarit commun a TOUTES les pages (decision du 7 octobre 2026).
   Avant, chaque page avait le sien : cadre de 1200 px ici, 1080 sur
   Contact, 820 sur la FAQ, 760 sur les pages de texte, 1600 sur les
   outils, et le titre de page commencait a six endroits differents selon
   la page. Desormais :
   - --largeur-contenu : le cadre de toutes les pages, le meme que celui de
     l'en-tete. Rien ne le depasse, rien n'en choisit un autre ;
   - tout part du bord gauche de ce cadre, aligne sur le logo ;
   - --laisse-texte : la longueur de ligne lisible des textes courants. Un
     bloc de texte s'arrete la, mais il commence au bord gauche du cadre,
     il n'est plus recentre. Les grilles de cartes et les cadres d'outils
     prennent toute la largeur.
   --retrait-laisse vaut 0 : c'etait le decalage qui recentrait la laisse
   dans le cadre. Garde comme variable pour que le choix reste en un seul
   endroit, et ne jamais le remettre en dur dans une feuille de page. */
:root {
  /* 1000 px : 1200 donnait, sur un ecran courant (1920 px), des cartes
     etirees sur 1136 px a cote d'un texte borne a 680, un contenu etale. */
  --largeur-contenu: 1000px;
  --laisse-texte: 680px;
  --retrait-laisse: 0px;
  /* Marge interieure du cadre, la meme pour .container et .outil-conteneur,
     et la position du fil dans cette marge (voir « Le fil »). */
  --marge-cadre: 1.5rem;
  --retrait-fil: 0.75rem;
}

@media (min-width: 768px) {
  :root {
    --marge-cadre: 2rem;
    --retrait-fil: 1rem;
  }
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  transition: background-color 200ms ease, color 200ms ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

/* Lien d'evitement (base.html) : hors ecran tant qu'il n'a pas le focus,
   puis pose en haut a gauche, au-dessus du bandeau et de l'en-tete. */
.lien-evitement {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 1000;
  padding: 0.625rem 1rem;
  border-radius: 6px;
  background-color: var(--text-primary);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}

.lien-evitement:focus {
  top: 0.75rem;
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

main {
  flex: 1;
}

/* Typographie */

h1, h2, h3, h4 {
  font-family: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent-gold-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

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

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

/* Utilitaires */

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

/* ============================================================
   MISE EN PAGE COMMUNE : la seule source pour tout le site
   ------------------------------------------------------------
   Cadre, alignement, surtitre, titre et introduction de section vivent
   ICI et nulle part ailleurs. Une feuille de page ne redefinit pas ces
   elements : elle ajoute au plus un ecart de marge qui lui est propre.

   Regle d'alignement (7 octobre 2026) : TOUT EST ALIGNE A GAUCHE, sur le
   bord du cadre commun, accueil compris. L'accueil centrait ses titres,
   ses intros et une demi-douzaine de blocs pendant que les pages internes
   alignaient a gauche : le site paraissait monte par morceaux.

   Le centrage n'est admis que dans ces cas, et chaque regle qui centre
   porte sur sa ligne le commentaire « centrage autorise : <raison> » :
   - le cadre lui-meme, centre dans la fenetre (.container ci-dessous) ;
   - le bandeau d'information et l'en-tete de l'accueil avant defilement ;
   - un etat vide (rien a afficher, aucun resultat) ;
   - un bouton ou un lien d'action seul sous des boutons empiles ;
   - un schema dans sa version embarquee chez un tiers (iframe).
   scripts/verifier-gabarit.js refuse tout autre centrage, et le build
   Docker echoue s'il en trouve un.
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--largeur-contenu);
  margin-inline: auto; /* centrage autorise : le cadre se centre dans la fenetre */
  padding-inline: var(--marge-cadre);
}

/* Le surtitre dore au-dessus d'un titre : une seule definition pour les
   trois noms qu'il porte selon la page. Chaque feuille ne regle que sa
   marge basse. */
.page-eyebrow,
.outil-eyebrow,
.hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
}

/* Titre et introduction de section, les memes sur toutes les pages.
   L'accueil avait les siens (.section-title, centres, plus grands) :
   meme role, autre nom, autre style. */
.section-titre {
  font-size: clamp(1.375rem, 2.75vw, 1.875rem);
  margin-bottom: 0.75rem;
}

.section-intro {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: var(--laisse-texte);
  margin-bottom: 2rem;
}

/* Meme raison que pour .hero-lead et .point-texte : sur un gris deja
   attenue, le gras seul passe inapercu, et ce qu'on met en avant doit se
   voir. */
.section-intro strong { color: var(--text-primary); }

/* ============================================================
   LE FIL : la signature visuelle du site
   ------------------------------------------------------------
   Direction artistique (7 octobre 2026) : « le contrat cousu main ».
   Le site parle de fil et de noeud (« Tisser la confiance numerique »,
   « Voila le fil », le noeud du logo) : on le montre. Un fil dore court
   dans la marge gauche de chaque page, le long du bord ou tout est aligne,
   et chaque titre de page ou de section y est noue comme une perle. Le
   regard descend la page en suivant le fil, de noeud en noeud.

   Decoratif seulement : pseudo-elements, aucun texte, rien pour les
   lecteurs d'ecran. Absent des blocs embarques chez un tiers (body.nu),
   ou il n'aurait pas de page a parcourir.
   ============================================================ */

:root {
  --fil: color-mix(in srgb, var(--accent-gold) 50%, transparent);
}

body:not(.nu) main {
  position: relative;
}

/* Le fil lui-meme : dans la marge du cadre, a --retrait-fil de son bord.
   Il apparait et s'efface en degrade aux deux bouts, comme un fil qui
   entre dans le tissu et en ressort. */
body:not(.nu) main::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(max(0px, (100% - var(--largeur-contenu)) / 2) + var(--retrait-fil));
  width: 1.5px;
  background: linear-gradient(to bottom,
    transparent 0, var(--fil) 8rem, var(--fil) calc(100% - 8rem), transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Le noeud de chaque titre : une perle sur le fil, a hauteur de la premiere
   ligne. Positionnee depuis le bord du texte : marge du cadre moins
   retrait du fil, moins la moitie de la perle. */
body:not(.nu) main :is(.hero-title, .page-titre, .outil-titre, .section-titre) {
  position: relative;
}

body:not(.nu) main :is(.hero-title, .page-titre, .outil-titre, .section-titre)::before {
  content: '';
  position: absolute;
  left: calc(var(--retrait-fil) - var(--marge-cadre) - 6px);
  top: 0.5em;
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent-gold);
  border-radius: 50%;
  background-color: var(--bg);
  transform: translateY(-50%);
  z-index: 2;
}

/* Le grain du papier : un bruit tres leger pose sur toute la page, pour
   que le fond ait la matiere d'une feuille et pas l'aplat d'un ecran.
   Sous forme de SVG en data: (admis par la CSP, aucune ressource tierce).
   Assez faible pour ne pas toucher aux contrastes ; retire quand le
   visiteur demande plus de contraste. */
body:not(.nu)::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

[data-theme="sombre"] body:not(.nu)::after {
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@media (prefers-contrast: more) {
  body:not(.nu)::after { display: none; }
}

/* Les liens du texte sont cousus, eux aussi : un fil dore sous le mot,
   qui s'epaissit au survol. */
main :is(p, li, dd) a:not(.btn) {
  text-decoration-color: var(--fil);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness 150ms ease, text-decoration-color 150ms ease;
}

main :is(p, li, dd) a:not(.btn):hover {
  text-decoration-color: var(--accent-gold);
  text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
  main :is(p, li, dd) a:not(.btn) { transition: none; }
}

/* Bouton générique */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

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

.btn-primary {
  background-color: var(--accent-gold);
  color: #0F1F33;
}

.btn-primary:hover {
  background-color: #a87e00;
  color: #0F1F33;
}

.btn-outline {
  background-color: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border);
}

.btn-outline:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold-text);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* Indicateur de depliage, un seul pour tout le site
   -------------------------------------------------
   Tout <summary> du site recoit ici le meme repere : un chevron dessine,
   a DROITE, pointe vers le bas, qui pivote vers le haut une fois ouvert.
   Il remplace sept implementations d'un petit triangle « ▸ » pose a
   gauche, que rien ne distinguait d'une puce de liste : on ne voyait pas
   qu'une ligne se depliait. A droite et vers le bas, c'est le repere que
   chacun connait sur telephone.

   La ligne entiere est la cible (44 px de haut au moins, au-dela des
   24 px que demande WCAG 2.2 pour une cible tactile). Le <details>
   natif reste : clavier et etat « reduit / developpe » annonce aux
   lecteurs d'ecran sont acquis sans JavaScript.

   ⛔ Ne pas reintroduire de chevron propre a une page : une famille de
   depliants ne regle ici que sa taille et ses marges, jamais son repere.
   Un contenu court et essentiel se donne dans l'intitule, pas dans le
   volet : les trois racines de l'accueil portent leur argument entier
   dans leur ligne visible, et ne replient que le paragraphe qui
   l'explique. */

details > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker { display: none; }

/* Un « v » dessine par deux bordures : il suit la couleur du texte de
   l'accent (contraste d'un composant d'interface, 3:1 au moins) et ne
   depend d'aucune police pour exister. */
details > summary::after {
  content: '';
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  margin-right: 0.25rem;
  border-right: 2px solid var(--accent-gold-text);
  border-bottom: 2px solid var(--accent-gold-text);
  transform: translateY(-25%) rotate(45deg);
  transition: transform 180ms ease;
}

details[open] > summary::after {
  transform: translateY(25%) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
  details > summary::after { transition: none; }
}

/* Bloc depliable partage
   ----------------------
   Un <li class="depliant-item"> contenant un <details>. Vit ici, et non
   dans une feuille de page, parce qu'il sert sur plusieurs pages : toute
   page charge base.css, alors qu'aucune ne charge la feuille d'une autre.
   Une page qui a besoin d'un ecart ajoute sa propre regle apres. */

.depliant-item + .depliant-item {
  border-top: 1px solid var(--border);
}

.depliant-item summary {
  padding: 0.625rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.45;
}

.depliant-item summary:hover { color: var(--accent-gold-text); }

.depliant-item summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.depliant-item p {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* --- Le resume anime, embarque depuis /resume/embarque/ ------------------ */

/* Une iframe pleine largeur, sans bord ; sa hauteur est donnee par la page
   embarquee (schema-embarque.js), la valeur ici n'est que le depart. Vit
   ici parce que Decouvrir et Cas d'usage l'embarquent tous deux. */
.resume-cadre {
  display: block;
  width: 100%;
  min-height: 640px;
  border: 0;
  margin-top: 1.25rem;
  color-scheme: light dark;
}

/* --- Le bloc de recrutement, partage (_includes/recrutement.html) -------- */

/* Ses boutons tiennent la laisse comme le titre et l'intro au-dessus.
   Vit ici, et non dans la feuille d'une page, parce que le bloc sert
   partout ou l'on appelle des testeurs. */
.recrutement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
  margin-left: var(--retrait-laisse);
}

@media (max-width: 767px) {
  .recrutement-actions { flex-direction: column; align-items: stretch; }
  .recrutement-actions .btn { justify-content: center; }
}

/* ============================================================
   En-tete et menu
   ============================================================ */

/* ============================================================
   DCP — En-tête
   ============================================================ */

/* Bandeau GitHub */

.site-banner {
  background-color: var(--text-primary);
  color: var(--bg);
  font-size: 0.875rem;
  /* A droite, la place de la croix de fermeture, posee en absolu : sans
     elle, le texte passait dessous sur un ecran etroit. */
  padding: 0.5rem 3rem 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
  z-index: 200;
  transition: padding 200ms ease, font-size 200ms ease;
}

.site-banner.is-hidden { display: none; }

.banner-text { text-align: center; } /* centrage autorise : bandeau d'information */

.banner-link {
  color: var(--banniere-lien);
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.5rem;
}

.banner-link:hover { text-decoration: underline; }

.banner-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
  opacity: 0.7;
}

.banner-close:hover { opacity: 1; }
.banner-close:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* En-tête principal */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--bg);
  box-shadow: none;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}

.site-header[data-scrolled="true"] {
  box-shadow: var(--shadow-header);
}

/* Mode accueil : grand panneau centré */

/* top suit le bas du bandeau tant qu'il est a l'ecran : header.js mesure
   et pose --bandeau-decalage. Colle a 0, l'en-tete passait sous le
   bandeau, qui en masquait le logo. */
body[data-page="accueil"] .site-header {
  position: fixed;
  width: 100%;
  background-color: transparent;
  top: var(--bandeau-decalage, 0px);
}

body[data-page="accueil"] .site-header[data-scrolled="false"] .site-banner {
  /* Le bandeau est au-dessus du header en position fixed — géré via JS */
}

body[data-page="accueil"] .site-header[data-scrolled="false"] {
  background-color: transparent;
  box-shadow: none;
}

body[data-page="accueil"] .site-header[data-scrolled="true"] {
  background-color: var(--bg);
  box-shadow: var(--shadow-header);
}

/* Intérieur du header */

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.875rem;
  position: relative;
}

/* Mode accueil non scrollé : centrer verticalement */

body[data-page="accueil"] .site-header[data-scrolled="false"] .header-inner {
  flex-direction: column;
  gap: 0.375rem;
  padding-block: 2rem 1rem;
}

body[data-page="accueil"] .site-header[data-scrolled="false"] .header-logo {
  flex-direction: column;
  gap: 0.25rem;
}

body[data-page="accueil"] .site-header[data-scrolled="false"] .logo-img {
  height: 52px;
  width: auto;
}

body[data-page="accueil"] .site-header[data-scrolled="false"] .logo-name {
  font-size: 2rem;
}

body[data-page="accueil"] .site-header[data-scrolled="false"] .header-tagline {
  display: block;
}

body[data-page="accueil"] .site-header[data-scrolled="false"] .header-nav {
  margin-inline-start: 0;
}

body[data-page="accueil"] .site-header[data-scrolled="false"] .header-controls {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
}

/* Logo */

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex-shrink: 0;
}

/* Dimensionne par la hauteur : les deux fichiers du noeud n'ont pas le meme
   rapport largeur/hauteur, une boite carree les laisserait flotter au centre
   d'un vide. */
.logo-img {
  height: 32px;
  width: auto;
  display: block;
  transition: height 200ms ease;
}

.logo-name {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .logo-img { transition: none; }
}

/* Tagline (accueil uniquement) */

.header-tagline {
  display: none;
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Navigation */

.header-nav {
  margin-inline-start: auto;
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-link {
  display: block;
  padding: 0.375rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 4px;
  position: relative;
  transition: color 150ms ease;
}

.nav-link:hover { color: var(--accent-gold-text); }

.nav-link--active {
  font-weight: 600;
  color: var(--text-primary);
}

.nav-link--active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background-color: var(--accent-gold);
  border-radius: 1px;
}

.nav-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Les sections d'une page, en sous-titres sous son entree : un petit
   panneau qui s'ouvre au survol et au focus clavier (focus-within), sans
   JavaScript. Il reste ouvert tant que le pointeur est dessus, la marge
   haute est comblee par le padding pour ne pas le perdre en descendant. */
.nav-item { position: relative; }

.nav-sous {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14rem;
  margin: 0;
  padding: 0.5rem 0.25rem 0.375rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
  z-index: 101;
}

.nav-item:hover .nav-sous,
.nav-item:focus-within .nav-sous {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 0s;
}

/* Si la derniere entree du menu porte ses sections, son panneau s'ouvre
   vers la gauche : aligne a gauche il sortirait de la fenetre. Depuis que
   Ressources est passee dans le pied de page, la derniere entree est FAQ,
   qui n'en a pas : la regle ne s'applique plus a rien, et reste prete. */
.nav-list > .nav-item:last-child .nav-sous { left: auto; right: 0; }

.nav-sous-lien {
  display: block;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
}

.nav-sous-lien:hover { color: var(--accent-gold-text); background-color: var(--bg); }

.nav-sous-lien:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-sous { transition: none; }
}

/* Contrôles (thème + hamburger) */

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.theme-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background-color: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--text-primary);
  transition: border-color 150ms ease, background-color 150ms ease;
}

.theme-btn:hover {
  border-color: var(--accent-gold);
  background-color: rgba(191, 145, 0, 0.08);
}

.theme-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .theme-btn { transition: none; }
}

/* Hamburger — caché sur bureau */

.hamburger-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: none;
  cursor: pointer;
  font-size: 1.125rem;
  color: var(--text-primary);
  align-items: center;
  justify-content: center;
}

.hamburger-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Menu mobile */

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background-color: var(--bg);
  z-index: 300;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 250ms ease;
}

.mobile-menu.is-open {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
}

.mobile-menu-inner {
  padding: 1.25rem 1.5rem;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.mobile-close-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.mobile-close-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.mobile-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.mobile-nav-link {
  display: block;
  padding: 0.875rem 0;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.mobile-nav-link--active {
  font-weight: 700;
  color: var(--accent-gold-text);
}

.mobile-nav-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Dans le menu mobile, les sections sont toujours visibles, en retrait
   sous leur entree, en plus petit : des sous-titres. */
.mobile-nav-sous {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0 0 0 1.25rem;
}

.mobile-nav-sous-lien {
  display: block;
  padding: 0.5rem 0;
  font-size: 1rem;
  color: var(--text-secondary);
  text-decoration: none;
}

.mobile-nav-sous-lien:hover { color: var(--accent-gold-text); }

.mobile-nav-sous-lien:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Responsive — mobile */

@media (max-width: 767px) {
  .header-nav { display: none; }
  .hamburger-btn { display: flex; }
  .mobile-menu { display: block; }

  /* La navigation masquee, plus rien ne poussait les boutons : ils
     suivaient le logo au milieu de la barre. Ils se calent a droite. */
  .header-controls { margin-inline-start: auto; }

  /* Accueil en grande forme (logo centre en colonne) : les boutons restent
     en haut a droite, comme sur ordinateur, au lieu d'etre centres sous le
     logo. La hauteur de l'en-tete est mesuree (header.js), donc le texte
     ne passe plus dessous. */
  body[data-page="accueil"] .site-header[data-scrolled="false"] .header-controls {
    top: 0.75rem;
    right: var(--marge-cadre, 1.5rem);
  }
}

/* ============================================================
   Pied de page
   ============================================================ */

/* ============================================================
   DCP — Pied de page
   ============================================================ */

.site-footer {
  background-color: var(--bg);
  border-top: 1px solid var(--border);
  margin-top: auto;
}

/* Cinq colonnes depuis l'ajout d'« Outils » : la signature cede un peu de
   largeur et l'ecart passe a 2.5rem, sinon les titres de colonne se
   coupent en deux lignes a 1200px. */
.footer-inner {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
  padding-block: 3rem;
}

/* Signature */

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-signature {
  width: 160px;
  height: auto;
  object-fit: contain;
}

.footer-tagline {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--text-secondary);
  margin: 0;
}

/* Definition du protocole, citable telle quelle (voir footer.html). */
.footer-definition {
  max-width: 34ch; /* largeur autorisee : colonne du pied de page, pas un bloc de page */
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* L'adresse est donnee en clair a cote du lien : la trouver ne doit pas
   demander d'ouvrir une page de plus. */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.5rem 0 0;
}

.footer-contact a {
  font-size: 0.875rem;
  text-decoration: none;
  width: fit-content;
}

.footer-contact a:first-child {
  font-weight: 600;
  color: var(--accent-gold-text);
}

.footer-contact a:last-child {
  color: var(--text-secondary);
  word-break: break-word;
}

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

.footer-contact a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Colonnes de liens */

.footer-col-title {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-links a {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text-primary);
}

.footer-links a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Macarons protocoles */

.footer-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.footer-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* Partenaires — vides pour l'instant */

.footer-partners {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Barre de bas de page */

.footer-bar {
  border-top: 1px solid var(--border);
  padding-block: 1rem;
}

.footer-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer-legal {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0;
}

.footer-github {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-gold-text);
  text-decoration: none;
}

.footer-github:hover {
  text-decoration: underline;
}

.footer-github:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Responsive */

@media (max-width: 1023px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

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

@media (max-width: 599px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-block: 2rem;
  }

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

  .footer-bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }
}

/* ######################################################################
   2. COMPOSANTS : blocs reutilises par plusieurs pages
   ###################################################################### */

/* ============================================================
   Ossature des pages internes : entete, sections, encarts, texte
   ============================================================ */

/* ============================================================
   DCP — Ossature commune aux pages internes
   Entete de page, sections, encarts. Chaque page ajoute ensuite
   sa propre feuille pour ses composants specifiques.
   ============================================================ */

/* --- Entete de page --------------------------------------------------- */

/* Sur ces pages l'en-tete du site est « sticky », donc deja dans le flux :
   ce retrait n'a rien a degager, il ne fait qu'espacer. Les 7rem d'origine
   laissaient 112px de vide sous l'en-tete, la ou l'accueil n'en laisse que
   35 (26 en mobile). On se cale sur l'accueil. */
/* Le retrait bas est nul : la section qui suit apporte deja le sien, et
   les deux s'additionnaient. Sur la FAQ cela faisait 112px entre le chapo
   et le champ de recherche, la ou le reste de la page tient des ecarts de
   12 a 64. On ne peut pas retirer celui de la section a la place : il fait
   respirer les sections teintees a l'interieur de leur propre fond. */
.page-entete {
  padding-block: 2.25rem 0;
}

/* Les pages de texte simple ont un retrait haut plus mince (1rem) : sans
   cette reprise, leur titre collerait au corps. */
.page-entete + .page-texte {
  padding-top: 3rem;
}

/* Quand la section qui suit est teintee, son bord haut est visible : sans
   cet ecart le chapo toucherait la couleur, puisque l'entete n'a plus de
   retrait bas. C'est le cas de Standard et Ecosysteme. Une marge, pas un
   retrait : elle laisse voir le fond de page et ne touche pas a la
   respiration interieure de la bande. */
.page-entete + .section--surface {
  margin-top: 2rem;
}

@media (max-width: 767px) {
  .page-entete + .section--surface { margin-top: 1.5rem; }
}

/* Typographie du surtitre : base.css. */
.page-eyebrow { margin-bottom: 0.5rem; }

.page-titre {
  font-size: clamp(1.875rem, 4vw, 3rem);
  max-width: 18ch;
  margin-bottom: 1rem;
}

.page-chapo {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 62ch;
  margin: 0;
}

/* Un chapo peut se composer de deux paragraphes : « margin: 0 » les
   collerait sans cette reprise. */
.page-chapo + .page-chapo { margin-top: 1rem; }

/* Renvoi pose sous le chapo, quand la page ouvre sur un outil. */
.page-entete-lien {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.page-entete-lien a::after {
  content: ' →';
  white-space: nowrap;
}

/* Un lien externe porte deja sa fleche oblique dans son libelle : la
   fleche droite ferait double emploi (« Voir le depot GitHub ↗ → »). */
.page-entete-lien a[target="_blank"]::after { content: none; }

/* --- Sections --------------------------------------------------------- */

.section {
  padding-block: 4rem;
}

.section--surface {
  background-color: var(--surface);
}

/* .section-titre et .section-intro : base.css, mise en page commune. */

.section-lien {
  margin-top: 2rem;
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* --- Calage sur la laisse de lecture ---------------------------------- */

/* Ces textes partagent le bord gauche du bloc feuille de route au lieu de
   celui des grilles de cartes, qui restent pleine largeur. La regle vient
   apres les declarations ci-dessus pour l'emporter sur le « margin: 0 »
   de .page-chapo.

   Le max() protege deux cas ou la marge deviendrait negative : une fenetre
   plus etroite que la laisse, et un titre place dans une colonne de
   grille, comme le .section-titre de .contribuer-corps sur Standard. */
.page-eyebrow,
.page-titre,
.page-chapo,
.page-entete-lien,
.section-titre,
.section-intro,
.section-lien,
.encart {
  margin-left: var(--retrait-laisse);
}

/* Exception : les pages dont le corps tient deja dans une colonne etroite
   et centree (FAQ, A propos, Mentions legales, Contact) n'ont pas besoin
   de la laisse. Elle y decalerait l'entete par rapport au texte qu'il
   annonce, jusqu'a 168px sur Contact. Ces pages se reconnaissent a leur
   modificateur de conteneur. */
/* .page-texte figure dans la liste pour .section-lien : sur A propos et
   Mentions legales le lien vit dans un .container nu, borne a 760px par
   .page-texte, ou la laisse le decalerait de 40px vers la droite. */
:is(.container--faq, .container--texte, .container--contact, .page-texte)
:is(.page-eyebrow, .page-titre, .page-chapo, .page-entete-lien, .section-titre,
    .section-intro, .section-lien, .encart) {
  margin-left: 0;
}

/* Phrase de liaison qui annonce un bloc, plutot qu'un titre de section. */
.section-transition {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 52ch;
  margin: 0 0 2.5rem;
  line-height: 1.6;
}

.section-lien a {
  color: var(--accent-gold-text);
  text-decoration: none;
}

.section-lien a:hover { text-decoration: underline; }

/* --- Encart ----------------------------------------------------------- */

/* Largeur bornee a la laisse, comme .hors-perimetre : le decalage seul
   laisserait le cadre courir jusqu'au bord droit du conteneur, soit 972px
   de large pour un texte plafonne a 68ch. Le calage a gauche vient du
   groupe de la laisse plus haut. */
.encart {
  margin-top: 2rem;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-gold);
  border-radius: 10px;
  background-color: var(--bg);
}

.encart-titre {
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}

.encart-texte {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
  max-width: 68ch;
}

/* --- Page de texte simple (a propos, mentions, contact) --------------- */

.page-texte {
  padding-block: 1rem 5rem;
}

/* Pages de texte (A propos, Mentions legales, 404) : meme cadre que tout le
   site (--largeur-contenu, base.css), et le texte borne a la laisse de
   lecture, cale a gauche. Elles avaient un cadre de 760 px centre, qui
   decalait leur titre de 220 px par rapport au reste du site. */
.page-texte .container,
.container--texte { max-width: var(--largeur-contenu); }

.page-texte .container > *,
.container--texte > * { max-width: var(--laisse-texte); }

.page-texte h2 {
  font-size: 1.375rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.page-texte h2:first-child { margin-top: 0; }

.page-texte h3 {
  font-size: 1.0625rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.page-texte p,
.page-texte li {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

.page-texte ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.page-texte li { margin-bottom: 0.375rem; }

.page-texte dl {
  margin-bottom: 1.5rem;
}

.page-texte dt {
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 1rem;
  font-size: 0.9375rem;
}

.page-texte dd {
  margin-left: 0;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

@media (max-width: 767px) {
  .page-entete { padding-block: 1.5rem 0; }
  .section { padding-block: 3rem; }
}

/* ============================================================
   Feuille de route
   ============================================================ */

/* ============================================================
   DCP — Bloc feuille de route
   Partage entre la page Actus et la page Standard.
   ============================================================ */

/* Le bloc pose son propre fond : les pastilles s'en servent pour masquer
   le fil qui les relie, et doivent donc connaitre la couleur sur laquelle
   elles reposent. Sans cela, le bloc place sur une section teintee laisse
   apparaitre un disque plus sombre derriere chaque pastille. */
.roadmap-block {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem;
  margin-inline: var(--retrait-laisse) 0;
  background-color: var(--bg);
}

.roadmap-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.5rem;
}

.roadmap-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0.25rem;
}

.roadmap-subtitle {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.roadmap-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* La ligne verticale continue qui relie les jalons */
.roadmap-list::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background-color: var(--border);
  z-index: 0;
}

.roadmap-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 0.875rem;
  position: relative;
}

.roadmap-bullet {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
  background-color: var(--bg);
  display: block;
}

.roadmap-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-top: 0.0625rem;
}

.roadmap-text strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.roadmap-text span {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.roadmap-item--todo .roadmap-text strong,
.roadmap-item--todo .roadmap-text span {
  color: var(--text-secondary);
}

/* --- Les liens d'un jalon --------------------------------------------- */

/* Chaque jalon porte ses propres sources, depliees a la demande : plus
   utile qu'un bloc unique en pied de liste, ou l'on ne savait plus a quelle
   etape chaque lien se rattachait. Meme mecanique que les autres
   depliants du site : <details> natif, chevron commun, rien en JS. */
.jalon-liens {
  margin-top: 0.375rem;
}

/* Chevron : base.css, commun a tout le site. Ces liens sont ouverts
   d'emblee (attribut open dans roadmap.html) : quatre a vingt mots,
   rien a gagner a les cacher. Le depliant reste pour qui veut les fermer.
   Un summary flex prendrait toute la largeur et rejetterait le chevron au
   bout de la carte : inline-flex le garde contre le libelle. */
.jalon-liens > summary {
  display: inline-flex;
  min-height: 0;
  padding-block: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.jalon-liens > summary::after { margin-left: 0.25rem; }

.jalon-liens > summary:hover { color: var(--accent-gold-text); }

.jalon-liens > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.jalon-liens ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
  padding-left: 0;
}

.jalon-liens a {
  font-size: 0.8125rem;
  color: var(--accent-gold-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.jalon-liens a:hover { border-bottom-color: var(--accent-gold); }

.jalon-liens a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (max-width: 767px) {
  .roadmap-block { padding: 1.5rem; }
}

/* ============================================================
   Chassis des outils de parcours
   ============================================================ */

/* ============================================================
   DCP — Chassis commun aux outils de parcours de la doc

   Partage par les trois outils : meme entete, meme barre de
   commande, meme bloc de metadonnees, meme cadre defilant.
   Ce fichier ne connait pas le contenu affiche dans le cadre ;
   chaque outil apporte sa propre feuille pour cela.
   ============================================================ */

/* Le meme cadre que toutes les pages (--largeur-contenu, base.css). Les
   outils avaient un conteneur de 1600 px, plus large que le reste du site :
   leur titre et leur contenu ne s'alignaient sur rien d'autre. La hauteur
   reste calee sur la fenetre pour que le cadre defile de lui-meme plutot
   que d'allonger la page. */
/* Meme calage que .page-entete et .jeu : tout le site tombe pareil. */
.outil {
  padding-block: 2.25rem 3rem;
}

.outil-conteneur {
  width: 100%;
  max-width: var(--largeur-contenu);
  margin-inline: auto; /* centrage autorise : le cadre se centre dans la fenetre */
  padding-inline: var(--marge-cadre);
}

/* --- Entete ------------------------------------------------------------ */

.outil-entete {
  margin-bottom: 1.5rem;
}

/* Typographie du surtitre : base.css. */
.outil-eyebrow { margin-bottom: 0.25rem; }

.outil-titre {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin: 0;
}

/* --- Barre de commande ------------------------------------------------- */

/* Le choix a gauche, l'action a droite. En dessous de 600px les deux
   passent l'un sous l'autre et occupent toute la largeur. */
.outil-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.outil-choix {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  flex: 1 1 20rem;
}

.outil-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* La fleche est dessinee en fond : les navigateurs ne s'accordent pas
   sur le rendu natif, et elle doit suivre le theme. */
.outil-select {
  width: 100%;
  max-width: 34rem;
  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.15rem, calc(100% - 0.85rem) 1.15rem;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

.outil-select:hover { border-color: var(--accent-gold); }

.outil-select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.outil-select:disabled {
  opacity: 0.6;
  cursor: default;
}

.outil-telecharger {
  flex: 0 0 auto;
  text-decoration: none;
}

/* --- Metadonnees ------------------------------------------------------- */

.outil-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 2rem;
  padding-block: 1.25rem;
}

/* La description est la seule a meriter toute une rangee : les trois
   autres tiennent en quelques mots. */
.outil-meta-bloc--large { grid-column: 1 / -1; }

.outil-meta dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.outil-meta dd {
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.6;
}

.outil-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* --- Le cadre defilant -------------------------------------------------- */

/* Hauteur bornee par la fenetre : le document defile dans son cadre,
   la page ne s'allonge pas. Le minimum evite un cadre inutilisable sur
   un ecran bas ou en paysage. */
.outil-cadre {
  height: clamp(24rem, calc(100vh - 24rem), 60rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--bg);
  padding: 2rem 2.25rem;
}

/* La zone defile, donc elle recoit le focus clavier : sans ce style, un
   usager au clavier ne saurait pas ou il se trouve. */
.outil-cadre:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .outil { padding-block: 1.5rem 3rem; }
  .outil-cadre { padding: 1.25rem; }
}

/* --- Etats -------------------------------------------------------------- */

.outil-etat {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.outil-etat--erreur {
  padding: 0.875rem 1rem;
  border-radius: 8px;
  background-color: var(--status-err-bg);
  color: var(--status-err-text);
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 899px) {
  .outil-meta { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 599px) {
  .outil-meta { grid-template-columns: 1fr; }
  .outil-telecharger { width: 100%; justify-content: center; }
}

/* ============================================================
   Schemas animes (resume, services, contribuer)
   ============================================================ */

/* ============================================================
   DCP — Schemas animes : sans / avec le DCP

   Le SVG est construit par schema-anime.js ; cette feuille ne connait
   que ses classes. Les deux tons reprennent la regle du site posee dans
   tokens.css : sans le protocole, rouge leger ; avec lui, vert.
   ============================================================ */

.schemas-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

/* --- Deux affichages ----------------------------------------------------- */

/* La barre de bascule : « cote a cote » compare, la legende cede la place
   a des infobulles et le survol fige les deux scenes ; « l'une apres
   l'autre » joue une seule scene a la fois, sans puis avec, pour chaque
   vendeur, la legende en bas. Le choix du visiteur est retenu. */
.schemas-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
}

.schemas-modes {
  display: inline-flex;
  padding: 2px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.schemas-mode {
  border: 0;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.schemas-mode[aria-pressed="true"] {
  background: var(--text-primary);
  color: var(--sur-inverse);
}

.schemas-mode:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.schemas-aide {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* En sequence : une colonne, et la scene qui attend son tour disparait.
   La colonne est bornee par la hauteur de la fenetre : la scene doit tenir
   a l'ecran, titre, legende et commandes compris (22rem de budget), et le
   dessin fait 800 sur 590, d'ou le facteur 1,356. Plafond 760px, la
   largeur des pages de texte du site ; plancher 360px. Dans une iframe,
   100vh serait la hauteur de l'iframe elle-meme, qui depend du contenu :
   la page parente transmet la sienne dans --hauteur-fenetre. La barre de
   bascule suit la meme largeur. */
.schemas--sequence .schemas-barre,
.schemas--sequence .schemas-signature,
.schemas--sequence .schemas-grille {
  grid-template-columns: 1fr;
  max-width: clamp(360px, calc((var(--hauteur-fenetre, 100vh) - 22rem) * 1.356), 760px); /* largeur autorisee : la scene doit tenir en hauteur dans la fenetre */
}

/* Dans une page du site, la scene part du bord gauche comme tout le reste ;
   dans sa version embarquee, elle se centre dans l'iframe du site tiers. */
html.embarque:not(.embarque-site) .schemas--sequence .schemas-barre,
html.embarque:not(.embarque-site) .schemas--sequence .schemas-signature,
html.embarque:not(.embarque-site) .schemas--sequence .schemas-grille {
  margin-inline: auto; /* centrage autorise : schema embarque chez un tiers */
}
/* Les deux scenes occupent la meme case et se fondent l'une dans l'autre
   (700 ms) plutot que de se remplacer d'un coup : comme elles partagent le
   plan, la zone du vendeur, sa boutique et le telephone restent a la meme
   place pendant le fondu, et seul ce qui change semble se redessiner. La
   scene qui attend reste dans la grille (la case garde la hauteur de la
   plus haute), invisible et sans prise au pointeur. */
.schemas--sequence .schema {
  grid-area: 1 / 1;
  transition: opacity 700ms ease, visibility 0s linear 0s;
}
.schemas--sequence .schema--attente {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 700ms ease, visibility 0s linear 700ms;
}

/* Au reveil d'une scene, ses noeuds se recachent d'un coup, sans leur
   fondu de 420 ms : sinon l'etat final du tour precedent transparaitrait
   pendant que la figure elle-meme apparait. */
.schema--instantane .schema-noeud,
.schema--instantane .schema-zone,
.schema--instantane .schema-zone-libelle { transition: none; }

/* En comparaison, la legende ne sert plus quand on peut survoler : le
   visiteur ne lirait pas deux textes a la fois, l'infobulle de la zone
   survolee la remplace. Sans survol possible (tactile), elle reste. */
@media (hover: hover) {
  .schemas--comparaison .schema-legende { display: none; }
}

.schema { position: relative; }

.schema-infobulle {
  position: absolute;
  z-index: 2;
  max-width: 280px; /* largeur autorisee : infobulle flottante, pas un bloc de page */
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: var(--text-primary);
  color: var(--sur-inverse);
  font-size: 0.8125rem;
  line-height: 1.5;
  box-shadow: var(--shadow);
  pointer-events: none;
}

.schema-infobulle-titre {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sur-inverse-doux);
}

.schema-infobulle-texte { margin: 0; white-space: pre-line; }

/* --- La signature ------------------------------------------------------- */

/* Discrete : petit texte secondaire, a droite sous le bloc, et le noeud a
   22px de haut. C'est elle qui ramene chez nous quand le bloc est repris
   en iframe ailleurs. Le logo vient de --logo-src, donc du theme : le
   fond de la page nue est le notre, le noeud lui correspond toujours. */
.schemas-signature {
  display: flex;
  justify-content: flex-end;
  margin: 0.75rem 0 0;
}

.schemas-signature-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-decoration: none;
  /* Pas d'opacite reduite : a 0,8, le texte tombait a 4,39:1 (audit du
     7 octobre 2026), sous les 4,5 exiges. */
  transition: color 200ms ease;
}

.schemas-signature-lien:hover,
.schemas-signature-lien:focus-visible {
  opacity: 1;
  color: var(--text-primary);
  text-decoration: underline;
}

.schemas-signature-lien:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.schemas-signature-logo {
  width: 14px;
  height: 22px;
  background: var(--logo-src) center / contain no-repeat;
}

/* --- La page nue (iframe) et l'outil ------------------------------------- */

/* min-height: 0 annule le 100vh de base.css. Dans une iframe, 100vh vaut
   la hauteur de l'iframe elle-meme : le body ne descendait donc jamais
   sous la hauteur courante du cadre, la page annoncait au parent au moins
   cette hauteur, et le cadre ne pouvait que grandir. Monte a 973 px
   pendant un chargement, il y restait, avec 400 px de vide sous
   l'animation de l'accueil. */
body.nu { background: var(--bg); padding: 0.5rem; min-height: 0; }

/* Dans une iframe (classe posee par schema-anime.js), la page n'a jamais a
   defiler : le parent donne au cadre la hauteur exacte du contenu. Sans
   cette regle, un debordement de quelques pixels faisait apparaitre une
   barre horizontale, qui volait de la hauteur, donc une barre verticale,
   qui volait de la largeur : les deux barres restaient affichees sur
   telephone. Consultee directement, hors iframe, la page defile normalement. */
html.embarque { overflow: hidden; }
body.nu .schemas-barre { margin-top: 0; }

.resume-embarquer {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.resume-embarquer-titre {
  font-size: 1.125rem;
  margin: 0 0 0.5rem;
}

.resume-embarquer pre {
  overflow-x: auto;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: var(--bg);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Le bouton « Copier » (copier-extrait.js), dans le coin haut droit. Le
   retrait a droite laisse la place au bouton pour que la premiere ligne de
   l'extrait ne passe pas dessous. */
.resume-embarquer pre.extrait-copiable {
  position: relative;
  padding-right: 6rem;
}

.copier-extrait {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  min-height: 32px;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.copier-extrait:hover { border-color: var(--accent-gold); }

.copier-extrait:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.schema {
  /* Element de grille : sans min-width, il s'elargit a son contenu et
     debordait de 28 px a 320 px de large (WCAG 1.4.10, audit du 7 octobre). */
  min-width: 0;
  margin: 0;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--bg);
}

/* Le ton pilote l'accent de tout le schema par une seule variable locale,
   que chaque regle ci-dessous consomme. */
.schema--sans { --schema-accent: var(--sans-dcp-accent); --schema-fond: var(--sans-dcp-fond); }
.schema--avec { --schema-accent: var(--avec-dcp-accent); --schema-fond: var(--avec-dcp-fond); }

.schema-titre {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schema-accent);
  margin: 0 0 0.75rem;
}

.schema-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- Zones : l'espace de chacun ------------------------------------------ */


/* Teinte neutre a dessein : la zone dit a qui appartient l'espace, pas
   si le protocole est la. Le rouge et le vert restent aux flux. */
.schema-zone {
  fill: var(--surface-alt);
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.85;
}

.schema-zone-libelle {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--text-secondary);
}

/* Les blocs apparaissent quand ils servent : un noeud reste invisible tant
   qu'aucun flux n'en est parti ni n'y est arrive, une zone se montre avec
   son premier noeud. Le telephone, lui, est la des le depart. Ces regles
   viennent apres .schema-zone, dont l'opacite de 0.85 l'emporterait sinon
   a specificite egale. */
.schema-zone, .schema-zone-libelle { transition: opacity 420ms ease; }
.schema-noeud--cache, .schema-zone--cache { opacity: 0; }

/* --- Flux -------------------------------------------------------------- */

.schema-flux {
  fill: none;
  stroke: var(--schema-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.9;
  transition: opacity 300ms ease;
}

/* Un flux bloque reste visible jusqu'a son arret, mais s'estompe : il a
   essaye, il n'est pas passe. Le tirete du trace anime est deja pris par
   le dessin progressif, d'ou l'opacite plutot qu'un pointille. */
.schema-flux--bloque { opacity: 0.45; }

/* Un flux en pointille est conditionnel : il n'a lieu que si l'acheteur
   l'autorise. Le tirete lui-meme est pose en ligne par le moteur, qui en
   fait un motif aussi long que le trace ; ici seulement un trait plus
   leger, pour qu'il se lise comme une possibilite, pas comme un fait. */
.schema-flux--pointille { opacity: 0.7; }

.schema-fleche { fill: var(--schema-accent); }

/* La croix a l'endroit ou le paquet s'est arrete : toujours rouge, c'est
   la couleur du « sans », quel que soit le ton du schema. */
.schema-blocage {
  stroke: var(--sans-dcp-accent);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 250ms ease;
}

.schema-blocage--visible { opacity: 1; }

/* --- Noeuds ------------------------------------------------------------ */

.schema-noeud-fond {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1.5;
  transition: stroke 250ms ease, fill 250ms ease;
}

.schema-noeud { color: var(--text-secondary); transition: color 250ms ease, opacity 420ms ease; }

.schema-noeud--atteint { color: var(--text-primary); }
.schema-noeud--atteint .schema-noeud-fond { stroke: var(--schema-accent); stroke-width: 2; }

.schema-noeud-libelle {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  fill: var(--text-secondary);
}

.schema-noeud--atteint .schema-noeud-libelle { fill: var(--text-primary); }

/* La note sous le libelle : ce que la scene dit du noeud, dans le ton du
   schema. C'est elle qui porte la difference entre les deux dessins. */
.schema-noeud-note {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 11px;
  font-style: italic;
  fill: var(--schema-accent);
}

/* Le noeud barre : le contrat qui reste hors de portee, sans le DCP. */
.schema-barre {
  stroke: var(--sans-dcp-accent);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  transform: scale(0.6);
  transform-origin: 0 0;
  transition: opacity 300ms ease, transform 300ms ease;
}

.schema-noeud--barre .schema-barre { opacity: 1; transform: scale(1); }
.schema-noeud--barre { color: var(--text-secondary); }
.schema-noeud--barre .schema-noeud-fond { stroke: var(--sans-dcp-accent); }

/* --- Telephone --------------------------------------------------------- */

.schema-tel-corps {
  fill: var(--text-primary);
  stroke: var(--border);
  stroke-width: 1.5;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22));
}

.schema-tel-ecran { fill: var(--bg); }

.schema-tel-encoche { fill: var(--sur-inverse-doux); }

.schema-telephone.schema-noeud--atteint .schema-tel-ecran { fill: var(--schema-fond); }

/* --- Ecran : les vues, une visible a la fois ---------------------------- */

.schema-vue {
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}

.schema-vue--active { opacity: 1; }

.schema-vue-statut { fill: var(--border); }

.schema-vue-icone { color: var(--schema-accent); }

/* Une vue au ton « alerte » (le refus) porte l'icone et le titre en rouge,
   quel que soit le ton du schema : on refuse, ce n'est pas un succes. */
.schema-vue--alerte .schema-vue-icone { color: var(--sans-dcp-accent); }
.schema-vue--alerte .schema-vue-titre { fill: var(--sans-dcp-accent); }

.schema-vue-texte {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  fill: var(--text-primary);
  letter-spacing: 0.04em;
}

.schema-vue-titre {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  fill: var(--text-primary);
}

/* Une ligne de texte dans l'ecran : le nom d'un service choisi, par
   exemple. Meme rythme que les barres, 22px. */
.schema-vue-ligne-texte {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  fill: var(--text-primary);
}
.schema-vue-ligne-texte--ok     { fill: var(--avec-dcp-accent); }
.schema-vue-ligne-texte--alerte { fill: var(--sans-dcp-accent); }

.schema-vue-ligne--neutre { fill: var(--border); }
.schema-vue-ligne--alerte { fill: var(--sans-dcp-accent); }
.schema-vue-ligne--ok     { fill: var(--avec-dcp-accent); }

/* --- Paquets voyageurs ------------------------------------------------- */

.schema-paquet {
  opacity: 0;
  color: var(--sur-inverse);
  transition: opacity 200ms ease;
}

.schema-paquet--visible { opacity: 1; }

.schema-paquet-fond {
  fill: var(--schema-accent);
  stroke: var(--bg);
  stroke-width: 2;
}

/* --- Legende et commandes --------------------------------------------- */

.schema-legende {
  min-height: 3.2em;
  margin: 0.75rem 0 0.5rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Un bloc epingle au toucher ou au clavier (schema-anime.js, « Toucher ou
   clavier ») : sa description prend la place de la legende, son nom en
   tete, et un filet dore la distingue de la narration ordinaire. */
.schema-legende--fiche {
  padding-left: 0.75rem;
  border-left: 3px solid var(--accent-gold);
  color: var(--text-primary);
}

.schema-legende-titre {
  display: block;
  font-weight: 600;
  margin-bottom: 0.125rem;
}

/* Le bloc epingle, et le bloc atteint au clavier : un anneau dore, plus
   epais que celui d'un bloc deja atteint par l'animation. */
.schema-noeud--epingle .schema-noeud-fond,
.schema-noeud:focus-visible .schema-noeud-fond {
  stroke: var(--focus);
  stroke-width: 3;
}

.schema-noeud:focus { outline: none; }

/* Un terminal n'a pas de fond a souligner, et son contour porte deja la
   teinte du vendeur : le focus clavier y etait invisible (audit du
   7 octobre). Il recoit un vrai contour, hors du dessin. */
.schema-telephone:focus { outline: none; }
.schema-telephone:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 6px;
}

/* « Exemple 1 : Acheter un velo », la ligne posee juste au-dessus des
   points. Les points disent ou l'on en est dans la serie, elle dit ce
   qu'on y regarde. La cle est doree, le nom en texte primaire : plus net
   que la legende au-dessus, qui reste en texte secondaire, donc la ligne
   se lit d'un coup sans lui faire concurrence. Elle n'est posee que si
   les tours portent « exemple » (schema-anime.js). */
.schema-exemple {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* Le gap ne joue qu'entre la cle et le nom : en row-gap, une ligne
     repliee couterait 6 px de plus qu'une hauteur de ligne. */
  column-gap: 0.4rem;
  row-gap: 0;
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-primary);
}

/* Sous 600 px, deux des cinq exemples passent a la ligne (mesure a 327 px
   de large : « Souscrire un abonnement internet » et « Acheter un canape
   d'occasion »). Sans hauteur reservee, le bloc gagne 22 px a ces deux
   tours-la, pousse les commandes, et l'animation embarquee reannonce sa
   hauteur : la page de Decouvrir sauterait sous l'oeil du lecteur. Meme
   remede que .schema-legende, qui reserve deja ses trois lignes. */
@media (max-width: 599px) {
  .schema-exemple { min-height: 3.2em; }
}

.schema-exemple-cle {
  font-weight: 600;
  color: var(--accent-gold-text);
  white-space: nowrap;
}

.schema-commandes {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.schema-lecture {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.schema-lecture:hover { border-color: var(--schema-accent); color: var(--schema-accent); }

.schema-etapes {
  list-style: none;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
}

.schema-etape {
  /* Cible de 24 px (WCAG 2.2, 2.5.8) pour un point visible de 12 px : le
     bouton est transparent, le point est son ::before. Il faisait 12 px,
     touchable du bout de l'ongle (audit du 7 octobre 2026). */
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.schema-etape::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1.5px solid var(--schema-accent);
  border-radius: 50%;
  background: transparent;
  transition: background-color 200ms ease;
}

.schema-etape[aria-current="true"]::before { background-color: var(--schema-accent); }

/* --- Tours : un vendeur apres l'autre ------------------------------------ */

/* A chaque tour, la zone et la boutique prennent la teinte du vendeur
   (jetons --vendeur-N-* de tokens.css, cinq vendeurs). Sans le DCP, toutes
   les vues de l'ecran la prennent aussi et gagnent un bandeau : c'est le
   site de ce vendeur, different a chaque fois. Avec le DCP, seule la vue
   de la boutique la porte : le reste est votre application. */
/* La zone d'un vendeur prend son accent a 35 %, pas son fond pale : le
   fond etait a 19 unites RGB du gris neutre en clair et 12 en sombre,
   invisible. Bord plein, et le libelle passe en texte principal pour
   garder son contraste sur la teinte. */
[class*="schema-zone--t"] {
  fill-opacity: 0.35;
  stroke-dasharray: none;
  stroke-width: 1.5;
}

.schema-zone--t1 { fill: var(--vendeur-1-accent); stroke: var(--vendeur-1-accent); }
.schema-zone--t2 { fill: var(--vendeur-2-accent); stroke: var(--vendeur-2-accent); }
.schema-zone--t3 { fill: var(--vendeur-3-accent); stroke: var(--vendeur-3-accent); }
.schema-zone--t4 { fill: var(--vendeur-4-accent); stroke: var(--vendeur-4-accent); }
.schema-zone--t5 { fill: var(--vendeur-5-accent); stroke: var(--vendeur-5-accent); }

[class*="schema-zone--t"] + .schema-zone-libelle { fill: var(--text-primary); }

.schema-noeud--t1 { color: var(--vendeur-1-accent); }
.schema-noeud--t2 { color: var(--vendeur-2-accent); }
.schema-noeud--t3 { color: var(--vendeur-3-accent); }
.schema-noeud--t4 { color: var(--vendeur-4-accent); }
.schema-noeud--t5 { color: var(--vendeur-5-accent); }
.schema-noeud--t1 .schema-noeud-fond { fill: var(--vendeur-1-fond); stroke: var(--vendeur-1-accent); }
.schema-noeud--t2 .schema-noeud-fond { fill: var(--vendeur-2-fond); stroke: var(--vendeur-2-accent); }
.schema-noeud--t3 .schema-noeud-fond { fill: var(--vendeur-3-fond); stroke: var(--vendeur-3-accent); }
.schema-noeud--t4 .schema-noeud-fond { fill: var(--vendeur-4-fond); stroke: var(--vendeur-4-accent); }
.schema-noeud--t5 .schema-noeud-fond { fill: var(--vendeur-5-fond); stroke: var(--vendeur-5-accent); }

/* Une vue chez le vendeur se reconnait a son fond teinte, son bandeau et
   son icone a sa couleur, ses lignes carrees. La teinte se pose vue par
   vue (schema-vue--tN), pas sur le telephone : sans le DCP toutes les vues
   sont chez le vendeur ; avec, seule la boutique. Le fond de vue est
   transparent partout ailleurs et laisse voir l'ecran. */
.schema-vue-fond { fill: transparent; }
.schema-vue-entete { opacity: 0; }

.schema-vue--t1 .schema-vue-fond { fill: var(--vendeur-1-fond); }
.schema-vue--t2 .schema-vue-fond { fill: var(--vendeur-2-fond); }
.schema-vue--t3 .schema-vue-fond { fill: var(--vendeur-3-fond); }
.schema-vue--t4 .schema-vue-fond { fill: var(--vendeur-4-fond); }
.schema-vue--t5 .schema-vue-fond { fill: var(--vendeur-5-fond); }

.schema-vue--t1 .schema-vue-entete { fill: var(--vendeur-1-accent); opacity: 1; }
.schema-vue--t2 .schema-vue-entete { fill: var(--vendeur-2-accent); opacity: 1; }
.schema-vue--t3 .schema-vue-entete { fill: var(--vendeur-3-accent); opacity: 1; }
.schema-vue--t4 .schema-vue-entete { fill: var(--vendeur-4-accent); opacity: 1; }
.schema-vue--t5 .schema-vue-entete { fill: var(--vendeur-5-accent); opacity: 1; }

.schema-vue--t1 .schema-vue-icone, .schema-vue--t1 .schema-vue-statut { color: var(--vendeur-1-accent); fill: var(--vendeur-1-fond); }
.schema-vue--t2 .schema-vue-icone, .schema-vue--t2 .schema-vue-statut { color: var(--vendeur-2-accent); fill: var(--vendeur-2-fond); }
.schema-vue--t3 .schema-vue-icone, .schema-vue--t3 .schema-vue-statut { color: var(--vendeur-3-accent); fill: var(--vendeur-3-fond); }
.schema-vue--t4 .schema-vue-icone, .schema-vue--t4 .schema-vue-statut { color: var(--vendeur-4-accent); fill: var(--vendeur-4-fond); }
.schema-vue--t5 .schema-vue-icone, .schema-vue--t5 .schema-vue-statut { color: var(--vendeur-5-accent); fill: var(--vendeur-5-fond); }

[class*="schema-vue--t"] .schema-vue-ligne { rx: 0; }

.schema-lecture:focus-visible,
.schema-etape:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --- Mouvement reduit ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .schema-noeud, .schema-noeud-fond, .schema-barre, .schema-vue,
  .schema-zone, .schema-zone-libelle,
  .schema-paquet, .schema-etape, .schema-etape::before, .schemas-mode, .schemas-signature-lien { transition: none; }
  .schemas--sequence .schema,
  .schemas--sequence .schema--attente { transition: none; }
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 899px) {
  .schemas-grille { grid-template-columns: 1fr; }
}

/* Sous 600px le SVG tient sur moins de 300px : ses libelles de 13px
   tombent vers 4,6px a l'ecran, illisibles. La legende narree sous le
   schema et les icones portent le sens, on les tait plutot que de les
   laisser bruire. */
@media (max-width: 599px) {
  .schema-noeud-libelle,
  .schema-noeud-note,
  .schema-vue-ligne-texte,
  .schema-zone-libelle { display: none; }
}

/* La legende des blocs (rendreCles dans schema-anime.js) : icone et nom
   de chaque bloc, en texte lisible, sous le dessin. Sans elle, les petits
   ecrans ne montraient que des icones sans nom, et les noms de zones a
   4,5 px. Cachee au-dela de 600 px, ou le dessin porte ses libelles. */
.schema-cles { display: none; }

@media (max-width: 599px) {
  .schema-cles {
    display: grid;
    /* minmax(0, 1fr) et la coupure de mot : « MonEnvironnement », insecable,
       elargissait sa colonne et la page debordait a 320 px (WCAG 1.4.10). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow-wrap: anywhere;
    gap: 0.5rem 0.75rem;
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-primary);
  }

  .schema-cle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .schema-cle-icone {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--text-secondary);
  }
}

/* --- Une scene seule : « Mon application et mes services » --------------- */

/* Le bloc de /services/ n'a qu'une scene et rien a comparer : pas de
   bascule, une seule colonne, bornee comme la sequence du resume pour
   tenir a l'ecran, et la legende toujours visible (en comparaison le
   resume la tait au profit des infobulles ; ici il n'y a pas de seconde
   scene a lire en meme temps). */
.schemas--seul .schemas-grille,
.schemas--seul .schemas-signature {
  grid-template-columns: 1fr;
  max-width: clamp(360px, calc((var(--hauteur-fenetre, 100vh) - 18rem) * 1.356), 800px); /* largeur autorisee : la scene doit tenir en hauteur dans la fenetre */
}

/* Meme logique que la sequence : a gauche dans le site, centre embarque. */
html.embarque:not(.embarque-site) .schemas--seul .schemas-grille,
html.embarque:not(.embarque-site) .schemas--seul .schemas-signature {
  margin-inline: auto; /* centrage autorise : schema embarque chez un tiers */
}

@media (hover: hover) {
  .schemas--seul.schemas--comparaison .schema-legende { display: block; }
}

/* --- Le noeud-photo : une vignette realiste dans la scene stylisee ------- */

/* Le cadre prend la teinte du tour comme un disque de noeud (teinter),
   l'image se pose dessus, recadree au centre. Le repli stylise (l'icone
   du cas) ne se voit que tant que l'image manque ou n'a pas charge. */
.schema-vignette-fond { transition: fill 250ms ease, stroke 250ms ease; }

.schema-vignette-image { opacity: 1; transition: opacity 300ms ease; }
.schema-vignette--sans-image .schema-vignette-image { opacity: 0; }

.schema-vignette-repli { opacity: 0; transition: opacity 300ms ease; }
.schema-vignette--sans-image .schema-vignette-repli { opacity: 1; }

.schema-vignette-bord {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.5;
}

.schema-vignette.schema-noeud--atteint .schema-vignette-bord {
  stroke: var(--schema-accent);
  stroke-width: 2;
}

/* --- Le telephone teinte : l'application d'un tiers ----------------------- */

/* Quand l'application est celle d'une banque ou d'un assureur (appliTeinte),
   le telephone prend un lisere a sa couleur ; ses vues, elles, sont
   teintees comme celles d'un vendeur (schema-vue--tN). */
.schema-telephone.schema-noeud--t1 .schema-tel-corps { stroke: var(--vendeur-1-accent); stroke-width: 3; }
.schema-telephone.schema-noeud--t2 .schema-tel-corps { stroke: var(--vendeur-2-accent); stroke-width: 3; }
.schema-telephone.schema-noeud--t3 .schema-tel-corps { stroke: var(--vendeur-3-accent); stroke-width: 3; }
.schema-telephone.schema-noeud--t4 .schema-tel-corps { stroke: var(--vendeur-4-accent); stroke-width: 3; }
.schema-telephone.schema-noeud--t5 .schema-tel-corps { stroke: var(--vendeur-5-accent); stroke-width: 3; }

/* --- Les formes de terminal ---------------------------------------------- */

/* Un terminal dessine un chassis par forme qu'il prend au fil des tours
   (telephone, PC, portable) ; le groupe porte la forme courante en classe
   et seul ce chassis se voit. */
.schema-terminal-forme { display: none; }
.schema-terminal--telephone > [data-forme="telephone"],
.schema-terminal--pc > [data-forme="pc"],
.schema-terminal--portable > [data-forme="portable"] { display: inline; }

/* Un ecran en paysage (PC, portable) est bas : l'icone a gauche, le titre
   et les lignes a droite, en plus petit, sinon deux lignes suffisent a
   sortir de l'ecran. */
.schema-vue--paysage .schema-vue-titre { font-size: 11px; }
.schema-vue--paysage .schema-vue-ligne-texte { font-size: 8.5px; }
.schema-vue--paysage .schema-vue-texte { font-size: 22px; }

/* --- L'annonce d'un cas --------------------------------------------------- */

/* La carte qui ouvre un tour (annonce d'une etape) : au centre, au-dessus
   de tout, le temps de l'etape, puis elle s'efface. Surtitre a l'accent du
   schema, titre en serif, une ligne de contexte. */
.schema-annonce {
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.schema-annonce--visible { opacity: 1; }

.schema-annonce-fond {
  fill: var(--bg);
  stroke: var(--schema-accent);
  stroke-width: 1.5;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
}

.schema-annonce-surtitre {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--schema-accent);
}

.schema-annonce-titre {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  fill: var(--text-primary);
}

.schema-annonce-texte {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 10.5px;
  fill: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .schema-annonce { transition: none; }
}

/* Le libelle d'une zone de vendeur prend l'accent de la teinte du tour :
   la zone elle-meme est cet accent a 35 %, le libelle est donc « la meme
   teinte, un peu plus foncee ». Deux classes, pas une : la regle du resume
   « [class*=schema-zone--t] + .schema-zone-libelle » (texte primaire) pese
   deux classes elle aussi, et gagnait sur une seule. */
.schema-zone-libelle.schema-zone-libelle--t1 { fill: var(--vendeur-1-accent); }
.schema-zone-libelle.schema-zone-libelle--t2 { fill: var(--vendeur-2-accent); }
.schema-zone-libelle.schema-zone-libelle--t3 { fill: var(--vendeur-3-accent); }
.schema-zone-libelle.schema-zone-libelle--t4 { fill: var(--vendeur-4-accent); }
.schema-zone-libelle.schema-zone-libelle--t5 { fill: var(--vendeur-5-accent); }

/* --- La carte d'annonce plein cadre, avec la photo du cas ---------------- */

/* Une photographie n'a pas de theme : le voile qui monte du bas est un
   bleu nuit fixe (le navy du site) et le texte qui se pose dessus est
   clair, en clair comme en sombre. C'est la seule couleur codee en dur de
   la feuille, et c'est pour cela. Le fondu est plus long que celui de la
   petite carte : c'est une transition, pas une etiquette. */
.schema-annonce--pleine { transition: opacity 900ms ease; }

.schema-annonce--pleine .schema-annonce-fond {
  fill: #0B1B33;
  stroke: none;
  filter: none;
}

.schema-annonce--pleine .schema-annonce-surtitre {
  font-size: 13px;
  fill: rgba(255, 255, 255, 0.78);
}

.schema-annonce--pleine .schema-annonce-titre {
  font-size: 30px;
  fill: #FFFFFF;
}

.schema-annonce--pleine .schema-annonce-texte {
  font-size: 14px;
  fill: rgba(255, 255, 255, 0.85);
}

/* Le sablier suit la meme regle que le reste de la carte : il se pose sur
   une photographie, donc il est blanc en dur, pas en jeton de theme. Pas de
   transition sur la jauge : elle est repoussee a chaque image, une
   transition la ferait trainer derriere l'horloge.

   Il est frere de la carte et non son enfant (c'est un controle, la carte
   est decorative) : il porte donc son propre fondu. visibility le sort de
   l'ordre de tabulation entre deux cas, et son retard de 900 ms la laisse
   se faire. */
.schema-annonce-sablier {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 900ms ease, visibility 0s linear 900ms;
}

.schema-annonce-sablier--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 900ms ease, visibility 0s;
}

/* La prise : invisible, mais elle porte le clic et l'appui. */
.schema-annonce-sablier-prise { fill: transparent; }

.schema-annonce-sablier:hover .schema-annonce-sablier-piste,
.schema-annonce-sablier:focus-visible .schema-annonce-sablier-piste {
  stroke: rgba(255, 255, 255, 0.85);
}

.schema-annonce-sablier:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
  border-radius: 50%;
}

.schema-annonce-sablier-piste {
  fill: rgba(11, 27, 51, 0.45);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2;
}

.schema-annonce-sablier-jauge {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.schema-annonce-sablier-lecture { fill: rgba(255, 255, 255, 0.9); }

/* Le dessin se reduit avec la fenetre : a 375 px l'anneau tombait a 11 px,
   trop discret pour l'indication qu'il porte. Il grossit donc en dessous de
   la laisse, sur le groupe interieur : une transform posee sur le groupe
   exterieur ecraserait son translate. */
@media (max-width: 599px) {
  .schema-annonce-sablier-corps { transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .schema-annonce--pleine { transition: none; }
  .schema-annonce-sablier { transition: none; }
  .schema-annonce-sablier--visible { transition: none; }
}

/* --- « Cet exemple nécessiterait… » : la liste des besoins ---------------- */

/* Sous la légende, les commandes à gauche et la liste à droite. Elle se
   remplit au fil du tour (un élément par noeud touché) : des icônes
   seules, en pastilles comme le bouton de lecture ; le nom, la note et la
   description sont dans l'infobulle, la même que celle des noeuds du
   dessin (demande de l'auteur). Sous 600 px le module ne s'affiche pas :
   trop petit pour des infobulles, et l'écran est au dessin. */
.schema-pied {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.schema-besoins {
  flex: 0 1 320px;
  min-width: 0;
  margin-left: auto;
  text-align: right;
  transition: opacity 300ms ease, visibility 300ms;
}

/* Pendant la carte d'annonce d'un cas, le module se tait (visibility, pas
   display : le titre garde sa place, rien ne saute quand il revient). */
.schema-besoins--attente { opacity: 0; visibility: hidden; }

.schema-besoins-titre {
  margin: 0 0 0.4rem;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.schema-besoins-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.schema-besoin { animation: schema-besoin-entree 420ms ease both; }

@keyframes schema-besoin-entree {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: none; }
}

.schema-besoin-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-primary);
  cursor: help;
}

.schema-besoin-bouton:hover,
.schema-besoin-bouton:focus-visible {
  border-color: var(--schema-accent);
  color: var(--schema-accent);
}

.schema-besoin-bouton:focus-visible {
  outline: 2px solid var(--schema-accent);
  outline-offset: 2px;
}

.schema-besoin-icone {
  width: 17px;
  height: 17px;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .schema-besoin { animation: none; }
  .schema-besoins { transition: none; }
}

@media (max-width: 599px) {
  .schema-besoins { display: none; }
}

/* --- La carte des contributions (schema.carte) ------------------------------ */

/* Une scene immobile ; la legende du bas devient un encadre qui montre la
   fiche de la place survolee. Toutes les fiches sont dans la meme case de
   grille et une seule est visible : l'encadre a toujours la hauteur de la
   plus longue, a toutes les largeurs, et rien ne saute d'une place a
   l'autre. Pas de hauteur minimale a regler : elle se deduit du texte.
   L'or porte la place choisie, comme ailleurs sur le site il porte ce
   qui attire l'oeil. */
.schema-encadre {
  display: grid;
  margin: 1rem 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-gold);
  border-radius: 8px;
  background-color: var(--surface);
  color: var(--text-secondary);
}

.schema-encadre-famille {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
}

.schema-encadre-titre {
  margin: 0.25rem 0 0.375rem;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.schema-encadre-texte {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-primary);
}

.schema-encadre-lieu {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--text-secondary);
}

/* Les liens d'une fiche : le cas de l'animation, les publics, les
   ressources. Cinq au plus, en ligne, sur le motif de .maniere-liens.
   Ils ne sont cliquables que sur la fiche visible : les autres sont en
   visibility: hidden, donc hors de l'ordre de tabulation. C'est ce qui
   donne son emploi au figeage : sans lui, le pointeur ne pourrait pas
   descendre jusqu'a eux sans changer de fiche en chemin. */
.schema-encadre-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.125rem;
  margin: 0.75rem 0 0;
}

.schema-encadre-liens a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-gold-text);
  text-decoration: none;
}

.schema-encadre-liens a:hover { text-decoration: underline; }

.schema-encadre-liens a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* La cle de famille, posee une fois par suite : elle dit ce que les liens
   qui suivent ont en commun, sans une ligne de plus. */
.schema-encadre-liens-cle {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  align-self: center;
}

/* Au doigt, un lien de fiche est une cible comme une autre. Le retrait
   reste mesure : a 375 px chaque lien prend sa ligne, et l'encadre ne doit
   pas ecraser le dessin, deja reduit a la largeur du telephone. */
@media (max-width: 767px) {
  .schema-encadre-liens { gap: 0 0.875rem; }
  .schema-encadre-liens a { padding-block: 0.3125rem; }
}

/* Les fiches, superposees ; seule l'active se voit, et rejoue un fondu
   court en apparaissant. visibility et non display : les fiches cachees
   gardent leur place dans le calcul de hauteur. */
.schema-encadre-fiche { grid-area: 1 / 1; visibility: hidden; }
.schema-encadre-fiche--active { visibility: visible; }
.schema-encadre-fiche--active > * { animation: schema-encadre-entree 240ms ease both; }

@keyframes schema-encadre-entree {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* Les fleches se tracent par transition CSS, pas par la boucle d'animation :
   le mode carte n'a ni horloge ni requestAnimationFrame. Le script pose la
   duree en ligne, pour qu'un seul chiffre serve des deux cotes, et coupe la
   transition le temps de remettre une fleche a zero. */
.schema--carte .schema-flux {
  transition: stroke-dashoffset 520ms ease, opacity 400ms ease,
              stroke 250ms ease, stroke-width 250ms ease;
}

.schema--carte .schema-flux--fige { transition: none; }

/* La veille, posee apres l'introduction : tout passe en pastel et les
   fleches a peine visibles, pour que la place choisie ressorte seule. */
.schema-carte--veille .schema-noeud,
.schema-carte--veille .schema-zone,
.schema-carte--veille .schema-zone-libelle { opacity: 0.4; }

.schema-carte--veille .schema-flux { opacity: 0.1; }

.schema-carte--veille .schema-noeud.schema-cible--active,
.schema-carte--veille .schema-zone.schema-cible--active,
.schema-carte--veille .schema-zone-libelle.schema-cible--active,
.schema-carte--veille .schema-flux.schema-flux--active { opacity: 1; }

/* Les etiquettes : une pastille posee sur le dessin, qui nomme et rend
   survolable une place sans icone a elle (une zone, les fleches du
   contrat). Elles restent lisibles en veille : ce sont elles qui disent ou
   sont ces places, c'etait tout le probleme. */
.schema-etiquette { transition: opacity 420ms ease; }

.schema-etiquette-fond {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1.5;
  transition: stroke 250ms ease, stroke-width 250ms ease;
}

.schema-etiquette-texte {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  fill: var(--text-secondary);
  transition: fill 250ms ease;
}

.schema-carte--veille .schema-etiquette { opacity: 0.85; }
.schema-carte--veille .schema-etiquette.schema-cible--active { opacity: 1; }

.schema-etiquette.schema-cible--active .schema-etiquette-fond {
  stroke: var(--accent-gold);
  stroke-width: 2.5;
}

.schema-etiquette.schema-cible--active .schema-etiquette-texte { fill: var(--text-primary); }

/* Les places cliquables se signalent avant tout survol : le curseur au
   survol, et en veille un appel lent, decale de l'une a l'autre par le
   script (animation-delay), qui dit que le dessin repond. */
.schema--carte .schema-cible-possible { cursor: pointer; }

/* « both » est indispensable : le script decale chaque icone
   (animation-delay), et sans remplissage l'icone resterait a sa valeur de
   cascade pendant son delai, donc pleinement visible avant de s'eteindre. */
.schema-carte--veille .schema-noeud.schema-cible-possible:not(.schema-cible--active) {
  animation: schema-carte-appel 3.2s ease-in-out infinite both;
}

@keyframes schema-carte-appel {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.66; }
}

/* La place choisie : le disque et son libelle, le chassis d'un terminal,
   la fleche ou le cadre d'une zone passent a l'or. */
.schema-noeud.schema-cible--active { color: var(--accent-gold-text); }
.schema-noeud.schema-cible--active .schema-noeud-fond { stroke: var(--accent-gold); stroke-width: 3; }
.schema-noeud.schema-cible--active .schema-noeud-libelle { fill: var(--text-primary); }
.schema-telephone.schema-cible--active .schema-tel-corps { stroke: var(--accent-gold); stroke-width: 3; }
.schema-flux.schema-cible--active { stroke: var(--accent-gold); stroke-width: 4; opacity: 1; }
.schema-zone.schema-cible--active { stroke: var(--accent-gold); stroke-width: 2; stroke-dasharray: none; }

.schema--carte .schema-svg--survol { cursor: pointer; }

/* Piege de specificite, mesure : au-dessus de 900 px le bloc passe en mode
   comparaison, ou la regle du resume .schemas--seul.schemas--comparaison
   .schema-legende (trois classes, sous hover) remet toute legende en
   display: block. L'encadre perdait sa grille, les douze fiches
   s'empilaient et il mesurait 1 530 px. Trois classes ici aussi, et apres. */
.schema--carte .schema-legende.schema-encadre { display: grid; }

/* Sous 600 px les libelles de noeud sont tus (regle commune) : l'encadre
   reste, c'est lui qui porte le sens, et un appui choisit la place. */
@media (max-width: 599px) {
  .schema-encadre { padding: 0.875rem 1rem; }
  .schema-encadre-titre { font-size: 1.0625rem; }
}

/* Figee, la carte ne suit plus le pointeur : les autres places cessent
   d'appeler, elles ne repondraient pas au survol. Le curseur reste en
   pointeur, car un clic, lui, change bien de place. */
.schema-carte--figee .schema-noeud.schema-cible-possible,
.schema-carte--figee .schema-etiquette { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .schema-encadre-fiche--active > * { animation: none; }
  .schema--carte .schema-flux { transition: none; }
  .schema-carte--veille .schema-noeud.schema-cible-possible:not(.schema-cible--active) {
    animation: none;
  }
}

/* ============================================================
   Visionneuse de la documentation
   ============================================================ */

/* ============================================================
   DCP — Rendu du Markdown dans la visionneuse

   Ne style que ce que outil-markdown.js sait produire : titres h2 a
   h6 (les niveaux du document sont abaisses d'un cran), paragraphes,
   listes simples, citations, tableaux, regles, gras, italique et code
   en ligne.
   ============================================================ */

/* La mesure de lecture reste bornee meme si le cadre est large : un
   document technique se lit mal en lignes de 150 caracteres. Les
   tableaux, eux, echappent a cette limite plus bas. */
.markdown {
  max-width: 78ch;
  color: var(--text-primary);
  font-size: 0.9375rem;
  line-height: 1.75;
}

/* --- Titres ------------------------------------------------------------ */

.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

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

.markdown h2 {
  font-size: 1.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--border);
}

.markdown h3 { font-size: 1.1875rem; }
.markdown h4 { font-size: 1.0625rem; }

.markdown h5,
.markdown h6 {
  font-size: 0.9375rem;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --- Texte courant ----------------------------------------------------- */

.markdown p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

/* Le gras doit ressortir du gris du paragraphe, sinon il passe inapercu
   sur une couleur deja attenuee. */
.markdown strong { color: var(--text-primary); }

.markdown em { font-style: italic; }

.markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background-color: var(--surface-alt);
  color: var(--text-primary);
}

.markdown hr {
  height: 1px;
  border: 0;
  background-color: var(--border);
  margin-block: 2rem;
}

/* --- Listes ------------------------------------------------------------ */

.markdown ul,
.markdown ol {
  margin: 0 0 1rem 1.25rem;
  color: var(--text-secondary);
}

.markdown li { margin-bottom: 0.375rem; }

.markdown li::marker { color: var(--accent-gold); }

/* --- Citations --------------------------------------------------------- */

.markdown blockquote {
  margin: 1.5rem 0;
  padding: 0.875rem 1.25rem;
  border-left: 3px solid var(--accent-gold);
  background-color: var(--surface);
  border-radius: 0 8px 8px 0;
}

.markdown blockquote p {
  margin: 0;
  color: var(--text-primary);
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.0625rem;
}

/* --- Tableaux ---------------------------------------------------------- */

/* Le pack va jusqu'a sept colonnes : le tableau sort de la mesure de
   lecture et defile horizontalement dans son propre conteneur, plutot
   que de pousser toute la page. */
.markdown-tableau {
  max-width: none;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.markdown table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.markdown th,
.markdown td {
  padding: 0.625rem 0.875rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.markdown th {
  background-color: var(--surface);
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}

.markdown td { color: var(--text-secondary); }

.markdown tbody tr:last-child th,
.markdown tbody tr:last-child td { border-bottom: 0; }

/* --- Etat de chargement ------------------------------------------------ */

.markdown-attente {
  color: var(--text-secondary);
  font-style: italic;
}

/* ######################################################################
   3. PAGES : ce qui n'existe que sur une page ; ne redefinit jamais le socle
   ###################################################################### */

/* ============================================================
   Participer : principes et socle juridique
   ============================================================ */

/* ============================================================
   DCP — Les principes et les appuis, sur la page Participer

   Cette feuille a servi l'ancienne page Principes, dont les blocs ont
   ete retires du site le 13 septembre 2026 quand Participer a repris ce
   qui restait. Les regles de ces blocs y ont survecu jusqu'au 6 octobre
   2026 : douze classes que plus aucun balisage ne posait (le
   hors-perimetre, l'explication « ce qu'est un standard », la grille
   « contribuer » et ses pistes, la note des socles). Elles sont parties,
   l'historique git les garde.
   ============================================================ */

/* --- Les quatre affirmations ------------------------------------------ */

.affirmations {
  list-style: none;
  counter-reset: affirmation;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.affirmation {
  counter-increment: affirmation;
  position: relative;
  padding-left: 3rem;
}

.affirmation::before {
  content: counter(affirmation);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid var(--accent-gold);
  color: var(--accent-gold-text);
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 0.9375rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.affirmation-titre {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  padding-top: 0.25rem;
}

.affirmation-texte {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
}

/* --- Les engagements --------------------------------------------------- */

.engagements {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.engagement {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.engagement-titre {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.engagement-texte {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* --- Ce sur quoi nous nous appuyons ----------------------------------- */

/* Trois colonnes pour trois familles : identite, semantique, droit. La
   carte pose son propre fond, la section etant teintee. */
.socles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.socle {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--bg);
}

.socle-titre {
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}

.socle-texte {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* La liste des textes d'appui est un depliant : <details> natif, chevron
   commun de base.css, rien en JS. La mecanique vit dans base.css
   sous .depliant-item, partagee avec tout le site ; ne restent ici que
   la mise en colonne et le filet.

   Ces deux declarations etaient groupees avec .hors-perimetre, l'autre
   liste depliable de l'ancienne page Principes. Elle n'existe plus. */
.socle-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0.75rem 0 0;
}

/* Le filet separe la raison d'etre de la famille de la liste des textes
   sur lesquels elle s'appuie. */
.socle-liste {
  margin-top: 1.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* Les sources partent a la ligne quand il y en a deux, et gardent
   l'alignement du texte. */
.socle-source {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.socle-source a {
  color: var(--accent-gold-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.socle-source a:hover { border-bottom-color: var(--accent-gold); }

.socle-source a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 899px) {
  .affirmations,
  .engagements,
  .socles { grid-template-columns: 1fr; }
}

/* Trois colonnes tiennent mal sous 1100px : les libelles de textes
   reglementaires cassent en trop de lignes. On passe a deux avant le
   repli general, la troisieme carte prenant toute la largeur. */
@media (min-width: 900px) and (max-width: 1099px) {
  .socles { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Participer
   ============================================================ */

/* ============================================================
   DCP — Participer

   La page reunit les anciennes Ecosysteme et Principes : elle charge
   leurs deux feuilles, qui ne connaissent que leurs classes, et
   n'ajoute ici que ce qui tient a la reunion : les ancres du menu, les
   sous-titres qui rythment la longue premiere section, la liste des
   manieres de participer.
   ============================================================ */

/* Les cinq sections sont des cibles du menu : l'en-tete colle en haut de
   la page, un ancrage nu poserait le titre sous lui. Les deux ancres de
   la premiere section (qualifications, manieres) aussi. */
#ecosysteme, #principes, #appuis, #engagements, #feuille-de-route, #manieres {
  scroll-margin-top: 5rem;
}

/* Un sous-titre de section, entre le titre de section et un sous-titre
   de bloc : la premiere section en enchaine six. Il tient la laisse comme
   les titres de page.css. */
.participer-sous-titre {
  font-size: clamp(1.1875rem, 2.25vw, 1.5rem);
  margin: 3.5rem 0 0.75rem;
  margin-left: var(--retrait-laisse);
}

/* Les manieres de participer : motif partage .depliant-item, borne a la
   laisse ; les liens d'une maniere suivent son texte, en ligne. */
.manieres {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: var(--retrait-laisse);
}

.manieres summary { font-size: 1rem; padding-block: 0.75rem; }

.maniere-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  margin-top: -0.25rem;
}

.maniere-liens a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-gold-text);
}

.maniere-liens a:hover { text-decoration: underline; }

.maniere-liens a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================
   Ressources
   ============================================================ */

/* ============================================================
   DCP — Ressources

   Une page d'aiguillage : trois listes depliables, motif partage
   .depliant-item de base.css. Cette feuille ne fait que caler les
   listes sur la laisse de lecture et habiller les deux paragraphes
   propres a une ressource : « Pour quoi et pour qui ? » et le lien.
   ============================================================ */

/* Les sections sont des cibles du menu : l'en-tete colle en haut de la
   page, un ancrage nu poserait le titre sous lui. */
#outils, #projet, #guides { scroll-margin-top: 5rem; }

/* La liste tient la laisse, comme les titres et intros de page.css :
   meme bord gauche, meme largeur bornee. */
.ressources {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: var(--retrait-laisse);
}

/* Le nom de la ressource est un titre de liste, un cran au-dessus du
   motif courant. */
.ressource summary {
  font-size: 1.0625rem;
  padding-block: 0.75rem;
}

.ressource p { font-size: 0.9375rem; }

/* La question fait ressortir sa reponse du gris courant. */
.ressource-pourquoi strong {
  color: var(--text-primary);
  font-weight: 600;
}

.ressource-lien {
  font-weight: 600;
  margin-bottom: 1rem;
}

.ressource-lien a { color: var(--accent-gold-text); }
.ressource-lien a:hover { text-decoration: underline; }

.ressource-lien a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================
   Utiliser le DCP
   ============================================================ */

/* ============================================================
   DCP — Pour les pros

   Une page courte et directe : trois avantages en liste, une chute, un
   etat des lieux, trois ressources depliables (motif partage
   .depliant-item) dont un modele de message. Titres et intros viennent
   de page.css et tiennent la laisse ; tout ici la tient aussi.
   ============================================================ */

/* Les trois avantages : un point dore, le mot-cle en gras, une ligne. */
.avantages {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  margin-left: var(--retrait-laisse);
}

.avantages li {
  position: relative;
  padding: 0.625rem 0 0.625rem 1.5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.avantages li + li { border-top: 1px solid var(--border); }

.avantages li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 0.85rem;
  font-size: 0.625rem;
  color: var(--accent-gold);
}

.avantages strong {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
}

.use-resume { margin-bottom: 1rem; }

/* La chute, une phrase en serif. */
.use-chute {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  margin-left: var(--retrait-laisse);
}

/* Les trois ressources : la laisse, comme les textes courants. */
.use-points {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: var(--retrait-laisse);
}

.use-points summary { font-size: 1rem; padding-block: 0.75rem; }

.use-liens a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-gold-text);
}

.use-liens a:hover { text-decoration: underline; }

/* Le modele de message a envoyer a son editeur : un bloc a part, aligne
   sur le texte, qu'on peut copier tel quel. */
.use-modele {
  margin: 0.25rem 0 0.75rem;
  padding: 0.875rem 1.125rem;
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 8px 8px 0;
  background-color: var(--bg);
}

.use-modele p {
  padding-left: 0;
  margin: 0 0 0.625rem;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.use-modele p:last-child { margin-bottom: 0; }

/* Un sous-titre a l'interieur d'une section, quand un public enchaine deux
   blocs sous le meme titre (les avantages puis « ce que le DCP n'est pas »).
   Meme calibre que .participer-sous-titre, et la meme laisse que les titres
   de page.css. */
.use-sous-titre {
  font-size: clamp(1.1875rem, 2.25vw, 1.5rem);
  margin: 3rem 0 0.75rem;
  margin-left: var(--retrait-laisse);
}

/* Les chantiers ouverts, listes a l'interieur d'un depliant : elle
   s'aligne sur le texte du depliant et reprend le point dore des
   avantages. */
.use-chantiers {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.use-chantiers li {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.use-chantiers li:last-child { margin-bottom: 0; }

.use-chantiers li::before {
  content: '\25c6';
  position: absolute;
  left: 0;
  top: 0.4rem;
  font-size: 0.5rem;
  color: var(--accent-gold);
}

.use-chantiers strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Un lien seul sous une intro de section, hors liste depliable : il tient
   la laisse comme elle, et respire un peu au-dessus du bloc suivant. */
.use-liens--seul {
  margin: -0.5rem 0 0;
  margin-left: var(--retrait-laisse);
}

/* La feuille de route ferme la page, sous l'intro de l'etat des lieux. */
#etat .roadmap-block { margin-top: 2rem; }

/* --- La bascule de public ------------------------------------------------ */

/* Un libelle et les boutons dans un groupe, sur la laisse comme le titre
   en dessous. Elle ouvre la page : l'ecart est donc sous elle, pas dessus. */
.client-choix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  margin-bottom: 2rem;
  margin-left: var(--retrait-laisse);
}

/* Le libelle prend sa ligne : sinon il pousse la grille vers la droite et
   elle depasse le bord droit de la laisse, alors que tout le reste de la
   page s'aligne sur son bord gauche. */
.client-choix-label {
  flex: 0 0 100%;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Le groupe est une GRILLE, pas un galet. Il a suivi le motif de la posture
   du jeu tant qu'il n'y avait que deux publics ; a six, une ligne de 843px
   n'est plus une bascule mais une barre de navigation, et un galet a 999px
   de rayon coupe en deux lignes se lit mal. Le seuil du passage en colonne
   a ete releve deux fois (640, 780, 900px) avant d'admettre que la course
   etait sans fin.
   La grille se remplit d'elle-meme : trois colonnes sur la laisse a 680px,
   deux vers 400px, une seule en dessous, sans media query et sans seuil a
   relever en ajoutant un public. C'est le groupe qui prend toute la largeur
   restante (flex-basis 100% quand le libelle ne tient plus a cote). */
.client-groupe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px;
  flex: 1 1 100%;
  /* min-width: 0 est indispensable : sans lui, la taille minimale
     automatique d'un element flex empeche la grille de descendre sous sa
     largeur intrinseque, auto-fit garde ses trois colonnes de 190px et la
     bascule deborde de 232px a 375px de large. Mesure a l'appui. */
  min-width: 0;
  padding: 3px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.client-btn {
  border: 0;
  padding: 0.625rem 0.875rem;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.client-btn[aria-pressed="true"] {
  background: var(--text-primary);
  color: var(--sur-inverse);
}

.client-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .client-btn { transition: none; }
}

/* Sous 768px, le bouton devient une cible tactile de 45px de haut. */
@media (max-width: 768px) {
  .client-btn { padding-block: 0.75rem; }
}

/* ============================================================
   Simulateur et cas d'usage
   ============================================================ */

/* ============================================================
   DCP — Jeu des cas d'usage
   ============================================================ */

/* Meme calage que .page-entete dans page.css : l'en-tete du site est dans
   le flux, ce retrait ne fait qu'espacer et suit l'accueil. */
.jeu {
  padding-block: 2.25rem 5rem;
}

/* --- Entete --------------------------------------------------------- */

/* L'entete partage le bord gauche de la laisse de lecture, comme les
   .page-entete des autres pages. Le decalage est ecrit ici plutot que dans
   le groupe de page.css parce que .jeu-entete n'existe que sur cette page,
   et parce que game.css est charge apres : une valeur posee la l'emporterait
   de toute facon. Le bloc etant deja borne a 720px, le max() suffit : il
   s'annule des que la fenetre descend sous la laisse. */
.jeu-entete {
  margin-bottom: 2.5rem;
  margin-left: var(--retrait-laisse);
}

.jeu-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.5rem;
}

.jeu-titre {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: 0.75rem;
}

.jeu-chapo {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* Cadrage : rappeler que situations et services sont des exemples. Meme
   idiome encadre que .encart et .hors-perimetre (filet gauche or). */
.jeu-note {
  margin-top: 1.25rem;
  padding: 0.875rem 1.125rem;
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 8px 8px 0;
  background-color: var(--surface);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.jeu-noscript,
.jeu-etat {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.jeu-etat--erreur {
  border-color: var(--status-err-text);
  background-color: var(--status-err-bg);
  color: var(--status-err-text);
}

/* --- Barre de pilotage ---------------------------------------------- */

.jeu-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 2rem;
}

.barre-cas {
  flex: 1 1 320px;
  min-width: 0;
}

.barre-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.375rem;
}

.barre-select-enveloppe {
  position: relative;
  display: block;
}

.barre-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  background-color: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  text-overflow: ellipsis;
}

.barre-select:hover { border-color: var(--accent-gold); }

.barre-select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.barre-chevron {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--accent-gold-text);
  font-size: 0.875rem;
}

/* Bascule acheteur / vendeur */

.posture-groupe {
  display: inline-flex;
  padding: 3px;
  background-color: var(--surface-alt);
  border: 1.5px solid var(--border);
  border-radius: 999px;
}

.posture-btn {
  padding: 0.4375rem 1.125rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.posture-btn[aria-pressed="true"] {
  background-color: var(--text-primary);
  color: var(--bg);
}

.posture-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .posture-btn { transition: none; }
}

/* --- Le cas retenu --------------------------------------------------- */

.jeu-cas {
  margin-bottom: 2.5rem;
}

.cas-theme {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}

.cas-titre {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  margin-bottom: 0.5rem;
}

.cas-accroche {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* --- Blocs ----------------------------------------------------------- */

.jeu-bloc { margin-bottom: 3.5rem; }

.jeu-legende {
  font-size: 1.25rem;
  margin-bottom: 0.375rem;
}

.jeu-sous-legende {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.jeu-legende + .comparaison,
.jeu-legende + .jeu-colonnes { margin-top: 1.25rem; }

/* --- Comparaison avec / sans ----------------------------------------- */

.comparaison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.carte-comparaison {
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* Regle du site : sans le protocole, rouge leger ; avec lui, vert. Voir le
   bloc « Avant / sans le DCP » de tokens.css. */
.carte-comparaison--sans {
  background-color: var(--sans-dcp-fond);
  border-color: var(--sans-dcp-accent);
}

.carte-comparaison--avec {
  background-color: var(--avec-dcp-fond);
  border-color: var(--avec-dcp-accent);
}

.carte-comparaison-titre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
}

.carte-comparaison--sans .carte-comparaison-titre { color: var(--sans-dcp-accent); }
.carte-comparaison--avec .carte-comparaison-titre { color: var(--avec-dcp-accent); }

.carte-coche { font-size: 1rem; }

.carte-comparaison-texte {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0;
}

/* --- Deux colonnes : services / apports ------------------------------ */

.jeu-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.25rem;
  align-items: start;
}

.colonne {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  background-color: var(--bg);
}

.colonne-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.375rem;
}

.colonne-titre {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
}

.colonne-aide {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

/* Les services listes n'existent pas : l'avertissement doit se voir sans
   crier, d'ou le filet or plutot qu'un fond colore, qui entrerait en
   concurrence avec le rouge et le vert de la comparaison juste au-dessus. */
.colonne-avertissement {
  margin: -0.5rem 0 1rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 6px 6px 0;
  background-color: var(--surface);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.colonne-avertissement a { color: var(--accent-gold-text); }

.lien-action {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}

.lien-action:hover { color: var(--accent-gold-text); }

.lien-action:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Liste des services ---------------------------------------------- */

.liste-services {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.service {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.service--actif {
  border-color: var(--status-ok-text);
  background-color: var(--status-ok-bg);
}

@media (prefers-reduced-motion: reduce) {
  .service { transition: none; }
}

/* La case native est masquee visuellement mais reste focalisable :
   l'etiquette entiere sert de cible de clic. */
.service-case {
  position: absolute;
  top: 0.9375rem;
  left: 0.875rem;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--status-ok-text);
  cursor: pointer;
}

.service-etiquette {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.75rem;
  padding: 0.875rem 0.875rem 0.875rem 2.75rem;
  cursor: pointer;
}

.service-nom {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.service-type {
  justify-self: end;
  align-self: start;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}

.service-type[data-type="aiguille"] { border-color: var(--accent-blue); }
.service-type[data-type="teinte"]   { border-color: var(--accent-gold); }

.service-accroche {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.service-case:focus-visible + .service-etiquette {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.service-note {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-style: italic;
  padding: 0.625rem 0.25rem 0;
  border-top: 1px dashed var(--border);
  margin-top: 0.25rem;
}

/* --- Apports groupe par groupe --------------------------------------- */

.apports {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.apports-invite {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  padding: 1.5rem 1rem;
  text-align: center; /* centrage autorise : etat vide, aucun apport selectionne */
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin: 0;
}

.groupe {
  border-left: 3px solid var(--border);
  padding-left: 1rem;
}

.groupe--probleme    { border-left-color: var(--status-err-text); }
.groupe--information { border-left-color: var(--accent-blue); }

.groupe-nature {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.groupe--probleme .groupe-nature    { color: var(--status-err-text); }
.groupe--information .groupe-nature { color: var(--accent-blue); }

.groupe-accroche {
  font-size: 1rem;
  margin-bottom: 0.375rem;
}

.groupe-definition {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.effets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.effet {
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  background-color: var(--surface);
  border-left: 3px solid var(--border);
}

.effet--alerte  { background-color: var(--status-err-bg); border-left-color: var(--status-err-text); }
.effet--info    { background-color: var(--surface);       border-left-color: var(--accent-blue); }
.effet--positif { background-color: var(--status-ok-bg);  border-left-color: var(--status-ok-text); }

.effet-service {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.1875rem;
  color: var(--text-primary);
}

.effet-texte {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0;
}

/* --- Personas -------------------------------------------------------- */

.liste-personas {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.persona {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--bg);
}

.persona--ouvert { border-color: var(--accent-gold); }

.persona-tete {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
}

.persona-tete:hover { background-color: var(--surface); }

.persona-tete:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.persona-identite {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1 1 auto;
  min-width: 0;
}

.persona-nom {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 700;
}

.persona-metier {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.persona-resume {
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 0.1875rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.persona-chevron {
  color: var(--accent-gold-text);
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.persona-tete[aria-expanded="true"] .persona-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .persona-chevron { transition: none; }
}

.persona-panneau {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.persona-portrait {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.persona-sous-titre {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.625rem;
}

.persona-services { margin-bottom: 1.25rem; }
.persona-services ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }

.persona-service-nom {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.1875rem;
}

.persona-service-moti {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.persona-nu {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
  padding: 0.875rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin-bottom: 1.25rem;
}

.persona-point { margin-bottom: 1rem; }
.persona-point:last-child { margin-bottom: 0; }

.persona-point-accroche {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.persona-point ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* --- Responsive ------------------------------------------------------ */

/* minmax(0, 1fr) et non 1fr : une piste de grille vaut min-width:auto par
   defaut et refuse alors de se reduire sous la largeur de son contenu,
   ce qui faisait deborder la colonne sur les petits ecrans. */
@media (max-width: 899px) {
  .jeu-colonnes { grid-template-columns: minmax(0, 1fr); }
  .comparaison  { grid-template-columns: minmax(0, 1fr); }
}

/* La barre bascule des que ses deux blocs ne tiennent plus cote a cote.
   En laissant faire l'enroulement, on obtenait deux rangees surmontees
   chacune de leur libelle, plus hautes que la version empilee. */
@media (max-width: 767px) {
  .jeu-barre {
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
  }

  /* La base de 320px de .barre-cas vaut pour la disposition en ligne ;
     en colonne elle s'appliquerait a la HAUTEUR et etirerait le bloc a
     320px pour 59px de contenu. */
  .barre-cas { flex: 0 0 auto; }

  /* « Vous etes » passe a cote du commutateur plutot qu'au-dessus :
     une rangee de moins, sans rien retirer au sens. */
  .barre-posture {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .barre-posture .barre-label { margin-bottom: 0; }

  .posture-groupe { flex: 1; }

  /* Cible tactile confortable : 32px passait le minimum, sans plus. */
  .posture-btn {
    flex: 1;
    min-height: 40px;
  }
}

@media (max-width: 599px) {
  .jeu { padding-block: 1.5rem 3rem; }

  .persona-tete {
    flex-wrap: wrap;
    padding: 0.875rem 1rem;
  }

  .persona-resume { order: 3; }

  .persona-panneau { padding-inline: 1rem; }

  .service-etiquette { padding-left: 2.5rem; }
}

/* --- Les sections de la page Utiliser ------------------------------------ */

/* Trois sections, cibles des sous-titres du menu : les situations reelles,
   les avantages, les limites. L'en-tete colle en haut de la page, d'ou la
   marge de defilement. Le titre de section est plus grand que les legendes
   des paliers du jeu, qui deviennent ses sous-titres. */
.jeu-section { scroll-margin-top: 5rem; }

.jeu-section + .jeu-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

.jeu-section-titre {
  font-size: clamp(1.375rem, 2.75vw, 1.875rem);
  margin-bottom: 1.5rem;
}

.jeu-legende--espace { margin-top: 2.5rem; }

/* Les gains et les limites : motif partage .depliant-item de base.css,
   borne a la laisse comme les textes courants. Chaque gain porte son
   exemple, tire d'un cas d'usage, et le principe qu'il cite. */
.gains {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gains summary { font-size: 1rem; padding-block: 0.75rem; }

.gain-exemple {
  border-left: 3px solid var(--accent-gold);
  padding-left: 0.875rem;
}

.gain-etiquette {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.25rem;
}

.gain-principe { font-style: italic; }
.gain-principe a { color: var(--accent-gold-text); font-style: normal; font-weight: 600; }
.gain-principe a:hover { text-decoration: underline; }

.jeu-chute {
  max-width: 56ch;
  margin: 2rem 0 0;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-primary);
}

/* Le retour vers la page d'aiguillage, en bas du simulateur : le jeu est
   sorti de /cas-usage/ le 16 septembre 2026, il faut un chemin de retour
   autre que le bouton du navigateur. */
.jeu-retour {
  margin: 2.5rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
}

/* ============================================================
   Utiliser : situations
   ============================================================ */

/* ============================================================
   DCP — La page « Utiliser », page d'aiguillage

   Deux des trois sections sont un duo : le propos a gauche, le menu de
   choix a droite. La troisieme, « Precisions d'usage », est pleine
   largeur et reprend les classes de game.css (.gains, .jeu-legende,
   .jeu-chute), d'ou game.css dans le front matter de la page.
   ============================================================ */

/* Les cinq sections sont les cibles du menu, et l'en-tete est collant sur
   cette page : meme degagement que .jeu-section et les autres pages a
   sous-titres de menu. #etapes s'y est ajoute le 10 octobre 2026 avec la
   frise, venue de l'accueil. */
#comprendre, #simuler, #profils, #etapes, #precisions { scroll-margin-top: 5rem; }

/* --- Mieux comprendre, puis le carrefour --------------------------------- */

/* L'animation « Mon application et mes services », reprise en iframe de
   /services/embarque/ : meme cadre que le resume anime (base.css), collee
   a son titre comme sur Decouvrir. */
#comprendre .resume-cadre { margin-top: 0.5rem; }

/* La phrase qui annonce les deux menus : une bande mince, sans titre, en
   corps un peu plus grand que le texte courant. Elle partage le bord
   gauche de la laisse, comme les titres des pages a conteneur large. */
.utiliser-carrefour { padding-top: 2.5rem; padding-bottom: 0; }

.utiliser-carrefour-texte {
  margin: 0 0 0 var(--retrait-laisse);
  max-width: var(--laisse-texte);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* --- Le duo propos / menu ------------------------------------------------ */

/* Le propos borne sa colonne sur la laisse de lecture, le menu prend le
   reste. Sous 900px la grille tombe en une colonne : un menu de choix
   pose a cote d'un texte devient illisible bien avant 768px. */
.utiliser-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

@media (max-width: 900px) {
  .utiliser-duo {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Dans une colonne de grille, le decalage de laisse de page.css s'annule
   de lui-meme (le max() rend 0 des que la colonne est plus etroite que la
   laisse) : rien a neutraliser ici. */
.utiliser-propos .section-intro { margin-bottom: 1.5rem; }

.utiliser-actions {
  margin: 0 0 1.25rem;
}

.utiliser-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 54ch;
}

/* --- Le menu, cote droit ------------------------------------------------- */

.utiliser-menu-titre {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.utiliser-menu-etat {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Les situations : un depliant par theme (motif partage .depliant-item),
   les situations du theme a l'interieur. Le cadre les tient ensemble et
   les separe du texte de gauche. */
.situations,
.profils {
  list-style: none;
  margin: 0;
  padding: 0.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background-color: var(--bg);
}

.situations summary { font-size: 0.9375rem; }

/* Le nombre de situations du theme, discret, apres son nom. */
.situation-compte {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.situation-liens {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;   /* aligne sur le texte du depliant */
}

.situation-liens li + li { margin-top: 0.125rem; }

.situation-liens a {
  display: block;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.situation-liens a:hover,
.situation-liens a:focus-visible {
  background-color: var(--surface-alt);
}

.situation-liens a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.situation-titre {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.situation-accroche {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- Les profils, meme cadre, sans depliant ------------------------------ */

.profils { padding: 0.5rem; }

.profils li + li { border-top: 1px solid var(--border); }

.profils a {
  display: block;
  padding: 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.profils a:hover,
.profils a:focus-visible { background-color: var(--surface-alt); }

.profils a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.profil-nom {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.profil-note {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .situation-liens a,
  .profils a { transition: none; }
}

/* --- Precisions d'usage -------------------------------------------------- */

/* La section reprend .gains et .jeu-legende de game.css. */

/* Toute la section suit la laisse de lecture, comme l'en-tete de page et
   la phrase de carrefour : le titre et l'intro la tiennent par page.css,
   et les blocs de game.css (legendes, .gains, .jeu-chute), qui partent du
   bord du conteneur, prennent ici le meme decalage. Sans lui, la section
   partait a 65px quand tout le reste de la colonne partait a 293px, et
   se lisait « trop a gauche ». Le max() l'annule des que la fenetre est
   plus etroite que la laisse. Les deux duos au-dessus prennent, eux, toute
   la largeur : un menu de choix a besoin de la place. */
#precisions > .container > .jeu-legende,
#precisions > .container > .jeu-sous-legende,
#precisions > .container > .gains,
#precisions > .container > .jeu-chute {
  margin-left: var(--retrait-laisse);
}

/* ============================================================
   FAQ
   ============================================================ */

/* ============================================================
   DCP — Foire aux questions
   ============================================================ */

.container--faq { max-width: var(--largeur-contenu); }

/* La recherche et les questions prennent tout le cadre commun, comme les
   autres blocs du site. */

/* --- Champ de recherche ------------------------------------------------ */

.faq-recherche {
  display: block;
  margin-bottom: 1.5rem;
}

.faq-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* Le conseil accompagne la question sans peser autant qu'elle. */
.faq-label-conseil {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.faq-champ-enveloppe {
  position: relative;
  display: block;
}

.faq-champ {
  width: 100%;
  padding: 0.875rem 2.75rem;
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--text-primary);
  background-color: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  transition: border-color 150ms ease;
}

.faq-champ::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.faq-champ:hover { border-color: var(--accent-gold); }

.faq-champ:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--accent-gold);
}

/* La croix native du champ de recherche ferait doublon avec la notre. */
.faq-champ::-webkit-search-cancel-button { -webkit-appearance: none; }

@media (prefers-reduced-motion: reduce) {
  .faq-champ { transition: none; }
}

.faq-loupe {
  position: absolute;
  left: 0.9375rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1.25rem;
  color: var(--accent-gold-text);
}

.faq-vider {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-secondary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-vider:hover {
  background-color: var(--surface-alt);
  color: var(--text-primary);
}

.faq-vider:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.faq-aide {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0.5rem 0 0;
}

/* --- Suggestions --------------------------------------------------------- */

.faq-suggestions {
  margin-bottom: 2rem;
  padding: 1.25rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.faq-suggestions-titre {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.75rem;
}

.faq-resultats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.faq-resultat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  text-align: left;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 150ms ease;
}

.faq-resultat:hover { border-color: var(--accent-gold); }

.faq-resultat:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-resultat { transition: none; }
}

.faq-resultat-theme {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.faq-resultat-question {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.45;
}

/* --- Bandeau « rien trouve » ---------------------------------------------- */

.faq-bandeau {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: var(--bg);
  border: 2px solid var(--accent-gold);
  border-radius: 10px;
  text-align: center; /* centrage autorise : etat vide, aucun resultat a la recherche */
}

.faq-bandeau-titre {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
}

.faq-bandeau-texte {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 1.125rem;
}

/* --- Liste des questions --------------------------------------------------- */

.faq-theme {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--bg);
}

.faq-theme:last-child { margin-bottom: 0; }

.faq-theme[open] { border-color: var(--accent-gold); }

/* Premier niveau de depliage. Le chevron est plus marque que celui des
   questions, pour que la hierarchie des deux niveaux se voie. */
.faq-theme-resume {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  position: relative;
  cursor: pointer;
  list-style: none;
  background-color: var(--surface);
}

/* Le chevron vient de base.css, commun a tout le site. Ici, plus marque
   que celui des questions, pour que la hierarchie des deux niveaux se voie. */
.faq-theme-resume::after {
  width: 0.625rem;
  height: 0.625rem;
}

.faq-theme-resume:hover { background-color: var(--surface-alt); }

.faq-theme-resume:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.faq-theme-titre {
  font-size: 1.125rem;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.faq-theme-compte {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

.faq-questions { padding: 0 1.25rem; }

.faq-questions {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.faq-questions > li + li {
  border-top: 1px solid var(--border);
}

/* <details> natif : depliage, clavier et etat annonce sans JavaScript. */
/* Chevron : base.css, commun a tout le site. */
.faq-question {
  padding: 0.875rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
}

.faq-question:hover { color: var(--accent-gold-text); }

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

/* L'en-tete colle en haut de l'ecran : sans cette marge de defilement,
   une question rejointe depuis la recherche s'arreterait dessous. */
.faq-item { scroll-margin-block: 6rem; }

.faq-reponse {
  padding: 0 0 1rem;
}

.faq-reponse p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 0.875rem;
}

.faq-reponse p:last-child { margin-bottom: 0; }

/* --- Etat et sortie ---------------------------------------------------------- */

.faq-etat {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.faq-sortie {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.faq-sortie-texte {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 52ch;
  margin: 0 0 1.25rem;
}

.faq-sortie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

@media (max-width: 599px) {
  .faq-sortie-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .faq-sortie-actions .btn { justify-content: center; }
}

/* ============================================================
   Contact
   ============================================================ */

/* ============================================================
   DCP — Page de contact
   ============================================================ */

.container--contact { max-width: var(--largeur-contenu); }

/* L'entete garde la laisse de lecture ; la grille formulaire et colonne
   d'informations prend tout le cadre commun, comme les grilles des autres
   pages. */
.container--contact > :not(.contact-grille) { max-width: var(--laisse-texte); }

.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

/* --- Formulaire -------------------------------------------------------- */

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.champ-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.champ-requis {
  color: var(--status-err-text);
  margin-left: 0.125rem;
}

.champ-saisie {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-primary);
  background-color: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  transition: border-color 150ms ease;
}

.champ-saisie::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.champ-saisie:hover { border-color: var(--accent-gold); }

.champ-saisie:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--accent-gold);
}

.champ-saisie[aria-invalid="true"] {
  border-color: var(--status-err-text);
}

@media (prefers-reduced-motion: reduce) {
  .champ-saisie { transition: none; }
}

.champ-zone {
  resize: vertical;
  min-height: 9rem;
  line-height: 1.65;
}

/* Le select natif garde son menu systeme, plus sur sur mobile ; seule la
   fleche est remplacee pour s'accorder au reste. */
.champ-select-enveloppe {
  position: relative;
  display: block;
}

.champ-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  cursor: pointer;
}

.champ-chevron {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--accent-gold-text);
  font-size: 0.875rem;
}

.champ-aide {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

[data-compteur] {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
}

.champ-aide--alerte,
.champ-aide--alerte [data-compteur] {
  color: var(--status-err-text);
}

.champ-erreur {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--status-err-text);
  line-height: 1.55;
  margin: 0;
}

/* --- Actions et etat ---------------------------------------------------- */

.formulaire-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: 0.25rem;
}

.lien-discret {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lien-discret:hover { color: var(--accent-gold-text); }

.formulaire-etat {
  margin: 0;
  padding: 0.875rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.6;
  border: 1px solid var(--border);
}

.formulaire-etat--ok {
  background-color: var(--status-ok-bg);
  border-color: var(--status-ok-text);
  color: var(--text-primary);
}

.formulaire-etat--erreur {
  background-color: var(--status-err-bg);
  border-color: var(--status-err-text);
  color: var(--text-primary);
}

/* --- Colonne d'appoint --------------------------------------------------- */

.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.aside-bloc {
  padding: 1.375rem 1.5rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.aside-titre {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.aside-texte {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.aside-bloc .btn { width: 100%; justify-content: center; }

.aside-courriel {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-gold-text);
  word-break: break-word;
}

.aside-note {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0.75rem 0 0;
}

.aside-bloc .aside-texte:last-child { margin-bottom: 0; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 899px) {
  .contact-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
}

@media (max-width: 599px) {
  .formulaire-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .formulaire-actions .btn { justify-content: center; }
  .lien-discret { text-align: center; } /* centrage autorise : lien seul sous des boutons empiles */
}

/* ============================================================
   Actus
   ============================================================ */

/* ============================================================
   DCP — Page Actus

   Seule page du site en anthracite : elle garde son fond quel que
   soit le theme actif, et redefinit donc localement les variables
   dont dependent l'entete de page, les cartes et les boutons.
   ============================================================ */

.actus {
  --anthracite:       #22262B;
  --anthracite-clair: #2C3137;

  /* On rebranche les jetons du systeme sur la teinte anthracite plutot
     que de redecliner chaque composant : les cartes et les boutons
     suivent alors sans reecriture. */
  --bg:             var(--anthracite);
  --surface:        var(--anthracite-clair);
  --surface-alt:    #363C43;
  --text-primary:   #F1EFEA;
  --text-secondary: #A9B0B8;
  --border:         #3D444C;
  --accent-gold-text: var(--accent-gold);

  background-color: var(--anthracite);
  color: var(--text-primary);
}

/* La section teintee doit se distinguer du fond, pas s'y fondre */
.actus .section--surface {
  background-color: var(--anthracite-clair);
}

/* Les cartes se posent sur le fond plutot que de s'y confondre : sans
   cela elles heritent du meme anthracite que la page et ne tiennent plus
   que par leur bordure. */
.actus .carte {
  background-color: var(--anthracite-clair);
}

.actus .section--surface .carte {
  background-color: var(--anthracite);
}

/* --- Les publications --------------------------------------------------- */

.actus-liste {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-inline: var(--retrait-laisse) 0;
}

.actu {
  padding: 1.75rem;
  background-color: var(--anthracite-clair);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 10px 10px 0;
  scroll-margin-block: 6rem;
}

.actu-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.actu-date {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-gold-text);
}

.actu-categorie {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.actu-titre {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  line-height: 1.25;
  margin-bottom: 0.375rem;
}

.actu-auteur {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.actu-chapo {
  font-size: 1.0625rem;
  color: var(--text-primary);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.actu-corps p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 0.875rem;
}

.actu-corps p:last-child { margin-bottom: 0; }

/* --- Etat vide -------------------------------------------------------- */

.actus-vide {
  padding: 3rem 2.5rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center; /* centrage autorise : etat vide, aucune actualite */
  margin-inline: var(--retrait-laisse) 0;
}

.actus-vide-marque {
  font-size: 2rem;
  color: var(--accent-gold);
  margin-bottom: 0.75rem;
  line-height: 1;
}

.actus-vide-titre {
  font-size: 1.375rem;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.actus-vide-texte {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.75rem;
}

.actus-vide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* --- Trois pistes ------------------------------------------------------ */

.actus-pistes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 899px) {
  .actus-pistes { grid-template-columns: 1fr; }
  .actus-vide { padding: 2rem 1.5rem; }
}

/* ============================================================
   Outil du modele
   ============================================================ */

/* ============================================================
   DCP — Outil « Le modele »
   Le chassis (entete, barre, cadre defilant) vient d'outils.css ;
   cette feuille ne porte que les deux colonnes et la fiche.
   ============================================================ */

.outil-chapo {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 68ch;
  margin: 0.75rem 0 0;
}

.modele-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* --- Bascule de langue -------------------------------------------------- */

/* Deux boutons plutot qu'un menu : le choix est binaire et doit se voir
   sans etre deploye, comme la bascule de theme. */
.modele-langues {
  display: inline-flex;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.modele-langue {
  padding: 0.5rem 0.75rem;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .modele-langue { transition: none; }
}

.modele-langue + .modele-langue { border-left: 1px solid var(--border); }

.modele-langue:hover { color: var(--text-primary); }

.modele-langue:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.modele-langue[aria-pressed="true"] {
  background-color: var(--accent-gold);
  color: #0F1F33;
}

/* --- Les deux colonnes -------------------------------------------------- */

.modele {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}

.modele-colonne-titre {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

/* --- Colonne de gauche : le dictionnaire -------------------------------- */

.modele-termes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.modele-terme-btn {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .modele-terme-btn { transition: none; }
}

.modele-terme-btn:hover { background-color: var(--surface); }

.modele-terme-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* L'or porte la selection : c'est la seule couleur d'accent de l'ecran. */
.modele-terme-btn--actif {
  background-color: var(--surface);
  border-left-color: var(--accent-gold);
}

.modele-terme-fr {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modele-terme-en {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--text-secondary);
}

/* --- Colonne de droite : le terme --------------------------------------- */

.modele-terme {
  margin-bottom: 1rem;
}

.modele-statut {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

/* Les deux defauts se distinguent : ce ne sont pas des objets du modele. */
.modele-statut[data-statut="defaut"] {
  border-color: var(--status-err-text);
  color: var(--status-err-text);
}

.modele-terme-titre {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  margin-bottom: 0.5rem;
}

.modele-terme-titre .modele-terme-en {
  font-size: 1rem;
  font-weight: 400;
}

.modele-definition {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 68ch;
  margin: 0;
}

.modele-note {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 68ch;
  margin: 0.75rem 0 0;
  padding-left: 0.875rem;
  border-left: 2px solid var(--border);
}

/* Entrees multiples, quand plusieurs types portent une meme notion */
.modele-entrees {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1rem;
}

.modele-entrees-titre {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.modele-entrees-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.modele-entree {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  cursor: pointer;
}

.modele-entree:hover { border-color: var(--accent-gold); }

.modele-entree:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.modele-entree--actif {
  border-color: var(--accent-gold);
  background-color: var(--surface);
}

/* --- Le fil d'Ariane ---------------------------------------------------- */

.modele-fil {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.modele-fil-titre {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.modele-fil ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem;
}

/* Le chevron separe les etapes sans etre lu par les lecteurs d'ecran. */
.modele-fil li + li::before {
  content: '›';
  margin-right: 0.375rem;
  color: var(--text-secondary);
}

.modele-fil-etape {
  border: 0;
  background: none;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--accent-gold-text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.modele-fil-etape:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.modele-fil-courant {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--text-primary);
  font-weight: 600;
}

/* --- La fiche ----------------------------------------------------------- */

.modele-cadre {
  height: clamp(20rem, calc(100vh - 30rem), 46rem);
}

.fiche-entete {
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.fiche-titre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.125rem;
  color: var(--text-primary);
  margin: 0;
}

.fiche-source {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0.25rem 0 0;
}

.fiche-source code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* La description que le schema donne de l'objet : le texte le plus
   important de la fiche, donc en pleine couleur et non en gris. */
.fiche-description {
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.75;
  max-width: 74ch;
  margin: 0 0 1.25rem;
}

/* Les regles du schema : longues, donc repliees. */
.fiche-regles {
  margin-bottom: 1.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 8px 8px 0;
  background-color: var(--surface);
}

/* Chevron : base.css, commun a tout le site. */
.fiche-regles > summary,
.fiche-valeurs > summary {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.fiche-regles > summary:hover,
.fiche-valeurs > summary:hover { color: var(--accent-gold-text); }

.fiche-regles > summary:focus-visible,
.fiche-valeurs > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.fiche-regles-intro {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.8;
  max-width: 74ch;
}

/* Les regles se detachent de l'introduction : un libelle a la ligne, puis
   une enumeration numerotee. Le schema les ecrit d'affilee dans un seul
   paragraphe, ce qui les rendait indistinctes. */
.fiche-regles-libelle {
  margin: 1rem 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.fiche-regles-liste {
  margin: 0;
  padding-left: 1.5rem;
  max-width: 74ch;
}

.fiche-regles-liste li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 0.5rem;
}

.fiche-regles-liste li:last-child { margin-bottom: 0; }

/* Le numero reprend l'or, comme les puces des listes du site. */
.fiche-regles-liste li::marker {
  color: var(--accent-gold-text);
  font-weight: 600;
}

.fiche-bloc { margin-bottom: 1.75rem; }
.fiche-bloc:last-child { margin-bottom: 0; }

.fiche-bloc h4 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.625rem;
}

.fiche-bloc ul { list-style: none; }

/* Une ligne d'attribut ou de champ : la tete porte le nom et ses
   qualificatifs, la description vient dessous sur toute la largeur. */
.fiche-ligne {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
}

.fiche-ligne:last-child { border-bottom: 0; }

.fiche-ligne-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.fiche-ligne-tete code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  color: var(--text-primary);
  flex: 0 1 auto;
}

/* Le texte s'aligne sur le nom du champ, pas sur le bord du cadre. */
.fiche-ligne-texte {
  margin: 0.3125rem 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 74ch;
}

/* --- Les valeurs d'un champ enumere -------------------------------------- */

.fiche-valeurs { margin-top: 0.5rem; }

.fiche-valeurs-nb {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  padding: 0.0625rem 0.3125rem;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.fiche-valeurs ul {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
  padding-left: 0;
}

.fiche-valeurs li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.fiche-valeurs code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--accent-gold-text);
  flex-shrink: 0;
}

.fiche-valeur-texte {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.fiche-type {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.fiche-cardinalite {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 0.0625rem 0.375rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.fiche-requis {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-gold-text);
}

/* Le bouton de bascule : c'est lui qui porte l'exploration. */
.fiche-lien {
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--accent-gold-text);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .fiche-lien { transition: none; }
}

.fiche-lien:hover {
  border-color: var(--accent-gold);
  background-color: var(--surface);
}

.fiche-lien:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.fiche-bloc--retour .fiche-retours {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.fiche-lien--retour { color: var(--text-secondary); }

.fiche-vide {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  font-style: italic;
}

/* --- Réagir, contribuer -------------------------------------------------- */

.contrib {
  margin-top: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--bg);
}

/* Chevron : base.css, commun a tout le site. */
.contrib-titre {
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.contrib-titre:hover { color: var(--accent-gold-text); }

.contrib-titre:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: 10px;
}

.contrib-corps {
  padding: 0 1.25rem 1.25rem;
  max-width: 42rem;
}

.contrib-intro,
.contrib-aide {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 1rem;
}

.contrib-objet {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0 0 1.25rem;
}

.contrib-objet code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-primary);
}

.contrib-champ { margin-bottom: 1rem; }

.contrib-champ label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}

.contrib-champ input,
.contrib-champ select,
.contrib-champ textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.contrib-champ textarea {
  resize: vertical;
  min-height: 6rem;
}

.contrib-champ input:hover,
.contrib-champ select:hover,
.contrib-champ textarea:hover { border-color: var(--accent-gold); }

.contrib-champ input:focus-visible,
.contrib-champ select:focus-visible,
.contrib-champ textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.contrib-compteur {
  margin: 0.3125rem 0 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Le champ du defi n'a pas besoin de toute la largeur. */
.contrib-defi input { max-width: 8rem; }

.contrib-defi .contrib-aide { margin: 0.5rem 0 0; }

.contrib-actions { margin-top: 1.25rem; }

.contrib-etat {
  margin: 1rem 0 0;
  padding: 0.875rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.7;
}

.contrib-etat--erreur {
  background-color: var(--status-err-bg);
  color: var(--status-err-text);
}

.contrib-etat--ok {
  background-color: var(--status-ok-bg);
  color: var(--status-ok-text);
}

/* --- Responsive ---------------------------------------------------------- */

/* La colonne du dictionnaire devient une liste au-dessus de la fiche ;
   en dessous de 700px c'est le selecteur de la barre qui prend le relais,
   la liste des quatorze termes prendrait tout l'ecran. */
@media (max-width: 1023px) {
  .modele { grid-template-columns: 1fr; gap: 1.5rem; }
  .modele-termes {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .modele-terme-btn {
    width: auto;
    border-left: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
  }
  .modele-terme-btn--actif { border-color: var(--accent-gold); }
}

@media (max-width: 699px) {
  .modele-dictionnaire { display: none; }
  .modele-cadre { height: clamp(18rem, calc(100vh - 22rem), 40rem); }
}

/* Le selecteur ne sert que quand la liste est masquee. */
@media (min-width: 700px) {
  .modele-choix { display: none; }
}

@media (max-width: 599px) {
  .modele-actions { width: 100%; }
  .modele-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   Accueil
   ============================================================ */

/* ============================================================
   DCP — Page d'accueil

   Les sections alternent fond de page et fond teinte, et les
   cartes prennent toujours l'autre des deux : elles se detachent
   ainsi sans avoir besoin d'ombre.
   ============================================================ */

/* --- Titres de section ------------------------------------------------- */

/* .section-titre et .section-intro : base.css, communs a tout le site. Ne
   reste ici que l'ecart propre a l'accueil, ou une grille suit le titre. */
.section-titre + .apercu-grille,
.section-titre + .reversals-grid,
.section-titre + .frise {
  margin-top: 3rem;
}

/* Les sections sont des cibles du menu : l'en-tete est fixe sur cette
   page, un ancrage nu poserait le titre sous lui. */
/* .section-etapes a quitte cette liste le 10 octobre 2026 avec la frise,
   partie sur Utiliser : elle y prend les classes de section de la page. */
.section-clin, .section-pratique, .section-exigences, .section-loin {
  scroll-margin-top: 6rem;
}

/* --- En un clin d'oeil : le resume anime embarque -------------------- */

/* Les bandes alternent a partir du hero : hero sur le fond de page, clin
   d'oeil teinte, En pratique sur le fond, cinq etapes teintee, aller plus
   loin sur le fond. Le hero et le clin d'oeil partageaient le fond de page
   et la coupure entre les deux ne se voyait pas, ou mal. */
.section-clin {
  padding-block: 4rem;
  background-color: var(--surface);
}

/* Sans chapo, le titre est directement suivi de l'animation. */
.section-clin .section-titre { margin-bottom: 1.5rem; }

/* --- Hero -------------------------------------------------------------- */

.hero {
  padding-block: 8rem 3.5rem;
  background-color: var(--bg);
}

/* Espace pour le header fixe en accueil : sa hauteur reelle, mesuree par
   header.js (--entete-accueil-h), plus une marge. Une valeur ecrite en dur
   ne tenait pas sur telephone, ou l'en-tete empile logo, devise et
   boutons : ceux-ci tombaient sur le texte. Le repli ne sert que sans
   JavaScript ou avant la premiere mesure. */
body[data-page="accueil"] .hero {
  padding-top: calc(var(--entete-accueil-h, 12.5rem) + 1.5rem);
}

/* Le hero prend le cadre commun, son texte garde une longueur de ligne
   lisible (le titre et le chapo sont bornes en ch plus bas). */
.hero-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Typographie du surtitre : base.css. */
.hero-eyebrow { margin: 0; }

/* La litanie d'exemples : elle doit se lire d'un coup d'oeil, comme une
   liste de griefs, avant que le titre n'annonce le remede. */
.hero-exemples {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent-gold);
}

.hero-exemples li {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.45;
}

/* Taille plafonnee pour que « Vos contrats au meme format, » tienne sur
   une seule ligne : a 3.25rem elle depassait de 8px la largeur utile et
   se repliait, ce qui donnait trois lignes au lieu des deux voulues. */
.hero-title {
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  color: var(--text-primary);
  margin-top: 0.5rem;
}

.hero-title em {
  font-style: italic;
  color: var(--accent-gold-text);
}

/* L'ouverture se deroule : les quatre griefs arrivent l'un apres l'autre,
   comme une liste qu'on egrene, puis le titre qui y repond, puis le texte.
   Un seul mouvement, a l'arrivee, et rien du tout pour qui a demande
   moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  .hero-exemples li,
  .hero-title,
  .hero-lead {
    animation: deroule 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero-exemples li:nth-child(1) { animation-delay: 80ms; }
  .hero-exemples li:nth-child(2) { animation-delay: 220ms; }
  .hero-exemples li:nth-child(3) { animation-delay: 360ms; }
  .hero-exemples li:nth-child(4) { animation-delay: 500ms; }
  .hero-title { animation-delay: 720ms; }
  .hero-lead { animation-delay: 900ms; }
}

@keyframes deroule {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

.hero-lead {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  max-width: 66ch;
  margin: 0;
  line-height: 1.75;
}

/* Meme raison que pour .point-texte : sur un gris deja attenue, le gras
   seul passe inapercu, et le mot mis en avant doit se voir. */
.hero-lead strong { color: var(--text-primary); }

/* --- En pratique : la meme offre vue des deux facons, puis les quatre
   renversements, dans une seule bande teintee --------------------------- */

/* Les deux sections du recit restent sur le fond de page : leurs volets et
   leurs cartes prennent --surface, donc une bande teintee les ferait
   disparaitre. La coupure se voit par le titre et sa perle sur le fil. */
.section-pratique, .section-exigences {
  padding-block: 4rem;
  background-color: var(--bg);
}

/* Deux sections de suite sur le meme fond : leurs retraits s'additionnent et
   creusent 128 px entre le dernier paragraphe de l'une et le titre de
   l'autre. Entre deux bandes de couleurs differentes cet ecart se justifie,
   c'est la respiration interieure de chaque bande ; ici il ne se voit que
   comme un trou. Le titre suivant remonte donc de la moitie, et le retrait
   bas de la section precedente fait seul l'ecart (mesure le 10 octobre
   2026 : 120 et 128 px avant, 56 et 64 apres). N'ajouter une paire ici que
   si les deux sections partagent vraiment leur fond. */
.hero + .section-pratique,
.section-pratique + .section-exigences { padding-top: 0; }

/* Les deux volets ont la meme hauteur (stretch) : face a face, deux
   cadres de tailles differentes se lisaient comme deux blocs sans rapport,
   alors qu'ils montrent la meme offre. */
.apercu-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

/* Les deux volets imitent un extrait de contrat, pas une carte
   marketing : bord franc, hierarchie de document. En colonne flexible,
   pour que le pied du volet « sans » (la case a cocher et les petits
   caracteres) descende en bas du cadre, comme au pied d'un contrat, au lieu
   de laisser un vide sous lui. */
.apercu {
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
}


/* Regle du site : sans le protocole, rouge ; avec lui, vert. Ici la couleur
   reste au bord et au filet, sans fond teinte : ces deux volets imitent un
   extrait de contrat, et le volet « avec » porte a l'interieur du rouge
   (« puis 39,99 € ») et du vert (« identite verifiee »). Un fond colore les
   ferait lutter. Voir le bloc « Avant / sans le DCP » de tokens.css. */
.apercu--sans {
  border-color: var(--sans-dcp-accent);
  box-shadow: inset 3px 0 0 var(--sans-dcp-accent);
}

.apercu--avec {
  border-color: var(--avec-dcp-accent);
  box-shadow: inset 3px 0 0 var(--avec-dcp-accent);
}

.apercu-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.apercu--sans .apercu-label { color: var(--sans-dcp-accent); }
.apercu--avec .apercu-label { color: var(--avec-dcp-accent); }

.apercu-produit {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

.apercu-vendeur {
  display: block;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--status-ok-text);
  margin-top: 0.25rem;
}

.apercu-prix {
  font-size: 1.0625rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.apercu-prix strong {
  color: var(--status-err-text);
  font-weight: 700;
}

.apercu-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.apercu-liste li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.apercu-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--border);
}

.apercu--avec .apercu-liste li::before {
  background-color: var(--status-ok-text);
}

/* La case a cocher et la ligne minuscule sont la pour ce qu'elles
   evoquent : le consentement expedie et les petits caracteres. */
.apercu-case {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  /* auto : le pied descend en bas du volet, a hauteur egale des deux. */
  margin-top: auto;
  margin-bottom: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.apercu-case-marque {
  font-size: 1rem;
  color: var(--text-secondary);
}

.apercu-petit {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  opacity: 0.65;
  margin: 0;
}

.apercu-chute {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.25rem;
  color: var(--text-primary);
  margin: 2.5rem 0 0;
  max-width: 56ch;
}

.apercu-chute--suite {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 64ch;
  margin-top: 1rem;
}


/* --- Les quatre renversements ------------------------------------------ */

.reversals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

/* En pratique est sur le fond de page : les cartes prennent la teinte
   pour s'en detacher, comme les volets de l'apercu. */
.reversal-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.reversal-choc {
  font-size: clamp(1.25rem, 2.25vw, 1.625rem);
  line-height: 1.2;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.reversal-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reversal-label--before { color: var(--sans-dcp-accent); }

/* La fleche est produite par le libelle lui-meme. Le <div> d'origine,
   etant un bloc, occupait sa propre ligne et rejetait « Demain, avec le
   DCP » en dessous. On le masque plutot que de le retirer du balisage :
   le rendu reste juste quelle que soit la version du contenu livree, et
   la fleche etait de toute facon aria-hidden. */
.reversal-arrow { display: none; }

.reversal-label--after {
  color: var(--avec-dcp-accent);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
}

.reversal-label--after::before {
  content: '→';
  color: var(--accent-gold);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.reversal-text {
  font-size: 0.9375rem;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.7;
}

/* --- Points depliables ------------------------------------------------ */

/* <details> natif : le depliage, le clavier et l'etat annonce aux
   lecteurs d'ecran sont acquis sans une ligne de JavaScript. */
.points {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0.375rem 0 0;
}

.points > li + li {
  border-top: 1px solid var(--border);
}

/* Le repere de depliage (chevron a droite) vient de base.css, commun a
   tout le site. */
.point-titre {
  padding: 0.625rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.45;
}

summary.point-titre:hover { color: var(--accent-gold-text); }

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

.point-texte {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* L'emphase doit ressortir du gris du paragraphe, sinon le gras seul
   passe inapercu sur une couleur deja attenuee. */
.point-texte strong { color: var(--text-primary); }

/* --- Les deux causes, dans le hero ------------------------------------ */

.points--hero {
  margin: 0.25rem 0 0.5rem;
}

/* Les trois racines de l'accueil sont depliables : l'intitule porte
   l'argument et se lit sans rien faire, le paragraphe qui l'explique
   n'arrive qu'a qui le demande. Le chevron commun suffit a l'annoncer,
   et le summary garde donc le flex de base.css qui le loge ; les deux
   membres de la phrase passent par .point-phrase, sans quoi, enfants
   directs du flex, ils se poseraient cote a cote au lieu de
   s'enchainer. */
.points--hero .point-titre {
  padding: 0.75rem 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
}

/* Un seul enfant du summary, donc un seul bloc de texte continu : le
   chevron reste le second enfant et se cale a droite. */
.points--hero .point-phrase {
  display: block;
}

.points--hero .point-texte {
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}

/* Le constat prend le rouge des irregularites, la reponse le vert du
   DCP : les deux couleurs de statut du site, opposees terme a terme. La
   lecture separe les deux membres sans qu'aucun mot ait a l'annoncer. */
.point-probleme {
  color: var(--status-err-text);
}

.point-reponse {
  color: var(--status-ok-text);
  font-weight: 600;
}

/* L'exemple ferme la carte : meme offre de box a chaque fois, ce qui
   fait le lien d'un renversement au suivant. */
/* L'exemple ouvre la carte depuis le 10 octobre 2026 : toute la page file
   le meme abonnement, et chaque carte repart de ce contrat-la avant d'en
   tirer la regle. Il fermait la carte jusque-la, colle en bas par un
   « margin-top: auto » qui n'a plus lieu d'etre. */
.reversal-example {
  margin-bottom: 0.5rem;
  padding: 1rem 1.125rem;
  background-color: var(--bg);
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 8px 8px 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.reversal-example-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.375rem;
}

/* --- La frise en cinq etapes ------------------------------------------- */

.frise {
  list-style: none;
  position: relative;
}

/* Le fil continu qui relie les pastilles. Il s'arrete au centre de la
   premiere et de la derniere, pour ne pas depasser dans le vide. */
.frise::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  transform: translateX(-1px);
  background-color: var(--border);
}

.etape {
  position: relative;
  padding-left: 4.5rem;
  padding-bottom: 2.5rem;
}

.etape:last-child { padding-bottom: 0; }

/* Pastille numerotee, posee sur le fond de section pour masquer le fil */
.etape-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1.5px solid var(--accent-gold);
  background-color: var(--surface);
  color: var(--accent-gold-text);
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.etape-titre {
  font-size: 1.1875rem;
  margin-bottom: 0.5rem;
  padding-top: 0.625rem;
}

.etape-texte {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 0;
}

/* L'exemple, en retrait et en italique : on entend la difference entre
   la regle et le cas. Il ouvre l'etape depuis le 10 octobre 2026, comme
   l'exemple ouvre chaque carte : le cas d'abord, la regle ensuite. */
.etape-exemple {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0 0 0.75rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent-blue);
}

.etapes-coda {
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.0625rem;
  color: var(--text-primary);
  line-height: 1.7;
}

/* La derniere section porte les limites, l'invitation et le fil. */
.section-loin {
  padding-block: 4rem;
  background-color: var(--bg);
}

.section-loin .limites { margin-top: 2.5rem; }

/* L'invitation ferme l'animation depuis le 10 octobre 2026 : la regle suit
   le bloc, qui a vecu sous .section-loin puis sous .section-etapes. */
.section-clin .cta-block { margin-top: 2.5rem; }

/* --- Le perimetre : ce que le DCP n'est pas ---------------------------- */

/* Marges resserrees par rapport aux autres sections : celle-ci ne contient
   qu'une carte encadree, dont la bordure ferme deja le propos. Les 4rem
   habituels s'ajoutaient aux 5rem de la section suivante et laissaient
   144px de vide, tres visibles sous un bord net. */
.section-limites {
  padding-block: 2rem;
  background-color: var(--bg);
}

/* Bandeau plein et bordure epaisse : c'est la premiere question d'un
   professionnel du secteur, elle ne peut pas se lire comme une note de
   bas de page. L'or plutot que le rouge : ce sont des frontieres
   assumees, pas des avertissements. */
.limites {
  border: 2px solid var(--accent-gold);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--bg);
}

.limites-bandeau {
  margin: 0;
  padding: 0.875rem 1.5rem;
  background-color: var(--accent-gold);
  color: #0F1F33;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Empilees et non en colonnes : cote a cote, la grille etirait les trois
   a la hauteur de la plus haute, et le texte le plus court laissait
   jusqu'a cinq lignes vides sous lui, d'autant plus visibles que la
   largeur augmentait. En rangees, chacune epouse son contenu. */
.limites-corps {
  display: flex;
  flex-direction: column;
}

.limite {
  padding: 1.375rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.limite:last-child { border-bottom: none; }

.limite-titre {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

/* Puce doree : elle rythme la lecture des trois refus et remplace la
   separation verticale qu'assuraient les colonnes. */
.limite-titre::before {
  content: '✕';
  flex-shrink: 0;
  color: var(--accent-gold);
  font-size: 0.875rem;
}

.limite-titre {
  font-size: 1.0625rem;
  margin-bottom: 0.625rem;
  color: var(--text-primary);
}

.limite-texte {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

.limites-chute {
  margin: 0;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  background-color: var(--surface);
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.7;
}

/* --- Appel a l'action final ---------------------------------------------- */

.section-cta {
  padding-block: 5rem;
  background-color: var(--surface);
}

.cta-block {
  background-color: var(--text-primary);
  color: var(--bg);
  border-radius: 12px;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.cta-title {
  color: var(--sur-inverse);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.cta-body {
  font-size: 1rem;
  color: var(--sur-inverse-doux);
  margin: 0;
  line-height: 1.75;
}

/* Les deux boutons sur une ligne : le bloc est un flex en colonne, deux
   enfants directs s'empileraient. */
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Le bloc est inverse : .btn-outline y prendrait --text-primary en texte,
   c'est-a-dire exactement le fond du bloc, et --border en bordure, calee
   sur l'autre sens. La famille --sur-inverse* existe pour ce cas, et elle
   bascule dans le bon sens avec le theme. */
.cta-actions .btn-outline {
  color: var(--sur-inverse);
  border-color: var(--sur-inverse-doux);
}

.cta-actions .btn-outline:hover {
  color: var(--sur-inverse-lien);
  border-color: var(--sur-inverse-lien);
}

/* --- Participer : le collectif, apres l'invitation personnelle --------- */

.participer {
  margin: 3.5rem 0 0;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

.participer-titre {
  font-size: clamp(1.375rem, 2.75vw, 1.75rem);
  margin-bottom: 0.75rem;
}

.participer-intro {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 52ch;
  margin: 0 0 2.5rem;
}

/* Le fil : un role par ligne, et la ligne entiere est le lien vers sa
   page de public. C'etait un depliant partage (.depliant-item) jusqu'au
   10 octobre 2026 ; le chevron pointe donc maintenant a droite, et non
   plus vers le bas : il annonce une navigation, pas un volet. Il est
   dessine par deux bordures comme celui des depliants, pour ne dependre
   d'aucune police.
   les outils qui servent a ce role suivent le texte, en ligne. */
.participer-liste {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.participer-liste li + li {
  border-top: 1px solid var(--border);
}

.participer-liste a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* 44 px : la cible tactile minimale (WCAG 2.2, 2.5.8), que le depliant
     remplace tenait deja. */
  min-height: 44px;
  padding: 0.625rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
  /* Le fil dore des liens de texte (socle) souligne tout ce qui est dans
     un li : sur une ligne entiere, il ferait un trait d'un bord a l'autre. */
  text-decoration: none;
}

.participer-liste a:hover { color: var(--accent-gold-text); }

.participer-liste a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.participer-liste a::after {
  content: '';
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  margin-right: 0.25rem;
  border-right: 2px solid var(--accent-gold-text);
  border-bottom: 2px solid var(--accent-gold-text);
  transform: rotate(-45deg);
}

.participer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 899px) {
  .apercu-grille,
  .reversals-grid { grid-template-columns: 1fr; }

}

@media (max-width: 767px) {
  .hero { padding-block: 3rem; }
  body[data-page="accueil"] .hero { padding-top: calc(var(--entete-accueil-h, 14.5rem) + 1.5rem); }

  .section-clin,
  .section-pratique,
  .section-exigences,
  .section-loin { padding-block: 3rem; }

  .section-limites { padding-block: 1.5rem; }

  .reversal-card { padding: 1.25rem; }

  .etape { padding-left: 3.5rem; }
  .etape-num { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
  .frise::before { left: 1.25rem; top: 1.25rem; bottom: 1.25rem; }

  .limite { padding: 1.25rem; }
  .limites-bandeau { font-size: 1.0625rem; }

  .cta-block { padding: 2rem; }

  .participer { margin-top: 2.5rem; padding-top: 2rem; }
  .participer-actions { flex-direction: column; align-items: stretch; }
  .participer-actions .btn { justify-content: center; }
}