/* =============================================================================
   ARDOISE — le site public
   -----------------------------------------------------------------------------
   Depuis la refonte du 2026-09-12, le parti pris n'est plus le dossier imprimé
   sur papier chaud : c'est un dossier statutaire, fond bleu-gris froid, cuivre
   en accent, cartes à ombre plutôt que rangées à filet. Pierre a fourni le
   gabarit exact (palette, type, composants) ; ce fichier le recopie, il ne le
   réinterprète pas. L'ancienne palette (papier crème, or #8E6B2A, encre
   #191713) a été retirée jusque dans le logo et le favicon — elle ne doit plus
   apparaître nulle part, y compris dans les pages que cette refonte n'a pas
   encore reprises une à une.

   Ce qui ne change pas, parce que ce ne sont pas des choix d'habillage :

   1. LE PRODUIT SE MONTRE DANS SES VRAIES COULEURS, RECONSTITUÉ EN CSS. Les
      planches (section 9) gardent les couleurs EXACTES du logiciel — jetons
      `--app-*`, distincts de tout jeton d'habillage éditorial. Une planche
      qui empruntait la couleur d'une carte mentirait sur le produit. Elles ont
      été relevées à nouveau le 2026-09-17, quand le logiciel est passé au
      nacre et à l'émeraude.

   2. RIEN N'EST CHARGÉ D'AILLEURS. Quatre polices et un jeu d'icônes sont
      servis par ce site et par personne d'autre (section 0 et la réserve de
      symboles dans `gabarit.html`) ; ce sont les mêmes icônes que le fichier
      fourni, rapatriées plutôt que chargées depuis Google à chaque visite.

   3. LA GRILLE RESPIRE. Les marges sont larges, les titres sont grands. Ce qui
      distingue un site cher d'un site bon marché est rarement la couleur :
      c'est l'espace qu'il accepte de ne pas remplir.

   Ordre du fichier :
     0. Polices     1. Jetons     2. Base       3. Trame      4. En-tête
     5. Boutons     6. Sections   7. Texte      8. Listes     9. Planches
    10. Reçu       11. Chiffres  12. Pied      13. Utilitaires
    14. Ardoise éditoriale (fond sombre de mise en avant)
    15. Pastilles et rappels
    16. Cartes et mesures (le registre du 12 septembre)
    17. Petites cartes, micro-tableau, SMS, pastilles de document
   ========================================================================== */

/* --------------------------------------------------- 0. LES QUATRE POLICES

   Titres en Source Serif 4 (graisse 600, romain et italique), corps en
   Manrope, chiffres et pièces de preuve en JetBrains Mono. Les trois sont
   servies par ce site et par personne d'autre, latin seulement, comme avant :
   la refonte du 2026-09-12 ajoute deux voix à la police des titres, elle ne
   revient pas sur la règle. `font-display: swap` partout : le texte s'affiche
   tout de suite dans la police de secours et se rhabille quand la vôtre
   arrive.

   Manrope et JetBrains Mono arrivent en un seul fichier chacun bien qu'ils
   couvrent plusieurs graisses (400 à 700, 500 à 600) : ce sont des polices à
   axe variable, et un `font-weight` en plage laisse le navigateur choisir
   l'instance exacte dans ce seul fichier plutôt que d'en charger un par
   graisse.

   SIL Open Font License 1.1 pour les trois, licence livrée à côté de chaque
   fichier.                                                                   */

@font-face {
  font-family: "Ardoise Serif";
  src: url("/source-serif-600-latin.f2b7e1cf.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Ardoise Serif";
  src: url("/source-serif-600-italic-latin.cdee523b.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Ardoise Sans";
  src: url("/manrope-latin.a30ddcd3.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Ardoise Mono";
  src: url("/jetbrains-mono-latin.83c005d4.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* ------------------------------------------------------------- 1. JETONS

   La refonte du 2026-09-12 change de famille : d'un dossier imprimé sur
   papier chaud vers un dossier statutaire sur fond bleu-gris froid, cuivre en
   accent. Pierre a fourni le gabarit exact (palette, type, composants) le
   12 septembre, capture et fichier HTML à l'appui ; les valeurs ci-dessous
   sont recopiées de ce fichier, hex pour hex, pas réinterprétées : la
   première passe avait édulcoré la palette (bleu adouci, un seul accent) et
   ce n'était pas ce qu'il voulait revoir.

   `--app-*` ne se choisit pas ici : ce sont les couleurs exactes du logiciel,
   recopiées de `web/style.css` pour les planches. Les jetons de fond sombre
   (`--sombre-*` / `.sombre`) servent l'éditorial (citation, bandeau final) et
   ne représentent aucun écran réel : les confondre ferait mentir une planche
   sur le produit.       */

:root {
  /* Le papier : la teinte bleu-gris exacte du fichier fourni, ses quatre
     paliers (surface / surface-container-low / -high / -highest). */
  --papier:    #F8F9FF;
  --papier-2:  #EFF4FF;
  --papier-3:  #E5EEFF;
  --papier-4:  #DCE9FF;
  --papier-5:  #D3E4FE;
  --papier-sourde: #F1F5F9;
  --blanc:     #FFFFFF;

  --encre:     #0B1C30;
  --encre-2:   #45464D;
  --encre-3:   #76777D;

  --filet:     #C6C6CD;
  --filet-2:   #A9AAB2;

  /* L'accent cuivre (« secondary »), et ses deux compagnons : la version
     pastel pour les puces, la version appuyée pour les survols. */
  --or:        #904D00;
  --or-2:      #B45309;
  --or-clair:  #FFDCC3;
  --or-clair-txt: #2F1500;
  --or-voile:  #FEF3C7;

  /* Deux couleurs de statut, distinctes du cuivre : le vert du soldé et de
     la sécurité, le rouge du reste dû. */
  --vert:      #069669;
  --vert-vif:  #68DBA9;
  --rouge:     #BA1A1A;

  /* Le repère « hors ligne », une troisième teinte chaude, à ne pas
     confondre avec l'accent cuivre : c'est un statut, pas une marque. */
  --hors-ligne:#EA580C;

  /* Le bouton plein et les icônes de statut fort : plus sombre que l'encre
     de texte, presque noir. */
  --encre-vive:#020617;

  --bleu:      #1D3E63;

  /* L'ardoise éditoriale : un fond sombre pour la mise en avant (citation,
     bandeau de conversion), distinct des couleurs du logiciel ci-dessous.
     Les deux teintes du fichier fourni ne sont PAS deux choix concurrents
     pour un même fond : elles coexistent, à deux endroits différents du
     même bloc. `--sombre` (`bg-slate-dark`, quasi noir) est le grand bloc —
     citation, bandeau de conversion, et son cadre. `--sombre-2`
     (`primary-container`, bleu-marine) n'est QUE l'encart posé après la
     citation ou la pastille posée dedans : un ton plus clair à l'intérieur
     du bloc noir, jamais un fond de section à lui seul. */
  --sombre:      #020617;
  --sombre-2:    #131B2E;
  --sombre-filet:rgba(241,245,249,.12);
  --sombre-txt:  #F1F5F9;
  --sombre-txt-2:#AAB4C8;

  /* L'ÉCRAN DU LOGICIEL : les couleurs EXACTES de l'application, pour les
     planches. Elles sont relevées dans `web/style.css`, pas inventées ici. Une
     reconstitution qui ment sur la couleur ment sur le produit.

     Relevées à nouveau le 2026-09-17 : le logiciel est passé au nacre et à
     l'émeraude le 16, et les planches montraient encore la version sombre
     bleutée d'avant. Un promoteur qui voit ces écrans doit reconnaître les
     siens le jour de l'installation. Le corps de l'écran est CLAIR ; seule la
     barre du haut est sombre, comme le rail du logiciel. */
  --app:         #F3F6F2;
  --app-surf:    #FFFFFF;
  --app-surf-2:  #F6F8F5;
  --app-trait:   #E4E9E3;
  --app-barre:   #13261F;
  --app-barre-2: #1C3329;
  --app-barre-txt:  #FFFFFF;
  --app-barre-txt-2:#A3B5AC;
  --app-txt:     #0F1813;
  --app-txt-2:   #47534C;
  --app-txt-3:   #76827B;
  --app-accent:  #0E7A51;
  --app-ok:      #17794A;  --app-ok-doux:      #E4F3EA;  --app-ok-bord:      #BFE0CC;
  --app-attente: #8A5A08;  --app-attente-doux: #FBF2DE;  --app-attente-bord: #EFDBAE;
  --app-alerte:  #B0322A;  --app-alerte-doux:  #FCEBE9;  --app-alerte-bord:  #F2CAC5;

  --f: "Ardoise Sans", "Segoe UI Variable Text", "Segoe UI", system-ui,
       -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-titre: "Ardoise Serif", "Iowan Old Style", "Palatino Linotype", Palatino,
       "Book Antiqua", Georgia, "Noto Serif", "Times New Roman", serif;
  --f-mono: "Ardoise Mono", ui-monospace, "Cascadia Mono", Consolas, "SF Mono",
       "Liberation Mono", monospace;

  --e1: 4px;  --e2: 8px;   --e3: 12px;  --e4: 16px;  --e5: 22px;
  --e6: 30px; --e7: 40px;  --e8: 54px;  --e9: 72px;  --e10: 96px;
  --e11: 128px;

  --r: 8px; --r-lg: 12px; --r-max: 999px;

  /* Les deux niveaux d'ombre du fichier fourni : le niveau 1 des cartes
     (presque plate), le niveau 2 du reçu et des blocs sombres (portée). */
  --ombre: 0 1px 3px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.03);
  --ombre-forte: 0 20px 35px -8px rgba(15,23,42,.28), 0 10px 25px -5px rgba(15,23,42,.14);
}

/* --------------------------------------------------------------- 2. BASE */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

/* Le jeu d'icônes du fichier fourni le 12 septembre, posé une fois en tête
   de page et réutilisé par référence (`<use href="#i-...">`) : les icônes
   sortent identiques à celles du fichier, et ne se répètent pas en mémoire
   à chaque usage. `position:absolute` plutôt que `display:none`, parce que
   certains navigateurs refusent de résoudre un `<use>` vers un `<symbol>`
   caché par `display:none`. */
.reserve-symboles { position: absolute; width: 0; height: 0; overflow: hidden; }
.symbole { fill: currentColor; flex: none; }
/* Une icône posée au milieu d'une ligne de texte plutôt qu'à côté d'un bloc. */
.symbole--texte { display: inline-block; vertical-align: -3px; margin-right: 4px; }
.symbole--ok { color: var(--vert-vif); }

a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--or); }

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

::selection { background: var(--or-voile); color: var(--encre); }

.evitement {
  position: absolute; left: -9999px;
  background: var(--encre); color: var(--papier);
  padding: var(--e3) var(--e5); z-index: 100; border-radius: 0 0 var(--r) 0;
}
.evitement:focus { left: 0; top: 0; }

/* -------------------------------------------------------------- 3. TRAME

   Trois largeurs, et elles suffisent. `--etroit` est une colonne de lecture :
   65 caractères environ, la largeur au-delà de laquelle l'oeil perd sa ligne. */

.etroit, .moyen, .large {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--e5);
}
.etroit { max-width: 712px; }
.moyen  { max-width: 940px; }
.large  { max-width: 1200px; }

@media (min-width: 760px) {
  .etroit, .moyen, .large { padding-inline: var(--e7); }
}

/* ------------------------------------------------------------ 4. EN-TÊTE

   Clair, fin, et il ne colle au haut de l'écran que sur grand écran : sur un
   téléphone, une barre fixe mange le tiers utile de la page. */

/* Le papier froid à 90 %, comme le fichier fourni (`bg-surface/90`), et son
   ombre d'un pixel plutôt qu'un filet gris. La valeur crème d'avant avait
   survécu à la refonte du 12 septembre : elle posait l'ancien papier chaud en
   bandeau au-dessus du papier froid, sur chaque page. */
.entete {
  background: rgba(248, 249, 255, .9);
  box-shadow: 0 1px 8px rgba(2, 6, 23, .04);
}
@media (min-width: 900px) {
  .entete {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(180%) blur(12px);
  }
}

.entete__in {
  max-width: 1200px; margin-inline: auto;
  padding: var(--e4) var(--e5);
  display: flex; align-items: center; gap: var(--e6);
}
@media (min-width: 760px) { .entete__in { padding-inline: var(--e7); } }

.marque { display: inline-flex; align-items: center; gap: var(--e3); text-decoration: none; color: inherit; }
.marque__nom {
  display: block; font-family: var(--f-titre); font-weight: 600;
  font-size: 21px; letter-spacing: -.015em; line-height: 1.1; color: var(--encre);
}
.marque__sous {
  display: none; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-3); margin-top: 3px; white-space: nowrap;
}
/* Sous 620 px il se replie sur deux lignes et casse le logo. Mieux vaut
   l'enlever : le nom seul suffit à dire de qui vient la page. */
@media (min-width: 620px) { .marque__sous { display: block; } }

.nav { display: none; margin-left: auto; gap: var(--e6); align-items: center; }
@media (min-width: 900px) { .nav { display: flex; } }
.nav a {
  color: var(--encre-2); text-decoration: none; font-size: 15px;
  padding-block: var(--e2); border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--encre); border-bottom-color: var(--filet-2); }
.nav a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--or); }

.entete .bouton { margin-left: auto; }
@media (min-width: 900px) { .entete .bouton { margin-left: 0; } }

/* ----------------------------------------------------------- 5. BOUTONS */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: 12px 20px; border-radius: var(--r);
  font-family: var(--f); font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.bouton svg { width: 17px; height: 17px; flex: none; }

.bouton--plein { background: var(--encre-vive); color: #fff; border-color: var(--encre-vive); }
.bouton--plein:hover { background: #000; color: #fff; transform: translateY(-1px); }

.bouton--or { background: var(--or); color: #fff; border-color: var(--or); }
.bouton--or:hover { background: var(--or-2); color: #fff; transform: translateY(-1px); }

.bouton--fantome { background: transparent; color: var(--encre); border-color: var(--filet-2); }
.bouton--fantome:hover { background: var(--blanc); border-color: var(--encre-3); color: var(--encre); }

.bouton--grand { padding: 15px 28px; font-size: 16px; }

.boutons { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }

/* ---------------------------------------------------------- 6. SECTIONS */

.section { padding-block: var(--e10); }
.section--serree { padding-block: var(--e9); }
.section--sable  { background: var(--papier-2); }
.section--blanche { background: var(--blanc); }
.section--profonde { background: var(--papier-4); }
.section--filet  { border-top: 1px solid var(--filet); }

@media (min-width: 900px) {
  .section { padding-block: var(--e11); }
  .section--serree { padding-block: var(--e10); }
}

/* --------------------------------------------------------------- 7. TEXTE

   L'étiquette en petites capitales : le repère de rubrique au-dessus du
   titre. Jusqu'au 12 septembre elle portait un filet court devant le texte,
   hérité du dossier imprimé ; le fichier que Pierre a fourni ce jour-là pose
   le mot seul, sans trait, et il l'a signalé comme une différence visible.
   Le filet est parti. */

.etiquette {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--or); margin: 0 0 var(--e5); text-wrap: balance;
}

h1, h2, h3, h4 {
  font-family: var(--f-titre); font-weight: 600; color: var(--encre);
  letter-spacing: -.022em; margin: 0;
  text-wrap: balance;
}

/* `headline-xl` du fichier fourni : 48px de bureau, 34px de téléphone — et
   h1 comme h2 s'y tiennent, `code.html` posant la même classe sur les deux.
   Le 12 septembre les avait laissés grandir bien au-delà (jusqu'à 62px) ;
   ce n'était pas une note du fichier, juste une inertie du dossier
   imprimé. */
h1, h2 { font-size: clamp(2.125rem, 3.8vw, 3rem); line-height: 1.15; }
/* `headline-sm` : 18px, quasi fixe. */
h3 { font-size: clamp(1.05rem, .6vw, 1.125rem); line-height: 1.35; letter-spacing: -.012em; }
h4 { font-size: 1rem; line-height: 1.35; letter-spacing: 0; }

/* `body-lg` : 18px, la même taille pour le chapeau du héros que pour celui
   d'une section — le fichier fourni n'a qu'une seule taille de texte
   d'intro, pas de variante « grande ». */
.chapeau {
  font-size: clamp(1rem, 1vw, 1.125rem);
  line-height: 1.6; color: var(--encre-2); margin: var(--e5) 0 0;
  max-width: 62ch;
}
.chapeau--grand { font-size: clamp(1rem, 1vw, 1.125rem); }

p { margin: var(--e4) 0 0; }
p:first-child { margin-top: 0; }

.tete { max-width: 760px; margin-bottom: var(--e8); }
.centre { text-align: center; }
.centre .etiquette { justify-content: center; }
.centre .chapeau { margin-inline: auto; }
.centre .boutons { justify-content: center; }

/* Le bloc de prose des pages intérieures. Il n'a pas besoin de plus. */
.prose > * + * { margin-top: var(--e5); }
.prose h2 { margin-top: var(--e9); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--e7); color: var(--encre); }
.prose p { color: var(--encre-2); max-width: 66ch; }
.prose strong { color: var(--encre); font-weight: 600; }
.prose ul { margin: 0; padding-left: 1.15em; color: var(--encre-2); }
.prose li + li { margin-top: var(--e3); }
.prose li::marker { color: var(--or-2); }

.dit {
  margin: 0; padding-left: var(--e5);
  border-left: 2px solid var(--or-2);
  font-family: var(--f-titre); font-size: clamp(1.05rem, 1vw, 1.125rem);
  line-height: 1.42; color: var(--encre); letter-spacing: -.01em;
}
.dit cite {
  display: block; margin-top: var(--e4);
  font-family: var(--f); font-size: 13.5px; font-style: normal;
  letter-spacing: .02em; color: var(--encre-3);
}

/* Un encart de mise en avant : une teinte et une ombre, jamais un filet.
   Le 12 septembre a retiré la réglure dorée de bord qui en faisait un
   encart de dossier imprimé plutôt qu'une carte. */
.avis { background: var(--papier-2); border-radius: var(--r-lg); padding: var(--e5) var(--e6); box-shadow: var(--ombre); }
.avis p { font-size: 15.5px; color: var(--encre-2); }
.avis strong { color: var(--encre); }
.section--blanche .avis, .section--profonde .avis { background: var(--papier); }
.sombre .avis { background: var(--sombre-2); box-shadow: none; }
.sombre .avis p { color: var(--sombre-txt-2); }
.sombre .avis strong { color: var(--sombre-txt); }

/* --------------------------------------------------------------- 8. LISTES

   `.rangees` / `.rangee` (des lignes séparées par un filet) et `.tableau`
   (une table à réglures) ont disparu le 12 septembre avec le reste du
   dossier imprimé : plus une page ne les utilise, remplacées par `.cartes`.
   Ce qui reste ici est le correctif que leur disparition n'a pas rendu
   inutile.

   Une grille à deux colonnes DANS une colonne de `.duo` se juge sur la
   largeur de la FENÊTRE, pas sur la sienne, et se retrouve deux fois trop
   étroite : le titre et le texte s'y retrouvaient côte à côte sur 120 px
   chacun, illisibles. Trouvé en relisant la page Logiciel avec `.rangee`,
   la même règle vaut pour `.cartes`. */
.duo .cartes { grid-template-columns: 1fr; }

/* La liste à coches, pour les arguments courts. Le fichier du 12 septembre
   sépare ses lignes par du blanc, jamais par un filet : c'était la
   signature du dossier imprimé, elle est partie avec lui. */
.coches { list-style: none; margin: var(--e6) 0 0; padding: 0; }
.coches li {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--e4);
  color: var(--encre-2); font-size: 16px;
}
.coches li + li { margin-top: var(--e5); }
.coches svg { width: 15px; height: 15px; margin-top: 5px; color: var(--or); }
.coches b { color: var(--encre); font-weight: 600; }

.duo { display: grid; gap: var(--e8); }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; gap: var(--e10); align-items: center; }
  .duo--texte-droite > *:first-child { order: 2; }
  .duo--penche { grid-template-columns: .92fr 1.08fr; }
  .duo--heros { grid-template-columns: 1.3fr .95fr; align-items: start; gap: var(--e9); }
}

/* Trois cartes, pas trois colonnes sous un filet : la réglure du haut était
   la même signature de dossier imprimé que celle de `.avis`, retirée le
   12 septembre.

   `align-items: start` a été essayé le 12 septembre pour éviter le vide
   sous un texte plus court que ses voisins, et retiré le jour même : des
   cartes de hauteurs différentes sur une même rangée rendent la grille
   irrégulière, ce qui se voit plus et se remarque pire qu'un peu de vide.
   Le bon réglage est la largeur de colonne (moins de colonnes, cartes plus
   larges, texte réparti sur moins de lignes), pas l'alignement. */
.trio { display: grid; gap: var(--e6); }
@media (min-width: 820px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio > div { background: var(--blanc); border-radius: var(--r-lg); padding: var(--e6); box-shadow: var(--ombre); }
.trio > div .carte__icone { margin-bottom: var(--e4); }
.trio h3 { margin: 0 0 8px; }
.trio p { color: var(--encre-2); font-size: 15.5px; margin: 0; }
.trio .carte__pied { margin-top: var(--e5); }
.section--blanche .trio > div, .section--profonde .trio > div { background: var(--papier); }
.sombre .trio > div { background: var(--sombre-2); box-shadow: none; }
.sombre .trio h3 { color: var(--sombre-txt); }
.sombre .trio p { color: var(--sombre-txt-2); }

/* ------------------------------------------------------------ 9. PLANCHES

   Une planche est une reconstitution d'écran du logiciel. Couleurs exactes,
   proportions justes, contenu choisi. Elle se lit comme une capture et reste
   nette sur un écran à forte densité, ce qu'une image ne fait pas sans peser
   quatre fois plus lourd.                                                   */

.planche {
  background: var(--app);
  border: 1px solid var(--app-trait);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-forte);
  overflow: hidden;
  font-size: 13px; line-height: 1.5; color: var(--app-txt-2);
}
.planche * { letter-spacing: 0; }

/* La barre du haut est la seule pièce sombre de l'écran, comme le rail du
   logiciel. Le corps, lui, est le papier nacré sur lequel travaille la
   secrétaire. */
.planche__barre {
  display: flex; align-items: center; gap: var(--e3);
  padding: 10px 14px; background: var(--app-barre);
}
.planche__titre { font-size: 12.5px; font-weight: 600; color: var(--app-barre-txt); white-space: nowrap; }
/* Le detail de la barre (nom de l'ecole, effectif) tient sur trois lignes sur
   un telephone et devient le plus gros element de la planche. Il disparait. */
.planche__detail { display: none; color: var(--app-txt-3); font-size: 11.5px; }
@media (min-width: 620px) { .planche__detail { display: block; } }
.planche__etat {
  margin-left: auto; font-size: 10.5px; font-weight: 600;
  padding: 3px 9px; border-radius: var(--r-max);
  background: var(--app-ok-doux); color: var(--app-ok);
  border: 1px solid var(--app-ok-bord);
}
.planche__etat--or { background: var(--app-attente-doux); color: var(--app-attente); border-color: var(--app-attente-bord); }

.planche__corps { padding: var(--e5); display: grid; gap: var(--e5); }

.planche__pave {
  background: var(--app-surf); border: 1px solid var(--app-trait);
  border-radius: var(--r); padding: var(--e4);
}
.planche__legende {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--app-txt-3); margin: 0 0 6px;
}

/* Les quatre tuiles de situation, telles qu'elles sont au guichet. */
.tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e2); }
@media (min-width: 560px) { .tuiles { grid-template-columns: repeat(4, 1fr); } }
.tuile {
  background: var(--app-surf); border: 1px solid var(--app-trait);
  border-radius: var(--r); padding: 11px 12px;
}
.tuile span {
  display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--app-txt-3); margin-bottom: 4px;
}
.tuile b {
  display: block; font-family: var(--f-titre); font-size: 17px; font-weight: 600;
  color: var(--app-txt); letter-spacing: -.01em;
}
.tuile--du b    { color: var(--app-alerte); }
.tuile--regle b { color: var(--app-ok); }

/* Le tableau d'échéances. */
.grille-ech { width: 100%; border-collapse: collapse; font-size: 12px; }
.grille-ech th {
  text-align: left; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--app-txt-3); font-weight: 600; padding: 0 0 8px;
  border-bottom: 1px solid var(--app-trait);
}
.grille-ech td { padding: 9px 0; border-bottom: 1px solid var(--app-trait); color: var(--app-txt-2); }
.grille-ech tr:last-child td { border-bottom: 0; }
.grille-ech .nom { color: var(--app-txt); }
.grille-ech .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jeton {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--r-max);
}
.jeton--solde  { background: var(--app-ok-doux); color: var(--app-ok); }
.jeton--venir  { background: var(--app-surf-2); color: var(--app-txt-2); }
.jeton--retard { background: var(--app-alerte-doux); color: var(--app-alerte); }

/* « Ce paiement soldera » : la ligne qui fait comprendre le produit en une
   seconde. Elle mérite son propre bloc. */
.soldera { display: grid; gap: 7px; }
.soldera__l {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4);
  font-size: 12.5px;
}
.soldera__l .num { font-variant-numeric: tabular-nums; color: var(--app-txt); font-weight: 600; }
.soldera__l i { font-style: normal; color: var(--app-txt-3); font-size: 11px; }

/* La barre de recouvrement par classe. */
.classes { display: grid; gap: 10px; }
.classe__l { display: grid; grid-template-columns: 62px 1fr auto; gap: var(--e4); align-items: center; font-size: 12px; }
.classe__nom { color: var(--app-txt); font-weight: 600; }
/* `display: block` sur les deux, et ce n'est pas cosmetique : une hauteur ne
   s'applique pas a un span reste en ligne, donc la part coloree ne se voyait
   pas du tout. La jauge s'affichait vide sur toutes les lignes. */
.classe__jauge { display: block; height: 6px; background: var(--app-trait); border-radius: var(--r-max); overflow: hidden; }
.classe__part { display: block; height: 100%; background: var(--app-ok); border-radius: var(--r-max); }
.classe__part--bas { background: var(--app-alerte); }
.classe__part--moyen { background: var(--app-attente); }
.classe__reste { font-variant-numeric: tabular-nums; color: var(--app-txt-2); white-space: nowrap; font-size: 11.5px; }

/* Les largeurs de jauge sont des CLASSES et non des attributs `style`, et ce
   n'est pas un gout : la politique de securite du site interdit les styles en
   ligne (`style-src 'self'`, sans 'unsafe-inline'). Un attribut style est donc
   ignore par le navigateur SANS LA MOINDRE ERREUR VISIBLE. Les jauges
   s'affichaient vides et rien ne le signalait. `construire.js` refuse
   desormais toute page qui en contient. */
.j49 { width: 49%; } .j52 { width: 52%; } .j56 { width: 56%; }
.j58 { width: 58%; } .j59 { width: 59%; } .j66 { width: 66%; } .j71 { width: 71%; }

/* Le bloc d'entete du heros, un peu plus large que la colonne de lecture. */
.tete--heros { max-width: 840px; }
.espace-haut { margin-top: var(--e9); }

/* Le champ de saisie, tel qu'il est dans le logiciel. */
.champ {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--app-surf); border: 1.5px solid var(--app-accent);
  border-radius: var(--r); padding: 11px 14px;
}
.champ b { font-family: var(--f-titre); font-size: 22px; color: var(--app-txt); font-weight: 600; }
.champ span { font-size: 11px; letter-spacing: .08em; color: var(--app-txt-3); }

.modes { display: flex; flex-wrap: wrap; gap: 6px; }
.mode {
  font-size: 11px; padding: 5px 10px; border-radius: var(--r);
  background: var(--app-surf); border: 1px solid var(--app-trait); color: var(--app-txt-2);
}
.mode--choisi { background: var(--app-ok-doux); border-color: var(--app-ok-bord); color: var(--app-accent); font-weight: 600; }

.legende {
  margin: var(--e4) 0 0; font-size: 13px; color: var(--encre-3);
  text-align: center;
}

/* ------------------------------------------------------------- 10. REÇU

   Le reçu est l'objet que la famille emporte. C'est la seule pièce d'Ardoise
   qui sort du bâtiment, donc c'est la preuve la plus parlante du produit. Il
   est reconstitué au millimètre d'un ticket thermique de 80 mm — Pierre a
   tranché pour cette forme-là (le 12 septembre, puis reconfirmé face à la
   carte à sous-blocs colorés du fichier Stitch, qu'il a écartée) : un vrai
   reçu ne ressemble pas à une carte d'app, quel que soit ce que montre le
   fichier fourni. L'ombre et la bascule au survol restent celles du fichier ;
   seule la forme du papier lui-même reste celle du ticket.                */

.recu__cadre { display: flex; flex-direction: column; align-items: center; }
/* Papier et encre du reçu : le `receipt-paper` / `receipt-ink` du fichier
   fourni, pas `--papier` / `--encre`. Un reçu est du vrai papier physique,
   pas la surface éditoriale bleu-gris du reste du site ; les deux teintes
   se ressemblent mais doivent rester deux jetons distincts. */
.recu {
  width: 100%; max-width: 330px;
  background: #FCFCFA; color: #1E293B;
  font-family: var(--f-mono); font-size: 11.5px; line-height: 1.55;
  padding: 20px 18px 24px;
  border-radius: 2px;
  /* `filter: drop-shadow`, pas `box-shadow` : un `clip-path` rogne l'ombre
     d'un élément qui le porte lui-même — la carte perdait son ombre dès
     qu'elle a pris le bord déchiré. Le filtre s'applique à la forme déjà
     découpée, lui inclus. */
  filter: drop-shadow(0 1px 1px rgba(11,28,48,.12)) drop-shadow(0 12px 20px rgba(11,28,48,.35));
  transition: transform .3s, filter .3s;
  /* Le bord déchiré du ticket, en bas. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px),
    95% 100%, 90% calc(100% - 6px), 85% 100%, 80% calc(100% - 6px), 75% 100%,
    70% calc(100% - 6px), 65% 100%, 60% calc(100% - 6px), 55% 100%, 50% calc(100% - 6px),
    45% 100%, 40% calc(100% - 6px), 35% 100%, 30% calc(100% - 6px), 25% 100%,
    20% calc(100% - 6px), 15% 100%, 10% calc(100% - 6px), 5% 100%, 0 calc(100% - 6px));
}
/* Le reçu se pose légèrement de travers sur la page, comme un papier qu'on
   vient de poser, et se redresse au survol. Réservé au grand écran : sur
   téléphone, un reçu penché mord sur la marge. */
@media (min-width: 1040px) {
  .recu { transform: rotate(1deg); }
  .recu:hover {
    transform: rotate(0deg);
    filter: drop-shadow(0 2px 3px rgba(11,28,48,.14)) drop-shadow(0 20px 32px rgba(11,28,48,.4));
  }
}
.recu__c { text-align: center; }
.recu__l { display: flex; justify-content: space-between; gap: var(--e3); }
.recu__sep { border-top: 1px dashed var(--filet); margin: 7px 0; }
.recu__sep--fort { border-top: 1px solid #1E293B; }
.recu .fort { font-size: 13px; font-weight: 700; }
.recu .pale { color: var(--encre-2); font-size: 10.5px; }

/* --------------------------------------------------------- 11. (retiré)

   `.chiffres` / `.chiffre` — un chiffre sur une ligne de filets — a disparu
   le 12 septembre avec le reste du dossier imprimé, sans repreneur : aucune
   page ne comptait quatre chiffres bruts. `.mesure` (section 16) fait ce
   travail-là maintenant, en carte.                                         */

/* ---------------------------------------------------------------- 12. PIED

   Clair lui aussi. Un pied sombre sous une page claire coupe la page en deux
   et fait ressortir ce qui compte le moins.                                 */

.pied { background: var(--papier-2); border-top: 1px solid var(--filet); padding-block: var(--e9) var(--e6); }
.pied__grille { display: grid; gap: var(--e7); }
@media (min-width: 760px) { .pied__grille { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--e8); } }
.pied h4 {
  font-family: var(--f); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3);
  margin: 0 0 var(--e4);
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li + li { margin-top: 10px; }
.pied a { color: var(--encre-2); text-decoration: none; font-size: 15px; }
.pied a:hover { color: var(--or); text-decoration: underline; }
.pied p { font-size: 14.5px; color: var(--encre-2); max-width: 34ch; }
.pied__bas {
  margin-top: var(--e8); padding-top: var(--e5); border-top: 1px solid var(--filet);
  display: flex; flex-wrap: wrap; gap: var(--e4) var(--e6); justify-content: space-between;
  font-size: 13px; color: var(--encre-3);
}

/* -------------------------------------------------------- 13. UTILITAIRES */

.trou {
  background: #FFF3B0; color: #6b4e00; padding: 1px 6px;
  border-radius: 2px; font-family: var(--f-mono); font-size: .84em;
}

.espace { margin-top: var(--e6) !important; }
.long { display: none; }
@media (min-width: 1040px) { .long { display: inline; } .court { display: none; } }

/* L'accent italique doré dans un titre, à la place d'un jaune criard. */
.accent { font-style: italic; color: var(--or); }

/* ---------------------------------------------- 14. L'ARDOISE ÉDITORIALE

   Un fond sombre pour APPUYER un propos (une citation, l'appel final), pas
   pour reconstituer un écran : ça, c'est le travail de `.planche`, plus haut,
   avec les couleurs vérifiées du logiciel. Les deux se ressemblent et
   doivent le rester assez pour ne pas jurer sur une même page ; elles
   restent deux jetons séparés pour ne jamais laisser une couleur d'habillage
   se faire passer pour une couleur de produit.                              */

.sombre { background: var(--sombre); color: var(--sombre-txt-2); }
.sombre h1, .sombre h2, .sombre h3, .sombre strong, .sombre b { color: var(--sombre-txt); }
.sombre .etiquette { color: var(--or-clair); }
.sombre .chapeau { color: var(--sombre-txt-2); }
/* Le cuivre pastel de la palette, pas l'émeraude du logiciel : sur le noir
   éditorial, l'accent du produit tomberait sous le seuil de lisibilité. */
.sombre a { color: var(--or-clair); }
.sombre .bouton--plein { background: var(--papier); color: var(--sombre); border-color: var(--papier); }
.sombre .bouton--plein:hover { background: #fff; color: var(--sombre); }
.sombre .bouton--fantome { color: var(--sombre-txt); border-color: rgba(241,245,249,.28); }
.sombre .bouton--fantome:hover { background: rgba(241,245,249,.08); border-color: rgba(241,245,249,.5); color: #fff; }

/* Le bandeau de garanties, sous un appel à l'action sombre. */
.garanties { list-style: none; margin: var(--e6) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e3) var(--e7); }
.garanties li { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--sombre-txt-2); }
.garanties svg { width: 15px; height: 15px; color: var(--vert-vif); flex: none; }

/* --------------------------------------------------------- 15. LA PASTILLE

   Une capsule courte, avec ou sans point de couleur : le badge institutionnel
   du héros, l'indicateur « hors ligne » de la navigation, le minuteur de la
   démonstration. */

.pastille {
  display: inline-flex; align-items: center; gap: var(--e3);
  background: var(--papier-4); color: var(--encre-2);
  padding: 6px var(--e4); border-radius: var(--r-max);
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.pastille__point { width: 7px; height: 7px; border-radius: 50%; background: var(--or); flex: none; }
.pastille--douce { background: var(--or-voile); color: var(--or); }
.pastille--douce .pastille__point { background: var(--or); }
/* La pastille du repère hors ligne : l'orange du statut, pas le cuivre de
   marque. Les deux se ressemblent ; ce sont deux jetons différents dans le
   fichier fourni, et confondus ils font perdre le sens du repère. */
.pastille--hors-ligne { background: rgba(234,88,12,.14); color: var(--hors-ligne); }
.pastille--hors-ligne .pastille__point { background: var(--hors-ligne); }
/* La pastille du bandeau final est la même « information posée après »
   que l'encart de la citation : primary-container dessous, secondary
   dessus, jamais le voile blanc générique. */
.sombre .pastille { background: var(--sombre-2); color: var(--or); }

/* Le rappel de résilience dans le héros : icône, une phrase, rien de plus.
   Pas de bordure : le fichier fourni ne tient ses blocs que par la couleur
   et une ombre légère, jamais par un filet. */
.rappel {
  display: inline-flex; align-items: center; gap: var(--e3);
  background: var(--papier-3); box-shadow: var(--ombre);
  padding: 11px var(--e4); border-radius: var(--r-lg);
  font-size: 14.5px; font-weight: 600; color: var(--encre);
}
.rappel svg { width: 19px; height: 19px; color: var(--hors-ligne); flex: none; }

/* La bande de preuve à trois chiffres, posée sous les boutons du héros. */
.preuves {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5);
  background: var(--papier-2); border-radius: var(--r-lg);
  padding: var(--e5) var(--e6); margin-top: var(--e2); max-width: 520px;
}
.preuves b {
  display: block; font-family: var(--f-titre); font-weight: 600;
  font-size: 1.125rem; letter-spacing: -.01em; color: var(--encre); line-height: 1.15;
}
.preuves span { display: block; font-size: 11px; color: var(--encre-3); margin-top: 4px; letter-spacing: .01em; }

/* ----------------------------------------------------------- 16. LES CARTES

   Une carte, pas une rangée : la refonte du 2026-09-12 introduit ce second
   registre pour les grilles d'arguments courts, à côté de `.rangees` que les
   pages plus anciennes gardent. Les deux cohabitent ; aucune des deux n'a
   tort dans l'absolu, c'est une question de densité de la section.          */

.cartes { display: grid; gap: var(--e6); grid-template-columns: 1fr; }
@media (min-width: 700px) { .cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cartes--quatre { grid-template-columns: repeat(4, 1fr); } .cartes--trois { grid-template-columns: repeat(3, 1fr); } }

.carte {
  background: var(--blanc); border-radius: var(--r-lg);
  padding: var(--e6); box-shadow: var(--ombre);
  display: flex; flex-direction: column; gap: var(--e5);
  transition: box-shadow .15s;
}
.carte:hover { box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 10px 22px -8px rgba(15,23,42,.12); }
.section--blanche .carte, .section--profonde .carte { background: var(--papier); }
.carte__tete { display: flex; align-items: flex-start; gap: var(--e4); }
.carte__icone {
  width: 46px; height: 46px; border-radius: var(--r); background: var(--papier-4);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.carte__icone svg { width: 22px; height: 22px; color: var(--encre); }
.carte__icone--or svg { color: var(--or); }
.carte h3 { margin: 0 0 6px; }
.carte p { color: var(--encre-2); font-size: 15px; margin: 0; }
.carte__pied {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  background: var(--papier-2); border-radius: var(--r); padding: 9px var(--e4);
  font-size: 12px;
}
.carte__pied span:first-child { color: var(--encre-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.carte__pied span:last-child { font-family: var(--f-mono); color: var(--or); font-weight: 600; letter-spacing: -.01em; }

/* Une carte-métrique : un chiffre en mono, une icône, une phrase. Plus
   compacte qu'une `.carte`, pour un bandeau de quatre. */
.mesure {
  background: var(--papier-2); border-radius: var(--r-lg);
  padding: var(--e5); box-shadow: var(--ombre); transition: box-shadow .15s;
}
.mesure:hover { box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 10px 22px -8px rgba(15,23,42,.12); }
.mesure__haut { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--e4); }
.mesure__chiffre { font-family: var(--f-mono); font-weight: 600; font-size: 1.35rem; color: var(--encre); letter-spacing: -.01em; }
.mesure__haut svg { width: 21px; height: 21px; color: var(--encre); }
.mesure h3 { font-family: var(--f); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre); margin: 0 0 7px; }
.mesure p { font-size: 14px; color: var(--encre-2); margin: 0; }
/* Deux des quatre mesures du bandeau portent une couleur de statut, les deux
   autres restent à l'encre : le fichier fourni ne colore que « zéro
   commission » (cuivre) et « sans réseau » (l'orange du hors ligne). */
.mesure--or .mesure__chiffre, .mesure--or .mesure__haut svg { color: var(--or); }
.mesure--hors-ligne .mesure__chiffre, .mesure--hors-ligne .mesure__haut svg { color: var(--hors-ligne); }

/* La carte sombre : la citation ou la règle qu'on veut voir se détacher au
   milieu d'une section claire, sans lui donner toute la section. */
.carte-sombre {
  background: var(--sombre); color: var(--sombre-txt-2); border-radius: var(--r-lg);
  padding: var(--e7); box-shadow: var(--ombre-forte);
}
.carte-sombre > * + * { margin-top: var(--e5); }
.carte-sombre__icone {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(241,245,249,.1);
  display: flex; align-items: center; justify-content: center;
}
/* --or-clair, pas un jeton --app-* : cette icône est sur une carte
   éditoriale, pas sur une planche. Les --app-* sont les couleurs exactes du
   logiciel ; les poser ici
   ferait passer un choix d'habillage pour une couleur de produit. */
.carte-sombre__icone svg { color: var(--or-clair); }
/* Sans filet : la citation du fichier fourni est de l'italique nu, pas une
   citation de dossier imprimé avec sa réglure dorée sur le côté. */
.carte-sombre .dit { border-left: 0; padding-left: 0; font-style: italic; color: var(--sombre-txt); }
.carte-sombre .dit cite { color: var(--sombre-txt-2); }
.carte-sombre .encart {
  background: var(--sombre-2);
  border-radius: var(--r); padding: var(--e4) var(--e5);
}
.carte-sombre .encart b {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--or-clair); margin-bottom: 6px;
}
.carte-sombre .encart p { margin: 0; font-size: 13.5px; color: var(--sombre-txt-2); }
.carte-sombre .carte__pied {
  background: var(--sombre-2); color: var(--sombre-txt-2);
}
.carte-sombre .carte__pied span:last-child { color: var(--or-clair); }

/* La grille à deux, avec un ratio légèrement penché : réutilise `.duo` mais
   garde la carte sombre lisible même quand elle se retrouve seule dans sa
   colonne sur mobile. */
.duo--carte-sombre { align-items: stretch; }

/* --------------------------------------------------- 17. LES PETITES CARTES

   Le duo à quatre petites cartes du fichier fourni (« au guichet ») : une
   icône, un titre court, une phrase. Plus modeste qu'une `.carte`, pensée
   pour vivre en 2x2 à côté d'un texte, pas seule dans une section.          */

.mini-cartes { display: grid; grid-template-columns: 1fr; gap: var(--e3); margin-top: var(--e5); }
@media (min-width: 560px) { .mini-cartes { grid-template-columns: 1fr 1fr; } }
.mini-carte { background: var(--papier); border-radius: var(--r); padding: var(--e4); box-shadow: var(--ombre); }
.mini-carte__titre { display: flex; align-items: center; gap: var(--e3); font-size: 14.5px; font-weight: 600; color: var(--encre); margin-bottom: 5px; }
.mini-carte__titre svg { width: 19px; height: 19px; color: var(--or); flex: none; }
.mini-carte p { margin: 0; font-size: 13.5px; color: var(--encre-2); }

/* Le micro-tableau posé dans une carte claire : trois lignes, deux colonnes,
   pas plus. `.grille-ech` reste réservée aux planches sombres. */
.mini-tableau { background: var(--papier); border-radius: var(--r); padding: var(--e4); font-size: 13px; }
.mini-tableau__ligne { display: flex; justify-content: space-between; gap: var(--e3); padding-block: 5px; }
.mini-tableau__entete { color: var(--encre-3); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding-bottom: 6px; }
.mini-tableau__ligne .num { font-family: var(--f-mono); font-weight: 600; }
.mini-tableau__ligne .num--du { color: var(--rouge); }
.mini-tableau__ligne .num--ok { color: var(--vert); }

/* Le brouillon de SMS, tel qu'un responsable le relit avant l'envoi. */
.sms { background: rgba(254,243,199,.45); border-radius: var(--r); padding: var(--e4); font-size: 13.5px; color: var(--encre); }
.sms__entete { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--or); margin-bottom: 6px; }
.sms__entete svg { width: 13px; height: 13px; }
.sms p { margin: 0; font-style: italic; }

/* Les pastilles de format de document, en pile. */
.doc-pills { display: flex; flex-direction: column; gap: 6px; }
.doc-pill { display: flex; align-items: center; gap: var(--e3); background: var(--papier-2); border-radius: var(--r); padding: 8px var(--e4); font-size: 13.5px; color: var(--encre); }
.doc-pill svg { width: 17px; height: 17px; color: var(--or); flex: none; }
.doc-pill--pdf svg { color: var(--rouge); }

/* La carte claire du repère hors ligne : une citation tinctée, une règle en
   icône + texte, et la ligne de pied déjà fournie par `.carte__pied`. */
.carte-repere__citation { background: var(--papier-sourde); border-radius: var(--r); padding: var(--e4) var(--e5); }
.carte-repere__label {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--encre-3);
}
.carte-repere__quote {
  margin: 8px 0 0; font-family: var(--f-titre); font-style: italic;
  font-size: clamp(1.05rem, 1vw, 1.125rem); color: var(--encre); line-height: 1.4;
}
.carte-repere__regle { display: flex; align-items: flex-start; gap: var(--e4); }
.carte-repere__regle .carte-repere__icone {
  width: 32px; height: 32px; border-radius: var(--r); background: var(--or-clair);
  display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px;
}
.carte-repere__regle .carte-repere__icone svg { color: var(--or-clair-txt); }
.carte-repere__regle b {
  display: block; font-size: 13px; font-weight: 700; color: var(--encre);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px;
}
.carte-repere__regle p { margin: 0; font-size: 14.5px; color: var(--encre-2); }

/* Le petit badge de confiance dans le pied de page. */
.pied__badge { display: inline-flex; align-items: center; gap: 7px; background: var(--papier-3); padding: 6px var(--e4); border-radius: var(--r); }
.pied__badge svg { width: 14px; height: 14px; color: var(--vert-vif); flex: none; }