:root {
    --limoud-bleu: #1a5276;
    --limoud-orange: #e97132;
    --limoud-fond: #f5f6f8;
}

body {
    background: var(--limoud-fond);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Barre latérale */
.barre-laterale {
    background: var(--limoud-bleu);
    /* Hauteur de l'écran, pas davantage : sinon le menu dépasse et ne défile pas. */
    height: 100vh;
    height: 100dvh;
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.barre-laterale::-webkit-scrollbar { width: 6px; }
.barre-laterale::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 3px; }
.barre-laterale .marque {
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
}
.barre-laterale a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    display: block;
    padding: .38rem .9rem;
    border-radius: .4rem;
    font-size: .92rem;
}
.barre-laterale a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.barre-laterale a.actif { background: var(--limoud-orange); color: #fff; font-weight: 600; }
.barre-laterale .groupe-titre {
    /* Blanc a 70 % sur le bleu Limoud : contraste 4,95:1, au-dessus des 4,5:1
       exiges pour du petit texte. A 45 % (3,0:1) le titre se lisait comme un
       menu desactive au lieu d'un titre de tiroir. */
    color: rgba(255, 255, 255, .7);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: .85rem .9rem .2rem;
}
/* Groupes repliables : le titre est un bouton, avec un chevron qui pivote. */
.barre-laterale summary.groupe-titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    cursor: pointer;
    padding: .25rem 0;
    list-style: none;
    user-select: none;
}
.barre-laterale summary.groupe-titre::-webkit-details-marker { display: none; }
.barre-laterale summary.groupe-titre::after {
    content: "";
    width: .42rem;
    height: .42rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg) translate(-.1rem, .05rem);
    transition: transform .15s ease;
}
.barre-laterale details[open] > summary.groupe-titre::after {
    transform: rotate(45deg) translate(-.05rem, -.05rem);
}
/* Le titre eclairci dit « ce tiroir est ouvert » : il doit rester nettement plus
   clair que les titres replies, qui sont passes a 70 %. */
.barre-laterale summary.groupe-titre:hover,
.barre-laterale details[open] > summary.groupe-titre { color: rgba(255, 255, 255, .95); }
.barre-laterale summary.groupe-titre:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); }
/* Un groupe replié qui contient la page affichée ne peut pas exister : on le rouvre
   côté serveur. Reste à signaler qu'il y a du nouveau derrière un groupe fermé. */
.barre-laterale .pastille {
    display: inline-block;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: #dc3545;
    margin-right: .4rem;
    vertical-align: middle;
}
.contenu { margin-left: 250px; padding: 1.5rem 2rem 4rem; }

@media (max-width: 991px) {
    .barre-laterale { position: static; width: 100%; height: auto; overflow: visible; }
    .contenu { margin-left: 0; padding: 1rem; }
}

/* Cartes d'indicateurs */
.kpi { background: #fff; border-radius: .6rem; padding: 1rem 1.15rem; height: 100%;
       border: 1px solid #e6e8ec; }
.kpi .valeur { font-size: 1.85rem; font-weight: 700; line-height: 1.1; color: var(--limoud-bleu); }
.kpi .libelle { color: #6c757d; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.kpi .detail { font-size: .85rem; color: #495057; }

/* Grille de planning */
.grille { border-collapse: separate; border-spacing: 2px; font-size: .78rem; width: 100%; }
.grille th { background: #fff; padding: .35rem; text-align: center; font-weight: 600;
             border-radius: .3rem; }
.grille td { background: #fff; border-radius: .3rem; vertical-align: top; padding: .3rem .35rem;
             height: 68px; width: 8.5%; }
.grille td.vide { background: #eef0f3; }
.grille .creneau { background: #fff; font-weight: 600; text-align: center; white-space: nowrap;
                   width: 84px; }
.grille .pleine-largeur { background: #fdf3d8; text-align: center; font-weight: 600; padding: .4rem; }
.seance { border-radius: .3rem; padding: .3rem .35rem; height: 100%; }
.seance .titre { font-weight: 600; display: block; line-height: 1.15; }
.seance .qui { font-style: italic; opacity: .9; }

.bandeau-demo {
    background: var(--limoud-orange);
    color: #fff;
    text-align: center;
    font-size: .82rem;
    padding: .28rem;
}

/* Cases libres du planning : cliquables pour placer une intervention */
.grille td.case-libre { cursor: pointer; transition: background .15s; }
.grille td.case-libre:hover { background: #dbe8f3; box-shadow: inset 0 0 0 2px var(--limoud-bleu); }

/* Lignes de liste ouvrant une fiche */
tr[data-href] { cursor: pointer; }

/* Planning : glisser-déposer et mode « déplacer » */
.grille .seance[draggable="true"] { cursor: grab; }
.grille .seance.en-deplacement { opacity: .45; }
.grille .seance .actions-seance { position: absolute; top: 0; right: 0; opacity: .55; white-space: nowrap; }
.grille .seance:hover .actions-seance { opacity: 1; }
.grille .seance.selectionnee { outline: 3px solid var(--limoud-orange); outline-offset: 1px; }
.grille.glisser-en-cours td.case, .grille.mode-deplacement td.case { box-shadow: inset 0 0 0 1px #9fb6cc; cursor: copy; }
.grille td.case.cible-survol, .grille.mode-deplacement td.case:hover { background: #cfe2f3; box-shadow: inset 0 0 0 2px var(--limoud-bleu); }

/* Utilitaire absent de Bootstrap : un élément flex qui peut rétrécir (texte tronqué) */
.min-w-0 { min-width: 0; }

/* Écrans tactiles : boutons du planning assez grands pour le doigt */
@media (pointer: coarse) {
    .grille .seance .actions-seance { opacity: 1; }
    .grille .seance .actions-seance .btn { min-width: 36px; min-height: 36px; padding: .35rem .5rem !important; font-size: 1rem; }
}

/* Bandeau « voir comme » : impossible d'oublier qu'on regarde avec les yeux d'un autre */
.bandeau-observation { background: #6c3483; color: #fff; border-radius: .6rem;
                       padding: .6rem 1rem; margin-bottom: 1rem; position: sticky; top: .5rem; z-index: 30; }

/* « Mon pôle » en tête du tableau de bord */
.mon-pole .ligne-tache { padding: .4rem .5rem; border-radius: .4rem; color: inherit; }
.mon-pole a.ligne-tache:hover { background: #f4f6f8; }
a.kpi { color: inherit; transition: border-color .15s, box-shadow .15s; }
a.kpi:hover { border-color: #b8c2cc; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.kpi-alerte { border-left: 4px solid #e97132; }

/* Journal d'activité */
.ligne-journal { padding: .35rem 0; border-bottom: 1px solid #f1f3f5; }
.ligne-journal:last-child { border-bottom: 0; }
.puce-action { width: .55rem; height: .55rem; border-radius: 50%; margin-top: .45rem; flex: 0 0 auto; }
.puce-action.creation { background: #2e7d32; }
.puce-action.modification { background: #1a73e8; }
.puce-action.suppression { background: #c62828; }

/* Aperçu du trombinoscope sur l'écran de la section */
.trombi-apercu { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 1rem; }
.trombi-apercu .vignette { text-align: center; }
.trombi-apercu img, .trombi-apercu .initiales {
    width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: inline-flex;
    align-items: center; justify-content: center; background: var(--limoud-bleu); color: #fff;
    font-weight: 700; font-size: 1.4rem; }

/* Aide en ligne */
/* Flotte à droite : l'en-tête de chaque écran s'écarte au lieu d'être recouvert. */
.bouton-aide {
    float: right; margin: 0 0 .5rem .75rem; position: relative; z-index: 5;
    width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #c9d3dd;
    background: #fff; color: var(--limoud-bleu); font-weight: 700; line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.bouton-aide:hover, .bouton-aide:focus { background: var(--limoud-bleu); color: #fff; }
.texte-aide ul, .texte-aide ol { padding-left: 1.25rem; }
.texte-aide li { margin-bottom: .25rem; }
.texte-aide code { color: var(--limoud-bleu); background: #eef3f8; padding: 0 .25rem; border-radius: .2rem; }
.astuce-aide { background: #fef6e0; border-left: 3px solid var(--limoud-orange); padding: .5rem .75rem; margin: .5rem 0 1rem; border-radius: .25rem; }
.infobulle { color: var(--limoud-bleu); cursor: help; margin-left: .2rem; font-size: .9em; }

/* ── À l'impression ──────────────────────────────────────────────────────
   Un écran imprimé doit tenir sur la feuille sans la barre de gauche, sans les
   boutons et sans les couleurs de fond que l'imprimante rendrait en gris sale.
   Cette règle vaut pour TOUS les écrans : jusqu'ici chaque page qui voulait
   s'imprimer proprement devait le redire elle-même, et la plupart l'oubliaient.
   Ce qui ne doit pas sortir porte « d-print-none » (Bootstrap), ce qui ne doit
   sortir qu'à l'impression porte « d-none d-print-block ». */
@media print {
    .barre-laterale, .alert-dismissible .btn-close { display: none !important; }
    .contenu { margin-left: 0 !important; padding: 0 !important; }
    body { background: #fff; font-size: 11pt; }
    a[href]:after { content: ""; }          /* pas d'URL entre parenthèses */
    .card { border: 1px solid #ccc !important; box-shadow: none !important;
            break-inside: avoid; }
    .card-header, .table-light th, thead th { background: #f2f2f2 !important;
            -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .table { font-size: 10pt; }
    thead { display: table-header-group; }  /* l'en-tête se répète à chaque page */
    tr, .kpi { break-inside: avoid; }
    /* Un champ de saisie s'imprime comme sa valeur, pas comme une boîte. */
    input.form-control, input.form-control-sm, select.form-select, select.form-select-sm {
        border: 0 !important; padding: 0 !important; background: transparent !important;
        -webkit-appearance: none; appearance: none; font-size: 10pt;
    }
    .btn, button { display: none !important; }
}


/* Demandes d'évolution : un fil comme une messagerie */
.fil-evolution { display: flex; flex-direction: column; gap: .6rem; }
.fil-evolution .bulle { max-width: 88%; padding: .6rem .8rem; border-radius: .9rem; background: #fff;
                        border: 1px solid #e3e7eb; }
.fil-evolution .bulle-auteur { align-self: flex-start; border-bottom-left-radius: .25rem; }
.fil-evolution .bulle-validation { align-self: flex-end; background: #eaf2f8; border-color: #cfe0ee;
                                   border-bottom-right-radius: .25rem; }
.fil-evolution .evenement { align-self: center; font-size: .8rem; background: #f1f3f5; border-radius: 1rem;
                            padding: .2rem .8rem; text-align: center; }
.texte-libre { white-space: pre-wrap; }

/* Grille tarifaire : les lignes sans prix ni effectif se rangent derrière l'interrupteur. */
.grille-filtree .ligne-vide { display: none; }
.grille-tarifs input { min-width: 4rem; }