/* ==========================================================================
   Studio Ancrage — feuille de style unique (mobile-first)
   ========================================================================== */

:root {
  --color-cream: #EDE6DA;
  --color-cream-alt: #E4DBC9;
  --color-white: #FFFFFF;
  --color-sauge: #3D4A3E;
  --color-gold: #C9A87C;
  --color-gold-text: #7A5F39; /* variante foncée du doré, conforme AA sur fond clair */
  --color-gold-text-on-dark: #D9BE94; /* variante claire du doré, conforme AA sur fond sauge */
  --color-ink: #1A1A1A;

  --font-title: "Cormorant Garamond", serif;
  --font-body: "Work Sans", sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Repli sans JS uniquement : dès que Lenis prend la main, il marque le
   <html> en "lenis-smooth" pendant qu'il anime lui-même le scroll — le
   scroll-behavior natif du navigateur se mettait alors à re-lisser chaque
   position déjà lissée par Lenis, ce qui produisait le rendu "chewing-gum"
   sur les 5 pages. On le neutralise dès que Lenis est actif. */
html { scroll-behavior: smooth; }
html.lenis-smooth { scroll-behavior: auto !important; }

[id] { scroll-margin-top: 90px; }

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-sauge);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-title);
  color: var(--color-ink);
  line-height: 1.2;
  font-weight: 500;
  margin: 0 0 var(--space-2);
}

h1 { font-size: 2.75rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.375rem; }

p { margin: 0 0 var(--space-2); max-width: 66ch; }

a { color: inherit; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-white);
  padding: var(--space-2);
  z-index: 200;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* -------------------------------------------------------------------------
   Boutons
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn--primary {
  background: var(--color-sauge);
  color: var(--color-white);
}
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--color-gold); color: var(--color-ink); }
.btn--primary:active { background: #a98a63; }

.btn--small { min-height: 40px; padding: 0 var(--space-3); font-size: 0.85rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.link-arrow::after { content: "→"; transition: transform 0.25s var(--ease); }
.link-arrow:hover { color: var(--color-gold-text); }
.link-arrow:hover::after { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(237, 230, 218, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(61, 74, 62, 0.1);
  transition: box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 4px 16px rgba(26, 26, 26, 0.06); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.header__logo img { height: 44px; width: auto; }

.header__nav {
  display: none;
  align-items: center;
  gap: var(--space-5);
}

.header__nav-list { display: flex; gap: var(--space-4); }

.header__nav-list a {
  font-size: 0.95rem;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.header__nav-list a:hover,
.header__nav-list a.is-active { border-color: var(--color-gold); color: var(--color-ink); }

.header__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.header__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-ink);
  margin: 0 auto;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  .header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-cream);
    border-bottom: 1px solid rgba(61, 74, 62, 0.1);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-3);
    display: none;
  }
  .header__nav.is-open { display: flex; }
  .header__nav-list { flex-direction: column; gap: var(--space-3); width: 100%; }
  .header__cta { margin-top: var(--space-2); }
}

@media (min-width: 900px) {
  .header__nav { display: flex; }
  .header__toggle { display: none; }
}

/* -------------------------------------------------------------------------
   Sections génériques
   ------------------------------------------------------------------------- */

.section { padding: var(--space-7) 0; }

.section__kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-gold-text);
  margin-bottom: var(--space-1);
}

.section__title { margin-bottom: var(--space-2); }

.section__intro { max-width: 52ch; font-size: 1.05rem; margin-bottom: var(--space-5); }

.section--alt { background: var(--color-cream-alt); }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.hero { padding: var(--space-6) 0 var(--space-7); overflow: hidden; }

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.hero__kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-gold-text);
  margin-bottom: var(--space-2);
}

.hero__title {
  font-size: 2.75rem;
  margin-bottom: var(--space-3);
}

.hero__subtitle { font-size: 1.1rem; margin-bottom: var(--space-4); }

@media (min-width: 900px) {
  .hero__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .hero__text { flex: 0 0 48%; }
  .hero__title { font-size: 3.5rem; }
}

/* -------------------------------------------------------------------------
   Hero vidéo (accueil) — teaser qui se fige sur un fondu beige + logo
   ------------------------------------------------------------------------- */

.hero--video { padding: 0; overflow: hidden; }

.hero__video-wrap {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 520px;
  max-height: 820px;
  background-color: var(--color-cream);
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.18) 0%, rgba(26, 26, 26, 0.12) 45%, rgba(26, 26, 26, 0.4) 100%);
  pointer-events: none;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero__overlay .hero__kicker { color: var(--color-gold-text-on-dark); }

/* Signature du titre — texte vectorisé dans Playwrite FR Moderne (police
   manuscrite chargée une seule fois via fontTools, jamais en tant que
   police web live : le chemin SVG est autonome, aucun coût de chargement
   de police, aucun risque de FOUT). Usage strictement limité à cet élément
   sur tout le site — voir la demande de refonte typo du 2026-08-05. */
.hero-signature {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.35));
}
.sig-path {
  fill: var(--color-cream);
  fill-opacity: 0;
  stroke: var(--color-cream);
  stroke-width: 40;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Le bouton sort du flux centré : le logo de la vidéo occupe le centre du
   cadre en fin de lecture, le CTA reste ancré plus bas pour ne jamais le
   recouvrir, qu'il soit visible en continu ou en fondu synchronisé. */
.hero__cta {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
}

@media (min-width: 900px) {
  .hero__video-wrap { height: 90vh; }
  .hero-signature { max-width: 760px; }
}

/* -------------------------------------------------------------------------
   Hero de page (pages secondaires : methode, camille, tarifs, contact)
   Réutilise .hero/.hero__inner/.hero__text/.hero__kicker/.hero__title —
   .hero--page force juste une colonne unique au lieu du layout à deux colonnes.
   ------------------------------------------------------------------------- */

.hero--page .hero__inner { flex-direction: column; align-items: flex-start; }
.hero--page .hero__text { flex: none; max-width: 640px; }
.hero--page { padding-bottom: var(--space-6); }

/* -------------------------------------------------------------------------
   Approche (méthode : portrait + texte continu sur Camille)
   ------------------------------------------------------------------------- */

.approach__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.approach__media img {
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (min-width: 900px) {
  .approach__inner { flex-direction: row; align-items: flex-start; gap: var(--space-7); }
  .approach__media { flex: 0 0 32%; position: sticky; top: 96px; }
  .approach__text { flex: 1; }
}

/* -------------------------------------------------------------------------
   Comparaison deux colonnes (méthode : positionnement, pour qui / contre-indications)
   ------------------------------------------------------------------------- */

.comparison__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.comparison__col {
  background: var(--color-white);
  padding: var(--space-4);
  border-radius: var(--radius);
}
.comparison__col--accent { border-top: 3px solid var(--color-gold); }

.comparison__col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.comparison__col li {
  padding-left: var(--space-3);
  position: relative;
  font-size: 0.95rem;
}
.comparison__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}

@media (min-width: 700px) {
  .comparison__grid { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
   Étapes (méthode : déroulé type d'une séance)
   ------------------------------------------------------------------------- */

.steps__list { margin-top: var(--space-4); }

.steps__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(61, 74, 62, 0.15);
}
.steps__item:last-child { border-bottom: 1px solid rgba(61, 74, 62, 0.15); }

.steps__number {
  flex: none;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--color-sauge);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 1.1rem;
}

.steps__item h3 { margin-bottom: 4px; }
.steps__item p { font-size: 0.95rem; margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Citation mise en valeur (camille : parcours)
   Même langage visuel que .reassurance__quote, classe dédiée car utilisée
   hors du contexte de la section réassurance.
   ------------------------------------------------------------------------- */

.pull-quote {
  background: var(--color-sauge);
  color: var(--color-cream);
  padding: var(--space-5);
  border-radius: var(--radius);
  margin: var(--space-5) 0;
  max-width: 720px;
}
.pull-quote p {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.5rem;
  max-width: none;
  margin-bottom: var(--space-2);
}
.pull-quote cite {
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-text-on-dark);
}

/* -------------------------------------------------------------------------
   Grille tarifaire (tarifs : formules groupées, présentation type carte de menu)
   ------------------------------------------------------------------------- */

.pricing-group + .pricing-group { margin-top: var(--space-6); }
.pricing-group h3 { margin-bottom: var(--space-1); }

.pricing-table { margin-top: var(--space-3); }

.pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(61, 74, 62, 0.15);
}
.pricing-row:last-child { border-bottom: 1px solid rgba(61, 74, 62, 0.15); }

.pricing-row__main { flex: 1; min-width: 0; }
.pricing-row__name { display: block; font-weight: 600; color: var(--color-ink); }
.pricing-row__detail { display: block; font-size: 0.9rem; margin-top: 2px; }

.pricing-row__price {
  flex: none;
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--color-sauge);
  text-align: right;
  white-space: nowrap;
}
.pricing-row__price small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.75;
}

/* -------------------------------------------------------------------------
   Contact — formulaire + coordonnées + carte
   ------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact-form { display: flex; flex-direction: column; gap: var(--space-3); }

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-weight: 600; font-size: 0.9rem; color: var(--color-ink); }

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(61, 74, 62, 0.25);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-field textarea { min-height: 140px; resize: vertical; font-family: inherit; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-sauge);
  box-shadow: 0 0 0 3px rgba(61, 74, 62, 0.12);
}

.contact-form .btn { align-self: flex-start; margin-top: var(--space-1); }

.contact-info { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-info h3 { font-size: 1.05rem; margin-bottom: 4px; }
.contact-info p { font-size: 0.95rem; margin-bottom: 0; }
.contact-info a:hover { color: var(--color-gold-text); }

@media (min-width: 600px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .contact__inner { flex-direction: row; align-items: flex-start; gap: var(--space-7); }
  .contact__form { flex: 1 1 56%; }
  .contact__aside { flex: 0 0 38%; display: flex; flex-direction: column; gap: var(--space-5); }
}

/* -------------------------------------------------------------------------
   Bannière CTA simple (fin de page methode / camille / tarifs)
   ------------------------------------------------------------------------- */

.cta-banner {
  background: var(--color-sauge);
  color: var(--color-cream);
  text-align: center;
  padding: var(--space-6) 0;
}
.cta-banner h2 { color: var(--color-cream); }
.cta-banner p { margin: 0 auto var(--space-4); max-width: 52ch; opacity: 0.9; }
.cta-banner .btn--primary { background: var(--color-gold); color: var(--color-ink); }
.cta-banner .btn--primary:hover,
.cta-banner .btn--primary:focus-visible { background: var(--color-white); color: var(--color-ink); }

/* -------------------------------------------------------------------------
   Bénéfices — grand bloc typographique (rupture volontaire avec le
   format carte utilisé par .format-card juste en dessous dans le scroll)
   ------------------------------------------------------------------------- */

.benefits__statement {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.4;
  color: var(--color-ink);
  max-width: 900px;
  margin: 0;
}

.benefits__statement em {
  font-style: italic;
  color: var(--color-gold-text);
  font-weight: 500;
}

@media (min-width: 700px) {
  .benefits__statement { font-size: 2.5rem; }
}

@media (min-width: 1100px) {
  .benefits__statement { font-size: 3rem; }
}

/* -------------------------------------------------------------------------
   Chiffres-clés — respiration visuelle entre formats et galerie
   ------------------------------------------------------------------------- */

.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  text-align: center;
}

.stat__number {
  font-family: var(--font-title);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}

.stat__label {
  font-size: 0.95rem;
  margin-bottom: 0;
}

@media (min-width: 700px) {
  .stats__grid { grid-template-columns: repeat(3, 1fr); }
  .stat__number { font-size: 5.5rem; }
}

/* -------------------------------------------------------------------------
   Présentation de Camille
   ------------------------------------------------------------------------- */

.camille-intro__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.camille-intro__media img {
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

@media (min-width: 900px) {
  .camille-intro__inner { flex-direction: row; align-items: center; gap: var(--space-7); }
  .camille-intro__media { flex: 0 0 50%; }
  .camille-intro__text { flex: 0 0 42%; }
}

/* -------------------------------------------------------------------------
   Formats de cours
   ------------------------------------------------------------------------- */

.formats { background: var(--color-cream-alt); }

.formats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.format-card {
  background: var(--color-white);
  padding: var(--space-4);
  border-radius: var(--radius);
  border-top: 3px solid var(--color-gold);
}

.format-card__icon { display: inline-flex; width: 48px; height: 48px; margin-bottom: var(--space-2); }

.format-card__price {
  font-family: var(--font-title);
  font-size: 1.25rem;
  color: var(--color-sauge);
  font-weight: 600;
  margin-top: var(--space-2);
}

@media (min-width: 700px) {
  .formats__grid { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------
   Galerie
   ------------------------------------------------------------------------- */

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.gallery__item:hover img { transform: scale(1.04); }

@media (min-width: 700px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__item--wide img { aspect-ratio: 16 / 8; }
}

/* -------------------------------------------------------------------------
   Réassurance
   ------------------------------------------------------------------------- */

.reassurance__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.reassurance__list li {
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(61, 74, 62, 0.15);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reassurance__list li:last-child { border-bottom: 1px solid rgba(61, 74, 62, 0.15); }
.reassurance__list strong { font-size: 1.05rem; color: var(--color-ink); }
.reassurance__list span { font-size: 0.95rem; }

.reassurance__quote {
  background: var(--color-sauge);
  color: var(--color-cream);
  padding: var(--space-5);
  border-radius: var(--radius);
  margin: 0;
}
.reassurance__quote p {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.4rem;
  max-width: none;
  margin-bottom: var(--space-2);
}
.reassurance__quote cite {
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-text-on-dark);
}

@media (min-width: 900px) {
  .reassurance__inner { flex-direction: row; align-items: flex-start; }
  .reassurance__points { flex: 0 0 50%; }
  .reassurance__quote { flex: 0 0 42%; }
}

/* -------------------------------------------------------------------------
   Témoignages
   ------------------------------------------------------------------------- */

.testimonials { background: var(--color-cream-alt); }

.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.testimonial-card {
  margin: 0;
  background: var(--color-white);
  padding: var(--space-4);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.testimonial-card blockquote {
  margin: 0;
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--color-ink);
}

.testimonial-card figcaption {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-gold-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (min-width: 700px) {
  .testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------
   CTA final + horaires + carte
   ------------------------------------------------------------------------- */

.cta-final__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.cta-final__infos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.cta-final__infos h3 { font-size: 1.05rem; margin-bottom: var(--space-1); }
.cta-final__infos p { font-size: 0.95rem; }

.cta-final__map {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 280px;
}
.cta-final__map iframe {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
  display: block;
}

@media (min-width: 900px) {
  .cta-final__inner { flex-direction: row; align-items: stretch; }
  .cta-final__content { flex: 0 0 50%; }
  .cta-final__map { flex: 0 0 44%; }
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.site-footer {
  background: var(--color-sauge);
  color: var(--color-cream);
  padding: var(--space-6) 0 var(--space-3);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(237, 230, 218, 0.15);
}

.footer__logo {
  font-family: var(--font-title);
  font-size: 1.6rem;
  color: var(--color-cream);
  letter-spacing: 0.02em;
}

.footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer__nav a:hover { color: var(--color-gold-text-on-dark); }

.footer__contact { display: flex; flex-direction: column; gap: 4px; font-size: 0.95rem; }
.footer__contact a:hover { color: var(--color-gold-text-on-dark); }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--space-3);
  font-size: 0.8rem;
  opacity: 0.75;
}

@media (min-width: 700px) {
  .footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .footer__bottom { flex-direction: row; justify-content: space-between; }
}

/* -------------------------------------------------------------------------
   Accessibilité — mouvement réduit
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}