/* ============================================
   PAGE CONTACT
     #contact-hero : titre + formulaire sur la photo de pavots
     .loc          : « Nos fleurs poussent ici » + carte du Morbihan
   ============================================ */

:root {
  /* teinte locale absente de base.css */
  --rule: rgba(50, 44, 114, 0.16);
}

/* overflow:clip (et non hidden) : borne les débordements sans créer de
   conteneur de défilement. */
.stage-wrap--clip { overflow: clip; }

/* ---------------------------------------------
   PHRASE / TITRE — cascade lettre par lettre (setupPhrase, contact.js)
   --------------------------------------------- */
.ch-phrase {
  margin: 0 auto;
  max-width: 22ch;
  text-align: center;
  font-family: var(--font-serif);
  /* même gabarit que .appel-phrase (production) */
  font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 5rem);
  line-height: 1.14;
  color: var(--indigo-deep);
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.ch-phrase .w, .loc-phrase .w { display: inline; white-space: nowrap; }
.ch-phrase .s, .loc-phrase .s { display: inline-block; }
/* calque par lettre tant que la phrase est proche (.is-live, JS) : glisse au sous-pixel */
.ch-phrase.is-live .s, .loc-phrase.is-live .s { will-change: opacity, transform; }
@media (max-width: 600px) {
  .ch-phrase { max-width: 100%; }
}

/* ---------------------------------------------
   FORMULAIRE
--------------------------------------------- */
.form-slot { position: relative; }

.cform { display: flex; flex-direction: column; gap: 1.05rem; }
.cform[hidden] { display: none; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
@media (max-width: 560px) { .cform-row { grid-template-columns: 1fr; } }

.cform-honey {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-text-dim);
}
.field input:not([type="checkbox"]),
.field textarea {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--indigo-deep);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0;
  transition: border-color 0.3s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 4.25rem; line-height: 1.5; }
.field input:not([type="checkbox"]):focus,
.field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field:focus-within .field-label { color: var(--indigo); }
.field input:not([type="checkbox"]):focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--violet-mid);
  outline-offset: 4px;
  border-radius: 2px;
}

/* case RGPD : jamais pré-cochée, obligatoire (required) */
.field-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.65rem;
}
.field-consent input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  accent-color: var(--indigo);
  cursor: pointer;
}
.field-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--violet-mid);
  outline-offset: 3px;
  border-radius: 2px;
}
.consent-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-text-dim);
  cursor: pointer;
}
.consent-text a { color: var(--gold-dark); text-decoration: none; }
.consent-text a:hover { color: var(--gold); }

/* même échelle que les liens .text-cta du site */
.cform-send {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: gap 0.35s var(--ease), color 0.35s var(--ease);
}
.cform-send:focus-visible { outline: 2px solid var(--violet-mid); outline-offset: 4px; }
.is-sending .cform-send { opacity: 0.55; pointer-events: none; }

.cform-msg {
  margin: 0.9rem 0 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--gold-dark);
}
.cform-msg[hidden] { display: none; }

.cform-done {
  padding: 1.5rem 0;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.cform-done.in { opacity: 1; transform: none; }
.cform-done-mark {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 auto;
  fill: var(--gold);
  stroke: none;
}
.cform-done-text {
  margin-top: 0.4rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--indigo-deep);
}

/* ---------------------------------------------
   HERO CONTACT — photo de pavots + formulaire glassmorph
   --------------------------------------------- */
#contact-hero {
  position: relative;
  background: var(--white);
  overflow-x: clip;
}
#contact-hero .ch-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  /* même hauteur de titre que .nf-intro (Nos Fleurs) */
  padding: 3rem 1.5rem clamp(2rem, 5vw, 4rem);
}
#contact-hero .ch-bgwrap {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(1150px, 100vw, 1700px);
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#contact-hero .ch-bg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: auto;
  max-width: none;
}
#contact-hero .ch-phrase,
#contact-hero .ch-intro { position: relative; z-index: 1; }

/* paragraphe d'intro : cascade par syllabes */
#contact-hero .ch-intro .ch-syl { display: inline-block; }
#contact-hero .ch-intro .ch-w { white-space: nowrap; }
/* width:max-content + translateX(-50%) : peut déborder de .ch-wrap en
   restant centré. */
#contact-hero .ch-intro {
  margin: 1.7rem 0 1.8rem;
  width: max-content;
  max-width: min(92vw, 60ch);
  left: 50%;
  transform: translateX(-50%);
  /* même recette que les paragraphes du site (Poppins 300, ink-text-dim) */
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-text-dim);
}

/* cadre glassmorph : voile blanc translucide + flou d'arrière-plan */
#contact-hero .form-slot {
  position: relative;
  z-index: 1;
  margin-top: clamp(9rem, 20vw, 15rem);
  padding: clamp(1.35rem, 3.4vw, 2rem) clamp(1.6rem, 4vw, 2.5rem);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(28, 24, 82, 0.06), 0 10px 28px rgba(28, 24, 82, 0.09);
}
/* Desktop : formulaire un cran plus bas. Doit rester APRÈS la règle de base
   (même spécificité). */
@media (min-width: 1025px) {
  #contact-hero .form-slot { margin-top: clamp(12rem, 20vw, 18rem); }
}
#contact-hero .field-label { color: var(--indigo); }
#contact-hero .field input:not([type="checkbox"]),
#contact-hero .field textarea { border-bottom-color: rgba(50, 44, 114, 0.4); }
#contact-hero .cform { align-items: center; }
#contact-hero .cform-row { width: 100%; }
#contact-hero .field { text-align: left; width: 100%; }
#contact-hero .cform-send { align-self: center; color: var(--violet-mid); padding: 0.3rem 0; }
#contact-hero .cform-send:hover { color: var(--gold); gap: 0.9rem; }

@media (max-width: 600px) {
  #contact-hero .ch-intro { max-width: 100%; }
  #contact-hero .ch-wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Apparition du formulaire + de la photo : pilotée par l'API Web Animations
   (contact.js), pas par une transition CSS (souvent ignorée au chargement).
   .reveal-armed = état de départ. */
#contact-hero.reveal-armed .ch-bg { opacity: 0; }
#contact-hero.reveal-armed .form-slot { opacity: 0; }
#contact-hero.reveal-armed .form-slot > form { filter: blur(10px); }

/* ---------------------------------------------
   LOCALISATION — « Nos fleurs poussent ici » + carte
   --------------------------------------------- */
.loc {
  background: var(--white);
  text-align: center;
  padding: clamp(3.5rem, 9vw, 6.5rem) 1.5rem clamp(2.75rem, 6vw, 4.5rem);
}
.loc-inner { max-width: 640px; margin: 0 auto; }

/* intitulé : fondu une fois à l'entrée ; la carte apparaît en JS après la
   cascade de la phrase. */
.loc-kicker { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.loc.js-anim .loc-kicker { opacity: 0; transform: translateY(12px); }
.loc.js-anim.in .loc-kicker { opacity: 1; transform: none; }

.loc-kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  /* même taille que .footer-eyebrow */
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.loc-phrase {
  margin: 0.9rem 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.2;
  color: var(--indigo-deep);
  text-wrap: balance;
}
/* 2e ligne (« au cœur du Morbihan ») : même cascade, plus petite et plus fine */
.loc-phrase--sub {
  margin-top: 0.15rem;
  font-size: clamp(1.55rem, 3.5vw, 2.3rem);
  font-weight: 400;
}

/* Carte du Morbihan (SVG inline), pleine largeur d'écran via
   left:50% + margin-inline:-50vw. Fondu piloté par contact.js. */
.loc-map {
  position: relative;
  left: 50%;
  width: 100vw;
  margin: clamp(2.4rem, 6vw, 4rem) -50vw 0;
  line-height: 0; /* tue le gap de baseline sous le SVG inline */
}
.loc-map-svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .loc { padding-bottom: clamp(6rem, 26vw, 8.5rem); }
}

/* Tablette : la carte a un fond transparent, la fleur gauche du footer s'y
   superposait trop — remontée sur cette page uniquement (sélecteur à
   2 classes, prioritaire sur la règle de components.css). */
@media (min-width: 721px) and (max-width: 1450px) {
  .loc { padding-bottom: clamp(5rem, 8vw, 7rem); }
  .site-footer .footer-flower--left { width: 600px; bottom: 8vw; }
  .site-footer .footer-flower--left img { transform: translateY(-30%); }
}

@media (prefers-reduced-motion: reduce) {
  .ch-phrase .s, .loc-phrase .s { opacity: 1 !important; transform: none !important; }
  #contact-hero .ch-intro .ch-syl { opacity: 1 !important; filter: none !important; transform: none !important; }
  .loc.js-anim .loc-kicker { opacity: 1 !important; transform: none !important; }
}