/* =========================================================
   WAAPLUKA : Système de design
   Violet #B373FC / Noir / Blanc : Clash Display + Prompt
   ========================================================= */

/* ---------- Fonts ----------
   Chargées via <link> dans le <head> du HTML (pas d'@import : bloquant) :
   Clash Display (Fontshare, titres) + Prompt (Google Fonts, corps). */

/* ---------- Tokens ---------- */
:root {
  /* Couleurs : socle neutre chaud · violet en accent · indigo + crème en soutien
     Ratio cible : ~80% neutre, ~15% violet, ~5% indigo */
  --violet: #A66BFF;            /* violet Waapluka principal */
  --violet-bright: #C7A0FF;     /* violet pâle de liaison */
  --violet-deep: #3A124F;       /* violet profond, texte et aplats */
  --violet-pop: #8738F2;        /* violet vivant, accents */
  --violet-soft: #F0E3FF;       /* fond d'icône / puce */
  --lavender-bg: #E6CCFF;       /* cadre et fonds doux */
  --coral: #FF6B2C;             /* complémentaire CTA / énergie */
  --coral-soft: #FFE1D2;        /* fond corail clair */
  --indigo: #2E2A5E;            /* accent froid de soutien */
  --indigo-soft: #ECEAF4;
  --cream: #EDE6DA;             /* accent chaud de soutien */
  --ink: #30143F;              /* violet-encre : presque noir, plus doux et plus Waapluka */
  --ink-soft: #422053;         /* idem, variante légèrement plus claire */
  --indigo-deep: #221C44;      /* indigo profond : remplace tout noir en fond/ombre */
  --paper: #FFF8F2;            /* off-white chaud : fond principal */
  --paper-2: #FFFDFC;          /* surface claire (cartes) */
  --grey-700: #555158;         /* texte secondaire chaud */
  --grey-500: #6F6A74;         /* assombri : contraste AA pour le texte secondaire */
  --grey-300: #BBB6BE;
  --grey-150: #E2DDD6;         /* hairlines chaudes */
  --grey-50: #F1ECE4;          /* bande de respiration */
  --white: #FCFBF9;            /* « blanc » adouci (off-white-2) */

  /* Dégradés */
  --grad-violet: var(--violet);
  --grad-text: var(--violet-deep);

  /* Typo */
  --font-display: 'Clash Display', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Epilogue', system-ui, -apple-system, sans-serif;
  --font-bubble: 'Clash Display', system-ui, sans-serif; /* petites bulles : pain points, tags */

  /* Rayons & ombres */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;
  --shadow-sm: 0 4px 16px rgba(46, 42, 94, 0.08);
  --shadow-md: 0 18px 50px rgba(46, 42, 94, 0.14);
  --shadow-violet: 0 18px 44px rgba(123, 47, 247, 0.30);

  /* Layout */
  --maxw: 1440px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 58px;

  /* Cadre passe-partout autour du site */
  --frame-w: clamp(12px, 1.7vw, 22px);
  --frame-r: clamp(24px, 2.8vw, 40px);
  --frame-color: var(--lavender-bg);          /* cadre lavande */

  /* Easing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--frame-color); }

/* Cadre passe-partout : mat lavande qui remplit l'extérieur d'une fenêtre arrondie */
body::before {
  content: ""; position: fixed; inset: var(--frame-w);
  z-index: 9000; pointer-events: none;
  border-radius: calc(var(--frame-r) - var(--frame-w));
  box-shadow: 0 0 0 100vmax var(--frame-color);
}
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ---------- Typo ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
p { color: var(--grey-700); }
.text-violet { color: var(--violet-deep); }
.grad-text {
  color: var(--violet-deep);
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(70px, 10vw, 130px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-deep);
}
.eyebrow::before { content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat; color: var(--violet); font-size: 0.9em; }
.eyebrow--light { color: var(--violet-bright); }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.48;
  color: var(--grey-700);
  max-width: 68ch;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--grad-violet); color: var(--white); box-shadow: 0 5px 14px rgba(123, 47, 247, 0.22); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 9px 22px rgba(123, 47, 247, 0.30); }
.btn--dark { background: var(--indigo); color: var(--white); }
.btn--dark:hover { transform: translateY(-3px); background: var(--indigo-deep); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--grey-300); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-3px); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn--lg { padding: 18px 34px; font-size: 1.05rem; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  transition: gap .3s var(--ease);
}
.arrow-link:hover { gap: 14px; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background .4s, box-shadow .4s, backdrop-filter .4s;
}
.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 var(--grey-150);
}
.nav__logo img { height: 28px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a {
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  transition: color .25s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--violet);
  border-radius: 2px;
  transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--violet-deep); }
.nav__links a:hover::after,
.nav__links a.is-active::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 16px; }
.nav__burger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; }
.nav__burger span { display: block; height: 2px; width: 24px; background: var(--ink); margin-inline: auto; border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: var(--white);
  z-index: 99;
  padding: 32px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateX(100%);
  transition: transform .45s var(--ease);
  visibility: hidden;
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }
.mobile-menu a { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; padding: 14px 0; border-bottom: 1px solid var(--grey-150); }
.mobile-menu .btn { margin-top: 20px; justify-content: center; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(40px, 8vw, 90px));
  padding-bottom: clamp(40px, 6vw, 70px);
  overflow: hidden;
}
/* Mesh gradient animé : orbes floues qui dérivent lentement (transform = GPU) */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(75px);
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.hero__glow--1 {
  top: -12%; right: -6%;
  width: 52vw; height: 52vw; max-width: 680px; max-height: 680px;
  background: radial-gradient(circle, rgba(179,115,252,0.42) 0%, rgba(179,115,252,0) 66%);
  animation: drift1 32s linear infinite;
}
.hero__glow--2 {
  bottom: -18%; left: -12%;
  width: 46vw; height: 46vw; max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, rgba(46,42,94,0.30) 0%, rgba(46,42,94,0) 62%);
  animation: drift2 40s linear infinite;
}
.hero__glow--3 {
  top: 24%; left: 38%;
  width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
  background: radial-gradient(circle, rgba(201,160,255,0.34) 0%, rgba(201,160,255,0) 60%);
  animation: drift3 36s linear infinite;
}
/* Flux continu (linear, sans pause aux extrêmes) : déplacement sur boucle fermée */
@keyframes drift1 { 0%{transform:translate(0,0) scale(1)} 25%{transform:translate(4vw,3vh) scale(1.08)} 50%{transform:translate(2vw,6vh) scale(1.13)} 75%{transform:translate(-3vw,3vh) scale(1.06)} 100%{transform:translate(0,0) scale(1)} }
@keyframes drift2 { 0%{transform:translate(0,0) scale(1.1)} 25%{transform:translate(-4vw,-3vh) scale(1.04)} 50%{transform:translate(-6vw,2vh) scale(1)} 75%{transform:translate(-2vw,-4vh) scale(1.06)} 100%{transform:translate(0,0) scale(1.1)} }
@keyframes drift3 { 0%{transform:translate(0,0) scale(1)} 25%{transform:translate(-3vw,4vh) scale(1.1)} 50%{transform:translate(-5vw,-3vh) scale(1.16)} 75%{transform:translate(3vw,2vh) scale(1.08)} 100%{transform:translate(0,0) scale(1)} }

/* Hero centré : une seule colonne, contenu aligné au centre */
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1080px; margin-inline: auto; }
.hero h1 { margin-bottom: 24px; max-width: 22ch; }
.hero h1 .grad-text { display: inline; }
.hero__lead { font-size: clamp(1.1rem, 1.8vw, 1.32rem); margin-bottom: 34px; max-width: 70ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }

/* Pastilles mots-clés sous les boutons (compréhension en 5 s) */
.hero__pills { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 28px; max-width: 720px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 500; font-size: 0.86rem;
  padding: 8px 15px; border-radius: var(--r-pill);
  background: var(--paper-2); border: 1px solid var(--grey-150); color: var(--grey-700);
  transition: transform .3s var(--ease), border-color .3s, color .3s;
}
.hero-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); flex-shrink: 0; }
.hero-pill:hover { transform: translateY(-2px); border-color: var(--violet); color: var(--ink); }

/* Stats inline centrées avec séparateurs */
.hero__stats { display: flex; gap: clamp(22px, 4vw, 48px); margin-top: 56px; flex-wrap: wrap; align-items: center; justify-content: center; }
.hero__stats > div:not(.stat__sep) { display: flex; flex-direction: column; align-items: center; }
.stat__sep { width: 1px; align-self: stretch; min-height: 48px; background: linear-gradient(var(--grey-150), transparent); }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1; color: var(--ink); }
.stat__label { font-size: 0.9rem; color: var(--grey-500); margin-top: 8px; max-width: 16ch; }

/* =========================================================
   HERO ASYMÉTRIQUE : texte à gauche, pastilles+stats à droite
   dans une carte violet très clair.
   ========================================================= */
.hero--asym .hero__glow--3 { display: none; }
.hero-asym {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 56px);
  align-items: center; text-align: left;
}
.hero-asym__left h1 { max-width: none; text-align: left; margin-bottom: 22px; }
.hero-asym__left .hero__lead { margin-inline: 0; text-align: left; margin-bottom: 30px; }
.hero-asym__left .hero__actions { justify-content: flex-start; }
.hero-asym__right {
  background: var(--violet-soft); border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 36px);
}
.hero-asym__right .hero__pills { justify-content: flex-start; margin-top: 0; max-width: none; }
.hero-asym__right .hero__stats { justify-content: flex-start; margin-top: 28px; gap: clamp(20px, 3vw, 32px); flex-wrap: wrap; }
.hero-asym__right .hero__stats > div { align-items: flex-start; }
.hero-asym__right .stat__label { text-align: left; }
@media (max-width: 900px) {
  .hero-asym { grid-template-columns: 1fr; text-align: center; }
  .hero-asym__left { text-align: center; }
  .hero-asym__left h1 { text-align: center; margin-inline: auto; max-width: 22ch; }
  .hero-asym__left .hero__lead { text-align: center; margin-inline: auto; }
  .hero-asym__left .hero__actions { justify-content: center; }
  .hero-asym__right .hero__pills, .hero-asym__right .hero__stats { justify-content: center; }
  .hero-asym__right .hero__stats > div { align-items: center; }
  .hero-asym__right .stat__label { text-align: center; }
}

/* =========================================================
   BANDEAU LOGOS CLIENTS (marquee)
   ========================================================= */
.marquee {
  position: relative;
  /* bande resserrée : le seam de la section suivante remonte sur le bas, on le compense */
  padding-block: clamp(14px, 2vw, 24px) calc(clamp(52px, 6vw, 80px) + var(--seam-r, 40px));   /* + d'air sous les logos */
  background: transparent;
}
.marquee__label { text-align: center; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 36px; }
.marquee__viewport {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 80s linear infinite;   /* ralenti (42s → 80s) */
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex; align-items: center;
  gap: clamp(50px, 6vw, 94px);
  padding-right: clamp(50px, 6vw, 94px);
}
/* logos en couleur d'origine ; ceux dont la marque est monochrome restent en noir, légèrement adoucis */
.marquee__group img {
  height: 54px; width: auto; flex-shrink: 0;
  opacity: 1; filter: none;
  transition: transform .35s var(--ease), opacity .3s;
}
.marquee__group img:hover { transform: translateY(-3px); }
.marquee__group img.is-mono { opacity: .78; }
.marquee__group img.is-mono:hover { opacity: 1; }
.marquee__group img.is-stacked { height: 72px; }
.marquee__slot {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  height: 46px; padding: 0 22px;
  border: 1.5px dashed var(--violet); border-radius: var(--r-pill);
  color: var(--violet-deep); background: var(--violet-soft);
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   SECTIONS génériques
   ========================================================= */
.section-head { max-width: 72ch; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { max-width: 640px; margin-inline: auto; text-align: center; }
.section-head h2 { margin-block: 14px 18px; }

/* Section sombre */
.section--dark { background: var(--indigo); color: var(--white); }
.section--dark p { color: var(--grey-300); }
.section--dark .section-head h2 { color: var(--white); }

/* =========================================================
   SERVICES (grid cards)
   ========================================================= */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.service-card {
  background: var(--white);
  border: 1px solid var(--grey-150);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 40px);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  position: relative;
  overflow: hidden;
}
.service-card::after {
  content: "";
  position: absolute; inset: auto auto -40% -40%;
  width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(179,115,252,0.10), transparent 70%);
  opacity: 0; transition: opacity .4s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.service-card:hover::after { opacity: 1; }
.service-card__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--violet-soft);
  display: grid; place-items: center;
  margin-bottom: 22px;
  font-size: 1.5rem;
}
.service-card h3 { margin-bottom: 10px; }
.service-card__list { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.service-card__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; color: var(--grey-700); }
.service-card__list li::before { content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat; color: var(--violet); flex-shrink: 0; }

/* =========================================================
   PANNEAU SOMBRE (Process) : carte arrondie flottante, plus de noir plein-écran
   ========================================================= */
.dark-panel {
  position: relative;
  background: linear-gradient(165deg, #3A3170 0%, #2E2A5E 56%, var(--indigo-deep) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: clamp(24px, 3vw, 42px);
  padding: clamp(34px, 5vw, 76px);
  color: var(--white);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(46,42,94,0.30);
}
/* lueur violette douce en haut pour adoucir l'entrée dans le sombre */
.dark-panel::after {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 60%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(179,115,252,0.20), transparent 70%);
  pointer-events: none;
}
.dark-panel > * { position: relative; z-index: 1; }
.dark-panel .section-head { margin-bottom: clamp(20px, 3vw, 34px); }
.dark-panel .section-head h2 { color: var(--white); }
.dark-panel .section-head p { color: var(--grey-300); }
.dark-panel.section--grain::before { opacity: 0.09; mix-blend-mode: overlay; z-index: 0; }

.steps { display: grid; gap: 0; position: relative; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 3vw, 36px);
  padding-bottom: clamp(28px, 3.4vw, 46px);
  align-items: start;
  position: relative;
}
.step:last-child { padding-bottom: 0; }
/* fil conducteur : ligne verticale reliant les badges d'étape */
.step:not(:last-child)::before {
  content: ""; position: absolute;
  left: 27px; top: 58px; bottom: 0; width: 2px;
  background: linear-gradient(rgba(179,115,252,0.55), rgba(179,115,252,0.06));
}
.step__num {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  transition: border-color .4s, background .4s;
}
.step:hover .step__num { border-color: rgba(179,115,252,0.5); background: rgba(179,115,252,0.10); }
.step__num span {
  font-family: var(--font-display); font-weight: 700; font-size: 1.32rem;
  color: var(--violet-bright);
}
.step__body { padding-top: 7px; }
.step__body h3 { color: var(--white); margin-bottom: 10px; }
.step__body p { color: var(--grey-300); max-width: 58ch; }
.step__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.step__tags span {
  font-size: 0.78rem; font-weight: 500;
  padding: 5px 13px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.18); color: var(--grey-300);
}
.dark-panel__cta { margin-top: clamp(28px, 3.5vw, 46px); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dark-panel__cta span { color: var(--grey-300); font-size: 0.95rem; }

/* =========================================================
   RÉALISATIONS : cartes premium « ambient shot » + reveal 3D
   ========================================================= */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; perspective: 1500px; }
.work-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--grey-150);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
  display: flex;
  flex-direction: column;
}
.work-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); border-color: transparent; }

/* Scène ambient derrière le screenshot (dégradé profond + orbes floues) */
.work-card__media-link { display: block; }
.work-card__scene {
  position: relative; aspect-ratio: 16 / 11; overflow: hidden;
  background: linear-gradient(158deg, #2C2658 0%, #251F49 58%, var(--indigo-deep) 100%);
  display: grid; place-items: end center;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px) 0;
}
.work-card__orb { position: absolute; border-radius: 50%; filter: blur(36px); pointer-events: none; transition: opacity .5s, transform .7s var(--ease); }
.work-card__orb--1 { width: 56%; height: 72%; top: -20%; left: -14%; background: radial-gradient(circle, rgba(179,115,252,.78), transparent 68%); opacity: .85; }
.work-card__orb--2 { width: 52%; height: 66%; bottom: -18%; right: -14%; background: radial-gradient(circle, rgba(201,160,255,.55), transparent 66%); opacity: .7; }
.work-card__float { width: 100%; will-change: transform; animation: shot-float 8s ease-in-out infinite; }
@keyframes shot-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.work-card__shot {
  position: relative; z-index: 1; width: 100%;
  border-radius: 11px 11px 0 0; overflow: hidden;
  box-shadow: 0 26px 54px rgba(34,28,68,.45), 0 4px 14px rgba(34,28,68,.32);
  transform: perspective(1200px) rotateX(8deg);
  transform-origin: center bottom;
  transition: transform .6s var(--ease);
}
.work-card__shot img { width: 100%; display: block; }
.work-card:hover .work-card__shot { transform: perspective(1200px) rotateX(3deg) scale(1.025); }
.work-card:hover .work-card__orb { opacity: 1; }
.work-card:hover .work-card__orb--1 { transform: translate(7%, 5%); }
.work-card:hover .work-card__orb--2 { transform: translate(-7%, -5%); }

/* Corps : titre + pills à icônes + description + filet pointillé + CTA */
.work-card__body { padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 15px; flex: 1; }
.work-card__body h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); }
.work-card__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.work-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
  padding: 6px 12px; border-radius: var(--r-pill);
  /* fond blanc + bordure : contraste garanti quelle que soit la couleur de la carte
     (certaines cartes sont violet-soft, la pill s'y fondait avant ce fix) */
  background: var(--white); color: var(--violet-deep);
  border: 1px solid rgba(58,18,79,0.14);
}
.work-pill svg { width: 15px; height: 15px; }
.work-pill--alt { background: var(--white); color: var(--coral); border-color: rgba(255,107,44,0.28); }
.work-card__desc { font-size: 0.96rem; color: var(--grey-700); margin: 0; line-height: 1.55; }
.work-card__sep { border-top: 1px dashed var(--grey-300); margin-top: auto; }
.work-card__cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.96rem;
  color: var(--violet-deep); transition: gap .3s var(--ease);
}
.work-card__cta svg { width: 17px; height: 17px; }
.work-card:hover .work-card__cta { gap: 14px; }

/* Carte CTA en fin de grille */
.work-card--cta { background: linear-gradient(155deg, #B373FC 0%, #8B4BE0 55%, #6C34C9 100%); border-color: transparent; color: var(--white); box-shadow: var(--shadow-violet); }
.work-card--cta .work-card__body { align-items: flex-start; justify-content: center; gap: 12px; text-align: left; }
.work-card--cta h3 { color: var(--white); }
.work-card--cta p { color: rgba(255,255,255,0.92); margin: 0; }
.work-card--cta__spark { font-size: 1.8rem; line-height: 1; color: rgba(255,255,255,0.85); }
.work-card--cta .btn { margin-top: 8px; }
.work-card--cta:hover { transform: translateY(-7px); box-shadow: 0 26px 60px rgba(123,47,247,0.42); }

/* Reveal 3D étagé : monte + dézoome + flou se lève + tilt qui se pose */
.reveal--card { transform: perspective(1100px) translateY(46px) scale(.93) rotateX(7deg); filter: blur(9px); transform-origin: center bottom; }
.reveal--card.is-visible { transform: perspective(1100px) translateY(0) scale(1) rotateX(0); filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  .work-card__float { animation: none !important; }
  .work-card__shot { transform: none !important; }
}

/* =========================================================
   À PROPOS
   ========================================================= */
.about { display: grid; grid-template-columns: 0.9fr 1fr; gap: clamp(40px, 6vw, 84px); align-items: center; }
.about__media { position: relative; }
/* blob dégradé décoratif derrière le portrait */
.about__media::before {
  content: ""; position: absolute; inset: -8% -8% -8% 6%;
  border-radius: var(--r-lg);
  background: var(--grad-violet); opacity: 0.18; filter: blur(8px);
  z-index: 0;
}
.about__frame {
  position: relative; z-index: 1;
  border-radius: var(--r-lg); overflow: hidden;
  padding: 8px; background: var(--paper-2);
  border: 1px solid var(--grey-150);
  box-shadow: var(--shadow-md);
}
.about__frame img { border-radius: calc(var(--r-lg) - 8px); width: 100%; display: block; }
.about__badge {
  position: absolute; z-index: 2; bottom: 22px; left: -18px;
  background: var(--white); border-radius: var(--r-md);
  padding: 14px 20px; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 14px;
}
.about__badge .dot { width: 10px; height: 10px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52,211,153,0.18); }
.about__badge strong { font-family: var(--font-display); font-size: 0.95rem; display: block; }
.about__badge span { font-size: 0.8rem; color: var(--grey-500); }
.about__chip {
  position: absolute; z-index: 2; top: 20px; right: -16px;
  background: var(--white); border-radius: var(--r-md);
  padding: 12px 16px; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 11px;
  font-size: 0.82rem; color: var(--grey-700); line-height: 1.3;
}
.about__chip svg { width: 22px; height: 22px; color: var(--violet-deep); flex-shrink: 0; }
.about__chip strong { font-family: var(--font-display); color: var(--ink); }
.about__quote {
  position: relative;
  font-size: clamp(1.12rem, 1.7vw, 1.3rem); line-height: 1.55;
  color: var(--ink); font-style: normal; font-weight: 400;
  padding-left: 26px; margin-bottom: 16px;
}
.about__quote::before {
  content: "\201C"; position: absolute; left: 14px; top: -18px;
  font-family: var(--font-display); font-size: 3.4rem; line-height: 1;
  color: var(--violet); opacity: 0.28;
}
.about__sign { font-family: var(--font-display); font-weight: 600; color: var(--violet-deep); margin-top: 6px; padding-left: 26px; }
.about__points { display: flex; flex-direction: column; gap: 13px; margin-top: 28px; }
.about__points li { display: flex; gap: 13px; align-items: center; font-size: 1.02rem; color: var(--ink); }
.ic--sm { width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; }
.ic--sm svg { width: 16px; height: 16px; }

/* =========================================================
   CTA final
   ========================================================= */
.cta-band { position: relative; overflow: hidden; }
.cta-card {
  background: var(--grad-violet);
  border-radius: var(--r-lg);
  padding: clamp(44px, 7vw, 90px);
  text-align: center;
  position: relative;
  overflow: hidden;
  color: var(--white);
}
.cta-card::before {
  content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat; position: absolute; top: 10%; left: 8%;
  font-size: 4rem; color: rgba(255,255,255,0.16);
}
.cta-card::after {
  content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat; position: absolute; bottom: 12%; right: 9%;
  font-size: 6rem; color: rgba(255,255,255,0.12);
}
.cta-card h2 { color: var(--white); max-width: 18ch; margin-inline: auto; }
.cta-card p { color: rgba(255,255,255,0.92); max-width: 50ch; margin: 18px auto 32px; }
.cta-card .btn { position: relative; z-index: 1; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: linear-gradient(165deg, #2E2A5E 0%, var(--indigo-deep) 100%); color: var(--grey-300); padding-block: clamp(50px, 7vw, 80px) 32px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 50px; }
.footer__logo img { height: 30px; margin-bottom: 18px; }
.footer__brand p { color: var(--grey-500); max-width: 32ch; font-size: 0.95rem; }
.footer h4 { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin-bottom: 18px; }
.footer__col a, .footer__col li { display: block; font-size: 0.94rem; color: var(--grey-300); padding-block: 6px; transition: color .25s; }
.footer__col a:hover { color: var(--violet-bright); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.10); padding-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.85rem; color: var(--grey-500); }
.footer__bottom a:hover { color: var(--violet-bright); }
.footer__social { display: flex; gap: 12px; margin-top: 18px; }
.footer__social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); display: grid; place-items: center; transition: background .25s, border-color .25s; }
.footer__social a:hover { background: var(--violet-deep); border-color: var(--violet-deep); }
.footer__social svg { width: 18px; height: 18px; }
.footer__social a { color: #fff; }

/* =========================================================
   PAGE HEADER (sous-pages)
   ========================================================= */
.page-hero { padding-top: calc(var(--nav-h) + clamp(50px, 8vw, 90px)); padding-bottom: clamp(30px, 5vw, 50px); position: relative; overflow: hidden; }
.page-hero__glow { position: absolute; top: -30%; right: -10%; width: 50vw; height: 50vw; max-width: 600px; background: radial-gradient(circle, rgba(179,115,252,0.22), transparent 65%); z-index: -1; }
.page-hero h1 { max-width: 16ch; margin-block: 16px 20px; }
.page-hero .lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }

/* =========================================================
   PROSE (légales)
   ========================================================= */
.prose { max-width: 760px; margin-inline: auto; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 48px; margin-bottom: 14px; }
.prose h3 { font-size: 1.2rem; margin-top: 28px; margin-bottom: 8px; }
.prose p, .prose li { color: var(--grey-700); margin-bottom: 12px; font-size: 1rem; }
.prose ul { padding-left: 22px; list-style: disc; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 64px); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 22px; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-item__icon { width: 46px; height: 46px; border-radius: 14px; background: var(--violet-soft); display: grid; place-items: center; flex-shrink: 0; font-size: 1.2rem; }
.contact-item strong { font-family: var(--font-display); display: block; font-size: 1rem; margin-bottom: 2px; }
.contact-item a, .contact-item span { color: var(--grey-700); font-size: 0.96rem; }
.contact-item a:hover { color: var(--violet-deep); }
.calendly-embed { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--grey-150); min-height: 660px; box-shadow: var(--shadow-sm); }

/* =========================================================
   REVEAL (scroll animations)
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease), clip-path .9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; filter: none; clip-path: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }

/* Variantes premium (1 effet par type de bloc) */
.reveal--blur { filter: blur(14px); transform: translateY(16px); }      /* gros titres */
.reveal--clip { clip-path: inset(0 0 100% 0); transform: translateY(20px); } /* images / médias */
.reveal--clip.is-visible { clip-path: inset(0 0 0 0); }
.reveal--scale { transform: scale(.95); }                                /* cartes */
.reveal--scale.is-visible { transform: scale(1); }

/* Révélation de titre ligne par ligne */
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; transform: translateY(112%); transition: transform 1s var(--ease); }
.line-mask.is-visible > span { transform: translateY(0); }
.line-mask.is-visible > span:nth-child(2) { transition-delay: .08s; }
.line-mask.is-visible > span:nth-child(3) { transition-delay: .16s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .about { grid-template-columns: 1fr; }
  .about__media { max-width: 440px; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav__links, .nav__cta .btn { display: none; }
  .nav__burger { display: flex; }
  .services-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .about__chip { display: none; }
  .about__badge { left: 10px; }
  .step { gap: 16px; }
  .step__num { width: 46px; height: 46px; }
  .step:not(:last-child)::before { left: 22px; top: 48px; }
  .about__badge { left: 12px; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
  .hero__stats { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   AJOUTS v2 : Contenu réel, méthode Waa·Pluka, motion, mascotte
   ========================================================= */

/* ---------- Badge pill (ex: +15 clients) ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--violet-soft); color: var(--violet-deep);
  font-weight: 500; font-size: 0.9rem;
}
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(179,115,252,0.22); }
.pill--dark { background: rgba(255,255,255,0.08); color: var(--violet-bright); }

/* ---------- Count-up stat (compteur) ---------- */
.stat__num[data-count] { font-variant-numeric: tabular-nums; }

/* =========================================================
   PAIN POINTS
   ========================================================= */
.pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.pain-card {
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  background: var(--paper-2); border: 1px solid var(--grey-150);
  border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 28px);
  position: relative; overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.pain-card::after { content: ""; position: absolute; inset: auto -30% -50% auto; width: 55%; height: 75%; background: radial-gradient(circle, rgba(179,115,252,0.10), transparent 70%); opacity: 0; transition: opacity .45s; }
.pain-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.pain-card:hover::after { opacity: 1; }
.pain-card:hover .ic { background: var(--grad-violet); color: #fff; transform: translateY(-2px) rotate(-4deg); box-shadow: var(--shadow-violet); }
.pain-card p { font-size: 1rem; color: var(--ink); margin: 0; font-weight: 500; line-height: 1.4; position: relative; z-index: 1; }

/* Verdict « la bonne nouvelle » */
.pain-verdict {
  margin-top: clamp(36px, 5vw, 56px); text-align: center;
  max-width: 780px; margin-inline: auto;
  background: var(--violet-soft); border: 1px solid rgba(179,115,252,0.30);
  border-radius: var(--r-lg); padding: clamp(28px, 4vw, 46px);
}
.pain-verdict__eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-deep); margin-bottom: 12px; }
.pain-verdict p { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.36; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.pain-verdict strong { color: var(--violet-deep); font-weight: 600; }

/* =========================================================
   MÉTHODE WAA · PLUKA
   ========================================================= */
.method-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
/* Méthode accueil : photo Tessa + 2 cartes temps 1/temps 2 */
.method-layout { display: grid; grid-template-columns: 0.82fr 1fr; gap: clamp(22px, 3vw, 36px); align-items: stretch; }
.method-photo { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 380px; box-shadow: var(--shadow-md); }
.method-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.method-photo__tag { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 9px; background: rgba(252,251,249,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: var(--r-pill); padding: 9px 16px; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--ink); box-shadow: var(--shadow-sm); }
.method-photo__tag .dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52,211,153,0.18); flex-shrink: 0; }
.method-cards { display: grid; gap: clamp(18px, 2vw, 22px); align-content: stretch; }
.method-cards .method-card { padding: clamp(24px, 3vw, 36px); }
.method-cards .flow-card__step { margin-bottom: 12px; }
@media (max-width: 860px) { .method-layout { grid-template-columns: 1fr; } .method-photo { min-height: 300px; } }
.method-card {
  border-radius: var(--r-lg); padding: clamp(30px, 4vw, 46px);
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease);
}
.method-card:hover { transform: translateY(-4px); }
.method-card--waa { background: linear-gradient(150deg, #B373FC 0%, #8B4BE0 52%, #6C34C9 100%); color: var(--white); box-shadow: var(--shadow-violet); }
.method-card--pluka { background: var(--indigo); color: var(--white); }
.method-card__tag {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.02em; line-height: 1;
}
.method-card--pluka .method-card__tag { color: var(--violet-bright); }
.method-card__sub { font-size: 1.08rem; font-weight: 600; margin: 8px 0 24px; opacity: 1; }
.method-card ul { display: flex; flex-direction: column; gap: 14px; }
.method-card li { display: flex; gap: 13px; align-items: center; font-size: 1rem; color: #fff; }
.method-card li::before {
  content: ""; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 9px;
  background: rgba(255,255,255,0.20); color: #fff;
  display: grid; place-items: center;
  font-size: 0.9rem; line-height: 1;
}
.method-card__num {
  position: absolute; right: 22px; top: 18px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 5rem; line-height: 1; opacity: 0.12;
}
.method-card--pluka .method-card__sub { color: #fff; }

/* =========================================================
   EXPERTISE : parcours Waa → Pluka, cartes deep-dive
   ========================================================= */
.flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 3vw, 32px); align-items: center; }
.flow-card {
  border-radius: var(--r-lg); padding: clamp(28px, 3.5vw, 44px);
  color: var(--white); position: relative; overflow: hidden;
  transition: transform .4s var(--ease);
}
.flow-card:hover { transform: translateY(-4px); }
.flow-card--waa { background: linear-gradient(150deg, #B373FC 0%, #8B4BE0 52%, #6C34C9 100%); box-shadow: var(--shadow-violet); }
.flow-card--pluka { background: var(--indigo); }
.flow-card--pluka .method-card__tag { color: var(--violet-bright); }
.flow-card__step {
  display: inline-block; font-family: var(--font-display); font-weight: 600;
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.16); margin-bottom: 16px;
}
.flow-card .method-card__sub { margin: 6px 0 14px; color: #fff; opacity: 0.95; }
.flow-card__desc { color: rgba(255,255,255,0.92); margin: 0; font-size: 0.98rem; }
.flow__arrow { color: var(--violet); }
.flow__arrow svg { width: 38px; height: 38px; }
@media (max-width: 820px) {
  .flow { grid-template-columns: 1fr; }
  .flow__arrow { transform: rotate(90deg); margin: 4px auto; }
}

/* Listes à puces sparkle dans les cartes deep-dive */
.expertise-card ul { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.expertise-card li { display: flex; gap: 12px; align-items: center; font-size: 0.98rem; color: #fff; }
.expertise-card li::before {
  content: ""; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255,255,255,0.18); color: #fff;
  display: grid; place-items: center; font-size: 0.82rem; line-height: 1;
}
.method-card--pluka.expertise-card li::before { background: rgba(179,115,252,0.22); color: var(--violet-bright); }

/* Checklist sur fond sombre (Pluka deep-dive) */
.about__points--dark li { color: #fff; }
.about__points--dark .ic--sm { background: rgba(179,115,252,0.20); color: var(--violet-bright); }

/* =========================================================
   IC : conteneur d'icône réutilisable (système cohérent)
   line stroke violet dans carré arrondi violet-soft, vivant au hover
   ========================================================= */
.ic {
  width: 50px; height: 50px; border-radius: 15px; flex-shrink: 0;
  background: var(--violet-soft); color: var(--violet-deep);
  display: grid; place-items: center;
  transition: transform .45s var(--ease), background .45s var(--ease), color .45s, box-shadow .45s var(--ease);
}
.ic svg { width: 25px; height: 25px; }

/* Petit badge icône Waa/Pluka (méthode) : rond translucide, lisible sur fond violet ou encre */
.method-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 10px;
  background: rgba(255,255,255,0.16); color: #fff;
}
.method-card__icon svg { width: 18px; height: 18px; }

/* =========================================================
   NOS SERVICES (5 leviers) : grille bento toujours dépliée
   1 grand bloc (Site web) + 4 blocs (Branding, Photo & Vidéo,
   SEO, Fiche Google). Zéro interaction cachée : tout se lit
   sans cliquer. Inspiration mise en page : agencegalopins.com
   (blocs pleins, arrondis, icône + texte visible directement).
   ========================================================= */
.services-bento {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}
.svc-block {
  background: var(--paper-2);
  border: 1px solid var(--grey-150);
  border-radius: var(--r-lg);
  padding: clamp(26px, 2.8vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.svc-block:hover { transform: translateY(-6px) rotate(-.3deg); box-shadow: var(--shadow-md); border-color: transparent; }

/* En-tête : icône carrée à gauche du titre (mise en page inline) */
.svc-block__head { display: flex; align-items: center; gap: 14px; }

/* Tags en pilules (façon carte pleine) */
.svc-block__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-block__tags span { font-size: 0.78rem; font-weight: 600; padding: 6px 13px; border-radius: var(--r-pill); border: 1.5px solid rgba(255,255,255,0.4); }
.svc-block--seo .svc-block__tags span,
.svc-block--fiche .svc-block__tags span,
.svc-block--photo .svc-block__tags span { border-color: rgba(122,63,212,0.3); color: var(--violet-deep); }

/* CTA plein (façon carte pleine) */
.svc-block__cta {
  margin-top: auto; align-self: flex-start;
  font-family: var(--font-display); font-weight: 700; font-size: 0.88rem;
  padding: 11px 20px; border-radius: var(--r-pill);
  background: #fff; color: var(--violet-deep);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.svc-block--seo .svc-block__cta,
.svc-block--fiche .svc-block__cta,
.svc-block--photo .svc-block__cta { background: var(--violet-deep); color: #fff; }
.svc-block__cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* Bloc vedette : Site web (grand, span 2 lignes sur desktop). Aplat, pas de dégradé. */
.svc-block--web {
  grid-row: span 2;
  background: var(--violet);
  border: none; color: #fff;
  box-shadow: var(--shadow-violet);
  justify-content: space-between;
}
.svc-block--web:hover { box-shadow: 0 26px 60px rgba(123,47,247,0.42); }
.svc-block--web .svc-block__title { font-size: clamp(1.5rem, 2.1vw, 1.9rem); }

/* Bloc Branding : indigo plein (aplat), en écho au bloc violet */
.svc-block--branding {
  background: var(--indigo);
  border: none; color: #fff;
}
.svc-block--branding:hover { box-shadow: 0 22px 50px rgba(46,42,94,0.35); }

/* Blocs clairs : Photo & Vidéo / SEO / Fiche Google : palette stricte : blanc + violet très clair */
.svc-block--seo { background: var(--violet-soft); }
.svc-block--fiche { background: var(--violet-soft); }
.svc-block--photo { background: var(--paper-2); }

/* Icône */
.svc-block__icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  background: var(--violet-soft); color: var(--violet-deep);
  display: grid; place-items: center;
  transition: transform .45s var(--ease);
}
.svc-block__icon svg { width: 24px; height: 24px; }
.svc-block--web .svc-block__icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,0.2); color: #fff; }
.svc-block--web .svc-block__icon svg { width: 27px; height: 27px; }
.svc-block--branding .svc-block__icon { background: rgba(255,255,255,0.16); color: #fff; }
.svc-block--seo .svc-block__icon,
.svc-block--fiche .svc-block__icon,
.svc-block--photo .svc-block__icon { background: #fff; color: var(--violet-deep); }
.svc-block:hover .svc-block__icon { transform: translateY(-3px) rotate(-6deg); }

/* Titre / intro */
.svc-block__title { font-family: var(--font-display); font-weight: 600; font-size: 1.26rem; line-height: 1.16; margin: 0; }
.svc-block--web .svc-block__title { font-size: clamp(1.5rem, 2.1vw, 1.9rem); }
.svc-block__intro { font-size: 0.95rem; line-height: 1.5; color: var(--grey-700); margin: 0; }
.svc-block--web .svc-block__intro,
.svc-block--branding .svc-block__intro { color: rgba(255,255,255,0.86); }

/* Liste de puces */
.svc-block__list { display: flex; flex-direction: column; gap: 9px; margin-top: 0; padding-top: 4px; }
.svc-block__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; line-height: 1.42; color: var(--grey-700); }
.svc-block__list li::before {
  content: "✓"; flex-shrink: 0; margin-top: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--violet-soft); color: var(--violet-deep);
  display: grid; place-items: center; font-size: 0.66rem; font-weight: 700;
}
.svc-block--web .svc-block__list li,
.svc-block--branding .svc-block__list li { color: rgba(255,255,255,0.92); }
.svc-block--web .svc-block__list li::before,
.svc-block--branding .svc-block__list li::before { background: rgba(255,255,255,0.18); color: #fff; }
.svc-block--seo .svc-block__list li::before { background: #fff; color: var(--violet-deep); }
.svc-block--fiche .svc-block__list li::before { background: #fff; color: var(--indigo); }

/* =========================================================
   MOSAÏQUE SERVICES (accueil) : tuiles arrondies imbriquées,
   cartes couleur + tuiles photo, tags en pilules qui débordent.
   ========================================================= */
.services-mosaic { display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; align-items: end; margin-bottom: 26px; }
.svc-tile { position: relative; border-radius: 24px; aspect-ratio: 3 / 4.3; display: flex; transition: transform .4s var(--ease); }
.svc-tile:hover { transform: translateY(-5px); }
.svc-tile__inner {
  border-radius: 24px; width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px; padding-bottom: 26px; position: relative; overflow: hidden;
}
.svc-tile--web .svc-tile__inner { background: var(--violet); color: #fff; }
.svc-tile--branding .svc-tile__inner { background: var(--indigo); color: #fff; }
.svc-tile--seo .svc-tile__inner,
.svc-tile--fiche .svc-tile__inner { background: var(--violet-soft); color: var(--ink); }
.svc-tile--photo .svc-tile__inner { background: var(--paper-2); color: var(--ink); border: 1px solid var(--grey-150); align-items: center; justify-content: center; text-align: center; gap: 10px; }
.svc-tile--placeholder .svc-tile__inner { background: rgba(179,115,252,0.08); border: 2px dashed rgba(122,63,212,0.32); align-items: center; justify-content: center; text-align: center; gap: 8px; }

.svc-tile__icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.2); display: grid; place-items: center; margin-bottom: auto; }
.svc-tile--seo .svc-tile__icon,
.svc-tile--fiche .svc-tile__icon,
.svc-tile--photo .svc-tile__icon,
.svc-tile--placeholder .svc-tile__icon { background: var(--violet-soft); color: var(--violet-deep); margin-bottom: 0; }
.svc-tile__icon svg { width: 20px; height: 20px; }

.svc-tile__title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.15; margin: 0; }
.svc-tile--placeholder strong { font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; }
.svc-tile--placeholder p { margin: 0; font-size: 0.76rem; color: var(--grey-500); }

.svc-tile__tags { position: absolute; left: 14px; right: 14px; bottom: -16px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.svc-tile__tags span {
  font-size: 0.66rem; font-weight: 600; padding: 6px 11px; border-radius: var(--r-pill);
  background: #fff; color: var(--violet-deep); box-shadow: var(--shadow-sm); white-space: nowrap;
}

@media (max-width: 980px) {
  .services-mosaic { grid-template-columns: repeat(4, 1fr); }
  .svc-tile { aspect-ratio: 1; }
}
@media (max-width: 620px) {
  .services-mosaic { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
}

/* Emplacement photo cliente (bloc Photo & Vidéo) */
.photo-slot {
  border: 2px dashed rgba(122,63,212,0.32);
  border-radius: var(--r-md);
  min-height: 260px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 22px;
  background: rgba(179,115,252,0.06);
  margin-top: 2px;
}
.photo-slot__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--violet-soft); color: var(--violet-deep);
  display: grid; place-items: center;
}
.photo-slot__icon svg { width: 22px; height: 22px; }
.photo-slot strong { display: block; font-size: 0.92rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.photo-slot p { margin: 0; font-size: 0.83rem; line-height: 1.4; color: var(--grey-500); }

@media (max-width: 980px) {
  .services-bento { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .services-bento { grid-template-columns: 1fr; }
  .svc-block--web { grid-row: auto; }
}

/* =========================================================
   BÉNÉFICES (checklist)
   ========================================================= */
.benefit-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.benefit-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 1.02rem; color: var(--ink); }
.benefit-list li::before {
  content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat; color: var(--violet); font-size: 1.05rem; flex-shrink: 0; margin-top: 2px;
}

/* Bénéfices en cartes avec icônes */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.benefit-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--paper-2); border: 1px solid var(--grey-150);
  border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 32px);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.benefit-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.benefit-card:hover .ic { background: var(--grad-violet); color: #fff; transform: translateY(-2px) rotate(-4deg); box-shadow: var(--shadow-violet); }
.benefit-card .ic { width: 46px; height: 46px; border-radius: 13px; }
.benefit-card .ic svg { width: 23px; height: 23px; }
.benefit-card strong { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; display: block; line-height: 1.25; margin-bottom: 6px; }
.benefit-card p { font-size: 0.93rem; color: var(--grey-700); margin: 0; line-height: 1.55; }
@media (max-width: 900px) { .benefit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .benefit-grid { grid-template-columns: 1fr; } }

/* =========================================================
   BENTO BÉNÉFICES : scènes vectorielles animées (HTML/CSS/SVG)
   ========================================================= */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.bento-card {
  background: var(--paper-2); border: 1px solid var(--grey-150);
  border-radius: var(--r-lg); padding: clamp(16px, 1.8vw, 22px);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.bento-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.bento-card__scene {
  position: relative; height: clamp(196px, 21vw, 248px);
  border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(165deg, #F5EDE3 0%, #ECE2D4 100%);
  display: grid; place-items: center; margin-bottom: 18px;
}
.bento-card__scene.scene--dark { background: linear-gradient(165deg, #2A2550 0%, var(--indigo-deep) 100%); }
.bento-card__foot { display: flex; gap: 13px; align-items: flex-start; padding: 2px 6px 6px; }
.bento-card__foot .ic--sm { width: 30px; height: 30px; border-radius: 9px; }
.bento-card__foot .ic--sm svg { width: 17px; height: 17px; }
.bento-card__foot strong { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; display: block; line-height: 1.2; margin-bottom: 5px; }
.bento-card__foot p { font-size: 0.94rem; color: var(--grey-700); margin: 0; line-height: 1.5; }

@keyframes bento-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes bento-float2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
.bento-float { animation: bento-float 6s ease-in-out infinite; }
.bento-float2 { animation: bento-float2 5s ease-in-out infinite; }

/* maquette navigateur réutilisable */
.mock { background: #fff; border-radius: 12px; box-shadow: 0 18px 36px rgba(46,42,94,0.16); }
.mock__bar { display: flex; gap: 5px; padding: 9px 12px; border-bottom: 1px solid #F1EDE7; }
.mock__bar i { width: 7px; height: 7px; border-radius: 50%; background: #E2DDD6; }
.mock__bar i:first-child, .mock__bar i:nth-child(2), .mock__bar i:nth-child(3) { background: var(--grey-150); }
.ln { display: block; height: 8px; border-radius: 4px; background: #E8E2D9; margin: 0 0 9px; }
.ln--40 { width: 40%; } .ln--70 { width: 70%; } .ln--90 { width: 90%; }
.accent-bar { display: block; width: 34px; height: 8px; border-radius: 4px; background: var(--grad-violet); animation: accent-pulse 2.6s ease-in-out infinite; }
@keyframes accent-pulse { 0%,100%{width:30px;opacity:.85} 50%{width:48px;opacity:1} }

/* scène 1 : navigateur + lecture */
.mock--browser { width: 66%; }
.mock--browser .mock__body { padding: 16px 16px 18px; position: relative; }
.mock__play {
  position: absolute; right: 14px; bottom: 14px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--grad-violet); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 22px rgba(123,47,247,.35); animation: play-pulse 2.4s ease-in-out infinite;
}
.mock__play svg { width: 18px; height: 18px; margin-left: 2px; }
@keyframes play-pulse { 0%,100%{box-shadow:0 10px 22px rgba(123,47,247,.30)} 50%{box-shadow:0 10px 30px rgba(123,47,247,.55)} }

/* scène 2 : outil de design */
.design-tool { width: 80%; display: flex; flex-direction: column; gap: 11px; }
.dt-row { display: flex; justify-content: space-between; gap: 10px; }
.dt-swatches { display: flex; gap: 6px; align-items: center; background:#fff; padding: 7px 9px; border-radius: 9px; box-shadow: 0 6px 14px rgba(46,42,94,.12); }
.dt-swatches i { width: 16px; height: 16px; border-radius: 5px; }
.dt-swatches i:nth-child(1){ background:var(--indigo-deep); } .dt-swatches i:nth-child(2){ background:#B373FC; animation: swatch-sel 3s ease-in-out infinite; } .dt-swatches i:nth-child(3){ background:#C9A0FF; } .dt-swatches i:nth-child(4){ background:#EDE2FB; }
@keyframes swatch-sel { 0%,100%{box-shadow:0 0 0 0 rgba(179,115,252,0)} 50%{box-shadow:0 0 0 3px rgba(179,115,252,.45)} }
.dt-select { display: flex; align-items: center; gap: 8px; background:#fff; padding: 7px 11px; border-radius: 9px; font-size: .72rem; font-weight:600; color: var(--ink); box-shadow: 0 6px 14px rgba(46,42,94,.12); white-space: nowrap; }
.dt-select svg { width: 11px; height: 11px; color: var(--grey-500); }
.dt-card { width: 100%; }
.dt-card__cols { display: grid; grid-template-columns: 1fr 0.66fr; gap: 12px; padding: 14px; }
.dt-card__txt { display: flex; flex-direction: column; }
.dt-card__txt .ln { margin-bottom: 7px; }
.dt-card__img { border-radius: 8px; background: #F2ECE3; display: grid; place-items: center; color: var(--grey-300); min-height: 56px; }
.dt-card__img svg { width: 24px; height: 24px; }
.dt-toolbar { display: flex; gap: 6px; align-self: center; background:#fff; padding: 6px; border-radius: 11px; box-shadow: 0 8px 18px rgba(46,42,94,.14); }
.dt-tool { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--grey-500); }
.dt-tool svg { width: 15px; height: 15px; }
.dt-tool--on { background: var(--violet-soft); color: var(--violet-deep); }

/* scène 3 : SEO, anneaux + cœur */
.scene--dark .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(179,115,252,0.25); }
.ring--1 { width: 118px; height: 118px; }
.ring--2 { width: 188px; height: 188px; animation: ring-pulse 3.4s ease-in-out infinite; }
.ring--3 { width: 258px; height: 258px; border-color: rgba(179,115,252,0.12); }
@keyframes ring-pulse { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.8;transform:scale(1.05)} }
.seo-core {
  position: relative; z-index: 2; width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #B373FC, #6C34C9 72%);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 14px 36px rgba(123,47,247,.5), inset 0 2px 4px rgba(255,255,255,.3);
  animation: core-glow 2.8s ease-in-out infinite;
}
.seo-core svg { width: 33px; height: 33px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
@keyframes core-glow { 0%,100%{box-shadow:0 14px 36px rgba(123,47,247,.45),inset 0 2px 4px rgba(255,255,255,.3)} 50%{box-shadow:0 14px 48px rgba(123,47,247,.72),inset 0 2px 4px rgba(255,255,255,.3)} }
.orbit-badge {
  position: absolute; z-index: 3; display: grid; place-items: center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 12px; color: #fff;
}
.orbit-badge--l { left: 15%; top: 44%; padding: 7px 11px; font-family: var(--font-display); font-weight: 600; font-size: .8rem; color: var(--violet-bright); }
.orbit-badge--r { right: 15%; top: 30%; width: 42px; height: 42px; }
.orbit-badge--r svg { width: 20px; height: 20px; color: var(--violet-bright); }

/* scène 4 : éditeur CMS */
.cms { width: 82%; display: flex; flex-direction: column; gap: 11px; }
.cms-chips { display: flex; gap: 9px; }
.cms-chip { display: inline-flex; align-items: center; gap: 6px; background:#fff; padding: 7px 11px; border-radius: 9px; font-size: .72rem; font-weight: 600; color: var(--ink); box-shadow: 0 6px 14px rgba(46,42,94,.12); white-space: nowrap; }
.cms-chip svg { width: 13px; height: 13px; color: var(--violet-deep); }
.cms-chip b { color: var(--grey-500); }
.cms-card { width: 100%; padding: 12px; position: relative; }
.cms-imgrow { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 4px 0 12px; }
.cms-imgrow span { height: 34px; border-radius: 7px; background: #F2ECE3; display: grid; place-items: center; color: var(--grey-300); }
.cms-imgrow span svg { width: 17px; height: 17px; }
.cms-field { height: 22px; width: 60%; border-radius: 6px; border: 1.5px solid var(--violet); background: var(--violet-soft); position: relative; }
.cms-caret { position: absolute; left: 10px; top: 4px; width: 2px; height: 13px; background: var(--violet-deep); animation: caret-blink 1.1s steps(1) infinite; }
@keyframes caret-blink { 50%{opacity:0} }
.cms-tag { position: absolute; left: 56%; bottom: 10px; background: var(--indigo-deep); color:#fff; font-size:.7rem; font-weight:600; padding: 4px 9px; border-radius: 7px; animation: bento-float 4s ease-in-out infinite; }
.cms-tag::before { content:""; position:absolute; left:-5px; top:50%; transform:translateY(-50%); border:5px solid transparent; border-right-color: var(--indigo-deep); }

@media (max-width: 720px) { .bento { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .bento-float, .bento-float2, .accent-bar, .mock__play, .seo-core, .ring--2, .cms-caret, .cms-tag, .dt-swatches i:nth-child(2) { animation: none !important; }
}


@media (max-width: 760px) {
  .pain-grid { grid-template-columns: 1fr 1fr; }
  .method-split { grid-template-columns: 1fr; }
  .benefit-list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .pain-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__glow, .hero__glow--2 { animation: none !important; }
}

/* =========================================================
   ACCESSIBILITÉ : focus clavier visible
   ========================================================= */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Lien d'évitement (a11y) */
.skip-link {
  position: fixed; left: 14px; top: -70px; z-index: 99999;
  background: var(--indigo-deep); color: #fff;
  padding: 11px 20px; border-radius: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  transition: top .25s var(--ease); box-shadow: var(--shadow-md);
}
.skip-link:focus { top: 14px; }
.btn:focus-visible { outline-offset: 4px; }

/* =========================================================
   PASSE 1 : Hero rééquilibré, Pour qui, FAQ
   ========================================================= */

/* ---- Pour qui ---- */
.audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.audience-card {
  background: var(--paper-2); border: 1px solid var(--grey-150);
  border-radius: var(--r-md); padding: 28px 24px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.audience-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.audience-card__icon { font-size: 1.7rem; width: 52px; height: 52px; border-radius: 14px; background: var(--violet-soft); display: grid; place-items: center; margin-bottom: 18px; }
.audience-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.audience-card p { font-size: 0.94rem; margin: 0; }

/* ---- FAQ ---- */
.faq { max-width: 840px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; }
.faq__item {
  background: var(--paper-2);
  border: 1.5px solid rgba(179,115,252,0.28);
  border-radius: var(--r-md);
  padding-inline: clamp(18px, 2.4vw, 26px);
  transition: border-color .3s, box-shadow .35s var(--ease), background .35s;
}
.faq__item:hover { border-color: rgba(179,115,252,0.55); }
.faq__item[open] { border-color: var(--violet); background: var(--white); box-shadow: 0 12px 32px rgba(179,115,252,0.15); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--ink);
  transition: color .25s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--violet-deep); }
.faq__item summary .faq__sign {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--grey-300); display: grid; place-items: center;
  position: relative; transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.faq__item summary .faq__sign::before,
.faq__item summary .faq__sign::after { content: ""; position: absolute; background: var(--ink); border-radius: 2px; transition: background .3s, transform .3s; }
.faq__item summary .faq__sign::before { width: 12px; height: 2px; }
.faq__item summary .faq__sign::after { width: 2px; height: 12px; }
.faq__item[open] summary .faq__sign { background: var(--violet); border-color: var(--violet); transform: rotate(90deg); }
.faq__item[open] summary .faq__sign::before,
.faq__item[open] summary .faq__sign::after { background: #fff; }
.faq__item[open] summary .faq__sign::after { transform: scaleY(0); }
.faq__answer { padding: 0 0 24px; max-width: 70ch; }
.faq__answer p { margin: 0; font-size: 1rem; }
.faq__item[open] .faq__answer { animation: faq-in .45s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

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

/* =========================================================
   PASSE 2 : Polish DA : icônes line, pain adouci, line-reveal
   ========================================================= */

/* Icônes line dans les pastilles (Pour qui, contact) */
.audience-card__icon { color: var(--violet-deep); }
.audience-card__icon svg { width: 26px; height: 26px; }
.contact-item__icon { color: var(--violet-deep); }
.contact-item__icon svg { width: 22px; height: 22px; }

/* Pain points : badge adouci (terracotta désaturé, plus de rouge criard) */
.pain-card__x {
  background: #F1E7E2;
  color: #B26B5E;
  font-size: 0.9rem;
}

/* line-reveal : garde de l'air pour les jambages (é, ç, g) */
.line-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }

/* =========================================================
   IMPECCABLE : fond violet animé + grain, encoche, bulles Clash
   ========================================================= */

/* ---- Bulles en Clash Display ---- */
.pain-card p { font-family: var(--font-bubble); font-weight: 500; letter-spacing: -0.01em; }
.step__tags span, .work-card__tag, .hero__float strong { font-family: var(--font-bubble); }

/* ---- Fond global : mesh violet qui dérive (visible) + grain ---- */
body { background: transparent; }
.site-bg { position: fixed; inset: 0; z-index: -2; background: var(--paper); overflow: hidden; pointer-events: none; }
.site-bg .orb { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
/* mesh ambiant : assez discret pour garder des blancs nets ; le violet ressort dans les cards/process/CTA */
.site-bg .o1 { width: 48vw; height: 48vw; top: -10%; left: -8%;
  background: radial-gradient(circle, rgba(179,115,252,0.22) 0%, rgba(179,115,252,0) 64%); animation: bgdrift1 42s ease-in-out infinite; }
.site-bg .o2 { width: 44vw; height: 44vw; top: 40%; right: -12%;
  background: radial-gradient(circle, rgba(123,47,247,0.15) 0%, rgba(123,47,247,0) 62%); animation: bgdrift2 50s ease-in-out infinite; }
.site-bg .o3 { width: 42vw; height: 42vw; bottom: -8%; left: 26%;
  background: radial-gradient(circle, rgba(46,42,94,0.12) 0%, rgba(46,42,94,0) 60%); animation: bgdrift3 46s ease-in-out infinite; }
@keyframes bgdrift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(7vw,9vh) scale(1.18)} }
@keyframes bgdrift2 { 0%,100%{transform:translate(0,0) scale(1.1)} 50%{transform:translate(-8vw,-6vh) scale(1)} }
@keyframes bgdrift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vw,-8vh) scale(1.2)} }

/* Grain : texture noise réutilisable */
.grain, .site-bg::after, .section--grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.site-bg::after { opacity: 0.05; mix-blend-mode: multiply; }
/* Grain par intervalle : sur les bandes sombres et crème */
.section--grain { position: relative; }
.section--grain::before { opacity: 0.06; mix-blend-mode: overlay; z-index: 0; }
.section--grain > * { position: relative; z-index: 1; }
.section--dark.section--grain::before { opacity: 0.08; mix-blend-mode: overlay; }

/* Les bandes claires laissent voir le mesh : on les rend translucides */
[style*="background:var(--grey-50)"] { background: rgba(243,239,232,0.92) !important; }

/* ---- NAVBAR : barre CENTRÉE qui enveloppe le contenu, côtés en diagonale (plus large en bas) ---- */
.nav {
  position: fixed;
  inset: var(--frame-w) var(--frame-w) auto var(--frame-w);
  z-index: 100;
  height: auto; padding: 0; background: transparent;
  display: flex; align-items: stretch; justify-content: center;   /* barre centrée, pas pleine largeur */
  filter: drop-shadow(0 12px 26px rgba(46,42,94,0.16)) drop-shadow(0 1px 0 rgba(46,42,94,0.06));
}
.nav.is-scrolled { background: transparent; box-shadow: none; backdrop-filter: none; }
.nav__inner {
  /* largeur fixe pour permettre un tracé courbe parfait (path) ; centré, contenu en space-between */
  position: relative;
  width: 1093px; max-width: calc(100vw - 2 * var(--frame-w) - 24px);
  height: 77px;
  margin: 0;
  justify-content: space-between;
  gap: clamp(20px, 2.6vw, 40px);
  padding: 0 42px;
  background: rgba(252,251,249,0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  border: none; box-shadow: none;
  -webkit-mask: none; mask: none;
  transition: background .4s;
  /* forme validée (secours non-JS ; le JS régénère à l'identique et gère le responsive) */
  clip-path: path('M 14.00 0.00 Q 14.00 0.00 14.00 0.00 L 1079.00 0.00 Q 1079.00 0.00 1079.00 0.00 L 1068.67 46.80 A 38.50 38.50 0 0 1 1031.07 77.00 L 61.93 77.00 A 38.50 38.50 0 0 1 24.33 46.80 Z');
}
/* au scroll : verre plus prononcé (plus translucide + flou) quand la barre passe sur le contenu */
.nav.is-scrolled .nav__inner {
  background: rgba(252,251,249,0.66);
  -webkit-backdrop-filter: saturate(200%) blur(28px);
          backdrop-filter: saturate(200%) blur(28px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
/* Repli écrans intermédiaires : barre qui enveloppe le contenu, coins ronds (sans tracé fixe) */
@media (max-width: 1180px) {
  .nav__inner {
    width: -moz-fit-content; width: fit-content; max-width: calc(100vw - 2 * var(--frame-w) - 16px);
    height: auto; padding: 12px clamp(18px, 2.4vw, 28px);
    gap: clamp(12px, 1.6vw, 24px);
    clip-path: none; border-radius: 22px;
  }
  .nav__links { gap: 0; }
  .nav__links a { padding: 8px 11px; }
}

/* Pilule animée qui glisse sous le lien survolé */
.nav__links { position: relative; gap: 4px; }
.nav__links a { position: relative; z-index: 1; padding: 8px 16px; white-space: nowrap; }
.nav__links a::after { display: none; }   /* la pilule remplace le soulignement */
.nav__pill {
  position: absolute; top: 50%; left: 0; height: 38px; width: 0;
  transform: translate(0, -50%);
  background: var(--violet-soft); border-radius: var(--r-pill);
  z-index: 0; opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease), width .42s var(--ease), transform .42s var(--ease);
}
@media (max-width: 760px) {
  /* mobile : barre pleine largeur (logo à gauche, burger à droite), coins ronds */
  .nav__inner { width: 100%; height: auto; justify-content: space-between; padding: 11px 18px; clip-path: none; border-radius: 20px; }
}

/* =========================================================
   PALETTE DES BLOCS DE COULEUR : strictement blanc / violet très clair / violet foncé.
   Rien d'autre (pas de crème, pas de rose, pas de jaune).
   ========================================================= */

/* =========================================================
   FILTRE RÉALISATIONS
   ========================================================= */
.work-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(28px, 4vw, 42px); }
.work-filter__btn {
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  padding: 11px 20px; border-radius: var(--r-pill);
  background: var(--paper-2); border: 1.5px solid var(--grey-150); color: var(--grey-700);
  transition: transform .3s var(--ease), border-color .3s, color .3s, background .3s;
}
.work-filter__btn:hover { border-color: var(--violet); color: var(--ink); transform: translateY(-2px); }
.work-filter__btn.is-active { background: var(--grad-violet); border-color: transparent; color: #fff; box-shadow: var(--shadow-sm); }
.work-grid [data-cat-empty], .work-grid [data-cat] { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.is-hidden { display: none !important; }

/* =========================================================
   SECTION QUI SUIS-JE (présentation personnelle)
   ========================================================= */
.intro-me-section { background: var(--paper); position: relative; overflow: hidden; }
.intro-me { display: grid; grid-template-columns: 0.62fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.intro-me__media { position: relative; max-width: 320px; }
.intro-me__frame { border-radius: var(--r-lg); overflow: hidden; padding: 8px; background: var(--paper-2); border: 1px solid var(--grey-150); box-shadow: var(--shadow-md); }
.intro-me__frame img { border-radius: calc(var(--r-lg) - 8px); width: 100%; display: block; aspect-ratio: 2 / 3; object-fit: cover; }
.intro-me__chips { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) {
  .intro-me { grid-template-columns: 1fr; }
  .intro-me__media { max-width: 220px; margin-inline: auto; }
}

/* Pain cards : légère variation de fond par carte (au lieu d'un blanc uniforme) */
.pain-card:nth-child(4n+2) { background: var(--violet-soft); }
.pain-card:nth-child(4n+3) { background: var(--paper-2); }
.pain-card:nth-child(4n+2) .ic, .pain-card:nth-child(4n+3) .ic { background: #fff; }

/* Audience cards : la section "Pour qui" est déjà teintée violet-soft, les cartes restent claires pour contraster proprement */
.audience-card { background: var(--paper-2); }
.audience-card p { color: var(--ink); }

/* Blocs services clairs (SEO / Fiche Google) : texte foncé, jamais gris, sur teinte violette/indigo */
.svc-block--seo .svc-block__intro,
.svc-block--fiche .svc-block__intro,
.svc-block--seo .svc-block__list li,
.svc-block--fiche .svc-block__list li { color: var(--ink); }

/* Bulle avatar sur le CTA nav */
.cta-bubble { position: relative; display: inline-flex; align-items: center; }
.cta-bubble__avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--paper-2); box-shadow: var(--shadow-sm);
  position: relative; z-index: 2; margin-right: 0;
  transition: transform .3s var(--ease);
}
.cta-bubble:hover .cta-bubble__avatar { transform: translateY(-2px) rotate(-4deg); }
.cta-bubble .btn { gap: 10px; padding-left: 5px; }

/* Watermark géant discret derrière un titre de section (clin d'œil Waa) */
.section-watermark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(9rem, 24vw, 20rem); line-height: 1;
  color: var(--violet); opacity: 0.06; pointer-events: none;
  white-space: nowrap; z-index: 0; user-select: none;
}

/* =========================================================
   PASSE 3 : Direction 2026 Waapluka, aplats arrondis + corail
   ========================================================= */
h1, h2, h3, h4,
.btn,
.eyebrow,
.nav__links a {
  letter-spacing: 0;
}

.btn--primary {
  background: var(--coral);
  color: var(--white);
  box-shadow: 0 12px 26px rgba(255, 107, 44, 0.24);
}
.btn--primary:hover {
  background: #F15C20;
  box-shadow: 0 16px 34px rgba(255, 107, 44, 0.32);
}
.btn--ghost {
  background: var(--white);
  border-color: rgba(58, 18, 79, 0.18);
  color: var(--violet-deep);
}

.site-bg {
  background: var(--lavender-bg);
}
.site-bg .orb {
  display: none;
}
.site-bg::after {
  opacity: 0.03;
}

.hero--studio {
  padding-top: calc(var(--nav-h) + clamp(46px, 6vw, 78px));
  padding-bottom: clamp(28px, 4vw, 46px);
}
.hero-studio {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: clamp(10px, 1.4vw, 16px);
  padding: clamp(10px, 1.4vw, 16px);
  border-radius: clamp(30px, 4vw, 48px);
  background: var(--paper-2);
  box-shadow: 0 28px 70px rgba(58, 18, 79, 0.18);
}
.hero-studio__copy,
.hero-studio__visual {
  min-height: clamp(440px, 45vw, 540px);
}
.hero-studio__copy {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 58px);
  border-radius: clamp(24px, 3.4vw, 36px);
  background: var(--paper);
}
.hero-studio__copy::after {
  content: "";
  position: absolute;
  right: clamp(18px, 3vw, 42px);
  bottom: clamp(12px, 2.5vw, 34px);
  width: clamp(4rem, 10vw, 8rem);
  height: clamp(4rem, 10vw, 8rem);
  background: url(../assets/logos/waapluka-etoile-violet.svg) center / contain no-repeat;
  opacity: 0.14;
}
.hero-studio h1 {
  max-width: 13.8ch;
  margin: 16px 0 20px;
  font-size: clamp(2.3rem, 4.1vw, 4.35rem);
  color: var(--ink);
}
.hero-studio .text-violet {
  color: var(--violet-pop);
}
.hero-studio .hero__lead {
  max-width: 62ch;
  margin-bottom: 24px;
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  color: var(--ink-soft);
}
.hero-studio .hero__actions {
  justify-content: flex-start;
}
.hero-studio__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.hero-studio__proof span {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: none;
  color: var(--violet-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.hero-studio__proof span::before {
  content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat;
  margin-right: 7px;
  color: var(--coral);
  font-size: 0.75rem;
}
.hero-studio__proof span:not(:last-child)::after {
  content: "·";
  margin-left: 14px;
  color: var(--grey-300);
  font-weight: 400;
}

.hero-studio__visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(260px, 1fr) minmax(108px, auto) minmax(88px, auto);
  gap: clamp(10px, 1.3vw, 14px);
}
.hero-photo-card,
.hero-mini {
  border-radius: clamp(24px, 3vw, 34px);
}
.hero-photo-card {
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
  background: var(--violet-deep);
}
.hero-photo-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(36, 17, 47, 0.72), rgba(36, 17, 47, 0));
}
.hero-photo-card img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center 28%;
}
.hero-photo-card__label {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 12px 15px;
  border-radius: 20px;
  background: rgba(255, 253, 252, 0.9);
  color: var(--ink);
  max-width: calc(100% - 36px);
}
.hero-photo-card__label strong,
.hero-photo-card__label span {
  display: block;
}
.hero-photo-card__label strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
}
.hero-photo-card__label span {
  color: var(--grey-700);
  font-size: 0.82rem;
  line-height: 1.25;
  text-align: right;
}
.hero-mini {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  padding: clamp(16px, 2vw, 22px);
  overflow: hidden;
  position: relative;
}
.hero-mini::after {
  content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat;
  position: absolute;
  right: 18px;
  bottom: 10px;
  font-size: 4rem;
  line-height: 1;
  opacity: 0.18;
}
.hero-mini__kicker {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
}
.hero-mini strong {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.04rem, 1.45vw, 1.32rem);
  line-height: 1.08;
}
.hero-mini--violet {
  background: var(--violet);
  color: #fff;
}
.hero-mini--coral {
  background: var(--coral);
  color: #fff;
}
.hero-mini--soft {
  grid-column: 1 / -1;
  min-height: 88px;
  background: var(--violet-soft);
  color: var(--violet-deep);
}

.section--services-home {
  padding-top: clamp(56px, 8vw, 96px);
}
.service-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.72fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: end;
  margin-bottom: clamp(28px, 5vw, 58px);
}
.service-intro h2 {
  max-width: 16ch;
  margin-top: 14px;
}
.service-intro p {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.5;
}
.service-lanes {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
}
.service-lane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.86fr);
  overflow: hidden;
  min-height: 350px;
  border-radius: clamp(26px, 3.6vw, 42px);
  background: var(--paper-2);
  box-shadow: 0 18px 48px rgba(58, 18, 79, 0.08);
}
.service-lane--reverse .service-lane__content {
  order: 2;
}
.service-lane--reverse .service-lane__media {
  order: 1;
}
.service-lane__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(32px, 4.5vw, 62px);
  overflow: hidden;
}
.service-lane__content::after {
  content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat;
  position: absolute;
  right: clamp(18px, 3vw, 42px);
  bottom: clamp(8px, 2vw, 24px);
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 1;
  opacity: 0.13;
}
.service-lane__num {
  width: fit-content;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
}
.service-lane h3 {
  position: relative;
  z-index: 1;
  max-width: 13ch;
  font-size: clamp(1.85rem, 3.4vw, 3.05rem);
  color: inherit;
}
.service-lane p {
  position: relative;
  z-index: 1;
  max-width: 54ch;
  margin: 0;
  color: inherit;
  opacity: 0.9;
  line-height: 1.52;
}
.service-lane__tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.service-lane__tags span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
}
.service-lane--violet .service-lane__content {
  background: var(--violet);
  color: #fff;
}
.service-lane--coral .service-lane__content {
  background: var(--coral);
  color: #fff;
}
.service-lane--paper .service-lane__content {
  background: var(--paper);
  color: var(--ink);
}
.service-lane--paper .service-lane__num,
.service-lane--paper .service-lane__tags span,
.service-lane--lavender .service-lane__num,
.service-lane--lavender .service-lane__tags span {
  background: var(--white);
  color: var(--violet-deep);
}
.service-lane--lavender .service-lane__content {
  background: var(--violet-soft);
  color: var(--violet-deep);
}
.service-lane--deep .service-lane__content {
  background: var(--violet-deep);
  color: #fff;
}

.service-media {
  position: relative;
  min-height: 350px;
  display: grid;
  place-items: center;
  padding: clamp(22px, 3vw, 36px);
  overflow: hidden;
}
.service-media--brand {
  background: var(--violet-soft);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: min(70%, 300px);
  aspect-ratio: 1;
  border-radius: 38px;
  background: var(--violet-deep);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
}
.brand-mark::after {
  content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat;
  position: absolute;
  color: var(--coral);
  font-size: clamp(3rem, 7vw, 5rem);
  transform: translate(118%, -110%);
}
.brand-swatches {
  position: absolute;
  left: clamp(22px, 3vw, 36px);
  bottom: clamp(22px, 3vw, 36px);
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.brand-swatches i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.brand-swatches i:nth-child(1) { background: var(--violet-deep); }
.brand-swatches i:nth-child(2) { background: var(--violet); }
.brand-swatches i:nth-child(3) { background: var(--violet-soft); border: 1px solid rgba(58, 18, 79, 0.12); }
.brand-swatches i:nth-child(4) { background: var(--coral); }

.service-media--photo {
  grid-template-columns: 1fr 0.72fr;
  gap: 16px;
  align-items: end;
  background: var(--coral-soft);
}
.media-slot {
  display: grid;
  place-items: end start;
  width: 100%;
  border-radius: 30px;
  padding: 18px;
  background: rgba(255, 253, 252, 0.68);
  border: 2px dashed rgba(58, 18, 79, 0.18);
  color: var(--violet-deep);
  font-family: var(--font-display);
  font-weight: 700;
}
.media-slot--large {
  min-height: 250px;
}
.media-slot--small {
  min-height: 178px;
  background: var(--violet);
  border: 0;
  color: #fff;
}
.media-slot::before {
  content: "";
  position: absolute;
}

.service-media--screen {
  background: var(--violet-soft);
}
.service-media--screen img {
  width: min(76%, 320px);
  max-height: 300px;
  object-fit: cover;
  object-position: top center;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(58, 18, 79, 0.24);
  transform: rotate(-2deg);
}

.service-media--search {
  align-content: center;
  gap: 12px;
  background: var(--paper);
}
.search-card {
  width: min(100%, 360px);
  padding: 18px;
  border-radius: 22px;
  background: var(--white);
  border: 1px solid rgba(58, 18, 79, 0.1);
  box-shadow: var(--shadow-sm);
}
.search-card strong,
.search-card span {
  display: block;
}
.search-card strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.search-card span {
  margin-top: 8px;
  color: var(--grey-700);
  font-size: 0.9rem;
}
.search-card--active {
  margin-left: clamp(16px, 4vw, 58px);
  background: var(--violet);
  color: #fff;
}
.search-card--active strong,
.search-card--active span {
  color: #fff;
}

.service-media--google {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: var(--violet-soft);
}
.google-card {
  display: grid;
  align-content: center;
  min-height: 170px;
  width: 100%;
  padding: 20px;
  border-radius: 28px;
  background: var(--white);
  color: var(--violet-deep);
}
.google-card:nth-child(2) {
  background: var(--coral);
  color: #fff;
  transform: translateY(-24px);
}
.google-card:nth-child(3) {
  background: var(--violet);
  color: #fff;
}
.google-card strong {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1;
}
.google-card span {
  margin-top: 10px;
  color: inherit;
  font-weight: 600;
  line-height: 1.2;
}

@media (max-width: 980px) {
  .hero-studio {
    grid-template-columns: 1fr;
  }
  .hero-studio__copy,
  .hero-studio__visual {
    min-height: auto;
  }
  .hero-studio h1 {
    max-width: 13ch;
  }
  .service-intro {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .service-intro h2 {
    max-width: 18ch;
  }
  .service-lane,
  .service-lane--reverse {
    grid-template-columns: 1fr;
  }
  .service-lane--reverse .service-lane__content {
    order: 1;
  }
  .service-lane--reverse .service-lane__media {
    order: 2;
  }
}

@media (max-width: 620px) {
  .hero-studio {
    border-radius: 28px;
    padding: 10px;
  }
  .hero-studio__copy {
    border-radius: 22px;
    padding: 28px 22px;
  }
  .hero-studio h1 {
    max-width: none;
  }
  .hero-studio .hero__actions {
    align-items: stretch;
  }
  .hero-studio .hero__actions .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .hero-studio__visual {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .hero-photo-card,
  .hero-mini,
  .hero-mini--soft {
    grid-column: auto;
  }
  .hero-photo-card__label {
    align-items: flex-start;
    flex-direction: column;
  }
  .hero-photo-card__label span {
    text-align: left;
  }
  .service-lane {
    min-height: 0;
    border-radius: 28px;
  }
  .service-lane__content {
    padding: 30px 22px;
  }
  .service-lane h3 {
    max-width: none;
  }
  .service-media {
    min-height: 270px;
  }
  .service-media--photo,
  .service-media--google {
    grid-template-columns: 1fr;
  }
  .google-card:nth-child(2) {
    transform: none;
  }
}

/* Aplats assumés : on neutralise les anciens dégradés hérités des passes précédentes. */
.pain-card p,
.pain-verdict p,
.method-card__tag,
.hero-mini__kicker {
  letter-spacing: 0;
}
.dark-panel,
.footer {
  background: var(--violet-deep);
}
.cta-card,
.method-card--waa,
.flow-card--waa,
.work-card--cta,
.mock__play,
.benefit-card:hover .ic,
.pain-card:hover .ic {
  background: var(--violet);
}
.work-card__scene,
.bento-card__scene {
  background: var(--violet-soft);
}
.bento-card__scene.scene--dark {
  background: var(--violet-deep);
}
.seo-core {
  background: var(--violet);
}
.about__media::before,
.dark-panel::after,
.pain-card::after,
.work-card__orb,
.hero-photo-card::after,
.media-slot::before {
  display: none;
}

/* Premier écran compact : nav légère + hero visible sans scroller. */
.nav {
  inset: calc(var(--frame-w) + 8px) var(--frame-w) auto var(--frame-w);
  height: var(--nav-h);
  filter: none;
}
.nav__inner,
.nav.is-scrolled .nav__inner {
  width: fit-content !important;
  max-width: min(980px, calc(100vw - 2 * var(--frame-w) - 32px)) !important;
  height: 46px !important;
  padding: 6px 8px 6px 18px !important;
  background: rgba(255, 253, 252, 0.94) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  box-shadow: 0 10px 28px rgba(58, 18, 79, 0.12), 0 1px 0 rgba(58, 18, 79, 0.08) !important;
  clip-path: none !important;
  border: 1px solid rgba(58, 18, 79, 0.08) !important;
  border-radius: var(--r-pill) !important;
  gap: clamp(16px, 2.4vw, 30px);
}
.nav__logo img {
  height: 21px;
}
.nav__links {
  gap: 2px;
}
.nav__links a {
  padding: 7px 12px;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  line-height: 1;
  transition: color .25s, background .25s;
}
.nav__links a:hover,
.nav__links a.is-active {
  background: var(--violet-soft);
}
.nav__cta {
  gap: 8px;
}
.nav__pill {
  display: none;
}
.cta-bubble__avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  margin: 0;
}
.cta-bubble .btn {
  min-height: 34px;
  gap: 8px;
  padding: 4px 16px 4px 4px;
  font-size: 0.78rem;
}

.hero--studio {
  padding-top: calc(var(--nav-h) + 60px);
  padding-bottom: clamp(24px, 3vw, 44px);
  min-height: 0;
  display: flex;
  align-items: stretch;
}
.hero--studio > .container {
  display: flex;
  min-height: 0;
}
.hero-studio {
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  gap: 12px;
  padding: 12px;
  width: 100%;
  flex: 1;
  height: clamp(610px, 79svh, 750px);
  min-height: 0;
  box-shadow: 0 16px 42px rgba(58, 18, 79, 0.10);
}
.hero-studio__copy,
.hero-studio__visual {
  min-height: 0;
}
.hero-studio__copy {
  justify-content: flex-end;
  gap: clamp(24px, 4svh, 44px);
  padding: clamp(28px, 3.5vw, 50px) clamp(28px, 3.5vw, 50px) clamp(68px, 7svh, 98px);
}
.hero-studio__message {
  max-width: 780px;
}
.hero-studio__conversion {
  display: grid;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
}
.hero-studio h1 {
  max-width: 740px;
  margin: 8px 0 14px;
  font-size: clamp(2.25rem, 3.35vw, 3.28rem);
  line-height: 1;
}
.hero-studio .hero__lead {
  max-width: 600px;
  margin-bottom: 0;
  font-size: 0.98rem;
  line-height: 1.44;
}
.hero-studio .hero__actions {
  gap: 10px;
}
.hero-studio .hero__actions .btn--lg {
  min-height: 46px;
  padding: 12px 21px;
  font-size: 0.92rem;
}
.hero-studio__proof {
  gap: 0;
  margin-top: 0;
}
.hero-studio__proof span {
  font-size: 0.8rem;
}

.hero-studio__visual {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) 82px auto;
  gap: 10px;
  min-height: 0;
}
.hero-photo-card {
  grid-column: 1 / -1;
  height: 100%;
  min-height: 0;
}
.hero-photo-card img {
  height: 100%;
  min-height: 0;
  object-position: center 44%;
}
.hero-photo-card__label {
  bottom: 14px;
  left: 14px;
  padding: 10px 13px;
  border-radius: 16px;
}
.hero-photo-card__label strong {
  font-size: 0.9rem;
  font-weight: 500;
}
.hero-mini {
  position: relative;
  z-index: 3;
  inset: auto;
  width: auto;
  min-height: 78px;
  padding: 11px 14px;
  border-radius: 18px;
  box-shadow: 0 8px 18px rgba(58, 18, 79, 0.08);
}
.hero-mini__kicker {
  font-size: 0.72rem;
}
.hero-mini strong {
  margin-top: 6px;
  font-size: 0.9rem;
}
.hero-mini--violet {
  width: auto;
}
.hero-mini--coral {
  width: auto;
  border-radius: 18px clamp(24px, 3vw, 36px) 18px 18px;
}
.hero-mini--soft {
  grid-column: 1 / -1;
  width: auto;
  min-height: 92px;
  color: var(--violet-deep);
  border-radius: 18px 18px clamp(24px, 3vw, 36px) 18px;
}
.hero-mini--soft strong {
  font-weight: 500;
}

/* Constat : diagnostic clair après la hero, sans répéter le duo texte/photo.
   Padding haut/bas identique aux autres sections (cf. .section.seam) pour un espacement homogène. */
.section--constat {
  background: var(--paper);
}
.constat-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: stretch;
  overflow: hidden;
  padding: clamp(30px, 4.5vw, 68px);
  border-radius: clamp(32px, 4vw, 52px);
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 16px 44px rgba(58, 18, 79, 0.12);
}
.constat-panel::after {
  content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat;
  position: absolute;
  right: clamp(18px, 3vw, 42px);
  top: clamp(14px, 2.8vw, 34px);
  color: var(--violet-bright);
  font-size: 7rem;
  line-height: 1;
  opacity: 0.16;
  pointer-events: none;
}
.constat-panel__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(34px, 5vw, 72px);
  max-width: 640px;
}
.constat-panel__copy .eyebrow {
  color: var(--violet-bright);
}
.constat-panel__copy .eyebrow::before {
  color: var(--coral);
}
.constat-panel__copy h2 {
  margin-top: 16px;
  color: var(--white);
  font-size: 3rem;
  line-height: 1.03;
}
.constat-panel__copy .lead {
  max-width: 58ch;
  color: rgba(252, 251, 249, 0.78);
  font-size: 1.04rem;
  line-height: 1.55;
}
@media (max-width: 1080px) {
  .constat-panel {
    grid-template-columns: 1fr;
  }
  .constat-panel__copy {
    max-width: 760px;
    gap: 22px;
  }
  .constat-panel__copy h2 {
    font-size: 2.6rem;
  }
}

@media (max-width: 720px) {
  .constat-panel {
    padding: 24px;
    border-radius: 30px;
  }
  .constat-panel::after {
    font-size: 4.5rem;
  }
  .constat-panel__copy h2 {
    font-size: 2rem;
  }
}

@media (max-width: 1180px) {
  .nav__inner,
  .nav.is-scrolled .nav__inner {
    width: fit-content !important;
    max-width: calc(100vw - 2 * var(--frame-w) - 24px) !important;
  }
  .nav__links {
    gap: 0;
  }
  .nav__links a {
    padding-inline: 9px;
  }
}

@media (max-width: 980px) {
  .hero-studio {
    grid-template-columns: 1fr;
  }
  .hero-studio__copy {
    padding: 30px 28px;
  }
  .hero-studio h1 {
    max-width: 620px;
    font-size: 2.75rem;
  }
}

@media (max-width: 760px) {
  .nav__inner,
  .nav.is-scrolled .nav__inner {
    width: calc(100vw - 2 * var(--frame-w) - 24px) !important;
    height: 46px !important;
    padding: 6px 10px 6px 16px !important;
  }
  .hero--studio {
    padding-top: calc(var(--nav-h) + 34px);
  }
  .hero-studio__copy {
    padding: 30px 22px;
  }
  .hero-studio h1 {
    font-size: 2.35rem;
  }
  .hero-photo-card {
    min-height: 340px;
  }
  .hero-mini {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 10px;
  }
}

/* =========================================================
   PASSE 4 : Agence de visibilité locale (5 leviers)
   Cartes « dossier », textures et fonds variés, stickers,
   soulignés main levée, diagramme post-it, rythme de page varié,
   micro-interactions au survol et au clic.
   Références de structure : planches Pinterest (aplats, stickers,
   process post-it, surlignage), logique de mouvement jitter.video.
   ========================================================= */

/* ---------- Fond : papier sur le contenu, lavande réservée aux heros ---------- */
main { position: relative; background: var(--paper); }
/* Jonction « feuille posée » : fond papier par défaut, les bandes colorées ci-dessous prennent le dessus */
.seam { background-color: var(--paper); }
.hero--studio, .marquee, .hero-sub { background: var(--lavender-bg); }
.band--soft { background: var(--violet-soft); }
.band--cream { background: var(--paper); }
.band--cream-light { background: var(--paper); }   /* aligné sur le beige #FFF8F2 retenu pour toutes les sections à fond clair */
.band--coral { background: var(--coral-soft); }
.band--paper2 { background: var(--paper-2); }
.band--ink { background: var(--ink); color: var(--white); }
.band--ink p { color: rgba(252,251,249,0.78); }
.band--ink h2, .band--ink h3 { color: var(--white); }
.band--grey { background: var(--paper); }   /* passe 8 : plus de gris #F1ECE4, le beige du hero partout */

/* ---------- Textures ---------- */
.tx { position: relative; overflow: hidden; }
.tx > .container { position: relative; z-index: 1; }
.tx::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.tx--dots::before {
  background-image: radial-gradient(rgba(58,18,79,0.16) 1.2px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask: radial-gradient(80% 90% at 50% 50%, #000 20%, transparent 100%);
          mask: radial-gradient(80% 90% at 50% 50%, #000 20%, transparent 100%);
}
.tx--dots-light::before {
  background-image: radial-gradient(rgba(255,255,255,0.16) 1.2px, transparent 1.4px);
  background-size: 20px 20px;
}
.tx--grid::before {
  background-image:
    linear-gradient(rgba(58,18,79,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,18,79,0.07) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
/* bandes obliques qui se dessinent au scroll (clip-path progressif) */
.tx--stripes::before {
  background: repeating-linear-gradient(-34deg, rgba(166,107,255,0.17) 0 16px, transparent 16px 58px);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.8s var(--ease);
}
.tx--stripes.is-visible::before { clip-path: inset(0 0 0 0); }
.tx--stripes-coral::before {
  background: repeating-linear-gradient(-34deg, rgba(255,107,44,0.12) 0 14px, transparent 14px 62px);
}
/* grain déjà défini via .section--grain ; ici une version toujours dispo */
.tx--grain::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px; opacity: 0.07; mix-blend-mode: multiply;
}

/* ---------- Formes organiques abstraites en fond ---------- */
.blob {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 62% 38% 46% 54% / 55% 48% 52% 45%;
  animation: blob-morph 22s ease-in-out infinite alternate;
  will-change: transform, border-radius;
}
.blob--violet { background: var(--violet-soft); }
.blob--lav { background: var(--lavender-bg); }
.blob--coral { background: var(--coral-soft); }
.blob--cream { background: var(--cream); }
.blob--pop { background: var(--violet); opacity: .16; }
.blob--slow { animation-duration: 34s; }
@keyframes blob-morph {
  0%   { border-radius: 62% 38% 46% 54% / 55% 48% 52% 45%; transform: translate(0,0) rotate(0deg); }
  50%  { border-radius: 40% 60% 56% 44% / 48% 40% 60% 52%; transform: translate(3%,-4%) rotate(7deg); }
  100% { border-radius: 55% 45% 38% 62% / 45% 60% 40% 55%; transform: translate(-2%,3%) rotate(-6deg); }
}
/* soleil / fleur / flèche : formes plates façon pack de stickers */
.shape { position: absolute; z-index: 0; pointer-events: none; }
.shape--sun {
  width: 120px; height: 120px; background: var(--violet);
  clip-path: polygon(50% 0, 61% 14%, 76% 7%, 80% 23%, 96% 25%, 91% 41%, 100% 50%, 91% 59%, 96% 75%, 80% 77%, 76% 93%, 61% 86%, 50% 100%, 39% 86%, 24% 93%, 20% 77%, 4% 75%, 9% 59%, 0 50%, 9% 41%, 4% 25%, 20% 23%, 24% 7%, 39% 14%);
  animation: spin-slow 40s linear infinite;
}
.shape--star {
  width: 64px; height: 64px; background: var(--violet);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: twinkle 5s ease-in-out infinite;
}
.shape--flower {
  width: 110px; height: 110px; background: var(--violet-bright);
  -webkit-mask: radial-gradient(circle at 50% 22%, #000 22%, transparent 23%), radial-gradient(circle at 78% 50%, #000 22%, transparent 23%), radial-gradient(circle at 50% 78%, #000 22%, transparent 23%), radial-gradient(circle at 22% 50%, #000 22%, transparent 23%), radial-gradient(circle at 50% 50%, #000 26%, transparent 27%);
          mask: radial-gradient(circle at 50% 22%, #000 22%, transparent 23%), radial-gradient(circle at 78% 50%, #000 22%, transparent 23%), radial-gradient(circle at 50% 78%, #000 22%, transparent 23%), radial-gradient(circle at 22% 50%, #000 22%, transparent 23%), radial-gradient(circle at 50% 50%, #000 26%, transparent 27%);
  animation: spin-slow 60s linear infinite reverse;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes twinkle { 0%,100% { transform: scale(1) rotate(0); opacity: .9; } 50% { transform: scale(1.18) rotate(18deg); opacity: 1; } }

/* ---------- Traits dessinés au scroll (stroke-dashoffset) ---------- */
.draw path, .draw circle, .draw line, .draw polyline { fill: none; transition: stroke-dashoffset 1.5s var(--ease); }
.draw.is-visible path, .draw.is-visible circle, .draw.is-visible line, .draw.is-visible polyline { stroke-dashoffset: 0 !important; }
.draw [data-delay="1"] { transition-delay: .3s; }
.draw [data-delay="2"] { transition-delay: .6s; }

/* ---------- Souligné main levée + surligneur ---------- */
.hl { position: relative; display: inline-block; white-space: nowrap; }
.hl__svg {
  position: absolute; left: -2%; bottom: -0.16em; width: 104%; height: 0.34em;
  overflow: visible; pointer-events: none;
}
.hl__svg path {
  fill: none; stroke: var(--coral); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 260; stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.1s var(--ease) .45s;
}
.hl--violet .hl__svg path { stroke: var(--violet); }
.hl--bright .hl__svg path { stroke: var(--violet-bright); }
.is-visible .hl__svg path, .hl.is-visible .hl__svg path { stroke-dashoffset: 0 !important; }

.mark {
  background-image: linear-gradient(var(--violet-soft), var(--violet-soft));
  background-repeat: no-repeat; background-position: 0 66%; background-size: 0% 46%;
  padding: 0 .1em; margin: 0 -.1em; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1s var(--ease) .3s;
}
.mark--coral { background-image: linear-gradient(var(--coral-soft), var(--coral-soft)); }
.mark--lav { background-image: linear-gradient(var(--lavender-bg), var(--lavender-bg)); }
/* fond foncé (ex. bandeau violet plein) : surlignage discret en blanc translucide */
.mark--light { background-image: linear-gradient(rgba(255,255,255,.24), rgba(255,255,255,.24)); }
.is-visible .mark, .mark.is-visible { background-size: 100% 46%; }

/* ---------- Stickers / badges ---------- */
.sticker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; line-height: 1;
  background: var(--paper-2); color: var(--ink);
  /* Passe 5 : plus de contour épais façon BD. Fine bordure 1px + ombre douce. */
  border: 1px solid rgba(58,18,79,0.10);
  box-shadow: 0 1px 0 rgba(58,18,79,0.04), 0 6px 18px rgba(58,18,79,0.10);
  transform: rotate(var(--rot, -2deg));
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
  white-space: nowrap; cursor: default;
}
.sticker:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 1px 0 rgba(58,18,79,0.04), 0 12px 28px rgba(58,18,79,0.14); }
.sticker.is-pressed { transform: rotate(0) translateY(1px) scale(.98); box-shadow: 0 2px 8px rgba(58,18,79,0.10); transition-duration: .1s; }
.sticker--coral { background: var(--coral); color: #fff; border-color: rgba(255,255,255,0.28); box-shadow: 0 6px 18px rgba(255,107,44,0.26); }
.sticker--coral:hover { box-shadow: 0 12px 28px rgba(255,107,44,0.32); }
.sticker--violet { background: var(--violet); color: #fff; border-color: rgba(255,255,255,0.28); box-shadow: 0 6px 18px rgba(166,107,255,0.30); }
.sticker--violet:hover { box-shadow: 0 12px 28px rgba(166,107,255,0.36); }
.sticker--soft { background: var(--violet-soft); color: var(--violet-deep); border-color: rgba(58,18,79,0.08); }
.sticker--cream { background: var(--cream); color: var(--ink); border-color: rgba(58,18,79,0.08); }
.sticker--ink { background: var(--ink); color: #fff; border-color: rgba(255,255,255,0.14); box-shadow: 0 6px 18px rgba(48,20,63,0.28); }
.sticker--ink:hover { box-shadow: 0 12px 28px rgba(48,20,63,0.34); }
/* même palette que la card "Pluka" de la section Méthode (fond ink, texte violet-bright) */
.sticker--pluka { background: var(--violet-deep); color: #fff; border-color: rgba(255,255,255,0.14); }
/* même palette que la card "Waa" de la section Méthode (fond violet plein, texte blanc) */
.sticker--waa { background: var(--violet); color: #fff; border-color: rgba(255,255,255,0.18); }
.sticker--lg { font-size: 1rem; padding: 12px 20px; }
.sticker--sm { font-size: 0.76rem; padding: 7px 12px; }
.sticker svg { width: 16px; height: 16px; flex-shrink: 0; }
.sticker__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .75; flex-shrink: 0; }
.sticker--float { position: absolute; z-index: 4; }
.sticker-row { display: flex; flex-wrap: wrap; gap: 14px 12px; align-items: center; }
.sticker-row .sticker:nth-child(2n) { --rot: 1.5deg; }
.sticker-row .sticker:nth-child(3n) { --rot: -1deg; }

/* ---------- Cartes « dossier » (languette de dossier suspendu) ---------- */
.folder {
  --fbg: var(--paper-2); --ffg: var(--ink); --fmuted: var(--grey-700);
  position: relative; display: flex; flex-direction: column;
  margin-top: 34px; color: var(--ffg);
  filter: drop-shadow(0 1px 0 rgba(58,18,79,0.10)) drop-shadow(0 12px 26px rgba(58,18,79,0.09));
  /* Ombre en filter (suit la forme languette+corps) coûteuse à répéter sur
     beaucoup de cartes à la fois (page réalisations, ~27 cartes) : on promeut
     chaque carte sur sa propre couche pour que le scroll déplace la couche déjà
     calculée au lieu de recalculer l'ombre à chaque frame. */
  will-change: transform;
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.folder__tab {
  /* Passe 5 : onglet plus large, tout en arrondis, sans angle vif ni coin coupé */
  position: absolute; top: -35px; left: 0; height: 36px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 28px 0 20px;
  min-width: min(58%, 320px); max-width: calc(100% - 36px);
  background: var(--fbg); color: inherit;
  border-radius: 18px 18px 0 0;
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
/* raccord concave (quart de cercle) entre l'onglet et le corps, façon onglet de navigateur */
.folder__tab::after {
  content: ""; position: absolute; right: -18px; bottom: 0; width: 18px; height: 18px;
  background: radial-gradient(circle at 100% 0, transparent 17.5px, var(--fbg) 18.5px);
}
.folder__tab b {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--coral); color: #fff; font-size: 0.66rem; font-weight: 700;
  line-height: 1; font-style: normal; text-align: center;
  padding-bottom: 1px;
}
.folder__body {
  position: relative; flex: 1; overflow: hidden;
  background: var(--fbg);
  border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg);
  padding: clamp(24px, 2.6vw, 34px);
  display: flex; flex-direction: column; gap: 14px;
}
.folder h3 { color: inherit; }
.folder p { color: var(--fmuted); margin: 0; }
.folder--violet { --fbg: var(--violet); --ffg: #fff; --fmuted: rgba(255,255,255,0.88); }
.folder--deep { --fbg: var(--violet-deep); --ffg: #fff; --fmuted: rgba(255,255,255,0.82); }
.folder--ink { --fbg: var(--ink); --ffg: #fff; --fmuted: rgba(255,255,255,0.80); }
.folder--indigo { --fbg: var(--indigo); --ffg: #fff; --fmuted: rgba(255,255,255,0.82); }
.folder--soft { --fbg: var(--violet-soft); --ffg: var(--ink); --fmuted: var(--ink-soft); }
.folder--lav { --fbg: var(--lavender-bg); --ffg: var(--ink); --fmuted: var(--ink-soft); }
.folder--coral { --fbg: var(--coral); --ffg: #fff; --fmuted: rgba(255,255,255,0.9); }
.folder--coral-soft { --fbg: var(--coral-soft); --ffg: var(--ink); --fmuted: var(--ink-soft); }
.folder--cream { --fbg: var(--cream); --ffg: var(--ink); --fmuted: var(--ink-soft); }
.folder--paper { --fbg: var(--paper-2); }
.folder--coral .folder__tab b { background: var(--ink); }   /* carte corail pleine : pastille sombre ; la carte corail clair garde la pastille orange comme les autres */
.folder--violet .folder__tab b, .folder--deep .folder__tab b, .folder--ink .folder__tab b, .folder--indigo .folder__tab b { background: var(--coral); }
.folder:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 1px 0 rgba(58,18,79,0.10)) drop-shadow(0 24px 42px rgba(58,18,79,0.16));
}
.folder:hover .folder__tab { transform: none; }   /* l'onglet reste solidaire du corps */
.folder.is-pressed { transform: translateY(-2px) scale(.985); transition-duration: .12s; }
.folder--static:hover { transform: none; }
.folder--static:hover .folder__tab { transform: none; }
/* coin découpé (variante) */
.folder--cut .folder__body { clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); border-top-right-radius: 0; }
.folder--cut .folder__body::before {
  content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px;
  background: rgba(58,18,79,0.10);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
/* icône ronde dans le corps */
.folder__ic {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.22); color: inherit;
  transition: transform .45s var(--ease), background .3s;
}
.folder--paper .folder__ic, .folder--cream .folder__ic, .folder--soft .folder__ic, .folder--lav .folder__ic, .folder--coral-soft .folder__ic { background: var(--violet-soft); color: var(--violet-deep); }
.folder--paper .folder__ic { background: var(--violet-soft); }
.folder__ic svg { width: 23px; height: 23px; }
.folder:hover .folder__ic { transform: translateY(-3px) rotate(-8deg); }
.folder__list { display: flex; flex-direction: column; gap: 9px; }
.folder__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; line-height: 1.45; color: var(--fmuted); }
.folder__list li::before {
  content: "✓"; flex-shrink: 0; margin-top: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.64rem; font-weight: 700;
  background: rgba(255,255,255,0.22); color: inherit;
}
.folder--paper .folder__list li::before, .folder--cream .folder__list li::before, .folder--soft .folder__list li::before, .folder--lav .folder__list li::before, .folder--coral-soft .folder__list li::before { background: var(--violet-soft); color: var(--violet-deep); }
.folder__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.folder__tags span {
  font-family: var(--font-display); font-size: 0.76rem; font-weight: 600;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.22); color: inherit;
}
.folder--paper .folder__tags span, .folder--cream .folder__tags span, .folder--soft .folder__tags span, .folder--lav .folder__tags span, .folder--coral-soft .folder__tags span { background: var(--paper); color: var(--violet-deep); border: 1px solid rgba(58,18,79,0.10); }
.folder__foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.folder__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.94rem; color: inherit;
  transition: gap .3s var(--ease);
}
.folder__link svg { width: 17px; height: 17px; }
.folder:hover .folder__link { gap: 13px; }

/* ---------- Grille des 5 leviers (accueil) ---------- */
.levers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 20px; }
.lever, .lever--wide { grid-column: span 2; }
.lever .folder__body { min-height: 380px; }
.lever h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); max-width: 14ch; }
.lever p { font-size: 0.96rem; line-height: 1.5; max-width: 46ch; }
.lever__media {
  margin-top: auto; position: relative; overflow: hidden;
  border-radius: var(--r-md); min-height: 170px;
  background: rgba(255,255,255,0.14);
}
.folder--paper .lever__media, .folder--cream .lever__media, .folder--soft .lever__media { background: var(--lavender-bg); }
/* média branding : lettre-marque + pastilles */
.lm-brand { display: grid; place-items: center; height: 100%; min-height: 170px; position: relative; }
.lm-brand__mark {
  width: 96px; height: 96px; border-radius: 26px;
  display: grid; place-items: center;
  background: var(--paper-2); color: var(--violet-deep);
  font-family: var(--font-display); font-weight: 700; font-size: 2.4rem;
  box-shadow: 0 12px 26px rgba(34,28,68,0.18);
  transform: rotate(-6deg); transition: transform .5s var(--ease);
}
.folder:hover .lm-brand__mark { transform: rotate(0) scale(1.05); }
.lm-brand__card {
  position: absolute; left: 50%; top: 50%; width: 190px; height: 112px;
  transform: translate(-28%, -32%) rotate(6deg);
  background: var(--paper-2); border-radius: 12px; box-shadow: 0 10px 22px rgba(34,28,68,0.14);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; justify-content: flex-end;
  transition: transform .6s var(--ease);
}
.lm-brand__card i { display: block; height: 6px; border-radius: 3px; background: var(--grey-150); }
.lm-brand__card i:nth-child(1) { width: 58%; background: var(--violet-deep); height: 8px; }
.lm-brand__card i:nth-child(2) { width: 40%; }
.lm-brand__card i:nth-child(3) { width: 48%; }
.folder:hover .lm-brand__card { transform: translate(-22%, -36%) rotate(9deg); }
.lm-brand__mark { position: relative; z-index: 1; }
.lever-detail__media .lm-brand__card { width: 250px; height: 150px; transform: translate(-30%, -30%) rotate(6deg); }
.lm-brand__swatches { position: absolute; right: 16px; bottom: 14px; display: flex; gap: 7px; padding: 8px; border-radius: var(--r-pill); background: var(--paper-2); box-shadow: var(--shadow-sm); }
.lm-brand__swatches i { width: 18px; height: 18px; border-radius: 50%; }
.lm-brand__swatches i:nth-child(1) { background: var(--violet-deep); }
.lm-brand__swatches i:nth-child(2) { background: var(--violet); }
.lm-brand__swatches i:nth-child(3) { background: var(--coral); }
.lm-brand__swatches i:nth-child(4) { background: var(--cream); }
/* média photo : vraie photo + sticker */
.lm-photo { position: absolute; inset: 0; }
.lever--wide .lever__media { min-height: 230px; }
.lm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .8s var(--ease); }
.folder:hover .lm-photo img { transform: scale(1.04); }
.lm-photo .sticker { position: absolute; left: 14px; bottom: 14px; }
/* média site : capture inclinée */
.lm-screen { position: relative; height: 100%; min-height: 190px; overflow: hidden; }
.lm-screen img {
  position: absolute; left: 50%; top: 22px; width: 72%; max-width: 280px;
  transform: translateX(-50%) rotate(-3deg);
  border-radius: 12px; box-shadow: 0 18px 40px rgba(34,28,68,0.28);
  transition: transform .7s var(--ease);
}
.folder:hover .lm-screen img { transform: translateX(-50%) translateY(-8px) rotate(-1deg); }
/* média recherche : barre de recherche + résultat */
.lm-search { display: flex; flex-direction: column; gap: 10px; justify-content: center; height: 100%; min-height: 170px; padding: 18px; }
.lm-search__bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper-2); color: var(--grey-700); border-radius: var(--r-pill);
  padding: 10px 16px; font-size: 0.86rem; box-shadow: var(--shadow-sm);
}
.lm-search__bar svg { width: 16px; height: 16px; color: var(--violet-deep); }
.lm-search__bar em { font-style: normal; color: var(--ink); border-right: 2px solid var(--coral); padding-right: 2px; animation: caret-blink 1.1s steps(1) infinite; }
.lm-search__hit {
  background: var(--paper-2); border-radius: 14px; padding: 12px 16px;
  box-shadow: var(--shadow-sm); border-left: 4px solid var(--coral);
  transform: translateX(14px); transition: transform .6s var(--ease);
}
.folder:hover .lm-search__hit { transform: translateX(0); }
.lm-search__hit strong { display: block; font-family: var(--font-display); font-size: 0.92rem; color: var(--ink); }
.lm-search__hit span { font-size: 0.78rem; color: var(--grey-500); }
/* média fiche Google : carte type fiche */
.lm-gbp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; height: 100%; min-height: 170px; padding: 16px; }
.lm-gbp__card { background: var(--paper-2); border-radius: 16px; padding: 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 5px; }
.lm-gbp__card strong { font-family: var(--font-display); font-size: 0.9rem; color: var(--ink); }
.lm-gbp__card span { font-size: 0.76rem; color: var(--grey-500); }
.lm-gbp__card--pin { background: var(--violet); color: #fff; transform: translateY(-14px); }
.lm-gbp__card--pin strong, .lm-gbp__card--pin span { color: #fff; }
.lm-gbp__card svg { width: 22px; height: 22px; }
.lm-gbp__stars { color: var(--coral); letter-spacing: 1px; font-size: 0.8rem; }
/* média stratégie : mini feuille de route (audit -> plan -> suivi) */
.lm-strategy { display: flex; flex-direction: column; gap: 16px; justify-content: center; height: 100%; min-height: 170px; padding: 20px 24px; }
.lm-strategy__step { position: relative; display: flex; align-items: center; gap: 12px; }
.lm-strategy__step:not(:last-child)::before {
  content: ""; position: absolute; left: 9px; top: 20px; width: 2px; height: 26px;
  background: var(--violet-soft);
}
.lm-strategy__step i {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 1;
  background: var(--paper-2); border: 2px solid var(--violet-soft);
}
.lm-strategy__step.is-done i { background: var(--violet); border-color: var(--violet); }
.lm-strategy__step.is-done i::after {
  content: "✓"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 0.6rem; font-weight: 700;
}
.lm-strategy__step span { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.lm-strategy__step:not(.is-done) span { color: var(--grey-500); }
/* média réseaux sociaux : mini publication */
/* position:absolute + inset:0 plutôt que height:100% : le height:100% ne se
   résout pas de façon fiable quand .lever__media n'a lui-même qu'un min-height
   (même limitation que .lm-brand, cf. plus bas) et laissait du vide sous le widget */
.lm-social { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px; gap: 10px; }
.lm-social__photo {
  flex: 1; min-height: 0; border-radius: 14px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--violet-soft), var(--coral-soft));
  box-shadow: var(--shadow-sm);
}
.lm-social__row {
  display: flex; align-items: center; gap: 8px;
  background: var(--paper-2); border-radius: var(--r-pill);
  padding: 8px 14px; box-shadow: var(--shadow-sm);
}
.lm-social__like { width: 18px; height: 18px; color: var(--coral); flex-shrink: 0; }
.lm-social__like svg { width: 100%; height: 100%; }
/* bandeau stats façon Instagram : abonnés / engagement, flèche verte de croissance */
.lm-social__stats { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.lm-social__stat {
  flex: 1; min-width: 0; background: rgba(255, 253, 252, 0.92); backdrop-filter: blur(6px);
  border-radius: 12px; padding: 7px 9px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 1px;
}
.lm-social__stat-value {
  display: flex; align-items: center; gap: 3px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; color: var(--ink); white-space: nowrap;
}
.lm-social__stat-value svg { width: 10px; height: 10px; color: #1FA463; flex-shrink: 0; }
.lm-social__stat-label { font-family: var(--font-body); font-size: 0.6rem; color: var(--grey-500); }
.lm-social__row strong { font-family: var(--font-display); font-size: 0.84rem; color: var(--ink); font-weight: 600; }

/* ---------- Méthode (accueil) : photo + deux dossiers reliés ---------- */
.method-v4 { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(26px, 4vw, 54px); align-items: stretch; }
.method-v4__photo { position: relative; }
.method-v4__photo .folder { height: 100%; }
.method-v4__photo .folder__body { padding: 10px; min-height: 420px; }
.method-v4__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; border-radius: 0 calc(var(--r-lg) - 10px) calc(var(--r-lg) - 10px) calc(var(--r-lg) - 10px); }
.method-v4__stack { position: relative; display: grid; gap: 44px; }
.method-v4__stack .folder__body { padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px); }
.method-card__kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.method-card__big { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -0.01em; }
.method-card__sub2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.method-v4 ul { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.method-v4 li { display: flex; gap: 12px; align-items: center; font-size: 0.98rem; color: inherit; }
.method-v4 li::before {
  content: ""; flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255,255,255,0.20); display: grid; place-items: center; font-size: 0.82rem;
}
/* (.method-v4__note : la note « Valable pour chaque levier » vit désormais sous la photo, voir passe 11) */

/* ---------- Pour qui : bande asymétrique + pack de stickers ---------- */
.who { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.who__head h2 { margin-block: 14px 16px; }
.who__pack { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 10px; }
.who-card {
  /* Passe 5 : cartes posées à plat, sans contour BD ni rotation, ombre douce */
  position: relative; background: var(--paper-2); border: 1px solid rgba(58,18,79,0.08);
  border-radius: clamp(22px, 2.4vw, 30px); padding: 24px 24px 24px;
  box-shadow: 0 1px 0 rgba(58,18,79,0.04), 0 10px 26px rgba(58,18,79,0.08);
  transform: rotate(var(--rot, 0deg));
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.who-card:nth-child(2) { --rot: 0deg; background: var(--violet-soft); }
.who-card:nth-child(3) { --rot: 0deg; background: var(--violet-soft); }   /* passe 8 : plus de beige-gris terne, damier blanc / violet clair */
.who-card:nth-child(4) { --rot: 0deg; background: var(--paper-2); }
.who-card:hover { transform: translateY(-5px); box-shadow: 0 1px 0 rgba(58,18,79,0.04), 0 18px 40px rgba(58,18,79,0.13); }
.who-card.is-pressed { transform: translateY(-1px) scale(.985); box-shadow: 0 6px 16px rgba(58,18,79,0.10); transition-duration: .1s; }
.who-card__ic { width: 44px; height: 44px; border-radius: 13px; background: var(--ink); color: #fff; display: grid; place-items: center; margin-bottom: 14px; }
.who-card__ic svg { width: 22px; height: 22px; }
.who-card:nth-child(2) .who-card__ic { background: var(--violet); }
.who-card:nth-child(3) .who-card__ic { background: var(--coral); }
.who-card h3 { font-size: 1.08rem; margin-bottom: 6px; }
.who-card p { font-size: 0.92rem; line-height: 1.48; color: var(--ink-soft); margin: 0; }

/* ---------- Réalisations : dossiers avec capture ---------- */
.work-split { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.work-split__head { position: sticky; top: 110px; }
.work-split__head h2 { margin-block: 14px 16px; }
.work-split__head .lead { margin-bottom: 22px; font-size: 1rem; }
.work-grid--folders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; perspective: none; }
.work-grid--folders.work-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-folder .folder__body { padding: 10px 10px 20px; gap: 12px; }
.work-shot {
  position: relative; aspect-ratio: 16 / 11; overflow: hidden;
  border-radius: 16px calc(var(--r-lg) - 10px) 16px 16px;
  background: var(--lavender-bg);
  display: grid; place-items: end center; padding: 22px 22px 0;
}
.work-shot::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(58,18,79,0.14) 1px, transparent 1.2px);
  background-size: 16px 16px; opacity: .8;
}
.work-shot img {
  position: relative; width: 86%; display: block;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 20px 44px rgba(34,28,68,0.30), 0 3px 10px rgba(34,28,68,0.18);
  transform: translateY(8px) rotate(-1.4deg);
  transition: transform .7s var(--ease);
}
.work-shot--tall img { width: 52%; }
/* Captures de site : image pleine largeur/hauteur de la boîte, sans recadrage
   (la boîte est au même ratio que les captures) ni flottement/rotation au survol,
   qui la faisait paraître petite et perdue dans beaucoup de violet autour. */
.work-shot--wide { aspect-ratio: 8 / 5; padding: 0; place-items: stretch; }
.work-shot--wide::before { display: none; }
.work-shot--wide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: 0; box-shadow: none; transform: none;
}
.work-folder:hover .work-shot--wide img { transform: none; }
.work-shot--full { padding: 0; }
.work-shot--full img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; transform: none; box-shadow: none; }
.work-shot__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(252, 251, 249, 0.92); color: var(--ink);
  display: grid; place-items: center; box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease), background .35s;
}
.work-shot__play svg { width: 22px; height: 22px; margin-left: 3px; }
.work-folder:hover .work-shot__play { transform: translate(-50%, -50%) scale(1.08); background: var(--white); }
.work-folder:hover .work-shot img { transform: translateY(-4px) rotate(0) scale(1.02); }
.work-folder:hover .work-shot--full img { transform: scale(1.04); }
.work-shot--deep { background: var(--violet-deep); }
.work-shot--deep::before { background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1.2px); }
.work-shot--coral { background: var(--coral-soft); }
.work-shot--cream { background: var(--cream); }
.work-folder__meta { padding: 4px 12px 0; display: flex; flex-direction: column; gap: 10px; }
.work-folder__meta h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.work-folder__meta .work-card__desc { font-size: 0.94rem; }
.work-folder__meta .work-card__pills { gap: 7px; }
/* Cartes vedettes (ATD30, Groupe HL) : même mise en page empilée que les autres
   cartes site (capture pleine largeur en haut, texte en dessous) plutôt qu'un
   montage image/texte côte à côte — plus simple, et ça évite tout arbitrage
   entre recadrer le hero ou laisser du vide. La carte reste juste plus large. */
.work-folder--featured { grid-column: span 2; }
.work-folder--featured .folder__body > a { display: block; }
.work-folder--cta .folder__body { justify-content: center; gap: 12px; padding: clamp(26px, 3vw, 36px); min-height: 300px; }
/* Carte "Photo & vidéo" : hauteur augmentée, la cliente va y ajouter de vraies photos au format portrait */
[data-cat-empty="photo"].work-folder--cta .folder__body { min-height: 520px; }
.work-folder--cta h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); max-width: 14ch; }
.work-folder--cta .btn { align-self: flex-start; margin-top: 8px; }

/* Cartes réalisations au contenu portrait : empilées comme les autres cartes
   (image pleine largeur en haut, texte en dessous), mais avec une boîte plus
   haute que large pour montrer la photo en entier (essai précédent : image et
   texte côte à côte, ça recadrait trop serré une image portrait). */
.work-folder--portrait .work-shot {
  aspect-ratio: 3 / 4; padding: 0; place-items: stretch;
}
.work-folder--portrait .work-shot::before { display: none; }
.work-folder--portrait .work-shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: 0; transform: none; box-shadow: none;
}
.work-folder--portrait:hover .work-shot img { transform: scale(1.04); }

/* ---------- Process : diagramme post-it relié ---------- */
.postits-wrap { position: relative; }
.postits__rail { display: block; width: 100%; height: 64px; margin-bottom: -6px; position: relative; z-index: 1; }
.postits__rail path { stroke: var(--violet-deep); stroke-width: 2.5; stroke-dasharray: 8 8; stroke-linecap: round; }
.postits__rail circle { fill: var(--coral); stroke: var(--paper-2); stroke-width: 3; transform-origin: center; transform-box: fill-box; }
.postits__rail .postits__end { stroke: var(--violet-deep); stroke-width: 2.5; stroke-dasharray: 0; }
.postits { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.postit {
  position: relative; z-index: 1;
  background: var(--paper-2); color: var(--ink);
  border-radius: 6px 6px 22px 6px; padding: 30px 22px 24px;
  box-shadow: 0 12px 26px rgba(58,18,79,0.12), 0 1px 0 rgba(58,18,79,0.10);
  transform: rotate(var(--rot, -1.4deg));
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.postit::before {
  content: ""; position: absolute; top: -10px; left: 50%; width: 62px; height: 18px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(199,160,255,0.62); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(58,18,79,0.12);
}
.postit:nth-child(2) { --rot: 1.2deg; background: var(--violet-soft); }
.postit:nth-child(3) { --rot: -0.8deg; background: var(--coral-soft); }
.postit:nth-child(4) { --rot: 1.5deg; background: var(--lavender-bg); }
.postit:nth-child(2)::before { transform: translateX(-50%) rotate(3deg); background: rgba(255,107,44,0.45); }
.postit:nth-child(4)::before { transform: translateX(-50%) rotate(-3deg); background: rgba(255,107,44,0.45); }
.postit:hover { transform: rotate(0) translateY(-7px); box-shadow: 0 22px 44px rgba(58,18,79,0.18); }
.postit.is-pressed { transform: rotate(0) translateY(-2px) scale(.985); transition-duration: .12s; }
.postit__num {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--coral); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; margin-bottom: 14px;
}
.postit:nth-child(2) .postit__num, .postit:nth-child(4) .postit__num { background: var(--violet); }
.postit h3 { font-size: 1.18rem; margin-bottom: 8px; }
.postit p { font-size: 0.93rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.postit__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.postit__tags span { font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(58,18,79,0.08); color: var(--violet-deep); }
.process-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(20px, 4vw, 60px); align-items: end; margin-bottom: clamp(44px, 5vw, 64px); }
.process-head h2 { margin-top: 14px; }
.process-head p { color: var(--ink-soft); font-size: clamp(1rem, 1.35vw, 1.12rem); }
.process-cta { margin-top: clamp(36px, 4vw, 52px); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.process-cta span { color: var(--grey-700); font-size: 0.95rem; }

/* ---------- À propos (accueil) ---------- */
.about-v4 .about__frame { border: 0; padding: 0; }
.about-v4 .about__frame img { border-radius: 0; }
.about-v4 .folder__body { padding: 10px; }
.about-v4 .folder__body img { border-radius: 0 calc(var(--r-lg) - 10px) calc(var(--r-lg) - 10px) calc(var(--r-lg) - 10px); aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; width: 100%; }
.about-v4 .sticker--float { right: -18px; top: 26px; }
.about-v4 .about__badge { left: -18px; bottom: 26px; }
.about__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ---------- FAQ en deux colonnes ---------- */
.faq-layout { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-layout .section-head { position: sticky; top: 110px; margin-bottom: 0; }
.faq-layout .section-head h2 { margin-block: 14px 16px; font-size: clamp(1.8rem, 3.1vw, 2.6rem); }
.faq-layout .faq { max-width: none; margin: 0; }
.faq-layout .sticker-row { margin-top: 22px; }

/* ---------- CTA final : blobs + formes ---------- */
.cta-card { position: relative; isolation: isolate; }
.cta-card::before, .cta-card::after { display: none; }
.cta-card .blob { z-index: -1; opacity: .9; }
.cta-card .shape { z-index: -1; }
.cta-card > *:not(.blob):not(.shape) { position: relative; z-index: 1; }

/* ---------- Hero des sous-pages (asymétrique, photo Tessa) ---------- */
.hero-sub { position: relative; overflow: hidden; padding-top: calc(var(--nav-h) + 46px); padding-bottom: clamp(44px, 5vw, 76px); }
.hero-sub .container { position: relative; z-index: 1; }
.hero-sub__grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero-sub__copy h1 { font-size: clamp(2.3rem, 4.1vw, 3.7rem); margin: 14px 0 24px; max-width: 17ch; }
.hero-sub__copy .lead { max-width: 58ch; }
.hero-sub--tight .hero-sub__copy .lead { font-size: 0.98rem; line-height: 1.44; color: var(--ink-soft); max-width: 56ch; }
.hero-sub__copy .sticker-row { margin-top: 26px; }
.hero-sub__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }
.hero-sub__photo { position: relative; max-width: 460px; margin-inline: auto; width: 100%; }
.hero-sub__photo .folder__body { padding: 10px; }
.hero-sub__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; border-radius: 0 calc(var(--r-lg) - 10px) calc(var(--r-lg) - 10px) calc(var(--r-lg) - 10px); }
.hero-sub__photo .sticker--float.s1 { left: -22px; top: 38px; }
.hero-sub__photo .sticker--float.s2 { right: -18px; bottom: 44px; }
.hero-sub--compact { padding-bottom: clamp(24px, 3vw, 40px); }
.hero-sub__blob { width: 46vw; max-width: 620px; aspect-ratio: 1; right: -12%; top: -30%; }
.hero-sub__blob2 { width: 30vw; max-width: 380px; aspect-ratio: 1; left: -10%; bottom: -40%; }
/* Badge de la charte graphique Waapluka à la place de la forme organique en
   haut à droite de la hero réalisations : même position/taille que la bulle
   qu'il remplace, déjà dans les tons pastel de la charte. */
.hero-sub__blob--crab { position: absolute; z-index: 0; pointer-events: none; width: 46vw; max-width: 620px; transform: scale(-1, -1); }

/* ---------- Expertise : flux Waa → Pluka ---------- */
.flow-v4 { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: stretch; }
.flow-v4 .folder__body { padding: clamp(26px, 3.4vw, 42px); gap: 12px; }
.flow-v4 .folder__list li { font-size: 0.98rem; }
/* Levier détaillé : bande alternée 60/40 */
.lever-detail { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.lever-detail--reverse .lever-detail__copy { order: 2; }
.lever-detail--reverse .lever-detail__media { order: 1; }
.lever-detail__copy h2 { margin-block: 14px 16px; font-size: clamp(1.8rem, 3vw, 2.5rem); max-width: 16ch; }
.lever-detail__copy .lead { font-size: 1.04rem; margin-bottom: 18px; }
.lever-detail__list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 26px; }
.lever-detail__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.98rem; color: var(--ink); line-height: 1.45; transition: transform .25s var(--ease); }
.lever-detail__list li:hover { transform: translateX(4px); }
.lever-detail__list li::before { content: "✓"; flex-shrink: 0; margin-top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); color: var(--violet-deep); display: grid; place-items: center; font-size: 0.68rem; font-weight: 700; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.lever-detail__list li:hover::before { background: var(--violet); color: #fff; transform: scale(1.12); }
/* Stratégie (band--grey) et Photo & vidéo (fond de page) sont eux-mêmes en --paper :
   même souci d'invisibilité que band--soft avant, donc rond violet clair ici à la place. */
#strategie .lever-detail__list li::before, #photo .lever-detail__list li::before { background: var(--violet-soft); }
#strategie .lever-detail__list li:hover::before, #photo .lever-detail__list li:hover::before { background: var(--violet); color: #fff; }
.lever-detail__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.lever-detail__tags span {
  font-family: var(--font-display); font-size: 0.76rem; font-weight: 600;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--white); color: var(--violet-deep); border: 1px solid rgba(58,18,79,0.10);
  transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.lever-detail__tags span:hover { background: var(--violet); color: #fff; border-color: var(--violet); transform: translateY(-2px); }
.lever-detail__tags--light span { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.22); }
.lever-detail__tags--light span:hover { background: #fff; color: var(--violet-deep); border-color: #fff; transform: translateY(-2px); }
.lever-detail__temps { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; align-items: center; }
.lever-detail__temps small { font-size: 0.82rem; color: var(--grey-500); margin-right: 4px; }
.lever-detail__media .folder__body { padding: 12px; min-height: 340px; }
.lever-detail__media .lever__media { min-height: 316px; height: 100%; margin: 0; border-radius: 0 calc(var(--r-lg) - 12px) calc(var(--r-lg) - 12px) calc(var(--r-lg) - 12px); }
/* Photo & vidéo : portraits en carrousel, le container est plus haut pour éviter un recadrage trop serré */
#photo .lever-detail__media .folder__body { min-height: 480px; }
#photo .lever-detail__media .lever__media { min-height: 456px; }
.lever-detail__media .lm-brand__mark { width: 150px; height: 150px; font-size: 3.6rem; border-radius: 38px; }
.lever-detail__media .lm-screen img { width: 68%; max-width: 360px; top: 26px; }
.lever-detail__media .lm-photo img { object-position: center 30%; }
#strategie .lever-detail__media .lm-photo img { object-position: center 0%; }
/* Stratégie : card photo étirée jusqu'en bas du texte, largeur ajustée au format
   portrait de la photo (au lieu de toute la largeur de colonne avec du vide autour) */
#strategie .lever-detail { align-items: stretch; }
#strategie .lever-detail__media { display: flex; justify-content: center; }
#strategie .lever-detail__media .folder { height: 100%; width: 430px; max-width: 100%; }
/* Réseaux sociaux : card un peu moins large que la colonne */
#social .lever-detail__media { display: flex; justify-content: center; }
#social .lever-detail__media .folder { width: 88%; }
/* Site web : photo mockup laptop au format proche du réel, pour éviter un recadrage trop serré
   sans pour autant agrandir démesurément la card */
#site .lever-detail__media .folder__body { min-height: 0; }
#site .lever-detail__media .lever__media { min-height: 0; height: auto; aspect-ratio: 1210 / 847; }
#site .lever-detail__media .lm-photo img { object-position: center center; }
.lever-detail__media .lm-search, .lever-detail__media .lm-gbp { padding: 26px; }
.lever-detail__media .lm-gbp { grid-template-columns: 1fr 1fr; align-content: center; }
.lever-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
/* engagements : stickers sur bande encre */
.pledges { display: flex; flex-wrap: wrap; gap: 16px 14px; margin-top: clamp(28px, 3vw, 40px); }
.pledges .sticker { --rot: -1.5deg; font-size: 0.96rem; padding: 12px 18px; }
.pledges .sticker:nth-child(2n) { --rot: 1.6deg; }
.pledges .sticker:nth-child(3n) { --rot: -0.6deg; }
.pledges .sticker:nth-child(4n) { --rot: 2.2deg; }
.pledge-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 60px); align-items: end; }
.pledge-head h2 { margin-top: 14px; }

/* ---------- Contact ---------- */
.contact-v4 { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
.contact-v4__side { display: flex; flex-direction: column; gap: 26px; }
.contact-v4__side .postits { grid-template-columns: 1fr; gap: 22px; }
.contact-v4__side .postit { padding: 26px 22px 22px; }
.contact-v4__side .postit h3 { font-size: 1.08rem; }
.contact-v4__cal .folder__body { padding: 10px; }
.calendly-embed { border: 0; box-shadow: none; border-radius: 0 calc(var(--r-lg) - 10px) calc(var(--r-lg) - 10px) calc(var(--r-lg) - 10px); background: #fff; }
.contact-stickers { display: flex; flex-wrap: wrap; gap: 14px 12px; margin-top: 24px; }
.contact-stickers a.sticker { cursor: pointer; }
.contact-stickers .sticker svg { width: 16px; height: 16px; }

/* ---------- Boutons : retour au clic (pression + onde) ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn.is-pressed { transform: translateY(1px) scale(.97) !important; transition-duration: .1s; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: rgba(255,255,255,0.45);
  animation: ripple .65s var(--ease) forwards;
}
.btn--ghost .ripple, .btn--light .ripple { background: rgba(166,107,255,0.28); }
@keyframes ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(28); opacity: 0; } }
.btn > * { position: relative; z-index: 1; }
/* flèche qui glisse au survol */
.btn svg { transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.arrow-link svg { transition: transform .35s var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }
/* filtres réalisations : pression */
.work-filter__btn.is-pressed { transform: scale(.95); transition-duration: .1s; }
.faq__item summary.is-pressed { transform: scale(.995); }
.faq__item summary { transition: color .25s, transform .12s; }

/* ---------- Reveal : variantes enrichies ---------- */
.reveal--left { transform: translateX(-36px); }
.reveal--right { transform: translateX(36px); }
.reveal--rise { transform: translateY(44px) scale(.96); }
.reveal--rotate { transform: rotate(-3deg) translateY(30px) scale(.96); transform-origin: left bottom; }
.reveal--pop { transform: scale(.85); transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.reveal[data-stagger] { transform: none; opacity: 1; }
.reveal[data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal[data-stagger].is-visible > * { opacity: 1; transform: none; }
.reveal[data-stagger="pop"] > * { transform: scale(.88) rotate(var(--rot, 0deg)); transition-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
.reveal[data-stagger="pop"].is-visible > * { transform: rotate(var(--rot, 0deg)); }
/* stagger ne doit pas neutraliser la rotation des stickers / post-it / cartes */
.reveal[data-stagger].is-visible > .sticker, .reveal[data-stagger].is-visible > .who-card, .reveal[data-stagger].is-visible > .postit { transform: rotate(var(--rot, -1.5deg)); }
.reveal[data-stagger].is-visible > .sticker:hover, .reveal[data-stagger].is-visible > .who-card:hover, .reveal[data-stagger].is-visible > .postit:hover { transform: rotate(0) translateY(-5px); }

/* ---------- Marquee : ancrer le sticker-slot ---------- */
.marquee__slot { transform: rotate(-2deg); }

/* ---------- Hero accueil : ajustements v4 ---------- */
.hero-studio__copy { background: var(--paper); }
.hero-studio__copy .hl__svg path { stroke: var(--coral); }
.hero-studio .text-violet { color: var(--violet-pop); }
.hero-studio__proof span::before { content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat; }
.hero-studio__visual .sticker--float { left: 14px; top: 14px; --rot: -3deg; }
.hero-mini--soft strong { font-size: 0.84rem; line-height: 1.3; }

/* ---------- Pages légales : sobres ---------- */
.legal-hero { padding-top: calc(var(--nav-h) + 54px); padding-bottom: 8px; }
.legal-hero .container { max-width: 760px; }

/* ---------- Responsive v4 ---------- */
@media (max-width: 1080px) {
  .levers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lever, .lever--wide { grid-column: span 1; }
  .work-grid--folders.work-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .method-v4 { grid-template-columns: 1fr; }
  .method-v4__photo .folder__body { min-height: 320px; }
  .method-v4__photo img { max-height: 420px; }
  .who { grid-template-columns: 1fr; }
  .work-split { grid-template-columns: 1fr; }
  .work-split__head { position: static; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-layout .section-head { position: static; }
  .hero-sub__grid { grid-template-columns: 1fr; }
  .hero-sub__photo { max-width: 380px; }
  .lever-detail, .lever-detail--reverse { grid-template-columns: 1fr; }
  .lever-detail--reverse .lever-detail__copy { order: 1; }
  .lever-detail--reverse .lever-detail__media { order: 2; }
  /* #strategie fixe la card média à 430px en desktop (grille étroite avec du texte
     à côté) : sur une seule colonne mobile, cette largeur fixe forçait la piste de
     grille à dépasser le conteneur et coupait tout le texte à droite (grid blowout). */
  .lever-detail__copy, .lever-detail__media { min-width: 0; }
  #strategie .lever-detail__media .folder { width: 100%; }
  .contact-v4 { grid-template-columns: 1fr; }
  .process-head, .pledge-head { grid-template-columns: 1fr; }
  .postits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .postits__rail { display: none; }
  .work-folder--featured { grid-column: span 1; }
  .work-folder--featured .folder__body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .levers { grid-template-columns: 1fr; }
  .lever .folder__body { min-height: 0; }
  .who__pack { grid-template-columns: 1fr; }
  .work-grid--folders, .work-grid--folders.work-grid--3 { grid-template-columns: 1fr; }
  .postits { grid-template-columns: 1fr; }
  .hero-sub__photo .sticker--float.s1 { left: 6px; }
  .hero-sub__photo .sticker--float.s2 { right: 6px; }
  .about-v4 .sticker--float { right: 6px; }
  .sticker { white-space: normal; text-align: center; }
  .folder__tab { font-size: 0.7rem; padding: 0 18px 0 14px; }
  .lever-detail__media .folder__body { min-height: 260px; }
  .lever-detail__media .lever__media { min-height: 236px; }
  #photo .lever-detail__media .folder__body { min-height: 380px; }
  #photo .lever-detail__media .lever__media { min-height: 356px; }
}
@media (prefers-reduced-motion: reduce) {
  .blob, .shape, .lm-search__bar em { animation: none !important; }
  .tx--stripes::before { clip-path: none; }
  .hl__svg path, .draw path { stroke-dashoffset: 0 !important; }
  .mark { background-size: 100% 46%; }
  .reveal[data-stagger] > * { opacity: 1; transform: none; }
}

/* ---------- Mobile : hero accueil (mini-cartes en hauteur libre) et formes décoratives réduites ---------- */
@media (max-width: 620px) {
  .hero-studio { height: auto; }
  .hero-studio__visual { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .hero-photo-card { grid-column: 1 / -1; min-height: 360px; }
  .hero-mini { min-height: 0; height: auto; }
  .hero-mini strong { font-size: 0.86rem; }
  .hero-mini--soft { grid-column: 1 / -1; }
  .shape--sun, .shape--flower { width: 70px; height: 70px; opacity: .45 !important; }
  .shape--star { width: 40px; height: 40px; }
  .section-watermark { font-size: 7rem; }
}

/* =========================================================
   PASSE 5 : Corrections sur retour cliente (sept. 2026)
   - plus d'effet « contour BD » : ombres douces, bordure 1px max
   - onglets de dossier arrondis, plus larges, solidaires au survol
   - deux langages visuels : dossier (leviers, réalisations) /
     bulle (hero, méthode, à propos, CTA), au lieu du dossier partout
   - fonds : plus de rayures, rubans fluides
   ========================================================= */

/* ---------- Ancrage sous la barre fixe (l'eyebrow ne passe plus sous la nav) ---------- */
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--frame-w) + 28px); }

/* ---------- Bulle : conteneur arrondi hérité du hero (.hero-mini) ---------- */
.bubble {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: clamp(24px, 3vw, 34px);
  background: var(--paper-2); color: var(--ink);
  box-shadow: 0 1px 0 rgba(58,18,79,0.04), 0 10px 26px rgba(58,18,79,0.08);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.bubble:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(58,18,79,0.04), 0 20px 44px rgba(58,18,79,0.13); }
.bubble::after { content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat; position: absolute; right: 18px; bottom: 8px; font-size: 4rem; line-height: 1; opacity: .16; pointer-events: none; }
.bubble > * { position: relative; z-index: 1; }
.bubble__kicker { font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.bubble--violet { background: var(--violet); color: #fff; box-shadow: 0 10px 26px rgba(166,107,255,0.28); }
.bubble--coral { background: var(--coral); color: #fff; box-shadow: 0 10px 26px rgba(255,107,44,0.24); }
.bubble--ink { background: var(--ink); color: #fff; box-shadow: 0 10px 26px rgba(48,20,63,0.24); }
.bubble--soft { background: var(--violet-soft); color: var(--violet-deep); }
.bubble--paper { background: var(--paper-2); color: var(--ink); }
.bubble--violet p, .bubble--coral p, .bubble--ink p { color: rgba(255,255,255,0.9); }
.bubble--mini { padding: 16px 18px; min-height: 96px; justify-content: flex-start; gap: 10px; border-radius: 22px; }
.bubble--mini strong { font-family: var(--font-display); font-size: clamp(0.98rem, 1.2vw, 1.1rem); line-height: 1.15; }
.bubble--mini::after { font-size: 3rem; right: 14px; bottom: 6px; }

/* Carte photo façon hero : bulle image + étiquette + sticker */
.photo-card {
  position: relative; overflow: hidden;
  border-radius: clamp(24px, 3vw, 34px);
  background: var(--violet-deep);
  box-shadow: 0 1px 0 rgba(58,18,79,0.04), 0 16px 40px rgba(58,18,79,0.14);
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-card__label {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 10px 14px; border-radius: 16px;
  background: rgba(255,253,252,0.92); color: var(--ink);
  max-width: calc(100% - 28px);
}
.photo-card__label strong { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; line-height: 1.2; }
.photo-card__label span { font-size: 0.78rem; color: var(--grey-700); line-height: 1.2; }
.photo-card .sticker--float { left: 14px; top: 14px; }


/* ---------- Fond « ruban » : courbes fluides à la place des rayures ---------- */
.tx--flow::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' fill='none' stroke-linecap='round'%3E%3Cpath d='M-120 520 C 220 300, 430 700, 760 430 S 1240 120, 1580 380' stroke='%23A66BFF' stroke-opacity='.16' stroke-width='110'/%3E%3Cpath d='M-80 720 C 260 600, 520 820, 880 640 S 1300 420, 1560 560' stroke='%23A66BFF' stroke-opacity='.10' stroke-width='46'/%3E%3C/svg%3E");
  background-size: cover; background-position: center;
}
.tx--flow-coral::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' fill='none' stroke-linecap='round'%3E%3Cpath d='M-120 520 C 220 300, 430 700, 760 430 S 1240 120, 1580 380' stroke='%23FF6B2C' stroke-opacity='.11' stroke-width='110'/%3E%3Cpath d='M-80 720 C 260 600, 520 820, 880 640 S 1300 420, 1560 560' stroke='%23FF6B2C' stroke-opacity='.07' stroke-width='46'/%3E%3C/svg%3E");
}

/* ---------- Méthode : photo bulle + deux bulles reliées par la flèche ---------- */
.method-v4 { align-items: stretch; }
.method-v4__photo .photo-card { height: 100%; min-height: 420px; }
.method-v4__photo .photo-card img { height: 100%; object-position: center 28%; }
.method-v4__stack .bubble { padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px); gap: 6px; }
.method-v4__stack .bubble::after { font-size: 7rem; right: 26px; bottom: -10px; opacity: .12; }
.method-v4__stack .bubble__kicker { margin-bottom: 8px; }
.method-v4__stack .method-card__sub2 { margin-top: 2px; }
.bubble--ink .method-card__big { color: var(--violet-bright); }
@media (max-width: 980px) { .method-v4__photo .photo-card { min-height: 320px; max-height: 460px; } }

/* ---------- Pour qui : fond ruban, cartes calmes en quinconce ---------- */
.who__pack { padding: 0; gap: 18px; }
.who-card:nth-child(even) { margin-top: 26px; }
.who-card__ic { border-radius: 14px; }
.who__blob { width: 42vw; max-width: 560px; aspect-ratio: 1; right: -14%; top: -30%; background: var(--coral); opacity: .09; }
@media (max-width: 640px) { .who-card:nth-child(even) { margin-top: 0; } }

/* ---------- À propos : bulle photo + mini-bulles + capsules ---------- */
.about-v5 { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.about-v5__media { display: grid; gap: 12px; }
.photo-card--about { aspect-ratio: 4 / 4.6; margin-left: clamp(-28px, -2.2vw, -14px); }
/* Teaser (accueil) : depuis le retrait des capsules et du badge ville, la colonne texte
   est bien plus courte que la photo + mini-cartes. Photo raccourcie pour rester proche
   de la hauteur du texte, plutôt qu'un centrage qui laissait un vide au-dessus ou en dessous. */
.about-v5--teaser .photo-card--about { aspect-ratio: 4 / 3.7; }
.photo-card--about img { object-position: center 18%; }
.about-v5__minis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-left: clamp(-28px, -2.2vw, -14px); }   /* même débord à gauche que la photo : bords alignés */
.about-v5__copy h2 { margin-block: 14px 22px; font-size: clamp(1.9rem, 3.2vw, 2.7rem); max-width: 20ch; }
.capsules { display: flex; flex-wrap: wrap; gap: 12px 10px; margin-top: 26px; }
.capsules .sticker { --rot: -1.2deg; }
.capsules .sticker:nth-child(2n) { --rot: 1.4deg; }
.capsules .sticker:nth-child(3n) { --rot: -0.6deg; }
.capsules .sticker:nth-child(4n) { --rot: 1.8deg; }
.about-v5__cta { margin-top: 28px; }
@media (max-width: 980px) { .about-v5 { grid-template-columns: 1fr; } .about-v5__media { max-width: 460px; } .photo-card--about, .about-v5__minis { margin-left: 0; } }
@media (max-width: 480px) { .about-v5__minis { grid-template-columns: 1fr; } }

/* ---------- CTA final : composition de conteneurs (comme le hero), plus compacte ---------- */
.cta-studio {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 12px; padding: 12px;
  border-radius: clamp(30px, 4vw, 48px);
  background: var(--paper-2);
  box-shadow: 0 16px 42px rgba(58,18,79,0.10);
}
.cta-studio__main {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(30px, 4vw, 56px);
  border-radius: clamp(24px, 3.4vw, 36px);
  background: var(--violet); color: var(--white);
}
.cta-studio__main::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px; opacity: .10; mix-blend-mode: overlay;
}
.cta-studio__main > * { position: relative; z-index: 1; }
.cta-studio__main .eyebrow { color: rgba(255,255,255,0.92); }
.cta-studio__main .eyebrow::before { color: var(--coral-soft); }
.cta-studio__main h2 { color: #fff; margin: 14px 0 16px; max-width: 18ch; font-size: clamp(1.9rem, 3.3vw, 2.9rem); }
.cta-studio__main p { color: rgba(255,255,255,0.9); max-width: 50ch; margin: 0 0 26px; }
.cta-studio__side { display: grid; gap: 12px; align-content: stretch; }
.cta-studio__side .bubble { min-height: 0; }
.cta-studio__side .bubble--mini strong { font-family: var(--font-body); font-weight: 600; }
.bubble--person { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; }
.bubble--person img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.bubble--person strong { font-family: var(--font-display); font-size: .98rem; display: block; line-height: 1.2; }
.bubble--person span { font-size: .82rem; color: var(--grey-700); }
.bubble--person::after { display: none; }
@media (max-width: 900px) { .cta-studio { grid-template-columns: 1fr; } .cta-studio__side { grid-template-columns: 1fr 1fr; } .bubble--person { grid-column: 1 / -1; } }
@media (max-width: 560px) { .cta-studio__side { grid-template-columns: 1fr; } }

.lm-brand--v5 { overflow: hidden; border-radius: inherit; }
.folder:hover .lm-brand--v5 .lm-brand__swatches { right: 14px; bottom: 14px; }

/* ---------- Process : le fil se dessine réellement de gauche à droite ----------
   Historique : le tracé par stroke-dashoffset s'arrêtait avant la fin (longueur
   mesurée en unités SVG alors que le trait non-scaling est tireté en pixels écran,
   sur un viewBox étiré), puis un contournement opacity/scaleX faisait « bouger le
   fil en bloc ». Vérifié dans Chromium : getTotalLength() IGNORE pathLength (renvoie
   ~911 même avec pathLength="1000"), donc la mesure JS de main.js ne peut pas être
   fiabilisée ainsi. Correction : le « stylo » (.postits__rail-pen, dans <mask>) n'a
   pas de non-scaling-stroke et porte pathLength="1000" ; sa longueur de tiret est
   fixée ici à 1000 (= tout le chemin, à toute échelle) en écrasant l'inline du JS.
   Le mécanisme générique .draw (is-visible posé par main.js, transition CSS) fait le
   tracé. Le trait visible (.postits__rail-line) reste statique et pointillé, révélé
   par le stylo. Le SVG lui-même n'a ni clip-path ni opacité nulle : IntersectionObserver
   le voit toujours (bug connu évité). */
.postits__rail .postits__rail-pen {
  stroke: #fff; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000 !important; stroke-dashoffset: 1000 !important;
  /* plus lent et plus régulier que l'ease générique : lecture « stylo qui trace » */
  transition: stroke-dashoffset 1.8s cubic-bezier(.4, .1, .3, 1);
}
.postits__rail.is-visible .postits__rail-pen { stroke-dashoffset: 0 !important; }
.postits__rail:not(.is-visible) .postits__rail-pen { transition-duration: .5s; }   /* remontée : s'efface vite */
/* le trait visible garde son pointillé (le JS pose un dasharray inline = longueur, on le neutralise) */
.postits__rail .postits__rail-line { stroke-dasharray: 8 8 !important; stroke-dashoffset: 0 !important; transition: none; }
/* points : pas de tracé en trait, un fondu + léger zoom, décalés pour suivre le stylo */
.postits__rail circle {
  stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
  opacity: 0; transform: scale(.35);
  transition: opacity .4s var(--ease), transform .55s cubic-bezier(.34, 1.5, .64, 1);
}
.postits__rail.is-visible circle { opacity: 1; transform: scale(1); }
.postits__rail.is-visible circle:nth-of-type(1) { transition-delay: .02s; }
.postits__rail.is-visible circle:nth-of-type(2) { transition-delay: .45s; }
.postits__rail.is-visible circle:nth-of-type(3) { transition-delay: .8s; }
.postits__rail.is-visible circle:nth-of-type(4) { transition-delay: 1.3s; }
.postits__rail:not(.is-visible) circle { transition-delay: 0s; transition-duration: .3s; }

/* ---------- Dossiers : plus aucun angle vif résiduel ---------- */
.folder { margin-top: 36px; }
.hero-sub__photo img, .lever-detail__media .lever__media, .calendly-embed, .method-v4__photo .folder__body img, .about-v4 .folder__body img { border-top-left-radius: 14px; }
.folder--cut .folder__body { clip-path: none; border-top-right-radius: var(--r-lg); }
.folder--cut .folder__body::before { display: none; }
@media (max-width: 640px) { .folder__tab { min-width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .postits__rail .postits__rail-pen { stroke-dashoffset: 0 !important; transition: none; }   /* fil dessiné d'emblée, comme les autres .draw */
  .postits__rail circle { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   PASSE 6 : Jonctions entre sections, navbar verre, propagation
   du système bulle/dossier aux sous-pages (sept. 2026)
   ========================================================= */

/* ---------- Jonctions entre sections : feuille posée ----------
   Chaque section marquée .seam remonte légèrement sur la précédente
   avec deux coins arrondis et une ombre portée très douce : plus de
   ligne droite entre deux fonds. Le contenu ne bouge pas (le padding
   haut compense le chevauchement). Réf. de motif : sections empilées
   façon « sheets » (Lemon Squeezy, Cocolabs), cohérent avec les
   conteneurs arrondis déjà partout sur le site. */
:root { --seam-r: clamp(26px, 3.4vw, 48px); }
.seam {
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--seam-r));
  border-top-left-radius: var(--seam-r);
  border-top-right-radius: var(--seam-r);
  box-shadow: 0 -18px 40px -12px rgba(58,18,79,0.12);
}
/* Même formule pour toutes les sections .seam (haut ET bas) : espace homogène
   partout, la bonification --seam-r compense exactement le chevauchement visuel
   de la jonction, des deux côtés. */
.section.seam { padding-top: calc(clamp(70px, 10vw, 130px) + var(--seam-r)); padding-bottom: calc(clamp(70px, 10vw, 130px) + var(--seam-r)); }
.section--tight.seam { padding-top: calc(clamp(48px, 6vw, 80px) + var(--seam-r)); padding-bottom: calc(clamp(48px, 6vw, 80px) + var(--seam-r)); }
.footer.seam {
  position: relative; z-index: 1;
  background: var(--violet-deep);
  margin-top: calc(-1 * var(--seam-r));
  border-radius: var(--seam-r) var(--seam-r) 0 0;
  padding-top: calc(clamp(50px, 7vw, 80px) + var(--seam-r));
  /* évite le liseré clair qui peut apparaître au coin arrondi sur Safari
     (bug connu : border-radius + overflow:hidden + box-shadow sur un
     élément composé en layer GPU) */
  -webkit-mask-image: -webkit-radial-gradient(circle, #fff, #000);
}
/* les heros des sous-pages gardent leur photo dégagée sous le chevauchement */
.hero-sub { padding-bottom: calc(clamp(44px, 5vw, 76px) + var(--seam-r) * 0.6); }
.hero-sub--compact { padding-bottom: calc(clamp(24px, 3vw, 40px) + var(--seam-r)); }
/* sections avec padding haut réduit en inline (sous-pages) */
.section.seam.seam--short { padding-top: calc(clamp(28px, 4vw, 52px) + var(--seam-r)); }

/* Forme qui déborde d'une section à l'autre : posée à cheval sur la jonction,
   au-dessus des deux sections (hors de leur overflow: hidden). */
.seam-deco { position: relative; height: 0; z-index: 2; pointer-events: none; }
.seam-deco > .shape { position: absolute; }
.seam-deco > .shape--sun { top: calc(-1 * var(--seam-r) - 60px); }
.seam-deco > .shape--star { top: calc(-1 * var(--seam-r) - 32px); }
@media (max-width: 620px) {
  .seam-deco > .shape--sun { top: calc(-1 * var(--seam-r) - 35px); }
}

/* ---------- Navbar : verre plus marqué, condensation au scroll ----------
   Au chargement : barre un peu plus haute et translucide (verre + reflet).
   Au scroll : elle se resserre (52 → 46 px), devient plus opaque et son
   ombre se renforce, pour rester lisible sur les fonds colorés. */
.nav { align-items: flex-start; }
.nav__inner,
.nav.is-scrolled .nav__inner {
  isolation: isolate;
  height: 52px !important;
  padding: 7px 9px 7px 20px !important;
  background: rgba(255, 253, 252, 0.70) !important;
  -webkit-backdrop-filter: saturate(170%) blur(18px) !important;
          backdrop-filter: saturate(170%) blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 0 rgba(58,18,79,0.05),
    0 14px 36px rgba(58,18,79,0.10) !important;
  transition: height .45s var(--ease), padding .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
/* reflet : léger dégradé blanc en haut + halo violet dans l'angle du logo */
.nav__inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(120% 160% at 0% 0%, rgba(179,115,252,0.16), transparent 55%);
}
.nav.is-scrolled .nav__inner {
  height: 46px !important;
  padding: 5px 7px 5px 18px !important;
  background: rgba(255, 253, 252, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 1px 0 rgba(58,18,79,0.07),
    0 10px 26px rgba(58,18,79,0.15) !important;
}
.nav__logo { position: relative; display: inline-flex; align-items: center; transition: transform .35s var(--ease); }
.nav__logo:hover { transform: translateY(-1px); }
/* Pilule magnétique : une seule pilule glisse d'un lien à l'autre (au lieu d'un fond par lien) */
.nav__pill {
  display: block; height: 30px;
  background: var(--violet-soft);
  box-shadow: inset 0 0 0 1px rgba(166,107,255,0.16);
}
.nav__links.has-pill a:hover,
.nav__links.has-pill a.is-active { background: transparent; }
.nav__links a.is-active { color: var(--violet-deep); }
/* CTA : ombre corail un peu plus présente sur le verre */
.cta-bubble .btn { box-shadow: 0 8px 20px rgba(255,107,44,0.26); }
.cta-bubble .btn:hover { box-shadow: 0 12px 26px rgba(255,107,44,0.34); }

/* Menu mobile : panneau arrondi qui descend sous la pilule, liens en cascade */
@media (max-width: 760px) {
  .nav__inner,
  .nav.is-scrolled .nav__inner {
    width: calc(100vw - 2 * var(--frame-w) - 24px) !important;
    height: 48px !important;
    padding: 6px 10px 6px 16px !important;
  }
  .mobile-menu {
    inset: auto;
    top: calc(var(--frame-w) + 66px);
    left: calc(var(--frame-w) + 12px);
    right: calc(var(--frame-w) + 12px);
    max-height: calc(100dvh - var(--frame-w) * 2 - 80px);
    overflow: auto;
    padding: 12px 18px 18px;
    gap: 0;
    border-radius: 26px;
    background: rgba(255, 253, 252, 0.94);
    -webkit-backdrop-filter: saturate(170%) blur(18px);
            backdrop-filter: saturate(170%) blur(18px);
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 24px 60px rgba(58,18,79,0.22);
    transform-origin: top center;
    transform: translateY(-12px) scale(0.97);
    opacity: 0; visibility: hidden;
    transition: transform .4s var(--ease), opacity .3s var(--ease), visibility 0s .4s;
  }
  .mobile-menu.is-open {
    transform: none; opacity: 1; visibility: visible;
    transition: transform .5s var(--ease), opacity .3s var(--ease), visibility 0s;
  }
  .mobile-menu a {
    font-size: 1.3rem; padding: 14px 4px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .4s var(--ease), transform .5s var(--ease);
  }
  .mobile-menu a.is-active { color: var(--violet-deep); }
  .mobile-menu a.is-active::before { content: "✦ "; color: var(--coral); font-size: .8em; }
  .mobile-menu .btn { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
  .mobile-menu.is-open a, .mobile-menu.is-open .btn { opacity: 1; transform: none; }
  .mobile-menu.is-open a:nth-child(1) { transition-delay: .05s; }
  .mobile-menu.is-open a:nth-child(2) { transition-delay: .10s; }
  .mobile-menu.is-open a:nth-child(3) { transition-delay: .15s; }
  .mobile-menu.is-open a:nth-child(4) { transition-delay: .20s; }
  .mobile-menu.is-open a:nth-child(5) { transition-delay: .25s; }
  .mobile-menu.is-open .btn { transition-delay: .32s; }
}

/* ---------- Sous-pages : même système bulle / dossier que l'accueil ----------
   Dossier = leviers et réalisations uniquement. Photo du hero, Waa/Pluka,
   agenda de contact et CTA final passent en bulle (comme sur l'accueil). */
.hero-sub__photo .photo-card { aspect-ratio: 4 / 5; }
.hero-sub__photo .photo-card img { height: 100%; object-position: center 22%; border-radius: 0 !important; }
.hero-sub__photo .photo-card__label { left: 14px; bottom: 14px; }

/* Waa → Pluka en bulles reliées par la flèche */
.flow-v4 .bubble { padding: clamp(26px, 3.4vw, 42px); gap: 8px; }
.flow-v4 .bubble::after { font-size: 7rem; right: 26px; top: -10px; bottom: auto; opacity: .12; }
.flow-v4 .bubble .bubble__kicker { margin-bottom: 8px; }
.flow-v4 .bubble .method-card__sub2 { margin-top: 2px; }
.flow-v4 .bubble > p { margin-top: 6px; font-size: .98rem; }
.bubble__list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.bubble__list li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; line-height: 1.45; color: inherit; }
.bubble__list li::before {
  content: ""; flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255,255,255,0.20); display: grid; place-items: center; font-size: .82rem; margin-top: -1px;
}
.bubble--soft .bubble__list li::before, .bubble--paper .bubble__list li::before { background: var(--violet-soft); color: var(--violet-deep); }

/* Bulle qui accueille un embed (agenda Calendly) */
.bubble--embed { padding: 10px; gap: 0; }
.bubble--embed::after { display: none; }
.bubble--embed:hover { transform: none; }
.bubble__head { display: flex; align-items: center; gap: 10px; padding: 9px 12px 13px; }
.bubble__head .bubble__kicker { opacity: 1; }
.bubble__head::before { content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat; color: var(--coral-soft); font-size: .8rem; }
.bubble--embed .calendly-embed { border-radius: 22px; }


/* =========================================================
   PASSE 7 : Retour cliente (sept. 2026)
   - constat : retour aux cartes, une icône dessinée par frein
   - méthode : flèche corail retirée, lien pointillé discret,
     bulles resserrées contre la photo
   - marquee : logos couleur, bande plus basse, défilement lent
   - à propos : typo harmonisée ; version complète déplacée sur
     la page « À propos & contact », teaser sur l'accueil
   - footer : hiérarchie + filigrane, balisage partagé
   - grain sur davantage de sections (.tx-grain, sur ::after
     pour se cumuler avec les textures .tx::before)
   - reveals : rejoués à la remontée, titres mot à mot
   - aucun jaune (soleil recoloré en violet)
   ========================================================= */

/* ---------- Grain cumulable ---------- */
.tx-grain { position: relative; }
.tx-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px; opacity: .06; mix-blend-mode: multiply;
}
.tx-grain > .container { position: relative; z-index: 1; }
.band--ink.tx-grain::after, .cta-band.tx-grain::after, .footer.tx-grain::after { mix-blend-mode: overlay; opacity: .10; }
.hero--studio.tx-grain::after, .hero-sub.tx-grain::after, .marquee.tx-grain::after { opacity: .05; }

/* ---------- Reveals : aller-retour sans à-coup ----------
   À la descente les délais (data-delay, stagger, souligné) jouent ;
   à la remontée tout se masque d'un bloc, sans délai, plus vite. */
.reveal:not(.is-visible)[data-delay] { transition-delay: 0s; }
.reveal:not(.is-visible) { transition-duration: .45s; }
.reveal[data-stagger]:not(.is-visible) > * { transition-delay: 0s; transition-duration: .35s; }
.hl:not(.is-visible) .hl__svg path { transition-delay: 0s; }

/* Titres mot à mot : chaque mot monte, se dévoile et se nettoie (flou → net) en cascade.
   Pas d'overflow:hidden : le souligné .hl dépasse de la boîte du mot. */
.reveal-words .w {
  display: inline-block;
  opacity: 0; transform: translateY(.55em) rotate(1.5deg); filter: blur(7px);
  transform-origin: left bottom;
  transition: opacity .6s var(--ease), transform .85s var(--ease), filter .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 42ms);
  will-change: transform, opacity, filter;
}
.reveal-words.is-visible .w { opacity: 1; transform: none; filter: none; }
.reveal-words:not(.is-visible) .w { transition-delay: 0s; transition-duration: .3s; }
/* un titre déjà .reveal ne cumule pas le flou de bloc et le flou de mots */
.reveal-words.reveal { filter: none; transform: translateY(10px); }
.reveal-words.reveal.is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-words .w { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ---------- Constat v6 : 4 cartes, une icône par frein ---------- */
.constat-panel--v6 { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 4vw, 60px); }
.constat-panel--v6 .constat-panel__copy { justify-content: center; gap: 22px; max-width: 560px; }
.constat-panel--v6 .constat-panel__copy h2 { font-size: clamp(2rem, 3vw, 2.7rem); }
.constat-panel--v6 .constat-panel__copy .lead { font-size: 1rem; }
.arrow-link--light { color: var(--violet-bright); }
/* Accueil : même taille de sous-titre (paragraphe sous le h2) que dans "Le constat",
   appliquée aux autres sections eyebrow + h2 + paragraphe de la page. */
#methode .section-head .lead, .who__head .lead, #faq .section-head .lead { font-size: 1rem; }
.arrow-link--light:hover { color: #fff; }
.constat-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.constat-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  min-height: 248px; padding: clamp(20px, 2vw, 26px);
  border-radius: clamp(22px, 2.4vw, 30px);
  background: var(--paper-2); color: var(--ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.constat-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24); }
.constat-card:nth-child(2) { background: var(--violet-soft); }
.constat-card:nth-child(3) { background: var(--coral-soft); }
.constat-card:nth-child(4) { background: var(--lavender-bg); }
/* (les numéros 01-04 en haut à droite des cartes ont été retirés sur retour cliente) */
.constat-card__ic {
  width: 50px; height: 50px; border-radius: 16px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--coral); color: #fff;
  box-shadow: 0 8px 18px rgba(255, 107, 44, 0.28);
  transition: transform .45s var(--ease);
}
.constat-card:nth-child(2) .constat-card__ic { background: var(--violet); box-shadow: 0 8px 18px rgba(166, 107, 255, 0.30); }
.constat-card:nth-child(3) .constat-card__ic { background: var(--ink); box-shadow: 0 8px 18px rgba(48, 20, 63, 0.28); }
.constat-card:nth-child(4) .constat-card__ic { background: var(--violet-deep); box-shadow: 0 8px 18px rgba(58, 18, 79, 0.28); }
.constat-card__ic svg { width: 26px; height: 26px; }
.constat-card:hover .constat-card__ic { transform: translateY(-3px) rotate(-7deg); }
.constat-card h3 { margin-top: 4px; max-width: 18ch; font-size: 1.08rem; line-height: 1.18; color: var(--ink); }
.constat-card p { margin: 0; font-size: .9rem; line-height: 1.48; color: var(--ink-soft); }
@media (max-width: 1080px) { .constat-panel--v6 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .constat-cards { grid-template-columns: 1fr; } .constat-card { min-height: 0; } }

/* ---------- Méthode : bulles plus étroites, collées à la photo, lien pointillé ---------- */
.method-v4 { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 20px; max-width: 1180px; }
.method-v4__stack { gap: 10px; }
.method-v4__stack .bubble { padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.8vw, 34px); }
.method-v4__stack .bubble::after { font-size: 6rem; }
.method-v4__stack .method-card__big { font-size: clamp(2rem, 3vw, 2.6rem); }
/* Connecteur "pastille mouvement" : validé par la cliente le 07/09/2026 (proposition 4 sur 5,
   voir l'aperçu comparatif), flèches en violet. Remplace l'ancien lien pointillé + chevron corail. */
.method-v4__link, .flow-v4__link { position: relative; display: flex; align-items: center; justify-content: center; }
.method-v4__link.reveal, .flow-v4__link.reveal { opacity: 1; transform: none; }
.method-v4__link .link-pill, .flow-v4__link .link-pill {
  position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%;
  background: var(--paper-2); border: 1px solid var(--grey-150);
  box-shadow: 0 6px 16px rgba(58, 18, 79, .14);
  display: flex; align-items: center; justify-content: center;
  color: var(--violet-pop);
  opacity: 0; transform: scale(.5);
  transition: opacity .4s var(--ease) .5s, transform .5s var(--ease) .5s;
}
.method-v4__link .link-pill svg, .flow-v4__link .link-pill svg { width: 18px; height: 18px; }

@keyframes linkPillBobY { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1) translateY(-4px); } }
@keyframes linkPillBobX { 0%, 100% { transform: scale(1) translateX(0); } 50% { transform: scale(1) translateX(4px); } }

.method-v4__link { height: 56px; }
.method-v4__link::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 50%;
  border-left: 2px dashed rgba(58, 18, 79, 0.3);
  transform-origin: top; transform: scaleY(0);
  transition: transform .7s var(--ease) .15s;
}
.method-v4__link.is-visible::before { transform: scaleY(1); }
.method-v4__link.is-visible .link-pill { opacity: 1; transform: scale(1); animation: linkPillBobY 2.8s ease-in-out .9s infinite; }

/* Expertise : même pastille, à l'horizontale entre les deux bulles (flèches tournées vers la droite) */
.flow-v4 { grid-template-columns: 1fr auto 1fr; gap: clamp(14px, 2vw, 28px); align-items: stretch; }
.flow-v4__link { width: clamp(48px, 6vw, 84px); height: 48px; align-self: center; }
.flow-v4__link::before {
  content: ""; position: absolute; left: 2px; right: 2px; top: 50%;
  border-top: 2px dashed rgba(58, 18, 79, 0.3);
  transform-origin: left; transform: scaleX(0);
  transition: transform .7s var(--ease) .15s;
}
.flow-v4__link .link-pill svg { transform: rotate(-90deg); }
.flow-v4__link.is-visible::before { transform: scaleX(1); }
.flow-v4__link.is-visible .link-pill { opacity: 1; transform: scale(1); animation: linkPillBobX 2.8s ease-in-out .9s infinite; }
@media (max-width: 980px) {
  .flow-v4 { grid-template-columns: 1fr; gap: 16px; }
  .flow-v4__link { width: 100%; height: 56px; }
  .flow-v4__link::before { left: 50%; right: auto; top: 2px; bottom: 2px; border-top: 0; border-left: 2px dashed rgba(58, 18, 79, 0.3); transform-origin: top; transform: scaleY(0); }
  .flow-v4__link.is-visible::before { transform: scaleY(1); }
  .flow-v4__link .link-pill svg { transform: rotate(0deg); }
  .flow-v4__link.is-visible .link-pill { animation: linkPillBobY 2.8s ease-in-out .9s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .method-v4__link.is-visible .link-pill, .flow-v4__link.is-visible .link-pill { animation: none; }
}

/* ---------- À propos : une seule échelle typo pour les capsules et les deux chiffres ---------- */
.about-v5 .bubble__kicker { font-size: .72rem; font-weight: 600; letter-spacing: normal; opacity: .8; }
.about-v5 .bubble--mini { padding: 18px 20px; gap: 10px; min-height: 0; }
.about-v5 .bubble--mini strong { font-size: 1.02rem; font-weight: 600; line-height: 1.25; padding-right: 34px; }
.about-v5 .about__quote { font-size: clamp(1.05rem, 1.45vw, 1.18rem); line-height: 1.6; margin-bottom: 14px; }
.about-v5 .about__sign { font-family: var(--font-body); font-weight: 500; font-size: .94rem; color: var(--grey-700); padding-left: 26px; }
.about-v5 .capsules { gap: 10px; margin-top: 26px; }
.about-v5 .capsules .sticker {
  --rot: -.8deg;
  font-size: .86rem; font-weight: 500; padding: 10px 16px;
  background: var(--paper-2); color: var(--ink);
  border-color: rgba(58, 18, 79, 0.10); box-shadow: 0 1px 0 rgba(58, 18, 79, 0.04), 0 6px 18px rgba(58, 18, 79, 0.08);
}
.about-v5 .capsules .sticker:nth-child(2n) { --rot: .8deg; background: var(--violet-soft); color: var(--violet-deep); }
.about-v5 .capsules .sticker:nth-child(3n) { --rot: -.4deg; }
.about-v5 .capsules .sticker:nth-child(4n) { --rot: .6deg; }
.about-v5__cta { margin-top: 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.about-v5--teaser .about-v5__copy h2 { max-width: 18ch; }   /* titre sur 3 lignes (accueil) */

/* ---------- Page « À propos & contact » ---------- */
.hero-sub__actions + .contact-stickers { margin-top: 22px; }
.contact-v4__side .postits { gap: 20px; }

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; color: var(--grey-300); padding-bottom: 34px; }
.footer > .container { position: relative; z-index: 2; }
.footer__wm {
  position: absolute; left: 50%; bottom: -4.2rem; z-index: 0; transform: translateX(-50%);
  width: clamp(38rem, 92vw, 95rem); height: clamp(7rem, 17vw, 18rem);
  opacity: .08; pointer-events: none; user-select: none;
  background: url(../assets/logos/waapluka-wordmark.svg) center / contain no-repeat;
  font-size: 0; color: transparent;
}
.footer__grid { grid-template-columns: 1.35fr .8fr .8fr 1.15fr; gap: clamp(28px, 4vw, 56px); margin-bottom: clamp(40px, 5vw, 64px); align-items: start; }
.footer__logo { display: inline-block; margin-bottom: 16px; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; letter-spacing: -.02em; line-height: 1; color: var(--violet); transition: transform .35s var(--ease); }
.footer__logo span { color: #fff; }
.footer__logo:hover { transform: translateY(-2px); }
.footer__brand p { color: rgba(252, 251, 249, 0.70); max-width: 34ch; font-size: .95rem; line-height: 1.55; }
.footer__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 20px; }
.footer__contact a, .footer__contact span {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 11px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff; font-family: var(--font-display); font-weight: 500; font-size: .9rem; line-height: 1;
  transition: background .25s, border-color .25s, transform .3s var(--ease);
}
.footer__contact a:hover { background: rgba(166, 107, 255, 0.22); border-color: rgba(166, 107, 255, 0.45); transform: translateY(-2px); color: #fff; }
.footer__contact span { color: rgba(252, 251, 249, 0.72); }
.footer__contact svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--violet-bright); }
.footer h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: .76rem; letter-spacing: .14em; color: #fff; }
.footer h4::before { content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat; color: var(--coral); font-size: .8em; }
.footer__col a { position: relative; width: fit-content; padding-block: 7px; font-size: .95rem; color: rgba(252, 251, 249, 0.78); }
.footer__col a::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 1px; background: var(--violet-bright); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.footer__col a:hover { color: #fff; }
.footer__col a:hover::after { transform: scaleX(1); }
.footer__cta {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: clamp(22px, 2.4vw, 30px); border-radius: 26px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__cta::after { content: ""; display: inline-block; width: .8em; height: .8em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat; position: absolute; right: 14px; bottom: 0; font-size: 4.2rem; line-height: 1; color: var(--violet); opacity: .35; pointer-events: none; }
.footer__cta > * { position: relative; z-index: 1; }
.footer__cta-kicker { font-family: var(--font-display); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-bright); }
.footer__cta strong { max-width: 24ch; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.25; color: #fff; }
.footer__cta .btn { margin-top: 6px; }
.footer__cta-note { font-size: .82rem; color: rgba(252, 251, 249, 0.60); }
.footer__bottom { align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.10); padding-top: 22px; font-size: .84rem; color: rgba(252, 251, 249, 0.55); }
.footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__bottom a { color: rgba(252, 251, 249, 0.70); transition: color .25s; }
.footer__bottom a:hover { color: var(--violet-bright); }
@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand, .footer__cta { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* =========================================================
   PASSE 8 : Retour cliente (sept. 2026)
   - fil du process : vrai tracé gauche → droite (voir bloc Process plus haut)
   - fonds gris #F1ECE4 remplacés par le beige du hero (.band--grey → --paper)
   - ombres portées légères sur cartes / dossiers / bulles (profondeur, pas d'effet)
   - carte « TPE & PME » : violet clair au lieu du beige-gris
   - jonctions en vague sur trois bords de l'accueil (.seam-wave)
   - logo Freecovery en couleur officielle (seule exception au « zéro jaune »)
   ========================================================= */

/* ---------- Ombres : une couche proche + une couche diffuse ----------
   Les ombres existantes étaient très diffuses (grand flou, faible opacité) et
   lisaient « à plat ». On ajoute une ombre de contact courte (1 à 3 px) qui
   dessine le bord, sans changer la douceur générale. */
:root {
  --shadow-card:
    0 1px 1px rgba(58, 18, 79, 0.05),
    0 3px 8px rgba(58, 18, 79, 0.07),
    0 14px 30px rgba(58, 18, 79, 0.09);
  --shadow-card-hover:
    0 1px 1px rgba(58, 18, 79, 0.05),
    0 6px 14px rgba(58, 18, 79, 0.09),
    0 24px 46px rgba(58, 18, 79, 0.13);
}
/* bulles (méthode, à propos, CTA, contact) */
.bubble { box-shadow: var(--shadow-card); }
.bubble:hover { box-shadow: var(--shadow-card-hover); }
.bubble--violet { box-shadow: 0 1px 1px rgba(58,18,79,0.06), 0 3px 8px rgba(58,18,79,0.08), 0 14px 30px rgba(166,107,255,0.28); }
.bubble--coral  { box-shadow: 0 1px 1px rgba(58,18,79,0.06), 0 3px 8px rgba(58,18,79,0.08), 0 14px 30px rgba(255,107,44,0.24); }
.bubble--ink    { box-shadow: 0 1px 1px rgba(58,18,79,0.08), 0 3px 8px rgba(58,18,79,0.10), 0 14px 30px rgba(48,20,63,0.26); }
.bubble--violet:hover { box-shadow: 0 1px 1px rgba(58,18,79,0.06), 0 6px 14px rgba(58,18,79,0.10), 0 24px 46px rgba(166,107,255,0.34); }
.bubble--coral:hover  { box-shadow: 0 1px 1px rgba(58,18,79,0.06), 0 6px 14px rgba(58,18,79,0.10), 0 24px 46px rgba(255,107,44,0.30); }
.bubble--ink:hover    { box-shadow: 0 1px 1px rgba(58,18,79,0.08), 0 6px 14px rgba(58,18,79,0.12), 0 24px 46px rgba(48,20,63,0.32); }
/* hero : mini-bulles et carte photo */
.hero-mini { box-shadow: var(--shadow-card); }
.hero-photo-card { box-shadow: 0 1px 1px rgba(58,18,79,0.06), 0 4px 10px rgba(58,18,79,0.08), 0 18px 36px rgba(58,18,79,0.12); }
/* cartes photo (méthode, à propos) */
.photo-card { box-shadow: 0 1px 1px rgba(58,18,79,0.06), 0 4px 10px rgba(58,18,79,0.08), 0 18px 40px rgba(58,18,79,0.14); }
/* Pour qui */
.who-card { box-shadow: var(--shadow-card); }
.who-card:hover { box-shadow: var(--shadow-card-hover); }
/* constat : cartes claires sur panneau encre, l'ombre de contact est plus sombre */
.constat-card { box-shadow: 0 1px 2px rgba(0,0,0,0.20), 0 4px 10px rgba(0,0,0,0.16), 0 14px 30px rgba(0,0,0,0.22); }
.constat-card:hover { box-shadow: 0 1px 2px rgba(0,0,0,0.20), 0 8px 16px rgba(0,0,0,0.18), 0 22px 44px rgba(0,0,0,0.28); }
/* post-it du process */
.postit { box-shadow: 0 1px 0 rgba(58,18,79,0.10), 0 3px 8px rgba(58,18,79,0.07), 0 14px 30px rgba(58,18,79,0.12); }
.postit:hover { box-shadow: 0 1px 0 rgba(58,18,79,0.10), 0 6px 14px rgba(58,18,79,0.09), 0 24px 46px rgba(58,18,79,0.18); }
/* dossiers : languette + corps, l'ombre suit la forme (drop-shadow) */
.folder {
  filter: drop-shadow(0 1px 0 rgba(58,18,79,0.10)) drop-shadow(0 3px 6px rgba(58,18,79,0.07)) drop-shadow(0 14px 28px rgba(58,18,79,0.09));
}
.folder:hover {
  filter: drop-shadow(0 1px 0 rgba(58,18,79,0.10)) drop-shadow(0 5px 10px rgba(58,18,79,0.08)) drop-shadow(0 26px 44px rgba(58,18,79,0.16));
}

/* ---------- Jonctions en vague (.seam--wave) : RETIRÉES ----------
   Essayées en passe 8 sur trois bords de l'accueil, la cliente ne les a pas
   retenues à l'usage. Toutes les sections sont revenues au .seam standard
   (coins arrondis + ombre douce), qui compense déjà le chevauchement par son
   padding haut : rien d'autre à ajuster. */

/* =========================================================
   PASSE 9 : Page « À propos & contact » (sept. 2026)
   - l'agenda passe avant la présentation de Tessa
   - nouveau formulaire de qualification : besoins en capsules à cocher
     (multi), situation en capsules radio (unique), coordonnées, message.
     Sans backend : le JS ouvre la messagerie avec un mail pré-rempli
     (voir main.js, bloc « Formulaire de qualification »).
   Réf. de motif : sélecteurs en pilules des formulaires de brief
   Typeform / Tally (options cliquables, état actif plein), repris ici
   avec les stickers déjà en place sur le site.
   ========================================================= */

/* ---------- Mise en page : copie à gauche (collante), formulaire en bulle à droite ---------- */
.qualif { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vw, 34px); align-items: start; max-width: 860px; margin-inline: auto; }   /* titre au-dessus du formulaire */
.qualif__side { position: static; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.qualif__side h2 { margin-block: 12px 4px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); max-width: none; }
.qualif__side .lead { font-size: 1.02rem; max-width: 60ch; margin-inline: auto; }
.qualif__side .sticker-row { margin-top: 4px; }

/* la bulle qui contient le formulaire : pas de survol flottant ni d'étoile en fond */
.qualif__form { padding: clamp(24px, 3vw, 40px); gap: 0; }
.qualif__form::after { display: none; }
.qualif__form:hover { transform: none; box-shadow: var(--shadow-card); }

/* ---------- Groupes de questions ---------- */
.qualif__group { border: 0; padding: 0; margin: 0 0 clamp(24px, 3vw, 32px); min-width: 0; }
.qualif__group:last-of-type { margin-bottom: 0; }
.qualif__legend { display: block; padding: 0; margin-bottom: 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.25; color: var(--ink); }
.qualif__hint { margin: 0 0 12px; font-size: .84rem; color: var(--grey-500); }

/* ---------- Capsules à cocher / radio (dérivées de .sticker) ---------- */
.choices { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.choice {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px 10px 12px; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--ink);
  border: 1px solid rgba(58,18,79,0.14);
  font-family: var(--font-display); font-weight: 500; font-size: .9rem; line-height: 1;
  cursor: pointer; user-select: none;
  box-shadow: 0 1px 0 rgba(58,18,79,0.04), 0 4px 12px rgba(58,18,79,0.06);
  transition: transform .3s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .3s var(--ease);
}
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.choice:hover { border-color: var(--violet); transform: translateY(-2px); }
.choice:active { transform: translateY(0) scale(.98); }
/* la coche / le point */
.choice__mark {
  width: 18px; height: 18px; flex-shrink: 0;
  display: grid; place-items: center;
  background: #fff; border: 1.5px solid rgba(58,18,79,0.28);
  transition: background .25s, border-color .25s;
}
.choice--check .choice__mark { border-radius: 6px; }
.choice--radio .choice__mark { border-radius: 50%; }
.choice__mark svg { width: 11px; height: 11px; color: var(--violet-deep); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.choice--radio .choice__mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--violet-deep); transform: scale(0); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
/* état actif : capsule pleine violette (classe posée par le JS, :has() en renfort) */
.choice.is-checked,
.choice:has(input:checked) {
  background: var(--violet); color: #fff; border-color: transparent;
  box-shadow: 0 1px 1px rgba(58,18,79,0.06), 0 8px 20px rgba(166,107,255,0.30);
}
.choice.is-checked .choice__mark,
.choice:has(input:checked) .choice__mark { background: #fff; border-color: #fff; }
.choice.is-checked .choice__mark svg,
.choice:has(input:checked) .choice__mark svg { opacity: 1; transform: scale(1); }
.choice.is-checked .choice__mark::after,
.choice:has(input:checked) .choice__mark::after { transform: scale(1); }
/* clavier : le focus de l'input caché remonte sur la capsule */
.choice:has(input:focus-visible) { outline: 3px solid var(--violet); outline-offset: 3px; }

/* ---------- Champs texte ---------- */
.qualif__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-weight: 500; font-size: .9rem; color: var(--ink); }
.field label small { margin-left: 5px; font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--grey-500); }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: .98rem; color: var(--ink);
  background: var(--paper); border: 1px solid rgba(58,18,79,0.14); border-radius: 16px;
  padding: 13px 16px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--grey-300); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--violet); background: #fff;
  box-shadow: 0 0 0 4px rgba(166,107,255,0.18);
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.5; }

/* ---------- Envoi + retour visuel ---------- */
.qualif__submit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: clamp(22px, 2.8vw, 30px); }
.qualif__submit > span { max-width: 34ch; font-size: .86rem; line-height: 1.4; color: var(--grey-500); }
.qualif__status {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 16px 0 0; padding: 14px 16px; border-radius: 18px;
  background: var(--violet-soft); color: var(--violet-deep);
  font-size: .92rem; line-height: 1.45;
  animation: faq-in .45s var(--ease);
}
.qualif__status[hidden] { display: none; }
.qualif__status svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.qualif__status a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .qualif { grid-template-columns: 1fr; }
  .qualif__side { position: static; }
}
@media (max-width: 560px) {
  .qualif__fields { grid-template-columns: 1fr; }
  .choice { font-size: .86rem; }
}

/* =========================================================
   PASSE 10 : Mobile (sept. 2026)
   Même balisage que le desktop, tout se joue en media queries :
   - débordement horizontal verrouillé (html/body en overflow clip,
     grilles de Contact en min-width 0, agenda Calendly sans min-width)
   - navigation mobile : plus de menu déroulant. La pilule du haut ne garde
     que le logo ; .nav__links devient une barre d'onglets flottante en bas
     (icône + libellé, onglet courant dans un rond violet) et le bouton
     .nav__cta une pilule corail séparée à droite. Réf. de motif : barres
     d'onglets iOS (Human Interface Guidelines, « Tab bars ») et barre
     flottante « pill » de Framer / Airbnb mobile, avec CTA détaché.
   - hero de l'accueil réordonné en mobile (display: contents + order),
     texte inchangé : accroche, photo, promesse, boutons, Waa/Pluka, leviers
   - méthode en une colonne (une règle plus bas dans le fichier annulait
     l'empilement prévu), fil du process en version verticale CSS
   - zones de tap 44 px mini (onglets, capsules du formulaire, filtres)
   - reveals allégés sur petit écran (pas de flou par mot)
   ========================================================= */

/* ---------- Débordement horizontal : verrou global ----------
   `overflow-x: clip` ne crée pas de conteneur de défilement (le sticky et
   les positions fixes restent intacts), contrairement à `hidden` sur html.
   iOS ignorait le `hidden` posé sur body seul : un élément qui dépassait
   (formes décoratives, blocs en attente de reveal translatés de 36 px,
   agenda en min-width 320 px) rendait toute la page « coupée à droite ». */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
.contact-v4 > *, .qualif > *, .about-v5 > *, .hero-sub__grid > *, .work-split > *, .faq-layout > * { min-width: 0; }
.calendly-inline-widget { min-width: 0 !important; }

/* ---------- Tablette et mobile (≤ 760 px) ---------- */
@media (max-width: 760px) {

  /* Navigation : pilule du haut = logo seul, centrée */
  .nav__inner,
  .nav.is-scrolled .nav__inner {
    width: -moz-fit-content !important; width: fit-content !important;
    height: 46px !important;
    padding: 6px 20px 6px 18px !important;
    gap: 0;
    background: rgba(255, 253, 252, 0.94) !important;
    /* pas de flou d'arrière-plan ici : il créerait un bloc conteneur pour les
       enfants en position fixe (la barre du bas) */
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  .nav__logo::after { display: none; }
  .nav__cta { display: contents; }

  /* Barre d'onglets flottante en bas d'écran */
  .nav__links, .nav__links.has-pill {
    display: flex;
    position: fixed;
    left: calc(var(--frame-w) + 8px);
    right: calc(var(--frame-w) + 8px + 92px + 8px);
    bottom: calc(var(--frame-w) + 8px + env(safe-area-inset-bottom, 0px));
    height: 62px;
    align-items: center; justify-content: space-between;
    gap: 0; padding: 4px;
    background: rgba(255, 253, 252, 0.96);
    border: 1px solid rgba(58, 18, 79, 0.08);
    border-radius: var(--r-pill);
    box-shadow: 0 1px 0 rgba(58,18,79,0.05), 0 4px 10px rgba(58,18,79,0.08), 0 16px 36px rgba(58,18,79,0.18);
  }
  .nav__links .nav__pill { display: none !important; }
  .nav__links a,
  .nav__links a:hover,
  .nav__links a.is-active,
  .nav__links.has-pill a:hover,
  .nav__links.has-pill a.is-active {
    position: relative; z-index: 1;
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; height: 54px; padding: 0 2px;
    border-radius: var(--r-pill);
    background: transparent;
    font-family: var(--font-display); font-weight: 600; font-size: 0.62rem; letter-spacing: 0;
    line-height: 1; color: var(--grey-700); white-space: nowrap;
    transition: color .25s;
  }
  .nav__links a::before {
    content: ""; flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--tab-ic) center / 22px 22px no-repeat;
    transition: background-color .25s, transform .3s var(--ease);
  }
  /* onglet courant : rond violet, icône blanche (variante « rond de couleur » de la référence) */
  .nav__links a.is-active, .nav__links a.is-here,
  .nav__links.has-pill a.is-active { color: var(--violet-deep); }
  .nav__links a.is-active::before, .nav__links a.is-here::before {
    background-color: var(--violet);
    background-image: var(--tab-ic-on);
    box-shadow: 0 6px 14px rgba(166, 107, 255, 0.35);
  }
  .nav__links a:active::before { transform: scale(.92); }
  /* libellé court quand l'entrée est trop longue pour un onglet (attribut data-short sur le lien) */
  .nav__links a[data-short] { font-size: 0 !important; }
  .nav__links a[data-short]::after { content: attr(data-short); display: block; position: static; width: auto; height: auto; background: none; font-size: 0.62rem; line-height: 1; }
  .nav__links a:nth-child(1) { --tab-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330143F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3C/svg%3E"); --tab-ic-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3C/svg%3E"); }
  .nav__links a:nth-child(2) { --tab-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330143F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='2'/%3E%3Crect x='14' y='3' width='7' height='7' rx='2'/%3E%3Crect x='3' y='14' width='7' height='7' rx='2'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2'/%3E%3C/svg%3E"); --tab-ic-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='2'/%3E%3Crect x='14' y='3' width='7' height='7' rx='2'/%3E%3Crect x='3' y='14' width='7' height='7' rx='2'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2'/%3E%3C/svg%3E"); }
  .nav__links a:nth-child(3) { --tab-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330143F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E"); --tab-ic-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E"); }
  .nav__links a:nth-child(4) { --tab-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330143F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); --tab-ic-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }

  /* CTA détaché : pilule corail à droite de la barre, avatar au-dessus d'un libellé court */
  .nav__cta .btn, .cta-bubble .btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    position: fixed; z-index: 1;
    right: calc(var(--frame-w) + 8px);
    bottom: calc(var(--frame-w) + 8px + env(safe-area-inset-bottom, 0px));
    width: 92px; height: 62px; min-height: 0;
    margin: 0; padding: 0 6px;
    border-radius: var(--r-pill);
    font-size: 0; line-height: 1;      /* le libellé long reste lu par les lecteurs d'écran, le court est affiché */
    box-shadow: 0 1px 0 rgba(58,18,79,0.05), 0 4px 10px rgba(255,107,44,0.18), 0 16px 36px rgba(255,107,44,0.30);
  }
  .cta-bubble { display: contents; }
  .cta-bubble__avatar, .cta-bubble .btn .cta-bubble__avatar {
    width: 26px; height: 26px; margin: 0;
    border-width: 1.5px;
  }
  .cta-bubble .btn::after {
    content: attr(data-short);
    font-family: var(--font-display); font-weight: 600; font-size: 0.62rem; line-height: 1; color: #fff;
    white-space: nowrap;
  }
  .cta-bubble .btn:hover { transform: none; }
  .cta-bubble .btn.is-pressed { transform: scale(.96) !important; }

  /* le bas de page garde de l'air derrière la barre */
  .footer { padding-bottom: calc(34px + 84px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- Hero accueil : ordre de lecture mobile ----------
     Les conteneurs intermédiaires disparaissent (display: contents), leurs
     enfants deviennent des cases de la grille et sont réordonnés :
     1 accroche, 2 titre, 3 photo (qui parle), 4 promesse, 5 boutons + preuve,
     6-7 Waa / Pluka, 8 les cinq leviers. Le texte n'est pas modifié. */
  .hero--studio { padding-top: calc(var(--nav-h) + 2px); padding-bottom: 44px; }
  .hero-studio {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    height: auto; padding: 0; border-radius: 0;
    background: transparent; box-shadow: none;
  }
  .hero-studio__copy, .hero-studio__message, .hero-studio__visual { display: contents; }
  .hero-studio__copy::after { display: none; }
  .hero-studio .eyebrow { grid-column: 1 / -1; order: 1; font-size: 0.72rem; line-height: 1.3; }
  .hero-studio h1 {
    grid-column: 1 / -1; order: 2;
    max-width: none; margin: 4px 0 6px;
    font-size: clamp(2rem, 9.4vw, 2.5rem); line-height: 1.02;
  }
  .hero-photo-card {
    grid-column: 1 / -1; order: 3;
    height: auto; min-height: 0; aspect-ratio: 7 / 4; margin-top: 6px;
    border-radius: 24px;
  }
  .hero-photo-card img { height: 100%; object-position: center 32%; }
  .hero-studio .hero__lead { grid-column: 1 / -1; order: 4; max-width: none; margin-top: 4px; font-size: 1rem; line-height: 1.5; }
  .hero-studio__conversion { grid-column: 1 / -1; order: 5; width: 100%; gap: 14px; margin-top: 4px; }
  .hero-studio .hero__actions { align-items: stretch; gap: 10px; }
  .hero-studio .hero__actions .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .hero-studio__proof { gap: 6px 0; }
  .hero-mini { margin: 0; width: auto; min-height: 96px; padding: 14px 14px 12px; border-radius: 20px; }
  .hero-mini--violet { order: 6; }
  .hero-mini--coral { order: 7; border-radius: 20px; }
  .hero-mini--soft { grid-column: 1 / -1; order: 8; min-height: 0; border-radius: 20px; }
  .hero-mini strong { font-size: 0.9rem; line-height: 1.2; margin-top: 8px; }
  .hero-mini--soft strong { font-size: 0.86rem; line-height: 1.35; }
  .hero-mini::after { font-size: 3rem; right: 12px; bottom: 6px; }

  /* ---------- Méthode : une seule colonne (la règle « passe 7 » remettait deux colonnes) ---------- */
  .method-v4 { grid-template-columns: 1fr; gap: 16px; }
  .method-v4__photo .photo-card { min-height: 0; max-height: none; aspect-ratio: 4 / 3.4; height: auto; }
  .method-v4__photo .photo-card img { object-position: center 24%; }
  .method-v4__stack { gap: 8px; }
  .method-v4__stack .bubble { padding: 22px 20px; }
  .method-v4 li { align-items: flex-start; }
  .method-v4 li::before { margin-top: 1px; }

  /* ---------- Zones de tap : 44 px minimum ---------- */
  .choice { min-height: 44px; padding: 10px 16px 10px 12px; }
  .work-filter__btn { min-height: 44px; }
  .faq__item summary { min-height: 44px; }
  .sticker-row .sticker, .contact-stickers .sticker { min-height: 40px; }

  /* ---------- Animations : plus légères sur petit écran ---------- */
  .reveal-words .w { filter: none; will-change: transform, opacity; }
  .reveal--blur { filter: none; }
  .blob { animation-duration: 40s; }
}

/* ---------- Mobile (≤ 640 px) ---------- */
@media (max-width: 640px) {
  .hero-photo-card { aspect-ratio: 3 / 2; }
  /* Fil du process : version verticale, dessinée au scroll par le même mécanisme
     de reveal que les post-it (.postits.is-visible). Le trait pointillé se trace
     de haut en bas, un point corail s'allume à hauteur de chaque étape. */
  .postits { position: relative; padding-left: 26px; }
  .postits::before {
    content: ""; position: absolute; left: 8px; top: 44px; bottom: 44px;
    border-left: 2.5px dashed var(--violet-deep); opacity: .55;
    transform: scaleY(0); transform-origin: top;
    transition: transform 1.6s cubic-bezier(.4, .1, .3, 1) .1s;
  }
  .postits.is-visible::before { transform: scaleY(1); }
  .postits:not(.is-visible)::before { transition-duration: .4s; transition-delay: 0s; }
  .postit::after {
    content: ""; position: absolute; left: -24px; top: 42px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--coral); box-shadow: 0 0 0 3px var(--paper-2);
    opacity: 0; transform: scale(.4);
    transition: opacity .4s var(--ease), transform .55s cubic-bezier(.34, 1.5, .64, 1);
  }
  .postits.is-visible .postit::after { opacity: 1; transform: scale(1); transition-delay: calc(.25s + var(--i, 0) * .4s); }
  .postits:not(.is-visible) .postit::after { transition-delay: 0s; transition-duration: .3s; }
  .postit { transform: rotate(0); }            /* à plat : la rotation gênait la lecture en pleine largeur */
  .postit:hover { transform: translateY(-4px); }
  .reveal[data-stagger].is-visible > .postit { transform: rotate(0); }
  .postit__num { width: 34px; height: 34px; margin-bottom: 12px; }
  .postits-wrap .postits__rail { display: none; }

  /* Heros des sous-pages : sticker en haut à droite (il chevauchait l'étiquette en bas) */
  .hero-sub__photo .sticker--float.s2 { right: 12px; bottom: auto; top: 14px; }
  .hero-sub__photo .sticker--float.s1 { left: 12px; top: 62px; }
  .hero-sub__photo { max-width: none; }
  .hero-sub__copy h1 { font-size: clamp(1.9rem, 9.2vw, 2.3rem); }
  .hero-sub { padding-top: calc(var(--nav-h) + 30px); }

  /* Boutons larges : pleine largeur, texte qui peut passer à la ligne */
  .hero-sub__actions { flex-direction: column; align-items: stretch; }
  .hero-sub__actions .btn, .cta-studio__main .btn, .process-cta .btn, .about-v5__cta .btn, .qualif__submit .btn, .work-folder--cta .btn {
    width: 100%; justify-content: center; white-space: normal; text-align: center;
  }
  .process-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .qualif__submit { flex-direction: column; align-items: stretch; }
  .qualif__submit > span { max-width: none; text-align: center; }
  .about-v5__cta { flex-direction: column; align-items: stretch; }

  /* Bulles / dossiers : marges intérieures un peu plus courtes */
  .bubble { padding: 20px 18px; }
  .bubble--mini { padding: 16px 18px; }
  .folder__body { padding: 22px 18px; }
  .work-folder .folder__body { padding: 10px 10px 18px; }
  .constat-panel { padding: 22px 18px; }
  .who-card { padding: 22px 20px; }
  .cta-studio { padding: 10px; }
  .cta-studio__main { padding: 26px 22px; }
  .qualif__form { padding: 22px 18px; }
  .section-head, .process-head, .service-intro, .pledge-head { margin-bottom: 30px; }

  /* Logos clients : un peu plus petits, bande plus courte */
  .marquee__group img { height: 42px; }
  .marquee__group img.is-stacked { height: 56px; }
  .marquee__group { gap: 40px; padding-right: 40px; }
  .marquee__slot { height: 40px; font-size: 0.84rem; }
}

/* ---------- Petits mobiles (≤ 400 px) ---------- */
@media (max-width: 400px) {
  .section { padding-block: 60px; }
  .section.seam { padding-top: calc(60px + var(--seam-r)); padding-bottom: calc(60px + var(--seam-r)); }
  .hero-studio h1 { font-size: clamp(1.9rem, 9vw, 2.3rem); }
  .lead { font-size: 1rem; }
  .constat-panel__copy h2 { font-size: 1.8rem; }
  .cta-studio__main h2 { font-size: 1.7rem; }
  .nav__links a, .nav__links a[data-short]::after, .cta-bubble .btn::after { font-size: 0.58rem; }
  .btn--lg { padding: 16px 22px; font-size: 1rem; }
}

/* =========================================================
   PASSE 11 : Retour cliente (sept. 2026)
   - méthode : colonne photo structurée comme le hero (photo + mini-cartes)
   - levier Branding : scène « logiciel de design » autour du mot Waa
   - levier Photo & vidéo : mini-carrousel horizontal avec indicateur
   - témoignages : une citation à la fois, onglets clients (accueil)
   - réalisations : captures de sites, badges PageSpeed en direct
   - contact : présentation de Tessa raccourcie
   - CTA : un seul libellé « Réserver un appel » partout
   - mobile : la pilule CTA flottante s'efface devant le CTA final
   - process : fond éclairci (.band--cream-light), vagues retirées
   Hors périmètre : le connecteur .method-v4__link / .flow-v4__link entre Waa
   et Pluka reste celui d'origine (propositions en attente de choix cliente).
   ========================================================= */

/* ---------- Méthode (accueil) : la colonne photo reprend le langage du hero ----------
   Carte photo + deux mini-cartes dessous (la note « Valable pour chaque levier »
   et le lien vers les services), au lieu d'une note en ligne libre sous la grille. */
.method-v4__photo { display: flex; flex-direction: column; gap: 10px; }
.method-v4__photo .photo-card { position: relative; flex: 1 1 auto; height: auto; min-height: 300px; }
.method-v4__photo .photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.method-v4__minis { display: grid; gap: 10px; }
.method-v4__minis .bubble--mini { min-height: 0; padding: 16px 18px; gap: 8px; justify-content: flex-start; }
.method-v4__minis .bubble--mini strong { font-size: .94rem; font-weight: 500; line-height: 1.42; }
.method-v4__minis .bubble--mini::after { font-size: 2.6rem; }
.bubble--link { cursor: pointer; }
.bubble--link strong { display: inline-flex; align-items: center; gap: 8px; font-weight: 600 !important; color: var(--violet-deep); }
.bubble--link svg { width: 17px; height: 17px; flex-shrink: 0; transition: transform .35s var(--ease); }
.bubble--link:hover svg { transform: translateX(4px); }
@media (max-width: 980px) {
  .method-v4__photo .photo-card { min-height: 340px; max-height: none; }
  .method-v4__minis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .method-v4__minis { grid-template-columns: 1fr; }
  /* min-height 340 px + aspect-ratio 4/3.4 donnait une largeur minimale de 400 px
     à la carte photo : la colonne de la méthode débordait de l'écran (mesuré à
     390 px de large). Sur mobile, c'est le ratio seul qui fixe la hauteur. */
  .method-v4__photo .photo-card { min-height: 0; }
}

/* ---------- Levier Branding : scène « logiciel de design » ----------
   Le mot Waa en grande typo, sélectionné dans un outil de création : règles
   graduées en haut et à gauche, deux repères d'alignement corail, cadre de
   sélection avec poignées et nom de calque, curseur nominatif, barre d'outils,
   panneau de couleurs. Réf. de motif : canevas Figma (règles, guides, cadre de
   sélection bleu, curseurs multijoueurs nommés) et plan de travail Illustrator,
   recolorés dans la charte (blanc / violet profond / corail).
   La scène est posée en absolu dans .lever__media (comme .lm-photo) : le
   `height:100%` de .lm-brand ne se résout pas quand le conteneur n'a qu'un
   min-height, et la scène retombait à 170 px de haut sur la page Services,
   règles coupées au milieu de la carte. */
.lm-brand--tool { display: block; position: absolute; inset: 0; overflow: hidden; }
.lm-brand--tool .lm-brand__ruler { position: absolute; z-index: 1; background: rgba(255, 253, 252, 0.60); pointer-events: none; }
.lm-brand__ruler--x {
  left: 0; right: 0; top: 0; height: 16px;
  background-image:
    repeating-linear-gradient(90deg, rgba(58,18,79,0.45) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(58,18,79,0.75) 0 1px, transparent 1px 40px);
  background-size: 100% 5px, 100% 10px;
  background-position: 16px 100%, 16px 100%;
  background-repeat: repeat-x;
}
.lm-brand__ruler--y {
  left: 0; top: 16px; bottom: 0; width: 16px;
  background-image:
    repeating-linear-gradient(180deg, rgba(58,18,79,0.45) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(180deg, rgba(58,18,79,0.75) 0 1px, transparent 1px 40px);
  background-size: 5px 100%, 10px 100%;
  background-position: 100% 0, 100% 0;
  background-repeat: repeat-y;
}
/* repères d'alignement : deux traits corail accrochés aux bords du cadre de
   sélection (comme un guide « snappé » sur l'objet dans Figma). Ils sont tracés
   depuis le cadre lui-même pour rester alignés quelle que soit sa taille ; le
   débordement est rogné par l'overflow:hidden de la scène. */
.lm-brand__frame {
  position: absolute; z-index: 2; left: 52%; top: 52%;
  transform: translate(-50%, -50%);
  padding: 6px 20px 2px;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(58,18,79,0.35);
}
.lm-brand__frame::before, .lm-brand__frame::after {
  content: ""; position: absolute; background: var(--coral); opacity: .85; pointer-events: none;
}
.lm-brand__frame::before { left: -1.5px; top: -600px; bottom: -600px; width: 1px; }
.lm-brand__frame::after { top: auto; bottom: -1.5px; left: -600px; right: -600px; height: 1px; }
.lm-brand__frame i {
  position: absolute; width: 9px; height: 9px;
  background: #fff; border: 1.5px solid var(--violet-deep); border-radius: 2px;
}
.lm-brand__frame i:nth-of-type(1) { left: -6px; top: -6px; }
.lm-brand__frame i:nth-of-type(2) { right: -6px; top: -6px; }
.lm-brand__frame i:nth-of-type(3) { left: -6px; bottom: -6px; }
.lm-brand__frame i:nth-of-type(4) { right: -6px; bottom: -6px; }
.lm-brand__layer {
  position: absolute; left: -1.5px; top: -24px;
  padding: 4px 8px; border-radius: 6px 6px 6px 0;
  background: var(--violet-deep); color: #fff;
  font-family: var(--font-display); font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; line-height: 1;
}
.lm-brand__word {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 6.4vw, 5rem); line-height: 1; letter-spacing: -.02em;
  color: #fff; text-shadow: 0 12px 28px rgba(58,18,79,0.28);
}
.lm-brand__word em { font-style: normal; color: var(--coral); font-size: .34em; vertical-align: top; margin-left: .04em; line-height: 1.6; }
.lm-brand__cursor { position: absolute; z-index: 3; left: 66%; top: 58%; animation: lm-cursor 5.5s ease-in-out infinite; }
.lm-brand__cursor svg {
  width: 20px; height: 20px; display: block;
  fill: #fff; stroke: var(--violet-deep); stroke-width: 1.5; stroke-linejoin: round;
  filter: drop-shadow(0 3px 6px rgba(58,18,79,0.35));
}
.lm-brand__cursor b {
  position: absolute; left: 16px; top: 18px;
  padding: 4px 8px; border-radius: 8px 8px 8px 2px;
  background: var(--coral); color: #fff;
  font-family: var(--font-display); font-size: .66rem; font-weight: 600; line-height: 1; white-space: nowrap;
  box-shadow: 0 4px 10px rgba(255,107,44,0.35);
}
@keyframes lm-cursor { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-12px, -9px); } }
.lm-brand__tools {
  position: absolute; z-index: 3; left: 26px; bottom: 14px;
  display: flex; gap: 3px; padding: 4px; border-radius: 12px;
  background: var(--paper-2); box-shadow: var(--shadow-sm);
}
.lm-brand__tools i {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  color: var(--grey-700); font-family: var(--font-display); font-style: normal; font-weight: 700; font-size: .82rem; line-height: 1;
}
.lm-brand__tools i.is-on { background: var(--violet-soft); color: var(--violet-deep); }
.lm-brand__tools svg { width: 14px; height: 14px; }
.lm-brand--tool .lm-brand__swatches { z-index: 3; }
@media (max-width: 640px) {
  .lm-brand__tools { display: none; }   /* trop d'objets sur 300 px de large : on garde règles, cadre, curseur, couleurs */
  .lm-brand__cursor { left: 62%; top: 56%; }
}
@media (prefers-reduced-motion: reduce) { .lm-brand__cursor { animation: none; } }

/* ---------- Levier Photo & vidéo : mini-carrousel horizontal ----------
   Défilement natif (scroll-snap), un visuel par écran, points + bouton
   « suivant » en pilule. L'indicateur reste visible avec un seul visuel :
   il annonce les prochains exemples. Réf. de motif : galeries de fiches
   Airbnb (points + flèche dans l'image) et carrousels produits Apple. */
.lm-reel { position: absolute; inset: 0; }
.lm-reel__track {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lm-reel__track::-webkit-scrollbar { display: none; }
.lm-reel__item { position: relative; flex: 0 0 100%; height: 100%; margin: 0; overflow: hidden; scroll-snap-align: start; }
.lm-reel__item a { display: block; width: 100%; height: 100%; }
.lm-reel__item img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .8s var(--ease); }
.folder:hover .lm-reel__item img { transform: scale(1.04); }
.lm-reel__item .sticker { position: absolute; left: 14px; bottom: 14px; }
.lever-detail__media .lm-reel__item img { object-position: center 12%; }
/* Flèches précédent/suivant semi-transparentes, groupées en bas à droite de
   la photo (un seul point de contrôle repérable, plutôt que dispersées sur
   les deux bords). */
.lm-reel__nav {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
}
.lm-reel__arrow {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(20, 10, 30, 0.32); color: #fff;
  backdrop-filter: blur(2px);
  transition: background .25s, transform .25s var(--ease);
}
.lm-reel__arrow:hover { background: rgba(20, 10, 30, 0.55); transform: scale(1.08); }
.lm-reel__arrow svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .lm-reel__track { scroll-behavior: auto; } }

/* ---------- Réalisations : badge « score PageSpeed » ----------
   Pastille discrète posée dans le pied de carte, à côté de « Voir le projet ».
   Elle ouvre le rapport PageSpeed en direct pour le site concerné : aucun
   chiffre n'est écrit dans la page, donc rien à re-vérifier à chaque mise à
   jour du site du client. Réf. de motif : badges « Lighthouse report » des
   pages produit Vercel et Netlify, ici en pilule dans la charte. */
.folder__psi {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 9px; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--violet-deep);
  border: 1px solid rgba(58,18,79,0.12);
  font-family: var(--font-display); font-weight: 600; font-size: .76rem; line-height: 1;
  box-shadow: var(--shadow-sm); white-space: nowrap;
  transition: transform .3s var(--ease), border-color .25s, background .25s, color .25s;
}
.folder__psi svg { width: 15px; height: 15px; flex-shrink: 0; }
.folder__psi:hover, .folder__psi:focus-visible { transform: translateY(-2px); border-color: var(--violet); background: var(--violet-soft); }
@media (max-width: 420px) { .folder__psi { white-space: normal; } }

/* ---------- Témoignages (accueil) : une citation à la fois ----------
   Mise en page volontairement différente des grilles de dossiers : une seule
   grande scène de citation (guillemet corail géant, texte en Clash Display),
   changée par des onglets clients à gauche ou par des flèches. Réf. de motif :
   sélecteur de témoignages par logo de Stripe (« customer stories »), bloc
   citation unique de Basecamp, onglets de Linear (« what customers say »). */
.quotes { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.quotes__head h2 { margin-block: 14px 16px; max-width: 16ch; }
.quotes__head .lead { margin-bottom: 22px; font-size: 1rem; }
.quotes__switch { display: flex; flex-wrap: wrap; gap: 10px; }
.quotes__tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 7px; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--ink); border: 1px solid rgba(58,18,79,0.10);
  font-family: var(--font-display); font-weight: 600; font-size: .9rem; line-height: 1;
  box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .3s var(--ease);
}
.quotes__tab b {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--violet-soft); color: var(--violet-deep); font-size: .74rem; font-weight: 700;
}
.quotes__tab:hover { transform: translateY(-2px); border-color: var(--violet); }
.quotes__tab.is-active { background: var(--ink); color: #fff; border-color: transparent; box-shadow: 0 1px 1px rgba(58,18,79,0.08), 0 10px 24px rgba(48,20,63,0.24); }
.quotes__tab.is-active b { background: var(--coral); color: #fff; }
.quotes__stage {
  position: relative; overflow: hidden;
  padding: clamp(30px, 4vw, 54px) clamp(24px, 4vw, 56px) clamp(20px, 3vw, 30px);
  border-radius: clamp(26px, 3.4vw, 40px);
  background: var(--paper-2); box-shadow: var(--shadow-card);
}
.quotes__mark {
  position: absolute; left: clamp(14px, 2.6vw, 34px); top: clamp(10px, 1.8vw, 20px); z-index: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 3.4vw, 3.1rem); line-height: 1;
  color: var(--coral); opacity: .20; pointer-events: none; user-select: none;
}
.quotes__rail { position: relative; z-index: 1; min-height: 200px; }
.quote { margin: 0; display: flex; flex-direction: column; gap: 24px; }
.quote[hidden] { display: none; }
.quote.is-active { animation: faq-in .5s var(--ease); }
.quote__text {
  margin: 0; max-width: 56ch;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(.92rem, 1.05vw, 1.02rem); line-height: 1.5; letter-spacing: -.005em;
  color: var(--ink);
}
/* espace réservé : même corps que la citation finale, mais visiblement « à remplir » */
.quote__text--placeholder {
  color: var(--violet-deep); background: var(--violet-soft);
  border: 1.5px dashed rgba(58,18,79,0.40); border-radius: 16px;
  padding: 14px 18px;
}
.quote__who { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.quote__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--av, var(--violet)); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
}
.quote__who strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.2; color: var(--ink); }
.quote__who small { display: block; color: var(--grey-700); font-size: .84rem; margin-top: 2px; }
.quote__tags { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.quote__tag {
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--paper); color: var(--violet-deep); border: 1px solid rgba(58,18,79,0.10);
  font-family: var(--font-display); font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.quotes__ctrl {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  margin-top: 26px; padding-top: 18px; border-top: 1px dashed rgba(58,18,79,0.18);
}
.quotes__arrow {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--violet-soft); color: var(--violet-deep);
  transition: background .25s, color .25s, transform .3s var(--ease);
}
.quotes__arrow:hover { background: var(--coral); color: #fff; transform: translateY(-2px); }
.quotes__arrow svg { width: 18px; height: 18px; }
.quotes__count { margin-left: 4px; font-family: var(--font-display); font-size: .9rem; color: var(--grey-700); }
.quotes__count b { color: var(--ink); }
@media (max-width: 980px) {
  .quotes { grid-template-columns: 1fr; }
  .quotes__head h2 { max-width: 20ch; }
}
@media (max-width: 640px) {
  .quotes__stage { padding: 26px 20px 18px; }
  .quote__text { max-width: none; }
  .quote__tags { margin-left: 0; }
}

/* ---------- Page « À propos & contact » : présentation de Tessa raccourcie ----------
   La version complète (citation, chiffres, capsules) reste sur l'accueil ; ici,
   une confirmation courte : c'est bien Tessa qu'on aura au téléphone. */
.about-v5--short { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
.about-v5--short .about-v5__copy h2 { max-width: 18ch; }
.about-v5--short .about-v5__copy .lead { max-width: 56ch; }
.about-v5--short .capsules { margin-top: 22px; }
@media (max-width: 980px) { .about-v5--short { grid-template-columns: 1fr; } }

/* ---------- Mobile : la pilule CTA flottante s'efface devant le CTA final ----------
   Classe .is-tucked posée par main.js (IntersectionObserver sur .cta-band).
   Opacité + translation, pas de display:none : transition douce dans les deux sens. */
@media (max-width: 760px) {
  .nav__cta .btn, .cta-bubble .btn { transition: opacity .35s var(--ease), transform .45s var(--ease), box-shadow .3s; }
  .nav__cta .btn.is-tucked, .cta-bubble .btn.is-tucked { opacity: 0; transform: translateY(28px); pointer-events: none; }
}

/* CTA final : bouton secondaire "Voir les réalisations" */
.cta-studio__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn--ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.55); }
.btn--ghost-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; transform: translateY(-3px); }
@media (max-width: 640px) { .cta-studio__actions { flex-direction: column; align-items: stretch; } .cta-studio__actions .btn { justify-content: center; } }

.lever-detail__cta { margin-top: 22px; }

/* Vidéo lue directement dans une carte (Local Burger) : le fichier ne se charge qu'au clic */
.lm-video { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.lm-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-video.is-playing { cursor: default; }
.lm-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.work-folder:hover .lm-video .work-shot__play { transform: translate(-50%, -50%) scale(1.08); }
/* Pendant la lecture d'une vidéo, les flèches du carrousel passent au-dessus des commandes du lecteur */
.lm-reel:has(.lm-video.is-playing) .lm-reel__nav { bottom: 58px; }

/* CTA sous la grille des leviers (accueil) */
.levers__cta { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 48px); }
@media (max-width: 640px) { .levers__cta .btn { width: 100%; justify-content: center; } }

/* Contact : coordonnées sur une seule ligne sur grand écran */
@media (min-width: 1100px) {
  .contact-stickers { flex-wrap: nowrap; gap: 12px; }
  .contact-stickers .sticker { white-space: nowrap; flex: 0 0 auto; }
}

/* Hero accueil (desktop) : plus d'air sous « Être trouvé… » pour faire remonter tout le bloc de texte dans le rectangle */
@media (min-width: 1000px) {
  .hero-studio__copy { padding-bottom: clamp(120px, 14svh, 170px); }
}

/* ---------- Bandeau de consentement (mesure d'audience) ---------- */
.consent {
  position: fixed; left: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); z-index: 1200;
  width: min(380px, calc(100vw - 28px));
  padding: 20px 22px 18px;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid rgba(48, 20, 63, 0.10); border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(14px); transition: opacity .3s var(--ease, ease), transform .3s var(--ease, ease);
}
.consent.is-open { opacity: 1; transform: none; }
.consent__title { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.consent__text { margin: 0 0 14px; font-size: .9rem; line-height: 1.5; color: var(--grey-700, var(--ink)); }
.consent__text a { color: var(--violet-pop); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* deux choix de même poids : même taille, même style */
.consent__btn {
  padding: 11px 14px; border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: .92rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--ink);
  transition: background .2s, color .2s, transform .2s;
}
.consent__btn:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.consent__btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
@media (max-width: 760px) {
  /* au-dessus de la barre de navigation flottante du bas */
  .consent { left: 14px; right: 14px; width: auto; bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }

/* =========================================================
   MOBILE : harmonisation (audit du 03/10/2026)
   Mêmes espaces entre sections, mêmes tailles de texte,
   mêmes alignements (marges de 20px), rien d'incliné.
   ========================================================= */
@media (max-width: 760px) {
  /* 1. Espaces entre sections : une seule valeur (le seam compense son propre chevauchement) */
  main .section.seam,
  main .section--tight.seam { padding-top: calc(46px + var(--seam-r)); padding-bottom: calc(46px + var(--seam-r)); }

  /* 2. Typographie : un seul réglage par niveau */
  main h1 { font-size: 2.05rem !important; line-height: 1.08 !important; }
  main h2 { font-size: clamp(1.7rem, 7.6vw, 1.9rem) !important; line-height: 1.12 !important; }
  main .lead,
  main .section-head > p,
  .hero-sub__copy > p { font-size: 1rem !important; line-height: 1.55 !important; }
  main .eyebrow { font-size: .78rem !important; }
  .choice { font-size: .9rem; line-height: 1.2; }
  .choice--radio { text-align: left; }

  /* 3. Alignements : rien d'incliné, cartes sur les mêmes marges */
  .sticker, .postit, .who-card, .marquee__slot { --rot: 0deg !important; }
  .postit, .who-card, .marquee__slot { transform: none !important; }
  #social .lever-detail__media .folder { width: 100%; }

  /* 4. Décors qui dépassent sur les bords : retirés */
  .seam-deco { display: none; }

  /* 5. Pied de page : l'encart « On en parle ? » double déjà la section juste au-dessus */
  .footer__cta { display: none; }

  /* 6. Réalisations : la carte d'appel passe en fin de liste */
  .work-folder--cta { order: 99; }

  /* 7. Pilule logo du haut : s'efface quand on descend, revient quand on remonte (plus de texte masqué dessous) */
  .nav__inner, .nav__logo, .nav__inner::before, .nav__inner::after { transition: background-color .3s, box-shadow .3s, opacity .3s, border-color .3s; }
  .nav.nav--hide .nav__inner { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
  .nav.nav--hide .nav__inner::before, .nav.nav--hide .nav__inner::after { opacity: 0 !important; }
  .nav.nav--hide .nav__logo { opacity: 0; pointer-events: none; }
}

/* MOBILE : cibles tactiles confortables (>= 40px de haut), espaces réguliers */
@media (max-width: 760px) {
  .folder__link, .arrow-link { display: inline-flex; align-items: center; min-height: 44px; }
  .folder__foot { gap: 4px 22px; }
  .footer__legal { gap: 0 22px; }
  .footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__col a { display: flex; align-items: center; min-height: 40px; }
  .consent__text a { display: inline-block; padding: 8px 0; margin: -8px 0; }
  .nav__logo { min-height: 34px; }

  /* mêmes respirations en haut de page, entre le titre et la suite, et sous la bande de logos */
  .hero-sub, .hero-sub--tight, .hero-sub--compact { padding-top: 88px; padding-bottom: 46px; }
  .marquee { padding-block: 18px 66px; }
  .cta-band { padding-block: 46px; }
  .cta-band[style] { padding-top: 0 !important; }
  .section-head { margin-bottom: 26px; }
}
@media (max-width: 760px) {
  main .cta-band.seam { padding-top: calc(46px + var(--seam-r)); padding-bottom: 46px; }
  main .section.seam:has(> .container > .work-filter), main .section.seam:has(.work-filter) { padding-top: calc(36px + var(--seam-r)); }
}

/* MOBILE : pas de cadre lavande fixe autour de l'écran (gain de place, pas de calque fixe qui peut saccader) */
@media (max-width: 760px) {
  :root { --frame-w: 0px; --frame-r: 0px; --gutter: 26px; }   /* + d'air sur les côtés */
  body::before { display: none; }
}
@media (max-width: 760px) { .levers__cta { margin-bottom: 30px; } }   /* même respiration que les autres sections */

/* MOBILE : le hero de l'accueil retrouve sa carte beige à liseré blanc (comme sur ordinateur).
   La carte déborde de 12px sur les marges de la page (elle est à 14px du bord, comme les grandes cartes). */
@media (max-width: 760px) {
  .hero--studio .hero-studio {
    margin-inline: -12px;
    padding: 24px 18px 22px;
    border: 8px solid var(--paper-2);
    border-radius: 34px;
    background: var(--paper);
    box-shadow: 0 18px 44px rgba(58, 18, 79, 0.14);
  }
}

/* MOBILE : pilule du logo plus petite, à gauche */
@media (max-width: 760px) {
  .nav { justify-content: flex-start !important; padding-left: 14px; }
  .nav__inner,
  .nav.is-scrolled .nav__inner {
    height: 36px !important;
    padding: 4px 14px 4px 13px !important;
  }
  .nav__logo img { height: 15px !important; width: auto !important; }
}

/* =========================================================
   MOBILE : listes de cartes à faire glisser au doigt (scroll-snap)
   La carte suivante dépasse un peu pour montrer qu'on peut glisser ;
   des points indiquent la position (js/swipe.js).
   ========================================================= */
.swipe-dots { display: none; }
@media (max-width: 760px) {
  [data-swipe] {
    display: flex !important; flex-wrap: nowrap; align-items: stretch; gap: 14px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter) 16px; scroll-padding-inline: var(--gutter);
  }
  [data-swipe]::-webkit-scrollbar { display: none; }
  [data-swipe] > * {
    flex: 0 0 84% !important; max-width: 84%; min-width: 0; scroll-snap-align: start;
    opacity: 1 !important; transform: none !important; transition-property: box-shadow;
  }
  /* dans la carte sombre « Le constat » : les cartes débordent de son padding (18px) */
  .constat-cards[data-swipe] { margin-inline: -18px; padding-inline: 18px; scroll-padding-inline: 18px; }
  .swipe-dots { display: flex; justify-content: center; gap: 7px; margin: -2px 0 6px; }
  .swipe-dots i { width: 7px; height: 7px; border-radius: 7px; background: rgba(58, 18, 79, .22); transition: width .3s var(--ease), background .3s; }
  .swipe-dots i.on { width: 22px; background: var(--violet-pop); }
  .constat-panel .swipe-dots i { background: rgba(255, 255, 255, .3); }
  .constat-panel .swipe-dots i.on { background: var(--coral); }
}

/* =========================================================
   MENU : barre du bas sobre + feuille (mobile), WhatsApp discret (ordinateur)
   js/site-menu.js
   ========================================================= */
.nav-menu-btn, .msheet { display: none; }
.wa-float {
  position: fixed; z-index: 900;
  right: calc(var(--frame-w) + 16px); bottom: calc(var(--frame-w) + 16px);
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  height: 48px; min-width: 48px; padding: 0 12px; border-radius: 999px;
  background: var(--paper-2); color: #1FAF5A;
  border: 1px solid rgba(58, 18, 79, .10);
  box-shadow: 0 10px 28px rgba(58, 18, 79, .16);
  overflow: hidden; white-space: nowrap;
  transition: gap .3s var(--ease), padding .3s var(--ease), box-shadow .3s, transform .3s var(--ease);
}
.wa-float .wa-ic { width: 26px; height: 26px; flex: none; }
.wa-float span { max-width: 0; opacity: 0; font-family: var(--font-display); font-weight: 600; font-size: .86rem; color: var(--ink); transition: max-width .35s var(--ease), opacity .25s; }
.wa-float:hover, .wa-float:focus-visible { gap: 8px; padding: 0 16px 0 12px; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(58, 18, 79, .22); }
.wa-float:hover span, .wa-float:focus-visible span { max-width: 110px; opacity: 1; }
.wa-float:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

@media (max-width: 760px) {
  .wa-float { display: none; }
  .nav__cta { display: none !important; }              /* « On en parle ? » vit maintenant dans le menu */

  /* barre du bas validée (variante 2) : icône au-dessus d'un libellé fin, 3 pages + Menu, sans « On en parle ? » */
  .nav__links, .nav__links.has-pill {
    left: 10px !important; right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    height: 62px; padding: 5px; justify-content: space-between; gap: 2px;
    transition: transform .45s var(--ease), opacity .3s;
  }
  .nav__links a[href="contact"] { display: none !important; }
  .nav__links a,
  .nav__links a:hover,
  .nav__links a.is-active,
  .nav__links.has-pill a:hover,
  .nav__links.has-pill a.is-active,
  .nav-menu-btn {
    flex: 1 1 0; min-width: 0; height: 52px; padding: 0 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border-radius: 999px; background: transparent;
    font-family: var(--font-body) !important; font-weight: 500 !important; font-size: .68rem !important; line-height: 1;
    letter-spacing: 0; color: var(--grey-700);
    white-space: nowrap;
  }
  .nav__links a::before {
    content: "" !important; display: block !important; flex: none;
    width: 24px !important; height: 24px !important; border-radius: 0 !important; box-shadow: none !important;
    background: var(--tab-ic) center / 22px 22px no-repeat !important;
  }
  .nav__links a::after { display: none !important; }
  .nav__links a.is-active, .nav__links a.is-here, .nav__links.has-pill a.is-active {
    background: var(--violet-soft) !important; color: var(--violet-deep) !important; font-weight: 600 !important;
  }
  .nav-menu-btn { display: flex; border: 0; cursor: pointer; color: var(--grey-700); }
  .nav-menu-btn .mi { width: 22px; height: 22px; fill: none; stroke: #30143F; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .nav-menu-btn:active { background: var(--violet-soft); }
  html.menu-open .nav__links { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .footer { padding-bottom: calc(34px + 74px + env(safe-area-inset-bottom, 0px)); }
  .consent { bottom: 84px; }

  /* la feuille */
  .msheet { display: block; position: fixed; inset: 0; z-index: 1400; }
  .msheet[hidden] { display: none; }
  .msheet__scrim { position: absolute; inset: 0; background: rgba(36, 12, 50, .5); opacity: 0; transition: opacity .35s var(--ease); }
  .msheet.is-open .msheet__scrim { opacity: 1; }
  .msheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    background: var(--paper-2); border-radius: 28px 28px 0 0;
    box-shadow: 0 -20px 50px rgba(36, 12, 50, .25);
    transform: translateY(105%); transition: transform .5s var(--ease);
  }
  .msheet.is-open .msheet__panel { transform: none; }
  .msheet__grab { display: block; width: 44px; height: 5px; border-radius: 5px; background: rgba(58, 18, 79, .2); margin: 0 auto 16px; }
  .msheet__close { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--violet-soft); color: var(--ink); }
  .msheet__close .mi { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .msheet__label { margin: 0 0 10px; font-family: var(--font-display); font-weight: 600; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-500); }
  .msheet__pages { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
  .msheet__pages a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px; border-radius: 18px; background: var(--violet-soft); font-family: var(--font-display); font-weight: 600; font-size: .94rem; color: var(--ink); }
  .msheet__pages a.on { background: var(--violet-pop); color: #fff; }
  .msheet__pages .mi { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .msheet__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
  .msheet__chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--violet-soft); font-family: var(--font-display); font-weight: 500; font-size: .84rem; color: var(--ink); }
  .msheet__actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
  .msheet__cta { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 18px 0 8px; border-radius: 999px; background: var(--coral); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .98rem; box-shadow: 0 10px 24px rgba(255, 107, 44, .35); }
  .msheet__cta img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; }
  .msheet__wa { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 16px; border-radius: 999px; background: #fff; color: #1FAF5A; border: 1.5px solid rgba(31, 175, 90, .45); font-family: var(--font-display); font-weight: 600; font-size: .9rem; }
  .msheet__wa span { color: var(--ink); }
  .msheet__wa .wa-ic { width: 24px; height: 24px; }
  html.menu-open, html.menu-open body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .msheet__panel, .msheet__scrim, .nav__links { transition: none; } }

/* MOBILE : « Comment ça se passe » sans les points orange sur le côté (le fil pointillé reste ; l'ordinateur ne change pas) */
@media (max-width: 640px) {
  .postit::after { display: none !important; }
}

/* MOBILE : cartes des carrousels moins longues (plus ergonomiques) */
@media (max-width: 760px) {
  /* réalisations de l'accueil : image moins haute, étiquettes sur une ligne, texte limité à 3 lignes */
  .work-grid[data-swipe] .work-shot { aspect-ratio: 16 / 9; }
  .work-grid[data-swipe] .ba--card .ba__frame { aspect-ratio: 16 / 9; }
  .work-grid[data-swipe] .work-card__pills { flex-wrap: wrap; gap: 6px; }
  .work-grid[data-swipe] .work-pill { flex: 0 0 auto; max-width: 100%; white-space: normal; }
  .work-grid[data-swipe] .work-pill--alt { flex: 0 0 auto; max-width: 100%; }
  .work-grid[data-swipe] .work-card__desc { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .work-grid[data-swipe] .work-folder__meta { gap: 8px; }

}

/* MOBILE : le bandeau de logos défile seul et se fait glisser au doigt (js/swipe.js) */
@media (max-width: 760px) {
  .marquee__viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .marquee__viewport::-webkit-scrollbar { display: none; }
  .marquee__track { animation: none !important; }
}

/* Hero accueil : l'étiquette « Tessa · Agence Waapluka » plus discrète sur la photo */
.hero-photo-card__label { bottom: 12px; left: 12px; padding: 7px 11px; border-radius: 13px; }
.hero-photo-card__label strong { font-size: .74rem; font-weight: 500; }
@media (max-width: 760px) {
  .hero-photo-card__label { bottom: 10px; left: 10px; padding: 5px 10px; border-radius: 11px; }
  .hero-photo-card__label strong { font-size: .68rem; }
}

/* Section « À vos côtés » : les deux cartes violettes sont sous les boutons, dans la colonne de texte */
.about-v5__copy .about-v5__minis { margin: 30px 0 0; max-width: 560px; }
@media (max-width: 980px) {
  /* mobile / tablette : l'ordre d'avant est conservé (photo, cartes, puis texte) */
  .about-v5 { gap: 0; }
  .about-v5__copy { display: contents; }
  .about-v5__media { order: 1; }
  .about-v5__copy > * { order: 3; }
  .about-v5__copy > .about-v5__minis { order: 2; margin: 12px 0 26px; max-width: 460px; }
  .about-v5__copy > .about__quote { margin-top: 6px; }
}

/* Carte « Waa » (Méthode) : l'icône ronde est l'étoile de brillance du site, comme les puces et les décors */
.method-card__icon--spark { font-size: 1.05rem; line-height: 1; }

/* Cohérence : la pastille numérotée / étoile de l'onglet garde toujours la même taille, même avec un long titre */
.folder__tab b { flex: none; }

/* Cohérence des titres (ordinateur) : H2 de section pleine largeur = 54px ; H2 des sections en deux colonnes, des cartes
   et des bandeaux d'appel = un seul niveau (43px). Mobile : déjà harmonisé plus haut. */
@media (min-width: 761px) {
  main .faq-layout h2,
  main .lever-detail__copy h2,
  main .constat-panel h2,
  main .cta-studio__main h2,
  main .about-v5__copy h2,
  main .contact-v4__side h2,
  main .qualif__side h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem) !important; line-height: 1.04 !important; }
}

/* Bloc « Pluka » (Méthode) : violet très sombre, titre lilas, pas d'orange */
.bubble--pluka { background: #240E30; box-shadow: 0 1px 1px rgba(36,14,48,.10), 0 3px 8px rgba(36,14,48,.12), 0 14px 30px rgba(36,14,48,.28); }
.bubble--pluka .method-card__big { color: #BA89FF; }
.bubble--pluka .method-card__icon { background: #473551; color: #fff; }
.bubble--pluka li, .bubble--pluka p:not(.method-card__sub2) { color: rgba(255,255,255,.76); }
.bubble--pluka li::before { background-color: #503E59 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23C7A0FF' d='M2.02,31.99c18.64,5.23,25.98,15.71,29.99,31.99.45-1.81.93-3.49,1.44-5.06,4.67-14.47,13.16-22.63,28.55-26.94C43.34,26.75,36,16.28,32,.01c-4,16.27-11.35,26.75-29.98,31.98Z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 40% !important; }
.bubble--pluka::after { color: #fff; opacity: .1; }

/* HERO MOBILE, variante A (validée) : titre, texte court, boutons, puis la photo */
@media (max-width: 760px) {
  .hero-studio .lead-tail { display: none; }                    /* texte raccourci sur mobile : la fin reste sur ordinateur */
  .hero-studio .hero__lead { order: 3; margin-top: 2px; }
  .hero-studio__conversion { order: 4; margin-top: 8px; }
  .hero-photo-card { order: 5; margin-top: 12px; }
}

/* Fiche Google : l'encart est en violet clair pour ressortir sur le fond sombre de la section, sans grand vide en bas */
#fiche .lever-detail__media .lever__media { min-height: 0; height: auto; padding-bottom: 6px; }
#fiche .lever-detail__media { align-self: center; }
#fiche .lever-detail__media .folder { height: auto; }
#fiche .lever-detail__media .folder__body { height: auto; min-height: 0; }

/* Capsules Waa / Pluka du hero : Pluka reprend le violet très sombre du bloc Méthode (moins d'orange).
   Mobile : Waa au-dessus de la photo, Pluka en dessous, chacune sur toute la largeur. */
.hero-mini--coral { background: #240E30; color: #fff; box-shadow: 0 10px 26px rgba(36, 14, 48, .26); }
.hero-mini--coral .hero-mini__kicker { color: #BA89FF; }
.hero-mini--coral strong { color: #fff; }
@media (max-width: 760px) {
  .hero-mini--violet { order: 5; grid-column: 1 / -1; min-height: 0; }
  .hero-photo-card { order: 6; margin-top: 0; }
  .hero-mini--coral { order: 7; grid-column: 1 / -1; min-height: 0; }
  .hero-mini--violet strong, .hero-mini--coral strong { max-width: 24ch; }
}

/* Services : même respiration entre toutes les sections de leviers.
   « Accompagnement stratégique » avait un bas de section réduit : il prend le même que les autres. */
#strategie { padding-top: clamp(50px, 6.5vw, 96px); padding-bottom: calc(clamp(70px, 10vw, 130px) + var(--seam-r)); }
@media (max-width: 760px) {
  #strategie { padding-top: 44px; padding-bottom: calc(46px + var(--seam-r)); }
}

/* Services, quand les deux colonnes s'empilent (tablette et mobile) : le visuel d'abord, puis le texte (test) */
@media (max-width: 980px) {
  .lever-detail .lever-detail__media,
  .lever-detail--reverse .lever-detail__media { order: 1; }
  .lever-detail .lever-detail__copy,
  .lever-detail--reverse .lever-detail__copy { order: 2; }
  .lever-detail__copy { margin-top: 22px; }
}

/* Pied de page mobile : « Navigation » et « Leviers » sur la même ligne, côte à côte */
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr 1fr !important; column-gap: 16px; }
  .footer__grid > .footer__brand { grid-column: 1 / -1; }
  .footer__col a { font-size: .9rem; line-height: 1.3; padding-block: 5px; }
  .footer__col h4, .footer__col .footer__title { white-space: nowrap; }
}

/* Pied de page : vrai logo (Waa violet + pluka blanc + étoile) */
.footer__logo { line-height: 0; font-size: 0; }
.footer__logo img { display: block; height: 34px; width: auto; margin: 0; }
@media (max-width: 760px) { .footer__logo img { height: 30px; } }

/* Pied de page mobile : le gros « Waapluka » de fond est remonté pour être visible (il était coupé sous la barre du bas) */
@media (max-width: 760px) {
  .footer__wm { width: 112vw; height: 24vw; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); opacity: .1; }
}

/* =========================================================
   MOBILE : onglet « Accueil » dans la barre du bas (oct. 2026)
   Le lien est le dernier enfant de .nav__links (les icônes des autres
   onglets dépendent de nth-child) et passe en premier avec `order`.
   Icône : la marque du logo simplifiée (anneau en G, entaille en éclair,
   étoile à 4 branches), même trait que les autres onglets.
   Sur ordinateur, le logo fait déjà office d'accueil : lien masqué.
   ========================================================= */
@media (min-width: 761px) {
  .nav__links a.nav__home { display: none !important; }
}
@media (max-width: 760px) {
  .nav__links a.nav__home {
    order: -1;
    --tab-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330143F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.9 13.6a7.3 7.3 0 1 1-3.65-6.32'/%3E%3Cpath d='M17.25 7.28 12.7 14l2.9-.7 5.3.3'/%3E%3Cpath d='M5.1 2.2c.45 1.75 1.35 2.65 3.1 3.1-1.75.45-2.65 1.35-3.1 3.1-.45-1.75-1.35-2.65-3.1-3.1 1.75-.45 2.65-1.35 3.1-3.1z'/%3E%3C/svg%3E");
    --tab-ic-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.9 13.6a7.3 7.3 0 1 1-3.65-6.32'/%3E%3Cpath d='M17.25 7.28 12.7 14l2.9-.7 5.3.3'/%3E%3Cpath d='M5.1 2.2c.45 1.75 1.35 2.65 3.1 3.1-1.75.45-2.65 1.35-3.1 3.1-.45-1.75-1.35-2.65-3.1-3.1 1.75-.45 2.65-1.35 3.1-3.1z'/%3E%3C/svg%3E");
  }
  /* page d'accueil : l'onglet est courant (aria-current posé dans index.html, main.js ignore les href en « / ») */
  .nav__links a.nav__home[aria-current="page"] {
    background: var(--violet-soft) !important; color: var(--violet-deep) !important; font-weight: 600 !important;
  }
  /* quand la section Méthode est à l'écran, c'est elle qui s'allume, pas Accueil */
  .nav__links:has(a.is-here) a.nav__home[aria-current="page"] {
    background: transparent !important; color: var(--grey-700) !important; font-weight: 500 !important;
  }
}
/* Barre à 5 onglets sur les petits écrans (< 380 px) : « Réalisations » (gras quand courant)
   ne tient pas dans 60 px de large à .68rem ; libellés un peu plus petits, marges internes à zéro */
@media (max-width: 379px) {
  .nav__links a, .nav__links a:hover, .nav__links a.is-active, .nav__links a.is-here,
  .nav__links.has-pill a:hover, .nav__links.has-pill a.is-active,
  .nav__links a.nav__home[aria-current="page"], .nav-menu-btn {
    font-size: .62rem !important; padding: 0 !important;
  }
}

/* =========================================================
   Retours du 03/10 (soir)
   ========================================================= */
/* Soulignement des titres plus fin (accueil et pages) */
.hl__svg path { stroke-width: 3.6; }

/* Bandeau de logos (mobile) : transform fluide, plus de défilement natif saccadé */
@media (max-width: 760px) {
  .marquee__viewport { overflow: hidden !important; touch-action: pan-y; }
  .marquee__track { animation: none !important; will-change: transform; }
}

/* Encart « Premier échange » du bandeau d'appel : l'orange est réservé aux boutons, donc violet très sombre */
.cta-studio .bubble--coral { background: var(--ink); box-shadow: 0 1px 1px rgba(36,14,48,.10), 0 3px 8px rgba(36,14,48,.12), 0 14px 30px rgba(36,14,48,.26); }
.cta-studio .bubble--coral .bubble__kicker { color: #BA89FF; }
.cta-studio .bubble--coral strong { color: #fff; }
.cta-studio .bubble--coral::after { color: #fff; opacity: .1; }

/* À vos côtés : le texte n'a plus de guillemet ni de retrait, il est aligné à gauche */
.about__quote { padding-left: 0; }
.about__quote::before { display: none; }
.about__sign { padding-left: 0; }

/* Autocollant sombre (Pluka) et alignement des deux autocollants du hero de Services : un en haut, un en bas, à gauche de la photo */
.sticker--night { background: #240E30; color: #fff; border-color: transparent; }
.hero-sub__photo .sticker--float.s1,
.hero-sub__photo .sticker--float.s2 { left: 14px; right: auto; --rot: 0deg; transform: none; }
.hero-sub__photo .sticker--float.s1 { top: 14px; bottom: auto; }
.hero-sub__photo .sticker--float.s2 { top: auto; bottom: 14px; }

/* Services : bouton « Voir le site en ligne » en violet (l'orange est réservé aux appels à l'action) */
.ba__link.btn--primary { background: var(--violet-pop); color: #fff; box-shadow: 0 8px 20px rgba(135, 56, 242, .28); }

/* Mobile et tablette */
@media (max-width: 980px) {
}
@media (max-width: 760px) {
  .nav { justify-content: center !important; padding-left: 0 !important; }      /* logo du haut centré */
  .cta-band--hide-sm { display: none; }                                         /* Réalisations : le bandeau final doublait la carte d'appel */
}
/* « Comment ça se passe » : cartes alignées sur les marges de la page, sans fil à gauche (mobile) */
@media (max-width: 640px) {
  .postits { padding-left: 0; }
  .postits::before { display: none; }
}

/* Avis : glissement dans le sens du geste */
@keyframes quote-in-next { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes quote-in-prev { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
.quote.is-active[data-dir="next"] { animation: quote-in-next .5s cubic-bezier(.16, 1, .3, 1) both; }
.quote.is-active[data-dir="prev"] { animation: quote-in-prev .5s cubic-bezier(.16, 1, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .quote.is-active[data-dir] { animation: none; } }

/* Capsules des leviers (accueil) : liens vers le levier correspondant sur Services */

.folder__tags a {
  font-family: var(--font-display); font-size: 0.76rem; font-weight: 600;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.22); color: inherit;
}

.folder--paper .folder__tags a, .folder--cream .folder__tags a, .folder--soft .folder__tags a, .folder--lav .folder__tags a, .folder--coral-soft .folder__tags a { background: var(--paper); color: var(--violet-deep); border: 1px solid rgba(58,18,79,0.10); }

.folder__tags a { cursor: pointer; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s, background .25s, color .25s; }
.folder__tags a:hover, .folder__tags a:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(58, 18, 79, .16); }
.folder__tags a:focus-visible { outline: 2px solid var(--violet-pop); outline-offset: 2px; }
@media (max-width: 760px) { .folder__tags a { min-height: 36px; display: inline-flex; align-items: center; } }

/* Services (tablette et mobile) : étiquette « 01 · … », puis la carte, puis le titre et le texte */
@media (max-width: 980px) {
  .lever-detail, .lever-detail--reverse { gap: 0; }
  .lever-detail .lever-detail__copy, .lever-detail--reverse .lever-detail__copy { display: contents; margin-top: 0; }
  .lever-detail__copy > * { order: 3; }
  .lever-detail__copy > .sticker { order: 1; justify-self: start; margin-bottom: 18px; }
  .lever-detail .lever-detail__media, .lever-detail--reverse .lever-detail__media { order: 2; margin-bottom: 30px; }
}

/* À vos côtés : cadre de la photo plus haut pour moins la couper (ordinateur et mobile) */
.about-v5--teaser .photo-card--about { aspect-ratio: 4 / 4.9; }
.about-v5--teaser .photo-card--about img { object-position: center 12%; }
@media (max-width: 980px) { .about-v5--teaser .photo-card--about { aspect-ratio: 4 / 4.7; } }
.about-v5 .about__sign { padding-left: 0; }

/* Gris clair chaud pour les cartes photo / vidéo (plus clair que l'ancien beige-gris) */
.folder--cream { --fbg: #F5F1EB; }

/* Corrections du contrôle visuel (03/10) */
/* WhatsApp ne recouvre plus « Cookies » : le bas de page laisse la place au bouton (ordinateur) */
@media (min-width: 761px) { .footer__bottom { padding-right: 96px; } }
/* Pages légales : le lien « Retour à l'accueil » ne passe plus sous le pied de page */
.legal-hero { padding-bottom: calc(70px + var(--seam-r)); }
/* Tablette (761 à 980 px) : photo du hero en cadre réel, photo de la Méthode qui remplit sa carte */
@media (min-width: 761px) and (max-width: 980px) {
  .hero-photo-card { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
  .hero-photo-card img { height: 100%; }
  .method-v4__photo .photo-card img { max-height: none; height: 100%; }
}

/* Le gris clair chaud ne concerne que les cartes de Réalisations ; les leviers gardent leur beige d'origine */
.folder--cream { --fbg: var(--cream); }
.work-folder.folder--cream { --fbg: #F5F1EB; }

/* Services, Stratégie : la photo remonte dans son cadre (moins de feuillage en haut, plus de buste en bas) */
#strategie .lever-detail__media .lm-photo img { object-position: 50% 30%; }

/* Accueil, « Pour qui ? » (mobile) : les grandes bandes décoratives en fond grisées sont masquées */
@media (max-width: 760px) {
  #pour-qui::before, #pour-qui::after { display: none !important; }
  #pour-qui .tx-ribbon, #pour-qui .ribbon { display: none !important; }
}

/* =========================================================
   TAILLES DE TEXTE (ordinateur et tablette) : une échelle unique
   Textes d'intro 16,8 px · texte courant 16 px · texte de carte 15 px
   Petits titres de carte 18 px · titres de projets et de leviers 24 px
   ========================================================= */
@media (min-width: 761px) {
  /* textes d'intro (hero + sections) */
  main .lead, .hero__lead, .hero-sub__copy > p, .section-head > p, .qualif__side .lead,
  .lever-detail__copy .lead, .hero-studio .hero__lead { font-size: 1.05rem !important; line-height: 1.6; }
  /* texte courant : listes, FAQ, paragraphes de section */
  main li, .faq__answer p, .lever-detail__copy > p:not(.lead) { font-size: 1rem; }
  /* textes à l'intérieur des cartes */
  .constat-card p, .who-card p, .postit p, .work-card__desc, .levers .folder__body > p { font-size: .9375rem !important; line-height: 1.55; }
  /* petits titres de carte */
  .constat-card h3, .who-card h3, .postit h3, .contact-v4 .postit h3 { font-size: 1.125rem !important; line-height: 1.2; }
  /* titres de projets et de leviers */
  .levers .folder__body > h3, .work-folder__meta h3, .work-folder .folder__body > h3 { font-size: 1.5rem; }
  /* petites étiquettes */
  .work-pill, .folder__tags span, .folder__tags a, .lever-detail__tags span { font-size: .78rem; }
  .ba__link { font-size: .94rem; }
}
@media (min-width: 761px) { main li { font-size: 1rem !important; } }

/* HERO MOBILE, variante A validée : titre, texte, boutons, photo juste après les boutons, puis Waa, Pluka (chacune sur toute la largeur) et les leviers */
@media (max-width: 760px) {
  .hero-photo-card { order: 5; margin-top: 12px; }
  .hero-mini--violet { order: 6; grid-column: 1 / -1; }
  .hero-mini--coral { order: 7; grid-column: 1 / -1; }
  .hero-mini--soft { order: 8; }
}

/* Zones de toucher : 44 px minimum (cases du formulaire, flèches des carrousels, menu de la tablette) */
.choice { min-height: 44px; }
.lm-reel__arrow { position: relative; }
.lm-reel__arrow::after { content: ""; position: absolute; inset: -6px; }          /* zone tactile agrandie sans changer l'apparence */
@media (max-width: 1024px) {
  .nav__links a { min-height: 44px; display: inline-flex; align-items: center; }
  .nav__cta .btn { min-height: 44px; }
}

/* HERO MOBILE validé : photo, puis Waa et Pluka côte à côte, puis « Les bons leviers » (Pluka reste en violet très sombre) */
@media (max-width: 760px) {
  .hero-photo-card { order: 5; }
  .hero-mini--violet { order: 6; grid-column: auto; }
  .hero-mini--coral { order: 7; grid-column: auto; }
  .hero-mini--soft { order: 8; grid-column: 1 / -1; }
  .hero-mini--violet strong, .hero-mini--coral strong { max-width: none; }
}


/* Réseaux sociaux : la zone de la publication contient une vraie photo (équipe de Valléon) ; les statistiques restent par-dessus */
.lm-social__photo .lm-social__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 53%; }
.lm-social__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,14,48,0) 55%, rgba(36,14,48,.38) 100%); pointer-events: none; }
.lm-social__stats { z-index: 1; }

/* Corrections du contrôle visuel (suite) */
/* Étiquettes de hero : plus de beige hors palette */
.sticker--cream { background: var(--paper-2); }
/* Accueil, carrousel Réalisations (mobile) : le comparateur avant/après reste lisible (captures portrait, cadre carré) */
@media (max-width: 760px) {
  .work-grid[data-swipe] .ba--card .ba__frame { aspect-ratio: 1 / 1; }
}

/* Méthode (accueil) : le badge Waapluka (la pince dans son rond) en grand, coupé par le bord, comme sur la page Réalisations */
.pince-wm {
  position: absolute; z-index: 0; pointer-events: none;
  right: clamp(-230px, -13vw, -80px); top: clamp(10px, 3vw, 60px);
  width: clamp(340px, 42vw, 640px); aspect-ratio: 1;
  background: url(../assets/mascotte/waapluka-badge.svg) center / contain no-repeat;
  transform: scaleX(-1); opacity: .55;           /* miroir horizontal, plus discret */
}
#methode > .container { position: relative; z-index: 1; }
@media (max-width: 760px) { .pince-wm { width: 300px; right: -120px; top: 6px; } }

/* MOBILE : fondu flouté en bas d'écran (effet verre), entre la barre de navigation et la barre de Safari.
   Le contenu s'estompe en douceur au lieu de se couper net derrière la barre. */
@media (max-width: 760px) {
  body::before {
    display: block; content: ""; position: fixed; left: 0; right: 0; bottom: 0; top: auto; inset-inline: 0;
    height: calc(118px + env(safe-area-inset-bottom, 0px));
    z-index: 90; pointer-events: none; border-radius: 0; box-shadow: none;
    background: linear-gradient(180deg, rgba(255, 248, 242, 0) 0%, rgba(255, 248, 242, .55) 55%, rgba(255, 248, 242, .82) 100%);
    -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 48%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 48%, #000 100%);
  }
  html.menu-open body::before { opacity: 0; transition: opacity .3s; }
}


/* =========================================================
   Étoile Waapluka (élementsweb.svg) : remplace partout le caractère « ✦ »
   ========================================================= */
/* petites pastilles carrées des listes : l'étoile est posée au centre de la pastille */
.method-card li::before, .expertise-card li::before, .method-v4 li::before, .bubble__list li::before {
  content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23FFFFFF' d='M2.02,31.99c18.64,5.23,25.98,15.71,29.99,31.99.45-1.81.93-3.49,1.44-5.06,4.67-14.47,13.16-22.63,28.55-26.94C43.34,26.75,36,16.28,32,.01c-4,16.27-11.35,26.75-29.98,31.98Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 40%;
}
.bubble--soft .bubble__list li::before, .bubble--paper .bubble__list li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%233A124F' d='M2.02,31.99c18.64,5.23,25.98,15.71,29.99,31.99.45-1.81.93-3.49,1.44-5.06,4.67-14.47,13.16-22.63,28.55-26.94C43.34,26.75,36,16.28,32,.01c-4,16.27-11.35,26.75-29.98,31.98Z'/%3E%3C/svg%3E"); }
.method-card--pluka.expertise-card li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23C7A0FF' d='M2.02,31.99c18.64,5.23,25.98,15.71,29.99,31.99.45-1.81.93-3.49,1.44-5.06,4.67-14.47,13.16-22.63,28.55-26.94C43.34,26.75,36,16.28,32,.01c-4,16.27-11.35,26.75-29.98,31.98Z'/%3E%3C/svg%3E"); }
/* pastille ronde des onglets de cartes et icône ronde de la méthode */
.folder__tab b.spk, .method-card__icon.method-card__icon--spark { font-size: 0; }
.folder__tab b.spk::before, .method-card__icon--spark::before {
  content: ""; display: block; width: 42%; height: 42%; background-color: #fff;
  -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat;
}
.method-card__icon--spark::before { width: 38%; height: 38%; }
/* maquette « Waa » du branding */
.lm-brand__word em.spk { display: inline-block; width: .24em; height: .24em; font-size: 1em; margin-left: .06em; vertical-align: top; margin-top: .1em; background-color: var(--coral);
  -webkit-mask: var(--waa-star) center / contain no-repeat; mask: var(--waa-star) center / contain no-repeat; }

/* WhatsApp sur mobile : bouton rond vert posé au-dessus de la barre de navigation, à droite (comme sur la référence cmc6.fr) */
@media (max-width: 760px) {
  .wa-float {
    display: inline-flex; right: 14px; left: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    width: 54px; height: 54px; min-width: 0; padding: 0; gap: 0; border-radius: 50%;
    background: #1FAF5A; color: #fff; border: 0;
    box-shadow: 0 10px 24px rgba(31, 175, 90, .38), 0 2px 6px rgba(36, 14, 48, .18);
    transition: transform .3s var(--ease), opacity .3s;
  }
  .wa-float .wa-ic { width: 28px; height: 28px; }
  .wa-float span { display: none; }
  .wa-float:hover, .wa-float:focus-visible { padding: 0; gap: 0; transform: none; }
  .wa-float:active { transform: scale(.94); }
  html.menu-open .wa-float { opacity: 0; pointer-events: none; }
}

/* HERO MOBILE : textes des capsules moins gras, une seule étoile sur « Les bons leviers », fondu flouté renforcé en bas */
@media (max-width: 760px) {
  .hero-mini strong { font-weight: 500; font-size: .88rem; }
  .hero-mini__kicker { font-weight: 600; }
  .hero-mini--soft::after { display: none; }                       /* une étoile en moins sur « Les bons leviers » */
  body::before {
    height: calc(150px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255, 248, 242, 0) 0%, rgba(255, 248, 242, .5) 42%, rgba(255, 248, 242, .78) 100%);
    -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
  }
}

/* WhatsApp mobile plus discret : petit rond blanc translucide, icône verte */
@media (max-width: 760px) {
  .wa-float {
    width: 44px; height: 44px; right: 14px; bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 253, 252, .82); color: #1FAF5A; border: 1px solid rgba(58, 18, 79, .08);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 6px 16px rgba(58, 18, 79, .14);
  }
  .wa-float .wa-ic { width: 24px; height: 24px; }
}

/* MOBILE, effet verre dépoli : le voile floute tout ce qui passe sous la barre de navigation ET derrière la barre d'adresse de Safari
   (la zone sous Safari dépasse le bas de l'écran du site : on prolonge donc le voile vers le bas) */
@media (max-width: 760px) {
  body::before {
    top: auto; bottom: -190px; height: calc(190px + 160px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255, 248, 242, 0) 0%, rgba(255, 248, 242, .18) 44%, rgba(255, 248, 242, .42) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(1.35) brightness(1.04); backdrop-filter: blur(22px) saturate(1.35) brightness(1.04);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 46%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 46%, #000 100%);
  }
}

/* Contact : l'agenda Calendly n'apparaît qu'après un clic (aucun cookie tiers avant) */
.calendly-gate { min-height: 660px; display: grid; place-items: center; padding: 28px 22px; background: var(--paper-2); border-radius: inherit; }
.calendly-gate.is-live { display: block; padding: 0; background: #fff; height: 680px; }
.calendly-gate.is-live iframe { width: 100%; height: 100%; }
.calendly-gate__box { max-width: 380px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.calendly-gate__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--violet-soft); color: var(--violet-pop); }
.calendly-gate__ic svg { width: 26px; height: 26px; }
.calendly-gate h3 { font-size: 1.4rem; }
.calendly-gate p { font-size: .95rem; line-height: 1.55; }
.calendly-gate small { font-size: .84rem; color: var(--grey-500); line-height: 1.5; }
.calendly-gate small a { color: var(--violet-pop); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bubble .calendly-gate h3 { color: var(--ink); }
.bubble .calendly-gate p { color: var(--grey-700); }
.bubble .calendly-gate small { color: var(--grey-500); }

/* Leviers de l'accueil : texte court + lien « Voir le détail » sur mobile (couleurs héritées de chaque carte) */
.levers .t-short, .levers .lever__more { display: none; }
@media (max-width: 760px) {
  .levers .t-full { display: none; }
  .levers .t-short { display: inline; }
  .levers .lever__more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: inherit; font-family: var(--font-display, inherit); font-weight: 600; font-size: .92rem; text-decoration: none; }
  .levers .lever__more-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-skip-ink: none; }
  .levers .lever__more-ar { text-decoration: none; display: inline-block; }
  .levers .folder, .levers .folder__body, .levers .folder__body > * { min-width: 0; max-width: 100%; }
  .levers .folder__tags { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x pan-y; }
  .levers .folder__tags::-webkit-scrollbar { display: none; }
  /* l'ombre des capsules ne doit pas être rognée par la zone qui défile : marge intérieure compensée par une marge extérieure négative */
  .levers .folder__tags { padding: 8px 0 16px; margin: -8px 0 -16px; }
  .levers .folder__tags a:hover, .levers .folder__tags a:active, .levers .folder__tags a:focus-visible { transform: none; box-shadow: none; }
  .levers .folder__tags > * { flex: 0 0 auto; }
}

/* Accueil, mobile : la carte ATD30 montre seulement la version finale du site (pas de curseur avant/après) */
@media (max-width: 760px) {
  .ba--final-mobile .ba__before, .ba--final-mobile .ba__handle, .ba--final-mobile .ba__range, .ba--final-mobile .ba__tag { display: none; }
}

/* Étoile Waapluka intégrée au CSS : s'affiche aussi quand la page est ouverte depuis un fichier (le navigateur bloque alors les masques externes) */
:root { --waa-star: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath fill=%22%23000%22 d=%22M2.02,31.99c18.64,5.23,25.98,15.71,29.99,31.99.45-1.81.93-3.49,1.44-5.06,4.67-14.47,13.16-22.63,28.55-26.94C43.34,26.75,36,16.28,32,.01c-4,16.27-11.35,26.75-29.98,31.98Z%22/%3E%3C/svg%3E"); }

/* Accueil, mobile : cartes Réalisations du carrousel sans paragraphe (visuel, titre, capsules, lien) et sans grand vide sous le contenu */
@media (max-width: 760px) {
  #realisations .work-grid[data-swipe] .work-card__desc { display: none; }
  #realisations .work-grid[data-swipe] .work-shot, #realisations .work-grid[data-swipe] .ba--card .ba__frame { aspect-ratio: 4 / 3; }
}

/* Accueil, ordinateur : le mot « Waa » du visuel Branding est proportionné au petit cadre des leviers (comme sur Services), il n'est plus rogné */
@media (min-width: 761px) {
  .levers .lm-brand__word { font-size: 2.5rem; }
  .levers .lm-brand__frame { padding: 5px 14px 1px; }
}

/* =========================================================
   MonaHub (import du 2026-10-03) : photos recadrables depuis le portail.
   Au recadrage, le SDK coupe le zoom au bord du parent direct de la photo :
   l'arrondi doit vivre sur ce parent, jamais sur la balise <img>.
   ========================================================= */
/* Avatar du bouton « On en parle ? » : le cadre porte la classe .cta-bubble__avatar. */
.cta-bubble__cadre { display: inline-block; overflow: hidden; }
.cta-bubble__cadre > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Photo ronde de Tessa dans la bulle des bandeaux de fin de page : le cadre reprend la
   boîte de .bubble--person img (54 px, rond, ombre). */
.bubble--person .bubble__photo { display: block; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.bubble--person .bubble__photo > img { width: 100%; height: 100%; border-radius: 0; box-shadow: none; object-fit: cover; display: block; }
/* Photo de la section Méthode : son arrondi (18 px) était déjà masqué par celui de la
   carte (24 à 34 px, overflow hidden) ; le retirer ne change rien à l'écran. */
.method-v4__photo .photo-card img { border-radius: 0; }