:root {
  --bg: #e6e6e3;
  --bg-2: #dcdcd8;
  --ink: #111111;
  --muted: #6b6b68;
  --accent: #ffc800;
  --card-w: 210px;
  --card-h: 280px;
  --radius: 26px;
  --gutter: clamp(16px, 5vw, 72px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --wide: "Archivo", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--wide);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body:has(dialog[open]) { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: var(--ink); }
.defs { position: absolute; pointer-events: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.contact :focus-visible, .pillar-grow :focus-visible, .footer :focus-visible { outline-color: var(--accent); }
/* Surligneur jaune : le jaune est trop clair pour colorer du texte sur fond clair */
.tile-info strong, .case-next strong, .faq summary span, .statement em, .c-results strong, .certs strong a {
  text-decoration: underline .38em transparent; text-underline-offset: -.24em; text-decoration-skip-ink: none;
  transition: text-decoration-color .25s;
}

.welcome, .hero-meta, .fan-hint, .filters button, .views button, .m-cat, h3,
.pill a, .bar-btn, .copy, .socials a {
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ================= INTRO ================= */
.loader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--ink); color: var(--bg);
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: var(--gutter);
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s cubic-bezier(.7, 0, .2, 1);
}
.loader.done { clip-path: inset(0 0 100% 0); }
.no-js .loader { display: none; }
.loader-bar {
  position: absolute; left: 42%; top: 0; height: 100%;
  width: clamp(80px, 11vw, 140px);
  background: var(--accent);
  transform-origin: bottom; transform: scaleY(var(--k, 0));
}
.loader-name { position: relative; font-size: 12px; font-weight: 600; font-stretch: 125%; text-transform: uppercase; }
.loader-count { position: relative; font-size: clamp(64px, 14vw, 180px); font-weight: 900; font-stretch: 125%; line-height: .8; font-variant-numeric: tabular-nums; }

/* ================= CURSEUR ================= */
.cursor, .cursor-dot {
  position: fixed; left: 0; top: 0; z-index: 12000;
  pointer-events: none; opacity: 0;
  transition: opacity .3s;
}
.has-cursor .cursor, .has-cursor .cursor-dot { opacity: 1; }
.has-cursor, .has-cursor * { cursor: none !important; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; mix-blend-mode: difference; }
.cursor {
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 1.5px solid #fff; border-radius: 50%;
  mix-blend-mode: difference;
  display: grid; place-items: center;
  transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .25s, border-color .25s;
}
.cursor span {
  font-size: 11px; font-weight: 800; font-stretch: 125%; text-transform: uppercase; color: #fff;
  opacity: 0; transition: opacity .2s; white-space: nowrap;
}
.cursor.link { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.cursor.big {
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  background: var(--accent); border-color: var(--accent); mix-blend-mode: normal;
}
.cursor.big span { opacity: 1; color: var(--ink); }

/* ================= NAV FLOTTANTE ================= */
.pill {
  position: fixed; top: 14px; left: 50%; z-index: 900;
  display: flex; align-items: center; gap: 2px; padding: 5px;
  background: rgba(230, 230, 227, .78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, .08); border-radius: 999px;
  box-shadow: 0 10px 30px -15px rgba(0, 0, 0, .35);
  transform: translate(-50%, -160%);
  transition: transform .55s var(--ease);
}
.pill.show { transform: translate(-50%, 0); }
.pill a { white-space: nowrap; font-size: 11px; font-weight: 700; padding: 9px 14px; border-radius: 999px; transition: background .2s, color .2s; }
.pill a:hover, .pill a.active { background: var(--ink); color: var(--bg); }
.pill .pill-logo { padding: 5px; display: grid; }
.pill .pill-logo svg { width: 26px; height: 26px; }

/* ================= HERO ================= */
.hero {
  position: relative;
  min-height: 100svh;
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px var(--gutter) 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.marks i {
  position: absolute; left: var(--x); top: var(--y);
  width: 11px; height: 11px; transform: translate(-50%, -50%);
  opacity: .45;
}
.marks i::before, .marks i::after { content: ""; position: absolute; background: var(--ink); }
.marks i::before { left: 5px; top: 0; width: 1px; height: 11px; }
.marks i::after  { top: 5px; left: 0; height: 1px; width: 11px; }

.hero-top { display: grid; grid-template-columns: 1fr auto; align-items: start; position: relative; z-index: 3; }
.logo { width: 34px; height: 34px; display: block; justify-self: start; transition: transform .6s var(--ease); }
.logo:hover { transform: rotate(180deg); }
.logo svg { width: 100%; height: 100%; }

.title-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin-top: clamp(24px, 4vw, 40px);
  height: clamp(200px, 26vw, 300px);
  --fs: clamp(46px, 9.6vw, 128px);
}
.title-box { position: relative; z-index: 1; }
/* "Welcome to my" : une étiquette collée de travers sur le coin du titre */
.welcome {
  position: absolute; z-index: 3;
  left: calc(var(--fs) * .07); top: calc(var(--fs) * -.56);
  padding: .6em 1.05em .55em; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-weight: 800; font-size: clamp(10px, 1.2vw, 15px); line-height: 1; white-space: nowrap;
  rotate: -7deg; transform-origin: 50% 100%;
  box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .55);
}
.js body:not(.ready) .welcome { opacity: 0; }
.ready .welcome { animation: welcome-drop 1.9s 1.15s both; }
/* elle tombe, tape, et rebondit quatre fois, de moins en moins haut, avant de se poser */
@keyframes welcome-drop {
  0%   { opacity: 0; transform: translateY(-150px) rotate(-10deg); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  6%   { opacity: 1; }
  24%  { transform: translateY(0) rotate(4deg) scale(1.07, .86); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
  39%  { transform: translateY(-44px) rotate(-3deg) scale(.98, 1.03); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  54%  { transform: translateY(0) rotate(2.5deg) scale(1.05, .91); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
  65%  { transform: translateY(-21px) rotate(-1.6deg); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  76%  { transform: translateY(0) rotate(1.2deg) scale(1.03, .95); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
  84%  { transform: translateY(-9px) rotate(-.6deg); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  91%  { transform: translateY(0) scale(1.015, .98); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
  96%  { transform: translateY(-3px); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  100% { opacity: 1; transform: none; }
}
.red-bar {
  position: absolute; z-index: 0;
  left: 42%; top: calc(clamp(24px, 4vw, 40px) * -1 - 20px);
  width: clamp(80px, 11vw, 140px);
  height: calc(100% + 60px);
  background: var(--accent);
  transform-origin: top;
  transition: translate .8s var(--ease);
}
.ready .hero .red-bar { animation: drop 1.1s cubic-bezier(.7, 0, .2, 1) both; }
.js body:not(.ready) .hero .red-bar { transform: scaleY(0); }
@keyframes drop { from { transform: scaleY(0); } }

.title {
  position: relative; z-index: 1;
  font-size: var(--fs);
  font-weight: 900; font-stretch: 125%;
  line-height: .8; letter-spacing: -.01em;
  text-align: center; user-select: none;
}
.title .main { display: block; position: relative; z-index: 2; }
.title .main span {
  display: inline-block;
  transition: transform 1s var(--ease), opacity .8s;
  transition-delay: calc(var(--d) * 45ms + .35s);
}
.js body:not(.ready) .title .main span { transform: translateY(70%) rotate(6deg); opacity: 0; }
.echo {
  position: absolute; left: 0; right: 0;
  display: flex; justify-content: center;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--ink);
  z-index: 1; pointer-events: none;
  filter: url(#liquid);
  transition: opacity 1.2s .9s;
}
.js body:not(.ready) .echo { opacity: 0; }
.echo span { display: inline-block; will-change: transform; }
.echo-top    { top: -.55em; }
.echo-bottom { top: .55em; }

.hero-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 500;
  margin-top: 12px; position: relative; z-index: 3;
}
.hero-meta { gap: 16px; }
.hero-meta a { display: inline-flex; align-items: center; gap: 8px; }   /* la flèche reste centrée à côté du nom, même sur deux lignes */
.hero-meta a::after { content: "↓"; flex: none; font-size: 1.35em; line-height: 1; }
.hero-meta .nm span { white-space: nowrap; }
#owner-role { text-align: right; }
#owner-role span { white-space: nowrap; }
#owner-role i { font-style: normal; }                 /* sur mobile, la 2e ligne du titre reste calée à droite */
.hero-meta a { text-decoration: underline 2px transparent; text-underline-offset: 4px; transition: text-decoration-color .25s; }
.hero-meta a:hover { text-decoration-color: var(--accent); }
.hero-top, .hero-meta { transition: opacity .8s .9s, transform .8s .9s var(--ease); }
.js body:not(.ready) .hero-top, .js body:not(.ready) .hero-meta { opacity: 0; transform: translateY(10px); }

/* ---------- éventail ---------- */
.fan {
  position: relative; flex: 1;
  min-height: 580px;
  margin: 28px calc(var(--gutter) * -1) 0;
  touch-action: pan-y;
  cursor: grab; outline: none;
}
.fan.dragging { cursor: grabbing; }
.dial, .cards { position: absolute; left: 50%; bottom: -40px; }

/* ---------- molette : le moyeu de l'éventail ----------
   Un gros bouton à tourner : bague en métal cranté, dessus en verre noir où s'affiche le projet.
   Les graduations (un grand trait par carte, dans l'axe de la carte) et la bague tournent avec
   les cartes ; le repère jaune reste en haut et pointe la carte choisie, celle dont le nom s'affiche.
   La lumière vient du haut et ne tourne pas. Seul le haut du bouton dépasse. */
.dial { --dial: 460px; --sink: 40px; width: var(--dial); height: var(--dial); transform: translate(-50%, 50%); }
.dial-in { position: absolute; inset: 0; transition: transform 1s var(--ease), opacity .6s; }
.js .fan:not(.dealt) .dial-in { transform: translateY(90px) scale(.92); opacity: 0; pointer-events: none; }
.dial-scale { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial-scale line { stroke: var(--ink); stroke-width: 1.2; opacity: .3; transition: opacity .3s, stroke-width .3s; }
.dial-scale .long { stroke-width: 2.4; stroke-linecap: round; opacity: .55; }
.dial-scale .on .long { stroke-width: 5; opacity: 1; }

.knob {
  position: absolute; inset: 12%; border-radius: 50%;
  /* bague : acier tourné, reflets fixes (clair en haut, sombre sur les flancs) + épaulement arrondi */
  background:
    radial-gradient(closest-side, transparent 79%, rgba(0, 0, 0, .28) 80.5%, rgba(255, 255, 255, .3) 86%, rgba(255, 255, 255, 0) 91%, rgba(0, 0, 0, .42) 100%),
    conic-gradient(from 0deg, #fbfbfa 0deg, #c9c9c6 14deg, #8a8a87 34deg, #5b5b59 62deg, #a3a3a0 88deg, #4c4c4a 128deg, #7f7f7c 180deg,
      #4c4c4a 232deg, #a3a3a0 272deg, #5b5b59 298deg, #8a8a87 326deg, #c9c9c6 346deg, #fbfbfa 360deg);
  box-shadow:
    inset 0 2px 1.5px rgba(255, 255, 255, .9), inset 0 -3px 4px rgba(0, 0, 0, .45),   /* arête */
    0 0 0 1px rgba(0, 0, 0, .6),
    0 0 0 9px rgba(0, 0, 0, .055), 0 -1px 0 10px rgba(255, 255, 255, .6),             /* logement creusé dans le panneau */
    0 0 22px 3px rgba(0, 0, 0, .38), 0 18px 50px rgba(0, 0, 0, .5);                   /* ombre portée */
}
.knob-ring, .knob-mark { position: absolute; inset: 0; border-radius: 50%; }
.knob-ring {                                            /* crans de la bague, pour les doigts */
  rotate: var(--a, 0deg); will-change: rotate;
  background: repeating-conic-gradient(from -.4deg, rgba(0, 0, 0, .62) 0 .8deg, rgba(255, 255, 255, .5) .8deg 1.5deg, transparent 1.5deg 4deg);
  -webkit-mask: radial-gradient(closest-side, transparent 82.5%, #000 83.5%, #000 97%, transparent 98.5%);
  mask: radial-gradient(closest-side, transparent 82.5%, #000 83.5%, #000 97%, transparent 98.5%);
}
.knob-face {                                            /* dessus en verre noir */
  position: absolute; inset: 9.5%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 28%, #242423, #0b0b0b 55%, #040404);
  box-shadow: 0 0 0 1.5px #050505, 0 0 0 3.5px rgba(255, 255, 255, .55), 0 3px 6px 3px rgba(0, 0, 0, .5),
    inset 0 0 26px rgba(0, 0, 0, .9), inset 0 1.5px 2px rgba(255, 255, 255, .22);
}
.knob-face::after {                                     /* reflet sur le verre */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(115% 80% at 22% -8%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 58%, transparent 59%);
}
.knob-mark::after {                                     /* repère fixe : une flèche lumineuse qui pointe la carte du haut */
  content: ""; position: absolute; left: 50%; top: 11.6%; width: 16px; height: 13px; margin-left: -8px;
  background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.knob-mark { filter: drop-shadow(0 0 7px rgba(255, 200, 0, .8)); }
.dial-open {
  position: absolute; left: 50%; bottom: calc(50% + var(--sink) + 14px); translate: -50% 0; z-index: 5;
  max-width: 44%; padding: 9px 4px; color: #f4f4f1;
  font-size: 12px; font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 14px rgba(255, 255, 255, .28); transition: color .2s;
}
.dial-open:hover { color: var(--accent); }
.dial-open:focus-visible { outline-color: var(--accent); }
.cards { width: 0; height: 0; }

.card {
  position: absolute; left: 0; top: 0;
  width: var(--card-w); height: var(--card-h);
  margin: calc(var(--card-h) / -2) 0 0 calc(var(--card-w) / -2);
  opacity: 0; will-change: transform;
  --ry: 0deg; --lift: 0; --sheen: 0;
}
.card:focus-visible { outline: none; }
.card:focus-visible .front { outline: 2px solid var(--ink); outline-offset: 3px; }
/* recto / verso : la carte se retourne pendant la distribution */
.card-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: perspective(1100px) rotateY(var(--ry)); }
.face {
  position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 calc(18px + var(--lift) * 34px) calc(40px + var(--lift) * 40px) -18px rgba(0, 0, 0, calc(.45 + var(--lift) * .1));
}
.face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--sheen);
  background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .32) 47%, transparent 66%);
}
.back {
  transform: rotateY(180deg); color: var(--bg);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px), #141414;
  display: grid; place-items: center;
}
.back::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(255, 255, 255, .16); border-radius: calc(var(--radius) - 9px); }
.back svg { width: 40%; }
.card .cover { width: 100%; height: 100%; transition: transform .5s; }
.card:hover .cover { transform: scale(1.05); }
.card-label {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 700; font-stretch: 125%; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.card.light .card-label { color: var(--ink); text-shadow: none; }
.fan-hint {
  position: absolute; right: var(--gutter); bottom: 22px;   /* à droite : au départ, il y a moins de cartes de ce côté */
  font-size: 10px; color: var(--muted); z-index: 6; pointer-events: none;
}

/* ================= VISUELS AUTO ================= */
.cover { position: relative; background: var(--ink); overflow: hidden; container-type: inline-size; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-orb { background: radial-gradient(circle at 50% 50%, #fff 0 3%, #7fd3ff 6%, #1b54ff 18%, #0a1450 32%, #050508 55%); }
.cover-orb::after {
  content: ""; position: absolute; inset: 18%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(120, 200, 255, .6), transparent 30%, rgba(80, 120, 255, .5), transparent 60%);
  filter: blur(6px);
  animation: spinc 9s linear infinite;
}
@keyframes spinc { to { transform: rotate(360deg); } }
/* maille : un tricot blanc en gros plan (image SVG calculée) et l'étiquette de la marque cousue dessus */
.cover-knit { background: #e9e9e5 url("images/hookedbyrk/maille.svg") center / cover; display: grid; place-items: center; }
.cover-knit::before {                                  /* modelé : lumière en haut à gauche, ombre en bas à droite */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(244, 244, 241, .88), rgba(244, 244, 241, 0) 24%),   /* voile clair en bas : le nom de la carte reste lisible */
    radial-gradient(110% 80% at 26% 14%, rgba(255, 255, 255, .55), transparent 48%), radial-gradient(120% 100% at 82% 100%, rgba(40, 40, 36, .3), transparent 60%);
}
.cover-knit::after {                                   /* un reflet traverse lentement la maille */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, .4) 50%, transparent 58%) 130% 0 / 320% 100% no-repeat;
  animation: knit-sheen 9s ease-in-out infinite;
}
@keyframes knit-sheen { 0%, 52% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.cover-knit .tag {                                     /* étiquette en coton tissé */
  position: relative; z-index: 1; display: block; width: min(70cqw, 330px); font-size: min(10cqw, 47px);
  padding: .62em .3em .5em; rotate: -4deg; text-align: center; color: var(--ink); border-radius: .16em;
  background:
    repeating-linear-gradient(0deg, rgba(60, 60, 55, .06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(60, 60, 55, .05) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #ffffff, #efefec);
  box-shadow: 0 .42em .7em -.2em rgba(20, 20, 18, .55), 0 .04em .1em rgba(20, 20, 18, .45), inset 0 1px 0 #fff;
}
.cover-knit .tag::before {                             /* la couture */
  content: ""; position: absolute; inset: .2em; border: max(1px, .05em) dashed rgba(17, 17, 17, .38); border-radius: .1em;
}
.cover-knit .tag b { display: block; font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; line-height: 1; white-space: nowrap; letter-spacing: -.005em; }
.cover-knit .tag b i { color: #8a8a85; }
.cover-knit .tag small { display: block; margin-top: .62em; font-size: .235em; font-weight: 700; font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
@container (max-width: 180px) { .cover-knit .tag small { display: none; } .cover-knit .tag { padding: .5em .3em .42em; } }   /* petite carte : le nom seul */
/* clic payé : une cible bleue qui pulse sous un curseur */
.cover-click { background: radial-gradient(circle at 47% 44%, #13308f 0, #0a1450 22%, #050508 58%); display: grid; place-items: center; }
.cover-click svg { position: absolute; inset: 7% 0; width: 100%; height: 86%; }   /* toujours entier, quel que soit le format du cadre */
.cover-click .ring { fill: none; stroke: #4d7dff; transform-box: fill-box; transform-origin: center; animation: click-wave 2.6s cubic-bezier(.2, .7, .3, 1) infinite; }
.cover-click .r2 { stroke-width: 2.6; }
.cover-click .r3 { stroke-width: 1.6; animation-delay: .28s; }
.cover-click .dot { fill: #2f62ff; transform-box: fill-box; transform-origin: center; animation: click-dot 2.6s ease-in-out infinite; }
.cover-click .cur { fill: #f4f4f1; stroke: #050508; stroke-width: 2.4; stroke-linejoin: round; transform-box: fill-box; transform-origin: 0 0; animation: click-press 2.6s ease-in-out infinite; }
@keyframes click-wave { 0% { transform: scale(.45); opacity: 0; } 18% { opacity: 1; } 70%, 100% { transform: scale(1); opacity: .55; } }
@keyframes click-dot { 0%, 100% { transform: scale(1); } 8% { transform: scale(.78); } 20% { transform: scale(1.12); } 34% { transform: scale(1); } }
@keyframes click-press { 0%, 100% { transform: none; } 8% { transform: scale(.9); } 22% { transform: none; } }
.cover-mark { background: var(--accent); display: grid; place-items: center; }
.cover-mark svg { width: 62%; color: var(--ink); }
.cover-type { background: linear-gradient(160deg, #f4f4f2, #cfcfcb); display: flex; align-items: flex-end; padding: 8%; }
.cover-type b { font-size: 40cqw; font-weight: 900; font-stretch: 62%; line-height: .8; letter-spacing: -.03em; color: var(--ink); }
.cover-grid {
  background:
    linear-gradient(transparent 95%, rgba(0, 0, 0, .12) 0) 0 0 / 22px 22px,
    linear-gradient(90deg, transparent 95%, rgba(0, 0, 0, .12) 0) 0 0 / 22px 22px,
    #f2f2ef;
  display: grid; place-items: center;
}
.cover-grid b { font-size: 38cqw; font-weight: 900; font-stretch: 125%; }
.cover-halo { background: #0b0b0b; display: grid; place-items: center; }
.cover-halo::before {
  content: ""; width: 72%; aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(#f2f2ef 0 6deg, transparent 6deg 12deg);
  mask: radial-gradient(circle, transparent 52%, #000 53% 70%, transparent 71%);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 53% 70%, transparent 71%);
  animation: spinc 30s linear infinite;
}
.cover-halo::after { content: ""; position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
.cover-phone { background: var(--accent); display: grid; place-items: center; }
.cover-phone b {
  position: relative; height: 70%; aspect-ratio: 9 / 17; display: grid; place-items: center;
  background: var(--ink); color: var(--accent); border-radius: 9cqw;
  font-size: 9cqw; font-weight: 900; font-stretch: 125%;
  box-shadow: 0 5cqw 9cqw -4cqw rgba(0, 0, 0, .45);
}
.cover-phone b::before { content: ""; position: absolute; top: 6%; left: 50%; translate: -50% 0; width: 28%; height: 2.6%; border-radius: 999px; background: #3a3a37; }
.cover-stripes { background: repeating-linear-gradient(-35deg, #111 0 14px, #f2f2ef 14px 28px); display: grid; place-items: center; }
.cover-stripes b { background: var(--bg); padding: 6px 12px; font-weight: 900; font-stretch: 125%; font-size: 10cqw; transform: rotate(-90deg); }

/* ================= SECTIONS ================= */
.section { max-width: 1280px; margin: 0 auto; padding: clamp(80px, 12vw, 140px) var(--gutter) 0; }
.section-head {
  display: grid; grid-template-columns: 80px 1fr auto; align-items: end; gap: 16px;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 24px; margin-bottom: 28px;
}
.index, .count { font-family: var(--mono); font-size: 12px; color: var(--muted); }
h2 {
  font-size: clamp(36px, 6.5vw, 84px); font-weight: 900; font-stretch: 125%;
  line-height: .9; text-transform: uppercase; letter-spacing: -.01em;
}

/* apparition au scroll */
.js [data-reveal] { opacity: 0; translate: 0 40px; transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
.js [data-reveal].in { opacity: 1; translate: 0 0; }

/* ---------- barre d'outils projets ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 36px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button {
  font-size: 11px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--ink); transition: background .2s, color .2s;
}
.filters button:hover { background: var(--bg-2); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.views { display: flex; gap: 2px; padding: 3px; border: 1.5px solid var(--ink); border-radius: 999px; }
.views button { font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.views button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
#work[data-view="list"] .grid, #work[data-view="grid"] .list { display: none; }

/* ---------- vue liste ---------- */
.list { border-top: 1.5px solid var(--ink); }
.list li { border-bottom: 1.5px solid var(--ink); }
.list li.hide, .tile.hide { display: none; }
.row {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 64px 1fr 180px 56px 32px; align-items: center; gap: 16px;
  padding: 24px 10px;
}
.row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent); transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--ease);
}
.row:hover::before, .row:focus-visible::before { transform: scaleY(1); transform-origin: top; }
.row-n, .row-c, .row-y { font-family: var(--mono); font-size: 12px; }
.row-t {
  font-size: clamp(28px, 5vw, 64px); font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; line-height: .9;
}
.row-main { display: grid; gap: 10px; transition: transform .5s var(--ease); }
.row:hover .row-main { transform: translateX(18px); }
.row-s { font-size: 15px; line-height: 1.35; max-width: 52ch; color: var(--muted); transition: color .3s; }
.row:hover .row-s { color: var(--ink); }
.row-a { font-size: 22px; transition: transform .4s var(--ease); justify-self: end; }
.row:hover .row-a { transform: rotate(45deg); }

.preview {
  position: fixed; left: 0; top: 0; z-index: 800;
  width: 300px; height: 220px; margin: -110px 0 0 -150px;
  border-radius: 18px; overflow: hidden; pointer-events: none;
  opacity: 0; scale: .5;
  transition: opacity .3s, scale .45s var(--ease);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
}
.preview.on { opacity: 1; scale: 1; }
.preview .cover { height: 100%; }

/* ---------- vue grille ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px 24px; }
.tile { display: block; }
.tilt { position: relative; border-radius: 20px; overflow: hidden; transition: transform .5s var(--ease); }
.tilt .cover { aspect-ratio: 4 / 3; }
.glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .45), transparent 55%);
  mix-blend-mode: soft-light; transition: opacity .3s;
}
.tile:hover .glare { opacity: 1; }
.tile-info { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; gap: 12px; }
.tile-info strong { font-size: 20px; font-weight: 800; font-stretch: 125%; text-transform: uppercase; transition: color .2s; }
.tile-info span { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.tile:hover strong { text-decoration-color: var(--accent); }
.tile-sub { display: block; margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--muted); }

/* ---------- à propos ---------- */
.about-body { display: grid; grid-template-columns: 80px 1fr auto; gap: 16px 56px; align-items: start; }
.about-text { grid-column: 2; }
.lead { font-size: clamp(24px, 3.2vw, 40px); font-weight: 600; line-height: 1.12; max-width: 24ch; letter-spacing: -.01em; }
.bio { margin-top: 28px; display: grid; gap: 16px; max-width: 62ch; }
.bio p { font-size: 17px; line-height: 1.6; }
.portrait {
  grid-column: 3;
  width: clamp(200px, 22vw, 280px); aspect-ratio: 3 / 4;
  border-radius: 26px; overflow: hidden; position: relative;
  background: var(--accent); display: grid; place-items: center;
  rotate: 6deg; box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .45);
  transition: rotate .6s var(--ease), scale .6s var(--ease), opacity .9s, translate .9s var(--ease);
}
.portrait:hover { rotate: 0deg; scale: 1.03; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait b { font-size: clamp(70px, 8vw, 110px); font-weight: 900; font-stretch: 125%; line-height: 1; position: relative; }
.portrait svg { position: absolute; width: 88%; animation: spinc 30s linear infinite; }
.portrait svg text { font-size: 13px; font-stretch: 125%; font-weight: 600; letter-spacing: .25em; fill: var(--ink); }
h3 { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 14px; }

.xp, .certs, .about-cols { margin-left: 96px; margin-top: 56px; }
.xp li, .certs li {
  display: grid; grid-template-columns: 150px 1fr; gap: 6px 24px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid rgba(0, 0, 0, .14);
}
.xp li:first-child, .certs li:first-child { border-top: 1.5px solid var(--ink); }
.xp-y { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.xp strong, .certs strong { font-size: 18px; font-weight: 700; }
.xp-o { grid-column: 2; font-size: 15px; color: var(--muted); }
.certs li { grid-template-columns: 1fr auto auto; }
.certs span { font-size: 14px; color: var(--muted); }
.certs em { font-style: normal; font-family: var(--mono); font-size: 11px; padding: 4px 10px; border: 1px solid var(--ink); border-radius: 999px; }
.certs em.done { background: var(--ink); color: var(--bg); }
.certs strong a:hover { text-decoration-color: var(--accent); }
.about-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; }
.about-cols li { font-size: 16px; font-weight: 500; padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.about-cols .chips li { border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px 12px; font-size: 13px; }

/* ---------- méthode ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .step { min-height: 0; } }
.step {
  border: 1.5px solid var(--ink); border-radius: 24px; padding: 24px;
  min-height: 280px; display: flex; flex-direction: column; gap: 12px;
  transition: background .35s, transform .45s var(--ease), opacity .9s, translate .9s var(--ease);
}
.step:hover { background: var(--accent); transform: translateY(-8px); }
.step .n {
  font-size: 72px; font-weight: 900; font-stretch: 125%; line-height: .8;
  color: transparent; -webkit-text-stroke: 1.2px var(--ink); transition: color .35s;
  margin-bottom: 36px;
}
.step:hover .n { color: var(--ink); }
.step h4 { font-size: 20px; font-weight: 900; font-stretch: 125%; text-transform: uppercase; }
.step p { font-size: 15px; line-height: 1.45; }

/* ---------- contact ---------- */
.contact {
  position: relative; overflow: hidden;
  margin-top: clamp(80px, 12vw, 140px);
  background: var(--ink); color: var(--bg);
  padding: clamp(80px, 12vw, 150px) var(--gutter);
  text-align: center;
}
.contact > * { position: relative; }
.contact .red-bar.small { position: absolute; left: 50%; top: 0; height: 100%; width: clamp(60px, 9vw, 120px); transform: translateX(-50%); }
.mail-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.mail {
  font-size: clamp(15px, 2.4vw, 26px); font-weight: 600;
  padding: 16px 28px; border-radius: 999px; background: var(--bg); color: var(--ink);
  transition: transform .25s var(--ease), background .2s; word-break: break-all;
}
.mail:hover { transform: translateY(-3px); background: #fff; }
.copy {
  font-size: 11px; font-weight: 700; padding: 0 20px; height: 52px; border-radius: 999px;
  border: 1.5px solid var(--bg); background: var(--ink); transition: background .2s, color .2s;
}
.copy:hover { background: var(--bg); color: var(--ink); }
.socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; margin-top: 36px; }
.socials a { font-size: 13px; font-weight: 700; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.socials a:hover { color: var(--accent); }
.localtime { margin-top: 36px; font-family: var(--mono); font-size: 12px; color: #8d8d8a; }

.footer {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 22px var(--gutter);
  background: var(--ink); color: #8d8d8a; font-family: var(--mono); font-size: 12px;
  border-top: 1px solid #2a2a2a;
}
.footer a:hover { color: var(--bg); }

/* ================= ÉTUDE DE CAS ================= */
.case {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  background: var(--bg); color: var(--ink); overflow: hidden;
}
.case[open] { animation: slideup .7s var(--ease); }
@keyframes slideup { from { transform: translateY(100%); } }
.case::backdrop { background: rgba(10, 10, 10, .5); }
.case-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px var(--gutter);
  background: rgba(230, 230, 227, .82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.c-count { font-family: var(--mono); font-size: 12px; }
.c-actions { display: flex; gap: 6px; }
.bar-btn {
  height: 40px; min-width: 40px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--ink); font-size: 11px; font-weight: 700;
  transition: background .2s, color .2s;
}
.bar-btn:hover { background: var(--ink); color: var(--bg); }
.bar-btn.close { background: var(--ink); color: var(--bg); }
.bar-btn.close:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.case-scroll { outline: none; height: 100%; overflow-y: auto; padding-top: 80px; overscroll-behavior: contain; }
.case-hero { margin: 0 var(--gutter); height: min(68svh, 640px); border-radius: 28px; overflow: hidden; }
.case-hero .cover { height: 100%; }
.case-hero .cover img { object-position: left top; }
.case-hero.shot { height: auto; aspect-ratio: 2 / 1; } /* vraie capture : affichée entière */
.case-head { display: grid; grid-template-columns: 80px 1fr; gap: 0 16px; padding: 48px var(--gutter) 0; }
.case-head > * { grid-column: 2; }
.m-cat { display: inline-block; justify-self: start; font-size: 11px; font-weight: 700; color: var(--ink); background: var(--accent); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.case-head h2 { font-size: clamp(44px, 9vw, 130px); }
.case-body {
  display: grid; grid-template-columns: 80px 1fr 2fr; gap: 32px;
  padding: 40px var(--gutter) 56px;
}
.case-body > dl { grid-column: 2; }
.m-meta { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 14px; align-content: start; }
.m-meta dt { font-family: var(--mono); color: var(--muted); }
.c-desc { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; max-width: 60ch; }
.m-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.m-tags li { font-size: 12px; padding: 5px 12px; border: 1px solid var(--ink); border-radius: 999px; }
.m-link {
  display: inline-block; margin-top: 28px; padding: 12px 22px; border-radius: 999px;
  background: var(--accent); color: var(--ink); font-weight: 700; transition: background .2s, color .2s;
}
.m-link:hover { background: var(--ink); color: var(--bg); }
.m-link[hidden] { display: none; }
.case-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 0 var(--gutter) 56px; }
.case-gallery:empty { display: none; }
.case-gallery figure:first-child, .case-gallery figure.wide { grid-column: 1 / -1; }
.case-gallery img { width: 100%; display: block; border-radius: 20px; }
.case-gallery figcaption { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 8px; }
.case-next {
  display: block; position: relative; overflow: hidden;
  background: var(--ink); color: var(--bg);
  padding: clamp(60px, 10vw, 120px) var(--gutter);
}
.case-next span { font-family: var(--mono); font-size: 12px; color: #8d8d8a; }
.case-next strong {
  display: block; margin-top: 12px; position: relative; z-index: 1;
  font-size: clamp(40px, 8vw, 110px); font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; line-height: .9; transition: color .3s;
}
.case-next:hover strong { text-decoration-color: var(--accent); }
.case-next-cover {
  position: absolute; right: var(--gutter); top: 50%;
  width: clamp(120px, 16vw, 220px); aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden;
  transform: translateY(-50%) rotate(8deg); transition: transform .6s var(--ease);
}
.case-next:hover .case-next-cover { transform: translateY(-50%) rotate(0) scale(1.06); }
.case-next-cover .cover { height: 100%; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 13000;
  transform: translate(-50%, 200%);
  background: var(--ink); color: var(--bg); border: 1px solid #333;
  padding: 12px 20px; border-radius: 999px; font-size: 13px; font-weight: 600;
  transition: transform .45s var(--ease);
}
.toast.show { transform: translate(-50%, 0); }

/* ================= INTRO + CHIFFRES ================= */
[hidden] { display: none !important; }
.intro { padding-top: clamp(60px, 9vw, 110px); }
.statement {
  font-size: clamp(34px, 5.6vw, 76px); font-weight: 800; font-stretch: 112%;
  text-transform: none; line-height: 1; letter-spacing: -.02em; max-width: 17ch;
}
.statement em { font-style: normal; text-decoration-color: var(--accent); }
.intro-text { margin-top: 28px; margin-left: auto; max-width: 52ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(48px, 7vw, 88px); border-top: 1.5px solid var(--ink);
}
.stats li { padding: 26px 24px 0 0; display: grid; gap: 10px; align-content: start; }
.stats li + li { padding-left: 24px; border-left: 1px solid rgba(0, 0, 0, .15); }
.stats strong { white-space: nowrap; font-size: clamp(40px, 5vw, 72px); font-weight: 900; font-stretch: 125%; line-height: .9; letter-spacing: -.02em; }
.stats span { font-size: 14px; line-height: 1.4; color: var(--muted); max-width: 26ch; }

/* ---------- autres missions ---------- */
.others { margin-top: 72px; }
.others li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, .14); font-size: 17px;
}
.others li:first-child { border-top: 1.5px solid var(--ink); }
.others em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.others li.hide { display: none; }

/* ================= SERVICES ================= */
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pillar {
  container-type: inline-size; min-width: 0;        /* le titre se mesure à la carte (unités cqw) */
  border: 1.5px solid var(--ink); border-radius: 30px; padding: clamp(28px, 3.4vw, 44px);
  display: flex; flex-direction: column; gap: 18px;
}
.pillar-grow { background: var(--ink); color: var(--bg); }
.pillar-grow .index, .pillar-grow li span { color: #a3a39f; }
.p-title {
  font-size: clamp(28px, 4.2vw, 52px);              /* navigateurs sans cqw */
  font-size: min(84px, 11.2cqw);                    /* « CONSTRUIRE » tient toujours sur une ligne, sans élargir la carte */
  font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; line-height: .85; margin: 0; letter-spacing: -.01em; color: var(--ink);
}
.pillar-grow .p-title { color: var(--accent); }
.p-lead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; max-width: 40ch; }
.pillar ul { margin-top: auto; }
.pillar li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid rgba(127, 127, 127, .35); }
.pillar li strong { font-size: 17px; font-weight: 800; font-stretch: 112%; }
.pillar li span { font-size: 15px; line-height: 1.45; color: var(--muted); }
.svc-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; margin-top: 36px; }
.svc-notes p { font-size: 16px; line-height: 1.5; padding-left: 16px; border-left: 3px solid var(--accent); }
.audit {
  margin-top: 36px; border-radius: 30px; background: var(--accent); color: var(--ink);
  padding: clamp(28px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap;
}
.audit h3 { font-size: clamp(26px, 3.2vw, 42px); color: var(--ink); font-weight: 900; font-stretch: 112%; text-transform: none; letter-spacing: -.01em; margin-bottom: 10px; }
.audit p { font-size: 17px; line-height: 1.5; max-width: 54ch; }
.audit-cta {
  flex: none; background: var(--ink); color: var(--bg); font-weight: 800; font-size: 15px;
  padding: 18px 28px; border-radius: 999px; transition: transform .25s var(--ease), background .2s;
}
.audit-cta:hover { transform: translateY(-3px); background: #000; }

/* ================= FAQ ================= */
.faq details { border-bottom: 1px solid rgba(0, 0, 0, .18); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-size: clamp(18px, 2vw, 24px); font-weight: 700; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 36px; height: 36px; border: 1.5px solid var(--ink); border-radius: 50%; transition: background .25s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; translate: -50% -50%; }
.faq summary i::after { rotate: 90deg; transition: rotate .35s var(--ease); }
.faq details[open] summary i { background: var(--accent); border-color: var(--accent); }
.faq details[open] summary i::after { rotate: 0deg; }
.faq summary:hover span { text-decoration-color: var(--accent); }
.faq details p { font-size: 17px; line-height: 1.6; max-width: 70ch; padding: 0 0 26px; }

/* ================= LANGUE ================= */
.lang { display: inline-flex; gap: 2px; padding: 2px; border: 1.5px solid var(--ink); border-radius: 999px; }
.lang a { font-size: 10px; font-weight: 800; font-stretch: 125%; padding: 5px 8px; border-radius: 999px; line-height: 1; }
.lang a[aria-current] { background: var(--ink); color: var(--bg); }
.pill .lang { margin: 0 4px; }
.pill .lang a { padding: 6px 8px; }
.hero-right { justify-self: end; display: flex; align-items: center; gap: 14px; }

/* ---------- contact ---------- */
.contact-text {
  margin: 14px auto 0; max-width: 46ch; font-size: 17px; line-height: 1.5; color: #c9c9c6;
  background: var(--ink); padding: 8px 14px; border-radius: 14px;   /* coupe la bande jaune derrière le texte, sinon illisible */
}
.contact-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn {
  display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid var(--bg); background: var(--ink); color: var(--bg);
  font-size: 12px; font-weight: 700; font-stretch: 125%; text-transform: uppercase; letter-spacing: .04em;
  transition: background .2s, color .2s, transform .25s var(--ease);
}
.btn:hover { background: var(--bg); color: var(--ink); transform: translateY(-2px); }
.btn-wa { background: #25d366; border-color: #25d366; color: #0b1f12; }
.btn-wa:hover { background: #1ebe5b; color: #0b1f12; }

/* ---------- étude de cas : compléments ---------- */
.c-tagline { margin-top: 18px; font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; line-height: 1.2; max-width: 32ch; letter-spacing: -.01em; }
.c-summary { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; max-width: 60ch; }
.c-results {
  display: grid; grid-template-columns: repeat(var(--n, 4), 1fr);
  margin: 0 var(--gutter) 56px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
}
.c-results:empty { display: none; }
.c-results div { padding: 24px 20px 24px 0; display: grid; gap: 8px; }
.c-results div + div { padding-left: 20px; border-left: 1px solid rgba(0, 0, 0, .15); }
.c-results strong { font-size: clamp(36px, 4.6vw, 64px); font-weight: 900; font-stretch: 125%; line-height: .9; text-decoration-color: var(--accent); }
.c-results span { font-size: 14px; color: var(--muted); line-height: 1.35; }
.case-detail { padding-top: 0; }
.case-detail h3 { grid-column: 2; margin: 6px 0 0; }
.c-text { font-size: 18px; line-height: 1.6; max-width: 62ch; }
.c-did li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid rgba(0, 0, 0, .12); font-size: 17px; line-height: 1.5; }
.c-did li:first-child { border-top: 1.5px solid var(--ink); }
.c-did li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }

.compare .cmp { position: relative; border-radius: 20px; overflow: hidden; user-select: none; }
.compare .cmp > img { width: 100%; display: block; border-radius: 0; }
.cmp-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.cmp-before img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 3px; margin-left: -1.5px; background: var(--accent); pointer-events: none; }
.cmp-handle::after { content: "↔"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-size: 18px; }
.cmp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.cmp-tag { position: absolute; top: 14px; font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 999px; background: rgba(17, 17, 17, .8); color: #fff; pointer-events: none; }
.cmp-tag-b { left: 14px; }
.cmp-tag-a { right: 14px; }

@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li:nth-child(3) { border-left: 0; padding-left: 0; }
  .pillars, .svc-notes { grid-template-columns: minmax(0, 1fr); }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1100px) {
  .fan-hint {
    right: auto; left: 50%; translate: -50% 0; bottom: calc(var(--cards-top, 520px) + 46px);
    width: max-content; max-width: calc(100% - 2 * var(--gutter)); text-align: center; line-height: 1.5; text-wrap: balance;
  }
  .marks i:nth-child(5) { display: none; }   /* la croix du milieu tomberait sur la consigne */
}
@media (max-width: 900px) {
  .hero-top { grid-template-columns: 1fr auto; }
}
@media (max-width: 760px) {
  :root { --card-w: 136px; --card-h: 182px; --radius: 18px; }
  .hero { padding-top: 28px; }
  .red-bar { left: 38%; }
  #owner-role span { display: block; }   /* Product Builder / Web & Growth : une moitié par ligne */
  #owner-role i { display: none; }
  .hero-meta .nm { width: min-content; }   /* le nom passe sur deux lignes (Pierre-Paul / Koumonlou), la flèche collée à côté */
  .title-wrap { --fs: 10.4vw; }
  .welcome { top: calc(var(--fs) * -.88); }   /* l'étiquette rétrécit moins que le titre : il faut la remonter davantage */
  .card-label { font-size: 8px; left: 10px; right: 10px; bottom: 9px; }
  .fan { min-height: 420px; }
  .dial { --dial: 320px; }
  .dial-open { font-size: 10px; letter-spacing: .02em; bottom: calc(50% + var(--sink) + 2px); max-width: 38%; }
  .knob-mark::after { width: 12px; height: 10px; margin-left: -6px; }
  .stats li { padding-right: 10px; }
  .stats li + li { padding-left: 16px; }
  .stats strong { font-size: min(40px, 10vw); }      /* « 3 ans+ » tient dans sa demi-colonne */
  .section-head { grid-template-columns: 1fr auto; }
  .section-head h2 { grid-column: 1 / -1; }          /* le titre prend toute la largeur ; le compteur monte à côté du numéro */
  .section-head h2 br { display: none; }             /* sur petit écran, le titre se coupe tout seul, en lignes équilibrées */
  .section-head h2 { text-wrap: balance; }
  .section-head .count { grid-row: 1; grid-column: 2; }
  h2 { font-size: min(36px, calc((100vw - 2 * var(--gutter)) / 10.5)); }              /* « SÉLECTIONNÉS » tient sur une ligne */
  .case-head h2 { font-size: min(44px, calc((100vw - 2 * var(--gutter)) / 7)); }      /* « FICHEPRO » aussi */
  .row { grid-template-columns: 30px 1fr auto; gap: 10px; padding: 20px 4px; }
  .row-c, .row-a { display: none; }
  .about-body { grid-template-columns: 1fr; }
  .about-text, .portrait { grid-column: 1; }
  .portrait { justify-self: center; margin: 16px 0; }
  .xp, .certs, .about-cols { margin-left: 0; margin-top: 44px; }
  .xp li { grid-template-columns: 1fr; }
  .xp-o { grid-column: 1; }
  .certs li { grid-template-columns: 1fr auto; }
  .row-s { font-size: 13px; }
  .intro-text { margin-left: 0; }
  .others li { flex-direction: column; gap: 4px; }
  .pill .opt { display: none; }
  .case-detail h3 { grid-column: 1; }
  .c-results { margin-bottom: 40px; grid-template-columns: 1fr 1fr; }
  .c-results div + div { border-left: 0; padding-left: 0; }
  .c-results div { padding-right: 12px; }
  .pill a { padding: 9px 10px; }
  .case-head, .case-body { grid-template-columns: 1fr; }
  .case-head > *, .case-body > dl { grid-column: 1; }
  .case-hero { height: 46svh; border-radius: 20px; }
  .case-gallery { grid-template-columns: 1fr; }
  .bar-btn .long { display: none; }
  .case-next-cover { opacity: .5; }
  .footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}