/* verif.css
 * Feuille de style de la page publique de verification (public/v.php).
 * Reprend la palette et les classes de la maquette validee CEO :
 * D:\MVP FAENIX Print\FAENIX Print\14_NOUVEAU_CONCEPT\MAQUETTE_PAGE_VERIFICATION_v1.0.html
 * (etats st-vert/st-rouge/st-gris, zones z1/z2/z6/z7, bouton unique
 * verifybtn). Charte FAENIX Print : #000 / #fff / #C5A335, aucun bleu.
 */

@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/ft1.woff) format('woff');}
@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');}
/* Alias exacts utilises par les gabarits SVG inlines (decision CEO 2026-07-17 : Medium 500 -> Source Sans 3 Regular officielle) */
@font-face{font-family:'SourceSans3-Light';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/ft1.woff) format('woff');}
@font-face{font-family:'SourceSans3-Regular';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ft2.woff) format('woff');}
@font-face{font-family:'SourceSans3-Medium';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ft2.woff) format('woff');}
@font-face{font-family:'SourceSans3-SemiBold';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ft3.woff) format('woff');}
@font-face{font-family:'SourceSans3-Bold';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ft4.woff) format('woff');}
@font-face{font-family:'SourceSans3-Italic';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ft2.woff) format('woff');}

:root{
  --ink:#000;--paper:#fff;--gold:#C5A335;
  --i70:rgba(0,0,0,.70);--i55:rgba(0,0,0,.55);--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:16px;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
p{margin:0}

.wrap{max-width:460px;margin:16px auto 40px;padding:0 16px}
.card{background:var(--paper);border:1px solid var(--i12);border-radius:16px;overflow:hidden;box-shadow:0 24px 48px -30px rgba(0,0,0,.35)}

/* Zone 1 : identite de la structure */
.z1{display:flex;align-items:center;gap:14px;padding:20px 20px 18px;border-bottom:1px solid var(--i08)}
.structlogo{flex:none;width:52px;height:52px;border:1px dashed var(--i12);border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--mono);font-size:8px;line-height:1.25;color:var(--i55);letter-spacing:.02em;padding:4px;background:repeating-linear-gradient(45deg,var(--i03) 0 6px,transparent 6px 12px)}
.structlogo.real{border:none;background:#fff;padding:0}
.structlogo.real img{width:100%;height:100%;object-fit:contain;display:block}
.structinfo .name{font-size:17px;font-weight:700}
.structinfo .addr{font-size:13px;color:var(--i55);margin-top:2px}
.structinfo .aut{font-size:11px;color:var(--i55);margin-top:2px;font-family:var(--mono);letter-spacing:.01em}

/* Zone 2 : bandeau d'etat (vert / rouge / gris) */
.z2{padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--i08)}
.z2 .dot{flex:none;width:12px;height:12px;border-radius:50%;box-sizing:border-box}
.z2 .label{font-size:15px;font-weight:700;letter-spacing:.01em}
.z2 .sub{font-size:12.5px;margin-top:2px}
.z2.st-vert{background:var(--vert-bg)}.z2.st-vert .label,.z2.st-vert .sub{color:var(--vert)}
.z2.st-rouge{background:var(--rouge-bg)}.z2.st-rouge .label,.z2.st-rouge .sub{color:var(--rouge)}
.z2.st-gris{background:var(--gris-bg)}.z2.st-gris .label,.z2.st-gris .sub{color:var(--gris)}
/* Forme par etat (charte 3.5), independante de la couleur : pleine = favorable, vide = neutre/attente, barree = defavorable */
.z2.st-vert .dot{background:var(--vert)}
.z2.st-gris .dot{background:transparent;border:2px solid var(--gris)}
.z2.st-rouge .dot{background:linear-gradient(45deg,transparent 42%,var(--paper) 42%,var(--paper) 58%,transparent 58%),var(--rouge)}

/* Fond gabarit SVG de la structure (iteration 2, 2026-07-17) */
.doc-svg{border:1px solid rgba(0,0,0,.12);border-radius:12px;overflow:hidden;background:#fff;margin-bottom:14px}
.doc-svg svg{width:100%;height:auto;display:block}

/* Consigne courte de tete, etat rouge uniquement (acte CEO 2026-07-29) :
   le document passant AVANT le bouton d'action, une alerte de securite
   descendrait sous la ligne de flottaison sur un document long. Cette
   phrase breve reste visible d'emblee ; le bouton complet, avec le
   numero a appeler, garde sa place en bas. */
.consigne-haut{margin:0 18px 14px;padding:11px 14px;border-radius:10px;
  background:var(--rouge-bg);color:var(--rouge);border-left:5px solid var(--rouge);
  font-weight:700;font-size:14px;line-height:1.35}

/* Feuille authentique mais VIERGE (acte CEO 2026-07-29) : le blanc porte
   l'information. Rapport A5 respecte (148/210) pour que l'oeil reconnaisse
   une feuille, bordure discontinue pour dire « rien n'a ete saisi » sans
   suggerer un document reel. */
.doc-vierge{position:relative;margin:18px;background:var(--paper);
  border:1px solid rgba(197,163,53,.42);border-radius:12px;aspect-ratio:148/210;
  min-height:190px;display:flex;align-items:center;justify-content:center;padding:22px}
.doc-vierge-note{font-size:12.5px;line-height:1.5;color:var(--i55);text-align:center;max-width:230px}

/* Zone document : au prototype, cadre sobre type + numero + transcription */
.doc-sec{padding:18px 20px 20px;border-bottom:1px solid var(--i08)}
.doc-frame{border:1px solid var(--i12);border-radius:12px;overflow:hidden;background:#fff;padding:16px}
.doc-frame .doc-type{font-family:var(--mono);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--i55)}
.doc-frame .doc-numero{font-family:var(--mono);font-size:13px;font-weight:600;margin-top:2px}
.doc-frame .doc-serie{font-family:var(--mono);font-size:11px;color:var(--i55);margin-top:2px;letter-spacing:.02em}
.doc-frame .doc-transcription{margin-top:12px;font-size:14px;white-space:pre-wrap}
.doc-frame .doc-dates{margin-top:12px;font-size:12px;color:var(--i55)}

.sec{padding:18px 20px;border-bottom:1px solid var(--i08)}
.sec h2{font-size:12px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--i55);display:flex;align-items:center;gap:9px}
.sec h2 i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:none}
.sec .body{margin-top:12px}
.auth{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13.5px}
.auth dt{color:var(--i55)}.auth dd{margin:0;font-weight:600}.auth .mono{font-family:var(--mono);font-weight:600;letter-spacing:.02em}

/* Zone 6 : bouton unique d'action de verification */
.z6{padding:20px}
.secbadge{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;padding:11px 13px;border-radius:10px;margin-bottom:12px}
.secbadge svg{flex:none;width:16px;height:16px}
.secbadge.ok{background:var(--vert-bg);color:var(--vert)}
.secbadge.ko{background:var(--rouge-bg);color:var(--rouge)}
.secbadge.rev{background:var(--gris-bg);color:var(--gris)}

.verifybtn{width:100%;font-family:var(--sans);font-weight:700;font-size:15.5px;padding:15px;border-radius:12px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}
.verifybtn:hover{opacity:.88}
.verifybtn svg{flex:none;width:18px;height:18px}
.verifybtn.vert{border-color:var(--vert);background:var(--vert);color:#fff}
/* Forme par etat : vide (contour, pas de remplissage) pour l'etat neutre/attente, distinct du plein de l'etat favorable */
.verifybtn.gris{border-color:var(--gris);background:var(--paper);color:var(--gris)}
.verifybtn.rouge{border-color:var(--rouge);background:var(--rouge);color:#fff;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 0 0 6px rgba(0,0,0,.30)}
.verifycaption{text-align:center;font-size:11.5px;color:var(--i55);margin-top:9px}

/* Bloc d'information (non un bouton) qui remplace .verifybtn quand aucune
   action n'est possible (pas de telephone en base pour la structure) :
   filet lateral sur le modele de .consigne-haut, pas d'angle arrondi
   (charte filet lateral), pas de fond plein ni de curseur de bouton. */
.consigne-bloc{width:100%;padding:13px 15px;border-left:4px solid var(--gold);background:var(--paper);color:var(--ink);font-size:13.5px;line-height:1.45}
.consigne-bloc.vert{border-left-color:var(--vert);background:var(--vert-bg);color:var(--vert)}
.consigne-bloc.rouge{border-left-color:var(--rouge);background:var(--rouge-bg);color:var(--rouge)}
/* Filet en pointille pour l'etat neutre/attente : meme forme que le repere deja utilise par .structlogo pour "rien de saisi" */
.consigne-bloc.gris{border-left-color:var(--gris);border-left-style:dashed;background:var(--gris-bg);color:var(--gris)}

/* Zone 7 : actions secondaires (telechargement PDF etc.) */
.z7{padding:18px 20px}
.z7 .msg{font-size:13.5px;color:var(--i70);margin-bottom:12px}
.actionbtn{display:block;width:100%;text-align:center;text-decoration:none;font-weight:700;font-size:14.5px;padding:13px;border-radius:12px;border:1.5px solid var(--ink);background:#fff;color:var(--ink)}
.actionbtn:hover{background:var(--i03)}
.actionbtn.gold{border-color:var(--gold);background:var(--gold);color:var(--ink)}
/* Telechargement (acte CEO 2026-07-29) : VERT, aligne au millimetre sur la
   maquette de reference APERCU_PAGE_PUBLIQUE.html (.actionbtn y est vert
   plein). Remplace la variante Or proposee en 2e passe, ecartee par le CEO. */
.actionbtn.vert{border-color:var(--vert);background:var(--vert);color:#fff}
/* Survol sans teinte inventee : meme technique d'assombrissement que .verifybtn:hover (opacite), plus de hex hors palette */
.actionbtn.vert:hover{background:var(--vert);border-color:var(--vert);opacity:.88}
.actionbtn[disabled],.actionbtn.disabled{opacity:.45;pointer-events:none}

.hostfooter{max-width:460px;margin:0 auto 30px;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:10px}
.hostfooter svg{width:20px;height:20px;color:var(--ink);flex:none}
.hostfooter span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--i55)}
.hostfooter b{color:var(--ink)}

.draftbar{background:var(--ink);color:var(--paper);text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.10em;text-transform:uppercase;padding:9px 12px}
.draftbar b{color:var(--gold)}

/* Bloc prescripteur (parcours praticien par scan du QR, mission
   recentrage) : toujours present sous la carte, sobre, centre,
   lien souligne. Ne modifie aucun etat/bouton/legende deja acte. */
.prescripteur-bloc{padding:14px 20px 4px;text-align:center;font-size:12px;color:var(--i55)}
.prescripteur-bloc a{margin-left:4px;color:var(--ink);text-decoration:underline}
.prescripteur-bloc a:hover{color:var(--gold)}

/* Detail des champs saisis (bloc secours sous le document, gabarit
   interactif -- evolution majeure) : liste "libelle : valeur" lisible,
   affichee sous le fond SVG (qui porte deja les valeurs incrustees). */
.doc-champs{display:flex;flex-direction:column;gap:6px;white-space:normal}
.doc-champ-ligne{font-size:13.5px}
.doc-champ-lib{color:var(--i55);font-weight:600;margin-right:4px}

/* ------------------------------------------------------------------ */
/* Nouveau modele page publique epuree (validation CEO 2026-07-22) :   */
/* bandeau etat agrandi (picto centre au-dessus du texte), bloc        */
/* prescripteur compact, bouton Telecharger vert, impression isolee.   */
/* ------------------------------------------------------------------ */
.etat{padding:24px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;border-bottom:1px solid var(--i08)}
.etat .picto{width:44px;height:44px;flex:none}
.etat .lab{font-size:19px;font-weight:700;letter-spacing:.01em;line-height:1.15}
.etat .sub{font-size:13px;margin-top:-2px}
.etat.st-vert{background:var(--vert-bg)}.etat.st-vert .picto,.etat.st-vert .lab,.etat.st-vert .sub{color:var(--vert)}
.etat.st-rouge{background:var(--rouge-bg)}.etat.st-rouge .picto,.etat.st-rouge .lab,.etat.st-rouge .sub{color:var(--rouge)}
.etat.st-gris{background:var(--gris-bg)}.etat.st-gris .picto,.etat.st-gris .lab,.etat.st-gris .sub{color:var(--gris)}
/* Feuille authentique mais VIERGE (acte CEO 2026-07-29) : bandeau BLANC,
   accent leger de contour Or. Une feuille sans contenu n'est ni valide ni
   invalide -- lui donner le vert du « traitement en cours » serait un
   contresens. Le blanc dit l'attente, l'Or dit l'authenticite. */
.etat.st-vierge{background:var(--paper);box-shadow:inset 0 0 0 1px rgba(197,163,53,.42)}
.etat.st-vierge .picto{color:var(--gold)}
.etat.st-vierge .lab{color:var(--ink)}
.etat.st-vierge .sub{color:var(--i55)}

/* Bande de vivacite (piste agent B, doctrine anti-capture-figee, acte
   CEO 2026-07-29) : rendue en dernier enfant de .etat, horloge + compteur
   de consultations. Elle ne VARIE jamais avec l'etat -- identique sur les
   4 etats (vert/rouge/gris/vierge). Verifie : les selecteurs
   .etat.st-vert/.st-rouge/.st-gris ne colorent que .picto, .lab, .sub
   (lignes 164-166 du fichier) ; .st-vierge ne colore que .picto, .lab,
   .sub (lignes 172-174). Aucun de ces selecteurs ne cible .vivante ni ses
   enfants, et aucun ne pose de color sur .etat lui-meme qui pourrait s'y
   propager par heritage -- chaque texte ci-dessous fixe de toute facon sa
   propre couleur (background ne s'herite jamais en CSS).
   PRECISION 2026-07-30 (acte CEO, leve la reserve v1.23 Sec5) : les chiffres
   de l'horloge (.vivante-horloge plus bas) utilisent desormais le token
   --vert, le MEME que .etat.st-vert -- ce n'est plus "aucune couleur
   d'etat ici" au sens strict d'une teinte jamais reprise, mais le principe
   tenu reste intact : cette teinte est FIXE, affichee a l'identique sur les
   4 etats (y compris une page ROUGE), elle ne bascule jamais pour matcher
   l'etat courant. Le risque de confusion que cela ouvre (un chiffre vert au
   bas d'un ecran par ailleurs rouge/gris) est traite juste en dessous, au
   niveau de .vivante-horloge : fond et forme distincts de toute pastille
   d'etat (aplat colore) de cette feuille.
   Masquee a l'impression : deja couverte par la regle existante qui
   masque tout .etat (@media print, "display:none!important" plus bas).
   Aucune animation : seul le contenu texte de l'horloge change (cote
   serveur/JS a la seconde), jamais une transition ou un keyframe CSS. */
.etat .vivante{align-self:stretch;margin:14px -18px -24px;padding:12px 18px 11px;
  border-top:1px solid var(--i12);background:var(--i03);
  display:flex;flex-direction:column;align-items:center;gap:5px}
.vivante-tag{font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--i55)}
/* Chiffres de l'horloge en VERT (acte CEO 2026-07-30, leve la reserve de
   l'avenant v1.23 Sec5). Le vert reutilise est --vert, DEJA present dans ce
   fichier (etats .st-vert / .verifybtn.vert) -- aucune nouvelle couleur.
   Fond change, pas le vert (mesure) : --vert sur --ink ne rend que 3,22:1
   (sous le seuil WCAG 2.2 de 4,5:1 pour ce corps de texte) ; --vert sur
   --paper (blanc) rend 6,51:1. C'est donc le fond qui a bouge, du noir vers
   le blanc, et non la couleur du texte -- le noir aurait exige un vert plus
   clair, donc un DEUXIEME vert, ce que la consigne interdit.
   Anti-confusion (l'horloge n'est pas un etat) : --vert-bg (alors #EAF3ED,
   depuis ramene au blanc par la mise en conformite du 2026-09-10 -- le
   fond du bandeau "valide") est deliberement ECARTE ici -- l'associer au
   vert du texte aurait recree visuellement le pastille "document valide"
   au bas d'un ecran qui peut par ailleurs etre rouge ou gris. Le fond
   choisi est --paper (blanc neutre, sans teinte verte) avec une bordure
   grise neutre (--i12, deja utilisee par .card/.doc-svg, jamais par un
   etat) : aucun remplissage de couleur, contrairement a TOUTES les
   pastilles/boutons d'etat de cette feuille (.etat.st-*, .verifybtn.*,
   .consigne-bloc.*), qui sont toujours des aplats pleins. Cette grammaire
   visuelle (contour neutre + texte colore, jamais un aplat) est reservee a
   ce seul composant technique et ne reapparait nulle part ailleurs dans la
   page -- c'est la separation typographique/position demandee : position
   deja distincte (pied du bandeau .etat, bande .vivante a part, libelle
   "Page vivante" en tete), a laquelle s'ajoute desormais une forme (contour)
   distincte de la forme des pastilles d'etat (aplat). */
.vivante-horloge{font-family:var(--mono);font-size:19px;font-weight:600;
  letter-spacing:.03em;color:var(--vert);background:var(--paper);
  border:1px solid var(--i12);
  padding:4px 12px;border-radius:6px;font-variant-numeric:tabular-nums;
  line-height:1.2}
.vivante-date{font-family:var(--mono);font-size:11px;font-weight:500;
  color:var(--ink);letter-spacing:.02em}
.vivante-compteur{font-family:var(--sans);font-size:12.5px;font-weight:700;
  color:var(--ink)}
.vivante-note{font-size:11px;font-weight:400;color:var(--i70);
  line-height:1.4;max-width:280px}

.doc-svg{border:none;border-radius:0;margin:0}
.presc{padding:12px 18px;border-top:1px solid var(--i08);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.presc .lib{font-family:var(--mono);font-size:10px;letter-spacing:.10em;text-transform:uppercase;color:var(--i55);width:100%}
.presc .nom{font-size:14.5px;font-weight:700}
.presc .meta{font-size:12.5px;color:var(--i55)}
.dl{padding:14px 18px 18px}
.actionbtn.vert{border-color:var(--vert);background:var(--vert);color:#fff}
.actionbtn.vert:hover{background:var(--vert);filter:brightness(1.08)}

/* Mention d'export imprimee (agent B place l'element dans le bloc document) :
   invisible a l'ecran, visible uniquement a l'impression -- aucun artefact
   statique (capture ecran, PDF exporte) ne doit laisser croire qu'il
   affiche un etat par lui-meme ; il doit renvoyer au scan du QR. Position
   fixee en pied de page imprimee (hors flux du document), donc ne repousse
   aucun contenu et ne peut pas deborder du format A5 (@page 148mm x 210mm,
   regle existante non modifiee ici -- voir plus bas). */
.mention-impression{display:none}

/* Format A5 portrait exact, marge 0 (le document electronique gere deja
   ses propres marges de 10 mm en interne, dans le SVG lui-meme). Sans
   cette regle, le navigateur imprime/exporte PDF sur le format papier par
   defaut de l'utilisateur (souvent A4) avec ses propres marges de mise en
   page -- le document A5 se retrouve alors centre et reduit avec des
   marges parasites (~17 mm constatees), au lieu d'occuper la feuille A5
   entiere. Corrige le "QR trop petit" a la racine : ce n'est pas le QR
   qui doit grandir (reste 25x25 mm, norme actee), c'est la page qui doit
   arreter d'etre reduite. */
@page{size:148mm 210mm;margin:0}
@media print{
  body{background:#fff}
  .etat,.presc,.dl,.z6,.hostfooter,.consigne-haut,.doc-vierge{display:none!important}
  .wrap{margin:0;padding:0;max-width:none}
  .card{border:none;border-radius:0;box-shadow:none;overflow:visible}
  .doc-svg{border:none;margin:0}
  /* Bloc de secours sans gabarit SVG (document electronique sans modele
     enregistre) : le SVG ne porte pas l'en-tete du praticien, donc .presc
     doit rester visible a l'impression pour identifier le prescripteur.
     Marges internes en mm (page sans marge, @page margin:0 ci-dessus) et
     texte dimensionne pour ne pas deborder du format A5. */
  .card.sans-gabarit .presc{display:flex!important;padding:6mm 10mm 3mm}
  .card.sans-gabarit .doc-champs{padding:10mm 10mm 4mm;font-size:13px;line-height:1.55;overflow-wrap:break-word}
  .card.sans-gabarit .doc-champ-ligne{font-size:13px}
  .mention-impression{display:block;position:fixed;left:0;right:0;bottom:1.5mm;
    text-align:center;font-family:var(--mono);font-size:6.5px;
    letter-spacing:.03em;color:var(--i55);padding:0 6mm}
}