/* ─────────────────────────────────────────────────────────
   Émotivance · /contact — la page à ne pas casser.

   Le tunnel de réservation est piloté par deux scripts inline
   du gabarit. Ils lisent le DOM par IDENTIFIANT et par
   POSITION : `form.querySelectorAll('[data-toggle-group]')[n]`
   où 0 = type, 1 = format, 2 = jours, 3 = créneaux. L'ordre de
   ces quatre groupes dans le formulaire est donc contractuel.

   Cette feuille ne fait que rhabiller : aucun identifiant,
   aucune classe fonctionnelle (`.optchip`, `.day`, `.slot`,
   `.week-btn`, `.is-on`) n'est renommé.

   Préfixe `ct-` pour les pièces propres à la page.
   ───────────────────────────────────────────────────────── */


/* ═══ Hero ════════════════════════════════════════════ */

.ct-hero { padding-block: clamp(40px, 2rem + 3vw, 76px) clamp(28px, 2rem + 1vw, 48px); }
.ct-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}
.ct-hero__title { max-width: 16ch; font-size: var(--t-h1); }
.ct-hero__text  { max-width: 58ch; }


/* ═══ Réservation ═════════════════════════════════════
   Les colonnes s'inversent par rapport à l'ancienne page :
   formulaire à gauche, coordonnées à droite dans un cartouche
   en verre posé sur la photographie du cabinet (§8).         */

.ct-booking { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 1000px) {
  .ct-booking { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--sp-8); }
  /* La colonne de droite suit la lecture du formulaire. */
  .ct-booking__aside { position: sticky; top: calc(var(--header-h, 68px) + var(--sp-5)); }
}

.ct-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: clamp(24px, 2rem + 1vw, 44px);
  border-radius: var(--r-2xl);
  background: var(--white);
  border: 1px solid var(--line-gold);
}
.ct-form__title { font-size: var(--t-h3); }

/* Une étape du formulaire : numéro en sur-titre, puis commandes. */
.ct-step { display: flex; flex-direction: column; gap: var(--sp-3); }
.ct-step__label {
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ─ Type et format — pastilles à deux lignes ─────────── */

.ct-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
/* Un seul format possible (premier échange → téléphone) : pleine largeur. */
.ct-options--single { grid-template-columns: minmax(0, 1fr); }

.optchip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 18px;
  border: 1px solid var(--ornament-deep);
  border-radius: var(--r-lg);
  background: var(--primary-4);
  text-align: left;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color     var(--dur-fast) var(--ease);
}
/* `display: flex` l'emporterait sur la règle [hidden] du navigateur : les
   formats masqués selon le type de rendez-vous doivent sortir de la grille. */
.optchip[hidden] { display: none; }
.optchip:hover { border-color: var(--line-strong); }
.optchip.is-on {
  background: var(--accent);
  border-color: var(--accent);
}
.optchip__t { font-size: var(--t-md); font-weight: 600; color: var(--ink); }
.optchip__d { font-size: var(--t-xs); color: var(--ink-3); }
.optchip.is-on .optchip__t { color: var(--accent-ink); }
.optchip.is-on .optchip__d { color: color-mix(in srgb, var(--accent-ink) 80%, transparent); }

/* ─ Navigation de semaine ────────────────────────────── */

.booking-week-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.booking-week-controls .body-xs { font-size: var(--t-xs); color: var(--ink-2); }

.week-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--ornament-deep);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.week-btn:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.week-btn:disabled { opacity: 0.35; pointer-events: none; }

/* ─ Jours — six colonnes, du lundi au samedi ─────────── */

#booking-days {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-2);
}
.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  border: 1px solid var(--ornament-deep);
  border-radius: var(--r-md);
  background: var(--primary-4);
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color     var(--dur-fast) var(--ease),
    color            var(--dur-fast) var(--ease);
}
.day:hover:not(:disabled) { border-color: var(--line-strong); }
.day__dow { font-size: var(--t-xs); color: var(--ink-3); }
.day__n {
  font-family: var(--font-heading);
  font-size: var(--t-lg);
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.day.is-on { background: var(--accent); border-color: var(--accent); }
.day.is-on .day__dow { color: color-mix(in srgb, var(--accent-ink) 80%, transparent); }
.day.is-on .day__n   { color: var(--accent-ink); }
/* Aujourd'hui : liseré discret, même si le jour n'est pas choisi. */
.day.is-today:not(.is-on) { border-color: var(--ornament); }
.day:disabled { pointer-events: none; }

/* ─ Créneaux — générés par le script inline ──────────── */

#booking-slots { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.slot {
  padding: 8px 14px;
  border: 1px solid var(--ornament-deep);
  border-radius: var(--r-pill);
  background: var(--primary-4);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color     var(--dur-fast) var(--ease),
    color            var(--dur-fast) var(--ease);
}
.slot:hover { border-color: var(--line-strong); color: var(--ink); }
.slot.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ─ Coordonnées et pied du formulaire ────────────────── */

.ct-fields { display: flex; flex-direction: column; gap: var(--sp-3); }
.ct-fields__row { display: grid; gap: var(--sp-3); }
@media (min-width: 560px) { .ct-fields__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ct-consent { align-items: flex-start; }
.ct-consent span { font-size: var(--t-xs); color: var(--ink-2); }
.ct-consent a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

#bk-submit { justify-content: center; }
.ct-footnote { font-size: var(--t-xs); color: var(--ink-3); text-align: center; }

/* Message d'état — le script inline pose des couleurs en style
   inline ; on garde ici la forme, lui garde le fond. */
#bk-alert {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}

/* ═══ Colonne coordonnées ═════════════════════════════
   Cartouche en verre posé sur la photographie du cabinet.    */

.ct-aside__media { position: relative; }
.ct-aside__media .media { min-height: 340px; }

.ct-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  list-style: none;
}
.ct-contact-list li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.ct-contact-list svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.ct-contact-list__label {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  opacity: 0.75;
}
.ct-contact-list__value { font-size: var(--t-md); font-weight: 600; white-space: pre-line; }
/* Dans le cartouche en verre, tout le texte passe en blanc. */
.glass .ct-contact-list { color: var(--white); }
.glass .ct-contact-list a { color: var(--white); }

/* Note « Premier échange offert » — aplat sable sous le cartouche. */
.ct-note {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.ct-note b { font-size: var(--t-md); color: var(--ink); }
.ct-note span { font-size: var(--t-sm); color: var(--ink-2); }


/* ═══ Le cabinet ══════════════════════════════════════
   Version sobre : le fond n'est pas une photographie mais le
   plan lui-même, surmonté du cartouche (§8). Aucun visuel
   prélevé sur le budget de sept.                             */

/* Couture réservation → cabinet : la section réservation porte
   `section-bot` et non `.section`, la règle de couture de base.css
   ne l'attrape donc pas. Les deux respirations pleines s'ajoutaient
   (≈ 400 px sur grand écran) et creusaient une bande vide avant le
   cartouche. On les ramène au même écart que les autres coutures. */
#booking { padding-bottom: var(--section-y-seam); }
.section[data-cms-section="map"] { padding-top: var(--section-y-seam); }

.ct-map__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.ct-map__frame { position: relative; }
.ct-map__frame .media { aspect-ratio: 16 / 7; }
@media (max-width: 700px) { .ct-map__frame .media { aspect-ratio: 4 / 3; } }
.ct-map__frame .glass { max-width: 420px; }

/* Le plan Google occupe tout le cadre. Le fond crème reste visible
   tant que l'iframe n'a pas répondu : pas de rectangle blanc. */
.ct-map__media { background: var(--primary-5); }
/* L'anneau champagne du cadre est un box-shadow interne : l'iframe le
   recouvrirait. On le redessine par-dessus le plan. */
.ct-map__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line-gold);
  pointer-events: none;
}
.ct-map__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Google rend un plan très saturé face à la palette crème du site :
     on le désature juste assez pour qu'il s'y pose, sans rendre les
     noms de rues illisibles. */
  filter: saturate(0.82) contrast(1.02);
}

/* Pas de halo ici : sur une photographie il fait lire le cartouche,
   sur un plan il ne fait que voiler les noms de rues. Le cartouche
   porte donc lui-même son fond, presque opaque.
   Posé au-dessus du plan, il ne doit pas intercepter le glissement
   de la carte — seul le lien reste cliquable. */
.ct-map__card {
  z-index: 4;
  pointer-events: none;
  background: color-mix(in srgb, var(--primary-1) 88%, transparent);
  border-color: color-mix(in srgb, var(--white) 26%, transparent);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--primary-3) 28%, transparent);
}
.ct-map__card a { pointer-events: auto; }
/* Google exige que son logo — posé en bas à gauche du plan — reste
   visible : le cartouche se soulève au-dessus de ce bandeau. */
.ct-map__card { bottom: calc(var(--sp-4) + 30px); }

/* Sous 900 px, le cadre est trop étroit pour porter le cartouche sans
   couvrir le marqueur : celui-ci descend sous le plan et redevient un
   bloc normal. */
@media (max-width: 900px) {
  .ct-map__card {
    position: static;
    max-width: none;
    margin-top: var(--sp-3);
    pointer-events: auto;
  }
}

.ct-map__dir {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--white) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 34%, transparent);
  color: var(--white);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ct-map__dir:hover,
.ct-map__dir:focus-visible {
  background: color-mix(in srgb, var(--white) 26%, transparent);
  border-color: color-mix(in srgb, var(--white) 55%, transparent);
}
.ct-map__dir svg { width: 16px; height: 16px; flex: none; }


/* ═══ FAQ ═════════════════════════════════════════════
   Deux colonnes : l'accordéon, et une carte « encore des
   questions ? » qui ouvre une porte vers le contact direct.  */

.ct-faq { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 1000px) {
  .ct-faq { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: var(--sp-8); }
  .ct-faq__aside { position: sticky; top: calc(var(--header-h, 68px) + var(--sp-5)); }
}

.ct-faq__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
/* Les réponses viennent du CMS en texte simple : les sauts de
   ligne y font les paragraphes. */
.ct-faq__answer { white-space: pre-line; }

.ct-faq__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-7);
  border-radius: var(--r-2xl);
  background: var(--surface);
  border: 1px solid var(--line-gold);
}
.ct-faq__card h3 { font-size: var(--t-h4); }
.ct-faq__card p { font-size: var(--t-md); }


/* ═════════════════════════════════════════════════════
   Téléphone — < 600px

   Le formulaire de réservation est la page : tout le reste lui
   cède de la place. Sur 320px, ses 24px de rembourrage laissaient
   32px par colonne de jour — la sélection devenait un jeu
   d'adresse.
   ───────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .ct-hero { padding-block: 26px 18px; }

  .ct-form { padding: var(--sp-4); gap: var(--sp-5); }
  .ct-form__title { font-size: var(--t-h4); }

  /* L'intitulé d'étape et la navigation de semaine se disputaient
     une seule ligne : l'intitulé passait sur deux lignes contre les
     flèches. Ils s'empilent. */
  #booking-week > .row.between {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
  .booking-week-controls { width: 100%; justify-content: space-between; }

  /* Six jours sur une largeur de téléphone : chaque colonne récupère
     les 16px que le rembourrage lui prenait. */
  #booking-days { gap: 6px; }
  .day { padding: 8px 2px; border-radius: var(--r-sm); }
  .day__n { font-size: var(--t-base); }

  .slot { padding: 10px 14px; }

  .ct-faq__card { padding: var(--sp-5); }
  .ct-faq__head { margin-bottom: var(--sp-5); }
}

/* Au doigt, les commandes du calendrier respectent 44×44 : les
   flèches de semaine gardent leur dessin de 28px et gagnent une
   boîte de frappe transparente. */
@media (pointer: coarse) {
  .week-btn { position: relative; }
  .week-btn::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
  .day  { min-height: 56px; }
  .slot { min-height: 44px; display: inline-flex; align-items: center; }

  /* Adresse mail et téléphone du cartouche : ce sont des liens
     `mailto:` et `tel:`, ils méritent la même prise que les autres. */
  .ct-contact-list a,
  a.ct-contact-list__value { min-height: 44px; display: inline-flex; align-items: center; }
}