/* =============================================================================
   Orthea Instruments — feuille de style de l'application de demonstration.
   Derivee de celle de l'atelier : memes couleurs, memes familles, memes
   tableaux. S'y ajoutent la frise de planning et les jauges budgetaires.

   Memes familles et memes couleurs que blueteam.pro, mais un vocabulaire
   d'application et non de plaquette : densite forte, tableaux au trait fin,
   identifiants en chasse fixe, etats lisibles d'un coup d'oeil depuis un
   ecran d'atelier.
   ============================================================================= */
@font-face{font-family:'Plex Sans';src:url('/static/fonts/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('/static/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight:600;font-display:swap}
@font-face{font-family:'Plex Cond';src:url('/static/fonts/IBMPlexSansCondensed-Bold.woff2') format('woff2');
  font-weight:700;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/static/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/static/fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight:500;font-display:swap}

:root{
  --navy:#12203a; --blue:#2258c8; --blue-2:#6d9ce8; --tint:#eef3fa;
  --grey:#5b6a80; --grey-2:#5f6d7e; --rule:#e3eaf3; --paper:#fff;
  --fond:#f5f8fc;
  --ok:#2b6b4c; --ok-f:#dfeee7; --nok:#9c2f22; --nok-f:#fbe6e2;
  --attente:#7a6420; --attente-f:#faf0d6;
  --disp:'Plex Cond','Plex Sans',Arial,sans-serif;
  --body:'Plex Sans',Arial,sans-serif;
  --mono:'Plex Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--navy);font-family:var(--body);
  font-size:.95rem;line-height:1.5}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.015em;line-height:1.15;margin:0}
h1{font-size:1.6rem} h2{font-size:1.1rem} h3{font-size:1rem}
p{margin:0}
a{color:var(--blue);text-underline-offset:.15em}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sec{display:block;color:var(--grey);font-size:.8rem;line-height:1.35}
/* .sec sert de ligne secondaire sous un libelle, mais pose aussi sur des
   cellules entieres : sur un td, display:block sortirait la cellule de la
   grille du tableau et replierait la colonne suivante. */
td.sec,th.sec{display:table-cell}
.num{text-align:right;font-variant-numeric:tabular-nums}
.droite{text-align:right}
.forte{font-weight:600}
.vide{color:var(--grey-2);font-style:italic;padding:1rem 0}
.sous{color:var(--grey);margin-top:.35rem;max-width:80ch}

/* ---------- Bandeau de demonstration ---------------------------------------- */
/* Il doit rester visible sur toutes les pages : personne ne doit confondre ces
   donnees inventees avec celles d'un client. */
.bandeau{background:#fff3d4;border-bottom:1px solid #e6d09a;color:#6b5312;
  padding:.5rem 1.25rem;font-size:.82rem;text-align:center}
.bandeau b{color:#4d3c0c}
.bandeau a{color:#6b5312;margin-left:.5rem}

/* ---------- En-tete ---------------------------------------------------------- */
.tete{background:var(--navy);color:#fff;display:flex;align-items:center;
  gap:2rem;padding:0 1.25rem;min-height:3.5rem;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;
  font-family:var(--disp);font-size:1.1rem;font-weight:700;letter-spacing:-.02em}
.logo .carre{width:1.1rem;height:1.1rem;background:var(--blue-2);flex:0 0 auto;
  clip-path:polygon(0 100%,0 55%,25% 70%,45% 20%,70% 60%,100% 35%,100% 100%)}
.tete nav{display:flex;gap:1.5rem;margin-right:auto;flex-wrap:wrap}
.tete nav a{color:#c5d4e8;text-decoration:none;font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;font-family:var(--mono);white-space:nowrap;
  padding:.35rem 0;border-bottom:2px solid transparent}
.tete nav a:hover{color:#fff}
.tete nav a[aria-current]{color:#fff;border-bottom-color:var(--blue-2)}
.compte{display:flex;align-items:center;gap:1rem}
.qui{display:flex;flex-direction:column;line-height:1.2;text-align:right}
.qui b{font-size:.85rem}
.qui span{font-size:.7rem;color:#a8bdd4;font-family:var(--mono)}
.lien{background:none;border:0;color:#a8bdd4;font-family:var(--mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;padding:0;
  text-decoration:underline;text-underline-offset:.2em}
.lien:hover{color:#fff}
a.lien{color:var(--blue);text-transform:none;font-size:.78rem}

/* ---------- Corps ------------------------------------------------------------ */
main{padding:1.75rem 1.25rem 4rem;margin-inline:auto}
main.large{max-width:86rem}
main.etroit{max-width:52rem}
section{margin-top:2rem}
section h2{padding-bottom:.5rem;border-bottom:2px solid var(--navy);margin-bottom:.9rem}
.fil{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--grey-2);margin-bottom:.75rem}
.fil a{color:var(--grey)}

/* ---------- Tuiles de tete --------------------------------------------------- */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin:1.25rem 0}
.tuile{background:var(--paper);padding:.9rem 1rem}
.tuile .v{display:block;font-family:var(--disp);font-size:1.9rem;line-height:1;
  color:var(--blue);font-variant-numeric:tabular-nums}
.tuile .l{display:block;margin-top:.35rem;font-family:var(--mono);font-size:.66rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--grey)}
.tuile.alerte .v{color:var(--nok)}

/* ---------- Onglets ----------------------------------------------------------- */
.onglets{display:flex;gap:.25rem;flex-wrap:wrap;margin-bottom:1rem;
  border-bottom:1px solid var(--rule)}
.onglets a{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--grey);text-decoration:none;padding:.5rem .85rem;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.onglets a:hover{color:var(--navy)}
.onglets a.actif{color:var(--blue);border-bottom-color:var(--blue)}

/* ---------- Tableaux ---------------------------------------------------------- */
.grille{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--rule)}
.grille th,.grille td{text-align:left;padding:.6rem .75rem;vertical-align:top;
  border-bottom:1px solid var(--rule)}
.grille thead th{background:#eef3fa;font-family:var(--mono);font-size:.64rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--grey);font-weight:400;
  border-bottom:2px solid var(--navy);white-space:nowrap}
.grille th.num,.grille td.num{text-align:right}
.grille tbody tr:hover{background:#f9fbfe}
.grille tbody tr:last-child td{border-bottom:0}
.grille.menu td{font-size:.86rem;padding:.4rem .75rem}
.grille tr.nok{background:var(--nok-f)}
.grille tr.nok:hover{background:#f8dcd7}
.grille tr.op-terminee td:first-child{color:var(--grey-2)}
.grille tr.op-en-cours{background:var(--tint)}
a.ref{font-family:var(--mono);font-size:.85rem;text-decoration:none;
  border-bottom:1px solid currentColor}
td.tard{color:var(--nok);font-weight:600}
td.tard .sec{color:var(--nok)}

/* ---------- Pastilles d'etat --------------------------------------------------- */
.p{display:inline-block;font-family:var(--mono);font-size:.64rem;text-transform:uppercase;
  letter-spacing:.06em;padding:.15rem .45rem;white-space:nowrap}
.p-ok{background:var(--ok-f);color:var(--ok)}
.p-nc{background:var(--nok-f);color:var(--nok)}
.p-en-cours{background:var(--tint);color:var(--blue)}
.p-attente{background:var(--attente-f);color:var(--attente)}
.p-neutre{background:#eef3fa;color:var(--grey)}

/* ---------- Jauge d'avancement -------------------------------------------------- */
.jauge-c{min-width:9rem}
.jauge{display:block;height:.4rem;background:var(--rule);margin-bottom:.3rem}
.jauge i{display:block;height:100%;background:var(--blue-2);width:0}
/* Crans de 5 % : une classe par largeur, faute de pouvoir poser un
   style en ligne que la politique de securite rejetterait. */
.jauge i.j0{width:0%}
.jauge i.j5{width:5%}
.jauge i.j10{width:10%}
.jauge i.j15{width:15%}
.jauge i.j20{width:20%}
.jauge i.j25{width:25%}
.jauge i.j30{width:30%}
.jauge i.j35{width:35%}
.jauge i.j40{width:40%}
.jauge i.j45{width:45%}
.jauge i.j50{width:50%}
.jauge i.j55{width:55%}
.jauge i.j60{width:60%}
.jauge i.j65{width:65%}
.jauge i.j70{width:70%}
.jauge i.j75{width:75%}
.jauge i.j80{width:80%}
.jauge i.j85{width:85%}
.jauge i.j90{width:90%}
.jauge i.j95{width:95%}
.jauge i.j100{width:100%}

/* ---------- Fiches (paires libelle / valeur) ------------------------------------ */
.entete-of{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1.5rem;flex-wrap:wrap}
.entete-of .actions{display:flex;align-items:center;gap:.75rem}
.fiches{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin:1.25rem 0}
.fiches.serre{margin:0;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.fiche{background:var(--paper);padding:.7rem .9rem}
.fiche .l{display:block;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--grey-2);margin-bottom:.25rem}
.fiche .v{display:block;font-weight:600}

/* ---------- Boutons -------------------------------------------------------------- */
.bouton{display:inline-block;font-family:var(--mono);font-size:.8rem;background:var(--blue);
  color:#fff;border:2px solid var(--blue);padding:.55rem 1rem;text-decoration:none;
  cursor:pointer}
.bouton:hover{background:var(--navy);border-color:var(--navy)}
.bouton.fant{background:transparent;color:var(--blue)}
.bouton.fant:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ---------- Vue atelier : cibles larges, pensees pour une tablette --------------- */
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1rem}
.carte{background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--blue);
  padding:1rem}
.carte-h{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:.5rem;color:var(--grey-2);font-size:.8rem}
.carte h3{margin-bottom:.25rem}
.carte form{margin-top:1rem}
.carte .bouton{width:100%;text-align:center;padding:.8rem 1rem}

/* ---------- Non-conformites -------------------------------------------------------- */
ul.nc,ul.liste{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
ul.nc li{background:var(--nok-f);border-left:3px solid var(--nok);padding:.7rem .9rem}
ul.nc li p{margin-top:.4rem;font-size:.88rem}
ul.liste li{background:var(--paper);border:1px solid var(--rule);padding:.5rem .75rem;
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
ul.liste li .sec{display:inline;margin-right:auto}

/* ---------- Saisie de mesures -------------------------------------------------------- */
/* Un champ de saisie s'ecrit de gauche a droite comme partout ailleurs. Seuls
   les nombres — mesures, montants, ETP — s'alignent a droite, ou la lecture en
   colonne a un sens. La regle valait pour la saisie de mesures de l'atelier ;
   appliquee a tous les champs, elle faisait ecrire le texte a l'envers. */
.saisie input{font-family:var(--mono);font-size:1rem;padding:.45rem .5rem;
  border:1px solid var(--grey-2);background:#fffdf5;text-align:left;width:100%}
.saisie input[inputmode="decimal"]{text-align:right}
.saisie input:focus{border-color:var(--blue);background:#fff}
.saisie + p{margin:.75rem 0 1rem}
.ok-msg{background:var(--ok-f);color:var(--ok);padding:.6rem .9rem;margin:1rem 0;
  border-left:3px solid var(--ok)}

/* ---------- Connexion ------------------------------------------------------------------ */
.connexion{background:var(--paper);border:1px solid var(--rule);padding:2rem;
  max-width:26rem;margin:3rem auto}
.connexion h1{font-size:1.5rem}
.connexion form{display:grid;gap:.4rem;margin-top:1.5rem}
.connexion label{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--grey);margin-top:.75rem}
.connexion select,.connexion input{font-family:var(--body);font-size:.95rem;
  padding:.55rem .6rem;border:1px solid var(--grey-2);background:#fff;width:100%}
.connexion .bouton{margin-top:1.25rem;width:100%;text-align:center}
.aide{margin-top:1.5rem;font-size:.82rem;color:var(--grey);line-height:1.45}
.aide code{font-family:var(--mono);background:var(--tint);padding:.1rem .3rem}
.erreur{background:var(--nok-f);color:var(--nok);padding:.6rem .9rem;margin-top:1rem;
  border-left:3px solid var(--nok)}

/* ---------- PV de conformite -------------------------------------------------------------- */
.pv{background:var(--paper);border:1px solid var(--rule);padding:2.25rem}
.pv header{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;
  padding-bottom:1rem;border-bottom:2px solid var(--navy);margin-bottom:1.5rem}
.pv .societe{font-family:var(--disp);font-size:1.25rem;font-weight:700;display:block}
.pv header b{font-family:var(--disp);font-size:1.1rem}
.pv-entete{width:100%;border-collapse:collapse;margin-bottom:1.75rem;font-size:.88rem}
.pv-entete th,.pv-entete td{text-align:left;padding:.35rem .6rem;border-bottom:1px solid var(--rule)}
.pv-entete th{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--grey-2);font-weight:400;width:9rem}
.pv h2{margin:1.5rem 0 .75rem;font-size:.95rem;border:0;padding:0}
.verdict{margin-top:1.25rem;padding:.7rem .9rem;font-weight:600}
.verdict.ok{background:var(--ok-f);color:var(--ok);border-left:3px solid var(--ok)}
.verdict.nok{background:var(--nok-f);color:var(--nok);border-left:3px solid var(--nok)}
.pv footer{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  gap:1.5rem;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.pv footer .l{display:block;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--grey-2)}
.pv footer .v{display:block;margin-top:.25rem;font-weight:600}

/* ---------- Petits ecrans ---------------------------------------------------------------- */
@media (max-width:60rem){
  .tete{gap:.75rem 1.25rem;padding:.6rem 1rem}
  .tete nav{order:3;width:100%;gap:1rem}
  main{padding:1.25rem 1rem 3rem}
  /* Les tableaux denses deviennent des fiches : sur une tablette tenue en
     portrait, sept colonnes se reduiraient a des mots coupes. */
  .grille,.grille tbody,.grille tr,.grille td{display:block;width:auto}
  .grille thead{position:absolute;left:-9999px}
  .grille tr{border-bottom:1px solid var(--rule);padding:.6rem .75rem}
  .grille td{border:0;padding:.15rem 0}
  .grille td.num,.grille th.num{text-align:left}
  .grille.saisie td{padding:.3rem 0}
  .saisie input{width:8rem}
}

/* ---------- Complements pilotage de projets ------------------------------------- */
.p-pause{background:#f3ead2;color:#7a6420}
.sec.retard{display:inline;color:var(--nok);margin-left:.4rem}
.sec.avance{display:inline;color:var(--ok);margin-left:.4rem}
/* Une jauge qui depasse son enveloppe change de couleur : c'est l'information. */
.jauge.trop i{background:var(--nok)}
.more{margin-top:1rem;font-family:var(--mono);font-size:.78rem}
.more a{text-decoration:none;border-bottom:1px solid currentColor}
.more a::after{content:' \2192'}
.verdict.attente{background:var(--attente-f);color:var(--attente);
  border-left:3px solid var(--attente)}
/* Saisie d'une facture directement dans la ligne du tableau. */
.en-ligne{display:flex;gap:.4rem;align-items:center;justify-content:flex-end}
.en-ligne input{font-family:var(--mono);font-size:.85rem;width:5.5rem;text-align:right;
  padding:.3rem .4rem;border:1px solid var(--grey-2);background:#fffdf5}
.en-ligne input:focus{border-color:var(--blue);background:#fff}

/* ---------- Frise de planning ----------------------------------------------------- */
/* Une grille de 26 colonnes, une par semaine. Les barres et les jalons se placent
   par des classes de colonne : la politique de securite interdit tout style en
   ligne, donc aucune largeur ne peut etre calculee dans le HTML. */
.planning{background:var(--paper);border:1px solid var(--rule);overflow-x:auto}
.pl-ligne{display:grid;grid-template-columns:15rem 1fr;align-items:center;
  border-bottom:1px solid var(--rule);min-width:54rem}
.pl-ligne:last-child{border-bottom:0}
.pl-nom{padding:.5rem .75rem;min-width:0}
.pl-nom .sec{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-frise{display:grid;grid-template-columns:repeat(26,1fr);height:2.5rem;
  align-items:center;border-left:1px solid var(--rule)}
.pl-entete{background:#eef3fa}
.pl-entete .pl-frise{height:1.7rem}
.mois{grid-row:1;align-self:stretch;display:flex;align-items:center;padding-left:.35rem;
  font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--grey);border-left:1px solid var(--rule)}
.auj{grid-row:1;align-self:stretch;border-left:2px solid var(--blue)}
.barre{grid-row:1;height:.65rem;background:var(--blue-2)}
.barre.st-cadrage{background:#c3d4e8}
.barre.st-en-pause{background:#dfcf9f}
.jl{grid-row:1;width:.62rem;height:.62rem;justify-self:center;transform:rotate(45deg);
  border:1.5px solid var(--navy);background:#fff}
.jl.fait{background:var(--navy)}
.jl.retard{background:var(--nok);border-color:var(--nok)}
.legende{margin-top:.9rem;display:flex;gap:1.5rem;flex-wrap:wrap;
  font-size:.8rem;color:var(--grey)}
.cle{display:flex;align-items:center;gap:.45rem}
.cle .jl{position:static;width:.55rem;height:.55rem}

.c1{grid-column-start:1}
.c2{grid-column-start:2}
.c3{grid-column-start:3}
.c4{grid-column-start:4}
.c5{grid-column-start:5}
.c6{grid-column-start:6}
.c7{grid-column-start:7}
.c8{grid-column-start:8}
.c9{grid-column-start:9}
.c10{grid-column-start:10}
.c11{grid-column-start:11}
.c12{grid-column-start:12}
.c13{grid-column-start:13}
.c14{grid-column-start:14}
.c15{grid-column-start:15}
.c16{grid-column-start:16}
.c17{grid-column-start:17}
.c18{grid-column-start:18}
.c19{grid-column-start:19}
.c20{grid-column-start:20}
.c21{grid-column-start:21}
.c22{grid-column-start:22}
.c23{grid-column-start:23}
.c24{grid-column-start:24}
.c25{grid-column-start:25}
.c26{grid-column-start:26}
.c27{grid-column-start:27}
.s1{grid-column-end:span 1}
.s2{grid-column-end:span 2}
.s3{grid-column-end:span 3}
.s4{grid-column-end:span 4}
.s5{grid-column-end:span 5}
.s6{grid-column-end:span 6}
.s7{grid-column-end:span 7}
.s8{grid-column-end:span 8}
.s9{grid-column-end:span 9}
.s10{grid-column-end:span 10}
.s11{grid-column-end:span 11}
.s12{grid-column-end:span 12}
.s13{grid-column-end:span 13}
.s14{grid-column-end:span 14}
.s15{grid-column-end:span 15}
.s16{grid-column-end:span 16}
.s17{grid-column-end:span 17}
.s18{grid-column-end:span 18}
.s19{grid-column-end:span 19}
.s20{grid-column-end:span 20}
.s21{grid-column-end:span 21}
.s22{grid-column-end:span 22}
.s23{grid-column-end:span 23}
.s24{grid-column-end:span 24}
.s25{grid-column-end:span 25}
.s26{grid-column-end:span 26}
.s27{grid-column-end:span 27}

@media (max-width:60rem){
  .pl-ligne{grid-template-columns:11rem 1fr}
}

/* ---------- Formulaires de saisie longue ------------------------------------------ */
.formulaire{background:var(--paper);border:1px solid var(--rule);padding:1.5rem;
  display:grid;gap:.35rem}
.formulaire label{font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--grey);margin-top:1rem}
.formulaire h2{margin-top:1.75rem}
.formulaire .indice{font-size:.8rem;color:var(--grey-2);margin-bottom:.15rem}
.formulaire input,.formulaire select,.formulaire textarea{font-family:var(--body);
  font-size:.95rem;padding:.5rem .6rem;border:1px solid var(--grey-2);background:#fff;
  width:100%}
.formulaire textarea{resize:vertical;line-height:1.5}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{
  border-color:var(--blue);outline:2px solid var(--tint)}
.formulaire .deux,.formulaire .trois{display:grid;gap:0 1.25rem}
.formulaire .deux{grid-template-columns:1fr 1fr}
.formulaire .trois{grid-template-columns:1fr 1fr 1fr}
.formulaire .deux label:first-child,.formulaire .trois label:first-child{margin-top:1rem}
/* La case de validation est une decision, pas un champ : elle se distingue. */
.case{display:flex !important;align-items:flex-start;gap:.6rem;margin-top:1.5rem;
  background:var(--tint);padding:.8rem .9rem;font-family:var(--body) !important;
  font-size:.9rem !important;text-transform:none !important;letter-spacing:0 !important;
  color:var(--navy) !important}
.case input{width:auto !important;margin-top:.15rem}
.boutons{display:flex;align-items:center;gap:1.25rem;margin-top:1.75rem}
.bouton.ghost{background:transparent;color:var(--blue)}
.bouton.ghost:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.entete-of h1{margin:0}

@media (max-width:52rem){
  .formulaire .deux,.formulaire .trois{grid-template-columns:1fr}
}

/* ---------- Impression : seul le PV sort sur papier ---------------------------------------- */
@media print{
  .bandeau,.tete,.noprint,.fil{display:none}
  body{background:#fff}
  main{padding:0;max-width:none}
  .pv{border:0;padding:0}
  .grille tbody tr:hover{background:none}
}

/* =============================================================================
   Trame de pilotage : camemberts cliquables, colonnes de priorite, fiche hebdo.
   Aucun style en ligne — la politique de securite du contenu les interdit —
   donc chaque couleur de part passe par une classe.
   ============================================================================= */
.camemberts{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:1rem;margin-top:1rem}
.camembert{margin:0;background:var(--paper);padding:1rem 1.1rem;
  display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.25rem;align-items:start}
.camembert figcaption{grid-column:1/3;font-family:var(--disp);font-weight:700;
  font-size:1.05rem}
.camembert svg{width:9.5rem;height:9.5rem}
.camembert a{text-decoration:none}
.camembert svg a:hover path,.camembert svg a:hover circle{opacity:.8}
.camembert .sous{grid-column:1/3;font-size:.8rem}
.legende-c{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;align-self:center}
.legende-c a{display:flex;align-items:center;gap:.5rem;color:var(--navy);
  font-size:.86rem;padding:.1rem 0}
.legende-c a:hover{color:var(--blue)}
.legende-c b{margin-left:auto;font-variant-numeric:tabular-nums}
.puce{width:.7rem;height:.7rem;flex:0 0 auto;border-radius:2px;background:var(--grey-2)}
.c-0{background:#1f4e8c} .c-1{background:#2f79c7} .c-2{background:#4ba3d9}
.c-3{background:#77c2c9} .c-4{background:#98b64d} .c-5{background:#d4a12f}
.c-6{background:#d97b2b} .c-7{background:#c6562f} .c-8{background:#a23e57}
.c-9{background:#6c4f7c}

.prio{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;margin-top:1rem}
.prio-col{background:var(--paper);padding:.75rem;display:grid;gap:.6rem;
  align-content:start}
.prio-col h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  color:var(--grey-2);text-align:center;padding-bottom:.4rem;
  border-bottom:1px solid var(--rule)}
.prio-case{background:var(--fond);padding:.55rem .6rem;display:grid;gap:.15rem}
.prio-case a{font-weight:600;color:var(--navy);text-decoration:none;font-size:.86rem}
.prio-case a:hover{color:var(--blue)}
.prio-case .sous{margin-top:.1rem;font-size:.74rem}
.prio-case .en-ligne{display:flex;gap:.4rem;margin-top:.2rem}
.prio-case button{font-size:.8rem;padding:0 .3rem}
.prio-case button[disabled]{color:var(--rule);cursor:default}

.hebdo{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1rem;margin:1rem 0}
.lignes{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.35rem;
  font-size:.85rem}
.lignes li{display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline;
  padding:.3rem .45rem;background:var(--fond)}
.lignes .montant{font-family:var(--mono);font-variant-numeric:tabular-nums;
  margin-left:auto}
.lignes .facture{font-family:var(--mono);font-size:.72rem;color:var(--grey)}
.lignes .sous{margin:0;font-size:.72rem}

.jalons{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1rem;margin:1rem 0}
.jalon-b,.jalon-f{background:var(--paper);padding:.9rem 1rem}
.jalon-b h3{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.jalon-b.fait{border-left:3px solid var(--ok)}
.jalon-b .bouton.petit{margin-top:.6rem;padding:.35rem .7rem;font-size:.82rem}
.coches{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.88rem}
.coches li::before{content:"\2713\00a0";color:var(--ok);font-weight:600}
.coches.vides li::before{content:"\25a2\00a0";color:var(--grey-2)}
.jalon-f dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .75rem;margin:0}
.jalon-f dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grey-2);padding-top:.15rem}
.jalon-f dd{margin:0}
.jalons-f fieldset{border:1px solid var(--rule);padding:.75rem .9rem;margin:0 0 .75rem}
.jalons-f legend{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey-2)}


@media (max-width:60rem){
  .prio{grid-template-columns:repeat(2,1fr)}
  .camembert{grid-template-columns:1fr}
}
@media (max-width:40rem){
  .prio{grid-template-columns:1fr}
}

/* Glisser-deposer des priorites. Les etats ne vivent que le temps du geste ;
   sans JavaScript, aucune de ces classes n'apparait et les fleches suffisent. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
html.js .prio-case{cursor:grab}
html.js .prio-case:active{cursor:grabbing}
.prio-case.porte{opacity:.45}
.prio-col.survol{outline:2px dashed var(--blue);outline-offset:-3px;
  background:var(--tint)}

/* Tuile cliquable : elle mène au détail de son chiffre. */
a.tuile{text-decoration:none;color:inherit;display:block}
a.tuile:hover{background:var(--tint)}
a.tuile .sous{font-size:.72rem;color:var(--blue)}
.signer{display:grid;gap:.4rem;margin-top:.7rem}
.signer label{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--grey)}
.signer input{font-family:var(--body);font-size:.85rem;padding:.35rem .5rem;
  border:1px solid var(--rule);width:100%}

/* Champ leurre du formulaire de connexion : hors de l'ecran pour une personne
   (et hors de l'arbre d'accessibilite), rempli par les robots seuls. */
.leurre{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}