/* Banque de graphiques explicatifs - feuille partagée par les deux surfaces.

   Née du retour de la deuxième directrice RH (« elle ne comprend pas le
   site web : qu'est-ce qui fait quoi »). Cinq visuels qui se lisent en
   cinq secondes, sans lire une phrase complète :

     .g-carte      la carte des obligations - qu'est-ce qui fait quoi
     .g-parcours   de la question au document déposé, en schéma
     .g-anatomie   une obligation de bout en bout
     .g-document   à quoi ressemble le document livré
     .g-offre      ce qui est gratuit, ce qui vient avec un plan

   Chargée par les pages statiques (/assets/graphiques.css) ET par les
   gabarits de l'app : nginx sert /assets/ depuis « location / », la même
   porte que les polices déjà appelées par style.css.

   POURQUOI LES COULEURS SONT ÉCRITES ICI ET NE BASCULENT PAS.
   Un graphique est une BANDE CLAIRE, comme .how et .doc du hub le sont
   déjà : le fond reste clair même quand la visiteuse choisit le thème
   sombre. Trois raisons, dans l'ordre où elles pèsent :
     1. c'est une image, pas du texte courant - la retourner casserait la
        lecture des pastilles d'état, dont la couleur EST le sens;
     2. les deux feuilles du dépôt ne s'entendent pas sur --accent (bleu
        #1f66d1 sur les statiques, sarcelle #0e7c8f dans l'app) : le même
        graphique changerait de couleur d'une page à l'autre;
     3. le bleu #1f66d1 tient le contraste AA sur blanc, partout et dans
        les deux thèmes - ce qui ne serait pas vrai sur fond sombre.
   Les valeurs sont celles de docs/design-du-site.md, pas des inventions. */

/* Le premier graphique suit le héros : 72 px de haut ajoutés aux 72 px
   de bas du héros faisaient 144 px de vide avant la première chose à
   faire de la page. Le héros s'arrête maintenant sur un filet, et le
   graphique reprend juste dessous (2026-08-14). */
.hero + .g{padding-top:40px}

.g{
  --g-fond:#f7f9fc;
  --g-surface:#ffffff;
  --g-surface2:#eef3fa;
  --g-line:#d9e2ee;
  --g-line-fort:#c9d6e6;
  --g-txt:#1c2733;
  --g-muted:#54657d;
  --g-accent:#1f66d1;
  --g-qc:#095797;
  --g-qc-bg:#f4f8fd;
  /* Un cran plus soutenu que le fond des jetons : #f4f8fd surligne une
     étiquette, pas une ligne de tableau de 90 px de haut. */
  --g-qc-bg-fort:#eef4fa;
  --g-qc-line:#cddcee;
  --g-ok:#1e7a4f;
  --g-ok-bg:#eaf5ee;
  --g-ok-line:#cfe6d9;
  --g-warn:#8a6116;
  --g-warn-bg:#fbf3e3;
  --g-warn-line:#ecdcb8;
  --g-error:#b4232a;
  background:var(--g-fond);
  color:var(--g-txt);
  font-family:var(--sans);
  padding:72px 48px;
}

/* La carte blanche qui porte le graphique. Largeur de contenu du site
   (1064px), la même que la console de l'accueil. */
.g-carte-fond{
  max-width:1064px;
  margin:0 auto;
  background:var(--g-surface);
  border:1px solid var(--g-line);
  border-radius:10px;
  box-shadow:0 1px 3px rgba(16,32,56,.07);
  padding:34px 36px 30px;
}
.g h2.g-titre{
  font-family:var(--grot);
  font-size:26px;
  font-weight:600;
  letter-spacing:-.4px;
  margin:0 0 6px;
  color:var(--g-txt);
}
.g-chapeau{font-size:14.5px;line-height:1.6;color:var(--g-muted);margin:0 0 26px;max-width:66ch}
.g-note{margin:20px 0 0;font-size:13px;line-height:1.6;color:var(--g-muted)}

/* Le jeton de référence légale. Même forme que .jeton du thème, mais aux
   couleurs de la bande claire : le bleu institutionnel sur fond pâle.
   (.jeton lit --dim et --line-strong, qui basculent en sombre.) */
.g-ref{
  /* `clone` répète la bordure et le rembourrage sur chaque ligne quand
     le jeton se coupe : une bordure ouverte en fin de ligne se lit comme
     un bogue, un jeton en deux morceaux se lit comme un jeton. */
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  display:inline;
  font-family:var(--mono);
  font-size:11px;
  color:var(--g-qc);
  border:1px solid var(--g-qc-line);
  background:var(--g-qc-bg);
  border-radius:4px;
  padding:2px 6px;
}

/* ------------------------------------------------------------------ */
/* 1a - La carte des obligations                                       */
/* Une ligne par obligation, la dernière colonne donne le nom de       */
/* l'outil. C'est la réponse mot pour mot à « qu'est-ce qui fait quoi ».*/
/* ------------------------------------------------------------------ */

/* TROIS colonnes depuis le 2026-08-14 (constat de Simon : « j'utilise
   les mêmes termes »). « Ici, ça s'appelle » ne faisait que répéter la
   première colonne sur cinq lignes de dix - « Prévention du harcèlement »
   en face de « Prévention du harcèlement ». Le nom de l'obligation porte
   maintenant le lien, et la traduction n'apparaît que là où elle apprend
   quelque chose : « Chez nous : Audit Loi 25 », et « se règle avec... »
   pour les trois obligations qu'on n'outille pas.

   Ce que ça rend : ~130 px aux deux colonnes de contenu, qui étaient les
   plus serrées du tableau. Et le jeton « Charte de la langue française ·
   art. 139 » demandait 278 px pour 275 disponibles - il n'a plus à se
   couper à l'intérieur de sa bordure. */
.g-carte-cols{display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:22px}

/* Le RESPIRE des lignes (2026-08-14, constat de Simon : « les titres
   sont trop à gauche »). Les lignes n'avaient aucun rembourrage
   horizontal : le surlignage et son filet de 3 px commençaient sous la
   première lettre du titre. Le rembourrage est compensé par une marge
   négative de même valeur - le TEXTE reste aligné sur le titre de la
   carte, et c'est le surlignage qui déborde vers l'extérieur. */
.g-carte-entete,
.g-carte-famille,
.g-carte-ligne{padding-left:16px;padding-right:16px;margin-left:-16px;margin-right:-16px}
.g-carte-entete{
  padding-bottom:9px;
  border-bottom:1.5px solid var(--g-txt);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:1.1px;
  color:var(--g-muted);
  text-transform:uppercase;
}
/* Le titre de famille (« ce qui concerne vos employés ») avec son filet
   qui court jusqu'au bord. */
.g-carte-famille{display:flex;align-items:center;gap:12px;padding-top:16px;padding-bottom:12px}
.g-carte-famille + .g-carte-ligne{border-top:1px solid var(--g-surface2)}
.g-carte-famille-nom{font-size:15px;font-weight:600;color:var(--g-txt)}
.g-carte-famille-filet{flex:1;height:1px;background:var(--g-line)}
.g-carte-famille-quoi{font-family:var(--mono);font-size:11px;color:var(--g-muted)}
.g-carte-ligne{align-items:start;padding-top:14px;padding-bottom:14px;border-top:1px solid var(--g-surface2)}
.g-carte-ligne:last-of-type{border-bottom:1px solid var(--g-surface2)}
.g-carte-nom{display:block;font-size:15px;font-weight:600;color:var(--g-txt);margin-bottom:5px}
/* Le nom EST le lien quand on outille l'obligation. Les trois lignes
   qu'on n'outille pas restent en encre : rien à cliquer, et ça se voit
   sans avoir à lire. */
a.g-carte-nom-lien{color:var(--g-accent);text-decoration:none}
a.g-carte-nom-lien:hover{text-decoration:underline}
.g-carte-vise{font-size:13.5px;line-height:1.5;color:var(--g-txt)}
.g-carte-vise b{font-weight:600}
.g-carte-vise span{display:block;color:var(--g-muted)}
.g-carte-avoir{font-size:13.5px;line-height:1.55;color:var(--g-muted)}
.g-carte-offre{font-size:12.5px;color:var(--g-muted);margin-top:6px}
.g-carte-offre-rien{color:var(--g-ok)}

/* ------------------------------------------------------------------ */
/* 1b - Le parcours, en schéma                                         */
/* Trois colonnes, chacune avec un aperçu de ce qu'on voit vraiment.   */
/* Le ruban du bas dit où s'arrête le gratuit.                         */
/* ------------------------------------------------------------------ */

.g-parcours-grille{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch}
.g-etape{padding:0 26px;border-left:1px solid var(--g-surface2)}
.g-etape:first-child{padding-left:0;padding-right:26px;border-left:0}
.g-etape:last-child{padding-right:0}
.g-etape-tete{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.g-etape-num{
  width:26px;height:26px;border-radius:50%;
  background:var(--g-accent);color:#fff;
  font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.g-etape-num-qc{background:var(--g-qc)}
.g-etape-quand{font-family:var(--mono);font-size:11px;color:var(--g-muted)}
.g-etape-titre{font-size:17px;font-weight:600;color:var(--g-txt);margin-bottom:6px}
.g-etape p{font-size:13.5px;line-height:1.6;color:var(--g-muted);margin:0 0 16px}

/* Les aperçus : de vraies miniatures de ce que la visiteuse verra. */
.g-apercu{background:var(--g-fond);border:1px solid var(--g-line);border-radius:8px;padding:14px 16px}
.g-apercu-question{font-size:12px;color:var(--g-muted);margin-bottom:9px}
.g-choix{display:flex;gap:7px;flex-wrap:wrap}
.g-choix span{font-size:12.5px;padding:5px 11px;border-radius:100px;border:1px solid var(--g-line);background:var(--g-surface);color:var(--g-muted)}
.g-choix .g-choix-pris{border:1.5px solid var(--g-accent);background:var(--g-accent);color:#fff;font-weight:600}

/* La note globale - gratuite. Les notes PAR CATÉGORIE ne le sont pas
   (ligne du gratuit, CLAUDE.md) : ces aperçus n'en montrent aucune. */
.g-score{display:flex;align-items:baseline;gap:8px;margin-bottom:11px}
.g-score-nombre{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--g-txt)}
.g-score-sur{font-family:var(--mono);font-size:12px;color:var(--g-muted)}
.g-constat{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.g-constat:last-child{margin-bottom:0}
.g-constat-point{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.g-point-ok{background:var(--g-ok)}
.g-point-warn{background:var(--g-warn)}
.g-point-error{background:var(--g-error)}
.g-constat-quoi{font-size:12.5px;color:var(--g-txt)}
.g-constat-art{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--g-qc)}

/* La miniature du document, à l'étape 3. */
.g-mini-doc{background:var(--g-surface);border:1px solid var(--g-line);border-radius:8px;padding:14px 16px;box-shadow:0 2px 10px rgba(16,32,56,.07)}
.g-mini-doc-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:1.1px;color:var(--g-muted);margin-bottom:8px}
.g-mini-doc-titre{font-size:13px;font-weight:600;line-height:1.35;color:var(--g-txt);margin-bottom:5px}
.g-mini-doc-ref{font-family:var(--mono);font-size:10.5px;color:var(--g-qc);margin-bottom:11px}
.g-lignes{display:grid;gap:5px}
.g-lignes i{height:6px;background:var(--g-surface2);border-radius:3px;display:block}

/* Le ruban : où s'arrête le gratuit. C'est la première question de tout
   le monde, elle mérite sa bande à elle. */
.g-ruban{display:grid;grid-template-columns:2fr 1fr;margin-top:26px;border-radius:8px;overflow:hidden;border:1px solid var(--g-line)}
.g-ruban-gratuit{background:var(--g-ok-bg);padding:13px 18px;display:flex;align-items:center;gap:10px}
.g-ruban-gratuit b{font-size:14px;font-weight:600;color:var(--g-ok)}
.g-ruban-gratuit span{font-size:13.5px;color:var(--g-muted)}
.g-ruban-plan{background:var(--g-qc-bg);padding:13px 18px;display:flex;align-items:center;gap:10px;border-left:1px solid var(--g-line)}
.g-ruban-plan b{font-size:14px;font-weight:600;color:var(--g-qc)}

/* ------------------------------------------------------------------ */
/* 1c - Une obligation de bout en bout                                 */
/* Les pastilles numérotées de gauche réapparaissent à droite : ce que  */
/* la loi exige DEVIENT ce que le document couvre.                     */
/* ------------------------------------------------------------------ */

.g-anatomie-tete{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:5px}
.g-anatomie-grille{display:grid;grid-template-columns:1.25fr 1fr 1.25fr 1fr;gap:16px;align-items:stretch}
.g-volet{
  background:var(--g-fond);
  border:1px solid var(--g-line);
  border-top:3px solid var(--g-muted);
  border-radius:8px;
  padding:18px 18px 16px;
}
.g-volet-loi{border-top-color:var(--g-qc)}
.g-volet-vous{border-top-color:var(--g-accent)}
.g-volet-obtenez{border-top-color:var(--g-ok)}
.g-volet-kicker{font-family:var(--mono);font-size:10px;letter-spacing:1.1px;color:var(--g-muted);margin-bottom:9px}
.g-volet-titre{font-size:15px;font-weight:600;color:var(--g-txt);line-height:1.35;margin-bottom:12px}
.g-volet p{font-size:12.5px;line-height:1.55;color:var(--g-muted);margin:0}
.g-volet p + p{margin-top:10px}

/* Les éléments prescrits, numérotés. Un fait de droit se compte sur le
   TEXTE de l'article - jamais à la main (CLAUDE.md). */
.g-prescrits{display:grid;gap:6px}
.g-prescrit{display:flex;gap:8px;align-items:flex-start}
.g-prescrit-num{
  width:17px;height:17px;border-radius:4px;
  background:#e4ecf7;color:var(--g-qc);
  font-family:var(--mono);font-size:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;
}
.g-prescrit span{font-size:12.5px;line-height:1.4;color:var(--g-muted)}

/* Les mêmes numéros, couverts, côté document. */
.g-pastilles{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px;margin-bottom:12px}
.g-pastille{
  height:22px;border-radius:4px;
  background:var(--g-ok-bg);color:var(--g-ok);
  border:1px solid var(--g-ok-line);
  font-family:var(--mono);font-size:10px;
  display:flex;align-items:center;justify-content:center;
}
.g-mini-question{background:var(--g-surface);border:1px solid var(--g-line);border-radius:7px;padding:12px 13px;margin-bottom:12px}
.g-mini-question-texte{font-size:12px;color:var(--g-muted);line-height:1.45;margin-bottom:9px}
.g-mini-question .g-choix span{font-size:12px;padding:4px 12px}
.g-remise{display:grid;gap:8px}
.g-remise div{font-size:12.5px;line-height:1.45;color:var(--g-txt);padding-bottom:8px;border-bottom:1px solid var(--g-surface2)}
.g-remise div:last-child{padding-bottom:0;border-bottom:0}
.g-remise span{color:var(--g-muted)}

/* ------------------------------------------------------------------ */
/* 1d - À quoi ressemble le document                                   */
/* On achète un document qu'on n'a jamais vu. Le montrer lève           */
/* l'objection sans une phrase de vente.                                */
/* ------------------------------------------------------------------ */

.g-document-grille{display:grid;grid-template-columns:1fr 340px 1fr;align-items:center}
.g-legendes{display:grid;gap:34px}
.g-legendes-gauche{padding-right:18px;text-align:right}
.g-legendes-droite{padding-left:18px}
.g-legende-quoi{font-size:13px;font-weight:600;color:var(--g-txt);line-height:1.4}
.g-legende-pourquoi{font-size:12.5px;color:var(--g-muted);line-height:1.5}
.g-legende-filet{height:1px;background:var(--g-line-fort);margin-top:9px}

/* Les feuilles posées. La rotation vient de --shadow-paper du thème :
   un document « posé », jamais un scan bien droit. */
.g-feuilles{position:relative;height:452px}
.g-feuille{position:absolute;background:var(--g-surface);border:1px solid #e3e9f1;border-radius:3px;box-shadow:0 6px 22px rgba(16,32,56,.09)}
.g-feuille-1{left:16px;top:16px;width:296px;height:404px;transform:rotate(-2.2deg)}
.g-feuille-2{left:22px;top:10px;width:296px;height:404px;transform:rotate(1.6deg)}
.g-feuille-dessus{
  position:absolute;left:19px;top:0;width:298px;height:420px;
  background:var(--g-surface);border:1px solid #dde4ee;border-radius:3px;
  box-shadow:0 14px 40px rgba(16,32,56,.16);
  padding:26px 26px 0;box-sizing:border-box;
}
.g-doc-entreprise{font-family:var(--mono);font-size:8.5px;letter-spacing:1.2px;color:var(--g-muted);margin-bottom:14px}
.g-doc-titre{font-size:14px;font-weight:600;line-height:1.3;color:var(--g-txt);margin-bottom:7px}
.g-doc-ref{font-family:var(--mono);font-size:9px;color:var(--g-qc);margin-bottom:16px}
.g-doc-filet{height:1px;background:var(--g-surface2);margin-bottom:14px}
.g-doc-sections{display:grid;gap:9px}
.g-doc-section-titre{font-size:9.5px;font-weight:600;color:var(--g-txt);margin-bottom:4px}
.g-doc-lignes{display:grid;gap:3px}
.g-doc-lignes i{height:3.5px;background:var(--g-surface2);border-radius:2px;display:block}
.g-doc-section-vedette{background:var(--g-qc-bg);border-left:2px solid var(--g-qc);padding:7px 9px}
.g-doc-section-vedette .g-doc-section-titre{margin-bottom:3px}
.g-doc-designee{font-size:8.5px;color:var(--g-muted);line-height:1.4}

.g-garanties{display:flex;gap:26px;flex-wrap:wrap;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--g-surface2)}
.g-garanties span{font-size:13.5px;color:var(--g-txt)}
.g-garanties b{font-weight:600}
.g-garanties-sep{width:1px;height:16px;background:var(--g-line)}

/* ------------------------------------------------------------------ */
/* 1e - Ce qui est gratuit, ce qui vient avec un plan                  */
/* La différence montrée comme deux objets : un écran contre des       */
/* documents. C'est la ligne du gratuit, en image.                     */
/* ------------------------------------------------------------------ */

.g-offre-grille{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.g-offre-carte{border:1px solid var(--g-line);border-radius:10px;padding:22px 24px;background:var(--g-fond)}
.g-offre-carte-plan{border:1.5px solid var(--g-accent);background:var(--g-surface)}
.g-offre-tete{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.g-offre-nom{font-size:18px;font-weight:600;color:var(--g-txt)}
.g-offre-prix-gratuit{font-size:14px;font-weight:600;color:var(--g-ok)}
.g-offre-prix-plan{font-size:14px;font-weight:600;color:var(--g-qc)}
.g-offre-quoi{font-size:13.5px;color:var(--g-muted);margin-bottom:18px}
.g-offre-quoi b{font-weight:600;color:var(--g-txt)}
.g-offre-ecran{background:var(--g-surface);border:1px solid var(--g-line);border-radius:8px;padding:16px 17px}
.g-offre-ecran .g-score{margin-bottom:13px}
.g-offre-ecran .g-score-nombre{font-size:24px}
.g-etat{margin-left:auto;font-size:12px;color:var(--g-warn);background:var(--g-warn-bg);border:1px solid var(--g-warn-line);border-radius:100px;padding:2px 10px;white-space:nowrap}
.g-constats{display:grid;gap:8px}
.g-constats .g-constat{margin-bottom:0}
.g-offre-carte p{font-size:13px;line-height:1.6;color:var(--g-muted);margin:16px 0 0}
.g-livrables{display:grid;gap:9px}
.g-livrable{display:flex;align-items:center;gap:11px;background:var(--g-fond);border:1px solid var(--g-line);border-radius:7px;padding:11px 13px}
.g-livrable-page{width:22px;height:28px;border:1px solid var(--g-line-fort);border-radius:2px;background:var(--g-surface);flex-shrink:0}
.g-livrable span{font-size:13px;color:var(--g-txt)}

.g-plans{display:grid;grid-template-columns:repeat(3,1fr);margin-top:22px;border:1px solid var(--g-line);border-radius:9px;overflow:hidden}
.g-plan{padding:15px 18px;background:var(--g-fond)}
.g-plan + .g-plan{border-left:1px solid var(--g-line)}
.g-plan-prix{font-family:var(--mono);font-size:13px;color:var(--g-txt);margin-bottom:3px}
.g-plan-quoi{font-size:13px;color:var(--g-muted);line-height:1.45}

/* ------------------------------------------------------------------ */
/* Le téléphone                                                        */
/* Valérie regarde le site entre deux réunions (docs/design-du-site.md).*/
/* Sous 980px - le seul point de rupture du site public - tout          */
/* s'empile, et les éléments secondaires sortent : un graphique qui se  */
/* lit en cinq secondes sur grand écran ne doit pas en demander trente  */
/* sur un téléphone. Aucun défilement horizontal, jamais.               */
/* ------------------------------------------------------------------ */

@media(max-width:980px){
  .g{padding:48px 20px}
  .g-carte-fond{padding:24px 20px 22px}
  .g h2.g-titre{font-size:22px}
  .g-chapeau{font-size:14px;margin-bottom:20px}

  /* 1a : la carte devient une pile de blocs. L'entête de colonnes et la
     colonne « ce qu'il faut avoir » sortent - le nom (qui porte le lien
     depuis la fusion du 2026-08-14) et « qui est visé » suffisent à
     répondre « qu'est-ce qui fait quoi » sur un écran de 390 px. */
  .g-carte-entete,
  .g-carte-ligne .g-carte-avoir{display:none}
  .g-carte-ligne{grid-template-columns:1fr;gap:8px;padding-top:16px;padding-bottom:16px;padding-left:12px;padding-right:12px}
  .g-carte-entete,
  .g-carte-famille,
  .g-carte-ligne{margin-left:-12px;margin-right:-12px}
  .g-carte-famille{padding-top:22px}

  /* 1b : les trois étapes l'une sous l'autre, le filet vertical devient
     horizontal. Le ruban du gratuit reste - c'est le point du visuel. */
  .g-parcours-grille{grid-template-columns:1fr;gap:28px}
  .g-etape,.g-etape:first-child,.g-etape:last-child{padding:0;border-left:0}
  .g-etape + .g-etape{padding-top:26px;border-top:1px solid var(--g-surface2)}
  .g-ruban{grid-template-columns:1fr}
  .g-ruban-plan{border-left:0;border-top:1px solid var(--g-line)}
  .g-ruban-gratuit{flex-wrap:wrap;gap:4px}

  /* 1c : les quatre volets empilés. */
  .g-anatomie-grille{grid-template-columns:1fr;gap:12px}

  /* 1d : la pile de feuilles sort - trois feuilles tournées dans 320px
     ne montrent plus rien. Reste la feuille du dessus, à plat et pleine
     largeur, et les légendes passent dessous, toutes alignées à gauche. */
  .g-document-grille{grid-template-columns:1fr;gap:26px}
  .g-feuilles{height:auto;margin:0 auto;max-width:298px}
  .g-feuille{display:none}
  .g-feuille-dessus{position:static;left:auto;top:auto;width:100%;height:auto;padding-bottom:26px}
  .g-legendes{gap:20px}
  .g-legendes-gauche{padding-right:0;text-align:left}
  .g-legendes-droite{padding-left:0}
  .g-garanties{gap:10px}
  .g-garanties-sep{display:none}
  .g-garanties span{flex:1 1 100%}

  /* 1e : l'écran gratuit puis les documents du plan, l'un sous l'autre. */
  .g-offre-grille{grid-template-columns:1fr;gap:16px}
  .g-plans{grid-template-columns:1fr}
  .g-plan + .g-plan{border-left:0;border-top:1px solid var(--g-line)}
}

/* Les jetons de référence restent lisibles au pouce : rien sous 12px
   pour un texte fait pour être recopié (docs/design-du-site.md). */
@media(max-width:760px){
  .g-ref,.g-constat-art,.g-mini-doc-ref{font-size:12px}
  .g-etape-quand,.g-volet-kicker{font-size:11px}
}

/* ------------------------------------------------------------------ */
/* Le filtre de la carte des obligations (2026-08-13).                  */
/* Les questions du triage - qui vivaient sur /par-ou-commencer/ -      */
/* deviennent les commandes de la carte : on répond, le tableau ne      */
/* garde que ce qui vise vraiment l'entreprise. Une seule surface au    */
/* lieu de deux qui disaient la même chose à deux endroits.             */
/* ------------------------------------------------------------------ */
.g-filtre{margin:0 0 26px}
.g-filtre-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.g-q{border:1px solid var(--g-line);background:var(--g-surface2);border-radius:9px;padding:12px 14px}
.g-q h3{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--g-txt);margin:0 0 3px;line-height:1.35}
.g-q .g-q-aide{font-size:11.5px;line-height:1.45;color:var(--g-muted);margin:0 0 9px}
.g-q-choix{display:flex;gap:6px;flex-wrap:wrap}
.g-q-choix label{position:relative}
.g-q-choix input{position:absolute;opacity:0;width:0;height:0}
.g-q-choix span{display:inline-block;border:1px solid var(--g-line-fort);border-radius:7px;
                padding:6px 11px;font-size:12.5px;color:var(--g-txt);cursor:pointer;
                background:var(--g-surface);transition:background .12s,border-color .12s,color .12s}
.g-q-choix input:checked+span{background:var(--g-accent);border-color:var(--g-accent);color:#fff;font-weight:600}
.g-q-choix input:focus-visible+span{outline:2px solid var(--g-accent);outline-offset:2px}

/* La barre d'état : ce que le filtre vient de faire, en une phrase.
   Le compte se CALCULE depuis les lignes visées, il ne s'écrit pas. */
.g-filtre-etat{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
               margin:16px 0 0;padding:11px 14px;border-radius:8px;
               background:var(--g-ok-bg);border:1px solid var(--g-ok-line);
               font-size:13.5px;color:var(--g-txt)}
.g-filtre-etat b{font-weight:600}
.g-filtre-actions{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.g-filtre-vider{font-family:var(--sans);font-size:12.5px;color:var(--g-accent);background:none;
                border:none;border-bottom:1px solid var(--g-line-fort);cursor:pointer;padding:0}
.g-filtre-vider:hover{color:var(--g-txt)}

/* Le filtre SURLIGNE, il ne masque pas (demande de Simon, 2026-08-13).
   Les lignes qui ne visent pas restent affichées, entièrement lisibles,
   avec la raison : savoir ce qui ne vous vise PAS est souvent
   l'information la plus utile de la page, et une ligne masquée est une
   information perdue. Elles n'ont donc aucun état visuel à elles - le
   contraste vient du surlignage des autres.

   Rien de tout ceci n'est dans le HTML servi : les dix lignes y sont,
   sans classe et sans état. C'est le script qui marque, jamais la page -
   un robot voit le tableau entier, un visiteur sans JavaScript aussi. */
/* Le surlignage est BLEU, pas vert (décision de Simon, 2026-08-14).
   Le vert dit « réussi, conforme »; une ligne surlignée ici veut dire
   « cette obligation s'applique à vous », ce qui n'est pas une bonne
   nouvelle - une DRH pressée lisait les lignes vertes comme celles qui
   allaient bien. Le bleu du Québec est déjà la couleur des jetons
   d'article de loi du site : elle ne dit ni bien ni mal, elle dit
   « ceci est de la loi, et c'est la vôtre ». `--g-ok` garde son nom :
   six autres graphiques le lisent pour de vrais états de conformité. */
.g-carte-ligne--vise{background:var(--g-qc-bg-fort);box-shadow:inset 3px 0 0 var(--g-qc)}
.g-verdict--vise{color:var(--g-qc)}
.g-verdict{display:block;font-family:var(--sans);font-size:10.5px;font-weight:700;
           letter-spacing:.5px;margin-bottom:5px}
.g-verdict--hors{color:var(--g-muted)}
/* Le troisième état (2026-08-14) : « à vérifier ». Certaines obligations
   ne rentrent ni dans « vise » ni dans « ne vise pas » - la Loi 25 vise
   toute entreprise qui recueille des renseignements personnels, c'est
   notre OUTIL qui a besoin d'un site web. Un surlignage plus discret que
   « visée », mais un surlignage quand même : la ligne mérite d'être vue,
   pas classée avec ce qui ne concerne pas le visiteur. */
.g-verdict--doute{color:var(--g-warn)}
.g-carte-ligne--doute{background:var(--g-warn-bg);box-shadow:inset 3px 0 0 var(--g-warn-line)}
.g-pourquoi{display:block;font-size:12.5px;line-height:1.45;color:var(--g-muted);margin-top:5px}

/* La famille non outillée : on la dit quand même. « Ce qu'on ne peut
   pas faire à votre place, on vous dit qui le fait » - c'est la seule
   partie du tableau qui rend service à quelqu'un dont on n'a rien à
   tirer, et c'est exactement pour ça qu'elle y est. */
.g-carte-offre-tiers{color:var(--g-muted)}

@media(max-width:980px){
  .g-filtre-grille{grid-template-columns:1fr}
  .g-filtre-etat{font-size:13px}
  .g-filtre-actions{margin-left:0;width:100%}
  /* La colonne « ce qu'il faut avoir » sort sur téléphone (voir plus
     haut) : la raison du filtre, elle, RESTE - c'est la réponse. */
  .g-carte-ligne .g-pourquoi{display:block}
}

/* Les lignes de la carte mènent à leur module (2026-08-13). La feuille
   n'a aucune règle `a` de base : sans couleur déclarée, un <a> sort au
   #0000EE du navigateur. Règle nommée, comme partout ailleurs. */