/* =====================================================================
   CAMYNGO — feuille de style
   Charte déduite de la maquette (_REFERENCES/maquette-accueil-v1.png) :
   crème papier, doré/ocre, anthracite, vert olive ; serif éditorial
   pour les titres, sans-serif pour le texte, manuscrite pour les accroches.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --cream: #f5efe4;
  --cream-2: #efe6d6;
  --paper: #fbf8f2;
  --white: #ffffff;
  --gold: #b8862b;
  --gold-dark: #9a6f20;
  --gold-text: #a3761f; /* doré utilisé pour du texte de grande taille (contraste ≥ 3:1 sur crème) */
  --gold-soft: #f1e7d3;
  --ink: #232220;
  --ink-2: #4a4741;
  --muted: #6f6a61;
  --olive: #4a5334;
  --olive-dark: #3b432a;
  --olive-leaf: #7d8a5f;
  --footer: #1b1b1b;
  --footer-2: #141414;
  --footer-text: #d8d3c8;
  --line: rgba(35, 34, 32, 0.12);
  --success: #2f6b3a;
  --error: #a83b2f;

  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Caveat', 'Segoe Script', cursive;

  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(35, 34, 32, 0.06);
  --shadow-md: 0 12px 30px rgba(35, 34, 32, 0.1);
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;

  /* texture papier : tuile PNG pré-rasterisée (un filtre SVG feTurbulence en fond de page gelait le rendu Chrome — vérifié 18/09/2026) */
  --paper-noise: url('/assets/img/paper-noise.png?v=927ff38c');
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

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

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

img {
  height: auto;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* sprite d'icônes : hors flux mais rendu (display:none casse <use> sur certains navigateurs) */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  transition: top 0.15s;
}

.skip-link:focus {
  top: 12px;
}

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* ---------- 3. Éléments partagés ---------- */
.overline {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 14px;
}

.rule {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin: 18px 0 22px;
}

.rule--gold {
  background: var(--gold);
}

.script {
  font-family: var(--font-script);
  font-weight: 500;
  color: var(--gold-text);
  line-height: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  border: 1.5px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  white-space: nowrap;
}

.btn .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}

.btn:hover .icon:last-child {
  transform: translateX(3px);
}

.btn--gold {
  background: var(--gold);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(184, 134, 43, 0.28);
}

.btn--gold:hover {
  background: var(--gold-dark);
}

.btn--outline {
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  border-color: rgba(35, 34, 32, 0.55);
}

.btn--outline:hover {
  background: var(--white);
  border-color: var(--ink);
}

.btn--lg {
  padding: 17px 30px;
  font-size: 16px;
}

.btn[aria-disabled='true'],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-dark); /* 14,5 px : contraste AA (≥ 4,5:1) sur fond papier */
  font-weight: 500;
  font-size: 14.5px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.link-arrow .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.link-arrow:hover {
  color: var(--gold-dark);
}

.link-arrow:hover .icon {
  transform: translateX(3px);
}

.badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
  flex: none;
}

.badge-icon .icon {
  width: 24px;
  height: 24px;
}

/* ---------- 4. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* pas de backdrop-filter : gelait le rendu/capture Chrome sur la machine de test (18/09/2026) */
  background: rgba(245, 239, 228, 0.96);
  transition: box-shadow 0.25s, background 0.25s;
}

.site-header.is-scrolled {
  background: var(--cream);
  box-shadow: 0 6px 24px rgba(35, 34, 32, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.brand__logo {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  object-fit: cover;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand__name {
  font-family: var(--font-serif);
  font-size: 23px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.brand__sub {
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 3px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.site-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.site-nav__link {
  position: relative;
  display: inline-block;
  padding: 10px 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color 0.2s;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s;
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--ink);
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after {
  transform: scaleX(1);
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: -8px;
  border-radius: 50%;
  color: var(--ink-2);
  transition: transform 0.2s, background 0.2s;
}

.dropdown-toggle .icon {
  width: 16px;
  height: 16px;
}

.dropdown-toggle:hover {
  background: rgba(35, 34, 32, 0.06);
}

.has-dropdown.is-open .dropdown-toggle {
  transform: rotate(180deg);
}

.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
}

.dropdown a:hover,
.dropdown a:focus-visible {
  background: var(--gold-soft);
  color: var(--ink);
}

@media (hover: hover) and (min-width: 1025px) {
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.has-dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__cta {
  flex: none;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.nav-toggle__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.nav-toggle__bars span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1024px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--cream);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    display: none;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .site-nav__link {
    flex: 1;
    padding: 14px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }

  .has-dropdown .dropdown-toggle {
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    align-self: stretch;
    height: auto;
  }

  .dropdown {
    flex-basis: 100%;
  }

  .site-nav__link::after {
    display: none;
  }

  .site-nav__link.is-active {
    color: var(--gold-dark);
  }

  .dropdown-toggle {
    width: 44px;
    height: 44px;
    margin: 0;
  }

  .dropdown {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 4px 0 8px 16px;
    width: 100%;
    min-width: 0;
  }

  .has-dropdown.is-open .dropdown {
    display: block;
  }

  .site-nav__cta {
    margin-top: 18px;
    justify-content: center;
  }
}

/* ---------- 5. Hero ---------- */
/* Composition éditoriale : texte à gauche sur le papier crème, photo client À DROITE ET EN ENTIER
   (ratio d'origine conservé, aucun recadrage), coins arrondis, fin cadre doré décalé, ombre douce.
   Le conteneur du hero est un peu plus large (1360px) pour donner de l'ampleur à la photo. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(calc(100svh - var(--header-h)), 640px);
  padding: clamp(36px, 4.5vw, 56px) 0 clamp(48px, 5vw, 64px);
}

/* Grille « breakout » : colonnes latérales = marges du conteneur principal (max(gutter, (100% - 1200px)/2)),
   colonne texte 540px (alignée sur les autres sections), colonne photo 660px + la marge droite
   → la photo gagne en ampleur sur grand écran tout en restant entière. */
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 540px) minmax(0, 660px) minmax(var(--gutter), 1fr);
  align-items: center;
}

.hero__content {
  grid-column: 2;
  padding-right: 32px; /* 508px utiles : titre 62px (~450px) et les 2 boutons (~460px) tiennent sur une ligne */
}

.hero__media {
  position: relative;
  grid-column: 3 / 5;
  margin: 0;
  padding: 0 var(--gutter) 14px 0; /* s'arrête à la gouttière du bord droit ; place pour le cadre décalé */
}

.hero__media img {
  width: 100%;
  height: auto; /* entière : jamais de recadrage */
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 60px rgba(35, 34, 32, 0.18);
  background: var(--cream-2);
}

/* fin cadre doré décalé (accent éditorial) */
.hero__media::before {
  content: '';
  position: absolute;
  inset: 14px calc(var(--gutter) - 14px) 0 14px;
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-lg);
  opacity: 0.55;
  pointer-events: none;
}


.hero__title {
  font-size: clamp(40px, 4.4vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.hero__title .script {
  display: block;
  font-size: 1.12em;
  margin-top: 0.05em;
  font-weight: 500;
}

.hero__lead {
  max-width: 34ch;
  font-size: 17px;
  color: var(--ink-2);
  margin-top: 8px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 32px;
  margin-top: 36px;
}

.hero__points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-2);
  max-width: 150px;
}

.hero__points .icon {
  width: 26px;
  height: 26px;
  color: var(--ink-2);
}

.hero__caption {
  position: absolute;
  left: -22px;
  bottom: -6px;
  padding: 10px 16px 8px 14px;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1;
  text-align: left;
  transform: rotate(-6deg);
  color: var(--gold-text);
  background: rgba(251, 248, 242, 0.92);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(35, 34, 32, 0.12);
}

.hero__caption::after {
  content: '';
  display: block;
  width: 60%;
  height: 2px;
  margin: 6px 0 0;
  background: var(--gold);
  border-radius: 2px;
  transform: rotate(-2deg);
}

/* ornements olivier */
.olive {
  position: absolute;
  z-index: -1;
  color: var(--olive-leaf);
  opacity: 0.55;
  pointer-events: none;
}

.olive--hero-tl {
  width: 130px;
  top: -20px;
  left: -30px;
  transform: rotate(120deg);
}

.olive--hero-bl {
  width: 170px;
  bottom: 20px;
  left: -40px;
  transform: rotate(35deg);
  opacity: 0.45;
}

.olive--cta-left {
  width: 160px;
  left: -20px;
  top: -30px;
  color: #b9c39a;
  opacity: 0.35;
  transform: rotate(140deg);
}

/* ---------- 6. Sections ---------- */
.section {
  padding: clamp(56px, 8vw, 96px) 0;
}

.section-head {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 32px 56px;
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.section-head h2 {
  font-size: clamp(30px, 3.5vw, 44px);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .section-head h2 {
    white-space: normal;
  }
}

.section-head .rule {
  margin-bottom: 0;
}

.section-head__text {
  font-size: 15.5px;
  color: var(--ink-2);
  max-width: 52ch;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

/* Univers */
.univers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(35, 34, 32, 0.06);
  border-radius: var(--radius-lg);
  padding: 12px 12px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s, box-shadow 0.25s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card__media {
  aspect-ratio: 4 / 3.15;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-2);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card .badge-icon {
  margin: -27px 0 0 8px;
  border: 4px solid var(--paper);
  width: 58px;
  height: 58px;
}

.card__body {
  padding: 10px 10px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card__title {
  font-size: 21px;
  margin-bottom: 8px;
}

.card__text {
  font-size: 14.5px;
  color: var(--ink-2);
  flex: 1;
}

.card__link {
  margin-top: 18px;
}

/* lien couvrant : toute la carte est cliquable */
.card__link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Ancrage local */
/* Photo en fond, pleine largeur : les textes sont posés à gauche (sur le feuillage d'olivier, flou),
   le village, le clocher et les montagnes restent dégagés à droite. Un voile crème, plus présent
   à gauche, plus la transparence des panneaux, garantit la lisibilité. (Pas de lazy-loading sur ce
   fond : Chrome ne le déclenchait pas — vérifié 19/09/2026.) */
.local {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(56px, 7vw, 96px) 0;
  /* photo en background CSS (peinte avec la section : ni lazy-loading, ni repaint différé d'<img>) */
  background: url('/assets/img/ancrage-village-provence.webp?v=771648d3') 50% 42% / cover no-repeat;
}

/* voile crème */
.local::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, var(--cream) 0, rgba(245, 239, 228, 0) 12%, rgba(245, 239, 228, 0) 88%, var(--cream) 100%),
    linear-gradient(to right, rgba(245, 239, 228, 0.55) 0%, rgba(245, 239, 228, 0.45) 40%, rgba(245, 239, 228, 0.2) 68%, rgba(245, 239, 228, 0.1) 100%);
}

.local__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.9fr 0.85fr; /* colonne centrale vide : le clocher reste visible */
  gap: 40px;
  align-items: center;
  min-height: 420px;
}

/* panneau translucide : la photo transparaît, le texte reste net */
.local__panel {
  background: rgba(251, 248, 242, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(35, 34, 32, 0.08);
}

.local__content {
  grid-column: 1;
  padding: clamp(28px, 3vw, 40px);
}

.local__content h2 {
  font-size: clamp(32px, 3.6vw, 44px);
}

.local__content p {
  color: var(--ink-2);
  font-size: 15.5px;
  max-width: 54ch;
}

.local__content .btn {
  margin-top: 26px;
}

.local__map {
  position: relative;
  grid-column: 3;
  padding: 22px 24px 24px;
}

.map-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: transparent;
  aspect-ratio: 19 / 12;
}

.map-card__shape {
  width: 100%;
  height: 100%;
}

.map-card__label {
  position: absolute;
  left: 20%;
  top: 34%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.2;
}

.map-card__label .icon {
  width: 22px;
  height: 22px;
  color: var(--gold);
  margin-top: 14px;
}

.map-card__label small {
  display: block;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 4px;
}

.local__area {
  margin-top: 22px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.local__area strong {
  display: block;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}

/* Pourquoi */
.why {
  padding: clamp(40px, 5vw, 60px) 0 clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--line);
}

.why__head {
  text-align: center;
  margin-bottom: 36px;
}

.why__head .overline {
  margin-bottom: 10px;
}

.why__head .rule {
  margin: 0 auto;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.why-item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 8px 28px;
  border-left: 1px solid var(--line);
}

.why-item:first-child {
  border-left: 0;
  padding-left: 0;
}

.why-item h3 {
  font-size: 17.5px;
  margin-bottom: 4px;
}

.why-item p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
}

/* Bandeau CTA */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--olive);
  color: var(--white);
  padding: clamp(40px, 5vw, 56px) 0;
}

.cta-band__texture {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 20% 50%, rgba(255, 255, 255, 0.08), transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(0, 0, 0, 0.18), transparent 60%), var(--paper-noise);
  opacity: 0.9;
}

.cta-band__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.8fr;
  gap: 32px;
  align-items: center;
}

.cta-band__title {
  font-size: clamp(34px, 3.6vw, 46px);
  color: var(--white);
}

.cta-band__script {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
  font-family: var(--font-script);
  font-size: clamp(30px, 3vw, 40px);
  color: #e6c47a;
  padding-left: 40px;
}

.cta-band__script .rule {
  margin: 0;
  width: 48px;
  background: #e6c47a;
}

.cta-band__text {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.cta-band__quote {
  position: relative;
  font-family: var(--font-script);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.1;
  color: #efe7d2;
  transform: rotate(-6deg);
  justify-self: end;
  padding-right: 70px;
}

.cta-band__leaf {
  position: absolute;
  right: 0;
  top: -6px;
  width: 52px;
  color: #e6c47a;
}

/* ---------- 7. Footer ---------- */
.site-footer {
  background: var(--footer);
  color: var(--footer-text);
  font-size: 14px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1.1fr 0.7fr 1.3fr;
  gap: 32px;
  padding: clamp(40px, 5vw, 56px) 0 clamp(32px, 4vw, 44px);
}

.brand--footer .brand__name,
.brand--footer .brand__sub {
  color: var(--white);
}

.brand--footer .brand__sub {
  color: #b9b4a9;
}

.site-footer__script {
  font-family: var(--font-script);
  font-size: 24px;
  line-height: 1.1;
  color: #e3c98a;
  margin-top: 26px;
  transform: rotate(-5deg);
  transform-origin: left;
}

.site-footer__script--right {
  text-align: right;
  margin-top: 8px;
  transform-origin: right;
}

.site-footer__heading {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 16px;
}

.site-footer__list li {
  margin-bottom: 10px;
}

.site-footer__list a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__list--icons li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-footer__list--icons .icon {
  width: 20px;
  height: 20px;
  color: #d3cdbf;
}

.site-footer__social {
  display: flex;
  gap: 10px;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #2a2a2a;
  color: var(--white);
  transition: background 0.2s;
}

.site-footer__social a:hover {
  background: var(--gold);
}

.site-footer__social .icon {
  width: 18px;
  height: 18px;
}

.site-footer__sketch {
  grid-column: -2 / -1; /* toujours la dernière colonne, que la colonne réseaux soit affichée ou non */
  justify-self: end;
  width: 100%;
  max-width: 300px;
}

.site-footer__drawing {
  width: 100%;
  color: #cfc9bc;
  opacity: 0.8;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--footer-2);
  font-size: 12.5px;
  color: #9d988e;
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 16px 0;
}

.site-footer__legal {
  display: flex;
  gap: 12px;
}

.site-footer__legal li + li::before {
  content: '|';
  margin-right: 12px;
  color: #4a4a4a;
}

.site-footer__legal a:hover {
  color: var(--white);
}

/* ---------- 8. Pages intérieures ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}

.page-hero h1 {
  font-size: clamp(36px, 5vw, 60px);
  max-width: 18ch;
}

.page-hero h1 .script {
  font-size: 1.05em;
}

.page-hero__lead {
  max-width: 60ch;
  color: var(--ink-2);
  font-size: 17px;
  margin-top: 18px;
}

.page-hero .olive {
  right: -30px;
  top: -20px;
  width: 200px;
  transform: rotate(-150deg);
  opacity: 0.35;
}

.prose {
  max-width: 68ch;
  color: var(--ink-2);
  font-size: 16px;
}

.prose h2 {
  font-size: 30px;
  margin: 40px 0 14px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: 22px;
  margin: 28px 0 10px;
}

.prose p + p {
  margin-top: 14px;
}

.prose ul {
  list-style: disc;
  padding-left: 22px;
  margin: 12px 0;
}

.prose li + li {
  margin-top: 6px;
}

.prose a {
  color: var(--gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  color: var(--ink-2);
  font-size: 15px;
}

.notice .icon {
  width: 22px;
  height: 22px;
  color: var(--gold);
  margin-top: 2px;
}

.notice strong {
  color: var(--ink);
}

.notice--success {
  border-left-color: var(--success);
}

.notice--success .icon {
  color: var(--success);
}

.notice--error {
  border-left-color: var(--error);
}

.notice--error .icon {
  color: var(--error);
}

.two-col {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
}

.aside-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.aside-card h2 {
  font-size: 24px;
  margin-bottom: 16px;
}

.aside-card ul li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.aside-card ul li:last-child {
  border-bottom: 0;
}

.aside-card .icon {
  width: 20px;
  height: 20px;
  color: var(--gold);
}

.aside-card a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aside-card .btn {
  margin-top: 20px;
  width: 100%;
  justify-content: center;
}

/* Liste d'univers (page Nos matériels) */
.univers-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chips li {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-2);
}

/* ---------- 9. Formulaire ---------- */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form__field--full {
  grid-column: 1 / -1;
}

.form label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.form label .req {
  color: var(--gold-dark);
}

.form input,
.form select,
.form textarea {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(35, 34, 32, 0.22);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form textarea {
  min-height: 140px;
  resize: vertical;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 134, 43, 0.18);
}

.form input[aria-invalid='true'],
.form select[aria-invalid='true'],
.form textarea[aria-invalid='true'] {
  border-color: var(--error);
}

.form__error {
  font-size: 13px;
  color: var(--error);
  min-height: 1em;
}

.form__hint {
  font-size: 13px;
  color: var(--muted);
}

.form__consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
}

.form__consent input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex: none;
  accent-color: var(--gold);
}

.form__consent label {
  font-weight: 400;
}

.form__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}

.form__status {
  grid-column: 1 / -1;
}

.form__status:empty {
  display: none;
}

/* honeypot anti-spam : hors écran, jamais rempli par un humain */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 10. Responsive ---------- */
@media (max-width: 1100px) {
  .univers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;
  }

  .why-item:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1.2fr;
  }

  .site-footer__sketch {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 260px;
  }

  .local__inner {
    grid-template-columns: 1fr 0.8fr;
  }

  .local__map {
    grid-column: 2;
  }

  .local::before {
    background:
      linear-gradient(to bottom, var(--cream) 0, rgba(245, 239, 228, 0) 12%, rgba(245, 239, 228, 0) 88%, var(--cream) 100%),
      rgba(245, 239, 228, 0.4);
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 40px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    width: min(var(--container), 100% - 2 * var(--gutter));
    margin-inline: auto;
  }

  .hero__content {
    grid-column: 1;
    padding-right: 0;
  }

  /* la photo (entière) passe au-dessus du texte ; pas de cadre décalé en portrait (il engloberait l'accroche) */
  .hero__media {
    grid-column: 1;
    order: -1;
    padding: 0;
  }

  .hero__media::before {
    display: none;
  }

  /* sous la photo (jamais par-dessus) : la photo reste visible en entier */
  .hero__caption {
    position: static;
    display: inline-block;
    margin: 14px 0 0 2px;
    font-size: 20px;
    padding: 8px 12px 6px;
    transform: rotate(-3deg);
  }

  .section-head {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .section-head__text {
    padding-left: 0;
    border-left: 0;
  }

  .local__inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .local__content,
  .local__map {
    grid-column: auto;
  }

  .local__map {
    max-width: 420px;
  }

  .local {
    background-position: 62% 50%; /* garde le clocher dans le cadre en portrait */
  }

  .cta-band__inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .cta-band__quote {
    justify-self: start;
    transform: none;
    padding-right: 60px;
  }

  .two-col {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .univers-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .univers-grid,
  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-item {
    border-left: 0;
    padding: 6px 0;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .site-footer__sketch {
    max-width: 260px;
  }

  .form {
    grid-template-columns: 1fr;
  }

  .hero__points li {
    max-width: none;
  }

  .btn {
    padding-inline: 20px;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ---------- 11. Utilitaires ---------- */
.stack {
  margin-top: 26px;
}

.mt-0 {
  margin-top: 0 !important;
}

.card--single {
  max-width: 520px;
}

.notice--spaced {
  margin-bottom: 32px;
}

.link-inline {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--gold-dark);
}

.chips {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 20px !important;
}

/* ---------- 12. Transition de page « tondeuse » (API View Transitions, multi-pages) ----------
   Au changement de page, l'ancienne page (capture) est « tondue » de gauche à droite avec un bord
   découpé façon herbe, pendant qu'une tondeuse (élément .mower, nommé pour la transition) traverse
   l'écran ; la nouvelle page apparaît derrière. Navigateurs sans support : navigation classique. */
@view-transition {
  navigation: auto;
}

.mower {
  position: fixed;
  top: 44vh;
  left: -240px;
  width: clamp(150px, 28vw, 210px);
  z-index: 9999;
  pointer-events: none;
  view-transition-name: mower;
}

.mower svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 14px rgba(35, 34, 32, 0.22));
}

::view-transition-image-pair(root) {
  isolation: auto;
}

/* l'ancienne page reste au-dessus et se fait découper ; la nouvelle est déjà en place dessous */
::view-transition-old(root) {
  z-index: 1;
  mix-blend-mode: normal;
  animation: mow-cut 900ms linear both;
}

::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: none;
}

/* la tondeuse : on n'utilise que sa capture « nouvelle », déplacée par le groupe (translate/rotate
   individuels : ils se composent avec le transform de positionnement posé par le navigateur) */
::view-transition-old(mower) {
  animation: none;
  opacity: 0;
}

::view-transition-new(mower) {
  animation: none;
}

::view-transition-group(mower) {
  animation: mow-ride 900ms linear both;
}

@keyframes mow-cut {
  from {
    clip-path: polygon(calc(0% - 9px) 0.0%, calc(0% + 9px) 7.14%, calc(0% - 9px) 14.29%, calc(0% + 9px) 21.43%, calc(0% - 9px) 28.57%, calc(0% + 9px) 35.71%, calc(0% - 9px) 42.86%, calc(0% + 9px) 50.0%, calc(0% - 9px) 57.14%, calc(0% + 9px) 64.29%, calc(0% - 9px) 71.43%, calc(0% + 9px) 78.57%, calc(0% - 9px) 85.71%, calc(0% + 9px) 92.86%, calc(0% - 9px) 100.0%, 100% 100%, 100% 0%);
  }
  to {
    clip-path: polygon(calc(100% + 18px - 9px) 0.0%, calc(100% + 18px + 9px) 7.14%, calc(100% + 18px - 9px) 14.29%, calc(100% + 18px + 9px) 21.43%, calc(100% + 18px - 9px) 28.57%, calc(100% + 18px + 9px) 35.71%, calc(100% + 18px - 9px) 42.86%, calc(100% + 18px + 9px) 50.0%, calc(100% + 18px - 9px) 57.14%, calc(100% + 18px + 9px) 64.29%, calc(100% + 18px - 9px) 71.43%, calc(100% + 18px + 9px) 78.57%, calc(100% + 18px - 9px) 85.71%, calc(100% + 18px + 9px) 92.86%, calc(100% + 18px - 9px) 100.0%, 100% 100%, 100% 0%);
  }
}

/* décalage de +80px : le carter (milieu de la tondeuse) reste sur la ligne de coupe, la tondeuse
   part depuis le bord gauche et sort par le bord droit */
@keyframes mow-ride {
  from {
    translate: 80px 0;
    rotate: 0deg;
  }
  25% {
    rotate: -1.4deg;
  }
  50% {
    translate: calc(50vw + 220px) 0;
    rotate: 1.2deg;
  }
  75% {
    rotate: -1deg;
  }
  to {
    translate: calc(100vw + 360px) 0;
    rotate: 0deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  .mower {
    display: none;
  }
}