.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
fieldset{border:none;}

/* ---- deux colonnes : l'argument à gauche, le formulaire à droite ---- */
.wrap{padding:48px var(--gouttiere) 90px;display:grid;grid-template-columns:1fr 1.15fr;gap:66px;align-items:start;}
.left{min-width:0;}
.left h1{font-family:var(--serif);font-size:46px;overflow-wrap:break-word;font-weight:500;line-height:1.12;margin:20px 0 22px;}
.left h1 em{color:var(--laiton);font-style:italic;}
.left .l{font-size:15.5px;color:var(--encre-70);line-height:1.68;max-width:440px;margin-bottom:34px;}

/* ---- la piste, en vertical ---- */
.tl2{margin-bottom:34px;}
.tl2 .r{display:flex;gap:18px;align-items:baseline;padding:13px 0;border-top:1px solid var(--encre-15);font-size:13.5px;color:var(--encre-70);line-height:1.55;}
.tl2 .r:last-child{border-bottom:1px solid var(--encre-15);}
.tl2 .d{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--acier);flex:0 0 26px;}

/* ---- le cadre publié ---- */
.gate{border:1px solid var(--encre-15);background:var(--chaux-2);padding:24px 26px;}
.gate .t{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--laiton-texte);margin-bottom:14px;}
.gate ul{list-style:none;}
.gate li{font-size:13.5px;color:var(--encre-70);line-height:1.5;padding:6px 0 6px 18px;position:relative;}
.gate li::before{content:'—';position:absolute;left:0;color:var(--acier);}
.gate li b{color:var(--encre);font-weight:500;}
/* ---- formulaire : une page, trois temps, aucun faux stepper ---- */
.wrap{align-items:start;}
.form-col{min-width:0;}
.form-card{border:1px solid var(--encre-15);background:var(--chaux-2);padding:40px 42px 38px;}
.fh{font-family:var(--serif);font-size:26px;font-weight:500;margin-bottom:4px;}
.fs{border:none;padding:0;margin:0 0 34px;}
.fs.last{margin-bottom:0;}
.fs > legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--encre-70);padding:22px 0 16px;width:100%;border-top:1px solid var(--encre-15);
  display:flex;align-items:baseline;gap:10px;}
.fs-n{color:var(--acier);font-weight:500;}
fieldset.sub{border:none;padding:0;margin:0 0 20px;}
.lbl{display:block;font-family:var(--mono);font-size:9.5px;color:var(--encre-50);letter-spacing:.06em;
  text-transform:uppercase;padding-bottom:9px;}
label{display:block;font-family:var(--sans);font-size:11.5px;color:var(--encre-50);letter-spacing:0;
  text-transform:none;padding-bottom:8px;min-height:24px;box-sizing:content-box;}
label abbr{color:var(--laiton-texte);text-decoration:none;border:none;margin-left:2px;}
.field{border-bottom:1px solid var(--encre-30);padding-bottom:2px;min-width:0;}
.field:focus-within{border-bottom-color:var(--acier);}
.field.full{margin-bottom:4px;}
.depot-champ{margin-bottom:22px;}
.depot{border:1px dashed var(--encre-30);background:var(--chaux-2);border-radius:2px;
  padding:26px 24px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;}
.depot:hover,.depot:focus-visible{border-color:var(--acier);background:var(--chaux);}
.depot.survol{border-color:var(--laiton);border-style:solid;background:rgba(154,123,60,.07);}
.depot-i{color:var(--acier);display:block;margin:0 auto 10px;}
.depot-t{font-size:14.5px;color:var(--encre);}
.depot-s{font-size:12.5px;color:var(--encre-50);margin-top:5px;line-height:1.6;}
.depot-p{color:var(--acier);border-bottom:1px solid var(--acier);}
.depot-l{margin-top:12px;display:flex;flex-direction:column;gap:1px;}
.depot-l li{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--chaux-2);
  font-size:13px;color:var(--encre);}
.depot-l .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.depot-l .po{font-family:var(--mono);font-size:11.5px;color:var(--encre-50);flex:none;
  font-variant-numeric:tabular-nums;}
.depot-l .rt{flex:none;background:none;border:none;color:var(--encre-50);font-size:17px;line-height:1;
  cursor:pointer;padding:0 2px;}
.depot-l .rt:hover{color:var(--encre);}
.depot-e{margin-top:8px;font-size:12.5px;color:#9E3B2E;}
input,select,textarea{width:100%;border:none;background:transparent;font-family:var(--sans);
  font-size:15px;color:var(--encre);padding:5px 0 8px;min-height:26px;}
input:focus,select:focus,textarea:focus{outline:none;}
input::placeholder,textarea::placeholder{color:var(--encre-50);}
textarea{resize:vertical;line-height:1.6;}
select{cursor:pointer;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px;margin-bottom:22px;}
.field-row.three{grid-template-columns:repeat(3,1fr);}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.opt-grid.two{grid-template-columns:1fr 1fr;}
.opt{position:relative;cursor:pointer;display:block;border:1px solid var(--encre-30);
  padding:15px 16px;text-align:left;transition:border-color .16s,background .16s;
  font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--encre);padding-bottom:15px;min-height:0;}
.opt input{position:absolute;opacity:0;width:0;height:0;}
.opt > span{display:block;font-weight:500;}
.opt small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.05em;opacity:.7;
  margin-top:5px;text-transform:uppercase;line-height:1.5;}
.opt:hover{border-color:var(--acier);}
.opt:has(input:checked){border-color:var(--encre);background:var(--encre);color:var(--chaux);}
.opt:has(input:focus-visible){outline:2px solid var(--laiton);outline-offset:2px;}

/* rappel des plafonds : la graduation, pas un widget */
.caps{margin:-6px 0 24px;}
.caps-row{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:9px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--encre-50);}
.caps-row b{color:var(--acier);font-weight:500;}

.next{margin-top:4px;}
.rgpd{margin-top:20px;font-size:11.5px;color:var(--encre-50);line-height:1.65;}
.rgpd a,.gate a{border-bottom:1px solid var(--encre-30);}
.gate-note{font-size:12.5px;color:var(--encre-50);line-height:1.6;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--encre-15);}

.talk-first{margin-top:22px;border:1px solid var(--encre-15);padding:24px 26px;}
.talk-first .tf-k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-50);margin-bottom:10px;}
.talk-first p{font-size:14px;color:var(--encre-70);line-height:1.65;margin-bottom:16px;}

@media (max-width:1000px){
  .wrap{grid-template-columns:1fr;gap:40px;}
  .field-row.three{grid-template-columns:1fr 1fr;}
}
@media (max-width:620px){
  .wrap{padding:36px 22px 60px;}
  .left h1{font-size:clamp(27px,7.4vw,34px);}
  .form-card{padding:26px 22px 24px;}
  .field-row,.field-row.three{grid-template-columns:1fr;gap:20px;margin-bottom:20px;}
  .opt-grid,.opt-grid.two{grid-template-columns:1fr;}
  .talk-first{padding:20px 22px;}
}

/* ============================================================
   AJOUTS DE L'INTÉGRATION

   Le formulaire de la livraison est un fichier statique : il ne connaît ni
   piège à robots, ni preuve d'information, ni autocomplétion. Tout ce qui
   suit est propre à cette page et n'existe nulle part ailleurs sur le site.
   ============================================================ */

/* ---- champ piège ----
   Hors de l'écran plutôt qu'en `display:none` : certains robots ignorent les
   champs masqués, aucun n'ignore un champ qui a l'air normal. `aria-hidden`
   et `tabindex="-1"` le retirent du parcours d'un humain. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---- second alinéa du chapeau, réservé aux intermédiaires ----
   Sorti de l'attribut `style` de la livraison. */
.l-tight{font-size:13.5px;margin-top:-18px;}

/* ---- zone de dépôt : le message d'erreur ----
   Il est rendu vide en permanence, et non créé au besoin comme dans le kit :
   un `role="alert"` déjà présent dans le document est annoncé quand son
   texte change, un nœud inséré après coup ne l'est pas toujours. Vide, il ne
   doit rien occuper. */
.depot-e:empty{display:none;}

/* ---- autocomplétion « sélectionner ou saisir » ----
   La liste flotte sous le champ, dans le flux de la carte : elle ne pousse
   rien, et le formulaire ne saute pas à chaque frappe. */
.sugg{position:relative;}
.sugg-liste{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;
  margin:0;padding:4px 0;list-style:none;max-height:266px;overflow-y:auto;
  background:var(--chaux);border:1px solid var(--encre-15);
  box-shadow:0 14px 32px rgba(27,25,23,.12);}
.sugg.is-open .sugg-liste{display:block;}
.sugg-item{display:flex;flex-direction:column;gap:2px;padding:9px 14px;cursor:pointer;}
.sugg-item.is-active,.sugg-item:hover{background:var(--chaux-2);}
.sugg-label{font-size:14px;line-height:1.4;color:var(--encre);}
.sugg-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--encre-50);}

/* ---- cases de consentement ----
   Deux cases, pas plus. La première prouve que la notice d'information a été
   portée à la connaissance du demandeur (art. 5.2) — ce n'est PAS un
   consentement au traitement, qui repose sur les mesures précontractuelles.
   La seconde ne concerne que les intermédiaires, qui transmettent les
   données d'un tiers (art. 14). */
.consent{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding:0;
  font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--encre-70);
  letter-spacing:0;text-transform:none;cursor:pointer;min-height:0;}
/* Le carré fait 18 px, volontairement discret. La cible cliquable n'est pas
   lui : c'est le LABEL entier, qui enveloppe la case et son texte — donc au
   moins deux lignes de haut. Un audit automatique qui mesure l'input
   signalera 18 px ; c'est un faux positif. */
.consent input[type="checkbox"]{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;
  padding:0;accent-color:var(--laiton);cursor:pointer;}
.consent a{border-bottom:1px solid var(--encre-30);}
.consent a:hover{border-bottom-color:var(--encre);}

/* Réservée aux intermédiaires : `:has()` sur la radio, donc l'affichage ne
   dépend d'aucun script. */
.consent--intermediary{display:none;}
form:has(input[name="qualite"][value="intermediaire"]:checked) .consent--intermediary{display:flex;}