/* =============================================================================
   boreal.css — identité « piste B » sur la charte DIVALTO (www.divalto.com)
   -----------------------------------------------------------------------------
   Barre latérale claire (défaut) ou foncée au choix de chaque utilisateur
   (html.menu-clair / html.menu-fonce), barre du haut avec recherche, cartes à
   filets fins. L'orange Divalto #FF9C00 porte l'action et l'élément actif (« ton » --action, violet #5B3FD3 dans Soumissions) et
   l'action principale ; statuts en pastilles à point coloré.
   Typographie : « DIN Next LT Pro » si installée (licence Monotype, non livrée :
   déposer les .woff2 sous wwwroot/fonts/din/ et compléter les @font-face),
   sinon Barlow (OFL) ; titres en Montserrat.
   ============================================================================= */

@font-face { font-family: "DIN Next LT Pro"; font-weight: 400; font-display: swap; src: local("DIN Next LT Pro Light"); }
@font-face { font-family: "DIN Next LT Pro"; font-weight: 500; font-display: swap; src: local("DIN Next LT Pro"); }
@font-face { font-family: "DIN Next LT Pro"; font-weight: 600; font-display: swap; src: local("DIN Next LT Pro Medium"); }
@font-face { font-family: "DIN Next LT Pro"; font-weight: 700; font-display: swap; src: local("DIN Next LT Pro Bold"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(/fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(/fonts/barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(/fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url(/fonts/barlow-700.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 100 900; font-display: swap; src: url(/fonts/montserrat-variable.woff2) format("woff2-variations"); }

:root {
    --orange: #FF9C00;          /* brand-01 Divalto : actif, action principale */
    --orange-bord: #F09000;
    --orange-texte: #B86E00;    /* liens, accents lisibles sur blanc */
    --orange-pale: #FFF4E2;
    --orange-voile: #FF9C0026;
    --orange-vif: #FF5400;      /* secondary-01 : attente client, repère « aujourd'hui » */
    /* Ton d'action : orange Divalto par défaut ; violet Divalto dans le module Soumissions
       (.ton-soumissions, décision du 2026-10-06). */
    /* Bouton principal : anthracite, texte blanc, icône orange (décision du 2026-10-07) ;
       l'orange reste aux accents (menu actif, liens, sélection, pastilles, logo). */
    --bouton: #1F2328;
    --bouton-encre: #fff;
    --bouton-survol: #353B42;
    --bouton-bord: #1F2328;
    --bouton-accent: #FF9C00;   /* icône du bouton */
    --action: #FF9C00;
    --action-encre: #1F1300;    /* texte sur les éléments orange (pastilles, étapes) */
    --action-survol: #F59500;
    --action-bord: #F09000;
    --action-bord-survol: #E08600;
    --action-texte: #B86E00;    /* liens, accents lisibles sur blanc */
    --action-accent: #E08600;   /* icônes et chiffres soulignés */
    --action-pale: #FFF4E2;
    --action-voile: #FF9C0026;
    --action-focus: #FFB547;
    --action-ombre: #FF9C001f;
    --action-ombre-forte: #FF9C0066;
    --action-ombre-cta: #FF9C00aa;
    --action-bord-doux: #FFC266;
    --action-fond: #FFFBF4;
    --action-clair: #FF9C00;    /* sur fond sombre */
    --rouge: #B42318;
    --bleu: #2E90FA;
    --vert: #0CC280;
    --vert-texte: #067647;
    --vert-boreal: #0CC280;      /* « Boreal » : vert Divalto (secondary-05 de divalto.com) */

    --texte: #1F2328;
    --texte-2: #3F444B;
    --texte-3: #4B5058;
    --doux: #6B7280;
    --doux-2: #80868F;
    --pale: #9AA0A8;

    --fond: #F7F8FA;
    --surface: #FFFFFF;
    --gris-fond: #F2F3F5;
    --bord: #ECEEF1;
    --bord-2: #E3E5E9;
    --bord-champ: #DADDE2;
    --filet: #F0F1F3;

    --police: "DIN Next LT Pro", "Barlow", system-ui, sans-serif;
    --police-titre: "Montserrat", "DIN Next LT Pro", "Barlow", sans-serif;
    --r: 10px;
    --r-petit: 8px;
    --ombre-pop: 0 18px 40px -12px #00000033;
    --largeur-menu: 244px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--police); font-size: 14px; font-weight: 500; color: var(--texte); background: var(--fond); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-family: var(--police-titre); font-weight: 700; font-size: 24px; letter-spacing: -.01em; }
h2 { font-family: var(--police-titre); font-weight: 700; font-size: 18px; }
h3 { font-size: 14.5px; font-weight: 600; }
h4 { font-size: 13px; font-weight: 600; }
a { color: inherit; text-decoration: none; }
p a, .lien { color: var(--action-texte); font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }

/* =============================================================================
   COQUILLE : barre latérale + barre du haut
   ============================================================================= */
body.app { display: flex; min-height: 100vh; }
.side { width: var(--largeur-menu); flex-shrink: 0; display: flex; flex-direction: column; padding: 16px 12px 10px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40; }
/* Marque : filet du bandeau de l'infolettre, logo Divalto à contour coloré, « Boreal » au vert Divalto. */
.side-filet { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: url(/img/charte/bandeau.jpg) center / cover; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 8px 16px; }
.brand-logo { height: auto; width: 100%; max-width: 196px; display: block; }
.brand-nom { display: flex; align-items: center; gap: 8px; padding-left: 2px; }
.brand-baseline { font-size: 12px; padding-left: 2px; margin-top: -2px; }
.brand b { font-family: var(--police-titre); font-weight: 600; font-size: 19px; letter-spacing: -.01em; line-height: 1; color: var(--vert-boreal) !important; }
.env { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A5300; background: #FFF4E2; border-radius: 4px; padding: 2px 6px; }
.menu-fonce .env { background: #3A2E14; color: #FFC266; }
.org { padding: 9px 12px; border-radius: 9px; margin-bottom: 6px; }
.org small { display: block; font-size: 11px; }
.org b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin: 18px 10px 6px; }
.side nav a { display: flex; align-items: center; gap: 11px; height: 34px; padding: 0 10px; border-radius: 7px; font-weight: 500; margin-bottom: 2px; position: relative; }
.side nav a .badge { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--action); color: var(--action-encre); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.side nav a.actif::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--action); }
.moi { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 6px; width: 100%; background: none; border: 0; text-align: left; border-radius: 0; }
.moi > div { flex: 1; min-width: 0; }
.moi b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moi small { font-size: 12px; }
.av { width: 30px; height: 30px; border-radius: 50%; background: var(--action); color: var(--action-encre); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }

/* --- Menu repliable (≥ 901 px) : rail étroit, icônes seules, comme dans Connect -------------
   État mémorisé sur le poste (boreal.menuReplie), classe .menu-replie sur <html>. Sous 901 px le
   menu est déjà un tiroir : le bouton et le repli n'existent pas. */
.brand-pastille { display: none; }
.side-toggle { display: flex; align-items: center; gap: 11px; width: 100%; height: 34px; padding: 0 10px; margin-top: 8px; border: 0; border-radius: 7px;
    background: none; color: inherit; font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
.side-toggle svg { flex-shrink: 0; color: #8A8F98; }
.side-toggle:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.menu-clair .side-toggle:hover { background: #F1F2F4; }
.menu-fonce .side-toggle:hover { background: #1F2226; color: #E4E6E9; }
@media (min-width: 901px) {
    .side { transition: width .16s ease; }
    .menu-replie .side { width: 64px; padding-left: 8px; padding-right: 8px; overflow-x: hidden; }
    .menu-replie .side-toggle .tg-panneau { width: 2.4px; }
    /* Les icônes gardent EXACTEMENT leur hauteur : la marque, l'organisation, les titres de groupe et les
       sous-menus sont masqués (visibility) sans libérer leur place ; seuls les libellés des entrées disparaissent. */
    .menu-replie .side-toggle span, .menu-replie .side nav a span, .menu-replie .moi > div, .menu-replie .moi > svg { display: none !important; }
    .menu-replie .brand, .menu-replie .org { position: relative; white-space: nowrap; }
    .menu-replie .brand-logo { width: 196px; flex-shrink: 0; }
    .menu-replie .brand-logo, .menu-replie .brand-nom, .menu-replie .brand-baseline, .menu-replie .org > *, .menu-replie .sous-nav { visibility: hidden; }
    .menu-replie .side .org { border-color: transparent; background: none; }
    .menu-replie .brand-pastille { display: block; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); }
    .menu-replie .side .grp { color: transparent; white-space: nowrap; overflow: hidden;
        background: linear-gradient(var(--bord), var(--bord)) center / 100% 1px no-repeat; }
    .menu-fonce.menu-replie .side .grp { background-image: linear-gradient(#2A2D32, #2A2D32); }
    .menu-replie .side nav a, .menu-replie .side-toggle { justify-content: center; gap: 0; padding: 0; }
    .menu-replie .side nav a.actif::before { left: -8px; }
    .menu-replie .side nav a .badge { position: absolute; top: 1px; right: 3px; margin: 0; padding: 0 5px; font-size: 10px; line-height: 15px; }
    .menu-replie .moi { justify-content: center; padding: 12px 0 6px; }
}
@media (max-width: 900px) { .side-toggle { display: none; } }

/* Menu clair (défaut) */
.menu-clair .side { background: #FBFBFC; border-right: 1px solid var(--bord); color: var(--texte-2); }
.menu-clair .brand small, .menu-clair .org small, .menu-clair .grp { color: var(--pale); }
.menu-clair .org { background: #fff; border: 1px solid var(--bord); }
.menu-clair .side nav a svg { color: #8A8F98; }
.menu-clair .side nav a:hover { background: #F1F2F4; }
.menu-clair .side nav a.actif { background: var(--action-pale); color: var(--texte); font-weight: 600; }
.menu-clair .side nav a.actif svg { color: var(--action-accent); }
.menu-clair .moi { border-top: 1px solid var(--bord); }
.menu-clair .moi small { color: var(--doux-2); }
.menu-clair .moi svg { color: var(--pale); }
/* Menu foncé */
.menu-fonce .side { background: #17191C; color: #B4B9C0; }
.menu-fonce .brand b, .menu-fonce .org b, .menu-fonce .moi b { color: #fff; }
.menu-fonce .brand small, .menu-fonce .org small, .menu-fonce .grp { color: #6B7079; }
.menu-fonce .org { background: #1E2024; border: 1px solid #2A2D32; }
.menu-fonce .side nav a svg { color: #80868F; }
.menu-fonce .side nav a:hover { background: #1F2226; color: #E4E6E9; }
.menu-fonce .side nav a.actif { background: #25282D; color: #fff; }
.menu-fonce .side nav a.actif svg { color: var(--action-clair); }
.menu-fonce .moi { border-top: 1px solid #2A2D32; }
.menu-fonce .moi small, .menu-fonce .moi svg { color: #80868F; }

/* Menu utilisateur (bas de la barre latérale) */
.pop-moi { position: fixed; left: 12px; bottom: 62px; width: 286px; background: #fff; border: 1px solid var(--bord-2); border-radius: 12px;
    box-shadow: var(--ombre-pop); padding: 8px; z-index: 60; color: var(--texte); }
.pm-id { display: flex; gap: 10px; align-items: center; padding: 8px 8px 10px; border-bottom: 1px solid var(--filet); margin-bottom: 6px; }
.pm-id > div { min-width: 0; }
.pm-id b { display: block; }
.pm-id small { display: block; color: var(--doux-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.pop-moi > a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: 7px; color: var(--texte-2); }
.pop-moi > a svg { color: #8A8F98; }
.pop-moi > a:hover { background: #F4F5F7; }
.pop-moi > a.danger, .pop-moi > a.danger svg { color: var(--rouge); }
.pm-sep { height: 1px; background: var(--filet); margin: 6px 0; }
.pm-lib { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--pale); padding: 6px 8px; }
.pm-aide { font-size: 11.5px; color: var(--pale); padding: 6px 8px 4px; }

/* Commutateur segmenté (apparence, impact, statut…) */
.seg { display: inline-flex; background: var(--gris-fond); border-radius: var(--r-petit); padding: 3px; gap: 2px; flex-wrap: wrap; align-self: flex-start; }
.seg button, .seg label { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 12px; border-radius: 6px; border: 0; background: none;
    color: #5B6068; font-weight: 500; cursor: pointer; position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg .on, .seg label:has(input:checked) { background: #fff; color: var(--texte); font-weight: 600; box-shadow: 0 1px 2px #0000001a; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--action); }
.pop-moi .seg { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 6px; }
.pop-moi .seg button { height: 30px; padding: 0; font-size: 12.5px; }

/* Barre du haut */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { height: 56px; background: #fff; border-bottom: 1px solid var(--bord); display: flex; align-items: center; gap: 12px; padding: 0 24px;
    position: sticky; top: 0; z-index: 30; }
.recherche { position: relative; width: min(440px, 100%); }
.recherche > label { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 9px; background: var(--gris-fond); color: #8A8F98; border: 1px solid transparent; }
.recherche > label:focus-within { background: #fff; border-color: var(--action-focus); box-shadow: 0 0 0 3px var(--action-ombre); }
.recherche input[type=search] { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--texte); padding: 0; height: 100%; box-shadow: none !important; }
.recherche input::-webkit-search-cancel-button { display: none; }
kbd { font-family: inherit; font-size: 11px; color: #8A8F98; border: 1px solid #E1E3E8; border-radius: 4px; padding: 0 5px; background: #fff; }
.suggestions { position: absolute; left: 0; right: 0; top: 42px; background: #fff; border: 1px solid var(--bord-2); border-radius: 10px; box-shadow: var(--ombre-pop); padding: 6px; z-index: 50; }
.suggestions button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; background: none; border-radius: 7px; text-align: left; color: var(--texte-2); min-width: 0; }
.suggestions button svg { color: #8A8F98; }
.suggestions button.on, .suggestions button:hover { background: #F4F5F7; }
.suggestions b { color: var(--texte); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .act { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.burger { display: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--bord-2); background: #fff; place-items: center; color: var(--texte-2); flex-shrink: 0; }

.page { padding: 24px 30px 48px; flex: 1; width: 100%; max-width: 1360px; }
.page:focus { outline: none; }
.pied { padding: 0 30px 22px; color: var(--pale); font-size: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 1360px; }

/* =============================================================================
   ÉLÉMENTS COMMUNS
   ============================================================================= */
.b, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: var(--r-petit);
    border: 1px solid var(--bord-2); background: #fff; color: var(--texte-2); font-weight: 500; font-size: 13px; white-space: nowrap; cursor: pointer;
    transition: background .15s, border-color .15s; text-decoration: none; }
.b:hover, .btn:hover { background: #F7F8FA; border-color: #D3D6DB; }
.b.pri, .btn-primaire { background: var(--bouton); color: var(--bouton-encre); border-color: var(--bouton-bord); font-weight: 600; }
.b.pri:hover, .btn-primaire:hover { background: var(--bouton-survol); border-color: var(--bouton-survol); }
.b.pri svg, .btn-primaire svg { color: var(--bouton-accent); }
.btn-secondaire { background: var(--texte); color: #fff; border-color: var(--texte); font-weight: 600; }
.btn-secondaire:hover { background: #3A3F46; border-color: #3A3F46; }
.btn-danger, .b.danger { color: var(--rouge); border-color: #F4C7C3; }
.btn-danger:hover, .b.danger:hover { background: #FEF3F2; border-color: #F0A9A3; }
.btn-petit { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn-large { width: 100%; height: 42px; font-size: 14px; }
.b.carre { width: 34px; padding: 0; }
.b:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-lien, .lienv { background: none; border: 0; padding: 0; color: var(--action-texte); font-weight: 600; font-size: 13px; cursor: pointer; }
.btn-lien:hover, .lienv:hover { text-decoration: underline; text-underline-offset: 3px; }
.ic { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--doux); display: inline-grid; place-items: center; flex-shrink: 0; }
.ic:hover { background: #F2F3F5; color: var(--texte); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.drapeau { height: 24px; width: auto; border-radius: 3px; box-shadow: 0 0 0 1px var(--bord-2); }
.doux { color: var(--doux); }
.petit { font-size: 12.5px; color: var(--doux); }
.centre { text-align: center; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.ref { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vide { text-align: center; color: var(--pale); padding: 36px 16px; margin: 0; }
.compte { font-size: 12px; font-weight: 600; color: var(--doux); background: var(--gris-fond); border-radius: 999px; padding: 1px 8px; }
mark { background: #FFE7BF; color: inherit; border-radius: 2px; padding: 0 1px; }
code { font-family: ui-monospace, Menlo, monospace; background: var(--gris-fond); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.texte-long { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }

/* En-têtes de page */
.tete, .page-titre { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tete h1, .page-titre h1 { margin: 2px 0 0; }
.sur { margin: 0; color: var(--doux-2); font-size: 12.5px; }
.page-titre p { margin: 4px 0 0; color: var(--doux); }
.fil { color: var(--doux-2); margin-bottom: 10px; }
.fil a:hover { color: var(--texte); }
.fil span { margin: 0 6px; color: #C2C6CC; }
.fil b { color: var(--texte); font-weight: 600; }

/* Cartes */
.carte { background: #fff; border: 1px solid var(--bord); border-radius: var(--r); padding: 18px 20px; }
.carte.flush { padding: 0; overflow: hidden; }
.carte + .carte, .col > .carte + .carte { margin-top: 14px; }
.carte h3 { margin: 0 0 12px; }
.ct { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--filet); }
.ct h3 { margin: 0; }
.ct2, .carte-titre { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.ct2 h3, .carte-titre h2, .carte-titre h3 { margin: 0; }
.carte.accent { border-left: 3px solid var(--orange-vif); }
.grille { display: grid; gap: 14px; }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col { display: flex; flex-direction: column; min-width: 0; }
.encart { background: #FAFBFC; border: 1px solid var(--bord); border-radius: var(--r); padding: 14px 16px; margin: 6px 0 14px; }
.encart h3 { margin: 0 0 8px; }
.encart-demo { margin-bottom: 14px; border-color: #FFD08A; background: #FFFBF4; }

/* Étiquettes : type, statut (pastille à point), priorité */
.type { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.type.INCIDENT { color: #B54708; background: #FFF4E5; }
.type.AMELIORATION { color: #175CD3; background: #EFF6FF; }
.stat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 2px 9px; border-radius: 999px;
    border: 1px solid var(--bord-2); color: var(--texte-2); background: #fff; white-space: nowrap; }
.stat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9CA3AF; }
.stat.NOUVELLE::before, .stat.PLANIFIE::before { background: var(--bleu); }
.stat.TRANSMISE::before { background: #4BC6E5; }
.stat.EN_COURS::before { background: var(--orange); }
.stat.EN_ATTENTE_CLIENT::before { background: var(--orange-vif); }
.stat.RESOLUE::before, .stat.LIVRE::before { background: var(--vert); }
.stat.CLOSE::before, .stat.EXPLORATOIRE::before { background: #C2C6CC; }
.stat.REFUSEE::before { background: var(--rouge); }
.prio { display: inline-flex; align-items: center; gap: 6px; color: var(--texte-3); white-space: nowrap; }
.prio i { width: 8px; height: 8px; border-radius: 2px; background: #C9CDD3; }
.prio.BASSE i { background: #E4E7EC; }
.prio.HAUTE i { background: var(--orange); }
.prio.BLOQUANTE i { background: #D92D20; }
.prio.BLOQUANTE { color: var(--rouge); font-weight: 600; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--doux); background: var(--gris-fond); border-radius: 5px; padding: 1px 7px; vertical-align: 1px; white-space: nowrap; }
.tag.ok { color: var(--vert-texte); background: #ECFDF3; }
.tag.attention { color: #8A5300; background: #FFF4E2; }
.tag.info { color: #175CD3; background: #EFF6FF; }
/* Profils d'organisation (Format.pProfil) : clients en neutre, partenaires et prescripteurs distingués. */
.tag.profil-PARTENAIRE { color: #175CD3; background: #EFF6FF; }
.tag.profil-PRESCRIPTEUR { color: #5925DC; background: #F4F3FF; }
/* Compatibilité : étiquettes des écrans d'administration */
.etiquette { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--doux); background: var(--gris-fond); border-radius: 5px; padding: 1px 7px; white-space: nowrap; }
.etiquette.s-RESOLUE { color: var(--vert-texte); background: #ECFDF3; }
.etiquette.s-EN_COURS { color: #8A5300; background: #FFF4E2; }
.etiquette.s-TRANSMISE, .etiquette.t-AMELIORATION { color: #175CD3; background: #EFF6FF; }
.etiquette.s-CLOSE { color: var(--pale); }

/* Icônes de format de fichier */
.fi { width: 34px; height: 40px; border-radius: 6px; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
    color: #fff; flex-shrink: 0; text-transform: uppercase; background: #667085; overflow: hidden; }
.fi.pdf { background: #D92D20; } .fi.presentation { background: #FF5400; } .fi.texte { background: #1570EF; } .fi.tableur { background: #079455; }
.fi.image { background: #7A5AF8; } .fi.video { background: #1F2328; } .fi.archive, .fi.autre { background: #667085; }
.fi.petite { width: 28px; height: 32px; font-size: 8.5px; }

/* Tableaux */
.tab, .tableau { width: 100%; border-collapse: collapse; }
.tab th, .tableau th { text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--doux-2); padding: 9px 14px; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.tab td, .tableau td { padding: 11px 14px; border-bottom: 1px solid var(--filet); vertical-align: middle; }
.tab td { white-space: nowrap; }
.tab tr:last-child td, .tableau tr:last-child td { border-bottom: 0; }
/* Titre : prend la place restante et s'abrège (…) plutôt que d'élargir le tableau. */
.tab .titre { width: 100%; max-width: 0; min-width: 180px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.tab tr[data-id], .tableau tr.cliquable { cursor: pointer; }
.tab tr[data-id]:hover td, .tableau tr.cliquable:hover td { background: #FAFAFB; }
.defile { overflow-x: auto; }
.carte.defile { padding: 0; }
.carte.defile .tableau td:first-child, .carte.defile .tableau th:first-child { padding-left: 20px; }

/* Formulaires */
.champ, .ch { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.champ > label, .champ > .lib, .ch > .lib { font-size: 12.5px; font-weight: 600; color: var(--texte-2); }
.champ .aide, .ch .aide { font-size: 12px; color: var(--doux-2); font-weight: 400; }
.lib i, .champ label i { font-style: normal; font-weight: 400; color: var(--pale); margin-left: 4px; }
.requis::after { content: " *"; color: var(--orange-vif); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=number], input[type=url], input[type=datetime-local], select, textarea {
    width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--bord-champ); border-radius: var(--r-petit); background: #fff; color: var(--texte); }
textarea { height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 32px; cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
select[multiple] { height: auto; padding: 6px; background-image: none; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--action-focus); box-shadow: 0 0 0 3px var(--action-ombre); }
input::placeholder, textarea::placeholder { color: #A0A6AE; }
input[type=checkbox], input[type=radio] { accent-color: var(--action); width: 16px; height: 16px; margin: 0; }
.cases { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cases label, label.cases { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--texte-3); }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

/* Onglets */
.onglets { display: flex; gap: 4px; flex-wrap: wrap; }
.onglets button { padding: 13px 10px; color: var(--doux); font-weight: 500; border: 0; border-bottom: 2px solid transparent; background: none; margin-bottom: -1px; }
.onglets button b { font-weight: 500; color: #A0A6AE; margin-left: 3px; }
.onglets button.on { color: var(--texte); font-weight: 600; border-color: var(--action); }
.onglets button:hover { color: var(--texte); }

/* Pagination */
.pages { display: flex; gap: 4px; }
.pages button { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; border: 0; background: none; color: var(--texte-2); }
.pages button:hover { background: var(--gris-fond); }
.pages button.on { background: var(--texte); color: #fff; }

/* =============================================================================
   ACCUEIL D'INFORMATION : la une, les prochains événements, les actualités
   ============================================================================= */
.accueil-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.salut { margin: 0; font-family: var(--police-titre); font-weight: 600; font-size: 17px; }
.salut span { font-family: var(--police); font-weight: 500; font-size: 15px; color: var(--doux-2); }
.kick { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FFB547; }
.kick.sombre { color: #E08600; }
.cta { display: inline-flex; align-items: center; gap: 8px; background: var(--action); color: var(--action-encre); font-weight: 600; font-size: 14px; padding: 11px 18px;
    border-radius: 9px; box-shadow: 0 6px 18px -6px var(--action-ombre-cta); transition: background .15s; }
.cta:hover { background: var(--action-survol); }
.cta2 { display: inline-flex; align-items: center; padding: 11px 16px; border-radius: 9px; color: #fff; font-weight: 600; font-size: 14px; border: 1px solid #ffffff59; background: #ffffff14; }
.cta2:hover { background: #ffffff26; }
.hero { position: relative; min-height: 400px; border-radius: 16px; overflow: hidden; background: #17191C center 60% / cover no-repeat;
    box-shadow: 0 24px 48px -28px #0F111499; display: flex; align-items: center; }
.hero.sans-image { background: radial-gradient(700px 420px at 85% 15%, #FF9C0040, transparent 65%), radial-gradient(600px 400px at 70% 110%, #0070DB33, transparent 60%), linear-gradient(140deg, #23262B, #15171A); }
.hero-voile { position: absolute; inset: 0; background: linear-gradient(90deg, #0A0C10e6 0%, #0A0C10b3 30%, #0A0C1033 58%, #0A0C1000 75%), linear-gradient(0deg, #0A0C1059 0%, #0A0C1000 40%); }
.hero.sans-image .hero-voile { display: none; }
.hero-c { position: relative; z-index: 1; margin: 40px 46px; width: min(480px, 100%); display: flex; flex-direction: column; gap: 12px; color: #fff; }
.hero-t { font-family: var(--police-titre); font-size: 34px; line-height: 1.12; letter-spacing: -.02em; margin: 0; color: #fff; }
.hero-x { font-size: 15.5px; line-height: 1.55; color: #ffffffd9; margin: 0; }
.hero-b { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
/* La une : outils de l'équipe qui publie, emplacement vide, choix */
.hero-outils { position: absolute; z-index: 2; top: 16px; right: 16px; display: flex; gap: 6px; }
.hero-outils button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid #ffffff59;
    background: #0A0C1059; color: #fff; font-size: 12.5px; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-outils button:hover { background: #0A0C1099; }
.une-vide { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 24px; border: 1.5px dashed #FFC266; border-radius: 16px; background: #FFFBF4; }
.une-vide > div { flex: 1; min-width: 260px; }
.une-vide h2 { margin: 0 0 4px; font-size: 17px; }
.une-vide p { margin: 0; color: var(--doux); }
.une-vide-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--action-pale); color: var(--action-accent); display: grid; place-items: center; flex-shrink: 0; }
.choix-une { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--bord-2); border-radius: 10px; margin-bottom: 8px; cursor: pointer; }
.choix-une:has(input:checked) { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-voile); }
.choix-une-c { flex: 1; min-width: 0; }
.choix-une-c b { display: block; font-weight: 600; }
.choix-une-c small { color: var(--doux-2); font-size: 12px; }
.choix-une-img { width: 72px; height: 44px; border-radius: 6px; background: center / cover no-repeat; flex-shrink: 0; }
.verre { position: absolute; z-index: 1; right: 26px; bottom: 26px; width: 214px; padding: 16px 18px; border-radius: 14px; color: #fff; background: #0A0C1040;
    border: 1px solid #ffffff40; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); display: flex; flex-direction: column; gap: 4px; }
.verre b { font-family: var(--police-titre); font-size: 40px; line-height: 1; }
.verre .mois { font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: #FFB547; margin-bottom: 6px; }
.verre .vl { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #ffffffe0; }
.sec { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 34px 2px 14px; }
.sec h2 { font-size: 18px; margin: 0; letter-spacing: -.01em; }
.sec .lienv { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pt { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: #9AA0A8; }
.pt.web { background: var(--bleu); } .pt.form { background: var(--vert); } .pt.club { background: #7A5AF8; } .pt.renc { background: var(--orange); }
.evs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ev { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--bord); border-radius: 14px; padding: 18px 18px 16px;
    transition: box-shadow .2s, transform .2s, border-color .2s; }
.ev:hover { box-shadow: 0 14px 28px -18px #0F111466; transform: translateY(-2px); border-color: #FFD08A; }
.ev-d { display: flex; align-items: baseline; gap: 7px; }
.ev-d b { font-family: var(--police-titre); font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.ev-d small { font-weight: 700; font-size: 12px; letter-spacing: .1em; color: #E08600; }
.ev-t { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--doux); }
.ev-ti { font-size: 14.5px; line-height: 1.35; font-weight: 600; min-height: 39px; }
.ev-l { display: flex; align-items: center; gap: 6px; color: var(--doux-2); font-size: 12.5px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--gris-fond); }
.acs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ac, .ac-lien { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ac-lien:hover b { text-decoration: underline; text-decoration-color: var(--action); text-underline-offset: 4px; }
.ac-img { height: 178px; border-radius: 14px; background: #F2F3F5 center / cover no-repeat; box-shadow: 0 14px 30px -22px #0F111480; }
.ac-img.typo { background: linear-gradient(135deg, #FF9C00 0%, #FF7A00 55%, #E8590C 100%); display: grid; place-items: center; color: #fff; }
.typo-v { font-family: var(--police-titre); font-weight: 800; font-size: 58px; color: #fff; letter-spacing: -.03em; line-height: 1; display: flex; align-items: flex-start; gap: 6px; }
.typo-v small { font-size: 18px; font-weight: 700; background: #ffffff33; border-radius: 6px; padding: 2px 7px; margin-top: 6px; letter-spacing: 0; }
.typo-v.moyen { font-size: 42px; } .typo-v.long { font-size: 30px; }
.typo-ic { opacity: .9; }
.ac-m { display: flex; align-items: center; gap: 8px; color: var(--doux-2); font-size: 12.5px; }
.ac-lien > b { font-size: 16px; line-height: 1.35; font-weight: 600; padding-right: 10px; }
.ac-outils { display: flex; align-items: center; gap: 8px; }
.ac-outils .lienv { margin-left: auto; }
.etq { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 5px; white-space: nowrap; }
.etq.prod { color: #175CD3; background: #EFF6FF; } .etq.vie { color: #B54708; background: #FFF4E5; }
/* Rubriques, agenda, fiche */
.onglets-p { display: flex; gap: 4px; border-bottom: 1px solid #E6E8EC; margin: 0 0 18px; }
.onglets-p a { padding: 10px 12px; color: var(--doux); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets-p a:hover { color: var(--texte); }
.onglets-p a.on { color: var(--texte); font-weight: 600; border-color: var(--action); }
.ags { padding: 4px 0; }
.ag { display: flex; gap: 16px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--gris-fond); }
.ag:last-child { border: 0; }
.ag-d { width: 70px; flex-shrink: 0; text-align: center; }
.ag-d b { display: block; font-family: var(--police-titre); font-size: 22px; line-height: 1.05; }
.ag-d small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #E08600; white-space: nowrap; }
.ag-c { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ag-c b { font-weight: 600; line-height: 1.35; }
.ag-c:hover b { text-decoration: underline; text-decoration-color: var(--action); text-underline-offset: 3px; }
.ag-c small { display: flex; align-items: center; gap: 6px; color: var(--doux-2); font-size: 12.5px; }
.ag-a { display: flex; align-items: center; gap: 10px; }
.article { max-width: 860px; background: #fff; border: 1px solid var(--bord); border-radius: 16px; overflow: hidden; }
.article-img { height: 340px; background: center / cover no-repeat; }
.article-c { padding: 30px 36px 32px; display: flex; flex-direction: column; gap: 10px; }
.article-c h1 { font-size: 28px; margin: 0; }
.article-meta { display: flex; gap: 8px 20px; flex-wrap: wrap; color: var(--texte-2); font-weight: 500; }
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-meta svg { color: #E08600; }
.chapo { font-size: 16.5px; line-height: 1.55; color: var(--texte-2); margin: 6px 0; }
/* Texte enrichi : affichage (fiche) et éditeur */
.texte-riche { line-height: 1.65; overflow-wrap: anywhere; }
.texte-riche > :first-child { margin-top: 0; }
.texte-riche p { margin: 0 0 12px; }
.texte-riche h2 { font-size: 19px; margin: 22px 0 8px; }
.texte-riche h3 { font-size: 16px; font-family: var(--police-titre); margin: 18px 0 6px; }
.texte-riche ul, .texte-riche ol { margin: 0 0 12px; padding-left: 22px; }
.texte-riche li { margin: 3px 0; }
.texte-riche li::marker { color: #E08600; }
.texte-riche blockquote { margin: 14px 0; padding: 10px 16px; border-left: 3px solid var(--orange); background: #FFFAF2; border-radius: 0 8px 8px 0; color: var(--texte-2); }
.texte-riche a { color: var(--action-texte); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.texte-riche h4 { font-size: 15px; margin: 16px 0 6px; }
.texte-riche h5 { font-size: 14px; margin: 14px 0 4px; color: var(--texte-2); }
.texte-riche hr { border: 0; border-top: 1px solid var(--bord); margin: 18px 0; }
.texte-riche pre { background: var(--gris-fond); border-radius: 8px; padding: 10px 14px; overflow-x: auto; font-size: 13px; }
.texte-riche .tableau-defile { overflow-x: auto; margin: 0 0 14px; }
.texte-riche .tableau td p, .texte-riche .tableau th p { margin: 0; }
/* Pages publiées depuis Confluence : encadrés (panneaux) au style Boreal */
.encadre { margin: 14px 0; padding: 10px 16px; border-radius: 8px; background: #EFF6FF; color: #1D3A6E; }
.encadre > :last-child { margin-bottom: 0; }
.encadre.note { background: #F4F3FF; color: #3E1C96; }
.encadre.attention { background: #FFF4E2; color: #6B4100; }
.encadre.ok { background: #ECFDF3; color: #05603A; }
.page-publiee { max-width: 860px; }
.d-enfants { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--texte-3); }
.d-enfants li { margin: 2px 0; }
.liste-notes { list-style: none; margin: 0 0 8px; padding: 0; }
.liste-notes li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--gris-fond); }
.editeur { border: 1px solid var(--bord-champ); border-radius: var(--r-petit); background: #fff; overflow: hidden; }
.editeur:focus-within { border-color: var(--action-focus); box-shadow: 0 0 0 3px var(--action-ombre); }
.ed-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 5px; border-bottom: 1px solid var(--filet); background: #FAFBFC; }
.ed-outils button { height: 28px; padding: 0 9px; border: 0; border-radius: 6px; background: none; color: var(--texte-2); font-size: 12.5px; }
.ed-outils button:hover { background: #EFF0F2; }
.ed-outils button.on { background: var(--action-pale); color: var(--texte); }
.ed-sep { width: 1px; height: 18px; background: var(--bord-2); margin: 0 4px; }
.ed-zone { min-height: 180px; max-height: 380px; overflow-y: auto; padding: 12px 14px; outline: none; }
.ed-zone:empty::before { content: "Programme, détails pratiques, liens…"; color: #A0A6AE; }
.image-actuelle { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.image-actuelle > span { width: 96px; height: 56px; border-radius: 8px; background: center / cover no-repeat; border: 1px solid var(--bord); }
/* Page Demandes : compteurs cliquables, attente de retour */
button.kpi { text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button.kpi:hover { border-color: var(--action-bord-doux); box-shadow: 0 4px 14px -8px var(--action-ombre-forte); }
.attente-retour { margin-bottom: 14px; }
.attente-retour .lienv { flex-shrink: 0; }
.ar-ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.ar-ic.inc { background: #FFF4E5; color: #B54708; }
.ar-ic.ame { background: #EFF6FF; color: #175CD3; }
.ar-ic.doc { background: #ECFDF3; color: var(--vert-texte); }
.ar-ic.loc { background: #F4F3FF; color: #5925DC; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: #fff; border: 1px solid var(--bord); border-radius: var(--r); padding: 14px 16px; }
.kpi .v { display: block; font-family: var(--police-titre); font-size: 22px; font-weight: 600; }
.kpi .l { color: var(--doux); font-size: 12.5px; }
.kpi.alerte-kpi .v { color: #C4320A; }
.liste .ligne { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #F4F5F6; }
.liste .ligne:last-child { border: 0; }
.liste a.ligne:hover, .liste button.ligne:hover { background: #FAFAFB; }
.liste button.ligne { width: 100%; border: 0; border-bottom: 1px solid #F4F5F6; background: none; text-align: left; }
.liste .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste .t b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste .t small { display: block; color: var(--doux-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

/* =============================================================================
   DEMANDES
   ============================================================================= */
.outils { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--bord); flex-wrap: wrap; }
.outils .droite { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 0; }
.outils select, .outils input[type=search] { height: 30px; font-size: 12.5px; width: auto; }
.outils select { min-width: 140px; }
.outils input[type=search] { width: 200px; }
.outils .cases { font-size: 12.5px; padding-left: 4px; }
.pied-tab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; color: var(--doux-2); font-size: 12.5px; border-top: 1px solid var(--filet); }
.tete-detail { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.tete-detail h1 { font-size: 22px; margin: 10px 0 6px; }
.tete-detail p { margin: 0; }
.meta-haut { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grille-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.grille-detail h4 { margin: 16px 0 6px; }
.props { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 12px; margin: 0; }
.props dt { color: var(--doux-2); }
.props dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.fichiers { display: grid; gap: 8px; }
.fichier { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--filet); border-radius: 8px; }
.fichier > div { flex: 1; min-width: 0; }
.fichier b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fichier small { color: var(--doux-2); font-size: 12px; }
.suivi { background: #FAFBFC; }
.suivi .ct2 svg { color: var(--pale); }
/* Saisie */
.grille-form { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.choix-type { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.choix-type label { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--bord-2); border-radius: var(--r); cursor: pointer; position: relative; }
.choix-type label b { display: block; }
.choix-type small { color: var(--doux); }
.choix-type input { position: absolute; opacity: 0; }
.choix-type .radio { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C9CDD3; flex-shrink: 0; }
.choix-type label:has(input:checked) { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-voile); }
.choix-type label:has(input:checked) .radio { border: 5px solid var(--action); }
.choix-type label:has(input:focus-visible) { outline: 2px solid var(--action); }
.depot { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1.5px dashed #D3D6DB; border-radius: var(--r); background: #FAFBFC; color: var(--doux); cursor: pointer; transition: border-color .15s, background .15s; }
.depot:hover, .depot.survol { border-color: var(--action-focus); background: var(--action-fond); }
.depot:focus-within { outline: 2px solid var(--action); }
.depot b { color: var(--texte); }
.depot u { color: var(--action-texte); text-decoration: none; font-weight: 600; }
.depot small { display: block; font-size: 12px; }
.depot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puces-fichiers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.puces-fichiers:empty { display: none; }
.puce-fichier { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 5px; border: 1px solid var(--bord-2); border-radius: 8px; max-width: 100%; }
.puce-fichier span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puce-fichier small { color: var(--pale); }
.puce-fichier .fi { width: 24px; height: 28px; font-size: 7.5px; }
.puce-fichier button { border: 0; background: none; color: var(--pale); font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.puce-fichier button:hover { color: var(--texte); background: var(--gris-fond); }
.pied-form { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.conseils ul { margin: 0; padding-left: 18px; color: var(--texte-3); line-height: 1.6; }
.conseils li + li { margin-top: 4px; }

/* =============================================================================
   DOCUMENTATION
   ============================================================================= */
.recherche-xl { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 6px 0 16px; background: #fff; border: 1px solid var(--bord-champ); border-radius: var(--r); margin-bottom: 14px; }
.recherche-xl:focus-within { border-color: var(--action-focus); box-shadow: 0 0 0 3px var(--action-ombre); }
.recherche-xl svg { color: #8A8F98; }
.recherche-xl input[type=search] { flex: 1; border: 0; height: 100%; font-size: 15px; padding: 0; box-shadow: none !important; background: none; }
.grille-doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.facettes-b { position: sticky; top: 72px; }
.facettes-b button { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 4px 10px; border-radius: 7px; border: 0; background: none; color: var(--texte-2); text-align: left; }
.facettes-b button:hover { background: #EFF0F2; }
.facettes-b button b { font-weight: 500; color: var(--pale); font-size: 12.5px; }
.facettes-b button.on { background: #fff; box-shadow: 0 0 0 1px #E6E8EC; font-weight: 600; }
.facettes-b button.on b { color: var(--action-accent); }
.facettes-b button.sous { padding-left: 24px; }
.grp2 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--pale); margin: 18px 10px 6px; }
.grp2:first-child { margin-top: 4px; }
.barre-res { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--doux-2); font-size: 12.5px; }
.barre-res select { width: auto; height: 30px; font-size: 12.5px; }
.res { display: flex; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--filet); }
.res:last-child { border: 0; }
.res-c { flex: 1; min-width: 0; }
.res-t { all: unset; cursor: pointer; font-weight: 600; font-size: 14.5px; }
.res-t:hover { text-decoration: underline; text-decoration-color: var(--action); text-underline-offset: 3px; }
.res-t:focus-visible { outline: 2px solid var(--action); }
.res-c .tag { margin-left: 8px; }
.res-m { color: var(--doux-2); font-size: 12.5px; margin-top: 3px; }
.res-x { margin: 6px 0 0; color: var(--texte-3); font-size: 13px; line-height: 1.5; }
.res-a { display: flex; gap: 2px; align-items: flex-start; }
.pagination { display: flex; justify-content: center; margin-top: 16px; }
.fiche dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 16px; margin: 12px 0 0; }
.fiche dt { color: var(--doux-2); }
.fiche dd { margin: 0; overflow-wrap: anywhere; }

/* =============================================================================
   LOCALISATION — feuille de route en frise trimestrielle
   ============================================================================= */
.rm-sous { margin: 4px 0 0; color: var(--doux); }
.rm-leg { display: flex; gap: 14px; color: var(--doux); font-size: 12.5px; flex-wrap: wrap; }
.rm-leg span { display: flex; align-items: center; gap: 6px; }
.rm-leg i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.st-LIVRE { background: var(--vert); } .st-EN_COURS { background: var(--orange); } .st-PLANIFIE { background: var(--bleu); } .st-EXPLORATOIRE { background: #C2C6CC; }
.pastille { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.gantt { --nom: 250px; position: relative; padding: 0; overflow: hidden; }
.g-entete { display: flex; border-bottom: 1px solid var(--bord); background: #FAFBFC; }
.g-nom-t { width: var(--nom); flex-shrink: 0; padding: 10px 16px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--doux-2); }
.g-cols { flex: 1; display: grid; }
.g-col { padding: 10px 4px; font-size: 12px; font-weight: 600; color: var(--doux); border-left: 1px solid var(--bord); text-align: center; white-space: nowrap; }
.g-col.now { color: var(--orange-texte); background: #FFF8EC; }
.g-corps { position: relative; }
.g-ligne { display: flex; align-items: stretch; width: 100%; border: 0; border-bottom: 1px solid var(--gris-fond); background: none; padding: 0; text-align: left; transition: background .15s; }
.g-ligne:last-child { border-bottom: 0; }
.g-ligne:hover { background: #FAFAFB; }
.g-ligne.on { background: #FFF8EC; }
.g-nom { width: var(--nom); flex-shrink: 0; display: flex; gap: 10px; align-items: center; padding: 12px 16px; min-width: 0; }
.g-nom > span:last-child { min-width: 0; }
.g-nom b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-nom small { display: block; color: var(--doux-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-piste { flex: 1; position: relative; min-height: 56px; display: block; }
.g-grille { position: absolute; inset: 0; display: grid; pointer-events: none; }
.g-grille i { border-left: 1px solid var(--gris-fond); }
.g-barre { position: absolute; top: 17px; height: 20px; border-radius: 6px; background: color-mix(in srgb, var(--c) 16%, #fff);
    border: 1px solid color-mix(in srgb, var(--c) 45%, #fff); overflow: hidden; min-width: 34px; }
.g-prog { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); opacity: .85; }
.g-pct { position: relative; font-size: 11px; font-weight: 700; padding-left: 7px; line-height: 18px; color: var(--texte); }
.jal { position: absolute; top: 41px; width: 7px; height: 7px; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 0 2px #fff; }
.g-auj { position: absolute; top: 0; bottom: 0; width: 0; left: calc(var(--nom) + (100% - var(--nom)) * var(--x)); border-left: 1.5px dashed var(--orange-vif); pointer-events: none; z-index: 2; }
.g-auj span { position: absolute; bottom: 4px; left: 4px; font-size: 10.5px; font-weight: 700; color: var(--orange-vif); background: #fff; padding: 0 4px; white-space: nowrap; border-radius: 3px; }
.rm-detail { margin-top: 16px; background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 20px 22px; }
.d-tete { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--gris-fond); margin-bottom: 14px; }
.d-tete > div:first-of-type { flex: 1; min-width: 0; }
.d-tete .pastille { width: 14px; height: 14px; margin-top: 5px; }
.d-tete h2 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.d-tete p { margin: 0; color: var(--texte-3); max-width: 780px; line-height: 1.55; }
.d-pct { text-align: right; flex-shrink: 0; }
.d-pct b { display: block; font-family: var(--police-titre); font-size: 24px; color: color-mix(in srgb, var(--c) 80%, #000); }
.d-pct small { color: var(--doux-2); }
.d-outils { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.d-axe, .d-el { display: grid; grid-template-columns: 112px minmax(0, 1fr) 84px 150px minmax(180px, 280px) 32px; gap: 12px; align-items: center; }
.d-axe { font-size: 10.5px; color: var(--pale); margin-bottom: 2px; }
.d-trim { display: grid; text-align: center; white-space: nowrap; }
.d-el { padding: 9px 0; border-bottom: 1px solid #F4F5F6; }
.d-el:last-child { border-bottom: 0; }
.d-el b { font-weight: 500; display: block; }
.d-el small { display: block; color: var(--doux-2); font-size: 12px; line-height: 1.45; margin-top: 2px; }
.d-per { font-size: 12px; color: var(--doux); }
.d-barre { position: relative; height: 8px; background: var(--gris-fond); border-radius: 4px; }
.d-barre i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--c); }
.d-pied { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gris-fond); }
.d-pied > div { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.d-lien { display: inline-flex; align-items: center; gap: 6px; color: var(--action-texte); font-weight: 500; background: none; border: 0; padding: 0; }
.d-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Localisation : une colonne par trimestre, une carte par sujet, détail en panneau latéral */
.frise { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; scroll-snap-type: x proximity; }
.jalon { background: #fff; border: 1px solid var(--bord); border-radius: 14px; padding: 14px; scroll-snap-align: start; min-width: 0; }
.jalon header { border-bottom: 1px solid var(--bord); padding-bottom: 10px; margin-bottom: 10px; }
.jalon h3 { font-family: var(--police-titre); font-weight: 700; font-size: 20px; letter-spacing: -.01em; margin: 0; }
.jalon header small { display: block; color: var(--doux); font-size: 12.5px; margin-top: 2px; font-weight: 600; }
.jalon header .d-lien { font-weight: 600; }
.sujet { display: block; width: 100%; text-align: left; border: 0; background: var(--gris-fond); border-left: 3px solid var(--t); border-radius: 0 10px 10px 0; padding: 9px 11px; margin-bottom: 8px; cursor: pointer; color: inherit; transition: transform .2s, background .2s; }
.sujet:last-child { margin-bottom: 0; }
.sujet:hover, .sujet:focus-visible { transform: translateX(3px); background: #E9EBEE; }
.sujet b { display: block; font-weight: 600; font-size: 14px; }
.sujet small { display: block; color: var(--doux); font-size: 12.5px; margin-top: 3px; }
.vide-col { color: var(--doux-2, #9AA0A8); font-size: 13px; padding: 8px 2px; margin: 0; }
@media (max-width: 760px) { .frise { grid-auto-columns: minmax(240px, 84%); scroll-snap-type: x mandatory; } }
.calque-lateral { position: fixed; inset: 0; z-index: 60; }
.voile-lateral { position: absolute; inset: 0; background: rgba(15, 20, 30, .25); }
.panneau-lateral { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: #fff; box-shadow: -20px 0 50px -20px rgba(0, 0, 0, .3);
    display: flex; flex-direction: column; border-top: 3px solid var(--t); animation: glisse-lateral .25s cubic-bezier(.25, .8, .25, 1); }
@keyframes glisse-lateral { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .panneau-lateral, .sujet { animation: none; transition: none; } }
.pan-tete { padding: 18px 22px; border-bottom: 1px solid var(--bord); display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.pan-tete small { color: var(--doux); font-size: 12.5px; font-weight: 600; }
.pan-tete h2 { margin: 2px 0 0; font-size: 18px; }
.pan-fermer { font-size: 22px; line-height: 1; }
.pan-corps { padding: 18px 22px; overflow-y: auto; flex: 1; }
.pan-corps h3 { font-size: 14px; margin: 18px 0 6px; }
.pan-props { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 14px; font-size: 14px; }
.pan-props dt { color: var(--doux); }
.pan-props dd { margin: 0; font-weight: 600; }
.pan-liste { margin: 0; padding-left: 18px; }
.pan-liste li { margin: 3px 0; }
.pan-pied { padding: 14px 22px; border-top: 1px solid var(--bord); display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.pastille-theme { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* Gestion › Sites */
.sous-nav { margin: 0 0 4px 21px; padding-left: 10px; border-left: 1px solid var(--bord); }
.sous-nav a { display: block; padding: 5px 10px; font-size: 13px; color: var(--doux); border-radius: 6px; }
.sous-nav a.on { color: var(--texte); font-weight: 600; background: #F1F2F4; }
.menu-fonce .sous-nav { border-color: #2A2D32; }
.menu-fonce .sous-nav a.on { color: #fff; background: #25282D; }
.resume { color: var(--doux); font-size: 13px; margin-right: 4px; }
.resume b { color: var(--texte); }
.filtres-sites { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filtres-sites select { width: auto; height: 34px; }
.recherche-s { display: flex; align-items: center; gap: 8px; height: 34px; width: min(340px, 100%); padding: 0 12px; border-radius: var(--r-petit); background: #fff; border: 1px solid var(--bord-champ); color: #8A8F98; }
.recherche-s input[type=search] { border: 0; height: 100%; padding: 0; background: none; box-shadow: none !important; }
.site-c + .site-c { margin-top: 14px; }
.sc-t { display: flex; gap: 12px; align-items: center; }
.sc-t h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.sc-t small { color: var(--doux-2); font-size: 12px; }
.sc-ic { width: 34px; height: 34px; border-radius: 8px; background: #F4F3FF; color: #5925DC; display: grid; place-items: center; flex-shrink: 0; }
.site-c .tab td { white-space: normal; }
.site-c .tab { table-layout: fixed; min-width: 760px; }
.site-c .tab th:nth-child(1) { width: 40%; } .site-c .tab th:nth-child(2) { width: 24%; } .site-c .tab th:nth-child(3) { width: 14%; }
.site-c .tab th:nth-child(4) { width: 16%; } .site-c .tab th:nth-child(5) { width: 6%; }
/* Sites : un tableau unique, une ligne par organisation */
.sites-tab { table-layout: fixed; min-width: 640px; }
.sites-tab td { white-space: normal; }
.sites-tab th:nth-child(1) { width: 34%; } .sites-tab th:nth-child(2) { width: 38%; }
.sites-tab.avec-actions th:last-child { width: 96px; }
.sites-tab .actions-l { white-space: nowrap; }
.sites-tab .actions-l .ic + .ic { margin-left: 4px; }
.ic-contrat { position: relative; }
.ic-contrat.a-voir::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #F79009; box-shadow: 0 0 0 2px #fff; }
.ctr-dedie { margin: -4px 0 12px; font-size: 13.5px; }
.ctr-dedie svg { transform: rotate(180deg); vertical-align: -2px; }
/* Avec la colonne « Contrats » (équipe Divalto) */
.site-c .tab.avec-contrats th:nth-child(1) { width: 31%; } .site-c .tab.avec-contrats th:nth-child(2) { width: 18%; }
.site-c .tab.avec-contrats th:nth-child(3) { width: 12%; } .site-c .tab.avec-contrats th:nth-child(4) { width: 14%; }
.site-c .tab.avec-contrats th:nth-child(5) { width: 19%; } .site-c .tab.avec-contrats th:nth-child(6) { width: 6%; }
.det { display: block; color: var(--doux-2); font-size: 12px; margin-top: 2px; font-weight: 400; }
.pp { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 5px; margin: 1px 4px 1px 0; white-space: nowrap; }
.pp.erp { color: #B54708; background: #FFF4E5; } .pp.crm { color: #0E7090; background: #ECFDFF; }
.nb-dem { display: inline-block; min-width: 22px; text-align: center; font-weight: 600; color: #B54708; background: #FFF4E5; border-radius: 999px; padding: 0 6px; }
.retard { color: #C4320A; font-weight: 600; } .bientot { color: #B54708; font-weight: 600; }
.tag.retard { color: #C4320A; background: #FEF3F2; }

/* Documents contractuels : indicateur d'un site, panneau, pièces requises */
.ctr-sync { align-items: center; gap: 10px; font-size: 13px; }
.ctr-sync svg { vertical-align: -2px; }
.ctr-acc .ctr-o { display: grid; grid-template-columns: 22px minmax(0, 1fr) 150px 170px 90px; gap: 12px; align-items: center; width: 100%;
    padding: 11px 16px; border: 0; border-top: 1px solid var(--filet); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ctr-acc.sans-pieces .ctr-o { grid-template-columns: 22px minmax(0, 1fr) 170px 90px; }
.ctr-acc .ctr-ent { cursor: default; border-top: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--doux-2); padding-block: 9px; }
.ctr-acc button.ctr-o:hover { background: #FAFAFB; }
.ctr-acc .ctr-o > svg { transition: transform .15s; color: var(--doux-2); }
.ctr-bloc.ouvert > .ctr-o > svg { transform: rotate(90deg); }
.ctr-bloc.ouvert > .ctr-o { background: #F7F7F8; }
.ctr-det { padding: 4px 0 10px; border-top: 1px solid var(--filet); }
.ctr-l { display: grid; grid-template-columns: minmax(0, 1fr) 110px 150px 32px; gap: 12px; align-items: center;
    padding: 5px 16px 5px calc(50px + var(--niv, 0) * 22px); font-size: 13.5px; }
.ctr-l > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.ctr-l svg { vertical-align: -3px; color: var(--doux-2); }
.ctr-dos { font-weight: 600; }
button.ctr-dos { width: 100%; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-align: left; cursor: pointer; }
button.ctr-dos:hover { background: #FAFAFB; }
.ctr-dos small { font-weight: 400; margin-left: 4px; }
.ctr-dos > span > svg:first-child { margin-right: 3px; transition: transform .15s; }
.ctr-dossier.ouvert > .ctr-dos > span > svg:first-child { transform: rotate(90deg); }
.ctr-manq { margin: 6px 16px 6px 50px; padding: 7px 10px; border-radius: 8px; background: #FFF4E2; color: #8A5300; font-size: 13px; }
.ctr-manq svg { vertical-align: -2px; }
.ctr-pied { padding: 8px 16px 2px 50px; font-size: 13px; }
.ctr-pied svg { vertical-align: -2px; }
@media (max-width: 760px) {
    .ctr-acc .ctr-o { grid-template-columns: 22px minmax(0, 1fr) auto; }
    .ctr-acc .ctr-o > span:nth-child(4), .ctr-acc .ctr-o > span:nth-child(5) { display: none; }
    .ctr-l { grid-template-columns: minmax(0, 1fr) auto; padding-left: calc(20px + var(--niv, 0) * 16px); }
    .ctr-l > span:nth-child(3), .ctr-l > span:nth-child(4) { display: none; }
}
.titre-section { margin: 28px 0 4px; font-size: 17px; }
.modale.large { width: min(920px, 100%); }
.modale.large .tab { width: 100%; table-layout: fixed; }
.modale.large .tab td { white-space: normal; }
.modale.large .tab th:nth-child(1) { width: 58%; } .modale.large .tab th:nth-child(2) { width: 15%; }
.modale.large .tab th:nth-child(3) { width: 19%; } .modale.large .tab th:nth-child(4) { width: 8%; }
.modale h3 { margin: 18px 0 8px; font-size: 14.5px; display: flex; align-items: baseline; gap: 10px; }
.ind-contrats { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; text-align: left; background: none; border: 0; padding: 2px 0; cursor: pointer; font: inherit; color: inherit; }
.ind-contrats:hover .tag { text-decoration: underline; }
.ind-contrats small { font-size: 12px; }
.pieces-req { list-style: none; margin: 0; padding: 0; border: 1px solid var(--filet); border-radius: 10px; }
.pieces-req li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--filet); }
.pieces-req li:first-child { border-top: 0; }
.pieces-req li span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.pieces-req li.ok span:first-child svg { color: var(--vert-texte); }
tr.inactif td { opacity: .55; }
.aide-erreur { color: #C4320A !important; }
.couleurs { display: flex; gap: 8px; flex-wrap: wrap; }
.couleurs label { width: 28px; height: 28px; border-radius: 8px; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px #0000001a; }
.couleurs input { position: absolute; opacity: 0; }
.couleurs label:has(input:checked) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--texte); }
.couleurs label:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 4px; }
.periode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* =============================================================================
   MON COMPTE & SÉCURITÉ
   ============================================================================= */
.grille-compte { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.ligne-s, .ligne-secu { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ligne-s h3, .ligne-secu h3 { margin: 0 0 4px; }
.ligne-s p, .ligne-secu p { margin: 0; line-height: 1.6; }
.ligne-secu { padding: 14px 0; border-bottom: 1px solid var(--filet); }
.methodes { margin-top: 14px; display: grid; gap: 8px; }
.methode { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--filet); border-radius: 8px; }
.methode > div { flex: 1; min-width: 0; }
.methode b { display: block; font-weight: 500; }
.methode small { color: var(--doux-2); font-size: 12px; }
.methode .actions { gap: 12px; }
.m-ic { width: 32px; height: 32px; border-radius: 8px; background: #F4F5F7; color: #5B6068; display: grid; place-items: center; flex-shrink: 0; }
.vigns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.vign { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--bord-2); border-radius: 10px; background: #fff; }
.vign .mini { display: flex; height: 58px; border-radius: 6px; overflow: hidden; border: 1px solid var(--bord); }
.vign .mini i:first-child { width: 32%; }
.vign .mini i:last-child { flex: 1; background: #F7F8FA; }
.vign > span:last-child { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; font-weight: 500; }
.vign.on { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-voile); }
.vign.on > span:last-child { font-weight: 600; }
.mini-fonce { background: #17191C; } .mini-clair { background: #FBFBFC; border-right: 1px solid var(--bord); } .mini-auto { background: linear-gradient(135deg, #17191C 50%, #FBFBFC 50%); }
.choix-mfa { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.choix-mfa .option { display: grid; grid-template-columns: 40px 1fr 16px; gap: 12px; align-items: center; padding: 14px 16px; width: 100%;
    border: 1px solid var(--bord-2); border-radius: var(--r); background: #fff; text-align: left; }
.choix-mfa .option:hover { border-color: var(--action-bord-doux); box-shadow: 0 4px 14px -8px var(--action-ombre-forte); }
.choix-mfa .ic { width: 40px; height: 40px; background: #F4F5F7; color: #5B6068; }
.choix-mfa .fl { color: var(--pale); }
.etapes { padding-left: 20px; margin: 0; }
.etapes li { margin-bottom: 18px; }
.qr { display: flex; gap: 18px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.qr-image svg { width: 190px; height: 190px; border: 1px solid var(--bord); border-radius: 8px; display: block; background: #fff; }
.codes-secours { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 14px; }
.codes-secours code { text-align: center; padding: 8px; font-size: 14px; }

/* =============================================================================
   FENÊTRE MODALE, NOTIFICATIONS, ALERTES
   ============================================================================= */
.voile { position: fixed; inset: 0; background: #0F1114a6; display: grid; place-items: center; z-index: 100; padding: 16px; }
.modale { background: #fff; border-radius: 14px; box-shadow: 0 30px 60px -20px #000a; width: min(680px, 100%); max-height: 92vh; overflow: auto; padding: 24px 26px; }
.modale h2 { margin-bottom: 14px; }
.modale-pied { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--filet); }
.toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast { background: var(--texte); color: #fff; padding: 11px 16px; border-radius: var(--r-petit); box-shadow: var(--ombre-pop); max-width: 420px; border-left: 3px solid var(--vert); }
.toast.erreur { border-left-color: var(--orange-vif); }
.toast.avert { border-left-color: var(--orange); }
.alerte { padding: 10px 14px; border-radius: var(--r-petit); margin-bottom: 14px; font-size: 13.5px; border: 1px solid; }
.alerte-erreur { background: #FEF3F2; color: #912018; border-color: #FDDCD8; }
.alerte-ok { background: #ECFDF3; color: var(--vert-texte); border-color: #C6F1DA; }
.alerte-info { background: #EFF6FF; color: #1849A9; border-color: #D1E4FD; }

/* =============================================================================
   MIRE DE CONNEXION « C2 » : photo plein écran, carte blanche posée dessus
   ============================================================================= */
body.mire { min-height: 100vh; margin: 0; position: relative; background: #17191C; display: flex; align-items: center; padding: 40px 0 70px; }
.mire-photo { position: fixed; inset: 0; background: #17191C center / cover no-repeat; }
.mire-photo.sans-photo { background: radial-gradient(900px 600px at 80% 20%, #FF9C0033, transparent 60%), linear-gradient(160deg, #313131, #17191C); }
.mire-voile { position: fixed; inset: 0; background: linear-gradient(90deg, #0A0C10b3 0%, #0A0C1059 45%, #0A0C1000 75%); }
.mire-carte { position: relative; z-index: 1; margin-left: 8%; width: 368px; max-width: calc(100% - 32px); background: #fff; border-radius: 14px; padding: 26px 28px 24px;
    box-shadow: 0 30px 60px -20px #000a; }
.mire-carte { overflow: hidden; }
.mire-bandeau { height: 64px; margin: -32px -36px 22px; background: url(/img/charte/bandeau.jpg) center / cover; }
.mire-carte > .logo { height: 28px; width: auto; display: block; margin-bottom: 16px; }
.mire-carte .baseline { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; color: var(--texte); }
.mire-carte .qui-courriel { margin: 0 0 16px; color: var(--doux); font-size: 14px; overflow-wrap: anywhere; }
.mire-carte .qui-courriel span { color: var(--texte); font-weight: 600; }
.mire-carte .mire-note { margin: 14px 0 0; }
.nom-portail { color: var(--vert-boreal); font-weight: 600; }
.auth .titre-portail { display: flex; align-items: center; gap: 10px; }
.auth .titre-portail + .baseline { margin: 2px 0 14px; }
.env-mire { display: inline-block; align-self: flex-start; margin: -2px 0 10px; }
.mire-pied { position: fixed; left: 8%; right: 36px; bottom: 20px; z-index: 1; display: flex; justify-content: space-between; gap: 12px; color: #ffffffb3; font-size: 12.5px; }
.auth { display: flex; flex-direction: column; }
.auth h1 { font-size: 21px; margin: 0 0 6px; }
.auth h2 { font-size: 20px; margin: 0 0 6px; }
.auth .accroche, .auth > .doux { color: var(--doux); margin: 0 0 22px; line-height: 1.5; }
.auth .champ { margin-bottom: 14px; }
.auth input[type=text], .auth input[type=email], .auth input[type=password] { height: 42px; border-color: #D7DAE0; border-radius: 9px; }
.auth .btn-large { height: 42px; border-radius: 9px; }
.auth > .cases, .auth form > .cases { margin: 2px 0 16px; font-size: 13.5px; }
.btn-ms { width: 100%; height: 42px; border-radius: 9px; border-color: #D7DAE0; color: var(--texte); font-weight: 600; gap: 10px; }
.ou { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--pale); font-size: 12.5px; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: #E6E8EC; }
.ligne-lib { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ligne-lib .btn-lien { font-weight: 500; font-size: 12.5px; }
.mdp { position: relative; }
.mdp input { padding-right: 44px; }
.oeil { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 8px; color: var(--pale); display: grid; place-items: center; }
.oeil:hover { color: var(--texte); }
.passkey-lien { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; color: #5B6068; font-weight: 500; background: none; border: 0; width: 100%; padding: 6px; border-radius: 8px; }
.passkey-lien:hover { color: var(--texte); background: var(--gris-fond); }
.icone-rond { width: 48px; height: 48px; border-radius: 50%; background: var(--action-pale); color: var(--action-accent); display: grid; place-items: center; margin-bottom: 12px; }
.icone-rond.vert { background: #ECFDF3; color: var(--vert-texte); }
.code-saisie { font-size: 22px !important; letter-spacing: .3em; text-align: center; height: 52px !important; font-family: var(--police-titre); font-weight: 600; }
.regles { list-style: none; padding: 0; margin: 0 0 16px; font-size: 12.5px; }
.regles li { padding: 2px 0 2px 22px; position: relative; color: var(--doux); }
.regles li::before { content: "○"; position: absolute; left: 2px; color: var(--pale); }
.regles li.ok { color: var(--texte-3); }
.regles li.info::before { content: "ℹ"; color: var(--bleu); }
.regles li.ok::before { content: "✓"; color: var(--vert); font-weight: 800; }
.force { height: 5px; background: var(--gris-fond); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.force i { display: block; height: 100%; width: 0; background: var(--orange-vif); transition: width .2s, background .2s; }

@media print {
    .side, .top, .pied, .modale-pied, .actions, .cases { display: none !important; }
    .voile { position: static; background: none; }
}

/* =============================================================================
   ADAPTATION AUX ÉCRANS
   ============================================================================= */
@media (max-width: 1200px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .evs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .d-axe { display: none; }
    .d-el { grid-template-columns: 104px minmax(0, 1fr) 76px 130px 32px; }
    .d-el .d-barre { display: none; }
}
@media (max-width: 1080px) {
    .grille-detail, .grille-form, .grille-compte { grid-template-columns: minmax(0, 1fr); }
    .grille-doc { grid-template-columns: minmax(0, 1fr); }
    .facettes-b { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
    .facettes-b .grp2 { width: 100%; margin: 8px 4px 2px; }
    .facettes-b button { width: auto; }
    .grille-3, .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .verre { display: none; }
}
@media (max-width: 900px) {
    .side { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .2s; }
    body.menu-ouvert .side { transform: none; box-shadow: var(--ombre-pop); }
    .burger { display: grid; }
    .top { padding: 0 16px; }
    .page { padding: 18px 16px 40px; }
    .pied { padding: 0 16px 18px; }
    .recherche kbd { display: none; }
    .top .act .b span { display: none; }
    .gantt { --nom: 160px; }
    .g-nom small { display: none; }
}
@media (max-width: 640px) {
    .grille-2, .grille-3, .grille-4, .g2, .choix-type { grid-template-columns: minmax(0, 1fr); }
    .kpis { gap: 10px; }
    .evs, .acs { grid-template-columns: minmax(0, 1fr); }
    .hero { min-height: 340px; }
    .hero-c { margin: 28px 22px; }
    .hero-t { font-size: 26px; }
    .hero-voile { background: linear-gradient(0deg, #0A0C10e6 0%, #0A0C10a6 55%, #0A0C1040 100%); }
    .accueil-tete { flex-wrap: wrap; }
    .article-img { height: 200px; }
    .article-c { padding: 22px 20px; }
    .ag { flex-wrap: wrap; }
    .kpi { padding: 12px 14px; }
    .tete-detail { flex-direction: column; }
    .outils .droite { width: 100%; }
    .outils select, .outils input[type=search] { flex: 1; min-width: 0; width: auto; }
    .d-el { grid-template-columns: minmax(0, 1fr) auto; }
    .d-el .d-per, .d-el > .doux { display: none; }
    .d-el > .stat { grid-column: 1 / -1; justify-self: start; }
    .gantt { --nom: 120px; overflow-x: auto; }
    .g-entete, .g-corps { min-width: 620px; }
    .g-nom-t, .g-nom { padding-left: 10px; padding-right: 6px; }
    .g-col { font-size: 10px; }
    .mire-carte { margin: 0 auto; padding: 26px 22px; }
    .mire-bandeau { margin: -26px -22px 18px; height: 52px; }
    .mire-pied { left: 16px; right: 16px; }
    .fiche dl, .props { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .fiche dd, .props dd { margin-bottom: 8px; }
}

/* --- Page publique « Confidentialité » ---------------------------------------- */
.page-publique { background: var(--fond); }
.texte-public { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; color: var(--texte-2); }
.texte-public .logo { display: block; margin: 18px 0 8px; }
.texte-public h1 { color: var(--texte); margin: 6px 0 10px; }
.texte-public h2 { color: var(--texte); font-size: 17px; margin: 28px 0 8px; }
.texte-public .accroche { font-size: 15px; }
.texte-public ul { padding-left: 20px; }
.texte-public li { margin: 6px 0; }
.texte-public .retour { font-size: 13px; }
.mire-pied a { color: inherit; }
/* Paramètres › Conservation : choix du responsable (compte + fonction + bouton sur une ligne). */
.ligne-responsable { display: grid; grid-template-columns: 2fr 1fr auto; gap: 12px; align-items: start; margin: 14px 0 4px; }
.ligne-responsable .b { margin-top: 24px; }
@media (max-width: 760px) { .ligne-responsable { grid-template-columns: 1fr; } .ligne-responsable .b { margin-top: 0; } }
.grille-liaison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; margin: 14px 0 0; }
.grille-liaison .actions-liaison { display: flex; gap: 8px; align-items: flex-end; padding-bottom: 2px; }
@media (max-width: 760px) { .grille-liaison { grid-template-columns: 1fr; } }

/* --- Cadrage des photos (formulaire de publication) : point focal + aperçus des formats --- */
.cadrage-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
.cadrage-grille > :first-child { text-align: center; }
/* Le cadre épouse exactement l'image : le repère tombe où l'on clique, quel que soit le format de la photo. */
.cadrage-source { position: relative; display: inline-block; max-width: 100%; cursor: crosshair; touch-action: none; user-select: none; line-height: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--bord); }
.cadrage-source img { display: block; max-width: 100%; max-height: 260px; width: auto; height: auto; pointer-events: none; }
.cadrage-point { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--action), 0 2px 8px #0008; pointer-events: none; }
.cadrage-apercus { display: flex; flex-direction: column; gap: 10px; }
.cadrage-apercus small { display: block; color: var(--doux); font-size: 11.5px; margin-bottom: 3px; }
.cad-une, .cad-carte, .cad-fiche { background: #17191C center / cover no-repeat; border-radius: 8px; }
.cad-une { position: relative; aspect-ratio: 2.75 / 1; overflow: hidden; }
.cad-une .cad-texte { position: absolute; left: 7%; top: 30%; width: 34%; height: 40%; border-radius: 4px; background: repeating-linear-gradient(180deg, #ffffffcc 0 6px, transparent 6px 12px); opacity: .55; }
.cad-ligne { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.cad-carte { aspect-ratio: 1.7 / 1; }
.cad-fiche { aspect-ratio: 2.2 / 1; }
.cad-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@media (max-width: 760px) { .cadrage-grille { grid-template-columns: 1fr; } }

/* État des services Divalto : bandeau de l'accueil, pastille, page #services */
.pt-statut { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #12B76A; flex-shrink: 0; }
.pt-statut.maintenance { background: #2E90FA; } .pt-statut.mineur { background: #F79009; } .pt-statut.majeur { background: #F04438; } .pt-statut.inconnu { background: #98A2B3; }
.bandeau-statut { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--bord); border-radius: 12px;
    background: #fff; color: inherit; font-size: 14px; text-decoration: none; }
.bandeau-statut:hover { border-color: #D0D5DD; }
.bandeau-statut .bs-t { flex: 1; min-width: 0; }
.bandeau-statut .bs-l { font-size: 13px; color: var(--doux); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.pastille-top { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--bord); border-radius: 999px; font-size: 13px; color: inherit; background: #fff; margin-right: 8px; }
.cartes-statut { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 14px; }
.cartes-statut .carte { margin: 0; }
.cs-etat { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; margin: 4px 0; }
.ev-statut { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 10px 0; border-top: 1px solid var(--filet); font-size: 14px; }
.h-suite { margin-top: 18px; }
.lien-statut { margin: 14px 0 0; font-size: 13px; }
.lien-statut svg { vertical-align: -2px; }
@media (max-width: 760px) {
    .ev-statut { grid-template-columns: minmax(0, 1fr) auto; }
    .ev-statut > span:first-child { grid-column: 1 / -1; }
    .bandeau-statut .bs-l { display: none; }
    .pastille-top { font-size: 0; gap: 0; padding: 8px; }
}

/* Soumissions des partenaires : assistant, cohérence, imports */
.etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.etape-p { font-size: 12.5px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--bord); background: #fff; color: var(--doux); display: inline-flex; align-items: center; gap: 5px; }
.etape-p.on { background: var(--action); border-color: var(--action); color: var(--action-encre); font-weight: 600; }
.etape-p.faite { color: var(--texte); }
.etapes .pour { margin-left: auto; font-size: 13px; }
.sites-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.site-choix { border: 1px solid var(--bord); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: block; }
.site-choix input { position: absolute; opacity: 0; pointer-events: none; }
.site-choix.on { border: 2px solid var(--action); padding: 9px 11px; }
.pied-etape { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 14px; }
.pied-etape .espace { flex: 1; }
.univers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.carte-univers { text-align: left; border: 1px solid var(--bord); border-radius: 12px; padding: 10px 12px; background: #fff; cursor: pointer; font: inherit; color: inherit; display: grid; gap: 2px; }
.carte-univers small { color: var(--doux); font-size: 12px; }
.carte-univers.on { border: 2px solid var(--action); padding: 9px 11px; }
.assistant-grille { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.assistant-grille .colle { position: sticky; top: 12px; }
.assistant-grille .carte { margin: 0; }
.choix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.choix .doux { min-width: 56px; font-size: 13px; }
.pill { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bord); background: #fff; font: inherit; font-size: 13px; cursor: pointer; color: inherit; }
.pill.on { background: var(--action); border-color: var(--action); color: var(--action-encre); font-weight: 600; }
.art-l { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--filet); font-size: 14px; }
.ref { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--pale, #98A2B3); }
.qte { display: inline-flex; align-items: center; border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; background: #fff; }
.qte button { width: 28px; height: 28px; border: 0; background: none; font-size: 15px; cursor: pointer; color: inherit; }
.qte input { width: 52px; height: 28px; border: 0; border-left: 1px solid var(--filet); border-right: 1px solid var(--filet); text-align: center; font: inherit; font-weight: 600; -moz-appearance: textfield; }
.qte input::-webkit-outer-spin-button, .qte input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.groupe { border-top: 1px solid var(--filet); padding: 8px 0 2px; }
.groupe summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 2px 0 6px; }
.groupe-fixe { margin: 8px 0 6px; }
.recap { display: grid; gap: 4px; }
.recap-l { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--filet); font-size: 13.5px; }
.coherence { display: grid; gap: 6px; margin-top: 12px; }
.coherence .en-place { font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.coherence .remarque { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border-radius: 8px; background: #F2F4F7; font-size: 13px; }
.coherence .remarque.attention { background: #FFF4E2; color: #8A5300; }
.coherence .remarque svg { margin-top: 2px; }
.imports { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.import { border: 1px solid var(--bord); border-radius: 10px; padding: 12px; display: grid; gap: 6px; justify-items: start; }
.import label.b { cursor: pointer; }
@media (max-width: 860px) {
    .assistant-grille { grid-template-columns: minmax(0, 1fr); }
    .assistant-grille .colle { position: static; }
    .etapes .pour { margin-left: 0; width: 100%; }
}

/* Ton du module Soumissions : violet Divalto (le bandeau du haut et le menu restent orange, sauf l'entrée
   « Soumissions » elle-même). Posé sur <body> par le routeur (shell.js) et sur l'entrée du menu (home.html). */
.ton-soumissions {
    --bouton: #5B3FD3; --bouton-encre: #fff; --bouton-survol: #4A31B8; --bouton-bord: #4E35C2; --bouton-accent: #fff;
    --action: #5B3FD3; --action-encre: #fff; --action-survol: #4A31B8; --action-bord: #4E35C2; --action-bord-survol: #4A31B8;
    --action-texte: #4E36B5; --action-accent: #5B3FD3; --action-pale: #EFEBFC; --action-voile: #5B3FD326; --action-focus: #9B87EB;
    --action-ombre: #5B3FD31f; --action-ombre-forte: #5B3FD366; --action-ombre-cta: #5B3FD3aa; --action-bord-doux: #C4B8F5;
    --action-fond: #F8F6FE; --action-clair: #A794F2;
}
body.ton-soumissions .top, body.ton-soumissions .side {
    --bouton: #1F2328; --bouton-encre: #fff; --bouton-survol: #353B42; --bouton-bord: #1F2328; --bouton-accent: #FF9C00;
    --action: #FF9C00; --action-encre: #1F1300; --action-survol: #F59500; --action-bord: #F09000; --action-bord-survol: #E08600;
    --action-texte: #B86E00; --action-accent: #E08600; --action-pale: #FFF4E2; --action-voile: #FF9C0026; --action-focus: #FFB547;
    --action-ombre: #FF9C001f; --action-ombre-forte: #FF9C0066; --action-ombre-cta: #FF9C00aa; --action-bord-doux: #FFC266;
    --action-fond: #FFFBF4; --action-clair: #FF9C00;
}
.side nav a.ton-soumissions {
    --action: #5B3FD3; --action-encre: #fff; --action-pale: #EFEBFC; --action-accent: #5B3FD3; --action-clair: #A794F2;
}

/* Conditions d'utilisation : lecture et acceptation */
.carte.conditions { max-width: 760px; margin: 24px auto 0; padding: 28px 30px; }
.conditions-texte { max-height: 52vh; overflow: auto; border: 1px solid var(--bord); border-radius: 10px; padding: 14px 18px; margin: 14px 0 16px; background: var(--gris-fond); }
.conditions .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.erreur-champ { color: #C4320A; font-size: 12.5px; margin: 6px 0 0; }
#cgu-editeur .ed-zone { min-height: 280px; }
#cgu-editeur .ed-zone:empty::before { content: "Rédigez ou collez le texte des conditions d’utilisation…"; }

/* Signature électronique : encart du référent, parcours, registre */
.encart-signatures { margin: 0 0 18px; padding: 14px 18px; }
.encart-signatures .es-tete { display: flex; align-items: center; gap: 8px; color: var(--action-texte); margin-bottom: 6px; }
.encart-signatures .es-tete h2 { font-size: 15px; margin: 0; color: var(--texte); }
.encart-signatures .pastille { background: var(--action-pale); color: var(--action-texte); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.es-ligne { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--filet); color: var(--doux); }
.es-ligne .es-t { flex: 1; min-width: 0; color: var(--texte); }
.es-ligne .es-t small { display: block; color: var(--doux-2); font-size: 12px; }
.sg-carte, .sg-fin { max-width: 860px; margin: 8px auto 0; padding: 0; overflow: hidden; }
.sg-fin { padding: 28px 30px; text-align: center; } .sg-fin .icone-rond { margin: 0 auto 12px; } .sg-fin .actions { justify-content: center; }
.sg-etapes { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 18px; border-bottom: 1px solid var(--filet); font-weight: 500; }
.sg-etape { display: inline-flex; align-items: center; gap: 8px; color: var(--doux-2); }
.sg-etape.en-cours, .sg-etape.faite { color: var(--texte); }
.sg-rond { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gris-fond); font-size: 13px; }
.sg-etape.en-cours .sg-rond { border: 2px solid var(--action); color: var(--action-texte); background: #fff; }
.sg-etape.faite .sg-rond { background: var(--action); color: var(--action-encre); }
.sg-trait { width: 120px; height: 2px; background: var(--filet); } .sg-trait.fait { background: var(--action); }
.sg-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; padding: 24px 28px; }
.sg-intro h1 { font-size: 22px; margin: 0 0 8px; }
.sg-infos { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0; padding: 16px 18px; background: var(--gris-fond); border-radius: 10px; }
.sg-infos dt { color: var(--doux-2); font-size: 13px; } .sg-infos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.sg-pied { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 28px; border-top: 1px solid var(--filet); }
.ctr-act { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
button.sg-tag { border: 0; cursor: pointer; font: inherit; }
@media (max-width: 720px) {
  .sg-corps { grid-template-columns: 1fr; padding: 18px 16px; }
  .sg-pied { flex-direction: column; align-items: stretch; padding: 14px 16px; }
  .sg-trait { width: 40px; }
}

/* Soumission en trois questions (2026-10-13) — teinte du module : --action (violet) */
.sou-flux { max-width: 920px; display: flex; flex-direction: column; gap: 12px; }
.sou-q { display: flex; gap: 14px; align-items: flex-start; }
.sou-q.fait { padding-top: 14px; padding-bottom: 14px; }
.sou-q-c { flex: 1; min-width: 0; }
.sou-q-c h2, .sou-resume h2 { font-size: 16px; margin: 1px 0 10px; }
.sou-q-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.num-q { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
    background: var(--action); color: var(--action-encre); }
.num-q.ok { background: #E8F7EF; color: #0A7F55; }
.sou-choisi { font-size: 15px; margin-top: 2px; }
.sou-choisi .doux { font-size: 13px; }
.sou-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.sou-site { text-align: left; border: 1px solid var(--bord); border-radius: 10px; padding: 9px 12px; background: #fff; cursor: pointer; font: inherit; }
.sou-site:hover { border-color: var(--action-bord-doux); background: var(--action-fond); }
.sou-site small, .tuile small { display: block; color: var(--doux-2); font-size: 12px; font-weight: 400; margin-top: 2px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.tuile { text-align: left; border: 1px solid var(--bord); border-radius: 10px; padding: 11px 13px; background: #fff; cursor: pointer; font: inherit; }
.tuile:hover { border-color: var(--action-bord-doux); }
.tuile.on { border: 2px solid var(--action); padding: 10px 12px; background: var(--action-fond); }
.sou-autre { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--filet); }
.sou-q .choix { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qte-libre { margin-left: 6px; }
.sou-ajout { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px;
    border: 1px solid var(--action-bord-doux); background: var(--action-fond); border-radius: 10px; }
.sou-phrase { margin: 0 0 6px; }
.sou-lignes { list-style: none; margin: 0 0 8px; padding: 0; }
.sou-lignes li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--filet); }
.sou-lignes .q { flex: none; min-width: 42px; font-weight: 700; color: var(--action-texte); }
.sou-lignes li > span:nth-child(2) { flex: 1; min-width: 0; }
.sou-note { margin: 4px 0 8px; } .sou-note summary { cursor: pointer; color: var(--action-texte); font-weight: 600; font-size: 13px; }
.sou-note textarea { margin-top: 8px; width: 100%; }
@media (max-width: 720px) { .sou-q { gap: 10px; } .tuiles, .sou-sites { grid-template-columns: 1fr; } }

/* Utilisateurs regroupés par organisation (code tiers) : un bloc repliable par organisation, clients indirects sous leur partenaire */
.ub { background: #fff; border: 1px solid var(--bord); border-radius: 12px; margin: 0 0 10px; overflow: hidden; }
.ub > summary, .ub-fils > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.ub > summary::-webkit-details-marker { display: none; }
.ub > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--doux); border-bottom: 2px solid var(--doux); transform: rotate(45deg); transition: transform .15s; margin: -3px 4px 0 0; }
.ub:not([open]) > summary::before { transform: rotate(-45deg); margin-top: 0; }
.ub-nom { font-weight: 600; }
.ub-code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.ub-cnt { margin-left: auto; font-size: 12px; color: var(--doux); white-space: nowrap; }
.ub-ajout { flex: none; }
.ub .tableau { margin: 0; }
.ub-vide { padding: 14px 16px; margin: 0; border-top: 1px solid var(--bord); }
.ub-sous { display: flex; align-items: center; gap: 10px; padding: 7px 14px; font-size: 12px; border-top: 1px solid var(--bord); }
.ub-sous .btn { margin-left: auto; }
.ub-fils { margin: 0 12px 8px 24px; border-radius: 10px; border-color: var(--bord-2); }
.ub-section { margin: 18px 2px 8px; font-size: 13px; font-weight: 600; color: var(--doux); }
@media (max-width: 720px) { .ub > summary { flex-wrap: wrap; } .ub-cnt { margin-left: 0; } }