/* ─── RESET & VARS ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior: smooth;
  /* La barre de navigation est fixe : sans cette reserve, une ancre
     depose le haut de la section dessous. */
  scroll-padding-top: 92px;
}

:root {
  --bg: #fafafa;
  --bg2: #f0f0f0;
  --bg3: #e4e4e4;
  --ink: #212121;
  --ink2: #555555;
  --ink3: #666666;
  --acc: #3e64dc;
  --acc2: #bae3ed;
  --rose: rgba(62,100,220,.06);
  --line: rgba(33,33,33,.08);
  /* Voiles des sections posees sur le mur de reels, et halo du hero.
     Ils doivent suivre le theme, sans quoi le texte clair du theme
     sombre se retrouve sur un fond reste clair. */
  /* Le pied de page est un bloc volontairement sombre, dans les deux
     themes : il ne suit donc pas --ink, qui s'inverse. */
  --pied:   #212121;
  --voile:  rgba(250,250,250,.88);
  --voile2: rgba(240,240,240,.9);
  --halo:   250,250,250;
  --linen: 'Space Mono', monospace;
  --serif: 'Space Mono', monospace;
  --body: 'Outfit', sans-serif;
  --mono: 'Space Mono', monospace;
}

/* ─── Services : CTA tag animé ─── */
.svc-tag-cta {
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .25s, color .25s, border-color .25s, padding-right .25s;
}
.svc:hover .svc-tag-cta {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}
.svc-arrow { transition: transform .25s cubic-bezier(.16,1,.3,1); display: inline-block; }
.svc:hover .svc-arrow { transform: translateX(4px); }
.skip-link {
  position: fixed; top: -100%; left: 16px; z-index: 99999;
  background: var(--acc); color: #fff;
  font-family: var(--linen); font-size: 11px; letter-spacing: .1em;
  padding: 10px 20px; border-radius: 0 0 6px 6px;
  text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 0; outline: 2px solid var(--ink); outline-offset: 2px; }

/* ─── FAQ button reset ─── */
.faq-q {
  background: none; border: none; width: 100%; text-align: left; cursor: pointer;
  color: inherit; font-family: inherit; font-size: inherit;
}

/* ─── FORM FEEDBACK ─── */
.form-feedback {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 12px 16px;
  border-radius: 4px; font-size: 12px; line-height: 1.5;
  background: rgba(99, 160, 99, .12); color: #2d6a2d;
  border: 1px solid rgba(99, 160, 99, .25);
}
.form-feedback.form-feedback-err {
  background: rgba(200, 80, 60, .10); color: #8a2a1a;
  border-color: rgba(200, 80, 60, .25);
}
.form-feedback-ico { font-size: 14px; flex-shrink: 0; }

/* ─── TÉMOIGNAGES ─── */
.testi {
  padding: 96px 48px;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
}
.testi-inner { max-width: 1100px; margin: 0 auto; }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testi-card {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 36px 28px 28px;
  position: relative;
  transition: transform .3s, box-shadow .3s;
}
.testi-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(61,43,31,.07); }
.testi-quote {
  font-family: var(--serif); font-weight: 800;
  font-size: 64px; line-height: .8;
  color: var(--acc2); opacity: .3;
  position: absolute; top: 20px; left: 24px;
  pointer-events: none;
}
.testi-text {
  font-size: 13px; color: var(--ink2); line-height: 1.9;
  margin-bottom: 24px; padding-top: 16px;
  font-style: italic;
}
.testi-author {
  display: flex; align-items: center; gap: 12px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.testi-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--rose);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 11px;
  color: var(--acc); flex-shrink: 0;
  letter-spacing: .04em;
}
.testi-name { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.testi-role { font-size: 10px; color: var(--ink3); letter-spacing: .05em; line-height: 1.5; }

@media (max-width: 900px) {
  .testi-grid { grid-template-columns: 1fr; }
  .testi { padding: 72px 20px; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--linen);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: hidden;
}

::selection { background: var(--acc); color: #fff; }
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--acc2); border-radius: 2px; }

/* ─── SCROLL PROGRESS ─── */
#spb {
  position: fixed; top: 0; left: 0; right: 0;
  height: 1.5px;
  background: var(--acc);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9000;
  transition: transform .08s linear;
}

/* ─── NAV ─── */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px;
  transition: background .3s, border-color .3s, padding .3s, transform .4s cubic-bezier(.4,0,.2,1);
}
nav.sc {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 14px 48px;
}
nav.nav-hidden {
  transform: translateY(-110%);
  transition: transform .4s cubic-bezier(.4,0,.2,1),
              background .3s, border-color .3s, padding .3s;
}
.logo {
  font-family: var(--serif); font-weight: 800;
  font-size: 22px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.logo em { font-style: normal; color: var(--acc); }

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links a {
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink2); text-decoration: none;
  padding: 8px 14px; border-radius: 40px;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); background: var(--rose); }
.nav-links a.act { color: var(--ink); background: var(--rose); }

.nav-cta {
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  background: var(--ink); color: var(--bg) !important;
  padding: 10px 22px !important; border-radius: 40px;
  transition: background .2s !important;
}
.nav-cta:hover { background: var(--acc) !important; }

/* Instagram icon in nav */
.nav-ig {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--ink2) !important;
  background: transparent !important;
  padding: 0 !important;
  transition: color .2s, background .2s !important;
}
.nav-ig:hover {
  color: var(--ink) !important;
  background: var(--rose) !important;
}

/* hamburger — hidden on desktop, shown only on mobile */
.ham {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: none; cursor: pointer;
  padding: 4px; width: 32px;
}
.ham span {
  display: block; height: 1.5px; background: var(--ink);
  border-radius: 1px; transition: all .35s cubic-bezier(.16,1,.3,1);
  transform-origin: center;
}
.ham.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ─── DRAWER ─── */
#scrim {
  position: fixed; inset: 0; background: rgba(26,24,22,0);
  z-index: 449; pointer-events: none; transition: background .4s;
}
#scrim.open { background: rgba(26,24,22,.25); pointer-events: all; }

#drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(300px, 82vw);
  background: var(--bg);
  border-left: 1px solid var(--line);
  z-index: 450;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column;
  padding: 72px 32px 40px;
  gap: 4px;
}
#drawer.open { transform: translateX(0); }
.dr-link {
  font-family: var(--serif); font-weight: 700;
  font-size: 20px; letter-spacing: -.01em; text-transform: uppercase;
  text-decoration: none; color: var(--ink2);
  padding: 10px 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  transition: color .2s, padding-left .2s;
}
.dr-link:hover { color: var(--ink); padding-left: 4px; }
.dr-num { font-family: var(--linen); font-size: 10px; color: var(--ink3); }
.dr-foot {
  margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink3); line-height: 1.8;
}

/* ─── MINI NAV (floating pill) ─── */
#pill {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(70px);
  opacity: 0;
  z-index: 400;
  display: inline-flex; align-items: center; gap: 0;
  width: max-content; max-width: calc(100vw - 24px);
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(74,51,40,.12);
  border-radius: 100px;
  padding: 3px;
  box-shadow: 0 4px 20px rgba(74,51,40,.12);
  pointer-events: none;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .4s;
  white-space: nowrap;
}
#pill.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: all; }
.pill-item {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink2); text-decoration: none;
  padding: 6px 11px; border-radius: 100px;
  transition: color .2s, background .2s;
}
.pill-item:hover { color: var(--ink); background: var(--rose); }
.pill-item.act { color: var(--ink); background: var(--rose); }
.pill-sep { width: 1px; height: 12px; background: var(--line); flex-shrink: 0; }
.pill-cta {
  background: var(--ink) !important; color: var(--bg) !important;
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; padding: 6px 14px !important;
  border-radius: 100px; transition: background .2s !important;
}
.pill-cta:hover { background: var(--acc) !important; }

/* ─── SIDE DOTS ─── */
#dots {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 300; display: flex; flex-direction: column; gap: 8px;
}
.sdot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink3); cursor: pointer;
  transition: all .3s; position: relative;
}
.sdot.act { background: var(--acc); height: 14px; border-radius: 3px; width: 4px; }
.sdot:hover::after {
  content: attr(data-label);
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink2); white-space: nowrap; pointer-events: none;
}

/* ─── HELPERS ─── */
html.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
html.js .rv.in { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; }
.tag {
  display: inline-flex; font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink2); border: 1px solid var(--line);
  padding: 3px 10px; border-radius: 40px;
}
.s-label {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--acc); display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.s-label::before { content: ''; width: 18px; height: 1px; background: var(--acc); }

/* ─── HERO ─── */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 340px;
  align-items: end;
  gap: 0;
  padding: 0 48px 0 48px;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 100%, transparent 20%, black 100%);
  z-index: 0;
}

/* Left text column */
.hero-content {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 80px;
  position: relative; z-index: 2;
  /* Au-dela, le titre s'etire sur toute la largeur de l'ecran et la
     composition se delite. Le reste de la page est cale sur 1100 px. */
  max-width: 860px;
}

.hero-tag {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 28px;
  display: flex; align-items: center; gap: 12px;
  opacity: 0; animation: fadeup .6s ease .3s forwards;
}
.hero-tag::before { content: ''; width: 28px; height: 1px; background: var(--acc); }

.hero-title {
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(40px, 5.5vw, 82px);
  line-height: .93; letter-spacing: -.03em; text-transform: uppercase;
  margin-bottom: 44px; position: relative; z-index: 2;
}
.hero-title .line { display: block; overflow: hidden; }
html.js .hero-title .line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
html.js .hero-title.go .line-inner { transform: translateY(0); }
.hero-title .line:nth-child(1) .line-inner { transition-delay: .1s; }
.hero-title .line:nth-child(2) .line-inner { transition-delay: .2s; }
.hero-title .line:nth-child(3) .line-inner { transition-delay: .3s; color: var(--acc); }
.hero-title .line:nth-child(4) .line-inner {
  transition-delay: .4s;
  -webkit-text-stroke: 1.5px var(--ink); color: transparent;
}

/* scramble chars */
.hero-title .scramble { display: inline-block; }

.hero-bottom {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  opacity: 0; animation: fadeup .6s ease 1.2s forwards;
  position: relative; z-index: 2;
  padding-right: 48px;
}
.hero-sub { font-size: 12px; color: var(--ink2); max-width: 280px; line-height: 1.85; }
.hero-ctas { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }

/* Right photo column */
.hero-photo-wrap {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  z-index: 2;
}
.hero-photo {
  width: 100%;
  height: 92%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 20px 20px 0 0;
  box-shadow: -12px 0 60px rgba(61,43,31,.08);
}
/* Entree animee reservee au mode JS : sans JS la photo reste visible.
   Delai ramene de 2.8s a 0.25s — l'ancienne valeur repoussait le plus grand
   element de la page (LCP) au-dela du seuil de 2,5s exige par Google. */
html.js .hero-photo {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1) .25s,
              opacity   .6s ease                      .25s;
}
html.js body.photo-loaded .hero-photo {
  transform: translateY(0);
  opacity: 1;
}
/* subtle parallax on scroll */
.hero-photo-wrap.parallax .hero-photo {
  will-change: transform;
}
.hero-photo-caption {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  font-size: 8px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .5s ease 3.8s;
  background: rgba(0,0,0,.28);
  padding: 4px 14px; border-radius: 40px;
  backdrop-filter: blur(4px);
}
body.photo-loaded .hero-photo-caption { opacity: 1; }

/* vertical line between columns */
.hero-photo-wrap::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 30%, var(--line));
  z-index: 3;
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--linen); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; border: none; cursor: pointer;
  padding: 12px 24px; border-radius: 40px;
  transition: background .2s, color .2s, transform .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-fill { background: var(--ink); color: var(--bg); }
.btn-fill:hover { background: var(--acc); }
.btn-line { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-line:hover { background: var(--bg2); }

@keyframes fadeup { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

/* ─── INTRO STRIP ─── */
.intro {
  padding: 72px 48px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.intro-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center;
}
.intro-h {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(26px, 2.5vw, 38px); letter-spacing: -.02em; line-height: 1.15;
}
.intro-h em { font-style: normal; color: var(--acc); }
.intro-text { font-size: 13px; color: var(--ink2); line-height: 1.9; margin-bottom: 20px; }
.intro-stats { display: flex; gap: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.stat-n { font-family: var(--serif); font-weight: 800; font-size: 36px; color: var(--ink); line-height: 1; }
.stat-n b { color: var(--acc); }
.stat-l { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink3); margin-top: 4px; }

/* ─── DIGITAL SCROLL SECTION v2 — fullscreen immersive ─── */
.dig-scroll-section {
  height: 300vh;
  position: relative;
}

.digital-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Fonds plein écran animés */
.dig-bgz {
  position: absolute; inset: 0;
  background: #0d0d18;
  z-index: 0;
}
.dig-bgz-item {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .8s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.dig-bgz-item.bgz-active { opacity: 1; }
.bgz-1 { background: linear-gradient(155deg,#17203a,#252a55 45%,#381830); }
.bgz-2 { background: linear-gradient(155deg,#0e2018,#183028 45%,#281a10); }
.bgz-3 { background: linear-gradient(155deg,#1e0e22,#2a1840 45%,#1c1424); }

/* Voile pour la lisibilité */
.dig-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.12) 60%, rgba(0,0,0,.28) 100%);
  z-index: 2; pointer-events: none;
}

/* Grille de contenu */
.dig-cg {
  position: relative; z-index: 10;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 80px;
  align-items: center;
  max-width: 1100px;
  width: 100%;
  padding: 0 80px;
}

/* Colonne info */
.dig-ci {
  color: rgba(250,247,244,.9);
  transition: opacity .42s ease, transform .52s cubic-bezier(.16,1,.3,1);
}
.dig-ci.fading {
  opacity: 0;
  transform: translateY(14px);
}
.dig-ci-label {
  color: rgba(250,247,244,.4) !important;
  margin-bottom: 20px;
}
.dig-ci-num {
  font-family: var(--serif); font-weight: 800;
  font-size: 130px; line-height: .85; letter-spacing: -.05em;
  color: rgba(250,247,244,.05);
  position: absolute; top: 50%; left: 60px;
  transform: translateY(-50%);
  pointer-events: none; user-select: none;
  transition: opacity .5s;
}
.dig-ci-title {
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(30px,4vw,54px); line-height: .93;
  letter-spacing: -.03em; text-transform: uppercase;
  color: rgba(250,247,244,.95);
  margin-bottom: 18px;
}
.dig-ci-title em { font-style: normal; color: var(--acc2); }
.dig-ci-desc {
  font-size: 13px; color: rgba(250,247,244,.5); line-height: 1.9;
  max-width: 380px; margin-bottom: 18px;
}
.dig-ci-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.dig-ci-tags .dig-vtag {
  background: rgba(181,168,224,.14);
  border: 1px solid rgba(181,168,224,.22);
  color: rgba(181,168,224,.85);
}
.dig-ci-stats {
  display: flex; align-items: stretch;
  border: 1px solid rgba(250,247,244,.12);
  border-radius: 8px; overflow: hidden;
  margin-bottom: 28px; width: fit-content;
}
.dig-ci-stat { padding: 14px 24px; text-align: center; }
.dig-ci-sv {
  font-family: var(--serif); font-weight: 800;
  font-size: 20px; color: rgba(250,247,244,.95);
  line-height: 1; letter-spacing: -.01em;
}
.dig-ci-sl {
  font-size: 8px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250,247,244,.28); margin-top: 5px;
}
.dig-ci-sep { width: 1px; background: rgba(250,247,244,.1); flex-shrink: 0; }

/* CTA Instagram */
.dig-ig-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--linen); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250,247,244,.38); text-decoration: none;
  border: 1px solid rgba(250,247,244,.14); padding: 8px 18px; border-radius: 40px;
  transition: color .3s, border-color .3s, background .3s;
}
.dig-ig-cta:hover { color: rgba(250,247,244,.85); border-color: rgba(250,247,244,.3); }

/* Colonne phone */
.dig-cp { display: flex; align-items: center; justify-content: center; }

/* Dots (repositionnés sur fond sombre) */
.dig-dots {
  position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; align-items: center; z-index: 20;
}
.dig-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(250,247,244,.2);
  border: 1px solid rgba(250,247,244,.15);
  transition: all .35s; cursor: pointer;
}
.dig-dot.act {
  background: rgba(250,247,244,.85);
  height: 14px; border-radius: 3px; width: 4px;
  border-color: rgba(250,247,244,.85);
}

/* Hint scroll */
.dig-hint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  font-size: 8px; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(250,247,244,.22); transition: opacity .4s;
  writing-mode: horizontal-tb;
}

/* Responsive */
@media (max-width: 900px) {
  .dig-cg {
    grid-template-columns: 1fr;
    gap: 36px; padding: 24px 24px 80px;
    align-items: flex-start;
  }
  .dig-cp { display: none; }
  .dig-ci-num { display: none; }
  .dig-ci-title { font-size: clamp(28px,7vw,44px); }
  .dig-dots { right: 16px; }
}

.dig-layout {
  display: grid;
  grid-template-columns: 280px 220px 200px;
  gap: 60px;
  align-items: center;
  max-width: 860px;
  width: 100%;
  padding: 0 48px;
}

/* Info panel */
.dig-info { display: flex; flex-direction: column; gap: 16px; }
.dig-num {
  font-family: var(--serif); font-weight: 800;
  font-size: 80px; line-height: 1; letter-spacing: -.04em;
  color: var(--bg3); position: absolute;
  top: 20px; right: 0; pointer-events: none;
  transition: all .5s cubic-bezier(.16,1,.3,1);
}
.dig-info-wrap { position: relative; padding-right: 48px; }
#dig-label { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--acc); margin-bottom: 6px; }
#dig-title {
  font-family: var(--serif); font-weight: 700;
  font-size: 22px; line-height: 1.2; color: var(--ink);
  transition: opacity .35s, transform .35s;
}
#dig-desc {
  font-size: 12px; color: var(--ink2); line-height: 1.8;
  transition: opacity .35s .05s, transform .35s .05s;
}
#dig-tags { display: flex; flex-wrap: wrap; gap: 4px; transition: opacity .35s .1s; }
.dig-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.dig-stat-lbl { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.dig-stat-val { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); }
.dig-stat-val b { color: var(--acc); }

/* Phone */
.dig-phone {
  width: 220px; flex-shrink: 0;
  background: #f5f3ef;
  border-radius: 36px;
  border: 1.5px solid rgba(26,24,22,.12);
  box-shadow: 0 0 0 4px rgba(26,24,22,.04), 0 24px 60px rgba(26,24,22,.12);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.dig-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 68px; height: 20px;
  background: #f5f3ef; border-radius: 0 0 12px 12px; z-index: 10;
}
.dig-status {
  padding: 22px 14px 6px;
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0; position: relative; z-index: 5;
}
.dig-time { font-size: 10px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.dig-batt { width: 14px; height: 7px; border-radius: 2px; border: 1.5px solid var(--ink); position: relative; opacity: .6; }
.dig-batt::after { content: ''; position: absolute; top: 1px; left: 1px; width: 7px; height: 3px; background: var(--ink); border-radius: 1px; }
.dig-clip { overflow: hidden; height: 390px; flex-shrink: 0; position: relative; }
.dig-track { transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; }
.dig-reel { width: 100%; height: 390px; position: relative; overflow: hidden; }
.dig-reel-bg { position: absolute; inset: 0; }
.g1 { background: linear-gradient(155deg,#17203a,#252a55 45%,#381830); }
.g2 { background: linear-gradient(155deg,#0e2018,#183028 45%,#281a10); }
.g3 { background: linear-gradient(155deg,#1e0e22,#2a1840 45%,#1c1424); }
.d-sh { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .35; animation: sha 7s ease-in-out infinite; }
@keyframes sha { 0%,100%{transform:scale(1) translate(0,0)} 33%{transform:scale(1.18) translate(8px,-10px)} 66%{transform:scale(.88) translate(-8px,10px)} }
.dig-vt { position: absolute; top: 0; left: 0; right: 0; height: 50px; background: linear-gradient(to bottom,rgba(0,0,0,.5),transparent); }
.dig-vb { position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to top,rgba(0,0,0,.72),transparent); padding: 8px 10px; display: flex; flex-direction: column; justify-content: flex-end; }
.dig-vcap { font-size: 9px; color: rgba(255,255,255,.9); line-height: 1.5; margin-bottom: 5px; }
.dig-vcap strong { color: #fff; }
.dig-vtags { display: flex; flex-wrap: wrap; gap: 3px; }
.dig-vtag { font-size: 7px; color: rgba(200,190,240,.9); background: rgba(181,168,224,.15); padding: 2px 6px; border-radius: 20px; }
.dig-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 36px; height: 36px; background: rgba(255,255,255,.2); backdrop-filter: blur(4px); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.3); cursor: pointer; }
.dig-rlbl { position: absolute; top: 8px; right: 8px; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; background: rgba(0,0,0,.35); color: rgba(255,255,255,.65); padding: 2px 6px; border-radius: 20px; }
.dig-ract { position: absolute; right: 6px; top: 50%; transform: translateY(-60%); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.dig-ra { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.dig-rc { font-size: 7px; color: rgba(255,255,255,.7); }
.dig-bar { height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dig-hb { width: 64px; height: 3px; background: rgba(26,24,22,.18); border-radius: 2px; }

/* Progress dots */
.dig-dots { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.dig-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bg3); border: 1px solid var(--line); transition: all .35s; cursor: pointer; }
.dig-dot.act { background: var(--acc); height: 14px; border-radius: 3px; width: 4px; border-color: var(--acc); }
.dig-hint { margin-top: 16px; font-size: 8px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink3); writing-mode: vertical-rl; transition: opacity .4s; }
.dig-continue { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink3); opacity: 0; transition: opacity .5s; white-space: nowrap; }
.dig-continue.show { opacity: 1; }

/* ─── SERVICES ─── */
.services {
  padding: 100px 48px;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
}
.services-inner { max-width: 1100px; margin: 0 auto; }
.services-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 60px;
}
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); }
.svc {
  padding: 40px 32px;
  border-right: 1px solid var(--line);
  position: relative; cursor: pointer;
  transition: background .3s;
}
.svc:last-child { border-right: none; }
.svc:hover { background: var(--rose); }
.svc-n { font-family: var(--serif); font-weight: 800; font-size: 56px; color: rgba(26,24,22,.06); line-height: 1; margin-bottom: 24px; }
.svc-name { font-family: var(--serif); font-weight: 700; font-size: 22px; margin-bottom: 12px; }
.svc-desc { font-size: 12px; color: var(--ink2); line-height: 1.8; margin-bottom: 24px; }
.svc-line { position: absolute; bottom: 0; left: 0; right: 0; height: 1.5px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.svc:hover .svc-line { transform: scaleX(1); }

/* ─── MARQUEE ─── */
.mq { padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; background: var(--bg); }
.mq-track { display: flex; width: max-content; animation: mqa 22s linear infinite; }
.mq-track:hover { animation-play-state: paused; }
.mq-item { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); padding: 0 28px; white-space: nowrap; transition: color .2s; cursor: default; }
.mq-item:hover { color: var(--ink); }
.mq-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--acc); opacity: .4; flex-shrink: 0; align-self: center; }
@keyframes mqa { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ─── MUR DE REELS — DECOR DE FOND ───
   Cinq rangees de formats verticaux, posees derriere la page. Le decor
   est fixe et remonte au scroll moins vite que le contenu : c'est ce
   decalage qui donne la profondeur. Purement decoratif : il ne recoit
   aucun clic et n'existe pas pour les lecteurs d'ecran. */
.reel-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .22;
  /* Le haut s'efface : la barre de navigation est transparente tant qu'on
     n'a pas defile, son logo ne doit pas tomber sur une vignette. */
  mask-image: linear-gradient(to bottom, transparent 0, #000 150px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 150px);
}
.reel-wall {
  position: absolute;
  top: -80px;
  left: -40px;
  right: -40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  will-change: transform;
}
.reel-row { overflow: hidden; }
.reel-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: reela 58s linear infinite;
}
/* Des vitesses et des sens differents d'une rangee a l'autre : sans cela
   le mur glisse d'un bloc et l'effet de profondeur disparait. */
.reel-row-2 .reel-track { animation-duration: 82s; animation-direction: reverse; }
.reel-row-3 .reel-track { animation-duration: 66s; }
.reel-row-4 .reel-track { animation-duration: 94s; animation-direction: reverse; }
.reel-row-5 .reel-track { animation-duration: 74s; }
@keyframes reela { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }

.reel-item {
  position: relative;
  flex: 0 0 auto;
  width: 150px;
  height: 267px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg3);
}
.reel-item img,
.reel-vid {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.reel-vid {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.reel-vid.joue { opacity: 1; }

/* Le contenu passe devant le decor. */
.hero, .intro, .services, .mq, .portfolio-section,
.about, .testi, .mentions, .faq, .contact, footer {
  position: relative;
  z-index: 1;
}

/* Du hero aux realisations, les fonds laissent passer le decor. Plus bas,
   ils redeviennent opaques et le mur disparait de lui-meme. */
.hero { background: transparent; }

/* Le titre du hero tombe directement sur les vignettes : un halo clair
   le detache sans masquer le decor autour. */
.hero-content { position: relative; }
/* Le texte du hero tombe sur les vignettes du mur. Un voile ancre au bord
   gauche le detache, et s'efface avant la photo. Il est exprime en
   largeur de fenetre, pas en pourcentage de la colonne : sa forme ne
   depend donc plus de la largeur de l'ecran. */
.hero-content::before {
  content: '';
  position: absolute;
  top: -120px;
  bottom: -80px;
  left: -60px;
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to right,
              rgba(var(--halo),.95) 0%,
              rgba(var(--halo),.92) 30%,
              rgba(var(--halo),.55) 52%,
              rgba(var(--halo),0) 72%);
}
.intro { background: var(--voile); }
.services { background: var(--voile2); }
.mq { background: var(--voile); }
.portfolio-section { background: var(--voile); }

/* Pas de mur de reels sur telephone : le texte y occupe toute la largeur,
   le decor ne servait qu'a gener la lecture, et il coutait treize images
   sur une connexion mobile. Les vignettes ne sont meme pas telechargees,
   le conteneur etant masque et les images en chargement differe. */
@media (max-width: 768px) {
  .reel-bg { display: none; }
  .hero-content::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-track { animation: none; }
  .reel-wall { transform: none !important; }
}

/* ─── ABOUT ─── */
.about { padding: 100px 48px; background: var(--bg); border-bottom: 1px solid var(--line); }
.about-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: start; }
.about-name { font-family: var(--serif); font-weight: 800; font-size: clamp(40px, 5vw, 72px); letter-spacing: -.04em; line-height: .9; text-transform: uppercase; margin: 12px 0 28px; }
.about-name span { display: block; }
.about-name .hl { color: var(--acc); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 32px; }
.about-bio { font-size: 13px; color: var(--ink2); line-height: 1.9; margin-bottom: 16px; }
.about-bio strong { color: var(--ink); }
.quote { margin: 28px 0; padding: 20px 24px; border-left: 2px solid var(--acc); background: var(--bg2); }
.quote-text { font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--ink); line-height: 1.5; }
.quote-auth { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink3); margin-top: 8px; }

/* ─── MENTIONS ─── */
.mentions { padding: 100px 48px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.men-grid { max-width: 1100px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.men-card { background: var(--bg); border: 1px solid var(--line); padding: 28px 24px; transition: transform .3s, box-shadow .3s; position: relative; }
.men-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(196,120,126,.12); background: var(--rose); }
.men-badge { display: inline-flex; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 10px; border-radius: 40px; margin-bottom: 14px; }
.mb-a { background: rgba(58,95,217,.06); color: var(--acc); border: 1px solid rgba(58,95,217,.15); }
.mb-s { background: rgba(26,24,22,.04); color: var(--ink2); border: 1px solid var(--line); }
.mb-e { background: rgba(127,179,211,.08); color: #3f79a1; border: 1px solid rgba(127,179,211,.2); }
.men-title { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 6px; line-height: 1.2; }
.men-sub { font-size: 10px; color: var(--acc); margin-bottom: 10px; letter-spacing: .05em; }
.men-desc { font-size: 11px; color: var(--ink2); line-height: 1.75; }
.men-year { position: absolute; top: 24px; right: 20px; font-size: 10px; color: var(--bg3); font-weight: 700; }

/* ─── HOW ─── */

/* ─── FAQ ─── */
.faq { padding: 100px 48px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.faq-inner { max-width: 720px; margin: 56px auto 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; }
.faq-q-text { font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.3; flex: 1; }
.faq-ico { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .35s, background .2s; }
.faq-item.open .faq-ico { transform: rotate(45deg); background: var(--acc); border-color: var(--acc); }
.faq-ico svg { width: 10px; height: 10px; }
.faq-item.open .faq-ico svg { stroke: white; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.16,1,.3,1); }
.faq-item.open .faq-a { max-height: 400px; }
.faq-a-inner { padding: 0 0 20px; font-size: 12px; color: var(--ink2); line-height: 1.9; }
.faq-a-inner strong { color: var(--ink); }
.faq-a-inner a { color: var(--acc); }

/* ─── CONTACT ─── */
.contact { padding: 100px 48px; background: var(--bg); }
.contact-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.contact-title { font-family: var(--serif); font-weight: 800; font-size: clamp(32px, 4vw, 52px); letter-spacing: -.03em; line-height: .95; text-transform: uppercase; margin: 12px 0 20px; }
.contact-sub { font-size: 12px; color: var(--ink2); line-height: 1.9; margin-bottom: 32px; }
.clinks { display: flex; flex-direction: column; gap: 10px; }
.clink { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--ink2); text-decoration: none; transition: color .2s; }
.clink:hover { color: var(--acc); }
.clink-ico { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; transition: border-color .2s; }
.clink:hover .clink-ico { border-color: var(--acc); }
.form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fg { display: flex; flex-direction: column; gap: 5px; }
.fl { font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.fi { background: transparent; border: none; border-bottom: 1px solid var(--line); padding: 9px 0; color: var(--ink); font-family: var(--linen); font-size: 12px; outline: none; transition: border-color .2s; width: 100%; }
.fi::placeholder { color: var(--ink3); }
.fi:focus { border-color: var(--acc); }
textarea.fi { resize: none; height: 80px; }
select.fi { appearance: none; cursor: pointer; color: var(--ink3); }
select.fi option { color: var(--ink); background: var(--bg); }
.form-btn { align-self: flex-start; margin-top: 4px; }

/* ─── FOOTER ─── */
footer {
  background: var(--pied); color: rgba(248,246,242,.8);
  padding: 0 48px 32px;
}
.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px; padding: 48px 0 36px;
  border-bottom: 1px solid rgba(248,246,242,.08);
}
.footer-logo { font-family: var(--serif); font-weight: 800; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: #f8f6f2; text-decoration: none; display: block; margin-bottom: 10px; }
.footer-logo em { font-style: normal; color: var(--acc2); }
.footer-desc { font-size: 11px; color: rgba(248,246,242,.62); line-height: 1.7; }
.footer-col-title { font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: rgba(248,246,242,.56); margin-bottom: 14px; }
.footer-col-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col-links a { font-size: 11px; color: rgba(248,246,242,.74); text-decoration: none; transition: color .2s; }
.footer-col-links a:hover { color: #f8f6f2; }
.footer-bot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
}
.footer-copy { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(248,246,242,.52); }
.footer-legal { display: flex; gap: 16px; }
.footer-legal a { font-size: 9px; color: rgba(248,246,242,.52); text-decoration: none; letter-spacing: .08em; text-transform: uppercase; transition: color .2s; }
.footer-legal a:hover { color: #f8f6f2; }

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  nav, .hero-content, .intro, .about, .services, .mentions, .faq, .contact, footer, .mq { padding-left: 20px; padding-right: 20px; }
  nav.sc { padding-left: 20px; padding-right: 20px; }
  .nav-links { display: none; }
  .ham { display: flex; }
  /* Hero mobile: single column, photo hidden */
  .hero { grid-template-columns: 1fr; padding: 0; }
  .hero-content { padding: 100px 20px 72px; }
  .hero-bottom { padding-right: 0; flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-photo-wrap { display: none; }
  .intro-inner, .about-inner, .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .services-grid, .men-grid { grid-template-columns: 1fr; }
  .services-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bot { flex-direction: column; gap: 12px; }
  .dig-layout { grid-template-columns: 1fr 200px 32px; gap: 24px; padding: 0 20px; }
  .dig-info-wrap { display: none; }
  #dots { display: none; }
}

/* ─── INVERTED THEME (toggled on nav click) ─── */
body.inverted {
  --bg:    #3d2b1f;
  --bg2:   #4a3428;
  --bg3:   #573d2f;
  --ink:   #faf7f4;
  --ink2:  #c8a898;
  --ink3:  #9a7868;
  --acc:   #e8b89a;
  --acc2:  #c8957a;
  --rose:  rgba(232,184,154,.15);
  --line:  rgba(250,247,244,.12);
  --pied:   #2a1d15;
  --voile:  rgba(61,43,31,.88);
  --voile2: rgba(74,52,40,.9);
  --halo:   61,43,31;
}
body, body * {
  transition: background-color .5s ease, color .4s ease, border-color .4s ease;
}
/* preserve transition on specific elements */
.hero-title .line-inner, .rv { transition-property: transform, opacity, background-color, color, border-color; }

/* ─── PORTFOLIO SECTION (index page preview + portfolio page) ─── */
.portfolio-section {
  padding: 100px 48px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.portfolio-header {
  max-width: 1100px; margin: 0 auto 56px;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.portfolio-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}
.portfolio-grid.full-grid {
  grid-template-columns: repeat(3,1fr);
}
.p-card {
  position: relative; overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4/5;
  cursor: pointer;
  background: var(--bg3);
}
.p-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
  display: block;
}
.p-card:hover img { transform: scale(1.06); }
.p-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(61,43,31,.72) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .4s;
}
.p-card:hover .p-card-overlay { opacity: 1; }
.p-card-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 16px;
  transform: translateY(8px);
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .4s;
  opacity: 0;
}
.p-card:hover .p-card-info { transform: translateY(0); opacity: 1; }
.p-card-cat { font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc2); margin-bottom: 4px; }
.p-card-title { font-family: var(--serif); font-weight: 700; font-size: 14px; color: #fff; line-height: 1.3; }
/* Wide cards */
.p-card.wide { grid-column: span 2; aspect-ratio: 16/9; }
.p-card.tall { grid-row: span 2; aspect-ratio: auto; }

/* ─── SUB-PAGE HERO ─── */
.sub-hero {
  padding: 140px 48px 72px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.sub-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 100%, transparent 20%, black 100%);
}
.sub-hero-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; }
.sub-hero-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink3); text-decoration: none; margin-bottom: 40px;
  transition: color .2s;
}
.sub-hero-back:hover { color: var(--acc); }
.sub-hero-back::before { content: '←'; }
.sub-hero-tag { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--acc); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sub-hero-tag::before { content: ''; width: 18px; height: 1px; background: var(--acc); }
.sub-hero-title {
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -.03em; line-height: .93; text-transform: uppercase;
  margin-bottom: 28px;
}
.sub-hero-desc { font-size: 14px; color: var(--ink2); line-height: 1.85; max-width: 560px; }

/* ─── SERVICE DETAIL PAGE ─── */
.svc-detail { padding: 80px 48px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.svc-detail-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.svc-detail-list { display: flex; flex-direction: column; gap: 0; margin-top: 32px; }
.svc-detail-item {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.svc-detail-item:first-child { border-top: 1px solid var(--line); }
.svc-detail-n { font-family: var(--serif); font-weight: 800; font-size: 24px; color: var(--bg3); flex-shrink: 0; width: 36px; }
.svc-detail-text h4 { font-family: var(--serif); font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.svc-detail-text p { font-size: 12px; color: var(--ink2); line-height: 1.8; }
.svc-prices { margin-top: 48px; padding: 32px; background: var(--bg); border: 1px solid var(--line); }
.svc-price-title { font-family: var(--serif); font-weight: 700; font-size: 18px; margin-bottom: 20px; }
.svc-price-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.svc-price-row:last-child { border-bottom: none; }
.svc-price-label { font-size: 12px; color: var(--ink2); }
.svc-price-val { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--acc); }
.svc-cta-block { margin-top: 48px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── SERVICE OTHER CARDS ─── */
.svc-others { padding: 80px 48px; background: var(--bg); border-bottom: 1px solid var(--line); }
.svc-others-inner { max-width: 1100px; margin: 0 auto; }
.svc-other-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.svc-other-card {
  padding: 32px 28px; border: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  transition: background .3s, transform .3s;
  display: block; position: relative;
}
.svc-other-card:hover { background: var(--rose); transform: translateY(-2px); }
.svc-other-n { font-family: var(--serif); font-weight: 800; font-size: 44px; color: rgba(26,24,22,.06); margin-bottom: 16px; }
.svc-other-name { font-family: var(--serif); font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.svc-other-desc { font-size: 12px; color: var(--ink2); line-height: 1.7; }
.svc-other-arrow { position: absolute; top: 32px; right: 28px; font-size: 16px; color: var(--acc3); opacity: .4; transition: opacity .3s, transform .3s; }
.svc-other-card:hover .svc-other-arrow { opacity: 1; transform: translateX(4px); }

/* ─── LEGAL PAGES ─── */
.legal-content { padding: 80px 48px 120px; background: var(--bg); }
.legal-inner { max-width: 760px; margin: 0 auto; }
.legal-section { margin-bottom: 48px; }
.legal-h2 { font-family: var(--serif); font-weight: 700; font-size: 18px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.legal-p { font-size: 13px; color: var(--ink2); line-height: 1.9; margin-bottom: 10px; }
.legal-p strong { color: var(--ink); }
.legal-p a { color: var(--acc); }
.legal-ul { margin: 10px 0 10px 20px; display: flex; flex-direction: column; gap: 6px; }
.legal-ul li { font-size: 13px; color: var(--ink2); line-height: 1.8; }

/* ─── SIMPLE NAV (sub pages) ─── */
.sub-nav-links a.active { color: var(--ink); background: var(--rose); }

/* ─── RESPONSIVE ADDITIONS ─── */
@media (max-width: 768px) {
  .portfolio-section { padding: 72px 20px; }
  .portfolio-grid { grid-template-columns: 1fr 1fr; }
  .p-card.wide { grid-column: span 2; }
  .portfolio-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sub-hero { padding: 120px 20px 56px; }
  .svc-detail-inner { grid-template-columns: 1fr; gap: 40px; }
  .svc-others-inner .svc-other-grid { grid-template-columns: 1fr; }
  .legal-content { padding: 60px 20px 80px; }
}

/* ─── ANTI-FOUT: stabilise layout pendant chargement police ─── */
/* Space Mono metrics vs monospace fallback */
@font-face {
  font-family: 'Space Mono Fallback';
  src: local('Courier New');
  size-adjust: 93%;
  ascent-override: 103%;
  descent-override: 25%;
  line-gap-override: 0%;
}
/* Appliquer le fallback ajusté sur body pour éviter le saut */
body {
  font-family: 'Space Mono', 'Space Mono Fallback', monospace;
}

/* Réserver la hauteur exacte du titre hero dès le départ */
.hero-title {
  min-height: calc(clamp(28px,3.8vw,62px) * .95 * 4);
}

/* Empêcher les lignes du titre de provoquer un reflow */
.hero-title .line { contain: layout; }

/* Logo fixe dès le départ pour éviter le saut nav */
.logo { contain: layout; }

/* Footer logos */
.footer-logo {
  font-family: var(--serif); font-weight: 800;
  font-size: 20px; letter-spacing: .08em; text-transform: uppercase;
  color: #f8f6f2; text-decoration: none; display: block; margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════════
   AMÉLIORATIONS VISUELLES v2
═══════════════════════════════════════════════════ */

/* ── Curseur personnalisé (desktop uniquement) ── */
@media (pointer:fine) {
  body { cursor: none; }
  a, button, .svc, .p-card, .faq-q, .men-card { cursor: none; }
}

/* ── Hero : grain de film subtil ── */
.hero::after {
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.025; mix-blend-mode:multiply;
}

/* ── Hero : gradient de bas vers haut pour lisibilité ── */
.hero-content { padding-top: 100px; }

/* ── Intro strip : chiffres animés plus grands ── */
.stat-n { font-size: 48px; transition: transform .3s; }
.intro-stats > div:hover .stat-n { transform: scale(1.06); }

/* ── Services : tag "Découvrir" amélioré ── */
.svc .tag {
  display: inline-flex; align-items: center; gap: 4px;
  transition: color .3s, background .3s, padding-left .3s;
}
.svc:hover .tag { color: var(--acc); background: var(--rose); padding-left: 14px; }

/* ── Portfolio cards : zoom + info slide smoother ── */
.p-card { transform: translateZ(0); }
.p-card::before {
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(200deg, rgba(160,99,78,.18) 0%, transparent 50%);
  opacity:0; transition:opacity .5s;
}
.p-card:hover::before { opacity:1; }

/* ── Men cards : shimmer top border ── */
.men-card { transition: transform .3s, box-shadow .3s, background .3s; }

/* ── About section : quote accent ── */
.quote { transition: border-color .3s; }
.quote:hover { border-left-color: var(--acc2); }
.quote:hover .quote-text { color: var(--ink); }

/* ── HOW steps : hover left border ── */

/* ── FAQ item: bg color on open ── */
.faq-q-text { transition: color .2s; }
.faq-item.open .faq-q-text { color: var(--acc); }

/* ── Scroll progress bar : gradient ── */
#spb {
  background: linear-gradient(90deg, var(--acc), var(--acc2), var(--acc));
  background-size: 200% 100%;
  animation: spbFlow 3s linear infinite;
}
@keyframes spbFlow {
  from { background-position: 0% 0%; }
  to   { background-position: 200% 0%; }
}

/* ── Pill: backdrop tint on scroll ── */
#pill.show {
  box-shadow: 0 8px 32px rgba(160,99,78,.10), 0 4px 20px rgba(74,51,40,.12);
}

/* ── Footer: hover links style ── */
.footer-col-links a { position: relative; display: inline-block; }
.footer-col-links a::after {
  content:'';
  position:absolute; bottom:-1px; left:0; width:100%; height:1px;
  background:rgba(250,247,244,.4); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.footer-col-links a:hover::after { transform:scaleX(1); }

/* ── Badge tag: color pop on hover ── */
.badges .tag, .about .tag {
  transition: background .25s, color .25s, border-color .25s;
}
.badges .tag:hover, .about .tag:hover {
  background: var(--rose);
  color: var(--acc);
  border-color: var(--acc2);
}

/* ── Clinks (contact icons) : grow ── */
.clink-ico { transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .2s; }
.clink:hover .clink-ico { transform: scale(1.15) rotate(-5deg); }

/* ── Achievements: hover left border ── */

/* ── Drawer links: stagger in ── */
#drawer.open .dr-link {
  animation: drIn .4s cubic-bezier(.16,1,.3,1) both;
}
#drawer.open .dr-link:nth-child(1) { animation-delay:.04s; }
#drawer.open .dr-link:nth-child(2) { animation-delay:.08s; }
#drawer.open .dr-link:nth-child(3) { animation-delay:.12s; }
#drawer.open .dr-link:nth-child(4) { animation-delay:.16s; }
#drawer.open .dr-link:nth-child(5) { animation-delay:.20s; }
#drawer.open .dr-link:nth-child(6) { animation-delay:.24s; }
#drawer.open .dr-link:nth-child(7) { animation-delay:.28s; }
#drawer.open .dr-link:nth-child(8) { animation-delay:.32s; }
@keyframes drIn {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ── Sub-page hero: slide up on load ── */
.sub-hero-title { animation: fadeup .8s cubic-bezier(.16,1,.3,1) .2s both; }
.sub-hero-desc  { animation: fadeup .8s cubic-bezier(.16,1,.3,1) .35s both; }
.sub-hero-back  { animation: fadeup .6s ease .1s both; }

/* ── Form input: focus glow ── */
.fi:focus {
  box-shadow: 0 2px 0 var(--acc);
}
textarea.fi:focus { box-shadow: 0 2px 0 var(--acc); }

/* ── Form submit button: active press ── */
.form-btn:active { transform: scale(.97) translateY(0) !important; }

/* ── Mq marquee items: color pop on hover ── */
.mq-track:hover .mq-item { color: var(--ink2); }
.mq-item:hover { color: var(--acc) !important; cursor: default; }

/* ── Dig phone: glow on reel change ── */
.dig-phone { transition: box-shadow .5s; }
.dig-phone:hover {
  box-shadow: 0 0 0 4px rgba(26,24,22,.04), 0 32px 80px rgba(160,99,78,.20);
}

/* ── Inverted theme : smoother ── */
body.inverted #spb { background:linear-gradient(90deg, var(--acc2), var(--acc), var(--acc2)); }

/* ── Selection highlight ── */
::selection { background: var(--acc); color: #fff; }


/* ═══════════════════════════════════════════════════════
   PRELOADER
═══════════════════════════════════════════════════════ */
#preloader { display: none; }
html.js #preloader {
  position: fixed; inset: 0; z-index: 100000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  opacity: 1;
  transition: opacity .8s cubic-bezier(.4,0,.2,1) .2s;
}
#preloader.pre-done {
  opacity: 0;
  pointer-events: none;
}
.pre-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
}
.pre-logo-wrap {
  margin-bottom: 28px;
  opacity: 0;
  animation: preUp .7s cubic-bezier(.16,1,.3,1) .1s both;
}
.pre-logo-img {
  height: 36px; width: auto;
  filter: opacity(.55);
}
.pre-logo {
  color: var(--ink);
  width: clamp(180px, 30vw, 300px);
  height: auto;
  margin-bottom: 4px;
  opacity: 0;
  animation: preUp .9s cubic-bezier(.16,1,.3,1) .18s both;
}
.pre-tagline {
  font-family: var(--linen);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink3); margin-top: 14px;
  opacity: 0;
  animation: preUp .6s ease .5s both;
}
.pre-bar-wrap {
  width: 160px; height: 1px;
  background: var(--line);
  margin-top: 40px;
  overflow: hidden;
  border-radius: 1px;
}
.pre-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  border-radius: 1px;
  transition: width .05s linear;
}
.pre-pct {
  font-family: var(--linen);
  font-size: 9px; letter-spacing: .12em;
  color: var(--ink3); margin-top: 12px;
  opacity: 0;
  animation: preUp .4s ease .6s both;
  min-width: 30px; text-align: center;
}
@keyframes preUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════
   HUD CINÉMA — coins plein écran hero
═══════════════════════════════════════════════════════ */

/* ── 4 coins en L ── */
.hud {
  position: absolute;
  width: 28px; height: 28px;
  opacity: 0;
  transition: opacity .5s ease 3.2s;
  z-index: 6;
  pointer-events: none;
}
body.photo-loaded .hud { opacity: 1; }

.hud.tl { top: 88px;    left: 32px;   border-top:    1px solid rgba(61,43,31,.18); border-left:  1px solid rgba(61,43,31,.18); }
.hud.tr { top: 88px;    right: 32px;  border-top:    1px solid rgba(61,43,31,.18); border-right: 1px solid rgba(61,43,31,.18); }
.hud.bl { bottom: 40px; left: 32px;   border-bottom: 1px solid rgba(61,43,31,.18); border-left:  1px solid rgba(61,43,31,.18); }
.hud.br { bottom: 40px; right: 32px;  border-bottom: 1px solid rgba(61,43,31,.18); border-right: 1px solid rgba(61,43,31,.18); }

/* ── REC + nom (haut-gauche, aligné coin tl) ── */
.hud-rec {
  position: absolute;
  top: 92px; left: 68px;
  display: flex; align-items: center; gap: 6px;
  opacity: 0;
  transition: opacity .5s ease 3.4s;
  z-index: 6;
  pointer-events: none;
}
body.photo-loaded .hud-rec { opacity: 1; }

.hud-dot {
  width: 5px; height: 5px;
  background: #c94f3a;
  border-radius: 50%;
  flex-shrink: 0;
  animation: hudBlink 1s ease-in-out infinite;
}
@keyframes hudBlink { 0%,100%{opacity:1} 50%{opacity:0} }

.hud-rec-txt {
  font-family: var(--linen);
  font-size: 8px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink3);
}
.hud-name {
  font-family: var(--linen);
  font-size: 8px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink3);
  opacity: .6;
}

/* ── Timecode (haut-droit, aligné coin tr) ── */
.hud-tc {
  position: absolute;
  top: 92px; right: 68px;
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: .10em;
  color: var(--ink3);
  opacity: 0;
  transition: opacity .5s ease 3.4s;
  z-index: 6;
  pointer-events: none;
  white-space: nowrap;
}
body.photo-loaded .hud-tc { opacity: 1; }

/* ── Défileur vertical (bas-droit, aligné coin br) ── */
.hud-scroll {
  position: absolute;
  right: 36px; bottom: 76px;
  writing-mode: vertical-rl;
  font-family: var(--linen);
  font-size: 7px; letter-spacing: .30em; text-transform: uppercase;
  color: var(--ink3);
  opacity: 0;
  display: flex; align-items: center; gap: 10px;
  transition: opacity .5s ease 3.6s;
  z-index: 6;
  pointer-events: none;
}
body.photo-loaded .hud-scroll { opacity: 1; }

.hud-scroll-line {
  display: block;
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--ink3), transparent);
  opacity: .5;
}



/* ═══════════════════════════════════════════════════════════════════
   SAMO CONTENT — DARK CINEMATIC THEME + NEW FEATURES
   Lancement semaine prochaine — mise à jour complète
═══════════════════════════════════════════════════════════════════ */

/* ── 1. DARK PALETTE — remplace le fond crème par un noir cinéma ── */


/* ── 2. ELEMENT OVERRIDES DARK ── */
nav.sc {
  background: rgba(13,12,11,.95);
  border-bottom: 1px solid rgba(237,232,226,.07);
}

#pill {
  background: rgba(18,16,14,.92);
  border: 1px solid rgba(237,232,226,.1);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

#drawer {
  background: var(--bg2);
  border-left: 1px solid var(--line);
}

#scrim.open { background: rgba(0,0,0,.5); }

.svc-n { color: rgba(237,232,226,.05); }


.men-year { color: rgba(237,232,226,.08); }

.dig-phone {
  background: #191714;
  border-color: rgba(237,232,226,.1);
  box-shadow: 0 0 0 4px rgba(0,0,0,.3), 0 24px 60px rgba(0,0,0,.4);
}
.dig-notch, .dig-status { background: #191714; }
.dig-time { color: var(--ink2); }
.dig-batt { border-color: var(--ink2); }
.dig-batt::after { background: var(--ink2); }

/* ── 3. HERO AVAILABILITY BADGE ── */
.hero-avail {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--linen); font-size: 8px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(160,200,140,.85);
  border: 1px solid rgba(160,200,140,.2);
  background: rgba(160,200,140,.06);
  padding: 5px 14px 5px 10px; border-radius: 40px;
  margin-bottom: 20px;
  width: fit-content;
  opacity: 0; animation: fadeup .5s ease .1s forwards;
}
.avail-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6ac86a;
  box-shadow: 0 0 0 3px rgba(106,200,106,.2);
  animation: avPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes avPulse { 0%,100%{box-shadow:0 0 0 3px rgba(106,200,106,.2)} 50%{box-shadow:0 0 0 6px rgba(106,200,106,.08)} }

/* ── 4. COOKIE RGPD BANNER ── */
.cookie-banner {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 9999; width: calc(100vw - 40px); max-width: 680px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  backdrop-filter: blur(16px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s, transform .4s;
  transform: translateX(-50%) translateY(16px);
}
.cookie-banner.show {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.cookie-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.cookie-text {
  font-size: 11px; color: var(--ink2); line-height: 1.7;
  flex: 1; min-width: 200px;
}
.cookie-btns { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.cookie-btn {
  font-family: var(--linen); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 40px;
  padding: 7px 18px; cursor: pointer; transition: background .2s, color .2s;
}
.cookie-accept {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}
.cookie-accept:hover { background: var(--acc); border-color: var(--acc); }
.cookie-refuse {
  background: transparent; color: var(--ink2);
}
.cookie-refuse:hover { color: var(--ink); border-color: var(--ink2); }
.cookie-link { font-size: 9px; color: var(--ink3); text-decoration: underline; letter-spacing: .06em; transition: color .2s; }
.cookie-link:hover { color: var(--acc); }

/* ── 5. WHATSAPP FLOATING BUTTON ── */
.wa-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 9998;
  display: inline-flex; align-items: center; gap: 8px;
  background: #075e54; color: #fff;
  padding: 12px 18px 12px 14px; border-radius: 50px;
  text-decoration: none; font-size: 11px; letter-spacing: .06em;
  box-shadow: 0 4px 20px rgba(7,94,84,.35);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  font-family: var(--linen);
}
.wa-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(7,94,84,.45); }
.wa-label { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 768px) { .wa-btn .wa-label { display: none; } .wa-btn { padding: 13px; border-radius: 50%; } }

/* ── 6. NEW DIGITAL SECTION — TECH LAYOUT ── */
.dig-tech-outer {
  width: 100%; max-width: 1100px; padding: 0 48px;
  display: grid;
  grid-template-columns: 120px 1fr 280px 32px;
  gap: 64px; align-items: center;
}

/* Large number */
.dig-tech-num-col {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.dig-tech-big-num {
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(80px, 10vw, 140px);
  line-height: 1; letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212,144,110,.35);
  transition: all .6s cubic-bezier(.16,1,.3,1);
  display: block;
}
.dig-tech-total {
  font-family: var(--linen); font-size: 9px; letter-spacing: .18em;
  color: var(--ink3); text-transform: uppercase;
}
.dig-tech-vline {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, transparent, var(--line));
}

/* Center content */
.dig-tech-center {
  display: flex; flex-direction: column; gap: 20px;
}
.dig-tech-label {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--acc); display: flex; align-items: center; gap: 10px;
}
.dig-tech-label::before { content: ''; width: 18px; height: 1px; background: var(--acc); flex-shrink: 0; }
.dig-tech-title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(22px, 2.5vw, 36px); line-height: 1.1;
  color: var(--ink); letter-spacing: -.02em;
  transition: opacity .4s, transform .4s;
}
.dig-tech-desc {
  font-size: 12px; color: var(--ink2); line-height: 1.9;
  max-width: 360px;
  transition: opacity .4s .05s, transform .4s .05s;
}
.dig-tech-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Right metrics panel */
.dig-tech-metrics {
  display: flex; flex-direction: column; gap: 18px;
  border: 1px solid var(--line);
  padding: 24px 20px;
  border-radius: 8px;
  background: rgba(20,18,16,.6);
  position: relative;
}
.dig-tech-metrics::before {
  content: 'ANALYTICS';
  position: absolute; top: -1px; left: 20px;
  font-size: 7px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--acc); background: var(--bg2);
  padding: 0 6px; transform: translateY(-50%);
}
.dig-metric { display: flex; flex-direction: column; gap: 6px; }
.dig-metric-head { display: flex; justify-content: space-between; align-items: baseline; }
.dig-metric-label { font-size: 8px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink3); }
.dig-metric-val { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink); }
.dig-metric-val b { color: var(--acc); }
.dig-metric-bar {
  height: 2px; background: rgba(237,232,226,.06);
  border-radius: 1px; overflow: hidden;
}
.dig-metric-fill {
  height: 100%; background: var(--acc);
  border-radius: 1px;
  transition: width .7s cubic-bezier(.16,1,.3,1);
}

/* Side dots vertical */
.dig-v-dots {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.dig-v-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(237,232,226,.12); border: 1px solid rgba(237,232,226,.15);
  transition: all .35s; cursor: pointer;
}
.dig-v-dot.act {
  background: var(--acc); height: 14px; border-radius: 2px; border-color: var(--acc);
}

/* Background grid for the section */
.digital-sticky {
  background: var(--bg);
  background-image:
    linear-gradient(rgba(237,232,226,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,232,226,.03) 1px, transparent 1px);
  background-size: 80px 80px;
}
.dig-continue { color: var(--ink3); }

/* ── CONTINUE HINT ── */
.dig-scroll-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-size: 8px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink3); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 1; transition: opacity .4s;
}
.dig-scroll-hint.hide { opacity: 0; }
.dig-scroll-arrow {
  width: 1px; height: 28px;
  background: linear-gradient(to bottom, var(--acc), transparent);
  animation: scrollDown 1.6s ease-in-out infinite;
}
@keyframes scrollDown { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ── RESPONSIVE NEW DIGITAL ── */
@media (max-width: 900px) {
  .dig-tech-outer {
    grid-template-columns: 60px 1fr 32px;
    gap: 24px; padding: 0 20px;
  }
  .dig-tech-metrics { display: none; }
  .dig-tech-big-num { font-size: 60px; }
}

/* ── HUD CORNERS — dark version ── */
.hud.tl, .hud.tr { border-color: rgba(237,232,226,.12); }
.hud.bl, .hud.br { border-color: rgba(237,232,226,.12); }

/* ── PRELOADER DARK ── */
#preloader { background: var(--bg); }

/* ── PORTFOLIO DARK ── */
.p-card { background: var(--bg2); }
.p-card-overlay { background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 55%); }

/* ── FORM DARK ── */
.fi { color: var(--ink); border-bottom-color: var(--line); }
.fi::placeholder { color: var(--ink3); }
select.fi option { background: var(--bg2); color: var(--ink); }
.form-feedback { background: rgba(80,140,80,.1); color: #8dd68d; border-color: rgba(80,140,80,.2); }
.form-feedback.form-feedback-err { background: rgba(180,60,60,.1); color: #e08080; border-color: rgba(180,60,60,.2); }

/* ── SCROLLBAR DARK ── */
::-webkit-scrollbar-track { background: var(--bg2); }



/* ═══════════════════════════════════════════════════════════════════
   SAMO CONTENT — CHARTE GRAPHIQUE OFFICIELLE 2025
   Palette exacte : #fafafa fond · #212121 texte · #4a73e3 bleu
   Ce bloc ÉCRASE tous les overrides dark précédents.
═══════════════════════════════════════════════════════════════════ */



/* ── BODY OVERRIDE ── */
body {
  background: var(--bg);
  color: var(--ink);
}

/* ── NAV CLAIR ── */
nav.sc {
  background: rgba(250,250,250,.96);
  border-bottom: 1px solid rgba(33,33,33,.08);
  backdrop-filter: blur(16px);
}
nav {
  background: transparent;
}
.logo {
  font-family: var(--linen);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.logo em { color: var(--acc); }

.nav-links a { color: var(--ink2); }
.nav-links a:hover { color: var(--ink); background: var(--rose); }
.nav-cta { background: var(--ink) !important; color: var(--bg) !important; }
.nav-cta:hover { background: var(--acc) !important; }
.ham span { background: var(--ink); }

/* ── FLOATING PILL CLAIR ── */
#pill {
  background: rgba(250,250,250,.92);
  border: 1px solid rgba(33,33,33,.1);
  box-shadow: 0 4px 20px rgba(33,33,33,.1);
}
.pill-item { color: var(--ink2); }
.pill-item:hover, .pill-item.act { color: var(--ink); background: var(--rose); }
.pill-cta { background: var(--ink) !important; color: var(--bg) !important; }
.pill-cta:hover { background: var(--acc) !important; }

/* ── DRAWER CLAIR ── */
#drawer {
  background: var(--bg);
  border-left: 1px solid var(--line);
}
#scrim.open { background: rgba(33,33,33,.2); }
.dr-link { color: var(--ink2); border-bottom-color: var(--line); }
.dr-link:hover { color: var(--ink); }
.dr-foot { color: var(--ink3); border-top-color: var(--line); }

/* ── SCROLL PROGRESS BAR BLEU ── */
#spb { background: var(--acc); }

/* ── SIDE DOTS ── */
.sdot { background: var(--ink3); }
.sdot.act { background: var(--acc); }

/* ── HERO GRID LINES ── */
.hero-grid {
  background-image: linear-gradient(rgba(33,33,33,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(33,33,33,.05) 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero-photo {
  box-shadow: -12px 0 60px rgba(33,33,33,.08);
}

/* ── HERO TITRE : 4e ligne en outline (noir sur fond clair) ── */
.hero-title .line:nth-child(3) .line-inner { color: var(--acc); }
.hero-title .line:nth-child(4) .line-inner {
  -webkit-text-stroke: 1.5px var(--ink);
  color: transparent;
}

/* ── AVAILABILITY BADGE (vert sur fond clair) ── */
.hero-avail {
  color: rgba(34,125,67,.9);
  border-color: rgba(34,125,67,.25);
  background: rgba(34,125,67,.05);
}
.avail-dot { background: #227d43; box-shadow: 0 0 0 3px rgba(34,125,67,.18); }

/* ── BOUTONS ── */
.btn-fill { background: var(--ink); color: var(--bg); }
.btn-fill:hover { background: var(--acc); }
.btn-line { border-color: rgba(33,33,33,.2); color: var(--ink); }
.btn-line:hover { background: var(--bg2); }

/* ── TAGS ── */
.tag {
  color: var(--ink2);
  border-color: rgba(33,33,33,.15);
}

/* ── INTRO ── */
.intro { background: var(--voile); border-bottom-color: var(--line); }
.intro-h em { color: var(--acc); }
.stat-n { color: var(--ink); }
.stat-n b { color: var(--acc); }
.count-n { color: var(--ink); }

/* ── SECTION LABELS ── */
.s-label { color: var(--acc); }
.s-label::before { background: var(--acc); }

/* ── DIGITAL SECTION CLAIR ── */
.digital-sticky {
  background: var(--bg);
  background-image:
    linear-gradient(rgba(33,33,33,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,33,33,.04) 1px, transparent 1px);
  background-size: 80px 80px;
}
.dig-tech-big-num {
  -webkit-text-stroke: 1px rgba(74,115,227,.25);
  color: transparent;
}
.dig-tech-metrics {
  background: rgba(240,240,240,.6);
  border-color: rgba(33,33,33,.1);
}
.dig-tech-metrics::before {
  background: var(--bg2);
  color: var(--acc);
}
.dig-metric-fill { background: var(--acc); }
.dig-metric-bar { background: rgba(33,33,33,.08); }
.dig-v-dot { background: rgba(33,33,33,.1); border-color: rgba(33,33,33,.15); }
.dig-v-dot.act { background: var(--acc); border-color: var(--acc); }
#digScore { color: var(--acc); }
.dig-scroll-arrow { background: linear-gradient(to bottom, var(--acc), transparent); }
.dig-continue { color: var(--ink3); }

/* ── SERVICES ── */
.services { background: var(--voile2); border-bottom-color: var(--line); }
.services-grid { border-color: var(--line); }
.svc { border-right-color: var(--line); }
.svc:hover { background: var(--rose); }
.svc-n { color: rgba(33,33,33,.06); }
.svc-line { background: var(--acc); }

/* ── MARQUEE ── */
.mq { background: var(--voile); border-color: var(--line); }
.mq-dot { background: var(--acc); }
.mq-item { color: var(--ink3); }
.mq-item:hover { color: var(--ink); }

/* ── PORTFOLIO ── */
.portfolio-section { background: var(--voile); border-bottom-color: var(--line); }
.p-card { background: var(--bg3); }
.p-card-overlay { background: linear-gradient(to top, rgba(33,33,33,.75) 0%, transparent 55%); }
.p-card-cat { color: rgba(186,227,237,.85); }

/* ── ABOUT ── */
.about { background: var(--bg); border-bottom-color: var(--line); }
.about-name .hl { color: var(--acc); }
.about-bio strong { color: var(--ink); }
.quote { border-left-color: var(--acc); background: var(--bg2); }

/* ── MENTIONS ── */
.mentions { background: var(--bg2); border-bottom-color: var(--line); }
.men-card { background: var(--bg); border-color: var(--line); }
.men-card:hover { background: var(--rose); }
.men-year { color: rgba(33,33,33,.1); }
.men-title { color: var(--ink); }
.men-sub { color: var(--acc); }
.mb-a { background: rgba(74,115,227,.06); color: var(--acc); border-color: rgba(74,115,227,.2); }
.mb-s { background: rgba(33,33,33,.04); color: var(--ink2); border-color: var(--line); }
.mb-e { background: rgba(186,227,237,.15); color: #3f79a1; border-color: rgba(186,227,237,.3); }

/* ── HOW ── */

/* ── FAQ ── */
.faq { background: var(--bg2); border-bottom-color: var(--line); }
.faq-item { border-bottom-color: var(--line); }
.faq-ico { border-color: var(--line); }
.faq-item.open .faq-ico { background: var(--acc); border-color: var(--acc); }
.faq-a-inner a { color: var(--acc); }

/* ── TÉMOIGNAGES ── */
.testi { background: var(--bg2); border-bottom-color: var(--line); }
.testi-card { background: var(--bg); border-color: var(--line); }
.testi-quote { color: var(--acc2); }
.testi-author { border-top-color: var(--line); }
.testi-avatar { background: var(--rose); color: var(--acc); }
.testi-name { color: var(--ink); }

/* ── CONTACT ── */
.contact { background: var(--bg); }
.clink { color: var(--ink2); }
.clink:hover { color: var(--acc); }
.clink-ico { border-color: var(--line); }
.clink:hover .clink-ico { border-color: var(--acc); }
.fi { color: var(--ink); border-bottom-color: rgba(33,33,33,.15); }
.fi::placeholder { color: var(--ink3); }
.fi:focus { border-bottom-color: var(--acc); }
select.fi option { background: var(--bg); color: var(--ink); }
.form-feedback { background: rgba(34,125,67,.07); color: #1a7a40; border-color: rgba(34,125,67,.2); }
.form-feedback.form-feedback-err { background: rgba(200,60,60,.07); color: #8a2020; border-color: rgba(200,60,60,.2); }

/* ── FOOTER DARK (inchangé, il est déjà sombre) ── */
footer { background: var(--pied); }
.footer-logo em { color: var(--acc2); }

/* ── PRELOADER ── */
#preloader { background: var(--bg); }
.pre-bar { background: linear-gradient(90deg, var(--acc), var(--acc2)); }

/* ── HUD CINÉMA CLAIR ── */
.hud.tl, .hud.tr { border-color: rgba(33,33,33,.15); }
.hud.bl, .hud.br { border-color: rgba(33,33,33,.15); }
.hud-rec-txt { color: rgba(33,33,33,.5); }
.hud-name { color: rgba(33,33,33,.45); }

/* ── SCROLLBAR CLAIR ── */
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--acc2); }

/* ── SÉLECTION TEXTE ── */
::selection { background: var(--acc); color: #fff; }

/* ── COOKIE BANNER (adapté fond clair) ── */
.cookie-banner {
  background: var(--bg);
  border-color: rgba(33,33,33,.12);
  box-shadow: 0 8px 40px rgba(33,33,33,.15);
}
.cookie-text { color: var(--ink2); }
.cookie-accept { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cookie-accept:hover { background: var(--acc); border-color: var(--acc); }
.cookie-refuse { color: var(--ink2); border-color: rgba(33,33,33,.2); }
.cookie-link { color: var(--ink3); }

/* ── WhatsApp button : inchangé vert ── */

/* ── INVERTED THEME (override aux couleurs correctes) ── */
body.inverted {
  --bg:    #212121;
  --bg2:   #2e2e2e;
  --bg3:   #3a3a3a;
  --ink:   #fafafa;
  --ink2:  #cccccc;
  --ink3:  #9a9a9a;
  --acc:   #7da0f5;
  --acc2:  #bae3ed;
  --rose:  rgba(125,160,245,.08);
  --line:  rgba(250,250,250,.1);
  --pied:   #171717;
  --voile:  rgba(33,33,33,.88);
  --voile2: rgba(46,46,46,.9);
  --halo:   33,33,33;
}
body.inverted nav.sc {
  background: rgba(33,33,33,.96);
  border-bottom-color: rgba(250,250,250,.08);
}
body.inverted #pill {
  background: rgba(33,33,33,.92);
  border-color: rgba(250,250,250,.1);
}
body.inverted #drawer { background: var(--bg2); }



/* ═══════════════════════════════════════════════════════════════════
   SAMO — REFONTE DESIGN PREMIUM
   Typographie · Logo SVG · Mise en page épurée · HUD amélioré
═══════════════════════════════════════════════════════════════════ */

/* ── 1. NOUVELLES VARIABLES TYPO ──
   Outfit = substitut organique PP Rader (corps)
   Space Mono = technique, labels, titres section (charte) */


body {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 2. LOGO SVG NAV ── */
.samo-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.samo-mark {
  height: 44px;
  width: auto;
  color: var(--ink);
  transition: opacity .2s;
}
@media (max-width: 768px) { .samo-mark { height: 36px; } }
.samo-logo-link:hover .samo-mark { opacity: .75; }

/* ── 3. NAV AMÉLIORÉE ── */
nav {
  padding: 18px 48px;
}
nav.sc {
  padding: 12px 48px;
  background: rgba(250,250,250,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav-links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 8px 15px;
}
.nav-cta {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
  background: var(--ink) !important;
  color: var(--bg) !important;
  padding: 9px 20px !important;
  border-radius: 40px;
}
.nav-cta:hover { background: var(--acc) !important; }

/* ── 4. HERO — LAYOUT AMÉLIORÉ ── */
.hero {
  grid-template-columns: 1fr 360px;
  padding: 0 48px 0 48px;
}
.hero-content {
  padding-bottom: 88px;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
}

/* Badge dispo */
.hero-avail {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .18em;
  margin-bottom: 24px;
}

/* Tag genre */
.hero-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeup .6s ease .3s forwards;
}
.hero-tag::before { content: ''; width: 28px; height: 1px; background: var(--acc); }

/* Titre hero — plus impactant, mix Space Mono/Outfit */
.hero-title {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 62px);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: 48px;
}
.hero-title .line:nth-child(1) .line-inner,
.hero-title .line:nth-child(2) .line-inner { color: var(--ink); }
.hero-title .line:nth-child(3) .line-inner { color: var(--acc); }
.hero-title .line:nth-child(4) .line-inner {
  -webkit-text-stroke: 1.5px var(--ink);
  color: transparent;
}

/* Sous-titre hero */
.hero-sub {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink2);
  line-height: 1.8;
  max-width: 300px;
  letter-spacing: .02em;
}

/* CTAs hero */
.hero-ctas .btn {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── 5. BOUTONS PREMIUM ── */
.btn {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: 40px;
}
.btn-fill {
  background: var(--ink);
  color: var(--bg);
  border: 1.5px solid var(--ink);
}
.btn-fill:hover { background: var(--acc); border-color: var(--acc); }
.btn-line {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(33,33,33,.2);
}
.btn-line:hover { background: var(--bg2); border-color: rgba(33,33,33,.35); }

/* ── 6. HUD AMÉLIORÉ ── */
.hud.tl { top: 80px; left: 28px; width: 22px; height: 22px; border-width: 1px; border-color: rgba(33,33,33,.25); }
.hud.tr { top: 80px; right: 28px; width: 22px; height: 22px; border-width: 1px; border-color: rgba(33,33,33,.25); }
.hud.bl { bottom: 32px; left: 28px; width: 22px; height: 22px; border-width: 1px; border-color: rgba(33,33,33,.25); }
.hud.br { bottom: 32px; right: 28px; width: 22px; height: 22px; border-width: 1px; border-color: rgba(33,33,33,.25); }

.hud-dot { background: var(--acc); box-shadow: 0 0 6px rgba(74,115,227,.6); }
.hud-rec-txt {
  font-family: var(--mono);
  font-size: 7px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--acc);
}
.hud-name {
  font-family: var(--mono);
  font-size: 7px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(33,33,33,.4);
}
.hud-tc {
  font-family: var(--mono) !important;
  font-size: 7px !important;
  letter-spacing: .12em !important;
  color: rgba(33,33,33,.35) !important;
}
.hud-scroll {
  font-family: var(--mono) !important;
  font-size: 7px !important;
  letter-spacing: .22em !important;
  color: rgba(33,33,33,.35) !important;
}

/* ── 7. SECTION LABELS ── */
.s-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 14px;
}

/* ── 8. INTRO & TITRES SECTIONS ── */
.intro-h {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -.015em;
  line-height: 1.2;
  text-transform: uppercase;
}
.intro-h em { font-style: normal; color: var(--acc); }
.intro-text {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink2);
  line-height: 1.9;
  letter-spacing: .01em;
}
.intro-text strong { color: var(--ink); font-weight: 500; }
.stat-n {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 40px;
}
.stat-l {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink3);
}

/* ── 9. SECTION TITLES (all h2) ── */
h2 {
  font-family: var(--mono) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

/* ── 10. SERVICES ── */
.svc-name {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.01em;
}
.svc-desc {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink2);
  line-height: 1.85;
}

/* ── 11. ABOUT ── */
.about-name {
  font-family: var(--mono);
  font-weight: 700;
}
.about-bio {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--ink2);
}
.about-bio strong { color: var(--ink); font-weight: 500; }
.quote-text {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: .01em;
}

/* ── 12. TESTIMONIALS ── */
.testi-text {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.85;
  font-style: normal;
  color: var(--ink2);
}
.testi-name { font-family: var(--mono); font-size: 11px; font-weight: 700; }
.testi-role { font-family: var(--body); font-size: 11px; font-weight: 300; color: var(--ink3); }

/* ── 13. FAQ ── */
.faq-q-text {
  font-family: var(--body);
  font-weight: 500;
  font-size: 15px;
}
.faq-a-inner {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
}

/* ── 14. CONTACT ── */
.contact-title {
  font-family: var(--mono);
  font-weight: 700;
}
.contact-sub {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink2);
  line-height: 1.85;
}
.clink {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 300;
}
.fi {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 300;
}
.fl {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .2em;
}

/* ── 15. FORM BOUTON ── */
.form-btn {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
}

/* ── 16. HOW / PROCESS ── */

/* ── 17. MENTIONS ── */
.men-title { font-family: var(--mono); font-weight: 700; font-size: 15px; }
.men-desc { font-family: var(--body); font-size: 12px; font-weight: 300; line-height: 1.75; }

/* ── 18. MARQUEE ── */
.mq-item { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; }

/* ── 19. DRAWER ── */
.dr-link { font-family: var(--mono); font-weight: 700; font-size: 18px; }
.dr-foot { font-family: var(--body); font-size: 12px; font-weight: 300; }

/* ── 20. PILL ── */
.pill-item, .pill-cta { font-family: var(--mono); font-size: 8px; letter-spacing: .14em; }

/* ── 21. FOOTER ── */
footer { font-family: var(--body); }
.footer-logo { font-family: var(--mono); font-weight: 700; }
.footer-desc { font-family: var(--body); font-size: 12px; font-weight: 300; }
.footer-col-title { font-family: var(--mono); font-size: 8px; letter-spacing: .2em; }
.footer-col-links a { font-family: var(--body); font-size: 12px; font-weight: 300; }
.footer-copy { font-family: var(--mono); }
.footer-legal a { font-family: var(--mono); }

/* ── 22. TAGS ── */
.tag { font-family: var(--mono); font-size: 8px; letter-spacing: .14em; }

/* ── 23. BADGE DISPO ── */
.hero-avail { font-family: var(--mono); }

/* ── 24. PHOTO HERO — plus grande, plus graphique ── */
.hero-photo {
  border-radius: 12px 12px 0 0;
  object-position: center 15%;
}
.hero-photo-wrap::before {
  background: linear-gradient(to bottom, transparent, rgba(33,33,33,.04) 30%, rgba(33,33,33,.04));
}

/* ── 25. COOKIE BANNER TYPO ── */
.cookie-text { font-family: var(--body); font-weight: 300; }
.cookie-btn { font-family: var(--mono); }

/* ── 26. RESPONSIVE NAV ── */
@media (max-width: 768px) {
  nav, nav.sc { padding-left: 20px; padding-right: 20px; }
  .hero { padding: 0; }
  .hero-content { padding: 96px 20px 72px; }
}


/* ════════════════════════════════════════════════════════════
   SAMO — SECTION DIGITAL CINÉMATIQUE
   Ghost number · Titre explosif · Strip métriques
════════════════════════════════════════════════════════════ */

/* Conteneur sticky */
.dig-cinema {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── HUD top bar ── */
.dig-cin-hud {
  position: absolute;
  top: 28px;
  left: 48px;
  right: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}
.dig-cin-counter {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--ink3);
}
.dig-cin-n {
  color: var(--acc);
  font-weight: 700;
}
.dig-cin-tagline {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink3);
}

/* ── Ghost number ── */
.dig-ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(180px, 32vw, 500px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(74, 115, 227, 0.14);
  pointer-events: none;
  user-select: none;
  z-index: 1;
  white-space: nowrap;
  will-change: transform, opacity, left, top;
  transition: none;
}

/* ── Stage central ── */
.dig-cstage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 880px;
  text-align: center;
  z-index: 3;
  pointer-events: none;
  will-change: transform, opacity;
}
.dig-cstage-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 18px;
  opacity: 1;
}
.dig-cstage-title {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(52px, 10vw, 148px);
  line-height: .88;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 24px;
  will-change: transform, opacity;
}
.dig-cstage-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Metrics strip (bottom) ── */
.dig-metrics-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 28px 48px 36px;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  display: flex;
  align-items: flex-end;
  gap: 40px;
  will-change: transform, opacity;
}
.dig-ms-desc {
  flex: 1;
  font-family: var(--body);
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.75;
  max-width: 300px;
  margin: 0;
}
.dig-ms-nums {
  display: flex;
  gap: 28px;
  align-items: flex-end;
  flex-shrink: 0;
}
.dig-ms-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 68px;
}
.dig-ms-val {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
}
.dig-ms-key {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink3);
}
.dig-ms-bar {
  height: 2px;
  background: var(--line);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 4px;
  min-width: 60px;
}
.dig-ms-fill {
  height: 100%;
  background: var(--acc);
  border-radius: 1px;
  transition: width .7s cubic-bezier(.16, 1, .3, 1);
}
.dig-ms-score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  border-left: 1px solid var(--line);
  padding-left: 24px;
  gap: 4px;
}
.dig-ms-score-val {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 42px;
  color: var(--acc);
  line-height: 1;
}
.dig-ms-score-lbl {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink3);
}

/* ── Side dots ── */
.dig-cin-dots {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}
.dig-cin-dot {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--ink3);
  transition: all .3s cubic-bezier(.16, 1, .3, 1);
  opacity: .4;
}
.dig-cin-dot.act {
  background: var(--acc);
  transform: scaleY(3.5);
  opacity: 1;
}

/* ── Scroll hint ── */
.dig-cin-hint {
  position: absolute;
  bottom: 44px;
  left: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink3);
  z-index: 10;
  transition: opacity .4s;
}
.dig-cin-hint.hide { opacity: 0; pointer-events: none; }
.dig-cin-arrow {
  width: 18px;
  height: 1px;
  background: var(--ink3);
  position: relative;
}
.dig-cin-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--ink3);
  border-bottom: 1px solid var(--ink3);
  transform: rotate(-45deg);
}

/* ── Continue prompt ── */
.dig-continue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acc);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
  z-index: 10;
}
.dig-continue.show { opacity: 1; }

/* ── Responsive mobile ── */
@media (max-width: 768px) {
  .dig-cin-hud { left: 20px; right: 20px; top: 20px; }
  .dig-cin-tagline { display: none; }
  .dig-ghost { font-size: clamp(120px, 40vw, 240px); -webkit-text-stroke-width: 1.5px; }
  .dig-cstage { width: 94%; }
  .dig-cstage-title { font-size: clamp(40px, 12vw, 80px); }
  .dig-metrics-strip { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 20px 28px; }
  .dig-ms-desc { max-width: 100%; font-size: 11px; }
  .dig-ms-nums { gap: 16px; flex-wrap: wrap; }
  .dig-ms-score { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 12px; }
  .dig-cin-dots { right: 16px; }
}



/* ═══════════════════════════════════════════════════════════
   PORTFOLIO — VIDEO CARDS
═══════════════════════════════════════════════════════════ */

.p-card-video {
  position: relative;
  overflow: hidden;
  background: var(--bg3);
}

/* Video fills card like an img */
.p-card-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .4s ease;
}

/* Show video on hover */
.p-card-video:hover .p-card-vid {
  opacity: 1;
}

/* Play icon — visible until video starts */
.p-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(250,250,250,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(250,250,250,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 3;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}

.p-card-video:hover .p-card-play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
}

/* Shimmer background when no video loaded */
.p-card-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 50%, var(--bg3) 100%);
  z-index: 0;
  transition: opacity .4s;
}
.p-card-video:hover::before {
  opacity: 0;
}

/* La carte « voir plus » ferme la derniere ligne de la selection :
   7 videos + cette carte sur deux colonnes = une grille pleine. */
.p-card-more-large {
  grid-column: span 2;
  aspect-ratio: auto;
}

/* Une vignette ciblee depuis l'accueil (portfolio.html#v-<id>) doit
   s'arreter sous la barre de navigation, et se signaler. */
.yt-card { scroll-margin-top: 18px; }
.yt-card:target {
  outline: 2px solid var(--acc);
  outline-offset: 4px;
}

/* "More" card */
.p-card-more {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  transition: background .3s, border-color .3s;
}
.p-card-more:hover {
  background: var(--bg2);
  border-color: var(--acc);
}
.p-card-more-inner {
  text-align: center;
  padding: 24px;
}
.p-card-more-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 36px;
  color: var(--acc);
  line-height: 1;
  margin-bottom: 8px;
}
.p-card-more-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 20px;
}
.p-card-more-cta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink2);
  transition: color .2s;
}
.p-card-more:hover .p-card-more-cta { color: var(--acc); }


/* ════════════════════════════════════════════════════════════
   SAMO — DIGITAL AUTO-SHOWCASE
   Grand chiffre · Split layout · Auto-avance 5s
════════════════════════════════════════════════════════════ */

/* Section principale — hauteur plein écran */
.dig-auto-section {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: var(--bg);
}

.dig-auto-wrap {
  position: relative;
  height: 100%;
}

/* ── Ghost décoratif fond ── */
.dig-ghost-bg {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(220px, 38vw, 580px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(74, 115, 227, 0.06);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
  animation: dig-ghost-float 10s ease-in-out infinite;
  transition: opacity .5s;
}
@keyframes dig-ghost-float {
  0%, 100% { transform: translateY(-50%); }
  50%       { transform: translateY(-53%); }
}

/* ── Séparateur vertical ── */
.dig-auto-vdiv {
  position: absolute;
  left: 46%;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--line);
  z-index: 1;
}

/* ══ GAUCHE : format / titre / desc ══ */
.dig-auto-left {
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  width: 38%;
  z-index: 2;
  will-change: opacity, transform;
}

.dig-auto-fmt-title {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 64px);
  line-height: .88;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 28px;
}

.dig-auto-desc-txt {
  font-family: var(--body);
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.8;
  max-width: 310px;
  margin: 0 0 22px;
}

/* ══ DROITE : grand chiffre + sous-stats ══ */
.dig-auto-right {
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  padding-left: 56px;
  z-index: 2;
  will-change: opacity, transform;
}

/* Grand chiffre principal */
.dig-bigstat-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
  margin-bottom: 6px;
}

.dig-bigstat-val {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(80px, 15vw, 220px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.05em;
  will-change: opacity, transform;
}

.dig-bigstat-unit {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(40px, 7.5vw, 110px);
  line-height: 1;
  color: var(--acc);
  letter-spacing: -.04em;
}

.dig-bigstat-key {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 44px;
}

/* Sous-stats */
.dig-auto-substats {
  display: flex;
  gap: 20px;
  align-items: flex-end;
}

.dig-ssitem {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dig-ssval {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(20px, 2.8vw, 38px);
  color: var(--ink);
  line-height: 1;
  transition: opacity .3s;
}

.dig-ssval-score {
  color: var(--acc) !important;
  font-size: clamp(24px, 3.2vw, 44px) !important;
}

.dig-sskey-txt {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink3);
}

.dig-ss-bar {
  height: 2px;
  background: var(--line);
  border-radius: 1px;
  width: 54px;
  overflow: hidden;
}
.dig-ss-fill {
  height: 100%;
  background: var(--acc);
  border-radius: 1px;
  transition: width .9s cubic-bezier(.16, 1, .3, 1);
}

.dig-ssdivider {
  width: 1px;
  height: 44px;
  background: var(--line);
  align-self: center;
  flex-shrink: 0;
}

/* ── Transitions entrée / sortie ── */
.dig-auto-left.exit-left {
  opacity: 0 !important;
  transform: translateY(-50%) translateX(-28px) !important;
}
.dig-auto-right.exit-up {
  opacity: 0 !important;
  transform: translateY(calc(-50% - 24px)) !important;
}
.dig-auto-left.entering {
  opacity: 0;
  transform: translateY(-50%) translateX(28px);
}
.dig-auto-right.entering {
  opacity: 0;
  transform: translateY(calc(-50% + 28px));
}

/* Bounce sur le grand chiffre à l'entrée */
@keyframes dig-num-in {
  0%   { opacity: 0; transform: scale(.72) translateY(12px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(-3px); }
  100% { opacity: 1; transform: scale(1)   translateY(0); }
}
.dig-bigstat-val.bounce-in {
  animation: dig-num-in .65s cubic-bezier(.16, 1, .3, 1) forwards;
}

/* ── Barre + dots en bas ── */
.dig-auto-bottom {
  position: absolute;
  bottom: 32px;
  left: 48px;
  right: 48px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 5;
}

/* Dots horizontaux pour auto section (override vertical) */
.dig-auto-bottom .dig-cin-dots {
  position: static;
  transform: none;
  flex-direction: row;
  gap: 8px;
}
.dig-auto-bottom .dig-cin-dot {
  cursor: pointer;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  transition: all .35s cubic-bezier(.16, 1, .3, 1);
}
.dig-auto-bottom .dig-cin-dot.act {
  transform: scaleX(3.2);
  background: var(--acc);
  opacity: 1;
}

/* Barre de progression */
.dig-auto-progress {
  flex: 1;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}

.dig-auto-prog-fill {
  height: 100%;
  background: var(--acc);
  width: 0%;
}

@keyframes dig-prog {
  from { width: 0%; }
  to   { width: 100%; }
}
.dig-auto-prog-fill.running {
  animation: dig-prog 5s linear forwards;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .dig-auto-vdiv { display: none; }
  .dig-auto-left {
    left: 20px; width: 90%;
    top: auto; bottom: auto;
    transform: none;
    position: relative;
    padding: 88px 20px 16px;
  }
  .dig-auto-right {
    left: 20px; right: 20px;
    width: auto;
    padding-left: 0;
    top: auto; bottom: 80px;
    transform: none;
    position: absolute;
  }
  .dig-auto-section { height: auto; min-height: 100vh; }
  .dig-auto-wrap { display: flex; flex-direction: column; padding-bottom: 80px; }
  .dig-bigstat-val { font-size: clamp(60px, 18vw, 110px); }
  .dig-bigstat-unit { font-size: clamp(30px, 9vw, 55px); }
  .dig-ghost-bg { right: -20%; font-size: 50vw; opacity: .5; }
  .dig-auto-bottom { bottom: 20px; left: 20px; right: 20px; }
}

/* ── INVERTED THEME — fixes supplémentaires ── */

/* btn-line : bordure et texte adaptés au fond sombre */
body.inverted .btn-line {
  border-color: rgba(250,250,250,.28);
  color: var(--ink);
}
body.inverted .btn-line:hover {
  background: rgba(250,250,250,.08);
  border-color: rgba(250,250,250,.5);
}

/* tags en mode sombre */
body.inverted .tag {
  border-color: rgba(250,250,250,.18);
  color: var(--ink2);
}

/* hero avail badge */
body.inverted .hero-avail {
  color: rgba(90,200,110,.9);
  border-color: rgba(90,200,110,.25);
  background: rgba(90,200,110,.08);
}

/* cookie banner */
body.inverted .cookie-banner {
  background: var(--bg2);
  border-color: rgba(250,250,250,.1);
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
}
body.inverted .cookie-refuse {
  border-color: rgba(250,250,250,.2);
}

/* ── Garantir que #digital respecte la hauteur auto-showcase ── */
#digital.dig-auto-section {
  height: 100vh !important;
  position: relative !important;
}

/* ═══════════════════════════════════════════════════════
   FILET DE SECURITE — si le JavaScript echoue
   Une erreur JS ne doit jamais laisser un ecran blanc :
   on revele tout le contenu et on retire le prechargeur.
═══════════════════════════════════════════════════════ */
html.js-failed #preloader { display: none !important; }
html.js-failed .rv { opacity: 1 !important; transform: none !important; }
html.js-failed .hero-title .line-inner { transform: none !important; }

/* ═══════════════════════════════════════════════════════
   ACCESSIBILITE — respect de prefers-reduced-motion
   Les visiteurs ayant demande a limiter les animations
   voient le site immediatement, sans mouvement.
═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.js .rv,
  html.js .rv.in {
    opacity: 1 !important;
    transform: none !important;
  }
  html.js .hero-title .line-inner,
  html.js .hero-title.go .line-inner {
    transform: none !important;
  }
  html.js #preloader { display: none !important; }
}

/* Le focus clavier doit rester visible partout (navigation au clavier) */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}

/* <picture> transparent pour la mise en page : l'<img> reste l'element
   flex de .hero-photo-wrap, la structure d'origine est preservee. */
.hero-picture { display: contents; }

/* Photo du hero : pas d'animation si le visiteur limite les mouvements */
@media (prefers-reduced-motion: reduce) {
  html.js .hero-photo,
  html.js body.photo-loaded .hero-photo {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Mention discrete "(facultatif)" dans les libelles de formulaire */
.fl-opt {
  opacity: .55;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Carte portfolio dont la video n'est pas encore fournie : on garde l'image
   d'affiche mais on retire l'icone de lecture, qui promettrait une video. */

/* ═══════════════════════════════════════════════════════
   CORRECTIF MOBILE DU HERO
   Une regle mobile correcte existait (.hero en une colonne sous 768px),
   mais la section « HERO — LAYOUT AMELIORE » plus bas dans cette feuille
   redefinissait « grid-template-columns: 1fr 360px » hors media query,
   donc a toutes les tailles d'ecran. Resultat : la colonne de 360px
   reservee a la photo etait conservee sur mobile alors que la photo y est
   masquee, comprimant le texte a 282px sur un ecran de 375px — le
   debordement passant inapercu a cause de body{overflow-x:hidden}.
   Ce bloc, place en fin de feuille, retablit la pleine largeur.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 0;
  }
}

/* ═══════════════════════════════════════════════════════
   BAS DU HERO — sous-titre au-dessus des boutons
   Le sous-titre et les deux boutons partageaient une meme rangee flex.
   Les boutons occupant 329px fixes, il ne restait que ~99px au texte, qui
   partait sur 7 lignes depuis que le sous-titre a ete rallonge. On empile
   les deux, comme le fait deja la version mobile.
   ═══════════════════════════════════════════════════════ */
.hero-bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.hero-sub {
  max-width: 46ch;
}

/* ═══════════════════════════════════════════════════════
   SECTION FORMATS — refonte
   ═══════════════════════════════════════════════════════ */

/* Baseline de l'en-tete. L'ancienne etait limitee a 180px, ce qui etait
   suffisant pour une phrase courte ; la nouvelle fait le double. */
.services-baseline {
  font-size: 12px;
  color: var(--ink2);
  max-width: 330px;
  text-align: right;
  line-height: 1.75;
}

/* Appel a l'action des cartes. Ce sont desormais des phrases entieres :
   une pastille de 8px en majuscules (l'ancien style .tag) les rendait
   illisibles. On passe en lien texte, en casse normale. */
.svc-cta {
  /* inline et non inline-flex : avec un flex, la fleche se detachait du
     texte des que l'appel a l'action passait sur deux lignes. */
  display: inline;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--acc);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.svc:hover .svc-cta { border-bottom-color: var(--acc); }
.svc:hover .svc-arrow { transform: translateX(4px); }

/* 4e partie : formats sur mesure. Une seule carte posee sous la grille
   des 3 formats signature : fond plus clair que la section, filet fin,
   coins arrondis. Deux colonnes metier separees par un filet vertical. */
.sur-mesure {
  margin-top: 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.sm-head {
  padding: 44px 32px 34px;
  border-bottom: 1px solid var(--line);
}
.sm-titre {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -.03em;
  line-height: .95;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 22px;
}
.sm-accroche {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink2);
  line-height: 1.75;
  max-width: 78ch;
  margin: 0;
}
.sm-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sm-col {
  padding: 32px;
  border-right: 1px solid var(--line);
}
.sm-col:last-child { border-right: 0; }
.sm-cat {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acc);
  margin: 0 0 20px;
}
.sm-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.sm-liste { list-style: none; padding: 0; margin: 0; }
.sm-liste li {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink2);
  line-height: 1.6;
  padding: 6px 0 6px 16px;
  position: relative;
}
.sm-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 1px;
  background: var(--acc);
}
/* CTA unique, centree sous la carte */
.sm-cta {
  margin-top: 28px;
  text-align: center;
}

@media (max-width: 768px) {
  .services-baseline { text-align: left; max-width: none; }
  .sm-head { padding: 32px 24px 26px; }
  .sm-cols { grid-template-columns: 1fr; }
  .sm-col { padding: 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sm-col:last-child { border-bottom: 0; }
}

/* Sous-titre de la section Realisations */
.portfolio-sub {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink2);
  line-height: 1.7;
  margin-top: 14px;
  max-width: 42ch;
}

/* ─── TELEPHONE : PAS DE MUR DE REELS ───
   Ces fonds doivent passer apres les blocs de theme, qui les repeignent
   en semi-opaque a specificite egale. Sans mur derriere, un fond voile
   n'a plus de sens : il ne laisse voir que la couleur du dessous. */
@media (max-width: 768px) {
  .hero { background: var(--bg); }
  .intro { background: var(--bg); }
  .services { background: var(--bg2); }
  .mq { background: var(--bg); }
  .portfolio-section { background: var(--bg); }
}

/* ─── A PROPOS : photo, version longue, parcours ─── */
.about-photo {
  display: block;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg3);
}
.about-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
  display: block;
}

/* Bouton « en savoir plus ». Sans JavaScript, la version longue reste
   visible et le bouton, inutile, n'est pas affiche. */
.apropos-plus { display: none; }
html.js .apropos-plus {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 4px;
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 40px;
  cursor: pointer;
  transition: border-color .25s, color .25s;
}
html.js .apropos-plus:hover { border-color: var(--acc); color: var(--acc); }
.apropos-plus-ico {
  font-size: 14px;
  line-height: 1;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.apropos-plus[aria-expanded="true"] .apropos-plus-ico { transform: rotate(45deg); }

/* Ouverture sans a-coup : la hauteur passe de 0 a sa valeur naturelle, le
   contenu situe dessous glisse au lieu de sauter. */
.apropos-long {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .55s cubic-bezier(.16,1,.3,1);
}
.apropos-long-inner { overflow: hidden; min-height: 0; }
html.js .apropos-long { grid-template-rows: 0fr; }
html.js .apropos-long.ouvert { grid-template-rows: 1fr; }
/* Replie, le texte ne doit pas rester atteignable au clavier. */
html.js .apropos-long:not(.ouvert) .apropos-long-inner {
  visibility: hidden;
  transition: visibility 0s .55s;
}
.apropos-long-inner > :first-child { margin-top: 18px; }
.apropos-t {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 24px 0 8px;
}

.parcours { margin-top: 36px; }
.parcours-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 0 0 14px;
}
/* Cinema et musique cote a cote : les deux periodes se chevauchent. */
.parcours-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
}
.parcours-duo .parcours-bloc + .parcours-bloc { border-left: 1px solid var(--line); }
.parcours > .parcours-bloc { border: 1px solid var(--line); border-top: 0; }
.parcours-bloc { padding: 16px 18px; }
.parcours-annees {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--acc);
  margin-bottom: 6px;
}
.parcours-t { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.parcours-d { font-size: 12px; color: var(--ink2); line-height: 1.65; margin: 0; }

@media (max-width: 900px) {
  .about-photo { max-width: none; aspect-ratio: 4 / 3; margin-bottom: 8px; }
}
@media (max-width: 560px) {
  .parcours-duo { grid-template-columns: 1fr; }
  .parcours-duo .parcours-bloc + .parcours-bloc { border-left: 0; border-top: 1px solid var(--line); }
}

/* ─── CARTES FORMATS SIGNATURE : video en fond ───
   Une boucle discrete derriere le texte. Le voile reprend la couleur du
   theme pour que le texte reste lisible en clair comme en sombre. */
.svc-avec-fond {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.svc-fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.svc-fond-vid {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: .2;
  filter: saturate(.8);
  transition: opacity .5s ease;
}
.svc-fond::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(var(--halo), .55) 0%,
              rgba(var(--halo), .78) 45%,
              rgba(var(--halo), .9) 100%);
}
.svc-avec-fond:hover .svc-fond-vid,
.svc-avec-fond:focus-visible .svc-fond-vid { opacity: .34; }

@media (prefers-reduced-motion: reduce) {
  .svc-fond-vid { transition: none; }
}

/* ─── PAGES FORMATS : promesse, preuve, process, tarifs ─── */
.svc-obtenez {
  font-family: var(--serif);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--ink);
  margin: 18px 0 0;
}

.preuves { margin: 36px 0 40px; }
.preuves .s-label { margin-bottom: 14px; }
.preuves-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.preuve-carte {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg3);
  font: inherit;
  color: #fff;
  text-align: left;
}
.preuve-carte img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.preuve-carte:hover img { transform: scale(1.04); }
.preuve-carte::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,15,15,.78) 0%, transparent 55%);
  pointer-events: none;
}
.preuve-lecture {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(250,250,250,.92);
  color: #212121;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.preuve-lecture svg { margin-left: 3px; }
.preuve-carte:hover .preuve-lecture { transform: translate(-50%, -50%) scale(1.1); }
.preuve-legende {
  position: absolute;
  left: 12px; right: 12px; bottom: 11px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: rgba(250,250,250,.75);
}
.preuve-legende b {
  display: block;
  font-size: 12px;
  letter-spacing: 0;
  color: #fff;
  margin-bottom: 2px;
}
.preuve-carte iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  z-index: 3;
}
.preuve-lue::after,
.preuve-lue .preuve-lecture,
.preuve-lue .preuve-legende { display: none; }

.svc-process-intro {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
  padding: 0 0 18px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.svc-tarifs {
  padding: 72px 48px 88px;
  background: var(--bg2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.svc-tarifs-inner { max-width: 1100px; margin: 0 auto; }
.svc-transition {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 24ch;
  margin: 0 0 40px;
}
.svc-tarifs-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.svc-tarifs-seul { grid-template-columns: minmax(0, 560px); }
.svc-tarifs .svc-prices,
.svc-pack {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px 28px 24px;
}
.svc-prix-mention {
  font-size: 13px;
  color: var(--ink);
  margin: 0 0 10px;
}
.svc-options-titre {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 26px 0 10px;
}
.svc-liste { list-style: none; padding: 0; margin: 0; }
.svc-liste li {
  position: relative;
  padding: 6px 0 6px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink2);
}
.svc-liste li::before {
  content: '';
  position: absolute;
  left: 0; top: 15px;
  width: 6px; height: 1px;
  background: var(--acc);
}
.svc-options-note,
.svc-pack-intro {
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink3);
  margin: 12px 0 0;
}
.svc-pack-intro { color: var(--ink2); margin: 0 0 10px; }
.svc-pack-prix {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acc);
  margin: 18px 0 0;
}
.svc-tarifs .svc-cta-block { margin-top: 28px; }

@media (max-width: 768px) {
  .svc-tarifs { padding: 56px 20px 64px; }
  .svc-tarifs-grille,
  .svc-tarifs-seul { grid-template-columns: 1fr; }
}

/* ─── FILTRES PAR SECTEUR (portfolio et photographie) ─── */
.secteurs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.secteur-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px;
  color: var(--ink2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 40px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.secteur-btn:hover { color: var(--ink); border-color: var(--ink3); }
.secteur-btn.actif { color: var(--bg); background: var(--ink); border-color: var(--ink); }
/* Les cartes et grilles fixent leur propre display : l'attribut hidden doit
   l'emporter pour que le filtre masque vraiment. */
.secteurs[hidden],
.yt-card[hidden], .yt-grid[hidden], .yt-sub[hidden],
.ph-item[hidden] { display: none !important; }

/* ─── BASCULE CLAIR / SOMBRE : le diaphragme ─── */
nav .nav-links { margin-left: auto; }
.theme-iris {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 12px;
  padding: 5px 11px 5px 6px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 40px;
  cursor: pointer;
  transition: border-color .25s, color .25s;
}
.theme-iris:hover { border-color: var(--acc); color: var(--acc); }
.theme-iris:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.iris { width: 22px; height: 22px; display: block; overflow: visible; }
.iris-bague { fill: none; stroke: currentColor; stroke-width: 1.3; }
.iris-disque { fill: currentColor; }
.iris-trou { fill: var(--bg); }
.iris-lames line { stroke: var(--bg); stroke-width: 1.1; stroke-linecap: round; }
/* Fermer le diaphragme : les lames tournent et resserrent l'ouverture. */
.iris-lames {
  transform-origin: 16px 16px;
  transition: transform .7s cubic-bezier(.7, 0, .3, 1);
}
body.inverted .iris-lames { transform: rotate(30deg) scale(.42); }
.iris-f {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  min-width: 3.4em;
  text-align: left;
}

@media (max-width: 768px) {
  .theme-iris { margin-left: auto; margin-right: 10px; padding: 5px; }
  .iris-f { display: none; }
}

/* Fondu de bascule : pendant que le voile couvre la page, les transitions
   de couleur habituelles sont suspendues, pour que la page reapparaisse
   directement dans son nouveau theme. */
html.theme-bascule body,
html.theme-bascule body * { transition: none !important; }

/* Voile plein ecran pose par samo-theme.js, de la couleur du theme vise. */
.fondu-theme {
  position: fixed;
  inset: 0;
  z-index: 99990;
  pointer-events: none;
  opacity: 0;
}

/* Contraste en mode sombre : le badge « Evenement » garde un bleu lisible. */
body.inverted .mb-e {
  color: #9cc8e6;
  background: rgba(127,179,211,.12);
  border-color: rgba(127,179,211,.32);
}