/* magineo.com : maquette de l'accueil (V1). Sombre, or, tracés régulateurs. Aucune librairie. */
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --night: #09090a; --coal: #111113; --char: #18181b;
  --ivory: #f1ece4; --ivory-2: #e6dfd3; --ink: #17140f;
  --gold: #e8be6c; --gold-soft: rgba(232, 190, 108, .55); --bronze: #8c5e2e;
  --white: #fff; --soft: rgba(255,255,255,.74); --mute: rgba(255,255,255,.5); --hair: rgba(255,255,255,.14);
  --ink-soft: rgba(23,20,15,.72); --hair-ink: rgba(23,20,15,.14);
  --font: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1440px; --gutter: clamp(20px, 5vw, 88px); --header-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { margin: 0; background: var(--night); color: var(--white); font: 300 1.0625rem/1.75 var(--font); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure, blockquote, ol, ul { margin: 0; padding: 0; }
ul, ol { list-style: none; }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 16px; top: -60px; background: var(--gold); color: var(--night); padding: 8px 14px; z-index: 60; }
.skip:focus-visible { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Titres : début en or gras, suite en light ---------- */
.h { font-weight: 300; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(2.3rem, 5vw, 5.2rem); text-wrap: balance; }
.h b { color: var(--gold); font-weight: 600; }
.h.xl { font-size: clamp(2.4rem, 4.4vw, 4.9rem); line-height: 1.04; letter-spacing: -.035em; max-width: 12em; }
.h.xl b { display: block; }
.on-light { background: var(--ivory); color: var(--ink); }
.on-light .h b, .on-light .num, .on-light .kicker { color: var(--bronze); }
.lead { font-size: clamp(1.06rem, 1.3vw, 1.28rem); color: var(--soft); max-width: 34em; }
.on-light .lead, .on-light p { color: var(--ink-soft); }
.kicker { display: inline-flex; gap: .7em; align-items: center; font-size: .78rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* ---------- Boutons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: .6em; padding: .95em 1.6em; border-radius: 999px; font-size: .92rem; font-weight: 400; border: 1px solid var(--hair); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn::after { content: "→"; transition: transform .3s var(--ease); }
.btn:hover::after { transform: translateX(4px); }
.btn.gold { background: var(--gold); color: var(--night); border-color: var(--gold); }
.btn.gold:hover { background: #f3d18f; }
.btn.line:hover { border-color: var(--gold); color: var(--gold); }
.on-light .btn.line { border-color: var(--hair-ink); }
.on-light .btn.line:hover { border-color: var(--bronze); color: var(--bronze); }
.link { display: inline-flex; gap: .5em; color: var(--gold); font-weight: 400; border-bottom: 1px solid var(--gold-soft); padding-bottom: 2px; }
.on-light .link { color: var(--bronze); border-color: rgba(140,94,46,.4); }

/* ---------- En-tête ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--header-h); transition: background .4s var(--ease), border-color .4s; border-bottom: 1px solid transparent; }
.site-header.solid { background: rgba(9,9,10,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--hair); }
.site-header .wrap { max-width: none; padding-inline: clamp(20px, 2.6vw, 44px); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { width: 168px; color: var(--white); }
.nav { display: flex; gap: clamp(18px, 2.4vw, 38px); font-size: .9rem; font-weight: 400; }
.nav a { color: var(--soft); transition: color .25s; }
.nav a:hover { color: var(--gold); }
.site-header .btn { padding: .7em 1.3em; font-size: .85rem; }
.menu-toggle { display: none; background: none; border: 1px solid var(--hair); color: var(--white); border-radius: 999px; padding: .55em 1.1em; font: inherit; font-size: .85rem; }
@media (max-width: 1100px) { .nav, .site-header .btn { display: none; } .menu-toggle { display: inline-flex; } }
.menu-mobile { position: fixed; inset: var(--header-h) 0 0; background: var(--night); z-index: 39; padding: 40px var(--gutter); display: grid; align-content: start; gap: 18px; font-size: 1.6rem; }
.menu-mobile[hidden] { display: none; }

/* ---------- Tracés régulateurs ---------- */
.trace { position: absolute; pointer-events: none; color: var(--gold); opacity: .55; }
.trace * { vector-effect: non-scaling-stroke; }
.trace path, .trace circle, .trace line { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease); }
.trace .dot { fill: currentColor; stroke: none; opacity: 0; transition: opacity .6s 1.6s; }
.in .trace path, .in .trace circle, .in .trace line, .trace.in path, .trace.in circle, .trace.in line { stroke-dashoffset: 0; }
.in .trace .dot, .trace.in .dot { opacity: 1; }
.on-light .trace { color: var(--bronze); opacity: .4; }

/* ---------- Apparitions ---------- */
.rise { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .1s; } .rise.d2 { transition-delay: .2s; } .rise.d3 { transition-delay: .3s; }
.reveal-img { overflow: hidden; }
.reveal-img img { transform: scale(1.08); transition: transform 1.8s var(--ease); }
.reveal-img.in img { transform: scale(1); }

section { position: relative; }
main, footer { overflow-x: clip; }
.pad { padding-block: clamp(90px, 13vw, 190px); }

/* ---------- 1. Ouverture ---------- */
.hero { min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: calc(var(--header-h) + 40px) 0 clamp(120px, 14vh, 170px); }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,9,10,.94) 22%, rgba(9,9,10,.68) 44%, rgba(9,9,10,0) 64%), linear-gradient(0deg, rgba(9,9,10,.85) 0%, rgba(9,9,10,0) 32%); }
.hero-grid { position: relative; width: 100%; }
.hero .lead { margin: 26px 0 34px; font-size: clamp(1rem, 1.1vw, 1.12rem); max-width: 31em; }
.hero-cards { position: absolute; right: var(--gutter); bottom: calc(-1 * clamp(80px, 11vh, 130px)); display: grid; grid-template-columns: repeat(3, 172px); gap: 8px; }
.hero-card { background: rgba(17,17,19,.66); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--hair); padding: 14px 14px 15px; min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; transition: border-color .3s; }
.hero-card:hover { border-color: var(--gold-soft); }
.hero-card small { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.hero-card span { font-size: .84rem; line-height: 1.35; font-weight: 400; }
.hero-card.gold { background: var(--gold); color: var(--night); border-color: var(--gold); }
.hero-card.gold small { color: var(--night); opacity: .7; }
.scroll-hint { position: absolute; left: var(--gutter); bottom: 26px; width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); }
@media (max-width: 1100px) { .hero-cards { position: relative; right: auto; bottom: auto; margin-top: 48px; grid-template-columns: repeat(3, 1fr); } .hero { padding-bottom: 60px; } }
@media (max-width: 760px) { .hero { align-items: flex-end; } .hero-bg img { object-position: center top; } .hero-bg::after { background: linear-gradient(0deg, var(--night) 30%, rgba(9,9,10,.4) 65%, rgba(9,9,10,.1)); } .hero-cards { grid-template-columns: 1fr; } .hero-card { min-height: 0; } .scroll-hint { display: none; } }

/* ---------- 2. Ce qui change ---------- */
.split-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: end; margin-bottom: clamp(56px, 7vw, 100px); }
@media (max-width: 860px) { .split-head { grid-template-columns: 1fr; } }
.rows { border-top: 1px solid var(--hair-ink); }
.row { display: grid; grid-template-columns: 90px 1fr 1.25fr; gap: 32px; padding: 34px 0; border-bottom: 1px solid var(--hair-ink); align-items: baseline; }
.on-light .row .num { color: var(--bronze); }
.row .num { font-size: .85rem; letter-spacing: .1em; color: var(--gold); }
.row h3 { font-size: clamp(1.35rem, 2.1vw, 1.9rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
@media (max-width: 760px) { .row { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- 3. Fil rouge ---------- */
.manifest { padding-block: clamp(110px, 16vw, 240px); overflow: hidden; }
.manifest-bg { position: absolute; inset: 0; }
.manifest .wrap { position: relative; }
.manifest-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.manifest-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 25%, rgba(9,9,10,.3)); }
.manifest-text { position: relative; font-size: clamp(2.4rem, 6.6vw, 7.6rem); font-weight: 300; letter-spacing: -.045em; line-height: 1; max-width: 13em; }
.manifest-text .w { color: rgba(255,255,255,.16); transition: color .5s var(--ease); }
.manifest-text .w.on { color: var(--white); }
.manifest-text .w.g.on { color: var(--gold); font-weight: 600; }
.manifest p.lead { margin-top: 44px; }
.manifest .link { margin-top: 30px; }

/* ---------- 4. GEO + fenêtre IA ---------- */
.geo-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 110px); align-items: center; }
@media (max-width: 960px) { .geo-grid { grid-template-columns: 1fr; } }
.geo-list { margin-top: 36px; display: grid; gap: 18px; }
.geo-list li { padding-left: 26px; position: relative; color: var(--soft); }
.geo-list li::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; height: 1px; background: var(--gold); }
.geo-list strong { color: var(--white); font-weight: 400; }
.ai { position: relative; background: var(--coal); border: 1px solid var(--hair); border-radius: 18px; padding: 22px; box-shadow: 0 40px 120px rgba(0,0,0,.5); }
.geo { isolation: isolate; }
.ai .trace { z-index: -1; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); opacity: .45; }
.ai-bar { display: flex; gap: 7px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--hair); margin-bottom: 22px; font-size: .78rem; color: var(--mute); }
.ai-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2a2a2e; }
.ai-bar span { margin-left: auto; }
.ai-q { margin-left: auto; max-width: 86%; background: #232327; border-radius: 16px 16px 4px 16px; padding: 14px 18px; font-size: .95rem; min-height: 3.2em; }
.ai-a { margin-top: 20px; font-size: .95rem; color: var(--soft); min-height: 11em; }
.ai-a b { color: var(--white); font-weight: 400; }
.ai-src { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .78rem; padding: 5px 11px; border: 1px solid var(--gold-soft); color: var(--gold); border-radius: 999px; opacity: 0; transition: opacity .6s; }
.ai-src.on { opacity: 1; }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--gold); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ai-note { margin-top: 14px; font-size: .75rem; color: var(--mute); text-align: right; }

/* ---------- 5. Accordéon ---------- */
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 100px); align-items: stretch; }
@media (max-width: 960px) { .acc-grid { grid-template-columns: 1fr; } }
.acc-media { position: relative; min-height: 520px; overflow: hidden; background: var(--ivory-2); }
.acc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .9s var(--ease), transform 1.6s var(--ease); }
.acc-media img.on { opacity: 1; transform: none; }
.acc { border-top: 1px solid var(--hair-ink); margin-top: 44px; }
.acc button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 54px 1fr 24px; gap: 14px; align-items: center; padding: 26px 0; font-size: clamp(1.25rem, 1.9vw, 1.7rem); font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
.acc button .num { font-size: .82rem; color: var(--bronze); letter-spacing: .1em; }
.acc button .pm { position: relative; width: 16px; height: 16px; }
.acc button .pm::before, .acc button .pm::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 1px; background: var(--bronze); transition: transform .4s var(--ease); }
.acc button .pm::after { transform: rotate(90deg); }
.acc button[aria-expanded="true"] .pm::after { transform: rotate(0); }
.acc button:focus-visible { outline: 2px solid var(--bronze); }
.acc-item { border-bottom: 1px solid var(--hair-ink); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding: 0 0 28px 68px; max-width: 34em; }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }

/* ---------- 6. Atelier ---------- */
.atelier { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 6vw, 110px); align-items: center; margin-bottom: clamp(70px, 9vw, 130px); }
.atelier-img { aspect-ratio: 4 / 5; max-width: 100%; position: relative; }
.atelier-img .reveal-img { width: 100%; height: 100%; }
.atelier-img img { width: 100%; height: 100%; object-fit: cover; }
.atelier-img::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid rgba(232,190,108,.45); z-index: -1; }
.atelier-txt p { color: var(--soft); max-width: 32em; margin-top: 22px; }
.atelier-txt .h { margin-bottom: 14px; }
.sign { margin-top: 30px; font-size: .9rem; color: var(--mute); }
.sign b { display: block; color: var(--white); font-weight: 400; font-size: 1.05rem; }
@media (max-width: 860px) { .atelier { grid-template-columns: 1fr; } .atelier-img { max-width: 420px; } }
#atelier { isolation: isolate; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair); }
.stat { padding: 40px clamp(20px, 3vw, 48px) 46px; border-right: 1px solid var(--hair); position: relative; }
.stat:last-child { border-right: 0; }
.stat strong { display: block; font-size: clamp(3rem, 7vw, 7rem); font-weight: 300; letter-spacing: -.05em; line-height: 1; color: var(--gold); }
.stat span { display: block; margin-top: 14px; color: var(--soft); max-width: 16em; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } .stat { border-right: 0; border-bottom: 1px solid var(--hair); } }

/* ---------- 7. Savoir-faire ---------- */
.sf { border-top: 1px solid var(--hair); }
.sf-row { display: grid; grid-template-columns: 90px 1fr 1.25fr; gap: clamp(24px, 4vw, 64px); padding-block: clamp(34px, 4vw, 56px); border-bottom: 1px solid var(--hair); }
.sf-row .num { color: var(--gold); font-size: .85rem; letter-spacing: .1em; padding-top: .7em; }
.sf-row h3 { font-size: clamp(1.8rem, 3.2vw, 3rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.05; }
.sf-row p { color: var(--soft); margin: 18px 0 26px; max-width: 26em; }
.sf-row figure { aspect-ratio: 16 / 10; }
.sf-row figure picture, .sf-row figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .sf-row { grid-template-columns: 1fr; } }

/* ---------- 8. Réalisations ---------- */
.works { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.work { grid-column: span 4; position: relative; display: block; overflow: hidden; background: var(--char); aspect-ratio: 4 / 5; }
.work.wide { grid-column: span 8; aspect-ratio: auto; }
.work.half { grid-column: span 6; aspect-ratio: 16 / 10; }
.work .ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 70% 30%, #26221c, var(--char) 70%); }
.work .ph .trace { position: static; width: 70%; opacity: .35; }
.work picture { position: absolute; inset: 0; }
.work img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.work:hover img, .work:hover .ph { transform: scale(1.04); }
.work .ph { transition: transform 1.4s var(--ease); }
.work .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px; background: linear-gradient(0deg, rgba(9,9,10,.92), rgba(9,9,10,0)); display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.work .cap b { display: block; font-size: 1.25rem; font-weight: 400; letter-spacing: -.01em; }
.work .cap small { color: var(--gold); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.work .cap .arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hair); display: grid; place-items: center; flex: none; transition: background .3s, color .3s; }
.work:hover .arrow { background: var(--gold); color: var(--night); border-color: var(--gold); }
.work .tag { position: absolute; top: 18px; left: 18px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--hair); border-radius: 999px; color: var(--soft); background: rgba(9,9,10,.5); }
@media (max-width: 960px) { .work, .work.wide, .work.half { grid-column: span 12; aspect-ratio: 16 / 11; } }
.works-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 42px; flex-wrap: wrap; color: var(--mute); font-size: .9rem; }

/* ---------- 9. Logothèque ---------- */
.logos-grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--hair-ink); border-left: 1px solid var(--hair-ink); }
.logos-grid li { aspect-ratio: 1; border-right: 1px solid var(--hair-ink); border-bottom: 1px solid var(--hair-ink); display: grid; place-items: center; padding: 18%; transition: background .4s; }
.logos-grid li:hover { background: var(--ivory-2); }
.mono { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; font-weight: 600; letter-spacing: .04em; color: var(--ink); transition: color .3s, border-color .3s; }
.logos-grid li:hover .mono { color: var(--bronze); border-color: var(--bronze); }
.logos-grid li span { display: block; text-align: center; font-size: .72rem; margin-top: 12px; color: var(--ink-soft); }
@media (max-width: 860px) { .logos-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 10. Méthode ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 70px; }
.steps-line { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--hair); }
.steps-line i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold); transition: width 2.6s var(--ease); }
.in .steps-line i { width: 100%; }
.step { position: relative; padding-top: 44px; }
.step::before { content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border: 1px solid var(--gold); border-radius: 50%; background: var(--night); }
.step .num { color: var(--gold); font-size: .82rem; letter-spacing: .1em; }
.step h3 { font-size: 1.6rem; font-weight: 400; letter-spacing: -.02em; margin: 10px 0 12px; }
.step p { color: var(--soft); font-size: .98rem; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } .steps-line { display: none; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- 11. Confiance ---------- */
.quote { font-size: clamp(1.5rem, 2.8vw, 2.6rem); font-weight: 300; letter-spacing: -.025em; line-height: 1.25; max-width: 24em; color: var(--ink); }
.quote-by { margin-top: 22px; font-size: .9rem; color: var(--ink-soft); }
.quote-note { display: inline-block; margin-top: 10px; font-size: .75rem; color: var(--bronze); border: 1px dashed rgba(140,94,46,.5); padding: 3px 10px; border-radius: 999px; }
.marquee { margin-top: clamp(60px, 7vw, 100px); overflow: hidden; border-block: 1px solid var(--hair-ink); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: slide 60s linear infinite; }
.marquee img { height: 110px; width: auto; padding: 18px 34px; filter: grayscale(1) brightness(.2); opacity: .8; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 12. Carnet ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 30px); }
.post { display: block; }
.post .thumb { aspect-ratio: 4 / 3; background: radial-gradient(circle at 30% 70%, #2b241a, var(--char) 70%); position: relative; overflow: hidden; display: grid; place-items: center; }
.post .thumb picture, .post .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.post:hover .thumb img { transform: scale(1.04); }
.post small { display: block; margin-top: 20px; color: var(--gold); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.post h3 { font-size: 1.35rem; font-weight: 400; letter-spacing: -.015em; line-height: 1.3; margin-top: 8px; transition: color .3s; }
.post:hover h3 { color: var(--gold); }
@media (max-width: 860px) { .posts { grid-template-columns: 1fr; } }

/* ---------- 13. Appel final ---------- */
.cta-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 24px); }
.cta-card { position: relative; min-height: 560px; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.cta-card.gold { background: var(--gold); color: var(--night); }
.cta-card.gold .h b { color: var(--night); }
.cta-card.gold p { color: rgba(9,9,10,.75); }
.cta-card.gold .btn { background: var(--night); color: var(--white); border-color: var(--night); }
.cta-card.gold .trace { color: var(--night); opacity: .25; right: -10%; bottom: -20%; width: 80%; }
.cta-card.img picture { position: absolute; inset: 0; }
.cta-card.img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-card.img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,9,10,.9), rgba(9,9,10,.25)); z-index: 1; }
.cta-card > *:not(picture):not(.trace) { position: relative; z-index: 2; }
.cta-card p { margin: 18px 0 30px; max-width: 26em; color: var(--soft); }
@media (max-width: 860px) { .cta-cards { grid-template-columns: 1fr; } .cta-card { min-height: 440px; } }

/* ---------- 14. Pied de page ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .reveal-img img, .trace *, .steps-line i { transition: none !important; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .trace .dot { opacity: 1; }
  .marquee-track { animation: none; }
  .manifest-text .w { color: var(--white); }
}

/* ---------- Pages de contenu ---------- */
.page-hero { min-height: 78svh; display: flex; align-items: flex-end; overflow: hidden; padding: calc(var(--header-h) + 60px) 0 clamp(70px, 10vh, 120px); }
.page-hero .wrap { position: relative; width: 100%; }
.page-hero .lead { margin-top: 24px; font-size: clamp(1rem, 1.1vw, 1.12rem); max-width: 34em; }
.page-hero .hero-bg::after { background: linear-gradient(90deg, rgba(9,9,10,.9) 15%, rgba(9,9,10,.45) 50%, rgba(9,9,10,.1) 75%), linear-gradient(0deg, rgba(9,9,10,.9) 0%, rgba(9,9,10,0) 45%); }

.ia-atelier { overflow: hidden; isolation: isolate; }
.ia-bg { position: absolute; inset: 0; z-index: -1; }
.ia-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 75% center; opacity: .7; }
.ia-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 30%, rgba(9,9,10,.4) 70%, rgba(9,9,10,.2)); }
.ia-txt { max-width: 40em; }
.ia-txt .lead { margin-top: 24px; }
.ia-txt .link { margin-top: 30px; }

.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.tool { background: var(--coal); padding: clamp(26px, 2.4vw, 40px); display: flex; flex-direction: column; gap: 12px; transition: background .4s var(--ease); }
.tool:hover { background: var(--char); }
.tool-mono { width: 46px; height: 46px; border: 1px solid var(--gold-soft); border-radius: 50%; display: grid; place-items: center; color: var(--gold); font-size: 1.05rem; margin-bottom: 18px; }
.tool h3 { font-size: clamp(1.4rem, 1.9vw, 1.8rem); font-weight: 400; letter-spacing: -.02em; }
.tool-role { color: var(--gold); font-size: .92rem; }
.tool-role span { display: block; color: var(--mute); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.tool p:last-child { color: var(--soft); font-size: .95rem; }

.engage { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 4vw, 64px) clamp(28px, 4vw, 64px); }
.eng { border-top: 1px solid var(--hair-ink); padding-top: 22px; }
.eng .num { font-size: .85rem; letter-spacing: .1em; }
.eng h3 { font-size: clamp(1.3rem, 1.8vw, 1.7rem); font-weight: 400; letter-spacing: -.02em; margin: 14px 0 10px; }

.ancrage-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: center; }
.places { position: relative; aspect-ratio: 5 / 3; }
.places .trace { position: absolute; inset: 0; width: 100%; height: 100%; }
.places span { position: absolute; transform: translate(-50%, -50%); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding-left: 16px; }
.places span::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); box-shadow: 0 0 0 6px rgba(232,190,108,.12); }

@media (max-width: 1000px) { .tools { grid-template-columns: 1fr 1fr; } .engage { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .tools, .engage, .ancrage-grid { grid-template-columns: 1fr; }
  .page-hero { min-height: 82svh; }
  .ia-bg img { opacity: .35; }
}
.nav a[aria-current] { color: var(--gold); }

/* Étude de cas */
.case-hero { min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; padding: calc(var(--header-h) + 60px) 0 clamp(60px, 9vh, 110px); }
.case-hero .wrap { position: relative; width: 100%; }
.case-hero .hero-bg::after { background: linear-gradient(180deg, rgba(9,9,10,.6), rgba(9,9,10,0) 18%), linear-gradient(0deg, rgba(9,9,10,.95) 0%, rgba(9,9,10,.55) 38%, rgba(9,9,10,0) 70%), linear-gradient(90deg, rgba(9,9,10,.6), rgba(9,9,10,0) 60%); }
.case-hero .h.xl { max-width: 14em; }
.case-flag { display: inline-block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px dashed var(--gold-soft); border-radius: 999px; padding: 5px 12px; margin-bottom: 26px; }
.case-client { color: var(--soft); margin-bottom: 18px; font-size: .95rem; }
.case-client b { color: var(--white); font-weight: 600; margin-right: 10px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 32px; align-items: center; color: var(--soft); font-size: .9rem; }
.case-meta span::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.case-bref { border-block: 1px solid var(--hair); }
.bref { display: grid; grid-template-columns: repeat(4, 1fr); }
.bref > div { padding: 30px clamp(16px, 2vw, 32px) 32px 0; }
.bref > div + div { border-left: 1px solid var(--hair); padding-left: clamp(16px, 2vw, 32px); }
.bref dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.bref dd { color: var(--soft); font-size: .95rem; }
.enjeux { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.enjeux li { border-top: 1px solid var(--hair); padding-top: 22px; }
.enjeux .num { font-size: .85rem; letter-spacing: .1em; color: var(--gold); }
.enjeux p { margin-top: 14px; font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-weight: 300; letter-spacing: -.01em; line-height: 1.35; }
.ia-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 36px); }
.ai-q.static, .ai-a.static { min-height: 0; }
.ai-a.static b { color: var(--gold); font-weight: 600; }
.verdict { display: inline-flex; margin-top: 20px; font-size: .78rem; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--hair); color: var(--mute); }
.verdict.ok { border-color: var(--gold-soft); color: var(--gold); }
.results { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair); }
.res { padding: 34px clamp(16px, 3vw, 44px) 10px 0; }
.res + .res { border-left: 1px solid var(--hair); padding-left: clamp(16px, 3vw, 44px); }
.res-label { color: var(--soft); font-size: .95rem; }
.res-nums { display: flex; align-items: baseline; gap: 18px; margin-top: 18px; }
.res-nums s { color: var(--mute); font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 300; text-decoration-thickness: 1px; }
.res-nums strong { color: var(--gold); font-size: clamp(3rem, 6vw, 6rem); font-weight: 300; letter-spacing: -.05em; line-height: 1; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 24px); }
.gallery figure { aspect-ratio: 16 / 10; overflow: hidden; }
.gallery .g-wide { grid-column: span 2; aspect-ratio: 16 / 8; }
.gallery picture, .gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-sec .ai-note { margin-top: 18px; }
@media (max-width: 860px) {
  .bref { grid-template-columns: 1fr 1fr; } .bref > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .enjeux, .ia-compare, .results { grid-template-columns: 1fr; }
  .res + .res { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); }
  .gallery { grid-template-columns: 1fr; } .gallery .g-wide { grid-column: auto; aspect-ratio: 16 / 10; }
}

/* Équipe */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.mate { background: var(--coal); padding: clamp(22px, 2vw, 32px); display: flex; flex-direction: column; gap: 10px; transition: background .4s var(--ease); }
.mate:hover { background: var(--char); }
.mate-pic { aspect-ratio: 1; overflow: hidden; margin-bottom: 14px; background: radial-gradient(circle at 70% 30%, #2a251d, var(--char) 70%); display: grid; place-items: center; }
.mate-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(.25); }
.mate-pic span { font-size: clamp(3rem, 5vw, 4.6rem); font-weight: 300; color: var(--gold); opacity: .8; }
.mate.ia .mate-pic { background: radial-gradient(circle at 50% 50%, rgba(232,190,108,.14), var(--night) 68%); }
.mate.ia .mate-pic span { width: 52%; aspect-ratio: 1; border: 1px solid var(--gold-soft); border-radius: 50%; display: grid; place-items: center; font-size: clamp(2rem, 3vw, 2.8rem); }
.mate h3 { font-size: clamp(1.35rem, 1.7vw, 1.65rem); font-weight: 400; letter-spacing: -.02em; }
.mate p:last-child { color: var(--soft); font-size: .93rem; }
@media (max-width: 1000px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .team { grid-template-columns: 1fr; } }
.mate.join { background: var(--gold); color: var(--night); justify-content: flex-end; }
.mate.join:hover { background: #f0c97a; }
.mate.join p { color: rgba(9,9,10,.75) !important; }
.mate.join .btn { align-self: flex-start; margin-top: 14px; background: var(--night); color: var(--white); }

/* Savoir-faire */
.sf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 24px); }
.sf-card { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--char); }
.sf-card figure, .sf-card picture { position: absolute; inset: 0; }
.sf-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.sf-card:hover img { transform: scale(1.04); }
.sf-card-txt { position: absolute; inset: auto 0 0 0; padding: clamp(22px, 2.6vw, 40px); background: linear-gradient(0deg, rgba(9,9,10,.94), rgba(9,9,10,0)); display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: end; }
.sf-card-txt .num { grid-column: 1 / -1; color: var(--gold); font-size: .82rem; letter-spacing: .1em; }
.sf-card-txt h2 { font-size: clamp(1.5rem, 2.4vw, 2.3rem); font-weight: 400; letter-spacing: -.025em; margin-top: 8px; }
.sf-card-txt p { grid-column: 1; color: var(--soft); margin-top: 6px; }
.sf-card-txt .arrow { grid-column: 2; grid-row: 2 / 4; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hair); display: grid; place-items: center; transition: background .3s, color .3s; }
.sf-card:hover .arrow { background: var(--gold); color: var(--night); border-color: var(--gold); }
.sector-links { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 24px); }
.sector { border: 1px solid var(--hair-ink); padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; gap: 14px; transition: border-color .3s, background .3s; }
.sector:hover { border-color: var(--bronze); background: rgba(140,94,46,.05); }
.sector h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 400; letter-spacing: -.02em; }
.sector .link { align-self: flex-start; margin-top: 8px; }
.inclus-grid, .faq-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
.inclus { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
.inclus li { padding: 18px 0 18px 30px; border-bottom: 1px solid var(--hair); position: relative; color: var(--soft); }
.inclus li::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--gold); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq details:first-child { border-top: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 400; }
.faq summary::-webkit-details-marker { display: none; }
.faq .pm { position: relative; width: 14px; height: 14px; flex: none; margin-top: 6px; }
.faq .pm::before, .faq .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--gold); transition: transform .3s; }
.faq .pm::after { transform: rotate(90deg); }
.faq details[open] .pm::after { transform: rotate(0); }
.faq details p { color: var(--soft); padding-bottom: 26px; max-width: 36em; }
@media (max-width: 860px) {
  .sf-cards, .sector-links, .inclus-grid, .faq-grid { grid-template-columns: 1fr; }
  .sf-card { aspect-ratio: 4 / 5; }
  .inclus { grid-template-columns: 1fr; }
}

/* Web de demain, carnet, article, contact */
.visitors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.visitors .mate-pic { aspect-ratio: 16 / 9; }
.page-hero.small { min-height: 0; padding-top: calc(var(--header-h) + clamp(80px, 12vw, 170px)); padding-bottom: clamp(60px, 8vw, 110px); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.chip { font: inherit; font-size: .88rem; color: var(--soft); background: none; border: 1px solid var(--hair); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: border-color .3s, color .3s; }
.chip:hover, .chip.on { border-color: var(--gold); color: var(--gold); }
.feat { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 4vw, 70px); align-items: center; }
.feat figure { aspect-ratio: 16 / 10; overflow: hidden; }
.feat picture, .feat img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feat small { color: var(--gold); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.feat h2 { font-size: clamp(1.9rem, 3.4vw, 3.3rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.1; margin: 16px 0 20px; transition: color .3s; }
.feat:hover h2 { color: var(--gold); }
.feat p { color: var(--soft); margin-bottom: 26px; }
.linkedin { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; border-block: 1px solid var(--hair); padding: clamp(36px, 4vw, 56px) 0; }
.linkedin .h { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.linkedin p { color: var(--soft); margin-top: 12px; max-width: 36em; }
.art-head { padding: calc(var(--header-h) + clamp(70px, 9vw, 130px)) 0 clamp(40px, 5vw, 70px); }
.art-wrap { max-width: 820px; }
.art-meta { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
.art-meta a { border-bottom: 1px solid var(--gold-soft); }
.art-head .h { font-size: clamp(2.3rem, 4.6vw, 4.4rem); }
.art-chapo { font-size: clamp(1.15rem, 1.5vw, 1.4rem); color: var(--soft); font-weight: 300; margin-top: 28px; line-height: 1.55; }
.art-author { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.art-author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.art-author b { display: block; font-weight: 400; }
.art-author span { font-size: .85rem; color: var(--mute); }
.art-visual { aspect-ratio: 21 / 9; overflow: hidden; }
.art-visual picture, .art-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-body { padding-block: clamp(50px, 6vw, 90px); }
.art-body h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 400; letter-spacing: -.02em; margin: 54px 0 16px; }
.art-body p { color: var(--soft); font-size: 1.08rem; line-height: 1.8; }
.art-body blockquote { margin: 50px 0; padding-left: 28px; border-left: 2px solid var(--gold); font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 300; line-height: 1.35; letter-spacing: -.02em; }
.art-note { font-size: .8rem !important; color: var(--bronze) !important; border: 1px dashed rgba(140,94,46,.6); display: inline-block; padding: 3px 12px; border-radius: 999px; }
.bref-box { margin-top: 56px; background: var(--coal); border: 1px solid var(--hair); padding: clamp(24px, 3vw, 40px); }
.bref-box h3 { color: var(--gold); font-weight: 600; font-size: 1.1rem; margin-bottom: 14px; }
.bref-box li { color: var(--soft); padding: 8px 0 8px 24px; position: relative; }
.bref-box li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 12px; height: 1px; background: var(--gold); }
.art-links { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 44px; }
.art-share { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--hair); color: var(--soft); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
.contact-info dl > div { padding: 20px 0; border-bottom: 1px solid var(--hair); }
.contact-info dl > div:first-child { border-top: 1px solid var(--hair); }
.contact-info dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.contact-info dd { font-size: 1.1rem; color: var(--soft); }
.contact-info dd a:hover { color: var(--gold); }
.next-title { font-size: 1.3rem; font-weight: 400; margin: 48px 0 18px; }
.next li { display: flex; gap: 16px; padding: 10px 0; color: var(--soft); }
.next span { color: var(--gold); font-size: .82rem; letter-spacing: .1em; padding-top: 3px; }
.form { background: var(--coal); border: 1px solid var(--hair); padding: clamp(26px, 3.4vw, 50px); display: grid; gap: 20px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form label { display: grid; gap: 8px; font-size: .88rem; color: var(--soft); }
.form label em { font-style: normal; color: var(--mute); }
.form input:not([type=checkbox]), .form textarea { font: inherit; font-size: 1rem; color: var(--white); background: var(--night); border: 1px solid var(--hair); border-radius: 0; padding: 14px 16px; transition: border-color .3s; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--gold); }
.form .check { display: flex; align-items: center; gap: 12px; }
.form .check input { width: 18px; height: 18px; accent-color: var(--gold); }
.form .btn { justify-self: start; border: 0; cursor: pointer; font: inherit; }
.form-legal { font-size: .78rem; color: var(--mute); }
.form-ok { color: var(--gold); }
.sector-links.dark .sector { border-color: var(--hair); }
.sector-links.dark .sector p { color: var(--soft); }
@media (max-width: 860px) {
  .visitors, .feat, .contact-grid, .f2 { grid-template-columns: 1fr; }
  .art-visual { aspect-ratio: 4 / 3; }
}

.sector-links.dark .sector:hover { border-color: var(--gold-soft); background: rgba(232,190,108,.04); }

/* Logos des sites dédiés */
.sbrand { display: inline-flex; align-items: center; gap: 12px; }
.sbrand .picto { width: 20px; height: auto; flex: none; }
.sbrand .name { display: grid; line-height: 1.15; }
.sbrand .name span:first-child { font-size: .98rem; font-weight: 400; color: var(--white); }
.sbrand .name span:last-child { font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.sector .sbrand { margin-bottom: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--hair); align-self: stretch; }

/* Haut de page */
.to-top { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 40; display: flex; align-items: center; gap: 12px; color: var(--white); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s; }
.to-top.on { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 52px; height: 52px; flex: none; order: 2; border-radius: 50%; background: rgba(9,9,10,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s; }
.to-top circle { fill: none; stroke-width: 1; }
.to-top .ring { stroke: var(--hair); }
.to-top .prog { stroke: var(--gold); stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: center; }
.to-top path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.to-top-label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .3s var(--ease); pointer-events: none; }
.to-top:hover svg, .to-top:focus-visible svg { background: var(--gold); }
.to-top:hover path, .to-top:focus-visible path { stroke: var(--night); transform: translateY(-2px); }
.to-top:hover .to-top-label, .to-top:focus-visible .to-top-label { opacity: 1; transform: none; }
.menu-open .to-top { display: none; }
@media (hover: none) { .to-top-label { display: none; } }

/* Accueil réorganisé : bandeau « à la une » sous l'ouverture, savoir-faire sur fond clair */
.hero { min-height: calc(100svh - 72px); padding-bottom: clamp(70px, 9vh, 110px); }
.hero-band { border-block: 1px solid var(--hair); background: var(--coal); }
.hero-band .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.hero-band a { display: flex; align-items: baseline; gap: 16px; padding: 22px clamp(14px, 2vw, 28px); font-size: .9rem; color: var(--soft); transition: color .3s, background .3s; }
.hero-band a + a { border-left: 1px solid var(--hair); }
.hero-band a:first-child { padding-left: 0; }
.hero-band small { flex: none; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.hero-band a:hover { color: var(--white); }
.hero-band a.gold span { color: var(--gold); }
.hero-band a.gold:hover span { color: var(--white); }
@media (max-width: 900px) { .hero-band .wrap { grid-template-columns: 1fr; } .hero-band a { padding: 16px 0; } .hero-band a + a { border-left: 0; border-top: 1px solid var(--hair); } }
.on-light .sf { border-top-color: var(--hair-ink); }
.on-light .sf-row { border-bottom-color: var(--hair-ink); }
.on-light .sf-row .num { color: var(--bronze); }
.on-light .sf-row p { color: var(--ink-soft); }
.on-light .link { color: var(--bronze); border-bottom-color: rgba(140, 94, 46, .45); }

/* Mobile : le visuel au-dessus, le texte dessous, pour garder le visage et le geste visibles */
@media (max-width: 760px) {
  .hero { display: block; min-height: 0; padding: 0 0 56px; }
  .hero-bg { position: relative; height: min(122vw, 64svh); }
  .hero-bg img { object-position: center 30%; }
  .hero-bg::after { background: linear-gradient(0deg, var(--night) 0%, rgba(9,9,10,0) 38%), linear-gradient(180deg, rgba(9,9,10,.6) 0%, rgba(9,9,10,0) 20%); }
  .hero-grid { margin-top: -64px; }
  /* pages intérieures : même logique, visuel mobile 4:5 entier au-dessus du texte */
  .page-hero:not(.small), .case-hero { display: block; min-height: 0; padding: 0 0 56px; }
  .page-hero:not(.small) .hero-bg, .case-hero .hero-bg { height: auto; aspect-ratio: 4 / 5; max-height: 72svh; }
  .page-hero:not(.small) .hero-bg img, .case-hero .hero-bg img { object-position: center; }
  .page-hero:not(.small) .wrap, .case-hero .wrap { margin-top: -40px; }
}

/* Équipe : objets dessinés pour les IA */
.mate.ia .mate-pic { background: #f1e3c8; }
.mate.ia .mate-pic img { object-position: center; filter: brightness(.93); }

/* Accueil : la forge animée (calques posés par site.js sur ordinateur, image fixe sinon) */
.forge { position: absolute; inset: -3%; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.forge.on { opacity: 1; }
.forge > * { position: absolute; inset: 0; will-change: transform; }
.forge img { width: 100%; height: 100%; object-fit: cover; object-position: 68.87% 50%; }
.forge .f-reflet img { mix-blend-mode: screen; animation: forge-breath 6.5s ease-in-out infinite; }
.forge .f-reflet { mix-blend-mode: screen; }
.forge .f-glow { background: radial-gradient(circle at var(--gx, 63%) var(--gy, 62%), rgba(255, 214, 150, .16), rgba(255, 214, 150, 0) 22%); mix-blend-mode: soft-light; transition: opacity .6s; }
.forge canvas { width: 100%; height: 100%; }
@keyframes forge-breath { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@media (max-width: 760px), (prefers-reduced-motion: reduce) { .forge { display: none; } }
.forge .f-lines { position: absolute; max-width: none; max-height: none; overflow: visible; mix-blend-mode: screen; }
.forge .f-lines path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; animation: forge-line 13s cubic-bezier(.4, 0, .2, 1) infinite; }
.forge .f-lines .core { stroke: #ffe2a6; stroke-width: 3.2; }
.forge .f-lines .halo { stroke: #f2b65a; stroke-width: 16; filter: url(#f-blur); }
@keyframes forge-line {
  0% { stroke-dashoffset: 1; opacity: 0; }
  2% { opacity: 1; }
  14% { stroke-dashoffset: 0; opacity: 1; }
  40% { stroke-dashoffset: 0; opacity: .75; }
  58% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.legal-body a { color: var(--gold); }
.legal-body { padding-top: 0; }
.legal-body h2:first-child { margin-top: 0; }
.legal-maj { margin-top: 54px; font-size: .85rem !important; color: var(--mute) !important; }

/* MF:START footer commun (généré, ne pas éditer ici : magineo-com/outils/footer_commun.css) */
.mf { --mf-bg: #0c0c0d; --mf-accent: #e8be6c; --mf-ink: #fff; --mf-soft: rgba(255,255,255,.74); --mf-mute: rgba(255,255,255,.5); --mf-hair: rgba(255,255,255,.13);
  position: relative; overflow: hidden; background: var(--mf-bg); color: var(--mf-soft); font-size: .95rem; line-height: 1.6; border-top: 1px solid var(--mf-hair); }
.mf a { color: inherit; text-decoration: none; transition: color .25s ease, background-color .25s ease, border-color .25s ease, gap .25s ease; }
.mf ul { list-style: none; margin: 0; padding: 0; }
.mf h2 { margin: 0 0 22px; font-size: .7rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--mf-accent); }
.mf p { margin: 0; }

/* Ouverture : grande phrase + carte d'Eric */
.mf-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: end; padding-block: clamp(84px, 10vw, 150px) clamp(60px, 7vw, 100px); border-bottom: 1px solid var(--mf-hair); }
.mf-statement { font-size: clamp(2.1rem, 4.6vw, 4.1rem); font-weight: 300; line-height: 1.06; letter-spacing: -.025em; color: var(--mf-ink); max-width: 13.5em; text-wrap: balance; }
.mf-statement b { font-weight: 600; }
.mf-nw { white-space: nowrap; }
.mf-btn { display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(28px, 3vw, 40px); padding: 15px 26px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; color: var(--mf-ink); font-size: .95rem; }
.mf-btn:hover, .mf-btn:focus-visible { background: var(--mf-accent); border-color: var(--mf-accent); color: #111; gap: 20px; }
.mf-card { position: relative; display: grid; gap: 6px; justify-items: start; padding: clamp(28px, 3vw, 40px); border: 1px solid var(--mf-hair); border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012)); }
.mf-card::before { content: ""; position: absolute; top: -1px; left: clamp(28px, 3vw, 40px); width: 54px; height: 2px; background: var(--mf-accent); }
.mf-who { display: grid; gap: 2px; margin-bottom: 18px !important; }
.mf-who b { color: var(--mf-ink); font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; }
.mf-who span { color: var(--mf-mute); font-size: .85rem; }
.mf-tel { color: var(--mf-ink) !important; font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 300; letter-spacing: .02em; line-height: 1.2; }
.mf-mail, .mf-in { color: var(--mf-soft); border-bottom: 1px solid transparent; }
.mf-tel:hover, .mf-mail:hover, .mf-in:hover { color: var(--mf-accent) !important; }

/* Colonnes */
.mf-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, 1.35fr) minmax(0, 1.1fr); gap: clamp(36px, 4vw, 64px); padding-block: clamp(56px, 6vw, 84px) 0; }
.mf-brand { display: grid; gap: 18px; align-content: start; }
.mf-brand p { max-width: 21em; }
.mf-sig { display: inline-flex; align-items: center; gap: 14px; color: var(--mf-ink) !important; }
.mf-sig img { width: 24px; height: auto; }
.mf-sig span { display: grid; line-height: 1.2; }
.mf-sig b { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; }
.mf-sig small { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mf-mute); margin-top: 4px; }
.mf-sig svg { width: 150px; height: auto; display: block; }
.mf-col ul { display: grid; gap: 11px; }
.mf-col li a:hover { color: var(--mf-ink); }
.mf-site { display: flex; align-items: center; gap: 14px; padding: 2px 0; }
.mf-site img { width: 15px; height: auto; flex: none; opacity: .95; }
.mf-site span { display: grid; line-height: 1.3; }
.mf-site b { font-weight: 400; color: var(--mf-ink); }
.mf-site small { font-size: .8rem; color: var(--mf-mute); }
.mf-site.is-here small { color: var(--mf-accent); }
a.mf-site:hover b { color: var(--mf-accent); }
.mf-offer { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; color: var(--mf-accent) !important; }
.mf-offer:hover { gap: 16px; }

/* Le grand Magineo */
.mf-word { margin-top: clamp(64px, 8vw, 120px); color: var(--mf-ink); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.16)); mask-image: linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.16)); }
.mf-word svg { display: block; width: 100%; height: auto; max-width: none; }

/* Ligne légale */
.mf-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: clamp(18px, 2vw, 28px); padding-block: 22px 30px; border-top: 1px solid var(--mf-hair); font-size: .78rem; letter-spacing: .04em; color: var(--mf-mute); }
.mf-legal a + a { margin-left: 24px; }
.mf-legal a:hover { color: var(--mf-ink); }
.mf a:focus-visible { outline: 2px solid var(--mf-accent); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 1040px) { .mf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .mf-top { grid-template-columns: 1fr; align-items: start; }
  .mf-cols { grid-template-columns: 1fr; gap: 44px; }
  .mf-legal { flex-direction: column; }
}
/* Bouton haut de page + progression de lecture (industrie, mairie) */
.mf-totop { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 80; width: 52px; height: 52px; color: #fff; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s, transform .4s, visibility .4s; }
.mf-totop.on { opacity: 1; visibility: visible; transform: none; }
.mf-totop svg { width: 52px; height: 52px; display: block; border-radius: 50%; background: rgba(12,12,13,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .3s; }
.mf-totop circle { fill: none; stroke-width: 1.4; }
.mf-totop .ring { stroke: rgba(255,255,255,.18); }
.mf-totop .prog { stroke: var(--tt); stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: center; }
.mf-totop path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.mf-totop:hover svg, .mf-totop:focus-visible svg { background: var(--tt); }
.mf-totop:hover path, .mf-totop:focus-visible path { stroke: #111; transform: translateY(-2px); }
@media print { .mf-totop { display: none; } }

.mf-magineo { --mf-bg: var(--night); --mf-accent: var(--gold); }
.mf-logo { width: 150px; height: auto; color: var(--white); }
/* MF:END */

/* Équipe mixte : aperçu sur l'accueil (1.11.0) */
.team-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(12px, 1.4vw, 22px); margin-top: clamp(40px, 5vw, 70px); }
.mm { display: flex; flex-direction: column; gap: 4px; }
.mm .mate-pic { margin-bottom: 10px; }
.mm .mate-pic span { font-size: clamp(2rem, 3vw, 3rem); }
.mm b { font-weight: 400; font-size: 1.05rem; }
.mm small { color: var(--mute); font-size: .8rem; line-height: 1.35; }
@media (max-width: 1000px) { .team-mini { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .team-mini { grid-template-columns: repeat(3, 1fr); } }
/* Contact : portrait d'Eric dans l'en-tête */
.contact-hero-grid { display: grid; grid-template-columns: 1fr minmax(200px, 300px); gap: clamp(36px, 6vw, 110px); align-items: end; }
.contact-portrait { margin: 0; }
.contact-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.contact-portrait figcaption { margin-top: 14px; font-size: .88rem; color: var(--mute); }
.contact-portrait figcaption b { display: block; color: var(--white); font-weight: 400; font-size: 1.02rem; }
@media (max-width: 760px) { .contact-hero-grid { grid-template-columns: 1fr; } .contact-portrait { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; } .contact-portrait figcaption { margin: 0; } }
.on-light .atelier-txt p { color: var(--ink-soft); }
.on-light .sign { color: var(--ink-soft); }
.on-light .sign b { color: var(--ink); }
.interlocuteur .atelier-txt p:first-child { margin-top: 0; }

/* Ils me font confiance : grille de logos sur 3 rangées (1.12.0) */
.logo-grid { list-style: none; margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; border-top: 1px solid var(--hair-ink); }
.logo-grid li { flex: 0 0 20%; display: grid; place-items: center; padding: clamp(14px, 2vw, 26px) clamp(10px, 1.6vw, 24px); border-bottom: 1px solid var(--hair-ink); }
.logo-grid img { height: clamp(64px, 6.4vw, 96px); width: 100%; object-fit: contain; filter: grayscale(1) brightness(.2); opacity: .8; transition: opacity .4s var(--ease); }
.logo-grid li:hover img { opacity: 1; }
@media (max-width: 760px) { .logo-grid li { flex-basis: 33.333%; } }

/* ===== 1.13.0 ===== */
/* Hero de l'accueil : 3 cartes flottantes à l'extrémité droite */
.hero-band { display: none; }
.hero { position: relative; }
.hero-cards { position: absolute; right: var(--gutter); bottom: clamp(36px, 6vh, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 224px)); gap: 18px; z-index: 2; }
.hero-card { position: relative; background: rgba(14,14,16,.52); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border: 1px solid rgba(255,255,255,.09); border-radius: 3px; padding: 20px 20px 22px; min-height: 150px; gap: 14px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.8); transition: border-color .4s var(--ease), transform .5s var(--ease), background .4s var(--ease); }
.hero-card:hover { border-color: var(--gold-soft); background: rgba(14,14,16,.7); transform: translateY(-4px); }
.hero-card span { font-size: .9rem; line-height: 1.45; padding-right: 18px; }
.hero-card i { position: absolute; right: 18px; bottom: 18px; font-style: normal; font-size: .9rem; color: var(--gold); transition: transform .4s var(--ease); }
.hero-card:hover i { transform: translateX(4px); }
.hero-card.gold { background: rgba(232,190,108,.92); }
.hero-card.gold:hover { background: var(--gold); }
.hero-card.gold i { color: var(--night); }
.hero-card.rise.in { animation: hc-float 7s ease-in-out 1.4s infinite; }
.hero-card.rise.in:nth-child(2) { animation-delay: 2.6s; }
.hero-card.rise.in:nth-child(3) { animation-delay: 3.8s; }
.hero-card.rise.in:hover { animation-play-state: paused; }
@keyframes hc-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (max-width: 1100px) { .hero-cards { position: relative; right: auto; bottom: auto; margin: 44px var(--gutter) 0; grid-template-columns: repeat(3, 1fr); } .hero { flex-wrap: wrap; } }
@media (max-width: 760px) { .hero-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; } .hero-card { min-height: 0; padding: 16px 44px 16px 18px; } .hero-card i { bottom: auto; top: 50%; translate: 0 -50%; } }

/* Incitation au défilement : un filet qui s'illumine vers le bas */
.scroll-hint { display: none; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; width: 30px; height: 64px; display: grid; place-items: center; z-index: 3; cursor: pointer; background: none; border: 0; padding: 0; }
.scroll-cue::before { content: ""; width: 1px; height: 100%; background: rgba(255,255,255,.14); }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 22px; margin-left: -.5px; background: linear-gradient(transparent, var(--gold) 70%, #fff4d6); box-shadow: 0 0 8px rgba(232,190,108,.75); opacity: 0; animation: cue 2.8s cubic-bezier(.6, 0, .3, 1) 1.2s infinite; }
.scroll-cue:hover::before { background: rgba(232,190,108,.35); }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(42px); opacity: 0; } }
.hero .scroll-cue { left: var(--gutter); translate: none; }
@media (max-width: 1100px) { .hero .scroll-cue { display: none; } }
@media (max-width: 760px) { .scroll-cue { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue::after { animation: none; opacity: .8; } .hero-card.rise.in { animation: none; } }

/* Journal : rail qui s'amorce sur la droite, flèches + glisser */
#carnet .split-head { margin-bottom: clamp(40px, 5vw, 70px); }
.rail-tools { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.arrows { display: flex; gap: 10px; }
.arrow-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--hair); background: transparent; color: var(--white); font: 400 1.15rem/1 var(--font, inherit); cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s; }
.arrow-btn:hover { background: var(--gold); color: var(--night); border-color: var(--gold); }
.arrow-btn:disabled { opacity: .3; cursor: default; background: transparent; color: var(--white); border-color: var(--hair); }
.rail { --edge: max(var(--gutter), calc((100vw - var(--wrap, 1320px)) / 2 + var(--gutter))); display: flex; gap: clamp(22px, 2.6vw, 40px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: 0 var(--edge) 10px; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.rail::-webkit-scrollbar { display: none; }
.rail.drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.rail.drag .post { pointer-events: none; }
.rail .post { flex: 0 0 min(440px, 78vw); scroll-snap-align: start; }
.rail .post:nth-child(even) { margin-top: 56px; }
.rail img { -webkit-user-drag: none; user-drag: none; }
.rail:focus-visible { outline: 1px solid var(--gold-soft); outline-offset: 6px; }
@media (max-width: 860px) { .rail .post:nth-child(even) { margin-top: 0; } }

/* Liens sous une carte de l'équipe (1.13.3) */
.mate p.mate-links { display: flex; gap: 10px; margin-top: auto; padding-top: 8px; }
.mate-links a { width: 36px; height: 36px; border: 1px solid var(--hair); border-radius: 50%; display: grid; place-items: center; color: var(--soft); transition: color .3s, border-color .3s, background .3s; }
.mate-links a:hover { color: var(--night); background: var(--gold); border-color: var(--gold); }
.mate-links svg { width: 17px; height: 17px; }
.mate .tool-role + p { color: var(--soft); font-size: .93rem; }

/* ===== 1.14.0 ===== */
/* Logo : au survol, le picto se balance et les lettres passent une vague dorée */
.logo .lg-picto { transform-box: fill-box; transform-origin: 50% 100%; }
.logo .lg-l { transform-box: fill-box; transform-origin: 50% 100%; }
a:hover > .logo .lg-picto, a:focus-visible > .logo .lg-picto { animation: lg-swing .9s cubic-bezier(.3, 0, .2, 1); }
a:hover > .logo .lg-l, a:focus-visible > .logo .lg-l { animation: lg-wave .7s cubic-bezier(.3, 0, .2, 1) calc(var(--i) * 55ms + 80ms) both; }
@keyframes lg-swing { 0% { transform: none; } 25% { transform: rotate(-9deg); } 55% { transform: rotate(6deg); } 80% { transform: rotate(-2deg); } 100% { transform: none; } }
@keyframes lg-wave { 0%, 100% { transform: none; fill: currentColor; } 45% { transform: translateY(-14%); fill: var(--gold); } }

/* Incitation au défilement, version franche */
.scroll-cue { width: auto; height: auto; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--gold); transition: opacity .5s var(--ease), translate .5s var(--ease); }
.scroll-cue::before, .scroll-cue::after { content: none; }
.scroll-cue.gone { opacity: 0; pointer-events: none; }
.cue-label { font-size: .66rem; letter-spacing: .32em; text-transform: uppercase; padding-left: .32em; color: rgba(255,255,255,.75); transition: color .3s; }
.cue-line { position: relative; width: 1px; height: 86px; background: linear-gradient(rgba(232,190,108,.15), rgba(232,190,108,.45)); overflow: visible; }
.cue-line i { position: absolute; left: -1px; top: 0; width: 3px; height: 30px; border-radius: 3px; background: linear-gradient(transparent, var(--gold) 55%, #fff6dc); box-shadow: 0 0 10px 1px rgba(232,190,108,.9), 0 0 26px 4px rgba(232,190,108,.35); animation: cue-drop 2.2s cubic-bezier(.6, 0, .25, 1) .6s infinite; opacity: 0; }
.cue-chev { width: 16px; height: 10px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: cue-chev 2.2s cubic-bezier(.6, 0, .25, 1) .6s infinite; }
.scroll-cue:hover .cue-label { color: var(--gold); }
.scroll-cue:hover .cue-line { background: var(--gold-soft); }
@keyframes cue-drop { 0% { transform: translateY(-30px); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(86px); opacity: 0; } }
@keyframes cue-chev { 0%, 60% { transform: none; opacity: .45; } 78% { transform: translateY(5px); opacity: 1; } 100% { transform: none; opacity: .45; } }
.hero .scroll-cue { left: var(--gutter); translate: none; align-items: flex-start; }
.hero .scroll-cue .cue-line { margin-left: 7px; }
.hero .scroll-cue .cue-chev { margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .cue-line i { animation: none; opacity: 1; top: 40px; } .cue-chev { animation: none; } }

/* Loader : une fois par visite, le picto se dessine */
.loader { display: none; }
.mg-loading .loader { display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; background: var(--night); animation: loader-safety .6s ease 5.6s forwards; }
.mg-loading body { overflow: hidden; }
.mg-loaded .loader { opacity: 0; visibility: hidden; transition: opacity .7s cubic-bezier(.65, 0, .35, 1), visibility .7s; }
.mg-loaded .loader .mgp { transform: scale(1.12); opacity: 0; transition: transform .7s cubic-bezier(.65, 0, .35, 1), opacity .5s; }
.mgp { width: 76px; height: 76px; overflow: visible; }
.mgp-tile { fill: #fff; transform-box: fill-box; transform-origin: center; animation: mgp-tile .6s cubic-bezier(.16, 1, .3, 1) .1s both; }
.mgp-leaf { fill: var(--night); transform-box: fill-box; transform-origin: 50% 0; animation: mgp-leaf .9s cubic-bezier(.16, 1, .3, 1) .3s both; }
.mgp-gear { fill: #fff; transform-box: fill-box; transform-origin: center; animation: mgp-gear 1s cubic-bezier(.16, 1, .3, 1) .75s both; }
.mgp-slit { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mgp-slit .5s cubic-bezier(.65, 0, .35, 1) 1.35s forwards; }
@keyframes mgp-tile { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes mgp-leaf { from { opacity: 0; transform: translateY(12%) scaleY(.85); } to { opacity: 1; transform: none; } }
@keyframes mgp-gear { from { opacity: 0; transform: rotate(-160deg) scale(.4); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes mgp-slit { to { stroke-dashoffset: 0; } }
@keyframes loader-safety { to { opacity: 0; visibility: hidden; } }
.mg-loading:not(.mg-loaded) .hero .rise { transition-delay: 2s; }
.mg-loading:not(.mg-loaded) .hero .rise.d1 { transition-delay: 2s; }
.mg-loading:not(.mg-loaded) .hero .rise.d2 { transition-delay: 2.1s; }
.mg-loading:not(.mg-loaded) .hero .rise.d3 { transition-delay: 2.2s; }

/* 1.15.0 : le picto animé revient pour le message envoyé et la page 404 */
.form-ok:not([hidden]) { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.form-ok .mgp { width: 52px; height: 52px; flex: none; }
.picto-404 { margin-bottom: clamp(28px, 4vw, 48px); }
.picto-404 .mgp { width: clamp(64px, 7vw, 92px); height: auto; }

/* 1.15.1 : visuels du savoir-faire cliquables sur l'accueil */
.sf-pic { display: block; cursor: pointer; }
.sf-pic img { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.sf-row:hover .sf-pic img { transform: scale(1.04); }
.sf-pic figure { overflow: hidden; }

/* 1.16.0 : logothèque, silhouettes encre #17140f au repos, couleurs d'origine sur fond encre au survol */
.ink-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.logos-grid li:has(img) { transition: background .5s; }
.logos-grid li a { position: relative; display: block; width: 100%; height: 100%; }
.logos-grid li img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s; }
.logos-grid .lt-ink { filter: url(#mg-ink); }
.logos-grid .raster .lt-ink { filter: grayscale(1) contrast(1.1); }
.logos-grid .lt-col { opacity: 0; }
.logos-grid li:has(img):hover, .logos-grid li:has(a:focus-visible) { background: #17140f; }
.logos-grid li:hover .lt-ink, .logos-grid li a:focus-visible .lt-ink { opacity: 0; }
.logos-grid li:hover .lt-col, .logos-grid li a:focus-visible .lt-col { opacity: 1; }
/* logos des partenaires : encre #17140f, sans survol */
.logo-grid img { filter: url(#mg-ink); opacity: 1; transition: none; }
.logo-grid li:hover img { opacity: 1; }

/* 1.17.0 : incitation au défilement sans libellé, toujours centrée en bas du héros, la goutte s'arrête avant le chevron */
.hero .scroll-cue { left: 50%; translate: -50% 0; align-items: center; }
.hero .scroll-cue .cue-line { margin-left: -34px; }
.cue-line { height: 72px; -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 62%, transparent); mask-image: linear-gradient(transparent, #000 28%, #000 62%, transparent); padding: 0 34px; margin: 0 -34px; background-clip: content-box; }
.cue-line i { left: 0; width: 1px; height: 26px; border-radius: 1px; }
@keyframes cue-drop { 0% { transform: translateY(-26px); opacity: 0; } 20% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(72px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cue-line i { top: 30px; } }
@media (min-width: 1101px) { .hero-cards { bottom: clamp(124px, 15vh, 150px); } }

/* 1.18.0 : l'arbre de l'atelier prend racine dans la logothèque (interrupteur ARBRE dans build_maquette.py) */
.tree-bridge { position: relative; margin-top: clamp(40px, 6vw, 90px); line-height: 0; }
.tree-bridge img { display: block; width: 100%; height: auto; }
#atelier:has(.tree-bridge) { padding-bottom: 0; }
.has-roots { position: relative; }
.has-roots > .wrap { position: relative; z-index: 1; }
.roots { position: absolute; z-index: 0; top: -5.1vw; left: 46.5%; translate: -50% 0; width: clamp(220px, 30vw, 460px); height: auto; overflow: visible; pointer-events: none; }
.roots path { fill: none; stroke: var(--bronze); stroke-linecap: round; opacity: .5; stroke-dasharray: 1; stroke-dashoffset: 1; }
@media (prefers-reduced-motion: reduce) { .roots path { stroke-dashoffset: 0; } }

/* 1.18.0 : loader, le picto se dessine, l'engrenage tourne et grossit, la fente s'allume puis le site s'ouvre en deux */
.mg-loading .loader { background: none; }
.loader > i { position: absolute; top: 0; bottom: 0; display: block; }
.ld-l, .ld-r { width: 50.2%; background: var(--night); transition: transform .75s cubic-bezier(.75, 0, .2, 1); }
.ld-l { left: 0; } .ld-r { right: 0; }
.ld-line { left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(transparent, var(--gold) 18%, #fff4d6 50%, var(--gold) 82%, transparent); box-shadow: 0 0 18px 2px rgba(232,190,108,.7), 0 0 60px 8px rgba(232,190,108,.25); transform: scaleY(0); opacity: 0; transition: transform .5s cubic-bezier(.65, 0, .35, 1), opacity .3s; }
.loader .mgp { position: relative; z-index: 1; }
.loader .mgp-tile { animation-duration: .5s; animation-delay: .08s; }
.loader .mgp-leaf { animation-duration: .72s; animation-delay: .24s; }
.loader .mgp-gear { animation-duration: .8s; animation-delay: .6s; }
.loader .mgp-slit { animation-duration: .4s; animation-delay: 1.08s; }
.mg-zoom .loader .mgp-tile, .mg-zoom .loader .mgp-leaf { animation: mgp-out .3s ease forwards; }
.mg-zoom .loader .mgp-slit { animation: mgp-out-slit .3s ease forwards; }
@keyframes mgp-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mgp-out-slit { from { opacity: 1; stroke-dashoffset: 0; } to { opacity: 0; stroke-dashoffset: 0; } }
.mg-zoom .loader .mgp-gear { animation: mgp-gear-zoom .6s cubic-bezier(.55, 0, .25, 1) forwards; }
@keyframes mgp-gear-zoom { from { transform: none; fill: #fff; opacity: 1; } 60% { opacity: 1; } to { transform: rotate(240deg) scale(9); fill: var(--gold); opacity: 0; } }
.mg-zoom .loader .ld-line { transform: none; opacity: 1; }
.mg-loaded .loader { opacity: 1; visibility: hidden; transition: visibility 0s .8s; }
.mg-loaded .loader .mgp { opacity: 0; transform: none; transition: opacity .2s; }
.mg-loaded .loader .ld-l { transform: translateX(-100%); }
.mg-loaded .loader .ld-r { transform: translateX(100%); }
.mg-loaded .loader .ld-line { opacity: 0; transition: opacity .35s; }
.cue-line i { left: 34px; }

/* 1.25.0 : intro simple. Contour tracé puis aplats, l'engrenage apparaît, la fente descend,
   le logo complet s'efface en fondu et le site s'ouvre en deux. */
.loader .mgp { --ld-s: clamp(120px, 15vmin, 172px); width: var(--ld-s); height: var(--ld-s); overflow: visible; }
.loader .ld-tr { fill: none; stroke: var(--gold); stroke-width: .8; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ld-trace 1.05s cubic-bezier(.6, 0, .35, 1) 0s forwards, ld-out .4s ease 1.6s forwards; }
.loader .ld-tr-leaf { animation-delay: .35s, 1.7s; }
@keyframes ld-trace { to { stroke-dashoffset: 0; } }
@keyframes ld-out { to { opacity: 0; } }
.loader .mgp-tile { fill: var(--gold); animation: ld-fill .6s ease 1.05s both; }
.loader .mgp-leaf { fill: var(--night); animation: ld-fill .5s ease 1.4s both; }
.loader .mgp-gear { fill: var(--gold); transform-box: fill-box; transform-origin: center; animation: ld-gear .55s cubic-bezier(.16, 1, .3, 1) 1.65s both; }
@keyframes ld-fill { from { opacity: 0; } to { opacity: 1; } }
@keyframes ld-gear { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.loader .mgp-slit { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; animation: mgp-slit .4s cubic-bezier(.65, 0, .35, 1) 2.2s forwards; }
.loader .ld-cut, .loader .ld-half, .loader .ld-line { display: none; }
/* fondu du logo complet, puis ouverture en deux */
.mg-zoom .loader .mgp { opacity: 0; transition: opacity .45s ease; }
.mg-zoom .loader .mgp-tile, .mg-zoom .loader .mgp-leaf, .mg-zoom .loader .mgp-gear, .mg-zoom .loader .mgp-slit { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
.mg-loaded .loader .mgp { opacity: 0; }
.mg-loading:not(.mg-loaded) .hero .rise, .mg-loading:not(.mg-loaded) .hero .rise.d1 { transition-delay: 3.4s; }
.mg-loading:not(.mg-loaded) .hero .rise.d2 { transition-delay: 3.5s; }
.mg-loading:not(.mg-loaded) .hero .rise.d3 { transition-delay: 3.6s; }

/* ===== 1.30.0 ===== */
/* Intro : le logo s'efface, un trait de lumière vertical fend la page, puis elle s'ouvre en deux */
.loader .ld-line { display: block; width: 2px; margin-left: -1px; transform: scaleY(0); opacity: 0; transition: transform .55s cubic-bezier(.65, 0, .35, 1) .22s, opacity .2s ease .22s; }
.mg-zoom .loader .ld-line { transform: none; opacity: 1; }
.mg-loaded .loader .ld-line { transform: scaleX(2.5); opacity: 0; transition: opacity .55s ease .08s, transform .55s ease; }
.mg-loaded .loader .ld-l { box-shadow: 1px 0 28px rgba(232,190,108,.28); }
.mg-loaded .loader .ld-r { box-shadow: -1px 0 28px rgba(232,190,108,.28); }
.mg-loading:not(.mg-loaded) .hero .rise, .mg-loading:not(.mg-loaded) .hero .rise.d1 { transition-delay: 3.75s; }
.mg-loading:not(.mg-loaded) .hero .rise.d2 { transition-delay: 3.85s; }
.mg-loading:not(.mg-loaded) .hero .rise.d3 { transition-delay: 3.95s; }

/* Le contenu qui suit un héros de page apparaît sans avoir à défiler */
.page-hero + section.pad, .case-hero + section.pad { padding-top: clamp(60px, 6vw, 104px); }

/* Fin trait entre deux blocs consécutifs de même couleur (ajouté par site.js) */
.mg-seam { height: 1px; position: relative; z-index: 1; }
.mg-seam .wrap { height: 1px; }
.mg-seam i { display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,190,108,.32) 22%, rgba(232,190,108,.32) 78%, transparent); }
.mg-seam.light i { background: linear-gradient(90deg, transparent, rgba(23,20,15,.16) 22%, rgba(23,20,15,.16) 78%, transparent); }

/* Ils me font confiance : séparateurs verticaux entre les logos, jamais aux extrémités */
.logo-grid li { position: relative; }
.logo-grid li + li::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--hair-ink); }
@media (min-width: 761px) { .logo-grid li:nth-child(5n+1)::before { display: none; } }
@media (max-width: 760px) { .logo-grid li:nth-child(3n+1)::before { display: none; } }

/* Savoir-faire : les trois autres pages en fin de page */
.sf-others { grid-template-columns: repeat(3, 1fr); }
.sf-others .sf-card { aspect-ratio: 4 / 3; }
.sf-others .sf-card-txt h3 { font-size: clamp(1.25rem, 1.7vw, 1.7rem); font-weight: 400; letter-spacing: -.02em; margin-top: 8px; }
.sf-others .sf-card-txt p { font-size: .95rem; }
@media (max-width: 1100px) { .sf-others { grid-template-columns: 1fr; } .sf-others .sf-card { aspect-ratio: 16 / 10; } }

/* ===== 1.31.0 ===== */
/* cartes « À la une » : 2 cartes, jamais sur le texte d'introduction */
@media (min-width: 1101px) {
  .hero-cards { grid-template-columns: minmax(0, 224px); bottom: clamp(24px, 4vh, 48px); gap: 12px; }
  .hero-card { min-height: 0; padding: 16px 44px 18px 18px; }
  .hero-grid > div { max-width: min(860px, calc(100% - 300px)); }
}
@media (max-width: 1100px) { .hero-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .hero-cards { grid-template-columns: 1fr; } }
/* liens des membres sur l'aperçu de l'équipe (accueil) */
.mm .mate-links { display: flex; gap: 6px; margin-top: 8px; }
.mm .mate-links a { width: 28px; height: 28px; border: 1px solid var(--hair); border-radius: 50%; display: grid; place-items: center; color: var(--soft); transition: color .3s, border-color .3s, background .3s; }
.mm .mate-links a:hover { color: var(--night); background: var(--gold); border-color: var(--gold); }
.mm .mate-links svg { width: 13px; height: 13px; }
/* « Deux secteurs » sur fond ivoire */
.on-light .sector .sbrand { border-bottom-color: var(--hair-ink); }
.on-light .sbrand .name span:first-child { color: var(--ink); }
.on-light .sbrand .name span:last-child { color: var(--bronze); }
.on-light .sector p { color: var(--ink-soft); }
/* Atelier de l'accueil sur fond ivoire */
.on-light .stats { border-top-color: var(--hair-ink); }
.on-light .stat { border-right-color: var(--hair-ink); }
.on-light .stat strong { color: var(--bronze); }
.on-light .stat span { color: var(--ink-soft); }
.on-light .mm small { color: rgba(23,20,15,.6); }
.on-light .mm .mate-links a { border-color: var(--hair-ink); color: var(--ink-soft); }
.on-light .mm .mate-links a:hover { color: var(--ivory); background: var(--bronze); border-color: var(--bronze); }

/* ---------- Ajouts pour WordPress ---------- */
.mg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.chips a.chip { display: inline-block; }
.pager { margin-top: 60px; }
.pager .nav-links { display: flex; gap: 10px; flex-wrap: wrap; }
.pager .page-numbers { min-width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 999px; color: var(--soft); padding: 0 14px; }
.pager .page-numbers.current, .pager a.page-numbers:hover { border-color: var(--gold); color: var(--gold); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Contenu rédigé dans l'éditeur (articles, pages simples, études de cas) */
.art-body > * + * { margin-top: 1.2em; }
.art-body ul, .art-body ol, .case-content ul, .case-content ol { padding-left: 1.3em; color: var(--soft); line-height: 1.8; }
.art-body ul { list-style: disc; } .art-body ol { list-style: decimal; }
.art-body li::marker { color: var(--gold); }
.art-body a:not(.btn), .case-content a:not(.btn) { color: var(--gold); border-bottom: 1px solid var(--gold-soft); }
.art-body figure, .case-content figure { margin: 2em 0; }
.art-body img, .case-content img { max-width: 100%; height: auto; display: block; }
.art-body figcaption, .case-content figcaption { font-size: .85rem; color: var(--mute); margin-top: 10px; }
.art-body h3 { font-size: 1.3rem; font-weight: 400; margin: 40px 0 12px; }
.art-body strong { color: var(--white); font-weight: 600; }
.art-body .wp-block-quote { margin: 50px 0; padding-left: 28px; border-left: 2px solid var(--gold); }
.art-body .wp-block-quote p { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 300; line-height: 1.4; color: var(--white); }

.case-content { max-width: 980px; }
.case-content h2 { font-weight: 300; letter-spacing: -.035em; line-height: 1.05; font-size: clamp(2rem, 4vw, 3.8rem); margin: clamp(60px, 7vw, 110px) 0 28px; }
.case-content h2:first-child { margin-top: 0; }
.case-content h2 b, .case-content h2 strong { color: var(--gold); font-weight: 600; }
.case-content h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 400; margin: 40px 0 12px; }
.case-content p { color: var(--soft); font-size: 1.08rem; line-height: 1.8; max-width: 44em; }
.case-content p + p { margin-top: 1em; }
.case-content strong { color: var(--white); font-weight: 600; }
.case-content .wp-block-gallery { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; margin: 2.4em 0; }
.case-content .wp-block-gallery > figure { width: 100% !important; margin: 0 !important; }
.case-content .wp-block-gallery img { width: 100% !important; height: auto !important; object-fit: cover; border-radius: 4px; }
.case-content .wp-block-gallery > figure.alignwide, .case-content .wp-block-gallery > figure.alignfull { grid-column: 1 / -1; }
.case-content > figure.alignwide, .case-content > figure.alignfull, .case-content > .wp-block-image.alignwide { margin-left: 0; margin-right: 0; }
/* pastille du logo, à cheval sur le visuel d'intro */
.case-badge { display: grid; place-items: center; width: clamp(76px, 6.4vw, 104px); aspect-ratio: 1; border-radius: 50%; background: #fff; padding: clamp(12px, 1.2vw, 18px); box-sizing: border-box; margin-bottom: clamp(20px, 2.4vw, 32px); box-shadow: 0 14px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(232,190,108,.35); }
.case-badge.dark { background: var(--night); }
.case-badge img { width: 100%; height: 100%; object-fit: contain; }
/* autour du projet */
.autour-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.autour-list a { position: relative; display: block; height: 100%; padding: 28px 56px 28px 28px; border: 1px solid var(--hair); border-radius: 6px; transition: border-color .3s, background .3s; }
.autour-list a:hover { border-color: var(--gold-soft); background: rgba(232,190,108,.04); }
.autour-list b { display: block; font-size: 1.2rem; font-weight: 500; }
.autour-list span { display: block; margin-top: 8px; color: var(--soft); font-size: .95rem; line-height: 1.6; }
.autour-list i { position: absolute; right: 24px; top: 28px; color: var(--gold); font-style: normal; transition: translate .3s; }
.autour-list a:hover i { translate: 4px 0; }
@media (max-width: 760px) { .case-content .wp-block-gallery { grid-template-columns: 1fr; } }

/* Réalisations : planche d'identité, captures, cartes logo */
.work .ph-logo { background: var(--ivory); }
.work .ph-logo img { position: static; width: 46%; height: auto; max-height: 46%; object-fit: contain; }
.work:hover .ph-logo img { transform: none; }
.work:has(.ph-logo) .cap { background: linear-gradient(0deg, rgba(9,9,10,.96) 55%, rgba(9,9,10,0)); padding-top: 46px; }
.brand-board { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 24px); }
.brand-board .bb { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 14%; background: #fff; border: 1px solid var(--hair-ink); margin: 0; }
.brand-board .bb.dark { background: var(--night); border-color: var(--night); }
.brand-board .bb:only-child { grid-column: span 2; aspect-ratio: 16 / 7; padding: 8% 22%; }
.brand-board img { width: 100%; height: 100%; max-height: 260px; object-fit: contain; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(28px, 3vw, 44px); }
.swatches span { display: block; aspect-ratio: 16 / 10; border: 1px solid var(--hair-ink); margin-bottom: 14px; }
.swatches b { display: block; font-weight: 600; color: var(--ink); font-size: .95rem; }
.swatches small { color: var(--ink-soft); font-size: .8rem; letter-spacing: .06em; }
.bb-decl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(28px, 3vw, 44px); }
.bb-decl li { background: #fff; border: 1px solid var(--hair-ink); aspect-ratio: 1; display: grid; place-items: center; padding: 18%; }
.bb-decl img { width: 100%; height: 100%; object-fit: contain; }
.screens { display: grid; grid-template-columns: 1fr 24%; gap: clamp(18px, 2.4vw, 40px); align-items: end; }
.screens.single { grid-template-columns: 1fr; }
.screens.single .scr-mob { max-width: 340px; margin-inline: auto; }
.scr-desk, .scr-mob { margin: 0; overflow: hidden; background: var(--char); border: 1px solid var(--hair); }
.scr-desk { border-radius: 10px; }
.scr-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--hair); }
.scr-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--hair); }
.scr-desk img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: top; }
.scr-mob { border-radius: 28px; padding: 10px; }
.scr-mob img { display: block; width: 100%; aspect-ratio: 9 / 19; height: auto; object-fit: cover; object-position: top; border-radius: 20px; }
@media (max-width: 760px) {
  .brand-board { grid-template-columns: 1fr; } .brand-board .bb:only-child { grid-column: auto; aspect-ratio: 4 / 3; padding: 14%; }
  .screens { grid-template-columns: 1fr; } .scr-mob { max-width: 260px; margin-inline: auto; }
}

/* 1.19.4 : bloc identité éditable, citation sur fond sombre */
.case-brand-head { margin-bottom: clamp(40px, 5vw, 72px); }
.case-brand-head .lead { margin-top: 22px; max-width: 38em; color: var(--ink-soft); }
.case-quote { border-top: 1px solid var(--hair-ink); }
.case-quote blockquote, .case-quote .quote-by { margin-left: 0; padding-left: clamp(24px, 3vw, 44px); border-left: 2px solid var(--gold); }
.case-quote .quote-by { margin-top: 0; padding-top: 22px; color: var(--bronze); letter-spacing: .04em; }

/* 1.20.2 : visuel d'intro entier, titre plus proche, filet après Autour du projet */
.case-content-sec { padding-top: clamp(56px, 6vw, 100px); }
.case-autour { border-bottom: 1px solid var(--hair); }

/* 1.28.0 : captures pleine page qui défilent au survol */
.scr-view { position: relative; overflow: hidden; aspect-ratio: 16 / 10; outline: none; }
.scr-mob .scr-view { aspect-ratio: 9 / 19.5; border-radius: 20px; }
.screens .scr-view img { max-width: none; max-height: none; min-height: 0; position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; border-radius: 0; transform: translateY(0); transition: transform var(--d, 6s) cubic-bezier(.45, 0, .55, 1); will-change: transform; }
.scr-view.long { cursor: ns-resize; }
.scr-view.long:hover img, .scr-view.long:focus-visible img { transform: translateY(var(--y, 0)); }
.scr-view:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
.scr-desk { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.scr-mob { box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .75); }
.scr-hint { margin-top: 22px; font-size: .82rem; letter-spacing: .06em; color: var(--muted, #8d877c); text-align: center; }
@media (hover: none) {
  .scr-view.long { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .screens .scr-view img { position: static; transition: none; }
  .scr-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .screens .scr-view img { transition: none; } }

/* 1.33.0 : tableaux dans les articles du journal */
.art-body .wp-block-table { margin: 2em 0; overflow-x: auto; }
.art-body table { width: 100%; border-collapse: collapse; font-size: .95em; color: var(--soft); }
.art-body th { text-align: left; font-weight: 600; color: var(--gold); padding: .7em 1em; border-bottom: 1px solid var(--gold-soft); white-space: nowrap; }
.art-body td { padding: .7em 1em; border-bottom: 1px solid rgba(255,255,255,.08); }
.art-body tr:last-child td { border-bottom: 0; }
.art-body td:first-child { color: var(--ivory); }