/* =========================================================================
   FGTB Impôts — Système de design (Phase 6, refonte visuelle)
   CSS ORIGINAL. Aucune dépendance externe, aucun CDN, aucune police distante.
   Voir docs/design-system.md. Ne copie aucun code de PrestaGestPre.
   ========================================================================= */

/* ---- Police Inter, auto-hébergée (WOFF2), licence SIL OFL (voir fonts/Inter-LICENSE.txt) ---- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("fonts/inter-latin-700.woff2") format("woff2"); }

/* ---- Tokens ---- */
:root {
    /* Couleurs */
    --color-primary: #d52e20;
    --color-primary-dark: #a8241a;
    --color-primary-050: #fdecea;
    --color-primary-100: #f7d6d2;
    --surface: #ffffff;
    --bg-page: #f5f6f8;
    --text-primary: #1f2124;
    --text-secondary: #5b6167;
    --text-light: #6b7178;
    --border: #d9dce0;
    --border-strong: #9aa0a6;
    --focus: #0b57d0;
    --success: #176b37;   --success-bg: #e7f4ec;   --success-100: #bfe2cd;
    --warning: #b26a00;   --warning-bg: #fff3e0;   --warning-100: #f0d19a;
    --danger:  #a8241a;   --danger-bg:  #fdecea;   --danger-100: #f5c6c0;
    --info:    #0b57d0;   --info-bg:    #eef2fb;   --info-100: #c9d6f2;

    /* Espacements (multiples de 4px) */
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
    --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;

    /* Rayons / ombres */
    --radius-sm: 8px; --radius: 12px; --radius-pill: 999px;
    --control-h: 2.75rem; /* 44px : hauteur commune input/select/bouton */
    --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
    --shadow: 0 2px 6px rgba(16,24,40,.08);
    --shadow-lg: 0 10px 24px rgba(16,24,40,.12);

    /* Largeurs max */
    --maxw-content: 72rem; --maxw-card: 42rem; --maxw-narrow: 34rem;

    /* Typo */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

    /* Alias hérités (compatibilité des sélecteurs existants) */
    --red: var(--color-primary); --red-dark: var(--color-primary-dark);
    --ink: var(--text-primary); --muted: var(--text-secondary);
    --line: var(--border); --bg: var(--bg-page); --card: var(--surface); --ok: var(--success);
}

* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-page);
    line-height: 1.5;
}

a { color: var(--color-primary-dark); }
a:hover { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---- Icônes SVG (sprite local) ---- */
/* Sprite inline masqué sans style inline (CSP style-src 'self' : aucun attribut style=). */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* QR d'enrôlement TOTP (SVG inline, aucune ressource externe) */
.qr-box { display: inline-block; padding: .5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); margin: .25rem 0 1rem; }
.qr-box svg { display: block; width: 220px; height: 220px; }
.ico { width: 1.15em; height: 1.15em; vertical-align: -.18em; flex: none; }
.ico-lg { width: 2.25rem; height: 2.25rem; }

/* ---- Skip link ---- */
.skip-link {
    position: absolute; left: .5rem; top: -60px;
    background: var(--surface); color: var(--color-primary-dark);
    padding: .5rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 60;
}
.skip-link:focus { top: .5rem; }

/* =========================================================================
   En-tête / navigation
   ========================================================================= */
.topbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-2) var(--space-4); padding: .7rem var(--space-4);
}
/* Administration : en-tête rouge compact (léger dégradé autorisé). */
.topbar-admin {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff; box-shadow: var(--shadow);
}
.topbar-admin a, .topbar-admin .brand { color: #fff; }
/* Public : en-tête calme, blanc, accent rouge. */
.topbar-public {
    background: var(--surface); color: var(--text-primary);
    border-top: .35rem solid var(--color-primary); border-bottom: 1px solid var(--border);
}

.brand { font-weight: 800; display: inline-flex; align-items: center; gap: .55rem; font-size: 1.05rem; letter-spacing: .2px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 4px; background: var(--color-primary); }
.topbar-admin .brand-mark { background: rgba(255,255,255,.9); }
.brand-sub { font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .6px;
    padding: .1rem .45rem; border-radius: var(--radius-pill); background: rgba(255,255,255,.22); }
.topbar-public .brand-sub { background: var(--color-primary-050); color: var(--color-primary-dark); }

/* Nav — DEUX conteneurs, une seule source de liens (partial PHP).
   Le CSS masque le conteneur inutile selon le breakpoint : la bascule porte sur le
   CONTENEUR (display), jamais sur le contenu d'un <details> → robuste sur tous les
   navigateurs (aucune dépendance à ::details-content). Fonctionne sans JavaScript. */
.mainnav { display: flex; align-items: center; }

/* Liens (styles partagés desktop + tiroir mobile) */
.nav-desktop a, .nav-drawer a, .nav-desktop .linklike, .nav-drawer .linklike {
    display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 600;
    padding: .5rem .7rem; border-radius: var(--radius-sm); color: inherit; min-height: 40px;
}
.nav-desktop a:hover, .nav-drawer a:hover, .nav-desktop .linklike:hover, .nav-drawer .linklike:hover {
    text-decoration: none; background: var(--color-primary-050); color: var(--color-primary-dark);
}

/* --- Mobile (défaut, < 768px) : desktop masqué, menu <details> visible --- */
.nav-desktop { display: none; }
.nav-mobile { display: block; position: relative; }
.nav-toggle {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none;
    padding: .5rem .8rem; border-radius: var(--radius-sm); font-weight: 700;
    background: rgba(255,255,255,.18); color: inherit; min-height: 44px;
}
.topbar-public .nav-toggle { background: var(--color-primary-050); color: var(--color-primary-dark); }
.nav-toggle::-webkit-details-marker { display: none; }
.nav-drawer {
    position: absolute; right: 0; top: calc(100% + .35rem); z-index: 55;
    display: flex; flex-direction: column; gap: .15rem; min-width: 15rem;
    background: var(--surface); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .4rem;
}
.nav-drawer a, .nav-drawer .linklike { color: var(--text-primary); }
.nav-drawer a[aria-current="page"] {
    color: var(--color-primary-dark); font-weight: 800;
    box-shadow: inset 3px 0 0 var(--color-primary); background: var(--color-primary-050);
}
.nav-sep { height: 1px; background: var(--border); margin: .3rem .2rem; }

/* --- Desktop (≥ 768px) : menu mobile masqué, nav horizontale visible --- */
@media (min-width: 768px) {
    .nav-mobile { display: none; }
    .nav-desktop { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .3rem; }
    .nav-desktop a, .nav-desktop .linklike { color: inherit; padding: .45rem .7rem; }
    .topbar-admin .nav-desktop a:hover, .topbar-admin .nav-desktop .linklike:hover { background: rgba(255,255,255,.2); color: #fff; }
    /* Repère de page active NON chromatique (soulignement + gras) en plus de la couleur. */
    .topbar-admin .nav-desktop a[aria-current="page"] {
        color: #fff; font-weight: 800; background: rgba(255,255,255,.16); box-shadow: inset 0 -3px 0 #fff;
    }
    .topbar-public .nav-desktop a[aria-current="page"] {
        color: var(--color-primary-dark); font-weight: 800; box-shadow: inset 0 -3px 0 var(--color-primary);
    }
    .nav-desktop .nav-sep { width: 1px; height: 1.4rem; margin: 0 .2rem; }
}

/* =========================================================================
   Structure de page
   ========================================================================= */
.container { width: min(100% - 2rem, var(--maxw-content)); margin: var(--space-6) auto; }
.container-narrow { width: min(100% - 2rem, var(--maxw-narrow)); }
/* Conteneur du parcours PUBLIC : plus étroit, calme (les panneaux le remplissent à 100 %). */
.container--narrow { width: min(100% - 2rem, 42rem); }

/* Barre de session (utilisateur + rôle) sous l'en-tête admin */
.userbar { margin-top: var(--space-3); margin-bottom: calc(-1 * var(--space-3)); font-size: .9rem; }
.userbar .tag { margin-left: .25rem; }

/* Grille de raccourcis du tableau de bord (cartes navigation, sans faux KPI) */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.dash-card {
    display: flex; gap: .85rem; align-items: flex-start; text-decoration: none; color: var(--text-primary);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: var(--space-4); transition: box-shadow .15s, border-color .15s, transform .05s;
}
.dash-card:hover { text-decoration: none; box-shadow: var(--shadow); border-color: var(--color-primary-100); }
.dash-card:active { transform: translateY(1px); }
.dash-card .ico-chip { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex: none;
    border-radius: 10px; background: var(--color-primary-050); color: var(--color-primary); }
.dash-card .ico-chip .ico { width: 1.35rem; height: 1.35rem; }
.dash-card-title { font-weight: 700; display: block; }
.dash-card-desc { color: var(--text-secondary); font-size: .88rem; }

h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 var(--space-4); }
h2 { font-size: 1.15rem; font-weight: 700; margin-top: 0; }
.page-lead { color: var(--text-secondary); margin-top: -.5rem; margin-bottom: var(--space-5); max-width: 46rem; }

/* =========================================================================
   Cartes
   ========================================================================= */
/* Panneau standard : REMPLIT son conteneur (largeur cohérente entre cartes, filtres et tableaux
   d'un même écran). La largeur d'écran est portée par le conteneur (72rem admin / 42rem public). */
.card, .data-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: var(--space-5); margin-bottom: var(--space-5); width: 100%;
}
.card > h2:first-child, .card > h1:first-child, .data-panel > h2:first-child { margin-top: 0; }
/* Carte volontairement étroite et centrée (ex. écrans très courts). */
.card-narrow { max-width: var(--maxw-narrow); margin-left: auto; margin-right: auto; }
/* Panneau de données (tableau titré) : padding réduit, le tableau va bord à bord. */
.data-panel { padding: 0; overflow: hidden; }
.data-panel > h2 { padding: var(--space-4) var(--space-5) 0; }
.data-panel > .tablewrap { border: 0; border-radius: 0; box-shadow: none; }
.card-wide { max-width: none; }
.card-info, .card-success, .card-warning, .card-danger { border-left: 4px solid; }
.card-info { border-left-color: var(--info); }
.card-success { border-left-color: var(--success); }
.card-warning { border-left-color: var(--warning); }
.card-danger { border-left-color: var(--danger); }

/* =========================================================================
   Formulaires
   ========================================================================= */
.form label { display: block; font-weight: 600; margin-top: var(--space-4); }
.form input, .form select, .form textarea {
    width: 100%; margin-top: .35rem;
    border: 2px solid var(--border-strong); border-radius: var(--radius-sm);
    font-size: 1rem; font-family: inherit; background: var(--surface); color: var(--text-primary);
    transition: border-color .15s, box-shadow .15s;
}
/* Hauteur commune (input mono-ligne + select) ; les cases/boutons radio sont exclus. */
.form input:not([type="checkbox"]):not([type="radio"]), .form select { height: var(--control-h); padding: 0 .8rem; }
.form textarea { padding: .6rem .8rem; min-height: 6.5rem; resize: vertical; }
/* Un champ mono-colonne ne s'étire pas à toute la largeur d'un panneau : largeur lisible bornée. */
.form > input:not([type="checkbox"]):not([type="radio"]), .form > select, .form > textarea { max-width: 36rem; }
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(213,46,32,.15);
}

/* ---- Groupe libellé + champ (réutilisable) ---- */
.form-field { display: flex; flex-direction: column; gap: .3rem; }
.form-field > label { margin: 0; font-weight: 600; font-size: .9rem; }
.form-field > input, .form-field > select { margin-top: 0; width: 100%; height: var(--control-h); padding: 0 .8rem;
    border: 2px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; background: var(--surface); color: var(--text-primary);
    transition: border-color .15s, box-shadow .15s; }
.form-field > input:focus, .form-field > select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(213,46,32,.15); }
.form-field > input:focus-visible, .form-field > select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.form-field--inline { flex-direction: row; align-items: center; gap: .5rem; }
.form-field--inline > label { white-space: nowrap; }

/* ---- Grille de champs (formulaires multi-colonnes) ---- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---- Barre de filtres : groupes qui se replient d'un bloc, contrôles alignés en bas ---- */
.filter-panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: var(--space-4); margin-bottom: var(--space-5); width: 100%; }
.filter-panel .form-field { min-width: 11rem; }
.filter-panel .form-field > input, .filter-panel .form-field > select { min-width: 11rem; }
.filter-panel .btn { height: var(--control-h); min-height: var(--control-h); }
@media (max-width: 640px) {
    .filter-panel { flex-direction: column; align-items: stretch; }
    .filter-panel .form-field, .filter-panel .form-field > input, .filter-panel .form-field > select { min-width: 0; width: 100%; }
    .filter-panel .btn { width: 100%; }
}

/* ---- Barre d'action de page (ex. « + Nouvelle campagne ») ---- */
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-5); }

/* ---- Formulaire d'action en ligne (barres de création + cellules d'actions de tableau) ---- */
.inline-action-form { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.inline-action-form label { margin: 0; font-weight: 600; }
.inline-action-form input, .inline-action-form select {
    height: var(--control-h); border: 2px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: 0 .7rem; font: inherit; background: var(--surface); color: var(--text-primary); min-width: 12rem;
    transition: border-color .15s, box-shadow .15s;
}
.inline-action-form input:focus, .inline-action-form select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(213,46,32,.15); }
.inline-action-form input:focus-visible, .inline-action-form select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.inline-action-form .btn { height: var(--control-h); min-height: var(--control-h); }
@media (max-width: 640px) {
    .inline-action-form { width: 100%; }
    .inline-action-form input, .inline-action-form select { min-width: 0; flex: 1 1 12rem; width: 100%; }
    .inline-action-form .btn { flex: 1 1 auto; }
}
/* L'outline clavier reste garanti : :focus-visible passe par-dessus le halo. */
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible {
    outline: 3px solid var(--focus); outline-offset: 1px;
}
.form input[aria-invalid="true"], .form select[aria-invalid="true"], .form textarea[aria-invalid="true"] {
    border-color: var(--danger); box-shadow: 0 0 0 3px rgba(168,36,26,.14);
}
.field-error { color: var(--danger); font-weight: 600; font-size: .9rem; margin-top: .3rem; display: flex; gap: .35rem; align-items: center; }
.req::after { content: " *"; color: var(--color-primary-dark); font-weight: 700; }

fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: var(--space-4); padding: var(--space-4); }
legend { font-weight: 700; padding: 0 .4rem; }
.checkline { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; margin: .35rem 0; }
.checkline input { width: auto; margin: .15rem 0 0; }
.radio-line { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin: .4rem 0; }
.radio-line input { width: auto; margin: 0; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); align-items: center; }
.form .btn { margin-top: var(--space-4); }


/* Honeypot : dans le DOM, hors écran et hors tabulation. */
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   Boutons
   ========================================================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .6rem 1.05rem; min-height: 44px; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: #e9eaec; color: var(--text-primary); font-weight: 700; font-size: 1rem; font-family: inherit;
    cursor: pointer; text-decoration: none; transition: background .15s, box-shadow .15s, transform .05s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow); }
.btn-secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.btn-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-100); }
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-small { padding: .35rem .65rem; min-height: 36px; font-size: .85rem; }
.btn:disabled, .btn[disabled], .btn.is-loading { background: #e3e5e8; color: #9aa0a6; border-color: #e3e5e8; cursor: not-allowed; box-shadow: none; }
.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading::after {
    content: ""; position: absolute; width: 1.05rem; height: 1.05rem; border-radius: 50%;
    border: 2px solid rgba(0,0,0,.25); border-top-color: var(--text-secondary); animation: spin .7s linear infinite;
}
.linklike { background: none; border: 0; color: var(--color-primary-dark); font-weight: 600; cursor: pointer; padding: 0; font: inherit; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================================
   Bandeaux d'état (flash) + états vides / chargement
   ========================================================================= */
.flash {
    display: flex; gap: .55rem; align-items: flex-start;
    padding: .75rem var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-4);
    border: 1px solid var(--border); background: var(--surface);
}
.flash .ico { margin-top: .1rem; }
.flash-error { background: var(--danger-bg); border-color: var(--danger-100); color: var(--danger); }
.flash-success { background: var(--success-bg); border-color: var(--success-100); color: var(--success); }
.flash-info { background: var(--info-bg); border-color: var(--info-100); color: #1a3e8f; }
.flash-warning { background: var(--warning-bg); border-color: var(--warning-100); color: var(--warning); }
.flash-secret {
    background: #fff7e6; border: 2px solid #e0a400; color: #6b4e00;
    font-family: var(--font-mono); word-break: break-word;
}

.empty-state {
    text-align: center; padding: var(--space-8) var(--space-5); color: var(--text-secondary);
    background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius);
}
.empty-state .ico { width: 2.75rem; height: 2.75rem; color: var(--text-light); margin-bottom: var(--space-3); }
.empty-state h2 { color: var(--text-primary); margin-bottom: .35rem; }
.loading-state { display: flex; gap: .6rem; align-items: center; justify-content: center; padding: var(--space-6); color: var(--text-secondary); }
.loading-state::before { content: ""; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--color-primary); animation: spin .7s linear infinite; }

/* =========================================================================
   Faits, badges, tags
   ========================================================================= */
.facts { padding-left: 1.1rem; margin: 0; }
.facts li { margin: .35rem 0; }

.badge {
    display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem;
    border-radius: var(--radius-pill); font-weight: 700; font-size: .82rem; border: 1px solid;
}
/* La couleur complète l'information ; le libellé texte est toujours présent. */
.badge-green { background: var(--success-bg); border-color: var(--success); color: #0f4a26; }
.badge-orange { background: var(--warning-bg); border-color: var(--warning); color: #7a4a00; }
.badge-red { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.badge-none { background: #eceef0; border-color: var(--border-strong); color: var(--text-secondary); }
/* Présence : la couleur complète le libellé texte, toujours présent. */
.badge-attendance-present { background: var(--success-bg); border-color: var(--success); color: #0f4a26; }
.badge-attendance-absent { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.badge-attendance-unset { background: #eceef0; border-color: var(--border-strong); color: var(--text-secondary); }

/* Sélecteur de présence (agenda). Sans JavaScript : select + bouton d'enregistrement. */
.presence-form { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.presence-form--compact { gap: .3rem; }
.presence-select { min-height: 36px; padding: .25rem .4rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); font-size: .85rem; max-width: 100%; }
.presence-cell { white-space: nowrap; }
.presence-stats { margin: 0 0 .6rem; font-size: .9rem; }

.badge-status-draft, .badge-status-open, .badge-status-closed, .badge-status-archived {
    display: inline-block; border-radius: var(--radius-pill); padding: .12rem .6rem; font-weight: 700; font-size: .82rem; border: 1px solid;
}
.badge-status-draft { background: #eceef0; border-color: var(--border-strong); color: var(--text-secondary); }
.badge-status-open { background: var(--success-bg); border-color: var(--success); color: #0f4a26; }
.badge-status-closed { background: var(--warning-bg); border-color: var(--warning); color: #7a4a00; }
.badge-status-archived { background: #f2f2f2; border-color: #c0c0c0; color: #666; }

.tag { display: inline-block; font-size: .72rem; background: var(--warning-bg); border: 1px solid var(--warning); color: #7a4a00;
    border-radius: 4px; padding: 0 .35rem; margin-left: .35rem; }

/* =========================================================================
   Tableaux
   ========================================================================= */
.tablewrap { overflow-x: auto; max-width: 100%; position: relative; -webkit-overflow-scrolling: touch;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
table.grid { width: 100%; border-collapse: collapse; background: var(--surface); min-width: 40rem; }
table.grid caption { text-align: left; font-weight: 600; color: var(--text-secondary); padding: .6rem .8rem; }
table.grid th, table.grid td { padding: .7rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
table.grid thead th {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    border-bottom: 2px solid var(--color-primary-dark); white-space: nowrap; position: sticky; top: 0;
}
table.grid thead th:first-child { border-top-left-radius: var(--radius); }
table.grid thead th:last-child { border-top-right-radius: var(--radius); }
table.grid tbody tr:nth-child(even) { background: #f8f9fb; }
table.grid tbody tr:hover { background: var(--color-primary-050); }
table.grid tbody tr:last-child td { border-bottom: none; }
/* Cellule d'actions de tableau : contrôles alignés, même hauteur (44px). */
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.actions .btn { height: var(--control-h); min-height: var(--control-h); }
.inline-form { display: inline-flex; gap: .35rem; align-items: center; margin: 0; }

/* =========================================================================
   Planification des disponibilités (Phase 6.2) — cartes par travailleur.
   Remplace l'ancienne matrice « horaires × travailleurs » (aucun défilement
   horizontal). Composants réutilisables ; l'état ne dépend jamais de la seule
   couleur (texte + forme du contour + trame).
   ========================================================================= */
.form-field--action { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; align-self: end; }
.loading-hint { color: var(--text-secondary); font-size: .9rem; }

.availability-summary {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
    padding: var(--space-3) var(--space-4); margin: var(--space-4) 0 var(--space-3);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.as-item { display: flex; flex-direction: column; min-width: 0; }
.as-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); }
.as-value { font-weight: 700; }

.worker-availability-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
@media (min-width: 64rem) { .worker-availability-grid { grid-template-columns: 1fr 1fr; } }

.worker-availability-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
}
.wac-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.wac-name { margin: 0; font-size: 1.15rem; }
.wac-count { margin-left: auto; color: var(--text-secondary); font-size: .9rem; }
.wac-empty { margin: 0; color: var(--text-secondary); font-style: italic; }

.preset-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.preset-actions .inline-form { margin: 0; }

.slot-group { display: flex; flex-direction: column; gap: .5rem; }
.slot-group-title { margin: 0; font-size: .95rem; color: var(--text-secondary); }
.slot-set { display: flex; flex-wrap: wrap; gap: .4rem; }
.slot-break { flex-basis: 100%; height: 0; border-top: 1px dashed var(--border); margin: .15rem 0; }
.slot-form { margin: 0; }

.slot-toggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: var(--control-h); min-width: 4.75rem; padding: .3rem .5rem; gap: .1rem;
    border: 2px solid var(--border-strong); border-radius: var(--radius-sm);
    background: #fbfbfc; color: var(--text-primary); font: inherit; cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.slot-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.slot-state { font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; color: var(--text-secondary); }
/* Disponible : contour plein + fond vert. Le libellé « Disponible » porte l'info sans la couleur. */
.slot-toggle--on { background: var(--success-bg); border-color: var(--success); border-style: solid; }
.slot-toggle--on .slot-state { color: #0f4a26; }
/* Indisponible : contour en pointillés (forme distincte, pas seulement la couleur). */
.slot-toggle--off { background: #fbfbfc; border-style: dashed; }
/* Réservé : trame hachurée + libellé « Réservé », non cliquable (rendez-vous présent). */
.slot-toggle--locked {
    cursor: not-allowed;
    background: repeating-linear-gradient(45deg, #f4f4f6, #f4f4f6 6px, #e8e8ec 6px, #e8e8ec 12px);
    border-color: var(--border-strong); border-style: solid;
}
.slot-toggle--locked .slot-state { color: var(--text-primary); font-weight: 700; }
.slot-toggle:hover:not(.slot-toggle--locked) { border-color: var(--color-primary); }
.slot-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(213,46,32,.15); }
.slot-toggle[aria-busy="true"] { opacity: .7; cursor: progress; }
.toggle-error { margin: 0 0 var(--space-3); }
.toggle-error[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .slot-toggle { transition: none; } }

/* =========================================================================
   Phase 6.3 — copie d'une journée vers plusieurs dates (calendrier multisélection).
   Panneau secondaire dans la carte ; aucun défilement horizontal ; l'état d'une
   date est toujours porté par du texte (M/N, « conflit », « RDV »), pas que la couleur.
   ========================================================================= */
.copy-day-panel > summary { cursor: pointer; font-weight: 600; padding: .35rem 0; color: var(--text-secondary); }
.copy-day-panel[open] > summary { margin-bottom: .5rem; }
.copy-form { display: flex; flex-direction: column; gap: var(--space-3); }
.copy-source-summary { background: #fbfbfc; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .7rem; }
.css-title { margin: 0 0 .25rem; font-weight: 700; }
.css-line { margin: 0; color: var(--text-secondary); font-size: .9rem; }
.calendar-shortcuts { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Grille de mois : chaque mois occupe sa propre colonne calculable ; un mois par ligne tant que
   la largeur réelle est < 22rem (aucun chevauchement de mois, aucun débordement). */
.multi-date-calendar {
    border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0; padding: .5rem; min-width: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-5) var(--space-4);
}
.calendar-month { min-width: 0; width: 100%; }
.calendar-title { margin: 0 0 .35rem; font-weight: 700; text-transform: capitalize; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-bottom: 2px; }
.calendar-weekdays span { text-align: center; font-size: .7rem; color: var(--text-secondary); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; min-width: 0; }
.calendar-blank { min-height: 44px; }
.calendar-day {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    min-height: 44px; padding: .2rem; border: 2px solid var(--border-strong); border-radius: var(--radius-sm);
    background: #fff; cursor: pointer; text-align: center; transition: background .15s, border-color .15s;
}
.calendar-day > input { margin: 0 0 1px; width: 16px; height: 16px; accent-color: var(--color-primary); }
.cd-num { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.cd-short { font-size: .62rem; color: var(--text-secondary); line-height: 1; }
.cd-tags { font-size: .58rem; color: #7a4a00; line-height: 1.05; }
/* Nom complet + état détaillé : masqués visuellement en grille (restent lus par les lecteurs d'écran). */
.cd-full, .cd-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calendar-day--source { background: #eef1ff; border-style: double; cursor: default; }
.calendar-day--conflict { border-color: var(--warning); }
.calendar-day:has(input:checked) { background: var(--success-bg); border-color: var(--success); box-shadow: inset 0 0 0 2px var(--success); }
.calendar-day:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(213,46,32,.15); }
.copy-count { margin: 0; font-weight: 600; }
.copy-actions { display: flex; }
.copy-result-summary { border: 1px solid var(--success); background: var(--success-bg); border-radius: var(--radius); padding: var(--space-3); margin: var(--space-3) 0; }
.crs-head { margin: 0 0 .25rem; }
.crs-list { margin: .35rem 0 0; padding-left: 1.2rem; font-size: .9rem; }

/* Mobile : le calendrier devient une liste verticale lisible (aucun défilement horizontal). */
@media (max-width: 40rem) {
    .multi-date-calendar { flex-direction: column; }
    .calendar-weekdays, .calendar-blank { display: none; }
    .calendar-grid { grid-template-columns: 1fr; gap: 4px; }
    .calendar-day { flex-direction: row; justify-content: flex-start; gap: .5rem; padding: .4rem .6rem; text-align: left; }
    .cd-num, .cd-short, .cd-tags { display: none; }
    .cd-full { position: static; width: auto; height: auto; clip: auto; white-space: normal; font-weight: 700; }
    .cd-status { position: static; width: auto; height: auto; clip: auto; white-space: normal; margin-left: auto; text-align: right; color: var(--text-secondary); font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) { .calendar-day { transition: none; } }

/* =========================================================================
   Utilitaires
   ========================================================================= */
small.muted, .muted { color: var(--text-secondary); }
.mono { font-family: var(--font-mono); }
.selectable { user-select: all; }
.break { word-break: break-all; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.error-code { font-weight: 800; color: var(--color-primary-dark); font-size: 3rem; line-height: 1; }
.ref-highlight { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; letter-spacing: .5px;
    background: var(--color-primary-050); color: var(--color-primary-dark); padding: .2rem .55rem; border-radius: var(--radius-sm); user-select: all; }

.footer { width: min(100% - 2rem, var(--maxw-content)); margin: var(--space-8) auto; color: var(--text-secondary); font-size: .85rem; }

/* =========================================================================
   Parcours public — stepper, choix de lieu, créneaux
   ========================================================================= */
.stepper { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 var(--space-5); font-size: .85rem; }
.stepper li { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: 1px solid var(--border);
    border-radius: var(--radius-pill); color: var(--text-secondary); background: var(--surface); }
.stepper li.current { border-color: var(--color-primary); color: var(--color-primary-dark); font-weight: 700; }
.stepper li.done { border-color: var(--success); color: #0f4a26; }
.stepper .step-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 1.4em;
    border-radius: 50%; background: #eceef0; font-weight: 700; font-size: .8em; }
.stepper li.current .step-num { background: var(--color-primary); color: #fff; }
.stepper li.done .step-num { background: var(--success); color: #fff; }

/* Choix de lieu en cartes cliquables (le libellé texte porte l'information) */
.slot-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot-option {
    display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .9rem; min-height: 44px;
    border: 2px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface); font-weight: 500;
    transition: border-color .15s, background .15s;
}
.slot-option:hover { border-color: var(--color-primary); }
.slot-option input { width: auto; margin: 0; }
.slot-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-050); font-weight: 700; }
.slot-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Choix (lieu) présenté en cartes */
.choice-fieldset { border: 0; padding: 0; margin: 0; }
.choice-fieldset legend { padding: 0; margin-bottom: var(--space-3); font-size: 1.05rem; }
.choice-grid { gap: .6rem; }
.choice-card { min-width: 12rem; padding: .8rem 1rem; font-size: 1rem; }
.choice-card .ico { color: var(--color-primary); }
@media (max-width: 640px) { .choice-card { width: 100%; } }

/* =========================================================================
   Agendas (Phase 4) — timeline mobile + outils
   ========================================================================= */
.agenda-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.viewswitch, .datenav, .datejump { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.datejump input[type="date"] {
    height: var(--control-h); border: 2px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: 0 .6rem; font: inherit; background: var(--surface); color: var(--text-primary);
    transition: border-color .15s, box-shadow .15s;
}
.datejump input[type="date"]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(213,46,32,.15); }
.datejump input[type="date"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.timeline { list-style: none; padding: 0; margin: 0; }
.tl-item { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.tl-item:last-child { border-bottom: none; }
.tl-time { font-weight: 700; min-width: 3.5rem; }
.tl-loc { color: var(--text-secondary); min-width: 6rem; }
.tl-free { color: #0f4a26; }
.tl-off { color: var(--text-secondary); font-style: italic; }
.tl-appt { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.row-cancelled td { color: var(--text-secondary); text-decoration: line-through; }

/* ============================================================
   Parcours public — clé numérique CSAM + documents (étape questions / récapitulatif)
   ============================================================ */
/* Encadré d'information (repère non chromatique : icône + titre, pas seulement la couleur). */
.notice-box { display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-3) var(--space-4); border: 1px solid var(--border);
    border-left-width: 4px; border-radius: var(--radius-sm); margin: 0 0 var(--space-4); }
.notice-box .ico { margin-top: .15rem; }
.notice-box p { margin: .15rem 0; }
.notice-box__title { font-weight: 700; }
.notice-box--info { background: var(--info-bg); border-color: var(--info-100); border-left-color: var(--info); }
.notice-box--info .ico { color: var(--info); }
.notice-box--warning { background: var(--warning-bg); border-color: var(--warning-100); border-left-color: var(--warning); }
.notice-box--warning .ico { color: var(--warning); }

/* Question Oui/Non de la clé CSAM + panneaux dépendants. */
.csam-fieldset .csam-panel { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-page); }
.csam-panel[hidden] { display: none; }

/* Champ texte structuré (label + aide) — réutilisable, accessible. */
.field { display: block; margin: 0; }
.field__label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.field input { width: 100%; }
.field__help { display: block; color: var(--text-secondary); font-size: .9rem; margin-top: var(--space-1); }

/* Marche à suivre « Non » : logo officiel CSAM stocké localement + étapes. */
.csam-guidance .csam-logo { display: block; max-width: 100%; height: auto;
    background: #fff; padding: var(--space-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
.csam-steps { margin: var(--space-2) 0; padding-left: 1.4rem; }
.csam-steps li { margin: var(--space-2) 0; }

/* Documents indispensables (récapitulatif). */
.docs-box { border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: var(--space-4); margin: var(--space-5) 0; background: var(--bg-page); }
.docs-box h2 { font-size: 1.1rem; margin: 0 0 var(--space-3); }
.docs-list { margin: 0; padding-left: 1.4rem; }
.docs-list li { margin: var(--space-2) 0; }