/*
Theme Name: FLUO.
Theme URI: https://fluofilm.com
Author: FLUO.
Description: Thème sur mesure du studio audiovisuel FLUO. On surligne l'essentiel.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: fluo
*/

/* ---------- Polices (hébergées localement) ---------- */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-tight-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/inter-tight-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-tight-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-tight-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/inter-tight-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/inter-tight-latin-800-normal.woff2) format('woff2')}

/* ---------- Jetons ---------- */
:root{
  --fluo:#EDFD53;
  --ink:#171717;
  --ink-deep:#0E0E0E;
  --paper:#F5F3EE;
  --paper-2:#E8E6E0;
  --line-dark:#4A4A47;
  --line-paper:#D8D6CF;
  --grey-1:#D6D4CE;
  --grey-2:#B4B4AE;
  --grey-3:#A3A39E;
  --grey-4:#5C5B57;
  --grey-5:#3E3D3A;
  --wrap:1360px;
  --gutter:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0}
button{font:inherit}
:focus-visible{outline:2px solid var(--fluo);outline-offset:3px}
.paper :focus-visible,.fluo-bg :focus-visible{outline-color:var(--ink)}
.screen-reader-text,.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}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;z-index:1000;background:var(--fluo);color:var(--ink);padding:12px 18px;border-radius:999px;font-weight:700}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:136px;padding-bottom:136px}
.section-sm{padding-top:96px;padding-bottom:96px}
.ink{background:var(--ink);color:var(--paper)}
.deep{background:var(--ink-deep);color:var(--paper)}
.paper{background:var(--paper);color:var(--ink)}
.fluo-bg{background:var(--fluo);color:var(--ink)}
.border-top-paper{border-top:1px solid var(--line-paper)}

/* ---------- Typo ---------- */
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2)}
.paper .eyebrow{color:var(--grey-4)}
.h-xl{font-size:clamp(50px,7.6vw,124px);line-height:.95;font-weight:800;letter-spacing:-.05em}
.h-lg{font-size:clamp(40px,5.4vw,80px);line-height:.98;font-weight:700;letter-spacing:-.04em}
.h-md{font-size:clamp(36px,4.6vw,64px);line-height:1;font-weight:700;letter-spacing:-.04em}
.h-sm{font-size:clamp(32px,3.6vw,48px);line-height:1;font-weight:700;letter-spacing:-.04em}
.lead{font-size:20px;color:var(--grey-1);max-width:640px}
.paper .lead{color:var(--grey-5)}
.muted{color:var(--grey-3)}
.paper .muted{color:var(--grey-4)}
.small{font-size:15px}
.kicker{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-3)}
.paper .kicker{color:var(--grey-4)}

/* ---------- Trait de surligneur ----------
   Le trait est une image de fond qui se répète sur chaque ligne du texte
   (box-decoration-break), ce qui garde un trait propre quand le texte passe à la ligne.
   Les formes des traits sont définies dans inc/helpers.php (fluo_mark_css). */
.mk{display:inline;color:var(--ink);background-repeat:no-repeat;background-size:100% 100%;background-position:0 0;padding:0 .14em;margin:0 -.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mk-h{color:inherit;background-size:0% 100%;background-position:0 0;transition:background-size .55s cubic-bezier(.3,.8,.3,1),color .3s}
.mk-h:hover,a:hover .mk-h,.svc:hover .mk-h,.svc:focus-within .mk-h,.card:hover .mk-h,.card:focus-visible .mk-h,.jargon:hover .mk-h,.jargon:focus-within .mk-h,.jargon:focus .mk-h,.chip-zone:hover .mk-h,.rel-list a:hover .mk-h{color:var(--ink);background-size:100% 100%}
@keyframes fluo-reveal{from{background-size:0% 100%}to{background-size:100% 100%}}
@supports (animation-timeline: view()){.mk-a{animation:fluo-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 100%}}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;font-weight:700;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;line-height:1.2;text-align:center}
.btn-lg{min-height:56px;padding:16px 28px;font-size:19px}
.btn-fluo{background:var(--fluo);color:var(--ink);border-color:var(--fluo)}
.btn-fluo:hover,.btn-fluo:focus-visible{background:transparent;color:var(--fluo)}
.paper .btn-fluo:hover,.paper .btn-fluo:focus-visible{color:var(--ink);border-color:var(--ink)}
.btn-line{color:var(--paper);border-color:var(--paper);font-weight:600}
.btn-line:hover,.btn-line:focus-visible{background:var(--paper);color:var(--ink)}
.btn-line-ink{color:var(--ink);border-color:var(--ink);font-weight:600}
.btn-line-ink:hover,.btn-line-ink:focus-visible{background:var(--ink);color:var(--paper)}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover,.btn-ink:focus-visible{background:transparent;color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- En-tête ---------- */
.site-header{position:relative;z-index:20}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;padding-bottom:24px}
.logo{display:flex;align-items:center;min-height:44px;font-weight:800;font-size:28px;letter-spacing:-.03em;text-decoration:none;color:var(--paper)}
.logo .dot{color:var(--fluo)}
.nav{display:flex;align-items:center;gap:26px;font-size:16px;font-weight:500}
.nav > a:not(.btn),.nav-drop > button{color:var(--paper);text-decoration:none;background:none;border:0;padding:6px 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav > a:not(.btn)[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--fluo)}
.nav-drop{position:relative}
.nav-drop-panel{position:absolute;top:calc(100% + 12px);left:-20px;min-width:300px;background:var(--ink);border:1px solid var(--line-dark);border-radius:8px;padding:10px;display:none;flex-direction:column}
.nav-drop.open .nav-drop-panel{display:flex}
.nav-drop-panel a{display:block;padding:10px 12px;border-radius:6px;text-decoration:none;color:var(--paper)}
.nav-drop-panel a:hover,.nav-drop-panel a:focus-visible{background:#262624}
.nav-toggle{display:none;background:none;border:1px solid var(--line-dark);color:var(--paper);border-radius:999px;min-height:44px;padding:0 18px;font-weight:600;cursor:pointer}
.switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 14px 6px 6px;border:1px solid #5A5A56;border-radius:999px;background:transparent;color:var(--paper);font-size:14px;font-weight:600;cursor:pointer}
.switch-track{position:relative;width:44px;height:26px;border-radius:999px;background:var(--fluo);transition:background-color .2s}
.switch-knob{position:absolute;top:3px;left:21px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:left .2s}
.is-gris .switch-track{background:#6B6B67}
.is-gris .switch-knob{left:3px}
@media (max-width:980px){
  .nav-toggle{display:inline-flex;align-items:center}
  .nav{position:absolute;top:100%;left:var(--gutter);right:var(--gutter);flex-direction:column;align-items:stretch;gap:4px;background:var(--ink);border:1px solid var(--line-dark);border-radius:10px;padding:12px;display:none}
  .nav.open{display:flex}
  .nav > a:not(.btn),.nav-drop > button{padding:12px}
  .nav-drop-panel{position:static;min-width:0;border:0;padding:0 0 0 12px}
  .nav .btn,.nav .switch{align-self:flex-start;margin:6px 0 0 6px}
}

/* ---------- Fil d'Ariane ---------- */
.crumbs{font-size:14px;color:var(--grey-3);margin-bottom:40px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--paper)}
.crumbs .sep{margin:0 6px}

/* ---------- Accueil : hero ---------- */
.hero{position:relative;min-height:860px;display:flex;flex-direction:column;background:var(--ink-deep);overflow:hidden;--mx:-100px;--my:-100px}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.hero-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(14,14,14,.92) 0%,rgba(14,14,14,.45) 45%,rgba(14,14,14,.35) 100%)}
.hl-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-body{position:relative;flex:1;width:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:28px;padding-bottom:96px}
.hero .blend{mix-blend-mode:difference}
.hero h1{font-size:clamp(46px,6.4vw,104px);line-height:.95;font-weight:800;letter-spacing:-.05em}
.hero-foot{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between}
.hl-tip{position:absolute;left:var(--mx);top:var(--my);width:0;height:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .2s}
.hl-tip svg{position:absolute;left:0;top:-24px;overflow:visible;transform-origin:0 24px;transform:rotate(-40deg) scale(.72);filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));max-width:none}
@media (hover:hover) and (pointer:fine){
  .hero.has-pen{cursor:none}
  .hero.has-pen a,.hero.has-pen button{cursor:none}
  .hero.has-pen:hover .hl-tip{opacity:1}
}
.gris-note{display:none;flex-wrap:wrap;align-items:center;gap:16px;border:1px solid #5A5A56;padding:14px 18px;align-self:flex-start}
.is-gris .gris-note{display:flex}
.gris-note button{font-weight:700;min-height:44px;padding:8px 18px;border:0;border-radius:999px;background:var(--paper);color:var(--ink);cursor:pointer}
.is-gris .hero h1{font-size:clamp(30px,3.6vw,50px);font-weight:500;letter-spacing:-.01em;line-height:1.15;max-width:1100px}
.page-root{transition:filter .5s ease}
.is-gris .page-root{filter:grayscale(1) contrast(.6) brightness(1.05)}
.is-gris .hl-canvas,.is-gris .hl-tip{display:none}
.is-gris .mk{background-image:none!important;color:inherit}

/* ---------- Bandeau défilant ---------- */
.ticker{overflow:hidden;white-space:nowrap;background:var(--ink);border-top:1px solid #333331;border-bottom:1px solid #333331;padding:20px 0}
.ticker-track{display:inline-flex;align-items:center;animation:fluo-tick 70s linear infinite;font-size:22px;font-weight:600;letter-spacing:-.01em}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{padding:0 22px}
.ticker-track .dot{color:var(--fluo);padding:0}
@keyframes fluo-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Grilles génériques ---------- */
.grid-auto{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid-cards{display:grid;gap:44px 24px;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.split{display:grid;gap:56px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
.ruled{border-top:2px solid currentColor;padding-top:20px;display:flex;flex-direction:column;gap:12px}
.ruled-thin{border-top:1px solid currentColor;padding-top:16px;display:flex;flex-direction:column;gap:12px}

/* ---------- Bandeau de logos clients ---------- */
.clients{padding-top:24px;padding-bottom:120px}
.clients .eyebrow{margin-bottom:8px}
.logo-band{position:relative;overflow:hidden;padding:104px 0 40px}
.logo-band::before,.logo-band::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.logo-band::before{left:0;background:linear-gradient(to right,var(--paper),rgba(245,243,238,0))}
.logo-band::after{right:0;background:linear-gradient(to left,var(--paper),rgba(245,243,238,0))}
.logo-track{display:flex;width:max-content;align-items:center;will-change:transform}
.logo-item{position:relative;flex:none;display:flex;align-items:center;justify-content:center;height:96px;padding:0 44px}
.logo-item img{position:relative;z-index:1;max-height:52px;max-width:180px;width:auto;height:auto;filter:grayscale(1);opacity:.6;transition:filter .35s,opacity .35s}
.logo-item.is-lit img{filter:none;opacity:1}
.logo-hl{position:absolute;right:14px;top:50%;height:74%;width:0;transform:translateY(-50%) rotate(-1.5deg);background-size:100% 100%;background-repeat:no-repeat}
.logo-pen{position:absolute;left:50%;top:152px;z-index:3;width:0;height:0;pointer-events:none}
.logo-pen svg{position:absolute;left:-2px;top:-24px;transform-origin:2px 24px;transform:rotate(-58deg) scale(.72);filter:drop-shadow(6px 10px 8px rgba(0,0,0,.22));max-width:none;animation:fluo-pen 1.6s ease-in-out infinite}
@keyframes fluo-pen{0%,100%{transform:rotate(-58deg) scale(.72)}50%{transform:translateY(-3px) rotate(-55deg) scale(.72)}}
.logo-band.is-static .logo-track{flex-wrap:wrap;justify-content:center;width:auto;row-gap:16px}
.logo-band.is-static .logo-pen{display:none}
.logo-band.is-static .logo-item img{filter:none;opacity:1}

/* ---------- Méthode ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:48px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.steps h3{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.steps ul{margin:0;padding-left:18px;font-size:15px;color:var(--grey-4);display:flex;flex-direction:column;gap:4px}
.ink .steps ul{color:var(--grey-3)}

/* ---------- Cartes réalisations ---------- */
.card{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.card .thumb-wrap{overflow:hidden}
.card .thumb{aspect-ratio:16/9;width:100%;object-fit:cover;background:#2A2826;filter:grayscale(.6) brightness(.8);transition:filter .4s,transform .6s cubic-bezier(.2,1,.3,1)}
.card:hover .thumb,.card:focus-visible .thumb{filter:none;transform:scale(1.03)}
.card h3{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.thumb-empty{display:block;background:#2A2826 url(assets/img/hero.jpg) center/cover;font-size:0}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chip{font-size:14px;font-weight:600;min-height:40px;padding:6px 16px;border-radius:999px;cursor:pointer;border:1px solid #5A5A56;background:transparent;color:var(--paper);transition:background-color .2s,color .2s,border-color .2s}
.chip[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.paper .chip{border:1.5px solid var(--ink);color:var(--ink)}
.paper .chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.chips-label{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-4);width:88px}
[data-filter-item][hidden]{display:none}

/* ---------- Jargon ---------- */
.jargon-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.jargon{display:grid;gap:12px 48px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));align-items:baseline;padding:28px 0;border-bottom:1px solid var(--ink)}
.jargon .avant{font-size:clamp(19px,2vw,26px);color:var(--grey-4)}
.jargon .apres{font-size:clamp(21px,2.3vw,30px);font-weight:600;letter-spacing:-.015em}
.strike{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 55%;background-size:0% 2px;transition:background-size .45s ease}
.jargon:hover .strike,.jargon:focus-within .strike,.jargon:focus .strike{background-size:100% 2px}

/* ---------- Liste des services ---------- */
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.svc{border-bottom:1px solid var(--line-dark);padding:26px 0}
.svc a{display:flex;flex-direction:column;text-decoration:none}
.svc-row{display:flex;align-items:baseline;gap:24px}
.svc-num{font-size:14px;font-weight:600;color:var(--grey-3);width:32px;flex:none}
.svc-title{flex:1;font-size:clamp(30px,3.8vw,54px);font-weight:600;letter-spacing:-.035em;line-height:1.08}
.svc .arrow{font-size:28px;transition:transform .3s}
.svc:hover .arrow{transform:translateX(8px)}
.svc-d{display:flex;flex-wrap:wrap;gap:8px 40px;padding-left:56px;font-size:17px;color:var(--grey-1);max-height:0;opacity:0;overflow:hidden;transition:max-height .35s,opacity .25s,margin .25s}
.svc:hover .svc-d,.svc:focus-within .svc-d{max-height:200px;opacity:1;margin-top:14px}
.svc-d p:first-child{flex:2 1 380px}
.svc-d p:last-child{flex:1 1 240px}
@media (hover:none){.svc-d{max-height:none;opacity:1;margin-top:14px}}

/* ---------- Manifeste ---------- */
.manifeste{position:relative;overflow:hidden;background:var(--ink-deep)}
.manifeste::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 20% 60%,#262624 0%,var(--ink-deep) 70%)}
.manifeste .wrap{position:relative;padding-top:160px;padding-bottom:160px;display:flex;flex-direction:column;gap:28px}
.manifeste p.big{font-size:clamp(30px,3.8vw,56px);line-height:1.15;font-weight:500;letter-spacing:-.03em;max-width:1150px}

/* ---------- Lignes cliquables ---------- */
.rows{display:grid;gap:0 48px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.row{border-top:1px solid var(--ink);padding:22px 0 26px;display:flex;flex-direction:column;gap:6px;text-decoration:none;transition:padding-left .25s}
.row h3{font-size:24px;font-weight:700;letter-spacing:-.02em}
.row p{font-size:16px;color:var(--grey-5)}

/* ---------- Avis ---------- */
.quote blockquote{margin:0;font-size:24px;line-height:1.3;font-weight:500;letter-spacing:-.02em}
.quote figcaption{font-size:15px;color:var(--grey-5)}
.quote figcaption strong{color:var(--ink)}

/* ---------- Zones ---------- */
.zones{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;align-items:flex-start}
.chip-zone{display:inline-flex;align-items:center;justify-content:center;height:44px;box-sizing:border-box;border:1px solid var(--ink);border-radius:22px;padding:0 18px;font-size:15px;line-height:1;font-weight:500;text-decoration:none}
.chip-zone .mk{margin:0;padding:3px 4px}

/* ---------- FAQ ---------- */
.faq{border-bottom:1px solid var(--ink)}
.ink .faq{border-color:var(--line-dark)}
.faq details{border-top:1px solid var(--ink);padding:20px 0}
.ink .faq details{border-color:var(--line-dark)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:16px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:20px;font-weight:600;letter-spacing:-.01em}
.faq summary .plus{font-size:26px;transition:transform .2s}
.faq details[open] .plus{transform:rotate(45deg)}
.faq details p{margin-top:14px;font-size:17px;color:var(--grey-5)}
.ink .faq details p{color:var(--grey-1)}

/* ---------- CTA fluo ---------- */
.cta-final .wrap{padding-top:136px;padding-bottom:136px;display:flex;flex-direction:column;gap:32px}
.cta-final h2{font-size:clamp(52px,8.6vw,136px);line-height:.92;font-weight:800;letter-spacing:-.05em;max-width:1200px}
.cta-final p{font-size:21px;max-width:600px}

/* ---------- Pages services ---------- */
.svc-hero{padding-top:40px;padding-bottom:96px}
.svc-hero-grid{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-end}
.svc-hero-grid > div:first-child{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:24px}
.svc-hero-grid > div:last-child{flex:1 1 380px;min-width:0}
.svc-hero h1{font-size:clamp(40px,5.4vw,84px);line-height:.96;font-weight:800;letter-spacing:-.05em}
.obj-list{list-style:none;margin:0;padding:0}
.obj-list li{border-top:1px solid var(--ink);padding:22px 0;display:grid;grid-template-columns:48px 1fr;gap:12px}
.obj-list h3{font-size:22px;font-weight:700;letter-spacing:-.02em}
.obj-list p{font-size:16px;color:var(--grey-5);margin-top:6px}
.table-wrap{overflow-x:auto}
.formats{width:100%;min-width:620px;border-collapse:collapse;font-size:17px}
.formats thead tr{text-align:left;border-bottom:2px solid var(--ink)}
.formats th[scope=col]{padding:14px 16px;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.formats th[scope=col]:first-child,.formats tbody th{padding-left:0}
.formats tbody tr{border-bottom:1px solid #C9C7C0}
.formats tbody th{text-align:left;padding:18px 16px 18px 0;font-weight:700}
.formats td{padding:18px 16px}
.formats td:last-child{color:var(--grey-5);padding-right:0}
.inclus{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.inclus li{display:flex;gap:12px;align-items:baseline}
.inclus li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--fluo);transform:translateY(-1px)}
.box-devis{display:flex;flex-direction:column;gap:18px;border:1px solid var(--line-dark);padding:32px}
.rel-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.rel-list li{border-bottom:1px solid var(--line-dark)}
.rel-list a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:24px 0;text-decoration:none;transition:padding-left .25s}
.rel-list a:hover{padding-left:12px}
.rel-list .name{font-size:clamp(28px,3.4vw,48px);font-weight:600;letter-spacing:-.03em}

/* ---------- Vidéo (façade, chargée au clic) ---------- */
.video{position:relative;aspect-ratio:16/9;background:#2A2826;overflow:hidden}
.video img,.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;color:var(--ink)}
.video-play span{width:88px;height:88px;border-radius:50%;background:var(--fluo);display:flex;align-items:center;justify-content:center;font-size:28px;transition:transform .2s}
.video-play:hover span{transform:scale(1.08)}
.video-empty{position:absolute;left:16px;bottom:14px;font-size:14px;font-weight:600;color:var(--paper);background:rgba(23,23,23,.7);padding:6px 12px;border-radius:999px}

/* ---------- Fiche réalisation ---------- */
.facts{margin:32px 0 0;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--line-dark);padding-top:24px}
.facts dt{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-3)}
.facts dd{margin:6px 0 0;font-weight:600}
.gallery{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- Formulaire ---------- */
.form{display:flex;flex-direction:column;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
.form input,.form select,.form textarea{font:inherit;font-weight:400;font-size:17px;min-height:48px;padding:12px 14px;border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--ink);width:100%}
.form textarea{resize:vertical;min-height:120px}
.form-row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:14px}
.notice{padding:16px 18px;border-radius:6px;font-weight:600}
.notice-ok{background:var(--ink);color:var(--paper)}
.notice-err{background:#fff;color:#8A1F11;border:1.5px solid #8A1F11}

/* ---------- Blog / contenu ---------- */
.prose{max-width:760px;font-size:19px;line-height:1.65}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:34px;line-height:1.1;font-weight:700;letter-spacing:-.03em;margin-top:1.8em}
.prose h3{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:1.5em}
.prose a{text-decoration-color:var(--fluo);text-decoration-thickness:3px;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.2em}
.prose img{height:auto}
.prose blockquote{margin:0;padding-left:20px;border-left:4px solid var(--fluo);font-size:22px}
.pagination{display:flex;gap:12px;margin-top:56px}
.pagination a,.pagination span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:999px;padding:0 14px;text-decoration:none}
.pagination .current{background:var(--ink);color:var(--paper)}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--ink)}
.footer-grid{padding-top:80px;padding-bottom:32px;display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));font-size:15px}
.footer-logo{font-weight:800;font-size:56px;letter-spacing:-.04em;line-height:1}
.footer-logo .dot{color:var(--fluo);animation:fluo-blink 1.6s steps(1) infinite}
@keyframes fluo-blink{50%{opacity:.25}}
.footer-grid nav{display:flex;flex-direction:column;gap:8px}
.footer-grid nav a{text-decoration:none}
.footer-grid nav a:hover{text-decoration:underline}
.footer-bottom{padding-bottom:32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:14px;color:var(--grey-3)}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:20px}

@media (max-width:640px){
  .logo-band::before,.logo-band::after{width:40px}
  .logo-item{padding:0 28px}
  .section{padding-top:88px;padding-bottom:88px}
  .hero{min-height:720px}
  .svc-d{padding-left:0}
  .svc-num{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .page-root,.mk-h,.strike,.card .thumb,.svc-d,.row,.rel-list a,.btn{transition:none}
  .mk-a{animation:none}
  .ticker-track,.footer-logo .dot,.logo-pen svg{animation:none}
}

/* ---------- En-tête posé sur le haut de page (accueil) ---------- */
.site-header[data-overlay]{position:absolute;left:0;right:0;top:0}
.hero .hero-body{padding-top:140px}
.hero-media{transition:filter .5s}