/* ============================================================================
   SMIE · Thème charte graphique — surcouche pour "Espace client SMIE" (CRM)
   VERSION CLAIRE UNIQUEMENT (pas de mode sombre)
   ----------------------------------------------------------------------------
   Ce fichier NE remplace PAS app.css : il se charge APRÈS lui et réaligne les
   variables et quelques composants sur la charte graphique SMIE (bleu #008FCB /
   orange #F49F25). Rien dans le HTML/PHP n'a besoin d'être réécrit : les classes
   existantes (.app-header, .btn, .badge, .data-table…) sont simplement re-teintées.

   INTÉGRATION — dans chaque gabarit, juste après la ligne app.css :
     <link rel="stylesheet" href="/assets/app.css?v=2">
     <link rel="stylesheet" href="/assets/smie-theme.css?v=1">   <!-- déjà ajouté -->

   Réversible : retirer la ligne ci-dessus rétablit l'ancien thème.
   Version 1.1 (claire) — 17/09/2026
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. JETONS (design tokens)
   Mêmes noms que app.css : les valeurs sont remplacées, la mise en page reste.
   --------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Fonds & surfaces */
    --bg:         #f6fbfe;   /* Neutre 50  */
    --card:       #ffffff;
    --surface-2:  #eff4f8;   /* Neutre 100 — en-têtes de tableau, badges neutres */
    --row-hover:  #e5faff;   /* Bleu 50    — survol de ligne                       */

    /* Texte */
    --ink:        #1b2023;   /* Neutre 900 — 16:1 sur blanc                        */
    --muted:      #616b71;   /* Neutre 600 — 5,4:1, seuil AA respecté             */
    --line:       #e0e7ec;   /* Neutre 200 — bordures                              */

    /* Couleur principale — Bleu SMIE (nuance sûre pour texte blanc : 5,8:1) */
    --primary:      #006ba0; /* Bleu 700 */
    --primary-ink:  #ffffff;
    --primary-strong:#005481;/* Bleu 800 — survols, barre de nav                  */

    /* Barre de navigation secondaire */
    --nav-bg:   #005481;     /* Bleu 800 */
    --nav-ink:  #dbeefb;
    --admin-bg: #003a5f;     /* Bleu 900 — distingue l'espace administration       */

    /* Accent — Orange SMIE (toujours sur texte foncé) */
    --accent:       #f49f25;
    --accent-ink:   #1b2023;
    --accent-hover: #fbb869; /* Orange 300 */

    /* Couleurs fonctionnelles (fond teinté clair + texte foncé) */
    --warn:      #a32020;    /* emphase "en retard"                               */
    --late-bg:   #fbe6e6;  --late-ink: #a32020;   /* Erreur / retard             */
    --up-bg:     #e5f2fb;  --up-ink:   #005481;   /* Information / à venir        */
    --ok-bg:     #e4f6ec;  --ok-ink:   #14713c;   /* Succès / à jour              */
    --info-bg:   #e5f2fb;
    --err-bg:    #fbe6e6;  --err-ink:  #a32020;
    --sir-bg:    #ffe5c4;  --sir-ink:  #783b00;   /* Suivi renforcé (orange doux) */

    /* Rayon (inchangé) */
    --radius: 10px;

    /* Typographie — pile système par défaut (aucune dépendance externe, RGPD-safe).
       Pour activer les polices de la charte, voir le bloc "POLICES" en bas.       */
    --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: var(--font-body);
}

/* ---------------------------------------------------------------------------
   2. TYPOGRAPHIE
   --------------------------------------------------------------------------- */
body { font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; }

/* ---------------------------------------------------------------------------
   3. COMPOSANTS — on route les couleurs "en dur" de app.css vers les jetons
   (mêmes sélecteurs, chargés après : la charte l'emporte).
   --------------------------------------------------------------------------- */

/* Barre de navigation */
.app-nav        { background: var(--nav-bg); }
.app-nav a      { color: var(--nav-ink); }
.app-header.admin { background: var(--admin-bg); }

/* Tableaux */
.data-table thead th          { background: var(--surface-2); }
.data-table tbody tr:hover    { background: var(--row-hover); }
.data-table tfoot th,
.data-table tfoot td          { background: var(--surface-2); }

/* Badge par défaut + variantes */
.badge          { background: var(--surface-2); color: var(--ink); }
.badge-late     { background: var(--late-bg);   color: var(--late-ink); }
.badge-upcoming { background: var(--up-bg);      color: var(--up-ink); }

/* Champs & boutons */
input, select, textarea { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn            { background: var(--card); }
/* On ré-affirme le bouton primaire APRÈS la règle .btn ci-dessus, sinon
   celle-ci écraserait son fond bleu (ordre de cascade). */
.btn-primary    { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.skip-link:focus { background: var(--card); color: var(--ink); }

/* ---------------------------------------------------------------------------
   4. NOUVEAUX COMPOSANTS DE LA CHARTE (réutilisables dans tout l'écosystème SMIE)
   --------------------------------------------------------------------------- */

/* Bouton d'accent orange — pour l'action mise en avant (1 par écran) */
.btn-accent {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    font-weight: 700;
}
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* Un <button class="btn"> doit avoir exactement la meme taille qu'un <a class="btn"> */
button.btn { font: inherit; }

/* Carte mise en avant à l'accent */
.card-accent { border-color: var(--accent); box-shadow: 0 1px 0 var(--accent) inset; }

/* Badges de suivi santé au travail (SI / SIA / SIR) */
.badge-si  { background: var(--ok-bg);  color: var(--ok-ink);  font-weight: 700; }
.badge-sia { background: var(--up-bg);  color: var(--up-ink);  font-weight: 700; }
.badge-sir { background: var(--sir-bg); color: var(--sir-ink); font-weight: 700; }
.badge-ok  { background: var(--ok-bg);  color: var(--ok-ink); }

/* Puce de statut (point coloré + libellé) */
.status { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.status .dot { width: .55rem; height: .55rem; border-radius: 50%; flex: none; }
.status-ok    .dot { background: var(--ok-ink); }
.status-late  .dot { background: var(--late-ink); }
.status-soon  .dot { background: #e8a417; }        /* Attention — à planifier */
.status-off   .dot { background: #808b92; }        /* Neutre 500 — inactif    */

/* ---------------------------------------------------------------------------
   5. IMPRESSION / PDF — rendu clair maîtrisé
   --------------------------------------------------------------------------- */
@media print {
    :root {
        --bg:#fff; --card:#fff; --surface-2:#eee;
        --ink:#000; --muted:#333; --line:#999;
        --primary:#004a6e; --primary-ink:#fff;
        --late-ink:#000; --up-ink:#000; --ok-ink:#000; --err-ink:#000;
    }
}

/* ---------------------------------------------------------------------------
   6. POLICES DE LA CHARTE (OPTIONNEL) — à activer seulement après avoir
      hébergé les fichiers de police localement (recommandé : pas de chargement
      externe vers Google Fonts, pour rester conforme au RGPD et à votre CSP).
      1) Déposer les .woff2 dans /assets/fonts/
      2) Décommenter le bloc ci-dessous.

   @font-face {
       font-family: "Hanken Grotesk";
       src: url("/assets/fonts/HankenGrotesk-Variable.woff2") format("woff2");
       font-weight: 400 700; font-display: swap;
   }
   @font-face {
       font-family: "Bricolage Grotesque";
       src: url("/assets/fonts/BricolageGrotesque-Variable.woff2") format("woff2");
       font-weight: 500 700; font-display: swap;
   }
   :root {
       --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
       --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
   }
   --------------------------------------------------------------------------- */