/* ------------------------------------------------------------------
   Palm Beach Dashboard - thème web

   Couche de thème posée sur Bootstrap 5. Bootstrap fournit la grille,
   les composants et le comportement responsive ; ce fichier leur donne
   la charte du resort - sable, or, encre chaude - sans changer une seule
   des couleurs de la palette.

   Lecture moderne : police Geist servie par le site, coins plus ronds,
   ombres douces teintées d'encre, verre dépoli pour ce qui flotte,
   libellés en casse normale plutôt qu'en capitales, chiffres francs et
   serrés, mouvements courts qui ne portent aucune information.
   ------------------------------------------------------------------ */

/* Geist, servie depuis wwwroot/fonts : la politique de sécurité n'autorise que les polices du
   site. Un seul fichier variable porte toutes les graisses ; sous-ensemble latin, licence dans
   wwwroot/fonts/OFL.txt. */
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/geist.woff2") format("woff2");
}

:root {
    /* Palette du resort - inchangée. */
    --canvas: #F7F4EE;
    --surface: #FFFFFF;
    --sidebar: #2A2620;
    --sidebar-hover: #3A342B;
    --ink: #2A2620;
    --ink-soft: #6E6959;
    --muted: #9E978A;
    --line: #E3DDD1;
    --line-soft: #EFEAE1;
    --or: #C9A227;
    --or-clair: #E3C765;
    --or-pale: #FBF4DF;
    --or-fonce: #8C7736;
    --danger: #A33A31;
    --inhouse: #3F7E8C;
    --excursion: #A9754F;
    --resto: #8C6B3F;
    --piscine: #4F8CA9;
    --presents: #5B7F63;

    /* Teintes pâles dérivées, pour les fonds de pastilles et d'avis. */
    --danger-pale: #F5E3E1;
    --presents-pale: #E4EDE5;
    --excursion-pale: #F3E6D8;
    --inhouse-pale: #E1EDF0;

    /* Dérivés de la palette : encre plus profonde et voiles d'or, par transparence. */
    --sidebar-profond: #1F1C17;
    --or-voile: rgba(201, 162, 39, .14);
    --or-halo: rgba(201, 162, 39, .28);
    --clair: #F3EFE6;

    --rayon: 16px;
    --rayon-sm: 10px;
    --rayon-xs: 6px;
    --ombre: 0 1px 2px rgba(42, 38, 32, .04), 0 2px 6px rgba(42, 38, 32, .03), 0 12px 32px -12px rgba(42, 38, 32, .08);
    --ombre-survol: 0 1px 2px rgba(42, 38, 32, .05), 0 6px 14px rgba(42, 38, 32, .05), 0 22px 44px -16px rgba(42, 38, 32, .16);
    --ombre-haute: 0 24px 64px -12px rgba(28, 25, 21, .32), 0 2px 6px rgba(28, 25, 21, .08);
    --largeur-lateral: 260px;
    --duree: .2s;
    --courbe: cubic-bezier(.2, .7, .2, 1);

    /* Bootstrap consomme ses propres variables : on les branche sur la charte
       plutôt que de surcharger ses classes une par une. */
    --bs-body-bg: var(--canvas);
    --bs-body-color: var(--ink);
    --bs-body-font-family: "Geist", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.55;
    --bs-border-color: var(--line);
    --bs-border-radius: var(--rayon-sm);
    --bs-border-radius-sm: var(--rayon-xs);
    --bs-border-radius-lg: var(--rayon);
    --bs-link-color: var(--or-fonce);
    --bs-link-color-rgb: 140, 119, 54;
    --bs-link-hover-color: var(--ink);
    --bs-secondary-color: var(--ink-soft);
    --bs-emphasis-color: var(--ink);
    --bs-focus-ring-color: rgba(201, 162, 39, .3);
    --bs-focus-ring-width: 3px;
}

/* ------------------------------------------------------------------
   Débordement horizontal

   Une page qu'il faut faire glisser latéralement est inutilisable au
   comptoir. Trois causes, traitées à la racine :
   - un élément de grille ou de flex prend la largeur de son contenu ;
   - un mot insécable - adresse, référence - ne se coupe pas ;
   - un tableau large déborde au lieu de défiler dans son cadre.
   ------------------------------------------------------------------ */

/* clip et non hidden : « hidden » fait du body un conteneur de défilement, ce qui désactive
   en silence position: sticky - la barre du haut partait alors avec la page. */
html, body { max-width: 100%; overflow-x: clip; }

body {
    /* Un léger halo d'or en haut de page : le crème reste la couleur du fond. */
    background:
        radial-gradient(1200px 420px at 85% -120px, rgba(201, 162, 39, .07), transparent 70%),
        var(--canvas);
    background-attachment: fixed;
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Un grain très léger sur le crème : un fond parfaitement uni paraît synthétique. Posé
   derrière le contenu, fixe et sans pointeur : il ne coûte rien au défilement. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .15 0 0 0 0 .13 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

body.page-connexion::before { display: none; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Pas de mot seul sur la dernière ligne d'un titre ou d'un paragraphe. */
h1, h2, h3, h4, h5, h6, .modal-title { text-wrap: balance; }
p, li, .legende, .aide { text-wrap: pretty; }

::selection { background: var(--or-clair); color: var(--ink); }

/* Lien d'évitement : caché jusqu'à ce qu'on arrive au clavier, il saute le menu. */
.lien-evitement {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1090;
    padding: 10px 16px;
    border-radius: var(--rayon-sm);
    background: var(--sidebar);
    color: var(--clair);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform var(--duree) var(--courbe);
}

.lien-evitement:focus, .lien-evitement:focus-visible { transform: none; color: var(--clair); }

b, strong { font-weight: 600; }

.row > *, .col, [class^="col-"], [class*=" col-"] { min-width: 0; }

.d-flex > *, .flex-fill { min-width: 0; }

.table-responsive { -webkit-overflow-scrolling: touch; }

.icone { flex: 0 0 auto; vertical-align: -3px; }

/* Barres de défilement fines et chaudes, plutôt que le gris du système. */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
::-webkit-scrollbar-track { background: transparent; }

/* ================================================================ Coque */

.coque { min-height: 100dvh; display: flex; }

.principal-zone { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.contenu {
    flex: 1 1 auto;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 20px 16px 48px;
}

@media (min-width: 768px) { .contenu { padding: 28px 32px 64px; } }

/* Entrée en douceur : les cartes montent d'un cheveu, l'une après l'autre. */
@keyframes palm-entree {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* « backwards » et non « both » : une fois l'animation finie, plus rien ne reste posé. Une
   opacité ou une transformation figée créerait un contexte d'empilement, et les fenêtres
   rangées dans la page passeraient alors sous leur fond assombri. */
.contenu > :not(.modal),
.contenu .row > [class*="col"] > .card {
    animation: palm-entree .45s var(--courbe) backwards;
}

.contenu .row > [class*="col"]:nth-child(2) > .card { animation-delay: .04s; }
.contenu .row > [class*="col"]:nth-child(3) > .card { animation-delay: .08s; }
.contenu .row > [class*="col"]:nth-child(4) > .card { animation-delay: .12s; }
.contenu .row > [class*="col"]:nth-child(5) > .card { animation-delay: .16s; }
.contenu .row > [class*="col"]:nth-child(6) > .card { animation-delay: .2s; }

/* ---------------------------------------------------------- Barre latérale */

/* Bootstrap gère l'offcanvas sous 992 px ; au-dessus, la barre est fixe. */
.lateral {
    --bs-offcanvas-width: 288px;
    --bs-offcanvas-bg: var(--sidebar);
    --bs-offcanvas-color: var(--clair);
    background:
        radial-gradient(260px 220px at 50% -40px, rgba(201, 162, 39, .16), transparent 70%),
        linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-profond) 100%);
    color: var(--clair);
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    /* offcanvas-lg rend le fond transparent au-dessus de 992 px, avec !important :
       il faut la même force pour garder la barre sombre. */
    .lateral {
        background:
            radial-gradient(260px 220px at 50% -40px, rgba(201, 162, 39, .16), transparent 70%),
            linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-profond) 100%) !important;
        color: var(--clair);
        position: fixed;
        inset: 0 auto 0 0;
        height: 100dvh;
        width: var(--largeur-lateral);
        z-index: 1030;
        visibility: visible !important;
        transform: none !important;
        border-right: 1px solid rgba(255, 255, 255, .04);
    }

    /* La barre étant fixe, le contenu se décale de sa largeur. */
    .lateral ~ .principal-zone { margin-left: var(--largeur-lateral); }
}

.lateral-tete {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 20px 20px;
}

/* Filet dégradé plutôt qu'une bordure pleine : il s'efface vers les bords. */
.lateral-tete::after {
    content: "";
    position: absolute;
    inset: auto 20px 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 162, 39, .35), transparent);
}

.lateral-tete .btn-icone { position: absolute; top: 10px; right: 10px; }

/* Logo complet du resort : palme dorée, lettrage en currentColor, donc clair sur le fond sombre. */
.logo-lateral { display: block; color: var(--clair); transition: opacity var(--duree) ease; }
.logo-lateral:hover { opacity: .85; }
.logo-lateral svg { display: block; width: 100px; height: auto; margin: 0 auto; }

@media (max-height: 700px) {
    .logo-lateral svg { width: 76px; }
}

.menu {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    scrollbar-color: rgba(255, 255, 255, .12) transparent;
}

.menu-titre {
    margin: 18px 14px 6px;
    font-size: .75rem;
    color: rgba(158, 151, 138, .85);
    font-weight: 500;
}

.menu-titre:first-child { margin-top: 4px; }

.menu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--rayon-sm);
    color: #B8B1A2;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: background-color var(--duree) ease, color var(--duree) ease, transform var(--duree) var(--courbe);
}

.menu a:hover { background: rgba(255, 255, 255, .05); color: var(--clair); }
.menu a:hover .icone { transform: translateX(1px); }
.menu a .icone { transition: transform var(--duree) var(--courbe), color var(--duree) ease; }

.menu a.actif {
    background: linear-gradient(90deg, rgba(201, 162, 39, .2), rgba(201, 162, 39, .06));
    color: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .18);
}

/* Repère d'or arrondi, collé au bord gauche de l'entrée active. */
.menu a.actif::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--or);
    box-shadow: 0 0 12px var(--or-halo);
}

.menu a.actif .icone { color: var(--or); }

.identite {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 12px 14px;
    padding: 10px 10px 10px 12px;
    border-radius: var(--rayon-sm);
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .06);
}

/* Pastille d'identité : les initiales de la personne connectée. */
.jeton {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--or-clair), var(--or));
    color: #2A2620;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--sidebar), 0 0 0 3px rgba(201, 162, 39, .45);
}

.identite-noms { flex: 1 1 auto; min-width: 0; }
.identite-noms b { font-size: .8125rem; font-weight: 600; display: block; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.identite-noms small { display: block; font-size: .6875rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.identite .btn-icone { width: 34px; height: 34px; }

/* Bouton carré à pictogramme : 44 px, la cible minimale d'un doigt. */
.btn-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--rayon-sm);
    background: transparent;
    color: inherit;
    text-decoration: none;
    transition: background-color var(--duree) ease, color var(--duree) ease, transform .12s ease;
}

.btn-icone:active { transform: scale(.94); }

.lateral .btn-icone { color: var(--muted); }
.lateral .btn-icone:hover, .lateral .btn-icone:focus-visible { color: var(--or); background: rgba(255, 255, 255, .07); }

/* ---------------------------------------------------------- En-tête */

/* Collant : le titre et la journée restent sous la main en défilant. Verre dépoli crème. */
.entete {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(247, 244, 238, .78);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid rgba(227, 221, 209, .7);
}

@media (min-width: 768px) { .entete { padding: 16px 32px; } }

.entete .btn-icone { color: var(--ink); margin-left: -8px; }
.entete .btn-icone:hover { background: var(--line-soft); }

.entete-titre { flex: 1 1 auto; min-width: 0; }
.entete-titre h1 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entete-titre p { margin: 2px 0 0; color: var(--ink-soft); font-size: .8125rem; }

/* Sélecteur de journée : une seule pilule, flèches et date réunies. */
.selecteur-jour {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    padding: 3px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(42, 38, 32, .04);
}

.selecteur-jour .form-control {
    width: 9.5rem;
    min-height: 38px;
    text-align: center;
    border: 0;
    background: transparent;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
    border-radius: 999px;
}

.selecteur-jour .form-control:focus { background: var(--or-pale); box-shadow: none; }

.selecteur-jour .btn-icone { width: 38px; height: 38px; border-radius: 50%; color: var(--ink-soft); margin: 0; }
.selecteur-jour .btn-icone:hover { background: var(--line-soft); color: var(--ink); }
.selecteur-jour .btn { min-height: 38px; border-radius: 999px; margin-left: 4px; }

@media (max-width: 575.98px) {
    .entete { flex-wrap: wrap; }
    .selecteur-jour { width: 100%; justify-content: space-between; }
    .selecteur-jour .form-control { flex: 1 1 auto; width: auto; }
}

/* ================================================================ Composants */

.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: rgba(227, 221, 209, .75);
    --bs-card-border-radius: var(--rayon);
    --bs-card-inner-border-radius: calc(var(--rayon) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-x: 1.375rem;
    --bs-card-spacer-y: 1.25rem;
    box-shadow: var(--ombre);
    transition: box-shadow var(--duree) ease, transform var(--duree) var(--courbe), border-color var(--duree) ease;
}

/* En-tête de carte : titre à gauche, compteur ou action à droite. */
.carte-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.carte-tete h2 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin: 0; }

/* Titre de bloc en casse normale : des capitales espacées sur chaque carte
   finissent par crier toutes en même temps. */
.etiquette {
    font-size: .8125rem;
    letter-spacing: -.005em;
    color: var(--ink-soft);
    font-weight: 600;
}

.discret { color: var(--ink-soft); font-size: .8125rem; }
.muet { color: var(--muted); font-size: .75rem; }
.alerte { color: var(--danger); }
.succes { color: var(--presents); }

/* Barre d'actions d'un écran : bouton principal et raccourcis. */
.barre-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* ---------------------------------------------------------- Indicateurs */

/* Chaque indicateur porte sa teinte : un filet en haut et un halo discret dans
   l'angle. La couleur seule ne porte jamais l'information, l'étiquette la nomme. */
.kpi {
    --teinte: var(--line);
    --teinte-voile: rgba(158, 151, 138, .1);
    height: 100%;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(180px 140px at 100% 0%, var(--teinte-voile), transparent 72%),
        var(--surface);
}

.kpi.inhouse { --teinte: var(--inhouse); --teinte-voile: rgba(63, 126, 140, .13); }
.kpi.excursion { --teinte: var(--excursion); --teinte-voile: rgba(169, 117, 79, .14); }
.kpi.presents { --teinte: var(--presents); --teinte-voile: rgba(91, 127, 99, .14); }
.kpi.resto { --teinte: var(--resto); --teinte-voile: rgba(140, 107, 63, .13); }
.kpi.piscine { --teinte: var(--piscine); --teinte-voile: rgba(79, 140, 169, .14); }
.kpi.or { --teinte: var(--or); --teinte-voile: rgba(201, 162, 39, .18); }

/* Filet de teinte en haut de la carte, qui s'efface vers la droite. */
.kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teinte), transparent 85%);
}

@media (hover: hover) {
    .kpi:hover { transform: translateY(-2px); box-shadow: var(--ombre-survol); }
}

/* Grands chiffres isolés : chiffres proportionnels. Les chiffres tabulaires donnent à chaque
   chiffre la largeur d'un zéro et font paraître « 121 » lâche ; ils restent pour les colonnes. */
.valeur {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.05;
    color: var(--ink);
}

.valeur small { font-size: .75rem; color: var(--ink-soft); margin-left: 6px; font-weight: 500; letter-spacing: 0; }
.valeur.moyenne { font-size: 1.75rem; }
.legende { color: var(--ink-soft); font-size: .78125rem; }

.encart {
    background: linear-gradient(180deg, var(--canvas), rgba(247, 244, 238, .55));
    border: 1px solid var(--line-soft);
    border-radius: var(--rayon-sm);
}

.encart.or { background: var(--or-pale); color: var(--or-fonce); border-color: rgba(201, 162, 39, .2); }

/* Barre de proportion */
.jauge { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.jauge i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--or-clair), var(--or));
    transform-origin: left center;
    animation: palm-jauge .7s var(--courbe) both .15s;
}
.jauge i.sombre { background: linear-gradient(90deg, var(--muted), var(--ink-soft)); }
.jauge i.resto { background: var(--resto); }

@keyframes palm-jauge { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------- Listes */

.liste { list-style: none; margin: 0; padding: 0; }

.liste > li {
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    gap: 10px 12px;
    flex-wrap: wrap;
}

.liste > li:last-child { border-bottom: 0; padding-bottom: 0; }

.liste .principal { flex: 1 1 180px; min-width: 0; }

.chambre {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 64px;
    letter-spacing: -.01em;
}

.trace { font-size: .6875rem; color: var(--muted); flex-basis: 100%; }

/* Liste de sorties : chaque ligne est une tuile qu'on touche en entier. */
.tuiles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.tuile {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line-soft);
    border-radius: var(--rayon-sm);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    min-height: 44px;
    transition: border-color var(--duree) ease, background-color var(--duree) ease, box-shadow var(--duree) ease, transform var(--duree) var(--courbe);
}

.tuile:hover { border-color: var(--or-clair); color: inherit; box-shadow: 0 6px 18px -8px rgba(42, 38, 32, .16); }
.tuile:active { transform: scale(.995); }

.tuile.choisie {
    border-color: var(--or);
    background: linear-gradient(90deg, var(--or-pale), var(--surface));
    box-shadow: 0 0 0 3px var(--or-voile);
}

.tuile.choisie::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--or);
}

.tuile .principal { flex: 1 1 auto; min-width: 0; }
.tuile b { display: block; font-size: .875rem; }
.tuile .pastilles { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }

/* Rail horizontal : il défile seul plutôt que d'élargir la page. */
.rail { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }

/* Raccourcis du programme du jour : pastilles qui ouvrent le formulaire pré-rempli. */
.suggestions { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }

.suggestion {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 260px;
    padding: 10px 16px;
    border: 1px dashed var(--or);
    border-radius: var(--rayon-sm);
    background: var(--surface);
    color: var(--ink);
    text-align: left;
    transition: background-color var(--duree) ease, border-style var(--duree) ease, box-shadow var(--duree) ease, transform var(--duree) var(--courbe);
}

.suggestion:hover, .suggestion:focus-visible {
    background: var(--or-pale);
    border-style: solid;
    box-shadow: 0 6px 16px -8px var(--or-halo);
    transform: translateY(-1px);
}
.suggestion b { font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.suggestion span { font-size: .6875rem; color: var(--or-fonce); }

/* Pastilles d'état : teinte + libellé, jamais la teinte seule. Coins doux plutôt
   qu'une gélule, casse normale plutôt que des capitales. */
.badge.etat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: var(--rayon-xs);
    background: var(--line-soft);
    color: var(--ink-soft);
    font-size: .75rem;
    letter-spacing: 0;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(42, 38, 32, .04);
}

.badge.etat.arrivee, .badge.etat.terminee { background: var(--presents-pale); color: var(--presents); }
.badge.etat.ensejour { background: var(--or-pale); color: var(--or-fonce); }
.badge.etat.departprevu, .badge.etat.encours { background: var(--excursion-pale); color: var(--excursion); }
.badge.etat.attendu { background: var(--inhouse-pale); color: var(--inhouse); }
.badge.etat.annulee { background: var(--danger-pale); color: var(--danger); }

/* Seul état vivant, une sortie en cours porte un point qui respire : il dit « en ce
   moment même ». Les autres états n'en ont pas besoin. */
.badge.etat.encours::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: palm-pouls 1.8s ease-in-out infinite;
}

@keyframes palm-pouls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(169, 117, 79, .45); }
    50% { box-shadow: 0 0 0 4px rgba(169, 117, 79, 0); }
}

/* Indications sous une liste : seuil, capacité. */
.indication { font-size: .75rem; margin: 0 0 8px; padding: 8px 12px; border-radius: var(--rayon-sm); font-weight: 500; }
.indication.ok { background: var(--presents-pale); color: var(--presents); }
.indication.attention { background: var(--excursion-pale); color: var(--excursion); }
.indication.danger { background: var(--danger-pale); color: var(--danger); }

/* ---------------------------------------------------------- Avis */

.avis {
    position: relative;
    padding: 12px 16px 12px 18px;
    border-radius: var(--rayon-sm);
    font-size: .84375rem;
    font-weight: 500;
    margin-bottom: 18px;
    border: 1px solid transparent;
    overflow: hidden;
}

.avis::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: currentColor; opacity: .7; }

.avis-succes { background: var(--presents-pale); color: var(--presents); border-color: #CFE0D2; }
.avis-erreur { background: var(--danger-pale); color: var(--danger); border-color: #EBCBC7; }

.bandeau-archive {
    background: var(--or-pale);
    color: var(--or-fonce);
    border: 1px solid rgba(201, 162, 39, .25);
    border-radius: var(--rayon-sm);
    font-size: .8125rem;
    font-weight: 500;
}

/* ---------------------------------------------------------- Formulaires */

.form-label {
    font-size: .8125rem;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 6px;
}

/* 16 px minimum : en dessous, iOS zoome au focus et décadre la page. */
.form-control, .form-select {
    font-size: 1rem;
    min-height: 44px;
    border-color: var(--line);
    border-radius: var(--rayon-sm);
    background-color: var(--surface);
    transition: border-color var(--duree) ease, box-shadow var(--duree) ease, background-color var(--duree) ease;
}

.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: #D3CBBB; }

.form-control:focus, .form-select:focus {
    border-color: var(--or);
    box-shadow: 0 0 0 4px rgba(201, 162, 39, .16);
}

.form-control::placeholder { color: var(--muted); }

.form-select-sm { min-height: 36px; font-size: .8125rem; }

.form-check-input { border-color: #D3CBBB; }
.form-check-input:checked { background-color: var(--or-fonce); border-color: var(--or-fonce); }
.form-check-input:focus { border-color: var(--or); box-shadow: 0 0 0 4px rgba(201, 162, 39, .16); }
.form-switch .form-check-input { transition: background-position var(--duree) ease, background-color var(--duree) ease; }

.aide { color: var(--muted); font-size: .75rem; margin: 6px 0 0; }

.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-inline: 18px;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: -.005em;
    border-radius: var(--rayon-sm);
    transition: background-color var(--duree) ease, border-color var(--duree) ease, color var(--duree) ease,
                box-shadow var(--duree) ease, transform .12s ease;
}

.btn:active { transform: translateY(1px) scale(.99); }

.btn-sm { min-height: 36px; font-size: .8125rem; padding: 4px 14px; border-radius: 8px; }

.btn-primaire {
    background: linear-gradient(180deg, var(--sidebar-hover), var(--sidebar));
    color: #F7F4EE;
    border-color: var(--sidebar);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 4px 12px -4px rgba(42, 38, 32, .4);
}

.btn-primaire:hover, .btn-primaire:focus-visible, .btn-primaire:active {
    background: var(--sidebar-hover);
    color: #F7F4EE;
    border-color: var(--sidebar-hover);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 8px 20px -6px rgba(42, 38, 32, .45);
}

.btn-or {
    background: linear-gradient(180deg, var(--or-clair), var(--or));
    color: #2A2620;
    border-color: var(--or);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 4px 14px -4px var(--or-halo);
}

.btn-or:hover, .btn-or:focus-visible, .btn-or:active {
    background: var(--or-clair);
    color: #2A2620;
    border-color: var(--or-clair);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 22px -6px rgba(201, 162, 39, .5);
}

.btn-secondaire {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: 0 1px 2px rgba(42, 38, 32, .05);
}

.btn-secondaire:hover, .btn-secondaire:focus-visible, .btn-secondaire:active {
    border-color: var(--or);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 0 0 3px var(--or-voile);
}

.btn-danger { background: var(--danger); border-color: var(--danger); box-shadow: 0 4px 12px -4px rgba(163, 58, 49, .45); }
.btn-danger:hover { background: #8A2F27; border-color: #8A2F27; }

.btn-danger-discret {
    background: transparent;
    color: var(--danger);
    border-color: transparent;
    min-width: 44px;
}

.btn-danger-discret:hover, .btn-danger-discret:focus-visible {
    background: var(--danger-pale);
    color: var(--danger);
}

/* Le contour de focus reste visible : c'est le seul repère au clavier. */
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

/* ---------------------------------------------------------- Fenêtres */

.modal {
    --bs-modal-border-radius: 20px;
    --bs-modal-inner-border-radius: 19px;
    --bs-modal-border-color: transparent;
    --bs-modal-box-shadow: var(--ombre-haute);
    --bs-modal-header-border-color: var(--line-soft);
    --bs-modal-footer-border-color: var(--line-soft);
    --bs-modal-bg: var(--surface);
    --bs-modal-padding: 1.5rem;
    --bs-modal-header-padding: 1.25rem 1.5rem;
}

.modal-backdrop { --bs-backdrop-bg: #1C1915; --bs-backdrop-opacity: .45; }

/* Le fond s'estompe au lieu de seulement s'assombrir. */
.modal-backdrop.show { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.modal.fade .modal-dialog { transform: translateY(12px) scale(.98); transition: transform .25s var(--courbe); }
.modal.show .modal-dialog { transform: none; }

.modal-header { align-items: flex-start; }
.modal-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.modal-header .sous-titre { display: block; font-size: .8125rem; color: var(--ink-soft); font-weight: 400; letter-spacing: 0; margin-top: 2px; }
.modal-footer { gap: 8px; background: rgba(247, 244, 238, .5); }
.modal-footer > * { margin: 0; }

/* Sur téléphone, une fenêtre plein écran garde le pied de page à portée de pouce. */
@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down .modal-content { border-radius: 0; }
    .modal-fullscreen-sm-down .modal-footer { position: sticky; bottom: 0; background: var(--surface); }
}

/* Cases à cocher présentées en cartes : plus faciles à viser. */
.choix-carte {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--rayon-sm);
    cursor: pointer;
    margin: 0;
    transition: border-color var(--duree) ease, background-color var(--duree) ease, box-shadow var(--duree) ease;
}

.choix-carte:hover { border-color: var(--or-clair); }
.choix-carte:has(input:checked) { border-color: var(--or); background: var(--or-pale); box-shadow: 0 0 0 3px var(--or-voile); }
.choix-carte .form-check-input { margin: 3px 0 0; flex: 0 0 auto; }
.choix-carte b { display: block; font-size: .84375rem; font-weight: 600; }
.choix-carte small { display: block; color: var(--ink-soft); font-size: .75rem; }

/* ---------------------------------------------------------- Tableaux */

.table {
    --bs-table-color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--line-soft);
    --bs-table-hover-bg: rgba(251, 244, 223, .55);
    --bs-table-hover-color: var(--ink);
    font-size: .84375rem;
    margin-bottom: 0;
}

.table > thead th {
    font-size: .75rem;
    color: var(--ink-soft);
    font-weight: 600;
    white-space: nowrap;
    background: var(--canvas);
    border-bottom: 0;
}

/* En-tête en bandeau arrondi : les coins suivent ceux des cartes. */
.table > thead th:first-child { border-radius: var(--rayon-xs) 0 0 var(--rayon-xs); }
.table > thead th:last-child { border-radius: 0 var(--rayon-xs) var(--rayon-xs) 0; }

.table td, .table th { padding: 11px 12px; vertical-align: middle; }

.table > tbody > tr { transition: background-color .12s ease; }
.table > tbody > tr:last-child > * { border-bottom: 0; }

/* Un tableau défile dans son cadre : inutile de couper les mots au milieu. */
.table td, .table th { word-break: normal; overflow-wrap: normal; white-space: nowrap; }
.table .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------- Divers */

.vide {
    color: var(--ink-soft);
    font-size: .8125rem;
    padding: 24px 18px;
    text-align: center;
    border: 1.5px dashed var(--line);
    border-radius: var(--rayon-sm);
    background: rgba(247, 244, 238, .5);
    margin: 0;
}

/* Le service qui n'a pas le droit de poser un mouvement lit pourquoi. */
.mention-droit { color: var(--muted); font-size: .75rem; }

.separateur { border: 0; height: 1px; background: linear-gradient(90deg, var(--line-soft), var(--line), var(--line-soft)); margin: 20px 0; opacity: 1; }

/* Fiche du programme, repliée par défaut. */
details.fiche > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

details.fiche > summary::-webkit-details-marker { display: none; }
details.fiche > summary::after {
    content: "+";
    margin-left: auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--or-pale);
    color: var(--or-fonce);
    font-size: 1rem;
    line-height: 1;
    transition: transform var(--duree) var(--courbe);
}
details.fiche[open] > summary::after { content: "–"; transform: rotate(180deg); }

/* ---------------------------------------------------------- Connexion */

/* L'écran de connexion est sombre de bord à bord : sans cela, un rebond de
   défilement sur téléphone laisse apparaître le crème du reste de l'application. */
body.page-connexion { background: var(--sidebar-profond); }

.connexion {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Deux lueurs d'or sur l'encre : de la profondeur sans image à charger. */
    background:
        radial-gradient(700px 500px at 15% 10%, rgba(201, 162, 39, .16), transparent 60%),
        radial-gradient(600px 480px at 95% 100%, rgba(63, 126, 140, .14), transparent 60%),
        linear-gradient(160deg, var(--sidebar) 0%, var(--sidebar-profond) 100%);
    padding: 24px 16px;
    /* Un écran court - un vieux téléphone, un clavier ouvert - doit pouvoir défiler
       plutôt que de rogner le pavé numérique. */
    overflow-y: auto;
}

.connexion .boite {
    width: 100%;
    max-width: 340px;
    text-align: center;
    color: var(--clair);
    animation: palm-entree .5s var(--courbe) backwards;
}

/* Empilé par défaut : c'est la seule disposition tenable sur un téléphone tenu droit. */
.agencement { display: flex; flex-direction: column; }

.bloc-logo { margin-bottom: 22px; }

/* Le logo complet : palme dorée, lettrage en currentColor. Empilé, il se réduit sur
   les écrans courts pour laisser tout l'espace au pavé. */
.logo svg { display: block; margin: 0 auto; width: 124px; height: auto; filter: drop-shadow(0 10px 30px rgba(201, 162, 39, .18)); }

@media (max-height: 720px) {
    .logo svg { width: 88px; }
}

@media (max-height: 600px) {
    .logo svg { width: 66px; }
}

/* La saisie dans un panneau de verre dépoli, posé sur les lueurs du fond. */
.bloc-code {
    padding: 22px 20px 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.pave {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

/*
   Côte à côte dès qu'il y a de la largeur - poste de la réception, tablette, ou
   téléphone tenu couché. Le logo retrouve alors sa taille : c'est la hauteur qui
   manquait, pas la largeur, et elle n'est plus le facteur limitant.
*/
@media (min-width: 620px) {
    .connexion .boite { max-width: 700px; }

    .agencement {
        flex-direction: row;
        align-items: center;
        gap: clamp(24px, 5vw, 56px);
    }

    .bloc-logo { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
    .bloc-code { flex: 0 0 330px; }

    /*
       Ici c'est la hauteur qui commande, pas la largeur : le logo est nettement plus
       haut que large (rapport 1,6), et sur un téléphone tenu couché il pousserait
       sinon la dernière rangée du pavé hors de l'écran.
    */
    .logo svg { height: min(360px, 72dvh); width: auto; max-width: 100%; }
}

.connexion .points {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: .4em;
    padding-left: .4em;
    color: var(--or);
    min-height: 40px;
    text-shadow: 0 0 18px var(--or-halo);
}

.connexion .points.faux { color: #E07A70; text-shadow: none; animation: palm-secousse .4s ease; }

@keyframes palm-secousse {
    0%, 100% { transform: none; }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.connexion .message { min-height: 32px; font-size: .75rem; color: #E07A70; }

.pave button {
    width: 100%;
    padding: 16px 0;
    font-size: 1.375rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--clair);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    min-height: 56px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease, box-shadow .15s ease;
}

.pave button:hover { background: rgba(255, 255, 255, .11); border-color: rgba(201, 162, 39, .55); }
.pave button:active {
    background: linear-gradient(180deg, var(--or-clair), var(--or));
    border-color: var(--or);
    color: #2A2620;
    transform: scale(.96);
    box-shadow: 0 0 22px var(--or-halo);
}
.pave button.mot { font-size: .8125rem; font-weight: 500; color: var(--muted); background: transparent; border-color: transparent; box-shadow: none; }
.pave button.mot:hover { color: var(--clair); background: rgba(255, 255, 255, .06); }

/*
   Écran très bas - téléphone tenu couché. Le pavé se resserre sans jamais descendre
   sous les 44 px de côté qu'exige un doigt. Ce bloc vient après les règles qu'il
   corrige : à spécificité égale, c'est la dernière écrite qui s'applique.
*/
@media (max-height: 480px) {
    .bloc-code { padding: 14px 16px 12px; }
    .pave { gap: 8px; margin-top: 6px; }
    .pave button { min-height: 44px; padding: 9px 0; font-size: 1.0625rem; }
    .connexion .points { font-size: 1.375rem; min-height: 28px; }
    .connexion .message { min-height: 20px; }
}


/* ------------------------------------------------------------------
   Champ combiné : saisie et liste dans un seul contrôle
   Choisir un client parmi soixante-trois se fait à la frappe. La liste
   se déplie sous le champ et se réduit à mesure ; elle ne prend jamais
   plus d'un tiers d'écran, pour rester utilisable au pouce.
   ------------------------------------------------------------------ */
.combo { position: relative; }

.combo-liste {
    position: absolute;
    z-index: 20;
    inset-inline: 0;
    top: calc(100% + 4px);
    max-height: 15rem;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--rayon-sm);
    box-shadow: 0 16px 40px -12px rgba(42, 38, 32, .25);
    animation: palm-entree .16s var(--courbe) backwards;
}

.combo-liste > li {
    padding: .5rem .75rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: .8125rem;
    cursor: pointer;
    border-radius: 8px;
}

.combo-liste > li.actif,
.combo-liste > li:hover { background: var(--or-pale); }

.combo-liste > li[hidden] { display: none; }

/* ------------------------------------------------------------------
   Zone de dépôt du fichier eZee : une grande cible plutôt qu'un petit
   bouton « Parcourir » de navigateur.
   ------------------------------------------------------------------ */
.depot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 16px;
    border: 1.5px dashed var(--or);
    border-radius: var(--rayon);
    background:
        radial-gradient(240px 120px at 50% 0%, rgba(201, 162, 39, .12), transparent 70%),
        var(--or-pale);
    text-align: center;
    cursor: pointer;
    margin: 0;
    transition: background-color var(--duree) ease, box-shadow var(--duree) ease, transform var(--duree) var(--courbe);
}

.depot:hover { background-color: #F8EDCB; box-shadow: 0 0 0 4px var(--or-voile); transform: translateY(-1px); }
.depot .icone { color: var(--or-fonce); }
.depot b { font-size: .9375rem; }
.depot small { color: var(--ink-soft); font-size: .78125rem; }
.depot-nom { font-weight: 600; color: var(--or-fonce); font-size: .8125rem; }
.depot:has(+ #fichier:focus-visible) { outline: 2px solid var(--or); outline-offset: 2px; }

/* ------------------------------------------------------------------
   Identification par mot de passe : champs clairs sur le fond sombre
   de la connexion.
   ------------------------------------------------------------------ */
.consigne { color: #B8B1A2; font-size: .8125rem; line-height: 1.5; }

.champ-sombre-label { color: var(--muted); }

.champ-sombre {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: var(--clair);
}

.champ-sombre:hover:not(:focus) { border-color: rgba(255, 255, 255, .24); }
.champ-sombre:focus { background: rgba(255, 255, 255, .1); color: var(--clair); border-color: var(--or); box-shadow: 0 0 0 4px rgba(201, 162, 39, .2); }

.lien-connexion {
    display: block;
    margin-top: 18px;
    color: var(--or);
    font-size: .78125rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}

.lien-connexion:hover { color: var(--or-clair); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------
   Statistiques

   Couleur de donnée : un seul accent, le bleu-vert du resort poussé à
   la saturation qui le fait lire comme une couleur (#0E7C9C, validé :
   chroma, contraste et séparation daltonisme). Le reste est en gris :
   c'est l'accent qui porte l'histoire. Les textes restent en encre,
   jamais dans la couleur de la donnée.
   ------------------------------------------------------------------ */
:root {
    --donnee: #0E7C9C;
    --donnee-voile: rgba(14, 124, 156, .10);
    --donnee-gris: #A39C8E;
}

.graphique { width: 100%; min-height: 240px; }
.graphique svg { display: block; overflow: visible; }
.graphique .grille { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 3 4; }
.graphique .axe { stroke: var(--line); stroke-width: 1; }
.graphique .graduation { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.graphique .courbe { fill: none; stroke: var(--donnee); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.graphique .aire { fill: var(--donnee-voile); stroke: none; }
.graphique .point { fill: var(--donnee); stroke: var(--surface); stroke-width: 2; }
.graphique .reticule { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 2 3; }

/* Barres horizontales : nom, piste, valeur au bout. 24 px au plus, bout arrondi. */
.barres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.barres > li {
    display: grid;
    grid-template-columns: minmax(90px, 34%) 1fr;
    align-items: center;
    gap: 12px;
    border-radius: 6px;
    outline-offset: 3px;
}

.barres > li:hover .barre-piste i, .barres > li:focus-visible .barre-piste i { filter: brightness(1.12); }

.barre-nom { font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.barre-piste { display: flex; align-items: center; gap: 8px; min-width: 0; }

.barre-piste i {
    display: block;
    height: 18px;
    min-width: 2px;
    max-width: calc(100% - 4.5rem);
    background: var(--donnee-gris);
    border-radius: 0 6px 6px 0;
    transform-origin: left center;
    animation: palm-jauge .6s var(--courbe) both;
    transition: filter var(--duree) ease;
}

.barre-piste i.accent { background: var(--donnee); }
.barre-piste b { font-size: .8125rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.table tfoot th { border-top: 1px solid var(--line); }

/* Infobulle commune : la valeur d'abord, le libellé ensuite. */
.infobulle {
    position: fixed;
    z-index: 1080;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    border-radius: var(--rayon-sm);
    background: rgba(42, 38, 32, .94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--clair);
    font-size: .75rem;
    box-shadow: 0 12px 28px -8px rgba(28, 25, 21, .45);
    border: 1px solid rgba(255, 255, 255, .06);
    max-width: 260px;
}

.infobulle b { font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.infobulle span { color: #CFC8B9; }

/* Ligne d'explication dans la liste du champ combiné : ni cliquable ni surlignée. */
.combo-liste > li.combo-message {
    cursor: default;
    color: var(--ink-soft);
    font-style: italic;
    background: transparent;
}

/* ------------------------------------------------------------------
   Tableau de bord

   Une seule grande valeur par écran : les présents au resort. Les
   chiffres dont elle découle sont posés à côté, et une barre de partage
   montre les clients logés entre présents et partis en excursion.
   Forme « mise en avant » : les présents dans la couleur de donnée, les
   excursionnistes en gris, comme sur l'écran Statistiques (paire vérifiée
   au validateur de palette : séparation daltonisme ΔE 13,8). Les deux
   parts sont nommées et chiffrées dans la légende : la couleur ne porte
   jamais seule l'information.
   ------------------------------------------------------------------ */
.une-tete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    flex-wrap: wrap;
}

.une-valeur {
    font-size: clamp(3rem, 6vw, 4rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1;
    color: var(--ink);
}

.une-valeur small { font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--ink-soft); margin-left: 8px; }

/* Les termes du calcul : logés, partis, chambres. Chiffres alignés en colonne. */
.une-calcul { display: flex; gap: 8px 28px; flex-wrap: wrap; margin: 0; }
.une-calcul > div { min-width: 0; }
.une-calcul dt { font-size: .75rem; font-weight: 500; color: var(--ink-soft); margin: 0 0 2px; }
.une-calcul dd { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }

/* Barre de partage : segments fins à bouts arrondis, séparés par 2 px de fond. */
.partage {
    display: flex;
    gap: 2px;
    height: 12px;
    margin: 22px 0 10px;
}

.partage i {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: 4px;
    transform-origin: left center;
    animation: palm-jauge .7s var(--courbe) backwards .1s;
    transition: filter var(--duree) ease;
}

.partage i:hover { filter: brightness(1.1); }
.partage .presents, .legende-partage .presents { background: var(--donnee); }
.partage .excursion, .legende-partage .excursion { background: var(--donnee-gris); }

.legende-partage {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    font-size: .8125rem;
    color: var(--ink-soft);
}

.legende-partage li { display: flex; align-items: center; gap: 6px; }
.legende-partage b { color: var(--ink); font-variant-numeric: tabular-nums; }
.legende-partage i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

/* Pastille de légende devant les deux totaux de l'origine des réservations. */
.pastille-donnee {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: 1px;
    background: var(--donnee);
}

.pastille-donnee.gris { background: var(--donnee-gris); }

/* Trois services côte à côte, séparés d'un filet ; empilés sur téléphone. */
.services { display: grid; grid-template-columns: 1fr; gap: 18px; }

@media (min-width: 768px) {
    .services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
    .service { padding: 0 20px; border-left: 1px solid var(--line-soft); }
    .service:first-child { padding-left: 0; border-left: 0; }
    .service:last-child { padding-right: 0; }
}

/* Liste des sorties du jour : celle qui est dehors en ce moment se distingue d'un voile. */
.sorties > li.sortie { padding-left: 12px; padding-right: 12px; margin: 0 -12px; border-radius: var(--rayon-sm); }
.sorties > li.sortie.encours { background: linear-gradient(90deg, var(--excursion-pale), transparent 85%); border-bottom-color: transparent; }
.sorties > li.sortie.annulee b { text-decoration: line-through; text-decoration-color: var(--muted); }

/* ------------------------------------------------------------------
   Petites classes d'appoint, qui remplacent les styles écrits dans les
   pages. En fin de fichier : à spécificité égale, elles l'emportent sur
   la couleur propre de .muet, .discret, .aide ou .trace.
   ------------------------------------------------------------------ */
.texte-sm { font-size: .8125rem; }
.texte-xs { font-size: .75rem; }
.texte-or { color: var(--or-fonce); }
.texte-or-vif { color: var(--or); }
.texte-doux { color: var(--ink-soft); }
.texte-excursion { color: var(--excursion); }
.texte-resto { color: var(--resto); }
.texte-presents { color: var(--presents); }
.texte-danger { color: var(--danger); }
.mention-or { font-size: .8125rem; font-weight: 600; color: var(--or-fonce); }
.etiquette-sombre { color: var(--muted); }
.chambre-passant { font-size: .6875rem; color: var(--piscine); }
.chiffres { font-variant-numeric: tabular-nums; }
.defilement-court { max-height: 20rem; }
.sans-debord { min-width: 0; }

/* La zone de contenu reçoit le focus du lien d'évitement : pas de cadre autour de toute la page. */
.contenu:focus { outline: none; }

/* Page d'erreur (adresse introuvable, requête refusée) : logo réduit au-dessus du panneau, sur le fond de la connexion. */
.connexion .boite.introuvable { max-width: 380px; }
.introuvable .logo svg { width: 84px; height: auto; margin-bottom: 24px; }
.introuvable h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
.chambre.heure { min-width: 3rem; }

/* Les animations ne portent aucune information : on les coupe sans rien perdre.
   En dernier, pour l'emporter sur toutes les règles qui en posent une. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}