/* =====================================================================
   SAMKO HUB, la feuille de style commune.

   /!\ ELLE VIVAIT DANS LE GABARIT, EN LIGNE, ET C'ETAIT UN CHOIX ECRIT :
   « le CSS part avec le HTML en une seule requete ». Le raisonnement
   optimise le PREMIER affichage sur un cache froid. Il est juste pour un
   visiteur de passage, et faux pour une equipe qui ouvre vingt ecrans par
   jour.

   MESURE DU 02/10/2026 : cette feuille pese 25 Ko et faisait 50 a 58 %
   du poids de CHAQUE page, reemise a chaque navigation. Servie a part,
   elle coute UNE requete, mise en cache ensuite.

   CE QUI N'A PAS CHANGE, et qui etait la vraie raison du choix initial :
   aucune etape de construction, aucun appel tiers, une seule feuille.
   Elle s'ecrit a la main et se lit a la main, comme avant.

   LE CSS PROPRE A UN ECRAN RESTE EN LIGNE, dans `@section('styles')` :
   il ne sert qu'a cette page, il ne gagnerait rien a etre mis en cache,
   et l'eloigner de l'ecran qu'il habille le rendrait plus difficile a
   suivre.

   L'adresse porte `?v=` suivi de l'horodatage du fichier : sans lui, un
   navigateur qui a garde l'ancienne feuille sert l'ancienne mise en page
   par-dessus le nouveau balisage, et personne ne comprend pourquoi.
   ===================================================================== */

/* =====================================================================
   SAMKO HUB, jetons d'interface.

   /!\ CES VALEURS NE SONT PAS INVENTEES ICI. Elles sont celles du portail
   RH, relevees dans rh-samko/frontend/css/collab-ui.css le 23/09/2026.
   Les proprietes web de SAMKO doivent se ressembler : un collaborateur
   passe de l'une a l'autre dans la meme journee. Toute divergence
   introduite ici doit l'etre pour une raison ecrite dans DESIGN.md.

   Pas de Tailwind, pas d'etape de construction, aucune requete tierce :
   le CSS part avec le HTML, et les polices sont servies par ce serveur.
   ===================================================================== */

/* --- Polices, auto-hebergees ------------------------------------------
   Aucun appel a un tiers : pas de resolution DNS supplementaire, pas de
   poignee de main TLS, et rien qui parte chez un tiers depuis un poste de
   cabinet. `swap` affiche le texte tout de suite dans la police de repli
   plutot que de le cacher. Deux sous-ensembles par graisse : `latin`
   couvre le francais, `latin-ext` ne se telecharge que si un caractere
   l'exige. Pour une page en francais, 136 Ko partent, une seule fois. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url(/polices/inter-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url(/polices/inter-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url(/polices/inter-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url(/polices/inter-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;
  src:url(/polices/playfairdisplay-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;
  src:url(/polices/playfairdisplay-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  /* Fonds et surfaces */
  --c-fond: #f4f7fb;
  --c-surf: #ffffff;
  --c-surf-2: #eef3f9;
  --c-bord: rgba(15, 42, 71, .08);

  /* Texte */
  --c-ink: #0b1b2c;
  --c-ink-2: #4a5c71;
  /* DIVERGENCE ASSUMEE AVEC LE PORTAIL RH, et elle est mesuree.
     Le portail porte #7a8ea6, qui donne 3,36:1 sur blanc : sous les
     4,5:1 exiges pour du petit texte. Or ce module s'en sert pour des
     LIBELLES de tableau, des poids de criteres et des references de
     dossier, c'est-a-dire du texte qu'il faut lire, pas du decor.
     #5c7189 garde la meme famille de bleu-gris et tient 5,10:1 sur
     blanc, 4,57:1 sur la surface creuse et 4,75:1 sur le fond.
     C'est le meme arbitrage que le portail RH a deja fait sur son bleu
     d'action, pour la meme raison. */
  --c-ink-3: #5c7189;

  /* Marque */
  --c-navy: #0f2a47;
  --c-navy-profond: #0a1d33;
  /* Le bleu porte son motif, repris du portail RH : #2f7cc9 donnait 4,4:1
     sur blanc, sous les 4,5:1 exiges pour du petit texte. Celui-ci tient
     environ 5,8:1. */
  --c-bleu: #1f6bb5;
  --c-bleu-doux: rgba(31, 107, 181, .12);
  --c-or: #b98d3a;
  /* L'or LISIBLE COMME TEXTE. Meme arbitrage que DESIGN.md porte deja
     entre #c9a961, l'or de la marque, et #b98d3a, l'or du theme clair :
     un ton qui tient comme aplat ne tient pas comme encre. #b98d3a en
     12 px sur son propre fond pale donne 2,81:1, mesure. Celui-ci tient
     6,36:1 sur blanc et 5,75:1 sur ce fond pale. */
  --c-or-encre: #7a5a18;
  --c-or-doux: rgba(201, 169, 97, .18);

  /* Profondeur : ombres teintees navy, jamais du noir pur. */
  --o-1: 0 1px 2px rgba(15, 42, 71, .05), 0 8px 20px -14px rgba(15, 42, 71, .3);
  --o-2: 0 2px 6px rgba(15, 42, 71, .07), 0 16px 32px -18px rgba(15, 42, 71, .35);

  --f-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-titre: 'Playfair Display', Georgia, serif;

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  --rayon: 16px;
}

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

/* /!\ SANS CETTE LIGNE, L'ATTRIBUT `hidden` NE CACHE RIEN DES QU'UNE
   CLASSE POSE UN `display`.
   La regle du navigateur est `[hidden]{display:none}` avec la
   specificite d'un selecteur d'attribut ; `.champ{display:block}` a la
   meme specificite et vient APRES, donc elle gagne. MESURE a 375 px : le
   champ « condition a lever » portait `hidden=true` et un
   `display:block` calcule, et il restait a l'ecran sur une decision Go.
   Le defaut ne leve rien, et il ne se voit qu'a l'oeil. */
[hidden]{ display: none !important; }

html{
  /* Sans cette ligne, sous un systeme en mode sombre, les controles natifs
     et la barre de defilement sont rendus sombres sur nos surfaces claires.
     Le mode sombre du hub n'est pas traite : declarer clair est la verite. */
  color-scheme: light;
}

body{
  margin: 0;
  min-height: 100dvh;
  background: var(--c-fond);
  color: var(--c-ink);
  font-family: var(--f-texte);
  font-size: 16px;
  line-height: 1.55;
  /* Supprime le delai que le navigateur garde pour guetter un double
     tapotement. Le pincement pour zoomer reste possible. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-family: var(--f-titre);
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  text-wrap: balance;
}

a{ color: var(--c-bleu); }

/* Visible partout, et jamais retire. */
:focus-visible{
  outline: 2px solid var(--c-bleu);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- Formulaires ------------------------------------------------------
   Ces classes vivent dans le GABARIT et non dans une vue : tout outil
   heberge par ce depot en a besoin, et les laisser dans la vue qui les a
   vues naitre garantit qu'elles disparaitront le jour ou cette vue sera
   refaite. C'est exactement ce qui s'est produit ici : l'ecran de
   connexion portait ses propres classes, le gabarit a ete remplace pour
   le portail, et le formulaire s'est retrouve en controles natifs nus
   sans qu'aucune erreur ne soit levee. Une regle CSS absente ne casse
   rien : elle rend moche, ce que seul un oeil voit. */

.champ{ display: block; margin-bottom: var(--e5); }
.champ .etiquette{ display: block; font-weight: 600; color: var(--c-navy); }
.champ .aide{ display: block; margin-top: 2px; font-size: 14px; color: var(--c-ink-2); }

.saisie{
  display: block;
  width: 100%;
  margin-top: var(--e2);
  /* 48 px de haut : au dessus des 44 px de cible tactile. Et 16 px de
     texte, en dessous desquels iOS zoome de lui meme a la mise au point,
     ce qui deplace la page sous le doigt. */
  padding: var(--e3) var(--e4);
  font: inherit;
  color: var(--c-ink);
  background: var(--c-surf);
  border: 1px solid var(--c-bord);
  border-radius: 8px;
}
.saisie:focus{ border-color: var(--c-bleu); }
.saisie::placeholder{ color: var(--c-ink-3); }

.action{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  width: 100%;
  padding: var(--e3) var(--e4);
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--c-bleu);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.action:hover{ background: var(--c-navy); }
.action:disabled{ opacity: .45; cursor: not-allowed; }
/* La regle globale `a{color:...}` laisse le soulignement par defaut : un
   lien porte cette classe pour ETRE un bouton, et un bouton souligne se
   lit comme un lien de texte. Vu a 375 px, pas dans le code. */
a.action{ text-decoration: none; }

.erreur{
  margin: 0 0 var(--e5);
  padding: var(--e3) var(--e4);
  font-size: 15px;
  color: #a32318;
  background: #fdf1ef;
  border: 1px solid rgba(163, 35, 24, .25);
  border-radius: 8px;
}

/* --- Le lien d'evitement ---------------------------------------------
   Il saute la barre et pose le curseur sur le contenu. Sans lui, qui
   navigue au clavier ou au lecteur d'ecran retraverse la marque, le nom
   du module, le sien et le bouton de deconnexion a CHAQUE page du
   module, soit quatre arrets pour rien, neuf fois par parcours.

   Il n'est pas cache : il est hors champ et revient au premier `Tab`.
   Un lien d'evitement en `display:none` ne serait jamais atteint, ce qui
   est la facon la plus courante de n'en avoir aucun tout en croyant le
   contraire. */
.evitement{
  position: absolute;
  left: var(--e4);
  top: -100px;
  z-index: 10;
  padding: var(--e3) var(--e4);
  background: var(--c-surf);
  color: var(--c-navy);
  border: 1px solid var(--c-bord);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top 120ms ease-out;
}
.evitement:focus{ top: var(--e3); }

/* Lu par les lecteurs d'ecran, invisible a l'ecran. `clip-path` plutot que
   `display:none`, qui retirerait le texte de l'arbre d'accessibilite en
   meme temps que de l'affichage. */
.lu-seulement{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* --- Echelle de tailles de texte -------------------------------------
   Sans elle, toute regle reprise d'un autre gabarit de la maison porte
   au moins un `var(--t-NN)` qui ne resoudra pas. Un `font-size` invalide
   ne leve rien : il retombe sur l'heritee, donc le texte sort de la
   bonne couleur et de la mauvaise taille, et rien ne le signale. */
:root{
  --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15px;
  --t-16: 16px; --t-18: 18px; --t-20: 20px; --t-24: 24px;
  --t-28: 28px; --t-34: 34px;

  /* Les chiffres. Une reference de dossier, un score, un montant et une
     date se lisent EN COLONNE : une chasse variable les desaligne et la
     colonne cesse de se lire en diagonale. Aucune police n'est
     telechargee pour cela, la pile systeme suffit et coute zero octet. */
  --f-chiffre: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
               'Liberation Mono', monospace;

  /* Les couleurs d'ETAT sont hors de la palette de marque, et c'est
     deliberement : le portail RH a fait le meme choix. Un etat n'est pas
     une identite. Le vert et l'ambre sont assombris jusqu'a tenir 4,5:1
     sur blanc, parce qu'ils portent du texte et pas seulement un point. */
  --c-vert:  #1a6b46;
  --c-ambre: #8a5d0f;
  --c-rouge: #a32318;
}

/* --- Le bandeau des outils heberges ----------------------------------
   Il n'existe pas sur le portail, qui est une porte. Il existe ici parce
   qu'un module est un lieu ou l'on reste, et qu'on doit pouvoir en
   sortir sans revenir en arriere trois fois. */
.barre{
  display: flex; align-items: center; gap: var(--e4);
  flex-wrap: wrap;
  background: var(--c-navy);
  color: #fff;
  padding-top:    calc(var(--e3) + env(safe-area-inset-top));
  padding-bottom: var(--e3);
  padding-left:   calc(var(--e4) + env(safe-area-inset-left));
  padding-right:  calc(var(--e4) + env(safe-area-inset-right));
}
.barre a{ color: #fff; text-decoration: none; }
.barre .marque{
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--f-titre); font-size: var(--t-18);
}
.barre .ici{ color: rgba(255,255,255,.72); font-size: var(--t-14); }
.barre .droite{ margin-left: auto; display: flex; align-items: center; gap: var(--e4); }
.barre .qui{ font-size: var(--t-14); color: rgba(255,255,255,.82); }
.barre form{ margin: 0; }
/* 44 px de haut : la cible tactile minimale. Mesuree a 36 px avant
   correction, sur un bouton qui deconnecte. */
.barre .sortir{
  display: inline-flex; align-items: center; min-height: 44px;
  font: inherit; font-size: var(--t-14); color: rgba(255,255,255,.88);
  background: none; border: 1px solid rgba(255,255,255,.32);
  border-radius: 8px; padding: 6px var(--e4); cursor: pointer;
}
.barre .sortir:hover{ background: rgba(255,255,255,.1); color: #fff; }

.dedans{ max-width: 72rem; margin: 0 auto; }
.corps{
  padding-top: var(--e6);
  padding-bottom: calc(var(--e8) + env(safe-area-inset-bottom));
  padding-left:  calc(var(--e4) + env(safe-area-inset-left));
  padding-right: calc(var(--e4) + env(safe-area-inset-right));
}
@media (min-width: 64rem){
  .barre{ padding-left: var(--e6); padding-right: var(--e6); }
  .corps{ padding-left: var(--e6); padding-right: var(--e6); }
}

/* --- Ce que la page raconte apres un acte ----------------------------
   /!\ SANS CES DEUX BLOCS, UN CONTROLEUR QUI REFUSE CORRECTEMENT EN BASE
   ET REDIRIGE CORRECTEMENT N'AFFICHE RIEN. Le defaut ne leve aucune
   erreur, ne casse aucun test de controleur, et se voit seulement en
   ouvrant l'ecran. C'est pour cela qu'ils vivent dans le GABARIT et sont
   poses avant le premier controleur d'ecriture. */
.refus, .fait{
  margin: 0 0 var(--e5);
  padding: var(--e4);
  border-radius: 10px;
  font-size: var(--t-15);
  border: 1px solid;
}
.refus{
  color: var(--c-rouge);
  background: color-mix(in srgb, var(--c-rouge) 7%, #fff);
  border-color: color-mix(in srgb, var(--c-rouge) 28%, #fff);
}
.fait{
  color: var(--c-vert);
  background: color-mix(in srgb, var(--c-vert) 8%, #fff);
  border-color: color-mix(in srgb, var(--c-vert) 28%, #fff);
}
.refus .quoi, .fait .quoi{ display: block; font-weight: 600; margin-bottom: 2px; }
.refus code{ font-family: var(--f-chiffre); font-size: var(--t-12); opacity: .8; }

/* --- Les pastilles d'etat --------------------------------------------
   Cinq, et pas une de plus. Toutes DOUCES : fond pale, encre saturee.
   Aucune pastille pleine dans ce module, parce que rien n'y a la gravite
   d'une anomalie d'audit, et qu'une pastille pleine crie.

   Le MOT porte l'etat ; le point de 6 px et la couleur ne font que
   l'appuyer. Rien ici ne se lit a la couleur seule. */
.puce{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.puce::before{ content:''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.puce.faite  { color: var(--c-vert);  background: color-mix(in srgb, var(--c-vert)  12%, #fff); }
.puce.encours{ color: var(--c-bleu);  background: var(--c-bleu-doux); }
.puce.attente{ color: var(--c-ambre); background: color-mix(in srgb, var(--c-ambre) 12%, #fff); }
.puce.rejet  { color: var(--c-rouge); background: color-mix(in srgb, var(--c-rouge) 10%, #fff); }
.puce.neutre { color: var(--c-ink-2); background: var(--c-surf-2); }

/* --- L'explication secondaire, derriere un « ? » ---------------------- */
/* Parti pris de produit : l'ecran explique par sa FORME, le texte ne
   porte que ce qu'on ne peut pas montrer, et le reste se demande. Voir
   le composant `aide` pour ce qui rend ce « ? » utilisable au clavier et
   au doigt, et pas seulement a la souris. */
.infobulle{ position: relative; display: inline-flex; vertical-align: middle; }

.infobulle-appel{
  width: 18px; height: 18px; padding: 0; margin: 0 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 11px; font-weight: 700; line-height: 1;
  color: var(--c-ink-2); background: var(--c-surf-2);
  border: 1px solid var(--c-bord); border-radius: 50%;
  cursor: help;
}
/* LA ZONE VISEE FAIT 44 px, le rond en fait 18. Un point
   d'interrogation de 18 px ne se touche pas au doigt, et l'agrandir
   abimerait la ligne de texte qui le porte. */
.infobulle-appel::after{ content: ''; position: absolute; inset: -13px; }
.infobulle-appel:hover{ color: var(--c-bleu); border-color: var(--c-bleu); }
.infobulle-appel:focus-visible{ outline: 2px solid var(--c-bleu); outline-offset: 2px; }

/* LA BULLE AU REPOS NE PREND AUCUNE PLACE, ET C'EST LA REGLE QUI COMPTE.
   /!\ MESURE DU 02/10/2026 : la premiere version la masquait par
   `visibility: hidden`. Un element ainsi masque EST TOUJOURS DISPOSE :
   large de `max-content` et place a droite d'un « ? » lui meme a droite
   d'une ligne, il poussait la largeur de la page. Cinq ecrans sur six
   debordaient a 375 px, soit un defilement horizontal sur telephone,
   provoque par des bulles que personne ne voyait.
   La forme ci-dessous est celle du texte « reserve aux lecteurs
   d'ecran » : un pixel, decoupe, sans debordement. Elle ne prend pas de
   place ET reste dans l'arbre d'accessibilite, ce que `display: none`
   ne permet pas. */
.infobulle-texte{
  position: absolute; left: -8px; top: calc(100% + 8px); z-index: 60;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  padding: var(--e3) var(--e4);
  font-size: var(--t-13); font-weight: 400; line-height: 1.55; text-align: left;
  color: #fff; background: var(--c-navy-profond); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(11, 27, 44, .22);
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
}
/* `:focus` ET NON `:focus-visible` POUR REVELER LA BULLE.
   /!\ MESURE DU 02/10/2026 : `:focus-visible` ne s'applique pas a un
   appui du DOIGT. Sur telephone, ou il n'y a pas de survol, la bulle
   n'aurait donc jamais paru : l'explication aurait ete invisible pour
   exactement la moitie des usages. `:focus-visible` reste pour l'anneau
   de mise au point, qui lui n'a pas a paraitre sous le doigt. */
.infobulle-appel:hover + .infobulle-texte,
.infobulle-appel:focus + .infobulle-texte{
  width: max-content; height: auto; overflow: visible; clip-path: none;
  /* La bulle tient dans l'ecran quelle que soit la largeur : sur un
     telephone, 42ch depasserait. */
  max-width: min(42ch, calc(100vw - 2rem));
  opacity: 1;
}

/* Pres du bord droit, la bulle s'ancre a droite. */
.infobulle.a-gauche .infobulle-texte{ left: auto; right: -8px; }

@media (prefers-reduced-motion: reduce){ .infobulle-texte{ transition: none; } }
@media print{ .infobulle{ display: none; } }

/* --- Le recapitulatif des erreurs de saisie --------------------------- */
/* Il porte le curseur clavier a l'arrivee : il doit donc se voir, et se
   voir comme un refus, pas comme une remarque. */
.erreurs-saisie{
  margin: 0 0 var(--e5);
  padding: var(--e4) var(--e5);
  background: color-mix(in srgb, var(--c-rouge) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--c-rouge) 32%, #fff);
  border-left: 4px solid var(--c-rouge);
  border-radius: 10px;
}
.erreurs-saisie:focus{ outline: 2px solid var(--c-rouge); outline-offset: 2px; }
.erreurs-saisie .quoi{ margin: 0 0 var(--e2); font-weight: 600; color: var(--c-rouge); }
.erreurs-saisie ul{ margin: 0; padding-left: var(--e5); }
.erreurs-saisie li{ margin-bottom: var(--e1); }
.erreurs-saisie a{ color: var(--c-ink); }

/* --- Les briques de page --------------------------------------------- */
.section{
  background: var(--c-surf);
  border: 1px solid var(--c-bord);
  border-radius: var(--rayon);
  padding: var(--e5);
  margin-bottom: var(--e4);
}
.section > h2{ font-size: var(--t-20); margin-bottom: var(--e4); }
.section > h2 + .aide{ margin-top: calc(var(--e4) * -1 + var(--e1)); margin-bottom: var(--e4); }

.aide{ margin: var(--e2) 0 0; color: var(--c-ink-2); font-size: var(--t-14); }
.err{ margin: var(--e2) 0 0; color: var(--c-rouge); font-size: var(--t-14); }

/* Une mesure. Pas une tendance, pas une variation : un appel d'offres
   n'a pas de mois dernier. */
.tuiles{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
.tuile{
  background: var(--c-surf-2);
  border-radius: 10px;
  padding: var(--e4);
}
.tuile .valeur{ display: block; font-family: var(--f-chiffre); font-size: var(--t-24); color: var(--c-navy); }
.tuile .quoi{ display: block; margin-top: 2px; font-size: var(--t-13); color: var(--c-ink-2); }
@media (min-width: 52rem){ .tuiles{ grid-template-columns: repeat(4, 1fr); } }

/* L'ecran vide se dessine en premier, jamais en dernier : c'est le seul
   que tout le monde voit le premier jour. Il porte une phrase qui oriente
   et le bouton qui le remplirait. */
.vide{
  text-align: center;
  padding: var(--e7) var(--e4);
  background: var(--c-surf);
  border: 1px dashed var(--c-bord);
  border-radius: var(--rayon);
}
.vide h2{ font-size: var(--t-20); }
.vide p{ margin: var(--e2) auto var(--e5); max-width: 44ch; color: var(--c-ink-2); }

.grille{ display: grid; grid-template-columns: 1fr; gap: 0 var(--e4); }
@media (min-width: 40rem){ .grille{ grid-template-columns: 1fr 1fr; } .grille .large{ grid-column: 1 / -1; } }

/* Le rang d'action : le bouton, et A COTE la phrase qui dit ce que le
   clic fait. Le prix du geste se dit AVANT le clic. Ce module n'a aucune
   boite de dialogue : un « Etes-vous sur ? » demande d'approuver sans
   dire quoi, et un bouton grise ment sur la raison. */
.rang-agir{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--c-bord);
}
.rang-agir .action{ width: auto; min-width: 14rem; }
.apres{ margin: 0; flex: 1 1 18rem; font-size: var(--t-14); color: var(--c-ink-2); }

table{ width: 100%; border-collapse: collapse; font-size: var(--t-15); }
th{ text-align: left; font-weight: 600; color: var(--c-ink-2); font-size: var(--t-13); padding: var(--e2) var(--e3); border-bottom: 1px solid var(--c-bord); }
td{ padding: var(--e3); border-bottom: 1px solid var(--c-bord); vertical-align: top; }
tr:last-child td{ border-bottom: 0; }
td.chiffre, th.chiffre{ font-family: var(--f-chiffre); text-align: right; }

.chiffre{ font-family: var(--f-chiffre); }

/* Le bouton discret, pour ce qui n'engage pas le cabinet. */
.action.calme{
  color: var(--c-navy);
  background: var(--c-surf);
  border-color: var(--c-bord);
}
.action.calme:hover{ background: var(--c-surf-2); }

/* L'OR EST L'ACCENT DU MODULE, ET IL NE SERT QU'A UN SEUL GESTE : rendre
   la decision Go / No Go. C'est l'acte qui engage le cabinet, celui qui
   s'imprime et se signe. Partout ailleurs, le bleu. Un accent qui sert
   partout ne designe plus rien.

   ENCRE MARINE ET NON BLANCHE, et c'est une mesure : du blanc sur
   #b98d3a donne 3,03:1, sous les 4,5:1. Le marine profond tient 5,50:1
   sur le meme or. Le couple marine sur or se lit d'ailleurs comme un
   sceau, ce qui est exactement ce que ce bouton est. */
.action.engage{ background: var(--c-or); color: var(--c-navy-profond); }
.action.engage:hover{ background: #a1782f; color: var(--c-navy-profond); }


/* --- Le depliant « Pourquoi ? » --------------------------------------
   Le guide de notation ne peut pas etre en clair a cote de chaque
   critere : soixante-dix libelles normatifs feraient de la page un
   document a lire au lieu d'une grille a remplir. Il ne peut pas non plus
   disparaitre : une note sans son guide perd son sens des qu'elle change
   de main. Le depliant est la seule forme qui tienne les deux. */
.pourquoi{ margin-top: var(--e2); }
.pourquoi > summary{
  display: inline-flex; align-items: center; gap: 6px;
  /* Cible tactile : mesure a 20 px de haut avant correction. */
  min-height: 44px;
  cursor: pointer;
  font-size: var(--t-13); font-weight: 600; color: var(--c-bleu);
  list-style: none;
}
.pourquoi > summary::-webkit-details-marker{ display: none; }
.pourquoi > summary::before{
  content: '?';
  display: grid; place-items: center;
  width: 16px; height: 16px;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.pourquoi > summary:hover{ text-decoration: underline; }
.pourquoi .dedans-pourquoi{
  margin-top: var(--e2);
  padding: var(--e3) var(--e4);
  background: var(--c-surf-2);
  border-left: 2px solid var(--c-bord);
  border-radius: 0 8px 8px 0;
  font-size: var(--t-14); color: var(--c-ink-2);
}
.pourquoi .dedans-pourquoi p{ margin: 0 0 var(--e2); }
.pourquoi .dedans-pourquoi p:last-child{ margin-bottom: 0; }

.i{ width: 20px; height: 20px; flex: none; }

@media print{
  .barre, .rang-agir, .filtres, .action{ display: none !important; }
  .section{ border-color: #999; box-shadow: none; page-break-inside: avoid; }
  body{ background: #fff; }
}


/* --- La colonne de navigation du module ------------------------------- */
/* PARTI PRIS, 02/10/2026 : le registre est un poste de travail. Ce qu'on
   ameliore, c'est le nombre de gestes pour atteindre ce qu'on cherche,
   pas la densite visuelle. Voir DESIGN.md, « Le poste de travail du
   module ». */
.avec-rail{ display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--e6); align-items: start; }
/* `min-width: 0` SUR LES DEUX COLONNES, et ce n'est pas superflu.
   /!\ LA TAILLE MINIMALE D'UNE BOITE DE GRILLE VAUT CELLE DE SON
   CONTENU. Sans lui, la bande horizontale de la colonne, faite
   d'elements qui ne se coupent pas, imposait sa largeur a la grille :
   491 px dans une fenetre de 371, donc un defilement horizontal de toute
   la page sur telephone, alors que la bande, elle, defilait bien dans
   son propre cadre. Le depot porte deja cette lecon sur ses tableaux. */
.rail-place{ position: sticky; top: var(--e4); min-width: 0; }
.rail{ min-width: 0; }
.rail-contenu{ min-width: 0; }

/* LA COLONNE EST UNE CARTE, detachee du bord.
   Reprise de la reference montree le 02/10/2026 : une liste nue se lit
   comme du texte en marge, une carte se lit comme un meuble. */
.rail{
  background: var(--c-surf); border: 1px solid var(--c-bord);
  border-radius: 14px; padding: var(--e4) var(--e3);
}

.rail-titre{
  margin: 0 0 var(--e2); padding: 0 var(--e3);
  font-size: var(--t-12); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-ink-3);
}
.rail-titre + .rail-titre, .rail ul + .rail-titre{ margin-top: var(--e5); }

.rail.sans-icone .rail-lien{ grid-template-columns: minmax(0, 1fr) auto auto; }
.rail-icone{ width: 18px; height: 18px; flex: none; color: var(--c-ink-3); }
.rail-lien.ici .rail-icone{ color: var(--c-bleu); }
.rail ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail li.decale .rail-lien{ padding-left: var(--e5); }

.rail-lien{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 2px var(--e2);
  min-height: 40px; padding: var(--e2) var(--e3);
  border-radius: 8px; text-decoration: none;
  font-size: var(--t-14); color: var(--c-ink-2); line-height: 1.3;
}
.rail-lien:hover{ background: var(--c-surf); color: var(--c-ink); }
.rail-lien:focus-visible{ outline: 2px solid var(--c-bleu); outline-offset: 1px; }

/* L'ENDROIT OU L'ON EST SE LIT SANS COULEUR : le trait a gauche et la
   graisse le disent, la couleur ne fait que l'appuyer. */
.rail-lien.ici{
  background: var(--c-surf); color: var(--c-ink); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--c-bleu);
}
.rail-lien.ferme{ color: var(--c-ink-3); cursor: not-allowed; }

.rail-nom{ min-width: 0; }
.rail-note{ font-family: var(--f-chiffre); font-size: var(--t-12); color: var(--c-ink-3); white-space: nowrap; }

/* La pastille d'etat est un APPUI, jamais le seul porteur : la note
   chiffree a cote dit la meme chose en toutes lettres.

   /!\ LES MODIFICATEURS PORTENT LE NOM DU BLOC, et ce n'est pas une
   coquetterie de nommage. Ils s'appelaient `fait`, `encours`, `refus` ;
   or `.fait` existe deja dans cette feuille, c'est le bandeau des
   messages de succes, avec seize pixels de marge interieure. La pastille
   de sept pixels en faisait trente-quatre et volait la vedette a tout le
   rail. Mesure du 02/10/2026, et cinquieme fois que ce depot se fait
   prendre par un nom repris de la feuille globale. */
.rail-etat{ width: 7px; height: 7px; border-radius: 50%; flex: none;
            background: var(--c-bord); padding: 0; margin: 0; }
.rail-etat.rail-fait{ background: var(--c-vert); }
.rail-etat.rail-encours{ background: var(--c-ambre); }
.rail-etat.rail-refus{ background: var(--c-rouge); }

@media (max-width: 60rem){
  .avec-rail{ grid-template-columns: 1fr; gap: var(--e4); }
  .rail{ padding: var(--e3); }
  .rail-titre{ display: none; }
  .rail-place{ position: static; }
  .rail ul{ display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--e2); padding-bottom: var(--e2); }
  /* /!\ `flex: none` : sans lui, chaque entree RETRECIT pour tenir dans la
     bande, et sa colonne de nom, en `minmax(0, 1fr)`, tombe a zero. Le
     texte sortait alors de sa boite et se posait sur l'entree voisine :
     mesure a 375 px le 02/10/2026, « La fiche » faisait 42 px de large et
     « La decision » chevauchait « Le contexte ». La bande defile deja dans
     son propre cadre, elle n'a aucune raison de comprimer ses entrees. */
  .rail li{ flex: none; }
  .rail li.decale .rail-lien{ padding-left: var(--e3); }
  .rail-lien{ white-space: nowrap; background: var(--c-surf); border: 1px solid var(--c-bord); }
  .rail-lien.ici{ box-shadow: inset 0 -3px 0 var(--c-bleu); }
  .rail-note{ display: none; }
}

/* --- La barre haute qui travaille ------------------------------------- */
/* Reprise de la reference du 02/10/2026 : une barre qui ne porte qu'un nom
   et un bouton de sortie laisse la recherche enfermee dans un seul ecran. */
.barre-cherche{
  position: relative; flex: 1 1 22rem; max-width: 30rem; min-width: 0;
  margin: 0 var(--e4);
}
.barre-loupe{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: rgba(255,255,255,.55); pointer-events: none;
}
.barre-cherche input{
  width: 100%; min-height: 40px; padding: 0 var(--e3) 0 36px;
  font: inherit; font-size: var(--t-14);
  color: #fff; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
}
.barre-cherche input::placeholder{ color: rgba(255,255,255,.55); }
.barre-cherche input:focus{ outline: 2px solid rgba(255,255,255,.7); outline-offset: 1px; background: rgba(255,255,255,.16); }

.profil{ display: flex; align-items: center; gap: var(--e3); }
.profil-pastille{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--c-or); color: var(--c-navy-profond);
  font-size: var(--t-13); font-weight: 700; letter-spacing: .02em;
}
.profil-texte{ display: grid; line-height: 1.25; }
.profil-texte .ou{ font-size: var(--t-12); color: rgba(255,255,255,.62); }

@media (max-width: 60rem){
  .barre-cherche{ order: 3; flex: 1 1 100%; margin: var(--e3) 0 0; }
  .profil-texte{ display: none; }
}


/* --- La progression d'un parcours a etapes ---------------------------- */
/* Repond a « ou en suis-je » sans un mot de plus que les noms d'etapes.
   Chaque pas est un LIEN vers sa section : la progression est aussi une
   table des matieres, sur un ecran qui fait plusieurs hauteurs d'ecran.

   L'etat d'un pas se lit sans couleur : le compte ecrit (« 3 / 9 ») et la
   coche le disent, la teinte ne fait que l'appuyer. Les pas sont NUMEROTES
   parce que le contenu EST une sequence : on ne choisit pas le sens avant
   d'avoir regarde les red flags. */
.progression{
  list-style: none; margin: 0 0 var(--e5); padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2);
  counter-reset: prog;
}
.prog-pas a, .prog-pas .prog-boite{
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 0 var(--e3); min-height: 56px; height: 100%;
  padding: var(--e2) var(--e3);
  background: var(--c-surf); border: 1px solid var(--c-bord); border-radius: 12px;
  color: var(--c-ink-2); text-decoration: none; line-height: 1.25;
}
.prog-pas a:hover{ border-color: var(--c-bleu); }
.prog-pas a::before, .prog-pas .prog-boite::before{
  counter-increment: prog; content: counter(prog);
  grid-row: span 2;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-family: var(--f-chiffre); font-size: var(--t-13); font-weight: 600;
  color: var(--c-ink-2); background: var(--c-surf-2);
}
.prog-nom{ font-size: var(--t-14); font-weight: 600; color: var(--c-ink); min-width: 0; }
.prog-compte{ font-family: var(--f-chiffre); font-size: var(--t-12); color: var(--c-ink-3); }

/* Commence : un filet bleu, le travail est en cours. */
.prog-pas.prog-encours a{ border-color: color-mix(in srgb, var(--c-bleu) 45%, #fff); }
.prog-pas.prog-encours a::before, .prog-pas.prog-encours .prog-boite::before{ color: var(--c-bleu); background: var(--c-bleu-doux); }
/* Termine : la coche remplace le numero. */
.prog-pas.prog-fini a::before, .prog-pas.prog-fini .prog-boite::before{ content: '\2713'; color: #fff; background: var(--c-vert); }
.prog-pas.prog-fini .prog-compte{ color: var(--c-vert); }
/* Ferme par une regle : le pas existe, il ne s'applique pas. */
.prog-pas.prog-saute a, .prog-pas.prog-saute .prog-boite{ background: var(--c-surf-2); }
/* Une etape sans lien n'est pas encore ouverte : meme boite, sans survol. */
.prog-pas .prog-boite{ color: var(--c-ink-3); }

/* Cinq etapes : sur un dossier entier. Deux colonnes au telephone, la
   cinquieme prend la rangee entiere plutot que de laisser un trou. */
.progression.progression-cinq{ grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 64rem){ .progression.progression-cinq{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem){
  .progression.progression-cinq{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progression.progression-cinq .prog-pas:last-child{ grid-column: 1 / -1; }
}
.prog-pas.prog-saute .prog-nom{ color: var(--c-ink-2); text-decoration: line-through; text-decoration-color: var(--c-ink-3); }

/* Au telephone, quatre cases cote a cote ne tiennent pas leur nom : deux
   rangees de deux, et non une bande qui defile, parce que la progression
   doit se lire d'un coup d'oeil, pas se parcourir. */
@media (max-width: 40rem){
  .progression{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Une section dont le titre porte son rang dans la sequence. */
.section-rang{
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  margin-right: var(--e2); vertical-align: 3px; border-radius: 50%;
  font-family: var(--f-chiffre); font-size: var(--t-13); font-weight: 600;
  color: var(--c-navy); background: var(--c-surf-2);
}

/* --- Ce qui bloquera l'enregistrement, dit AVANT le clic -------------- */
/* Le module n'a ni bouton grise ni boite de dialogue (voir DESIGN.md) :
   un bouton grise ment sur la raison. La liste dit donc, ligne par ligne,
   ce que la base refusera, et chaque ligne mene au champ qui la leve. Elle
   n'empeche rien : la base reste seule juge, et le dit toujours apres. */
.verif{ margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.verif-ligne{
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--e3); align-items: start;
  padding: var(--e3) var(--e4); border-radius: 10px;
  background: var(--c-surf-2); font-size: var(--t-15); color: var(--c-ink);
}
.verif-ligne::before{
  content: ''; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  border: 2px solid var(--c-ambre); box-sizing: border-box;
}
.verif-ligne a{ color: var(--c-ink); }
.verif-ligne.verif-ok{ background: transparent; color: var(--c-ink-2); }
.verif-ligne.verif-ok::before{
  content: '\2713'; border: 0; background: var(--c-vert); color: #fff;
  font-size: var(--t-13); font-weight: 700; line-height: 22px; text-align: center;
}
.verif-ligne .verif-etat{ display: block; font-size: var(--t-13); color: var(--c-ink-2); }
.verif-ligne.verif-ok .verif-etat{ color: var(--c-vert); }

/* --- La barre de suivi, collee en bas ---------------------------------- */
/* Sur un ecran qui fait plusieurs hauteurs, ce que la saisie PRODUIT doit
   rester sous les yeux pendant qu'on la fait : sinon on note le critere 7
   et on remonte trois ecrans pour voir ce que ca change. Elle ne porte
   que des constats et un lien, jamais un controle. */
.suivi{
  position: sticky; bottom: 0; z-index: 20;
  margin: var(--e5) calc(var(--e4) * -1) calc((var(--e8) + env(safe-area-inset-bottom)) * -1);
  padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4);
  background: var(--c-navy); color: #fff;
  box-shadow: 0 -8px 24px -12px rgba(15, 42, 71, .45);
}
@media (min-width: 64rem){
  .suivi{ margin-left: 0; margin-right: 0; border-radius: 14px 14px 0 0; }
}
.suivi-score{ display: flex; align-items: baseline; gap: 4px; }
.suivi-score .chiffre{ font-size: var(--t-28); line-height: 1; }
.suivi-score .suivi-sur{ font-size: var(--t-13); color: rgba(255,255,255,.7); }
.suivi-bande{ font-weight: 600; font-size: var(--t-15); }
.suivi-reste{ font-size: var(--t-14); color: rgba(255,255,255,.82); }
.suivi a{
  margin-left: auto; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--e4); border-radius: 8px;
  color: var(--c-navy-profond); background: var(--c-or);
  font-weight: 600; font-size: var(--t-14); text-decoration: none;
}
.suivi a:hover{ background: #a1782f; }
.suivi a:focus-visible{ outline-color: #fff; }
/* Au telephone, DEUX rangees et pas trois : ce qui est produit en haut,
   ce qui reste a faire et le geste en bas. Mesure a 375 px : trois
   rangees prenaient pres d'un quart de l'ecran, sur la page ou l'on
   saisit le plus. */
@media (max-width: 30rem){
  .suivi{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e1) var(--e3); }
  .suivi-bande{ font-size: var(--t-14); line-height: 1.3; }
  .suivi-reste{ font-size: var(--t-13); align-self: center; }
  .suivi a{ margin-left: 0; justify-self: end; padding: 0 var(--e3); }
  .suivi-score .chiffre{ font-size: var(--t-24); }
}
@media print{ .suivi, .progression{ display: none !important; } }

/* --- Le role qui lit -------------------------------------------------- */
/* Un compte en lecture voyait un formulaire complet dont la base refusait
   l'enregistrement APRES qu'il l'ait rempli. L'ecran le dit desormais en
   tete, et les controles sont desactives : on lit la decision, on ne la
   rejoue pas. */
.lecture-seule{
  display: flex; gap: var(--e3); align-items: flex-start;
  margin: 0 0 var(--e5); padding: var(--e4);
  background: var(--c-surf); border: 1px solid var(--c-bord);
  border-left: 4px solid var(--c-ink-3); border-radius: 10px;
  font-size: var(--t-15); color: var(--c-ink);
}
.lecture-seule strong{ display: block; }

/* L'enveloppe d'un formulaire : un fieldset sans habillage, qui sert a
   desactiver d'un coup tous les controles pour le role qui lit. `min-width:
   0` parce qu'un fieldset prend par defaut la largeur de son contenu. */
.enveloppe{ border: 0; margin: 0; padding: 0; min-width: 0; }