/* =========================================================================
   ANIMASSON — by Julien Masson
   Design system & stylesheet
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Rouge de marque — imposé par le client */
  --red:#e50000;
  --red-bright:#ff2a1a;
  --red-deep:#a80000;
  --red-glow:rgba(229,0,0,.30);

  /* Ambre : la couleur de la chaleur. Lumière de bougie, guirlande, coucher
     de soleil. C'est elle qui empêche le rouge sur noir de virer « boîte de
     nuit ». Filets, sur-titres, halos, séparateurs. */
  --amber:#e3a765;
  --amber-soft:#f3cf9a;
  --amber-glow:rgba(227,167,101,.26);
  /* Accent TEXTE : l'ambre clair est illisible sur fond clair (1,9:1).
     Bronze profond ici, ambre sur fond sombre. Les deux passent AA. */
  --accent:#8f5f1f;
  /* Rouge pour du TEXTE : quasi identique à l'œil, mais lisible (4,9:1). */
  --red-text:#d40000;

  /* ------------------------------------------------------------------
     Le site est CLAIR par défaut. Seuls le héros et le pied de page
     basculent en sombre, via la classe .on-dark.
     Chaque composant lit ces jetons : il fonctionne donc dans les deux
     ambiances sans être écrit deux fois.
     ------------------------------------------------------------------ */
  --ink:#f7f3ec;          /* fond de page — blanc chaud, jamais clinique */
  --ink-2:#efe8dd;        /* aplat légèrement plus dense */
  --ink-3:#ffffff;        /* cartes */
  --ink-4:#e5dccd;
  --txt:#17120f;
  --txt-2:#4a403a;
  --muted:#6b6058;
  --line:rgba(23,18,15,.14);
  --line-2:rgba(23,18,15,.08);
  --surface:rgba(255,255,255,.74);     /* fonds translucides */
  --surface-2:rgba(255,255,255,.46);
  --shadow:0 16px 40px -24px rgba(62,44,30,.34);
  --shadow-lg:0 28px 64px -30px rgba(62,44,30,.42);

  --font-display:'Anton',"Arial Narrow",Impact,sans-serif;
  --font-sans:'Outfit',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --container:1280px;
  --gutter:clamp(20px,5vw,48px);
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:28px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --header-h:82px;
}

/* Ambiance sombre : héros, pied de page, menu mobile. */
.on-dark{
  --ink:#0d0a08;
  --ink-2:#151010;
  --ink-3:#1c1615;
  --ink-4:#251e1a;
  --txt:#f9f5f0;
  --txt-2:#d6cabd;
  --muted:#9d9085;
  --line:rgba(255,236,214,.13);
  --line-2:rgba(255,236,214,.07);
  --surface:rgba(255,255,255,.055);
  --surface-2:rgba(255,255,255,.025);
  --shadow:0 16px 40px -24px rgba(0,0,0,.7);
  --shadow-lg:0 28px 64px -30px rgba(0,0,0,.8);
  --accent:#e3a765;
  --red-text:#ff4136;
  background:var(--ink);
  color:var(--txt-2);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  font-family:var(--font-sans);
  font-size:17px;line-height:1.65;font-weight:350;
  color:var(--txt-2);background:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
[hidden]{display:none!important}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* Scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:#2a2a33;border-radius:20px;border:3px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--red)}

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4,h5{color:var(--txt);font-weight:600;line-height:1.1;letter-spacing:-.02em}
.display{
  font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;line-height:.95;letter-spacing:.005em;
}
.h-xxl{font-size:clamp(2.9rem,8.4vw,7.4rem)}
@media (max-height:900px) and (min-width:1024px){.h-xxl{font-size:clamp(2.9rem,6.4vw,5.6rem)}}
.h-xl{font-size:clamp(2.6rem,6.6vw,5.4rem)}
.h-lg{font-size:clamp(2.1rem,4.6vw,3.7rem)}
.h-md{font-size:clamp(1.6rem,2.8vw,2.35rem)}
.h-sm{font-size:clamp(1.22rem,1.9vw,1.5rem)}
.lead{font-size:clamp(1.05rem,1.5vw,1.24rem);line-height:1.68;color:var(--txt-2)}
.small{font-size:.92rem}
.text-red{color:var(--red-text)}
/* « text-white » signifiait « texte mis en avant », pas littéralement blanc.
   Rattaché au jeton, il donne du quasi-noir sur clair et du crème sur sombre. */
.text-white{color:var(--txt)}
.muted{color:var(--muted)}
.outline-text{
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.32);
}
.outline-text.red{-webkit-text-stroke-color:var(--red)}

/* ---------- 4. Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-wide{max-width:1600px}
.container-narrow{max-width:900px}
.section{position:relative;padding:clamp(72px,10vw,140px) 0;overflow-x:clip}
.section-sm{padding:clamp(52px,7vw,92px) 0;position:relative;overflow-x:clip}
.section-tight{padding-top:0}
.grid{display:grid;gap:clamp(18px,2.4vw,32px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.flex{display:flex}
.center{align-items:center}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.gap-sm{gap:12px}.gap{gap:20px}.gap-lg{gap:36px}
.tac{text-align:center}
.mx-auto{margin-inline:auto}
.mt-xs{margin-top:10px}.mt-sm{margin-top:18px}.mt{margin-top:30px}.mt-lg{margin-top:52px}
.bg-2{background:var(--ink-2)}
.bg-3{background:var(--ink-3)}
.hr{height:1px;background:var(--line);border:0}

/* ---------- 5. Ambient effects ---------- */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.glow{
  position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0;opacity:.5;
  background:radial-gradient(circle,var(--amber-glow) 0%,transparent 70%);
}
.glow-a{width:640px;height:640px;top:-160px;right:-180px}
.glow-b{width:520px;height:520px;bottom:-140px;left:-160px;opacity:.34}
.section > .container{position:relative;z-index:2}

/* ---------- 6. Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:16px 30px;border-radius:100px;font-weight:600;font-size:.97rem;letter-spacing:.01em;
  line-height:1;white-space:nowrap;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .45s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.99)}

.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 30px -10px var(--red-glow)}
.btn-primary::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(120deg,var(--red-bright),var(--red-deep));
  opacity:0;transition:opacity .45s var(--ease);
}
.btn-primary:hover{box-shadow:0 18px 44px -12px var(--red-glow)}
.btn-primary:hover::before{opacity:1}
.btn-primary:hover svg{transform:translateX(4px)}

.btn-ghost{border:1px solid var(--line);color:var(--txt);backdrop-filter:blur(8px);background:var(--surface-2)}
.btn-ghost:hover{border-color:var(--txt);background:var(--surface)}
.btn-ghost:hover svg{transform:translateX(4px)}

.btn-light{background:#fff;color:#17120f;border:1px solid rgba(23,18,15,.12)}
.btn-light:hover{box-shadow:0 18px 44px -14px rgba(255,255,255,.35)}

.btn-lg{padding:19px 38px;font-size:1.03rem}
.btn-sm{padding:12px 22px;font-size:.88rem}
.btn-block{width:100%}

/* Text link with underline sweep */
.link-u{position:relative;display:inline-flex;align-items:center;gap:9px;font-weight:500;color:var(--txt)}
.link-u::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.link-u:hover::after{transform:scaleX(1);transform-origin:left}
.link-u svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.link-u:hover svg{transform:translateX(4px)}

/* ---------- 7. Eyebrow / section head ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:.735rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;flex:none}
.eyebrow.center-line::after{content:"";width:34px;height:1px;background:currentColor;flex:none}
.sec-head{max-width:760px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head .h-lg,.sec-head .h-xl{margin-top:20px}
.sec-head .lead{margin-top:20px}
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}

/* ---------- 8. Preloader ---------- */
#preloader{
  position:fixed;inset:0;z-index:10000;background:var(--ink);color:var(--txt);
  display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s;
}
#preloader.done{opacity:0;visibility:hidden}
.pre-inner{text-align:center}
.pre-mark{width:70px;height:70px;object-fit:contain;margin:0 auto 22px;animation:markPulse 1.8s var(--ease-io) infinite}
@keyframes markPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.86);opacity:.65}}
.pre-word{font-family:var(--font-display);font-size:1.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--txt);text-indent:.34em}
.pre-bar{width:180px;height:2px;background:var(--line);margin:20px auto 0;overflow:hidden;border-radius:2px}
.pre-bar i{display:block;height:100%;width:0;background:var(--red);transition:width .3s linear}

/* ---------- 9. Cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cursor-dot{width:6px;height:6px;background:#fff;margin:-3px 0 0 -3px}
.cursor-ring{width:36px;height:36px;border:1px solid rgba(255,255,255,.55);margin:-18px 0 0 -18px;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),border-color .35s,background .35s}
body.cursor-active .cursor-ring{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:transparent;background:rgba(255,255,255,.16)}
@media (hover:none),(max-width:1024px){.cursor-dot,.cursor-ring{display:none}}

/* ---------- 10. Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--red-deep),var(--red-bright));z-index:9997}

/* ---------- 11. Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--header-h);
  /* au repos, l'en-tête est posé sur le héros sombre */
  --txt:#f9f5f0;--txt-2:#d6cabd;--muted:#9d9085;
  --line:rgba(255,236,214,.13);--line-2:rgba(255,236,214,.07);
  --surface:rgba(255,255,255,.06);--surface-2:rgba(255,255,255,.03);
  color:var(--txt-2);
  display:flex;align-items:center;
  transition:height .5s var(--ease),background .35s var(--ease),backdrop-filter .35s,border-color .35s,box-shadow .35s;
  border-bottom:1px solid transparent;
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(13,10,8,.78),transparent);
  transition:opacity .5s var(--ease);
}
.site-header.scrolled{
  height:68px;
  /* passé le héros, l'en-tête survole du contenu clair : il s'éclaircit */
  --txt:#17120f;--txt-2:#4a403a;--muted:#6b6058;
  --line:rgba(23,18,15,.14);--line-2:rgba(23,18,15,.08);
  --surface:rgba(255,255,255,.7);--surface-2:rgba(255,255,255,.45);
  /* assez opaque pour que le texte reste lisible même s'il passe encore
     au-dessus d'un héros sombre (pages légales, héros courts) */
  background:rgba(247,243,236,.95);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border-color:var(--line-2);
  box-shadow:0 10px 30px -24px rgba(62,44,30,.5);
}
.site-header.scrolled::before{opacity:0}
.site-header.hidden{transform:translateY(-100%);transition:transform .45s var(--ease)}
.header-inner{width:100%;max-width:1600px;margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:28px}

.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-mark{width:38px;height:38px;object-fit:contain;transition:transform .6s var(--ease)}
.brand:hover .brand-mark{transform:scale(1.09) rotate(-8deg)}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--font-display);font-size:1.42rem;letter-spacing:.06em;color:var(--txt);text-transform:uppercase;transition:color .35s var(--ease)}
.brand-sub{font-size:.545rem;letter-spacing:.29em;text-transform:uppercase;color:var(--muted);margin-top:4px;transition:color .35s var(--ease)}

.nav{display:flex;align-items:center;gap:6px}
.nav a{
  position:relative;display:block;padding:10px 15px;font-size:.925rem;font-weight:450;color:var(--txt-2);
  border-radius:100px;transition:color .3s var(--ease),background .3s var(--ease);
}
.nav a:hover,.nav a.active{color:var(--txt)}
.nav a.active::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--red)}
.nav-item{position:relative}
.nav-item.has-sub > a{padding-right:27px}
.nav-item.has-sub > a::before{content:"";position:absolute;right:13px;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-4px) rotate(45deg);opacity:.55;transition:transform .4s var(--ease)}
.nav-item.has-sub:hover > a::before{transform:translateY(-2px) rotate(225deg)}
.subnav{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(10px);
  min-width:262px;padding:10px;border-radius:16px;
  /* Palette propre au sous-menu : le fond était sombre en dur alors que le texte
     suivait les couleurs de l'en-tête. Une fois l'en-tête passé en clair au
     défilement, le texte devenait sombre sur sombre (1,15:1). Carte blanche et
     texte foncé, identiques quel que soit l'état de l'en-tête. */
  --txt:#17120f;--txt-2:#4a403a;--muted:#6b6058;
  --line:rgba(23,18,15,.10);--surface-2:rgba(23,18,15,.05);
  background:#fff;color:var(--txt);
  border:1px solid var(--line);box-shadow:0 26px 60px -22px rgba(20,14,10,.45);
  opacity:0;visibility:hidden;transition:all .38s var(--ease);
}
.nav-item:hover .subnav,.nav-item:focus-within .subnav{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.subnav a{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border-radius:10px;font-size:.92rem;color:var(--txt)}
.subnav a span{font-size:.775rem;color:var(--muted);font-weight:300}
.subnav a:hover{background:var(--surface-2);color:var(--red-text)}
.subnav a:hover span{color:var(--muted)}
.subnav a::after{display:none}

.header-cta{display:flex;align-items:center;gap:14px;flex:none}
.header-tel{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;font-weight:500;color:var(--txt);transition:color .35s var(--ease)}
.header-tel svg{width:15px;height:15px;color:var(--red)}

/* Burger */
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);position:relative;flex:none}
.burger i{position:absolute;left:13px;width:18px;height:1.5px;background:var(--txt);border-radius:2px;transition:transform .45s var(--ease),opacity .3s,background .35s}
.burger i:nth-child(1){top:17px}
.burger i:nth-child(2){top:22px}
.burger i:nth-child(3){top:27px}
body.menu-open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:880;background:var(--ink);
  padding:calc(var(--header-h) + 24px) var(--gutter) 40px;
  overflow-y:auto;display:flex;flex-direction:column;
  clip-path:circle(0% at calc(100% - 46px) 42px);
  transition:clip-path .8s var(--ease);
}
body.menu-open .drawer{clip-path:circle(160% at calc(100% - 46px) 42px)}
.drawer-nav{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.drawer-nav > li > a,.drawer-sub a{
  display:block;padding:13px 0;font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.7rem,7vw,2.4rem);color:var(--txt);border-bottom:1px solid var(--line-2);
  opacity:0;transform:translateY(22px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
.drawer-sub a{font-size:1.05rem;font-family:var(--font-sans);text-transform:none;padding:9px 0 9px 20px;color:var(--muted);border:0}
body.menu-open .drawer-nav a{opacity:1;transform:none}
.drawer-nav a:hover,.drawer-nav a.active{color:var(--red)}
.drawer-foot{margin-top:auto;padding-top:34px;display:flex;flex-direction:column;gap:16px}
.drawer-foot .btn{width:100%}

/* ---------- 12. Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:calc(var(--header-h) + 24px) 0 clamp(74px,8vw,96px)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--ink) 2%,rgba(8,8,10,.55) 34%,rgba(8,8,10,.22) 60%,rgba(8,8,10,.7) 100%),
    radial-gradient(ellipse at 20% 80%,rgba(229,0,0,.2),transparent 55%);
}
.hero-media::before{
  content:"";position:absolute;inset:0;z-index:2;opacity:.32;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:100% 4px;
}
.hero-inner{position:relative;z-index:3;width:100%;max-width:1600px;margin-inline:auto;padding-inline:var(--gutter)}
.hero-badges{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:26px}
.hero h1{margin:0}
.hero h1 .line{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em}
.hero h1 .line > span{display:block;transform:translateY(105%);animation:riseIn 1.05s var(--ease) forwards}
.hero h1 .line:nth-child(1) > span{animation-delay:.15s}
.hero h1 .line:nth-child(2) > span{animation-delay:.28s}
.hero h1 .line:nth-child(3) > span{animation-delay:.41s}
@keyframes riseIn{to{transform:translateY(0)}}
.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:44px;flex-wrap:wrap;margin-top:34px}
.hero-copy{max-width:520px;opacity:0;animation:fadeUp 1s var(--ease) .7s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fadeUp 1s var(--ease) .85s forwards}

.pill{
  display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:100px;
  border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(10px);
  font-size:.8rem;font-weight:500;color:var(--txt);letter-spacing:.02em;
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:ping 2.2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* Google rating badge */
.g-rating{display:inline-flex;align-items:center;gap:11px;padding:8px 16px;border-radius:100px;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(10px)}
.g-rating .g-score{font-weight:700;font-size:1.02rem;color:var(--txt);letter-spacing:-.02em}
.g-stars{display:flex;gap:2px}
.g-stars svg{width:14px;height:14px;color:#fbbc05}
.g-rating .g-txt{font-size:.8rem;color:var(--txt-2)}
.g-rating .g-logo{font-weight:600;font-size:.86rem;letter-spacing:-.02em}
.g-logo .b{color:#4285f4}.g-logo .r{color:#ea4335}.g-logo .y{color:#fbbc05}.g-logo .g{color:#34a853}

/* Scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:9px;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.scroll-cue i{display:block;width:1px;height:46px;background:linear-gradient(to bottom,var(--red),transparent);animation:cue 1.9s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:900px){.scroll-cue{display:none}}

/* ---------- Bouton son du héros ----------
   Muet (cas normal à l'arrivée : les navigateurs interdisent le son avant tout
   geste) : pastille blanche avec le libellé « Activer le son », impossible à
   rater. Son actif : bouton rond discret pour couper.
   Les anneaux pulsent tant que le visiteur ne s'en est pas encore servi. */
.mute-btn{
  position:absolute;right:var(--gutter);bottom:30px;z-index:6;
  height:46px;min-width:46px;padding:0;border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid rgba(255,255,255,.28);background:rgba(8,8,10,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;
  font:600 .88rem/1 var(--font-sans);letter-spacing:.01em;white-space:nowrap;cursor:pointer;
  transition:background .3s,border-color .3s,color .3s,padding .35s var(--ease),transform .4s var(--ease);
}
.mute-btn svg{width:18px;height:18px;flex:none}
.mute-btn:hover{transform:translateY(-2px)}
.mute-btn:not(.is-muted):hover{background:var(--red);border-color:var(--red)}
.mute-label{display:none}
.mute-btn.is-muted{padding:0 18px 0 15px;background:#fff;border-color:#fff;color:#17120f;box-shadow:0 12px 30px -12px rgba(0,0,0,.55)}
.mute-btn.is-muted .mute-label{display:inline}
.mute-btn.is-muted svg{color:var(--red)}
.mute-btn::before,.mute-btn::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
}
.mute-btn.ringing::before{animation:muteRing 2.2s var(--ease-io) infinite}
.mute-btn.ringing::after{animation:muteRing 2.2s var(--ease-io) infinite 1.1s}
@keyframes muteRing{
  0%{box-shadow:0 0 0 0 rgba(229,0,0,.65)}
  100%{box-shadow:0 0 0 18px rgba(229,0,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .mute-btn.ringing::before,.mute-btn.ringing::after{animation:none}
}
/* Sur mobile, la barre « Appeler / Devis » occupe le bas de l'écran et
   recouvrait le bouton : il remonte en haut à droite, sous l'en-tête. */
@media (max-width:860px){
  .mute-btn{top:calc(var(--header-h) + 14px);bottom:auto}
  /* le contenu du héros commence toujours sous la pastille, même sur un petit
     écran où il est plus haut que la fenêtre */
  .hero{padding-top:calc(var(--header-h) + 76px)}
}



/* ---------- 13. Marquee ---------- */
.marquee{
  position:relative;overflow:hidden;padding:22px 0;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  background:var(--ink-2);
}
.marquee-track{display:flex;width:max-content;animation:scrollX 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track > span{
  display:inline-flex;align-items:center;gap:26px;padding-right:26px;
  font-family:var(--font-display);font-size:clamp(1.35rem,3vw,2.1rem);text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px var(--line);white-space:nowrap;
}
.marquee-track > span em{font-style:normal;color:var(--red-text);-webkit-text-stroke:0}
.marquee-track > span i{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;-webkit-text-stroke:0}
@keyframes scrollX{to{transform:translateX(-50%)}}
.marquee.reverse .marquee-track{animation-direction:reverse}

/* ---------- 14. Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="zoom"]{transform:scale(.94)}
[data-reveal].in{transform:none}
.stagger > *{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.02s}
.stagger.in > *:nth-child(2){transition-delay:.1s}
.stagger.in > *:nth-child(3){transition-delay:.18s}
.stagger.in > *:nth-child(4){transition-delay:.26s}
.stagger.in > *:nth-child(5){transition-delay:.34s}
.stagger.in > *:nth-child(6){transition-delay:.42s}
.stagger.in > *:nth-child(7){transition-delay:.5s}
.stagger.in > *:nth-child(8){transition-delay:.58s}
.stagger.in > *:nth-child(9){transition-delay:.66s}
.stagger.in > *:nth-child(10){transition-delay:.74s}

/* Reveal image clip */
.img-reveal{position:relative;overflow:hidden;border-radius:var(--radius)}
.img-reveal img{transition:transform 1.4s var(--ease);transform:scale(1.12)}
.img-reveal.in img{transform:scale(1)}
.img-reveal::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:right;transition:transform 1.1s var(--ease)}
.img-reveal.in::after{transform:scaleX(0)}

/* ---------- 15. Cards / surfaces ---------- */
.card{
  position:relative;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--ink-3);box-shadow:var(--shadow);
  --card-pad:clamp(24px,3vw,34px);padding:var(--card-pad);overflow:hidden;
  transition:border-color .5s var(--ease),transform .6s var(--ease),background .5s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%),rgba(229,0,0,.16),transparent 62%);
}
.card:hover{border-color:rgba(229,0,0,.4);transform:translateY(-6px)}
.card:hover::before{opacity:1}
.card-icon{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:rgba(229,0,0,.12);border:1px solid rgba(229,0,0,.26);color:var(--red);margin-bottom:22px;
  transition:background .45s var(--ease),color .45s var(--ease),transform .55s var(--ease);
}
.card-icon svg{width:24px;height:24px}
.card:hover .card-icon{background:var(--red);color:#fff;transform:rotate(-8deg) scale(1.06)}
.card h3{font-size:1.2rem;margin-bottom:11px}
.card p{font-size:.965rem;color:var(--muted);line-height:1.62}
.card-media{margin:calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 26px;border-radius:0;aspect-ratio:3/2}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.card-num{
  position:absolute;top:18px;right:22px;font-family:var(--font-display);font-size:2.6rem;
  color:transparent;-webkit-text-stroke:1px rgba(243,207,154,.20);line-height:1;
  transition:-webkit-text-stroke-color .5s var(--ease);
}
.card:hover .card-media{margin:calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 26px;border-radius:0;aspect-ratio:3/2}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.card-num{-webkit-text-stroke-color:rgba(227,167,101,.62)}

/* Service card with image */
.svc{position:relative;border-radius:var(--radius);overflow:hidden;isolation:isolate;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;border:1px solid var(--line)}
.svc-bg{position:absolute;inset:0;z-index:-2}
.svc-bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter 1s var(--ease);filter:grayscale(.45) brightness(.62)}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(8,8,10,.94) 6%,rgba(8,8,10,.42) 52%,rgba(8,8,10,.28) 100%);transition:background .6s var(--ease)}
.svc:hover .svc-bg img{transform:scale(1.07);filter:grayscale(0) brightness(.72)}
.svc:hover::after{background:linear-gradient(to top,rgba(120,0,0,.9) 0%,rgba(8,8,10,.5) 55%,rgba(8,8,10,.3) 100%)}
.svc h3{font-size:1.32rem;margin-bottom:8px}
.svc p{font-size:.93rem;color:rgba(255,255,255,.72);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s var(--ease),margin .6s var(--ease)}
.svc:hover p{max-height:120px;opacity:1;margin-top:2px}
.svc .svc-tag{position:absolute;top:22px;left:22px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(229,0,0,.9);padding:6px 12px;border-radius:100px}
.svc .svc-go{position:absolute;top:20px;right:20px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;transition:background .4s var(--ease),border-color .4s,transform .5s var(--ease)}
.svc .svc-go svg{width:16px;height:16px;color:#fff;transition:transform .45s var(--ease)}
.svc:hover .svc-go{background:#fff;border-color:#fff}
.svc:hover .svc-go svg{color:#17120f;transform:rotate(45deg)}
.svc-tall{min-height:480px}

/* Les tuiles photo, la galerie, les cartes équipe et le badge média posent
   leur texte SUR une image assombrie : il reste clair quelle que soit
   l'ambiance de la section qui les entoure. */
.svc,.svc h3,.svc .num,
.gallery figure figcaption,
.team-card,.team-card .team-info,.team-card .team-info h3,
.media-badge,.media-badge .n,.media-badge .t{color:#fff}
.svc h3{color:#fff}
.team-card .team-info h3{color:#fff}
.svc:hover .svc-go svg{color:#0d0a08}
@media (hover:none){.svc p{max-height:none;opacity:1;margin-top:2px}}

/* ---------- 16. Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)}
.bento > *{grid-column:span 1}
.bento .b-2{grid-column:span 2}
.bento .b-3{grid-column:span 3}
.bento .b-4{grid-column:span 4}
.bento .r-2{grid-row:span 2}

/* ---------- 17. Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px)}
.stat{position:relative;padding:6px 0 6px 26px;border-left:1px solid var(--line)}
.stat .num{font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;color:var(--txt);letter-spacing:.01em}
.stat .num .suf{color:var(--red)}
.stat .lbl{margin-top:12px;font-size:.87rem;color:var(--muted);line-height:1.45;max-width:210px}

/* ---------- 18. Split media/text ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.split.rev .split-media{order:2}
.split-media{position:relative}
.split-media .img-reveal{aspect-ratio:4/5}
.split-media .img-reveal img{width:100%;height:100%;object-fit:cover}
.media-stack{position:relative}
.media-stack .m1{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5}
.media-stack .m1 img{width:100%;height:100%;object-fit:cover}
.media-stack .m2{position:absolute;right:-8%;bottom:-9%;width:52%;border-radius:var(--radius);overflow:hidden;border:6px solid var(--ink);aspect-ratio:1;box-shadow:0 30px 70px -22px rgba(0,0,0,.9)}
.media-stack .m2 img{width:100%;height:100%;object-fit:cover}
.media-badge{
  position:absolute;left:-26px;top:34px;z-index:4;padding:18px 22px;border-radius:16px;
  background:var(--red);color:#fff;box-shadow:0 24px 56px -18px var(--red-glow);
}
.media-badge .n{font-family:var(--font-display);font-size:2.5rem;line-height:1}
.media-badge .t{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9;margin-top:5px}

/* Check list */
.checks{display:grid;gap:14px;margin-top:30px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:.99rem;color:var(--txt-2)}
.checks svg{width:21px;height:21px;flex:none;color:var(--red);margin-top:2px}

/* ---------- 19. Process timeline ---------- */
.process{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,34px);margin-top:56px}
.process::before{content:"";position:absolute;top:31px;left:0;right:0;height:1px;background:var(--line)}
.process-line{position:absolute;top:31px;left:0;height:1px;background:var(--red);width:0;transition:width 1.6s var(--ease);z-index:1}
.step{position:relative;z-index:2}
.step .dot{background:var(--ink-3);
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink-3);border:1px solid var(--line);color:var(--red);
  font-family:var(--font-display);font-size:1.32rem;margin-bottom:24px;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);
}
.step:hover .dot{background:var(--red);color:#fff;border-color:var(--red);transform:scale(1.08)}
.step h3{font-size:1.14rem;margin-bottom:10px}
.step p{font-size:.94rem;color:var(--muted)}

/* ---------- 20. Gallery ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.filters button{
  padding:10px 20px;border-radius:100px;border:1px solid var(--line);font-size:.88rem;font-weight:500;
  color:var(--muted);transition:all .35s var(--ease);
}
.filters button:hover{color:var(--txt);border-color:var(--txt)}
.filters button.active{background:var(--red);border-color:var(--red);color:#fff}

/* Rangées justifiées : chaque rangée occupe toute la largeur et toutes les photos
   d'une même rangée ont la même hauteur. Le bas de la galerie forme donc une
   ligne droite, au lieu des trois colonnes de hauteurs différentes d'avant.
   Chaque figure porte son rapport largeur/hauteur (--r), écrit dans le HTML :
   la largeur de base et la croissance en découlent, sans JavaScript. */
.gallery{
  --unit:19%;                       /* largeur de référence : trois photos par rangée, même les plus larges */
  --gap:clamp(14px,1.6vw,20px);
  display:flex;flex-wrap:wrap;gap:var(--gap);margin-top:38px;
}
.gallery figure{
  --r:1.5;
  flex:calc(var(--r) * 100) 0 calc(var(--r) * var(--unit));
  aspect-ratio:var(--r);min-width:0;margin:0;
  /* Garde-fou : une photo seule sur sa rangée s'étire sur toute la largeur ;
     ce plafond l'empêche de devenir démesurée (elle est alors légèrement recadrée). */
  max-height:clamp(280px,32vw,430px);
  position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:opacity .5s var(--ease),transform .5s var(--ease)}
/* Les largeurs restant proportionnelles à --r, chaque photo d'une rangée garde
   exactement la même hauteur que ses voisines, sans aucun recadrage. */
.gallery figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .7s var(--ease);filter:grayscale(.35)}
.gallery figure:hover img{transform:scale(1.06);filter:grayscale(0)}
.gallery figure figcaption{
  position:absolute;inset:auto 0 0 0;padding:22px 20px 18px;
  background:linear-gradient(to top,rgba(8,8,10,.92),transparent);
  font-size:.87rem;color:#fff;transform:translateY(14px);opacity:0;transition:all .5s var(--ease);
}
.gallery figure:hover figcaption{transform:none;opacity:1}
.gallery figure.hide{display:none}
.gallery figure .zoom{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;background:rgba(8,8,10,.6);backdrop-filter:blur(8px);display:grid;place-items:center;opacity:0;transform:scale(.7);transition:all .45s var(--ease)}
.gallery figure:hover .zoom{opacity:1;transform:none}
.gallery figure .zoom svg{width:15px;height:15px;color:#fff}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:9500;background:rgba(5,5,7,.96);backdrop-filter:blur(14px);display:grid;place-items:center;padding:5vw;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:86vh;border-radius:12px;transform:scale(.94);transition:transform .55s var(--ease);box-shadow:0 40px 100px -30px rgba(0,0,0,1)}
.lightbox.open img{transform:none}
.lb-close,.lb-prev,.lb-next{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.05);display:grid;place-items:center;color:#fff;transition:all .35s var(--ease)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--red);border-color:var(--red)}
.lb-close{top:26px;right:26px}
.lb-prev{left:26px;top:50%;margin-top:-26px}
.lb-next{right:26px;top:50%;margin-top:-26px}
.lb-close svg,.lb-prev svg,.lb-next svg{width:18px;height:18px}
.lb-cap{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:.88rem;color:var(--muted);text-align:center;width:80%}

/* ---------- 21. Testimonials ---------- */
.reviews{position:relative;margin-top:46px}
.reviews-track{display:flex;gap:clamp(16px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:none;-ms-overflow-style:none;
  margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}
.reviews-track::-webkit-scrollbar{display:none}
.review{
  flex:0 0 min(430px,84vw);scroll-snap-align:start;display:flex;flex-direction:column;
  padding:clamp(26px,3vw,36px);border-radius:var(--radius);border:1px solid var(--line);
  background:var(--ink-3);box-shadow:var(--shadow);
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.review:hover{border-color:rgba(229,0,0,.35);transform:translateY(-5px)}
.review .quote{width:38px;height:38px;color:var(--red);opacity:.9;margin-bottom:20px}
.review .stars{display:flex;gap:3px;margin-bottom:16px}
.review .stars svg{width:16px;height:16px;color:#fbbc05}
.review p{font-size:.99rem;line-height:1.72;color:var(--txt-2);flex:1}
.review .who{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2)}
.review .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(140deg,var(--red),var(--red-deep));display:grid;place-items:center;font-weight:700;color:#fff;flex:none;font-size:1.02rem}
.review .who b{display:block;color:var(--txt);font-weight:600;font-size:.98rem}
.review .who span{font-size:.83rem;color:var(--muted)}
/* La pastille est elle aussi un <span> de .who : sans cette règle plus précise,
   la lettre prenait le gris des sous-titres au lieu du blanc. */
.review .who .av{color:#fff;font-size:1.02rem}
/* Page avis : trois cartes de même largeur (grille) et de même hauteur. Le texte
   est limité à 8 lignes avec « Lire la suite », pour que les avis longs et courts
   gardent le même gabarit et que les signatures s'alignent. */
.reviews-grid{align-items:stretch}
.reviews-grid .review{height:100%}
.reviews-grid .review .review-text{flex:none;margin-bottom:26px;height:calc(1.72em * 8);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;line-clamp:8;overflow:hidden}
.reviews-grid .review.open .review-text{height:auto;display:block;-webkit-line-clamp:unset;line-clamp:none}
/* Signature : même hauteur partout, même quand le sous-titre passe sur deux lignes. */
.reviews-grid .review .who{margin-top:auto;min-height:94px}
.review-more.is-idle{visibility:hidden}
.review-more{align-self:flex-start;margin:-12px 0 26px;padding:0;font:inherit;font-size:.9rem;font-weight:600;color:var(--red-text);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.review-more svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.review.open .review-more svg{transform:rotate(180deg)}
.review-more:hover{text-decoration:underline;text-underline-offset:3px}
.slider-nav{display:flex;gap:11px;margin-top:30px}
.slider-nav button{width:50px;height:50px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--txt);transition:all .35s var(--ease)}
.slider-nav button{background:var(--ink-3)}
.slider-nav button:hover{background:var(--red);border-color:var(--red);color:#fff}
.slider-nav button svg{width:17px;height:17px}
.slider-nav button:disabled{opacity:.3;pointer-events:none}

/* ---------- 22. Team ---------- */
.team-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4}
.team-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter 1s var(--ease),transform 1.3s var(--ease)}
.team-card:hover img{filter:grayscale(0);transform:scale(1.05)}
.team-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.97) 12%,rgba(8,8,10,.72) 34%,rgba(8,8,10,.22) 60%,transparent 80%)}
.team-info{position:absolute;left:0;right:0;bottom:0;padding:26px 24px;z-index:2}
.team-info .role{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:7px}
.team-info h3{font-size:1.22rem}
.team-info p{font-size:.87rem;color:var(--muted);margin-top:7px;max-height:0;opacity:0;overflow:hidden;transition:max-height .55s var(--ease),opacity .45s var(--ease)}
.team-card:hover .team-info p{max-height:110px;opacity:1}

/* ---------- 23. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 56px 26px 0;position:relative;
  font-size:clamp(1.02rem,1.5vw,1.16rem);font-weight:500;color:var(--txt);
  transition:color .35s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red-text)}
.faq summary::after,.faq summary::before{content:"";position:absolute;right:8px;top:50%;background:currentColor;transition:transform .45s var(--ease),background .35s}
.faq summary::after{width:15px;height:1.5px;margin-top:-.75px}
.faq summary::before{width:1.5px;height:15px;right:14.75px;margin-top:-7.5px}
.faq details[open] summary{color:var(--red-text)}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq-body{padding:0 60px 28px 0;color:var(--muted);font-size:.99rem;line-height:1.72;animation:faqIn .5s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- 24. CTA band ---------- */
/* Bloc d'appel à l'action. Le rouge plein était trop présent : le fond est
   désormais un sable chaud, avec la photo en texture très discrète. Le rouge
   ne subsiste que sur le bouton principal et sur le mot mis en avant — assez
   pour attirer l'œil, sans saturer la page. */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  padding:clamp(44px,6vw,84px);text-align:center;isolation:isolate;
  border:1px solid rgba(143,95,31,.18);
  box-shadow:0 26px 60px -34px rgba(62,44,30,.45);
  color:var(--txt-2);
}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(135deg,#efe0d1 0%,#f6ece2 52%,#ecdccb 100%)}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(520px circle at 100% 100%,rgba(229,0,0,.10),transparent 60%),
    radial-gradient(460px circle at 0% 0%,rgba(227,167,101,.22),transparent 62%)}
.cta-band .bgimg{position:absolute;inset:0;z-index:-2;opacity:.13}
.cta-band .bgimg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.35) brightness(1.35) contrast(.75)}
/* un halo sable au centre : le texte repose sur un fond calme, la photo ne
   reste visible que sur les bords */
.cta-band .bgimg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 70% at 50% 50%,#f4e9de 30%,rgba(244,233,222,0) 100%)}
.cta-band .eyebrow{color:#7a5016}
.cta-band h2{color:var(--txt)}
.cta-band .lead{color:var(--txt-2)}
.cta-band .btn-ghost{border-color:rgba(23,18,15,.22);color:var(--txt);background:rgba(255,255,255,.55)}
.cta-band .btn-ghost:hover{border-color:var(--txt);background:#fff}
.cta-actions{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.cta-note{margin-top:22px;font-size:.86rem;color:var(--muted)}

/* ---------- 25. Blog ---------- */
.post{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--ink-2);transition:border-color .5s var(--ease),transform .55s var(--ease)}
.post:hover{border-color:rgba(229,0,0,.4);transform:translateY(-6px)}
.post-img{aspect-ratio:16/10;overflow:hidden;position:relative}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);filter:grayscale(.3)}
.post:hover .post-img img{transform:scale(1.07);filter:none}
.post-cat{position:absolute;top:16px;left:16px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;background:var(--red);color:#fff;padding:6px 12px;border-radius:100px}
.post-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.post-date{font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.post h3{font-size:1.16rem;margin:12px 0 11px;line-height:1.32}
.post p{font-size:.94rem;color:var(--muted);flex:1}
.post .link-u{margin-top:22px;align-self:flex-start;font-size:.9rem}

/* Article body */
.article{max-width:760px;margin-inline:auto}
.article > *{margin-bottom:24px}
.article h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:52px;margin-bottom:16px}
.article h3{font-size:1.24rem;margin-top:36px;margin-bottom:12px}
.article p{font-size:1.06rem;line-height:1.82;color:var(--txt-2)}
.article ul{display:grid;gap:12px}
.article ul li{position:relative;padding-left:26px;color:var(--txt-2)}
.article ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.article blockquote{border-left:2px solid var(--red);padding:6px 0 6px 26px;font-size:1.16rem;color:var(--txt);font-weight:400;line-height:1.6}
.article img{border-radius:var(--radius);width:100%}
.article figure figcaption{font-size:.84rem;color:var(--muted);margin-top:10px;text-align:center}

/* ---------- 26. Page hero (inner pages) ---------- */
.page-hero{position:relative;padding:calc(var(--header-h) + clamp(70px,10vw,130px)) 0 clamp(56px,7vw,96px);overflow:hidden}
.page-hero-bg{position:absolute;inset:0;z-index:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.75)}
.page-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 4%,rgba(8,8,10,.86) 45%,rgba(8,8,10,.78));}
.page-hero .container{position:relative;z-index:2}
.crumbs{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--muted);margin-bottom:24px}
.crumbs a:hover{color:var(--red-text)}
.crumbs span{opacity:.4}

/* ---------- 27. Forms ---------- */
.form-wrap{position:relative;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--ink-3);box-shadow:var(--shadow-lg);padding:clamp(26px,3.6vw,46px);overflow:hidden}
.form-switch{display:flex;gap:6px;padding:6px;border-radius:100px;background:var(--ink-2);border:1px solid var(--line);margin-bottom:34px;position:relative}
.form-switch button{
  flex:1;padding:14px 18px;border-radius:100px;font-weight:600;font-size:.95rem;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:10px;transition:color .4s var(--ease);position:relative;z-index:2;
}
.form-switch button svg{width:18px;height:18px}
.form-switch button.active{color:#fff}
.form-switch .thumb{position:absolute;top:6px;left:6px;height:calc(100% - 12px);width:calc(50% - 6px);border-radius:100px;background:var(--red);box-shadow:0 8px 26px -8px var(--red-glow);transition:transform .55s var(--ease);z-index:1}
.form-switch.pro .thumb{transform:translateX(100%)}

.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.field{display:flex;flex-direction:column;gap:9px;position:relative}
.field.full{grid-column:1/-1}
.field label{font-size:.82rem;font-weight:500;letter-spacing:.04em;color:var(--txt-2)}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;padding:15px 17px;border-radius:12px;border:1px solid var(--line);
  background:var(--ink);color:var(--txt);font-size:.96rem;transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s;
}
.field textarea{min-height:140px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#5f5f6b}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);background:var(--ink-3);box-shadow:0 0 0 4px rgba(229,0,0,.12)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8f9c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:17px;padding-right:44px}
.field select option{background:var(--ink-3);color:var(--txt)}
.field.error input,.field.error select,.field.error textarea{border-color:#ff4d4d}
.field .err{font-size:.78rem;color:#ff6b6b;display:none}
.field.error .err{display:block}

.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{
  display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);
  background:rgba(0,0,0,.24);font-size:.9rem;cursor:pointer;transition:all .35s var(--ease);
}
.choice span svg{width:17px;height:17px;color:var(--muted);transition:color .35s}
.choice input:checked + span{border-color:var(--red);background:rgba(229,0,0,.12);color:var(--txt)}
.choice input:checked + span svg{color:var(--red)}
.choice input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px}

.consent{display:flex;gap:13px;align-items:flex-start;font-size:.85rem;color:var(--muted);line-height:1.55}
/* Case à cocher : carré blanc bordé au repos, carré rouge avec une coche
   blanche bien centrée une fois cochée (l'ancienne coche était décalée dans
   un carré sombre, on ne voyait qu'un petit « v » de travers). */
.consent input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(23,18,15,.3);background:#fff;flex:none;margin:1px 0 0;cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease);position:relative}
.consent input:hover{border-color:var(--red)}
.consent input:focus-visible{outline:2px solid rgba(229,0,0,.45);outline-offset:2px}
.consent input:checked{background:var(--red);border-color:var(--red)}
.consent input:checked::after{content:"";position:absolute;left:50%;top:47%;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translate(-50%,-50%) rotate(45deg)}
.consent a{color:var(--txt);text-decoration:underline;text-underline-offset:3px}

.form-note{font-size:.83rem;color:var(--muted);margin-top:6px}
/* Bandeau d'erreur du formulaire (envoi impossible, champs refusés par le serveur). */
.form-error{background:#fdecec;border:1px solid #f0b4b4;color:#a12020;border-radius:12px;padding:14px 16px;margin-bottom:18px;font-size:.95rem}
.form-success{display:none;text-align:center;padding:40px 10px}
.form-success.show{display:block;animation:faqIn .55s var(--ease)}
.form-success .ok{width:74px;height:74px;border-radius:50%;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.4);display:grid;place-items:center;margin:0 auto 24px;color:#22c55e}
.form-success .ok svg{width:32px;height:32px}
.hp{position:absolute;left:-9999px;opacity:0}

/* Contact info cards */
.info-card{display:flex;gap:18px;align-items:flex-start;padding:24px;border-radius:var(--radius);border:1px solid var(--line);background:var(--ink-3);box-shadow:var(--shadow);transition:border-color .45s var(--ease),transform .5s var(--ease)}
.info-card:hover{border-color:rgba(229,0,0,.4);transform:translateX(5px)}
.info-card .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:rgba(229,0,0,.12);border:1px solid rgba(229,0,0,.26);color:var(--red);flex:none}
.info-card .ic svg{width:21px;height:21px}
.info-card h3{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:7px}
.info-card p,.info-card a{font-size:1.04rem;color:var(--txt);font-weight:500}
.info-card a:hover{color:var(--red-text)}
.info-card small{display:block;font-size:.84rem;color:var(--muted);margin-top:5px;font-weight:300}

/* ---------- 28. Zones / map ---------- */
.zones{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.zones li{padding:9px 17px;border-radius:100px;border:1px solid var(--line);font-size:.86rem;color:var(--txt-2);transition:all .35s var(--ease)}
.zones li:hover{border-color:var(--red);color:var(--red-text);background:rgba(229,0,0,.08)}

/* Logos strip */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(28px,5vw,64px);opacity:.72}
.logos span{font-family:var(--font-display);font-size:clamp(1.05rem,1.8vw,1.42rem);text-transform:uppercase;letter-spacing:.06em;color:var(--txt);transition:opacity .4s,color .4s}
.logos span:hover{color:var(--red-text)}

/* ---------- 29. Footer ---------- */
.site-footer{position:relative;background:var(--ink-2);border-top:1px solid var(--line);overflow:hidden;padding-top:clamp(60px,8vw,96px)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(28px,4vw,56px)}
.footer-col h4{font-size:.78rem;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:22px}
.footer-col ul{display:grid;gap:12px}
.footer-col a:not(.btn){font-size:.95rem;color:var(--txt-2);transition:color .3s var(--ease),padding-left .35s var(--ease)}
.footer-col a:not(.btn):hover{color:var(--red-text);padding-left:5px}
.footer-col .btn-primary,.footer-col .btn-primary:hover{color:#fff}
.footer-brand .brand{margin-bottom:22px}
.footer-brand p{font-size:.95rem;color:var(--muted);max-width:330px}
.socials{display:flex;gap:11px;margin-top:26px}
.socials a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--txt-2);transition:all .4s var(--ease)}
.socials a:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-3px)}
.socials svg{width:17px;height:17px}
/* Le mot ANIMASSON en filigrane. Le N final se perdait : trait trop discret
   et cadre trop juste. Corps réduit, trait plus lisible, et une marge de
   sécurité pour que les neuf lettres tiennent à toutes les largeurs. */
.footer-mega{position:relative;margin-top:clamp(44px,6vw,72px);line-height:.86;overflow:hidden}
.footer-mega span{
  display:block;font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2.9rem,13.1vw,12.4rem);color:transparent;
  -webkit-text-stroke:1px rgba(243,207,154,.30);text-align:center;letter-spacing:.01em;
  white-space:nowrap;padding-inline:4px;
  transition:-webkit-text-stroke-color .6s var(--ease);
}
.footer-mega:hover span{-webkit-text-stroke-color:rgba(227,167,101,.44)}
.footer-bottom{border-top:1px solid var(--line);padding:24px 0;margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.footer-bottom a:hover{color:var(--red-text)}
.footer-legal{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- 30. Floating / utility ---------- */
.to-top{position:fixed;right:22px;bottom:22px;z-index:800;width:50px;height:50px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(14px);transition:all .45s var(--ease);box-shadow:0 14px 34px -10px var(--red-glow)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-3px) scale(1.06)}
.to-top svg{width:17px;height:17px}

.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:850;display:none;gap:0;background:rgba(13,13,17,.92);backdrop-filter:blur(20px);border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 8px;border-radius:100px;font-size:.9rem;font-weight:600}
.mobile-bar a svg{width:16px;height:16px}
.mobile-bar .m-call{color:#fff;border:1px solid var(--line)}
.mobile-bar .m-quote{background:var(--red);color:#fff}

/* Cookie banner */
.cookie{
  position:fixed;left:16px;bottom:16px;z-index:9600;max-width:400px;padding:24px;border-radius:18px;
  background:rgba(19,19,24,.96);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px -22px rgba(0,0,0,.9);transform:translateY(140%);transition:transform .7s var(--ease);
}
.cookie.show{transform:none}
/* Le bandeau est sombre alors que la page est claire : sans ces couleurs, le
   titre, le texte et le lien héritaient du texte foncé du thème et devenaient
   illisibles sur le fond noir. */
.cookie h4{font-size:1rem;margin-bottom:9px;color:#fff}
.cookie p{font-size:.86rem;color:rgba(255,255,255,.74);line-height:1.6}
.cookie p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.cookie .btn-ghost{border-color:rgba(255,255,255,.3);color:#fff;background:none}
.cookie .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.cookie-actions{display:flex;gap:10px;margin-top:18px}
.cookie-actions .btn{flex:1;padding:12px 16px;font-size:.87rem}

/* Audio / vinyl deco */
.eq{display:flex;align-items:flex-end;gap:3px;height:20px}
.eq i{width:3px;background:var(--red);border-radius:3px;animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(1){height:40%;animation-delay:0s}
.eq i:nth-child(2){height:80%;animation-delay:.18s}
.eq i:nth-child(3){height:55%;animation-delay:.36s}
.eq i:nth-child(4){height:100%;animation-delay:.14s}
.eq i:nth-child(5){height:65%;animation-delay:.42s}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* ---------- 31. Responsive ---------- */
@media (max-width:1200px){
  .nav a{padding:10px 11px;font-size:.885rem}
  .header-tel{display:none}
}
@media (max-width:1024px){
  :root{--header-h:72px}
  .nav,.header-cta .btn{display:none}
  .burger{display:block}
  .g4,.stats{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .b-3,.bento .b-4{grid-column:span 2}
  .gallery{--unit:26%}   /* deux photos par rangée */
  .footer-grid{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:repeat(2,1fr);gap:34px}
  .process::before,.process-line{display:none}
  .media-badge{left:-12px}
}
@media (max-width:860px){
  body{font-size:16px}
  .g2,.g3,.split{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .form-grid{grid-template-columns:1fr}
  .mobile-bar{display:flex}
  .to-top{bottom:88px}
  .cookie{left:12px;right:12px;bottom:88px;max-width:none}
  .site-footer{padding-bottom:80px}
  .sec-head-row{align-items:flex-start}
  .media-stack .m2{width:46%;right:0;bottom:-7%}
}
/* Grille de la page contact : deux colonnes au-dessus de 860px seulement. */
.contact-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start}
@media (max-width:860px){
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  /* Les révélations latérales décalent l'élément de 40px tant qu'il n'est pas
     apparu : sur un écran étroit cela suffit à créer un défilement horizontal. */
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(26px)}
}
/* Filet de sécurité : aucune bavure décorative ne doit pouvoir faire glisser
   la page latéralement. overflow-x:clip plutôt que hidden pour ne pas casser
   position:fixed/sticky. */
html{overflow-x:clip}

@media (max-width:600px){
  .stats{grid-template-columns:1fr 1fr;gap:24px}
  .stat{padding-left:18px}
  /* Téléphone : une photo par rangée, à son format d'origine (aucun recadrage). */
  .gallery{display:block}
  .gallery figure{width:100%;height:auto;aspect-ratio:var(--r);margin-bottom:var(--gap)}
  .gallery figure:last-child{margin-bottom:0}
  .footer-grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .bento .b-2,.bento .b-3,.bento .b-4{grid-column:span 1}
  .g4,.process{grid-template-columns:1fr}
  .review{flex:0 0 88vw}
  .btn{padding:15px 26px}
  .lb-prev{left:10px}.lb-next{right:10px}
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:26px}
}
@media print{
  .site-header,.drawer,.mobile-bar,.to-top,.cookie,.grain,#preloader,.cursor-dot,.cursor-ring{display:none!important}
  body{background:#fff;color:#000}
}


/* ---------- 32. Le fil rouge ----------
   Julien se décrit comme « le fil rouge conducteur » de la soirée.
   Un vinyle descend la page au fil du défilement, relié par un trait rouge
   qui se remplit : le fil se déroule à mesure qu'on avance.
   Tout est piloté par une seule variable CSS (--p, 0 → 1) mise à jour en
   rAF : aucune reflow, aucun recalcul de style coûteux. */
.fil{
  position:fixed;top:0;right:clamp(14px,2.2vw,34px);bottom:0;width:44px;z-index:700;
  pointer-events:none;display:flex;justify-content:center;
  opacity:0;transition:opacity .6s var(--ease);
}
.fil.on{opacity:1}
.fil-rail{
  position:absolute;top:18vh;bottom:18vh;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(23,18,15,.18) 12%,rgba(23,18,15,.18) 88%,transparent);
}
.fil-rail::after{                       /* portion parcourue */
  content:"";position:absolute;left:0;top:0;width:100%;
  height:calc(var(--p,0) * 100%);
  background:linear-gradient(to bottom,transparent,var(--red));
}
.fil-disc{
  position:absolute;left:50%;
  top:calc(18vh + var(--p,0) * (100vh - 36vh));
  width:34px;height:34px;margin:-17px 0 0 -17px;
  transform:rotate(calc(var(--p,0) * 1440deg));
  will-change:transform,top;
}
.fil-disc svg{width:100%;height:100%;display:block}
.fil-disc .groove{stroke:var(--red);opacity:.55}
.fil-disc .body{fill:#fff;stroke:var(--red)}
.fil-disc .label{fill:var(--red)}
/* Sur fond clair, le vinyle doit rester lisible */
.fil.on-dark-zone .fil-disc .body{fill:#1c1615}
.fil.on-dark-zone .fil-rail{background:linear-gradient(to bottom,transparent,rgba(255,236,214,.2) 12%,rgba(255,236,214,.2) 88%,transparent)}

@media (max-width:1100px){.fil{display:none}}
@media (prefers-reduced-motion:reduce){
  .fil-disc{transform:none}
  .fil{display:none}
}

/* ---------- 33. Bande photo défilante ----------
   Deux rangées pleine largeur qui glissent en sens inverse. Elles montrent
   beaucoup de photos sans rien demander au visiteur, et donnent au milieu
   clair le mouvement qui lui manquait. */
.photoband{padding:clamp(46px,6vw,78px) 0;overflow:hidden;background:var(--ink-2)}
.photoband-row{display:flex;width:max-content;gap:clamp(12px,1.3vw,18px);margin-bottom:clamp(12px,1.3vw,18px)}
.photoband-row:last-child{margin-bottom:0}
.photoband-row > *{display:flex;gap:clamp(12px,1.3vw,18px);flex:none}
.photoband-a{animation:bandLeft 112s linear infinite}
.photoband-b{animation:bandLeft 120s linear infinite reverse}
.photoband:hover .photoband-row{animation-play-state:paused}
@keyframes bandLeft{to{transform:translateX(-50%)}}
.photoband figure{
  position:relative;flex:none;border-radius:var(--radius);overflow:hidden;
  width:clamp(190px,21vw,320px);aspect-ratio:4/3;background:var(--ink-4);
  box-shadow:var(--shadow);
}
.photoband figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .8s var(--ease);filter:saturate(.92)}
.photoband figure:hover img{transform:scale(1.06);filter:saturate(1.06)}
.photoband figure.tall{aspect-ratio:3/4;width:clamp(150px,16vw,240px)}
/* fondu sur les bords pour que la bande sorte du cadre proprement */
.photoband{position:relative}
.photoband::before,.photoband::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,9vw,150px);z-index:2;pointer-events:none;
}
.photoband::before{left:0;background:linear-gradient(to right,var(--ink-2),transparent)}
.photoband::after{right:0;background:linear-gradient(to left,var(--ink-2),transparent)}
@media (prefers-reduced-motion:reduce){
  .photoband-row{animation:none!important;width:100%;overflow-x:auto;flex-wrap:nowrap}
}
@media (max-width:700px){
  .photoband figure{width:clamp(150px,52vw,220px)}
}


/* Liste « Pour les quelques dates récentes » (À propos) : un point par ligne.
   Les intitulés longs (« DJ Résident dans les établissements… ») reviennent à
   la ligne sous leur propre texte, jamais sous la coche. */
.checks-lines{gap:16px}
.checks-lines li span{font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.5}
@media (max-width:599px){.checks-lines li{gap:11px}}