/* Le parcours de rendez-vous. Feuille commune à tout l'écosystème, elle
   n'invente aucune couleur : elle consomme les variables de la charte, donc
   elle se pose telle quelle sur les quatre domaines. */

.rdv-fond{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.86);
  backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:22px}
.rdv-fond.ouvert{display:flex}
.rdv-boite{background:var(--surface,#0B0B0B);border-radius:0;width:100%;max-width:560px;
  max-height:92vh;overflow-y:auto;padding:34px 36px 38px;position:relative;animation:rdv-entre .22s cubic-bezier(.22,.61,.36,1)}
@keyframes rdv-entre{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rdv-boite{animation:none}}

.rdv-x{position:absolute;top:16px;right:18px;background:none;border:none;cursor:pointer;
  font:inherit;font-size:26px;line-height:1;color:var(--gris,#E3E3E3);padding:6px 9px;border-radius:0}
.rdv-x:hover{background:var(--carte,#0B0B0B);color:var(--enc,#FFFFFF)}

.rdv-eyebrow{font-family:var(--corps);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris-clair);margin:0 0 20px}

/* La jauge. Elle ne décore pas : sans elle, on ne sait pas combien il reste,
   et c'est exactement là qu'on abandonne. */
.rdv-jauge{height:3px;border-radius:0;background:rgba(255,255,255,.16);overflow:hidden;margin-bottom:22px}
.rdv-jauge i{display:block;height:100%;background:var(--rose,#E769BB);border-radius:0;
  transition:width .3s cubic-bezier(.22,.61,.36,1)}

.rdv-no{font-size:12px;color:var(--gris-clair,#D4D4D4);margin:0 0 8px;letter-spacing:.02em}
.rdv-boite h3{font-family:var(--titre);font-weight:400;font-size:28px;line-height:1.2;
  letter-spacing:-.015em;color:var(--enc,#FFFFFF);margin:0 0 22px}
.rdv-sous{font-size:14px;line-height:1.6;color:var(--gris,#E3E3E3);margin:16px 0 0}

/* Les options. Cliquables en entier, jamais une case à cocher de 14 px : sur
   un téléphone, c'est la cible qui décide si le formulaire se remplit. */
.rdv-opts{display:flex;flex-direction:column;gap:10px}
.rdv-opts button{font:inherit;font-size:16px;line-height:1.4;text-align:left;cursor:pointer;
  background:var(--carte,#0B0B0B);color:var(--enc,#FFFFFF);border:none;border-radius:0;
  padding:16px 20px;transition:transform .16s cubic-bezier(.22,.61,.36,1),box-shadow .16s ease,background-color .16s ease;
  box-shadow:none}
.rdv-opts button:hover{background:rgba(231,105,187,.12);transform:translateY(-2px);
  box-shadow:none}

.rdv-retour{margin-top:18px;background:none;border:none;cursor:pointer;font:inherit;font-size:14px;
  color:var(--gris,#E3E3E3);text-decoration:underline;text-underline-offset:3px;padding:4px 0}
.rdv-retour:hover{color:var(--enc,#FFFFFF)}

.rdv-form{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.rdv-form input{font:inherit;font-size:16px;padding:15px 17px;border-radius:0;
  border:1.5px solid rgba(255,255,255,.16);background:var(--carte,#0B0B0B);color:var(--enc,#FFFFFF);
  transition:border-color .16s ease}
.rdv-form input:focus{outline:none;border-color:var(--rose,#E769BB);
  box-shadow:none}
.rdv-form input::placeholder{color:var(--gris-clair,#D4D4D4)}
.rdv-go{font:inherit;font-family:var(--titre);font-weight:400;font-size:16px;letter-spacing:-.01em;
  /* Plaque blanche comme les autres CTA : du noir sur le magenta plein donne
     Lc 48,7, sous le plancher. Le magenta reste un designateur, pas un fond. */
  cursor:pointer;background:var(--blanc,#FFFFFF);color:#000;border:none;
  border-radius:0;padding:17px 22px;margin-top:4px;
  transition:transform .16s cubic-bezier(.22,.61,.36,1),background-color .16s ease}
.rdv-go:hover,.rdv-go:focus-visible{background:var(--rose-plaque,#F4C9E7);color:#000;
  transform:translateY(-2px)}
.rdv-err{margin:2px 0 0;font-size:14px;color:var(--enc);line-height:1.5;
  border-left:2px solid var(--rose);padding-left:10px}

.rdv-cal{border-radius:0;overflow:hidden;margin-top:4px;background:var(--carte,#0B0B0B)}
.rdv-cal iframe{width:100%;height:620px;border:0;display:block}

@media(max-width:620px){
  .rdv-fond{padding:0;align-items:flex-end}
  .rdv-boite{max-width:none;max-height:94vh;border-radius:0;padding:28px 22px 32px}
  .rdv-boite h3{font-size:21px}
  .rdv-cal iframe{height:70vh}
}

/* ---------- Ajouts du 26/07/2026 : le formulaire porte maintenant le
     téléphone (obligatoire pour le speed-to-lead WhatsApp) et un piège à
     robots. ---------- */

/* Le piège doit être invisible à l'œil ET absent des lecteurs d'écran, sans
   `display:none` : certains robots ignorent les champs masqués de cette façon,
   et un champ que le robot ne voit pas ne l'attrape pas. */
.rdv-piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* La ligne qui désamorce la question « pourquoi mon numéro ». Elle vit sous le
   bouton, pas au-dessus : posée avant, elle donne un doute à quelqu'un qui
   n'en avait pas. */
.rdv-note{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--gris-clair,#D4D4D4)}

/* Le bouton en cours d'envoi : il doit se voir désactivé, sinon on double-clique
   et on crée deux réservations pour un seul visiteur. */
.rdv-go[disabled]{opacity:.6;cursor:default;transform:none}
.rdv-go[disabled]:hover{background:var(--blanc,#FFFFFF);transform:none}

/* Calendly met une quinzaine de secondes à répondre. Quinze secondes de blanc
   après avoir rempli un formulaire, c'est un abandon : le visiteur croit que
   ça a cassé. On dit ce qui se passe, et le message disparaît sous l'iframe
   dès qu'elle a peint. */
.rdv-cal{position:relative}
.rdv-chargement{position:absolute;top:0;left:0;right:0;text-align:center;
  padding:38px 20px 0;margin:0;font-size:14px;color:var(--gris-clair,#D4D4D4)}
.rdv-cal iframe{position:relative;z-index:1;background:transparent}

/* L'étape calendrier a besoin de place, les autres non (26/07/2026).
   Mesuré en réservant vraiment : à 560 px de large, Calendly passe en colonne
   unique, son widget réclame plus de 1200 px de haut, et dans un cadre de
   620 px on ne voit que le titre de l'événement. Les jours sont hors d'atteinte,
   donc personne ne réserve. */
.rdv-boite.cal-ouvert{max-width:960px}
/* 1240 px, et ce n'est pas un chiffre au hasard : c'est la hauteur de l'écran
   Calendly le PLUS LONG du parcours (« Indiquez vos informations », avec le
   rappel du créneau, les deux champs, les invités et la zone de message).
   À 760 px, on voyait le formulaire et pas le bouton de confirmation — une
   iframe de hauteur fixe ne défile pas d'elle-même, donc le dernier geste du
   tunnel était littéralement hors d'atteinte. On dimensionne sur le pire cas
   et c'est la modale qui défile ; les écrans plus courts laissent du blanc en
   bas, ce qui ne coûte rien à personne. */
.rdv-boite.cal-ouvert .rdv-cal iframe{height:1240px}
@media(max-width:620px){
  /* Sur téléphone Calendly est de toute façon en colonne : on lui donne
     l'écran, et c'est la modale qui défile. */
  .rdv-boite.cal-ouvert .rdv-cal iframe{height:78vh}
}