/* ============================================================================
   CHARTE GRAPHIQUE SMIE — feuille autonome et réutilisable
   ----------------------------------------------------------------------------
   Système de design SMIE isolé de tout projet : jetons (design tokens),
   typographie, et composants de base. À inclure tel quel dans n'importe quel
   projet de l'écosystème SMIE (ATELIERS, CRM, portails, PDF…).

   Différence avec smie-theme.css (CRM) : ce fichier NE dépend PAS de app.css.
   Il pose lui-même les variables et des styles de base neutres. Un projet peut
   soit l'utiliser seul, soit continuer à surcharger ses propres composants.

   Couleurs de marque : bleu #008FCB · orange #F49F25
   Version 1.0 — 2026-09-25
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. JETONS (design tokens) — la source de vérité de la charte
   --------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* --- Couleurs de marque (référence) ------------------------------------
       Bleu   #008FCB  (C80 M30 J0  N0)
       Orange #F49F25  (C0  M45 J90 N0)
       Les nuances -700/-800/-900 ci-dessous sont dérivées du bleu de marque
       pour garantir le contraste AA sur texte blanc.                          */
    --brand-blue:   #008FCB;
    --brand-orange: #F49F25;

    /* 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              */

    /* Barres de navigation */
    --nav-bg:   #005481;     /* Bleu 800 */
    --nav-ink:  #dbeefb;
    --admin-bg: #003a5f;     /* Bleu 900 — distingue un espace d'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 */
    --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. BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.5;
}
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; }
a { color: var(--primary); }
a:hover { color: var(--primary-strong); }

/* ---------------------------------------------------------------------------
   3. COMPOSANTS DE BASE
   --------------------------------------------------------------------------- */

/* Cartes / surfaces */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.card-accent { border-color: var(--accent); box-shadow: 0 1px 0 var(--accent) inset; }

/* Barres 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                    { border-collapse: collapse; width: 100%; }
.data-table th, .data-table td { border-bottom: 1px solid var(--line); padding: .6rem .75rem; text-align: left; }
.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); }

/* Champs */
input, select, textarea {
    background: var(--card); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .45rem .6rem; font: inherit;
}

/* Boutons */
.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .45rem .8rem; font: inherit; cursor: pointer;
}
.btn:hover { border-color: var(--primary); }
/* Bouton primaire — réaffirmé APRÈS .btn pour ne pas être écrasé par la cascade */
.btn-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
/* 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); }

/* Badges */
.badge          { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; 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); }
.badge-ok       { background: var(--ok-bg);      color: var(--ok-ink); }

/* Badges de suivi santé au travail (SI / SIA / SIR) — code couleur métier SMIE */
.badge-si  { background: var(--ok-bg);  color: var(--ok-ink);  font-weight: 700; }  /* Suivi Individuel */
.badge-sia { background: var(--up-bg);  color: var(--up-ink);  font-weight: 700; }  /* Suivi Individuel Adapté */
.badge-sir { background: var(--sir-bg); color: var(--sir-ink); font-weight: 700; }  /* Suivi Individuel Renforcé */

/* 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    */

/* ---------------------------------------------------------------------------
   3bis. FRONT PUBLIC — bandeau, cartes d'ateliers, animations (plus d'orange)
   Classes opt-in : n'affectent que les écrans publics qui les utilisent.
   --------------------------------------------------------------------------- */

/* Bandeau d'accueil */
.hero {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, #e8f6fd 0%, var(--bg) 55%, #fff 100%);
    border: 1px solid var(--line); border-radius: 16px;
    padding: 2.4rem 2.2rem; margin-bottom: 1.8rem;
}
.hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); }
.hero::after  { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
                background: radial-gradient(circle, rgba(244,159,37,.18), rgba(244,159,37,0) 70%); }
.hero h1 { margin: 0 0 .4rem; font-size: clamp(1.6rem, 4vw, 2.1rem); color: var(--primary-strong); letter-spacing: -.02em; }
.hero h1 .accent { color: var(--brand-orange); }
.hero p  { margin: 0; max-width: 60ch; color: var(--muted); font-size: 1.05rem; }
.hero .cta { margin-top: 1.4rem; display: flex; gap: .7rem; flex-wrap: wrap; }

/* Boutons « call to action » arrondis (front public) */
.cta-btn { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px;
           padding: .7rem 1.3rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
           border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; }
.cta-accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 14px rgba(244,159,37,.35); }
.cta-accent:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 7px 20px rgba(244,159,37,.45); }
.cta-ghost { background: #fff; color: var(--primary); border-color: var(--primary); }
.cta-ghost:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }

/* Titre de section souligné d'un dégradé orange */
.section-titre { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem; font-size: 1.3rem; color: var(--primary-strong); }
.section-titre::after { content: ""; height: 3px; flex: 1; background: linear-gradient(90deg, var(--accent), transparent); border-radius: 2px; }

/* Grille de cartes d'ateliers */
.grille-ateliers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }
.atelier { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
           padding: 1.3rem 1.3rem 1.1rem; overflow: hidden;
           transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
           opacity: 0; transform: translateY(14px); animation: surgir .5s ease forwards; }
.atelier::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
                   background: linear-gradient(90deg, var(--brand-blue), var(--accent));
                   transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.atelier:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,83,129,.14); border-color: #cfe6f3; }
.atelier:hover::before { transform: scaleX(1); }
.atelier h3 { margin: .2rem 0 .5rem; font-size: 1.12rem; line-height: 1.3; }
.atelier h3 a { color: var(--primary); text-decoration: none; }
.atelier:hover h3 a { color: var(--primary-strong); }
.atelier p.obj { margin: .7rem 0 0; color: var(--muted); font-size: .93rem; }
.atelier .lien { margin-top: .9rem; display: inline-flex; align-items: center; gap: .3rem; color: var(--primary); font-weight: 600; font-size: .9rem; text-decoration: none; }
.atelier:hover .lien { color: var(--brand-orange); }
.atelier .lien span { transition: transform .15s ease; }
.atelier:hover .lien span { transform: translateX(3px); }
.atelier:nth-child(1){animation-delay:.03s}.atelier:nth-child(2){animation-delay:.10s}
.atelier:nth-child(3){animation-delay:.17s}.atelier:nth-child(4){animation-delay:.24s}
.atelier:nth-child(5){animation-delay:.31s}.atelier:nth-child(6){animation-delay:.38s}

/* Pastille durée (orange doux) */
.pill { display: inline-flex; align-items: center; gap: .35rem; background: #fff4e4; color: #8a5200;
        border: 1px solid #f6d9ac; border-radius: 999px; padding: .12rem .6rem; font-size: .78rem; font-weight: 700; }

/* CTA compact (dans une carte) */
.cta-sm { padding: .45rem .9rem; font-size: .9rem; }

/* Apparition en fondu/glissé — utilitaire réutilisable */
.fade-up { opacity: 0; transform: translateY(14px); animation: surgir .5s ease forwards; }
.fade-up.d1 { animation-delay: .06s } .fade-up.d2 { animation-delay: .13s } .fade-up.d3 { animation-delay: .20s }

/* Fiche atelier — cartes de session */
.sessions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.session-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
                padding: 1.1rem 1.1rem 1rem; overflow: hidden;
                opacity: 0; transform: translateY(14px); animation: surgir .5s ease forwards;
                transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.session-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
                        background: linear-gradient(180deg, var(--brand-blue), var(--accent)); }
.session-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,83,129,.13); border-color: #cfe6f3; }
.session-card .date  { font-size: 1.05rem; font-weight: 700; color: var(--primary-strong); }
.session-card .meta  { color: var(--muted); font-size: .88rem; margin: .35rem 0 .1rem; }
.session-card .places{ font-size: .85rem; margin: .55rem 0 .9rem; color: var(--ink); }
.session-card:nth-child(1){animation-delay:.03s}.session-card:nth-child(2){animation-delay:.10s}
.session-card:nth-child(3){animation-delay:.17s}.session-card:nth-child(4){animation-delay:.24s}
.session-card:nth-child(5){animation-delay:.31s}.session-card:nth-child(6){animation-delay:.38s}

@keyframes surgir { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .atelier, .session-card, .fade-up { animation: none; opacity: 1; transform: none; }
    .cta-btn:hover, .atelier:hover, .session-card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   4. 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;
    }
}

/* ---------------------------------------------------------------------------
   5. POLICES DE LA CHARTE (OPTIONNEL) — à activer seulement après avoir
      hébergé les fichiers de police localement (recommandé : aucun chargement
      externe vers Google Fonts, pour rester conforme au RGPD et à la 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;
   }
   --------------------------------------------------------------------------- */