/* Création de site web · série 2 (préfixe .ws). Même langage que les blocs « Cinq leviers » :
   images de la marque en grand, Everett géante, un mouvement fort par page, aucune ombre derrière les cartes. */
.ws {
  --ws-radius: clamp(18px, 1.6vw, 26px);
  --ws-swift: cubic-bezier(.76, 0, .24, 1);
  --ws-bleed: var(--hb-gutter);
  --ws-line: color-mix(in srgb, var(--hb-color-ink) 15%, transparent);
  --ws-ivory: #f5f7f0;
  --ws-night: #0b1510;
  position: relative;
  overflow-x: clip;
  color: var(--hb-color-ink);
  background: var(--hb-color-paper);
}
.ws :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.ws :where(figure, h1, h2, h3, p, pre) { margin: 0; }
.ws :where(img) { max-width: none; }
.ws :where(h1, h2, h3) { font-family: var(--hb-font-heading); font-weight: 500; }
.ws-dot { color: var(--hb-color-orange); font-weight: inherit; }
.ws-tone--forest { --bg: var(--hb-color-forest); --ink: var(--hb-color-paper); }
.ws-tone--pine { --bg: var(--hb-color-pine); --ink: var(--hb-color-paper); }
.ws-tone--lime { --bg: var(--hb-color-lime); --ink: var(--hb-color-ink); }
.ws-tone--orange { --bg: var(--hb-color-orange); --ink: var(--hb-color-forest); }
.ws-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1.4 var(--hb-font-body); letter-spacing: .15em; text-transform: uppercase; }
.ws-eyebrow svg { width: 15px; fill: var(--hb-color-orange); }
.ws-kicker { display: flex; align-items: center; gap: 12px; font: 500 11px/1 var(--hb-font-body); letter-spacing: .16em; text-transform: uppercase; }
.ws-kicker span { opacity: .55; font-variant-numeric: tabular-nums; }
.ws-line { display: block; overflow: clip; padding: 0 .04em .08em 0; margin-bottom: -.08em; }
.ws-line > span { display: inline-block; }
.ws-title { margin-top: 22px; color: var(--hb-color-paper); font-size: clamp(60px, 7.6vw, 150px); line-height: .9; letter-spacing: -.07em; }
.ws-title--ink { color: var(--hb-color-ink); }
.ws-lead { max-width: 40ch; margin-top: clamp(22px, 2.2vw, 34px); color: rgba(233, 237, 226, .82); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; }
.ws-lead--ink { color: color-mix(in srgb, var(--hb-color-ink) 74%, transparent); }
.ws-promise { font: 500 clamp(20px, 1.6vw, 27px)/1.15 var(--hb-font-heading); letter-spacing: -.035em; }
.ws-copy { max-width: 48ch; color: color-mix(in srgb, currentColor 76%, transparent); font-size: 15.5px; line-height: 1.6; }
.ws-points { display: grid; gap: 10px; }
.ws-points li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ws-points svg { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 6px; fill: none; stroke: currentColor; stroke-width: 2.6; background: color-mix(in srgb, currentColor 13%, transparent); }
.ws-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.ws-ghost { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; border-bottom: 1px solid currentColor; font: 500 14px/1.2 var(--hb-font-body); }
.ws-ghost svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: translate .35s var(--hb-ease); }
.ws-ghost:hover svg { translate: 4px 0; }
.ws-tool { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; }
.ws-tool .hb-inline-icon { flex: none; width: 42px; height: 42px; margin: 0; }
.ws-tool small { font-size: 13px; opacity: .8; }
.ws-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-tags li { padding: 7px 11px; border-radius: 7px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 12.5px; }
.ws-plus { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); transition: background-color .45s, border-color .45s, color .45s, rotate .7s var(--hb-ease); }
.ws-plus::before, .ws-plus::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 1.5px; margin: -.75px 0 0 -9px; background: currentColor; }
.ws-plus::after { rotate: 90deg; }
.ws-scroll-hint { position: absolute; z-index: 6; left: 50%; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; translate: -50% 0; color: rgba(233, 237, 226, .78); font: 500 10px/1 var(--hb-font-body); letter-spacing: .18em; text-transform: uppercase; }
.ws-scroll-hint i { position: relative; width: 1px; height: 38px; overflow: hidden; background: rgba(233, 237, 226, .25); }
.ws-scroll-hint i::after { content: ''; position: absolute; inset: 0; background: var(--hb-color-orange); animation: ws-hint 2.2s var(--hb-ease) infinite; }
@keyframes ws-hint { from { translate: 0 -100%; } to { translate: 0 100%; } }

/* Apparitions : les lignes montent de sous leur masque, une fois au milieu de l’écran. */
@media (prefers-reduced-motion: no-preference) {
  .ws.is-ready [data-ws-reveal]:not(.is-in) .ws-line > span { translate: 0 108%; }
  .ws.is-ready [data-ws-reveal] .ws-line > span { transition: translate 1.1s var(--hb-ease); }
  .ws.is-ready [data-ws-reveal] .ws-line:nth-child(2) > span { transition-delay: .08s; }
  .ws.is-ready [data-ws-reveal] .ws-line:nth-child(3) > span { transition-delay: .16s; }
  .ws.is-ready [data-ws-reveal]:not(.is-in) > :not(h1, h2, .ws-band-pic) { opacity: 0; translate: 0 22px; }
  .ws.is-ready [data-ws-reveal] > :not(h1, h2, .ws-band-pic) { transition: opacity .8s .15s, translate 1s var(--hb-ease) .15s; }
  .ws.is-ready .ws-hero .ws-title .ws-line > span { animation: ws-rise 1.2s var(--hb-ease) both; }
  .ws.is-ready .ws-hero .ws-title .ws-line:nth-child(2) > span { animation-delay: .1s; }
  .ws.is-ready .ws-hero .ws-title .ws-line:nth-child(3) > span { animation-delay: .2s; }
  .ws.is-ready .ws-hero :is(.ws-eyebrow, .ws-lead, .hb-breadcrumb, .ws-band-meta) { animation: ws-fade 1s var(--hb-ease) .35s both; }
}
@keyframes ws-rise { from { translate: 0 108%; } }
@keyframes ws-fade { from { opacity: 0; translate: 0 18px; } }

/* Sections */
.ws-section { position: relative; padding: clamp(96px, 9vw, 170px) var(--ws-bleed); }
.ws-section--light { background: var(--hb-color-paper); }
.ws-section--ivory { background: var(--ws-ivory); }
.ws-section--dark { color: var(--hb-color-paper); background: var(--hb-color-forest); }
.ws-section--dark .ws-copy, .ws-section--dark .ws-head-copy { color: rgba(233, 237, 226, .76); }
.ws-section--bleed { padding-inline: 0; padding-bottom: 0; }
.ws-head { margin-bottom: clamp(48px, 5vw, 88px); }
.ws-head h2 { margin-top: 22px; font-size: clamp(52px, 6vw, 112px); line-height: .92; letter-spacing: -.066em; }
.ws-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 60px; }
.ws-head--inset { padding-inline: var(--ws-bleed); }
.ws-head-copy { max-width: 40ch; color: color-mix(in srgb, var(--hb-color-ink) 70%, transparent); font-size: clamp(16px, 1.15vw, 18.5px); line-height: 1.6; }
.ws-head--sticky .ws-head-copy { margin-top: 26px; }

/* ——— Le site imaginaire « Votre marque » (unités = largeur de son cadre) ——— */
.ws-site { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0 4cqw 3cqw; color: var(--hb-color-ink); background: #f3f2ec; font-family: var(--hb-font-body); }
.ws-site i { font-style: normal; }
.ws-site-nav { display: flex; flex: none; align-items: center; gap: 3cqw; height: 6.4cqw; border-bottom: 1px solid rgba(26, 41, 32, .1); font-size: 1.05cqw; }
.ws-site-logo { display: flex; align-items: center; gap: .6cqw; font: 500 1.7cqw/1 var(--hb-font-heading); letter-spacing: -.04em; }
.ws-site-logo svg { width: 1.5cqw; fill: var(--hb-color-orange); }
.ws-site-links { display: flex; gap: 2.4cqw; margin-left: auto; opacity: .8; }
.ws-site-btn { display: inline-block; padding: .95cqw 1.6cqw; border-radius: .6cqw; color: #fff; background: var(--hb-color-orange); font-size: 1cqw; white-space: nowrap; }
.ws-site-btn--dark { background: var(--hb-color-forest); }
.ws-site-hero { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 3.4cqw; min-height: 0; padding-top: 2.6cqw; }
.ws-site-text small { display: block; color: var(--hb-color-orange); font: 500 .95cqw/1 var(--hb-font-body); letter-spacing: .16em; text-transform: uppercase; }
.ws-site-title { display: block; margin: 1.3cqw 0 1.7cqw; font: 500 6cqw/.92 var(--hb-font-heading); letter-spacing: -.066em; }
.ws-site-text p { max-width: 30ch; color: rgba(26, 41, 32, .68); font-size: 1.25cqw; line-height: 1.5; }
.ws-site-ctas { display: flex; align-items: center; gap: 2cqw; margin-top: 2.3cqw; }
.ws-site-link { padding-bottom: .2cqw; border-bottom: 1px solid currentColor; font-size: 1.05cqw; }
.ws-site-pic { position: relative; align-self: stretch; max-height: 34cqw; overflow: hidden; border-radius: 1.6cqw; }
.ws-site-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-site-cards { display: grid; flex: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqw; margin-top: 2.4cqw; }
.ws-site-card { display: flex; align-items: center; gap: 1.1cqw; padding: 1.1cqw; border-radius: 1cqw; background: #e6e9de; font-size: 1.1cqw; }
.ws-site-card i { width: 3cqw; height: 3cqw; border-radius: .6cqw; background: linear-gradient(135deg, var(--hb-color-lime), #5f7d52); }
.ws-site-card b { font-weight: 500; }
.ws-site-code { display: none; }
.ws-site--wire { color: var(--hb-color-lime); background-color: #0d1c14; background-image: linear-gradient(rgba(212, 226, 180, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 226, 180, .07) 1px, transparent 1px); background-size: 2cqw 2cqw; }
.ws-site--wire .ws-site-nav { border-color: rgba(212, 226, 180, .3); }
.ws-site--wire [data-tag] { position: relative; outline: 1px dashed rgba(212, 226, 180, .6); outline-offset: .35cqw; }
.ws-site--wire [data-tag]::before { content: attr(data-tag); position: absolute; z-index: 2; top: -2.1cqw; left: -.35cqw; padding: .3cqw .55cqw; border-radius: .3cqw; color: var(--hb-color-forest); background: var(--hb-color-lime); font: 500 .85cqw/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.ws-site--wire .ws-site-logo svg { fill: none; stroke: var(--hb-color-lime); stroke-width: 1.2; }
.ws-site--wire :is(.ws-site-text small, .ws-site-text p) { color: rgba(212, 226, 180, .78); }
.ws-site--wire .ws-site-btn { color: var(--hb-color-lime); background: transparent; box-shadow: inset 0 0 0 1px var(--hb-color-lime); }
.ws-site--wire .ws-site-pic { background: rgba(212, 226, 180, .05); outline-style: solid; }
.ws-site-cross { position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - .5px), rgba(212, 226, 180, .45) 50%, transparent calc(50% + .5px)), linear-gradient(to bottom right, transparent calc(50% - .5px), rgba(212, 226, 180, .45) 50%, transparent calc(50% + .5px)); }
.ws-site--wire .ws-site-card { background: transparent; }
.ws-site--wire .ws-site-card i { background: none; box-shadow: inset 0 0 0 1px rgba(212, 226, 180, .6); }
.ws-site--wire .ws-site-code { position: absolute; right: 4cqw; bottom: 9.5cqw; display: block; padding: 1.3cqw 1.7cqw; border-radius: 1cqw; color: var(--hb-color-lime); background: rgba(0, 0, 0, .42); font: 1.05cqw/1.65 ui-monospace, 'SFMono-Regular', Menlo, monospace; white-space: pre; }

/* ——— 01 · L’écran : la caméra entre dans l’écran de la salle ——— */
.ws-zoom { position: relative; height: 270svh; color: var(--hb-color-paper); background: var(--ws-night); }
.ws-zoom-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.ws-zoom-stage, .ws-door-stage { position: absolute; top: 50%; left: 50%; width: max(100vw, 177.7svh); aspect-ratio: 1672 / 941; translate: -50% -50%; transform-origin: 0 0; }
.ws-zoom.is-driven .ws-zoom-stage, .ws-door.is-driven .ws-door-stage { top: 0; left: 0; translate: none; }
.ws-zoom-stage img.ws-zoom-room, .ws-door-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-zoom-screen { position: absolute; top: 12.9%; left: 44.8%; width: 47.4%; height: 45.6%; overflow: hidden; container-type: inline-size; background: #0d0f0e; }
.ws-zoom-screen .ws-site { opacity: var(--ws-glow, .82); }
.ws-zoom-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(8, 15, 11, .86) 0%, rgba(8, 15, 11, .55) 30%, rgba(8, 15, 11, 0) 52%), linear-gradient(0deg, rgba(8, 15, 11, .6), rgba(8, 15, 11, 0) 40%); pointer-events: none; }
.ws-hero-copy { position: absolute; z-index: 5; left: var(--ws-bleed); bottom: clamp(56px, 10svh, 120px); width: min(660px, 44vw); }
.ws-hero-copy .hb-breadcrumb { margin-bottom: 26px; }
.ws-zoom .ws-title, .ws-door .ws-title { font-size: clamp(56px, 6vw, 118px); }
.ws-zoom-caption { position: absolute; z-index: 5; left: 50%; bottom: 34px; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px; color: var(--hb-color-ink); background: rgba(233, 237, 226, .92); font: 500 15px/1 var(--hb-font-heading); letter-spacing: -.02em; opacity: 0; translate: -50% 16px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity .5s, translate .7s var(--hb-ease); }
.ws-zoom-caption span { color: color-mix(in srgb, var(--hb-color-ink) 60%, transparent); }
.ws-zoom-caption.is-on { opacity: 1; translate: -50% 0; }

/* ——— 02 · Le portail : on passe la porte ronde ——— */
.ws-door { position: relative; height: 250svh; color: var(--hb-color-paper); background: var(--ws-night); }
.ws-door-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.ws-door-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(8, 15, 11, .82) 0%, rgba(8, 15, 11, .45) 32%, rgba(8, 15, 11, 0) 55%), linear-gradient(0deg, rgba(8, 15, 11, .55), rgba(8, 15, 11, 0) 45%); pointer-events: none; }
.ws-door-inside { position: absolute; inset: 0; z-index: 4; clip-path: circle(0 at 50% 44%); }
.ws-door-inside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-door-inside::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(8, 15, 11, .15), rgba(8, 15, 11, .62)); }
.ws-door-word { position: absolute; z-index: 2; top: 50%; left: 0; right: 0; display: grid; justify-items: center; translate: 0 -50%; color: var(--hb-color-paper); font: 500 clamp(56px, 8vw, 160px)/.9 var(--hb-font-heading); letter-spacing: -.07em; text-align: center; opacity: 0; }
.ws-door-word span { font: 500 12px/1 var(--hb-font-body); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 26px; opacity: .8; }

/* ——— 03 · Ouverture claire en lames ——— */
.ws-band-hero { padding: clamp(130px, 13vw, 190px) var(--ws-bleed) 0; }
.ws-band-meta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 60px; margin-top: clamp(26px, 2.6vw, 40px); }
.ws-band-meta .ws-lead { margin-top: 0; }
.ws-band-pic { height: clamp(360px, 64svh, 760px); margin-top: clamp(44px, 5vw, 80px); }
.ws-slats-frame { position: relative; overflow: hidden; border-radius: var(--ws-radius); background: var(--bg, var(--hb-color-forest)); container-type: inline-size; }
.ws-slat { position: absolute; top: 0; bottom: 0; left: calc(var(--s) * 100cqw / 7); width: calc(100cqw / 7 + 1px); overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--ws-swift) calc(var(--s) * 55ms); }
.ws-slat:nth-child(even) { clip-path: inset(100% 0 0 0); }
.ws-slat img { position: absolute; top: 0; left: calc(var(--s) * -100cqw / 7); width: 100cqw; height: 100%; object-fit: cover; scale: 1.16; transition: scale 1.7s var(--hb-ease) calc(var(--s) * 55ms); }
.is-cutout .ws-slat img { top: 6%; height: 94%; object-fit: contain; object-position: 50% 100% !important; }
:is(.ws-slats-frame, .ws-curtain-layer).is-shown > .ws-slat { clip-path: inset(0); }
:is(.ws-slats-frame, .ws-curtain-layer).is-shown > .ws-slat img { scale: 1; }
.ws:not(.is-ready) .ws-slat { clip-path: none; }

/* ——— 04 · Ouverture canopée ——— */
.ws-canopy { position: relative; height: 100svh; min-height: 640px; overflow: hidden; color: var(--hb-color-paper); background: var(--ws-night); }
.ws-canopy-layer { position: absolute; inset: -5%; translate: var(--dx, 0) var(--dy, 0); transition: translate .9s var(--hb-ease); }
.ws-canopy-layer img { width: 100%; height: 100%; object-fit: cover; }
.ws-canopy-front { inset: auto -6% -12% auto; width: min(70vw, 1180px); height: auto; aspect-ratio: 1672 / 941; }
.ws-canopy-front img { filter: brightness(.38) saturate(.85); object-position: 100% 100%; }
.ws-canopy-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 15, 11, .82), rgba(8, 15, 11, .2) 60%), linear-gradient(90deg, rgba(8, 15, 11, .5), rgba(8, 15, 11, 0) 60%); }
.ws-hero-copy--center { width: min(900px, 70vw); }

/* ——— 05 · La loupe ——— */
.ws-lens-hero { padding: clamp(130px, 13vw, 190px) var(--ws-bleed) clamp(80px, 8vw, 140px); }
.ws-lens { position: relative; margin-top: clamp(44px, 5vw, 80px); overflow: hidden; border-radius: var(--ws-radius); background: #e1e4d8; }
.ws-lens-bar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-bottom: 1px solid var(--ws-line); }
.ws-lens-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(26, 41, 32, .2); }
.ws-lens-bar i:first-child { background: var(--hb-color-orange); }
.ws-lens-bar span { margin: 0 auto; padding: 7px 22px; border-radius: 7px; background: rgba(255, 255, 255, .6); font-size: 12px; opacity: .8; }
.ws-lens-view { position: relative; aspect-ratio: 2.05; overflow: hidden; container-type: inline-size; cursor: none; }
.ws-lens-xray { position: absolute; inset: 0; z-index: 2; clip-path: circle(var(--lr, 0px) at var(--lx, 50%) var(--ly, 50%)); }
.ws-lens-ring { position: absolute; z-index: 3; top: 0; left: 0; width: calc(var(--lr, 0px) * 2); height: calc(var(--lr, 0px) * 2); margin: calc(var(--lr, 0px) * -1) 0 0 calc(var(--lr, 0px) * -1); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--hb-color-lime), 0 0 0 7px rgba(212, 226, 180, .18); translate: var(--lx, 50%) var(--ly, 50%); pointer-events: none; }
.ws-lens-ring b { position: absolute; left: 50%; top: 100%; margin-top: 14px; padding: 7px 11px; border-radius: 7px; translate: -50% 0; color: var(--hb-color-forest); background: var(--hb-color-lime); font: 500 11px/1 var(--hb-font-body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.ws-lens-hint { position: absolute; z-index: 4; right: 18px; bottom: 16px; padding: 8px 12px; border-radius: 8px; color: var(--hb-color-paper); background: rgba(16, 33, 25, .7); font-size: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity .4s; }
.ws-lens.is-touched .ws-lens-hint { opacity: 0; }

/* ——— Formats · index typographique ——— */
.ws-index-list { border-bottom: 1px solid var(--ws-line); }
.ws-section--dark .ws-index-list, .ws-section--dark .ws-row::before { border-color: rgba(233, 237, 226, .16); }
.ws-row { position: relative; }
.ws-row::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: currentColor; opacity: .16; transform-origin: 0 50%; transition: scale 1.3s var(--hb-ease) calc(var(--i) * 90ms); }
.ws-row-title { font-size: inherit; }
.ws-row-head { display: grid; grid-template-columns: clamp(44px, 6vw, 108px) minmax(0, 1fr) auto 56px; align-items: center; gap: clamp(14px, 1.6vw, 28px); width: 100%; padding: clamp(18px, 2.1vw, 34px) 0; color: inherit; text-align: left; cursor: pointer; }
.ws-row-num { align-self: start; padding-top: 1.2em; font: 500 12px/1 var(--hb-font-body); letter-spacing: .14em; opacity: .5; transition: color .4s, opacity .4s; }
.ws-row-name { display: block; overflow: clip; padding-bottom: .06em; font: 500 clamp(42px, 7vw, 132px)/1 var(--hb-font-heading); letter-spacing: -.066em; white-space: nowrap; transition: opacity .5s; }
.ws-row-name > span { position: relative; display: inline-block; transition: translate 1s var(--hb-ease) calc(var(--i) * 90ms + 120ms), transform .7s var(--hb-ease); }
.ws-row-name > span::after { content: attr(data-text); position: absolute; top: 112%; left: 0; white-space: nowrap; }
.ws-row-verb { font: 500 11px/1.4 var(--hb-font-body); letter-spacing: .16em; text-align: right; text-transform: uppercase; opacity: .6; }
.ws-row-verb small { display: block; margin-top: 4px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.ws-row-head:hover .ws-row-name > span, .ws-row-head:focus-visible .ws-row-name > span { transform: translateY(-112%); }
.ws-row-head:hover .ws-row-num, .ws-row.is-open .ws-row-num { color: var(--hb-color-orange); opacity: 1; }
.ws-row-head:hover .ws-plus { border-color: var(--hb-color-orange); color: #fff; background: var(--hb-color-orange); }
.ws-row.is-open .ws-plus { rotate: 135deg; }
.ws-index-list:has(.ws-row-head:hover) .ws-row-head:not(:hover) .ws-row-name { opacity: .22; }
.ws-row-body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .85s var(--hb-ease), visibility 0s linear .85s; }
.ws-row.is-open .ws-row-body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .85s var(--hb-ease), visibility 0s; }
.ws-row-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 80px); min-height: 0; overflow: hidden; padding-left: calc(clamp(44px, 6vw, 108px) + clamp(14px, 1.6vw, 28px)); }
.ws-row-pic { position: relative; aspect-ratio: 16 / 10; margin-bottom: clamp(30px, 3.4vw, 56px); overflow: hidden; border-radius: var(--ws-radius); background: var(--bg); clip-path: inset(0 0 100% 0 round var(--ws-radius)); transition: clip-path 1.1s var(--ws-swift) .08s; }
.ws-row.is-open .ws-row-pic { clip-path: inset(0 round var(--ws-radius)); }
.ws-row-pic img { width: 100%; height: 100%; object-fit: cover; scale: 1.18; transition: scale 1.6s var(--hb-ease) .08s; }
.ws-row.is-open .ws-row-pic img { scale: 1; }
.is-cutout img { object-fit: contain !important; object-position: 50% 100% !important; }
.ws-row-pic.is-cutout img { height: 92%; margin-top: 8%; }
.ws-row-copy { display: grid; align-content: start; justify-items: start; gap: 18px; padding-bottom: clamp(30px, 3.4vw, 56px); opacity: 0; translate: 0 26px; transition: opacity .5s, translate .9s var(--hb-ease); }
.ws-row.is-open .ws-row-copy { opacity: 1; translate: none; transition-delay: .3s; }
.ws.is-ready .ws-index:not(.is-in) .ws-row::before { scale: 0 1; }
.ws.is-ready .ws-index:not(.is-in) .ws-row-name > span { translate: 0 112%; }
.ws-float { position: fixed; z-index: 40; top: 0; left: 0; display: none; width: clamp(240px, 20vw, 340px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--ws-radius); pointer-events: none; transform: translate(-50%, -54%); translate: var(--fx, -999px) var(--fy, -999px); rotate: var(--fr, 0deg); scale: 0; transition: scale .55s var(--hb-ease); }
.ws-float.is-on { scale: 1; }
.ws-float-pic { position: absolute; inset: 0; background: var(--bg); clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--ws-swift); }
.ws-float-pic.is-active { clip-path: inset(0); }
.ws-float-pic img { width: 100%; height: 100%; object-fit: cover; scale: 1.3; transition: scale 1s var(--hb-ease); }
.ws-float-pic.is-active img { scale: 1; }
.ws-float-pic.is-cutout img { height: 90%; margin-top: 10%; }
@media (hover: hover) and (pointer: fine) { .ws-float { display: block; } }

/* ——— Formats · portail (fenêtre qui s’ouvre jusqu’au plein écran) ——— */
.ws-portal { position: relative; }
.ws-scene { position: relative; overflow: hidden; color: var(--hb-color-paper); background: var(--hb-color-forest); }
.ws-scene-media { position: absolute; inset: 0; }
.ws-scene-media img { width: 100%; height: 100%; object-fit: cover; }
.ws-scene-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 19, 14, .84) 0%, rgba(8, 19, 14, .5) 32%, rgba(8, 19, 14, 0) 60%), linear-gradient(0deg, rgba(8, 19, 14, .45), rgba(8, 19, 14, 0) 36%); }
.ws-scene.is-cutout { color: var(--hb-color-ink); background: var(--bg); }
.ws-scene.is-cutout .ws-scene-media { inset: 8% 33% 0 37%; }
.ws-scene.is-cutout .ws-scene-media::after { display: none; }
.ws-scene-copy { position: relative; z-index: 2; display: grid; align-content: end; justify-items: start; gap: 18px; width: calc(min(620px, 46vw) + var(--ws-bleed)); min-height: 100svh; padding: 130px 0 clamp(40px, 7svh, 80px) var(--ws-bleed); }
.ws-scene-copy h3 { font-size: clamp(56px, 6.6vw, 124px); line-height: .9; letter-spacing: -.066em; }
.ws-scene-more { display: grid; gap: 18px; }
.ws-scene:not(.is-cutout) .ws-copy { color: rgba(233, 237, 226, .8); }
.ws-scene-tag { position: absolute; z-index: 3; left: calc(67% + 16px); bottom: calc(9% + 16px); display: none; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 10px; color: var(--hb-color-ink); background: rgba(233, 237, 226, .92); font: 500 14px/1 var(--hb-font-heading); opacity: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ws-scene-tag span { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 6px; color: #fff; background: var(--hb-color-orange); font: 500 10px/1 var(--hb-font-body); letter-spacing: .08em; }
.ws-eyebrow--light { color: rgba(233, 237, 226, .82); }
.ws-scene.is-cutout .ws-eyebrow--light { color: inherit; }
.ws-portal-steps { position: absolute; z-index: 20; top: 128px; right: var(--ws-bleed); display: none; gap: 12px; color: var(--hb-color-paper); mix-blend-mode: difference; }
.ws-portal-steps li { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font: 500 11px/1 var(--hb-font-body); letter-spacing: .12em; opacity: .5; transition: opacity .4s; }
.ws-portal-steps i { width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: width .6s var(--hb-ease); }
.ws-portal-steps li.is-active { opacity: 1; }
.ws-portal-steps li.is-active i { width: 48px; }
.ws-portal.is-pinned { height: calc(var(--n) * 100svh); }
.ws-portal.is-pinned .ws-portal-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.ws-portal.is-pinned .ws-scene { position: absolute; inset: 0; z-index: var(--i); }
.ws-portal.is-pinned .ws-scene:not(:first-child) { clip-path: inset(50%); }
.ws-portal.is-pinned .ws-scene-tag { display: flex; }
.ws-portal.is-pinned .ws-portal-steps { display: grid; }

/* ——— Formats · rangées en lames ——— */
.ws-rows { display: grid; gap: clamp(80px, 9vw, 160px); }
.ws-format { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 6vw, 120px); }
.ws-format--flip .ws-format-pic { order: 2; }
.ws-format-pic { aspect-ratio: 4 / 3.5; }
.ws-format-copy { display: grid; justify-items: start; gap: 18px; }
.ws-format-num { font: 500 clamp(80px, 8vw, 150px)/.8 var(--hb-font-heading); letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.2px var(--hb-color-orange); }
.ws-format-copy h3 { font-size: clamp(46px, 5vw, 92px); line-height: .92; letter-spacing: -.062em; }

/* ——— Formats · bandes plein cadre ——— */
.ws-bands { display: grid; }
.ws-bandrow { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: 40px clamp(36px, 6vw, 120px); min-height: clamp(560px, 92svh, 900px); overflow: hidden; padding: clamp(40px, 6vw, 96px) var(--ws-bleed); color: var(--hb-color-paper); background: var(--bg); isolation: isolate; }
.ws-bandrow-media { position: absolute; inset: -12% 0; z-index: -1; translate: 0 var(--py, 0); }
.ws-bandrow-media img { width: 100%; height: 100%; object-fit: cover; }
.ws-bandrow:not(.is-cutout) .ws-bandrow-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 19, 14, .94) 0%, rgba(8, 19, 14, .7) 40%, rgba(8, 19, 14, .18) 74%); }
.ws-bandrow.is-cutout { color: var(--hb-color-ink); }
.ws-bandrow.is-cutout .ws-bandrow-media { inset: 6% 4% -2% 52%; }
.ws-bandrow-copy { display: grid; justify-items: start; gap: 18px; }
.ws-bandrow-copy h3 { font-size: clamp(64px, 9vw, 176px); line-height: .86; letter-spacing: -.07em; }
.ws-bandrow-more { display: grid; justify-items: start; gap: 18px; }
.ws-bandrow:not(.is-cutout) .ws-copy { color: rgba(233, 237, 226, .8); }

/* ——— Inclus ——— */
.ws-included { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.ws-head--sticky { position: sticky; top: 130px; margin-bottom: 0; }
.ws-included-list { border-top: 1px solid var(--ws-line); }
.ws-included-item { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px 24px; padding: clamp(26px, 2.6vw, 40px) 0; border-bottom: 1px solid var(--ws-line); }
.ws-included-num { grid-row: span 2; padding-top: .5em; color: var(--hb-color-orange); font: 500 12px/1 var(--hb-font-body); letter-spacing: .14em; }
.ws-included-item h3 { font-size: clamp(28px, 2.6vw, 46px); line-height: 1; letter-spacing: -.05em; }
.ws-included-item p { max-width: 50ch; color: color-mix(in srgb, currentColor 72%, transparent); font-size: 16px; line-height: 1.6; }
.ws-section--dark .ws-included-list, .ws-section--dark .ws-included-item { border-color: rgba(233, 237, 226, .16); }

/* ——— Méthode · rangées avec fil ——— */
.ws-steps { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.ws-steps-track { position: relative; padding-left: clamp(40px, 4vw, 70px); }
.ws-steps-line { position: absolute; top: 12px; bottom: 12px; left: 8px; width: 2px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, currentColor 14%, transparent); }
.ws-steps-line i { position: absolute; inset: 0; background: var(--hb-color-orange); transform-origin: 50% 0; scale: 1 var(--p, 0); }
.ws-step { position: relative; display: grid; gap: 16px; padding-bottom: clamp(56px, 6vw, 100px); }
.ws-step:last-child { padding-bottom: 0; }
.ws-step::before { content: ''; position: absolute; top: 14px; left: calc(-1 * clamp(40px, 4vw, 70px) + 3px); width: 12px; height: 12px; border-radius: 50%; background: var(--hb-color-paper); box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent); transition: background-color .5s, box-shadow .5s; }
.ws-section--dark .ws-step::before { background: var(--hb-color-forest); }
.ws-step.is-passed::before { background: var(--hb-color-orange); box-shadow: 0 0 0 2px var(--hb-color-orange), 0 0 0 8px rgba(255, 84, 37, .18); }
.ws-step-num { font: 500 12px/1 var(--hb-font-body); letter-spacing: .14em; opacity: .55; }
.ws-step h3 { font-size: clamp(44px, 4.6vw, 88px); line-height: .92; letter-spacing: -.062em; transition: color .5s; }
.ws-step p { max-width: 46ch; color: color-mix(in srgb, currentColor 74%, transparent); font-size: 16px; line-height: 1.6; }
.ws.is-ready .ws-step:not(.is-passed) h3 { color: color-mix(in srgb, currentColor 34%, transparent); }

/* ——— Méthode · rideau en lames ——— */
.ws-curtain { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(36px, 5.5vw, 110px); }
.ws-curtain-frame { position: sticky; top: 104px; height: calc(100svh - 128px); }
.ws-curtain-layer { position: absolute; inset: 0; z-index: var(--i, 0); }
.ws-curtain-count { position: absolute; z-index: 20; left: 20px; bottom: 20px; display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; border-radius: 10px; color: var(--hb-color-paper); background: rgba(16, 33, 25, .42); font: 500 12px/1 var(--hb-font-body); letter-spacing: .1em; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ws-digits { display: grid; height: 1em; overflow: hidden; font: 500 30px/1 var(--hb-font-heading); letter-spacing: -.04em; }
.ws-digits b { font-weight: 500; translate: 0 calc(var(--k, 0) * -100%); transition: translate .9s var(--hb-ease); }
.ws-chapter { display: grid; align-content: center; justify-items: start; gap: 18px; min-height: calc(100svh - 128px); padding-block: 48px; transition: opacity .7s; }
.ws.is-ready .ws-chapter:not(.is-active) { opacity: .26; }
.ws-chapter-num { font: 500 clamp(84px, 9vw, 168px)/.8 var(--hb-font-heading); letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--hb-color-ink) 34%, transparent); transition: -webkit-text-stroke-color .6s; }
.ws-chapter.is-active .ws-chapter-num { -webkit-text-stroke-color: var(--hb-color-orange); }
.ws-chapter h3 { font-size: clamp(48px, 5vw, 96px); line-height: .92; letter-spacing: -.062em; }
.ws-chapter-pic { display: none; }

/* ——— Méthode · tunnel en profondeur ——— */
.ws-tunnel { position: relative; color: var(--hb-color-paper); }
.ws-tunnel-pin { position: relative; isolation: isolate; overflow: hidden; background: var(--ws-night); }
.ws-tunnel-pin::before { content: ''; position: absolute; inset: -4%; z-index: -1; background: radial-gradient(ellipse 60% 55% at 66% 50%, rgba(9, 22, 15, .3) 0%, rgba(9, 22, 15, .84) 62%, #09160f 100%), url('/assets/media/work-experience/forest-v3.webp') 66% 50% / cover; filter: blur(3px) saturate(.8); }
.ws-tunnel-space { position: absolute; inset: 0; display: none; perspective: 900px; perspective-origin: 66% 50%; }
.ws-frame, .ws-leaf { position: absolute; top: 50%; left: 66%; will-change: transform, opacity; }
.ws-frame { --w: clamp(280px, 30vw, 520px); width: var(--w); aspect-ratio: 4 / 5; margin: calc(var(--w) * -.625) 0 0 calc(var(--w) / -2); overflow: hidden; border-radius: var(--ws-radius); background: #0b1a12; }
.ws-frame img { width: 100%; height: 100%; object-fit: cover; }
.ws-frame figcaption { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 7px; border-radius: 9px; color: var(--hb-color-ink); background: rgba(233, 237, 226, .92); font: 500 13px/1 var(--hb-font-heading); }
.ws-frame figcaption span { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 6px; color: #fff; background: var(--hb-color-orange); font: 500 10px/1 var(--hb-font-body); }
.ws-leaf { --w: 54vw; width: var(--w); margin: calc(var(--w) * -.28) 0 0 calc(var(--w) / -2); }
.ws-leaf img { width: 100%; height: auto; filter: brightness(.42) saturate(.85) blur(1.5px); }
.ws-tunnel-hud { position: relative; z-index: 5; display: grid; align-content: center; gap: 30px; width: calc(min(560px, 42vw) + var(--ws-bleed)); min-height: 100svh; padding: 120px 0 90px var(--ws-bleed); }
.ws-tunnel-panels { display: grid; }
.ws-tunnel-panel { grid-area: 1 / 1; display: grid; justify-items: start; gap: 16px; }
.ws-tunnel-panel h3 { font-size: clamp(56px, 6vw, 112px); line-height: .9; letter-spacing: -.066em; }
.ws-tunnel .ws-copy { color: rgba(233, 237, 226, .8); }
.ws-tunnel-still { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--ws-radius); }
.ws-tunnel-still img { width: 100%; height: 100%; object-fit: cover; }
.ws-tunnel-meter { position: absolute; z-index: 6; right: var(--ws-bleed); bottom: 40px; display: none; align-items: center; gap: 14px; font: 500 11px/1 var(--hb-font-body); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.ws-tunnel-meter i { position: relative; width: 150px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(233, 237, 226, .22); }
.ws-tunnel-meter b { position: absolute; inset: 0; background: var(--hb-color-orange); transform-origin: 0 50%; scale: var(--p, 0) 1; }
.ws-tunnel:not(.is-pinned) .ws-tunnel-hud { width: auto; padding: 100px var(--ws-bleed); }
.ws-tunnel:not(.is-pinned) .ws-tunnel-panels { gap: 72px; }
.ws-tunnel:not(.is-pinned) .ws-tunnel-panel { grid-area: auto; }
.ws-tunnel.is-pinned { height: calc(var(--n) * 110svh); }
.ws-tunnel.is-pinned .ws-tunnel-pin { position: sticky; top: 0; height: 100svh; }
.ws-tunnel.is-pinned .ws-tunnel-space { display: block; }
.ws-tunnel.is-pinned .ws-tunnel-meter { display: flex; }
.ws-tunnel.is-pinned .ws-tunnel-still { display: none; }
/* Les fondus ne s’activent qu’après la mise en place (.is-live), pour ne pas voir les cinq textes au chargement. */
.ws-tunnel.is-pinned .ws-tunnel-panel { visibility: hidden; }
.ws-tunnel.is-pinned .ws-tunnel-panel > * { opacity: 0; translate: 0 28px; }
.ws-tunnel.is-pinned .ws-tunnel-panel.is-active { visibility: visible; }
.ws-tunnel.is-pinned .ws-tunnel-panel.is-active > * { opacity: 1; translate: none; }
.ws-tunnel.is-live .ws-tunnel-panel { transition: visibility 0s linear .45s; }
.ws-tunnel.is-live .ws-tunnel-panel > * { transition: opacity .35s, translate .5s var(--hb-ease); }
.ws-tunnel.is-live .ws-tunnel-panel.is-active { transition: none; }
.ws-tunnel.is-live .ws-tunnel-panel.is-active > * { transition: opacity .6s, translate 1s var(--hb-ease); }
.ws-tunnel.is-live .ws-tunnel-panel.is-active > :nth-child(n + 3) { transition-delay: .1s; }
.ws-tunnel.is-live .ws-tunnel-panel.is-active > :nth-child(n + 4) { transition-delay: .18s; }

/* ——— Outils ——— */
.ws-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px 60px; padding-block: clamp(60px, 6vw, 100px); border-top: 1px solid var(--ws-line); }
.ws-tools-title { font-size: clamp(32px, 3.2vw, 58px); line-height: 1; letter-spacing: -.055em; }
.ws-tools-title span { color: color-mix(in srgb, currentColor 45%, transparent); }
.ws-tools-list { display: flex; flex-wrap: wrap; gap: 18px 34px; }

/* ——— Questions ——— */
.ws-faq { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.ws-faq-head { position: sticky; top: 130px; display: grid; justify-items: start; gap: 22px; }
.ws-faq-head h2 { font-size: clamp(52px, 5.6vw, 104px); line-height: .92; letter-spacing: -.066em; }
.ws-faq-list { border-top: 1px solid var(--ws-line); }
.ws-faq details { border-bottom: 1px solid var(--ws-line); }
.ws-faq summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 46px; align-items: center; gap: 18px; padding: clamp(22px, 2vw, 30px) 0; cursor: pointer; list-style: none; }
.ws-faq summary::-webkit-details-marker { display: none; }
.ws-faq-num { font: 500 12px/1 var(--hb-font-body); letter-spacing: .1em; opacity: .5; }
.ws-faq summary h3 { font-size: clamp(21px, 1.8vw, 30px); line-height: 1.15; letter-spacing: -.035em; }
.ws-faq summary .ws-plus { width: 46px; height: 46px; }
.ws-faq summary .ws-plus::before, .ws-faq summary .ws-plus::after { width: 14px; margin-left: -7px; }
.ws-faq details[open] .ws-plus { rotate: 45deg; color: #fff; border-color: var(--hb-color-orange); background: var(--hb-color-orange); }
.ws-faq details > p { max-width: 62ch; padding: 0 64px 30px 58px; color: color-mix(in srgb, currentColor 72%, transparent); font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.65; }
@media (prefers-reduced-motion: no-preference) {
  .ws-faq details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--hb-ease), content-visibility .5s allow-discrete; }
  .ws-faq details[open]::details-content { block-size: auto; }
}

/* ——— Fin ——— */
.ws-closing { position: relative; display: grid; align-items: end; min-height: clamp(560px, 92svh, 900px); overflow: hidden; padding: clamp(60px, 7vw, 120px) var(--ws-bleed); color: var(--hb-color-paper); background: var(--ws-night); isolation: isolate; }
.ws-closing-media { position: absolute; inset: -10% 0; z-index: -1; translate: 0 var(--py, 0); }
.ws-closing-media img { width: 100%; height: 100%; object-fit: cover; }
.ws-closing-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 15, 11, .86), rgba(8, 15, 11, .25) 60%), linear-gradient(90deg, rgba(8, 15, 11, .55), rgba(8, 15, 11, 0) 60%); }
.ws-closing-copy { display: grid; justify-items: start; gap: 26px; }
.ws-closing h2 { font-size: clamp(64px, 9vw, 180px); line-height: .88; letter-spacing: -.07em; }

/* Barre de comparaison */
.ws-compare { position: fixed; z-index: 45; right: 18px; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 9px; color: var(--hb-color-ink); background: rgba(233, 237, 226, .92); border: 1px solid rgba(16, 33, 25, .1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: var(--hb-font-body); }
.ws-compare > span { margin: 0 9px; font-size: 10px; font-weight: 500; }
.ws-compare a { display: grid; place-items: center; width: 37px; height: 36px; border-radius: 5px; font-size: 11px; font-weight: 500; }
.ws-compare a:hover { background: #d3ddc8; }
.ws-compare a[aria-current='page'] { color: var(--hb-color-paper); background: var(--hb-color-forest); }

/* ——— Adaptations ——— */
@media (max-width: 1023px) {
  .ws-included, .ws-steps, .ws-faq { grid-template-columns: minmax(0, 1fr); }
  .ws-head--sticky, .ws-faq-head { position: static; }
  .ws-head--sticky { margin-bottom: 40px; }
  .ws-format, .ws-format--flip { grid-template-columns: minmax(0, 1fr); }
  .ws-format--flip .ws-format-pic { order: 0; }
  .ws-bandrow { grid-template-columns: minmax(0, 1fr); }
  .ws-bandrow.is-cutout .ws-bandrow-media { inset: 4% 0 46% 30%; }
  .ws-curtain { grid-template-columns: minmax(0, 1fr); }
  .ws-curtain-stage { display: none; }
  .ws.is-ready .ws-chapter:not(.is-active) { opacity: 1; }
  .ws-chapter { min-height: 0; padding-block: 0 64px; }
  .ws-chapter-pic { display: block; width: 100%; aspect-ratio: 4 / 3.3; margin-bottom: 8px; }
  .ws-chapter-num { display: none; }
  .ws-tunnel-space { perspective-origin: 50% 32%; }
  .ws-frame, .ws-leaf { top: 32%; left: 50%; }
  .ws-frame { --w: clamp(200px, 42vw, 320px); }
  .ws-tunnel.is-pinned .ws-tunnel-hud { align-content: end; width: auto; padding: 0 var(--ws-bleed) 84px; }
  .ws-tunnel.is-pinned .ws-tunnel-hud::before { content: ''; position: absolute; inset: 34% 0 0; z-index: -1; background: linear-gradient(0deg, #09160f 0%, rgba(9, 22, 15, .92) 55%, rgba(9, 22, 15, 0)); }
  .ws-tunnel.is-pinned .ws-tags { display: none; }
  .ws-tunnel-meter { left: var(--ws-bleed); right: auto; bottom: 34px; }
  .ws-hero-copy { width: auto; right: var(--ws-bleed); }
}
@media (max-width: 760px) {
  .ws { --ws-bleed: var(--hb-gutter-mobile); }
  .ws-title { font-size: clamp(46px, 13vw, 60px); }
  .ws-zoom .ws-title, .ws-door .ws-title { font-size: clamp(44px, 12.4vw, 56px); }
  .ws-head h2, .ws-faq-head h2, .ws-tools-title { font-size: 40px; line-height: .98; }
  .ws-closing h2 { font-size: clamp(52px, 15vw, 64px); }
  .ws-section { padding-block: 80px; }
  .ws-section--bleed { padding-bottom: 0; }
  .ws-hero-copy { bottom: 44px; }
  /* L’écran : sur téléphone, la salle est cadrée sur l’écran, sans zoom fixé. */
  .ws-zoom { height: auto; }
  .ws-zoom-pin { position: relative; height: auto; padding-top: 128vw; }
  .ws-zoom-stage { top: 16vw; left: -92vw; width: 206vw; translate: none; }
  .ws-zoom-shade { background: linear-gradient(0deg, var(--ws-night) 0%, rgba(11, 21, 16, .9) calc(100% - 128vw), rgba(11, 21, 16, 0) calc(100% - 80vw)); }
  .ws-zoom .ws-hero-copy { position: relative; inset: auto; padding: 0 var(--ws-bleed) 56px; }
  .ws-zoom-caption, .ws-zoom .ws-scroll-hint { display: none; }
  .ws-door-word { font-size: clamp(52px, 15vw, 64px); }
  .ws-band-pic { height: 64vw; }
  .ws-lens-view { aspect-ratio: 1.45; }
  .ws-lens-hint { display: none; }
  .ws-row-head { grid-template-columns: 26px minmax(0, 1fr) 42px; gap: 12px; padding-block: 20px; }
  .ws-row-num { padding-top: .7em; }
  .ws-row-name { font-size: clamp(32px, 9.6vw, 44px); white-space: normal; }
  .ws-row-name > span::after { display: none; }
  .ws-row-verb { display: none; }
  .ws-plus { width: 42px; height: 42px; }
  .ws-plus::before, .ws-plus::after { width: 14px; margin-left: -7px; }
  .ws-row-inner { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-left: 0; }
  .ws-row-pic { margin-bottom: 0; }
  .ws-scene-copy { width: auto; gap: 14px; padding: 120px var(--ws-bleed) 40px; }
  .ws-scene-copy h3 { font-size: clamp(44px, 12.4vw, 56px); }
  .ws-scene-media::after { background: linear-gradient(0deg, rgba(8, 19, 14, .92) 0%, rgba(8, 19, 14, .6) 40%, rgba(8, 19, 14, 0) 70%); }
  .ws-scene.is-cutout .ws-scene-media { inset: 14% 0 40% 20%; }
  .ws-portal.is-pinned .ws-scene-more { display: none; }
  .ws-portal.is-pinned .ws-portal-steps { display: none; }
  .ws-scene-tag { left: calc(30% + 12px); bottom: calc(50% + 12px); font-size: 13px; }
  .ws-format-copy h3, .ws-chapter h3, .ws-tunnel-panel h3, .ws-step h3 { font-size: clamp(38px, 11vw, 50px); }
  .ws-bandrow-copy h3 { font-size: clamp(50px, 14vw, 64px); }
  .ws-included-item { grid-template-columns: minmax(0, 1fr); }
  .ws-included-num { grid-row: auto; }
  .ws-included-item h3 { font-size: 28px; }
  .ws-faq summary { grid-template-columns: minmax(0, 1fr) 42px; gap: 14px; }
  .ws-faq-num { display: none; }
  .ws-faq summary h3 { font-size: 21px; }
  .ws-faq details > p { padding: 0 0 26px; font-size: 15px; }
  .ws-tunnel.is-pinned .ws-tunnel-panel .ws-copy { font-size: 14.5px; line-height: 1.5; }
  .ws-compare { right: 9px; bottom: max(8px, env(safe-area-inset-bottom)); }
  .ws-compare > span { display: none; }
  .ws-compare a { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .ws *, .ws *::before, .ws *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .ws-zoom, .ws-door { height: auto; }
  .ws-zoom-pin, .ws-door-pin { position: relative; height: 100svh; }
  .ws-door-inside { display: none; }
}
.ws-head--sticky h2 { font-size: clamp(48px, 4.8vw, 92px); }
@media (max-width: 760px) { .ws-head--sticky h2 { font-size: 40px; } }

/* ═══════════ Page finale (06) : le meilleur des cinq maquettes, avec les images « site internet » ═══════════ */

/* Ouverture : la caméra entre dans l’écran du bureau, le site se redresse, puis montre sa structure. */
.ws-monitor { position: relative; color: var(--hb-color-paper); background: var(--ws-night); }
.ws-monitor.is-driven { height: 295svh; }
.ws-monitor.is-driven.is-portrait { height: 240svh; }
.ws-monitor-pin { position: relative; min-height: 380px; height: 100svh; overflow: hidden; }
.ws-monitor.is-driven .ws-monitor-pin { position: sticky; top: 0; }
.ws-monitor-photo { position: absolute; top: 0; left: 0; height: auto; visibility: hidden; transform-origin: 0 0; }
.ws-monitor.is-framed .ws-monitor-photo { visibility: visible; }
.ws-monitor-screen { position: absolute; z-index: 2; top: 0; left: 0; overflow: hidden; transform-origin: 0 0; background: #20241b; }
.ws-monitor:not(.is-framed) .ws-monitor-screen { inset: 19% var(--ws-bleed) auto auto; width: 45%; aspect-ratio: 16 / 9; border-radius: 8px; }
.ws-monitor-screen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ws-monitor-view { filter: brightness(var(--ws-glow, 1)); }
.ws-monitor-detail { opacity: var(--ws-detail, 0); scale: var(--ws-drift, 1); }
.ws-monitor-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(8, 16, 12, .62), rgba(8, 16, 12, .32) 34%, transparent 52%), linear-gradient(0deg, rgba(8, 16, 12, .52), transparent 24%); }
.ws-monitor .ws-hero-copy { top: clamp(110px, 26svh, 280px); bottom: auto; width: min(560px, 40vw); }
.ws-monitor .ws-title { font-size: clamp(45px, 5.4vw, 104px); }
.ws-monitor .ws-lead { max-width: 35ch; }
.ws-monitor.is-portrait .ws-hero-copy { top: auto; right: var(--ws-bleed); bottom: clamp(74px, 11svh, 116px); width: auto; }
.ws-monitor.is-portrait .ws-monitor-shade { background: linear-gradient(0deg, var(--ws-night) var(--ws-photo-bottom, 52%), transparent calc(var(--ws-photo-bottom, 52%) + 12%)); }
.ws-monitor:not(.is-driven) .ws-scroll-hint { display: none; }

/* Inclus : les mots avancent sur la passerelle. */
.ws-tunnel--words .ws-tunnel-pin::before { display: none; }
/* Feuillages : bords coupés de l’image adoucis, pour ne jamais voir de losange. */
.ws-tunnel--words .ws-leaf img { filter: brightness(.34) saturate(.8) blur(2px); -webkit-mask-image: radial-gradient(ellipse 52% 56% at 72% 66%, #000 46%, transparent 100%); mask-image: radial-gradient(ellipse 52% 56% at 72% 66%, #000 46%, transparent 100%); }
.ws-tunnel-bg { position: absolute; inset: -3%; z-index: -1; scale: var(--bgz, 1); transform-origin: 62% 56%; }
.ws-tunnel-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(2px) brightness(.66) saturate(.9); }
.ws-tunnel-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 64% 60% at 64% 54%, rgba(9, 22, 15, .05), rgba(9, 22, 15, .72) 72%, #09160f), linear-gradient(90deg, rgba(9, 22, 15, .78), rgba(9, 22, 15, 0) 52%); }
.ws-word { position: absolute; top: 50%; left: 64%; display: grid; justify-items: center; gap: 18px; translate: -50% -50%; color: var(--hb-color-paper); font: 500 clamp(80px, 12vw, 230px)/.9 var(--hb-font-heading); letter-spacing: -.07em; white-space: nowrap; }
.ws-word span { color: var(--hb-color-orange); font: 500 13px/1 var(--hb-font-body); letter-spacing: .18em; }
.ws-tunnel-title { font-size: clamp(30px, 2.6vw, 46px); line-height: 1; letter-spacing: -.05em; }
.ws-tunnel-title span { color: rgba(233, 237, 226, .5); }
.ws-tunnel--words .ws-tunnel-hud { gap: 26px; }
.ws-tunnel--words .ws-tunnel-panel h3 { font-size: clamp(38px, 3.6vw, 64px); line-height: .94; letter-spacing: -.058em; }
.ws-tunnel--words.is-pinned { height: calc(var(--n) * 80svh); }
.ws-tunnel--words:not(.is-pinned) .ws-tunnel-panels { gap: 40px; }

/* Fin : la fenêtre s’ouvre jusqu’au plein écran, le titre passe en clair. */
.ws-finale { --g: 1; position: relative; color: var(--hb-color-ink); background: var(--hb-color-paper); }
.ws-finale-pin { position: relative; height: 100svh; min-height: 600px; overflow: hidden; }
.ws-finale-window { position: absolute; inset: 0; overflow: hidden; background: var(--hb-color-forest); }
.ws-finale-window img { width: 100%; height: 100%; object-fit: cover; }
.ws-finale-window::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 15, 11, .74), rgba(8, 15, 11, 0) 62%), linear-gradient(0deg, rgba(8, 15, 11, .62), rgba(8, 15, 11, 0) 46%); opacity: var(--g); }
.ws-finale-copy { position: absolute; z-index: 2; left: var(--ws-bleed); bottom: clamp(48px, 9svh, 110px); display: grid; justify-items: start; gap: 26px; color: var(--hb-color-ink); }
.ws-finale.is-open .ws-finale-copy { color: var(--hb-color-paper); }
.ws-finale h2 { font-size: clamp(56px, 7vw, 140px); line-height: .88; letter-spacing: -.07em; }
.ws-finale.is-pinned { height: 240svh; }
.ws-finale.is-pinned .ws-finale-pin { position: sticky; top: 0; }

@media (max-width: 1023px) {
  .ws-word { top: 32%; left: 50%; font-size: clamp(56px, 13vw, 110px); }
}
@media (max-width: 760px) {
  .ws-monitor:not(.is-framed) .ws-monitor-screen { inset: 15% var(--ws-bleed) auto; width: auto; }
  .ws-monitor:not(.is-framed) .ws-hero-copy { top: auto; bottom: 74px; width: auto; }
  .ws-monitor .ws-title { font-size: clamp(40px, 11.2vw, 56px); }
  .ws-monitor .ws-lead { margin-top: 20px; font-size: 16px; }
  .ws-monitor .ws-scroll-hint { left: var(--ws-bleed); bottom: 65px; flex-direction: row; gap: 10px; translate: none; font-size: 9px; }
  .ws-monitor .ws-scroll-hint i { width: 22px; height: 1px; }
  .ws-monitor.is-portrait .ws-hero-copy { bottom: clamp(100px, 14svh, 136px); }
  .ws-tunnel-title { font-size: 26px; }
  .ws-tunnel--words .ws-tunnel-panel h3 { font-size: clamp(32px, 9vw, 40px); }
  .ws-finale h2 { font-size: clamp(44px, 12.8vw, 58px); }
  .ws-finale-copy { right: var(--ws-bleed); bottom: 44px; gap: 22px; }
}
@media (max-width: 760px) and (max-height: 650px) {
  .ws-monitor.is-portrait .ws-monitor-shade { background: linear-gradient(0deg, var(--ws-night) calc(var(--ws-photo-bottom, 52%) + 7%), transparent calc(var(--ws-photo-bottom, 52%) + 17%)); }
  .ws-monitor .hb-breadcrumb { margin-bottom: 14px; }
  .ws-monitor .ws-title { margin-top: 14px; }
  .ws-monitor .ws-lead { margin-top: 14px; font-size: 14px; }
  .ws-monitor.is-portrait .ws-hero-copy { bottom: 86px; }
}