@font-face{
  font-family:"Geologica";
  src:url("../assets/fonts/geologica.woff2") format("woff2");
  font-weight:100 900;
  font-display:swap;
}

:root{
  --bg:#0c0c0d;
  --ink:#f2f1ee;
  --mute:#a3a19b;
  --line:rgba(242,241,238,.14);
  --grid:rgba(242,241,238,.05);
  --red:#ed1c24;
  --red-text:#ff4d52;
  --paper:#f3f1ec;
  --paper-ink:#121213;
  --paper-mute:#5c5a55;
  --paper-line:rgba(18,18,19,.14);
  --paper-red:#c4121a;
  --gutter:clamp(1.25rem,7vw,7.5rem);
  --dock:84px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f3f1ec;
  --ink:#121213;
  --mute:#5c5a55;
  --line:rgba(18,18,19,.14);
  --grid:rgba(18,18,19,.035);
  --red-text:#c4121a;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:0;scrollbar-width:thin;scrollbar-color:var(--mute) var(--bg);-webkit-text-size-adjust:100%}
body{
  margin:0;background-color:var(--bg);color:var(--ink);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:56px 56px;background-attachment:fixed;
  font:300 1.0625rem/1.6 "Geologica",system-ui,sans-serif;
  font-synthesis:none;-webkit-font-smoothing:antialiased;
  padding-bottom:var(--dock);overflow-x:clip;
}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--mute)}
:focus-visible{outline:2px solid var(--red-text);outline-offset:3px;border-radius:2px}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.28em;text-decoration-thickness:1px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3{font-weight:300;text-wrap:balance}
h2{font-size:clamp(2.1rem,4.4vw,4.25rem);line-height:1.06;letter-spacing:-.025em}
.lede{color:var(--mute);max-width:56ch}
.tag{color:var(--red-text)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

#stage{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main{position:relative;z-index:1}
section{position:relative}

/* ----- Controls ----- */
.link{
  display:inline-flex;align-items:center;gap:.6em;min-height:44px;
  text-decoration:none;border-bottom:1px solid var(--line);
  transition:border-color .3s,color .3s;
}
.link svg{width:1em;height:1em;transition:transform .5s var(--ease)}
.link:hover{border-color:currentColor}
.link:hover svg{transform:translateX(.3em)}
.link--red{color:var(--red-text);border-color:currentColor}

/* ----- Chrome ----- */
.theme{
  position:fixed;top:1rem;right:clamp(.5rem,2vw,1.5rem);z-index:5;
  width:44px;height:44px;display:grid;place-items:center;color:#fff;mix-blend-mode:difference;
}
.theme svg{width:20px;height:20px}

.rail{
  position:fixed;left:clamp(1rem,2.4vw,2.25rem);top:50%;transform:translateY(-50%);z-index:5;
  color:#fff;mix-blend-mode:difference;display:flex;flex-direction:column;align-items:flex-start;
}
.rail ol{position:relative;display:flex;flex-direction:column;gap:clamp(1.1rem,3.6vh,2rem)}
.rail ol::before,.rail i{content:"";position:absolute;left:3.5px;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.32)}
.rail i{background:#fff;bottom:auto;height:0}
.rail a{position:relative;display:block;width:8px;height:8px;border-radius:50%;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);transition:background .3s,transform .5s var(--ease)}
.rail a::before{content:"";position:absolute;inset:-10px -12px}
.rail a span{
  position:absolute;left:20px;top:50%;transform:translate(-6px,-50%);white-space:nowrap;font-size:.8125rem;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .5s var(--ease);
}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:translate(0,-50%)}
.rail a.on{background:#fff;transform:scale(1.35)}
.gauge{font-size:.8125rem;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2}
.rail .gauge{margin-top:1.25rem;margin-left:-3px;writing-mode:vertical-rl;transform:rotate(180deg)}

.dock{
  position:fixed;left:0;right:0;bottom:0;height:var(--dock);z-index:6;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 clamp(1rem,2.4vw,2.25rem);background:var(--bg);border-top:1px solid var(--line);
  font-size:.9375rem;
}
.dock__logo{display:inline-flex;align-items:center;min-height:44px;width:max-content}
.dock__logo svg{height:48px;width:auto;display:block}
.dock__links{display:flex;gap:clamp(1rem,2.6vw,2.5rem)}
.dock__links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--mute);transition:color .3s}
.dock__links a:hover,.dock__links a.on{color:var(--ink)}
.dock__end{justify-self:end;display:flex;align-items:center;gap:1.25rem}
.dock__cta{display:inline-flex;align-items:center;min-height:44px;color:var(--red-text);font-weight:500;text-decoration:none}
.dock__cta:hover{text-decoration:underline}
.dock .gauge,.dock__menu{display:none}

/* ----- Hero ----- */
.hero{min-height:calc(100svh - var(--dock));display:flex;justify-content:center;text-align:center;padding:0 var(--gutter)}
.logo-fallback{width:min(72vw,1200px);color:var(--ink);position:absolute;left:14vw;top:26svh;opacity:0;pointer-events:none;transition:opacity .9s var(--ease)}
.logo-fallback svg{width:100%;height:auto;display:block}
.no-gl .logo-fallback{opacity:1}
.hero__copy{position:absolute;top:56svh;left:var(--gutter);right:var(--gutter);display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:clamp(1.55rem,2.9vw,2.75rem);line-height:1.15;letter-spacing:-.02em}
.hero p{margin-top:.75rem;color:var(--mute);font-size:clamp(1rem,1.15vw,1.125rem)}
.hero__actions{margin-top:1.5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2rem}
.js .hero__copy>*{animation:rise 1.2s var(--ease) both;animation-delay:.5s}
.js .hero__copy>:nth-child(2){animation-delay:.62s}
.js .hero__copy>:nth-child(3){animation-delay:.74s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* ----- Expertises ----- */
.scene{padding:clamp(5rem,12vh,9rem) var(--gutter)}
.expertises{min-height:100svh;display:flex;align-items:center}
.expertises__in{max-width:min(46vw,640px)}
.expertises .lede{margin-top:1.5rem;font-size:1.125rem}
.demands{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;font-size:.9375rem}
.demands li::before{content:"#";color:var(--red-text)}

/* ----- Action ----- */
.action{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.action .lede{margin-top:1.25rem;font-size:1.125rem}
.rows{margin-top:clamp(2rem,5vh,3.5rem);border-top:1px solid var(--line)}
.rows li{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr) minmax(0,4fr);gap:1.5rem 2.5rem;
  padding:1.35rem 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.rows h3{font-size:clamp(1.25rem,1.8vw,1.625rem);line-height:1.2;letter-spacing:-.015em}
.rows p{color:var(--mute);font-size:1rem;line-height:1.55}
.rows p+p{color:var(--ink);font-size:.9375rem}

/* ----- Services ----- */
.svc{--step:70svh;height:calc(100svh + var(--n,6) * var(--step))}
.svc__pin{position:sticky;top:0;height:100svh;padding:0 var(--gutter) var(--dock);display:flex;flex-direction:column;justify-content:center}
.svc h2{margin-bottom:clamp(1rem,3vh,2rem)}
.svc__list{max-width:min(48vw,620px)}
.svc__item{border-top:1px solid var(--line)}
.svc__item:last-child{border-bottom:1px solid var(--line)}
.svc__item h3{font-size:inherit}
.svc__name{
  display:block;width:100%;text-align:left;padding:clamp(.45rem,1.2vh,.7rem) 0;
  font-size:clamp(1.1rem,1.55vw,1.4rem);line-height:1.25;letter-spacing:-.01em;color:var(--mute);
  transition:color .4s,padding .6s var(--ease);
}
.svc__name:hover{color:var(--ink)}
.svc__item.on .svc__name{color:var(--ink)}
.svc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.svc__body>div{overflow:hidden;min-height:0}
.svc__body p{color:var(--mute);font-size:1rem;line-height:1.55;padding-bottom:.9rem;max-width:56ch;opacity:0;transition:opacity .4s}
.svc__item.on .svc__body{grid-template-rows:1fr}
.svc__item.on .svc__body p{opacity:1;transition-delay:.15s}

/* ----- Works ----- */
.works{padding-left:var(--gutter);padding-right:clamp(1.25rem,3vw,3rem)}
.works__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.25rem 3rem;margin-bottom:clamp(1.75rem,4vh,3rem)}
.works__head .lede{margin-top:1rem}
.filters{display:flex;flex-wrap:wrap;gap:0 1.5rem;font-size:.9375rem}
.filters button{min-height:44px;color:var(--mute);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{color:var(--ink);border-color:var(--red-text)}
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:clamp(1.25rem,2.4vw,2rem) clamp(.5rem,1vw,.875rem)}
.tile{display:block;width:100%;text-align:left;position:relative}
.tile[hidden]{display:none}
.tile__img{display:block;aspect-ratio:16/10;overflow:hidden;background:rgba(127,127,127,.12);position:relative}
.tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .7s var(--ease),transform 1.1s var(--ease)}
.tile:hover img,.tile:focus-visible img{filter:none;transform:scale(1.035)}
.tile__play{position:absolute;right:.6rem;bottom:.6rem;width:20px;height:20px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.tile__cap{display:block;padding-top:.5rem;font-size:.875rem;line-height:1.35}
.tile__cap .tag{white-space:nowrap}

/* ----- Projects ----- */
.projects{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.projects .lede{margin-top:1rem}
.plist{margin-top:clamp(1.75rem,4vh,3rem);border-top:1px solid var(--line)}
.plist li{
  display:grid;grid-template-columns:72px minmax(0,5fr) minmax(0,6fr) minmax(0,2fr);gap:0 clamp(1rem,2.5vw,2.5rem);
  align-items:center;padding:.9rem 0;border-bottom:1px solid var(--line);
}
.plist img{width:72px;height:72px;object-fit:cover}
.plist h3{font-size:clamp(1.35rem,2.3vw,2.125rem);line-height:1.12;letter-spacing:-.02em}
.plist h3+span{display:block;margin-top:.25rem;color:var(--mute);font-size:.875rem}
.plist p{color:var(--mute);font-size:1rem;line-height:1.5}
.plist .link{justify-self:end;font-size:.9375rem;white-space:nowrap}

/* ----- References (the one paper band) ----- */
.refs{
  background:var(--paper);color:var(--paper-ink);padding:clamp(5rem,12vh,8rem) var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,7rem);align-items:center;min-height:100svh;
}
:root[data-theme="light"] .refs{background:#e7e4dc}
.refs :focus-visible{outline-color:var(--paper-red)}
.quote{margin-top:1.5rem;min-height:clamp(14rem,34vh,19rem)}
.quote blockquote{font-size:clamp(1.35rem,2vw,2rem);line-height:1.28;letter-spacing:-.02em;font-weight:300;text-wrap:pretty}
.quote figcaption{margin-top:1.25rem;font-size:.9375rem;color:var(--paper-mute)}
.quote figcaption b{font-weight:500;color:var(--paper-ink)}
.quote figure[hidden]{display:none}
.quote figure{animation:quote .8s var(--ease)}
@keyframes quote{from{opacity:0;transform:translateY(8px)}}
.pager{display:flex;align-items:center;gap:.75rem;font-variant-numeric:tabular-nums;font-size:.9375rem;margin-top:1rem}
.pager button{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px var(--paper-line);transition:box-shadow .3s}
.pager button:hover{box-shadow:inset 0 0 0 1px currentColor}
.pager svg{width:18px;height:18px}
.clients{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:1px solid var(--paper-line);border-left:1px solid var(--paper-line)}
.clients li{position:relative;border-right:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line);aspect-ratio:4/3;min-width:0}
.clients img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain}
.clients a{position:absolute;inset:0;display:grid;place-items:center;color:var(--paper-red);text-decoration:none;font-size:.9375rem;text-align:center;line-height:1.2}
.clients__in,.clients>li>img,.clients>li>a{transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),filter 1.2s var(--ease)}
.clients__in{position:absolute;inset:0;opacity:0;transform:scale(.96);filter:blur(4px)}
.clients__in.on{opacity:1;transform:none;filter:none}
.clients .clients__out{opacity:0!important;transform:scale(1.03);filter:blur(4px)}
.clients a:hover{text-decoration:underline}

/* ----- Contact ----- */
.contact{min-height:calc(100svh - var(--dock));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(2rem,5vw,5rem);padding-top:clamp(4rem,10vh,7rem);padding-bottom:2.5rem;align-items:start}
.contact__form{max-width:640px}
.contact h2{font-size:clamp(1.9rem,3.3vw,3.25rem);line-height:1.1}
form{margin-top:1.5rem;display:grid;gap:.25rem}
label{display:block;font-size:.875rem;color:var(--mute);padding-top:.5rem}
input,textarea{
  display:block;width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--ink);
  font:inherit;font-size:1.0625rem;padding:.35rem 0 .55rem;caret-color:var(--red-text);transition:border-color .3s;
}
textarea{resize:vertical;min-height:3.4rem}
input:hover,textarea:hover{border-color:var(--mute)}
input:focus,textarea:focus{outline:0;border-color:var(--red-text)}
.send{margin-top:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem}
.send button{min-height:48px;padding:0 1.6rem;background:#dc141c;color:#fff;font-weight:500;transition:background .3s}
.send button:hover{background:#b90f16}
.send output{font-size:.875rem;color:var(--mute)}
.contact__side{align-self:end;justify-self:end;text-align:right;grid-row:1}
.contact__form{grid-column:1}
.contact__side{grid-column:2}
.reading{font-size:clamp(3rem,6.4vw,6rem);font-weight:200;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.contact__side p{margin-top:.5rem;color:var(--mute);font-size:.9375rem}
.details{
  grid-column:1/-1;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem 2rem;font-size:.9375rem;line-height:1.5;
}
.details h3{font-size:inherit;color:var(--mute);margin-bottom:.15rem}
.details a{text-decoration:none}
.details a:hover{text-decoration:underline}
.details ul{display:flex;flex-wrap:wrap;gap:0 .9rem}
.legal{grid-column:1/-1;margin-top:1.25rem;font-size:.8125rem;color:var(--mute)}

/* ----- Viewer ----- */
dialog{
  width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:0;background:rgba(8,8,9,.96);color:#f2f1ee;
}
dialog::backdrop{background:transparent}
dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:view .4s var(--ease)}
@keyframes view{from{opacity:0}}
.view__bar{display:flex;justify-content:flex-end;padding:.5rem clamp(.5rem,2vw,1.5rem)}
.view__stage{position:relative;display:grid;place-items:center;min-height:0;margin:0 clamp(.75rem,5vw,5rem)}
.view__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.view__stage iframe{width:min(100%,calc((100dvh - 150px) * 16 / 9));aspect-ratio:16/9;border:0;background:#000}
.view__foot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:.5rem clamp(.5rem,2vw,1.5rem) 1rem;text-align:center;font-size:.9375rem}
.icon-btn{width:44px;height:44px;display:grid;place-items:center}
.icon-btn svg{width:22px;height:22px}
.view__foot .icon-btn[hidden]{visibility:hidden;display:grid}

/* ----- Small or short screens: pinned scenes become a flowing page ----- */
@media (max-width:980px),(max-height:680px){
  .svc{height:auto;padding:clamp(4rem,10vh,6rem) 0 0}
  .svc__pin{position:static;height:auto;padding:0 var(--gutter);display:block}
  .svc__list{max-width:none}
  .svc__item,.svc__item:last-child{border:0;min-height:100svh;padding-top:44svh}
  .svc__item>h3,.svc__body{background:var(--bg);box-shadow:0 0 0 1px var(--bg)}
  .svc__name{color:var(--ink);font-size:1.75rem;line-height:1.15;letter-spacing:-.02em;padding:.5rem 0;cursor:default;pointer-events:none}
  .svc__body{grid-template-rows:1fr}
  .svc__body p{opacity:1;font-size:1.0625rem;line-height:1.6;color:var(--mute);padding-bottom:2rem}
}
@media (max-width:980px){
  :root{--dock:64px}
  .rail{display:none}
  .dock{grid-template-columns:auto 1fr auto;gap:.75rem}
  .dock__links{
    display:none;position:fixed;left:0;right:0;bottom:var(--dock);background:var(--bg);border-top:1px solid var(--line);
    flex-direction:column;gap:0;padding:.75rem var(--gutter);font-size:1.25rem;
  }
  .dock__links.open{display:flex}
  .dock__links a{color:var(--ink);min-height:52px}
  .dock .gauge{display:block;color:var(--mute);justify-self:center}
  .dock__menu{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px}
  .dock__menu svg{width:22px;height:22px}
  .dock__end{gap:.5rem}
  .dock__cta{font-size:.875rem;white-space:nowrap}
  .dock__logo svg{height:26px}
  .expertises{align-items:flex-end;padding-top:46svh;padding-bottom:3rem;min-height:100svh}
  .expertises__in{max-width:none;background:var(--bg);box-shadow:0 0 0 12px var(--bg)}
  .rows li{grid-template-columns:1fr;gap:.5rem}
  .works{padding-right:var(--gutter)}
  .sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plist li{grid-template-columns:60px minmax(0,1fr);gap:.5rem 1rem;align-items:start}
  .plist img{width:60px;height:60px;grid-row:span 2}
  .plist p{grid-column:2}
  .plist .link{grid-column:2;justify-self:start}
  .refs{grid-template-columns:1fr;min-height:0}
  .quote{min-height:22rem}
  .contact{display:flex;flex-direction:column;padding-top:40svh}
  .contact__side{order:-1;text-align:left;padding-bottom:2.5rem}
  .reading{font-size:clamp(2.75rem,14vw,4rem)}
  .contact__form{max-width:none;background:var(--bg);box-shadow:0 0 0 12px var(--bg)}
  .details{grid-template-columns:1fr 1fr;margin-top:2rem;background:var(--bg);box-shadow:0 0 0 12px var(--bg)}
  .legal{margin-top:0;padding-top:1.25rem;background:var(--bg);box-shadow:0 0 0 12px var(--bg)}
}
@media (max-width:480px){
  .dock .gauge{font-size:.75rem}
  .hero__copy{top:50svh}
  .tile__cap{font-size:.8125rem}
  .details{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}
@media (max-width:359px){.dock .gauge{display:none}}

/* =========================================================
   Ajouts : chargement, réseaux, Instagram, avis, guide
   ========================================================= */
@font-face{
  font-family:"Caveat";
  src:url("../assets/fonts/caveat.woff2") format("woff2");
  font-weight:500;
  font-display:swap;
}

/* ----- Chargement : le nuage se condense en logo ----- */
.loader{position:fixed;inset:0;z-index:8;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:22svh;gap:1.25rem;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s .9s}
.loading .loader{opacity:1;visibility:visible;transition:none}
.loader__story{color:var(--mute);font-size:clamp(1rem,1.3vw,1.25rem);letter-spacing:-.01em;text-align:center;padding:0 var(--gutter);animation:rise 1.2s var(--ease) .2s both}
.loader__line{display:block;width:min(220px,50vw);height:1px;background:var(--line);overflow:hidden}
.loader__line i{display:block;height:100%;background:var(--red-text);transform:scaleX(0);transform-origin:left}
.no-gl .loader{display:none}
.js.loading .hero__copy,.js.loading .rail,.js.loading .dock,.js.loading .theme{opacity:0;pointer-events:none}
.rail,.dock,.theme{transition:opacity 1s var(--ease)}
.js .hero__copy>*{animation:none}
.js.ready .hero__copy>*{animation:rise 1.2s var(--ease) both;animation-delay:.1s}
.js.ready .hero__copy>:nth-child(2){animation-delay:.22s}
.js.ready .hero__copy>:nth-child(3){animation-delay:.34s}

/* ----- Réseaux sur le côté, au-dessus du rail ----- */
.side-social{position:fixed;left:clamp(1rem,2.4vw,2.25rem);top:14vh;z-index:5;list-style:none;margin:0 0 0 -10px;padding:0;display:flex;flex-direction:column;gap:.35rem;transition:opacity 1s var(--ease)}
.js.loading .side-social{opacity:0;pointer-events:none}
.side-social a{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bg);color:var(--ink);box-shadow:0 0 0 1px var(--line);text-decoration:none;transition:box-shadow .3s,transform .5s var(--ease)}
.side-social a::before{content:"";position:absolute;inset:-6px -8px}
.side-social svg{width:16px;height:16px}
.side-social a:hover,.side-social a:focus-visible{box-shadow:0 0 0 1px var(--red-text);transform:translateX(2px)}
.side-social span{position:absolute;left:44px;top:50%;transform:translate(-8px,-50%);white-space:nowrap;font-size:.875rem;padding:.2rem .6rem;background:var(--bg);box-shadow:0 0 0 1px var(--line);opacity:0;pointer-events:none;transition:opacity .25s,transform .5s var(--ease)}
.side-social span b{color:var(--red-text);font-weight:500;margin-right:.05em}
.side-social a:hover span,.side-social a:focus-visible span{opacity:1;transform:translate(0,-50%)}
@media (max-height:760px){.rail ol{gap:clamp(.8rem,2.6vh,1.4rem)}}
@media (max-width:980px){.side-social{display:none}}

/* Dock : plus présent, réseaux dans le menu mobile */
.dock__links{align-items:center}
.dock__social{display:none}
.dock .gauge{font-size:.875rem}

/* ----- Instagram ----- */
.insta{padding-left:var(--gutter);padding-right:clamp(1.25rem,3vw,3rem)}
.insta__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.25rem 3rem;margin-bottom:clamp(1.75rem,4vh,3rem)}
.insta__head .lede{margin-top:1rem}
.grid-ig{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(30%,150px),1fr));gap:clamp(.35rem,.6vw,.5rem);grid-auto-flow:dense}
.grid-ig li{position:relative;aspect-ratio:1;overflow:hidden;background:rgba(127,127,127,.12)}
.grid-ig li:first-child{grid-column:span 2;grid-row:span 2}
.grid-ig a{position:absolute;inset:0;display:block;color:#fff;text-decoration:none}
.grid-ig img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .7s var(--ease),transform 1.1s var(--ease)}
.grid-ig a:hover img,.grid-ig a:focus-visible img{filter:none;transform:scale(1.035)}
.grid-ig .tile__play{top:.6rem;bottom:auto}
.grid-ig__cap{position:absolute;left:0;right:0;bottom:0;padding:2.5rem .7rem .6rem;font-size:.8125rem;line-height:1.35;background:linear-gradient(transparent,rgba(8,8,9,.85));opacity:0;transform:translateY(6px);transition:opacity .4s,transform .6s var(--ease)}
.grid-ig__cap .tag{color:#ff4d52}
.grid-ig a:hover .grid-ig__cap,.grid-ig a:focus-visible .grid-ig__cap{opacity:1;transform:none}
.insta__empty{color:var(--mute);max-width:56ch}

/* ----- Témoignages : laisser un avis ----- */
.pager{flex-wrap:wrap}
.pager .pager__add{margin-left:auto;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid currentColor;color:var(--paper-red);font-size:.9375rem;transition:color .3s}
.pager .pager__add:hover{color:var(--paper-ink)}
.clients__site:hover img{transform:scale(1.04)}
.clients img{transition:transform .6s var(--ease)}

dialog.sheet-dialog{width:min(640px,100vw - 2rem);height:auto;max-height:calc(100dvh - 2rem);margin:auto;background:var(--paper);color:var(--paper-ink);padding:clamp(1.5rem,4vw,2.75rem);overflow:auto}
dialog.sheet-dialog::backdrop{background:rgba(8,8,9,.72);backdrop-filter:blur(2px)}
dialog.sheet-dialog[open]{display:block;animation:sheet .6s var(--ease)}
@keyframes sheet{from{opacity:0;transform:translateY(16px)}}
.review__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.review__head h2{font-size:clamp(1.6rem,2.6vw,2.25rem);line-height:1.1}
.review__head .icon-btn{margin:-.5rem -.75rem 0 0}
.review__intro{margin-top:.75rem;color:var(--paper-mute);font-size:1rem}
.review{margin:0}
.review label{color:var(--paper-mute)}
.review input,.review textarea{color:var(--paper-ink);border-color:var(--paper-line);caret-color:var(--paper-red)}
.review input:hover,.review textarea:hover{border-color:var(--paper-mute)}
.review input:focus,.review textarea:focus{border-color:var(--paper-red)}
.review input::placeholder{color:#8f8c85}
.review__row{display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem}
.review .send output{color:var(--paper-mute)}
.review :focus-visible{outline-color:var(--paper-red)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send button:disabled{opacity:.6;cursor:progress}

/* ----- « Voir notre travail » : le guide dessiné à la main ----- */
.guide{position:fixed;inset:0 0 var(--dock) 0;z-index:4;background:color-mix(in srgb,var(--bg) 80%,transparent);animation:view .45s var(--ease);cursor:pointer}
.guide[hidden]{display:none}
.guiding .rail{z-index:7}
.guide__ink{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.guide__ink path{fill:none;stroke:var(--red-text);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:draw .9s cubic-bezier(.6,.05,.3,1) forwards}
.guide__ink path.ghost{stroke-width:1.2;opacity:.55}
.guide__ink g{animation:bob 1.3s ease-in-out infinite alternate}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes bob{to{transform:translate(var(--bx),var(--by))}}
.guide__note{
  position:fixed;left:0;top:0;font-family:"Caveat","Segoe Print","Bradley Hand",cursive;font-weight:500;
  font-size:clamp(2.1rem,3.6vw,3.4rem);line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap;
  padding:.1em .2em;animation:note .7s var(--ease) both;cursor:pointer
}
.guide__note[data-to="works"]{animation-delay:.3s}
.guide__note:hover{color:var(--red-text)}
.guide__note::after{content:"";position:absolute;left:.2em;right:.2em;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.guide__note:hover::after{transform:none}
@keyframes note{from{opacity:0;filter:blur(6px)}}
.guide__close{position:fixed;top:1rem;right:clamp(3.5rem,6vw,5rem);color:var(--ink)}
.guide__mobile-social{display:none}

/* ----- Responsive des ajouts ----- */
@media (max-width:980px){
  .dock__social{display:flex;gap:.25rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line);width:100%}
  .dock__social a{width:44px;height:44px;display:grid;place-items:center;color:var(--ink);min-height:44px}
  .dock__social svg{width:22px;height:22px}
  .insta{padding-right:var(--gutter)}
  .grid-ig{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-ig__cap{display:none}
  .pager .pager__add{margin-left:0;flex-basis:100%;justify-content:flex-start}
  .guide__mobile-social{display:flex;justify-content:center;gap:.5rem;position:fixed;left:0;right:0;bottom:calc(var(--dock) + 2rem)}
  .guide__mobile-social a{width:48px;height:48px;display:grid;place-items:center;color:var(--ink);border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}
  .guide__mobile-social svg{width:22px;height:22px}
  .guide__close{right:.5rem;top:4rem}
}
@media (max-width:480px){
  .review__row{grid-template-columns:1fr}
}

/* ----- Dock : mentions à côté du contact ----- */
.dock__legal{margin:0;font-size:.8125rem;color:var(--mute);white-space:nowrap}
.dock__legal a{text-decoration:none}
.dock__legal a:hover{color:var(--ink);text-decoration:underline}
.details li .tag{margin-right:.05em}
@media (max-width:1180px){.dock__links{gap:1rem}.dock__legal{font-size:.75rem}}
.dock__links .dock__legal{display:none}
@media (max-width:980px){.dock__end .dock__legal{display:none}.dock__links .dock__legal{display:block;margin-top:.75rem}}

/* ----- Réalisations : 3 par ligne au maximum, miniatures toujours en noir et blanc,
   une mise en page propre à chaque filtre ----- */
.sheet{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.4vw,2rem) clamp(.75rem,1.4vw,1.25rem)}
.sheet .tile img,.sheet .tile:hover img,.sheet .tile:focus-visible img{filter:grayscale(1) contrast(1.06) brightness(.9)}
.sheet .tile:hover img,.sheet .tile:focus-visible img{filter:grayscale(1) contrast(1.1) brightness(1.04);transform:scale(1.035)}
.sheet .tile__cap{font-size:.9375rem}
.sheet.swap{animation:sheetIn .7s var(--ease)}
@keyframes sheetIn{from{opacity:0;transform:translateY(10px)}}

/* Vidéos : format cinéma, bouton de lecture au centre, titre posé sur l'image */
.sheet[data-layout="video"] .tile__img{aspect-ratio:16/9}
.sheet[data-layout="video"] .tile__play{left:50%;top:50%;right:auto;bottom:auto;width:56px;height:56px;padding:17px 15px 17px 19px;margin:-28px 0 0 -28px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);transition:background .4s,transform .6s var(--ease)}
.sheet[data-layout="video"] .tile:hover .tile__play{background:#dc141c;box-shadow:none;transform:scale(1.08)}
.sheet[data-layout="video"] .tile__cap{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1rem .85rem;color:#f2f1ee;background:linear-gradient(transparent,rgba(8,8,9,.82));pointer-events:none}
.sheet[data-layout="video"] .tile__cap .tag{color:#ff4d52}

/* Photos : planche serrée au format 3/2, légende au survol */
.sheet[data-layout="photo"]{gap:4px}
.sheet[data-layout="photo"] .tile__img{aspect-ratio:3/2}
.sheet[data-layout="photo"] .tile__cap{position:absolute;left:0;right:0;bottom:0;padding:2rem .9rem .7rem;color:#f2f1ee;background:linear-gradient(transparent,rgba(8,8,9,.78));opacity:0;transform:translateY(6px);transition:opacity .4s,transform .6s var(--ease);pointer-events:none}
.sheet[data-layout="photo"] .tile:hover .tile__cap,.sheet[data-layout="photo"] .tile:focus-visible .tile__cap{opacity:1;transform:none}
.sheet[data-layout="photo"] .tile__cap .tag{color:#ff4d52}

/* Relation presse : coupures de presse encadrées, format portrait, légende éditoriale */
.sheet[data-layout="rp"]{gap:clamp(1.25rem,2.6vw,2.5rem)}
.sheet[data-layout="rp"] .tile{padding:clamp(.75rem,1.2vw,1rem);box-shadow:0 0 0 1px var(--line);transition:box-shadow .4s}
.sheet[data-layout="rp"] .tile:hover{box-shadow:0 0 0 1px var(--red-text)}
.sheet[data-layout="rp"] .tile__img{aspect-ratio:4/5}
.sheet[data-layout="rp"] .tile img{object-position:top}
.sheet[data-layout="rp"] .tile:hover img{transform:none}
.sheet[data-layout="rp"] .tile__cap{padding-top:.9rem;font-size:clamp(1.1rem,1.55vw,1.4rem);line-height:1.25;letter-spacing:-.01em}
.sheet[data-layout="rp"] .tile__cap .tag{display:block;font-size:.875rem;letter-spacing:0;margin-top:.2rem}

/* Community management : carrés façon fil social, légende qui glisse au survol */
.sheet[data-layout="cm"]{gap:clamp(.35rem,.6vw,.5rem)}
.sheet[data-layout="cm"] .tile{overflow:hidden}
.sheet[data-layout="cm"] .tile__img{aspect-ratio:1}
.sheet[data-layout="cm"] .tile__cap{position:absolute;inset:auto 0 0 0;padding:.55rem .8rem;background:var(--bg);transform:translateY(100%);transition:transform .5s var(--ease);pointer-events:none}
.sheet[data-layout="cm"] .tile:hover .tile__cap,.sheet[data-layout="cm"] .tile:focus-visible .tile__cap{transform:none}

/* Designs : chaque création posée entière sur un fond, comme une épreuve d'impression */
.sheet[data-layout="design"] .tile__img{aspect-ratio:4/3;background:#1a1a1b;padding:clamp(1rem,2.2vw,2rem)}
:root[data-theme="light"] .sheet[data-layout="design"] .tile__img{background:#e7e4dc}
.sheet[data-layout="design"] .tile img{object-fit:contain}
.sheet[data-layout="design"] .tile:hover img{transform:scale(1.04) rotate(-.6deg)}
.sheet[data-layout="design"] .tile__cap{padding-top:.7rem}

@media (max-width:980px){
  .sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sheet[data-layout="video"]{grid-template-columns:1fr}
}
@media (max-width:480px){
  .sheet[data-layout="rp"],.sheet[data-layout="design"]{grid-template-columns:1fr}
}

/* =========================================================
   Typographie : Syne (titres, menu) et Bricolage Grotesque (textes)
   ========================================================= */
@font-face{font-family:"Syne";src:url("../assets/fonts/syne.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("../assets/fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
:root{--font-title:"Syne","Geologica",system-ui,sans-serif;--font-text:"Bricolage Grotesque","Geologica",system-ui,sans-serif}
body{font-family:var(--font-text);font-weight:400}
h1,h2,h3,.svc__name,.reading,.review__head h2,.collab__num{font-family:var(--font-title)}
h2{font-weight:600;letter-spacing:-.03em}
h3{font-weight:600}
.hero h1{font-weight:600;letter-spacing:-.03em}
.svc__name{font-weight:500;letter-spacing:-.02em}
.reading{font-weight:500;letter-spacing:-.04em}
.lede,.rows p,.svc__body p,.plist p,.tile__cap{font-weight:400}

/* ----- Menu du bas : police plus « chunky », séparée par de fines barres verticales ----- */
@media (min-width:981px){
  .dock__links{gap:0}
  .dock__links>a{font-family:var(--font-title);font-weight:700;font-size:.9375rem;letter-spacing:-.01em;padding:0 clamp(.7rem,1.2vw,1.15rem);position:relative}
  .dock__links>a+a::before{content:"";position:absolute;left:0;top:50%;width:1px;height:14px;margin-top:-7px;background:var(--mute);opacity:.5}
}
.dock__cta{font-family:var(--font-title);font-weight:700}
.dock__links>a.on{color:var(--red-text)}

/* ----- Liens : rouges et soulignés, un cadre se dessine au survol ----- */
.link{
  color:var(--red-text);border-bottom:1px solid currentColor;padding:0 .85em;margin:0 -.85em;
  background:
    linear-gradient(currentColor,currentColor) left bottom/1px 0 no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/1px 0 no-repeat,
    linear-gradient(currentColor,currentColor) right top/0 1px no-repeat;
  transition:background-size .28s var(--ease) .22s,color .3s;
}
.link:hover,.link:focus-visible{
  background-size:1px 100%,1px 100%,100% 1px;
  transition:background-size .28s var(--ease),color .3s;
}
.link:hover{background-size:1px 100%,1px 100%,100% 1px}
@media (hover:hover){
  .link:hover{transition-property:background-size;transition-duration:.25s,.25s,.35s;transition-delay:0s,0s,.2s}
}
.hero__actions{gap:.75rem 3rem}
.refs .link,.refs .link--red{color:var(--paper-red)}

/* ----- Collaborations notables ----- */
.collabs .lede{margin-top:1rem}
.collabs__list{margin-top:clamp(2.5rem,6vh,4.5rem);display:flex;flex-direction:column;gap:clamp(3rem,9vh,6rem)}
.collab{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,4.5rem);align-items:center}
.collab:nth-child(even) .collab__img{order:2}
.collab__img{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;background:rgba(127,127,127,.12)}
.collab__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.9);transition:transform 1.4s var(--ease)}
.collab:hover .collab__img img{transform:scale(1.035)}
.collab__num{position:absolute;left:clamp(.75rem,1.5vw,1.25rem);bottom:.2rem;font-size:clamp(3rem,7vw,6.5rem);font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.85);letter-spacing:-.04em;pointer-events:none}
.collab__body h3{font-size:clamp(2rem,3.6vw,3.5rem);line-height:1;letter-spacing:-.035em;font-weight:700}
.collab__role{margin-top:.75rem;color:var(--mute);font-size:.9375rem}
.collab__text{margin-top:1.1rem;color:var(--mute);max-width:46ch;line-height:1.6}
.collab__links{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 2.5rem}

/* ----- Références : un logo en grand, en fondu, et la liste des clients dessous ----- */
.logos{display:flex;flex-direction:column;gap:clamp(1.25rem,3vh,2rem)}
.logos__stage{position:relative;aspect-ratio:16/10;border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line)}
.logos__item{position:absolute;inset:8% 14%;margin:0;display:grid;place-items:center;opacity:0;transform:scale(.94);filter:blur(6px);transition:opacity .7s var(--ease),transform .9s var(--ease),filter .7s var(--ease)}
.logos__item.on{opacity:1;transform:none;filter:none}
.logos__item[hidden]{display:none}
.logos__item a,.logos__item img{display:block;width:100%;height:100%}
.logos__item img{object-fit:contain}
.logos__timer{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--paper-red);transform:scaleX(0);transform-origin:left}
.logos.run .logos__timer{animation:logoTimer 3s linear forwards}
@keyframes logoTimer{to{transform:scaleX(1)}}
.logos__list{display:flex;flex-wrap:wrap;gap:.1rem 0;font-size:.875rem;line-height:1.3}
.logos__list li{display:flex;align-items:center}
.logos__list li+li::before{content:"";width:1px;height:.85em;background:var(--paper-line);margin:0 .6rem}
.logos__list button,.logos__you{min-height:32px;color:var(--paper-mute);text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.logos__list button:hover{color:var(--paper-ink)}
.logos__list button[aria-current]{color:var(--paper-ink);border-color:var(--paper-red)}
.logos__you{color:var(--paper-red);display:inline-flex;align-items:center}
.logos__you:hover{border-color:currentColor}

/* ----- Ce qu'ils disent de nous : guillemets et bouton d'appréciation ----- */
.quote blockquote::before,.quote blockquote::after{font-family:var(--font-title);font-weight:700;color:var(--paper-red)}
.quote blockquote::before{content:"«\00a0"}
.quote blockquote::after{content:"\00a0»"}
.quote blockquote{font-family:var(--font-text);font-weight:400}
.pager{gap:.75rem 1rem}
.pager .pager__add{width:auto;height:auto;border-radius:0;border-bottom:0;
  margin-left:1rem;display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0 1.2rem;border:0;
  box-shadow:inset 0 0 0 1px var(--paper-ink);color:var(--paper-ink);font-family:var(--font-title);font-weight:600;font-size:.875rem;letter-spacing:.01em;
  background:linear-gradient(var(--paper-ink),var(--paper-ink)) left/0 100% no-repeat;transition:background-size .5s var(--ease),color .35s
}
.pager .pager__add svg{width:18px;height:18px;transition:transform .5s var(--ease)}
.pager .pager__add:hover,.pager .pager__add:focus-visible{background-size:100% 100%;color:var(--paper)}
.pager .pager__add:hover svg{transform:rotate(-12deg) translateY(-1px)}

@media (max-width:980px){
  .collab{grid-template-columns:1fr;gap:1.25rem}
  .collab:nth-child(even) .collab__img{order:0}
  .collab__body{background:var(--bg);box-shadow:0 0 0 12px var(--bg)}
  .pager .pager__add{margin-left:0}
  .logos__item{inset:10% 8%}
}

/* ----- Ajustements : contact en blanc, flèche du guide au-dessus du menu, CGV verticale, jauge animée ----- */
.link.link--white{color:var(--ink)}
.details{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.details{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.details{grid-template-columns:1fr}}
.guide{z-index:7}
.rail__cgv{display:block;margin:1rem 0 0 -3px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.75rem;letter-spacing:.08em;color:#fff;text-decoration:none;opacity:.75;transition:opacity .3s}
.rail__cgv:hover{opacity:1;text-decoration:underline}
.gauge.pop{animation:gaugePop .9s var(--ease)}
@keyframes gaugePop{
  0%{scale:1}
  28%{scale:1.7;color:var(--red-text)}
  100%{scale:1}
}
.rail .gauge.pop{animation-name:gaugePopRail}
@keyframes gaugePopRail{0%{scale:1}28%{scale:1.7}100%{scale:1}}
.rail a.rail__cgv{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;padding:.4rem 0}
.rail a.rail__cgv::before{display:none}

/* ----- Bebas Neue pour les titres et le menu ----- */
@font-face{font-family:"Bebas Neue";src:url("../assets/fonts/bebasneue.woff2") format("woff2");font-weight:400;font-display:swap}
:root{--font-title:"Bebas Neue","Syne",system-ui,sans-serif}
h1,h2,h3,.svc__name,.reading,.review__head h2,.collab__num,.collab__body h3{font-weight:400;letter-spacing:.01em}
h2{font-size:clamp(2.6rem,5.6vw,5.4rem);line-height:.98}
.hero h1{font-size:clamp(2.2rem,4.4vw,4.2rem);line-height:1;letter-spacing:.015em}
.rows h3{font-size:clamp(1.5rem,2.2vw,2rem)}
.svc__name{font-size:clamp(1.4rem,2vw,1.85rem);letter-spacing:.02em}
.plist h3{font-size:clamp(1.7rem,2.9vw,2.6rem)}
.collab__body h3{font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:.95}
.reading{font-size:clamp(3.6rem,8vw,7.5rem);letter-spacing:.01em}
.contact h2{font-size:clamp(2.3rem,4.2vw,4rem)}
@media (min-width:981px){.dock__links>a{font-weight:400;font-size:1.15rem;letter-spacing:.04em}}
.dock__cta{font-weight:400;font-size:1.15rem;letter-spacing:.04em}
.pager .pager__add{font-weight:400;font-size:1.05rem;letter-spacing:.05em}

/* ----- Accueil : « Agence de communication 360 » mis en scène, puis les hashtags ----- */
.hero__kicker{margin-top:1.1rem;display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,1.4vw,1.1rem);color:var(--ink);font-family:var(--font-title);font-size:clamp(1.15rem,1.6vw,1.5rem);letter-spacing:.14em;text-transform:uppercase}
.hero__line{display:block;width:clamp(1.5rem,6vw,5rem);height:1px;background:var(--line);transform-origin:center}
.ready .hero__line{animation:lineIn 1.2s var(--ease) .5s both}
@keyframes lineIn{from{transform:scaleX(0)}}
.k360{position:relative;display:grid;place-items:center;width:clamp(48px,4.4vw,62px);aspect-ratio:1;flex:none}
.k360 svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.k360__track{stroke:var(--line);stroke-width:1.5}
.k360__arc,.k360__head{stroke:var(--red-text);stroke-width:3}
.k360__arc{stroke-dasharray:240;stroke-dashoffset:240}
.k360__head{opacity:0}
.ready .k360__arc{animation:arc360 1.4s var(--ease) .7s forwards}
.ready .k360__head{animation:head360 .3s ease 1.9s forwards}
.ready .k360 svg{animation:spin360 14s linear 2.2s infinite}
.k360 b{font-weight:400;font-size:clamp(1rem,1.3vw,1.2rem);letter-spacing:.04em;color:var(--red-text);line-height:1;padding-top:.1em}
@keyframes arc360{to{stroke-dashoffset:0}}
@keyframes head360{to{opacity:1}}
@keyframes spin360{to{transform:rotate(360deg)}}
.hero__tags{margin-top:1rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.25rem;color:var(--mute);font-size:clamp(1rem,1.15vw,1.125rem)}
.hero__tags b{color:var(--red-text);font-weight:500;margin-right:.08em}
.ready .hero__tags span{animation:rise .9s var(--ease) both;animation-delay:calc(.75s + var(--i) * .08s)}
.js.ready .hero__copy>:nth-child(4){animation-delay:.46s}
.hero__actions{margin-top:1.75rem}

/* CGV plus éloignée du nombre de bar */
.rail a.rail__cgv{margin-top:2.75rem}
@media (max-width:480px){.hero__line{display:none}.hero__kicker{letter-spacing:.08em}}

/* ----- Rail : coordonnées de la souris, tiret, puis CGV ----- */
.rail__xy,.rail__sep{display:block;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.75rem;color:#fff;opacity:.75;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:-3px}
.rail__xy{margin-top:2.75rem;letter-spacing:.04em}
.rail__xy[hidden]{display:none}
.rail__sep{margin-top:.5rem;line-height:1}
.rail a.rail__cgv{margin-top:.5rem}
.rail__xy[hidden]~.rail__sep{display:none}
.rail__xy[hidden]~a.rail__cgv{margin-top:2.75rem}
@media (max-height:760px){.rail__xy{margin-top:1.5rem}}

/* ----- Le # du logo, en rouge, devant chaque titre de section ----- */
.sec-hash{display:inline-block;width:.74em;height:.74em;margin:0 .22em .09em -.02em;vertical-align:baseline;overflow:visible}
.sec-hash .hh-hash{fill:var(--red)}
.sec-hash .hh-ring{fill:currentColor}
.refs .sec-hash .hh-hash{fill:var(--paper-red)}
.ready .sec-hash{animation:none}
.sec-hash{--hash-red:var(--red);--hash-ring:currentColor}
.refs .sec-hash{--hash-red:var(--paper-red)}

/* ----- Barre verticale rouge à côté des textes (jamais des titres) ----- */
.lede,.collab__text,.rows li>p:first-of-type,.svc__body p,.plist p,.insta__empty,.review__intro,.contact__side p{
  border-left:2px solid var(--red);padding-left:clamp(.75rem,1.2vw,1.1rem)
}
.refs .review__intro,.sheet-dialog .review__intro{border-left-color:var(--paper-red)}
.svc__body p{padding-bottom:0;margin-bottom:.9rem}
.contact__side p{display:inline-block}

/* Réalisations : la couleur revient au survol */
.sheet .tile:hover img,.sheet .tile:focus-visible img{filter:none;transform:scale(1.035)}
.sheet[data-layout="rp"] .tile:hover img{transform:none}

/* Bouton de lecture façon YouTube : rectangle rouge arrondi, triangle blanc */
.sheet .tile__play,.sheet[data-layout="video"] .tile__play{
  position:absolute;left:50%;top:50%;right:auto;bottom:auto;width:62px;height:44px;margin:-22px 0 0 -31px;
  padding:13px 21px 13px 25px;border-radius:12px;background:var(--red);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35);
  filter:none;opacity:.92;transition:transform .4s var(--ease),background .3s,opacity .3s
}
.sheet .tile:hover .tile__play,.sheet .tile:focus-visible .tile__play,
.sheet[data-layout="video"] .tile:hover .tile__play{background:#ff0000;opacity:1;transform:scale(1.1);box-shadow:0 2px 14px rgba(0,0,0,.45)}
@media (max-width:480px){.sheet .tile__play{width:50px;height:36px;margin:-18px 0 0 -25px;padding:10px 17px 10px 20px;border-radius:10px}}

/* Triangle du bouton de lecture plus grand */
.sheet .tile__play,.sheet[data-layout="video"] .tile__play{padding:8px 15px 8px 19px}
@media (max-width:480px){.sheet .tile__play{padding:7px 12px 7px 15px}}

/* # rouge des titres : plus grand, centré sur la hauteur des capitales */
.sec-hash{width:.98em;height:.98em;margin:0 .2em 0 -.04em;vertical-align:-.15em}

/* ----- Revue mobile (11/11) ----- */
/* Liste des clients : le séparateur précède chaque nom et celui qui tombe en début de ligne est rogné */
.logos__list{margin-left:calc(-1.2rem - 1px);clip-path:inset(0 0 0 calc(1.2rem + 1px))}
.logos__list li::before,.logos__list li+li::before{content:"";width:1px;height:.85em;background:var(--paper-line);margin:0 .6rem;flex:none}
@media (max-width:980px){
  /* Le bouton de thème ne se mélange plus au texte qui défile dessous */
  .theme{top:.75rem;right:.75rem;background:var(--bg);color:var(--ink);mix-blend-mode:normal;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
  /* Le titre des services reste lisible pendant que la première forme se dessine */
  .svc h2{position:relative;z-index:1;background:var(--bg);box-shadow:0 0 0 12px var(--bg)}
  /* Cibles tactiles des coordonnées et réseaux */
  .details a{display:inline-block;padding:.45rem 0}
  .details ul{gap:0 1rem}
}

/* ----- 11/11 : ombre du #, logos, citations ----- */
/* (12/11) plus d'ombre ni de halo sur le # : il garde exactement le rouge de la barre des textes */

/* Logos clients : noir et blanc, couleur au survol (toujours en couleur au doigt) */
@media (hover:hover){
  .logos__item img{filter:grayscale(1) contrast(1.05);opacity:.85;transition:filter .5s var(--ease),opacity .5s var(--ease),transform .6s var(--ease)}
  .logos__item:hover img,.logos__item a:focus-visible img{filter:none;opacity:1;transform:scale(1.03)}
}

/* Témoignages : guillemets rouges et signature */
.quote figure{position:relative;padding-top:clamp(2.6rem,5vw,3.6rem)}
.qm{fill:var(--paper-red);display:block}
.qm--open{position:absolute;left:-.1rem;top:0;width:clamp(3.2rem,5.4vw,4.6rem);height:auto;aspect-ratio:1;transform:rotate(180deg);margin-top:-.6rem}
.qm--close{display:inline-block;width:.95em;height:.95em;margin-left:.25em;vertical-align:-.55em}
.quote blockquote::before,.quote blockquote::after{content:none}
.quote blockquote{font-size:clamp(1.35rem,2.1vw,2.05rem);line-height:1.32;color:var(--paper-ink);padding-left:clamp(.9rem,1.6vw,1.4rem);border-left:2px solid var(--paper-red)}
.quote figcaption{margin-top:1.6rem;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding-left:clamp(.9rem,1.6vw,1.4rem)}
.sign{position:relative;font-family:"Caveat",cursive;font-size:clamp(2rem,3vw,2.6rem);line-height:1;color:var(--paper-ink);padding-left:2.6rem;transform:rotate(-3deg);transform-origin:left center}
.sign::before{content:"";position:absolute;left:0;top:55%;width:1.9rem;height:2px;background:var(--paper-red)}
.sign__role{font-family:var(--font-title);font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-mute);padding-left:2.6rem}
.quote figure:not([hidden]) .sign{animation:sign 1.3s .25s var(--ease) both}
.quote figure:not([hidden]) .sign__role{animation:quote .8s .7s var(--ease) both}
@keyframes sign{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ----- 11/11 (2) : projets en cartes ----- */
.pcards{margin-top:clamp(1.75rem,4vh,3rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(1rem,1.8vw,1.75rem)}
.pcard{min-width:0}
.pcard__in{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;background:var(--bg);box-shadow:0 0 0 1px var(--line);transition:box-shadow .4s,transform .5s var(--ease)}
a.pcard__in:hover,a.pcard__in:focus-visible{box-shadow:0 0 0 1px var(--red-text);transform:translateY(-4px)}
.pcard__img{position:relative;margin:0;aspect-ratio:1;overflow:hidden;background:var(--line)}
.pcard__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter .6s var(--ease),transform .8s var(--ease)}
.pcard__in:hover .pcard__img img,.pcard__in:focus-visible .pcard__img img{filter:none;transform:scale(1.05)}
.pcard__num{position:absolute;left:.7rem;bottom:.2rem;font-family:var(--font-title);font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;color:#fff;opacity:.85;text-shadow:0 2px 14px rgba(0,0,0,.45);pointer-events:none}
.pcard__body{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.1rem 1.2rem;flex:1}
.pcard__tag{align-self:flex-start;font-size:.8125rem;color:var(--red-text)}
.pcard__tag::before{content:"#"}
.pcard h3{font-size:clamp(1.55rem,2vw,1.9rem);line-height:1.05}
.pcard p{color:var(--mute);font-size:.9375rem;line-height:1.5;margin:0;padding:0;border:0}
.pcard__go{margin-top:auto;padding-top:.6rem;display:inline-flex;align-items:center;gap:.45rem;font-size:.9375rem;color:var(--ink)}
.pcard__go svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.pcard__in:hover .pcard__go{color:var(--red-text)}
.pcard__in:hover .pcard__go svg{transform:translateX(4px)}
/* Dernière carte « le prochain projet » : appel à l'action en rouge */
.pcard--cta .pcard__in{background:var(--red);color:#fff;box-shadow:none}
.pcard--cta .pcard__img img{filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply;opacity:.9}
.pcard--cta .pcard__tag,.pcard--cta p,.pcard--cta .pcard__go,.pcard--cta .pcard__in:hover .pcard__go{color:#fff}
.pcard--cta p{opacity:.88}
.pcard--cta a.pcard__in:hover{box-shadow:none}
@media (max-width:980px){
  /* Carrousel au doigt sur mobile */
  .pcards{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(-1 * var(--gutter));padding:4px var(--gutter) 1rem 2px;scrollbar-width:none;overscroll-behavior-x:contain}
  .pcards::-webkit-scrollbar{display:none}
  .pcard{flex:0 0 min(76vw,320px);scroll-snap-align:start}
}

/* ----- Citations : guillemets hauts, signature à droite, nom entier ----- */
.qm--close{width:.85em;height:.85em;vertical-align:.1em;margin-left:.2em}
.quote figcaption{align-items:flex-end;text-align:right;padding-left:0}
.sign{padding:0 .35em 0 2.6rem;transform-origin:right center}
.sign__role{padding-left:0}
.sign__role u{text-decoration:none;color:var(--paper-ink);background:linear-gradient(var(--paper-red),var(--paper-red)) no-repeat 0 100%/100% 2px;padding-bottom:1px}
.quote figure:not([hidden]) .sign__role u{animation:underline .7s 1.3s var(--ease) both}
@keyframes underline{from{background-size:0 2px}}
@keyframes sign{from{clip-path:inset(-.4em 100% -.4em -.5em)}to{clip-path:inset(-.4em -.6em -.4em -.5em)}}

/* ----- Marques : liste justifiée, particules derrière les logos ----- */
.logos__list{display:block;text-align:justify;text-align-last:left;line-height:2}
.logos__list li{display:inline-block;white-space:nowrap}
.logos__list li::before,.logos__list li+li::before{display:inline-block;vertical-align:-.08em}
.logos__stage{overflow:hidden}
.logos__dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.logos__item{z-index:1}
.logos__timer{z-index:2}

/* ===== 11/11 (3) ===== */
/* # des titres : sans ombre ni halo (12/11), même rouge que la barre des textes */
.sec-hash,:root:not([data-theme="light"]) .sec-hash{filter:none}

/* Guillemets : le glyphe fourni, jamais tourné ni déformé, seules la taille et la couleur changent */
.qm{aspect-ratio:358/237;height:auto}
.qm--open{transform:none;width:clamp(3.4rem,5.4vw,4.6rem);margin-top:-.4rem}
.qm--close{width:auto;height:.62em;vertical-align:.32em;margin-left:.22em}

/* Apparition au défilement */
.pre{opacity:0;transform:translateY(28px)}
.pre.in{opacity:1;transform:none;transition:opacity .9s var(--ease) calc(var(--d,0) * 110ms),transform 1s var(--ease) calc(var(--d,0) * 110ms)}

/* ----- Notre action : une accroche en grand, puis quatre engagements numérotés ----- */
.action{justify-content:center;gap:0}
.act__punch{margin-top:clamp(1.25rem,3vh,2rem);max-width:58rem;border:0;padding:0}
.act__punch strong{display:block;font-family:var(--font-title);font-weight:400;font-size:clamp(2.4rem,5.6vw,5.4rem);line-height:.95;letter-spacing:.01em;color:var(--red-text)}
.act__punch span{display:block;margin-top:.9rem;max-width:44ch;font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.5;color:var(--mute)}
.acts{margin-top:clamp(2.5rem,6vh,4.5rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.25rem,2.4vw,2.5rem)}
.act{position:relative;padding-top:1.1rem;border-top:2px solid var(--ink);display:flex;flex-direction:column;gap:.7rem}
.act__num{font-family:var(--font-title);font-size:clamp(3.2rem,5vw,4.8rem);line-height:.85;color:transparent;-webkit-text-stroke:1px var(--mute);transition:color .5s var(--ease),-webkit-text-stroke-color .5s}
.act:hover .act__num{color:var(--red);-webkit-text-stroke-color:var(--red)}
.act h3{font-size:clamp(1.45rem,1.9vw,1.9rem);line-height:1.02}
.act__text{color:var(--mute);font-size:.975rem;line-height:1.55;border:0!important;padding:0!important}
.act__line{margin-top:auto;padding-top:.85rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.15rem;font-size:.9375rem;line-height:1.4}
.act__label{font-family:var(--font-title);font-size:.95rem;letter-spacing:.12em;color:var(--red-text)}
.act__value{color:var(--ink)}
@media (max-width:1180px){.acts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.acts{grid-template-columns:1fr}}
@media (max-width:980px){.act{background:var(--bg);box-shadow:0 0 0 10px var(--bg)}}

/* ----- Contact : la jauge et sa légende centrées, formulaire retravaillé ----- */
.contact__side{display:flex;flex-direction:column;align-items:center;text-align:center}
.contact__side p{display:block;border:0;padding:0;margin-top:.75rem;max-width:26ch;font-size:1rem;line-height:1.45}
#contact-form{gap:1.1rem;margin-top:2rem}
.topics{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.topics legend{padding:0;margin-bottom:.75rem;font-family:var(--font-title);font-size:1rem;letter-spacing:.12em;color:var(--mute);float:left;width:100%}
.chip{display:inline-block;padding:0;color:var(--ink);font-size:.9rem;position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:38px;padding:0 1rem;border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.chip:hover span{border-color:var(--mute)}
.chip input:checked+span{background:var(--red);border-color:var(--red);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--red-text);outline-offset:2px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.75rem}
.f{position:relative;padding-top:1.2rem}
.f input,.f textarea{font-size:1.15rem;padding:.5rem 0 .65rem}
.f textarea{min-height:6.5rem}
.f label{position:absolute;left:0;top:1.75rem;padding:0;font-size:1.05rem;color:var(--mute);pointer-events:none;transform-origin:left top;transition:transform .35s var(--ease),color .3s}
.f input:focus+label,.f input:not(:placeholder-shown)+label,.f textarea:focus+label,.f textarea:not(:placeholder-shown)+label{transform:translateY(-1.55rem) scale(.78)}
.f input:focus+label,.f textarea:focus+label{color:var(--red-text)}
.f::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red-text);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);pointer-events:none}
.f:focus-within::after{transform:scaleX(1)}
.f textarea+label{top:1.75rem}
.send{margin-top:.6rem}
.send button{display:inline-flex;align-items:center;gap:.75rem;min-height:56px;padding:0 1.9rem;font-family:var(--font-title);font-size:1.3rem;letter-spacing:.08em}
.send button svg{width:18px;height:18px;transition:transform .45s var(--ease)}
.send button:hover svg{transform:translateX(5px)}
@media (max-width:560px){.f-row{grid-template-columns:1fr}}

/* ----- Collaborations : fiches d'identité ----- */
.collab{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
.collab:nth-child(even) .collab__media{order:2}
.collab:nth-child(even) .collab__img{order:0}
.collab__media{display:flex;flex-direction:column;gap:.5rem;min-width:0}
button.collab__img{display:block;width:100%;padding:0;border:0;cursor:zoom-in;text-align:left}
.collab__img img{transition:transform 1.4s var(--ease),filter .8s var(--ease)}
.collab__img:hover img,.collab__img:focus-visible img{filter:none;transform:scale(1.035)}
.collab__play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(10,10,11,.35);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85);backdrop-filter:blur(3px);transition:background .4s,transform .5s var(--ease),box-shadow .4s}
.collab__play svg{width:24px;height:24px;margin-left:4px}
.collab__img:hover .collab__play{background:var(--red);box-shadow:none;transform:scale(1.08)}
.collab__gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.collab__gal button{display:block;width:100%;padding:0;aspect-ratio:4/3;overflow:hidden;cursor:zoom-in;background:rgba(127,127,127,.12)}
.collab__gal img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter .6s var(--ease),transform .9s var(--ease)}
.collab__gal button:hover img,.collab__gal button:focus-visible img{filter:none;transform:scale(1.05)}
.collab__body{padding:clamp(1.4rem,2.4vw,2.2rem);background:var(--bg);box-shadow:0 0 0 1px var(--line)}
.collab__kicker{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.8rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line);font-family:var(--font-title);font-size:.95rem;letter-spacing:.16em;color:var(--mute)}
.collab__kicker span+span{color:var(--red-text)}
.collab__kind{margin-top:.55rem;font-size:1.05rem;line-height:1.45;color:var(--ink)}
.collab__id{margin:1.3rem 0 0;border-top:1px solid var(--line)}
.collab__id:empty{display:none}
.collab__id>div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.collab__id dt{font-family:var(--font-title);font-size:.95rem;letter-spacing:.12em;color:var(--mute)}
.collab__id dd{margin:0;font-size:.975rem;line-height:1.45}
.collab__id dd.collab__role{margin:0;color:var(--red-text)}
.collab__text{margin-top:1.2rem;border:0!important;padding:0!important;color:var(--mute);line-height:1.65}
.collab__quote{position:relative;margin-top:1.4rem;padding-left:3.2rem;font-size:1.125rem;line-height:1.45;color:var(--ink)}
.collab__quote .qm{position:absolute;left:0;top:.25rem;width:2.4rem;fill:var(--red)}
.collab__quote cite{display:block;margin-top:.45rem;font-style:normal;font-size:.875rem;color:var(--mute)}
.collab__links{margin-top:1.4rem}
@media (max-width:980px){
  .collab{grid-template-columns:1fr}
  .collab:nth-child(even) .collab__media{order:0}
  .collab__body{box-shadow:0 0 0 1px var(--line)}
}

/* ----- Références : la poussière se balade sur toute la bande papier ----- */
.refs{position:relative;isolation:isolate}
.refs__dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.refs>div{position:relative;z-index:1}

/* ===== 12/11 : formulaire de contact en carte « brief » encadrée ===== */
:root{--card:#141416;--field:rgba(242,241,238,.035);--field-line:rgba(242,241,238,.18)}
:root[data-theme="light"]{--card:#fbfaf7;--field:rgba(18,18,19,.025);--field-line:rgba(18,18,19,.2)}
.contact{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.contact__form{max-width:760px}
.brief{
  --c:22px;position:relative;margin-top:2rem;gap:1.6rem;padding:clamp(1.4rem,3vw,2.6rem);
  background:
    linear-gradient(var(--red),var(--red)) 0 0/var(--c) 3px,linear-gradient(var(--red),var(--red)) 0 0/3px var(--c),
    linear-gradient(var(--red),var(--red)) 100% 0/var(--c) 3px,linear-gradient(var(--red),var(--red)) 100% 0/3px var(--c),
    linear-gradient(var(--red),var(--red)) 0 100%/var(--c) 3px,linear-gradient(var(--red),var(--red)) 0 100%/3px var(--c),
    linear-gradient(var(--red),var(--red)) 100% 100%/var(--c) 3px,linear-gradient(var(--red),var(--red)) 100% 100%/3px var(--c),
    var(--card);
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px var(--field-line),0 30px 80px -30px rgba(0,0,0,.65)
}
:root[data-theme="light"] .brief{box-shadow:inset 0 0 0 1px var(--field-line),0 30px 70px -35px rgba(18,18,19,.3)}
.brief__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1.1rem;border-bottom:1px dashed var(--field-line);font-family:var(--font-title);letter-spacing:.1em;text-transform:uppercase;font-size:.9rem}
.brief__id{display:inline-flex;align-items:center;gap:.5rem}
.brief__hash{width:1.15em;height:1.15em;--hash-red:var(--red);--hash-ring:currentColor}
.brief__bar{display:inline-flex;align-items:center;gap:.75rem;color:var(--mute)}
.brief__bar b{font-weight:inherit;color:var(--red-text);font-variant-numeric:tabular-nums;min-width:7.5ch;text-align:right}
.brief__bar i{display:block;width:clamp(70px,10vw,130px);height:6px;background:var(--field);box-shadow:inset 0 0 0 1px var(--field-line)}
.brief__bar s{display:block;height:100%;width:0;background:var(--red);transition:width .7s var(--ease)}

/* Étapes numérotées */
.brief .step{position:relative;padding-left:3.2rem}
.brief .step::before{content:attr(data-step);position:absolute;left:0;top:0;font-family:var(--font-title);font-size:1.6rem;line-height:1;color:var(--red-text);letter-spacing:.02em}
.brief .f.step::before{top:1.2rem}
.brief .f-row.step::before{top:1.2rem}
.brief .topics legend{float:none;margin-bottom:.8rem}

/* Champs en cases */
.brief .f input,.brief .f textarea{background:var(--field);border:1px solid var(--field-line);padding:1.35rem .95rem .6rem;transition:border-color .3s,background .3s}
.brief .f input:hover,.brief .f textarea:hover{border-color:var(--mute)}
.brief .f input:focus,.brief .f textarea:focus{border-color:var(--red-text);background:transparent}
.brief .f label{left:.95rem;top:2.25rem}
.brief .f.step label{left:calc(3.2rem + .95rem)}
.brief .f input:focus+label,.brief .f input:not(:placeholder-shown)+label,.brief .f textarea:focus+label,.brief .f textarea:not(:placeholder-shown)+label{transform:translateY(-.85rem) scale(.72)}
.brief .f::after{left:0;right:0;bottom:0}
.brief .f.step::after{left:3.2rem}
.brief .f textarea{min-height:9rem}
.brief .chip span{border-color:var(--field-line);background:var(--field)}

/* Envoi : bouton rouge sur toute la largeur */
.brief .send{margin-top:.2rem;padding-top:1.4rem;border-top:1px dashed var(--field-line);display:grid;gap:.75rem}
.brief .send button{width:100%;justify-content:center;min-height:64px;font-size:1.5rem;background:var(--red);box-shadow:0 12px 30px -12px rgba(237,28,36,.65)}
.brief .send button:hover{background:#c8101a}
.brief .send output:empty{display:none}
.brief.is-full .brief__bar b{color:var(--red-text)}

@media (max-width:980px){
  .brief{margin-top:1.5rem}
}
@media (max-width:560px){
  .brief{--c:16px;padding:1.25rem 1rem 1.4rem;gap:1.3rem}
  .brief__head{font-size:.78rem}
  .brief .step{padding-left:0}
  .brief .step::before{content:none}
  .brief .f.step label{left:.95rem}
  .brief .f.step::after{left:0}
}

/* ===== 12/11 : « Laissez votre appréciation » dans la même carte que le contact, version papier ===== */
dialog.review-dialog{width:min(720px,100vw - 1.5rem);padding:0;background:transparent;overflow:auto;box-shadow:none}
dialog.review-dialog[open]{display:block}
.brief--paper{
  --red:var(--paper-red);--red-text:var(--paper-red);--ink:var(--paper-ink);--mute:var(--paper-mute);
  --card:var(--paper);--field:rgba(18,18,19,.03);--field-line:rgba(18,18,19,.2);
  color:var(--paper-ink);margin:0;box-shadow:inset 0 0 0 1px var(--field-line),0 40px 90px -30px rgba(0,0,0,.75)
}
:root[data-theme="light"] .brief--paper{box-shadow:inset 0 0 0 1px var(--field-line),0 40px 90px -30px rgba(18,18,19,.45)}
.brief--paper .brief__head{padding-bottom:.8rem}
.brief--paper .brief__head .icon-btn{margin:-.6rem -.7rem -.6rem 0;color:var(--paper-ink)}
.brief--paper .review__head{display:block}
.brief--paper .review__head h2{font-size:clamp(2rem,4vw,3rem);line-height:1}
.brief--paper .review__intro{margin-top:.9rem;max-width:46ch}
.brief--paper .step[data-step="01"]{display:grid;gap:1rem}
.brief--paper .step[data-step="01"]::before{top:1.2rem}
.brief--paper .f label{color:var(--paper-mute)}
.brief--paper .f input,.brief--paper .f textarea{color:var(--paper-ink);caret-color:var(--paper-red)}
.brief--paper .f input:focus,.brief--paper .f textarea:focus{background:#fff}
.brief .review__text textarea{min-height:10rem;padding-right:3.6rem;padding-bottom:1.8rem}
.review__qm{position:absolute;right:.9rem;top:2rem;width:2.4rem;height:auto;aspect-ratio:358/237;fill:var(--paper-red);opacity:.85;pointer-events:none}
.review__count{position:absolute;right:.9rem;bottom:.6rem;font-size:.75rem;color:var(--paper-mute);font-variant-numeric:tabular-nums;pointer-events:none}
.review__count.is-near{color:var(--paper-red)}
.brief--paper .send button{box-shadow:0 12px 30px -12px rgba(196,18,26,.6)}
.brief--paper .send button:hover{background:#a50f16}
@media (max-width:560px){
  dialog.review-dialog{width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem)}
  .brief--paper .step[data-step="01"]::before{content:none}
  .brief--paper .f-row{grid-template-columns:1fr}
}

/* ===== 12/11 (2) : plus de numéros d'étape, un trait rouge sur toute la hauteur ; avis en manuscrit ===== */
.brief .step,.brief .f.step{padding-left:1.1rem;padding-top:0;border-left:2px solid var(--red)}
.brief .f.step{padding-top:1.2rem}
.brief .step::before{content:none}
.brief .f.step label{left:calc(1.1rem + .95rem)}
.brief .f.step::after{left:1.1rem}
.brief .f-row.step{padding-top:0}

/* Guillemets de l'avis : ouvrant en haut à gauche, fermant en bas à droite, en grand */
.brief .f.step.review__text{padding-top:3.3rem}
.review__qm{position:absolute;width:clamp(3.4rem,7vw,4.6rem);height:auto;aspect-ratio:358/237;fill:var(--paper-red);opacity:1;pointer-events:none;z-index:1}
.review__qm--open{left:1.1rem;right:auto;top:0;width:clamp(3rem,6vw,3.8rem);transform:rotate(180deg)}
.review__qm--close{right:-.5rem;left:auto;top:auto;bottom:-1.3rem}
.brief .review__text textarea{padding:1.6rem 1.1rem 2rem;padding-right:1.1rem;min-height:11rem;
  font-family:"Caveat",cursive;font-size:1.7rem;line-height:1.2}
.brief .review__text label{top:4.35rem}
.review__count{left:calc(1.1rem + .95rem);right:auto}
@media (max-width:560px){
  .review__qm--open{left:.85rem}
  .brief .step,.brief .f.step{padding-left:.85rem}
  .brief .f.step label,.review__count{left:calc(.85rem + .95rem)}
  .brief .f.step::after{left:.85rem}
}

/* ===== 12/11 (3) : témoignages publiés en manuscrit (Caveat), comme le formulaire d'avis ===== */
.quote blockquote{font-family:"Caveat",cursive;font-weight:500;font-size:clamp(1.85rem,2.9vw,2.8rem);line-height:1.15;letter-spacing:0}
.quote .qm--close{height:.5em;vertical-align:.4em}
/* Témoignages : guillemet ouvrant retourné (sens de l'ouverture), comme dans le formulaire d'avis */
.quote .qm--open{transform:rotate(180deg)}

/* ===== 12/11 (4) ===== */
/* Témoignages : deux grands guillemets de même taille, au début et à la fin de la phrase */
.quote figure{padding-top:0}
.quote .qm,.quote .qm--open,.quote .qm--close{position:static;display:inline-block;width:auto;height:.95em;aspect-ratio:358/237;margin:0;margin-top:0;vertical-align:.12em}
.quote .qm--open{transform:rotate(180deg);margin-right:.22em}
.quote .qm--close{transform:none;margin-left:.18em}
/* Signature : la société et la fonction plus grandes, un peu plus bas */
.quote .sign__role{font-size:clamp(1.05rem,1.4vw,1.3rem);letter-spacing:.1em;margin-top:.7rem}

/* Formulaires : un seul trait rouge continu du premier au dernier bloc */
.brief .step+.step::before{content:"";position:absolute;left:-2px;top:-1.7rem;height:1.7rem;width:2px;background:var(--red)}
@media (max-width:560px){.brief .step+.step::before{top:-1.4rem;height:1.4rem}}

/* Section « Compétences spécifiques » */
.skills{padding-top:clamp(4rem,10vh,7rem);padding-bottom:clamp(3rem,8vh,5rem)}
.skills__head{max-width:46rem}
.skills__list{list-style:none;margin:clamp(2rem,5vh,3.5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.skill{position:relative;padding:clamp(1.25rem,2.4vw,2rem) clamp(1rem,2vw,1.75rem) clamp(1.5rem,3vw,2.4rem);border-bottom:1px solid var(--line);background:var(--bg)}
.skill+.skill{border-left:1px solid var(--line)}
.skill:nth-child(3n+1){border-left:0}
.skill__num{display:block;font-family:var(--font-title);font-size:1rem;letter-spacing:.12em;color:var(--mute)}
.skill__name{margin-top:.6rem;font-size:clamp(2rem,3.4vw,3.2rem);line-height:.95}
.skill__name .tag{margin-right:.08em}
.skill__text{margin-top:.9rem;color:var(--mute);max-width:34ch;font-size:.9875rem;line-height:1.5}
.skill::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.skill:hover::after{transform:scaleX(1)}
@media (max-width:980px){
  .skills__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skill:nth-child(3n+1){border-left:1px solid var(--line)}
  .skill:nth-child(2n+1){border-left:0}
}
@media (max-width:560px){
  .skills__list{grid-template-columns:1fr}
  .skill,.skill:nth-child(3n+1){border-left:0}
}

/* Services : titre posé sur le trait de légende des particules */
.callout{position:fixed;left:0;top:0;z-index:0;pointer-events:none;opacity:0;will-change:transform,opacity}
.callout span{position:absolute;right:0;bottom:.35rem;white-space:nowrap;font-family:var(--font-title);font-size:clamp(1.3rem,1.9vw,2rem);letter-spacing:.04em;line-height:1;color:var(--red-text)}
.callout--left span{right:auto;left:0}
.no-gl .callout{display:none}
/* Sur mobile le titre du service est déjà affiché juste sous le logo : le trait suffit */
/* Mobile (13/11) : le nom court du service reste affiché au bout du trait */
@media (max-width:980px){
  .callout span{font-size:1.15rem;bottom:.25rem;white-space:normal;width:max-content;max-width:5.4em;line-height:.95;text-align:right}
  .callout--left span{text-align:left}
}
/* Services sur mobile : plus de fond opaque derrière les textes, ils s'effacent dans la zone du logo (fadeSvc dans main.js) */
@media (max-width:980px){
  .svc h2,.svc__item>h3,.svc__body{background:none;box-shadow:none}
}

/* Collaborations : « Fait d'armes » en encadré, liens réseaux à côté du site */
.collab__feat{margin-top:1.4rem;padding:1rem 1.15rem 1.1rem;border-left:2px solid var(--red);background:rgba(237,28,36,.07);color:var(--ink);line-height:1.55}
.collab__feat-label{font-family:var(--font-title);font-size:1rem;letter-spacing:.14em;color:var(--red-text);margin-bottom:.35rem}
.collab__links{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
/* Boutons icônes : tous ronds, même taille, même trait fin ; la vidéo est la seule pleine (rouge, triangle blanc) */
.ibtn{flex:none;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;transition:color .35s,box-shadow .35s,background .35s,transform .45s var(--ease)}
.ibtn svg{width:18px;height:18px;stroke-width:1.4}
.ibtn:hover,.ibtn:focus-visible,.follow:hover .ibtn,.follow:focus-visible .ibtn{color:#fff;background:var(--red);box-shadow:inset 0 0 0 1px var(--red);transform:translateY(-2px)}
.ibtn--yt{background:var(--red);color:#fff;box-shadow:inset 0 0 0 1px var(--red)}
.ibtn--yt svg{margin-left:2px}
.ibtn--yt:hover,.ibtn--yt:focus-visible{background:#ff1f27;box-shadow:inset 0 0 0 1px #ff1f27,0 8px 22px -8px rgba(237,28,36,.75)}

/* « Nous suivre » : même bouton rond + le # rouge et le nom */
.details ul{gap:.6rem 1.4rem}
.follow{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none!important}
.follow .ibtn{width:36px;height:36px}
.follow .ibtn svg{width:16px;height:16px}
.follow:hover>span:last-child{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Témoignages : guillemet de fin de phrase plus bas, posé sur la ligne */
.quote .qm--close{vertical-align:-.5em}

/* Collaborations : icônes seules, sans cercle, qui passent au rouge au survol */
.collab__links{gap:1.1rem;align-items:center}
.collab__links .ibtn,.collab__links .ibtn--yt{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:var(--ink);padding:.15rem}
.collab__links .ibtn svg{width:24px;height:24px;margin:0;stroke-width:1.4}
.collab__links .ibtn:hover,.collab__links .ibtn:focus-visible{background:none;box-shadow:none;color:var(--red);transform:translateY(-2px)}

/* Lecteur : vidéo du site (.mp4) au même format que les vidéos YouTube */
.view__stage video{width:min(100%,calc((100dvh - 150px) * 16 / 9));max-height:100%;aspect-ratio:16/9;background:#000}

/* Collaborations : textes longs en paragraphes (paras() dans inc/boot.php), titres d'œuvres en italique (*…*) */
.collab__text p+p{margin-top:.85em}
.collab__feat p+p{margin-top:.6em}
.collab__text em,.collab__feat em{font-style:italic}

/* Collaborations en article (13/11) : en haut, la photo et la fiche d'identité à la même hauteur ;
   dessous, le récit sur toute la largeur en deux colonnes, comme une page de magazine. Plus de zone vide. */
.collab{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"media body" "story story";align-items:stretch;row-gap:clamp(1.6rem,3vw,2.6rem)}
.collab:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"body media" "story story"}
.collab__media{grid-area:media}
.collab:nth-child(even) .collab__media{order:0}
.collab__body{grid-area:body;display:flex;flex-direction:column}
.collab__body .collab__links{margin-top:auto;padding-top:1.4rem}
.collab__story{grid-area:story;position:relative;padding-top:clamp(1.4rem,2.6vw,2.2rem);border-top:1px solid var(--line)}
.collab__story::before{content:"";position:absolute;left:0;top:-1px;width:clamp(3rem,8vw,6rem);height:2px;background:var(--red)}
.collab__story .collab__text{margin:0;max-width:none;column-count:2;column-gap:clamp(2rem,4vw,3.5rem);column-rule:1px solid var(--line);color:var(--mute);line-height:1.7;hyphens:auto;-webkit-hyphens:auto;text-align:justify}
.collab__story .collab__text p{orphans:3;widows:3}
.collab__story .collab__text p:first-child::first-letter{float:left;font-family:var(--font-title);font-size:3.6em;line-height:.82;padding:.06em .1em 0 0;color:var(--red-text)}
.collab__story .collab__quote{max-width:46rem;margin:clamp(1.6rem,3vw,2.4rem) auto 0}
.collab__feat{margin-top:1.3rem}
@media (max-width:980px){
  .collab,.collab:nth-child(even){grid-template-columns:1fr;grid-template-areas:"media" "body" "story"}
  .collab__story .collab__text{column-count:1;text-align:left}
}
/* Chapô dans la fiche ; la photo principale grandit pour suivre la hauteur de la fiche */
.collab__lead{margin-top:1.2rem;color:var(--ink);font-size:1.0625rem;line-height:1.6}
.collab__media .collab__img{flex:1 1 auto;aspect-ratio:16/10;min-height:0}
.collab__media .collab__img img{position:absolute;inset:0}
.collab__gal{flex:none}

/* Collaborations (13/11) : une fiche = un seul bloc encadré. La photo, la fiche d'identité et le récit
   partagent le même cadre (coins rouges), le récit rappelle le nom : on sait à qui appartient le texte. */
.collab{position:relative;padding:clamp(1rem,2.2vw,1.8rem);background:rgba(127,127,127,.08);box-shadow:0 0 0 1px var(--line)}
.collab::before,.collab::after{content:"";position:absolute;width:22px;height:22px;pointer-events:none;border:0 solid var(--red)}
.collab::before{left:-1px;top:-1px;border-width:2px 0 0 2px}
.collab::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.collab__body{box-shadow:none;background:none;padding:clamp(.4rem,1vw,.8rem) clamp(.2rem,.8vw,.6rem)}
.collab__story{border-top:1px dashed var(--line);padding-top:clamp(1.1rem,2vw,1.6rem)}
.collab__story::before{display:none}
.collab__story-kicker{display:flex;gap:.9rem;align-items:baseline;margin-bottom:1.1rem;font-family:var(--font-title);font-size:.95rem;letter-spacing:.16em;color:var(--mute)}
.collab__story-kicker span:first-child{color:var(--red-text)}
.collab__story-kicker span+span::before{content:"— ";color:var(--line)}
.collabs__list{gap:clamp(3.5rem,10vh,7rem)}
@media (max-width:980px){.collab{padding:.9rem}}

/* Accueil (13/11) : « Agence de communication 360° » et les hashtags un peu plus gros
   (préfixe .hero : la règle générique « .hero p » est plus spécifique qu'une simple classe) */
.hero .hero__kicker{font-size:clamp(1.4rem,2.1vw,2rem)}
.hero .k360{width:clamp(58px,5.6vw,80px)}
.hero .k360 b{font-size:clamp(1.2rem,1.7vw,1.55rem)}
.hero .hero__tags{font-size:clamp(1.2rem,1.5vw,1.45rem);gap:.3rem 1.5rem}
@media (max-width:480px){.hero .hero__kicker{font-size:1.3rem;gap:.6rem}.hero .k360{width:54px}.hero .k360 b{font-size:1.15rem}.hero .hero__tags{font-size:1.15rem;gap:.2rem 1.1rem}}

/* 13/11 : fond des fiches collaborations un peu plus soutenu en thème clair */
:root[data-theme="light"] .collab{background:rgba(18,18,19,.075)}
/* Badge 360 : « 360 » centré pile dans le cercle, le ° accroché à droite hors centrage ;
   pointe de flèche pleine, tangente à l'arc (au lieu d'un simple chevron) */
.hero .k360 b{position:relative;padding-top:.08em}
.k360 b i{position:absolute;left:100%;top:.02em;font-style:normal;font-size:.7em;margin-left:.04em}
.k360__head{fill:var(--red-text);stroke:var(--red-text);stroke-width:1.2}

/* 13/11 : le Fait d'armes descend en bas de la fiche, juste au-dessus des icônes de liens */
.collab__body .collab__feat{margin-top:auto}
.collab__body .collab__feat+.collab__links{margin-top:0;padding-top:1.1rem}
.collab__body .collab__lead+.collab__feat{margin-top:auto;padding-top:1rem}

/* 13/11 : coordonnées en 1/4 · 1/4 · 2/4 (« Nous suivre » a la place d'aligner ses réseaux sur une ligne) */
.details{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr)}
@media (max-width:980px){.details{grid-template-columns:1fr 1fr}.details>div:nth-child(3){grid-column:1/-1}}
@media (max-width:480px){.details{grid-template-columns:1fr}}
@media (min-width:981px){.details ul{gap:.6rem .5rem;justify-content:space-between}}

/* 13/11 : bas de page « signature » (d'après le croquis de Ben), centré. L'adresse email est une image (canvas dessiné
   par main.js, rien de lisible dans le HTML) ; accolades rouges cliquables : moi → LinkedIn, website → site, icônes → réseaux. */
.sig{grid-column:1/-1;position:relative;margin-top:clamp(3rem,8vh,5.5rem);padding:clamp(2.5rem,6vh,4rem) 0 clamp(1rem,3vh,2rem);border-top:1px solid var(--line);text-align:center}
.sig::before{content:"";position:absolute;left:50%;top:-1px;width:clamp(4rem,10vw,8rem);height:2px;margin-left:calc(clamp(4rem,10vw,8rem) / -2);background:var(--red)}
.sig__mail{display:block;padding:1.35em 0 2.05em;font-size:clamp(1.25rem,5.4vw,5.6rem);line-height:1}
.sig__box{position:relative;display:inline-block;vertical-align:top;font-size:inherit}
.sig__img{display:block;color:var(--ink);height:1em}
.sig__box:not(.is-drawn) .sig__br{display:none}
.sig__br{position:absolute;top:0;bottom:0;pointer-events:none}
.sig__br::after{content:"";position:absolute;left:-.04em;right:-.04em;border:2px solid var(--red);transition:border-color .3s}
.sig__br--top::after{top:-.34em;height:.24em;border-bottom:0}
.sig__br--net::after{bottom:-.3em;height:.2em;border-top:0}
.sig__br--email::after{left:-.1em;right:-.1em;bottom:-.92em;height:.3em;border-top:0;border-color:var(--line)}
.sig__lbl{position:absolute;left:50%;z-index:1;line-height:0;color:var(--mute);text-decoration:none;white-space:nowrap;pointer-events:auto;transition:color .3s}
.sig__lbl>span{display:inline-flex;align-items:center;gap:.7em;padding:0 .6em;background:var(--bg);font-size:clamp(.72rem,.24em,1.15rem);letter-spacing:.04em;line-height:1.2}
.sig__br--top>.sig__lbl{top:-.34em;transform:translate(-50%,-50%)}
.sig__br--net>.sig__lbl{bottom:-.3em;transform:translate(-50%,50%)}
.sig__br--email>.sig__lbl{bottom:-.92em;transform:translate(-50%,50%)}
.sig__lbl--icons>span{font-size:clamp(.95rem,.3em,1.5rem)}
.sig__lbl--icons a{display:inline-grid;place-items:center;color:var(--ink);transition:color .3s,transform .35s var(--ease)}
.sig__lbl--icons svg{width:1.1em;height:1.1em;stroke-width:1.4}
.sig__lbl--icons a:hover,.sig__lbl--icons a:focus-visible{color:var(--red-text);transform:translateY(-2px)}
a.sig__lbl:hover,a.sig__lbl:focus-visible{color:var(--red-text)}
.sig__br--top:has(>a.sig__lbl:hover)::after,.sig__br--net:has(a:hover)::after{border-color:var(--ink)}
.sig__line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem .8rem;margin:0;font-size:clamp(.95rem,1.35vw,1.25rem);color:var(--mute)}
.sig__line .sec-hash{width:1.5em;height:1.5em;margin:0}
.sig__line i{font-style:normal}
.sig__line a{color:var(--ink);text-decoration:none;transition:color .3s}
.sig__line a:hover,.sig__line a:focus-visible{color:var(--red-text)}
@media (max-width:980px){.sig{background:var(--bg);box-shadow:0 0 0 12px var(--bg)}.sig__br::after{border-width:1.5px}}
@media (max-width:480px){.sig__line i{display:none}.sig__line{gap:.3rem 1rem}}

/* 13/11 : adresse / téléphone collés sous l'email et à sa largeur exacte (fitLine dans main.js) ; poussière autour */
.sig__dust{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;color:var(--ink)}
.sig__mail,.sig__line{position:relative;z-index:1}
.sig__mail{padding-bottom:1.5em}
.sig__line{gap:.3em .7em}
.sig__line.is-fit{display:inline-flex;flex-wrap:nowrap;white-space:nowrap;max-width:none}
.sig__mail{padding-bottom:1.02em}
.sig__br--email::after{bottom:-.7em;height:.26em}
.sig__br--email>.sig__lbl{bottom:-.7em}
/* 13/11 : signature resserrée, environ 1/3 de la largeur sur ordinateur */
.sig__mail{font-size:clamp(1.25rem,1.85vw,2.3rem)}

/* 13/11 : Compétences spécifiques = sous-titre + texte + logo PariSuperlive (lien). La grille n'est plus affichée. */
.skills__head{max-width:none}
.skills__head .lede{font-size:clamp(1.15rem,1.6vw,1.45rem);color:var(--ink)}
.skills__body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center;margin-top:clamp(1.8rem,4vh,3rem)}
.skills__text{max-width:62ch;color:var(--mute);line-height:1.7}
.skills__text p+p{margin-top:1em}
.skills__text p:first-child{color:var(--ink)}
.skills__text p:has(>em:only-child){margin:1.4em 0;padding-left:1rem;border-left:2px solid var(--red);font-family:var(--font-title);font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.1;letter-spacing:.02em;color:var(--ink)}
.skills__text p:has(>em:only-child) em{font-style:normal}
.skills__a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px;transition:color .3s}
.skills__a:hover,.skills__a:focus-visible{color:var(--red-text)}
.skills__logo{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:clamp(1.5rem,3vw,2.5rem);text-decoration:none;color:var(--mute);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .4s,color .3s}
.skills__logo img{width:min(100%,24rem);height:auto;transition:transform .6s var(--ease)}
.skills__logo span{font-size:.9375rem;letter-spacing:.04em}
.skills__logo b{font-weight:400;color:var(--red-text)}
.skills__logo:hover,.skills__logo:focus-visible{color:var(--ink);box-shadow:inset 0 0 0 1px var(--red)}
.skills__logo:hover img{transform:scale(1.04)}
/* le logo a une partie blanche : en thème clair on l'inverse en gardant l'orange */
:root[data-theme="light"] .skills__logo img{filter:invert(1) hue-rotate(180deg) saturate(1.3)}
@media (max-width:980px){.skills__body{grid-template-columns:1fr}.skills__logo{justify-self:start;width:100%}}
/* 13/11 : logo PariSuperlive dans la phrase, à la place du mot ; plus de cadre logo à droite */
.skills__body{grid-template-columns:minmax(0,1fr)}
.skills__text{max-width:68ch}
.skills__inlogo{display:inline-block;height:1.55em;width:auto;margin:-.3em .12em -.25em;vertical-align:middle;transition:transform .4s var(--ease)}
.skills__a{text-decoration:none}
.skills__a:hover .skills__inlogo,.skills__a:focus-visible .skills__inlogo{transform:scale(1.06)}
:root[data-theme="light"] .skills__inlogo{filter:invert(1) hue-rotate(180deg) saturate(1.3)}
.skills__text strong{font-weight:700;color:var(--ink)}
/* 13/11 : photos de la section Compétences, à droite du texte (assets/img/skills/skills-1…4.jpg) ;
   noir et blanc puis couleur au survol, ouverture en grand au clic */
.skills__body{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:start}
.skills__pics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.skills__pics li:nth-child(1),.skills__pics li:nth-child(4){grid-column:1/-1}
.skills__pics button{display:block;width:100%;padding:0;border:0;overflow:hidden;cursor:zoom-in;background:rgba(127,127,127,.12);aspect-ratio:16/10}
.skills__pics li:nth-child(2) button,.skills__pics li:nth-child(3) button{aspect-ratio:4/5}
.skills__pics img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter .7s var(--ease),transform 1.2s var(--ease)}
.skills__pics li:nth-child(4) img{object-position:30% 30%}
.skills__pics button:hover img,.skills__pics button:focus-visible img{filter:none;transform:scale(1.04)}
@media (max-width:980px){.skills__body{grid-template-columns:1fr}}
/* mosaïque compacte : 1 grande + 3 côte à côte, pour rester à la hauteur du texte */
.skills__pics{grid-template-columns:repeat(3,minmax(0,1fr))}
.skills__pics li:nth-child(4){grid-column:auto}
.skills__pics li:nth-child(1) button{aspect-ratio:16/9}
.skills__pics li:nth-child(n+2) button{aspect-ratio:3/4}
.skills__pics li:nth-child(4) img{object-position:38% 40%}
.skills__body{align-items:center}
/* 13/11 : 6 projets (WALLPIC ajouté) → 3 par ligne sur ordinateur */
@media (min-width:981px){.pcards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 13/11 : logo # à gauche de l'email et de l'adresse ; l'amas de particules (main.js) les découpe en négatif */
.sig__card{position:relative;z-index:1;display:inline-flex;align-items:center;gap:clamp(.9rem,1.6vw,1.8rem);font-size:clamp(1.25rem,1.85vw,2.3rem);text-align:center}
.sig__card .sig__mail{font-size:1em}
.sig__stack{display:flex;flex-direction:column;align-items:center}
.sig__logo{flex:none;width:auto;height:3.4em;--hash-red:var(--red);--hash-ring:var(--ink);overflow:visible}
@media (max-width:700px){.sig__card{flex-direction:column;gap:.4rem}.sig__logo{height:2.6em}}

/* 13/11 : filet du bas de page rapproché des adresses ; particules sur toute la largeur jusqu'au menu du bas ;
   le logo n'est pas affiché (son emplacement reste) : c'est le vide dans les particules qui le dessine */
.sig{padding-top:clamp(1.4rem,3.2vh,2.2rem)}
.sig__dust{inset:auto;top:0;left:0;height:100%}
.sig__logo{visibility:hidden}

/* 13/11 v4 : le # n'occupe plus de place (il est découpé en grand dans les particules) → adresses centrées ;
   accolade « email » descendue sous les icônes des réseaux */
.sig__logo{display:none}
.sig__card .sig__mail{padding-bottom:1.18em}
.sig__br--email::after{bottom:-.86em;height:.3em}
.sig__br--email>.sig__lbl{bottom:-.86em}

/* (13/11) Logos clairs ou blancs (champ « Teinte du logo » = clair) : inversés pour rester lisibles sur la bande papier,
   la rotation de teinte garde à peu près les couleurs d'origine */
.logos__item--light img{filter:invert(1) hue-rotate(180deg)}
@media (hover:hover){
  .logos__item--light img{filter:invert(1) hue-rotate(180deg) grayscale(1) contrast(1.05)}
  .logos__item--light:hover img,.logos__item--light a:focus-visible img{filter:invert(1) hue-rotate(180deg)}
}

/* (13/11) Logos clients ajustés à la zone : fichiers rognés au plus près, puis échelle optique --s (index.php, logo_fit())
   pour que carrés et logos allongés pèsent à peu près pareil. */
.logos__item a{position:absolute;inset:0;width:auto;height:auto}
.logos__item img{position:absolute;inset:0;margin:auto;width:calc(var(--s,1)*100%);height:calc(var(--s,1)*100%);object-fit:contain}

/* (13/11) Ombre sous les logos clients : drop-shadow suit la forme du logo (transparence), pas son cadre.
   Deux couches (contact serré + halo diffus), en dernier dans la liste de filtres pour s'appliquer après
   le noir et blanc / l'inversion. Au survol le logo « se soulève » : l'ombre descend et s'élargit.
   Les listes de filtres gardent le même nombre de fonctions au repos et au survol pour une transition fluide. */
.logos__item img{
  --sh:drop-shadow(0 4px 3px rgba(28,22,14,.16)) drop-shadow(0 14px 16px rgba(28,22,14,.13));
  --sh-up:drop-shadow(0 7px 5px rgba(28,22,14,.14)) drop-shadow(0 24px 26px rgba(28,22,14,.16));
  filter:var(--sh)}
.logos__item--light img{filter:invert(1) hue-rotate(180deg) var(--sh)}
@media (hover:hover){
  .logos__item img{filter:grayscale(1) contrast(1.05) var(--sh)}
  .logos__item:hover img,.logos__item a:focus-visible img{filter:grayscale(0) contrast(1) var(--sh-up)}
  .logos__item--light img{filter:invert(1) hue-rotate(180deg) grayscale(1) contrast(1.05) var(--sh)}
  .logos__item--light:hover img,.logos__item--light a:focus-visible img{filter:invert(1) hue-rotate(180deg) grayscale(0) contrast(1) var(--sh-up)}
}

/* (13/11) Logo du client en fond de la fiche d'identité (champ collab « logo ») : grand, légèrement incliné
   du côté des photos (photos à gauche → penche à gauche ; fiches paires, photos à droite → penche à droite).
   Monochrome et discret pour ne pas gêner la lecture ; il se révèle un peu au survol de la fiche. */
.collab__body{position:relative;isolation:isolate}
.collab__body>*{position:relative;z-index:1}
.collab__body>.collab__logo{position:absolute;z-index:0;top:47%;left:50%;width:min(92%,430px);max-height:80%;height:auto;object-fit:contain;
  translate:-62% -50%;rotate:-9deg;pointer-events:none;user-select:none;
  filter:grayscale(1) invert(1) brightness(1.15);opacity:.2;transition:opacity .6s var(--ease),rotate .9s var(--ease)}
.collab:nth-child(even) .collab__body>.collab__logo{translate:-38% -50%;rotate:9deg}
.collab:hover .collab__body>.collab__logo{opacity:.3;rotate:-7deg}
.collab:nth-child(even):hover .collab__body>.collab__logo{rotate:7deg}
:root[data-theme="light"] .collab__body>.collab__logo{filter:grayscale(1);opacity:.16}
:root[data-theme="light"] .collab:hover .collab__body>.collab__logo{opacity:.24}
@media (max-width:980px){
  .collab__body>.collab__logo,.collab:nth-child(even) .collab__body>.collab__logo{width:min(70%,300px);translate:-50% -50%}
}
@media (prefers-reduced-motion:reduce){.collab__body>.collab__logo{transition:none}}

/* ----- Réalisations : bouton vers la chaîne YouTube (14/11) ----- */
.tile--yt{color:inherit;text-decoration:none}
.tile--yt .tile__img{display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 40%,#1d1d20,#0c0c0d 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tile--yt img{position:absolute;inset:0;opacity:.35}
.tile__ytbtn{position:relative;display:flex;flex-direction:column;align-items:center;gap:.85rem;width:44%;max-width:170px;color:var(--red);transition:transform .5s var(--ease),color .3s}
.tile__ytbtn svg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 18px rgba(237,28,36,.35))}
.tile__ytlab{font-family:var(--font-title);font-size:1.15rem;letter-spacing:.06em;color:#f2f1ee;white-space:nowrap}
.tile--yt:hover .tile__ytbtn,.tile--yt:focus-visible .tile__ytbtn{transform:scale(1.08);color:#ff0000}
@media (prefers-reduced-motion:reduce){.tile__ytbtn{transition:none}.tile--yt:hover .tile__ytbtn{transform:none}}
/* Variante Instagram du bouton (14/11) : logo carré, un peu plus petit que le bouton YouTube */
.tile--ig .tile__ytbtn{width:30%;max-width:120px}
.tile--ig .tile__ytbtn svg{filter:drop-shadow(0 6px 18px rgba(214,36,159,.35))}
/* Variante Facebook du bouton (14/11) */
.tile--fb .tile__ytbtn{width:30%;max-width:120px}
.tile--fb .tile__ytbtn svg{filter:drop-shadow(0 6px 18px rgba(24,119,242,.35))}

/* ----- Bandeau de consentement Google Analytics (14/11) : visible seulement si un identifiant GA4 est réglé ----- */
.consent{position:fixed;left:16px;right:16px;bottom:84px;z-index:60;max-width:520px;margin:0 auto;padding:1rem 1.1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;background:#141416;color:#f2f1ee;border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--red);box-shadow:0 10px 40px rgba(0,0,0,.5);font-size:.875rem;line-height:1.4}
.consent[hidden]{display:none}
.consent p{flex:1 1 260px;margin:0}
.consent__btns{display:flex;gap:.5rem}
.consent button{padding:.55rem 1rem;font:inherit;font-weight:600;border:1px solid rgba(255,255,255,.3);background:transparent;color:inherit;cursor:pointer}
.consent button[data-consent="yes"]{background:var(--red);border-color:var(--red);color:#fff}
/* reCAPTCHA (14/11) : badge Google masqué, mention obligatoire sous les formulaires à la place */
.grecaptcha-badge{visibility:hidden}
.rc-note{margin-top:.6rem;font-size:.75rem;opacity:.6}
.rc-note a{color:inherit;text-decoration:underline}
/* reCAPTCHA v2 (14/11) : case « Je ne suis pas un robot » au-dessus du bouton d'envoi */
.rc-box{margin:1.1rem 0 .2rem;min-height:78px}
.rc-box:empty{min-height:0;margin:0}
@media (max-width:360px){.rc-box{transform:scale(.9);transform-origin:left top}}

/* « 60 000 bar » du contact (14/11) : le nombre en rouge, « bar » reste dans la couleur du texte */
.reading__num{color:var(--red)}

/* ----- Mobile et tablette, 14/11 ----- */
@media (max-width:980px){
  /* Plus de fond derrière les textes : les formes de particules se désintègrent avant que le texte ne les touche (dissolveFor() dans main.js) */
  .svc__item>h3,.svc__body,.svc h2,.expertises__in,.contact__form,.details,.legal,.act,.sig{background:none;box-shadow:none}
  /* « 60 000 bar » et sa légende centrés */
  .reading,.reading+p{text-align:center;margin-left:auto;margin-right:auto}
  /* Témoignages : pagination et bouton d'avis centrés */
  .pager{justify-content:center}
  .pager .pager__add{margin-left:auto;margin-right:auto;justify-content:center}
  /* « Votre projet concerne » : les choix remplissent chaque ligne (effet justifié) */
  .topics .chip{flex:1 1 auto;display:flex}
  .topics .chip>span{flex:1;justify-content:center;text-align:center}
}
@media (max-width:980px){
  /* Ordre des choix pour des lignes pleines : Conseil Vidéo Photo / Relation presse Design / Réseaux sociaux Autre */
  .topics .chip:nth-of-type(4){order:2}.topics .chip:nth-of-type(6){order:3}.topics .chip:nth-of-type(5){order:4}.topics .chip:nth-of-type(7){order:5}
}
@media (max-width:980px){
  /* Contact sur tablette : une seule colonne, « 60 000 bar » centré sur la page comme sur mobile */
  .scene.contact{grid-template-columns:minmax(0,1fr)}
  .contact__side{grid-column:1/-1;justify-self:stretch;text-align:center}
}
@media (max-width:980px){.contact__side{align-self:stretch;width:auto;max-width:none}}

/* Mobile et tablette, 14/11 : services enchaînés sans vide (le logo se désintègre quand un texte s'efface
   et se reforme pendant que le suivant monte, voir measure() dans main.js) */
@media (max-width:980px){
  .svc__item,.svc__item:last-child{min-height:0;padding-top:34svh}
  .svc__item:first-child{padding-top:44svh}
  .svc__item:last-child{min-height:100svh}
}

/* Réalisations sur mobile et tablette (14/11) : grille régulière. Chaque légende a la même hauteur
   (titre sur une ligne, coupé si trop long ; hashtag dessous), donc les médias restent alignés rang par rang */
@media (max-width:980px){
  .sheet{gap:1.1rem .5rem;align-items:start}
  .sheet .tile__img{aspect-ratio:16/10}
  .sheet .tile__cap{display:flex;flex-direction:column;gap:.1rem;height:calc(2.7em + .5rem);padding-top:.5rem;line-height:1.35;overflow:hidden}
  .sheet .tile__t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sheet .tile__cap .tag{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}