/* G/bibliotheque/web/style.css
   Repris d'Ability Intake (A/index.html, lignes 23 a 483, entre <style> et </style>).
   Les deux couleurs de marque d'Ability sont devenues des variables que formulaire.js pose depuis
   le theme du cabinet : --yf-marine (le bleu #3060B0) et --yf-accent (le vert #4E9E2E). Les
   nuances (sombre, claire, pale, vive) en derivent par color-mix ; un navigateur qui ne connait
   pas color-mix garde les valeurs d'Ability. Le reste de la charte (creme, encre, rouge, ambre)
   est neutre et reste tel quel. */
:root{
  /* Les couleurs du cabinet. Valeurs d'Ability par defaut. */
  --yf-marine:#3060B0; --yf-accent:#4E9E2E;
  --bleu:var(--yf-marine); --bleu-sombre:#274F92; --bleu-clair:#D6E2F5; --bleu-pale:#EEF3FC;
  --vert:var(--yf-accent); --vert-vif:#80E050; --vert-pale:#EAF7E0;
  --creme:#F4EDDC; --creme-clair:#FBF7EE; --creme-ligne:#DDD0AE;
  --encre:#0E130D; --encre-moyen:#28311F; --encre-doux:#54604A;
  --rouge:#A33D1F; --rouge-pale:#FBEDE8; --ambre:#C77A22;
  --blanc:#fff;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --rayon:12px; --ombre:0 1px 2px rgba(14,19,13,.06),0 8px 24px rgba(14,19,13,.06);
}
@supports (color:color-mix(in srgb,red,blue)){
  :root{
    --bleu-sombre:color-mix(in srgb,var(--yf-marine) 82%,#000);
    --bleu-clair:color-mix(in srgb,var(--yf-marine) 20%,#fff);
    --bleu-pale:color-mix(in srgb,var(--yf-marine) 8%,#fff);
    --vert-vif:color-mix(in srgb,var(--yf-accent) 70%,#fff);
    --vert-pale:color-mix(in srgb,var(--yf-accent) 11%,#fff);
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}

/* ── La coquille : en-tete fixe, contenu qui defile, barre fixe ──────────────
   La barre du bas etait en `position:fixed`. Sur un telephone, ca ne tient
   pas : Safari et Chrome mobile font grandir et retrecir la fenetre pendant
   le defilement, quand la barre d'adresse se replie. Un element fixe suit ce
   mouvement au lieu de rester colle en bas, et il tressaute.

   La seule mise en page qui ne tressaute pas est celle des applications :
   une colonne haute comme l'ecran, l'en-tete et la barre en taille fixe, et
   le contenu qui defile DANS le milieu. Plus rien n'est en `position:fixed`,
   donc plus rien ne peut se decaler.

   `100dvh` et non `100vh` : sur mobile, `vh` compte la fenetre barre
   d'adresse depliee, ce qui fait depasser la barre du bas hors de l'ecran. */
html{height:100%}
body{height:100%;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
main{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain}
body{
  background:var(--creme-clair); color:var(--encre);
  font:16px/1.55 var(--sans);

}
[hidden]{display:none!important}

/* ── Bandeau ─────────────────────────────────────────────────────────────── */
.mast{
  flex:0 0 auto; z-index:30; background:var(--blanc);
  border-bottom:1px solid var(--creme-ligne);
  padding:10px 16px calc(10px + env(safe-area-inset-top)) 16px;
  padding-top:calc(10px + env(safe-area-inset-top));
}
.mast-in{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:12px}
.mast img{width:38px;height:38px;border-radius:50%;flex:0 0 auto}
.mast-t{font:600 14px/1.2 var(--sans);color:var(--bleu-sombre)}
.mast-s{font:12px/1.3 var(--sans);color:var(--encre-doux)}
.pastilles{display:flex;gap:3px;max-width:720px;margin:10px auto 0}
.pastilles i{flex:1;height:4px;border-radius:99px;background:var(--bleu-clair);
  transition:background .35s ease,transform .35s ease}
.pastilles i.faite{background:var(--vert)}
.pastilles i.encours{background:var(--bleu);transform:scaleY(1.9)}
.jauge{display:none;height:4px;background:var(--bleu-clair);border-radius:99px;overflow:hidden;margin-top:10px;max-width:720px;margin-left:auto;margin-right:auto}
.jauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--bleu),var(--vert));transition:width .45s cubic-bezier(.22,1,.36,1)}
.compte{max-width:720px;margin:6px auto 0;display:flex;justify-content:space-between;font:12px/1 var(--sans);color:var(--encre-doux)}

/* ── Structure ───────────────────────────────────────────────────────────── */
main>*{max-width:720px;margin-left:auto;margin-right:auto}
main{padding:14px 13px 22px}

/* ── Format telephone d'abord ─────────────────────────────────────────────
   Le formulaire vit sur une tablette tenue en portrait et sur le telephone du
   patient. Les tailles sont donc reglees pour le pouce et pour un ecran de
   trois cent quatre-vingt-dix pixels, pas pour un ecran de bureau qu'on
   retrecirait ensuite.

   On descend d'un demi-point partout plutot que d'un point sur une seule
   chose : c'est la somme des interlignes qui allonge une page, pas la taille
   d'un titre. Rien ne passe sous 13 pixels, en-dessous on ne lit plus, on
   devine. */

/* ── Le rythme vertical ─────────────────────────────────────────────────────
   Repris de BCB, ou les cartes sont plus denses. Avec treize etapes courtes,
   l'air entre les champs ne rassure plus, il allonge : chaque etape doit
   tenir sous le pouce sans defilement inutile. */
h1{font:600 27px/1.2 var(--serif);color:var(--bleu-sombre);margin:0 0 10px}
h2{font:600 20px/1.2 var(--serif);color:var(--bleu-sombre);margin:0 0 2px;text-wrap:balance}
.chapeau{color:var(--encre-doux);font-size:13.5px;line-height:1.4;margin:0 0 12px;max-width:56ch}
.carte{background:var(--blanc);border:1px solid var(--creme-ligne);border-radius:11px;padding:13px 13px;margin:0 0 10px;box-shadow:var(--ombre)}
.carte>h3{font:600 11px/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--vert);margin:0 0 10px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trio{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
@media(max-width:520px){.duo,.trio{grid-template-columns:1fr}}

/* ── Champs ──────────────────────────────────────────────────────────────── */
.champ{margin:0 0 10px}
/* Chaque etape entre par la droite : le patient voit qu'il a avance, sans
   avoir a relire le titre pour s'en convaincre. */
/* ── Les animations ───────────────────────────────────────────────────────────
   Trois seulement, et courtes. Un formulaire medical de vingt minutes n'a pas
   besoin d'etre spectaculaire : il a besoin de dire au patient qu'il avance.

   1. L'etape entre par la droite : on a avance, on ne s'est pas perdu.
   2. La reponse touchee fait un petit ressaut : le doigt a porte.
   3. La pastille de l'etape se remplit en glissant : le chemin se boucle.

   Rien ne depasse trois dixiemes de seconde. Une animation qu'on attend est
   une animation qui coute du temps de remplissage. */
section[id^=et_]:not([hidden]){animation:entree .3s cubic-bezier(.22,1,.36,1) both}
@keyframes entree{
  from{opacity:0;transform:translate3d(18px,0,0)}
  to{opacity:1;transform:none}
}

/* Le ressaut de la reponse. Pose par JS, retire a la fin, pour qu'il rejoue
   a chaque fois et pas seulement au premier clic. */
.chip.pop{animation:pop .26s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(1)}42%{transform:scale(1.11)}100%{transform:scale(1)}}
.chip:active{transform:scale(.96)}

/* La pastille franchie se remplit par la gauche. */
.pastilles i{position:relative;overflow:hidden}
.pastilles i.faite::after{content:'';position:absolute;inset:0;background:var(--vert);
  transform-origin:left;animation:remplir .34s cubic-bezier(.22,1,.36,1) both}
@keyframes remplir{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* La coche de fin, quand le dossier est parti. */
.coche svg{animation:trace .5s cubic-bezier(.22,1,.36,1) .1s both}
@keyframes trace{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  section[id^=et_]:not([hidden]),.chip.pop,.pastilles i.faite::after,.coche svg{animation:none}
  .pastilles i{transition:none}
  .chip:active{transform:none}
}
.champ:last-child{margin-bottom:0}
/* La question et la reponse ne peuvent pas avoir la meme voix. Tout au meme
   poids, l'oeil ne sait plus ce qu'on lui demande et ce qu'on lui propose :
   la question passe en gras et en encre pleine, les reponses restent plus
   legeres. C'est ce qui permet de balayer une etape sans la lire. */
label,.etiq{display:block;font:600 14px/1.35 var(--sans);color:var(--encre);margin:0 0 6px}
.chip{font-weight:500;color:var(--encre-moyen)}
input,select{font-weight:400}
.aide{font:12px/1.4 var(--sans);color:var(--encre-doux);margin:-2px 0 6px}
.oblig{color:var(--rouge);font-weight:600}
/* 16 pixels, et pas moins : sous ce seuil, Safari sur iPhone zoome la page
   des qu'on touche un champ, et le patient se retrouve a devoir la
   repositionner apres chaque saisie. C'est la seule taille du formulaire
   qu'on ne descend pas. */
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  width:100%;padding:10px 12px;font:16px/1.4 var(--sans);color:var(--encre);
  background:var(--blanc);border:1.5px solid var(--creme-ligne);border-radius:9px;
  appearance:none;transition:border-color .15s,box-shadow .15s;
}
textarea{min-height:76px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--bleu);box-shadow:0 0 0 3px var(--bleu-pale)}
input.err,select.err,textarea.err{border-color:var(--rouge);background:var(--rouge-pale)}
.msg-err{display:none;color:var(--rouge);font:12.5px/1.4 var(--sans);margin-top:5px}
.msg-err.on{display:block}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2354604A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}

/* ── Chips et segments ───────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:5px}
/* ── La reponse parle moins fort que la question ─────────────────────────────
   Les puces sont devenues la surface dominante du formulaire : deux cent
   cinquante d'entre elles a l'ecran. A la meme taille que les questions,
   elles saturaient la page et donnaient l'impression d'un mur a lire.

   Douze et demi contre quatorze pour la question : l'ecart est petit, mais il
   suffit a ce que l'oeil sache dans quel ordre lire. Les questions ne bougent
   pas d'un point. */
.chip{
  font:500 12.5px/1.15 var(--sans);color:var(--encre-moyen);background:var(--blanc);
  border:1.5px solid var(--creme-ligne);border-radius:99px;padding:7px 11px;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,transform .12s;
}
.chip:active{transform:scale(.97)}
.chip.on{background:var(--bleu);border-color:var(--bleu);color:#fff}
.chips.err .chip{border-color:var(--rouge)}
/* Suggestions : des chips qui ecrivent dans la zone de texte en dessous.
   Elles ne remplacent pas la reponse du patient, elles l'amorcent. */
.chips.suggest{margin:0 0 9px}
.chips.suggest .chip{font-size:13px;padding:8px 12px}
.chips.suggest .chip.on{background:var(--vert-pale);border-color:var(--vert);color:var(--encre-moyen)}
.rangee-aucun{margin:0 0 8px}
/* « None » se distingue des suggestions : c'est une reponse qui les annule. */
.chip.aucun{border-style:dashed;color:var(--encre-doux)}
.chip.aucun.on{background:var(--vert);border-color:var(--vert);border-style:solid;color:#fff}
.chips .chip:disabled{opacity:.4;cursor:default}
/* La regle des onze : jusqu'a onze reponses previsibles, des chips. */
input::placeholder,textarea::placeholder{text-transform:none}
/* La banniere d'installation, posee au-dessus de la barre du bas. */
.installe{flex:0 0 auto;margin:0 10px 10px;background:var(--bleu-sombre);color:#fff;
  border-radius:11px;padding:11px 13px;box-shadow:0 6px 20px rgba(14,19,13,.22);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.installe-t{flex:1 1 190px;font:13.5px/1.4 var(--sans)}
.installe-t b{font-weight:700}
.installe-b{display:flex;gap:7px}
.installe .mini{border-color:rgba(255,255,255,.5);color:#fff;background:transparent;
  padding:8px 12px;font-size:12.5px}
.installe .mini.plein{background:#fff;color:var(--bleu-sombre);border-color:#fff}
/* Les puces de reponse, et la boite pour ce qui n'y figure pas. */
.chips.rep{margin:0 0 2px}
.chips.rep .chip{font-size:12.5px;padding:7px 11px}
.chip-autre{border-style:dashed;color:var(--bleu);border-color:var(--bleu-clair)}
.chip-libre{background:var(--vert);border-color:var(--vert);color:#fff}
.chip-libre span{opacity:.75;margin-left:3px}
.boite-autre{background:var(--blanc);border-radius:var(--rayon);padding:18px;
  width:100%;max-width:420px;display:flex;flex-direction:column;gap:12px}
.boite-t{font:600 16px/1.35 var(--sans);color:var(--encre);margin:0}
#autreTexte{width:100%;padding:13px 12px;border:1.5px solid var(--creme-ligne);
  border-radius:9px;font:15px var(--sans);color:var(--encre);background:var(--blanc)}
#autreTexte:focus{outline:none;border-color:var(--bleu)}
.boite-b{display:flex;gap:9px;align-items:center}
.boite-b .btn{flex:1;margin:0}
/* Le recapitulatif de ce qui manque : il doit se voir sans etre une punition. */
.bilan{background:var(--rouge-pale);border:1.5px solid var(--rouge);border-radius:var(--rayon);
  padding:14px 15px;margin:0 0 14px}
.bilan-t{font:600 15px/1.35 var(--sans);color:var(--rouge);margin:0 0 9px}
.bilan-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bilan-b{width:100%;text-align:left;background:var(--blanc);border:1px solid var(--creme-ligne);
  border-radius:8px;padding:9px 11px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.bilan-b b{font:600 14px/1.3 var(--sans);color:var(--encre)}
.bilan-b span{font:12.5px/1.35 var(--sans);color:var(--encre-doux)}
.bilan-b:active{transform:scale(.99)}
/* La secousse : le bandeau qui reapparait au meme endroit avec le meme texte
   passait inapercu quand le patient reappuyait sur Continue sans rien changer.
   Il bouge maintenant a chaque refus. */
@keyframes secousse{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}
  30%{transform:translateX(8px)}45%{transform:translateX(-6px)}60%{transform:translateX(6px)}
  75%{transform:translateX(-3px)}90%{transform:translateX(3px)}}
.secousse{animation:secousse .45s ease-out}
@media (prefers-reduced-motion:reduce){.secousse{animation:none}}
/* Le champ vers lequel on vient de sauter clignote une fois. */
.vise{animation:vise 1.5s ease}
@keyframes vise{0%,100%{box-shadow:none}18%,60%{box-shadow:0 0 0 4px var(--bleu-clair)}}
@media (prefers-reduced-motion:reduce){ .vise{animation:none} }
/* Le numero et « peut-on laisser un message » sur la meme ligne. */
.champ.avec-msg{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.champ.avec-msg .avec-msg-c{min-width:0}
.champ.avec-msg .avec-msg-r{padding-bottom:1px}
.champ.avec-msg .msg-err{grid-column:1/-1}
.mini-etiq{font-size:11.5px !important;color:var(--encre-doux)}
.aide.calcule{color:var(--vert);font-weight:500;margin-top:5px}
@media (max-width:560px){
  .champ.avec-msg{grid-template-columns:1fr;gap:7px}
}
.chips.liste-chips{margin:0 0 4px}
.chips.liste-chips .chip{font-size:12.5px;padding:7px 11px}
/* Au-dela de onze, une liste que la saisie filtre. */
.combo{position:relative}
.combo-liste{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:2px;
  background:var(--blanc);border:1.5px solid var(--bleu);border-radius:9px;
  max-height:236px;overflow-y:auto;box-shadow:var(--ombre);display:none}
.combo.on .combo-liste{display:block}
.combo-item{display:block;width:100%;text-align:left;border:0;background:none;
  padding:11px 13px;font:14.5px/1.3 var(--sans);color:var(--encre-moyen);cursor:pointer;
  border-bottom:1px solid var(--creme-clair)}
.combo-item:last-child{border-bottom:0}
.combo-item:hover{background:var(--bleu-pale)}
.combo-item b{color:var(--bleu);font-weight:700}
.combo-vide{padding:11px 13px;font:13px/1.4 var(--sans);color:var(--encre-doux)}
/* Les barres segmentees ont ete retirees le 2026-09-07. Cinq boutons colles
   bord a bord dans un cadre se lisent comme un tableau, pas comme un choix,
   et sur un telephone chacun faisait quarante pixels de large pour un mot de
   douze lettres. Ce sont des puces comme partout ailleurs. */
@media(max-width:520px){.seg{flex-wrap:wrap}.seg button{flex:1 0 33%;border-bottom:1px solid var(--creme-ligne)}}
.ouinon{display:flex;gap:8px}
.ouinon .chip{flex:0 0 auto;min-width:78px;text-align:center}
.ouinon .chip.on[data-v="No"]{background:var(--encre-doux);border-color:var(--encre-doux)}

/* ── Cases a cocher ──────────────────────────────────────────────────────── */
.case{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border:1.5px solid var(--creme-ligne);border-radius:9px;background:var(--blanc);cursor:pointer;margin:0 0 9px}
.case.on{border-color:var(--vert);background:var(--vert-pale)}
.case .bx{flex:0 0 20px;width:20px;height:20px;border:2px solid var(--creme-ligne);border-radius:5px;margin-top:1px;position:relative;background:#fff}
.case.on .bx{background:var(--vert);border-color:var(--vert)}
.case.on .bx:after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.case span{font:14.5px/1.45 var(--sans);color:var(--encre-moyen)}
.grille-cases{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:600px){.grille-cases{grid-template-columns:1fr}}
.grille-cases .case{margin:0}

/* ── Conditionnels ───────────────────────────────────────────────────────── */
.si{display:none;margin-top:12px;padding-left:13px;border-left:3px solid var(--bleu-clair)}
.si.on{display:block;animation:ouvre .22s ease}
@keyframes ouvre{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ── Photos ──────────────────────────────────────────────────────────────── */
/* Cinq blocs identiques empiles sur 974 pixels, avec dix boutons, sont
   devenus une grille de vignettes et un seul bouton qui ouvre la camera une
   fois pour les cinq. « Choose a file » a disparu : sur une tablette
   d'accueil, la carte du patient est dans sa main, pas dans un dossier. */
.photo-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.photo{border:2px dashed var(--creme-ligne);border-radius:10px;padding:10px;text-align:center;
  background:var(--blanc);cursor:pointer;display:flex;flex-direction:column;gap:6px;
  align-items:center;justify-content:flex-start;min-height:128px}
.photo.on{border-style:solid;border-color:var(--vert);background:var(--vert-pale)}
.photo img{width:100%;height:74px;object-fit:cover;border-radius:6px;display:block}
.photo-vide{width:100%;height:74px;border-radius:6px;background:var(--creme-clair);
  display:flex;align-items:center;justify-content:center;font:600 22px var(--sans);
  color:var(--creme-ligne)}
.photo.on .photo-vide{background:transparent}
.photo-t{font:500 12.8px/1.25 var(--sans);color:var(--encre-moyen);margin:0}
.photo-e{font:11.5px/1.2 var(--sans);color:var(--encre-doux)}
.photo.on .photo-e{color:var(--vert);font-weight:600}

.mini{font:500 13.5px/1 var(--sans);padding:10px 14px;border-radius:8px;border:1.5px solid var(--bleu);color:var(--bleu);background:var(--blanc);cursor:pointer}
.mini.plein{background:var(--bleu);color:#fff}
.mini.rouge{border-color:var(--rouge);color:var(--rouge)}
input[type=file]{display:none}
input[type=file].photo-input{display:block;position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;pointer-events:none}
.photo-inputs{position:relative;height:0;overflow:hidden}
label.photo{margin:0}

/* ── Viseur des cartes (2026-09-28) ──────────────────────────────────────── */
/* Les praticiens photographiaient les cartes de travers, de loin, avec la
   moitie du comptoir autour. Pour les quatre faces de cartes seulement (pas
   la photo du patient), un apercu camera plein ecran montre un cadre au
   format ID-1 (85,6 x 54 mm), assombrit le reste, et la photo est recadree
   sur ce cadre. Le cadre est place en JS (placerCadre) pour suivre la
   rotation de la tablette. */
.cam{position:fixed;inset:0;z-index:9000;background:#000;color:#fff;overflow:hidden;
  font-family:var(--sans);touch-action:none}
.cam[hidden]{display:none}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.cam-cadre{position:absolute;border-radius:14px;box-shadow:0 0 0 200vmax rgba(0,0,0,.58);
  outline:1.5px solid rgba(255,255,255,.55);pointer-events:none}
.cam-coin{position:absolute;width:30px;height:30px;border:4px solid #fff}
.cam-coin.hg{left:-3px;top:-3px;border-right:0;border-bottom:0;border-top-left-radius:14px}
.cam-coin.hd{right:-3px;top:-3px;border-left:0;border-bottom:0;border-top-right-radius:14px}
.cam-coin.bg{left:-3px;bottom:-3px;border-right:0;border-top:0;border-bottom-left-radius:14px}
.cam-coin.bd{right:-3px;bottom:-3px;border-left:0;border-top:0;border-bottom-right-radius:14px}
.cam-haut{position:absolute;left:0;right:0;top:0;padding:max(14px,env(safe-area-inset-top)) 16px 10px;
  text-align:center;pointer-events:none}
.cam-titre{font:600 16px/1.3 var(--sans);margin:0}
.cam-consigne{font:500 15px/1.35 var(--sans);margin:4px 0 0;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8)}
.cam-bas{position:absolute;left:0;right:0;bottom:0;padding:12px 16px max(18px,env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.cam-btn{font:600 14px/1 var(--sans);color:#fff;background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.6);border-radius:22px;padding:11px 16px;cursor:pointer;
  min-width:92px;text-align:center}
.cam-btn[hidden]{display:none}
.cam-declencheur{width:74px;height:74px;border-radius:50%;border:5px solid #fff;
  background:rgba(255,255,255,.25);cursor:pointer;flex:none;padding:0}
.cam-declencheur:active{background:#fff}
.cam-declencheur:disabled{opacity:.4}
.cam-apercu{position:absolute;inset:0;background:#111;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:20px}
.cam-apercu[hidden]{display:none}
.cam-apercu img{max-width:92%;max-height:62%;border-radius:10px;border:2px solid #fff;background:#fff}
.cam-apercu .rang{display:flex;gap:14px}
.cam-err{position:absolute;inset:0;background:#111;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:28px;text-align:center}
.cam-err[hidden]{display:none}
.cam-err p{font:500 15px/1.45 var(--sans);max-width:420px;margin:0}
label.cam-btn{display:inline-block}
.cam-btn:disabled{opacity:.4;cursor:default}
/* ── Viseur de la silhouette (repris d'AP/index.html 379-397) ─────────────── */
/* La photo du patient passe par le meme calque que les cartes (camera.js,
   cadre "silhouette") : camera frontale, cadre photo d'identite et une
   silhouette tete et epaules a suivre. L'apercu video est en miroir, comme
   toute camera frontale ; la photo enregistree ne l'est pas. */
.cam.selfie video{transform:scaleX(-1)}
.cam-silhouette{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none;overflow:visible}
.cam.selfie .cam-silhouette{display:block}
.cam-silhouette ellipse,.cam-silhouette path{fill:none;stroke:rgba(255,255,255,.8);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cam-attente{display:flex;align-items:center;gap:10px;font:500 15px/1.3 var(--sans);margin:0}
.cam-attente[hidden]{display:none}
.cam-roue{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:camRoue .8s linear infinite;flex:none}
@keyframes camRoue{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cam-roue{animation:none}}
.cam-apercu.attente img{opacity:.45}
/* Telephone en paysage : la hauteur manque. Les boutons passent en colonne a
   droite, le titre se resserre, et le cadre gagne la hauteur liberee. */
@media (orientation:landscape) and (max-height:520px){
  .cam-haut{right:112px;padding-top:max(8px,env(safe-area-inset-top))}
  .cam-titre{font-size:14px}
  .cam-consigne{font-size:13.5px;margin-top:2px}
  .cam-bas{left:auto;top:0;width:112px;flex-direction:column;justify-content:center;
    padding:10px max(10px,env(safe-area-inset-right)) 10px 10px}
  .cam-btn{min-width:0;padding:9px 12px}
}

/* ── Signature ───────────────────────────────────────────────────────────── */
.pad{position:relative;border:1.5px solid var(--creme-ligne);border-radius:9px;background:var(--blanc);height:170px;overflow:hidden;touch-action:none}
.pad.on{border-color:var(--vert)}
.pad canvas{width:100%;height:100%;display:block;touch-action:none}
.pad-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#B8B39E;font:16px var(--serif);pointer-events:none}
.pad.on .pad-ph{display:none}
.pad-l{position:absolute;left:16px;right:16px;bottom:38px;border-bottom:1px solid var(--creme-ligne);pointer-events:none}

/* ── Le pave legal ───────────────────────────────────────────────────────── */
.legal{border:1.5px solid var(--creme-ligne);border-radius:var(--rayon);background:var(--blanc);overflow:hidden}
/* ── Un seul defilement ──────────────────────────────────────────────────────
   Les sept documents vivaient dans une boite qui defilait toute seule, au
   milieu d'une page qui defilait aussi. Deux barres, deux gestes, et le pouce
   qui accroche la mauvaise : arrive au bas de la boite, le patient devait en
   sortir pour continuer la page, et pour revenir il devait y rentrer.

   Ils sont maintenant dans le flux, comme le reste. Un seul defilement, du
   haut de l'etape au bouton de signature. La lecture se mesure sur la
   position de la page, plus sur celle d'une boite. */
.legal-def{padding:16px}
.legal-ou{position:sticky;top:-1px;z-index:2;background:var(--bleu-pale);
  border-bottom:1px solid var(--bleu-clair);padding:9px 14px;
  font:600 12.5px/1.3 var(--sans);color:var(--bleu-sombre);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legal-def h4{font:600 15px/1.3 var(--serif);color:var(--bleu-sombre);margin:22px 0 2px}
.legal-def h4:first-child{margin-top:0}
.legal-def .st{font:12px/1.3 var(--sans);color:var(--encre-doux);margin:0 0 9px;text-transform:uppercase;letter-spacing:.05em}
.legal-def p{font:13.5px/1.6 var(--sans);color:var(--encre-moyen);margin:0 0 9px}
.legal-def li{font:13.5px/1.6 var(--sans);color:var(--encre-moyen);margin:0 0 6px}
.legal-def ul{margin:0 0 10px;padding-left:19px}
.legal-pied{position:sticky;bottom:-1px;z-index:2;border-top:1px solid var(--creme-ligne);
  padding:10px 14px;background:var(--creme-clair);display:flex;align-items:center;gap:10px}
.legal-jauge{flex:1;height:5px;background:var(--bleu-clair);border-radius:99px;overflow:hidden}
.legal-jauge i{display:block;height:100%;width:0;background:var(--vert);transition:width .12s linear}
.legal-etat{font:600 12px/1 var(--sans);color:var(--encre-doux);white-space:nowrap}
.legal-etat.lu{color:var(--vert)}
.case.bloque{opacity:.5;pointer-events:none}

/* ── Recapitulatif ───────────────────────────────────────────────────────── */
.recap{border:1px solid var(--creme-ligne);border-radius:var(--rayon);overflow:hidden;background:var(--blanc)}
.recap-l{font:14.5px/1.5 var(--sans);color:var(--encre-moyen);padding:3px 0;border:0;display:block}
.rappel-partage{background:var(--bleu-pale);border:1px solid var(--bleu-clair);
  border-radius:9px;padding:11px 13px;margin:0 0 4px;
  font:13.5px/1.45 var(--sans);color:var(--bleu-sombre)}
.rappel-partage .lien{margin-left:6px}
.recap-vieux{display:flex;justify-content:space-between;gap:12px;padding:10px 13px;border-bottom:1px solid var(--creme-clair);font-size:14px}
.recap-l:last-child{border-bottom:0}
.recap-l b{font:500 13px/1.4 var(--sans);color:var(--encre-doux);flex:0 0 42%}
.recap-l span{text-align:right;color:var(--encre)}
.lien{background:none;border:0;color:var(--bleu);font:500 13.5px var(--sans);text-decoration:underline;cursor:pointer;padding:0}

/* ── Barre d'action ──────────────────────────────────────────────────────── */
/* ── La barre d'action ───────────────────────────────────────────────
   Fond plein plutot que translucide : le flou coutait cher a chaque image de
   defilement sur une tablette d'entree de gamme, et laissait deviner le texte
   dessous, ce qui brouillait la lecture du bouton. « Back » se contente de
   sa largeur, « Continue » prend le reste : c'est lui qu'on vise du pouce. */
.barre{flex:0 0 auto;z-index:40;background:var(--blanc);
  border-top:1px solid var(--creme-ligne);
  box-shadow:0 -2px 14px rgba(14,19,13,.06);
  padding:10px 13px calc(10px + env(safe-area-inset-bottom))}
.barre-in{max-width:720px;margin:0 auto;display:flex;gap:9px;align-items:stretch}
.btn{flex:1;padding:15px 18px;font:600 16px/1 var(--sans);border:0;border-radius:10px;cursor:pointer;transition:transform .12s,opacity .15s}
#btnPrec{flex:0 0 auto;min-width:86px;padding-left:16px;padding-right:16px}
.btn:active{transform:scale(.985)}
.btn-p{background:var(--bleu);color:#fff}
.btn-p:disabled{opacity:.5;cursor:not-allowed}
.btn-s{flex:0 0 auto;background:var(--blanc);color:var(--encre-moyen);border:1.5px solid var(--creme-ligne);padding:15px 20px}

/* ── Ecrans pleins ───────────────────────────────────────────────────────── */
.plein{text-align:center;padding:44px 20px}
.plein h2{font-size:24px;margin-bottom:10px}
.plein p{color:var(--encre-doux);max-width:430px;margin:0 auto 18px;font-size:15px}
.anneau{width:132px;height:132px;margin:0 auto 22px;position:relative}
.anneau svg{transform:rotate(-90deg)}
.anneau .fond{stroke:var(--bleu-clair)}
.anneau .arc{stroke:var(--bleu);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:0}
.anneau b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 30px var(--serif);color:var(--bleu-sombre)}
.coche{width:76px;height:76px;margin:0 auto 18px;border-radius:50%;background:var(--vert-pale);display:flex;align-items:center;justify-content:center}
.coche svg{stroke:var(--vert);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ── Divers ──────────────────────────────────────────────────────────────── */
.note{background:var(--creme);border-left:3px solid var(--vert);border-radius:0 9px 9px 0;padding:12px 14px;font:13.5px/1.5 var(--sans);color:var(--encre-moyen);margin:0 0 16px}
.note.rouge{background:var(--rouge-pale);border-left-color:var(--rouge)}
.note.staff{background:#FFF6E5;border-left-color:var(--ambre)}
.sauve{position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--encre-moyen);color:#fff;font:500 13px var(--sans);padding:9px 15px;border-radius:99px;opacity:0;pointer-events:none;transition:all .3s;z-index:50}
.sauve.on{opacity:1;transform:translateX(-50%) translateY(0)}
.modale{position:fixed;inset:0;z-index:100;background:rgba(14,19,13,.9);display:none;flex-direction:column;align-items:center;justify-content:center;padding:18px}
.modale.on{display:flex}
.modale video{width:100%;max-width:540px;border-radius:var(--rayon);background:#000}
.modale p{color:#fff;font:14.5px/1.5 var(--sans);text-align:center;max-width:430px;margin:14px auto}
.ligne-dyn{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:0 0 8px;align-items:start}
.sup{background:none;border:1.5px solid var(--creme-ligne);border-radius:8px;color:var(--rouge);font-size:19px;line-height:1;padding:9px 13px;cursor:pointer}
.hors-ligne{background:var(--ambre);color:#fff;text-align:center;font:500 13px var(--sans);padding:8px 14px}

/* ── Bibliotheque : ce que les composants ajoutent ─────────────────────────
   Le texte de « Other » s'ouvre sous les chips, au lieu de la boite modale
   d'Ability : une seule colonne, le clavier vient tout de suite. */
.autre-texte{margin-top:7px}
.adresse .mini{margin:0 0 9px}
.adresse .champ{margin:0 0 8px}
.lignes .mini{margin-top:2px}
.lignes .ligne-dyn .chips{margin:0}
@media(max-width:520px){.lignes .ligne-dyn{grid-template-columns:1fr auto!important}}
.pad.err{border-color:var(--rouge);background:var(--rouge-pale)}
.signature .lien{margin-top:6px}