/* ============================================================
   DOC OFFICE GED — AFFINAGE DU THEME SOMBRE (2026-10-12)
   Demande client : « garder le sombre, l'affiner » sur tous les ecrans.

   Cette feuille est chargee APRES futuristic.css (templateConfig.php) et ne
   fait que le corriger : palette adoucie, lueurs et animations retirees,
   champs de formulaire visibles, filtres de la CVtheque en grille, menu et
   en-tete resserres, page de connexion hierarchisee.

   RETOUR ARRIERE : retirer la ligne 'affinage' de app/Config/templateConfig.php.
   Rien d'autre ne depend de ce fichier.

   Regles de la maison :
   - ne JAMAIS poser `transform` ni `filter` sur div.action_view : le fil
     d'actualite (position: fixed, dedans) perdrait son ancrage a la fenetre ;
   - le sens de lecture reste porte par main{ltr,rtl}.css : ici, proprietes
     logiques (inline-start / inline-end) ou regles `html[dir=rtl]` absentes —
     l'arabe se reconnait a la feuille mainrtl.css, d'ou les `gap` et les
     grilles, qui suivent `direction` sans regle dediee.
   ============================================================ */

/* ── 1. Palette : memes noms de variables, valeurs apaisees ───────────── */
/* CHARTE NEXTDATA (2026-10-12, choix client : « couleurs du logo ») : les
   trois teintes du logo public/img/nextdata-logo.png, mesurees sur le fichier.
     jaune      #FFC603  -> accent principal (liens, element actif, bouton, focus)
     rouge      #FF4033  -> accent secondaire (eclairci en #FF5A4E pour le texte)
     anthracite #312B2B  -> famille des fonds, du plus sombre au plus clair
   Les noms de variables restent ceux de futuristic.css (--neon-blue porte
   desormais le jaune) : les renommer casserait chaque regle qui les lit.
   Le rose des erreurs et le vert des succes ne sont PAS des couleurs de
   marque et ne changent pas : un message d'erreur ne doit pas se confondre
   avec un element de marque. */
:root {
    --bg-primary: #141111;
    --bg-secondary: #191515;
    --bg-tertiary: #1f1a1a;
    --bg-card: #221d1d;
    --bg-elevated: #2c2626;
    --bg-glass: rgba(22, 18, 18, 0.94);
    --bg-glass-light: rgba(255, 255, 255, 0.025);

    --text-primary: #f1ebe9;
    --text-secondary: #b9adaa;
    --text-muted: #978b88;
    --text-bright: #ffffff;

    --neon-blue: #ffc603;
    --neon-violet: #ff5a4e;
    --neon-pink: #ff6b86;
    --neon-orange: #f2a93b;
    --neon-green: #45cf8f;

    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-medium: rgba(255, 255, 255, 0.13);
    --border-neon: rgba(255, 198, 3, 0.32);

    --shadow-neon-blue: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-neon-violet: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.18);
    --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.45);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --transition-fast: 0.12s ease;
    --transition-normal: 0.16s ease;

    /* Propres a l'affinage. */
    --af-accent-fond: rgba(255, 198, 3, 0.10);
    --af-accent-fond-fort: rgba(255, 198, 3, 0.18);
    --af-champ: #1a1616;
    --af-champ-bord: rgba(255, 255, 255, 0.16);
}

html, body {
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── 2. Lueurs, degrades de texte et animations d'ambiance : retires ──── */
div.wrapper a:hover,
table.data tr:hover td a:hover,
.neon-text-blue,
.neon-text-violet,
div.wrapper div.action_view form.appForm fieldset legend,
div.wrapper div.action_view form.appForm div.input_wrapper label.floated {
    text-shadow: none;
}

div.wrapper a:hover {
    color: var(--text-bright);
}

.badge,
div.wrapper div.badge {
    animation: none;
    box-shadow: none;
}

/* Quadrillage et ligne de balayage du fond. */
div.wrapper div.action_view::before,
div.wrapper div.action_view::after {
    display: none;
}

/* Filets degrades en haut de l'en-tete et de la page de connexion. */
div.wrapper header.main::before,
div.action_view div.login_header::before {
    display: none;
}

/* Titres en degrade anime -> texte plein. */
div.accueil h2.accueil_titre,
div.action_view div.login_header div.login_app_name,
div.library_name {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--text-bright);
    animation: none;
}

*:focus-visible {
    outline: 2px solid var(--neon-blue);
    outline-offset: 2px;
}

/* ── 3. En-tete ───────────────────────────────────────────────────────── */
div.wrapper header.main {
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: none;
    border-bottom: 1px solid var(--border-subtle);
}

/* Le nom de l'application : un intitule, plus un bouton encadre. */
div.wrapper header.main a.app_name:link,
div.wrapper header.main a.app_name:visited {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--text-bright);
    letter-spacing: 0.01em;
}

div.wrapper header.main a.app_name:hover {
    background: var(--af-accent-fond);
    border-color: transparent;
    box-shadow: none;
    color: var(--text-bright);
}

div.wrapper header.main h1.title {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 1.05em;
}

div.wrapper header.main a.menu_switch:hover,
div.wrapper header.main a.language_switch:hover {
    box-shadow: none;
    background: var(--af-accent-fond);
    color: var(--text-bright);
}

/* Le pictogramme du menu ne pivote plus : trois barres verticales ne disent
   pas « menu ». L'etat ouvert se lit a la couleur. */
div.wrapper header.main a.menu_switch.opened {
    transform: none;
    color: var(--neon-blue);
    background: var(--af-accent-fond);
}

div.wrapper header.main img {
    box-shadow: none;
    border-color: var(--border-medium);
}

div.wrapper header.main div.user_menu_container ul.user_menu,
div.wrapper header.main ul.language_menu {
    padding: 6px;
    backdrop-filter: none;
}

div.wrapper header.main div.user_menu_container ul.user_menu li a:link,
div.wrapper header.main div.user_menu_container ul.user_menu li a:visited,
div.wrapper header.main ul.language_menu li a:link,
div.wrapper header.main ul.language_menu li a:visited {
    border-radius: var(--radius-sm);
    border-bottom: none;
    font-size: 0.9em;
    color: var(--text-primary);
}

div.wrapper header.main div.user_menu_container ul.user_menu li a svg {
    margin-inline-end: 10px;
    opacity: 0.7;
}

/* ── 4. Menu lateral ──────────────────────────────────────────────────── */
div.wrapper nav.main_navigation {
    box-shadow: none;
    padding-top: 8px;
}

/* Le logo est deja dans l'en-tete : ici, un rappel discret, pas une affiche. */
div.wrapper nav.main_navigation div.app_info {
    padding: 12px 20px 8px;
}

div.wrapper nav.main_navigation div.app_info div.app_logo img {
    width: 84px;
    height: 84px;
}

div.wrapper nav.main_navigation ul.app_navigation {
    margin-top: 4px;
}

div.wrapper nav.main_navigation ul.app_navigation li a:link,
div.wrapper nav.main_navigation ul.app_navigation li a:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 1px 0;
    border-radius: var(--radius-md);
    border: 0;
    font-size: 0.93em;
    font-weight: 500;
    color: var(--text-secondary);
    box-shadow: none;
}

/* fontawesome5.js remplace chaque <i> par un <svg> : la regle d'origine
   (`li a > i`) ne s'appliquait donc a aucune icone, d'ou les pictogrammes
   colles au libelle. */
div.wrapper nav.main_navigation ul.app_navigation li a > svg,
div.wrapper nav.main_navigation ul.app_navigation li a > i {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    float: none;
    font-size: 18px !important;
    opacity: 0.75;
}

div.wrapper nav.main_navigation ul.app_navigation li a:hover,
div.wrapper nav.main_navigation ul.app_navigation li a:active {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-bright);
    box-shadow: none;
    border-color: transparent;
}

div.wrapper nav.main_navigation ul.app_navigation li.selected > a:link,
div.wrapper nav.main_navigation ul.app_navigation li.selected > a:visited {
    background: var(--af-accent-fond);
    color: var(--text-bright);
    border: 0;
    box-shadow: none;
}

div.wrapper nav.main_navigation ul.app_navigation li.selected > a > svg {
    opacity: 1;
    color: var(--neon-blue);
}

/* La pastille de compteur se cale a la fin de la ligne. */
div.wrapper nav.main_navigation ul.app_navigation li a span.badge {
    margin-inline-start: auto;
    background: var(--af-accent-fond-fort);
    color: var(--neon-blue);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.78em;
    font-weight: 600;
}

/* Sous-menus : un simple retrait avec un filet, plus de bloc assombri. */
div.wrapper nav.main_navigation ul.app_navigation li.submenu ul,
div.wrapper nav.main_navigation ul.app_navigation li.submenu.selected ul {
    background: transparent;
    border-radius: 0;
    margin: 2px 0 6px;
    margin-inline-start: 22px;
    padding: 0;
    padding-inline-start: 8px;
    border: 0;
    border-inline-start: 1px solid var(--border-medium);
}

div.wrapper nav.main_navigation ul.app_navigation li.submenu ul li a:link,
div.wrapper nav.main_navigation ul.app_navigation li.submenu ul li a:visited {
    padding: 8px 12px;
    margin: 1px 0;
    font-size: 0.88em;
    font-weight: 400;
}

/* Puces de liste heritees (cercles), rendues a moitie hors du menu. */
div.wrapper nav.main_navigation ul.app_navigation,
div.wrapper nav.main_navigation ul.app_navigation li,
div.wrapper nav.main_navigation ul.app_navigation li.submenu ul li {
    list-style: none;
}

div.wrapper nav.main_navigation ul.app_navigation li.submenu ul li a::before,
div.wrapper nav.main_navigation ul.app_navigation li.submenu ul li::before,
div.wrapper nav.main_navigation ul.app_navigation li.submenu > a::after {
    display: none;
}

/* Menu en TIROIR sous 1000 px. Avant : 100 % de la largeur de l'ecran — on ne
   voyait plus la page, et rien n'indiquait comment revenir. Le voile est
   pose par nav.php, juste apres <nav> ; main.js le rend cliquable. */
div.menu_voile {
    display: none;
}

@media only screen and (max-width: 1000px) {
    /* Les decalages d'origine (left / right a -100vw, 0 une fois ouvert)
       restent ceux de main{ltr,rtl}.css : seule la largeur change, donc le
       tiroir sort du bon cote en arabe sans regle dediee. */
    div.wrapper nav.main_navigation {
        width: min(300px, 84vw);
        z-index: 90;
        border-inline-end: 1px solid var(--border-medium);
    }

    div.wrapper nav.main_navigation.opened {
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.55);
    }

    /* `opened` + `no_animation` = etat rendu par le SERVEUR a partir du temoin
       « menu ouvert » (pose sur grand ecran). main.js referme ce tiroir au
       chargement ; d'ici la, il reste invisible : pas d'eclair de menu a
       chaque page. Un toucher sur le bouton retire `no_animation`. */
    div.wrapper nav.main_navigation.opened.no_animation {
        visibility: hidden;
    }

    div.wrapper nav.main_navigation.opened:not(.no_animation) + div.menu_voile {
        display: block;
        position: fixed;
        top: 65px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 80;
        background: rgba(12, 9, 9, 0.66);
        cursor: pointer;
    }
}

/* ── 5. Zone de contenu, titres, messages, boutons ────────────────────── */
/* 💣 `height: auto !important` n'est PAS decoratif. main.js fixe en ligne la
   hauteur de cette zone a celle de la fenetre, a partir de
   `parseInt(padding-bottom, 2)` — en BASE 2. Avec le retrait d'origine (24px)
   le calcul rend NaN et rien n'est pose ; avec un retrait qui commence par 0
   ou 1 (16px, 12px, 0…) il rend un nombre : la zone devient une boite de la
   hauteur de l'ecran qui defile a l'interieur, et le pied de page la
   recouvre. Vecu le 2026-10-12 sur telephone (retrait de 16px), invisible en
   essai par injection : la feuille y arrivait APRES l'execution de main.js. */
div.wrapper div.action_view {
    background: var(--bg-primary);
    height: auto !important;
}

div.action_view h2 {
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--text-bright);
}

p.message {
    backdrop-filter: none;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    line-height: 1.55;
}

/* Un message pose sous un bouton flottant (« Retour ») passait dessous. */
div.container-fluid > p.message {
    clear: both;
}

p.message.t1 { background: rgba(69, 207, 143, 0.09); border-color: rgba(69, 207, 143, 0.28); }
p.message.t2 { background: rgba(255, 107, 134, 0.09); border-color: rgba(255, 107, 134, 0.28); }
p.message.t3 { background: rgba(242, 169, 59, 0.08); border-color: rgba(242, 169, 59, 0.26); color: #f3c57c; }
p.message.t4 { background: var(--af-accent-fond); border-color: var(--border-neon); }

a.button:link,
a.button:visited {
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    padding: 9px 16px;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
}

a.button:hover {
    background: var(--af-accent-fond-fort);
    border-color: var(--border-neon);
    color: var(--text-bright);
    box-shadow: none;
    transform: none;
}

a.button svg {
    margin-inline-end: 4px;
    opacity: 0.85;
}

/* Bouton d'envoi : l'action principale de l'ecran, en aplat. */
div.wrapper div.action_view form.appForm input[type=submit],
div.wrapper div.action_view form input[type=submit].no_float,
div.wrapper div.action_view input[type=submit].no_float {
    background: var(--neon-blue);
    border: 1px solid var(--neon-blue);
    color: #1d1708;
    border-radius: var(--radius-md);
    padding: 9px 22px;
    font-size: 0.92em;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
}

div.wrapper div.action_view form.appForm input[type=submit]:hover,
div.wrapper div.action_view form.appForm input[type=submit]:active,
div.wrapper div.action_view form.appForm input[type=submit]:focus,
div.wrapper div.action_view input[type=submit].no_float:hover {
    background: #ffd84d;
    border-color: #ffd84d;
    color: #1d1708;
    box-shadow: none;
    transform: none;
}

/* ── 6. Formulaires : des champs que l'on voit ────────────────────────── */
div.wrapper div.action_view form.appForm fieldset,
div.wrapper div.action_view fieldset.appForm {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

div.wrapper div.action_view form.appForm fieldset legend,
div.wrapper div.action_view fieldset.appForm legend {
    background: transparent;
    border: 0;
    padding: 0 8px;
    width: auto;
    font-size: 1.02em;
    font-weight: 650;
    color: var(--text-bright);
    margin-bottom: 0;
}

/* Champs a libelle flottant : le trait de saisie etait a 10 % d'opacite,
   on ne voyait pas ou ecrire. */
div.wrapper div.action_view form.appForm div.input_wrapper input {
    border-bottom: 1px solid var(--af-champ-bord);
}

div.wrapper div.action_view form.appForm div.input_wrapper input:focus {
    border-bottom: 2px solid var(--neon-blue);
    box-shadow: none;
}

div.wrapper div.action_view form.appForm div.input_wrapper label {
    font-weight: 500;
}

div.wrapper div.action_view form.appForm div.input_wrapper label.floated {
    font-weight: 600;
    color: var(--neon-blue);
}

div.wrapper div.action_view form.appForm div.input_wrapper_other label {
    font-weight: 600;
    font-size: 0.86em;
    color: var(--text-secondary);
}

/* Champs de texte libres (recherche de la CVtheque, etc.) : ils n'etaient
   pas habilles du tout — blancs sur fond nuit. */
div.wrapper div.action_view form.appForm div.input_wrapper_other input[type=text],
div.wrapper div.action_view form.appForm div.input_wrapper_other input[type=search],
div.wrapper div.action_view form.appForm div.input_wrapper_other input[type=email],
div.wrapper div.action_view form.appForm div.input_wrapper_other input[type=number],
div.wrapper div.action_view form.appForm div.input_wrapper_other input[type=date] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    margin-top: 8px;
    padding: 0 12px;
    background: var(--af-champ);
    border: 1px solid var(--af-champ-bord);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.92em;
}

div.wrapper div.action_view form.appForm div.input_wrapper_other input[type=text]::placeholder {
    color: var(--text-muted);
}

div.wrapper div.action_view form.appForm div.input_wrapper_other input[type=text]:focus,
div.wrapper div.action_view form.appForm div.input_wrapper_other select:focus,
div.wrapper div.action_view form.appForm div.input_wrapper_other textarea:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--neon-blue);
    box-shadow: 0 0 0 3px var(--af-accent-fond-fort);
    outline: none;
}

div.wrapper div.action_view form.appForm div.input_wrapper_other textarea,
div.wrapper div.action_view form.appForm div.input_wrapper_other select {
    background-color: var(--af-champ);
    border-color: var(--af-champ-bord);
    border-radius: var(--radius-md);
}

div.wrapper div.action_view input[type=checkbox],
div.wrapper div.action_view input[type=radio] {
    accent-color: var(--neon-blue);
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-inline-end: 6px;
}

/* Listes deroulantes bootstrap-select. */
div.wrapper .bootstrap-select > .dropdown-toggle,
div.wrapper div.action_view form.appForm .bootstrap-select > .dropdown-toggle {
    left: 0;
    min-height: 40px;
    padding: 8px 12px;
    background: var(--af-champ);
    border: 1px solid var(--af-champ-bord);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.92em;
    line-height: 1.4;
    box-shadow: none;
    align-items: center;
}

/* Le <select> porte la classe `border` : bootstrap-select la recopie sur son
   conteneur, et Bootstrap y pose un cadre blanc en !important, autour du
   bouton deja borde. */
div.wrapper .bootstrap-select.border {
    border: 0 !important;
    margin-top: 8px;
}

div.wrapper .bootstrap-select > .dropdown-toggle .filter-option {
    height: auto;
}

div.wrapper .bootstrap-select > .dropdown-toggle.bs-placeholder,
div.wrapper .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
    color: var(--text-secondary);
}

div.wrapper .bootstrap-select > .dropdown-toggle:hover,
div.wrapper .bootstrap-select.show > .dropdown-toggle {
    background: var(--bg-elevated);
    border-color: var(--border-neon);
}

div.wrapper .bootstrap-select > .dropdown-toggle:focus {
    outline: none !important;
    border-color: var(--neon-blue);
    box-shadow: 0 0 0 3px var(--af-accent-fond-fort);
}

div.wrapper .bootstrap-select .dropdown-menu {
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
}

div.wrapper .bootstrap-select .dropdown-menu .dropdown-item {
    color: var(--text-primary);
    font-size: 0.9em;
    padding: 7px 14px;
}

div.wrapper .bootstrap-select .dropdown-menu .dropdown-item:hover,
div.wrapper .bootstrap-select .dropdown-menu .dropdown-item:focus {
    background: var(--af-accent-fond);
    color: var(--text-bright);
}

div.wrapper .bootstrap-select .dropdown-menu .dropdown-item.active,
div.wrapper .bootstrap-select .dropdown-menu .dropdown-item.selected {
    background: var(--af-accent-fond-fort);
    color: var(--text-bright);
}

div.wrapper .bootstrap-select .bs-searchbox .form-control,
div.wrapper .bootstrap-select .bs-actionsbox .btn {
    background: var(--af-champ);
    border: 1px solid var(--af-champ-bord);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
}

/* ── 7. Tableaux ──────────────────────────────────────────────────────── */
table.data {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

table.data tr th {
    background: var(--bg-tertiary);
    border-right: 0;
    border-bottom: 1px solid var(--border-medium);
    font-size: 0.74em;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding: 12px 10px;
}

table.data tr td {
    padding: 12px 10px;
    font-size: 0.92em;
    line-height: 1.4;
}

table.data tr:nth-child(odd),
table.data tr.odd {
    background: transparent !important;
}

table.data tr:hover td:nth-child(odd),
table.data tr:hover td.odd,
table.data tr:hover td {
    background: rgba(255, 255, 255, 0.035) !important;
}

table.data tr:last-child td {
    border-bottom: 0;
}

table.data tr td:last-child {
    white-space: nowrap;
}

table.data tr td:last-child a {
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin: 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 1em;
}

table.data tr td:last-child a:hover {
    background: var(--af-accent-fond-fort);
    color: var(--text-bright) !important;
}

/* DataTables. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--af-champ);
    border: 1px solid var(--af-champ-bord);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    height: 38px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    box-shadow: none;
    background: var(--af-accent-fond);
}

/* Un <fieldset> ouvre son propre contexte de mise en forme : sans `clear`,
   le premier cadre d'une fiche se glissait A COTE du bouton « Retour »
   (flottant) et sortait plus etroit que les suivants. */
div.wrapper div.action_view fieldset.appForm {
    clear: both;
    margin-bottom: 18px;
    padding: 4px 18px 10px;
}

/* Un <fieldset> a `min-width: min-content` par defaut : sur telephone, une
   adresse e-mail ou une liste de competences l'elargissait au-dela de
   l'ecran et le texte etait rogne. */
div.wrapper div.action_view fieldset.appForm,
div.wrapper div.action_view form.appForm fieldset {
    min-width: 0;
}

div.wrapper div.action_view h2 span.badge {
    white-space: normal;
    text-align: start;
    line-height: 1.3;
}

/* Fiches (libelle / valeur). La mise en page d'origine posait le libelle en
   absolu et la valeur a `margin-left: 300px; width: 100%` : la valeur
   debordait donc TOUJOURS de son cadre, de la largeur de sa marge (texte
   rogne sur telephone, colle au bord ailleurs). Une grille a deux colonnes
   suit en plus le sens de lecture sans regle dediee. */
/* ⚠️ DEUX balisages portent ces libelles : `div.show_data` (CVtheque) et
   `div.show_table_block > div.show_table_data` (utilisateurs, groupes,
   actions, messages…). Styler l'un sans l'autre colle le libelle a la valeur
   sur le second — vecu le 2026-10-12. */
div.show_data,
div.show_table_data {
    display: grid;
    grid-template-columns: minmax(110px, 240px) minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    width: 100%;
}

div.show_data,
div.show_table_block {
    border-bottom: 1px solid var(--border-subtle);
}

div.show_data:last-child,
div.show_table_block:last-child {
    border-bottom: 0;
}

div.show_table {
    clear: both;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 4px 18px;
}

div.show_data_label,
div.show_data_value {
    position: static;
    display: block;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 14px 0;
    border: 0;
    text-align: start;
    line-height: 1.45;
}

div.show_data_label {
    font-weight: 500;
    font-size: 0.9em;
    color: var(--text-secondary);
}

div.show_data_value {
    overflow-wrap: anywhere;
    color: var(--text-primary);
}

@media only screen and (max-width: 640px) {
    div.show_data,
    div.show_table_data {
        grid-template-columns: 104px minmax(0, 1fr);
        column-gap: 12px;
    }

    div.show_data_label,
    div.show_data_value {
        padding: 11px 0;
    }
}

/* Pastilles Bootstrap : aplats discrets, plus de pastilles pleines. */
div.wrapper div.action_view span.badge {
    border-radius: 999px;
    padding: 3px 9px;
    font-weight: 600;
    font-size: 0.72em;
    letter-spacing: 0.01em;
    vertical-align: 1px;
}

div.wrapper div.action_view span.badge.bg-info {
    background: var(--af-accent-fond-fort) !important;
    color: var(--neon-blue) !important;
}

div.wrapper div.action_view span.badge.bg-success {
    background: rgba(69, 207, 143, 0.16) !important;
    color: var(--neon-green) !important;
}

div.wrapper div.action_view span.badge.bg-warning {
    background: rgba(242, 169, 59, 0.16) !important;
    color: var(--neon-orange) !important;
}

div.wrapper div.action_view span.badge.bg-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-secondary) !important;
}

/* ── 7 bis. Formulaires de saisie (2026-10-12) ────────────────────────── */
/* Creation, modification, recherche avancee, parametres du compte, message :
   49 vues partagent le meme balisage. Avant : libelles flottants sur un
   simple trait, une seule colonne, champs de fichier et cases non habilles.
   Maintenant : libelle au-dessus, champ encadre, deux colonnes sur grand
   ecran.

   `:where(…)` ne pese RIEN dans le calcul de priorite : ce bloc reste donc
   au poids des regles d'origine, et les deux formulaires qui ont leur propre
   mise en page (filtres de la CVtheque, parametres du Doc Office) en sont
   exclus sans qu'il faille les « re-battre » ensuite.
   Les `!important` ne portent que sur ce que main{ltr,rtl}.css impose avec
   la classe `.padding` ou `.nXX` (poids superieur) : position, largeur,
   hauteur, retrait. */
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    padding: 8px 18px 18px;
    align-items: start;
}

div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper,
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    float: none !important;
    clear: none;
    width: auto !important;
    height: auto !important;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
}

/* Libelle : au-dessus du champ, plus par-dessus. `floated` (pose par main.js
   a la prise de focus) ne change plus rien a sa place. */
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper > label,
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper > label.floated,
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other > label {
    position: static !important;
    display: block;
    margin: 0;
    /* En px : les deux conteneurs n'ont pas la meme taille de base, et un
       meme `em` donnait deux tailles de libelle dans un meme formulaire.
       !important : mainltr.css fixe 100 % par `label:first-child`, plus lourd. */
    font-size: 13.5px !important;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-secondary);
}

div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper:focus-within > label,
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other:focus-within > label {
    color: var(--neon-blue);
}

/* Champ obligatoire : une etoile apres le libelle. */
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper:has(> :required) > label::after,
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other:has(> :required) > label::after {
    content: " *";
    color: var(--neon-pink);
    font-weight: 700;
}

div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper > input,
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other > input:not([type=checkbox]):not([type=radio]):not([type=file]) {
    position: static !important;
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    margin: 0;
    padding: 0 12px !important;
    background: var(--af-champ) !important;
    border: 1px solid var(--af-champ-bord);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.92em;
    color-scheme: dark;
}

div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper > input:focus,
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other > input:not([type=checkbox]):not([type=radio]):not([type=file]):focus {
    border: 1px solid var(--neon-blue);
    box-shadow: 0 0 0 3px var(--af-accent-fond-fort);
    outline: none;
}

div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper > input::placeholder {
    color: var(--text-muted);
    font-size: 0.95em;
}

/* Remplissage automatique du navigateur : pas de pave jaune / blanc. */
div.wrapper div.action_view form.appForm input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 9999px var(--af-champ);
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
}

div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other > .bootstrap-select,
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other > select,
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other > textarea {
    margin: 0;
}

div.wrapper div.action_view form.appForm textarea {
    padding: 10px 12px;
    font-size: 0.92em;
    line-height: 1.5;
    resize: vertical;
    min-height: 110px;
}

/* La classe `border` (Bootstrap, blanc, !important) sur un champ. */
div.wrapper div.action_view form.appForm textarea.border,
div.wrapper div.action_view form.appForm input.border {
    border: 1px solid var(--af-champ-bord) !important;
}

div.wrapper div.action_view form.appForm textarea.border:focus,
div.wrapper div.action_view form.appForm input.border:focus {
    border-color: var(--neon-blue) !important;
}

/* Pleine largeur : zone de texte, fichier, image, pieces jointes. */
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other:has(textarea),
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other:has(input[type=file]),
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other:has(img),
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) fieldset > div:not(.input_wrapper):not(.input_wrapper_other),
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) fieldset > p {
    grid-column: 1 / -1;
}

/* Champ de fichier. */
div.wrapper div.action_view form.appForm input[type=file] {
    display: block;
    max-width: 100%;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9em;
}

div.wrapper div.action_view form.appForm input[type=file]::file-selector-button {
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 7px 14px;
    margin-inline-end: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* Image en place + case « supprimer » : cote a cote. */
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other:has(> img) {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other:has(> img) > br {
    display: none;
}

div.wrapper div.action_view form.appForm div.input_wrapper_other > img {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    height: auto;
    margin-inline-end: 6px;
}

div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other > label.checkbox,
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper_other > label.radio {
    display: inline-block !important;
    width: auto !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
}

/* Messages de validation poses par main.js sous le champ. */
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper small.error {
    position: static;
    color: var(--neon-pink);
    font-size: 0.82em;
}

div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper > svg.error,
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper > svg.success,
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper > i.error,
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.input_wrapper > i.success {
    position: absolute;
    inset-inline-end: 10px;
    bottom: 11px;
    top: auto;
    left: auto;
}

/* Pieces jointes : main.js ajoute une ligne (nom + fichier + corbeille) a
   chaque appui sur « Ajouter ». */
div.wrapper div.action_view form.appForm div.add_attachment {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.add_attachment > div.input_wrapper_other:has(> input[type=file]) {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) div.add_attachment > div.input_wrapper_other > input[type=text] {
    flex: 1 1 200px;
    width: auto;
}

/* 💣 mainltr.css : `div.input_wrapper_other [class] { width: 100% !important }`
   — tout enfant PORTANT UNE CLASSE prend toute la largeur. Les champs d'une
   piece jointe en portent : chacun occupait sa propre ligne. */
div.wrapper div.action_view form.appForm div.add_attachment > div.input_wrapper_other > input[type=file],
div.wrapper div.action_view form.appForm div.add_attachment > div.input_wrapper_other > a.remove_button {
    width: auto !important;
    flex: 0 0 auto;
}

div.wrapper div.action_view form.appForm div.add_attachment > div.input_wrapper_other > input[type=text] {
    width: auto !important;
}

div.wrapper div.action_view form.appForm div.add_attachment > div.input_wrapper_other > a.add_attachment_button {
    width: auto !important;
}

/* Meme regle, meme effet sur l'ICONE : fontawesome5.js pose une classe sur
   son <svg>, qui s'etirait sur toute la largeur du bouton. */
/* Le selecteur doit PESER plus que celui de mainltr.css (4 classes + [class]),
   les deux etant en !important : d'ou le chemin complet et `svg[class]`. */
div.wrapper div.action_view form.appForm div.add_attachment > div.input_wrapper_other a svg[class] {
    width: 1em !important;
    flex: 0 0 auto;
}

div.wrapper div.action_view form.appForm div.add_attachment a.remove_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px;
    border-radius: var(--radius-md);
    color: var(--neon-pink);
    background: rgba(255, 107, 134, 0.10);
}

/* Lien « ajouter une piece jointe ». */
div.wrapper div.action_view form.appForm a.add_attachment_button:link,
div.wrapper div.action_view form.appForm a.add_attachment_button:visited,
div.wrapper div.action_view form.appForm a.remove_attachment_button:link,
div.wrapper div.action_view form.appForm a.remove_attachment_button:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 7px 14px;
    font-size: 0.88em;
    font-weight: 600;
}

/* Bouton d'envoi : derniere ligne, a la fin. */
div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) fieldset > input[type=submit] {
    grid-column: 1 / -1;
    justify-self: end;
    float: none;
    margin: 4px 0 0;
}

@media only screen and (max-width: 760px) {
    div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) fieldset {
        grid-template-columns: minmax(0, 1fr);
        padding: 6px 14px 14px;
        gap: 14px;
    }

    div.wrapper div.action_view form.appForm:where(:not([action="/cvtheque"]):not(.docoffice_parametres)) fieldset > input[type=submit] {
        justify-self: stretch;
        width: 100%;
    }
}

/* ── 8. CVtheque : filtres en grille ──────────────────────────────────── */
/* Avant : sept champs empiles, 550 px de haut avant le premier profil.
   Les selecteurs repartent de `div.wrapper div.action_view` : sans cela, les
   regles generales des formulaires (plus precises) l'emportent en silence. */
div.wrapper div.action_view form.appForm[action="/cvtheque"] {
    margin-bottom: 14px;
}

div.wrapper div.action_view form.appForm[action="/cvtheque"] fieldset {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
    padding: 6px 18px 18px;
    align-items: start;
}

div.wrapper div.action_view form.appForm[action="/cvtheque"] fieldset legend {
    grid-column: 1 / -1;
}

/* Chaque champ : libelle au-dessus, controle dessous, meme ecart partout
   (un <select> habille et un <input> n'avaient pas la meme hauteur de ligne). */
div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    float: none;
    width: auto;
}

div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other > label,
div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other > .bootstrap-select,
div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other > input[type=text],
div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other > p {
    margin: 0;
}

div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other > label {
    line-height: 1.3;
}

/* Metier (choix multiple) et Recherche prennent deux colonnes. */
div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other:nth-of-type(1),
div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other:nth-of-type(5) {
    grid-column: span 2;
}

/* Cases a cocher : derniere ligne, a cote du bouton (elles sont AVANT
   « Presentation » dans la page ; `order` ne change que l'affichage). */
div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other:nth-of-type(6) {
    order: 2;
    grid-column: 1 / span 3;
    align-self: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 22px;
}

div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other:nth-of-type(6) br {
    display: none;
}

div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other:nth-of-type(6) label {
    font-weight: 500;
    font-size: 0.88em;
    color: var(--text-primary);
    cursor: pointer;
}

div.wrapper div.action_view form.appForm[action="/cvtheque"] input[type=submit] {
    order: 3;
    float: none;
    margin: 0;
    height: 40px;
    justify-self: end;
    align-self: center;
    grid-column: -2 / -1;
}

div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other > p {
    font-size: 0.86em;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.4;
}

details > summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.92em;
}

details[open] > summary {
    color: var(--text-primary);
}

/* Intertitre de metier dans la liste. */
table.data tr.groupe_metier td,
table.data tr.groupe_metier:hover td {
    background: var(--bg-tertiary) !important;
    color: var(--text-bright) !important;
    font-weight: 600;
    text-align: start;
    padding: 10px 14px;
    border-top: 1px solid var(--border-medium);
    border-bottom: 1px solid var(--border-medium);
}

/* L'intertitre est la seule cellule de sa ligne, donc aussi « la derniere » :
   il heritait du `nowrap` des cellules d'actions et sortait de l'ecran. */
table.data tr.groupe_metier td:last-child {
    white-space: normal;
    text-align: start;
}

table.data tr.groupe_metier td svg {
    color: var(--neon-blue);
    margin-inline-end: 6px;
}

table.data tr.groupe_metier td span.groupe_nombre {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.92em;
}

/* ── 9. Tableau de bord ───────────────────────────────────────────────── */
div.accueil h2.accueil_titre {
    font-size: 1.8em;
    letter-spacing: -0.015em;
}

/* ── 9 bis. Doc Office et historique (2026-10-12) ─────────────────────── */
div.page_entete {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 18px;
}

div.page_entete h2 {
    margin: 0;
    font-size: 1.6em;
}

div.page_entete a.button:link,
div.page_entete a.button:visited {
    float: none;
    margin: 0;
    margin-inline-start: auto;
}

div.page_entete span.page_compte {
    background: var(--af-accent-fond-fort);
    color: var(--neon-blue);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.8em;
    font-weight: 600;
}

/* Doc Office : l'image a cote des informations, dans un seul cadre. */
div.docoffice_carte {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    max-width: 980px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 20px;
}

div.docoffice_image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

div.docoffice_infos {
    min-width: 0;
}

/* Parametres du Doc Office. */
div.wrapper div.action_view form.appForm.docoffice_parametres {
    max-width: 760px;
    margin: 0;
}

div.wrapper div.action_view form.appForm.docoffice_parametres fieldset {
    padding: 6px 18px 4px;
}

div.wrapper div.action_view form.appForm.docoffice_parametres div.input_wrapper_other {
    border: 0;
    padding: 0;
    margin: 0 0 16px;
    float: none;
    width: auto;
}

div.wrapper div.action_view form.appForm.docoffice_parametres div.input_wrapper_other > label {
    display: block;
    margin: 0;
}

div.wrapper div.action_view form.appForm.docoffice_parametres textarea {
    margin: 8px 0 0;
    padding: 10px 12px;
    font-size: 0.92em;
    line-height: 1.5;
    resize: vertical;
}

div.docoffice_image_actuelle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin: 8px 0 10px;
}

div.docoffice_image_actuelle img {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    height: auto;
}

div.wrapper div.action_view form.appForm.docoffice_parametres label.docoffice_supprimer {
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
}

form.docoffice_parametres input[type=file] {
    display: block;
    margin-top: 8px;
    max-width: 100%;
    color: var(--text-secondary);
    font-size: 0.9em;
}

form.docoffice_parametres input[type=file]::file-selector-button {
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 7px 14px;
    margin-inline-end: 12px;
    font-weight: 600;
    cursor: pointer;
}

form.docoffice_parametres p.docoffice_aide {
    margin: 8px 0 0;
    font-size: 0.84em;
    color: var(--text-muted);
}

/* Recherche avancee des documents : titre du tableau de resultats. */
h3.recherche_titre {
    clear: both;
    margin: 22px 0 12px;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Historique. */
table.data.historique_table tr th:last-child,
table.data.historique_table tr td:last-child {
    width: auto;
    text-align: start;
    white-space: normal;
}

table.data.historique_table td.historique_date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

table.data.historique_table span.historique_heure {
    color: var(--text-muted);
    margin-inline-start: 6px;
}

table.data.historique_table td.historique_auteur {
    font-weight: 500;
}

span.historique_action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.82em;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
}

span.historique_action.historique_lecture {
    background: var(--af-accent-fond-fort);
    color: var(--neon-blue);
}

span.historique_action.historique_ecriture {
    background: rgba(69, 207, 143, 0.14);
    color: var(--neon-green);
}

span.historique_action.historique_suppression {
    background: rgba(255, 107, 134, 0.14);
    color: var(--neon-pink);
}

table.data.historique_table span.historique_vide {
    color: var(--text-muted);
}

/* Barre de recherche et pagination de DataTables : un peu d'air. */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 14px;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin-top: 14px;
}

@media only screen and (max-width: 1000px) {
    /* Sur petit ecran, la mise en page d'origine decale chaque cellule de
       160 px pour un libelle `responsive_*` que cette table ne porte pas :
       une trace = une fiche. */
    table.data.historique_table tr {
        padding: 10px 14px;
        border-top: 0;
        border-bottom: 1px solid var(--border-subtle);
    }

    table.data.historique_table tr td,
    table.data.historique_table tr td:last-child {
        left: 0;
        width: auto;
        display: inline-block;
        padding: 2px 0;
        border: 0 !important;
        background: transparent !important;
    }

    table.data.historique_table tr td.historique_date {
        display: block;
        font-size: 0.82em;
        color: var(--text-secondary);
    }

    table.data.historique_table tr td.historique_auteur {
        margin-inline-end: 8px;
    }

    table.data.historique_table tr td.historique_document {
        display: block;
        font-size: 0.9em;
        color: var(--text-secondary);
    }

    /* Pas de document (connexion, deconnexion) : pas de tiret seul sur sa ligne. */
    table.data.historique_table tr td.historique_document.historique_sans {
        display: none;
    }
}

@media only screen and (max-width: 640px) {
    div.docoffice_carte {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
        gap: 8px;
    }
}

/* ── 10. Fil d'actualite ──────────────────────────────────────────────── */
aside.fil_actualite {
    background: var(--bg-secondary);
    box-shadow: none;
}

aside.fil_actualite .fil_badge {
    animation: none;
    box-shadow: none;
}

/* ── 11. Pied de page ─────────────────────────────────────────────────── */
footer.main {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    box-shadow: none;
}

footer.main a.app_name:link,
footer.main a.app_name:visited {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--text-secondary);
}

/* ── 12. Page de connexion ────────────────────────────────────────────── */
div.action_view.login {
    background: var(--bg-primary);
    background-image: radial-gradient(ellipse at 50% 0%, rgba(255, 198, 3, 0.07) 0%, transparent 55%);
    display: flex;
    flex-direction: column;
}

div.action_view div.login_header {
    backdrop-filter: none;
    box-shadow: none;
    flex: 0 0 auto;
}

div.action_view div.login_header input.app_name,
div.action_view div.login_header input.app_name:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--text-bright);
    cursor: pointer;
}

/* Le formulaire d'abord, l'acces visiteur ensuite : c'est une entree
   secondaire, elle ne passe plus devant la connexion. */
div.login_box {
    order: 1;
    flex: 0 0 auto;
    margin: 72px auto 0;
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    box-shadow: var(--shadow-elevated);
}

div.login_box::before,
div.login_box::after,
div.login_box form div.border {
    display: none;
}

/* L'entree en rotation 3D durait 1,2 s : un simple fondu. */
@keyframes af_entree {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

div.login_box.animate {
    animation: af_entree 0.28s ease-out both;
}

div.login_box form h1 {
    font-size: 1.25em;
    font-weight: 650;
    color: var(--text-bright);
    margin: 14px 0 18px;
}

div.login_box form img.login_logo {
    width: 88px;
    height: 88px;
}

div.login_box form input[type=text],
div.login_box form input[type=password] {
    background: var(--af-champ);
    border: 1px solid var(--af-champ-bord);
    border-radius: var(--radius-md);
}

div.login_box form input[type=text]:focus,
div.login_box form input[type=password]:focus {
    background: var(--af-champ);
    border-color: var(--neon-blue);
    box-shadow: 0 0 0 3px var(--af-accent-fond-fort);
}

div.login_box form input[type=submit] {
    background: var(--neon-blue);
    border: 1px solid var(--neon-blue);
    color: #1d1708;
    border-radius: var(--radius-md);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}

div.login_box form input[type=submit]:hover,
div.login_box form input[type=submit]:active {
    background: #ffd84d;
    border-color: #ffd84d;
    box-shadow: none;
    transform: none;
}

div.login_visitor {
    order: 2;
    flex: 0 0 auto;
    margin: 14px auto 40px;
}

div.login_visitor form input[type=submit],
div.login_visitor form input[type=submit]:hover {
    background: transparent;
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-weight: 600;
    box-shadow: none;
    transform: none;
    cursor: pointer;
}

div.login_visitor form input[type=submit]:hover {
    background: var(--af-accent-fond);
    border-color: var(--border-neon);
    color: var(--text-bright);
}

div.action_view.login aside.fil_actualite {
    order: 3;
    flex: 0 0 auto;
}

/* ── 13. Telephone et tablette ────────────────────────────────────────── */
@media only screen and (max-width: 1000px) {
    /* Nom de l'application + titre de l'ecran + langue + compte ne tiennent
       pas sur une ligne : la langue passait SOUS l'en-tete. Le titre est
       deja dit par le menu et par la page. */
    div.wrapper header.main h1.title {
        display: none;
    }

    /* Le menu couvre l'ecran : le contenu ne doit plus se decaler dessous
       (il etait comprime dans les 130 px restants). */
    div.wrapper div.action_view.collapsed {
        margin-left: 0;
        margin-right: 0;
    }

    div.wrapper div.action_view form.appForm[action="/cvtheque"] fieldset {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ⚠️ `1 / span 3` creerait des colonnes implicites dans une grille de 2. */
    div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other:nth-of-type(6) {
        grid-column: 1 / -1;
    }

    div.wrapper div.action_view form.appForm[action="/cvtheque"] input[type=submit] {
        grid-column: 1 / -1;
    }
}

/* La liste de la CVtheque en fiches. La mise en page d'origine decale chaque
   cellule de 160 px pour y loger un libelle (`responsive_*`) que cette table
   ne porte pas : la moitie gauche de l'ecran restait vide. */
@media only screen and (max-width: 1000px) {
    table.data.sans_datatable tr {
        padding: 12px 14px;
        border-top: 0;
        border-bottom: 1px solid var(--border-subtle);
    }

    table.data.sans_datatable tr td {
        left: 0;
        width: auto;
        display: block;
        padding: 1px 0;
        border: 0 !important;
        background: transparent !important;
        text-align: start;
    }

    table.data.sans_datatable tr td:nth-child(1) {
        font-weight: 600;
        color: var(--text-bright);
        padding-bottom: 3px;
    }

    table.data.sans_datatable tr td:nth-child(n+3) {
        display: inline;
        font-size: 0.84em;
        color: var(--text-secondary);
    }

    table.data.sans_datatable tr td:nth-child(n+4):not(:last-child)::before {
        content: "\00b7";
        position: static;
        margin: 0 6px;
        font-weight: 400;
        color: var(--text-muted);
    }

    /* `.text-center` de Bootstrap est en !important. */
    table.data.sans_datatable tr td:last-child {
        display: block;
        text-align: start !important;
        padding-top: 8px;
        margin-inline-start: -6px;
    }

    table.data.sans_datatable tr.groupe_metier {
        padding: 0;
    }

    table.data.sans_datatable tr.groupe_metier td,
    table.data.sans_datatable tr.groupe_metier td:last-child {
        display: block;
        padding: 10px 14px;
        font-size: 0.95em;
        background: var(--bg-tertiary) !important;
    }
}

@media only screen and (max-width: 640px) {
    div.wrapper div.action_view {
        padding: 16px 12px;
    }

    div.wrapper div.action_view form.appForm[action="/cvtheque"] fieldset {
        grid-template-columns: minmax(0, 1fr);
        padding: 4px 14px 14px;
    }

    div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other:nth-of-type(1),
    div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other:nth-of-type(5),
    div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other:nth-of-type(6) {
        grid-column: 1 / -1;
    }

    div.wrapper div.action_view form.appForm[action="/cvtheque"] div.input_wrapper_other:nth-of-type(6) {
        flex-direction: column;
    }

    div.wrapper div.action_view form.appForm[action="/cvtheque"] input[type=submit] {
        justify-self: stretch;
        width: 100%;
    }

    div.login_box {
        margin-top: 32px;
        width: calc(100% - 24px);
        max-width: 360px;
        box-sizing: border-box;
        padding: 24px 20px;
    }

    div.login_visitor {
        width: calc(100% - 24px);
        max-width: 360px;
    }
}

@media (prefers-reduced-motion: reduce) {
    div.login_box.animate {
        animation: none;
    }
}

/* ── 14. CV anonyme (2026-10-12) : texte publie aux Visiteurs et ecran de
      relecture. Le texte est celui du CV, sans mise en page : `pre-wrap`
      garde ses retours a la ligne, sans police a chasse fixe. ───────────── */
div.wrapper div.action_view div.cv_anonyme_texte {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin: 10px 0 12px;
    color: var(--text-primary);
    font-size: 0.95em;
    line-height: 1.6;
    max-width: 900px;
    text-align: start;
    unicode-bidi: plaintext;
}

div.wrapper div.action_view p.cv_anonyme_gestion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 4px 0 10px;
}

div.wrapper div.action_view a.cv_anonyme_pastille i {
    color: var(--neon-green);
}

div.wrapper div.action_view a.cv_anonyme_pastille.cv_anonyme_brouillon i {
    color: var(--neon-orange);
}

div.wrapper div.action_view div.cv_anonyme_relecture form.cv_anonyme_form {
    display: block;
    max-width: 1000px;
    margin: 12px 0 0;
}

div.wrapper div.action_view div.cv_anonyme_relecture form.cv_anonyme_form label {
    display: block;
    color: var(--text-secondary);
    margin: 0 0 6px;
    float: none;
    width: auto;
}

div.wrapper div.action_view div.cv_anonyme_relecture textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 420px;
    resize: vertical;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font: inherit;
    font-size: 0.95em;
    line-height: 1.55;
    unicode-bidi: plaintext;
}

div.wrapper div.action_view div.cv_anonyme_relecture textarea:focus {
    outline: none;
    border-color: var(--border-neon);
}

div.wrapper div.action_view div.cv_anonyme_relecture p.cv_anonyme_relu {
    margin: 12px 0 0;
}

div.wrapper div.action_view div.cv_anonyme_relecture p.cv_anonyme_relu label {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--text-primary);
}

div.wrapper div.action_view div.cv_anonyme_relecture p.cv_anonyme_relu input[type=checkbox] {
    width: auto;
    margin: 3px 0 0;
    float: none;
}

div.wrapper div.action_view div.cv_anonyme_relecture p.cv_anonyme_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0;
}

div.wrapper div.action_view div.cv_anonyme_relecture p.cv_anonyme_actions button.button {
    cursor: pointer;
    font: inherit;
}

div.wrapper div.action_view div.cv_anonyme_relecture button.cv_anonyme_publier {
    border-color: var(--neon-green);
    color: var(--neon-green);
}

div.wrapper div.action_view div.cv_anonyme_relecture form.cv_anonyme_retrait {
    border-top: 1px solid var(--border-subtle);
    margin-top: 18px;
    padding-top: 4px;
}

div.wrapper div.action_view div.cv_anonyme_relecture :is(fieldset.cv_anonyme_consignes, div.cv_anonyme_residus) ul {
    margin: 6px 0 0;
    padding-inline-start: 22px;
    list-style: disc;
}

div.wrapper div.action_view div.cv_anonyme_relecture :is(fieldset.cv_anonyme_consignes, div.cv_anonyme_residus) li {
    margin: 4px 0;
    color: var(--text-secondary);
}

/* Boutons du formulaire de relecture : ce sont des <button> (ils portent
   l'operation), que la classe .button de la maison n'habille que sur <a>. */
div.wrapper div.action_view div.cv_anonyme_relecture p.cv_anonyme_actions button.button {
    appearance: none;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 9px 16px;
    font-weight: 600;
    line-height: 1.3;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

div.wrapper div.action_view div.cv_anonyme_relecture p.cv_anonyme_actions button.button:hover,
div.wrapper div.action_view div.cv_anonyme_relecture p.cv_anonyme_actions button.button:focus-visible {
    border-color: var(--border-neon);
    background: var(--bg-card);
    outline: none;
}

div.wrapper div.action_view div.cv_anonyme_relecture p.cv_anonyme_actions button.cv_anonyme_publier {
    border-color: var(--neon-green);
    color: var(--neon-green);
}

div.wrapper div.action_view div.cv_anonyme_relecture p.cv_anonyme_actions a.button {
    margin: 0;
    float: none;
}

/* Liens dans un message : dans la phrase, pas pousses a droite. */
div.wrapper div.action_view :is(div.cv_anonyme_relecture, fieldset.cv_anonyme) p.message a {
    float: none;
    display: inline;
    position: static;
}

/* ── 15. Bascule entre les pages (2026-10-12, demande client : « des
      animations lors des bascules entre les pages »). Transition native du
      navigateur entre deux pages du site : l'ancienne s'efface, la nouvelle
      monte de quelques pixels. Aucun script, aucun delai ajoute au clic ; un
      navigateur qui ne connait pas cette regle l'ignore et navigue comme
      avant. Coupee si le visiteur a demande moins d'animations.
      (N'enfreint pas la regle de la maison : rien n'est pose sur
      div.action_view, l'animation porte sur une image de la page.)
      Le soir meme, le client choisit « plus marquee » sur nextdata.ma puis
      demande « la meme animation » ici : memes reglages que la v1.4 de
      nd-bascule-ai.php (sortie 0,28 s en montant de 16 px, entree 0,7 s
      avec 32 px de montee, meme courbe). ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root) {
        animation: af-page-sort 0.28s ease both;
    }

    ::view-transition-new(root) {
        animation: af-page-entre 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
}

@keyframes af-page-sort {
    to {
        opacity: 0;
        transform: translateY(-16px);
    }
}

@keyframes af-page-entre {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
}

/* ── 16. Gabarit NextData du CV anonyme (2026-10-13). Le client dispose deja d'un modele de CV anonymise au
      logo NextData (dossiers du 24/09 : bande rouge et jaune, logo, bandeau « Curriculum vitae anonymise »,
      reference, pied de page confidentiel) : la fiche presente le CV dans CE modele. C'est une FEUILLE claire
      posee sur l'ecran sombre, comme le PDF d'origine ; ses couleurs sont celles du modele, pas celles du
      theme. Sens de lecture force de gauche a droite : c'est le texte du CV, pas l'interface. ─────────────── */
div.wrapper div.action_view article.cv_gabarit {
    --cvg-rouge: #EF4136;
    /* Rouge du modele, fonce d'un cran, pour du TEXTE fin sur la feuille blanche : #EF4136 n'y fait que 3,83 de
       contraste, #D92D20 fait 4,83 (2026-10-13). La bande, les puces et les aplats gardent le rouge du modele. */
    --cvg-rouge-texte: #D92D20;
    --cvg-jaune: #FFC20E;
    --cvg-noir: #231F20;
    --cvg-gris: #5b5556;
    background: #ffffff;
    color: var(--cvg-noir);
    max-width: 860px;
    margin: 12px 0 14px;
    padding: 0 34px 22px;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    font-family: Inter, 'DejaVu Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    overflow: hidden;
}

div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_bande {
    height: 14px;
    margin: 0 -34px;
    background: linear-gradient(90deg, var(--cvg-rouge) 0 60%, var(--cvg-jaune) 60% 100%);
}

div.wrapper div.action_view article.cv_gabarit header.cv_gabarit_entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0 12px;
    border-bottom: 2px solid var(--cvg-noir);
    background: none;
    position: static;
    height: auto;
}

div.wrapper div.action_view article.cv_gabarit header.cv_gabarit_entete img {
    height: 72px;
    width: auto;
    display: block;
}

div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_doc {
    text-align: right;
}

div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_type {
    font-family: Montserrat, Inter, sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cvg-rouge-texte);
}

div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_code {
    display: inline-block;
    margin-top: 8px;
    font-family: Montserrat, Inter, sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.04em;
    background: var(--cvg-noir);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 5px;
}

div.wrapper div.action_view article.cv_gabarit h3.cv_gabarit_titre {
    font-family: Montserrat, Inter, sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    color: var(--cvg-noir);
    margin: 16px 0 4px;
    padding: 0;
    border: 0;
    background: none;
    text-shadow: none;
}

div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_meta {
    color: var(--cvg-gris);
    font-size: 13.5px;
    margin-bottom: 6px;
}

div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_meta span + span::before {
    content: "·";
    margin: 0 8px;
    color: var(--cvg-rouge);
}

div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_corps h4 {
    font-family: Montserrat, Inter, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cvg-noir);
    margin: 18px 0 8px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    text-shadow: none;
}

div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_corps h4::before {
    content: "";
    width: 11px;
    height: 11px;
    background: var(--cvg-rouge);
    flex: 0 0 auto;
}

div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_corps p {
    margin: 0 0 3px;
    padding: 0;
    color: var(--cvg-noir);
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}

div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_corps ul {
    margin: 4px 0 6px;
    padding: 0 0 0 20px;
    list-style: disc;
}

div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_corps li {
    margin: 0 0 3px;
    color: var(--cvg-noir);
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}

div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_corps li::marker {
    color: var(--cvg-rouge);
}

div.wrapper div.action_view article.cv_gabarit footer.cv_gabarit_pied {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 8px 0 0;
    border-top: 1px solid #e3dfdf;
    font-size: 11.5px;
    color: #7a7475;
    background: none;
    position: static;
    height: auto;
}

/* Meme piege que la ligne « meta » du gabarit : la feuille du theme sombre colore TOUT <span> en clair. Sur la
   feuille blanche, les deux mentions du pied (« CV anonymise presente par NextData… » et la reference) sortaient
   en blanc casse sur blanc — contraste 1,18, mesure le 2026-10-13. Couleur imposee, un peu plus soutenue que le
   gris d'origine (5,6 pour un texte de 11,5 px). */
div.wrapper div.action_view article.cv_gabarit footer.cv_gabarit_pied,
div.wrapper div.action_view article.cv_gabarit footer.cv_gabarit_pied span {
    color: #6b6566 !important;
    -webkit-text-fill-color: #6b6566;
}

div.wrapper div.action_view p.cv_gabarit_actions {
    margin: 10px 0 0;
}

div.wrapper div.action_view p.cv_gabarit_actions button.cv_gabarit_imprimer {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 9px 16px;
}

div.wrapper div.action_view p.cv_gabarit_actions button.cv_gabarit_imprimer:hover,
div.wrapper div.action_view p.cv_gabarit_actions button.cv_gabarit_imprimer:focus-visible {
    border-color: var(--border-neon);
    outline: none;
}

@media (max-width: 700px) {
    div.wrapper div.action_view article.cv_gabarit {
        padding: 0 16px 16px;
        font-size: 13.5px;
    }

    div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_bande {
        margin: 0 -16px;
    }

    div.wrapper div.action_view article.cv_gabarit header.cv_gabarit_entete img {
        height: 54px;
    }

    div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_code {
        font-size: 14px;
    }
}

/* Impression (et « Enregistrer en PDF ») : la feuille seule, sur fond blanc, format A4. */
@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    body:has(article.cv_gabarit) {
        background: #ffffff !important;
    }

    body:has(article.cv_gabarit) * {
        visibility: hidden !important;
    }

    body:has(article.cv_gabarit) article.cv_gabarit,
    body:has(article.cv_gabarit) article.cv_gabarit * {
        visibility: visible !important;
    }

    body:has(article.cv_gabarit) article.cv_gabarit {
        position: absolute !important;
        left: 0;
        top: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        box-shadow: none;
        border-radius: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Police des titres du gabarit : celle du modele (Montserrat), imposee contre la regle generale du theme. */
div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_type,
div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_code,
div.wrapper div.action_view article.cv_gabarit h3.cv_gabarit_titre,
div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_corps h4 {
    font-family: Montserrat, Inter, sans-serif !important;
}

/* Ligne « ville · identite communiquee par NextData » : le theme sombre eclaircissait ses span (gris clair sur
   feuille blanche, illisible). Couleur du gabarit imposee. */
div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_meta,
div.wrapper div.action_view article.cv_gabarit div.cv_gabarit_meta span {
    color: #5b5556 !important;
}

/* ── 16. Boutons <button class="button"> (2026-10-13) ─────────────────────
   Seuls les liens `a.button` etaient habilles : un vrai <button> de la meme
   classe (« Supprimer tout », « Supprimer la selection » de la liste des
   documents, « marquer non lu » de la messagerie, « Imprimer » du rapport)
   sortait avec l'apparence du navigateur — blanc sur blanc, illisible, avant
   l'habillage futuriste. Meme forme que `a.button`, sans le flottement a
   droite. Poids volontairement FAIBLE (une classe, un element) : les boutons
   qui ont leur propre regle (relecture d'un CV anonyme, impression du
   gabarit) gardent la leur. Les COULEURS du bouton de suppression sont dans
   futuriste.css (`button_danger`). */
button.button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 9px 16px;
    font-family: inherit;
    font-size: 0.9em;
    font-weight: 600;
    /* Meme hauteur que le lien-bouton voisin (37 px) : a 1.3 le bouton depassait de 2 px. */
    line-height: 17px;
    letter-spacing: 0;
    cursor: pointer;
}

button.button svg {
    opacity: 0.85;
}

/* Sous un tableau : decolle de la pagination. */
button.button.button_sous_tableau {
    margin-top: 14px;
}

/* ── 17. Page Rapport (/index/report, 2026-10-13) ─────────────────────────
   Trois volets de chiffres : tuiles, tableaux a barres, activite par jour.
   `table.rapport_table` et PAS `table.data` (DataTables n'y passe pas). Les
   barres recoivent leur longueur en style en ligne (un pourcentage calcule
   par PHPMVC\Lib\Rapport). Imprimable : voir le bloc `@media print` plus bas. */
div.wrapper div.action_view div.rapport div.page_entete span.rapport_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-inline-start: auto;
}

div.wrapper div.action_view div.rapport div.page_entete span.rapport_actions form.rapport_actualiser {
    display: inline-flex;
    margin: 0;
}

div.wrapper div.action_view div.rapport div.page_entete span.rapport_actions a.button:link,
div.wrapper div.action_view div.rapport div.page_entete span.rapport_actions a.button:visited {
    float: none;
    margin: 0;
}

div.wrapper div.action_view div.rapport p.rapport_intro {
    margin: 0 0 4px;
    max-width: 860px;
    color: var(--text-secondary);
}

div.wrapper div.action_view div.rapport p.rapport_date {
    margin: 0 0 22px;
    font-size: 0.86em;
    color: var(--text-muted);
}

div.wrapper div.action_view div.rapport section.rapport_volet {
    margin: 0 0 22px;
    padding: 18px 20px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-neon);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

div.wrapper div.action_view div.rapport section.rapport_volet > h3 {
    margin: 0 0 14px;
    font-size: 1.02em;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--neon-blue);
}

div.wrapper div.action_view div.rapport div.rapport_tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

div.wrapper div.action_view div.rapport div.rapport_tuile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    min-width: 0;
}

div.wrapper div.action_view div.rapport span.rapport_tuile_nombre {
    font-size: 1.9em;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-bright);
    font-variant-numeric: tabular-nums;
}

div.wrapper div.action_view div.rapport span.rapport_tuile_libelle {
    font-size: 0.86em;
    color: var(--text-secondary);
}

div.wrapper div.action_view div.rapport span.rapport_tuile_precision {
    font-size: 0.78em;
    color: var(--neon-blue);
}

div.wrapper div.action_view div.rapport div.rapport_colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px 24px;
    align-items: start;
}

div.wrapper div.action_view div.rapport div.rapport_colonnes + div.rapport_colonnes {
    margin-top: 18px;
}

div.wrapper div.action_view div.rapport div.rapport_bloc {
    min-width: 0;
}

div.wrapper div.action_view div.rapport div.rapport_bloc > h4 {
    margin: 0 0 8px;
    font-size: 0.95em;
    font-weight: 650;
    color: var(--text-bright);
}

div.wrapper div.action_view div.rapport p.rapport_note {
    margin: 0 0 10px;
    font-size: 0.84em;
    color: var(--text-muted);
}

div.wrapper div.action_view div.rapport table.rapport_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

div.wrapper div.action_view div.rapport table.rapport_table th,
div.wrapper div.action_view div.rapport table.rapport_table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--border-subtle);
    text-align: start;
    vertical-align: middle;
    font-weight: 400;
    color: var(--text-primary);
    background: transparent;
}

div.wrapper div.action_view div.rapport table.rapport_table thead th {
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
}

div.wrapper div.action_view div.rapport table.rapport_table tr:last-child th,
div.wrapper div.action_view div.rapport table.rapport_table tr:last-child td {
    border-bottom: 0;
}

div.wrapper div.action_view div.rapport table.rapport_table .rapport_nombre {
    width: 1%;
    white-space: nowrap;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

div.wrapper div.action_view div.rapport table.rapport_table tr.rapport_autres span.rapport_libelle {
    font-style: italic;
    color: var(--text-secondary);
}

div.wrapper div.action_view div.rapport span.rapport_libelle {
    display: block;
    overflow-wrap: anywhere;
}

div.wrapper div.action_view div.rapport span.rapport_barre {
    display: block;
    height: 5px;
    margin-top: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

div.wrapper div.action_view div.rapport span.rapport_barre > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #ffc603, #ff9f1a);
}

/* Courbes par jour (consultations et activité, 2026-10-13) : une ligne sur trente jours, dates dessous. */
div.wrapper div.action_view div.rapport div.rapport_courbe svg {
    display: block;
    width: 100%;
    height: 130px;
    border-bottom: 1px solid var(--border-medium);
    overflow: visible;
}

div.wrapper div.action_view div.rapport polyline.rapport_courbe_ligne {
    fill: none;
    stroke: #ffc603;
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-linecap: round;
}

div.wrapper div.action_view div.rapport polygon.rapport_courbe_aire {
    fill: #ffc603;
    fill-opacity: 0.14;
    stroke: none;
}

/* Courbes par public (2026-10-13) : une couleur ET un pointillé par public (0 = sans compte, puis groupes 1 à 4),
   pour les distinguer aussi sans la couleur. La couleur vit dans --serie : l'impression n'a qu'elle à changer. */
div.wrapper div.action_view div.rapport .rapport_serie_0 { --serie: #ffc603; --tirets: none; }
div.wrapper div.action_view div.rapport .rapport_serie_1 { --serie: #ff6b5e; --tirets: 7 4; }
div.wrapper div.action_view div.rapport .rapport_serie_2 { --serie: #4cc9f0; --tirets: 2 4; }
div.wrapper div.action_view div.rapport .rapport_serie_3 { --serie: #7bd88f; --tirets: 9 4 2 4; }
div.wrapper div.action_view div.rapport .rapport_serie_4 { --serie: #c4a7ff; --tirets: 4 5; }

div.wrapper div.action_view div.rapport polyline.rapport_courbe_ligne[class*="rapport_serie_"] {
    stroke: var(--serie);
    stroke-dasharray: var(--tirets);
}

div.wrapper div.action_view div.rapport path.rapport_courbe_points[class*="rapport_serie_"] {
    stroke: var(--serie);
    stroke-width: 5px;
}

div.wrapper div.action_view div.rapport ul.rapport_legende {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.82em;
    color: var(--text-secondary);
}

div.wrapper div.action_view div.rapport ul.rapport_legende li {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
}

/* Le trait de la légende reprend le pointillé de sa courbe (dégradé répété : pas d'image, pas de SVG). */
div.wrapper div.action_view div.rapport span.rapport_legende_trait {
    display: inline-block;
    width: 26px;
    height: 0;
    border-top: 2px solid var(--serie);
}

div.wrapper div.action_view div.rapport span.rapport_legende_trait.rapport_serie_1,
div.wrapper div.action_view div.rapport span.rapport_legende_trait.rapport_serie_3,
div.wrapper div.action_view div.rapport span.rapport_legende_trait.rapport_serie_4 {
    border-top-style: dashed;
}

div.wrapper div.action_view div.rapport span.rapport_legende_trait.rapport_serie_2 {
    border-top-style: dotted;
}

div.wrapper div.action_view div.rapport span.rapport_legende_nombre {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Le nombre du jour, posé au-dessus de son point. La zone de dessin garde de la place au-dessus du plus haut. */
div.wrapper div.action_view div.rapport div.rapport_courbe_dessin {
    position: relative;
    margin-top: 20px;
}

div.wrapper div.action_view div.rapport span.rapport_courbe_nombre {
    position: absolute;
    transform: translate(-50%, -100%);
    margin-top: -6px;
    font-size: 0.68em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    /* Liseré de la couleur du fond : un nombre reste lisible quand la ligne monte derrière lui. */
    text-shadow: 0 0 2px #201c1c, 0 0 2px #201c1c, 0 0 4px #201c1c;
    white-space: nowrap;
    pointer-events: none;
}

/* Sur la courbe par public, le nombre prend la couleur de son public ; il passe sous son point quand un autre
   public occupe déjà la place au-dessus. */
div.wrapper div.action_view div.rapport span.rapport_courbe_nombre[class*="rapport_serie_"] {
    color: var(--serie);
    font-weight: 600;
}

div.wrapper div.action_view div.rapport span.rapport_courbe_nombre.rapport_courbe_dessous {
    transform: translate(-50%, 0);
    margin-top: 6px;
}

/* Un point par jour : trait de longueur nulle à bout rond, donc rond même quand le dessin est étiré. */
div.wrapper div.action_view div.rapport path.rapport_courbe_points {
    fill: none;
    stroke: #ffc603;
    stroke-width: 6px;
    stroke-linecap: round;
}

/* Une bande par jour, invisible : elle porte la bulle « date : nombre » et s'éclaire au survol. */
div.wrapper div.action_view div.rapport rect.rapport_courbe_jour {
    fill: #ffc603;
    fill-opacity: 0;
}

div.wrapper div.action_view div.rapport rect.rapport_courbe_jour:hover {
    fill-opacity: 0.12;
}

div.wrapper div.action_view div.rapport ol.rapport_courbe_dates {
    display: flex;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

div.wrapper div.action_view div.rapport ol.rapport_courbe_dates li {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 0.66em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

@media only screen and (max-width: 640px) {
    div.wrapper div.action_view div.rapport section.rapport_volet {
        padding: 14px 12px 16px;
    }

    /* Un jour sur deux : trente dates ne tiennent pas sur un telephone. */
    /* Sur un telephone, tous les nombres restent affiches (demande du client), en plus petit : un jour n'a que
       dix pixels de large. Les sommets passent devant leurs voisins s'ils se touchent. */
    div.wrapper div.action_view div.rapport span.rapport_courbe_nombre {
        font-size: 0.6em;
        margin-top: -5px;
    }

    div.wrapper div.action_view div.rapport span.rapport_courbe_nombre.rapport_courbe_dessous {
        margin-top: 5px;
    }

    /* Courbe par public sur un telephone : jusqu'a cinq courbes et leurs nombres ne tiennent pas en dix pixels par
       jour. Le dessin garde une largeur lisible et DEFILE de cote ; `direction: rtl` sur le cadre le fait s'ouvrir
       sur les derniers jours, le contenu reste de gauche a droite. La legende, hors du cadre, ne defile pas. */
    div.wrapper div.action_view div.rapport div.rapport_courbe_multi {
        overflow-x: auto;
        direction: rtl;
        padding-bottom: 6px;
    }

    div.wrapper div.action_view div.rapport div.rapport_courbe_multi div.rapport_courbe_dessin,
    div.wrapper div.action_view div.rapport div.rapport_courbe_multi ol.rapport_courbe_dates {
        min-width: 760px;
        direction: ltr;
    }

    div.wrapper div.action_view div.rapport div.rapport_courbe_multi span.rapport_courbe_nombre {
        font-size: 0.68em;
    }

    div.wrapper div.action_view div.rapport div.rapport_courbe_multi ol.rapport_courbe_dates li:nth-child(even) {
        visibility: visible;
    }

    div.wrapper div.action_view div.rapport span.rapport_courbe_nombre.rapport_courbe_pic {
        z-index: 1;
        font-weight: 600;
    }

    div.wrapper div.action_view div.rapport ol.rapport_courbe_dates li:nth-child(even) {
        visibility: hidden;
    }

    div.wrapper div.action_view div.rapport div.rapport_colonnes {
        grid-template-columns: minmax(0, 1fr);
    }

    div.wrapper div.action_view div.rapport div.rapport_tuiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    div.wrapper div.action_view div.rapport span.rapport_tuile_nombre {
        font-size: 1.5em;
    }

}

/* Impression : le rapport seul, en noir sur blanc. */
@media print {
    /* Le jaune du logo ne se lit pas sur papier blanc : les courbes s'impriment en gris soutenu, comme les barres. */
    div.wrapper div.action_view div.rapport polyline.rapport_courbe_ligne {
        stroke: #5b5556;
    }

    div.wrapper div.action_view div.rapport polygon.rapport_courbe_aire {
        fill: #5b5556;
    }

    div.wrapper div.action_view div.rapport path.rapport_courbe_points {
        stroke: #5b5556;
    }

    /* Courbes par public : mêmes teintes, assombries pour le papier ; les pointillés restent. */
    div.wrapper div.action_view div.rapport .rapport_serie_0 { --serie: #b45309; }
    div.wrapper div.action_view div.rapport .rapport_serie_1 { --serie: #d92d20; }
    div.wrapper div.action_view div.rapport .rapport_serie_2 { --serie: #0e7490; }
    div.wrapper div.action_view div.rapport .rapport_serie_3 { --serie: #15803d; }
    div.wrapper div.action_view div.rapport .rapport_serie_4 { --serie: #6d28d9; }

    div.wrapper div.action_view div.rapport ul.rapport_legende,
    div.wrapper div.action_view div.rapport span.rapport_legende_nombre {
        color: #1a1414;
    }

    div.wrapper div.action_view div.rapport span.rapport_courbe_nombre {
        color: #1a1414;
        text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 4px #ffffff;
    }

    body:has(div.rapport) header.main,
    body:has(div.rapport) nav.main_navigation,
    body:has(div.rapport) div.menu_voile,
    body:has(div.rapport) footer.main,
    body:has(div.rapport) span.rapport_actions,
    body:has(div.rapport) button.rapport_imprimer {
        display: none !important;
    }

    body:has(div.rapport),
    body:has(div.rapport) div.wrapper,
    body:has(div.rapport) div.wrapper div.action_view {
        background: #ffffff !important;
        background-image: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        width: auto !important;
    }

    body:has(div.rapport) div.rapport *,
    body:has(div.rapport) div.rapport h2 {
        color: #1a1414 !important;
        -webkit-text-fill-color: #1a1414 !important;
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
    }

    body:has(div.rapport) div.rapport section.rapport_volet,
    body:has(div.rapport) div.rapport div.rapport_tuile {
        background: #ffffff !important;
        border: 1px solid #c9c3c3 !important;
        break-inside: avoid;
    }

    body:has(div.rapport) div.rapport span.rapport_barre {
        background: #ebe7e7 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body:has(div.rapport) div.rapport span.rapport_barre > span {
        background: #5b5556 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}