/* ==========================================================================
   Page rendez-vous
   Même famille que les pages prestations : fond noir, filets, or en accent.
   Ce fichier ne contient que ce qui est propre à la prise de contact, c'est
   à dire les deux choses qu'aucune autre page n'a : le calendrier Calendly
   et le formulaire.

   Le parti pris : deux voies au même niveau, jamais l'une au-dessus de
   l'autre. Celui qui sait ce qu'il veut prend un créneau ; celui qui doit
   décrire son bien écrit. Les champs sont des filets, pas des boîtes : un
   formulaire encadré ferait meuble de bureau au milieu d'une page qui n'a
   que des lignes.
   ========================================================================== */

/* ==========================================================================
   Les deux voies
   Sous 1000 px elles s'empilent, le calendrier d'abord. Au-dessus elles se
   partagent la largeur, séparée par un filet vertical unique.
   ========================================================================== */

.rdv-voies {
  display: grid;
  gap: clamp(56px, 8vh, 96px);
  align-items: start;
}

.rdv-voie-tete {
  padding-bottom: clamp(26px, 4vh, 40px);
}

/* Le numéro de voie. Deux voies, donc deux nombres : un décompte réel,
   pas une numérotation décorative. */
.rdv-voie-num {
  display: block;
  font-family: var(--font-b);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or);
}

.rdv-voie-h2 {
  margin-top: 16px;
  font-family: var(--font-h);
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--blanc);
}

.rdv-voie-h2 em { font-style: italic; color: var(--or); }

.rdv-voie-p {
  max-width: 44ch;
  margin-top: 16px;
  font-family: var(--font-b);
  font-size: 0.94rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--blanc-mut);
}

/* ==========================================================================
   Le calendrier
   L'iframe Calendly est peinte par ses propres paramètres d'URL, pas par
   nous : la seule chose que le CSS peut tenir, c'est le cadre autour. Un
   filet en tête, comme les fiches de niveau des pages prestations.
   ========================================================================== */

.rdv-cal {
  position: relative;
  margin-top: clamp(6px, 1.4vh, 14px);
  border-top: 1px solid var(--filet);
  background: var(--noir-creuse);
}

.rdv-cal::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ez);
}

.rdv-cal.on::before { transform: scaleX(1); }

/* Calendly injecte son iframe ici. La hauteur est reprise en ligne par le
   script d'ajustement : sans lui, le widget garde une barre de défilement
   interne qui coupe le bouton de confirmation. */
.rdv-cal .calendly-inline-widget {
  width: 100%;
  min-width: 0;
}

.rdv-cal-note {
  margin-top: 18px;
  padding-left: 22px;
  position: relative;
  font-family: var(--font-b);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--blanc-fnt);
}

/* L'alvéole en puce, motif de la maison. */
.rdv-cal-note::before {
  content: "";
  position: absolute;
  inset-block-start: 0.62em;
  inset-inline-start: 0;
  width: 8px;
  height: 9px;
  background: var(--or);
  opacity: 0.8;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ==========================================================================
   Le formulaire
   Chaque champ est une ligne, pas une boîte : filet bas au repos, or au
   focus. Le libellé reste visible en permanence au-dessus du champ, jamais
   en placeholder seul, sinon il disparaît dès la première frappe.
   ========================================================================== */

.rdv-form {
  display: grid;
  gap: clamp(22px, 3vh, 30px);
  margin-top: clamp(6px, 1.4vh, 14px);
}

.rdv-row {
  display: grid;
  gap: 9px;
}

.rdv-row label {
  font-family: var(--font-b);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
  transition: color .35s var(--ez);
}

.rdv-row:focus-within label { color: var(--or); }

.rdv-row input,
.rdv-row select,
.rdv-row textarea {
  width: 100%;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--filet);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-b);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--blanc);
  transition: border-color .35s var(--ez);
  -webkit-appearance: none;
  appearance: none;
}

.rdv-row input::placeholder,
.rdv-row textarea::placeholder {
  color: rgba(250, 250, 250, 0.3);
  font-weight: 300;
}

.rdv-row input:hover,
.rdv-row select:hover,
.rdv-row textarea:hover { border-color: var(--filet-fort); }

.rdv-row input:focus,
.rdv-row select:focus,
.rdv-row textarea:focus {
  outline: 0;
  border-color: var(--or);
}

/* Le contour de focus reste visible pour ceux qui naviguent au clavier :
   le filet or seul ne suffit pas à signaler la cible active. */
.rdv-row input:focus-visible,
.rdv-row select:focus-visible,
.rdv-row textarea:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 4px;
}

.rdv-row textarea {
  min-height: 132px;
  resize: vertical;
}

/* Le chevron du menu déroulant, dessiné en CSS : celui du système est clair
   et devient invisible sur fond noir. */
.rdv-sel {
  position: relative;
}

.rdv-sel::after {
  content: "";
  position: absolute;
  inset-block-end: 20px;
  inset-inline-end: 4px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--blanc-mut);
  border-bottom: 1px solid var(--blanc-mut);
  transform: rotate(45deg);
  pointer-events: none;
  transition: border-color .35s var(--ez);
}

.rdv-sel:focus-within::after { border-color: var(--or); }

.rdv-row select { padding-right: 26px; cursor: pointer; }

/* La liste déroulante ouverte est peinte par le système : on lui donne au
   moins un fond sombre pour que le texte blanc reste lisible. */
.rdv-row select option {
  background: #141414;
  color: #fafafa;
}

.rdv-form .btn--gold { justify-self: start; margin-top: 6px; }

.rdv-form-note {
  font-family: var(--font-b);
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--blanc-fnt);
}

/* ---- Le retour d'envoi --------------------------------------------------- */

/* Masqué par défaut, révélé par le script selon le paramètre d'URL. Le fond
   reste sombre : un bandeau vert clair au milieu d'une page noire casserait
   la page entière pour dire une bonne nouvelle. */
.rdv-msg {
  display: none;
  padding: 18px 20px;
  border-left: 2px solid var(--filet-fort);
  background: var(--noir-creuse);
  font-family: var(--font-b);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--blanc-mut);
}

.rdv-msg.est-visible { display: block; }
.rdv-msg--ok { border-left-color: var(--or); color: var(--blanc); }
.rdv-msg--ko { border-left-color: #c2603f; color: var(--blanc); }

/* ==========================================================================
   Joindre quelqu'un tout de suite
   Trois lignes, mêmes filets que les piliers des pages prestations.
   ========================================================================== */

.rdv-direct { display: grid; gap: 0; }

.rdv-d {
  display: grid;
  gap: 6px;
  padding: clamp(22px, 3vh, 30px) 0;
  border-top: 1px solid var(--filet);
  transition: border-color .4s var(--ez);
}

.rdv-direct .rdv-d:last-child { border-bottom: 1px solid var(--filet); }

.rdv-d-lbl {
  font-family: var(--font-b);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
}

.rdv-d-v {
  font-family: var(--font-h);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--blanc);
  transition: color .35s var(--ez);
}

a.rdv-d-v:hover { color: var(--or); }

.rdv-d-p {
  font-family: var(--font-b);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--blanc-mut);
}

/* ==========================================================================
   1000 px : les deux voies se partagent la largeur
   Le calendrier prend la part la plus large : c'est lui qui a besoin de
   place, un formulaire tient dans une colonne étroite.
   ========================================================================== */

@media (min-width: 1000px) {
  /* L'écart de colonne est tenu par le rembourrage de la seconde voie, pas
     par `column-gap` : c'est ce qui permet au filet de tomber pile entre
     les deux et de disparaître de lui-même quand les voies s'empilent. */
  .rdv-voies {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    column-gap: 0;
  }

  .rdv-voie--form {
    padding-left: clamp(44px, 4.6vw, 80px);
    margin-left: clamp(44px, 4.6vw, 80px);
    border-left: 1px solid var(--filet);
  }
}

/* ==========================================================================
   Réduction des animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .rdv-cal::before { transform: scaleX(1); transition: none; }
  .rdv-row input,
  .rdv-row select,
  .rdv-row textarea,
  .rdv-row label,
  .rdv-sel::after,
  .rdv-d-v { transition: none; }
}