/* ==========================================================================
   OPTIMYS — Page Contact
   27/10/2026 : parcours de prédiagnostic, une question par écran.
   Remplace contact-confirmation-20260925a.css et reprend, à l'identique,
   le bloc <style> qui était écrit dans la page : tout le style de la page
   Contact est désormais dans ce seul fichier.
   ========================================================================== */

/* ── 1. Bandeau de titre compact (repris du bloc <style> de la page) ─────── */
.entete--sanary{padding-top:calc(3.6rem + .6rem + clamp(1rem,3vh,2rem));padding-bottom:clamp(1.25rem,3vh,2rem)}
.entete--sanary .entete__surtitre{margin-bottom:.4rem}
.entete--sanary .titre-1{font-size:min(var(--t-3xl),clamp(1.75rem,1.1rem + 2.2vw,2.75rem));max-width:24ch}
.entete--sanary .chapeau{font-size:clamp(1rem,.95rem + .25vw,1.125rem);margin-top:.6rem;max-width:52rem}
#rendez-vous{padding-top:clamp(1.25rem,3vh,2.25rem)}
#rendez-vous .titre-2{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem)}
@media (max-width:63.999em){
  #rendez-vous .prediag{gap:var(--e-6)}
  #rendez-vous .pile-large{display:contents}
  #rendez-vous .pile-large>*{margin-top:0}
  #rendez-vous .pile-large>div:first-child{order:1}
  #rendez-vous .rdv-carte{order:2}
  #rendez-vous .canaux{order:3}
  #rendez-vous .deroule{order:4}
  #rendez-vous .contexte{order:5}
}

/* ── 2. La carte : le filet du haut devient la jauge de progression ─────── */
.prediag-form[hidden]{display:none !important}

main .rdv-carte.rdv-carte--pq{
  background:
    linear-gradient(rgba(242,155,69,.18),rgba(242,155,69,.18)) top left/100% 4px no-repeat,
    linear-gradient(180deg,#fff 0,#fbf8f3 100%);
}
main .rdv-carte.rdv-carte--pq::before{
  right:auto;
  width:calc(var(--progression,.2) * 100%);
  background:linear-gradient(90deg,#f6b067,var(--orange));
  transition:width 520ms var(--courbe);
}

/* La carte garde sa hauteur naturelle : elle ne s'étire plus sur toute la colonne. */
#rendez-vous .rdv-carte{align-self:start}

/* ── 3. Structure du parcours ────────────────────────────────────────────── */
.pq{gap:0}
.pq .pq-etape{border:0;margin:0;padding:0;min-width:0}

.pq__tete{
  display:flex;align-items:center;gap:1rem;
  min-height:2.25rem;
  margin-bottom:clamp(1.25rem,3vw,2rem);
}
.pq__surtitre{
  margin:0;
  font:600 .75rem/1 var(--f-texte);
  letter-spacing:.12em;text-transform:uppercase;
  color:#a3561c;
}
.pq__surtitre[hidden]{display:none}
.pq__retour{
  display:inline-flex;align-items:center;gap:.35rem;
  margin-left:-.35rem;padding:.4rem .35rem;
  background:none;border:0;border-radius:.5rem;
  font:600 var(--t-s)/1 var(--f-texte);color:#5c574f;
  cursor:pointer;
  transition:color var(--duree) var(--courbe);
}
.pq__retour[hidden]{display:none}
.pq__retour svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--duree) var(--courbe)}
.pq__retour:hover{color:#17161c}
.pq__retour:hover svg{transform:translateX(-2px)}
.pq__retour:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.pq__compteur{
  margin:0 0 0 auto;
  font:600 .875rem/1 var(--f-titre);
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  color:#17161c;
}
.pq__total{color:#9a9489}

/* La question : c'est elle qui porte l'écran. */
.pq .pq-etape__question{
  display:block;width:100%;
  margin:0 0 1.5rem;padding:0;
  max-width:22ch;
  font-family:var(--f-titre);font-weight:650;
  font-size:clamp(1.625rem,1.2rem + 1.4vw,2.25rem);
  line-height:1.08;letter-spacing:-.018em;
  color:#17161c;
  text-wrap:balance;
}
.pq .pq-etape__question:focus{outline:0}
.pq-insecable{white-space:nowrap}
.pq .pq-etape__aide{margin:-1rem 0 1.5rem;font-size:var(--t-s);color:#5c574f}

/* ── 4. Question 1 : les réponses en lignes pleine largeur ──────────────── */
.pq-choix-liste{
  display:grid;
  border:1px solid #e7e1d7;border-radius:1rem;
  overflow:hidden;background:#fff;
}
.pq-choix{
  position:relative;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;
  min-height:3.9rem;padding:.9rem 1.15rem;
  cursor:pointer;
  transition:background-color var(--duree) var(--courbe);
}
.pq-choix+.pq-choix{border-top:1px solid #efe9df}
.pq-choix input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pq-choix__corps{display:grid;gap:.15rem}
.pq-choix__texte{font:600 1.0625rem/1.3 var(--f-titre);color:#17161c;transition:color var(--duree) var(--courbe)}
.pq-choix__detail{font-size:.875rem;line-height:1.4;color:#5c574f;transition:color var(--duree) var(--courbe)}
.pq-choix__fleche{
  width:1.25rem;height:1.25rem;
  fill:none;stroke:#17161c;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  opacity:.28;transform:translateX(-4px);
  transition:transform 240ms var(--courbe),opacity var(--duree) var(--courbe),stroke var(--duree) var(--courbe);
}
.pq-choix:hover{background:#f8f4ec}
.pq-choix:hover .pq-choix__fleche{opacity:1;transform:none;stroke:#a3561c}
.pq-choix.pq-choisi{background:#17161c}
.pq-choix.pq-choisi .pq-choix__texte{color:#fbf8f3}
.pq-choix.pq-choisi .pq-choix__detail{color:#c9c4bc}
.pq-choix.pq-choisi .pq-choix__fleche{opacity:1;transform:none;stroke:var(--orange)}
.pq-choix:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:-2px;z-index:1}

.pq-etape__precision{margin-top:1.25rem}
.pq-etape__precision[hidden]{display:none}
.pq #besoin-error{margin-top:.75rem}

/* ── 5. Champs : un simple trait, comme sur une page imprimée ───────────── */
.pq .champs-duo{gap:1.5rem 1.75rem}
.pq .champ{gap:.35rem}
.pq .champ label{
  font:600 .75rem/1.2 var(--f-texte);
  letter-spacing:.08em;text-transform:uppercase;
  color:#5c574f;
}
/* Question posée par un label (question 2) : on rétablit l'écriture des questions. */
.pq .champ--seul label.pq-etape__question{
  margin-bottom:1rem;
  font-family:var(--f-titre);font-weight:650;
  font-size:clamp(1.625rem,1.2rem + 1.4vw,2.25rem);
  line-height:1.08;letter-spacing:-.018em;
  text-transform:none;color:#17161c;
}

main .rdv-carte .pq .champ input,
main .rdv-carte .pq .champ textarea{
  min-height:3rem;
  padding:.5rem 0 .6rem;
  background:transparent;
  border:0;border-bottom:1.5px solid #cfc6b8;border-radius:0;
  box-shadow:none;
  font:400 clamp(1.125rem,1rem + .45vw,1.375rem)/1.35 var(--f-texte);
  color:#17161c;
  transition:border-color var(--duree) var(--courbe),box-shadow var(--duree) var(--courbe);
}
main .rdv-carte .pq .champ textarea{min-height:0;margin-top:0;resize:none}
main .rdv-carte .pq .champ input::placeholder,
main .rdv-carte .pq .champ textarea::placeholder{color:#b3ab9f}
main .rdv-carte .pq .champ input:hover,
main .rdv-carte .pq .champ textarea:hover{border-color:#9a9489}
main .rdv-carte .pq .champ input:focus-visible,
main .rdv-carte .pq .champ textarea:focus-visible{
  outline:0;border-color:var(--orange);
  box-shadow:0 1.5px 0 0 var(--orange);
}
main .rdv-carte .pq .champ [aria-invalid=true]{border-color:#b3261e}
.pq .champ__erreur{font-size:.875rem}

/* ── 6. Question 5 : l'agenda, sans cadre dans le cadre ─────────────────── */
.pq .agenda-bloc{padding:0;border:0;background:none}
.pq .agenda-bloc__nav{margin:0 0 .85rem}
.pq .agenda-bloc__nav button{display:grid;place-items:center;padding:0}
.pq .agenda-bloc__nav svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pq .agenda-bloc__jour-choisi{margin:1.25rem 0 .7rem;text-transform:none}
.pq #creneau-error{margin-top:.75rem}

.pq .case{
  margin-top:1.5rem;padding-top:1.25rem;
  border-top:1px solid #efe9df;
  font-size:.8125rem;line-height:1.5;
}
.pq #rgpd-error{margin-top:.5rem}

/* ── 7. Bas de carte : un seul bouton, et Entrée pour les habitués ──────── */
.pq__pied{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.1rem;
  margin-top:clamp(1.75rem,3.5vw,2.25rem);
}
.pq__suivant{gap:.6rem}
.pq__suivant svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--duree) var(--courbe)}
.pq__suivant:hover svg{transform:translateX(3px)}
.pq__suivant[disabled] svg{display:none}
.pq__astuce{margin:0;font-size:.8125rem;color:#5c574f}
.pq__astuce kbd{
  display:inline-block;margin-left:.2rem;padding:.28rem .45rem;
  font:600 .75rem/1 var(--f-texte);color:#17161c;
  background:#fff;border:1px solid #ddd6ca;border-bottom-width:2px;border-radius:.4rem;
}
@media (hover:none),(pointer:coarse),(max-width:40em){.pq__astuce{display:none}}
@media (max-width:40em){.pq__suivant{flex:1 1 100%;padding-inline:1.25rem;white-space:nowrap}}

/* ── 8. Une question à la fois (seulement si le script tourne) ─────────── */
.pq:not(.pq--actif) .pq__tete,
.pq:not(.pq--actif) .pq__astuce{display:none}
.pq:not(.pq--actif) .pq-etape+.pq-etape{margin-top:2.25rem;padding-top:2.25rem;border-top:1px solid #efe9df}

.pq--actif .pq-etape:not(.pq-active){display:none}
.pq--actif .pq__scene{transition:height 300ms var(--courbe)}
.pq--actif .pq__scene.pq-transition{overflow:hidden}
.pq--actif .pq-etape{transition:opacity 220ms var(--courbe),transform 280ms var(--courbe)}
.pq--actif .pq-etape.pq-sort{opacity:0;transform:translateY(-8px)}
.pq--actif .pq-etape.pq-entre{opacity:0;transform:translateY(14px)}
.pq--actif.pq--retour .pq-etape.pq-sort{transform:translateY(8px)}
.pq--actif.pq--retour .pq-etape.pq-entre{transform:translateY(-14px)}

@media (prefers-reduced-motion:reduce){
  main .rdv-carte.rdv-carte--pq::before,
  .pq--actif .pq__scene,
  .pq--actif .pq-etape,
  .pq-choix,.pq-choix__fleche,.pq__suivant svg,.pq__retour svg{transition:none}
}

/* ── 9. Confirmation : même écriture que les questions ─────────────────── */
main .rdv-carte--pq #diagnostic-success{
  padding:.25rem 0 0;
  background:none;border:0;border-radius:0;
}
main .rdv-carte--pq #diagnostic-success::before{
  position:static;
  width:3rem;height:3rem;margin-bottom:1.5rem;
  font-size:1.25rem;
  box-shadow:0 0 0 6px rgba(242,155,69,.16);
}
main .rdv-carte--pq #diagnostic-success h2{
  max-width:20ch;margin-bottom:.85rem;
  font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);
  line-height:1.06;letter-spacing:-.02em;
}
main .rdv-carte--pq #diagnostic-success p{max-width:36ch;font-size:var(--t-m);line-height:1.55;color:#3d3a35}
main .rdv-carte--pq #diagnostic-success:focus{outline:0}
main .rdv-carte--pq #diagnostic-erreur{margin-top:1.25rem}