/* ==========================================================================
   ODICE — couche UI applicative
   --------------------------------------------------------------------------
   `odice-tokens.css` est le design system Odice (charte 2020) extrait tel
   quel — seul écart : les `url()` vers Gilroy / Brandon Grotesque, non
   livrables, ont été retirés (ils produisaient six 404 par page). On n'y
   ajoute rien d'applicatif. Ce fichier-ci est la couche applicative :
     1. les corrections d'accessibilité de la palette brute (WCAG 2.2 AA),
     2. la palette data-viz validée,
     3. les composants partagés par le dashboard et la page de connexion.

   Toutes les valeurs d'accessibilité sont vérifiées par `node tools/check-contrast.mjs`
   (contrastes mesurés, seuils AA). Voir docs/DESIGN-SYSTEM.md pour la charte
   complète et le raisonnement derrière chaque écart.
   ========================================================================== */
@import url('./odice-tokens.css');

:root{
  /* ---- Corrections d'accessibilité de la palette charte ----
     1. --odice-gris-moyen (#9EA4A6) : 2.53:1 sur blanc. Réservé aux filets et
        aux séparateurs (usage prévu par la charte), JAMAIS à du texte.
     2. Texte secondaire : neutral-600 (#6E7274) tombe à 4.45:1 sur les fonds
        gris. On l'assombrit à #5C6062 (6.35:1 blanc / 5.82:1 gris) — même
        famille neutre, lisible partout, y compris en 11-12px.
     3. Bordures de contrôles (champs, boutons secondaires) : le composant doit
        atteindre 3:1. --border (#CED4D7) plafonne à 1.5:1 → #878D8F (3.37:1).
        Les filets purement décoratifs gardent --border-soft.
     4. Anneau de focus : le cyan charte (#27A9CE) fait 2.74:1 sur blanc.
        On utilise cyan-deep (#1A82A0, 4.43:1) sur fond clair et le cyan pur
        sur fond navy (3.21:1, conforme). */
  --fg-2:          #5C6062;
  --border-control:#878D8F;
  --focus-ring:    var(--odice-cyan-deep);
  --focus-ring-on-dark: var(--odice-cyan);

  /* ---- Surfaces applicatives ---- */
  --app-bg:        var(--bg-soft);      /* #FAFAFA */
  --card-bg:       var(--neutral-0);
  --row-hover:     var(--neutral-100);

  /* ---- Palette data-viz ----
     Palette catégorielle ancrée sur la marque puis validée (bande de clarté
     OKLCH, plancher de chroma, séparation daltonisme, contraste >= 3:1 sur
     surface claire). Navy et cyan sont les pas clairs des couleurs charte :
     #134C82 et #27A9CE ne passent pas la bande de clarté / le contraste en
     usage multi-séries. L'ordre est figé : une série garde sa couleur quel
     que soit le filtre actif. */
  --viz-1: #2E8A5A;  /* vert   */
  --viz-2: #1A5C99;  /* navy   (pas clair de #134C82) */
  --viz-3: #C07B14;  /* ambre  */
  --viz-4: #6A5AAB;  /* violet */
  --viz-5: #1A9BBF;  /* cyan   (pas foncé de #27A9CE) */
  --viz-6: #C2628C;  /* rose   */
  --viz-solo: var(--odice-bleu-2020);   /* série unique = navy de marque */
  --viz-grid: rgba(65,64,66,0.10);
}

*, *::before, *::after{ box-sizing:border-box; }

/* Marges par défaut neutralisées : l'espacement vient des tokens --sp-*,
   jamais des marges implicites du navigateur. */
h1, h2, h3, h4, h5, h6, p, ul, ol, figure{ margin:0; padding:0; }
ul, ol{ list-style:none; }

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

body{
  margin:0;
  background:var(--app-bg);
  color:var(--fg-1);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Focus visible (jamais supprimé) ---------- */
:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
.on-dark :focus-visible{ outline-color:var(--focus-ring-on-dark); }

/* ---------- Accessibilité utilitaires ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--sp-4); top:-64px; z-index:100;
  background:var(--odice-bleu-2020); color:#fff;
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm);
  font-weight:600; text-decoration:none;
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top:var(--sp-3); color:#fff; }

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

/* ==========================================================================
   TYPOGRAPHIE APPLICATIVE
   Titres = --font-display (Gilroy, repli Fundamental Brigade) ;
   texte courant = --font-body. Tailles plancher : 12px.
   ========================================================================== */
.od-eyebrow{
  font-family:var(--font-display); font-weight:400;
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--fg-2); margin:0;
}
.od-section-title{
  font-family:var(--font-display); font-weight:700;
  font-size:15px; letter-spacing:0.01em; color:var(--fg-1); margin:0;
}
.od-hint{ font-size:13px; color:var(--fg-2); margin:0; }

/* ==========================================================================
   BOUTONS — spécifications du design system
   primaire : navy plein · secondaire : filet navy · neutre : filet gris
   ========================================================================== */
.od-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-body); font-weight:600; font-size:14px; line-height:1.2;
  padding:9px 16px; border-radius:var(--r-sm); border:1.5px solid transparent;
  background:var(--neutral-0); color:var(--fg-1); cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.od-btn--sm{ font-size:13px; padding:6px 12px; }
.od-btn:active:not(:disabled){ transform:translateY(1px); }

.od-btn--primary{ background:var(--action); border-color:var(--action); color:var(--action-fg); }
.od-btn--primary:hover:not(:disabled){ background:var(--action-hover); border-color:var(--action-hover); }

.od-btn--secondary{ background:var(--neutral-0); border-color:var(--odice-bleu-2020); color:var(--odice-bleu-2020); }
.od-btn--secondary:hover:not(:disabled){ background:var(--odice-bleu-2020-95); }

.od-btn--neutral{ background:var(--neutral-0); border-color:var(--border-control); color:var(--fg-1); }
.od-btn--neutral:hover:not(:disabled){ border-color:var(--odice-bleu-2020); color:var(--odice-bleu-2020); }

.od-btn:disabled{
  background:var(--neutral-0); border-color:var(--neutral-300);
  color:var(--fg-2); opacity:0.55; cursor:not-allowed;
}

/* ==========================================================================
   CHAMPS DE FORMULAIRE
   ========================================================================== */
.od-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.od-field > label,
.od-label{
  font-family:var(--font-display); font-weight:400;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-2);
}
.od-input, .od-select{
  font-family:var(--font-body); font-size:14px; color:var(--fg-1);
  background:var(--neutral-0);
  border:1px solid var(--border-control); border-radius:var(--r-md);
  padding:9px 11px; min-width:0; width:100%;
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.od-select{
  appearance:none; padding-right:30px; cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg-2) 50%),
    linear-gradient(135deg, var(--fg-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 51%, calc(100% - 11px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.od-input:hover, .od-select:hover{ border-color:var(--fg-2); }
.od-input:focus, .od-select:focus{
  border-color:var(--odice-bleu-2020);
  box-shadow:0 0 0 3px var(--odice-bleu-2020-95);
}
.od-input::placeholder{ color:var(--fg-2); opacity:1; }
/* ==========================================================================
   CARTES
   ========================================================================== */
.od-card{
  background:var(--card-bg);
  border:1px solid var(--border-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
}
.od-card__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-3);
}

/* ==========================================================================
   BADGES — pastille + libellé (l'état n'est jamais porté par la couleur seule)
   ========================================================================== */
.od-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:var(--r-pill);
  font-family:var(--font-body); font-size:12px; font-weight:600;
  white-space:nowrap;
}
.od-badge::before{
  content:""; width:7px; height:7px; border-radius:var(--r-pill);
  background:currentColor; flex:none;
}
.od-badge--ok{      background:var(--success-bg);       color:#1F6B47; }
.od-badge--wait{    background:var(--warn-bg);          color:#8B5C0F; }
.od-badge--neutral{ background:var(--neutral-100);      color:var(--fg-2); }
.od-badge--info{    background:var(--odice-bleu-2020-95); color:var(--odice-bleu-2020-deep); }
.od-badge--error{   background:var(--danger-bg);        color:var(--semantic-rouge-deep); }
/* Étiquette (statut Monday) : pas d'état binaire, donc pas de pastille */
.od-badge--tag{ background:var(--odice-bleu-2020-95); color:var(--odice-bleu-2020-deep); }
.od-badge--tag::before{ display:none; }

/* ==========================================================================
   MESSAGES D'ÉTAT
   ========================================================================== */
.od-status{ font-size:13px; color:var(--fg-2); }
.od-status:empty{ display:none; }
.od-status--ok{ color:#1F6B47; font-weight:600; }
.od-status--err{ color:var(--semantic-rouge-deep); font-weight:600; }

.od-spinner{
  width:14px; height:14px; border:2px solid var(--odice-bleu-2020-95);
  border-top-color:var(--odice-bleu-2020); border-radius:50%;
  display:inline-block; animation:od-spin 0.7s linear infinite;
  vertical-align:-2px; margin-right:7px;
}
@keyframes od-spin{ to{ transform:rotate(360deg); } }