@font-face{font-family:"Archivo";src:url("fonts/archivo.woff") format("woff");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono.woff") format("woff");font-weight:100 800;font-style:normal;font-display:swap}

/* Layout : une table de montage. Chaque page est une "séquence", les offres sont des clips posés sur une piste, une tête de lecture jaune relie le tout. */
:root{
  --paper:#F3F4FC; --surface:#FFFFFF; --ink:#0D1150; --muted:#545B95; --line:rgba(36,51,214,.16);
  --ultra:#2433D6; --brand:#1C28C2; --brand-deep:#111985; --on-brand:#F4F5FF; --signal:#FFD21F; --on-signal:#0D1150; --cream:#F7F0CE;
  --clip-a:#FFD21F; --clip-b:#7C87FF; --clip-c:#33E0C0; --clip-d:#FF7A59;
  --f-display:"Archivo","Arial Narrow",Helvetica,sans-serif;
  --f-serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:14px; --max:1180px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#070A2B; --surface:#0F1449; --ink:#EDEFFF; --muted:#9EA4DB; --line:rgba(150,160,255,.18);
  --ultra:#7C87FF; --brand:#1A239E; --brand-deep:#0B1066; --on-brand:#F4F5FF; --signal:#FFD84A; --on-signal:#0D1150; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#070A2B; --surface:#0F1449; --ink:#EDEFFF; --muted:#9EA4DB; --line:rgba(150,160,255,.18);
  --ultra:#7C87FF; --brand:#1A239E; --brand-deep:#0B1066; --on-brand:#F4F5FF; --signal:#FFD84A; --on-signal:#0D1150; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-display);font-stretch:100%;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.mono{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;font-stretch:100%;letter-spacing:0}
h1,h2,h3{text-wrap:balance;margin:0;line-height:1.02;font-weight:850;font-stretch:118%;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,7.4vw,6.2rem)}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);font-stretch:110%}
p{margin:0;max-width:62ch}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--ultra)}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 30%,transparent)}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 .98rem/1 var(--f-display);font-stretch:108%;text-decoration:none;padding:15px 22px;border-radius:999px;border:0;cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-signal{background:var(--signal);color:var(--on-signal)}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn .arr{transition:transform .2s}.btn:hover .arr{transform:translateX(4px)}

/* En-tête */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
@keyframes rec{50%{opacity:.25}}
nav.main{display:flex;align-items:center;gap:4px}
nav.main a{text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 13px;border-radius:999px;color:var(--muted);transition:color .2s,background .2s}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);background:color-mix(in srgb,var(--ultra) 12%,transparent)}
.top .btn{padding:11px 18px;font-size:.9rem}
.burger{display:none;background:none;border:1.5px solid var(--line);color:var(--ink);border-radius:999px;padding:9px 14px;font:600 .85rem var(--f-display);cursor:pointer}
@media (max-width:1240px){
  .burger{display:inline-flex}
  nav.main{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;padding:12px 16px 20px;background:var(--paper);border-bottom:1px solid var(--line);display:none}
  nav.main.open{display:flex}
  nav.main a{padding:13px 14px;font-size:1.05rem}
  .top .cta-desk{display:none}
}

/* Sections */
section.page{padding-bottom:40px}
.block{padding-block:clamp(56px,9vw,112px)}
.block-head{display:grid;gap:18px;margin-bottom:clamp(32px,5vw,56px)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:end}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.split>*{min-width:0}

/* Hero (bloc marque) */
.hero{background:var(--brand);color:var(--on-brand);position:relative;overflow:hidden;border-radius:0 0 28px 28px}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 80% at 85% 10%,color-mix(in srgb,var(--signal) 22%,transparent),transparent 60%),
  repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.05) 79px 80px);pointer-events:none}
.hero .wrap{position:relative;padding-block:clamp(48px,8vw,96px) clamp(36px,5vw,56px);display:grid;gap:28px}
.hero h1 .serif{color:var(--signal);font-size:1.04em}
.hero .lead{color:color-mix(in srgb,var(--on-brand) 78%,transparent)}
.hero .eyebrow{color:var(--on-brand)}
.hero-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .btn-ghost{color:var(--on-brand)}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 28px;color:color-mix(in srgb,var(--on-brand) 70%,transparent)}
.hero-meta b{color:var(--on-brand);font-weight:700}
.tc{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* Timeline des offres */
.timeline{margin-top:12px;background:var(--brand-deep);border-radius:18px;padding:18px 18px 22px;position:relative;overflow-x:auto}
.tl-inner{min-width:640px;position:relative}
.tl-ruler{display:grid;grid-template-columns:repeat(12,1fr);font:500 .66rem var(--f-mono);letter-spacing:.08em;color:color-mix(in srgb,var(--on-brand) 55%,transparent);border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:8px;margin-bottom:12px}
.tl-track{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;height:46px;margin-bottom:8px;align-items:stretch}
.tl-label{font:600 .62rem var(--f-mono);letter-spacing:.1em;color:color-mix(in srgb,var(--on-brand) 50%,transparent);margin:2px 0 4px}
.clip{border-radius:8px;color:var(--on-signal);text-decoration:none;font-weight:800;font-stretch:112%;font-size:.88rem;display:flex;align-items:center;gap:8px;padding:0 12px;white-space:nowrap;overflow:hidden;position:relative;transition:filter .2s,transform .2s}
.clip:hover{filter:brightness(1.08);transform:translateY(-2px)}
.clip small{font:500 .66rem var(--f-mono);opacity:.75}
.clip::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(0,0,0,.08) 22px 23px)}
.c-a{background:var(--clip-a)}.c-b{background:var(--clip-b)}.c-c{background:var(--clip-c)}.c-d{background:var(--clip-d)}
.playhead{position:absolute;top:-6px;bottom:-6px;left:38%;width:2px;background:var(--signal);pointer-events:none}
.playhead::before{content:"";position:absolute;top:0;left:-6px;border:7px solid transparent;border-top:9px solid var(--signal)}
.tl-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;color:color-mix(in srgb,var(--on-brand) 65%,transparent)}

/* Cartes offres */
.offers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1040px){.offers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.offers{grid-template-columns:1fr}}
.offer{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:16px;position:relative;text-decoration:none;color:inherit;transition:transform .25s,border-color .25s}
.offer:hover{transform:translateY(-4px);border-color:var(--ultra)}
.offer .strip{height:8px;border-radius:4px}
.offer .was{color:var(--muted)}
.offer h3{font-size:1.9rem}
.offer .tag{font-family:var(--f-serif);font-style:italic;font-size:1.2rem;color:var(--ultra);line-height:1.2}
.price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line)}
.price b{font-size:1.7rem;font-weight:850;font-stretch:112%;font-variant-numeric:tabular-nums}
.price span{color:var(--muted);font-size:.9rem}
.offer ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:.94rem}
.offer li{display:flex;gap:9px}.offer li::before{content:"▸";color:var(--ultra);flex:none}

/* Méthode */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--ink)}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}
.step{padding:22px 22px 26px 0;display:grid;gap:10px;align-content:start;position:relative}
.step .tc{color:var(--ultra);font-weight:600;font-size:.82rem}
.step::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--signal);border:2px solid var(--ink)}
.step p{color:var(--muted);font-size:.96rem}

/* Bandeau CTA */
.cta-band{background:var(--signal);color:var(--on-signal);border-radius:24px;padding:clamp(32px,6vw,64px);display:grid;grid-template-columns:1.4fr auto;gap:28px;align-items:center}
.cta-band h2{font-size:clamp(1.9rem,4vw,3.2rem)}
.cta-band .btn{background:var(--on-signal);color:var(--signal)}
.cta-band p{opacity:.8;margin-top:12px}
@media (max-width:720px){.cta-band{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 0;font-weight:700;font-size:1.12rem;font-stretch:108%}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.6rem var(--f-mono);color:var(--ultra);transition:transform .25s}
.faq details[open] summary::after{content:"×"}
.faq details p{padding:0 0 20px;color:var(--muted)}

/* Intro des pages internes */
.intro{padding-block:clamp(48px,8vw,96px) clamp(24px,4vw,40px);display:grid;gap:22px;border-bottom:1px solid var(--line)}
.intro h1{font-size:clamp(2.4rem,6.4vw,5.2rem)}
.intro h1 .serif{color:var(--ultra)}
.crumb{color:var(--muted)}

/* Fiche offre détaillée */
.sheet{display:grid;grid-template-columns:280px 1fr;gap:clamp(24px,4vw,56px);padding-block:clamp(40px,6vw,72px);border-bottom:1px solid var(--line)}
@media (max-width:820px){.sheet{grid-template-columns:1fr}}
.sheet>*{min-width:0}
.sheet-side{display:grid;gap:14px;align-content:start;position:sticky;top:96px}
@media (max-width:820px){.sheet-side{position:static}}
.sheet-side .strip{height:10px;border-radius:5px;width:72px}
.sheet-side h2{font-size:clamp(2.4rem,5vw,3.8rem)}
.sheet-side .price b{font-size:2.1rem}
.sheet-body{display:grid;gap:26px}
.sheet-body .tag{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;color:var(--ultra)}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:560px){.kv{grid-template-columns:1fr}}
.kv div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:grid;gap:4px}
.kv .mono{color:var(--muted)}
.kv b{font-weight:700}

/* Tableau besoins */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:620px}
th,td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 .72rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
tr:last-child td{border-bottom:0}
.pill{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-stretch:110%}
.pill i{width:12px;height:12px;border-radius:3px;display:inline-block}

/* Configurateur */
.config{background:var(--brand);color:var(--on-brand);border-radius:24px;padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
@media (max-width:820px){.config{grid-template-columns:1fr}}
.config>*{min-width:0}
.config h2 .serif{color:var(--signal)}
.config .lead{color:color-mix(in srgb,var(--on-brand) 75%,transparent)}
.range-row{display:grid;gap:12px;margin-top:24px}
.range-row label{display:flex;justify-content:space-between;align-items:baseline}
.range-row output{font-size:3rem;font-weight:900;font-stretch:120%;color:var(--signal);line-height:1}
input[type=range]{width:100%;accent-color:var(--signal);height:28px}
.scale{display:flex;justify-content:space-between;color:color-mix(in srgb,var(--on-brand) 60%,transparent)}
.reel{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;margin-top:22px}
.reel span{height:34px;border-radius:4px;background:rgba(255,255,255,.1);transition:background .25s,transform .25s}
.reel span.on{transform:scaleY(1)}
.reel span.t1{background:var(--clip-a)}.reel span.t2{background:var(--clip-b)}.reel span.t3{background:var(--clip-c)}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;color:color-mix(in srgb,var(--on-brand) 75%,transparent)}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:6px}
.total{background:var(--brand-deep);border-radius:18px;padding:24px;display:grid;gap:16px;align-content:start}
.total-big{font-size:clamp(2.6rem,6vw,4rem);font-weight:900;font-stretch:115%;font-variant-numeric:tabular-nums;line-height:1}
.total dl{margin:0;display:grid;gap:8px}
.total dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed rgba(255,255,255,.14);padding-bottom:8px;font-variant-numeric:tabular-nums}
.total dt{color:color-mix(in srgb,var(--on-brand) 70%,transparent)}
.total dd{margin:0;font-weight:700}
.note{font-size:.84rem;color:var(--muted)}
.config .note{color:color-mix(in srgb,var(--on-brand) 60%,transparent)}

/* Réalisations */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filters button{font:600 .9rem var(--f-display);padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.works{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.work{grid-column:span 2;display:grid;gap:10px}
.work.wide{grid-column:span 4}
.work.tall .frame{aspect-ratio:9/16;max-height:520px}
@media (max-width:820px){.works{grid-template-columns:1fr 1fr}.work,.work.wide{grid-column:span 1}.work.wide{grid-column:span 2}}
@media (max-width:480px){.works{grid-template-columns:1fr}.work,.work.wide{grid-column:span 1}}
.frame{aspect-ratio:16/9;max-width:100%;border-radius:12px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-deep) 70%);color:var(--on-brand);display:grid;place-items:center}
.frame::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.035) 3px 4px)}
.frame .rec{position:absolute;top:12px;left:14px;display:flex;align-items:center;gap:6px;font:600 .66rem var(--f-mono);letter-spacing:.1em}
.frame .rec i{width:7px;height:7px;border-radius:50%;background:#FF3B30}
.frame .tcode{position:absolute;bottom:12px;right:14px;font:500 .7rem var(--f-mono);opacity:.75}
.frame .ratio{position:absolute;top:12px;right:14px;font:500 .66rem var(--f-mono);opacity:.75}
.frame .corners{position:absolute;inset:18px;border:1px solid rgba(255,255,255,.18);border-radius:6px}
.play{width:58px;height:58px;border-radius:50%;background:var(--signal);display:grid;place-items:center;position:relative;transition:transform .25s}
.play::after{content:"";border-left:16px solid var(--on-signal);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.work:hover .play{transform:scale(1.1)}
.work-meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.work-meta b{font-weight:750;font-stretch:108%}
.work-meta .mono{color:var(--muted)}
.placeholder-note{background:color-mix(in srgb,var(--signal) 22%,var(--surface));border-radius:12px;padding:14px 18px;margin-bottom:24px;font-size:.92rem}

/* Studio */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:820px){.values{grid-template-columns:1fr}}
.value{padding:26px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:grid;gap:12px;align-content:start}
.value .big{font-family:var(--f-serif);font-style:italic;font-size:2.4rem;color:var(--ultra);line-height:1}
.value p{color:var(--muted)}
.manifest{font-size:clamp(1.6rem,3.4vw,2.8rem);font-weight:750;font-stretch:112%;line-height:1.15;letter-spacing:-.015em;max-width:24ch;text-wrap:balance}
.manifest .serif{color:var(--ultra)}
.formats{display:flex;flex-wrap:wrap;gap:10px}
.formats span{padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);font-weight:600}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,5vw,64px);padding-block:clamp(40px,6vw,72px)}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.contact>*{min-width:0}
form.rdv{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,32px);display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label,.field legend{font-weight:650;font-size:.92rem}
.field input,.field select,.field textarea{font:400 1rem var(--f-display);padding:13px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ultra)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
fieldset{border:0;padding:0;margin:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips label{cursor:pointer}
.field .chips input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;padding:0;border:0;margin:0}
.chips label{position:relative}
.chips span{display:inline-flex;flex-direction:column;align-items:center;padding:9px 13px;border-radius:12px;border:1.5px solid var(--line);font-weight:600;font-size:.88rem;min-width:66px;line-height:1.25}
.chips span small{font:500 .66rem var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.chips input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips input:checked+span small{color:inherit;opacity:.7}
.chips input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
.recap{border-radius:16px;background:var(--brand);color:var(--on-brand);padding:22px;display:grid;gap:10px}
.recap b{color:var(--signal)}
.info-list{display:grid;gap:0;border-top:1px solid var(--line);margin-top:8px}
.info-list div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.info-list dt{color:var(--muted)}.info-list dd{margin:0;font-weight:650;text-align:right}

/* Pied de page */
footer{margin-top:clamp(48px,8vw,96px);background:var(--brand-deep);color:var(--on-brand);padding-block:56px 32px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}}@media (max-width:520px){.foot{grid-template-columns:1fr}}
.foot h4{margin:0 0 12px;font:600 .72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--on-brand) 60%,transparent)}
.foot a{display:block;text-decoration:none;padding:4px 0;color:color-mix(in srgb,var(--on-brand) 85%,transparent)}
.foot a:hover{color:var(--signal)}
.foot .big{font-size:clamp(2.2rem,6vw,4.4rem);font-weight:900;font-stretch:125%;letter-spacing:-.03em;line-height:.95}
.foot .big .serif{color:var(--signal)}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:color-mix(in srgb,var(--on-brand) 55%,transparent)}


/* Logo Univers : masques alpha, la couleur suit les tokens */
.lg{display:inline-block;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;flex:none}
.lg-flower{-webkit-mask-image:url("img/ui/ui-1.png");mask-image:url("img/ui/ui-1.png");aspect-ratio:221/200}
.lg-word{-webkit-mask-image:url("img/ui/ui-2.png");mask-image:url("img/ui/ui-2.png");aspect-ratio:1127/160}
.lg-full{-webkit-mask-image:url("img/ui/ui-3.png");mask-image:url("img/ui/ui-3.png");aspect-ratio:908/360}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo-txt{display:grid;width:var(--lw,158px);gap:4px}
.logo .lg-word{width:100%;height:auto}
.logo .tagline{display:block;width:100%;height:auto;overflow:visible}
.logo .tagline text{font-family:var(--f-mono);font-weight:600;font-size:60px;fill:var(--muted)}
.logo .rec-dot{justify-self:end;display:inline-flex;align-items:center;gap:5px;font:700 .58rem/1 var(--f-mono);letter-spacing:.12em;color:#FF3B30}
.logo .rec-dot i{width:8px;height:8px;border-radius:50%;background:#FF3B30;box-shadow:0 0 0 3px rgba(255,59,48,.18);animation:rec 1.6s infinite}
@media (max-width:420px){.logo-txt{--lw:132px}}
.foot .lg-full{width:min(100%,420px);color:var(--cream)}

/* Fleur du logo découpée en 8 pétales + cœur : elle s'ouvre au survol */
.flower{position:relative;display:inline-block;aspect-ratio:387/350;flex:none;--sep:0}
.flower>span{position:absolute;inset:0;background:currentColor;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transform:translate(calc(var(--dx)*var(--sep)*1%),calc(var(--dy)*var(--sep)*1%));transition:transform .55s cubic-bezier(.22,1,.36,1)}
.logo .flower{height:46px}
.logo:hover .flower,.logo:focus-visible .flower{--sep:6}
.hero-flower{position:absolute;right:-6%;top:-8%;width:min(46vw,520px);height:auto;color:var(--signal);opacity:.16;pointer-events:none;animation:bloom 7s ease-in-out infinite alternate}
@keyframes bloom{from{--sep:0}to{--sep:5}}
@property --sep{syntax:'<number>';inherits:true;initial-value:0}
@media (max-width:420px){.logo .flower{height:38px}}
.pt0{-webkit-mask-image:url("img/ui/ui-4.png");mask-image:url("img/ui/ui-4.png");--dx:0.954;--dy:0.301}
.pt1{-webkit-mask-image:url("img/ui/ui-5.png");mask-image:url("img/ui/ui-5.png");--dx:0.500;--dy:0.866}
.pt2{-webkit-mask-image:url("img/ui/ui-6.png");mask-image:url("img/ui/ui-6.png");--dx:-0.346;--dy:0.938}
.pt3{-webkit-mask-image:url("img/ui/ui-7.png");mask-image:url("img/ui/ui-7.png");--dx:-0.955;--dy:0.297}
.pt4{-webkit-mask-image:url("img/ui/ui-8.png");mask-image:url("img/ui/ui-8.png");--dx:-0.887;--dy:-0.462}
.pt5{-webkit-mask-image:url("img/ui/ui-9.png");mask-image:url("img/ui/ui-9.png");--dx:-0.419;--dy:-0.908}
.pt6{-webkit-mask-image:url("img/ui/ui-10.png");mask-image:url("img/ui/ui-10.png");--dx:0.305;--dy:-0.952}
.pt7{-webkit-mask-image:url("img/ui/ui-11.png");mask-image:url("img/ui/ui-11.png");--dx:0.906;--dy:-0.423}
.ptc{-webkit-mask-image:url("img/ui/ui-12.png");mask-image:url("img/ui/ui-12.png");--dx:0;--dy:0}

/* SEO : H1 descriptif discret + grand titre d'accroche */
.display{margin:0;text-wrap:balance;line-height:1.02;font-weight:850;font-stretch:118%;letter-spacing:-.02em;font-size:clamp(2.6rem,7.4vw,6.2rem)}
.hero .display .serif{color:var(--signal);font-size:1.04em}
.hero h1.seo-h1{font:600 .78rem/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-brand);display:inline-flex;align-items:center;gap:10px}
.hero h1.seo-h1::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--signal);flex:none}
/* Liste des services (accueil) */
.svc-list{border-top:2px solid var(--ink)}
.svc-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:padding .3s}
.svc-row:hover{padding-left:12px}
.svc-row h3{font-size:clamp(1.3rem,2.4vw,1.9rem)}
.svc-row p{color:var(--muted);font-size:.98rem}
.svc-row .go{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);font-size:1.1rem;transition:background .25s,color .25s}
.svc-row:hover .go{background:var(--signal);color:var(--on-signal);border-color:var(--signal)}
@media (max-width:720px){.svc-row{grid-template-columns:1fr auto}.svc-row p{grid-column:1/-1;grid-row:2}}
.kw{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.kw span{font:500 .7rem var(--f-mono);letter-spacing:.04em;padding:5px 9px;border-radius:6px;background:color-mix(in srgb,var(--ultra) 10%,transparent);color:var(--ultra)}
.sheet-body ul.feat{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
@media (max-width:560px){.sheet-body ul.feat{grid-template-columns:1fr}}
.sheet-body ul.feat li{display:flex;gap:10px}.sheet-body ul.feat li::before{content:"▸";color:var(--ultra);flex:none}
.zones{display:flex;flex-wrap:wrap;gap:8px}
.zones span{padding:9px 15px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:.94rem}
.zones span.hl{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Logos clients */
.clients{padding-block:36px 8px}
.clients-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px;color:var(--muted)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:slide 70s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(calc(-50% - 7px))}}
.logo-slot{width:168px;height:76px;flex:none;border-radius:12px;border:1.5px dashed var(--line);display:grid;place-items:center;color:var(--muted);font:500 .68rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--surface)}
.logo-slot img{max-width:128px;max-height:48px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .3s,opacity .3s}
.logo-slot:hover img{filter:none;opacity:1}
/* Avis Google */
.reviews-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:28px}
@media (max-width:720px){.reviews-head{grid-template-columns:1fr}}
.g-score{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 20px}
.g-mark{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:800 1.2rem var(--f-display);color:#fff;background:conic-gradient(#EA4335 0 25%,#FBBC05 0 50%,#34A853 0 75%,#4285F4 0)}
.g-score b{font-size:2rem;font-weight:900;font-stretch:115%;line-height:1;font-variant-numeric:tabular-nums}
.g-score .mono{color:var(--muted)}
.stars{color:var(--signal);letter-spacing:2px;font-size:1rem;line-height:1}
.stars.empty{color:var(--line)}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.reviews{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.reviews{grid-template-columns:1fr}}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:14px;align-content:start}
.review-top{display:flex;align-items:center;gap:12px}
.avatar{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--ultra) 14%,transparent);flex:none}
.sk{height:10px;border-radius:5px;background:color-mix(in srgb,var(--ultra) 10%,transparent)}
.sk-group{display:grid;gap:8px;flex:1}
.review .slot-label{font:500 .66rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.svc-mini{display:flex;flex-wrap:wrap;gap:4px 28px;border-top:2px solid var(--ink);padding-top:22px}
.svc-mini a{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;font-weight:800;font-stretch:112%;font-size:clamp(1.25rem,2.6vw,2rem);letter-spacing:-.015em;padding:6px 0;transition:color .2s}
.svc-mini a span{font-size:.6em;color:var(--ultra);transition:transform .2s}
.svc-mini a:hover{color:var(--ultra)}.svc-mini a:hover span{transform:translate(3px,-3px)}

/* Mobile : carrousels à défilement, timeline compacte, boutons pleine largeur */
@media (max-width:600px){
  .tl-inner{min-width:480px}
  .clip{font-size:.78rem;padding:0 8px}
  .clip small{display:none}
  .tl-track{height:38px}
  .hero-row .btn{width:100%;justify-content:center}
  .offers,.reviews{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:10px;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scrollbar-width:none}
  .offers::-webkit-scrollbar,.reviews::-webkit-scrollbar{display:none}
  .offers>*,.reviews>*{scroll-snap-align:start;min-width:0}
  .offer:hover{transform:none}
  .cta-band .btn{width:100%;justify-content:center}
  .sheet-side .btn,form.rdv .btn{width:100%;justify-content:center}
  .block{padding-block:48px}
  .logo-slot{width:132px;height:62px}
}
.swipe-hint{display:none}
@media (max-width:600px){.swipe-hint{display:block;margin-top:6px;color:var(--muted)}}

/* Garde-fous typographiques : aucun titre ne déborde de son bloc */
h1,h2,h3,.display,summary{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.sheet{grid-template-columns:300px minmax(0,1fr)}
@media (max-width:820px){.sheet{grid-template-columns:minmax(0,1fr)}}
.sheet-side h2{font-size:clamp(1.9rem,3vw,2.4rem);font-stretch:104%;hyphens:manual;-webkit-hyphens:manual}
.faq summary>*{min-width:0}
.faq summary::after{flex:none;width:24px;text-align:center}
.faq summary{padding-right:2px}

.socials{display:flex;flex-wrap:wrap;gap:10px}
.socials a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:650;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.socials a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.socials.on-dark a{color:var(--on-brand);border-color:rgba(255,255,255,.22)}
.socials.on-dark a:hover{background:var(--signal);color:var(--on-signal);border-color:var(--signal)}
.socials.icons-only a{padding:10px}.socials.icons-only span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:1240px){nav.main .socials{margin-top:10px}}
.nav-soc{display:none}@media (max-width:1240px){.nav-soc{display:block;padding:8px 14px 0}}

.custom{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;border:2px dashed var(--ultra);border-radius:24px;padding:clamp(24px,4vw,48px)}
@media (max-width:820px){.custom{grid-template-columns:minmax(0,1fr)}}
.custom ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.custom li{display:flex;gap:12px;align-items:baseline}
.custom li b{font-weight:750}
.custom li::before{content:"✦";color:var(--ultra);flex:none}
.custom-line{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:18px;padding:18px 22px;border-radius:16px;border:1.5px dashed var(--ultra)}
.custom-line p{font-weight:600}
.custom-line a{font-weight:750;color:var(--ultra);text-decoration:none;white-space:nowrap}
.custom-line a:hover{text-decoration:underline}

/* Projets : film 16:9 + verticaux 9:16 + photos */
.projects{display:grid;gap:clamp(48px,8vw,96px)}
.project{display:grid;gap:18px;padding-top:28px;border-top:2px solid var(--ink)}
.project-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:end;margin-bottom:6px}
@media (max-width:820px){.project-head{grid-template-columns:minmax(0,1fr)}}
.project-head h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.project-head .lead{font-size:1rem}
.project-meta{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.project-meta div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.project-meta dt{color:var(--muted)}.project-meta dd{margin:0;font-weight:650;text-align:right}
.project-media{display:grid;grid-template-columns:minmax(0,1.58fr) minmax(0,1fr);gap:12px;align-items:stretch}
.pm-verts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.project-media .frame{margin:0;height:100%}
.f-h{aspect-ratio:16/9}
.f-v{aspect-ratio:9/16}
.pm-main .frame{height:auto}
.pm-verts .frame{height:auto;align-self:start}
.f-cap{position:absolute;left:14px;bottom:12px;font:500 .66rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.f-v .play{width:44px;height:44px}.f-v .play::after{border-left-width:12px;border-top-width:8px;border-bottom-width:8px}
@media (max-width:820px){.project-media{grid-template-columns:minmax(0,1fr)}.pm-verts{grid-template-columns:1fr 1fr}}
.pm-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:600px){.pm-photos{grid-template-columns:1fr 1fr}}
.photo{margin:0;aspect-ratio:4/5;border-radius:10px;position:relative;overflow:hidden;background:
  radial-gradient(120% 80% at 30% 20%,color-mix(in srgb,var(--signal) 35%,transparent),transparent 60%),
  linear-gradient(160deg,color-mix(in srgb,var(--ultra) 22%,var(--surface)),color-mix(in srgb,var(--ultra) 45%,var(--surface)));
  display:grid;place-items:end start;padding:12px}
.photo span{font:500 .64rem var(--f-mono);letter-spacing:.08em;color:var(--ink);opacity:.7}
.photo::before{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);border-radius:6px}

.f-v .f-cap{top:32px;bottom:auto;left:14px}
.photo{aspect-ratio:4/3}
@media (max-width:600px){.photo{aspect-ratio:4/5}}
nav.main a,.top .btn{white-space:nowrap}

nav.main a.nav-cta{display:none}
@media (max-width:1240px){nav.main a.nav-cta{display:block;margin-top:10px;background:var(--signal);color:var(--on-signal);text-align:center;font-weight:750}}
.top .cta-desk[aria-current]{box-shadow:inset 0 0 0 2px var(--on-signal)}

/* Aperçu des réalisations (accueil) */
.feat-works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.feat-work{display:grid;gap:14px;text-decoration:none;color:inherit}
.fw-media{display:grid;grid-template-columns:minmax(0,1.58fr) minmax(0,.5fr);gap:10px;align-items:start}
.fw-media .frame{margin:0}
.fw-v .f-cap{display:none}
.fw-v .ratio{display:none}
.fw-v .tcode{display:none}
.feat-work:hover .play{transform:scale(1.1)}
.fw-meta{display:grid;gap:6px}
.fw-meta h3{font-size:1.4rem}
@media (max-width:820px){.feat-works{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.feat-works{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:88%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;padding-bottom:8px;scrollbar-width:none}.feat-works>*{scroll-snap-align:start}.feat-works::-webkit-scrollbar{display:none}}

/* Médias réels (affiches, lecture) */
.frame.has-media{background-size:cover;background-position:center;text-decoration:none}
.frame.has-media::before{background:linear-gradient(180deg,rgba(8,10,40,.35),rgba(8,10,40,0) 30%,rgba(8,10,40,0) 65%,rgba(8,10,40,.55))}
.frame.has-media .corners{border-color:rgba(255,255,255,.35)}
a.frame{cursor:pointer;color:var(--on-brand)}
a.frame:hover .play{transform:scale(1.1)}
.frame.playing{background:#000}
.frame.playing iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.photo.has-media{background-size:cover;background-position:center}
.photo.has-media::before{display:none}
.pm-verts.is-scroll{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc(50% - 6px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.pm-verts.is-scroll>*{scroll-snap-align:start}
.swipe-note{color:var(--muted);margin-top:-6px}
.fw-v{display:grid;gap:10px}
.feat-works.single{grid-template-columns:minmax(0,1fr)}
.feat-works.single .fw-media{grid-template-columns:minmax(0,1.58fr) minmax(0,1.5fr)}
.feat-works.single .fw-v{grid-template-columns:repeat(3,minmax(0,1fr))}
.feat-works.single .fw-v .f-cap,.feat-works .fw-v .rec{display:none}
a.fw-meta{text-decoration:none;color:inherit}
a.fw-meta:hover h3{color:var(--ultra)}
@media (max-width:700px){.feat-works.single .fw-media{grid-template-columns:minmax(0,1fr)}.feat-works.single .fw-v{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Vidéo de fond de l'accueil (film Signature) */
.hero .display{font-size:clamp(2.5rem,6.6vw,5.3rem)}
.hero-video{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:center/cover no-repeat;container-type:size;z-index:0}
.hero-video iframe{position:absolute;top:50%;left:50%;width:max(100cqw,calc(100cqh * 16 / 9));height:max(100cqh,calc(100cqw * 9 / 16));transform:translate(-50%,-50%);border:0}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-video::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,color-mix(in srgb,var(--brand) 84%,transparent) 0%,color-mix(in srgb,var(--brand) 62%,transparent) 50%,color-mix(in srgb,var(--brand) 32%,transparent) 100%),
  linear-gradient(180deg,transparent 50%,var(--brand) 100%)}
.hero::before{z-index:1}
.hero .hero-flower{z-index:1}
.hero .wrap{z-index:2}
.hero.has-video .hero-flower{opacity:.07}
.hero-film{display:inline-flex;align-items:center;gap:8px;color:var(--on-brand);font-weight:650;text-decoration:none;padding:10px 4px;opacity:.85}
.hero-film:hover{opacity:1;text-decoration:underline}
.hero-film span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--signal);color:var(--on-signal);font-size:.7rem}
.split.faq-stack{grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,40px)}
.faq-stack .faq{max-width:920px}
/* Pied de page : texte blanc garanti, même si un ancien thème impose ses couleurs */
#univers-footer,#univers-footer p,#univers-footer a,#univers-footer span,#univers-footer h4,#univers-footer b,#univers-footer div,#univers-footer .foot-desc{color:#fff!important;-webkit-text-fill-color:#fff!important}
footer .foot h4,footer .foot-base,footer .foot-base a{opacity:.72}
#univers-footer .foot p{opacity:1}
#univers-footer .foot a:hover{color:var(--signal)!important;-webkit-text-fill-color:var(--signal)!important}
#univers-footer .socials.on-dark a:hover,#univers-footer .socials.on-dark a:hover span{color:var(--on-signal)!important;-webkit-text-fill-color:var(--on-signal)!important}
footer .foot a:hover{color:var(--signal)!important}
footer .socials.on-dark a:hover,footer .socials.on-dark a:hover span{color:var(--on-signal)!important}

/* À propos : portrait */
.about-intro h1{font-size:clamp(2.3rem,4.8vw,4.2rem)}
.about-intro{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);align-items:end;gap:clamp(24px,5vw,64px)}
.about-text{display:grid;gap:22px;min-width:0}
.about-photo{margin:0;position:relative;border-radius:20px;overflow:hidden;background:var(--brand-deep);max-width:440px;justify-self:end;width:100%}
.about-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.about-photo::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.28);border-radius:10px;pointer-events:none}
.about-photo figcaption{position:absolute;left:24px;bottom:22px;display:flex;align-items:center;gap:8px;color:#fff;font-size:.7rem;letter-spacing:.1em}
.about-photo figcaption i{width:8px;height:8px;border-radius:50%;background:#FF3B30;animation:rec 1.6s infinite}
@media (max-width:820px){.about-intro{grid-template-columns:minmax(0,1fr)}.about-photo{justify-self:start;max-width:360px}}

/* Tunnel de devis */
.funnel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);gap:clamp(20px,4vw,48px);align-items:start;padding-block:clamp(32px,5vw,56px)}
@media (max-width:900px){.funnel{grid-template-columns:minmax(0,1fr)}}
.fn-progress{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;counter-reset:none}
.fn-progress li{display:flex;align-items:center;gap:8px;font-weight:650;font-size:.9rem;color:var(--muted);padding-top:10px;border-top:3px solid var(--line);cursor:default;min-width:0}
.fn-progress li span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--line);color:var(--ink);font:600 .72rem var(--f-mono);flex:none}
.fn-progress li.is-done{color:var(--ink);border-color:var(--ultra);cursor:pointer}
.fn-progress li.is-done span{background:var(--ultra);color:#fff}
.fn-progress li.is-current{color:var(--ink);border-color:var(--signal)}
.fn-progress li.is-current span{background:var(--signal);color:var(--on-signal)}
@media (max-width:1100px){.fn-progress{display:flex}.fn-progress li{flex:1 1 0}.fn-progress li.is-current{flex:0 0 auto;padding-right:12px}.fn-progress li:not(.is-current){font-size:0;gap:0}.fn-progress li span{font-size:.72rem}}
.fn-step{border:0;margin:0;padding:0;display:grid;gap:16px;min-width:0}
.fn-title{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:850;font-stretch:115%;letter-spacing:-.015em;line-height:1.1;padding:0;margin-bottom:2px}
.fn-help{color:var(--muted)}
.fn-cards{display:grid;gap:10px}
.fn-offers{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.fn-offers{grid-template-columns:minmax(0,1fr)}}
.fn-card{position:relative;cursor:pointer;display:block}
.fn-card input{position:absolute;opacity:0;pointer-events:none}
.fn-card>span{display:grid;gap:4px;padding:16px 18px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);transition:border-color .2s,background .2s,transform .2s}
.fn-card:hover>span{border-color:var(--ultra)}
.fn-card b{font-weight:750;font-stretch:106%;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fn-card small{color:var(--muted);font-size:.9rem}
.fn-card strong{font-weight:800;font-stretch:110%;margin-top:4px}
.fn-card input:checked+span{border-color:var(--ultra);background:color-mix(in srgb,var(--ultra) 9%,var(--surface));box-shadow:inset 0 0 0 1px var(--ultra)}
.fn-card input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
.fn-reco{display:none;font:600 .62rem var(--f-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;background:var(--signal);color:var(--on-signal);padding:3px 7px;border-radius:999px}
.fn-card.is-reco .fn-reco{display:inline-block}
.fn-volume{display:grid;gap:8px;padding:16px 18px;border-radius:14px;background:var(--brand);color:var(--on-brand)}
.fn-volume .scale{color:color-mix(in srgb,var(--on-brand) 65%,transparent)}
.fn-vol-label{display:flex;justify-content:space-between;align-items:baseline;font-weight:650}
.fn-vol-label output{font-size:2rem;font-weight:900;color:var(--signal)}
.fn-volume input[type=range]{accent-color:var(--signal);width:100%}
.fn-label{font-weight:650;font-size:.92rem}
.fn-label small,.field label small{font-weight:400;color:var(--muted)}
.fn-checks,.fn-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.fn-checks label,.fn-pills label{position:relative;cursor:pointer}
.fn-checks input,.fn-pills input{position:absolute;opacity:0;pointer-events:none}
.fn-checks span,.fn-pills span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;font-size:.9rem;background:var(--paper)}
.fn-checks span::before{content:"+";font:600 .9rem var(--f-mono);color:var(--ultra)}
.fn-checks input:checked+span,.fn-pills input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fn-checks input:checked+span::before{content:"✓";color:var(--signal)}
.fn-checks input:focus-visible+span,.fn-pills input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
.fn-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}
.fn-nav #fnNext,.fn-nav #fnSubmit{margin-left:auto}
.fn-err{color:#c2410c;font-weight:600}
.fn-summary{position:sticky;top:96px;background:var(--brand);color:var(--on-brand);border-radius:22px;padding:24px;display:grid;gap:16px}
@media (max-width:900px){.fn-summary{position:static}}
.fn-mobile-estim{display:none}
@media (max-width:900px){.fn-mobile-estim{display:flex;justify-content:space-between;align-items:baseline;gap:12px;position:sticky;bottom:0;z-index:5;background:var(--brand);color:var(--on-brand);border-radius:14px;padding:12px 16px;margin-top:4px;box-shadow:0 -8px 24px rgba(13,17,80,.18)}.fn-mobile-estim b{color:var(--signal);font-weight:900;font-stretch:110%}}
.fn-sum-label{color:color-mix(in srgb,var(--on-brand) 65%,transparent)}
.fn-summary dl{margin:0;display:grid}
.fn-summary dl>div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.16);font-size:.92rem}
.fn-summary dt{color:color-mix(in srgb,var(--on-brand) 65%,transparent);flex:none}
.fn-summary dd{margin:0;font-weight:650;text-align:right;min-width:0}
.fn-estim{display:grid;gap:4px;background:var(--brand-deep);border-radius:14px;padding:16px}
.fn-estim .mono{color:color-mix(in srgb,var(--on-brand) 65%,transparent)}
.fn-estim b{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;font-stretch:112%;color:var(--signal);font-variant-numeric:tabular-nums;line-height:1.05}
.fn-estim small{color:color-mix(in srgb,var(--on-brand) 70%,transparent);font-size:.82rem}
.fn-promise{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.88rem;color:color-mix(in srgb,var(--on-brand) 85%,transparent)}
.fn-promise li::before{content:"✓ ";color:var(--signal);font-weight:800}
@media (max-width:900px){.fn-summary .fn-promise{display:none}}

/* Tunnel : timeline de montage animée */
.fn-reel{background:var(--brand-deep);color:var(--on-brand);border-radius:18px;padding:16px 16px 14px;display:grid;gap:10px;margin-bottom:8px;overflow:hidden;position:relative}
.fn-reel-head{display:flex;align-items:center;gap:12px;justify-content:space-between;color:color-mix(in srgb,var(--on-brand) 75%,transparent);font-size:.68rem;flex-wrap:wrap}
.fn-reel-head>span:nth-child(2){flex:1;min-width:0}
.fn-rec{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600}
.fn-rec i{width:8px;height:8px;border-radius:50%;background:#FF3B30;animation:rec 1.6s infinite}
.fn-tc{color:var(--signal);font-variant-numeric:tabular-nums}
.fn-ruler{display:flex;justify-content:space-between;font-size:.6rem;color:color-mix(in srgb,var(--on-brand) 45%,transparent);border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:6px}
.fn-track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;height:64px}
.fn-slot{position:relative;display:block;height:100%;border:1.5px dashed rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.04);cursor:default;min-width:0;overflow:hidden;transition:border-color .3s,background .3s}
.fn-slot-label{position:absolute;inset:0;display:grid;place-items:center;font:600 .66rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--on-brand) 45%,transparent);transition:opacity .3s}
.fn-slot.is-current{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 10%,transparent);animation:slotPulse 1.8s ease-in-out infinite}
@keyframes slotPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--signal) 0%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 35%,transparent)}}
.fn-slot.is-current .fn-slot-label{color:var(--signal)}
.fn-slot.is-nav{cursor:pointer}
.fn-slot.is-filled{border-style:solid;border-color:transparent}
.fn-slot.is-filled .fn-slot-label{opacity:0}
.fn-clip{position:absolute;inset:0;border-radius:9px;color:var(--on-signal);display:grid;align-content:center;gap:2px;padding:6px 10px;text-align:left;transform-origin:left center;transform:scaleX(0);opacity:0;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .3s}
.fn-clip::after{content:"";position:absolute;inset:0;border-radius:9px;background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(0,0,0,.08) 18px 19px);pointer-events:none}
.fn-clip b{font-weight:800;font-stretch:108%;font-size:.78rem;line-height:1.1}
.fn-clip small{font:500 .64rem var(--f-mono);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn-slot.is-filled .fn-clip{transform:none;opacity:1}
.fn-slot.is-filled.is-current{animation:none;box-shadow:0 0 0 3px var(--signal)}
.fn-slot.is-nav:hover .fn-clip{filter:brightness(1.08)}
.fn-slot:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.fn-head{position:absolute;top:-8px;bottom:-8px;width:2px;background:var(--signal);left:0;transform:translateX(var(--x,0px));transition:transform .7s cubic-bezier(.22,1,.36,1);pointer-events:none;box-shadow:0 0 12px color-mix(in srgb,var(--signal) 70%,transparent);z-index:2}
.fn-head::before{content:"";position:absolute;top:0;left:-6px;border:7px solid transparent;border-top:9px solid var(--signal)}
.fn-wave{display:flex;align-items:flex-end;gap:3px;height:18px;opacity:.55}
.fn-wave i{flex:1;background:color-mix(in srgb,var(--on-brand) 55%,transparent);border-radius:2px;height:20%;transition:height .35s}
.fn-reel.is-live .fn-wave i{animation:wave 1.1s ease-in-out infinite}
.fn-wave i:nth-child(3n){animation-delay:-.3s}.fn-wave i:nth-child(4n){animation-delay:-.6s}.fn-wave i:nth-child(5n){animation-delay:-.15s}.fn-wave i:nth-child(7n){animation-delay:-.8s}
@keyframes wave{0%,100%{height:15%}50%{height:95%}}
.fn-reel.is-render .fn-clip{animation:flash .5s ease 2}
@keyframes flash{50%{filter:brightness(1.35)}}
@media (max-width:620px){.fn-track{height:56px}.fn-clip small{display:none}.fn-clip b{font-size:.7rem}.fn-reel-head>span:nth-child(2){display:none}}

/* Accueil épuré : titre + boutons sur la vidéo, calés à gauche */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-clean .wrap{min-height:clamp(440px,72vh,760px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(24px,4vw,40px);padding-block:clamp(56px,9vw,110px)}
.hero-clean .display{max-width:min(100%,820px);text-align:left}
.hero-clean .hero-row{justify-content:flex-start}
.hero-clean .hero-video::after{background:
  linear-gradient(90deg,color-mix(in srgb,var(--brand) 80%,transparent) 0%,color-mix(in srgb,var(--brand) 45%,transparent) 55%,color-mix(in srgb,var(--brand) 10%,transparent) 100%),
  linear-gradient(180deg,transparent 70%,color-mix(in srgb,var(--brand) 60%,transparent) 100%)}
@media (max-width:600px){.hero-clean .wrap{min-height:clamp(420px,78vh,640px)}.hero-clean .display{max-width:none}}
/* Timeline des offres sur la page Services */
.svc-reel .timeline{margin-top:0;color:var(--on-brand)}

/* Projets : galerie photo justifiée (respecte paysage et portrait), badges diffusion */
.pm-photos.justified{display:flex;flex-wrap:wrap;gap:12px}
.pm-photos.justified .photo{flex:var(--r) 1 calc(var(--r) * 140px);aspect-ratio:var(--r);height:auto;min-width:0}
.side-photo::before{display:none}
.side-photo .ratio{top:12px;right:14px}
.project-media.no-verts .pm-main{max-width:900px}

.project-media.no-verts{grid-template-columns:minmax(0,1fr)}
.proj-badges{display:flex;flex-wrap:wrap;gap:8px}
.proj-badges span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--brand);color:var(--on-brand);font:600 .72rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.proj-badges span:first-child::before{content:"";width:8px;height:8px;border-radius:50%;background:#FF3B30;animation:rec 1.6s infinite}
.fw-photo .ratio{top:12px;right:14px}
.fw-photo::before{display:none}
.project{scroll-margin-top:96px}
.svc-example{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--ultra);text-decoration:none}
.svc-example:hover{text-decoration:underline}
.svc-links,.proj-links{display:flex;flex-wrap:wrap;gap:10px 22px}
.svc-example i{width:8px;height:8px;border-radius:50%;background:#FF3B30;animation:rec 1.6s infinite}

/* Logos clients : deux bandeaux en sens contraire */
.marquees{display:grid;gap:12px}
.marquee.rev .marquee-track{animation-direction:reverse;animation-duration:62s}
.marquees .marquee-track{animation-duration:55s}
.marquees:hover .marquee-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.marquees .marquee-track{animation:slide 90s linear infinite!important}.marquee.rev .marquee-track{animation-direction:reverse!important}}

/* Logos clients : même taille visuelle, en couleur, lisibles */
.logo-slot{width:184px;height:92px;border:1px solid var(--line);border-style:solid;background:#fff;text-decoration:none}
.logo-slot img{max-width:none;max-height:none;object-fit:contain;filter:none;opacity:1}
a.logo-slot{transition:transform .25s,box-shadow .25s,border-color .25s}
a.logo-slot:hover{transform:translateY(-3px);border-color:var(--ultra);box-shadow:0 8px 20px rgba(13,17,80,.12)}
.logo-slot:hover img{filter:none}
@media (max-width:600px){.logo-slot{width:150px;height:78px}.logo-slot img{transform:scale(.85)}}

/* À propos : vidéo de présentation */
.about-video{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:820px){.about-video{grid-template-columns:minmax(0,1fr)}}
.about-vid{text-decoration:none;color:var(--on-brand)}
.about-vid:hover .play{transform:scale(1.1)}
.about-vid-text{display:grid;gap:16px;align-content:center}


/* Photos des projets en vraies images (référencement) */
.photo.img,.frame.img{background:none}
.photo.img img,.frame.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.photo.img{position:relative}
@media (prefers-reduced-motion:reduce){*:not(.fn-reel,.fn-reel *){animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* --- Ajouts WordPress --- */
body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.admin-bar header.top{top:32px}
@media (max-width:782px){.admin-bar header.top{top:46px}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{border-radius:14px;padding:16px 18px;font-weight:600}
.notice-ok{background:color-mix(in srgb,var(--clip-c) 30%,var(--surface));color:var(--ink)}
.notice-err{background:color-mix(in srgb,var(--clip-d) 30%,var(--surface));color:var(--ink)}
.entry{max-width:72ch;padding-block:clamp(32px,6vw,64px)}
.entry h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-top:1.6em}
.entry p,.entry li{color:var(--ink);max-width:none}
.entry a{color:var(--ultra)}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.blog-grid{grid-template-columns:minmax(0,1fr)}}
.blog-card{display:grid;gap:10px;align-content:start;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .25s,border-color .25s}
.blog-card:hover{transform:translateY(-3px);border-color:var(--ultra)}
.blog-card .bc-img{aspect-ratio:16/9;background:var(--brand) center/cover no-repeat;position:relative}
.blog-card .bc-img img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card .bc-body{display:grid;gap:8px;padding:6px 20px 22px}
.blog-card h2,.blog-card h3{font-size:1.25rem;font-stretch:108%;line-height:1.15}
.blog-card p{color:var(--muted);font-size:.95rem}
.blog-card .mono{color:var(--ultra)}
.blog-pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.blog-pagination a,.blog-pagination span{padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);text-decoration:none;font-weight:650}
.blog-pagination .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.actu-card .actu-band{height:8px;background:var(--ultra)}
.actu-card .bc-body{padding-top:14px}
.actu-card .bc-img+.bc-body{padding-top:6px}
.actu-card .actu-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;margin-top:4px;font-size:.85rem;color:var(--muted)}
.actu-card .actu-li{font-weight:650;color:var(--ultra)}
.post-article{max-width:860px}
.post-intro .eyebrow a{color:inherit;text-decoration:none}
.post-intro h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.05}
.post-cover{margin:28px 0 0;border-radius:18px;overflow:hidden}
.post-cover img{width:100%;height:auto;display:block}
.entry{font-size:1.08rem;line-height:1.75}
.entry h2{margin:1.6em 0 .5em}
.entry ul{padding-left:1.2em;display:grid;gap:.4em}
.post-author{display:flex;gap:16px;align-items:center;padding:20px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);margin:8px 0 40px}
.post-author img{width:72px;height:90px;object-fit:cover;border-radius:12px;flex:none}
.post-author div{display:grid;gap:4px}
.post-author span{color:var(--muted)}
.post-author a{color:var(--ultra);font-weight:700;text-decoration:none}
.review p.rv-text{color:var(--ink);font-size:.98rem;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.review .rv-name{font-weight:700}
.review .rv-when{color:var(--muted);font-size:.85rem}
.review img.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}
.review .rv-src{font:500 .66rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.univers-settings code{background:#f0f0f1;padding:2px 5px}

/* Polices verrouillées */
html body.univers-site,html body.univers-site :is(h1,h2,h3,h4,h5,h6,p,a,li,span,button,input,select,textarea,label,summary,dd,dt,b,strong,small,em,div,figcaption,td,th,legend,output,nav,header,footer,section,article){font-family:var(--f-display)!important}
html body.univers-site .mono,html body.univers-site .mono *,html body.univers-site .tc,html body.univers-site .tc *,html body.univers-site .tl-ruler,html body.univers-site .tl-ruler *,html body.univers-site .tl-label,html body.univers-site .tl-label *,html body.univers-site .clip small,html body.univers-site .clip small *,html body.univers-site th,html body.univers-site th *,html body.univers-site .frame .rec,html body.univers-site .frame .rec *,html body.univers-site .frame .tcode,html body.univers-site .frame .tcode *,html body.univers-site .frame .ratio,html body.univers-site .frame .ratio *,html body.univers-site .chips span small,html body.univers-site .chips span small *,html body.univers-site .foot h4,html body.univers-site .foot h4 *,html body.univers-site .logo .tagline text,html body.univers-site .logo .tagline text *,html body.univers-site .logo .rec-dot,html body.univers-site .logo .rec-dot *,html body.univers-site .hero h1.seo-h1,html body.univers-site .hero h1.seo-h1 *,html body.univers-site .kw span,html body.univers-site .kw span *,html body.univers-site .logo-slot,html body.univers-site .logo-slot *,html body.univers-site .review .slot-label,html body.univers-site .review .slot-label *,html body.univers-site .f-cap,html body.univers-site .f-cap *,html body.univers-site .photo span,html body.univers-site .photo span *,html body.univers-site .fn-progress li span,html body.univers-site .fn-progress li span *,html body.univers-site .fn-reco,html body.univers-site .fn-reco *,html body.univers-site .fn-slot-label,html body.univers-site .fn-slot-label *,html body.univers-site .fn-clip small,html body.univers-site .fn-clip small *,html body.univers-site .proj-badges span,html body.univers-site .proj-badges span *{font-family:var(--f-mono)!important}
html body.univers-site .serif,html body.univers-site .serif *,html body.univers-site .offer .tag,html body.univers-site .offer .tag *,html body.univers-site .sheet-body .tag,html body.univers-site .sheet-body .tag *,html body.univers-site .value .big,html body.univers-site .value .big *{font-family:var(--f-serif)!important}
html body.univers-site .serif,html body.univers-site .tag{font-family:var(--f-serif)!important}
html body.univers-site .mono,html body.univers-site .mono *,html body.univers-site .tc{font-family:var(--f-mono)!important}