/* ==========================================================================
   Laboratoire Lao — tunnel de commande sur ordonnance
   Palette et typographie issues de la charte « Identité visuelle LAO ».
   ========================================================================== */

/* --- Typographie de marque, servie depuis nos propres fichiers ------------
   Pas d'appel a fonts.googleapis.com : cela exposerait l'adresse IP du
   visiteur a un tiers hors UE sur une page de sante. Les deux sous-ensembles
   couvrent le francais et les langues latines etendues. */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Couleurs de la charte. Le violet #602d67 n'est plus une couleur
     d'interface depuis le 2026-09-21 : il ne vit que dans le logo, qui le
     porte assez pour que la page soit reconnaissable. Choisi parmi cinq
     variantes comparees sur telephone (« graphite et menthe »). */
  --menthe: #42d1a1;
  --bleu: #6a93ff;
  --ardoise: #364751;
  --blanc: #ffffff;

  /* Couleur principale de l'interface : graphite, tire de l'ardoise. Elle
     porte les actions — boutons, etape en cours, formule choisie, liens.
     Le menthe reste l'unique accent, reserve a ce qui est acquis. */
  --principal: #2f3e48;
  --principal-fonce: #1f2a31;
  --principal-moyen: #6b7b85;
  --principal-clair: #a9b4bb;
  --principal-pale: #eef1f3;
  --principal-bord: #d7dde1;

  /* Neutres, sans teinte violette. */
  --encre: var(--ardoise);
  --encre-douce: #5b6e79;
  --fond: #f5f6f7;
  --trait: #e3e7ea;
  --trait-fort: #c9d0d5;

  --succes: #147255;
  --succes-pale: #e6f9f1;
  --alerte: #a32b2b;
  --alerte-pale: #fbeaea;
  --attente: #7a5f16;
  --attente-pale: #fbf3de;

  /* Hauteur du bandeau colle en haut. Le fil des etapes s'y accroche par
     dessous ; les deux doivent se toucher sans se chevaucher. Redefinie plus
     bas pour les petits ecrans, ou le bandeau est plus court. */
  --hauteur-bandeau: 59px;
  --hauteur-fil: 70px;

  --rayon: 16px;
  --rayon-petit: 10px;
  --halo: 0 0 0 3px rgba(47, 62, 72, 0.16);
  --ombre: 0 1px 2px rgba(54, 71, 81, 0.05), 0 10px 28px -18px rgba(54, 71, 81, 0.28);
}

* { box-sizing: border-box; }

/* L'attribut hidden ne vaut qu'un display: none de la feuille du navigateur :
   la moindre regle d'auteur qui pose un display le neutralise. Sans ce rappel,
   un champ masque par le script resterait affiche. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Un liseré aux couleurs de la marque en haut de page. */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 20;
  background: linear-gradient(
    90deg,
    var(--principal) 0%,
    var(--principal-moyen) 38%,
    var(--bleu) 68%,
    var(--menthe) 100%
  );
}

:focus-visible {
  outline: 2px solid var(--principal);
  outline-offset: 2px;
}

/* --- Bandeau ------------------------------------------------------------ */

.bandeau {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--trait);
}

.contenu-bandeau {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  /* Logo et titre toujours sur une seule ligne, y compris sur telephone :
     le bandeau et le fil restent colles en haut pendant tout le defilement,
     et chaque ligne de trop y est prise sur la place de la page. La hauteur
     reelle reste mesuree par bandeau.js, qui recale le fil en consequence. */
  flex-wrap: nowrap;
}

.logo {
  display: block;
  height: 30px;
  width: auto;
  flex-shrink: 0;
}

/* Le nom du laboratoire reste dans le DOM pour les lecteurs d'ecran et les
   moteurs : le logo le porte deja visuellement. */
.marque {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sous-marque {
  color: var(--encre-douce);
  font-size: 0.88rem;
  padding-left: 14px;
  border-left: 1px solid var(--trait);
  line-height: 1.2;
  /* Filet de securite pour les ecrans les plus etroits : le titre se coupe
     en fin de ligne plutot que de pousser le bandeau sur deux. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Page --------------------------------------------------------------- */

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 72px;
}

/* --- Fil de progression -------------------------------------------------- */

/* Une colonne par etape, quel que soit leur nombre. Le compte etait ecrit en
   dur ; passer de quatre a cinq etapes faisait tomber la derniere a la ligne,
   avec son trait de liaison suspendu dans le vide.

   Le fil reste visible pendant tout le defilement, accroche sous le bandeau :
   la page est longue, et savoir ou l'on en est compte plus a la quatrieme
   etape qu'a la premiere. Fond opaque obligatoire, sinon les cartes defilent
   au travers. z-index en dessous du bandeau, qui garde la priorite. */
.fil {
  position: sticky;
  top: var(--hauteur-bandeau);
  z-index: 9;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  list-style: none;
  margin: 0 0 22px;
  padding: 12px 8px 11px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  box-shadow: var(--ombre);
}

/* Le script fait defiler jusqu'a la carte suivante a chaque etape franchie.
   Sans cette marge, le titre de la carte se logerait sous le bandeau et le
   fil, et le client verrait arriver un bloc decapite. */
.carte {
  scroll-margin-top: calc(var(--hauteur-bandeau) + var(--hauteur-fil) + 16px);
}

.fil-etape {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  color: var(--encre-douce);
  font-size: 0.78rem;
  line-height: 1.3;
}

/* Le trait qui relie une etape a la precedente. */
.fil-etape::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--trait-fort);
  border-radius: 2px;
}

.fil-etape:first-child::before { display: none; }

/* Le vert de la charte marque ce qui est acquis : le chemin parcouru et les
   etapes terminees. La couleur principale reste a l'etape en cours et aux actions. Le
   menthe n'offre que 2:1 de contraste sur blanc : il sert aux traits et aux
   bordures, jamais au texte, qui prend le vert fonce --succes. */
.fil-etape.actif::before,
.fil-etape.faite::before { background: var(--menthe); }

.fil-etape span {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blanc);
  border: 2px solid var(--trait-fort);
  color: var(--encre-douce);
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.fil-etape em {
  font-style: normal;
  max-width: 13ch;
  /* « coordonnees » ne rentre pas dans une colonne sur telephone : sans coupure
     le mot deborde et vient toucher l'etape voisine. On le laisse se couper. */
  hyphens: auto;
  overflow-wrap: break-word;
  padding: 0 3px;
}

.fil-etape.actif {
  color: var(--principal);
  font-weight: 600;
}

.fil-etape.actif span {
  background: var(--principal);
  border-color: var(--principal);
  color: var(--blanc);
  box-shadow: 0 0 0 4px var(--principal-pale);
}

.fil-etape.faite { color: var(--succes); }

.fil-etape.faite span {
  background: var(--succes-pale);
  border-color: var(--menthe);
  color: var(--succes);
  /* Le chiffre laisse la place a la coche, sans toucher au balisage. */
  font-size: 0;
}

.fil-etape.faite span::after {
  content: '\2713';
  font-size: 0.9rem;
  line-height: 1;
}

/* Trois paragraphes se suivent maintenant dans la tete de la premiere carte.
   La marge de 3 px, prevue pour une ligne unique sous un titre, les collerait
   les uns aux autres. */
.carte-tete .aide + .aide { margin-top: 9px; }

/* L'instruction de choix, sortie de la tete de carte pour rester au contact
   des formules : entre trois paragraphes d'explication et une liste d'options,
   c'est la derniere chose lue avant de cliquer. */
.consigne-options {
  margin: 0 0 12px;
  color: var(--encre);
  font-size: 0.9rem;
  font-weight: 600;
}

/* --- Cartes -------------------------------------------------------------- */

.carte {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 26px 28px 28px;
  margin-bottom: 18px;
  box-shadow: var(--ombre);
  transition: opacity 0.25s, box-shadow 0.25s;
}

.carte-tete {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.carte-num {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--principal-pale);
  color: var(--principal);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
}

.carte h2 {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.carte.verrouille {
  opacity: 0.55;
  pointer-events: none;
  box-shadow: none;
}

.carte.verrouille .carte-num {
  background: var(--fond);
  color: var(--encre-douce);
}

.aide {
  margin: 3px 0 0;
  color: var(--encre-douce);
  font-size: 0.9rem;
}

.attente {
  color: var(--encre-douce);
  font-size: 0.92rem;
  margin: 0;
}

/* --- Options ------------------------------------------------------------- */

.options {
  display: grid;
  gap: 12px;
}

.option {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.option:hover {
  border-color: var(--principal-clair);
  box-shadow: var(--ombre);
  transform: translateY(-1px);
}

.option input {
  margin: 4px 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--principal);
  cursor: pointer;
}

.option.choisie {
  border-color: var(--principal);
  background: var(--principal-pale);
  /* Un second liseré interne : l'epaisseur double sans decaler la mise en page. */
  box-shadow: inset 0 0 0 1px var(--principal);
}

.option-corps { flex: 1; min-width: 0; }

.option-titre {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.option-prix {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--principal);
}

.option-produit {
  display: block;
  color: var(--encre);
  font-size: 0.9rem;
  margin-top: 3px;
}
.option-produit:empty { display: none; }

.option-desc {
  display: block;
  color: var(--encre-douce);
  font-size: 0.88rem;
  margin-top: 3px;
}

/* --- Formulaire ---------------------------------------------------------- */

.grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ-large { grid-column: 1 / -1; }

.champ span {
  font-size: 0.84rem;
  font-weight: 600;
}

.champ em {
  font-style: normal;
  font-weight: 400;
  color: var(--encre-douce);
}

.champ input {
  padding: 11px 13px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-petit);
  font: inherit;
  font-size: 0.95rem;
  background: var(--blanc);
  color: var(--encre);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.champ input:hover { border-color: var(--principal-clair); }

.champ input:focus {
  outline: none;
  border-color: var(--principal);
  box-shadow: var(--halo);
}

.champ input.invalide {
  border-color: var(--alerte);
  background: var(--alerte-pale);
}

.champ input.invalide:focus {
  box-shadow: 0 0 0 3px rgba(163, 43, 43, 0.16);
}

/* --- Blocs de formulaire ------------------------------------------------- */

.bloc {
  border: none;
  border-top: 1px solid var(--trait);
  padding: 22px 0 0;
  margin: 0 0 22px;
}

.bloc:first-of-type { border-top: none; padding-top: 0; }

.bloc legend {
  padding: 0;
  color: var(--principal);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}

.case {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 13px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--fond);
  font-size: 0.89rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.case:hover { border-color: var(--principal-clair); background: var(--principal-pale); }

.case input {
  width: 17px;
  height: 17px;
  accent-color: var(--principal);
  cursor: pointer;
}

.indication {
  color: var(--encre-douce);
  font-size: 0.78rem;
}

/* --- Suggestions d'adresse (adresse.js) ---------------------------------- */

/* Le conteneur remplace le label comme case de la grille. Un bloc, et non un
   flex comme .champ : dans un flex, un enfant en position absolue sans `top`
   se place en haut du conteneur — la liste recouvrait le champ. */
.champ-adresse { position: relative; }
.champ-adresse .indication { display: block; margin-top: 6px; }

/* Sans `top`, la liste reste a sa place naturelle, juste sous le champ, et
   flotte par-dessus l'indication et les champs suivants. */
.suggestions {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--blanc);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-petit);
  box-shadow: 0 14px 30px -14px rgba(31, 42, 49, 0.35);
  max-height: 320px;
  overflow-y: auto;
}

/* Deux lignes par suggestion : la voie, puis code postal et ville. La
   hauteur depasse 44 px, la taille minimale d'une cible au doigt. */
.suggestions li {
  display: flex;
  flex-direction: column;
  padding: 9px 11px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.3;
}

.suggestions li:hover,
.suggestions li[aria-selected='true'] { background: var(--principal-pale); }

.suggestion-voie { font-weight: 600; font-size: 0.92rem; color: var(--encre); }
.suggestion-lieu { font-size: 0.8rem; color: var(--encre-douce); }

/* --- Boutons ------------------------------------------------------------- */

.bouton {
  margin-top: 20px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--rayon-petit);
  background: var(--principal);
  color: var(--blanc);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}

.bouton:hover:not(:disabled) {
  background: var(--principal-fonce);
  box-shadow: 0 6px 18px -8px rgba(47, 62, 72, 0.55);
}

.bouton:active:not(:disabled) { transform: translateY(1px); }

.bouton:disabled {
  background: var(--trait-fort);
  color: #f4f6f7;
  cursor: not-allowed;
}

.bouton-payer {
  width: 100%;
  margin-top: 22px;
  padding: 15px;
  font-size: 1rem;
}

.bouton.occupe .bouton-texte { opacity: 0.7; }

/* --- Dépôts -------------------------------------------------------------- */

.depots { display: grid; gap: 14px; }

.depot {
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  padding: 18px;
}

.depot-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 3px;
}

.depot-tete h3 { margin: 0; font-size: 0.98rem; font-weight: 700; }

.depot-aide {
  margin: 0 0 14px;
  color: var(--encre-douce);
  font-size: 0.85rem;
}

.pastille {
  font-size: 0.73rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--principal-pale);
  color: var(--principal);
}

.pastille[data-etat="valide"] { background: var(--succes-pale); color: var(--succes); }
.pastille[data-etat="rejete"] { background: var(--alerte-pale); color: var(--alerte); }
.pastille[data-etat="encours"] { background: var(--attente-pale); color: var(--attente); }

/* Deux acces cote a cote : l'appareil photo et le selecteur de fichiers.
   Le second porte seul le libelle des formats, parce que c'est le seul par
   lequel un PDF puisse arriver. */
.zones-depot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* La case est tantot un `label` (entree de fichier) tantot un `button` (la
   numerisation) : un bouton n'herite ni de la police ni de la taille de
   texte, et sans ce rappel les deux cases ne se ressemblent pas. */
.zone-depot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font: inherit;
  gap: 3px;
  border: 2px dashed var(--principal-bord);
  border-radius: 12px;
  padding: 20px 12px;
  text-align: center;
  cursor: pointer;
  background: var(--fond);
  color: var(--principal);
  transition: border-color 0.15s, background 0.15s;
}

.zone-depot:hover {
  border-color: var(--principal-moyen);
  background: var(--principal-pale);
}

.zone-depot svg {
  width: 26px;
  height: 26px;
  margin-bottom: 3px;
  stroke: var(--principal-moyen);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zone-libelle {
  font-size: 0.92rem;
  font-weight: 600;
}

.zone-format {
  font-size: 0.76rem;
  color: var(--encre-douce);
}

.depot.occupe .zones-depot { pointer-events: none; opacity: 0.55; }

/* Un pointeur fin qui survole, c'est un ordinateur : l'attribut capture y est
   ignore et le bouton photo ouvrirait le meme selecteur que son voisin. Le
   compromis se paie sur les hybrides a ecran tactile et souris, qui perdent
   le raccourci photo — moins genant qu'un doublon inexplicable.

   Ce bloc doit rester APRES `.zone-depot` : son `display: none` a la meme
   specificite que le `display: flex` de la zone, donc c'est l'ordre
   d'ecriture qui tranche. Place avant, la regle est simplement perdue. */
@media (hover: hover) and (pointer: fine) {
  .zones-depot { grid-template-columns: 1fr; }
  .zone-photo { display: none; }
}

.depot-message {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--encre-douce);
  min-height: 1.2em;
}

.depot-message.echec { color: var(--alerte); font-weight: 600; }
.depot-message.succes { color: var(--succes); font-weight: 600; }

/* --- Avertissement de netteté -------------------------------------------- */

.avertissement {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--attente-pale);
  border: 1px solid #e6d5a8;
  border-radius: var(--rayon-petit);
}

.avertissement-titre {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 0.89rem;
  color: var(--attente);
}

.avertissement-texte {
  margin: 0 0 13px;
  font-size: 0.85rem;
  color: var(--encre-douce);
}

.avertissement-boutons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.bouton-secondaire,
.bouton-discret {
  padding: 9px 16px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.bouton-secondaire {
  border: none;
  background: var(--principal);
  color: var(--blanc);
}

.bouton-secondaire:hover { background: var(--principal-fonce); }

.bouton-discret {
  border: 1px solid var(--trait-fort);
  background: var(--blanc);
  color: var(--encre-douce);
}

.bouton-discret:hover { border-color: var(--principal-clair); color: var(--principal); }

/* --- Récapitulatif ------------------------------------------------------- */

.recapitulatif {
  background: var(--principal-pale);
  border: 1px solid var(--principal-bord);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 22px;
  font-size: 0.93rem;
}

.ligne-recap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ligne-recap + .ligne-recap {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--principal-bord);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--principal);
}

.ligne-recap .montant { font-variant-numeric: tabular-nums; }

/* --- Divers -------------------------------------------------------------- */

.erreur {
  margin: 14px 0 0;
  padding: 11px 14px;
  background: var(--alerte-pale);
  color: var(--alerte);
  border-left: 3px solid var(--alerte);
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
}

.note-confidentialite {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0 0;
  padding: 12px 14px;
  background: var(--fond);
  border-left: 3px solid var(--menthe);
  border-radius: var(--rayon-petit);
  font-size: 0.8rem;
  color: var(--encre-douce);
  line-height: 1.5;
}

.note-confidentialite svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  stroke: var(--menthe);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pied {
  /* Filet vert en echo du liseré du haut de page, qui finit sur le menthe. */
  border-top: 3px solid var(--menthe);
  background: var(--blanc);
  padding: 26px 20px;
  text-align: center;
  color: var(--encre-douce);
  font-size: 0.8rem;
}

.pied p { margin: 0; }

/* L'adresse et le numero sont des liens : sur telephone, un appui ouvre la
   messagerie ou l'appel, sans recopier. */
.pied .contact { margin-top: 8px; }
.pied .contact a {
  color: var(--principal);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.pied .contact a:hover { text-decoration: underline; }

.pied .logo {
  height: 22px;
  margin: 0 auto 12px;
  opacity: 0.55;
}

/* --- Page de retour ------------------------------------------------------ */

.bloc-retour { text-align: center; padding: 36px 24px 40px; }

.icone-etat {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blanc);
}

.icone-etat.succes { background: var(--succes); box-shadow: 0 0 0 6px var(--succes-pale); }
.icone-etat.attente { background: var(--attente); box-shadow: 0 0 0 6px var(--attente-pale); }
.icone-etat.echec { background: var(--alerte); box-shadow: 0 0 0 6px var(--alerte-pale); }

.bloc-retour h1 { font-size: 1.35rem; margin: 0 0 10px; letter-spacing: -0.01em; }

.bloc-retour p {
  color: var(--encre-douce);
  margin: 0 auto;
  max-width: 44ch;
  font-size: 0.94rem;
}

.reference:empty { display: none; }

.reference {
  margin-top: 24px;
  padding: 9px 14px;
  display: inline-block;
  background: var(--fond);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--encre-douce);
}

.code-reference { white-space: nowrap; }

/* Place sous la reference, qui est un bloc en ligne : sans marge propre, le
   paragraphe viendrait se coller contre elle. */
.bloc-retour .fermeture {
  margin-top: 18px;
  font-size: 0.86rem;
}

/* --- Adaptations --------------------------------------------------------- */

@media (max-width: 560px) {
  .grille { grid-template-columns: 1fr; }
  .carte { padding: 20px 18px 22px; border-radius: 14px; }
  /* Replis, uniquement si bandeau.js n'a pas tourne : il mesure les hauteurs
     reelles et ecrase ces valeurs des le chargement. */
  :root { --hauteur-bandeau: 51px; --hauteur-fil: 62px; }
  .contenu-bandeau { padding: 12px 16px; gap: 10px; }
  .logo { height: 26px; }
  .sous-marque { font-size: 0.8rem; padding-left: 10px; }
  .fil { margin-bottom: 18px; padding: 10px 4px 9px; }
  .fil-etape { font-size: 0.68rem; }
  .fil-etape em { max-width: 100%; }
  .fil-etape span { width: 26px; height: 26px; font-size: 0.75rem; }
  .fil-etape::before { top: 12px; }
  .option-titre { flex-direction: column; gap: 2px; }
}

/* Les plus petits telephones (320 px de large) : le titre entier ne tient a
   cote du logo qu'en rognant un peu partout. Seules les marges horizontales
   bougent ; le bandeau garde sa hauteur. */
@media (max-width: 360px) {
  .contenu-bandeau { padding-left: 10px; padding-right: 10px; gap: 6px; }
  .sous-marque { font-size: 0.68rem; padding-left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* --- Page des conditions (conditions.html) ------------------------------ */

/* Le bandeau qui empeche de prendre un brouillon pour un texte definitif.
   Volontairement voyant : un document juridique incomplet mis en ligne par
   inadvertance coute plus cher qu'un bandeau disgracieux. */
.brouillon {
  border: 1px solid var(--attente);
  background: #fdf6e3;
  color: var(--attente);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.sommaire a {
  border: 1px solid var(--principal-bord);
  background: var(--blanc);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--principal);
  text-decoration: none;
}

.sommaire a:hover { background: var(--principal-pale); border-color: var(--principal-clair); }

.legal .carte { margin-bottom: 22px; }

.legal h1 {
  font-size: 1.35rem;
  color: var(--principal);
  margin: 0 0 4px;
}

.legal h2 {
  font-size: 1rem;
  color: var(--encre);
  margin: 26px 0 8px;
}

.legal p, .legal li { line-height: 1.6; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }

/* Ce qui reste a ecrire se voit, dans le texte meme. Une mention discrete
   finirait par passer inapercue et partirait en production telle quelle. */
.a-completer {
  background: #fdf6e3;
  border-bottom: 1px dashed var(--attente);
  color: var(--attente);
  padding: 1px 3px;
}

/* Les annexes reproduisent des textes de loi mot pour mot. Le retrait et le
   fond disent au lecteur que ce n'est plus la voix du laboratoire, sans pour
   autant rendre le texte moins lisible : c'est celui que la loi oblige a lui
   remettre. */
.texte-legal {
  border-left: 3px solid var(--principal-bord);
  background: var(--principal-pale);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 0.88rem;
}

.texte-legal p { margin: 0 0 10px; }
.texte-legal p:last-child { margin-bottom: 0; }

.tableau-donnees {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.9rem;
}

.tableau-donnees th, .tableau-donnees td {
  border: 1px solid var(--trait);
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
}

.tableau-donnees th { background: var(--principal-pale); color: var(--principal); font-size: 0.84rem; }

.retour-commande { text-align: center; margin: 4px 0 8px; }
.retour-commande a { color: var(--principal); font-weight: 600; }

/* Le tableau des donnees ne se comprime pas : il defile plutot que de casser. */
@media (max-width: 640px) {
  .tableau-donnees { display: block; overflow-x: auto; white-space: nowrap; }

  /* Sauf celui de la garantie casse, qui n'a que deux colonnes et dont la
     seconde est une phrase. La faire defiler horizontalement la cacherait a
     moitie sur un telephone, alors que la plupart des clients lisent ces
     conditions sur un telephone. Elle tient sur plusieurs lignes. */
  .tableau-garantie { display: table; overflow-x: visible; white-space: normal; }
}

/* --- Etape des conditions, sur la page de commande ---------------------- */

.aide-conditions { margin-top: 10px; }

#case-conditions a { color: var(--principal); font-weight: 600; }

/* --- Numerisation (scanner.js) ------------------------------------------- */

/* Le panneau couvre tout : sur un telephone, un apercu camera dans une
   colonne de 340 px ne permet pas de cadrer une ordonnance. `dvh` plutot que
   `vh` pour que la barre d'outils mobile ne mange pas le declencheur. */
.scanner {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: #11161a;
  color: var(--blanc);
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* On bloque le defilement derriere : sans cela, un glissement de poignee
   fait bouger la page sous le panneau. */
body.scanner-ouvert { overflow: hidden; }

.scanner-scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* Aucun geste de defilement ou de zoom sur la scene : les poignees s'y
     glissent au doigt, et le navigateur interpreterait le mouvement. */
  touch-action: none;
}

/* `contain` et non `cover` : un bord de document hors de l'ecran ne se
   detecte pas, et `scanner.js` fait sa conversion de coordonnees en supposant
   exactement ce cadrage. Les deux doivent rester d'accord. */
.scanner-video,
.scanner-fige {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.scanner-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scanner-poignees { position: absolute; inset: 0; }

/* Cible de 44 px, centree sur le coin : le point visible est plus petit que
   la zone tactile, sinon un coin est impossible a saisir au doigt. */
.scanner-poignee {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
  touch-action: none;
}

.scanner-poignee::after {
  content: '';
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: var(--menthe);
  box-shadow: 0 0 0 2px rgba(17, 22, 26, 0.55);
}

.scanner-poignee.saisie { cursor: grabbing; }
.scanner-poignee.saisie::after { inset: 8px; }
.scanner-poignee:focus-visible { outline: 2px solid var(--blanc); outline-offset: -4px; }

.scanner-consigne {
  margin: 0;
  padding: 12px 18px 0;
  text-align: center;
  font-size: 0.9rem;
  min-height: 2.6em;
  color: #e6eaed;
}

.scanner-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 18px 18px;
}

/* La cale equilibre « Annuler » a gauche pour que le declencheur tombe au
   milieu de l'ecran, la ou se pose le pouce. */
.scanner-cale { width: 76px; }

.scanner-plat {
  background: none;
  border: 0;
  color: #e6eaed;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 10px 4px;
  min-width: 76px;
  text-align: left;
  cursor: pointer;
}

.scanner-declencher {
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 4px solid var(--blanc);
  background: var(--blanc);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
  cursor: pointer;
}

.scanner-declencher:active { transform: scale(0.94); }
.scanner-declencher:disabled { opacity: 0.4; cursor: default; }

.scanner-barre[data-etat="confirmation"] { justify-content: space-between; }


/* La sortie de secours. Discrete mais toujours atteignable : un recadrage
   rate est silencieux, et c'est le seul moyen de s'en sortir sans perdre le
   document. Jamais la masquer pour faire propre. */
.scanner-sans-recadrage {
  background: none;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #c3ccd2;
  font: inherit;
  font-size: 0.84rem;
  text-decoration: underline;
  padding: 14px 18px;
  cursor: pointer;
  width: 100%;
}

.scanner-sans-recadrage:disabled { opacity: 0.5; cursor: default; }

/* Assez large pour deux colonnes : on borne la scene et on centre, sinon
   l'apercu s'etire sur toute la largeur d'un ecran d'ordinateur. */
@media (min-width: 720px) {
  .scanner-scene, .scanner-consigne, .scanner-barre, .scanner-sans-recadrage {
    width: min(720px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}

/* L'apercu redresse occupe la scene comme les deux autres images. `contain`
   est obligatoire ici aussi : le document redresse a son propre rapport, qui
   n'est presque jamais celui de l'ecran. */
.scanner-apercu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Fond blanc : un document redresse est une feuille, et la lettre grise
     autour se lit mieux qu'un vide noir. */
  background: #f1f3f5;
}

/* Les deux boutons d'action des etapes « cadre » et « apercu » partagent le
   meme dessin : c'est le meme geste, avancer d'un ecran. */

.scanner-continuer,
.scanner-valider {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blanc);
  background: var(--principal);
  border: 1px solid var(--principal-clair);
  border-radius: 10px;
  padding: 13px 22px;
  cursor: pointer;
}

.scanner-continuer:disabled,
.scanner-valider:disabled { opacity: 0.5; cursor: default; }

/* Le bouton de relevé de cas, visible seulement avec `?diagnostic=1`. Il
   ressemble volontairement à un outil et non à une action du tunnel : c'en
   est un, et aucun client ne doit le prendre pour une étape de sa commande. */
.scanner-cas {
  background: rgba(255, 255, 255, 0.07);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  color: #c3ccd2;
  font: inherit;
  font-size: 0.8rem;
  border-radius: 8px;
  margin: 0 18px 14px;
  padding: 11px 14px;
  cursor: pointer;
}

/* Le rappel de la pièce attendue, en tête du panneau de numérisation. Il ne
   change jamais pendant la session : c'est précisément sa fonction, être là
   du premier coup d'œil au dernier pour qu'on ne numérise pas l'ordonnance
   à la place de l'attestation. */
.scanner-piece {
  margin: 0;
  padding: 12px 18px 10px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--menthe);
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Au dernier ecran, trois actions : Recommencer, Ajuster les coins, et
   l'envoi. Sur une ligne, elles ne tiennent pas dans 375 px de large ; les
   deux secondaires s'empilent donc a gauche, et l'envoi garde la place du
   pouce, a droite. */
.scanner-secondaires {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.scanner-secondaires .scanner-plat { padding: 6px 4px; }