/* ═══════════════════════════════════════════════════════════════════════════
   LE PRODUIT, par-dessus la feuille des maquettes (portail.css).
   Ce que la planche statique n'a pas : le tiroir qui se fixe, les menus qui
   s'ouvrent, les états de donnée, la page qui prend la fenêtre, les écrans
   étroits. Sept sections, dans cet ordre ; une règle nouvelle rejoint la
   sienne, jamais la fin du fichier (table des matières tenue le 05/09/2026).
     1. la page et la coque
     2. les composants (menu, modale, message, infobulle, pagination, segments,
        listes déroulantes, suggestions, tiroir, palette)
     3. les tableaux et les formulaires (dépliants, cases, intentions)
     4. les écrans (indicateurs, calendrier, personne, actualités, admin)
     5. les écrans étroits
     6. l'accueil : la page d'atterrissage
     7. les utilitaires : un mot pour un réglage (à la place des styles en ligne)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. la page et la coque ─────────────────────────────────────────────── */
.portail { border: none; min-height: 100vh; display: flex; flex-direction: column; }
.portail > .corps { flex: 1; }
.panneau, .col, .corps > * { min-width: 0; }
[hidden] { display: none !important; }

/* le logo : le symbole, dernier point en vert, et le mot dessiné */
.logo { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.logo svg { flex: none; }
.logo .pt-vert { fill: var(--vert); }
.logo__mot { display: inline-flex; align-items: baseline; gap: .38em; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
/* les règles du bandeau (.globale .marque span / b) ne touchent pas au logo : mêmes valeurs que le rendu de référence */
.logo__mot span, .globale .marque .logo__mot span { font-size: 15px; font-weight: 400; color: inherit; margin: 0; letter-spacing: .16em; }
.logo__mot b, .globale .marque .logo__mot b { font-size: 15px; font-weight: 800; letter-spacing: .12em; color: inherit; }
/* au repos le mot est légèrement voilé ; au survol, blanc pur (le symbole reste blanc) */
.globale .logo .logo__mot { color: #d6dbe6; transition: color .15s; }
.globale .logo:hover .logo__mot { color: #fff; }
.globale .marque { padding-right: 20px; }
/* le pied : le vrai logo Avenir Ferro (icône au-dessus du mot) se lit un peu plus grand que les autres */
.pied { padding-right: 104px; gap: 20px; }   /* la place du petit robot, en bas à droite : rien ne passe dessous */
/* « Propulsé par Ingeline » : le mot en petites capitales grises, le logotype en gris, qui reprend sa couleur au survol */
.pied .propulse { display: inline-flex; align-items: center; gap: 12px; color: var(--g60); flex: none; }
.pied .propulse__lib { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--g60); white-space: nowrap; }
.pied .propulse img { height: 24px; width: auto; display: block; filter: grayscale(1); opacity: .62; transition: filter .18s, opacity .18s; }
.pied .propulse:hover img { filter: none; opacity: 1; }
.pied .liens { flex-wrap: wrap; gap: 8px 20px; justify-content: center; min-width: 0; flex: 1; }
.pied .pied__logo .logo { color: var(--g50); gap: 6px; }
.pied .pied__logo .logo .pt-vert { fill: var(--g50); }
.pied .pied__logo .logo__mot span, .pied .pied__logo .logo__mot b { font-size: 12px; }
.pied .pied__logo .logo:hover { color: var(--g70); }
.globale .marque a { color: inherit; }
.globale .ico { color: var(--navy-10); }
.globale .ico[data-recherche] { display: none; }

/* la recherche du bandeau : un vrai champ, qui ouvre la palette */
.globale .cherche { position: relative; cursor: text; }
.globale .cherche input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: #fff; font: 400 13px var(--voix); height: 100%; }
.globale .cherche input::placeholder { color: var(--navy-20); }
.globale .cherche:focus-within { border-color: var(--navy-20); background: var(--navy-70, var(--navy-80)); }
.globale .cherche svg { flex: none; }

/* la barre des familles : l'actif porté par le trait vert et un fond léger */
.nav a { position: relative; border-radius: var(--r) var(--r) 0 0; }
.nav a svg.i { color: var(--g50); transition: color .15s; }
.nav a:hover { background: var(--g05); }
.nav a:hover svg.i, .nav a[aria-current] svg.i { color: var(--navy); }
.nav a[aria-current] { background: var(--vert-fond, #eef8f1); }
.nav a .cpt { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: var(--rouge); color: #fff; line-height: 1.4; }
.nav .fin { white-space: nowrap; }

/* le sélecteur de période, en liens, texte centré */
.seg a { display: inline-flex; align-items: center; justify-content: center; height: 100%; padding: 0 12px; font-size: 13px; font-weight: 500; line-height: 1; color: var(--g60); border-right: 1px solid var(--g40); }
.seg a:last-child { border-right: none; }
.seg a[data-actif] { background: var(--navy); color: #fff; }
.seg a:hover:not([data-actif]) { background: var(--g05); color: var(--navy); }
.plage b { gap: 6px; }
.plage b svg { flex: none; position: relative; top: 0; }
.plage b small { white-space: nowrap; }
.plage a[aria-label] { width: 32px; height: 100%; display: grid; place-items: center; color: var(--g60); font-size: 18px; line-height: 1; }
.plage a[aria-label]:hover { background: var(--g10); }
.plage a.chev { display: grid; place-items: center; width: 32px; padding: 0; }
.plage a.chev svg { color: var(--g60); }
.chev--g svg { transform: rotate(90deg); }
.chev--d svg { transform: rotate(-90deg); }
.plage a.chev:hover svg { color: var(--navy); }

/* le bandeau : le menu de périmètre et le compte sont des boutons de menu */
.globale button.perim, .globale button.qui { background: transparent; color: inherit; cursor: pointer; font-family: inherit; text-align: left; }
.globale button.perim { border: 1px solid var(--navy-60); }
.globale button.perim:hover, .globale button.perim[aria-expanded="true"] { border-color: var(--navy-20); background: var(--navy-80); }
.globale button.qui { border: none; border-left: 1px solid var(--navy-60); border-radius: 0; padding-right: 6px; }
.globale button.qui:hover, .globale button.qui[aria-expanded="true"] { background: transparent; }
.globale button.qui > svg { color: var(--navy-20); margin-left: 2px; }
.globale .perim svg.marque-pt { flex: none; }
.globale .perim .perim__court { display: none; }
.globale .qui .av { flex: none; }
.globale .qui b { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* les bandeaux sous l'en-tête : bienvenue, compte sans rôle */
.bandeau { display: flex; gap: 14px; align-items: flex-start; margin: 16px 32px 0; padding: 14px 18px; border-radius: var(--r); font-size: 14px; line-height: 1.5; position: relative; }
.bandeau > svg { flex: none; margin-top: 3px; }
.bandeau b { font-weight: 700; }
.bandeau a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bandeau .fermer { position: absolute; top: 10px; right: 10px; }
.bandeau--bienvenue { background: var(--navy); color: #fff; padding-right: 56px; }
.bandeau--bienvenue > svg { color: var(--vert); margin-top: 8px; }
.bandeau--bienvenue .fermer { background: transparent; border-color: var(--navy-60); color: #fff; }
.bandeau--bienvenue .fermer:hover { border-color: #fff; }
.bandeau--attention { background: var(--ambre-fond); color: var(--ambre-encre); border: 1px solid #ecd9b4; }
.bandeau--attention > svg { color: var(--ambre-encre); }
.bandeau + .bandeau { margin-top: 10px; }

/* la barre du bas, sur téléphone : quatre familles et « Plus » ; cachée ailleurs */
.barre-mobile { display: none; }
@media (max-width: 720px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }   /* la barre de navigation fixe ne couvre jamais le pied */
  .pied { flex-wrap: wrap; justify-content: center; }
  .barre-mobile { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--g30); box-shadow: 0 -6px 20px rgba(26,32,57,.08); transform: translateZ(0); -webkit-transform: translate3d(0, 0, 0); will-change: transform; }
  .barre-mobile a, .barre-mobile button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%; font: 500 11px var(--voix); color: var(--g60); background: transparent; border: none; cursor: pointer; text-decoration: none; padding: 0; min-width: 0; }
  .barre-mobile svg { color: var(--g50); }
  .barre-mobile a[aria-current], .barre-mobile button[aria-current] { color: var(--navy); font-weight: 700; }
  .barre-mobile a[aria-current] svg, .barre-mobile button[aria-current] svg { color: var(--navy); }
  .barre-mobile a[aria-current]::before, .barre-mobile button[aria-current]::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; background: var(--vert); border-radius: 0 0 3px 3px; }
  .barre-mobile a, .barre-mobile button { position: relative; }
  .barre-mobile .menu-ancre { flex: 1; display: flex; position: static; }
  .barre-mobile .menu--feuille { position: fixed; left: 8px; right: 8px; top: auto; bottom: 68px; max-height: 70vh; padding: 6px; }
  .barre-mobile .menu a, .barre-mobile .menu button { flex: none; flex-direction: row; justify-content: flex-start; height: auto; gap: 12px; padding: 11px 12px; font: 500 14px var(--voix); color: var(--navy); width: 100%; }
  .barre-mobile .menu a::before, .barre-mobile .menu button::before { display: none; }
  .barre-mobile .menu svg { color: var(--g60); }
  .portail { padding-bottom: 64px; }
  .nav { display: none; }
  .globale { height: 52px; }
  .globale .ico[href="/alertes"] { display: none; }
  /* la seconde ligne devient une rangée de puces d'application */
  .sousnav { gap: 6px; padding: 8px 0 6px; align-items: center; }
  .sousnav > a { height: 32px; padding: 0 12px; border: 1px solid var(--g30); border-radius: 16px; font-size: 13px; margin: 0; border-bottom-width: 1px; }
  .sousnav > a[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; }
  .sousnav > a .cpt { background: rgba(255,255,255,.2); color: inherit; }
  /* la période : le segment sur une ligne entière, la plage sur la suivante, rien ne se chevauche */
  .sousnav .periode { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; height: auto; }
  .sousnav .periode .seg { width: 100%; display: flex; height: 36px; }
  .sousnav .periode .seg a { flex: 1; height: 100%; padding: 0; }
  .sousnav .periode .plage { width: 100%; height: 36px; justify-content: space-between; }
  .sousnav .periode .plage b { flex: 1; justify-content: center; }
  .entete h1 { font-size: 22px; }
  /* le fil d'Ariane ne déborde pas : le dernier maillon se tronque */
  .ariane { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* une somme dont la valeur est longue passe à la ligne, alignée à gauche */
  .somme { flex-wrap: wrap; gap: 2px 12px; }
  .somme > b, .somme > span:last-child { margin-left: auto; text-align: right; max-width: 100%; }
  .somme > span:first-child { flex: 1 1 140px; min-width: 0; }
  .somme--texte > span:first-child { max-width: none; }
  .entete .actions .btn { height: 34px; font-size: 13px; }
}

/* la bulle de retours, en bas à droite */
.bulle { position: fixed; right: 22px; bottom: 22px; z-index: 75; display: inline-flex; align-items: center; height: 52px; padding: 0 10px; border-radius: 26px; border: none; background: var(--navy); color: #fff; font: 600 13px var(--voix); cursor: pointer; box-shadow: 0 10px 28px rgba(26,32,57,.28); transition: transform .15s, box-shadow .15s, background .15s; }
.bulle .robot { width: 32px; height: 32px; flex: none; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.bulle .robot .oeil, .bulle .robot .antenne { fill: var(--vert); stroke: none; transform-origin: center; transform-box: fill-box; }
.bulle .robot .oeil { animation: clin 6s infinite; }
.bulle .robot .bouche { stroke: var(--vert); }
.bulle__lib { max-width: 0; overflow: hidden; white-space: nowrap; margin-left: 0; transition: max-width .25s ease, margin-left .25s ease; }
.bulle:hover, .bulle:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(26,32,57,.34); background: var(--navy-80); }
.bulle:hover .bulle__lib, .bulle:focus-visible .bulle__lib { max-width: 110px; margin-left: 8px; }
.bulle:hover, .bulle:focus-visible { padding-right: 16px; }
.bulle:hover .robot { transform: rotate(-8deg); }
.bulle:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
@keyframes clin { 0%, 91%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
@media (prefers-reduced-motion: reduce) { .bulle .robot .oeil { animation: none; } .bulle, .bulle .robot, .bulle__lib { transition: none; } }

/* ── 2. les composants ──────────────────────────────────────────────────── */
/* le menu déroulant du portail : un bouton l'ouvre, Échap et l'extérieur le ferment, les flèches parcourent */
.menu-ancre { position: relative; }
.menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 70; min-width: 280px; max-height: 70vh; overflow: auto; background: #fff; color: var(--navy); border: 1px solid var(--g30); border-radius: var(--r); padding: 6px; display: flex; flex-direction: column; box-shadow: 0 12px 28px rgba(26,32,57,.16); text-align: left; }
/* le menu du périmètre s'aligne sur le bord gauche de son bouton (il s'ouvre vers la droite) ; celui du compte, à droite, sur le bord droit */
#menu-perimetre { left: 0; right: auto; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border-radius: var(--r); font: 500 13px var(--voix); color: var(--navy); background: transparent; border: none; cursor: pointer; width: 100%; }
.menu a svg, .menu button svg { color: var(--g60); flex: none; }
.menu a:hover, .menu button:hover, .menu a:focus-visible, .menu button:focus-visible { background: var(--g10); outline: none; }
.menu a[aria-current], .menu button[aria-current] { background: var(--navy-10); font-weight: 600; }
.menu .retrait { padding-left: 32px; font-weight: 400; color: var(--g70); }
.menu .menu__titre { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g60); }
/* le choix de la langue (14/09/2026) : un dépli dans le menu du compte, un drapeau dessiné devant chaque langue, la lue marquée ; le même choix au pied de page */
.menu__depli { display: block; }
.menu__depli summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); font: 500 13px var(--voix); color: var(--navy); cursor: pointer; }
.menu__depli summary::-webkit-details-marker { display: none; }
.menu__depli summary:hover, .menu__depli summary:focus-visible { background: var(--g10); outline: none; }
.menu__depli summary b { font-weight: 600; margin-left: auto; }
.menu__depli summary svg.chev { color: var(--g60); flex: none; transition: transform var(--duree, .18s); }
.menu__depli[open] summary svg.chev { transform: rotate(180deg); }
.menu__depli[open] summary { background: var(--g05); }
.menu__depli .menu__langues { display: block; margin: 2px 10px 6px 20px; padding-left: 8px; border-left: 2px solid var(--g20); }
.menu__depli .menu__langues button { width: 100%; }
.menu__depli .menu__langues button span { flex: 1; }
.menu__depli .menu__langues button svg:last-child:not(.drapeau) { color: var(--vert-encre); }
.drapeau { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(26, 32, 57, .14); display: inline-block; vertical-align: -1px; }
/* au pied : les codes des langues dans la rangée des liens, au même corps et à la même couleur qu'eux, sans cadre ; celle qu'on lit en gras */
.pied .liens .liens__sep { width: 1px; height: 12px; background: var(--g30); align-self: center; }
.pied__langues { display: inline-flex; align-items: center; gap: 14px; }
.pied__langues button { padding: 0; border: 0; background: none; font: inherit; letter-spacing: .06em; color: var(--g60); cursor: pointer; }
.pied__langues button:hover, .pied__langues button:focus-visible { color: var(--navy); text-decoration: underline; outline: none; }
.pied__langues button[aria-current] { color: var(--navy); font-weight: 700; }
.menu__langues { display: contents; }
.menu__titre { display: block; padding: 8px 14px 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g50); }
.menu__note { display: block; padding: 4px 14px 8px; font-size: 11.5px; line-height: 1.35; color: var(--g50); }
.menu--compte button.est-choisi { font-weight: 600; color: var(--navy); }
.menu__sep { height: 1px; background: var(--g20); margin: 6px 4px; }
.menu .menu__qui { display: flex; align-items: center; gap: 12px; padding: 10px 10px 8px; }
.menu .menu__qui .av { width: 40px; height: 40px; border-radius: 50%; background: var(--vert); color: var(--navy); display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; object-fit: cover; }
.menu .menu__qui b { display: block; font-size: 14px; font-weight: 700; }
.menu .menu__qui span { display: block; font-size: 12px; color: var(--g60); }
.menu--compte { min-width: 300px; }

/* les pastilles de marque : un signe dessiné par marque, jamais un texte seul */
.marque-pt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.marque-pt.REISEL { background: var(--navy); box-shadow: inset 0 0 0 2px var(--vert); }
.marque-pt.INGELINE { background: var(--bleu-encre); }
.marque-pt.AVENIR\ FERRO, .marque-pt.AVENIR { background: var(--ambre); }
.marque-pt.FINEISEL { background: var(--sarcelle); }
.marque-pt.RSL { background: var(--navy); box-shadow: inset 0 0 0 2px var(--g30); }
.marque-pt.GROUPE { background: linear-gradient(135deg, var(--navy) 50%, var(--vert) 50%); }
.pastille .marque-pt { margin-right: 6px; vertical-align: -1px; }

/* deux ou trois cartes côte à côte ont la même hauteur : la rangée est un bloc, pas un escalier ; un geste replié reste au pied */
.grille2, .grille3 { align-items: stretch; }
.grille2 > .panneau, .grille3 > .panneau { display: flex; flex-direction: column; }
.grille2 > .panneau > details.depli, .grille3 > .panneau > details.depli { margin-top: auto; }

/* la charte (sécurité, confidentialité) : une colonne de sections, une icône en rail, le texte et son aparté « en pratique » */
.charte { padding: 0; }
.charte__s { display: grid; grid-template-columns: 56px minmax(0, 72ch) minmax(260px, 1fr); gap: 0 32px; padding: 26px 28px 26px 20px; border-bottom: 1px solid var(--g20); }
.charte__s:last-child { border-bottom: none; }
.charte__ico { width: 40px; height: 40px; border-radius: 50%; background: var(--navy-10); color: var(--navy); display: grid; place-items: center; margin-top: 2px; }
.charte__texte h2 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.charte__texte p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--g70); max-width: 68ch; }
.charte__texte p:last-child { margin-bottom: 0; }
.charte__texte b, .charte__texte code { color: var(--navy); }
.charte__aparte { border-left: 1px solid var(--g20); padding-left: 24px; max-width: 360px; font-size: 13px; color: var(--g70); line-height: 1.55; }
.charte__aparte .eyebrow { margin-bottom: 8px; }
.charte__aparte ul { margin: 0; padding-left: 16px; }
.charte__aparte li { margin-bottom: 6px; }
.charte__aparte li::marker { color: var(--vert); }
.charte__intro { padding: 22px 28px; border-bottom: 1px solid var(--g20); }
.charte__intro p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--g70); max-width: 90ch; }
@media (max-width: 1100px) { .charte__s { grid-template-columns: 48px minmax(0, 1fr); } .charte__aparte { grid-column: 2; border-left: none; padding-left: 0; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--g20); } }
@media (max-width: 720px) { .charte__s { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; } .charte__ico { display: none; } .charte__aparte { grid-column: 1; } .charte__intro { padding: 16px; } }

/* la prose des pages de charte et d'aide : une colonne lisible, des paragraphes espacés */
.prose { font-size: 13px; color: var(--g70); line-height: 1.65; max-width: 72ch; }
.prose p { margin: 0 0 10px; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0; padding-left: 18px; }
.prose li { margin-bottom: 6px; }
.prose b, .prose code { color: var(--navy); }
/* une ligne d'événement du groupe : l'échéance et, dessous, les deux gestes de calendrier */
.ech--ev { grid-template-columns: 44px minmax(0, 1fr) auto; }
.ech__droite { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ev-gestes { display: inline-flex; gap: 4px; }
.ev-gestes .outil { color: var(--g60); display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r); }
.ev-gestes .outil:hover { color: var(--navy); background: var(--g10); }
.ech .t b .pastille { font-size: 11px; }
/* les petits blocs récurrents : une pile de blocs, une cellule de format, un texte de contribution, un référent passé */
.pile { display: flex; flex-direction: column; gap: 12px; }
.fmt-cell { width: 44px; }
/* un lien qui porte un nombre : « Anciens comptes 12 » */
.cpt--fiches { display: inline-flex; align-items: center; height: 18px; margin-left: 8px; font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 9px; background: var(--g10); color: var(--g70); vertical-align: middle; white-space: nowrap; }
.lien--cpt .cpt { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px; background: var(--g10); color: var(--g80); vertical-align: middle; }
.fmt-ico { display: block; }
td .fmt-ico { margin: 0 auto; }
.h__texte { margin: 6px 0 0; font-size: 13px; color: var(--g70); }
.personne__id { min-width: 0; flex: 1; }
/* le champ de recherche d'une liste (comptes, documents, actualités, recherche) */
.cherche--filtre { max-width: 320px; height: 34px; background: #fff; border: 1px solid var(--g40); color: var(--g60); padding: 0 10px; }
.cherche--filtre input { border: none; outline: none; flex: 1; font: inherit; color: var(--navy); min-width: 0; }
.cherche--grande { max-width: 520px; height: 40px; padding: 0 12px; }
.cherche--grande input { font-size: 15px; }

/* le logo d'un compte client : le favicon, ou ses initiales, dans un carré discret */
.logo-compte { display: inline-block; vertical-align: middle; border-radius: 5px; object-fit: contain; background: #fff; border: 1px solid var(--g20); margin-right: 8px; flex: none; }
.logo-compte--ini { display: inline-grid; place-items: center; background: var(--g10); color: var(--g70); font-weight: 700; letter-spacing: 0; border-color: var(--g20); }
/* une société du groupe : la tuile de sa marque, aux couleurs du point de marque, jamais un favicon (077) */
.logo-compte--marque { display: inline-grid; place-items: center; color: #fff; font-weight: 800; letter-spacing: 0; border-color: transparent; }
.logo-compte--marque.REISEL { background: var(--navy); box-shadow: inset 0 0 0 2px var(--vert); }
.logo-compte--marque.INGELINE { background: var(--bleu-encre); }
.logo-compte--marque.AVENIR { background: var(--ambre); }
.logo-compte--marque.FINEISEL { background: var(--sarcelle); }
.logo-compte--marque.RSL { background: var(--navy); box-shadow: inset 0 0 0 2px var(--g30); }
.logo-compte--marque.GROUPE { background: linear-gradient(135deg, var(--navy) 50%, var(--vert) 50%); }
td .logo-compte { margin-right: 8px; }
/* une personne nommée (a.qui) : l'avatar puis le nom, qui ouvre sa carte */
a.compte, span.compte, a.qui { display: inline-flex; align-items: center; color: inherit; vertical-align: middle; }   /* dans une phrase, l'avatar et le nom se centrent sur la ligne de texte */
a.qui .av-t { margin-right: 8px; flex: none; }
a.qui .qui__texte { display: flex; flex-direction: column; min-width: 0; }
a.qui .qui__texte .sous { display: block; margin-top: 1px; white-space: normal; }
a.qui.court, a.qui.court b { white-space: nowrap; }
a.qui:hover b { text-decoration: underline; text-underline-offset: 3px; }
td .qui + .sous { display: block; }
a.compte:hover b { text-decoration: underline; text-underline-offset: 3px; }
.somme b a.compte { font-weight: 700; }
/* l'alerte d'une personne qui concerne un compte : le compte (logo, nom) puis l'objet, sur une ligne alignée, à la taille du sous-texte */
.alerte-compte, td .sous.alerte-compte { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-top: 4px; line-height: 18px; }
.alerte-compte .compte, .alerte-compte .compte b { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--g80); }
.alerte-compte .compte .logo-compte { margin-right: 6px; }
.alerte-compte__objet { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; line-height: 18px; }
.alerte-compte__objet::before { content: ", "; }
.entete h1 .logo-compte { margin-right: 12px; vertical-align: -6px; border-radius: 7px; }

/* les marques d'outils : un signe monochrome à côté d'un lien sortant */
.outil { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.outil svg, .outil .marque-img { width: 14px; height: 14px; flex: none; }
.marque-img { display: inline-block; vertical-align: -2px; object-fit: contain; }
a.outil { color: var(--g70); font-weight: 500; font-size: 12px; }
a.outil:hover { color: var(--navy); }
.btn .outil svg, .btn .outil .marque-img { width: 15px; height: 15px; }

/* la fenêtre modale : un panneau, jamais une boîte du navigateur */
.modale { border: 1px solid var(--g30); border-radius: var(--r); padding: 0; width: min(560px, calc(100vw - 32px)); background: #fff; color: var(--navy); box-shadow: 0 24px 60px rgba(26,32,57,.28); }
.modale--large { width: min(720px, calc(100vw - 32px)); }
.modale::backdrop { background: rgba(26,32,57,.38); }
.modale__form { display: flex; flex-direction: column; }
.modale__tete { padding: 20px 24px 14px; border-bottom: 1px solid var(--g20); position: relative; }
.modale__tete h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; padding-right: 40px; }
.modale__tete p { margin: 6px 0 0; font-size: 13px; color: var(--g60); }
.modale__tete .fermer { top: 16px; right: 16px; }
.modale__corps { padding: 16px 24px; max-height: 70vh; overflow: auto; }
.modale__pied { padding: 14px 24px; border-top: 1px solid var(--g20); display: flex; justify-content: flex-end; gap: 8px; }
.modale .hist { margin-top: 4px; }
.modale__erreur { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--rouge); background: var(--rouge-fond, #fdf1f1); color: var(--rouge-encre); font-size: 13px; border-radius: 0 var(--r) var(--r) 0; }
.btn--danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.btn--danger:hover { background: var(--rouge-encre); }
.btn--discret { border-color: transparent; background: transparent; color: var(--g60); }
.btn--discret:hover { border-color: var(--g40); color: var(--navy); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; pointer-events: none; }

/* personnaliser le tableau de bord : une liste cochable et ordonnable */
.perso { display: flex; flex-direction: column; }
.perso__ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--g20); font-size: 14px; }
.perso__ligne:last-child { border-bottom: none; }
.perso__ligne label { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; }
.perso__ordre { display: inline-flex; gap: 2px; }
.perso__ordre .btn { min-width: 28px; padding: 0 6px; }
.perso__ordre .btn[disabled] { opacity: .3; }

/* le mot en bas de page */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--r); font-size: 13px; font-weight: 500; box-shadow: 0 12px 28px rgba(26,32,57,.28); max-width: calc(100vw - 32px); border-left: 3px solid var(--vert); transition: opacity .4s; display: flex; align-items: center; gap: 12px; }
.toast.ko { border-left-color: var(--rouge); }
.toast.info { border-left-color: var(--navy-20); }
.toast--vu { opacity: 0; }
.toast a { color: var(--vert); font-weight: 700; }

/* l'infobulle */
.infobulle { position: absolute; z-index: 110; background: var(--navy); color: #fff; font-size: 12px; line-height: 1.4; padding: 6px 10px; border-radius: var(--r); max-width: 280px; pointer-events: none; box-shadow: 0 6px 16px rgba(26,32,57,.24); }
.infobulle::after { content: ""; position: absolute; left: var(--fleche, 50%); margin-left: -5px; border: 5px solid transparent; }
.infobulle--haut::after { top: 100%; border-top-color: var(--navy); }
.infobulle--bas::after { bottom: 100%; border-bottom-color: var(--navy); }
/* sur un fond sombre (le résultat d'une calculatrice), la bulle est claire : navy sur navy ne se lisait pas */
.infobulle--claire { background: #fff; color: var(--navy); border: 1px solid var(--g30); box-shadow: 0 8px 24px rgba(26, 32, 57, .28); }
.infobulle--claire.infobulle--haut::after { border-top-color: #fff; }
.infobulle--claire.infobulle--bas::after { border-bottom-color: #fff; }

/* la pagination */
.pagin { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--g20); font-size: 12px; color: var(--g60); flex-wrap: wrap; }
.pagin__liens { display: inline-flex; align-items: center; gap: 2px; }
.pagin__page, .pagin__fleche { min-width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0 8px; border-radius: var(--r); font-weight: 600; font-size: 13px; color: var(--navy); }
.pagin__page:hover, .pagin__fleche:hover { background: var(--g10); }
.pagin__page[aria-current] { background: var(--navy); color: #fff; }
.pagin__fleche[aria-disabled] { color: var(--g40); }
.pagin__pts { color: var(--g50); padding: 0 4px; }

/* les segments de vues locales à une page */
.seg--vues a { display: inline-flex; align-items: center; gap: 6px; }
.seg--serie { height: 30px; }
[data-serie][hidden] { display: none !important; }
.panneau[data-series] { align-self: start; }
.seg--vues .cpt { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: var(--g20); color: var(--g70); }
.seg--vues a[data-actif] .cpt { background: var(--navy-60); color: #fff; }

/* les listes déroulantes : la flèche dessinée, la même hauteur que les champs */
select, .champ select { appearance: none; -webkit-appearance: none; padding-right: 32px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6d75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center / 14px; cursor: pointer; }
select:hover { border-color: var(--g60); }
select:focus-visible, .champ input:focus-visible, .champ textarea:focus-visible, .filtres-l input:focus-visible { outline: 2px solid var(--vert); outline-offset: 1px; border-color: var(--navy); }

/* les factures d'un compte : le numéro et sa date restent sur leurs lignes ; quand la place manque, c'est l'état qui passe à la ligne */
/* les factures d'un compte : la référence et ses dates à gauche, le montant et l'état empilés à droite ; rien ne se coupe lettre à lettre */
.tab-factures td:first-child { min-width: 0; }
.tab-factures td:first-child .sous { white-space: normal; }
.tab-factures__droite { text-align: right; white-space: nowrap; width: 1%; }
.tab-factures__droite .montant { display: block; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.tab-factures__droite .etat { white-space: nowrap; }
.tab-factures__outil { width: 1%; white-space: nowrap; }
@media (max-width: 720px) { .tab-factures__outil { display: none; } .tab-factures__droite .etat { white-space: normal; text-align: right; } }

/* le barème : une ligne par paramètre, les sections en tête de groupe ; la saisie porte son unité */
.tab-bareme .tr-section th { padding: 14px 20px 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--g60); background: var(--g05); border-bottom: 1px solid var(--g20); text-align: left; }
@media (min-width: 721px) { .tab-bareme td.n, .tab-bareme th.n { width: 200px; } }
.tab-bareme th .sous { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--g60); margin-top: 2px; }
.tab-bareme td .sous { display: block; font-size: 12px; color: var(--g60); font-weight: 400; }
.saisie-unite { display: inline-flex; align-items: center; gap: 6px; }
.saisie-unite input { width: 120px; height: 34px; padding: 0 10px; border: 1px solid var(--g40); border-radius: var(--r); font: 400 14px var(--voix); color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; }
.saisie-unite input:focus-visible { outline: 2px solid var(--vert); outline-offset: 1px; border-color: var(--navy); }
.saisie-unite span { font-size: 12px; color: var(--g60); min-width: 38px; text-align: left; }
.pan__pied { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--g20); }

/* les suggestions de saisie : une liste sous le champ, au fil de la frappe */
.champ { position: relative; }
.champ__aide { display: block; font-size: 12px; color: var(--g60); font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 4px; }
.sugg { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin-top: 4px; background: #fff; border: 1px solid var(--g30); border-radius: var(--r); box-shadow: 0 12px 28px rgba(26,32,57,.16); padding: 4px; max-height: 260px; overflow: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.sugg--flux { position: static; margin-top: 6px; box-shadow: none; max-height: 220px; }
.sugg button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: none; background: transparent; border-radius: var(--r); font: 400 13px var(--voix); color: var(--navy); cursor: pointer; }
.sugg button b { font-weight: 600; }
.sugg button span { display: block; font-size: 12px; color: var(--g60); }
.sugg button:hover, .sugg button[aria-selected="true"] { background: var(--g10); }
.sugg .attente { padding: 10px; font-size: 12px; color: var(--g60); }

/* une colonne repère (jours ouvrés attendus, objectif) : la référence à laquelle on compare, pas une mesure ; elle s'écrit « / 20 », en gris */
.tiroir td.rep { color: var(--g60); font-weight: 400; }
.tiroir td.rep::before { content: "/ "; color: var(--g50); }
.tiroir th.rep { color: var(--g50); }

/* le tiroir, fixé : l'en-tête et le pied restent, seul le corps défile */
.voile { position: fixed; inset: 0; z-index: 80; background: rgba(26,32,57,.32); }
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(760px, 100vw); box-shadow: -12px 0 32px rgba(26,32,57,.18); display: flex; flex-direction: column; }
.tiroir__tete, .tiroir .def, .tiroir .depli--def, .tiroir .filtres, .tiroir__pied { flex: none; }
/* la définition du tiroir, repliée (retour du 11/09/2026) : la liste sous les yeux, la définition à un clic, au même endroit */
.tiroir .depli--def { margin: 12px 24px 0; border: 1px solid var(--g20); border-radius: var(--r); background: var(--g05); }
.tiroir .depli--def summary { padding: 9px 12px; font-size: 12.5px; }
.tiroir .depli--def[open] summary { border-bottom: 1px solid var(--g20); }
.tiroir .depli--def > div { padding: 10px 12px; font-size: 13px; color: var(--g70); border-left: 3px solid var(--navy); margin: 8px 12px 10px; background: #fff; }
.tiroir__tete { padding-right: 64px; }
.tiroir__corps { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; overscroll-behavior: contain; }
.tiroir__corps > .defile { flex: 1; min-height: 0; overflow: auto; }
.tiroir--large { width: min(1040px, 100vw); }
.tiroir table { margin-top: 0; }
.tiroir .qui b { white-space: nowrap; }
.tiroir thead th { position: sticky; top: 0; z-index: 2; }
.tiroir td { white-space: normal; overflow-wrap: break-word; }   /* break-word, pas anywhere : un mot ne se coupe qu'en dernier recours et ne rétrécit pas la colonne */
.tiroir td.n { white-space: nowrap; }
.tiroir td .sous { white-space: normal; }
.tiroir th, .tiroir td { padding-left: 18px; padding-right: 18px; }
.tiroir th:first-child, .tiroir td:first-child { padding-left: 24px; }
.tiroir th:last-child, .tiroir td:last-child { padding-right: 24px; }
.tiroir .filtres { flex-wrap: wrap; }
.tiroir .pagin { flex: none; }
.tiroir__pied .btn { margin-left: auto; }
.tiroir__pied .btn + .btn { margin-left: 0; }
.tiroir__pied a[hidden] { display: none; }
.tiroir .attente { padding: 40px 24px; color: var(--g60); font-size: 13px; text-align: center; }
.tiroir__regle { padding: 10px 24px; font-size: 12px; color: var(--g60); border-top: 1px solid var(--g20); flex: none; }

/* la fiche dans le tiroir (personne, événement) : des blocs, des sommes, des gestes */
.fiche { display: flex; flex-direction: column; }
.fiche__tete { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--g20); }
.fiche__photo { width: 72px; height: 72px; border-radius: var(--r); object-fit: cover; background: var(--navy-10); color: var(--navy); display: grid; place-items: center; font-weight: 800; font-size: 20px; flex: none; }
.fiche__tete > div:not(.fiche__photo) { min-width: 0; flex: 1; }
.fiche__tete h3 { margin: 0; font-size: 16px; font-weight: 700; }
.fiche__tete p { margin: 2px 0 0; font-size: 13px; color: var(--g60); }
.fiche__gestes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 24px; border-bottom: 1px solid var(--g20); background: var(--g05); }
.fiche__bloc { padding: 14px 24px 4px; }
.fiche__bloc .eyebrow { margin-bottom: 8px; }
.fiche__bloc table { margin: 0 -24px; width: calc(100% + 48px); }
.fiche__bloc .somme { padding: 6px 0; }
.fiche__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.fiche__grille .somme { padding: 6px 0; }
.fiche .chiffre { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.fiche .chiffre small { font-size: 12px; font-weight: 500; color: var(--g60); letter-spacing: 0; margin-left: 4px; }
.fiche .chiffre.ko { color: var(--rouge-encre); }
.fiche .chiffre.att { color: var(--ambre-encre, #9a6a00); }
/* le détail des points d'une personne (098) : le résultat, les types, les actions et qui elles visent */
.dp__resultat { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 4px 0 2px; }
.dp__resultat .jauge { flex: 1 1 160px; }
.dp__objectif { margin: 6px 0 8px; }
.dp__objet { display: flex; align-items: flex-start; gap: 10px; }
.dp__objet > .av-t, .dp__objet > svg { flex: none; margin-top: 1px; }
.dp__objet--doc > svg { color: var(--g60); margin-top: 3px; }
.dp__objet .sous { display: block; }
.dp__compte { display: flex; align-items: center; margin-top: 3px; }
.dp tr.dp__semaine td { background: var(--g05); font-size: 12px; padding-top: 7px; padding-bottom: 7px; }
.dp tr.dp__semaine span { color: var(--g60); margin-left: 8px; }
.dp tr.dp__total td { border-top: 1px solid var(--g30); }
/* les tableaux du détail vont d'un bord à l'autre du tiroir, cadre de défilement compris ; une ligne haute (des pushs dépliés) s'aligne en haut */
.dp .fiche__bloc table { max-width: none; }
.dp .fiche__bloc .defile--auto { margin: 0 -24px; width: calc(100% + 48px); max-width: none; }
.dp .fiche__bloc .defile--auto > table { margin: 0; width: 100%; }
.dp__actions td { vertical-align: top; }
.dp__pushs summary { cursor: pointer; list-style: none; }
.dp__pushs summary::-webkit-details-marker { display: none; }
.dp__pushs summary > b::after { content: " ▾"; color: var(--g50); font-weight: 400; }
.dp__pushs[open] summary > b::after { content: " ▴"; }
.dp__pushs summary .sous { display: block; }
.dp__pushs ul { margin: 8px 0 2px; padding-left: 18px; columns: 2; column-gap: 24px; font-size: 13px; }
.dp__pushs li { break-inside: avoid; padding: 1px 0; }
/* l'ancienne classe reste lue par les écrans qui l'emploient encore */

/* la palette de recherche */
.pal { width: min(680px, calc(100vw - 32px)); margin-top: 8vh; }
.pal__champ { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--g20); }
.pal__champ svg { color: var(--g50); }
.pal__champ input { flex: 1; border: none; outline: none; font: 500 16px var(--voix); color: var(--navy); background: transparent; min-width: 0; }
.pal__champ kbd { font: 500 11px var(--mono); color: var(--g60); border: 1px solid var(--g30); border-radius: 3px; padding: 0 5px; }
.pal__res { max-height: 60vh; overflow: auto; }
.pal__section { padding: 10px 8px 6px; }
.pal__section .eyebrow { padding: 0 10px 6px; }
/* une ligne de résultat : la tête (portrait, logo, icône de la source), le texte, la marque d'ouverture externe */
.pal__ligne { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r); font-size: 13px; color: var(--navy); }
.pal__tete { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.pal__tete .logo-compte, .pal__tete .av-t { margin: 0; }
.pal__ico, .res__ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--g10); color: var(--g70); }
.res__ico { margin-right: 8px; vertical-align: middle; }
.pal__texte { min-width: 0; flex: 1; }
.pal__texte b, .pal__texte .sous { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal__ext { color: var(--g50); flex: none; }
.pal__ligne b { font-weight: 600; }
.pal__ligne .sous { display: block; font-size: 12px; color: var(--g60); }
.pal__ligne:hover, .pal__ligne:focus { background: var(--g10); outline: none; }
.pal__pied { display: flex; justify-content: space-between; padding: 10px 18px; border-top: 1px solid var(--g20); font-size: 12px; color: var(--g60); }
.pal .attente { padding: 28px 18px; color: var(--g60); font-size: 13px; text-align: center; }

/* l'en-tête d'un panneau : ses filtres et ses gestes passent à la ligne plutôt que de déborder */
.pan__tete { flex-wrap: wrap; row-gap: 8px; }
.pan__tete .droite { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }

/* ── 3. les tableaux et les formulaires ─────────────────────────────────── */
/* une seule grammaire, et une règle absolue : un tableau tient dans son cadre, jamais de défilement horizontal.
   Le texte passe à la ligne, les nombres non ; les colonnes secondaires (.sec) disparaissent sous 1100 px, les
   tertiaires (.ter) sous 1280 px ; sous 720 px tout tableau devient une pile de cartes, chaque cellule avec son
   intitulé (posé par client/socle.js depuis l'en-tête). */
table { table-layout: auto; width: 100%; max-width: 100%; }
td { white-space: normal; overflow-wrap: break-word; }
td.n, th.n { white-space: nowrap; width: 1%; }   /* une colonne de nombres ne prend que sa largeur : la place va aux noms */
th.n { white-space: normal; line-height: 1.25; max-width: 110px; }   /* son en-tête peut tenir sur deux lignes (« Missions en cours ») plutôt que d'élargir la colonne */
/* un tableau dense (dix colonnes et plus : l'activité par business manager) : marges réduites, en-têtes de nombres sur deux lignes, le nom ne se coupe pas */
.dense th, .dense td { padding-left: 12px; padding-right: 12px; }
.dense th:first-child, .dense td:first-child { padding-left: 20px; }
.dense th.n { white-space: normal; line-height: 1.25; }
.dense td:first-child .qui b { white-space: nowrap; }
td.nom, td:first-child b { white-space: normal; }
.qui b, td:first-child .qui b, td .qui b { white-space: nowrap; }   /* le nom d'une personne ne se coupe pas ; sa sous-ligne (entité, fonction) peut passer à la ligne */
td .sous { white-space: normal; }
td .etat, td .pastille, td .filtre { white-space: nowrap; }
/* une liste dans une carte étroite (la colonne de droite de Piloter : 500 px sur un portable de 13 pouces) : les marges
   intérieures se resserrent et le nom d'une personne passe à la ligne, plutôt que le tableau ne sorte de sa carte ou ne cache
   ses dernières colonnes derrière un défilement (retour du fondateur, 11/10/2026, « Fins de mission à sécuriser »). La mesure
   est celle de la carte, pas de l'écran : la même liste en pleine largeur garde ses marges et ses noms sur une ligne. */
.panneau--liste { container-type: inline-size; }
@media (min-width: 721px) {
  @container (max-width: 640px) {
    .panneau--liste th, .panneau--liste td { padding-left: 10px; padding-right: 10px; }
    .panneau--liste th:first-child, .panneau--liste td:first-child { padding-left: 20px; }
    .panneau--liste th:last-child, .panneau--liste td:last-child { padding-right: 20px; }
    .panneau--liste td .qui b { white-space: normal; }
  }
  /* sous 480 px de carte (un portable en 1280), une colonne qui redit une autre se retire : « Jours » après la date de fin ; « Voir tous » la garde */
  @container (max-width: 480px) {
    .panneau--liste .facultative { display: none; }
    .panneau--liste th:not(:first-child), .panneau--liste td:not(:first-child) { padding-left: 8px; }
    .panneau--liste th:not(:last-child), .panneau--liste td:not(:last-child) { padding-right: 8px; }
  }
}
.panneau { overflow: visible; }
.defile { overflow: visible; max-width: 100%; }
/* la comparaison par entité : six colonnes de chiffres tiennent rarement sous 900 px, le tableau défile dans son cadre */
/* la comparaison par entité : une grille fixe, la même dans chaque volet. Sans elle, chaque tableau calait ses
   colonnes sur son contenu, rien ne s'alignait d'une marque à l'autre, et l'ensemble débordait de l'écran. */
.defile--entites { overflow-x: auto; }
.defile--entites table { table-layout: fixed; width: 100%; }
/* posé par socle.js autour d'un tableau plus large que son cadre : il défile dans son cadre, la page ne déborde jamais (portables) */
.defile--auto { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.defile--entites th { white-space: normal; line-height: 1.2; }
.defile--entites td.n { white-space: nowrap; }
td.n, th.n, td.num { font-variant-numeric: tabular-nums; }
th { position: relative; }
tbody tr[data-href] { cursor: pointer; }
/* la ligne d'une personne sur l'activité commerciale ouvre son détail (098) : au clic et au clavier */
tbody tr[data-points] { cursor: pointer; }
tbody tr[data-points]:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
/* le signe discret qu'une ligne s'ouvre : un chevron pâle en bout de ligne, qui fonce et glisse d'un cran au survol */
th.ouvre, td.ouvre { width: 28px; padding-left: 0; text-align: right; }
td.ouvre svg { color: var(--g40); vertical-align: middle; transition: color .15s, transform .15s; }
tbody tr[data-points]:hover td.ouvre svg, tbody tr[data-points]:focus-visible td.ouvre svg { color: var(--navy); transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { td.ouvre svg { transition: none; } tbody tr[data-points]:hover td.ouvre svg { transform: none; } }
td .lien b, td a.lien { color: inherit; }
td a.lien:hover b { text-decoration: underline; text-underline-offset: 3px; }
td .gravite { display: inline-block; width: 4px; height: 24px; border-radius: 2px; vertical-align: middle; }
td .gravite.ko { background: var(--rouge); } td .gravite.att { background: var(--ambre); } td .gravite.info { background: var(--bleu); }
td .agir { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
td.gestes { text-align: right; white-space: nowrap; }
td.gestes form { display: inline; }
td .agir a { color: var(--g60); }
td .agir a:hover { color: var(--navy); }
a.somme:hover span { text-decoration: underline; }
img.av-t { object-fit: cover; border-radius: 50%; vertical-align: middle; margin-right: 10px; }
img.ph.photo, img.av { object-fit: cover; display: block; }
img.av { border-radius: 50%; width: 30px; height: 30px; }
.pers .agir a { color: var(--g60); }
.personne.contact { display: flex; align-items: center; gap: 12px; }
.personne.contact .agir { display: inline-flex; gap: 6px; margin-left: auto; }
.personne.contact .agir a { color: var(--g60); display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r); }
.personne.contact .agir a:hover { color: var(--navy); background: var(--g10); }
.personne.contact span { display: block; font-size: 12px; color: var(--g60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
svg.i.fav { fill: var(--ambre); stroke: var(--ambre); }
.filtres-l input { background: transparent; }
.filtres-l a.filtre:hover { border-color: var(--navy); }

/* les formulaires : une colonne de grille ne s'élargit jamais au-delà de sa part */
.champs > .champ, .champs > div { min-width: 0; }
.champ input, .champ select, .champ textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
/* les formulaires repliés de l'administration, et les formulaires en général */
.depli { border-top: 1px solid var(--g20); }
.article-page__marque { margin-bottom: 10px; }
/* le portefeuille : la sous-ligne du bandeau, la ligne du porteur dans un classement, les têtes de groupe d'une liste (le mois) */
.portefeuille__quoi { margin: -6px 0 12px; font-size: 13px; }
.panneau td .compte, .panneau td .compte b, .panneau td .qui, .panneau td .qui b { overflow-wrap: normal; word-break: normal; }   /* un nom de compte ou de personne ne se coupe jamais lettre à lettre */
tr.tr-moi td { background: var(--g05); } tr.tr-moi td:first-child { box-shadow: inset 3px 0 var(--navy); }
tr.tr-groupe td { padding: 8px 20px 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g60); background: var(--g05); border-bottom: 1px solid var(--g20); }
tr.tr-groupe .cpt { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0; padding: 0 6px; border-radius: 8px; background: var(--g20); color: var(--g70); }
/* Personnaliser : les indicateurs par famille, une ligne par indicateur avec sa phrase */
.perso__groupe { margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g60); }
.perso__groupe:first-child { margin-top: 0; }
.perso__ligne label { display: flex; align-items: flex-start; gap: 10px; }
.perso__ligne label .perso__quoi { display: block; font-size: 12px; color: var(--g60); font-weight: 400; margin-top: 1px; }
/* les sept intentions de l'administration : une grille de cartes sobres */
.intentions { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 16px 20px 20px; }
.intention { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--g20); border-radius: var(--r); background: #fff; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.intention:hover { border-color: var(--navy); box-shadow: 0 2px 10px rgba(16, 24, 40, .06); }
.intention .i { color: var(--navy); }
.intention b { font-size: 14px; color: var(--navy); }
.intention span { font-size: 13px; color: var(--g70); line-height: 1.5; }
/* un dépliant dans une cellule de tableau : le geste replié, le formulaire en dessous de la ligne */
.depli--ligne { border-top: 0; }
.depli--ligne summary { padding: 4px 8px; font-size: 12px; border: 1px solid var(--g40); border-radius: var(--r); background: #fff; display: inline-flex; gap: 4px; }
.depli--ligne[open] summary { border-color: var(--navy); }
.depli--ligne .pan__corps { text-align: left; padding: 10px 0 0; white-space: normal; max-width: 420px; }
.depli--ligne .coche { white-space: normal; text-align: left; }
/* une case à cocher avec son mot */
.coche { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--g80); cursor: pointer; }
.coche input { width: 16px; height: 16px; accent-color: var(--navy); }
.depli summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: 13px; font-weight: 600; color: var(--navy); }
.depli summary::-webkit-details-marker { display: none; }
.depli summary:hover { background: var(--g05); }
.depli summary svg { color: var(--g50); transition: transform .15s; }
.depli[open] summary { border-bottom: 1px solid var(--g20); background: var(--g05); }
.depli[open] summary svg.chev { transform: rotate(180deg); }
.form__pied { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--g20); }
.form__pied .note { margin-right: auto; }

/* ── 4. les écrans ──────────────────────────────────────────────────────── */
/* le bandeau des indicateurs : de un à six, en une ou deux rangées, les traits qui suivent */
.indicateurs--c1 { grid-template-columns: 1fr; } .indicateurs--c2 { grid-template-columns: repeat(2, 1fr); } .indicateurs--c3 { grid-template-columns: repeat(3, 1fr); } .indicateurs--c4 { grid-template-columns: repeat(4, 1fr); }
/* cinq tuiles : une grille de six colonnes, trois tuiles de deux puis deux tuiles de trois ; le bandeau reste plein */
.indicateurs--c5 { grid-template-columns: repeat(6, 1fr); }
.indicateurs--c5 .ind:nth-child(-n+3) { grid-column: span 2; border-bottom: 1px solid var(--g20); }
.indicateurs--c5 .ind:nth-child(n+4) { grid-column: span 3; }
.indicateurs--c5 .ind:nth-child(3), .indicateurs--c5 .ind:nth-child(5) { border-right: none; }
.indicateurs--c3 .ind:nth-child(3n), .indicateurs--c4 .ind:nth-child(4n), .indicateurs--c2 .ind:nth-child(2n) { border-right: none; }
.indicateurs--2r.indicateurs--c3 .ind:nth-child(-n+3), .indicateurs--2r.indicateurs--c4 .ind:nth-child(-n+4) { border-bottom: 1px solid var(--g20); }
/* les indicateurs cliquables et leurs états */
.ind[data-cle] { cursor: pointer; }
.ind--echec { background: var(--g05); }
.ind--echec .ind__val b { color: var(--g60); }
.ind--absente { border: 1px dashed var(--g40); margin: -1px; }
.ind .absente { font-size: 14px; color: var(--g70); font-weight: 500; line-height: 1.4; }
.ind__delta { flex-wrap: wrap; }
.avis { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--g30); border-left-width: 3px; border-radius: var(--r); background: #fff; font-size: 13px; color: var(--g70); }
.avis.ko { border-left-color: var(--rouge); }
.avis.ok { border-left-color: var(--vert); }
.avis b { color: var(--navy); font-weight: 600; }
.avis svg { flex: none; color: var(--navy); margin-top: 1px; }
.vide { padding: 28px 20px; text-align: center; color: var(--g60); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vide svg { color: var(--g40); }
.vide--court { padding: 18px 20px; }
.vide__action { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.avis--tete { margin-bottom: 16px; }
.avis--dedans { margin: 16px 20px 0; }
.regle-absente td { color: var(--g60); }
/* un geste sur une ligne : il passe à la ligne sur un écran étroit ; une case à cocher garde sa taille de case */
.ligne-geste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ligne-geste input:not([type=checkbox]) { height: 28px; font: 13px var(--voix); padding: 0 8px; border: 1px solid var(--g40); border-radius: var(--r); min-width: 200px; max-width: 320px; flex: 1; }
.regle-absente td b { color: var(--navy); }
details.versions summary { cursor: pointer; font-size: 12px; margin-top: 4px; }
details.versions table { margin-top: 6px; }
.vide b { color: var(--navy); font-size: 14px; font-weight: 600; }

/* les courbes se survolent : une zone par point, un repère sous la souris */
/* la courbe s'étire avec sa boîte ; les zones de survol, le point de survol et le point final sont posés en pour cent sur la même boîte : rien n'est décalé ni écrasé */
.spark-cadre { margin-top: 8px; }
.spark-boite { position: relative; }
.spark-cadre .spark { margin-top: 0; overflow: visible; }
.spark polyline { vector-effect: non-scaling-stroke; }
.spark-zones { position: absolute; inset: 0; display: block; }
.spark-zones span { position: absolute; top: 0; bottom: 0; cursor: crosshair; }
.spark-zones span i { position: absolute; width: 7px; height: 7px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--navy); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--navy); opacity: 0; transition: opacity .1s; }
.spark-zones span:hover i { opacity: 1; }
.spark-zones span:hover { background: linear-gradient(to right, transparent calc(var(--x) - 1px), rgba(26,32,57,.18) calc(var(--x) - 1px), rgba(26,32,57,.18) calc(var(--x) + 1px), transparent calc(var(--x) + 1px)); }
.spark-fin { position: absolute; display: block; padding: 0; font-size: 0; line-height: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--navy); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--navy); pointer-events: none; }

/* le graphe : la bande de la semaine en cours reste derrière l'axe */
.gb .bande { z-index: 0; bottom: 0; }
.gx { position: relative; z-index: 1; }
.gx b { position: relative; }
.gx b::before { content: ""; position: absolute; inset: -4px -2px; background: var(--vert-fond); z-index: -1; border-radius: 2px; }

/* le calendrier : sept colonnes égales, chaque événement se clique et s'ouvre à droite */
.cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal .j, .cal .jf { min-width: 0; }
.cal a.ev { cursor: pointer; transition: transform .1s, box-shadow .1s; }
.cal a.ev:hover { box-shadow: 0 2px 6px rgba(26,32,57,.16); transform: translateY(-1px); }
.cal .ev--plus { background: var(--g10); border-color: var(--g30); color: var(--g70); text-align: center; }

/* les équipes : dans un volet de marque, un bandeau par entité au-dessus de sa grille */
.annuaire__entite { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--g05); border-top: 1px solid var(--g20); border-bottom: 1px solid var(--g20); font-size: 13px; }
.annuaire__entite b { font-weight: 700; }
.annuaire__entite span { color: var(--g60); font-size: 12px; }
.annuaire__entite .lien { margin-left: auto; font-size: 12px; }
.annuaire__entite + .annuaire { border-top: none; }
.annuaire__plus { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--g20); font-size: 13px; font-weight: 600; color: var(--navy); }
.annuaire__plus:hover { background: var(--g05); }
.annuaire__plus svg { transform: rotate(-90deg); color: var(--g60); }

/* les actualités : la une, les secondaires, les brèves */
.article.une--image { grid-template-columns: 280px 1fr auto; align-items: start; }
.une__image { width: 280px; height: 180px; object-fit: cover; border-radius: var(--r); display: block; }
.articles { display: grid; grid-template-columns: 1fr 1fr; }
.articles .article { border-right: 1px solid var(--g20); grid-template-columns: 1fr auto; }
.articles .article:nth-child(2n) { border-right: none; }
.article__image { width: 100%; height: 140px; object-fit: cover; border-radius: var(--r); display: block; margin-bottom: 10px; grid-column: 1 / -1; }
.breves table { border-top: 1px solid var(--g20); }

/* l'article : une page de lecture, 68 caractères de large, ses figures légendées */
.article-page { padding: 0; overflow: hidden; }
.article-page__tete { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.article-page__corps { padding: 28px 40px 32px; max-width: 820px; }
.article-page h1 { margin: 12px 0 8px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.article-page__chapeau { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: var(--g70); font-weight: 500; }
.article-page__texte { font-size: 15px; line-height: 1.7; color: var(--g90); }
.article-page__texte p, .article-page__texte h3, .article-page__texte ul, .article-page__chapeau { max-width: 68ch; }
.article-page__texte p { margin: 0 0 14px; }
.article-page__texte h3 { margin: 26px 0 8px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
.article-page__texte ul { margin: 0 0 14px; padding-left: 22px; }
.article-page__texte li { margin: 4px 0; }
.article-page__texte b { color: var(--navy); }
.article__figure { margin: 22px 0 26px; }
.article__figure img { display: block; width: 100%; max-height: 560px; object-fit: cover; object-position: top; border-radius: var(--r); border: 1px solid var(--g30); box-shadow: 0 8px 24px rgba(26,32,57,.08); }
.article__figure figcaption { font-size: 12px; color: var(--g60); margin-top: 6px; }
.article-page__pied { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--g20); }
.article h3 a { color: inherit; }
.article h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* la une sur l'accueil */
/* l'administration : la liste d'abord, le geste replié, l'état de premier jour */
.regles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 16px 20px; }
.regle { border: 1px solid var(--g30); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: #fff; }
.regle .eyebrow { margin: 0; }
.regle b.val { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.regle .note { margin: 0; }
.regle-ligne { border-top: 1px solid var(--g20); }
.regle-ligne summary, .regle-ligne--tete { list-style: none; display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) minmax(140px, 1fr) 110px 24px; gap: 16px; align-items: center; padding: 10px 20px; cursor: pointer; font-size: 13px; }
.regle-ligne summary::-webkit-details-marker { display: none; }
.regle-ligne summary:hover { background: var(--g05); }
.regle-ligne[open] summary { background: var(--g05); }
.regle-ligne[open] summary svg.chev { transform: rotate(180deg); }
.regle-ligne summary svg.chev { color: var(--g50); transition: transform .15s; }
.regle-ligne--tete { cursor: default; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g60); background: var(--g05); border-bottom: 1px solid var(--g30); }
.regle-ligne__nom b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.regle-ligne__nom .sous { display: block; font-size: 12px; color: var(--g60); }
.regle-ligne__mesure b { font-weight: 700; }
.regle-ligne__mesure .sous { display: block; font-size: 12px; color: var(--g60); }
.regle-ligne__leviers { display: flex; flex-wrap: wrap; gap: 4px; }
.regle-ligne__leviers .filtre { font-size: 11px; padding: 1px 8px; }
.regle-ligne__detail { display: grid; grid-template-columns: 2fr 1fr; gap: 16px 24px; padding: 14px 20px 18px 20px; border-top: 1px solid var(--g20); background: #fff; }
.sync { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 16px 20px; }
.sync > div { border: 1px solid var(--g30); border-radius: var(--r); padding: 12px 14px; }
.sync > div > b { display: block; font-size: 14px; }
.sync .etat { margin-top: 6px; }
.retours { display: flex; flex-direction: column; }
.retour { padding: 16px 20px 6px; border-top: 1px solid var(--g20); }
.retour__tete { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.retour__message { margin: 10px 0 12px; font-size: 14px; line-height: 1.55; max-width: 80ch; padding: 10px 14px; background: var(--g05); border-left: 3px solid var(--g30); border-radius: 0 var(--r) var(--r) 0; overflow-wrap: anywhere; }   /* une adresse Boond collée dans un retour se coupe au lieu de déborder l'écran */
.retour__reponse { padding: 0; }
.retour__reponse .form__pied { border-top: none; padding: 8px 0 10px; }
.mon-profil { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 20px; align-items: start; }
.mon-profil img, .mon-profil .av-g { width: 96px; height: 96px; border-radius: var(--r); object-fit: cover; background: var(--vert); color: var(--navy); display: grid; place-items: center; font-weight: 800; font-size: 28px; }

/* ── 5. les écrans étroits ──────────────────────────────────────────────── */
@media (max-width: 1280px) {
  th.ter, td.ter { display: none; }
  th, td { padding-left: 14px; padding-right: 14px; }
  th, th.n { white-space: normal; }
  td.gestes { white-space: normal; }
  td.gestes .btn { margin: 2px 0; }
}
@media (max-width: 1100px) {
  th.sec, td.sec { display: none; }
  .indicateurs, .indicateurs--c3, .indicateurs--c4, .indicateurs--c5 { grid-template-columns: repeat(2, 1fr); }
  .indicateurs--c5 .ind { grid-column: auto; }
  .indicateurs .ind { border-right: 1px solid var(--g20); border-bottom: 1px solid var(--g20); }
  .indicateurs .ind:nth-child(2n) { border-right: none; }
  .indicateurs .ind:last-child, .indicateurs .ind:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .grille { grid-template-columns: 1fr; }
  .globale .cherche { max-width: 260px; }
  .nav .fin { display: none; }
}
@media (max-width: 900px) {
  .grille2, .grille3, .grille-large { grid-template-columns: 1fr; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .chiffres div:nth-child(2) { border-right: none; }
  .chiffres div:nth-child(-n+2) { border-bottom: 1px solid var(--g20); }
  .champs.c3, .champs.c4 { grid-template-columns: 1fr 1fr; }
  .entete__ligne { flex-wrap: wrap; align-items: flex-start; }
  .nav { overflow: visible; flex-wrap: wrap; height: auto; }
  .nav a { white-space: nowrap; height: 46px; }
  .lecture { grid-template-columns: 1fr; }
  .lecture div { border-right: none; padding-left: 0; padding-bottom: 10px; }
  .cra { grid-template-columns: 1fr; }
  .cra__etats { grid-template-columns: 1fr 1fr; }
  .annuaire { grid-template-columns: 1fr 1fr; }
  .gb, .gx { gap: 3px; }
  .gx span, .gx b { font-size: 10px; overflow: hidden; }
  .sousnav { flex-wrap: wrap; gap: 8px 20px; }
  .sousnav .periode { margin-left: 0; flex-wrap: wrap; }
  .article.une--image { grid-template-columns: 1fr; } .une__image { width: 100%; } .articles { grid-template-columns: 1fr; } .articles .article { border-right: none; }
  .globale .cherche { display: none; }
  .globale .ico[data-recherche] { display: grid; }
  .regles, .sync { grid-template-columns: 1fr 1fr; }
  .regle-ligne summary, .regle-ligne--tete { grid-template-columns: minmax(0, 1fr) 110px 24px; gap: 10px; }
  .regle-ligne--tete span:nth-child(2), .regle-ligne--tete span:nth-child(3), .regle-ligne summary > span:nth-child(2), .regle-ligne summary > span:nth-child(3) { display: none; }
  .regle-ligne__detail { grid-template-columns: 1fr; }
  .regle-ligne__nom b { white-space: normal; }
}
@media (max-width: 720px) {
  .globale, .nav, .entete, .corps, .pied { padding-left: 12px; padding-right: 12px; }
  .globale { gap: 10px; }
  .globale .marque { padding-right: 10px; }
  .globale .perim small, .globale button.qui > div:not(.av) { display: none; }
  .globale .ico[href="/aide"] { display: none; }
  .globale .droite { gap: 4px; }
  .globale .perim { padding: 0 8px; }
  .globale button.qui { padding-left: 8px; margin-left: 4px; }
  .indicateurs, .indicateurs--c2, .indicateurs--c3, .indicateurs--c4, .indicateurs--c5 { grid-template-columns: 1fr; }
  .indicateurs .ind { border-right: none; border-bottom: 1px solid var(--g20); }
  .indicateurs .ind:last-child { border-bottom: none; }
  .chiffres, .champs.c2, .champs.c3, .champs.c4, .annuaire, .cra__etats { grid-template-columns: 1fr; }
  .chiffres div { border-right: none; border-bottom: 1px solid var(--g20); }
  .sousnav { flex-wrap: wrap; gap: 0 18px; min-height: 0; }
  .sousnav > a { white-space: nowrap; flex: none; height: 32px; }
  .sousnav { row-gap: 8px; }
  .nav { overflow: visible; flex-wrap: wrap; height: auto; padding-bottom: 0; }
  .nav a { height: 44px; }
  .sousnav .periode { margin-left: 0; flex: none; }
  .entete .periode { width: 100%; justify-content: space-between; }
  .etapes { flex-direction: column; align-items: stretch; gap: 8px; }
  .etapes div::after { display: none; }
  .pan__tete { flex-wrap: wrap; }
  .filtres-l .cherche { max-width: 100%; }
  .filtres, .filtres-l, .filtres-l > *, .filtres > * { flex-wrap: wrap; }
  .filtres-l .lib, .filtres .lib { margin-left: 0 !important; }
  .gx span:nth-child(even) { visibility: hidden; }
  .seuil__corps { grid-template-columns: 1fr; }
  /* le calendrier : un point par événement, le jour se touche et s'ouvre à droite */
  .cal .j { min-height: 46px; padding: 4px 3px; }
  .cal .j[data-jour] { cursor: pointer; }
  .cal .j[data-jour]:active { background: var(--g10); }
  .cal .j b { margin-bottom: 2px; }
  .cal .ev { display: inline-block; width: 7px; height: 7px; padding: 0; margin: 0 2px 2px 0; border: none; border-radius: 50%; font-size: 0; line-height: 0; background: var(--g50); vertical-align: top; }
  .cal .ev.mission { background: var(--rouge); } .cal .ev.groupe { background: var(--vert); } .cal .ev.paie { background: var(--ambre); }
  .cal .ev--plus { width: auto; height: auto; font-size: 10px; line-height: 1.2; background: none; color: var(--g60); font-weight: 700; margin: 0; display: block; }
  .cal .ev--plus span { display: none; }
  .cal .ev--plus::after { content: "+" attr(data-n); }
  .tiroir { width: 100vw; }
  .pied { flex-direction: column; gap: 12px; align-items: flex-start; }
  .pied .liens { flex-wrap: wrap; gap: 8px 16px; }
  .actions, .pan__tete .droite { flex-wrap: wrap; } .entete .actions { width: 100%; }
  .regles, .sync { grid-template-columns: 1fr; }
  .fiche__grille { grid-template-columns: 1fr; }
  .article-page__corps { padding: 18px 16px 22px; }
  .article-page h1 { font-size: 24px; }
  .regle-ligne summary { padding: 10px 12px; }
  .mon-profil { grid-template-columns: 1fr; }
  .menu, #menu-perimetre { position: fixed; left: 8px; right: 8px; top: 62px; max-height: calc(100vh - 80px); }
  .bandeau { margin: 12px 12px 0; padding: 12px 14px; font-size: 13px; }
  .bandeau--bienvenue { padding-right: 52px; }
  .bulle { right: 12px; bottom: 74px; height: 44px; padding: 0 6px; }
  .bulle .robot { width: 30px; height: 30px; } .bulle__lib { display: none; }
  .menu-ancre { position: static; }
  .modale { width: calc(100vw - 16px); }
  /* tout tableau devient une pile de cartes : une ligne par enregistrement, chaque cellule précédée de son intitulé */
  table, tbody, tr, td { display: block; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--g20); padding: 10px 0; }
  tr:last-child { border-bottom: none; }
  td { border: none; padding: 3px 16px; }
  td.n { text-align: left; }
  td[data-th]:not([data-th=""])::before { content: attr(data-th); display: inline-block; min-width: 96px; font-size: 11px; color: var(--g60); text-transform: uppercase; letter-spacing: .06em; margin-right: 8px; vertical-align: top; }
  /* la première cellule est l'identité de la carte : sans intitulé, en tête ; les gestes non plus */
  tr > td:first-child[data-th]:not(.deco)::before, tr > td.deco + td.deco + td[data-th]::before, tr > td.deco + td[data-th]::before, td.gestes[data-th]::before { display: none; }
  tr > td:first-child, tr > td.deco + td.deco + td { padding-bottom: 6px; font-size: 14px; }
  td.sec, td.ter { display: block; }
  td:empty, td[data-vide], td.sec:empty, td.ter:empty { display: none; }
  td.deco, td:has(> .grav:only-child), td:has(> .tico:only-child), td:has(> .gravite:only-child) { display: none; }
  /* la gravité d'une alerte devient le liseré de sa carte */
  tr:has(.grav.ko), tr:has(.gravite.ko) { border-left: 3px solid var(--rouge); }
  tr:has(.grav.att), tr:has(.gravite.att) { border-left: 3px solid var(--ambre); }
  tr:has(.grav.info), tr:has(.gravite.info) { border-left: 3px solid var(--bleu); }
  td.gestes { text-align: left; white-space: normal; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .tiroir tr { padding: 10px 0; }
  .pagin { padding: 12px 16px; }
}
@media (max-width: 480px) {
  .logo__mot { display: none; }
  .globale .perim .perim__lib { display: none; }
  .globale .perim .perim__court { display: inline; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .globale .perim { padding: 0 8px; gap: 6px; max-width: none; }
  .globale .marque { padding-right: 6px; border-right: none; }
  .globale .perim { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .article { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .globale { gap: 8px; }
  .globale .perim { max-width: 104px; }
  .plage b small { display: none; } .seg a { padding: 0 8px; }
}

/* ── 6. l'accueil : la page d'atterrissage (05/09) ─═════════════════════════════ */
.acc { display: flex; flex-direction: column; gap: 32px; padding-bottom: 44px; }
.acc-cadre { padding: 0 32px; }
.acc h2.titre-s { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.acc .tete-s { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.acc .tete-s p { margin: 2px 0 0; font-size: 13px; color: var(--g60); }
.acc .tete-s a.plus { font-size: 13px; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.acc .tete-s a.plus:hover { text-decoration: underline; text-underline-offset: 3px; }

/* le bandeau : la photo du groupe, le bonjour, la recherche ; la journée en carte, sur les trois dernières colonnes des tuiles */
.hero { position: relative; color: #fff; background: var(--navy) center 38% / cover no-repeat; min-height: 420px; display: flex; align-items: stretch; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,32,57,.86) 0%, rgba(26,32,57,.6) 42%, rgba(26,32,57,.1) 100%); }
.hero .acc-cadre { position: relative; width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end; padding-top: 44px; padding-bottom: 40px; }
.hero .dire { grid-column: 1 / span 3; padding-right: 28px; padding-bottom: 8px; }
.hero .journee { grid-column: 4 / span 3; }
.hero .eyebrow { color: var(--navy-20); }
.hero h1 { margin: 10px 0 8px; font-size: 40px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; }
.hero h1 span { color: var(--vert); }
.hero p.mission { margin: 0 0 22px; max-width: 600px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.86); }
.hero .cherche-g { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; background: #fff; color: var(--navy); border-radius: var(--r); max-width: 600px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.hero .cherche-g input { flex: 1; border: none; outline: none; font: 400 14px var(--voix); color: var(--navy); background: transparent; min-width: 0; }
.hero .cherche-g input::placeholder { color: var(--g60); }
.hero .cherche-g kbd { font: 500 11px var(--mono); color: var(--g60); border: 1px solid var(--g30); border-radius: 3px; padding: 1px 6px; }
.hero .cherche-g svg { color: var(--g60); }
.journee { background: #fff; color: var(--navy); border-radius: var(--r); box-shadow: 0 20px 50px rgba(0,0,0,.22); margin-bottom: -96px; }
.journee .pan__tete { padding: 14px 18px; }
.journee ul { list-style: none; margin: 0; padding: 4px 6px; }
.journee li a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); }
.journee li a:hover { background: var(--g05); }
.journee li + li { border-top: 1px solid var(--g20); }
.journee .ico-j { width: 34px; height: 34px; border-radius: var(--r); background: var(--navy-10); color: var(--navy); display: grid; place-items: center; }
.journee .ico-j.att { background: var(--ambre-fond); color: var(--ambre-encre); }
.journee .ico-j.ko { background: var(--rouge-fond); color: var(--rouge-encre); }
.journee b { display: block; font-size: 13px; font-weight: 600; }
.journee small { display: block; font-size: 12px; color: var(--g60); }
.journee .chev { color: var(--g50); display: inline-flex; }
.apres-hero { padding-top: 80px; }
.apres-hero:empty { padding-top: 24px; } .apres-hero--simple:empty { display: none; }
.apres-hero--simple { padding-top: 0; }

/* les accès rapides : des pastilles sous la recherche, dans le bandeau ; la phrase de chacune en bulle (02/10) */
.acces-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; max-width: 600px; }
.acc-acces { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 16px; font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s, border-color .15s; }
.acc-acces:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.acc-acces svg { opacity: .85; }
.acc-acces .n { font-size: 11px; font-weight: 700; color: var(--rouge-encre); background: var(--rouge-fond); border-radius: 9px; padding: 0 7px; line-height: 18px; margin-right: -4px; }
.acc-acces--choisir { width: 32px; padding: 0; justify-content: center; background: transparent; border-style: dashed; }
.acc-acces--choisir svg { opacity: .75; }

/* la grille principale : l'actualité à gauche, l'agenda et les arrivées à droite */
.grille-acc { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 20px; align-items: stretch; }
.col-acc > .une-acc:last-child { flex: 0 0 auto; }   /* la une garde sa hauteur : elle ne s'étire pas à celle de la colonne voisine (une photo d'un mètre sur un portable) */
.col-acc { display: flex; flex-direction: column; gap: 20px; }
.col-acc .tete-s { margin-bottom: 0; }
.col-acc .tete-s + .panneau, .col-acc .tete-s + .une-acc { margin-top: -6px; }
.col-acc .panneau + .tete-s { margin-top: 12px; }
.une-acc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: #fff; border: 1px solid var(--g30); border-radius: var(--r); overflow: hidden; }
.une-acc .img { display: block; min-height: 300px; background: var(--g20) center / cover no-repeat; }
/* sans brève, la une se pose en hauteur, la photo au-dessus du texte, et prend la hauteur de la colonne voisine : pas de vide sous l'article */
.col-acc > .une-acc--seule:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.une-acc--seule .img { flex: 1; min-height: 240px; }
.une-acc--seule .txt { flex: none; }
.une-acc .txt { padding: 26px 28px 24px; display: flex; flex-direction: column; }
.une-acc .meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--g60); margin-bottom: 12px; }
.une-acc h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.une-acc h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.une-acc p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--g70); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.une-acc .lire { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.une-acc .auteur { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--g60); }
.breves-acc { list-style: none; margin: 0; padding: 0; }
.breves-acc li + li { border-top: 1px solid var(--g20); }
.breves-acc li a { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; padding: 12px 20px; }
.breves-acc li a:hover { background: var(--g05); }
.breves-acc .vig { width: 96px; height: 60px; border-radius: var(--r); background: var(--g20) center / cover no-repeat; }
.breves-acc b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.breves-acc small { display: block; font-size: 12px; color: var(--g60); margin-top: 2px; }
.breves-acc .chev { color: var(--g50); display: inline-flex; }
.arrivees-acc { list-style: none; margin: 0; padding: 6px 8px; }
.arrivees-acc li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; }
.arrivees-acc li + li { border-top: 1px solid var(--g20); }
.arrivees-acc .quand { font-size: 12px; color: var(--g60); white-space: nowrap; }
/* cette semaine dans le groupe (02/10) : les victoires et les anniversaires d'arrivée, côte à côte ; seul, un bloc prend la largeur */
.semaine-acc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.semaine-acc .tete-s { margin-bottom: 14px; }
.semaine-acc__liste .quand { display: inline-flex; align-items: center; gap: 10px; }
.semaine-acc__liste li > :first-child { flex: 1; min-width: 0; }
.semaine-acc__liste .quand { flex: none; }
/* seul sur sa rangée, le bloc range ses lignes sur deux colonnes : une ligne de 1 400 px ne se lit pas */
.semaine-acc > :only-child .semaine-acc__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.semaine-acc > :only-child .semaine-acc__liste li:nth-child(2) { border-top: 0; }
@media (max-width: 720px) {
  .semaine-acc__liste .quand { flex-direction: column; align-items: flex-end; gap: 4px; }
  .semaine-acc > :only-child .semaine-acc__liste { grid-template-columns: minmax(0, 1fr); }
  .semaine-acc > :only-child .semaine-acc__liste li:nth-child(2) { border-top: 1px solid var(--g20); }
}

/* les espaces (02/10) : une carte par famille ouverte, dans la grammaire des panneaux : la pastille d'icône des tuiles, le nom, la phrase, puis les pages
   de l'espace en liens directs. Les trois rangées de chaque carte s'alignent d'une carte à l'autre (sous-grille) : les listes commencent à la même hauteur. */
.espaces-acc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.espaces-acc--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.espaces-acc--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.espaces-acc--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.espaces-acc--1 { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
.espace-acc { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 16px; padding: 18px 18px 8px; background: #fff; border: 1px solid var(--g30); border-radius: var(--r); transition: border-color .15s; }
.espace-acc:hover { border-color: var(--navy-40); }
.espace-acc .tete-e { display: flex; align-items: center; gap: 12px; color: var(--navy); }
.espace-acc .ico-e { flex: none; width: 38px; height: 38px; border-radius: var(--r); background: var(--navy-10); color: var(--navy); display: grid; place-items: center; transition: background .15s, color .15s; }
.espace-acc .tete-e:hover .ico-e { background: var(--navy); color: #fff; }
.espace-acc .nom { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.espace-acc .fl { color: var(--g50); display: inline-flex; transition: transform .2s, color .2s; }
.espace-acc .tete-e:hover .fl { color: var(--navy); transform: translateX(3px); }
.espace-acc p { margin: 10px 0 12px; font-size: 13px; line-height: 1.45; color: var(--g70); }
.espace-acc ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--g20); }
.espace-acc li + li { border-top: 1px solid var(--g20); }
.espace-acc li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--navy); }
.espace-acc li a:hover { color: var(--vert-encre); }
.espace-acc li .chev { color: var(--g40); display: inline-flex; transition: transform .15s, color .15s; }
.espace-acc li a:hover .chev { color: var(--vert-encre); transform: translateX(2px); }
.espace-acc li.reste a { font-weight: 500; color: var(--g60); }
@media (prefers-reduced-motion: reduce) { .espace-acc .fl, .espace-acc li .chev { transition: none; } .espace-acc .tete-e:hover .fl, .espace-acc li a:hover .chev { transform: none; } }

/* les indicateurs clés : le bandeau de Piloter lui-même (02/10) ; l'en-tête porte deux gestes, Personnaliser et le tableau de bord */
.acc .tete-s .plus-g { display: flex; align-items: center; gap: 20px; }

/* les marques (quatre cartes, aussi la page /groupe/marques) et les applications */
.deux-acc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.deux-acc > div { display: flex; flex-direction: column; }
.deux-acc > div > .panneau, .deux-acc > div > .marques-g { flex: 1; }
.marques-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.corps > .marques-g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mq { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 16px; background: #fff; border: 1px solid var(--g30); border-radius: var(--r); transition: border-color .12s, transform .12s; min-height: 168px; }
.mq:hover { border-color: var(--navy-40); transform: translateY(-2px); }
.mq .mq__logo { height: 50px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.mq img { height: var(--h, 38px); width: auto; max-width: 150px; object-fit: contain; }
.mq b { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; }
.mq small { display: block; font-size: 12px; color: var(--g60); margin-top: 2px; }
.mq .mq__sous { display: block; font-size: 12px; color: var(--navy); font-weight: 600; margin-top: 6px; }
.mq .mq__pays { display: block; font-size: 12px; color: var(--g60); margin-top: 2px; }
.applis-acc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; height: 100%; }
.applis-acc a { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--g20); border-right: 1px solid var(--g20); min-height: 84px; }
/* le signe du coin : la case s'ouvre ailleurs (ou ici) ; discret, net au survol */
.applis-acc .coin { position: absolute; top: 12px; right: 12px; color: var(--g40); opacity: .7; transition: opacity .12s, color .12s, transform .12s; display: inline-flex; }
.applis-acc a:hover .coin { color: var(--navy); opacity: 1; transform: translate(1px, -1px); }
.applis-acc a:nth-child(-n+3) { border-top: none; } .applis-acc a:nth-child(3n) { border-right: none; }
.applis-acc a:hover { background: var(--g05); }
.applis-acc .m { width: 28px; height: 28px; display: grid; place-items: center; }
.applis-acc .m img { width: 24px; height: 24px; object-fit: contain; }
.applis-acc b { display: block; font-size: 13px; font-weight: 600; }
.applis-acc small { display: block; font-size: 12px; color: var(--g60); }

/* la vie du groupe : trois cartes à photo */
.vie-acc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vie-acc .carte { background: #fff; border: 1px solid var(--g30); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.vie-acc .img { height: 150px; background: var(--g20) center / cover no-repeat; }
.vie-acc .txt { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.vie-acc h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.vie-acc h3 svg { color: var(--g50); }
.vie-acc p { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--g70); }
.vie-acc .lien { margin-top: auto; }

/* la fiche d'une marque */
.fiche-marque__tete { display: flex; align-items: center; gap: 24px; padding: 24px; border-bottom: 1px solid var(--g20); background: linear-gradient(90deg, var(--g05), #fff 60%); }
.fiche-marque__logo { flex: none; width: 148px; height: 104px; display: grid; place-items: center; background: #fff; border: 1px solid var(--g20); border-radius: var(--r); box-shadow: 0 8px 24px rgba(16, 24, 40, .06); }
.fiche-marque__logo img { height: var(--h, 56px); width: auto; max-width: 120px; object-fit: contain; }
.fiche-marque__titre { min-width: 0; }
.fiche-marque__tete h2 { margin: 4px 0 10px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.fiche-marque__reperes { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.fiche-marque__reperes .repere { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--g80); padding: 4px 10px; border: 1px solid var(--g20); border-radius: 12px; background: #fff; text-decoration: none; }
.fiche-marque__reperes .repere .i { color: var(--g60); }
.fiche-marque__reperes a.repere:hover { border-color: var(--navy); color: var(--navy); }
.fiche-marque .prose { padding: 20px 24px 24px; }
.fiche-marque .prose p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--g80); }
.prose--colonnes { column-count: 2; column-gap: 36px; max-width: none; }
.prose--colonnes p { break-inside: avoid; }
@media (max-width: 900px) { .prose--colonnes { column-count: 1; } }
.liste-personnes { list-style: none; margin: 0; padding: 6px 8px; }
.liste-personnes li { padding: 8px 10px; }
.liste-personnes li + li { border-top: 1px solid var(--g20); }

@media (max-width: 1100px) {
  .grille-acc { grid-template-columns: 1fr; }
  .espaces-acc, .espaces-acc--4, .espaces-acc--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vie-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deux-acc { grid-template-columns: 1fr; }
  .corps > .marques-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .acc-cadre { padding: 0 12px; }
  .hero { min-height: 0; }
  .hero .acc-cadre { grid-template-columns: 1fr; gap: 20px; padding-top: 26px; padding-bottom: 20px; }
  .hero .dire, .hero .journee { grid-column: auto; padding-right: 0; }
  .hero h1 { font-size: 28px; }
  .hero p.mission { font-size: 14px; }
  .journee { margin-bottom: 0; }
  .apres-hero { padding-top: 16px; }
  .acces-acc { margin-top: 12px; gap: 6px; }
  .acc .tete-s:has(.plus-g) { flex-direction: column; gap: 8px; }
  .une-acc { grid-template-columns: 1fr; } .une-acc .img { min-height: 190px; }
  .une-acc h3 { font-size: 18px; }
  .breves-acc li a { grid-template-columns: 72px 1fr auto; padding: 10px 14px; } .breves-acc .vig { width: 72px; height: 48px; }
  .espaces-acc, .espaces-acc--4, .espaces-acc--5, .espaces-acc--2, .vie-acc { grid-template-columns: 1fr; }
  .marques-g, .corps > .marques-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .applis-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); } .applis-acc a:nth-child(3) { border-top: 1px solid var(--g20); } .applis-acc a:nth-child(3n) { border-right: 1px solid var(--g20); } .applis-acc a:nth-child(2n) { border-right: none; }
  .fiche-marque__tete { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pied { flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 20px 16px 24px; }
  .pied .liens { justify-content: center; gap: 8px 16px; }
  .pied .propulse { order: 2; }
  .pied .liens { order: 1; }
  .pied .pied__logo { display: none; }
}

/* la barre de filtres de Comptes et rôles : la recherche, deux menus, le bouton, les pastilles de population */
.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--g20); }
.filtres input[type=search] { height: 32px; font: 13px var(--voix); padding: 0 10px; border: 1px solid var(--g40); border-radius: var(--r); min-width: 220px; flex: 1; }
.filtres select { height: 32px; font: 13px var(--voix); padding: 0 8px; border: 1px solid var(--g40); border-radius: var(--r); background: #fff; }
.filtres__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tab-comptes select { height: 30px; font: 13px var(--voix); padding: 0 6px; border: 1px solid var(--g40); border-radius: var(--r); background: #fff; width: 100%; min-width: 0; }
.tab-comptes td { vertical-align: top; }
.tab-comptes th:nth-child(1) { width: 24%; } .tab-comptes th:nth-child(2) { width: 24%; } .tab-comptes th:nth-child(3) { width: 15%; } .tab-comptes th:nth-child(4) { width: 19%; }
.tab-comptes td.gestes { white-space: normal; }
/* ── 7. les utilitaires : les réglages qui étaient écrits en ligne dans les vues (A6-16), un mot chacun ── */
.u-nowrap { white-space: nowrap; } .u-ml8 { margin-left: 8px; } .u-mla { margin-left: auto; } .u-m0 { margin: 0; } .u-mb6 { margin-bottom: 6px; } .u-mb8 { margin-bottom: 8px; } .u-mb10 { margin-bottom: 10px; }
.u-mt4 { margin-top: 4px; } .u-mt8 { margin-top: 8px; } .u-mt10 { margin-top: 10px; } .u-mt12 { margin-top: 12px; } .u-pt0 { padding-top: 0; } .u-py6 { padding: 6px 0; }
.u-flex8 { display: flex; gap: 8px; } .u-inline { display: inline; } .u-block { display: block; } .u-centre { text-align: center; }
.u-navy20 { color: var(--navy-20); } .u-g60 { color: var(--g60); } .u-g70 { color: var(--g70); } .u-rouge { color: var(--rouge-encre); }
.u-t13 { font-size: 13px; } .u-t15 { font-size: 15px; } .u-w500 { font-weight: 500; } .u-sans-bord { border: none; } .u-max760 { max-width: 760px; }
.u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .u-w48 { width: 48px; } .u-w120 { width: 120px; } .u-w130 { width: 130px; } .u-w160 { width: 160px; } 

/* le lexique de l'aide : deux colonnes de définitions, le mot en gras, la phrase en gris */
.lexique { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; }
.lexique > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--g20); font-size: 13px; line-height: 1.5; }
.lexique dt { font-weight: 600; color: var(--navy); }
.lexique dd { margin: 0; color: var(--g70); }
@media (max-width: 900px) { .lexique { grid-template-columns: 1fr; } .lexique > div { grid-template-columns: 1fr; gap: 2px; } }

/* la charte d'interface : les composants rendus par leur code, une règle, des emplois ; la feuille ne fait que les poser */
.charte-i .pan__tete { flex-wrap: nowrap; } .charte-i .pan__tete .titre { min-width: 0; flex: 1; } .charte-i .pan__tete .droite { flex: none; max-width: 220px; }
.charte-i .pan__tete .note { display: block; text-align: right; font-size: 12px; color: var(--g60); }
.charte-fmts { display: inline-flex; gap: 10px; align-items: center; } .charte-fmts > span { display: inline-flex; }
.charte-form input, .charte-form select { width: 100%; }
.charte-sign { display: flex; align-items: center; gap: 4px; color: var(--navy); } .charte-sign b { display: block; height: 2px; width: 160px; background: var(--vert); margin-left: 6px; }
.nuancier { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.nuancier > div { display: grid; grid-template-columns: 28px 1fr; gap: 2px 10px; align-items: center; font-size: 12px; }
.nuancier i { grid-row: span 2; width: 28px; height: 28px; border-radius: var(--r); border: 1px solid var(--g20); }
.nuancier b { font-weight: 600; color: var(--navy); }
.nuancier span { font: 500 11px var(--mono); color: var(--g60); }
.charte-typo h1 { font-size: 24px; margin: 0 0 4px; } .charte-typo .sous { color: var(--g70); margin: 0 0 14px; } .charte-typo h2 { font-size: 15px; margin: 0 0 6px; }
.charte-typo p { margin: 0 0 8px; font-size: 13px; color: var(--g70); line-height: 1.6; } .charte-typo code { font: 500 12px var(--mono); color: var(--navy); background: var(--g10); padding: 2px 6px; border-radius: 3px; }
.echant { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--g20); font-size: 13px; }
.echant:first-child { border-top: 0; padding-top: 0; }
.echant__lib { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g60); }
.charte-alertes { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--navy); }
.charte-alertes > span { display: inline-flex; align-items: center; gap: 8px; }
.charte-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; max-width: 760px; }
.charte-form .champ:first-child { grid-column: 1 / -1; }
.charte-form > div { grid-column: 1 / -1; display: flex; gap: 8px; }
@media (max-width: 900px) { .charte-form { grid-template-columns: 1fr; } .echant { grid-template-columns: 1fr; gap: 6px; } .charte-i .pan__tete .note { display: none; } }

/* ── le chargement : les quatre points du logotype battent, l'un après l'autre, pendant qu'une page ou une liste arrive.
   Rien d'autre ne bouge : ni voile, ni barre. Le corps porte « chargement » dès qu'un lien interne ou un formulaire part,
   après un quart de seconde (une page servie vite ne clignote pas) ; le tiroir et la palette portent les mêmes points en attendant l'API. */
@keyframes point-bat { 0%, 100% { opacity: .25; transform: scale(.85); } 40% { opacity: 1; transform: scale(1.12); } }
body.chargement .globale .logo svg circle:not(:first-child), .attente--points svg circle { transform-box: fill-box; transform-origin: center; animation: point-bat 1.1s ease-in-out infinite; }
body.chargement .globale .logo svg circle:nth-child(3), .attente--points svg circle:nth-child(2) { animation-delay: .14s; }
body.chargement .globale .logo svg circle:nth-child(4), .attente--points svg circle:nth-child(3) { animation-delay: .28s; }
body.chargement .globale .logo svg circle:nth-child(5), .attente--points svg circle:nth-child(4) { animation-delay: .42s; }
body.chargement { cursor: progress; }
.attente--points svg { display: block; margin: 0 auto 10px; height: 10px; width: auto; color: var(--navy-40); }
@media (prefers-reduced-motion: reduce) { body.chargement .globale .logo svg circle, .attente--points svg circle { animation: none; opacity: .6; } }

/* la liste des grands comptes : le nom et sa pastille de fiches sur une ligne, la société mère en dessous */
.tab-grands-comptes td:first-child { white-space: nowrap; }
.tab-grands-comptes td:first-child .sous { white-space: normal; }
.tab-grands-comptes td:first-child > .compte { vertical-align: middle; }

/* le dépli d'un constat de remplissage : un lien dans la cellule, puis les besoins en dessous, dans la même cellule */
.depli--creux { border-top: 0; margin-top: 4px; }
.depli--creux summary { padding: 0; font-size: 12px; font-weight: 600; color: var(--navy); border: 0; background: none; display: inline-flex; gap: 4px; }
.depli--creux summary:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.depli--creux[open] summary { border: 0; background: none; margin-bottom: 8px; }
.depli--creux .pan__corps { padding: 0; }
.depli--creux table { font-size: 12px; }
.depli--creux td, .depli--creux th { padding: 6px 10px; }
.depli--creux td:first-child, .depli--creux th:first-child { padding-left: 0; }

/* ── la rédaction (07/09) : la page à gauche telle qu'elle paraîtra, la publication à droite ─────────────────────── */
.redaction__grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.redaction__page { padding: 28px 40px 32px; }
.redaction__signe { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.redaction__signe .note { margin-left: auto; text-align: right; }
.redaction__signe .note.ko { color: var(--rouge-encre); font-weight: 600; }
.redaction__titre { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--g20); padding: 6px 0 10px; margin: 0 0 10px; font: 800 30px/1.15 var(--voix); letter-spacing: -.02em; color: var(--navy); background: none; outline: none; }
.redaction__titre:focus { border-bottom-color: var(--navy-40); }
.redaction__titre::placeholder, .redaction__chapeau::placeholder, .redacteur__texte:empty::before { color: var(--g40); }
.redaction__chapeau { display: block; width: 100%; border: 0; padding: 4px 0 8px; margin: 0 0 6px; font: 500 16px/1.5 var(--voix); color: var(--g70); background: none; resize: none; outline: none; }
.redacteur__barre { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 6px 0; margin: 0 0 8px; background: #fff; border-top: 1px solid var(--g20); border-bottom: 1px solid var(--g20); }
.redacteur__barre button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--r); background: none; font: 600 13px var(--voix); color: var(--g70); cursor: pointer; }
.redacteur__barre button:hover { background: var(--g10); color: var(--navy); }
.redacteur__barre button.actif { background: var(--navy-10); color: var(--navy); border-color: var(--navy-20); }
.redacteur__barre button svg { color: currentColor; }
.redacteur__barre .sep { width: 1px; height: 18px; background: var(--g20); margin: 0 6px; }
.redacteur__compte { margin-left: auto; font-size: 12px; color: var(--g60); padding-right: 4px; }
.redacteur__texte { min-height: 360px; outline: none; padding: 6px 0 40px; border-radius: var(--r); transition: box-shadow .15s; }
.redacteur__texte:empty::before { content: attr(data-placeholder); font-size: 15px; line-height: 1.7; }
.redacteur__texte.survol { box-shadow: inset 0 0 0 2px var(--vert); }
.redacteur__texte figure { position: relative; margin: 20px 0; }
.redacteur__texte figure img { display: block; max-width: 100%; border-radius: var(--r); }
.redacteur__texte figcaption, .article-page__texte figcaption { font-size: 12.5px; color: var(--g60); margin-top: 6px; }
.redacteur__texte figcaption:focus { outline: none; box-shadow: 0 1px 0 var(--navy-40); }
.redacteur__attente { color: var(--g50); font-style: italic; }
.redacteur__texte a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
/* ce que le texte d'un article sait rendre : les mêmes blocs à l'écran de rédaction et sur la page */
.article-page__texte ol { margin: 0 0 14px; padding-left: 22px; }
.article-page__texte b { font-weight: 700; color: var(--navy); }
.article-page__texte blockquote { margin: 18px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--vert); color: var(--g70); font-size: 16px; line-height: 1.6; max-width: 68ch; }
.article-page__texte blockquote p { margin: 0 0 6px; }
.article-page__texte figure { margin: 22px 0; max-width: 100%; }
.article-page__texte figure img { display: block; max-width: 100%; border-radius: var(--r); }
.article-page__texte table { margin: 14px 0 18px; width: auto; min-width: 50%; font-size: 13.5px; }
.article-page__texte th, .article-page__texte td { padding: 8px 12px; border-bottom: 1px solid var(--g20); vertical-align: top; }
.article-page__texte th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--g60); }
.article-page__texte a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.article-page__signe { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.article-page__auteur { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--g20); font-size: 13px; color: var(--g60); }
.article__signe { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.signe-pub { display: inline-flex; align-items: center; }
.signe-pub img { display: block; width: auto; }
.signe-pub--portail .logo { gap: 6px; } .signe-pub--portail .logo__mot { font-size: 12px; }
/* la publication : les gestes, la coche, la zone de dépôt */
.redaction__gestes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.redaction__gestes form { display: inline; }
label.coche { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--navy); text-transform: none; letter-spacing: 0; }
.depot { position: relative; display: grid; place-items: center; min-height: 150px; border: 1.5px dashed var(--g40); border-radius: var(--r); background: var(--g05); cursor: pointer; overflow: hidden; text-align: center; padding: 14px; transition: border-color .15s, background .15s; }
.depot:hover, .depot.survol, .depot:focus-visible { border-color: var(--vert); background: var(--vert-fond); outline: none; }
.depot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.depot__mot { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--g60); }
.depot__mot b { color: var(--navy); font-size: 13px; }
.depot__mot svg { color: var(--g50); margin-bottom: 4px; }
.depot--pleine { border-style: solid; border-color: var(--g30); background: var(--navy); min-height: 170px; }
.depot--pleine .depot__mot { opacity: 0; transition: opacity .15s; position: relative; z-index: 1; color: #fff; background: rgba(26, 32, 57, .78); padding: 10px 14px; border-radius: var(--r); }
.depot--pleine .depot__mot b, .depot--pleine .depot__mot svg { color: #fff; }
.depot--pleine:hover .depot__mot, .depot--pleine.survol .depot__mot { opacity: 1; }
kbd { font: 500 11px var(--mono); border: 1px solid var(--g40); border-radius: 3px; padding: 0 5px; }
@media (max-width: 1100px) { .redaction__grille { grid-template-columns: 1fr; } .redaction__page { padding: 20px 20px 28px; } }
@media (max-width: 720px) { .redaction__titre { font-size: 24px; } .redacteur__barre button span { display: none; } .redacteur__compte { display: none; } }

/* un champ rédigé dans un formulaire : le libellé du portail, le rédacteur en dessous, un cadre comme un champ */
.champ--redige { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; color: var(--g90); }   /* le rédacteur dedans n'hérite pas du libellé en capitales */
.champ--redige .champ__lib { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g60); margin-bottom: 6px; }
.champ--redige .champ__aide { display: block; margin: -2px 0 6px; }
.redacteur--formulaire { border: 1px solid var(--g40); border-radius: var(--r); padding: 0 12px 6px; background: #fff; }
.redacteur--formulaire:focus-within { border-color: var(--navy); }
.redacteur--formulaire .redacteur__barre { border-top: 0; position: static; }
.redacteur--formulaire .redacteur__texte { min-height: 100px; padding: 6px 0 10px; font-size: 14px; }
/* une fiche de retour d'expérience : la signature, le contexte, les trois colonnes, les chiffres */
.rex .rex__signe { display: flex; align-items: center; gap: 10px; padding-bottom: 0; }
/* la pastille des compétences d'une fiche porte dix mots : elle passe à la ligne, et l'en-tête ne sort plus d'un téléphone */
.rex .pan__tete .titre { min-width: 0; }
.rex .pan__tete .titre .pastille { white-space: normal; line-height: 1.5; }
/* une fiche se lit repliée : douze fiches ouvertes feraient douze pages à faire défiler */
.depli--rex { border-top: 0; }
.depli--rex summary { padding-top: 14px; }
/* la carte des comptes rendus porte une ancre : la flèche du mois y ramène au lieu de repartir du haut de page */
#cra { scroll-margin-top: 84px; }
.rex .rex__contexte { padding-top: 12px; padding-bottom: 0; }
.rex .rex__trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rex .rex__chiffres { padding-top: 0; }
.rex .article-page__texte { font-size: 13.5px; line-height: 1.6; color: var(--g70); }
.rex .article-page__texte p { margin: 0 0 8px; } .rex .article-page__texte ul, .rex .article-page__texte ol { margin: 0 0 8px; padding-left: 18px; }
@media (max-width: 900px) { .rex .rex__trois { grid-template-columns: 1fr; } }

/* les capsules de formation : des cartes avec vignette, la page d'une capsule avec sa vidéo ou son document */
.capsules { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; padding: 16px 20px 20px; }
.capsule { display: flex; flex-direction: column; border: 1px solid var(--g30); border-radius: var(--r); overflow: hidden; background: #fff; color: inherit; transition: transform .2s, border-color .2s; }
.capsule:hover { transform: translateY(-2px); border-color: var(--navy-40); }
.capsule__vig { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--navy-10) center / cover no-repeat; color: var(--navy-40); }
.capsule__lecture { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(26, 32, 57, .85); color: #fff; display: grid; place-items: center; }
.capsule__txt { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.capsule__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.capsule__txt b { font-size: 14px; line-height: 1.3; color: var(--navy); }
.capsule__txt small { font-size: 12px; color: var(--g60); }
.capsule__txt .etat, .capsule__txt .note { margin-top: auto; padding-top: 6px; font-size: 12px; }
.capsule-page { padding: 0; overflow: hidden; }
.capsule-page__video { display: block; width: 100%; max-height: 520px; background: #000; }
.capsule-page__doc { display: block; width: 100%; height: 560px; border: 0; border-bottom: 1px solid var(--g20); }
.capsule-page__vig { display: block; width: 100%; max-height: 380px; object-fit: cover; }
.capsule-page__corps { padding: 24px 32px 28px; }
.fichier-pose { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--g20); border-radius: var(--r); margin-bottom: 10px; font-size: 13px; }
.fichier-pose > div { flex: 1; min-width: 0; } .fichier-pose b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot__progres { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--vert); transition: width .2s; width: 0; }
@media (max-width: 720px) { .capsules { grid-template-columns: 1fr; padding: 12px; } .capsule-page__corps { padding: 18px; } }

/* l'ouverture d'un parcours : un complément que l'entité propose se distingue ; les cases à cocher se lisent en colonne */
label.coche { flex-wrap: wrap; }
label.coche .note { font-weight: 400; }
label.coche.coche--proposee { color: var(--navy); }
label.coche.coche--proposee::after { content: "proposé pour cette entité"; font-size: 11px; font-weight: 600; color: var(--vert-encre); margin-left: 6px; }

/* les gestes d'édition d'un événement, pour qui publie : discrets, à droite de la ligne */
.ev-gestes--edition { display: inline-flex; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--g20); }
/* en édition, la colonne de droite porte deux boutons de plus : elle passe sous le texte au lieu de le pousser hors de l'écran */
.ech--edition { grid-template-columns: 44px minmax(0, 1fr); }
.ech--edition .ech__droite { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; }
/* une adresse citée (la page d'origine d'un retour, un lien écrit dans la description d'un événement) peut se couper en dernier recours */
.retour__tete a, .ech .t span { overflow-wrap: anywhere; }

/* un quiz : une question par bloc, les choix en colonne ; à la correction, la bonne réponse et la vôtre */
.quiz { margin: 16px 0 6px; }
.quiz__q { border: 1px solid var(--g20); border-radius: var(--r); padding: 12px 16px 10px; margin: 0 0 10px; min-width: 0; }
.quiz__q legend { padding: 0 4px; font-size: 14px; }
.quiz__q > b { display: block; font-size: 14px; margin-bottom: 6px; }
.quiz__q .coche { padding: 4px 0; font-weight: 400; }
.quiz__q ul { margin: 4px 0 6px; padding-left: 18px; font-size: 13.5px; }
.quiz__q li { margin: 3px 0; color: var(--g60); } .quiz__q li.bonne { color: var(--navy); font-weight: 600; } .quiz__q li.fausse { color: var(--rouge-encre); }
.quiz__q .note { margin: 0; }

/* le bandeau des chiffres : une valeur en mots plutôt qu'en nombre reste lisible sur deux lignes ; cinq colonnes deviennent trois puis deux */
.chiffres b.mot { font-size: 17px; line-height: 1.25; }
/* la composition d'un quiz : une question par cadre, la bonne réponse cochée à gauche de son choix */
.quiz__q--edition { margin: 0 0 14px; padding: 6px 16px 14px; border: 1px solid var(--g20); border-radius: var(--r); }
.quiz__q--edition legend { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g60); }
.choix-ligne { display: flex; align-items: center; gap: 8px; } .choix-ligne input[type=radio] { flex: none; width: 16px; height: 16px; margin: 0; } .choix-ligne input[type=text], .choix-ligne input:not([type]) { flex: 1; }
.u-pb0 { padding-bottom: 0 !important; }
.cherche--large { display: flex; align-items: center; gap: 8px; max-width: 560px; border-radius: var(--r); font-size: 13px; }
/* le graphique de charge : une semaine provisoire (temps encore en saisie) est un réalisé pâle, plein, entre le figé et le hachuré du prévisionnel */
.leg i[data-v], .gb i[data-v] { background: var(--navy-40); }
.leg { flex-wrap: wrap; row-gap: 6px; }
/* un référent dans la liste : l'avatar centré sur le nom et sa ligne, comme partout ailleurs */
.personne--liste .qui { display: flex; align-items: center; gap: 12px; }
.personne--liste .qui__texte .sous { white-space: normal; } .personne--liste .qui b { font-weight: 700; }
/* la calculatrice : la ligne qui porte la marge se détache des lignes de calcul */
/* le calcul facteur par facteur (retour du 10/09/2026) : une équation par ligne, chaque facteur dit d'où il vient au survol ; replié, le chiffre d'abord */
.depli--calcul { margin-top: 10px; border-top: 1px solid var(--g20); }
.depli--calcul summary { padding: 10px 0; }
.depli--calcul[open] summary { background: none; border-bottom: 0; }
.calc-res .depli--calcul { border-top-color: var(--navy-60); }
.calc-res .depli--calcul summary { color: #fff; }
.calc-res .depli--calcul summary:hover { background: var(--navy-80); }   /* sur le bloc sombre, le survol reste sombre : le pli générique blanchit, et le texte blanc disparaissait */
.calc-res .depli--calcul summary svg { color: var(--navy-20); }
.calc-res .depli--calcul .note { color: var(--navy-20); }
.calcul { display: flex; flex-direction: column; margin: 2px 0 10px; }
.calcul__l { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lib lib" "eq res"; gap: 2px 14px; padding: 8px 0; border-bottom: 1px solid var(--g20); align-items: baseline; }
.calcul__l:last-child { border-bottom: 0; }
.calc-res .calcul__l { border-bottom-color: var(--navy-60); }
.calcul__lib { grid-area: lib; font: 700 11px var(--voix); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.calcul__eq { grid-area: eq; font: 500 13px/1.7 var(--mono); min-width: 0; }
.calcul__res { grid-area: res; font: 600 13px/1.7 var(--mono); white-space: nowrap; }
.calcul__res small { font: 500 11px var(--voix); opacity: .8; margin-left: 6px; }
.calc-res .depli--calcul .note a { color: #fff; }
.fac { border-bottom: 1px dotted currentColor; cursor: help; padding: 0 2px; border-radius: 2px; white-space: nowrap; }
.fac:hover, .fac:focus-visible { background: var(--vert); color: var(--navy); border-bottom-color: transparent; outline: 0; }
.calc-res .somme--fort b { font-size: 20px; }
.calc-res .somme--fort b small { font-size: 13px; color: var(--vert); margin-left: 6px; }
.panneau .somme--fort b { font-weight: 800; }
/* une case à cocher dans un champ de formulaire : la case et son libellé sur la ligne de saisie */
.champ .coche { display: flex; align-items: center; gap: 10px; height: 38px; font-size: 14px; color: var(--navy); cursor: pointer; }
.champ .coche input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--navy); }
/* la signature d'une publication portée par une marque sans vitrine : son nom, à la place d'un logo qui n'existe pas */
.signe-pub--nom { font-weight: 700; font-size: 13px; color: var(--navy); text-decoration: none; }
.signe-pub--nom:hover { text-decoration: underline; }
/* la navigation de mois de la carte des comptes rendus : deux fleches, dans la tete du panneau */
.cra__nav-g { display: inline-flex; gap: 2px; margin-right: 10px; }
.cra__nav { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--g30); border-radius: 6px; color: var(--navy); background: #fff; }
.cra__nav:hover { background: var(--g10); }
.cra__nav[aria-disabled] { color: var(--g40); background: var(--g05); cursor: default; }
/* le reste des valeurs secondaires d'une tuile : combien il en manque, et ou les lire */
.ind__plus { margin-top: 6px; font-size: 12px; color: var(--g60); }
.ind__plus a { color: var(--navy); }
/* la vue par entite : un volet repliable par marque, et la ligne du perimetre entier en pied */
.depli--entites > summary { padding: 12px 16px; border-top: 1px solid var(--g20); }
.panneau > .depli--entites:first-of-type > summary { border-top: 0; }
.tab-total td { border-top: 2px solid var(--g30); background: var(--g05); }
/* le compteur de signes d'un redacteur plafonne : rouge des que la fiche ne tiendrait plus sur une page */
.redacteur__compte.trop { color: var(--rouge); font-weight: 600; }

/* la part d'une entité dans une tuile (02/10) : un lien vers le tiroir filtré sur elle ; le nom se souligne au survol, comme les autres liens de la tuile */
.ind__sec a { display: block; color: inherit; border-radius: 2px; }
.ind__sec a:hover span { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* la tuile minimale (l'accueil, 02/10) : la tuile du tableau de bord réduite à son nom, sa valeur, sa variation, sur une rangée ;
   même survol (le papier se grise) ; la flèche du coin dit qu'elle mène au tableau de bord */
/* les trois rangées de chaque tuile (nom, valeur, variation) s'alignent d'une tuile à l'autre (sous-grille) : un nom sur deux lignes ne décale pas sa valeur */
.indicateurs--mini { grid-template-columns: none; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.ind--mini { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; align-content: start; padding: 16px 20px 15px; color: inherit; }
.ind--mini .ind__val { margin-top: 0; flex-wrap: wrap; row-gap: 2px; }
.ind--mini .ind__val span { font-size: 13px; }
/* à cinq et six tuiles, la référence de la variation passe en bulle : la tuile garde « ▲ +4 », le reste au survol */
.indicateurs--n5 .ind--mini .ind__delta small, .indicateurs--n6 .ind--mini .ind__delta small { display: none; }
.indicateurs--n6 .ind--mini { padding: 14px 16px 13px; }
.indicateurs--n6 .ind--mini .ind__val b { font-size: 26px; }
.ind--mini .ind__val b { font-size: 30px; }
.ind--mini .ind__lib .fl { color: var(--g40); display: inline-flex; transition: color .15s, transform .15s; }
.ind--mini:hover .ind__lib .fl { color: var(--navy); transform: translateX(2px); }
.ind--mini .absente { font-size: 13px; }
@media (max-width: 1100px) {
  .indicateurs--mini { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .indicateurs--mini.indicateurs--n4, .indicateurs--mini.indicateurs--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicateurs--mini .ind { border-right: 1px solid var(--g20); border-bottom: 1px solid var(--g20); }
}
@media (max-width: 720px) {
  .indicateurs--mini, .indicateurs--mini.indicateurs--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicateurs--mini .ind { border-right: none; border-bottom: 1px solid var(--g20); }
  .indicateurs--mini .ind:nth-child(odd) { border-right: 1px solid var(--g20); }
  .ind--mini { padding: 12px 14px; } .ind--mini .ind__val b { font-size: 24px; } .ind--mini .ind__delta small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ind--mini .ind__lib .fl { transition: none; } .ind--mini:hover .ind__lib .fl { transform: none; } }

/* la charge de production et le temps hors production (105) : chaque semaine figée est une pile, la production en bas dans ses couleurs ;
   au-dessus une seule famille chaude contre le bleu de la production (intercontrat, absences, interne), puis le non saisi en pointillés.
   Une famille détaillée (data-focus) prend le dégradé de ses motifs (--c), les autres s'effacent. */
.gb { background: repeating-linear-gradient(to top, var(--g20) 0 1px, transparent 1px calc(100% / var(--div, 4))); }
.gb .charge__col { display: flex; flex-direction: column-reverse; position: relative; z-index: 1; min-height: 0; }
.gb .charge__col > i { flex: none; width: 100%; }
.gb i[data-g] { transition: opacity .2s, background-color .2s; }
.gb i[data-g][data-d], .gb i[data-g="non_saisi"] { box-shadow: inset 0 -1px 0 #fff; }
.gb i[data-g="intercontrat"], .leg i[data-g="intercontrat"], .carte-sem i[data-g="intercontrat"] { background: var(--ambre); }
.gb i[data-g="absence"], .leg i[data-g="absence"], .carte-sem i[data-g="absence"] { background: #ecc98a; }
.gb i[data-g="interne"], .leg i[data-g="interne"], .carte-sem i[data-g="interne"] { background: #f4e1bd; }
.gb i[data-g="non_saisi"] { background: transparent; border: 1px dashed var(--g50); border-bottom: 0; }
.leg i[data-g="non_saisi"], .carte-sem i[data-g="non_saisi"] { background: transparent; border: 1px dashed var(--g50); }
.leg--hp { align-items: center; margin-top: -6px; }
.leg--hp .leg__titre { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g60); }
.leg--hp small, .leg--motifs small { margin-left: 6px; color: var(--g60); font-weight: 400; }
.leg--hp .leg__note { margin-left: auto; }
.leg--motifs { display: none; align-items: center; padding: 8px 12px; margin-top: -4px; background: var(--g05); border: 1px solid var(--g20); border-radius: var(--r); }
.infobulle { white-space: pre-line; }
@media (prefers-reduced-motion: reduce) { .gb i[data-g] { transition: none; } }
/* la bande de la période choisie (02/10) : une semaine, ou les semaines d'un mois ou d'un trimestre ; --deb, la première colonne, --n, leur nombre */
.gb .bande { left: calc(var(--deb, 8) * (100% + 6px) / 17 - 4px); width: calc(var(--n, 1) * (100% - 96px) / 17 + (var(--n, 1) - 1) * 6px + 8px); }
@media (max-width: 900px) { .gb .bande { left: calc(var(--deb, 8) * (100% + 3px) / 17 - 2px); width: calc(var(--n, 1) * (100% - 48px) / 17 + (var(--n, 1) - 1) * 3px + 4px); } }

/* LE SURVOL ET LE CLIC DE LA CHARGE (02/10) : chaque segment est une cible ; un segment fin garde trois pixels pour rester attrapable.
   Au survol, les autres semaines s'effacent, et dans la semaine la famille visée ressort ; la carte de la semaine (client/gestes.js) se pose
   à côté de la colonne : chaque famille, sa part de l'effectif, les motifs de la famille visée, et ce que le clic ouvre. */
.charge { position: relative; }
.gb .charge__col > i { cursor: pointer; outline: none; }
.gb .charge__col > i[data-g]:not([data-g="prod"]) { min-height: 3px; }
.gb .charge__col { transition: opacity .18s; }
.gb:has(.charge__col > i:hover) .charge__col:not(:hover), .gb:has(.charge__col > i:focus-visible) .charge__col:not(:focus-within) { opacity: .42; }
.charge__col[data-survol] > i { transition: opacity .15s, filter .15s; }
.charge__col[data-survol="prod"] > i:not([data-g="prod"]), .charge__col[data-survol="intercontrat"] > i:not([data-g="intercontrat"]), .charge__col[data-survol="absence"] > i:not([data-g="absence"]),
.charge__col[data-survol="interne"] > i:not([data-g="interne"]), .charge__col[data-survol="non_saisi"] > i:not([data-g="non_saisi"]) { opacity: .45; }
.charge__col > i:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); z-index: 2; }
.carte-sem[hidden] { display: none; }
.carte-sem--flottante { position: absolute; z-index: 30; width: 290px; padding: 12px 14px 11px; background: #fff; border: 1px solid var(--g30); border-radius: 6px; box-shadow: 0 14px 34px rgba(26, 32, 57, .18); font-size: 12px; line-height: 1.35; color: var(--g70); pointer-events: none; animation: carte-sem .14s ease-out; }
@keyframes carte-sem { from { opacity: 0; transform: translateY(3px); } }
.carte-sem .t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--navy); }
.carte-sem .t small { font-size: 11px; font-weight: 400; color: var(--g60); }
.carte-sem .l { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 34px; align-items: center; gap: 8px; margin: 0 -6px; padding: 4px 6px; border-radius: 3px; }
.carte-sem .l i { display: block; width: 10px; height: 10px; border-radius: 2px; }
.carte-sem .l i[data-g="prod"] { background: var(--navy); }
.carte-sem .l i[data-g="prod"][data-v] { background: var(--navy-40); } .carte-sem .l i[data-g="prod"][data-s] { background: var(--vert); }
.carte-sem .l i[data-g="prod"][data-p] { background: repeating-linear-gradient(135deg, var(--navy-40) 0 2px, #fff 2px 4px); border: 1px solid var(--navy-40); }
.carte-sem .l b { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte-sem .l small { font-size: 11px; color: var(--g60); text-align: right; font-variant-numeric: tabular-nums; }
.carte-sem .m { display: none; flex-wrap: wrap; gap: 3px 10px; padding: 3px 0 5px 18px; font-size: 11px; color: var(--g60); }
.carte-sem .m span { display: inline-flex; align-items: center; gap: 5px; } .carte-sem .m i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.carte-sem .m b { color: var(--g80); font-weight: 600; }
.carte-sem .clic { display: none; align-items: center; gap: 6px; margin: 9px 0 0; padding-top: 9px; border-top: 1px solid var(--g20); font-weight: 600; color: var(--navy); }
.carte-sem .note-c, .carte-sem .vide-c { margin: 4px 0 0; font-size: 11px; color: var(--g60); }
.carte-sem[data-actif="prod"] .l[data-g="prod"], .carte-sem[data-actif="intercontrat"] .l[data-g="intercontrat"], .carte-sem[data-actif="absence"] .l[data-g="absence"],
.carte-sem[data-actif="interne"] .l[data-g="interne"], .carte-sem[data-actif="non_saisi"] .l[data-g="non_saisi"] { background: var(--g10); color: var(--navy); font-weight: 600; }
.carte-sem[data-actif="intercontrat"] .m[data-g="intercontrat"], .carte-sem[data-actif="absence"] .m[data-g="absence"], .carte-sem[data-actif="interne"] .m[data-g="interne"] { display: flex; }
.carte-sem[data-actif="prod"] .clic[data-g="prod"], .carte-sem[data-actif="intercontrat"] .clic[data-g="intercontrat"], .carte-sem[data-actif="absence"] .clic[data-g="absence"],
.carte-sem[data-actif="interne"] .clic[data-g="interne"], .carte-sem[data-actif="non_saisi"] .clic[data-g="non_saisi"] { display: flex; }
@media (hover: none) { .carte-sem--flottante { display: none; } }
@media (prefers-reduced-motion: reduce) { .carte-sem--flottante { animation: none; } .gb .charge__col, .charge__col[data-survol] > i { transition: none; } }

/* LE DÉTAIL D'UNE FAMILLE (02/10, retour du fondateur : « pas intuitif », « ça met en surbrillance la production »). Les familles de la légende
   sont des boutons visibles (pastille cernée, chevron). Une famille détaillée (data-focus) passe en couleurs pleines, au dégradé de ses motifs,
   et se pose seule, à sa propre échelle (le zoom, plus bas) : ses motifs se comparent d'une semaine à l'autre. Un motif
   s'isole d'un clic (data-motif, classe isole) ; « Revenir à l'ensemble » rend la vue entière. Les sélecteurs ont la même force que l'effacement,
   et viennent après lui : la famille choisie l'emporte toujours. */
.leg--hp .chip-hp { display: inline-flex; align-items: center; gap: 0; font: inherit; color: var(--g80); background: #fff; border: 1px solid var(--g30); border-radius: 14px; padding: 3px 8px 3px 8px; margin: -4px 0; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.leg--hp .chip-hp:hover { border-color: var(--navy-40); color: var(--navy); }
.leg--hp .chip-hp .chev-hp { display: inline-flex; margin-left: 6px; color: var(--g50); transition: transform .2s; }
.leg--hp .chip-hp[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.leg--hp .chip-hp[aria-pressed="true"] small, .leg--hp .chip-hp[aria-pressed="true"] .chev-hp { color: rgba(255, 255, 255, .8); }
.leg--hp .chip-hp[aria-pressed="true"] .chev-hp { transform: rotate(180deg); }
.leg--hp .chip-hp:focus-visible, .leg--motifs button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.charge[data-focus] .gb .charge__col > i { opacity: .14; }
.charge[data-focus] .gb .charge__col > i[data-g="prod"] { opacity: .28; }
.charge[data-focus="intercontrat"] .gb .charge__col > i[data-g="intercontrat"], .charge[data-focus="absence"] .gb .charge__col > i[data-g="absence"],
.charge[data-focus="interne"] .gb .charge__col > i[data-g="interne"] { opacity: 1; background: var(--c); order: -1; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .8); }
.charge[data-focus="non_saisi"] .gb .charge__col > i[data-g="non_saisi"] { opacity: 1; order: -1; background: repeating-linear-gradient(135deg, var(--g20) 0 3px, #fff 3px 6px); border: 1px dashed var(--g60); }
.charge[data-motif] .gb .charge__col > i[data-g] { opacity: .14; }
.charge[data-motif] .gb .charge__col > i[data-g].isole { opacity: 1; order: -2; }
.charge[data-focus="intercontrat"] .leg--motifs[data-motifs="intercontrat"], .charge[data-focus="absence"] .leg--motifs[data-motifs="absence"],
.charge[data-focus="interne"] .leg--motifs[data-motifs="interne"], .charge[data-focus="non_saisi"] .leg--motifs[data-motifs="non_saisi"] { display: flex; }
.leg--motifs { flex-wrap: wrap; gap: 6px 12px; }
.leg--motifs .leg__titre { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.leg--motifs .motif-hp { display: inline-flex; align-items: center; font: inherit; color: var(--g80); background: #fff; border: 1px solid var(--g30); border-radius: 12px; padding: 2px 9px 2px 7px; cursor: pointer; transition: border-color .15s, background .15s; }
.leg--motifs .motif-hp:hover { border-color: var(--navy-40); }
.leg--motifs .motif-hp[aria-pressed="true"] { border-color: var(--navy); background: var(--navy-10); color: var(--navy); font-weight: 600; }
.leg--motifs .note-hp { margin-left: auto; color: var(--g60); }
.leg--motifs .ferme-hp { display: inline-flex; align-items: center; gap: 5px; font: 600 12px var(--voix); color: var(--navy); background: #fff; border: 1px solid var(--g30); border-radius: 12px; padding: 3px 10px; cursor: pointer; }
.leg--motifs .ferme-hp:hover { border-color: var(--navy-40); }
@media (prefers-reduced-motion: reduce) { .leg--hp .chip-hp .chev-hp { transition: none; } }
/* le zoom du détail (client/gestes.js) : seuls les segments de la famille ou du motif choisi restent, l'échelle se recalcule sur eux, les
   colonnes glissent jusqu'à leur hauteur ; chaque semaine porte son total au-dessus. La semaine en cours et le prévisionnel, sans détail, se vident. */
.gb .charge__col, .gb .charge__col > i { transition: height .35s cubic-bezier(.2, .7, .2, 1), opacity .18s; }
.charge[data-focus] .gb .charge__col > i.masque { display: none; }
.charge[data-focus] .gb .charge__col > i:not(.masque) { opacity: 1; }
.charge[data-focus] .gb i[data-s]::after { display: none; }
.charge[data-focus] .gb .charge__col[data-tot]::before { content: attr(data-tot); position: absolute; left: 50%; top: -19px; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .charge[data-focus] .gb .charge__col[data-tot]::before { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .gb .charge__col, .gb .charge__col > i { transition: none; } }


/* ═══ MA PROGRESSION (07/10/2026) : en tête du portefeuille d'un business manager ou d'une talent acquisition ═══
   La jauge (le chiffre face à l'objectif, le seuil marqué), la piste (objectif, rythme du jour, moyenne de l'équipe),
   la composition, et les huit dernières semaines. Toute la carte ouvre le détail. */
.prog { display: grid; grid-template-columns: 148px minmax(0, 1fr) 300px; gap: 28px; align-items: center; padding: 22px 26px 22px 24px; margin-bottom: 16px; position: relative; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.prog:hover { border-color: var(--navy-20); box-shadow: 0 6px 24px rgba(26, 32, 57, .07); }
.prog:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.prog__anneau { position: relative; width: 148px; height: 148px; }
.prog__anneau svg { width: 100%; height: 100%; display: block; }
.prog__fond { fill: none; stroke: var(--g20); stroke-width: 10; }
.prog__arc { fill: none; stroke: var(--navy); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .6s cubic-bezier(.2, .7, .2, 1); }
.prog--ok .prog__arc { stroke: var(--vert); }
.prog--att .prog__arc { stroke: var(--ambre); }
.prog--ko .prog__arc { stroke: var(--rouge); }
.prog__seuil { fill: #fff; stroke: var(--navy-40); stroke-width: 2; }
.prog__chiffre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.prog__chiffre b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.prog--ok .prog__chiffre b { color: var(--vert-encre); }
.prog__chiffre span { font-size: 13px; color: var(--g60); font-weight: 600; margin-top: 2px; }
.prog__chiffre small { font-size: 11px; color: var(--g60); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-top: 2px; }
.prog__texte { min-width: 0; }
.prog__eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--g60); }
.prog__eyebrow svg { color: var(--navy-40); }
.prog__eyebrow .etat { margin-left: 4px; text-transform: none; letter-spacing: 0; }
.prog__titre { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); margin: 8px 0 4px; }
.prog__note { font-size: 13px; color: var(--g60); line-height: 1.45; margin: 0; }
.prog__piste { margin: 26px 0 0; padding-bottom: 6px; }
.prog__rail { position: relative; height: 10px; border-radius: 5px; background: var(--g20); }
.prog__rempli { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--navy); max-width: 100%; transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.prog--ok .prog__rempli { background: var(--vert); }
.prog--att .prog__rempli { background: var(--ambre); }
.prog--ko .prog__rempli { background: var(--rouge); }
.prog__marque { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2px solid var(--navy); }
.prog__marque em { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.prog__marque--repere { border-left: 2px dashed var(--navy-40); }
.prog__marque--repere em { color: var(--g60); font-weight: 600; top: calc(100% + 3px); bottom: auto; }
.prog__marque--moyenne { border-left-color: var(--g50); top: -3px; bottom: -3px; }
.prog__marque--moyenne em { color: var(--g60); font-weight: 600; top: calc(100% + 3px); bottom: auto; }
.prog__compo { margin-top: 26px; }
.prog__barre { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--g20); gap: 2px; }
.prog__barre i { display: block; height: 100%; }
.prog__legende { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--g70); }
.prog__legende li { display: flex; align-items: center; gap: 6px; }
.prog__legende li i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.prog__legende b { color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }
.prog__vide { font-size: 13px; color: var(--g60); margin: 22px 0 0; }
.prog__histo { border-left: 1px solid var(--g20); padding-left: 26px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.prog__cols { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; height: 92px; margin: 14px 0 22px; align-items: end; }
.prog__col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.prog__col > i { display: block; width: 100%; border-radius: 3px 3px 1px 1px; background: var(--navy-20); }
.prog__col > i.prog--ok { background: var(--vert); }
.prog__col > i.prog--att { background: var(--ambre); }
.prog__col > i.prog--ko { background: var(--rouge); opacity: .75; }
.prog__col > i.prog--cours { background: repeating-linear-gradient(135deg, var(--navy-40) 0 3px, var(--navy-20) 3px 6px); }
.prog__cible { position: absolute; left: -3px; right: -3px; height: 0; border-top: 2px solid var(--navy); z-index: 1; }
.prog__col em { position: absolute; top: calc(100% + 5px); font-style: normal; font-size: 11px; color: var(--g60); font-weight: 600; }
.prog__col--actuelle em { color: var(--navy); font-weight: 800; }
.prog__ouvrir { position: absolute; right: 26px; top: 18px; display: flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 700; color: var(--g60); }
.prog__ouvrir svg { transition: transform .15s; }
.prog:hover .prog__ouvrir { color: var(--navy); }
.prog:hover .prog__ouvrir svg { transform: translateX(2px); }
@media (max-width: 1180px) { .prog { grid-template-columns: 132px minmax(0, 1fr); } .prog__anneau { width: 132px; height: 132px; } .prog__histo { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--g20); padding: 18px 0 0; } }
@media (max-width: 720px) { .prog { grid-template-columns: 1fr; padding: 20px 18px; gap: 18px; } .prog__anneau { margin: 0 auto; } .prog__ouvrir { position: static; justify-content: flex-end; } }
@media (prefers-reduced-motion: reduce) { .prog, .prog__arc, .prog__rempli, .prog__ouvrir svg { transition: none; } }
.prog--libre .prog__chiffre b { color: var(--g60); }
.prog__col > i.prog--libre { background: var(--g30); }