/* ==========================================================================
   Domaine de la Corbonnière
   --------------------------------------------------------------------------
   Palette prélevée sur le bâti et non choisie dans une gamme :
     · surface  #F6F5F2  le granite des murs, gris neutre (mesuré #F0F0F0 / #909090)
     · encre    #1C2126  le bleu-noir de la nuit sur le domaine (mesuré #001020)
     · accent   #4F5D6B  l'ardoise des toitures (mesuré #8090A0)
   Un seul accent, réservé aux libellés, liens et états. La couleur du site
   vient des photographies, jamais de l'interface.

   Espacement : une seule échelle, --s1 à --s9 (4, 8, 12, 16, 24, 32, 48, 72,
   112 px). Toute marge ou padding vient de cette échelle. Les rares valeurs
   hors échelle sont des ajustements optiques d'un ou deux pixels (alignement
   sur la ligne de base) et sont signalées comme telles.

   Typographie : Libre Caslon Display en graisse 400 seulement, pour les titres
   (discipline d'une seule graisse, comme chez Firmdale avec le Caslon 540) ;
   Switzer 300/400/500 pour le texte. Titres 200-300 → ici 400 display contre
   corps 300 : la hiérarchie se fait par la taille et la couleur, pas la graisse.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  --surface:    #F6F5F2;
  --surface-2:  #EDECE7;
  --surface-3:  #E3E2DC;
  --ink:        #1C2126;
  --ink-soft:   #5C6369;
  --ink-faint:  #8B9196;
  --accent:     #4F5D6B;
  --accent-2:   #8A97A3;
  /* Séparateurs en opacité, jamais en aplat : ils se posent sur n'importe
     quelle surface sans créer de bord dur. */
  --line:       rgba(28, 33, 38, .14);
  --line-soft:  rgba(28, 33, 38, .07);
  --field-line: rgba(28, 33, 38, .22);
  --dark:       #232B33;
  --on-dark:    #F4F3EF;
  --on-dark-soft: #A9B0B6;
  --line-dark:  rgba(244, 243, 239, .22);

  --serif: "Libre Caslon Display", "Hoefler Text", "Times New Roman", serif;
  --serif-it: "Libre Caslon Text", "Hoefler Text", "Times New Roman", serif;
  --sans: "Switzer", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Échelle : corps 15 px, titres de section 44 px → rapport 3:1 */
  --t-body: 1rem;           /* 16px sur mobile */
  --t-small: 0.8125rem;     /* 13px */
  --t-label: 0.75rem;       /* 12px */
  --t-lead: 1.125rem;       /* 18px */
  --t-h3: 1.5rem;           /* 24px */
  --t-h2: clamp(1.75rem, 3.4vw, 2.75rem);   /* 28 → 44px */
  --t-h1: clamp(2.25rem, 5.4vw, 4.375rem);  /* 36 → 70px */
  --t-hero: clamp(2.4rem, 5.6vw, 4.25rem);

  --lh-body: 1.47;
  --lh-title: 1.1;
  --ls-label: .04em;

  /* Échelle d'espacement : 4, 8, 12, 16, 24, 32, 48, 72, 112 px.
     Toute marge ou padding du site est prise dans cette échelle, jamais
     une valeur improvisée. */
  --s1: .25rem;   /*   4px */
  --s2: .5rem;    /*   8px */
  --s3: .75rem;   /*  12px */
  --s4: 1rem;     /*  16px */
  --s5: 1.5rem;   /*  24px */
  --s6: 2rem;     /*  32px */
  --s7: 3rem;     /*  48px */
  --s8: 4.5rem;   /*  72px */
  --s9: 7rem;     /* 112px */

  --gap: clamp(1.25rem, 4.5vw, 3.5rem);
  --max: 1300px;
  /* Distance du bord de la fenêtre au bord du contenu. Sert au slider, qui
     occupe toute la largeur mais dont la première vignette doit s'aligner
     sur le texte. */
  --marge: max(var(--gap), calc((100vw - var(--max)) / 2 + var(--gap)));
  --col: 630px;             /* colonne de texte */
  --max-wide: 900px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* Le corps redescend à 15 px sur les écrans moyens. Sur mobile il reste à
   16 px : taille minimale lisible, et seuil de non-zoom sur iOS. */
@media (min-width: 640px) {
  :root { --t-body: 0.9375rem; }
}

/* --- Base ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { max-width: 100%; display: block; }
/* height:auto est obligatoire : les attributs width/height des balises <img>
   servent à réserver la place (zéro décalage), mais ils fixent aussi la hauteur.
   Sans cette ligne, toute image fluide est étirée. */
img { height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); margin-bottom: var(--s5); }
h2 { font-size: var(--t-h2); margin-bottom: var(--s5); max-width: 35ch; }
h1, h2 { margin-bottom: var(--s5); }
h3 { font-size: var(--t-h3); margin-bottom: var(--s3); }
h4 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 500; letter-spacing: 0; line-height: 1.35; margin-bottom: var(--s3); }

/* Le mot en italique Caslon dans un titre : la seule emphase décorative. */
h1 em, h2 em, h3 em { font-family: var(--serif-it); font-style: italic; }

p { margin: 0 0 var(--s5); max-width: var(--col); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

ul, ol { margin: 0 0 var(--s5); padding-left: 1.1rem; }
li { margin-bottom: var(--s2); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--surface); }

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

/* --- Grille -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gap);
}

/* Chaque section porte son propre rembourrage vertical. Un modificateur de
   fond ne doit jamais dépendre de la classe .section pour l'espacement :
   les sections alternées étaient écrites seules et se retrouvaient collées. */
.section,
.section--alt,
.section--dark { padding-block: clamp(var(--s7), 7vw, var(--s9)); }
.section--tight { padding-block: clamp(var(--s6), 4.5vw, var(--s8)); }
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--alt { background: var(--surface-2); }

/* Filet court et plein — remplace tous les pointillés. */
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  width: 67px;
  margin: 0 0 var(--s6);
}
.section--dark .rule { border-top-color: var(--line-dark); }

/* --- Libellés : petites capitales, une seule par section ------------------ */

.label {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--accent);
  margin: 0 0 var(--s4);
  display: block;
}
.section--dark .label { color: var(--accent-2); }

/* --- Titres de section --------------------------------------------------- */

.h-lead { font-size: var(--t-lead); line-height: 1.55; max-width: 48ch; }

.section__head { margin-bottom: clamp(var(--s6), 4vw, var(--s7)); }
.section__head p { max-width: 48ch; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 215px;
  padding: 1.05rem 1.9rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 30px;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Survol = un balayage, pas un changement de couleur : aucune propriété de
   peinture n'est animée, seulement une transformation.

   La nappe porte le libellé du bouton, lu dans `data-libelle`, et passe
   AU-DESSUS du texte d'origine : celui-ci reste donc lisible pendant toute la
   transition, sans qu'on ait à animer une couleur. Le `z-index` doit rester
   positif ou nul — en négatif, la nappe se peint derrière le fond du bouton
   et le balayage ne se voit pas. */
.btn::before {
  content: attr(data-libelle);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(101%);
  transition: transform .26s var(--ease);
}
.btn:hover::before { transform: none; }

.btn--solid { background: var(--accent); color: var(--surface); }
.btn--solid::before { background: var(--ink); color: var(--surface); }

.btn--blanc {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--surface);
}
.btn--blanc::before { background: var(--ink); color: var(--surface); }

.btn--contour {
  background: rgba(10, 14, 18, .18);
  border-color: rgba(244, 243, 239, .5);
  color: var(--on-dark);
}
.btn--contour::before { background: var(--on-dark); color: var(--ink); }

.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line::before { background: var(--ink); color: var(--surface); }

/* Sur un fond sombre, les deux variantes passent en clair : en encre, le
   contour et son texte descendent à 1,1 de contraste et disparaissent. La
   section d'appel porte `section--dark` pour hériter de ces règles. */
.section--dark .btn--solid {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--surface);
}
.section--dark .btn--solid::before { background: var(--ink); color: var(--surface); }
.section--dark .btn--line { border-color: var(--on-dark); color: var(--on-dark); }
.section--dark .btn--line::before { background: var(--on-dark); color: var(--ink); }

/* Sur une photo, le contour a besoin de son propre fond pour rester lisible
   quelle que soit la zone de l'image qu'il recouvre. */
.hero .btn--line, .pagehead .btn--line { background: rgba(22, 32, 42, .42); }
.hero .btn--line::before, .pagehead .btn--line::before {
  background: var(--on-dark);
  color: var(--ink);
}

.btns { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Lien texte avec filet bas */
.lien {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-2);
  padding-bottom: 2px;
  position: relative;
  display: inline-block;
}
.lien:hover { color: var(--ink); border-bottom-color: var(--ink); }
.section--dark .lien { color: var(--on-dark); border-bottom-color: var(--line-dark); }
.section--dark .lien:hover { color: var(--accent-2); }

/* --- En-tête ------------------------------------------------------------- */

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 300; padding: .7rem 1rem;
  background: var(--ink); color: var(--surface); border-radius: 30px;
}

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
}
.header--solid {
  background: var(--surface);
  border-bottom-color: var(--line);
}
/* L'en-tête n'est pas contraint par la largeur du contenu : le logo tombe
   dans le coin, pas à l'aplomb de la colonne de texte. */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  min-height: 5.25rem;
  padding-inline: clamp(1.25rem, 2.6vw, 2.25rem);
}

.brand { display: flex; align-items: center; gap: var(--s3); flex: none; }
.brand__mark { width: 1.9rem; height: 1.9rem; color: currentColor; }
.brand__mark path { fill: currentColor; }
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--serif); font-size: 1.2rem; letter-spacing: 0; }
.brand__sub {
  font-family: var(--sans); font-size: .625rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; opacity: .62; margin-top: .35rem;
}

.header__inner, .brand { color: var(--on-dark); }
.header--solid .header__inner, .header--solid .brand { color: var(--ink); }

.nav { display: flex; align-items: center; gap: var(--s6); }
.nav__list { display: flex; align-items: center; gap: 1.85rem; list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link {
  font-size: var(--t-body);
  color: inherit;
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav__link:hover, .nav__link[aria-current="page"] { border-bottom-color: currentColor; }

.header__tel {
  font-size: var(--t-body);
  display: none;
  color: inherit;
  border-bottom: 1px solid transparent;
}
.header__tel:hover { border-bottom-color: currentColor; }

.nav__toggle {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: none; border: 0; color: inherit; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-label); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase; padding: .4rem 0;
}
.nav__toggle svg { width: 1.5rem; height: 1.5rem; flex: none; }
.nav__toggle { min-height: 3rem; }

.js .nav__panel { display: none; }
.nav__panel[data-open="true"] { display: block; }
.nav__panel {
  position: absolute; inset: 100% 0 auto;
  background: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding: var(--s5) var(--gap) var(--s6);
  max-height: calc(100dvh - 5.25rem);
  overflow-y: auto;
}
.nav__panel .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.nav__panel .nav__link { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line-soft); font-size: 1.05rem; }

@media (min-width: 1024px) {
  .header__tel { display: inline-block; }
  .nav__toggle { display: none; }
  .js .nav__panel { display: block; }
  .nav__panel {
    position: static; inset: auto; background: none; color: inherit;
    border: 0; padding: 0; max-height: none; overflow: visible;
  }
  .nav__panel .nav__list { flex-direction: row; align-items: center; gap: 1.85rem; }
  .nav__panel .nav__link { padding: .3rem 0; border-bottom: 1px solid transparent; font-size: var(--t-body); }
}

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

/* Le texte est centré verticalement, avec un peu plus d'air en haut pour
   compenser la barre de navigation fixe. */
.hero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: min(94dvh, 48rem);
  padding-block: clamp(8rem, 11vw, 10rem) clamp(4rem, 7vw, 6rem);
  background: var(--ink);
  isolation: isolate;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Un seul système d'assombrissement pour tout le site : plus dense en haut
   (lisibilité de l'en-tête) et en bas (lisibilité du titre). */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 42% at 50% 52%, rgba(10,14,18,.52) 0%, rgba(10,14,18,0) 72%),
    linear-gradient(to bottom, rgba(10,14,18,.42) 0%, rgba(10,14,18,0) 18%),
    linear-gradient(to top, rgba(10,14,18,.78) 0%, rgba(10,14,18,.5) 36%, rgba(10,14,18,.2) 68%, rgba(10,14,18,.14) 100%);
}

/* Le texte est centré et posé sur la pelouse : sur les bâtiments, il se
   battait avec la pierre et les toits. */
.hero__body {
  color: var(--on-dark);
  text-align: center;
}
.hero__body h1 { max-width: 22ch; margin-bottom: var(--s5); margin-inline: auto; }
.hero__lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
  color: rgba(244, 243, 239, .92);
  margin-bottom: var(--s6);
}
.hero__body .btns { justify-content: center; }


/* Bande défilante : ce que l'on accueille, sur une seule ligne. */
.ticker {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  padding-block: 1.05rem;
}
/* Les bords s'effacent dans la couleur du fond. Un masque aurait effacé
   aussi le fond du bandeau, laissant voir la page blanche de chaque côté. */
.ticker::before,
.ticker::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(2rem, 7vw, 6rem);
  z-index: 1;
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(to right, var(--ink), rgba(28,33,38,0)); }
.ticker::after  { right: 0; background: linear-gradient(to left, var(--ink), rgba(28,33,38,0)); }
.ticker__piste {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: defile 52s linear infinite;
}
.ticker__piste span {
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(244, 243, 239, .84);
  white-space: nowrap;
}
.ticker__piste span::after {
  content: "\00b7";
  margin-left: 2.5rem;
  color: var(--chene-500);
}
@keyframes defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Sans mouvement, la liste se lit d'un coup. */
@media (prefers-reduced-motion: reduce) {
  .ticker__piste {
    animation: none; width: auto; flex-wrap: wrap;
    justify-content: center; gap: .4rem 1.25rem;
  }
  .ticker__piste span::after { content: none; }
  .ticker::before, .ticker::after { display: none; }
}

/* En-tête de page intérieure */
.pagehead {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  padding-top: 9rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.pagehead__media { position: absolute; inset: 0; z-index: -2; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,14,18,.9) 0%, rgba(10,14,18,.55) 60%, rgba(10,14,18,.42) 100%);
}
.pagehead h1 { font-size: clamp(2rem, 4.4vw, 3.5rem); max-width: 30ch; }
.pagehead__intro { margin-top: var(--s5); font-size: var(--t-lead); max-width: 42rem; color: rgba(244,243,239,.88); }
.pagehead .label { color: var(--accent-2); }

.crumbs { font-size: var(--t-small); color: rgba(244,243,239,.66); margin-bottom: var(--s5); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: .45rem; opacity: .5; }
.crumbs a:hover { color: var(--on-dark); }

/* --- Mise en page -------------------------------------------------------- */

.split { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--text-left { grid-template-columns: 0.92fr 1.08fr; }
  .split--text-right { grid-template-columns: 1.08fr 0.92fr; }
  /* Texte face a un tableau. La colonne du texte est plus etroite que celle du
     tableau : le texte la remplit donc jusqu'a son bord, comme le tableau
     remplit la sienne. Avec des colonnes egales, le texte s'arrete bien avant
     son bord et l'ecart visible entre les deux blocs change d'une section a
     l'autre — ce qui rend le miroir bancal.
     `--table-droite` : le texte est a gauche. `--table-gauche` : l'inverse. */
  .split--table-droite { grid-template-columns: 0.84fr 1.16fr; }
  .split--table-gauche { grid-template-columns: 1.16fr 0.84fr; }
  .split--top { align-items: start; }
}

/* --- Photographie : deux ratios, aucun cadre, aucune ombre --------------- */

.ph { margin: 0; }
.ph img { width: 100%; height: auto; }
.ph--carre img { aspect-ratio: 1 / 1; object-fit: cover; }
.ph--paysage img { aspect-ratio: 3 / 2; object-fit: cover; }
.ph--portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.ph figcaption {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin-top: var(--s3);
  line-height: 1.5;
}
.section--dark .ph figcaption { color: var(--on-dark-soft); }

.bande { position: relative; background: var(--ink); margin: 0; overflow: hidden; }
.bande img { width: 100%; height: clamp(16rem, 40vw, 32rem); object-fit: cover; }
.bande figcaption {
  position: absolute; left: var(--gap); right: var(--gap); bottom: 1.5rem;
  color: var(--on-dark);
  font-size: var(--t-small);
}
.bande::after {
  content: "";
  position: absolute; inset: auto 0 0; height: 40%;
  background: linear-gradient(to top, rgba(10,14,18,.8), rgba(10,14,18,0));
  pointer-events: none;
}
.bande figcaption { z-index: 1; }

/* Galerie : grille régulière, deux ratios */
.gal { display: grid; gap: clamp(var(--s3), 1.6vw, var(--s4)); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .gal { grid-template-columns: repeat(3, 1fr); } }
.gal figure { margin: 0; }
.gal img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gal--carre img { aspect-ratio: 1 / 1; }
.gal figcaption { font-size: var(--t-small); color: var(--ink-soft); margin-top: var(--s2); line-height: 1.45; }
.section--dark .gal figcaption { color: var(--on-dark-soft); }

/* --- Tableaux de faits --------------------------------------------------- */

.faits { margin: 0; border-top: 1px solid var(--line); }
.section--dark .faits { border-top-color: var(--line-dark); }
/* Empilé sur mobile : en 1fr / auto, une valeur longue (un menu entier)
   écrase l'intitulé et fait déborder la ligne. */
.faits > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
  .faits > div {
    grid-template-columns: 1fr auto;
    gap: var(--s5);
    align-items: baseline;
  }
}
.section--dark .faits > div { border-bottom-color: var(--line-dark); }
.faits dt { font-size: var(--t-body); color: var(--ink); font-weight: 500; }
.section--dark .faits dt { color: var(--on-dark); }
.faits dd {
  margin: 0;
  font-size: var(--t-body);
  text-align: left;
  font-weight: 400;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) { .faits dd { text-align: right; } }
.section--dark .faits dd { color: var(--on-dark-soft); }

/* Liste de distances */
.dist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.section--dark .dist { border-top-color: var(--line-dark); }
.dist li {
  display: flex; justify-content: space-between; gap: var(--s5);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.section--dark .dist li { border-bottom-color: var(--line-dark); }
.dist li span:last-child { font-variant-numeric: tabular-nums; color: var(--accent); }
.section--dark .dist li span:last-child { color: var(--accent-2); }

/* --- Cartes de prestation (une seule grille, pas de cartes empilées) ----- */

.prestations { display: grid; gap: var(--s6); }
@media (min-width: 780px) { .prestations { grid-template-columns: repeat(3, 1fr); } }

.prestation { display: block; }
.prestation .ph { margin-bottom: var(--s4); }
.prestation img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prestation h3 { font-size: 1.4rem; margin-bottom: var(--s2); }
.prestation p { font-size: var(--t-body); color: var(--ink-soft); margin: 0; }
a.prestation:hover h3 { color: var(--accent); }

/* --- Liste éditoriale (les offres) -------------------------------------- */

.liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.section--dark .liste { border-top-color: var(--line-dark); }
.liste > li { margin: 0; border-bottom: 1px solid var(--line); }
.section--dark .liste > li { border-bottom-color: var(--line-dark); }
.liste a {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
  padding-block: var(--s5);
  align-items: baseline;
}
@media (min-width: 760px) { .liste a { grid-template-columns: 1.15fr .85fr auto; gap: var(--s6); } }
.liste strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; display: block; margin-bottom: .3rem; }
.liste span { font-size: var(--t-body); color: var(--ink-soft); }
.section--dark .liste span { color: var(--on-dark-soft); }
.liste .meta { font-size: var(--t-small); color: var(--ink-faint); }
.section--dark .liste .meta { color: var(--on-dark-soft); }
.liste a:hover strong { color: var(--accent); }

/* --- Déroulé ------------------------------------------------------------ */

.deroule { list-style: none; margin: 0; padding: 0; }
.deroule li {
  display: grid; gap: var(--s2) var(--s6);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line);
  margin: 0;
}
@media (min-width: 700px) { .deroule li { grid-template-columns: 8rem 1fr; } }
.deroule li:first-child { border-top: 1px solid var(--line); }
.deroule dd, .deroule p { margin: 0; max-width: var(--col); }

/* --- FAQ ---------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; gap: var(--s5); align-items: baseline;
  padding-block: var(--s5);
  cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 1.1rem; color: var(--accent); flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq__answer { padding-bottom: var(--s5); }
.faq__answer p { color: var(--ink-soft); max-width: 58ch; }

/* --- Formulaire --------------------------------------------------------- */

.form { display: grid; gap: var(--s5); max-width: 44rem; }
@media (min-width: 640px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); } }

.field { display: flex; flex-direction: column; gap: var(--s2); }
.field label {
  font-size: var(--t-label); font-weight: 500;
  color: var(--ink-soft);
}
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: var(--t-body); color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--field-line);
  border-radius: 2px;
  padding: .8rem .9rem;
  width: 100%;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;   /* le contour reste dans le champ */
  border-color: var(--accent);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M.5.5 4 4 7.5.5' stroke='%235C6369'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
  background-size: 8px 5px;
  padding-right: var(--s9);
}
.field__hint { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.6; }

/* --- Coordonnées -------------------------------------------------------- */

.coord { display: grid; gap: var(--s6); }
@media (min-width: 760px) { .coord { grid-template-columns: 1.15fr .85fr; } }
.coord h3 { font-size: 1rem; font-family: var(--sans); font-weight: 500; color: var(--ink-soft); margin-bottom: var(--s3); }
.coord p { margin: 0 0 var(--s2); }
.coord .fort { font-family: var(--serif); font-size: 1.35rem; }

/* --- Appel final -------------------------------------------------------- */

.appel { background: var(--dark); color: var(--on-dark); padding-block: clamp(3.5rem, 7vw, 6rem); }
.appel__inner { display: grid; gap: var(--s6); align-items: end; }
@media (min-width: 880px) { .appel__inner { grid-template-columns: 1.45fr .55fr; } }
.appel h2 { max-width: 22ch; margin-bottom: var(--s4); }
.appel p { color: rgba(244,243,239,.85); }
@media (min-width: 880px) { .appel .btns { justify-content: flex-end; } }

/* --- Pied de page ------------------------------------------------------- */

.footer { background: var(--dark); color: rgba(244,243,239,.74); padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; font-size: var(--t-small); }
.footer__grid { display: grid; gap: var(--s6); padding-bottom: var(--s7); }
@media (min-width: 700px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }
.footer h3 {
  font-family: var(--sans); font-size: var(--t-label); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--on-dark); margin-bottom: var(--s4);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--s2); }
.footer a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer__marque { font-family: var(--serif); font-size: 1.35rem; color: var(--on-dark); display: block; margin-bottom: var(--s3); }
.footer__note {
  border-top: 1px solid var(--line-dark);
  padding-top: var(--s5);
  font-size: var(--t-small);
  color: rgba(244,243,239,.5);
  max-width: 60rem;
}
.footer__note strong { color: rgba(244,243,239,.76); font-weight: 500; }
.footer__bas {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: space-between;
  padding-top: var(--s5); font-size: var(--t-small); color: rgba(244,243,239,.48);
}

/* --- Colonne d'appel mobile (absente du secteur, masquée) ---------------- */

.barre { display: none; }

/* --- 20. Mouvement -------------------------------------------------------
   Cinq mouvements, chacun avec un rôle. Tous n'animent que `transform` ou
   `opacity` : jamais une propriété de mise en page, jamais une couleur.
   Aucune section n'apparaît au défilement : c'est le marqueur du motion
   généré, celui que l'œil filtre à la troisième section.

   1. La photo d'ouverture se dézoome, une seule fois, au chargement.
   2. Les quatre enfants du hero montent en cascade.
   3. Les bandeaux pleine largeur s'ouvrent au défilement, par une animation
      liée au scroll — donc sans JavaScript.
   4. Les filets de lien se déploient depuis la gauche au survol.
   5. L'en-tête se retire en descendant et revient en remontant.

   3 et 5 sont progressifs : sans prise en charge, l'image reste nette et
   l'en-tête reste fixe. Tous se désactivent avec `prefers-reduced-motion`. */

@keyframes dezoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@keyframes montee {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ouverture {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: dezoom 1.4s var(--ease) both; }

  .hero__body > * { animation: montee .9s var(--ease) both; }
  .hero__body > *:nth-child(1) { animation-delay: .16s; }
  .hero__body > *:nth-child(2) { animation-delay: .26s; }
  .hero__body > *:nth-child(3) { animation-delay: .36s; }
  .hero__body > *:nth-child(4) { animation-delay: .46s; }
}

/* Filets de lien : déploiement depuis la gauche. */
@media (hover: hover) {
  .lien::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .26s var(--ease);
  }
  .lien:hover::after { transform: none; }

}
/* Le filet du menu ne concerne que la barre horizontale : en dessous, la liste
   empilée garde ses séparateurs. */
@media (hover: hover) and (min-width: 1024px) {
  .nav__link::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: .34rem;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .26s var(--ease);
  }
  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after { transform: none; }
}

/* En-tête qui se retire en descendant, et revient en remontant. */
.header { transition: transform .35s var(--ease); }
.header--retire { transform: translateY(-100%); }

/* --- Slider -------------------------------------------------------------- */

.glisse__tete {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s4);
  margin-bottom: var(--s5);
}
.glisse__compteur {
  font-family: var(--serif); font-size: 1.05rem;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
  margin-right: var(--s4);
}
.glisse__compteur b { font-weight: 400; color: var(--ink); }
.glisse__commandes { display: flex; align-items: center; }
.glisse__fleche {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  cursor: pointer; transition: transform .2s var(--ease);
}
.glisse__fleche + .glisse__fleche { border-left: 0; }
.glisse__fleche:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.glisse__fleche:disabled { opacity: .3; cursor: default; }
.glisse__fleche:disabled:hover { background: transparent; color: var(--ink); border-color: var(--line); }
.glisse__fleche svg { width: 1.25rem; height: 1.25rem; flex: none; }
.glisse__fleche:active { transform: scale(.96); }

.glisse__vue { overflow: hidden; }
.glisse__piste {
  display: flex; gap: var(--s4);
  padding-inline: var(--marge);
  will-change: transform;
  transition: transform .62s var(--ease);
  /* Le geste horizontal est pris par le slider, le vertical reste au
     défilement de la page. */
  touch-action: pan-y;
  cursor: grab;
}
.glisse__piste.est-saisie { cursor: grabbing; }
.glisse__piste.est-saisie img { pointer-events: none; }
.glisse__piste:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Les vignettes prennent toute la place disponible : c'est le sujet de la
   section, elles doivent dominer. */
.glisse__piste figure {
  flex: 0 0 auto; width: min(88vw, 60rem); margin: 0;
}
.glisse__piste img {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  background: var(--surface-3);
}
@media (prefers-reduced-motion: reduce) { .glisse__piste { transition: none; } }

/* --- Révélation au défilement -------------------------------------------
   Deux effets, une seule courbe, et rien sur les paragraphes : le texte de
   lecture ne s'anime pas.

   1. Les titres de section sortent de dessous leur ligne. Le titre sert de
      masque, la ligne remonte.
   2. Les photos, les blocs de grille et la photo de bandeau montent d'un cran.

   Le mouvement est armé par le script, qui pose `.anime` sur <html> et
   seulement si le visiteur accepte le mouvement. Sans JavaScript, ou si le
   mouvement est refusé, aucune de ces règles ne s'applique : le contenu est
   simplement là. `--retard` vient du script, c'est le décalage entre voisins
   entrés dans l'écran ensemble ; comme c'est une propriété personnalisée,
   elle se transmet au span qui porte la transition. */

.titre { overflow: hidden; padding-bottom: .16em; }
.titre > span { display: block; }

.anime .titre > span {
  transform: translateY(112%);
  transition: transform .95s var(--ease) var(--retard, 0ms);
}
.anime .titre.est-visible > span { transform: none; }

.anime figure,
.anime .prestation,
.anime .liste > li {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity .8s var(--ease) var(--retard, 0ms),
              transform .8s var(--ease) var(--retard, 0ms);
}
.anime figure.est-visible,
.anime .prestation.est-visible,
.anime .liste > li.est-visible { opacity: 1; transform: none; }

/* Le bandeau : la photo s'ouvre dans son cadre, elle ne monte pas. */
.anime .bande img {
  transform: scale(1.07);
  transition: transform 1.3s var(--ease) var(--retard, 0ms);
}
.anime .bande.est-visible img { transform: none; }

/* --- Utilitaires -------------------------------------------------------- */

.stack > * + * { margin-top: var(--s5); }
/* Un bloc de texte centre dans sa colonne, quand il fait face a une table. */
.centre { text-align: center; }
.stack-lg > * + * { margin-top: var(--s6); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }
/* Dans un bloc composé, la marge basse du dernier titre ne double pas
   l'espacement du conteneur. */
.stack > h1:last-child, .stack > h2:last-child, .stack > h3:last-child { margin-bottom: 0; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }