/* ==========================================================================
   interieur.css — LES ÉCRANS INTÉRIEURS (Marie, 26/08 : « travaille le
   design des sous-sous processus, c'est pas trop beau »).

   Injectée par nginx sur toutes les pages, après mobile.css. Elle ne touche
   pas aux hubs (qui ont déjà la peau validée) : elle ramène les pages outils
   et leurs écrans intérieurs à la MÊME langue — barre en verre, bandeau
   traversé par la photo et signé de la couleur de famille, une seule barre
   d'onglets en verre, des cartes au même rayon, des titres de section en
   petites capitales de la famille. Bureau ET téléphone.
   ========================================================================== */


/* ---- 0. Le socle de la barre et du bandeau ---------------------------------
   Les pages outils ne chargent pas processus.css : elles portent chacune
   leur copie de la barre. Ce socle donne la même barre et le même bandeau à
   celles qui n'en avaient pas (Salariés, Formation…) — mêmes valeurs que
   processus.css, donc sans effet là où il est déjà chargé. */
/* En :where() : spécificité nulle, la feuille propre à la page GAGNE toujours
   (le plan d'action tient sur 1860 px, il ne doit pas être ramené à 1120). */
:where(.topbar) { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
    padding-top: env(safe-area-inset-top); }
:where(.topbar .wrap) { display: flex; align-items: center; justify-content: space-between; gap: .9rem; padding-top: .4rem; padding-bottom: .4rem; }
:where(.topbar .brand img) { height: 36px; display: block; }
:where(.wrap) { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; width: 100%; box-sizing: border-box; }
:where(.hero) { color: #fff; position: relative; }
:where(.hero .wrap) { padding-top: clamp(1.4rem, 3vw, 1.9rem); padding-bottom: clamp(1.5rem, 3.2vw, 2rem); display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
:where(.hero h1) { margin: 0; font-size: clamp(1.45rem, 2.6vw, 1.95rem); }
:where(.hero .lead) { margin: .5rem 0 0; max-width: 62ch; font-size: .96rem; line-height: 1.5; color: rgba(255, 255, 255, .84); }


/* ---- 0 bis. UNE PHOTO DE FOND PARTOUT (Marie, 27/08 : « je veux des fonds
   partout, même dans le menu admin, et pas toujours les mêmes ») -----------
   nginx pose sur chaque page une variable --fond-page (map par dossier :
   admin → convoi exceptionnel, tickets → chantier en bord de Meuse, qse →
   qse-fond…). La couche est en :where() : les pages qui ont déjà la peau
   validée (habillage.css, body::before avec --hab-photo) ou leur propre
   décor gardent la leur — spécificité supérieure, elles gagnent. */
:where(body)::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(rgba(246, 247, 250, .58), rgba(246, 247, 250, .72)),
        var(--fond-page, url('/img/fond2.jpg')) center / cover no-repeat;
}

/* ---- 1. Le bandeau des pages outils : .pagehead devient le hero ---------- */
.pagehead {
    color: #fff; position: relative;
    background: linear-gradient(115deg, rgba(28, 38, 60, .86) 0%, rgba(35, 47, 71, .68) 52%,
                                color-mix(in srgb, var(--hab-fam, #3a4a68) 52%, transparent) 100%);
}
.pagehead::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--hab-fam2, #3a4a68) 60%, var(--hab-pale, #e4e3ec));
}
.pagehead .wrap { padding-top: 1.6rem !important; padding-bottom: 1.7rem !important; }
.pagehead h1, .hero h1 { font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.pagehead h1 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); }
.pagehead p, .pagehead .lead { color: rgba(255, 255, 255, .84); max-width: 62ch; }
/* Le surtitre (posé par badge-compte.js quand la page n'en a pas). */
.pagehead .kicker, .hero .kicker {
    display: block; color: var(--hab-pale, rgba(207, 217, 238, .85));
    text-transform: uppercase; letter-spacing: .2em; font-size: .68rem; font-weight: 700; margin-bottom: .45rem;
}

/* ---- 2. Une seule barre d'onglets, en verre --------------------------------
   Tous les motifs existants (pilules RH, onglets soulignés des audits,
   sous-onglets Formation, barre du tableau de bord) prennent la même forme :
   une réglette blanche translucide, des pastilles, l'active en marine. */
.onglets, .tabs, .forma-onglets, .tb-onglets, .rec-tabs, .sous-onglets, .vue-toggle {
    display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
    background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(22, 32, 58, .08); border-radius: 14px; padding: .35rem;
    box-shadow: 0 1px 2px rgba(22, 32, 58, .05), 0 8px 24px rgba(22, 32, 58, .06);
    margin-bottom: .9rem; border-bottom-width: 1px !important;
}
.onglets > button, .onglets > a, .tabs > button, .tabs > a, .forma-onglets > button, .tb-onglets > button, .rec-tabs > button, .sous-onglets > button, .vue-toggle > button {
    border: 0 !important; background: transparent !important; color: #3a4a68 !important; border-radius: 10px !important;
    padding: .5rem .9rem !important; font-weight: 650 !important; font-size: .9rem !important; line-height: 1.2;
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; margin: 0 !important;
    box-shadow: none !important; transition: background .12s, color .12s;
}
.onglets > button:hover, .tabs > button:hover, .forma-onglets > button:hover, .tb-onglets > button:hover, .rec-tabs > button:hover, .sous-onglets > button:hover {
    background: rgba(58, 74, 104, .08) !important; color: #232f47 !important;
}
.onglets > button.actif, .onglets > a.actif, .tabs > button.active, .tabs > button.actif, .forma-onglets > button.actif,
.tb-onglets > button.actif, .tb-onglets > button.active, .rec-tabs > button.actif, .rec-tabs > button.active, .sous-onglets > button.actif, .vue-toggle > button.actif {
    background: #232f47 !important; color: #fff !important;
    box-shadow: 0 2px 8px rgba(22, 32, 58, .22) !important;
}
.onglets .pastille-onglet, .forma-onglets .nb, .tabs .nb { margin-left: .15rem; }
.onglets > button.actif .pastille-onglet { background: rgba(255, 255, 255, .18); color: #fff; }
/* La sous-barre (En cours / Réalisées / Modèles vierges…) : même réglette, plus discrète. */
.forma-onglets { padding: .25rem; margin-top: -.3rem; }

/* ---- 3. Les cartes et les sections ------------------------------------------ */
.card, .form-carte, .form-action, .dossier, .partie-bloc, .srow {
    border-radius: 14px !important; border: 1px solid rgba(22, 32, 58, .08) !important;
    box-shadow: 0 1px 2px rgba(22, 32, 58, .04), 0 10px 28px rgba(22, 32, 58, .06) !important;
}
.card.echeance-alerte { border-color: rgba(192, 57, 43, .28) !important; }
.sep-groupe, .doc-cat-titre .nom, .famille-tete h3, .section-titre {
    color: var(--hab-fam, #3a4a68); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; font-weight: 800;
}
.sep-groupe::after { background: color-mix(in srgb, var(--hab-fam, #3a4a68) 25%, transparent); }
.volet-tete h2, .card > h2:first-child { font-size: 1.02rem; letter-spacing: -.01em; }
/* Le pli (details) des listings : même carte, plus légère. */
details.doc-cat { border-radius: 12px !important; border: 1px solid rgba(22, 32, 58, .08) !important; background: rgba(255, 255, 255, .9) !important; }
details.doc-cat[open] { box-shadow: 0 6px 18px rgba(22, 32, 58, .06); }
/* La barre grise de retour (fiche salarié) : plus de bloc, un bouton fantôme. */
.fiche-nav { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.fiche-nav > button:first-child, .fiche-nav > a:first-child, .btn-retour {
    background: rgba(255, 255, 255, .82); border: 1px solid rgba(22, 32, 58, .1); border-radius: 10px; padding: .45rem .85rem; font-weight: 650;
}
/* Les boutons d'action principaux gardent la couleur de famille. */
.btn-mini.primaire, .btn.bleu, .btn-envoyer, .btn.primaire, .btn.red { box-shadow: 0 2px 8px rgba(22, 32, 58, .18); }

/* ---- 4. Téléphone : bandeau compact, réglette d'onglets sur une ligne ------- */
@media (max-width: 640px) {
    .pagehead .wrap, .hero .wrap { padding-top: .9rem !important; padding-bottom: 1rem !important; min-height: 0 !important; }
    .pagehead h1, .hero h1 { font-size: 1.25rem !important; }
    .pagehead p, .hero .lead { display: none; }
    .pagehead .kicker, .hero .kicker { margin-bottom: .25rem; font-size: .62rem; }
    .onglets, .tabs, .forma-onglets, .tb-onglets, .rec-tabs, .sous-onglets, .vue-toggle {
        flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        border-radius: 12px; padding: .3rem; gap: .2rem;
    }
    .onglets::-webkit-scrollbar, .tabs::-webkit-scrollbar, .forma-onglets::-webkit-scrollbar { display: none; }
    .onglets > button, .tabs > button, .forma-onglets > button, .tb-onglets > button, .rec-tabs > button, .sous-onglets > button, .vue-toggle > button {
        flex: 0 0 auto; white-space: nowrap; padding: .5rem .75rem !important; font-size: .86rem !important;
    }
}

/* Les raccourcis posés dans le bandeau (Presses, Nouveau 1/4…). */
.hero .lead .hbtn { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(255,255,255,.45);
    background: rgba(255,255,255,.14); color: #fff; padding: .4rem .8rem; border-radius: 9px; text-decoration: none; font-weight: 650; font-size: .88rem; }
.hero .lead .hbtn:hover { background: rgba(255,255,255,.26); }

/* ==========================================================================
   5. LA PASSE « PLUS MODERNE » (Marie, 27/08 soir : « rends le design plus
   moderne partout encore »). Injectée sur toutes les pages, donc :
   - la police Inter (chargée par nginx, repli système), en !important parce
     que chaque page fixe la sienne sur body ;
   - la barre et les cartes en verre dépoli (backdrop-filter) sur les photos
     de fond, avec `body :is(...)` = (0,1,1) : ça bat la règle simple `.card`
     d'une page, mais pas ses variantes colorées `.kpi.rouge` ;
   - rayons 16 px, ombres douces et profondes, relief au survol des tuiles ;
   - boutons, champs, pastilles au même dessin ; en-têtes de table et
     ascenseurs discrets (ceux-là à spécificité nulle, la page reste maître).
   ========================================================================== */
:root { --m-radius: 16px; --m-radius-s: 10px; --m-verre: rgba(255, 255, 255, .88);
        --m-ombre: 0 1px 2px rgba(22, 32, 58, .04), 0 12px 34px rgba(22, 32, 58, .09);
        --m-ombre-h: 0 2px 4px rgba(22, 32, 58, .06), 0 18px 44px rgba(22, 32, 58, .16);
        --m-anneau: 0 0 0 4px color-mix(in srgb, var(--hab-fam, #3a4a68) 18%, transparent); }
body, button, input, select, textarea { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(h1, h2, h3) { letter-spacing: -.015em; }
:where(.hero h1, .pagehead h1) { font-weight: 800; }
::selection { background: color-mix(in srgb, var(--hab-fam, #3a4a68) 22%, #fff); }
/* la barre du haut : verre dépoli, plus légère */
body :is(.topbar, nav.topbar) { background: rgba(255, 255, 255, .74) !important; backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); }
/* le bandeau : un éclat de lumière et un fondu vers la page */
:where(.hero, .pagehead) { position: relative; overflow: hidden; }
.hero::before, .pagehead::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(640px 240px at 10% 0%, rgba(255, 255, 255, .18), transparent 70%), linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .12));
}
.hero .wrap, .pagehead .wrap { position: relative; }
/* les cartes : verre dépoli sur la photo, rayon 16, ombre profonde */
body :is(.card, .form-carte, .form-action, .dossier, .partie-bloc, .kpi, .tuile, .salle, .fond, .rap-constat, .arbre-carte, .audithead, .mrow, .stat, .filtres, .toolrow, .barre-filtres) {
    background-color: var(--m-verre); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-radius: var(--m-radius); border: 1px solid rgba(255, 255, 255, .6); box-shadow: var(--m-ombre);
}
body :is(.srow, details.doc-cat, .comm) { border-radius: 14px; }
:where(a.card, a.kpi, a.tuile, a.suivi-card, .card[onclick], .tuile[onclick]) { transition: transform .15s ease, box-shadow .15s ease; }
:where(a.card:hover, a.kpi:hover, a.tuile:hover, a.suivi-card:hover, .card[onclick]:hover) { transform: translateY(-3px); box-shadow: var(--m-ombre-h); }
/* les boutons : plus ronds, plus fermes, un relief au survol */
body :is(.btn, .btn-mini, .btn-envoyer, .btn-retour, .hbtn) { border-radius: 12px; font-weight: 700; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, filter .12s ease; }
body :is(.btn-mini, .btn.mini, .btn.petit) { border-radius: 10px; }
body :is(.btn, .btn-mini):hover { transform: translateY(-1px); filter: brightness(1.04); }
body :is(.btn, .btn-mini):active { transform: translateY(0); filter: none; }
:where(.btn, button, a, input, select, textarea):focus-visible { outline: none; box-shadow: var(--m-anneau); }
body :is(.btn.primaire, .btn.red, .btn.rouge, .btn.ok, .btn.vert, .btn.bleu, .btn-envoyer, .btn-mini.primaire) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .07)); box-shadow: 0 2px 10px rgba(22, 32, 58, .2); }
/* les champs : même rayon, fond légèrement translucide, anneau de la famille au focus */
body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea) {
    border-radius: var(--m-radius-s); border: 1px solid rgba(22, 32, 58, .14); background-color: rgba(255, 255, 255, .92);
    transition: border-color .12s ease, box-shadow .12s ease;
}
body :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { outline: none; border-color: var(--hab-fam, #3a4a68); box-shadow: var(--m-anneau); }
/* les tables : en-tête discret, lignes aérées, survol (la page garde la main) */
:where(th) { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #5e657a; font-weight: 800; }
:where(tbody tr) { transition: background .12s ease; }
:where(tbody tr:hover) { background: rgba(58, 74, 104, .045); }
:where(.tablewrap, .table-wrap, .tableau-scroll) { border-radius: 12px; }
/* les pastilles et badges : pleinement arrondis */
body :is(.badge, .tag, .chip, .pastille, .pastille-cond, .pill, .etiquette, .puce, .statut) { border-radius: 999px; }
/* la réglette d'onglets : rayon plein */
body :is(.onglets, .tabs, .forma-onglets, .tb-onglets, .rec-tabs, .sous-onglets, .vue-toggle, .volet-onglets, .modes) { border-radius: 14px; }
body :is(.onglets, .tabs, .forma-onglets, .tb-onglets, .rec-tabs, .sous-onglets, .vue-toggle, .modes) > :is(button, a) { border-radius: 10px; }
/* les ascenseurs, plus fins */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(22, 32, 58, .18); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(22, 32, 58, .3); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
:where(.kpi .val, .chiffre, .stat, .compteur, .big) { font-variant-numeric: tabular-nums; }
/* téléphone : pas de flou (coûteux), fond un peu plus plein */
@media (max-width: 640px) {
    body :is(.card, .form-carte, .form-action, .dossier, .partie-bloc, .kpi, .tuile, .salle, .fond, .rap-constat, .arbre-carte, .audithead, .mrow, .stat, .filtres, .toolrow, .barre-filtres) { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(255, 255, 255, .93); }
    body :is(.topbar, nav.topbar) { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .92) !important; }
}
@media (prefers-reduced-motion: reduce) { :where(a.card, a.kpi, a.tuile, .btn, .btn-mini) { transition: none; } }

/* ==========================================================================
   6. LA FRISE DES ACCUEILS (Marie, 27/08 : « intègre ce type de design
   PARTOUT ») — bâtie par js/fresque.js sur tout accueil <section class="services">.
   ========================================================================== */
/* LA FRISE (Marie, 27/08 : « une petite fresque à gauche pour trouver
   les éléments plus vite », puis « plus large, décalée à gauche, plus
   belle ») : un repère collant à gauche des cartes — un fil vertical, un
   point par famille, les outils dessous sur des tuiles teintées, une
   recherche en tête. La famille qu'on lit s'allume au défilement. */
/* Le wrap ne passe en deux colonnes QUE si la frise a été bâtie (classe posée par js/fresque.js) :
   une page « services » sans frise — la création d’un ticket, par exemple — garde sa mise en page. */
.services .wrap.avec-fresque { display: flex; align-items: flex-start; gap: 2rem; }
.services .wrap.avec-fresque > .fresque-contenu { flex: 1 1 auto; min-width: 0; }
.fresque { flex: 0 0 272px; position: sticky; top: 74px; max-height: calc(100vh - 88px); overflow: auto; scrollbar-width: thin;
    margin-left: -.6rem; background: rgba(255, 255, 255, .88); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px; padding: 0 1.05rem 1.1rem;
    box-shadow: 0 1px 2px rgba(22, 32, 58, .05), 0 18px 44px rgba(22, 32, 58, .12); }
.fresque::before { content: ""; display: block; height: 5px; margin: 0 -1.05rem 1rem; border-radius: 22px 22px 0 0;
    background: var(--fr-bande, linear-gradient(90deg, var(--hab-fam, #232f47), var(--hab-fam2, #c0392b))); }
.fresque .fr-outils a .i.vide { font-size: .78rem; font-weight: 800; color: var(--fam, var(--hab-fam, #3a4a68)); }
.fresque .fr-titre { display: flex; align-items: center; gap: .45rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 800; color: #5e657a; margin: 0 0 .6rem .15rem; }
.fresque .fr-titre::before { content: "🧭"; font-size: 1rem; letter-spacing: 0; }
.fresque .fr-champ { position: relative; margin-bottom: .9rem; }
.fresque .fr-champ::before { content: "🔎"; position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); font-size: .9rem; opacity: .7; pointer-events: none; }
.fresque input { width: 100%; box-sizing: border-box; border: 1px solid rgba(22, 32, 58, .12); border-radius: 12px; padding: .6rem .8rem .6rem 2.2rem;
    font: inherit; font-size: .9rem; background: rgba(255, 255, 255, .95); box-shadow: inset 0 1px 2px rgba(22, 32, 58, .05); }
.fresque input:focus { outline: none; border-color: #3a4a68; box-shadow: 0 0 0 4px rgba(58, 74, 104, .16); }
.fresque .fr-fam { position: relative; padding-left: 1.25rem; margin-top: .8rem; }
.fresque .fr-fam::before { content: ""; position: absolute; left: .42rem; top: 1.5rem; bottom: -.8rem; width: 2px;
    background: color-mix(in srgb, var(--fam, var(--hab-fam, #3a4a68)) 22%, transparent); }
.fresque .fr-fam:last-of-type::before { bottom: .3rem; }
.fresque .fr-fam > a { display: flex; align-items: center; gap: .5rem; position: relative; text-decoration: none; color: var(--fam, var(--hab-fam, #3a4a68));
    font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: .38rem .55rem; border-radius: 10px; line-height: 1.15;
    transition: background .15s ease; }
.fresque .fr-fam > a .n { margin-left: auto; font-size: .66rem; font-weight: 800; letter-spacing: 0; color: var(--fam, var(--hab-fam, #3a4a68));
    background: color-mix(in srgb, var(--fam, var(--hab-fam, #3a4a68)) 12%, #fff); border-radius: 999px; padding: .12rem .5rem; }
.fresque .fr-fam > a::before { content: ""; position: absolute; left: -1.12rem; top: .62rem; width: .78rem; height: .78rem; border-radius: 50%;
    background: var(--fam, var(--hab-fam, #3a4a68)); box-shadow: 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--fam, var(--hab-fam, #3a4a68)) 22%, transparent); transition: transform .18s ease; }
.fresque .fr-fam.actif > a { background: color-mix(in srgb, var(--fam, var(--hab-fam, #3a4a68)) 12%, #fff); }
.fresque .fr-fam.actif > a::before { transform: scale(1.3); }
.fresque .fr-outils { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .15rem; }
.fresque .fr-outils a { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #1d2333; font-size: .88rem; font-weight: 600;
    padding: .32rem .45rem; border-radius: 11px; line-height: 1.2; transition: background .15s ease, transform .15s ease, color .15s ease; }
.fresque .fr-outils a:hover { background: color-mix(in srgb, var(--fam, var(--hab-fam, #3a4a68)) 10%, #fff); color: var(--fam, var(--hab-fam, #3a4a68)); transform: translateX(3px); }
.fresque .fr-outils a .i { flex: none; width: 1.85rem; height: 1.85rem; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; font-size: 1rem; background: color-mix(in srgb, var(--fam, var(--hab-fam, #3a4a68)) 12%, #fff); }
.fresque .fr-outils a:hover .i { background: color-mix(in srgb, var(--fam, var(--hab-fam, #3a4a68)) 22%, #fff); }
.fresque .fr-outils li.cache { display: none; }
.fresque .fr-outils a mark { background: color-mix(in srgb, var(--fam, var(--hab-fam, #3a4a68)) 24%, #fff); color: inherit; border-radius: 3px; padding: 0 .05rem; }
.fresque .fr-vide { font-size: .82rem; color: #5e657a; padding: .4rem .45rem; }
@media (min-width: 1240px) { .services .wrap { max-width: 1440px; } }
@media (min-width: 1500px) { .fresque { margin-left: -2rem; } }
@media (max-width: 999px) {
    .services .wrap.avec-fresque { display: block; }
    .fresque.fr-solo { display: none; }
    .fresque { position: static; max-height: none; margin: 0 0 1.1rem; padding: 0 .8rem .7rem; }
    .fresque::before { margin: 0 -.8rem .7rem; }
    .fresque .fr-champ, .fresque .fr-outils, .fresque .fr-titre { display: none; }
    .fresque .fr-liste { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
    .fresque .fr-fam { padding-left: 0; margin: 0; flex: 0 0 auto; }
    .fresque .fr-fam::before, .fresque .fr-fam > a::before { display: none; }
    .fresque .fr-fam > a { border: 1px solid color-mix(in srgb, var(--fam, var(--hab-fam, #3a4a68)) 30%, #fff); padding: .38rem .75rem; border-radius: 999px; white-space: nowrap; }
    .fresque .fr-fam > a .n { display: none; }
}

/* ==========================================================================
   7. LE LANGAGE DE L'ADMINISTRATION, PARTOUT (Marie, 27/08 : « j'aime beaucoup
   ce genre de design dans le menu admin… intègre-le partout ») : les titres de
   carte à tiret rouge, les boutons blancs à liseré, les pastilles rondes, les
   en-têtes de tableau en bandeau gris, les notes discrètes.
   ========================================================================== */
body :is(.card > h2:first-child, .card > .volet-tete > h2, .volet-tete > h2, .partie-titre, .coq-head > h2, .form-carte > h2:first-child, .dossier > h2:first-child, .card > h2.titre-carte) {
    display: flex; align-items: center; gap: .8rem; font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em;
}
body :is(.card > h2:first-child, .card > .volet-tete > h2, .volet-tete > h2, .coq-head > h2, .form-carte > h2:first-child, .dossier > h2:first-child)::before {
    content: ""; flex: none; width: 26px; height: 4px; border-radius: 2px; background: var(--hab-fam2, var(--hab-fam, #c0392b));
}
body :is(.partie-titre)::before { content: none; }
/* les boutons secondaires : blancs, liseré, comme l'admin */
body :is(.btn.ghost, .btn-retour, .btn.secondaire, .btn.blanc, .fiche-nav > button:first-child, .fiche-nav > a:first-child) {
    background: #fff; border: 1px solid rgba(22, 32, 58, .14); color: #3a4a68; font-weight: 700; border-radius: 10px;
}
body :is(.btn.ghost, .btn-retour, .btn.secondaire, .btn.blanc):hover { background: #f7f8fb; border-color: rgba(22, 32, 58, .24); }
body :is(.btn.ok, .btn.vert) { background: #1d7a4f; color: #fff; }
body :is(.btn.ko) { background: #fff; border: 1px solid #e0b4b4; color: #a33; }
/* les pastilles : rondes, fermes */
body :is(.chip, .pastille, .badge, .tag, .pill, .etiquette, .statut) { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .62rem; border-radius: 999px; font-size: .76rem; font-weight: 700; line-height: 1.3; }
/* ...MAIS PAS QUAND ELLES SONT CACHÉES (10/09). « display: inline-flex » posé
   sur body :is(…) bat le « display: none » que le navigateur donne à [hidden] :
   toute pastille qu'une page masque en attendant de la remplir restait
   VISIBLE, vide, partout — c'est l'ovale gris qu'on voyait sous le sous-titre
   de /quart-express/, la première page que voient les opérateurs. */
body [hidden] { display: none !important; }
/* les tableaux : bandeau d'en-tête gris, lignes fines */
body :is(.tablewrap, .table-wrap, .tableau-scroll, .liste-table, .card) > table > thead th,
body :is(.tablewrap, .table-wrap, .tableau-scroll, .liste-table) th {
    background: #eef1f7; color: #3a4a68; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
/* LE ROGNAGE QUI COUPAIT LES TABLEAUX (trouvé le 31/08 en adaptant le portail
   à la tablette). Le overflow:hidden était là pour que les coins arrondis
   tiennent — mais il COUPE tout tableau plus large que sa boîte, à toutes les
   largeurs, poste de bureau compris : sur l'accidentologie, les colonnes de
   droite (flash accident, arbre des causes) devenaient inatteignables. C'est
   aussi ce qui faisait dire à l'audit « aucune page ne déborde » : rien ne
   dépassait parce que tout était rogné. overflow-x: auto fait défiler ce qui
   dépasse ; overflow-y reste hidden, l'arrondi haut et bas est conservé. */
body :is(.tablewrap, .table-wrap, .tableau-scroll, .liste-table) { border-radius: 12px; overflow-x: auto; overflow-y: hidden; border: 1px solid rgba(22, 32, 58, .08); background: #fff; }
/* les notes et textes discrets */
body :is(.note, .muted, .aide, .pb-aide, .titre-meta, .fam-chapo, .sous-titre) { color: #5e657a; line-height: 1.5; }
body :is(.note, .pb-aide, .aide) { font-size: .82rem; }
/* les messages de résultat, comme l'admin */
body :is(.msg.err, .etat.ko, .erreur) { background: #fdecec; color: #a33; border-radius: 10px; padding: .6rem .9rem; }
body :is(.msg.okk, .msg.ok, .etat.ok, .succes) { background: #e7f3ec; color: #22703f; border-radius: 10px; padding: .6rem .9rem; font-weight: 600; }
/* la barre d'outils d'une page (filtres, recherche) : une carte basse */
body :is(.toolrow, .filtres, .barre-filtres, .filtres-barre) { border-radius: 14px; padding: .7rem .9rem; }