/* Docteur Itibar — système de design.
   Source : ui-ux-pro-max, type de produit « Patient Portal / Health Records ».
   Style : Trust & Authority + Accessible & Ethical (WCAG AAA).
   Palette : bleu clinique + vert santé + rouge d'alerte.
   Contraintes non négociables : 16px minimum, contraste 7:1, cibles 44×44, focus 3px. */

:root{
  /* Palette « Patient Portal », CORRIGÉE après mesure : le bleu recommandé (#0284C7) ne donne
     que 4,10:1 sur blanc — sous le minimum AA de 4,5:1, et loin du 7:1 que réclame le style
     « Accessible & Ethical ». Assombri à #075985 (7,56:1). Le bleu d'origine ne sert plus qu'à
     des éléments NON textuels (pastilles, bordures), où le seuil est de 3:1. */
  --primaire:#075985;      --sur-primaire:#FFFFFF;   /* 7,56:1 — AAA */
  --primaire-survol:#0C4A6E;                          /* 9,46:1 */
  --primaire-vif:#0284C7;                             /* décoratif uniquement */
  --secondaire:#0E7490;
  --accent:#15803D;        --sur-accent:#FFFFFF;      /* 5,02:1 — AA ; #16A34A échouait à 3,30:1 */
  --fond:#F0F9FF;
  --texte:#0C4A6E;
  --carte:#FFFFFF;
  --muet:#E8F2F8;          --texte-muet:#475C6B;
  --bord:#BAE6FD;
  --danger:#B91C1C;        --sur-danger:#FFFFFF;      /* 6,47:1 */
  --danger-fond:#FEF2F2;   --danger-bord:#FCA5A5;
  --anneau:#075985;

  --r-s:10px; --r-m:14px; --r-l:20px;
  --ombre:0 1px 2px rgba(12,74,110,.06), 0 4px 14px rgba(12,74,110,.05);
  --ombre-forte:0 6px 22px rgba(2,132,199,.22);
  --cible:44px;            /* cible tactile minimale */
  --transition:180ms cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme:dark){
  :root{
    --primaire:#38BDF8;    --sur-primaire:#082F49;
    --secondaire:#22D3EE;
    --accent:#4ADE80;      --sur-accent:#052E16;
    --fond:#071A24;
    --texte:#E7F3FA;
    --carte:#0E2836;
    --muet:#14344512;      --texte-muet:#A8C3D2;
    --bord:#1E4459;
    --danger:#FCA5A5;      --sur-danger:#450A0A;
    --danger-fond:#2A1213; --danger-bord:#7F2A2A;
    --anneau:#38BDF8;
    --ombre:0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.28);
    --ombre-forte:0 6px 22px rgba(0,0,0,.45);
  }
  :root{ --muet:#143445; }
}

*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  background:var(--fond); color:var(--texte);
  /* base 16px : plancher imposé par le style « Accessible & Ethical » */
  font:16px/1.6 "Figtree","Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; border:none; background:none; text-align:left}
svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}
h1,h2,h3,h4{font-weight:650; line-height:1.28; letter-spacing:-.011em}

/* Anneau de focus visible — jamais supprimé sans remplacement (règle WCAG AAA). */
:focus-visible{outline:3px solid var(--anneau); outline-offset:2px; border-radius:6px}
:focus:not(:focus-visible){outline:none}

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

/* Lien d'évitement (skip link) — exigé par le style accessible. */
.evitement{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--primaire); color:var(--sur-primaire); padding:12px 18px; border-radius:0 0 var(--r-s) 0;
}
.evitement:focus{left:0}

/* ===================== authentification ===================== */
.auth{
  min-height:100dvh; display:grid; place-items:center; padding:24px 20px;
  background:linear-gradient(170deg, var(--fond), var(--carte));
}
.auth-carte{
  width:100%; max-width:440px; background:var(--carte); border:1px solid var(--bord);
  border-radius:var(--r-l); box-shadow:var(--ombre); padding:32px 28px;
}
.auth-marque{display:flex; align-items:center; gap:13px; margin-bottom:6px}
.logo{
  width:48px; height:48px; border-radius:14px; background:var(--primaire); color:var(--sur-primaire);
  display:grid; place-items:center; font-weight:700; font-size:17px; letter-spacing:.02em; flex-shrink:0;
}
.auth-marque h1{font-size:22px}
.auth-marque p{font-size:14px; color:var(--texte-muet)}
.auth-titre{font-size:19px; margin:22px 0 4px}
.auth-sous{font-size:15px; color:var(--texte-muet); margin-bottom:22px}

.champ{margin-bottom:16px}
.champ label{display:block; font-size:14.5px; font-weight:600; margin-bottom:6px}
.champ .aide{font-size:13.5px; color:var(--texte-muet); margin-top:5px}
.champ input,.champ select{
  width:100%; min-height:var(--cible); padding:11px 14px;
  background:var(--carte); border:1.5px solid var(--bord); border-radius:var(--r-s);
  font-size:16px; /* < 16px déclenche un zoom automatique sur iOS */
  transition:border-color var(--transition);
}
.champ input:hover,.champ select:hover{border-color:var(--secondaire)}
.champ input:focus-visible,.champ select:focus-visible{border-color:var(--primaire)}
.champ.erreur input,.champ.erreur select{border-color:var(--danger)}
/* L'erreur est annoncée SOUS le champ concerné, pas en haut de page. */
.champ .msg-erreur{
  display:flex; align-items:center; gap:6px;
  font-size:13.5px; color:var(--danger); margin-top:6px; font-weight:500;
}
.champ .msg-erreur svg{width:16px; height:16px}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:12px}

.bouton{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:var(--cible); padding:13px 20px; border-radius:var(--r-s);
  background:var(--primaire); color:var(--sur-primaire); font-weight:650; font-size:16px;
  transition:background var(--transition), transform var(--transition);
}
.bouton:hover{background:var(--primaire-survol)}
.bouton:active{transform:scale(.985)}
.bouton:disabled{opacity:.55; cursor:not-allowed}
.bouton.fantome{background:transparent; color:var(--primaire); border:1.5px solid var(--bord)}
.bouton.fantome:hover{background:var(--muet)}
.alerte-form{
  display:flex; gap:9px; align-items:flex-start; padding:12px 14px; margin-bottom:16px;
  background:var(--danger-fond); border:1px solid var(--danger-bord); border-radius:var(--r-s);
  color:var(--danger); font-size:14.5px;
}
.bascule{text-align:center; margin-top:20px; font-size:15px; color:var(--texte-muet)}
.bascule button{color:var(--primaire); font-weight:650; padding:6px; border-radius:6px}
.bascule button:hover{text-decoration:underline}
.mention-legale{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--bord);
  font-size:13.5px; color:var(--texte-muet); line-height:1.55;
}
.mention-legale b{color:var(--texte)}

/* ===================== application ===================== */
/* `hidden` retire l'écran inactif de l'arbre d'accessibilité : un seul <main> exposé. */
[hidden]{display:none !important}
.app{display:flex; min-height:100dvh}

.lateral{
  width:272px; flex-shrink:0; height:100dvh; position:sticky; top:0;
  background:var(--carte); border-right:1px solid var(--bord);
  display:flex; flex-direction:column; padding:20px 14px;
}
.lateral .marque{display:flex; align-items:center; gap:11px; padding:2px 6px 20px}
.lateral .logo{width:40px; height:40px; font-size:14.5px; border-radius:12px}
.lateral .marque h1{font-size:17px}
.lateral .marque small{display:block; font-size:12.5px; color:var(--texte-muet); font-weight:400}

.action-principale{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  min-height:var(--cible); padding:13px; border-radius:12px;
  background:var(--primaire); color:var(--sur-primaire); font-weight:650; font-size:15.5px;
  margin-bottom:22px; transition:background var(--transition);
}
.action-principale:hover{background:var(--primaire-survol)}

.menu{display:flex; flex-direction:column; gap:3px}
.menu-item{
  display:flex; align-items:center; gap:12px; min-height:var(--cible); padding:11px 13px;
  border-radius:var(--r-s); font-size:15.5px; font-weight:500; color:var(--texte-muet);
  transition:background var(--transition), color var(--transition);
}
.menu-item:hover{background:var(--muet); color:var(--texte)}
.menu-item[aria-current="page"]{background:var(--muet); color:var(--primaire); font-weight:650}
.pied{margin-top:auto; padding-top:14px; border-top:1px solid var(--bord)}
.pied-compte{display:flex; align-items:center; gap:11px; width:100%; min-height:var(--cible); padding:9px 10px; border-radius:var(--r-s)}
.pied-compte:hover{background:var(--muet)}
.initiales{
  width:38px; height:38px; border-radius:50%; background:var(--muet); color:var(--primaire);
  display:grid; place-items:center; font-weight:700; font-size:14px; flex-shrink:0;
}
.pied-compte .n{font-size:14.5px; font-weight:600; line-height:1.25}
.pied-compte .s{font-size:13px; color:var(--texte-muet)}

main{flex:1; min-width:0; display:flex; flex-direction:column; height:100dvh}
.tete{
  display:flex; align-items:center; gap:10px; padding:16px 28px;
  border-bottom:1px solid var(--bord); background:var(--carte); flex-shrink:0;
}
.tete-bouton{
  display:grid; place-items:center; width:var(--cible); height:var(--cible);
  border-radius:var(--r-s); color:var(--texte-muet); margin-left:-8px;
}
.tete-bouton:hover{background:var(--muet); color:var(--texte)}
.tete h2{font-size:17px}
.tete p{font-size:13.5px; color:var(--texte-muet); margin-top:1px}
.tete p:empty{display:none}

.vue{display:none; flex:1; overflow-y:auto; min-height:0}
.vue.active{display:flex; flex-direction:column}
.conteneur{max-width:700px; width:100%; margin:0 auto; padding:28px 22px 44px}

/* ---------- accueil ---------- */
.salut{margin-bottom:22px}
.salut .jour{font-size:14px; color:var(--texte-muet); text-transform:capitalize}
.salut h3{font-size:25px; margin-top:4px}

.carte-demarrer{
  display:flex; align-items:center; gap:15px; width:100%; padding:19px 20px;
  border-radius:var(--r-m); background:var(--primaire); color:var(--sur-primaire);
  box-shadow:var(--ombre-forte); margin-bottom:12px; transition:background var(--transition), transform var(--transition);
}
.carte-demarrer:hover{background:var(--primaire-survol)}
.carte-demarrer:active{transform:scale(.99)}
.cd-rond{width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.2); display:grid; place-items:center}
.cd-txt{flex:1; min-width:0}
.cd-txt strong{display:block; font-size:16.5px; font-weight:650}
.cd-txt span{display:block; font-size:14px; opacity:.94; margin-top:3px; line-height:1.45}

.carte-reprise{
  display:flex; align-items:center; gap:14px; width:100%; padding:16px 18px;
  background:var(--carte); border:1px solid var(--bord); border-radius:var(--r-m);
  box-shadow:var(--ombre); margin-bottom:12px; transition:border-color var(--transition);
}
.carte-reprise:hover{border-color:var(--primaire)}
.pastille-vive{width:10px; height:10px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-left:6px}
.carte-reprise strong{display:block; font-size:15.5px}
.carte-reprise span{display:block; font-size:14px; color:var(--texte-muet); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.titre-section{
  font-size:13px; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
  color:var(--texte-muet); margin:28px 0 11px;
}
.grille-essentiel{display:grid; gap:11px}
.essentiel{
  display:flex; gap:13px; padding:15px 17px; background:var(--carte);
  border:1px solid var(--bord); border-radius:var(--r-m); box-shadow:var(--ombre);
}
.essentiel .rond{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--muet); color:var(--primaire); flex-shrink:0;
}
.essentiel .l{font-size:13px; font-weight:650; letter-spacing:.03em; text-transform:uppercase; color:var(--texte-muet)}
.essentiel .v{font-size:15.5px; margin-top:3px; line-height:1.5}
.essentiel.critique{border-color:var(--danger-bord); background:var(--danger-fond)}
.essentiel.critique .rond{background:rgba(185,28,28,.1); color:var(--danger)}
.essentiel.critique .l{color:var(--danger)}

.avis{
  margin-top:26px; padding:14px 16px; background:var(--carte); border:1px solid var(--bord);
  border-radius:var(--r-m); font-size:14px; color:var(--texte-muet); line-height:1.6;
}
.avis b{color:var(--texte); font-weight:650}

/* ---------- consultation ---------- */
#vue-consultation{overflow:hidden}
.defile{flex:1; overflow-y:auto; min-height:0}
.fil{max-width:700px; margin:0 auto; padding:26px 22px 12px; display:flex; flex-direction:column; gap:17px}

.ouverture{text-align:center; padding:46px 18px 28px}
.ouverture .logo{width:56px; height:56px; font-size:20px; border-radius:17px; margin:0 auto 15px}
.ouverture h3{font-size:19px; margin-bottom:7px}
.ouverture p{font-size:15px; color:var(--texte-muet); max-width:400px; margin:0 auto; line-height:1.6}

.tour{display:flex; gap:11px; align-items:flex-end}
.tour.moi{flex-direction:row-reverse}
.ava{
  width:31px; height:31px; border-radius:50%; background:var(--primaire); color:var(--sur-primaire);
  display:grid; place-items:center; font-size:11px; font-weight:700; flex-shrink:0; margin-bottom:3px;
}
.zone-bulle{max-width:80%; min-width:0}
.bulle{
  background:var(--carte); border:1px solid var(--bord); border-radius:16px 16px 16px 5px;
  padding:13px 17px; box-shadow:var(--ombre); overflow-wrap:anywhere; font-size:15.5px;
}
.tour.moi .bulle{
  background:var(--primaire); color:var(--sur-primaire); border-color:transparent;
  border-radius:16px 16px 5px 16px;
}
.bulle p{margin:0 0 10px} .bulle p:last-child{margin:0}
.bulle ul,.bulle ol{margin:9px 0; padding-left:20px} .bulle li{margin:5px 0}
.bulle strong{font-weight:650}
.bulle .t{font-size:15.5px; font-weight:650; margin:3px 0 8px}
.horo{font-size:12px; color:var(--texte-muet); margin:6px 5px 0}
.tour.moi .horo{text-align:right}

/* le compte rendu se distingue nettement des questions d'entretien */
.compte-rendu{background:var(--carte); border:1.5px solid var(--primaire); border-radius:16px; box-shadow:var(--ombre); overflow:hidden}
.cr-tete{
  display:flex; align-items:center; gap:9px; padding:12px 17px; background:var(--muet);
  color:var(--primaire); border-bottom:1px solid var(--bord);
  font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.cr-corps{padding:16px 17px}
.cr-bloc{margin-bottom:15px}
.cr-bloc:last-child{margin-bottom:0}
.cr-bloc h4{font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--texte-muet); margin-bottom:6px}
.cr-bloc.vigilance{background:var(--danger-fond); border-left:4px solid var(--danger); border-radius:0 var(--r-s) var(--r-s) 0; padding:13px 15px}
.cr-bloc.vigilance h4{color:var(--danger)}

.points span{display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%;
  background:var(--texte-muet); animation:pulse 1.3s infinite}
.points span:nth-child(2){animation-delay:.18s}
.points span:nth-child(3){animation-delay:.36s}
@keyframes pulse{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-4px)}}

.composer{padding:12px 22px 18px; flex-shrink:0; background:linear-gradient(transparent, var(--fond) 45%)}
.composer-int{max-width:700px; margin:0 auto}
.saisie{
  display:flex; gap:10px; align-items:flex-end; background:var(--carte);
  border:1.5px solid var(--bord); border-radius:17px; padding:7px 7px 7px 17px; box-shadow:var(--ombre);
  transition:border-color var(--transition);
}
.saisie:focus-within{border-color:var(--primaire)}
.saisie textarea{
  flex:1; resize:none; border:none; background:transparent; font-size:16px;
  padding:9px 0; max-height:150px; outline:none;
}
.envoyer{
  display:grid; place-items:center; width:var(--cible); height:var(--cible); border-radius:13px;
  background:var(--primaire); color:var(--sur-primaire); flex-shrink:0; transition:background var(--transition);
}
.envoyer:hover{background:var(--primaire-survol)}
.envoyer:disabled{opacity:.45}

/* ---------- consultations ---------- */
.ligne{
  display:flex; align-items:center; gap:14px; width:100%; min-height:var(--cible); padding:16px 18px;
  background:var(--carte); border:1px solid var(--bord); border-radius:var(--r-m);
  margin-bottom:10px; box-shadow:var(--ombre); transition:border-color var(--transition);
}
.ligne:hover{border-color:var(--primaire)}
.ligne-date{width:52px; flex-shrink:0; text-align:center; border-right:1px solid var(--bord); padding-right:12px}
.ligne-date .j{font-size:21px; font-weight:700; line-height:1}
.ligne-date .m{font-size:12px; color:var(--texte-muet); text-transform:uppercase; margin-top:3px}
.ligne-corps{flex:1; min-width:0}
.ligne-motif{font-size:15.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ligne-meta{font-size:13.5px; color:var(--texte-muet); margin-top:3px}
.chev{color:var(--texte-muet)}

/* ---------- dossier ---------- */
.dossier-tete{
  display:flex; align-items:center; gap:16px; padding:20px; background:var(--carte);
  border:1px solid var(--bord); border-radius:var(--r-m); box-shadow:var(--ombre); margin-bottom:14px;
}
.dossier-tete .initiales{width:58px; height:58px; font-size:20px}
.dossier-tete .n{font-size:20px; font-weight:700}
.dossier-tete .m{font-size:14.5px; color:var(--texte-muet); margin-top:3px}

.repli{background:var(--carte); border:1px solid var(--bord); border-radius:var(--r-m);
  box-shadow:var(--ombre); margin-bottom:11px; overflow:hidden}
.repli > summary{display:flex; align-items:center; gap:12px; min-height:var(--cible); padding:15px 18px; cursor:pointer; list-style:none}
.repli > summary::-webkit-details-marker{display:none}
.repli > summary:hover{background:var(--muet)}
.repli-titre{flex:1; font-size:15.5px; font-weight:600}
.repli-compte{font-size:13.5px; color:var(--texte-muet)}
.repli .chev{transition:transform var(--transition)}
.repli[open] > summary .chev{transform:rotate(90deg)}
.repli-corps{padding:14px 18px 16px; border-top:1px solid var(--bord)}

.obs{display:flex; gap:12px; padding:9px 0; align-items:flex-start}
.obs-puce{width:8px; height:8px; border-radius:50%; margin-top:9px; flex-shrink:0; background:var(--texte-muet)}
.obs-type{font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--texte-muet)}
.obs-txt{font-size:15.5px; line-height:1.5; margin-top:2px}
/* le type est porté par le LIBELLÉ autant que par la couleur : jamais la couleur seule */
.obs.t-alerte .obs-puce{background:var(--danger)}
.obs.t-alerte .obs-type{color:var(--danger)}
.obs.t-hypothese .obs-puce{background:var(--secondaire)}
.obs.t-traitement_propose .obs-puce{background:var(--accent)}
.obs.t-symptome .obs-puce{background:var(--primaire-vif)}

.vide{color:var(--texte-muet); font-size:15px; padding:4px 0}
.etat-vide{text-align:center; padding:58px 20px; color:var(--texte-muet)}
.etat-vide svg{width:42px; height:42px; color:var(--bord); margin-bottom:14px; stroke-width:1.5}
.etat-vide h4{color:var(--texte); font-size:17px; margin-bottom:6px}
.etat-vide p{font-size:15px; max-width:340px; margin:0 auto; line-height:1.6}

/* ===================== mobile ===================== */
.fab{display:none}
.nav-basse{display:none}

@media (max-width:860px){
  .lateral{display:none}
  .tete{padding:14px 16px}
  .conteneur{padding:22px 16px 34px}
  .fil{padding:22px 16px 10px}
  .zone-bulle{max-width:88%}
  .composer{padding:10px 14px 12px}
  .duo{grid-template-columns:1fr}

  /* Doctolib a mesuré que l'action principale en onglet n'était choisie que par 11 % des
     utilisateurs : elle sort de la barre pour devenir un bouton flottant. */
  .fab{
    display:grid; place-items:center; position:fixed; right:18px;
    bottom:calc(78px + env(safe-area-inset-bottom)); z-index:20;
    width:58px; height:58px; border-radius:50%;
    background:var(--primaire); color:var(--sur-primaire); box-shadow:var(--ombre-forte);
    transition:transform var(--transition);
  }
  .fab svg{width:27px; height:27px; stroke-width:2.4}
  .fab:active{transform:scale(.93)}

  .nav-basse{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:25;
    background:var(--carte); border-top:1px solid var(--bord);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .nav-basse button{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; min-height:var(--cible); color:var(--texte-muet); border-radius:var(--r-s);
    transition:color var(--transition);
  }
  .nav-basse span{font-size:11px; font-weight:500}
  .nav-basse button[aria-current="page"]{color:var(--primaire)}
  .nav-basse button[aria-current="page"] svg{stroke-width:2.3}

  #vue-accueil .conteneur,#vue-consultations .conteneur,#vue-dossier .conteneur{
    padding-bottom:calc(100px + env(safe-area-inset-bottom));
  }
  .composer{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  body.en-consultation .fab{display:none}
}

/* ===================== mon profil ===================== */
.bloc-form{
  background:var(--carte); border:1px solid var(--bord); border-radius:var(--r-m);
  box-shadow:var(--ombre); padding:20px; margin-bottom:14px;
}
.titre-form{font-size:16.5px; margin-bottom:4px}
.sous-form{font-size:14px; color:var(--texte-muet); margin-bottom:16px}
.titre-form + .champ, .titre-form + div, .titre-form + .duo{margin-top:16px}
.champ textarea{
  width:100%; padding:11px 14px; background:var(--carte); border:1.5px solid var(--bord);
  border-radius:var(--r-s); font-size:16px; resize:vertical; line-height:1.5;
  transition:border-color var(--transition);
}
.champ textarea:hover{border-color:var(--secondaire)}
.champ textarea:focus-visible{border-color:var(--primaire)}
.champ.erreur textarea{border-color:var(--danger)}
.confirmation{
  display:flex; align-items:center; gap:9px; padding:12px 14px; margin-bottom:16px;
  background:var(--muet); border:1px solid var(--accent); border-radius:var(--r-s);
  color:var(--accent); font-size:14.5px; font-weight:500;
}
.confirmation svg{width:19px; height:19px}

/* ===================== verrouillage ===================== */
.verrou-tete{display:flex; align-items:center; gap:14px; margin:22px 0 14px}
.verrou-icone{
  width:46px; height:46px; border-radius:13px; background:var(--muet); color:var(--primaire);
  display:grid; place-items:center; flex-shrink:0;
}
.verrou-icone svg{width:24px; height:24px}

/* ===================== hors ligne ===================== */
.bandeau-reseau{
  display:flex; align-items:center; gap:10px; padding:11px 20px;
  background:var(--muet); border-bottom:1px solid var(--bord);
  color:var(--texte-muet); font-size:14px; flex-shrink:0;
}
.bandeau-reseau svg{width:19px; height:19px; flex-shrink:0}
/* hors ligne, envoyer un message est impossible : on le montre plutôt que d'échouer en silence */
body.hors-ligne .envoyer,body.hors-ligne .carte-demarrer{opacity:.5; pointer-events:none}

/* ===================== actions de consultation ===================== */
.actions-consultation{display:flex; gap:9px; margin-bottom:9px; flex-wrap:wrap}
.action-plate{
  display:flex; align-items:center; gap:7px; min-height:38px; padding:8px 14px;
  border:1px solid var(--bord); border-radius:99px; background:var(--carte);
  color:var(--texte-muet); font-size:14px; font-weight:500; transition:.15s;
}
.action-plate:hover{border-color:var(--primaire); color:var(--primaire)}
.action-plate:disabled{opacity:.45; cursor:not-allowed}
.action-plate svg{width:17px; height:17px}

/* carte de lecture d'un document déposé — à confirmer par le patient */
.doc-lu{background:var(--carte); border:1.5px solid var(--primaire); border-radius:16px; box-shadow:var(--ombre); overflow:hidden}
.doc-tete{
  display:flex; align-items:center; gap:9px; padding:12px 17px; background:var(--muet);
  color:var(--primaire); border-bottom:1px solid var(--bord);
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.doc-corps{padding:15px 17px}
.doc-ligne{display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--bord)}
.doc-ligne:last-of-type{border-bottom:none}
.doc-ligne .cle{font-size:13px; color:var(--texte-muet); min-width:100px; flex-shrink:0}
.doc-ligne .val{font-size:15px; font-weight:500}
.doc-incertain{
  display:flex; gap:9px; margin-top:12px; padding:11px 14px; border-radius:var(--r-s);
  background:var(--danger-fond); border:1px solid var(--danger-bord); color:var(--danger); font-size:14px;
}
.doc-actions{display:flex; gap:10px; margin-top:15px}
.doc-actions .bouton{width:auto; flex:1}

/* ===================== ordonnance ===================== */
.ordo{
  background:var(--carte); border:1.5px solid var(--primaire); border-radius:16px;
  box-shadow:var(--ombre); overflow:hidden; margin-bottom:14px;
}
.ordo-tete{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:14px 18px; background:var(--muet); border-bottom:1px solid var(--bord);
}
.ordo-tete .t{font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--primaire)}
.ordo-tete .num{font-size:13px; color:var(--texte-muet); font-variant-numeric:tabular-nums}
.ordo-corps{padding:17px 18px}
.ordo-indic{font-size:14.5px; color:var(--texte-muet); margin-bottom:15px}
.ordo-ligne{padding:13px 0; border-bottom:1px solid var(--bord)}
.ordo-ligne:last-child{border-bottom:none}
.ordo-nom{font-size:16px; font-weight:650}
.ordo-dci{font-size:13.5px; color:var(--texte-muet); margin-top:1px}
.ordo-detail{font-size:14.5px; margin-top:7px; line-height:1.6}
.ordo-detail b{font-weight:600}
.ordo-ci{font-size:13.5px; color:var(--danger); margin-top:5px}
.ordo-verif{
  display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
  padding:2px 9px; border-radius:99px; background:var(--muet); color:var(--accent); margin-top:6px;
}
.ordo-verif.non{color:var(--danger); background:var(--danger-fond)}
.ordo-alertes{margin:0 18px 16px; padding:12px 15px; border-radius:var(--r-s);
  background:var(--danger-fond); border:1px solid var(--danger-bord); color:var(--danger); font-size:14px}
.ordo-pied{padding:14px 18px; border-top:1px solid var(--bord); background:var(--muet)}
.ordo-mention{font-size:13px; color:var(--texte-muet); line-height:1.55}
.ordo-mention b{color:var(--texte)}
.ordo-boutons{display:flex; gap:10px; margin-top:12px}
.ordo-boutons .bouton{width:auto; flex:1}

/* impression : seule l'ordonnance sort sur le papier */
@media print{
  body > *:not(.app), .lateral, .nav-basse, .fab, .tete, .composer, .ordo-boutons, .actions-consultation{display:none !important}
  .vue:not(.active){display:none !important}
  .ordo{border:none; box-shadow:none; page-break-inside:avoid}
  .ordo-tete{background:none; border-bottom:2px solid #000}
}