/* ============================================================
   Consultation en ligne — questionnaire à copier
   ============================================================ */

.qz > .lede { max-width: 64ch; margin-bottom: 3rem; }
.qz section { margin-bottom: 3.5rem; }
.qz section:last-child { margin-bottom: 0; }
.qz h3 { margin-bottom: .8rem; }

/* ---------- Comment procéder ---------- */
.qz-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  counter-reset: qzstep; margin-top: 1.6rem;
}
.qz-step { counter-increment: qzstep; background: var(--paper); padding: 1.6rem 1.4rem; }
.qz-step h4 {
  font-family: var(--font-sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin-bottom: .5rem; display: flex; align-items: baseline; gap: .55rem;
}
.qz-step h4::before {
  content: counter(qzstep, decimal-leading-zero);
  font-family: var(--font-serif); font-size: 1.35rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--gold);
}
.qz-step p { margin: 0; font-size: .92rem; color: var(--ink-mute); }
@media (max-width: 900px) { .qz-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .qz-steps { grid-template-columns: 1fr; } }

/* ---------- Les questions ---------- */
.qz-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 2.2rem;
}
.qz-head > div { flex: 1 1 340px; }
.qz-head p { margin: 0; font-size: .95rem; color: var(--ink-mute); max-width: 58ch; }

.qz-copy { flex: none; }
.qz-copy svg { width: 16px; height: 16px; }
.qz-copy.is-copied { border-color: var(--gold); color: var(--gold); }
.qz-copy.is-copied::before { background: transparent; }
.qz-copy-foot { margin-top: 2rem; }

.qz-group { border-top: 1px solid var(--line); padding: 1.8rem 0; }
.qz-group:last-of-type { border-bottom: 1px solid var(--line); }
.qz-group h4 {
  display: flex; align-items: baseline; gap: .8rem;
  font-size: 1.22rem; margin-bottom: 1rem;
}
.qz-num {
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; color: var(--gold);
}
.qz-group ol { margin: 0; padding-left: 1.4em; }
.qz-group li {
  margin-bottom: .7rem; font-size: 1rem; line-height: 1.65; color: var(--ink-soft);
}
.qz-group li:last-child { margin-bottom: 0; }
.qz-group li::marker { color: var(--ink-mute); font-size: .85em; }

/* ---------- Planche des vues demandées ---------- */
.qz-photos p { max-width: 68ch; }
.photo-guide { margin: 1.8rem 0 0; }
.photo-guide img {
  width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line);
}
.photo-guide figcaption {
  margin-top: .9rem; font-size: .88rem; line-height: 1.6;
  color: var(--ink-soft); text-align: center;
}

/* ---------- Envoi ---------- */
.send-block {
  padding: 2.4rem 2.2rem;
  background: var(--accent-soft);
  border: 1px solid rgba(18,72,76,.18); border-radius: var(--radius-lg);
}
.send-block > p { font-size: .97rem; max-width: 64ch; }
.send-ways { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
.send-way {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 1.5rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  font-size: 1rem; font-weight: 500;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.send-way:hover { border-color: var(--accent); color: var(--accent); }
.send-way svg { width: 19px; height: 19px; color: var(--accent); flex: none; }
.send-wa { margin: 1.3rem 0 0; font-size: .9rem; color: var(--ink-mute); }
.qz-privacy {
  margin: 1.6rem 0 0; padding-top: 1.3rem;
  border-top: 1px solid rgba(18,72,76,.16);
  font-size: .86rem; line-height: 1.6; color: var(--ink-mute);
}

@media (max-width: 620px) {
  .send-block { padding: 1.7rem 1.3rem; }
  .send-ways { flex-direction: column; }
  .send-way { justify-content: center; }
  .qz-copy { width: 100%; justify-content: center; }
}

/* ======================================================================
   Formulaire de demande de diagnostic
   ----------------------------------------------------------------------
   Écrit par src/formulaire.py et traité par Netlify Forms depuis le
   14 septembre 2026. Les sélecteurs .wpcf7-form datent de la voie
   WordPress, abandonnée : ils ne servent plus et restent inoffensifs.
   ====================================================================== */

.fx { max-width: 46rem; }
.fx .lede { margin-bottom: 2.2rem; }

.fx-bloc,
.wpcf7-form h3 + * { border: 0; }

.fx-bloc {
  margin: 0 0 2.6rem;
  padding: 0;
}
.fx-bloc legend,
.wpcf7-form h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--ink);
  width: 100%;
  margin: 2.6rem 0 1.1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: .7rem;
}
.fx-num {
  font-family: var(--font-sans);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.fx-champ,
.wpcf7-form label.champ {
  display: block;
  margin: 1.4rem 0 0;
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink);
}
.fx-label { display: block; margin-bottom: .4rem; }
.fx-req, .wpcf7-form .req { color: #9A3B32; font-weight: 600; margin-left: .15rem; }

.fx-aide,
.wpcf7-form .aide {
  display: block;
  font-size: .83rem;
  font-weight: 400;
  color: var(--ink-mute);
  margin: .15rem 0 .5rem;
}
.fx-intro { font-size: .93rem; color: var(--ink-soft); margin: 0 0 1.2rem; }

.fx input, .fx textarea,
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: .62rem .8rem;
}
.fx textarea, .wpcf7-form textarea { min-height: 4.6rem; resize: vertical; }
.fx input:focus-visible, .fx textarea:focus-visible,
.wpcf7-form input:focus-visible, .wpcf7-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Les cases et boutons radio ne prennent pas la largeur des champs texte. */
.fx input[type=checkbox], .fx input[type=radio] { width: auto; padding: 0; }

/* Choix multiples : des pastilles, pas des boutons radio nus. La case
   native reste dans la page, invisible mais accessible au clavier et aux
   lecteurs d'écran ; la pastille suit son état. */
.fx-choix { display: flex; flex-wrap: wrap; gap: .45rem; }
.fx-chip {
  position: relative;
  display: inline-flex; align-items: center;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: .38rem .78rem;
  font-size: .88rem;
  font-weight: 400;
  color: var(--ink-soft);
  cursor: pointer;
}
.fx-chip input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.fx-chip:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--sand);
}
.fx-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Un groupe obligatoire resté sans réponse, signalé par le script. */
.fx-choix.est-manquant { outline: 2px solid #9A3B32; outline-offset: 5px; }
.wpcf7-form .wpcf7-list-item { margin: 0 .45rem .45rem 0; display: inline-block; }
.wpcf7-form .wpcf7-list-item label {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: .38rem .78rem;
  font-size: .88rem;
  font-weight: 400;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.wpcf7-form .wpcf7-list-item input:checked + .wpcf7-list-item-label,
.wpcf7-form .wpcf7-list-item label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--sand);
}

.fx-depot,
.wpcf7-form input[type=file] {
  width: 100%;
  border: 1px dashed var(--line);
  background: var(--paper);
  padding: .85rem 1rem;
  font-size: .88rem;
  font-weight: 400;
  color: var(--ink-mute);
}

/* Le dépôt : le cadre pointillé porte le champ natif, sans second cadre. */
.fx-depot input[type=file] {
  width: 100%; border: 0; padding: 0; background: transparent;
  font-size: .88rem; color: var(--ink-soft);
}

.fx-consent,
.wpcf7-form label.consent {
  display: block;
  background: var(--sand-deep);
  border-left: 2px solid var(--accent);
  padding: 1.1rem 1.3rem;
  margin: 2rem 0 0;
  font-size: .92rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.fx-consent p { margin: 0 0 .55rem; }
.fx-consent p:last-child { margin-bottom: 0; }
.fx-consent-l {
  display: flex; align-items: flex-start; gap: .7rem;
  margin: 0 0 .55rem; cursor: pointer;
}
.fx-consent-l input {
  flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin: .15rem 0 0;
  accent-color: var(--accent);
}
.fx-envoi { margin-top: 1.6rem; }
.fx-envoi .btn { cursor: pointer; }
.fx-envoi .btn:disabled { opacity: .55; cursor: progress; }
/* Ce que le script dit au patient : attente, envoi, ou ce qui manque. */
.fx-etat { margin-top: 1rem; font-size: .92rem; color: var(--ink-soft); }
.fx-etat.est-erreur { color: #9A3B32; }
.fx-etat[hidden], .fx-piege[hidden] { display: none; }
/* Le numéro de référence, sur la page de confirmation. */
.fx-reference {
  background: var(--sand-deep); border-left: 2px solid var(--accent);
  padding: 1rem 1.3rem;
}
.fx-reference strong { font-family: var(--font-sans); letter-spacing: .06em; color: var(--ink); }
.wpcf7-form input[type=submit] {
  margin-top: 1.6rem;
  background: var(--accent);
  color: var(--sand);
  border: 0;
  padding: .8rem 1.9rem;
  font-family: var(--font-sans);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .05em;
  cursor: pointer;
}
.wpcf7-form input[type=submit]:hover { background: var(--accent-deep); }

/* Le filet de sécurité : ce qu'il faut faire si rien n'arrive. */
.fx-filet {
  margin-top: 2.6rem;
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  padding: 1.15rem 1.4rem;
  font-size: .93rem;
  color: var(--ink-soft);
}
.fx-filet .eyebrow { color: var(--accent); margin: 0 0 .5rem; }
.fx-filet p:last-child { margin-bottom: 0; }
.fx-filet strong { color: var(--ink); font-weight: 500; }

/* Le questionnaire à recopier, replié dessous. */
.fx-recopier { margin-top: 2.6rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.fx-recopier > summary {
  cursor: pointer;
  font-size: .92rem;
  color: var(--accent);
  list-style: none;
}
.fx-recopier > summary::-webkit-details-marker { display: none; }
.fx-recopier > summary::before { content: "▸ "; }
.fx-recopier[open] > summary::before { content: "▾ "; }
.fx-recopier > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fx-recopier .qz { margin-top: 1.8rem; }

/* Le progrès de l'envoi, quand les images sont réduites puis téléversées. */
.fx-progres {
  margin-top: 1rem; font-size: .88rem; color: var(--ink-mute);
}
.fx-progres[hidden] { display: none; }


/* ---------- Vignettes des vues demandées ----------
   Un dessin devant chaque dépôt, pour qu'aucun patient n'envoie quatre
   fois la même vue de face. Le dessin s'efface sur mobile, où la place
   manque et où le libellé suffit. */
.fx-vue { display: flex; align-items: center; gap: 1rem; }
.fx-vue > img {
  flex: 0 0 auto;
  width: 62px; height: 62px;
  border: 1px solid var(--line);
}
.fx-vue > div, .fx-vue > span:last-child { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) { .fx-vue > img { display: none; } }

/* ---------- Hôtels voisins ----------
   La distance est l'information principale, la photographie
   l'illustration : c'est elle qui répond à la question du patient. */
.hotels { margin-top: 2.5rem; }
.hotels-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.hotel {
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
/* L'image n'est jamais recadrée : les deux photographies viennent des
   hôtels, l'une en portrait et l'autre en paysage, et couper une façade
   pour aligner deux cartes n'en vaut pas le prix. Elles sont donc posées
   entières sur un fond sable, à hauteur commune. */
.hotel img {
  width: 100%; height: 15rem; object-fit: contain; display: block;
  background: var(--sand-deep);
  border-bottom: 1px solid var(--line);
}
.hotel-corps { padding: 1.15rem 1.25rem 1.35rem; }
.hotel-corps h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.25rem; color: var(--ink); margin: 0 0 .4rem;
}
.hotel-distance {
  font-size: .9rem; color: var(--accent); font-weight: 500;
  margin: 0 0 .7rem; letter-spacing: .01em;
}
.hotel-lien {
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--gold); text-decoration: none;
}
.hotel-lien:hover { text-decoration: underline; }
.hotels-autre {
  margin-top: 1.4rem; font-size: .93rem; color: var(--ink-mute);
}

/* La location de courte durée : c'est le conseil qui engage la sécurité
   du patient, il est signalé comme tel. */
.hotels-location {
  margin-top: 1.8rem;
  background: var(--sand-deep);
  border-left: 2px solid var(--gold);
  padding: 1.2rem 1.4rem;
}
.hotels-location .eyebrow { margin-bottom: .6rem; }
.hotels-location p:last-child { margin-bottom: 0; font-size: .95rem; }

/* ---------- Cas de greffe réparatrice, en trois temps ----------
   Trois images de même cadre, côte à côte sur grand écran, empilées
   sur mobile. Le tracé pré-opératoire est au milieu : c'est lui qui
   montre le travail, et il ne doit pas se perdre en bout de ligne. */
.cas-reparateurs { margin-top: 2.5rem; }
.cas-reparateur { margin-top: 2.5rem; }
.cas-reparateur h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.45rem; color: var(--ink); margin: 0 0 .5rem;
}
.cas-resume { max-width: 64ch; margin: 0 0 1.6rem; }
.cas-suite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
}
.cas-temps { margin: 0; }
.cas-temps img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line);
}
.cas-temps figcaption {
  font-size: .89rem; line-height: 1.55; color: var(--ink-mute);
  margin-top: .8rem;
}
.cas-etiquette {
  display: block;
  font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: .35rem;
}
.cas-mention {
  margin-top: 1.8rem; font-size: .85rem; color: var(--ink-mute);
  padding-top: 1rem; border-top: 1px solid var(--line);
}

/* ---------- Galerie des cas de reconstruction ----------
   Les montages du site réunissent l'avant et l'après dans une seule
   image : une carte par patient suffit. */
.cas-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
.cas-carte {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.cas-carte img {
  width: 100%; height: auto; display: block;
  border-bottom: 1px solid var(--line);
}
.cas-carte-corps { padding: 1rem 1.15rem 1.2rem; }
.cas-carte-corps strong {
  display: block; font-family: var(--font-serif); font-weight: 500;
  font-size: 1.2rem; color: var(--ink); margin-bottom: .25rem;
}
.cas-carte .chiffres {
  display: block; font-size: .87rem; color: var(--accent);
  font-weight: 500; margin-bottom: .6rem;
}
.cas-carte-lien {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--gold);
}
.cas-carte:hover .cas-carte-lien { text-decoration: underline; }