/* =========================================================
   DESIGNER BY NATURE — 12. APPEL À L'ACTION & CONTACT
   — La bande d'appel à l'action, pleine largeur sur photographie.
   — La section contact : formulaire statique à gauche (champs à
     soulignement fin, aucun envoi réel), coordonnées à droite,
     plan d'architecture pâle en arrière-plan.
   ========================================================= */

/* ---------- BANDE D'APPEL À L'ACTION ---------- */

/* La bande est une surface sombre à part entière, pas seulement un fond
   noir avec du texte clair.

   POURQUOI C'EST NÉCESSAIRE
   Elle se contentait de fixer `color` sans redéfinir les tokens. Le
   bouton contour, qui lit `--fg` pour sa couleur de texte, héritait
   donc du noir de la racine : le numéro de téléphone s'affichait en noir
   sur un fond noir, invisible tant qu'on ne le survolait pas. */
.cta {
  position: relative;
  overflow: hidden;
  text-align: center;

  --surface: var(--noir);
  --fg: var(--ivoire);
  --muted: var(--encre-sombre);
  --accent: var(--or);
  --accent-deco: var(--or);
  --rule: rgba(244, 240, 232, .22);
  --rule-fort: rgba(244, 240, 232, .45);

  background-color: var(--surface);
  color: var(--fg);
}

.cta__media {
  position: absolute;
  inset: -10% 0;
  z-index: var(--z-fond);
}

.cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(17, 17, 15, .72);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  z-index: var(--z-contenu);
  max-width: 44rem;
  margin-inline: auto;
}

.cta__titre {
  font-family: var(--display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--ls-titre);
  text-transform: uppercase;
}

.cta__texte {
  margin-top: var(--sp-5);
  margin-inline: auto;
  max-width: 38ch;
  font-size: var(--fs-small);
  line-height: var(--lh-lisible);
  color: var(--beige);
}

.cta__actions {
  margin-top: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
}

/* ---------- CONTACT ---------- */

.contact { overflow: hidden; }

.contact__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-bloc);
  align-items: start;
}

.contact__plan {
  right: calc(var(--marge) * -2);
  top: 12%;
  width: min(38rem, 55%);
  opacity: .14;
}

/* ---------- FORMULAIRE ---------- */
/* Statique : aucun envoi, aucune requête. La validation native est
   conservée, et le JavaScript se contente d'afficher la confirmation
   à la place du formulaire. Voir contact dans README.md. */

.formulaire {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  max-width: 34rem;
}

/* Confirmation affichée à la place du formulaire après validation. */
.formulaire__confirmation {
  display: none;
  padding: var(--sp-7);
  border: var(--trait) solid var(--accent-deco);
  text-align: center;
}

.formulaire__confirmation[data-visible="true"] { display: block; }

.formulaire__confirmation p {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* ---------- COORDONNÉES ---------- */

.coordonnees {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.coordonnee {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding-top: var(--sp-5);
  border-top: var(--trait) solid var(--rule);
}

.coordonnee__icone {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .1875rem;
  color: var(--accent-deco);
}

.coordonnee__icone svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coordonnee__libelle {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}

.coordonnee__valeur {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.coordonnee__valeur a { color: inherit; }

/* ---------- RÉSEAUX ---------- */

.reseaux {
  margin-top: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.reseaux a {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

/* ---------- RESPONSIVE ---------- */

@media (min-width: 64rem) {
  /* 7 colonnes de formulaire, 5 de coordonnées — même asymétrie que
     la section À propos, en miroir. */
  .contact__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(3rem, 6vw, 7rem);
  }

  /* Nom et email côte à côte, le reste pleine largeur. */
  .formulaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champ--large { grid-column: 1 / -1; }
}

/* La photographie d ambiance remplace le placeholder. */
.cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   CONTACT — MISE EN PAGE
   Un en-tête large, le formulaire à gauche, les coordonnées dans
   un panneau sombre à droite.

   POURQUOI UN PANNEAU
   Les coordonnées flottaient en marge du formulaire, sans limite
   propre : deux listes de texte côte à côte, dont on ne savait pas
   laquelle lire. Un bloc plein leur donne un poids égal à celui du
   formulaire et sépare nettement les deux façons d'entrer en contact.
   ========================================================= */

.contact__entete {
  max-width: 40rem;
  margin-bottom: var(--sp-bloc);
}

/* La typographie vient de `.label`, comme dans Projets : ne restent ici
   que l'espacement et la mesure. */
.contact__accroche {
  margin-top: var(--sp-5);
  max-width: 34ch;
}

/* ---------- PANNEAU DES COORDONNÉES ---------- */

.coordonnees {
  padding: var(--sp-7) var(--sp-6);
  border-radius: 2px;
  gap: var(--sp-5);
}

.coordonnees__titre {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

/* Dans le panneau, la première entrée n'a pas de filet au-dessus :
   un trait juste sous le titre du bloc ferait doublon. */
.coordonnees .coordonnee:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.coordonnee__libelle { color: var(--muted); }

/* ---------- FORMULAIRE ---------- */
/* Plus d'air entre les champs : un formulaire de contact se remplit
   lentement, il n'a pas à être compact. */




@media (min-width: 64rem) {
  .contact__grille { align-items: start; }

  /* Le panneau s'aligne sur le haut du formulaire et respire à droite. */
  .coordonnees { padding: var(--sp-8) var(--sp-7); }
}


/* =========================================================
   FORMULAIRE
   Libellés au-dessus, champs en boîte pleine, astérisque sur les
   champs obligatoires, bouton d'envoi pleine largeur.

   POURQUOI LA BOÎTE PLEINE PLUTÔT QUE LE FILET
   Un champ souligné est élégant mais il ne dit pas où l'on écrit :
   sa zone de saisie n'a pas de limite visible, et sur un formulaire
   de six champs on hésite. Une boîte remplie donne une cible franche,
   au doigt comme à la souris.

   Le libellé reste au-dessus, toujours lu, jamais recouvert. Un
   libellé flottant économise de la place ; ici on n'en manque pas.
   ========================================================= */

.formulaire {
  gap: var(--sp-5) var(--sp-5);
}

.champ {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ---------- ÉTIQUETTE ---------- */

.champ__etiquette {
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg);
}

/* L'astérisque est la seule note de rouge du site. Elle est mise en
   sourdine — un brun rouge de la même famille chaude que la palette —
   pour signaler sans crier. */
.champ__requis {
  color: #9E3B2E;
  text-decoration: none;
  border: 0;
  font-size: 1.1em;
  line-height: 1;
}

/* ---------- SAISIE ---------- */

.champ__saisie {
  width: 100%;
  padding: .9375rem 1rem;
  border: var(--trait) solid var(--rule);
  border-radius: 2px;
  background-color: var(--voile);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.6;
  transition:
    border-color var(--dur-court) var(--ease-net),
    background-color var(--dur-court) var(--ease-net),
    box-shadow var(--dur-court) var(--ease-net);
}

.champ__saisie::placeholder { color: var(--muted); opacity: .7; }

.champ__saisie:hover { border-color: var(--rule-fort); }

/* Au focus, le cadre passe au doré et un liseré très léger l'entoure :
   la cible active se distingue sans qu'on ait à changer sa taille. */
.champ__saisie:focus {
  outline: none;
  border-color: var(--accent-deco);
  background-color: transparent;
  box-shadow: 0 0 0 3px rgba(182, 154, 104, .16);
}

.champ__saisie--long {
  min-height: 10rem;
  resize: vertical;
}

/* Le menu garde son comportement natif — c'est ce que le système
   connaît, au doigt comme au clavier. Seule la flèche est redessinée,
   celle du système ne suivant aucun style. */
.champ__saisie--menu {
  appearance: none;
  padding-right: var(--sp-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1.25rem) calc(50% + 1px),
    calc(100% - 1rem) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ---------- ERREURS ---------- */

.champ__erreur {
  min-height: .9rem;
  font-size: var(--fs-micro);
  letter-spacing: .03em;
  color: #9E3B2E;
}

.champ[data-invalide="true"] .champ__saisie {
  border-color: #9E3B2E;
  box-shadow: 0 0 0 3px rgba(158, 59, 46, .12);
}

/* ---------- CONSENTEMENT ---------- */

.champ--consentement {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}

.champ--consentement input {
  flex: 0 0 auto;
  width: 1.0625rem;
  height: 1.0625rem;
  margin-top: .2rem;
  accent-color: var(--accent-deco);
}

.champ--consentement label {
  font-size: var(--fs-micro);
  letter-spacing: .02em;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- ENVOI ---------- */

.formulaire__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

/* Pleine largeur : c'est la seule action de la page à cet endroit,
   elle n'a pas à se partager la ligne. */
.formulaire__envoi {
  width: 100%;
  justify-content: center;
  padding-block: 1.1875rem;
}

.formulaire__mention {
  display: flex;
  align-items: baseline;
  gap: .375rem;
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  color: var(--muted);
}