/* =============================================================
   Plateforme Extras — jetons de design
   Version 4.0 — août 2026 — système complet (CHARTE_GRAPHIQUE.md)
   Voir CHARTE_GRAPHIQUE.md chapitres 1–21.

   Deux couches :
     1. la palette brute — les valeurs
     2. la couche sémantique — les rôles
   Les composants n'utilisent QUE la couche sémantique.
   Écrire une valeur hexadécimale dans un composant est un défaut.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Expanded:wght@600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* =========================================================
     1. PALETTE BRUTE — ne jamais référencer dans un composant
     ========================================================= */
  --c-noir:         #121212;   /* noir profond, très légèrement chaud */
  --c-encre-800:    #2E2E2E;
  --c-encre-600:    #5E5E5E;
  --c-encre-400:    #8F8F8F;
  --c-encre-200:    #E4E4E4;
  --c-blanc:        #FFFFFF;
  --c-gris-50:      #F5F5F5;

  /* Rouge-orange — la couleur de marque et d'action */
  --c-feu-900:      #8E2408;
  --c-feu-700:      #C22E0C;   /* action, texte blanc — ~5.4:1, conforme AA */
  --c-feu-500:      #F2400F;   /* marque, grands aplats — JAMAIS de petit texte blanc dessus */
  --c-feu-50:       #FDEBE6;

  --c-vert-700:     #17663F;   /* validé, payé — distinct de la marque */
  --c-vert-50:      #E6F0EB;

  /* Alerte : grenat profond et désaturé — nettement plus sombre que le feu,
     donc distinguable même par quelqu'un qui perçoit mal les rouges */
  --c-grenat-800:   #5C1410;
  --c-grenat-600:   #7E1C15;
  --c-grenat-50:    #F4E9E8;

  /* =========================================================
     2. COUCHE SÉMANTIQUE — la seule à utiliser
     ========================================================= */
  --texte-principal:   var(--c-noir);
  --texte-appuye:      var(--c-encre-800);
  --texte-secondaire:  var(--c-encre-600);
  --texte-tertiaire:   var(--c-encre-400);
  --texte-inverse:     var(--c-blanc);
  --texte-marque:      var(--c-feu-700);

  /* Blanc partout : plus de fond crème */
  --fond-app:          var(--c-blanc);
  --surface:           var(--c-blanc);
  --surface-discrete:  var(--c-gris-50);
  --surface-selection: var(--c-feu-50);

  --bordure:           var(--c-encre-200);
  --bordure-forte:     var(--c-encre-400);
  --bordure-active:    var(--c-feu-700);

  /* Action = orange. Un seul bouton primaire par écran. */
  --action:            var(--c-feu-700);
  --action-survol:     var(--c-feu-900);
  --action-texte:      var(--c-blanc);

  /* Marque : logo, grands aplats. Jamais de petit texte blanc dessus. */
  --marque:            var(--c-feu-500);

  /* Urgence = NOIR. L'orange étant devenu l'action, il ne peut plus signaler l'urgence. */
  --urgence:           var(--c-noir);
  --urgence-survol:    var(--c-encre-800);
  --urgence-fond:      var(--c-gris-50);

  /* États — quatre, jamais dix */
  --etat-ok-fond:       var(--c-vert-50);
  --etat-ok-texte:      var(--c-vert-700);
  --etat-attente-fond:  var(--c-feu-50);
  --etat-attente-texte: var(--c-feu-900);
  --etat-alerte-fond:   var(--c-grenat-50);
  --etat-alerte-texte:  var(--c-grenat-800);
  --etat-neutre-fond:   var(--c-gris-50);
  --etat-neutre-texte:  var(--c-encre-600);
  --alerte:             var(--c-grenat-600);

  /* =========================================================
     3. TYPOGRAPHIE
     ========================================================= */
  --police:          'Archivo', system-ui, -apple-system, sans-serif;
  --police-titre:    'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  /* Montants, heures et durées UNIQUEMENT. Jamais du texte courant. */
  --police-donnees:  'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Facteur de taille de texte, réglable par l'utilisateur (REQ-UI-016).
     1 = standard, 1.15 = confortable, 1.3 = grand. */
  --facteur-texte: 1;

  --t-titre-1:    calc(24px * var(--facteur-texte));  --i-titre-1:    calc(28px * var(--facteur-texte));
  --t-titre-2:    calc(18px * var(--facteur-texte));  --i-titre-2:    calc(21px * var(--facteur-texte));
  --t-titre-3:    calc(15px * var(--facteur-texte));  --i-titre-3:    calc(18px * var(--facteur-texte));
  --t-corps:      calc(14px * var(--facteur-texte));  --i-corps:      calc(18px * var(--facteur-texte));
  --t-petit:      calc(12px * var(--facteur-texte));  --i-petit:      calc(15px * var(--facteur-texte));
  --t-etiquette:  calc(10px * var(--facteur-texte));  --i-etiquette:  calc(13px * var(--facteur-texte));

  --t-montant-xl: calc(28px * var(--facteur-texte));  --i-montant-xl: calc(32px * var(--facteur-texte));
  --t-montant-l:  calc(18px * var(--facteur-texte));  --i-montant-l:  calc(23px * var(--facteur-texte));
  --t-montant:    calc(14px * var(--facteur-texte));
  --t-heure:      calc(14px * var(--facteur-texte));

  --g-normale: 400;
  --g-moyenne: 500;
  --g-semi:    600;
  --g-forte:   700;
  --interlettrage-etiquette: 0.06em;

  /* =========================================================
     4. ESPACEMENT — densité 1 employeur, 1.15 extra
     ========================================================= */
  --densite: 1;
  --esp-1:  calc(4px  * var(--densite));
  --esp-2:  calc(8px  * var(--densite));
  --esp-3:  calc(12px * var(--densite));
  --esp-4:  calc(16px * var(--densite));
  --esp-6:  calc(24px * var(--densite));
  --esp-8:  calc(32px * var(--densite));
  --esp-12: calc(48px * var(--densite));
  --esp-16: calc(64px * var(--densite));

  /* =========================================================
     5. RAYONS — le rayon porte du sens, voir charte §2.3
     ========================================================= */
  /* Cartes : largeur FIXE, identique sur mobile et ordinateur */
  --carte-largeur:   240px;
  --carte-padding:   14px;
  --carte-gap:       12px;

  --rayon-carte:     8px;
  --rayon-controle:  6px;   /* boutons, champs */
  --rayon-etiquette: 3px;
  --rayon-document:  0px;   /* le papier n'a pas de coins arrondis */
  --rayon-photo:     50%;   /* seule forme circulaire du produit */
  /* Aucun jeton de pilule n'existe, et il ne doit pas en être créé. */

  /* =========================================================
     6. ÉLÉVATION
     ========================================================= */
  --ombre-carte:   0 1px 2px color-mix(in srgb, var(--c-noir) 8%, transparent);
  --ombre-panneau: 0 -2px 24px color-mix(in srgb, var(--c-noir) 14%, transparent);
  --ombre-bas:     0 -1px 8px color-mix(in srgb, var(--c-noir) 8%, transparent);
  --ombre-cadre-app: 0 0 0 1px var(--bordure);
  --ombre-ligne:   none;
  --ombre-focus-sel: none;
  --ombre-focus-nav: none;
  --ombre-tiroir: var(--ombre-panneau);
  --ombre-carte-m: var(--ombre-carte);
  --ombre-carte-l: var(--ombre-panneau);
  --ombre-focus-sel-4: none;
  --ombre-carte-m2: var(--ombre-carte);
  --ombre-carte-l2: var(--ombre-panneau);
  --navigation-accent-soft: color-mix(in srgb, var(--navigation-texte) 12%, transparent);
  --navigation-texte-soft: color-mix(in srgb, var(--navigation-texte) 68%, transparent);
  --navigation-surface-soft: color-mix(in srgb, var(--navigation-texte) 10%, transparent);

  /* Bord perforé — documents contractuels définitifs uniquement */
  --perforation: repeating-linear-gradient(
                   90deg,
                   var(--bordure-forte) 0 4px,
                   transparent 4px 9px
                 );

  /* =========================================================
     6bis. GRILLE ET MISE EN PAGE
     ========================================================= */
  --contenant-max:   1200px;
  --marge-compact:   var(--esp-4);
  --marge-moyen:     var(--esp-6);
  --marge-large:     var(--esp-8);
  /* Points de rupture, pour référence — à écrire en media queries :
     compact < 600px · moyen 600–1024px · large > 1024px */

  /* =========================================================
     6ter. COUCHES — échelle unique, aucune valeur arbitraire
     ========================================================= */
  --couche-base:         0;
  --couche-fixe:        10;   /* navigation, en-têtes de tableau */
  --couche-flottant:   100;   /* menus déroulants */
  --couche-panneau:    200;   /* panneau de détail */
  --couche-modal:      300;   /* confirmation d'action irréversible */
  --couche-notification: 400; /* toujours au-dessus */

  /* =========================================================
     6quater. ÉTATS D'INTERACTION
     ========================================================= */
  --opacite-desactive:   0.4;
  --focus-epaisseur:     2px;
  --focus-decalage:      2px;
  --seuil-etat-en-cours: 400ms;  /* en deçà, pas d'indicateur */
  --duree-annulation:    10s;    /* fenêtre d'annulation d'une action réversible */
  --duree-notification:  4s;

  /* Squelettes de chargement */
  --squelette-fond:      var(--c-gris-50);
  --squelette-brillance: var(--c-encre-200);

  /* Alias de navigation (couche sémantique — barres, bas, tiroir) */
  --navigation-fond:     var(--c-noir);
  --navigation-texte:    var(--c-blanc);
  --navigation-accent:   var(--action);

  /* =========================================================
     7. CIBLES TACTILES
     ========================================================= */
  --cible-min:     44px;
  --cible:         44px;
  --cible-cloture: 56px;
  --cible-dense:   40px;
  --cible-ecart-min: 8px;   /* écart minimal entre deux cibles adjacentes */

  /* Tableaux denses */
  --tableau-hauteur-ligne: 40px;
  --tableau-entete-fond:   var(--c-gris-50);

  /* =========================================================
     8. MOUVEMENT
     ========================================================= */
  --transition:       150ms ease-out;
  --transition-lente: 200ms ease-out;
  --detachement:      300ms cubic-bezier(0.2, 0, 0.2, 1);
}

[data-densite='extra'] { --densite: 1.15; }

/* Taille de texte choisie par l'utilisateur (REQ-UI-016) */
[data-texte='standard']    { --facteur-texte: 1; }
[data-texte='confortable'] { --facteur-texte: 1.15; }
[data-texte='grand']       { --facteur-texte: 1.3; }

/* -------------------------------------------------------------
   Mode service (V2) — clôture à 1h du matin, cave sans lumière.
   Seule la couche sémantique est réassignée.
   ------------------------------------------------------------- */
[data-theme='service'] {
  --texte-principal:   #F4F4F4;
  --texte-appuye:      #D6D6D6;
  --texte-secondaire:  #9E9E9E;
  --texte-tertiaire:   #6E6E6E;
  --texte-inverse:     #121212;
  --fond-app:          #121212;
  --surface:           #1C1C1C;
  --surface-discrete:  #242424;
  --surface-selection: #33150C;
  --bordure:           #333333;
  --bordure-forte:     #4A4A4A;
  --action:            #F2400F;
  --action-survol:     #FF7A38;
  --action-texte:      #121212;
  --marque:            #F2400F;
  --urgence:           #F4F4F4;
  --etat-ok-fond:      #17301F;  --etat-ok-texte:      #6FC79A;
  --etat-attente-fond: #33190C;  --etat-attente-texte: #F2A170;
  --etat-alerte-fond:  #33170F;  --etat-alerte-texte:  #E88F84;
  --etat-neutre-fond:  #242424;  --etat-neutre-texte:  #9E9E9E;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms; --transition-lente: 0ms; --detachement: 0ms; }
}

/* =============================================================
   Utilitaires
   ============================================================= */

.montant, .heure, .duree {
  font-family: var(--police-donnees);
  font-variant-numeric: tabular-nums;
  font-weight: var(--g-moyenne);
}
.montant-xl {
  font-family: var(--police-donnees);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-montant-xl); line-height: var(--i-montant-xl);
  font-weight: var(--g-semi);
}
.montant-l {
  font-family: var(--police-donnees);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-montant-l); line-height: var(--i-montant-l);
  font-weight: var(--g-semi);
}

.etiquette {
  display: inline-block;
  font-size: var(--t-etiquette); line-height: var(--i-etiquette);
  font-weight: var(--g-semi);
  letter-spacing: var(--interlettrage-etiquette);
  text-transform: uppercase;
  border-radius: var(--rayon-etiquette);
  padding: 2px var(--esp-2);
}
.etiquette--ok      { background: var(--etat-ok-fond);      color: var(--etat-ok-texte); }
.etiquette--attente { background: var(--etat-attente-fond); color: var(--etat-attente-texte); }
.etiquette--alerte  { background: var(--etat-alerte-fond);  color: var(--etat-alerte-texte); }
.etiquette--neutre  { background: var(--etat-neutre-fond);  color: var(--etat-neutre-texte); }
/* Charte §3.5 : « texte noir, sans fond — jamais un aplat plein » (PR #72/#73). */
.etiquette--urgence { background: none;                     color: var(--urgence); }

/* Document contractuel définitif : rayon nul, bord perforé, aucune ombre. */
.document {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-document);
  box-shadow: none;
  position: relative;
}
.document::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px;
  background-image: var(--perforation);
}

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


/* =============================================================
   États d'interaction — application uniforme
   ============================================================= */

[disabled], [aria-disabled='true'] {
  opacity: var(--opacite-desactive);
  cursor: not-allowed;
}

:focus-visible {
  outline: var(--focus-epaisseur) solid var(--action);
  outline-offset: var(--focus-decalage);
}

/* Squelette de chargement — jamais un indicateur circulaire
   pour un contenu de forme prévisible (charte §14) */
.squelette {
  background: linear-gradient(
    90deg,
    var(--squelette-fond) 0%,
    var(--squelette-brillance) 50%,
    var(--squelette-fond) 100%
  );
  background-size: 200% 100%;
  animation: squelette-defile 1.2s ease-in-out infinite;
  border-radius: var(--rayon-controle);
}
@keyframes squelette-defile {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .squelette { animation: none; background: var(--squelette-fond); }
}

/* Valeur absente — jamais une cellule blanche (charte §19) */
.valeur-absente::after {
  content: '—';
  color: var(--texte-tertiaire);
}

/* Notification toast (charte §16) */
.notification-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--cible) + var(--esp-6));
  transform: translateX(-50%);
  z-index: var(--couche-notification);
  max-width: min(24rem, 92vw);
  padding: var(--esp-3) var(--esp-4);
  background: var(--texte-principal);
  color: var(--texte-inverse);
  border-radius: var(--rayon-controle);
  font-size: var(--t-petit);
  line-height: var(--i-petit);
  box-shadow: var(--ombre-panneau);
  display: flex;
  gap: var(--esp-3);
  align-items: center;
}
.notification-toast[hidden] { display: none !important; }
.notification-toast__action {
  background: transparent;
  border: 0;
  color: var(--texte-inverse);
  text-decoration: underline;
  font: inherit;
  cursor: pointer;
  min-height: var(--cible-min);
  padding: 0 var(--esp-2);
}

/* Bandeau hors ligne permanent (charte §14.1) */
.bandeau-hors-ligne {
  position: sticky;
  top: 0;
  z-index: var(--couche-fixe);
  width: 100%;
  padding: var(--esp-2) var(--esp-4);
  background: var(--urgence);
  color: var(--texte-inverse);
  text-align: center;
  font-size: var(--t-petit);
  font-weight: var(--g-semi);
}
.bandeau-hors-ligne[hidden] { display: none !important; }
.marqueur-attente-envoi {
  display: inline-block;
  font-size: var(--t-etiquette);
  line-height: var(--i-etiquette);
  letter-spacing: var(--interlettrage-etiquette);
  text-transform: uppercase;
  color: var(--etat-attente-texte);
  background: var(--etat-attente-fond);
  border-radius: var(--rayon-etiquette);
  padding: 2px var(--esp-2);
  margin-left: var(--esp-2);
}
/* Charte §14.1 — élément en attente d’envoi (hors bandeau global) */
.action-hors-ligne {
  outline: 1px dashed var(--etat-attente-texte);
  outline-offset: 2px;
}
.dialogue-confirmation {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  padding: var(--esp-4);
  max-width: min(24rem, 92vw);
  background: var(--surface);
  color: var(--texte-principal);
  box-shadow: var(--ombre-panneau);
}
.dialogue-confirmation::backdrop {
  background: color-mix(in srgb, var(--texte-principal) 40%, transparent);
}
.dialogue-confirmation__consequence {
  font-weight: var(--g-semi);
  color: var(--alerte);
}
.dialogue-confirmation__saisie {
  width: 100%;
  min-height: var(--cible);
  margin: var(--esp-3) 0;
  padding: var(--esp-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-controle);
  font: inherit;
  box-sizing: border-box;
}
.dialogue-confirmation__detail {
  max-height: 50vh;
  overflow: auto;
  white-space: pre-wrap;
  font-size: var(--t-petit);
  font-family: var(--police-donnees);
  background: var(--surface-discrete);
  padding: var(--esp-3);
  border-radius: var(--rayon-carte);
  text-align: left;
}
.actions-etape {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}

/* États d'écran (charte §14) */
.ecran-etat {
  padding: var(--esp-8) var(--esp-4);
  text-align: center;
  color: var(--texte-secondaire);
}
.ecran-etat h2 {
  font-size: var(--t-titre-3);
  line-height: var(--i-titre-3);
  color: var(--texte-principal);
  margin: 0 0 var(--esp-2);
  font-weight: var(--g-semi);
}
.ecran-etat p { margin: 0 0 var(--esp-4); font-size: var(--t-corps); line-height: var(--i-corps); }
.squelette-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--carte-largeur));
  gap: var(--carte-gap);
  padding: var(--esp-4);
}
@media (max-width: 599px) {
  .squelette-grille { grid-template-columns: 1fr; }
}
.squelette-carte {
  height: 11rem;
  border-radius: var(--rayon-carte);
}

/* Formulaires (charte §15) */
.formulaire .champ {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  margin-bottom: var(--esp-4);
}
.formulaire .champ > .champ-label {
  font-size: var(--t-corps);
  line-height: var(--i-corps);
  font-weight: var(--g-moyenne);
  color: var(--texte-principal);
}
.formulaire .champ > .champ-aide {
  font-size: var(--t-petit);
  line-height: var(--i-petit);
  color: var(--texte-secondaire);
  margin: 0;
}
.formulaire .champ > .champ-erreur {
  font-size: var(--t-petit);
  line-height: var(--i-petit);
  color: var(--alerte);
  margin: 0;
}
.formulaire .champ-facultatif {
  font-weight: var(--g-normale);
  color: var(--texte-tertiaire);
  font-size: var(--t-petit);
}
.formulaire input[aria-invalid='true'],
.formulaire textarea[aria-invalid='true'],
.formulaire select[aria-invalid='true'] {
  border-color: var(--alerte);
}
.formulaire .duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-3);
}
.bouton[disabled][data-raison],
.bouton[aria-disabled='true'][data-raison] {
  position: relative;
}
.bouton-raison-desactive {
  display: block;
  font-size: var(--t-petit);
  color: var(--texte-secondaire);
  margin-top: var(--esp-1);
  font-weight: var(--g-normale);
}

/* Contenant large (charte §11.2) */
.contenant {
  max-width: var(--contenant-max);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--marge-compact);
}
@media (min-width: 600px) {
  .contenant { padding-inline: var(--marge-moyen); }
}
@media (min-width: 1025px) {
  .contenant { padding-inline: var(--marge-large); }
}

.cout-employeur {
  font-family: var(--police-donnees);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-petit);
  color: var(--texte-secondaire);
}
.cout-employeur--provisoire::after {
  content: ' · provisoire';
  color: var(--etat-attente-texte);
  font-family: var(--police);
  text-transform: lowercase;
}

/* Grille de cartes — largeur FIXE --carte-largeur (charte §6, REQ-UI-002e) */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--carte-largeur));
  gap: var(--carte-gap);
  justify-content: start;
  width: 100%;
}
.grille-cartes > .carte,
.grille-cartes > .carte-mission {
  width: var(--carte-largeur);
  max-width: var(--carte-largeur);
  min-width: 0;
  padding: var(--carte-padding);
  box-sizing: border-box;
}
@media (max-width: 599px) {
  .grille-cartes {
    grid-template-columns: 1fr;
  }
  .grille-cartes > .carte,
  .grille-cartes > .carte-mission {
    width: 100%;
    max-width: none;
  }
}

/* Icônes UI — calibre resserré (1,5 px de trait implicite via taille) */
.ico {
  width: calc(1.5rem * var(--facteur-texte));
  height: calc(1.5rem * var(--facteur-texte));
}