/* ============================================================================
   hb-parler.css — LA PORTE « PARLER A HELENE »
   ----------------------------------------------------------------------------
   POURQUOI CETTE PORTE EXISTE
   Une visiteuse qui hesite devant trois formules ne veut pas ecrire un courriel
   et attendre. Elle veut qu'on l'appelle. Verdict d'Helene du 12/09/2026 :
   « Trois lignes avec un choix a cocher en termes d'horaire, on garde une seule
   option, "rappelez-moi". » Une seule option, aucune autre porte, aucun message
   libre : la feuille ne demande que ce qu'il faut pour composer un numero.

   LA LOI DE LA MAIN (skill premium-mobile-first)
   Sur telephone, la feuille monte du BAS : les doigts vivent en bas de l'ecran,
   pas en haut. Chaque cible fait au moins 48 px, les cibles sont espacees d'au
   moins 8 px, les gouttieres laterales font 20 px et sont identiques partout.
   Sur grand ecran, la feuille devient un panneau centre, parce qu'une feuille
   basse sur 1440 px laisse un desert au milieu.

   LA CHARTE
   Fond de scene : #2A2A41 pile, jamais plus sombre. Les creux descendent d'un
   cran a #1F1F30. L'or #CDAF76 est metallique (degrade a trois arrets), jamais
   plat. Zero emoji. Aucun tiret cadratin dans les textes.

   LE SENS DE LECTURE
   L'arabe se lit de droite a gauche. Rien ici n'est ancre a `left` ou `right` :
   tout passe par les proprietes logiques (`inline-start`, `margin-inline`), et
   la feuille se retourne toute seule sous `dir="rtl"`.
   ========================================================================== */

:root {
  --hbp-navy: #2A2A41;
  --hbp-creux: #1F1F30;
  --hbp-or: #CDAF76;
  --hbp-or-clair: #E0C896;
  --hbp-blanc: #FFFFFF;
}

/* ─── LE DECLENCHEUR ────────────────────────────────────────────────────────
   Contour or, jamais plein : la page porte deja UN bouton primaire plein
   (« Voir les trois formules »). Deux pleins sur un meme ecran, et l'oeil ne
   sait plus lequel est le geste principal. */
.hb-parler-declencheur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  margin: 0;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hbp-or);
  background: transparent;
  border: 1px solid rgba(205, 175, 118, 0.55);
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.22s ease,
              transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hb-parler-declencheur:hover {
  border-color: var(--hbp-or);
  background: rgba(205, 175, 118, 0.08);
  transform: translateY(-2px);
}
.hb-parler-declencheur:active { transform: translateY(0); }
.hb-parler-declencheur:focus-visible {
  outline: 2px solid var(--hbp-or-clair);
  outline-offset: 3px;
}
.hb-parler-declencheur svg { flex: none; }

/* La rangee du pli : cote a cote sur grand ecran (aucune hauteur ajoutee,
   donc le bouton or du pli ne descend pas d'un pixel), empilee sur telephone
   parce que « VOIR LES TROIS FORMULES » ne tient pas dans une demi-largeur. */
.hb-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.hb-hero-actions > .hb-hero-cta { margin-top: 0; }
.hb-hero-actions > .hb-parler-declencheur { width: 100%; max-width: 358px; }
@media (min-width: 768px) {
  .hb-hero-actions { flex-direction: row; justify-content: center; }
  .hb-hero-actions > .hb-parler-declencheur { width: auto; max-width: none; }
}

/* Le rappel pose pres des formules : un bandeau sobre, pas une carte de plus.
   Il vit sous la grille des prix, la ou l'hesitation arrive. */
.hb-parler-rappel {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 24px 20px;
  text-align: center;
  background: var(--hbp-creux);
  border: 1px solid rgba(205, 175, 118, 0.22);
  border-radius: 20px;
}
.hb-parler-rappel-texte {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

/* LA LIGNE DISCRETE VERS « HELENE VIENT CHEZ VOUS ».
   Elle vit sous le bouton de rappel, plus petite et sans or plein : un seul
   bouton primaire par ecran, c'est la loi de la maison. Le rail reste a 48 px
   parce qu'un lien se touche avec un pouce comme tout le reste. */
.hb-parler-vers-domicile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 12px;
  padding: 0 8px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--hbp-or, #CDAF76);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hb-parler-vers-domicile:hover { color: #F5E6B2; }
.hb-parler-vers-domicile:focus-visible { outline: 3px solid #F5E6B2; outline-offset: 3px; border-radius: 8px; }

/* ─── LA FEUILLE ───────────────────────────────────────────────────────────── */
/* LA PLACE DU BANDEAU DE CONSENTEMENT — mesuree, jamais devinee.
   Le bandeau des traceurs est pose a z-index 2147483000 : il domine TOUT, et
   c'est legitime, la loi veut qu'elle puisse toujours repondre. Une feuille qui
   passerait dessous aurait son bouton d'envoi recouvert, donc inexistant. On
   reserve donc sa hauteur : `--hbp-bandeau` est ecrite par hb-parler.js a
   l'ouverture, puis remise a zero des qu'elle a repondu. */
.hb-parler-voile {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--hbp-bandeau, 0px);
  background: rgba(20, 20, 32, 0.72);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.hb-parler-voile[hidden] { display: none; }
.hb-parler-voile.est-ouverte { opacity: 1; }

.hb-parler-feuille {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(92vh - var(--hbp-bandeau, 0px));
  max-height: calc(92dvh - var(--hbp-bandeau, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* La gouttiere laterale : 20 px, la meme pour TOUT ce que la feuille
     contient. Le bas ajoute la barre d'accueil de l'iPhone. */
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--hbp-navy);
  border: 1px solid rgba(205, 175, 118, 0.24);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.45);
  transform: translateY(24px);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hb-parler-voile.est-ouverte .hb-parler-feuille { transform: translateY(0); }

@media (min-width: 768px) {
  .hb-parler-voile { align-items: center; }
  .hb-parler-feuille {
    max-height: calc(88vh - var(--hbp-bandeau, 0px));
    padding: 32px;
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
  }
}

/* La poignee : elle dit « ca se tire vers le bas » sans une ligne de notice. */
.hb-parler-poignee {
  width: 44px;
  height: 4px;
  margin: 0 auto 16px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 100px;
}
@media (min-width: 768px) { .hb-parler-poignee { display: none; } }

/* La croix vit dans une pastille : une icone nue, sans fond, est un defaut de
   la grille (section 10). On la porte a 48 px, le rail de la maison, plutot
   qu'au minimum de 44 : une cible plus grande n'a jamais fait rater un doigt. */
.hb-parler-fermer {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.hb-parler-fermer:hover { color: var(--hbp-blanc); background: rgba(255, 255, 255, 0.12); }
.hb-parler-fermer:focus-visible { outline: 2px solid var(--hbp-or-clair); outline-offset: 2px; }

.hb-parler-titre {
  margin: 0 0 8px;
  padding-inline-end: 52px; /* la croix ne mord jamais le titre */
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--hbp-blanc);
}
.hb-parler-chapeau {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* ─── LES CHAMPS ─────────────────────────────────────────────────────────────
   MESURE DU 13/09, ET CE QU'ELLE A CHANGE. Feuille ouverte sur un telephone de
   390 px AVANT reponse au bandeau de consentement, il ne reste que 530 px de
   hauteur utile : le formulaire empile faisait 700 px et la visiteuse ne voyait
   ni les creneaux ni le bouton sans faire defiler. Prenom et nom tiennent
   ensemble sur une ligne, ce sont deux mots courts : quatre-vingt-dix pixels
   regagnes, et les trois creneaux remontent dans la vue. */
.hb-parler-champ { margin-bottom: 16px; }
.hb-parler-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hb-parler-duo .hb-parler-champ { margin-bottom: 16px; }
@media (max-width: 359px) { .hb-parler-duo { grid-template-columns: 1fr; gap: 0; } }
.hb-parler-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.hb-parler-input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font-family: inherit;
  /* 16 px pile : en dessous, Safari iOS zoome tout seul au premier appui et la
     feuille part de travers. Ce n'est pas un choix esthetique. */
  font-size: 16px;
  color: var(--hbp-blanc);
  background: var(--hbp-creux);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hb-parler-input::placeholder { color: rgba(255, 255, 255, 0.32); }
.hb-parler-input:focus {
  outline: none;
  border-color: var(--hbp-or);
  box-shadow: 0 0 0 3px rgba(205, 175, 118, 0.18);
}
.hb-parler-input[aria-invalid="true"] { border-color: #E08A7A; }

.hb-parler-erreur {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #E8A99B;
}
.hb-parler-erreur[hidden] { display: none; }

/* L'AIDE SOUS UN CHAMP — pourquoi on demande, dit sous la ligne qu'on demande.
   Elle est grise et non rouge : ce n'est pas une faute, c'est une raison. */
.hb-parler-aide {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(234, 234, 240, 0.62);
}

/* ─── LES TROIS CRENEAUX ────────────────────────────────────────────────────
   Un seul choix parmi trois. Le bouton radio natif est masque mais reste le
   porteur du focus clavier et de l'etat : c'est lui que lit le lecteur d'ecran,
   c'est son `:checked` qui peint la ligne. */
.hb-parler-creneaux {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}
.hb-parler-legende {
  margin-bottom: 12px;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.hb-parler-creneau { position: relative; }
.hb-parler-creneau input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.hb-parler-creneau label {
  display: flex;
  align-items: center;
  gap: 14px;
  /* 48 px de haut au minimum, gouttiere interne de 16 px : la ligne ENTIERE
     est la cible, pas seulement la pastille. */
  min-height: 52px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  background: var(--hbp-creux);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.hb-parler-creneau label:hover { border-color: rgba(205, 175, 118, 0.45); }
.hb-parler-puce {
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hb-parler-creneau input:checked + label {
  color: var(--hbp-blanc);
  border-color: var(--hbp-or);
  background: rgba(205, 175, 118, 0.1);
}
.hb-parler-creneau input:checked + label .hb-parler-puce {
  border-color: var(--hbp-or);
  box-shadow: inset 0 0 0 4px var(--hbp-or);
}
.hb-parler-creneau input:focus-visible + label {
  outline: 2px solid var(--hbp-or-clair);
  outline-offset: 2px;
}

/* ─── LE CONSENTEMENT ───────────────────────────────────────────────────────
   Jamais pre-coche. La finalite, la duree de conservation et le lien vers la
   politique sont LUS ICI, pas cherches ailleurs (RGPD art. 13). */
.hb-parler-consentement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 48px;
  margin: 16px 0 0;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
}
.hb-parler-consentement input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--hbp-or);
  cursor: pointer;
}
.hb-parler-consentement span {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}
.hb-parler-consentement a { color: var(--hbp-or); text-decoration: underline; }

/* Le champ piege : invisible pour un oeil et pour un lecteur d'ecran, present
   pour un robot qui remplit tout ce qu'il trouve. Aucun reCAPTCHA : ce serait
   un tiers charge avant le consentement, donc interdit ici. */
.hb-parler-piege {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── L'ENVOI ──────────────────────────────────────────────────────────────── */
.hb-parler-envoyer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  padding: 0 24px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--hbp-navy);
  /* L'or METALLIQUE : trois arrets, pas un aplat. */
  background: linear-gradient(135deg, #B8955C 0%, var(--hbp-or) 45%, var(--hbp-or-clair) 100%);
  border: 0;
  border-radius: 100px;
  box-shadow: 0 10px 30px rgba(205, 175, 118, 0.28);
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}
.hb-parler-envoyer:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(205, 175, 118, 0.36); }
.hb-parler-envoyer:active { transform: translateY(0); }
.hb-parler-envoyer:focus-visible { outline: 2px solid var(--hbp-or-clair); outline-offset: 3px; }
.hb-parler-envoyer[disabled] { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

/* ─── LA CONFIRMATION ───────────────────────────────────────────────────────
   Une phrase, et le creneau qu'elle a coche, pour qu'elle reparte en sachant
   QUAND le telephone va sonner. */
.hb-parler-merci { padding: 16px 0 8px; text-align: center; }
.hb-parler-merci[hidden] { display: none; }
.hb-parler-merci-sceau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  color: var(--hbp-or);
  border: 1px solid rgba(205, 175, 118, 0.4);
  border-radius: 50%;
}
.hb-parler-merci-phrase {
  margin: 0;
  font-family: 'Lora', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--hbp-blanc);
}

.hb-parler-formulaire[hidden] { display: none; }
.hb-parler-chapeau[hidden] { display: none; }

/* ─── L'ARABE ───────────────────────────────────────────────────────────────
   MESURE DU 13/09 : la page arabe porte `lang="ar"` mais PAS `dir="rtl"` sur
   la racine. Les proprietes logiques (`inline-start`, `margin-inline`) suivent
   la direction du document : sans `dir`, elles restent en gauche-a-droite, et
   la feuille sortait avec le prenom a gauche du nom, ce qui se lit a l'envers.
   Le site regle cela par selecteur de langue depuis toujours (voir les regles
   `[lang="ar"]` de formations.html) : on suit la meme convention plutot que
   d'en inventer une deuxieme. `direction` pose sur la feuille suffit : tout ce
   qu'elle contient, lui, est deja ecrit en proprietes logiques et suit. */
[lang="ar"] .hb-parler-feuille,
[lang="ar"] .hb-parler-rappel { direction: rtl; text-align: right; }
[lang="ar"] .hb-parler-rappel { text-align: center; }

/* Qui demande moins de mouvement en recoit moins. */
@media (prefers-reduced-motion: reduce) {
  .hb-parler-voile,
  .hb-parler-feuille,
  .hb-parler-declencheur,
  .hb-parler-envoyer { transition: none; }
  .hb-parler-feuille { transform: none; }
}