/* ==========================================================================
   CHEFS & PRESTIGE — by Jennifer Taddei
   Direction alignee sur la page d'accueil : fond blanc, Cormorant Garamond en
   capitales espacees, EB Garamond au courant, logotype et brun #7e2911.
   Pas de troisieme voix typographique : l'accueil n'en introduit aucune.
   ========================================================================== */

/* Les polices sont hebergees sur le site (fonts/) et non plus chez Google :
   chaque visite transmettait sinon l'adresse IP du visiteur a Google, aux
   Etats-Unis. Fichiers woff2 du jeu « latin » de Google Fonts, licence SIL
   Open Font License. Les graisses droites sont des polices variables. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 500;font-display:swap;src:url("fonts/cormorant-garamond.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 500;font-display:swap;src:url("fonts/eb-garamond.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/eb-garamond-italique.woff2") format("woff2")}

:root {
  /* Couleurs */
  --paper:    #ffffff;   /* le blanc de la page d’accueil */
  --paper-up: #f6f4f3;   /* la bande alternée, à peine teintée */
  --white:    #ffffff;
  --ink:      #14100e;
  --ink-soft: #4d4540;
  --ink-mute: #63594f;
  --brown:    #7e2911;
  --brown-up: #9c3a18;
  --dark:     #191512;
  --dark-up:  #241e19;
  --line:      rgba(20, 16, 14, 0.16);
  --line-field: rgba(20, 16, 14, 0.5);   /* 3,5:1 sur blanc — WCAG 1.4.11 */
  --line-soft: rgba(20, 16, 14, 0.09);
  --line-dark: rgba(241, 239, 239, 0.18);

  /* Typographie */
  --display: "Cormorant Garamond", "Didot", "Times New Roman", serif;
  --body:    "EB Garamond", "Iowan Old Style", Georgia, serif;
  --script:  "Cormorant Garamond", "Didot", serif;   /* l’accueil n’a pas de cursive */

  /* Mesures */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --wrap:   1320px;
  --sect-y: clamp(4.5rem, 9vw, 10rem);
  --header-h: 84px;
}

/* ------------------------------------------------------------------ Reset */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* L'en-tete est collant : sans cette marge, une section rejointe par une
     ancre arrive dessous et son titre reste cache. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.24vw, 1.125rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--brown); color: var(--paper); }

:focus-visible { outline: 2px solid var(--brown); outline-offset: 4px; }
.on-dark :focus-visible, .hero :focus-visible { outline-color: var(--paper); }

/* ------------------------------------------------------------- Primitives */

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

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 50%; z-index: 300;
  transform: translate(-50%, -140%);
  background: var(--brown); color: var(--paper);
  padding: 0.8rem 1.4rem; text-decoration: none;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  transition: transform 0.2s ease;
}
.skip:focus { transform: translate(-50%, 0); }

/* Titre didone : capitales, tres espacees, graisse legere */
.dsp {
  font-family: var(--display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  line-height: 1.06;
  text-wrap: balance;
}

/* Etiquette : petites capitales tres espacees, comme « BY JENNIFER TADDEI » */
.lbl {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brown);
  line-height: 1.5;
  margin: 0 0 1.6rem;
}
.on-dark .lbl { color: #c9a882; }

.scr {
  font-family: var(--display);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 300;
}

.h2 { font-size: clamp(1.9rem, 1.1rem + 3.5vw, 3.9rem); }
/* Le titre de « La maison » reprend le brun des intitules de section : la page
   n'a plus de hero, ce titre ouvre seul, et l'encre noire y etait trop sourde. */
.h2--terre { color: var(--brown); }
.h3 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 2rem); }

.lede {
  font-size: clamp(1.05rem, 1rem + 0.42vw, 1.28rem);
  color: var(--ink-soft);
  max-width: 60ch;
  line-height: 1.68;
}
.on-dark .lede { color: rgba(241, 239, 239, 0.74); }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* -------------------------------------------------------------- Sections */

.sect { padding-block: var(--sect-y); }
.sect--tight { padding-block: clamp(3rem, 6vw, 6rem); }
/* Le titre « Nos realisations » annonce la galerie qui suit : les deux marges
   de section se cumulaient et ouvraient un blanc de 172 px entre les deux. */
.sect--chapeau { padding-bottom: 0; }
.sect--chapeau + .sect { padding-top: clamp(1.5rem, 3vw, 2.6rem); }
.sect--dark { background: var(--dark); color: var(--paper); }
.sect--up { background: var(--paper-up); }

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

.btn {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 1.05rem 2.1rem;
  font-family: var(--body);
  font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  position: relative; z-index: 0; border: 0; background: transparent; color: var(--paper);
  transition: color 0.25s ease;
}
/* Boutons en parallelogramme : les bords gauche et droit reprennent la pente
   de la couture de l'accueil (16 % de la largeur sur la hauteur, ~14,5° sur
   un ecran 16:10 ; main.js affine --pente a la taille reelle). Le cadre et le
   fond sont portes par un calque incline (::before), le texte reste droit. */
:root { --pente: 14.5deg; }
.btn::before, .btn-svg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--brown); transform: skewX(var(--pente));
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
/* Le cadre incline deborde a gauche de la marge du texte, de tan(pente) x
   demi-hauteur (~6 px) : le bouton se decale d'autant vers la droite pour que
   sa pointe haute-gauche tombe sur la marge. Annule la ou il est centre. */
.btn, .btn-svg { margin-inline-start: calc(tan(var(--pente)) * 1.6rem); }
.cta .btn, .cta .btn-svg, .nav .btn { margin-inline-start: 0; }
.btn::before { background: var(--brown); }
.btn:hover::before { background: var(--brown-up); border-color: var(--brown-up); }

.btn--ghost { color: var(--ink); }
.btn--ghost::before { background: transparent; border-color: rgba(20, 16, 14, 0.38); }
.btn--ghost:hover { color: var(--ink); }
.btn--ghost:hover::before { background: transparent; border-color: var(--ink); }
.on-dark .btn--ghost, .hero .btn--ghost { color: var(--paper); }
.on-dark .btn--ghost::before, .hero .btn--ghost::before { border-color: var(--line-dark); }
.on-dark .btn--ghost:hover, .hero .btn--ghost:hover { color: var(--paper); }
.on-dark .btn--ghost:hover::before, .hero .btn--ghost:hover::before { border-color: var(--paper); }

.btn .arw { transition: transform 0.25s ease; }
.btn:hover .arw { transform: translateX(5px); }

.btns { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* Boutons SVG fournis (logo portant le libellé sur son plateau). Les quatre
   partagent les mêmes bornes d’encre (12 → 157 sur 175) : on les dimensionne
   donc par la HAUTEUR, jamais par la largeur, pour qu’ils s’alignent entre eux.
   Le filet qui les encadre n’est pas décoratif : sans lui le SVG se lit comme
   une image, pas comme une commande. Il porte aussi l’état de survol, qu’un
   tracé seul ne peut pas porter. */
.btn-svg {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.62rem 1.15rem;
  position: relative; z-index: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-svg::before { transition: background-color 0.3s ease, border-color 0.3s ease; }
.btn-svg img {
  height: clamp(22px, 2.1vw, 30px); width: auto; display: block;
  transition: filter 0.3s ease;
}
.btn-svg:hover { transform: translateY(-3px); }
.btn-svg:hover::before { background: var(--brown); }
.btn-svg:hover img { filter: brightness(0) invert(1); }
/* L'appel a l'action revient sous le texte d'introduction, la ou le hero le
   portait avant. Il respire, sans bandeau ni photo. */
.appel { margin-top: clamp(1.8rem, 3.5vw, 2.8rem); }

/* Sur photo et sur fond sombre, le filet et l’encre passent au blanc : c’est la
   même famille que les titres du héros, qui sont blancs eux aussi. Un aplat
   brun y introduirait une quatrième valeur en concurrence avec le logotype. */
.hero .btn-svg::before, .on-dark .btn-svg::before, .cta .btn-svg::before, .sect--dark .btn-svg::before {
  border-color: rgba(255, 255, 255, 0.62);
}
.hero .btn-svg:hover::before, .on-dark .btn-svg:hover::before,
.cta .btn-svg:hover::before, .sect--dark .btn-svg:hover::before {
  background: rgba(255, 255, 255, 0.14); border-color: #fff;
}
.hero .btn-svg:hover img, .on-dark .btn-svg:hover img,
.cta .btn-svg:hover img, .sect--dark .btn-svg:hover img {
  filter: brightness(0) invert(1);
}
/* Sur tout fond sombre — bandeau brun de clôture compris — l'encre brune du
   bouton fourni deviendrait invisible : on le passe en blanc. */
.on-dark .btn-svg img, .hero .btn-svg img,
.cta .btn-svg img, .sect--dark .btn-svg img { filter: brightness(0) invert(1); }

/* Lien souligne fin */
.ulink {
  text-decoration: none;
  border-bottom: 1px solid var(--brown);
  padding-bottom: 2px;
  color: var(--brown);
  transition: border-color 0.2s ease;
}
.ulink:hover { border-color: transparent; }

/* --------------------------------------------------------------- Entete */

.hdr {
  position: fixed; inset: 0 0 auto; z-index: 200;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
  border-bottom: 1px solid transparent;
  color: var(--paper);
}
.hdr::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 190px;
  background: linear-gradient(to bottom, rgba(10, 8, 7, 0.62), rgba(10, 8, 7, 0));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.hdr--solid::before, .hdr--static::before { opacity: 0; }

.hdr__in {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--header-h);
}
.hdr--solid {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--line-soft);
}
.hdr--static { position: sticky; top: 0; background: var(--paper); color: var(--ink); border-bottom-color: var(--line-soft); }

/* Heros lumineux : encre sombre et voile clair, pour ne pas assombrir la photo */
.hdr--light { color: var(--ink); }
.hdr--light::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
}
.hdr--light .brand__mark,
.hdr--solid .brand__mark,
.hdr--static .brand__mark { filter: none; }

.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.brand__mark { width: 132px; height: auto; flex: none; transition: filter 0.35s ease; }
.hdr:not(.hdr--solid):not(.hdr--static):not(.hdr--light) .brand__mark { filter: brightness(0) invert(1); }
.brand__mark { width: 148px; }

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); }
.nav__a {
  position: relative; text-decoration: none;
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding-block: 0.4rem; white-space: nowrap;
}
.nav__a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__a:hover::after, .nav__a[aria-current="page"]::after { transform: scaleX(1); }
/* Ou suis-je : le groupe qui contient la page courante garde son filet, comme
   une entree directe. Pose par data-here dans chaque page. */
.nav__b[data-here]::after { transform: scaleX(1); }

/* ── Navigation groupée : les trois zones de la page d'accueil ───────────── */
/* Lien de texte courant : souligné discret qui s'affirme au survol. */
.lk {
  text-decoration: none; color: var(--brown);
  border-bottom: 1px solid rgba(126, 41, 17, 0.35);
  padding-bottom: 0.08em; transition: border-color 0.25s ease, color 0.25s ease;
}
.lk:hover { border-bottom-color: var(--brown); color: var(--brown-up); }
/* Appui : 500 est la graisse la plus lourde chargee pour EB Garamond. Un 700
   serait synthetise par le navigateur — un faux gras, sale sur un garamond. */
.lk--fort { font-weight: 500; border-bottom-color: var(--brown); }
.on-dark .lk { color: #e8b79a; border-bottom-color: rgba(232, 183, 154, 0.4); }
.on-dark .lk:hover { color: #fff; border-bottom-color: #fff; }

.nav__grp { position: relative; }
.nav__b {
  background: none; border: 0; cursor: pointer; color: inherit; font: inherit;
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.4em;
}
.nav__b::before {
  content: ""; width: 0; height: 0; order: 2;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; opacity: 0.55;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav__grp:hover .nav__b::before,
.nav__b[aria-expanded="true"]::before { transform: rotate(180deg); opacity: 1; }
.nav__sub {
  position: absolute; top: calc(100% + 0.7rem); left: 50%; transform: translate(-50%, -6px);
  min-width: 15.5rem; padding: 0.5rem 0;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-soft); border-radius: 2px;
  box-shadow: 0 18px 44px rgba(20, 16, 14, 0.13);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.25s;
  z-index: 40;
}
/* Le menu flotte 0,7 rem sous le bouton. En descendant vers lui, la souris
   traversait ce vide, le survol du groupe cessait et le menu se refermait
   avant d'etre atteint : il fallait cliquer. Ce pont invisible comble le vide
   et garde le survol continu du bouton au menu. */
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -0.8rem; height: 0.8rem; }
.nav__grp:hover .nav__sub,
.nav__grp:focus-within .nav__sub,
.nav__b[aria-expanded="true"] + .nav__sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.nav__sub a {
  display: block; text-decoration: none; padding: 0.62rem 1.25rem;
  font-family: var(--display); font-size: 1.02rem; line-height: 1.25;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav__sub a:hover, .nav__sub a[aria-current="page"] { background: var(--paper); color: var(--brown); }

.lang { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; letter-spacing: 0.16em; }
.lang a { text-decoration: none; opacity: 0.55; transition: opacity 0.2s ease; }
.lang a:hover, .lang a[aria-current="true"] { opacity: 1; }
.lang span { opacity: 0.3; }

/* Drapeaux : SVG en data-URI, pour ne dependre d'aucun fichier ni d'aucun emoji
   (Windows n'affiche pas les emoji drapeaux). Le lisere suit la couleur du
   header : clair sur les heros sombres, sombre quand le header devient blanc. */
.lang__f {
  display: block; width: 22px; height: 15px;
  border-radius: 2px;
  background-size: cover; background-position: center;
  text-decoration: none;
  opacity: 0.45;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.35);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
  transition: opacity 0.2s ease;
}
.lang__f:hover, .lang__f:focus-visible, .lang__f[aria-current="page"] { opacity: 1; }
.lang__f--en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23fff'/%3E%3Cg fill='%23B31942'%3E%3Crect y='0' width='60' height='3.08'/%3E%3Crect y='6.15' width='60' height='3.08'/%3E%3Crect y='12.31' width='60' height='3.08'/%3E%3Crect y='18.46' width='60' height='3.08'/%3E%3Crect y='24.62' width='60' height='3.08'/%3E%3Crect y='30.77' width='60' height='3.08'/%3E%3Crect y='36.92' width='60' height='3.08'/%3E%3C/g%3E%3Crect width='24' height='21.54' fill='%230A3161'/%3E%3C/svg%3E"); }
.lang__f--fr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23ED2939'/%3E%3Crect width='2' height='2' fill='%23fff'/%3E%3Crect width='1' height='2' fill='%23002395'/%3E%3C/svg%3E"); }

.burger {
  display: none; background: none; border: 0; cursor: pointer;
  color: inherit; padding: 0.5rem; margin-right: -0.5rem;
}
.burger__l { display: block; width: 26px; height: 1px; background: currentColor; transition: transform 0.3s ease, opacity 0.2s ease; }
.burger__l + .burger__l { margin-top: 7px; }
/* Les traits sont espaces de 8 px (7 px de marge + 1 px de trait) : pour que
   la croix se ferme au centre, le premier et le dernier glissent de 8 px. */
.burger[aria-expanded="true"] .burger__l:nth-child(1) { transform: translateY(8px) rotate(45deg); }
/* Le trait du milieu disparait tout de suite et se replie sur lui-meme : un
   simple fondu le laissait visible pendant que les deux autres tournent, et
   Safari laissait des bribes de trait en fin de course. */
.burger__l:nth-child(2) { transition: transform 0.15s ease, opacity 0.1s ease; }
.burger[aria-expanded="true"] .burger__l:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] .burger__l:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ----------------------------------------------------------------- Heros */

.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex; align-items: flex-end;
  color: var(--paper);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(8,6,5,.36) 0%,
    rgba(8,6,5,.16) 22%,
    rgba(8,6,5,.56) 44%,
    rgba(8,6,5,.80) 72%,
    rgba(8,6,5,.92) 100%);
}
.hero__in { position: relative; width: 100%; padding-block: clamp(6.5rem, 13vh, 9rem) clamp(7rem, 13vh, 10rem); }

.hero__places {
  font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(241, 239, 239, 0.88);
  margin: 0 0 1.5rem;
}
.hero__ttl { font-size: clamp(2.4rem, 1rem + 6.6vw, 6.4rem); letter-spacing: 0.1em; }
/* Même traitement que la ligne de lieux sous le logo de l’accueil :
   Cormorant, sans capitales, sans interlettrage — pas de cursive. */
.hero__scr {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.1rem, 0.8rem + 1.6vw, 2.1rem);
  line-height: 1.3; margin-top: 0.55rem;
  color: rgba(255, 255, 255, 0.93);
}
.hero__lede {
  margin-top: 1.9rem; max-width: 46ch;
  color: rgba(241, 239, 239, 0.82);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.18rem);
}
/* Le bouton fourni clôt le héros, à la place de l'ancien bouton du menu. */
.hero__act { margin: clamp(1.6rem, 3.5vw, 2.6rem) 0 0; }
.hero__act .btn-svg img { height: clamp(24px, 2.3vw, 33px); }

.hero--inner { min-height: min(74svh, 660px); }

/* La coupe descendante de la page d’accueil, reprise en bas des héros :
   même sens (elle descend vers la droite), amplitude réduite au format. */
.hero--inner { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%); }
.hero--inner + * { margin-top: -1px; }
@media (max-width: 760px) { .hero--inner { clip-path: none; } }

/* ------------------------------- Heros de marque : le logo posé sur la photo */
.hero--brand {
  align-items: flex-start;
  text-align: center;
  min-height: min(94svh, 880px);
}
.hero--brand .hero__bg img { object-position: center 34%; }
.hero--brand .hero__bg::after { background: none; }
.hero--brand .hero__in {
  padding-block: calc(var(--header-h) + clamp(0.6rem, 2.6vh, 2rem)) 0;
}
.hero--brand .hero__places {
  color: var(--brown);
  margin: 0 0 clamp(0.7rem, 1.7vh, 1.15rem);
}
.hero__logo { margin: 0; }
.hero__logo img {
  width: min(40%, 430px);
  height: auto;
  margin-inline: auto;
}
.hero--brand .hero__scr {
  color: var(--brown);
  margin-top: clamp(0.2rem, 0.8vh, 0.6rem);
  font-size: clamp(1.1rem, 0.6rem + 1.6vw, 1.95rem);
}

/* La promesse descend sur le fond papier, au-dessus de la carte de choix */
.promise {
  text-align: center;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.25rem, 1rem + 1.3vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 30ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  color: var(--ink);
}
.hero--inner .hero__ttl { font-size: clamp(2.1rem, 1rem + 4.6vw, 4.6rem); }


/* --------------------------------------------- La carte de choix (signature) */

.pick-zone { background: var(--paper); padding-block: clamp(3rem, 6vw, 5rem) 0; }
.pick {
  background: var(--paper-up);
  border: 1px solid var(--line-soft);
  margin-inline: auto;
  max-width: 1080px;
  position: relative; z-index: 5;
  box-shadow: 0 40px 80px -50px rgba(20, 16, 14, 0.5);
}
.pick__hd {
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 3.5vw, 3.2rem) clamp(1rem, 2vw, 1.6rem);
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.pick__hd .lbl { margin-bottom: 0.7rem; }
.pick__hd p { color: var(--ink-soft); font-size: 0.98rem; max-width: 52ch; margin-inline: auto; }

.pick__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.4rem, 3.5vw, 3.2rem);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 0.3s ease, padding-left 0.3s ease;
}
.pick__row:last-child { border-bottom: 0; }
.pick__row:hover { background: var(--white); }
.pick__row h2 {
  font-family: var(--display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.09em;
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.55rem);
  line-height: 1.2;
  transition: color 0.25s ease;
}
.pick__row:hover h2 { color: var(--brown); }
.pick__row p { margin: 0.5rem 0 0; color: var(--ink-soft); font-size: 0.97rem; max-width: 62ch; }
.pick__arw {
  font-size: 1.2rem; color: var(--brown);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pick__row:hover .pick__arw { transform: translateX(8px); }

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

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.split--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
/* Miroir de .split--wide : la photo passe a gauche, le texte a droite. L'ordre
   du HTML reste texte puis photo, pour qu'en colonne unique le visiteur lise
   avant de voir — comme dans « Notre histoire ». */
.split--miroir { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.split--miroir > figure { order: -1; }
.split--narrow { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.split--top { align-items: start; }

.head { max-width: 58ch; }
/* Un titre n'est pas de la prose : il n'a pas a tenir dans une mesure de
   lecture. .head en impose une de 58ch, et ces titres centres s'y
   cassaient en deux lignes — il a fallu la relever a chaque titre plus
   long que le precedent. On la leve donc : le titre n'est plus borne que
   par la colonne. La prose, elle, reste bornee par .lede (60ch) et se
   recentre toute seule. */
.head.head--center { max-width: none; margin-inline: auto; text-align: center; }
.head--center .lede { margin-inline: auto; }
.head .h2 { margin-bottom: 1.5rem; }

/* Photo encadree */
.ph { position: relative; overflow: hidden; background: rgba(20,16,14,.05); }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.ph--tall { aspect-ratio: 2 / 3; }
.ph--sq { aspect-ratio: 1 / 1; }
.ph--wide { aspect-ratio: 3 / 2; }
.ph--pano { aspect-ratio: 16 / 9; }
/* Recadrage : les sources verticales ont besoin d'un point d'ancrage explicite */
.ph--face img { object-position: center 26%; }
.ph--top img  { object-position: center top; }
/* La photo du chef est un paysage : ce cadrage reprend celui de la page
   d'accueil (--ch-fin-p:48%), pour que le chef reste centre dans le portrait. */
.ph--chef img { object-position: 48% center; }
a:hover > .ph img, .card:hover .ph img { transform: scale(1.045); }

.ph__cap {
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 0.85rem;
}

/* -------------------------------------------------------------- Formats */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.card { text-decoration: none; display: block; }
.card h3 {
  font-family: var(--display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.28rem);
  margin: 1.15rem 0 0.55rem;
  /* Le titre grossit et s'appuie au survol, sans changer de couleur. L'echelle
     passe par transform : une transition de font-size reflowerait le
     paragraphe en dessous a chaque passage de souris. L'origine est a gauche,
     comme l'alignement du texte. 500 est la graisse la plus lourde chargee
     pour Cormorant Garamond — un 700 serait un faux gras synthetise. */
  transform-origin: left center;
  /* La graisse n'est pas animee : sans axe variable elle bascule d'un coup au
     milieu de la transition, ce qui se voit. Elle change net, l'echelle glisse. */
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover h3 { transform: scale(1.07); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .card h3 { transition: none; } }

/* Nos realisations : meme animation que les cartes « Formats signature ».
   Chaque photo s'agrandit sous la souris ; le titre de la galerie (« La
   table », « La cuisine », « Le service ») grossit et s'appuie des que la
   souris est sur la galerie, comme le titre d'une carte. */
.gal figure:hover .ph img { transform: scale(1.045); }
.sect:has(.gal) .h3--terre {
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sect:has(.gal):hover .h3--terre { transform: scale(1.07); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .sect:has(.gal) .h3--terre { transition: none; } }
.card p { font-size: 0.96rem; color: var(--ink-soft); line-height: 1.62; }
.on-dark .card p { color: rgba(241, 239, 239, 0.68); }

/* -------------------------------------------------------------- Process */

.steps { counter-reset: st; margin-top: clamp(2.5rem, 5vw, 4rem); }
.step {
  counter-increment: st;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-block: clamp(1.5rem, 2.6vw, 2.3rem);
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}
.on-dark .step { border-top-color: var(--line-dark); }
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.on-dark .step:last-child { border-bottom-color: var(--line-dark); }
.step::before {
  content: "0" counter(st);
  font-family: var(--display); font-size: 1.5rem; font-weight: 300;
  color: var(--brown); letter-spacing: 0.06em;
}
.on-dark .step::before { color: #c9a882; }
.step h3 {
  font-family: var(--display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.13em;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem);
}
.step p { color: var(--ink-soft); font-size: 0.98rem; }
.on-dark .step p { color: rgba(241, 239, 239, 0.68); }

/* ------------------------------------------------------------ Prestataires */

/* Types d'evenement : une photo, et son nom en legende dessous. La grille est
   celle de .gal--5 (cinq colonnes, deux sur tablette, une sur telephone) ;
   la legende reprend .ph__cap, celle des autres photos du site, centree. Sa
   marge propre est annulee : l'ecart vient deja du gap de .evt. */
.evt { margin: 0; display: grid; gap: 0.8rem; align-content: start; }
.evt > .ph__cap { margin-top: 0; text-align: center; }
.tag {
  border: 1px solid var(--line);
  padding: 0.62rem 1.15rem;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.on-dark .tag { border-color: var(--line-dark); color: rgba(241, 239, 239, 0.75); }

/* ---------------------------------------------------------------- Chefs */

.names {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 1px; background: var(--line-dark);
  border-block: 1px solid var(--line-dark);
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
.name { background: var(--dark); padding: 1.6rem 0.5rem; text-align: center; }
.name span {
  font-family: var(--display); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.15rem);
}

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

.gal {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.gal > * { grid-column: span 4; }
.gal > .g-6 { grid-column: span 6; }
.gal > .g-8 { grid-column: span 8; }
.gal > .g-12 { grid-column: span 12; }
/* Deux photos empilees dans une seule case : sans cela, une figure seule a
   cote d'une g-8 est etiree par la grille et laisse un blanc sous son image. */
.gal > .pile { display: grid; gap: inherit; align-content: start; }
/* Cinq photos cote a cote : les douze colonnes habituelles ne se divisent pas
   par cinq, donc cette galerie passe a cinq colonnes egales. La double classe
   sur les enfants l'emporte sur les span des paliers responsive. */
.gal--5 { grid-template-columns: repeat(5, 1fr); }
.gal.gal--5 > * { grid-column: auto; }
@media (max-width: 900px) { .gal--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .gal--5 { grid-template-columns: 1fr; } }
.gal .off { margin-top: clamp(1.5rem, 4vw, 4rem); }

/* ------------------------------------------------------------ Temoignages */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.quote { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.on-dark .quote { border-top-color: var(--line-dark); }
.quote p {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.5rem);
  line-height: 1.36; font-style: italic;
}
.quote cite {
  display: block; margin-top: 1.1rem; font-style: normal;
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brown);
}
.on-dark .quote cite { color: #c9a882; }

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

.cta { background: var(--brown); color: var(--paper); text-align: center; padding-block: clamp(4rem, 8vw, 8rem); }
.cta .h2 { margin-bottom: 1.4rem; }
.cta p { color: rgba(241, 239, 239, 0.8); max-width: 52ch; margin-inline: auto; }
.cta .btns { justify-content: center; margin-top: 2.6rem; }
.cta .btn { color: var(--brown); }
.cta .btn::before { background: var(--paper); border-color: var(--paper); }
.cta .btn:hover::before { background: var(--white); border-color: var(--white); }
.cta .btn--ghost { background: transparent; color: var(--paper); border-color: rgba(241,239,239,.4); }
.cta .btn--ghost:hover { background: transparent; border-color: var(--paper); }
.cta .lbl { color: rgba(241, 239, 239, 0.7); }

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

.brief { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }

.aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.aside .h3 { margin-bottom: 1.1rem; }
.aside p { color: var(--ink-soft); font-size: 0.98rem; }
.contacts { list-style: none; margin: 2rem 0 0; padding: 0; }
.contacts li { border-top: 1px solid var(--line-soft); padding-block: 1rem; }
.contacts b {
  display: block; font-weight: 500;
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 0.35rem;
}
.contacts a { text-decoration: none; border-bottom: 1px solid var(--line); }
.contacts a:hover { border-color: var(--brown); color: var(--brown); }
/* Instagram : le pictogramme fait partie du lien, dans la couleur du texte ;
   le soulignement reste sous le nom du compte seulement. */
.contacts a.insta { display: inline-flex; align-items: center; gap: 0.5em; border-bottom: 0; }
.contacts a.insta span { border-bottom: 1px solid var(--line); }
.contacts a.insta:hover span { border-color: var(--brown); }
.insta__ico { width: 1.15em; height: 1.15em; flex: none; }
/* Pied de page : plus precis que « .ftr__col a », qui passe en inline-block
   sur telephone et casserait l'alignement du pictogramme. */
.ftr__col a.insta { display: inline-flex; align-items: center; gap: 0.5em; }

/* Contact : la carte de Cagnes-sur-Mer, chargee au clic (main.js, section 12).
   Avant le clic, un encadre au meme format annonce le lieu. */
.carte { margin: clamp(1.8rem, 3.5vw, 2.4rem) 0 0; }
/* Meme style que les intitules de la colonne (.contacts b). Double classe :
   « .aside p » (taille et couleur des paragraphes de la colonne) l'emporterait. */
.carte .carte__titre {
  font-weight: 500; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0 0 0.6rem;
}
.carte__btn, .carte__cadre { display: block; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.carte__btn {
  display: grid; place-content: center; justify-items: center; gap: 0.4rem;
  background: var(--paper-up); color: var(--ink); font: inherit; cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.carte__btn:hover, .carte__btn:focus-visible { border-color: var(--brown); background-color: #efeae7; }
.carte__pin { width: 2rem; height: 2rem; color: var(--brown); }
.carte__lieu { font-family: var(--display); font-size: 1.4rem; color: var(--brown); }
.carte__action { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.carte__cadre { background: var(--paper-up); }
.carte__note { margin-top: 0.6rem; font-size: 0.85rem; color: var(--ink-mute); }

/* Visionneuse de « Nos realisations » (main.js, section 13) : la photo en grand
   sur fond sombre, entiere (contain), dans les limites de l'ecran. */
[data-visionneuse] .gal img { cursor: zoom-in; }
/* Albums ([data-album], Organisation complete : « Mariages ») : la photo
   ouvre la visionneuse sur une suite de photos, annoncee par un badge. Fond
   du badge a 70 % : le blanc y tient au moins 6:1, quelle que soit la photo. */
[data-album] .ph img { cursor: zoom-in; }
.album__nb {
  position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 1; pointer-events: none;
  padding: 0.3rem 0.6rem; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; background: rgba(20, 16, 14, 0.7);
}
html.vis-ouverte { overflow: hidden; }
.vis {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: #14100e; color: #fff;
}
.vis[open] { display: grid; place-items: center; animation: vis-entree 0.3s ease; }
.vis::backdrop { background: transparent; }
.vis__fig { margin: 0; display: grid; place-items: center; }
.vis__img {
  display: block; width: auto; height: auto; object-fit: contain;
  max-width: calc(100vw - 9rem); max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem);
}
.vis__btn {
  position: absolute; padding: 0.8rem; border: 0; background: none;
  color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: color 0.2s ease;
}
.vis__btn:hover, .vis__btn:focus-visible { color: #fff; }
.vis__btn svg { display: block; width: 2rem; height: 2rem; }
.vis__fermer { top: 0.8rem; right: 0.8rem; }
.vis__prec { left: 1rem; top: 50%; transform: translateY(-50%); }
.vis__suiv { right: 1rem; top: 50%; transform: translateY(-50%); }
.vis__compte {
  position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); margin: 0;
  font-size: 0.78rem; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.7);
}
@keyframes vis-entree { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vis[open] { animation: none; } }
/* Telephone : la photo prend toute la largeur, les fleches descendent de
   part et d'autre du compteur (on peut aussi glisser au doigt). */
@media (max-width: 760px) {
  .vis__img { max-width: 100vw; max-height: calc(100vh - 8rem); max-height: calc(100dvh - 8rem); }
  .vis__prec, .vis__suiv { top: auto; bottom: 0.8rem; transform: none; }
  .vis__compte { bottom: 2.1rem; }
}

.form { display: grid; gap: 1.9rem; }
.fset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.fset > legend, .fld > label {
  padding: 0;
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-mute);
}
/* align-content: start est ce qui rend les encadres symetriques. Dans une
   .row2 / .row3, les colonnes s'etirent a la hauteur de la plus haute ; sans
   cette ligne, un champ facultatif — sans ligne d'erreur sous lui — voyait
   l'espace en trop reparti sur ses rangees : son etiquette descendait et son
   encadre devenait plus grand que ses voisins. */
.fld { display: grid; gap: 0.55rem; align-content: start; }
.hint { font-size: 0.86rem; color: var(--ink-mute); letter-spacing: 0; text-transform: none; font-weight: 400; }

.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form input[type="date"], .form input[type="number"], .form select, .form textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-field);
  --pad-y: 0.92rem;
  padding: var(--pad-y) 1.05rem; width: 100%;
  border-radius: 0; -webkit-appearance: none; appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Une seule hauteur pour tous les champs d'une ligne. Chaque type en calculait
   la sienne : un champ date embarque son selecteur et gagnait deux pixels, un
   menu deroulant en perdait deux. Trois hauteurs voisines dans une meme rangee,
   donc des encadres qui ne s'alignaient pas. On impose la meme mesure a tous :
   une ligne de texte, les deux marges internes, les deux filets. Elle est
   calculee et non figee — si le rembourrage change, elle suit. Un navigateur
   qui ignore l'unite lh ecarte la declaration et retrouve l'ancien calcul. */
.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form input[type="date"], .form input[type="number"], .form select {
  height: calc(1lh + 2 * var(--pad-y) + 2px);
}

.form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%),
                    linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: rgba(20,16,14,.32); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--brown);
  box-shadow: 0 0 0 3px rgba(126, 41, 17, 0.11);
}
.form textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }

.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }

/* grid-auto-rows: 1fr donne a toutes les rangees la hauteur de la plus haute.
   Sans cela, une rangee contenant un libelle sur deux lignes mesurait 92 px
   et la suivante 71 : les encadres ne s'alignaient plus d'une rangee a
   l'autre. */
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); grid-auto-rows: 1fr; gap: 0.55rem; }
.opt {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.85rem 1rem; cursor: pointer;
  background: var(--white); border: 1px solid var(--line-field);
  font-size: 0.94rem; line-height: 1.4;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.opt:hover { border-color: rgba(20,16,14,.34); }
.opt input { flex: none; margin-top: 0.28rem; accent-color: var(--brown); width: auto; }
.opt:has(input:checked) { border-color: var(--brown); background: rgba(126, 41, 17, 0.045); }
.opt--wide { grid-column: 1 / -1; }

.err { font-size: 0.78rem; color: #9a2b17; letter-spacing: 0.02em; min-height: 1.1rem; }
.form [aria-invalid="true"] { border-color: #9a2b17; }

.note { font-size: 0.86rem; color: var(--ink-mute); }

.done {
  display: none;
  border: 1px solid var(--brown);
  background: rgba(126, 41, 17, 0.05);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.done[data-on="true"] { display: block; }
.done .h3 { margin-bottom: 0.7rem; }
.form[data-sent="true"] { display: none; }

.sending { opacity: 0.55; pointer-events: none; }

/* ----------------------------------------------------------------- Pied */

.ftr { background: var(--dark); color: var(--paper); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem; }
.ftr__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.ftr__mark { width: 52px; height: auto; filter: brightness(0) invert(1); opacity: 0.85; margin-bottom: 1.5rem; }
.ftr__grid p { color: rgba(241, 239, 239, 0.62); font-size: 0.94rem; max-width: 34ch; }
.ftr__col h3 {
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(241, 239, 239, 0.5); margin-bottom: 1.3rem;
}
.ftr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.ftr__col a { text-decoration: none; font-size: 0.95rem; color: rgba(241, 239, 239, 0.86); }
.ftr__col a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }

.ftr__bot {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(241, 239, 239, 0.62);
}

/* ------------------------------------------------------------ Apparition */

.rev { opacity: 0; transform: translateY(26px); transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1); }
.rev[data-in="true"] { opacity: 1; transform: none; }
.rev--d1 { transition-delay: 0.1s; }
.rev--d2 { transition-delay: 0.2s; }
.rev--d3 { transition-delay: 0.3s; }

.in { opacity: 0; transform: translateY(18px); animation: in 1s cubic-bezier(0.22,1,0.36,1) forwards; }
.in--2 { animation-delay: 0.16s; }
.in--3 { animation-delay: 0.32s; }
.in--4 { animation-delay: 0.48s; }
.in--5 { animation-delay: 0.64s; }
@keyframes in { to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- Adaptatif */

@media (max-width: 1080px) {
  .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { grid-template-columns: 4rem minmax(0, 1fr); }
  .step p { grid-column: 2; }
}

@media (max-width: 900px) {
  .split, .split--wide, .split--narrow, .brief { grid-template-columns: minmax(0, 1fr); }
  .split--miroir > figure { order: 0; }
  .aside { position: static; }
  .gal > *, .gal > .g-6, .gal > .g-8 { grid-column: span 6; }
  .gal .off { margin-top: 0; }
}

/* Le logotype complet en tête prend 148 px : au-dessous de 1024 px la barre
   horizontale ne tient plus, on passe au menu déplié. Le reste de la mise en
   page bascule plus tard, à 760 px. */
@media (max-width: 1024px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); color: var(--ink);
    padding: 0.5rem var(--gutter) 2rem;
    border-bottom: 1px solid var(--line-soft);
    transform: translateY(-130%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  }
  .nav[data-open="true"] { transform: none; }
  .nav__a { padding-block: 1.05rem; border-bottom: 1px solid var(--line-soft); font-size: 0.82rem; }
  .nav__grp { display: block; }
  .nav__b { width: 100%; justify-content: space-between; padding-block: 1.05rem;
    border-bottom: 1px solid var(--line-soft); font-size: 0.82rem; opacity: 0.62; }
  .nav__b::before { display: none; }
  .nav__sub {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; padding: 0; border: 0; box-shadow: none; background: none;
  }
  /* Les regles d'ouverture du bureau (survol, focus, aria-expanded) sont plus
     specifiques que .nav__sub et remettaient translate(-50%) : le sous-menu
     filait a gauche des qu'on tapait sur « Les chefs ». */
  .nav__grp:hover .nav__sub, .nav__grp:focus-within .nav__sub,
  .nav__b[aria-expanded="true"] + .nav__sub { transform: none; }
  .nav__sub a { padding: 0.9rem 0 0.9rem 1rem; border-bottom: 1px solid var(--line-soft); font-size: 1.08rem; }
  .nav__a::after { display: none; }
  .nav .btn { margin-top: 1.4rem; justify-content: center; }
  .lang { margin-top: 1.2rem; justify-content: center; }
}

@media (max-width: 760px) {
  :root { --header-h: 68px; }

  /* Formats signature : sur telephone, les cartes defilent en carrousel au
     doigt, et s'arretent d'elles-memes sur chacune (scroll-snap). La
     suivante depasse un peu a droite pour dire qu'il y en a d'autres. */
  .grid--carrousel {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter); scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .grid--carrousel::-webkit-scrollbar { display: none; }
  .grid--carrousel > .card { flex: 0 0 82%; scroll-snap-align: start; }
  /* Nos realisations : les galeries prennent le meme carrousel. */
  .gal {
    display: flex; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter); scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .gal::-webkit-scrollbar { display: none; }
  .gal > *, .gal > .g-6, .gal > .g-8 { flex: 0 0 74%; scroll-snap-align: start; }

  .hero--brand { min-height: min(78svh, 620px); }
  .hero--brand .hero__bg img { object-position: center 28%; }
  .hero__logo img { width: 80%; }
  /* Les boutons SVG tombaient a 22 px de haut : trop petits au doigt. */
  .btn-svg { padding: 0.8rem 1.5rem; }
  .btn-svg img { height: 32px; }
  .hero--brand .hero__places { font-size: 0.56rem; letter-spacing: 0.18em; }
  .hero--brand .hero__scr { font-size: 1.3rem; }
  .pick__row { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  .pick__arw { justify-self: start; }
  .row2, .row3 { grid-template-columns: minmax(0, 1fr); }
  .gal > *, .gal > .g-6, .gal > .g-8 { grid-column: span 12; }
  .ftr__grid { grid-template-columns: minmax(0, 1fr); }
  .ftr__col ul { gap: 0.15rem; }
  .ftr__col a { display: inline-block; padding-block: 0.55rem; }
  .contacts li { padding-block: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rev, .in { opacity: 1; transform: none; }
}

/* ================================================== Les trois parcours (accueil) */

.routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.route {
  display: flex; flex-direction: column;
  text-decoration: none;
  background: var(--paper-up);
  border: 1px solid var(--line-soft);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.route:hover { background: var(--white); border-color: var(--line); transform: translateY(-4px); }
.route__ph { aspect-ratio: 4 / 3; overflow: hidden; background: rgba(20,16,14,.05); }
.route__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.22,1,0.36,1); }
.route:hover .route__ph img { transform: scale(1.05); }
.route__body { padding: clamp(1.5rem, 2.4vw, 2.25rem); display: flex; flex-direction: column; flex: 1; }
.route__body h3 {
  font-family: var(--display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.09em;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.16;
  transition: color 0.25s ease;
}
.route:hover .route__body h3 { color: var(--brown); }
.route__body > p { margin: 0.9rem 0 0; color: var(--ink-soft); font-size: 0.98rem; }
.route__list {
  list-style: none; margin: 1.5rem 0 1.75rem; padding: 0;
  font-size: 0.9rem; color: var(--ink-soft);
}
.route__list li { display: flex; gap: 0.6rem; padding-block: 0.4rem; border-top: 1px solid var(--line-soft); }
.route__list li::before { content: "—"; color: var(--brown); flex: none; }
.route__go {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brown);
}
.route__go .arw { transition: transform 0.25s ease; }
.route:hover .route__go .arw { transform: translateX(6px); }

/* ============================================== « Comment ça se passe » (parcours) */

.flow { counter-reset: fl; display: grid; gap: 0; margin-top: clamp(2.5rem, 5vw, 4rem); }
.flow__step {
  counter-increment: fl;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.4rem, 2.4vw, 2rem);
  border-top: 1px solid var(--line-soft);
}
.flow__step:last-child { border-bottom: 1px solid var(--line-soft); }
.on-dark .flow__step { border-top-color: var(--line-dark); }
.on-dark .flow__step:last-child { border-bottom-color: var(--line-dark); }
.flow__step::before {
  content: counter(fl);
  font-family: var(--display); font-size: 2.2rem; font-weight: 300;
  color: var(--brown); line-height: 0.9;
}
.on-dark .flow__step::before { color: #c9a882; }
.flow__step h3 {
  font-family: var(--display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
  margin-bottom: 0.5rem;
}
.flow__step p { color: var(--ink-soft); font-size: 0.98rem; max-width: 62ch; }
.on-dark .flow__step p { color: rgba(241, 239, 239, 0.7); }

/* Variante repliee : le numero et le titre tiennent sur une ligne, le texte se
   deplie au survol. Le depliant anime grid-template-rows de 0fr a 1fr — c'est
   la seule facon d'animer vers une hauteur inconnue sans mesurer en JS. */
.flow--replie .flow__step {
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 1.5rem);
  align-items: baseline;
  padding-block: clamp(1.1rem, 1.8vw, 1.5rem);
}
.flow--replie .flow__step::before { font-size: 1.45rem; line-height: 1; }
.flow--replie .flow__step p { font-size: var(--texte-revele); }
.flow--replie .flow__step h3 {
  margin-bottom: 0;
  transition: color 0.35s ease, margin-bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.flow--replie .flow__step:focus-visible { outline: 2px solid var(--brown); outline-offset: 4px; }

/* Le repli n'existe que la ou le survol existe : sur un ecran tactile il n'y a
   pas de survol, et le texte doit rester lisible d'emblee. */
@media (hover: hover) and (pointer: fine) {
  .flow--replie .flow__step { cursor: default; }
  .flow--replie .flow__dev {
    display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  }
  .flow--replie .flow__dev > p { overflow: hidden; min-height: 0; margin: 0; }
  .flow--replie .flow__step:hover .flow__dev,
  .flow--replie .flow__step:focus-within .flow__dev { grid-template-rows: 1fr; opacity: 1; }
  .flow--replie .flow__step:hover h3,
  .flow--replie .flow__step:focus-within h3 { color: var(--brown); margin-bottom: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .flow--replie .flow__dev { transition: none; }
}
/* Sur fond sombre, le brun de marque tombe a 1,5:1 : le titre survole et le
   contour de focus passent a l'ambre deja employe pour les intitules sombres. */
.on-dark .flow--replie .flow__step:focus-visible { outline-color: #c9a882; }
@media (hover: hover) and (pointer: fine) {
  .on-dark .flow--replie .flow__step:hover h3,
  .on-dark .flow--replie .flow__step:focus-within h3 { color: #c9a882; }
}

/* ============================================ Liste « ce qui est compris » */

.included { list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; }
.included li {
  border-top: 1px solid var(--line-soft);
  padding: 0.95rem 0 0.95rem 1.9rem;
  position: relative;
  color: var(--ink-soft); font-size: 0.98rem;
}
.included li:last-child { border-bottom: 1px solid var(--line-soft); }
.included li::before {
  content: "";
  position: absolute; left: 0; top: 1.5rem;
  width: 11px; height: 1px; background: var(--brown);
}
.on-dark .included li { border-top-color: var(--line-dark); color: rgba(241,239,239,.72); }

/* ================================================ Paves : « ce qui est compris »
   Le meme encadre que les onglets de la page d'accueil, et le meme depli que
   les etapes : titre seul au repos, phrase au survol. La derniere rangee se
   centre d'elle-meme — sept paves donnent 4 + 3. */
.paves {
  --g: clamp(0.7rem, 1.4vw, 1.1rem);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--g);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; list-style: none;
}
.pave {
  flex: 0 1 calc((100% - 3 * var(--g)) / 4);
  min-width: 12rem;
  border: 1px solid rgba(126, 41, 17, 0.32);
  padding: clamp(1rem, 1.8vw, 1.35rem) clamp(0.9rem, 1.5vw, 1.2rem);
  text-align: center;
  transition: border-color 0.3s ease;
}
.pave__t {
  margin: 0;
  font-family: var(--body); font-weight: 500;
  font-size: 0.72rem; line-height: 1.5;
  letter-spacing: 0.2em; text-indent: 0.2em;
  text-transform: uppercase; color: var(--ink);
  /* Deux lignes reservees : « Selection de l'art de la table » se casse en
     deux et sa rangee mesurait 100 px quand la suivante en faisait 82.
     3em vaut exactement 2 x 1,5 (l'interligne), et suit le corps. */
  min-height: 3em;
  transition: color 0.35s ease, margin-bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Les textes qui se revelent (paves, etapes repliees, colonnes depliables)
   partagent une meme taille, un cran au-dessus du texte courant : ils
   n'apparaissent qu'au survol et doivent se lire d'un coup. */
:root { --texte-revele: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }
.pave__d > p { color: var(--ink-soft); font-size: var(--texte-revele); line-height: 1.6; margin: 0; }

/* Le depli n'existe que la ou le survol existe : sur un ecran tactile les
   phrases restent visibles, sinon elles seraient hors d'atteinte. */
@media (hover: hover) and (pointer: fine) {
  .pave__d {
    display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  }
  .pave__d > p { overflow: hidden; min-height: 0; }
  .pave:hover, .pave:focus-within { border-color: var(--brown); }
  .pave:hover .pave__d, .pave:focus-within .pave__d { grid-template-rows: 1fr; opacity: 1; }
  .pave:hover .pave__t, .pave:focus-within .pave__t { color: var(--brown); margin-bottom: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) { .pave__d { transition: none; } }

/* Colonnes depliables (« Ce que couvre l'organisation complete ») : la
   presentation en colonnes reste, le titre seul est visible, le texte se
   deplie au survol ou au clavier. Meme mecanique que les etapes et les paves,
   et comme eux, rien n'est replie la ou le survol n'existe pas. */
@media (hover: hover) and (pointer: fine) {
  .grid--replie > article > .depli {
    display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  }
  .grid--replie > article > .depli > p { overflow: hidden; min-height: 0; }
  .grid--replie > article:hover > .depli,
  .grid--replie > article:focus-within > .depli { grid-template-rows: 1fr; opacity: 1; }
  .grid--replie > article h3 { transition: color 0.35s ease; }
  .grid--replie > article:hover h3,
  .grid--replie > article:focus-within h3 { color: var(--brown); }
}
@media (prefers-reduced-motion: reduce) { .grid--replie .depli { transition: none; } }

/* Sur ecran tactile, pas de survol : les etapes, les paves et les colonnes
   sont replies au repos et se decouvrent au tap (main.js pose data-ouvert),
   pour ne pas allonger la page. Un « + » apres le titre dit qu'il y a
   quelque chose a ouvrir ; il devient « − » une fois ouvert. */
@media (hover: none) {
  .flow--replie .flow__dev, .pave__d, .grid--replie > article > .depli {
    display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  }
  .flow--replie .flow__dev > p, .pave__d > p, .grid--replie > article > .depli > p {
    overflow: hidden; min-height: 0; margin: 0;
  }
  .flow--replie .flow__step, .pave, .grid--replie > article { cursor: pointer; }
  .flow__step[data-ouvert="true"] .flow__dev, .pave[data-ouvert="true"] .pave__d,
  .grid--replie > article[data-ouvert="true"] > .depli { grid-template-rows: 1fr; opacity: 1; }
  .flow__step[data-ouvert="true"] h3, .pave[data-ouvert="true"] .pave__t,
  .grid--replie > article[data-ouvert="true"] h3 { color: var(--brown); }
  .flow__step[data-ouvert="true"] h3, .pave[data-ouvert="true"] .pave__t { margin-bottom: 0.7rem; }
  .flow--replie .flow__step h3::after, .pave__t::after, .grid--replie > article h3::after {
    content: " +"; color: var(--brown); font-weight: 400;
  }
  .flow__step[data-ouvert="true"] h3::after, .pave[data-ouvert="true"] .pave__t::after,
  .grid--replie > article[data-ouvert="true"] h3::after { content: " \2212"; }
}
.grid--replie > article h3, .grid--replie > article .depli > p { text-align: center; }
.grid--replie > article .depli > p { font-size: var(--texte-revele); }
@media (max-width: 1100px) { .pave { flex-basis: calc((100% - 2 * var(--g)) / 3); } }
@media (max-width: 900px)  { .pave { flex-basis: calc((100% - var(--g)) / 2); } }
@media (max-width: 620px)  { .pave { flex-basis: 100%; min-width: 0; } }
.on-dark .included li:last-child { border-bottom-color: var(--line-dark); }
.on-dark .included li::before { background: #c9a882; }

/* ================================================ Encadré « cas typique » */

/* ================================================ La fiche en bas de parcours */

.brief-block { background: var(--paper-up); border-top: 1px solid var(--line-soft); }
.brief-head { max-width: 58ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
/* Le formulaire se centre sous son titre, lui-meme centre : sans cela, le
   bloc de 920 px restait cale a gauche de la colonne. */
.brief-block .wrap > .brief-head + .rev--d1 { margin-inline: auto; }

/* Renvoi discret vers la page des chefs partenaires */
.aside-note {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.94rem; color: var(--ink-mute);
}

@media (max-width: 900px) {
  .routes { grid-template-columns: minmax(0, 1fr); }
  .route__ph { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .flow__step { grid-template-columns: 3rem minmax(0, 1fr); }
  .flow__step::before { font-size: 1.7rem; }
  .flow--replie .flow__step { grid-template-columns: 2rem minmax(0, 1fr); }
  .flow--replie .flow__step::before { font-size: 1.3rem; }
}

/* Étiquette centrée : sans le trait de fuite */
.lbl--center { justify-content: center; }
.lbl--center::after { display: none; }

/* En-tête de section centré */
.head--mid { max-width: 62ch; margin-inline: auto; text-align: center; }
.head--mid .lede { margin-inline: auto; }
.head--mid .h2 { margin-inline: auto; font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.5rem); }
/* Les titres bruns gardent la meme taille, centres ou non. Sans cette regle,
   « Notre concept », centre, serait plus petit que « Notre histoire », qui est
   en colonne — alors qu'ils ouvrent deux sections de meme rang.
   Declaree ici, apres .head--mid .h2, pour l'emporter a specificite egale. */
.head .h2--terre,
/* .h2--sect porte la taille sans la couleur : sur fond sombre le titre
   reste blanc, mais il garde le rang de ses voisins. */
.head .h2--sect { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3rem); }
/* Texte justifie. La cesure automatique est indispensable ici : sans elle, une
   colonne etroite en Cormorant produit des blancs irreguliers entre les mots.
   Elle s'appuie sur l'attribut lang de la page. */
.txt-justifie p { text-align: justify; hyphens: auto; }
/* Intitule en encre plutot qu'en brun : sous un titre deja brun, le meme ton
   deux fois de suite affaiblit le titre au lieu de l'appuyer. */
.lbl--encre { color: var(--ink); }
/* Intitule de galerie promu en titre : plus gros que l'intitule courant, mais
   un cran sous les titres de section, pour ne pas concurrencer « Nos
   realisations » dont il depend. */
.h3--terre { color: var(--brown); }
/* Phrase en capitales : l'interlettrage evite que les majuscules se collent. */
.lede--caps { text-transform: uppercase; letter-spacing: 0.09em; }

/* Titre en colonne étroite : la taille pleine produit six lignes */
.split .head .h2 { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3rem); }

/* Héros intérieurs : léger halo pour tenir la lisibilité quelle que soit la photo */
.hero--inner .hero__places,
.hero--inner .hero__ttl,
.hero--inner .hero__scr,
.hero--inner .hero__lede { text-shadow: 0 1px 20px rgba(8, 6, 5, 0.5); }
.hero--inner .hero__places { color: rgba(241, 239, 239, 0.96); }


/* Le piege a robots. Il etait en display:none : un robot un peu serieux lit le
   style calcule et saute les champs caches. Hors ecran il reste invisible a
   l'oeil, ignore des lecteurs d'ecran (aria-hidden) et hors du parcours clavier
   (tabindex="-1"), mais il existe pour le robot, qui le remplit et se trahit. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ------------------------------------------------------ Mentions legales */
/* Une colonne de lecture centree sous le titre. Les informations encore a
   fournir sont surlignees (.a-completer) : aucune ne doit rester en ligne. */
.legal { max-width: 62ch; margin-inline: auto; }
.legal h2 { margin: clamp(2.2rem, 4vw, 3rem) 0 0.8rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--ink-soft); }
.legal p + p { margin-top: 0.5rem; }
.legal strong { color: var(--ink); font-weight: 500; }
.legal .legal__maj { margin-top: clamp(2.2rem, 4vw, 3rem); font-size: 0.9rem; color: var(--ink-mute); }
.a-completer { background: #fff1a8; color: var(--ink); padding: 0 0.25em; }
.ftr__bot a { color: inherit; text-decoration: none; }
.ftr__bot a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }