/* ═══════════════════════════════════════════════════════════════
   CHEZ PAULETTE STUDIO — Page Contact
   Chargée sur le template page-contact uniquement.
   Design porté de contact.astro (tokens --primary-*).
   ═══════════════════════════════════════════════════════════════ */

/* Le page-hero générique (.ph, .ph-bg, .ph-eyebrow, .ph-title, .ph-lead…) vit
   dans patterns.css (chargé partout) — réutilisé par Contact, Tarifs, etc.
   Ici : uniquement le spécifique Contact (NAP). */

/* ── HERO — spécifique Contact (coordonnées) ── */
.ph-contacts {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0; margin-bottom: 2rem;
}
.ph-contact {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 0 2.25rem; text-decoration: none;
}
.ph-contact__label {
  font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-top: 0.15rem;
}
.ph-contact__value {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 700;
  color: var(--ivory); text-transform: uppercase; letter-spacing: 0.02em;
  line-height: 1.3; transition: color 150ms;
}
.ph-contact svg { color: var(--primary-500); }
a.ph-contact:hover .ph-contact__value { color: var(--primary-500); }
.ph-sep { width: 1px; height: 44px; background: rgba(255,255,255,0.12); flex-shrink: 0; }
.ph-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.85);
  padding: 12px 24px; border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 100px; background: rgba(255,255,255,0.05); text-decoration: none;
  transition: border-color 200ms, background 200ms, color 200ms;
}
.ph-cta:hover { border-color: var(--primary-500); background: oklch(0.47 0.072 15.6 / 0.18); color: var(--primary-500); }
.ph-cta svg { transition: transform 200ms ease-out; }
.ph-cta:hover svg { transform: translateY(3px); }

/* ── SECTION AVIS + FORMULAIRE ── */
.cm {
  background: linear-gradient(to bottom, var(--black) 12rem, var(--gray-100) 12rem);
  padding: 3rem 1.5rem 6rem; margin-top: -6rem; position: relative; z-index: 1;
}
.cm__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.4fr;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
/* Client sans avis : pas de colonne vide, le form passe pleine largeur (centré) */
.cm--solo .cm__inner { grid-template-columns: 1fr; max-width: 680px; }

/* Colonne avis */
.cm__testi {
  background:
    radial-gradient(ellipse 160% 110% at 65% 25%, oklch(0.62 0.051 15.6 / 0.18) 0%, transparent 70%),
    linear-gradient(160deg, oklch(0.32 0.085 15.6 / 0.96) 0%, oklch(0.40 0.082 15.6 / 0.93) 60%, oklch(0.20 0.030 15.6) 100%);
  padding: 3.5rem 2.5rem 3rem; display: flex; flex-direction: column; gap: 1.25rem;
}
.cm__testi-title {
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 900; line-height: 1; color: var(--white);
  text-transform: uppercase; text-align: center; margin-bottom: 0.5rem;
}
/* Slider 1 carte : garde la colonne compacte (≈ hauteur du form) */
.cm-slider { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; }
.cm-slides { position: relative; }
.cm-card { display: none; background: var(--white); border-radius: 14px; padding: 1.5rem 1.5rem 1.25rem; box-shadow: 0 8px 30px oklch(0.20 0.030 15.6 / 0.4); }
.cm-card.is-active { display: block; animation: cmFade 0.4s ease both; }
@keyframes cmFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cm-dots { display: flex; justify-content: center; gap: 7px; }
.cm-dot { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,0.3); transition: background 0.2s, transform 0.2s; }
.cm-dot.is-active { background: var(--white); transform: scale(1.35); }
.cm-card__top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.cm-card__avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary-700), var(--primary-800));
  color: var(--white); font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem;
}
.cm-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cm-card__name { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.cm-card__stars { color: var(--gold-star); font-size: 0.9rem; letter-spacing: 0.08em; }
.cm-card__quote { font-family: var(--font-body); font-size: 0.85rem; color: var(--gray-700); line-height: 1.6; font-style: italic; margin-bottom: 0.6rem; }
.cm-card__src { display: flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 600; color: var(--gray-500); }
.cm__testi-all { color: var(--white); font-family: var(--font-heading); font-weight: 600; font-size: 0.82rem; text-align: center; text-decoration: underline; opacity: 0.85; }
.cm__testi-all:hover { opacity: 1; }

/* Colonne formulaire */
.cm__form { background: var(--white); padding: 2.75rem 2.75rem; display: flex; flex-direction: column; justify-content: center; }
.cm__form-title { font-family: var(--font-display); font-size: clamp(1.15rem, 1.9vw, 1.45rem); color: var(--ink); text-transform: uppercase; line-height: 1.15; margin-bottom: 0.3rem; text-align: center; }
.cm__form-sub { font-size: 0.88rem; color: var(--gray-500); margin-bottom: 1.1rem; text-align: center; }

/* ── FORMULAIRE CF7 ── */
.cform { display: flex; flex-direction: column; gap: 0.65rem; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.cfield { display: block; min-width: 0; position: relative; padding-bottom: 0.9em; }
.cfield__label {
  display: block; margin-bottom: 0.4rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-700);
}
.cfield__input {
  appearance: none; width: 100%; padding: 0.8rem 1rem;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 0.9rem; background: var(--gray-100);
  color: var(--ink); outline: none; resize: vertical;
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
}
.cfield__input::placeholder { color: var(--gray-500); }
.cfield__input:focus { border-color: var(--primary-700); background: var(--white); box-shadow: 0 0 0 3px oklch(0.47 0.072 15.6 / 0.15); }
textarea.cfield__input { min-height: 88px; }
.cfield__select { cursor: pointer; }

/* Même correction que .hero__consent : en flex, le lien « Politique de
   confidentialité » devenait un élément flex séparé du texte et se décalait
   à droite de la phrase. */
.cform__consent { display: block; position: relative; padding-left: 26px; font-size: 0.78rem; color: var(--gray-700); line-height: 1.4; }
.cform__consent .wpcf7-form-control-wrap { position: absolute; left: 0; top: 2px; }
.cform__consent a { color: var(--primary-700); text-decoration: underline; }
.cform__submit {
  align-self: flex-start; display: inline-flex; align-items: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 14px 28px;
  border-radius: 999px; /* pill — cohérence avec les CTA du site */ background: var(--primary-700); color: var(--white);
  border: 2px solid var(--primary-700); cursor: pointer; margin-top: 0.25rem;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.cform__submit:hover { background: var(--primary-800); border-color: var(--primary-800); transform: translateY(-1px); }

/* Validation (place réservée → pas de décalage), honeypot */
.cform .wpcf7-not-valid-tip { position: absolute; left: 0; bottom: 0; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; line-height: 1.1; color: var(--alerte); }
.cform .wpcf7-not-valid { border-color: var(--alerte); background: var(--alerte-fond); }
.cm__form .wpcf7-response-output { margin: 8px 0 0; padding: 8px 10px; font-size: .8rem; line-height: 1.3; border-radius: var(--radius); border-width: 1px; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .cm__inner { grid-template-columns: 1fr; }
  .cm__form { order: 1; }
  .cm__testi { order: 2; }
}
@media (max-width: 767px) {
  .ph-contacts { flex-direction: column; gap: 1.25rem; }
  .ph-contact { padding: 0; }
  .ph-sep { display: none; }
  .cm { background: linear-gradient(to bottom, var(--black) 6rem, var(--gray-100) 6rem); }
}
@media (max-width: 600px) {
  .ph { padding: 7rem 1.25rem 7rem; }
  .cm__testi, .cm__form { padding: 2.5rem 1.5rem; }
  .cform__row { grid-template-columns: 1fr; }
}