/* ZELLIJ · DIRECTION A · « La table lumineuse » (fusion des directions 1 et 2)
   Une table blanche éclairée : on y observe, on mesure, on range, on assemble des pièces.
   Système : un module carré, cinq coupes, un joint fin. Chaque couleur a un seul rôle. */

@property --g { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --zo { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --zh { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --mk { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --ny { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root {
  /* surfaces */
  --paper: #FCFAF6;           /* la table : blanc lumineux, jamais beige */
  --white: #FFFFFF;
  --wash: #EDEFE6;            /* lavis sauge très clair, surfaces secondaires */
  /* encre et structure */
  --prune: #382B3F;
  --prune-2: #52425C;
  --prune-deep: #221420;
  --prune-night: #170E16;
  /* un rôle par couleur */
  --sauge: #8B9271;           /* Clarifier : observer */
  --olive: #5B6135;           /* Structurer : organiser */
  --bordeaux: #7B2C3F;        /* Donner forme : action et accent unique */
  --or-ink: #7A6838;          /* l'or, quand il doit se lire (texte sur fond clair) : 5,2:1 */
  --or: #A18A58;              /* le détail : filets, cotes, joints */
  --or-clair: #CDB887;        /* l'or, quand il doit se lire sur un fond sombre : 6,9:1 sur la prune */
  --ink: #382B3F;
  --ink-soft: #62546A;
  --line: rgba(56, 43, 63, .15);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, .7, .25, 1);
  --gut: clamp(20px, 4.4vw, 72px);
  --fs-display: clamp(2.7rem, 5.5vw + .2rem, 6.9rem);
  --fs-h2: clamp(2.1rem, 4.4vw, 4.8rem);
  --navh: 64px;
  --joint: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.62 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1360px, 100% - 2 * var(--gut)); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 4px; border-radius: 6px; }

/* ---------- typographie ---------- */
.eyebrow {
  font: 500 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--or); }
.eyebrow--light { color: rgba(252, 250, 246, .74); }
.display {
  font-family: var(--serif); font-weight: 420; font-size: var(--fs-display); line-height: .98; letter-spacing: -.03em; color: var(--prune);
  font-variation-settings: "opsz" 72;
}
.display em, .h2 em, .h3 em, .contact__t em, .mwords em { font-style: italic; font-weight: 400; color: var(--bordeaux); }
.h2 { font-family: var(--serif); font-weight: 420; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.026em; color: var(--prune); max-width: 16ch; font-variation-settings: "opsz" 72; }
.h2--m { font-size: clamp(1.9rem, 3.3vw, 3.4rem); max-width: 14ch; }
.h2--light { color: var(--paper); } .h2--light em { color: #DDB8C1; }
.h3 { font-family: var(--serif); font-weight: 420; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.04; letter-spacing: -.02em; }
.ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ln__in { display: block; will-change: transform; }

/* ---------- boutons : bordeaux = action ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 16px; padding: 8px 8px 8px 28px; border-radius: 999px;
  background: var(--bordeaux); color: var(--paper); font: 500 .96rem/1 var(--sans); letter-spacing: .01em; white-space: nowrap;
  transition: transform .5s var(--ease), background .4s var(--ease);
}
.btn__dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(252, 250, 246, .16); font-size: 1.05rem; transition: transform .5s var(--ease), background .4s var(--ease); }
.btn:hover { background: #6A2436; }
.btn:hover .btn__dot { transform: translate(3px, -2px) scale(1.06); background: rgba(252, 250, 246, .26); }
.btn:active { transform: scale(.98); }
.btn--sm { padding: 5px 5px 5px 20px; font-size: .85rem; gap: 12px; }
.btn--sm .btn__dot { width: 32px; height: 32px; font-size: .9rem; }
.btn--light { background: var(--paper); color: var(--prune); }
.btn--light .btn__dot { background: rgba(56, 43, 63, .1); }
.btn--light:hover { background: #fff; }
.link { font: 500 .96rem/1 var(--sans); padding-bottom: 5px; border-bottom: 1px solid currentColor; transition: color .3s var(--ease), border-color .3s var(--ease); }
.link:hover { color: var(--bordeaux); }
.link, .nav__logo { position: relative; }
.link::after, .nav__logo::after { content: ""; position: absolute; inset: -12px -6px -6px; }   /* zone du doigt : 44 px, le dessin ne bouge pas */
.link--light { color: var(--paper); }
.link--light:hover { color: #fff; border-color: var(--or); }

/* ---------- l'arche : un demi-cercle, deux moitiés, un joint ---------- */
.arch { position: relative; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--wash); }
.arch > img { width: 100%; height: 100%; object-fit: cover; }
.arch__contour { position: absolute; inset: -9px -9px 0; border: 1px solid var(--or); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none; }

/* ---------- nav flottante ---------- */
.nav {
  position: fixed; z-index: 50; top: 14px; left: 50%; translate: -50% var(--ny);
  width: min(1280px, 100% - 28px); height: var(--navh); padding: 0 10px 0 24px; border-radius: 999px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px;
  background: rgba(252, 250, 246, .78); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(56, 43, 63, .09); box-shadow: 0 18px 40px -28px rgba(56, 43, 63, .4);
  transition: --ny .8s var(--ease), background .5s var(--ease), border-color .5s var(--ease), opacity .2s var(--ease);
}
.nav.is-hidden { --ny: -160%; }
.nav__logo img { height: 30px; width: auto; transition: filter .4s var(--ease); }
.nav__links { display: flex; gap: clamp(22px, 2.3vw, 34px); font: 500 .92rem/1 var(--sans); margin: 0; justify-self: center; }
.nav__actions { display: flex; align-items: center; justify-self: end; gap: 14px; }
.nav__logo { justify-self: start; }
.nav__links a { position: relative; padding: 8px 0; color: var(--ink); transition: color .4s var(--ease); }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--bordeaux); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__menu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 .9rem/1 var(--sans); padding: 10px 6px 10px 14px; }
.nav__burger { position: relative; width: 22px; height: 12px; }
.nav__burger i { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--prune); transition: transform .5s var(--ease), top .5s var(--ease), background .4s; }
.nav__burger i:nth-child(1) { top: 1px; } .nav__burger i:nth-child(2) { top: 9px; }
.nav__menu[aria-expanded="true"] .nav__burger i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__burger i:nth-child(2) { top: 5px; transform: rotate(-45deg); }
.nav--dark { background: rgba(34, 20, 32, .62); border-color: rgba(252, 250, 246, .14); }
.nav--dark .nav__links a, .nav--dark .nav__menu { color: var(--paper); }
.nav--dark .nav__logo img { filter: brightness(0) invert(1); }
.nav--dark .btn--sm { background: var(--paper); color: var(--prune); }
.nav--dark .btn--sm .btn__dot { background: rgba(56, 43, 63, .12); }
.nav--dark .nav__burger i { background: var(--paper); }


/* ---------- rail : la règle de la table ---------- */
.rail { position: fixed; z-index: 40; left: clamp(10px, 1.2vw, 22px); top: 50%; translate: 0 -50%; display: none; flex-direction: column; padding: 4px 0; }
.rail::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: repeating-linear-gradient(to bottom, rgba(56, 43, 63, .22) 0 1px, transparent 1px 8px); }
.rail a { position: relative; display: block; height: 34px; width: 28px; }
.rail i { position: absolute; left: 0; top: 50%; width: 11px; height: 1px; background: var(--or); transition: width .6s var(--ease), background .4s var(--ease); }
.rail span { position: absolute; left: 36px; top: 50%; translate: 0 -50%; font: 500 .66rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--prune); background: rgba(252, 250, 246, .96); padding: 6px 10px; border-radius: 99px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-6px); transition: opacity .4s var(--ease), transform .4s var(--ease); box-shadow: 0 8px 18px -12px rgba(56, 43, 63, .4); }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; transform: none; }
.rail a.is-on i { width: 24px; background: var(--bordeaux); }
.rail.rail--dark::before { background: repeating-linear-gradient(to bottom, rgba(252, 250, 246, .3) 0 1px, transparent 1px 8px); }
@media (min-width: 1300px) { .rail { display: flex; } }

/* ---------- 1 · ouverture : une image, un titre, une loupe ----------
   L'image est la scène : une table blanche, une arche de lumière, quelques objets finis. Le titre est posé sur le mur calme.
   Ses écrans sont vivants : on y entre, on y change la couleur (voir « la table vivante » plus bas et `home-table.js`). */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: clamp(560px, 56.25vw, 100svh); overflow: clip; background: var(--paper); }
.hx-stage { position: relative; grid-area: 1 / 1; z-index: 0; margin: 0; overflow: hidden; background: #E9EBEA; }
.hx-stage picture { position: absolute; inset: 0; display: block; }
.hx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.hx-stage::after { content: ''; position: absolute; inset: auto 0 0 0; height: 22%; background: linear-gradient(to bottom, rgba(252, 250, 246, 0), var(--paper)); pointer-events: none; }
.hero { --hx-left: max(var(--gut), calc((100% - 1360px) / 2)); }
.hx-top { grid-area: 1 / 1; position: relative; z-index: 2; justify-self: start; align-self: start; width: min(56%, 760px); margin-left: var(--hx-left); padding-top: clamp(100px, 13vh, 136px); }
.hx-bottom { position: absolute; z-index: 2; left: var(--hx-left); top: 67.5%; width: min(520px, 36vw); }
.hx-top .eyebrow { margin-bottom: 40px; color: var(--ink); }
.hero .display { font-size: clamp(2.3rem, 4.9vw, 4.9rem); }
.hero .display .ln:last-child { margin-bottom: 0; padding-bottom: .1em; }
.hero__sub { max-width: 30ch; margin: 0 0 10px; font: 500 clamp(1.05rem, 1.5vw, 1.3rem)/1.38 var(--sans); letter-spacing: -.008em; color: var(--ink); }
.hero__lead { max-width: 46ch; color: var(--ink-soft); }
.hero__cta { margin-top: 40px; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); flex-wrap: wrap; }
@keyframes hxScene { from { transform: scale(1.045); } to { transform: none; } }
.js .hx-img { animation: hxScene 2.2s cubic-bezier(.16, 1, .3, 1) backwards; }

/* ---------- la table vivante : les écrans, les couleurs, les indices, la fenêtre du site (20/10/2026) ----------
   Tout est posé en perspective sur la photographie par `home-table.js` (matrix3d) : un écran est un bouton de la taille de la page qu'il montre (1 280 × 800
   ou 390 × 832), déformé pour épouser l'écran de la photographie. Les cinq couleurs sont des boutons posés sur les céramiques. Sans script, rien de tout cela n'existe. */
.hx-table { position: absolute; inset: 0; z-index: 1; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hx-appareil { position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0; background: none; transform-origin: 0 0; pointer-events: auto; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; border-radius: var(--r, 6px); --anneau: 10px; }
.hx-appareil--ordi { --derive: -47%; }
.hx-appareil--tel { --derive: -50%; --anneau: 14px; }
.hx-appareil__verre { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: transparent; }
/* le verre : un reflet doux et un bord sombre, pour que le site se pose dans l'écran de la photographie au lieu de s'y coller */
.hx-appareil__verre::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 64%, rgba(20, 16, 24, .07) 100%); box-shadow: inset 0 0 0 1px rgba(20, 16, 24, .16), inset 0 0 calc(var(--anneau) * 4) rgba(20, 16, 24, .09); }
.hx-capture { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; opacity: 0; transition: opacity .7s linear; animation: hxDerive 34s cubic-bezier(.45, .05, .3, 1) 1.2s infinite alternate; will-change: transform; pointer-events: none; }
.hx-appareil--tel .hx-capture { animation-duration: 28s; animation-delay: 2.4s; }
.hx-capture.is-vu { opacity: 1; }
@keyframes hxDerive { 0%, 10% { transform: translateY(0); } 100% { transform: translateY(var(--derive, -47%)); } }
/* au survol : l'anneau d'or entoure l'écran, la lumière monte d'un cran */
.hx-appareil::before { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(161, 138, 88, 0); transition: box-shadow .35s var(--ease); }
.hx-appareil:hover::before { box-shadow: inset 0 0 0 calc(var(--anneau) * .7) rgba(205, 184, 135, .95); }
.hx-appareil:hover .hx-appareil__verre { filter: brightness(1.04) saturate(1.05); }
.hx-appareil:focus-visible { outline: var(--anneau) solid var(--bordeaux); outline-offset: calc(var(--anneau) * 1.2); }
.hx-appareil.est-parti { visibility: hidden; }
.hx-appareil__verre { transition: filter .35s var(--ease); }
/* la lumière qui passe : un balayage de reflet sur l'écran quand la couleur change */
.is-balaye .hx-appareil__verre::before, .hx-v__ecran.is-balaye::before { content: ""; position: absolute; inset: -12% -30%; z-index: 5; pointer-events: none; background: linear-gradient(104deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 66%); transform: translateX(-62%); animation: hxBalai 1.05s cubic-bezier(.35, .1, .25, 1) forwards; }
@keyframes hxBalai { to { transform: translateX(62%); } }

/* les couleurs : cinq pièces de céramique, cinq boutons ; l'anneau d'or dit laquelle est choisie */
.hx-tuiles { position: absolute; inset: 0; pointer-events: none; }
.hx-tuile { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; pointer-events: auto; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hx-tuile__anneau { position: absolute; border-radius: 9px; box-shadow: 0 0 0 0 rgba(161, 138, 88, 0), 0 0 0 0 rgba(252, 250, 246, 0); transition: box-shadow .35s var(--ease); pointer-events: none; }
.hx-tuile:hover .hx-tuile__anneau, .hx-tuile:focus-visible .hx-tuile__anneau { box-shadow: 0 0 0 1.5px var(--or), 0 0 0 5px rgba(252, 250, 246, .78), 0 12px 24px -8px rgba(34, 20, 32, .4); }
.hx-tuile[aria-checked="true"] .hx-tuile__anneau { box-shadow: 0 0 0 1.5px var(--or), 0 0 0 4px rgba(252, 250, 246, .6); }
.hx-tuile:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.hx-tuile__nom { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); display: block; padding: 5px 10px; border-radius: 99px; background: var(--prune); color: var(--paper); font: 600 .58rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .4s var(--ease); box-shadow: 0 10px 20px -10px rgba(34, 20, 32, .55); }
.hx-tuile:hover .hx-tuile__nom, .hx-tuile:focus-visible .hx-tuile__nom, .hx-indices-off .hx-tuile[aria-checked="true"] .hx-tuile__nom { opacity: 1; transform: translate(-50%, 0); }

/* les deux indices : une phrase chacun, posés dans le vide de la photographie, retirés dès le premier geste */
.hx-indice { position: absolute; z-index: 2; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 11px; border-radius: 99px; background: rgba(252, 250, 246, .94); box-shadow: 0 0 0 1px rgba(161, 138, 88, .6), 0 14px 28px -14px rgba(34, 20, 32, .45); font: 600 .62rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--prune); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease) .2s; }
.hx-indice i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bordeaux); }
.hx-indice i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: hxPing 1.9s var(--ease) infinite; }
.hx-portrait .hx-indice { font-size: .5rem; letter-spacing: .1em; padding: 6px 10px 6px 8px; gap: 7px; }
.hx-portrait .hx-indice i { width: 7px; height: 7px; }
.hx-indice--gauche { transform: translate(0, -100%); }
.hx-indice--droite { transform: translate(-100%, -100%); }
.hx-indices-on .hx-indice { opacity: 1; }
.hx-indices-off .hx-indice { opacity: 0 !important; transition-delay: 0s; }
@keyframes hxPing { from { box-shadow: 0 0 0 0 rgba(123, 44, 63, .55); } to { box-shadow: 0 0 0 11px rgba(123, 44, 63, 0); } }
.hx-sans-captures .hx-indice--couleur { display: none; }

/* quand la fenêtre du site est ouverte : la table recule dans la lumière, le titre s'efface, la page ne défile plus */
html.hx-ouvert { overflow: hidden; }
html.hx-ouvert .nav, html.hx-ouvert .rail { opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.hero.is-ouvert .hx-stage { transform: scale(1.045); filter: blur(7px) saturate(.88) brightness(.9); transition: transform .9s var(--ease), filter .9s var(--ease); }
.hero.is-ouvert .hx-top, .hero.is-ouvert .hx-bottom, .hero.is-ouvert .hx-tuiles, .hero.is-ouvert .hx-indice { opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.hero .hx-stage { transition: transform .8s var(--ease), filter .8s var(--ease); }

/* la fenêtre du site */
.hx-v { position: fixed; inset: 0; z-index: 200; color: var(--paper); visibility: hidden; pointer-events: none; }
.hx-v.est-actif { visibility: visible; pointer-events: auto; }
.hx-v__fond { position: absolute; inset: 0; background: radial-gradient(64% 52% at 50% 40%, rgba(82, 66, 92, .5), rgba(82, 66, 92, 0) 72%), linear-gradient(to bottom, rgba(34, 20, 32, .9), rgba(34, 20, 32, .95) 40%, rgba(34, 20, 32, .975) 80%, rgba(34, 20, 32, .99)); opacity: 0; transition: opacity .8s var(--ease); }
.hx-v.est-ouvert .hx-v__fond { opacity: 1; }
.hx-v__scene { position: absolute; inset: 0; overflow: hidden; }
.hx-v__appareil { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
.hx-v__appareil.est-actif { visibility: visible; transition-delay: 0s; }
.hx-v__appareil.est-vu { opacity: 1; pointer-events: auto; }
.hx-v__cadre { position: absolute; inset: 0; border-radius: var(--r, 6px); pointer-events: none; box-shadow: 0 0 0 calc(var(--cadre, 0) * 16px) #0f0c12, 0 calc(var(--cadre, 0) * 70px) calc(var(--cadre, 0) * 90px) calc(var(--cadre, 0) * -34px) rgba(0, 0, 0, .7); }
.hx-v__appareil--tel .hx-v__cadre { box-shadow: 0 0 0 calc(var(--cadre, 0) * 15px) #0f0c12, 0 calc(var(--cadre, 0) * 70px) calc(var(--cadre, 0) * 90px) calc(var(--cadre, 0) * -34px) rgba(0, 0, 0, .7); }
.hx-v__ecran { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r, 6px); background: #f4f1ee; }
.hx-v__capture { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; transition: opacity .45s linear .15s; pointer-events: none; }
.hx-v__site { position: absolute; left: 0; top: 0; border: 0; background: transparent; opacity: 0; pointer-events: none; transition: opacity .45s linear; }
.hx-v__appareil.a-site .hx-v__site { opacity: 1; pointer-events: auto; }
.hx-v__appareil.a-site .hx-v__capture { opacity: 0; }
.hx-v__appareil.a-site .hx-v__attente { display: none; }
/* tant que le vrai site n'est pas là, la capture reste (on ne peut pas faire défiler dans le vide) ; une pastille discrète dit que ça arrive */
.hx-v__attente { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 14px; padding: 12px 24px 12px 20px; border-radius: 99px; background: rgba(252, 250, 246, .94); box-shadow: 0 0 0 1px rgba(161, 138, 88, .55), 0 18px 36px -18px rgba(34, 20, 32, .5); font: 600 17px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--prune); white-space: nowrap; z-index: 2; opacity: 0; animation: hxAttente .5s linear 1s forwards; }
.hx-v__attente i { width: 11px; height: 11px; border-radius: 50%; background: var(--bordeaux); animation: hxRespire 1.2s ease-in-out infinite; }
.hx-v__appareil--tel .hx-v__attente { font-size: 13px; padding: 9px 16px 9px 14px; gap: 10px; }
@keyframes hxAttente { to { opacity: 1; } }
@keyframes hxRespire { 0%, 100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
.hx-v__appareil.est-absent .hx-v__attente { display: none; }
/* le haut : l'appareil (ordinateur ou téléphone) à gauche, la croix à droite */
.hx-v__haut { position: absolute; z-index: 4; top: clamp(14px, 2.4vh, 24px); left: clamp(14px, 3vw, 36px); right: clamp(14px, 3vw, 36px); display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease) .3s; }
.hx-v__haut > * { pointer-events: auto; }
.hx-v.est-ouvert .hx-v__haut { opacity: 1; }
.hx-v__duo { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(34, 20, 32, .55); box-shadow: inset 0 0 0 1px rgba(252, 250, 246, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hx-v__duo button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: rgba(252, 250, 246, .86); font: 500 .84rem/1 var(--sans); cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease); }
.hx-v__duo button[aria-pressed="true"] { background: var(--paper); color: var(--prune); }
.hx-v__fermer { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px 0 16px; border: 1px solid rgba(252, 250, 246, .34); border-radius: 999px; background: rgba(34, 20, 32, .55); color: var(--paper); font: 500 .86rem/1 var(--sans); cursor: pointer; transition: background .3s var(--ease), border-color .3s; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hx-v__fermer > span:first-child { font-size: 1.7rem; line-height: 1; transform: translateY(-1px); }
.hx-v__fermer:hover, .hx-v__fermer:focus-visible { background: rgba(252, 250, 246, .14); border-color: var(--or-clair); }
.hx-v__fermer:focus-visible, .hx-v__duo button:focus-visible, .hx-v__couleur:focus-visible, .hx-v__actions a:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
/* la barre du bas : la couleur, ce que c'est, où aller */
.hx-v__barre { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px clamp(18px, 3vw, 44px); width: min(1280px, 100% - 2 * clamp(18px, 3vw, 36px)); margin-inline: auto; padding: 14px 0 calc(20px + env(safe-area-inset-bottom, 0px)); opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease) .2s, transform .7s var(--ease) .2s; }
.hx-v.est-pose .hx-v__barre { opacity: 1; transform: none; }
.hx-v__couleurs { display: inline-flex; align-items: center; gap: 4px; }
.hx-v__couleur { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hx-v__couleur::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--tuile); box-shadow: 0 0 0 1.5px rgba(252, 250, 246, .5); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.hx-v__couleur:hover::before { transform: scale(1.08); }
.hx-v__couleur[aria-checked="true"]::before { box-shadow: 0 0 0 2px var(--prune-deep), 0 0 0 4px var(--or-clair); }
.hx-v__legende { margin: 0; max-width: 56ch; font: 400 .92rem/1.5 var(--sans); color: rgba(252, 250, 246, .78); }
.hx-v__legende b { font-weight: 600; color: var(--paper); }
.hx-v__actions { display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; justify-content: flex-end; }
.hx-v__actions .btn { background: var(--paper); color: var(--prune); }
.hx-v__actions .btn .btn__dot { background: rgba(56, 43, 63, .1); }
.hx-v__actions .link { color: var(--paper); }
@media (max-width: 1100px) {
  .hx-v__barre { grid-template-columns: minmax(0, 1fr) auto; }
  .hx-v__legende { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 700px) {
  .hx-v__fermer { width: 48px; padding: 0; justify-content: center; }
  .hx-v__fermer-t { display: none; }
  .hx-v__barre { grid-template-columns: minmax(0, 1fr); gap: 4px; width: calc(100% - 2 * var(--gut)); padding-top: 8px; justify-items: center; }
  .hx-v__legende { display: none; }
  .hx-v__actions { width: 100%; flex-direction: column; align-items: stretch; gap: 6px; }
  .hx-v__actions .btn { justify-content: space-between; padding-left: 22px; font-size: .92rem; }
  .hx-v__actions .link { align-self: center; padding: 8px 0 2px; }
  .hx-v__duo button { padding: 0 16px; }
}
@media (max-width: 700px) and (max-height: 640px) { .hx-v__couleurs { display: none; } }
@media (prefers-reduced-motion: reduce) { .hx-capture { animation: none; } .hx-indice i::after { animation: none; } .hero.is-ouvert .hx-stage { transform: none; } .hx-v__fond, .hx-v__barre, .hx-v__haut { transition-duration: .01ms !important; transition-delay: 0s !important; } }

/* texte agrandi : titre au-dessus de l'image (posé dessus, il en couvrirait les objets) */
@media (max-width: 1180px) {
  .hero.hx-big { grid-template-rows: auto var(--hx-h) auto; }
  .hero.hx-big .hx-top { grid-area: 1 / 1; width: auto; max-width: none; margin: 0 var(--gut) 0 var(--hx-left); padding: 92px 0 18px; }
  .hero.hx-big .hx-stage { grid-area: 2 / 1; }
  .hero.hx-big .hx-bottom { grid-area: 3 / 1; }
}
/* tablette et téléphone : le titre reste posé sur le mur de l'image, le texte et l'action viennent juste dessous */
@media (max-width: 1180px) {
  .hero { --hx-h: 56.25vw; min-height: 0; grid-template-rows: var(--hx-h) auto; }
  .hx-stage { grid-area: 1 / 1; aspect-ratio: 16 / 9; }
  .hx-img { object-position: 78% 50%; }
  .hx-top { width: min(60%, 560px); padding-top: clamp(84px, 11vw, 112px); }
  .hx-top .eyebrow { margin-bottom: 24px; }
  .hero .display { font-size: clamp(2.1rem, 3.9vw, 3.4rem); }
  .hero__sub { font-size: clamp(1rem, 2vw, 1.18rem); max-width: 34ch; }
  .hx-bottom { position: static; grid-area: 2 / 1; width: auto; max-width: 600px; margin: 24px var(--gut) 0 var(--hx-left); padding-bottom: 44px; }
  .hero__cta { margin-top: 32px; }
  .hx-indice { font-size: .56rem; padding: 7px 11px 7px 9px; }
}
@media (max-width: 760px) {
  .hero { --hx-h: 125vw; grid-template-rows: auto auto var(--hx-h); }
  /* l'activité se lit avant l'image : le titre, le texte et l'action d'abord, la photographie juste dessous */
  .hx-top, .hero.hx-big .hx-top { grid-area: 1 / 1; width: auto; max-width: none; margin: 0 var(--gut) 0 var(--hx-left); padding: 92px 0 4px; }
  .hx-top .eyebrow { margin-bottom: 20px; }
  .hx-bottom, .hero.hx-big .hx-bottom { grid-area: 2 / 1; margin: 14px var(--gut) 0 var(--hx-left); padding-bottom: 26px; }
  .hx-stage, .hero.hx-big .hx-stage { grid-area: 3 / 1; }
  .hero.hx-big { grid-template-rows: auto auto var(--hx-h); }
  .hx-stage { aspect-ratio: 4 / 5; }
  .hx-img { object-position: 50% 50%; }
  .hx-top { width: calc(100% - 2 * var(--gut)); padding-top: 92px; }
  .hero .display { font-size: clamp(2.05rem, 10vw, 3.1rem); }
  .hero__sub { max-width: 34ch; margin-bottom: 8px; font-size: 1.1rem; }
}

/* états initiaux (uniquement si le JS tourne) */
@keyframes heroLine { from { transform: translateY(108%); } to { transform: none; } }
@keyframes heroFade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes heroArch { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes heroFocus { from { filter: blur(16px) brightness(1.14); } to { filter: blur(0) brightness(1); } }
@keyframes heroNav { from { transform: translateY(-170%); } to { transform: none; } }
/* l'ouverture est écrite en CSS : elle démarre au premier affichage, sans attendre le script ; « backwards » rend la main au style normal ensuite */
.js .ln__in { animation: heroLine 1.35s cubic-bezier(.16, 1, .3, 1) backwards; }
.js .ln:nth-child(2) .ln__in { animation-delay: .1s; } .js .ln:nth-child(3) .ln__in { animation-delay: .2s; } .js .ln:nth-child(4) .ln__in { animation-delay: .3s; }
.js [data-hero="fade"] { animation: heroFade 1.1s cubic-bezier(.22, 1, .36, 1) .5s backwards; }
.js .hero__sub[data-hero] { animation-delay: .6s; } .js .hero__lead[data-hero] { animation-delay: .75s; } .js .hero__cta[data-hero] { animation-delay: .8s; }
.js .nav { animation: heroNav 1.1s cubic-bezier(.16, 1, .3, 1) .5s backwards; }
@media (prefers-reduced-motion: reduce) { .js .ln__in, .js [data-hero="fade"], .js .hx-img, .js .nav { animation: none; } }
.no-motion .ln__in, .no-motion [data-hero="fade"], .no-motion .hx-img, .no-motion .nav { animation: none; }
.js [data-rev] { opacity: 0; transform: translateY(30px); filter: blur(7px); }
.js-fail .ln__in, .js-fail [data-hero], .js-fail [data-rev] { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }

/* ---------- 2 · trois entrées : des fenêtres qui passent devant des images qui ne bougent pas ----------
   Chaque entrée est un bloc de la page : elle défile normalement, rien n'est épinglé, rien ne retient le défilement.
   La fenêtre (clip-path) s'ouvre en arche étroite quand l'entrée arrive, s'élargit au centre de l'écran, se resserre en repartant.
   L'image, elle, reste immobile par rapport à l'écran (position fixe : aucune valeur n'est recalculée pendant le défilement, donc aucun retard possible) ; c'est la fenêtre qui glisse dessus.
   Le tout est piloté par le défilement lui-même (animation-timeline), donc au doigt comme à la molette, sans script.
   Là où le navigateur ne sait pas le faire, ou en mouvement réduit : la fenêtre reste ouverte et l'image la suit, rien ne bouge. */
@property --c { syntax: '<number>'; inherits: true; initial-value: 0; }
.portes { padding: clamp(72px, 9vw, 130px) 0; }
.sec-head { display: grid; gap: clamp(16px, 2vw, 26px); margin-bottom: clamp(28px, 4vw, 56px); }
.sec-head__p { max-width: 44ch; color: var(--ink-soft); }
.doors { display: grid; gap: clamp(40px, 5vw, 72px); padding-top: 10px; --dh: clamp(440px, 66svh, 640px); }
.door { display: grid; gap: clamp(14px, 1.6vw, 24px); color: var(--ink); }
.door__win { position: relative; height: var(--dh); --c: 1;
  --il: calc((1 - var(--c)) * 15%);                       /* retrait latéral de la fenêtre : 0 quand elle est ouverte */
  --rt: calc(48px + (1 - var(--c)) * 900px);              /* haut : demi-cercle fermé, grand arrondi ouvert */
  --rb: calc(30px + var(--c) * 18px); }
.door__win::before { content: ''; position: absolute; inset: -9px calc(var(--il) - 9px); border: 1px solid var(--or); border-radius: calc(var(--rt) + 9px) calc(var(--rt) + 9px) calc(var(--rb) + 9px) calc(var(--rb) + 9px); pointer-events: none; opacity: .8; }
/* la matière reste fixe à l'écran, la fenêtre passe devant. Rien n'est recalculé pendant le défilement :
   la fenêtre est le milieu d'un grand cadre (une hauteur d'écran au-dessus, une en dessous) découpé par clip-path ; l'image est « collante »
   (position: sticky) dans ce grand cadre, donc elle reste collée en haut de l'écran pendant tout le passage de la fenêtre.
   Le défilement natif et le collage natif sont portés par le même fil du navigateur : aucun retard possible, sur ordinateur comme sur iPhone. */
.door .arch { position: absolute; left: 0; right: 0; top: -100lvh; height: calc(var(--dh) + 200lvh); border-radius: 0; overflow: visible; isolation: isolate; background: var(--tb, #F4F5F7); clip-path: inset(100lvh var(--il) 100lvh var(--il) round var(--rt) var(--rt) var(--rb) var(--rb)); }
.door--studio .arch { --tb: #F5F8FB; } .door--editions .arch { --tb: #FAFBFB; } .door--biblio .arch { --tb: #F4F5F6; }   /* le blanc de la table, mesuré sur chaque image */
/* les bords de l'image fondent dans le blanc de la fenêtre */
.door .arch::after { content: ''; position: absolute; left: 0; right: 0; top: 100lvh; bottom: 100lvh; pointer-events: none; box-shadow: inset 0 0 36px 22px var(--tb); }
.door__fix { position: sticky; top: 0; width: 100%; height: 100lvh; }
.door__fix picture { display: contents; }
.door__fix img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(var(--s, 1)); transition: transform 1.2s var(--ease), opacity .7s var(--ease); }
/* l'image n'apparaît qu'une fois décodée : jamais d'image brute avant que la fenêtre soit posée */
.js .door__fix img { opacity: 0; }
.js .door__fix img.is-ready, .js-fail .door__fix img, .no-motion .door__fix img { opacity: 1; }
@media (hover: hover) { .door:hover .door__fix img { --s: 1.03; } }
@keyframes door-c { 0% { --c: 0; } 30% { --c: 1; } 70% { --c: 1; } 100% { --c: 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .door__win { animation: door-c ease-in-out both; animation-timeline: view(); }
  }
}
/* mouvement réduit : la fenêtre reste ouverte et l'image la suit, rien n'est attaché à l'écran */
@media (prefers-reduced-motion: reduce) {
  .door .arch { top: 0; height: 100%; clip-path: inset(0 round var(--rt) var(--rt) var(--rb) var(--rb)); }
  .door .arch::after { top: 0; bottom: 0; }
  .door__fix { position: absolute; left: 0; top: 0; height: 100%; }
}
/* repli automatique : si un navigateur ne colle pas l'image (vérifié par le script), la fenêtre redevient simple */
.doors-static .door .arch { top: 0; height: 100%; clip-path: inset(0 round var(--rt) var(--rt) var(--rb) var(--rb)); }
.doors-static .door .arch::after { top: 0; bottom: 0; }
.doors-static .door__fix { position: absolute; left: 0; top: 0; height: 100%; }
.door__txt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(24px, 5vw, 84px); row-gap: 8px; align-items: end; padding-inline: clamp(6px, 2vw, 30px); }
.door__top { grid-column: 1; display: flex; justify-content: flex-start; align-items: center; gap: 14px; margin-bottom: 4px; }
.door__n { font: 500 .72rem/1 var(--sans); letter-spacing: .2em; color: var(--or-ink); }
.door__tag { font: 500 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; width: max-content; color: var(--ink-soft); }
.door__t { grid-column: 1; font: 420 clamp(2rem, 3.6vw, 3.4rem)/1.02 var(--serif); letter-spacing: -.02em; color: var(--prune); }
.door__k { grid-column: 1; font: 500 .7rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or-ink); }
.door__body { grid-column: 2; grid-row: 1 / span 3; align-self: end; display: grid; gap: 12px; }
.door__p { font-size: 1rem; line-height: 1.5; max-width: 40ch; color: var(--ink-soft); }
.door__go { font: 600 .92rem/1 var(--sans); display: inline-flex; gap: 8px; align-items: center; color: var(--bordeaux); }
.door__go i { font-style: normal; transition: transform .5s var(--ease); }
.door:hover .door__go i { transform: translateX(5px); }

/* ---------- 3 · méthode : la table. La figure reste en place, le texte défile : la page avance toujours ---------- */
.mnote { grid-column: 2; margin-top: 14px; font: italic 400 1.05rem/1.4 var(--serif); color: var(--bordeaux); }

/* ---------- 4 · le studio (scène sombre) : ce que le client reçoit ---------- */
.studio { position: relative; background: var(--prune-deep); color: var(--paper); padding: clamp(72px, 10vw, 140px) 0; overflow: clip; }
.studio__bg { position: absolute; inset: 0 0 auto 0; height: min(100svh, 880px); }
.studio__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.studio__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(34, 20, 32, .92) 0%, rgba(34, 20, 32, .55) 40%, rgba(34, 20, 32, .05) 100%), linear-gradient(180deg, rgba(34, 20, 32, 0) 62%, var(--prune-deep) 100%); }
.studio__in { position: relative; display: grid; gap: clamp(48px, 6vw, 88px); }
.studio__head { display: grid; gap: clamp(18px, 2.2vw, 28px); align-content: center; min-height: clamp(260px, 38svh, 420px); justify-items: start; }
.studio__lead { max-width: 46ch; font-size: 1.12rem; color: rgba(252, 250, 246, .84); }
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.offers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offers--3 .offer { padding: clamp(22px, 2.4vw, 36px); }
.offers--3 .offer__list b { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
.offer { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 3vw, 44px); border: 1px solid rgba(252, 250, 246, .2); border-radius: 28px; background: rgba(252, 250, 246, .05); }
.offer__cap { font: 500 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--or-clair); }
.offer__t { font: 420 clamp(1.6rem, 2.6vw, 2.4rem)/1.08 var(--serif); letter-spacing: -.02em; margin-bottom: 8px; }
.offer__list li { display: grid; gap: 5px; padding: 16px 0; border-top: 1px solid rgba(252, 250, 246, .16); }
.offer__list li:last-child { border-bottom: 1px solid rgba(252, 250, 246, .16); }
.offer__list b { font: 420 clamp(1.2rem, 1.8vw, 1.5rem)/1.15 var(--serif); letter-spacing: -.01em; }
.offer__list span { color: rgba(252, 250, 246, .74); font-size: .96rem; max-width: 40ch; }
.proof { display: grid; gap: 18px; }
.proof__cap { font: 500 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--or); }
.proof__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(252, 250, 246, .22); }
.proof__list li { display: grid; gap: 8px; align-content: start; padding: 22px clamp(14px, 2vw, 30px) 4px 0; }
.proof__list li + li { padding-left: clamp(14px, 2vw, 30px); border-left: 1px solid rgba(252, 250, 246, .16); }
.proof__list b { font: 420 clamp(1.5rem, 2.4vw, 2.2rem)/1.05 var(--serif); letter-spacing: -.02em; color: var(--paper); }
.proof__list span { color: rgba(252, 250, 246, .72); font-size: .94rem; line-height: 1.45; max-width: 30ch; }
@media (max-width: 900px) { .proof__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proof__list li:nth-child(odd) { padding-left: 0; border-left: 0; } .proof__list li:nth-child(n+3) { border-top: 1px solid rgba(252, 250, 246, .16); margin-top: 18px; } }
.studio__note { max-width: 62ch; color: rgba(252, 250, 246, .8); }
.studio__note .link { white-space: nowrap; }
.studio__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; }

/* ---------- 5 · projets ---------- */
.preuves { padding: clamp(72px, 9vw, 130px) 0; }
/* la planche : quatre identités, chacune sur son fond, dans ses repères de calage.
   Le cadre est celui du studio ; chaque logo garde ses couleurs, aucune n'est modifiée. */
.planche { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(230px, 24vw, 340px); gap: clamp(14px, 1.8vw, 28px); }
.ident { position: relative; min-width: 0; container-type: size; }
.ident--awan { grid-column: 1 / 9; grid-row: 1; }
.ident--ml { grid-column: 9 / 13; grid-row: 1 / 3; }
.ident--lati { grid-column: 1 / 5; grid-row: 2; }
.ident--zs { grid-column: 5 / 9; grid-row: 2; }
.ident__link { position: absolute; inset: 0; display: block; border-radius: 22px; }
.ident__link:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 5px; }
.ident__stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 4cqh 4cqw 17cqh; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; isolation: isolate; }
.ident--awan .ident__stage { background: #fff; }
/* repères de calage dans les quatre coins : un trait fin, quatre fois */
.ident__stage::after { content: ''; position: absolute; inset: calc(14px - (1 - var(--mk, 1)) * 10px); pointer-events: none; opacity: calc(var(--mk, 1) * .7); --m: 14px; --c: var(--or);
  background: linear-gradient(var(--c), var(--c)) 0 0 / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--m) no-repeat; }
/* la zone de protection : l'espace libre autour du logo, mesuré sur sa hauteur */
.ident__zone { position: relative; display: block; width: calc(var(--lw, 60) * 1cqw); max-width: 100%; padding: calc(var(--lw, 60) * .028cqw + 6px); outline: 1px dashed rgba(161, 138, 88, calc(max(var(--zo), var(--zh)) * .85)); outline-offset: 0; border-radius: 3px; --zo: 0; --zh: 0; transition: --zh .6s var(--ease); }
.ident__link:hover .ident__zone, .ident__link:focus-visible .ident__zone { --zh: 1; }
.ident__logo { display: block; width: 100%; height: auto; max-height: 56cqh; object-fit: contain; transition: transform 1.2s var(--ease); }
.ident__link:hover .ident__logo, .ident__link:focus-visible .ident__logo { transform: scale(1.025); }
.ident--awan { --lw: 62; } .ident--ml { --lw: 76; } .ident--lati { --lw: 62; } .ident--zs { --lw: 58; }
.ident__cap { position: absolute; left: clamp(36px, 3vw, 44px); right: 36px; bottom: clamp(34px, 3vw, 42px); display: grid; gap: 4px; pointer-events: none; z-index: 2; }
.ident__cap strong { font: 420 clamp(1.25rem, 1.7vw, 1.65rem)/1.1 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.ident__cap em { font-style: normal; color: var(--ink-soft); font-size: .94rem; }
.ident__cap small { font: 500 .7rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

.ident__cap strong.visually-hidden { position: absolute; }
.preuves__all { margin-top: clamp(30px, 3.6vw, 50px); }

/* ---------- 6 · éditions + bibliothèque ---------- */
.extras { padding: 0 0 clamp(100px, 13vw, 190px); }
.extras__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 2vw, 32px); }
.ed, .bib { border-radius: 32px; padding: clamp(28px, 3.6vw, 60px); display: grid; align-content: start; gap: clamp(18px, 2vw, 28px); }
.ed { background: var(--wash); }
.bib { background: #fff; border: 1px solid var(--line); }
.ed__p { max-width: 40ch; color: var(--ink-soft); }
.ed__stack { position: relative; height: clamp(260px, 25vw, 350px); margin: 6px 0 4px; }
.cv { position: absolute; bottom: 0; width: 34%; transition: transform 1s var(--ease); }
.cv img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 30px 50px -26px rgba(56, 43, 63, .55), 0 0 0 1px rgba(56, 43, 63, .06); }
.cv figcaption { margin-top: 12px; font: 500 .7rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.cv--1 { left: 3%; transform: rotate(-5deg); transform-origin: bottom left; z-index: 1; }
.cv--2 { left: 33%; z-index: 3; transform: translateY(-16px); }
.cv--3 { left: 63%; transform: rotate(5deg); transform-origin: bottom right; z-index: 2; }
.ed:hover .cv--1 { transform: rotate(-8deg) translateX(-8px); } .ed:hover .cv--3 { transform: rotate(8deg) translateX(8px); } .ed:hover .cv--2 { transform: translateY(-26px); }
.bib__body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 36px); align-items: end; }
.bib__arch { width: 100%; aspect-ratio: 1122 / 1402; }
.bib__p { color: var(--ink-soft); max-width: 30ch; }
.rubs { margin: 16px 0 0; }
.rubs li { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); font: 420 1.35rem/1.2 var(--serif); letter-spacing: -.01em; }
.rubs li::before { content: ''; width: 18px; height: 11px; border-radius: 2px 2px 0 0; background: var(--t); flex: none; }
.rubs li:last-child { border-bottom: 1px solid var(--line); }

/* ---------- 7 · contact : la fin est claire ---------- */
.contact { position: relative; background: var(--paper); color: var(--prune); padding: clamp(120px, 15vw, 220px) 0 clamp(100px, 13vw, 190px); overflow: hidden; min-height: min(100svh, 860px); display: flex; align-items: center; }
/* la feuille vide : la page qui attend votre projet (même feuille que l'ouverture, une seule pièce posée) */
.contact__sheet { position: absolute; right: max(4vw, 24px); top: 50%; width: clamp(240px, 27vw, 400px); aspect-ratio: 100 / 128; translate: 0 -50%; rotate: 2.2deg; container-type: inline-size; background: #fff url(/assets/home/sheet.svg) 0 0 / 100% 100% no-repeat; box-shadow: 0 30px 60px -32px rgba(56, 43, 63, .5), 0 0 0 1px rgba(161, 138, 88, .28); outline: 1px dashed rgba(161, 138, 88, .6); outline-offset: 12px; pointer-events: none; }
.contact__sheet i { position: absolute; border: 1px dashed rgba(161, 138, 88, .85); background: rgba(161, 138, 88, .06); }
.contact__sheet .g--l1 { left: 6%; top: 24%; width: 46%; height: 0; border-width: 1px 0 0 0; background: none; } .contact__sheet .g--l2 { left: 6%; top: 29%; width: 32%; height: 0; border-width: 1px 0 0 0; background: none; }
.contact__sheet .g--arch { left: 61%; top: 14.8%; width: 33%; height: 44.5%; border-radius: 999px 999px 0 0; }
.contact__sheet .g--c1 { left: 6%; top: 74%; width: 27.3%; height: 21.3%; } .contact__sheet .g--c2 { left: 36.3%; top: 74%; width: 27.3%; height: 21.3%; } .contact__sheet .g--c3 { left: 66.6%; top: 74%; width: 27.3%; height: 21.3%; }
.contact__pc { position: absolute; left: 19.65%; top: 84.6%; width: 31.6%; transform: translate(-50%, -50%) rotate(-4deg); filter: drop-shadow(0 .8cqw 1.2cqw rgba(56, 43, 63, .3)); }
.contact__pc img { display: block; width: 100%; height: auto; clip-path: inset(6.5%); }
.contact__sheet b { position: absolute; left: 6%; bottom: 3%; font: 500 2.4cqw/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--or-ink); }
@media (max-width: 980px) { .contact__sheet { display: none; } }
.contact__in { position: relative; display: grid; gap: clamp(18px, 2.2vw, 30px); justify-items: start; }
.contact__t { font: 420 clamp(3.2rem, 9.6vw, 10.4rem)/.9 var(--serif); letter-spacing: -.045em; font-variation-settings: "opsz" 72; max-width: 6em; }
.contact__p { max-width: 36ch; font-size: 1.15rem; color: var(--ink-soft); }
.mail { display: inline-flex; align-items: center; gap: 18px; padding: 10px 10px 10px 32px; border-radius: 999px; background: var(--bordeaux); color: var(--paper); font: 500 clamp(1rem, 1.7vw, 1.5rem)/1 var(--sans); transition: transform .5s var(--ease), background .4s; }
.mail .btn__dot { width: 48px; height: 48px; background: rgba(252, 250, 246, .16); color: var(--paper); }
.mail:hover { background: #6A2436; } .mail:hover .btn__dot { transform: translate(3px, -2px) scale(1.06); } .mail:active { transform: scale(.98); }
.contact__s { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; font: 500 .74rem/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.contact__mel { margin: -6px 0 0; font: 400 .98rem/1.5 var(--sans); color: var(--ink-soft); }
.contact__mel a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(123, 44, 63, .5); text-decoration-thickness: 1px; text-underline-offset: .24em; }
.contact__mel a:hover, .contact__mel a:focus-visible { color: var(--bordeaux); text-decoration-color: currentColor; }

/* ---------- responsive : le téléphone d'abord ---------- */
@media (max-width: 980px) {
  .nav { grid-template-columns: minmax(0, 1fr) auto; }
  .nav__links, .nav .btn--sm { display: none; }
  .nav__menu { display: inline-flex; }
  .doors { --dh: min(52svh, 480px); }
  .door__txt { grid-template-columns: 1fr; }
  .door__body { grid-column: 1; grid-row: auto; }
  .door__t { font-size: clamp(1.9rem, 7.6vw, 2.8rem); }
  .studio__head { min-height: 0; padding-top: 20px; }
  .studio__bg { height: 70svh; } .studio__bg img { object-position: 78% 50%; }
  .offers { grid-template-columns: 1fr; }
  .planche { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ident, .ident--awan, .ident--ml, .ident--lati, .ident--zs { grid-column: 1; grid-row: auto; height: clamp(250px, 74vw, 380px); }
  .ident--ml { height: clamp(320px, 100vw, 480px); }
  .ident__stage::after { --m: 12px; }
  .ident--awan { --lw: 70; } .ident--ml { --lw: 70; } .ident--lati { --lw: 66; } .ident--zs { --lw: 64; }
  .extras__grid { grid-template-columns: 1fr; }
  .bib__body { grid-template-columns: 1fr; } .bib__arch { max-width: 300px; }
  .foot__in { grid-template-columns: 1fr; }
  .cv { width: 31%; } .cv figcaption { font-size: .72rem; letter-spacing: .04em; line-height: 1.25; text-align: center; white-space: normal; }
  .ed__stack { height: clamp(250px, 70vw, 330px); }
  .contact { min-height: 0; align-items: flex-start; }
  .next { grid-template-columns: 1fr; gap: 14px; }
}

/* mouvement réduit : état final, rien ne se déplace */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.no-motion .ln__in { transform: none; visibility: visible; }
.no-motion [data-rev], .no-motion [data-hero="fade"] { opacity: 1; transform: none; filter: none; }

/* aperçu du résultat sur la table (étape 3) */

/* plaques de nom sous les trois entrées (étape 3) */

/* le texte se découvre : mots qui montent derrière un masque, phrases qui se posent */
.js [data-split] { visibility: hidden; }
.js [data-split].is-split { visibility: visible; }
.js-fail [data-split], .no-motion [data-split] { visibility: visible; }
.wd { display: inline-block; }
.wd--m { clip-path: inset(-.2em -.14em -.22em -.14em); }
.wd__i { display: inline-block; will-change: transform; }

/* détails de finition */
.contact__s .link { font: inherit; letter-spacing: inherit; text-transform: inherit; padding-bottom: 3px; }

/* liens du contenu (soulignement discret) et cibles tactiles du pied de page */
.tl { text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: .22em; text-decoration-thickness: 1px; transition: text-decoration-color .3s var(--ease), color .3s var(--ease); }
.tl:hover { color: var(--bordeaux); text-decoration-color: currentColor; }
.cv figcaption a { color: inherit; }
.cv figcaption a::after { content: ''; position: absolute; inset: 0; }

/* ce qui se passe après le message */
.next { counter-reset: n; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); width: min(100%, 980px); margin-top: clamp(14px, 2vw, 28px); padding: clamp(20px, 2.4vw, 32px); border-radius: 24px; background: rgba(252, 250, 246, .93); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(56, 43, 63, .35); }
.next li { counter-increment: n; display: grid; align-content: start; gap: 8px; }
.next li b { font: 500 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--or-ink); }
.next li b::before { content: counter(n, decimal-leading-zero) " · "; }
.next li span { color: var(--ink-soft); font-size: .96rem; max-width: 32ch; }
@media (max-width: 980px) { .next { grid-template-columns: 1fr; gap: 14px; } }

/* la bibliothèque, sur l'accueil : des portes entières cliquables, plus de phrases de liens */
.bib__arch { display: block; }
.bib__arch img { transition: transform 1.2s var(--ease); }
.bib__arch:hover img { transform: scale(1.04); }
.rubs li a { display: block; flex: 1; padding: 11px 0; margin: -11px 0; }
.rubs li a:hover { color: var(--bordeaux); }
.bib__doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bdoor { position: relative; display: grid; gap: 6px; align-content: end; min-height: 128px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); transition: border-color .4s var(--ease), background .4s var(--ease), transform .5s var(--ease); }
.bdoor b { font: 420 1.35rem/1.1 var(--serif); letter-spacing: -.015em; padding-right: 28px; }
.bdoor__k { font: 500 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--or-ink); }
.bdoor__go { position: absolute; right: 18px; bottom: 18px; font-size: 1.05rem; transition: transform .5s var(--ease); }
.bdoor:hover, .bfeat:hover { border-color: var(--bordeaux); transform: translateY(-2px); }
.bdoor:hover .bdoor__go, .bfeat:hover .bdoor__go { transform: translateX(5px); }
.bfeat { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; padding: 12px 52px 12px 12px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); transition: border-color .4s var(--ease), transform .5s var(--ease); }
.bfeat img { width: 120px; height: 84px; border-radius: 12px; object-fit: cover; }
.bfeat__t { display: grid; gap: 6px; }
.bfeat__t b { font: 420 1.2rem/1.2 var(--serif); letter-spacing: -.01em; }
.bfeat .bdoor__go { right: 18px; top: 50%; bottom: auto; margin-top: -.6em; }
@media (max-width: 980px) { .bib__doors { grid-template-columns: 1fr; } .bdoor { min-height: 96px; } .bfeat { grid-template-columns: 88px minmax(0, 1fr); } .bfeat img { width: 88px; height: 72px; } }

/* ---------- 02 · ESSAYER : « Votre marque, en direct » ----------
   Un geste (écrire le nom de sa marque), deux choix (l'ambiance, le type de site). La planche de marque (logo, cinq couleurs, deux polices) et un VRAI site, dans un
   téléphone, se composent sous les yeux : même moteur de couleur et mêmes sites de démonstration que l'Atelier chromatique. Quand l'ambiance ou le site change, une
   vague de carreaux de zellige (une toile, jamais du DOM) recouvre la scène puis la découvre. Tout ce qui est interactif est caché sans JavaScript ; la planche et le
   téléphone restent alors visibles, en exemple. Les tailles de la scène sont en unités de conteneur (cqw) : la même composition à toutes les largeurs. */
.hm { position: relative; background: var(--prune-deep); color: var(--paper); padding: clamp(64px, 9vw, 128px) 0 clamp(64px, 8vw, 116px); overflow: clip; }
.hm::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 46% at 78% 40%, rgba(123, 44, 63, .34), transparent 70%), radial-gradient(44% 40% at 8% 90%, rgba(91, 97, 53, .22), transparent 70%); pointer-events: none; }
.hm__in { position: relative; width: min(1360px, 100% - 2 * var(--gut)); margin-inline: auto; }
.hm__tete { display: grid; gap: clamp(16px, 2vw, 26px); max-width: 60rem; margin-bottom: clamp(32px, 5vw, 64px); }
.hm__titre { max-width: 26ch; font-size: clamp(2.05rem, 4.2vw, 4.1rem); }
.hm__chapo { max-width: 56ch; font-size: clamp(1rem, 1.3vw, 1.14rem); color: rgba(252, 250, 246, .82); }
.hm__grille { display: grid; gap: clamp(36px, 5vw, 72px); }
.hm__commandes { display: grid; gap: clamp(22px, 2.6vw, 32px); align-content: start; min-width: 0; }
.hm__lib { display: block; margin-bottom: 12px; font: 500 .72rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair); }
.hm__nom { display: block; width: 100%; padding: 4px 0 12px; border: 0; border-bottom: 1px solid rgba(252, 250, 246, .42); border-radius: 0; background: none; color: var(--paper); font: italic 400 clamp(2.1rem, 4.4vw, 3.6rem)/1.1 var(--serif); letter-spacing: -.02em; -webkit-appearance: none; appearance: none; }
.hm__nom::placeholder { color: rgba(252, 250, 246, .58); }
.hm__nom:focus { outline: none; border-bottom-color: var(--or-clair); box-shadow: 0 1px 0 var(--or-clair); }
.hm__puces { display: flex; flex-wrap: wrap; gap: 8px; }
.hm__puce { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 12px; border: 1px solid rgba(252, 250, 246, .3); border-radius: 999px; font: 500 .92rem/1 var(--sans); color: rgba(252, 250, 246, .92); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.hm__puce--texte { padding: 0 18px; }
.hm__puce:hover { border-color: rgba(252, 250, 246, .7); }
.hm__puce:active { transform: scale(.97); }
.hm__puce[aria-checked="true"] { background: var(--paper); border-color: var(--paper); color: var(--prune-deep); }
.hm__puce:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.hm__pts { display: inline-flex; }
.hm__pts i { width: 14px; height: 14px; margin-left: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--prune-deep); }
.hm__pts i:first-child { margin-left: 0; }
.hm__puce[aria-checked="true"] .hm__pts i { box-shadow: 0 0 0 2px var(--paper); }
.hm__sortie { display: grid; gap: 16px; padding-top: clamp(6px, 1vw, 12px); }
.hm__sortie-t { font: 420 clamp(1.25rem, 1.8vw, 1.6rem)/1.2 var(--serif); letter-spacing: -.01em; color: var(--paper); }
.hm__sortie-t b { font-weight: 420; font-style: italic; color: var(--or-clair); overflow-wrap: anywhere; }
.hm__offres { display: grid; border-top: 1px solid rgba(252, 250, 246, .2); }
.hm__offre { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 15px 2px; border-bottom: 1px solid rgba(252, 250, 246, .2); transition: padding .35s var(--ease), background .35s var(--ease); }
.hm__offre:hover { padding-inline: 12px; background: rgba(252, 250, 246, .05); }
.hm__offre:focus-visible { outline: 2px solid var(--or-clair); outline-offset: -2px; }
.hm__offre-t { display: grid; gap: 3px; min-width: 0; }
.hm__offre-t b { font: 420 1.18rem/1.2 var(--serif); letter-spacing: -.01em; }
.hm__offre-t small { font-size: .9rem; line-height: 1.4; color: rgba(252, 250, 246, .74); }
.hm__offre-p { flex: none; font: italic 400 1.25rem/1 var(--serif); color: var(--or-clair); font-variant-numeric: lining-nums; }
.hm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 6px; }
.hm__sortie .link::after { inset: -14px -8px -12px; }   /* zone du doigt : plus de 44 px de haut, le dessin ne bouge pas */
.hm__note { font-size: .84rem; line-height: 1.5; color: rgba(252, 250, 246, .62); max-width: 52ch; }

/* la scène : la planche de marque, le téléphone, et le front de lumière qui passe de l'un à l'autre état */
.hm__scene { --hm-fond: #FAF7F6; --hm-texte: #2B1A14; --hm-prin: #A24A2C; --hm-sec: #7C8B6A; --hm-acc: #E7B58C; --hm-ft: "Fraunces"; --hm-fx: "Instrument Sans"; --hm-fw: 420; --hm-fs: -.02em;
  position: relative; container-type: inline-size; min-width: 0; display: grid; gap: 18px; justify-items: center; }
.hm__planche { position: relative; width: 100%; padding: 6cqw 6cqw 6cqw; border-radius: 4cqw; background: var(--hm-fond); color: var(--hm-texte); box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .7); transition: background .25s linear, color .25s linear; overflow: hidden; display: grid; gap: 5.4cqw; align-content: start; }
.hm__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 600 max(11px, 1.7cqw)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; opacity: .72; }
.hm__cap em { font: italic 400 max(12px, 2.2cqw)/1 var(--serif); letter-spacing: 0; text-transform: none; }
.hm__logo { display: flex; align-items: center; gap: 3.4cqw; min-width: 0; }
.hm__marque { flex: none; display: grid; place-items: center; width: 12cqw; height: 14.4cqw; border-radius: 6cqw 6cqw 1.2cqw 1.2cqw; background: var(--hm-prin); color: var(--hm-fond); transition: background .25s linear, color .25s linear; }
.hm__marque i { font: italic 400 7.6cqw/1 var(--hm-ft), var(--serif); font-weight: var(--hm-fw); }
.hm__mot { flex: 1 1 0; min-width: 0; font-family: var(--hm-ft), var(--serif); font-weight: var(--hm-fw); font-size: 7.4cqw; line-height: 1.02; letter-spacing: var(--hm-fs); color: var(--hm-prin); white-space: nowrap; overflow: hidden; text-overflow: clip; transition: color .25s linear; }
.hm__nuancier { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2cqw; }
.hm__nuancier li { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7cqw; min-width: 0; }
.hm__nuancier i { display: block; height: 11cqw; border-radius: 1.6cqw; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .38); transition: background .25s linear; }
.hm__nuancier b { margin-top: .8cqw; font: 600 max(11px, 1.6cqw)/1.2 var(--sans); letter-spacing: .01em; overflow-wrap: anywhere; }
.hm__nuancier span { font: 500 max(11px, 1.65cqw)/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: -.01em; opacity: .78; overflow-wrap: anywhere; }
.hm__voix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3cqw; }
.hm__voix p { display: flex; align-items: center; gap: 2.6cqw; min-width: 0; }
.hm__voix span { display: grid; gap: .6cqw; font: 600 max(12px, 2.1cqw)/1.2 var(--sans); }
.hm__voix small { font: 400 max(11px, 1.8cqw)/1.2 var(--sans); opacity: .72; overflow: hidden; text-overflow: ellipsis; }
.hm__aa { font-size: 9.6cqw; line-height: 1; color: var(--hm-prin); }
.hm__aa--t { font-family: var(--hm-ft), var(--serif); font-weight: var(--hm-fw); }
.hm__aa--x { font-family: var(--hm-fx), var(--sans); font-weight: 500; }
.hm__tel { position: relative; width: min(66cqw, 300px); padding: 2.2cqw; border-radius: 6.4cqw; background: #14111a; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(252, 250, 246, .1); }
.hm__ecran { position: relative; overflow: hidden; border-radius: 4.4cqw; background: var(--hm-fond); aspect-ratio: 390 / 800; transition: background .25s linear; }
.hm__affiche, .hm__ecran iframe { position: absolute; left: 0; top: 0; }
.hm__affiche { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hm__ecran iframe { border: 0; transform-origin: 0 0; background: var(--hm-fond); opacity: 0; transition: opacity .45s linear; }
.hm__ecran iframe[data-pret="true"] { opacity: 1; }
/* la transition (home-marque.js) : l'ancienne planche est une copie posée sur la vraie ; un masque la retire derrière le front de lumière, dont la lueur est un filet d'or
   avec une traînée claire. Les couleurs de la nouvelle planche se posent l'une après l'autre, chacune quand la lumière la découvre (--hm-d, calculé selon sa place). */
.hm__avant { box-shadow: none; pointer-events: none; transition: none; }
.hm__avant * { transition: none; }
.hm__lueur { position: absolute; z-index: 3; pointer-events: none; }
.hm__ecran > .hm__lueur { inset: 0; }
.hm--essuie .hm__ecran iframe { transition: none; }
.hm--arrive .hm__nuancier li { animation: hm-pose .7s var(--ease) var(--hm-d, 0ms) both; }
@keyframes hm-pose { from { opacity: 0; transform: translateY(1.6cqw) scale(.93); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
.hm__scene[data-exemple="false"] .hm__cap em { visibility: hidden; }
.hm:not(.hm--on) [data-hm-ui] { display: none; }
.hm__ecran[data-pret="true"] .hm__affiche { opacity: 0; transition: opacity .5s linear .2s; }
.hm__passer { justify-self: start; padding: 8px 14px; border: 1px solid rgba(252, 250, 246, .3); border-radius: 999px; font: 500 .8rem/1 var(--sans); letter-spacing: .02em; color: rgba(252, 250, 246, .86); }
.hm__passer:hover { border-color: rgba(252, 250, 246, .7); color: var(--paper); }
.hm__passer:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }

@media (min-width: 1000px) {
  .hm__grille { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: start; }
  .hm__scene { display: block; aspect-ratio: 1 / .8; position: sticky; top: calc(var(--navh) + 32px); }
  .hm__planche { position: absolute; left: 0; top: 0; width: 72%; padding-right: 10cqw; }
  .hm__tel { position: absolute; right: 0; bottom: 0; width: 36cqw; }
}
/* planche étroite (fenêtre de 1 000 à 1 439 px) : cinq noms ne tiennent plus côte à côte ; trois couleurs puis deux, plus larges, sans jamais se toucher. La scène gagne la hauteur de la deuxième rangée. */
@media (min-width: 1000px) and (max-width: 1439px) {
  .hm__scene { aspect-ratio: 1 / .94; }
  .hm__nuancier { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.6cqw 2cqw; }
  .hm__nuancier li:nth-child(-n+3) { grid-column: span 2; }
  .hm__nuancier li:nth-child(n+4) { grid-column: span 3; }
  .hm__nuancier i { height: 8cqw; }
}
/* téléphone et tablette : le titre, le nom, puis LA SCÈNE (compacte, elle reste sous le doigt pendant qu'on choisit), puis les choix, puis ce que le studio ferait */
@media (max-width: 999px) {
  .hm__grille { gap: 22px; }
  .hm__commandes { display: contents; }
  .hm__passer { order: 0; }
  .hm__champ { order: 1; }
  .hm__scene { order: 2; display: block; position: sticky; top: 10px; z-index: 6; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1 / .74; }
  .hm__scene::before { content: ''; position: absolute; z-index: -1; inset: -12px calc(-1 * var(--gut)) -14px; background: linear-gradient(var(--prune-deep) 80%, rgba(34, 20, 32, 0)); pointer-events: none; }
  .hm__groupe { order: 3; }
  .hm__sortie { order: 4; }
  .hm__planche { position: absolute; left: 0; top: 0; width: 68%; padding: 4.8cqw 12cqw 4.8cqw 4.8cqw; gap: 4cqw; border-radius: 3.6cqw; }
  .hm__cap, .hm__voix { display: none; }
  .hm__logo { gap: 3cqw; }
  .hm__marque { width: 11cqw; height: 13.2cqw; border-radius: 5.5cqw 5.5cqw 1cqw 1cqw; }
  .hm__marque i { font-size: 7cqw; }
  .hm__mot { font-size: 6.4cqw; }
  .hm__nuancier { gap: 1.6cqw; }
  .hm__nuancier i { height: 9cqw; border-radius: 1.4cqw; }
  .hm__nuancier b, .hm__nuancier span { display: none; }
  .hm__tel { position: absolute; right: 0; bottom: 0; width: 34cqw; padding: 1.8cqw; border-radius: 5.4cqw; }
  .hm__ecran { border-radius: 3.8cqw; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) { .hm__planche, .hm__tel { will-change: transform; } }
@media (prefers-reduced-motion: reduce) {
  .hm__puce, .hm__offre, .hm__planche, .hm__marque, .hm__mot, .hm__nuancier i, .hm__ecran, .hm__ecran iframe { transition-duration: .01ms !important; }
}

/* ---------- 09/10 · accueil mobile édité : comprendre, s'orienter, croire, agir ---------- */
@media (max-width: 700px) {
  /* trois entrées : des rangées, pas trois écrans */
  .portes { padding: 40px 0 24px; }
  .portes .sec-head { margin-bottom: 20px; }
  .doors { --dh: min(40svh, 360px); gap: 54px; padding-top: 0; }
  .door__txt { row-gap: 6px; padding-inline: 4px; }
  .door__t { font-size: 1.8rem; }
  .door__p { display: none; }
  .door__body { margin-top: 2px; }
  /* le Studio : l'essentiel, le détail est sur sa page */
  .studio { padding-block: 56px 60px; }
  .studio__bg { height: 56svh; }
  /* le texte occupe toute la largeur : le voile est vertical (sombre sous les mots), jamais seulement à gauche */
  .studio__bg::after { background: linear-gradient(180deg, rgba(34, 20, 32, .9) 0%, rgba(34, 20, 32, .76) 46%, var(--prune-deep) 100%); }
  .studio__head { gap: 14px; padding-top: 0; }
  .studio__in { gap: 28px; }
  .offers { gap: 12px; }
  .offer { padding: 20px; gap: 10px; }
  .offer__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .offer__list li { padding: 7px 12px; border: 1px solid rgba(252, 250, 246, .26); border-radius: 99px; }
  .offer__list li:last-child { border-bottom: 1px solid rgba(252, 250, 246, .26); }
  .offer__list li span { display: none; }
  .offer__list b { font-size: 1rem; }
  /* les projets : une bande qu'on fait glisser */
  .preuves { padding: 48px 0 40px; }
  .preuves .sec-head { margin-bottom: 20px; }
  .planche { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gut)); padding: 4px var(--gut) 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .planche::-webkit-scrollbar { display: none; }
  .ident, .ident--awan, .ident--ml, .ident--lati, .ident--zs { flex: 0 0 74%; scroll-snap-align: center; height: 250px; }
  .ident--ml { height: 250px; }
  .preuves__all { margin-top: 6px; }
  /* éditions et bibliothèque : ce qui sert à choisir */
  .extras { padding-bottom: 56px; }
  .ed, .bib { padding: 26px 22px; border-radius: 26px; gap: 14px; }
  .bib__body { display: none; }
  .ed__stack { height: clamp(200px, 56vw, 250px); }
  .contact { padding-block: 72px 56px; }
}



/* très petit téléphone (320 à 360 px) : le surtitre tient sur une ligne */
@media (max-width: 360px) {
  .eyebrow { letter-spacing: .12em; font-size: .7rem; gap: 10px; }
  .eyebrow::before { width: 22px; }
}

/* le menu : composant commun du site (bloc MENU de site-menu.css, repris à la fabrication) */
:root { --plum-deep: var(--prune-deep); --gold: var(--or); --rose: #D9A9B4; }
/* MENU:DEBUT */
/* ------------------------------------------------------------
   2 · L'ÉCRAN DU MENU — le même sur l'accueil et sur toutes les pages (refait le 10/10/2026)
   ------------------------------------------------------------
   Un plan de l'atelier : une règle graduée à gauche, cinq entrées sur une même grille, un seul niveau de lecture.
   Chaque entrée est un titre (qui mène à la page), puis, sur une seule ligne, les pages qui en dépendent.
   À droite sur grand écran, une planche : ce qu'on trouvera derrière l'entrée survolée, avec sa phrase et son numéro.
   Fermé, le menu reste dans la page (les liens restent lisibles par Google) mais il est invisible, inatteignable
   au doigt et retiré du clavier par `inert`.
   ------------------------------------------------------------ */
.site-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: block;
  padding: 0;
  background: var(--plum-deep, #221420);
  color: #fcfaf6;
  /* Le menu défile LUI-MÊME quand il dépasse l'écran ; la page derrière reste immobile. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  pointer-events: none;
  transition: clip-path 0.65s var(--ease, cubic-bezier(0.22, 0.7, 0.25, 1)), visibility 0s 0.65s;
}

.site-menu-overlay.est-ouvert {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  pointer-events: auto;
  transition: clip-path 0.65s var(--ease, cubic-bezier(0.22, 0.7, 0.25, 1));
}

body.menu-open-lock {
  overflow: hidden;
}

/* 🚨 Remise à zéro : `styles.css` (la prod) style les balises nues `nav a` en pastilles bordeaux centrées. */
.site-menu-overlay a {
  display: block;
  min-height: 0;
  justify-content: flex-start;
  align-items: initial;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font-weight: 400;
}

.site-menu-panel {
  width: min(1240px, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(16px, 2.4vw, 30px) clamp(22px, 5vw, 64px) clamp(22px, 3vw, 38px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(40px, 7vw, 120px);
  background: transparent;
  color: inherit;
  border-radius: 0;
  box-shadow: none;
}
/* sans planche (menu anglais) : la liste prend toute la largeur utile */
.site-menu-panel--seule { grid-template-columns: minmax(0, 1fr); }
.site-menu-panel--seule .site-menu-portes { max-width: 760px; }

/* ------------------------------------------------------------
   3 · L'EN-TÊTE DU PANNEAU — le logo blanc et la croix
   ------------------------------------------------------------ */
.site-menu-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.site-menu-logo {
  display: block;
  width: 150px;
  max-width: 48vw;
  height: auto;
}

.site-menu-title {
  display: none;
}

.site-menu-close {
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(252, 250, 246, 0.3);
  border-radius: 50%;
  background: transparent;
  color: #fcfaf6;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease);
}

.site-menu-close:hover,
.site-menu-close:focus-visible {
  background: rgba(252, 250, 246, 0.1);
  border-color: var(--gold, #a18a58);
}

/* ------------------------------------------------------------
   4 · LES ENTRÉES — une règle, un numéro, un titre, une ligne de pages
   ------------------------------------------------------------ */
.site-menu-portes {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  display: block;               /* annule `nav { display:flex }` de la prod (et son centrage) */
  align-items: stretch;
  justify-content: flex-start;
  grid-template-columns: none;
  width: auto;
  gap: 0;
  margin: clamp(14px, 2.6vh, 30px) 0;
  padding-left: 30px;
}
@media (min-width: 901px) {
  /* cinq rangées égales : la liste a la hauteur de la planche, le rythme est régulier */
  .site-menu-portes { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; height: auto; }
  /* rangées de hauteur égale tant qu'elles sont repliées ; une rangée dépliée GRANDIT de la hauteur de ses pages (base : le contenu), elle ne déborde jamais sur la suivante */
  .site-menu-porte { flex: 1 0 auto; align-content: center; width: 100%; min-height: clamp(72px, 9.4vh, 100px); }
}
/* la règle : un trait gradué, comme sur le bord d'une table de travail */
.site-menu-portes::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: repeating-linear-gradient(to bottom, rgba(252, 250, 246, 0.26) 0 1px, transparent 1px 9px);
}

.site-menu-porte {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 48px;
  column-gap: 8px;
  align-items: baseline;
  padding: clamp(10px, 1.7vh, 18px) 0 clamp(10px, 1.7vh, 18px);
  border-top: 1px solid rgba(252, 250, 246, 0.11);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease, ease), transform 0.7s var(--ease, ease);
}
.site-menu-porte:last-child { border-bottom: 1px solid rgba(252, 250, 246, 0.11); }
/* le repère de l'entrée : un trait doré sur la règle, qui s'allonge quand on la regarde */
.site-menu-porte::before {
  content: "";
  position: absolute;
  left: -30px;
  top: calc(clamp(10px, 1.7vh, 18px) + 0.62em);
  width: 14px;
  height: 1px;
  background: var(--gold, #a18a58);
  transition: width 0.5s var(--ease, ease), background 0.3s;
}
.site-menu-porte:hover::before,
.site-menu-porte:focus-within::before { width: 26px; background: var(--rose, #d9a9b4); }

.site-menu-overlay.est-ouvert .site-menu-porte {
  opacity: 1;
  transform: none;
}
.site-menu-overlay.est-ouvert .site-menu-porte:nth-child(2) { transition-delay: 0.05s; }
.site-menu-overlay.est-ouvert .site-menu-porte:nth-child(3) { transition-delay: 0.1s; }
.site-menu-overlay.est-ouvert .site-menu-porte:nth-child(4) { transition-delay: 0.15s; }
.site-menu-overlay.est-ouvert .site-menu-porte:nth-child(5) { transition-delay: 0.2s; }

.site-menu-porte__num {
  grid-column: 1;
  grid-row: 1;
  color: var(--gold, #a18a58);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.site-menu-porte__titre {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  align-items: center;
  color: #fcfaf6;
  font-family: var(--serif);
  font-weight: 420;
  font-size: clamp(2rem, min(3.7vw, 5.4vh), 3.3rem);
  letter-spacing: -0.028em;
  line-height: 1.04;
  transition: color 0.3s var(--ease, ease);
}
.site-menu-porte__titre::after {
  content: "→";
  font-family: var(--sans);
  font-size: 0.5em;
  color: var(--rose, #d9a9b4);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s var(--ease, ease), transform 0.5s var(--ease, ease);
}

.site-menu-porte:hover .site-menu-porte__titre,
.site-menu-porte__titre:hover,
.site-menu-porte__titre:focus-visible {
  background: transparent;
  color: var(--rose, #d9a9b4);
}
.site-menu-porte:hover .site-menu-porte__titre::after,
.site-menu-porte__titre:focus-visible::after { opacity: 1; transform: none; }

.site-menu-porte__desc {
  grid-column: 2;
  grid-row: 2;
  margin: 2px 0 0;
  color: rgba(252, 250, 246, 0.62);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.45;
}

.site-menu-porte__enfants {
  grid-column: 2 / -1;
  grid-row: 3;
  list-style: none;
  margin: 0;
  padding: 0;
  /* les pages de la porte : une ou deux colonnes selon la place, chacune avec son titre et sa phrase */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr));
  column-gap: 30px;
  /* repliées : on ne voit que les titres ; le + de la rangée les déplie (celle de la page où l'on se trouve s'ouvre d'elle-même) */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.55s var(--ease, ease), opacity 0.35s var(--ease, ease), visibility 0s linear 0.55s;
}
.site-menu-porte.est-deplie .site-menu-porte__enfants { max-height: 760px; padding: 2px 0 6px; opacity: 1; visibility: visible; transition-delay: 0s; }
.site-menu-porte__enfants li { min-width: 0; }

/* le + : déplie les pages de la rangée (cercle fin, deux traits) */
.site-menu-porte__plus {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.site-menu-porte__plus i { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(161, 138, 88, 0.7); transition: box-shadow 0.3s, background 0.3s; }
.site-menu-porte__plus i::before, .site-menu-porte__plus i::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--rose, #d9a9b4); }
.site-menu-porte__plus i::before { width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; }
.site-menu-porte__plus i::after { width: 1.5px; height: 12px; margin: -6px 0 0 -0.75px; transition: transform 0.4s var(--ease, ease); }
.site-menu-porte__plus:hover i, .site-menu-porte__plus:focus-visible i { box-shadow: inset 0 0 0 1px var(--rose, #d9a9b4); background: rgba(217, 169, 180, 0.12); }
.site-menu-porte__plus:focus-visible { outline: 2px solid var(--rose, #d9a9b4); outline-offset: 1px; }
.site-menu-porte.est-deplie .site-menu-porte__plus i::after { transform: scaleY(0); }

.site-menu-porte__enfants a {
  display: grid;
  gap: 1px;
  /* la ligne fait ~56 px : plus que la taille d'un doigt. */
  padding: 10px 0;
  color: rgba(252, 250, 246, 0.86);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.3s var(--ease, ease);
}
.site-menu-porte__enfants a b {
  font: 420 1.2rem/1.2 var(--serif);
  letter-spacing: -0.01em;
  color: #fcfaf6;
  transition: color 0.3s var(--ease, ease);
}
.site-menu-porte__enfants a span {
  font: 400 0.84rem/1.4 var(--sans);
  letter-spacing: 0;
  color: rgba(252, 250, 246, 0.64);
}

.site-menu-porte__enfants a:hover,
.site-menu-porte__enfants a:focus-visible {
  background: transparent;
  color: var(--rose, #d9a9b4);
}
.site-menu-porte__enfants a:hover b,
.site-menu-porte__enfants a:focus-visible b { color: var(--rose, #d9a9b4); }

.site-menu-porte__note {
  grid-column: 2;
  grid-row: 2;
  margin: 2px 0 0;
  color: rgba(252, 250, 246, 0.62);
  font-family: var(--sans);
  font-size: 0.95rem;
}

/* La page où l'on se trouve déjà : un point doré après le titre, et une couleur. */
.site-menu-porte__titre[aria-current],
.site-menu-porte__enfants a[aria-current="page"] b {
  color: var(--rose, #d9a9b4);
}

.site-menu-porte__titre[aria-current]::after {
  content: "";
  width: 0.14em;
  height: 0.14em;
  margin-left: 0.1em;
  border-radius: 50%;
  background: var(--gold, #a18a58);
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   4 bis · LA PLANCHE — ce qu'on trouvera derrière l'entrée survolée (grand écran)
   ------------------------------------------------------------ */
.site-menu-apercu {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  width: min(100%, 540px, calc((100vh - 290px) * 2));
  margin: clamp(14px, 2.6vh, 30px) 0;
}

.site-menu-apercu__arche {
  position: relative;
  aspect-ratio: 2 / 1;
  border: 1px solid rgba(161, 138, 88, 0.55);
  overflow: hidden;
  background: #f4f5f7;
  border-radius: 4px;
}
/* les quatre repères de calage, hors de la planche */
.site-menu-apercu::before {
  content: "";
  position: absolute;
  inset: -9px;
  pointer-events: none;
  --m: 14px;
  --c: rgba(161, 138, 88, 0.85);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--m) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--m) no-repeat;
}
.site-menu-apercu { position: relative; }
.site-menu-apercu__legendes {
  position: relative;
  height: 4.6em;
  margin-top: 26px;
}
.site-menu-apercu__legendes p {
  position: absolute;
  inset: 0 0 auto 0;
  margin: 0;
  color: rgba(252, 250, 246, 0.78);
  font-family: var(--serif);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.5s var(--ease, ease);
}
.site-menu-apercu__legendes b {
  display: block;
  margin-bottom: 6px;
  color: var(--gold, #a18a58);
  font: 600 11px/1 var(--sans);
  font-style: normal;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.site-menu-apercu figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.55s var(--ease, ease), transform 1s var(--ease, ease);
}

.site-menu-apercu img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-menu-overlay[data-porte="0"] .site-menu-apercu figure[data-porte="0"],
.site-menu-overlay[data-porte="1"] .site-menu-apercu figure[data-porte="1"],
.site-menu-overlay[data-porte="2"] .site-menu-apercu figure[data-porte="2"],
.site-menu-overlay[data-porte="3"] .site-menu-apercu figure[data-porte="3"],
.site-menu-overlay[data-porte="4"] .site-menu-apercu figure[data-porte="4"] {
  opacity: 1;
  transform: none;
}

.site-menu-overlay[data-porte="0"] .site-menu-apercu__legendes p[data-porte="0"],
.site-menu-overlay[data-porte="1"] .site-menu-apercu__legendes p[data-porte="1"],
.site-menu-overlay[data-porte="2"] .site-menu-apercu__legendes p[data-porte="2"],
.site-menu-overlay[data-porte="3"] .site-menu-apercu__legendes p[data-porte="3"],
.site-menu-overlay[data-porte="4"] .site-menu-apercu__legendes p[data-porte="4"] {
  opacity: 1;
}

/* Grand écran : la phrase de chaque entrée vit sous la planche, pas dans la liste (la liste doit tenir sans défiler). */
@media (min-width: 901px) {
  .site-menu-porte__desc {
    display: none;
  }
}

/* ------------------------------------------------------------
   5 · LE PIED DU PANNEAU — la recherche et les réseaux
   ------------------------------------------------------------ */
.site-menu-foot {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(252, 250, 246, 0.12);
}

.site-menu-search {
  flex: 1 1 340px;
  max-width: 520px;
}

.site-menu-search .search-input {
  width: 100%;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(252, 250, 246, 0.3);
  border-radius: 999px;
  background: rgba(252, 250, 246, 0.06);
  color: #fcfaf6;
  font-family: var(--sans);
  font-size: 0.95rem;
}

.site-menu-search .search-input::placeholder {
  color: rgba(252, 250, 246, 0.62);
}

.site-menu-search .search-results {
  max-height: 38vh;
  margin-top: 10px;
  overflow-y: auto;
}

.site-menu-search .search-results a {
  padding: 10px 4px;
  color: #fcfaf6;
}

.site-menu-social {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  min-height: 46px;
  align-items: center;
}

.site-menu-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(252, 250, 246, 0.86);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
}

.site-menu-social a:hover,
.site-menu-social a:focus-visible {
  background: transparent;
  color: var(--rose, #d9a9b4);
}

.site-menu-social svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  opacity: 0.92;
}

/* le bouton de contact : sur téléphone, collé en bas du menu, toujours sous le pouce ; sur grand écran, la porte « Contact » suffit */
.site-menu-cta {
  display: none;
}

/* ------------------------------------------------------------
   6 · PETIT ÉCRAN — une colonne : la planche s'efface, une entrée = un titre et une ligne de pages ; tout tient sans défiler
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .site-menu-panel {
    display: flex;
    flex-direction: column;
    padding: 14px 22px 0;
  }

  .site-menu-apercu {
    display: none;
  }

  .site-menu-portes {
    margin: 10px 0 6px;
    padding-left: 22px;
  }
  .site-menu-portes::before { width: 5px; background: repeating-linear-gradient(to bottom, rgba(252, 250, 246, 0.26) 0 1px, transparent 1px 8px); }

  .site-menu-porte {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 6px;
    padding: 8px 0 8px;
  }
  .site-menu-porte::before { left: -22px; width: 10px; }
  .site-menu-porte:hover::before, .site-menu-porte:focus-within::before { width: 18px; }

  .site-menu-porte__titre {
    font-size: clamp(1.9rem, 8.4vw, 2.5rem);
  }
  .site-menu-porte__desc { margin: 0; font-size: 0.9rem; }
  .site-menu-porte__enfants { grid-template-columns: minmax(0, 1fr); margin-top: 2px; }
  .site-menu-porte__enfants a { padding: 8px 0; }
  .site-menu-porte__enfants a b { font-size: 1.14rem; }
  .site-menu-porte__enfants a span { font-size: 0.82rem; }

  .site-menu-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .site-menu-cta {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: auto -22px 0;
    padding: 22px 22px calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--plum-deep, #221420) 66%, rgba(34, 20, 32, 0));
  }
  .site-menu-overlay .site-menu-cta__lien {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 56px;
    border-radius: 999px;
    background: var(--bordeaux, #7b2c3f);
    color: #fcfaf6;
    font: 600 1rem/1 var(--sans);
    text-align: center;
    text-decoration: none;
    transition: background 0.3s var(--ease, ease);
  }
  .site-menu-overlay .site-menu-cta__lien:hover,
  .site-menu-overlay .site-menu-cta__lien:focus-visible { background: #6a2436; }

  .site-menu-search {
    flex: none;
    width: 100%;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu-overlay,
  .site-menu-porte,
  .site-menu-porte__enfants,
  .site-menu-porte__titre::after,
  .site-menu-apercu figure {
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

/* ------------------------------------------------------------
   7 · LA BARRE DU HAUT — trois entrées, chacune ouvre ses pages (grand écran, 20/10/2026)
   ------------------------------------------------------------
   « Studio », « Éditions » et « Bibliothèque » ne sont plus trois liens muets : chaque entrée s'ouvre sur ses pages, avec la phrase de chacune
   (au survol à la souris, au premier appui du doigt, ou aux touches Entrée et Flèche bas). Un second appui, ou le premier lien du panneau,
   mène à la page de l'entrée ; sans JavaScript, l'entrée reste un lien vers cette page. Le panneau s'ouvre sous la barre, de la même largeur.
   Les règles sont écrites contre celles de `styles.css` (prod), qui imposent leur style à tout lien de la barre.
   ------------------------------------------------------------ */
.nav-item { position: static; display: flex; align-items: center; }
.nav-parent { display: inline-flex; align-items: center; gap: 0.5em; }
.nav-chev { flex: none; width: 0.72em; height: 0.46em; opacity: 0.7; transition: transform 0.35s var(--ease, ease), opacity 0.3s; }
.nav-item.is-open .nav-chev { transform: rotate(180deg); opacity: 1; }

.nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  white-space: normal;
  cursor: default;
  transition: opacity 0.22s var(--ease, ease), transform 0.36s var(--ease, ease), visibility 0s linear 0.36s;
}
.nav-panel:focus { outline: none; }
/* le pont : la souris traverse l'espace entre la barre et le panneau sans le refermer */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-item.is-open > .nav-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }

.nav-panel__in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
  padding: clamp(24px, 2.6vw, 36px) clamp(26px, 3.2vw, 48px);
  border: 1px solid rgba(56, 43, 63, 0.1);
  border-radius: 30px;
  background: #fcfaf6;
  color: var(--ink, #241722);
  box-shadow: 0 46px 90px -42px rgba(56, 43, 63, 0.55), 0 2px 0 rgba(255, 255, 255, 0.7) inset;
  text-align: left;
  letter-spacing: 0;
}
.nav-panel__tete { grid-column: 1; grid-row: 1; }
.nav-panel__liste { grid-column: 2; grid-row: 1 / span 2; }
.nav-panel__lead { margin: 0; max-width: 18ch; font: 420 clamp(1.5rem, 2.1vw, 1.95rem)/1.12 var(--serif); letter-spacing: -0.02em; color: var(--ink, #241722); }
.nav-panel__texte { margin: 12px 0 0; max-width: 34ch; font: 400 0.95rem/1.55 var(--sans); color: var(--ink-soft, #5f4c5a); }
.nav-panel__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; align-content: start; }
.nav-panel__liste li { min-width: 0; }

:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien {
  position: static;
  display: grid !important;
  gap: 3px;
  align-content: start;
  padding: 14px 18px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: var(--ink, #241722) !important;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none !important;
  text-shadow: none;
  transition: background 0.3s var(--ease, ease);
}
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien::after { content: none !important; }
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien b {
  display: inline-flex;
  align-items: center;
  font: 420 1.3rem/1.15 var(--serif);
  letter-spacing: -0.015em;
  color: inherit;
}
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien b::after {
  content: "→";
  margin-left: 0.5em;
  font: 400 0.7em/1 var(--sans);
  color: var(--bordeaux, #7b2c3f);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--ease, ease), transform 0.4s var(--ease, ease);
}
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien span {
  font: 400 0.88rem/1.4 var(--sans);
  letter-spacing: 0;
  color: var(--ink-soft, #5f4c5a);
}
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien:hover,
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien:focus-visible {
  background: rgba(55, 31, 49, 0.06) !important;
  color: var(--bordeaux, #7b2c3f) !important;
}
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien:hover b::after,
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien:focus-visible b::after { opacity: 1; transform: none; }
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien:focus-visible { outline: 2px solid var(--bordeaux, #7b2c3f); outline-offset: -2px; }
/* la page où l'on se trouve : un point doré avant le titre */
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien[aria-current="page"] b::before {
  content: "";
  width: 0.34em;
  height: 0.34em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--gold, #a18a58);
}

:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__cta {
  position: static;
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  align-self: start;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--bordeaux, #7b2c3f) !important;
  color: #fcfaf6 !important;
  font: 600 0.92rem/1 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition: background 0.3s var(--ease, ease), transform 0.4s var(--ease, ease);
}
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__cta::after { content: none !important; }
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__cta:hover,
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__cta:focus-visible { background: #6a2436 !important; color: #fcfaf6 !important; }
:is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__cta:focus-visible { outline: 2px solid var(--ink, #241722); outline-offset: 3px; }

/* l'entrée où l'on se trouve : le même trait sous le mot que pour une page courante */
:is(.site-header, .nav) .nav-parent[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.42em;
  text-decoration-color: var(--bordeaux, #7b2c3f);
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-chev, :is(.site-header, .nav) :is(.site-nav, .nav__links) .nav-panel a.nav-panel__lien b::after { transition-duration: 0.001ms !important; transition-delay: 0s !important; }
}
/* MENU:FIN */

/* pied de page : celui du site (bloc FOOTER de zellij-harmonie.css, repris à la fabrication) */
/* FOOTER:DEBUT */
footer {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(120px, auto);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(28px, 5vw, 80px);
  align-items: start;
  justify-items: start;
  padding: clamp(56px, 8vh, 88px) max(clamp(20px, 4vw, 56px), calc((100% - var(--wrap, 1360px)) / 2)) clamp(30px, 4vh, 44px);
  background: var(--plum-deep, #221420);
  color: #cdbbc9;
  text-align: left;
}

footer a {
  color: #cdbbc9;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.3s var(--ease, ease);
}

footer a:hover,
footer a:focus-visible,
footer .footer-links a:hover,
footer .social-links a:hover,
footer .footer-links a:focus-visible,
footer .social-links a:focus-visible {
  color: #ffffff;
}

footer > img {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  height: 34px;
  width: auto;
  margin: 0;
}

footer > p {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  max-width: 30ch;
  margin: 18px 0 0;
  color: #e7ddef;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-style: italic;
  line-height: 1.4;
}

footer .footer-contact {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  margin-top: 18px;
  color: #e7ddef;
  text-decoration: underline;
  text-decoration-color: rgba(231, 221, 239, 0.46);
  text-underline-offset: 4px;
}

footer > .footer-links:not(.footer-legal) {
  grid-column: 2;
  grid-row: 1 / 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: start;
  gap: 4px 28px;
  margin: 0;
}

footer > .social-links {
  grid-column: 3;
  grid-row: 1 / 4;
  display: grid;
  gap: 4px;
  justify-content: start;
  margin: 0;
}

footer .footer-links a,
footer .social-links a {
  color: #cdbbc9;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-weight: 400;
}

footer .social-links svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  opacity: 0.92;
}

footer .footer-legal {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-self: stretch;
  width: auto;
  max-width: none;
  margin-inline: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px clamp(16px, 2.4vw, 30px);
  margin-top: clamp(30px, 4vh, 46px);
  padding-top: 20px;
  border-top: 1px solid rgba(217, 169, 180, 0.16);
}

footer .footer-legal a {
  min-height: 30px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  opacity: 0.78;
}

@media (max-width: 860px) {
  footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 28px;
  }

  footer > img,
  footer > p,
  footer .footer-contact {
    grid-column: 1 / -1;
  }

  footer > img { grid-row: 1; }
  footer > p { grid-row: 2; margin-top: 0; }
  footer .footer-contact { grid-row: 3; margin-top: 0; }
  footer > .footer-links:not(.footer-legal) { grid-column: 1; grid-row: 4; grid-template-columns: 1fr; }
  footer > .social-links { grid-column: 2; grid-row: 4; }
  footer .footer-legal { grid-row: 5; margin-top: 4px; }
  footer { padding-bottom: 88px; }   /* le bouton « remonter » flotte en bas à droite : il ne couvre plus un lien */
}
/* au doigt, chaque lien du pied fait au moins 44 px de haut (le dessin ne change pas beaucoup, la zone qui répond si) */
@media (max-width: 860px), (pointer: coarse) {
  footer .footer-links a, footer .social-links a, footer .footer-legal a { min-height: 44px; }
  footer .footer-contact { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
}

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--prune); color: var(--paper); padding: 12px 18px; border-radius: 99px; font: 500 .9rem/1 var(--sans); transition: top .3s var(--ease); }
.skip-link:focus { top: 12px; }