/* ============================================================================
   Charte « Cabinet [NOM] » — tokens et base.

   Les valeurs sont extraites des maquettes validées :
   design/Home_v-002.dc.html et design/Résultats de recherche_v-002.dc.html.

   Ces variables sont dupliquées dans l'objet `tailwind.config` de
   Components/App.razor, qui les expose sous forme de classes utilitaires
   (bg-marine-700, text-ink-500…). Toute modification doit être portée aux
   deux endroits.

   Le mode sombre est écarté pour cette itération (décision client), mais la
   structure en variables permet de l'accueillir plus tard sans refonte.
   ============================================================================ */

:root {
    color-scheme: light only;

    /* -- Marine : couleur primaire, institution, confiance --------------- */
    --marine-900: #142944; /* pied de page, état hover du primaire */
    --marine-700: #1E3A5F; /* primaire */
    --marine-600: #2C5580;
    --marine-400: #9FBBD6; /* bordures de champ sur fond marine clair */
    --marine-300: #B8CFE4;
    --marine-200: #B3C1D2; /* bordure des badges département */
    --marine-100: #DCE7F2;
    --marine-50: #E9EEF5; /* survol des cartes, en-tête de carte session */
    --marine-25: #E4EDF6; /* fond du tunnel de réservation */

    /* -- Texte sur fond marine ------------------------------------------- */
    --on-marine: #D5DEEA;
    --on-marine-strong: #D8E1EC;
    --on-marine-soft: #C6D1DF;
    --on-marine-mute: #9EACBE;
    --on-marine-faint: #96A5B7;
    --on-marine-icon: #9CB2CB;

    /* -- Encre : hiérarchie du texte sur fond clair ----------------------- */
    --ink: #14181D; /* titres, texte principal */
    --ink-700: #39414C; /* texte courant secondaire */
    --ink-500: #5D6774; /* légendes, libellés utility */
    --ink-400: #8994A3; /* désactivé */

    /* -- Filets et bordures ---------------------------------------------- */
    --rule: #D2D9E2; /* bordure par défaut */
    --rule-light: #E5E9EF;
    --rule-soft: #E0E5EB;
    --rule-faint: #EBEEF3;
    --rule-cool: #E8ECF2; /* créneau déjà réservé */
    --rule-mid: #C2CAD5; /* cartouche « SOURCE » */
    --rule-strong: #B3BCC8; /* bordure de champ de saisie */

    /* -- Fonds ------------------------------------------------------------ */
    --paper: #F2F4F7; /* fond de page */
    --surface: #FFFFFF; /* cartes, en-tête */
    --surface-tint: #F8FAFC; /* zone des créneaux */

    /* -- Ocre : promotion, avertissement --------------------------------- */
    --ocre: #B07216;
    --ocre-dark: #8A5A12;

    /* -- Typographie ------------------------------------------------------ */
    --font-display: 'Archivo', system-ui, sans-serif;
    --font-body: 'Source Sans 3', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* -- Grille ----------------------------------------------------------- */
    --shell-max: 1180px;
    --shell-pad: 32px;
    --shell-pad-mobile: 18px;
}

/* ============================================================================
   Base
   ============================================================================ */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
}

/* Les liens héritent de la couleur de leur contexte : le survol est déclaré
   au cas par cas, car un lien posé sur fond marine et un lien posé sur fond
   clair ne peuvent pas virer vers la même couleur. */
a {
    color: inherit;
}

/* Les utilitaires Tailwind d'affichage (flex, grid, block) ont la même
   spécificité que le sélecteur [hidden] de la feuille du navigateur et sont
   déclarés après : sans ce !important, un élément masqué par l'attribut
   hidden resterait visible. Le menu mobile s'appuie dessus. */
[hidden] {
    display: none !important;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
}

/* Le focus clavier doit rester visible partout : une part du public navigue
   au clavier ou avec une aide technique (exigence d'accessibilité du brief). */
:focus-visible {
    outline: 3px solid var(--marine-700);
    outline-offset: 2px;
}

/* Cible tactile minimale de 44 px sur les contrôles interactifs. */
button, [type="button"], [type="submit"], summary {
    font-family: inherit;
}

/* ============================================================================
   Conteneur de page — 1180 px, gouttière 32 px (18 px sous 720 px)
   ============================================================================ */

.shell {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding-left: var(--shell-pad);
    padding-right: var(--shell-pad);
}

@media (max-width: 720px) {
    .shell {
        padding-left: var(--shell-pad-mobile);
        padding-right: var(--shell-pad-mobile);
    }
}

/* ============================================================================
   Carte des départements

   Les tailles sont exprimées dans le repère du viewBox (1000 unités de large),
   pas en pixels d'écran : elles suivent donc la taille de la carte. Les valeurs
   sont calées pour rester lisibles à 375 px de large comme à 490 px.
   ============================================================================ */

.carte-departements path {
    fill: var(--rule);
    stroke: var(--surface);
    stroke-width: 2;
    /* La bordure garde son épaisseur réelle quelle que soit la taille rendue. */
    vector-effect: non-scaling-stroke;
    transition: fill 120ms linear;
}

.carte-departements text {
    font-family: var(--font-body);
    text-anchor: middle;
    pointer-events: none;
}

.carte-departements .code {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    fill: var(--ink);
}

.carte-departements .nombre {
    font-size: 22px;
    fill: var(--ink-500);
}

/* Sur le département survolé, l'étiquette doit basculer en clair : restée en
   encre sombre sur le marine, elle ne se lirait plus. */
.carte-departements a:hover path {
    fill: var(--marine-700);
}

.carte-departements a:hover text {
    fill: var(--surface);
}

/* Une unité de viewBox ne vaut pas une taille physique constante : la carte
   passe d'environ 490 px de large sur desktop à 339 px sur un mobile, et le
   numéro y tomberait à 10 px. On le grossit dans le repère pour qu'il conserve
   la même taille à l'écran. Le nombre de sessions, lui, est retiré — la légende
   sous la carte le porte de toute façon. */
@media (max-width: 720px) {
    .carte-departements .code {
        font-size: 38px;
    }

    .carte-departements .nombre {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carte-departements path {
        transition: none;
    }
}

/* ============================================================================
   Animations — parcimonieuses, et neutralisées si l'utilisateur le demande.
   Aucune animation n'est utilisée dans l'espace de test.
   ============================================================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes drawerIn {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes sheetUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.anim-fade {
    animation: fadeIn 0.2s ease;
}

.anim-drawer {
    animation: drawerIn 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.anim-sheet {
    animation: sheetUp 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* ============================================================================
   Validation Blazor
   ============================================================================ */

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
    font-size: 14px;
}

/* ============================================================================
   Bandeaux d'erreur du runtime Blazor
   ============================================================================ */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    color: white;
    padding: 1rem;
}

    .blazor-error-boundary::after {
        content: "Une erreur est survenue.";
    }