/* ==========================================================================
   Pierrel & Co — feuille de style
   --------------------------------------------------------------------------
   La grammaire est celle des plateformes financières françaises : une teinte
   saturée unique, une encre marine très sombre, des fonds teintés très pâles,
   des cartes blanches à grands rayons, des boutons pilule, et de grands titres
   serrés. Les écrans du produit sont le visuel principal — pas d'illustration,
   pas de photographie d'agence.

   Deux thèmes. Le clair est la référence, le sombre est une traduction, pas un
   simple inversement. Le réglage se fait en trois temps, dans cet ordre :
     1. :root                                    → valeurs claires
     2. @media (prefers-color-scheme: dark)      → sombre, sauf override clair
     3. :root[data-theme="dark"]                 → sombre forcé
   ========================================================================== */

/* --- 1. Jetons --------------------------------------------------------- */
:root {
  color-scheme: light;

  --accent:        #4A2BE8;   /* la teinte unique */
  --accent-fonce:  #3718C4;
  --accent-clair:  #EDEAFE;   /* aplats, pastilles */
  --accent-filet:  #D9D3FB;

  --encre:         #15152B;   /* titres, boutons pleins */
  --encre-douce:   #5E5E79;   /* texte courant */
  --encre-tenue:   #65657E;   /* légendes, étiquettes — 5,7:1 sur blanc */

  --papier:        #FFFFFF;
  --papier-tein:   #EFEEFE;   /* sections teintées */
  --papier-pale:   #F8F7FF;
  --carte:         #FFFFFF;
  --carte-pale:    #F7F6FF;
  --creme:         #FDF9F0;

  --filet:         #E6E4F4;
  --filet-fort:    #CFCCE6;
  --filet-controle:#6E6B88;   /* bord des commandes, texte indicatif — 5:1 */

  --vert:          #0E7C46;
  --vert-fond:     #DCF3E6;
  --ambre:         #9A4B0B;
  --ambre-fond:    #FBEBDB;
  --rouge:         #B42318;
  --rouge-fond:    #FDE7E5;

  --bouton-fond:   #15152B;
  --bouton-texte:  #FFFFFF;

  --degrade-heros: linear-gradient(168deg,
                     #FDF7EA 0%, #FBFBF2 20%, #EDF7F0 44%, #F0EEFE 72%, #ECEAFE 100%);
  --degrade-puce:  linear-gradient(135deg, #FBF3E2, #E8F5EC 55%, #E7E3FD);
  --fil-rail:      linear-gradient(180deg, #F3E9D4, #D9EEE0 45%, #CFC8F9);

  --ombre-1: 0 1px 2px rgba(21, 21, 43, .04), 0 10px 24px -16px rgba(21, 21, 43, .16);
  --ombre-2: 0 2px 4px rgba(21, 21, 43, .04), 0 28px 60px -32px rgba(21, 21, 43, .34);
  --ombre-3: 0 40px 90px -48px rgba(21, 21, 43, .46);

  --r1: 10px; --r2: 16px; --r3: 22px; --r4: 30px; --rp: 999px;

  --t1: .25rem; --t2: .5rem; --t3: .875rem; --t4: 1.5rem;
  --t5: 2.5rem; --t6: 4rem;  --t7: 6.5rem;

  --police: "Jakarta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Le sombre est une traduction, pas un inversement. Trois choses le
       tiennent : des surfaces franchement distinctes les unes des autres
       (fond, section teintée, carte), des filets visibles, et une teinte
       d'accent plus claire et plus saturée que celle du clair — sur du
       quasi-noir, l'indigo du jour devient gris.
       3 novembre 2026 : fonds et cartes éclaircis d'un cran, à la demande
       d'Axel (« légèrement plus clair ») ; 4 novembre 2026 : encore un cran
       (« c'est trop foncé »). */
    --accent:        #8E7CFF;
    --accent-fonce:  #A99BFF;
    --accent-clair:  #383068;
    --accent-filet:  #3A3175;
    --encre:         #EEF1F8;
    --encre-douce:   #A8B0C4;
    --encre-tenue:   #959DB3;
    --papier:        #22273A;
    --papier-tein:   #292F44;
    --papier-pale:   #252A3E;
    --carte:         #2E3449;
    --carte-pale:    #353C53;
    --creme:         #2C2A42;
    --filet:         #414962;
    --filet-fort:    #58617D;
    --filet-controle:#8C94AB;
    --vert:          #4ADE94;
    --vert-fond:     #0D3326;
    --ambre:         #FFB36B;
    --ambre-fond:    #3A2614;
  --rouge:         #F87171;
  --rouge-fond:    #3B1618;
    --rouge:         #F87171;
    --rouge-fond:    #3B1618;
    --bouton-fond:   #EDEFF8;
    --bouton-texte:  #0F121C;
    /* Deux halos et un fond plat, plutôt qu'un dégradé à cinq arrêts : le
       dégradé du thème clair, traduit arrêt par arrêt, virait au brun verdâtre. */
    --degrade-heros: radial-gradient(118% 86% at 16% -8%, rgba(142, 124, 255, .26), transparent 58%),
                     radial-gradient(96% 76% at 88% 6%, rgba(72, 196, 180, .13), transparent 54%),
                     linear-gradient(180deg, #2A2F44 0%, #22273A 100%);
    --degrade-puce:  linear-gradient(135deg, #2C2560, #1E2C4E 55%, #2A2168);
    --fil-rail:      linear-gradient(180deg, #4A3F93, #2C5467 45%, #4A3F93);
    --ombre-1: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 24px -16px rgba(0, 0, 0, .8);
    --ombre-2: 0 2px 4px rgba(0, 0, 0, .5), 0 28px 60px -32px rgba(0, 0, 0, .9);
    --ombre-3: 0 40px 90px -48px rgba(0, 0, 0, 1);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Le sombre est une traduction, pas un inversement. Trois choses le
     tiennent : des surfaces franchement distinctes les unes des autres
     (fond, section teintée, carte), des filets visibles, et une teinte
     d'accent plus claire et plus saturée que celle du clair — sur du
     quasi-noir, l'indigo du jour devient gris.
     3 novembre 2026 : fonds et cartes éclaircis d'un cran. */
  --accent:        #8E7CFF;
  --accent-fonce:  #A99BFF;
  --accent-clair:  #383068;
  --accent-filet:  #3A3175;
  --encre:         #EEF1F8;
  --encre-douce:   #A8B0C4;
  --encre-tenue:   #959DB3;
  --papier:        #22273A;
  --papier-tein:   #292F44;
  --papier-pale:   #252A3E;
  --carte:         #2E3449;
  --carte-pale:    #353C53;
  --creme:         #2C2A42;
  --filet:         #414962;
  --filet-fort:    #58617D;
  --filet-controle:#8C94AB;
  --vert:          #4ADE94;
  --vert-fond:     #0D3326;
  --ambre:         #FFB36B;
  --ambre-fond:    #3A2614;
  --rouge:         #F87171;
  --rouge-fond:    #3B1618;
  --bouton-fond:   #EDEFF8;
  --bouton-texte:  #0F121C;
  /* Deux halos et un fond plat, plutôt qu'un dégradé à cinq arrêts : le
     dégradé du thème clair, traduit arrêt par arrêt, virait au brun verdâtre. */
  --degrade-heros: radial-gradient(118% 86% at 16% -8%, rgba(142, 124, 255, .26), transparent 58%),
                   radial-gradient(96% 76% at 88% 6%, rgba(72, 196, 180, .13), transparent 54%),
                   linear-gradient(180deg, #2A2F44 0%, #22273A 100%);
  --degrade-puce:  linear-gradient(135deg, #2C2560, #1E2C4E 55%, #2A2168);
  --fil-rail:      linear-gradient(180deg, #4A3F93, #2C5467 45%, #4A3F93);
  --ombre-1: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 24px -16px rgba(0, 0, 0, .8);
  --ombre-2: 0 2px 4px rgba(0, 0, 0, .5), 0 28px 60px -32px rgba(0, 0, 0, .9);
  --ombre-3: 0 40px 90px -48px rgba(0, 0, 0, 1);
}

/* --- 2. Socle ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* La taille de base grandit avec l'écran : 16 px sur un téléphone, 18 px à
   partir de 1440. Le site prend maintenant toute la largeur ; garder un texte
   de téléphone sur un écran de bureau tassait les informations dans des
   lignes trop fines. Tout est en rem : tout suit. Les paliers des @media,
   eux, restent calculés sur 16 px — ils ne bougent pas. */
html {
  font-size: clamp(100%, 95.4% + .19vw, 112.5%);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre-douce);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  color: var(--encre);
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.1rem + 4.9vw, 4.4rem); line-height: 1.03; }
h2 { font-size: clamp(1.85rem, 1.05rem + 3.3vw, 3.2rem);  line-height: 1.07; }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem);   line-height: 1.25; letter-spacing: -.02em; }
h4 { font-size: 1.0625rem; letter-spacing: -.01em; }

p { margin: 0 0 var(--t3); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--accent-fonce); }

strong { color: var(--encre); font-weight: 600; }

ul, ol { margin: 0 0 var(--t3); padding-left: 1.15rem; }
li { margin-bottom: .4rem; }
li::marker { color: var(--filet-controle); }

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

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

/* Sans cette ligne, un élément à display: grid ou flex ignore l'attribut
   hidden : la règle du navigateur est moins spécifique que la nôtre. */
[hidden] { display: none !important; }

/* Pas de barre de défilement sur le côté, nulle part : la page défile à la
   molette, au pavé ou au doigt, sans ce rail qui mange la largeur. */
html, body, * { scrollbar-width: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }

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

.evitement {
  position: fixed; top: var(--t3); left: 50%;
  transform: translate(-50%, -300%);
  z-index: 100;
  background: var(--bouton-fond); color: var(--bouton-texte);
  padding: .7rem 1.3rem; border-radius: var(--rp);
  font-weight: 600; text-decoration: none;
  transition: transform .2s ease;
}
.evitement:focus { transform: translate(-50%, 0); color: var(--bouton-texte); }

/* --- 3. Trame ---------------------------------------------------------- */
.enveloppe {
  width: 100%;
  /* Large : sur un écran de 1920 px, 76 rem en laissaient 37 % vides et
     serraient les tableaux et les fiches. La lecture reste bornée en
     caractères, plus bas — c'est la place des cases qui grandit, pas la
     longueur des lignes. */
  max-width: 114rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, .4rem + 2.4vw, 2.5rem);
}
.enveloppe-etroite { max-width: 46rem; }

.section { padding-block: clamp(3.5rem, 2rem + 6vw, var(--t7)); }
.heros + .section { padding-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }
.section-tein { background: var(--papier-tein); }
.section-pale { background: var(--papier-pale); }
.section-creme { background: var(--creme); }

.titre-section { max-width: 34ch; margin-inline: auto; text-align: center; }
.titre-section + .intro { max-width: 56ch; margin: var(--t4) auto 0; text-align: center; }
.intro.titre-section { max-width: 56ch; margin-top: var(--t4); }

.intro { font-size: clamp(1.02rem, .97rem + .35vw, 1.2rem); }
.chapeau {
  font-size: clamp(1.06rem, .98rem + .6vw, 1.35rem);
  line-height: 1.5;
  color: var(--encre-douce);
}
.lecture { max-width: 64ch; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.rangee { display: flex; flex-wrap: wrap; gap: var(--t3); align-items: center; }
.rangee-centre { justify-content: center; }

.etiq {
  display: block;
  font-size: .84rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--encre-tenue);
}

/* --- 4. Boutons -------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem;
  padding: .8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--rp);
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font: inherit; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease, background-color .18s ease;
}
.bouton:hover { color: var(--bouton-texte); transform: translateY(-1px); box-shadow: var(--ombre-1); }
.bouton:active { transform: translateY(0); }

.bouton-accent { background: var(--accent); color: #fff; }
.bouton-accent:hover { background: var(--accent-fonce); color: #fff; }
:root[data-theme="dark"] .bouton-accent,
:root[data-theme="dark"] .bouton-accent:hover { color: #14142A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bouton-accent,
  :root:not([data-theme="light"]) .bouton-accent:hover { color: #14142A; }
}

.bouton-sobre {
  background: transparent; color: var(--encre);
  border-color: var(--filet-fort);
}
.bouton-sobre:hover { background: var(--carte-pale); color: var(--encre); border-color: var(--accent); }

.bouton-large { width: 100%; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600;
  text-decoration: underline; text-underline-offset: .25em;
}
.lien-fleche svg { width: 1em; height: 1em; transition: transform .2s ease; }
.lien-fleche:hover svg { transform: translateX(3px); }

/* --- 5. Bandeau -------------------------------------------------------- */
.bandeau {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--papier) 78%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
.bandeau.pose {
  border-bottom-color: var(--filet);
  background: color-mix(in srgb, var(--papier) 92%, transparent);
}
@supports not (backdrop-filter: blur(1px)) { .bandeau { background: var(--papier); } }

.bandeau-interieur {
  display: flex; align-items: center; gap: var(--t3);
  min-height: 4.5rem;
}

.marque {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-right: auto;
  color: var(--encre); font-weight: 800;
  font-size: 1.22rem; letter-spacing: -.035em;
  text-decoration: none; white-space: nowrap;
}
.marque:hover { color: var(--encre); }
.marque .sigle {
  display: block; width: 1.55rem; height: 1.55rem; flex: none;
  color: var(--accent);
}
.marque span.co { color: var(--accent); }

.menu { display: flex; align-items: center; gap: .35rem; }
.menu a {
  padding: .5rem .8rem;
  border-radius: var(--rp);
  color: var(--encre-douce); font-weight: 600; font-size: .96rem;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.menu a:hover { background: var(--carte-pale); color: var(--encre); }
.menu a[aria-current="page"] { color: var(--encre); background: var(--accent-clair); }
.menu .bouton {
  margin-left: .4rem; min-height: 2.75rem; padding: .55rem 1.3rem;
  color: var(--bouton-texte);   /* sinon `.menu a`, plus spécifique, l'emporte */
}
.menu .bouton:hover { background: var(--bouton-fond); }

/* L'icône de « Accueil », alignée sur le texte. */
.menu a:has(.icone-menu) { display: inline-flex; align-items: center; gap: .4rem; }
.icone-menu { width: 1.1rem; height: 1.1rem; flex: none; }

/* « Connexion » : au bureau, dernier lien du menu ; au téléphone, dans le
   bandeau, toujours visible (le reste du menu se replie). */
.connexion-telephone { display: none; }
@media (max-width: 62rem) {
  .connexion-telephone { display: inline-flex; }
  .menu .connexion-bureau { display: none; }
}

/* Hors du menu repliable : il doit rester visible sur téléphone, où le reste
   du menu disparaît derrière le bouton à trois traits. */
.bouton-bandeau {
  min-height: 2.75rem; padding: .55rem 1.3rem;
  color: var(--bouton-texte);
  white-space: nowrap;
}
@media (max-width: 26rem) { .bouton-bandeau { padding-inline: 1rem; font-size: .95rem; } }
/* Sous 352 px, le mot-symbole cède la place : le sigle suffit à identifier le
   site, et « Connexion » doit rester atteignable. */
@media (max-width: 22rem) {
  .marque > span { display: none; }
  .bandeau-interieur { gap: .4rem; }
}

.menu-bascule {
  display: none;
  width: 2.75rem; height: 2.75rem; flex: none;
  align-items: center; justify-content: center;
  border: 0; border-radius: var(--r1);
  background: transparent; color: var(--encre); cursor: pointer;
}
.menu-bascule svg { width: 1.5rem; height: 1.5rem; }
.menu-bascule:hover { background: var(--carte-pale); }

/* --- La cloche des nouveaux textes --------------------------------------- */
.cloche-boite { position: relative; }
.cloche {
  position: relative;
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--rp);
  background: transparent; color: var(--encre-douce); cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.cloche svg { width: 1.35rem; height: 1.35rem; }
.cloche:hover { background: var(--carte-pale); color: var(--encre); }
.cloche.sonne { color: var(--accent); }
.pastille-compte {
  position: absolute; top: .3rem; right: .25rem;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem;
  display: grid; place-items: center;
  border-radius: var(--rp);
  background: var(--accent); color: #fff;
  font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 2px solid var(--papier);
}
:root[data-theme="dark"] .pastille-compte { color: #14142A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pastille-compte { color: #14142A; }
}

.panneau-avis {
  position: absolute; z-index: 70; right: 0; top: calc(100% + .5rem);
  width: min(24rem, calc(100vw - 2rem));
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r3);
  box-shadow: var(--ombre-2);
  overflow: hidden;
}
.panneau-tete {
  display: flex; align-items: center; justify-content: space-between; gap: var(--t3);
  padding: var(--t3) var(--t4);
  border-bottom: 1px solid var(--filet);
}
.panneau-tete h2 { font-size: 1rem; margin: 0; }
.lien-nu {
  border: 0; background: transparent; padding: 0;
  color: var(--accent); font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: .2em;
}
.panneau-avis ul { list-style: none; margin: 0; padding: 0; max-height: 24rem; overflow-y: auto; }
.avis { margin: 0; border-bottom: 1px solid var(--filet); }
.avis a {
  display: grid; gap: .15rem;
  padding: var(--t3) var(--t4);
  text-decoration: none; color: var(--encre-douce);
}
.avis a:hover { background: var(--carte-pale); }
.avis.neuf a { border-left: 3px solid var(--accent); padding-left: calc(var(--t4) - 3px); }
.avis.prioritaire .avis-dom { color: var(--ambre); }
/* Un avis dit où il mène : « le texte et ce qu'il faut faire ». */
.avis-aller {
  display: block; margin-top: .3rem;
  color: var(--accent); font-size: .86rem; font-weight: 600;
}
.avis-date { font-size: .8rem; color: var(--encre-tenue); }
.avis-titre { color: var(--encre); font-weight: 600; font-size: .95rem; }
.avis-quoi { font-size: .88rem; }
.avis-dom { margin-top: .15rem; text-transform: none; letter-spacing: 0; font-weight: 500; }
.avis-vide { margin: 0; padding: var(--t4); text-align: center; color: var(--encre-tenue); }
.avis-separateur {
  margin: 0; padding: .5rem var(--t4);
  background: var(--carte-pale);
  border-block: 1px solid var(--filet);
}
.panneau-pied {
  margin: 0; padding: var(--t3) var(--t4);
  border-top: 1px solid var(--filet);
  background: var(--carte-pale);
  font-size: .85rem; color: var(--encre-tenue);
}

.theme {
  display: inline-flex; margin-left: .4rem;
  border: 1px solid var(--filet); border-radius: var(--rp);
  padding: 2px; gap: 2px;
}
.theme button {
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--rp);
  background: transparent; color: var(--encre-tenue); cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.theme button svg {
  width: 1rem; height: 1rem; fill: none;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
}
.theme button:hover { color: var(--encre); }
.theme button[aria-pressed="true"] { background: var(--accent-clair); color: var(--accent); }

/* Le menu se replie dans son bouton quand il ne tient plus sur une ligne. Le
   menu public a trois liens et tient jusqu'à 62 rem ; celui de l'application
   en a sept, et depuis que le texte grandit avec l'écran il passait sur deux
   ou trois lignes entre 1 000 et 1 200 px. Il se replie donc plus tôt, sous
   76 rem — mesuré : il tient d'une ligne à partir de 1 200 px. Le même seuil
   est dans assets/app.js. */
@media (max-width: 86rem) {   /* 76 rem avant le huitième onglet (3 novembre 2026) */
  .zone-app .menu-bascule { display: inline-flex; }
  .zone-app .bandeau .menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .2rem;
    padding: var(--t3) clamp(1rem, .4rem + 2.4vw, 2.5rem) var(--t4);
    background: var(--papier);
    border-bottom: 1px solid var(--filet);
    box-shadow: var(--ombre-1);
  }
  .zone-app .bandeau .menu[hidden] { display: none; }
  .zone-app .bandeau .menu a { padding: .7rem .9rem; font-size: 1.05rem; }
  .zone-app .menu .bouton { margin: var(--t2) 0 0; }
  .zone-app .theme { margin: var(--t3) 0 0; align-self: flex-start; }
}
@media (max-width: 62rem) {
  .menu-bascule { display: inline-flex; }
  .bandeau .menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .2rem;
    padding: var(--t3) clamp(1rem, .4rem + 2.4vw, 2.5rem) var(--t4);
    background: var(--papier);
    border-bottom: 1px solid var(--filet);
    box-shadow: var(--ombre-1);
  }
  .bandeau .menu[hidden] { display: none; }
  .bandeau .menu a { padding: .7rem .9rem; font-size: 1.05rem; }
  .menu .bouton { margin: var(--t2) 0 0; }
  .theme { margin: var(--t3) 0 0; align-self: flex-start; }
}

/* --- 6. Héros ---------------------------------------------------------- */
.heros {
  position: relative;
  background: var(--degrade-heros);
  padding-block: clamp(2.5rem, 1rem + 6vw, 5rem) clamp(3rem, 2rem + 3vw, 4.5rem);
  overflow: hidden;
}
.heros .enveloppe { position: relative; z-index: 1; }
.heros-texte { text-align: center; }
.heros h1 {
  font-size: clamp(2.35rem, 1rem + 6.1vw, 4.9rem);
  max-width: 19ch; margin-inline: auto;
}
.heros-sous {
  max-width: 54ch; margin: var(--t4) auto 0;
  text-align: center;
  font-size: clamp(1.05rem, .98rem + .6vw, 1.3rem);
  line-height: 1.5;
}
/* L'accroche : la phrase qui vend, juste sous le titre. */
.heros-accroche {
  max-width: 46ch; margin: var(--t4) auto 0; text-align: center;
  font-size: clamp(1.15rem, 1.02rem + .8vw, 1.5rem); line-height: 1.4;
  font-weight: 700; letter-spacing: -.01em; color: var(--encre);
}
.heros-accroche + .heros-sous { margin-top: var(--t3); }
.heros .rangee { margin-top: var(--t5); }
.heros .bouton { min-height: 3.4rem; padding-inline: 2.2rem; font-size: 1.05rem; }

/* Sur téléphone, deux boutons de largeurs différentes au centre font désordre. */
@media (max-width: 36rem) {
  .heros .rangee > .bouton, .bande-finale .rangee > .bouton { width: 100%; }
}

.gage {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; flex-wrap: wrap;
  margin-top: var(--t4);
  color: var(--encre); font-weight: 600;
}
.gage svg, .gage .sigle { width: 1.15rem; height: 1.15rem; color: var(--accent); flex: none; }
.gage .doux { color: var(--encre-douce); font-weight: 400; }

/* Le visuel : deux écrans réels de l'application, pas une illustration.
   L'ordinateur porte le tableau de bord, le téléphone le relevé — c'est le
   même produit vu des deux côtés, pas deux fois la même image. */
/* Le téléphone se cale sur le bord droit de ce cadre. Le cadre a donc la
   largeur de la composition — l'ordinateur au centre, le téléphone qui le
   chevauche — et non celle de la page : quand la page s'est élargie à tout
   l'écran, le téléphone était parti à 194 px de l'ordinateur. Les
   proportions sont celles d'origine (56 / 72), agrandies d'un sixième. */
.heros-visuel {
  position: relative;
  width: 100%; max-width: 84rem; margin-inline: auto;
  margin-top: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.heros-visuel .portable { width: min(100%, 66rem); }
.heros-visuel .mobile {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: min(15.5rem, 23%);
  /* Incliné ici seulement, là où il chevauche le portable : c'est ce
     décalage qui donne la profondeur. Posé seul, droit, il est plus lisible.
     L'origine en bas à droite garde le coin contre le bord, pour que la
     rotation n'élargisse pas la page. */
  transform: rotate(-3deg);
  transform-origin: 100% 100%;
}
/* Sur téléphone, l'ordinateur réduit à 60 % d'un écran de 390 px ne montre
   plus rien : on garde la seule maquette qui reste lisible à cette taille.
   L'image écartée est en lazy : le navigateur ne la télécharge pas. */
@media (max-width: 52rem) {
  .heros-visuel .portable { display: none; }
  /* Seul à l'écran, il se remet droit : il n'a plus rien à chevaucher. */
  .heros-visuel .mobile { position: static; width: min(15rem, 64%); transform: none; }
}
/* La force du reflet de verre. Sur une capture claire il se perd s'il est
   trop discret ; sur une capture sombre, la même valeur devient deux grandes
   bandes grises en travers de l'écran. Il est donc réglé par thème, dans le
   même ordre en trois temps que les jetons de couleur — sinon un thème forcé
   ne passerait pas. */
.portable, .mobile { --reflet: .16; --reflet-bis: .06; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .portable,
  :root:not([data-theme="light"]) .mobile { --reflet: .05; --reflet-bis: .022; }
}
:root[data-theme="dark"] .portable,
:root[data-theme="dark"] .mobile { --reflet: .05; --reflet-bis: .022; }
:root[data-theme="light"] .portable,
:root[data-theme="light"] .mobile { --reflet: .16; --reflet-bis: .06; }

/* --- 7. Maquettes d'appareil -------------------------------------------
   Dessinées en CSS, sans image : un châssis, un liseré clair sur l'arête
   éclairée, un pied, et une ombre portée au sol. Rien de photographique —
   l'écran reste le sujet, le boîtier est là pour le tenir. */
/* --- L'ordinateur portable -------------------------------------------------
   Un boîtier d'aluminium, pas de plastique sombre : c'est la couleur qui fait
   reconnaître la machine avant la forme. Le capot porte l'encoche et un
   reflet de verre ; le socle porte la charnière et l'échancrure d'ouverture.
   Rien de photographique, et aucune marque : c'est un dessin, l'écran reste
   le sujet. */
.portable {
  position: relative;
  --alu-clair: #D9DCE3;
  --alu: #AEB3BE;
  --alu-sombre: #7E8491;
  isolation: isolate;
  --rail: clamp(.2rem, .09rem + .36vw, .36rem);
  --cadre: clamp(.26rem, .12rem + .46vw, .46rem);
  --arrondi: clamp(.7rem, .35rem + 1.1vw, 1.25rem);
}

/* L'ombre au sol : la machine est posée sur quelque chose, elle ne flotte
   pas. Elle déborde vers le bas, jamais sur les côtés — un débord latéral
   élargirait la page. */
.portable::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 5%; right: 5%; bottom: -3.5%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(12, 14, 30, .38) 0%, rgba(12, 14, 30, .16) 55%, transparent 74%);
  filter: blur(9px);
}

/* Le capot : le liseré d'aluminium au-dehors... */
.portable .capot {
  display: block;
  padding: var(--rail);
  border-radius: var(--arrondi) var(--arrondi) calc(var(--arrondi) * .22) calc(var(--arrondi) * .22);
  background:
    linear-gradient(170deg, var(--alu-clair) 0%, var(--alu) 22%, var(--alu-sombre) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    var(--ombre-3);
}
/* ...et le cadre noir au-dedans. C'est lui qui porte l'encoche : posée sur
   l'aluminium, elle avait l'air d'une étiquette collée. */
.portable .dalle {
  position: relative; display: block;
  padding: var(--cadre) var(--cadre) calc(var(--cadre) * 1.5);
  border-radius: calc(var(--arrondi) - var(--rail)) calc(var(--arrondi) - var(--rail))
                 calc(var(--arrondi) * .14) calc(var(--arrondi) * .14);
  background: #0A0A11;
}
/* L'encoche, creusée dans le cadre haut, avec l'objectif dedans. */
.portable .dalle::before {
  content: ""; position: absolute; z-index: 3;
  top: 0; left: 50%; transform: translateX(-50%);
  width: clamp(4rem, 1.8rem + 6.4vw, 8.2rem);
  height: calc(var(--cadre) * 2.1);
  border-radius: 0 0 calc(var(--cadre) * .9) calc(var(--cadre) * .9);
  background: #0A0A11;
  box-shadow: inset 0 calc(var(--cadre) * -.75) 0 calc(var(--cadre) * -.62) rgba(120, 130, 160, .5);
}
/* Le reflet du verre : une diagonale très pâle, posée sur tout l'écran. */
.portable .dalle::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  inset: var(--cadre) var(--cadre) calc(var(--cadre) * 1.5);
  border-radius: calc(var(--arrondi) * .3);
  background: linear-gradient(104deg,
    rgba(255, 255, 255, var(--reflet)) 0 9%,
    rgba(255, 255, 255, var(--reflet-bis)) 9% 15%,
    rgba(255, 255, 255, 0) 15% 46%,
    rgba(255, 255, 255, var(--reflet-bis)) 46% 52%,
    rgba(255, 255, 255, 0) 52% 100%);
}
.portable img {
  /* Pas de « display » ici : c'est lui qui choisit la capture claire ou la
     sombre, plus bas, et une règle plus précise le lui prendrait. */
  position: relative; z-index: 1;
  width: 100%; vertical-align: top;
  border-radius: calc(var(--arrondi) * .3);
  background: var(--carte);
}
/* Le socle, vu de face : la charnière en haut, l'échancrure d'ouverture en
   bas. Il reste dans la largeur du capot — un débord par marge négative
   élargissait la page de 20 px partout où rien ne le rognait. */
.portable .socle {
  position: relative; display: block;
  height: clamp(.65rem, .34rem + 1vw, 1.15rem);
  margin-top: 0;
  border-radius: 0 0 clamp(.5rem, .3rem + .6vw, .9rem) clamp(.5rem, .3rem + .6vw, .9rem);
  background: linear-gradient(180deg,
    var(--alu-sombre) 0%, var(--alu-clair) 26%, var(--alu) 62%, var(--alu-sombre) 100%);
  box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .75);
}
/* La charnière : un trait sombre, pile à la jonction. */
.portable .socle::before {
  content: ""; position: absolute; inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .12));
}
/* L'échancrure où l'on glisse le doigt pour ouvrir. */
.portable .socle::after {
  content: ""; position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 13%; height: 46%;
  border-radius: 0 0 999px 999px;
  background: radial-gradient(ellipse 100% 100% at 50% 0%,
    rgba(0, 0, 0, .42) 58%, rgba(0, 0, 0, .12) 100%);
}

/* --- Le téléphone -----------------------------------------------------------
   Deux coques : la tranche claire au-dehors, le cadre noir au-dedans. L'îlot
   du haut et les boutons de tranche font le reste. */
.mobile {
  position: relative;
  --tranche: clamp(.16rem, .07rem + .3vw, .3rem);
  --cadre: clamp(.22rem, .1rem + .4vw, .42rem);
  --arrondi: clamp(1.3rem, .7rem + 1.9vw, 2.6rem);
  padding: var(--tranche);
  border-radius: var(--arrondi);
  background: linear-gradient(142deg,
    #E4E6EB 0%, #A9AEBA 16%, #6F7482 42%, #9BA0AC 72%, #5C6170 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .45),
    var(--ombre-3);
}
/* Les boutons de la tranche droite : veille, un seul et plus long. */
.mobile::after {
  content: ""; position: absolute; right: calc(var(--tranche) * -1); top: 26%;
  width: calc(var(--tranche) * 1.1); height: 11%;
  border-radius: 0 var(--rp) var(--rp) 0;
  background: linear-gradient(180deg, #C6CAD3, #6A6F7D);
}
/* Ceux de la tranche gauche : le bouton d'action, puis les deux du volume. */
.mobile::before {
  content: ""; position: absolute; left: calc(var(--tranche) * -1); top: 19%;
  width: calc(var(--tranche) * 1.1); height: 5%;
  border-radius: var(--rp) 0 0 var(--rp);
  background: linear-gradient(180deg, #C6CAD3, #6A6F7D);
  box-shadow:
    0 calc(8% + .55rem) 0 0 #9BA0AC,
    0 calc(16% + 1.5rem) 0 0 #9BA0AC;
}
/* Le cadre noir, entre la tranche et l'écran. */
.mobile .chassis {
  position: relative; display: block;
  padding: var(--cadre);
  border-radius: calc(var(--arrondi) - var(--tranche));
  background: #07070C;
}
/* L'îlot du haut, avec l'objectif dedans. */
.mobile .chassis::before {
  content: ""; position: absolute; z-index: 3;
  top: calc(var(--cadre) + clamp(.18rem, .08rem + .22vw, .4rem));
  left: 50%; transform: translateX(-50%);
  width: 27%; height: clamp(.4rem, .22rem + .42vw, .78rem);
  border-radius: var(--rp);
  background: #05050A;
  box-shadow: inset calc(27% / 3) 0 0 -0.14rem rgba(70, 80, 110, .5);
}
/* Le reflet, même diagonale que sur le portable. */
.mobile .chassis::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  inset: var(--cadre);
  border-radius: calc(var(--arrondi) - var(--tranche) - var(--cadre));
  background: linear-gradient(104deg,
    rgba(255, 255, 255, var(--reflet)) 0 9%,
    rgba(255, 255, 255, var(--reflet-bis)) 9% 15%,
    rgba(255, 255, 255, 0) 15% 46%,
    rgba(255, 255, 255, var(--reflet-bis)) 46% 52%,
    rgba(255, 255, 255, 0) 52% 100%);
}
.mobile img {
  /* Pas de « display » ici : c'est lui qui choisit la capture claire ou la
     sombre, plus bas, et une règle plus précise le lui prendrait. */
  position: relative; z-index: 1;
  width: 100%; vertical-align: top;
  border-radius: calc(var(--arrondi) - var(--tranche) - var(--cadre));
  background: var(--carte);
}

/* Une seule des deux captures est affichée. Les règles sombres suivent le même
   ordre en trois temps que les jetons, sinon un thème forcé ne passerait pas. */
.ecran-sombre { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ecran-clair { display: none; }
  :root:not([data-theme="light"]) .ecran-sombre { display: block; }
}
:root[data-theme="dark"] .ecran-clair { display: none; }
:root[data-theme="dark"] .ecran-sombre { display: block; }
:root[data-theme="light"] .ecran-clair { display: block; }

.ecran-absent {
  padding: var(--t4); border: 1px dashed var(--filet-fort);
  border-radius: var(--r2); text-align: center;
}

/* --- 8. Rail de chiffres ----------------------------------------------- */
.rail { position: relative; display: grid; gap: var(--t5); }
.rail-fil {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--fil-rail);
  border-radius: var(--rp);
  transform-origin: top;
}
.rail-item {
  position: relative;
  padding-left: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.rail-item::before {
  content: ""; position: absolute;
  left: 0; top: 1.4rem;
  width: clamp(1.25rem, .6rem + 2.6vw, 3rem); height: 2px;
  background: var(--fil-rail);
  border-radius: var(--rp);
  transform-origin: left;
}
.rail-item .chiffre {
  display: block;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.1rem);
  font-weight: 700; letter-spacing: -.035em; line-height: 1.1;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.rail-item .legende { max-width: 28ch; margin-top: var(--t2); }

@media (min-width: 60rem) {
  .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--t4); }
  .rail-fil { left: 0; right: 0; top: 1.4rem; bottom: auto; width: auto; height: 2px;
              background: var(--fil-rail); }
  .rail-item { padding: 3.2rem 0 0; }
  .rail-item::before { display: none; }
  .rail-item .legende { max-width: 22ch; }
}

/* --- 9. Bascule à deux segments ---------------------------------------- */
.bascule {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  max-width: 34rem; margin: var(--t5) auto 0;
  padding: 4px;
  border: 1px solid var(--accent-filet);
  border-radius: var(--rp);
  background: var(--carte);
  isolation: isolate;
}
.bascule-curseur {
  position: absolute; z-index: -1;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--rp);
  background: var(--accent);
  transition: transform .34s cubic-bezier(.22, .9, .25, 1);
}
/* Trois profils : le curseur fait un tiers. */
.bascule-trois { max-width: 44rem; }
.bascule-trois .bascule-curseur { width: calc((100% - 8px) / 3); }
@media (max-width: 30rem) { .bascule-trois button { padding-inline: .4rem; font-size: .9rem; } }
.bascule button {
  position: relative;
  min-height: 3rem; padding: .7rem 1rem;
  border: 0; background: transparent;
  border-radius: var(--rp);
  font: inherit; font-weight: 600; font-size: 1.02rem;
  color: var(--accent); cursor: pointer;
  transition: color .22s ease;
}
.bascule button[aria-selected="true"] { color: #fff; }
:root[data-theme="dark"] .bascule button[aria-selected="true"] { color: #14142A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bascule button[aria-selected="true"] { color: #14142A; }
}

/* --- 10. Liste de traits ----------------------------------------------- */
.traits { display: grid; gap: var(--t5); margin-top: var(--t5); list-style: none; padding: 0; }
@media (min-width: 52rem) { .traits { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--t6); } }

.trait { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: var(--t3); margin: 0; }
.trait .icone {
  width: 2.2rem; height: 2.2rem;
  color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.trait h3 { margin-bottom: var(--t2); }
.trait p { margin-bottom: var(--t3); }

/* --- 11. Vitrines ------------------------------------------------------ */
/* Un écran pleine largeur par section écrasait la page. Ici l'écran occupe un
   peu plus de la moitié, le texte l'autre, et les deux alternent de côté. */
.vitrine {
  display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: center;
}
.vitrine + .vitrine { margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.vitrine > * { min-width: 0; }
@media (min-width: 58rem) {
  .vitrine { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .vitrine:nth-of-type(even) .portable { order: 2; }
}
.vitrine-texte h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }
.vitrine-texte p { margin-top: var(--t4); }
.vitrine-texte .lien-fleche { margin-top: var(--t4); }
/* « En savoir plus » : un bouton à côté de la capture, qui déplie quatre
   encarts sur place — deux et deux, jamais trois et un. */
.en-savoir-plus { margin-top: var(--t4); }
.en-savoir-plus > summary { list-style: none; display: inline-flex; cursor: pointer; }
.en-savoir-plus > summary::-webkit-details-marker { display: none; }
.en-savoir-plus > summary::after {
  content: ""; width: .75rem; height: .75rem; margin-left: .6rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.15rem) rotate(45deg);
  transition: transform .2s ease;
}
.en-savoir-plus[open] > summary::after { transform: translateY(.15rem) rotate(-135deg); }
.infos-encarts {
  display: grid; gap: var(--t3); margin-top: var(--t4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 36rem) { .infos-encarts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.info-encart {
  min-width: 0;
  padding: var(--t4);
  border: 1px solid var(--filet); border-radius: var(--r2);
  background: var(--carte);
}
.info-encart h3 { font-size: 1.02rem; margin: 0 0 var(--t2); }
.info-encart ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.info-encart li { color: var(--encre-douce); line-height: 1.5; }
.info-encart strong { color: var(--encre); }
/* Les faits à côté d'une capture : trois lignes courtes, chacune avec sa coche,
   à la place du lien qui menait dans l'application. « faits-vitrine » et pas
   « faits » : .faits existe déjà plus bas, pour les chiffres des fiches de
   métier, et cette règle les aurait déréglés. */
.faits-vitrine { list-style: none; padding: 0; margin: var(--t4) 0 0; display: grid; gap: .65rem; }
/* La coche, puis UN bloc de texte : sans l'enveloppe, le texte qui suit un
   mot en gras devenait une case à lui seul et tombait dans la colonne de la
   coche, un mot par ligne. */
.faits-vitrine li {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .6rem; align-items: start;
  color: var(--encre-douce); line-height: 1.5;
}
.faits-vitrine li::before {
  content: ""; width: 1.4rem; height: 1.4rem; margin-top: .05rem;
  border-radius: 50%;
  background: var(--accent-clair)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A2BE8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E")
    center / .85rem no-repeat;
}
.faits-vitrine strong { color: var(--encre); }

/* --- 12. Simulateur ---------------------------------------------------- */
.simulateur { display: grid; gap: var(--t4); margin-top: var(--t5); }
@media (min-width: 64rem) {
  .simulateur { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); align-items: start; }
  .reglages { position: sticky; top: 6rem; }
}

.reglages { display: grid; gap: var(--t3); }

/* --- Réglages : un formulaire qui a de la place ------------------------------
   Le simulateur de l'accueil garde sa colonne étroite : on y choisit une chose.
   Dans Réglages on remplit une fiche entière, et 21 rem coupaient le code APE
   au milieu d'un mot (« Travaux de démolitic ») et enfermaient les cases à
   cocher dans une boîte qui défile. Le formulaire prend donc la moitié de la
   largeur, ses champs courts vont deux par deux, et tout se lit sans faire
   défiler quoi que ce soit à l'intérieur. */
@media (min-width: 64rem) {
  .simulateur-reglages { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .simulateur-reglages .reglages { position: static; }
}
@media (min-width: 40rem) {
  .reglages-entreprise { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .reglages-entreprise > .reglage-large { grid-column: 1 / -1; }
}
/* Deux classes : la règle « .cases » vient plus bas dans le fichier, et à
   force égale c'est elle qui l'emportait — la liste restait coupée. */
.cases.cases-ouvertes { max-height: none; overflow: visible; mask-image: none; }
@media (min-width: 40rem) {
  .cases.cases-ouvertes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--t4); }
  .cases.cases-ouvertes > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.reglage {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r3);
  padding: var(--t3) var(--t4);
  box-shadow: var(--ombre-1);
}
.reglage label { display: block; margin-bottom: .1rem; }
.reglage select, .reglage input {
  width: 100%;
  border: 0; padding: 0;
  background: transparent;
  color: var(--encre);
  font: inherit; font-size: 1.22rem; font-weight: 600; letter-spacing: -.02em;
}
.reglage select {
  appearance: none;
  padding-right: 1.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A2BE8' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: 1.1rem;
  cursor: pointer;
}
.reglage select:focus-visible, .reglage input:focus-visible { outline-offset: 6px; }

.cases {
  display: grid; gap: .1rem;
  max-height: 24rem; overflow-y: auto;
  overscroll-behavior: contain;
  /* Un dégradé en bas dit qu'il reste des questions sous le pli. */
  mask-image: linear-gradient(180deg, #000 calc(100% - 2rem), transparent);
}
@media (prefers-reduced-motion: reduce) { .cases { mask-image: none; } }
.case {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: .7rem; align-items: start;
  padding: .55rem 0;
  cursor: pointer;
}
.case input {
  width: 1.25rem; height: 1.25rem; margin: .18rem 0 0;
  accent-color: var(--accent); cursor: pointer;
}
.case .intitule { display: block; color: var(--encre); font-weight: 600; font-size: .98rem; line-height: 1.4; }
.case .aide { display: block; font-size: .95rem; color: var(--encre-tenue); }

.resultat {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r4);
  padding: clamp(1.25rem, .7rem + 2vw, 2.25rem);
  box-shadow: var(--ombre-1);
  min-width: 0;
}
.resultat > h3 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem); }
.resultat .filet { height: 1px; background: var(--filet); border: 0; margin: var(--t4) 0; }

.coup-d-oeil { display: grid; gap: .5rem; margin-top: var(--t4); list-style: none; padding: 0; }
.coup-d-oeil li {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--t3);
  align-items: center; margin: 0;
  padding: .8rem 1rem;
  background: var(--carte-pale);
  border-radius: var(--r2);
}
.coup-d-oeil .pastille {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--rp);
  background: var(--accent-clair); color: var(--accent);
  font-weight: 700;
}
.coup-d-oeil .pastille svg {
  width: 1.2rem; height: 1.2rem;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.coup-d-oeil .pastille.verte { background: var(--vert-fond); color: var(--vert); }
.coup-d-oeil .pastille.ambre { background: var(--ambre-fond); color: var(--ambre); }
.coup-d-oeil .valeur { display: block; color: var(--encre); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }

.rythmes { display: grid; gap: var(--t2); margin-top: var(--t4); list-style: none; padding: 0; }
.rythmes li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem var(--t3);
  margin: 0; padding: .65rem 0;
  border-top: 1px solid var(--filet);
}
.rythmes li:first-child { border-top: 0; }
.rythmes .nom { color: var(--encre); font-weight: 600; margin-right: auto; }
.rythmes .mots {
  flex-basis: 100%; order: 3;
  font-size: .88rem; color: var(--encre-tenue);
  overflow-wrap: anywhere;
}
.rythmes .reste { color: var(--filet-controle); font-style: italic; }
.rythmes .compte {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--accent); font-weight: 700;
}

.jauge { display: flex; gap: 3px; margin-top: var(--t4); }
.jauge span {
  height: .55rem; flex: 1 1 0; min-width: 0;
  border-radius: var(--rp);
  background: var(--filet);
  transform-origin: bottom;
  transition: background-color .3s ease;
}
.jauge span.pleine { background: var(--accent); }

.note-source { margin-top: var(--t4); font-size: .97rem; color: var(--encre-tenue); }

/* --- 12 bis. L'aperçu du courriel --------------------------------------- */
.apercu-courriel {
  border: 1px solid var(--filet);
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--papier);
}
.courriel-tete {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .3rem var(--t3);
  padding: var(--t3) var(--t4);
  background: var(--carte-pale);
  border-bottom: 1px solid var(--filet);
  font-size: .92rem;
}
.courriel-tete .etiq { align-self: center; }
.courriel-tete > span:nth-child(even) { overflow-wrap: anywhere; color: var(--encre); }
.courriel-corps { padding: var(--t4); font-size: .95rem; }
.courriel-corps p { margin-bottom: var(--t3); }
.courriel-textes { list-style: none; padding: 0; margin: 0 0 var(--t3); display: grid; gap: var(--t3); }
.courriel-textes li {
  margin: 0; padding: var(--t3);
  border-left: 3px solid var(--accent);
  background: var(--carte-pale);
  border-radius: 0 var(--r1) var(--r1) 0;
}
.courriel-textes strong { display: block; color: var(--encre); }
.courriel-textes span { display: block; margin-top: .2rem; font-size: .9rem; }
.courriel-pj { color: var(--encre-tenue); font-size: .9rem; }
.courriel-pied {
  margin: 0; padding: var(--t3) var(--t4);
  border-top: 1px solid var(--filet);
  background: var(--carte-pale);
  font-size: .85rem; color: var(--encre-tenue);
}

/* --- 13. Puces de secteur ---------------------------------------------- */
.panneau-puces {
  margin-top: var(--t5);
  padding: clamp(1rem, .6rem + 1.6vw, 1.75rem);
  background: var(--papier-pale);
  border: 1px solid var(--filet);
  border-radius: var(--r4);
}
/* Des listes de longueur variable — 4, 7, 13, 59 codes : aucun nombre de
   colonnes ne les tombe toutes juste. Elles passent donc en rangées souples
   dont la dernière s'étire jusqu'au bout : la ligne est toujours finie. */
.puces {
  display: flex; flex-wrap: wrap; gap: .6rem;
  list-style: none; padding: 0; margin: 0;
}
.puces li { margin: 0; min-width: min(100%, 15rem); flex: 1 1 15rem; display: flex; }
/* Une case par puce, et toutes celles d'une ligne à la même hauteur. */
.puces li > a, .puces li > .puce-fixe { flex: 1; min-width: 0; }
/* Les douze métiers de l'accueil, eux, ont un nombre fixe : une vraie grille,
   dont chaque palier divise douze — six, quatre, trois, deux, un. */
.panneau-puces .puces { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 30rem) { .panneau-puces .puces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 46rem) { .panneau-puces .puces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .panneau-puces .puces { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 96rem) { .panneau-puces .puces { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Sur l'accueil, la puce n'ouvre pas la fiche du métier — l'application ne
   s'ouvre que par la connexion — mais elle choisit ce métier dans l'outil
   « Ce qui s'applique chez vous », juste au-dessus. C'est un bouton. */
.puces a, .puces .puce-fixe {
  display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: .7rem;
  align-items: center;
  padding: .8rem 1rem;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r2);
  color: var(--encre); font-weight: 600; font-size: .98rem;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.puces .puce-fixe { width: 100%; font: inherit; font-weight: 600; font-size: .98rem; text-align: left; cursor: pointer; }
.puces a:hover, .puces .puce-fixe:hover {
  border-color: var(--accent); color: var(--encre);
  transform: translateY(-2px); box-shadow: var(--ombre-1);
}
.puces .code {
  display: grid; place-items: center;
  width: 2.3rem; height: 2.3rem;
  border-radius: var(--rp);
  background: var(--degrade-puce);
  color: var(--encre);
  font-family: var(--mono); font-size: .88rem; font-weight: 700;
}
.puces .puce-fixe { height: 100%; }
/* Les libellés NAF vont de deux mots à douze : sans cette coupe, une rangée
   sur deux fait le triple de hauteur de l'autre. Le libellé entier est dans
   l'attribut title. */
.puces .nom {
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.panneau-puces .puces { grid-auto-rows: 1fr; }

/* --- 14. Raisons numérotées -------------------------------------------- */
.raisons { display: grid; gap: var(--t4); margin-top: var(--t5); list-style: none; padding: 0; }
/* Quatre raisons : quatre de front, ou deux et deux — jamais trois et une seule
   en dessous. */
@media (min-width: 40rem) {
  .raisons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raisons > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* En grand, autant de colonnes que de raisons — trois ou quatre selon la page :
   une seule ligne, pleine, jamais une colonne vide au bout. */
@media (min-width: 64rem) {
  .raisons { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .raisons > :last-child:nth-child(odd) { grid-column: auto; }
}
.raison {
  margin: 0;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r4);
  padding: clamp(1.25rem, .8rem + 1.6vw, 2rem);
  box-shadow: var(--ombre-1);
}
.raison .numero {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--r2);
  background: var(--degrade-puce);
  color: var(--encre);
  font-size: 1.3rem; font-weight: 700;
  margin-bottom: var(--t4);
}
.raison h3 { margin-bottom: var(--t3); }

/* --- 15. Bande de sources ---------------------------------------------- */
.sources-bande {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: var(--t5); padding: 0; list-style: none;
  justify-content: center;
}
.sources-bande li { margin: 0; }
/* Sous un intitulé aligné à gauche, la bande ne peut pas se centrer : ses
   liens s'étirent donc pour finir chaque ligne. */
.sources-bande-gauche { justify-content: flex-start; max-width: 60rem; }
.sources-bande-gauche li { flex: 1 1 auto; }
.sources-bande-gauche a { width: 100%; justify-content: center; }
.sources-bande a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--filet);
  border-radius: var(--rp);
  background: var(--carte);
  color: var(--encre); font-weight: 600; font-size: .95rem;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.sources-bande a:hover { border-color: var(--accent); color: var(--encre); transform: translateY(-2px); }
.sources-bande svg { width: .85rem; height: .85rem; color: var(--filet-controle); }

/* --- 16. Bande finale -------------------------------------------------- */
.bande-finale {
  background: var(--degrade-heros);
  padding-block: clamp(3.5rem, 2rem + 6vw, var(--t7));
}
.bande-finale .marque { margin: 0 0 var(--t5); font-size: 1.35rem; }
.bande-finale h2 { max-width: 18ch; font-size: clamp(2rem, 1.1rem + 4vw, 3.6rem); }
.bande-finale .mentions {
  max-width: 62ch; margin-top: var(--t4);
  font-size: .98rem;
}
.bande-finale .rangee { margin-top: var(--t5); }

/* --- 16 bis. Installer l'application ------------------------------------ */
.installation { background: var(--papier-tein); border-top: 1px solid var(--filet); }
.installation h2 { font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.4rem); }
.installation .intro { margin-top: var(--t4); max-width: 46ch; }

.appareils { display: grid; gap: var(--t3); margin: 0; padding: 0; list-style: none; }
.appareil {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--t3);
  align-items: start; margin: 0;
  padding: var(--t3) var(--t4);
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r2);
}
.appareil svg { width: 2.6rem; height: 2.6rem; color: var(--accent); }
.appareil h3 { font-size: 1.02rem; margin-bottom: .15rem; }
.appareil p { margin: 0; font-size: .94rem; }

/* --- 17. Réserve ------------------------------------------------------- */
.reserve {
  padding: var(--t4);
  background: var(--ambre-fond);
  border-radius: var(--r3);
  color: var(--encre);
  font-size: .98rem;
}
.reserve strong { display: block; margin-bottom: var(--t2); }
.reserve a { color: var(--ambre); }

/* --- 18. Pied ---------------------------------------------------------- */
.pied {
  background: var(--papier);
  border-top: 1px solid var(--filet);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--t5);
}
.pied-grille {
  display: grid; gap: var(--t5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) { .pied-grille { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--t4); } }
.pied h2 { font-size: 1.1rem; letter-spacing: -.01em; margin-bottom: var(--t3); }
.pied ul { list-style: none; padding: 0; margin: var(--t3) 0 0; }
.pied li { margin-bottom: .55rem; }
.pied a { color: var(--encre-douce); text-decoration: none; }
.pied a:hover { color: var(--accent); text-decoration: underline; }
.pied .marque { margin-bottom: var(--t3); }

.pied-bas {
  margin-top: var(--t5); padding-top: var(--t4);
  border-top: 1px solid var(--filet);
  display: grid; gap: var(--t3);
  font-size: .9rem; color: var(--encre-tenue);
}
.pied-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
/* Le pied court (page de connexion) : les liens légaux, rien d'autre. */
.pied-court { padding-block: var(--t4); }
.pied-court .pied-bas { margin-top: 0; padding-top: 0; border-top: 0; }
.pied-legal a { text-decoration: underline; text-underline-offset: .2em; }

/* ==========================================================================
   L'application
   ========================================================================== */
.bandeau-demo {
  margin: 0;
  padding: var(--t3) clamp(1rem, .4rem + 2.4vw, 2.5rem);
  background: var(--accent-clair);
  color: var(--encre);
  font-size: .93rem;
  border-bottom: 1px solid var(--accent-filet);
}
.bandeau-demo strong { margin-right: .3rem; }

.verrou {
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
  background: var(--degrade-heros);
  text-align: center;
}
.verrou .enveloppe { max-width: 48rem; }
.verrou h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.2rem); }
.verrou .chapeau { margin-top: var(--t4); }
body.verrouille main > *:not(#verrou) { display: none; }

.tete-app { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--t4); }
.tete-app h1 { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3rem); }
.tete-app .chapeau { margin-top: var(--t4); max-width: 62ch; }

/* Les étiquettes sous le titre : sur une ligne quand elles tiennent ; sinon
   deux par deux, et la dernière, si elle est seule, prend la ligne — plus
   d'étiquette perdue sous les autres. */
.jalons {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
  list-style: none; padding: 0; margin: 0 0 var(--t4);
}
.jalons > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.jalons li > * { display: block; text-align: center; }
@media (min-width: 52rem) {
  .jalons { display: flex; flex-wrap: wrap; }
  .jalons li > * { display: inline-block; }
}
.jalons li { margin: 0; }
/* Seulement l'étiquette elle-même : « .jalons span » habillait aussi les
   chiffres glissés dedans (NAF 43.99C, 14 salariés) — une bulle dans la
   bulle. */
.jalons li > span, .jalons li > a {
  display: inline-block;
  padding: .3rem .75rem;
  border: 1px solid var(--filet);
  border-radius: var(--rp);
  background: var(--carte);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .02em;
  color: var(--encre-douce); text-decoration: none;
}
.jalons a {
  color: var(--accent); border-color: var(--accent-filet);
  transition: border-color .16s ease, background-color .16s ease;
}
.jalons a:hover { background: var(--accent-clair); border-color: var(--accent); }
.jalons .fort { background: var(--accent); border-color: var(--accent); color: #fff; }
.jalons a.fort:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
/* Une étiquette qui ne mène nulle part n'a pas l'air d'un bouton : du texte,
   sans bulle. */
.jalons li > span { border-color: transparent; background: transparent; padding-inline: .1rem; }
.jalons li > span.fort { background: transparent; border-color: transparent; color: var(--accent); }
.jalons li + li > span::before { content: "· "; color: var(--filet-controle); }
:root[data-theme="dark"] .jalons .fort { color: #14142A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .jalons .fort { color: #14142A; }
}
:root[data-theme="dark"] .jalons li > span.fort { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .jalons li > span.fort { color: var(--accent); }
}

.rubrique { padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); }
.rubrique > .enveloppe > h2 { margin-bottom: var(--t4); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }

/* Les chiffres d'un écran : jamais une ligne de quatre et un cinquième seul.
   Tous de front dès qu'il y a la place (cinq au plus, sur tout le site) ;
   en dessous, deux par deux, et le dernier, s'il est seul, prend la ligne. */
.compteurs, .faits {
  display: grid; gap: var(--t3); margin: 0;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 30rem) {
  .compteurs, .faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compteurs > :last-child:nth-child(odd), .faits > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .compteurs, .faits { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .compteurs > :last-child:nth-child(odd), .faits > :last-child:nth-child(odd) { grid-column: auto; }
}
.compteurs > div, .faits > div {
  min-width: 0;
  padding: var(--t4);
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r3);
  box-shadow: var(--ombre-1);
}
.compteurs-liens > div { position: relative; }
.lien-carte {
  position: absolute; inset: 0;
  border-radius: inherit;
  transition: background-color .18s ease;
}
.lien-carte:hover { background: color-mix(in srgb, var(--encre) 6%, transparent); }
.compteurs-liens .grand { color: var(--encre); }

.compteurs dt, .faits dt { margin-bottom: var(--t2); }
.compteurs dd, .faits dd { margin: 0; color: var(--encre); overflow-wrap: anywhere; }
.compteurs .grand, .faits .grand {
  display: block;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem);
  font-weight: 700; letter-spacing: -.035em; line-height: 1.1;
}
.compteurs .alerte { border-color: var(--ambre); background: var(--ambre-fond); }
.compteurs .alerte .grand { color: var(--ambre); }
.compteurs .precision { display: block; font-size: .97rem; color: var(--encre-tenue); }

.liste-echeances, .liste-releve, .liste-registre { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.liste-echeances li, .ligne-releve, .ligne-registre, .ligne-historique {
  margin: 0; min-width: 0;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r2);
  padding: var(--t3) var(--t4);
}
.liste-echeances li { padding: 0; }
.liste-echeances a {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--t3);
  padding: var(--t3) var(--t4);
  border-radius: var(--r2);
  color: var(--encre-douce); text-decoration: none;
  transition: background-color .18s ease;
}
.liste-echeances a:hover { background: var(--carte-pale); color: var(--encre); }
.liste-echeances .etiq { margin-right: auto; }
.liste-echeances svg { width: 1rem; height: 1rem; color: var(--filet-controle); }
.liste-echeances .retard, .liste-echeances li.retard { border-color: var(--ambre); background: var(--ambre-fond); }

.ligne-releve, .ligne-registre, .ligne-historique { padding: 0; }
.ligne-releve summary, .ligne-registre summary {
  display: grid; gap: .3rem var(--t4);
  grid-template-columns: minmax(0, 1fr) 1.5rem;
  padding: var(--t3) var(--t4);
  cursor: pointer;
  border-radius: var(--r2);
  list-style: none;
}
.ligne-releve summary::-webkit-details-marker,
.ligne-registre summary::-webkit-details-marker { display: none; }
.ligne-releve summary:hover, .ligne-registre summary:hover { background: var(--carte-pale); }
.ligne-releve summary:focus-visible, .ligne-registre summary:focus-visible { outline-offset: -2px; }

@media (min-width: 46rem) {
  .ligne-releve summary { grid-template-columns: 7.5rem minmax(0, 1fr) 8rem 1.5rem; align-items: start; }
  .ligne-registre summary { grid-template-columns: 7.5rem minmax(0, 1fr) 1.5rem; align-items: start; }
}

/* Sur petit écran la grille n'a que deux colonnes : la date, le corps et la
   pastille d'état se mettent les uns sous les autres, sur toute la largeur.
   Sans cette règle, le corps tombait dans la colonne de 1,5 rem réservée au
   chevron et le titre s'écrivait une lettre par ligne — des fiches hautes de
   huit écrans. */
@media (max-width: 45.999rem) {
  .ligne-releve summary > *:not(.chevron),
  .ligne-registre summary > *:not(.chevron) { grid-column: 1; }
  .ligne-releve summary > .chevron,
  .ligne-registre summary > .chevron { grid-column: 2; grid-row: 1; }

  /* Un titre de Journal officiel fait parfois quatre cents signes : sur un
     téléphone, une fiche fermée mangeait l'écran entier et on n'en voyait
     qu'une à la fois. Fermée, elle montre le début ; ouverte, tout. */
  .ligne-releve details:not([open]) .titre,
  .ligne-registre details:not([open]) .titre,
  .ligne-releve details:not([open]) .quoi,
  .ligne-registre details:not([open]) .quoi {
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  }
  .ligne-releve details:not([open]) .titre,
  .ligne-registre details:not([open]) .titre { -webkit-line-clamp: 4; line-clamp: 4; }
  .ligne-releve details:not([open]) .quoi,
  .ligne-registre details:not([open]) .quoi { -webkit-line-clamp: 2; line-clamp: 2; }
}

.chevron {
  width: 1.1rem; height: 1.1rem; justify-self: end; align-self: start;
  margin-top: .2rem; color: var(--filet-controle);
  transition: transform .22s ease;
}
details[open] > summary .chevron { transform: rotate(180deg); }

/* Le contenu d'un <details> sort du rendu dès que `open` tombe : on ne peut pas
   animer sa hauteur sans script, et on s'en passe. */
.ligne-releve .detail, .ligne-registre .detail {
  padding: 0 var(--t4) var(--t4);
  border-top: 1px solid var(--filet);
  margin-top: var(--t2);
  padding-top: var(--t4);
}
/* Le texte officiel, tel qu'il est publié : monospace mesurée, interligne
   confortable, et une hauteur bornée pour qu'un décret de quarante pages ne
   pousse pas le reste de la page hors de l'écran. */
.texte-officiel {
  margin-top: var(--t3);
  padding: var(--t4);
  max-height: 32rem; overflow-y: auto;
  background: var(--carte-pale);
  border: 1px solid var(--filet);
  border-radius: var(--r2);
  font-size: .95rem; line-height: 1.7;
  white-space: normal; overflow-wrap: anywhere;
}

/* --- Les cases d'une fiche ouverte -------------------------------------------
   Une fiche ouverte empilait tout à la suite : ce qu'il faut faire, le texte,
   la source, le bouton — et rien ne séparait l'un de l'autre. Chaque chose a
   maintenant sa case, avec son titre : on ne confond plus « ce que je dois
   faire » avec « ce que dit le texte ». Sur grand écran, ce qu'il faut faire
   est à gauche, le texte à droite ; sur téléphone, l'un sous l'autre, dans
   le même ordre — l'action d'abord. */
.encarts-fiche {
  display: grid; gap: var(--t4); margin-top: var(--t4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .encarts-fiche { grid-template-columns: minmax(18rem, 2fr) minmax(0, 3fr); align-items: stretch; }
  .encarts-fiche > .encart-large { grid-column: 1 / -1; }
}
.encart {
  min-width: 0;
  padding: var(--t4);
  border: 1px solid var(--filet);
  border-radius: var(--r2);
  background: var(--carte);
}
.encart-titre {
  display: flex; align-items: center; gap: .55rem;
  margin: 0 0 var(--t3);
  font-size: 1.02rem; font-weight: 700; line-height: 1.3;
  color: var(--encre);
}
.encart-titre .numero-encart {
  display: inline-grid; place-items: center;
  width: 1.55rem; height: 1.55rem; flex: none;
  border-radius: 50%;
  font-size: .82rem; font-weight: 700;
  background: var(--accent); color: #fff;
}
/* La case de l'action se voit la première. */
.encart-faire { background: var(--accent-clair); border-color: var(--accent-filet); }
.encart-faire .a-faire { margin-top: 0; }
.encart-faire .a-faire li { margin-bottom: .45rem; }
.encart-faire .rangee { margin-top: var(--t4); }
/* La source : en retrait, c'est une référence, pas une consigne. */
.encart-source { background: var(--papier-pale); }
/* Le conseil de l'IA : à part, et qui le dit — jamais confondu avec le texte officiel. */
.encart-ia { border-style: dashed; }
.encart-ia .texte-ia p { margin: 0 0 var(--t2); }
.sources-ia { margin: var(--t2) 0 var(--t3); padding-left: 1.2rem; display: grid; gap: .3rem; font-size: .92rem; }
.sources-ia a { overflow-wrap: anywhere; }
.encart-source p { margin: 0; font-size: .92rem; color: var(--encre-douce); }
/* Dans son encart, le texte officiel n'a plus besoin de sa propre boîte. */
.encart .texte-officiel {
  margin-top: 0; padding: 0;
  background: none; border: 0; border-radius: 0;
  max-height: 34rem;
  max-width: 88ch;
}
.encart ul { margin-bottom: 0; }

.detail-grille { display: grid; gap: var(--t4); margin-top: var(--t4); }
@media (min-width: 52rem) { .detail-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.detail-grille > div { min-width: 0; }
.detail-grille ul { margin: var(--t2) 0 0; padding-left: 1.1rem; font-size: .96rem; }
.detail-grille li { overflow-wrap: anywhere; }
.detail-grille svg { width: .8rem; height: .8rem; color: var(--filet-controle); }

.detail-champs {
  display: grid; gap: var(--t3); margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}
.detail-champs > div { min-width: 0; }
.detail-champs dd { margin: .15rem 0 0; color: var(--encre); font-weight: 600; }
/* Un élément de grille garde min-width: auto, donc sa largeur de contenu : la
   colonne a beau valoir minmax(0, 1fr), l'élément, lui, refuse de rétrécir.
   C'est ce qui faisait déborder le relevé de 57 px à 320 px. */
.ligne-releve summary > *, .ligne-registre summary > * { min-width: 0; }
.ligne-releve .titre, .ligne-releve .quoi, .ligne-releve .meta,
.ligne-registre .titre, .ligne-registre .quoi, .ligne-registre .meta { overflow-wrap: anywhere; }

.ligne-releve .date, .ligne-registre .date, .ligne-historique .date { color: var(--encre-tenue); font-size: .88rem; padding-top: .15rem; }
.ligne-releve .titre, .ligne-registre .titre, .ligne-historique .titre { display: block; color: var(--encre); font-weight: 600; }
.ligne-releve .quoi, .ligne-registre .quoi { display: block; margin-top: .15rem; }
.ligne-releve .meta, .ligne-registre .meta, .ligne-historique .meta { margin-top: .35rem; text-transform: none; letter-spacing: 0; font-weight: 500; }
.ligne-releve .statut {
  justify-self: start; align-self: start;
  padding: .25rem .7rem; border-radius: var(--rp);
  background: var(--carte-pale); border: 1px solid var(--filet);
  text-transform: none; letter-spacing: 0; font-size: .82rem;
  color: var(--encre-douce);
}
.statut-attente .statut { background: var(--ambre-fond); border-color: var(--ambre); color: var(--ambre); }
.statut-ouvert .statut { background: var(--accent-clair); border-color: var(--accent-filet); color: var(--accent); }
.statut-clos .statut { background: var(--vert-fond); border-color: var(--vert); color: var(--vert); }
.ligne-registre.clos { opacity: .72; }

.marque-ajout {
  display: inline-block;
  padding: .15rem .6rem; border-radius: var(--rp);
  background: var(--accent-clair); color: var(--accent);
  font-size: .78rem; font-weight: 700; letter-spacing: .03em;
}

.bloc-domaine {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r3);
  padding: clamp(1rem, .7rem + 1.2vw, 1.75rem);
  margin-top: var(--t3);
  min-width: 0;
}
.bloc-domaine-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem var(--t3); }
.bloc-domaine-resume { margin-top: var(--t2); }
.bloc-domaine-corps {
  display: grid; gap: var(--t4);
  margin-top: var(--t4); padding-top: var(--t4);
  border-top: 1px solid var(--filet);
}
@media (min-width: 52rem) { .bloc-domaine-corps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bloc-domaine-corps > div { min-width: 0; }
.bloc-domaine-corps ul { margin: var(--t2) 0 0; padding-left: 1.1rem; font-size: .98rem; }
.bloc-domaine-corps li { overflow-wrap: anywhere; }

/* La liste à plat des textes du secteur : ce qu'on vient chercher, visible
   sans déplier ni sortir du site. */
.textes { list-style: none; padding: 0; margin: var(--t4) 0 0; display: grid; gap: 1px;
  background: var(--filet); border: 1px solid var(--filet); border-radius: var(--r2); overflow: hidden; }
.textes li {
  display: grid; gap: .25rem var(--t4); margin: 0;
  grid-template-columns: minmax(0, 1fr);
  padding: .7rem var(--t4);
  background: var(--carte);
}
@media (min-width: 52rem) {
  .textes li { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.3fr) auto; align-items: baseline; }
}
.textes li:hover { background: var(--carte-pale); }
.textes .ref { color: var(--encre); font-weight: 600; overflow-wrap: anywhere; }
/* `.ou` était déjà pris par le séparateur de l'écran de connexion — en grille,
   en capitales, avec deux filets en pseudo-éléments. Les lignes de texte en
   héritaient. D'où `.rattache`. */
.textes .rattache { font-size: .97rem; overflow-wrap: anywhere; }
.textes .rattache a { color: var(--encre-tenue); text-decoration: none; }
.textes .rattache a:hover { color: var(--accent); text-decoration: underline; }
.textes .source { font-size: .95rem; white-space: nowrap; }
.textes .source svg { width: .75rem; height: .75rem; }

/* Ce qu'un texte exige : la liste qu'on vient lire. */
.exigences { margin: var(--t4) 0 0; padding-left: 0; list-style: none; display: grid; gap: var(--t3); max-width: 70ch; }
.exigences li {
  margin: 0; padding: var(--t3) var(--t4) var(--t3) calc(var(--t4) + 1.1rem);
  background: var(--carte);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r2) var(--r2) 0;
  position: relative;
}
.exigences li::before {
  content: counter(list-item);
  position: absolute; left: var(--t4); top: var(--t3);
  color: var(--accent); font-family: var(--mono); font-size: .8rem; font-weight: 700;
}
.exigences { counter-reset: list-item; }
.exigences li { counter-increment: list-item; }

.textes .ref a { color: var(--encre); text-decoration: none; }
.textes .ref a:hover { color: var(--accent); text-decoration: underline; }

.groupe-frequence { margin-top: var(--t5); }
.groupe-frequence > .tete { margin-bottom: var(--t3); }
.groupe-frequence > .tete .etiq { margin-top: var(--t2); text-transform: none; letter-spacing: 0; font-weight: 400; }

.questions { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; }
.questions li { margin: 0; }
.question {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: .7rem; align-items: start;
  padding: .6rem 0; cursor: pointer;
}
.question input { width: 1.25rem; height: 1.25rem; margin: .18rem 0 0; accent-color: var(--accent); cursor: pointer; }
.question .intitule { display: block; color: var(--encre); font-weight: 600; }
.question .aide { display: block; font-size: .92rem; color: var(--encre-tenue); }

.pieges { display: grid; gap: var(--t3); }
@media (min-width: 52rem) {
  .pieges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Un nombre impair : le dernier piège prend toute la ligne, pour qu'elle
     soit finie. */
  .pieges > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.piege {
  min-width: 0;
  padding: var(--t4);
  background: var(--carte);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--ambre);
  border-radius: var(--r2);
}
.piege h3 { font-size: 1.08rem; margin-bottom: var(--t2); }

.recherche { max-width: 34rem; }
.recherche input {
  width: 100%;
  margin-top: var(--t2);
  padding: .9rem 1.25rem;
  background: var(--carte);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rp);
  color: var(--encre); font: inherit; font-size: 1.05rem;
}
.recherche input::placeholder { color: var(--filet-controle); }
.recherche input:focus-visible { border-color: var(--accent); outline-offset: 2px; }
.recherche-compte { margin-top: var(--t2); text-transform: none; letter-spacing: 0; font-weight: 500; }

/* --- L'index des secteurs ----------------------------------------------- */
.grappe + .grappe { margin-top: var(--t5); }
.grappe > h2 {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: var(--t4);
  font-size: .8rem;
}
.grappe .lettre {
  display: grid; place-items: center;
  width: 1.65rem; height: 1.65rem; flex: none;
  border-radius: var(--rp);
  background: var(--degrade-puce);
  color: var(--encre); font-family: var(--mono); font-size: .8rem; font-weight: 700;
}

.etat-vide { padding: var(--t5); text-align: center; border: 1px dashed var(--filet-fort); border-radius: var(--r3); }

/* --- Formules ----------------------------------------------------------- */
.formules { display: grid; gap: var(--t4); margin-top: var(--t5); }
/* `align-items: start` laisserait trois cartes de hauteurs différentes, et
   `margin-bottom: auto` sur le texte ne pourrait plus aligner les boutons. */
/* Trois de front à partir de 1 200 px : plus étroit, le nom de l'offre 02
   ne tiendrait plus sur une ligne (3 novembre 2026). */
@media (min-width: 75rem) { .formules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.formule {
  min-width: 0;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r4);
  padding: clamp(1.25rem, .8rem + 1.6vw, 2rem);
  box-shadow: var(--ombre-1);
  display: flex; flex-direction: column; gap: var(--t3);
}
/* Ce que la formule donne, en liste ; la marge du bas aligne les boutons. */
.formule-donne {
  margin: 0 0 auto; padding-left: 1.15rem;
  display: grid; gap: .5rem; color: var(--encre-douce); line-height: 1.5;
}
.formule-donne li:first-child { color: var(--encre); font-weight: 600; }
.formule.mise-en-avant { border-color: var(--accent); box-shadow: var(--ombre-2); }
/* La phrase qui dit à qui la formule s'adresse : elle vient avant le détail,
   parce que le client se reconnaît avant de comparer. */
.formule .pour {
  margin: 0 0 var(--t3);
  font-weight: 600; color: var(--encre);
}

.formule .prix { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.formule .prix .grand {
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 700; letter-spacing: -.035em; color: var(--encre);
}
.formule .bouton { margin-top: var(--t2); }
.formule .prix { margin-bottom: var(--t2); }

/* --- L'écran de connexion ------------------------------------------------ */
.connexion {
  display: grid; gap: var(--t4);
  max-width: 62rem; margin: var(--t5) auto 0;
  align-items: start;
}
@media (min-width: 62rem) {
  .connexion { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}
.connexion > * { min-width: 0; }

.carte-connexion {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r4);
  padding: clamp(1.25rem, .8rem + 1.8vw, 2.25rem);
  box-shadow: var(--ombre-1);
  text-align: left;
}
.carte-connexion h2 { font-size: 1.3rem; margin-bottom: var(--t4); }
.carte-connexion .reserve { font-size: .94rem; margin-bottom: var(--t4); }

.champ { margin-bottom: var(--t3); }
.champ label {
  display: block; margin-bottom: .35rem;
  font-size: .9rem; font-weight: 600; color: var(--encre);
}
.champ input {
  width: 100%;
  padding: .85rem 1.15rem;
  background: var(--papier);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r2);
  color: var(--encre); font: inherit; font-size: 1.02rem;
}
.champ input::placeholder { color: var(--filet-controle); }
.champ input:focus-visible { border-color: var(--accent); outline-offset: 2px; }

/* Le « ou » : un trait vertical sur grand écran, horizontal sur téléphone. */
.ou {
  display: grid; place-items: center; gap: var(--t3);
  color: var(--encre-tenue); font-size: .9rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}
.ou::before, .ou::after {
  content: ""; background: var(--filet);
  width: 100%; height: 1px;
}
@media (min-width: 62rem) {
  .ou { grid-template-rows: 1fr auto 1fr; align-self: stretch; padding-block: var(--t4); }
  .ou::before, .ou::after { width: 1px; height: 100%; }
}

.connexion-seule { max-width: 32rem; }
@media (min-width: 62rem) { .connexion-seule { grid-template-columns: minmax(0, 1fr); } }

.essai { max-width: 44rem; margin: var(--t5) auto 0; }

.choix-formules { display: grid; gap: .5rem; }
@media (min-width: 52rem) { .essai .choix-formules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choix-formule {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .75rem;
  align-items: start;
  padding: var(--t3) var(--t4);
  border: 1px solid var(--filet);
  border-radius: var(--r2);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.choix-formule:hover { border-color: var(--accent); }
.choix-formule input { width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--accent); }
.choix-formule:has(input:checked) { border-color: var(--accent); background: var(--accent-clair); }
.choix-formule .titre { display: block; color: var(--encre); font-weight: 700; }
.choix-formule .prix {
  display: block; font-family: var(--mono); font-size: .88rem; color: var(--accent); font-weight: 700;
}
.choix-formule .ouvre { display: block; margin-top: .2rem; font-size: .92rem; color: var(--encre-tenue); }

.prix-formule {
  font-family: var(--mono); font-weight: 700; color: var(--accent);
  margin-bottom: var(--t2) !important;
}

/* Un écran que la formule n'ouvre pas : marqué, pas retiré. */
.menu a.hors-formule { opacity: .55; }
.menu a.hors-formule::after {
  content: ""; display: inline-block;
  width: .7rem; height: .8rem; margin-left: .35rem;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: var(--cadenas) center / contain no-repeat;
  mask: var(--cadenas) center / contain no-repeat;
}
:root {
  --cadenas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='4' y='10.5' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E");
}

.deux-colonnes { display: grid; gap: var(--t5); }
@media (min-width: 58rem) { .deux-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.deux-colonnes > * { min-width: 0; }
.deux-colonnes { align-items: stretch; }
.deux-colonnes > .reserve { margin: 0; }

/* --- 18 bis. Les codes APE ----------------------------------------------- */
/* Un code APE fait six caractères (43.22B) : la pastille ronde des divisions
   ne lui suffit pas. Même grammaire, plus de place, et le code reste en
   chasse fixe parce que c'est un identifiant, pas un mot. */
.grappe-naf .puces a,
.codes-ape li {
  grid-template-columns: 4.9rem minmax(0, 1fr);
}
.grappe-naf .puces .code,
.codes-ape .code {
  width: auto; height: auto; min-height: 1.7rem;
  padding: .2rem .35rem;
  border-radius: var(--r1);
  font-size: .88rem; letter-spacing: -.02em;
}
/* Sur la fiche de secteur, les codes ne sont pas des liens : on y est déjà.
   Ils gardent la carte, sans l'effet de survol qui promettrait un clic. */
.codes-ape li {
  display: grid; gap: .7rem; align-items: center;
  padding: .8rem 1rem;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r2);
  color: var(--encre); font-weight: 600; font-size: .98rem;
}
.codes-ape li:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-clair); }
.codes-ape .nom {
  font-weight: 400; color: var(--encre-douce); overflow-wrap: anywhere;
  /* Sur la fiche, l'intitulé officiel est l'information : il ne se coupe pas. */
  display: block; -webkit-line-clamp: initial; overflow: visible;
}

/* L'en-tête d'une division dans l'index : la lettre, le nom cliquable, le
   compte. Il reste une étiquette, donc discret. */
/* Le nom de chaque secteur est un vrai titre, pas une petite étiquette en
   capitales : c'est lui que le client cherche des yeux en faisant défiler les
   88 secteurs. La classe « etiq » qu'il porte reste pour le code et le compte,
   pas pour le nom. */
.grappe-naf h3 {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
  margin-bottom: var(--t3);
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  text-transform: none; letter-spacing: -.015em;
  color: var(--encre); font-weight: 700;
}
.grappe-naf h3 .precision { font-size: .95rem; }
.grappe-naf h3 .lettre { font-size: .95rem; }
.grappe-naf h3 a { color: var(--encre); text-decoration: none; }
.grappe-naf h3 a:hover { color: var(--accent); text-decoration: underline; }
.grappe-naf h3 .precision { color: var(--encre-tenue); font-weight: 400; letter-spacing: .02em; }
.grappe-naf + .grappe-naf { margin-top: var(--t5); }

/* --- 18 ter. Les propositions de code APE -------------------------------- */
/* Le client écrit son métier, le site propose. Ce sont des boutons, pas des
   liens : ils remplissent le formulaire, ils ne mènent nulle part. */
.propositions { display: grid; gap: .4rem; margin-top: var(--t3); }
.proposition {
  display: block; width: 100%;
  padding: .6rem .85rem;
  background: var(--carte); border: 1px solid var(--filet); border-radius: var(--r1);
  color: var(--encre); font: inherit; font-size: .93rem; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.proposition:hover { border-color: var(--accent); background: var(--carte-pale); }
.proposition:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.propositions .etiq { margin-bottom: .1rem; }

/* --- 18 quater. Les catégories, d'abord seules ------------------------- */
/* Les pages Relevé, Textes et Secteurs s'ouvrent sur une carte par catégorie.
   Au clic, app.js n'affiche plus que la catégorie choisie (data-vue="une") :
   ni l'en-tête, ni les autres, ni les explications. Sans JavaScript, aucune
   de ces règles ne s'applique et tout se lit à la suite. */
.tableau-boite { margin-top: var(--t5); }

[data-vue="categories"] [data-categorie] { display: none !important; }
[data-vue="recherche"] [data-choix],
[data-vue="recherche"] [data-annexe] { display: none !important; }
.hors-vue { display: none !important; }

.retour-categories { padding-top: var(--t4); }
[data-vue="une"] main > .rubrique { padding-top: var(--t3); }
[data-vue="une"] [data-categorie] { margin-top: 0; }
[data-vue="une"] .famille-releve > h3,
[data-vue="une"] .famille-textes > h3,
[data-vue="une"] .categorie-naf > h2 {
  font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.4rem); letter-spacing: -.03em;
}

.choix-categories { margin: 0 0 var(--t5); }
/* Toujours des lignes pleines : une colonne au téléphone, deux à la tablette
   (la dernière s'étale si elles sont impaires), puis une grille de six où la
   dernière rangée se partage la largeur — build.mjs dit à chaque carte combien
   de sixièmes elle prend. */
.cartes-categories {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--t3); grid-template-columns: minmax(0, 1fr);
}
.cartes-categories > li { display: flex; min-width: 0; }
@media (min-width: 36rem) and (max-width: 63.99rem) {
  .cartes-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartes-categories > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .cartes-categories { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cartes-categories > li { grid-column: span 2; }
  .cartes-categories > li[data-large="3"] { grid-column: span 3; }
  .cartes-categories > li[data-large="6"] { grid-column: 1 / -1; }
}

.carte-categorie {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .45rem;
  padding: var(--t4);
  background: var(--carte); color: var(--encre-douce);
  border: 1px solid var(--filet); border-radius: var(--r2);
  box-shadow: var(--ombre-1);
  text-decoration: none; line-height: 1.5;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
a.carte-categorie:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--ombre-2); }
a.carte-categorie:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.carte-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.carte-nom {
  font-size: clamp(1.2rem, 1.1rem + .35vw, 1.4rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.25; color: var(--encre);
}
.carte-compte { font-weight: 700; color: var(--accent); }
.carte-ligne { overflow-wrap: anywhere; }
.carte-aller { margin-top: auto; align-self: flex-end; display: inline-flex; color: var(--accent); }
.carte-aller svg { width: 1.4rem; height: 1.4rem; }
.carte-vide { background: var(--carte-pale); box-shadow: none; }
a.carte-vide { pointer-events: none; }
a.carte-vide .carte-aller { display: none; }
.carte-vide .carte-compte { color: var(--encre-tenue); }
@media (prefers-reduced-motion: reduce) { a.carte-categorie:hover { transform: none; } }

/* Ce qui explique la page sans être ce qu'on y vient chercher : replié sous
   les cartes. */
.a-savoir {
  margin: 0 0 var(--t5);
  border: 1px solid var(--filet); border-radius: var(--r2);
  background: var(--carte-pale);
}
.a-savoir > summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--t3);
  padding: var(--t3) var(--t4);
  font-weight: 700; color: var(--encre); cursor: pointer; list-style: none;
}
.a-savoir > summary::-webkit-details-marker { display: none; }
.a-savoir > summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--accent); }
.a-savoir[open] > summary::after { content: "–"; }
.a-savoir-corps { padding: 0 var(--t4) var(--t4); }
.a-savoir + .a-savoir { margin-top: calc(-1 * var(--t5) + var(--t3)); }

.categorie-naf > h2 { margin-bottom: var(--t4); }

/* Ce qu'il y a dans une catégorie : la liste des sujets en haut, puis un
   encadré par sujet, filet de couleur à gauche, pour qu'on ne confonde pas
   la paie avec le droit du travail. */
.dedans { margin: var(--t4) 0 var(--t5); }
.dedans .etiq { margin: 0 0 var(--t2); }
.dedans ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.dedans li { flex: 1 1 16rem; display: flex; min-width: 0; }
.dedans a {
  flex: 1; min-width: 0;
  display: flex; justify-content: space-between; align-items: center; gap: .7rem;
  padding: .7rem .95rem;
  background: var(--accent-clair); color: var(--encre);
  border: 1px solid var(--accent-filet); border-radius: var(--r1);
  font-weight: 600; line-height: 1.35; text-decoration: none;
  transition: border-color .18s ease;
}
.dedans a:hover { border-color: var(--accent); }
.dedans .compte {
  flex: none; display: inline-grid; place-items: center;
  min-width: 2rem; height: 2rem; padding-inline: .45rem;
  border-radius: var(--rp); background: var(--carte); color: var(--accent); font-weight: 700;
}
[data-vue="recherche"] .dedans { display: none !important; }

.sous-groupe {
  margin-top: var(--t4); padding: var(--t4);
  background: var(--papier-pale);
  border: 1px solid var(--filet); border-left: 4px solid var(--accent); border-radius: var(--r2);
  scroll-margin-top: .5rem;
}
.sous-groupe > h4 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .7rem;
  margin: 0 0 var(--t3);
  font-size: clamp(1.15rem, 1.05rem + .45vw, 1.45rem); letter-spacing: -.02em; color: var(--encre);
}
.sous-groupe > h4 .etiq { color: var(--accent); }
.sous-groupe .tableau-boite { margin-top: 0; }
.sous-groupe .liste-releve { margin-top: 0; }
@media (max-width: 36rem) { .sous-groupe { padding: var(--t3); } }

/* Les divisions d'un grand secteur : un encadré chacune, comme les sujets. */
.categorie-naf .grappe-naf {
  padding: var(--t4);
  background: var(--papier-pale);
  border: 1px solid var(--filet); border-left: 4px solid var(--accent); border-radius: var(--r2);
}
.categorie-naf .grappe-naf + .grappe-naf { margin-top: var(--t4); }
.categorie-naf .grappe-naf { scroll-margin-top: .5rem; }
@media (max-width: 36rem) { .categorie-naf .grappe-naf { padding: var(--t3); } }

/* Sur grand écran, chaque texte du tableau est sa propre case, séparée de la
   suivante — au téléphone, les lignes sont déjà des cartes. */
@media (min-width: 52.01rem) {
  .tableau-textes { border-collapse: separate; border-spacing: 0 .55rem; margin-top: -.55rem; }
  .tableau-textes thead th { border-bottom: 0; padding-bottom: .1rem; }
  .tableau-textes tbody th, .tableau-textes tbody td,
  .tableau-textes tbody tr:last-child th, .tableau-textes tbody tr:last-child td {
    background: var(--carte);
    border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
  }
  .tableau-textes tbody th { border-left: 1px solid var(--filet); border-radius: var(--r2) 0 0 var(--r2); }
  .tableau-textes tbody td:last-child { border-right: 1px solid var(--filet); border-radius: 0 var(--r2) var(--r2) 0; }
  .tableau-textes tbody tr:hover > *, .tableau-textes tbody tr:focus-within > * { background: var(--carte-pale); }
}

/* Les familles du relevé, dessous : même grammaire que le reste. */
.famille-releve { margin-top: var(--t6); }
.famille-releve h3 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  margin: 0 0 .2rem; font-size: 1.22rem; letter-spacing: -.02em;
}
.famille-releve h3 .etiq { display: inline; }
.famille-releve .precision { margin: 0 0 var(--t4); }
.famille-releve .liste-releve { margin-top: var(--t3); }

/* Ce qu'il faut faire : une liste d'actions, pas un paragraphe. */
.a-faire { margin: .4rem 0 0; padding-left: 1.1rem; }
.a-faire li { margin-bottom: .3rem; }
.lien-officiel { font-size: .97rem; }

/* --- 18 quinquies. Le code choisi, et le reste replié -------------------- */
/* Le client arrive avec son code : il le voit en haut, nommé. Les autres
   codes de la division existent toujours, repliés en bas, pour qui les
   cherche. Une page ne montre que ce qu'on y est venu voir. */
.code-choisi {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem .7rem;
  margin: var(--t4) 0 0; padding: .65rem .9rem;
  background: var(--accent-clair); border-radius: var(--r2);
  width: fit-content; max-width: 100%;
}
.code-choisi .etiq { display: inline; }
.code-choisi .code {
  font-family: var(--mono); font-size: .92rem; font-weight: 700; color: var(--accent);
}
.code-choisi .nom { color: var(--encre); font-weight: 600; overflow-wrap: anywhere; }
.codes-ape li.choisi { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-clair); }

/* Un dépliant sobre : le titre, ce qu'on y trouve, un chevron. */
.pliant { border: 1px solid var(--filet); border-radius: var(--r2); background: var(--carte); }
.pliant > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .9rem;
  align-items: center;
  padding: var(--t4) clamp(1rem, .7rem + 1vw, 1.4rem);
  cursor: pointer; list-style: none;
}
.pliant > summary::-webkit-details-marker { display: none; }
.pliant > summary:hover { background: var(--carte-pale); border-radius: var(--r2); }
.pliant > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pliant > summary .titre { font-weight: 600; color: var(--encre); }
.pliant > summary .precision { grid-column: 1; margin: 0; }
.pliant > summary .chevron { grid-row: 1; grid-column: 2; transition: transform .2s ease; }
.pliant[open] > summary .chevron { transform: rotate(180deg); }
.pliant > summary + * { padding-inline: clamp(1rem, .7rem + 1vw, 1.4rem); }
.pliant > *:last-child { padding-bottom: var(--t4); }

/* --- 18 sexies. Les conseils, et les textes liés ------------------------- */
/* Sur le tableau de bord et dans le plan : ce qu'il faut faire, puis où lire
   le texte. Pas de détour, pas de dépliant — c'est ce qu'il vient voir. */
.conseils { list-style: none; padding: 0; margin: var(--t4) 0 0; display: grid; gap: var(--t4); }
.conseils > li {
  position: relative;
  padding: var(--t4) clamp(1rem, .7rem + 1vw, 1.4rem);
  background: var(--carte); border: 1px solid var(--filet); border-radius: var(--r2);
}
/* La carte entière ouvre la fiche du texte ; ses propres liens passent devant. */
.conseils > li:hover { border-color: var(--filet-fort); }
.conseils a:not(.lien-carte) { position: relative; z-index: 1; }
.conseils .titre { margin: 0; font-weight: 600; font-size: 1.02rem; color: var(--encre); }
.conseils .meta { display: block; margin: .2rem 0 0; }
.conseils .a-faire { margin-top: var(--t3); }

/* Les textes d'un domaine : le nom sur une ligne, où le lire sur la suivante. */
.textes-lies li { margin-bottom: .55rem; }
.textes-lies .lien-officiel { display: block; }

/* --- 18 septies. Les textes dépliants d'une fiche de secteur ------------- */
/* Sur la fiche d'un secteur, on ne liste pas des noms de textes : on met ce
   que chacun exige juste à côté de son lien officiel. Le client lit sans
   partir, et part quand il veut vérifier. */
.textes-depliants > li { display: block; padding: 0; }
.textes-depliants > li > details > summary {
  display: grid; gap: .25rem var(--t4);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: .7rem var(--t4);
  cursor: pointer; list-style: none;
}
.textes-depliants > li > details > summary::-webkit-details-marker { display: none; }
.textes-depliants > li > details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.textes-depliants .ref { grid-column: 1; }
.textes-depliants .rattache, .textes-depliants .source { grid-column: 1; }
.textes-depliants .chevron { grid-row: 1; grid-column: 2; color: var(--encre-tenue); transition: transform .2s ease; }
.textes-depliants details[open] .chevron { transform: rotate(180deg); }
.textes-depliants > li > details[open] > summary { background: var(--carte-pale); }
.textes-depliants .detail { padding: 0 var(--t4) var(--t4); }
/* « La fiche » tient sur une ligne : c'est la rangée qui se replie, pas le mot. */
.textes-depliants .detail .bouton { white-space: nowrap; }
.textes-depliants .detail .lecture { margin-top: var(--t3); }
@media (min-width: 46rem) {
  .textes-depliants > li > details > summary { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; }
  .textes-depliants .rattache { grid-column: 2; }
  .textes-depliants .source { grid-column: 3; }
  .textes-depliants .chevron { grid-column: 4; }
}

/* --- 18 octies. Les textes en tableau ----------------------------------- */
/* Trois colonnes, toujours les mêmes : le texte, ce qu'il exige, où le lire.
   Sous 52 rem, une carte par ligne — même contenu, même ordre. */
.tableau-textes { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tableau-textes th, .tableau-textes td {
  padding: .85rem .9rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--filet);
}
.tableau-textes thead th {
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--encre-tenue); border-bottom-color: var(--filet-fort);
}
.tableau-textes tbody th { font-weight: 600; width: 26%; }
.tableau-textes .cellule-depuis { width: 16%; }
.tableau-textes .cellule-depuis .date { display: block; }
.tableau-textes .cellule-depuis .precision { font-size: .82rem; }
/* Ce qui a bougé à la dernière relève se voit sans lire : une marque, et un
   filet sur la ligne. La couleur seule ne dirait rien à qui ne la voit pas. */
.marque-neuf {
  display: inline-block; padding: .08rem .45rem;
  border-radius: var(--rp); background: var(--accent); color: var(--bouton-texte);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.tableau-textes .ligne-neuve th { box-shadow: inset 3px 0 0 var(--accent); }
/* Toute la ligne ouvre la fiche : on clique la case, pas le nom. Les liens
   qu'elle contient restent au-dessus de la nappe. */
.tableau-textes tbody tr { position: relative; }
.tableau-textes tbody tr:hover { background: var(--carte-pale); }
.tableau-textes tbody tr:focus-within { background: var(--carte-pale); }
.tableau-textes .lien-carte { border-radius: var(--r1); }
.tableau-textes a:not(.lien-carte) { position: relative; z-index: 1; }
.tableau-textes tbody th a { color: var(--encre); text-decoration: none; overflow-wrap: anywhere; }
.tableau-textes tbody th a:hover { color: var(--accent); text-decoration: underline; }
.tableau-textes tbody tr:last-child th,
.tableau-textes tbody tr:last-child td { border-bottom: 0; }
.tableau-textes .precision { display: block; margin-top: .2rem; font-weight: 400; }
.tableau-textes td:last-child { width: 20%; }
.tableau-textes .lien-officiel { white-space: nowrap; }

/* Ce qu'il exige : deux points, en clair, sans numéro ni cadre — c'est une
   colonne de tableau, pas la fiche. */
.exige-court { margin: 0; padding-left: 1.05rem; color: var(--encre-douce); }
.exige-court li { margin-bottom: .3rem; }
.tableau-textes .lien-fleche { margin-top: .2rem; font-size: .88rem; }

.famille-textes { margin-top: var(--t6); }
.famille-textes h3 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  margin: 0 0 .2rem; font-size: 1.22rem; letter-spacing: -.02em;
}
.famille-textes h3 .etiq { display: inline; }
.famille-textes > .precision { margin: 0 0 var(--t4); }
.famille-textes .tableau-boite { margin-top: var(--t3); }

@media (max-width: 52rem) {
  .tableau-textes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tableau-textes tbody tr {
    display: grid; gap: .55rem;
    margin-bottom: var(--t4); padding: var(--t4);
    background: var(--carte); border: 1px solid var(--filet); border-radius: var(--r2);
  }
  .tableau-textes tbody th, .tableau-textes tbody td,
  .tableau-textes .cellule-depuis, .tableau-textes td:last-child {
    display: block; width: auto; padding: 0; border: 0;
  }
  .tableau-textes tbody td::before {
    content: attr(data-intitule);
    display: block; margin-bottom: .2rem;
    font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--encre-tenue);
  }
  .tableau-textes tbody th { font-size: 1.02rem; }
  .tableau-textes .lien-officiel { white-space: normal; }
}

/* --- 19. Le texte officiel, mot pour mot --------------------------------- */
/* Un article de code se lit comme un article de code : son numéro en tête, sa
   date d'entrée en vigueur à côté, son texte en dessous avec les alinéas et les
   tableaux de valeurs tels que l'État les publie. Rien de décoratif : ce qui
   compte est le texte. */
/* Un article de grille garde sa largeur : sans « minmax(0, 1fr) », un tableau
   de valeurs limites élargissait toute la liste, et la page débordait au
   téléphone. Le tableau défile seul, dans sa boîte. */
.articles { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--t4); grid-template-columns: minmax(0, 1fr); }
.articles > .article { min-width: 0; }
.texte-loi { overflow-wrap: anywhere; }
.article {
  padding: var(--t4) clamp(1rem, .7rem + 1vw, 1.4rem);
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r2);
}
.article:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-clair); }
.article-tete {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem var(--t3);
  margin: 0 0 var(--t3);
}
.article-num {
  font-family: var(--mono); font-size: .95rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--encre);
}
.article-tete .etiq { display: inline; text-transform: none; letter-spacing: .02em; }

.texte-loi { font-size: .97rem; line-height: 1.72; color: var(--encre-douce); overflow-wrap: break-word; }
.texte-loi > *:first-child { margin-top: 0; }
.texte-loi > *:last-child { margin-bottom: 0; }
.texte-loi p { margin: 0 0 .7rem; }
.texte-loi ul, .texte-loi ol { margin: 0 0 .7rem; padding-left: 1.25rem; }
.texte-loi li { margin-bottom: .3rem; }
.texte-loi strong, .texte-loi b { color: var(--encre); font-weight: 600; }
.texte-loi sup, .texte-loi sub { font-size: .75em; }
/* Les tableaux de valeurs limites sont larges : ils défilent dans leur boîte
   plutôt que de pousser la page. */
.texte-loi table {
  display: block; max-width: 100%; overflow-x: auto;
  margin: 0 0 .7rem; border-collapse: collapse;
  font-size: .9rem;
}
.texte-loi th, .texte-loi td {
  padding: .4rem .6rem; border: 1px solid var(--filet); text-align: left; vertical-align: top;
}
.texte-loi th { background: var(--carte-pale); color: var(--encre); font-weight: 600; }
.texte-loi caption { padding-bottom: .4rem; color: var(--encre-tenue); font-size: .88rem; text-align: left; }

/* Le sommaire d'un code : une ligne par page de texte. */
/* La colonne de la grille se cale sur la largeur disponible, jamais sur le
   plus long des sommaires : sans minmax(0, 1fr) et min-width, un intitulé
   large poussait toute la liste hors de l'écran du téléphone. */
.sommaire-code {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem;
}
.sommaire-code > li { min-width: 0; }
.sommaire-code a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem var(--t3);
  align-items: baseline;
  padding: .75rem 1rem;
  background: var(--carte); border: 1px solid var(--filet); border-radius: var(--r2);
  color: var(--encre); text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.sommaire-code a:hover { border-color: var(--accent); color: var(--encre); transform: translateY(-1px); }
.sommaire-code .nom { font-weight: 600; font-size: .98rem; overflow-wrap: anywhere; }
.sommaire-code .precision {
  grid-column: 1; font-size: .86rem; font-weight: 400; color: var(--encre-tenue);
  overflow-wrap: anywhere;
}
.sommaire-code .code {
  grid-row: 1; grid-column: 2;
  font-family: var(--mono); font-size: .82rem; color: var(--encre-tenue); white-space: nowrap;
}
/* Sur téléphone la plage d'articles passe en dessous : à côté, elle volait la
   place de l'intitulé. */
@media (max-width: 45.999rem) {
  .sommaire-code a { grid-template-columns: minmax(0, 1fr); }
  .sommaire-code .code {
    grid-row: auto; grid-column: 1;
    /* « Annexe I à l'article R4312-1 → Annexe II à l'article D4322-3 » tient
       sur une ligne d'écran large, pas sur un téléphone : là, elle se coupe. */
    white-space: normal; overflow-wrap: anywhere;
  }
}

/* L'étiquette qui dit, dans la liste des textes, que celui-là est publié ici. */
.etiq-texte { color: var(--accent); }

/* --- 20. Ce que ça change ------------------------------------------------ */
/* L'avant et l'après, côte à côte, avec juste assez de contexte pour situer la
   phrase. Le mot retiré est barré, le mot ajouté est souligné : on doit pouvoir
   le lire sans la couleur, parce que la couleur seule ne dit rien. */
.changements { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--t4); }
.changement {
  padding: var(--t4) clamp(1rem, .7rem + 1vw, 1.4rem);
  background: var(--carte);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--accent);
  border-radius: var(--r2);
}
.change-sorti { border-left-color: var(--filet-fort); }
.avant-apres { display: grid; gap: var(--t3); margin: 0; }
@media (min-width: 52rem) { .avant-apres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.avant-apres > div {
  min-width: 0; margin: 0;
  padding: var(--t3);
  background: var(--carte-pale); border: 1px solid var(--filet); border-radius: var(--r1);
}
.avant-apres dd { margin: .35rem 0 0; font-size: .95rem; line-height: 1.65; overflow-wrap: anywhere; }
.avant-apres .tenu { color: var(--encre-tenue); }
.avant-apres del { color: var(--encre); text-decoration: line-through; text-decoration-thickness: 1px; }
.avant-apres ins { color: var(--encre); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }

/* ==========================================================================
   Mouvement
   --------------------------------------------------------------------------
   Les décalages de départ sont posés par assets/accueil.js, jamais par la
   feuille : sans JavaScript, rien ne doit rester invisible.
   ========================================================================== */
.anime [data-paraitre] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
  transition-delay: var(--retard, 0ms);
}
.anime [data-paraitre].vu { opacity: 1; transform: none; }

.anime [data-fil] { transform: scaleY(0); transition: transform 1.1s cubic-bezier(.3, .8, .3, 1); }
.anime [data-fil].vu { transform: scaleY(1); }
@media (min-width: 60rem) {
  .anime [data-fil] { transform: scaleX(0); }
  .anime [data-fil].vu { transform: scaleX(1); }
}

.anime .jauge span { transform: scaleY(.28); transition: transform .5s cubic-bezier(.2, .9, .3, 1), background-color .3s ease; }
.anime .jauge.vu span { transform: scaleY(1); transition-delay: var(--retard, 0ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .anime [data-paraitre], .anime [data-fil], .anime .jauge span { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .bandeau { background: var(--papier); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --filet: var(--filet-fort); --encre-douce: var(--encre); }
  .bouton-sobre { border-width: 2px; }
}

/* --- Impression ---------------------------------------------------------- */
/* Deux impressions : la page entière, et la fiche d'un seul texte, demandée
   par son bouton. La seconde pose `body.impression-fiche` et marque la ligne ;
   tout le reste sort de la feuille. */
@media print {
  body.impression-fiche .rubrique,
  body.impression-fiche .tete-app,
  body.impression-fiche .pied,
  body.impression-fiche .verrou { display: none !important; }
  body.impression-fiche .rubrique:has(.a-imprimer) { display: block !important; }
  /* Depuis que le relevé est rangé par famille, la liste n'est plus fille
     directe de l'enveloppe : la famille qui porte la ligne doit passer, les
     autres non, et son titre non plus. */
  body.impression-fiche .rubrique:has(.a-imprimer) > .enveloppe > *:not(ul):not(.famille-releve) { display: none !important; }
  body.impression-fiche .famille-releve:not(:has(.a-imprimer)) { display: none !important; }
  body.impression-fiche .famille-releve > *:not(ul) { display: none !important; }
  body.impression-fiche .tableau-boite { display: none !important; }
  body.impression-fiche .liste-releve > li:not(.a-imprimer),
  body.impression-fiche .liste-registre > li:not(.a-imprimer) { display: none !important; }
  body.impression-fiche .a-imprimer { border: 0; }
  body.impression-fiche .a-imprimer .chevron { display: none !important; }
  body.impression-fiche .a-imprimer summary { cursor: default; }
  body.impression-fiche .a-imprimer .lien-fleche { display: none !important; }
  body.impression-fiche::before {
    content: "Pierrel & Co — fiche de veille réglementaire";
    display: block; margin-bottom: 1rem; padding-bottom: .5rem;
    border-bottom: 1px solid #999;
    font-weight: 700; font-size: 10pt;
  }

  .bandeau, .evitement, .theme, .menu-bascule, .heros-visuel, .bande-finale,
  .bouton, .jauge, .bandeau-demo { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section, .rubrique { padding-block: .6rem; }
  .vitrine, .bloc-domaine, .ligne-releve, .ligne-registre, .formule, .raison,
  .compteurs > div, .faits > div, .resultat, .reglage,
  .article, .changement, .avant-apres > div {
    box-shadow: none; border-color: #999; break-inside: avoid;
  }
  .texte-loi { font-size: 10.5pt; }
  .texte-loi table { display: table; }
  .sommaire-code { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}

/* --- 25. Les captures s'agrandissent -------------------------------------- */
/* On clique une capture : elle s'ouvre en grand, par-dessus la page. Le bouton
   couvre l'écran dessiné ; il n'existe qu'avec JavaScript (classe « js »). */
.portable, .mobile { position: relative; }
.agrandir {
  display: none;
  position: absolute; inset: 0; z-index: 3;
  border: 0; padding: 0; background: transparent; cursor: zoom-in;
  border-radius: inherit;
}
.js .agrandir { display: block; }
.agrandir:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.zoom {
  width: min(96vw, 110rem); max-width: none; max-height: 94vh;
  padding: 0; border: 0; border-radius: var(--r2);
  background: var(--carte); box-shadow: var(--ombre-3);
  overflow: auto;
}
.zoom::backdrop { background: rgba(11, 13, 20, .72); }
.zoom img { display: block; width: 100%; height: auto; cursor: zoom-out; }
.zoom.zoom-mobile { width: min(92vw, 26rem); }
.zoom-fermer {
  position: sticky; top: .6rem; float: right; margin: .6rem .6rem -3rem 0; z-index: 1;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem; border: 1px solid var(--filet); border-radius: var(--rp);
  background: var(--carte); color: var(--encre); font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: var(--ombre-1);
}

/* --- 26. Sur l'accueil, les cases se lèvent sous la souris ---------------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .zone-public .raison, .zone-public .info-encart, .zone-public .appareil,
  .zone-public main .reserve, .zone-public .resultat li, .zone-public .vitrine .portable,
  .zone-public .heros-visuel .portable, .zone-public .heros-visuel .mobile {
    transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease, border-color .22s ease;
  }
  .zone-public .raison:hover, .zone-public .info-encart:hover, .zone-public .appareil:hover,
  .zone-public main .reserve:hover, .zone-public .resultat li:hover {
    transform: translateY(-5px); box-shadow: var(--ombre-2);
  }
  .zone-public .info-encart:hover, .zone-public .appareil:hover, .zone-public .raison:hover { border-color: var(--accent-filet); }
}

/* --- 27. Fait, ou pas fait ------------------------------------------------- */
/* Le bouton : une case à cocher qu'on voit de loin. Fait, il passe au vert et
   dit quand. Il n'existe qu'avec JavaScript, qui garde l'état. */
.bloc-fait { display: none; }
.js .bloc-fait {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin: var(--t3) 0; position: relative; z-index: 2;
}
.bouton-fait {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem .6rem .8rem;
  border: 1.5px solid var(--accent); border-radius: var(--rp);
  background: var(--carte); color: var(--accent);
  font: inherit; font-weight: 700; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.bouton-fait:hover { background: var(--accent-clair); }
.fait-case {
  width: 1.15rem; height: 1.15rem; flex: none;
  border: 2px solid currentColor; border-radius: 5px;
  display: inline-grid; place-items: center;
}
.est-fait .bouton-fait { border-color: var(--vert); background: var(--vert-fond); color: var(--vert); }
.est-fait .fait-case { background: var(--vert); border-color: var(--vert); }
.est-fait .fait-case::after {
  content: ""; width: .32rem; height: .62rem; margin-top: -.12rem;
  border: solid var(--carte); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.fait-quand { font-size: .92rem; color: var(--encre-tenue); }
.marque-fait {
  display: inline-block; margin-right: .45rem; padding: .05rem .55rem;
  border-radius: var(--rp); background: var(--vert-fond); color: var(--vert);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  vertical-align: .12em;
}
.marque-fait::before { content: "✓ "; }
.bloc-domaine-tete .marque-fait { margin-left: .6rem; }
.carte-faits { font-weight: 600; color: var(--encre-tenue); }
.carte-faits.tout-fait { color: var(--vert); }
.carte-faits.tout-fait::before { content: "✓ "; }

/* --- 28. Réglages : l'entreprise en chiffres -------------------------------- */
.intertitre { margin-top: var(--t4); padding-top: var(--t4); border-top: 1px solid var(--filet); }
.intertitre h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.intertitre .precision { margin: 0; }
.reglage select { width: 100%; }
.certifs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.certifs .certif { flex: 1 1 9rem; }
.certif {
  display: flex; align-items: center; gap: .55rem;
  padding: .65rem .85rem; border: 1px solid var(--filet); border-radius: var(--r1);
  background: var(--carte); cursor: pointer; font-weight: 600; color: var(--encre);
}
.certif:has(input:checked) { border-color: var(--accent); background: var(--accent-clair); }
.certif input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.fiche-chiffres { display: flex; flex-wrap: wrap; gap: var(--t3); margin: var(--t4) 0 0; }
.fiche-chiffres > div { flex: 1 1 13rem; }
.fiche-chiffres > div { padding: var(--t3) var(--t4); border: 1px solid var(--filet); border-radius: var(--r2); background: var(--carte); }
.fiche-chiffres dd { margin: .2rem 0 0; color: var(--encre); font-weight: 600; }

/* --- 29. Comment ça marche ------------------------------------------------- */
.heros-court { padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }

/* Les cinq étapes : une colonne au téléphone et à la tablette, flèche vers le
   bas ; cinq de front sur grand écran, flèche vers la droite. */
.etapes { list-style: none; margin: var(--t5) 0 0; padding: 0; display: grid; gap: var(--t5); }
.etape {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: .5rem;
  padding: var(--t4);
  background: var(--carte); border: 1px solid var(--filet); border-radius: var(--r2);
  box-shadow: var(--ombre-1);
}
.etape h3 { margin: 0; font-size: 1.15rem; }
.etape p { margin: 0; color: var(--encre-douce); line-height: 1.55; }
.etape-num {
  position: absolute; top: var(--t3); right: var(--t3);
  font-family: var(--mono); font-weight: 700; color: var(--encre-tenue);
}
.etape-icone {
  width: 2.8rem; height: 2.8rem; display: grid; place-items: center;
  border-radius: var(--r1); background: var(--accent-clair); color: var(--accent);
}
.etape-icone svg { width: 1.5rem; height: 1.5rem; }
.etape:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: calc(-1 * var(--t5) + .5rem);
  width: .9rem; height: .9rem; margin-left: -.45rem;
  border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
@media (min-width: 64rem) {
  .etapes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--t4); }
  .etape:not(:last-child)::after {
    left: auto; right: calc(-1 * var(--t4) + .1rem); top: 50%; bottom: auto;
    margin: -.45rem 0 0; transform: rotate(-45deg); width: .7rem; height: .7rem;
  }
}

/* Texte et dessin côte à côte, au même niveau. */
.deux-temps { display: grid; gap: var(--t5); align-items: center; }
@media (min-width: 62rem) {
  .deux-temps { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .deux-temps-inverse { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.deux-temps h2 { margin: 0 0 var(--t4); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.legende { margin: 0; padding-left: 1.4rem; display: grid; gap: .8rem; color: var(--encre-douce); line-height: 1.55; }
.legende strong { color: var(--encre); }
.dessin-cadre { margin: 0; }
.dessin-cadre figcaption { margin-top: .6rem; font-size: .92rem; color: var(--encre-tenue); text-align: center; }

/* Les dessins : rien de codé en dur, tout vient du thème. */
.dessin { display: block; width: 100%; height: auto; font-family: var(--police); }
.dessin .d-carte { fill: var(--carte); stroke: var(--filet-fort); stroke-width: 1.5; }
.dessin .d-encart { fill: var(--carte-pale); stroke: var(--filet); stroke-width: 1.2; }
.dessin .d-encart-faire { fill: var(--accent-clair); stroke: var(--accent-filet); stroke-width: 1.2; }
.dessin .d-ligne { fill: var(--filet-fort); opacity: .75; }
.dessin .d-ligne-forte { fill: var(--encre); opacity: .8; }
.dessin .d-num { fill: var(--accent); }
.dessin .d-num-t { fill: var(--carte); font-size: 13px; font-weight: 700; }
.dessin .d-titre { fill: var(--encre); font-size: 14px; font-weight: 700; }
.dessin .d-petit { fill: var(--encre-tenue); font-size: 12px; font-family: var(--mono); }
.dessin .d-accent { fill: var(--accent); font-family: var(--police); font-weight: 700; }
.dessin .d-pastille { fill: none; stroke: var(--accent-filet); stroke-width: 1.5; }
.dessin .d-puce { fill: var(--accent); }
.dessin .d-fait { fill: var(--vert-fond); stroke: var(--vert); stroke-width: 1.5; }
.dessin .d-case { fill: var(--vert); }
.dessin .d-coche { fill: none; stroke: var(--carte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dessin .d-fait-t { fill: var(--vert); font-size: 15px; font-weight: 700; }
.dessin .d-repere { stroke: var(--filet); stroke-width: 1; stroke-dasharray: 3 4; }
.dessin .d-rail { stroke: var(--filet-fort); stroke-width: 2; }
.dessin .d-point { fill: var(--accent); }

/* Les six écrans : trois de front, deux à la tablette, un au téléphone. */
.pieces { list-style: none; margin: var(--t5) 0 0; padding: 0; display: grid; gap: var(--t4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.piece {
  display: flex; flex-direction: column; gap: .5rem; min-width: 0;
  padding: var(--t3) var(--t3) var(--t4);
  background: var(--carte); border: 1px solid var(--filet); border-radius: var(--r2);
}
.piece h3 { margin: .4rem .4rem 0; font-size: 1.15rem; }
.piece p { margin: 0 .4rem; color: var(--encre-douce); line-height: 1.55; }
.vignette {
  position: relative; margin: 0; aspect-ratio: 16 / 10.75; overflow: hidden;
  border: 1px solid var(--filet); border-radius: var(--r1); background: var(--papier-pale);
}
.vignette img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.vignette-vide { display: grid; place-items: center; color: var(--accent); }
.vignette-vide svg { width: 3rem; height: 3rem; }

/* Au téléphone, les dessins passent en hauteur : même contenu, texte lisible. */
.dessin-etroit { display: none; }
@media (max-width: 40rem) {
  .dessin-large { display: none; }
  .dessin-etroit { display: block; max-width: 26rem; margin-inline: auto; }
  .dessin .d-titre-tel { font-size: 16px; }
}

/* --- 30. Accueil : prix affichés, normes, questions ------------------------ */
.normes { list-style: none; margin: var(--t5) 0 0; padding: 0; display: grid; gap: var(--t4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 46rem) { .normes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .normes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.norme {
  display: flex; flex-direction: column; gap: .6rem; min-width: 0;
  padding: var(--t4); background: var(--carte);
  border: 1px solid var(--filet); border-top: 4px solid var(--accent); border-radius: var(--r2);
  box-shadow: var(--ombre-1);
}
.norme p { margin: 0; color: var(--encre-douce); line-height: 1.55; }
.norme strong { color: var(--encre); }
.norme-nom { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--encre) !important; }
.norme-nom span { display: block; font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--accent); }

/* Trois thèmes. Sur grand écran, trois colonnes côte à côte : une question
   qui s'ouvre n'allonge que la sienne. Plus étroit, une seule colonne, à
   largeur de lecture. */
.faq { margin: var(--t5) auto 0; display: grid; gap: var(--t5) var(--t4); grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
@media (min-width: 80rem) { .faq { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; max-width: none; } }
.faq-theme { display: grid; gap: var(--t3); min-width: 0; }
.faq-theme > h3 {
  margin: 0 0 var(--t1); font-size: .82rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.faq-reponse { display: grid; gap: var(--t2); padding: 0 var(--t4) var(--t4); color: var(--encre-douce); line-height: 1.6; }
.faq-reponse p, .faq-reponse ul { margin: 0; }
.faq-reponse ul { padding-left: 1.1rem; display: grid; gap: .35rem; }
.faq-reponse strong { color: var(--encre); }
.faq-question { background: var(--carte); border: 1px solid var(--filet); border-radius: var(--r2); }
.faq-question > summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--t3);
  padding: var(--t3) var(--t4); cursor: pointer; list-style: none;
  font-weight: 700; color: var(--encre); font-size: 1.05rem;
}
.faq-question > summary::-webkit-details-marker { display: none; }
.faq-question > summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--accent); flex: none; }
.faq-question[open] > summary::after { content: "–"; }
.faq-question[open] { border-color: var(--accent-filet); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .zone-public .norme { transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease; }
  .zone-public .norme:hover { transform: translateY(-5px); box-shadow: var(--ombre-2); }
}

/* --- 31. Au téléphone, la même disposition que sur le PC -------------------- */
/* « Sur téléphone, il faut que ce soit comme sur le PC. » Même composition,
   écriture lisible : l'ordinateur et son téléphone en tête, les boutons côte
   à côte, les cases par deux comme elles vont par quatre au bureau. Seuls les
   longs textes (l'outil, les captures, les questions) gardent toute la
   largeur : à moitié d'écran, ils ne se liraient plus. */
@media (max-width: 52rem) {
  /* L'ordinateur revient, le téléphone le chevauche, penché, comme au bureau. */
  .heros-visuel .portable { display: block; width: 100%; }
  .heros-visuel .mobile {
    position: absolute; right: 0; bottom: 0; width: 31%;
    transform: rotate(-3deg); transform-origin: 100% 100%;
  }
}
@media (max-width: 36rem) {
  /* Le bouton principal sur toute la ligne, les deux autres côte à côte. */
  .heros .rangee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .heros .rangee > .bouton { width: 100%; padding-inline: .5rem; font-size: .95rem; justify-content: center; text-align: center; white-space: nowrap; }
  .heros .rangee > .bouton:first-child { grid-column: 1 / -1; }
  .heros .rangee > .bouton:last-child:nth-child(even) { grid-column: auto; }
}
@media (max-width: 59.99rem) {
  /* Les quatre chiffres : deux et deux, chacun sous son trait. */
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t4) var(--t3); }
  .rail-fil { display: none; }
  .rail-item { padding: var(--t3) 0 0; }
  .rail-item::before { top: 0; left: 0; width: 100%; }
}
@media (max-width: 40rem) {
  /* Pourquoi nous, les normes, les écrans de « Comment ça marche » : par deux. */
  .raisons, .normes, .pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t3); }
  .raisons > :last-child:nth-child(odd), .normes > :last-child:nth-child(odd),
  .pieces > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .raison, .norme { padding: var(--t3); border-radius: var(--r2); }
  .raison .numero { width: 2.3rem; height: 2.3rem; font-size: 1.05rem; margin-bottom: var(--t3); }
  .raison h3, .piece h3 { font-size: 1.02rem; }
  .raison p, .norme p, .piece p { font-size: .93rem; }
  .norme-nom { font-size: 1.12rem; }
  .piece { padding: .5rem .5rem var(--t3); }
  .piece h3, .piece p { margin-inline: .2rem; }
  /* Les métiers : deux par ligne. */
  .panneau-puces .puces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .puces a, .puces .puce-fixe { grid-template-columns: 1fr; gap: .4rem; padding: .7rem; font-size: .9rem; }
  .puces .code { width: 2rem; height: 2rem; font-size: .8rem; }
  /* Dirigeant / QHSE : deux par ligne, l'icône au-dessus du titre. */
  .traits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t4) var(--t3); }
  .trait { grid-template-columns: 1fr; gap: .4rem; }
  .trait h3 { font-size: 1.02rem; }
  .trait p { font-size: .93rem; }
  /* Le pied : la marque sur toute la ligne, puis les colonnes deux par deux. */
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t4) var(--t3); }
  .pied-grille > :first-child { grid-column: 1 / -1; }
  .pied-grille > :last-child:nth-child(even) { grid-column: 1 / -1; }
  /* Seule sur sa ligne, la dernière colonne se range elle-même en deux. */
  .pied-grille > :last-child:nth-child(even) ul { columns: 2; column-gap: var(--t3); }
  .pied-grille > :last-child:nth-child(even) li { break-inside: avoid; }
}

/* « À quoi ça ressemble » n'a plus de phrase sous son titre : la première
   capture garde sa distance. */
h2.titre-section + .vitrine { margin-top: clamp(2rem, 1.2rem + 3vw, 3.5rem); }

/* --- 32. Pages « En savoir plus », tous les métiers, barre des avis -------- */
/* Les quatre encarts, seuls sur leur page : plus grands, deux et deux. */
.infos-page { margin-top: 0; gap: var(--t4); }
.infos-page .info-encart { padding: clamp(1.1rem, .8rem + 1.2vw, 1.75rem); }
.info-encart h2 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); margin: 0 0 var(--t3); }
.infos-page .info-encart ul { gap: .6rem; }
.infos-page .info-encart li { font-size: 1.02rem; }

/* Tous les métiers : un bloc par grand secteur, sa lettre en tête. */
.groupe-metiers + .groupe-metiers { margin-top: var(--t6); }
.groupe-metiers h2 {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 var(--t3); font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem);
}
.groupe-metiers .lettre {
  display: grid; place-items: center; flex: none;
  width: 2.1rem; height: 2.1rem; border-radius: var(--r1, .5rem);
  background: var(--accent); color: #fff; font-size: .95rem;
}
:root[data-theme="dark"] .groupe-metiers .lettre { color: #14142A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .groupe-metiers .lettre { color: #14142A; } }
.groupe-metiers .puces .nom { -webkit-line-clamp: 3; }
/* Au téléphone, deux par ligne, comme les métiers de l'accueil. */
@media (max-width: 52rem) { .groupe-metiers .puces li { flex: 1 1 calc(50% - .3rem); min-width: 0; } }

/* La barre des avis : une ligne qui défile, son titre à gauche, le bouton à
   droite. Elle s'arrête quand la souris ou le clavier s'y pose, et ne bouge
   pas du tout pour qui a demandé moins d'animations. */
.bande-avis {
  border-block: 1px solid var(--filet);
  background: var(--papier-pale);
  padding-block: clamp(.9rem, .7rem + .8vw, 1.4rem);
}
.bande-avis-interieur { display: flex; align-items: center; gap: var(--t4); }
.bande-avis-titre {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  margin: 0; font-size: .95rem; font-weight: 800; white-space: nowrap;
}
.bande-avis-titre .sigle { width: 1.2rem; height: 1.2rem; color: var(--accent); }
.defile {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.defile-rail { display: flex; width: max-content; animation: defile var(--duree, 40s) linear infinite; }
.defile:hover .defile-rail, .bande-avis:focus-within .defile-rail { animation-play-state: paused; }
.defile-piste { display: flex; flex: none; list-style: none; margin: 0; padding: 0; }
.avis-item {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding-inline: 1.6rem; white-space: nowrap;
  color: var(--encre-douce); font-size: 1.05rem;
}
.avis-item + .avis-item::before, .defile-piste + .defile-piste .avis-item:first-child::before {
  content: "•"; margin-right: 1.6rem; margin-left: -1.6rem; color: var(--accent);
}
.avis-item strong, .avis-item q { color: var(--encre); }
/* La bande entière ouvre le formulaire ; « Laisser votre avis » y est écrit
   en couleur, en plus grand, et revient entre les avis. */
a.defile { display: block; color: inherit; text-decoration: none; cursor: pointer; border-radius: var(--r1); }
a.defile:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.avis-appel { font-size: 1.2rem; }
.avis-appel strong { color: var(--accent); font-weight: 800; }
a.defile:hover .avis-appel strong { text-decoration: underline; text-underline-offset: 3px; }
.avis-appel .bulle { color: var(--accent); }
.avis-qui { font-size: .92rem; }
.etoiles { color: #E8A317; letter-spacing: .05em; }
.bouton-avis { flex: none; min-height: 2.75rem; padding: .55rem 1.2rem; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .defile { -webkit-mask-image: none; mask-image: none; }
  .defile-rail { animation: none; width: auto; }
  .defile-piste { flex-wrap: wrap; flex: 1; row-gap: .3rem; }
  .defile-piste[aria-hidden="true"] { display: none; }
  .avis-item { white-space: normal; padding-inline: 0 1.6rem; }
  .avis-item + .avis-item::before { margin-left: 0; margin-right: .6rem; }
}
@media (max-width: 40rem) {
  .bande-avis-interieur { gap: var(--t2) var(--t3); flex-wrap: wrap; }
  .bande-avis-titre { order: 1; }
  .bouton-avis { order: 2; margin-left: auto; min-height: 2.5rem; padding: .45rem 1rem; font-size: .92rem; }
  .defile { order: 3; flex-basis: 100%; }
  .avis-item { font-size: .95rem; }
}

/* Le formulaire d'avis, dans une fenêtre. */
.fenetre-avis {
  width: min(94vw, 36rem); max-height: 92vh; padding: 0;
  border: 0; border-radius: var(--r2);
  background: var(--carte); color: var(--encre); box-shadow: var(--ombre-3);
}
.fenetre-avis::backdrop { background: rgba(11, 13, 20, .6); }
.formulaire-avis { display: grid; gap: var(--t3); padding: clamp(1.1rem, .8rem + 1.4vw, 1.8rem); }
.fenetre-tete { display: flex; justify-content: space-between; align-items: center; gap: var(--t3); }
.fenetre-tete h2 { margin: 0; font-size: 1.35rem; }
.fenetre-tete .zoom-fermer { position: static; float: none; margin: 0; box-shadow: none; }
.aide-avis { margin: 0; color: var(--encre-douce); line-height: 1.55; }
.note-avis { margin: 0; padding: 0; border: 0; }
.note-avis legend { font-weight: 700; margin-bottom: var(--t2); }
.note-choix { display: flex; flex-wrap: wrap; gap: .4rem; }
.note-choix label {
  display: inline-flex; align-items: center; cursor: pointer;
  padding: .35rem .7rem; border: 1px solid var(--filet-fort); border-radius: var(--rp);
  color: #E8A317; font-size: 1.05rem; letter-spacing: .05em;
}
.note-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.note-choix label:has(input:checked) { background: var(--accent-clair); border-color: var(--accent); }
.note-choix label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.champs-avis { display: grid; gap: var(--t3); }
@media (min-width: 34rem) { .champs-avis { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } }
.formulaire-avis label { display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; min-width: 0; }
.formulaire-avis .aide { font-weight: 400; font-size: .82rem; color: var(--encre-douce); }
.formulaire-avis input[type=text], .formulaire-avis textarea {
  width: 100%; min-width: 0; padding: .6rem .75rem;
  border: 1px solid var(--filet-fort); border-radius: var(--r1, .5rem);
  background: var(--papier); color: var(--encre); font: inherit; font-weight: 400;
}
.formulaire-avis textarea { resize: vertical; min-height: 7rem; }
.formulaire-avis .accord-avis { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; }
.accord-avis input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--accent); }
.erreur-avis { margin: 0; color: #C2410C; font-weight: 600; }
.merci-avis { margin: 0; padding: var(--t3); border-radius: var(--r2); background: var(--accent-clair); color: var(--encre); }
.formulaire-avis .rangee { margin: 0; }

/* Le paiement en ligne est branché : la réserve devient une bonne nouvelle. */
.reserve.reserve-ok { background: var(--accent-clair); border-color: var(--accent-filet); }

/* Les messages des pages de compte (connexion, création, Mon compte). */
.etat-compte { margin: var(--t3) 0 0; min-height: 1.5em; color: var(--encre); font-weight: 600; }
.etat-compte:empty { display: none; }
.etat-compte .lien-nu, .reserve .lien-nu { font: inherit; text-decoration: underline; }
.aide-bas { margin-top: var(--t4); font-size: .9rem; color: var(--encre-douce); }
#connexion-deja .rangee, #creer-envoye p + p { margin-top: var(--t3); }
#creer-envoye:focus { outline: none; }

/* « Mon compte » : l'essentiel dans la première carte, le reste replié. */
.annonce-compte { margin-bottom: var(--t4); }
.compte-adresse { overflow-wrap: anywhere; }
.compte-entreprise { font-size: 1.15rem; margin-bottom: var(--t2); }
#compte-principal > * + * { margin-top: var(--t4); }
.repli-compte summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; }
.repli-compte[open] summary { margin-bottom: var(--t4); }

/* L'administration : une carte par entreprise, en grille sur grand écran. */
.admin-enveloppe { max-width: 72rem; }
.admin-rappel { margin: 0 0 var(--t5); }
.admin-grille { display: grid; gap: var(--t4); margin: var(--t4) 0 var(--t6); }
@media (min-width: 62rem) {
  .admin-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Pas de case seule sur sa ligne : la dernière, si elle est seule, prend toute la largeur. */
  .admin-grille > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.admin-entreprise h3 { font-size: 1.25rem; margin: 0 0 var(--t1); overflow-wrap: anywhere; }
.admin-details { color: var(--encre-douce); font-size: .92rem; }
.admin-alerte { color: var(--ambre); font-weight: 600; }
.admin-formule { margin: var(--t3) 0; }
.admin-choix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t2); margin-bottom: var(--t4); }
.admin-choix label { flex-basis: 100%; font-weight: 600; font-size: .92rem; }
.admin-choix select { min-height: 2.75rem; padding: 0 .75rem; border-radius: var(--r2); border: 1px solid var(--filet);
  background: var(--carte); color: var(--encre); font: inherit; flex: 1 1 12rem; }
.admin-choix .etat-compte { flex-basis: 100%; margin: 0; }
.admin-choix input { min-height: 2.75rem; padding: 0 .9rem; border-radius: var(--r2); border: 1px solid var(--filet-fort);
  background: var(--papier); color: var(--encre); font: inherit; flex: 1 1 14rem; min-width: 0; }
.admin-entreprise .reserve input { width: 100%; margin-top: var(--t2); padding: .6rem .8rem; border-radius: var(--r2);
  border: 1px solid var(--filet-fort); background: var(--papier); color: var(--encre); font: inherit; font-size: .9rem; }

/* Lot 7 — le consultant : choisir entreprise ou cabinet, sa page, son bandeau. */
.choix-type { border: 0; padding: 0; margin: var(--t3) 0; display: grid; gap: .5rem; }
.choix-type legend { padding: 0; margin-bottom: .35rem; font-size: .9rem; font-weight: 600; color: var(--encre); }
.choix-type label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; cursor: pointer;
  padding: .7rem 1rem; border: 1px solid var(--filet-fort); border-radius: var(--r2); font-weight: 600; }
.choix-type label:has(input:checked) { border-color: var(--accent); background: var(--accent-clair); }
.choix-type input { width: auto; padding: 0; margin: 0; flex: none; accent-color: var(--accent); }
.choix-type .aide { flex-basis: 100%; font-weight: 400; color: var(--encre-douce); font-size: .9rem; padding-left: 1.6rem; }
.compte-consultant { margin-top: var(--t4); padding-top: var(--t4); border-top: 1px solid var(--filet); }
.compte-consultant .lien-nu { font: inherit; font-weight: 600; text-decoration: underline; }
.etapes-cabinet { margin: 0 0 var(--t4); padding-left: 1.3rem; display: grid; gap: .3rem; color: var(--encre-douce); }
#cabinet-inactif { margin-bottom: var(--t5); }
.bandeau-consultant { background: var(--carte); border-bottom-color: var(--accent); }
.admin-comptes { list-style: none; margin: 0; padding: 0; }
.admin-comptes li { padding: var(--t3) 0; border-top: 1px solid var(--filet); display: grid; gap: .2rem; }
.admin-comptes li:first-child { border-top: 0; }
.admin-courriel { font-weight: 600; overflow-wrap: anywhere; }
.admin-collectes .collecte-alerte .admin-courriel { color: var(--ambre); }
.admin-collectes .collecte-echouee .admin-courriel { color: var(--rouge, #c0392b); }
.admin-comptes .lien-nu { justify-self: start; font: inherit; font-size: .92rem; text-decoration: underline; }

/* Qualifier un texte : trois choix, puis l'action qui en découle. */
.qualifier { margin-top: var(--t4); padding-top: var(--t4); border-top: 1px solid var(--filet); }
.qualifier-choix { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--t2); }
.choix-qualif {
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  min-height: 2.75rem; padding: .45rem 1rem; border-radius: var(--rp);
  border: 1px solid var(--filet-controle); background: var(--carte); color: var(--encre);
}
.choix-qualif:hover:not(:disabled) { border-color: var(--accent); }
.choix-qualif[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.choix-qualif:disabled { opacity: .55; cursor: not-allowed; }
.qualifier-etat { margin: var(--t3) 0 0; color: var(--encre-douce); font-size: .92rem; }
.qualifier-actions { list-style: none; margin: var(--t3) 0 0; padding: 0; display: grid; gap: .4rem; }
.qualifier-actions li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.qualifier-actions .lien-nu, .echeance-action .lien-nu { font: inherit; font-weight: 600; text-decoration: underline; }
.qualifier-action { margin-top: var(--t4); }
.qualifier-autre { margin: var(--t3) 0 0; }
.qualifier-autre .lien-nu { font: inherit; text-decoration: underline; }
.qualifier-action label { display: grid; gap: .3rem; font-weight: 600; }
.marque-qualif {
  display: inline-block; margin-right: .45rem; padding: .05rem .55rem;
  border-radius: var(--rp); background: var(--accent-clair); color: var(--accent);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: .12em;
}
.marque-qualif[data-statut="sans_objet"] { background: var(--carte-pale); color: var(--encre-douce); }
.marque-qualif[data-statut="a_suivre"] { background: var(--ambre-fond); color: var(--ambre); }
.echeance-action { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--t3); padding: var(--t3) var(--t4); color: var(--encre-douce); }
.echeance-action .objet-action { margin-right: auto; color: var(--encre); font-weight: 600; }

/* Un vrai compte : rien du jeu d'essai ne reste à l'écran. */
.espace-compte [data-demo] { display: none !important; }

/* « Votre équipe », dans Mon compte. */
.equipe-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--t3); margin-top: .3rem; }
.equipe-outils select, #form-inviter select {
  min-height: 2.75rem; padding: 0 .75rem; border-radius: var(--r2); border: 1px solid var(--filet);
  background: var(--carte); color: var(--encre); font: inherit; max-width: 100%;
}
.equipe-outils .lien-nu { font: inherit; text-decoration: underline; }
#i-lien { width: 100%; min-height: 2.75rem; padding: 0 .75rem; margin-top: var(--t3); border-radius: var(--r2);
  border: 1px solid var(--filet); background: var(--carte); color: var(--encre); font: inherit; font-size: .9rem; }
#invitation-lien { margin-top: var(--t4); }
#invitation-lien a.bouton-sobre { color: var(--encre); }

/* --- 33. Les prix : l'année d'abord, le mois à côté ------------------------ */
.formule .offre-an { margin: calc(-1 * var(--t2)) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--encre-douce); }
.formule .offre-an strong { color: var(--encre); }
.pastille-offre {
  display: inline-flex; padding: .2rem .65rem; border-radius: var(--rp);
  background: var(--accent-clair); color: var(--accent); font-weight: 700; font-size: .85rem;
}
.formule .lien-mois { align-self: center; margin-top: calc(-1 * var(--t1)); font-weight: 600; font-size: .95rem; }
.mention-tva { margin: var(--t4) 0 0; text-align: center; color: var(--encre-douce); font-size: .95rem; }
.gage-tva { margin-top: calc(-1 * var(--t2)); font-size: .9rem; }
/* Dans les grands chiffres, l'espace de la police, déjà étroite, disparaissait
   sous l'interlettrage serré : « 1 490 € » se lisait « 1490 € ». */
.formule .prix .grand { word-spacing: .14em; }

/* --- 34. Les pages légales ----------------------------------------------------- */
.legal { max-width: 50rem; }
.legal-statut { margin: 0 0 var(--t3); }
.legal-maj { color: var(--encre-douce); font-size: .92rem; margin: 0 0 var(--t4); }
.legal-sommaire { padding: var(--t3) var(--t4); border: 1px solid var(--filet); border-radius: var(--r2); background: var(--carte); }
.legal-sommaire ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .3rem; }
@media (min-width: 46rem) { .legal-sommaire ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--t5); } }
.legal-article { margin-top: var(--t6); scroll-margin-top: 6rem; }
.legal-article h2 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); margin: 0 0 var(--t3); }
.legal-article p, .legal-article li { line-height: 1.65; color: var(--encre-douce); }
.legal-article strong { color: var(--encre); }
.legal-article ul, .legal-article ol { padding-left: 1.3rem; display: grid; gap: .5rem; }
.legal-article p + p, .legal-article ul + p, .legal-article p + ul, .legal-article p + ol { margin-top: var(--t3); }
.legal-cle { font-weight: 700; color: var(--accent) !important; }
/* Ce qui reste à fournir, ou à trancher : visible d'un coup d'œil. */
mark.a-completer, mark.a-decider {
  padding: .05rem .35rem; border-radius: .3rem; font-weight: 700; font-size: .92em;
  background: #FDE7C8; color: #7A3E00;
}
mark.a-decider { background: #E6E1FF; color: #3B1FBF; }
:root[data-theme="dark"] mark.a-completer { background: #4A2E0A; color: #FFD9A8; }
:root[data-theme="dark"] mark.a-decider { background: #2B2260; color: #D6CCFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) mark.a-completer { background: #4A2E0A; color: #FFD9A8; }
  :root:not([data-theme="light"]) mark.a-decider { background: #2B2260; color: #D6CCFF; }
}

/* --- 35. Dernière collecte, et bloc consultant ---------------------------------- */
.collecte {
  max-width: 60ch; margin: var(--t3) auto 0; text-align: center;
  font-size: .92rem; line-height: 1.55; color: var(--encre-douce);
}
.collecte strong { color: var(--encre); font-weight: 600; }
.collecte-point { display: inline-block; width: .6rem; height: .6rem; margin-right: .45rem; border-radius: 50%; background: #1F9D55; vertical-align: .05em; }
/* Plus de 26 heures sans collecte réussie : on le montre, en clair. */
.collecte.en-retard { color: #9A3412; }
.collecte.en-retard strong { color: #9A3412; }
.collecte.en-retard .collecte-point { background: #D9480F; }
:root[data-theme="dark"] .collecte.en-retard, :root[data-theme="dark"] .collecte.en-retard strong { color: #FDBA74; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .collecte.en-retard, :root:not([data-theme="light"]) .collecte.en-retard strong { color: #FDBA74; }
}
.bloc-consultant {
  max-width: 46rem; margin: 0 auto; padding: clamp(1.25rem, .9rem + 1.5vw, 2rem);
  border: 1px solid var(--accent-filet); border-radius: var(--r3); background: var(--carte); text-align: center;
}
.bloc-consultant h2 { margin: 0; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.bloc-consultant ul { list-style: none; padding: 0; margin: var(--t4) 0 0; display: grid; gap: .45rem; color: var(--encre-douce); }
.bloc-consultant strong { color: var(--encre); }
.bloc-consultant .rangee { justify-content: center; margin-top: var(--t4); }
.collecte-alerte { display: block; margin-top: .3rem; font-weight: 700; }

/* --- 36. Page consultant : dessin, étapes, calcul de marge -------------------- */
@media (min-width: 64rem) { .etapes.etapes-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dessin .d-retard { fill: #FBE3C4; stroke: #D97706; stroke-width: 1.2; }
.dessin .d-retard-t { fill: #9A3412; font-size: 12.5px; font-weight: 700; }
.dessin .d-faire-t { fill: var(--accent); font-size: 12.5px; font-weight: 700; }
.dessin .d-fait-p { fill: var(--vert); font-size: 12.5px; font-weight: 700; }
:root[data-theme="dark"] .dessin .d-retard { fill: #3D2408; stroke: #F59E0B; }
:root[data-theme="dark"] .dessin .d-retard-t { fill: #FDBA74; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dessin .d-retard { fill: #3D2408; stroke: #F59E0B; }
  :root:not([data-theme="light"]) .dessin .d-retard-t { fill: #FDBA74; }
}
.calcul {
  max-width: 46rem; margin: var(--t5) auto 0; padding: clamp(1.25rem, .9rem + 1.5vw, 2rem);
  border: 1px solid var(--accent-filet); border-radius: var(--r3); background: var(--carte); box-shadow: var(--ombre-1);
}
.calcul-choix { display: flex; justify-content: space-between; align-items: baseline; gap: var(--t3); font-weight: 700; }
.calcul-choix output { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); color: var(--accent); font-variant-numeric: tabular-nums; }
.calcul input[type=range] { width: 100%; margin: var(--t3) 0 var(--t4); accent-color: var(--accent); height: 2rem; }
.calcul-res { margin: 0; display: grid; gap: .25rem; }
.calcul-res > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--t3); padding: .65rem 0; border-bottom: 1px solid var(--filet); }
.calcul-res dt { color: var(--encre-douce); }
.calcul-res dd { margin: 0; font-weight: 700; color: var(--encre); text-align: right; white-space: nowrap; }
.calcul-res .calcul-marge { border-bottom: 0; }
.calcul-res .calcul-marge dt { color: var(--encre); font-weight: 700; }
.calcul-res .calcul-marge dd { color: var(--vert); font-size: 1.2rem; white-space: normal; }
.calcul-blanche { margin: var(--t3) 0 0; text-align: center; font-weight: 600; color: var(--accent); }
@media (max-width: 30rem) {
  .calcul-res > div { flex-direction: column; gap: .15rem; }
  .calcul-res dd { text-align: left; }
}

/* Les sujets écartés du plan : une liste de noms, dans le volet replié. */
.liste-ecartes { list-style: none; margin: var(--t3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.liste-ecartes li { padding: .3rem .8rem; border: 1px solid var(--filet); border-radius: var(--rp); color: var(--encre-douce); font-size: .92rem; }
.plan-ecartes, .releve-ecartes { margin-top: var(--t5); }

/* Le tableau de bord : les nouveaux textes du plan, pas encore ouverts. */
.bord-nouveaux h2 { color: var(--accent); }
.liste-nouveaux { list-style: none; margin: var(--t4) 0 0; padding: 0; display: grid; gap: var(--t2); }
.liste-nouveaux a {
  display: grid; gap: .2rem; padding: var(--t3) var(--t4);
  border: 1px solid var(--filet); border-left: 3px solid var(--accent); border-radius: var(--r2);
  background: var(--carte); color: var(--encre-douce); text-decoration: none;
}
.liste-nouveaux a:hover { border-color: var(--accent); }
.liste-nouveaux .avis-titre { font-size: 1rem; overflow-wrap: anywhere; }
.liste-nouveaux .avis-separateur { padding: .4rem 0; background: none; border: 0; }

/* --- Accueil, « Un outil qui répond à vos besoins » (2 novembre 2026) ------
   Texte plus petit et justifié, à la demande d'Axel ; les normes (ISO,
   MASE, Qualiopi) vivent dans l'onglet « Responsable QHSE ». */
/* Justifié dès que les colonnes sont assez larges ; au téléphone, deux
   colonnes étroites justifiées font de grands trous entre les mots. */
/* Une seule règle pour le texte courant des pages publiques (3 novembre
   2026, « il faut une cohérence ») : justifié dès que la colonne est assez
   large, aligné à gauche au téléphone. Les titres, les introductions
   centrées et les étiquettes ne bougent pas. */
@media (min-width: 40rem) {
  .zone-public .trait p, .zone-public .raison p, .zone-public .norme p,
  .zone-public .faq-reponse p, .zone-public .faq-reponse li,
  .zone-public .bande-finale .mentions, .zone-public .lecture, .zone-public .reserve,
  .zone-public .etape p, .zone-public .piece p, .zone-public .legende li,
  .zone-public .formule-donne li, .zone-public .normes-intro,
  .zone-public .installation p, .zone-public .resultat .note-source {
    text-align: justify; hyphens: auto;
  }
}
#profil-dirigeant .trait h3, #profil-qhse .trait h3, #profil-consultant .trait h3 { font-size: 1.05rem; text-align: left; hyphens: manual; }
#profil-dirigeant .trait p, #profil-qhse .trait p, #profil-consultant .trait p { font-size: .95rem; }
.normes-onglet { margin-top: var(--t6); }
.normes-onglet .normes-intro { max-width: 60ch; margin: 0 auto var(--t4); font-size: .98rem; text-align: center; }
.normes-onglet .norme p { font-size: .93rem; }
a.puce-fixe { text-decoration: none; color: inherit; }
/* Le titre de l'accueil et sa phrase, plus petits (2 novembre 2026). */
.heros-accueil h1 { font-size: clamp(1.95rem, 1rem + 3.7vw, 3.6rem); max-width: 22ch; }
.heros-accueil .heros-sous { font-size: clamp(.98rem, .94rem + .3vw, 1.12rem); max-width: 64ch; }
/* « Démarrer un abonnement », plus petit (2 novembre 2026). */
.heros-abonnement h1 { font-size: clamp(1.9rem, 1rem + 3.2vw, 3.2rem); }
/* Accueil (2 novembre 2026) : la question de fin plus petite ; les chiffres
   de la bande blanche aussi ; « Découvrir l'offre » sous chaque profil. */
.bande-accueil h2 { max-width: 24ch; font-size: clamp(1.6rem, 1rem + 2.2vw, 2.4rem); }
.rail-item .chiffre { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.3rem); }
.rail-item .legende { font-size: .93rem; }
.offre-profil { margin-top: var(--t5); }
/* « Pourquoi nous », cinq raisons : trois puis deux au bureau. Cinq de front
   faisaient des colonnes trop étroites pour un texte justifié. */
@media (min-width: 64rem) {
  .raisons-cinq { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .raisons.raisons-cinq > li { grid-column: span 2; }
  .raisons.raisons-cinq > li:nth-child(4), .raisons.raisons-cinq > li:nth-child(5) { grid-column: span 3; }
}
/* Moins d'espace entre les parties des pages publiques (3 novembre 2026,
   « l'espace est trop important »). */
.zone-public .section { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.zone-public .bande-finale { padding-block: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem); }
/* « Pourquoi nous » sur l'accueil : deux et deux, assez large pour un texte justifié. */
@media (min-width: 64rem) {
  .raisons.raisons-deux { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; margin-inline: auto; }
}
/* Présentation (3 novembre 2026) : dans les parties blanches, tout le texte
   est centré — les étapes, « Votre plan, à son rythme », les encadrés. */
[data-page="presentation"] main > section.section:not(.section-tein):not(.installation) :is(h2, h3, p, li) { text-align: center; hyphens: manual; }
[data-page="presentation"] .etape { align-items: center; }
[data-page="presentation"] .reserve-seule { max-width: 42rem; margin-inline: auto; }
[data-page="presentation"] .reserve-seule .reserve { margin: 0; }
/* Présentation : les cinq étapes, sous le titre, centrées comme le reste. */
[data-page="presentation"] .heros .etapes { margin-top: var(--t5); }
[data-page="presentation"] .heros .etape { align-items: center; }
[data-page="presentation"] .heros .etape :is(h3, p) { text-align: center; hyphens: manual; }
/* Présentation : six étapes, trois par rangée au bureau ; pas de flèche en
   bout de rangée. */
@media (min-width: 64rem) {
  .etapes.etapes-six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--t5) var(--t4); }
  .etapes-six .etape:nth-child(3)::after { display: none; }
}
/* Accueil, « Pourquoi nous » : le numéro centré dans sa carte, et le titre avec lui. */
.raisons-deux .raison .numero { margin-inline: auto; }
.raisons-deux .raison h3 { text-align: center; }
.zone-public .raisons-deux .raison p { text-align: center; hyphens: manual; }
/* Le nom de l'offre tient sur une seule ligne, jusqu'au téléphone. */
.formule { container-type: inline-size; }
.nom-offre { white-space: nowrap; text-transform: none; letter-spacing: 0; font-weight: 700;
             font-size: clamp(.66rem, 3.6cqi, .95rem); }
@media (max-width: 22rem) { .nom-offre { font-size: 3.6cqi; } }
/* Accueil : les chiffres (732, 44, 22, ISO) et leurs légendes, centrés. */
.rail-item { text-align: center; padding-left: 0; }
.rail-item::before { display: none; }
.rail-item .legende { margin-inline: auto; }
/* Un nom trop long pour une ligne lisible (l'offre 03) passe à la ligne, à la taille des autres. */
.nom-offre-long { white-space: normal; }
/* « Une question avant de vous abonner ? » : plus petit, sur une seule ligne
   (accueil et page S'abonner). */
.bande-finale h2, .bande-accueil h2 { max-width: none; white-space: nowrap; font-size: clamp(.95rem, .55rem + 1.6vw, 1.9rem); }
/* Offres : toutes les lignes en gras, de la même couleur (3 novembre 2026). */
.formule-donne li, .formule-donne li:first-child { font-weight: 700; color: var(--encre); }
/* « Installer l'application » à la taille de « Une question avant de vous abonner ? ». */
.installation h2 { font-size: clamp(.95rem, .55rem + 1.6vw, 1.9rem); }

/* --- Réglages, version professionnelle (3 novembre 2026) -------------------
   Des cartes par thème ; dans chacune, une ligne par champ (intitulé à
   gauche, champ à droite), séparées par un filet. Onglets soulignés, barre
   d'enregistrement en bas. Au téléphone, l'intitulé passe au-dessus. */
[data-page="reglages"] .tete-reglages { padding-bottom: 0; }
[data-page="reglages"] .tete-reglages h1 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem); margin: 0; }
.rg-chapeau { margin: .4rem 0 0; font-size: .95rem; color: var(--encre-douce); }
.rg-onglets { display: flex; gap: 1.5rem; margin-top: var(--t4); border-bottom: 1px solid var(--filet); }
.rg-onglets button {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: .6rem 0; font: inherit; font-size: .95rem; color: var(--encre-douce); cursor: pointer;
}
.rg-onglets button:hover { color: var(--encre); }
.rg-onglets button[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--accent); font-weight: 500; }
.rg-onglets button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.rg-onglets button.hors-formule { opacity: .55; }
.rg-volet { padding-top: var(--t4); }
.rg-form { display: grid; gap: var(--t4); max-width: 52rem; }
.rg-carte { border: 1px solid var(--filet); border-radius: 12px; background: var(--carte); overflow: hidden; }
.rg-tete { padding: 1rem 1.25rem .9rem; border-bottom: 1px solid var(--filet); }
.rg-tete h2 { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.rg-tete p { margin: .2rem 0 0; font-size: .86rem; color: var(--encre-douce); line-height: 1.45; }
.rg-facultatif {
  display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border: 1px solid var(--filet);
  border-radius: 999px; font-size: .72rem; font-weight: 400; color: var(--encre-douce); vertical-align: .1em;
}
.rg-ligne { display: grid; gap: .35rem; padding: .8rem 1.25rem; border-top: 1px solid var(--filet); }
.rg-tete + .rg-ligne { border-top: 0; }
.rg-libelle { font-size: .88rem; color: var(--encre); font-weight: 400; }
.rg-champ { min-width: 0; }
.rg-champ > input, .rg-champ > select {
  width: 100%; box-sizing: border-box; min-height: 2.4rem; padding: .45rem .7rem;
  border: 1px solid var(--filet-fort); border-radius: 8px; background: var(--papier);
  font: inherit; font-size: .92rem; color: var(--encre);
}
.rg-champ > input::placeholder { color: var(--encre-douce); opacity: .8; }
.rg-champ > input:focus, .rg-champ > select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-clair); }
.rg-aide { margin: .3rem 0 0; font-size: .8rem; color: var(--encre-douce); line-height: 1.45; }
.rg-aide:empty { display: none; }
.rg-champ.certifs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.rg-champ.certifs .certif { flex: 0 0 auto; padding: .35rem .7rem; border-radius: 999px; font-weight: 400; font-size: .86rem; gap: .4rem; }
.rg-champ.certifs .certif input { width: 1rem; height: 1rem; margin: 0; }
.rg-cases { padding: .4rem 1.25rem .8rem; }
@media (min-width: 46rem) { .rg-cases { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
[data-page="reglages"] .case { padding: .45rem 0; gap: .6rem; grid-template-columns: 1.05rem minmax(0, 1fr); }
[data-page="reglages"] .case input { width: 1.05rem; height: 1.05rem; margin-top: .15rem; }
[data-page="reglages"] .case .intitule { font-weight: 400; font-size: .9rem; }
[data-page="reglages"] .case .aide { font-size: .8rem; color: var(--encre-douce); }
.rg-champ.cases { gap: 0; }
.rg-barre {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem;
  padding: .75rem 0; background: var(--papier); border-top: 1px solid var(--filet);
}
.rg-barre .bouton { padding: .55rem 1.1rem; font-size: .9rem; }
.rg-etat { margin: 0 auto 0 0; font-size: .85rem; color: var(--encre-douce); }
.rg-note {
  max-width: 52rem; margin: 0 0 var(--t4); padding: .7rem 1rem; border: 1px solid var(--filet);
  border-left: 3px solid var(--ambre); border-radius: 8px; background: var(--carte);
  font-size: .86rem; color: var(--encre-douce);
}
.rg-note strong { color: var(--encre); font-weight: 600; }
.rg-alertes { display: grid; gap: var(--t4); }
.rg-apercu .apercu-courriel { margin: 1rem 1.25rem 1.25rem; }
@media (min-width: 46rem) {
  .rg-ligne { grid-template-columns: 14rem minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
  .rg-libelle { padding-top: .55rem; }
  .rg-ligne:has(.certifs) .rg-libelle, .rg-ligne:has(.cases) .rg-libelle { padding-top: .35rem; }
}
@media (min-width: 72rem) {
  .rg-alertes { grid-template-columns: minmax(0, 52rem) minmax(0, 1fr); align-items: start; }
  .rg-alertes .rg-ligne { grid-template-columns: 11rem minmax(0, 1fr); }
}

/* --- Mon plan : le tableau des textes (3 novembre 2026) --------------------
   Au bureau, un vrai tableau ; au téléphone, chaque texte devient une carte
   où chaque case porte son intitulé (data-titre). */
.tableau-plan { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau-plan th, .tableau-plan td { padding: .7rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet); }
.tableau-plan thead th { font-size: .85rem; font-weight: 500; color: var(--encre-tenue); border-bottom-color: var(--filet-fort); white-space: nowrap; }
.tableau-plan:not(.tableau-conformite) td:first-child { white-space: nowrap; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.tableau-plan td a { color: var(--encre); }
.tableau-plan .vers-releve { display: block; margin-top: .25rem; font-size: .82rem; color: var(--accent); }
.tableau-plan ul { margin: 0; padding-left: 1.1rem; }
.tableau-plan li + li { margin-top: .2rem; }
.tableau-plan [hidden] { display: none; }
.categorie-texte { display: inline-block; margin: 0 .3rem .3rem 0; padding: .1rem .55rem; border-radius: 999px;
  background: var(--accent-clair); color: var(--encre); font-size: .8rem; white-space: nowrap; }
@media (min-width: 48rem) {
  .tableau-plan td:nth-child(2) { width: 11rem; }
  .tableau-plan td:nth-child(3) { width: 38%; }
}
@media (max-width: 47.99rem) {
  .tableau-plan thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau-plan, .tableau-plan tbody, .tableau-plan tr, .tableau-plan td { display: block; width: 100%; }
  .tableau-plan tr { padding: .8rem .9rem; margin-bottom: .7rem; background: var(--carte); border: 1px solid var(--filet); border-radius: var(--r3); }
  .tableau-plan tr[hidden] { display: none; }
  .tableau-plan td { padding: .3rem 0; border: 0; white-space: normal !important; }
  .tableau-plan td::before { content: attr(data-titre); display: block; font-size: .78rem; color: var(--encre-tenue); }
}
.tableau-plan .precision { display: block; font-size: .8rem; color: var(--encre-tenue); }
.tableau-plan .lien-officiel { display: block; margin-top: .25rem; font-size: .82rem; color: var(--accent); }
.tableau-plan .lien-officiel svg { width: .8em; height: .8em; }
.tableau-plan:not(.tableau-conformite) td:first-child time { color: var(--encre); }

/* --- Conformité réglementaire (3 novembre 2026) ------------------------- */
.tableau-conformite select, .tableau-conformite input {
  width: 100%; font: inherit; font-size: .9rem; color: var(--encre);
  background: var(--carte); border: 1px solid var(--filet-fort); border-radius: var(--r1); padding: .4rem .55rem;
}
.tableau-conformite select[data-statut="conforme"] { border-color: var(--vert, #1f8a4c); }
.tableau-conformite select[data-statut="partiel"] { border-color: var(--ambre); }
.tableau-conformite select[data-statut="non_conforme"] { border-color: var(--rouge); }
.tableau-conformite .conf-etat { margin-top: .3rem; }
.tableau-conformite .conf-date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--encre-douce); }
.tableau-conformite .conf-date time { color: var(--encre); }
.conf-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.conf-form .conf-note { flex: 1 1 8rem; min-width: 0; }
.conf-form .bouton { padding: .4rem .8rem; font-size: .85rem; white-space: nowrap; }
@media (min-width: 48rem) {
  .tableau-conformite td:nth-child(1) { width: 9rem; }
  .tableau-conformite td:nth-child(2) { width: 21%; }
  .tableau-conformite td:nth-child(3) { width: 8.5rem; }
  .tableau-conformite td:nth-child(4) { width: 20%; }
  .tableau-conformite td:nth-child(5) { width: 11rem; }
  .tableau-conformite td:nth-child(6) { min-width: 13rem; }
}

/* Relevé : le texte courant justifié (3 novembre 2026), même règle que les
   pages publiques — justifié dès 40 rem, aligné à gauche au téléphone. */
@media (min-width: 40rem) {
  [data-page="releve"] main .lecture, [data-page="releve"] main .note-source,
  [data-page="releve"] .ligne-releve .quoi, [data-page="releve"] .texte-officiel,
  [data-page="releve"] .encart p, [data-page="releve"] .encart li,
  [data-page="releve"] .texte-ia p, [data-page="releve"] .texte-ia li {
    text-align: justify; hyphens: auto;
  }
}

/* Historiques du tableau de bord : un texte ouvert, sur la même grille qu'une
   ligne du registre (3 novembre 2026). */
.ligne-historique a {
  display: grid; gap: .3rem var(--t4); grid-template-columns: minmax(0, 1fr);
  padding: var(--t3) var(--t4); border-radius: var(--r2); color: inherit; text-decoration: none;
}
.ligne-historique a:hover { background: var(--carte-pale); }
.ligne-historique .titre { overflow-wrap: anywhere; }
.ligne-historique .corps { display: grid; gap: .2rem; }
@media (min-width: 46rem) { .ligne-historique a { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; } }

/* Mon plan : colonne « Applicable » et filtre par catégorie (3 novembre 2026). */
.tableau-plan tr.hors-filtre { display: none !important; }
.filtre-plan { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 var(--t3); }
.filtre-plan label { font-size: .9rem; color: var(--encre-douce); }
.filtre-plan select, .tableau-plan select.applicable {
  font: inherit; font-size: .9rem; color: var(--encre); background: var(--carte);
  border: 1px solid var(--filet-fort); border-radius: var(--r1); padding: .35rem .55rem;
}
.tableau-plan select.applicable { min-width: 7.5rem; }
.tableau-plan select.applicable[data-statut="applicable"] { border-color: var(--vert); }
.tableau-plan select.applicable[data-statut="sans_objet"] { border-color: var(--encre-tenue); }
.tableau-plan .applicable-etat { margin-top: .25rem; }

/* Conformité : l'état se voit d'un coup d'œil (3 novembre 2026). Conforme :
   coche verte et ligne teintée de vert ; partiel : ambre ; non conforme : rouge. */
.tableau-conformite tr[data-conformite] td:first-child { box-shadow: inset 4px 0 0 var(--teinte-conf); }
.tableau-conformite tr[data-conformite="conforme"] { --teinte-conf: var(--vert); --fond-conf: var(--vert-fond); }
.tableau-conformite tr[data-conformite="partiel"] { --teinte-conf: var(--ambre); --fond-conf: var(--ambre-fond); }
.tableau-conformite tr[data-conformite="non_conforme"] { --teinte-conf: var(--rouge); --fond-conf: var(--rouge-fond); }
.tableau-conformite tr[data-conformite] td { background: var(--fond-conf); }
.conf-marque { display: none; align-items: center; gap: .35rem; margin-bottom: .35rem; font-size: .85rem; font-weight: 600; color: var(--teinte-conf); }
.conf-marque svg { width: 1.15rem; height: 1.15rem; flex: none; }
.tableau-conformite tr[data-conformite] .conf-marque { display: flex; }
@media (max-width: 47.99rem) {
  .tableau-conformite tr[data-conformite] { background: var(--fond-conf); border-color: var(--teinte-conf); box-shadow: inset 4px 0 0 var(--teinte-conf); }
  .tableau-conformite tr[data-conformite] td, .tableau-conformite tr[data-conformite] td:first-child { background: none; box-shadow: none; }
}
.conf-compteurs .conf-vert { border-color: var(--vert); background: var(--vert-fond); }
.conf-compteurs .conf-vert .grand { color: var(--vert); }
.conf-compteurs .conf-rouge { border-color: var(--rouge); background: var(--rouge-fond); }
.conf-compteurs .conf-rouge .grand { color: var(--rouge); }

/* --- Mon compte, plus sobre (3 novembre 2026, demandé par Axel) -----------
   Un titre à taille normale, des cartes aux angles moins ronds, pas de
   triangles devant les réglages : une ligne par réglage, avec « Modifier ». */
[data-page="compte"] .compte-page { padding-top: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
[data-page="compte"] .compte-tete { max-width: 36rem; margin: 0 auto var(--t5); }
[data-page="compte"] .compte-tete h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); letter-spacing: -.02em; margin: 0; }
[data-page="compte"] .compte-tete .etat-compte { margin: .4rem 0 0; color: var(--encre-tenue); font-size: .95rem; }
[data-page="compte"] .compte-tete .etat-compte:empty { display: none; }
[data-page="compte"] .connexion-seule { max-width: 36rem; }
[data-page="compte"] .carte-connexion { border-radius: var(--r2); box-shadow: none; padding: clamp(1.2rem, .9rem + 1.2vw, 1.75rem); }
[data-page="compte"] .carte-connexion h2 { font-size: 1.08rem; font-weight: 600; margin: 0 0 var(--t3); letter-spacing: 0; }
[data-page="compte"] #compte-principal > * + * { margin-top: var(--t3); }
[data-page="compte"] .compte-connecte { margin: 0 0 var(--t3); font-size: .9rem; color: var(--encre-tenue); }
[data-page="compte"] .compte-connecte .compte-adresse { color: var(--encre); font-weight: 500; }
[data-page="compte"] .compte-entreprise { font-size: 1.3rem; margin: 0 0 .25rem; }
[data-page="compte"] #entreprise-role, [data-page="compte"] #entreprise-formule { margin: 0; font-size: .95rem; color: var(--encre-douce); }
[data-page="compte"] #entreprise-ouvrir, [data-page="compte"] #entreprise-tarifs { width: 100%; justify-content: center; }
[data-page="compte"] .compte-sous-titre { margin: var(--t4) 0 0; font-size: .9rem; color: var(--encre-tenue); }

/* Inviter : l'adresse et le bouton sur une ligne. */
[data-page="compte"] .form-inviter { display: flex; gap: .5rem; }
[data-page="compte"] .form-inviter input {
  flex: 1; min-width: 0; font: inherit; font-size: .98rem; color: var(--encre);
  background: var(--fond); border: 1px solid var(--filet-fort); border-radius: var(--r1); padding: .6rem .8rem;
}
[data-page="compte"] .form-inviter .bouton { flex: none; }
[data-page="compte"] #etat-inviter:empty { display: none; }
[data-page="compte"] #equipe-liste:not(:empty) { margin-top: var(--t3); }

/* Paramètres du compte : une ligne par réglage. */
[data-page="compte"] .ligne-reglage { border-top: 1px solid var(--filet); }
[data-page="compte"] .ligne-reglage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; cursor: pointer; list-style: none; font-size: .98rem; color: var(--encre);
}
[data-page="compte"] .ligne-reglage summary::-webkit-details-marker { display: none; }
[data-page="compte"] .ligne-reglage summary::marker { content: ""; }
[data-page="compte"] .ligne-reglage .modifier { font-size: .9rem; color: var(--accent); font-weight: 500; }
[data-page="compte"] .ligne-reglage[open] .modifier { color: var(--encre-tenue); }
[data-page="compte"] .ligne-reglage[open] .modifier::before { content: "Fermer"; }
[data-page="compte"] .ligne-reglage[open] .modifier { font-size: 0; }
[data-page="compte"] .ligne-reglage[open] .modifier::before { font-size: .9rem; }
[data-page="compte"] .ligne-reglage form { padding: 0 0 var(--t3); }
[data-page="compte"] #compte-sortir { min-width: 12rem; }
[data-page="compte"] .ligne-reglage .champ label { font-weight: 400; font-size: .9rem; color: var(--encre-douce); }
[data-page="compte"] .ligne-reglage .champ input { border-radius: var(--r1); padding: .6rem .8rem; font-size: .98rem; min-height: 0; }
[data-page="compte"] .ligne-reglage .bouton, [data-page="compte"] #invitation-lien .bouton { font-size: .92rem; padding: .55rem 1.1rem; }
[data-page="compte"] #invitation-lien { border-radius: var(--r2); margin-top: var(--t3); }

/* Ma veille réglementaire : les rythmes en carrés compacts, comme les
   indicateurs du tableau de bord (3 novembre 2026). */
.carres-rythmes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--t3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 64rem) { .carres-rythmes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.carres-rythmes > li { min-width: 0; }
.carte-rythme {
  display: flex; flex-direction: column; gap: .15rem; height: 100%;
  padding: var(--t3) var(--t4); background: var(--carte); color: inherit; text-decoration: none;
  border: 1px solid var(--filet); border-radius: var(--r3); box-shadow: var(--ombre-1);
  transition: border-color .18s ease, background-color .18s ease;
}
.carte-rythme:hover { border-color: var(--accent); }
.carte-rythme .etiq { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.carte-rythme .grand { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--encre); }
.carte-rythme .precision { display: block; font-size: .85rem; color: var(--encre-tenue); }
.carte-rythme.carte-vide { opacity: .6; pointer-events: none; box-shadow: none; }

/* Espace administrateur : même sobriété que « Mon compte » (3 novembre 2026). */
[data-page="admin"] .compte-page { padding-top: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
[data-page="admin"] .admin-tete { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--t3); margin: 0 0 var(--t4); }
[data-page="admin"] .compte-tete h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); letter-spacing: -.02em; margin: 0; }
[data-page="admin"] .compte-tete .etat-compte { margin: .4rem 0 0; color: var(--encre-tenue); font-size: .95rem; font-weight: 400; }
[data-page="admin"] .titre-section { font-size: 1.15rem; font-weight: 600; letter-spacing: 0; text-align: left; margin: var(--t5) 0 var(--t2); }
[data-page="admin"] .aide-bas { font-size: .88rem; text-align: left; margin: 0 0 var(--t3); }
[data-page="admin"] .carte-connexion { border-radius: var(--r2); box-shadow: none; padding: var(--t3) var(--t4); }
[data-page="admin"] .carte-connexion h2, [data-page="admin"] .carte-connexion h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .15rem; }
[data-page="admin"] .carte-connexion, [data-page="admin"] .carte-connexion p { font-size: .9rem; }
[data-page="admin"] .carte-connexion strong { font-weight: 600; }
[data-page="admin"] .admin-comptes li { padding: .55rem 0; }
[data-page="admin"] .admin-courriel { font-size: .92rem; }
[data-page="admin"] .admin-details { font-size: .82rem; }
[data-page="admin"] .carte-connexion select { font-size: .9rem; padding: .4rem .6rem; min-height: 0; border-radius: var(--r1); }
[data-page="admin"] .carte-connexion .bouton { font-size: .88rem; padding: .45rem 1rem; min-height: 0; }
[data-page="admin"] .carte-connexion .etiq, [data-page="admin"] .carte-connexion label { font-size: .82rem; font-weight: 500; }
[data-page="admin"] .admin-grille { gap: var(--t3); }
/* Mon compte : les intitulés de l'équipe plus petits aussi. */
[data-page="compte"] .admin-courriel { font-size: .95rem; }
[data-page="compte"] .admin-details { font-size: .84rem; }
[data-page="compte"] .admin-comptes li { padding: .6rem 0; }
[data-page="compte"] #compte-admin { font-size: .92rem; }
[data-page="admin"] #admin-app { font-size: .95rem; padding: .6rem 1.3rem; }

/* --- La page de paiement (3 novembre 2026) ------------------------------- */
[data-page="compte"] .fil { margin: 0 0 .6rem; font-size: .9rem; }
[data-page="compte"] .fil a { color: var(--encre-douce); text-decoration: none; }
[data-page="compte"] .fil a:hover { color: var(--accent); }
.paie-offre { margin: 0 0 var(--t3); font-size: 1.05rem; font-weight: 600; color: var(--encre); }
.paie-periodes { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.paie-periode { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--filet-fort); border-radius: var(--r1); cursor: pointer; }
.paie-periode:has(input:checked) { border-color: var(--accent); background: var(--accent-clair); }
.paie-periode input { margin: .25rem 0 0; accent-color: var(--accent); }
.paie-periode strong { display: block; font-weight: 600; font-size: .95rem; }
.paie-periode .precision { display: block; font-size: .85rem; }
.paie-periode .pastille-offre { display: inline-block; margin-top: .3rem; font-size: .72rem; }
.paie-total { margin: var(--t3) 0 .5rem; padding-top: var(--t3); border-top: 1px solid var(--filet); }
.paie-total > div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; font-size: .95rem; }
.paie-total dt { color: var(--encre-douce); }
.paie-total dd { margin: 0; color: var(--encre); }
.paie-total .paie-ttc dt, .paie-total .paie-ttc dd { font-weight: 600; color: var(--encre); font-size: 1.02rem; }
.paie-total .paie-mention dd { font-size: .82rem; color: var(--encre-tenue); }
.paie-moyens { list-style: none; margin: 0 0 var(--t3); padding: 0; display: grid; gap: .5rem; }
.paie-moyens li { display: flex; gap: .75rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--filet); border-radius: var(--r1); }
.paie-moyens strong { display: block; font-weight: 600; font-size: .95rem; }
.paie-moyens .precision { display: block; font-size: .85rem; }
.paie-icone { flex: none; width: 2.2rem; height: 2.2rem; border-radius: var(--r1); display: grid; place-items: center; background: var(--accent-clair); color: var(--accent); }
.paie-icone svg { width: 1.2rem; height: 1.2rem; }
.paie-cgv { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; cursor: pointer; }
.paie-cgv input { margin: .2rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex: none; }
#paie-payer { width: 100%; justify-content: center; }
#paie-payer.bouton-inactif { opacity: .45; cursor: not-allowed; }
#paie-compte p { margin: 0 0 .2rem; }
#paie-compte .rangee { display: flex; flex-wrap: wrap; gap: .5rem; }
#paie-dit:empty { display: none; }
@media (max-width: 26rem) { .paie-periodes { grid-template-columns: 1fr; } }
#paie-formulaire > * + * { margin-top: var(--t3); }
#paiement .carte-connexion p.precision, #paiement #paie-compte p { font-size: .88rem; color: var(--encre-tenue); }
#paiement #paie-compte p:first-child { font-size: 1rem; color: var(--encre); }

/* Présentation : « Ce que le site ne fait pas » en petit (3 novembre 2026). */
.ne-fait-pas .titre-section { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
.ne-fait-pas .reserve { font-size: .85rem; line-height: 1.55; padding: var(--t3) var(--t4); }
.ne-fait-pas .reserve strong { font-weight: 600; }
.ne-fait-pas .deux-colonnes { margin-top: var(--t3) !important; }

/* --- Le formulaire de contact (3 novembre 2026) -------------------------- */
.form-contact {
  max-width: 44rem; margin: var(--t5) 0 0; text-align: left;
  background: var(--carte); border: 1px solid var(--filet); border-radius: var(--r3);
  padding: clamp(1.2rem, .8rem + 1.6vw, 2rem);
}
.contact-grille { display: grid; gap: 0 var(--t3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .contact-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-large { grid-column: 1 / -1; } }
.form-contact .champ label { font-weight: 500; font-size: .88rem; color: var(--encre-douce); }
.form-contact .champ input, .form-contact .champ select, .form-contact .champ textarea {
  width: 100%; padding: .65rem .85rem; background: var(--papier); color: var(--encre);
  border: 1px solid var(--filet-fort); border-radius: var(--r1); font: inherit; font-size: .98rem;
}
.form-contact .champ textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.form-contact .champ select:focus-visible, .form-contact .champ textarea:focus-visible { border-color: var(--accent); outline-offset: 2px; }
.form-contact .requis { color: var(--accent); }
.contact-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-accord { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--encre-douce); cursor: pointer; }
.contact-accord input { margin: .2rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex: none; }
.form-contact .rangee { margin-top: var(--t4); }
.etat-contact { margin: var(--t3) 0 0; font-size: .9rem; }
.etat-contact:empty { display: none; }
.etat-contact.etat-erreur { color: var(--rouge); }
.contact-autre { margin: var(--t3) 0 0; font-size: .85rem; color: var(--encre-tenue); }
.contact-merci p { margin: 0 0 .4rem; }
.contact-merci:focus { outline: none; }
.admin-message .message-texte { margin: .4rem 0 .2rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; color: var(--encre); }
.admin-message.message-lu { opacity: .7; }
.admin-message .equipe-outils { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* Huit onglets dans l'espace (3 novembre 2026) : chacun sur une ligne, et plus
   serrés sur les écrans moyens, avant le repli en menu (76 rem). */
.zone-app .bandeau .menu a { white-space: nowrap; }
@media (min-width: 86.001rem) and (max-width: 96rem) {
  .zone-app .bandeau .menu { gap: .1rem; }
  .zone-app .bandeau .menu a { padding: .45rem .55rem; font-size: .86rem; }
}

/* --- Plan d'actions (3 novembre 2026) ------------------------------------- */
.tableau-actions input { width: 100%; min-width: 0; font: inherit; font-size: .88rem; color: var(--encre);
  background: var(--carte); border: 1px solid var(--filet-fort); border-radius: var(--r1); padding: .35rem .5rem; }
.tableau-actions input:disabled { opacity: .75; background: transparent; }
.tableau-actions .pa-etat { display: block; margin-bottom: .35rem; }
.tableau-actions .pa-boutons { display: flex; flex-wrap: wrap; gap: .35rem; }
.tableau-actions .bouton { font-size: .82rem; padding: .35rem .75rem; min-height: 0; }
.tableau-actions tr[data-etat="faite"] td { background: var(--vert-fond); }
.tableau-actions tr[data-etat="faite"] .pa-etat { color: var(--vert); font-weight: 600; }
.tableau-actions tr[data-etat="retard"] .pa-etat { color: var(--ambre); font-weight: 600; }
@media (min-width: 48rem) {
  .tableau-actions td:nth-child(1) { width: 8.5rem; }
  .tableau-actions td:nth-child(2) { width: 30%; }
  .tableau-actions td:nth-child(3) { width: 20%; }
  .tableau-actions td:nth-child(4) { width: 9.5rem; }
  .tableau-actions td:nth-child(5) { width: 9rem; }
  .tableau-actions td:nth-child(6) { width: 11rem; }
}
.pa-compteurs .conf-vert { border-color: var(--vert); background: var(--vert-fond); }
.pa-compteurs .conf-vert .grand { color: var(--vert); }
@media (max-width: 47.99rem) {
  .tableau-actions tr[data-etat="faite"] { background: var(--vert-fond); border-color: var(--vert); }
  .tableau-actions tr[data-etat="faite"] td { background: none; }
}

/* Mon plan : la colonne « Lu », la mention « Nouveau texte » (3 novembre 2026). */
.case-lu { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--encre-douce); cursor: pointer; white-space: nowrap; }
.case-lu input { width: 1.05rem; height: 1.05rem; accent-color: var(--vert); margin: 0; }
.tableau-plan tr.texte-lu .case-lu { color: var(--vert); font-weight: 600; }
.tableau-plan .marque-nouveau { display: inline-block; margin: 0 .4rem .3rem 0; vertical-align: middle; }
.tableau-plan .marque-nouveau[hidden] { display: none; }
.textes-attente {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem;
  margin: 0 0 var(--t3); padding: .45rem .85rem; border: 1px solid var(--filet);
  border-left: 3px solid var(--accent); border-radius: 8px; background: var(--carte);
  font-size: .9rem; line-height: 1.4; color: var(--encre);
}
.textes-attente:empty { display: none; }
.textes-attente .ta-nombre { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-fonce); }
.textes-attente .ta-aide { flex-basis: 100%; color: var(--encre-douce); font-size: .82rem; }
.textes-attente.tout-lu { border-left-color: var(--vert); }
.textes-attente.tout-lu .ta-libelle::before { content: "✓"; margin-right: .4rem; color: var(--vert); font-weight: 600; }

/* --- Nous contacter, en deux colonnes (3 novembre 2026) ------------------
   Une seule échelle de texte : titre, texte, intitulés, champs et bouton
   gardent les mêmes tailles d'un écran à l'autre (le titre n'est plus plus
   petit que le texte au téléphone). */
.section-contact { background: var(--degrade-heros); }
.contact-page { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) { .contact-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } }
.contact-intro { padding-top: .25rem; }
.contact-surtitre { margin: 0 0 .6rem; font-size: .875rem; font-weight: 600; color: var(--accent); letter-spacing: 0; text-transform: none; }
.section-contact h1, .section-contact h2 { margin: 0; font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.4rem); line-height: 1.2; letter-spacing: -.02em;
  white-space: normal; max-width: 20ch; text-align: left; }
.contact-texte { margin: var(--t3) 0 0; font-size: 1rem; line-height: 1.6; color: var(--encre-douce); max-width: 40ch; text-align: left; }
.contact-infos { list-style: none; margin: var(--t5) 0 0; padding: 0; display: grid; gap: var(--t3); }
.contact-infos li { display: flex; gap: .85rem; align-items: center; }
.contact-icone { flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--r1); display: grid; place-items: center;
  background: var(--carte); border: 1px solid var(--filet); color: var(--accent); }
.contact-icone svg { width: 1.15rem; height: 1.15rem; }
.contact-etiquette { display: block; font-size: .8rem; color: var(--encre-tenue); }
.contact-infos a { font-size: .95rem; font-weight: 500; color: var(--encre); text-decoration: none; }
.contact-infos a:hover { color: var(--accent); text-decoration: underline; }

.section-contact .form-contact { max-width: none; margin: 0; padding: clamp(1.25rem, .9rem + 1.5vw, 2rem);
  border-radius: var(--r3); box-shadow: var(--ombre-1); }
.section-contact .form-contact .champ { margin-bottom: var(--t3); }
.section-contact .form-contact .champ label { margin-bottom: .35rem; font-size: .875rem; font-weight: 500; color: var(--encre); }
.section-contact .form-contact .champ input, .section-contact .form-contact .champ select, .section-contact .form-contact .champ textarea {
  font-size: .95rem; line-height: 1.4; padding: .7rem .85rem; height: auto; border-radius: var(--r1); background: var(--papier); }
.section-contact .form-contact .champ select { appearance: none; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23716f8a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 1rem; }
.section-contact .form-contact .champ textarea { min-height: 9rem; }
.section-contact .contact-accord { font-size: .85rem; line-height: 1.5; color: var(--encre-douce); }
.section-contact .form-contact .rangee { margin-top: var(--t4); }
.section-contact .form-contact button[type=submit] { width: 100%; justify-content: center; font-size: .95rem; font-weight: 600; padding: .8rem 1.4rem; }
.section-contact .contact-autre { margin: var(--t3) 0 0; font-size: .8rem; color: var(--encre-tenue); text-align: left; }
.section-contact .contact-merci { padding: clamp(1.25rem, .9rem + 1.5vw, 2rem); }
.section-contact .contact-merci p { font-size: .95rem; }

/* --- Bas de page, sobre (3 novembre 2026, demandé par Axel) --------------
   Comme sur la plupart des sites : petites colonnes de liens, intitulés
   discrets, une ligne légale fine en bas. Tailles fixes, qui ne grandissent
   plus avec l'écran. */
.pied { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) 1.25rem; font-size: .85rem; }
.pied-grille { gap: 1.75rem; }
@media (min-width: 48rem) { .pied-grille { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.pied .marque { font-size: 1.05rem; margin-bottom: .6rem; }
.pied .marque svg { width: 1.15rem; height: 1.15rem; }
.pied-grille p { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--encre-tenue); max-width: 30ch; }
.pied-grille p + p { margin-top: .6rem !important; }
.pied h2 { font-size: .82rem; font-weight: 600; letter-spacing: 0; margin: 0 0 .7rem; color: var(--encre); }
.pied ul { margin: 0; }
.pied li { margin-bottom: .45rem; font-size: .82rem; line-height: 1.4; }
.pied a { color: var(--encre-tenue); }
.pied a:hover { color: var(--accent); text-decoration: none; }
.pied-bas { margin-top: 1.75rem; padding-top: 1rem; gap: .5rem; font-size: .76rem; color: var(--encre-tenue); }
.pied-bas p { margin: 0; line-height: 1.5; text-align: left !important; }
.pied-legal { gap: .3rem 1.1rem; align-items: center; }
.pied-legal a { text-decoration: none; }
.pied-legal a:hover { text-decoration: underline; }
@media (min-width: 48rem) { .pied-legal > span { margin-right: auto; } }
.pied-court { padding-block: 1rem; }
@media (max-width: 47.99rem) {
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}

/* --- Bas de page, version 2 (3 novembre 2026) ----------------------------
   Un pied sombre, comme sur la plupart des sites de logiciels : la marque et
   une phrase à gauche, trois colonnes de liens, une barre légale fine. Le
   même dans les deux thèmes (un cran plus sombre que la page en thème sombre). */
:root { --pied-fond: #15132b; --pied-texte: rgba(255, 255, 255, .66); --pied-titre: #fff; --pied-filet: rgba(255, 255, 255, .12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pied-fond: #0c0b18; } }
:root[data-theme="dark"] { --pied-fond: #0c0b18; }
.pied { background: var(--pied-fond); color: var(--pied-texte); border-top: 0;
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) 1.25rem; font-size: .85rem; }
.pied a { color: var(--pied-texte); }
.pied a:hover { color: #fff; text-decoration: none; }
.pied .marque { color: var(--pied-titre); font-size: 1.1rem; margin-bottom: .75rem; }
.pied-grille { gap: 2rem; }
@media (min-width: 48rem) { .pied-grille { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.pied-marque p { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--pied-texte); max-width: 34ch; }
.pied-marque .pied-contact { margin-top: .9rem !important; }
.pied-marque .pied-contact a { color: var(--pied-titre); }
.pied h2 { font-size: .8rem; font-weight: 600; color: var(--pied-titre); margin: 0 0 .9rem; letter-spacing: .01em; }
.pied li { margin-bottom: .55rem; font-size: .85rem; }
.pied-bas { margin-top: 2.25rem; padding-top: 1.1rem; border-top: 1px solid var(--pied-filet);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1.5rem;
  font-size: .78rem; color: var(--pied-texte); }
.pied-bas p { margin: 0; }
.pied-legal { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; }
.pied-legal a { text-decoration: none; }
.pied-legal a:hover { text-decoration: underline; color: #fff; }
.pied-court { padding-block: 1.1rem; }
.pied-court .pied-bas { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 47.99rem) {
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .pied-grille > .pied-marque { grid-column: 1 / -1; }
  .pied-grille > :last-child { grid-column: auto; }
  .pied-grille > :last-child ul { columns: 1; }
  .pied-bas { flex-direction: column; align-items: flex-start; }
}
.pied .marque svg { filter: brightness(1.7) saturate(1.1); }

/* --- Connexion, en écran de connexion classique (3 novembre 2026) -------- */
/* Écrans d'accès (3 novembre 2026) : deux colonnes au bureau. */
.auth-ecran { display: grid; min-height: calc(100vh - 8.5rem); background: var(--papier); }
.auth-marque { display: none; }
.auth-zone { display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; }
.auth-boite { width: 100%; max-width: 24rem; margin: 0 auto; }
.auth-tete { margin-bottom: 1.5rem; }
.auth-tete h1 { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.auth-tete p { margin: .45rem 0 0; font-size: .92rem; color: var(--encre-douce); line-height: 1.5; }
.auth-carte { padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; max-width: none; }
.auth-carte .champ { margin: 0 0 1rem; }
.auth-carte .champ label { display: block; margin: 0 0 .35rem; font-size: .85rem; font-weight: 500; color: var(--encre); }
.auth-carte .champ label .aide { font-weight: 400; color: var(--encre-douce); font-size: .8rem; }
.auth-carte .champ input {
  width: 100%; box-sizing: border-box; height: 2.6rem; padding: 0 .8rem; font-size: .93rem;
  border: 1px solid var(--filet-fort); border-radius: 8px; background: var(--carte); color: var(--encre);
}
.auth-carte .champ input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-clair); }
.auth-libelle { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.auth-libelle a { font-size: .8rem; color: var(--accent); text-decoration: none; margin-bottom: .35rem; }
.auth-libelle a:hover { text-decoration: underline; }
.auth-bouton {
  display: flex; width: 100%; justify-content: center; margin-top: .4rem; height: 2.6rem; padding: 0 1rem;
  border-radius: 8px; font-size: .93rem; font-weight: 500;
}
.auth-carte .etat-compte { margin: .75rem 0 0; font-size: .85rem; }
.auth-carte .etat-compte:empty { display: none; }
.auth-carte .aide-bas { margin: 1rem 0 0; font-size: .78rem; color: var(--encre-douce); line-height: 1.5; }
.auth-carte .reserve { font-size: .85rem; }
.auth-pied { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--filet); font-size: .88rem; color: var(--encre-douce); }
.auth-pied + .auth-pied { margin-top: .5rem; padding-top: 0; border-top: 0; }
.auth-pied a { color: var(--accent); font-weight: 500; text-decoration: none; }
.auth-pied a:hover { text-decoration: underline; }
.auth-demo { font-size: .82rem; }
.auth-demo a { color: var(--encre-douce); font-weight: 400; }
@media (min-width: 60rem) {
  .auth-ecran { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .auth-marque {
    display: flex; align-items: center; padding: 3rem clamp(2rem, 4vw, 4rem);
    background: #14122B; color: #E8E6F5;
    background-image: radial-gradient(60rem 30rem at 0% 0%, rgba(110, 86, 255, .35), transparent 60%);
  }
  .auth-marque-corps { max-width: 26rem; }
  .auth-marque-sur { margin: 0; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #A99BFF; }
  .auth-marque-titre { margin: .75rem 0 0; font-size: 1.6rem; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; color: #FFFFFF; }
  .auth-points { margin: 1.75rem 0 0; padding: 0; list-style: none; display: grid; gap: .85rem; }
  .auth-points li { position: relative; padding-left: 1.6rem; font-size: .92rem; line-height: 1.5; color: #CFCBE6; }
  .auth-points li::before {
    content: ""; position: absolute; left: 0; top: .3rem; width: .95rem; height: .95rem; border-radius: 50%;
    background: rgba(169, 155, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23A99BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .7rem no-repeat;
  }
  .auth-marque-note { margin: 2rem 0 0; font-size: .78rem; color: #8F8AAE; }
}
.normes-sujet { margin: .3rem 0 .4rem; padding-left: 1.1rem; font-size: .9rem; }
.normes-sujet li + li { margin-top: .25rem; }
.normes-sujet strong { font-weight: 600; }
.actions-sujet { margin: 0; padding-left: 1.05rem; font-size: .88rem; color: var(--encre-douce); }
.actions-sujet li + li { margin-top: .25rem; }
.actions-sujet [hidden] { display: none; }

/* L'état d'une date dans les tableaux (3 novembre 2026) : une petite pastille
   lisible plutôt qu'une mention grise. */
.tableau-plan time { display: block; font-weight: 500; color: var(--encre); }
.etat-date { display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem; padding: .12rem .55rem;
  border-radius: 999px; font-size: .75rem; font-weight: 500; line-height: 1.5; white-space: nowrap;
  background: var(--carte-pale, rgba(0,0,0,.04)); color: var(--encre-douce); border: 1px solid var(--filet); }
.etat-date.etat-recent { background: var(--vert-fond); color: var(--vert); border-color: transparent; }
.etat-date.etat-recent::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.etat-date.etat-fond { margin-top: 0; }

/* Carrés par catégorie (3 novembre 2026), dans le style des indicateurs. */
.carres-categories { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 var(--t4); }
@media (min-width: 40rem) { .carres-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .carres-categories { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.carre-categorie { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; cursor: pointer;
  padding: .85rem 1rem; background: var(--carte); border: 1px solid var(--filet); border-radius: var(--r3); color: inherit; font: inherit;
  transition: border-color .18s ease, background-color .18s ease; }
.carre-categorie:hover { border-color: var(--accent); }
.carre-categorie[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-clair); }
.carre-categorie:disabled { opacity: .5; cursor: default; }
.carre-categorie .etiq { font-size: .78rem; }
.carre-categorie .grand { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--encre); }
.carre-categorie .precision { font-size: .8rem; color: var(--encre-tenue); }
.categorie-texte.cat-secondaire { display: none; }

/* La recherche dans les tableaux de textes (3 novembre 2026). */
.recherche-textes { display: grid; gap: .75rem 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end;
  margin: 0 0 var(--t3); padding: 1rem; background: var(--carte); border: 1px solid var(--filet); border-radius: var(--r3); }
@media (min-width: 56rem) { .recherche-textes { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; } }
.rt-champ { display: grid; gap: .3rem; min-width: 0; }
.rt-mot { grid-column: 1 / -1; }
@media (min-width: 56rem) { .rt-mot { grid-column: auto; } }
.rt-champ label { font-size: .8rem; font-weight: 500; color: var(--encre-douce); }
.rt-champ input, .rt-champ select { width: 100%; min-width: 0; font: inherit; font-size: .9rem; color: var(--encre);
  background: var(--papier); border: 1px solid var(--filet-fort); border-radius: var(--r1); padding: .5rem .65rem; }
.rt-effacer { justify-self: start; font-size: .85rem; padding-bottom: .55rem; text-decoration: underline; color: var(--accent); }

/* --- Espace consultant (3 novembre 2026) ----------------------------------
   Un tableau de bord de tous les clients : une ligne par société. Au
   téléphone, chaque société devient une carte. */
.cs-page { padding-top: clamp(2rem, 1.2rem + 3vw, 3rem); }
.cs-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: var(--t5); }
.cs-sur { margin: 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-fonce); }
.cs-tete h1 { margin: .2rem 0 0; font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.2rem); letter-spacing: -.02em; }
.cs-tete .etat-compte { margin: .35rem 0 0; color: var(--encre-douce); font-size: .92rem; }
.cs-bloc { margin-bottom: var(--t6); }
.cs-titre { margin: 0 0 var(--t3); font-size: 1.1rem; font-weight: 600; letter-spacing: 0; }
.cs-compteurs { margin: 0 0 var(--t4); }
.cs-cadre { border: 1px solid var(--filet); border-radius: 12px; background: var(--carte); overflow: hidden; }
.cs-tableau { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cs-tableau thead th { padding: .7rem 1rem; text-align: left; font-size: .78rem; font-weight: 500; color: var(--encre-douce); background: var(--papier-pale, var(--papier)); border-bottom: 1px solid var(--filet); }
.cs-tableau tbody th, .cs-tableau tbody td { padding: .85rem 1rem; text-align: left; vertical-align: middle; border-top: 1px solid var(--filet); }
.cs-tableau tbody tr:first-child th, .cs-tableau tbody tr:first-child td { border-top: 0; }
.cs-tableau tbody th { font-weight: 400; }
.cs-nom { display: block; font-weight: 600; color: var(--encre); }
.cs-detail { display: block; margin-top: .15rem; font-size: .78rem; color: var(--encre-douce); }
.cs-nombre { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-nombre.cs-attention { color: var(--accent-fonce); }
.cs-barre { display: inline-block; vertical-align: middle; width: 7rem; height: .45rem; border-radius: 999px; background: var(--filet); overflow: hidden; }
.cs-barre > span { display: block; height: 100%; border-radius: inherit; background: var(--vert); }
.cs-retard .cs-barre > span { background: var(--ambre); }
.cs-retard .cs-detail { color: var(--ambre); }
.cs-pct { margin-left: .6rem; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: middle; }
.cs-vide { color: var(--encre-douce); }
.cs-coupe { color: var(--encre-douce); font-style: italic; }
.cs-ouvrir { text-align: right !important; white-space: nowrap; }
.cs-ouvrir .bouton { padding: .4rem .9rem; font-size: .85rem; }
.cs-note { margin: var(--t3) 0 0; max-width: 60rem; font-size: .8rem; color: var(--encre-douce); line-height: 1.5; }
.cs-ajout h3 { margin: 0 0 var(--t2); font-size: 1.05rem; }
@media (max-width: 47.99rem) {
  .cs-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cs-tableau, .cs-tableau tbody, .cs-tableau tr, .cs-tableau th, .cs-tableau td { display: block; }
  .cs-tableau tbody tr { padding: .9rem 1rem; border-top: 1px solid var(--filet); }
  .cs-tableau tbody tr:first-child { border-top: 0; }
  .cs-tableau tbody th, .cs-tableau tbody td { padding: .35rem 0; border: 0; }
  .cs-tableau td[data-titre]::before { content: attr(data-titre); display: block; font-size: .75rem; color: var(--encre-douce); margin-bottom: .2rem; }
  .cs-ouvrir { text-align: left !important; padding-top: .6rem !important; }
  .cs-barre { width: 9rem; }
}
@media (max-width: 47.99rem) {
  .cs-compteurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .cs-compteurs .grand { font-size: 1.6rem; }
}
.cs-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.cs-liens a {
  display: inline-block; padding: .25rem .65rem; border: 1px solid var(--filet-fort); border-radius: 6px;
  font-size: .8rem; color: var(--encre); text-decoration: none; white-space: nowrap; background: var(--carte);
}
.cs-liens a:hover { border-color: var(--accent); color: var(--accent-fonce); }
.cs-tableau thead th:last-child { text-align: right; }
@media (max-width: 47.99rem) {
  .cs-liens { justify-content: flex-start; }
  .cs-liens a { white-space: normal; }
}
.bandeau-consultant .choix-client { margin: 0 .2rem; padding: .15rem .4rem; border: 1px solid var(--filet-fort); border-radius: 6px; background: var(--carte); color: var(--encre); font: inherit; font-size: .9em; }
/* Le dessin du tableau de bord consultant (4 novembre 2026). */
.dessin .d-piste { fill: var(--filet); }
.dessin .d-barre { fill: var(--vert); }
.dessin .d-barre-retard { fill: #D97706; }
.dessin .d-chiffre { fill: var(--encre); font-size: 15px; font-weight: 700; }
.dessin .d-chiffre-accent { fill: var(--accent-fonce); font-size: 15px; font-weight: 700; }
/* RGPD dans « Mon compte » (4 novembre 2026). */
.rgpd-bloc { padding: .25rem 0 .5rem; }
.rgpd-bloc .aide-bas { margin: 0 0 .75rem; }
.bouton-danger { color: var(--rouge); border-color: var(--rouge); }
.bouton-danger:hover { background: var(--rouge-fond); }

/* --- Télécharger un tableau (4 novembre 2026) ------------------------------ */
.export-barre { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .6rem; }
.export-libelle { font-size: .82rem; color: var(--encre-douce); margin-right: .2rem; }
.export-bouton {
  appearance: none; padding: .3rem .8rem; border: 1px solid var(--filet-fort); border-radius: 6px;
  background: var(--carte); color: var(--encre); font: inherit; font-size: .82rem; cursor: pointer;
}
.export-bouton:hover { border-color: var(--accent); color: var(--accent-fonce); }
.export-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.export-etat { font-size: .8rem; color: var(--encre-douce); }
#export-imprime { display: none; }
@media print {
  @page { size: A4 landscape; margin: 11mm 10mm 12mm; }
  body.export-impression { background: #fff !important; }
  body.export-impression > *:not(#export-imprime) { display: none !important; }
  body.export-impression #export-imprime { display: block; color: #15152B; font: 8.6pt/1.35 Inter, "Segoe UI", Arial, sans-serif;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #export-imprime .ei-tete { border-bottom: 2.5pt solid #4A2BE8; padding-bottom: 6pt; margin-bottom: 9pt; }
  #export-imprime .ei-marque { margin: 0; font-size: 8pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4A2BE8; }
  #export-imprime h1 { margin: 2pt 0 1pt; font-size: 16pt; line-height: 1.2; color: #15152B; }
  #export-imprime .ei-infos { margin: 0; font-size: 8.5pt; color: #5E5E79; }
  #export-imprime table { width: 100%; border-collapse: collapse; table-layout: auto; }
  #export-imprime thead { display: table-header-group; }
  #export-imprime th { background: #4A2BE8; color: #fff; text-align: left; font-weight: 600; font-size: 8pt;
    padding: 5pt 6pt; border: 0; }
  #export-imprime td { padding: 4.5pt 6pt; border-bottom: .6pt solid #E6E4F4; vertical-align: top; white-space: pre-line; }
  #export-imprime tbody tr:nth-child(even) td { background: #F7F6FF; }
  #export-imprime tr { break-inside: avoid; }
  #export-imprime .ei-pastille { display: inline-block; padding: 1pt 6pt; border-radius: 8pt; font-weight: 600; font-size: 7.8pt; white-space: nowrap; }
  #export-imprime .ei-vert { background: #E3F5EA; color: #11643A; }
  #export-imprime .ei-rouge { background: #FDE8E8; color: #A11D1D; }
  #export-imprime .ei-ambre { background: #FFF3DC; color: #8A5300; }
  #export-imprime .ei-pied { margin-top: 10pt; padding-top: 5pt; border-top: .6pt solid #E6E4F4; font-size: 7.5pt; color: #5E5E79; }
}
.rg-danger { border-color: color-mix(in srgb, var(--rouge) 35%, var(--filet)); max-width: 52rem; margin-top: var(--t4); }
.rg-danger .rg-tete h2 { color: var(--rouge); }
.marque .marque-suite { font-weight: 500; color: var(--encre-douce); }
/* « Vigie réglementaire » (4 novembre 2026) : sur téléphone, le nom tient à
   côté de « Connexion » et du menu. */
@media (max-width: 30rem) {
  .marque { font-size: 1.02rem; gap: .4rem; }
  .marque .sigle { width: 1.35rem; height: 1.35rem; }
  .bandeau-interieur { gap: .5rem; }
  .connexion-telephone { padding: .45rem .8rem; font-size: .88rem; }
}
@media (max-width: 24rem) {
  .marque { font-size: .94rem; gap: .3rem; letter-spacing: -.04em; }
  .marque .sigle { width: 1.2rem; height: 1.2rem; }
  .connexion-telephone { padding: .4rem .65rem; font-size: .84rem; }
}
@media (max-width: 21.5rem) { .marque .marque-suite { display: none; } }
/* Présentation : quatre captures, en 2 × 2 (4 novembre 2026). */
@media (min-width: 48rem) { .pieces { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ==========================================================================
   Harmonisation de tout le site (4 novembre 2026, demande d'Axel)
   --------------------------------------------------------------------------
   Une seule échelle pour tout le site : une taille de titre de page, une de
   titre de section, une de titre de carte ; des cartes aux mêmes arrondis,
   marges et espacements ; des textes alignés à gauche, sans coupure de mots ;
   et des pages qui occupent toute la largeur (Réglages, Mon compte, paiement,
   pages légales). Ce bloc vient en dernier : il l'emporte sur les réglages
   page par page posés plus haut.
   ========================================================================== */
:root {
  --h1-site: clamp(1.9rem, 1.45rem + 1.4vw, 2.6rem);
  --h2-site: clamp(1.4rem, 1.2rem + .7vw, 1.8rem);
  --h3-site: 1.1rem;
  --chapeau-site: clamp(1rem, .96rem + .25vw, 1.12rem);
  --rayon-carte: 12px;
  --marge-carte: clamp(1.15rem, 1rem + .5vw, 1.5rem);
  --ecart-cartes: clamp(.9rem, .75rem + .5vw, 1.25rem);
  --ombre-carte: 0 1px 2px rgba(16, 24, 40, .05);
}

/* --- Titres ---------------------------------------------------------------- */
h1, .heros h1, .tete-app h1, .cs-tete h1, .compte-tete h1, .auth-tete h1,
[data-page="reglages"] .tete-reglages h1, [data-page="compte"] .compte-tete h1, [data-page="admin"] h1 {
  font-size: var(--h1-site); line-height: 1.15; letter-spacing: -.025em; font-weight: 700;
}
.heros h1 { max-width: 28ch; }
h2, .titre-section { font-size: var(--h2-site); line-height: 1.2; letter-spacing: -.02em; }
h3 { font-size: var(--h3-site); line-height: 1.35; letter-spacing: -.01em; }
/* Les titres de carte (réglages, compte, cabinet, conformité) : la taille d'un h3. */
.rg-tete h2, .cs-titre, [data-page="compte"] .carte-connexion h2, .carte-connexion h2,
.ne-fait-pas .titre-section, [data-page="admin"] .titre-section { font-size: var(--h3-site); letter-spacing: -.01em; }
.heros-sous, .tete-app .lecture, .rg-chapeau, .auth-tete p, .cs-tete .etat-compte {
  font-size: var(--chapeau-site); line-height: 1.55;
}
.tete-app .lecture { max-width: 80ch; }
.heros { padding-block: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); }

/* --- Textes : à gauche, sans mots coupés ------------------------------------ */
.zone-public .trait p, .zone-public .raison p, .zone-public .norme p,
.zone-public .faq-reponse p, .zone-public .faq-reponse li,
.zone-public .lecture, .zone-public .reserve, .zone-public .piece p,
.zone-public .legende li, .zone-public .formule-donne li, .zone-public .normes-intro,
.zone-public .installation p, .zone-public .resultat .note-source,
main .lecture, main .note-source, main li, main p {
  text-align: left; hyphens: manual;
}
/* Ce qui est centré exprès le reste : en-têtes, étapes, titres de section. */
.heros-texte, .heros-sous, .titre-section, .intro.titre-section,
.zone-public .etape :is(h3, p), [data-page="presentation"] .heros .etape :is(h3, p),
.zone-public .raisons-deux .raison p { text-align: center; }
.formule-donne li { font-size: .95rem; line-height: 1.5; font-weight: 400; }
.formule-donne li:first-child { font-weight: 500; }

/* --- Cartes : mêmes arrondis, marges, ombre et espacements ------------------- */
.formule, .piece, .etape, .rg-carte, .carte-connexion, .admin-entreprise, .cs-cadre,
.raison, .trait, .norme, .compteurs > div, .faits > div, .reserve, .rg-note, .textes-attente {
  border-radius: var(--rayon-carte);
}
.formule, .piece, .etape, .carte-connexion, .admin-entreprise, .raison, .trait, .norme,
.compteurs > div, .faits > div {
  box-shadow: var(--ombre-carte);
}
.formule, .carte-connexion, .admin-entreprise, .raison, .trait, .norme { padding: var(--marge-carte); }
.compteurs > div, .faits > div { padding: clamp(1rem, .9rem + .4vw, 1.35rem) var(--marge-carte); }
.formules, .pieces, .admin-grille, .raisons, .normes, .etapes, .compteurs, .faits, .rg-form, .rg-alertes {
  gap: var(--ecart-cartes);
}
.compteurs .grand { font-size: clamp(1.6rem, 1.3rem + .9vw, 2.1rem); }
.compteurs dt { font-size: .74rem; letter-spacing: .06em; }
.reserve { padding: var(--marge-carte); }

/* --- Pleine largeur --------------------------------------------------------- */
/* Réglages : les cartes sur toute la largeur, deux par ligne au bureau. */
.rg-form, .rg-danger, .rg-note { max-width: none; }
@media (min-width: 72rem) {
  #form-entreprise { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #form-entreprise > :nth-child(n+3) { grid-column: 1 / -1; }
  #form-entreprise .rg-ligne { grid-template-columns: 12rem minmax(0, 1fr); }
  .rg-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rg-alertes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mon compte : l'en-tête et les cartes sur toute la largeur, en deux colonnes. */
[data-page="compte"] .compte-tete, [data-page="compte"] .connexion-seule { max-width: none; }
@media (min-width: 64rem) {
  [data-page="compte"] #compte-principal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ecart-cartes); align-items: start; }
  [data-page="compte"] #compte-principal > * + * { margin-top: 0; }
  [data-page="compte"] #compte-principal > :not(.carte-connexion):not(div) { grid-column: 1 / -1; }
  [data-page="compte"] #compte-principal > .rangee { grid-column: 1 / -1; }
}
/* Le paiement : récapitulatif et choix côte à côte. */
#paiement.connexion-seule { max-width: none; }
@media (min-width: 64rem) {
  #paie-formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ecart-cartes); align-items: start; }
  #paie-formulaire > :not(.carte-connexion) { grid-column: 1 / -1; }
}
/* Pages légales : le sommaire à gauche, le texte sur le reste de la largeur. */
.legal { max-width: none; }
@media (min-width: 64rem) {
  .legal { display: grid; grid-template-columns: 17rem minmax(0, 1fr); column-gap: clamp(2rem, 1rem + 3vw, 4rem); }
  .legal > * { grid-column: 2; }
  .legal > .legal-sommaire { grid-column: 1; grid-row: 1 / span 40; align-self: start; position: sticky; top: 6.5rem; }
  .legal-sommaire ol { columns: 1 !important; display: block; }
  .legal-sommaire li { margin: 0 0 .5rem; }
}
.legal-sommaire { border-radius: var(--rayon-carte); }
.legal-article h2 { font-size: var(--h2-site); }
.section-contact h1, [data-page="contact"] h1 { font-size: var(--h1-site); }
/* Télécharger un tableau : en haut à droite du tableau. */
.export-barre { justify-content: flex-end; }
.export-barre .export-etat { order: -1; margin-right: auto; }

/* Titres de rubrique (« Les textes de votre plan… ») : la taille d'un h2,
   pas plus grand que le titre de la page. */
.rubrique > .enveloppe > h2 { font-size: var(--h2-site); }
.rail-item .legende-detail { margin: .4rem 0 0; max-width: 36ch; font-size: .85rem; line-height: 1.5; color: var(--encre-douce); }
.rail-item, .rail-item .legende, .rail-item .legende-detail { text-align: center; margin-inline: auto; }

/* --- Mon compte, harmonisé avec Réglages (4 novembre 2026) ----------------- */
[data-page="compte"] .compte-page { padding-top: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
[data-page="compte"] .compte-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 1rem; max-width: none; margin: 0 0 var(--t4); text-align: left; }
[data-page="compte"] .compte-tete .compte-connecte { margin: .35rem 0 0; font-size: var(--chapeau-site); color: var(--encre-douce); }
[data-page="compte"] .compte-tete .compte-connecte .compte-adresse { color: var(--encre); font-weight: 500; }
.compte-tete-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.compte-tete-actions .bouton, .compte-actions .bouton { padding: .55rem 1.1rem; font-size: .9rem; width: auto; }
[data-page="compte"] #compte-principal { display: grid; gap: var(--ecart-cartes); align-items: start; }
@media (min-width: 64rem) { [data-page="compte"] #compte-principal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compte-col { display: grid; gap: var(--ecart-cartes); align-content: start; }
.compte-carte .rg-ligne { align-items: center; }
.compte-carte .rg-libelle { padding-top: 0 !important; }
.compte-corps { padding: 1rem 1.25rem; }
.compte-corps:not(:has(> :not([hidden]))) { display: none; }
.compte-actions { display: flex; gap: .5rem; flex-wrap: wrap; padding: .9rem 1.25rem 1.1rem; border-top: 1px solid var(--filet); }
.compte-actions:not(:has(> :not([hidden]))) { display: none; }
.compte-lignes { padding-block: .25rem; }
.compte-lignes .ligne-reglage { border-bottom: 1px solid var(--filet); }
.compte-lignes .ligne-reglage:last-child { border-bottom: 0; }
.compte-lignes .ligne-reglage summary { display: flex; justify-content: space-between; align-items: center; padding: .85rem 0; cursor: pointer; font-size: .93rem; list-style: none; }
.compte-lignes .ligne-reglage summary::-webkit-details-marker { display: none; }
.compte-lignes .ligne-reglage .modifier { font-size: .85rem; color: var(--accent); }
.compte-lignes .ligne-reglage[open] summary .modifier { color: var(--encre-douce); }
.compte-lignes .ligne-reglage > form, .compte-lignes .ligne-reglage > div { padding: 0 0 1rem; }
.compte-carte .champ label { font-size: .85rem; }
.compte-carte input[type="email"], .compte-carte input[type="password"], .compte-carte input[type="text"] {
  width: 100%; box-sizing: border-box; height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--filet-fort);
  border-radius: 8px; background: var(--papier); color: var(--encre); font: inherit; font-size: .92rem; }
.compte-carte .bouton { padding: .5rem 1rem; font-size: .88rem; }
.compte-carte .form-inviter { display: flex; gap: .5rem; }
.compte-carte .form-inviter .bouton { flex: none; }
[data-page="compte"] #compte-principal > .compte-reglages { grid-column: auto; }
[data-page="compte"] #entreprise-ouvrir, [data-page="compte"] #entreprise-tarifs { width: auto; }
[data-page="compte"] .compte-tete-actions .bouton { padding: .5rem 1rem; font-size: .88rem; }
.compte-carte .rg-champ, .compte-carte .rg-champ span { color: var(--encre); }
.compte-lignes .ligne-reglage { border-top: 0 !important; }
[data-page="compte"] #compte-principal > section.compte-reglages { grid-column: auto; }
[data-page="compte"] #entreprise-role, [data-page="compte"] #entreprise-formule, [data-page="compte"] #cabinet-statut { color: var(--encre); font-size: .95rem; }

/* ==========================================================================
   Téléphone (4 novembre 2026, « plus joli sur téléphone ») : des cartes de
   tableau compactes (le texte en tête, puis deux informations par ligne),
   des carrés deux par deux, un en-tête et un bandeau plus courts.
   ========================================================================== */
@media (max-width: 47.99rem) {
  /* Les tableaux devenus cartes */
  .tableau-plan tr { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .9rem; row-gap: .1rem;
    padding: .85rem .95rem; margin-bottom: .6rem; border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); }
  .tableau-plan tr[hidden], .tableau-plan tr.hors-filtre { display: none !important; }
  .tableau-plan td { padding: .35rem 0; min-width: 0; }
  .tableau-plan td::before { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .2rem; color: var(--encre-douce); }
  .tableau-plan td[data-titre="Référence et lien"], .tableau-plan td[data-titre="Texte"], .tableau-plan td[data-titre="Texte de référence"] {
    order: -1; grid-column: 1 / -1; padding-bottom: .55rem; margin-bottom: .2rem; border-bottom: 1px solid var(--filet) !important; font-size: .95rem; }
  .tableau-plan td[data-titre="Référence et lien"]::before, .tableau-plan td[data-titre="Texte"]::before,
  .tableau-plan td[data-titre="Texte de référence"]::before { display: none; }
  .tableau-plan td[data-titre="Actions à déclencher"], .tableau-plan td[data-titre="Action à mener"],
  .tableau-plan td[data-titre="Preuve ou commentaire"], .tableau-plan td[data-titre="Évaluation"],
  .tableau-plan td[data-titre="Validation"] { grid-column: 1 / -1; }
  .tableau-plan td[data-titre="Lu"]::before { visibility: hidden; }
  .tableau-plan td select, .tableau-plan td input:not([type="checkbox"]) { width: 100%; max-width: 100%; min-height: 2.4rem; font-size: .9rem; }
  .tableau-plan .etat-date, .tableau-plan .categorie-texte { font-size: .74rem; }
  .tableau-plan ul { font-size: .88rem; }
  .export-barre { margin-bottom: .5rem; }

  /* Les carrés, deux par deux */
  .compteurs, .faits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .compteurs > :last-child:nth-child(odd), .faits > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .compteurs > div, .faits > div { padding: .8rem .9rem; }
  .compteurs .grand { font-size: 1.45rem; }
  .compteurs dt { font-size: .64rem; letter-spacing: .05em; margin-bottom: .3rem; }
  .compteurs .precision { font-size: .76rem; }

  /* L'en-tête de l'application : les étiquettes de l'entreprise sur une ou deux lignes */
  .jalons { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: var(--t3); }
  .jalons li > span, .jalons li > a { display: inline-block; padding: .2rem .6rem; font-size: .74rem; }
  .tete-app { padding-block: 1.4rem .4rem; }
  .tete-app .lecture, .tete-app .chapeau { font-size: .95rem; }

  /* Le bandeau de démonstration, plus court */
  .bandeau-demo { padding-block: .55rem; font-size: .8rem; line-height: 1.45; }

  /* Des sections moins espacées */
  .section, .rubrique { padding-block: clamp(1.75rem, 1.2rem + 3vw, 2.5rem); }
  .rubrique > .enveloppe > h2 { margin-bottom: .9rem; }
}

/* --- Écrans d'accès, sur le modèle des autres pages (4 novembre 2026) ------ */
.auth-uni { padding-top: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.auth-uni .compte-tete { margin: 0 0 var(--t4); }
.auth-uni .compte-tete .compte-connecte { margin: .35rem 0 0; font-size: var(--chapeau-site); color: var(--encre-douce); }
.auth-grille { display: grid; gap: var(--ecart-cartes); align-items: start; }
@media (min-width: 64rem) { .auth-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.auth-uni .compte-corps { padding: 1.25rem 1.25rem 1.4rem; }
.auth-uni .auth-carte { max-width: none; }
.auth-uni .auth-pied { margin-top: 1.25rem; }
.auth-liste { list-style: none; margin: 0; padding: .25rem 1.25rem .5rem; }
.auth-liste li { padding: .8rem 0; border-bottom: 1px solid var(--filet); display: grid; gap: .2rem; }
.auth-liste li:last-child { border-bottom: 0; }
.auth-liste strong { font-size: .95rem; font-weight: 600; color: var(--encre); }
.auth-liste span { font-size: .88rem; color: var(--encre-douce); line-height: 1.5; }
.auth-note { margin: 0; padding: .8rem 1.25rem 1rem; border-top: 1px solid var(--filet); font-size: .8rem; color: var(--encre-douce); }
.auth-uni .carte-connexion.auth-carte { padding: 0; border: 0; box-shadow: none; background: none; border-radius: 0; }

/* Encadrés d'information (4 novembre 2026, « je n'aime pas la couleur marron ») :
   ils étaient en ambre, qui vire au brun en mode sombre. Ils prennent la
   teinte du site ; l'ambre reste aux seules alertes (retards). */
.reserve { background: var(--accent-clair); border-left: 3px solid var(--accent); color: var(--encre); }
.reserve a { color: var(--accent-fonce); }
.reserve.reserve-ok { border-left-color: var(--vert); }
.rg-note { border-left-color: var(--accent); }
.rail-item { padding-inline: .35rem; }
/* Cinq normes (ISO 9001 ajoutée le 4 novembre 2026) : cinq colonnes au bureau. */
@media (min-width: 80rem) { .normes { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .normes > :last-child { grid-column: auto !important; } }

/* « Nos sources », par famille (4 novembre 2026). */
.sources-familles { display: grid; gap: var(--ecart-cartes); margin-top: var(--t4); }
@media (min-width: 48rem) { .sources-familles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sources-famille { padding: var(--marge-carte); border: 1px solid var(--filet); border-radius: var(--rayon-carte); background: var(--carte); box-shadow: var(--ombre-carte); }
.sources-famille h3 { margin: 0 0 .75rem; font-size: 1rem; text-align: left !important; }
.sources-famille .sources-bande { margin: 0; justify-content: flex-start; max-width: none; }
.sources-note { margin: .8rem 0 0; font-size: .82rem; color: var(--encre-douce); text-align: left !important; }
.sources-famille .sources-bande li { flex: 0 0 auto; }
.sources-famille .sources-bande a { font-size: .86rem; padding: .35rem .8rem; }
/* Ma veille réglementaire : la phrase « N sujets s'appliquent chez… » n'est
   plus affichée (4 novembre 2026, demande d'Axel). Elle reste dans la page :
   les scripts y lisent le nombre de sujets. */
.tete-app .chapeau:has([data-plan-total]) { display: none; }

/* ==========================================================================
   Téléphone, pages publiques (4 novembre 2026, « plus professionnel ») :
   textes à gauche, chiffres en liste, cartes sur une colonne, compactes.
   ========================================================================== */
.heros-actions { margin-top: var(--t4); }
@media (max-width: 40rem) {
  /* L'en-tête des pages */
  .heros { padding-block: 2rem 2.25rem; }
  .heros-texte, .heros h1, .heros-sous { text-align: left !important; margin-inline: 0 !important; }
  .heros h1 { font-size: 1.85rem; line-height: 1.15; max-width: none; }
  .heros-sous { font-size: .98rem; line-height: 1.6; margin-top: .9rem; max-width: none; }
  .heros-actions { justify-content: flex-start; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
  .heros-actions .bouton { padding: .65rem 1.1rem; font-size: .92rem; }
  .collecte { justify-content: flex-start !important; text-align: left !important; font-size: .8rem; margin-top: 1rem; }

  /* Titres de section et introductions */
  .titre-section, .intro.titre-section, main .section h2.titre-section { text-align: left !important; margin-inline: 0 !important; max-width: none; }
  .intro.titre-section { font-size: .98rem; line-height: 1.55; margin-top: .6rem; }

  /* Les chiffres : une liste, le nombre à gauche */
  .rail { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  .rail-fil { display: none; }
  .rail-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start;
    padding: 1rem 0 !important; border-bottom: 1px solid var(--filet); text-align: left !important; }
  .rail-item:last-child { border-bottom: 0; }
  .rail-item .chiffre { grid-row: span 2; font-size: 1.75rem; line-height: 1.1; }
  .rail-item .legende, .rail-item .legende-detail { text-align: left !important; margin: 0 !important; max-width: none !important; }
  .rail-item .legende { font-weight: 600; color: var(--encre); font-size: .95rem; }
  .rail-item .legende-detail { margin-top: .25rem !important; font-size: .84rem; }

  /* Les cartes : une colonne, à gauche */
  .traits, .raisons, .raisons-deux, .pieces, .normes { grid-template-columns: minmax(0, 1fr) !important; gap: .75rem !important; }
  .raisons > :last-child:nth-child(odd), .pieces > :last-child:nth-child(odd) { grid-column: auto !important; }
  .raison { text-align: left !important; padding: 1.1rem 1.15rem !important; }
  .raison .numero { margin: 0 0 .5rem !important; }
  .zone-public .raison :is(h3, p), .zone-public .raisons-deux .raison p { text-align: left !important; }
  .raison h3 { font-size: 1.02rem; }
  .raison p, .trait p { font-size: .9rem; }
  .trait { padding: 1rem 1.1rem; background: var(--carte); border: 1px solid var(--filet); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); }
  .trait h3 { font-size: 1rem; }

  /* Les étapes de la Présentation : compactes, l'icône à gauche */
  .etapes { grid-template-columns: minmax(0, 1fr) !important; gap: .6rem !important; }
  .etape { display: grid !important; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .9rem; align-items: start;
    padding: 1rem 1.1rem !important; text-align: left !important; position: relative; }
  .etape .etape-icone { grid-row: span 2; margin: 0 !important; }
  .zone-public .etape :is(h3, p), [data-page="presentation"] .heros .etape :is(h3, p) { text-align: left !important; margin-inline: 0; }
  .etape h3 { font-size: .98rem; margin: 0 0 .25rem; padding-right: 1.5rem; }
  .etape p { font-size: .88rem; margin: 0; }
  .etape .etape-num { position: absolute; top: .8rem; right: .9rem; }
  .etapes .etape + .etape::before, .etapes .etape::after { display: none !important; }

  /* Les onglets Dirigeant / QHSE / Consultant */
  .bascule-trois button { font-size: .82rem; padding: .55rem .35rem; line-height: 1.2; }

  /* Présentation : ce qui était centré se lit à gauche */
  [data-page="presentation"] main > section.section:not(.section-tein):not(.installation) :is(h2, h3, p, li) { text-align: left !important; }
  .section-appel .rangee { justify-content: flex-start; }
}
@media (max-width: 40rem) {
  .rail-item { padding-left: 0 !important; padding-right: 0 !important; }
  .rail-item::before { display: none !important; }
  .rail-item .legende, .rail-item .legende-detail { padding: 0 !important; grid-column: 2; }
  .rail-item .chiffre { grid-column: 1; grid-row: 1 / span 2; }
  .heros-actions { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: .55rem !important; }
  .heros-actions .bouton { width: 100%; justify-content: center; text-align: center; margin: 0 !important; }
  .etape .etape-icone { align-self: start; margin-top: .1rem !important; }
}
@media (max-width: 40rem) {
  .heros .rangee.heros-actions { grid-template-columns: minmax(0, 1fr) !important; }
  .heros .rangee.heros-actions > .bouton { grid-column: 1 / -1 !important; }
  .rail-item { margin-inline: 0 !important; width: 100%; }
}

/* Colonne « Application » (4 novembre 2026). */
.etat-date.app-venir { background: var(--ambre-fond); color: var(--ambre); }
.etat-date.app-vigueur { background: var(--vert-fond); color: var(--vert); }
.tableau-plan .app-texte { color: var(--encre-douce); font-size: .88rem; }
.tableau-textes-plan td[data-titre="Application"] { white-space: nowrap; }
@media (max-width: 47.99rem) { .tableau-textes-plan td[data-titre="Application"] { white-space: normal; } }

/* --- Analyse synthétique de chaque texte (4 novembre 2026) ----------------- */
details.analyse { margin-top: .5rem; }
details.analyse > summary {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none;
  font-size: .82rem; font-weight: 600; color: var(--accent); padding: .2rem .6rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
details.analyse > summary::-webkit-details-marker { display: none; }
details.analyse > summary::before { content: "+"; font-weight: 700; width: .8em; text-align: center; }
details.analyse[open] > summary::before { content: "−"; }
details.analyse > summary:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
details.analyse > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.analyse-corps {
  margin-top: .5rem; padding: .75rem .9rem; border-radius: 10px; font-size: .88rem; line-height: 1.45;
  background: var(--carte, var(--papier)); border: 1px solid var(--filet, rgba(127,127,127,.25));
  border-left: 3px solid var(--accent); max-width: 46rem; white-space: normal; text-align: left;
}
.analyse-champs { margin: 0; display: grid; gap: .45rem; }
.analyse-champs > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .6rem; }
.analyse-champs dt { font-weight: 600; color: var(--encre-douce); font-size: .8rem; text-transform: none; }
.analyse-champs dd { margin: 0; color: var(--encre); }
.analyse-champs ul { margin: 0; padding-left: 1.1rem; }
.analyse-champs li { margin: .1rem 0; }
.analyse-note { margin: .6rem 0 0; font-size: .76rem; color: var(--encre-tenue); }
.analyse-ia:not([hidden]) { margin-top: .6rem; }
@media (max-width: 47.99rem) {
  .analyse-champs > div { grid-template-columns: 1fr; gap: .1rem; }
  .analyse-corps { padding: .65rem .7rem; }
}
@media print { details.analyse { display: none; } }

/* --- Barre d'export v2 : icônes, envoi par e-mail (4 novembre 2026) ------- */
.export-bouton { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .8rem; border-radius: 8px; font-weight: 600; }
.export-bouton svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.export-bouton-fort { background: var(--accent); border-color: var(--accent); color: #fff; }
.export-bouton-fort:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }
/* Le formulaire d'envoi : la même forme que la recherche au-dessus du tableau. */
.export-envoi { margin: 0 0 var(--t3) auto; max-width: 36rem; padding: 1rem; background: var(--carte);
  border: 1px solid var(--filet); border-radius: var(--r3); font: inherit; }
.export-envoi label { display: block; margin-bottom: .3rem; font-size: .8rem; font-weight: 500; color: var(--encre-douce); }
.export-envoi-ligne { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.export-envoi input { flex: 1 1 14rem; min-width: 0; font: inherit; font-size: .9rem; color: var(--encre);
  background: var(--papier); border: 1px solid var(--filet-fort); border-radius: var(--r1); padding: .5rem .65rem; }
.export-envoi input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.export-envoi input[aria-invalid="true"] { border-color: var(--rouge); }
.export-envoi .export-bouton { min-height: 0; padding: .5rem .95rem; font-size: .9rem; border-radius: var(--r1); }
.export-aide { margin: .6rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--encre-douce); }
@media (max-width: 47.99rem) {
  .export-barre { justify-content: stretch; }
  .export-barre .export-bouton { flex: 1 1 auto; justify-content: center; }
  .export-barre .export-etat { flex-basis: 100%; }
}

/* --- Partager le site : une rangée d'icônes discrète, en haut à gauche de
   l'accueil (4 novembre 2026). */
.partage-barre { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 var(--t4, 1.5rem); }
.partage-libelle { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); }
.partage-liens { display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.partage-icone { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1px solid var(--filet-fort); border-radius: 50%; background: var(--carte); color: var(--encre-douce); cursor: pointer;
  text-decoration: none; transition: color .15s, border-color .15s, background .15s; }
.partage-icone svg { width: 1rem; height: 1rem; }
.partage-liens .partage-icone:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.partage-icone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.partage-etat { font-size: .82rem; color: var(--vert); }
.partage-etat:empty { display: none; }
.heros-accueil .partage-barre { justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) { .partage-icone { transition: none; } }

/* --- Code promo (paiement, 4 novembre 2026) -------------------------------- */
.paie-promo { margin: .25rem 0 .75rem; }
.paie-promo label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.paie-promo-ligne { display: flex; gap: .5rem; }
.paie-promo input { flex: 1 1 auto; min-width: 0; padding: .5rem .7rem; border: 1px solid var(--filet-fort); border-radius: 8px;
  background: var(--papier); color: var(--encre); font: inherit; text-transform: uppercase; letter-spacing: .04em; }
.paie-promo input::placeholder { text-transform: none; letter-spacing: 0; }
.paie-promo .bouton { padding: .5rem 1rem; }
.paie-promo .precision:empty { display: none; }
.abo-promo { text-align: center; margin-top: var(--t4); }

/* --- Espace administrateur : statistiques (4 novembre 2026) ---------------- */
.admin-stats { --serie-1: #4A2BE8; --serie-2: #D97706; margin-bottom: var(--t6, 3rem); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .admin-stats { --serie-1: #8B7BFF; --serie-2: #D9862A; } }
:root[data-theme="dark"] .admin-stats { --serie-1: #8B7BFF; --serie-2: #D9862A; }
.admin-stats-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.admin-stats-tete .titre-section { margin: 0; }
.admin-periode { display: inline-flex; border: 1px solid var(--filet-fort); border-radius: 999px; padding: 3px; background: var(--carte); }
.admin-periode button { appearance: none; border: 0; background: none; color: var(--encre-douce); font: inherit; font-size: .85rem;
  font-weight: 600; padding: .35rem .85rem; border-radius: 999px; cursor: pointer; }
.admin-periode button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.admin-periode button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ecart-cartes, 1rem); margin: 1.25rem 0; }
.admin-tuiles > div { padding: 1rem 1.1rem; border: 1px solid var(--filet); border-radius: var(--rayon-carte, 14px); background: var(--carte); }
.admin-tuiles dt { font-size: .82rem; color: var(--encre-douce); }
.admin-tuiles dd { margin: .25rem 0 0; font-size: 1.9rem; font-weight: 700; color: var(--encre); font-variant-numeric: tabular-nums; }
.admin-graphes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ecart-cartes, 1rem); }
.admin-graphe { margin: 0; min-width: 0; }
.admin-graphe figcaption { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .6rem; }
.admin-graphe figcaption span { font-size: .82rem; color: var(--encre-douce); }
.graphe { position: relative; }
.graphe svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphe .g-grille { stroke: var(--filet); stroke-width: 1; }
.graphe .g-base { stroke: var(--filet-fort); stroke-width: 1; }
.graphe .g-axe { fill: var(--encre-tenue, var(--encre-douce)); font-size: 11px; font-variant-numeric: tabular-nums; }
.graphe .g-trait { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graphe .g-trait.s1 { stroke: var(--serie-1); } .graphe .g-trait.s2 { stroke: var(--serie-2); }
.graphe .g-aire.s1 { fill: var(--serie-1); opacity: .12; }
.graphe .g-repere { stroke: var(--encre-douce); stroke-width: 1; stroke-dasharray: 3 3; }
.graphe .g-point { stroke: var(--carte); stroke-width: 2; }
.graphe .g-point.s1 { fill: var(--serie-1); } .graphe .g-point.s2 { fill: var(--serie-2); }
.graphe .g-zone { cursor: crosshair; outline: none; }
.graphe .g-zone:focus-visible { outline: 2px solid var(--accent); }
.g-bulle { position: absolute; top: -.5rem; transform: translateY(-100%); pointer-events: none; z-index: 2; display: flex; flex-direction: column;
  gap: .15rem; padding: .5rem .7rem; border-radius: 8px; background: var(--encre); color: var(--papier); font-size: .8rem; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.g-bulle strong { font-size: .78rem; font-weight: 600; opacity: .85; }
.g-pastille { display: inline-block; width: .65rem; height: .65rem; border-radius: 3px; margin-right: .4rem; vertical-align: -.05rem; }
.g-pastille.s1 { background: var(--serie-1); } .g-pastille.s2 { background: var(--serie-2); }
.g-legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .5rem 0 0; font-size: .82rem; color: var(--encre-douce); }
.admin-chiffres { margin-top: .75rem; }
.admin-chiffres summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: .9rem; }
.admin-chiffres table { margin-top: .5rem; }
@media (max-width: 63.99rem) { .admin-graphes { grid-template-columns: 1fr; } }
@media (max-width: 47.99rem) { .admin-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-tuiles dd { font-size: 1.5rem; } }

/* --- Mon compte : réglages à bascule (e-mails, 4 novembre 2026) ------------ */
[data-page="compte"] .ligne-bascule label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: var(--t3, 1rem) 0; cursor: pointer; }
.ligne-bascule .lb-texte { display: flex; flex-direction: column; gap: .2rem; }
.ligne-bascule .lb-texte > span:first-child { font-weight: 600; color: var(--encre); }
.ligne-bascule .lb-aide { font-size: .85rem; color: var(--encre-douce); line-height: 1.45; }
.ligne-bascule input[role="switch"] { appearance: none; flex: none; width: 2.75rem; height: 1.55rem; border-radius: 999px; margin: 0;
  background: var(--filet-fort); position: relative; cursor: pointer; transition: background .15s; }
.ligne-bascule input[role="switch"]::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.ligne-bascule input[role="switch"]:checked { background: var(--accent); }
.ligne-bascule input[role="switch"]:checked::after { transform: translateX(1.2rem); }
.ligne-bascule input[role="switch"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ligne-bascule input[role="switch"]:disabled { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .ligne-bascule input[role="switch"], .ligne-bascule input[role="switch"]::after { transition: none; } }
#etat-recap:empty { display: none; }

/* --- Plan d'actions : délai proposé, délai dépassé (4 novembre 2026) ------- */
.tableau-actions tr[data-etat="retard"] .pa-delai { border-color: var(--rouge); color: var(--rouge); background: var(--rouge-fond); font-weight: 700; }
.tableau-actions tr[data-etat="retard"] .pa-etat { color: var(--rouge) !important; font-weight: 700; }
.tableau-actions tr[data-etat="retard"] td[data-titre="Délai de réalisation"]::after { content: "Délai dépassé"; display: block; margin-top: .25rem;
  font-size: .75rem; font-weight: 700; color: var(--rouge); }
.tableau-actions tr.pa-propose .pa-delai { border-style: dashed; border-color: var(--accent); }
.tableau-actions tr[data-etat="libre"]:not(.pa-propose) .pa-etat { color: var(--encre-douce); }
[data-page="compte"] #etat-recap { margin: 0 0 .75rem; font-size: .88rem; font-weight: 500; color: var(--vert); }

/* --- Ma veille réglementaire : un texte « Lu » se teinte de vert, comme un
   texte conforme au registre (4 novembre 2026). */
.tableau-textes-plan tr:has(input.lu:checked) td { background: var(--vert-fond); }
.tableau-textes-plan tr:has(input.lu:checked) td:first-child { box-shadow: inset 4px 0 0 var(--vert); }
.tableau-textes-plan tr:has(input.lu:checked) .case-lu { color: var(--vert); font-weight: 600; }
@media (max-width: 47.99rem) {
  .tableau-textes-plan tr:has(input.lu:checked) { background: var(--vert-fond); border-color: var(--vert); box-shadow: inset 4px 0 0 var(--vert); }
  .tableau-textes-plan tr:has(input.lu:checked) td, .tableau-textes-plan tr:has(input.lu:checked) td:first-child { background: none; box-shadow: none; }
}

/* --- Plan d'actions : une action validée se teinte de vert, comme un texte
   conforme ou lu (4 novembre 2026). */
.tableau-actions tr[data-etat="faite"] td { background: var(--vert-fond); }
.tableau-actions tr[data-etat="faite"] td:first-child { box-shadow: inset 4px 0 0 var(--vert); }
.tableau-actions tr[data-etat="faite"] .pa-etat { color: var(--vert); font-weight: 700; }
@media (max-width: 47.99rem) {
  .tableau-actions tr[data-etat="faite"] { background: var(--vert-fond); border-color: var(--vert); box-shadow: inset 4px 0 0 var(--vert); }
  .tableau-actions tr[data-etat="faite"] td, .tableau-actions tr[data-etat="faite"] td:first-child { background: none; box-shadow: none; }
}

/* --- Analyse synthétique sur toute la largeur du tableau (4 novembre 2026) -- */
details.analyse.analyse-deportee > .analyse-corps { display: none; }
.tableau-plan tr.analyse-ouverte > td { border-bottom-color: transparent; }
.tableau-plan tr.ligne-analyse > td { padding: 0 .75rem 1rem; }
.ligne-analyse .analyse-corps { position: relative; max-width: none; margin: 0; padding: 1.1rem 1.25rem 1rem; background: var(--carte);
  border: 1px solid var(--filet); border-left: 4px solid var(--accent); border-radius: var(--r3, 12px); box-shadow: var(--ombre-carte, none); }
.ligne-analyse .analyse-titre { margin: 0 6rem .85rem 0; font-weight: 700; font-size: .95rem; line-height: 1.4; color: var(--encre); }
.ligne-analyse .analyse-champs { gap: .55rem; }
.ligne-analyse .analyse-champs > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding-top: .55rem; border-top: 1px solid var(--filet); }
.ligne-analyse .analyse-champs > div:first-child { border-top: 0; padding-top: 0; }
.ligne-analyse .analyse-champs dd { max-width: 70ch; }
.ligne-analyse .analyse-fermer { position: absolute; top: .8rem; right: .9rem; appearance: none; border: 1px solid var(--filet-fort); background: var(--carte);
  color: var(--encre-douce); font: inherit; font-size: .8rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px; cursor: pointer; }
.ligne-analyse .analyse-fermer:hover { color: var(--accent); border-color: var(--accent); }
.ligne-analyse .analyse-fermer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tableau-textes-plan tr:has(input.lu:checked) + tr.ligne-analyse > td,
.tableau-conformite tr[data-conformite] + tr.ligne-analyse > td,
.tableau-actions tr[data-etat="faite"] + tr.ligne-analyse > td { background: transparent; box-shadow: none; }
@media (max-width: 47.99rem) {
  .tableau-plan tr.ligne-analyse { display: block !important; width: 100%; margin: -.35rem 0 .7rem; padding: 0; border: 0; background: none; box-shadow: none; }
  .tableau-plan tr.ligne-analyse[hidden] { display: none !important; }
  .tableau-plan tr.ligne-analyse > td { display: block; width: 100%; padding: 0; grid-column: 1 / -1; }
  .ligne-analyse .analyse-titre { display: none; }
  .tableau-plan tr.ligne-analyse > td::before { content: none !important; }
  .ligne-analyse .analyse-champs > div { grid-template-columns: 1fr; gap: .15rem; }
  .ligne-analyse .analyse-corps { padding-top: 2.6rem; }
}
@media print { tr.ligne-analyse { display: none !important; } }