/* espace.css
 * Feuille de style de l'espace praticien (public/espace/*.php).
 * Meme charte que verif.css (palette #000/#fff/#C5A335, Source Sans 3 /
 * Source Code Pro). Passe design "moderne, medical, elegant" (mission
 * recentrage -- parcours praticien par scan du QR + design system) :
 * cartes blanches border-radius 16px, ombre douce, boutons pleins,
 * badges en pastille, entete sigle phenix, fil de progression 3 etapes.
 */

@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ft2.woff) format('woff');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ft3.woff) format('woff');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ft4.woff) format('woff');}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ft7.woff) format('woff');}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ft8.woff) format('woff');}

:root{
  --ink:#000;--paper:#fff;--gold:#C5A335;
  --i70:rgba(0,0,0,.70);--i55:rgba(0,0,0,.55);--i35:rgba(0,0,0,.35);--i12:rgba(0,0,0,.12);--i08:rgba(0,0,0,.08);--i03:rgba(0,0,0,.026);
  --sans:'Source Sans 3','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --mono:'Source Code Pro','SFMono-Regular',Consolas,monospace;
  /* Mise en conformite charte 3/3.5 (2026-09-10) : vert/rouge/gris etaient hors palette et portaient l'etat par la seule couleur ; recolores en noir, distingues desormais par la forme (pastille pleine/vide/barree) et le libelle. */
  --vert:#000;--vert-bg:var(--paper);--rouge:#000;--rouge-bg:var(--i08);--gris:#000;--gris-bg:var(--i03);
}
*{box-sizing:border-box}
/* Mise en conformite charte 3.1 (2026-09-10) : rgba(0,0,0,.12) etait une teinte grise nouvelle, remplacee par la transparence de noir la plus proche. */
body{margin:0;background:rgba(0,0,0,.08);color:var(--ink);font-family:var(--sans);line-height:1.5;font-size:15px}
a{color:inherit}

/* En-tete espace praticien : bandeau blanc, sigle phenix, structure,
   praticien connecte, deconnexion. Sous-titre discret. */
.espace-header{background:var(--paper);border-bottom:1px solid var(--i08)}
.espace-header-inner{max-width:720px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:14px}
.espace-sigle-svg{width:32px;height:32px;flex:none;color:var(--ink)}
.espace-id{flex:1 1 auto;min-width:0}
.espace-structure{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.espace-sub{font-size:11px;color:var(--i55);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
.espace-praticien{flex:none;display:flex;align-items:center;gap:12px}
.espace-praticien-nom{font-size:13px;font-weight:600;color:var(--i70)}
.espace-logout{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--i55);text-decoration:none;border:1px solid var(--i12);border-radius:999px;padding:6px 12px;white-space:nowrap}
.espace-logout:hover{border-color:var(--ink);color:var(--ink)}
.espace-header-login .espace-header-inner{justify-content:center}
@media (max-width:560px){
  .espace-praticien-nom{display:none}
  .espace-structure{max-width:40vw}
}

.wrap{max-width:720px;margin:24px auto 60px;padding:0 20px}
.card{background:var(--paper);border:1px solid var(--i12);border-radius:16px;padding:22px;margin-bottom:18px;box-shadow:0 24px 48px -30px rgba(0,0,0,.35)}
h1{font-size:20px;margin:0 0 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h2{font-size:15px;margin:0 0 10px}

/* Puce de titre de section (repere charte : losange or, cf verif.css .sec h2 i) */
.sec-title{font-size:12px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--i55);display:flex;align-items:center;gap:9px;margin:0 0 14px}
.sec-title i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:none}

label{display:block;font-size:12.5px;color:var(--i55);margin-bottom:5px;margin-top:12px}
input[type=text],input[type=password],textarea,select{width:100%;font-family:var(--sans);font-size:14.5px;padding:10px 12px;border:1px solid var(--i12);border-radius:8px;background:#fff;color:var(--ink);outline:none;transition:border-color .15s ease}
input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,163,53,.18)}
textarea{min-height:110px;resize:vertical}
button, .btn{font-family:var(--sans);font-weight:700;font-size:14px;padding:11px 18px;border-radius:12px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{opacity:.88}
button.gold,.btn.gold{border-color:var(--gold);background:var(--gold);color:var(--ink)}
button.rouge,.btn.rouge{border-color:var(--rouge);background:var(--rouge);color:#fff}
button.secondaire,.btn.secondaire{background:#fff;color:var(--ink)}
.erreur{background:var(--rouge-bg);color:var(--rouge);padding:11px 13px;border-radius:9px;font-size:13.5px;margin-bottom:14px}
.info{background:var(--gris-bg);color:var(--gris);padding:11px 13px;border-radius:9px;font-size:13.5px;margin-bottom:14px}
.succes{background:var(--vert-bg);color:var(--vert);padding:11px 13px;border-radius:9px;font-size:13.5px;margin-bottom:14px}
/* Pastille par etat (charte 3.5), en plus du libelle deja porte par le texte du message : pleine = succes, vide = info/neutre, barree = erreur */
.erreur::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle;background:linear-gradient(45deg,transparent 42%,var(--paper) 42%,var(--paper) 58%,transparent 58%),var(--rouge)}
.info::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle;background:transparent;border:1.5px solid var(--gris);box-sizing:border-box}
.succes::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle;background:var(--vert)}
.rappel-r1{background:var(--gris-bg);color:var(--i70);font-size:11.5px;font-family:var(--mono);letter-spacing:.02em;padding:9px 12px;border-radius:9px;margin-bottom:16px}

/* Bandeau previsualisation (document.php action=previsualiser) : sobre,
   accent or discret, jamais confondu avec un statut mis en ligne. */
.apercu-bandeau{background:var(--i03);border:1px dashed var(--gold);color:var(--i70);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:9px 12px;border-radius:9px;margin-bottom:12px}

/* Double action Previsualiser / Mettre en ligne (document.php) :
   boutons pleine largeur empiles en mobile. */
.form-actions-double{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.form-actions-double button{flex:1 1 200px}
@media (max-width:560px){
  .form-actions-double{flex-direction:column}
  .form-actions-double button{width:100%;flex:0 0 auto}
}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--i08)}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--i55);white-space:nowrap}

/* Badges de statut en pastille : point colore + libelle, fond teinte desature */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px 4px 8px;border-radius:999px;vertical-align:middle}
.badge .bdot{width:6px;height:6px;border-radius:50%;flex:none;box-sizing:border-box}
.badge.IMPRIME{background:var(--gris-bg);color:var(--gris)}
.badge.VALIDE{background:var(--vert-bg);color:var(--vert)}
.badge.INVALIDE{background:var(--rouge-bg);color:var(--rouge)}
.badge.CLOTURE{background:var(--gris-bg);color:var(--gris)}
/* Forme par etat (charte 3.5) : pleine = valide, vide = neutre (imprime/cloture), barree = invalide */
.badge.IMPRIME .bdot,.badge.CLOTURE .bdot{background:transparent;border:1.5px solid var(--gris)}
.badge.VALIDE .bdot{background:var(--vert)}
.badge.INVALIDE .bdot{background:linear-gradient(45deg,transparent 42%,var(--paper) 42%,var(--paper) 58%,transparent 58%),var(--rouge)}

/* Filtres en pills */
.filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filtres a{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--i12);border-radius:999px;padding:6px 12px;text-decoration:none;color:var(--i70)}
.filtres a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.mono{font-family:var(--mono)}
.muted{color:var(--i55);font-size:12.5px}

/* Lien "voir la page publique" */
.lien-public{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--i70);text-decoration:underline}
.lien-public:hover{color:var(--ink)}

/* Recherche par token / numero (parcours praticien par scan du QR) */
.search-form{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.search-form input[type=text]{flex:1 1 200px;margin:0}
.search-form button{flex:none}

/* Scan QR camera (overlay plein cadre, chemin principal du parcours
   praticien par scan). BarcodeDetector natif + getUserMedia natif,
   aucune bibliotheque externe. Repli propre si API indisponible ou
   camera refusee (message clair, champ token en secours conserve). */
.scan-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.scan-overlay[hidden]{display:none}
.scan-panel{background:#000;border-radius:16px;overflow:hidden;width:100%;max-width:440px;display:flex;flex-direction:column;box-shadow:0 24px 48px -20px rgba(0,0,0,.6)}
.scan-header{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;color:#fff;font-family:var(--sans);font-weight:700;font-size:13.5px}
.scan-close{background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff;font-size:18px;line-height:1;cursor:pointer;padding:4px 11px;border-radius:8px}
.scan-close:hover{border-color:#fff}
.scan-video-wrap{position:relative;width:100%;aspect-ratio:1/1;background:#000}
.scan-video-wrap video{width:100%;height:100%;object-fit:cover;display:block}
.scan-message{color:#fff;font-size:13px;padding:18px 20px;text-align:center;font-family:var(--sans);line-height:1.5}

/* Rangee de compteurs par statut */
.stat-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.stat-card{flex:1 1 130px;background:#fff;border:1px solid var(--i12);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px}
.stat-dot{width:9px;height:9px;border-radius:50%;flex:none;box-sizing:border-box}
/* Forme par etat (charte 3.5), meme grammaire que .badge .bdot : pleine = valide, vide = neutre, barree = invalide */
.stat-dot.IMPRIME{background:transparent;border:1.5px solid var(--gris)}
.stat-dot.VALIDE{background:var(--vert)}
.stat-dot.INVALIDE{background:linear-gradient(45deg,transparent 42%,var(--paper) 42%,var(--paper) 58%,transparent 58%),var(--rouge)}
.stat-dot.CLOTURE{background:transparent;border:1.5px solid var(--gris)}
.stat-count{font-size:19px;font-weight:700;line-height:1}
.stat-label{font-size:10.5px;color:var(--i55);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}

/* Liste de documents (lignes/cartes) */
.doc-list{display:flex;flex-direction:column;gap:1px;background:var(--i08);border:1px solid var(--i12);border-radius:12px;overflow:hidden}
.doc-row{background:#fff;display:flex;align-items:center;gap:12px;padding:13px 14px;text-decoration:none;color:var(--ink)}
.doc-row:hover{background:var(--i03)}
.doc-row .doc-main{flex:1 1 auto;min-width:0}
.doc-row .doc-type-lib{font-size:14px;font-weight:600}
.doc-row .doc-token-mono{font-family:var(--mono);font-size:11.5px;color:var(--i55);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-row .doc-date-col{flex:none;font-size:12px;color:var(--i55);text-align:right;min-width:76px}
.doc-row .doc-chevron{flex:none;color:var(--i35);font-size:18px;line-height:1}
@media (max-width:560px){
  .doc-row .doc-date-col{display:none}
}

/* Fil de progression 3 etapes (document.php) : etape courante en or,
   faites en noir, a venir grises. */
.stepper{display:flex;align-items:flex-start;margin-bottom:22px}
.stepper .step{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.stepper .step-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:700;margin-bottom:7px;background:var(--gris-bg);color:var(--gris);border:2px solid var(--gris-bg);position:relative;z-index:1}
.stepper .step-label{font-size:11px;color:var(--i55);max-width:112px}
.stepper .step-line{position:absolute;top:12px;left:calc(-50% + 12px);width:calc(100% - 24px);height:2px;background:var(--i12);z-index:0}
.stepper .step:first-child .step-line{display:none}
.stepper .step.done .step-dot{background:var(--ink);color:#fff;border-color:var(--ink)}
.stepper .step.done .step-label{color:var(--ink);font-weight:600}
.stepper .step.done .step-line{background:var(--ink)}
.stepper .step.current .step-dot{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.stepper .step.current .step-label{color:var(--ink);font-weight:700}

/* Connexion : carte centree etroite */
.login-wrap{max-width:380px;margin:56px auto 0;padding:0 16px}
.login-card{background:#fff;border:1px solid var(--i12);border-radius:16px;padding:28px 26px;box-shadow:0 24px 48px -30px rgba(0,0,0,.35)}
.login-card h1{font-size:19px;margin:0 0 4px;text-align:center;display:block}
.login-note{text-align:center;font-size:12px;color:var(--i55);margin:0 0 20px}
.login-card button[type=submit]{width:100%}
.login-souvenir{display:flex;align-items:center;gap:8px;margin-top:16px}
.login-souvenir input[type=checkbox]{width:auto;margin:0;accent-color:var(--gold)}
.login-souvenir label{display:inline;font-size:13px;color:var(--i70);margin:0}

/* Gabarit interactif (saisie superposee + restitution avec valeurs
   incrustees) : evolution majeure -- le praticien remplit le document
   DANS le gabarit SVG affiche, comme un PDF interactif. Positionnement
   en pourcentages (aucun JS de calcul) : coordonnees viewBox du gabarit
   (0 0 419.53 595.28, cf app/champs_gabarits.php) converties en % de la
   largeur/hauteur du wrapper. Police fluide en cqw (container query
   units) via container-type:inline-size sur le wrapper. */
.gabarit-wrap{position:relative;width:100%;max-width:720px;margin:10px auto 0;container-type:inline-size}
.gabarit-ratio{position:relative;width:100%;aspect-ratio:419.53/595.28;background:#fff;border:1px solid var(--i12);border-radius:12px;overflow:hidden}
.gabarit-ratio>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.gabarit-champ{position:absolute;box-sizing:border-box;background:transparent;border:none;border-bottom:1px dashed var(--gold);font-family:var(--sans);color:var(--ink);padding:0 1px;margin:0;outline:none;font-size:1.91cqw;line-height:1.15}
.gabarit-champ:focus{background:rgba(255,255,255,.94);border-bottom:1px solid var(--gold);box-shadow:0 0 0 2px rgba(197,163,53,.20)}
.gabarit-champ.gabarit-multiligne{resize:none;overflow:auto}
.gabarit-champ.gabarit-case{appearance:none;-webkit-appearance:none;margin:0;padding:0;border:1.5px solid var(--i35);border-radius:2px;background:#fff;cursor:pointer}
.gabarit-champ.gabarit-case:checked{background:var(--gold);border-color:var(--gold)}
.gabarit-champ::placeholder{color:rgba(0,0,0,.32);font-style:italic}
@media (max-width:560px){.gabarit-wrap{max-width:100%}}

/* Detail des champs saisis (bloc secours sous le tableau, lisibilite) */
.detail-champs{display:flex;flex-direction:column;gap:6px}
.detail-champ-ligne{font-size:13.5px}
.detail-champ-lib{color:var(--i55);font-weight:600;margin-right:4px}

/* Portail d'acces espace praticien (index.php) : carte d'entree de
   marque -- sigle, pitch, connexion centree (bouton or), rappel des
   actions. Remplace l'ancienne .login-wrap/.login-card a l'ecran d'entree. */
.portal-wrap{max-width:420px;margin:26px auto 40px;padding:0 16px}
.portal-card{background:#fff;border:1px solid var(--i12);border-radius:18px;padding:32px 26px 22px;box-shadow:0 30px 60px -34px rgba(0,0,0,.4);text-align:center}
.portal-sigle{width:58px;height:58px;color:var(--ink);margin:0 auto 14px;display:block}
.portal-title{font-size:22px;font-weight:700;margin:0;letter-spacing:-.01em}
.portal-brand{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.portal-tag{font-size:13px;color:var(--i55);margin:12px 4px 22px;line-height:1.5}
.portal-form{text-align:left}
.portal-form label{display:block;font-size:12.5px;color:var(--i55);margin:12px 0 5px}
.portal-souvenir{display:flex;align-items:center;gap:8px;margin-top:15px}
.portal-souvenir input[type=checkbox]{width:auto;margin:0;accent-color:var(--gold)}
.portal-souvenir label{display:inline;margin:0;font-size:12.5px;color:var(--i70)}
.portal-connect{width:100%;margin-top:20px;font-family:var(--sans);font-weight:700;font-size:15px;padding:13px;border-radius:12px;border:1.5px solid var(--gold);background:var(--gold);color:var(--ink);cursor:pointer}
.portal-connect:hover{filter:brightness(.97);opacity:1}
.portal-reserve{text-align:center;font-size:11px;color:var(--i55);margin-top:14px}
.portal-reserve a{color:var(--i70);text-decoration:underline}
.portal-reserve a:hover{color:var(--ink)}
.portal-features{display:flex;gap:6px;margin-top:20px;border-top:1px solid var(--i08);padding-top:16px}
.portal-feature{flex:1;text-align:center;font-size:10px;color:var(--i55);font-family:var(--mono);letter-spacing:.03em;text-transform:uppercase;line-height:1.35}
.portal-feature .pf-ic{width:22px;height:22px;margin:0 auto 6px;color:var(--gold);display:block}
.portal-foot{max-width:420px;margin:16px auto 30px;padding:0 16px;text-align:center}
.portal-foot span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--i55)}
.portal-foot b{color:var(--ink)}

/* Compteur de solde feuilles electroniques dans le bandeau (public/espace/
   entete.php, R73 -- avenant v1.22). Pastille sobre, cliquable vers
   feuilles.php ; alerte sous le seuil bas en accent or -- jamais rouge,
   l'exception vert/rouge/gris reste reservee a la page publique /verif. */
.espace-feuilles{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--i70);text-decoration:none;border:1px solid var(--i12);border-radius:999px;padding:6px 12px;white-space:nowrap}
.espace-feuilles:hover{border-color:var(--ink);color:var(--ink)}
/* #000000 etait une teinte or foncee inventee : texte NOIR sur fond Or clair (meme regle que .an-action plus bas) */
.espace-feuilles.bas{border-color:var(--gold);color:var(--ink);font-weight:700;background:rgba(197,163,53,.10)}

/* Statuts de mouvements de feuilles (public/espace/feuilles.php) : meme
   architecture de badge que les statuts de document (.badge + .bdot),
   sans reutiliser vert/rouge -- accent or pour un chargement, gris
   neutre (deja utilise pour IMPRIME/CLOTURE) pour un debit ou un
   ajustement. */
/* #000000 etait une teinte or foncee inventee : le texte sur fond Or clair reste NOIR (regle deja actee plus bas pour .an-action), l'Or reste reserve a l'accent, jamais a un etat */
.badge.CHARGEMENT{background:rgba(197,163,53,.16);color:var(--ink)}.badge.CHARGEMENT .bdot{background:var(--gold)}
.badge.DEBIT{background:var(--gris-bg);color:var(--gris)}.badge.DEBIT .bdot{background:transparent;border:1.5px solid var(--gris);box-sizing:border-box}
.badge.AJUSTEMENT{background:var(--gris-bg);color:var(--gris)}.badge.AJUSTEMENT .bdot{background:transparent;border:1.5px solid var(--gris);box-sizing:border-box}

/* ===================================================================
   Refonte espace praticien 2026-07-30 (tableau de bord, notifications,
   assureurs, revue R1 du formulaire de creation). Regles opposables :
   aucune animation/transition/keyframes, aucun degrade, aucun aplat noir
   de grande surface, aucun bleu -- ET, par instruction CEO explicite du
   2026-07-30, aucun rouge ni vert dans cet espace (l'exception est
   limitee a la page publique /verif). Un etat d'alerte se distingue par
   le libelle et la forme (badge), jamais par une couleur dediee.
   =================================================================== */

/* --- Navigation commune (§2/§7/§8 de la note) ---------------------- */
.nav-secondaire{max-width:720px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:2px;background:var(--paper);border-bottom:1px solid var(--i08);flex-wrap:wrap}
.nav-lien{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--i55);text-decoration:none;padding:14px 12px;min-height:44px;box-sizing:border-box;border-bottom:2px solid transparent;cursor:pointer;background:none;list-style:none}
.nav-lien:hover{color:var(--ink)}
.nav-lien.on,.nav-lien[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold);font-weight:700}
.nav-plus{position:relative}
.nav-plus>summary.nav-lien{list-style:none}
.nav-plus>summary.nav-lien::-webkit-details-marker{display:none}
.nav-plus-menu{position:absolute;top:100%;left:0;background:var(--paper);border:1px solid var(--i12);border-radius:0 0 10px 10px;min-width:190px;box-shadow:0 24px 48px -30px rgba(0,0,0,.35);z-index:20;display:flex;flex-direction:column;padding:6px 0}
.nav-plus-menu a{padding:11px 16px;font-size:13.5px;color:var(--ink);text-decoration:none;min-height:44px;display:flex;align-items:center;box-sizing:border-box}
.nav-plus-menu a:hover{background:var(--i03)}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--ink);color:#fff;font-size:10px;font-weight:700;line-height:1}

.nav-bas-mobile{display:none}
@media (max-width:640px){
  .nav-secondaire{display:none}
  .nav-bas-mobile{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--paper);border-top:1px solid var(--i12);z-index:30;padding:2px 4px}
  .nb-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--i55);text-decoration:none;background:none;border:none;position:relative}
  .nb-item.on{color:var(--ink);font-weight:700}
  .nb-item svg{width:20px;height:20px}
  .nb-item .nav-badge{position:absolute;top:2px;right:calc(50% - 22px)}
  .nb-plus{position:relative;flex:1 1 0}
  .nb-plus>summary{list-style:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--i55);cursor:pointer}
  .nb-plus>summary::-webkit-details-marker{display:none}
  .nb-plus>summary svg{width:20px;height:20px}
  .nb-plus[open]>summary{color:var(--ink);font-weight:700}
  .nb-plus .nav-plus-menu{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);border-radius:10px}
  .wrap{padding-bottom:78px}
}

/* --- Cartes indicateurs (tableau de bord, §3.1 -- reutilise .stat-row/
   .stat-card en motif, mais forme dediee "kpi" pour les 5 chiffres) --- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:4px}
.kpi-card{background:var(--paper);border:1px solid var(--i12);border-radius:12px;padding:14px 16px;position:relative}
.kpi-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);border-radius:12px 0 0 12px}
.kpi-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--i55);padding-left:8px}
.kpi-value{font-size:26px;font-weight:700;line-height:1.15;margin-top:4px;padding-left:8px;font-variant-numeric:tabular-nums}
.kpi-value.kpi-indispo{color:var(--i35);font-size:20px}
.kpi-sub{font-size:11px;color:var(--i55);margin-top:3px;padding-left:8px}
.kpi-sub-alerte{font-weight:700;color:var(--ink)}
@media (max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.kpi-grid{grid-template-columns:1fr}}

/* --- Trois visuels du tableau de bord (refonte 2026-07-30, deuxieme
   passe -- app/graphiques.php) : anneau du stock de feuilles (seul
   diagramme circulaire), diagramme en bande de la consommation
   hebdomadaire, jauge de feuilles. Un seul accent (or) partage entre les
   trois, jamais une palette par categorie. --- */
.tb-visuels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 18px}
@media (max-width:900px){.tb-visuels-grid{grid-template-columns:1fr}}
.tb-visuel-card{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:0}
.tb-visuel-card h3{font-size:14px;margin:0 0 14px;line-height:1.3}
.tb-note-donnee{margin-top:12px}
.tb-projection{font-weight:600;color:var(--i70)}
.tb-alerte{font-weight:700;color:var(--ink)}

/* Anneau du stock de feuilles : meme gabarit svg qu'avant (conserve),
   mais le centre affiche desormais les feuilles DISPONIBLES, jamais un
   total -- seule valeur qui appelle un geste (recommander). */
.ring-wrap{position:relative;width:100%;max-width:170px;aspect-ratio:1/1;margin:0 auto}
.ring-wrap svg{width:100%;height:100%;display:block}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;pointer-events:none}
.ring-center-num{font-size:26px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums}
.ring-center-lab{font-size:10px;color:var(--i55);font-family:var(--mono);letter-spacing:.03em;text-transform:uppercase;margin-top:3px}
.ring-legend{list-style:none;margin:14px 0 0;padding:0;width:100%;text-align:left;display:flex;flex-direction:column;gap:7px}
.ring-legend li{display:flex;align-items:center;gap:8px;font-size:12.5px}
.ring-swatch{width:12px;height:12px;border-radius:3px;flex:none;border:1px solid var(--i12)}
.ring-legend .rl-lab{flex:1 1 auto;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ring-legend .rl-val{font-family:var(--mono);font-size:11.5px;color:var(--i55);white-space:nowrap}
.ring-legend .rl-pct{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink);width:48px;text-align:right;white-space:nowrap}

/* Diagramme en bande : 8 colonnes, hauteur proportionnelle. Noir = semaine
   en cours (incomplete), or = semaine close -- regle de couleur
   documentee, jamais decorative (cf app/graphiques.php). */
.barres-hebdo{display:flex;align-items:flex-end;justify-content:center;gap:6px;width:100%;height:132px;padding:0 2px}
.barre-hebdo-col{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.barre-hebdo-val{font-family:var(--mono);font-size:10.5px;color:var(--i70);margin-bottom:4px;font-variant-numeric:tabular-nums}
.barre-hebdo-piste{width:100%;max-width:20px;height:78px;display:flex;align-items:flex-end}
.barre-hebdo-barre{width:100%;border-radius:3px 3px 0 0;min-height:2px}
.barre-hebdo-lab{font-size:9px;color:var(--i55);margin-top:6px;letter-spacing:.02em}

/* Jauge de feuilles : CIRCULAIRE depuis la clause B2 de l'avenant v1.26
   (acte CEO 2026-08-05) -- la jauge horizontale du 2026-07-30 est
   abandonnee. Anneau epais, part restante en Or, part consommee en
   rgba(0,0,0,.10), nombre de feuilles restants en tres grand au centre,
   pourcentage dessous en Source Code Pro. Les chiffres du centre sont
   doubles par la ligne d'equivalence, visible et accessible. */
.jauge-anneau{position:relative;width:100%;max-width:186px;aspect-ratio:1/1;margin:0 auto}
.jauge-svg{width:100%;height:100%;display:block}
.jauge-centre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;pointer-events:none}
.jauge-nombre{font-size:34px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.jauge-pct{font-size:12.5px;font-weight:600;color:var(--i70);margin-top:3px;font-variant-numeric:tabular-nums}
.jauge-lab{font-size:9.5px;color:var(--i55);font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;margin-top:4px;line-height:1.25}
.jauge-equiv{font-size:12px;color:var(--i70);font-weight:600;margin:14px 0 0;text-align:center}

/* --- Anneaux superposes du tableau de bord (clause B1 de l'avenant
   v1.26, acte CEO 2026-08-05 ; app/graphiques.php §5, DT-098/DT-099).
   Trois anneaux occupent LE MEME carre, un seul visible a la fois. La
   selection se fait par des <button aria-pressed>, jamais par des onglets
   ni un menu deroulant : l'etat selectionne se lit sans rien ouvrir.
   Palette : noir, Or Royal, transparences de noir. Aucune teinte
   nouvelle, aucune information portee par la couleur seule. --- */
.tb-anneaux-card{margin-bottom:18px}
.an-grille{display:grid;grid-template-columns:196px 1fr;gap:22px;align-items:start}

/* Selecteur : cible tactile de 44 px, etat actif porte par le CONTRASTE
   (fond noir, texte blanc) ET par une pastille pleine -- jamais par la
   couleur seule (charte §3, WCAG 2.2 AA). */
.an-selecteur{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}
.an-selecteur legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--i55);padding:0;margin-bottom:4px}
.an-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 12px;background:var(--paper);color:var(--ink);border:1px solid var(--i12);border-radius:10px;font-family:inherit;font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;line-height:1.25}
.an-btn:hover{border-color:var(--gold);background:rgba(197,163,53,.10)}
.an-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.an-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.an-puce{flex:0 0 auto;width:11px;height:11px;border-radius:50%;border:1.5px solid currentColor;background:transparent}
.an-btn[aria-pressed="true"] .an-puce{background:var(--gold);border-color:var(--gold)}

/* Superposition : tous les panneaux occupent la meme cellule de grille.
   Les panneaux caches sont visibility:hidden -- donc hors du parcours au
   clavier et hors de l'arbre d'accessibilite, pas seulement transparents. */
.an-panneaux{display:grid;min-width:0}
.an-panneau{grid-area:1/1;display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:start;min-width:0;opacity:0;visibility:hidden;transition:opacity .22s ease}
.an-panneau.actif{opacity:1;visibility:visible}
.an-scene{position:relative;width:250px;max-width:100%;aspect-ratio:1/1;flex:none}
.an-svg{width:100%;height:100%;display:block}
.an-centre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:44px;pointer-events:none}
.an-centre-val{font-size:36px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.an-centre-lab{font-size:10.5px;color:var(--i55);margin-top:5px;line-height:1.3}

.an-desc{min-width:0}
.an-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--i55)}
.an-desc h3{font-size:17px;font-weight:700;margin:3px 0 0;line-height:1.25}
.an-texte{margin:10px 0 0;color:var(--i70);font-size:14px;max-width:46ch}
/* Ligne d'action : fond Or tres clair et filet Or, texte NOIR -- l'Or ne
   porte jamais de texte fin sur fond blanc (2,42:1, sous le seuil AA). */
.an-action{margin:14px 0 0;padding:11px 13px;background:rgba(197,163,53,.12);border:1px solid var(--gold);border-radius:10px;font-size:13.5px;color:var(--ink)}
.an-vide{margin:14px 0 0}
.an-legende{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.an-legende li{display:flex;align-items:center;gap:9px;font-size:13px}
.an-pastille{width:12px;height:12px;border-radius:3px;flex:none;border:1px solid var(--i12)}
.an-legende .an-lab{flex:1 1 auto;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-legende .an-val{font-size:11.5px;color:var(--i55);white-space:nowrap}
.an-legende .an-pct{font-size:11.5px;font-weight:700;color:var(--ink);width:56px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

@media (max-width:860px){
  .an-grille{grid-template-columns:1fr}
  .an-selecteur{flex-direction:row;flex-wrap:wrap}
  .an-btn{width:auto;flex:1 1 auto}
  .an-panneau{grid-template-columns:1fr;justify-items:center;text-align:center}
  .an-scene{width:220px}
  .an-texte{max-width:none}
  .an-legende{width:100%;text-align:left}
}
/* Clause B3 : la seule animation de l'ecran est cette bascule, et elle
   disparait des que l'utilisateur demande moins de mouvement. */
@media (prefers-reduced-motion:reduce){
  .an-panneau{transition:none}
}

/* Classement par monotype, SOUS le tableau de bord (demande CEO
   explicite du 2026-07-30) : barres horizontales triees par volume, un
   seul accent or -- l'utilite vient du tri et des chiffres, pas d'une
   palette de 8 teintes a memoriser. */
.tb-classement-card{margin-bottom:18px}
.tb-classement-note{font-size:11.5px;color:var(--i55);margin:-8px 0 16px}
.mc-liste{display:flex;flex-direction:column;gap:11px}
.mc-ligne{display:flex;align-items:center;gap:10px}
.mc-rang{flex:none;width:20px;height:20px;border-radius:50%;background:var(--i08);color:var(--i70);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.mc-ligne:first-child .mc-rang{background:var(--ink);color:#fff}
.mc-lib{flex:0 0 168px;min-width:0;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-piste{flex:1 1 auto;height:10px;border-radius:5px;background:var(--i08)}
.mc-barre{height:100%;border-radius:5px;background:var(--gold);min-width:6px}
.mc-valeurs{flex:none;width:112px;text-align:right;font-size:12px;color:var(--i70)}
.mc-total{margin-top:14px;padding-top:12px;border-top:1px solid var(--i08);font-size:12.5px;font-weight:700;color:var(--ink)}
@media (max-width:560px){
  .mc-lib{flex-basis:104px;font-size:12.5px}
  .mc-valeurs{width:92px;font-size:11px}
}

/* --- Notifications (§4 -- liste, groupement <details>/<summary>) ---- */
.notif-list{display:flex;flex-direction:column;gap:1px;background:var(--i08);border:1px solid var(--i12);border-radius:12px;overflow:hidden}
.notif-row{background:var(--paper);display:flex;align-items:flex-start;gap:12px;padding:13px 16px}
.notif-row.unread{background:rgba(197,163,53,.06);box-shadow:inset 3px 0 0 var(--gold)}
.notif-row.notif-sous{padding-left:32px}
.notif-dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--i18,rgba(0,0,0,.18))}
.notif-row.unread .notif-dot{background:var(--gold)}
.notif-main{flex:1 1 auto;min-width:0}
.notif-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.notif-event{font-size:13.5px;font-weight:600}
.notif-row.unread .notif-event{font-weight:700}
.notif-meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:4px;font-size:11.5px;color:var(--i55)}
.notif-time{font-family:var(--mono)}
.notif-btn-lu{padding:7px 12px;font-size:12px;min-height:44px}
.notif-groupe{background:var(--paper)}
.notif-groupe>summary{list-style:none;cursor:pointer}
.notif-groupe>summary::-webkit-details-marker{display:none}
/* Badge ALERTE : jamais de rouge -- noir + libelle + forme (puce ronde),
   trois signaux non-couleur (WCAG 1.4.1). */
.notif-alerte{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1.5px solid var(--ink);color:var(--ink);border-radius:4px;padding:2px 7px 2px 5px}
.notif-alerte::before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;background:var(--ink);color:#fff;font-size:9px;font-weight:700;line-height:1}