/* ========================================================== */
/*  emsolutions — Découpage Claude                            */
/*  Tokens issus du Figma (node 1-2)                          */
/* ========================================================== */

@font-face {
  font-family: "Neue Montreal";
  src: url("../fonts/NeueMontreal-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --em-ink:        #2E2618;  /* brun foncé — texte, conteneur, pilule */
  --em-ink-2:      #231F20;
  --em-ink-3:      #393122;
  --em-blue:       #27A9D8;
  --em-blue-mid:   #50C2EC;
  --em-blue-light: #7ADCFF;
  --em-brown:      #695738;
  --em-green:      #3FAB00;
  --em-bg:         #E0E1DC;  /* fond = bas du bonsaï (continuité hero <-> sections) */
  --em-white:      #FFFFFF;

  --em-font: "Neue Montreal", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--em-font);
  color: var(--em-ink);
  background: var(--em-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }

/* ========================================================== */
/*  HEADER                                                     */
/* ========================================================== */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  padding: 41px 58px;
  width: 100%;
}

/* -- Logo -- */
.brand__logo {
  width: 131px;
  height: 73.53px;
  display: block;
}

/* -- Navigation -- */
.main-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-left: 70px;
}

.nav-item { position: relative; }
/* tout déclencheur de sous-menu doit être son propre contexte de position
   (corrige le sous-menu langues mal positionné + son pont de survol fantôme) */
.has-menu { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  line-height: 1;
  color: var(--em-ink);
  white-space: nowrap;
  padding: 6px 0;
  transition: opacity .2s ease;
}
.nav-link:hover { opacity: .65; }

.nav-link--icon { padding: 0; }
.nav-icon { width: 24px; height: 24px; }

/* pastilles colorées */
.nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
}
.nav-dot--blue  { background: var(--em-blue); }
.nav-dot--brown { background: var(--em-brown); }
.nav-dot--green { background: var(--em-green); }

/* -- Sous-menus (rollover) -- */
.submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  min-width: 240px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 18px 50px rgba(46, 38, 24, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.submenu--right { left: auto; right: -16px; }
.submenu--lang  { min-width: 180px; }

.has-menu.is-open > .submenu,
.has-menu:hover > .submenu,
.has-menu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* pont invisible pour ne pas perdre le survol */
.has-menu::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 16px;
}

.submenu__link {
  display: block;
  font-size: 16px;
  color: var(--em-ink);
  padding: 11px 16px;
  border-radius: 12px;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.submenu__link:hover { background: rgba(46, 38, 24, .07); }
.submenu__link.is-active { font-weight: 600; }

/* -- méga sous-menu (Intelligence) : liste + aperçu vidéo 1:1 -- */
.submenu--mega {
  display: flex;
  gap: 16px;
  width: auto;                 /* s'ajuste au contenu (carte 16:9 fixe) */
  padding: 16px;
}
.submenu__list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* items alignés en haut, espace en bas */
  flex: 0 0 262px;
  min-height: 330px;           /* hauteur basée sur Développement (7 items) */
  gap: 2px;
}
.submenu--mega .submenu__link {
  position: relative;
  white-space: normal;
  font-size: 15px;
  padding: 12px 16px;
}
/* couleur par méga-menu (bleu / brun / vert) */
.submenu--blue  { --mega-accent: #27A9D8; --mega-soft: rgba(39, 169, 216, .10);
  --mega-grad: radial-gradient(94.45% 81.71% at 81.78% 92.5%, #7ADCFF 0%, #27A9D8 100%); }
.submenu--brown { --mega-accent: #695738; --mega-soft: rgba(105, 87, 56, .12);
  --mega-grad: radial-gradient(94.45% 81.71% at 81.78% 92.5%, #9A7F55 0%, #695738 100%); }
.submenu--green { --mega-accent: #3FAB00; --mega-soft: rgba(63, 171, 0, .10);
  --mega-grad: radial-gradient(94.45% 81.71% at 81.78% 92.5%, #66D100 0%, #3FAB00 100%); }

.submenu--mega .submenu__link.is-active {
  background: var(--mega-soft);
  color: var(--mega-accent);
}
.submenu--mega .submenu__link.is-active::before {
  content: "";
  position: absolute;
  left: 5px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 3px;
  background: var(--mega-accent);
}
.submenu__preview { flex: 1 1 auto; display: flex; }
.preview-card {
  position: relative;
  margin: 0;
  width: 440px;                /* 4:3 fixe -> mêmes proportions partout, moins large */
  height: 330px;
  border-radius: 16px;
  overflow: hidden;
  /* fond dégradé de la couleur du menu : l'avatar sera composé sur ce fond */
  background: var(--mega-grad, radial-gradient(94.45% 81.71% at 81.78% 92.5%, #7ADCFF 0%, #27A9D8 100%));
}
.preview-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
}
.preview-card__video.is-ready { opacity: 1; }

/* bouton audio (haut-droite du bloc vidéo) */
.preview-card__audio,
.preview-card__replay {
  position: absolute;
  top: 10px;
  z-index: 2;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .42);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .2s ease;
}
.preview-card__audio { right: 10px; }
.preview-card__replay { right: 52px; }   /* à gauche du bouton audio */
.preview-card__audio:hover,
.preview-card__replay:hover { background: rgba(0, 0, 0, .62); }
.preview-card__audio svg { width: 18px; height: 18px; }
.preview-card__replay svg { width: 17px; height: 17px; fill: currentColor; }
.preview-card__audio .spk { fill: currentColor; }
.preview-card__audio .wave { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; display: none; }
.preview-card__audio.is-on .wave { display: block; }
.preview-card__audio .slash { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.preview-card__audio.is-on .slash { display: none; }

/* -- Actions à droite -- */
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.cta-contact {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--em-green);
  color: var(--em-white);
  font-size: 20px;
  height: 80px;
  padding: 0 38px;
  border-radius: 50px;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.cta-contact:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(63, 171, 0, .35);
}
.cta-contact__icon { width: 27px; height: 31px; }

.lang__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--em-ink);
  transition: background .2s ease;
}
.lang__btn:hover { background: rgba(46, 38, 24, .08); }
.lang__btn svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

/* ========================================================== */
/*  HERO                                                       */
/* ========================================================== */
body { position: relative; }
.hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background: var(--em-bg);
}

.hero__bonzai {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  opacity: 0;
  transform: scale(1.04);
  /* même fenêtre temporelle que la frappe du titre (~1,5 s, départ .25s) */
  animation: bonzaiFade 1.5s cubic-bezier(.22, .61, .36, 1) .25s forwards;
}

@keyframes bonzaiFade {
  to { opacity: 1; transform: scale(1); }
}

/* « E » du logo — filigrane 10% aligné sur le bonsaï */
.hero__logo-e {
  position: absolute;
  height: 78vh;
  width: auto;
  top: 30vh;
  left: 50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: eFade 1.5s ease .25s forwards;   /* même fenêtre que le bonsaï/titre */
}
@keyframes eFade { to { opacity: 1; } }

.hero__content {
  position: absolute;
  left: clamp(32px, 7.8vw, 200px);   /* 200px sur 27" (2560), proportionnel en dessous */
  top: 33%;
  /* s'arrête avant le bonsaï (~39 % du viewport) : 662px sur 27", ~536px sur MacBook Pro 16 */
  max-width: clamp(420px, 34vw, 662px);
  z-index: 2;
}

.hero__title {
  font-size: clamp(32px, 2.2vw, 40px);
  line-height: 1.28;
  font-weight: 400;
  color: var(--em-ink);
  margin: 0;
  min-height: 164px;
}
.hero__title .seg-green { color: var(--em-green); }

/* curseur de frappe (style IA) */
.type-caret {
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--em-green), var(--em-blue));
  box-shadow: 0 0 10px rgba(63, 171, 0, .6);
  animation: caretBlink 1s steps(1) infinite;
}
.type-caret.is-done { animation: caretBlink 1.1s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }

.hero__actions {
  display: flex;
  gap: 20px;
  margin-top: 56px;
  opacity: 0;
  transform: translateY(12px);
  animation: actionsFade .7s ease 1.4s forwards;
}
@keyframes actionsFade { to { opacity: 1; transform: translateY(0); } }

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  padding: 0 42px;
  font-size: 20px;
  border-radius: 50px;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-pill--solid {
  background: var(--em-ink);
  color: var(--em-white);
}
.btn-pill--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(46, 38, 24, .3);
}
.btn-pill--ghost {
  background: transparent;
  color: var(--em-ink-3);
  border: 1px solid var(--em-ink);
}
.btn-pill--ghost:hover {
  background: var(--em-ink);
  color: var(--em-white);
}

/* ---------- Footer (page temporaire) — superposé au bas du hero ---------- */
.site-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 58px;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--em-ink-3);
  opacity: 0;
  animation: actionsFade .7s ease 1.3s forwards;
}
.site-footer p { margin: 0; }
.site-footer__copy { opacity: .6; }
@media (max-width: 768px) {
  .site-footer { flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 24px; }
}

/* ---------- Logos clients (page temporaire) ---------- */
.logo-marquee {
  --marquee-gap: 80px;
  --marquee-fade: 96px;
  --marquee-duration: 70s;
  position: relative;
  width: 100%;
  margin-top: 72px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  animation: actionsFade .7s ease 1.4s forwards;
  /* fondus gauche/droite */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent 100%);
}
.logo-marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll var(--marquee-duration) linear infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__list {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  padding: 0 0 0 var(--marquee-gap);
  margin: 0;
  list-style: none;
  flex-shrink: 0;
}
.logo-marquee__item { flex-shrink: 0; display: flex; align-items: center; }
.logo-marquee__link { display: flex; align-items: center; }
.logo-marquee__link[href="#"] { pointer-events: none; }   /* pas encore d'URL */
.logo-marquee__item img {
  display: block;
  height: 52px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  opacity: .6;
  transition: opacity .25s ease, filter .25s ease;
}
.logo-marquee__link:hover img { opacity: 1; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; }
}

/* ========================================================== */
/*  SECTION 3 PILIERS                                          */
/* ========================================================== */
.pillars-section {
  container-type: inline-size;          /* base des unités cqw -> proportions fiables */
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* pas de 100vh : la section épouse le bac -> continuité sous la section */
  padding: 0 clamp(32px, 6vw, 116px) clamp(16px, 2.5vh, 44px);
  /* pas de background : le fond continu du body (--em-bg) traverse, le « E » n'est plus coupé */
}

.pillars-wrap {
  width: 100%;                          /* pleine largeur (alignée au gutter du header) */
  height: min(90vh, 1080px);           /* bac plus haut */
  background: var(--em-ink);
  border-radius: 5.44cqw;               /* 100 / 1837 */
  padding: 1.32cqw;                     /* contour brun réduit de moitié */
}

.pillars {
  display: flex;
  gap: 1.8cqw;                          /* ~33 / 1837 */
  height: 100%;
}

/* --- bloc générique --- */
.pillar {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 2.18cqw;
  transition: flex-grow .55s cubic-bezier(.65, 0, .35, 1);
  outline: none;
}

/* coins « uniques » selon la position (extérieurs 80, intérieurs 40) */
.pillar--blue  { border-radius: 4.35cqw 2.18cqw 2.18cqw 4.35cqw; }  /* 80/1837, 40/1837 */
.pillar--brown { border-radius: 2.18cqw; }
.pillar--green { border-radius: 2.18cqw 4.35cqw 4.35cqw 2.18cqw; }

/* couleurs / fonds */
.pillar--blue {
  background: radial-gradient(94.45% 81.71% at 81.78% 92.5%, #7ADCFF 0%, #27A9D8 100%);
}
.pillar--brown { background: var(--em-brown); }
.pillar--green { background: var(--em-green); }

/* --- vidéo de fond (vidéos cinématiques réalistes) --- */
.pillar__video {
  position: absolute;
  inset: -1px;                       /* léger débord -> couvre 100% (élimine la ligne 1px au bord) */
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s ease;
}
/* opacité 100% (fermé comme ouvert) */
.pillar__video.is-playing { opacity: 1; }

/* voile de marque par-dessus la vidéo : "color" garde la luminance/réalisme
   de la vidéo et applique la teinte de marque -> identité couleur préservée */
.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: color;
  transition: opacity .5s ease;
}
/* INACTIF (fermé) = filtre de couleur fondamentale à fond -> le bloc lit sa couleur de marque */
.pillar--blue::before  { background: var(--em-blue);  opacity: 1; }
.pillar--brown::before { background: var(--em-brown); opacity: 1; }
.pillar--green::before { background: var(--em-green); opacity: 1; }
/* ACTIF (ouvert) = mode couleur -> la vidéo passe en pleine couleur */
.pillars:not(:hover) .pillar--blue::before,
.pillars:hover .pillar:hover::before,
.pillar:focus-visible::before { opacity: .12; }

/* --- proportions actif / inactif --- */
/*  bleu actif au repos  */
.pillars:not(:hover) .pillar--blue { flex-grow: 4.7; }
/*  survol : le bloc visé s'agrandit, les autres se réduisent  */
.pillars:hover .pillar:hover,
.pillar:focus-visible { flex-grow: 4.7; }

/* --- voile blanc « footer » des blocs ouverts --- */
.pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(255, 255, 255, .38) 0%,
    rgba(255, 255, 255, .12) 18%,
    rgba(255, 255, 255, 0) 42%);
  opacity: 0;
  transition: opacity .5s ease;
}
.pillars:not(:hover) .pillar--blue::after,
.pillars:hover .pillar:hover::after,
.pillar:focus-visible::after { opacity: 1; }

/* --- label vertical (état réduit) --- */
.pillar__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  padding-bottom: 40px;
  z-index: 3;
  opacity: 1;
  transition: opacity .35s ease;
}
.pillar__label-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(18px, 1.5vw, 26px);
  letter-spacing: .02em;
  color: var(--em-white);
  white-space: nowrap;
}
.pillar--blue .pillar__label-text { color: #fff; }
.pillar__dot { width: 14px; height: 14px; }

/* --- contenu (état actif) --- */
.pillar__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;        /* texte centré verticalement */
  padding: clamp(28px, 3.2cqw, 64px);
  padding-left: clamp(48px, 5.5cqw, 120px);   /* plus de respiration à gauche */
  /* voile sombre côté gauche -> lisibilité du texte par-dessus la vidéo */
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,0) 64%);
  opacity: 0;
  transition: opacity .4s ease .1s;
  z-index: 3;
}

/* amorce narrative (remplace « Pilier 0X ») */
.pillar__lead {
  font-size: clamp(14px, 1.15vw, 21px);
  line-height: 1.3;
  color: rgba(255, 255, 255, .9);
  margin: 0;
}

/* lisibilité du texte par-dessus les vidéos (tous les blocs) */
.pillar__content,
.pillar__label-text { text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }

.pillar__title {
  font-size: clamp(40px, 5vw, 84px);
  font-weight: 700;            /* gras (synthétique de Neue Montreal Regular) */
  line-height: 1;
  letter-spacing: -.01em;
  margin: 6px 0 0;
  color: #fff;
  white-space: nowrap;
  transition: opacity .5s ease-in;   /* apparition « d'un coup » entre l'amorce et la description */
}

.pillar__body {
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.55;
  margin-top: clamp(16px, 1.6vw, 28px);
  max-width: 34em;
  min-height: 6em;                 /* réserve l'espace -> pas de dérive du titre */
  color: rgba(255, 255, 255, .92);
}

/* révélation mot par mot (amorce + description) : montée + fondu fluides */
.pillar__lead .rw,
.pillar__body .rw {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity .6s ease-out, transform .65s cubic-bezier(.2, .65, .3, 1);
  will-change: opacity, transform;
}
.pillar__lead .rw.in,
.pillar__body .rw.in { opacity: 1; transform: translateY(0); }

/* bascule label <-> contenu selon l'état ouvert */
.pillars:not(:hover) .pillar--blue .pillar__label,
.pillars:hover .pillar:hover .pillar__label,
.pillar:focus-visible .pillar__label { opacity: 0; }

.pillars:not(:hover) .pillar--blue .pillar__content,
.pillars:hover .pillar:hover .pillar__content,
.pillar:focus-visible .pillar__content { opacity: 1; }

/* ========================================================== */
/*  TÉMOIGNAGES (slider « Quote »)                            */
/* ========================================================== */
.testimonials {
  display: flex;
  justify-content: center;
  /* + d'air en bas pour laisser respirer avant Réalisations */
  padding: clamp(40px, 6vh, 96px) clamp(24px, 5vw, 80px) clamp(180px, 22vh, 260px);
}
.testimonials__inner {
  position: relative;
  width: min(100%, 1500px);      /* quote élargie à l'horizontal */
  text-align: center;
}

/* grand guillemet décoratif */
.testimonials__mark {
  display: block;
  font-family: "Funnel Display", var(--em-font);
  font-weight: 700;
  font-size: clamp(96px, 12vw, 190px);
  line-height: .5;
  color: var(--em-ink);
  opacity: .12;
  margin-bottom: clamp(8px, 1.4vw, 22px);
  user-select: none;
}

.testimonials__viewport {
  position: relative;
  min-height: clamp(170px, 20vh, 260px);
}

.tslide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;       /* quote sous le guillemet (espace réduit) */
  gap: clamp(20px, 2.6vh, 40px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease, visibility .6s;
}
.tslide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tslide__quote {
  margin: 0;
  font-family: var(--em-font);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 40px);
  line-height: 1.25;
  color: var(--em-ink);
  max-width: 1400px;
}
.tslide__author {
  font-family: "Funnel Display", var(--em-font);
  font-weight: 600;
  font-size: clamp(16px, 1.2vw, 20px);
  color: var(--em-ink);
  letter-spacing: .01em;
}
/* barre d'accent (3 couleurs fondamentales) au-dessus du nom */
.tslide__author::before {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin: 0 auto 16px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--em-blue), var(--em-brown), var(--em-green));
}

.testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(28px, 4vh, 56px);
}
.testimonials__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(46, 38, 24, .22);
  cursor: pointer;
  transition: background .25s ease, width .25s ease, border-radius .25s ease;
}
.testimonials__dot:hover { background: rgba(46, 38, 24, .45); }
.testimonials__dot.is-active {
  width: 28px;
  border-radius: 5px;
  background: var(--em-ink);
}

/* ========================================================== */
/*  RÉALISATIONS (showreels)                                  */
/* ========================================================== */
.work {
  position: relative;
  z-index: 3;
  margin-top: clamp(-80px, -5vh, -28px);     /* léger chevauchement (parallaxe) */
  min-height: 100vh;                         /* la section tient dans un écran */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* mêmes gutters que les 3 blocs -> le panneau a la même largeur (pas full-width) */
  padding: clamp(40px, 6vh, 90px) clamp(32px, 6vw, 116px);
  transform: translateY(var(--work-rise, 0px));   /* parallaxe (JS) */
  will-change: transform;
}
/* panneau blanc à la largeur de la section des 3 blocs */
.work__inner {
  width: 100%;
  background: #fff;
  border-radius: clamp(28px, 3vw, 64px);
  box-shadow: 0 30px 70px rgba(46, 38, 24, .16);
  padding: clamp(40px, 5vh, 80px) clamp(28px, 3vw, 56px) clamp(48px, 6vh, 88px);
}
.work__head {
  text-align: center;
  max-width: 100%;
  margin: 0 auto clamp(34px, 5vh, 64px);
}
.work__title {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 56px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--em-ink);
}
.work__intro {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.5;
  color: rgba(46, 38, 24, .72);
  white-space: nowrap;          /* une seule ligne */
}
@media (max-width: 820px) { .work__intro { white-space: normal; } }

/* --- Feature pleine largeur --- */
/* --- Player Réalisations : vignettes (gauche) + showreel actif (droite) --- */
.work__player {
  display: flex;
  gap: clamp(14px, 1.4vw, 26px);
  align-items: stretch;
  width: 100%;
}
.work__thumbs {
  flex: 0 0 clamp(170px, 17vw, 264px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 14px);
}
.work-thumb {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  border: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  opacity: .6;
  transition: opacity .25s ease, box-shadow .25s ease;
}
.work-thumb:hover { opacity: .92; }
.work-thumb.is-active { opacity: 1; box-shadow: 0 0 0 3px var(--em-ink); }
.work-thumb__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-thumb__name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 10px 7px;
  font-size: 12px; font-weight: 600; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,.82), transparent);
}
.work__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 18px);
}
.work__main-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 60vh;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 16px 44px rgba(46, 38, 24, .18);
}
.work__main-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work__main-info { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.work__main-client {
  font-family: "Funnel Display", var(--em-font);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 28px);
  color: var(--em-ink);
}
.work__main-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: rgba(46, 38, 24, .72);
  white-space: nowrap; transition: gap .2s ease;
}
.work__main-cta:hover { gap: 11px; }
@media (max-width: 820px) {
  .work__player { flex-direction: column; }
  .work__thumbs { flex: 0 0 auto; flex-direction: row; overflow-x: auto; }
  .work-thumb { flex: 0 0 140px; aspect-ratio: 16 / 9; }
}

/* ========================================================== */
/*  RESPONSIVE — réglages d'appoint                           */
/* ========================================================== */
@media (max-width: 1200px) {
  .main-nav { gap: 26px; margin-left: 36px; }
  .site-header__inner { padding: 28px 32px; }
}

@media (max-width: 992px) {
  .main-nav { display: none; }
  /* rayons/paddings restent proportionnels via cqw — rien à surcharger ici */
}

@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  /* header compact */
  .site-header__inner { padding: 18px 20px; }
  .brand__logo { width: 96px; height: auto; }
  .header-actions { gap: 8px; }
  .cta-contact { height: 46px; font-size: 15px; padding: 0 18px; gap: 10px; }
  .cta-contact__icon { width: 20px; height: 20px; }
  .lang__btn { width: 40px; height: 40px; }
  .submenu--right { right: 0; }

  /* hero : texte en haut, bonsaï en bas */
  .hero { height: 100svh; min-height: 640px; }
  .hero__bonzai {
    inset: auto 0 0 0;
    height: 52%;
    object-position: 70% bottom;   /* centre le bonsaï (à ~70 % du cadre) */
    transform: none;
  }
  .hero__logo-e { display: none; }
  .hero__content {
    position: absolute;
    left: 20px; right: 20px; top: 96px;
    max-width: none;
  }
  .hero__title { font-size: 26px; line-height: 1.3; min-height: 0; }

  /* logos : plus petits, plus serrés */
  .logo-marquee { margin-top: 32px; --marquee-gap: 44px; --marquee-fade: 40px; --marquee-duration: 60s; }
  .logo-marquee__item img { height: 36px; max-width: 140px; }

  /* footer sur le bas du bonsaï */
  .site-footer { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 20px; font-size: 12px; }

  .btn-pill { height: 56px; font-size: 16px; padding: 0 24px; }
}

@media (max-width: 400px) {
  .cta-contact span { display: none; }           /* icône seule */
  .cta-contact { padding: 0 13px; gap: 0; }
  .hero__title { font-size: 23px; }
}