/*
Theme Name: Eodesign V4
Theme URI: https://eodesign.fr
Author: Emelyne Oster / Eodesign
Description: Thème sur-mesure Eodesign, maquette V4. Palette lin, khaki, Wild Ginger et olive. Bodoni Moda, Jost, Babylonica. Coins bruts, fonds clairs, sans page-builder.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: eodesign
*/

/* ==========================================================================
   Eodesign, maquette V4 (palette khaki, Wild Ginger et olive)
   Feuille de style partagée (accueil, page service, contact, charte)

   Palette : Neutres : Lin #F4F1EA (fond, repris de la V3), Demitasse (titres)
             Khaki   : accent principal (tout ce qui se clique) et pied de page,
                       survol = khaki foncé de 25 %
             Wild Ginger (signature, libellés), Olive (décor)
   Fonds   : lin ou ivoire pour les sections, khaki pour le seul pied de page
   Logo    : picto + logotype en SVG (assets/img/eodesign-logo.svg), couleur = currentColor
   Typos   : Bodoni Moda (titres en 510, soit le 600 allégé de 15 %)
             Jost (texte et interface)
             Babylonica (signature au stylo, trait fin, usage rare, sans italique ni rotation)
   Formes  : coins bruts partout (photos, boutons, puces, champs) : radius 0
             La seule courbe vient des photos elles-mêmes (arches, luminaires)
   Z-index : header 50 / menu mobile 60 / lien d'évitement 70
   ========================================================================== */

:root {
  /* Palette Pantone */
  --creme: #F4F1EA;        /* Lin (beige neutre repris de la V3) : fond principal */
  --demitasse: #40332B;    /* Demitasse 19-0712 TCX : titres, 10,8:1 sur lin */
  --gingembre: #7C4C53;    /* Wild Ginger 18-1420 TCX : signature, libellés, lettrine, 6,2:1 sur lin */
  --khaki: #4F4A32;        /* khaki : accent principal (boutons, liens) et pied de page, 7,9:1 sur lin */
  --olive: #858E55;        /* Olive : décor uniquement (repères, filets), jamais pour du texte */

  /* Déclinaisons */
  --ivoire: #FBF9F4;       /* fond alterné : beige très clair, quasi blanc */
  --sable: #D0CBC4;        /* filets, bordures (décoratif, jamais pour du texte) */
  --texte: #4B3E36;        /* texte courant, 9,1:1 sur lin */
  --texte-doux: #685D55;   /* texte secondaire, 5,7:1 sur lin */
  --khaki-fonce: #3B3826;  /* survol : khaki foncé de 25 % */
  --gingembre-pale: #E6DDD8; /* texte sur aplat wild ginger, 5,2:1 */
  --khaki-pale: #DDDAD0;   /* texte sur aplat khaki, 6,4:1 */
  --trait: #A39C94;        /* contour des champs de formulaire */
  --placeholder: #766C64;  /* texte indicatif des champs, 4,5:1 sur lin */
  --alerte: #A0361C;       /* erreurs de formulaire uniquement */

  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-text: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --f-sign: "Babylonica", "Snell Roundhand", cursive;
  --w-title: 510;          /* graisse des titres : 600 - 15 % */

  --maxw: 1360px;
  --gutter: clamp(16px, 4vw, 56px);
  --header-h: 76px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --section-y: clamp(64px, 6.8vw, 104px); /* rythme resserré : la page respire sans s'étirer */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--w-title);
  font-optical-sizing: auto;
  color: var(--demitasse);
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-wrap: balance;
}

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

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 70;
  background: var(--demitasse); color: var(--creme); padding: 10px 18px; border-radius: 0;
  text-decoration: none; font-weight: 500;
}
.skip:focus { top: 12px; }

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

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.bg-ivoire { background: var(--ivoire); }

/* ---------- Typographie ---------- */
.h-xl { font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.1; letter-spacing: -0.02em; padding-bottom: .06em; }
.h-l  { font-size: clamp(2.05rem, 3.4vw, 3.3rem); line-height: 1.1; letter-spacing: -0.015em; padding-bottom: .05em; }
.h-m  { font-size: clamp(1.4rem, 1.9vw, 1.8rem); line-height: 1.2; }
.lead { font-size: clamp(1.125rem, 1.3vw, 1.28rem); line-height: 1.6; color: var(--texte); }
.prose { max-width: 65ch; }
.muted { color: var(--texte-doux); }

.eyebrow {
  display: block;
  margin-bottom: 1.4rem;
  font-family: var(--f-text);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gingembre);
}

.signature {
  font-family: var(--f-sign);
  font-weight: 400;
  font-size: clamp(3rem, 4.4vw, 4.2rem);
  line-height: 1;
  color: var(--gingembre);
  letter-spacing: 0;
  font-style: normal;
  font-synthesis: none;
}

.dropcap::first-letter {
  float: left;
  font-family: var(--f-display);
  font-weight: var(--w-title);
  font-size: 4.6em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--gingembre);
}

/* ---------- Boutons et liens ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  min-height: 52px; padding: 0 1.65rem;
  border: 1px solid transparent; border-radius: 0;
  font-family: var(--f-text); font-size: .95rem; font-weight: 500; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn i { font-size: 1.1em; transition: transform .35s var(--ease); }
.btn:hover i { transform: translateX(3px); }
.btn--primary { background: var(--khaki); color: var(--creme); }
.btn--primary:hover { background: var(--khaki-fonce); }
/* Bouton compact du header : 85 % du bouton standard */
.btn--sm { min-height: 44px; padding: 0 1.4rem; font-size: .81rem; }
.btn--ghost { border-color: var(--demitasse); color: var(--demitasse); background: transparent; }
.btn--ghost:hover { background: var(--demitasse); color: var(--creme); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55em;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  color: var(--demitasse); font-weight: 500; text-decoration: none;
  transition: color .3s var(--ease);
}
.link-arrow i { transition: transform .35s var(--ease); }
.link-arrow:hover { color: var(--khaki); }
.link-arrow:hover i { transform: translateX(4px); }

.text-link { color: var(--khaki); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.text-link:hover { text-decoration-thickness: 2px; }

/* ---------- Formes ---------- */
.frame { overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(244, 241, 234, .9);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--sable); }
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--creme); } }

/* Header en trois colonnes : menu gauche / logo centré / menu droit + bouton */
.header__inner { height: 100%; }
.header__logo { justify-self: center; }
/* Logotype typographique : nom en Bodoni Moda, ligne de base en Jost espacé.
   Tailles en em : la ligne de base garde toujours la largeur exacte du nom. */
/* Logo : picto à gauche, logotype horizontal à droite. Les deux SVG prennent la couleur du texte. */
.brand { display: inline-flex; align-items: center; gap: .3em; margin: 0; font-size: 46px; color: var(--demitasse); text-decoration: none; line-height: 0; }
.brand svg { display: block; fill: currentColor; overflow: visible; }
.brand__picto { height: 1em; aspect-ratio: 318 / 606; flex: none; }
.brand__mot { display: block; overflow: hidden; max-width: 2.75em; }
.brand__logotype { height: .74em; aspect-ratio: 1393 / 381; }
.brand--s { font-size: 40px; }
.brand--l { font-size: 60px; }
.brand--xl { font-size: clamp(80px, 11vw, 140px); }

/* Header sticky : après 80 px de défilement, le logotype glisse derrière le picto
   et disparaît ; le picto reste seul, recentré. */
.header__logo .brand__mot, .header__logo .brand__logotype { transition: max-width .6s var(--ease), opacity .35s var(--ease), transform .6s var(--ease); }
.header__logo { transition: gap .6s var(--ease); }
.site-header.is-scrolled .header__logo { gap: 0; }
.site-header.is-scrolled .header__logo .brand__mot { max-width: 0; opacity: 0; }
.site-header.is-scrolled .header__logo .brand__logotype { transform: translateX(-40%); }
@media (prefers-reduced-motion: reduce) {
  .header__logo, .header__logo .brand__mot, .header__logo .brand__logotype { transition: none; }
}
.logo-tile, .rules > .logo-tile { display: grid; place-items: center; min-height: 260px; background: var(--creme); border: 1px solid var(--sable); }
.logo-tile--khaki, .rules > .logo-tile--khaki { background: var(--khaki); border-color: var(--khaki); }
.logo-tile--khaki .brand { color: var(--creme); }

.nav { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 32px; }
.nav__list--left { justify-self: start; }
.nav__right { justify-self: end; display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.nav__list { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav__link, .nav__trigger {
  position: relative;
  display: inline-flex; align-items: center; gap: .35em;
  padding: 8px 0; background: none; border: 0; cursor: pointer;
  font-size: .95rem; font-weight: 400; letter-spacing: .01em; color: var(--demitasse); text-decoration: none;
}
.nav__link::after, .nav__trigger::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--khaki); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav__link:hover::after, .nav__trigger:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__trigger i { font-size: .8em; transition: transform .3s var(--ease); }
.nav__trigger[aria-expanded="true"] i { transform: rotate(180deg); }

.nav__item--sub { position: relative; }
.nav__sub {
  position: absolute; top: calc(100% + 18px); left: -28px;
  width: 340px; padding: 14px;
  background: var(--creme); border: 1px solid var(--sable);
  box-shadow: 0 24px 60px -24px rgba(64, 51, 43, .24);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.nav__item--sub:hover .nav__sub,
.nav__sub.is-open { opacity: 1; visibility: visible; transform: none; }
.nav__sub a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; text-decoration: none; color: var(--demitasse); font-size: .95rem;
  transition: background-color .25s, color .25s;
}
.nav__sub a:hover { background: var(--ivoire); color: var(--khaki); }
.nav__sub a i { opacity: 0; transition: opacity .25s, transform .3s var(--ease); }
.nav__sub a:hover i { opacity: 1; transform: translateX(3px); }

.nav__burger { display: none; }

@media (max-width: 1079px) {
  .nav__list, .nav__right > .btn { display: none; }
  .nav { grid-template-columns: auto minmax(0, 1fr); }
  .header__logo { justify-self: start; }
  .nav__burger {
    display: inline-flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 18px; border: 1px solid var(--demitasse); border-radius: 0;
    background: transparent; cursor: pointer; font-size: .9rem; font-weight: 500;
  }
}

/* Menu mobile */
.mobile-nav {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  padding: 20px var(--gutter) 32px;
  background: var(--creme);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
.mobile-nav__top { display: flex; justify-content: space-between; align-items: center; height: 36px; margin-bottom: 40px; }
.mobile-nav__close { height: 44px; width: 44px; border-radius: 0; border: 1px solid var(--demitasse); background: none; font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; }
.mobile-nav__list a { display: block; padding: 10px 0; font-family: var(--f-display); font-weight: var(--w-title); font-size: 1.9rem; color: var(--demitasse); text-decoration: none; }
.mobile-nav__sub { padding: 0 0 12px 2px; }
.mobile-nav__sub a { font-family: var(--f-text); font-weight: 400; font-size: 1rem; padding: 6px 0; color: var(--texte-doux); }
.mobile-nav .btn { margin-top: 28px; align-self: flex-start; }
.mobile-nav__contact { margin-top: auto; padding-top: 32px; font-size: .95rem; color: var(--texte-doux); }
.mobile-nav__contact a { color: var(--demitasse); }

/* ---------- Fil d'Ariane ---------- */
.breadcrumb { padding-top: 28px; font-size: .85rem; color: var(--texte-doux); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 10px; }
.breadcrumb li + li::before { content: "/"; color: var(--sable); }
.breadcrumb a { color: var(--texte-doux); text-decoration: none; }
.breadcrumb a:hover { color: var(--khaki); }
.breadcrumb [aria-current] { color: var(--demitasse); }

/* ==========================================================================
   ACCUEIL
   ========================================================================== */

/* Hero : split asymétrique, texte + photo de réalisation */
.hero { padding-block: clamp(24px, 3vw, 40px) clamp(56px, 6vw, 88px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
}
.hero__text { display: flex; flex-direction: column; justify-content: center; padding-bottom: clamp(0px, 10vh, 120px); }
/* « Décoratrice d'intérieur » mesure ~10,4em en Bodoni Moda : taille calée pour tenir sur 2 lignes */
.hero__text .h-xl { font-size: clamp(2.4rem, 3.85vw, 3.6rem); }
.hero__text .lead { margin-top: 1.6rem; max-width: 36ch; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 2.4rem; }
.hero__media { position: relative; }
.hero__main { height: clamp(520px, calc(100dvh - var(--header-h) - 64px), 860px); overflow: hidden; }
.hero__main img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 899px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__text { padding: 8px 0 0; }
  .hero__main { height: auto; aspect-ratio: 4 / 5; }
}

/* La décoratrice */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: center;
}
.about__photo { position: relative; }
.about__media .frame { aspect-ratio: 4 / 5.4; }
.about__media img { object-position: 50% 30%; }
.about__detail {
  position: absolute; right: clamp(-56px, -4vw, -24px); bottom: -48px;
  width: 38%; aspect-ratio: 1; overflow: hidden;
  border: 6px solid var(--ivoire);
}
.about__detail img { width: 100%; height: 100%; object-fit: cover; }
/* Signature sous la photo, à gauche (le détail déborde à droite) */
.about__signature { margin: 28px 0 0; }
.about__text h2 { margin-bottom: 1.8rem; }
.about__quote {
  margin: 2.4rem 0;
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.4; color: var(--demitasse);
}
.values { display: grid; gap: 18px; margin: 0 0 2.4rem; }
.values div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: baseline; }
.values dt { font-family: var(--f-display); font-weight: var(--w-title); font-size: 1.25rem; color: var(--demitasse); }
.values dd { margin: 0; font-size: .98rem; color: var(--texte-doux); line-height: 1.6; }

@media (max-width: 899px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 440px; }
  .about__detail { right: -8px; bottom: -32px; }
  .values div { grid-template-columns: 1fr; gap: 2px; }
}

/* Réalisations : grille éditoriale asymétrique */
.works__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.works__head h2 { margin-bottom: 1.2rem; }
.works__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 28px);
  row-gap: clamp(36px, 4vw, 56px);
}
.work { text-decoration: none; display: block; }
.work__img { overflow: hidden; background: var(--ivoire); }
.work__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.work:hover .work__img img { transform: scale(1.035); }
.work figcaption { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding-top: 14px; }
.work__title { font-family: var(--f-display); font-weight: var(--w-title); font-size: 1.25rem; color: var(--demitasse); transition: color .3s; }
.work:hover .work__title { color: var(--khaki); }
.work__meta { font-size: .88rem; color: var(--texte-doux); text-align: right; }
.work--a { grid-column: 1 / span 8; }
.work--b { grid-column: 9 / span 4; }
.work--c { grid-column: 1 / span 5; }
.work--d { grid-column: 6 / span 3; margin-top: clamp(0px, 6vw, 88px); }
.work--e { grid-column: 9 / span 4; }
.work--a .work__img, .work--b .work__img { height: clamp(380px, 42vw, 620px); }
.work--c .work__img, .work--d .work__img, .work--e .work__img { height: clamp(320px, 33vw, 480px); }
.works__more { margin-top: clamp(48px, 5vw, 72px); display: flex; justify-content: center; }

@media (max-width: 767px) {
  .works__grid { grid-template-columns: 1fr; }
  .work--a, .work--b, .work--c, .work--d, .work--e { grid-column: auto; margin-top: 0; }
  .work .work__img { height: auto !important; aspect-ratio: 4 / 5; }
  .work--a .work__img, .work--c .work__img { aspect-ratio: 4 / 3; }
}

/* Prestations : image collante qui change au survol */
.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.services__media { position: sticky; top: calc(var(--header-h) + 32px); }
.services__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sable); }
.services__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity .8s var(--ease), transform 1.6s var(--ease);
}
.services__frame img.is-active { opacity: 1; transform: none; }
.services__content > h2 { margin-bottom: 1.4rem; }
.services__content > .prose { margin-bottom: 2.6rem; }
.svc-list { border-bottom: 1px solid var(--sable); margin-bottom: 2.6rem; }
.svc a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding: 26px 0; border-top: 1px solid var(--sable);
  text-decoration: none; color: inherit;
}
.svc__thumb { display: none; }
.svc__title { font-size: clamp(1.35rem, 1.9vw, 1.75rem); transition: color .3s var(--ease), transform .5s var(--ease); }
.svc__desc { margin: .45rem 0 0; color: var(--texte-doux); font-size: .98rem; line-height: 1.6; max-width: 52ch; }
.svc__arrow {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 0;
  border: 1px solid var(--sable); color: var(--demitasse); font-size: 1.1rem;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.svc.is-active .svc__title, .svc a:hover .svc__title, .svc a:focus-visible .svc__title { color: var(--khaki); transform: translateX(6px); }
.svc__arrow i { transition: transform .35s var(--ease); }
.svc.is-active .svc__arrow, .svc a:hover .svc__arrow { background: var(--khaki); border-color: var(--khaki); color: var(--creme); }
.svc.is-active .svc__arrow i, .svc a:hover .svc__arrow i { transform: rotate(-45deg); }
.services__pro { margin-top: 2.4rem; padding: 24px 28px; background: var(--creme); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.services__pro p { margin: 0; max-width: 46ch; font-size: .98rem; }

@media (max-width: 899px) {
  .services__grid { grid-template-columns: 1fr; }
  .services__media { display: none; }
  .svc a { grid-template-columns: 76px 1fr; gap: 18px; }
  .svc__thumb { display: block; width: 76px; height: 92px; object-fit: cover; }
  .svc__arrow { display: none; }
  .svc.is-active .svc__title, .svc a:hover .svc__title { transform: none; }
}

/* Avant / 3D / Après */
.projection__head { max-width: 720px; margin-bottom: clamp(48px, 5vw, 80px); }
.projection__head h2 { margin-bottom: 1.3rem; }
/* Les colonnes valent le rapport de chaque image : les trois vues gardent
   la même hauteur quel que soit leur format, et aucune n'est recadrée. */
.triptych { display: grid; grid-template-columns: var(--cols); gap: clamp(16px, 2vw, 28px); align-items: start; counter-reset: none; }
.triptych img { width: 100%; aspect-ratio: var(--ar); object-fit: cover; }
@media (max-width: 760px) {
  .triptych { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px); }
}
.triptych figcaption { padding-top: 16px; font-size: .95rem; color: var(--texte-doux); line-height: 1.55; }
.triptych__label { display: block; margin-bottom: 2px; font-family: var(--f-display); font-weight: var(--w-title); font-size: 1.35rem; color: var(--demitasse); }
.projection__note { margin-top: clamp(40px, 4vw, 64px); max-width: 68ch; }

@media (max-width: 767px) {
  .triptych {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .triptych li { scroll-snap-align: start; }
  .triptych li:nth-child(2) { margin-top: 0; }
}

/* Bloc éditorial SEO */
.editorial__title { max-width: 900px; margin-bottom: clamp(32px, 3.6vw, 48px); }
.editorial__cols { columns: 2; column-gap: clamp(40px, 5vw, 80px); max-width: 1120px; }
.editorial__cols p { break-inside: avoid-column; }
.editorial__cols a { color: var(--khaki); text-underline-offset: 3px; }
.editorial__figure { break-inside: avoid; margin: .4em 0 1.6em; }
.editorial__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.editorial__figure figcaption { padding-top: 10px; font-size: .88rem; color: var(--texte-doux); }
.editorial h3 { font-size: 1.45rem; margin: .2em 0 .7em; break-after: avoid; }
.zones { margin-top: clamp(40px, 4.4vw, 64px); padding-top: 32px; border-top: 1px solid var(--sable); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 48px; align-items: start; }
.zones__list { display: flex; flex-wrap: wrap; gap: 10px; }
.zones__list a, .zones__list span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border: 1px solid var(--sable); border-radius: 0;
  font-size: .92rem; color: var(--demitasse); text-decoration: none;
  transition: border-color .3s, color .3s, background-color .3s;
}
.zones__list a:hover { border-color: var(--khaki); color: var(--khaki); }
.zones p { grid-column: 2; font-size: .95rem; color: var(--texte-doux); margin: 0; max-width: 70ch; }

@media (max-width: 899px) {
  .editorial__cols { columns: 1; }
  .zones { grid-template-columns: 1fr; }
  .zones p { grid-column: auto; }
}

/* FAQ */
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--header-h) + 40px); }
.faq__head h2 { margin-bottom: 1.4rem; }
.faq__item { border-top: 1px solid var(--sable); }
.faq__item:last-child { border-bottom: 1px solid var(--sable); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.3; transition: color .3s; }
.faq__item summary:hover h3 { color: var(--khaki); }
.faq__icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 0;
  border: 1px solid var(--sable); color: var(--khaki); transition: background-color .3s, color .3s;
}
.faq__icon i { transition: transform .4s var(--ease); }
.faq__item[open] .faq__icon { background: var(--khaki); color: var(--creme); border-color: var(--khaki); }
.faq__item[open] .faq__icon i { transform: rotate(45deg); }
.faq__answer { padding: 0 64px 28px 0; color: var(--texte); }
.faq__answer p { max-width: 70ch; }

@media (max-width: 899px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .faq__answer { padding-right: 0; }
}

/* Journal (idées déco) */
.journal__head { margin-bottom: clamp(40px, 5vw, 64px); }
.journal__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); }
.post a { display: block; text-decoration: none; color: inherit; }
.post__img { overflow: hidden; background: var(--ivoire); }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.post a:hover .post__img img { transform: scale(1.04); }
.post time { display: block; font-size: .85rem; color: var(--texte-doux); margin-bottom: .5rem; }
.post h3 { font-size: 1.35rem; line-height: 1.3; transition: color .3s; }
.post a:hover h3 { color: var(--khaki); }
.post--featured .post__img { aspect-ratio: 4 / 3; margin-bottom: 22px; }
.post--featured h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.journal__side { display: grid; gap: clamp(24px, 3vw, 40px); align-content: start; }
.journal__side .post a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px; align-items: center; }
.journal__side .post__img { aspect-ratio: 4 / 5; }
.journal__more { margin-top: clamp(40px, 4vw, 56px); }

@media (max-width: 899px) {
  .journal__grid { grid-template-columns: 1fr; }
}

/* ---------- Appel à l'action final (ivoire) + pied de page (khaki) ---------- */
.cta-final { padding-block: var(--section-y); background: var(--ivoire); }
.cta__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 7vw, 120px); align-items: end; }
.cta__grid .lead { margin-top: 1.6rem; max-width: 46ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; margin-top: 2.4rem; }
.cta__tel { color: var(--demitasse); text-decoration: none; font-size: 1.05rem; border-bottom: 1px solid var(--khaki); padding-bottom: 2px; display: inline-flex; gap: .5em; align-items: center; }
.cta__tel:hover { color: var(--khaki); }
.cta__media { position: relative; max-width: 360px; justify-self: end; width: 100%; }
.cta__media .frame { aspect-ratio: 3 / 4; }
.cta__media .signature { position: absolute; right: calc(100% + 14px); bottom: 24px; white-space: nowrap; font-size: clamp(3rem, 4.4vw, 4.4rem); }

@media (max-width: 899px) {
  .cta__grid { grid-template-columns: 1fr; }
  .cta__media { justify-self: end; max-width: 240px; }
}

.site-footer { padding-bottom: 32px; font-size: .95rem; background: var(--khaki); color: var(--khaki-pale); }
.site-footer .brand { color: var(--creme); }
.site-footer :focus-visible { outline-color: var(--creme); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.4fr));
  gap: 40px clamp(24px, 4vw, 64px);
  padding-top: clamp(56px, 6vw, 88px);
}
.footer__brand .brand { margin-bottom: 28px; }
.footer__brand p { max-width: 34ch; }
.footer__contact { display: grid; gap: 8px; margin-top: 18px; }
.footer__contact a { display: inline-flex; gap: .6em; align-items: center; color: var(--creme); text-decoration: none; transition: color .25s; }
.footer__contact a i { color: var(--khaki-pale); }
.footer__contact a:hover { color: var(--khaki-pale); }
.footer__title { font-family: var(--f-display); font-weight: var(--w-title); font-size: 1.15rem; color: var(--creme); margin-bottom: 14px; }
.footer__col li + li { margin-top: 6px; }
.footer__col a { text-decoration: none; color: var(--khaki-pale); transition: color .25s; }
.footer__col a:hover { color: var(--creme); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  margin-top: clamp(48px, 5vw, 72px); padding-top: 24px;
  border-top: 1px solid rgba(244, 241, 234, .2);
  font-size: .85rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
/* Un menu WordPress sort ses entrées en <li> : pas de puce dans ce flex. */
.footer__legal li { list-style: none; }
.footer__legal a { color: var(--khaki-pale); text-decoration: none; }
.footer__legal a:hover { color: var(--creme); }

@media (max-width: 899px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PAGE SERVICE
   ========================================================================== */
.svc-hero { padding-bottom: clamp(48px, 5vw, 72px); }
.svc-hero__head { padding-top: clamp(32px, 4vw, 56px); max-width: 980px; }
.svc-hero__head .lead { margin-top: 1.5rem; max-width: 52ch; }
.svc-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 2.2rem; }
.svc-hero__media { margin-top: clamp(40px, 5vw, 64px); height: clamp(320px, 52vw, 720px); overflow: hidden; }
.svc-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
/* Léger effet de profondeur au défilement (CSS scroll-driven, ignoré si non supporté) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .svc-hero__media img { height: 120%; animation: eo-parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .js .svc-hero__media[data-reveal="mask"] > img { transform: none; }
  }
}
@keyframes eo-parallax { from { translate: 0 -16%; } to { translate: 0 0; } }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 48px); padding-top: 32px; }
.facts dt { font-size: .85rem; color: var(--texte-doux); margin-bottom: 4px; }
.facts dd { margin: 0; font-family: var(--f-display); font-weight: var(--w-title); font-size: 1.25rem; color: var(--demitasse); line-height: 1.3; }

@media (max-width: 899px) { .facts { grid-template-columns: 1fr 1fr; } }

.intro__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.intro__grid .signature { display: block; margin-top: 1.2rem; font-size: clamp(2.6rem, 3.6vw, 3.6rem); }
@media (max-width: 899px) { .intro__grid { grid-template-columns: 1fr; } }

/* Déroulé : frise verticale */
.steps__head { max-width: 760px; margin-bottom: clamp(48px, 5vw, 80px); }
.steps__head h2 { margin-bottom: 1.2rem; }
.steps { position: relative; display: grid; gap: clamp(48px, 6vw, 88px); }
.steps::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 1px; background: var(--olive); opacity: .45; }
.step { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 80px); padding-left: 64px; align-items: start; }
.step::before {
  content: ""; position: absolute; left: 4px; top: .45em; width: 15px; height: 15px; border-radius: 0;
  background: var(--ivoire); border: 1px solid var(--olive); box-shadow: 0 0 0 6px var(--ivoire);
}
.step.is-in::before { background: var(--olive); transition: background-color .6s var(--ease) .2s; }
.step__phase { display: block; font-size: .88rem; color: var(--gingembre); margin-bottom: .4rem; }
.step h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.step__body p { max-width: 60ch; }
.step__media { grid-column: 2; margin-top: 8px; overflow: hidden; }
.step__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.step__media figcaption { padding-top: 10px; font-size: .88rem; color: var(--texte-doux); }

@media (max-width: 899px) {
  .step { grid-template-columns: 1fr; padding-left: 48px; }
  .step__media { grid-column: auto; }
}

/* Contenu du book déco : grille à rythme */
.book__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.book__head h2 { margin-bottom: 1.2rem; }
.book__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.book__cell { position: relative; padding: clamp(24px, 2.6vw, 36px); background: var(--ivoire); display: flex; flex-direction: column; gap: 12px; min-height: 230px; overflow: hidden; }
.book__cell i { font-size: 2rem; color: var(--khaki); }
.book__cell h3 { font-size: 1.4rem; }
.book__cell p { font-size: .97rem; color: var(--texte-doux); line-height: 1.6; margin: 0; max-width: 42ch; }
.book__cell--1 { grid-column: span 4; }
.book__cell--2 { grid-column: span 4; background: var(--khaki); }
.book__cell--2 i, .book__cell--2 h3 { color: var(--creme); }
.book__cell--2 p { color: var(--khaki-pale); }
.book__cell--3 { grid-column: span 4; }
.book__cell--4 { grid-column: span 7; padding: 0; min-height: 360px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.book__cell--4 .book__copy { padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 12px; justify-content: flex-end; }
.book__cell--4 img { width: 100%; height: 100%; object-fit: cover; }
.book__cell--5 { grid-column: span 5; background: var(--gingembre); }
.book__cell--5 i, .book__cell--5 h3 { color: var(--creme); }
.book__cell--5 p { color: var(--gingembre-pale); }
.book__cell--6 { grid-column: span 12; flex-direction: row; align-items: center; gap: clamp(20px, 3vw, 48px); min-height: 0; background: transparent; border: 1px solid var(--olive); }
.book__cell--6 h3 { flex: none; }
.book__cell--6 p { max-width: 70ch; }

@media (max-width: 899px) {
  .book__cell--1, .book__cell--2, .book__cell--3, .book__cell--5 { grid-column: span 6; }
  .book__cell--4 { grid-column: span 12; }
  .book__cell--6 { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 599px) {
  .book__cell--1, .book__cell--2, .book__cell--3, .book__cell--5 { grid-column: span 12; min-height: 0; }
  .book__cell--4 { grid-template-columns: 1fr; }
  .book__cell--4 img { aspect-ratio: 16 / 10; }
}

/* Galerie horizontale */
.gallery__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(32px, 4vw, 48px); }
.gallery__nav { display: flex; gap: 10px; }
.gallery__nav button {
  width: 52px; height: 52px; border-radius: 0; border: 1px solid var(--demitasse); background: transparent; cursor: pointer;
  display: grid; place-items: center; font-size: 1.15rem; color: var(--demitasse);
  transition: background-color .3s, color .3s, transform .2s;
}
.gallery__nav button:hover { background: var(--demitasse); color: var(--creme); }
.gallery__nav button:active { transform: scale(.96); }
.gallery__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 30vw, 440px);
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track figure { scroll-snap-align: start; }
.gallery__track img { width: 100%; aspect-ratio: 4 / 5.2; object-fit: cover; }
.gallery__track figure:nth-child(3n+2) img { aspect-ratio: 4 / 4.4; }
.gallery__track figcaption { padding-top: 12px; font-size: .9rem; color: var(--texte-doux); }

/* Atouts : image collante + textes longs */
.assets__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.assets__media { position: sticky; top: calc(var(--header-h) + 32px); }
.assets__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.assets__media figcaption { padding-top: 12px; font-size: .9rem; color: var(--texte-doux); }
.asset + .asset { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--sable); }
.asset h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: 1rem; }
@media (max-width: 899px) {
  .assets__grid { grid-template-columns: 1fr; }
  .assets__media { position: static; max-width: 520px; }
}

/* Budget : citation pleine largeur */
.budget { text-align: left; }
.budget__inner { max-width: 1040px; }
.budget__quote { font-family: var(--f-display); font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.25; color: var(--demitasse); margin: 0 0 2rem; letter-spacing: -0.01em; }
.budget__cols { columns: 2; column-gap: clamp(32px, 5vw, 72px); }
@media (max-width: 899px) { .budget__cols { columns: 1; } }

/* Croisement : cuisine sur mesure */
.cross__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.cross__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cross__text h2 { margin-bottom: 1.2rem; }
.cross__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2.2rem; }
.pill {
  display: inline-flex; align-items: center; gap: .5em; min-height: 42px; padding: 0 18px;
  border: 1px solid var(--sable); border-radius: 0;
  text-decoration: none; font-size: .92rem; color: var(--demitasse);
  transition: border-color .3s, color .3s;
}
.pill:hover { border-color: var(--khaki); color: var(--khaki); }
@media (max-width: 899px) { .cross__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { padding-block: clamp(18px, 2.4vw, 36px) var(--section-y); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.contact__intro .lead { margin-top: 1.5rem; max-width: 44ch; }
.contact__direct { display: grid; gap: 14px; margin-top: 2.4rem; }
.contact__direct a {
  display: inline-flex; align-items: center; gap: 14px; width: fit-content;
  color: var(--demitasse); text-decoration: none; font-size: 1.1rem;
}
.contact__direct a span { border-bottom: 1px solid var(--sable); transition: border-color .3s; }
.contact__direct a:hover span { border-color: var(--khaki); }
.contact__direct i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 0; background: var(--ivoire); color: var(--khaki); font-size: 1.15rem; }
.contact__note { display: flex; gap: 24px; align-items: center; margin-top: 3rem; }
.contact__note .frame { width: 120px; aspect-ratio: 3 / 4; flex: none; }
.contact__note img { object-position: 50% 25%; }
.contact__note p { margin: 0; font-size: .98rem; color: var(--texte-doux); max-width: 34ch; }
.contact__note .signature { display: block; font-size: 2.6rem; margin-top: 6px; }

/* Formulaire */
.form { background: var(--ivoire); padding: clamp(20px, 2.6vw, 34px); }
.form h2 { font-size: clamp(1.35rem, 1.8vw, 1.65rem); margin-bottom: .35rem; }
.form__intro { color: var(--texte-doux); font-size: .92rem; margin-bottom: 1.3rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.field { display: grid; gap: 6px; margin-bottom: 16px; align-content: start; }
.field label, .field legend { font-size: .92rem; font-weight: 500; color: var(--demitasse); padding: 0; }
.field .req { color: var(--khaki); }
.field .opt { font-weight: 400; color: var(--texte-doux); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font: inherit; font-size: 1rem; color: var(--demitasse);
  background: var(--creme); border: 1px solid var(--trait); border-radius: 0;
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field input:hover, .field textarea:hover { border-color: var(--texte-doux); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--khaki); box-shadow: 0 0 0 3px rgba(79, 74, 50, .2); }
.field__help { font-size: .85rem; color: var(--texte-doux); }
.field__error { display: none; align-items: center; gap: 6px; font-size: .88rem; color: var(--alerte); }
.field.has-error input, .field.has-error textarea { border-color: var(--alerte); }
.field.has-error .field__error { display: flex; }
fieldset.field { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; gap: .45em; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--trait); border-radius: 0; background: var(--creme);
  font-size: .9rem; color: var(--demitasse); cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
.chip span i { display: none; }
.chip:hover span { border-color: var(--khaki); }
.chip input:checked + span { background: var(--khaki); border-color: var(--khaki); color: var(--creme); }
.chip input:checked + span i { display: inline; }
.chip input:focus-visible + span { outline: 2px solid var(--khaki); outline-offset: 2px; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .9rem; color: var(--texte-doux); margin: 4px 0 26px; }
.consent input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--khaki); }
.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form__submit small { color: var(--texte-doux); font-size: .85rem; }
.form__success { display: none; text-align: left; }
.form.is-sent .form__fields { display: none; }
.form.is-sent .form__success { display: block; }
.form__success i { font-size: 2.4rem; color: var(--khaki); }
.form__success h2 { margin: 12px 0 .8rem; }
.btn[aria-busy="true"] { opacity: .75; pointer-events: none; }

@media (max-width: 899px) { .contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 559px) { .form__row { grid-template-columns: 1fr; gap: 0; } }

/* Suite du contact : 4 temps */
.next__head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.next__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); position: relative; }
.next__list::before { content: ""; position: absolute; top: 22px; left: 0; right: 0; height: 1px; background: var(--sable); }
.next__item { position: relative; padding-top: 64px; }
.next__item i { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 0; background: var(--creme); border: 1px solid var(--khaki); color: var(--khaki); font-size: 1.2rem; }
.next__item h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.next__item p { font-size: .97rem; color: var(--texte-doux); line-height: 1.6; }
@media (max-width: 899px) {
  .next__list { grid-template-columns: 1fr 1fr; }
  .next__list::before { display: none; }
}
@media (max-width: 559px) { .next__list { grid-template-columns: 1fr; } }

/* Zone d'intervention typographique */
.area__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.area__towns { font-family: var(--f-display); font-weight: var(--w-title); font-size: clamp(1.7rem, 3.2vw, 2.9rem); line-height: 1.3; color: var(--demitasse); margin: 1.6rem 0 1.8rem; }
.area__towns span { color: var(--sable); padding-inline: .2em; }
.area__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 899px) { .area__grid { grid-template-columns: 1fr; } .area__media { max-width: 460px; } }

/* ==========================================================================
   CHARTE
   ========================================================================== */
.charte-hero { padding-block: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px); }
.charte-hero .lead { margin-top: 1.4rem; max-width: 60ch; }
.charte-block { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--sable); }
.charte-block > .container > h2 { margin-bottom: .8rem; }
.charte-block > .container > p { max-width: 70ch; color: var(--texte-doux); margin-bottom: 2.4rem; }
.swatches-main { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.swatch { display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 24px; border: 1px solid var(--sable); }
.swatch__name { font-family: var(--f-display); font-weight: var(--w-title); font-size: 1.9rem; line-height: 1.1; }
.swatch__meta { display: grid; gap: 2px; font-size: .9rem; }
.swatch__hex { font-weight: 500; letter-spacing: .04em; }
.swatch--creme { background: var(--creme); color: var(--demitasse); }
.swatch--demitasse { background: var(--demitasse); color: var(--creme); border-color: var(--demitasse); }
.swatch--khaki { background: var(--khaki); color: var(--creme); border-color: var(--khaki); }
.swatch--gingembre { background: var(--gingembre); color: var(--creme); border-color: var(--gingembre); }
.swatch--olive { background: var(--olive); color: var(--demitasse); border-color: var(--olive); }
.swatches-sub { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.swatches-sub .swatch { min-height: 150px; padding: 16px; }
.swatches-sub .swatch__name { font-size: 1.15rem; }
.swatches-sub .swatch__meta { font-size: .82rem; }
.ratio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.ratio div { padding: 18px; font-size: .9rem; display: grid; gap: 4px; }
.ratio strong { font-family: var(--f-display); font-weight: var(--w-title); font-size: 1.5rem; }
.charte-note { margin: 20px 0 0; font-size: .9rem; color: var(--texte-doux); max-width: 70ch; }
.proportion { display: flex; height: 64px; margin-top: 28px; border: 1px solid var(--sable); }
.proportion span { display: flex; align-items: center; padding-left: 14px; font-size: .82rem; overflow: hidden; white-space: nowrap; }
.type-specimen { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px 48px; padding-block: 32px; border-top: 1px solid var(--sable); }
.type-specimen:first-of-type { border-top: 0; padding-top: 0; }
.type-specimen__meta { font-size: .9rem; color: var(--texte-doux); }
.type-specimen__meta strong { display: block; font-family: var(--f-display); font-weight: var(--w-title); font-size: 1.4rem; color: var(--demitasse); margin-bottom: 6px; }
.type-scale { display: grid; gap: 18px; }
.type-scale > div { display: grid; grid-template-columns: 110px 1fr; gap: 24px; align-items: baseline; }
.type-scale small { font-size: .8rem; color: var(--texte-doux); }
.ui-row { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; padding: 28px; border: 1px solid var(--sable); }
.ui-row--ivoire { background: var(--ivoire); border-color: var(--ivoire); }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rules > div { padding: 28px; background: var(--ivoire); }
.rules h3 { font-size: 1.4rem; margin-bottom: 1rem; }
.rules li { position: relative; padding-left: 26px; margin-bottom: 8px; font-size: .97rem; }
.rules li i { position: absolute; left: 0; top: .35em; color: var(--khaki); }

@media (max-width: 899px) {
  .swatches-main { grid-template-columns: 1fr; }
  .swatches-sub { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ratio { grid-template-columns: 1fr 1fr; }
  .type-specimen { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
}
@media (max-width: 559px) {
  .swatches-sub { grid-template-columns: 1fr 1fr; }
  .type-scale > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   Apparitions au défilement (désactivées si mouvement réduit)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1s var(--ease), transform 1.1s var(--ease);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal="fade"] { transform: none; }
  /* Révélation en rideau : le clip est posé sur l'image, pas sur l'élément observé */
  .js [data-reveal="mask"] { opacity: 1; transform: none; }
  .js [data-reveal="mask"] > img {
    clip-path: inset(100% 0 0 0); transform: scale(1.08);
    transition: clip-path 1.4s var(--ease), transform 2s var(--ease);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  .js [data-reveal="mask"].is-in > img { clip-path: inset(0 0 0 0); transform: none; }
}

/* Case de consentement dans un bloc .field */
.field .consent { font-weight: 400; font-size: .9rem; color: var(--texte-doux); margin: 4px 0 0; }
.field.has-error .consent input { outline: 2px solid var(--alerte); outline-offset: 2px; }

/* ==========================================================================
   Intégration WordPress
   Complément à la charte V4 : contenu long éditable, listes d'articles,
   pagination, et les médias reconstruits depuis l'ancien page-builder.
   Coins bruts et fonds clairs : mêmes règles que le reste de la charte.
   ========================================================================== */

/* ---------- Contenu long saisi dans WordPress ---------- */
.wp-content > * + * { margin-top: 1.25em; }
.wp-content h2 {
  margin-top: 2.2em; font-family: var(--f-display); font-weight: var(--w-title);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.2; color: var(--demitasse);
}
.wp-content h3 {
  margin-top: 1.8em; font-family: var(--f-display); font-weight: var(--w-title);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.25; color: var(--demitasse);
}
.wp-content h4 { margin-top: 1.5em; font-family: var(--f-display); font-size: 1.15rem; color: var(--demitasse); }
.wp-content a { color: var(--khaki); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wp-content a:hover { color: var(--khaki-fonce); }
.wp-content strong { color: var(--demitasse); font-weight: 600; }
.wp-content ul, .wp-content ol { padding-left: 1.3em; }
.wp-content ul { list-style: none; }
.wp-content ul li { position: relative; padding-left: 1.1em; }
.wp-content ul li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 7px; height: 1px; background: var(--olive);
}
.wp-content ol { list-style: decimal; }
.wp-content li + li { margin-top: .5em; }
.wp-content img { margin: 2em 0; }
.wp-content figure { margin: 2.2em 0; }
.wp-content figcaption {
  margin-top: .7em; font-size: .85rem; color: var(--texte-doux);
}
.wp-content blockquote, .wp-content .quote {
  margin: 2em 0; padding-left: 24px; border-left: 2px solid var(--olive);
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; color: var(--demitasse);
}
.wp-content blockquote cite, .wp-content .quote cite {
  display: block; margin-top: .8em; font-family: var(--f-text); font-style: normal;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gingembre);
}
.wp-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.wp-content th, .wp-content td { padding: 13px 12px; border-bottom: 1px solid var(--sable); text-align: left; }
.wp-content th {
  font-family: var(--f-text); font-weight: 600; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--demitasse);
}
.wp-content hr { border: 0; border-top: 1px solid var(--sable); margin: 3em 0; }
.wp-content iframe, .wp-content video { max-width: 100%; }

/* ---------- Médias reconstruits depuis l'ancien site ---------- */
.eo-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin: 2.4em 0;
}
.eo-gallery img { margin: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.eo-banner { margin: 2.2em 0; }
.eo-banner figcaption {
  margin-top: .7em; font-family: var(--f-display); font-weight: var(--w-title);
  font-size: 1.15rem; color: var(--demitasse);
}

/* ---------- En-tête d'article ---------- */
.svc-hero__meta {
  margin-top: 14px; font-size: .9rem; color: var(--texte-doux);
}

/* ---------- Listes d'articles (blog, catégories, recherche) ---------- */
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 40px 28px;
}
.cards .post__img { overflow: hidden; }
.cards .post__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .9s var(--ease); }
.cards .post a { text-decoration: none; display: block; }
.cards .post:hover .post__img img { transform: scale(1.04); }
.cards .post time {
  display: block; margin: 14px 0 6px; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gingembre);
}
.cards .post h3 {
  font-family: var(--f-display); font-weight: var(--w-title);
  font-size: 1.22rem; line-height: 1.25; color: var(--demitasse);
}
.cards .post:hover h3 { color: var(--khaki); }

/* ---------- Pagination ---------- */
.pagination, .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 64px; }
.pagination .page-numbers, .nav-links .page-numbers {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--sable); font-size: .95rem; color: var(--texte); text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pagination .page-numbers:hover, .nav-links .page-numbers:hover,
.pagination .current, .nav-links .current {
  background: var(--khaki); border-color: var(--khaki); color: var(--khaki-pale);
}

/* ---------- Formulaire de recherche ---------- */
.search-form { display: flex; gap: 10px; }
.search-form label { flex: 1; }
.search-form .search-field {
  width: 100%; padding: 13px 15px; border: 1px solid var(--trait);
  background: var(--ivoire); font-family: var(--f-text); font-size: 1rem; color: var(--texte);
}
.search-form .search-field:focus { outline: 2px solid var(--khaki); outline-offset: 1px; }
.search-form .search-submit {
  padding: 0 24px; border: 0; background: var(--khaki); color: var(--khaki-pale);
  font-family: var(--f-text); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer;
}
.search-form .search-submit:hover { background: var(--khaki-fonce); }

/* ---------- Classes d'alignement du cœur WordPress ---------- */
.alignleft { float: left; margin: 0 1.8em 1.2em 0; }
.alignright { float: right; margin: 0 0 1.2em 1.8em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text { margin-top: .7em; font-size: .85rem; color: var(--texte-doux); }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ==========================================================================
   Blog : accueil, catégories, article
   Deux colonnes avec colonne droite collante. Coins bruts, fonds clairs,
   khaki pour tout ce qui se clique : mêmes règles que le reste de la charte.
   ========================================================================== */

/* ---------- Grille à deux colonnes ---------- */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 3vw, 48px); align-items: start; }
.blog-aside { display: grid; gap: 18px; position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 1000px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.blog-main .cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* Le corps d'article remplit sa colonne : la mesure de 65ch de .prose est
   faite pour du texte isolé, pas pour cette grille. */
.blog-main .wp-content.prose { max-width: 82ch; }

/* ---------- Présentation d'Emelyne ----------
   Les deux variantes sont horizontales : portrait carré à gauche, texte à
   droite. La carte reste basse, pour que la bande latérale et l'en-tête
   d'article laissent la place à ce qui suit. */
.author { display: grid; align-items: center; }
.author__photo { overflow: hidden; }
.author__photo img { width: 100%; height: 100%; object-fit: cover; }
.author__name { font-family: var(--f-display); font-weight: var(--w-title); font-size: 1.15rem; line-height: 1.2; color: var(--demitasse); margin: 0; }
.author__role { font-size: .87rem; line-height: 1.45; color: var(--texte-doux); margin: .2em 0 0; }
.author__pitch { font-size: .97rem; line-height: 1.6; color: var(--texte-doux); margin: .7em 0 0; max-width: 54ch; }
.author__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: .6em 0 0; }
.author__social { display: inline-flex; gap: 8px; }
.author__social a {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sable);
  color: var(--texte-doux);
  text-decoration: none;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.author__social a:hover,
.author__social a:focus-visible { border-color: var(--khaki); color: var(--khaki); }
.author__social i { font-size: 1.05rem; }

.author--intro { grid-template-columns: 104px minmax(0, 1fr); gap: 22px; }
.author--intro .author__photo { aspect-ratio: 1; }

.author--aside { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; background: var(--ivoire); padding: 14px; }
.author--aside .author__photo { aspect-ratio: 1; }
.author--aside .author__links { gap: 6px 14px; }

@media (max-width: 420px) {
  .author { grid-template-columns: 72px minmax(0, 1fr) !important; gap: 14px; }
}

/* ---------- En-tête du blog : titre à gauche, décoratrice à droite ---------- */
.blog-hero { padding-bottom: clamp(26px, 3vw, 44px); }
.blog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(22px, 4vw, 64px);
  align-items: end;
  padding-top: clamp(22px, 3vw, 40px);
}
.blog-head__title .eyebrow { display: block; margin-bottom: .7rem; }
@media (max-width: 900px) {
  .blog-head { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- CTA de colonne ----------
   Volontairement court : quatre lignes, pour tenir dans le premier écran
   à côté de l'article, sous le sommaire. */
.aside-cta { background: var(--khaki); color: var(--khaki-pale); padding: 16px; display: grid; gap: 8px; justify-items: start; }
.aside-cta .eyebrow { color: #C3BFA8; }
.aside-cta__title { font-family: var(--f-display); font-weight: var(--w-title); font-size: 1.2rem; line-height: 1.15; color: #FBF9F4; }
.aside-cta__text { font-size: .87rem; line-height: 1.45; color: var(--khaki-pale); }
.aside-cta .btn--primary { background: var(--ivoire); color: var(--khaki); }
.aside-cta .btn--primary:hover { background: #fff; color: var(--khaki-fonce); }
.aside-cta__tel { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: #FBF9F4; text-decoration: none; }
.aside-cta__tel:hover { text-decoration: underline; }

/* ---------- Pastilles de catégorie ---------- */
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 3vw, 44px); }
.cat-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
  border: 1px solid var(--sable); background: transparent; color: var(--texte);
  font-size: .85rem; text-decoration: none; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.cat-pill span { font-size: .72rem; color: var(--texte-doux); }
.cat-pill:hover { border-color: var(--khaki); color: var(--khaki); }
.cat-pill.is-current { background: var(--khaki); border-color: var(--khaki); color: var(--khaki-pale); }
.cat-pill.is-current span { color: #C3BFA8; }
.blog-aside .cat-pills { margin-bottom: 0; }

/* ---------- Étiquette de catégorie sur la vignette ---------- */
.post__img { position: relative; }
.post__tag {
  position: absolute; left: 0; bottom: 0; padding: 6px 12px;
  background: var(--creme); color: var(--demitasse);
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
}
.post__ex { margin-top: .5em; font-size: .95rem; color: var(--texte-doux); }

/* ---------- En-tête d'article : titre à gauche, image à droite ---------- */
/* La colonne de texte garde de quoi tenir le titre sur peu de lignes, le
   reste va à l'image. `stretch` fait que la photo monte exactement à la
   hauteur du bloc de gauche : elle est aussi grande que la place le permet,
   sans format imposé. */
.post-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 3vw, 48px); align-items: stretch; padding-top: 14px; }
.post-hero__text { display: grid; gap: 14px; justify-items: start; align-content: start; }
.post-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .9rem; color: var(--texte-doux); }
.post-hero__meta span { display: inline-flex; align-items: center; }
.post-hero__meta span + span::before { content: "·"; margin-right: 20px; color: var(--sable); }
.post-hero__media { overflow: hidden; min-height: clamp(260px, 30vw, 460px); }
.post-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Dans l'en-tête d'article, la signature se passe de cartouche : un simple
   filet la rattache au titre, sans refermer une boîte blanche dessus. */
.post-hero .author--aside {
  width: 100%;
  background: none;
  padding: 16px 0 0;
  border-top: 1px solid var(--sable);
}
@media (max-width: 900px) { .post-hero { grid-template-columns: 1fr; } }

/* ---------- Sommaire ---------- */
.toc { border-left: 2px solid var(--olive); padding: 4px 0 4px 22px; margin-bottom: clamp(32px, 3vw, 48px); }
.toc__title { font-family: var(--f-text); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gingembre); margin-bottom: .8em; }
.toc ol { list-style: none; display: grid; gap: 9px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc li a { color: var(--texte); text-decoration: none; font-size: .97rem; }
.toc li a::before { content: counter(toc) ". "; color: var(--texte-doux); }
.toc li a:hover { color: var(--khaki); text-decoration: underline; text-underline-offset: 3px; }
.toc .toc__lvl3 { padding-left: 18px; }
.toc .toc__lvl3 a { font-size: .9rem; color: var(--texte-doux); }
.toc .toc__lvl3 a::before { content: "— "; }

/* ---------- Intro du blog ---------- */
.blog-intro { padding-top: clamp(24px, 3vw, 40px); }

/* ==========================================================================
   Réalisations : une section par projet, mosaïque de 3 à 4 photos par ligne
   ========================================================================== */

/* Sommaire des projets, sous l'en-tête de page. */
.works__index { margin-top: clamp(32px, 4vw, 56px); }
.works__index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  padding-top: 18px;
  border-top: 1px solid var(--sable);
}
.works__index a {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  text-decoration: none;
  transition: color .3s var(--ease);
}
.works__index a:hover,
.works__index a:focus-visible { color: var(--khaki); }

/* En-tête de projet : titre à gauche, récit et repères à droite. */
.project__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.project__intro .lead { margin-top: 1.1rem; max-width: 34ch; }
.project__body { max-width: 58ch; color: var(--texte-doux); }
.project__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(24px, 3vw, 48px);
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--sable);
}
.project__facts dt {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gingembre);
}
.project__facts dd {
  margin: .25rem 0 0;
  font-family: var(--f-display);
  font-weight: var(--w-title);
  font-size: 1.2rem;
  color: var(--demitasse);
}

/* La mosaïque. Les colonnes valent le rapport de chaque photo, exprimé en
   `fr` : une largeur proportionnelle au rapport donne une hauteur identique
   pour toute la ligne, quelle que soit l'orientation des images. Un paysage
   occupe donc naturellement la place de deux portraits, sans recadrage. */
.project__mosaic { display: grid; gap: clamp(10px, 1.1vw, 16px); }
.mosaic {
  display: grid;
  grid-template-columns: var(--cols);
  gap: clamp(10px, 1.1vw, 16px);
}
.mosaic__item { overflow: hidden; background: var(--sable); }
.mosaic__item img {
  width: 100%;
  aspect-ratio: var(--ar);
  object-fit: cover;
  transition: transform 1s var(--ease);
}
@media (hover: hover) {
  .mosaic__item:hover img { transform: scale(1.035); }
}

@media (max-width: 860px) {
  .project__head { grid-template-columns: 1fr; align-items: start; }
  .project__intro .lead { max-width: none; }
}
@media (max-width: 700px) {
  /* Deux colonnes régulières : les rapports cèdent la place à une grille. */
  .mosaic { grid-template-columns: 1fr 1fr; }
  .mosaic__item img { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   Article : titre allégé, sommaire en colonne de droite
   ========================================================================== */

/* Le titre d'article descend de 25 % par rapport au H1 des autres pages :
   l'en-tête tient alors dans le premier écran avec la date et la signature. */
.post-hero__text .h-xl { font-size: clamp(1.95rem, 3.75vw, 3.45rem); }

/* Sommaire en bande latérale : compact, et la liste défile seule quand
   l'article compte beaucoup de titres, pour ne pas repousser le CTA. */
.toc--aside {
  margin-bottom: 0;
  padding: 16px 16px 18px;
  border-left: 2px solid var(--olive);
  background: var(--ivoire);
}
.toc--aside .toc__title { margin-bottom: .6em; }
.toc--aside ol { gap: 6px; max-height: 44vh; overflow-y: auto; }
.toc--aside li a { font-size: .9rem; line-height: 1.4; }
.toc--aside .toc__lvl3 { padding-left: 14px; }
.toc--aside .toc__lvl3 a { font-size: .84rem; }

@media (max-width: 1000px) {
  /* Remis dans le flux : plus de hauteur contrainte. */
  .toc--aside ol { max-height: none; overflow: visible; }
}

/* ==========================================================================
   Contact Form 7 habillé par la charte
   Le formulaire reste celui de l'extension (Emelyne garde ses notifications) :
   seul son habillage vient d'ici. Les sélecteurs ciblent la structure que
   l'extension impose autour des champs.
   ========================================================================== */

.form .wpcf7 { margin: 0; }
.form .wpcf7-form-control-wrap { display: block; }
.form .wpcf7-form p { margin: 0; }

/* Messages de validation */
.form .wpcf7-not-valid-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: .88rem;
  color: var(--alerte);
}
.form .wpcf7-not-valid { border-color: var(--alerte); }
.form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--trait);
  font-size: .95rem;
  line-height: 1.5;
}
.form form.invalid .wpcf7-response-output,
.form form.unaccepted .wpcf7-response-output,
.form form.spam .wpcf7-response-output,
.form form.failed .wpcf7-response-output { border-color: var(--alerte); color: var(--alerte); }
.form form.sent .wpcf7-response-output {
  border-color: var(--khaki);
  background: var(--creme);
  color: var(--khaki);
}
.form .wpcf7-spinner { margin: 0 0 0 14px; }

/* « Votre projet concerne » : les cases deviennent des pastilles */
.form .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.form .wpcf7-checkbox .wpcf7-list-item { margin: 0; }
.form .wpcf7-checkbox .wpcf7-list-item > label { display: inline-flex; cursor: pointer; }
.form .wpcf7-checkbox input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  opacity: 0;
}
.form .wpcf7-checkbox .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--trait);
  background: var(--creme);
  font-size: .85rem;
  color: var(--demitasse);
  transition: background-color .25s, border-color .25s, color .25s;
}
.form .wpcf7-checkbox .wpcf7-list-item > label:hover .wpcf7-list-item-label { border-color: var(--khaki); }
.form .wpcf7-checkbox input:checked + .wpcf7-list-item-label {
  background: var(--khaki);
  border-color: var(--khaki);
  color: var(--creme);
}
.form .wpcf7-checkbox input:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid var(--khaki);
  outline-offset: 2px;
}

/* Le bouton d'envoi porte déjà .btn .btn--primary : il garde ses mesures,
   seule la largeur pleine héritée des champs est neutralisée. */
.form input.wpcf7-submit { width: auto; }

/* ==========================================================================
   Fin d'article : la décoratrice signe
   Plus large et plus chaleureux que la signature de l'en-tête, avec une
   invitation différente de celle de la colonne (devis).
   ========================================================================== */

.outro {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: clamp(48px, 5vw, 72px);
  padding: clamp(22px, 2.6vw, 34px);
  background: var(--ivoire);
  border-top: 2px solid var(--olive);
}
.outro__photo { overflow: hidden; aspect-ratio: 3 / 4; }
.outro__photo img { width: 100%; height: 100%; object-fit: cover; }
.outro__name {
  margin: .5rem 0 0;
  font-family: var(--f-display);
  font-weight: var(--w-title);
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--demitasse);
}
.outro__text { margin: .7rem 0 0; color: var(--texte-doux); max-width: 62ch; }
/* La signature manuscrite, un cran plus petite qu'en pleine page. */
.outro__sign { font-size: clamp(2.4rem, 3vw, 3.2rem); margin: .35em 0 .1em; }
.outro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 1rem; }
.outro__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--demitasse);
  text-decoration: none;
}
.outro__tel i { color: var(--khaki); font-size: 1.15rem; }
.outro__tel:hover { color: var(--khaki); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 620px) {
  .outro { grid-template-columns: 1fr; }
  .outro__photo { max-width: 160px; }
}

/* Galerie de la page d'accueil : deux lignes, sous les tuiles de projets. */
.home-gallery {
  display: grid;
  gap: clamp(10px, 1.1vw, 16px);
  margin-top: clamp(10px, 1.1vw, 16px);
}

/* La mosaïque se révèle ligne par ligne : l'enveloppe de chaque ligne ne doit
   pas casser la grille de l'ensemble. */
.project__mosaic > [data-reveal] { display: grid; }