/* ============================================
   COLLECTIF WEB — GABARIT CONTACT
   Extrait tel quel de maquettes/contact.html, maquette validée et gelée.
   L'habillage commun (en-tête, menu, pied) vit dans commun.css.
   ============================================ */

/* ====== Gabarit Contact — styles de page (tokens DS uniquement) ======
   Sombre par défaut comme tout le site (D-053), bascule mémorisée. */

/* Sections de page */
.band { margin-bottom: clamp(88px, 11vw, 136px); }
.band__head { margin-bottom: var(--space-6); }
.band__head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  padding-top: 22px;
  position: relative;
}
.band__head h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--border-w);
  background: var(--border);
  transform-origin: left;
  transition: transform .8s var(--ease-out);
}
html.js .band__head h2::before { transform: scaleX(0); }
html.js .band__head.in h2::before { transform: scaleX(1); }
.band__head h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--accent); }
.band__head p { font-size: var(--fs-body-l); color: var(--fg-soft); max-width: 76ch; margin: 0; }

/* ====== Hero — la bulle qui rédige ====== */
.hero--contact {
  background: var(--surface);
  color: var(--fg);
  border: var(--border-w) solid var(--border);
  min-height: 400px;
  margin-bottom: clamp(88px, 11vw, 136px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-5);
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 56px);
}
.hero--contact .hero__inner { max-width: 68ch; padding: 0; }
.hero--contact .hero__title { font-size: clamp(38px, 4.6vw, 60px); max-width: 16ch; }
.hero--contact .hero__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--accent); }
.hero--contact .hero__sub { margin-top: 20px; color: var(--fg-soft); opacity: 1; max-width: 56ch; }
.hero--contact .hero__sub strong { color: var(--fg); font-weight: 600; }

/* La bulle au trait : quelqu'un vous rédige une réponse. Le contour se dessine
   à l'arrivée, puis les trois points font une vague discrète toutes les 3 s
   (jamais de frappe frénétique — D-058). Reduced-motion et ?static : tout posé. */
.bulle { color: var(--fg); flex-shrink: 0; }
.bulle svg { display: block; width: clamp(150px, 16vw, 220px); height: auto; }
.bulle .trace {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-dasharray: 640;
  stroke-dashoffset: 0;
}
html.js .hero--contact .trace { stroke-dashoffset: 640; }
html.js .hero--contact.hero--go .trace { transition: stroke-dashoffset 1.1s var(--ease-out) .35s; stroke-dashoffset: 0; }
.bulle .point { fill: currentColor; }
html.js .hero--contact.hero--go .point { animation: point-vague 3s ease-in-out 1.6s infinite; }
html.js .hero--contact.hero--go .point:nth-of-type(2) { animation-delay: 1.75s; }
html.js .hero--contact.hero--go .point:nth-of-type(3) { animation-delay: 1.9s; }
@keyframes point-vague {
  0%, 30%, 100% { opacity: 1; transform: translateY(0); }
  12% { opacity: .45; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .hero--contact .trace { stroke-dashoffset: 0; transition: none; }
  html.js .hero--contact.hero--go .point { animation: none; }
}

/* ====== Les trois portes — courriel, téléphone, rendez-vous (a11y : plusieurs
   moyens de contact, d'égale valeur — verdict d'Alexandre, note 4) ====== */
.portes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.porte {
  border: var(--border-w) solid var(--border);
  background: var(--surface);
  padding: var(--space-5);
  display: grid;
  align-content: start;
  gap: 6px;
}
.porte h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.porte .porte__valeur {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 24px);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.porte .porte__valeur:hover,
.porte .porte__valeur:focus-visible { color: var(--accent); }
.porte p { margin: 0; font-family: var(--font-sans); font-size: 16px; color: var(--fg-soft); }

/* ====== Qui vous répond (D-047) ====== */
.interlocuteurs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 380px));
  gap: var(--space-4);
}
.interlocuteur {
  border: var(--border-w) solid var(--border);
  background: var(--surface);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-4);
  align-items: center;
}

/* Portraits à venir (les deux) : cadre pointillé, même procédé honnête que la
   page équipe et le bloc auteur des articles. */
.interlocuteur .portrait--attente {
  width: 88px;
  height: 88px;
  border: 1.5px dashed var(--rule-strong);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--muted);
  text-align: center;
  padding: 8px;
}
.dark-mode .interlocuteur .portrait--attente { border-color: var(--rule-dark-strong); }
.interlocuteur .portrait { display: block; width: 88px; height: 88px; }
.interlocuteur .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.interlocuteur h3 { margin: 0 0 2px; font-size: 20px; }
.interlocuteur p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--muted);
  text-transform: none; /* D-056 : métadonnées en casse normale */
  letter-spacing: 0;
}

/* ====== Formulaire — simple et direct (verdict d'Alexandre, note 1) ====== */
.fenetre {
  border: var(--border-w) solid var(--border);
  background: var(--surface);
}
.fenetre__barre {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1.5px solid var(--border-soft);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.fenetre__barre .pastilles { display: flex; gap: 5px; }
.fenetre__barre .pastilles i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); }

/* Fenêtre centrée (1re passe) ; titre et texte d'appui centrés avec elle
   (2e passe) — le filet du h2 reste pleine largeur, c'est le séparateur */
#ecrire .band__head,
.rdv .band__head { text-align: center; }
#ecrire .band__head p,
.rdv .band__head p { margin: 0 auto; }
.form-contact { max-width: 720px; margin: 0 auto; }
.form-contact .fenetre__corps { padding: clamp(24px, 3vw, 40px); }
.form-contact form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-contact .champ { display: grid; gap: 6px; }
.form-contact .champ--large { grid-column: 1 / -1; }
.form-contact label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--fg);
}
.form-contact label .facultatif { font-weight: 400; color: var(--muted); }
.form-contact input,
.form-contact textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  background: var(--bg);
  color: var(--fg);
  border: 1.5px solid var(--rule-strong);
  padding: 12px 14px;
  width: 100%;
}
.form-contact textarea { min-height: 150px; resize: vertical; }
.form-contact input:focus,
.form-contact textarea:focus { border-color: var(--accent); outline: none; }
.form-contact .pied {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.form-contact .pied p { margin: 0; font-family: var(--font-sans); font-size: 16px; color: var(--muted); max-width: 40ch; }

/* ---- Le formulaire réel prend la place de celui de la maquette ----
   Gravity Forms enveloppe ses champs dans une liste ; `display: contents`
   efface ce conteneur et chaque champ se pose alors directement dans la mise en
   page de la maquette. Le bouton et la ligne de finalité ferment le formulaire
   sur une même ligne : ils viennent de deux endroits du balisage, `order` les
   remet dans l'ordre voulu. */
.form-contact .gform_wrapper form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
}
.form-contact .gform_wrapper .gform-body,
.form-contact .gform_wrapper .gform_fields { display: contents; }
.form-contact .gform_wrapper .gfield {
  flex: 1 1 calc(50% - var(--space-4));
  min-width: 0;
}
.form-contact .gform_wrapper .gfield.champ--large { flex-basis: 100%; }

.form-contact .gform_wrapper input[type="text"],
.form-contact .gform_wrapper input[type="email"],
.form-contact .gform_wrapper select,
.form-contact .gform_wrapper textarea {
  background: var(--bg);
  border: 1.5px solid var(--rule-strong);
}
/* La hauteur vient de la maquette, pas du nombre de lignes que Gravity Forms
   pose sur la balise : dix lignes descendaient le bouton d'une cinquantaine de
   pixels. Le champ reste étirable à la souris. */
.form-contact .gform_wrapper textarea { height: 150px; min-height: 150px; }
.form-contact .gform_wrapper input:focus,
.form-contact .gform_wrapper select:focus,
.form-contact .gform_wrapper textarea:focus { border-color: var(--accent); }

.form-contact .gform_wrapper .gform_footer { order: 1; flex: 0 0 auto; margin: 0; }
.form-contact .gform_wrapper .gfield--type-html {
  order: 2;
  flex: 1 1 240px;
  align-self: center;
}
/* L'aiguillage vers Recrutement est le seul bloc libre qui reste dans le flux :
   il commente le menu juste au-dessus. La mention de finalité, elle, garde sa
   place au pied, à côté du bouton. */
.form-contact .gform_wrapper .gfield--type-html.champ--aiguillage {
  order: 0;
  flex: 1 1 100%;
  align-self: auto;
}
.form-contact .cw-finalite {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--muted);
  max-width: 40ch;
}

/* Message envoyé : la confirmation prend la place du formulaire, dans la
   fenêtre, sans que la page se recharge. */
.form-contact .gform_confirmation_message {
  border: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: var(--fs-body);
  color: var(--fg-soft);
  max-width: 52ch;
}
.form-contact .gform_confirmation_message strong { color: var(--fg); font-size: 22px; }

/* ====== Rendez-vous direct (verdict d'Alexandre, note 5) ======
   La maquette réservait la place d'un module ; Amelia l'occupe maintenant. Le
   calendrier apporte son propre habillage — le cadre le tient à la largeur du
   formulaire, centré comme lui (le margin auto vit sur le module, jamais sur la
   .band : le raccourci écraserait son margin-bottom de section). */
.rdv .reservation {
  max-width: 720px;
  margin: 0 auto;
  border: var(--border-w) solid var(--border);
  background: var(--surface);
  padding: clamp(20px, 3vw, 32px);
}

/* Amelia habille son module elle-même, et son vert de marque est celui du site.
   Sous du texte blanc, il ne tient toutefois pas le contraste demandé : 4,2
   contre 4,5. Le vert profond du design system prend sa place, ici seulement —
   les réglages d'Amelia restent tels qu'ils sont.

   L'extension pose ses couleurs derrière un identifiant (`#amelia-container`) :
   aucune règle de feuille ne passe devant sans `!important`. */
.rdv .reservation .am-fs-sb { background-color: var(--vert-deep) !important; }
.rdv .reservation .am-fs-sb__step-heading,
.rdv .reservation .am-fs-sb__support-heading,
.rdv .reservation .am-fs-sb__support-email,
.rdv .reservation .am-fs-sb__menu-text { color: #fff !important; }

/* La valeur retenue dans une liste déroulante, en gris trop pâle sur blanc. */
.rdv .reservation .el-select .el-select__placeholder,
.rdv .reservation .el-select .el-select__selected-item,
.rdv .reservation .el-input__inner { color: var(--ink) !important; }

/* ====== Adresse — discrète, sous les trois portes (1re passe) ====== */
.adresse {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--muted);
  margin: var(--space-4) 0 0;
}

/* ====== Motion (D-058) ====== */
html.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }

/* Entrée orchestrée du hero */
html.js .hero__inner > * { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
html.js .hero__inner > :nth-child(2) { transition-delay: .12s; }
html.js .hero--go .hero__inner > * { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1000px) {
  .site-footer .top { grid-template-columns: 1fr 1fr; }
  .site-footer .brand-col { grid-column: 1 / -1; }
  .site-footer .blocs { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .hero--contact { grid-template-columns: 1fr; }
  .hero--contact .bulle { justify-self: center; }
  .portes { grid-template-columns: 1fr; }
  .interlocuteurs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .form-contact form { grid-template-columns: 1fr; }
  .form-contact .champ { grid-column: 1 / -1; }
  .form-contact .gform_wrapper .gfield { flex-basis: 100%; }
  .site-footer .top { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .site-footer .col-contact { grid-column: 1 / -1; }
  .site-header { padding: var(--space-2) var(--space-3); gap: var(--space-2) var(--space-3); margin-bottom: var(--space-5); }
  .site-header .logo-img { height: 20px; }
  .site-header__actions .btn { display: none; }
}