/* =============================================================
   INSERT — Feuille de style principale
   /assets/css/insert.css
   Chargée en premier sur toutes les pages
   ============================================================= */


/* -------------------------------------------------------------
   1. VARIABLES
   ------------------------------------------------------------ */

:root {

    /* Fonds */
    --fond-page         : #faf7f0;   /* beige chaud — toile de fond globale */
    --fond-carte        : #ffffff;   /* cartes, modales, grilles, formulaires, inputs */
    --fond-zone-alt     : #f5f1e8;   /* zones secondaires : sidebar, footer */

    /* Couleurs principales */
    --vert-primaire     : #2c6e35;   /* boutons principaux, accents forts */
    --vert-clair        : #e8f4ea;   /* fonds hover, badges */
    --vert-moyen        : #4a9455;   /* hover bouton, liens actifs */
    --texte-principal   : #1e2620;   /* texte courant, titres */
    --texte-secondaire  : #5a6b5d;   /* labels, meta, placeholders */
    --texte-doux        : #8a9e8d;   /* sous-titres, infos grises */

    /* Bordures */
    --bordure-douce     : rgba(0, 0, 0, 0.07);
    --bordure-nette     : #ddd8cc;   /* harmonisée avec le beige */
    --bordure-focus     : #2c6e35;

    /* États */
    --couleur-succes    : #2c6e35;
    --couleur-erreur    : #c0392b;
    --couleur-warning   : #d68910;
    --couleur-info      : #2471a3;

    /* Typographie */
    --police-titre      : 'Lora', Georgia, serif;
    --police-corps      : 'Source Sans 3', 'Segoe UI', sans-serif;
    --police-mono       : 'JetBrains Mono', 'Courier New', monospace;

    /* Espacements */
    --rayon             : 6px;
    --rayon-carte       : 10px;
    --sidebar-reduite   : 64px;
    --sidebar-large     : 260px;
    --chatbot-hauteur   : 360px;
    --header-hauteur    : 68px;
    --ombre-carte       : 0 2px 8px rgba(0, 0, 0, 0.07);
    --ombre-survol      : 0 4px 16px rgba(0, 0, 0, 0.11);

    /* Transitions */
    --transition        : 0.18s ease;
}

/* Ajustement dynamique quand le bandeau supervision est affiché (corrigé
   15/07/2026) : le bandeau ajoute de la hauteur sous le header, mais
   --header-hauteur restait figé à 68px pour tout le monde. La sidebar
   (position: fixed; top: var(--header-hauteur)) démarrait donc trop haut
   et le bandeau lui mangeait le haut, chevauchement visuel avec le switch
   de la sidebar. :has() recalcule la variable uniquement quand le bandeau
   existe dans la page — aucun changement pour les pages sans supervision. */
body:has(.insert-header-bandeau-supervision) {
    --header-hauteur : 104px; /* 68px header + ~36px bandeau */
}


/* -------------------------------------------------------------
   2. RESET ET BASE
   ------------------------------------------------------------ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family        : var(--police-corps);
    font-size          : 0.95rem;
    line-height        : 1.6;
    color              : var(--texte-principal);
    background-color   : var(--fond-page);
    min-height         : 100vh;
}

a {
    color           : var(--vert-primaire);
    text-decoration : none;
    transition      : color var(--transition);
}

a:hover {
    color: var(--vert-moyen);
}

h1, h2, h3, h4 {
    font-family : var(--police-titre);
    line-height : 1.25;
    color       : var(--texte-principal);
}

h1 { font-size: 2rem;   font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: 1rem;   font-weight: 600; }

p { margin-bottom: 0.75rem; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.4rem; }

img { max-width: 100%; height: auto; display: block; }


/* -------------------------------------------------------------
   3. MISE EN PAGE
   ------------------------------------------------------------ */

.insert-container {
    max-width  : 1200px;
    margin     : 0 auto;
    padding    : 0 1.5rem;
}

.insert-container-etroit {
    max-width  : 640px;
    margin     : 0 auto;
    padding    : 0 1.5rem;
}

.insert-main {
    padding    : 2rem 0;
    min-height : calc(100vh - 64px - 56px); /* hauteur header + footer */
    transition : padding-bottom var(--transition);
}

/* Décalage du contenu pour la sidebar (contexte app connecté uniquement) */
body.contexte-app .insert-main {
    margin-left : var(--sidebar-reduite);
}

/* Le bandeau supervision n'a plus besoin de ce décalage depuis la correction
   du 15/07/2026 : il fait maintenant pleinement partie du header (pleine
   largeur), la sidebar démarre en dessous des deux. Le margin-left qu'il
   avait hérité datait de l'ancien layout où le bandeau partageait la même
   ligne verticale que le haut de la sidebar — laissait un rectangle blanc
   à gauche du bandeau une fois le header corrigé. */

.texte-centre { text-align: center; }
.texte-doux   { color: var(--texte-secondaire); }
.mb-3         { margin-bottom: 1.5rem; }


/* -------------------------------------------------------------
   4. HEADER
   ------------------------------------------------------------ */

.insert-header {
    background    : var(--fond-carte);
    border-bottom : 1px solid var(--bordure-douce);
    min-height    : 68px; /* était height fixe : empêchait le bandeau supervision
                             de prendre sa place, il débordait par-dessus la sidebar */
    position      : sticky;
    top           : 0;
    z-index       : 100;
    box-shadow    : 0 1px 4px rgba(0, 0, 0, 0.06);
}

.insert-header-inner {
    display         : flex;
    align-items     : center;
    gap             : 1.5rem;
    height          : 68px; /* explicite : un % ne suit plus un parent en
                               min-height (résout à 'auto' sinon, cf. header
                               passé de height fixe à min-height le 15/07/2026) */
}

/* Logo */
.insert-header-logo img {
    height     : 52px;
    width      : auto;
    flex-shrink: 0;
}

/* Zone asso (contexte app) */
.insert-header-asso {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    gap            : 0.6rem;
    line-height    : 1.2;
    flex           : 1;
}

.insert-header-asso-texte {
    display        : flex;
    flex-direction : column;
}

.insert-header-asso-logo {
    height        : 32px;
    width         : auto;
    max-width     : 80px;
    object-fit    : contain;
    border-radius : 3px;
    flex-shrink   : 0;
}

.insert-header-asso-label {
    font-size : 0.7rem;
    color     : var(--texte-doux);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.insert-header-asso-nom {
    font-size   : 0.95rem;
    font-weight : 600;
    color       : var(--texte-principal);
}

.insert-header-doc-lien {
    display     : flex;
    align-items : center;
    color       : var(--texte-doux);
    opacity     : 0.6;
    transition  : opacity 0.2s;
    flex-shrink : 0;
}

.insert-header-doc-lien:hover {
    opacity : 1;
    color   : var(--couleur-principale);
}

/* Zone droite globale (contexte app) */
.insert-header-droite {
    display    : flex;
    align-items: center;
    gap        : 1rem;
    flex-shrink: 0;
}

/* Zone user (contexte app) */
.insert-header-user {
    display        : flex;
    flex-direction : column;
    align-items    : flex-end;
    gap            : 0.05rem;
    flex-shrink    : 0;
}

.insert-header-user-nom {
    font-size  : 0.88rem;
    font-weight: 600;
    color      : var(--texte-secondaire);
    white-space: nowrap;
}

.insert-header-user-role {
    font-size     : 0.7rem;
    color         : var(--texte-doux);
    letter-spacing: 0.03em;
    white-space   : nowrap;
}

/* Nav publique */
.insert-header-nav {
    display     : flex;
    align-items : center;
    gap         : 1.5rem;
    margin-left : auto;
}

.insert-header-nav a {
    font-size  : 0.9rem;
    color      : var(--texte-secondaire);
    transition : color var(--transition);
}

.insert-header-nav a:hover {
    color: var(--vert-primaire);
}

/* ── Supervision Super Admin ─────────────────────────────────── */

.insert-header-supervision {
    display     : flex;
    align-items : center;
    gap         : 0.5rem;
    flex-shrink : 0;
}

.insert-sa-select {
    font-family   : var(--police-corps);
    font-size     : 0.85rem;
    padding       : 0.3rem 0.6rem;
    border        : 1px solid var(--couleur-warning);
    border-radius : var(--rayon);
    background    : #fff8ee;
    color         : var(--texte-principal);
    cursor        : pointer;
    max-width     : 220px;
    outline-offset: 2px;
}

.insert-sa-select:focus {
    outline : 2px solid var(--couleur-warning);
}

.btn-petit {
    font-size     : 0.75rem;
    font-weight   : 500;
    padding       : 0.2rem 0.55rem;
    border-radius : var(--rayon);
    line-height   : 1.4;
}

.btn-supervision {
    background   : transparent;
    color        : #7a5000;
    border-color : #c8860a;
    opacity      : 0.85;
}

.btn-supervision:hover {
    background : #fff3cd;
    color      : #5a3a00;
    opacity    : 1;
}

.insert-header-bandeau-supervision {
    background  : #fff3cd;
    border-top  : 2px solid var(--couleur-warning);
    color       : #7a5000;
    font-size   : 0.82rem;
    padding     : 0.35rem 1.5rem;
    text-align  : center;
    letter-spacing: 0.01em;
}


/* -------------------------------------------------------------
   5. TOGGLE MODE SIMPLIFIÉ / COMPLET
   ------------------------------------------------------------ */

.insert-switch {
    display     : flex;
    align-items : center;
    gap         : 0.5rem;
    cursor      : pointer;
    user-select : none;
}

/* On cache la checkbox native */
.insert-switch input[type="checkbox"] {
    position : absolute;
    opacity  : 0;
    width    : 0;
    height   : 0;
}

/* Le curseur (pill) */
.insert-switch-curseur {
    position        : relative;
    display         : inline-block;
    width           : 40px;
    height          : 22px;
    background      : var(--bordure-nette);
    border-radius   : 11px;
    transition      : background var(--transition);
    flex-shrink     : 0;
}

/* La bille */
.insert-switch-curseur::after {
    content       : '';
    position      : absolute;
    top           : 3px;
    left          : 3px;
    width         : 16px;
    height        : 16px;
    border-radius : 50%;
    background    : var(--fond-carte);
    box-shadow    : 0 1px 3px rgba(0,0,0,0.2);
    transition    : transform var(--transition), background var(--transition);
}

/* Checkbox cochée = mode complet = bille à droite + fond vert */
.insert-switch input[type="checkbox"]:checked + .insert-switch-curseur {
    background: var(--vert-primaire);
}

.insert-switch input[type="checkbox"]:checked + .insert-switch-curseur::after {
    transform: translateX(18px);
}

/* Focus clavier */
.insert-switch input[type="checkbox"]:focus-visible + .insert-switch-curseur {
    outline        : 2px solid var(--bordure-focus);
    outline-offset : 2px;
}

/* Label du toggle */
.insert-switch-label {
    font-size  : 0.8rem;
    color      : var(--texte-secondaire);
    white-space: nowrap;
    min-width  : 6rem;
    transition : color var(--transition);
}

.insert-switch:hover .insert-switch-label {
    color: var(--texte-principal);
}

.insert-switch:hover .insert-switch-curseur {
    box-shadow: 0 0 0 3px rgba(44, 110, 53, 0.12);
}


/* -------------------------------------------------------------
   6. BOUTONS
   ------------------------------------------------------------ */

.btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 0.4rem;
    padding         : 0.5rem 1.1rem;
    border-radius   : var(--rayon);
    font-family     : var(--police-corps);
    font-size       : 0.88rem;
    font-weight     : 600;
    cursor          : pointer;
    border          : 1px solid transparent;
    transition      : background var(--transition), color var(--transition),
                      border-color var(--transition), box-shadow var(--transition);
    white-space     : nowrap;
    text-decoration : none;
}

.btn-primaire {
    background   : var(--vert-primaire);
    color        : #ffffff;
    border-color : var(--vert-primaire);
}

.btn-primaire:hover {
    background   : var(--vert-moyen);
    border-color : var(--vert-moyen);
    color        : #ffffff;
    box-shadow   : 0 2px 8px rgba(44, 110, 53, 0.25);
}

.btn-secondaire {
    background   : transparent;
    color        : var(--vert-primaire);
    border-color : var(--vert-primaire);
}

.btn-secondaire:hover {
    background : var(--vert-clair);
    color      : var(--vert-primaire);
}

.btn-gros {
    padding   : 0.75rem 1.75rem;
    font-size : 1rem;
}

.btn-discret {
    background   : transparent;
    color        : var(--texte-secondaire);
    border-color : var(--bordure-nette);
}

.btn-discret:hover {
    background : var(--fond-zone-alt);
    color      : var(--texte-principal);
}

.btn-danger {
    background   : var(--couleur-erreur);
    color        : #ffffff;
    border-color : var(--couleur-erreur);
}

.btn-danger:hover {
    background   : #a93226;
    border-color : #a93226;
    color        : #ffffff;
}


/* -------------------------------------------------------------
   7. CARTES
   ------------------------------------------------------------ */

.carte {
    background    : var(--fond-carte);
    border        : 1px solid var(--bordure-douce);
    border-radius : var(--rayon-carte);
    padding       : 1.5rem;
    box-shadow    : var(--ombre-carte);
}

.carte-titre {
    font-family   : var(--police-titre);
    font-size     : 1rem;
    font-weight   : 600;
    color         : var(--texte-principal);
    margin-bottom : 1rem;
    padding-bottom: 0.6rem;
    border-bottom : 1px solid var(--bordure-douce);
}


/* -------------------------------------------------------------
   8. FORMULAIRES
   ------------------------------------------------------------ */

.champ-groupe {
    margin-bottom : 1rem;
}

.champ-groupe label {
    display       : block;
    font-size     : 0.82rem;
    font-weight   : 600;
    color         : var(--texte-secondaire);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom : 0.35rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
select,
textarea {
    width         : 100%;
    background    : var(--fond-carte);
    border        : 1px solid var(--bordure-nette);
    border-radius : var(--rayon);
    padding       : 0.5rem 0.8rem;
    font-family   : var(--police-corps);
    font-size     : 0.92rem;
    color         : var(--texte-principal);
    transition    : border-color var(--transition), box-shadow var(--transition);
}

input:focus,
select:focus,
textarea:focus {
    outline      : none;
    border-color : var(--bordure-focus);
    box-shadow   : 0 0 0 3px rgba(44, 110, 53, 0.12);
    background   : var(--fond-carte);
}

input::placeholder,
textarea::placeholder {
    color: var(--texte-doux);
}

textarea {
    resize     : vertical;
    min-height : 100px;
}


/* -------------------------------------------------------------
   9. FOOTER
   ------------------------------------------------------------ */

.insert-footer {
    background    : var(--fond-zone-alt);
    border-top    : 1px solid var(--bordure-douce);
    padding       : 1.5rem 0;
    font-size     : 0.78rem;
    color         : var(--texte-doux);
    margin-top    : 3rem;
}

.insert-footer-inner {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 1.5rem;
    flex-wrap       : wrap;
}

.insert-footer-marque {
    display     : flex;
    align-items : center;
    gap         : 0.8rem;
}

.insert-footer-logo img {
    height      : 52px;
    width       : auto;
    display     : block;
}

.insert-footer-baseline {
    margin    : 0;
    font-size : 0.78rem;
    color     : var(--texte-doux);
}

.insert-footer-liens {
    display   : flex;
    gap       : 1.25rem;
    flex-wrap : wrap;
}

.insert-footer-liens a {
    font-size  : 0.82rem;
    color      : var(--texte-secondaire);
    transition : color var(--transition);
}

.insert-footer-liens a:hover {
    color: var(--vert-primaire);
}


/* -------------------------------------------------------------
   10. UTILITAIRES
   ------------------------------------------------------------ */

.sr-only {
    position : absolute;
    width    : 1px;
    height   : 1px;
    overflow : hidden;
    clip     : rect(0,0,0,0);
}

.badge {
    display       : inline-block;
    padding       : 0.2rem 0.55rem;
    border-radius : 20px;
    font-size     : 0.75rem;
    font-weight   : 600;
    background    : var(--vert-clair);
    color         : var(--vert-primaire);
}

.separateur {
    border     : none;
    border-top : 1px solid var(--bordure-douce);
    margin     : 1.5rem 0;
}


/* -------------------------------------------------------------
   10b. SIDEBAR APP (survol/tap pour élargir)
   ------------------------------------------------------------ */

.insert-sidebar {
    position      : fixed;
    top           : var(--header-hauteur);
    left          : 0;
    bottom        : 0;
    width         : var(--sidebar-reduite);
    background    : var(--fond-zone-alt);
    border-right  : 1px solid var(--bordure-nette);
    overflow-y    : auto;
    overflow-x    : hidden;
    z-index       : 95;
    transition    : width var(--transition);
}

.insert-sidebar.insert-sidebar--large {
    width      : var(--sidebar-large);
    box-shadow : var(--ombre-survol);
}

.insert-sidebar-inner {
    display        : flex;
    flex-direction : column;
    min-height     : 100%;
}

/* ── Switch vue simple/complète en haut de sidebar ────────────── */

.insert-sidebar-switch {
    display       : flex;
    align-items   : center;
    justify-content: center;
    padding       : 1rem 0.6rem;
    border-bottom : 1px solid var(--bordure-douce);
    flex-shrink   : 0;
}

.insert-sidebar-switch .insert-switch {
    width : 100%;
}

.insert-sidebar-switch .insert-switch-label {
    min-width  : 0;
    opacity    : 0;
    width      : 0;
    overflow   : hidden;
    transition : opacity var(--transition), width var(--transition);
}

.insert-sidebar--large .insert-sidebar-switch .insert-switch-label {
    opacity : 1;
    width   : auto;
    margin-left: 0.1rem;
}

/* ── Ligne isolée Assistant IA (au-dessus du switch) ─────────────── */

.insert-sidebar-chatbot {
    border-bottom : 1px solid var(--bordure-douce);
    flex-shrink   : 0;
}

/* ── Panneau Assistant IA — ancré en bas, pousse le contenu, jamais de
   recouvrement (décision produit 11/08/2026 : préféré à un overlay
   déplaçable, plus simple et sans risque de chevauchement avec la page
   testée derrière). Reste dans le flux du DOM après première ouverture
   (attribut hidden retiré par le JS) ; translateY gère le glissement pour
   permettre une transition, contrairement à hidden qui coupe net. ────── */

body.insert-chatbot-ouvert .insert-main {
    padding-bottom : var(--chatbot-hauteur);
}

.insert-chatbot-panel {
    position        : fixed;
    left            : var(--sidebar-reduite);
    right           : 0;
    bottom          : 0;
    height          : var(--chatbot-hauteur);
    background      : var(--fond-carte);
    border-top      : 1px solid var(--bordure-nette);
    box-shadow      : 0 -4px 16px rgba(0, 0, 0, 0.1);
    z-index         : 90;
    transform       : translateY(100%);
    transition      : transform var(--transition), height var(--transition);
}

.insert-chatbot-panel.insert-chatbot-panel--redim {
    transition : none; /* pendant le drag : la hauteur suit la souris sans latence */
}

.insert-chatbot-redim {
    position     : absolute;
    top          : -5px;
    left         : 0;
    right        : 0;
    height       : 10px;
    cursor       : ns-resize;
    touch-action : none;
}

.insert-chatbot-redim::after {
    content      : '';
    position     : absolute;
    top          : 4px;
    left         : 50%;
    transform    : translateX(-50%);
    width        : 40px;
    height       : 4px;
    border-radius : 999px;
    background   : var(--bordure-nette);
}

.insert-chatbot-redim:hover::after,
.insert-chatbot-panel--redim .insert-chatbot-redim::after {
    background   : var(--vert-primaire);
}

/* display:flex uniquement hors [hidden] — sinon l'attribut hidden ne fait
   plus rien (notre display l'emporterait) et le panneau resterait dans
   l'ordre de tabulation même invisible hors écran. Le JS retire hidden à
   la première ouverture et le repose une fois la transition de fermeture
   terminée (voir assistant_ia.js), en complément de l'attribut inert. */
.insert-chatbot-panel:not([hidden]) {
    display         : flex;
    flex-direction  : column;
}

.insert-chatbot-panel--ouvert {
    transform : translateY(0);
}

.insert-chatbot-entete {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 0.75rem 1rem;
    border-bottom   : 1px solid var(--bordure-douce);
    flex-shrink     : 0;
}

.insert-chatbot-titre {
    display     : flex;
    align-items : center;
    gap         : 0.5rem;
    font-weight : 600;
    color       : var(--vert-primaire);
}

.insert-chatbot-attribution {
    font-weight    : 400;
    font-size      : 0.75rem;
    color          : var(--texte-doux);
    margin-left    : 0.25rem;
}

.insert-chatbot-fermer {
    background : none;
    border     : none;
    cursor     : pointer;
    color      : var(--texte-secondaire);
    padding    : 0.25rem;
    display    : flex;
    border-radius : var(--rayon);
}

.insert-chatbot-fermer:hover {
    background : var(--fond-zone-alt);
    color      : var(--texte-principal);
}

.insert-chatbot-messages {
    flex        : 1;
    overflow-y  : auto;
    padding     : 1rem;
    display     : flex;
    flex-direction : column;
    gap         : 0.6rem;
}

.insert-chatbot-msg {
    max-width   : 75%;
    padding     : 0.5rem 0.8rem;
    border-radius : var(--rayon-carte);
    line-height : 1.45;
    font-size   : 0.9rem;
}

.insert-chatbot-msg--user {
    align-self  : flex-end;
    background  : var(--vert-primaire);
    color       : #fff;
}

.insert-chatbot-msg--bot {
    align-self  : flex-start;
    background  : var(--fond-zone-alt);
    color       : var(--texte-principal);
}

.insert-chatbot-msg--erreur {
    align-self  : flex-start;
    background  : #fdecea;
    color       : var(--couleur-erreur);
}

.insert-chatbot-msg--attente {
    align-self  : flex-start;
    color       : var(--texte-doux);
    font-style  : italic;
}

/* Mise en forme légère des réponses du bot (12/08/2026) — voir formaterReponseBot()
   dans assistant_ia.js, qui génère ces 3 classes à partir d'une syntaxe fermée
   imposée au modèle (gras, liste à puces, petit titre de section). */
.insert-chatbot-msg--bot .insert-chatbot-msg-para {
    margin      : 0 0 0.5rem 0;
}

.insert-chatbot-msg--bot .insert-chatbot-msg-para:last-child {
    margin-bottom : 0;
}

.insert-chatbot-msg--bot .insert-chatbot-msg-titre {
    font-size   : 1rem;
    font-weight : 600;
    margin      : 0.7rem 0 0.35rem 0;
}

.insert-chatbot-msg--bot .insert-chatbot-msg-titre:first-child {
    margin-top  : 0;
}

.insert-chatbot-msg--bot .insert-chatbot-msg-liste {
    margin      : 0 0 0.5rem 0;
    padding-left : 1.2rem;
}

.insert-chatbot-msg--bot .insert-chatbot-msg-liste li {
    margin      : 0.15rem 0;
}

.insert-chatbot-form {
    display     : flex;
    gap         : 0.5rem;
    padding     : 0.75rem 1rem;
    border-top  : 1px solid var(--bordure-douce);
    flex-shrink : 0;
}

.insert-chatbot-saisie {
    flex        : 1;
    padding     : 0.5rem 0.75rem;
    border      : 1px solid var(--bordure-nette);
    border-radius : var(--rayon);
    font-family : var(--police-corps);
    font-size   : 0.9rem;
}

.insert-chatbot-saisie:focus {
    outline     : none;
    border-color : var(--bordure-focus);
}

.insert-chatbot-envoyer {
    background  : var(--vert-primaire);
    color       : #fff;
    border      : none;
    border-radius : var(--rayon);
    width       : 38px;
    display     : flex;
    align-items : center;
    justify-content : center;
    cursor      : pointer;
    flex-shrink : 0;
}

.insert-chatbot-envoyer:hover {
    background  : var(--vert-moyen);
}

.insert-chatbot-envoyer:disabled,
.insert-chatbot-saisie:disabled {
    opacity     : 0.6;
    cursor      : not-allowed;
}

.insert-chatbot-quota-libelle {
    text-align  : center;
    font-size   : 0.9rem;
    font-weight : 600;
    color       : var(--texte-principal);
    width       : 100%;
    max-width   : 320px;
    margin      : 0 auto;
    padding     : 0 1rem;
}

.insert-chatbot-quota {
    padding     : 0.15rem 1rem 0.75rem;
    flex-shrink : 0;
    width       : 100%;
    max-width   : 320px;
    margin      : 0 auto;
}

@media (max-width: 768px) {
    .insert-chatbot-panel {
        height : min(var(--chatbot-hauteur), 70vh);
    }
    .insert-chatbot-msg {
        max-width : 88%;
    }
}

/* ── Groupes de navigation ─────────────────────────────────────── */

.insert-sidebar-nav {
    display        : flex;
    flex-direction : column;
    padding        : 0.5rem 0;
}

.insert-sidebar-groupe-btn {
    display        : flex;
    align-items    : center;
    gap            : 0.85rem;
    width          : 100%;
    padding        : 0.7rem 0.85rem;
    background     : transparent;
    border         : none;
    border-left    : 3px solid transparent;
    cursor         : pointer;
    color          : var(--texte-secondaire);
    font-family    : var(--police-corps);
    font-size      : 0.85rem;
    font-weight    : 600;
    text-align     : left;
    transition     : background var(--transition), color var(--transition), border-color var(--transition);
}

@media (hover: hover) {
    .insert-sidebar-groupe-btn:hover {
        background   : var(--vert-clair);
        color        : var(--vert-primaire);
        border-left-color : var(--vert-primaire);
    }
}

.insert-sidebar-groupe-icone {
    width       : 20px;
    height      : 20px;
    flex-shrink : 0;
}

.insert-sidebar-groupe-label {
    flex        : 1;
    white-space : nowrap;
    opacity     : 0;
    width       : 0;
    overflow    : hidden;
    transition  : opacity var(--transition), width var(--transition);
}

.insert-sidebar--large .insert-sidebar-groupe-label {
    opacity : 1;
    width   : auto;
}

.insert-sidebar-chevron {
    width       : 15px;
    height      : 15px;
    flex-shrink : 0;
    opacity     : 0;
    transition  : opacity var(--transition), transform var(--transition);
}

.insert-sidebar--large .insert-sidebar-chevron {
    opacity : 1;
}

.insert-sidebar-groupe-btn[aria-expanded="true"] .insert-sidebar-chevron {
    transform : rotate(180deg);
}

.insert-sidebar-sousmenu {
    list-style : none;
    max-height : 0;
    overflow   : hidden;
    transition : max-height var(--transition);
}

.insert-sidebar--large .insert-sidebar-groupe-btn[aria-expanded="true"] + .insert-sidebar-sousmenu {
    max-height : 400px;
}

.insert-sidebar-sousmenu li a {
    display     : flex;
    align-items : center;
    gap         : 0.65rem;
    padding     : 0.5rem 0.85rem 0.5rem 2.15rem;
    font-size   : 0.85rem;
    color       : var(--texte-principal);
    white-space : normal;
    line-height : 1.25;
    transition  : background var(--transition), color var(--transition);
}

@media (hover: hover) {
    .insert-sidebar-sousmenu li a:hover {
        background : var(--vert-clair);
        color      : var(--vert-primaire);
    }
}

.insert-sidebar-sousmenu li a.lien-danger {
    color: var(--couleur-erreur);
}

.insert-sidebar-sousmenu li a.lien-danger svg {
    stroke: var(--couleur-erreur);
}

.insert-sidebar-sousmenu li a.lien-danger:hover {
    background: rgba(192, 57, 43, 0.08);
    color      : var(--couleur-erreur);
}

.insert-sidebar-sousmenu li a.actif {
    background : var(--vert-clair);
    color      : var(--vert-primaire);
    font-weight: 600;
}

.insert-sidebar-sousmenu li a svg {
    flex-shrink : 0;
    opacity     : 0.55;
}

.insert-sidebar-sousmenu li a.actif svg {
    opacity : 0.9;
}

@media (hover: hover) {
    .insert-sidebar-sousmenu li a:hover svg {
        opacity : 0.9;
    }
}

.insert-sidebar-sousmenu li a span {
    opacity    : 0;
    width      : 0;
    overflow   : hidden;
    white-space: normal;
    transition : opacity var(--transition), width var(--transition);
}

.insert-sidebar--large .insert-sidebar-sousmenu li a span {
    opacity : 1;
    width   : auto;
}


/* ── Bouton déconnexion avec icône ───────────────────────────── */

.insert-btn-deconnexion,
.insert-btn-mails {
    display     : inline-flex;
    align-items : center;
    gap         : 0.4rem;
}

.insert-deco-icone {
    flex-shrink : 0;
    display     : block;
}


/* -------------------------------------------------------------
   11. RESPONSIVE
   ------------------------------------------------------------ */

/* ── Tablette large (≤ 1100px) ──────────────────────────────── */
@media (max-width: 1100px) {

    /* Header : réduire les gaps pour tenir sur une ligne */
    .insert-header-inner {
        gap : 0.75rem;
    }

    /* Supervision SA : limiter la largeur du select */
    .insert-sa-select {
        max-width : 180px;
        font-size : 0.82rem;
    }

    /* Bloc asso : forcer sur une ligne */
    .insert-header-asso-texte {
        white-space : nowrap;
    }
}

/* ── Mobile + smartphone paysage (≤ 992px) ──────────────────── */
@media (max-width: 992px) {

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.25rem; }

    .insert-container { padding: 0 1rem; }
    .insert-main      { padding: 1.25rem 0; }

    /* Header : resserrement global */
    .insert-header {
        height     : auto;
        min-height : 60px;
    }

    .insert-header-inner {
        gap       : 0.5rem;
        padding   : 0.5rem 1rem;
        flex-wrap : nowrap;
    }

    /* Logo : réduire */
    .insert-header-logo img {
        height : 40px;
    }

    /* Bloc asso : masquer le texte entièrement */
    .insert-header-asso-texte { display: none; }
    .insert-header-asso-label { display: none; }
    .insert-header-asso-nom   { display: none; }
    .insert-header-doc-lien   { display: none; }

    /* Bloc asso : ne prend plus tout l'espace flexible */
    .insert-header-asso {
        flex : 0 0 auto;
    }

    /* User : masquer nom et rôle */
    .insert-header-user-nom  { display: none; }
    .insert-header-user-role { display: none; }
    .insert-header-user      { display: none; }

    /* Zone droite : réduire le gap */
    .insert-header-droite {
        gap : 0.4rem;
    }

    /* Bouton déconnexion : version courte */
    .insert-btn-deconnexion {
        font-size : 0.78rem;
        padding   : 0.3rem 0.6rem;
    }

    /* Supervision SA : select compact */
    .insert-sa-select {
        max-width : 140px;
        font-size : 0.78rem;
    }

    .insert-header-supervision {
        gap : 0.3rem;
    }

    /* Bandeau supervision : texte plus compact */
    .insert-header-bandeau-supervision {
        font-size : 0.78rem;
        padding   : 0.3rem 1rem;
    }

    /* Sidebar : suit --header-hauteur, mesurée en JS (insert.syncHeaderHauteur)
       plutôt qu'une valeur fixe — cf. note desktop. Avant le 15/07/2026 cette
       règle avait 60px en dur, ce qui écrasait systématiquement la variable
       ici (spécificité de media query) et empêchait toute correction du
       chevauchement sur mobile. */
    .insert-sidebar {
        top : var(--header-hauteur);
    }
}

/* ── Petit mobile (≤ 480px) ─────────────────────────────────── */
@media (max-width: 480px) {

    /* Logo encore plus petit */
    .insert-header-logo img {
        height : 34px;
    }

    /* Bouton déco : masquer le texte, afficher l'icône seule */
    .insert-btn-deconnexion .insert-deco-texte {
        display : none;
    }

    .insert-btn-deconnexion {
        padding : 0.35rem 0.5rem;
    }

    /* Bouton mails groupés : masquer le texte, afficher l'icône seule */
    .insert-btn-mails .insert-mails-texte {
        display : none;
    }

    .insert-btn-mails {
        padding : 0.35rem 0.5rem;
    }

    /* Sidebar : légèrement plus étroite sur très petit écran */
    :root {
        --sidebar-reduite : 56px;
    }
}


/* -------------------------------------------------------------
   12. VITRINE — Logo géant section hero
   ------------------------------------------------------------ */

.vitrine-logo-geant {
    max-height : 320px;
    width      : auto;
    margin     : 0 auto 1.5rem;
}

/* ============================================================
   Classes utilitaires ajoutées en v0.5.0-alpha (refactor)
   ============================================================ */

/* Lien dans une notif système (mdp, abo, onboarding) */
.notif-lien {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}


/* Autocomplétion villes — parent relatif pour le positionnement de la liste */
.villes-suggestions-wrap {
    position: relative;
}

/* Mode simplifié (v1.8.0) — masquage filtres auto / export / "afficher X
   lignes" : entièrement piloté côté PHP via les flags natifs ac_datagrid
   3.8.0+ (filtre_auto / export / show_nbr_lines => !$simplifie dans les cfg
   de grille). Plus de règle CSS de contournement ici depuis le passage à
   3.8.0 (24/07/2026) : ancienne règle body.mode-simplifie .acgr-select-wrap
   { display:none !important; } supprimée, elle contournait un problème de
   spécificité CSS au lieu de le traiter à la source. */