/* =====================================================================
   L & L website: Refonte 2026 (clair & éditorial)
   Fichier isolé : n'impacte pas style.css / le site en ligne.
   Direction : base claire, grands titres Bricolage, air, visuels réels
   arrondis à ombre douce, motion sobre (reveals au masque + fondus).
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg:        #FAFAF7;   /* blanc cassé chaud */
  --bg-band:   #F1F0FB;   /* bande de section, légèrement teintée indigo */
  --ink:       #15151E;   /* charbon, quasi noir */
  --ink-soft:  #56566A;   /* corps de texte */
  --ink-faint: #8A8A9A;   /* labels, méta */
  --line:      #E7E4DB;   /* filets fins, chauds */
  --card:      #FFFFFF;
  --accent:    #4F46E5;   /* indigo, fort sur fond clair */
  --accent-ink:#3F37C9;
  --accent-tint:#EEECFB;

  /* Couleurs par catégorie de réalisation (filtres + tags) */
  --cat-vitrine:  #4F46E5;   /* indigo (accent marque) */
  --cat-refonte:  #B45309;   /* ambre (transformation) */
  --cat-boutique: #047857;   /* émeraude (commerce) */
  --cat-saas:     #BE185D;   /* magenta (application) */
  --cat-wordpress:#2271B1;   /* bleu (WordPress) */
  --cat-jeuvideo: #0E8FB3;   /* cyan (jeu vidéo / serveur de jeu) */

  --r:   18px;
  --r-lg:24px;
  --r-pill: 999px;

  --font:    'DM Sans', system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', 'DM Sans', sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.2, 1.12, 0.32, 1);   /* léger dépassement = entrée qui "pose" */
  --shadow-sm: 0 1px 2px rgba(20,20,40,.04), 0 4px 14px -8px rgba(20,20,40,.12);
  --shadow-md: 0 18px 40px -22px rgba(20,20,45,.30), 0 4px 12px -6px rgba(20,20,45,.12);
  --shadow-lg: 0 40px 80px -34px rgba(22,22,55,.40), 0 12px 30px -18px rgba(22,22,55,.18);

  --maxw: 1240px;
  --pad:  clamp(20px, 5vw, 56px);
  --nav-h: 76px;
  --launch-bar-h: 0px;   /* hauteur du bandeau offre fixe (mobile) ; 0 sinon */
}

/* ---------- DARK MODE (palette reprise de la page devis / ancien site) ---------- */
[data-theme="dark"] {
  --bg:        #0D0D18;   /* fond sombre devis */
  --bg-band:   #11111D;   /* bande alternée (--color-bg-alt) */
  --ink:       #E8E8F4;   /* texte (--color-text) */
  --ink-soft:  #8888AA;   /* texte adouci (--color-text-soft) */
  --ink-faint: #6B6B86;   /* labels/méta (dérivé, un cran plus discret) */
  --line:      #252538;   /* filets (--color-border) */
  --card:      #16162A;   /* surfaces/cartes (--color-white) */
  --accent:    #818CF8;   /* indigo clair (--color-accent) */
  --accent-ink:#A0A8FF;   /* variante plus vive pour l'emphase */
  --accent-tint:#1A1A30;  /* teinte d'accent (--color-accent-light) */
  --cat-vitrine:  #818CF8;
  --cat-refonte:  #FBBF24;
  --cat-boutique: #34D399;
  --cat-saas:     #F472B6;
  --cat-wordpress:#6BA8DD;
  --cat-jeuvideo: #34C6F4;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 18px -10px rgba(0,0,0,.5);
  --shadow-md: 0 4px 24px rgba(0,0,0,.4), 0 6px 16px -8px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.5), 0 16px 40px -20px rgba(0,0,0,.55);
}
/* corrections dark : éléments à fond "encre" (l'encre s'éclaircit -> texte sombre) */
[data-theme="dark"] .btn--primary, [data-theme="dark"] .btn--primary:hover { color: #0D0D18; }
[data-theme="dark"] .chip.is-active { color: var(--bg); }
/* Le mockup du hero reste un aperçu CLAIR dans les deux thèmes (comme une capture
   posée sur le hero) : on ré-épingle les tokens en clair sur la carte navigateur. */
.shot--solo {
  --bg:#FAFAF7; --ink:#15151E; --ink-soft:#56566A; --ink-faint:#8A8A9A;
  --line:#E7E4DB; --card:#FFFFFF; --accent:#4F46E5; --accent-tint:#EEECFB;
}
/* en dark, le mockup suit le thème (tokens sombres) au lieu de rester blanc */
[data-theme="dark"] .shot--solo {
  --bg:#0D0D18; --ink:#E8E8F4; --ink-soft:#8888AA; --ink-faint:#6B6B86;
  --line:#252538; --card:#16162A; --accent:#818CF8; --accent-ink:#A0A8FF; --accent-tint:#1A1A30;
}
/* transition douce du fond global au changement de thème (le reste bascule net) */
body { transition: background-color .4s ease, color .4s ease; }
[data-theme="dark"] .duomodal__backdrop, .duomodal__backdrop { background: rgba(8,8,14,.62); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--launch-bar-h) + 16px); }
/* focus clavier homogène (accessibilité) : anneau accent sur tout interactif
   qui n'a pas déjà son propre style de focus. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip (pas hidden) : clippe le débordement horizontal SANS créer de conteneur
     de scroll, sinon position: sticky des cartes Services se casserait. */
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
::selection { background: var(--accent); color: #fff; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.025em; color: var(--ink); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: 14px 24px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
  transition: transform .35s var(--ease), background .25s ease, box-shadow .35s var(--ease), border-color .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 60%, transparent), var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-ink); transform: translateY(-2px); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 65%, transparent), var(--shadow-md); }

.btn--ghost { color: var(--ink); border: 1px solid var(--line); background: var(--card); }
.btn--ghost:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent-ink); background: var(--accent-tint); transform: translateY(-2px); }

/* ---------- Eyebrow / pill ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 7px 15px 7px 13px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  background: var(--accent-tint);
  font-size: 13px; font-weight: 600; color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.16); }

/* ---------- Signature du duo posée sur les aperçus (hero) : badge "verre"
   translucide en bas à droite des shots, comme une signature d'auteur. ---------- */
.hero__sign {
  position: absolute; z-index: 6; right: 0; bottom: clamp(8px, 5%, 40px);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 18px 9px 11px; border-radius: 16px;
  background: color-mix(in srgb, var(--card) 80%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid color-mix(in srgb, #fff 55%, var(--line));
  box-shadow: var(--shadow-lg);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hero__sign:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -22px rgba(22,22,55,.5); }
.hero__sign:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero__sign-txt .hero__sign-cta { color: var(--accent); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; }
.hero__sign-cta .arr { transition: transform .3s var(--ease); }
.hero__sign:hover .hero__sign-cta .arr { transform: translateX(3px); }
.hero__sign-avas { display: inline-flex; flex: 0 0 auto; }
.ava {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 13.5px; color: #fff;
  letter-spacing: -.01em; background: var(--c, var(--accent));
  box-shadow: 0 0 0 2.5px var(--card);
}
.hero__sign-avas .ava + .ava { margin-left: -13px; }
.hero__sign-txt { display: flex; flex-direction: column; line-height: 1.25; }
.hero__sign-txt b { font-size: 14px; font-weight: 700; color: var(--ink); }
.hero__sign-txt i { font-style: normal; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
@media (max-width: 760px) {
  .hero__sign { position: static; margin-top: 20px; width: max-content; max-width: 100%; }
}

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
}
.nav__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.brand b { color: var(--ink); }
.brand .brand__dot { color: var(--accent); }
.brand span { font-family: var(--font); font-weight: 500; font-size: 15px; color: var(--ink-faint); letter-spacing: 0; }

.nav__links { display: flex; align-items: center; gap: 30px; list-style: none; padding: 0; }
.nav__links a { font-size: 15px; font-weight: 500; color: var(--ink-soft); position: relative; transition: color .2s ease; }
.nav__links a::after { content: ''; position: absolute; left: 0; bottom: -5px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: 18px; }
.nav__cta { padding: 11px 20px; font-size: 15px; }

.nav__burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); align-items: center; justify-content: center; }
.nav__burger span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; transition: background .2s; }
.nav__burger span::before, .nav__burger span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); transition: transform .3s var(--ease); }
.nav__burger span::before { top: -6px; }
.nav__burger span::after { top: 6px; }
body.menu-open .nav__burger span { background: transparent; }
body.menu-open .nav__burger span::before { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav__burger span::after { transform: translateY(-6px) rotate(-45deg); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; padding-top: calc(var(--nav-h) + var(--launch-bar-h) + clamp(28px, 6vw, 76px)); padding-bottom: clamp(60px, 9vw, 120px); overflow: hidden; }
/* halo d'accent très discret derrière le visuel (sobre, pas de blob) */
.hero::before {
  content: ''; position: absolute; z-index: 0; right: -8%; top: 4%;
  width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 26%, transparent), transparent 64%);
  filter: blur(10px); pointer-events: none;
}
/* 2e halo, plus doux, en haut à gauche -> le violet baigne tout le hero */
.hero::after {
  content: ''; position: absolute; z-index: 0; left: -10%; top: -6%;
  width: 46vw; height: 46vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);
  filter: blur(14px); pointer-events: none;
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* --- colonne texte --- */
.hero__copy { max-width: 600px; }
.hero__title {
  font-size: clamp(2.7rem, 6vw, 5rem);
  margin-top: 22px;
  letter-spacing: -0.035em;
}
.hero__title .accent { color: var(--accent); position: relative; white-space: nowrap; }
.hero__title .accent::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.07em;
  background: color-mix(in srgb, var(--accent) 36%, transparent); border-radius: 2px;
}
/* mots-piliers accentués : « site » (indigo, vitrine) et « outils » (magenta, application) */
.hero__title .hl { color: var(--hl); position: relative; white-space: nowrap; }
.hero__title .hl::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.07em;
  background: color-mix(in srgb, var(--hl) 42%, transparent); border-radius: 2px;
}
.hero__title .hl--site   { --hl: var(--cat-vitrine); }
.hero__title .hl--outils { --hl: var(--cat-saas); }
.hero__sub {
  margin-top: 24px; font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  color: var(--ink-soft); max-width: 47ch; line-height: 1.62;
}
.hero__sub b { color: var(--ink); font-weight: 600; }

.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero__proof { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin-top: 44px; border-top: 1px solid var(--line); padding-top: 26px; }
.hero__proof div { padding-right: 30px; margin-right: 30px; border-right: 1px solid var(--line); }
.hero__proof div:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hero__proof .k { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--accent); letter-spacing: -0.02em; }
.hero__proof .v { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-faint); }

/* --- colonne visuelle : un seul aperçu (mockup générique), pas de sites clients --- */
.hero__visual { position: relative; width: 100%; max-width: 600px; margin-inline: auto; }

.shot {
  position: relative; background: var(--card); border-radius: var(--r-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden;
}
.shot__bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: #fcfcfb; }
.shot__dots { display: inline-flex; gap: 6px; }
.shot__dots i { width: 9px; height: 9px; border-radius: 50%; background: #e0ddd4; }
.shot__dots i:nth-child(1){ background:#ff5f57; } .shot__dots i:nth-child(2){ background:#febc2e; } .shot__dots i:nth-child(3){ background:#28c840; }
.shot__url { font-size: 12px; color: var(--ink-faint); background: var(--bg); padding: 3px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.shot__view { position: relative; overflow: hidden; }
.shot__view img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* visuel vidéo qui remplit la carte (logo animé) ; fond cyan de secours façon charte */
.shot__vid { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; background: #11607e; }

/* aperçu unique, centré dans la colonne */
.shot--solo { width: 100%; }
.shot__view--mock { aspect-ratio: 4 / 3.05; container-type: inline-size; background: #fff; }

/* MOCKUP VIVANT : aperçu d'un vrai site avec contenu. Le titre s'écrit tout seul
   (machine à écrire, JS) + caret clignotant, et un curseur de souris se balade.
   Tailles en cqw -> net à toute échelle. */
.hmock { position: relative; height: 100%; display: flex; flex-direction: column; color: var(--ink); font-family: var(--font); padding: 3.4cqw 3.6cqw; background: linear-gradient(180deg, #fff, #FAFAFB); }
.hmock__bar2 { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.hmock__brand { display: inline-flex; align-items: center; gap: 1.2cqw; font-family: var(--font-display); font-weight: 800; font-size: clamp(11px, 2.6cqw, 15px); letter-spacing: -.02em; }
.hmock__dot { width: 1.7cqw; height: 1.7cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--accent); }
.hmock__menu { display: inline-flex; gap: 2.4cqw; }
.hmock__menu span { font-size: clamp(8px, 1.9cqw, 11px); color: var(--ink-soft); font-weight: 500; }
.hmock__btn2 { font-size: clamp(8px, 1.9cqw, 11px); font-weight: 700; color: #fff; background: var(--accent); padding: 1.1cqw 2.4cqw; border-radius: 999px; }
.hmock__stage { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.5cqw; }
.hmock__kick { font-size: clamp(7px, 1.7cqw, 10px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.hmock__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(15px, 5cqw, 30px); line-height: 1.06; letter-spacing: -.03em; min-height: 2.2em; }
.hmock__caret { display: inline-block; width: .55cqw; min-width: 2px; height: .95em; vertical-align: -.08em; background: var(--accent); margin-left: 1.4cqw; animation: hmock-caret 1.05s steps(1) infinite; }
@keyframes hmock-caret { 50% { opacity: 0; } }
.hmock__sub { font-size: clamp(8px, 2cqw, 12px); color: var(--ink-soft); line-height: 1.5; max-width: 34ch; }
.hmock__action { width: max-content; font-size: clamp(8px, 1.95cqw, 12px); font-weight: 700; color: var(--bg); background: var(--ink); padding: 1.7cqw 3.2cqw; border-radius: 999px; margin-top: 1.6cqw; box-shadow: 0 2cqw 4cqw -2cqw rgba(20,20,45,.5); }
.hmock__feat { display: flex; flex-wrap: wrap; gap: 1.4cqw; margin-top: 2.6cqw; }
.hmock__chip { font-size: clamp(7px, 1.7cqw, 10px); font-weight: 600; color: var(--accent); background: var(--accent-tint); padding: 1cqw 2.1cqw; border-radius: 999px; }
.hmock__cursor {
  position: absolute; z-index: 5; left: 18%; top: 72%; width: 4cqw; height: 4cqw; min-width: 13px; min-height: 13px;
  pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
  background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 2.5l14.5 7.2-6.3 2-2.2 6.3z" fill="%23141420" stroke="white" stroke-width="1.6" stroke-linejoin="round"/></svg>');
  animation: hmock-cursor 7s ease-in-out infinite;
}
@keyframes hmock-cursor {
  0%   { left: 22%; top: 74%; opacity: 0; }
  10%  { opacity: 1; }
  38%  { left: 13%; top: 58%; opacity: 1; }
  54%  { left: 13%; top: 58%; opacity: 1; }
  84%  { left: 58%; top: 24%; opacity: 1; }
  100% { left: 64%; top: 18%; opacity: 0; }
}

/* le mockup du hero suit le thème : en sombre, fini le bloc blanc qui jure */
[data-theme="dark"] .shot__bar { background: color-mix(in srgb, var(--card) 88%, #000); }
[data-theme="dark"] .shot__view--mock { background: var(--card); }
[data-theme="dark"] .hmock { background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 82%, #000)); }
[data-theme="dark"] .hmock__btn2 { color: #0D0D18; }
[data-theme="dark"] .shot__badge { background: color-mix(in srgb, var(--card) 82%, transparent); }

/* badge "en ligne" flottant, sobre */
.shot__badge {
  position: absolute; z-index: 4; top: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.shot__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
/* variante "bientôt en ligne" (projet en cours / refonte) : pastille ambre */
.shot__badge--soon .dot { background: var(--cat-refonte); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat-refonte) 18%, transparent); }

/* =====================================================================
   MOTION: reveal au masque (au load, pas via IO : aucun deadlock)
   ===================================================================== */
/* texte : fondu + montée */
.reveal-up { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.is-ready .reveal-up { opacity: 1; transform: none; }
.is-ready .reveal-up.d1 { transition-delay: .05s; }
.is-ready .reveal-up.d2 { transition-delay: .13s; }
.is-ready .reveal-up.d3 { transition-delay: .21s; }
.is-ready .reveal-up.d4 { transition-delay: .29s; }
.is-ready .reveal-up.d5 { transition-delay: .37s; }

/* visuels : masque clip-path du bas vers le haut.
   IMPORTANT : pas de 'transform' dans la transition. Le parallax pilote
   'transform: translateY()' à chaque frame de scroll ; une transition dessus
   animerait chaque mise à jour sur 1s -> parallax en retard et saccadé.
   will-change promeut le visuel en couche GPU pour un défilement net. */
.reveal-mask { clip-path: inset(100% 0 0 0); -webkit-clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease); }
.is-ready .reveal-mask { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
.is-ready .shot--main { transition-delay: .2s; }
.is-ready .shot--sub  { transition-delay: .38s; }
[data-parallax] { will-change: transform; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }

  .hero__grid { grid-template-columns: 1fr; gap: clamp(40px, 9vw, 60px); }
  .hero__copy { max-width: 620px; }
  .hero__visual { min-height: 0; height: clamp(340px, 80vw, 460px); margin-top: 8px; }
}
@media (max-width: 560px) {
  .hero__proof div { padding-right: 18px; margin-right: 18px; }
  .hero__proof .k { font-size: 1.25rem; }
  .shot--main { width: 84%; }
  .shot--sub { width: 56%; }
  .btn { width: 100%; justify-content: center; }
  .hero__btns { gap: 10px; }
}

/* --- menu mobile (panneau plein écran sobre) --- */
.mnav { position: fixed; inset: 0; z-index: 99; background: var(--bg); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: var(--pad); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
body.menu-open .mnav { opacity: 1; visibility: visible; }
.mnav a { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 9vw, 3rem); color: var(--ink); letter-spacing: -0.03em; padding: 6px 0; }
.mnav a:hover { color: var(--accent); }
.mnav .btn { width: max-content; margin-top: 22px; }

/* --- accessibilité : on coupe tout le motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-up, .reveal-mask, .ru, .rf, .rm, .rmask { opacity: 1 !important; transform: none !important; clip-path: none !important; -webkit-clip-path: none !important; transition: none !important; }
  .hmock__caret { animation: none !important; opacity: 0 !important; }
  .hmock__cursor { display: none !important; }
  .mstep, .engage__item, .who, .faq__item { opacity: 1 !important; translate: none !important; animation: none !important; }
  /* pas d'empilement collant si l'utilisateur réduit le motion : pile à plat */
  .svc-card { position: static !important; min-height: 0 !important; }
  /* Méthode : pas de scrollytelling -> liste statique lisible, indicateur masqué */
  .mflow { display: block !important; max-width: 640px; }
  .mflow__aside { display: none !important; }
  .mstep { min-height: 0 !important; }
  .rv, .rv * { opacity: 1 !important; translate: none !important; scale: none !important; transition: none !important; }
  .rv .mstep__icn svg *, .rv .engage__icn svg * { stroke-dashoffset: 0 !important; }
  .cta-final__box { opacity: 1 !important; translate: none !important; scale: none !important; transition: none !important; }
  .btn, .nav__links a::after { transition: none !important; }
  .pcard { transform: none !important; opacity: 1 !important; }
}

/* =====================================================================
   SECTIONS: base partagée (réutilisée par toutes les parties à venir)
   ===================================================================== */
.section { padding: clamp(72px, 11vw, 140px) 0; }
.section--band { background: var(--bg-band); }

.kicker { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

.section__head { max-width: 740px; margin: 0 auto clamp(48px, 7vw, 88px); text-align: center; }
.section__head h2 { font-size: clamp(2rem, 4vw, 3.3rem); margin-top: 16px; }
.section__head p { margin-top: 18px; color: var(--ink-soft); font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.6; }

/* couleur de catégorie héritée par les tags : l'ordre fait la précédence
   (la dernière règle qui matche gagne) -> wordpress > refonte > saas > boutique > vitrine */
.pcard[data-cat~="vitrine"]   { --cat: var(--cat-vitrine); }
.pcard[data-cat~="boutique"]  { --cat: var(--cat-boutique); }
.pcard[data-cat~="saas"]      { --cat: var(--cat-saas); }
.pcard[data-cat~="refonte"]   { --cat: var(--cat-refonte); }
.pcard[data-cat~="wordpress"] { --cat: var(--cat-wordpress); }
.pcard[data-cat~="jeuvideo"]  { --cat: var(--cat-jeuvideo); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; list-style: none; padding: 0; }
.tags li {
  font-size: 13px; font-weight: 600;
  color: var(--cat, var(--ink-soft));
  padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--cat, var(--ink-faint)) 38%, var(--line));
  background: color-mix(in srgb, var(--cat, var(--card)) 10%, var(--card));
}

.link-underline { display: inline-flex; align-items: center; gap: .5em; margin-top: 26px; font-weight: 600; color: var(--ink); position: relative; width: max-content; }
.link-underline::after { content: ''; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.link-underline:hover::after { transform: scaleX(1); }
.link-underline .arr { transition: transform .35s var(--ease); }
.link-underline:hover .arr { transform: translateX(4px); }

/* =====================================================================
   REVEAL AU SCROLL: l'élément OBSERVÉ (.reveal-on-scroll) n'est JAMAIS
   clippé ; le masque (.rm) et les fondus (.ru) portent sur ses ENFANTS.
   C'est exactement le découplage qui évite le deadlock clip-path + IO.
   ===================================================================== */
.reveal-on-scroll .ru { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal-on-scroll.in-view .ru { opacity: 1; transform: none; }
/* reveal en opacité seule : ne touche PAS à transform, donc compatible avec
   les éléments dont le survol soulève (cartes engagements / fiches duo / boutons) */
.reveal-on-scroll .rf { opacity: 0; transition: opacity .85s var(--ease); }
.reveal-on-scroll.in-view .rf { opacity: 1; }
.reveal-on-scroll .rm { clip-path: inset(100% 0 0 0); -webkit-clip-path: inset(100% 0 0 0); transform: scale(1.04); transition: clip-path 1s var(--ease), transform 1s var(--ease); }
.reveal-on-scroll.in-view .rm { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); transform: none; }
.dly1 { transition-delay: .07s; } .dly2 { transition-delay: .15s; } .dly3 { transition-delay: .23s; } .dly4 { transition-delay: .31s; }

/* Titre dévoilé par un masque qui monte (wipe éditorial, sobre). Sans scale :
   le texte reste net. À réserver aux éléments SANS transform au hover. */
.reveal-on-scroll .rmask { clip-path: inset(108% 0 0 0); -webkit-clip-path: inset(108% 0 0 0); transition: clip-path .95s var(--ease); }
.reveal-on-scroll.in-view .rmask { clip-path: inset(-8% 0 0 0); -webkit-clip-path: inset(-8% 0 0 0); }

/* =====================================================================
   REVEAL PAR ÉLÉMENT (.rv): chaque carte/ligne se révèle quand ELLE entre
   dans le viewport (JS : un IntersectionObserver par élément). C'est ce qui
   donne "les éléments arrivent les uns après les autres quand on scrolle".
   Entrée ample : montée 72px + léger scale, easing à rebond (--spring).
   On anime 'translate'/'scale' (props indépendantes) -> composable avec le
   survol qui, lui, pilote 'transform'. --i = micro-décalage entre voisins.
   ===================================================================== */
.rv { opacity: 0; translate: 0 72px; scale: .96;
  transition: opacity .65s var(--ease), translate .9s var(--spring), scale .9s var(--spring);
  transition-delay: calc(var(--i, 0) * .09s); }
.rv.rv-in { opacity: 1; translate: 0 0; scale: 1; }

/* icônes line-art qui se dessinent à l'arrivée (stroke-dashoffset). Réservé aux
   icônes toujours visibles (Méthode, Engagements): pas la tuile Services
   qui, elle, n'apparaît qu'au survol. */
.rv .mstep__icn svg *, .rv .engage__icn svg * {
  stroke-dasharray: 340; stroke-dashoffset: 340;
  transition: stroke-dashoffset 1.1s var(--ease) calc(.2s + var(--i, 0) * .09s);
}
.rv.rv-in .mstep__icn svg *, .rv.rv-in .engage__icn svg * { stroke-dashoffset: 0; }

/* SÉQUENCE INTERNE: la carte arrive (rv), puis sa "data" se pose dans l'ordre :
   d'abord numéro/icône/avatar, puis le titre. Les paragraphes suivent la carte.
   Effet "données qui se posent proprement", sans fragmenter à l'excès. */
.rv .mstep__no, .rv .mstep__icn, .rv .engage__icn, .rv .who__ava, .rv .svc-row__no,
.rv .mstep__card h3, .rv .engage__item h3, .rv .who__txt h3, .rv .svc-row__txt h3 {
  opacity: 0; translate: 0 16px;
  transition: opacity .5s var(--ease), translate .6s var(--spring);
}
.rv .mstep__no, .rv .mstep__icn, .rv .engage__icn, .rv .who__ava, .rv .svc-row__no { transition-delay: .14s; }
.rv .mstep__card h3, .rv .engage__item h3, .rv .who__txt h3, .rv .svc-row__txt h3 { transition-delay: .24s; }
.rv.rv-in .mstep__no, .rv.rv-in .mstep__icn, .rv.rv-in .engage__icn, .rv.rv-in .who__ava, .rv.rv-in .svc-row__no,
.rv.rv-in .mstep__card h3, .rv.rv-in .engage__item h3, .rv.rv-in .who__txt h3, .rv.rv-in .svc-row__txt h3 {
  opacity: 1; translate: 0 0;
}

/* =====================================================================
   PROJETS: vitrine consultable (carrousel + recherche + filtres + fiche)
   Pensée pour rester lisible quel que soit le nombre de clients.
   ===================================================================== */
.projects { overflow: hidden; }

.projects__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.projects__head h2 { font-size: clamp(2rem, 4vw, 3.3rem); margin-top: 14px; }

/* flèches du carrousel */
.cbtn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), border-color .25s ease, color .25s ease, opacity .25s ease;
}
.cbtn:hover { border-color: var(--ink); transform: translateY(-2px); }
.cbtn:disabled { opacity: .32; cursor: default; transform: none; box-shadow: none; }

/* barre d'outils : recherche + filtres par type */
.projects__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: clamp(28px, 4vw, 44px); }
.search { position: relative; flex: 1 1 320px; max-width: 440px; }
.search__icn { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--ink-faint); pointer-events: none; }
.search input {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  padding: 13px 16px 13px 44px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search input::placeholder { color: var(--ink-faint); }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* une couleur par catégorie ; « Tous » reste neutre (encre) */
.chip[data-cat="all"]       { --cat: var(--ink); }
.chip[data-cat="vitrine"]   { --cat: var(--cat-vitrine); }
.chip[data-cat="refonte"]   { --cat: var(--cat-refonte); }
.chip[data-cat="boutique"]  { --cat: var(--cat-boutique); }
.chip[data-cat="saas"]      { --cat: var(--cat-saas); }
.chip[data-cat="wordpress"] { --cat: var(--cat-wordpress); }
.chip[data-cat="jeuvideo"]  { --cat: var(--cat-jeuvideo); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600;
  color: color-mix(in srgb, var(--cat) 72%, var(--ink));
  padding: 9px 15px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--cat) 32%, var(--line));
  background: var(--card);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cat); flex: none;
}
.chip:hover { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 10%, var(--card)); }
.chip.is-active { background: var(--cat); color: #fff; border-color: var(--cat); }
.chip.is-active::before { background: currentColor; }

/* piste : défilement horizontal, alignée au bord du container */
.carousel { margin-top: clamp(34px, 5vw, 56px); }
.carousel__viewport {
  --card-w: clamp(280px, 62vw, 440px);
  display: flex; gap: clamp(18px, 2.4vw, 30px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* gros retrait latéral : permet à la 1re et à la dernière carte d'atteindre le centre */
  padding-inline: max(var(--pad), calc((100% - var(--card-w)) / 2));
  scroll-padding-inline: max(var(--pad), calc((100% - var(--card-w)) / 2));
  padding-block: 20px 56px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; cursor: grab;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.carousel__viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-lg); }
.carousel__viewport img { -webkit-user-drag: none; user-select: none; }

/* carte projet cliquable: la carte centrée est mise en avant (plus grande),
   les voisines rapetissent et s'estompent. Échelle/opacité pilotées au scroll
   via --s / --o (mises à jour en JS, pas de transition pour coller au geste). */
.pcard {
  flex: 0 0 var(--card-w); scroll-snap-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
  display: flex; flex-direction: column;
  transform: scale(var(--s, 1)); transform-origin: center center;
  opacity: var(--o, 1);
  transition: box-shadow .4s var(--ease);
  will-change: transform;
}
.pcard[hidden] { display: none; }
.pcard:hover { box-shadow: var(--shadow-md); }
.pcard.is-focused { box-shadow: var(--shadow-lg); }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pcard .shot { border: none; border-radius: 0; box-shadow: none; }
.pcard .shot__view { aspect-ratio: 16 / 11; }
.pcard__body { padding: clamp(18px, 2.2vw, 24px); display: flex; flex-direction: column; flex: 1; }
.pcard__body h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.pcard__meta { color: var(--accent); font-weight: 600; font-size: .95rem; margin-top: 6px; }
.pcard .tags { margin-top: 16px; }
.pcard__more { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: .5em; font-weight: 600; font-size: 15px; color: var(--ink); transition: color .25s ease; }
.pcard__more .arr { transition: transform .35s var(--ease); }
.pcard:hover .pcard__more { color: var(--accent); }
.pcard:hover .pcard__more .arr { transform: translateX(4px); }

/* état vide (recherche sans résultat) + pagination en points */
.carousel__empty { text-align: center; color: var(--ink-soft); font-size: 1.05rem; padding: 40px 0 8px; }
/* pied du carrousel : flèche ‹ · points · flèche › (centré, bien visible) */
.carousel__foot { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 24px); margin-top: clamp(22px, 3vw, 32px); }
.carousel__foot[hidden] { display: none; }
.carousel__dots { display: flex; justify-content: center; gap: 9px; }
.carousel__dots:empty { display: none; }
.carousel__dots button { width: 8px; height: 8px; border-radius: 50%; padding: 0; background: var(--line); transition: width .3s var(--ease), background .25s ease; }
.carousel__dots button.is-active { width: 26px; border-radius: var(--r-pill); background: var(--accent); }

@media (max-width: 600px) {
  .projects__head { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   OFFRE DE LANCEMENT : carte claire teintée accent, sobre (toujours visible)
   ===================================================================== */
.launch { padding: clamp(8px, 2vw, 24px) 0 clamp(44px, 6vw, 80px); }
.launch__box {
  position: relative; overflow: hidden;
  max-width: 1040px; margin-inline: auto;
  display: grid; grid-template-columns: 1.5fr auto; align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(30px, 4.5vw, 52px) clamp(26px, 4vw, 56px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--accent-tint), color-mix(in srgb, var(--accent-tint) 42%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  box-shadow: var(--shadow-md);
}
/* halo accent discret, dans l'esprit des halos de la DA */
.launch__box::after {
  content: ''; position: absolute; right: -90px; top: -90px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  pointer-events: none;
}
.launch__main { position: relative; z-index: 1; }
.launch__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.launch__tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.launch__title {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.08; letter-spacing: -.02em;
  margin-top: 14px;
}
.launch__txt {
  max-width: 52ch; margin-top: 14px; line-height: 1.6;
  color: var(--ink-soft); font-size: clamp(1rem, 1.25vw, 1.1rem);
}
.launch__action { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.launch__cta { white-space: nowrap; }
.launch__cta-mini { display: none; }
.launch__note { font-size: 13px; color: var(--ink-faint); }

/* MOBILE : l'offre devient un bandeau fin ANCRÉ (fixe) juste sous le header,
   toujours visible. La hauteur est reportée sur --launch-bar-h, qui décale le
   hero et les éléments collants (services, méthode) pour éviter tout recouvrement. */
@media (max-width: 760px) {
  :root { --launch-bar-h: 58px; }
  .launch {
    position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99;
    padding: 0;
    /* clair raffiné : fond carte + filet fin, attire l'oeil par contraste net */
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 22px -16px rgba(20, 20, 45, .45);
  }
  .launch__box {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    grid-template-columns: none; max-width: none; margin: 0;
    min-height: var(--launch-bar-h); box-sizing: border-box;
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .launch__box::after { display: none; }
  .launch__title, .launch__txt, .launch__note { display: none; }
  .launch__main, .launch__action { margin: 0; min-width: 0; }
  .launch__tag {
    margin: 0; color: var(--accent); font-weight: 700; font-size: 12px;
    letter-spacing: .1em; white-space: nowrap;
  }
  .launch__tag .dot {
    width: 9px; height: 9px; background: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
    animation: launchPing 1.8s ease-out infinite;
  }
  /* bouton : accent plein standard (gère déjà clair/sombre), juste redimensionné */
  .launch__cta { width: auto; padding: 9px 16px; font-size: 14px; }
  .launch__cta-full { display: none; }
  .launch__cta-mini { display: inline; }
}
/* ping discret du point (indicateur "live"), coupé si motion réduit */
@keyframes launchPing {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .launch__tag .dot { animation: none; }
}

/* =====================================================================
   FICHE PROJET: modale détaillée
   ===================================================================== */
.pmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility .3s; }
.pmodal.is-open { visibility: visible; opacity: 1; }
body.pmodal-open { overflow: hidden; }
.pmodal__backdrop { position: absolute; inset: 0; background: rgba(18,18,30,.46); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pmodal__panel {
  position: relative; z-index: 1;
  width: min(960px, 100%); max-height: min(88vh, 760px); overflow: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1.15fr 1fr;
  transform: translateY(16px) scale(.99); transition: transform .4s var(--ease);
}
.pmodal.is-open .pmodal__panel { transform: none; }
.pmodal__close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
  transition: transform .25s var(--ease), background .2s ease;
}
.pmodal__close svg { width: 20px; height: 20px; }
.pmodal__close:hover { transform: rotate(90deg); background: #fff; }

/* contexte d'empilement isolé : confine les z-index du comparateur (slider z:5,
   poignée z:4) pour qu'ils ne remontent pas par-dessus la croix de fermeture.
   Sans ça, en mono-colonne (<760px) le slider recouvre la croix et vole le clic. */
.pmodal__visual { position: relative; z-index: 0; background: var(--bg-band); display: flex; align-items: center; justify-content: center; padding: clamp(18px, 2.5vw, 30px); }
.pmodal__visual .shot { width: 100%; box-shadow: var(--shadow-md); }
.pmodal__visual .shot__view { aspect-ratio: 4 / 3; }

.pmodal__body { padding: clamp(26px, 3.4vw, 44px); display: flex; flex-direction: column; }
.pmodal__badge { display: inline-flex; align-items: center; gap: 7px; width: max-content; padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-sm); }
.pmodal__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.pmodal__body h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-top: 16px; }
.pmodal__meta { color: var(--accent); font-weight: 600; margin-top: 8px; }
.pmodal__desc { color: var(--ink-soft); margin-top: 18px; line-height: 1.62; }
.pmodal__body .tags { margin-top: 20px; }
.pmodal__body .btn { margin-top: 28px; width: max-content; }

@media (max-width: 760px) {
  .pmodal__panel { grid-template-columns: 1fr; max-height: 90vh; }
  .pmodal__visual { padding: 18px 18px 0; }
}

/* comparateur avant / après (refontes) */
.cmp { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-md); background: #fff; user-select: none; }
.cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cmp__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); -webkit-clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.cmp__label { position: absolute; top: 12px; z-index: 3; padding: 5px 11px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: rgba(18,18,30,.6); color: #fff; backdrop-filter: blur(4px); pointer-events: none; }
.cmp__label--before { left: 12px; }
.cmp__label--after { right: 12px; }
.cmp__divider { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); z-index: 3; pointer-events: none; }
.cmp__handle { position: absolute; top: 50%; left: var(--pos, 50%); transform: translate(-50%, -50%); z-index: 4; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); display: grid; place-items: center; color: var(--ink); pointer-events: none; }
.cmp__handle svg { width: 20px; height: 20px; }
.cmp__range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; padding: 0; background: transparent; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: none; }
.cmp__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; background: transparent; cursor: ew-resize; }
.cmp__range::-moz-range-thumb { width: 44px; height: 100%; border: none; background: transparent; cursor: ew-resize; }
.cmp__range::-moz-range-track { background: transparent; }
.cmp__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Mockup applicatif (Crew Manager) : pas de screenshot exploitable
   (la capture tombait sur le challenge Cloudflare), on reconstruit une UI
   sobre en CSS, cohérente avec la DA claire. --- */
.shot__view--app { aspect-ratio: 16 / 11; background: #fff; }
/* vidéo de démo (Crew Manager) : contain sur fond blanc -> interface complète,
   fines marges blanches qui se fondent avec le fond clair de l'app. */
.appvid { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
/* en modale, la boîte épouse le 16/9 de la vidéo : plein cadre, sans marges. */
.pmodal__visual .shot__view--app { aspect-ratio: 16 / 9; }

/* =====================================================================
   SERVICES: empilement de cartes (deck) : les 4 prestations sont des cartes
   opaques qui se collent sous la nav et se recouvrent au scroll (02 par-dessus
   01, etc.), façon panneaux empilés du site de Ninon. Effet 100% CSS sticky.
   ===================================================================== */
/* EMPILEMENT (deck) : chaque carte est en position: sticky et se colle sous la
   nav ; comme elles sont en flux normal avec un écart, la suivante glisse par-
   dessus la précédente au scroll (02 recouvre 01, 03 recouvre 02...). Chaque
   carte se colle 12px plus bas que la précédente -> on voit le bord de la pile
   se construire. 100% CSS, aucun pin JS. (sticky OK : body en overflow-x:clip) */
.svc-stack {
  max-width: 980px; margin-inline: auto;
  display: flex; flex-direction: column;
  gap: clamp(20px, 3vw, 40px);
}
.svc-card {
  position: -webkit-sticky; position: sticky;
  top: calc(var(--nav-h) + var(--launch-bar-h) + clamp(18px, 3vw, 36px) + var(--i) * 12px);
  min-height: clamp(290px, 44vh, 410px);
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: clamp(20px, 2.4vw, 30px);
  padding: clamp(28px, 4vw, 54px);
  box-shadow: var(--shadow-lg);
}
.svc-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.svc-card__no {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1;
  color: var(--accent); letter-spacing: -.04em;
}
.svc-card__no i {
  font-style: normal; font-size: .3em; font-weight: 600;
  color: var(--ink-faint); margin-left: .5em; letter-spacing: .06em;
}
.svc-card__icn {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: clamp(52px, 6vw, 72px); height: clamp(52px, 6vw, 72px);
  border-radius: 18px; background: var(--accent-tint); color: var(--accent);
  transition: background .3s ease, color .3s ease;
}
.svc-card__icn svg { width: clamp(26px, 3vw, 32px); height: clamp(26px, 3vw, 32px); }
.svc-card__title { font-size: clamp(1.7rem, 3.4vw, 2.7rem); margin-top: auto; }
.svc-card__desc { color: var(--ink-soft); margin-top: 14px; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; max-width: 54ch; }
.svc-card:hover { border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }
.svc-card:hover .svc-card__icn { background: var(--accent); color: #fff; }

.svc-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 16px; margin-top: clamp(40px, 6vw, 72px); text-align: center;
}
.svc-foot p { color: var(--ink-soft); font-size: 1.05rem; }
.svc-foot .link-underline { margin-top: 0; }

@media (max-width: 720px) {
  .svc-card { min-height: clamp(240px, 56vw, 320px); padding: clamp(24px, 6vw, 34px); }
  .svc-card__title { font-size: clamp(1.5rem, 7vw, 2rem); }
  .svc-foot { flex-direction: column; }
  /* cartes projets : hauteur naturelle (plus d'étirement -> fin du grand vide
     avant « Voir la fiche ») */
  .carousel__viewport { align-items: flex-start; }
}

/* =====================================================================
   MÉTHODE: scrollytelling : un grand numéro COLLANT à gauche avance 01 -> 04
   pendant que les 4 étapes défilent à droite. L'étape la plus proche du centre
   s'allume (JS), les autres s'effacent ; la barre de progression se remplit.
   Mécanisme volontairement différent du deck Services (pas d'empilement).
   ===================================================================== */
.mflow {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 5vw, 80px);
  max-width: 1100px; margin-inline: auto;
}
/* colonne gauche : indicateur collant. L'aside s'étire sur toute la hauteur des
   étapes (align stretch par défaut) -> le .mflow__sticky a de la course. */
.mflow__sticky {
  position: -webkit-sticky; position: sticky;
  top: calc(var(--nav-h) + var(--launch-bar-h) + clamp(48px, 18vh, 170px));
}
.mflow__nums { position: relative; height: clamp(5.5rem, 15vw, 11rem); }
.mflow__big {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(6.5rem, 16vw, 13rem); line-height: .82;
  letter-spacing: -.05em; color: var(--accent);
  opacity: 0; translate: 0 26px; scale: .9;
  transition: opacity .5s var(--ease), translate .6s var(--spring), scale .6s var(--spring);
}
.mflow__big.is-on  { opacity: 1; translate: 0 0; scale: 1; }       /* arrive du bas */
.mflow__big.is-out { opacity: 0; translate: 0 -26px; scale: .9; }  /* sort vers le haut */
.mflow__track { margin-top: clamp(22px, 3vw, 38px); height: 4px; border-radius: 99px; background: var(--line); }
.mflow__track-fill { display: block; height: 100%; width: 25%; background: var(--accent); border-radius: 99px; transition: width .55s var(--ease); }
.mflow__caption { display: block; margin-top: 15px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.mflow__caption b { color: var(--accent); }

/* colonne droite : les étapes. Chacune occupe ~ une hauteur d'écran -> une
   seule active à la fois. .is-live (ajouté par le JS) active l'estompage des
   inactives ; sans JS / motion réduit, tout reste lisible (opacité pleine). */
.mflow__steps { list-style: none; padding: 0; margin: 0; counter-reset: mstep; }
.mstep {
  counter-increment: mstep;
  display: flex; gap: clamp(16px, 2vw, 28px); align-items: center;
  min-height: clamp(360px, 56vh, 560px);
}
.mflow.is-live .mstep { opacity: .3; transition: opacity .5s var(--ease); }
.mflow.is-live .mstep.is-active { opacity: 1; }
.mstep__icn {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: clamp(48px, 5vw, 60px); height: clamp(48px, 5vw, 60px);
  border-radius: 15px; background: var(--accent-tint); color: var(--accent);
  transition: background .45s var(--ease), color .45s var(--ease), transform .5s var(--spring);
}
.mflow.is-live .mstep.is-active .mstep__icn { background: var(--accent); color: #fff; transform: scale(1.05); }
.mstep__icn svg { width: clamp(24px, 2.6vw, 30px); height: clamp(24px, 2.6vw, 30px); }
.mstep__txt h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.mstep__txt h3::before {
  content: counter(mstep, decimal-leading-zero);
  display: block; font-size: .85rem; font-weight: 700; letter-spacing: .14em;
  color: var(--ink-faint); margin-bottom: 12px;
}
.mstep__txt p { color: var(--ink-soft); margin-top: 12px; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.65; max-width: 52ch; }

/* mobile : on GARDE le scrollytelling, en version compacte. Le numéro géant
   devient un bandeau COLLANT en haut (il avance 01 -> 04 + barre de progression),
   et les étapes défilent dessous en s'allumant une à une. */
@media (max-width: 860px) {
  .mflow { display: block; max-width: 600px; }
  /* c'est l'ASIDE qui devient collant (il a de la course : .mflow est haute) ;
     .mflow__sticky n'est plus que la barre visuelle à l'intérieur.
     Fond PLEIN + filet (pas de dégradé transparent) : le texte des étapes
     défile dessous sans jamais transparaître sous le numéro. */
  .mflow__aside {
    display: block;
    position: -webkit-sticky; position: sticky;
    top: calc(var(--nav-h) + var(--launch-bar-h) + 4px); z-index: 3;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .mflow__sticky {
    position: static; top: auto;
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    column-gap: clamp(14px, 4vw, 20px); row-gap: 4px;
    padding: 10px 0 12px;
  }
  /* la colonne du numéro a une largeur RÉELLE (le .mflow__big est en
     position:absolute -> sans width explicite la colonne s'effondre à 0 et le
     numéro déborde sur la barre + la légende). On la dimensionne sur la police. */
  .mflow__nums {
    grid-row: 1 / span 2;
    position: relative;
    /* largeur calée sur le numéro le PLUS large (04 ~= 1.2x la police), pas sur
       01 : sinon overflow:hidden rogne le 2e chiffre des 02/03/04. */
    width: clamp(3.75rem, 16vw, 5.5rem);
    height: clamp(3rem, 13vw, 4.4rem);
    overflow: hidden;
  }
  /* numéro recentré verticalement, on conserve l'anim entrée(+)/sortie(-) */
  .mflow__big { font-size: clamp(3rem, 13vw, 4.4rem); line-height: 1; top: 50%; translate: 0 calc(-50% + 22px); }
  .mflow__big.is-on  { translate: 0 -50%; }
  .mflow__big.is-out { translate: 0 calc(-50% - 22px); }
  .mflow__track { grid-column: 2; align-self: end; margin-top: 0; }
  .mflow__caption { grid-column: 2; align-self: start; margin-top: 0; font-size: 12px; }
  .mstep {
    min-height: 0; gap: clamp(14px, 4vw, 22px); align-items: flex-start;
    padding: clamp(22px, 6vw, 34px) 0; border-bottom: 1px solid var(--line);
    scroll-margin-top: calc(var(--nav-h) + 120px);
  }
  .mstep:last-child { border-bottom: 0; }
  /* l'étape active s'allume (effet plus doux que sur desktop) */
  .mflow.is-live .mstep { opacity: .46; transition: opacity .45s var(--ease); }
  .mflow.is-live .mstep.is-active { opacity: 1; }
  .mflow.is-live .mstep.is-active .mstep__icn { background: var(--accent); color: #fff; transform: none; }
}

/* =====================================================================
   FAQ: accordéon sobre (ouverture fluide via grid-template-rows 0fr->1fr)
   ===================================================================== */
.faq__list { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(20px, 2.4vw, 28px) clamp(4px, 1vw, 12px);
  text-align: left; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.08rem, 1.7vw, 1.32rem); color: var(--ink); letter-spacing: -.01em;
  transition: color .25s ease;
}
.faq__q:hover { color: var(--accent); }
.faq__chev {
  flex: 0 0 auto; display: inline-flex; color: var(--ink-faint);
  transition: transform .4s var(--ease), color .25s ease;
}
.faq__chev svg { width: 22px; height: 22px; }
.faq__item.is-open .faq__q { color: var(--accent); }
.faq__item.is-open .faq__chev { transform: rotate(180deg); color: var(--accent); }

.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; min-height: 0; }
.faq__a-inner p {
  color: var(--ink-soft); line-height: 1.62; max-width: 70ch;
  padding: 0 clamp(4px, 1vw, 12px) clamp(22px, 2.4vw, 28px);
}

/* entrée des questions : reveal PAR ÉLÉMENT (.rv), voir bloc MOTION plus haut */

/* =====================================================================
   CONTACT: invitation à gauche + vrai formulaire à droite (envoi Web3Forms
   en AJAX, comme /devis). Remplace l'ancien panneau sombre.
   ===================================================================== */
.contact { padding-bottom: clamp(64px, 9vw, 130px); }
.contact__grid {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 72px); align-items: start;
  max-width: 1060px; margin-inline: auto;
}
.contact__intro { max-width: 460px; }
.contact__intro h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-top: 16px; }
.contact__intro > p { margin-top: 18px; color: var(--ink-soft); font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.6; }
.contact__pts { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 13px; }
.contact__pts li { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 500; }
.contact__pts-ic {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--accent-tint); color: var(--accent);
}
.contact__alt { margin-top: 28px; color: var(--ink-faint); font-size: .98rem; }
.contact__alt a { color: var(--accent); font-weight: 600; }
.contact__alt a:hover { text-decoration: underline; }

.contact__form {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 16px;
}
.ct-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-field { display: flex; flex-direction: column; gap: 7px; }
.ct-field > span { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ct-field > span i { font-style: normal; font-weight: 400; color: var(--ink-faint); }
.ct-field input, .ct-field select, .ct-field textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ct-field textarea { resize: vertical; min-height: 104px; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--ink-faint); }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--card);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.ct-submit { margin-top: 4px; align-self: flex-start; }
.ct-status { font-size: 14px; margin: 0; min-height: 1.1em; }
.ct-status.is-error { color: #c0362c; }
.contact__form.is-sent { align-items: center; justify-content: center; text-align: center; min-height: 300px; gap: 8px; }
.contact__form.is-sent h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.contact__form.is-sent p { color: var(--ink-soft); max-width: 38ch; }

@media (max-width: 860px) {
  .contact__grid { grid-template-columns: 1fr; gap: clamp(28px, 7vw, 40px); }
  .contact__intro { max-width: 640px; }
}
@media (max-width: 480px) {
  .ct-row { grid-template-columns: 1fr; }
  .ct-submit { width: 100%; justify-content: center; }
}

/* ============================================================
   CHATBOT (porté du site principal): variables de thème aliasées
   sur la palette claire de la refonte. Le reste du bloc est verbatim.
   ============================================================ */
.cmb {
  --color-accent: var(--accent);
  --color-accent-hover: #4338CA;
  --color-white: var(--card);
  --color-text: var(--ink);
  --color-text-soft: var(--ink-faint);
  --color-border: var(--line);
  --color-bg: var(--bg);
}
/* en sombre, le dégradé du chatbot reprend l'accent-hover de la page devis */
[data-theme="dark"] .cmb { --color-accent-hover: #6366F1; }
/* ============================================================
   CHATBOT (assistant L&L): scopé .cmb, suit palette + thème
   ============================================================ */
.cmb {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  /* le conteneur ne doit jamais avaler les clics : sa zone (~380x630 en bas à
     droite) recouvrait sinon les éléments derrière, dont les puces de filtre. */
  pointer-events: none;
}

/* Fiabilité du tap mobile : pas de délai 300 ms, pas de surcouche qui avale
   le clic, le halo décoratif ne capte jamais les événements. */
.cmb__launcher,
.cmb__close,
.cmb__send,
.cmb__chip,
.cmb__msg a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cmb__ring { pointer-events: none; }
/* seuls le lanceur (toujours) et le panneau quand il est ouvert reçoivent le clic ;
   panneau fermé = visibility:hidden, donc déjà non cliquable. */
.cmb__launcher,
.cmb__panel { pointer-events: auto; }

/* --- Bouton flottant --- */
.cmb__launcher {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-accent) 40%, transparent),
              0 4px 12px rgba(0, 0, 0, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cmb__launcher:hover { transform: translateY(-2px) scale(1.04); }
.cmb__launcher:active { transform: scale(0.97); }
.cmb__launcher svg {
  width: 25px;
  height: 25px;
  position: absolute;
  transition: opacity 0.18s ease, transform 0.25s ease;
}
.cmb__ico-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.cmb--open .cmb__ico-open { opacity: 0; transform: rotate(90deg) scale(0.6); }
.cmb--open .cmb__ico-close { opacity: 1; transform: rotate(0) scale(1); }
.cmb__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0;
  animation: cmb-ring 2.6s ease-out infinite;
}
.cmb--open .cmb__ring { display: none; }
@keyframes cmb-ring {
  0%   { opacity: 0.5; transform: scale(1); }
  70%  { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .cmb__ring { animation: none; }
  .cmb__launcher, .cmb__launcher svg { transition: none; }
}

/* --- Panneau --- */
.cmb__panel {
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 130px));
  height: min(560px, calc(100dvh - 130px)); /* dvh : tient compte de la barre mobile */
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.cmb--open .cmb__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.cmb__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
}
.cmb__head-id { display: flex; align-items: center; gap: 12px; }
.cmb__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cmb__avatar svg { width: 20px; height: 20px; }
.cmb__title { font-weight: 700; font-size: 0.98rem; }
.cmb__status {
  font-size: 0.76rem;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cmb__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: cmb-pulse 2s infinite;
}
@keyframes cmb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.cmb__close {
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.cmb__close:hover { background: rgba(255, 255, 255, 0.3); }
.cmb__close svg { width: 15px; height: 15px; }

.cmb__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain; /* le scroll du chat ne fait pas défiler la page */
  -webkit-overflow-scrolling: touch;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-bg);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-accent) 45%, transparent) transparent;
}
.cmb__body::-webkit-scrollbar { width: 7px; }
.cmb__body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-accent) 38%, transparent);
  border-radius: 4px;
}

.cmb__msg {
  max-width: 86%;
  padding: 11px 14px;
  font-size: 0.9rem;
  line-height: 1.55;
  border-radius: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
  animation: cmb-in 0.25s ease;
}
@keyframes cmb-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cmb__msg--bot {
  align-self: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px;
}
.cmb__msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.cmb__msg a {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 34%, transparent);
  transition: filter 0.15s ease, transform 0.12s ease;
}
.cmb__msg a::after { content: " \2192"; }
.cmb__msg a:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cmb__msg a:active { transform: translateY(0) scale(0.98); }
.cmb__msg--user a {
  background: #fff;
  color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.cmb__msg b, .cmb__msg strong { font-weight: 700; }

.cmb__typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.cmb__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text);
  opacity: 0.4;
  animation: cmb-bounce 1.2s infinite;
}
.cmb__typing span:nth-child(2) { animation-delay: 0.15s; }
.cmb__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cmb-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30%           { transform: translateY(-4px); opacity: 0.9; }
}

/* Suggestions dans le fil (sous la réponse) : pas de barre, pas de scroll
   propre, elles passent à la ligne. Un seul ascenseur = le corps du chat. */
.cmb__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: stretch;
  margin-top: -4px;
}
.cmb__chip {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-white);
  border: 1.5px solid var(--color-accent);
  border-radius: 999px;
  padding: 7px 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.cmb__chip:hover {
  background: var(--color-accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.cmb__chip:active { transform: translateY(0) scale(0.97); }

.cmb__input {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
  background: var(--color-white);
}
.cmb__input input {
  flex: 1;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--color-text);
  background: var(--color-bg);
  outline: none;
  transition: border-color 0.15s ease;
}
.cmb__input input:focus { border-color: var(--color-accent); }
.cmb__send {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, opacity 0.15s ease;
}
.cmb__send:hover { transform: scale(1.06); }
.cmb__send:disabled { opacity: 0.5; }
.cmb__send svg { width: 18px; height: 18px; }

.cmb__foot {
  font-size: 0.72rem;
  color: var(--color-text-soft);
  text-align: center;
  padding: 8px 14px 12px;
  background: var(--color-white);
}
.cmb__foot a { color: var(--color-accent); font-weight: 600; }

/* --- Mobile : plein écran, pas de panneau flottant étriqué --- */
@media (max-width: 560px) {
  /* Quand le chat est ouvert, on masque le bouton flottant :
     on ferme via la croix de l'en-tête (sinon il flotte sur le plein écran). */
  .cmb--open .cmb__launcher { display: none; }

  .cmb__panel {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform-origin: center;
    transform: translateY(100%);
  }
  .cmb--open .cmb__panel { transform: translateY(0); }

  /* Encoche / barre d'état et zone du bouton accueil iOS */
  .cmb__head { padding-top: max(16px, env(safe-area-inset-top)); }
  .cmb__foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

  /* Confort tactile */
  .cmb__body { padding: 16px; }
  .cmb__msg { max-width: 90%; font-size: 0.92rem; }
  .cmb__close { width: 40px; height: 40px; }
  .cmb__close svg { width: 17px; height: 17px; }
  .cmb__chip { padding: 9px 15px; font-size: 0.85rem; }
  .cmb__send { width: 46px; height: 46px; }
  .cmb__send svg { width: 19px; height: 19px; }
  /* font-size 16px : empêche le zoom auto au focus sur iOS */
  .cmb__input { padding: 12px; }
  .cmb__input input { font-size: 16px; padding: 12px 16px; }

  /* Le lanceur respecte les marges sûres et reste bien atteignable */
  .cmb { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .cmb__panel { transition: opacity 0.2s ease, visibility 0.2s; }
}

/* =====================================================================
   MODALE DUO: "qui fait quoi", ouverte depuis la signature du hero
   ===================================================================== */
.ava--lg { width: 56px; height: 56px; border-radius: 16px; font-size: 18px; }
.duomodal { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s; }
.duomodal.is-open { opacity: 1; visibility: visible; }
.duomodal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 55%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.duomodal__panel { position: relative; z-index: 1; width: min(540px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: clamp(26px, 4vw, 44px); transform: translateY(14px) scale(.98); transition: transform .3s var(--spring); }
.duomodal.is-open .duomodal__panel { transform: none; }
.duomodal__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); display: grid; place-items: center; }
.duomodal__close:hover { background: var(--accent-tint); color: var(--accent); }
.duomodal__close svg { width: 16px; height: 16px; }
.duomodal__panel h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 14px; }
.duomodal__intro { color: var(--ink-soft); margin-top: 12px; font-size: 1.02rem; line-height: 1.6; }
.duomodal__people { display: flex; flex-direction: column; gap: 14px; margin: 26px 0; }
.duoperson { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); transition: border-color .25s ease, box-shadow .25s ease; }
.duoperson:hover { border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); box-shadow: var(--shadow-sm); }
.duoperson__txt h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.duoperson__role { color: var(--accent); font-weight: 600; font-size: .92rem; margin-top: 3px; }
.duoperson__bio { color: var(--ink-soft); margin-top: 8px; font-size: .96rem; line-height: 1.55; }
.duomodal__cta { width: max-content; }
body.duomodal-open { overflow: hidden; }

/* =====================================================================
   BOUTON DEVIS FLOTTANT: suit le scroll partout (bas-gauche ; le lanceur
   du chatbot est à droite, donc pas de collision). Renvoie vers /devis.html.
   ===================================================================== */
.fab-devis {
  position: fixed; z-index: 8000;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 15px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--accent) 55%, transparent), 0 4px 12px rgba(20,20,45,.16);
  opacity: 0;
  transition: transform .2s var(--ease), background .2s ease, box-shadow .2s ease, opacity .45s var(--ease);
}
.is-ready .fab-devis { opacity: 1; }
.fab-devis:hover { transform: translateY(-2px); background: var(--ink); box-shadow: 0 18px 38px -12px rgba(20,20,45,.42); }
.fab-devis:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.fab-devis__ic { width: 18px; height: 18px; flex: 0 0 auto; }
.fab-devis .arr { transition: transform .25s var(--ease); }
.fab-devis:hover .arr { transform: translateX(3px); }
@media (max-width: 560px) {
  .fab-devis { padding: 11px 16px; font-size: 13.5px; gap: 7px; left: max(14px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); }
  .fab-devis__ic { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .fab-devis { opacity: 1; transition: none; } }

/* ---------- Bouton bascule de thème (nav) ---------- */
.nav__theme {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  display: inline-grid; place-items: center;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s var(--ease);
}
.nav__theme:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-1px); }
.nav__theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* l'icône lune <-> soleil pivote et se fond au changement de thème (micro-interaction) */
.nav__theme svg { width: 19px; height: 19px; grid-area: 1 / 1; transition: opacity .28s var(--ease), transform .45s var(--spring); }
.nav__theme-moon { opacity: 1; transform: rotate(0) scale(1); }
.nav__theme-sun  { opacity: 0; transform: rotate(-90deg) scale(.4); }
[data-theme="dark"] .nav__theme-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
[data-theme="dark"] .nav__theme-sun  { opacity: 1; transform: rotate(0) scale(1); }
@media (prefers-reduced-motion: reduce) { .nav__theme svg { transition: opacity .15s linear; transform: none !important; } }
@media (max-width: 720px) { .nav__theme { width: 38px; height: 38px; } }

/* =====================================================================
   CURSEUR PERSONNALISÉ : point qui suit la souris (+ traînée + ripple).
   Actif desktop (pointeur fin) uniquement ; le curseur natif n'est masqué
   que si le JS a pu l'activer (classe .cursor-on sur <html>), donc sûr.
   ===================================================================== */
.cursor__dot {
  position: fixed; left: -100px; top: -100px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%); opacity: 0;
  transition: width .2s ease, height .2s ease, background .2s ease, opacity .25s ease;
}
.cursor-on .cursor__dot { opacity: 1; }
.cursor__dot.hover { width: 18px; height: 18px; background: var(--accent-ink); }
.cursor-trail {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%); background: var(--accent);
}
.cursor-ripple {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 9997;
  transform: translate(-50%, -50%); border: 2px solid var(--accent);
}
/* curseur natif masqué seulement quand le custom tourne */
.cursor-on, .cursor-on * { cursor: none !important; }
.cursor-on a, .cursor-on button, .cursor-on [role="button"] { cursor: none !important; }
/* tactile / pointeur grossier : aucun curseur custom */
@media (hover: none), (pointer: coarse) {
  .cursor__dot, .cursor-trail, .cursor-ripple { display: none !important; }
}
/* motion réduit : on garde le point, on coupe traînée et ripple */
@media (prefers-reduced-motion: reduce) {
  .cursor-trail, .cursor-ripple { display: none !important; }
}

/* ============================================================
   OUTILS INTERNES — showcase démonstratif : onglets verticaux
   (desktop) / accordéon (mobile). Les maquettes (.mk-*) sont
   100% en variables CSS pour suivre le thème clair/sombre.
   Aucune anim gadget : fondu sobre + chevron. JS dans refonte.js.
   ============================================================ */
.oi__row { border-bottom: 1px solid var(--line); }
.oi__row:first-child { border-top: 1px solid var(--line); }

.oi__head {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 18px 6px; background: none; border: 0; cursor: pointer;
  text-align: left; color: var(--ink); font-family: var(--font);
}
.oi__ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-ink);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.oi__ic svg { width: 21px; height: 21px; }
.oi__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.oi__name { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -.01em; }
.oi__desc { color: var(--ink-soft); font-size: .9rem; line-height: 1.4; }
.oi__chev { flex: none; display: grid; place-items: center; color: var(--ink-faint); transition: transform .35s var(--ease); }
.oi__chev svg { width: 18px; height: 18px; }
.oi__row.is-open .oi__chev { transform: rotate(180deg); }
.oi__row.is-open .oi__ic { background: var(--accent); color: #fff; }
[data-theme="dark"] .oi__row.is-open .oi__ic { color: var(--bg); }

/* panneau : accordéon fluide via grid-template-rows 0fr -> 1fr (sans calcul JS) */
.oi__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); }
.oi__row.is-open .oi__panel { grid-template-rows: 1fr; }
.oi__panelin { overflow: hidden; min-width: 0; }
.oi__mock {
  margin: 2px 0 22px 56px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm); padding: 16px;
  display: flex; flex-direction: column;
}

/* fenêtre commune aux maquettes */
.mk-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.mk-dots { display: inline-flex; gap: 5px; }
.mk-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.mk-ttl { flex: 1; font-size: .82rem; font-weight: 600; color: var(--ink-faint); }
.mk-live { flex: none; font-size: .66rem; font-weight: 600; color: var(--ink-faint); background: var(--bg-band); padding: 3px 9px; border-radius: 999px; }

/* dashboard */
.mk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mk-tile { background: var(--bg-band); border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; }
.mk-k { font-size: .66rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.mk-v { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--ink); white-space: nowrap; }
.mk-trend { font-size: .64rem; font-weight: 600; color: var(--ink-faint); }
.mk-trend.up { color: var(--cat-boutique); }
.mk-panelcard { background: var(--bg-band); border-radius: 12px; padding: 12px 12px 10px; margin-bottom: 14px; display: flex; flex-direction: column; }
.mk-cardhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; font-size: .78rem; font-weight: 600; color: var(--ink); }
.mk-cardhead .mk-k { font-weight: 500; }
.mk-chart { display: flex; align-items: flex-end; gap: 8px; height: 104px; }
.mk-chart i { flex: 1; min-width: 0; height: var(--h); border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent)); }
.mk-xaxis { display: flex; gap: 8px; margin-top: 7px; }
.mk-xaxis span { flex: 1; text-align: center; font-size: .6rem; color: var(--ink-faint); }

/* listes (crm + docs) */
.mk-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mk-list li { display: flex; align-items: center; gap: 11px; padding: 9px 11px; background: var(--bg-band); border-radius: 11px; }
.mk-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: .76rem; font-weight: 700; color: var(--accent-ink); background: var(--accent-tint); }
.mk-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-nm { min-width: 0; font-size: .88rem; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-sub { font-size: .72rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-pill { flex: none; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.mk-pill--ok   { color: var(--cat-boutique); background: color-mix(in srgb, var(--cat-boutique) 14%, transparent); }
.mk-pill--wait { color: var(--accent-ink);   background: var(--accent-tint); }
.mk-pill--late { color: var(--cat-refonte);  background: color-mix(in srgb, var(--cat-refonte) 15%, transparent); }
.mk-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.mk-search { flex: 1; font-size: .76rem; color: var(--ink-faint); background: var(--bg-band); border-radius: 9px; padding: 8px 11px; }
.mk-btn { flex: none; font-size: .75rem; font-weight: 600; color: #fff; background: var(--accent); border-radius: 9px; padding: 8px 12px; white-space: nowrap; }
[data-theme="dark"] .mk-btn { color: var(--bg); }
.mk-doc { flex: none; width: 22px; height: 27px; border-radius: 4px; background: var(--card); border: 1px solid var(--line); position: relative; }
.mk-doc::before { content: ''; position: absolute; left: 5px; right: 5px; top: 8px; height: 2px; background: var(--line); box-shadow: 0 5px 0 var(--line), 0 10px 0 var(--line); }

/* planning : liste de collaborateurs + emploi du temps (grille horaires × jours) */
.mk-team { margin-bottom: 14px; }
.mk-team-list { display: flex; flex-direction: column; gap: 7px; }
.mk-member { display: flex; align-items: center; gap: 11px; padding: 7px 10px; background: var(--bg-band); border-radius: 11px; }
.mk-av.a { background: var(--accent-tint); color: var(--accent-ink); }
.mk-av.b { background: color-mix(in srgb, var(--cat-boutique) 16%, transparent); color: var(--cat-boutique); }
.mk-av.c { background: color-mix(in srgb, var(--cat-refonte) 18%, transparent); color: var(--cat-refonte); }
.mk-av.d { background: color-mix(in srgb, var(--cat-saas) 16%, transparent); color: var(--cat-saas); }
.mk-stat { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 600; }
.mk-stat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.mk-stat.on { color: var(--cat-boutique); } .mk-stat.on::before { background: var(--cat-boutique); }
.mk-stat.busy { color: var(--ink-faint); } .mk-stat.busy::before { background: var(--ink-faint); }

.mk-sched { display: flex; flex-direction: column; min-height: 0; }
.mk-grid { flex: 1; display: grid; grid-template-columns: 34px repeat(5, 1fr); grid-template-rows: auto repeat(6, 1fr); gap: 4px; }
.mk-gc { display: flex; align-items: center; justify-content: center; min-height: 28px; padding: 2px; border-radius: 6px; background: var(--bg-band); }
.mk-gh { background: transparent; min-height: 0; padding: 0 0 3px; font-size: .66rem; font-weight: 600; color: var(--ink-faint); }
.mk-gt { background: transparent; font-size: .62rem; color: var(--ink-faint); }
.mk-blk { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 22px; border-radius: 5px; font-size: .64rem; font-weight: 700; }
.mk-blk.a { background: color-mix(in srgb, var(--accent) 30%, var(--card)); color: var(--accent-ink); }
.mk-blk.b { background: color-mix(in srgb, var(--cat-boutique) 28%, var(--card)); color: var(--cat-boutique); }
.mk-blk.c { background: color-mix(in srgb, var(--cat-refonte) 30%, var(--card)); color: var(--cat-refonte); }
.mk-blk.d { background: color-mix(in srgb, var(--cat-saas) 26%, var(--card)); color: var(--cat-saas); }

/* espace client */
.mk-proj { background: var(--bg-band); border-radius: 12px; padding: 13px 14px; margin-bottom: 14px; }
.mk-proj-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 11px; }
.mk-prog { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.mk-prog i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.mk-steps { display: flex; gap: 6px; margin-top: 13px; }
.mk-steps span { position: relative; flex: 1; text-align: center; padding-top: 10px; font-size: .6rem; color: var(--ink-faint); border-top: 2px solid var(--line); }
.mk-steps span.done { color: var(--ink-soft); border-top-color: var(--accent); }
.mk-steps span.cur { color: var(--accent-ink); font-weight: 700; border-top-color: var(--accent); }
.mk-steps span.cur::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.mk-mini-h { font-size: .68rem; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.mk-mini-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--line); }
.mk-mini-row:first-of-type { border-top: 0; }
.mk-mini-row .mk-nm { flex: 1; }
.mk-amt { font-size: .8rem; font-weight: 700; color: var(--ink); font-family: var(--font-display); }
.mk-msg { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 11px; background: var(--bg-band); border-radius: 11px; }
.mk-msg .mk-sub { white-space: normal; }

/* suivi production (kanban) */
.mk-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mk-lane { background: var(--bg-band); border-radius: 12px; padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.mk-lh { display: flex; align-items: center; gap: 6px; font-size: .66rem; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.mk-lh i { font-style: normal; font-size: .62rem; color: var(--ink-faint); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; }
.mk-task { display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 7px 8px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--line); font-size: .7rem; font-weight: 600; color: var(--ink-soft); }
.mk-task .mk-tag { flex: none; width: 5px; height: 15px; border-radius: 3px; background: var(--accent); }
.mk-tag.a { background: var(--accent); } .mk-tag.b { background: var(--cat-boutique); } .mk-tag.c { background: var(--cat-refonte); }
.mk-task.hot  { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: transparent; color: var(--accent-ink); }
.mk-task.done { background: color-mix(in srgb, var(--cat-boutique) 14%, transparent); border-color: transparent; color: var(--cat-boutique); }

/* connexions (hub) */
.mk-hubwrap { display: flex; flex-direction: column; align-items: center; padding: 4px 0 6px; }
.mk-core { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: #fff;
  background: var(--accent); padding: 9px 18px; border-radius: 999px; box-shadow: var(--shadow-sm); }
[data-theme="dark"] .mk-core { color: var(--bg); }
.mk-rail { width: 2px; height: 18px; background: var(--line); }
.mk-svcs { display: grid; grid-template-columns: repeat(4, auto); gap: 10px; padding-top: 16px; border-top: 2px solid var(--line); }
.mk-svc { position: relative; font-size: .8rem; font-weight: 600; color: var(--ink);
  background: var(--bg-band); border: 1px solid var(--line); padding: 8px 13px; border-radius: 10px; }
.mk-svc::before { content: ''; position: absolute; top: -16px; left: 50%; width: 2px; height: 14px; background: var(--line); }

/* ---- couche détail + interactivité (sobre, pas d'anim gadget) ---- */
/* survol : affordance "vraie app" */
.mk-list li, .mk-member, .mk-mini-row, .mk-task { transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.mk-list li:hover, .mk-member:hover, .mk-mini-row:hover { background: var(--accent-tint); }
.mk-task:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
/* dashboard : repères horizontaux + mois en cours + valeur de pointe */
.mk-chart { position: relative; background: repeating-linear-gradient(to top, transparent 0, transparent calc(33.333% - 1px), var(--line) calc(33.333% - 1px), var(--line) 33.333%); }
.mk-chart i { position: relative; }
.mk-chart i:last-child { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 72%, transparent)); }
.mk-chart i b { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font: 700 .62rem/1 var(--font-display); color: var(--accent-ink); white-space: nowrap; }
/* CRM : en-tête de colonnes + ligne sélectionnée */
.mk-listhead { display: flex; align-items: center; justify-content: space-between; padding: 0 11px 8px; font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.mk-list li.is-sel { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); }
/* kanban : qui fait quoi */
.mk-who { flex: none; margin-left: auto; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font: 700 .6rem/1 var(--font); color: var(--accent-ink); background: var(--accent-tint); }
/* espace client : prochain rendez-vous */
.mk-rdv { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 11px; font-size: .82rem; color: var(--ink-soft); }
.mk-rdv b { color: var(--ink); font-weight: 700; }
.mk-rdv-ic { flex: none; color: var(--accent); display: grid; place-items: center; }
.mk-rdv-ic svg { width: 16px; height: 16px; }
/* hub : pastille "connecté" par service + statut */
.mk-svc { display: inline-flex; align-items: center; gap: 7px; }
.mk-svc::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cat-boutique); }
.mk-sync { margin-top: 15px; display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; color: var(--ink-faint); }
.mk-sync::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cat-boutique); }
.mk-sync b { color: var(--cat-boutique); font-weight: 600; }

/* connexions : schéma hub SVG (central relié à 4 services) */
.mk-net { position: relative; flex: none; width: 100%; height: 162px; margin: 6px 0 8px; }
.mk-net-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-net-lines line { stroke: var(--line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mk-net .mk-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }
.mk-node { position: absolute; transform: translate(-50%, -50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); box-shadow: var(--shadow-sm);
  font-size: .8rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.mk-node svg { flex: none; width: 15px; height: 15px; color: var(--accent); }
.mk-node::after { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--cat-boutique); }
.mk-node--tl { top: 17%; left: 17%; } .mk-node--tr { top: 17%; left: 83%; }
.mk-node--bl { top: 83%; left: 17%; } .mk-node--br { top: 83%; left: 83%; }
.mk-node.mk-node--ico { padding: 8px; gap: 0; }
.mk-node.mk-node--ico::after { position: absolute; top: -3px; right: -3px; }
/* connexions : liste détaillée des intégrations (sous le schéma) */
.mk-conns { width: 100%; display: flex; flex-direction: column; }
.mk-conns .mk-mini-h { margin-bottom: 2px; }
.mk-conn { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-top: 1px solid var(--line); transition: background .18s var(--ease); }
.mk-conn-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-ink); }
.mk-conn-ic svg { width: 16px; height: 16px; }
.mk-conn-st { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: var(--ink-faint); }
.mk-conn-st.on { color: var(--cat-boutique); }
.mk-conn-st.on::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cat-boutique); }
.mk-conn--add { color: var(--accent-ink); font-weight: 600; cursor: pointer; }
.mk-conn--add .mk-conn-ic { background: transparent; border: 1px dashed var(--line); color: var(--accent); font-size: 1.15rem; line-height: 1; }
.mk-conn--add:hover { background: var(--accent-tint); border-radius: 8px; }
.mk-conn--add:hover .mk-conn-ic { border-color: var(--accent); }
.mk-conn-fix { flex: none; font-family: var(--font); font-size: .7rem; font-weight: 600; color: var(--cat-refonte); background: color-mix(in srgb, var(--cat-refonte) 14%, transparent); border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.mk-conn-fix:hover { background: color-mix(in srgb, var(--cat-refonte) 22%, transparent); }
.mk-node--warn::after { background: var(--cat-refonte); }
.mk-conns .mk-mini-h { display: flex; align-items: center; justify-content: space-between; }
.mk-synced { display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--cat-boutique); }
.mk-synced::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cat-boutique); }
/* tuiles de marque (logos services) : couleur de marque en fond, glyphe blanc */
.mk-brand { border-color: transparent !important; color: #fff !important; }
.mk-brand svg { color: #fff; }
.mk-conn-ic--off { background: var(--bg-band); color: var(--ink-faint); }
.mk-node--warn svg { color: var(--ink-faint); }
.mk-node--warn { opacity: .85; }
/* dashboard : valeur du mois au survol d'une barre */
.mk-chart i[data-v]:hover::after { content: attr(data-v); position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font: 700 .6rem/1 var(--font-display); color: var(--accent-ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; white-space: nowrap; box-shadow: var(--shadow-sm); z-index: 3; }
@media (max-width: 560px) {
  .mk-node { font-size: .68rem; padding: 5px 8px; gap: 5px; }
  .mk-node svg { width: 12px; height: 12px; }
  .mk-node--tl, .mk-node--bl { left: 22%; } .mk-node--tr, .mk-node--br { left: 78%; }
}

/* pied (inchangé) */
.oi__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(34px, 4vw, 48px); }
.oi__foot p { color: var(--ink-soft); max-width: 62ch; }
.oi__foot p a { color: var(--accent-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--accent-tint); transition: border-color .3s var(--ease); }
.oi__foot p a:hover { border-bottom-color: var(--accent); }
.oi__foot .link-underline { margin-top: 0; white-space: nowrap; }

/* ---- desktop : onglets verticaux à gauche + aperçu plein hauteur à droite ---- */
@media (min-width: 861px) {
  .oi { display: grid; grid-template-columns: minmax(300px, 360px) 1fr; column-gap: clamp(32px, 4vw, 60px); align-items: stretch; }
  .oi__row { display: contents; }                 /* la tête et le panneau deviennent items de .oi */
  .oi__head { grid-column: 1; border-bottom: 1px solid var(--line); transition: background .25s var(--ease); }
  .oi__head:hover { background: var(--bg-band); }
  .oi__row.is-open .oi__head { background: var(--accent-tint); }
  .oi__chev { display: none; }
  .oi__panel {                                     /* empilés colonne droite, étirés sur la hauteur des 6 onglets (grid-row 1/7) */
    display: flex; grid-column: 2; grid-row: 1 / 7;
    opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none;
    transition: opacity .45s var(--ease), transform .45s var(--ease);
  }
  .oi__row.is-open .oi__panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .oi__panelin { flex: 1; display: flex; overflow: visible; }
  .oi__mock { flex: 1; margin: 0; padding: 20px; box-shadow: var(--shadow-md); }
  /* une zone par maquette s'étire pour remplir toute la hauteur */
  .mk-dash .mk-panelcard,
  .mk-crm  .mk-list,
  .mk-plan .mk-sched,
  .mk-portal .mk-mini,
  .mk-board .mk-lanes { flex: 1; }
  .mk-dash .mk-panelcard .mk-chart { flex: 1; height: auto; min-height: 104px; }
  .mk-hub .mk-hubwrap { flex: 1; justify-content: flex-start; }
  .mk-hub .mk-conns { flex: 1; }
}

/* affinage mobile : maquette pleine largeur + éléments resserrés */
@media (max-width: 560px) {
  .oi__mock { margin-left: 0; }
  .mk-tiles { gap: 7px; }
  .mk-tile { padding: 9px; }
  .mk-k { font-size: .6rem; }
  .mk-v { font-size: 1rem; }
  .mk-grid { gap: 3px; }
  .mk-gc { min-height: 24px; }
  .mk-blk { font-size: .58rem; min-height: 18px; }
  .mk-member { padding: 6px 8px; }
  .mk-lanes { gap: 7px; }
  .mk-lane { padding: 7px; }
  .mk-task { overflow: hidden; }
  .mk-svcs { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .mk-svc { text-align: center; }
  .mk-svc::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .oi__panel, .oi__chev, .oi__ic, .oi__head { transition: none !important; }
}

/* ===== Seconde Main : encart promo sur l'accueil ===== */
.smp {
  position: relative;
  overflow: hidden;
  background: var(--accent-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 52px);
}
/* Ruban diagonal « On vous les offre » dans le coin haut-droit */
.smp__ribbon {
  position: absolute;
  top: 34px;
  right: -64px;
  width: 250px;
  transform: rotate(45deg);
  background: #10B981;
  color: #fff;
  text-align: center;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 9px 0;
  box-shadow: 0 8px 18px -8px rgba(16, 80, 60, .55);
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 560px) {
  .smp__ribbon { top: 26px; right: -72px; width: 230px; font-size: .8rem; padding: 7px 0; }
}
.smp__head { max-width: 760px; margin: 0 auto; text-align: center; }
.smp__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.08;
  margin: 12px 0 14px;
  color: var(--ink);
}
.smp__lead { color: var(--ink-soft); line-height: 1.65; }
.smp__lead b { color: var(--ink); font-weight: 600; }

.smp__gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 30px 0;
}
@media (max-width: 860px) { .smp__gallery { grid-template-columns: repeat(2, 1fr); } }

.smp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.smp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.smp-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.smp-card__free {
  position: absolute; top: 10px; right: 10px;
  background: #10B981; color: #fff;
  font-size: .72rem; font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.smp-card__name { display: block; padding: 11px 13px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.smp-card--more {
  align-items: center; justify-content: center; gap: 6px; text-align: center;
  background: var(--accent); border-color: var(--accent); color: #fff;
  padding: 16px;
}
.smp-card--more .smp-card__more-k { font-weight: 700; font-size: 1.02rem; }
.smp-card--more .smp-card__cta { font-size: .86rem; opacity: .92; }

.smp__foot { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.smp__note { font-size: .85rem; color: var(--ink-faint); }