/* =====================================================
   CONVERSA — SYSTEME DE DESIGN (neutre, marque blanche)
   Refonte 2026-10-03 d'apres la maquette admin-neutre.
   - Jetons neutres fixes + jetons de MARQUE surcharges par organisme
     (/assets/css/theme.php, charge apres cette feuille).
   - Les anciens noms de classes sont TOUS conserves : les pages
     n'ont pas a etre modifiees pour changer d'apparence.
   - Polices hebergees localement (/_font/) : aucun appel a un tiers.
   ===================================================== */

/* --- POLICES (variables, chargees seulement si utilisees) --- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/_font/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/_font/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/_font/hanken-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/_font/hanken-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('/_font/dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('/_font/dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --- JETONS --- */
:root {
    /* Neutres (fixes) */
    --fond:        #f6f6f7;
    --surface:     #ffffff;
    --bord:        #e5e5e8;
    --bord-fort:   #d4d4d8;
    --texte:       #18181b;
    --texte-2:     #52525b;
    --texte-3:     #68686f;   /* RGAA 3.2 (2026-10-17) : #71717a donnait 4,47 sur le fond, 4,5 exige ; celui-ci 4,72 au plus bas */
    --survol:      #f4f4f5;
    --rayon:       10px;
    --ombre:       0 1px 2px rgba(16,16,20,.04);
    --ombre-haute: 0 12px 40px rgba(16,16,20,.14);

    /* Marque (surchargee par /assets/css/theme.php). Depuis le 2026-11-05, Conversa est reserve a ECSplicite :
       le theme par defaut reprend celui de son espace stagiaire (2026-10-17_marque_ecsplicite.sql), garder marqueNeutre() aligne. */
    --marque-police:           'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --marque-primaire:         #e6007e;
    --marque-primaire-texte:   #ffffff;
    --marque-primaire-doux:    #fde6f2;
    --marque-menu-actif:       #e6007e;
    --marque-menu-actif-texte: #ffffff;
    --marque-accent:           #ec6608;
    --marque-accent-texte:     #ffffff;
    --marque-lateral:          #ffffff;
    --marque-lateral-texte:    #27272a;

    /* Semantiques (fixes, toujours doublees d'un libelle) */
    --succes: #067647; --succes-fond: #ecfdf3; --succes-bord: #abefc6;
    --alerte: #b54708; --alerte-fond: #fffaeb; --alerte-bord: #fedf89;
    --danger: #b42318; --danger-fond: #fef3f2; --danger-bord: #fecdca;
    --info:   #175cd3; --info-fond:   #eff8ff; --info-bord:   #b2ddff;
    /* Les trois services, une couleur chacun (seance, credits, reservation) */
    --service-audio:     #067647;
    --service-ia:        var(--marque-primaire);
    --service-formateur: #b03a0a;   /* RGAA 3.2 : #c2410c donnait 4,35 sur son fond teinte */

    /* Anciens noms : les styles ecrits en ligne dans les pages suivent la marque */
    --green:       var(--marque-primaire);
    --green-dark:  var(--marque-menu-actif);
    --green-light: var(--marque-primaire);
    --orange:      var(--marque-accent);
    --orange-l:    var(--marque-accent);
    --gray-bg:     var(--fond);
    --gray-light:  var(--survol);
    --gray-mid:    var(--texte-3);
    --text:        var(--texte);
    --text-light:  var(--texte-2);
    --white:       #ffffff;
    --border:      var(--bord);
    --success:     var(--succes);
    --warning:     #f5b400;
    --radius:      var(--rayon);
    --shadow:      var(--ombre-haute);
    --shadow-sm:   var(--ombre);
}

/* Zia en pleine page, theme sombre (2026-11-05, repris de Neko) : seuls les neutres changent, la marque reste. */
.zia[data-zia-theme="sombre"].est-plein {
    --fond:        #141416;
    --surface:     #1c1c1f;
    --bord:        #2e2e33;
    --bord-fort:   #3f3f46;
    --texte:       #f4f4f5;
    --texte-2:     #c4c4cc;
    --texte-3:     #a1a1aa;
    --survol:      #27272b;
    --marque-primaire-doux: #4a1030;
    --ombre-haute: 0 12px 40px rgba(0,0,0,.5);
}

/* --- BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--marque-police); background: var(--fond); color: var(--texte); line-height: 1.5; font-size: 14px; }
a { color: var(--marque-primaire); text-decoration: none; }
a:hover { text-decoration: underline; }
/* RGAA 10.6 (2026-10-17) : un lien place dans un texte courant se distingue autrement que par sa couleur. Menus, boutons et
   liens portant une classe gardent leur style. */
p a:not([class]), .alert a:not([class]), dd a:not([class]), main li > a:not([class]):not(nav a) { text-decoration: underline; text-underline-offset: 2px; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6 { font-family: var(--marque-police); font-weight: 700; color: var(--texte); line-height: 1.25; letter-spacing: -.015em; }
h1 { font-size: 26px; } h2 { font-size: 18px; } h3 { font-size: 15px; } h4 { font-size: 14px; }
:focus-visible { outline: 2px solid var(--marque-primaire); outline-offset: 2px; border-radius: 6px; }
.evitement { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--surface); padding: 8px 14px; border-radius: 8px; box-shadow: var(--ombre-haute); }
.evitement:focus { left: 8px; }

/* =====================================================
   COQUILLE (barre laterale + contenu)
   ===================================================== */
/* 264 px (2026-11-05) : chaque libelle du menu tient sur une ligne, pastille de compteur comprise. */
.coquille { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.lateral {
    background: var(--marque-lateral); color: var(--marque-lateral-texte);
    border-right: 1px solid var(--bord); padding: 16px 12px;
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.lateral-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 14px; min-height: 48px; }
.marque-logo { display: flex; align-items: center; color: inherit; text-decoration: none !important; min-width: 0; }
.marque-logo img { max-height: 36px; max-width: 170px; width: auto; }
.marque-texte { font-weight: 800; font-size: 17px; letter-spacing: .02em; }
.marque-texte-nom { white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }
.marque-texte span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--marque-accent); margin-left: 3px; vertical-align: super; }
.marque-espace { font-size: 11px; font-weight: 500; opacity: .65; padding: 0 10px 6px; }
/* Intitules de rubrique (ESPACE, APPRENTISSAGE, COMPTE) dans la couleur de base de la marque. */
.rubrique { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--marque-primaire); padding: 18px 10px 6px; }
/* Rubriques depliantes (2026-11-05, partials/_coquille.php) : une seule ouverte a la fois (<details name="menu">). */
.menu-rubrique > summary.rubrique {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; border-radius: 6px;
    padding: 5px 10px; user-select: none; font-size: 10.5px;
}
.menu-rubrique > summary.rubrique::-webkit-details-marker { display: none; }
.menu-rubrique > summary.rubrique::after {
    content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); transition: transform .15s; opacity: .7;
}
.menu-rubrique[open] > summary.rubrique::after { transform: rotate(45deg); }
.menu-rubrique > summary.rubrique:hover { background: color-mix(in srgb, var(--marque-lateral-texte) 6%, transparent); }
.menu-rubrique > summary.rubrique:focus-visible { outline: 2px solid var(--marque-primaire); outline-offset: 1px; }
.menu-rubrique > summary.rubrique > span:first-child { flex: 1; min-width: 0; }
.menu-rubrique > summary .compte-rubrique {
    font-size: 11px; letter-spacing: 0; padding: 1px 7px; border-radius: 99px;
    background: var(--marque-primaire); color: var(--marque-primaire-texte);
}
.menu-rubrique[open] > summary .compte-rubrique { display: none; }   /* ouverte : les compteurs sont sur les entrees */
@media (prefers-reduced-motion: reduce) { .menu-rubrique > summary.rubrique::after { transition: none; } }
/* Rubrique d'une seule entree (2026-11-08) : le titre est le lien, sans fleche ni repli. */
.menu-rubriques .rubrique-lien { display: flex; align-items: center; gap: 8px; border-radius: 6px; padding: 5px 10px; font-size: 10.5px; text-decoration: none; }
.menu-rubriques .rubrique-lien > span:first-child { flex: 1; min-width: 0; }
.menu-rubriques .rubrique-lien:hover { background: color-mix(in srgb, var(--marque-lateral-texte) 6%, transparent); }
.menu-rubriques .rubrique-lien:focus-visible { outline: 2px solid var(--marque-primaire); outline-offset: 1px; }
.menu-rubriques .rubrique-lien.actif { background: var(--marque-menu-actif); color: var(--marque-menu-actif-texte); }
.menu-rubriques .rubrique-lien .compte-rubrique { font-size: 11px; letter-spacing: 0; padding: 1px 7px; border-radius: 99px; background: var(--marque-primaire); color: var(--marque-primaire-texte); }
.menu-rubriques .rubrique-lien.actif .compte-rubrique { background: var(--marque-menu-actif-texte); color: var(--marque-menu-actif); }
.entree {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
    font-weight: 500; color: inherit; white-space: nowrap; text-decoration: none !important; min-width: 0;
}
.entree:hover { background: color-mix(in srgb, var(--marque-lateral-texte) 8%, transparent); }
.entree svg { width: 18px; height: 18px; flex-shrink: 0; }
.entree.actif { background: var(--marque-menu-actif); color: var(--marque-menu-actif-texte); }
/* Sous-rubrique (2026-11-07, partials/_coquille.php, cle 'groupe') : petit intitule gris, entrees courtes dessous. */
.menu-sous-rubrique { display: block; padding: 4px 10px 0; font-size: 10.5px; font-weight: 600; color: color-mix(in srgb, var(--marque-lateral-texte) 60%, transparent); }
/* Entree posee hors rubrique, en tete du menu (le tableau de bord, partials/_coquille.php). */
.entree-hors-rubrique { margin: 2px 0 4px; }
/* Menu resserre (2026-11-07, Pascal : ouvrir une rubrique faisait descendre tout le menu, on montait et descendait sans cesse).
   Entrees des rubriques plus basses (34 px au lieu de 40), titres de rubrique plus proches les uns des autres. */
.menu-rubriques .menu-rubrique .entree { padding: 4px 10px; font-size: 13px; gap: 8px; border-radius: 7px; }
.menu-rubriques .menu-rubrique .entree svg { width: 15px; height: 15px; }
.menu-rubrique[open] { padding-bottom: 3px; }
.menu-rubriques .entree-hors-rubrique { padding: 6px 10px; font-size: 13.5px; }
.entree .compte { margin-left: auto; font-variant-numeric: tabular-nums; }
/* Compteur d'une entree : pastille, comme celui d'une rubrique repliee ; inversee sur l'entree active. */
.entree .compte:not(:empty) {
    flex: none; min-width: 20px; padding: 1px 7px; border-radius: 99px; text-align: center;
    font-size: 11px; font-weight: 700; line-height: 18px; letter-spacing: 0;
    background: var(--marque-primaire); color: var(--marque-primaire-texte);
}
.entree.actif .compte:not(:empty) { background: var(--marque-menu-actif-texte); color: var(--marque-menu-actif); }
.lateral-pied {
    margin-top: auto; border-top: 1px solid color-mix(in srgb, var(--marque-lateral-texte) 16%, transparent);
    padding: 12px 8px 0; display: flex; align-items: center; gap: 10px; font-size: 13px;
}
.lateral-pied .qui { flex: 1; min-width: 0; line-height: 1.3; }
.lateral-pied .qui small { display: block; opacity: .65; font-size: 12px; }
.lateral-pied form { display: inline-block; }
.lateral-pied .sortie { background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; padding: 6px; border-radius: 7px; display: grid; place-items: center; }
.lateral-pied .sortie:hover { opacity: 1; background: color-mix(in srgb, var(--marque-lateral-texte) 8%, transparent); }
.lateral-pied .sortie svg { width: 18px; height: 18px; }
.lateral-pied .sortie-form { margin: 0; display: flex; }
.rond-photo { object-fit: cover; padding: 0; background: var(--surface); }
.rond { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 12px; background: var(--survol); color: var(--texte); border: 1px solid var(--bord); flex-shrink: 0; }

.principal, .main-content { padding: 24px 32px 56px; min-width: 0; }

/* Barre du haut sur mobile + menu repliable en CSS pur (case a cocher) */
.mobile-barre { display: none; }
.voile { display: none; }
.menu-bascule { position: absolute; opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
    .coquille { grid-template-columns: 1fr; }
    .mobile-barre {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: sticky; top: 0; z-index: 60; background: var(--marque-lateral); color: var(--marque-lateral-texte);
        border-bottom: 1px solid var(--bord); padding: 10px 16px;
    }
    .mobile-barre label { cursor: pointer; padding: 6px; border-radius: 8px; display: grid; place-items: center; }
    .mobile-barre svg { width: 22px; height: 22px; }
    .lateral { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 70; transform: translateX(-100%); transition: transform .2s; visibility: hidden; }
    .menu-bascule:checked ~ .coquille .lateral { transform: none; visibility: visible; box-shadow: var(--ombre-haute); }
    .menu-bascule:checked ~ .coquille .voile { display: block; }
    .voile { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 65; }
    .principal, .main-content { padding: 16px 16px 48px; }
    .menu-bascule:focus-visible ~ .mobile-barre label { outline: 2px solid var(--marque-primaire); }
}

/* Anciens noms de coquille (pages autonomes eventuelles) */
.layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar-nav { background: var(--marque-lateral); color: var(--marque-lateral-texte); border-right: 1px solid var(--bord); padding: 16px 12px; }
.snav-section { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .62; padding: 18px 10px 6px; }
.snav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px; font-weight: 500; color: inherit; }
.snav-item:hover { background: var(--survol); text-decoration: none; }
.snav-item.active { background: var(--marque-menu-actif); color: var(--marque-menu-actif-texte); }
.snav-badge { margin-left: auto; font-size: 12px; opacity: .7; }
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--bord); }
.navbar-brand, .navbar-right { display: flex; align-items: center; gap: 12px; }
.logo-text { font-weight: 800; font-size: 17px; color: var(--texte); letter-spacing: .02em; }
.logo-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--marque-accent); margin-left: 3px; vertical-align: super; }
.navbar-badge, .navbar-org-badge, .navbar-credits, .navbar-tagline { font-size: 12px; color: var(--texte-2); }

/* =====================================================
   EN-TETE DE PAGE, ONGLETS, BANDEAU
   ===================================================== */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.page-subtitle { color: var(--texte-2); margin-top: 4px; max-width: 760px; }
.ariane { font-size: 13px; color: var(--texte-3); display: flex; gap: 8px; align-items: center; margin-bottom: 2px; }
.ariane a { color: inherit; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bord); margin-bottom: 20px; overflow-x: auto; }
.onglet { padding: 10px 16px 12px; color: var(--texte-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.onglet:hover { color: var(--texte); text-decoration: none; }
.onglet.actif { color: var(--texte); border-bottom-color: var(--marque-primaire); font-weight: 600; }
.onglet .nb { font-size: 12px; color: var(--texte-3); }

/* =====================================================
   CARTES
   ===================================================== */
.card { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); margin-bottom: 20px; overflow-x: auto; }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--bord); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); }
.card-header h2, .card-header h3 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -.01em; color: var(--texte); }
.card-header svg { width: 18px; height: 18px; }
.card-header.orange, .card-header.dark { background: var(--surface); }
.card-header.orange h2, .card-header.orange h3, .card-header.dark h2, .card-header.dark h3 { color: var(--texte); }
.card-body { padding: 20px; }
.card-footer { padding: 14px 20px; border-top: 1px solid var(--bord); background: #fafafa; display: flex; justify-content: flex-end; gap: 8px; }

/* Bandeaux en degrade (option de marque « Cartes de l'espace apprenant », 2026-10-17) : pose par
   coquilleDebut() sur body[data-cartes="degrade"], espace apprenant seulement. Le titre est a gauche,
   sur la couleur principale ; le lien a droite, sur l'accent : chacun prend le texte calcule pour SA
   couleur (theme.php), jamais un blanc impose qui deviendrait illisible sur un accent clair. */
body[data-cartes="degrade"] .card { border-color: transparent; border-radius: 8px; box-shadow: 0 2px 10px color-mix(in srgb, var(--texte) 9%, transparent); }
body[data-cartes="degrade"] .card-header { background: linear-gradient(90deg, var(--marque-primaire), var(--marque-accent)); border-bottom: 0; padding-top: 11px; padding-bottom: 11px; color: var(--marque-primaire-texte); }
body[data-cartes="degrade"] .card-header h2, body[data-cartes="degrade"] .card-header h3 { color: inherit; font-weight: 700; }
body[data-cartes="degrade"] .card-header > :is(span, small, p):not(:first-child) { color: var(--marque-accent-texte); }
/* Pastille assombrie sous le lien : un accent vif (orange) ne donne que 3,2:1 en blanc pour un texte de 11 px ;
   22 % de fonce dessous le porte au-dela de 4,5:1, que le texte calcule soit blanc ou noir. */
body[data-cartes="degrade"] .card-header a:not(.btn) { color: var(--marque-accent-texte); background: color-mix(in srgb, var(--texte) 22%, transparent); padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body[data-cartes="degrade"] .card-header a:not(.btn):hover { background: color-mix(in srgb, var(--texte) 34%, transparent); }
body[data-cartes="degrade"] .card-header a:not(.btn)::before { content: "› "; content: "› " / ""; }
body[data-cartes="degrade"] .card-header .text-muted { color: inherit; opacity: .9; }
body[data-cartes="degrade"] .card-header :focus-visible { outline-color: currentColor; }
body[data-cartes="degrade"] .card-header .btn { background: var(--surface); color: var(--marque-primaire); border-color: transparent; }

/* Chiffres */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px 18px; }
.stat-card:hover { border-color: var(--bord-fort); }
.stat-val { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--texte); font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat-card.orange .stat-val, .stat-card.purple .stat-val { color: var(--marque-accent); }
.stat-card.green .stat-val  { color: var(--succes); }
.stat-card.red .stat-val    { color: var(--danger); }
.stat-card.blue .stat-val, .stat-card.teal .stat-val { color: var(--info); }
.stat-label { font-size: 12px; color: var(--texte-3); margin-top: 2px; }

/* =====================================================
   TABLEAUX (une ligne de hauteur, actions sur une ligne)
   ===================================================== */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--texte-3); padding: 11px 12px; border-bottom: 1px solid var(--bord); white-space: nowrap; background: var(--surface); text-transform: none; letter-spacing: 0; }
table td { padding: 11px 12px; border-bottom: 1px solid var(--bord); vertical-align: middle; white-space: nowrap; }
table td.retour, table td .retour { white-space: normal; }
table tr:hover td { background: #fafafa; }
table tr:last-child td { border-bottom: 0; }
table td form { display: inline-block; }
table td .btn + .btn, table td .btn + form, table td form + .btn, table td form + form { margin-left: 4px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* =====================================================
   FORMULAIRES
   ===================================================== */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
/* Boutons du bas d'un formulaire : n'existait que dans cours.css et jeux.css, les autres pages les collaient au formulaire. */
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.form-field label { font-size: 13px; font-weight: 500; color: var(--texte); }
.form-field small, .form-field .aide-champ { font-size: 12px; color: var(--texte-3); }
/* Groupe de cases dans un formulaire : sans le cadre et la legende a cheval du navigateur.
   :where() garde une specificite nulle, les groupes stylés a part (.propositions…) gardent leur regle. */
:where(fieldset.form-field) { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
:where(fieldset.form-field) > legend { font-size: 13px; font-weight: 500; color: var(--texte); padding: 0; margin-bottom: 8px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number],
input[type=date], input[type=datetime-local], input[type=time], input[type=search], select, textarea {
    font: inherit; color: var(--texte); background: var(--surface);
    border: 1px solid var(--bord); border-radius: 9px; padding: 9px 12px; min-height: 40px; width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marque-primaire); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marque-primaire) 18%, transparent); }
input:disabled, select:disabled, textarea:disabled { background: var(--survol); color: var(--texte-3); }
input[type=checkbox], input[type=radio] { accent-color: var(--marque-primaire); width: 20px; height: 20px; }   /* cible tactile (WCAG 2.5.8), 16 px avant le 2026-10-17 */
input[type=color] { width: 40px; height: 40px; padding: 2px; border: 1px solid var(--bord); border-radius: 9px; background: var(--surface); cursor: pointer; }

/* =====================================================
   BOUTONS
   .btn = principal (couleur de marque) ; .gray / .outline = secondaire
   ===================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; border-radius: 9px; border: 1px solid transparent;
    background: var(--marque-primaire); color: var(--marque-primaire-texte);
    font: inherit; font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap;
    text-decoration: none !important; box-shadow: var(--ombre); transition: filter .15s, background .15s;
}
.btn:hover { filter: brightness(.94); }
.btn:active { filter: brightness(.88); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.btn svg { width: 17px; height: 17px; }
.btn.gray, .btn.outline, .btn.secondaire { background: var(--surface); color: var(--texte); border-color: var(--bord); }
.btn.gray:hover, .btn.outline:hover, .btn.secondaire:hover { background: var(--survol); filter: none; }
.btn.orange { background: var(--marque-accent); color: var(--marque-accent-texte); }
.btn.green  { background: var(--succes); color: #fff; }
.btn.blue   { background: var(--info); color: #fff; }
.btn.red    { background: var(--surface); color: var(--danger); border-color: var(--bord); }
.btn.red:hover { background: var(--danger-fond); border-color: var(--danger-bord); filter: none; }
.btn.purple { background: var(--marque-primaire); }
.btn.dark   { background: var(--texte); color: #fff; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 7px; box-shadow: none; gap: 6px; }
.btn.lg { height: 46px; padding: 0 22px; font-size: 15px; }
.btn.full, .btn.bloc { width: 100%; }

/* =====================================================
   PASTILLES, ALERTES
   ===================================================== */
.badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1.6;
    padding: 1px 9px; border-radius: 99px; border: 1px solid var(--bord); color: var(--texte-2); background: var(--surface); white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge.green  { color: var(--succes); border-color: var(--succes-bord); background: var(--succes-fond); }
.badge.orange { color: var(--alerte); border-color: var(--alerte-bord); background: var(--alerte-fond); }
.badge.red    { color: var(--danger); border-color: var(--danger-bord); background: var(--danger-fond); }
.badge.blue   { color: var(--info); border-color: var(--info-bord); background: var(--info-fond); }
.badge.gray   { color: var(--texte-2); }
.badge.purple { color: var(--marque-primaire); border-color: color-mix(in srgb, var(--marque-primaire) 30%, transparent); background: var(--marque-primaire-doux); }

.alert { padding: 12px 16px; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--surface); margin-bottom: 16px; font-size: 14px; }
.alert.success { background: var(--succes-fond); border-color: var(--succes-bord); color: var(--succes); }
.alert.error   { background: var(--danger-fond); border-color: var(--danger-bord); color: var(--danger); }
.alert.warn    { background: var(--alerte-fond); border-color: var(--alerte-bord); color: var(--alerte); }
.alert.info    { background: var(--info-fond); border-color: var(--info-bord); color: var(--info); }

/* =====================================================
   PAGES DE CONNEXION
   ===================================================== */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--fond); padding: 24px 16px; }
.login-card { background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; box-shadow: var(--ombre-haute); width: 100%; max-width: 420px; overflow: hidden; }
.login-header { padding: 28px 32px 8px; text-align: left; }
.login-logo { font-size: 22px; font-weight: 800; color: var(--texte); letter-spacing: .02em; }
.login-logo-org img { display: block; max-width: 100%; max-height: 64px; margin: 0 auto; }
.login-subtitle { font-size: 14px; color: var(--texte-2); margin-top: 6px; }
h1.login-subtitle { font-family: inherit; font-weight: 400; letter-spacing: 0; line-height: 1.5; }   /* RGAA 9.1 : le titre de la page de connexion */
.login-body { padding: 20px 32px 28px; }
.login-body .form-field { margin-bottom: 14px; }
.login-body .btn { width: 100%; margin-top: 8px; height: 44px; }
.login-footer { text-align: center; padding: 14px 32px; border-top: 1px solid var(--bord); background: #fafafa; font-size: 13px; color: var(--texte-3); }

/* =====================================================
   VITRINE
   ===================================================== */
.landing-hero { padding: 96px 24px 72px; text-align: center; background: var(--surface); border-bottom: 1px solid var(--bord); }
.landing-hero h1 { font-size: clamp(30px, 5vw, 52px); letter-spacing: -.03em; max-width: 820px; margin: 0 auto 16px; }
.landing-hero p { font-size: 17px; color: var(--texte-2); max-width: 620px; margin: 0 auto; }
.landing-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 1100px; margin: 0 auto; padding: 56px 24px; }
.feature-card { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 22px; transition: border-color .15s; }
.feature-card:hover { border-color: var(--bord-fort); }
.feature-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--marque-primaire-doux); color: var(--marque-primaire); margin-bottom: 14px; }
.feature-card h3 { font-size: 16px; margin-bottom: 6px; }
.feature-card p { color: var(--texte-2); }

/* =====================================================
   PAGINATION, VIDE, FENETRES
   ===================================================== */
.pagination { display: flex; gap: 4px; justify-content: flex-end; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 32px; height: 32px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 7px; font-size: 13px; color: var(--texte-2); border: 1px solid transparent; }
.pagination a:hover { background: var(--survol); text-decoration: none; }
.pagination .active { background: var(--surface); color: var(--texte); border-color: var(--bord); font-weight: 600; }

.empty-state { text-align: center; padding: 48px 24px; color: var(--texte-3); }
.empty-state svg { width: 40px; height: 40px; margin: 0 auto 12px; opacity: .5; }
.empty-state p { font-size: 14px; }

.modal-overlay { position: fixed; inset: 0; background: rgba(9,9,11,.45); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--surface); border-radius: 14px; box-shadow: var(--ombre-haute); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; border: 1px solid var(--bord); }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--bord); display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { font-size: 16px; margin: 0; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--texte-3); padding: 4px 8px; border-radius: 7px; }
.modal-close:hover { background: var(--survol); }
.modal-body { padding: 20px; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--bord); display: flex; justify-content: flex-end; gap: 8px; }

/* =====================================================
   UTILITAIRES
   ===================================================== */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--texte-3); }
.text-green  { color: var(--succes); }
.text-orange { color: var(--marque-accent); }
.text-red    { color: var(--danger); }
.text-sm     { font-size: 13px; }
.text-xs     { font-size: 12px; }
.mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Teintes et etats calcules par PHP : une classe, jamais un style="" (regle 12b).
   Les largeurs calculees passent par data-largeur, posees par actions.js. */
.ton-bon    { color: var(--green); }
.ton-moyen  { color: var(--orange); }
.ton-faible, .ton-danger { color: var(--danger); }
.fond-bon    { background: var(--green); }
.fond-moyen  { background: var(--orange); }
.fond-faible, .fond-danger { background: var(--danger); }
.gras { font-weight: 700; }
.attenue { opacity: .6; }
.ligne-courante { background: var(--marque-accent-doux, var(--fond)); border-radius: 4px; padding-left: 8px !important; padding-right: 8px !important; }
tr.ligne-alerte td { background: var(--danger-fond); }

/* Connexion LTI (org/lti.php) : les adresses a recopier, lisibles et selectionnables. */
.lti-adresses { display: grid; gap: 4px 0; margin: 12px 0 0; }
.lti-adresses dt { font-weight: 600; font-size: 13px; margin-top: 8px; }
.lti-adresses dd { margin: 0; overflow-wrap: anywhere; }
.lti-adresses code { user-select: all; }
.titre-barre { font-size: 16px; margin: 0; }
.champ-court { width: 80px; min-width: 0; }

@media (max-width: 900px) {
    .form-grid { grid-template-columns: 1fr; }
    .page-title { font-size: 22px; }
    .card-body { padding: 16px; }
}

/* Ecran d'attente des pages longues (assets/js/coquille.js) */
.chargement-voile { position: fixed; inset: 0; background: rgba(9,9,11,.45); z-index: 9999; display: grid; place-items: center; }
.chargement-boite { background: var(--surface); border-radius: 14px; padding: 32px 40px; text-align: center; box-shadow: var(--ombre-haute); max-width: 340px; }
.chargement-roue { width: 40px; height: 40px; border: 3px solid var(--bord); border-top-color: var(--marque-primaire); border-radius: 50%; margin: 0 auto 14px; animation: chargement-tourne .8s linear infinite; }
.chargement-titre { font-weight: 600; }
.chargement-detail { font-size: 13px; color: var(--texte-3); margin-top: 4px; }
@keyframes chargement-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chargement-roue { animation-duration: 3s; } }

/* =====================================================
   PERSONNALISATION (marque blanche)
   ===================================================== */
.perso-grille { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.perso-grille > .card { margin-bottom: 0; }
.perso-section { padding: 20px 22px; border-bottom: 1px solid var(--bord); }
.perso-section h2 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.perso-section .form-grid, .perso-section .perso-depot, .perso-police { margin-top: 14px; }
.perso-police { max-width: 360px; }
.perso-depot { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; border: 1px dashed var(--bord-fort); border-radius: var(--rayon); padding: 16px; }
.perso-logo-apercu { width: 180px; height: 64px; border: 1px solid var(--bord); border-radius: 8px; display: grid; place-items: center; background: #fff; padding: 6px; }
.perso-logo-apercu img { max-height: 48px; max-width: 160px; width: auto; }
.perso-couleur { display: flex; align-items: center; gap: 8px; }
.perso-couleur input[type=text] { font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; }
.perso-contraste { font-size: 12px; }
.perso-contraste.ok { color: var(--succes); }
.perso-contraste.ko { color: var(--danger); }
.perso-apercu { position: sticky; top: 24px; }
.mini { display: grid; grid-template-columns: 130px 1fr; height: 300px; font-size: 12px; font-family: var(--marque-police); }
.mini-lat { background: var(--marque-lateral); color: var(--marque-lateral-texte); border-right: 1px solid var(--bord); padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; }
.mini-logo { margin-bottom: 10px; padding: 0 4px; min-height: 24px; display: flex; align-items: center; }
.mini-logo img { max-height: 24px; max-width: 110px; width: auto; }
.mini-logo .marque-texte { font-size: 12px; }
.mini-e { padding: 6px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-e.actif { background: var(--marque-menu-actif); color: var(--marque-menu-actif-texte); }
.mini-main { padding: 14px; background: var(--fond); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mini-titre { font-size: 15px; }
.mini-carte { background: #fff; border: 1px solid var(--bord); border-radius: 8px; padding: 10px 12px; display: flex; gap: 16px; align-self: stretch; }
.mini-carte b { display: block; font-size: 17px; color: var(--marque-accent); }
.mini-bouton { background: var(--marque-primaire); color: var(--marque-primaire-texte); border-radius: 7px; padding: 6px 10px; font-weight: 500; }
/* Style des cartes : l'en-tete de la mini-carte suit le choix (sobre ou bandeau en degrade). */
.mini-bandeau { align-self: stretch; display: flex; justify-content: space-between; gap: 8px; padding: 7px 12px; margin-bottom: -10px; background: #fff; border: 1px solid var(--bord); border-bottom: 0; border-radius: 8px 8px 0 0; font-weight: 600; }
.mini-bandeau + .mini-carte { border-top-left-radius: 0; border-top-right-radius: 0; }
.mini-bandeau span + span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--marque-primaire); }
.mini[data-cartes="degrade"] .mini-bandeau { background: linear-gradient(90deg, var(--marque-primaire), var(--marque-accent)); border-color: transparent; color: var(--marque-primaire-texte); }
.mini[data-cartes="degrade"] .mini-bandeau span + span { color: var(--marque-accent-texte); background: color-mix(in srgb, var(--texte) 22%, transparent); padding: 1px 7px; border-radius: 99px; }
fieldset.perso-section { border: 0; border-bottom: 1px solid var(--bord); margin: 0; min-width: 0; }
fieldset.perso-section > legend { float: left; width: 100%; padding: 0; }
fieldset.perso-section > legend + * { clear: both; }
.perso-choix { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; cursor: pointer; font-weight: 400; }
.perso-choix input { margin-top: 3px; }
.perso-choix small { display: block; color: var(--texte-3); }
.choix-organisme { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; }
.choix-organisme .form-field { min-width: 280px; }
@media (max-width: 1100px) { .perso-grille { grid-template-columns: 1fr; } .perso-apercu { position: static; } }

/* =====================================================
   PAGES-LISTES (partials/_liste.php)
   ===================================================== */
.bandeau { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; margin-bottom: 20px; }
.bandeau-intro { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px 20px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.bandeau-intro p { color: var(--texte-2); max-width: 680px; margin: 0; }
.chiffres { display: flex; gap: 28px; flex-wrap: wrap; }
.chiffre b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--texte); font-variant-numeric: tabular-nums; line-height: 1.2; }
.chiffre b.accent { color: var(--marque-accent); }
.chiffre span { font-size: 12px; color: var(--texte-3); }
.bandeau-aide { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 0 22px; display: flex; align-items: center; gap: 10px; color: var(--texte-2); font-weight: 500; }
.bandeau-aide svg { width: 22px; height: 22px; color: var(--marque-primaire); }
.bandeau-aide:hover { text-decoration: none; border-color: var(--bord-fort); }

.barre-outils { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; margin-bottom: 16px; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); flex-wrap: wrap; align-items: center; }
.barre-gauche, .barre-droite { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.recherche { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--bord); border-radius: 9px; background: var(--surface); min-width: 320px; color: var(--texte-3); }
.recherche:focus-within { border-color: var(--marque-primaire); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marque-primaire) 18%, transparent); }
.recherche svg { width: 16px; height: 16px; flex-shrink: 0; }
.recherche input[type=search] { border: 0; box-shadow: none; padding: 0; min-height: 0; height: 36px; background: transparent; }
.recherche input[type=search]:focus { box-shadow: none; }
.barre-droite select { width: auto; min-width: 140px; }

table th a.tri { color: inherit; display: inline-flex; gap: 2px; text-decoration: none; }
table th a.tri:hover { color: var(--texte); }
table th a.tri.actif { color: var(--texte); font-weight: 600; }
td.col-actions { width: 1%; }
.actions-ligne { display: flex; gap: 4px; white-space: nowrap; }
.actions-ligne form { display: inline-block; }
.nom-cellule { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--texte); }
a.nom-cellule:hover { text-decoration: none; color: var(--marque-primaire); }
.niveau { font-weight: 600; color: var(--marque-accent); }
.liste-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--bord); color: var(--texte-3); font-size: 13px; flex-wrap: wrap; }
.liste-pied .pagination { margin: 0; }
.liste-vide { text-align: center; color: var(--texte-3); padding: 36px 16px !important; white-space: normal !important; }

/* margin: auto rend au <dialog> le centrage natif que la remise a zero « * { margin: 0 } » lui retirait. */
.dialogue { margin: auto; max-height: calc(100vh - 32px); overflow-y: auto; border: 1px solid var(--bord); border-radius: 14px; padding: 24px; max-width: 460px; width: calc(100% - 32px); box-shadow: var(--ombre-haute); color: var(--texte); background: var(--surface); }
.dialogue::backdrop { background: rgba(9,9,11,.45); }
.dialogue h2 { font-size: 18px; margin-bottom: 8px; }
.dialogue-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* Fiche (voir) */
.fiche-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.fiche-liste { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; font-size: 14px; }
.fiche-liste dt { color: var(--texte-3); }
.fiche-liste dd { color: var(--texte); min-width: 0; overflow-wrap: anywhere; }
.formulaire-page { max-width: 760px; }
.formulaire-actions { display: flex; gap: 8px; margin-top: 20px; }
.ariane a:hover { color: var(--texte); }

@media (max-width: 900px) {
    .bandeau, .fiche-grille { grid-template-columns: 1fr; }
    .bandeau-aide { padding: 12px 20px; }
    .recherche { min-width: 0; width: 100%; }
    .barre-gauche { width: 100%; }
}

/* Logo de marque dans la barre de la seance plein ecran */
.session-topbar-logo img { max-height: 28px; width: auto; }

/* =====================================================
   GRILLES DE CARTES (pleine largeur, une colonne sous 900px)
   ===================================================== */
.grille-1-2, .grille-2-1, .grille-1-1, .grille-3 { display: grid; gap: 20px; align-items: start; margin-bottom: 20px; }
.grille-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.grille-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grille-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-1-2 > .card, .grille-2-1 > .card, .grille-1-1 > .card, .grille-3 > .card { margin-bottom: 0; }
@media (max-width: 900px) { .grille-1-2, .grille-2-1, .grille-1-1, .grille-3 { grid-template-columns: 1fr; } }

/* =====================================================
   TABLEAU DE BORD APPRENANT
   ===================================================== */
.a-faire {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--bord); border-left: 4px solid var(--marque-primaire);
    border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px 24px; margin-bottom: 20px;
}
.a-faire > div { flex: 1; min-width: 260px; }
.a-faire-tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--marque-primaire); }
.a-faire h2 { font-size: 20px; margin: 4px 0 6px; }
.a-faire p { color: var(--texte-2); max-width: 760px; }
.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-lien { color: inherit; display: block; text-decoration: none !important; }
.stat-lien:hover { border-color: var(--marque-primaire); }
.stat-val small { font-size: 14px; font-weight: 500; color: var(--texte-3); margin-left: 2px; }
.stat-detail { font-size: 12px; color: var(--texte-3); margin-top: 6px; }
.tendance { font-weight: 600; }
.tendance.hausse { color: var(--succes); }
.tendance.baisse { color: var(--danger); }
.card-header a { white-space: nowrap; }
.competences { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 1100px) { .competences { grid-template-columns: 1fr; } }
.barres { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.barres li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 32px; gap: 12px; align-items: center; font-size: 13px; }
/* Barres de competence : <progress> natif, bouts en demi-cercle (le SVG etire les aplatissait). */
.barre { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 10px; border: 0; border-radius: 999px; overflow: hidden; background: var(--survol); color: var(--marque-primaire); }
.barre::-webkit-progress-bar { background: var(--survol); border-radius: 999px; }
.barre::-webkit-progress-value { background: var(--marque-primaire); border-radius: 999px; }
.barre::-moz-progress-bar { background: var(--marque-primaire); border-radius: 999px; }
.barre-valeur { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.evolution-titre { font-size: 12px; color: var(--texte-3); margin-bottom: 6px; }
/* Courbe des scores (partials/_courbe.php) : textes en HTML, dessin en SVG etire. */
.courbe { margin: 0; }
.courbe-corps { display: flex; gap: 8px; height: 180px; }
.courbe-hauteur-grande .courbe-corps { height: 260px; }
.courbe-axe { width: 28px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 11px; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.courbe-axe span { line-height: 1; margin: -.5em 0; }
.courbe-zone { flex: 1; min-width: 0; position: relative; }
.courbe-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.courbe-grille { stroke: var(--bord); stroke-width: 1; }
.courbe-aire { fill: var(--marque-primaire-doux); }
.courbe-ligne { fill: none; stroke: var(--marque-primaire); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.courbe-point { stroke: var(--marque-primaire); stroke-width: 9; stroke-linecap: round; }
.courbe-dates { display: flex; padding-left: 36px; margin-top: 6px; font-size: 11px; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.courbe-dates span { flex: 1; text-align: center; min-width: 0; white-space: nowrap; }
.competences-bilan { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bord); color: var(--texte-2); font-size: 13px; }
.rdv-liste { list-style: none; display: flex; flex-direction: column; }
.rdv-liste li { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bord); }
.rdv-liste li:last-child { border-bottom: 0; }
.rdv-date { min-width: 58px; text-align: center; background: var(--marque-primaire-doux); color: var(--marque-primaire); border-radius: 9px; padding: 6px 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.rdv-date b { display: block; font-size: 15px; }
.rdv-quoi { min-width: 0; font-weight: 500; }
.rdv-quoi small { display: block; font-weight: 400; color: var(--texte-3); }
.grandes-lignes { margin-bottom: 20px; }
/* Cartes cote a cote a la meme hauteur (tableau de bord : competences / rendez-vous). */
.grille-egale { align-items: stretch; }
.grandes-lignes h2 { font-size: 18px; margin-bottom: 12px; }
.lignes { list-style: none; counter-reset: ligne; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
/* Le selecteur « lignes par page » des barres d'outils (partials/_liste.php) porte aussi la classe « lignes » : sans
   cette regle, il heritait de la grille a 5 colonnes ci-dessus et poussait toute la barre a la ligne (2026-10-13). */
form.lignes { display: block; }
@media (max-width: 1280px) { .lignes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .lignes { grid-template-columns: 1fr; } }
.lignes li { counter-increment: ligne; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.lignes li::before { content: counter(ligne, decimal-leading-zero); font-size: 12px; font-weight: 700; color: var(--marque-primaire); letter-spacing: .08em; }
.lignes b { font-size: 15px; }
.lignes p { color: var(--texte-2); font-size: 13px; flex: 1; }
.lignes a { font-size: 13px; font-weight: 500; }

/* =====================================================
   PROFIL : PHOTO
   ===================================================== */
.profil-photo .card-body { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.profil-photo-apercu { width: 160px; height: 160px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--marque-primaire-doux); color: var(--marque-primaire); font-size: 48px; font-weight: 700; border: 1px solid var(--bord); }
.profil-photo-apercu img { width: 100%; height: 100%; object-fit: cover; }
.profil-photo-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.champ-fichier-masque { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.champ-fichier-masque:focus-visible + * , label.btn:has(+ .champ-fichier-masque:focus-visible) { outline: 2px solid var(--marque-primaire); outline-offset: 2px; }
.dialogue-large { max-width: 720px; }
.cadreur { max-height: min(60vh, 520px); margin-top: 12px; background: var(--survol); border-radius: 8px; overflow: hidden; }
.cadreur img { display: block; max-width: 100%; }

/* =====================================================
   AIDE : un sujet par page, sommaire a droite
   ===================================================== */
.aide-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.aide-grille > .card { margin-bottom: 0; }
@media (max-width: 1000px) { .aide-grille { grid-template-columns: 1fr; } .aide-sommaire { order: -1; } }
.aide-texte { max-width: 860px; font-size: 15px; line-height: 1.7; color: var(--texte-2); }
.aide-texte > * + * { margin-top: 14px; }
.aide-texte h2 { font-size: 17px; color: var(--texte); margin-top: 26px; }
.aide-texte ul, .aide-texte ol { padding-left: 22px; }
.aide-texte li + li { margin-top: 6px; }
.aide-texte strong { color: var(--texte); }
.aide-chapo { font-size: 16px; color: var(--texte); }
.aide-etapes { list-style: none; padding: 0 !important; counter-reset: etape; display: grid; gap: 8px; }
.aide-etapes li { counter-increment: etape; display: flex; gap: 12px; align-items: baseline; }
.aide-etapes li::before { content: counter(etape); flex: 0 0 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--marque-primaire-doux); color: var(--marque-primaire); font-weight: 700; font-size: 13px; }
.aide-conseil { background: var(--marque-primaire-doux); border-radius: 10px; padding: 14px 18px; font-size: 14px; }
.niveaux-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .niveaux-grille { grid-template-columns: 1fr 1fr; } }
.niveaux-grille div { border: 1px solid var(--bord); border-radius: 10px; padding: 14px; }
.niveaux-grille b { display: block; font-size: 24px; color: var(--marque-primaire); line-height: 1.1; }
.niveaux-grille strong { display: block; font-size: 13px; }
.niveaux-grille p { font-size: 13px; margin-top: 4px; line-height: 1.5; }
.tarifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tarifs div { border: 1px solid var(--bord); border-radius: 10px; padding: 16px; text-align: center; }
.tarifs b { display: block; font-size: 28px; color: var(--texte); line-height: 1.1; }
.tarifs span { display: block; font-size: 18px; font-weight: 700; color: var(--marque-primaire); margin-top: 6px; }
.tarifs small { display: block; font-size: 12px; color: var(--texte-3); }
.faq details { border-bottom: 1px solid var(--bord); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--texte); }
.faq details p { margin-top: 8px; }
.aide-suite { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--bord); }
.aide-suite a { display: flex; flex-direction: column; font-weight: 500; }
.aide-suite small { font-size: 12px; color: var(--texte-3); font-weight: 400; }
.aide-suivant { text-align: right; margin-left: auto; }
.aide-sommaire { position: sticky; top: 24px; }
@media (max-width: 1000px) { .aide-sommaire { position: static; } }
.aide-sommaire ol { list-style: none; padding: 8px; counter-reset: sommaire; }
.aide-sommaire li { counter-increment: sommaire; }
.aide-sommaire ol a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--texte-2); }
.aide-sommaire ol a::before { content: counter(sommaire, decimal-leading-zero); font-size: 12px; color: var(--texte-3); font-variant-numeric: tabular-nums; padding-top: 1px; }
.aide-sommaire ol a:hover { background: var(--survol); text-decoration: none; color: var(--texte); }
.aide-sommaire ol a.actif { background: var(--marque-primaire-doux); color: var(--marque-primaire); font-weight: 600; }
.aide-sommaire ol a.actif::before { color: var(--marque-primaire); }
.aide-sommaire-pied { border-top: 1px solid var(--bord); padding: 12px 18px; font-size: 13px; }

/* =====================================================
   VISITE GUIDEE (assets/js/visite-guidee.js, reprise de Fucone)
   Toute position est posee en JS, jamais dans un style="" ecrit par PHP.
   ===================================================== */
.visite-halo { position: fixed; z-index: 900; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(9, 9, 11, .58); pointer-events: none; transition: top .18s, left .18s, width .18s, height .18s; }
.visite-halo-vide { top: 50%; left: 50%; width: 0; height: 0; }
.visite-bulle { position: fixed; z-index: 901; width: min(340px, calc(100vw - 32px)); padding: 18px 20px; border: 1px solid var(--bord); border-radius: 12px; background: var(--surface); box-shadow: var(--ombre-haute); }
.visite-bulle h2 { font-size: 16px; margin: 0 40px 8px 0; }
.visite-texte { color: var(--texte-2); font-size: 14px; line-height: 1.6; }
.visite-fleche { position: absolute; width: 12px; height: 12px; border-top: 1px solid var(--bord); border-left: 1px solid var(--bord); background: var(--surface); transform: rotate(45deg); }
.visite-fleche-gauche { top: 22px; left: -7px; }
.visite-fleche-droite { top: 22px; right: -7px; transform: rotate(225deg); }
.visite-fleche-haut   { top: -7px; left: 26px; }
.visite-fleche-bas    { bottom: -7px; left: 26px; transform: rotate(225deg); }
.visite-pied { display: flex; gap: 8px; align-items: center; padding-top: 14px; margin-top: 16px; border-top: 1px solid var(--bord); }
.visite-compteur { min-width: 44px; margin-right: auto; color: var(--texte-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.visite-passer { position: absolute; top: 12px; right: 14px; padding: 4px 6px; border: 0; background: none; color: var(--texte-3); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.visite-passer:hover { color: var(--texte); }
.visite-cible { position: relative; z-index: 899; }
[data-visite-scenario][hidden], [data-visite-auto][hidden] { display: none; }
@media (max-width: 600px) {
    /* Sur telephone, la bulle ne suit plus la cible : en bas, pleine largeur. */
    .visite-bulle { top: auto !important; bottom: 12px; left: 16px !important; width: calc(100vw - 32px); }
    .visite-fleche { display: none; }
}

/* Etat des fournisseurs d'avatar (superadmin/avatars.php) */
.fournisseurs-etat { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.fournisseur { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px 16px; min-width: 220px; }
.fournisseur .badge { align-self: flex-start; }
.fournisseur-epuise { border-color: var(--alerte-bord); }
.fournisseur-hors_ligne { border-color: var(--danger-bord); }
.fournisseur .btn { align-self: flex-start; margin-top: 6px; }

/* Analyse de progression (client/progression.php) */
.analyse-attente { text-align: center; padding: 24px; }
.analyse-texte { line-height: 1.7; white-space: pre-line; color: var(--texte-2); }

/* Offres de credits (client/buy.php) */
.credits-solde { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px 18px; text-align: center; }
.credits-solde b { display: block; font-size: 26px; line-height: 1.1; color: var(--marque-primaire); }
.credits-solde span { font-size: 12px; color: var(--texte-3); }
.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; }
.offre { position: relative; margin-bottom: 0; overflow: visible; }
.offre .card-body { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.offre h2 { font-size: 18px; }
.offre-pour { color: var(--texte-2); font-size: 13px; min-height: 2.6em; }
.offre-prix { display: flex; align-items: baseline; gap: 10px; }
.offre-prix b { font-size: 32px; letter-spacing: -.02em; }
.offre-prix span { color: var(--texte-3); }
.offre-unite { font-size: 13px; color: var(--marque-primaire); font-weight: 500; }
.offre-inclus { list-style: none; border-top: 1px solid var(--bord); padding-top: 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.offre-inclus li { position: relative; padding-left: 22px; font-size: 13px; color: var(--texte-2); }
.offre-inclus li::before { content: ''; position: absolute; left: 2px; top: 4px; width: 10px; height: 6px; border-left: 2px solid var(--succes); border-bottom: 2px solid var(--succes); transform: rotate(-45deg); }
.offre-vedette { border: 2px solid var(--marque-primaire); }
.offre-ruban { position: absolute; top: -11px; left: 20px; background: var(--marque-primaire); color: var(--marque-primaire-texte); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; }
.offres-note { font-size: 12px; color: var(--texte-3); margin: 10px 0 0; }

/* Demandes de seances (client/commander.php, org/demandes.php) */
.demande-form fieldset { border: 0; padding: 0; margin-bottom: 14px; }
.demande-form legend { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.demande-choix { display: flex; gap: 8px; flex-wrap: wrap; }
.demande-choix label { position: relative; }
.demande-choix input { position: absolute; opacity: 0; }
.demande-choix span { display: inline-grid; place-items: center; min-width: 56px; height: 40px; padding: 0 12px; border: 1px solid var(--bord); border-radius: 9px; cursor: pointer; font-weight: 600; background: var(--surface); }
.demande-choix input:checked + span { border-color: var(--marque-primaire); background: var(--marque-primaire-doux); color: var(--marque-primaire); }
.demande-choix input:focus-visible + span { outline: 2px solid var(--marque-primaire); outline-offset: 2px; }
.demande-accepter { display: inline-flex; gap: 4px; align-items: center; }
.demande-accepter input[type=number] { width: 72px; min-height: 30px; height: 30px; padding: 2px 8px; }
.nom-cellule + small { display: block; }

/* Bascule video / audio des offres (client/buy.php), sans script */
.mode-radio { position: absolute; opacity: 0; pointer-events: none; }
.mode-choix { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--survol); border: 1px solid var(--bord); border-radius: 12px; margin-bottom: 20px; }
.mode-choix label { display: flex; flex-direction: column; padding: 10px 18px; border-radius: 9px; cursor: pointer; }
.mode-choix label b { font-size: 14px; }
.mode-choix label span { font-size: 12px; color: var(--texte-3); }
#mode-video:checked ~ .mode-choix label[for=mode-video],
#mode-audio:checked ~ .mode-choix label[for=mode-audio] { background: var(--surface); box-shadow: var(--ombre); color: var(--marque-primaire); }
#mode-video:focus-visible ~ .mode-choix label[for=mode-video],
#mode-audio:focus-visible ~ .mode-choix label[for=mode-audio] { outline: 2px solid var(--marque-primaire); outline-offset: 2px; }
.offres .si-audio { display: none; }
#mode-audio:checked ~ .offres .si-audio { display: revert; }
#mode-audio:checked ~ .offres .si-video { display: none; }
@media (max-width: 600px) { .mode-choix { display: grid; } }

/* Creneau : tuteur IA ou visio (org/sessions.php) */
.creneau-mode { border: 0; padding: 0; margin-bottom: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.creneau-mode legend { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.creneau-mode label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--bord); border-radius: 10px; padding: 14px; cursor: pointer; }
.creneau-mode label:has(input:checked) { border-color: var(--marque-primaire); background: var(--marque-primaire-doux); }
.creneau-mode span { font-size: 13px; color: var(--texte-2); }
.creneau-mode b { display: block; color: var(--texte); font-size: 14px; margin-bottom: 2px; }
.champs-visio { display: none; margin-bottom: 16px; padding: 16px; border: 1px dashed var(--bord-fort); border-radius: 10px; }
.creneau-form:has(#mode-visio:checked) .champs-visio { display: grid; }
.creneau-form:has(#mode-visio:checked) .champ-avatar { display: none; }
@media (max-width: 900px) { .creneau-mode { grid-template-columns: 1fr; } }
.visio-rejoindre svg { width: 16px; height: 16px; }

/* Visio Conversa : lien a saisir seulement pour un outil externe ; regle d'absence */
.creneau-form:has(#visio_outil option[value=conversa]:checked) .champ-lien { display: none; }
.regle-absence { display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.regle-absence label { display: flex; gap: 8px; align-items: center; font-weight: 500; }

/* Credits : deux modes illustres, calculette degressive (client/buy.php) */
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.mode-carte { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border: 2px solid var(--bord); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.mode-carte:hover { border-color: var(--bord-fort); }
.mode-carte span { font-size: 13px; color: var(--texte-2); line-height: 1.5; }
.mode-carte b { display: block; font-size: 17px; color: var(--texte); margin-bottom: 2px; }
.mode-carte b .mode-duree { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--marque-primaire); color: #fff; font-style: normal; font-size: 12px; font-weight: 600; vertical-align: 2px; }
.credits-duree { margin: 4px 0 6px; font-size: 16px; color: var(--texte-2); }
.credits-duree b { display: inline-block; padding: 3px 12px; margin-right: 4px; border-radius: 999px; background: var(--marque-primaire-doux); color: var(--marque-primaire); font-weight: 700; }
.mode-icone { width: 64px; height: 64px; flex-shrink: 0; }
.mode-ecran { fill: var(--marque-primaire-doux); stroke: var(--marque-primaire); stroke-width: 2.5; }
.mode-trait { fill: none; stroke: var(--marque-primaire); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#mode-video:checked ~ .modes label[for=mode-video],
#mode-audio:checked ~ .modes label[for=mode-audio] { border-color: var(--marque-primaire); background: var(--marque-primaire-doux); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marque-primaire) 15%, transparent); }
#mode-video:focus-visible ~ .modes label[for=mode-video],
#mode-audio:focus-visible ~ .modes label[for=mode-audio] { outline: 2px solid var(--marque-primaire); outline-offset: 3px; }
.credits-grille .si-audio { display: none; }
#mode-audio:checked ~ .credits-grille .si-audio { display: revert; }
#mode-audio:checked ~ .credits-grille .si-video { display: none; }
.credits-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.credits-grille > .card { margin-bottom: 0; }
.calculette .card-body { display: flex; flex-direction: column; gap: 14px; }
.calculette h2 { font-size: 18px; }
.calculette-choix { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.calculette-rapide { font: inherit; font-weight: 700; font-size: 18px; min-width: 64px; height: 52px; border-radius: 12px; border: 1px solid var(--bord); background: var(--surface); cursor: pointer; }
.calculette-rapide.actif { border-color: var(--marque-primaire); background: var(--marque-primaire-doux); color: var(--marque-primaire); }
.calculette-libre { display: flex; align-items: center; gap: 8px; border: 1px solid var(--bord); border-radius: 12px; padding: 0 6px 0 12px; font-size: 13px; color: var(--texte-3); }
.calculette-libre input { width: 90px; min-height: 40px; font-size: 16px; font-weight: 600; }
.calculette-total b { display: block; font-size: 42px; letter-spacing: -.03em; line-height: 1.1; }
.calculette-total span { color: var(--marque-primaire); font-weight: 600; }
.calculette-equivalence { display: flex; flex-direction: column; gap: 2px; color: var(--texte-2); }
.calculette-economie { color: var(--succes); font-weight: 600; }
.paliers td, .paliers th { white-space: nowrap; }
.paliers tr.actif td { background: var(--marque-primaire-doux); }
.paliers tr.actif td:first-child { box-shadow: inset 3px 0 0 var(--marque-primaire); }
.credits-inclus { margin: 0 20px 18px; }
@media (max-width: 900px) { .modes, .credits-grille { grid-template-columns: 1fr; } }

/* Fiche formateur */
.formateur-choix { border: 0; padding: 0; margin: 14px 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.formateur-choix legend { font-size: 13px; font-weight: 500; margin-bottom: 6px; width: 100%; }
.formateur-choix label { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.formateur-tarifs { border: 0; padding: 14px 0 0; margin-top: 14px; border-top: 1px solid var(--bord); }
.formateur-tarifs legend { font-size: 13px; font-weight: 600; }
.case { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-weight: 500; }
.vignette { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--survol); display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--texte-2); }
/* Tarif degressif : la colonne du mode choisi ressort */
#mode-video:checked ~ .credits-grille .paliers .col-video,
#mode-audio:checked ~ .credits-grille .paliers .col-audio { font-weight: 700; color: var(--service-audio); }
/* Compte rendu de seance (visio_bilan.php) */
.bilan { max-width: 1100px; margin: 0 auto; padding: 32px 16px 64px; }
.bilan-tete { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.bilan-apprenant { padding: 0; margin-bottom: 16px; }
.bilan-apprenant legend { width: 100%; float: left; display: flex; gap: 10px; align-items: center; }
.bilan-apprenant .card-body { clear: both; }
.paliers td small { display: block; font-size: 11px; color: var(--texte-3); font-weight: 400; }

/* Tableau de bord tenu sur un ecran (2026-10-04) : grandes lignes repliables,
   « a faire » + chiffres cote a cote, puis competences / seances / rendez-vous en trois colonnes. */
details.grandes-lignes { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 0 18px; margin-bottom: 16px; }
details.grandes-lignes > summary { display: flex; align-items: center; gap: 18px; padding: 12px 0; cursor: pointer; list-style: none; }
details.grandes-lignes > summary::-webkit-details-marker { display: none; }
details.grandes-lignes > summary h2 { font-size: 15px; margin: 0; white-space: nowrap; }
.lignes-resume { flex: 1; min-width: 0; font-size: 13px; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lignes-resume b { color: var(--marque-primaire); font-size: 11px; margin: 0 4px 0 10px; }
.lignes-resume b:first-child { margin-left: 0; }
.lignes-ouvrir { font-size: 13px; font-weight: 500; color: var(--marque-primaire); white-space: nowrap; }
.lignes-ouvrir::after { content: " ▾"; }
details[open] .lignes-ouvrir::after { content: " ▴"; }
details[open] .lignes-resume { visibility: hidden; }
details.grandes-lignes .lignes { padding-bottom: 16px; }
details.grandes-lignes .lignes li { background: var(--fond); padding: 12px 14px; }
.tdb-haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: stretch; }
.tdb-haut .a-faire { margin-bottom: 0; padding: 16px 20px; }
.tdb-haut .a-faire h2 { font-size: 18px; }
.tdb-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
.tdb-chiffres .stat-card { padding: 12px 14px; }
.tdb-chiffres .stat-detail { margin-top: 2px; }
.tdb-bas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 16px; align-items: stretch; }
.tdb-bas > .card { margin-bottom: 0; }
.tdb-bas .competences { grid-template-columns: 1fr; gap: 14px; }
.tdb-bas .barres { gap: 8px; }
.tdb-bas .courbe-corps { height: 110px; }
.tdb-bas .competences-bilan { margin-top: 12px; padding-top: 10px; }
.tdb-bas #dernieres td, .tdb-bas #dernieres th { padding-top: 8px; padding-bottom: 8px; }
.tdb-bas #dernieres table { table-layout: fixed; }
.tdb-bas #dernieres th:nth-child(2), .tdb-bas #dernieres th:nth-child(3) { width: 64px; }
.tdb-bas #dernieres th:nth-child(4) { width: 70px; }
.tdb-bas .liste-pied { flex-wrap: wrap; gap: 6px; }
@media (max-width: 1280px) { .tdb-haut { grid-template-columns: 1fr; } .tdb-bas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tdb-bas > :last-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { .tdb-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tdb-bas { grid-template-columns: 1fr; } .lignes-resume { display: none; } }

/* Credits : l'en-tete dans un cadre (duree d'une seance + solde) */
.credits-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px 24px; margin-bottom: 20px; }
.credits-intro .page-title { margin-bottom: 2px; }
.credits-intro .page-subtitle { margin: 0; max-width: none; }
.credits-intro > div:first-child { flex: 1; min-width: 0; }
.credits-intro .credits-phrase { flex-basis: 100%; font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =====================================================
   LES TROIS SERVICES : audio (vert), tuteur IA (marque), formateur en visio (orange)
   ===================================================== */
.service-audio { --service: var(--service-audio); }
.service-ia { --service: var(--service-ia); }
.service-formateur { --service: var(--service-formateur); }
.service { margin-bottom: 20px; }
.service:last-child { margin-bottom: 0; }
.service-titre { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--service); }
.service-titre::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--service); }
.service-titre small { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--texte-3); }
.service .avatar-card { border-left: 4px solid var(--service); }
.service .avatar-card-img { background: var(--service); }
.service .avatar-card.selected { border-color: var(--service); background: color-mix(in srgb, var(--service) 8%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--service) 16%, transparent); }
.service .avatar-card.selected .avatar-card-check { border-color: var(--service); background: var(--service); }
.formateur-carte { color: var(--texte); text-decoration: none !important; }
.formateur-voir { flex-shrink: 0; padding: 5px 12px; border-radius: 999px; background: var(--service); color: #fff; font-size: 12px; font-weight: 600; }
.badge.service-formateur { color: var(--service-formateur); border-color: color-mix(in srgb, var(--service-formateur) 30%, transparent); background: color-mix(in srgb, var(--service-formateur) 8%, var(--surface)); }
.btn.service-formateur { background: var(--service-formateur); color: #fff; }
.form-en-ligne { display: inline-block; }
/* Fiche du formateur en tete de « Reserver » */
.formateur-fiche { border-left: 4px solid var(--service-formateur); }
.formateur-fiche .card-body { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.formateur-photo { width: 88px; height: 88px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--service-formateur); color: #fff; font-size: 28px; font-weight: 700; }
.formateur-photo img { width: 100%; height: 100%; object-fit: cover; }
.formateur-texte { flex: 1; min-width: 240px; }
.formateur-texte h2 { font-size: 20px; margin: 2px 0 4px; }
.service-etiquette { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--service-formateur); }
.formateur-presentation { margin-top: 8px; color: var(--texte-2); max-width: 760px; }
.fiche-tarifs { list-style: none; margin: 0; padding: 0; border: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.fiche-tarifs li { min-width: 76px; padding: 8px 12px; border: 1px solid var(--bord); border-radius: 10px; text-align: center; }
.fiche-tarifs b { display: block; font-size: 16px; }
.fiche-tarifs span { font-size: 12px; color: var(--texte-3); }
.formateur-pied { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--bord); }
/* Credits : chaque carte a la couleur de son service ; la 3e mene a la reservation */
.modes.modes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .modes.modes-3 { grid-template-columns: 1fr; } }
.mode-carte.service-audio .mode-trait, .mode-carte.service-formateur .mode-trait, .mode-carte.service-ia .mode-trait { stroke: var(--service); }
.mode-carte.service-ia .mode-ecran { fill: color-mix(in srgb, var(--service) 10%, var(--surface)); stroke: var(--service); }
.mode-carte b .mode-duree { background: var(--service, var(--marque-primaire)); }
#mode-audio:checked ~ .modes label[for=mode-audio] { border-color: var(--service-audio); background: color-mix(in srgb, var(--service-audio) 7%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--service-audio) 15%, transparent); }
a.mode-carte { color: inherit; text-decoration: none !important; }
a.mode-carte:hover { border-color: var(--service); }
.mode-carte .mode-lien { display: block; margin-top: 4px; font-weight: 600; color: var(--service); }

/* Bas du menu de l'apprenant : ce qu'il reste, une jauge par service */
.lateral-solde { padding: 12px 6px 4px; margin-top: 8px; border-top: 1px solid color-mix(in srgb, var(--marque-lateral-texte) 12%, transparent); display: flex; flex-direction: column; gap: 6px; }
.lateral-solde-titre { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); padding: 0 6px; }
.solde-ligne { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 6px; border-radius: 8px; color: inherit; text-decoration: none !important; font-size: 13px; }
.solde-ligne:hover { background: color-mix(in srgb, var(--marque-lateral-texte) 6%, transparent); }
.solde-ligne span { display: flex; align-items: center; gap: 7px; }
.solde-ligne span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--service); }
.solde-ligne b { font-size: 12px; font-weight: 600; color: var(--service); }
.solde-ligne progress { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border: 0; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--marque-lateral-texte) 10%, transparent); }
.solde-ligne progress::-webkit-progress-bar { background: color-mix(in srgb, var(--marque-lateral-texte) 10%, transparent); border-radius: 999px; }
.solde-ligne progress::-webkit-progress-value { background: var(--service); border-radius: 999px; }
.solde-ligne progress::-moz-progress-bar { background: var(--service); border-radius: 999px; }
.solde-offert { font-size: 12px; opacity: .75; padding: 0 6px; }
.lateral-solde { margin-top: auto; }
.lateral-solde + .lateral-pied { margin-top: 10px; }
.cout-seances { display: block; font-size: 11px; font-weight: 600; color: var(--service-formateur); }

/* Solde du particulier : une pastille par seance possible (meme solde, deux usages) */
.solde-pastilles { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.solde-pastilles i { width: 12px; height: 6px; border-radius: 3px; background: var(--service); }
.solde-pastilles.vide i { width: 100%; background: color-mix(in srgb, var(--marque-lateral-texte) 10%, transparent); }
.solde-pastilles em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--service); margin-left: 2px; }
.solde-ou { margin: -4px 0; padding: 0 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; opacity: .5; text-align: center; }

/* =====================================================
   RESERVER : planning de la semaine (client/booking.php)
   Une colonne par jour, les creneaux en cartes colorees par service.
   ===================================================== */
.service-visio { --service: var(--info); }
.calendrier-tete { flex-wrap: wrap; gap: 10px 16px; }
.calendrier-nav { display: flex; align-items: center; gap: 8px; margin-right: auto; margin-left: 12px; }
.calendrier-nav b { min-width: 150px; text-align: center; font-size: 14px; }
.calendrier-nav .btn { min-width: 34px; justify-content: center; font-size: 16px; line-height: 1; }
.calendrier-nav [aria-disabled="true"] { opacity: .4; pointer-events: none; }
.calendrier-vide { padding: 14px 20px 0; color: var(--texte-2); font-size: 14px; }
.calendrier-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 14px; }
.calendrier-jour { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 10px; background: var(--fond); min-height: 180px; }
.calendrier-jour h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 2px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3); }
.calendrier-jour h3 b { font-size: 18px; color: var(--texte); letter-spacing: 0; }
.calendrier-jour.aujourdhui { background: var(--marque-primaire-doux); }
.calendrier-jour.aujourdhui h3, .calendrier-jour.aujourdhui h3 b { color: var(--marque-primaire); }
.calendrier-jour.passe { opacity: .55; }
.calendrier-rien { color: var(--texte-3); text-align: center; margin: auto 0; }
/* Lot E1 : jour ferme (ferie, fermeture, conge) — hachures ET libelle, jamais la couleur seule. */
.calendrier-jour.ferme { background-image: repeating-linear-gradient(135deg, transparent 0 8px, var(--bord) 8px 10px); }
.calendrier-ferme { margin: 0; padding: 4px 6px; border-radius: 6px; background: var(--surface); color: var(--texte-2); font-size: 12px; line-height: 1.35; }
.calendrier-creneau { display: flex; flex-direction: column; gap: 3px; padding: 8px 9px; border-radius: 9px; background: var(--surface); border: 1px solid var(--bord); border-left: 4px solid var(--service, var(--marque-primaire)); font-size: 12px; box-shadow: var(--ombre); }
.calendrier-creneau time { font-weight: 700; font-size: 12.5px; color: var(--service, var(--texte)); font-variant-numeric: tabular-nums; }
.calendrier-titre { font-size: 12.5px; line-height: 1.3; color: var(--texte); }
.calendrier-qui { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--texte-2); }
.calendrier-qui img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.calendrier-qui a { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendrier-detail { color: var(--texte-3); }
.calendrier-creneau form, .calendrier-creneau .badge, .calendrier-creneau > .text-sm { margin-top: 4px; }
.calendrier-creneau form { display: block !important; }
.calendrier-creneau .btn { width: 100%; justify-content: center; white-space: normal; line-height: 1.25; padding-top: 5px; padding-bottom: 5px; }
.calendrier-creneau .badge { align-self: flex-start; }
@media (max-width: 1100px) { .calendrier-semaine { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) {
    .calendrier-semaine { grid-template-columns: 1fr; }
    .calendrier-jour { min-height: 0; }
    .calendrier-jour.vide { display: none; }
    .calendrier-nav { margin-left: 0; width: 100%; justify-content: center; }
}

/* =====================================================
   ESPACE FORMATEUR et BOURSE DES FORMATEURS
   ===================================================== */
.portail-page { background: var(--fond); min-height: 100vh; }
.portail { max-width: 1080px; margin: 0 auto; padding: 48px 16px; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 40px; align-items: start; }
.portail-carte { margin: 0; }
.portail-carte .card-body { display: flex; flex-direction: column; gap: 12px; padding: 28px; }
.portail-carte h1 { font-size: 22px; margin: 6px 0 0; }
.portail-form { display: flex; flex-direction: column; gap: 4px; }
.portail-form .btn.bloc { width: 100%; justify-content: center; margin-top: 8px; }
.portail-liens { text-align: center; margin: 4px 0 0; }
.portail-presentation { padding-top: 12px; }
.portail-presentation h2 { font-size: 26px; line-height: 1.25; margin: 6px 0 18px; }
.portail-etapes { list-style: none; counter-reset: etape; display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; padding: 0; }
.portail-etapes li { counter-increment: etape; position: relative; padding-left: 46px; color: var(--texte-2); font-size: 14px; line-height: 1.5; }
.portail-etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--service-formateur) 12%, var(--surface)); color: var(--service-formateur); font-weight: 700; }
.portail-etapes b { display: block; color: var(--texte); font-size: 15px; }
@media (max-width: 860px) { .portail { grid-template-columns: 1fr; padding: 20px 16px; gap: 24px; } .portail-presentation h2 { font-size: 21px; } }
.champ-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.grandes-lignes-fixes { margin-top: 20px; }
.grandes-lignes-fixes h2 { font-size: 17px; margin-bottom: 12px; }
.calendrier-reserve { color: var(--succes); }
.calendrier-creneau.reserve { background: color-mix(in srgb, var(--succes) 5%, var(--surface)); }
.formateur-acces { border-top: 1px solid var(--bord); }
.formateur-acces h3 { font-size: 14px; margin: 0 0 6px; }
.formateur-acces form { margin: 8px 0; }

/* =====================================================
   DEMO DU PRODUIT (demo.php) et bandeau du mode demo
   ===================================================== */
.demo-bandeau { position: sticky; top: 0; z-index: 3000; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; padding: 8px 16px; background: #18181b; color: #fff; font-size: 13px; }
.demo-bandeau a { color: #fde68a; }
.demo-bandeau form { display: inline; margin: 0; }
.demo-bandeau button { border: 0; border-radius: 99px; padding: 4px 12px; background: #fde68a; color: #18181b; font: inherit; font-weight: 600; cursor: pointer; }
.demo-page { background: var(--fond); min-height: 100vh; }
.demo { max-width: 1200px; margin: 0 auto; padding: 40px 16px; }
.demo-tete { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.demo-tete h1 { font-size: 28px; margin: 10px 0 8px; }
.demo-tete p { color: var(--texte-2); }
.demo-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .demo-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .demo-grille { grid-template-columns: 1fr; } }
.demo-carte { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--bord); border-top: 5px solid var(--demo, var(--marque-primaire)); box-shadow: var(--ombre); }
.demo-carte h2 { font-size: 18px; margin: 0; color: var(--demo); }
.demo-carte > p { font-size: 13px; color: var(--texte-2); margin: 0 0 6px; }
.demo-carte form { margin: 0; }
.demo-superadmin { --demo: #18181b; }
.demo-partenaire { --demo: var(--info); }
.demo-formateur { --demo: var(--service-formateur); }
.demo-apprenant { --demo: var(--marque-primaire); }
.demo-compte { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 12px; border: 1px solid var(--bord); border-left: 4px solid var(--demo); border-radius: 10px; background: var(--surface); font: inherit; text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.demo-compte:hover { background: color-mix(in srgb, var(--demo) 6%, var(--surface)); border-color: var(--demo); }
.demo-compte b { font-size: 14px; color: var(--texte); }
.demo-compte span { font-size: 12px; color: var(--texte-3); }
.demo-pied { text-align: center; margin-top: 24px; color: var(--texte-3); }
.demo-sous-titre { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--bord); }
.demo-note { font-size: 12px; color: var(--texte-3); margin: 0; }

/* Espace organisme (2026-10-04) */
.service-alerte { --service: var(--danger); }
.lignes.lignes-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1280px) { .lignes.lignes-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .lignes.lignes-6 { grid-template-columns: 1fr; } }
.rdv-liste li[class*="service-"] .rdv-date { background: color-mix(in srgb, var(--service) 12%, var(--surface)); color: var(--service); }
.rdv-liste a { color: inherit; font-weight: 500; }
.stat-val.text-red { color: var(--danger); }
/* Organisme : abonnement et calculette (org/buy_pack.php) */
.abonnement-prix { font-size: 15px; margin: 0 0 10px; }
.abonnement-prix b { font-size: 30px; letter-spacing: -.02em; }
.calculette-rapide small { display: block; font-size: 10.5px; font-weight: 700; color: var(--succes); }
.calculette-conseil { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--alerte-fond); color: var(--alerte); }
.paliers tr[class*="service-"] td:first-child { box-shadow: inset 4px 0 0 var(--service); }
.tableau-note { padding: 10px 20px 14px; margin: 0; }

/* Demo : simulations « qui paie quoi » */
.simulations { margin-top: 40px; }
.sim-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .sim-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sim-grille { grid-template-columns: 1fr; } }
.sim-carte { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--bord); border-top: 5px solid var(--demo); box-shadow: var(--ombre); }
.sim-direct { --demo: var(--marque-primaire); }
.sim-partenaire { --demo: var(--info); }
.sim-formateur { --demo: var(--service-formateur); }
.sim-canal { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--demo); }
.sim-carte h3 { font-size: 15.5px; margin: 0; }
.sim-detail { font-size: 12.5px; color: var(--texte-3); margin: 0 0 4px; }
.sim-lignes { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; margin: 0; font-size: 13px; }
.sim-lignes dt { color: var(--texte-2); }
.sim-lignes dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sim-lignes small { color: var(--texte-3); font-size: 11px; }
.sim-lignes .sim-cout { font-size: 12px; color: var(--texte-3); }
.sim-lignes .sim-marge { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--bord); font-size: 14px; color: var(--succes); }
.sim-lignes dt.sim-marge { color: var(--texte); font-weight: 600; }
.sim-lignes dd.sim-marge.negatif { color: var(--danger); }
.sim-note { font-size: 11.5px; color: var(--texte-3); margin: 4px 0 0; }
.sim-hypotheses { margin-top: 16px; padding: 14px 18px; border-radius: 12px; background: var(--alerte-fond); color: var(--texte-2); font-size: 13px; line-height: 1.6; }
.sim-negocie { --demo: #0e7490; }
.sim-sous-titre { font-size: 16px; margin: 28px 0 12px; }

/* =====================================================
   PAGES DE PRESENTATION PUBLIQUES (partenaires.php, formateurs.php)
   ===================================================== */
.vitrine-barre { max-width: 1200px; margin: 0 auto; padding: 18px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vitrine-barre .login-logo { text-decoration: none; color: var(--texte); }
.vitrine-barre nav { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; font-size: 14px; }
.vitrine-barre nav a:not(.btn) { color: var(--texte-2); }
.vitrine-hero { text-align: center; max-width: 860px; margin: 24px auto 8px; padding: 0 0 8px; }
.vitrine-hero h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.12; letter-spacing: -.02em; margin: 10px 0 18px; }
.vitrine-hero h1 em { font-style: normal; color: var(--marque-primaire); }
.vitrine-chapo { font-size: 16.5px; line-height: 1.6; color: var(--texte-2); margin: 0 auto 12px; max-width: 760px; }
.vitrine-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.vitrine-section { margin-top: 48px; }
.vitrine-section > h2 { font-size: 24px; text-align: center; margin: 0 0 20px; }
.vitrine-etapes { max-width: 820px; margin: 0 auto; }
.vitrine-prix { font-size: 30px; letter-spacing: -.02em; color: var(--demo); }
.vitrine-table { margin: 6px 0; }
.vitrine-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.vitrine-faq details { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 12px 16px; }
.vitrine-faq summary { cursor: pointer; font-weight: 600; }
.vitrine-faq p { margin: 10px 0 2px; color: var(--texte-2); line-height: 1.6; }
.vitrine-fin { margin-top: 56px; padding: 32px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--bord); }
.vitrine-fin h2 { font-size: 24px; margin: 0 0 8px; }
.vitrine-pied { text-align: center; padding: 28px 16px 36px; color: var(--texte-3); font-size: 13px; }
.sim-audio { --demo: var(--service-audio); }
.sim-carte .offre-inclus { margin: 4px 0 0; }
.sim-lignes .sim-credit { font-size: 12.5px; color: var(--demo); }

/* ===== Marketplace des formateurs (/nos-formateurs/) et avis ===== */
.etoiles { color: var(--alerte); letter-spacing: 1px; }
.note-formateur { display: block; font-size: 12px; color: var(--texte-2); }
.note-grande { font-size: 15px; margin: 0 0 4px; }
.note-grande b { font-size: 34px; letter-spacing: -.02em; }
.fiche-lignes { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.fiche-lignes dt { color: var(--texte-2); }
.fiche-lignes dd { margin: 0; }
.cellule-texte { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marche-filtres { max-width: 1100px; margin: 8px auto 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 14px 16px; border: 1px solid var(--bord); border-radius: 14px; background: var(--surface); }
.marche-filtres .form-field { margin: 0; min-width: 150px; }
.marche-filtres .case { margin: 0 0 8px; }
.marche-compte { max-width: 1100px; margin: 12px auto; }
.marche-grille { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .marche-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .marche-grille { grid-template-columns: 1fr; } }
.marche-carte { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--bord); border-top: 5px solid var(--service-formateur, var(--marque-primaire)); box-shadow: var(--ombre); }
.marche-lien { display: flex; gap: 14px; align-items: center; color: inherit; text-decoration: none; }
.marche-lien:hover .marche-nom { text-decoration: underline; }
.marche-photo { flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--fond); font-size: 30px; font-weight: 600; color: var(--texte-2); }
.marche-photo img { width: 100%; height: 100%; object-fit: cover; }
.marche-photo.grande { width: 140px; height: 140px; font-size: 46px; }
.marche-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.marche-nom { font-size: 17px; }
.marche-langues { font-size: 13.5px; color: var(--texte-2); }
.marche-note { font-size: 13.5px; margin: 0; }
.marche-specialites { margin: 0; color: var(--texte-2); }
.marche-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.marche-pied { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--bord); }
.marche-prix { font-size: 20px; letter-spacing: -.01em; }
.marche-ariane { max-width: 1100px; margin: 16px auto 0; }
.marche-fiche { max-width: 1100px; margin: 12px auto 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .marche-fiche { grid-template-columns: 1fr; } }
.marche-fiche-principal { background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; padding: 22px; }
.marche-fiche-principal h2 { font-size: 19px; margin: 24px 0 10px; }
.marche-fiche-tete { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.marche-fiche-tete > div { flex: 1 1 260px; min-width: 0; }
.marche-fiche-tete h1 { font-size: clamp(26px, 3.4vw, 36px); margin: 4px 0 6px; letter-spacing: -.02em; }
.marche-fiche-tete p { margin: 0 0 6px; }
.marche-presentation { line-height: 1.65; }
.marche-fiche-cote { position: sticky; top: 16px; }
.marche-fiche-cote .bloc { margin-top: 6px; }
.marche-criteres { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.marche-criteres > div { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 10px; align-items: center; }
.marche-criteres dt { font-size: 14px; }
.marche-criteres dd { margin: 0; display: flex; align-items: center; gap: 10px; }
.marche-criteres progress { flex: 1; max-width: 260px; height: 9px; appearance: none; border: 0; border-radius: 99px; background: var(--fond); overflow: hidden; }
.marche-criteres progress::-webkit-progress-bar { background: var(--fond); border-radius: 99px; }
.marche-criteres progress::-webkit-progress-value { background: var(--alerte); border-radius: 99px; }
.marche-criteres progress::-moz-progress-bar { background: var(--alerte); border-radius: 99px; }
.marche-avis { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.marche-avis li { padding: 12px 14px; border: 1px solid var(--bord); border-radius: 12px; }
.marche-avis p { margin: 0; line-height: 1.55; }
.marche-avis-tete { font-size: 13.5px; color: var(--texte-2); margin-bottom: 4px !important; }
.avis-form { display: flex; flex-direction: column; gap: 12px; }
.avis-critere { border: 0; margin: 0; padding: 0; }
.avis-critere legend { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.avis-echelle { display: flex; gap: 6px; flex-wrap: wrap; }
.avis-echelle label { position: relative; }
.avis-echelle input { position: absolute; opacity: 0; inset: 0; }
.avis-echelle span { display: grid; place-items: center; min-width: 44px; height: 40px; padding: 0 10px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); font-weight: 600; cursor: pointer; }
.avis-echelle input:checked + span { background: var(--alerte-fond); border-color: var(--alerte); color: var(--alerte); }
.avis-echelle input:focus-visible + span { outline: 2px solid var(--marque-primaire); outline-offset: 2px; }
.conditions { max-width: 820px; margin-left: auto; margin-right: auto; }
.conditions h1 { font-size: clamp(26px, 3.4vw, 36px); }
.conditions h2 { font-size: 18px; margin: 26px 0 8px; }
.conditions p, .conditions li { line-height: 1.65; }

/* ===== Langue de l'interface : selecteur, ecriture de droite a gauche ===== */
.langues { position: relative; font-size: 13px; }
.langues summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--bord); border-radius: 8px; background: var(--surface); color: var(--texte-2); white-space: nowrap; }
.langues summary::-webkit-details-marker { display: none; }
.langues summary > span { font-weight: 600; font-size: 11px; letter-spacing: .04em; color: var(--texte-3); }
.langues ul { position: absolute; z-index: 80; inset-inline-end: 0; top: calc(100% + 4px); min-width: 170px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--bord); border-radius: 10px; box-shadow: var(--ombre-haute); }
.langues li a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--texte); text-decoration: none; }
.langues li a:hover, .langues li a:focus-visible { background: var(--fond); }
.langues li a[aria-current] { font-weight: 600; color: var(--marque-primaire); }
.langues-lateral { margin: 8px 8px 0; }
.langues-lateral summary { width: 100%; justify-content: flex-start; background: transparent; color: inherit; border-color: color-mix(in srgb, var(--marque-lateral-texte) 18%, transparent); }
.langues-lateral ul { top: auto; bottom: calc(100% + 4px); inset-inline-start: 0; inset-inline-end: auto; }
.portail-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jauge-traduction { width: 140px; height: 8px; vertical-align: middle; }
.lignes-simples { margin: 0 0 10px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }

[dir="rtl"] .lateral { border-right: 0; border-left: 1px solid var(--bord); }
[dir="rtl"] table th { text-align: right; }
[dir="rtl"] .entree .compte, [dir="rtl"] .snav-badge { margin-left: 0; margin-right: auto; }
[dir="rtl"] select { padding-right: 12px; padding-left: 34px; background-position: left 12px center; }
[dir="rtl"] .a-faire { border-left: 1px solid var(--bord); border-right: 4px solid var(--marque-primaire); }
[dir="rtl"] .aide-texte ul, [dir="rtl"] .aide-texte ol, [dir="rtl"] .offre-inclus li { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .offre-inclus li::before { left: auto; right: 2px; }
[dir="rtl"] .visite-compteur { margin-right: 0; margin-left: auto; }
[dir="rtl"] .visite-passer { right: auto; left: 14px; }
[dir="rtl"] .logo-dot, [dir="rtl"] .marque-texte span { margin-left: 0; margin-right: 3px; }
[dir="rtl"] table td .btn + .btn, [dir="rtl"] table td .btn + form, [dir="rtl"] table td form + .btn, [dir="rtl"] table td form + form { margin-left: 0; margin-right: 4px; }
@media (max-width: 900px) {
    [dir="rtl"] .lateral { inset: 0 0 0 auto; transform: translateX(100%); }
}

/* ===== Inscription d'un organisme (org/inscription.php), par etapes ===== */
.inscription-tete { max-width: 1100px; margin: 28px auto 8px; text-align: center; }
.inscription-tete h1 { font-family: 'Hanken Grotesk', var(--marque-police); font-size: clamp(30px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -.025em; margin: 10px 0 14px; }
.inscription-tete h1 em { font-style: normal; color: var(--marque-primaire); }
.inscription-etapes { max-width: 1100px; margin: 24px auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: etape; }
.inscription-etapes li { position: relative; display: flex; }
.inscription-etapes li { align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bord); background: var(--surface); color: var(--texte-3); font-weight: 600; font-size: 14px; }
.inscription-etapes li a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 10px; width: 100%; }
.inscription-etapes li.faite { color: var(--texte); border-color: color-mix(in srgb, var(--succes) 35%, var(--bord)); }
.inscription-etapes li.actuelle { color: var(--marque-primaire-texte); background: var(--marque-primaire); border-color: var(--marque-primaire); box-shadow: 0 10px 30px color-mix(in srgb, var(--marque-primaire) 30%, transparent); }
.inscription-num { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fond); color: var(--texte-2); font-size: 13px; }
.inscription-etapes li.faite .inscription-num { background: var(--succes-fond); color: var(--succes); }
.inscription-etapes li.actuelle .inscription-num { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 700px) { .inscription-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inscription-grille { max-width: 1100px; margin: 0 auto 40px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .inscription-grille { grid-template-columns: 1fr; } }
.inscription-carte .card-body { display: flex; flex-direction: column; gap: 14px; }
.inscription-carte h2 { font-size: 22px; margin: 0; }
.inscription-carte h3 { font-size: 16px; margin: 8px 0 0; }
.inscription-siret { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inscription-siret .form-field { flex: 1 1 240px; margin: 0; }
.inscription-bloc { border: 1px solid var(--bord); border-radius: 12px; padding: 12px 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.inscription-bloc legend { font-weight: 600; padding: 0 6px; }
.inscription-offre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .inscription-offre { grid-template-columns: 1fr; } }
.inscription-offre > div { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: var(--marque-primaire-doux); }
.inscription-chiffre { font-family: 'Hanken Grotesk', var(--marque-police); font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--marque-primaire); }
.inscription-offre span:not(.inscription-chiffre) { font-size: 13px; color: var(--texte-2); }
.inscription-recap dd a { margin-inline-start: 6px; font-size: 13px; }
.inscription-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.inscription-cote { display: flex; flex-direction: column; gap: 14px; }
.inscription-cote h2 { font-size: 16px; margin: 0 0 10px; }
.inscription-fin { max-width: 760px; margin: 28px auto 48px; }
.inscription-fin h1, .inscription-fin h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; }
.inscription-suite { margin: 16px 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; }
.btn-lien { background: none; border: 0; padding: 0; color: var(--texte-3); text-decoration: underline; cursor: pointer; font: inherit; }
.btn-lien:hover { color: var(--texte); }

/* --- Devoirs (resultat, tableau de bord, catalogue des cours) ------------- */
.devoirs-liste { list-style: none; margin: 0; padding: 0; }
.devoir { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--bord); }
.devoir:first-child { border-top: 0; padding-top: 0; }
.devoir-texte { display: grid; gap: 2px; min-width: 0; }
.devoir-texte a { font-weight: 600; }
.devoir.fait .devoir-texte a { color: var(--texte-2); }
.devoir .btn, .devoir .badge { flex: none; }

/* --- Cours des formateurs (fiche publique) -------------------------------- */
.marche-cours { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.marche-cours li { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); }
.marche-cours a { font-weight: 600; }

/* Avatars (super-admin) : cases de selection, photo agrandie, photo de la fiche (2026-10-09) */
.barre-masse { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.col-case { width: 32px; }
.col-case input { width: 16px; height: 16px; cursor: pointer; }
.vignette-agrandir { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 50%; line-height: 0; }
.vignette-agrandir:focus-visible { outline: 2px solid var(--marque-primaire); outline-offset: 2px; }
.dialogue-image { max-width: min(720px, calc(100% - 32px)); }
.dialogue-image img { display: block; width: 100%; height: auto; max-height: calc(100vh - 200px); object-fit: contain; border-radius: 10px; background: var(--bord); }
.fiche-photo { margin-bottom: 20px; }
.fiche-photo .vignette-agrandir { border-radius: 12px; }
.fiche-photo img { width: 160px; height: 160px; object-fit: cover; border-radius: 12px; border: 1px solid var(--bord); }
.fiche-photo-depot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.fiche-photo-depot [data-recadrage-erreur] { flex-basis: 100%; }

/* Code a copier (org/avatar-integre.php, 2026-10-10) */
.code-copie { display: block; user-select: all; word-break: break-all; font-size: 13px; background: var(--survol); border: 1px solid var(--bord); border-radius: 8px; padding: 8px 10px; margin-top: 6px; }
.code-bloc { background: var(--survol); border: 1px solid var(--bord); border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: 12.5px; line-height: 1.5; margin: 10px 0; }

/* Grilles d'evaluation (partials/_grilles.php, grilleHtml) */
.grille-resultat { margin: 12px 0; overflow-x: auto; }
.grille-titre { margin: 0 0 6px; }
.grille-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.grille-table th, .grille-table td { padding: 6px 8px; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: top; }
.grille-table td.num, .grille-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Saisie compacte : 8 criteres tiennent a l'ecran (2026-10-10, retour de Pascal). */
.grille-saisie { width: 100%; border-collapse: collapse; table-layout: fixed; }
.grille-saisie th { text-align: left; font-size: 13px; color: var(--texte-2); padding: 4px 6px; }
.grille-saisie th:nth-child(1) { width: 32%; }
.grille-saisie th:nth-child(3), .grille-saisie th:nth-child(4) { width: 84px; }
.grille-saisie td { padding: 3px 6px; vertical-align: middle; border: 0; }
.grille-saisie input[type="text"], .grille-saisie input[type="number"], .grille-saisie textarea { width: 100%; padding: 6px 8px; font-size: 14px; }
.grille-saisie textarea { min-height: 0; height: 2.4em; resize: vertical; line-height: 1.3; }
@media (max-width: 760px) {
  .grille-saisie, .grille-saisie tbody, .grille-saisie tr, .grille-saisie td { display: block; width: 100%; }
  .grille-saisie thead { display: none; }
  .grille-saisie tr { border-bottom: 1px solid var(--bord); padding: 6px 0; }
}
.demo-studio { --demo: var(--service-formateur); }
.demo-avatar { --demo: var(--info); }
/* Fiche de coordonnees (superadmin/coordonnees.php) */
.fiche-dl { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px 16px; margin: 0; }
.fiche-dl dt { color: var(--texte-2); }
.fiche-dl dd { margin: 0; }
@media (max-width: 600px) { .fiche-dl { grid-template-columns: 1fr; } }
/* Quatre propositions d'une question de quiz (studio/jeux.php) : bouton et champ sur la meme ligne */
.propositions { border: 0; padding: 0; margin: 0; }
.propositions legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.proposition { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.proposition input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; }
.proposition input[type="text"] { flex: 1 1 auto; min-width: 0; }
/* Avis sur les cours (partials/_avis_cours.php) */
.avis-etoiles { color: var(--texte); white-space: nowrap; }
.avis-etoiles > span[aria-hidden] { color: var(--avertissement, #b45309); letter-spacing: 1px; }
.avis-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.avis-liste li { border-bottom: 1px solid var(--bord); padding-bottom: 12px; }
.avis-liste blockquote { margin: 6px 0; padding-left: 12px; border-left: 3px solid var(--bord); color: var(--texte-2); }
.cases-ligne { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.cases-ligne .case { margin-top: 0; font-weight: 400; }

/* --- fenetre de confirmation (actions.js, data-confirmer) : remplace le confirm() du navigateur --- */
.confirmation { max-width: 480px; padding: 26px 26px 22px; border-top: 4px solid var(--marque-primaire, var(--texte)); }
.confirmation.est-danger { border-top-color: var(--danger); }
.confirmation h2 { font-size: 19px; line-height: 1.3; margin-bottom: 10px; }
.confirmation-texte { color: var(--texte-2); line-height: 1.55; margin: 0; }
.confirmation-note { font-size: 12.5px; color: var(--texte-3); margin: 14px 0 0; }
.confirmation .dialogue-actions { margin-top: 22px; }
.btn.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.btn-danger:hover { filter: brightness(.92); }
@media (max-width: 520px) { .confirmation .dialogue-actions { flex-direction: column-reverse; } .confirmation .dialogue-actions .btn { width: 100%; justify-content: center; } }

/* --- Videos de lecon en fabrication : compteur du menu (2026-10-11, assets/js/suivi-videos.js) --- */
.suivi-videos { margin: 14px 4px 4px; padding: 10px; border: 1px solid var(--info-bord); background: var(--info-fond); border-radius: var(--rayon); display: grid; gap: 8px; color: var(--texte); }
.suivi-videos[hidden] { display: none; }
.suivi-videos-t { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--info); }
.suivi-video { position: relative; display: grid; gap: 2px; padding: 8px 10px 10px; border-radius: 8px; background: var(--surface); color: inherit; text-decoration: none !important; overflow: hidden; }
.suivi-video:hover { box-shadow: var(--ombre-haute); }
.suivi-video-nom { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suivi-video-info { font-size: 12px; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.suivi-video.est-cours .suivi-video-info::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--info); margin-right: 6px; animation: suivi-pouls 1.4s ease-in-out infinite; }
.suivi-video.est-prete { background: var(--succes-fond); }
.suivi-video.est-prete .suivi-video-info { color: var(--succes); font-weight: 600; }
.suivi-video.est-echec { background: var(--danger-fond); }
.suivi-video.est-echec .suivi-video-info { color: var(--danger); font-weight: 600; }
.suivi-video-barre { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--avance, 0%); background: var(--info); transition: width 1s linear; }
.suivi-videos-fermer { justify-self: end; border: 0; background: none; color: var(--texte-2); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 2px 4px; }
@keyframes suivi-pouls { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .suivi-video.est-cours .suivi-video-info::before { animation: none; } .suivi-video-barre { transition: none; } }
.suivi-videos.est-flottant { position: fixed; right: 12px; bottom: 12px; left: 12px; z-index: 60; margin: 0; box-shadow: var(--ombre-haute); }

/* --- Anciens style="" des pages autonomes (2026-10-13) : org/contact, client/register, acces (lien refuse) --- */
.login-card.x-l480 { max-width: 480px; }
.login-card.x-l500 { max-width: 500px; }
.x-acces-refus { max-width: 520px; margin: 12vh auto; padding: 0 16px; }

/* Boutons de page accolés (2026-11-11) : deux pages d'une même rubrique (Participants : Tous / À relancer), posés dans
   la barre d'outils ; la page affichée est en noir. */
.seg-boutons { display: inline-flex; border: 1px solid var(--bord-fort); border-radius: 8px; overflow: hidden; flex: none; }
.seg-boutons a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--texte); background: var(--surface); text-decoration: none; white-space: nowrap; }
.seg-boutons a + a { border-left: 1px solid var(--bord-fort); }
.seg-boutons a:hover { background: var(--survol); text-decoration: none; }
.seg-boutons a[aria-current="page"] { background: var(--texte); color: var(--surface); }
.seg-boutons .nb-alerte { background: var(--alerte-fond); color: var(--alerte); border: 1px solid var(--alerte-bord); border-radius: 99px; padding: 0 7px; font-weight: 700; font-size: 12px; }

/* Filtres d'une liste (listeOnglets) en boutons arrondis (2026-11-11, Pascal : en texte souligné, on ne comprenait pas
   qu'ils se cliquent). Le filtre choisi est en noir, son nombre reste lisible. */
.onglets.onglets-filtres { border-bottom: 0; gap: 6px; flex-wrap: wrap; overflow: visible; margin-bottom: 14px; }
.onglets.onglets-filtres .onglet { margin: 0; padding: 5px 12px; border: 1px solid var(--bord-fort); border-radius: 99px; background: var(--surface); color: var(--texte); font-size: 13px; font-weight: 500; }
.onglets.onglets-filtres .onglet:hover { background: var(--survol); }
.onglets.onglets-filtres .onglet.actif { background: var(--texte); border-color: var(--texte); color: var(--surface); font-weight: 600; }
.onglets.onglets-filtres .onglet .nb { font-size: 12px; color: var(--texte-3); font-weight: 600; }
.onglets.onglets-filtres .onglet.actif .nb { color: var(--bord-fort); }