/* ════════════════════════════════════
   BASE
════════════════════════════════════ */
:root {
  --bg:        #0B1018;
  --bg-2:      #0F1622;
  --bg-3:      #131B2A;
  --line:      rgba(255,255,255,.08);
  --line-soft: rgba(255,255,255,.04);
  --txt:       #ffffff;
  --txt-soft:  rgba(255,255,255,.55);
  --txt-mute:  rgba(255,255,255,.32);
  --blue:      #4F7CFF;
  --blue-dk:   #2855D4;
  --gray:      #8896B0;
  --border:    #1E2D47;
  --ease:      cubic-bezier(.4,0,.2,1);
  --skew:      -18deg;   /* angle parallélogramme */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-weight: 400;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 3rem; }


/* ════════════════════════════════════
   TYPO — tout sauf le HERO en Poppins
   (sans-serif géométrique façon Futura).
   Le HERO (.hero) garde ses polices
   d'origine : Cormorant / Bebas / Inter.
════════════════════════════════════ */
.tagline-bar,        .tagline-bar *,
.mission,            .mission *,
.services,           .services *,
.projets-section,    .projets-section *,
.offres,             .offres *,
.clients-section,    .clients-section *,
.testimonial-section,.testimonial-section *,
.contact,            .contact *,
.footer,             .footer * {
  font-family: 'Poppins', sans-serif !important;
}


/* ════════════════════════════════════
   HERO
════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  background: #060A12;
  overflow: hidden;
  isolation: isolate;
  display: flex;
}

/* ════════════════════════════════════
   KEYFRAMES PICTOS — défilement infini
════════════════════════════════════ */
@keyframes driftDown {
  from { transform: translateY(0); }
  to   { transform: translateY(95vh); }
}
@keyframes driftUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-95vh); }
}
@keyframes driftDownSlow {
  from { transform: translateY(0); }
  to   { transform: translateY(80vh); }
}

/* ── PICTOS — bande gauche entre sidebar et 1er panneau ── */
.pictos {
  position: absolute;
  top: 0; bottom: 0;
  left: 360px;
  width: 240px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.pi {
  position: absolute;
  font-family: 'Cormorant Garamond', serif;
  color: rgba(255,255,255,.45);
  user-select: none;
  font-style: italic;
  text-shadow: 0 0 6px rgba(0,0,0,.4);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ── Positions horizontales + taille + animation individuelle ── */
/* Certains montent, d'autres descendent, vitesses variées = effet de profondeur */
.pi-1  { top: 8%;  left: 30%; font-size: 14px; opacity: .55;
          animation: driftDown 26s linear infinite; animation-delay: -5s; }
.pi-2  { top: 12%; left: 60%; font-size: 24px; opacity: .5;
          animation: driftUp   14s linear infinite; animation-delay: -8s; }
.pi-3  { top: 18%; left: 18%; font-size: 22px; opacity: .45; letter-spacing: .2em;
          animation: driftDown 33s linear infinite; animation-delay: -12s; }
.pi-4  { top: 24%; left: 70%; font-size: 28px; opacity: .4;
          animation: driftUp   11s linear infinite; animation-delay: -4s; }
.pi-5  { top: 30%; left: 32%; font-size: 10px; opacity: .65;
          animation: driftDown 16s linear infinite; animation-delay: -7s; }
.pi-6  { top: 35%; left: 80%; font-size: 18px; opacity: .4;
          animation: driftUp   29s linear infinite; animation-delay: -15s; }
.pi-7  { top: 42%; left: 24%; font-size: 12px; opacity: .55;
          animation: driftDown 22s linear infinite; animation-delay: -9s; }
.pi-8  { top: 48%; left: 65%; font-size: 22px; opacity: .4;
          animation: driftUp   13s linear infinite; animation-delay: -6s; }
.pi-9  { top: 55%; left: 15%; font-size: 26px; opacity: .45; font-weight: 700;
          animation: driftDown 18s linear infinite; animation-delay: -3s; }
.pi-10 { top: 62%; left: 55%; font-size: 30px; opacity: .4;
          animation: driftUp   31s linear infinite; animation-delay: -18s; }
.pi-11 { top: 70%; left: 30%; font-size: 12px; opacity: .55;
          animation: driftDown 24s linear infinite; animation-delay: -11s; }
.pi-12 { top: 76%; left: 70%; font-size: 22px; opacity: .4; letter-spacing: .15em;
          animation: driftUp   15s linear infinite; animation-delay: -7s; }
.pi-13 { top: 82%; left: 20%; font-size: 10px; opacity: .6;
          animation: driftDown 20s linear infinite; animation-delay: -14s; }
.pi-14 { top: 20%; left: 85%; font-size: 16px; opacity: .4;
          animation: driftUp   12s linear infinite; animation-delay: -5s; }
.pi-15 { top: 50%; left: 40%; font-size: 24px; opacity: .4;
          animation: driftDown 36s linear infinite; animation-delay: -20s; }
.pi-16 { top: 14%; left: 78%; font-size: 12px; opacity: .55;
          animation: driftUp   17s linear infinite; animation-delay: -8s; }
.pi-17 { top: 38%; left: 50%; font-size: 28px; opacity: .4; letter-spacing: .2em;
          animation: driftDown 28s linear infinite; animation-delay: -16s; }
.pi-18 { top: 66%; left: 78%; font-size: 11px; opacity: .55;
          animation: driftUp   23s linear infinite; animation-delay: -10s; }
.pi-19 { top: 26%; left: 40%; font-size: 16px; opacity: .45;
          animation: driftDown 13s linear infinite; animation-delay: -3s; }
.pi-20 { top: 88%; left: 50%; font-size: 13px; opacity: .55;
          animation: driftUp   19s linear infinite; animation-delay: -12s; }

/* Cercles en pointillés — défilement très lent */
.dot-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px dotted rgba(255,255,255,.25);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.dc-1 { top: 18%; left: 30%; width: 130px; height: 130px;
         animation: driftDownSlow 46s linear infinite; animation-delay: -22s; }
.dc-2 { top: 55%; left: 50%; width: 85px;  height: 85px; border-style: dashed; opacity: .5;
         animation: driftUp       38s linear infinite; animation-delay: -15s; }
.dc-3 { top: 72%; left: 25%; width: 65px;  height: 65px; opacity: .6;
         animation: driftDownSlow 53s linear infinite; animation-delay: -30s; }


/* ════════════════════════════════════
   TOP BAR — transparente, apparaît au scroll
════════════════════════════════════ */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  height: 70px;
  display: flex;
  align-items: center;
  /* Logo à gauche, puis nav, puis icônes, puis CTA */
  padding: 0 2.5rem;
  gap: 2rem;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), backdrop-filter .35s, border-color .35s;
}
.top-bar.scrolled {
  height: 56px;
  background: rgba(11, 16, 24, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255,255,255,.06);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

/* Logo dans le header */
.top-bar-logo {
  display: flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  margin-right: auto;           /* pousse tout le reste vers la droite */
  flex-shrink: 0;
}
.top-bar-logo img {
  height: 28px;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(79,124,255,.25));
}
.top-bar-logo-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: .03em;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
/* (scrolled déjà défini plus haut) */
.top-nav {
  display: flex;
  gap: 2.5rem;
  margin-right: auto;
}
.top-nav a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(255,255,255,.8);
  transition: color .25s;
  padding: .3rem 0;
  position: relative;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.top-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--txt);
  transition: width .3s var(--ease);
}
.top-nav a:hover, .top-nav a.active { color: var(--txt); }
.top-nav a:hover::after, .top-nav a.active::after { width: 100%; }

.top-mid { display: flex; gap: 1rem; }
.top-social {
  display: flex; align-items: center;
  color: rgba(255,255,255,.7);
  transition: color .2s, transform .2s;
}
.top-social:hover { color: var(--txt); transform: translateY(-1px); }

.top-cta {
  display: flex; align-items: center;
  text-align: right;
  padding-left: 1.5rem;
}
.top-cta-text { display: flex; flex-direction: column; line-height: 1.25; }
.top-cta-main {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--txt);
  display: flex; align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.top-cta-arrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--txt);
  font-weight: 300;
  transition: transform .25s var(--ease);
  line-height: 1;
  margin-left: .25em;
}
.top-cta:hover .top-cta-arrow { transform: translateX(4px); color: var(--blue); }
.top-cta-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  margin-top: 3px;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* Bouton menu (hamburger) — masqué sur desktop, affiché sur mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px; height: 38px;
  margin-left: .4rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 31;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .25s;
}
.top-bar.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.top-bar.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.top-bar.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Décalage d'ancre pour ne pas masquer le titre sous le header fixe */
section[id] { scroll-margin-top: 72px; }


/* ════════════════════════════════════
   SIDEBAR — Brand
════════════════════════════════════ */
.brand-side {
  position: relative;
  z-index: 20;
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem 2.5rem 5rem 3.5rem;
  gap: 3rem;
}

.brand-block { }
.brand-mark {
  height: 56px; width: auto;
  margin-bottom: .5rem;
  margin-left: -8px; /* aligner visuellement avec le texte */
  filter: drop-shadow(0 0 12px rgba(79,124,255,.2));
}
.brand-name {
  font-family: 'Cormorant Garamond', serif;
  display: flex;
  flex-direction: column;
  line-height: .9;
  margin-bottom: 1.25rem;
}
.brand-name span {
  font-style: italic;
  font-weight: 400;
  font-size: 2rem;
  color: var(--txt);
  letter-spacing: .04em;
  margin-bottom: .15rem;
}
.brand-name strong {
  font-weight: 600;
  font-size: 5.5rem;
  color: var(--txt);
  letter-spacing: .03em;
  line-height: .85;
  margin-left: -3px;
}

/* Décoration typo sous le logo (comme Luiz Argenta) */
.brand-deco {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: rgba(255,255,255,.45);
  letter-spacing: .04em;
}
.brand-deco span { line-height: 1; }

.brand-author {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--txt-mute);
  letter-spacing: .04em;
}

/* Nav — liens de la sidebar */
.brand-nav {
  display: flex;
  flex-direction: column;
}
.brand-nav a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color .25s, padding-left .25s;
  position: relative;
}
.brand-nav a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 0; height: 1px;
  background: var(--blue);
  transition: width .25s var(--ease);
}
.brand-nav a:hover,
.brand-nav a.active {
  color: var(--txt);
  padding-left: 1rem;
}
.brand-nav a:hover::before,
.brand-nav a.active::before { width: 14px; }

/* Entrée échelonnée des liens (ils arrivent un par un au chargement) */
@keyframes brandNavIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.brand-nav a { opacity: 0; animation: brandNavIn .55s var(--ease) both; }
.brand-nav a:nth-child(1) { animation-delay: .25s; }
.brand-nav a:nth-child(2) { animation-delay: .38s; }
.brand-nav a:nth-child(3) { animation-delay: .51s; }
.brand-nav a:nth-child(4) { animation-delay: .64s; }
.brand-nav a:nth-child(5) { animation-delay: .77s; }
.brand-nav a:nth-child(6) { animation-delay: .90s; }
@media (prefers-reduced-motion: reduce) {
  .brand-nav a { animation: none; opacity: 1; }
}


/* ════════════════════════════════════
   3 PANNEAUX GRANDS — Vrais parallélogrammes (skewX), montent jusqu'en haut
════════════════════════════════════ */
.panels {
  position: relative;
  flex: 1;
  height: 100%;
  z-index: 5;
  overflow: hidden;
}

/* Parallélogrammes via CLIP-PATH (plus simple, pas de débordement) */
.panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  cursor: pointer;
  overflow: hidden;
  /* TRUE parallelogram — top décalé droite, bottom décalé gauche */
  clip-path: polygon(28% 0, 100% 0, 72% 100%, 0 100%);
  transition: transform .5s var(--ease);
}

/* Positions : poussés à droite, espacés régulièrement */
.panel--1 { left: 8%;   z-index: 3; }
.panel--2 { left: 32%;  z-index: 2; }
.panel--3 { left: 56%;  z-index: 1; }

/* Wrapper interne devient juste un container (plus de skew) */
.panel-inner-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Image fixe (poster) — remplit TOUT le parallélogramme */
.panel-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity .6s, transform 1s var(--ease), filter .6s;
  /* Désaturé et un peu sombre, mais on voit le contenu */
  filter: grayscale(.4) brightness(.7) contrast(1.05);
  z-index: 1;
}
.panel:hover .panel-bg { opacity: 0; }

/* Vidéo — remplit TOUT le parallélogramme */
.panel-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s var(--ease), transform 1s var(--ease);
  z-index: 1;
}
.panel:hover .panel-video { opacity: 1; transform: scale(1.04); }

/* Voile sombre — gradient centré sur la zone des labels (bottom 28-55%) */
.panel-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgba(6,10,18,.0)  0%,
      rgba(6,10,18,.1)  30%,
      rgba(6,10,18,.55) 55%,
      rgba(6,10,18,.82) 72%,
      rgba(6,10,18,.95) 100%
    );
  transition: opacity .5s;
}
.panel:hover .panel-shade { opacity: .5; }

/* Effet vitre — reflet diagonal + highlight en haut */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    /* Highlight blanc fin en haut (effet bord de verre éclairé) */
    linear-gradient(180deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.05) 1.5%,
      transparent 4%,
      transparent 100%
    ),
    /* Reflet diagonal */
    linear-gradient(115deg,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,.04) 20%,
      transparent 42%,
      transparent 75%,
      rgba(0,0,0,.25) 100%
    );
  mix-blend-mode: overlay;
  opacity: .95;
  transition: opacity .5s;
}
.panel:hover::before { opacity: .5; }

/* État ACTIF — piloté par JS pour la séquence auto sur mobile (mêmes effets que le hover) */
.panel.is-active .panel-bg     { opacity: 0; }
.panel.is-active .panel-video  { opacity: 1; transform: scale(1.04); }
.panel.is-active .panel-shade  { opacity: .5; }
.panel.is-active::before       { opacity: .5; }

/* ── LABELS — Positionnés DANS le parallélogramme (pas en bas) ── */
.labels {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.label {
  position: absolute;
  /*
    On remonte à 28% depuis le bas :
    à ce niveau, chaque panneau (clip-path polygon) est encore
    largement ouvert — on est bien à l'intérieur des parallélogrammes.
    bottom: 6rem était trop bas (zone où les panneaux se rétrécissent)
    et les labels tombaient sur le fond nu entre les panneaux.
  */
  bottom: 28%;
  width: 220px;
  text-align: left;
  pointer-events: auto;
  cursor: pointer;
  transition: transform .35s var(--ease);
  transform: translateX(-50%);
  text-decoration: none;
  display: block;
}
.label:hover { transform: translateX(-50%) translateY(-4px); }

/*
  Centres visuels des zones VISIBLES (après chevauchement des panneaux) :
  Panel 1 (z:3) visible : ~11% → 36%  → centre ~23%
  Panel 2 (z:2) visible : ~36% → 60%  → centre ~48%
  Panel 3 (z:1) visible : ~60% → 84%  → centre ~72%

  IMPORTANT — label--3 :
  width:220px + left:70% = bord gauche à ~61% (trop proche de panel 2).
  On le décale à left:78% → bord gauche à ~68%, bien dans la zone de panel 3.
  Pour label--3 on aligne à gauche avec transform: none pour ne pas
  déborder à gauche dans les panneaux adjacents.
*/
.label--1 { left: 22%; }
.label--2 { left: 48%; }
/* label--3 : ancré à gauche (transform:none) pour ne pas déborder sur panel 2 */
.label--3 { left: 64%; transform: none; }
.label--3:hover { transform: translateY(-4px); }

.label-title {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 1.7vw, 1.85rem);
  color: var(--txt);
  letter-spacing: .1em;
  line-height: 1;
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.8);
}
.label-arrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 1.15em;
  font-weight: 300;
  color: var(--txt);
  line-height: 1;
  transition: transform .3s var(--ease), color .3s;
  opacity: .85;
  margin-left: .3em;
}
.label:hover .label-arrow {
  transform: translateX(8px);
  color: var(--blue);
  opacity: 1;
}

.label-desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
  text-shadow: 0 2px 10px rgba(0,0,0,.85);
  letter-spacing: .01em;
}


/* ════════════════════════════════════
   TAGLINE BAR — défilement infini
════════════════════════════════════ */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tagline-bar {
  overflow: hidden;
  background: var(--bg-3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
}
.tagline-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 18s linear infinite;
  white-space: nowrap;
}
.tagline-track span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .25em;
  color: rgba(255,255,255,.55);
}
.tagline-dot {
  color: var(--blue) !important;
  font-size: .7rem !important;
  opacity: .8;
  vertical-align: middle;
}


/* ════════════════════════════════════
   MISSION
════════════════════════════════════ */
.mission { padding: 5rem 0; background: var(--bg); }
.mission-inner {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 5rem; align-items: center;
}


/* ════════════════════════════════════
   SERVICES — grille 4 colonnes
════════════════════════════════════ */
.services-grid--4 { grid-template-columns: repeat(4, 1fr); }
.service-card { text-decoration: none; display: flex; flex-direction: column; }
.service-link {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); margin-top: auto; padding-top: 1rem;
  transition: gap .3s var(--ease);
  display: flex; align-items: center; gap: .35rem;
}
/* La flèche est un élément à part : sans ça le `gap` n'a aucun effet (un seul item flex). */
.service-arrow { transition: transform .3s var(--ease); }
.service-card:hover .service-link { gap: .6rem; }
.service-card:hover .service-arrow { transform: translateX(3px); }


/* ════════════════════════════════════
   PROJETS MOSAIC
════════════════════════════════════ */
.projets-section {
  padding: 7rem 0; background: var(--bg-2);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.projets-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 215px;
  gap: 1rem;
}
/* mosaïque asymétrique : 1 grande mise en avant + formats variés */
.projet-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.projet-item:nth-child(2) { grid-column: span 2; }
.projet-item:nth-child(5) { grid-column: span 2; }
.projet-item:nth-child(6) { grid-column: span 2; }
.projet-item {
  position: relative; overflow: hidden; border-radius: 10px;
  background: var(--bg-3); border: 1px solid var(--border);
}
.projet-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease), filter .4s;
  filter: grayscale(.12) brightness(.9);
}
.projet-item:hover img { transform: scale(1.05); filter: grayscale(0) brightness(1); }
.projet-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6,10,18,.88) 100%);
  display: flex; align-items: flex-end; padding: 1.15rem 1.25rem;
  opacity: 1;
}
.projet-overlay span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
  background: rgba(79,124,255,.9);
  padding: .3rem .72rem; border-radius: 5px;
  transform: translateY(6px); opacity: .9;
  transition: transform .35s var(--ease), opacity .35s;
}
.projet-item:hover .projet-overlay span { transform: translateY(0); opacity: 1; }
.projet-item:nth-child(1) .projet-overlay span { font-size: 12px; padding: .4rem .9rem; }


/* ── Projets : cartes cliquables (refonte) ── */
.projets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.projet-card {
  display: flex; flex-direction: column;
  text-decoration: none;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.projet-card:hover {
  transform: translateY(-6px);
  border-color: rgba(79,124,255,.5);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.projet-card-media { aspect-ratio: 4 / 3; overflow: hidden; }
.projet-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.12) brightness(.92);
  transition: transform .6s var(--ease), filter .4s;
}
.projet-card:hover .projet-card-media img { transform: scale(1.06); filter: grayscale(0) brightness(1); }
.projet-card-body { padding: 1.25rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.projet-card-cat {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--blue);
}
.projet-card-title { font-size: 1.15rem; color: var(--txt); margin: 0; }
.projet-card-desc { font-size: 13px; line-height: 1.65; color: var(--gray); margin: 0; }
.projet-card-link {
  margin-top: auto; padding-top: .5rem;
  font-size: 12.5px; font-weight: 600; letter-spacing: .03em; color: var(--txt);
  display: inline-flex; align-items: center; gap: .4rem;
  transition: gap .25s, color .25s;
}
.projet-card:hover .projet-card-link { gap: .7rem; color: var(--blue); }
@media (max-width: 980px) { .projets-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .projets-grid { grid-template-columns: 1fr; } }

/* ── Projets : carrés pleine largeur, collés, sans contour (full-bleed) ── */
.projets-fullgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
}
.projet-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  text-decoration: none;
}
.projet-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.12) brightness(.72);
  transition: transform .7s var(--ease), filter .5s;
}
.projet-tile:hover img { transform: scale(1.06); filter: grayscale(0) brightness(.95); }
.projet-tile-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.7rem 1.7rem 1.5rem;
  background: linear-gradient(180deg, transparent 40%, rgba(6,10,18,.85) 100%);
  z-index: 2;
}
.projet-tile-cat {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); margin-bottom: .4rem;
}
.projet-tile-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: 1.55rem; line-height: 1.1; color: #fff;
}
.projet-tile-link {
  margin-top: .55rem; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: #fff;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.projet-tile:hover .projet-tile-link { opacity: 1; transform: none; }
@media (max-width: 860px) { .projets-fullgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .projet-tile-title { font-size: 1.25rem; } .projet-tile-overlay { padding: 1.2rem; } }


/* ── Projets : accordéon horizontal (panneaux qui s'ouvrent au survol) ── */
.projets-accordion {
  display: flex;
  gap: 8px;
  height: 470px;
  width: 100%;
}
.projet-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  background: var(--bg-3);
  transition: flex-grow .55s var(--ease);
}
.projet-panel.is-open { flex-grow: 5.4; }

.projet-panel-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.25) brightness(.46);
  transform: scale(1.03);
  transition: filter .6s var(--ease), transform .9s var(--ease);
}
.projet-panel.is-open .projet-panel-img { filter: grayscale(0) brightness(.72); transform: scale(1); }

.projet-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,10,18,.10) 0%, rgba(6,10,18,.55) 55%, rgba(6,10,18,.88) 100%);
}

/* Libellé vertical — état replié */
.projet-panel-label {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 1.5rem 1.2rem;
  font-size: 13px; font-weight: 600; letter-spacing: .05em;
  color: #fff; white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
  transition: opacity .3s var(--ease);
}
.projet-panel.is-open .projet-panel-label { opacity: 0; }

/* Contenu — état ouvert */
.projet-panel-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column;
  padding: 2rem 2rem 1.8rem;
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.projet-panel.is-open .projet-panel-content {
  opacity: 1; transform: none; transition-delay: .14s; pointer-events: auto;
}
.projet-panel-cat {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); margin-bottom: .55rem; white-space: nowrap;
}
.projet-panel-title {
  font-size: 1.65rem; font-weight: 600; line-height: 1.1; color: #fff;
  white-space: nowrap;
}
.projet-panel-desc {
  margin-top: .75rem; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.8);
  max-width: 360px;
}
.projet-panel-link {
  margin-top: 1.2rem; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #fff; white-space: nowrap;
  padding: .62rem 1.2rem; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.07);
  transition: background .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.projet-panel-link:hover { background: var(--blue); border-color: var(--blue); gap: .8rem; }

/* Mobile / tablette : carrousel horizontal à swipe (au lieu d'une longue pile) */
@media (max-width: 900px) {
  .projets-accordion {
    flex-direction: row; height: auto; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 4px 2px 16px; scroll-padding: 0 8%; scrollbar-width: none;
  }
  .projets-accordion::-webkit-scrollbar { display: none; }
  .projet-panel, .projet-panel.is-open {
    flex: 0 0 82%; height: 370px; scroll-snap-align: center;
    box-shadow: 0 16px 38px rgba(0,0,0,.45);
  }
  .projet-panel-img { filter: grayscale(0) brightness(.55); transform: none; }
  .projet-panel-label { display: none; }
  .projet-panel-content { opacity: 1; transform: none; pointer-events: auto; padding: 1.5rem 1.4rem 1.4rem; }
  .projet-panel-title { white-space: normal; font-size: 1.4rem; }
  .projet-panel-desc { display: block; margin-top: .6rem; font-size: 12.5px; }
  .projets-stage .pv-swipe-hint { display: flex; }
}
@media (min-width: 901px) { .projets-stage .pv-swipe-hint { display: none; } }

/* ── Projets : bandeau de pictos défilant DERRIÈRE l'accordéon ── */
.projets-stage { position: relative; }
.projets-accordion { position: relative; z-index: 1; }
.projets-ticker {
  position: absolute;
  top: 72%; left: 50%;
  width: 100vw; height: 160px;
  transform: translate(-50%, -50%);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.projets-ticker-track { position: absolute; inset: 0; }
.tk {
  position: absolute; left: 0;
  display: inline-block; line-height: 1;
  color: rgba(160, 176, 204, 1); font-size: 1.4rem;
  animation-name: tickerDrift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.tk--diamond img { width: 1.15em; height: auto; display: block; }
@keyframes tickerDrift {
  from { transform: translateX(-90px) rotate(var(--rot, 0deg)); }
  to   { transform: translateX(calc(100vw + 60px)) rotate(var(--rot, 0deg)); }
}

/* Ticker pictos : visible aussi en mobile (masqué seulement si reduced-motion) */
@media (prefers-reduced-motion: reduce) { .projets-ticker { display: none; } }


/* ════════════════════════════════════
   SECTIONS COMMUNES
════════════════════════════════════ */
.section-tag {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 1.25rem;
}
.section-tag::before {
  content: ''; width: 24px; height: 1px; background: var(--blue); display: block;
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 3.5vw, 3.25rem);
  font-weight: 500; line-height: 1.15;
  color: var(--txt); margin-bottom: 3rem;
  letter-spacing: -.01em;
}
.section-title em { font-style: italic; color: var(--blue); font-weight: 600; }


/* ════════════════════════════════════
   ABOUT
════════════════════════════════════ */
.about { padding: 8rem 0; background: var(--bg); }
.about-inner {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 5rem; align-items: center;
}
.about-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 3.5vw, 3.5rem);
  font-weight: 500; line-height: 1.15; color: var(--txt); margin-bottom: 1.5rem;
}
.about-title em { font-style: italic; color: var(--blue); font-weight: 600; }
.about-text { font-size: 15px; color: var(--gray); line-height: 1.85; margin-bottom: 2rem; }
.about-zones { display: flex; flex-wrap: wrap; gap: .4rem .65rem; }
.about-zones span {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--txt-soft); padding: .25rem .75rem;
  border: 1px solid var(--border); border-radius: 100px;
}
.about-stats {
  display: flex; flex-direction: column; gap: 2.5rem;
  padding-left: 3rem; border-left: 1px solid var(--border);
}
.stat-n {
  display: block; font-family: 'Cormorant Garamond', serif;
  font-weight: 500; font-size: 4.5rem; color: var(--txt); line-height: 1;
}
.stat-l { font-size: 12px; color: var(--gray); line-height: 1.55; }


/* ════════════════════════════════════
   MISSION — version éditoriale (« about us »)
════════════════════════════════════ */
.about-ed {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  column-gap: 4.5rem;
  align-items: stretch;
  z-index: 1;
}
.about-ed-col { display: flex; flex-direction: column; gap: 2.2rem; min-width: 0; }

/* Mot en filigrane derrière le titre */
.about-ed-ghost {
  position: absolute;
  top: -3rem; left: -.4rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(4rem, 12vw, 12rem);
  font-weight: 600; line-height: 1;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--txt); opacity: .05;
  pointer-events: none; user-select: none; z-index: 0;
}

/* Grand numéro géant en fond */
.about-ed-num {
  position: absolute;
  top: 52%; left: 50%;
  transform: translate(-50%, -42%);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(13rem, 36vw, 36rem);
  font-weight: 500; line-height: .8;
  color: var(--txt); opacity: .04;
  pointer-events: none; user-select: none; z-index: 0;
}

.about-ed-head { position: relative; z-index: 2; padding-top: .5rem; }
.about-ed-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 3.5vw, 3.3rem);
  font-weight: 500; line-height: 1.1; color: var(--txt);
  margin-top: .9rem;
}
.about-ed-title em { font-style: italic; color: var(--blue); font-weight: 600; }

/* Images éditoriales */
.about-ed-img {
  position: relative; z-index: 1; margin: 0;
  overflow: hidden; border-radius: 5px;
  box-shadow: 0 24px 50px rgba(0,0,0,.4);
}
.about-ed-img img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.about-ed-img:hover img { transform: scale(1.05); }
.about-ed-img::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(255,255,255,.08); border-radius: 5px;
  pointer-events: none;
}
.about-ed-img--main { flex: 1 1 auto; min-height: 250px; }
.about-ed-img--sub  { aspect-ratio: 16 / 10; }

/* Colonne de texte */
.about-ed-text { position: relative; z-index: 2; }
.about-ed-cols {
  column-width: 14rem; column-gap: 2.4rem;
  font-size: 14.5px; color: var(--gray); line-height: 1.75;
}
.about-ed-cols p { margin: 0 0 1rem; break-inside: avoid; }

.about-ed .about-stats {
  flex-direction: row; flex-wrap: wrap; gap: 1.3rem 2.4rem;
  border-left: none; padding-left: 0;
  margin-top: 1.5rem; padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}
.about-ed .stat-n { font-size: 2.2rem; }

.about-ed-link {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.3rem;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt); text-decoration: none;
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.about-ed-link span { color: var(--blue); transition: transform .3s var(--ease); }
.about-ed-link:hover { color: var(--blue); gap: .9rem; }
.about-ed-link:hover span { transform: translateX(4px); }

@media (max-width: 900px) {
  .about-ed { grid-template-columns: 1fr; row-gap: 2.4rem; }
  .about-ed-col { gap: 2.4rem; }
  .about-ed-img--main { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .about-ed-cols { column-width: auto; columns: 1; }
  .about-ed-ghost { font-size: clamp(3rem, 17vw, 6rem); top: -1.6rem; }
  .about-ed-num {
    font-size: clamp(9rem, 46vw, 18rem);
    transform: translate(-50%, -50%); opacity: .045;
  }
}


/* ════════════════════════════════════
   INTRO D'ACCUEIL (PC uniquement)
════════════════════════════════════ */
.intro {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: grid; place-items: center;
  overflow: hidden;
  animation: introOut .75s var(--ease) 1.85s forwards;
}
.intro::before {
  content: ""; position: absolute;
  width: 65vmax; height: 65vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,124,255,.12), transparent 62%);
  opacity: 0; animation: introHalo 2s ease .2s forwards;
  pointer-events: none;
}
.intro-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1.15rem;
  text-align: center;
}
.intro-logo {
  width: 94px; height: auto;
  opacity: 0; transform: translateY(16px) scale(.9);
  animation: introUp .9s var(--ease) .15s forwards;
}
.intro-name {
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: 1.75rem; color: var(--txt);
  opacity: 0; transform: translateY(14px);
  animation: introUp .9s var(--ease) .42s forwards;
}
.intro-line {
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  animation: introLine 1s var(--ease) .8s forwards;
}
.intro-tag {
  font-family: 'Poppins', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: .42em; text-transform: uppercase;
  color: var(--gray); opacity: 0;
  animation: introTag .8s ease 1.05s forwards;
}
@keyframes introUp   { to { opacity: 1; transform: none; } }
@keyframes introLine { to { width: 190px; } }
@keyframes introTag  { to { opacity: 1; } }
@keyframes introHalo { to { opacity: 1; } }
@keyframes introOut  { to { opacity: 0; visibility: hidden; transform: translateY(-24px); } }

/* Ne pas jouer : mobile, reduced-motion, ou déjà vu cette session */
.intro-skip .intro { display: none !important; }


/* ════════════════════════════════════
   SERVICES
════════════════════════════════════ */
.services {
  padding: 5rem 0; background: var(--bg-2);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.services .section-title { margin-bottom: 2rem; }
/* ── Vidéo de fond réutilisable : faible opacité + voile pour la lisibilité ── */
.has-video-bg { position: relative; overflow: hidden; }
.section-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .32;            /* + visible (orig: .16) */
  z-index: 0; pointer-events: none;
}
.has-video-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--bg-2) 0%,
    rgba(15,22,34,.22) 24%,
    rgba(15,22,34,.22) 76%,
    var(--bg-2) 100%);   /* voile allégé (orig: .35) */
}
.has-video-bg > .container { position: relative; z-index: 2; }
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
/* Cartes en verre dépoli : elles reposent sur la vidéo de fond de la section,
   le flou d'arrière-plan leur donne du relief au lieu d'un aplat terne. */
.service-card {
  background: linear-gradient(158deg, rgba(32,45,68,.72) 0%, rgba(15,22,34,.86) 100%);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 2rem 1.75rem;
  position: relative; overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: border-color .35s var(--ease), transform .35s var(--ease),
              box-shadow .35s var(--ease);
}
/* Liseré lumineux sur l'arête haute — la lumière qui accroche le bord du verre */
.service-card::before {
  content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transition: opacity .35s var(--ease), left .45s var(--ease), right .45s var(--ease);
}
.service-card::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: var(--blue);
  transition: width .45s var(--ease);
}
.service-card:hover {
  border-color: rgba(79,124,255,.42);
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0,0,0,.42), 0 0 26px rgba(79,124,255,.10);
}
.service-card:hover::before { left: 4%; right: 4%; }
.service-card:hover::after { width: 100%; }

.service-num {
  position: absolute; top: 1rem; right: 1.25rem;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 3rem; color: rgba(255,255,255,.05); line-height: 1;
  transition: color .35s var(--ease);
}
.service-card:hover .service-num { color: rgba(79,124,255,.18); }

/* Picto dans un contenant teinté : lui donne un ancrage plutôt qu'un trait flottant */
.service-icon {
  color: var(--blue); margin-bottom: 1.1rem;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(79,124,255,.08);
  border: 1px solid rgba(79,124,255,.18);
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.service-card:hover .service-icon {
  background: rgba(79,124,255,.16);
  border-color: rgba(79,124,255,.42);
  transform: translateY(-2px);
}
.service-card h3 {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: 1.5rem; margin-bottom: .6rem;
}
.service-card p { font-size: 13px; color: var(--gray); line-height: 1.65; margin-bottom: 1.1rem; }
.service-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.service-tags span {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .6rem; background: rgba(79,124,255,.1);
  color: var(--blue); border: 1px solid rgba(79,124,255,.2); border-radius: 3px;
}

/* ── Mockup d'ordinateur portable (cartes services) : dalle + socle, 100% CSS ── */
.lap { position: relative; margin-bottom: 1.5rem; }
.lap-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #05080E;
  border: 5px solid #1B2434;          /* cadre de l'écran */
  border-radius: 8px 8px 2px 2px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(0,0,0,.45);
}
.lap-screen img,
.lap-screen video {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.lap-screen img   { object-position: top center; }  /* captures de site : on garde le haut */
.lap-screen video { object-position: center; }
.service-card:hover .lap-screen img,
.service-card:hover .lap-screen video { transform: scale(1.05); }
/* Le zoom ne doit PAS s'appliquer aux captures qui défilent (elles sont pilotées en translate) */
.demo .lap-screen img { transition: none; }
.service-card:hover .demo .lap-screen img { transform: none; }

/* Reflet diagonal sur la dalle */
.lap-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg,
    rgba(255,255,255,.13) 0%, rgba(255,255,255,.02) 38%, rgba(255,255,255,0) 62%);
}

/* ════════════════════════════════════
   VITRINE ANIMÉE — l'ordi défile la page du site au clic
   (markup : .demo > .lap > .lap-screen > .demo-page > img.demo-shot)
════════════════════════════════════ */
.demo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.demo { position: relative; }

/* La fenêtre de l'écran : la capture pleine page défile à l'intérieur */
.demo .lap-screen { background: #fff; }
.demo-page {
  position: absolute; inset: 0;
  overflow: hidden;
}
/* ⚠️ .lap-screen img impose height:100% + object-fit:cover (spécificité 0,1,1) :
   il faut au moins autant de poids ici, sinon la capture est écrasée au lieu de défiler. */
.demo .lap-screen img.demo-shot {
  position: absolute; top: 0; left: 0;
  width: 100%; height: auto;          /* hauteur libre = toute la page */
  object-fit: fill;
  display: block;
  transform: translate3d(0, 0, 0);
  transition: transform .5s var(--ease);
}
/* Pendant la lecture, c'est le JS qui pilote via --scroll + une durée calculée */
.demo.is-playing .lap-screen img.demo-shot {
  transform: translate3d(0, var(--scroll, 0px), 0);
  transition: transform var(--dur, 12s) linear;
}
/* Rembobinage : plus rapide et adouci */
.demo.is-rewind .lap-screen img.demo-shot {
  transform: translate3d(0, 0, 0);
  transition: transform 1s var(--ease);
}

/* Barre de navigateur : ancre le visuel dans un vrai contexte web */
.demo-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  height: 26px; display: flex; align-items: center; gap: 5px;
  padding: 0 9px;
  background: rgba(13,19,30,.94);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.demo-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.22); flex: none; }
.demo-url {
  flex: 1; margin-left: 6px; height: 15px; border-radius: 8px;
  background: rgba(255,255,255,.07);
  font-size: 9px; color: rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  letter-spacing: .04em; white-space: nowrap; overflow: hidden;
}
.demo-page { top: 26px; }   /* la page commence sous la barre */

/* Bouton de lecture superposé */
.demo-play {
  position: absolute; inset: 26px 0 0 0; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: rgba(5,8,14,.5);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  border: 0; cursor: pointer;
  color: #fff; font-family: 'Poppins', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  transition: opacity .35s var(--ease), background .35s var(--ease);
}
.demo-play svg { flex: none; }
.demo-play:hover { background: rgba(5,8,14,.34); }
.demo.is-playing .demo-play { opacity: 0; pointer-events: none; }

/* Liseré bleu de progression, en bas de la dalle */
.demo-prog {
  position: absolute; left: 0; bottom: 0; z-index: 5;
  height: 2px; width: 0; background: var(--blue);
  transition: width .3s linear;
}
.demo.is-playing .demo-prog { width: 100%; transition: width var(--dur, 12s) linear; }
.demo.is-rewind  .demo-prog { width: 0; transition: width 1s var(--ease); }

/* Légende sous l'ordi */
.demo-cap { margin-top: 1.1rem; text-align: center; }
.demo-cap strong {
  display: block; font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem; font-weight: 600; color: var(--txt); margin-bottom: .2rem;
}
.demo-cap span { font-size: 11.5px; color: var(--gray); }
.demo-cap a {
  display: inline-block; margin-top: .5rem;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); text-decoration: none;
}
.demo-cap a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .demo-grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 460px; margin-inline: auto; }
}
/* Accessibilité : pas de défilement automatique si l'utilisateur ne veut pas d'animation */
@media (prefers-reduced-motion: reduce) {
  .demo-shot, .demo.is-playing .demo-shot, .demo.is-rewind .demo-shot { transition: none; }
  .demo.is-playing .demo-prog, .demo.is-rewind .demo-prog { transition: none; }
}

/* Socle : trapèze légèrement plus large que l'écran.
   Débord volontairement modeste (3%) : il doit rester dans le padding du .container,
   sinon il crée une barre de défilement horizontale sur toute la page. */
.lap-foot {
  position: relative; height: 8px;
  width: 106%; margin-left: -3%;
  background: linear-gradient(180deg, #232E42 0%, #161E2D 60%, #0C121C 100%);
  border-radius: 0 0 6px 6px;
  clip-path: polygon(1.4% 0, 98.6% 0, 100% 100%, 0 100%);
}
/* Encoche d'ouverture */
.lap-foot::after {
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 13%; height: 3px;
  background: rgba(0,0,0,.55);
  border-radius: 0 0 3px 3px;
}


/* ════════════════════════════════════
   OFFRES
════════════════════════════════════ */
.offres { padding: 8rem 0; background: var(--bg); }
.offres-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; align-items: start; }
.offre-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 2.5rem 2rem; position: relative;
  transition: border-color .3s;
}
.offre-card--hot {
  border-color: var(--blue);
  background: linear-gradient(150deg, rgba(79,124,255,.08) 0%, var(--bg-2) 60%);
}
.offre-badge {
  position: absolute; top: -1px; right: 1.5rem;
  background: var(--blue); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .85rem; border-radius: 0 0 6px 6px;
}
.offre-n {
  display: block; font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 3rem; color: rgba(255,255,255,.05); line-height: 1; margin-bottom: .25rem;
}
.offre-card h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.45rem; margin-bottom: 1rem; }
.offre-price { font-family: 'Cormorant Garamond', serif; font-size: 3.5rem; font-weight: 600; color: var(--txt); line-height: 1; margin-bottom: 2rem; }
.offre-price span { font-size: 1.4rem; opacity: .55; font-style: italic; }
.offre-card ul { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 2rem; }
.offre-card li { display: flex; align-items: flex-start; gap: .7rem; font-size: 13px; color: var(--gray); line-height: 1.5; }
.offre-card li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: rgba(79,124,255,.15); border: 1.5px solid var(--blue); flex-shrink: 0; margin-top: 1px; }
.offre-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: .85rem; border-radius: 7px;
  border: 1px solid var(--border); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; color: var(--txt); transition: background .2s, border-color .2s;
}
.offre-card--hot .offre-btn { background: var(--blue); border-color: var(--blue); }
.offre-btn:hover { background: var(--blue); border-color: var(--blue); }


/* ════════════════════════════════════
   CONTACT
════════════════════════════════════ */
.contact { padding: 8rem 0; background: var(--bg-2); border-top: 1px solid var(--border); }
.contact-inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: 5rem; align-items: start; }
.contact-items { display: flex; flex-direction: column; gap: 1rem; }
.contact-item { display: flex; align-items: center; gap: .85rem; font-size: 14px; color: var(--gray); transition: color .2s; }
.contact-item:hover { color: var(--txt); }
.contact-form { display: flex; flex-direction: column; gap: .9rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.contact-form input, .contact-form textarea {
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--txt);
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 7px; padding: .9rem 1.1rem; width: 100%; outline: none;
  transition: border-color .2s;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.2); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue); }
.contact-form textarea { resize: vertical; min-height: 130px; }
.form-btn {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  background: var(--blue); color: var(--txt); border: none; border-radius: 7px; padding: 1rem;
  cursor: pointer; transition: background .2s;
}
.form-btn:hover { background: var(--blue-dk); }


/* ════════════════════════════════════
   CLIENTS
════════════════════════════════════ */
.clients-section {
  padding: 4.5rem 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.clients-logos {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 1.8rem 2rem;
}
/* Chaque logo dans une pastille claire (les logos sont conçus pour fond clair) */
.client-logo-item {
  display: flex; align-items: center; justify-content: center;
  height: 108px;
  padding: 1.1rem 2.2rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.client-logo-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,.42);
}
/* Alpine : pas de site → pas cliquable */
.client-logo-item--nolink { cursor: default; }
.client-logo-item--nolink:hover { transform: none; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.client-logo-item img {
  height: auto; max-height: 66px;
  width: auto; max-width: 210px;
  object-fit: contain; display: block;
}
.client-logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600; font-size: 1rem;
  text-align: center; line-height: 1.3;
  color: rgba(255,255,255,.7);
}
.client-logo-text em { font-style: italic; font-weight: 400; font-size: .85rem; display: block; }


/* ════════════════════════════════════
   TESTIMONIAL
════════════════════════════════════ */
.testimonial-section {
  padding: 6rem 0;
  background: var(--bg);
}
.testi-inner {
  max-width: 760px; margin: 0 auto;
  text-align: center; position: relative;
}
.testi-quote-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 8rem; line-height: .6;
  color: rgba(79,124,255,.15);
  margin-bottom: 1.5rem;
  display: block;
}
.testi-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 500; line-height: 1.5;
  color: var(--txt); margin-bottom: 2.5rem;
}
.testi-author {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-bottom: 1.25rem;
}
.testi-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  flex-shrink: 0;
}
.testi-author strong { display: block; font-size: 14px; font-weight: 600; }
.testi-author span { font-size: 12px; color: var(--gray); }
.testi-stars { font-size: 1.1rem; color: var(--blue); letter-spacing: .15em; }


/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
.footer { background: var(--bg); border-top: 1px solid var(--border); padding: 2.5rem 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: .85rem; }
.footer-logo { height: 32px; width: auto; }
.footer-brand span { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.1rem; color: var(--txt-soft); }
.footer-nav { display: flex; gap: 2rem; }
.footer-nav a { font-size: 12px; color: var(--gray); transition: color .2s; }
.footer-nav a:hover { color: var(--txt); }
.footer-legal { font-size: 11px; color: rgba(255,255,255,.2); text-align: right; line-height: 1.6; }

/* ── Footer complet (multi-colonnes) ── */
.footer { background: var(--bg); border-top: 1px solid var(--border); padding: 4.5rem 0 1.8rem; position: relative; z-index: 1; }
/* NB : ces blocs portent aussi la classe .container, dont le raccourci
   « padding: 0 1.5rem » en mobile remettrait les paddings verticaux à 0.
   D'où la spécificité .footer .footer-top / .footer .footer-bottom. */
.footer .footer-top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.15fr 1.2fr;
  gap: 3rem;
  padding-bottom: 2.8rem;
  border-bottom: 1px solid var(--border);
}
.footer-brand-col .footer-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.footer-tagline { font-size: 13px; line-height: 1.85; color: var(--gray); max-width: 330px; margin-bottom: 1.4rem; }
.footer-socials { display: flex; gap: .65rem; }
.footer-socials a {
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); color: var(--gray);
  transition: color .25s, border-color .25s, transform .25s;
}
.footer-socials a:hover { color: var(--txt); border-color: var(--blue); transform: translateY(-2px); }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-h {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--txt); margin-bottom: 1rem; position: relative; padding-bottom: .55rem;
}
.footer-h::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 22px; height: 2px;
  background: var(--blue); border-radius: 2px; opacity: .85;
}
.footer-col a, .footer-loc {
  font-size: 13px; color: var(--gray); line-height: 1.45;
  padding: .33rem 0; text-decoration: none;
  display: inline-flex; align-items: center; gap: .55rem;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.footer-col a:hover { color: var(--blue); transform: translateX(3px); }
.footer-col a svg, .footer-loc svg { flex: 0 0 auto; color: var(--blue); opacity: .7; }
.footer .footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem;
}
.footer-bottom p { font-size: 11.5px; color: rgba(255,255,255,.34); margin: 0; }
@media (max-width: 880px) {
  .footer .footer-top { grid-template-columns: 1fr 1fr; gap: 2.2rem 2rem; padding-bottom: 2.4rem; }
  .footer .footer-bottom { padding-top: 1.5rem; }
  .footer-brand-col { grid-column: 1 / -1; }
}
/* Mobile : marque en pleine largeur, puis 2 colonnes de liens, contact en pleine largeur */
@media (max-width: 480px) {
  .footer { padding-top: 3.2rem; }
  .footer .footer-top { grid-template-columns: 1fr 1fr; gap: 1.9rem 1.2rem; padding-bottom: 2.2rem; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer .footer-top > .footer-col:last-child { grid-column: 1 / -1; }
  .footer-tagline { margin-bottom: 1.1rem; }
  .footer-col a, .footer-loc { font-size: 12.5px; padding: .28rem 0; }
  .footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: .35rem; padding-top: 1.4rem; }
}


/* ════════════════════════════════════
   REVEAL
════════════════════════════════════ */
/* Révélé uniquement quand le JS a activé .reveal-on (sinon contenu visible) */
.reveal-on .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-on .reveal.visible { opacity: 1; transform: translateY(0); }

/* Entrée du hero (logo + titre) au chargement */
@keyframes heroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.brand-mark   { animation: heroIn .9s var(--ease) .05s both; }
.brand-name   { animation: heroIn .9s var(--ease) .18s both; }
.brand-deco   { animation: heroIn .9s var(--ease) .31s both; }
.brand-author { animation: heroIn .9s var(--ease) .44s both; }
@media (prefers-reduced-motion: reduce) {
  .brand-mark, .brand-name, .brand-deco, .brand-author { animation: none; }
}


/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media (max-width: 1200px) {
  .services-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .brand-side { width: 260px; padding: 6rem 1.5rem 4rem 2rem; }
  .top-bar { padding-left: 260px; padding-right: 1.5rem; }
  .brand-name strong { font-size: 2.5rem; }
  .panels { padding-right: 1.5rem; }
}
@media (max-width: 880px) {
  .hero { flex-direction: column; height: auto; min-height: 100vh; }
  .top-bar { padding: 0 1.2rem; height: 56px; gap: .7rem; }
  .nav-toggle { display: flex; }
  /* La nav devient un menu déroulant plein écran sous le header */
  .top-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    position: fixed;
    top: 56px; left: 0; right: 0;
    background: #0a0e16;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.5);
    padding: .25rem 1.4rem 1rem;
    transform: translateY(-14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s var(--ease), transform .28s var(--ease);
    z-index: 29;
  }
  .top-bar.menu-open .top-nav {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .top-nav a {
    font-size: 1rem;
    padding: .95rem .2rem;
    color: rgba(255,255,255,.88);
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .top-nav a::after { display: none; }   /* pas de soulignement animé dans le menu déroulant */
  .top-cta-sub { display: none; }       /* "Parlons de votre projet" masqué sur mobile */
  .top-cta-main { font-size: .8rem; }
  .top-mid { display: none; }           /* réseaux masqués sur mobile (déjà dans le footer) → top-bar épuré */
  .top-bar-logo-name { display: none; } /* nom masqué (logo géant déjà dans le hero) */
  .brand-side {
    width: 100%; padding: 6rem 1.5rem 2rem;
    align-items: center; text-align: center;
  }
  .brand-mark { margin: 0 auto 1.5rem; }
  .brand-name { align-items: center; }
  .brand-deco { justify-content: center; }
  .brand-nav { display: none; }
  /* HERO — 3 panneaux deviennent 3 bandes empilées PLEINE LARGEUR (bord à bord) */
  .panels { padding: 0 0 3rem; flex-direction: column; gap: 0; height: auto; overflow: visible; }
  .panel {
    position: relative;
    top: auto; bottom: auto; left: auto;
    width: auto; height: 240px;
    margin: 0;
    clip-path: none;
    border-radius: 0;
  }
  .panel--1, .panel--2, .panel--3 { clip-path: none; }
  /* Labels ré-ancrés sur chaque bande (stride vertical = hauteur 240px, bandes collées) */
  .labels { inset: 0; }
  .label {
    left: 2.4rem; right: 2.4rem;
    width: auto; bottom: auto;
    transform: none;
  }
  .label:hover { transform: translateY(-4px); }
  .label--1 { top: 130px; left: 2.4rem; transform: none; }
  .label--2 { top: 370px; left: 2.4rem; transform: none; }
  .label--3 { top: 610px; left: 2.4rem; transform: none; }
  .label-title { font-size: 1.4rem; }
  .mission-inner, .contact-inner { grid-template-columns: 1fr; gap: 3rem; }
  .about-stats { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 2rem; flex-direction: row; flex-wrap: wrap; }
  .services-grid, .services-grid--4, .offres-grid { grid-template-columns: 1fr; }
  .projets-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .projet-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .projet-item:nth-child(2) { grid-column: span 1; }
  .projet-item:nth-child(5) { grid-column: span 1; }
  .projet-item:nth-child(6) { grid-column: span 2; }
  .mission, .services, .projets-section, .offres, .contact { padding: 5rem 0; }
  .container { padding: 0 1.5rem; }
  .form-row { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-nav { flex-wrap: wrap; gap: .65rem 1.4rem; }
  .footer-legal { text-align: left; }
  /* Logos clients : on garde la taille compacte sur mobile */
  .clients-logos { gap: 1.4rem; }
  .client-logo-item { height: 80px; padding: .85rem 1.6rem; border-radius: 14px; }
  .client-logo-item img { max-height: 48px; max-width: 150px; }
}
@media (max-width: 480px) {
  .projets-mosaic { grid-template-columns: 1fr; grid-auto-rows: 230px; }
  .projet-item:nth-child(1),
  .projet-item:nth-child(6) { grid-column: span 1; }
  .services-grid--4 { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════
   PAGE RÉALISATIONS
════════════════════════════════════ */
.page-realisations { background: var(--bg); }

.sub-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 66px; padding: 0 2.5rem;
  background: rgba(8,12,20,.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 0;
}
/* Filet dégradé plutôt qu'une bordure plate : la ligne s'éteint sur les bords. */
.sub-bar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,124,255,.35) 22%,
              rgba(255,255,255,.13) 50%, rgba(79,124,255,.35) 78%, transparent);
  opacity: 1; transition: opacity .35s var(--ease);
}
.sub-nav { gap: 1.9rem; }
/* Variante accueil : le même header, mais posé en transparent sur le hero.
   Il devient opaque au scroll (classe .scrolled ajoutée par main.js) → identique aux autres pages. */
.sub-bar--hero {
  position: fixed; top: 0; left: 0; right: 0;
  height: 74px;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: height .35s var(--ease), background .35s var(--ease),
              backdrop-filter .35s var(--ease);
}
/* Pas de filet tant qu'on est posé sur le hero. */
.sub-bar--hero::after { opacity: 0; }
.sub-bar--hero.scrolled {
  height: 62px;
  background: rgba(8,12,20,.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.sub-bar--hero.scrolled::after { opacity: 1; }

.sub-logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.sub-logo img { height: 26px; width: auto; }
.sub-logo span {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600;
  font-size: 1.05rem; color: #fff; letter-spacing: .03em;
}
.sub-nav { display: flex; align-items: center; gap: 2rem; }
.sub-nav > a {
  position: relative;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500;
  letter-spacing: .02em;
  color: rgba(255,255,255,.72); text-decoration: none;
  padding: .35rem 0;
  transition: color .25s var(--ease);
}
/* Soulignement qui se déploie depuis la gauche */
.sub-nav > a:not(.sub-cta)::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.sub-nav > a:not(.sub-cta):hover { color: var(--txt); }
.sub-nav > a:not(.sub-cta):hover::after { transform: scaleX(1); }
/* Page courante : soulignement acquis */
.sub-nav > a.active { color: var(--txt); }
.sub-nav > a.active::after { transform: scaleX(1); background: rgba(79,124,255,.55); }

/* Bouton Contact : se remplit au survol */
.sub-cta {
  border: 1px solid rgba(255,255,255,.22); border-radius: 6px;
  padding: .5rem 1.15rem !important; letter-spacing: .09em; text-transform: uppercase;
  font-size: 11.5px !important; font-weight: 600 !important;
  color: rgba(255,255,255,.9) !important;
  transition: background .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), box-shadow .3s var(--ease);
}
.sub-cta:hover {
  background: var(--blue); border-color: var(--blue); color: #fff !important;
  box-shadow: 0 6px 18px rgba(79,124,255,.28);
}

/* Logo : léger réveil au survol */
.sub-logo img { transition: transform .35s var(--ease); }
.sub-logo:hover img { transform: scale(1.06) rotate(-2deg); }

/* Burger (caché sur desktop) */
.sub-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px; padding: 0; margin-left: auto;
  background: none; border: 0; cursor: pointer; z-index: 51;
}
.sub-toggle span { display: block; width: 24px; height: 2px; margin: 0 auto; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .25s; }
.sub-bar.menu-open .sub-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sub-bar.menu-open .sub-toggle span:nth-child(2) { opacity: 0; }
.sub-bar.menu-open .sub-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Couche décorative du menu burger : n'existe qu'en mobile (activée plus bas).
   ⚠️ À déclarer AVANT la media query : à spécificité égale, la dernière règle
   du fichier l'emporte — une règle `display:none` placée après aurait gagné. */
.sub-pictos { display: none; }

@media (max-width: 600px) {
  .sub-bar { padding: 0 1.2rem; }
  .sub-logo span { font-size: .95rem; }
  .sub-toggle { display: flex; }
  /* La nav devient un menu déroulant sous le header */
  .sub-nav {
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    position: fixed; top: 64px; left: 0; right: 0;
    background: #0a0e16; border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.5);
    padding: .25rem 1.4rem 1rem;
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: opacity .28s var(--ease), transform .28s var(--ease);
    z-index: 49;
  }
  .sub-bar.menu-open .sub-nav { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .sub-nav > a { font-size: 1rem; padding: .95rem .2rem; color: rgba(255,255,255,.88); border-bottom: 1px solid rgba(255,255,255,.07); }
  .sub-nav > .sub-cta { border: 1px solid rgba(255,255,255,.25) !important; text-align: center; margin-top: .8rem; padding: .75rem 1.1rem !important; }

  /* ── Quelques pictos qui tombent en fond du menu burger ──
     Placé en 1er dans .sub-nav et en z-index 0 : les liens (position:relative)
     se peignent au-dessus. Décoratif, donc non cliquable. */
  .sub-pictos {
    display: block; position: absolute; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
  }
  .sub-pictos i {
    position: absolute; top: 0;
    font-style: normal; font-family: 'Cormorant Garamond', serif; line-height: 1;
    color: rgba(150,166,196,.28);
    animation-name: subPictoFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .sub-pictos i:nth-child(1) { left: 7%;  font-size: 1.1rem;  animation-duration: 13s; animation-delay: -2s;  --r: 12deg; }
  .sub-pictos i:nth-child(2) { left: 27%; font-size: 1.5rem;  animation-duration: 17s; animation-delay: -9s;  --r: -8deg; }
  .sub-pictos i:nth-child(3) { left: 47%; font-size: 1.2rem;  animation-duration: 15s; animation-delay: -5s;  --r: 6deg; }
  .sub-pictos i:nth-child(4) { left: 64%; font-size: 1rem;    animation-duration: 19s; animation-delay: -12s; --r: -14deg; }
  .sub-pictos i:nth-child(5) { left: 81%; font-size: 1.35rem; animation-duration: 14s; animation-delay: -7s;  --r: 10deg; }
  .sub-pictos i:nth-child(6) { left: 92%; font-size: 1.05rem; animation-duration: 21s; animation-delay: -16s; --r: -5deg; }
}
@keyframes subPictoFall {
  0%   { transform: translateY(-30px) rotate(var(--r, 0deg)); opacity: 0; }
  12%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateY(100vh) rotate(var(--r, 0deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sub-pictos { display: none !important; } }

.real-hero { padding: 4.5rem 0 2rem; border-bottom: 1px solid var(--border); }
.real-hero h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; color: var(--txt);
  margin: .5rem 0 1rem;
}
.real-hero h1 em { color: var(--blue); font-style: italic; }
.real-hero-sub { max-width: 560px; font-size: 15px; line-height: 1.8; color: var(--gray); }

.real-project { padding: 4.5rem 0; scroll-margin-top: 80px; }
.real-project.alt { background: var(--bg-2); }
.real-head { display: flex; gap: 1.5rem; align-items: flex-start; max-width: 760px; margin-bottom: 2.5rem; }
.real-num {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 2.4rem; line-height: 1; color: rgba(79,124,255,.55); flex-shrink: 0;
}
.real-head-txt h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--txt); margin: .35rem 0 .7rem;
}
.real-head-txt p { font-size: 14px; line-height: 1.8; color: var(--gray); margin: 0; }

/* Accès à la page dédiée de chaque projet — sans lui, les pages projet sont
   inatteignables depuis cette page (c'était le cas). */
.real-more {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1rem; padding: .55rem 1.1rem;
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--blue); text-decoration: none;
  background: rgba(79,124,255,.08);
  border: 1px solid rgba(79,124,255,.28); border-radius: 4px;
  transition: background .3s var(--ease), border-color .3s var(--ease),
              gap .3s var(--ease), color .3s var(--ease);
}
.real-more span { transition: transform .3s var(--ease); }
.real-more:hover {
  background: rgba(79,124,255,.16); border-color: rgba(79,124,255,.55);
  color: #fff; gap: .7rem;
}
.real-more:hover span { transform: translateX(3px); }

.real-gallery { columns: 3; column-gap: 1rem; }
.real-gallery img {
  width: 100%; margin: 0 0 1rem; display: block;
  border-radius: 10px; break-inside: avoid;
  border: 1px solid var(--border);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.real-gallery img:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.4); }

.real-cta { padding: 5rem 0 6rem; text-align: center; }
.real-cta h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--txt); margin-bottom: .6rem;
}
.real-cta p { color: var(--gray); font-size: 15px; margin-bottom: 1.8rem; }

@media (max-width: 900px) {
  .sub-bar { padding: 0 1.2rem; height: 58px; }
  .sub-nav { gap: 1.1rem; }
  .real-gallery { columns: 2; }
}
@media (max-width: 560px) {
  .real-gallery { columns: 1; }
  .real-head { flex-direction: column; gap: .5rem; }
}


/* ════════════════════════════════════
   PAGES PROJET — détails (1 layout différent par produit)
════════════════════════════════════ */
.proj-page { background: var(--bg); }
.proj-back { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.75); font-size: 13px; text-decoration: none; margin-bottom: 1rem; transition: gap .25s, color .25s; }
.proj-back:hover { color: var(--txt); gap: .65rem; }
.proj-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: clamp(2.3rem, 6vw, 4.2rem); line-height: 1.02; color: var(--txt); margin: .35rem 0; }
.proj-lead { max-width: 640px; font-size: 15px; line-height: 1.85; color: var(--gray); margin-top: 1rem; }
.proj-intro { padding: 3rem 0; }
.proj-intro p { max-width: 680px; font-size: 15px; line-height: 1.9; color: var(--gray); }
.proj-section { padding: 1rem 0 4.5rem; }

/* A — Cover plein écran + titre par-dessus (Agathe, Maison) */
.proj-cover { position: relative; min-height: 70vh; display: flex; align-items: flex-end; overflow: hidden; }
.proj-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proj-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,10,18,.15) 0%, rgba(6,10,18,.5) 55%, rgba(6,10,18,.96) 100%); }
.proj-cover .container { position: relative; z-index: 2; padding-top: 6rem; padding-bottom: 3rem; }

/* B — Offset (1 grande + grille) (Agathe) */
.proj-offset { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.proj-offset img { width: 100%; border-radius: 12px; display: block; border: 1px solid var(--border); transition: transform .4s var(--ease); }
.proj-offset img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 7; object-fit: cover; }
.proj-offset img:hover { transform: translateY(-4px); }

/* C — Split titre + image (Photographie) */
.proj-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.5rem; align-items: center; padding: 4rem 0 1rem; }
.proj-split-img img { width: 100%; border-radius: 14px; display: block; border: 1px solid var(--border); }

/* D — Masonry (Photographie) */
.proj-masonry { columns: 3; column-gap: 1rem; }
.proj-masonry img { width: 100%; margin: 0 0 1rem; border-radius: 10px; break-inside: avoid; display: block; border: 1px solid var(--border); transition: transform .4s var(--ease); }
.proj-masonry img:hover { transform: scale(1.02); }

/* E — Mockup navigateur (Sahila) */
.proj-browser { max-width: 920px; margin: 0 auto; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 30px 70px rgba(0,0,0,.55); }
.proj-browser-bar { height: 40px; background: #11161f; display: flex; align-items: center; gap: 7px; padding: 0 15px; border-bottom: 1px solid var(--border); }
.proj-browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a4250; display: block; }
.proj-browser > img { width: 100%; display: block; }
.proj-centerfig { text-align: center; }
.proj-centerfig img { max-width: 520px; width: 100%; border-radius: 14px; border: 1px solid var(--border); display: inline-block; }
.proj-figtitle { font-family: 'Cormorant Garamond', serif; color: var(--txt); font-size: 1.5rem; margin-bottom: 1.2rem; }

/* F — Zig-zag (Carte de visite) */
.proj-zig { display: flex; flex-direction: column; gap: 3rem; }
.proj-zig-row { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.2rem; align-items: center; }
.proj-zig-row:nth-child(even) .proj-zig-img { order: 2; }
.proj-zig-img img { width: 100%; border-radius: 14px; display: block; border: 1px solid var(--border); }
.proj-zig-cap h3 { font-family: 'Cormorant Garamond', serif; color: var(--txt); font-size: 1.5rem; margin-bottom: .5rem; }
.proj-zig-cap p { color: var(--gray); font-size: 14px; line-height: 1.8; }

/* G — Stack centré (Support physique) */
.proj-stack { display: flex; flex-direction: column; gap: 1.5rem; max-width: 820px; margin: 0 auto; }
.proj-stack img { width: 100%; border-radius: 14px; display: block; border: 1px solid var(--border); }

/* H — Two-up (Maison) */
.proj-twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.proj-twoup img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; border: 1px solid var(--border); }

@media (max-width: 820px) {
  .proj-split { grid-template-columns: 1fr; }
  .proj-masonry { columns: 2; }
  .proj-zig-row { grid-template-columns: 1fr; gap: 1rem; }
  .proj-zig-row:nth-child(even) .proj-zig-img { order: 0; }
  .proj-twoup { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .proj-masonry { columns: 1; }
  .proj-offset { grid-template-columns: 1fr; }
  .proj-offset img:first-child { aspect-ratio: 4 / 3; }
}


/* ════════════════════════════════════
   MOTIFS DÉCORATIFS QUI DESCENDENT (fond)
════════════════════════════════════ */
.motifs-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Le contenu passe au-dessus des motifs (le header sticky garde son z-index propre) */
.proj-page > section, .proj-page > footer,
.page-realisations > section, .page-realisations > footer { position: relative; z-index: 1; }

.motif {
  position: absolute;
  top: -8vh;
  font-family: 'Cormorant Garamond', serif;
  color: rgba(255, 255, 255, .2);
  line-height: 1;
  user-select: none;
  animation-name: motifFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes motifFall {
  0%   { transform: translateY(-10vh) rotate(var(--rot, 0deg));  opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(112vh) rotate(var(--rot, 0deg));  opacity: 0; }
}
.motif--diamond img { width: 1.3em; height: auto; display: block; opacity: .42; }

/* Motifs animés scopés à une section (ex. témoignage) */
.has-motifs { position: relative; overflow: hidden; }
.has-motifs > .container { position: relative; z-index: 1; }
.section-motifs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* Motifs scopés à une section : chute sur TOUTE la hauteur de la section (--fall-h) */
.section-motifs .motif { top: 0; animation-name: motifFallSection; }
@keyframes motifFallSection {
  0%   { transform: translateY(-60px) rotate(var(--rot, 0deg)); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(var(--fall-h, 100vh)) rotate(var(--rot, 0deg)); opacity: 0; }
}
/* Variante SOMBRE des motifs (pour les sections à fond clair) */
.has-motifs--dark .motif { color: rgba(15, 22, 34, .12); }
.has-motifs--dark .motif--diamond img { filter: invert(1); opacity: .12; }


/* ════════════════════════════════════
   PAGE PRESTATION — Création de site internet
════════════════════════════════════ */
.cs-page { background: var(--bg); }

/* Hero */
.cs-hero {
  position: relative; min-height: 82vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden; padding: 8rem 1.5rem 10rem; background: var(--bg);
}
.cs-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .30; z-index: 0; pointer-events: none; }
.cs-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 100% at 50% 0%, rgba(11,16,24,.5) 0%, rgba(11,16,24,.82) 62%, var(--bg) 100%);
}
.cs-hero-inner { position: relative; z-index: 2; max-width: 760px; }
.cs-hero-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: 1.05; color: var(--txt); margin: .6rem 0 1.2rem; }
.cs-hero-title em { color: var(--blue); font-style: italic; }
.cs-hero-sub { font-size: 15px; line-height: 1.85; color: var(--txt-soft); max-width: 600px; margin: 0 auto 2rem; }
.cs-hero-cta { display: flex; gap: 1.4rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.cs-hero-link { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--txt); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.cs-hero-link:hover { color: var(--blue); border-color: var(--blue); }

/* Rangée de cartes (chevauche le hero) */
.cs-cards {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  margin-top: -92px; position: relative; z-index: 5;
  background: var(--border); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; box-shadow: 0 16px 34px rgba(0,0,0,.3);
}
.cs-card { background: var(--bg-2); padding: 2.1rem 1.4rem; text-align: center; transition: background .3s, transform .3s; }
.cs-card:hover { background: var(--bg-3); transform: translateY(-3px); }
.cs-card-ico { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); color: var(--blue); margin-bottom: 1rem; }
.cs-card h3 { font-size: 14px; font-weight: 600; color: var(--txt); margin-bottom: .5rem; }
.cs-card p { font-size: 12px; line-height: 1.6; color: var(--gray); }

/* Pourquoi nous */
.cs-why { padding: 8rem 0 5rem; background: var(--bg); overflow: hidden; }
.cs-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 1rem; }
.cs-step { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 2.3rem 2rem; transition: border-color .3s, transform .3s; }
.cs-step:hover { border-color: rgba(79,124,255,.4); transform: translateY(-5px); }
.cs-step-num { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 2.2rem; color: rgba(79,124,255,.5); display: block; margin-bottom: .5rem; }
.cs-step h3 { font-size: 1.2rem; color: var(--txt); margin-bottom: .6rem; }
.cs-step p { font-size: 13.5px; line-height: 1.75; color: var(--gray); }

/* Feature : mockup + texte */
.cs-feature { padding: 4rem 0 6rem; background: var(--bg); }
.cs-feature-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: center; }
.cs-feature-lead { font-size: 14.5px; line-height: 1.85; color: var(--gray); margin-bottom: 1.3rem; }
.cs-list { list-style: none; display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.5rem; }
.cs-list li { position: relative; padding-left: 1.6rem; font-size: 13.5px; color: var(--txt-soft); line-height: 1.5; }
.cs-list li::before { content: '✓'; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

/* Grille prestations (fond sombre) */
.cs-grid-sec { padding: 6rem 0; background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.cs-gcard { background: rgba(19,27,42,.6); border: 1px solid var(--border); border-radius: 12px; padding: 1.9rem; transition: border-color .3s, transform .3s, background .3s; }
.cs-gcard:hover { border-color: rgba(79,124,255,.4); transform: translateY(-4px); background: var(--bg-3); }
.cs-gcard h3 { font-size: 1.05rem; color: var(--txt); margin-bottom: .55rem; }
.cs-gcard p { font-size: 13px; line-height: 1.7; color: var(--gray); }

/* Offre */
.cs-offer-sec { padding: 6rem 0; background: var(--bg); }
.cs-offer { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; background: linear-gradient(135deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--border); border-radius: 18px; padding: 3rem; }
.cs-price { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 3.4rem; color: var(--blue); margin-bottom: 1rem; }

/* ── Sections de contenu SEO (prose) ── */
.cs-prose { padding: 5.5rem 0; background: var(--bg); }
.cs-prose .section-title { text-align: left; margin-bottom: 2.2rem; max-width: 900px; }
.cs-prose-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3.5rem; align-items: start; }
.cs-prose-col p { font-size: 15px; line-height: 1.95; color: var(--gray); margin-bottom: 1.1rem; }
.cs-prose-col h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--txt); margin: 0 0 .55rem; }
.cs-prose-col h3 + p { margin-bottom: 1.4rem; }
.cs-prose-list { list-style: none; display: flex; flex-direction: column; gap: .9rem; }
.cs-prose-list li { position: relative; padding-left: 1.3rem; font-size: 14px; line-height: 1.7; color: var(--gray); }
.cs-prose-list li::before { content: '◆'; position: absolute; left: 0; top: .15em; font-size: .7em; color: var(--blue); }
.cs-prose-list strong { color: var(--txt); font-weight: 600; }
/* Variante claire */
.cs-prose.cs-light .cs-prose-col p, .cs-prose.cs-light .cs-prose-list li { color: #54607a; }
.cs-prose.cs-light .cs-prose-col h3, .cs-prose.cs-light .cs-prose-list strong { color: #0e1320; }

/* Méthode — 5 étapes */
.cs-method { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cs-method .section-title { margin-bottom: 2.5rem; }
.cs-steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.cs-stepcard { background: rgba(19,27,42,.5); border: 1px solid var(--border); border-radius: 12px; padding: 1.6rem 1.3rem; transition: border-color .3s, transform .3s; }
.cs-stepcard:hover { border-color: rgba(79,124,255,.4); transform: translateY(-4px); }
.cs-stepcard-num { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.4rem; color: rgba(79,124,255,.55); margin-bottom: .6rem; }
.cs-stepcard h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .98rem; color: var(--txt); margin-bottom: .5rem; }
.cs-stepcard p { font-size: 12.5px; line-height: 1.65; color: var(--gray); }

/* FAQ */
.cs-faq { padding: 5.5rem 0; }
.cs-faq .section-title { text-align: left; margin-bottom: 2rem; }
.cs-faq-list { max-width: 820px; }
.cs-faq-item { border-bottom: 1px solid rgba(20,30,50,.12); }
.cs-faq-item summary { cursor: pointer; list-style: none; padding: 1.15rem 2.2rem 1.15rem 0; position: relative; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; color: #0e1320; }
.cs-faq-item summary::-webkit-details-marker { display: none; }
.cs-faq-item summary::after { content: '+'; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--blue); }
.cs-faq-item[open] summary::after { content: '−'; }
.cs-faq-a { padding: 0 0 1.25rem; }
.cs-faq-a p { font-size: 14px; line-height: 1.8; color: #54607a; margin: 0; max-width: 720px; }

@media (max-width: 860px) {
  .cs-prose-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cs-steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .cs-steps-grid { grid-template-columns: 1fr; }
  .cs-prose, .cs-faq { padding: 4rem 0; }
}

@media (max-width: 980px) {
  .cs-cards { grid-template-columns: repeat(2, 1fr); margin-top: -64px; }
  .cs-why-grid { grid-template-columns: 1fr; }
  .cs-feature-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cs-grid { grid-template-columns: 1fr 1fr; }
  .cs-offer { grid-template-columns: 1fr; gap: 2rem; padding: 2.2rem; }
}
@media (max-width: 600px) {
  .cs-hero { min-height: 72vh; padding: 7rem 1.2rem 8rem; }
  .cs-cards { grid-template-columns: 1fr; margin-top: -48px; }
  .cs-grid { grid-template-columns: 1fr; }
}

/* ── Page prestation : typo SANS empattement (comme l'exemple) ── */
.cs-page h1, .cs-page h2, .cs-page h3,
.cs-page .section-title, .cs-page .cs-hero-title,
.cs-page .cs-price, .cs-page .cs-step-num {
  font-family: 'Poppins', sans-serif;
}
.cs-page .cs-hero-title em, .cs-page .section-title em { font-style: normal; }
.cs-page .cs-hero-title { font-weight: 700; letter-spacing: -.01em; }
.cs-page .section-title { font-weight: 700; }
.cs-page .cs-step-num, .cs-page .cs-price { font-weight: 700; }

/* Hero vidéo plus visible */
.cs-hero-video { opacity: .5; }
.cs-hero::after { background: radial-gradient(120% 100% at 50% 0%, rgba(11,16,24,.35) 0%, rgba(11,16,24,.72) 62%, var(--bg) 100%); }

/* Section claire (fond blanc) */
.cs-light { background: #f3f5f8; }
.cs-light .section-title { color: #0e1320; }
.cs-light .cs-step { background: #fff; border-color: rgba(0,0,0,.07); box-shadow: 0 14px 34px rgba(20,30,50,.08); }
.cs-light .cs-step:hover { border-color: rgba(79,124,255,.45); }
.cs-light .cs-step h3 { color: #0e1320; }
.cs-light .cs-step p { color: #54607a; }

/* Barre d'accent à gauche des titres (comme le screen de réf.) */
.cs-bar-title { position: relative; padding-left: 1.1rem; }
.cs-bar-title::before { content: ''; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 2px; background: var(--blue); }

/* Intro : texte (gauche) + panneau sombre 3 cartes (droite) */
.cs-intro-row { display: grid; grid-template-columns: 0.9fr 2fr; gap: 3rem; align-items: center; margin-bottom: 5rem; }
.cs-intro-left .section-title { text-align: left; font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 1.2rem; }
.cs-intro-text { font-size: 14px; line-height: 1.8; color: #54607a; margin-bottom: 1.4rem; max-width: 340px; }
.cs-intro-link { font-weight: 600; font-size: 13px; color: var(--blue); text-decoration: none; letter-spacing: .02em; }
.cs-intro-link:hover { text-decoration: underline; }
/* Panneau sombre : 3 cartes plein format vidéo + bloc sombre étendu jusqu'au bord droit */
.cs-intro-panel { position: relative; background: #23262d; border-radius: 16px 0 0 16px; box-shadow: 0 22px 46px rgba(20,30,50,.16); }
/* Le bloc sombre se prolonge jusqu'au bord droit de l'écran (clippé par la section) */
.cs-intro-panel::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 100vw; background: #23262d; }
.cs-intro-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: calc(100% - 52px); border-radius: 16px 0 0 16px; overflow: hidden; }
.cs-icard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; overflow: hidden; text-decoration: none; background: #1b1e24; }
.cs-icard-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s var(--ease); }
.cs-icard::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12,15,20,.15) 0%, rgba(12,15,20,.5) 52%, rgba(12,15,20,.92) 100%); }
.cs-icard:hover .cs-icard-video { transform: scale(1.06); }
.cs-icard-content { position: relative; z-index: 2; padding: 1.7rem 1.4rem 1.6rem; }
.cs-icard-ico { display: inline-flex; color: #fff; margin-bottom: .9rem; }
.cs-icard-content h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.3rem; color: #fff; margin-bottom: .5rem; }
.cs-icard-content p { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.82); margin-bottom: 1.1rem; }
.cs-icard-btn { display: inline-block; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: .62rem 1.25rem; border-radius: 6px; transition: background .25s; }
.cs-icard:hover .cs-icard-btn { background: var(--blue-dk); }

/* "Pourquoi nous choisir" — chiffre clé + atouts (style screen de réf.) */
.cs-why-title { text-align: left; margin-bottom: 2.8rem; }
.cs-whyrow { display: grid; grid-template-columns: 0.85fr 2fr; gap: 3.5rem; align-items: start; }
/* Carré en filigrane derrière le grand chiffre */
.cs-stat { position: relative; padding-right: 2rem; }
.cs-stat::before { content: ''; position: absolute; left: -10px; top: -16px; width: 84px; height: 84px; border: 1.6px solid rgba(79,124,255,.3); border-radius: 12px; z-index: 0; }
.cs-stat-num, .cs-stat-label { position: relative; z-index: 1; }
.cs-stat-num { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(3.6rem, 6vw, 5.4rem); line-height: 1; color: #0e1320; letter-spacing: -.02em; }
.cs-stat-num em { color: var(--blue); font-style: normal; }
.cs-stat-label { display: block; margin-top: .8rem; max-width: 190px; font-size: 14px; line-height: 1.55; color: #54607a; }
.cs-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 2.8rem; padding-left: 3.5rem; border-left: 1px solid rgba(20,30,50,.1); }
.cs-feat { display: flex; flex-direction: column; gap: .65rem; }
/* Picto LÉGÈREMENT DÉCALÉ de son carré conteneur (comme le screen de réf.) */
.cs-feat-ico { position: relative; display: block; width: 42px; height: 42px; margin: 7px 0 1.1rem 9px; border: 1.5px solid rgba(79,124,255,.32); border-radius: 11px; color: var(--blue); }
.cs-feat-ico svg { position: absolute; top: -9px; left: -9px; width: 24px; height: 24px; padding: 5px; box-sizing: content-box; background: #f3f5f8; border-radius: 8px; }
.cs-feat h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.05rem; color: #0e1320; }
.cs-feat p { font-size: 13.5px; line-height: 1.7; color: #54607a; margin: 0; }

@media (max-width: 820px) {
  .cs-whyrow { grid-template-columns: 1fr; gap: 2.5rem; }
  .cs-feats { padding-left: 0; border-left: 0; }
  .cs-stat { display: flex; align-items: baseline; gap: 1rem; padding-right: 0; }
  .cs-stat-label { margin-top: 0; max-width: none; }
  .cs-intro-row { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3.5rem; }
  .cs-intro-text { max-width: none; }
}
@media (max-width: 760px) {
  .cs-intro-cards { width: 100%; }
}
@media (max-width: 560px) {
  .cs-intro-cards { grid-template-columns: 1fr; }
  .cs-icard { min-height: 260px; }
}
@media (max-width: 480px) {
  .cs-feats { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* Réalisations — carrés pleine largeur */
.cs-squares-sec { padding: 6rem 0; background: var(--bg); }
.cs-squares-sec .projets-fullgrid { margin-top: 2.2rem; }
/* Typo SANS empattement pour les titres de tuiles (cohérent avec la page) */
.cs-page .projet-tile-title { font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: -.01em; }

/* Section diamant (watermark en fond) */
.cs-diamond { position: relative; overflow: hidden; padding: 7.5rem 0; background: var(--bg-2); text-align: center; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cs-diamond-bg { position: absolute; right: -3%; bottom: -14%; width: min(680px, 60%); opacity: .12; z-index: 0; pointer-events: none; }
.cs-diamond-inner { position: relative; z-index: 1; max-width: 680px; }
.cs-diamond-text { font-size: 15px; line-height: 1.85; color: var(--gray); }

/* Cartes à cheval — transition BRUTE (les 5 cartes séparent les zones) */
.cs-hero { padding-bottom: 6rem; }
/* Fond transparent : le HAUT des cartes repose sur le sombre (body/hero),
   le BAS déborde sur la section blanche → les cartes sont vraiment à cheval. */
.cs-transition { position: relative; background: transparent; z-index: 5; }
.cs-transition .cs-cards { margin-top: -92px; margin-bottom: -102px; }
.cs-why.cs-light { padding-top: 130px; }

/* Dégradé doux blanc → sombre entre la section blanche et "Nos réalisations" */
.cs-grad-wd { height: 150px; background: linear-gradient(180deg, #f3f5f8 0%, var(--bg) 100%); }

/* Mini-schéma : 5 points (process) */
.cs-steps { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; max-width: 780px; margin: 2.5rem auto 4.5rem; position: relative; }
.cs-steps::before { content: ''; position: absolute; top: 6px; left: 8%; right: 8%; height: 2px; background: rgba(20,30,50,.12); z-index: 0; }
.cs-stepitem { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
.cs-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--blue); border: 3px solid #f3f5f8; box-shadow: 0 0 0 1px rgba(79,124,255,.45); margin-bottom: .85rem; }
.cs-stepnum { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12px; color: var(--blue); margin-bottom: .15rem; }
.cs-steplabel { font-size: 12.5px; font-weight: 500; color: #2a3142; }

/* 3 images superposées */
.cs-stack { position: relative; height: 380px; max-width: 640px; margin: 0 auto 5.5rem; }
.cs-stack-img { position: absolute; border-radius: 12px; object-fit: cover; box-shadow: 0 24px 50px rgba(20,30,50,.22); border: 4px solid #fff; }
.cs-stack-1 { width: 62%; height: 62%; top: 0; left: 0; transform: rotate(-3deg); z-index: 1; }
.cs-stack-2 { width: 58%; height: 60%; bottom: 0; right: 3%; transform: rotate(2.5deg); z-index: 2; }
.cs-stack-3 { width: 48%; height: 50%; top: 24%; left: 33%; transform: rotate(-1deg); z-index: 3; }

/* Texte + 2 cartes images */
.cs-diff { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.cs-diff-txt h2 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: #0e1320; line-height: 1.08; margin-bottom: 1rem; }
.cs-diff-txt h2 em { color: var(--blue); font-style: normal; }
.cs-diff-txt p { font-size: 14px; line-height: 1.8; color: #54607a; margin-bottom: 1.2rem; }
.cs-diff-sign { font-weight: 700; color: #0e1320; font-size: 14px; display: flex; flex-direction: column; }
.cs-diff-sign span { font-weight: 400; font-size: 12px; color: #8893a5; margin-top: 2px; }
.cs-diff-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.cs-diff-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 34px rgba(20,30,50,.1); }
.cs-diff-card img { width: 100%; height: 145px; object-fit: cover; display: block; }
.cs-diff-card figcaption { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.cs-diff-card strong { font-size: 14px; color: #0e1320; }
.cs-diff-card figcaption span { font-size: 12px; line-height: 1.55; color: #66708a; }

@media (max-width: 760px) {
  /* Timeline VERTICALE : 01 → 05 reliés, séquence logique de haut en bas */
  .cs-steps { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; max-width: 240px; margin: 2rem auto 3.2rem; }
  .cs-steps::before { display: block; top: 12px; bottom: 12px; left: 6px; right: auto; width: 2px; height: auto; }
  .cs-stepitem { flex: none; flex-direction: row; align-items: center; gap: .85rem; text-align: left; padding: .55rem 0; }
  .cs-dot { margin-bottom: 0; flex: 0 0 auto; }
  .cs-stepnum { margin-bottom: 0; }
  .cs-stack { height: 300px; max-width: 420px; }
  .cs-diff { grid-template-columns: 1fr; gap: 2rem; }
}

/* Fix superposition : les cartes passent AU-DESSUS du blanc (plus coupées) */
.cs-page .cs-transition { z-index: 7; }

/* Showcase : 3 images (gauche) + texte (droite) */
.cs-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; margin-bottom: 1rem; }
.cs-showcase .cs-stack { margin: 0; max-width: none; height: 360px; }
.cs-showcase-txt h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.95rem); color: #0e1320; line-height: 1.15; margin-bottom: 1rem; }
.cs-showcase-txt p { font-size: 14px; line-height: 1.85; color: #54607a; margin-bottom: 1rem; }

.cs-why.cs-light { padding-bottom: 6rem; }

@media (max-width: 820px) {
  .cs-showcase { grid-template-columns: 1fr; gap: 2.5rem; }
  /* width:100% obligatoire : sans ça, l'item de grille à colonne unique
     avec margin auto s'effondre à 0 (enfants en position absolue). */
  .cs-showcase .cs-stack { height: 300px; max-width: 440px; width: 100%; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .motif { animation: none; opacity: .1; }
}

/* ════════════════════════════════════
   RESPONSIVE — page prestation (overrides finaux, prioritaires)
════════════════════════════════════ */
@media (max-width: 980px) {
  /* Cartes empilées toujours "à cheval" : dégradé dur sombre→blanc à 50%
     de la bande, donc la couture passe au MILIEU de la pile (robuste,
     indépendant du nombre de cartes / de leur hauteur). */
  .cs-page .cs-transition { background: linear-gradient(to bottom, transparent 50%, #f3f5f8 50%); }
  .cs-page .cs-transition .cs-cards { margin-top: 0; margin-bottom: 0; }
  /* -1px : chevauchement pour supprimer le liseré sombre au joint des sections */
  .cs-page .cs-why.cs-light { padding-top: 4.5rem; margin-top: -1px; }
  /* Respiration entre les boutons du hero et la pile de cartes */
  .cs-page .cs-hero { padding-bottom: 4.5rem; }
}
/* Réalisations cs-page : 3 tuiles → on garde 3 colonnes (pas de case vide
   comme avec la grille générique à 2 colonnes), puis 1 colonne en mobile. */
@media (max-width: 860px) {
  .cs-page .projets-fullgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .cs-page .projets-fullgrid { grid-template-columns: 1fr; }
  .cs-page .cs-why.cs-light { padding-top: 3.5rem; }
  /* Paddings verticaux resserrés sur petits écrans */
  .cs-page .cs-grid-sec,
  .cs-page .cs-offer-sec,
  .cs-page .cs-squares-sec { padding: 4rem 0; }
  .cs-page .cs-diamond { padding: 5rem 0; }
  .cs-page .cs-why.cs-light { padding-bottom: 4rem; }
  .cs-page .real-cta { padding: 4rem 0 4.5rem; }
  .cs-page .cs-offer-sec .cs-price { font-size: 2.8rem; }
}

/* ════════════════════════════════════
   CRÉATION DE SITE INTERNET — refonte thème TTT (sombre)
   Réutilise : .cs-hero, .cs-cards, .cs-feature, .cs-icard,
   .cs-step, .cs-diamond, .real-cta, .footer …
════════════════════════════════════ */
/* Le contenu passe AU-DESSUS des motifs (fixes + scopés) */
.cs-page > section, .cs-page > footer { position: relative; z-index: 1; }

/* Hero un peu moins haut + respiration pour les cartes flottantes */
.csi-hero { min-height: 78vh; padding-bottom: 7rem; }

/* Pictos dispersés dans le hero (au-dessus de la vidéo, sous le texte) */
.csx-pictos { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.csx-pi {
  position: absolute; font-family: 'Cormorant Garamond', serif; font-style: italic;
  color: rgba(255,255,255,.30); line-height: 1; user-select: none;
  text-shadow: 0 0 8px rgba(0,0,0,.5);
  animation: csxDrift linear infinite;
}
.csx-pi--d { font-style: normal; }
.csx-pi--d img { width: 1.1em; height: auto; display: block; opacity: .55; }
@keyframes csxDrift {
  0%   { transform: translateY(8px) rotate(var(--rot,0deg)); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(-52px) rotate(var(--rot,0deg)); opacity: 0; }
}

/* Bouton plein bleu (CTA sur fond sombre) */
.svc-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--blue); color: #fff;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  padding: .85rem 1.7rem; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--blue); cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s;
}
.svc-btn:hover { background: var(--blue-dk); border-color: var(--blue-dk); transform: translateY(-2px); }

/* Bloc "sur-mesure" : image encadrée */
.cs-feature-media { position: relative; }
.cs-feature-img {
  width: 100%; display: block; border-radius: 14px;
  border: 1px solid var(--border); box-shadow: 0 24px 50px rgba(0,0,0,.4);
}
.cs-feature-media::before {
  content: ''; position: absolute; left: -16px; top: -16px; width: 78px; height: 78px;
  border: 1.5px solid rgba(79,124,255,.4); border-radius: 12px; z-index: -1;
}
.cs-feature .section-title { text-align: left; }
.cs-feature .svc-btn { margin-top: .4rem; }

/* Vitrine de sites livrés : texte + captures façon fenêtre navigateur */
/* align-items:start (et non center) : sinon la colonne de texte est centrée
   verticalement et « flotte » au milieu au lieu de suivre le défilement. */
.cs-sites-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; align-items: start; }
/* Le texte se cale en haut et accompagne le défilement des ordis. */
.cs-sites-txt { position: sticky; top: 96px; align-self: start; }
.cs-sites-txt .section-title, .cs-sites-txt .section-tag { text-align: left; }
.cs-sites-shots { display: flex; flex-direction: column; gap: 1.6rem; }
.site-shot {
  display: block; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-3);
  box-shadow: 0 20px 44px rgba(0,0,0,.42); text-decoration: none;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.site-shot:hover { transform: translateY(-5px); border-color: rgba(79,124,255,.5); box-shadow: 0 26px 56px rgba(0,0,0,.5); }
.site-shot-bar { display: flex; align-items: center; gap: 6px; padding: .6rem .85rem; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.site-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.site-shot-url { margin-left: .65rem; font-family: 'Inter', sans-serif; font-size: 11px; color: var(--gray); letter-spacing: .02em; }
.site-shot-go { margin-left: auto; font-size: 11px; color: var(--blue); font-weight: 600; opacity: 0; transition: opacity .3s; }
.site-shot:hover .site-shot-go { opacity: 1; }
.site-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .cs-sites-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  /* En 1 colonne, un texte collant passerait par-dessus les ordis. */
  .cs-sites-txt { position: static; }
}

/* Section vidéos : grille 3 cartes plein format (réutilise .cs-icard) */
.csi-vids { padding: 6rem 0; background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.csi-vids .section-title { text-align: center; }
.csi-vids .section-tag { text-align: center; }
.csi-vidgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.4rem; border-radius: 14px; overflow: hidden; }

/* Méthode : 3 étapes (réutilise .cs-step, fond sombre) */
.csi-method { position: relative; overflow: hidden; padding: 6rem 0; background: var(--bg); }
.csi-method .container { position: relative; z-index: 1; }
.csi-method .section-title, .csi-method .section-tag { text-align: center; }
.csi-method .cs-why-grid { position: relative; z-index: 1; margin-top: 2.4rem; }
/* Ligne de pictos qui défile, à 75% de la section, DERRIÈRE les cartes */
.csi-ticker {
  position: absolute; top: 75%; left: 50%;
  width: 100vw; height: 150px;
  transform: translate(-50%, -50%);
  z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.csi-ticker-track { position: absolute; inset: 0; }
.csi-ticker .tk { color: rgba(150, 166, 196, .6); }
.csi-ticker .tk--diamond img { opacity: .5; }
/* Ticker pictos : visible aussi en mobile (masqué seulement si reduced-motion) */
@media (prefers-reduced-motion: reduce) { .csi-ticker { display: none; } }

/* ── MOBILE : les pictos ne défilent plus en ligne, ils TOMBENT sur toute la section.
   Une ligne horizontale est illisible sur un écran étroit ; la chute occupe la hauteur.
   Le `top` posé en ligne par le JS est neutralisé, `--x` (aussi posé par le JS)
   devient la position horizontale. `--vdist` est calculé en JS = hauteur de la section. ── */
@media (max-width: 900px) {
  .csi-ticker, .projets-ticker {
    top: 0; left: 0; right: auto;
    transform: none;
    width: 100%; height: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  }
  .csi-ticker .tk, .projets-ticker .tk {
    top: 0 !important;                 /* écrase le top: X% / X px posé en ligne */
    left: var(--x, 50%);
    animation-name: tickerDriftV;
  }
}

/* Bande diamant : CTA intermédiaire */
.csi-diamond .svc-btn { margin-top: 1.6rem; }
.csi-diamond .section-title { margin-bottom: .4rem; }
/* Texte recentré (dans .container) + diamant bien visible à DROITE */
.csi-diamond .cs-diamond-inner { margin: 0 auto; text-align: center; }
.csi-diamond .cs-diamond-bg {
  right: -1%; bottom: -10%; left: auto; top: auto; transform: none;
  width: min(520px, 46%); opacity: .14;
}

/* Utilitaire accessibilité : visible lecteurs d'écran / Google, pas à l'œil */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Gabarit éditorial partagé : rail collant (gauche) + contenu (droite) ── */
.csi-split { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 3rem 4rem; align-items: start; }
.csi-rail { position: sticky; top: 88px; }
.csi-rail .section-tag { text-align: left; }
.csi-rail .section-title { text-align: left; margin-bottom: 1.1rem; }
.csi-rail-lead { font-size: 14px; line-height: 1.85; color: var(--gray); margin-bottom: 1.6rem; max-width: 360px; }
.csi-rail .svc-btn { margin-top: .2rem; }

/* mini-stats dans le rail */
.csi-stats { display: flex; gap: 2rem; margin-bottom: 1.7rem; }
.csi-stat b { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.5rem; color: #fff; line-height: 1; }
.csi-stat b em { color: var(--blue); font-style: normal; }
.csi-stat span { display: block; margin-top: .35rem; font-size: 11.5px; color: var(--gray); letter-spacing: .02em; }

/* ── Section contenu SEO (éditorial) ── */
.csi-ed { padding: 6.5rem 0; background: var(--bg); }
.csi-ed-intro { font-size: 15px; line-height: 1.95; color: var(--gray); margin-bottom: 2rem; }
.csi-ed-block { position: relative; padding-bottom: 1.9rem; margin-bottom: 1.9rem; border-bottom: 1px solid var(--border); }
.csi-ed-block h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--txt); margin-bottom: .55rem; display: flex; align-items: baseline; gap: .65rem; }
.csi-ed-block h3 .n { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.4rem; color: rgba(79,124,255,.6); }
.csi-ed-block p { font-size: 14.5px; line-height: 1.9; color: var(--gray); margin: 0; }
.csi-ed-sub { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .95rem; color: var(--txt); margin: 0 0 1rem; }
.csi-ed-checks { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.4rem; margin: 0 0 2rem; }
.csi-ed-checks li { position: relative; padding-left: 1.5rem; font-size: 13.5px; line-height: 1.5; color: var(--txt-soft); }
.csi-ed-checks li::before { content: '\25C6'; position: absolute; left: 0; top: .15em; font-size: .68em; color: var(--blue); }
.csi-ed-checks strong { color: var(--txt); font-weight: 600; }
.csi-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.csi-chip { font-size: 12px; color: var(--gray); border: 1px solid var(--border); border-radius: 999px; padding: .4rem .9rem; background: rgba(255,255,255,.02); }

/* ── FAQ : rail + accordéon en cartes (thème sombre) ── */
.csi-faq { padding: 6.5rem 0; background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.csi-faq-list { display: flex; flex-direction: column; gap: .8rem; }
.csi-faq-item { border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.015); transition: border-color .25s, background .25s; }
.csi-faq-item[open] { border-color: rgba(79,124,255,.4); background: var(--bg-3); }
.csi-faq-item summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.15rem 3rem 1.15rem 1.3rem;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem;
  color: var(--txt); transition: color .25s;
}
.csi-faq-item summary::-webkit-details-marker { display: none; }
.csi-faq-item summary::after {
  content: '+'; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--blue);
}
.csi-faq-item[open] summary::after { content: '\2212'; }
.csi-faq-item summary:hover { color: var(--blue); }
.csi-faq-a { padding: 0 1.3rem 1.3rem; }
.csi-faq-a p { font-size: 13.8px; line-height: 1.8; color: var(--gray); margin: 0; }

/* Responsive : rails non collants + 1 colonne */
@media (max-width: 900px) {
  .csi-split { grid-template-columns: 1fr; gap: 2rem; }
  .csi-rail { position: static; }
  .csi-ed-checks { grid-template-columns: 1fr; }
}

/* ── Réassurance sous les CTA (icône inline pour éviter qu'elle s'isole) ── */
.csi-reassure { margin-top: 1rem; font-size: 12.5px; line-height: 1.6; color: var(--gray); }
.csi-reassure svg { color: var(--blue); vertical-align: -2px; margin-right: .4rem; }

/* ── Preuves / résultats : clients en haut de Google ── */
.csi-proof { padding: 6rem 0; background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.csi-proof .section-tag, .csi-proof .section-title { text-align: center; }
.csi-proof .section-tag { justify-content: center; }
.csi-proof-sub { text-align: center; font-size: 14px; line-height: 1.7; color: var(--gray); max-width: 580px; margin: .4rem auto 0; }
.csi-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.6rem; }
.csi-proof-card { background: rgba(19,27,42,.6); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; transition: border-color .3s, transform .3s; }
.csi-proof-card:hover { border-color: rgba(79,124,255,.4); transform: translateY(-4px); }
.csi-proof-q { display: flex; align-items: center; gap: .6rem; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: .55rem .95rem; font-size: 12.5px; color: var(--txt-soft); margin-bottom: 1.1rem; }
.csi-proof-q svg { color: var(--gray); flex-shrink: 0; }
.csi-proof-client { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--txt); margin-bottom: .3rem; }
.csi-proof-cat { font-size: 12.5px; color: var(--gray); margin-bottom: 1.1rem; }
.csi-proof-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: 11.5px; font-weight: 600; color: var(--blue); background: rgba(79,124,255,.1); border: 1px solid rgba(79,124,255,.3); border-radius: 999px; padding: .38rem .8rem; }
.csi-proof-note { text-align: center; font-size: 12.5px; color: var(--gray); margin-top: 1.9rem; }
@media (max-width: 820px) { .csi-proof-grid { grid-template-columns: 1fr; } }

/* ── Avis client : carte façon avis Google (crédible + légère) ── */
.csi-review { padding: 5.5rem 0; background: var(--bg); }
.csi-review-card { max-width: 640px; margin: 0 auto; background: var(--bg-2); border: 1px solid var(--border); border-radius: 18px; padding: 2.3rem 2.5rem; box-shadow: 0 20px 46px rgba(0,0,0,.35); }
.csi-review-top { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.1rem; }
.csi-review-g { width: 20px; height: 20px; flex-shrink: 0; }
.csi-review-stars { color: #FFC83D; letter-spacing: 2px; font-size: 1rem; line-height: 1; }
.csi-review-src { margin-left: auto; font-size: 12px; color: var(--gray); }
.csi-review-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.55; color: var(--txt); margin-bottom: 1.5rem; }
.csi-review-author { display: flex; align-items: center; gap: .8rem; }
.csi-review-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: .03em; flex-shrink: 0; }
.csi-review-author strong { display: block; font-size: 14px; font-weight: 600; color: var(--txt); }
.csi-review-author span { font-size: 12px; color: var(--gray); }
@media (max-width: 520px) { .csi-review-card { padding: 1.8rem 1.4rem; } }

@media (max-width: 900px) {
  .cs-feature .cs-feature-grid { grid-template-columns: 1fr; gap: 2.2rem; }
}
@media (max-width: 780px) {
  .csi-vidgrid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .csi-hero { min-height: 70vh; }
  .csi-vids, .csi-method { padding: 4rem 0; }
}

/* ════════════════════════════════════
   PAGE PRESTATION — Création de site E-COMMERCE (.ec-*)
   Construction DISTINCTE : hero asymétrique + mockup boutique,
   bande confiance, bento, lignes alternées, stepper horizontal.
════════════════════════════════════ */
/* HERO split (asymétrique) */
.ec-hero { position: relative; overflow: hidden; padding: 4.5rem 0 4rem; background: var(--bg); border-bottom: 1px solid var(--border); }
.ec-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(85% 80% at 88% 12%, rgba(79,124,255,.12), transparent 60%); pointer-events: none; }
.ec-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; position: relative; z-index: 1; }
.ec-hero-title { font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: -.015em; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.06; color: var(--txt); margin: .6rem 0 1.1rem; }
.ec-hero-title em { color: var(--blue); font-style: normal; }
.ec-hero-sub { font-size: 15px; line-height: 1.8; color: var(--gray); max-width: 470px; margin-bottom: 1.7rem; }
.ec-hero-cta { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.ec-hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.7rem; }
.ec-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: 12px; color: var(--txt-soft); border: 1px solid var(--border); border-radius: 999px; padding: .42rem .85rem; }
.ec-chip svg { color: var(--blue); }

/* Mockup boutique (fenêtre navigateur) */
.ec-shop { background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 64px rgba(0,0,0,.5); }
.ec-shop-bar { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: var(--bg-3); border-bottom: 1px solid var(--border); }
.ec-shop-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.ec-shop-url { margin-left: .6rem; font-size: 11px; color: var(--gray); letter-spacing: .02em; }
.ec-shop-cart { margin-left: auto; color: var(--txt-soft); display: flex; align-items: center; gap: .3rem; font-size: 11px; }
.ec-shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.ec-prod { background: var(--bg-2); padding: .85rem; }
.ec-prod-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; margin-bottom: .6rem; }
.ec-prod-name { font-size: 12.5px; color: var(--txt); font-weight: 500; }
.ec-prod-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .35rem; }
.ec-prod-price { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px; color: var(--blue); }
.ec-prod-add { width: 26px; height: 26px; border-radius: 7px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }

/* Bande confiance */
.ec-trust { background: var(--bg-2); border-bottom: 1px solid var(--border); }
.ec-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); }
.ec-trust-item { background: var(--bg-2); padding: 1.6rem 1.4rem; display: flex; align-items: center; gap: .85rem; }
.ec-trust-item svg { color: var(--blue); flex-shrink: 0; }
.ec-trust-item h3 { font-family: 'Poppins', sans-serif; font-size: 13.5px; color: var(--txt); font-weight: 600; margin-bottom: .15rem; }
.ec-trust-item p { font-size: 12px; color: var(--gray); line-height: 1.4; }

/* Bento de fonctionnalités */
.ec-bento-sec { padding: 6rem 0; background: var(--bg); }
.ec-bento-sec .section-tag, .ec-bento-sec .section-title { text-align: center; }
.ec-bento-sec .section-tag { justify-content: center; }
.ec-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.6rem; }
.ec-tile { background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px; padding: 1.8rem; transition: border-color .3s, transform .3s; }
.ec-tile:hover { border-color: rgba(79,124,255,.4); transform: translateY(-4px); }
.ec-tile--lg { grid-column: span 2; grid-row: span 2; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; }
.ec-tile--lg .ec-tile-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; z-index: 0; }
.ec-tile--lg::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,22,34,.3) 0%, rgba(15,22,34,.92) 100%); }
.ec-tile--lg > * { position: relative; z-index: 2; }
.ec-tile-ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 11px; color: var(--blue); margin-bottom: 1rem; }
.ec-tile h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--txt); margin-bottom: .45rem; }
.ec-tile--lg h3 { font-size: 1.55rem; }
.ec-tile p { font-size: 13px; line-height: 1.65; color: var(--gray); }

/* Lignes alternées (image/vidéo ↔ texte) */
.ec-rows { padding: 5.5rem 0; background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.ec-row + .ec-row { margin-top: 5rem; }
.ec-row--rev .ec-row-media { order: 2; }
.ec-row-media img, .ec-row-media video { width: 100%; border-radius: 14px; border: 1px solid var(--border); display: block; box-shadow: 0 22px 46px rgba(0,0,0,.42); aspect-ratio: 4 / 3; object-fit: cover; }
.ec-row-txt .section-tag { text-align: left; }
.ec-row-txt h2 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: var(--txt); line-height: 1.12; margin: .3rem 0 1rem; }
.ec-row-txt h2 em { color: var(--blue); font-style: normal; }
.ec-row-txt p { font-size: 14.5px; line-height: 1.85; color: var(--gray); margin-bottom: 1.1rem; }
.ec-row-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.ec-row-list li { position: relative; padding-left: 1.6rem; font-size: 13.5px; color: var(--txt-soft); }
.ec-row-list li::before { content: '✓'; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

/* Stepper horizontal */
.ec-steps-sec { padding: 6rem 0; background: var(--bg); }
.ec-steps-sec .section-tag, .ec-steps-sec .section-title { text-align: center; }
.ec-steps-sec .section-tag { justify-content: center; }
.ec-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 2.8rem; counter-reset: ec; }
.ec-step { position: relative; padding-top: 2.8rem; }
.ec-step::before { counter-increment: ec; content: counter(ec, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.5rem; color: rgba(79,124,255,.55); }
.ec-step::after { content: ''; position: absolute; top: 14px; left: 3rem; right: -1.4rem; height: 1px; background: var(--border); }
.ec-step:last-child::after { display: none; }
.ec-step h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; color: var(--txt); margin-bottom: .5rem; }
.ec-step p { font-size: 13px; line-height: 1.6; color: var(--gray); }

/* Ce qui est inclus */
.ec-inc-sec { padding: 5.5rem 0; background: var(--bg-2); border-top: 1px solid var(--border); }
.ec-inc { background: linear-gradient(135deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--border); border-radius: 18px; padding: 2.6rem; }
.ec-inc-head { text-align: center; margin-bottom: 1.8rem; }
.ec-inc-head .section-tag { justify-content: center; text-align: center; }
.ec-inc-head .section-title { text-align: center; }
.ec-inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 2rem; }
.ec-inc-grid li { list-style: none; position: relative; padding-left: 1.7rem; font-size: 14px; color: var(--txt-soft); line-height: 1.5; }
.ec-inc-grid li::before { content: '✓'; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

@media (max-width: 920px) {
  .ec-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ec-bento { grid-template-columns: 1fr 1fr; }
  .ec-tile--lg { grid-column: span 2; grid-row: span 1; min-height: 220px; }
  .ec-row { grid-template-columns: 1fr; gap: 1.8rem; }
  .ec-row--rev .ec-row-media { order: 0; }
  .ec-steps { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.4rem; }
  .ec-step::after { display: none; }
}
@media (max-width: 600px) {
  .ec-trust-grid { grid-template-columns: 1fr 1fr; }
  .ec-bento { grid-template-columns: 1fr; }
  .ec-tile--lg { grid-column: span 1; }
  .ec-steps { grid-template-columns: 1fr; }
  .ec-inc-grid { grid-template-columns: 1fr; }
  .ec-inc { padding: 1.8rem; }
}

/* Tickers de pictos derrière certaines sections e-commerce
   (réutilise .csi-ticker / .csi-ticker-track / .tk déjà définis) */
.ec-bento-sec, .ec-steps-sec, .ec-inc-sec { position: relative; overflow: hidden; }
.ec-bento-sec > .container, .ec-steps-sec > .container, .ec-inc-sec > .container { position: relative; z-index: 1; }
.ec-steps-sec .csi-ticker { top: 70%; }

/* Ticker VERTICAL — pictos qui descendent (colonnes latérales) */
.ec-vticker { position: absolute; top: 0; bottom: 0; width: 132px; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); }
.ec-vticker--left { left: 0; }
.ec-vticker--right { right: 0; }
.ec-vticker-track { position: absolute; inset: 0; }
.ec-vticker .tk { top: 0; left: auto; color: rgba(150, 166, 196, .55); animation-name: tickerDriftV; }
.ec-vticker .tk--diamond img { opacity: .5; }
@keyframes tickerDriftV {
  from { transform: translateY(-80px) rotate(var(--rot, 0deg)); }
  to   { transform: translateY(var(--vdist, 760px)) rotate(var(--rot, 0deg)); }
}
@media (max-width: 760px) { .ec-vticker { width: 60px; } }

/* ════════════════════════════════════
   HEADER — menu déroulant "Services" (accès aux pages prestation)
════════════════════════════════════ */
.nav-drop { position: relative; }
.nav-drop-t {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; cursor: pointer; padding: .3rem 0;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: .02em; color: rgba(255,255,255,.8); transition: color .25s;
}
.top-nav .nav-drop-t { text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.nav-drop-t svg { transition: transform .3s var(--ease); }
.nav-drop:hover .nav-drop-t, .nav-drop:focus-within .nav-drop-t { color: var(--txt); }
.nav-drop:hover .nav-drop-t svg, .nav-drop:focus-within .nav-drop-t svg { transform: rotate(180deg); }

.nav-drop-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 300px; padding: .5rem;
  background: rgba(10,14,22,.97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 54px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .35s;
  z-index: 60;
}
/* Pont invisible : comble l'espace entre "Services" et le menu (évite la fermeture quand on traverse) */
.nav-drop-menu::after { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.nav-drop-menu::before {
  content: ''; position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg); width: 11px; height: 11px;
  background: rgba(10,14,22,.97); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear 0s;
}
.nav-drop-item { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .8rem; border-radius: 10px; text-decoration: none; transition: background .2s; }
.nav-drop-item:hover { background: rgba(79,124,255,.12); }
.nav-drop-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(79,124,255,.12); border: 1px solid rgba(79,124,255,.25); color: var(--blue); }
.nav-drop-txt strong { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--txt); letter-spacing: 0; }
.nav-drop-txt > span { display: block; font-size: 11.5px; color: var(--gray); margin-top: 2px; line-height: 1.35; }

/* Mobile : le déroulant s'affiche EN LIGNE dans le menu plein écran.
   Point de rupture aligné sur celui du burger (600px — cf. `.sub-toggle`).
   Le bloc jumeau visait `.top-nav`, supprimé depuis l'unification du header. */
@media (max-width: 600px) {
  .sub-nav .nav-drop { display: block; }
  .sub-nav .nav-drop-t { display: flex; width: 100%; justify-content: space-between; font-size: 1rem; padding: .95rem .2rem; color: rgba(255,255,255,.88); border-bottom: 1px solid rgba(255,255,255,.07); }
  /* ⚠️ pointer-events: INHERIT (pas auto) : le menu burger fermé est pointer-events:none ;
     `auto` réactivait les clics sur les items du sous-menu même invisible → ils captaient
     les taps destinés au carrousel derrière (les flèches menaient vers une page). */
  .sub-nav .nav-drop-menu { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: inherit; width: auto; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: .2rem 0 .5rem .4rem; }
  /* ⚠️ BUG CORRIGÉ : `.nav-drop:focus-within .nav-drop-menu` (spécificité 0,3,0)
     battait `.sub-nav .nav-drop-menu` (0,2,0) et réimposait translateX(-50%) —
     au tap sur « Services » le sous-menu partait sur le côté. On repasse devant. */
  .sub-nav .nav-drop:hover .nav-drop-menu,
  .sub-nav .nav-drop:focus-within .nav-drop-menu { transform: none; }
  .sub-nav .nav-drop-menu::before,
  .sub-nav .nav-drop-menu::after { display: none; }   /* pont de survol inutile ici */
  .sub-nav .nav-drop-txt > span { display: none; }
  .sub-nav .nav-drop-item { padding: .55rem .4rem; }
}

/* ════════════════════════════════════
   HEADER THÉMATISÉ PAR PROJET
   (--proj-accent = "R,G,B" extrait des photos du projet)
════════════════════════════════════ */
.sub-bar.proj-themed {
  background: linear-gradient(180deg, rgba(var(--proj-accent), .16), rgba(8,12,20,.94));
  border-bottom: 2px solid rgba(var(--proj-accent), .6);
}
.sub-bar.proj-themed .sub-cta:hover { border-color: rgb(var(--proj-accent)); }
.sub-bar.proj-themed .nav-drop-ico { background: rgba(var(--proj-accent), .14); border-color: rgba(var(--proj-accent), .3); color: rgb(var(--proj-accent)); }
.sub-proj-name {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px;
  color: rgba(255,255,255,.92); letter-spacing: .01em; white-space: nowrap; pointer-events: none;
}
.sub-proj-name::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: rgb(var(--proj-accent)); box-shadow: 0 0 10px rgba(var(--proj-accent), .85);
}
@media (max-width: 980px) { .sub-proj-name { display: none; } }

/* Grille des captures de sites (section "Sites internet créés") */
.real-sites { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.2rem; }
@media (max-width: 680px) { .real-sites { grid-template-columns: 1fr; } }


/* ════════════════════════════════════
   COVERFLOW 3D — vitrine « Sites internet créés »
   (d'après la réf. vidéo : cartes portrait en arc, centrale de face,
    titre par-dessus, fond flou du site actif, glissement d'un cran)
════════════════════════════════════ */
.cf {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  background: #080B12;
  padding: 4.5rem 0 2rem;
  --cf-w: clamp(240px, min(38vw, 80vh), 600px);  /* largeur de carte PAYSAGE (16:10) */
}

/* (Le fond .cf-bg a été retiré : remplacé par l'aura de blobs, cf. plus bas.) */
.cf::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 45%, rgba(8,11,18,.05), rgba(8,11,18,.74) 80%),
    linear-gradient(180deg, rgba(8,11,18,.85), transparent 22%, transparent 72%, rgba(8,11,18,.95));
}

/* Scène 3D */
.cf-stage {
  position: relative; z-index: 2;
  height: calc(var(--cf-w) * 0.625 + 20px);   /* 16/10 → la scène épouse la carte */
  min-height: 220px;
  perspective: 1500px;
  perspective-origin: 50% 50%;
}
.cf-card {
  position: absolute; top: 50%; left: 50%;
  width: var(--cf-w);
  aspect-ratio: 16 / 10;
  margin: 0; padding: 0; border: 0; background: none;
  border-radius: 12px; overflow: hidden;
  /* liseré + ombre sur TOUTES les cartes (avant : seulement la centrale) → elles
     se détachent du fond au lieu de sembler collées dessus */
  box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1),
              inset 0 0 26px 5px rgba(6,9,15,.5);   /* vignette : adoucit un contenu clair sur les bords */
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform .8s var(--ease), opacity .8s var(--ease), filter .8s var(--ease);
  will-change: transform;
  /* pas de curseur « main » : les cartes ne mènent nulle part pour l'instant */
  cursor: default;
}
.cf-card img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* Voile : plus la carte s'éloigne du centre, plus elle s'assombrit */
.cf-card::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(6,9,15,.55);
  transition: opacity .8s var(--ease);
}

/* Positions — arc PAYSAGE. La carte de devant n'est PAS assombrie (on veut voir le site).
   Le titre est désormais SOUS l'arc, donc plus besoin de voiler la carte centrale. */
.cf-card[data-pos="0"] {
  transform: translate(-50%, -50%) translateZ(60px) rotateY(0deg) scale(1);
  z-index: 5; opacity: 1;
  box-shadow: 0 30px 66px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.16),
              inset 0 0 22px 3px rgba(6,9,15,.32);   /* vignette plus douce sur la carte en vedette */
}
.cf-card[data-pos="0"]::after { opacity: 0; }

.cf-card[data-pos="-1"] { transform: translate(-50%, -50%) translateX(-84%) translateZ(-60px) rotateY(34deg) scale(.84);  z-index: 4; opacity: 1; }
.cf-card[data-pos="1"]  { transform: translate(-50%, -50%) translateX(84%)  translateZ(-60px) rotateY(-34deg) scale(.84); z-index: 4; opacity: 1; }
.cf-card[data-pos="-1"]::after, .cf-card[data-pos="1"]::after { opacity: .4; }

.cf-card[data-pos="-2"] { transform: translate(-50%, -50%) translateX(-152%) translateZ(-200px) rotateY(42deg) scale(.68);  z-index: 3; opacity: 1; }
.cf-card[data-pos="2"]  { transform: translate(-50%, -50%) translateX(152%)  translateZ(-200px) rotateY(-42deg) scale(.68); z-index: 3; opacity: 1; }
.cf-card[data-pos="-2"]::after, .cf-card[data-pos="2"]::after { opacity: .68; }

/* Au-delà : hors scène */
.cf-card[data-pos="-3"] { transform: translate(-50%, -50%) translateX(-205%) translateZ(-320px) rotateY(48deg) scale(.6);  z-index: 2; opacity: 0; }
.cf-card[data-pos="3"]  { transform: translate(-50%, -50%) translateX(205%)  translateZ(-320px) rotateY(-48deg) scale(.6); z-index: 2; opacity: 0; }

/* Titre SOUS l'arc (horizontal) : il ne recouvre plus le site, on le voit en entier.
   Posé sur le fond aura sombre → plus besoin de voile flou. */
.cf-txt {
  position: relative; z-index: 6;
  width: min(620px, 86vw); margin: 1.7rem auto 0; text-align: center;
  pointer-events: none;
}
.cf-title {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 3.3vw, 2.7rem); line-height: 1.1;
  letter-spacing: .01em; text-transform: uppercase; color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,.75);
  margin: 0;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.cf-line { display: block; width: 42px; height: 2px; background: rgba(255,255,255,.6); margin: 1rem auto .9rem; }
.cf-sub {
  font-family: 'Poppins', sans-serif; font-size: 13.5px; color: rgba(255,255,255,.82);
  text-shadow: 0 2px 14px rgba(0,0,0,.7); margin: 0;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
/* Pendant le glissement, le texte s'efface puis revient (comme la réf.) */
.cf.is-moving .cf-title, .cf.is-moving .cf-sub { opacity: 0; transform: translateY(6px); }

/* Étiquette — dans le bloc de texte : au-dessus de la carte elle tombait dans le
   header, et posée dessus elle se cognait à la barre de nav du site. */
.cf-tag {
  display: inline-block; margin-bottom: .9rem;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: .3rem .7rem; border-radius: 4px;
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.cf.is-moving .cf-tag { opacity: 0; transform: translateY(6px); }

/* Flèches */
.cf-nav {
  position: absolute; z-index: 7; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  color: #fff; cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.cf-nav:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }
.cf-prev { left: max(1.2rem, 3vw); }
.cf-next { right: max(1.2rem, 3vw); }
.cf-prev:hover { transform: translateY(-50%) translateX(-3px); }
.cf-next:hover { transform: translateY(-50%) translateX(3px); }

/* Pastilles */
.cf-dots { position: relative; z-index: 6; display: flex; justify-content: center; gap: .5rem; margin-top: 2.2rem; }
.cf-dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.28); border: 0; cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.cf-dot.is-on { background: #fff; transform: scale(1.35); }

@media (max-width: 900px) {
  /* MOBILE = le carrousel en cartes PORTRAIT (le format « moins large » d'avant).
     Desktop garde le paysage 16:10 ; ici on repasse en 4:7. */
  .cf { --cf-w: clamp(150px, 56vw, 300px); }
  .cf-card { aspect-ratio: 4 / 7; }
  .cf-stage { height: calc(var(--cf-w) * 1.75 + 20px); }
  /* Positions portrait : cartes plus étroites → on peut resserrer l'arc */
  .cf-card[data-pos="-1"] { transform: translate(-50%, -50%) translateX(-88%) translateZ(-50px) rotateY(38deg) scale(.86); }
  .cf-card[data-pos="1"]  { transform: translate(-50%, -50%) translateX(88%)  translateZ(-50px) rotateY(-38deg) scale(.86); }
  .cf-card[data-pos="-2"], .cf-card[data-pos="2"] { opacity: 0; }   /* 3 cartes suffisent en mobile */
  .cf-nav { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-card, .cf-title, .cf-sub { transition: none; }
}


/* ════════════════════════════════════
   HEADER — variante « coverflow » (page Nos sites uniquement)
   D'après la réf. vidéo : nav en capitales espacées alignée à gauche
   après le logo, onglet actif souligné en bas de barre, CTA en pilule pleine.
════════════════════════════════════ */
.sub-bar--cf { gap: 2.6rem; justify-content: flex-start; }
.sub-bar--cf .sub-nav { flex: 1; gap: 2.5rem; }
.sub-bar--cf .sub-nav > a:not(.sub-cta) {
  text-transform: uppercase;
  font-size: 11px; font-weight: 600; letter-spacing: .11em;
  color: rgba(255,255,255,.78);
  padding: 24px 0;                    /* la boîte du lien remplit la barre → le trait tombe en bas */
}
.sub-bar--cf .sub-nav > a:not(.sub-cta)::after { bottom: 0; height: 2px; background: #fff; }
.sub-bar--cf .sub-nav > a.active { color: #fff; }
.sub-bar--cf .sub-nav > a.active::after { transform: scaleX(1); background: #fff; }
.sub-bar--cf .nav-drop-t { text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: .11em; }

/* CTA : pilule pleine, poussée au bout de la barre comme dans la réf. */
.sub-bar--cf .sub-nav > .sub-cta {
  margin-left: auto;
  border-radius: 6px;
  background: var(--blue); border-color: var(--blue);
  color: #fff !important;
  padding: .6rem 1.5rem !important;
  letter-spacing: .1em;
  box-shadow: 0 6px 20px rgba(79,124,255,.3);
}
.sub-bar--cf .sub-nav > .sub-cta::after { display: none; }
.sub-bar--cf .sub-nav > .sub-cta:hover {
  background: var(--blue-dk); border-color: var(--blue-dk);
  box-shadow: 0 8px 26px rgba(79,124,255,.45);
}

@media (max-width: 600px) {
  /* En menu burger, on revient au comportement commun du site */
  .sub-bar--cf { justify-content: space-between; gap: 1rem; }
  .sub-bar--cf .sub-nav { flex: none; }
  .sub-bar--cf .sub-nav > a:not(.sub-cta) { padding: .95rem .2rem; text-transform: none; font-size: 1rem; letter-spacing: 0; }
  .sub-bar--cf .sub-nav > a:not(.sub-cta)::after { display: none; }
  .sub-bar--cf .sub-nav > .sub-cta { margin-left: 0; border-radius: 6px; }
}


/* ── Vidéo du site dans la carte : ne joue que sur la carte de devant ──
   L'image reste dessous et sert d'affiche + de repli si la vidéo ne charge pas. */
.cf-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .7s var(--ease);
  pointer-events: none;
}
.cf-vid.is-on { opacity: 1; }
/* Mobile : cartes minuscules, la vidéo n'apporte rien et coûte ~650 Ko */
@media (max-width: 900px) { .cf-vid { display: none; } }
@media (prefers-reduced-motion: reduce) { .cf-vid { display: none; } }

/* ════════════════════════════════════
   AURA — fond de dégradés mouvants aux couleurs du site de devant
   (remplace la vidéo de fond : quasi gratuit). Chaque blob est un dégradé
   radial STATIQUE ; on n'anime que sa position (transform → composité GPU).
   Le flou n'est donc jamais recalculé, contrairement à une vidéo floutée.
════════════════════════════════════ */
/* @property permet de FAIRE TRANSITIONNER les couleurs (sinon elles sauteraient) */
@property --c1 { syntax: '<color>'; inherits: true; initial-value: #3E5873; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #735337; }
@property --c3 { syntax: '<color>'; inherits: true; initial-value: #796A41; }

.cf { --c1: #3E5873; --c2: #735337; --c3: #796A41;
      transition: --c1 .9s var(--ease), --c2 .9s var(--ease), --c3 .9s var(--ease); }
/* Vue détail ouverte : on FIGE l'aura du carrousel (invisible derrière l'overlay = calcul inutile) */
.cf.cf-frozen .cf-blob { animation-play-state: paused; }
/* À la fermeture : le carrousel se replace sur le dernier site vu SANS animer (pas de rattrapage visible pendant le fondu) */
.cf.cf-instant .cf-card { transition: none; }

.cf-aura { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #080B12; }
.cf-blob {
  position: absolute; border-radius: 50%;
  will-change: transform;
  opacity: .8;
}
.cf-blob--1 {
  width: 52vw; height: 52vw; top: -8%; left: -6%;
  background: radial-gradient(circle at center, var(--c1) 0%, transparent 62%);
  animation: auraDrift1 15s ease-in-out infinite;
}
.cf-blob--2 {
  width: 46vw; height: 46vw; top: 2%; right: -8%;
  background: radial-gradient(circle at center, var(--c2) 0%, transparent 62%);
  animation: auraDrift2 19s ease-in-out infinite;
}
.cf-blob--3 {
  width: 50vw; height: 50vw; bottom: -14%; left: 24%;
  background: radial-gradient(circle at center, var(--c3) 0%, transparent 62%);
  animation: auraDrift3 23s ease-in-out infinite;
}
/* Voile pour garder le carrousel et le texte lisibles par-dessus l'aura */
.cf::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 45%, rgba(8,11,18,.04), rgba(8,11,18,.6) 84%),
    linear-gradient(180deg, rgba(8,11,18,.7), transparent 20%, transparent 74%, rgba(8,11,18,.92));
}

@keyframes auraDrift1 {
  0%,100% { transform: translate(-30%, -18%); }
  50%     { transform: translate(38%, 26%); }
}
@keyframes auraDrift2 {
  0%,100% { transform: translate(26%, 12%); }
  50%     { transform: translate(-34%, 34%); }
}
@keyframes auraDrift3 {
  0%,100% { transform: translate(6%, 20%); }
  50%     { transform: translate(-30%, -28%); }
}
@media (prefers-reduced-motion: reduce) {
  .cf-blob { animation: none; }      /* on garde les couleurs, on fige le mouvement */
}

/* ═══════════════════════════════════════════
   VUE DÉTAIL D'UN PROJET (.pd) — PLEIN ÉCRAN
   Inspirée du « sac-viewer » de Booster Media :
   l'ORDINATEUR (écran + vidéo du site) arrive sur la gauche, grand et centré,
   le TÉLÉPHONE arrive derrière / sur le côté et défile,
   des BLOBS de couleur flous bougent au fond (couleurs du site),
   le VOLET TEXTE entre par la droite : logo, nom soigné, couleurs du site.
   ═══════════════════════════════════════════ */
.pd {
  --pd-panel-w: min(40%, 500px);
  --pd-accent: #8aa0c8;                 /* clair dérivé de la couleur du site (posé en JS) */
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  background: #0a0e16;                  /* base opaque : masque le carrousel derrière avant que la vidéo de fond n'apparaisse */
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s, --c1 .8s var(--ease);
}
.pd[hidden] { display: none; }
.pd.is-open { opacity: 1; visibility: visible;
  transition: opacity .45s var(--ease), --c1 .8s var(--ease); }

/* Vidéo hero du site en FOND (flou + assombrissement bakés en dur dans le fichier,
   donc AUCUN filtre CSS par frame = fluide). Couche GPU dédiée. */
.pd-bgvid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s ease;
  transform: translateZ(0); backface-visibility: hidden;
  pointer-events: none;
}
.pd-bgvid.is-on { opacity: 1; }

/* Voile sombre par-dessus la vidéo : les appareils ressortent, les bords restent profonds */
.pd-bg {
  position: absolute; inset: 0; z-index: 1; cursor: pointer;
  background: radial-gradient(ellipse 96% 92% at 40% 36%, rgba(9, 14, 22, .10) 0%, rgba(7, 11, 18, .74) 82%);
}

.pd-close {
  position: absolute; top: 22px; right: 24px; z-index: 8;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .05); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .3s;
}
.pd-close:hover { background: var(--blue); border-color: var(--blue); transform: rotate(90deg); }

/* ── Gauche : appareils, grands et centrés dans l'espace à gauche du volet ── */
.pd-stage-full {
  position: absolute; left: 0; top: 0; bottom: 0; right: var(--pd-panel-w); z-index: 2;
  pointer-events: none;                 /* le vide laisse passer le clic vers .pd-bg */
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 3vw, 3rem);
}
.pd-devices { position: relative; width: min(97%, 900px); aspect-ratio: 4 / 3; pointer-events: auto; }

.pd-laptop { position: absolute; left: 0; top: 50%; width: 85%; z-index: 2; transform: translateY(-50%); }
.pd-laptop-scr {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border: 6px solid #0f1520; border-radius: 14px 14px 0 0; background: #0b1119;
  box-shadow: 0 46px 90px rgba(0, 0, 0, .62);
}
.pd-desk { display: block; width: 100%; height: auto; }
.pd-deskvid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .5s ease;
  transform: translateZ(0); backface-visibility: hidden;
}
.pd-deskvid.is-on { opacity: 1; }
.pd-laptop-base {
  position: relative; display: block; width: 118%; height: 17px; margin-left: -9%;
  background: linear-gradient(#242f43, #121a27);
  border-radius: 0 0 15px 15px; box-shadow: 0 16px 26px rgba(0, 0, 0, .5);
}
.pd-laptop-base::after {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 11%; height: 5px; border-radius: 0 0 7px 7px; background: #0b1119;
}

.pd-phone { position: absolute; right: -1%; top: 50%; width: 22%; z-index: 1; transform: translateY(-42%); }
.pd-phone-scr {
  aspect-ratio: 9 / 19; overflow: hidden;
  border: 6px solid #171f2c; border-radius: 32px; background: #0b1119;
  box-shadow: 0 34px 66px rgba(0, 0, 0, .62);
}
.pd-mob { display: block; width: 100%; height: auto;
  will-change: transform; backface-visibility: hidden; }   /* défilement fluide sur couche GPU */
@keyframes pdScroll {
  0%, 7%   { transform: translateY(0); }
  50%      { transform: translateY(var(--pd-shift, -60%)); }
  93%, 100%{ transform: translateY(0); }
}

/* Arrivée des appareils (rejouée à chaque ouverture / changement de site).
   will-change pendant l'arrivée = couche GPU dédiée → le zoom ne saccade pas. */
.pd-laptop, .pd-phone { backface-visibility: hidden; }
.pd.is-arriving .pd-laptop { animation: pdArrive .85s cubic-bezier(.16, 1, .3, 1) both; will-change: transform; }
.pd.is-arriving .pd-phone  { animation: pdArrivePhone .95s cubic-bezier(.16, 1, .3, 1) .12s both; will-change: transform; }
@keyframes pdArrive {
  from { opacity: 0; transform: translateY(-50%) translateX(90px) scale(.9); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}
@keyframes pdArrivePhone {
  from { opacity: 0; transform: translateY(-42%) translateX(150px) scale(.86); }
  to   { opacity: 1; transform: translateY(-42%) translateX(0) scale(1); }
}

/* Changement de site (flèches) : GLISSEMENT plein écran, AUCUN fondu (que du déplacement).
   Les appareils actuels SORTENT complètement par la gauche (l'ordi, puis le téléphone décalé),
   puis ceux du site suivant ENTRENT par la droite avec le même décalage. */
.pd.is-leaving .pd-laptop { animation: pdSlideOut  .46s cubic-bezier(.55, 0, .85, .25) forwards; will-change: transform; }
.pd.is-leaving .pd-phone  { animation: pdSlideOutP .46s cubic-bezier(.55, 0, .85, .25) .13s forwards; will-change: transform; }
.pd.is-nav-in  .pd-laptop { animation: pdSlideIn   .58s cubic-bezier(.2, .85, .3, 1) both; will-change: transform; }
.pd.is-nav-in  .pd-phone  { animation: pdSlideInP  .58s cubic-bezier(.2, .85, .3, 1) .13s both; will-change: transform; }
@keyframes pdSlideOut  { from { transform: translateY(-50%) translateX(0); }     to { transform: translateY(-50%) translateX(-125vw); } }
@keyframes pdSlideOutP { from { transform: translateY(-42%) translateX(0); }     to { transform: translateY(-42%) translateX(-125vw); } }
@keyframes pdSlideIn   { from { transform: translateY(-50%) translateX(92vw); }  to { transform: translateY(-50%) translateX(0); } }
@keyframes pdSlideInP  { from { transform: translateY(-42%) translateX(92vw); }  to { transform: translateY(-42%) translateX(0); } }

/* ── Droite : volet texte qui entre par la droite ── */
.pd-detail {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 6;
  width: var(--pd-panel-w);
  padding: clamp(2rem, 4vw, 3.6rem) clamp(1.6rem, 3vw, 3rem) clamp(2rem, 4vw, 3.6rem) clamp(2.4rem, 4.5vw, 4.6rem);
  display: flex; flex-direction: column; justify-content: center; overflow-y: auto;
  background: linear-gradient(200deg, rgba(18, 26, 40, .94), rgba(10, 14, 22, .99));
  border-left: 1px solid var(--border);
  box-shadow: -40px 0 90px rgba(0, 0, 0, .5);
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.pd.is-open .pd-detail { transform: translateX(0); }

.pd-logo { display: block; height: clamp(40px, 4.4vw, 58px); width: auto; max-width: 74%; object-fit: contain; object-position: left center; margin-bottom: 1.2rem; }
.pd-logo[src=""], .pd-logo:not([src]) { display: none; }

.pd-tag {
  display: inline-block; align-self: flex-start;
  font-family: 'Poppins', sans-serif; font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pd-accent);
  border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent);
  background: color-mix(in srgb, var(--c1) 16%, transparent);
  padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1rem;
}
.pd-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(2.3rem, 4vw, 3.5rem); line-height: 1; letter-spacing: .3px;
  color: #fff; margin: 0 0 .55rem;
}
.pd-title::after {                      /* filet court à la couleur du site */
  content: ""; display: block; width: 46px; height: 3px; border-radius: 3px;
  margin-top: .8rem; background: var(--pd-accent);
}
.pd-sub {
  font-family: 'Poppins', sans-serif; font-size: .9rem; font-weight: 500;
  color: var(--pd-accent); margin: 0 0 1.3rem;
}
.pd-desc { font-size: .95rem; line-height: 1.72; color: var(--gray); margin: 0 0 1.4rem; }
.pd-meta { list-style: none; margin: 0 0 1.7rem; padding: 0; display: flex; flex-direction: column; gap: .62rem; }
.pd-meta li { display: flex; gap: .7rem; font-size: .88rem; color: #cdd6e6; line-height: 1.45; }
.pd-meta li::before { content: ""; width: 7px; height: 7px; margin-top: .42rem; border-radius: 50%; background: var(--pd-accent); flex-shrink: 0; }
.pd-cta {
  display: inline-flex; align-self: flex-start; align-items: center; gap: .5rem;
  font-family: 'Poppins', sans-serif; font-size: .82rem; font-weight: 600;
  padding: .78rem 1.6rem; border-radius: 999px; color: #fff; text-decoration: none;
  background: var(--pd-btn, var(--blue));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--pd-btn, var(--blue)) 42%, transparent);
  transition: filter .2s, transform .2s;
}
.pd-cta:hover { filter: brightness(1.12); transform: translateY(-2px); }

.pd-actions { display: flex; align-items: center; gap: .8rem; margin-top: 1.9rem; }
.pd-nav-label { font-size: .74rem; color: var(--gray); letter-spacing: .02em; }
.pd-navbtns { display: flex; gap: .5rem; margin-left: auto; }
.pd-nav {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .04); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .2s;
}
.pd-nav:hover { background: var(--pd-btn, var(--blue)); border-color: var(--pd-btn, var(--blue)); transform: translateY(-2px); }
.pd-nav svg { width: 18px; height: 18px; }

/* Entrée du texte : chaque bloc arrive de la droite, titre + sous-titre mot par mot */
.pd-detail .sd-el, .pd-title .w, .pd-sub .w { opacity: 0; }
.pd-detail.animin .sd-el { animation: sdSlideR .55s cubic-bezier(.22, 1, .36, 1) both; }
.pd-detail.animin .pd-tag     { animation-delay: .12s; }
.pd-detail.animin .pd-desc    { animation-delay: .54s; }
.pd-detail.animin .pd-meta    { animation-delay: .66s; }
.pd-detail.animin .pd-cta     { animation-delay: .78s; }
.pd-detail.animin .pd-actions { animation-delay: .86s; }
@keyframes sdSlideR { from { opacity: 0; transform: translateX(38px); } to { opacity: 1; transform: none; } }
.pd-title .w, .pd-sub .w { display: inline-block; white-space: pre; }
.pd-detail.animin .pd-title .w, .pd-detail.animin .pd-sub .w { animation: wordIn .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes wordIn { from { opacity: 0; transform: translateX(20px) translateY(3px); } to { opacity: 1; transform: none; } }

html.pd-lock, html.pd-lock body { overflow: hidden; }
.cf-card[data-pos="0"] { cursor: pointer; }

/* ── Mobile : appareils en haut, volet en bas ── */
@media (max-width: 860px) {
  .pd { --pd-panel-w: 100%; }
  .pd-stage-full { right: 0; align-items: flex-start; justify-content: center; padding: 3vh .6rem 0; }
  /* maquettes calées sur la HAUTEUR dispo (pas la largeur) : elles restent
     toujours dans le tiers haut au-dessus du volet 66%, quelle que soit la
     résolution (petit, grand, large-court, paysage). */
  .pd-devices { height: min(28vh, 240px); width: auto; max-width: 92vw; margin: 0 auto; aspect-ratio: 4 / 3; }
  .pd-laptop { width: 76%; left: 2%; }
  .pd-phone { width: 25%; right: 2%; }        /* était right:-1% → sortait du cadre */
  /* petit format → arrondi et bordure plus discrets (32px faisait « galet ») */
  .pd-phone-scr { border-radius: 16px; border-width: 4px; }
  .pd-detail {
    height: auto; top: auto; bottom: 0; max-height: 66%;
    justify-content: flex-end; border-left: none; border-top: 1px solid var(--border);
    background: linear-gradient(0deg, #0a0e16 62%, rgba(10, 14, 22, .35));
    box-shadow: 0 -30px 70px rgba(0, 0, 0, .5);
    transform: translateY(100%);
    /* padding symétrique : l'énorme padding gauche du desktop faisait déborder le texte */
    padding: clamp(1.6rem, 6vw, 2.4rem) clamp(1.4rem, 5vw, 1.9rem) clamp(1.7rem, 5vw, 2.2rem);
    overflow-x: hidden;
  }
  .pd.is-open .pd-detail { transform: translateY(0); }
  .pd-logo { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .pd, .pd-detail { transition: none; }
  .pd-mob { animation: none !important; }
  .pd.is-arriving .pd-laptop, .pd.is-arriving .pd-phone { animation: none !important; }
  .pd-detail .sd-el, .pd-title .w, .pd-sub .w { opacity: 1 !important; animation: none !important; }
}

/* ═══════════════════════════════════════════
   PAGE CONTACT DÉDIÉE (.ct) — thème sombre éditorial TTT
   ═══════════════════════════════════════════ */
/* ── Hero contact enrichi (halo + statut « disponible ») ── */
.ct-hero { position: relative; overflow: hidden; padding-bottom: clamp(2rem, 4vw, 3.2rem); }
.ct-hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -8%; top: -18%; width: 60vw; height: 60vw; max-width: 780px; max-height: 780px;
  background: radial-gradient(circle, rgba(79, 124, 255, .16) 0%, rgba(79, 124, 255, 0) 62%);
}
.ct-hero > .container { position: relative; z-index: 1; }
.ct-status {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.5rem;
  font-family: 'Poppins', sans-serif; font-size: .78rem; font-weight: 500; color: #cdd6e6;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .03);
  padding: .45rem .95rem .45rem .8rem; border-radius: 999px;
}
.ct-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #37d67a; box-shadow: 0 0 0 0 rgba(55, 214, 122, .5); animation: ctPulse 2.4s ease-out infinite; }
@keyframes ctPulse { 0% { box-shadow: 0 0 0 0 rgba(55, 214, 122, .5); } 70% { box-shadow: 0 0 0 7px rgba(55, 214, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(55, 214, 122, 0); } }
.ct-hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.1rem); line-height: 1.03; }
.ct-hero-sub { max-width: 56ch; }
.ct-opt { color: var(--gray); font-weight: 400; font-size: .72rem; letter-spacing: .01em; }

.ct { padding: .5rem 0 6rem; position: relative; }
.ct-grid {
  display: grid; grid-template-columns: .82fr 1.18fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}

/* ── Colonne infos (collante) ── */
.ct-info { position: sticky; top: 100px; }
.ct-info-lead { color: var(--gray); font-size: 1rem; line-height: 1.7; margin: 0 0 2rem; max-width: 34ch; }
.ct-items { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.ct-item { display: flex; align-items: center; gap: .9rem; color: #e7ecf5; text-decoration: none; transition: color .2s; }
.ct-item:hover { color: #fff; }
.ct-item .ct-ico {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(79, 124, 255, .1); border: 1px solid var(--border); color: var(--blue);
  transition: background .2s, border-color .2s;
}
.ct-item:hover .ct-ico { background: rgba(79, 124, 255, .18); border-color: var(--blue); }
.ct-item-txt { display: flex; flex-direction: column; line-height: 1.3; }
.ct-item-txt small { color: var(--gray); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 1px; }
.ct-item-txt b { font-weight: 500; font-size: 1rem; }
.ct-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ct-chip {
  font-size: .77rem; color: #cdd6e6; padding: .4rem .8rem;
  border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .02);
  display: inline-flex; align-items: center; gap: .45rem;
}
.ct-chip svg { color: var(--blue); }

/* ── Carte formulaire ── */
.ct-form-card {
  background: linear-gradient(158deg, rgba(19, 27, 42, .72), rgba(15, 22, 34, .88));
  border: 1px solid var(--border); border-radius: 16px;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.ct-form { display: flex; flex-direction: column; gap: 1.1rem; }
.ct-form[hidden] { display: none; }   /* sinon display:flex l'emporte sur l'attribut hidden */
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.ct-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.ct-field label { font-family: 'Poppins', sans-serif; font-size: .8rem; font-weight: 500; color: #cdd6e6; letter-spacing: .01em; }
.ct-req { color: #ff6b6b; }
.ct-field input, .ct-field textarea, .ct-field select {
  width: 100%; font-family: 'Inter', sans-serif; font-size: .95rem; color: #fff;
  background: rgba(11, 16, 24, .55); border: 1px solid var(--border); border-radius: 10px;
  padding: .8rem .9rem; transition: border-color .2s, box-shadow .2s, background .2s;
}
.ct-field textarea { resize: vertical; min-height: 130px; }
.ct-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238896B0' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center;
}
.ct-field input::placeholder, .ct-field textarea::placeholder { color: #56617a; }
.ct-field input:focus, .ct-field textarea:focus, .ct-field select:focus {
  outline: none; border-color: var(--blue); background: rgba(11, 16, 24, .85);
  box-shadow: 0 0 0 3px rgba(79, 124, 255, .16);
}
.ct-field.has-err input, .ct-field.has-err textarea, .ct-field.has-err select {
  border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255, 107, 107, .14);
}
.ct-err { font-size: .76rem; color: #ff8f8f; }
.ct-err:empty { display: none; }

.ct-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  align-self: flex-start; margin-top: .3rem; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .9rem; color: #fff;
  background: var(--blue); border: none; border-radius: 8px; padding: .85rem 1.8rem;
  box-shadow: 0 10px 26px rgba(79, 124, 255, .3);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.ct-submit:hover { background: var(--blue-dk); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(79, 124, 255, .42); }
.ct-submit:disabled { opacity: .65; cursor: default; transform: none; }
.ct-submit.is-loading { color: transparent; position: relative; }
.ct-submit.is-loading::after {
  content: ''; position: absolute; width: 17px; height: 17px;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%;
  animation: ctSpin .7s linear infinite;
}
@keyframes ctSpin { to { transform: rotate(360deg); } }
.ct-consent { font-size: .76rem; color: var(--gray); line-height: 1.55; margin: .3rem 0 0; }

/* ── Message de succès (remplace le formulaire) ── */
.ct-success {
  text-align: center; padding: clamp(2.2rem, 4vw, 3.6rem) 1.5rem;
  background: linear-gradient(158deg, rgba(19, 27, 42, .72), rgba(15, 22, 34, .88));
  border: 1px solid var(--border); border-radius: 16px;
}
.ct-success .ct-check {
  width: 64px; height: 64px; margin: 0 auto 1.2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(79, 124, 255, .14); border: 1px solid var(--blue); color: var(--blue);
}
.ct-success h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 2rem; color: #fff; margin: 0 0 .5rem; }
.ct-success p { color: var(--gray); font-size: 1rem; margin: 0 auto; max-width: 40ch; line-height: 1.6; }

@media (max-width: 860px) {
  .ct-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .ct-info { position: static; }
  .ct-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-submit.is-loading::after, .ct-status-dot { animation: none; }
}

/* ═══════════════════════════════════════════
   PAGE PHOTOGRAPHIE & VIDÉO (.pv) — thème sombre éditorial TTT
   ═══════════════════════════════════════════ */
.pv-hero {
  position: relative; min-height: 82vh; display: flex; align-items: center;
  overflow: hidden; padding: 8rem 0 4rem;
}
.pv-hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pv-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,11,18,.72), rgba(8,11,18,.62) 40%, rgba(8,11,18,.9)),
              radial-gradient(120% 90% at 30% 40%, transparent, rgba(8,11,18,.6));
}
.pv-hero > .container { position: relative; z-index: 2; max-width: 900px; }
.pv-eyebrow { display: inline-block; font-family: 'Poppins', sans-serif; font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); margin-bottom: 1.2rem; }
.pv-hero h1 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.02; color: #fff; margin: 0 0 1.3rem; }
.pv-hero h1 em { font-style: italic; color: var(--blue); }
.pv-hero-lead { font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.7; color: #cdd6e6; max-width: 60ch; margin: 0 0 2rem; }
.pv-cta-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.pv-btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; text-decoration: none;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .88rem;
  padding: .9rem 1.7rem; border-radius: 8px; transition: transform .2s, background .2s, border-color .2s;
}
.pv-btn-primary { background: var(--blue); color: #fff; box-shadow: 0 12px 30px rgba(79,124,255,.32); }
.pv-btn-primary:hover { background: var(--blue-dk); transform: translateY(-2px); }
.pv-btn-ghost { background: rgba(255,255,255,.05); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.pv-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }

/* Intro / valeurs */
.pv-intro { padding: clamp(3.5rem, 7vw, 6rem) 0; text-align: center; }
.pv-intro h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: #fff; margin: 0 auto 1rem; max-width: 20ch; }
.pv-intro p { color: var(--gray); font-size: 1.05rem; line-height: 1.75; max-width: 62ch; margin: 0 auto 2.6rem; }
.pv-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; max-width: 860px; margin: 0 auto; }
.pv-val { border: 1px solid var(--border); border-radius: 14px; padding: 1.8rem 1.4rem; background: rgba(255,255,255,.02); text-align: center; }
.pv-val-ico { width: 48px; height: 48px; margin: 0 auto 1rem; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(79,124,255,.1); border: 1px solid var(--border); color: var(--blue); }
.pv-val h3 { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 600; color: #fff; margin: 0 0 .4rem; }
.pv-val p { font-size: .88rem; color: var(--gray); line-height: 1.55; margin: 0; }

/* Sections image + texte (entreprise / gîte) */
.pv-split { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.pv-split .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pv-split.rev .pv-split-txt { order: 2; }
.pv-split.rev .pv-split-media { order: 1; }
.pv-split-media { border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); aspect-ratio: 4 / 3.2; }
.pv-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-split-txt .pv-eyebrow { color: var(--blue); }
.pv-split-txt h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: #fff; margin: 0 0 1rem; line-height: 1.1; }
.pv-split-txt p { color: var(--gray); font-size: 1rem; line-height: 1.72; margin: 0 0 1.5rem; }
.pv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.pv-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: #cdd6e6; }
.pv-list li svg { color: var(--blue); flex-shrink: 0; margin-top: .2rem; }

/* Galerie */
.pv-gallery { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.pv-gallery .pv-head { text-align: center; margin-bottom: 2.6rem; }
.pv-gallery .pv-head h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: #fff; margin: .4rem 0 0; }
.pv-grid { columns: 3; column-gap: 14px; }
.pv-grid figure { margin: 0 0 14px; border-radius: 14px; overflow: hidden; break-inside: avoid; position: relative; border: 1px solid rgba(30,45,71,.55); box-shadow: 0 10px 28px rgba(0,0,0,.28); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.pv-grid img { width: 100%; display: block; transition: transform .5s var(--ease); }
.pv-grid figure:hover { box-shadow: 0 22px 52px rgba(0,0,0,.5); transform: translateY(-3px); }
.pv-grid figure:hover img { transform: scale(1.05); }
.pv-grid figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,11,18,.5)); opacity: 0; transition: opacity .3s; }
.pv-grid figure:hover::after { opacity: 1; }

/* Film / vidéo showcase */
.pv-film { padding: clamp(3rem, 6vw, 5.5rem) 0; text-align: center; }
.pv-film h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: #fff; margin: .4rem auto 1.6rem; max-width: 22ch; }
.pv-film-frame { position: relative; max-width: 960px; margin: 0 auto; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 34px 80px rgba(0,0,0,.55); aspect-ratio: 16 / 9; background: #0b1119; }
.pv-film-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Méthode */
.pv-steps { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.pv-steps .pv-head { text-align: center; margin-bottom: 2.8rem; }
.pv-steps .pv-head h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: #fff; margin: .4rem 0 0; }
.pv-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.pv-step { border: 1px solid var(--border); border-radius: 14px; padding: 2rem 1.6rem; background: rgba(255,255,255,.02); }
.pv-step-n { font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem; color: var(--blue); line-height: 1; margin-bottom: .8rem; }
.pv-step h3 { font-family: 'Poppins', sans-serif; font-size: 1.05rem; font-weight: 600; color: #fff; margin: 0 0 .5rem; }
.pv-step p { font-size: .92rem; color: var(--gray); line-height: 1.6; margin: 0; }

/* CTA final */
.pv-final { padding: clamp(3.5rem, 7vw, 6rem) 0; text-align: center; }
.pv-final-card { border: 1px solid var(--border); border-radius: 20px; padding: clamp(2.4rem, 5vw, 4rem); background: linear-gradient(158deg, rgba(19,27,42,.7), rgba(15,22,34,.86)); max-width: 820px; margin: 0 auto; }
.pv-final h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin: 0 0 .8rem; }
.pv-final p { color: var(--gray); font-size: 1.05rem; line-height: 1.7; max-width: 48ch; margin: 0 auto 2rem; }

@media (max-width: 900px) {
  .pv-split .container { grid-template-columns: 1fr; gap: 2rem; }
  .pv-split.rev .pv-split-txt, .pv-split.rev .pv-split-media { order: 0; }
  .pv-vals { grid-template-columns: 1fr; max-width: 420px; }
  .pv-grid { columns: 2; }
  .pv-steps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pv-cta-row { flex-direction: column; }
  .pv-btn { justify-content: center; }
}

/* Mobile : galerie en carrousel horizontal à swipe (au lieu d'une longue pile) */
.pv-swipe-hint { display: none; }
@media (max-width: 600px) {
  .pv-swipe-hint { display: flex; align-items: center; justify-content: center; gap: 9px;
    color: var(--gray); font-size: .8rem; letter-spacing: .02em; margin: -.4rem 0 1.2rem; }
  .pv-swipe-hint svg { color: var(--blue); }
  .pv-swipe-hint svg:first-child { animation: pvNudgeL 1.8s var(--ease) infinite; }
  .pv-swipe-hint svg:last-child { animation: pvNudgeR 1.8s var(--ease) infinite; }

  .pv-gallery .pv-grid {
    columns: auto; display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 4px 2px 16px; scroll-padding: 0 8%; scrollbar-width: none;
  }
  .pv-gallery .pv-grid::-webkit-scrollbar { display: none; }
  .pv-gallery .pv-grid figure {
    flex: 0 0 80%; margin: 0; scroll-snap-align: center;
    aspect-ratio: 4 / 5; box-shadow: 0 16px 38px rgba(0,0,0,.45);
  }
  .pv-gallery .pv-grid figure img { height: 100%; object-fit: cover; }
}
@keyframes pvNudgeL { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes pvNudgeR { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
  .pv-grid figure:hover img { transform: none; }
  .pv-swipe-hint svg { animation: none !important; }
}

/* ── Photo/vidéo : bande de CHIFFRES (réf. stats) ── */
.pv-stats { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.pv-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.pv-stat { border: 1px solid var(--border); border-radius: 16px; padding: clamp(1.6rem, 3vw, 2.3rem);
  background: linear-gradient(158deg, rgba(32, 45, 68, .42), rgba(15, 22, 34, .62)); }
.pv-stat-n { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: #fff; }
.pv-stat-n em { color: var(--blue); font-style: normal; }
.pv-stat-l { color: var(--gray); font-size: .96rem; margin-top: .5rem; }

/* ── Photo/vidéo : LOGOS CLIENTS (réf. « Our Partnerships ») ── */
.pv-clients { padding: clamp(3rem, 6vw, 5rem) 0; }
.pv-clients .container { display: grid; grid-template-columns: .82fr 1.25fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.pv-clients-txt h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: #fff; margin: .5rem 0 .8rem; line-height: 1.1; }
.pv-clients-txt p { color: var(--gray); font-size: .98rem; line-height: 1.7; margin: 0; }
.pv-clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.pv-client { background: #eef1f6; border-radius: 12px; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; padding: 1.1rem; }
.pv-client img { max-width: 74%; max-height: 60%; object-fit: contain; display: block; }

@media (max-width: 900px) {
  .pv-clients .container { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 600px) {
  .pv-stats-grid { grid-template-columns: repeat(3, 1fr); gap: .55rem; }
  .pv-stat { padding: 1.1rem .55rem; text-align: center; }
  .pv-stat-l { font-size: .72rem; line-height: 1.3; margin-top: .35rem; }
}
@media (max-width: 520px) {
  .pv-clients-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════
   PAGES LOCALITÉ (.loc-) — SEO local par ville, thème sombre TTT
   ═══════════════════════════════════════════ */
.loc-hero { position: relative; padding: 9rem 0 3.5rem; overflow: hidden; }
.loc-hero::before {
  content: ""; position: absolute; left: -8%; top: -12%; z-index: 0; pointer-events: none;
  width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle, rgba(79, 124, 255, .14) 0%, rgba(79, 124, 255, 0) 62%);
}
.loc-hero > .container { position: relative; z-index: 1; max-width: 880px; }
.loc-hero h1 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.04; color: #fff; margin: .6rem 0 1.1rem; }
.loc-hero h1 em { color: var(--blue); font-style: italic; }
.loc-hero-lead { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.7; color: #cdd6e6; max-width: 62ch; margin: 0 0 1.9rem; }

.loc-sec { padding: clamp(3rem, 6vw, 5rem) 0; }
.loc-sec--alt { background: rgba(255, 255, 255, .015); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.loc-head { max-width: 760px; margin: 0 0 2.4rem; }
.loc-head.center { margin-inline: auto; text-align: center; }
.loc-head h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(1.8rem, 3.2vw, 2.7rem); color: #fff; margin: .4rem 0 .8rem; line-height: 1.1; }
.loc-head p { color: var(--gray); font-size: 1rem; line-height: 1.72; margin: 0; }

.loc-prose p { color: var(--gray); font-size: 1rem; line-height: 1.8; margin: 0 0 1rem; max-width: 74ch; }
.loc-prose p:last-child { margin-bottom: 0; }
.loc-prose strong { color: #e7ecf5; font-weight: 600; }

/* cartes services */
.loc-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.loc-svc { border: 1px solid var(--border); border-radius: 14px; padding: 1.9rem 1.6rem; background: rgba(255, 255, 255, .02);
  display: flex; flex-direction: column; text-decoration: none; transition: border-color .2s, transform .2s; }
.loc-svc:hover { border-color: var(--blue); transform: translateY(-4px); }
.loc-svc-ico { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(79, 124, 255, .1); border: 1px solid var(--border); color: var(--blue); margin-bottom: 1.1rem; }
.loc-svc h3 { font-family: 'Poppins', sans-serif; font-size: 1.08rem; font-weight: 600; color: #fff; margin: 0 0 .5rem; }
.loc-svc p { color: var(--gray); font-size: .92rem; line-height: 1.6; margin: 0 0 1.1rem; flex: 1; }
.loc-svc-link { color: var(--blue); font-family: 'Poppins', sans-serif; font-weight: 500; font-size: .86rem; display: inline-flex; align-items: center; gap: .4rem; }

/* FAQ locale */
.loc-faq { display: flex; flex-direction: column; gap: .8rem; max-width: 820px; }
.loc-faq details { border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, .02); padding: 0 1.2rem; }
.loc-faq details[open] { border-color: rgba(79, 124, 255, .4); background: rgba(79, 124, 255, .04); }
.loc-faq summary { cursor: pointer; list-style: none; padding: 1.1rem 0; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 1rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.loc-faq summary::-webkit-details-marker { display: none; }
.loc-faq summary::after { content: "+"; color: var(--blue); font-size: 1.5rem; line-height: 1; flex-shrink: 0; transition: transform .2s; }
.loc-faq details[open] summary::after { transform: rotate(45deg); }
.loc-faq details p { color: var(--gray); font-size: .94rem; line-height: 1.7; margin: 0 0 1.1rem; }

/* Zones desservies (bande de maillage interne, avant le footer) */
.zones { border-top: 1px solid var(--border); padding: 1.5rem 0; }
.zones .container { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }
.zones-lbl { color: var(--gray); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-right: .3rem; }
.zones a { color: #cdd6e6; font-size: .9rem; text-decoration: none; transition: color .2s; }
.zones a:hover { color: var(--blue); }

@media (max-width: 900px) { .loc-svc-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PLAN DU SITE
   ============================================================ */
.page-plan .plan-hero { padding: 150px 0 8px; text-align: center; position: relative; z-index: 1; }
.plan-hero h1 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02; color: #fff; letter-spacing: -.01em; margin: 14px 0 0; }
.plan-hero p { color: var(--gray); max-width: 600px; margin: 18px auto 0; font-size: 1.02rem; line-height: 1.6; }
.plan-wrap { padding: 46px 0 110px; position: relative; z-index: 1; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 20px; align-items: start; }
.plan-col { position: relative; z-index: 1; background: linear-gradient(180deg, rgba(23,32,49,.94), rgba(13,19,29,.96)); border: 1px solid var(--border); border-radius: 18px; padding: 24px 26px 20px; overflow: hidden; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.plan-col::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--blue), transparent 72%); }
.plan-col:hover { transform: translateY(-4px); border-color: rgba(79,124,255,.42); box-shadow: 0 24px 52px rgba(0,0,0,.42); }
.plan-col-h { display: flex; align-items: center; gap: 11px; margin: 0 0 12px; }
.plan-col-h .plan-ico { display: inline-flex; width: 32px; height: 32px; border-radius: 9px; background: rgba(79,124,255,.12); color: var(--blue); align-items: center; justify-content: center; flex: 0 0 auto; }
.plan-col-h h2 { font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: #dbe4f5; margin: 0; }
.plan-col-h h2 a { color: inherit; text-decoration: none; }
.plan-col-h h2 a:hover { color: var(--blue); }
.plan-col ul { list-style: none; margin: 0; padding: 0; }
.plan-col li + li { border-top: 1px solid rgba(30,45,71,.5); }
.plan-col li a { display: flex; align-items: center; gap: 9px; padding: 10px 0; color: #b9c4da; font-size: .95rem; text-decoration: none; transition: color .2s var(--ease), padding-left .2s var(--ease); }
.plan-col li a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); opacity: 0; transition: opacity .2s var(--ease); flex: 0 0 auto; }
.plan-col li a:hover { color: #fff; padding-left: 4px; }
.plan-col li a:hover::before { opacity: 1; }
.plan-col li a[aria-current="page"] { color: var(--blue); }
.plan-col li a[aria-current="page"]::before { opacity: 1; }
@media (max-width: 600px) { .page-plan .plan-hero { padding: 120px 0 6px; } .plan-grid { gap: 14px; } }

/* ============================================================
   PHOTO/VIDÉO — cas client vidéo (Château de La Grange Fort)
   ============================================================ */
.pv-vshoot { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.pv-vshoot .pv-head { text-align: center; margin-bottom: 2.2rem; }
.pv-vshoot .pv-head h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: #fff; margin: .4rem 0 0; }
.pv-vshoot-lead { color: var(--gray); font-size: 1rem; line-height: 1.7; max-width: 62ch;
  margin: .9rem auto 0; text-align: center; }
.pv-vgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 2.2rem; }
.pv-vgrid figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(30,45,71,.55); box-shadow: 0 10px 28px rgba(0,0,0,.3);
  aspect-ratio: 16 / 9; background: #0b1119;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.pv-vgrid figure:hover { transform: translateY(-3px); box-shadow: 0 22px 52px rgba(0,0,0,.5); }
.pv-vgrid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-vgrid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .75rem .95rem;
  font-size: .84rem; color: #e4ebf8; letter-spacing: .01em;
  background: linear-gradient(180deg, transparent, rgba(8,11,18,.88)); }

/* Mobile : carrousel à swipe (même logique que la galerie photo) */
@media (max-width: 600px) {
  .pv-vgrid { grid-template-columns: none; display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 4px 2px 16px; scroll-padding: 0 8%; scrollbar-width: none; }
  .pv-vgrid::-webkit-scrollbar { display: none; }
  .pv-vgrid figure { flex: 0 0 84%; scroll-snap-align: center; box-shadow: 0 16px 38px rgba(0,0,0,.45); }
}

/* ============================================================
   PHOTO/VIDÉO — animations
   ============================================================ */
/* Zoom très lent sur la vidéo du hero (effet Ken Burns) */
.pv-hero-vid { animation: pvHeroZoom 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes pvHeroZoom { from { transform: scale(1); } to { transform: scale(1.09); } }

/* Les chiffres qui se comptent : évite le saut de largeur pendant le comptage */
.pv-stat-n { font-variant-numeric: tabular-nums; }

/* Vignettes de la galerie : petite montée au survol (desktop) */
@media (hover: hover) {
  .pv-client { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
  .pv-client:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
}

@media (prefers-reduced-motion: reduce) {
  .pv-hero-vid { animation: none; }
}

/* ============================================================
   PAGE LÉGALE (.legal) — mentions légales, thème sombre TTT
   ============================================================ */
.legal-hero { padding: 140px 0 10px; text-align: center; }
.legal-hero h1 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.6rem); color: #fff; margin: 12px 0 0; letter-spacing: -.01em; }
.legal-hero p { color: var(--gray); font-size: .95rem; margin: 14px auto 0; max-width: 60ch; line-height: 1.6; }
.legal-wrap { padding: 30px 0 100px; }
.legal-doc { max-width: 820px; margin: 0 auto; }
.legal-sec { padding: 26px 0; border-top: 1px solid var(--border); }
.legal-sec:first-child { border-top: none; }
.legal-sec h2 {
  font-family: 'Inter', sans-serif; font-size: 1.06rem; font-weight: 600; color: #fff;
  margin: 0 0 .9rem; display: flex; align-items: baseline; gap: .7rem;
}
.legal-sec h2 .n { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; color: var(--blue); font-weight: 600; }
.legal-sec p, .legal-sec li { color: #b9c4da; font-size: .95rem; line-height: 1.75; }
.legal-sec p { margin: 0 0 .8rem; }
.legal-sec p:last-child { margin-bottom: 0; }
.legal-sec a { color: var(--blue); text-decoration: none; }
.legal-sec a:hover { text-decoration: underline; }
.legal-sec strong { color: #e4ebf8; font-weight: 600; }
.legal-sec ul { margin: .2rem 0 .8rem; padding-left: 0; list-style: none; }
.legal-sec ul li { position: relative; padding-left: 1.1rem; margin-bottom: .35rem; }
.legal-sec ul li::before { content: ""; position: absolute; left: 0; top: .68rem; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.legal-def { display: grid; grid-template-columns: 150px 1fr; gap: .35rem 1.2rem; margin: 0; }
.legal-def dt { color: var(--gray); font-size: .88rem; }
.legal-def dd { margin: 0; color: #cdd6e6; font-size: .95rem; }
.legal-todo { color: #e0a24c; font-style: italic; }
.legal-updated { color: var(--gray); font-size: .82rem; text-align: center; margin-top: 2.2rem; }
@media (max-width: 560px) {
  .legal-def { grid-template-columns: 1fr; gap: 0; }
  .legal-def dt { margin-top: .5rem; }
}

/* ============================================================
   PAGE PHOTO/VIDÉO — REFONTE éditoriale (charte TTT : sombre + bleu)
   Idées reprises d'une réf. studio photo : arches, bandeau défilant,
   cartes-services, collage éditorial, grande typo. Scopé .page-photo-video.
   ============================================================ */

/* ── Hero : grande typo éditoriale (couleurs charte) ── */
.page-photo-video .pv-hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 1.0; color: #fff;
  letter-spacing: -.01em;
}
.page-photo-video .pv-hero h1 em { font-style: italic; color: var(--blue); }

/* ── Bandeau défilant (marquee) ── */
.pvx-marquee {
  overflow: hidden; white-space: nowrap; background: #0d1420;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 1.05rem 0;
}
.pvx-marquee-track { display: inline-flex; align-items: center; will-change: transform; animation: pvxMarquee 26s linear infinite; }
.pvx-marquee-track > span { display: inline-flex; align-items: center; }
.pvx-mq {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: .13em;
  color: #eef2f9; padding: 0 1.3rem; text-transform: uppercase;
}
.pvx-mq-dot { color: var(--blue); font-size: 1.05rem; }
@keyframes pvxMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pvx-marquee:hover .pvx-marquee-track { animation-play-state: paused; }

/* ── Arche (haut arrondi) réutilisable ── */
.pvx-arch { border-radius: 48% 48% 12px 12px / 26% 26% 4px 4px; overflow: hidden; }

/* ── Splits : image en arche + liseré (contenu DANS la boîte, ne déborde pas) ── */
.page-photo-video .pv-split-media { position: relative; }
.page-photo-video .pv-split-media img {
  border-radius: 46% 46% 14px 14px / 24% 24% 5px 5px;
  border: 1px solid rgba(79,124,255,.22);
}
.page-photo-video .pv-split-media::after {
  content: ""; position: absolute; inset: 10px; z-index: 1;
  border: 1px solid rgba(255,255,255,.14); border-radius: 42% 42% 10px 10px / 22% 22% 4px 4px;
  pointer-events: none;
}

/* ── Services en cartes-arches ── */
.pvx-serv { padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5.5rem); }
.pvx-serv-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 2.6rem;
}
.pvx-serv-card { display: flex; flex-direction: column; text-align: center; text-decoration: none; }
.pvx-serv-fig {
  position: relative; aspect-ratio: 3 / 4.2; overflow: hidden;
  border-radius: 50% 50% 12px 12px / 30% 30% 4px 4px;
  border: 1px solid var(--border); background: #0b1119;
}
.pvx-serv-fig img { width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.82); transition: transform .7s var(--ease), filter .4s var(--ease); }
.pvx-serv-card:hover .pvx-serv-fig img { transform: scale(1.06); filter: brightness(.98); }
.pvx-serv-card:hover .pvx-serv-fig { border-color: rgba(79,124,255,.45); }
.pvx-serv-fig::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8,11,18,.7)); }
.pvx-serv-num {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 1;
  font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; color: var(--blue); letter-spacing: .1em;
}
.pvx-serv-t {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; letter-spacing: .06em;
  color: #fff; margin: 1rem 0 .3rem; text-transform: uppercase;
}
.pvx-serv-d { font-size: .84rem; color: var(--gray); line-height: 1.5; margin: 0; }

/* ── Collage éditorial (galerie desktop) : maçonnerie 3 colonnes, remplit
   sans trou. Hauteurs variées + 2 images en arche pour le rythme. ── */
@media (min-width: 861px) {
  .page-photo-video .pv-gallery .pv-grid { columns: 3; column-gap: 16px; }
  .page-photo-video .pv-gallery .pv-grid figure {
    margin: 0 0 16px; break-inside: avoid; border-radius: 14px; overflow: hidden;
    border: 1px solid var(--border);
  }
  .page-photo-video .pv-gallery .pv-grid figure img { width: 100%; height: auto; display: block; }
  /* deux images allongées + en arche pour casser l'uniformité */
  .page-photo-video .pv-grid figure:nth-child(1),
  .page-photo-video .pv-grid figure:nth-child(6) {
    border-radius: 42% 42% 14px 14px / 16% 16% 5px 5px;
  }
  .page-photo-video .pv-grid figure:nth-child(1) img,
  .page-photo-video .pv-grid figure:nth-child(6) img { aspect-ratio: 3 / 4; object-fit: cover; }
}

@media (max-width: 860px) {
  .pvx-serv-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem 1rem; }
  .pvx-mq { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pvx-marquee-track { animation: none; }
}

/* ── Section intro éditoriale (réf.) : texte à GAUCHE en gros condensé (Bebas),
   2 images en arche qui DÉBORDENT par-dessus le bandeau (haut) et la
   section suivante (bas). ── */
.pvx-intro2 { position: relative; z-index: 2; padding: 0 0 clamp(2.5rem, 6vw, 5rem); }
.pvx-intro2-grid {
  display: grid; grid-template-columns: .82fr 1.3fr .82fr;
  gap: clamp(1.4rem, 3vw, 3rem); align-items: start;
}
.pvx-intro2-fig { margin: 0; position: relative; }
.pvx-intro2-fig img {
  width: 100%; object-fit: cover; display: block;
  border-radius: 46% 46% 14px 14px / 20% 20% 5px 5px;
  border: 1px solid rgba(79,124,255,.22); box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.pvx-intro2-fig.left { margin-top: -84px; }               /* déborde par-dessus le bandeau */
.pvx-intro2-fig.left img { aspect-ratio: 3 / 4.3; }
.pvx-intro2-fig.right { margin-top: clamp(3rem, 7vw, 7rem); margin-bottom: -60px; } /* + bas, déborde dessous */
.pvx-intro2-fig.right img { aspect-ratio: 3 / 4; }
.pvx-intro2-deco { position: absolute; top: -26px; right: -6px; color: var(--blue); opacity: .6; }
.pvx-intro2-txt { text-align: left; padding: clamp(2rem, 5vw, 4rem) .4rem 0; }
.pvx-intro2-txt .pv-eyebrow { display: block; margin-bottom: 1rem; }
.pvx-intro2-txt h2 {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.0; letter-spacing: .015em;
  color: #fff; margin: 0 0 1.15rem;
}
.pvx-intro2-txt h2 em { font-style: normal; color: var(--blue); }
.pvx-intro2-txt p { color: var(--gray); font-size: .98rem; line-height: 1.75; max-width: 42ch; margin: 0 0 1.7rem; }

@media (max-width: 860px) {
  .pvx-intro2 { padding-top: clamp(1.5rem, 5vw, 2.5rem); }
  .pvx-intro2-grid { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  .pvx-intro2-txt { grid-column: 1 / -1; order: -1; padding-top: 0; margin-bottom: 1.3rem; text-align: center; }
  .pvx-intro2-txt p { margin-left: auto; margin-right: auto; }
  /* pas de débordement en mobile : tout rentre proprement */
  .pvx-intro2-fig.left, .pvx-intro2-fig.right { margin: 0; }
  .pvx-intro2-fig.left img, .pvx-intro2-fig.right img { aspect-ratio: 3 / 4; }
}
@media (max-width: 480px) {
  .pvx-intro2-grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
}

/* ============================================================
   PAGE PHOTO/VIDÉO — HERO SPLIT (réf. photographe : texte à gauche,
   vidéo « objectif » à droite, barre latérale verticale). Charte TTT.
   ============================================================ */
.pvx-hero2 { position: relative; min-height: 82vh; min-height: 82svh;
  display: flex; align-items: center; overflow: hidden; background: var(--bg); }
.pvx-hero2-media { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: 1; }
.pvx-hero2-media video { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.28) brightness(.86) contrast(1.02); }
/* fondu de la vidéo vers le fond sombre à gauche (texte lisible) + vignette bas */
.pvx-hero2-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 2%, rgba(11,16,24,.74) 26%, rgba(11,16,24,.18) 62%, transparent),
              linear-gradient(0deg, rgba(11,16,24,.55), transparent 32%); }
.pvx-hero2 > .container { position: relative; z-index: 3; width: 100%; }
.pvx-hero2-txt { max-width: 560px; }
.pvx-hero2-txt .pv-eyebrow { display: block; margin-bottom: 1.1rem; }
.pvx-hero2 h1 { font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 1.02; color: #fff;
  letter-spacing: -.01em; margin: 0 0 1.2rem; }
.pvx-hero2 h1 em { font-style: italic; color: var(--blue); }
.pvx-hero2 .pv-hero-lead { color: #c3cee0; font-size: 1.05rem; line-height: 1.7; max-width: 44ch; margin: 0 0 1.9rem; }

/* ── Barre latérale = une VRAIE barre (rail pleine hauteur, transparente) ── */
.pvx-hero2-side { position: absolute; top: 0; right: 0; bottom: 0; width: 60px; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 1.9rem 0; border-left: 1px solid rgba(255,255,255,.16); }
/* petits repères en haut et en bas, comme une règle graduée */
.pvx-hero2-side::before, .pvx-hero2-side::after {
  content: ""; position: absolute; left: -1px; width: 13px; height: 1px; background: rgba(255,255,255,.55); }
.pvx-hero2-side::before { top: 0; }
.pvx-hero2-side::after { bottom: 0; }
.pvx-side-top { writing-mode: vertical-rl; font-family: 'Cormorant Garamond', serif;
  font-size: .82rem; letter-spacing: .34em; color: rgba(255,255,255,.6); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.pvx-side-soc { display: flex; flex-direction: column; gap: 1.1rem; }
.pvx-side-soc a { color: #fff; display: flex; text-shadow: 0 1px 8px rgba(0,0,0,.6);
  transition: color .2s var(--ease), transform .2s var(--ease); }
.pvx-side-soc a:hover { color: var(--blue); transform: translateY(-2px); }
.pvx-side-scroll { writing-mode: vertical-rl; display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Poppins', sans-serif; font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.6); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.pvx-side-scroll svg { animation: pvxScroll 1.9s ease-in-out infinite; }
@keyframes pvxScroll { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(5px); opacity: 1; } }

/* ── Mobile : vidéo en fond plein cadre, texte dessus, barre masquée ── */
@media (max-width: 860px) {
  .pvx-hero2 { min-height: 88svh; }
  .pvx-hero2-media { width: 100%; }
  .pvx-hero2-media::after { background: linear-gradient(180deg, rgba(11,16,24,.5), rgba(11,16,24,.72) 55%, rgba(11,16,24,.95)); }
  .pvx-hero2-txt { max-width: 100%; text-align: center; margin: 0 auto; }
  .pvx-hero2-txt .pv-hero-lead { margin-left: auto; margin-right: auto; }
  .pvx-hero2-txt .pv-cta-row { justify-content: center; }
  .pvx-hero2-side { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pvx-side-scroll svg { animation: none; } }

/* ============================================================
   PAGE PHOTO/VIDÉO — PORTFOLIO filtrable (réf.)
   petite barre d'onglets (catégories) + collage qui se filtre
   ============================================================ */
.pvx-portfolio { position: relative; z-index: 1; background: var(--bg); padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(3rem, 6vw, 5rem); }
.pvx-pf-head h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 2.9rem); color: #fff; margin: .3rem 0 0; }
/* la petite barre de filtres */
.pvx-pf-filters { display: flex; flex-wrap: wrap; gap: clamp(1.1rem, 3vw, 2.6rem); align-items: center;
  border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin: 0 0 2.2rem; }
.pvx-pf-filter { position: relative; background: none; border: none; cursor: pointer; padding: .2rem 0;
  font-family: 'Poppins', sans-serif; font-size: .92rem; color: var(--gray); transition: color .2s var(--ease); }
.pvx-pf-filter::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.05rem; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.pvx-pf-filter:hover { color: #dbe4f5; }
.pvx-pf-filter.is-active { color: #fff; }
.pvx-pf-filter.is-active::after { transform: scaleX(1); }
/* mise en page : à GAUCHE le menu + le collage, à DROITE une grande photo
   qui monte au niveau du menu et le "termine" (le trait s'arrête à la photo) */
.pvx-pf2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: stretch; margin-top: clamp(2rem, 4.5vw, 3.5rem); }
.pvx-pf-grid figure, .pvx-pf2-feature { cursor: pointer; }
/* la grande photo : image en absolu → sa hauteur = EXACTEMENT celle du collage
   de gauche (jamais plus). Pas de min-height qui créerait du vide ou un dépassement. */
.pvx-pf2-feature { position: relative; margin: 0; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); }
.pvx-pf2-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.22) brightness(.9); transition: opacity .35s var(--ease), filter .45s var(--ease), transform .6s var(--ease); }
.pvx-pf2-feature.is-swapping img { opacity: 0; }
.pvx-pf2-feature:hover img { filter: grayscale(0) brightness(1); transform: scale(1.03); }
/* collage à gauche (maçonnerie 2 colonnes : se reflow proprement au filtrage) */
.pvx-pf-grid { columns: 2; column-gap: 16px; }
.pvx-pf-grid figure { position: relative; margin: 0 0 16px; break-inside: avoid; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--border); }
.pvx-pf-grid figure img { width: 100%; display: block; filter: grayscale(.22) brightness(.9);
  transition: filter .45s var(--ease), transform .6s var(--ease); }
.pvx-pf-grid figure:hover img { filter: grayscale(0) brightness(1); transform: scale(1.045); }
.pvx-pf-grid figure.is-hidden { display: none; }
.pvx-pf-more { margin-top: 1.9rem; display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: none; cursor: pointer; color: var(--blue);
  font-family: 'Poppins', sans-serif; font-size: .9rem; font-weight: 500; letter-spacing: .02em; }
.pvx-pf-more svg { transition: transform .3s var(--ease); }
.pvx-pf-more.is-open svg { transform: rotate(180deg); }
@media (max-width: 860px) {
  .pvx-pf2 { grid-template-columns: 1fr; }
  .pvx-pf2-feature { aspect-ratio: 3 / 2; order: 2; }   /* empilée : hauteur via ratio */
}
/* mobile : on GARDE 2 colonnes (galerie), pas une seule grande image empilée */
@media (max-width: 560px) { .pvx-pf-grid { column-gap: 12px; } .pvx-pf-grid figure { margin-bottom: 12px; } .pvx-pf-filters { gap: 1rem 1.4rem; } }

/* ============================================================
   PAGE PHOTO/VIDÉO — SECTIONS PLEINES (fond opaque : pas de pictos derrière)
   « Nos projets » (3 cartes → carrousel) + « À propos »
   ============================================================ */
/* ── Nos projets : 3 cartes ── */
.pvx-projects { position: relative; z-index: 1; background: linear-gradient(180deg, #0e131d, #0b0f17);
  padding: clamp(3.5rem, 7vw, 6rem) 0; }
.pvx-proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(2.2rem, 4vw, 3.4rem);
  border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.pvx-proj-card { display: flex; flex-direction: column; padding: clamp(1.6rem, 2.6vw, 2.6rem);
  border-right: 1px solid rgba(255,255,255,.14); }
.pvx-proj-card:last-child { border-right: none; }
.pvx-proj-fig { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); margin-top: auto; }
.pvx-proj-fig img { width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.2) brightness(.88); transition: filter .45s var(--ease), transform .6s var(--ease); }
.pvx-proj-card:hover .pvx-proj-fig img { filter: grayscale(0) brightness(1); transform: scale(1.05); }
.pvx-proj-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,11,18,.55)); }
.pvx-proj-cat { font-family: 'Poppins', sans-serif; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); margin: 0 0 .4rem; }
.pvx-proj-t { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.55rem; color: #fff; margin: 0 0 .55rem; }
.pvx-proj-d { font-size: .92rem; color: var(--gray); line-height: 1.65; margin: 0 0 clamp(1.4rem, 2.5vw, 2rem); }
.pvx-proj-btn { align-self: center; margin-top: clamp(1.2rem, 2vw, 1.7rem); display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  background: none; border: 1px solid var(--border); color: #fff; font-family: 'Poppins', sans-serif;
  font-size: .82rem; font-weight: 500; padding: .62rem 1.3rem; border-radius: 100px;
  transition: background .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease); }
.pvx-proj-btn:hover { background: var(--blue); border-color: var(--blue); gap: .8rem; }
.pvx-proj-btn svg { width: 15px; height: 15px; }
@media (max-width: 860px) {
  .pvx-proj-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .pvx-proj-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,.14); }
  .pvx-proj-card:last-child { border-bottom: none; }
}

/* ── Lightbox / carrousel plein écran ── */
.pvx-lb { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 9, 14, .95); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.pvx-lb.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.pvx-lb[hidden] { display: none; }
.pvx-lb-img { max-width: 84vw; max-height: 82vh; object-fit: contain; border-radius: 8px; box-shadow: 0 34px 90px rgba(0,0,0,.6);
  transition: opacity .25s var(--ease); }
.pvx-lb.is-loading .pvx-lb-img { opacity: .3; }
.pvx-lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease), border-color .2s var(--ease); }
.pvx-lb-btn:hover { background: var(--blue); border-color: var(--blue); }
.pvx-lb-close { top: 24px; right: 26px; }
.pvx-lb-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.pvx-lb-next { right: 26px; top: 50%; transform: translateY(-50%); }
.pvx-lb-cap { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); text-align: center;
  color: #cdd6e6; font-family: 'Poppins', sans-serif; font-size: .82rem; letter-spacing: .02em; }
.pvx-lb-cap b { color: #fff; font-weight: 600; }
.pvx-lb-cap span { color: var(--gray); }
@media (max-width: 640px) { .pvx-lb-prev { left: 10px; } .pvx-lb-next { right: 10px; } .pvx-lb-btn { width: 42px; height: 42px; } .pvx-lb-img { max-width: 92vw; } }

/* ── À propos : texte + photos ── */
.pvx-about { position: relative; z-index: 1; background: #0b0f16; padding: clamp(3.5rem, 7vw, 6rem) 0; }
.pvx-about-head h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.9rem);
  color: #fff; margin: .4rem 0 0; line-height: 1.1; }

/* mosaïque construite : 2 blocs de texte entremêlés à 4 photos (réf. « Обо мне ») */
.pvx-about-mosaic { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr;
  grid-template-rows: repeat(2, clamp(230px, 25vw, 300px));
  grid-template-areas:
    "txtA pA pB   pB"
    "pC   pA txtB pD";
  gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(2.2rem, 4vw, 3.4rem); }
.pvx-am-txtA { grid-area: txtA; }
.pvx-am-pA   { grid-area: pA; }
.pvx-am-pB   { grid-area: pB; }
.pvx-am-pC   { grid-area: pC; }
.pvx-am-txtB { grid-area: txtB; }
.pvx-am-pD   { grid-area: pD; }
.pvx-am-txt { display: flex; flex-direction: column; justify-content: center; }
.pvx-am-txt p { color: var(--gray); font-size: .96rem; line-height: 1.7; margin: 0; }
.pvx-am-txtB .pv-btn-primary { align-self: flex-start; margin-top: 1.3rem; }
.pvx-am-fig { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 0; }
.pvx-am-fig img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.2) brightness(.9); transition: filter .45s var(--ease), transform .6s var(--ease); }
.pvx-am-fig:hover img { filter: none; transform: scale(1.04); }
@media (max-width: 980px) {
  /* mosaïque → texte pleine largeur + les 4 photos en grille 2×2 (pas un empilement) */
  .pvx-about-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: none; gap: 12px; }
  .pvx-about-mosaic > * { grid-area: auto; }
  .pvx-am-txt { grid-column: 1 / -1; padding: .2rem 0 .6rem; }
  .pvx-am-fig { aspect-ratio: 1 / 1; }
}

/* ── Hero : barre horizontale sous le titre (réf.) ── */
.pvx-hero2-rule { display: block; width: 64px; height: 2px; background: var(--blue); margin: .4rem 0 1.5rem; }
@media (max-width: 860px) { .pvx-hero2-rule { margin-left: auto; margin-right: auto; } }

/* ── Hero : barre VERTICALE blanche sur la vidéo, à droite, avec réseaux (réf. lili) ── */
.pvx-hero2-vbar { position: absolute; z-index: 5; top: clamp(1.5rem, 4vw, 3rem); bottom: clamp(1.5rem, 4vw, 3rem);
  right: clamp(2.5rem, 6vw, 6rem); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pvx-hero2-vline { flex: 1; width: 1px; background: rgba(255,255,255,.32); }
.pvx-hero2-social { display: flex; flex-direction: column; gap: 1rem; }
.pvx-hero2-social a { display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.82);
  transition: color .2s var(--ease), transform .2s var(--ease); }
.pvx-hero2-social a:hover { color: #fff; transform: translateY(-2px); }
.pvx-hero2-social svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .pvx-hero2-vbar { display: none; } }

/* ── Tous les bords CARRÉS sur la page photo (comme la réf.) ── */
.page-photo-video .pv-btn,
.page-photo-video .pvx-proj-btn,
.page-photo-video .pvx-pf-grid figure,
.page-photo-video .pvx-pf2-feature,
.page-photo-video .pvx-proj-fig,
.page-photo-video .pvx-about-media figure,
.pvx-lb-img { border-radius: 0; }

/* ═══════ FAQ page photo/vidéo (section pleine, bords carrés) ═══════ */
.pvx-faq { position: relative; z-index: 1; background: linear-gradient(180deg, #0b0f17, #0e131d); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.pvx-faq-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin: .3rem 0 clamp(1.5rem, 3vw, 2.5rem); }
.pvx-faq-list { max-width: 820px; }
.pvx-faq-item { border: 1px solid var(--border); border-radius: 0; background: rgba(255,255,255,.015); margin-bottom: .7rem; }
.pvx-faq-item summary { list-style: none; cursor: pointer; padding: 1.15rem 1.3rem; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 1.02rem; color: #eef2f9; display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: color .2s var(--ease); }
.pvx-faq-item summary::-webkit-details-marker { display: none; }
.pvx-faq-item summary::after { content: '+'; font-size: 1.5rem; font-weight: 300; color: var(--blue); line-height: 1; transition: transform .25s var(--ease); }
.pvx-faq-item[open] summary::after { transform: rotate(45deg); }
.pvx-faq-item summary:hover { color: #fff; }
.pvx-faq-item[open] summary { color: #fff; }
.pvx-faq-item[open] { border-color: rgba(79,124,255,.4); }
.pvx-faq-item p { margin: 0; padding: 0 1.3rem 1.25rem; color: var(--gray); line-height: 1.65; font-size: .96rem; }

/* ═══════ Avis clients : carrousel de témoignages (réf. « Отзывы ») ═══════ */
.pvx-reviews { position: relative; z-index: 1; background: linear-gradient(180deg, #0b0f16, #0e131d); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.pvx-rv { margin-top: clamp(2rem, 4vw, 3.2rem); }
.pvx-rv-slides { position: relative; }
.pvx-rv-slide { display: none; grid-template-columns: 1fr 1.05fr; gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center; }
.pvx-rv-slide.is-active { display: grid; animation: pvxRvFade .5s var(--ease); }
@keyframes pvxRvFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pvx-rv-author { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.4rem;
  font-family: 'Poppins', sans-serif; font-size: .82rem; letter-spacing: .05em; }
.pvx-rv-name { color: #fff; font-weight: 600; text-transform: uppercase; }
.pvx-rv-sub { color: var(--blue); font-weight: 500; }
.pvx-rv-author::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.18); }
.pvx-rv-quote { margin: 0; color: #c7d1e3; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.85; }
.pvx-rv-media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pvx-rv-media figure { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 0; aspect-ratio: 4 / 5; }
.pvx-rv-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.3) brightness(.88); transition: filter .45s var(--ease), transform .6s var(--ease); }
.pvx-rv-media figure:hover img { filter: none; transform: scale(1.04); }
.pvx-rv-nav { display: flex; align-items: center; gap: 1.1rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); max-width: 46%; }
.pvx-rv-arrow { width: 46px; height: 46px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); color: #fff; cursor: pointer; border-radius: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease); }
.pvx-rv-arrow:hover { border-color: var(--blue); background: rgba(79,124,255,.12); }
.pvx-rv-track { flex: 1; height: 2px; background: rgba(255,255,255,.15); position: relative; overflow: hidden; }
.pvx-rv-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--blue);
  width: 33.33%; transition: width .45s var(--ease); }
@media (max-width: 860px) {
  .pvx-rv-slide { grid-template-columns: 1fr; gap: 1.6rem; }
  .pvx-rv-nav { max-width: none; }
}

/* ═══════ Bloc texte SEO : photographe entreprise & gîte en Auvergne ═══════ */
.pvx-seo { position: relative; z-index: 1; background: linear-gradient(180deg, #0b0f16, #0e131d); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.pvx-seo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); margin-top: clamp(2rem, 4vw, 3.2rem); }
.pvx-seo-col h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 1.85rem); color: #fff; margin: 0 0 1rem; line-height: 1.2; }
.pvx-seo-col p { color: var(--gray); font-size: .98rem; line-height: 1.85; margin: 0 0 1.1rem; }
.pvx-seo-col p:last-child { margin-bottom: 0; }
.pvx-seo-col a { color: #cdd8ec; text-decoration: none; border-bottom: 1px solid var(--blue); transition: color .2s var(--ease); }
.pvx-seo-col a:hover { color: #fff; }
.pvx-seo-zones { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.4rem; }
.pvx-seo-zones-label { font-family: 'Poppins', sans-serif; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.pvx-seo-zones ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .95rem; }
.pvx-seo-zones li { font-family: 'Poppins', sans-serif; font-size: .88rem; color: #b9c4d8; }
.pvx-seo-zones li:not(:last-child)::after { content: "·"; margin-left: .95rem; color: rgba(255,255,255,.28); }
.pvx-seo-zones a { color: #b9c4d8; text-decoration: none; transition: color .2s var(--ease); }
.pvx-seo-zones a:hover { color: var(--blue); }
@media (max-width: 860px) { .pvx-seo-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* accroche référencée sous les titres de section */
.pvx-pf-lead { color: var(--gray); font-size: 1rem; line-height: 1.7; max-width: 62ch; margin: .9rem 0 0; }

/* ── Photo intercalée dans chaque colonne SEO (casse le mur de texte) ── */
.pvx-seo-colfig { margin: 1.4rem 0; overflow: hidden; border: 1px solid var(--border); border-radius: 0; aspect-ratio: 16 / 10; }
.pvx-seo-colfig img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.2) brightness(.9); transition: filter .45s var(--ease), transform .6s var(--ease); }
.pvx-seo-colfig:hover img { filter: none; transform: scale(1.04); }
@media (max-width: 860px) { .pvx-seo-col p { font-size: .92rem; line-height: 1.7; } .pvx-seo-colfig { aspect-ratio: 3 / 2; margin: 1.1rem 0; } }

/* ═══════ Pages projet : section « Autres réalisations » ═══════ */
.proj-more { position: relative; z-index: 1; background: linear-gradient(180deg, #0b0f16, #0e131d);
  border-top: 1px solid var(--border); padding: clamp(3rem, 6vw, 5rem) 0; }
.proj-more-head h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.6rem); color: #fff; margin: .3rem 0 clamp(1.5rem, 3vw, 2.2rem); }
.proj-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.proj-more-card { position: relative; display: flex; flex-direction: column; gap: .5rem;
  padding: 1.5rem 1.6rem; border: 1px solid var(--border); text-decoration: none; background: rgba(255,255,255,.015);
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease); }
.proj-more-card:hover { border-color: rgba(79,124,255,.5); transform: translateY(-3px); background: rgba(79,124,255,.06); }
.proj-more-cat { font-family: 'Poppins', sans-serif; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.proj-more-t { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; color: #fff; line-height: 1.2; padding-right: 1.4rem; }
.proj-more-arrow { position: absolute; top: 1.4rem; right: 1.5rem; color: var(--blue); transition: transform .25s var(--ease); }
.proj-more-card:hover .proj-more-arrow { transform: translateX(4px); }
.proj-more-all { display: inline-block; margin-top: 1.8rem; color: #cdd8ec; text-decoration: none;
  border-bottom: 1px solid var(--blue); font-family: 'Poppins', sans-serif; font-size: .9rem; transition: color .2s var(--ease); }
.proj-more-all:hover { color: #fff; }
@media (max-width: 820px) { .proj-more-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .proj-more-grid { grid-template-columns: 1fr; } }