/* =========================================================================
   CHADEBOST · architecte
   Charte : bleu nuit + bronze en dégradé, Kontora (fins, capitales espacées),
   motif de briques en filet. Haute couture : beaucoup de vide, peu de mots,
   des images plein cadre et des mouvements lents.
   ========================================================================= */

:root {
  --nuit: #141a33;
  --nuit-2: #1b2240;
  --nuit-3: #252d52;
  --bronze: #a87c68;
  --bronze-d: #9e725d;
  --bronze-l: #d9bfb1;
  --bronze-ink: #85594a;          /* bronze lisible sur fond clair (AA) */
  --sable: #efebe7;
  --sable-2: #f7f5f2;
  /* Fonds clairs : crème pastel léger au lieu du blanc pur (demande du 28/09/2026),
     en alternance avec le bleu nuit. Le second, un ton plus soutenu, sépare deux
     sections claires qui se suivent. */
  --creme: #f7f2ea;
  --creme-2: #efe7da;
  --blanc: #ffffff;
  --texte: #24262f;
  --gris: #4d4e58;
  --ligne: rgba(20, 26, 51, .14);
  --ligne-l: rgba(255, 255, 255, .16);
  --degrade: linear-gradient(90deg, #9e725d 0%, #bc9786 55%, #e2cfc4 100%);

  --f: "Kontora", "Helvetica Neue", Arial, sans-serif;
  --wrap: min(1440px, 100% - clamp(40px, 8vw, 160px));
  --ease: cubic-bezier(.22, .61, .12, 1);
  --ease-2: cubic-bezier(.77, 0, .18, 1);
  --header-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter : la place de la barre de défilement reste réservée pendant
   l'ouverture (défilement bloqué) ; sans ça, la page change de largeur quand la
   barre revient et la photo du hero « saute ». */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: var(--f);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: var(--texte);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
/* Une image en object-fit remplit son cadre : la balise picture doit le remplir aussi. */
.hero-slide picture, .manifeste-media picture, .univers-media picture, .mm picture, .metier-media picture,
.elegance-bg picture, .contact-bg picture, .journal-media picture { width: 100%; height: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1em; }
h1, h2, h3, h4 { font-weight: 300; margin: 0; line-height: 1.12; letter-spacing: .01em; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--bronze); color: #fff; }

.wrap, .container { width: var(--wrap); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 300; background: var(--nuit); color: #fff; padding: 10px 18px; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 1px solid var(--bronze); outline-offset: 4px; }

.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
  color: var(--bronze-ink); margin: 0 0 28px; display: inline-flex; align-items: center; gap: 16px;
}
.eyebrow::before { content: ""; width: 42px; height: 1px; background: var(--degrade); }
.eyebrow--light { color: var(--bronze-l); }

.section-title {
  font-size: clamp(38px, 5.4vw, 86px); font-weight: 300; line-height: 1.02; letter-spacing: -.01em; color: var(--nuit);
}
.section-title--light { color: #fff; }
.section-title em, .univers-title em { font-style: normal; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Boutons ---------- */
.link-arrow { display: inline-flex; align-items: center; gap: 18px; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; font-weight: 500; color: var(--nuit); }
.link-arrow i { width: 56px; height: 1px; background: currentColor; position: relative; transition: width .6s var(--ease); }
.link-arrow i::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.link-arrow:hover i { width: 86px; }

.btn-line, .btn-solid, .btn, .btn-sm {
  display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  padding: 20px 42px; font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  border: 1px solid var(--nuit); color: var(--nuit); isolation: isolate; transition: color .6s var(--ease);
}
.btn-line::before, .btn-solid::before, .btn::before {
  content: ""; position: absolute; inset: 0; background: var(--nuit); transform: translateY(101%);
  transition: transform .7s var(--ease-2); z-index: -1;
}
.btn-line:hover, .btn:hover { color: #fff; }
.btn-line:hover::before, .btn:hover::before { transform: none; }
.btn-solid { border-color: transparent; background: var(--degrade); color: var(--nuit); }
.btn-solid::before { background: #fff; }
.btn-solid:hover::before { transform: none; }

/* ---------- En-tête ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  color: #fff; transition: background .6s var(--ease), color .6s var(--ease), height .6s var(--ease), transform .6s var(--ease);
}
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ligne-l); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
.site-header.scrolled { background: rgba(20, 26, 51, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); height: 72px; }
.site-header.scrolled::after { transform: none; }
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner { width: var(--wrap); margin-inline: auto; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: block; }
.brand-logo { width: 150px; height: auto; transition: width .6s var(--ease); }
.site-header.scrolled .brand-logo { width: 124px; }
/* Accueil : le grand logo du slider suffit, celui de l'en-tête n'arrive qu'au défilement. */
.brand { transition: opacity .6s var(--ease), visibility .6s; }
.home .site-header:not(.scrolled) .brand { opacity: 0; visibility: hidden; }
body.home.nav-open .site-header .brand { opacity: 1; visibility: visible; }
.nav { display: flex; align-items: center; gap: 44px; }
.nav-menu { list-style: none; display: flex; align-items: center; gap: 38px; margin: 0; padding: 0; }
.nav-menu li { display: flex; line-height: 1; }
.nav-menu a { font-size: 12px; line-height: 1; letter-spacing: .28em; text-transform: uppercase; font-weight: 500; position: relative; display: inline-block; overflow: hidden; padding: 8px 0; }
.nav-menu a span { display: inline-block; transition: transform .6s var(--ease); }
.nav-menu a::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--degrade); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.nav-menu a:hover::before, .nav-menu a[aria-current="page"]::before { transform: scaleX(1); transform-origin: left; }
.nav-lang { position: relative; }
.nav-lang__btn { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 12px; line-height: 1; letter-spacing: .24em; font-weight: 500; color: inherit; }
.nav-lang__btn i { width: 6px; height: 6px; border-right: 1px solid; border-bottom: 1px solid; transform: translateY(-2px) rotate(45deg); transition: transform .4s var(--ease); }
.nav-lang__btn[aria-expanded="true"] i { transform: translateY(1px) rotate(-135deg); }
.nav-lang__liste { list-style: none; margin: 0; padding: 10px 0; position: absolute; right: -18px; top: calc(100% + 14px); min-width: 190px; background: rgba(20, 26, 51, .96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--bronze-d);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; }
.nav-lang.is-open .nav-lang__liste { opacity: 1; visibility: visible; transform: none; }
.nav-lang__item { display: flex; align-items: baseline; gap: 14px; padding: 10px 18px; font-size: 13px; letter-spacing: .06em; color: #fff; white-space: nowrap; }
.nav-lang__item b { font-weight: 500; font-size: 11px; letter-spacing: .2em; color: var(--bronze-l); width: 22px; }
.nav-lang__item em { margin-left: auto; font-style: normal; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.nav-lang__item.is-active { color: var(--bronze-l); }
.nav-lang__item.is-off { color: rgba(255,255,255,.5); cursor: default; }
a.nav-lang__item:hover { color: var(--bronze-l); }
.nav-toggle { display: none; width: 44px; height: 44px; position: relative; }
.nav-toggle span { position: absolute; left: 10px; right: 10px; height: 1px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.nav-toggle span:first-child { top: 18px; }
.nav-toggle span:last-child { top: 26px; }
.nav.open .nav-toggle span:first-child { top: 22px; transform: rotate(45deg); }
.nav.open .nav-toggle span:last-child { top: 22px; transform: rotate(-45deg); }

/* ---------- Ouverture ----------
   1. le logo apparaît en fondu, sans mouvement (demande client 29/09)
   2. le rideau s'ouvre en deux panneaux (haut, bas) pendant que le logo s'efface
   Tout en transform/opacity. site.js déclenche la sortie (.is-done) à 2,9 s. */
.intro { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; pointer-events: none; }
.intro::before, .intro::after { content: ""; position: absolute; left: 0; right: 0; height: 50.5%; background: var(--nuit); transition: transform 1.2s var(--ease-2); }
.intro::before { top: 0; }
.intro::after { bottom: 0; }
.intro-logo { position: relative; z-index: 1; width: min(560px, 80vw); overflow: visible; }
html:not(.js) .intro, html.intro-vue .intro { display: none; }
.intro-logo { opacity: 0; animation: introFondu 1.6s .2s ease forwards; }
@keyframes introFondu { to { opacity: 1; } }
.intro.is-done::before { transform: translateY(-100%); }
.intro.is-done::after { transform: translateY(100%); }
.intro.is-done .intro-logo { animation: introFonduOut .8s ease forwards; }
@keyframes introFonduOut { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 620px; color: #fff; overflow: hidden; background: var(--nuit); }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transition: opacity 2.4s cubic-bezier(.45,0,.2,1); will-change: opacity; }
/* La photo qui arrive se pose AU-DESSUS de celle qui part, restée opaque : pas de
   creux de luminosité pendant le fondu. La sortante garde son zoom (même
   animation, donc pas de redémarrage) jusqu'à être entièrement recouverte. */
.hero-slide.is-active { opacity: 1; z-index: 2; }
.hero-slide.is-leaving { opacity: 1; z-index: 1; transition: none; }
/* Arrivée : tant que la première photo n'est pas décodée, le bleu seul ; puis fondu (site.js pose .is-pret). */
.js .hero:not(.is-pret) .hero-slide.is-active { opacity: 0; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; backface-visibility: hidden; }
.hero-slide.is-active img, .hero-slide.is-leaving img { animation: kenburns 11s linear forwards; }
/* La première photo ne commence son zoom qu'en apparaissant (sinon il tourne déjà sous le rideau). */
.js .hero:not(.is-pret) .hero-slide.is-active img { animation: none; }
@keyframes kenburns { from { transform: scale(1.12) translate3d(0, 0, 0); } to { transform: scale(1.02) translate3d(-1%, -1%, 0); } }
.hero-veil { position: absolute; inset: 0; z-index: 2; background:
  radial-gradient(ellipse 60% 55% at 50% 50%, rgba(14,18,38,.55) 0%, rgba(14,18,38,.22) 55%, rgba(14,18,38,0) 80%),
  linear-gradient(180deg, rgba(20,26,51,.5) 0%, rgba(20,26,51,.12) 30%, rgba(20,26,51,.12) 65%, rgba(20,26,51,.7) 100%); }
/* Trois mots, puis le logo en grand, au centre : la photo parle seule. */
.hero-content { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--wrap); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-title { margin: 0; width: 100%; display: flex; justify-content: center; }
.hero-logo { width: min(980px, 86vw); height: auto; overflow: visible; filter: drop-shadow(0 10px 40px rgba(0,0,0,.35)); }
.hero-logo { opacity: 0; }
.is-ready .hero-logo { animation: introFondu 1.6s ease forwards; }
.hero-eyebrow { font-size: clamp(11px, 1vw, 14px); letter-spacing: .42em; text-transform: uppercase; color: var(--bronze-l); margin-bottom: clamp(22px, 3vw, 40px); text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.hero-sub { font-size: clamp(16px, 1.35vw, 20px); max-width: 560px; color: rgba(255,255,255,.86); line-height: 1.7; margin: 0; }
.reveal-line { overflow: hidden; }
.reveal-line > span { display: inline-block; transform: translateY(110%); transition: transform 1.4s var(--ease); }
.is-ready .reveal-line > span { transform: none; }
.is-ready .hero-eyebrow > span { transition-delay: .2s; }
.hero-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 42px; width: var(--wrap); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .3em; }
.hero-counter { display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,.7); }
.hero-counter__i { color: #fff; }
.hero-counter__bar { width: 120px; height: 1px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; }
.hero-counter__bar i { position: absolute; inset: 0; background: var(--degrade); transform: scaleX(0); transform-origin: left; }
.hero-counter__bar i.run { animation: bar 7s linear forwards; }
@keyframes bar { to { transform: scaleX(1); } }
.hero-scroll { display: flex; align-items: center; gap: 16px; text-transform: uppercase; }
.hero-scroll i { width: 1px; height: 54px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: #fff; animation: drop 2.2s var(--ease) infinite; }
@keyframes drop { to { top: 100%; } }

/* ---------- Manifeste ---------- */
.manifeste { padding: clamp(110px, 16vw, 230px) 0 clamp(90px, 10vw, 150px); background: var(--creme); position: relative; }
.manifeste-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 8vw, 150px); align-items: center; }
.manifeste-media { aspect-ratio: 4/5; overflow: hidden; }
.manifeste-media img { width: 100%; height: 100%; object-fit: cover; }
.manifeste-big { font-size: clamp(26px, 2.9vw, 46px); line-height: 1.3; font-weight: 300; color: var(--nuit); margin-bottom: 42px; letter-spacing: -.005em; }
.manifeste-body { color: var(--gris); max-width: 560px; margin-bottom: 46px; }
.manifeste-liste { list-style: none; padding: 0; margin: 0 0 46px; display: flex; flex-wrap: wrap; gap: 6px 0; }
.manifeste-liste li { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--bronze-d); }
.manifeste-liste li::after { content: ""; display: inline-block; width: 28px; height: 1px; margin: 0 16px; vertical-align: middle; background: currentColor; opacity: .5; }
.manifeste-liste li:last-child::after { content: none; }
.chiffres { list-style: none; padding: 0; margin: clamp(90px, 10vw, 160px) auto 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ligne); }
.chiffres li { padding: 38px 24px 0 0; }
.chiffres strong { display: block; font-weight: 300; font-size: clamp(46px, 5vw, 84px); line-height: 1; color: var(--nuit); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.chiffres span { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.chiffres strong span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.chiffres .chiffres-plus { font-size: .6em; vertical-align: .45em; margin-right: .06em; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chiffres--3 { grid-template-columns: repeat(3, 1fr); }
.chiffres-villes { display: block; font-style: normal; font-size: 14px; line-height: 1.7; color: var(--gris); margin-top: 12px; max-width: 360px; }

/* ---------- Univers : défilement horizontal épinglé ---------- */
.univers { position: relative; background: var(--nuit); color: #fff; padding: clamp(110px, 13vw, 200px) 0; }
.univers-head { margin-bottom: clamp(50px, 6vw, 90px); }
.univers-title { font-size: clamp(38px, 5.4vw, 86px); font-weight: 300; line-height: 1.02; }
.univers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 56px); }
.univers-card:nth-child(2) { margin-top: clamp(40px, 6vw, 110px); }
.univers-card { position: relative; }
.univers-media { aspect-ratio: 4/5; overflow: hidden; position: relative; }
.univers-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease), filter 1.2s var(--ease); filter: saturate(.85) brightness(.9); }
.univers-card:hover .univers-media img { transform: scale(1); filter: none; }
.univers-media::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(217,191,177,0); transition: inset .8s var(--ease), border-color .8s; }
.univers-card:hover .univers-media::after { inset: 14px; border-color: rgba(217,191,177,.7); }
.univers-body { padding-top: 22px; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; }
.univers-num { font-size: 11px; letter-spacing: .2em; color: var(--bronze-l); padding-top: 9px; grid-row: span 2; }
.univers-body h3 { font-size: clamp(24px, 2.2vw, 34px); font-weight: 300; margin-bottom: 8px; letter-spacing: .02em; }
.univers-body p { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.6; margin: 0; }

/* ---------- Process de conception : défilement horizontal épinglé ---------- */
.process { position: relative; background: var(--creme-2); }
.process-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.process-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: clamp(30px, 5vh, 60px); }
.process-head .section-title { font-size: clamp(34px, 4.4vw, 70px); max-width: 900px; }
.process-progress { flex: 0 0 220px; height: 1px; background: var(--ligne); position: relative; margin-bottom: 14px; }
.process-progress i { position: absolute; inset: 0; background: var(--degrade); transform: scaleX(var(--p, 0)); transform-origin: left; }
.process-track { list-style: none; margin: 0; display: flex; gap: clamp(20px, 2.4vw, 40px); padding: 0 max(calc((100vw - 1440px) / 2), clamp(20px, 4vw, 80px)); will-change: transform; outline: 0; }
.process-card { flex: 0 0 clamp(300px, 36vw, 580px); }
.process-media { aspect-ratio: 4/3; overflow: hidden; background: #fff; }
.process-media picture, .process-media img { width: 100%; height: 100%; object-fit: cover; }
.process-media img { transition: transform 1.6s var(--ease); }
.process-card:hover .process-media img { transform: scale(1.04); }
.process-body { margin: 22px 0 0; display: flex; align-items: baseline; gap: 18px; }
.process-num { font-size: 11px; letter-spacing: .2em; color: var(--bronze-ink); }
.process-nom { font-size: clamp(22px, 2vw, 32px); font-weight: 300; color: var(--nuit); letter-spacing: .02em; }

/* ---------- Croquis ---------- */
.croquis { padding: clamp(110px, 13vw, 200px) 0; background: var(--creme-2); overflow: hidden; }
.croquis-head { margin-bottom: clamp(50px, 6vw, 90px); }
.croquis-rail { overflow: hidden; }
.croquis-row { display: flex; gap: clamp(24px, 3vw, 56px); width: max-content; will-change: transform; }
.croquis-item { margin: 0; height: clamp(260px, 32vw, 460px); flex: 0 0 auto; background: #fff; padding: clamp(14px, 1.4vw, 24px); box-shadow: 0 30px 60px -40px rgba(20,26,51,.35); }
.croquis-item picture, .croquis-item img { height: 100%; width: auto; mix-blend-mode: multiply; }

/* ---------- Références ---------- */
.refs { padding: clamp(110px, 13vw, 210px) 0; background: var(--creme); position: relative; }
.refs-head { display: flex; flex-direction: column; margin-bottom: clamp(50px, 6vw, 90px); }
.refs-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); counter-reset: r; }
.refs-item { border-bottom: 1px solid var(--ligne); counter-increment: r; }
.refs-link { display: grid; grid-template-columns: 70px 1fr auto; align-items: baseline; gap: 20px; padding: clamp(22px, 2.6vw, 38px) 0; position: relative; }
.refs-link::before { content: counter(r, decimal-leading-zero); font-size: 11px; letter-spacing: .2em; color: var(--bronze-ink); }
.refs-cat { position: absolute; top: 14px; left: 90px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--bronze-ink); opacity: 0; transform: translateY(6px); transition: .6s var(--ease); }
.refs-name { font-size: clamp(28px, 4.2vw, 66px); font-weight: 300; line-height: 1.05; color: var(--nuit); transition: transform .8s var(--ease), color .6s; text-transform: uppercase; letter-spacing: .02em; }
.refs-place { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); text-align: right; }
.refs-thumb { display: none; }
.refs-link:hover .refs-name { transform: translateX(26px); color: var(--bronze-d); }
.refs-link:hover .refs-cat { opacity: 1; transform: none; }
.refs-list:hover .refs-link:not(:hover) .refs-name { color: rgba(20,26,51,.28); }
.refs-float { position: fixed; top: 0; left: 0; width: clamp(260px, 22vw, 360px); aspect-ratio: 4/3; pointer-events: none; z-index: 50; overflow: hidden;
  opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.85); transition: opacity .5s var(--ease), transform .7s var(--ease); clip-path: inset(0 0 0 0); }
.refs-float img { width: 100%; height: 100%; object-fit: cover; }
.refs-float.is-on { opacity: 1; }
.refs-more { margin: clamp(50px, 5vw, 80px) 0 0; }

/* ---------- Matière ---------- */
.matiere { background: var(--nuit); color: rgba(255,255,255,.72); padding: clamp(110px, 14vw, 220px) 0; overflow: hidden; }
.matiere-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.matiere-text p { max-width: 460px; }
.matiere-text .section-title { margin-bottom: 40px; }
.matiere-mosaic { position: relative; height: clamp(560px, 62vw, 900px); }
.mm { position: absolute; overflow: hidden; }
.mm img { width: 100%; height: 100%; object-fit: cover; }
.mm--a { left: 0; top: 12%; width: 52%; aspect-ratio: 4/5; z-index: 1; }
.mm--b { right: 0; top: 0; width: 42%; aspect-ratio: 4/5; }
.mm--c { right: 6%; bottom: 0; width: 36%; aspect-ratio: 4/5; z-index: 2; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.matiere-lead { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.5; color: #fff; font-weight: 300; }
.matiere-mosaic--4 .mm--a { left: 0; top: 4%; width: 46%; }
.matiere-mosaic--4 .mm--b { right: 4%; top: 0; width: 38%; }
.matiere-mosaic--4 .mm--c { left: 10%; right: auto; bottom: 0; width: 34%; }
.mm--d { right: 0; bottom: 8%; width: 44%; aspect-ratio: 4/5; z-index: 2; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }

/* ---------- Métiers ---------- */
.metiers { padding: clamp(110px, 13vw, 210px) 0; background: var(--creme); }
/* Lifestyle puis Références, même fond crème : un seul blanc entre les deux */
.lifestyle + .refs { padding-top: 0; }
.metier { margin: 0; }
.lifestyle-intro { max-width: 620px; color: var(--gris); font-size: 18px; margin: 34px 0 0; }
.metiers-head { margin-bottom: clamp(50px, 6vw, 90px); }
.metiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); }
.metier:nth-child(2) { margin-top: clamp(40px, 6vw, 110px); }
.metier:nth-child(3) { margin-top: clamp(80px, 12vw, 220px); }
.metier-media { aspect-ratio: 4/5; overflow: hidden; margin-bottom: 30px; }
.metier-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.metier:hover .metier-media img { transform: scale(1.06); }
.metier-sig { font-size: 12px; letter-spacing: .5em; text-transform: uppercase; margin-bottom: 12px; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 500; }
.metier h3 { font-size: clamp(22px, 1.9vw, 30px); color: var(--nuit); margin-bottom: 14px; }
.metier p:last-child { color: var(--gris); font-size: 15px; }

/* ---------- Élégance ---------- */
.elegance { position: relative; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; overflow: hidden; background: #0b0e1c; color: #fff; }
.elegance-media { position: relative; align-self: stretch; min-height: 100vh; overflow: hidden; }
.elegance-media picture, .elegance-media img { width: 100%; height: 100%; }
.elegance-media img { object-fit: cover; object-position: 30% 50%; filter: grayscale(1) contrast(1.12) brightness(1.08); }
/* Le mot « Élégance » (tiers gauche, vers 55 % de la hauteur) sort de l'ombre, le reste s'y retire. */
.elegance-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 75% 55% at 38% 52%, rgba(11,14,28,0) 0%, rgba(11,14,28,.08) 55%, rgba(11,14,28,.5) 100%),
  linear-gradient(90deg, rgba(11,14,28,0) 70%, #0b0e1c 100%); }
.elegance-quote { position: relative; z-index: 2; margin: 0; padding: clamp(60px, 8vw, 140px) clamp(24px, 6vw, 110px); }
.elegance-quote p { font-size: clamp(32px, 4.2vw, 72px); font-weight: 300; line-height: 1.08; letter-spacing: .01em; margin-bottom: 36px; }
.elegance-quote footer { font-size: 13px; letter-spacing: .24em; line-height: 1.9; text-transform: uppercase; color: var(--bronze-l); max-width: 520px; }

/* ---------- Journal ---------- */
.journal { padding: clamp(100px, 12vw, 180px) 0; background: var(--creme); }
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.journal-card { display: flex; flex-direction: column; gap: 12px; }
.journal-media { aspect-ratio: 3/2; overflow: hidden; }
.journal-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.journal-card:hover img { transform: scale(1.05); }
.journal-date { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--bronze-ink); margin-top: 8px; }
.journal-title { font-size: 22px; color: var(--nuit); line-height: 1.3; }

/* ---------- Contact ---------- */
.contact { position: relative; background: var(--nuit); color: rgba(255,255,255,.75); padding: clamp(110px, 13vw, 210px) 0; overflow: hidden; }
.contact-bg { position: absolute; inset: 0; opacity: .22; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; }
.contact-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--nuit) 30%, rgba(20,26,51,.4)); }
.contact-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 150px); align-items: start; }
.contact-intro { max-width: 460px; margin: 34px 0 48px; }
.contact-coords { list-style: none; margin: 0; padding: 0; }
.contact-coords li { display: grid; grid-template-columns: 130px 1fr; padding: 16px 0; border-top: 1px solid var(--ligne-l); color: #fff; }
.contact-coords span { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--bronze-l); padding-top: 4px; }
.contact-coords a:hover, .mail-protege:hover { color: var(--bronze-l); }
.contact-form { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.field { position: relative; padding-top: 18px; }
.field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.28); color: #fff; font: inherit; font-size: 17px; padding: 12px 0; outline: none; resize: vertical; transition: border-color .4s; }
.field label { position: absolute; left: 0; top: 30px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); pointer-events: none; transition: .5s var(--ease); }
.field input:focus, .field textarea:focus { border-bottom-color: var(--bronze-l); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { top: 0; font-size: 10px; color: var(--bronze-l); }
.contact-form .btn-solid { align-self: flex-start; margin-top: 30px; }
.hp { position: absolute; left: -9999px; }
.form-status { font-size: 14px; min-height: 1.5em; white-space: pre-line; margin-top: 10px; }
.form-status--ok { color: var(--bronze-l); }
.form-status--error { color: #f0a9a0; }

/* ---------- Pied de page ---------- */
.site-footer { background: #0e1226; color: rgba(255,255,255,.6); padding: 110px 0 44px; position: relative; overflow: hidden; font-size: 15px; }
.footer-monogramme { position: absolute; right: -60px; top: -30px; width: 420px; height: auto; fill: none; stroke: var(--bronze-l); stroke-width: .12; opacity: .12; pointer-events: none; }
@media (max-width: 900px) { .footer-monogramme { width: 260px; right: -70px; top: -10px; } }
.footer-inner { width: var(--wrap); margin-inline: auto; position: relative; }
.footer-logo img { width: 180px; margin-bottom: 80px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-bottom: 70px; border-bottom: 1px solid var(--ligne-l); }
.footer-cols p { margin: 0 0 8px; }
.footer-cols a:hover { color: var(--bronze-l); }
.footer-label { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--bronze-l); margin-bottom: 20px !important; }
/* Réseaux sociaux : pictos carrés, filet bronze, remplis au survol */
.footer-social { list-style: none; padding: 0; margin: 26px 0 0; display: flex; gap: 10px; }
.footer-social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(226,207,196,.35); color: var(--bronze-l); transition: background .4s, color .4s, border-color .4s; }
.footer-social a:hover, .footer-social a:focus-visible { background: var(--bronze-l); border-color: var(--bronze-l); color: #0e1226; }
.footer-social svg { width: 18px; height: 18px; }
.footer-devise { font-style: italic; color: rgba(255,255,255,.8); line-height: 1.6; }
.footer-legal { font-size: 12px; letter-spacing: .06em; margin: 34px 0 0; }
.footer-legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.25); }

/* ---------- Curseur (bureau seulement) ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 500; pointer-events: none; display: none; mix-blend-mode: difference; }
.cursor span { display: block; width: 10px; height: 10px; border-radius: 50%; background: #e2cfc4; transform: translate(-50%, -50%) scale(1); transition: transform .5s var(--ease), width .5s var(--ease), height .5s var(--ease); }
.cursor.is-link span { transform: translate(-50%, -50%) scale(5); background: #fff; }


/* ---------- Apparitions ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); }
.js [data-reveal].visible { opacity: 1; transform: none; }
/* Dévoilement des photos : un rideau de la couleur du fond se retire vers le haut
   pendant que la photo se pose. Tout est en transform/opacity (composité par la
   carte graphique) : l'ancien clip-path forçait à repeindre la photo à chaque image
   et saccadait sur la mosaïque Forêt, où quatre photos bougent en parallaxe.
   site.js n'ajoute .visible qu'une fois l'image chargée et décodée : le rideau ne
   s'ouvre jamais sur un cadre vide. */
.js .clip-reveal { position: relative; overflow: hidden; }
.js .clip-reveal::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--reveal-bg, var(--creme));
  transform-origin: 50% 0; transition: transform 1.3s var(--ease-2); pointer-events: none; }
.js .clip-reveal img { transform: scale(1.12); opacity: 0; transition: transform 2s var(--ease), opacity .9s var(--ease); }
.js .clip-reveal.visible::after { transform: scaleY(0); }
.js .clip-reveal.visible img { transform: none; opacity: 1; }
.matiere, .univers, .ag-methode, .contact { --reveal-bg: var(--nuit); }
.ag-croquis { --reveal-bg: var(--creme-2); }
[data-parallax] { will-change: transform; }
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-w > span { display: inline-block; transform: translateY(105%); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i) * 40ms); }
.visible .split-w > span, .split-done .split-w > span { transform: none; }

/* ---------- Pages intérieures (modules, pages légales) ---------- */
body:not(.home) main { padding-top: calc(var(--header-h) + 60px); }
.section { padding: clamp(40px, 6vw, 90px) 0 clamp(90px, 10vw, 150px); }
body:not(.home) main h1 { font-size: clamp(40px, 6vw, 96px); font-weight: 300; color: var(--nuit); line-height: 1.02; margin-bottom: 30px; }
.legal-page { width: min(860px, 100% - 48px); margin: 0 auto; padding-bottom: 120px; }
.legal-page h2 { font-size: 24px; color: var(--nuit); margin: 50px 0 14px; font-weight: 400; }
.legal-page a { color: var(--bronze-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-back { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 40px; color: var(--bronze-ink) !important; text-decoration: none !important; }
.btn-sm { padding: 12px 22px; }


/* ---------- Page Agence ---------- */
.page-agence main { padding-top: 0 !important; }
.ag-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--nuit); color: #fff; display: flex; align-items: flex-end; }
.ag-hero-bg { position: absolute; inset: -10% 0; }
.ag-hero-bg picture, .ag-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.ag-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,26,51,.35), rgba(20,26,51,.2) 45%, rgba(20,26,51,.9)); }
.ag-hero-content { position: relative; padding-bottom: clamp(70px, 12vh, 140px); }
.page-agence .ag-title { font-size: clamp(48px, 8vw, 132px); font-weight: 300; line-height: .98; color: #fff; margin: 0; }
.ag-nom { text-transform: uppercase; letter-spacing: .06em; }
.ag-accroche { max-width: 640px; margin: 28px 0 0; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55; color: rgba(255,255,255,.88); }
.ag-hero-bg img { object-position: 30% 50%; }
.implantations { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.implantations li { font-size: clamp(18px, 2.35vw, 40px); white-space: nowrap; font-weight: 300; color: var(--nuit); line-height: 1.3; }
.implantations li::after { content: "·"; margin: 0 .45em; color: var(--bronze); }
.implantations li:last-child::after { content: none; }
.ag-pays { font-size: clamp(20px, 1.8vw, 26px) !important; line-height: 1.6; max-width: 620px !important; }
.ag-intro { padding: clamp(100px, 12vw, 190px) 0 clamp(60px, 7vw, 110px); max-width: 1100px; }
.ag-olivier { padding: 0 0 clamp(110px, 13vw, 200px); }
.ag-olivier-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 8vw, 140px); align-items: center; }
.ag-olivier-media { aspect-ratio: 4/5; overflow: hidden; }
.ag-olivier-media { position: relative; }
.ag-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s cubic-bezier(.45,0,.2,1); }
.ag-slide.is-active { opacity: 1; z-index: 1; }
.ag-slide picture, .ag-slide img { width: 100%; height: 100%; object-fit: cover; }
.ag-vignettes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ag-vignette { display: block; width: 100%; aspect-ratio: 4/5; overflow: hidden; position: relative; opacity: .5; transition: opacity .6s var(--ease); }
.ag-vignette img { width: 100%; height: 100%; object-fit: cover; }
.ag-vignette::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--degrade); transform: scaleX(0); transform-origin: left; }
.ag-vignette:hover { opacity: .85; }
.ag-vignette.is-active { opacity: 1; }
.ag-vignette.is-active::after { transform: scaleX(1); transition: transform var(--duree, 5.5s) linear; }
.ag-role { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--bronze-ink); font-weight: 500; margin: 18px 0 40px; }
.ag-olivier-text > p { color: var(--gris); max-width: 560px; }
.ag-devise { margin: 50px 0 0; padding-left: 28px; border-left: 1px solid var(--bronze); font-size: clamp(20px, 1.7vw, 26px); font-style: italic; color: var(--nuit); font-weight: 300; line-height: 1.4; }
.ag-devise span { display: block; font-style: normal; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--bronze-ink); margin-top: 14px; font-weight: 500; }
.ag-methode { background: var(--nuit); color: rgba(255,255,255,.72); padding: clamp(110px, 13vw, 200px) 0; }
.etapes { list-style: none; padding: 0; margin: clamp(60px, 7vw, 110px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); }
.etape { border-top: 1px solid var(--ligne-l); padding-top: 30px; }
.etape-num { font-size: 12px; letter-spacing: .2em; color: var(--bronze-l); }
.etape h3 { color: #fff; font-size: clamp(22px, 1.9vw, 30px); margin: 22px 0 16px; }
.etape p { font-size: 15px; margin: 0; }
.ag-croquis { background: var(--creme-2); padding: clamp(110px, 13vw, 200px) 0; }
.ag-croquis-grid { display: grid; grid-template-columns: 5fr 4fr; gap: clamp(24px, 4vw, 70px); align-items: end; }
.ag-croquis-media { margin: 0; background: #fff; padding: clamp(14px, 2vw, 30px); box-shadow: 0 30px 70px -45px rgba(20,26,51,.4); }
.ag-croquis-media img { mix-blend-mode: multiply; width: 100%; }
.ag-croquis-media--b { padding: 0; aspect-ratio: 4/5; overflow: hidden; margin-bottom: -100px; }
.ag-croquis-media--b picture, .ag-croquis-media--b img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.ag-croquis-legende { margin-top: 50px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.ag-chiffres { padding: clamp(110px, 13vw, 200px) 0 clamp(70px, 8vw, 120px); }
.ag-chiffres .chiffres { margin-top: 0; }
.ag-territoire { position: relative; min-height: 90vh; display: flex; align-items: center; overflow: hidden; color: rgba(255,255,255,.85); }
.ag-territoire-bg { position: absolute; inset: -12% 0; }
.ag-territoire-bg picture, .ag-territoire-bg img { width: 100%; height: 100%; object-fit: cover; }
.ag-territoire::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,26,51,.88) 20%, rgba(20,26,51,.25)); }
.ag-territoire-content { position: relative; z-index: 2; }
.ag-territoire-content p { max-width: 520px; margin-top: 34px; font-size: 18px; }
.ag-clients { padding: clamp(110px, 13vw, 200px) 0; }
.mur-clients { list-style: none; padding: 0; margin: 30px 0 70px; display: flex; flex-wrap: wrap; gap: 6px 0; }
.mur-clients li { font-size: clamp(22px, 2.6vw, 42px); font-weight: 300; color: var(--nuit); line-height: 1.35; transition: color .5s; }
.mur-clients li::after { content: "·"; margin: 0 .5em; color: var(--bronze); }
.mur-clients li:last-child::after { content: none; }
.mur-clients:hover li { color: rgba(20,26,51,.3); }
.mur-clients li:hover { color: var(--bronze-d); }
.mur-clients a { display: inline-block; transition: color .5s; }
.mur-clients a:focus-visible { color: var(--bronze-d); }
/* « Et bien d'autres » : les références sans fiche, reprises du site précédent */
.autres-refs { margin: 0 0 70px; }
.autres-refs-liste { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); line-height: 1.8; }
.autres-refs-liste li::after { content: "·"; margin: 0 .9em; color: var(--bronze); }
.autres-refs-liste li:last-child::after { content: none; }
@media (max-width: 900px) {
  .ag-olivier-grid, .ag-croquis-grid { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: 1fr 1fr; }
  .ag-croquis-media--b { margin-bottom: 0; max-width: 70%; margin-left: auto; }
}
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr; } }


/* ---------- Fenêtre de contact ---------- */
.cmodal { position: fixed; inset: 0; z-index: 350; }
.cmodal[hidden] { display: none; }
.cmodal-fond { position: absolute; inset: 0; background: rgba(8, 10, 22, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .6s var(--ease); }
.cmodal-panneau { position: absolute; top: 0; right: 0; bottom: 0; width: min(980px, 100%); background: var(--nuit); color: rgba(255,255,255,.75);
  overflow-y: auto; padding: clamp(70px, 9vh, 110px) clamp(24px, 5vw, 80px) 60px; transform: translateX(100%); transition: transform .8s var(--ease-2); }
.cmodal-panneau::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--degrade); }
.cmodal.is-open .cmodal-fond { opacity: 1; }
.cmodal.is-open .cmodal-panneau { transform: none; }
.cmodal-grille { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 5vw, 70px); }
.cmodal-titre { font-size: clamp(34px, 3.6vw, 56px); font-weight: 300; color: #fff; line-height: 1.05; margin-bottom: 40px; }
.cmodal-fermer { position: absolute; top: 26px; right: 26px; width: 48px; height: 48px; }
.cmodal-fermer span { position: absolute; left: 12px; right: 12px; top: 23px; height: 1px; background: #fff; transform: rotate(45deg); transition: transform .5s var(--ease); }
.cmodal-fermer span:last-child { transform: rotate(-45deg); }
.cmodal-fermer:hover span { transform: rotate(135deg); }
.cmodal-fermer:hover span:last-child { transform: rotate(45deg); }
.cmodal .contact-coords li { grid-template-columns: 1fr; gap: 4px; }
body.cmodal-ouverte { overflow: hidden; }
@media (max-width: 900px) { .cmodal-grille { grid-template-columns: 1fr; } .cmodal-texte .contact-coords { display: none; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
  .intro { display: none; }
  .hero-logo, .intro-logo, .reveal-line > span, .split-w > span { opacity: 1 !important; transform: none !important; }
  .js [data-reveal], .js .clip-reveal img { opacity: 1; transform: none; }
  .js .clip-reveal::after { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav-menu { gap: 26px; }
  .metiers-grid { grid-template-columns: 1fr 1fr; }
  .metier:nth-child(3) { margin-top: 0; }
}
@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .brand-logo { width: 118px; }
  .nav { gap: 18px; }
  .nav-toggle { display: block; z-index: 2; }
  .nav-lang { z-index: 2; }
  .nav-menu {
    position: fixed; inset: 0; background: var(--nuit); flex-direction: column; justify-content: center; padding: 0 32px; gap: 8px;
    clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-2); z-index: 1;
  }
  .nav.open .nav-menu { clip-path: inset(0 0 0 0); }
  .nav-menu a { font-size: clamp(34px, 9vw, 54px); line-height: 1.2; letter-spacing: .02em; text-transform: none; font-weight: 400; }
  .nav-menu li { overflow: hidden; }
  .nav-menu a span { transform: translateY(110%); transition: transform .9s var(--ease); }
  .nav.open .nav-menu li:nth-child(2) a span { transition-delay: .06s; }
  .nav.open .nav-menu li:nth-child(3) a span { transition-delay: .12s; }
  .nav.open .nav-menu li:nth-child(4) a span { transition-delay: .18s; }
  .nav.open .nav-menu li:nth-child(5) a span { transition-delay: .24s; }
  .nav.open .nav-menu a span { transform: none; }
  body.nav-open { overflow: hidden; }
  /* Le flou et la translation de l'en-tête font de lui le cadre du menu
     « fixed » : sans cette neutralisation, le menu ouvert tient dans les 72 px
     de l'en-tête dès qu'on a défilé. */
  body.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; background: var(--nuit); }
  .brand { position: relative; z-index: 2; }
  .manifeste-grid, .matiere-grid, .contact-grid { grid-template-columns: 1fr; }
  .manifeste-media { max-width: 420px; }
  .chiffres { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .univers-grid { grid-template-columns: 1fr; gap: 56px; }
  .univers-card:nth-child(2) { margin-top: 0; }
  .process-sticky { position: relative; height: auto; padding: 110px 0 90px; }
  .process-head { flex-direction: column; align-items: flex-start; }
  .process-progress { flex-basis: auto; width: 160px; }
  .process-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; scrollbar-width: none; transform: none !important; }
  .process-track::-webkit-scrollbar { display: none; }
  .process-card { flex-basis: 80vw; scroll-snap-align: center; }
  .process { height: auto !important; }
  .chiffres--3 { grid-template-columns: 1fr; }
  .elegance { grid-template-columns: 1fr; min-height: 0; }
  .elegance-media { min-height: 0; aspect-ratio: 4/5; }
  .elegance-media::after { background: radial-gradient(ellipse 80% 55% at 38% 52%, rgba(11,14,28,0) 0%, rgba(11,14,28,.08) 55%, rgba(11,14,28,.5) 100%), linear-gradient(180deg, rgba(11,14,28,0) 75%, #0b0e1c 100%); }
  .elegance-quote { text-align: left; padding-top: 30px; }
  .refs-link { grid-template-columns: 44px 1fr; }
  .refs-place { grid-column: 2; text-align: left; }
  .refs-cat { display: none; }
  .refs-thumb { display: block; grid-column: 1 / -1; aspect-ratio: 16/9; overflow: hidden; margin-top: 16px; }
  .refs-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .refs-float { display: none; }
  .matiere-mosaic { height: 150vw; margin-top: 30px; }
  .mm--a { width: 60%; top: 14%; }
  .mm--b { width: 46%; }
  .mm--c { width: 48%; right: 0; }
  .matiere-mosaic--4 { height: 190vw; }
  .matiere-mosaic--4 .mm--a { width: 58%; top: 0; }
  .matiere-mosaic--4 .mm--b { width: 46%; top: 12%; right: 0; }
  .matiere-mosaic--4 .mm--c { width: 46%; left: 0; bottom: 18%; }
  .matiere-mosaic--4 .mm--d { width: 52%; bottom: 0; }
  .journal-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .hero-counter { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .metiers-grid { grid-template-columns: 1fr; }
  .metier:nth-child(2) { margin-top: 0; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-coords li { grid-template-columns: 1fr; gap: 4px; }
  .hero-logo { width: 90vw; }
}

/* Agence : Olivier est en bas à gauche de la photo, sa tête vers 30 % de la largeur.
   Le titre tient dans la moitié droite (plus sur toute la largeur) pour ne jamais
   la couvrir ; sur mobile, où la photo est recadrée serrée, il monte en haut. */
@media (min-width: 901px) {
  .ag-hero-content { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .ag-hero-content > * { max-width: 44vw; }
  .page-agence .ag-title { font-size: clamp(48px, 6.4vw, 112px); }
  .ag-accroche { max-width: min(520px, 44vw); }
}
/* Mobile : la photo est recadrée en hauteur ; on cale le cadrage à droite de
   l'image pour qu'Olivier passe au premier tiers GAUCHE de l'écran. */
@media (max-width: 820px) { .ag-hero-bg img { object-position: 100% 50%; } }
@media (max-width: 900px) {
  .ag-hero { align-items: flex-start; }
  .ag-hero-content { padding: clamp(110px, 16vh, 150px) 0 0; }
  .ag-hero-veil { background: linear-gradient(180deg, rgba(20,26,51,.85), rgba(20,26,51,.35) 45%, rgba(20,26,51,.15) 70%, rgba(20,26,51,.5)); }
}

/* ---------- Agence : lightbox du portrait d'Olivier ---------- */
.ag-olivier-media[role="button"] { cursor: zoom-in; }
.ag-olivier-media[role="button"]:focus-visible { outline-offset: 6px; }
.ag-lb { position: fixed; inset: 0; z-index: 360; background: rgba(11, 14, 28, .97); opacity: 0; transition: opacity .5s var(--ease); }
.ag-lb[hidden] { display: none; }
.ag-lb.is-open { opacity: 1; }
.ag-lb-scene { position: absolute; inset: clamp(56px, 8vh, 90px) clamp(16px, 8vw, 130px); cursor: zoom-out; }
.ag-lb-vue { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(.985); transition: opacity 1s var(--ease), transform 1.4s var(--ease); pointer-events: none; }
.ag-lb-vue.is-active { opacity: 1; transform: none; }
/* L'image occupe toute la scène et s'y inscrit (contain) : une photo verticale tient
   en hauteur, une horizontale en largeur, rien n'est jamais coupé. (Un max-height
   en % dans une grille à ligne automatique ne se résout pas : c'est ce qui coupait
   les portraits.) */
.ag-lb-vue picture, .ag-lb-vue img { width: 100%; height: 100%; }
.ag-lb-vue img { object-fit: contain; }
.ag-lb-btn { position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; z-index: 2; color: #fff; opacity: .7; transition: opacity .4s; }
.ag-lb-btn:hover { opacity: 1; }
.ag-lb-btn i { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-top: 1px solid; border-left: 1px solid; }
.ag-lb-prec { left: clamp(4px, 2vw, 40px); }
.ag-lb-prec i { transform: translate(-30%, -50%) rotate(-45deg); }
.ag-lb-suiv { right: clamp(4px, 2vw, 40px); }
.ag-lb-suiv i { transform: translate(-70%, -50%) rotate(135deg); }
.ag-lb-fermer { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; z-index: 2; }
.ag-lb-fermer span { position: absolute; left: 12px; right: 12px; top: 23px; height: 1px; background: #fff; transform: rotate(45deg); transition: transform .5s var(--ease); }
.ag-lb-fermer span:last-child { transform: rotate(-45deg); }
.ag-lb-fermer:hover span { transform: rotate(135deg); }
.ag-lb-fermer:hover span:last-child { transform: rotate(45deg); }
.ag-lb-legende { position: absolute; left: 0; right: 0; bottom: calc(clamp(16px, 3vh, 34px) + 26px); margin: 0 auto; max-width: 760px; padding: 0 20px; text-align: center; font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.72); }
.ag-lb-legende[hidden] { display: none; }
img.zoomable { cursor: zoom-in; }
.ag-lb-compteur { position: absolute; left: 0; right: 0; bottom: clamp(16px, 3vh, 34px); margin: 0; text-align: center; font-size: 11px; letter-spacing: .3em; color: var(--bronze-l); }

/* Agence : la photo d'ouverture sort du bleu (site.js pose .is-loaded une fois décodée). */
.js .ag-hero-bg img { opacity: 0; transform: scale(1.04); transition: opacity 1.8s cubic-bezier(.45,0,.2,1), transform 2.6s var(--ease); }
.js .ag-hero-bg img.is-loaded { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .ag-hero-bg img { opacity: 1; transform: none; } }


/* ==========================================================================
   Socle des modules Blog et Réalisations.
   --------------------------------------------------------------------------
   CE FICHIER N'EST PAS COPIÉ TEL QUEL : gen-site.js l'AJOUTE à la feuille finale,
   APRÈS l'éventuelle feuille propre au client.

   Pourquoi : un site à charte sur mesure remplace css/style.css par la sienne.
   Tant que ce socle vivait dedans, il disparaissait avec — les pages des modules
   se retrouvaient sans mise en page, et seules subsistaient les retouches du
   client, qui ajustaient des règles absentes. Le sortir d'ici garantit que le
   fonctionnement visuel des modules survit à n'importe quelle charte.

   Ordre d'assemblage : style.css du client · CE SOCLE · template/css/modules.css
   ========================================================================== */

/* ============================ BLOG ============================ */
.blog-list h1, .blog-article h1 { margin-bottom: .5rem; }
.blog-list__intro { color: var(--c-muted); margin-bottom: 2rem; }
.blog-fil { font-size: .85rem; color: var(--c-muted); margin-bottom: 1.2rem; }

.blog-themes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.blog-theme {
  padding: .38rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
  border: 1px solid rgba(0,0,0,.12); color: var(--c-muted); text-decoration: none; transition: .18s ease;
}
.blog-theme:hover { border-color: var(--c-accent); color: var(--c-text); }
.blog-theme.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.blog-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.blog-card { flex: 0 0 calc((100% - 3rem) / 3); min-width: 260px; }
.blog-card__link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card__link:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.09); border-color: var(--c-accent); }
.blog-card__cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(0,0,0,.04); }
/* <picture> est en ligne par défaut : sans ce display:block, il ne remplit pas le
   cadre, l'image garde ses proportions naturelles et laisse une bande grise. */
.blog-card__cover picture { display: block; width: 100%; height: 100%; }
.blog-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem; flex: 1; }
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .82rem; color: var(--c-muted); }
.blog-card__cat {
  padding: .18rem .6rem; border-radius: 999px; font-weight: 600; font-size: .74rem;
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  background: var(--c-accent-soft, rgba(0,0,0,.05)); color: var(--c-accent-ink, inherit);
}
.blog-card__title { font-family: var(--f-head, inherit); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.blog-card__chapo { color: var(--c-muted); font-size: .95rem; flex: 1; }
.blog-card__more { font-weight: 600; font-size: .9rem; color: var(--c-accent-ink, var(--c-primary)); }

/* Article */
.blog-article .container { max-width: 46rem; }
.blog-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .85rem; color: var(--c-muted); margin-bottom: .7rem; }
/* « Mis à jour le » : la correction se dit, elle ne se crie pas. Elle passe
   après la date de parution et en retrait, pour informer sans laisser croire
   que l'article a été refait. */
.blog-article__maj { font-style: italic; opacity: .8; }
.blog-article__chapo { font-size: 1.12rem; line-height: 1.6; color: var(--c-muted); margin-bottom: 2rem; }
.blog-article__cover { display: block; margin: 0 0 2.2rem; }
.blog-article__cover img { width: 100%; height: auto; border-radius: 12px; }

.blog-sommaire { margin: 0 0 1.6rem; padding: 1.1rem 1.4rem; background: rgba(0,0,0,.03); border-radius: 10px; }
.blog-sommaire p { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--c-muted); margin-bottom: .5rem; }
.blog-sommaire ul { list-style: none; padding: 0; margin: 0; }
.blog-sommaire li + li { margin-top: .3rem; }

.blog-article__corps > * + * { margin-top: 1.15rem; }
.blog-article__corps h2 { font-size: 1.4rem; margin-top: 2.4rem; scroll-margin-top: 5rem; }
.blog-article__corps h3 { font-size: 1.12rem; margin-top: 1.8rem; }
.blog-article__corps ul { padding-left: 1.2rem; }
.blog-article__corps li + li { margin-top: .4rem; }
.blog-article__corps blockquote {
  margin: 2rem 0; padding: 1.1rem 1.4rem; border-left: 3px solid var(--c-accent);
  background: rgba(0,0,0,.03); border-radius: 0 8px 8px 0;
}
.blog-article__corps blockquote p { margin: 0; font-style: italic; }
.blog-article__corps blockquote cite { display: block; margin-top: .6rem; font-size: .88rem; font-style: normal; color: var(--c-muted); }
.blog-figure { margin: 2rem 0; }
.blog-figure img { width: 100%; height: auto; border-radius: 10px; display: block; }
.blog-figure figcaption { margin-top: .5rem; font-size: .86rem; color: var(--c-muted); }
.blog-cta { margin: 2.4rem 0; padding: 1.6rem; background: var(--c-primary); color: #fff; border-radius: 12px; text-align: center; }
.blog-cta p { margin-bottom: 1rem; font-size: 1.05rem; }

.blog-faq { margin-top: 3rem; }
.blog-faq h2 { scroll-margin-top: 5rem; }
.blog-faq__item { border-bottom: 1px solid rgba(0,0,0,.08); padding: 1rem 0; }
.blog-faq__item summary { cursor: pointer; font-weight: 600; list-style: none; }
.blog-faq__item summary::-webkit-details-marker { display: none; }
.blog-faq__item summary::after { content: "+"; float: right; color: var(--c-muted); }
.blog-faq__item[open] summary::after { content: "–"; }
.blog-faq__item > div { margin-top: .7rem; color: var(--c-muted); }

.blog-article__retour { display: inline-block; margin-top: 3rem; font-weight: 600; }

@media (max-width: 980px) { .blog-card { flex: 0 0 calc((100% - 1.5rem) / 2); } }
@media (max-width: 620px) { .blog-card { flex: 0 0 100%; } }
.blog-home__tous { margin-top: 2.2rem; text-align: center; }

/* Article : colonne de lecture + colonne latérale (sommaire puis partage) */
.blog-article .container { max-width: 68rem; }
.blog-article__grille { display: block; }
.blog-article__lecture { max-width: 46rem; margin: 0 auto; }
/* L'en-tête vit DANS la colonne de lecture : hors d'elle, il resterait centré
   sur la page pendant que le texte est décalé par le sommaire, et les deux ne
   s'aligneraient pas. */

.blog-partage { padding: 1.1rem 1.4rem; background: rgba(0,0,0,.03); border-radius: 10px; }
.blog-partage__titre { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); margin-bottom: .7rem; }
.blog-partage__liens { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-partage__liens > * {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; cursor: pointer;
  color: var(--c-muted); transition: .18s ease; padding: 0;
}
.blog-partage__liens > *:hover { border-color: var(--c-accent); color: var(--c-primary); transform: translateY(-2px); }
.blog-partage__liens svg { width: 17px; height: 17px; fill: currentColor; }
.blog-partage__copie.copie { border-color: var(--c-accent); color: var(--c-primary); }
.blog-partage__copie.copie::after {
  content: "Lien copié"; position: absolute; margin-top: -3.2rem; padding: .3rem .6rem;
  font-size: .78rem; white-space: nowrap; background: var(--c-primary); color: #fff; border-radius: 6px;
}

@media (min-width: 1080px) {
  .blog-article__grille { display: grid; grid-template-columns: 15rem minmax(0, 46rem); gap: 3rem; justify-content: center; align-items: start; }
  .blog-article__lecture { margin: 0; max-width: none; }
  .blog-cote { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1rem; }
  .blog-cote .blog-sommaire { margin: 0; background: transparent; border-left: 2px solid rgba(0,0,0,.12); border-radius: 0; padding: .2rem 0 .2rem 1.1rem; }
  .blog-cote .blog-partage { background: transparent; padding: .2rem 0 .2rem 1.1rem; border-left: 2px solid rgba(0,0,0,.12); }
  /* Sans sommaire, la colonne n'a qu'un bloc : on la garde alignée en haut. */
  .blog-cote[data-sans-sommaire] { padding-top: .2rem; }
}

/* ============================ PORTFOLIO ============================ */
/* Grille et non flex : avec des bases en calc((100% - 2 × écart) / 3), changer
   l'écart depuis la feuille d'un client faisait retomber la grille à deux
   colonnes sans que rien ne le signale. */
.projets-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
.projets-grille--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Texte SEO des pages d'accueil blog / portfolio / guide (réglé dans le manager). */
.hub-texte-seo { max-width: 70ch; margin: 3rem 0 0; line-height: 1.7; }
.hub-texte-seo p { margin: 0 0 1rem; }
.hub-texte-seo ul, .hub-texte-seo ol { margin: 0 0 1rem 1.2rem; }
/* Page d'une catégorie : accroche sous le titre, texte SEO sous la grille (réglés dans le manager). */
.projets-categorie__accroche { max-width: 70ch; margin: -.4rem 0 1.8rem; color: var(--c-muted); font-size: 1.05rem; line-height: 1.6; }
.projets-categorie__texte { max-width: 70ch; margin: 3rem 0 0; line-height: 1.7; }
.projets-categorie__texte p { margin: 0 0 1rem; }
.projets-categorie__texte ul, .projets-categorie__texte ol { margin: 0 0 1rem 1.2rem; }
.projet-carte { min-width: 0; }
.projet-carte__lien {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: 12px; color: inherit; text-decoration: none; transition: .2s ease;
}
.projet-carte__lien:hover { transform: translateY(-3px); }
.projet-carte__image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(0,0,0,.05); border-radius: 12px; }
.projet-carte__image picture { display: block; width: 100%; height: 100%; }
.projet-carte__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.projet-carte__lien:hover .projet-carte__image img { transform: scale(1.04); }
.projet-carte__corps { display: flex; flex-direction: column; gap: .35rem; padding: 1rem .2rem 0; }
.projet-carte__cat {
  align-self: flex-start; padding: .18rem .6rem; border-radius: 999px; text-decoration: none;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  background: var(--c-accent-soft, rgba(0,0,0,.05)); color: var(--c-accent-ink, inherit);
}
.projet-carte__titre { font-family: var(--f-head, inherit); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.projet-carte__chapo { color: var(--c-muted); font-size: .95rem; }

/* Fiche projet */
.projet .container { max-width: 68rem; }
.projet__hero { display: block; margin-bottom: 2.4rem; }
.projet__hero img { width: 100%; height: auto; border-radius: 12px; }
.projet__grille { display: block; }
.projet__chapo { font-size: 1.12rem; line-height: 1.6; color: var(--c-muted); margin-bottom: 1.6rem; }
.projet__descriptif > * + * { margin-top: 1.15rem; }
.projet__descriptif h2 { font-size: 1.35rem; margin-top: 2rem; }
.projet__descriptif ul, .projet__descriptif ol { padding-left: 1.2rem; }

.projet-fiche { margin: 0 0 1.6rem; }
.projet-fiche__ligne { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .7rem 0; border-top: 1px solid rgba(0,0,0,.08); }
.projet-fiche__ligne:first-child { border-top: none; }
.projet-fiche dt { flex: 0 0 100%; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.projet-fiche dd { font-size: .98rem; }

.projet-galerie { display: flex; flex-wrap: wrap; gap: 1rem; margin: 3rem 0 0; }
.projet-galerie__item { flex: 0 0 calc((100% - 2rem) / 3); min-width: 240px; margin: 0; }
/* Toutes les vignettes au même format : une grille de photos aux hauteurs
   différentes se lit comme un désordre, alors que le travail montré ne l'est pas.
   La photo entière, non recadrée, est servie à l'agrandissement. */
.projet-galerie__voir {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 10px; overflow: hidden;
}
.projet-galerie__voir picture { display: block; width: 100%; }
.projet-galerie__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s ease; }
.projet-galerie__voir:hover img { transform: scale(1.04); }
.projet-galerie__item figcaption { margin-top: .4rem; font-size: .84rem; color: var(--c-muted); }

@media (min-width: 1080px) {
  .projet__grille { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; align-items: start; }
  .projet__cote { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.2rem; }
}
@media (max-width: 980px) {
  .projets-grille, .projets-grille--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projet-galerie__item { flex: 0 0 calc((100% - 1rem) / 2); }
}
@media (max-width: 620px) {
  .projets-grille, .projets-grille--home { grid-template-columns: 1fr; }
  .projet-galerie__item { flex: 0 0 100%; }
}

/* Agrandissement d'une photo de galerie */
.lightbox {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.5rem; background: rgba(15,15,15,.94);
}
.lightbox[hidden] { display: none; }
.lightbox__cadre { margin: 0; max-width: min(92vw, 1400px); max-height: 88vh; display: flex; flex-direction: column; gap: .8rem; }
.lightbox__cadre img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; display: block; margin: 0 auto; }
.lightbox__cadre figcaption { color: rgba(255,255,255,.8); font-size: .9rem; text-align: center; }
.lightbox__cadre figcaption[hidden] { display: none; }
.lightbox__nav, .lightbox__fermer {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); color: #fff; border: 0; cursor: pointer; transition: background .18s ease;
}
.lightbox__nav { width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; line-height: 1; }
.lightbox__nav:hover, .lightbox__fermer:hover { background: rgba(255,255,255,.22); }
.lightbox__fermer { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; border-radius: 50%; font-size: 1.7rem; line-height: 1; }
.lightbox__compteur { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.65); font-size: .85rem; }
@media (max-width: 720px) {
  .lightbox { padding: .8rem; gap: .4rem; }
  .lightbox__nav { width: 40px; height: 40px; font-size: 1.6rem; }
  .lightbox__cadre img { max-height: 70vh; }
}

/* Lien de carte projet : présent dans le flux, pas seulement au survol. */
.projet-carte__more { font-weight: 600; font-size: .9rem; color: var(--c-accent-ink, var(--c-primary)); }

/* Message affiché quand un filtre ne laisse rien. */
.filtre-vide { margin-top: 2rem; text-align: center; color: var(--c-muted); }

/* ===================== MODULE GUIDE (partenaires par rubrique) ===================== */
/* Socle neutre : structure et rythme. La charte du site (couleurs, polices)
   s'applique par les variables et par template/css/modules.css du client. */
.guide-hub__intro{max-width:70ch;margin:0 auto 2.5rem;text-align:center;}
.guide-hub__surtitre{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin:0 0 .5rem;}
.guide-hub__texte{opacity:.85;margin:.75rem 0 0;}
.guide-section__titre{text-align:center;margin:0 0 1.75rem;}
.guide-rubriques{display:grid;gap:2rem 2.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.guide-rubrique{display:flex;flex-direction:column;gap:.9rem;}
.guide-rubrique__photo{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r,8px);background:rgba(0,0,0,.05);}
.guide-rubrique__photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.guide-rubrique:hover .guide-rubrique__photo img{transform:scale(1.05);}
.guide-rubrique__titre{margin:0;font-size:1.3rem;}
.guide-rubrique__titre a{text-decoration:none;color:inherit;}
.guide-rubrique__texte{margin:0;opacity:.85;}
.guide-rubrique__plus{margin-top:auto;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;}
.guide-rubrique-page__intro{max-width:70ch;margin:0 auto;}
.grille-partenaires{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));}
.partenaire{display:flex;flex-direction:column;gap:.45rem;padding:1.5rem;border-radius:var(--r,8px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);background:#fff;}
.partenaire__photo{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:calc(var(--r,8px) - 2px);margin:-.5rem -.5rem .5rem;}
.partenaire__photo img{width:100%;height:100%;object-fit:cover;}
.partenaire__nom{font-size:1.15rem;margin:0;}
.partenaire__activite{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin:0;}
.partenaire__texte{font-size:.92rem;margin:.2rem 0 0;}
.partenaire__ligne{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;line-height:1.55;opacity:.85;margin:0;}
.partenaire__ligne svg{width:15px;height:15px;flex:none;margin-top:.32em;}
.partenaire__liens{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.7rem;padding-top:.9rem;border-top:1px solid rgba(0,0,0,.08);}
.partenaire__liens a{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;}
.guide-carte{height:clamp(330px,50vh,500px);border-radius:var(--r,8px);overflow:hidden;z-index:0;margin:0 0 2rem;background:rgba(0,0,0,.05);}
.guide-carte .leaflet-container{font-family:inherit;}
.guide-carte__activite{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;opacity:.75;}
@media (max-width:720px){.guide-carte{height:300px;}}


/* ---- Retouches propres au client (template/css/modules.css) ---- */
/* Modules (Références, Journal) habillés à la charte Chadebost.
   Le socle partagé lit ces variables : on les branche sur la palette. */
:root {
  --c-primary: #141a33;
  --c-accent: #a87c68;
  --c-accent-ink: #85594a;
  --c-accent-soft: rgba(168, 124, 104, .1);
  --c-text: #24262f;
  --c-muted: #5f606a;
  --f-head: "Kontora", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Fil d'Ariane, filtres ---------- */
.blog-fil { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 40px; }
.blog-fil a:hover { color: var(--c-accent-ink); }
.blog-themes { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 10px 0 70px; padding-bottom: 22px; border-bottom: 1px solid rgba(20,26,51,.14); }
.blog-theme { border: 0 !important; border-radius: 0 !important; padding: 6px 0 !important; background: none !important; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--c-muted) !important; position: relative; }
.blog-theme::after { content: ""; position: absolute; left: 0; right: 0; bottom: -23px; height: 1px; background: linear-gradient(90deg,#9e725d,#e2cfc4); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.22,.61,.12,1); }
.blog-theme:hover, .blog-theme.is-active { color: #141a33 !important; }
.blog-theme.is-active::after { transform: scaleX(1); }
/* Écrans étroits : les onglets passent sur plusieurs lignes, et un trait posé sur
   le filet de la barre (23 px plus bas) flottait entre deux rangées. Il se colle
   alors sous son libellé. */
@media (max-width: 1024px) {
  .blog-themes { gap: 14px 26px; }
  .blog-theme::after { bottom: 0; }
}

/* ---------- Page Références ---------- */
.projets-liste__intro { max-width: 900px; margin-bottom: 30px; }
.projets-liste__surtitre { font-size: 12px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--c-accent-ink); display: inline-flex; gap: 16px; align-items: center; }
.projets-liste__surtitre::before { content: ""; width: 42px; height: 1px; background: linear-gradient(90deg,#9e725d,#e2cfc4); }
.projets-liste__texte { color: var(--c-muted); max-width: 620px; font-size: 18px; }
.projets-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px 40px; }
.projets-grille .projet-carte:nth-child(3n+2) { transform: translateY(80px); }
.projets-grille { padding-bottom: 80px; }
.projet-carte__lien { display: block; border: 0 !important; box-shadow: none !important; background: none !important; border-radius: 0 !important; transform: none !important; }
.projet-carte__image { display: block; aspect-ratio: 4/5; overflow: hidden; border-radius: 0 !important; position: relative; }
.projet-carte__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.22,.61,.12,1), filter 1s; filter: saturate(.9); }
.projet-carte__image::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0); transition: inset .8s cubic-bezier(.22,.61,.12,1), border-color .8s; }
.projet-carte__lien:hover .projet-carte__image img { transform: scale(1.07); filter: none; }
.projet-carte__lien:hover .projet-carte__image::after { inset: 14px; border-color: rgba(255,255,255,.75); }
.projet-carte__corps { padding: 22px 0 0 !important; display: flex; flex-direction: column; gap: 6px; }
.projet-carte__cat { background: none !important; padding: 0 !important; border-radius: 0 !important; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--c-accent-ink) !important; }
.projet-carte__titre { font-weight: 300 !important; font-size: clamp(20px, 1.6vw, 26px) !important; color: #141a33; text-transform: uppercase; letter-spacing: .03em; }
.projet-carte__more { display: none; }
.hub-texte-seo { max-width: 760px; margin-top: 120px; color: var(--c-muted); }

/* ---------- Fiche projet ---------- */
.projet .projet__entete { margin-bottom: 50px; }
.projet .projet__entete h1 { text-transform: uppercase; letter-spacing: .02em; }
.projet .container { max-width: none; width: min(1200px, 100% - clamp(40px, 8vw, 160px)); }
.projet-galerie-zone .container { width: var(--wrap); }
.projet__hero { width: 100vw; max-width: none !important; margin-left: calc(50% - 50vw); margin-bottom: 90px !important; aspect-ratio: 16/8; overflow: hidden; }
.projet__hero img { width: 100%; height: 100% !important; object-fit: cover; border-radius: 0 !important; }
.projet__grille { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(40px, 8vw, 140px); }
.projet__chapo { font-size: clamp(22px, 2vw, 30px) !important; font-weight: 300; line-height: 1.35 !important; color: #141a33 !important; }
.projet__descriptif { color: var(--c-muted); }
.projet-fiche__ligne { border-top: 1px solid rgba(20,26,51,.14) !important; padding: 16px 0 !important; }
.projet-fiche__ligne:first-child { border-top: 1px solid rgba(20,26,51,.14) !important; }
.projet-fiche dt { font-weight: 500 !important; font-size: 10px !important; letter-spacing: .28em !important; color: var(--c-accent-ink) !important; }
.projet-fiche dd { margin: 0; color: #141a33; }
.projet-galerie-zone { margin-top: 110px; }
/* Vignettes de proportion égale (3:2), photo recadrée dans le cadre : la grille
   reste régulière quel que soit le format d'origine. La photo entière se voit
   dans la lightbox. */
.projet-galerie { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; columns: auto; }
.projet-galerie__item { width: 100%; min-width: 0 !important; margin: 0 !important; aspect-ratio: 3/2; overflow: hidden; }
.projet-galerie__voir { display: block; width: 100%; height: 100%; padding: 0; }
.projet-galerie__voir picture { display: block; width: 100%; height: 100%; }
.projet-galerie__item img { aspect-ratio: auto !important; width: 100%; height: 100% !important; object-fit: cover; }
@media (max-width: 900px) { .projet-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .projet-galerie { grid-template-columns: 1fr; } }
.projet-galerie__item, .projet-galerie__voir, .projet-galerie img { border-radius: 0 !important; }
.projet-galerie img { transition: transform 1.4s cubic-bezier(.22,.61,.12,1); }
.projet-galerie__voir:hover img { transform: scale(1.04); }
.blog-article__retour { display: inline-flex; margin-top: 90px; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: #141a33; border-bottom: 1px solid; padding-bottom: 4px; }
.lightbox { background: rgba(14,18,38,.97) !important; }
.blog-partage__liens > * { border-radius: 0 !important; }

/* ---------- Journal ---------- */
.blog-card__link { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; transform: none !important; }
.blog-card__cover, .blog-card__cover img, .blog-article__cover img { border-radius: 0 !important; }
.blog-card__title, .blog-article h1 { font-weight: 300 !important; }
.blog-card__cat { background: none !important; padding: 0 !important; letter-spacing: .24em; text-transform: uppercase; font-size: 10px; }
.blog-article__corps { font-size: 18px; }
.blog-article__corps h2 { font-weight: 300; font-size: 32px; color: #141a33; margin: 60px 0 20px; }
.blog-cta { border-radius: 0 !important; background: #141a33 !important; }

@media (max-width: 900px) {
  .projets-grille { grid-template-columns: 1fr 1fr; gap: 50px 20px; }
  .projets-grille .projet-carte:nth-child(3n+2) { transform: none; }
  .projets-grille .projet-carte:nth-child(2n) { transform: translateY(50px); }
  .projet__grille { grid-template-columns: 1fr; }
  .projet__hero { aspect-ratio: 4/3; }
}
@media (max-width: 560px) {
  .projets-grille { grid-template-columns: 1fr; }
  .projets-grille .projet-carte:nth-child(2n) { transform: none; }
}

/* ---------- Références : slider plein cadre (posé par site.js) ---------- */
.has-refs-hero main { padding-top: 0 !important; }
.has-refs-hero .projets-liste { padding-top: 0; }
/* Hauteur calculée pour que la barre des catégories reste visible sous le slider,
   au-dessus de la ligne de flottaison (≈ 150 px réservés sous le visuel). */
.has-refs-hero .projets-liste__intro { position: relative; width: 100vw; max-width: none; margin: 0 0 36px calc(50% - 50vw); height: calc(100vh - 150px); height: calc(100svh - 150px); min-height: 460px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 max(calc((100vw - 1440px) / 2), clamp(20px, 4vw, 80px)) clamp(60px, 10vh, 120px); color: #fff; overflow: hidden; background: var(--nuit, #141a33); }
.refs-hero-slides, .refs-hero-slide { position: absolute; inset: 0; }
.refs-hero-slides { z-index: 0; }
.refs-hero-slides::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(20,26,51,.3) 0%, rgba(20,26,51,0) 30%, rgba(20,26,51,0) 55%, rgba(20,26,51,.72) 100%); }
.refs-hero-slide { opacity: 0; transition: opacity 2s cubic-bezier(.45,0,.2,1); will-change: opacity; }
.refs-hero-slide.is-active { opacity: 1; z-index: 2; }
/* La sortante reste pleinement visible SOUS l'entrante pendant le fondu : pas de
   creux de lumière. */
.refs-hero-slide.is-leaving { opacity: 1; z-index: 1; transition: none; }
.refs-hero-slide picture, .refs-hero-slide img { width: 100%; height: 100%; }
/* Fondu enchaîné pur, sans zoom (29/09) : l'entrante arrivait zoomée sur une
   sortante déjà dézoomée, et le client voyait les photos « sauter ». */
.refs-hero-slide img { object-fit: cover; }
.has-refs-hero .projets-liste__intro > :not(.refs-hero-slides) { position: relative; z-index: 4; }
.has-refs-hero .projets-liste__surtitre { color: #d9bfb1; }
.has-refs-hero .projets-liste__intro h1 { color: #fff !important; max-width: 1100px; margin-bottom: 24px; }
.has-refs-hero .projets-liste__texte { color: rgba(255,255,255,.82); margin: 0; }

/* ---------- Articles : mosaïque des photos qui se suivent (posée par site.js) ---------- */
.blog-mosaique { display: grid; gap: 14px; margin: 40px 0 50px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-mosaique--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-mosaique--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-mosaique .blog-figure { margin: 0 !important; aspect-ratio: 1/1; overflow: hidden; }
.blog-mosaique .blog-figure picture, .blog-mosaique .blog-figure img { width: 100%; height: 100% !important; object-fit: cover; border-radius: 0 !important; }
.blog-mosaique .blog-figure img { transition: transform 1.4s cubic-bezier(.22,.61,.12,1); }
.blog-mosaique .blog-figure:hover img { transform: scale(1.04); }
.blog-mosaique figcaption { display: none; }
@media (max-width: 560px) { .blog-mosaique, .blog-mosaique--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

.has-refs-hero .blog-themes { margin-top: 0; }

/* ---------- Article : titre, fil d'Ariane, date et catégorie en pleine largeur,
   au-dessus du sommaire (demande client 29/09). Le gabarit du module est commun
   à tous les sites : on le réagence en CSS. Le bloc de lecture se « dissout »
   (display: contents) et ses enfants deviennent des cases de la grille. */
.blog-article__lecture { display: contents; }
.blog-article__grille { display: flex; flex-direction: column; }
.blog-article__grille > .blog-cote { order: 1; }
.blog-article__lecture > * { order: 2; }
.blog-article__lecture > .blog-fil,
.blog-article__lecture > .blog-article__meta,
.blog-article__lecture > h1 { order: 0; }
.blog-article__lecture > h1 { margin-bottom: 50px; }
@media (min-width: 1080px) {
  .blog-article__grille { display: grid; grid-template-columns: 15rem minmax(0, 46rem); column-gap: 3rem; row-gap: 0; justify-content: center; align-items: start; }
  .blog-article__lecture > * { grid-column: 2; }
  .blog-article__lecture > .blog-fil,
  .blog-article__lecture > .blog-article__meta,
  .blog-article__lecture > h1 { grid-column: 1 / -1; }
  /* Le sommaire démarre sous le titre (3 lignes d'en-tête) et court le long de l'article */
  .blog-article__grille > .blog-cote { grid-column: 1; grid-row: 4 / span 30; }
}

/* ---------- Partage : barre fixe en bas de l'écran, pleine largeur (références et
   actualités, 29/09). Le bloc vient du module commun (colonne latérale des articles,
   bas des fiches) : on le sort du flux en CSS. */
.blog-partage, .blog-cote .blog-partage {
  position: fixed; left: 0; right: 0; bottom: 0; transform: none; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); background: #141a33;
  border: 0; border-top: 1px solid rgba(217,191,177,.18); border-radius: 0;
}
.blog-partage__titre { margin: 0; font-size: 10px; font-weight: 500; letter-spacing: .28em; color: #d9bfb1; }
.blog-partage__liens { gap: 6px; flex-wrap: nowrap; }
.blog-partage__liens > * { background: transparent; border: 1px solid rgba(217,191,177,.3); color: #d9bfb1; }
.blog-partage__liens > *:hover, .blog-partage__liens > *:focus-visible { background: #d9bfb1; border-color: #d9bfb1; color: #141a33; transform: none; }
.blog-partage__copie.copie { background: #d9bfb1; color: #141a33; }
/* La barre ne cache jamais le bas du pied de page */
body:has(.blog-partage) .site-footer { padding-bottom: 100px; }

/* ---------- Bandeau cookies (cookie-consent.js) : la feuille sur mesure remplace
   celle du starter, il n'avait donc aucun style. Toujours au-dessus de tout,
   barre de partage comprise. */
#cookie-banner { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9999;
  width: min(calc(100% - 32px), 620px); display: flex; flex-direction: column; gap: 16px;
  padding: 24px 26px; background: #141a33; color: rgba(255,255,255,.82); border: 1px solid rgba(217,191,177,.3);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); font-size: 14px; line-height: 1.6; }
#cookie-banner.hidden { display: none; }
#cookie-banner p { margin: 0; }
#cookie-banner a { color: #d9bfb1; text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-accept, .cookie-refuse { cursor: pointer; padding: 11px 20px; font: inherit; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; border-radius: 0; }
.cookie-accept { background: #d9bfb1; color: #141a33; border: 1px solid #d9bfb1; }
.cookie-refuse { background: transparent; color: #d9bfb1; border: 1px solid rgba(217,191,177,.4); }
.cookie-accept:hover { background: #fff; border-color: #fff; }
.cookie-refuse:hover { border-color: #d9bfb1; color: #fff; }

/* Retour à l'accueil (fiche ouverte depuis les Références choisies) */
.retour-accueil { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 28px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #141a33; }
.retour-accueil i { position: relative; width: 34px; height: 1px; background: currentColor; transition: width .4s ease; }
.retour-accueil i::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-left: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); }
.retour-accueil:hover i { width: 48px; }
.blog-article__retour + .retour-accueil { display: flex; width: max-content; margin: 28px 0 0; }