[hidden] { display: none !important; }
/* Mise en page : rythme de maison de luxe — plein écran sombre, grandes respirations blanches,
   sections éditoriales alternées image / texte. Identité fixe (charte Comlaire), un seul thème assumé. */
:root {
  --noir: #131313;
  --anthracite: #3C3C3C;
  --taupe: #A18464;
  --blanc: #F8F8F8;
  --ligne: rgba(19, 19, 19, .12);
  --ligne-claire: rgba(248, 248, 248, .16);
  --doux-clair: rgba(248, 248, 248, .74);
  --font: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, min(5vw, 6.4vh), 72px);
  --max: 1320px;
  --section: clamp(96px, min(14vw, 17.92vh), 200px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--blanc); color: var(--noir);
  font-family: var(--font); font-weight: 300; font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; line-height: 1.12; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--taupe); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--taupe); color: var(--noir); padding: 10px 18px; font-weight: 500; }
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.dark { background: var(--noir); color: var(--blanc); }

/* Type scale */
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--anthracite); }
.dark .eyebrow { color: var(--taupe); }
.display { font-size: clamp(2.5rem, min(6.2vw, 7.94vh), 5.75rem); font-weight: 300; line-height: 1.04; letter-spacing: -.02em; }
.h2 { font-size: clamp(2rem, min(4.2vw, 5.38vh), 3.6rem); }
.h3 { font-size: clamp(1.35rem, min(2vw, 2.56vh), 1.75rem); font-weight: 400; }
.lead { font-size: clamp(1.1rem, min(1.6vw, 2.05vh), 1.35rem); line-height: 1.65; max-width: 34em; }
.muted { color: var(--anthracite); }
.dark .muted { color: var(--doux-clair); }
.todo { color: var(--taupe); font-weight: 500; }
.dark .todo { color: var(--taupe); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px;
  font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid currentColor; transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn-taupe { background: var(--taupe); border-color: var(--taupe); color: var(--noir); }
.btn-taupe:hover { background: var(--blanc); border-color: var(--blanc); }
.btn-ghost:hover { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.dark .btn-ghost:hover { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }
.link {
  display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; padding-bottom: 6px;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size .6s var(--ease);
}
.link:hover { background-size: 30% 1px; }
.arrow { width: 22px; height: 10px; flex: none; transition: transform .5s var(--ease); }
a:hover .arrow { transform: translateX(5px); }

/* Media placeholders (to be replaced by real photos / videos) */
.media {
  position: relative; overflow: hidden; margin: 0; background:
    radial-gradient(120% 90% at 20% 10%, rgba(161,132,100,.28), transparent 60%),
    linear-gradient(160deg, var(--anthracite), var(--noir));
  color: var(--blanc);
}
.media::after {
  content: ""; position: absolute; inset: 14px; border: 1px solid rgba(248,248,248,.12); pointer-events: none;
}
.media figcaption {
  position: absolute; left: 28px; right: 28px; bottom: 26px; font-size: 12px; line-height: 1.6;
  letter-spacing: .04em; color: var(--doux-clair); max-width: 36em;
}
.media figcaption b { display: block; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; font-size: 11px; color: var(--taupe); margin-bottom: 4px; }
.media .zoom { position: absolute; inset: 0; transition: transform 1.6s var(--ease); background: inherit; }
a:hover .media .zoom, .media:hover .zoom { transform: scale(1.04); }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--blanc);
  padding-top: env(safe-area-inset-top, 0px);
  transition: background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.solid { background: rgba(248,248,248,.96); color: var(--noir); border-color: var(--ligne); backdrop-filter: blur(8px); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 108px; }
.menu-btn {
  justify-self: start; display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; color: inherit;
  font: 500 12px/1 var(--font); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; padding: 10px 0;
}
.burger { width: 26px; height: 10px; position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; height: 1px; background: currentColor; transition: transform .5s var(--ease), width .5s var(--ease); }
.burger::before { top: 0; width: 26px; }
.burger::after { bottom: 0; width: 17px; }
.menu-btn:hover .burger::after { width: 26px; }

/* Logo officiel (lettrage pinceau) : version blanche sur fond sombre, noire sur fond clair */
.logo { justify-self: center; display: block; position: relative; line-height: 0; }
.logo img { height: 84px; width: auto; transition: opacity .6s var(--ease); }
.logo .logo-dark { position: absolute; left: 0; top: 0; opacity: 0; }
.header.solid .logo-light { opacity: 0; }
.header.solid .logo-dark { opacity: 1; }
.footer .logo img { height: 112px; }
.menu .logo img { height: 64px; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 28px; }
.header-actions .tel { font-size: 13px; font-weight: 400; letter-spacing: .04em; }
.header .btn { padding: 12px 22px; font-size: 12px; white-space: nowrap; }
.header:not(.solid) .btn-ghost:hover { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }

/* Menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--noir); color: var(--blanc);
  display: grid; grid-template-rows: auto 1fr auto; padding-top: env(safe-area-inset-top, 0px);
  opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s;
  overflow-y: auto;
}
.menu.open { opacity: 1; visibility: visible; }
.menu-top { display: flex; justify-content: space-between; align-items: center; height: 108px; }
.close-btn { background: none; border: 0; color: inherit; font: 500 12px/1 var(--font); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; display: inline-flex; gap: 14px; align-items: center; padding: 10px 0; }
.close-x { width: 18px; height: 18px; position: relative; }
.close-x::before, .close-x::after { content: ""; position: absolute; top: 50%; left: 0; width: 18px; height: 1px; background: currentColor; }
.close-x::before { transform: rotate(45deg); } .close-x::after { transform: rotate(-45deg); }
.menu-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-content: center; padding-block: 40px; }
.menu-main a { display: block; font-size: clamp(2rem, min(4.4vw, 5.63vh), 3.6rem); font-weight: 300; line-height: 1.25; color: var(--blanc); transition: color .4s, padding-left .5s var(--ease); }
.menu-main a:hover { color: var(--taupe); padding-left: 12px; }
.menu-side { display: grid; gap: 40px; align-content: start; }
.menu-side h3 { font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--taupe); margin-bottom: 14px; }
.menu-side a, .menu-side p { display: block; font-size: 16px; color: var(--doux-clair); line-height: 2; }
.menu-side a:hover { color: var(--blanc); }
.menu.open .menu-main li { animation: rise .8s var(--ease) both; }
.menu.open .menu-main li:nth-child(2) { animation-delay: .05s } .menu.open .menu-main li:nth-child(3) { animation-delay: .1s }
.menu.open .menu-main li:nth-child(4) { animation-delay: .15s } .menu.open .menu-main li:nth-child(5) { animation-delay: .2s }
.menu.open .menu-main li:nth-child(6) { animation-delay: .25s }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--noir); color: var(--blanc); }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 68% 45%; animation: settle 14s var(--ease) both; }
@keyframes settle { from { transform: scale(1.1); } to { transform: scale(1); } }
.hero-veil { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(19,19,19,.88) 0%, rgba(19,19,19,.62) 38%, rgba(19,19,19,.12) 70%, rgba(19,19,19,.2) 100%),
  linear-gradient(180deg, rgba(19,19,19,.6) 0%, rgba(19,19,19,0) 26%, rgba(19,19,19,0) 62%, rgba(19,19,19,.85) 100%); }
/* Titre tapé au clavier */
.tw-char { opacity: 0; position: relative; }
.tw-char.on { opacity: 1; }
/* Le curseur est dessiné sur la lettre elle-même : il ne peut jamais passer à la ligne */
.tw-char.cur::after, .tw-char.cur-start::before {
  content: ""; position: absolute; top: .06em; width: .055em; min-width: 3px; height: .98em;
  background: var(--taupe); opacity: 1; animation: blink 1s steps(1) infinite;
}
.tw-char.cur::after { left: calc(100% + .05em); }
.tw-char.cur-start::before { left: -.04em; }
[data-type].typing .tw-char.cur::after, [data-type].typing .tw-char.cur-start::before { animation: none; }
@keyframes blink { 50% { opacity: 0; } }
.hero-content { position: relative; width: 100%; padding-block: calc(108px + env(safe-area-inset-top, 0px)) clamp(56px, 9vh, 96px); }
@media (max-width: 900px) { .hero-content { padding-top: calc(76px + env(safe-area-inset-top, 0px) + 12px); } }
.hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; }
.hero h1 { margin: 22px 0 28px; }
.hero h1 em { font-style: normal; color: var(--taupe); }
.hero .lead { color: var(--doux-clair); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; margin-top: 40px; }
.rating { display: grid; gap: 8px; justify-items: end; text-align: right; padding-left: 32px; border-left: 1px solid var(--ligne-claire); }
.stars { display: flex; gap: 4px; color: var(--taupe); }
.stars svg { width: 15px; height: 15px; }
.rating-score { font-size: 15px; font-weight: 400; }
.rating-meta { font-size: 12px; color: var(--doux-clair); letter-spacing: .04em; }
.scroll-cue { position: absolute; left: 50%; bottom: 0; width: 1px; height: 64px; background: var(--ligne-claire); overflow: hidden; }
.scroll-cue::after { content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: var(--taupe); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { to { top: 100%; } }

/* =====================================================================
   SECTIONS — direction « atelier graffiti de luxe » :
   fonds sombres, bandes taupe qui explosent, coulures de peinture tirées du logo,
   grandes lettres en contour, icônes au trait, mouvement partout mais maîtrisé.
   ===================================================================== */
.bg-noir { background: var(--noir); color: var(--blanc); }
.bg-anth { background: var(--anthracite); color: var(--blanc); }
.bg-taupe { background: var(--taupe); color: var(--noir); }
.bg-blanc { background: var(--blanc); color: var(--noir); }
.rel { position: relative; }
.sec { position: relative; padding-block: clamp(88px, min(11vw, 14.08vh), 160px); overflow: hidden; }
.tag { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--taupe); }
.tag::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.bg-taupe .tag { color: var(--noir); }
.title { font-size: clamp(2.3rem, min(5.6vw, 7.17vh), 5rem); font-weight: 300; line-height: 1.02; letter-spacing: -.025em; margin-top: 22px; }
.title b { font-weight: 600; }
.title .t { color: var(--taupe); }
.bg-taupe .title .t { color: var(--blanc); }
.sub { font-size: clamp(1.02rem, min(1.4vw, 1.79vh), 1.2rem); max-width: 30em; margin-top: 22px; opacity: .78; }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(48px, min(6vw, 7.68vh), 80px); }
.ico { width: 48px; height: 48px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 22px; height: 22px; }
.ico-lg { width: 64px; height: 64px; }

/* Mots qui montent un par un */
.sw .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.sw .w.wb { overflow: visible; }
.sw .nw { white-space: nowrap; }
.sw .nw > :first-child { white-space: normal; }
.sw .w > span { display: inline-block; transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.js .sw.pending .w > span { transform: translateY(105%); }

/* Coup de pinceau sous un mot */
.brush { position: relative; white-space: nowrap; display: inline-block; }
.brush svg { position: absolute; left: -4%; bottom: -.12em; width: 108%; height: .32em; overflow: visible; pointer-events: none; }
.brush path { fill: none; stroke: var(--taupe); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1) .2s; }
.bg-taupe .brush path { stroke: var(--noir); }
/* Le trait part caché et se dessine quand le mot arrive bien à l'écran */
.js .brush path { stroke-dashoffset: 600; }
.js .brush.drawn path { stroke-dashoffset: 0; }

/* Coulures de peinture (reprises des coulures du logo) */
.drip { position: absolute; left: 0; right: 0; top: -1px; height: clamp(60px, min(9vw, 11.52vh), 130px); pointer-events: none; z-index: 2; transform-origin: top; transition: transform 1.6s cubic-bezier(.3,.7,.2,1); }
.drip svg { width: 100%; height: 100%; display: block; }
.js .drip.pending { transform: scaleY(.15); }

/* Grain */
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Lettres géantes en contour qui glissent au défilement */
.ghost { position: absolute; white-space: nowrap; font-weight: 600; font-size: clamp(7rem, min(22vw, 28.16vh), 22rem); line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(161,132,100,.35); pointer-events: none; user-select: none; will-change: transform; }
.bg-taupe .ghost { -webkit-text-stroke-color: rgba(19,19,19,.22); }
.bg-blanc .ghost { -webkit-text-stroke-color: rgba(19,19,19,.1); }

/* Badge rond qui tourne */
.badge { position: absolute; width: clamp(120px, min(13vw, 16.64vh), 170px); aspect-ratio: 1; display: grid; place-items: center; z-index: 3; }
.badge svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.badge text { font: 600 10.5px var(--font); letter-spacing: .32em; text-transform: uppercase; fill: currentColor; }
.badge img { width: 34%; height: auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Bande de confiance ---------- */
.trust { background: var(--noir); color: var(--blanc); border-top: 1px solid var(--ligne-claire); }
.trust ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; padding-block: 26px; }
.trust li { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 400; }
.trust .ico { width: 30px; height: 30px; color: var(--taupe); }
.trust b { font-weight: 600; }

/* ---------- Marquees croisés ---------- */
.marquees { position: relative; height: clamp(220px, min(24vw, 30.72vh), 320px); background: var(--noir); overflow: hidden; }
.band { position: absolute; left: -5%; width: 110%; overflow: hidden; padding-block: 18px; }
.band-a { top: 16%; background: var(--taupe); color: var(--noir); transform: rotate(-3.5deg); z-index: 2; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.band-b { top: 52%; background: var(--anthracite); color: var(--blanc); transform: rotate(2.5deg); }
.track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.band-b .track { animation-direction: reverse; animation-duration: 46s; }
.track span { display: inline-flex; align-items: center; gap: 30px; padding-right: 30px; font-size: clamp(1.6rem, min(3.6vw, 4.61vh), 3rem); font-weight: 600; text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; }
.track span i { font-style: normal; color: transparent; -webkit-text-stroke: 1.4px var(--noir); font-weight: 600; }
.band-b .track span i { -webkit-text-stroke-color: var(--blanc); }
.track .spark { width: .7em; height: .7em; fill: currentColor; stroke: none; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Intro + compteurs ---------- */
.intro .ghost { top: 4%; left: 0; }
.intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, min(6vw, 7.68vh), 96px); align-items: end; position: relative; }
.counters { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: clamp(64px, min(8vw, 10.24vh), 110px); border-top: 1px solid var(--ligne-claire); position: relative; }
.counter { padding: 34px 22px 0; display: grid; gap: 10px; align-content: start; border-left: 1px solid var(--ligne-claire); }
.counter:first-child { border-left: 0; padding-left: 0; }
.counter .ico { color: var(--taupe); width: 36px; height: 36px; }
.counter strong { font-size: clamp(2.8rem, min(5vw, 6.4vh), 4.6rem); font-weight: 300; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.counter strong small { font-size: .45em; font-weight: 400; color: var(--taupe); margin-left: 4px; }
.counter p { font-size: 14px; opacity: .72; line-height: 1.5; }

/* ---------- Carrousel projets ---------- */
.carousel-wrap { position: relative; }
.carousel { display: flex; gap: clamp(16px, min(2vw, 2.56vh), 28px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--gutter); padding-bottom: 8px; cursor: grab; scroll-padding-inline: var(--gutter); }
.carousel::-webkit-scrollbar { display: none; }
.carousel.drag { cursor: grabbing; scroll-snap-type: none; }
.slide { flex: 0 0 clamp(270px, min(34vw, 43.52vh), 520px); scroll-snap-align: start; display: grid; gap: 18px; user-select: none; }
.slide:nth-child(even) { margin-top: clamp(30px, min(5vw, 6.4vh), 70px); }
.slide h3 { font-size: clamp(1.15rem, min(1.6vw, 2.05vh), 1.45rem); font-weight: 400; display: flex; justify-content: space-between; gap: 12px; }
.slide h3 .ico { width: 26px; height: 26px; color: var(--taupe); transition: transform .5s var(--ease); }
.slide:hover h3 .ico { transform: rotate(-45deg); }
.slide .cat { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
.car-ctrl { display: flex; align-items: center; gap: 24px; margin-top: 40px; }
.car-btn { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--ligne-claire); background: none; color: inherit; display: grid; place-items: center; cursor: pointer; transition: background .4s, color .4s, border-color .4s; }
.car-btn:hover { background: var(--taupe); color: var(--noir); border-color: var(--taupe); }
.car-btn .arrow { width: 22px; }
.car-prev .arrow { transform: scaleX(-1); }
.car-bar { flex: 1; height: 2px; background: var(--ligne-claire); position: relative; overflow: hidden; }
.car-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; background: var(--taupe); transition: left .3s, width .3s; }

/* Visuels de projets (emplacements, mis en scène avec la charte) */
.art { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 4px; isolation: isolate; }
.art.wide { aspect-ratio: 16 / 11; }
.art.photo { background: var(--anthracite); }
.art.photo img.inner { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.art .inner { position: absolute; inset: 0; transition: transform 1.4s var(--ease); }
.slide:hover .art .inner, .case:hover .art .inner { transform: scale(1.06) rotate(-1deg); }
.art .ph { position: absolute; left: 18px; bottom: 16px; right: 18px; z-index: 3; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.art .ph::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: blink 1.6s steps(1) infinite; }
.art-1 { background: var(--noir); color: var(--taupe); }
.art-1 .inner { background: radial-gradient(60% 60% at 70% 30%, rgba(161,132,100,.45), transparent 70%); }
.art-1 .inner img { position: absolute; width: 70%; right: -8%; top: 8%; transform: rotate(12deg); opacity: .95; }
.art-2 { background: var(--taupe); color: var(--noir); }
.art-2 .inner span { position: absolute; left: -4%; top: 10%; font-weight: 600; font-size: 9rem; line-height: .82; color: transparent; -webkit-text-stroke: 2px var(--noir); text-transform: uppercase; letter-spacing: -.04em; }
.art-3 { background: var(--anthracite); color: var(--blanc); }
.art-3 .inner { background: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(161,132,100,.18) 22px 24px); }
.art-3 .inner img { position: absolute; width: 78%; left: 11%; top: 22%; }
.art-4 { background: var(--blanc); color: var(--noir); }
.art-4 .inner { background: radial-gradient(circle at 30% 70%, var(--taupe) 0 18%, transparent 18.5%), radial-gradient(circle at 72% 32%, var(--noir) 0 12%, transparent 12.5%), radial-gradient(circle at 78% 78%, var(--anthracite) 0 7%, transparent 7.5%); }
.art-5 { background: var(--noir); color: var(--blanc); }
.art-5 .inner { background: conic-gradient(from 200deg at 50% 60%, var(--taupe), var(--anthracite), var(--noir), var(--taupe)); opacity: .9; }
.art-5 .inner img { position: absolute; width: 40%; left: 30%; top: 26%; }
.art-6 { background: var(--anthracite); color: var(--taupe); }
.art-6 .inner span { position: absolute; right: -6%; bottom: 12%; font-weight: 600; font-size: 8rem; line-height: .8; color: var(--noir); text-transform: uppercase; letter-spacing: -.05em; }
.art-6 .inner::before { content: ""; position: absolute; left: 12%; top: 12%; width: 46%; aspect-ratio: 1; border: 2px solid var(--taupe); border-radius: 50%; }

/* ---------- Pourquoi (fond taupe) ---------- */
.why .ghost { bottom: -3%; right: -2%; }
.why-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, min(2vw, 2.56vh), 28px); position: relative; }
.why-card { background: var(--noir); color: var(--blanc); padding: clamp(32px, min(3.4vw, 4.35vh), 48px); border-radius: 4px; display: grid; gap: 18px; align-content: start; transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .5s var(--ease); box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); }
.why-card:nth-child(2) { transform: translateY(40px); }
.why-card .num { font-size: 13px; font-weight: 500; color: var(--taupe); letter-spacing: .1em; }
.why-card .ico { width: 72px; height: 72px; color: var(--taupe); }
.why-card h3 { font-size: clamp(1.4rem, min(2vw, 2.56vh), 1.8rem); font-weight: 400; }
.why-card p { font-size: 15px; opacity: .72; }

/* Icône qui se dessine au survol */
.draw .ico path, .draw .ico circle, .draw .ico rect, .draw .ico line, .draw .ico polyline { stroke-dasharray: 240; stroke-dashoffset: 0; }
.draw:hover .ico path, .draw:hover .ico circle, .draw:hover .ico rect, .draw:hover .ico line, .draw:hover .ico polyline { animation: drawit 1.2s var(--ease); }
@keyframes drawit { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }

/* ---------- Expertises (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, min(1.4vw, 1.79vh), 20px); }
.xcard { position: relative; overflow: hidden; border-radius: 4px; background: var(--anthracite); color: var(--blanc); padding: clamp(28px, min(3vw, 3.84vh), 44px); display: flex; flex-direction: column; gap: 18px; min-height: 340px; isolation: isolate; transition: color .5s var(--ease); }
.xcard::before { content: ""; position: absolute; inset: 0; background: var(--taupe); z-index: -1; clip-path: circle(0% at var(--mx, 85%) var(--my, 15%)); transition: clip-path .8s var(--ease); }
.xcard:hover, .xcard:focus-visible { color: var(--noir); }
.xcard:hover::before, .xcard:focus-visible::before { clip-path: circle(150% at var(--mx, 85%) var(--my, 15%)); }
.xcard:nth-child(1) { grid-column: span 4; grid-row: span 2; min-height: 520px; }
.xcard:nth-child(2) { grid-column: span 2; }
.xcard:nth-child(3) { grid-column: span 2; }
.xcard:nth-child(4) { grid-column: span 3; }
.xcard:nth-child(5) { grid-column: span 3; }
.xcard .top { display: flex; justify-content: space-between; align-items: flex-start; }
.xcard .ico { width: 64px; height: 64px; color: var(--taupe); transition: color .5s; }
.xcard:hover .ico { color: var(--noir); }
.xcard .go { width: 52px; height: 52px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; opacity: .6; transition: transform .6s var(--ease), opacity .4s; }
.xcard:hover .go { transform: rotate(-45deg); opacity: 1; }
.xcard h3 { font-size: clamp(1.5rem, min(2.4vw, 3.07vh), 2.3rem); font-weight: 400; line-height: 1.1; margin-top: auto; }
.xcard:nth-child(1) h3 { font-size: clamp(2rem, min(4vw, 5.12vh), 3.6rem); font-weight: 300; }
.xcard p { font-size: 15px; opacity: .75; max-width: 26em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font-size: 12px; padding: 6px 13px; border: 1px solid currentColor; border-radius: 999px; opacity: .8; }
.xcard:nth-child(1) .bigicon { position: absolute; right: -40px; bottom: -40px; width: 340px; height: 340px; color: var(--taupe); opacity: .14; stroke-width: .6; z-index: -1; transition: opacity .5s, color .5s; }
.xcard:nth-child(1):hover .bigicon { color: var(--noir); opacity: .18; }

/* ---------- Réalisations (grille filtrable) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filters button { font: 500 13px var(--font); letter-spacing: .06em; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--ligne); background: none; color: var(--noir); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; transition: background .4s, color .4s, border-color .4s; }
.filters button .ico { width: 18px; height: 18px; }
.filters button[aria-pressed="true"], .filters button:hover { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.grid-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, min(2vw, 2.56vh), 28px); }
.case { display: grid; gap: 16px; align-content: start; transition: opacity .5s, transform .5s var(--ease); }
.case.hide { display: none; }
.case .art { aspect-ratio: 4 / 3.4; }
.case:nth-child(3n+2) { margin-top: clamp(0px, min(4vw, 5.12vh), 60px); }
.case .meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.case .cat { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--anthracite); }
.case h3 { font-size: 1.3rem; font-weight: 400; }
.case .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; background: var(--noir); color: var(--blanc); padding: 6px 12px; border-radius: 999px; }
.case .pill .ico { width: 14px; height: 14px; color: var(--taupe); }

/* Logos clients */
.logos { margin-top: clamp(80px, min(9vw, 11.52vh), 130px); border-block: 1px solid var(--ligne); overflow: hidden; padding-block: 34px; }
.logos .track { animation-duration: 32s; }
.logo-ph { display: inline-flex; align-items: center; gap: 12px; padding: 0 44px; font-size: 18px; font-weight: 500; color: rgba(19,19,19,.45); white-space: nowrap; letter-spacing: .02em; }
.logo-ph .ico { width: 30px; height: 30px; }

/* ---------- Agence à Cannes ---------- */
.place-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, min(6vw, 7.68vh), 90px); align-items: center; }
.info-list { display: grid; gap: 0; margin-top: 40px; border-top: 1px solid var(--ligne-claire); }
.info-list li { display: flex; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--ligne-claire); font-size: 17px; }
.info-list .ico { width: 30px; height: 30px; color: var(--taupe); }
.info-list small { display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
.place-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.mapbox { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 620px; justify-self: center; border-radius: 50%; overflow: hidden; background: var(--noir); isolation: isolate; box-shadow: 0 0 0 1px rgba(161,132,100,.5), 0 0 0 26px rgba(19,19,19,.35), 0 0 0 27px var(--ligne-claire), 0 50px 90px -40px rgba(0,0,0,.8); }
.mapbox .radar { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(161,132,100,.55) 0deg, rgba(161,132,100,.18) 25deg, transparent 70deg); mix-blend-mode: screen; animation: spin 6s linear infinite; pointer-events: none; }
.mapbox .radar::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 50%; margin-left: -1px; background: linear-gradient(to top, var(--taupe), transparent); }
.map-svg { display: block; width: 100%; height: 100%; }
.map-svg text { font-family: var(--font); fill: var(--blanc); }
.map-svg .big06 { font-size: 120px; font-weight: 600; fill: transparent; stroke: rgba(161,132,100,.55); stroke-width: 1.2; letter-spacing: -4px; }
.map-svg .lbl-dep { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; fill: var(--taupe); font-weight: 500; }
.map-svg .lbl-it { font-size: 12px; letter-spacing: 5px; text-transform: uppercase; fill: rgba(248,248,248,.55); }
.map-svg .lbl-sea { font-size: 13px; letter-spacing: 6px; text-transform: uppercase; fill: rgba(161,132,100,.7); font-style: italic; }
.map-svg .city circle { fill: var(--blanc); stroke: var(--noir); stroke-width: 2; }
.map-svg .city text { font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 500; paint-order: stroke; stroke: var(--noir); stroke-width: 4px; }
.map-svg .city { transform-box: fill-box; transform-origin: center; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.map-svg .lbl-home { font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; fill: var(--noir); }
.map-svg .ring1, .map-svg .ring2 { fill: none; stroke: var(--taupe); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: mapPulse 2.8s var(--ease) infinite; }
.map-svg .ring2 { animation-delay: 1.4s; }
@keyframes mapPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(5.5); opacity: 0; } }
.map-svg .routes path { animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -16; } }
.map-svg .drawin { stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease); }
.js .mapbox:not(.on) .drawin { stroke-dashoffset: 100; }
.js .mapbox:not(.on) .city { opacity: 0; transform: scale(.3); }
.map-svg .compass text, .map-svg .scale text, .map-svg .coords { font-size: 11px; letter-spacing: 2px; fill: rgba(248,248,248,.6); }
.map-svg .waves { animation: breathe 7s ease-in-out infinite alternate; transform-origin: 35% 90%; }
@keyframes breathe { to { transform: scale(1.015); } }
@keyframes pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(5); opacity: 0; } }
.place .badge { right: 4%; top: 8%; color: var(--taupe); }

/* ---------- Pour qui ---------- */
.who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, min(1.4vw, 1.79vh), 20px); }
.who { position: relative; border-radius: 4px; padding: clamp(28px, min(2.6vw, 3.33vh), 38px); background: var(--anthracite); display: flex; flex-direction: column; gap: 16px; min-height: 380px; overflow: hidden; transition: transform .6s var(--ease), background .6s var(--ease), color .6s; }
.who:hover { transform: translateY(-10px) rotate(-1deg); background: var(--blanc); color: var(--noir); }
.who .ico { width: 80px; height: 80px; color: var(--taupe); stroke-width: 1.2; }
.who h3 { font-size: 1.5rem; font-weight: 400; margin-top: auto; }
.who p { font-size: 15px; opacity: .72; }
.who .chips span { border-color: rgba(161,132,100,.6); }
.who .corner { position: absolute; right: 22px; top: 22px; width: 40px; height: 40px; border-radius: 50%; background: var(--taupe); color: var(--noir); display: grid; place-items: center; transform: scale(0); transition: transform .5s var(--ease); }
.who:hover .corner { transform: scale(1); }

/* ---------- Tarifs ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, min(1.6vw, 2.05vh), 24px); align-items: stretch; }
.pcard { position: relative; border-radius: 4px; padding: clamp(32px, min(3vw, 3.84vh), 46px); background: var(--noir); color: var(--blanc); display: flex; flex-direction: column; gap: 20px; transition: transform .6s var(--ease); }
.pcard:hover { transform: translateY(-8px); }
.pcard.hot { background: var(--taupe); color: var(--noir); transform: scale(1.04); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); z-index: 2; }
.pcard.hot:hover { transform: scale(1.04) translateY(-8px); }
.pcard .ico { width: 54px; height: 54px; color: var(--taupe); }
.pcard.hot .ico { color: var(--noir); }
.pcard h3 { font-size: 14px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.pcard .amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font-variant-numeric: tabular-nums; }
.pcard .amount strong { font-size: clamp(3rem, min(4.6vw, 5.89vh), 4.2rem); font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.pcard .amount s { font-size: 18px; opacity: .65; }
.pcard ul { display: grid; gap: 12px; flex: 1; padding-top: 20px; border-top: 1px solid currentColor; border-top-color: rgba(161,132,100,.4); }
.pcard.hot ul { border-top-color: rgba(19,19,19,.25); }
.pcard li { display: flex; gap: 12px; font-size: 15px; line-height: 1.45; }
.pcard li .ico { width: 18px; height: 18px; margin-top: 2px; stroke-width: 2.2; }
.pcard .btn { justify-content: center; }
.pcard.hot .btn { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.pcard.hot .btn:hover { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }
.stamp { position: absolute; top: -26px; right: 22px; width: 96px; height: 96px; border-radius: 50%; background: var(--noir); color: var(--taupe); display: grid; place-items: center; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; transform: rotate(12deg); box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: wobble 3.5s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(-6deg) scale(1.06); } }
.addons { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, min(1.6vw, 2.05vh), 24px); margin-top: clamp(14px, min(1.6vw, 2.05vh), 24px); }
.addon { display: flex; align-items: center; gap: 24px; padding: 28px 32px; border-radius: 4px; border: 1px solid var(--ligne-claire); transition: border-color .4s, background .4s; }
.addon:hover { border-color: var(--taupe); background: rgba(161,132,100,.08); }
.addon .ico { width: 48px; height: 48px; color: var(--taupe); }
.addon h3 { font-size: 1.2rem; font-weight: 400; }
.addon p { font-size: 14px; opacity: .7; }
.addon .px { margin-left: auto; text-align: right; white-space: nowrap; font-size: 1.5rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.addon .px small { display: block; font-size: 12px; color: var(--taupe); }
.promise { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 48px; }
.promise span { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: rgba(248,248,248,.06); font-size: 14px; }
.promise .ico { width: 20px; height: 20px; color: var(--taupe); }


/* Onglets des packs */
.ptabs { position: relative; display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(19,19,19,.55); border: 1px solid var(--ligne-claire); margin-bottom: clamp(40px, min(5vw, 6.4vh), 64px); }
.ptabs button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; font: 500 14px var(--font); letter-spacing: .04em; color: var(--doux-clair); background: none; border: 0; border-radius: 999px; padding: 13px 22px; cursor: pointer; transition: color .4s; }
.ptabs button .ico { width: 20px; height: 20px; color: var(--taupe); transition: color .4s; }
.ptabs button[aria-selected="true"] { color: var(--noir); }
.ptabs button[aria-selected="true"] .ico { color: var(--noir); }
.ptabs-ink { position: absolute; top: 6px; left: 6px; height: 0; width: 0; border-radius: 999px; background: var(--taupe); transition: left .55s cubic-bezier(.65,0,.35,1), top .55s cubic-bezier(.65,0,.35,1), width .55s cubic-bezier(.65,0,.35,1), height .55s cubic-bezier(.65,0,.35,1); }
.ppanel .pcard { animation: cardIn .7s var(--ease) both; }
.ppanel .pcard:nth-child(2) { animation-delay: .08s; } .ppanel .pcard:nth-child(3) { animation-delay: .16s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(30px); } }
.price-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; }
.pcard .pdesc { font-size: 15px; opacity: .75; margin-top: -8px; }
.pcard .tbd { color: var(--taupe); }
.pcard.hot .tbd { color: var(--noir); }
.pcard .tbd-note { font-style: normal; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; flex-basis: 100%; }
.pnote { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 36px; font-size: 14px; opacity: .8; text-align: center; }
.pnote .ico { width: 22px; height: 22px; color: var(--taupe); flex: none; }
@media (max-width: 900px) { .price-grid.two { grid-template-columns: 1fr; } .ptabs { display: flex; border-radius: 24px; } .ptabs button { flex: 1 1 auto; justify-content: center; } .ptabs-ink { display: none; } .ptabs button[aria-selected="true"] { background: var(--taupe); } }


/* Club : avantage membre */
.member-deal { display: flex; align-items: center; gap: 18px; margin-top: 26px; padding: 16px 20px; border: 1px dashed rgba(161,132,100,.7); border-radius: 4px; background: rgba(19,19,19,.5); max-width: 460px; font-size: 14px; }
.deal-pct { flex: none; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--taupe); color: var(--noir); font-weight: 600; font-size: 1.15rem; transform: rotate(-10deg); animation: wobble 3.5s ease-in-out infinite; }
.perks-6 { grid-template-columns: 1fr 1fr; }
.perks-6 .perk { padding: 22px; }
/* Bascule ponctuel / membre */
.pmode { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-bottom: 22px; }
.ptoggle { display: inline-flex; padding: 5px; border-radius: 999px; border: 1px solid var(--ligne-claire); background: rgba(19,19,19,.35); }
.ptoggle button { font: 500 14px var(--font); color: var(--doux-clair); background: none; border: 0; border-radius: 999px; padding: 11px 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background .4s, color .4s; }
.ptoggle button[aria-pressed="true"] { background: var(--blanc); color: var(--noir); }
.ptoggle .off { font-size: 12px; font-weight: 600; background: var(--taupe); color: var(--noir); padding: 3px 8px; border-radius: 999px; }
.pmode-note { display: flex; align-items: center; gap: 10px; font-size: 14px; opacity: .8; }
.pmode-note .ico { width: 20px; height: 20px; color: var(--taupe); flex: none; }
.pmode-note a { color: var(--taupe); text-decoration: underline; text-underline-offset: 3px; }
.pcard .member-tag { flex-basis: 100%; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--taupe); }
.pcard.hot .member-tag { color: var(--noir); }
.pcard .amount strong.flip { animation: flip .5s var(--ease); }
@keyframes flip { from { opacity: 0; transform: translateY(-14px); } }


/* Club : 1. la remise, 2. le site vivant */
.club-steps { display: grid; gap: 16px; }
.cstep { position: relative; background: rgba(19,19,19,.62); backdrop-filter: blur(10px); border: 1px solid var(--ligne-claire); border-radius: 4px; padding: clamp(24px, min(2.6vw, 3.33vh), 34px); display: grid; gap: 18px; }
.cstep-1 { border-color: var(--taupe); background: rgba(19,19,19,.72); }
.cstep-n { position: absolute; top: -14px; left: 24px; width: 28px; height: 28px; border-radius: 50%; background: var(--taupe); color: var(--noir); font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.cstep-head { display: flex; align-items: center; gap: 18px; }
.cstep-head h3 { font-size: 1.3rem; font-weight: 500; }
.cstep-head p { font-size: 14px; opacity: .72; }
.cstep-head .ico.big { width: 56px; height: 56px; color: var(--taupe); flex: none; }
.cstep .deal-pct { width: 78px; height: 78px; font-size: 1.2rem; }
.cover { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cover li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; padding: 10px 12px; border-radius: 10px; background: rgba(161,132,100,.14); }
.cover .ico { width: 18px; height: 18px; color: var(--taupe); flex: none; }
.cstep-ex { font-size: 14px; opacity: .85; }
.cstep-ex b { color: var(--taupe); font-weight: 600; }
.alive { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.alive li { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.alive li b { display: block; font-size: 14px; font-weight: 500; }
.alive li span { opacity: .65; }
.alive .ico { width: 24px; height: 24px; color: var(--taupe); flex: none; margin-top: 2px; }
@media (max-width: 600px) { .cover { grid-template-columns: 1fr 1fr; } .alive { grid-template-columns: 1fr; } }

/* ---------- Avis ---------- */
.reviews-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, min(6vw, 7.68vh), 90px); align-items: center; }
.bigscore { display: grid; gap: 14px; }
.bigscore strong { font-size: clamp(5rem, min(11vw, 14.08vh), 10rem); font-weight: 300; line-height: .85; letter-spacing: -.05em; }
.bigscore .stars svg { width: 28px; height: 28px; }
.rv-stage { position: relative; min-height: 400px; }
.rv-card { position: absolute; inset: 0; background: var(--noir); color: var(--blanc); border-radius: 4px; padding: clamp(32px, min(3.4vw, 4.35vh), 52px); display: flex; flex-direction: column; gap: 22px; transition: transform .8s var(--ease), opacity .8s var(--ease); box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); }
.rv-card .quote { width: 56px; height: 56px; color: var(--taupe); fill: currentColor; stroke: none; }
.rv-card blockquote { margin: 0; font-size: clamp(1.05rem, min(1.45vw, 1.86vh), 1.3rem); line-height: 1.5; font-weight: 300; }
.rv-card footer { margin-top: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; }
.rv-card .avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--taupe); color: var(--noir); display: grid; place-items: center; font-weight: 600; }
.rv-card[data-pos="0"] { transform: none; opacity: 1; z-index: 3; }
.rv-card[data-pos="1"] { transform: translate(24px, 24px) rotate(2deg); opacity: .55; z-index: 2; background: var(--anthracite); }
.rv-card[data-pos="2"] { transform: translate(48px, 48px) rotate(4deg); opacity: .3; z-index: 1; background: var(--anthracite); }
.rv-nav { display: flex; gap: 10px; margin-top: 90px; }
.rv-nav button { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--noir); background: none; cursor: pointer; padding: 0; }
.rv-nav button[aria-current="true"] { background: var(--noir); width: 34px; border-radius: 999px; }

/* ---------- Équipe ---------- */
.team-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(16px, min(2vw, 2.56vh), 28px); }
.member { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; }
.member .shot { position: absolute; inset: 0; transition: opacity .9s var(--ease), transform 1.4s var(--ease); }
.member .shot-a { background: radial-gradient(70% 60% at 50% 35%, rgba(161,132,100,.5), transparent 70%), var(--anthracite); }
.member .shot-b { background: radial-gradient(70% 60% at 50% 70%, rgba(161,132,100,.7), transparent 70%), var(--noir); opacity: 0; transform: scale(1.08); }
.member:hover .shot-b, .member:focus-within .shot-b { opacity: 1; transform: none; }
.member .shot span { position: absolute; left: 24px; top: 24px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); font-weight: 500; max-width: 70%; line-height: 1.6; }
.member .shot img { position: absolute; width: 46%; left: 27%; top: 26%; opacity: .25; }
.member .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; background: linear-gradient(transparent, rgba(19,19,19,.9)); color: var(--blanc); z-index: 2; }
.member .cap h3 { font-size: 2rem; font-weight: 400; }
.member .cap p { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
.side-cards { display: grid; gap: clamp(16px, min(2vw, 2.56vh), 28px); }
.scard { border-radius: 4px; padding: clamp(28px, min(3vw, 3.84vh), 44px); display: grid; gap: 16px; align-content: start; }
.scard .icons { display: flex; gap: 14px; }
.scard .icons span { width: 64px; height: 64px; border-radius: 50%; background: var(--noir); color: var(--taupe); display: grid; place-items: center; transition: transform .5s var(--ease); }
.scard .icons span:hover { transform: rotate(-12deg) scale(1.1); }
.scard .icons .ico { width: 30px; height: 30px; }
.scard h3 { font-size: 1.6rem; font-weight: 400; }
.scard p { font-size: 15px; opacity: .78; }
.scard blockquote { margin: 0; font-size: clamp(1.3rem, min(2vw, 2.56vh), 1.8rem); font-weight: 300; line-height: 1.35; }

/* ---------- Club (photo duotone) ---------- */
.club { position: relative; overflow: hidden; color: var(--blanc); }
.club .bgimg { position: absolute; inset: -10% 0; background: url("assets/hero-hibou.jpg") 30% 50% / cover no-repeat; filter: grayscale(1) contrast(1.15) brightness(.55); will-change: transform; }
.club .tint { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(19,19,19,.94) 20%, rgba(161,132,100,.55)); mix-blend-mode: multiply; }
.club .tint2 { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(19,19,19,.7) 25%, transparent 80%); }
.club-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, min(6vw, 7.68vh), 96px); align-items: center; }
.club-price { display: flex; align-items: baseline; gap: 12px; margin-top: 30px; }
.club-price strong { font-size: clamp(3.5rem, min(7vw, 8.96vh), 6rem); font-weight: 300; line-height: 1; letter-spacing: -.04em; color: var(--taupe); }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.perk { background: rgba(19,19,19,.55); backdrop-filter: blur(10px); border: 1px solid var(--ligne-claire); border-radius: 4px; padding: 26px; display: grid; gap: 14px; transition: transform .5s var(--ease), border-color .4s; }
.perk:hover { transform: translateY(-6px); border-color: var(--taupe); }
.perk .ico { width: 44px; height: 44px; color: var(--taupe); }
.perk h3 { font-size: 1.1rem; font-weight: 500; }
.perk p { font-size: 14px; opacity: .72; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, min(6vw, 7.68vh), 90px); align-items: start; }
.faq-side { position: sticky; top: 130px; }
.faq-side .bubble { margin-top: 36px; display: inline-flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 4px; background: var(--noir); }
.faq-side .bubble .ico { color: var(--taupe); width: 34px; height: 34px; }
.qa { border-bottom: 1px solid var(--ligne-claire); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr 40px; gap: 18px; align-items: center; padding: 24px 0; font-size: clamp(1.05rem, min(1.5vw, 1.92vh), 1.25rem); font-weight: 400; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .ico { width: 30px; height: 30px; color: var(--taupe); }
.qa .pm { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ligne-claire); display: grid; place-items: center; transition: transform .5s var(--ease), background .4s, color .4s; }
.qa .pm .ico { width: 16px; height: 16px; color: currentColor; }
.qa[open] .pm { transform: rotate(45deg); background: var(--taupe); color: var(--noir); border-color: var(--taupe); }
.qa p { padding: 0 58px 26px 62px; opacity: .75; max-width: 42em; }

/* ---------- CTA final (taupe, explosif) ---------- */
.final { text-align: center; overflow: hidden; }
.final .ghost { top: 50%; left: 0; transform: translateY(-50%); }
.final-logo { width: clamp(220px, min(30vw, 38.4vh), 380px); margin: 0 auto; position: relative; }
.final-logo img { width: 100%; height: auto; }
.final h2 { font-size: clamp(3rem, min(9vw, 11.52vh), 8.5rem); font-weight: 600; line-height: .9; letter-spacing: -.05em; margin-top: 30px; text-transform: uppercase; }
.final h2 .ol { display: block; color: transparent; -webkit-text-stroke: 2px var(--noir); font-weight: 600; }
.final .sub { margin-inline: auto; opacity: .85; }
.final-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 44px; }
.btn-noir { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.btn-noir:hover { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }
.btn-line-noir { color: var(--noir); }
.btn-line-noir:hover { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.final .badge { left: 6%; top: 14%; color: var(--noir); }
.splat { position: absolute; border-radius: 50%; background: var(--noir); pointer-events: none; }

/* Raccourcis */
.anchors { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 32px; border-bottom: 1px solid var(--ligne-claire); }
.anchors span { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); margin-right: 10px; align-self: center; font-weight: 500; }
.anchors a { font-size: 13px; padding: 7px 14px; border: 1px solid var(--ligne-claire); border-radius: 999px; color: var(--doux-clair); transition: border-color .3s, color .3s; }
.anchors a:hover { border-color: var(--taupe); color: var(--blanc); }

/* ---------- Footer ---------- */
.footer { background: var(--noir); color: var(--blanc); padding-block: 0 40px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-block: 72px; border-bottom: 1px solid var(--ligne-claire); }
.footer .logo { justify-self: start; }
.footer .logo img { height: 112px; }
.footer-brand p { margin-top: 24px; font-size: 15px; color: var(--doux-clair); max-width: 22em; }
.footer h2 { font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); margin-bottom: 22px; }
.footer li a, .footer li { font-size: 14px; color: var(--doux-clair); line-height: 2.1; }
.footer li a:hover { color: var(--blanc); }
.footer .contact-li { display: flex; gap: 10px; align-items: center; }
.footer .contact-li .ico { width: 16px; height: 16px; color: var(--taupe); }
.newsletter { margin-top: 28px; display: flex; border-bottom: 1px solid var(--ligne-claire); max-width: 340px; }
.newsletter input { flex: 1; min-width: 0; background: none; border: 0; color: var(--blanc); font: 300 14px var(--font); padding: 12px 0; }
.newsletter input::placeholder { color: rgba(248,248,248,.5); }
.newsletter button { background: none; border: 0; color: var(--taupe); cursor: pointer; padding: 0 0 0 12px; }
.socials { display: flex; gap: 12px; margin-top: 26px; }
.socials a { width: 42px; height: 42px; border: 1px solid var(--ligne-claire); border-radius: 50%; display: grid; place-items: center; color: var(--doux-clair); transition: border-color .4s, color .4s, background .4s; }
.socials a:hover { border-color: var(--taupe); background: var(--taupe); color: var(--noir); }
.socials svg { width: 16px; height: 16px; }
.footer-cta { display: grid; gap: 16px; align-content: start; }
.footer-cta p { font-size: 1.6rem; font-weight: 300; line-height: 1.2; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding-top: 32px; font-size: 12px; color: rgba(248,248,248,.6); letter-spacing: .04em; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer-bottom a:hover { color: var(--blanc); }

/* Barre de progression + curseur */
.progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--taupe); transform-origin: left; transform: scaleX(0); z-index: 70; }
.cursor { position: fixed; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--taupe); pointer-events: none; z-index: 90; mix-blend-mode: difference; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .3s; opacity: 0; }
.cursor.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* Toast (aperçu) */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 80; background: var(--noir); color: var(--blanc); border: 1px solid var(--taupe); padding: 14px 22px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s var(--ease); max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Apparition */
.rv { transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .rv.pending { opacity: 0; transform: translateY(40px); }
.js .rv.pop.pending { transform: scale(.85) rotate(-3deg); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .counters { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .counter:nth-child(4) { border-left: 0; padding-left: 0; }
  .who-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .xcard:nth-child(n) { grid-column: span 1; grid-row: auto; min-height: 320px; }
  .xcard:nth-child(1) { grid-column: span 2; min-height: 420px; }
}
@media (max-width: 900px) {
  .header-actions .tel { display: none; }
  .menu-body { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .rating { justify-items: start; text-align: left; padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--ligne-claire); }
  .hero-img { object-position: 72% 40%; }
  .hero-veil { background: linear-gradient(180deg, rgba(19,19,19,.55) 0%, rgba(19,19,19,.2) 30%, rgba(19,19,19,.7) 60%, rgba(19,19,19,.94) 100%); }
  .intro-grid, .place-grid, .reviews-wrap, .team-grid, .club-grid, .faq-wrap { grid-template-columns: 1fr; }
  .why-cards, .price-grid, .grid-cases { grid-template-columns: 1fr; }
  .why-card:nth-child(2) { transform: none; }
  .pcard.hot, .pcard.hot:hover { transform: none; }
  .case:nth-child(3n+2) { margin-top: 0; }
  .addons { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .place .badge { display: none; }
  .final .badge { display: none; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .header-inner { height: 76px; }
  .menu-btn .lbl { display: none; }
  .header .logo img { height: 60px; }
  .header .btn { padding: 9px 12px; font-size: 10px; letter-spacing: .08em; }
  .trust ul { display: grid; grid-template-columns: 1fr 1fr; }
  .counters { grid-template-columns: 1fr 1fr; }
  .counter, .counter:nth-child(n) { border-left: 0; padding-left: 0; }
  .who-grid, .bento, .perks, .footer-top { grid-template-columns: 1fr; }
  .xcard:nth-child(1) { grid-column: span 1; }
  .xcard:nth-child(n) { min-height: 0; }
  .xcard:nth-child(1) { min-height: 380px; }
  .addon { flex-wrap: wrap; }
  .addon .px { margin-left: 0; text-align: left; }
  .qa summary { grid-template-columns: 30px 1fr 36px; gap: 12px; }
  .qa p { padding: 0 0 24px 42px; }
  .rv-stage { min-height: 520px; }
  .rv-card[data-pos="1"] { transform: translate(10px, 14px) rotate(1.5deg); }
  .rv-card[data-pos="2"] { transform: translate(20px, 28px) rotate(3deg); }
  .art-2 .inner span { font-size: 6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rv.pending, .js .sw.pending .w > span, .js .drip.pending { opacity: 1; transform: none; }
  .js .brush path { stroke-dashoffset: 0; }
}

/* =====================================================================
   PAGES INTÉRIEURES — plus claires et éditoriales que l'accueil
   ===================================================================== */
.shero { position: relative; min-height: clamp(360px, 50vh, 500px); display: grid; place-items: center; text-align: center; color: var(--blanc); background: var(--noir); overflow: hidden; padding: 120px var(--gutter) 64px; }
.shero picture, .shero img.bgp { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; animation: settle 14s var(--ease) both; }
.shero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,19,19,.78) 0%, rgba(19,19,19,.5) 45%, rgba(19,19,19,.82) 100%); }
.shero-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; }
.shero h1 { font-size: clamp(2.3rem, min(5.6vw, 7.17vh), 4.8rem); font-weight: 300; line-height: 1.05; letter-spacing: -.02em; max-width: 14em; }
.shero h1 small { display: block; margin-top: 16px; font-size: max(13px, .2em); font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--taupe); }
.shero h1 .w > span { animation: wordUp 1.1s var(--ease) both; animation-delay: calc(var(--i) * 70ms + .15s); }
@keyframes wordUp { from { transform: translateY(105%); } }
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--doux-clair); }
.crumbs a:hover { color: var(--taupe); }
.crumbs .sep { opacity: .4; }
.crumbs [aria-current] { color: var(--taupe); }

.s2 { position: relative; padding-block: clamp(80px, min(9vw, 11.52vh), 130px); }
.s2-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(40px, min(5vw, 6.4vh), 64px); }
.s2-head .title { font-size: clamp(2rem, min(4.2vw, 5.38vh), 3.6rem); }
.s2-head p { font-size: 1.05rem; opacity: .8; max-width: 32em; }

/* Liste des services */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ligne); border-left: 1px solid var(--ligne); }
.svc { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 6px 20px; padding: clamp(24px, min(2.4vw, 3.07vh), 34px); border-right: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); transition: background .5s var(--ease), color .5s var(--ease); }
.svc .ico { grid-row: span 2; width: 46px; height: 46px; color: var(--taupe); transition: transform .6s var(--ease); }
.svc h3 { font-size: 1.15rem; font-weight: 500; }
.svc p { font-size: 14.5px; color: var(--anthracite); line-height: 1.55; transition: color .5s; }
.svc:hover { background: var(--noir); color: var(--blanc); }
.svc:hover p { color: var(--doux-clair); }
.svc:hover .ico { transform: rotate(-10deg) scale(1.1); }

/* Chiffres clés */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); }
.fact { padding: 34px 24px; border-left: 1px solid var(--ligne-claire); display: grid; gap: 6px; align-content: start; }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact strong { font-size: clamp(2rem, min(3.6vw, 4.61vh), 3.2rem); font-weight: 300; color: var(--taupe); line-height: 1; letter-spacing: -.02em; }
.fact span { font-size: 14px; opacity: .75; }

/* Pourquoi + étude de cas */
.why2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, min(6vw, 7.68vh), 90px); align-items: center; }
.why2 .title { font-size: clamp(2rem, min(4vw, 5.12vh), 3.4rem); margin-bottom: 22px; }
.why2 p.txt { font-size: 1.05rem; opacity: .82; max-width: 32em; }
.ticks { display: grid; gap: 14px; margin-top: 28px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; font-size: 15.5px; }
.ticks .ico { width: 24px; height: 24px; color: var(--taupe); flex: none; margin-top: 1px; }
.casecard { display: grid; gap: 16px; background: var(--noir); color: var(--blanc); padding: 16px 16px 26px; border-radius: 4px; box-shadow: 0 40px 70px -40px rgba(0,0,0,.5); transform: rotate(1.2deg); transition: transform .6s var(--ease); }
.casecard:hover { transform: rotate(0) translateY(-6px); }
.casecard .art { aspect-ratio: 4 / 3.2; }
.casecard:hover .art .inner { transform: scale(1.05); }
.casecard .meta { padding: 0 8px; display: grid; gap: 6px; }
.casecard .cat { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
.casecard h3 { font-size: 1.3rem; font-weight: 400; }
.casecard .link { justify-self: start; margin-top: 6px; }
.art-fallback { aspect-ratio: 4 / 3.2; border-radius: 4px; background: radial-gradient(60% 60% at 50% 50%, rgba(161,132,100,.35), transparent 70%), repeating-radial-gradient(circle at 50% 50%, transparent 0 30px, rgba(161,132,100,.18) 30px 31px), var(--anthracite); display: grid; place-items: center; }
.art-fallback .ico { width: 34%; height: auto; aspect-ratio: 1; color: var(--taupe); stroke-width: 1; }

/* Projets */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, min(2vw, 2.56vh), 26px); }
.shot { display: grid; gap: 14px; }
.shot .art { aspect-ratio: 4 / 5; }
.shot:hover .art .inner { transform: scale(1.06) rotate(-1deg); }
.shot .cat { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
.shot h3 { font-size: 1.15rem; font-weight: 400; }

/* Approche */
.appr { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, min(6vw, 7.68vh), 90px); align-items: center; }
.appr .member { max-width: 460px; }
.appr blockquote { margin: 0 0 24px; font-size: clamp(1.4rem, min(2.4vw, 3.07vh), 2.1rem); font-weight: 300; line-height: 1.3; }
.appr p { opacity: .8; max-width: 34em; }

/* Quand nous appeler */
.when { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, min(1.6vw, 2.05vh), 22px); }
.wcard { border-radius: 4px; padding: clamp(28px, min(2.8vw, 3.58vh), 40px); background: rgba(161,132,100,.1); border: 1px solid rgba(161,132,100,.35); display: grid; gap: 14px; align-content: start; transition: transform .5s var(--ease), box-shadow .5s; }
.wcard:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -35px rgba(0,0,0,.4); }
.wcard .ico { width: 52px; height: 52px; color: var(--taupe); }
.wcard h3 { font-size: 1.25rem; font-weight: 500; }
.wcard p { font-size: 15px; color: var(--anthracite); }

/* Méthode en frise */
.tl { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.tl::before, .tl::after { content: ""; position: absolute; left: 34px; right: 34px; top: 34px; height: 2px; }
.tl::before { background: rgba(19,19,19,.18); }
.tl::after { background: var(--noir); transform-origin: left; transition: transform 2.2s var(--ease) .3s; }
.js .tl.pending::after { transform: scaleX(0); }
.tstep { position: relative; display: grid; gap: 12px; align-content: start; }
.tstep .node { width: 68px; height: 68px; border-radius: 50%; background: var(--noir); color: var(--taupe); display: grid; place-items: center; position: relative; z-index: 1; box-shadow: 0 0 0 8px var(--taupe); }
.tstep .node .ico { width: 30px; height: 30px; }
.tstep .n { font-size: 12px; letter-spacing: .22em; font-weight: 600; margin-top: 8px; }
.tstep h3 { font-size: 1.35rem; font-weight: 500; }
.tstep p { font-size: 15px; opacity: .82; max-width: 22em; }

/* Avis */
.rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, min(1.6vw, 2.05vh), 22px); }
.rcard { border-radius: 4px; background: var(--noir); color: var(--blanc); padding: clamp(28px, min(2.8vw, 3.58vh), 38px); display: flex; flex-direction: column; gap: 18px; }
.rcard .stars { color: var(--taupe); }
.rcard .stars svg { width: 16px; height: 16px; }
.rcard blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; font-weight: 300; }
.rcard footer { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; opacity: .85; }
.rcard .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--taupe); color: var(--noir); display: grid; place-items: center; font-weight: 600; }

/* Autres expertises (liens internes) */
.olinks { display: flex; flex-wrap: wrap; gap: 10px; }
.olinks a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid var(--ligne); border-radius: 999px; font-size: 14px; transition: background .4s, color .4s, border-color .4s; }
.olinks a .ico { width: 20px; height: 20px; color: var(--taupe); }
.olinks a:hover { background: var(--noir); color: var(--blanc); border-color: var(--noir); }

@media (max-width: 900px) {
  .s2-head, .why2, .appr { grid-template-columns: 1fr; }
  .svc-grid, .when, .rgrid, .shots { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .tl { grid-template-columns: 1fr; gap: 34px; }
  .tl::before, .tl::after { left: 33px; right: auto; top: 34px; bottom: 34px; width: 2px; height: auto; }
  .tl::after { transform-origin: top; }
  .js .tl.pending::after { transform: scaleY(0); }
  .tstep { grid-template-columns: 68px 1fr; column-gap: 22px; }
  .tstep .node { grid-row: span 3; }
  .tstep .n { margin-top: 0; }
  .casecard { transform: none; }
}
@media (max-width: 600px) {
  .svc-grid, .when, .rgrid, .shots, .facts { grid-template-columns: 1fr; }
  .fact, .fact:nth-child(n) { border-left: 0; padding-left: 0; border-top: 1px solid var(--ligne-claire); padding-block: 22px; }
}
@media (prefers-reduced-motion: reduce) { .js .tl.pending::after { transform: none; } }

/* Pages services v3 */
.bg-tint { background: color-mix(in srgb, var(--taupe) 12%, var(--blanc)); color: var(--noir); }
.bg-tint .svc-grid { border-color: rgba(19,19,19,.12); }
.intro2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, min(6vw, 7.68vh), 96px); align-items: start; }
.intro2 .title { font-size: clamp(2.2rem, min(4.6vw, 5.89vh), 4rem); }
.intro2 p { font-size: 1.08rem; line-height: 1.75; opacity: .85; }
.intro2 p + p { margin-top: 18px; }
.when { grid-template-columns: repeat(3, 1fr); }
.wcard h3 { font-size: 1.15rem; line-height: 1.35; }
.free-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, min(1.6vw, 2.05vh), 22px); }
.fcard { border-radius: 4px; padding: clamp(26px, min(2.6vw, 3.33vh), 36px); background: rgba(19,19,19,.45); border: 1px solid var(--ligne-claire); display: grid; gap: 14px; align-content: start; transition: border-color .4s, transform .5s var(--ease); }
.fcard:hover { border-color: var(--taupe); transform: translateY(-6px); }
.fcard .ico { width: 52px; height: 52px; color: var(--taupe); }
.fcard h3 { font-size: 1.15rem; font-weight: 500; }
.fcard p { font-size: 14.5px; opacity: .75; }
.art-fallback.tall { aspect-ratio: 4 / 5; position: relative; }
.art-fallback .ph { position: absolute; left: 18px; right: 18px; bottom: 16px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--doux-clair); font-weight: 500; }
.bg-noir .s2-head p { opacity: .8; }
@media (max-width: 1100px) { .free-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .intro2 { grid-template-columns: 1fr; } .when { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .free-grid, .when { grid-template-columns: 1fr; } }
.bg-noir .pcard:not(.hot) { background: var(--anthracite); }
.s2 ~ .sec .faq-side .title, .bg-anth .faq-side .title { font-size: clamp(2rem, min(3.6vw, 4.61vh), 3.2rem); }
/* Tarifs (pages services) : bloc éditorial texte + image */
.tsplit { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(460px, 58vh, 620px); }
.tsplit-txt { display: flex; align-items: center; justify-content: flex-end; padding: clamp(56px, min(7vw, 8.96vh), 100px) clamp(28px, min(6vw, 7.68vh), 90px); }
.tsplit-in { max-width: 540px; display: grid; gap: 24px; justify-items: start; }
.tsplit h2 { font-size: clamp(1.8rem, min(3.2vw, 4.1vh), 2.8rem); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; text-transform: uppercase; }
.tsplit p { font-size: 1.05rem; line-height: 1.75; }
.tsplit p b { font-weight: 600; }
.tsplit-img { position: relative; overflow: hidden; background: var(--noir); }
.tsplit-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 45%; transition: transform 1.6s var(--ease); }
.tsplit:hover .tsplit-img img { transform: scale(1.05); }
@media (max-width: 900px) { .tsplit { grid-template-columns: 1fr; } .tsplit-txt { justify-content: flex-start; } .tsplit-img { min-height: 320px; } }
/* Tarifs v2 */
.pcard .amount .from { flex-basis: 100%; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.pnote-s { font-size: 12.5px; opacity: .65; line-height: 1.5; }
.price-grid.four { grid-template-columns: repeat(4, 1fr); }
.price-grid.four .pcard { padding: clamp(26px, min(2.4vw, 3.07vh), 34px); }
.price-grid.four .pcard .amount strong { font-size: clamp(2.2rem, min(3vw, 3.84vh), 2.9rem); }
.rates2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, min(1.6vw, 2.05vh), 22px); }
.ratecard { border-radius: 4px; padding: clamp(30px, min(3.4vw, 4.35vh), 50px); display: grid; gap: 16px; align-content: start; position: relative; overflow: hidden; }
.ratecard .big { font-size: clamp(3.4rem, min(7vw, 8.96vh), 6rem); font-weight: 300; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ratecard .big small { font-size: .3em; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.ratecard h3 { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.ratecard ul { display: grid; gap: 10px; margin-top: 6px; }
.ratecard li { display: flex; gap: 10px; font-size: 15px; }
.ratecard li .ico { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--taupe); stroke-width: 2.2; }
.ratecard.club li .ico { color: var(--noir); }
.rtabs { margin-bottom: 26px; }
.rtable-wrap { overflow-x: auto; border-radius: 4px; border: 1px solid var(--ligne-claire); }
.rtable { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px; }
.rtable th, .rtable td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--ligne-claire); }
.rtable thead th { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--taupe); background: rgba(19,19,19,.35); }
.rtable tbody th { font-weight: 400; }
.rtable td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rtable td:last-child { color: var(--taupe); font-weight: 500; }
.rtable tbody tr:last-child th, .rtable tbody tr:last-child td { border-bottom: 0; }
.rtable tbody tr:hover { background: rgba(161,132,100,.08); }
.rnote { margin-top: 14px; font-size: 13.5px; opacity: .7; }
.princ { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, min(1.6vw, 2.05vh), 22px); }
.pr { padding: clamp(26px, min(2.6vw, 3.33vh), 36px); border-radius: 4px; border: 1px solid rgba(161,132,100,.35); background: rgba(161,132,100,.1); display: grid; gap: 12px; align-content: start; }
.pr .ico { width: 48px; height: 48px; color: var(--taupe); }
.pr h3 { font-size: 1.15rem; font-weight: 500; }
.pr p { font-size: 15px; color: var(--anthracite); }
@media (max-width: 1100px) { .price-grid.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .rates2, .princ { grid-template-columns: 1fr; } .rtabs { display: flex; } }
@media (max-width: 600px) { .price-grid.four { grid-template-columns: 1fr; } }
.pmode { margin-bottom: 44px; }

.ptabs { border-radius: 28px; }

.bento .xcard:nth-child(4):last-child { grid-column: span 6; min-height: 260px; }
@media (max-width:1100px){ .bento .xcard:nth-child(4):last-child { grid-column: span 2; } }
@media (max-width:600px){ .bento .xcard:nth-child(4):last-child { grid-column: span 1; } }
.rates2.three { grid-template-columns: repeat(3, 1fr); }
.rates2.three .ratecard .big { font-size: clamp(3rem, min(5.4vw, 6.91vh), 4.8rem); }
.rtable td:last-child { color: inherit; font-weight: 400; }
.rtable td:nth-child(3) { color: var(--taupe); font-weight: 500; }
@media (max-width: 1000px) { .rates2.three { grid-template-columns: 1fr; } }
.ratecard .big small { display: block; margin: 12px 0 0; font-size: 15px; letter-spacing: .06em; opacity: .8; }
/* Club : texte centré, cartes en dessous */
.club .club-grid { grid-template-columns: 1fr; gap: clamp(48px, min(6vw, 7.68vh), 80px); }
.club .club-grid > div:first-child { text-align: center; display: grid; justify-items: center; max-width: 860px; margin-inline: auto; }
.club .club-grid > div:first-child .sub { margin-inline: auto; }
.club .club-grid > div:first-child .tag::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.club .club-steps { grid-template-columns: repeat(3, 1fr); gap: clamp(16px, min(2vw, 2.56vh), 24px); align-items: stretch; }
.club .cstep { align-content: start; }
.club .cstep-head { flex-direction: column; align-items: flex-start; gap: 14px; }
.club .cover { grid-template-columns: 1fr 1fr; }
.club .alive { grid-template-columns: 1fr; }
.club .tint2 { background: linear-gradient(180deg, rgba(19,19,19,.75), rgba(19,19,19,.55)); }
@media (max-width: 1000px) { .club .club-steps { grid-template-columns: 1fr; } }

/* ===================== Pages L'agence · Expertises · Club ===================== */
.bg-noir .btn-ghost:hover, .bg-anth .btn-ghost:hover { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }
.center-head { text-align: center; max-width: 900px; margin: 0 auto clamp(44px, min(5vw, 6.4vh), 70px); }
.center-head .tag { justify-content: center; }
.center-head .title { font-size: clamp(2rem, min(4.2vw, 5.38vh), 3.6rem); }

/* Manifeste : les mots s'allument au défilement */
.manifest .wrap { max-width: 1120px; }
.scrub { font-size: clamp(1.7rem, min(3.6vw, 4.61vh), 3.1rem); line-height: 1.28; font-weight: 300; letter-spacing: -.015em; margin-top: 34px; }
.scrub span { opacity: .16; transition: opacity .35s linear, color .35s; }
.scrub span.lit { opacity: 1; }
.scrub span.lit:nth-child(7n+3) { color: var(--taupe); }
.sign { display: flex; align-items: center; gap: 16px; margin-top: 46px; font-size: 15px; font-weight: 500; }
.sign img { width: 46px; height: auto; }
.sign small { font-weight: 300; opacity: .7; font-size: 13px; }

/* Histoire : portrait collant + frise */
.story { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, min(7vw, 8.96vh), 110px); align-items: start; }
.story-pic { margin: 0; position: sticky; top: 110px; }
.story-ph { aspect-ratio: 4/5; background: var(--anthracite); display: grid; place-items: center; position: relative; overflow: hidden; }
.story-ph img { width: 38%; opacity: .9; }
.story-ph span { position: absolute; bottom: 18px; left: 18px; right: 18px; color: var(--blanc); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.story-pic figcaption { margin-top: 14px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--anthracite); }
.stl { list-style: none; margin: 50px 0 0; padding: 0 0 0 34px; border-left: 1px solid var(--ligne); counter-reset: none; }
.stl li { position: relative; padding-bottom: 44px; }
.stl li:last-child { padding-bottom: 0; }
.stl li::before { content: ""; position: absolute; left: -41px; top: 8px; width: 13px; height: 13px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--taupe); }
.stl li:last-child::before { background: var(--taupe); }
.stl-n { font-size: 12px; letter-spacing: .24em; color: var(--taupe); font-weight: 500; }
.stl h3 { font-size: clamp(1.4rem, min(2.2vw, 2.82vh), 1.9rem); margin: 6px 0 10px; }
.stl p { opacity: .8; max-width: 36em; }

/* Engagements : panneaux qui s'ouvrent */
.vpanels { display: flex; gap: 12px; min-height: 420px; }
.vpanel { flex: 1; position: relative; border: 1px solid var(--ligne-claire); padding: 30px 26px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: flex 0.8s var(--ease), background .6s var(--ease); overflow: hidden; outline-offset: -4px; }
.vpanel.on { flex: 2.6; background: var(--noir); border-color: var(--taupe); }
.vp-n { font-size: clamp(3rem, min(6vw, 7.68vh), 5.4rem); font-weight: 600; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--taupe); }
.vpanel h3 { font-size: clamp(1.3rem, min(2vw, 2.56vh), 1.8rem); writing-mode: vertical-rl; transform: rotate(180deg); align-self: flex-start; transition: none; }
.vpanel.on h3 { writing-mode: horizontal-tb; transform: none; }
.vp-body { max-height: 0; opacity: 0; overflow: hidden; transition: opacity .5s .2s, max-height .6s var(--ease); }
.vpanel.on .vp-body { max-height: 220px; opacity: 1; }
.vp-body .ico { width: 34px; height: 34px; color: var(--taupe); margin: 16px 0 12px; }
.vp-body p { opacity: .85; max-width: 26em; }

/* Méthode : frise horizontale qui se trace */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; position: relative; }
.process::before, .process::after { content: ""; position: absolute; left: 0; top: 31px; height: 1px; background: var(--ligne); width: 100%; }
.process::after { background: var(--taupe); height: 2px; top: 30px; width: 0; transition: width 2.2s var(--ease); }
.process.drawn::after { width: 100%; }
.pstep { position: relative; }
.pdot { width: 62px; height: 62px; border-radius: 50%; background: var(--blanc); border: 1px solid var(--taupe); display: grid; place-items: center; position: relative; z-index: 1; transition: background .5s, transform .5s var(--ease); }
.pdot .ico { width: 26px; height: 26px; color: var(--noir); }
.process.drawn .pstep .pdot { background: var(--taupe); }
.process .pstep:nth-child(2) .pdot { transition-delay: .4s; } .process .pstep:nth-child(3) .pdot { transition-delay: .8s; }
.process .pstep:nth-child(4) .pdot { transition-delay: 1.2s; } .process .pstep:nth-child(5) .pdot { transition-delay: 1.6s; }
.pnum { display: block; margin-top: 22px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
.pstep h3 { font-size: 1.35rem; margin: 6px 0 8px; }
.pstep p { font-size: 15px; opacity: .78; }

/* Nous sommes / ne sommes pas */
.isnot { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1040px; margin: 0 auto; }
.isnot > div { padding: clamp(30px, min(4vw, 5.12vh), 56px); }
.isnot .is { background: var(--noir); color: var(--blanc); }
.isnot .not { border: 1px solid rgba(19,19,19,.3); }
.isnot h3 { display: flex; align-items: center; gap: 14px; font-size: 1.5rem; margin-bottom: 26px; }
.isnot h3 .ico { width: 26px; height: 26px; color: var(--taupe); }
.isnot .x { font-size: 2rem; line-height: 1; font-weight: 300; }
.isnot li { padding: 15px 0; border-top: 1px solid rgba(248,248,248,.14); font-size: 1.05rem; }
.isnot .not li { border-color: rgba(19,19,19,.18); text-decoration: line-through; text-decoration-color: rgba(19,19,19,.5); text-decoration-thickness: 1px; }

/* Atelier : mosaïque */
.atelier { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, min(16vw, 20.48vh), 230px); gap: 12px; }
.at-ph { background: var(--anthracite); position: relative; display: grid; place-items: center; overflow: hidden; }
.at-ph img { width: 70px; opacity: .55; transition: transform .8s var(--ease); }
.at-ph:hover img { transform: scale(1.2) rotate(-6deg); }
.at-ph span { position: absolute; left: 16px; bottom: 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.at-ph span b { font-weight: 500; letter-spacing: .06em; text-transform: none; font-size: 13px; opacity: 1; }
.at-1 { grid-column: span 2; grid-row: span 2; } .at-2 { background: #262626; } .at-5 { background: #2b2620; }

/* Ancrage Cannes */
.anchor { overflow: hidden; }
.anc-ghost { position: absolute; right: -2vw; top: 50%; transform: translateY(-50%); font-size: clamp(8rem, min(26vw, 33.28vh), 24rem); font-weight: 600; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(19,19,19,.08); pointer-events: none; letter-spacing: -.05em; }
.anc-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, min(6vw, 7.68vh), 90px); align-items: center; position: relative; }
.anc-grid .title { font-size: clamp(2rem, min(4vw, 5.12vh), 3.4rem); }
.anc-p { margin-top: 26px; opacity: .8; max-width: 34em; }
.towns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.towns li { border: 1px solid var(--ligne); padding: 7px 14px; font-size: 13px; border-radius: 999px; transition: background .4s, color .4s; }
.towns li:first-child, .towns li:hover { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.anc-card { font-style: normal; background: var(--noir); color: var(--blanc); padding: clamp(30px, min(3.6vw, 4.61vh), 50px); display: grid; gap: 22px; box-shadow: 0 50px 80px -50px rgba(0,0,0,.6); }
.anc-addr { font-size: clamp(1.3rem, min(2vw, 2.56vh), 1.7rem); line-height: 1.35; }
.anc-card li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ligne-claire); font-size: 15px; }
.anc-card li .ico { width: 18px; height: 18px; color: var(--taupe); }
.anc-card .btn { justify-self: start; }

/* En bref */
.bgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bcard { background: var(--blanc); padding: 30px 26px; border-top: 3px solid var(--taupe); }
.bcard h3 { font-size: 1.15rem; font-weight: 500; margin-bottom: 12px; }
.bcard p { font-size: 15px; opacity: .8; }

/* Dire bonjour */
.hello { text-align: center; overflow: hidden; }
.hello h2 { font-size: clamp(2.8rem, min(8vw, 10.24vh), 7.4rem); font-weight: 600; line-height: .92; letter-spacing: -.045em; text-transform: uppercase; }
.hello h2 .ol { display: block; color: transparent; -webkit-text-stroke: 2px var(--noir); }
.hello-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(44px, min(5vw, 6.4vh), 70px); text-align: left; }
.htile { background: var(--noir); color: var(--blanc); padding: 30px 28px; display: grid; gap: 6px; position: relative; transition: background .5s var(--ease), color .5s; }
.htile .ico { width: 30px; height: 30px; color: var(--taupe); margin-bottom: 16px; }
.htile span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.htile b { font-weight: 400; font-size: clamp(1.05rem, min(1.5vw, 1.92vh), 1.3rem); overflow-wrap: anywhere; }
.htile .arrow { position: absolute; right: 26px; top: 30px; width: 22px; height: 22px; transition: transform .5s var(--ease); }
.htile:hover { background: var(--blanc); color: var(--noir); }
.htile:hover .arrow { transform: translateX(6px); }

/* Questions fréquentes en liste */
.qlist { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(40px, min(6vw, 7.68vh), 100px); align-items: start; }
.ql-side { position: sticky; top: 110px; }
.ql-side .title { font-size: clamp(2rem, min(3.6vw, 4.61vh), 3.2rem); }
.ql-help { margin-top: 28px; font-size: 15px; opacity: .85; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.ql-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; padding: 28px 0; border-top: 1px solid var(--ligne); }
.bg-noir .ql-row { border-color: var(--ligne-claire); }
.ql-row h3 { font-size: 1.15rem; font-weight: 500; }
.ql-row p { opacity: .8; font-size: 15.5px; }

/* Expertises : liste éditoriale + image qui suit le curseur */
.xlist { border-bottom: 1px solid var(--ligne); }
.xl-row { display: grid; grid-template-columns: 80px minmax(0, 1.3fr) minmax(0, 1fr) 60px; align-items: center; gap: 24px; padding: clamp(26px, min(3.4vw, 4.35vh), 46px) 0; border-top: 1px solid var(--ligne); position: relative; transition: padding .6s var(--ease), color .4s; }
.xl-n { font-size: 13px; letter-spacing: .2em; color: var(--taupe); font-weight: 500; }
.xl-t { font-size: clamp(1.7rem, min(3.4vw, 4.35vh), 3.2rem); font-weight: 300; letter-spacing: -.03em; line-height: 1; transition: transform .6s var(--ease); }
.xl-d { opacity: .72; font-size: 15.5px; max-width: 28em; }
.xl-go { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--ligne); display: grid; place-items: center; transition: background .4s, border-color .4s, transform .5s var(--ease); justify-self: end; }
.xl-go .arrow { width: 20px; height: 20px; }
.xl-row:hover .xl-t, .xl-row:focus-visible .xl-t { transform: translateX(16px); color: var(--taupe); }
.xl-row:hover .xl-go, .xl-row:focus-visible .xl-go { background: var(--taupe); border-color: var(--taupe); transform: rotate(-45deg); }
.xl-img { position: absolute; left: 0; top: 0; width: 240px; height: 300px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-6deg); transition: opacity .35s, transform .5s var(--ease); z-index: 3; overflow: hidden; box-shadow: 0 40px 60px -30px rgba(0,0,0,.5); }
.xl-img img { width: 100%; height: 100%; object-fit: cover; }
.xl-row:hover .xl-img { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
.serp { width: 100%; height: 100%; background: var(--blanc); padding: 18px 14px; display: grid; gap: 10px; align-content: start; color: var(--noir); }
.serp-bar { border: 1px solid var(--ligne); border-radius: 999px; padding: 8px 12px; font-size: 11px; }
.serp-r { display: grid; gap: 4px; padding: 10px; border-radius: 6px; }
.serp-r i, .serp-r b, .serp-r span { display: block; min-height: 8px; background: rgba(19,19,19,.07); border-radius: 3px; font-style: normal; }
.serp-r.on { background: var(--noir); color: var(--blanc); }
.serp-r.on i, .serp-r.on b, .serp-r.on span { background: none; font-size: 11px; }
.serp-r.on i { color: var(--taupe); } .serp-r.on b { font-size: 14px; font-weight: 500; } .serp-r.on span { color: var(--taupe); }
@media (hover: none) { .xl-img { display: none; } }

/* Expertises : par où commencer */
.need { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, min(4vw, 5.12vh), 60px); align-items: stretch; }
.nd-list { display: grid; gap: 8px; }
.nd-b { font: inherit; color: var(--blanc); background: none; border: 1px solid var(--ligne-claire); padding: 20px 22px; text-align: left; display: flex; gap: 16px; align-items: center; cursor: pointer; font-size: 1.05rem; transition: background .4s, border-color .4s, color .4s; }
.nd-b span { font-size: 12px; letter-spacing: .2em; color: var(--taupe); }
.nd-b:hover { border-color: var(--taupe); }
.nd-b[aria-pressed="true"] { background: var(--taupe); border-color: var(--taupe); color: var(--noir); }
.nd-b[aria-pressed="true"] span { color: var(--noir); }
.nd-panel { border: 1px solid var(--ligne-claire); padding: clamp(28px, min(3.6vw, 4.61vh), 52px); display: grid; gap: 30px; align-content: center; }
.nd-nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nd-node { aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--ligne-claire); display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; font-size: 12px; letter-spacing: .06em; opacity: .35; transition: opacity .5s, background .5s var(--ease), border-color .5s, transform .6s var(--ease), color .5s; }
.nd-node .ico { width: 30px; height: 30px; }
.nd-node.on { opacity: 1; background: var(--blanc); color: var(--noir); border: 1px solid var(--blanc); transform: scale(1.06); }
.nd-node.on .ico { color: var(--taupe); }
.nd-txt { font-size: clamp(1.1rem, min(1.6vw, 2.05vh), 1.35rem); line-height: 1.55; min-height: 4.6em; }
.nd-cta { justify-self: start; }

/* Expertises : comparatif */
.vs-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, min(6vw, 7.68vh), 90px); align-items: center; }
.vs-grid .title { font-size: clamp(2rem, min(4vw, 5.12vh), 3.4rem); }
.vs-p { margin-top: 26px; opacity: .8; }
.vs-wrap { overflow-x: auto; }
.versus { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.versus th, .versus td { padding: 20px 18px; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.versus thead th { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.versus thead th:nth-child(2) { background: var(--noir); color: var(--taupe); }
.versus tbody th { font-weight: 500; }
.versus td.us { background: var(--noir); color: var(--blanc); }
.versus td.us .ico { width: 16px; height: 16px; color: var(--taupe); margin-right: 10px; vertical-align: -2px; }
.versus td.them { opacity: .6; }
.versus tbody tr:last-child td.us { border-bottom-color: var(--noir); }

/* Expertises : nuage de réalisations */
.cl-f { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.cl-f button, .mb-chips button { font: inherit; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.cl-f button[aria-pressed="true"] { background: var(--taupe); border-color: var(--taupe); color: var(--noir); }
.cloud { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.cloud li { font-size: clamp(1.05rem, min(2vw, 2.56vh), 1.7rem); font-weight: 300; padding: 8px 20px; border: 1px solid var(--ligne-claire); border-radius: 999px; transition: opacity .45s, transform .45s var(--ease), background .45s, color .45s; }
.cloud li:nth-child(3n) { font-weight: 500; }
.cloud li:nth-child(4n+1) { font-size: clamp(1.3rem, min(2.8vw, 3.58vh), 2.4rem); }
.cloud.f li { opacity: .14; transform: scale(.94); }
.cloud.f li.hit { opacity: 1; transform: none; background: var(--blanc); color: var(--noir); border-color: var(--blanc); }

/* Bandeau "pas sûr" */
.ask-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px, min(5vw, 6.4vh), 80px); align-items: center; }
.ask h2 { font-size: clamp(2.6rem, min(6.4vw, 8.19vh), 6rem); font-weight: 600; line-height: .92; letter-spacing: -.045em; text-transform: uppercase; }
.ask h2 .ol { display: block; color: transparent; -webkit-text-stroke: 2px var(--noir); }
.ask p { font-size: 1.1rem; }
.ask-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Club : intro + carte membre */
.ci-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, min(6vw, 7.68vh), 90px); align-items: center; }
.ci-grid .title { font-size: clamp(2rem, min(4.2vw, 5.38vh), 3.6rem); }
.ci-p { margin-top: 26px; opacity: .8; max-width: 36em; }
.ci-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 34px; border-top: 1px solid var(--ligne); }
.ci-facts li { padding: 22px 18px 0 0; display: grid; gap: 4px; }
.ci-facts li + li { padding-left: 18px; border-left: 1px solid var(--ligne); }
.ci-facts b { font-size: clamp(1.8rem, min(3vw, 3.84vh), 2.6rem); font-weight: 300; color: var(--taupe); line-height: 1; }
.ci-facts span { font-size: 13px; opacity: .75; }
.ci-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 38px; }
.mcard-wrap { perspective: 1000px; }
.mcard { aspect-ratio: 1.586; border-radius: 18px; background: radial-gradient(120% 140% at 0% 0%, #3a3a3a 0%, var(--noir) 55%); color: var(--blanc); padding: 8% 8%; position: relative; overflow: hidden; box-shadow: 0 50px 80px -40px rgba(0,0,0,.7), inset 0 0 0 1px rgba(161,132,100,.5); display: block; }
.mcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%); background-size: 250% 100%; animation: shine 5s var(--ease) infinite; }
@keyframes shine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
.mc-logo { width: 26%; height: auto; }
.mc-off { position: absolute; right: 8%; top: 9%; font-size: clamp(1.6rem, min(3vw, 3.84vh), 2.4rem); font-weight: 600; color: var(--taupe); letter-spacing: -.03em; }
.mc-lbl { position: absolute; left: 8%; bottom: 30%; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--taupe); }
.mc-name { position: absolute; left: 8%; bottom: 16%; font-size: clamp(1.1rem, min(2vw, 2.56vh), 1.5rem); }
.mc-no { position: absolute; left: 8%; bottom: 8%; font-size: 11px; letter-spacing: .2em; opacity: .55; text-transform: uppercase; }

/* Club : simulateur */
.calc { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; max-width: 1100px; margin: 0 auto; border: 1px solid var(--ligne-claire); }
.calc-in { padding: clamp(28px, min(3.6vw, 4.61vh), 52px); display: grid; gap: 14px; }
.calc-in label { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; letter-spacing: .04em; margin-top: 12px; }
.calc-in output { color: var(--taupe); font-weight: 500; font-size: 1.1rem; }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--ligne-claire); outline-offset: 8px; }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--taupe); border: 4px solid var(--noir); box-shadow: 0 0 0 1px var(--taupe); cursor: grab; }
.calc input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--taupe); border: 4px solid var(--noir); cursor: grab; }
.calc-note { font-size: 13px; opacity: .6; margin-top: 18px; }
.calc-out { background: var(--anthracite); padding: clamp(28px, min(3.6vw, 4.61vh), 52px); display: grid; align-content: center; gap: 0; }
.calc-out div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ligne-claire); }
.calc-out span { font-size: 14px; opacity: .8; }
.calc-out b { font-weight: 300; font-size: 1.6rem; }
.calc-tot { border-bottom: 0 !important; }
.calc-tot b { font-size: clamp(2.4rem, min(4.4vw, 5.63vh), 3.6rem); font-weight: 600; color: var(--taupe); letter-spacing: -.03em; }
.calc-tot.neg b { color: var(--blanc); opacity: .7; }

/* Club : un mois au Club */
.mo-grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(40px, min(6vw, 7.68vh), 90px); align-items: start; }
.mo-side { position: sticky; top: 110px; }
.mo-side .title { font-size: clamp(2rem, min(3.8vw, 4.86vh), 3.2rem); }
.mo-side p { margin-top: 24px; opacity: .8; }
.mo-ring { width: 170px; height: 170px; margin-top: 40px; position: relative; display: grid; place-items: center; }
.mo-ring svg { position: absolute; inset: 0; animation: spin 22s linear infinite; }
.mo-ring text { font-size: 13.5px; letter-spacing: .3em; fill: var(--taupe); font-weight: 500; }
.mo-ring span { font-size: 2.6rem; font-weight: 600; line-height: 1; text-align: center; }
.mo-ring small { display: block; font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin-top: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
.mo-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ligne); border-left: 1px solid var(--ligne); }
.mo-t { padding: 32px 28px; border-right: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); position: relative; transition: background .5s var(--ease), color .5s; }
.mo-t:hover { background: var(--noir); color: var(--blanc); }
.mo-n { position: absolute; right: 24px; top: 26px; font-size: 12px; letter-spacing: .2em; color: var(--taupe); }
.mo-t .ico { width: 32px; height: 32px; color: var(--taupe); }
.mo-t h3 { font-size: 1.25rem; margin: 18px 0 8px; }
.mo-t p { font-size: 15px; opacity: .78; }

/* Club : rencontres */
.meet { background: var(--noir); color: var(--blanc); overflow: hidden; }
.meet-bg { position: absolute; inset: -12% -3%; background: url(assets/rencontres-club.jpg) center 40%/cover; opacity: .45; }
.meet-grid { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, min(6vw, 7.68vh), 90px); align-items: center; }
.meet-grid .title { font-size: clamp(2rem, min(4vw, 5.12vh), 3.4rem); }
.meet-grid p { margin-top: 24px; opacity: .85; max-width: 32em; }
.ticket { background: var(--blanc); color: var(--noir); padding: 34px 32px; position: relative; transform: rotate(2deg); box-shadow: 0 50px 80px -40px rgba(0,0,0,.8); }
.ticket::before, .ticket::after { content: ""; position: absolute; top: calc(100% - 78px); width: 28px; height: 28px; border-radius: 50%; background: var(--noir); }
.ticket::before { left: -14px; } .ticket::after { right: -14px; }
.tk-top { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
.ticket dl { margin: 22px 0 0; }
.ticket dl div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px dashed rgba(19,19,19,.25); }
.ticket dt { font-size: 13px; opacity: .6; }
.ticket dd { margin: 0; font-weight: 500; text-align: right; }
.tk-foot { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 13px; letter-spacing: .06em; }
.tk-foot .ico { color: var(--taupe); }

/* Club : annuaire des membres */
.mb-tools { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.mb-search { flex: 1 1 260px; min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--noir); padding: 10px 2px; }
.mb-search .ico { width: 18px; height: 18px; color: var(--taupe); }
.mb-search input { flex: 1; border: 0; background: none; font: inherit; font-size: 16px; color: var(--noir); outline: none; min-width: 0; }
.mb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-chips button { font-size: 12px; padding: 9px 15px; }
.mb-chips button[aria-pressed="true"] { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.mb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.mb { background: var(--blanc); padding: 26px 24px; display: grid; gap: 6px; align-content: start; transition: transform .5s var(--ease), box-shadow .5s; }
.mb:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(0,0,0,.35); }
.mb-logo { width: 74px; height: 74px; border-radius: 50%; background: color-mix(in srgb, var(--taupe) 18%, var(--blanc)); display: grid; place-items: center; overflow: hidden; margin-bottom: 14px; border: 1px dashed rgba(19,19,19,.25); }
.mb-logo img { width: 100%; height: 100%; object-fit: contain; }
.mb-ph { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .55; }
.mb-sec { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
.mb h3 { font-size: 1.1rem; font-weight: 500; }
.mb p { font-size: 14px; opacity: .7; }
.mb-link { margin-top: 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; display: inline-flex; gap: 8px; align-items: center; }
.mb-link .arrow { width: 14px; height: 14px; }
.mb-link.off { opacity: .4; }
.mb-you { background: var(--noir); color: var(--blanc); }
.mb-you .mb-logo { background: var(--taupe); border: 0; }
.mb-you .mb-logo .ico { width: 26px; height: 26px; color: var(--noir); }
.mb-you .mb-link { color: var(--taupe); }
.mb[hidden] { display: none; }
.mb-empty { margin-top: 24px; opacity: .7; }

/* Club : adhérer */
.join { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.join li { padding: 10px clamp(20px, min(3vw, 3.84vh), 44px) 10px; position: relative; text-align: center; }
.join li + li { border-left: 1px solid rgba(19,19,19,.25); }
.jn-n { display: block; font-size: clamp(5rem, min(11vw, 14.08vh), 9rem); font-weight: 600; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--noir); letter-spacing: -.05em; }
.join h3 { font-size: 1.4rem; margin: 18px 0 10px; }
.join p { opacity: .85; max-width: 22em; margin: 0 auto; }

/* Club : final */
.cfinal { text-align: center; overflow: hidden; }
.cf-price { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: clamp(10rem, min(34vw, 43.52vh), 30rem); font-weight: 600; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(161,132,100,.22); white-space: nowrap; pointer-events: none; letter-spacing: -.06em; }
.cfinal .wrap { position: relative; }
.cfinal h2 { font-size: clamp(2.6rem, min(6.4vw, 8.19vh), 5.6rem); font-weight: 300; letter-spacing: -.035em; line-height: 1; }
.cfinal h2 .t { color: var(--taupe); }
.cfinal p { margin: 24px auto 0; opacity: .8; max-width: 34em; }
.cf-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }

@media (max-width: 1100px) {
  .bgrid { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
  .process::before, .process::after { left: 30px; top: 0; width: 1px; height: 100%; }
  .process::after { width: 2px; height: 0; left: 30px; transition: height 2.2s var(--ease); }
  .process.drawn::after { width: 2px; height: 100%; }
  .pstep { display: grid; grid-template-columns: 62px 1fr; column-gap: 24px; padding-bottom: 34px; }
  .pstep .pdot { grid-row: span 3; }
  .pnum { margin-top: 6px; }
}
@media (max-width: 900px) {
  .story, .qlist, .anc-grid, .vs-grid, .need, .ask-grid, .ci-grid, .mo-grid, .meet-grid, .calc { grid-template-columns: 1fr; }
  .story-pic, .ql-side, .mo-side { position: static; }
  .story-pic { max-width: 420px; }
  .vpanels { flex-direction: column; min-height: 0; }
  .vpanel { flex: none !important; }
  .vpanel h3 { writing-mode: horizontal-tb; transform: none; }
  .vp-n { font-size: 2.6rem; }
  .isnot { grid-template-columns: 1fr; }
  .atelier { grid-template-columns: 1fr 1fr; }
  .at-1 { grid-column: span 2; grid-row: span 1; }
  .at-5 { grid-column: span 2; }
  .hello-tiles { grid-template-columns: 1fr; }
  .xl-row { grid-template-columns: 44px 1fr 48px; }
  .xl-d { grid-column: 2 / 3; grid-row: 2; }
  .xl-go { grid-row: 1 / 3; grid-column: 3; width: 46px; height: 46px; }
  .join { grid-template-columns: 1fr; }
  .join li + li { border-left: 0; border-top: 1px solid rgba(19,19,19,.25); padding-top: 30px; margin-top: 20px; }
  .mo-ring { display: none; }
  .anc-ghost { display: none; }
}
@media (max-width: 600px) {
  .bgrid, .mo-tiles { grid-template-columns: 1fr; }
  .ql-row { grid-template-columns: 1fr; gap: 10px; }
  .nd-nodes { grid-template-columns: repeat(2, 1fr); max-width: 260px; }
  .ci-facts { grid-template-columns: 1fr; }
  .ci-facts li + li { border-left: 0; padding-left: 0; }
  .ci-facts li { padding: 16px 0; border-bottom: 1px solid var(--ligne); grid-template-columns: 90px 1fr; align-items: baseline; }
  .ticket { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scrub span { opacity: 1; }
  .mcard::after, .mo-ring svg { animation: none; }
  .process::after { transition: none; }
}

/* ===================== Angles arrondis (cartes, boutons, visuels) ===================== */
:root { --r: 20px; --r-sm: 14px; --r-btn: 14px; }
/* Boutons */
.btn, .car-btn:not([style*="50%"]), .nd-b, .htile, .faq-side .bubble, .bubble, .skip, .toast, .newsletter input, .newsletter button { border-radius: var(--r-btn); }
.car-btn { border-radius: 50%; }
.filters button, .cl-f button, .mb-chips button, .ptoggle button, .ptabs button { border-radius: 999px; }
/* Cartes */
.why-card, .xcard, .case .art, .casecard, .casecard .art, .slide .art, .who, .pcard, .ratecard, .rcard, .rv-card, .scard, .member .shot, .member, .cstep, .perk, .addon, .promise, .fact, .wcard, .fcard, .pr, .svc, .shot .art, .art-fallback, .art, .tstep .node,
.story-ph, .vpanel, .isnot .is, .isnot .not, .at-ph, .anc-card, .bcard, .nd-panel, .mo-t, .ticket, .mb, .mcard, .serp, .xl-img, .calc, .calc-out, .tsplit-txt, .tsplit-img, .logo-ph, .media, .info-list, .club-price, .alive, .cover { border-radius: var(--r); }
.case, .slide, .shot { border-radius: var(--r); }
.art, .case .art, .slide .art, .shot .art, .member .shot, .story-ph, .at-ph, .xl-img, .calc, .tsplit-img, .media, .vpanel, .mb-logo { overflow: hidden; }
.bcard { border-top: 0; box-shadow: inset 0 3px 0 var(--taupe); }
.calc-out { border-radius: 0 var(--r) var(--r) 0; }
.isnot { gap: 14px; }
.isnot .not { border-color: rgba(19,19,19,.3); }
/* Grilles à filets → cartes séparées et arrondies */
.svc-grid { border: 0; gap: 14px; }
.svc { border: 1px solid var(--ligne); }
.mo-tiles { border: 0; gap: 14px; }
.mo-t { border: 1px solid var(--ligne); }
/* Tableaux */
.vs-wrap, .rtable-wrap { border-radius: var(--r); overflow: hidden; }
.versus thead th:nth-child(2) { border-top-left-radius: var(--r-sm); border-top-right-radius: var(--r-sm); }
.versus tbody tr:last-child td.us { border-bottom-left-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
/* Bloc tarifs des pages services : image et texte arrondis */
.tsplit { gap: 14px; padding: 14px; }
@media (max-width: 900px) { .calc-out { border-radius: 0 0 var(--r) var(--r); } .vs-wrap { overflow-x: auto; } }

/* Galerie « Notre univers » (photos) */
.at-img { margin: 0; }
.at-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: transform 1.2s var(--ease); }
.at-img:hover img { transform: scale(1.06); }
.at-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(19,19,19,.7), transparent 45%); pointer-events: none; }
.at-img figcaption { position: absolute; left: 18px; bottom: 14px; z-index: 1; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--blanc); }

/* Portraits réels */
.member .shot.photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 15%; opacity: 1; transform: none; }
.member .shot.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(19,19,19,.75), transparent 40%); }
.member .cap { z-index: 2; }
.story-ph.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; opacity: 1; }
.sign img.avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--taupe); }
.meet::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(19,19,19,.85) 0%, rgba(19,19,19,.45) 55%, rgba(19,19,19,.2) 100%); }
.meet-grid { z-index: 2; }
@media (max-width: 900px) { .meet::before { background: rgba(19,19,19,.6); } }

/* Club : carte d'invitation manuscrite */
.invite { background: #F3EEE6; color: var(--noir); padding: 14px; border-radius: 6px; transform: rotate(-2deg); box-shadow: 0 50px 80px -40px rgba(0,0,0,.85), 0 2px 0 rgba(255,255,255,.4) inset; max-width: 440px; justify-self: center; width: 100%; }
.inv-in { border: 1px solid rgba(161,132,100,.7); outline: 1px solid rgba(161,132,100,.35); outline-offset: -7px; border-radius: 3px; padding: clamp(28px, min(3.4vw, 4.35vh), 44px) clamp(22px, min(3vw, 3.84vh), 38px); text-align: center; }
.inv-logo { width: 38px; height: auto; margin: 0 auto 10px; }
.inv-kicker { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
.inv-script, .inv-sign, .invite dd { font-family: "Pinyon Script", cursive; font-weight: 400; }
.inv-script { font-size: clamp(2rem, min(3.4vw, 4.35vh), 2.7rem); line-height: 1.15; margin-top: 14px; color: var(--noir); }
.inv-sub { font-size: 14px; letter-spacing: .04em; margin-top: 6px; opacity: .75; }
.inv-rule { display: block; width: 60px; height: 1px; background: var(--taupe); margin: 22px auto; position: relative; }
.inv-rule::after { content: "◆"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); font-size: 7px; color: var(--taupe); background: #F3EEE6; padding: 0 6px; }
.invite dl { margin: 0; display: grid; gap: 12px; }
.invite dl div { display: grid; gap: 0; }
.invite dt { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
.invite dd { margin: 0; font-size: clamp(1.45rem, min(2.2vw, 2.82vh), 1.75rem); line-height: 1.2; }
.inv-sign { font-size: 2rem; color: var(--taupe); margin-top: 24px; }
.inv-foot { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; opacity: .6; margin-top: 8px; }
@media (max-width: 600px) { .invite { transform: none; } }

/* Club : lettre d'invitation en paysage */
.meet-stack { position: relative; z-index: 2; display: grid; gap: clamp(44px, min(5vw, 6.4vh), 70px); justify-items: center; }
.meet-head { text-align: center; max-width: 820px; }
.meet-head .tag { justify-content: center; }
.meet-head .title { font-size: clamp(2rem, min(4vw, 5.12vh), 3.4rem); }
.meet-head p { margin: 24px auto 0; opacity: .85; max-width: 36em; }
.letter { width: 100%; max-width: 900px; aspect-ratio: 1.5; background: #F3EEE6; color: var(--noir); padding: 16px; border-radius: 6px; transform: rotate(-1.2deg); box-shadow: 0 60px 90px -45px rgba(0,0,0,.9); }
.lt-in { height: 100%; border: 1px solid rgba(161,132,100,.7); outline: 1px solid rgba(161,132,100,.35); outline-offset: -8px; border-radius: 3px; display: grid; grid-template-columns: 1fr 1.9fr; }
.lt-side { display: grid; align-content: center; justify-items: center; gap: 14px; padding: 30px 24px; border-right: 1px solid rgba(161,132,100,.45); text-align: center; }
.lt-logo { width: min(170px, 80%); height: auto; }
.lt-rule { width: 40px; height: 1px; background: var(--taupe); }
.lt-kicker { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
.lt-small { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; opacity: .55; }
.lt-body { padding: clamp(28px, min(4vw, 5.12vh), 56px); display: grid; align-content: center; gap: 18px; }
.lt-msg { font-family: "Pinyon Script", cursive; font-size: clamp(1.7rem, min(3vw, 3.84vh), 2.5rem); line-height: 1.22; }
.lt-msg2 { font-size: clamp(1.45rem, min(2.5vw, 3.2vh), 2.05rem); opacity: .85; }
.lt-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(161,132,100,.4); }
.lt-date { font-size: 13px; opacity: .8; }
.lt-date span { display: block; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--taupe); font-weight: 500; margin-bottom: 4px; opacity: 1; }
.lt-sign { font-family: "Pinyon Script", cursive; font-size: 2.2rem; color: var(--taupe); line-height: 1; }
@media (max-width: 760px) {
  .letter { aspect-ratio: auto; transform: none; }
  .lt-in { grid-template-columns: 1fr; }
  .lt-side { border-right: 0; border-bottom: 1px solid rgba(161,132,100,.45); padding: 28px 20px 22px; }
  .lt-logo { width: 120px; }
}

/* ===================== Réalisations ===================== */
.rz-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.rz-head .title { font-size: clamp(2rem, min(4.2vw, 5.38vh), 3.6rem); }
.rz-head p { opacity: .8; max-width: 34em; }
.rz-bar { position: sticky; top: 108px; z-index: 5; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 14px 0; margin-bottom: 26px; background: color-mix(in srgb, var(--blanc) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ligne); }
.rz-f { display: flex; flex-wrap: wrap; gap: 8px; }
.rz-f button { font: inherit; font-size: 13px; letter-spacing: .06em; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--ligne); background: none; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.rz-f button sup { font-size: 10px; color: var(--taupe); margin-left: 2px; }
.rz-f button[aria-pressed="true"] { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.rz-u { display: flex; align-items: center; gap: 10px; font-size: 14px; background: var(--taupe); color: var(--noir); padding: 6px 8px 6px 16px; border-radius: 999px; }
.rz-u button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--noir); color: var(--blanc); cursor: pointer; font-size: 16px; line-height: 1; }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(180px, min(18vw, 23.04vh), 270px); grid-auto-flow: dense; gap: 14px; }
.mz.big { grid-column: span 2; grid-row: span 2; } .mz.wide { grid-column: span 2; } .mz.tall { grid-row: span 2; }
.mz[hidden] { display: none; }
.mz-btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in; border-radius: var(--r, 20px); overflow: hidden; background: var(--anthracite); }
.mz-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; }
.mz-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(19,19,19,.8), transparent 50%); opacity: .7; transition: opacity .5s; }
.mz-btn:hover img, .mz-btn:focus-visible img { transform: scale(1.06); }
.mz-btn:hover::after { opacity: 1; }
.mz-cap { position: absolute; left: 18px; right: 60px; bottom: 16px; z-index: 1; text-align: left; color: var(--blanc); display: grid; gap: 2px; }
.mz-cat { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
.mz-t { font-size: 15px; }
.mz-zoom { position: absolute; right: 16px; bottom: 16px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; background: var(--taupe); display: grid; place-items: center; transform: scale(.6); opacity: 0; transition: transform .5s var(--ease), opacity .4s; }
.mz-zoom .ico { width: 16px; height: 16px; color: var(--noir); }
.mz-btn:hover .mz-zoom, .mz-btn:focus-visible .mz-zoom { transform: none; opacity: 1; }
.unis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.uni { width: 100%; font: inherit; color: var(--blanc); background: none; border: 1px solid var(--ligne-claire); border-radius: var(--r, 20px); padding: 22px 18px 20px; cursor: pointer; display: grid; gap: 6px; text-align: left; transition: border-color .4s, background .4s; }
.uni:hover, .uni:focus-visible { border-color: var(--taupe); background: rgba(161,132,100,.08); }
.uni-stack { position: relative; height: 170px; margin-bottom: 16px; }
.uni-stack img { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 4/5; object-fit: cover; border-radius: 10px; box-shadow: 0 20px 30px -15px rgba(0,0,0,.8); transform: translate(-50%, -50%); transition: transform .7s var(--ease); }
.uni-stack img:nth-child(1) { transform: translate(-50%, -50%) rotate(-7deg); }
.uni-stack img:nth-child(2) { transform: translate(-50%, -50%) rotate(3deg); }
.uni-stack img:nth-child(3) { transform: translate(-50%, -50%) rotate(-1deg); }
.uni:hover .uni-stack img:nth-child(1) { transform: translate(-95%, -50%) rotate(-14deg); }
.uni:hover .uni-stack img:nth-child(2) { transform: translate(-5%, -50%) rotate(12deg); }
.uni-n { font-size: 1.2rem; }
.uni-c { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); display: flex; gap: 8px; align-items: center; }
.uni-c .arrow { width: 16px; height: 16px; }
.un-p { margin-top: 18px; opacity: .75; }
.rz-next { overflow: hidden; text-align: center; padding-top: 0 !important; }
.nx-strip { overflow: hidden; margin-bottom: clamp(50px, min(6vw, 7.68vh), 80px); }
.nx-track { display: flex; gap: 12px; width: max-content; animation: nx 50s linear infinite; padding-top: 12px; }
.nx-track img { width: 220px; height: 150px; object-fit: cover; border-radius: 14px; }
@keyframes nx { to { transform: translateX(-50%); } }
.nx-in h2 { font-size: clamp(2.4rem, min(6.4vw, 8.19vh), 5.6rem); font-weight: 600; line-height: .94; letter-spacing: -.045em; text-transform: uppercase; }
.nx-in h2 .ol { display: block; color: transparent; -webkit-text-stroke: 2px var(--noir); }
.nx-in p { margin: 26px auto 0; max-width: 34em; font-size: 1.1rem; }
.nx-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
.lbox { border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); width: 100%; max-height: 92vh; overflow: visible; color: var(--blanc); }
.lbox::backdrop { background: rgba(19,19,19,.92); backdrop-filter: blur(6px); }
.lbox figure { margin: 0; display: grid; grid-template-columns: 1.7fr 1fr; background: var(--noir); border-radius: 20px; overflow: hidden; max-height: 88vh; }
.lbox img { width: 100%; height: 100%; max-height: 88vh; object-fit: cover; }
.lbox figcaption { padding: clamp(24px, min(3vw, 3.84vh), 44px); display: grid; align-content: center; gap: 14px; }
.lb-cat { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
.lb-t { font-size: clamp(1.5rem, min(2.4vw, 3.07vh), 2.2rem); }
.lb-d { opacity: .8; }
.lbox .btn { justify-self: start; margin-top: 10px; }
.lb-close { position: absolute; right: -6px; top: -50px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ligne-claire); background: var(--noir); color: var(--blanc); font-size: 22px; cursor: pointer; }
.lb-nav { position: absolute; top: 50%; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--taupe); color: var(--noir); cursor: pointer; display: grid; place-items: center; transform: translateY(-50%); z-index: 2; }
.lb-nav .arrow { width: 20px; height: 20px; }
.lb-prev { left: -24px; } .lb-prev .arrow { transform: scaleX(-1); } .lb-next { right: -24px; }

/* ===================== Contact ===================== */
.ct-quick { padding-block: clamp(60px, min(7vw, 8.96vh), 100px) !important; }
.cq-phone { display: block; font-size: clamp(2.6rem, min(9vw, 11.52vh), 8.5rem); font-weight: 300; letter-spacing: -.04em; line-height: 1; margin-top: 18px; transition: color .4s; }
.cq-phone span { display: block; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); font-weight: 500; margin-bottom: 14px; }
.cq-phone:hover { color: var(--taupe); }
.cq-alt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--ligne); }
.cq-alt li { padding: 22px 20px 0 0; display: grid; gap: 4px; }
.cq-alt li + li { padding-left: 20px; border-left: 1px solid var(--ligne); }
.cq-alt span { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; opacity: .6; }
.cq-alt a { font-size: 1.05rem; }
.cq-alt a:hover { color: var(--taupe); }
.bf-grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(36px, min(6vw, 7.68vh), 90px); align-items: start; }
.bf-side { position: sticky; top: 120px; }
.bf-side .title { font-size: clamp(2rem, min(3.8vw, 4.86vh), 3.2rem); }
.bf-side > p { margin-top: 22px; opacity: .8; }
.bf-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px; }
.bf-steps li { display: flex; align-items: center; gap: 14px; opacity: .45; transition: opacity .4s; }
.bf-steps li span { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--taupe); display: grid; place-items: center; font-size: 13px; transition: background .4s, color .4s; }
.bf-steps li.on, .bf-steps li.done { opacity: 1; }
.bf-steps li.on span, .bf-steps li.done span { background: var(--taupe); color: var(--noir); }
.bf { background: var(--anthracite); border-radius: var(--r, 20px); padding: clamp(26px, min(3.6vw, 4.61vh), 50px); position: relative; overflow: hidden; }
.bf-bar { position: absolute; left: 0; top: 0; right: 0; height: 3px; background: rgba(248,248,248,.1); }
.bf-bar span { display: block; height: 100%; width: 33%; background: var(--taupe); transition: width .6s var(--ease); }
.bf fieldset { border: 0; margin: 0; padding: 0; }
.bf legend { font-size: clamp(1.4rem, min(2.4vw, 3.07vh), 2rem); margin-bottom: 8px; padding: 0; }
.bf-help { opacity: .65; font-size: 14px; margin-bottom: 18px; }
.bf-lbl { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); margin: 24px 0 10px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--ligne-claire); font-size: 15px; transition: background .3s, color .3s, border-color .3s; }
.chip:hover span { border-color: var(--taupe); }
.chip input:checked + span { background: var(--taupe); border-color: var(--taupe); color: var(--noir); }
.chip input:focus-visible + span { outline: 2px solid var(--blanc); outline-offset: 3px; }
.fld { display: grid; gap: 8px; margin-top: 16px; }
.fld span { font-size: 13px; opacity: .75; }
.fld input, .fld textarea { font: inherit; color: var(--blanc); background: rgba(19,19,19,.35); border: 1px solid var(--ligne-claire); border-radius: 12px; padding: 14px 16px; outline: none; transition: border-color .3s; resize: vertical; }
.fld input:focus, .fld textarea:focus { border-color: var(--taupe); }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(248,248,248,.4); }
.fld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fld-full { grid-column: 1 / -1; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; font-size: 14px; opacity: .85; cursor: pointer; }
.consent input { margin-top: 4px; accent-color: var(--taupe); width: 18px; height: 18px; flex: none; }
.consent a { color: var(--taupe); text-decoration: underline; }
.bf-err { color: #E8B38A; font-size: 14px; margin-top: 14px; }
.bf-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.bf-nav .bf-next, .bf-nav .bf-send { margin-left: auto; }
.bf-done { text-align: center; padding: 30px 0; }
.bf-ok { width: 64px; height: 64px; color: var(--noir); background: var(--taupe); border-radius: 50%; padding: 16px; margin: 0 auto 20px; display: block; }
.bf-done h3 { font-size: 1.8rem; margin-bottom: 12px; }
.bf-done p { opacity: .8; max-width: 30em; margin: 0 auto; }
.bf-done a { color: var(--taupe); }
.after { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: none; }
.after li { position: relative; border: 1px solid var(--ligne); border-radius: var(--r, 20px); padding: 34px 30px; }
.after li + li::before { content: ""; position: absolute; left: -15px; top: 56px; width: 16px; border-top: 1px dashed var(--taupe); }
.af-i { width: 54px; height: 54px; border-radius: 50%; background: var(--noir); display: grid; place-items: center; }
.af-i .ico { width: 24px; height: 24px; color: var(--taupe); }
.af-n { position: absolute; right: 28px; top: 30px; font-size: 2.6rem; font-weight: 600; color: transparent; -webkit-text-stroke: 1px var(--taupe); line-height: 1; }
.after h3 { font-size: 1.3rem; margin: 20px 0 8px; }
.after p { opacity: .78; font-size: 15px; }
.dqs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.dq { background: var(--blanc); border-radius: var(--r, 20px); padding: 0 24px; }
.dq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 24px 0; font-size: 1.05rem; }
.dq summary::-webkit-details-marker { display: none; }
.dq-n { font-size: 12px; color: var(--taupe); letter-spacing: .14em; font-weight: 500; }
.dq-pm { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ligne); position: relative; flex: none; transition: background .3s, transform .4s var(--ease); }
.dq-pm::before, .dq-pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1px; background: currentColor; transform: translate(-50%, -50%); }
.dq-pm::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--ease); }
.dq[open] .dq-pm { background: var(--taupe); border-color: var(--taupe); }
.dq[open] .dq-pm::after { transform: translate(-50%, -50%); }
.dq p { padding: 0 0 24px 40px; opacity: .8; font-size: 15px; }
.visit { position: relative; min-height: clamp(460px, 60vh, 640px); display: grid; align-items: center; background: var(--noir); color: var(--blanc); overflow: hidden; }
.vi-img { position: absolute; inset: 0; }
.vi-img img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.vi-card { position: relative; margin: 60px var(--gutter); max-width: 480px; background: var(--noir); border-radius: var(--r, 20px); padding: clamp(28px, min(3.6vw, 4.61vh), 48px); display: grid; gap: 18px; box-shadow: 0 50px 80px -40px rgba(0,0,0,.9); }
.vi-card h2 { font-size: clamp(1.6rem, min(2.6vw, 3.33vh), 2.2rem); line-height: 1.2; }
.vi-card h2 span { color: var(--taupe); }
.vi-card dl { margin: 0; }
.vi-card dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--ligne-claire); font-size: 15px; }
.vi-card dt { opacity: .6; }
.vi-card dd { margin: 0; text-align: right; }
.vi-card .btn { justify-self: start; }

/* ===================== Journal (style presse) ===================== */
.paper { background: #F3EEE6; color: var(--noir); padding-block: clamp(50px, min(6vw, 7.68vh), 90px); }
.paper-2 { padding-top: 0; }
.paper-3 { padding-top: 0; }
.mast { text-align: center; border-top: 3px solid var(--noir); border-bottom: 1px solid var(--noir); padding: 14px 0 0; }
.mast-top, .mast-bot { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--noir); }
.mast-title { font-size: clamp(2.8rem, min(10vw, 12.8vh), 9rem); font-weight: 600; letter-spacing: -.05em; line-height: .95; padding: 18px 0 14px; }
.mast-title span { color: var(--taupe); font-weight: 300; }
.mast-bot { border-bottom: 0; border-top: 3px double var(--noir); padding: 12px 0; justify-content: center; color: var(--taupe); font-weight: 500; }
.rubs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--noir); margin-bottom: clamp(30px, min(4vw, 5.12vh), 50px); }
.rubs button { font: inherit; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; background: none; border: 0; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.rubs button[aria-pressed="true"] { background: var(--noir); color: var(--blanc); }
.kick { display: inline-block; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); font-weight: 600; }
.une { display: grid; grid-template-columns: 2.2fr 1fr; gap: 0; }
.une[hidden] { display: none; }
.une-main { display: grid; gap: 14px; padding-right: clamp(24px, min(3vw, 3.84vh), 44px); border-right: 1px solid rgba(19,19,19,.25); }
.une-img { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; }
.une-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.une-main:hover .une-img img { transform: scale(1.04); }
.une-t { font-size: clamp(2rem, min(4.4vw, 5.63vh), 3.8rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; }
.une-main:hover .une-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--taupe); }
.une-chapo { font-size: 1.15rem; line-height: 1.6; max-width: 40em; }
.by { display: flex; align-items: center; gap: 12px; font-size: 13px; opacity: .85; }
.by img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.une-side { padding-left: clamp(24px, min(3vw, 3.84vh), 44px); }
.side-h { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; border-bottom: 2px solid var(--noir); padding-bottom: 10px; margin-bottom: 6px; }
.tips { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.tips li { counter-increment: t; padding: 18px 0 18px 46px; border-bottom: 1px solid rgba(19,19,19,.2); position: relative; }
.tips li::before { content: counter(t); position: absolute; left: 0; top: 14px; font-size: 2rem; font-weight: 600; color: var(--taupe); line-height: 1; }
.tips h3 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.tips p { font-size: 14px; opacity: .8; line-height: 1.55; }
.sec-rule { display: flex; align-items: center; gap: 18px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; margin: clamp(40px, min(5vw, 6.4vh), 60px) 0 26px; }
.sec-rule::before, .sec-rule::after { content: ""; flex: 1; height: 1px; background: var(--noir); }
.sec-rule::before { flex: 0 0 30px; }
.cols { columns: 3 280px; column-gap: clamp(28px, min(3vw, 3.84vh), 44px); column-rule: 1px solid rgba(19,19,19,.22); }
.cols-3 { columns: 3 240px; }
.col-art { break-inside: avoid; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid rgba(19,19,19,.2); }
.col-art[hidden] { display: none; }
.col-art a { display: grid; gap: 10px; }
.col-art figure { margin: 0 0 6px; border-radius: 14px; overflow: hidden; aspect-ratio: 3/2; }
.col-art figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.col-art a:hover figure img { transform: scale(1.05); }
.col-art h3 { font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.col-art:nth-child(3n+2) h3 { font-size: 1.8rem; }
.col-art a:hover h3 { color: var(--taupe); }
.col-art p { font-size: 15px; line-height: 1.6; opacity: .85; }
.rt { font-size: 12px; opacity: .6; letter-spacing: .04em; }
.cols-empty { text-align: center; padding: 30px 0; opacity: .7; }
.ed-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, min(3vw, 3.84vh), 44px); align-items: start; }
.ed-q { font-size: clamp(1.25rem, min(2vw, 2.56vh), 1.6rem); line-height: 1.45; font-weight: 300; }
.ed-sign { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-weight: 600; }
.ed-sign img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.ed-sign small { display: block; font-weight: 300; font-size: 13px; opacity: .7; }
.lex-w { font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; }
.lex-w i { font-size: 14px; font-weight: 300; color: var(--taupe); }
.lex-d { margin: 12px 0 18px; font-size: 15px; line-height: 1.65; }
.subscribe { background: var(--noir); color: var(--blanc); border-radius: var(--r, 20px); padding: 4px 26px 28px; }
.subscribe .sec-rule { margin-top: 22px; color: var(--blanc); }
.subscribe .sec-rule::before, .subscribe .sec-rule::after { background: var(--blanc); }
.subscribe p { font-size: 15px; opacity: .8; margin-bottom: 16px; }
.subscribe input { width: 100%; font: inherit; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--ligne-claire); background: rgba(248,248,248,.06); color: var(--blanc); margin-bottom: 12px; outline: none; }
.subscribe .btn { width: 100%; justify-content: center; border-color: var(--taupe); background: var(--taupe); color: var(--noir); }

/* ===================== Article ===================== */
.ahead { text-align: left; place-items: end start; min-height: 0; padding-top: clamp(140px, min(16vw, 20.48vh), 190px); padding-bottom: clamp(50px, min(6vw, 7.68vh), 80px); }
.ah-in { width: 100%; max-width: 1000px; padding: 0; margin: 0 auto; display: grid; gap: 18px; }
.ahead .crumbs { justify-content: flex-start; margin: 0; }
.ahead h1 { font-size: clamp(2.2rem, min(5.4vw, 6.91vh), 4.6rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; text-transform: none; }
.ahead h1 small { display: block; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; font-weight: 400; color: var(--taupe); margin-top: 18px; }
.ah-chapo { font-size: clamp(1.1rem, min(1.6vw, 2.05vh), 1.35rem); line-height: 1.55; opacity: .85; max-width: 44em; }
.ahead .by { opacity: 1; font-size: 14px; }
.ahead .by img { width: 48px; height: 48px; border: 1px solid var(--taupe); }
.a-grid { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: clamp(30px, min(5vw, 6.4vh), 80px); justify-content: center; }
.a-side { position: sticky; top: 130px; align-self: start; display: grid; gap: 34px; }
.a-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.a-toc li { counter-increment: c; }
.a-toc a { display: flex; gap: 10px; padding: 9px 0; font-size: 14px; line-height: 1.4; opacity: .6; border-bottom: 1px solid rgba(19,19,19,.12); transition: opacity .3s, color .3s; }
.a-toc a::before { content: "0" counter(c); font-size: 11px; color: var(--taupe); padding-top: 2px; }
.a-toc a.on, .a-toc a:hover { opacity: 1; color: var(--noir); font-weight: 500; }
.a-share { display: flex; flex-wrap: wrap; gap: 8px; }
.a-share .side-h { width: 100%; }
.a-share a, .a-share button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(19,19,19,.3); display: grid; place-items: center; font: inherit; font-weight: 600; background: none; cursor: pointer; transition: background .3s, color .3s; }
.a-share a:hover, .a-share button:hover { background: var(--noir); color: var(--blanc); }
.a-body { font-size: 18px; line-height: 1.8; }
.a-body > p { margin-bottom: 1.3em; }
.dropcap::first-letter { float: left; font-size: 5.2em; line-height: .82; font-weight: 600; color: var(--taupe); margin: .06em .1em 0 0; }
.a-body h2 { font-size: clamp(1.6rem, min(2.6vw, 3.33vh), 2.2rem); font-weight: 600; letter-spacing: -.02em; margin: 1.8em 0 .7em; scroll-margin-top: 130px; display: flex; gap: 14px; align-items: baseline; }
.a-body h2 span { font-size: 14px; color: var(--taupe); font-weight: 500; letter-spacing: .1em; }
.a-body b { font-weight: 600; }
.a-fig { margin: 2em 0; }
.a-fig img { width: 100%; border-radius: 16px; }
.a-fig figcaption { font-size: 13px; opacity: .65; margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--taupe); }
.pull { margin: 1.8em 0; padding: 26px 0; border-top: 3px solid var(--noir); border-bottom: 1px solid var(--noir); }
.pull p { font-size: clamp(1.5rem, min(2.6vw, 3.33vh), 2.1rem); line-height: 1.3; font-weight: 300; letter-spacing: -.01em; }
.pull p::before { content: "« "; color: var(--taupe); } .pull p::after { content: " »"; color: var(--taupe); }
.box { background: var(--noir); color: var(--blanc); border-radius: 16px; padding: 26px 30px; margin: 2em 0; font-size: 16px; }
.box .box-h { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); font-weight: 600; margin-bottom: 12px; }
.box li { padding: 8px 0 8px 22px; position: relative; border-top: 1px solid var(--ligne-claire); }
.box li::before { content: "◆"; position: absolute; left: 0; top: 9px; font-size: 9px; color: var(--taupe); }
.a-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--taupe); border-radius: 16px; padding: 24px 28px; margin: 2em 0; font-size: 16px; }
.a-cta-k { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; }
.a-cta .btn { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.a-q { font-size: 1.15rem; font-weight: 600; margin: 1.2em 0 .4em; }
.author { display: flex; gap: 20px; align-items: flex-start; margin-top: 3em; padding: 26px; border: 1px solid rgba(19,19,19,.2); border-radius: 16px; font-size: 16px; }
.author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.author .side-h { border: 0; padding: 0; color: var(--taupe); }
.author p + p { margin: 6px 0 10px; }

@media (max-width: 1100px) { .unis { grid-template-columns: repeat(3, 1fr); } .ed-grid { grid-template-columns: 1fr 1fr; } .subscribe { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  .rz-head, .bf-grid, .une, .dqs, .lbox figure { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mz.big { grid-column: span 2; grid-row: span 2; }
  .rz-bar { top: 76px; }
  .bf-side { position: static; }
  .cq-alt, .after { grid-template-columns: 1fr; }
  .cq-alt li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--ligne); padding-top: 16px; margin-top: 16px; }
  .after li + li::before { display: none; }
  .une-main { padding-right: 0; border-right: 0; padding-bottom: 30px; border-bottom: 1px solid rgba(19,19,19,.25); }
  .une-side { padding-left: 0; padding-top: 24px; }
  .a-grid { grid-template-columns: 1fr; }
  .a-side { position: static; order: 2; }
  .a-toc { display: none; }
  .lbox img { max-height: 50vh; }
  .lb-prev { left: 6px; } .lb-next { right: 6px; }
  .lb-close { right: 6px; }
}
@media (max-width: 600px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .mz.wide { grid-column: span 2; }
  .unis { grid-template-columns: 1fr 1fr; }
  .fld-grid, .ed-grid { grid-template-columns: 1fr; }
  .mast-top { justify-content: center; }
  .mast-top span:last-child { display: none; }
  .a-body { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .nx-track { animation: none; } }
.paper { display: flow-root; }
.ah-in { position: relative; z-index: 2; }

/* ===================== Pages légales ===================== */
.lg-grid { display: grid; grid-template-columns: 250px minmax(0, 780px); gap: clamp(30px, min(5vw, 6.4vh), 80px); justify-content: center; }
.lg-side { position: sticky; top: 130px; align-self: start; }
.lg-toc { list-style: none; margin: 0; padding: 0; counter-reset: l; }
.lg-toc li { counter-increment: l; }
.lg-toc a { display: flex; gap: 10px; padding: 8px 0; font-size: 14px; opacity: .65; border-bottom: 1px solid rgba(19,19,19,.12); transition: opacity .3s; }
.lg-toc a::before { content: counter(l, decimal-leading-zero); font-size: 11px; color: var(--taupe); padding-top: 2px; }
.lg-toc a:hover, .lg-toc a.on { opacity: 1; font-weight: 500; }
.lg-also a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; border-bottom: 1px solid rgba(19,19,19,.12); }
.lg-also .arrow { width: 16px; height: 16px; color: var(--taupe); }
.lg-date { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); font-weight: 500; }
.lg-intro { font-size: 1.2rem; line-height: 1.6; margin: 16px 0 10px; }
.lg-sec { padding-top: 34px; scroll-margin-top: 120px; font-size: 16.5px; line-height: 1.75; }
.lg-sec h2 { font-size: clamp(1.35rem, min(2vw, 2.56vh), 1.7rem); font-weight: 600; letter-spacing: -.01em; display: flex; gap: 14px; align-items: baseline; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid rgba(19,19,19,.2); }
.lg-sec h2 span { font-size: 13px; color: var(--taupe); font-weight: 500; }
.lg-sec p + p { margin-top: 12px; }
.lg-sec a { color: inherit; text-decoration: underline; text-decoration-color: var(--taupe); text-underline-offset: 3px; }
.lg-sec .btn { text-decoration: none; margin-top: 8px; }
.lg-dl { margin: 0; }
.lg-dl div { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px dashed rgba(19,19,19,.18); }
.lg-dl dt { opacity: .6; font-size: 14px; }
.lg-dl dd { margin: 0; }
.lg-ul { list-style: none; margin: 10px 0 0; padding: 0; }
.lg-ul li { padding: 8px 0 8px 22px; position: relative; }
.lg-ul li::before { content: "◆"; position: absolute; left: 0; top: 10px; font-size: 9px; color: var(--taupe); }
.lg-table { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 6px; }
.lg-table th, .lg-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(19,19,19,.15); vertical-align: top; }
.lg-table thead th { background: var(--noir); color: var(--blanc); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.lg-table thead th:first-child { border-top-left-radius: 12px; } .lg-table thead th:last-child { border-top-right-radius: 12px; }
.todo-l { background: rgba(161,132,100,.22); color: inherit; padding: 1px 6px; border-radius: 4px; font-size: .92em; }
.lg-help { display: flex; gap: 18px; align-items: center; margin-top: 50px; padding: 24px 26px; background: var(--noir); color: var(--blanc); border-radius: var(--r, 20px); font-size: 15px; }
.lg-help .ico { width: 40px; height: 40px; color: var(--taupe); flex: none; }
.lg-help a { color: var(--taupe); }
@media (max-width: 900px) { .lg-grid { grid-template-columns: 1fr; } .lg-side { position: static; } .lg-dl div { grid-template-columns: 1fr; gap: 2px; } }

/* ===================== 404 ===================== */
.e404 { position: relative; min-height: 100svh; display: grid; align-items: center; background: var(--noir); color: var(--blanc); overflow: hidden; padding: 130px 0 70px; }
.e4-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 68% 45%; opacity: .45; }
.e404::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19,19,19,.92) 0%, rgba(19,19,19,.55) 60%, rgba(19,19,19,.3) 100%); }
.e4-in { position: relative; z-index: 1; }
.e4-num { font-size: clamp(7rem, min(22vw, 28.16vh), 18rem); font-weight: 600; line-height: .8; letter-spacing: -.06em; }
.e4-num span { color: transparent; -webkit-text-stroke: 2px var(--taupe); display: inline-block; animation: e4 4s var(--ease) infinite; }
@keyframes e4 { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(8deg); } }
.e404 h1 { font-size: clamp(2rem, min(4.4vw, 5.63vh), 3.6rem); font-weight: 300; letter-spacing: -.02em; margin-top: 26px; }
.e404 h1 small { display: block; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); margin-top: 14px; font-weight: 400; }
.e4-p { margin-top: 18px; max-width: 34em; opacity: .85; font-size: 1.05rem; }
.e4-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.e4-links { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 10px; margin-top: 46px; }
.e4-links a { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--ligne-claire); border-radius: 14px; font-size: 15px; transition: background .3s, border-color .3s; backdrop-filter: blur(4px); }
.e4-links a:hover { border-color: var(--taupe); background: rgba(161,132,100,.12); }
.e4-links .ico { width: 20px; height: 20px; color: var(--taupe); }
.e4-links .arrow { width: 16px; height: 16px; margin-left: auto; }
@media (max-width: 700px) { .e4-links { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .e4-num span { animation: none; } }

/* ===================== Bandeau cookies ===================== */
.footer-bottom .cookie-open { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; opacity: inherit; }
.footer-bottom .cookie-open:hover { color: var(--taupe); }
.ck { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 95; width: min(440px, calc(100% - 32px)); background: var(--noir); color: var(--blanc); border: 1px solid rgba(161,132,100,.5); border-radius: 20px; padding: 24px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); transform: translateY(20px); opacity: 0; transition: transform .5s var(--ease), opacity .5s; font-size: 14px; }
.ck.show { transform: none; opacity: 1; }
.ck-h { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; margin-bottom: 8px; }
.ck-h img { width: 40px; height: auto; }
.ck p { opacity: .8; line-height: 1.6; }
.ck p a { color: var(--taupe); text-decoration: underline; }
.ck-opts { margin: 16px 0 4px; display: grid; gap: 8px; }
.ck-opts[hidden] { display: none; }
.ck-opt { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--ligne-claire); border-radius: 12px; }
.ck-opt b { font-weight: 500; display: block; }
.ck-opt small { opacity: .65; font-size: 12px; }
.ck-sw { position: relative; width: 44px; height: 24px; flex: none; }
.ck-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.ck-sw span { position: absolute; inset: 0; border-radius: 999px; background: rgba(248,248,248,.2); transition: background .3s; }
.ck-sw span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--blanc); transition: transform .3s var(--ease); }
.ck-sw input:checked + span { background: var(--taupe); }
.ck-sw input:checked + span::after { transform: translateX(20px); }
.ck-sw input:disabled + span { opacity: .6; }
.ck-sw input:focus-visible + span { outline: 2px solid var(--taupe); outline-offset: 2px; }
.ck-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ck-btns button { flex: 1 1 auto; font: inherit; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; padding: 12px 14px; border-radius: 12px; cursor: pointer; border: 1px solid var(--ligne-claire); background: none; color: var(--blanc); transition: background .3s, color .3s, border-color .3s; }
.ck-btns button:hover { border-color: var(--taupe); }
.ck-btns .ck-yes { background: var(--taupe); border-color: var(--taupe); color: var(--noir); }
.ck-btns .ck-yes:hover { background: var(--blanc); border-color: var(--blanc); }
.ck-link { flex-basis: 100%; background: none !important; border: 0 !important; text-decoration: underline; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; opacity: .75; padding: 4px !important; }

/* ===================== Accès espace client ===================== */
.menu-side a.menu-login { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border: 1px solid var(--taupe); border-radius: var(--r-btn, 14px); color: var(--blanc); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; line-height: 1.2; transition: background .4s, color .4s; }
.menu-side a.menu-login .ico { width: 18px; height: 18px; color: var(--taupe); transition: color .4s; }
.menu-side a.menu-login:hover { background: var(--taupe); color: var(--noir); }
.menu-side a.menu-login:hover .ico { color: var(--noir); }
.footer-bottom a.foot-login { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgba(161,132,100,.6); border-radius: 999px; color: var(--blanc); transition: background .3s, color .3s; }
.footer-bottom a.foot-login .ico { width: 14px; height: 14px; color: var(--taupe); }
.footer-bottom a.foot-login:hover { background: var(--taupe); color: var(--noir); }
.footer-bottom a.foot-login:hover .ico { color: var(--noir); }

/* ===================== Connexion ===================== */
.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100svh; background: var(--noir); }
.auth-visual { position: relative; overflow: hidden; color: var(--blanc); display: flex; align-items: flex-end; }
.auth-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.auth-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,19,19,.55) 0%, rgba(19,19,19,.2) 40%, rgba(19,19,19,.88) 100%); }
.auth-visual-in { position: relative; z-index: 1; padding: clamp(30px, min(5vw, 6.4vh), 70px); max-width: 560px; }
.auth-logo { width: 120px; height: auto; margin-bottom: 30px; }
.auth-quote { font-size: clamp(2rem, min(3.6vw, 4.61vh), 3.2rem); font-weight: 300; line-height: 1.08; letter-spacing: -.02em; }
.auth-sub { margin-top: 16px; opacity: .85; }
.auth-panel { display: grid; place-items: center; padding: 130px clamp(20px, min(5vw, 6.4vh), 70px) 60px; background: #F3EEE6; color: var(--noir); }
.auth-card { width: 100%; max-width: 460px; }
.auth-crumbs { justify-content: flex-start; margin: 0 0 22px; color: var(--anthracite); }
.auth-crumbs a { color: var(--anthracite); }
.auth h1 { font-size: clamp(2.2rem, min(4vw, 5.12vh), 3.2rem); font-weight: 300; letter-spacing: -.02em; }
.auth h1 small { display: block; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); margin-top: 12px; font-weight: 500; }
.auth-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; margin: 28px 0 18px; background: var(--noir); border-radius: 999px; }
.auth-tabs button { position: relative; z-index: 1; font: inherit; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; padding: 12px 10px; border: 0; background: none; color: rgba(248,248,248,.7); border-radius: 999px; cursor: pointer; transition: color .4s; }
.auth-tabs button[aria-selected="true"] { color: var(--noir); }
.auth-ink { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--taupe); transition: transform .5s var(--ease); }
.auth-tabs[data-on="gestion"] .auth-ink { transform: translateX(100%); }
.auth-intro { font-size: 15px; opacity: .8; margin-bottom: 22px; }
.auth-form { display: grid; gap: 16px; }
.afld { display: grid; gap: 7px; }
.afld > span:first-child { font-size: 13px; font-weight: 500; }
.afld input { width: 100%; font: inherit; font-size: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(19,19,19,.2); background: var(--blanc); color: var(--noir); outline: none; transition: border-color .3s, box-shadow .3s; }
.afld input:focus { border-color: var(--taupe); box-shadow: 0 0 0 3px rgba(161,132,100,.2); }
.afld input[aria-invalid="true"] { border-color: #B5583A; }
.apw { position: relative; display: block; }
.apw input { padding-right: 52px; }
.apw-t { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; border-radius: 10px; cursor: pointer; color: var(--anthracite); display: grid; place-items: center; }
.apw-t svg { width: 22px; height: 22px; }
.apw-t[aria-pressed="true"] { color: var(--taupe); }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.acheck { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.acheck input { width: 18px; height: 18px; accent-color: var(--taupe); }
.auth-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--taupe); }
.auth-err { color: #9A4428; font-size: 14px; }
.auth-submit { width: 100%; justify-content: center; margin-top: 6px; }
.auth-msg { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 14px; background: var(--noir); color: var(--blanc); font-size: 14px; line-height: 1.6; }
.auth-msg .ico { width: 26px; height: 26px; color: var(--taupe); flex: none; margin-top: 2px; }
.auth-msg a { color: var(--taupe); }
.auth-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(19,19,19,.15); font-size: 14px; }
.auth-foot[hidden], .auth-intro[hidden] { display: none; }
.auth-steps { list-style: none; margin: 0 0 22px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.auth-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid rgba(19,19,19,.15); opacity: .55; }
.auth-steps li span { width: 22px; height: 22px; border-radius: 50%; background: rgba(19,19,19,.1); display: grid; place-items: center; font-size: 11px; }
.auth-steps li.on { opacity: 1; border-color: var(--taupe); }
.auth-steps li.on span { background: var(--taupe); }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-visual { min-height: 340px; padding-top: 110px; }
  .auth-visual-in { padding: 28px 20px; }
  .auth-logo { display: none; }
  .auth-panel { padding: 50px 20px 60px; }
}

/* ===================== Catalogue : feuilletoir ===================== */
.fb-sec { background: radial-gradient(70% 60% at 50% 55%, #2a2622 0%, var(--noir) 70%); color: var(--blanc); padding-block: clamp(70px, min(8vw, 10.24vh), 110px) clamp(40px, min(5vw, 6.4vh), 70px); overflow: hidden; }
.fb-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(30px, min(4vw, 5.12vh), 50px); }
.fb-head .title { font-size: clamp(2rem, min(4.2vw, 5.38vh), 3.6rem); }
.fb-head p { opacity: .8; }
.fb-note { display: block; margin-top: 8px; color: var(--taupe); font-size: 14px; }
.fb-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(10px, min(2vw, 2.56vh), 30px); padding: 20px clamp(10px, min(3vw, 3.84vh), 40px) 40px; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.fb-stage:focus-visible .fb-book { outline: 2px solid var(--taupe); outline-offset: 10px; }
.fb-book { position: relative; perspective: 2600px; transition: transform .9s cubic-bezier(.645,.045,.355,1); flex: none; }
.fb-book::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -26px; height: 30px; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 70%); pointer-events: none; }
.fb-leaf { position: absolute; top: 0; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.645,.045,.355,1); cursor: pointer; }
.fb-leaf.flipped { transform: rotateY(-180deg); }
.fb-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #F3EEE6; }
.fb-front { border-radius: 2px 6px 6px 2px; box-shadow: 0 8px 18px -12px rgba(0,0,0,.6); }
.fb-back { transform: rotateY(180deg); border-radius: 6px 2px 2px 6px; box-shadow: 0 8px 18px -12px rgba(0,0,0,.6); }
/* pli central et ombres de reliure */
.fb-front::before, .fb-back::before { content: ""; position: absolute; top: 0; bottom: 0; width: 14%; z-index: 3; pointer-events: none; }
.fb-front::before { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.06) 40%, transparent); }
.fb-back::before { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.28), rgba(0,0,0,.06) 40%, transparent); }
.fb-book.single .fb-front::before { width: 6%; opacity: .6; }
/* lumière qui glisse pendant que la page tourne */
.fb-face::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; }
.fb-front::after { background: linear-gradient(90deg, transparent 20%, rgba(0,0,0,.35) 100%); }
.fb-back::after { background: linear-gradient(270deg, transparent 20%, rgba(255,255,255,.25) 60%, rgba(0,0,0,.2) 100%); }
.fb-leaf.moving .fb-face::after { animation: fbShade .9s cubic-bezier(.645,.045,.355,1); }
@keyframes fbShade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.fb-book.single .fb-leaf.flipped:not(.moving) { visibility: hidden; }
.fb-nav { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--ligne-claire); background: rgba(19,19,19,.6); color: var(--blanc); cursor: pointer; display: grid; place-items: center; transition: background .3s, color .3s, border-color .3s, opacity .3s; z-index: 2; }
.fb-nav .arrow { width: 22px; height: 22px; }
.fb-prev .arrow { transform: scaleX(-1); }
.fb-nav:hover:not(:disabled) { background: var(--taupe); border-color: var(--taupe); color: var(--noir); }
.fb-nav:disabled { opacity: .25; cursor: default; }
.fb-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--taupe); letter-spacing: .2em; text-transform: uppercase; font-size: 12px; }
.fb-bar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between; }
.fb-count { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; min-width: 190px; }
.fb-range { flex: 1 1 200px; max-width: 420px; -webkit-appearance: none; appearance: none; height: 2px; background: var(--ligne-claire); outline-offset: 8px; }
.fb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--taupe); cursor: grab; }
.fb-range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--taupe); cursor: grab; }
.fb-tools { display: flex; gap: 10px; flex-wrap: wrap; }
.fb-tool { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--ligne-claire); background: none; color: var(--blanc); cursor: pointer; transition: border-color .3s, background .3s; }
.fb-tool .ico { width: 16px; height: 16px; color: var(--taupe); }
.fb-tool:hover { border-color: var(--taupe); }
.fb-tool[hidden] { display: none; }
.fb-sec:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }
.fb-sec:fullscreen .fb-head { display: none; }

/* Pages d'aperçu (tailles relatives à la largeur de page --pw) */
.pg { position: absolute; inset: 0; font-size: calc(var(--pw, 400px) * .034); padding: 9% 9% 8%; display: flex; flex-direction: column; gap: .7em; color: var(--noir); line-height: 1.45; }
.pg img { display: block; max-width: 100%; }
.pg-img { padding: 0; }
.pg-img img { width: 100%; height: 100%; object-fit: cover; }
.pg-paper { background: #F3EEE6; }
.pg-taupe { background: var(--taupe); }
.pg-noir { background: var(--noir); color: var(--blanc); }
.pg-cover { background: var(--noir); color: var(--blanc); justify-content: center; align-items: center; text-align: center; background-image: radial-gradient(70% 50% at 50% 40%, rgba(161,132,100,.28), transparent 70%); }
.pg-cover::before { content: ""; position: absolute; inset: 5%; border: 1px solid rgba(161,132,100,.55); pointer-events: none; }
.pc-logo { width: 46%; margin-bottom: 1.4em; }
.pc-k { font-size: .7em; letter-spacing: .5em; text-transform: uppercase; color: var(--taupe); }
.pc-y { font-size: 3.6em; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.pc-s { font-size: .62em; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-top: 1em; }
.pc-c { position: absolute; bottom: 9%; left: 0; right: 0; font-size: .55em; letter-spacing: .3em; text-transform: uppercase; color: var(--taupe); }
.pc-c-logo { width: 20%; margin-bottom: 1em; }
.pk { font-size: .62em; letter-spacing: .32em; text-transform: uppercase; font-weight: 600; color: var(--taupe); }
.pg-taupe .pk { color: var(--noir); }
.pk.light { color: var(--blanc); font-size: .8em; }
.pn { font-size: 2.6em; font-weight: 600; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--taupe); }
.pt { font-size: 1.35em; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.pp { font-size: .78em; opacity: .85; }
.pq { font-size: 1.15em; font-weight: 300; line-height: 1.45; margin-top: auto; }
.psign { display: flex; align-items: center; gap: .7em; font-size: .7em; font-weight: 600; margin-top: 1em; }
.psign img { width: 2.6em; height: 2.6em; border-radius: 50%; object-fit: cover; }
.psign small { font-weight: 300; }
.pimg { border-radius: .5em; overflow: hidden; aspect-ratio: 3/2; flex: none; }
.pimg.tall { aspect-ratio: 4/4.2; }
.pimg img { width: 100%; height: 100%; object-fit: cover; }
.pprice { margin-top: auto; font-size: .8em; padding-top: .7em; border-top: 1px solid rgba(19,19,19,.2); }
.pprice b { font-size: 1.3em; color: var(--taupe); }
.ptoc { list-style: none; margin: 1em 0 0; padding: 0; }
.ptoc li { display: flex; gap: .8em; align-items: baseline; padding: .55em 0; border-bottom: 1px solid rgba(19,19,19,.18); font-size: 1em; }
.ptoc span { font-size: .6em; color: var(--taupe); font-weight: 600; }
.plist { list-style: none; margin: 0; padding: 0; font-size: .8em; }
.plist li { padding: .4em 0 .4em 1.2em; position: relative; border-bottom: 1px solid rgba(19,19,19,.14); }
.plist li::before { content: "◆"; position: absolute; left: 0; top: .55em; font-size: .6em; color: var(--taupe); }
.plist.two { columns: 2; column-gap: 1.2em; }
.plist.two li { break-inside: avoid; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; flex: 1; }
.pgrid .pimg { aspect-ratio: auto; height: 100%; }
.pcap { font-size: .6em; opacity: .65; text-align: center; }
.pcap.dark { color: var(--noir); opacity: .8; margin-top: auto; }
.ppacks { display: grid; gap: .6em; margin-top: .6em; }
.ppacks div { background: var(--noir); color: var(--blanc); border-radius: .5em; padding: .9em 1em; display: grid; gap: .15em; }
.ppacks b { font-size: .9em; }
.ppacks span { font-size: .62em; opacity: .7; }
.ppacks em { font-style: normal; color: var(--taupe); font-weight: 600; font-size: 1.1em; }
.pbig { font-size: 3em; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--taupe); }
.pbig small { display: block; font-size: .22em; letter-spacing: .1em; text-transform: uppercase; color: var(--noir); font-weight: 500; margin-top: .3em; }
.pcontact { font-size: 1em; line-height: 1.7; margin-top: .6em; }
.pg-back .pc-c { color: var(--taupe); }

.cat-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cat-feats li { border: 1px solid var(--ligne); border-radius: var(--r, 20px); padding: 28px 24px; }
.cat-feats .ico { width: 34px; height: 34px; color: var(--taupe); }
.cat-feats h3 { font-size: 1.2rem; margin: 16px 0 6px; }
.cat-feats p { font-size: 15px; opacity: .78; }
.cc-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px, min(5vw, 6.4vh), 80px); align-items: center; }
.cat-cta h2 { font-size: clamp(2.4rem, min(6vw, 7.68vh), 5.4rem); font-weight: 600; line-height: .94; letter-spacing: -.045em; text-transform: uppercase; }
.cat-cta h2 .ol { display: block; color: transparent; -webkit-text-stroke: 2px var(--noir); }
.cat-cta p { font-size: 1.1rem; }
.cc-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
@media (max-width: 900px) { .fb-head, .cc-grid { grid-template-columns: 1fr; } .cat-feats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .fb-nav { position: absolute; bottom: 10px; width: 46px; height: 46px; } .fb-prev { left: calc(50% - 60px); } .fb-next { right: calc(50% - 60px); } .fb-stage { padding-bottom: 80px; } .fb-bar { justify-content: center; } .fb-count { text-align: center; } }
@media (max-width: 600px) { .cat-feats { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fb-leaf, .fb-book { transition-duration: .01s; } .fb-leaf.moving .fb-face::after { animation: none; } }
.psteps { list-style: none; margin: .4em 0 0; padding: 0; display: grid; gap: .8em; }
.psteps li { display: grid; grid-template-columns: 2.2em 1fr; gap: .6em; align-items: start; font-size: .8em; padding-bottom: .8em; border-bottom: 1px solid rgba(19,19,19,.2); }
.psteps b { font-size: 1.5em; line-height: 1; color: var(--blanc); }
.pg-noir .plist li { border-color: rgba(248,248,248,.15); }
.pg-noir .pprice { border-color: rgba(248,248,248,.2); }
.pg-noir .pp { opacity: .8; }
.pico { aspect-ratio: 3/2; border-radius: .5em; display: grid; place-items: center; background: rgba(161,132,100,.14); flex: none; }
.pg-noir .pico { background: rgba(161,132,100,.12); }
.pico svg { width: 34%; height: 50%; fill: none; stroke: var(--taupe); stroke-width: 1.2; }
.pfoot { margin-top: auto; font-weight: 500; }

/* ===================== Titres plus gras ===================== */
h1, h2, h3, h4 { font-weight: 400; }
.display, .title, .shero h1, .xl-t, .cfinal h2, .e404 h1, .auth h1, .auth-quote, .xcard:nth-child(1) h3, .menu-main a { font-weight: 500; }
.title b, .display b { font-weight: 600; }
.svc h3, .wcard h3, .fcard h3, .why-card h3, .who h3, .pr h3, .bcard h3, .mo-t h3, .after h3, .join h3, .stl h3, .pstep h3, .cat-feats h3, .isnot h3, .vpanel h3, .uni-n { font-weight: 500; }

/* ===================== Écrans d'ordinateur peu hauts (MacBook, portables) ===================== */
@media (min-width: 901px) and (max-height: 860px) {
  .header-inner { height: 84px; }
  .logo img { height: 62px; }
  .hero-content { padding-top: calc(84px + env(safe-area-inset-top, 0px) + 8px); }
  .rz-bar { top: 84px; }
}
.member { max-height: min(820px, 88vh); }
.mapbox { max-width: min(620px, 72vh); }
.vpanels { min-height: min(420px, 52vh); }
.stl li { padding-bottom: clamp(24px, 4vh, 44px); }

/* ===================== Ordinateurs portables (MacBook Air, 13-15") : tout plus compact ===================== */
@media (min-width: 1024px) and (max-height: 980px) {
  body { font-size: 16px; }
  .sec { padding-block: clamp(64px, 10vh, 112px); }
  .s2 { padding-block: clamp(56px, 9vh, 96px); }
  .head-row, .s2-head, .center-head { margin-bottom: clamp(28px, 4.5vh, 48px); }
  .display { font-size: clamp(2.4rem, 8vh, 4.6rem); }
  .title { font-size: clamp(2rem, 6.6vh, 3.8rem); margin-top: 14px; }
  .s2-head .title, .center-head .title, .rz-head .title, .fb-head .title, .ci-grid .title, .anc-grid .title, .vs-grid .title,
  .meet-grid .title, .meet-head .title, .mo-side .title, .ql-side .title, .bf-side .title, .story .title { font-size: clamp(1.8rem, 5.2vh, 3rem); }
  .shero { min-height: clamp(300px, 44vh, 420px); padding-top: 104px; padding-bottom: 48px; }
  .marquees { height: clamp(180px, 24vh, 240px); }
  .counters { margin-top: clamp(40px, 6vh, 64px); }
  .counter strong { font-size: clamp(2.6rem, 7vh, 4rem); }
  .slide { flex-basis: clamp(240px, 24vw, 380px); }
  .why-card { padding: 30px; gap: 12px; }
  .xcard { min-height: 230px; padding: 30px; }
  .xcard:nth-child(1) { min-height: 380px; }
  .xcard:nth-child(1) .bigicon { width: 260px; height: 260px; }
  .bento .xcard:nth-child(4):last-child { min-height: 200px; }
  .case .art { aspect-ratio: 4 / 2.9; }
  .logos { margin-top: 60px; padding-block: 24px; }
  .who { min-height: 300px; padding: 28px; }
  .pcard { padding: 30px; gap: 14px; }
  .member { max-height: 72vh; aspect-ratio: auto; height: 72vh; }
  .mapbox { max-width: min(560px, 66vh); }
  .rcard, .scard, .cstep { padding: 26px; }
  .final h2, .hello h2, .ask h2, .nx-in h2, .cat-cta h2 { font-size: clamp(2.6rem, 9.5vh, 6rem); }
  .final-logo { width: clamp(180px, 22vh, 260px); }
  .final-btns, .nx-btns { margin-top: 30px; }
  .cfinal h2 { font-size: clamp(2.4rem, 7vh, 4.4rem); }
  .cq-phone { font-size: clamp(2.6rem, 11vh, 6.4rem); }
  .mast-title { font-size: clamp(2.8rem, 12vh, 7rem); }
  .une-t { font-size: clamp(2rem, 5.6vh, 3.2rem); }
  .ahead h1 { font-size: clamp(2.2rem, 6.6vh, 3.8rem); }
  .ahead { padding-top: 130px; padding-bottom: 48px; }
  .xl-row { padding-block: clamp(20px, 3.4vh, 34px); }
  .xl-t { font-size: clamp(1.7rem, 5.2vh, 2.8rem); }
  .vpanels { min-height: 340px; }
  .story-pic { max-width: 380px; }
  .story-ph { aspect-ratio: auto; height: 62vh; }
  .e4-num { font-size: clamp(6rem, 24vh, 13rem); }
  .e404 { padding-top: 110px; }
  .auth-panel { padding-top: 110px; }
  .pstep h3, .after h3, .mo-t h3 { font-size: 1.15rem; }
  .mosaic { grid-auto-rows: clamp(150px, 22vh, 220px); }
}
@media (min-width: 1024px) and (max-height: 980px) {
  .case .art { aspect-ratio: 16 / 10; }
  .letter { max-width: 780px; }
  .meet-stack { gap: 36px; }
}
/* Hero d'accueil : contenu centré verticalement sous l'en-tête */
.hero { align-items: center; }

/* Défilement au trackpad : pas de retour à la page précédente en balayant vers la gauche */
.carousel { overscroll-behavior-x: contain; }
@media (hover: hover) and (pointer: fine) { .carousel { scroll-snap-type: none; } }

/* ===================== En-tête : devient blanc dès le premier défilement ===================== */
.header { transition: color .5s var(--ease), border-color .5s var(--ease), box-shadow .6s var(--ease); }
.header.solid { background: transparent; backdrop-filter: none; box-shadow: 0 18px 40px -28px rgba(19,19,19,.35); }
.header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(248,248,248,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(-101%); transition: transform .65s cubic-bezier(.77,0,.18,1); }
.header.solid::before { transform: translateY(0); }
.header::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--taupe); transform: scaleX(0); transform-origin: left; transition: transform .9s .2s var(--ease); }
.header.solid::after { transform: scaleX(1); opacity: .9; }
.header-inner { transition: height .6s var(--ease); }
.header.solid .header-inner { height: 82px; }
.logo img { transition: opacity .6s var(--ease), height .6s var(--ease); }
.header.solid .logo img { height: 62px; }
.header .header-actions, .header .menu-btn { transition: transform .6s var(--ease); }
@media (max-width: 900px) { .header.solid .header-inner { height: 66px; } .header.solid .logo img { height: 50px; } }
@media (prefers-reduced-motion: reduce) { .header::before, .header::after, .header-inner, .logo img { transition: none; } }
.rz-bar { top: 82px !important; } @media (max-width: 900px) { .rz-bar { top: 66px !important; } }

/* ===================== En-tête : menu, logo et bouton changent avec effet ===================== */
@keyframes hdA { 0% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 1; transform: none; } }
@keyframes hdB { 0% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 1; transform: none; } }
.header.ready .menu-btn, .header.ready .header-actions .tel, .header.ready .header-actions .btn { animation: hdB .7s var(--ease) both; }
.header.ready.solid .menu-btn, .header.ready.solid .header-actions .tel, .header.ready.solid .header-actions .btn { animation-name: hdA; }
.header .menu-btn { animation-delay: .12s !important; }
.header .header-actions .tel { animation-delay: .22s !important; }
.header .header-actions .btn { animation-delay: .3s !important; }
.menu-btn, .header-actions .tel { transition: color .5s var(--ease) .15s; }
/* Burger : les traits s'étirent pendant le changement */
.header.solid .burger::after { animation: hdBurger .9s var(--ease) .15s; }
@keyframes hdBurger { 50% { width: 26px; } }
/* Logo : la version blanche s'envole vers le haut, la noire arrive par le bas */
.logo .logo-light, .logo .logo-dark { transition: opacity .55s var(--ease), transform .7s cubic-bezier(.77,0,.18,1), height .6s var(--ease), filter .55s; }
.header.solid .logo-light { transform: translateY(-40%) scale(.92); filter: blur(4px); }
.logo .logo-dark { transform: translateY(40%) scale(.92); filter: blur(4px); }
.header.solid .logo-dark { transform: none; filter: none; transition-delay: .12s; }
/* Bouton « Devis gratuit » : se remplit de noir depuis le bas */
.header .header-actions .btn { box-shadow: inset 0 0 0 0 var(--noir); transition: box-shadow .6s cubic-bezier(.77,0,.18,1) .2s, color .4s .3s, border-color .4s .2s, background .4s; }
.header.solid .header-actions .btn { box-shadow: inset 0 -60px 0 0 var(--noir); color: var(--blanc); border-color: var(--noir); }
.header.solid .header-actions .btn:hover { box-shadow: inset 0 -60px 0 0 var(--taupe); color: var(--noir); border-color: var(--taupe); }
@media (prefers-reduced-motion: reduce) { .header .menu-btn, .header .header-actions .tel, .header .header-actions .btn { animation: none !important; } .logo .logo-light, .logo .logo-dark { transition: opacity .3s; transform: none !important; filter: none !important; } }

/* En-tête : bouton carré téléphone */
.header-actions { gap: 12px; }
.header-actions .tel { width: 46px; height: 46px; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: var(--r-btn, 14px); padding: 0; transition: color .5s var(--ease) .15s, background .4s, border-color .4s .2s; }
.header-actions .tel .ico { width: 20px; height: 20px; stroke-width: 1.8; }
.header-actions .tel:hover { background: var(--taupe); border-color: var(--taupe); color: var(--noir); }
.header.solid .header-actions .tel { border-color: var(--noir); }
.header.solid .header-actions .tel:hover { border-color: var(--taupe); }
@media (max-width: 900px) { .header-actions .tel { display: inline-grid; width: 40px; height: 40px; } .header-actions .tel .ico { width: 18px; height: 18px; } }
@media (max-width: 380px) { .header .btn { padding: 10px 14px; letter-spacing: .1em; } }
@media (max-width: 480px) {
  .header-actions { gap: 6px; }
  .header .btn { padding: 10px 12px; font-size: 10.5px; letter-spacing: .08em; }
  .header-actions .tel { width: 38px; height: 38px; }
  .logo img, .header.solid .logo img { height: 44px; }
  .menu-btn .lbl { display: none; }
}
@media (max-width: 480px) { .header-inner { grid-template-columns: 40px 1fr auto; gap: 8px; } .logo { justify-self: center; } }

/* ===================== Accueil : section univers (mockup sur fond blanc) ===================== */
.univers { overflow: hidden; }
.univ-grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(30px, 4vw, 70px); align-items: center; }
.univ-txt .sub { margin-top: 22px; }
.univ-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px 0 34px; }
.univ-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: 14px; font-size: 15px; }
.univ-list .ico { width: 22px; height: 22px; color: var(--taupe); }
.univ-fig { margin: 0; position: relative; }
.univ-fig img { position: relative; z-index: 1; height: auto; width: 112%; max-width: none; margin-left: -4%; filter: drop-shadow(0 40px 40px rgba(19,19,19,.18)); animation: univFloat 7s ease-in-out infinite; }
.univ-glow { position: absolute; z-index: 0; left: 10%; right: 0; top: 8%; bottom: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(161,132,100,.28), transparent 75%); }
@keyframes univFloat { 50% { transform: translateY(-12px); } }
@media (max-width: 900px) { .univ-grid { grid-template-columns: 1fr; } .univ-fig { order: -1; } .univ-fig img { width: 100%; margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .univ-fig img { animation: none; } }

/* ===================== Icônes maison (dessinées par Comlaire) ===================== */
svg:has(> use[href="#s-palette"]), svg:has(> use[href="#s-monitor"]), svg:has(> use[href="#s-print"]), svg:has(> use[href="#s-seo"]), svg:has(> use[href="#s-mega"]), svg:has(> use[href="#s-ask"]),
svg:has(> use[href="#u-event"]), svg:has(> use[href="#u-like"]), svg:has(> use[href="#u-nfc"]) {
  background-color: currentColor; -webkit-mask: var(--uico) center / contain no-repeat; mask: var(--uico) center / contain no-repeat; stroke: none !important; fill: none !important;
}
svg:has(> use[href="#s-palette"]) > use, svg:has(> use[href="#s-monitor"]) > use, svg:has(> use[href="#s-print"]) > use, svg:has(> use[href="#s-seo"]) > use, svg:has(> use[href="#s-mega"]) > use, svg:has(> use[href="#s-ask"]) > use { display: none; }
svg:has(> use[href="#s-palette"]) { --uico: url(assets/icons/plume.png); }
svg:has(> use[href="#s-monitor"]) { --uico: url(assets/icons/web.png); }
svg:has(> use[href="#s-print"]) { --uico: url(assets/icons/imprimes.png); }
svg:has(> use[href="#s-seo"]), svg:has(> use[href="#s-mega"]) { --uico: url(assets/icons/megaphone.png); }
svg:has(> use[href="#s-ask"]) { --uico: url(assets/icons/idee.png); }
svg:has(> use[href="#u-event"]) { --uico: url(assets/icons/evenement.png); }
svg:has(> use[href="#u-like"]) { --uico: url(assets/icons/like.png); }
svg:has(> use[href="#u-nfc"]) { --uico: url(assets/icons/nfc.png); }
.bs-like { width: 56px; height: 56px; color: var(--noir); display: block; margin-bottom: 14px; }
.meet-ico { width: 64px; height: 64px; color: var(--taupe); display: block; margin: 0 auto 18px; }
@media (min-width: 1101px) { .cat-feats { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 901px) and (max-width: 1100px) { .cat-feats { grid-template-columns: repeat(3, 1fr); } }

/* Contact : carte pièces jointes sous le formulaire */
.bf-attach { grid-column: 2; display: flex; gap: 18px; align-items: flex-start; background: var(--anthracite); border: 1px solid rgba(161,132,100,.45); border-radius: var(--r, 20px); padding: 22px 28px; }
.bf-grid { row-gap: 16px; }
.bf-attach .ico { width: 28px; height: 28px; color: var(--taupe); flex: none; margin-top: 2px; }
.bf-attach-t { font-weight: 500; margin-bottom: 4px; }
.bf-attach p { opacity: .9; font-size: 15px; }
.bf-attach p:first-child { opacity: 1; }
.bf-attach a { color: var(--taupe); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.bf-attach a:hover { color: var(--blanc); }
@media (max-width: 900px) { .bf-attach { grid-column: auto; margin-top: 0; } }

/* Contact : icônes de la section « Nous joindre » */
.cq-phone { display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(14px, 2vw, 28px); }
.cq-phone span { flex-basis: 100%; }
.cq-pico { display: inline-grid; place-items: center; width: clamp(56px, 7vw, 96px); aspect-ratio: 1; border-radius: var(--r, 20px); background: var(--taupe); color: var(--noir); font-style: normal; flex: none; transition: transform .5s var(--ease), background .4s; }
.cq-pico .ico { width: 46%; height: 46%; stroke-width: 1.6; }
.cq-phone:hover .cq-pico { transform: rotate(-8deg) scale(1.05); background: var(--noir); color: var(--taupe); }
.cq-alt li { grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; }
.cq-alt li > span, .cq-alt li > a { grid-column: 2; }
.cq-ico { grid-row: 1 / 3; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--noir); color: var(--taupe); stroke-width: 1.6; }

/* Contact : « Nous rendre visite » avec le radar */
.visit { min-height: 0; padding-block: clamp(60px, 9vh, 110px); background: var(--anthracite); }
.vi-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.vi-grid .vi-card { margin: 0; max-width: 520px; }
.vi-map .mapbox { margin-inline: auto; }
@media (max-width: 900px) { .vi-grid { grid-template-columns: 1fr; } .vi-map { order: -1; } .vi-grid .vi-card { max-width: none; } }

/* ===================== Icônes contact de la charte (téléphone, e-mail, adresse) ===================== */
svg:has(> use[href="#s-phone"]), svg:has(> use[href="#s-mail"]), svg:has(> use[href="#s-pin"]) {
  background-color: currentColor; -webkit-mask: var(--uico) center / 70% no-repeat; mask: var(--uico) center / 70% no-repeat;
}
svg:has(> use[href="#s-phone"]) > use, svg:has(> use[href="#s-mail"]) > use, svg:has(> use[href="#s-pin"]) > use { visibility: hidden; }
svg:has(> use[href="#s-phone"]) { --uico: url(assets/icons/c-phone.png); }
svg:has(> use[href="#s-mail"]) { --uico: url(assets/icons/c-mail.png); }
svg:has(> use[href="#s-pin"]) { --uico: url(assets/icons/c-pin.png); }
/* En-tête transparent : on garde l'icône au trait, plus légère sur la photo */
.header:not(.solid) .tel svg { background-color: transparent; -webkit-mask: none; mask: none; }
.header:not(.solid) .tel svg > use { visibility: visible; }
.header .tel .ico { width: 18px; height: 18px; }
.cq-ico { display: grid; place-items: center; }
.cq-ico .ico { width: 22px; height: 22px; color: var(--taupe); }
.cq-alt li > span.cq-ico { grid-column: 1; grid-row: 1 / 3; opacity: 1; padding: 0; font-size: 0; letter-spacing: 0; }
.cq-ico .ico { width: 28px; height: 28px; }

/* ===================== Décor : logo au trait en fond, coupé en bas ===================== */
.footer, .final, .hello, .ask, .cat-cta { position: relative; overflow: hidden; isolation: isolate; }
.footer::before, .final::after, .hello::after, .ask::after, .cat-cta::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 1254 / 1135; background: center / contain no-repeat;
}
.footer::before { background-image: url(assets/outline-logo-blanc.png); width: min(980px, 78vw); right: -6%; bottom: -38%; opacity: .06; }
.final .ghost { display: none; }
.final::after, .hello::after, .ask::after, .cat-cta::after { background-image: url(assets/outline-logo-noir.png); opacity: .1; width: min(1100px, 92vw); left: 50%; bottom: -46%; transform: translateX(-50%); }
.ask::after, .cat-cta::after { left: auto; right: -8%; transform: none; width: min(820px, 70vw); bottom: -40%; }
@media (max-width: 700px) { .footer::before { width: 120vw; right: -30%; bottom: -12%; } .final::after, .hello::after { width: 140vw; bottom: -18%; } .ask::after, .cat-cta::after { width: 120vw; bottom: -14%; } }

/* Boutons de filtre : couleur de texte explicite (certains navigateurs mettent du blanc par défaut) */
.rz-f button { color: var(--noir); -webkit-text-fill-color: currentColor; }
.rz-f button:hover { border-color: var(--noir); }
.rz-f button[aria-pressed="true"] { color: var(--blanc); }
.rz-f button[aria-pressed="true"] sup { color: var(--taupe); }
.rubs button:not([aria-pressed="true"]) { color: var(--noir); }
.a-share button { color: var(--noir); }

/* Réalisations : images toujours visibles en entier (vignettes + agrandissement) */
.mz-btn { isolation: isolate; }
.mz-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(22px) brightness(.55) saturate(1.1); transform: scale(1.1); z-index: -1; transition: transform 1.2s var(--ease); }
.mz-btn img { position: relative; object-fit: contain; padding: 10px; }
.mz-btn:hover img, .mz-btn:focus-visible img { transform: scale(1.02); }
.mz-btn:hover .mz-bg { transform: scale(1.18); }
.mz-btn::after { background: linear-gradient(to top, rgba(19,19,19,.85), transparent 38%); }
@media (hover: hover) and (pointer: fine) {
  .mz-btn::after, .mz-cap { opacity: 0; transition: opacity .4s; }
  .mz-btn:hover::after, .mz-btn:focus-visible::after, .mz-btn:hover .mz-cap, .mz-btn:focus-visible .mz-cap { opacity: 1; }
}
.lbox figure { align-items: stretch; }
.lbox img { object-fit: contain; background: #0b0b0b; height: auto; max-height: 88vh; align-self: center; }
@media (max-width: 900px) { .lbox img { max-height: 60vh; } .lbox figcaption { padding: 20px 22px 26px; } }
@media (max-width: 900px) {
  .lb-nav { top: -50px; transform: none; width: 42px; height: 42px; }
  .lb-prev { left: 6px; } .lb-next { left: 56px; right: auto; }
}
@media (max-width: 900px) { .lbox figure { overflow-y: auto; max-height: 86vh; } .lbox img { max-height: 55vh; } }

/* ===== Boutons flottants : retour en haut + chat ===== */
.fab-wrap { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab { width: 54px; height: 54px; border-radius: 16px; border: 0; cursor: pointer; display: grid; place-items: center; box-shadow: 0 14px 30px -12px rgba(19,19,19,.55); transition: transform .35s var(--ease), background .3s, color .3s, opacity .35s; }
.fab svg { width: 24px; height: 24px; }
.fab-top { background: var(--blanc); color: var(--noir); border: 1px solid rgba(19,19,19,.12); width: 46px; height: 46px; border-radius: 14px; opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; }
.fab-top.on { opacity: 1; transform: none; pointer-events: auto; }
.fab-top:hover { background: var(--noir); color: var(--blanc); }
.fab-chat { position: relative; background: var(--taupe); color: var(--noir); }
.fab-chat:hover { background: var(--noir); color: var(--taupe); transform: translateY(-2px); }
.fab-chat .i-close { display: none; }
.chat-open .fab-chat { background: var(--noir); color: var(--blanc); }
.chat-open .fab-chat .i-chat, .chat-open .fab-dot { display: none; }
.chat-open .fab-chat .i-close { display: block; }
.fab-dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--noir); border: 2px solid var(--blanc); }
.chat-open .fab-top { display: none; }
.chatbox { position: absolute; right: 0; bottom: 66px; width: min(370px, calc(100vw - 40px)); max-height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--blanc); color: var(--noir); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(19,19,19,.5); border: 1px solid rgba(19,19,19,.08); animation: cbIn .35s var(--ease); }
.chatbox[hidden] { display: none; }
@keyframes cbIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.cb-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--noir); color: var(--blanc); }
.cb-h img { width: 34px; height: 34px; object-fit: contain; background: rgba(161,132,100,.12); border-radius: 10px; padding: 5px; }
.cb-h div { display: grid; flex: 1; line-height: 1.25; }
.cb-h b { font-weight: 600; font-size: 15px; }
.cb-h span { font-size: 11px; letter-spacing: .06em; color: var(--taupe); }
.cb-x { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(248,248,248,.2); background: none; color: var(--blanc); font-size: 20px; cursor: pointer; }
.cb-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #f1eee9; min-height: 160px; }
.cb-m { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.cb-m.bot { background: var(--blanc); align-self: flex-start; border-bottom-left-radius: 4px; }
.cb-m.me { background: var(--noir); color: var(--blanc); align-self: flex-end; border-bottom-right-radius: 4px; }
.cb-m a { color: #7d6448; text-decoration: underline; text-underline-offset: 2px; }
.cb-m b { font-weight: 600; }
.cb-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.cb-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--anthracite); opacity: .4; animation: cbDot 1s infinite; }
.cb-typing i:nth-child(2) { animation-delay: .15s; } .cb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cbDot { 50% { opacity: 1; transform: translateY(-2px); } }
.cb-chips { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; background: #f1eee9; border-top: 1px solid rgba(19,19,19,.06); scrollbar-width: none; }
.cb-chips button { flex: none; font: inherit; font-size: 12px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--taupe); background: var(--blanc); color: var(--noir); cursor: pointer; transition: background .25s, color .25s; }
.cb-chips button:hover { background: var(--taupe); }
.cb-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(19,19,19,.08); background: var(--blanc); }
.cb-form input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 11px 14px; border: 1px solid rgba(19,19,19,.15); border-radius: 12px; background: var(--blanc); color: var(--noir); }
.cb-form input:focus { outline: 2px solid var(--taupe); outline-offset: 0; border-color: transparent; }
.cb-form button { width: 44px; border-radius: 12px; border: 0; background: var(--noir); color: var(--taupe); cursor: pointer; display: grid; place-items: center; }
.cb-form button svg { width: 20px; height: 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) {
  .fab-wrap { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .fab { width: 50px; height: 50px; }
  .fab-top { width: 42px; height: 42px; }
  .chatbox { position: fixed; right: 10px; left: 10px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 110px); }
}
@media (prefers-reduced-motion: reduce) { .chatbox { animation: none; } }
.cb-h, .cb-chips, .cb-form { flex: none; }
.fab-wrap { pointer-events: none; } .fab-wrap > .fab-chat, .fab-wrap > .chatbox, .fab-wrap > .fab-top.on { pointer-events: auto; }

/* Coulures : vraie peinture, a la taille reelle de l'ecran (pas d'etirement) */
.drip { top: -2px; height: clamp(70px, min(9vw, 11.52vh), 150px); transform: none !important; transition: clip-path 1.9s cubic-bezier(.3,.7,.2,1); clip-path: inset(0 0 0 0); overflow: hidden; }
.drip svg { width: 100%; height: 100%; }
.js .drip.pending { transform: none; clip-path: inset(0 0 82% 0); }
@media (prefers-reduced-motion: reduce) { .js .drip.pending { clip-path: none; } }
/* Coulures v3 : effet liquide, chaque coulure descend depuis la bande */
.drip { clip-path: none !important; transition: none; }
.drip .d { transform: none; transition: transform 1.8s cubic-bezier(.45,0,.2,1) var(--dl, 0s); }
.js .drip.pending .d { transform: translateY(var(--up)); }
@media (prefers-reduced-motion: reduce) { .drip .d { transition: none; } .js .drip.pending .d { transform: none; } }
/* Coulures discrètes sur les pages intérieures */
.s2 > .drip-s { height: clamp(54px, min(5.5vw, 7vh), 92px); }
.s2:has(> .drip-s) { overflow: hidden; }

/* Réalisations : chaque carte a exactement la forme de son image (mur en colonnes) */
.mosaic { display: block; columns: 3 300px; column-gap: 14px; }
.mosaic > .mz { break-inside: avoid; margin: 0 0 14px; display: block; }
.mosaic > .mz[hidden] { display: none; }
.mz .mz-btn { height: auto; background: none; }
.mz .mz-btn img { display: block; width: 100%; height: auto; object-fit: initial; padding: 0; }
.mz-bg { display: none; }
@media (max-width: 560px) { .mosaic { columns: 2 150px; column-gap: 10px; } .mosaic > .mz { margin-bottom: 10px; } }
/* Annuaire du Club : membres réels */
.mb-ini { font-weight: 600; font-size: 22px; letter-spacing: .04em; color: var(--noir); }
.mb .mb-who { font-size: 15px; opacity: 1; font-weight: 500; margin-top: -2px; }
.mb-logo img[src*="c-taupe"] { object-fit: contain; padding: 14px; background: var(--noir); }
.mb-ini { font-size: clamp(15px, 1.4vw, 20px); }
/* Logos du Club Comlaire */
.mc-logo.mc-club { width: 52%; }
.mc-badge { position: absolute; right: 7%; bottom: 8%; width: 24%; height: auto; opacity: .85; }
.lt-logo.lt-club { width: min(150px, 78%); }
.cf-logo { display: block; width: clamp(110px, 12vw, 160px); height: auto; margin: 0 auto 26px; position: relative; }
.mc-logo.mc-club { width: 74%; display: block; margin: 2% auto 0; }
.mcard .mc-name { bottom: 15%; }
.mc-logo.mc-club { width: 66%; margin: -3% auto 0; } .mcard .mc-name { bottom: 14%; }
.mc-logo.mc-club { width: 64%; margin: -2% 0 0 -2%; }
.mc-logo.mc-club { margin: -2% 0 0 0; }
.mb-logo img[src*="members/"] { object-fit: cover; padding: 0; }
.mb-logo:has(img) { border: 0; }
/* Bandeau logos clients */
.logos .track span.cset { display: flex; align-items: center; gap: 0; padding: 0; font-size: inherit; text-transform: none; }
.logos .track span.client { display: inline-flex; align-items: center; padding: 0 clamp(28px, 3.4vw, 54px); gap: 0; }
.logos .client img { height: clamp(30px, 3vw, 42px); width: auto; opacity: .55; transition: opacity .3s; }
.logos .client:hover img { opacity: 1; }
.logos:hover .track { animation-play-state: paused; }
.logos .client.sm img { height: clamp(20px, 2vw, 28px); }
/* Expertises accueil : 8 cartes séparées */
.bento-8 .xcard:nth-child(4), .bento-8 .xcard:nth-child(5) { grid-column: span 3; }
.bento-8 .xcard:nth-child(6), .bento-8 .xcard:nth-child(7), .bento-8 .xcard:nth-child(8) { grid-column: span 2; }
.bento-8 .xcard:nth-child(n+2) { min-height: 300px; }
.bento-8 .xcard:nth-child(n+2) p { font-size: 14px; }
@media (max-width: 1100px) { .bento-8 .xcard:nth-child(n+2) { grid-column: span 1; min-height: 280px; } .bento-8 .xcard:nth-child(8) { grid-column: span 2; } }
@media (max-width: 600px) { .bento-8 .xcard:nth-child(n) { grid-column: span 1; min-height: 0; } }
/* Tarifs : deux petites cartes taux horaire */
.rates2.rmini { max-width: 900px; }
.rmini-c { display: flex; gap: 20px; align-items: flex-start; padding: clamp(24px, 2.4vw, 34px); }
.rmini-c .rm-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; background: var(--taupe); color: var(--noir); }
.rmini-c.club .rm-n { background: var(--noir); color: var(--taupe); }
.rmini-c h3 { margin-bottom: 14px; }
.rmini-c .big { font-size: clamp(2.4rem, min(4vw, 5.12vh), 3.4rem); }
.rmini-c .big small { display: inline; margin: 0 0 0 6px; font-size: 14px; }
.rmini-c .rm-s { margin-top: 12px; font-weight: 500; font-size: 15px; }
.rmini-c .rm-d { margin-top: 6px; font-size: 14px; opacity: .8; }
.rmini-c .rm-d a { text-decoration: underline; text-underline-offset: 3px; }
/* Section « Une seule signature » sur fond noir, logo géant en fond */
.univers.bg-noir { position: relative; isolation: isolate; }
.univers.bg-noir::before { content: ""; position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 1254 / 1135; background: url(assets/outline-logo-blanc.png) center / contain no-repeat; width: min(1100px, 90vw); left: -12%; bottom: -34%; opacity: .06; }
.univers.bg-noir .univ-list li { border-color: var(--ligne-claire); color: var(--blanc); }
.univers.bg-noir .univ-fig img { filter: drop-shadow(0 40px 50px rgba(0,0,0,.55)); }
.univers.bg-noir .univ-glow { background: radial-gradient(closest-side, rgba(161,132,100,.22), transparent 75%); }
@media (max-width: 700px) { .univers.bg-noir::before { width: 130vw; left: -30%; bottom: -10%; } }
/* Expertises : 8 métiers dans « Par où commencer » */
.nd-nodes { grid-template-columns: repeat(4, 1fr); }
.nd-node { font-size: 11px; }
.nd-node .ico { width: 26px; height: 26px; }
@media (max-width: 900px) { .nd-nodes { grid-template-columns: repeat(4, 1fr); max-width: none; } }
@media (max-width: 480px) { .nd-nodes { gap: 6px; } .nd-node { font-size: 9.5px; } .nd-node .ico { width: 20px; height: 20px; } }