/* =============================================================================
   Espace client DIMOBI — feuille propre à l'application
   =============================================================================
   Direction : « la carotte de sondage ». La terre (bruns profonds, humus) porte
   la marque et la navigation ; le cuivre DIMOBI porte l'action ; un seul bleu,
   celui de la nappe, porte le focus et l'information.

   Chargée APRÈS le socle commun (commun/ui : jetons, base, composants,
   connexion), dont elle reprend les variables et les composants : ne contient
   que ce qui est propre à l'espace client (accueil, explorateur, activité,
   tickets, paramètres, compte). Aucun attribut style= ni <style> dans les
   gabarits (la CSP les refuse).
   ============================================================================= */

/* ── En-tête ──────────────────────────────────────────────────────────── */
/* La recherche n'est que sur l'accueil, et on lui laisse de l'air au-dessus et
   sous le liseré. Ailleurs l'en-tête s'efface : ni recherche ni liseré, l'Aide
   seule. Son fond flouté reste, pour que le contenu qui défile ne passe pas net
   sous l'Aide (demande de Noé du 2026-09-12). */
/* `flex-shrink: 0` : l'en-tête est un élément flexible de la zone, qu'une page
   longue comprimerait sinon jusqu'à sa hauteur minimale, padding compris. */
.entete--recherche { height: auto; min-height: var(--entete-hauteur); padding-block: .95rem; flex-shrink: 0; }
.entete--sobre { border-bottom-color: transparent; }

/* ── Accueil ──────────────────────────────────────────────────────────── */
.accueil-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 2rem clamp(2rem, 4vw, 4rem);
    margin-bottom: 2.25rem; padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--rayon-xl);
    color: var(--sur-humus);
    background:
        radial-gradient(60% 90% at 0% 0%, rgb(184 112 74 / .28), transparent 70%),
        radial-gradient(50% 70% at 100% 100%, rgb(76 195 207 / .12), transparent 70%),
        var(--humus);
    box-shadow: var(--ombre-3);
}
/* Grain de terre, en pointillé, qui s'efface vers la droite. */
.accueil-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(rgb(255 255 255 / .06) 1px, transparent 1.2px) 0 0 / 6px 6px;
    mask-image: linear-gradient(115deg, #000, transparent 65%);
    -webkit-mask-image: linear-gradient(115deg, #000, transparent 65%);
}
.hero-texte { display: flex; flex-direction: column; min-width: 0; }
.accueil-hero .surtitre { color: var(--cuivre-clair); }
.accueil-hero h1 { margin-top: .6rem; color: var(--sur-humus); font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.4rem); }
.accueil-hero .chapo { color: var(--sur-humus-2); margin-top: .55rem; }
.stats { display: flex; flex-wrap: wrap; gap: 1.25rem 2.75rem; margin: 1.9rem 0 0; }
.stat { display: flex; flex-direction: column-reverse; gap: .45rem; }
.stat dt { font: 500 .7rem/1.2 var(--police-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sur-humus-3); }
.stat dd {
    margin: 0; display: flex; align-items: baseline; gap: .3rem; white-space: nowrap;
    font: 650 clamp(1.9rem, 1.3rem + 1.4vw, 2.6rem)/1 var(--police-titre);
    color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stat dd small { font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--sur-humus-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: 2rem; }
.accueil-hero .bouton:not(.bouton--verre) { background: var(--spring-wood); color: var(--cocoa); box-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.accueil-hero .bouton:not(.bouton--verre):hover { background: #fff; color: var(--cocoa); }
.bouton--verre {
    background: rgb(255 255 255 / .07); color: var(--sur-humus); border-color: rgb(255 255 255 / .14); box-shadow: none;
}
.bouton--verre:hover { background: rgb(255 255 255 / .12); color: #fff; }
.touche-bouton {
    margin-left: .2rem; padding: .08rem .42rem; border-radius: 5px;
    border: 1px solid rgb(255 255 255 / .22); font: 500 .72rem/1.3 var(--police-mono); color: var(--sur-humus-2);
}
@media (hover: none) { .touche-bouton { display: none; } }

/* Activité : une carotte par semaine, pendue sous le sol. Plus elle descend,
   plus la semaine a compté de feuilles — et plus elle traverse de strates. */
.activite {
    margin: 0; display: flex; flex-direction: column; gap: 1rem; align-self: stretch;
    padding: 1.15rem 1.25rem 1rem; border-radius: 18px;
    background: rgb(255 255 255 / .035); border: 1px solid rgb(255 255 255 / .08);
}
.activite-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1rem; }
.activite-tete .surtitre { color: var(--sur-humus-3); }
.activite-total { font-size: .85rem; color: var(--sur-humus-2); }
.activite-total strong { margin-right: .25rem; font: 650 1.4rem/1 var(--police-titre); color: #fff; }
.carottes-hebdo {
    --profondeur: 128px;
    position: relative; flex: 1;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: clamp(4px, .8vw, 10px);
    min-height: calc(var(--profondeur) + 34px);
    margin: 0; padding: 12px 0 0; list-style: none;
}
/* Le sol : herbe, puis terre végétale grenue. */
.carottes-hebdo::before {
    content: ""; position: absolute; left: -6px; right: -6px; top: 0; height: 12px; border-radius: 3px;
    background:
        radial-gradient(rgb(0 0 0 / .28) 1px, transparent 1.3px) 0 3px / 5px 5px,
        linear-gradient(to bottom, #7b8f4f 0 3px, var(--strate-1) 3px);
}
.carotte-hebdo { position: relative; display: flex; justify-content: center; height: var(--profondeur); min-width: 0; }
/* Le puits de chaque semaine, même vide : la grille du chantier. */
.carotte-hebdo::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
    border-left: 1px dashed rgb(255 255 255 / .07);
}
.carotte-hebdo-barre {
    position: relative; z-index: 1; width: min(100%, 22px); height: var(--p, 0%); min-height: 3px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(to bottom,
        var(--strate-2) 0 15%, var(--strate-3) 15% 37%, var(--strate-4) 37% 56%,
        var(--strate-5) 56% 78%, var(--strate-6) 78% 100%) top / 100% var(--profondeur) no-repeat;
    box-shadow: inset 2px 0 0 rgb(255 255 255 / .14), inset -3px 0 0 rgb(0 0 0 / .22);
    animation: forage .9s var(--ressort) both;
    animation-delay: calc(var(--i, 0) * 45ms + .15s);
}
.carotte-hebdo-barre.prof-0 { background: var(--strate-1); opacity: .45; }
.carotte-hebdo-barre > span {
    position: absolute; top: 100%; left: 50%; translate: -50% 5px;
    font: 600 .68rem/1 var(--police-mono); color: var(--sur-humus-2); white-space: nowrap;
}
.carotte-hebdo:hover .carotte-hebdo-barre { filter: brightness(1.15); }
/* Cette semaine : repère bleu (la nappe) posé sur le sol. */
.carotte-hebdo--courante::before {
    content: ""; position: absolute; top: -9px; left: 50%; width: 7px; height: 7px; translate: -50% 0; border-radius: 50%;
    background: var(--nappe-vive); box-shadow: 0 0 0 4px rgb(76 195 207 / .22);
}
.carotte-hebdo--courante .carotte-hebdo-barre > span { color: var(--nappe-vive); }
.activite-axe { display: flex; justify-content: space-between; font: 500 .68rem/1 var(--police-mono); color: var(--sur-humus-3); }
.prof-0 { --p: 0%; } .prof-5 { --p: 5%; } .prof-10 { --p: 10%; } .prof-15 { --p: 15%; } .prof-20 { --p: 20%; }
.prof-25 { --p: 25%; } .prof-30 { --p: 30%; } .prof-35 { --p: 35%; } .prof-40 { --p: 40%; } .prof-45 { --p: 45%; }
.prof-50 { --p: 50%; } .prof-55 { --p: 55%; } .prof-60 { --p: 60%; } .prof-65 { --p: 65%; } .prof-70 { --p: 70%; }
.prof-75 { --p: 75%; } .prof-80 { --p: 80%; } .prof-85 { --p: 85%; } .prof-90 { --p: 90%; } .prof-95 { --p: 95%; }
.prof-100 { --p: 100%; }
.carotte-hebdo:nth-child(2) { --i: 1; } .carotte-hebdo:nth-child(3) { --i: 2; } .carotte-hebdo:nth-child(4) { --i: 3; }
.carotte-hebdo:nth-child(5) { --i: 4; } .carotte-hebdo:nth-child(6) { --i: 5; } .carotte-hebdo:nth-child(7) { --i: 6; }
.carotte-hebdo:nth-child(8) { --i: 7; } .carotte-hebdo:nth-child(9) { --i: 8; } .carotte-hebdo:nth-child(10) { --i: 9; }
.carotte-hebdo:nth-child(11) { --i: 10; } .carotte-hebdo:nth-child(12) { --i: 11; }
@keyframes forage { from { height: 0; } }

@media (max-width: 1100px) { .accueil-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
    .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
    .stat dd { font-size: clamp(1.3rem, 6.2vw, 1.75rem); }
    .stat dt { font-size: .62rem; }
    .hero-actions { padding-top: 1.5rem; }
    .hero-actions .bouton { flex: 1 1 auto; }
    .carottes-hebdo { --profondeur: 92px; }
    .activite { padding: 1rem; }
}

/* Dernières feuilles : de vraies pages, posées sur le bureau. */
.section-accueil { margin-bottom: 2.25rem; container-type: inline-size; }
.section-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.1rem; }
.section-tete h2 { font-size: 1.35rem; }
.section-tete p { margin-top: .25rem; color: var(--texte-3); font-size: .9rem; }
.galerie-feuilles {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem;
    margin: 0; padding: 0; list-style: none;
}
/* Une seule rangée : on montre autant de feuilles que de colonnes. */
@container (max-width: 1179.98px) { .galerie-feuilles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container (max-width: 939.98px) { .galerie-feuilles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 719.98px) { .galerie-feuilles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 940px) and (max-width: 1179.98px) { .feuille-carte:nth-child(n + 6) { display: none; } }
@container (min-width: 720px) and (max-width: 939.98px) { .feuille-carte:nth-child(n + 5) { display: none; } }
@container (min-width: 560px) and (max-width: 719.98px) { .feuille-carte:nth-child(n + 4) { display: none; } }
.feuille-carte {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    border: 1px solid var(--ligne); border-radius: 16px; background: var(--surface); box-shadow: var(--ombre-1);
    transition: transform .25s var(--ressort), box-shadow .25s, border-color .25s;
}
.feuille-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-3); border-color: var(--ligne-forte); }
.feuille-visuel {
    position: relative; overflow: hidden; aspect-ratio: 4 / 5;
    display: grid; place-items: center;
    margin: .5rem .5rem 0; border-radius: 11px; border: 1px solid var(--ligne);
    background:
        radial-gradient(color-mix(in srgb, var(--f-pdf) 14%, transparent) 1px, transparent 1.3px) 0 0 / 8px 8px,
        var(--f-pdf-voile);
    color: var(--f-pdf);
}
.feuille-corps { display: grid; gap: .2rem; min-width: 0; padding: .7rem .85rem .85rem; }
.feuille-nom {
    color: var(--texte); font-weight: 650; font-size: .88rem; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feuille-nom::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.feuille-nom:focus-visible { outline: none; }
.feuille-carte:has(.feuille-nom:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.feuille-contexte { font-size: .78rem; color: var(--texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feuille-date { font: 500 .72rem/1.3 var(--police-mono); color: var(--texte-3); }
@container (max-width: 559.98px) {
    /* Téléphone : les pages défilent au doigt, une et demie à l'écran. */
    .galerie-feuilles {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 58%;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline: calc(-1 * clamp(1rem, 3vw, 2.5rem)); padding: .25rem clamp(1rem, 3vw, 2.5rem) .75rem;
        scroll-padding-inline: clamp(1rem, 3vw, 2.5rem);
    }
    .galerie-feuilles::-webkit-scrollbar { display: none; }
    .feuille-carte { scroll-snap-align: start; }
}

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.bento > * { min-width: 0; }
.bento > .carte { margin: 0; }
.bento-6 { grid-column: span 6; }
.bento-12 { grid-column: 1 / -1; }
@media (max-width: 1100px) { .bento-6 { grid-column: 1 / -1; } }
.a-venir { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.a-venir li {
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .8rem; border-radius: 12px; border: 1px dashed var(--ligne-forte);
}
.a-venir li > span:nth-child(2) { min-width: 0; }
.a-venir strong { display: block; font-size: .95rem; }
.a-venir small { color: var(--texte-3); font-size: .8rem; }
.a-venir .rubrique-icone { background: var(--creux); color: var(--texte-3); }
.a-venir .etiquette { background: var(--creux); color: var(--texte-3); }

.raccourcis { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.raccourci {
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .8rem; border-radius: 12px;
    border: 1px solid var(--ligne); color: var(--texte); text-decoration: none;
    transition: border-color var(--duree), background var(--duree), transform .2s var(--ressort);
}
.raccourci:hover { background: var(--surface-2); border-color: var(--ligne-forte); color: var(--texte); transform: translateX(2px); }
.raccourci strong { display: block; font-size: .95rem; }
.raccourci small { color: var(--texte-3); font-size: .8rem; }
.raccourci > .icone:last-child { margin-left: auto; color: var(--texte-3); }

.rubriques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: .75rem; }
.rubrique {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: 1rem 1.1rem; border-radius: 14px;
    border: 1px solid var(--ligne); background: var(--surface);
    color: inherit; text-decoration: none;
    transition: border-color var(--duree), transform .2s var(--ressort), box-shadow .2s;
}
a.rubrique:hover { border-color: var(--ligne-forte); transform: translateY(-2px); box-shadow: var(--ombre-2); color: inherit; }
.rubrique h3 { font-size: .98rem; }
.rubrique p { margin-top: .25rem; color: var(--texte-3); font-size: .86rem; line-height: 1.45; }
.rubrique--bientot { background: transparent; border-style: dashed; }
.rubrique--bientot .rubrique-icone { background: var(--creux); color: var(--texte-3); }
.rubrique-icone {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 11px;
    background: var(--accent-voile); color: var(--lien);
}
.rubrique .etiquette { margin: .55rem 0 0; display: inline-block; background: var(--creux); color: var(--texte-3); }

/* ── Icônes de fichiers ───────────────────────────────────────────────── */
.icone-fichier {
    position: relative; display: grid; place-items: center; flex: none; overflow: hidden;
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--f-autre-voile); color: var(--f-autre);
}
.icone-fichier--pdf { background: var(--f-pdf-voile); color: var(--f-pdf); }
.icone-fichier--tableur { background: var(--f-tableur-voile); color: var(--f-tableur); }
.icone-fichier--image { background: var(--f-image-voile); color: var(--f-image); }
.icone-fichier--archive { background: var(--f-archive-voile); color: var(--f-archive); }
.icone-fichier--dossier { background: var(--f-dossier-voile); color: var(--f-dossier); }
.icone-fichier img[data-miniature] { inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ── Explorateur : fil d'Ariane (chaque niveau porte la couleur de sa strate) ── */
.fil {
    display: flex; align-items: center; gap: .15rem;
    margin: 0 0 .85rem; padding: 0; list-style: none;
    font-size: .88rem;
    overflow-x: auto; scrollbar-width: none;
}
.fil::-webkit-scrollbar { display: none; }
.fil[data-defile] {
    mask-image: linear-gradient(to right, transparent, #000 28px);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
}
.fil li { display: flex; align-items: center; gap: .15rem; flex: none; }
.fil li + li::before {
    content: ""; width: 14px; height: 14px; flex: none; opacity: .5;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    color: var(--texte-3);
}
.fil a, .fil span[aria-current] {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .3rem .55rem; border-radius: 8px;
    color: var(--texte-2); text-decoration: none; white-space: nowrap;
}
.fil a:hover { background: var(--creux); color: var(--texte); }
.fil span[aria-current] { color: var(--texte); font-weight: 650; }
.fil .niveau { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--strate-3); }
.fil li:nth-child(3) .niveau { background: var(--strate-2); }
.fil li:nth-child(4) .niveau { background: var(--strate-1); }
.fil li:nth-child(5) .niveau { background: var(--strate-5); }
.fil li:nth-child(6) .niveau { background: var(--strate-4); }
.fil li:nth-child(n + 7) .niveau { background: var(--strate-6); }

/* ── Explorateur : barre d'outils ─────────────────────────────────────── */
.barre-outils {
    position: sticky; top: calc(var(--entete-hauteur) + .6rem); z-index: 6;
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    margin-bottom: 1rem; padding: .55rem;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ligne); border-radius: 14px; box-shadow: var(--ombre-1);
}
.barre-outils form { margin: 0; }
.filtre { flex: 1 1 240px; min-width: 0; }
.filtre input { min-height: 40px; border-radius: 10px; background: var(--surface-2); }
.resume { font: 500 .8rem/1.2 var(--police-mono); color: var(--texte-3); white-space: nowrap; padding: 0 .35rem; }
.segmente { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--creux); }
.segmente a {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 34px; padding: .35rem .7rem; border-radius: 8px;
    color: var(--texte-2); text-decoration: none; font-weight: 600; font-size: .85rem;
}
.segmente a:hover { color: var(--texte); }
.segmente a[aria-current="true"] { background: var(--surface); color: var(--texte); box-shadow: var(--ombre-1); }

.menu { position: relative; }
.menu > summary {
    list-style: none; display: inline-flex; align-items: center; gap: .45rem;
    min-height: 40px; padding: .35rem .75rem; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--ligne); background: var(--surface); color: var(--texte-2);
    font-weight: 600; font-size: .85rem; white-space: nowrap;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { color: var(--texte); border-color: var(--ligne-forte); }
.menu[open] > summary { border-color: var(--focus); color: var(--texte); }
.menu-liste {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px;
    display: grid; gap: 2px; padding: .35rem; margin: 0; list-style: none;
    background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; box-shadow: var(--ombre-3);
    animation: apparaitre .16s var(--ressort) both;
}
.menu-liste a {
    display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 8px;
    color: var(--texte); text-decoration: none; font-size: .9rem;
}
.menu-liste a:hover { background: var(--creux); }
.menu-liste a[aria-current="true"] { color: var(--lien); font-weight: 650; }
.menu-liste a[aria-current="true"]::after { content: "✓"; margin-left: auto; }

/* ── Explorateur : liste ──────────────────────────────────────────────── */
.panneau-fichiers {
    background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon-l);
    box-shadow: var(--ombre-1); overflow: clip;
}
.liste-fichiers { list-style: none; margin: 0; padding: .35rem; }
.entete-liste, .ligne-fichier {
    display: grid; align-items: center; gap: .9rem;
    grid-template-columns: 40px minmax(0, 1fr) 150px 90px 92px;
}
.entete-liste {
    padding: .7rem 1.1rem .6rem;
    border-bottom: 1px solid var(--ligne);
    font: 600 .7rem/1.2 var(--police-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3);
}
.entete-liste a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.entete-liste a:hover, .entete-liste a[aria-current="true"] { color: var(--texte); }
.entete-liste .colonne-taille, .ligne-fichier .cellule-taille { text-align: right; justify-content: flex-end; }
.ligne-fichier {
    position: relative;
    padding: .55rem .75rem; border-radius: 12px;
    transition: background var(--duree);
}
.ligne-fichier:hover { background: var(--surface-2); }
.ligne-fichier, .tuile { scroll-margin-block: calc(var(--entete-hauteur) + 5.5rem) 1.5rem; }
.ligne-fichier + .ligne-fichier::before {
    content: ""; position: absolute; left: 3.6rem; right: .75rem; top: 0; height: 1px; background: var(--ligne);
}
.ligne-fichier:hover::before, .ligne-fichier:hover + .ligne-fichier::before { opacity: 0; }
.nom-fichier { min-width: 0; display: grid; gap: .1rem; }
.nom-fichier a {
    color: var(--texte); font-weight: 620; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nom-fichier a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.nom-fichier a:focus-visible { outline: none; }
.nom-fichier a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -2px; }
.sous-ligne { font-size: .8rem; color: var(--texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cellule-date, .cellule-taille { font: 400 .83rem/1.2 var(--police-mono); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.ligne-actions { position: relative; z-index: 1; display: flex; justify-content: flex-end; gap: .15rem; }
.ligne-actions .bouton-icone { width: 36px; height: 36px; opacity: .55; }
.ligne-fichier:hover .ligne-actions .bouton-icone, .ligne-actions .bouton-icone:focus-visible { opacity: 1; }
.ligne-fichier--dossier .nom-fichier a { font-weight: 650; }
/* Dossiers à enfant unique, repliés en une ligne : la suite de la chaîne, plus discrète. */
.chaine { font-weight: 480; color: var(--texte-2); }
.chaine-sep { margin: 0 .4em; color: var(--texte-3); font-weight: 400; }

/* La liste s'adapte à la place qu'on lui donne, pas seulement à l'écran. */
.panneau-fichiers { container-type: inline-size; }
@container (max-width: 700px) {
    .entete-liste { display: none; }
    .ligne-fichier { grid-template-columns: 40px minmax(0, 1fr) auto; gap: .75rem; padding: .6rem .5rem; }
    .cellule-date, .cellule-taille { display: none; }
    .ligne-actions .bouton-icone { opacity: 1; }
    .ligne-fichier + .ligne-fichier::before { left: 3.3rem; }
}
@media (hover: none) { .ligne-actions .bouton-icone { opacity: 1; } }

/* ── Explorateur : grille ─────────────────────────────────────────────── */
.grille-fichiers {
    display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
@media (max-width: 560px) {
    .grille-fichiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .tuile-corps { padding: .6rem .65rem .7rem; }
    .tuile-nom { font-size: .84rem; }
}
.tuile {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px;
    box-shadow: var(--ombre-1); overflow: hidden;
    transition: transform .22s var(--ressort), box-shadow .22s, border-color .22s;
}
.tuile:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); border-color: var(--ligne-forte); }
.tuile-visuel {
    position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
    background: var(--f-autre-voile); color: var(--f-autre);
}
/* Miniatures : posées sur l'icône de repli, qui reste visible tant qu'elles chargent
   (ou si leur rendu échoue : le script les retire alors). */
img[data-miniature] { position: absolute; transition: transform .4s var(--ressort), opacity .3s; }
.tuile--image img[data-miniature] { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tuile:hover.tuile--image img[data-miniature] { transform: scale(1.04); }
/* Une feuille : sa page occupe toute la case, tête en haut (on reconnaît l'en-tête). */
.tuile--pdf img[data-miniature], .feuille-visuel img[data-miniature] {
    inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.tuile:hover.tuile--pdf img[data-miniature], .feuille-carte:hover img[data-miniature] { transform: scale(1.035); }
.tuile--pdf .tuile-visuel { background: var(--f-pdf-voile); color: var(--f-pdf); }
.tuile--tableur .tuile-visuel { background: var(--f-tableur-voile); color: var(--f-tableur); }
.tuile--image .tuile-visuel { background: var(--f-image-voile); color: var(--f-image); }
.tuile--archive .tuile-visuel { background: var(--f-archive-voile); color: var(--f-archive); }
.tuile--dossier .tuile-visuel { background: var(--f-dossier-voile); color: var(--f-dossier); }
/* Feuille stylisée : une page blanche, coin plié, bandeau de l'extension. */
.feuillet {
    position: relative; width: 44%; aspect-ratio: 3 / 4;
    border-radius: 4px 12px 4px 4px;
    background:
        linear-gradient(currentColor, currentColor) 18% 26% / 50% 4px no-repeat,
        repeating-linear-gradient(to bottom, color-mix(in srgb, currentColor 18%, transparent) 0 3px, transparent 3px 9px) 18% 44% / 64% 40% no-repeat,
        var(--surface);
    box-shadow: 0 1px 2px rgb(48 31 30 / .12), 0 10px 22px -10px rgb(48 31 30 / .35);
    transform: rotate(-2deg);
    transition: transform .3s var(--ressort);
}
.feuillet::before {
    content: ""; position: absolute; top: 0; right: 0; width: 26%; aspect-ratio: 1;
    background: linear-gradient(225deg, var(--fond) 50%, color-mix(in srgb, currentColor 30%, var(--surface)) 50%);
    border-radius: 0 12px 0 4px;
}
.feuillet span {
    position: absolute; left: -8%; bottom: 14%;
    padding: .18rem .4rem; border-radius: 4px;
    font: 700 .62rem/1 var(--police-mono); letter-spacing: .06em;
    background: currentColor;
}
.feuillet span b { color: var(--surface); font-weight: 700; }
.tuile:hover .feuillet { transform: rotate(0deg) translateY(-2px); }
.tuile-corps { position: relative; padding: .75rem .85rem .85rem; display: grid; gap: .25rem; }
.tuile-nom {
    color: var(--texte); font-weight: 620; font-size: .9rem; line-height: 1.3; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    word-break: break-word;
}
.tuile-nom::after { content: ""; position: absolute; inset: -100vh 0 0 0; }
.tuile-nom:focus-visible { outline: none; }
.tuile:has(.tuile-nom:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tuile-meta { font: 400 .75rem/1.3 var(--police-mono); color: var(--texte-3); }
.tuile-action {
    position: absolute; top: .5rem; right: .5rem; z-index: 2;
    opacity: 0; transform: translateY(-4px);
    transition: opacity var(--duree), transform var(--duree) var(--ressort);
}
.tuile-action .bouton-icone { background: var(--surface); box-shadow: var(--ombre-2); color: var(--texte); }
.tuile:hover .tuile-action, .tuile-action:focus-within { opacity: 1; transform: none; }
@media (hover: none) { .tuile-action { opacity: 1; transform: none; } }
.pile-feuilles { position: absolute; inset: 0; }
.pile-feuilles img[data-miniature] {
    left: 50%; top: 10%; width: 46%; height: auto; translate: -50% 0;
    border-radius: 3px; background: #fff;
    box-shadow: 0 1px 2px rgb(48 31 30 / .16), 0 10px 22px -10px rgb(48 31 30 / .45);
    transition: transform .35s var(--ressort);
}
.pile-feuilles--deux img:first-child { transform: translateX(-24%) rotate(-7deg); }
.pile-feuilles--deux img:last-child { transform: translateX(20%) rotate(4deg); }
.tuile:hover .pile-feuilles img:only-child { transform: translateY(-8px) rotate(-2deg); }
.tuile:hover .pile-feuilles--deux img:first-child { transform: translateX(-32%) translateY(-6px) rotate(-10deg); }
.tuile:hover .pile-feuilles--deux img:last-child { transform: translateX(27%) translateY(-9px) rotate(6deg); }
/* La chemise : l'avant du dossier, qui cache le bas des feuilles. */
.chemise {
    position: absolute; z-index: 1; left: 7%; right: 7%; bottom: 6px; height: 42%;
    border-radius: 12px 12px 3px 3px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--f-dossier) 78%, #fff), var(--f-dossier));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 -8px 18px -10px rgb(48 31 30 / .45);
}
.tuile--dossier .tuile-meta { font: 400 .8rem/1.35 var(--police); }
.marque-compilation {
    display: inline-block; margin-right: .45rem; padding: .12rem .4rem; border-radius: 5px; vertical-align: 1px;
    font: 600 .62rem/1.2 var(--police-mono); letter-spacing: .06em; text-transform: uppercase;
    background: var(--texte); color: var(--surface);
}
.marque-compilation--tuile { position: absolute; left: .6rem; top: .6rem; z-index: 1; margin: 0; box-shadow: var(--ombre-1); }
.compte-elements {
    position: absolute; right: .6rem; bottom: .8rem;
    padding: .15rem .45rem; border-radius: 999px;
    font: 600 .7rem/1.3 var(--police-mono); background: var(--surface); color: var(--texte-2); box-shadow: var(--ombre-1);
}

/* ── Coup d'œil : la feuille par-dessus la liste, sans la quitter ─────── */
.coup-doeil {
    width: min(1120px, calc(100vw - 2rem)); height: min(90dvh, 1100px); max-width: none; max-height: none;
    padding: 0; border: 1px solid rgb(255 255 255 / .08); border-radius: 18px;
    background: var(--humus); color: var(--sur-humus); overflow: hidden;
    box-shadow: 0 50px 120px -30px rgb(0 0 0 / .7);
}
.coup-doeil:focus { outline: none; }
.coup-doeil[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: coup-doeil .24s var(--ressort); }
.coup-doeil::backdrop { background: rgb(12 8 6 / .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.coup-doeil-tete { display: flex; align-items: center; gap: .35rem; padding: .55rem .55rem .55rem 1.1rem; border-bottom: 1px solid rgb(255 255 255 / .08); }
.coup-doeil-titre { flex: 1; min-width: 0; margin: 0; font: 620 .95rem/1.3 var(--police); color: var(--sur-humus); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coup-doeil-position { padding: 0 .5rem; font: 500 .75rem/1 var(--police-mono); color: var(--sur-humus-3); white-space: nowrap; }
.coup-doeil .bouton-icone { color: var(--sur-humus-2); }
.coup-doeil .bouton-icone:hover { background: rgb(255 255 255 / .08); color: #fff; }
.coup-doeil .bouton-icone:disabled { opacity: .3; cursor: default; background: none; }
.coup-doeil-corps { position: relative; display: grid; place-items: center; min-height: 0; background: #3a2826; }
.coup-doeil-corps iframe { width: 100%; height: 100%; border: 0; background: #525659; }
.coup-doeil-corps img { max-width: 100%; max-height: 100%; object-fit: contain; }
@keyframes coup-doeil { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* ── États vides ──────────────────────────────────────────────────────── */
.vide { display: grid; justify-items: center; gap: .6rem; padding: clamp(2.5rem, 7vw, 4.5rem) 1rem; text-align: center; }
.vide h2 { font-size: 1.2rem; }
.vide p { color: var(--texte-3); max-width: 44ch; }
.vide .bouton { margin-top: .6rem; }
/* Le tube vide : une carotte sans terre. */
.tube-vide {
    width: 38px; height: 82px; margin-bottom: .6rem;
    border: 2px dashed var(--ligne-forte); border-radius: 19px;
    background: linear-gradient(to bottom, transparent 62%, color-mix(in srgb, var(--nappe) 16%, transparent) 62%);
}

/* ── Racines ──────────────────────────────────────────────────────────── */
.racines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.racine {
    position: relative; overflow: hidden;
    display: grid; gap: .9rem; padding: 1.25rem;
    border: 1px solid var(--ligne); border-radius: var(--rayon-l);
    background: var(--surface); box-shadow: var(--ombre-1);
    color: inherit; text-decoration: none;
    transition: transform .22s var(--ressort), box-shadow .22s, border-color .22s;
}
.racine::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(to right, var(--strate-3) 0 20%, var(--strate-2) 20% 40%, var(--strate-1) 40% 55%,
        var(--strate-5) 55% 70%, var(--strate-4) 70% 88%, var(--strate-6) 88% 100%);
}
.racine:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); border-color: var(--ligne-forte); color: inherit; }
.racine h2 { font-size: 1.25rem; }
.racine-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font: 400 .8rem/1.3 var(--police-mono); color: var(--texte-3); }

/* ── Résultats de recherche ───────────────────────────────────────────── */
.chemin-resultat { font: 400 .76rem/1.3 var(--police-mono); color: var(--texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherche-page { max-width: 620px; margin-bottom: 1.25rem; }
.recherche-page input { min-height: 50px; font-size: 1.05rem; border-radius: 14px; }

/* ── Aperçu d'un fichier ──────────────────────────────────────────────── */
.apercu {
    display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.25rem;
    height: calc(100dvh - var(--entete-hauteur) - 9.5rem); min-height: 540px;
}
.visionneuse {
    position: relative; display: grid; min-height: 0;
    border-radius: var(--rayon-l); overflow: hidden;
    background: #3a2826; border: 1px solid var(--ligne); box-shadow: var(--ombre-2);
}
.visionneuse iframe { width: 100%; height: 100%; border: 0; background: #525659; }
.visionneuse img { width: 100%; height: 100%; object-fit: contain; }
.visionneuse--vide { place-items: center; background: var(--surface-2); }
.visionneuse-substitut { display: none; }
@media (max-width: 1023.98px), (pointer: coarse) {
    /* Un lecteur PDF encadré ne s'affiche pas (ou mal) sur téléphone et tablette :
       on propose d'ouvrir le document dans le lecteur de l'appareil. */
    .visionneuse--pdf { height: auto !important; background: var(--surface-2); }
    .visionneuse--pdf iframe { display: none; }
    .visionneuse--pdf .visionneuse-substitut { display: grid; }
    .visionneuse--pdf ~ .panneau-info .doublon-mobile { display: none; }
    .astuce-clavier { display: none; }
}
.visionneuse-substitut { justify-items: center; gap: 1.1rem; padding: 1.5rem 1rem 1.6rem; text-align: center; }
.page-pdf {
    position: relative; display: grid; place-items: center; overflow: hidden;
    width: min(100%, 420px); aspect-ratio: 210 / 297; border-radius: 6px;
    background: var(--f-pdf-voile); color: var(--f-pdf);
    box-shadow: 0 1px 2px rgb(48 31 30 / .12), 0 22px 44px -22px rgb(48 31 30 / .5);
}
.page-pdf .feuillet { width: 38%; }
.page-pdf img[data-miniature] { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.visionneuse-substitut .formulaire-actions { justify-content: center; }
.astuce-clavier kbd {
    padding: .05rem .38rem; border: 1px solid var(--ligne-forte); border-radius: 5px;
    font: 500 .75rem/1.3 var(--police-mono); background: var(--surface);
}
.details dd a { color: inherit; text-decoration-color: var(--ligne-forte); }
.details dd a:hover { color: var(--lien); }
.panneau-info { display: flex; flex-direction: column; gap: 1rem; min-height: 0; overflow-y: auto; }
.panneau-info h1 { font-size: 1.25rem; line-height: 1.25; word-break: break-word; }
.details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem 1rem; margin: 0; font-size: .9rem; }
.details dt { color: var(--texte-3); }
.details dd { margin: 0; color: var(--texte); font-family: var(--police-mono); font-size: .84rem; word-break: break-word; }
.actions-apercu { display: grid; gap: .5rem; }
.pagination-apercu { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pagination-apercu .position { font: 500 .8rem/1 var(--police-mono); color: var(--texte-3); }
@media (max-width: 1100px) {
    .apercu { grid-template-columns: minmax(0, 1fr); height: auto; }
    .visionneuse { height: 72dvh; }
}

/* ── Activité & tickets : jauges, courbes, compteurs ─────────────────── */
/* Jauge : un anneau, rempli depuis midi dans le sens des aiguilles d'une montre. */
.jauge { position: relative; display: grid; place-items: center; width: 132px; aspect-ratio: 1; flex: none; }
.jauge--l { width: 168px; }
.jauge--m { width: 128px; }
.jauge--s { width: 56px; }
.jauge-anneau { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.jauge-fond, .jauge-arc { fill: none; stroke-width: 11; }
.jauge--s .jauge-fond, .jauge--s .jauge-arc { stroke-width: 14; }
.jauge-fond { stroke: var(--creux); }
.jauge-arc { stroke: var(--accent); stroke-linecap: round; animation: remplir 1s var(--ressort) .15s both; }
.jauge--attention .jauge-arc { stroke: var(--attention); }
.jauge--depasse .jauge-arc { stroke: var(--danger); }
.jauge--inconnu .jauge-arc { stroke: transparent; }
@keyframes remplir { from { stroke-dasharray: 0 100; } }
.jauge-centre { position: relative; display: grid; justify-items: center; line-height: 1; text-align: center; }
.jauge-centre strong { font: 650 2.3rem/1 var(--police-titre); letter-spacing: -.03em; color: var(--texte); font-variant-numeric: tabular-nums; }
.jauge-centre span { margin-top: .3rem; font: 500 .72rem/1.2 var(--police-mono); color: var(--texte-3); }
.jauge--l .jauge-centre strong { font-size: 2.9rem; }
.jauge--m .jauge-centre strong { font-size: 2.2rem; }
.jauge--s .jauge-centre strong { font-size: .95rem; }
.jauge--s .jauge-centre span { display: none; }
.jauge--depasse .jauge-centre strong { color: var(--danger); }

/* Page Activité */
.activite-fiche { display: grid; gap: 1.5rem; padding: clamp(1.2rem, 2.5vw, 1.8rem); }
.activite-fiche + .activite-fiche { margin-top: 1.25rem; }
.activite-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; }
.activite-tete h2 { font-size: 1.35rem; margin-top: .25rem; }
.activite-tete .discret { margin-top: .3rem; }
.badge--cadence { background: var(--accent-voile); color: var(--texte); }
/* Navigation d'un mois à l'autre (page Activité). */
.selecteur-mois {
    display: inline-flex; align-items: center; gap: .15rem;
    padding: .2rem .25rem; border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface);
}
.selecteur-mois strong { min-width: 8.5rem; text-align: center; font: 620 .9rem/1.2 var(--police); }
.bouton-icone--inerte { opacity: .28; cursor: default; }
.selecteur-mois-retour { color: inherit; text-decoration: none; border-radius: 8px; }
.selecteur-mois-retour strong { border-bottom: 1px dashed var(--ligne-forte); }
.selecteur-mois-retour:hover strong { border-bottom-color: var(--lien); color: var(--lien); }
/* Changement de mois sans rechargement : la zone s'estompe le temps de la réponse. */
[data-mois-zone] { transition: opacity .15s; }
[data-mois-zone].charge { opacity: .5; }
.activite-grille { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: center; }
.activite-chiffres { display: grid; justify-items: center; gap: 1.1rem; text-align: center; }
.activite-resume { display: grid; gap: .4rem; }
.activite-libelle { font: 600 .74rem/1.2 var(--police-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.activite-etat { font-size: 1rem; color: var(--texte-2); }
.activite-etat strong { font: 650 1.35rem/1 var(--police-titre); color: var(--texte); margin-right: .15rem; }
.activite-etat--depasse strong { color: var(--danger); }
.activite-projection {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .35rem;
    padding: .4rem .7rem; border-radius: 999px; background: var(--creux); font-size: .84rem; color: var(--texte-2);
}
.activite-projection--alerte { background: var(--attention-voile); color: var(--attention); }
.activite-courbe { display: grid; gap: .9rem; min-width: 0; }
.activite-courbe-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.activite-courbe-tete h3 { font-size: 1rem; }
@media (max-width: 900px) {
    .activite-grille { grid-template-columns: minmax(0, 1fr); }
    .activite-chiffres { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; }
    .activite-projection { justify-content: flex-start; }
    .jauge--l { width: 132px; }
    .jauge--l .jauge-centre strong { font-size: 2.2rem; }
}

/* Légende des courbes : un trait par série, dessiné en CSS. */
.legende { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .78rem; color: var(--texte-3); }
.legende li { display: inline-flex; align-items: center; gap: .4rem; }
.legende li::before { content: ""; width: 18px; height: 0; border-top: 2.5px solid currentColor; }
.legende--trace::before { color: var(--graphique-trace); }
.legende--quota::before { border-top-style: dashed !important; color: var(--graphique-quota); }
.legende--projection::before { border-top-style: dotted !important; color: var(--graphique-trace); }
.legende--precedente::before { border-top-style: dotted !important; color: var(--graphique-precedente); }

/* Courbe : SVG pour le tracé, HTML pour les graduations et les mois. */
.activite-courbe, .graphique {
    --graphique-trace: var(--cuivre);
    --graphique-quota: var(--texte-2);
    --graphique-precedente: var(--ligne-forte);
}
.graphique { margin: 0; color: var(--graphique-trace); }
.graphique-cadre { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; }
.graphique-axe {
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
    height: 200px; margin-top: -.45em; margin-bottom: 1.35rem; padding-bottom: 0;
    font: 500 .7rem/1 var(--police-mono); color: var(--texte-3);
}
.graphique-axe span:last-child { margin-bottom: -.5em; }
.graphique-zone { min-width: 0; }
.graphique-svg { display: block; width: 100%; height: 200px; overflow: visible; }
.graphique-svg path, .graphique-svg line { vector-effect: non-scaling-stroke; }
.graphique-grille { stroke: var(--ligne); stroke-width: 1; }
.graphique-grille--base { stroke: var(--ligne-forte); }
.graphique-aire { stroke: none; }
.graphique-trace { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.graphique-quota { fill: none; stroke: var(--graphique-quota); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .75; }
.graphique-projection { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .8; }
.graphique-precedente { fill: none; stroke: var(--graphique-precedente); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.graphique-point { stroke: currentColor; stroke-width: 9; stroke-linecap: round; transition: stroke-width .15s var(--ressort); }
.graphique-point:hover { stroke-width: 14; }
.graphique-point--dernier { stroke-width: 12; }
.graphique-point--courant { stroke-width: 15; }
.graphique-point--alerte { stroke: var(--danger); }
/* Colonnes de survol : au passage de la souris (ou au clavier), le mois se
   détaille dans une bulle. Tout en CSS — la CSP interdit le style en ligne. */
.graphique-zone { position: relative; }
.graphique-reperes {
    position: absolute; left: 0; right: 0; top: 0; height: 200px;
    display: grid; margin: 0; padding: 0; list-style: none;
}
.graphique-repere { position: relative; cursor: default; }
.graphique-repere::before {
    content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px;
    background: var(--graphique-trace); opacity: 0; transition: opacity .15s;
}
.graphique-repere:hover::before, .graphique-repere:focus-visible::before { opacity: .45; }
.graphique-repere--courant::before { opacity: .22; }
.graphique-plage { margin-left: .5rem; font: 500 .72rem/1 var(--police-mono); color: var(--texte-3); }
.graphique-repere:focus-visible { outline: none; }
.graphique-bulle {
    position: absolute; left: 50%; top: 6px; translate: -50% 0; z-index: 3;
    display: grid; gap: .1rem; padding: .45rem .6rem; min-width: max-content;
    border-radius: 10px; border: 1px solid var(--ligne-forte);
    background: var(--surface); box-shadow: var(--ombre-2);
    font-size: .78rem; line-height: 1.25; text-align: left; color: var(--texte-2);
    opacity: 0; pointer-events: none; transition: opacity .15s;
}
.graphique-repere:hover .graphique-bulle, .graphique-repere:focus-visible .graphique-bulle { opacity: 1; }
.graphique-bulle strong { font-size: .92rem; color: var(--texte); }
.graphique-repere--alerte .graphique-bulle strong { color: var(--danger); }
.graphique-bulle-mois { font: 500 .72rem/1.2 var(--police-mono); color: var(--texte-3); }
.graphique-bulle small { color: var(--texte-3); }
/* Aux extrémités, la bulle se cale sur le bord plutôt que de déborder du cadre. */
.graphique-repere:first-child .graphique-bulle, .graphique-repere:nth-child(2) .graphique-bulle { left: 0; translate: 0 0; }
.graphique-repere:last-child .graphique-bulle, .graphique-repere:nth-last-child(2) .graphique-bulle { left: auto; right: 0; translate: 0 0; }
.graphique-reperes.colonnes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.graphique-reperes.colonnes-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.graphique-reperes.colonnes-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.graphique-mois { display: grid; margin: .55rem 0 0; padding: 0; list-style: none; font: 500 .7rem/1.2 var(--police-mono); color: var(--texte-3); text-align: center; }
.graphique-mois.colonnes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.graphique-mois.colonnes-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.graphique-mois.colonnes-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.graphique-mois li { white-space: nowrap; overflow: hidden; }
@media (max-width: 560px) {
    .graphique-mois.colonnes-12 li { overflow: visible; }
    .graphique-mois.colonnes-12 li:nth-child(even) { visibility: hidden; }
    .tableau .colonne-secondaire { display: none; }
}
@media (prefers-color-scheme: dark) { .activite-courbe, .graphique { --graphique-trace: var(--cuivre-clair); } }

/* Tableau (formulaires d'une fiche) */
.tableau-defilant { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tableau th, .tableau td { padding: .65rem .75rem; text-align: left; border-bottom: 1px solid var(--ligne); }
.tableau thead th { font: 600 .7rem/1.2 var(--police-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.tableau tbody th { font-weight: 620; color: var(--texte); }
.tableau tbody tr:last-child > * { border-bottom: 0; }
.tableau .nombre { text-align: right; font-family: var(--police-mono); font-variant-numeric: tabular-nums; }

/* Accueil : cartes-liens de résumé */
.carte-lien { display: block; color: inherit; text-decoration: none; transition: transform .22s var(--ressort), box-shadow .22s, border-color .22s; }
.carte-lien:hover { color: inherit; transform: translateY(-3px); box-shadow: var(--ombre-2); border-color: var(--ligne-forte); }
.carte-lien .carte-tete > .icone { color: var(--texte-3); transition: transform var(--duree) var(--ressort); }
.carte-lien:hover .carte-tete > .icone { transform: translateX(3px); color: var(--texte); }
.resume-liste { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.resume-liste li { display: flex; align-items: center; gap: 1rem; }
.resume-liste strong { display: block; font-size: 1rem; }
.resume-liste small { color: var(--texte-3); font-size: .84rem; }

/* Factures */
.liste-factures { list-style: none; margin: 0; padding: .35rem; }
.facture {
    position: relative; display: grid; align-items: center; gap: .9rem;
    grid-template-columns: 40px minmax(0, 1fr) 120px 130px 92px;
    padding: .65rem .75rem; border-radius: 12px; transition: background var(--duree);
}
.facture:hover { background: var(--surface-2); }
.facture + .facture::before { content: ""; position: absolute; left: 3.6rem; right: .75rem; top: 0; height: 1px; background: var(--ligne); }
.facture-corps { display: grid; gap: .1rem; min-width: 0; }
.facture-corps strong { font-weight: 650; }
.facture-corps small, .facture-montant small { color: var(--texte-3); font-size: .8rem; }
.facture-date { font: 400 .83rem/1.2 var(--police-mono); color: var(--texte-2); }
.facture-montant { display: grid; justify-items: end; gap: .1rem; font-variant-numeric: tabular-nums; }
.facture-montant strong { font-family: var(--police-mono); font-weight: 600; }
.note-factures { margin-top: 1rem; }
@container (max-width: 700px) {
    .facture { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .facture-date { display: none; }
    .facture .ligne-actions { grid-column: 2 / -1; justify-content: flex-start; }
}

/* Nouvelle demande */
.demande-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.demande-grille > .carte { margin: 0; }
.aide-demande h2 { font-size: 1.05rem; margin-bottom: 1rem; }
.etapes-demande { counter-reset: etape; display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.etapes-demande li { counter-increment: etape; position: relative; padding-left: 2.6rem; min-height: 30px; }
.etapes-demande li::before {
    content: counter(etape); position: absolute; left: 0; top: 0; display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%; font: 700 .85rem/1 var(--police-titre);
    background: var(--creux); color: var(--texte-2);
}
.etapes-demande strong { display: block; font-size: .95rem; }
.etapes-demande small { display: block; color: var(--texte-3); font-size: .84rem; }
@media (max-width: 1000px) { .demande-grille { grid-template-columns: minmax(0, 1fr); } }

/* Les trois niveaux de demande (_niveaux.html) : une couleur par niveau. */
.niveaux {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem;
    margin: 0; padding: 0; list-style: none;
}
.niveau {
    --niveau: var(--succes); --niveau-voile: var(--succes-voile);
    position: relative; padding: 1rem 1.05rem 1.05rem; border: 1px solid var(--ligne); border-radius: var(--rayon);
    background: var(--surface-2); overflow: hidden;
}
.niveau::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--niveau); }
.niveau--2 { --niveau: var(--nappe); --niveau-voile: var(--info-voile); }
.niveau--3 { --niveau: var(--cuivre); --niveau-voile: var(--accent-voile); }
.niveau-tete { display: flex; align-items: center; gap: .7rem; margin-bottom: .55rem; }
.niveau-tete strong { display: block; font-size: .96rem; line-height: 1.25; }
.niveau .pastille-niveau { background: var(--niveau); color: #fff; }
.niveau-condition {
    display: inline-block; margin-top: .2rem; padding: .1rem .5rem; border-radius: 999px;
    font: 600 .72rem/1.4 var(--police); background: var(--niveau-voile); color: var(--niveau);
}
.niveau p { color: var(--texte-2); font-size: .86rem; line-height: 1.5; }
.niveau ul { display: grid; gap: .3rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.niveau ul li { position: relative; padding-left: 1.1rem; color: var(--texte-3); font-size: .83rem; line-height: 1.45; }
.niveau ul li::before {
    content: ""; position: absolute; left: .15rem; top: .55em; width: 6px; height: 6px;
    border-radius: 50%; background: var(--niveau); opacity: .7;
}

/* Page Tickets */
.tickets-haut { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.tickets-haut > .carte { margin: 0; }
.compteur-tickets { display: grid; gap: 1.2rem; align-content: start; }
.compteur-tickets h2 { font-size: 1.15rem; margin-top: .25rem; }
.compteur-tickets-corps { display: flex; align-items: center; gap: 1.4rem; }
.compteur-grand { font-size: 1.05rem; color: var(--texte-2); }
.compteur-grand strong { font: 650 1.6rem/1 var(--police-titre); color: var(--texte); margin-right: .2rem; }
.compteur-tickets-corps .discret { margin-top: .35rem; }
.compteur-tickets-niveaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.compteur-tickets-niveaux div { padding: .7rem .8rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--ligne); }
.compteur-tickets-niveaux dt { font-size: .74rem; color: var(--texte-3); }
.compteur-tickets-niveaux dd { margin: .2rem 0 0; font: 650 1.3rem/1 var(--police-titre); }
.pastille-niveau {
    display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
    font: 700 .85rem/1 var(--police-titre); background: var(--accent); color: var(--accent-texte);
}
.historique-tickets { margin: 0; padding: 0; list-style: none; }
.ticket { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .8rem .25rem; }
.ticket + .ticket { border-top: 1px solid var(--ligne); }
.ticket-statut {
    justify-self: start; padding: .22rem .6rem; border-radius: 999px;
    font: 600 .72rem/1.3 var(--police); background: var(--succes-voile); color: var(--succes);
}
.ticket--ouvert .ticket-statut { background: var(--info-voile); color: var(--info); }
/* Colonne qui rétrécit : sans elle, un titre long (sur une ligne) élargirait la page en mobile. */
.ticket-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; min-width: 0; }
.ticket-corps strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-corps small { color: var(--texte-3); font-size: .82rem; }
.ticket-dates { font: 400 .8rem/1.2 var(--police-mono); color: var(--texte-3); white-space: nowrap; }
/* Toute la ligne d'historique mène à la feuille de vie du ticket. */
.ticket { position: relative; border-radius: 10px; transition: background var(--duree); }
.ticket:hover { background: var(--creux); }
.ticket-lien { display: block; min-width: 0; color: inherit; text-decoration: none; }
.ticket-lien::after { content: ""; position: absolute; inset: 0; }
.ticket-lien:hover strong, .ticket-lien:focus-visible strong { text-decoration: underline; }
.ticket-chevron { color: var(--texte-3); }
.badge--ouvert { background: var(--info-voile); color: var(--info); }
.badge--resolu { background: var(--succes-voile); color: var(--succes); }

/* Feuille de vie : la demande à gauche, son déroulé à droite. */
.fiche-ticket { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 1rem; align-items: start; }
.fiche-ticket > .carte { margin: 0; }
.ticket-description { margin-top: .8rem; white-space: pre-wrap; color: var(--texte-2); line-height: 1.65; }
.vie-ticket { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.vie-etape {
    position: relative; display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; padding: 0 0 1.15rem 1.75rem;
}
.vie-etape::before {
    content: ""; position: absolute; left: 0; top: .28rem; width: 11px; height: 11px;
    border-radius: 50%; border: 2px solid var(--ligne-forte); background: var(--surface);
}
.vie-etape::after { content: ""; position: absolute; left: 5px; top: 1.15rem; bottom: 0; width: 1px; background: var(--ligne); }
.vie-etape:last-child { padding-bottom: 0; }
.vie-etape:last-child::after { display: none; }
.vie-etape--faite::before { border-color: var(--succes); background: var(--succes); }
.vie-etape--courante::before { border-color: var(--info); background: var(--info-voile); }
.vie-etape strong { display: block; font-size: .95rem; }
.vie-etape small { display: block; margin-top: .15rem; color: var(--texte-3); font-size: .84rem; }
.vie-etape time { font: 400 .78rem/1.4 var(--police-mono); color: var(--texte-3); white-space: nowrap; }
.ticket-bilan { display: grid; gap: .7rem; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--ligne); }
.ticket-bilan div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ticket-bilan dt { color: var(--texte-3); font-size: .85rem; }
.ticket-bilan dd { margin: 0; text-align: right; font-weight: 600; }
.ticket-bilan dd small { display: block; font-weight: 400; color: var(--texte-3); font-size: .78rem; }
.ticket-cout { display: block; margin-top: .15rem; }
.accord-devis { margin-top: .6rem; }
@media (max-width: 1000px) { .fiche-ticket { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
    .ticket { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
    .compteur-tickets-corps { flex-direction: column; align-items: flex-start; }
}

/* ── Paramètres : comptes et invitations ──────────────────────────────── */
.grille-parametres { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
.grille-parametres > .carte { margin: 0; }
.pile { display: grid; gap: 1rem; align-content: start; }
.pile > .carte { margin: 0; }
@media (max-width: 1100px) { .grille-parametres { grid-template-columns: minmax(0, 1fr); } }
.membres { list-style: none; margin: 0; padding: 0; }
.membre {
    display: grid; align-items: center; gap: .45rem 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identite actions" "meta actions";
    padding: .9rem .25rem;
}
.membre-identite { grid-area: identite; }
.membre-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; padding-left: calc(38px + .8rem); }
.membre-actions { grid-area: actions; }
.membre + .membre { border-top: 1px solid var(--ligne); }
.membre-identite { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.membre-identite strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membre-identite small { display: block; color: var(--texte-3); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membre-connexion { font: 400 .78rem/1.3 var(--police-mono); color: var(--texte-3); margin-left: .25rem; }
.membre-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.membre-actions form { display: flex; gap: .35rem; margin: 0; }
.membre-actions select { min-height: 36px; padding: .3rem 2.1rem .3rem .6rem; font-size: .86rem; width: auto; border-radius: 9px; }
.membre--inactif .membre-identite { opacity: .55; }
@media (max-width: 760px) {
    .membre { grid-template-columns: minmax(0, 1fr); grid-template-areas: "identite" "meta" "actions"; }
    .membre-meta { padding-left: 0; }
    .membre-actions { justify-content: flex-start; }
}
.choix-role { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; }
.choix-role legend { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.choix-role label {
    display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
    padding: .7rem .8rem; border: 1px solid var(--ligne); border-radius: 12px; font-weight: 400;
    transition: border-color var(--duree), background var(--duree);
}
.choix-role label:hover { border-color: var(--ligne-forte); }
.choix-role label:has(input:checked) { border-color: var(--focus); background: var(--info-voile); }
.choix-role input { accent-color: var(--nappe); margin-top: .2rem; }
.choix-role strong { display: block; font-size: .92rem; }
.choix-role small { color: var(--texte-3); font-size: .82rem; }
.invitations { list-style: none; margin: 0; padding: 0; }
.invitation { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding: .8rem .25rem; }
.invitation + .invitation { border-top: 1px solid var(--ligne); }
.invitation-email { min-width: 0; flex: 1 1 200px; }
.invitation-email strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .93rem; }
.invitation-email small { color: var(--texte-3); font-size: .8rem; }
.invitation-actions { display: flex; gap: .35rem; }
.invitation form { margin: 0; }
/* Appareils de confiance (Mon compte) : une rangée par appareil, comme les invitations. */
.appareils { list-style: none; margin: .5rem 0; padding: 0; }
.appareil { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .9rem; padding: .7rem .25rem; }
.appareil + .appareil { border-top: 1px solid var(--ligne); }
.appareil small { display: block; color: var(--texte-3); font-size: .8rem; }
.appareil form { margin: 0; }
/* Ce que peut faire chaque rôle */
.droits-roles { margin-top: 1rem; }
.droits-roles .tableau tbody th { font-weight: 500; color: var(--texte-2); }
.droits-roles .droit { text-align: center; white-space: nowrap; }
.droits-roles thead .droit { color: var(--texte); }
.droit-oui { display: block; margin-inline: auto; color: var(--succes); }
.droit-non { color: var(--ligne-forte); }
/* Téléphone : le droit sur sa ligne, les trois rôles dessous (nommés par data-role). */
@media (max-width: 640px) {
    .droits-roles thead { display: none; }
    .droits-roles table, .droits-roles tbody { display: block; }
    .droits-roles tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .7rem 0; border-bottom: 1px solid var(--ligne); }
    .droits-roles tbody tr:last-child { border-bottom: 0; }
    .droits-roles tbody th { grid-column: 1 / -1; padding: 0 0 .45rem; border: 0; }
    .droits-roles td { padding: 0; border: 0; white-space: normal; }
    .droits-roles td::before {
        content: attr(data-role); display: block; margin-bottom: .2rem;
        font: 600 .6rem/1.2 var(--police-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--texte-3);
    }
}

/* ── Licences terrain ─────────────────────────────────────────────────── */
.verrou-licences { max-width: 540px; margin-inline: auto; text-align: center; }
.verrou-licences .ecusson { margin: .25rem auto 1rem; }
.verrou-licences > p { color: var(--texte-2); margin: .6rem 0 1.2rem; }
.verrou-licences .formulaire { text-align: left; }
.verrou-licences .discret { margin-top: 1rem; }
.licences { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.licences > .carte { margin: 0; }
.licence-tete { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.licence-tete h2 { font-size: 1.05rem; }
.licence-tete small { color: var(--texte-3); font-size: .82rem; }
.licence-icone {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px;
    background: var(--info-voile); color: var(--nappe);
}
.licence-acces { display: grid; gap: .55rem; margin: 0; }
.licence-acces > div {
    display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: .5rem;
    padding: .55rem .7rem; border-radius: 10px; background: var(--creux);
}
.licence-acces dt { color: var(--texte-3); font-size: .8rem; }
.licence-acces dd { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin: 0; min-width: 0; }
.licence-acces code { font: 500 .9rem/1.3 var(--police-mono); overflow-wrap: anywhere; }
.licence .discret { margin-top: .8rem; font-size: .8rem; }
details.mot-de-passe { min-width: 0; }
details.mot-de-passe > summary { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none; }
details.mot-de-passe > summary::-webkit-details-marker { display: none; }
.mot-de-passe-masque { font: 500 .9rem/1 var(--police-mono); letter-spacing: .1em; color: var(--texte-2); }
.mot-de-passe-bascule { font-size: .8rem; font-weight: 600; color: var(--lien); }
details.mot-de-passe .si-ouvert,
details.mot-de-passe[open] .si-ferme,
details.mot-de-passe[open] .mot-de-passe-masque { display: none; }
details.mot-de-passe[open] .si-ouvert { display: inline; }
details.mot-de-passe code { display: block; margin-top: .25rem; }
@media (max-width: 480px) { .licence-acces > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }

/* ── Mon compte, double authentification ──────────────────────────────── */
.profil-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-bottom: 1.75rem; }
.profil-tete h1 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); }
.profil-tete .discret { margin-top: .25rem; }
.compte-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.compte-grille > .carte, .compte-grille > .pile > .carte { margin: 0; }
@media (max-width: 900px) { .compte-grille { grid-template-columns: minmax(0, 1fr); } }
.etat-securite { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 12px; margin-bottom: 1rem; }
.etat-securite--ok { background: var(--succes-voile); color: var(--succes); }
.etat-securite--non { background: var(--attention-voile); color: var(--attention); }
.etat-securite strong { display: block; }
.etat-securite small { display: block; opacity: .85; font-size: .82rem; }
details.pli { border-top: 1px solid var(--ligne); padding-top: .85rem; margin-top: 1rem; }
details.pli > summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--texte-2); list-style: none; display: flex; align-items: center; gap: .4rem; }
details.pli > summary::-webkit-details-marker { display: none; }
details.pli > summary::before { content: "+"; font-family: var(--police-mono); color: var(--texte-3); width: 1ch; }
details.pli[open] > summary::before { content: "−"; }
details.pli > .formulaire { margin-top: 1rem; }

/* ── Page d'erreur ────────────────────────────────────────────────────── */
.erreur-page { max-width: 560px; margin: clamp(1rem, 8vh, 5rem) auto; text-align: center; display: grid; justify-items: center; gap: .75rem; }
.erreur-page .code-erreur { font: 600 .8rem/1 var(--police-mono); letter-spacing: .1em; color: var(--texte-3); }
.erreur-page p { color: var(--texte-2); }
.erreur-page .bouton { margin-top: .75rem; }

/* ── Mouvement ────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(contenu) { animation: .14s ease-in both vt-sortie; }
::view-transition-new(contenu) { animation: .3s var(--ressort) both vt-entree; }
::view-transition-group(barre), ::view-transition-group(nav-mobile) { animation: none; }
@keyframes vt-sortie { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(10px); } }

.apparition > * { animation: apparaitre .45s var(--ressort) both; }
.apparition > :nth-child(2) { animation-delay: .05s; }
.apparition > :nth-child(3) { animation-delay: .1s; }
.apparition > :nth-child(4) { animation-delay: .15s; }
.apparition > :nth-child(5) { animation-delay: .2s; }
.apparition > :nth-child(6) { animation-delay: .25s; }
.apparition > :nth-child(n + 7) { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    .carotte-libelles span { opacity: 1; }
}

/* ── Impression (codes de secours, fiches) ────────────────────────────── */
@media print {
    .barre, .entete, .nav-mobile, .barre-outils, .tete-actions, .ligne-actions, .auth-scene, .no-print { display: none !important; }
    .coquille, .auth { display: block; }
    body { background: #fff; color: #000; }
    .carte { box-shadow: none; border-color: #ccc; }
}