/* ===================================================================
   AEMERA · formulaires, design 2026
   formulaire-prise-de-sang, formulaire-symptome, formulaire-bilan.
   RÈGLE : présentation uniquement. Aucune propriété `display` n'est
   posée sur les éléments que les scripts affichent ou masquent
   (.ecran, .err, .fin, [data-showif], inputs [hidden]) : leur logique
   reste celle d'origine. Aucun champ, libellé, name ni value modifié.
   =================================================================== */

body{background:var(--a-bg);color:var(--a-ink);font-family:var(--f-body);font-size:17px;line-height:1.55}
p{max-width:none}
.wrap{max-width:700px;padding:0 var(--a-gutter) 72px}

/* En-tête du formulaire, collant, avec la progression */
.head{position:sticky;top:0;z-index:20;margin:0 calc(-1 * var(--a-gutter));padding:16px var(--a-gutter) 14px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.brand{font-family:var(--f-body);font-weight:600;font-size:15px;letter-spacing:.24em;color:var(--a-forest)}
.steps{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--a-forest);
  background:var(--a-sage-pale);padding:5px 9px}
.bar{height:4px;border-radius:0;background:var(--a-line);margin:0 0 28px}
.bar i{border-radius:0;background:var(--a-forest)}

h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2.1rem,6vw,3rem);line-height:1.02;letter-spacing:-.025em;color:var(--a-forest);margin-bottom:12px;text-wrap:balance}
.sub{font-size:17px;line-height:1.55;color:var(--a-ink-soft);opacity:1;margin-bottom:18px}
.trust{background:var(--a-paper);border:0;border-left:3px solid var(--a-forest);border-radius:0;padding:14px 16px;font-size:15px;line-height:1.5;gap:10px}
.trust strong{color:var(--a-forest)}
.urgence{font-family:var(--f-body);font-style:normal;font-size:14px;color:var(--a-ink-soft);margin-top:10px}
.encadre{background:var(--a-sage-pale);border-radius:0;padding:14px 16px;font-size:15px;line-height:1.5;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.encadre strong{color:var(--a-forest)}

/* Titre d'étape */
.etitre{font-family:var(--f-display);font-weight:400;font-size:clamp(1.6rem,4.5vw,2.05rem);line-height:1.1;letter-spacing:-.015em;color:var(--a-forest);
  margin:30px 0 10px;padding-top:22px;border-top:1.5px solid var(--a-forest)}
.eintro{font-size:16px;color:var(--a-ink-soft);opacity:1;margin-bottom:22px}

/* Champs */
.champ{margin-bottom:26px}
label.lab{font-family:var(--f-body);font-weight:600;font-size:16.5px;line-height:1.4;color:var(--a-ink);margin-bottom:10px}
.fac{font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.04em;color:var(--a-ink-soft)}
.aide{font-size:14px;color:var(--a-ink-soft);margin-top:8px}
input[type=text],input[type=number],input[type=email],textarea{min-height:54px;padding:14px 16px;font-size:17px;font-family:var(--f-body);
  border:0;border-bottom:2px solid var(--a-mute);border-radius:0;background:var(--a-paper);color:var(--a-ink);transition:border-color .2s,background-color .2s}
input[type=text]:hover,input[type=number]:hover,input[type=email]:hover,textarea:hover{border-bottom-color:var(--a-sage-deep)}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--a-forest);background:#fff;box-shadow:0 0 0 1px var(--a-line)}
textarea{min-height:110px;line-height:1.5}
::placeholder{color:#8C8983}

/* Choix : rectangles francs, grande surface cliquable */
.chips{gap:10px}
.chips label{min-height:50px;display:inline-flex;align-items:center;padding:12px 18px;border:1.5px solid var(--a-mute);border-radius:0;background:#fff;font-size:16px;
  transition:border-color .2s,background-color .2s,color .2s}
.chips label:hover{border-color:var(--a-forest)}
.chips label:has(input:checked){background:var(--a-forest);border-color:var(--a-forest);color:#fff;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%)}
.chips label:has(input:focus-visible),.tri-o label:has(input:focus-visible),.cartes label:has(input:focus-visible){outline:2px solid var(--a-forest);outline-offset:2px}

.tri{padding:14px 0;border-bottom:1px solid var(--a-line);gap:14px;flex-wrap:wrap}
.tri-q{font-size:16px;min-width:200px}
.tri-o{gap:6px}
.tri-o label{min-height:42px;display:inline-flex;align-items:center;padding:8px 13px;border:1.5px solid var(--a-mute);border-radius:0;background:#fff;font-size:14.5px;transition:border-color .2s,background-color .2s}
.tri-o label:hover{border-color:var(--a-forest)}
.tri-o label:has(input:checked){background:var(--a-forest);border-color:var(--a-forest);color:#fff}

.cartes{gap:10px}
.cartes label{border:1.5px solid var(--a-line);border-left:4px solid var(--a-line);border-radius:0;background:#fff;padding:16px 18px;transition:border-color .2s,background-color .2s}
.cartes label:hover{border-color:var(--a-sage);border-left-color:var(--a-sage)}
.cartes label:has(input:checked){border-color:var(--a-forest);border-left-color:var(--a-forest);background:var(--a-sage-pale)}
.cartes .ct{font-family:var(--f-display);font-weight:400;font-size:21px;line-height:1.2;color:var(--a-forest);margin-bottom:4px}
.cartes .cd{font-size:15px;color:var(--a-ink-soft);opacity:1}

.slider input[type=range]{accent-color:var(--a-forest)}
.sval{font-family:var(--f-mono);font-size:20px;color:#fff;background:var(--a-forest);border:0;border-radius:0;min-width:58px;padding:8px 0}

details.info{background:var(--a-paper);border:0;border-radius:0;padding:10px 14px;margin-top:10px}
details.info summary{font-family:var(--f-body);font-weight:600;font-size:14.5px;color:var(--a-forest);display:flex;align-items:center;gap:8px}
details.info summary:before{content:'';width:16px;height:16px;flex:none;background:var(--a-forest);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='.75' y='.75' width='14.5' height='14.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M8 7v5M8 4v1.2' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='.75' y='.75' width='14.5' height='14.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M8 7v5M8 4v1.2' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}
details.info p{font-size:15px;color:var(--a-ink-soft);opacity:1;margin-top:8px}
details.info .src{font-family:var(--f-mono);font-size:11.5px;color:var(--a-sage-deep)}

/* Dépôt de fichiers */
.upzone{border:1.5px dashed var(--a-sage-deep);border-radius:0;background:var(--a-paper);padding:22px 16px}
.upzone p{font-size:14.5px;color:var(--a-ink-soft)}
.btn2{min-height:50px;font-family:var(--f-body);font-weight:600;font-size:15.5px;color:var(--a-forest);border:1.5px solid var(--a-forest);background:#fff;border-radius:0;padding:12px 18px;
  transition:background-color .2s,color .2s}
.btn2:hover{background:var(--a-forest);color:#fff}
.flist li{background:#fff;border:1px solid var(--a-line);border-radius:0;font-size:14.5px;padding:10px 12px}
.flist button{color:var(--a-ink-soft);font-size:18px;min-width:36px;min-height:36px}
.compteur{font-family:var(--f-mono);font-size:12px;color:var(--a-ink-soft)}

/* Consentement */
.consent{background:var(--a-paper);border:0;border-left:3px solid var(--a-forest);border-radius:0;padding:16px;gap:14px}
.consent input{width:24px;height:24px;accent-color:var(--a-forest);flex:none}
.consent span{font-size:15.5px;line-height:1.5}

/* Navigation entre les écrans */
.nav{gap:12px;margin-top:32px;position:sticky;bottom:0;z-index:15;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(rgba(255,255,255,0),#fff 22%)}
.bp,.bs{min-height:58px;font-family:var(--f-body);font-weight:600;font-size:17px;border-radius:0;padding:14px 20px}
.bp{background:linear-gradient(var(--a-sage-deep),var(--a-sage-deep)) no-repeat left/0% 100%,var(--a-forest);color:#fff;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);transition:background-size .45s var(--ease)}
.bp:hover:not(:disabled){background-size:100% 100%,auto}
.bs{background:#fff;border:1.5px solid var(--a-mute);color:var(--a-ink);transition:border-color .2s}
.bs:hover{border-color:var(--a-forest)}

.err{font-size:14.5px;font-weight:600;color:#9A3A2A;padding-left:10px;border-left:3px solid #9A3A2A}
.rgpd{font-size:13.5px;color:var(--a-ink-soft);margin-top:18px}
.rgpd a{color:var(--a-forest)}
.fin h2{font-family:var(--f-display);font-weight:400;font-size:2.2rem;color:var(--a-forest)}

@media(max-width:480px){
  .tri{flex-direction:column;align-items:flex-start}
  .tri-o{flex-wrap:wrap}
}

/* Cadenas : l'emoji est remplacé par une icône au trait */
.trust{font-size:0!important;align-items:flex-start}
.trust span{font-size:15px}
.trust::before{content:'';width:20px;height:20px;flex:none;margin-top:1px;background:var(--a-forest);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3.5' y='8.5' width='13' height='10' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M6.5 8.5V6a3.5 3.5 0 0 1 7 0v2.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3.5' y='8.5' width='13' height='10' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M6.5 8.5V6a3.5 3.5 0 0 1 7 0v2.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat}

/* ======================= CORRECTIFS DE REVUE ======================= */
details.info .src{color:var(--a-forest)}
/* À chaque écran, on arrive sur le titre de l'étape, sous l'en-tête collant */
.ecran{scroll-margin-top:88px}