/* ============================================================
   CYBERENTA — Sérigraphie mauve
   Un monde à deux encres : le mauve est le papier, l'encre
   violette dessine tout le reste. Ombres pleines décalées
   façon riso, plaques d'où les mots glissent au scroll,
   coulures de peinture entre les sections. Aucun dégradé
   flou, aucun verre, aucune autre couleur.

   Type : Qualion (titrage, wordmark) + Poppins Bold (tout).
   ============================================================ */

:root {
  /* Les deux encres imposées */
  --mauve:       #C391F4;   /* RGB(195,145,244) : le papier */
  --ink:         #22002F;   /* RGB(34,0,47) : le trait */

  /* Teintes dérivées (jamais d'autre famille) */
  --mauve-deep:  #9257D6;   /* mauve foncé : intro, ombres sur encre */
  --mauve-soft:  #CFA5F6;   /* surface posée sur le papier */
  --mauve-pale:  #E9DAFB;   /* teinte claire : fonds d'app, texte sur encre */

  /* Encres atténuées pour la hiérarchie */
  --ink-70: rgba(34, 0, 47, .72);
  --ink-55: rgba(34, 0, 47, .55);
  --ink-25: rgba(34, 0, 47, .25);
  --ink-12: rgba(34, 0, 47, .13);

  --mauve-80: rgba(233, 218, 251, .85);
  --mauve-60: rgba(233, 218, 251, .62);
  --mauve-20: rgba(195, 145, 244, .22);

  --radius:    18px;
  --radius-lg: 24px;
  --border-w:  3px;

  --wrap: 1240px;
  --gutter: clamp(18px, 4vw, 34px);

  --ease-out:    cubic-bezier(.22, .68, .26, 1);
  --ease-spring: cubic-bezier(.34, 1.6, .42, 1);
}

/* ─── Socle ──────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  background: var(--mauve);
  color: var(--ink);
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

body.is-pouring { overflow: hidden; }
body.nav-open   { overflow: hidden; }

::selection { background: var(--ink); color: var(--mauve); }

/* Ascenseur : pilule d'encre sur papier mauve */
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: var(--mauve); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 4px solid var(--mauve); border-radius: 999px; }
html { scrollbar-color: var(--ink) var(--mauve); scrollbar-width: thin; }

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

:focus-visible { outline: var(--border-w) solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sec-ink :focus-visible, .foot :focus-visible { outline-color: var(--mauve); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: fixed; top: -60px; left: 18px; z-index: 400;
  background: var(--ink); color: var(--mauve);
  padding: 12px 20px; border-radius: 999px; font-size: 14px; text-decoration: none;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 14px; }

/* ─── Typographie ────────────────────────────────────────── */

.q, h1, h2, h3 {
  font-family: var(--font-display, 'Qualion', sans-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
}

.sec-head h2 {
  font-size: clamp(2.15rem, 4.6vw, 3.4rem);
  line-height: 1.02;
  max-width: 20ch;
}
.sec-head p {
  margin-top: 16px;
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  color: var(--ink-70);
  max-width: 58ch;
}
.sec-head.center { text-align: center; }
.sec-head.center h2, .sec-head.center p { margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--mauve);
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  padding: 7px 15px; border-radius: 999px;
  margin-bottom: 22px;
}
.eyebrow svg { width: 14px; height: 14px; }

.sec { padding-block: clamp(72px, 10vw, 122px); }

/* Sections encre (le monde s'inverse) */
.sec-ink { background: var(--ink); color: var(--mauve); }
.sec-ink .eyebrow { background: var(--mauve); color: var(--ink); }
.sec-ink .sec-head p { color: var(--mauve-80); }

/* ─── Boutons ────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  font-family: var(--font-body, 'Poppins', sans-serif); font-weight: 700;
  font-size: 15.5px; line-height: 1;
  padding: 16px 27px;
  border: var(--border-w) solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), color .25s var(--ease-out);
  will-change: transform;
}

.btn-full { background: var(--ink); color: var(--mauve); box-shadow: 5px 5px 0 var(--mauve-deep); }
.btn-full:hover  { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--mauve-deep); }
.btn-full:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--mauve-deep); }

.btn-full .orb {
  display: grid; place-items: center;
  width: 26px; height: 26px; margin-right: -6px;
  background: var(--mauve); color: var(--ink); border-radius: 50%;
  transition: transform .28s var(--ease-spring);
}
.btn-full .orb svg { width: 13px; height: 13px; transform: rotate(-38deg); transition: transform .28s var(--ease-spring); }
.btn-full:hover .orb { transform: translateX(3px); }
.btn-full:hover .orb svg { transform: rotate(0deg); }

/* Contour → la peinture monte du bas au survol */
.btn-line { background: transparent; color: var(--ink); box-shadow: 4px 4px 0 var(--ink); overflow: hidden; }
.btn-line::before {
  content: ""; position: absolute; inset: -2px;
  background: var(--ink);
  border-radius: 46% 54% 0 0 / 62% 58% 0 0;
  transform: translateY(103%);
  transition: transform .34s var(--ease-out), border-radius .34s var(--ease-out);
}
.btn-line:hover::before { transform: translateY(0); border-radius: 0; }
.btn-line:hover  { color: var(--mauve); }
.btn-line:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn-line > * { position: relative; z-index: 1; }
.btn-line svg { width: 15px; height: 15px; }

/* Variante inversée pour plaques & sections encre */
.btn-invert { background: var(--mauve); color: var(--ink); border-color: var(--mauve); box-shadow: 5px 5px 0 var(--mauve-deep); }
.btn-invert:hover  { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--mauve-deep); }
.btn-invert:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--mauve-deep); }
.btn-invert .orb { display: grid; place-items: center; width: 26px; height: 26px; margin-right: -6px; background: var(--ink); color: var(--mauve); border-radius: 50%; transition: transform .28s var(--ease-spring); }
.btn-invert .orb svg { width: 13px; height: 13px; transform: rotate(-38deg); transition: transform .28s var(--ease-spring); }
.btn-invert:hover .orb { transform: translateX(3px); }
.btn-invert:hover .orb svg { transform: rotate(0deg); }

.btn-hollow { background: transparent; color: var(--mauve); border-color: var(--mauve); box-shadow: 4px 4px 0 var(--mauve-deep); }
.btn-hollow:hover  { background: var(--mauve); color: var(--ink); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--mauve-deep); }
.btn-hollow:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--mauve-deep); }

.btn-sm { padding: 11px 19px; font-size: 14px; }
.btn-lg { padding: 18px 32px; font-size: 16.5px; }
.btn.w-full { width: 100%; }

/* ─── Header ─────────────────────────────────────────────── */

.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  padding-block: 18px;
  transition: padding .25s var(--ease-out), background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
body.scrolled .top { background: var(--mauve); box-shadow: 0 var(--border-w) 0 var(--ink); padding-block: 11px; }
body.nav-open .top { z-index: 130; background: transparent; box-shadow: none; }
body.nav-open .brand, body.nav-open .brand .word { color: var(--mauve); }
body.nav-open .top .nav-cta, body.nav-open .top-login { display: none; }

.top-in { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 22px; }

.brand { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; white-space: nowrap; }
.brand .mark { width: 22px; height: 22px; flex: none; transition: transform .35s var(--ease-spring); }
.brand:hover .mark { transform: rotate(-10deg) scale(1.05); }
.brand .word { font-family: var(--font-display, 'Qualion', sans-serif); font-size: 27px; letter-spacing: -0.01em; color: var(--ink); transform: translateY(-1px); }

.top nav { display: flex; align-items: center; gap: 26px; }
.top nav a {
  position: relative; text-decoration: none; font-size: 15px; color: var(--ink); padding-block: 4px;
}
.top nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3.5px;
  background: var(--ink); border-radius: 999px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.top nav a:hover::after, .top nav a[aria-current="page"]::after { transform: scaleX(1); }

.top-right { display: flex; align-items: center; gap: 18px; }
.top-login { text-decoration: none; font-size: 14.5px; color: var(--ink-70); transition: color .2s; }
.top-login:hover { color: var(--ink); }

.burger {
  display: none; position: relative; z-index: 130;
  flex: none;
  width: 46px; height: 46px;
  border: var(--border-w) solid var(--ink); border-radius: 14px;
  background: var(--mauve);
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.burger i {
  position: absolute; left: 11px; right: 11px; height: 3px;
  background: var(--ink); border-radius: 999px;
  transition: transform .3s var(--ease-out), top .3s var(--ease-out), opacity .2s;
}
.burger i:nth-child(1) { top: 14px; }
.burger i:nth-child(2) { top: 21px; }
.burger i:nth-child(3) { top: 28px; }
body.nav-open .burger { background: var(--ink); border-color: var(--mauve); }
body.nav-open .burger i { background: var(--mauve); }
body.nav-open .burger i:nth-child(1) { top: 21px; transform: rotate(45deg); }
body.nav-open .burger i:nth-child(2) { opacity: 0; }
body.nav-open .burger i:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mnav {
  position: fixed; inset: 0; z-index: 120;
  background: var(--ink);
  display: grid; align-content: center; justify-items: start;
  padding: 90px var(--gutter) 60px;
  clip-path: circle(0 at calc(100% - 52px) 44px);
  visibility: hidden;
  transition: clip-path .55s var(--ease-out), visibility 0s .55s;
}
body.nav-open .mnav { clip-path: circle(150% at calc(100% - 52px) 44px); visibility: visible; transition: clip-path .55s var(--ease-out); }
.mnav a.mnav-link {
  font-family: var(--font-display, 'Qualion', sans-serif);
  font-size: clamp(2.6rem, 9.5vw, 4.4rem); line-height: 1.24;
  color: var(--mauve); text-decoration: none;
  opacity: 0; transform: translateY(24px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), color .2s;
}
.mnav a.mnav-link:hover { color: var(--mauve-pale); }
body.nav-open .mnav a.mnav-link { opacity: 1; transform: none; }
body.nav-open .mnav a.mnav-link:nth-child(1) { transition-delay: .12s; }
body.nav-open .mnav a.mnav-link:nth-child(2) { transition-delay: .17s; }
body.nav-open .mnav a.mnav-link:nth-child(3) { transition-delay: .22s; }
body.nav-open .mnav a.mnav-link:nth-child(4) { transition-delay: .27s; }
body.nav-open .mnav a.mnav-link:nth-child(5) { transition-delay: .32s; }
.mnav-foot { margin-top: 44px; display: flex; gap: 16px; flex-wrap: wrap; opacity: 0; transition: opacity .4s .38s; }
body.nav-open .mnav-foot { opacity: 1; }

/* ─── Intro : la peinture coule ──────────────────────────── */

.pour { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.pour svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pour-word {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display, 'Qualion', sans-serif);
  font-size: clamp(3rem, 11vw, 8.4rem);
  color: var(--mauve-deep);
  letter-spacing: -0.015em;
  will-change: transform;
}
body:not(.is-pouring) .pour { display: none; }

/* ─── Hero ───────────────────────────────────────────────── */

.hero { padding-top: clamp(120px, 17vh, 178px); }

.announce {
  display: inline-flex; align-items: center; gap: 12px;
  border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 7px 17px 7px 8px;
  font-size: 13.5px; text-decoration: none; color: var(--ink);
  margin-bottom: 30px;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.announce:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.announce .flag { background: var(--ink); color: var(--mauve); border-radius: 999px; padding: 5px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.announce svg { width: 15px; height: 15px; transition: transform .25s var(--ease-spring); }
.announce:hover svg { transform: translateX(4px); }

.hero h1 {
  font-size: clamp(3.1rem, 8.6vw, 7.6rem);
  line-height: .97;
  letter-spacing: -0.02em;
  max-width: 19ch;
}

/* Souligné squiggle : se dessine puis ondule sans fin */
.squig { position: relative; display: inline-block; }
.squig svg { position: absolute; left: -2%; bottom: -0.16em; width: 104%; height: .3em; overflow: visible; }
.squig path {
  fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 620; stroke-dashoffset: 620;
}
body.hero-go .squig path { animation: squig-draw .9s .45s var(--ease-out) forwards; }
body.hero-go .squig svg { animation: squig-sway 3.4s 1.5s ease-in-out infinite alternate; }
@keyframes squig-draw { to { stroke-dashoffset: 0; } }
@keyframes squig-sway { from { transform: translateX(-6px); } to { transform: translateX(6px); } }

.hero-sub { margin-top: 26px; font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--ink-70); max-width: 56ch; }
.hero-cta { margin-top: 34px; display: flex; gap: 18px; flex-wrap: wrap; }

.hero-proof { margin-top: 30px; display: flex; gap: 10px 26px; flex-wrap: wrap; }
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-70); }
.hero-proof svg { width: 17px; height: 17px; flex: none; }

/* ─── La plaque : le mot sort du rectangle au scroll ─────── */

.plaque-stage {
  position: relative;
  margin-top: clamp(54px, 8vh, 96px);
  height: clamp(150px, 19.5vw, 268px);
  overflow: clip;
}
.plaque {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: min(50vw, 680px);
  background: var(--ink);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
/* Deux fenêtres de découpe immobiles : dedans (mauve) / dehors (encre).
   Le mot se déplace à l'intérieur, la découpe reste au bord de la plaque. */
.pwc { position: absolute; inset: 0; }
.pw {
  position: absolute; left: 0; top: 50%;
  font-family: var(--font-display, 'Qualion', sans-serif);
  font-size: clamp(3.2rem, 7.4vw, 7.2rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
  will-change: transform;
  transform: translateY(-50%);
}
.pw-in  { color: var(--mauve); }
.pw-out { color: var(--ink); }

.plaque-hint {
  position: absolute; right: var(--gutter); bottom: 10px;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-55);
}
.plaque-hint svg { width: 15px; height: 15px; animation: hint-fall 1.6s ease-in-out infinite; }
@keyframes hint-fall { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }

/* ─── Bandeaux marquee pilotés par le scroll ─────────────── */

.band-tilt { transform: rotate(-2.2deg) scale(1.03); margin-block: clamp(40px, 7vw, 84px); }
.band {
  background: var(--ink);
  padding-block: clamp(14px, 1.9vw, 24px);
  overflow: clip;
}
.band-track { display: flex; align-items: center; gap: clamp(26px, 3.4vw, 52px); width: max-content; will-change: transform; }
.band-item {
  display: inline-flex; align-items: center; gap: clamp(26px, 3.4vw, 52px);
  font-family: var(--font-display, 'Qualion', sans-serif);
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  color: var(--mauve); white-space: nowrap;
}
.band-item svg { width: .56em; height: .56em; flex: none; }

/* Variante fantôme : contours d'encre sur le papier */
.band-ghost { background: transparent; }
.band-ghost .band-item {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke;
}
.band-ghost .band-item svg { color: var(--ink); }

/* ─── Fenêtre Integra (démo interactive) ─────────────────── */

.demo-wrap { margin-top: clamp(46px, 6vw, 72px); }

.app {
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--mauve-pale);
  box-shadow: 12px 12px 0 var(--ink);
  overflow: clip;
}
.app-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--mauve);
  padding: 12px 18px;
}
.app-bar .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--mauve); }
.app-bar .dot:nth-child(2) { background: var(--mauve-deep); }
.app-bar .dot:nth-child(3) { background: var(--mauve-pale); }
.app-bar .t { margin-left: 12px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em; }
.app-bar .spark { margin-left: auto; width: 17px; height: 17px; animation: spark-spin 7s linear infinite; }
@keyframes spark-spin { to { transform: rotate(360deg); } }

.app-body { display: grid; grid-template-columns: 228px 1fr; min-height: 540px; }

.app-side { background: var(--ink); color: var(--mauve-pale); padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; }
.app-side .sb {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display, 'Qualion', sans-serif); font-size: 19px; color: var(--mauve);
  padding: 6px 10px 16px;
}
.app-side .sb svg { width: 15px; height: 15px; }
.app-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  font-size: 13.5px; font-weight: 700; color: var(--mauve-80);
  text-align: left; width: 100%;
  transition: background .18s, color .18s, transform .18s var(--ease-out);
}
.app-tab svg { width: 17px; height: 17px; flex: none; }
.app-tab:hover { background: var(--mauve-20); color: var(--mauve); transform: translateX(3px); }
.app-tab[aria-selected="true"] { background: var(--mauve); color: var(--ink); }
.app-tab .n { margin-left: auto; background: var(--mauve); color: var(--ink); font-size: 11px; border-radius: 999px; padding: 2px 8px; }
.app-tab[aria-selected="true"] .n { background: var(--ink); color: var(--mauve); }
.app-side .sep { margin: 14px 12px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--mauve-60); }

.app-main { padding: 20px 22px 26px; min-width: 0; }
.app-topline { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.app-search {
  flex: 1; display: flex; align-items: center; gap: 9px;
  border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 9px 16px; font-size: 13px; color: var(--ink-55);
  background: var(--mauve-pale);
}
.app-search svg { width: 15px; height: 15px; }
.app-round { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--mauve); transition: transform .25s var(--ease-spring); }
.app-round:hover { transform: rotate(90deg); }
.app-round svg { width: 16px; height: 16px; }
.app-ava { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--mauve); font-family: var(--font-display, 'Qualion', sans-serif); font-size: 13px; }

.view { display: none; }
.view.on { display: block; animation: view-in .38s var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.view-head h4 { font-family: var(--font-display, 'Qualion', sans-serif); font-size: 22px; }
.view-head p { font-size: 12.5px; color: var(--ink-55); margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 7px; border: 2.5px solid var(--ink); border-radius: 999px; padding: 6px 13px; font-size: 12px; white-space: nowrap; }
.chip svg { width: 13px; height: 13px; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.kpi { border: 2.5px solid var(--ink); border-radius: 15px; padding: 12px 14px; background: var(--mauve-pale); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.kpi:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.kpi .l { display: flex; align-items: center; gap: 7px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-55); }
.kpi .l svg { width: 13px; height: 13px; }
.kpi .v { font-family: var(--font-display, 'Qualion', sans-serif); font-size: 23px; margin-top: 7px; }
.kpi .tr { display: inline-block; margin-top: 7px; font-size: 11.5px; background: var(--ink); color: var(--mauve); border-radius: 999px; padding: 3px 9px; }

.cards2 { display: grid; grid-template-columns: 1.65fr 1fr; gap: 12px; }
.pcard { border: 2.5px solid var(--ink); border-radius: 15px; padding: 14px 16px; background: var(--mauve-pale); min-width: 0; }
.pcard h5 { font-size: 13.5px; }
.pcard .muted { font-size: 11.5px; color: var(--ink-55); margin-top: 2px; }
.pcard .chart { margin-top: 12px; height: 150px; }
.pfoot { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-55); margin-top: 8px; text-transform: uppercase; letter-spacing: .05em; }

/* Courbes SVG (chart) */
.cyber-chart .chart-grid line { stroke: var(--ink-12); stroke-width: 1; }
.cyber-chart .chart-area { fill: var(--mauve); }
.cyber-chart .chart-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.cyber-chart .chart-dot { fill: var(--ink); stroke: var(--mauve-pale); stroke-width: 3; }
.chart-live .chart-line { stroke-dasharray: 1300; stroke-dashoffset: 1300; }
.in .chart-live .chart-line, .view.on .chart-live .chart-line { animation: chart-draw 1.4s .15s var(--ease-out) forwards; }
.chart-live .chart-area { opacity: 0; }
.in .chart-live .chart-area, .view.on .chart-live .chart-area { animation: chart-fill .8s 1s var(--ease-out) forwards; }
.chart-live .chart-dot { opacity: 0; }
.in .chart-live .chart-dot, .view.on .chart-live .chart-dot { animation: chart-fill .4s 1.35s forwards; }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-fill { to { opacity: 1; } }

.donut-wrap { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.app-donut text { fill: var(--ink); font-family: var(--font-display, 'Qualion', sans-serif); }
.app-donut .track { stroke: var(--ink-12); }
.app-donut .arc { stroke: var(--ink); transition: stroke-dashoffset 1.2s var(--ease-out); }
.legend { display: grid; gap: 7px; font-size: 12px; color: var(--ink-70); }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 7px; vertical-align: -1px; border: 2px solid var(--ink); }
.legend i.full { background: var(--ink); }

/* Kanban : colonnes codées par des formes, pas des couleurs */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.col-h { display: flex; align-items: center; gap: 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-70); margin-bottom: 10px; }
.col-h svg { width: 13px; height: 13px; flex: none; }
.col-h .n { margin-left: auto; background: var(--ink); color: var(--mauve); border-radius: 999px; font-size: 10.5px; padding: 2px 8px; }
.ticket {
  border: 2.5px solid var(--ink); border-radius: 13px; padding: 10px 12px; background: var(--mauve-pale);
  cursor: grab; margin-bottom: 10px;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.ticket:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 4px 4px 0 var(--ink); }
.ticket:active { cursor: grabbing; transform: rotate(1.5deg) scale(1.03); }
.ticket .co { font-size: 13px; }
.ticket .meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--ink-55); margin-top: 5px; }
.ticket .val { color: var(--ink); white-space: nowrap; }

/* Tables */
.atable { width: 100%; border-collapse: collapse; font-size: 13px; }
.atable th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-55); padding: 10px 8px; border-bottom: 2.5px solid var(--ink); }
.atable td { padding: 11px 8px; border-bottom: 2px solid var(--ink-12); }
.atable tr:last-child td { border-bottom: 0; }
.atable tbody tr { transition: background .15s; }
.atable tbody tr:hover { background: var(--mauve-20); }
.pill { display: inline-block; font-size: 11px; border-radius: 999px; padding: 4px 11px; border: 2.5px solid var(--ink); }
.pill-paid { background: var(--ink); color: var(--mauve); }
.pill-wait { background: transparent; }
.pill-late { background: var(--mauve-deep); border-color: var(--ink); color: var(--ink); }

/* Notes de frais */
.exp-row { display: flex; align-items: center; gap: 13px; padding: 13px 4px; border-bottom: 2px solid var(--ink-12); }
.exp-row:last-child { border-bottom: 0; }
.exp-row .thumb { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: var(--mauve); flex: none; }
.exp-row .thumb svg { width: 18px; height: 18px; }
.exp-main { flex: 1; min-width: 0; }
.exp-main .t { font-size: 13.5px; }
.exp-main .s { font-size: 11.5px; color: var(--ink-55); margin-top: 2px; }
.exp-amount { font-family: var(--font-display, 'Qualion', sans-serif); font-size: 16px; white-space: nowrap; }
.validate {
  border: 2.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 700;
  background: var(--ink); color: var(--mauve);
  transition: transform .15s var(--ease-out), background .2s, color .2s;
}
.validate:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--mauve-deep); }
.validate.done { background: transparent; color: var(--ink); box-shadow: none; }

/* Projets */
.proj-row { padding: 14px 2px; border-bottom: 2px solid var(--ink-12); }
.proj-row:last-child { border-bottom: 0; }
.proj-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.proj-top .pct { font-family: var(--font-display, 'Qualion', sans-serif); }
.proj-bar { margin-top: 9px; height: 15px; border: 2.5px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--mauve-pale); }
.proj-bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: repeating-linear-gradient(-55deg, var(--ink) 0 9px, var(--mauve-deep) 9px 13px);
  transition: width 1.1s var(--ease-out);
}
.view.on .proj-bar i { width: var(--w, 60%); }
.proj-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-55); margin-top: 8px; }

/* ─── Coulure entre sections ─────────────────────────────── */

.wave { display: block; width: 100%; height: clamp(52px, 8.5vw, 104px); overflow: hidden; pointer-events: none; }
.wave svg { width: 100%; height: 100%; }
.wave .flow { animation: wave-flow 13s linear infinite; }
.wave .flow-b { animation: wave-flow 21s linear infinite reverse; opacity: .45; }
@keyframes wave-flow { to { transform: translateX(-720px); } }
.wave-ink .flow path, .wave-ink .flow-b path { fill: var(--ink); }
.wave-mauve .flow path, .wave-mauve .flow-b path { fill: var(--mauve); }

/* ─── Stats sur encre ────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 10px clamp(16px, 2.6vw, 40px); border-left: 3px solid var(--mauve-20); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .v { font-family: var(--font-display, 'Qualion', sans-serif); font-size: clamp(2.7rem, 5.4vw, 4.6rem); line-height: 1; color: var(--mauve); }
.stat .l { margin-top: 12px; font-size: 13.5px; color: var(--mauve-80); max-width: 24ch; }

/* ─── Fonctionnalités (fil d'encre + affiches) ───────────── */

.feats { position: relative; }
.snake { position: absolute; inset: 0; pointer-events: none; }
.snake svg { width: 100%; height: 100%; }
.snake path { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; opacity: .5; }

.feat {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 84px);
  align-items: center;
  padding-block: clamp(44px, 6vw, 76px);
}
.feat-tag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 6px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 18px;
}
.feat-tag svg { width: 14px; height: 14px; }
.feat h3 { font-size: clamp(1.75rem, 3.1vw, 2.55rem); line-height: 1.04; max-width: 17ch; }
.feat .f-copy p { margin-top: 16px; font-size: 15.5px; color: var(--ink-70); max-width: 46ch; }
.tlink {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 22px; font-size: 15px; color: var(--ink); text-decoration: none;
  border-bottom: 3px solid var(--ink); padding-bottom: 3px;
  transition: gap .2s var(--ease-out);
}
.tlink:hover { gap: 15px; }
.tlink svg { width: 16px; height: 16px; }

.f-visual {
  border: var(--border-w) solid var(--ink); border-radius: 20px;
  background: var(--mauve-soft);
  padding: clamp(16px, 2vw, 24px);
  box-shadow: 9px 9px 0 var(--ink);
  transform: rotate(1.4deg);
  transition: transform .4s var(--ease-spring), box-shadow .3s var(--ease-out);
}
.feat:nth-child(even) .f-visual { transform: rotate(-1.4deg); }
.feat:nth-child(even) .f-copy { order: 2; }
.f-visual:hover { transform: rotate(0deg) translate(-3px, -3px); box-shadow: 13px 13px 0 var(--ink); }

.mini-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 13px; }
.mini-list { display: grid; gap: 10px; }
.mini-card {
  display: flex; align-items: center; gap: 12px;
  border: 2.5px solid var(--ink); border-radius: 14px; background: var(--mauve-pale);
  padding: 11px 14px;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.mini-card:hover { transform: translateX(5px); box-shadow: -5px 5px 0 var(--ink); }
.mini-card .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--ink); color: var(--mauve); flex: none; }
.mini-card .ic svg { width: 16px; height: 16px; }
.mini-card .tx { flex: 1; min-width: 0; }
.mini-card .tx b { display: block; font-size: 13.5px; }
.mini-card .tx span { font-size: 11.5px; color: var(--ink-55); }
.mini-card .amt { font-family: var(--font-display, 'Qualion', sans-serif); font-size: 15px; white-space: nowrap; }

/* Scan de reçu */
.scan { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: stretch; }
.scan-receipt {
  position: relative; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--mauve-pale);
  overflow: hidden; min-height: 150px;
}
.scan-receipt::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 14px; height: 92px;
  background: repeating-linear-gradient(to bottom, var(--ink-25) 0 3px, transparent 3px 14px);
  border-radius: 2px;
}
.scan-receipt::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--ink);
  animation: scan-sweep 2.3s var(--ease-out) infinite;
}
@keyframes scan-sweep { 0% { top: 4%; } 55% { top: 88%; } 100% { top: 4%; } }
.scan-fields { display: grid; gap: 9px; align-content: center; }
.scan-field {
  display: flex; justify-content: space-between; gap: 10px;
  border: 2.5px solid var(--ink); border-radius: 11px; background: var(--mauve-pale);
  padding: 9px 13px; font-size: 12.5px;
}
.scan-field span { color: var(--ink-55); }

/* ─── Bento modules ──────────────────────────────────────── */

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(38px, 5vw, 58px); }
.bento-card {
  border: var(--border-w) solid var(--ink); border-radius: 20px;
  padding: 24px;
  background: var(--mauve);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.bento-card:hover { transform: translate(-4px, -4px); box-shadow: 11px 11px 0 var(--ink); }
.bento-card .ic {
  display: grid; place-items: center; width: 48px; height: 48px;
  background: var(--ink); color: var(--mauve); border-radius: 15px;
  transition: transform .35s var(--ease-spring);
}
.bento-card:hover .ic { transform: rotate(-9deg) scale(1.07); }
.bento-card .ic svg { width: 22px; height: 22px; }
.bento-card h4 { font-family: var(--font-display, 'Qualion', sans-serif); font-size: 21px; margin-top: 17px; }
.bento-card p { margin-top: 9px; font-size: 14px; color: var(--ink-70); }

/* ─── Nouveautés ─────────────────────────────────────────── */

.clog { margin-top: clamp(30px, 4vw, 46px); border-top: var(--border-w) solid var(--ink); }
.clog-row {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 18px; align-items: center;
  padding: 19px 6px; border-bottom: 2.5px solid var(--ink-25);
  transition: background .2s, transform .2s var(--ease-out);
}
.clog-row:hover { background: var(--mauve-soft); transform: translateX(6px); }
.clog-row .d { font-size: 12.5px; color: var(--ink-55); text-transform: uppercase; letter-spacing: .05em; }
.clog-row b { font-size: 15.5px; }
.clog-row p { font-size: 13.5px; color: var(--ink-70); margin-top: 3px; }
.clog-row .tag { border: 2.5px solid var(--ink); border-radius: 999px; padding: 5px 13px; font-size: 11.5px; white-space: nowrap; }

/* ─── Témoignages ────────────────────────────────────────── */

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(38px, 5vw, 58px); }
.quote {
  position: relative;
  border: var(--border-w) solid var(--ink); border-radius: 20px;
  padding: 46px 24px 24px;
  background: var(--mauve);
  box-shadow: 7px 7px 0 var(--ink);
  transition: transform .3s var(--ease-spring), box-shadow .25s var(--ease-out);
}
.quote:nth-child(odd)  { transform: rotate(-1.3deg); }
.quote:nth-child(even) { transform: rotate(1.2deg) translateY(10px); }
.quote:hover { transform: rotate(0) translateY(-4px); box-shadow: 11px 11px 0 var(--ink); }
.quote .qm {
  position: absolute; top: -24px; left: 20px;
  display: grid; place-items: center; width: 48px; height: 48px;
  background: var(--ink); color: var(--mauve); border-radius: 15px;
  font-family: var(--font-display, 'Qualion', sans-serif); font-size: 34px; line-height: 0; padding-top: 16px;
}
.quote blockquote { font-size: 14.5px; line-height: 1.62; color: var(--ink); }
.quote .who { display: flex; align-items: center; gap: 12px; margin-top: 19px; }
.quote .ava { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--mauve); font-family: var(--font-display, 'Qualion', sans-serif); font-size: 14px; flex: none; }
.quote .who .nm { font-size: 14px; }
.quote .who .rl { font-size: 12px; color: var(--ink-55); margin-top: 1px; }

/* ─── Plaque CTA ─────────────────────────────────────────── */

.cta-sec { padding-block: clamp(60px, 9vw, 110px); }
.cta-plaque {
  position: relative;
  background: var(--ink); color: var(--mauve);
  border-radius: 30px;
  padding: clamp(48px, 7vw, 92px) clamp(24px, 5vw, 72px);
  overflow: clip;
  box-shadow: 12px 12px 0 var(--mauve-deep);
}
.cta-ghost {
  position: absolute; left: 0; right: 0; top: 12px;
  display: flex; gap: 44px; width: max-content;
  font-family: var(--font-display, 'Qualion', sans-serif);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: transparent; -webkit-text-stroke: 1.5px var(--mauve-deep);
  white-space: nowrap;
  animation: ghost-slide 26s linear infinite;
}
@keyframes ghost-slide { to { transform: translateX(-50%); } }
.cta-plaque h2 { font-size: clamp(2.3rem, 5vw, 4.1rem); line-height: 1; max-width: 17ch; position: relative; }
.cta-plaque p { margin-top: 18px; font-size: 15.5px; color: var(--mauve-80); max-width: 52ch; position: relative; }
.cta-plaque .hero-cta { position: relative; }

/* ─── Footer ─────────────────────────────────────────────── */

.foot { background: var(--ink); color: var(--mauve); padding-top: clamp(56px, 8vw, 88px); overflow: clip; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; }
.foot .brand .word { color: var(--mauve); }
.foot-desc { margin-top: 16px; font-size: 13.5px; color: var(--mauve-80); max-width: 30ch; }
.foot-col h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--mauve-60); margin-bottom: 16px; }
.foot-col a {
  display: block; font-size: 14px; color: var(--mauve-80); text-decoration: none;
  padding-block: 5px;
  transition: color .18s, transform .18s var(--ease-out);
}
.foot-col a:hover { color: var(--mauve); transform: translateX(5px); }
.foot-bottom {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: clamp(40px, 6vw, 64px); padding-block: 22px;
  border-top: 3px solid var(--mauve-20);
  font-size: 13px; color: var(--mauve-60);
}
.foot-bottom a { color: var(--mauve-80); text-decoration: none; }
.foot-bottom a:hover { color: var(--mauve); }

.foot-mark {
  margin-top: 10px; margin-bottom: calc(clamp(90px, 15vw, 210px) * -0.42);
  font-family: var(--font-display, 'Qualion', sans-serif);
  font-size: clamp(90px, 15vw, 210px); line-height: .84;
  text-align: center; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 2px var(--mauve-deep);
  user-select: none; pointer-events: none;
}

/* ─── Remonter ───────────────────────────────────────────── */

.back-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--ink); color: var(--mauve);
  border: var(--border-w) solid var(--ink);
  box-shadow: 4px 4px 0 var(--mauve-deep);
  opacity: 0; transform: translateY(140%);
  transition: opacity .3s, transform .3s var(--ease-out);
}
.back-top svg { width: 20px; height: 20px; }
.back-top.show { opacity: 1; transform: none; }
.back-top:hover svg { animation: hint-rise .8s ease-in-out infinite; }
@keyframes hint-rise { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }

/* ─── Apparitions au scroll ──────────────────────────────── */

.rv { opacity: 0; transform: translateY(28px); }
.rv.in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rv[data-d="1"].in { transition-delay: .09s; }
.rv[data-d="2"].in { transition-delay: .18s; }
.rv[data-d="3"].in { transition-delay: .27s; }
.rv[data-d="4"].in { transition-delay: .36s; }

/* Le hero attend la fin de la peinture */
.hero .rv { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }

/* ─── Formulaires ────────────────────────────────────────── */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-70); }
.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--font-body, 'Poppins', sans-serif); font-weight: 700; font-size: 14.5px;
  color: var(--ink);
  background: var(--mauve-soft);
  border: var(--border-w) solid var(--ink); border-radius: 14px;
  padding: 13px 16px;
  transition: background .2s, box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-55); font-weight: 700; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; background: var(--mauve-pale);
  transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink);
}
.field textarea { resize: vertical; min-height: 130px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322002F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 46px; cursor: pointer;
}
.field.err input, .field.err textarea { border-color: var(--ink); background: var(--mauve); box-shadow: inset 0 0 0 2px var(--ink); }
.field .msg { display: none; font-size: 12.5px; color: var(--ink); align-items: center; gap: 6px; }
.field.err .msg { display: inline-flex; }
.field .msg svg { width: 14px; height: 14px; flex: none; }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 250;
  transform: translate(-50%, 180%);
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--mauve);
  border: var(--border-w) solid var(--mauve);
  border-radius: 999px; padding: 14px 24px;
  font-size: 14.5px; white-space: nowrap; max-width: 92vw;
  box-shadow: 5px 5px 0 var(--mauve-deep);
  transition: transform .4s var(--ease-spring);
}
.toast.on { transform: translate(-50%, 0); }
.toast svg { width: 17px; height: 17px; flex: none; }

/* ─── Pages secondaires : hero compact à plaque ──────────── */

.page-hero { padding-top: clamp(120px, 16vh, 170px); }
.page-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: .98; max-width: 16ch; }
.page-hero .lead { margin-top: 20px; font-size: clamp(.98rem, 1.4vw, 1.08rem); color: var(--ink-70); max-width: 58ch; }

.plaque-stage.mini { height: clamp(110px, 14vw, 185px); margin-top: clamp(36px, 5vh, 60px); }
.plaque-stage.mini .pw { font-size: clamp(2.5rem, 5.6vw, 5.4rem); }
.plaque-stage.mini .plaque { width: min(42vw, 520px); }

/* ─── Tarifs ─────────────────────────────────────────────── */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; margin-top: clamp(40px, 5vw, 60px); }
.plan {
  position: relative; display: flex; flex-direction: column;
  border: var(--border-w) solid var(--ink); border-radius: 22px;
  background: var(--mauve); padding: 30px 26px 26px;
  box-shadow: 7px 7px 0 var(--ink);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.plan:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--ink); }
.plan-badge {
  position: absolute; top: -17px; right: 22px;
  background: var(--mauve); color: var(--ink);
  border: var(--border-w) solid var(--ink); border-radius: 999px;
  padding: 7px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  transform: rotate(2.5deg);
  box-shadow: 3px 3px 0 var(--mauve-deep);
}
.plan .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--ink); color: var(--mauve); }
.plan .ic svg { width: 22px; height: 22px; }
.plan h3 { font-size: 27px; margin-top: 18px; }
.plan .tag { font-size: 13px; color: var(--ink-55); margin-top: 5px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 2.5px solid var(--ink-25); }
.plan-price .from { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-55); width: 100%; }
.plan-price .amount { font-family: var(--font-display, 'Qualion', sans-serif); font-size: 46px; line-height: 1; }
.plan-price .cur { font-family: var(--font-display, 'Qualion', sans-serif); font-size: 24px; }
.plan-price .suffix { font-size: 12.5px; color: var(--ink-55); }
.plan-price .quote-only { font-family: var(--font-display, 'Qualion', sans-serif); font-size: 38px; line-height: 1.1; }
.plan-desc { font-size: 13.5px; color: var(--ink-70); margin-top: 12px; }
.plan-feats { list-style: none; margin-top: 18px; margin-bottom: 22px; flex: 1; }
.plan-feats li { display: flex; gap: 11px; align-items: flex-start; padding-block: 8px; font-size: 13.5px; border-bottom: 2px solid var(--ink-12); }
.plan-feats li:last-child { border-bottom: 0; }
.plan-feats svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.plan .pay-alt { margin-top: 12px; }
.plan .pay-alt button { width: 100%; }

.plan.hot { background: var(--ink); color: var(--mauve); box-shadow: 7px 7px 0 var(--mauve-deep); transform: translateY(-12px); }
.plan.hot:hover { transform: translate(-3px, calc(-12px - 3px)); box-shadow: 11px 11px 0 var(--mauve-deep); }
.plan.hot .ic { background: var(--mauve); color: var(--ink); }
.plan.hot .tag, .plan.hot .plan-desc { color: var(--mauve-80); }
.plan.hot .plan-price { border-top-color: var(--mauve-20); }
.plan.hot .plan-price .from, .plan.hot .plan-price .suffix { color: var(--mauve-60); }
.plan.hot .plan-feats li { border-bottom-color: var(--mauve-20); }
.plan.hot .plan-badge { background: var(--mauve); box-shadow: 3px 3px 0 var(--mauve-deep); }

.plans-note { text-align: center; margin-top: clamp(30px, 4vw, 44px); font-size: 13.5px; color: var(--ink-55); }

/* Étapes (vraie séquence : les numéros ont un sens) */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: clamp(40px, 5vw, 58px); }
.steps::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 27px; height: 3px;
  background: repeating-linear-gradient(to right, var(--ink) 0 12px, transparent 12px 24px);
}
.step { position: relative; }
.step .num {
  position: relative;
  display: grid; place-items: center; width: 54px; height: 54px;
  background: var(--ink); color: var(--mauve);
  border-radius: 16px;
  font-family: var(--font-display, 'Qualion', sans-serif); font-size: 24px;
  transform: rotate(-4deg);
  transition: transform .3s var(--ease-spring);
}
.step:nth-child(even) .num { transform: rotate(4deg); }
.step:hover .num { transform: rotate(0) scale(1.1); }
.step h4 { font-family: var(--font-display, 'Qualion', sans-serif); font-size: 20px; margin-top: 16px; }
.step p { font-size: 13.5px; color: var(--ink-70); margin-top: 8px; max-width: 30ch; }

/* FAQ */
.faq-list { max-width: 780px; margin: clamp(36px, 5vw, 54px) auto 0; }
.faq {
  border: var(--border-w) solid var(--ink); border-radius: 18px;
  background: var(--mauve); margin-bottom: 15px;
  overflow: hidden;
  transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.faq:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-align: left; padding: 19px 22px; font-size: 15px; font-weight: 700;
}
.faq-q .pm { position: relative; width: 30px; height: 30px; flex: none; border: 2.5px solid var(--ink); border-radius: 10px; }
.faq-q .pm::before, .faq-q .pm::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); border-radius: 999px;
  transition: transform .3s var(--ease-out);
}
.faq-q .pm::before { width: 14px; height: 3px; transform: translate(-50%, -50%); }
.faq-q .pm::after { width: 3px; height: 14px; transform: translate(-50%, -50%); }
.faq.open .faq-q .pm::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .42s var(--ease-out); }
.faq-a p { padding: 0 22px 20px; font-size: 14px; line-height: 1.7; color: var(--ink-70); }
.faq.open { background: var(--mauve-soft); }

/* ─── Contact ────────────────────────────────────────────── */

.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 3.5vw, 44px); align-items: start; margin-top: clamp(40px, 5vw, 60px); }
.contact-card {
  border: var(--border-w) solid var(--ink); border-radius: 22px;
  background: var(--mauve); padding: clamp(22px, 3vw, 34px);
  box-shadow: 9px 9px 0 var(--ink);
}
.contact-card > h3 { font-size: 26px; }
.contact-card > .hint { font-size: 13px; color: var(--ink-55); margin: 8px 0 24px; }

.info-stack { display: grid; gap: 16px; }
.info-card {
  display: flex; gap: 15px; align-items: flex-start;
  border: var(--border-w) solid var(--ink); border-radius: 18px;
  padding: 19px 20px; background: var(--mauve);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.info-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.info-card .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ink); color: var(--mauve); flex: none; }
.info-card .ic svg { width: 20px; height: 20px; }
.info-card h4 { font-family: var(--font-display, 'Qualion', sans-serif); font-size: 17px; }
.info-card p { font-size: 13.5px; color: var(--ink-70); margin-top: 4px; }
.info-card a { color: inherit; }
.info-card.hot { background: var(--ink); color: var(--mauve); }
.info-card.hot .ic { background: var(--mauve); color: var(--ink); }
.info-card.hot p { color: var(--mauve-80); }
.info-card.hot:hover { box-shadow: 6px 6px 0 var(--mauve-deep); }

/* ─── Légal ──────────────────────────────────────────────── */

.legal-subnav { display: flex; gap: 11px; flex-wrap: wrap; margin-top: clamp(30px, 4vw, 44px); }
.legal-subnav a {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 9px 17px; font-size: 13px; text-decoration: none; color: var(--ink);
  transition: background .2s, color .2s, transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.legal-subnav a svg { width: 15px; height: 15px; }
.legal-subnav a:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.legal-subnav a.on { background: var(--ink); color: var(--mauve); }

.legal-article {
  max-width: 820px; margin-top: clamp(36px, 5vw, 56px);
  border: var(--border-w) solid var(--ink); border-radius: 22px;
  background: var(--mauve); box-shadow: 9px 9px 0 var(--ink);
  padding: clamp(24px, 4vw, 48px);
}
.legal-article h2 { font-size: 24px; margin-top: 36px; padding-bottom: 10px; border-bottom: 2.5px solid var(--ink-25); }
.legal-article h2:first-child { margin-top: 0; }
.legal-article h3 { font-size: 18.5px; margin-top: 26px; }
.legal-article p, .legal-article li { font-size: 14px; line-height: 1.75; color: var(--ink-70); margin-top: 12px; }
.legal-article ul, .legal-article ol { padding-left: 22px; }
.legal-article a { color: var(--ink); }
.legal-article strong, .legal-article b { color: var(--ink); }
.legal-article table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13.5px; }
.legal-article th, .legal-article td { border: 2.5px solid var(--ink); padding: 10px 13px; text-align: left; }
.legal-article th { background: var(--ink); color: var(--mauve); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.legal-updated { margin-top: 30px; font-size: 12.5px; color: var(--ink-55); }
.legal-foot-nav { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 30px; max-width: 820px; }
.legal-back { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--ink); padding-bottom: 3px; }
.legal-back svg { width: 15px; height: 15px; }

/* ─── Paiement ───────────────────────────────────────────── */

.pay-hero { min-height: 86vh; display: grid; place-items: center; padding-top: 110px; }
.pay-card { text-align: center; max-width: 620px; padding-inline: var(--gutter); }
.pay-pic {
  display: grid; place-items: center; width: 104px; height: 104px; margin-inline: auto;
  background: var(--ink); color: var(--mauve);
  border-radius: 32px; transform: rotate(-5deg);
  box-shadow: 7px 7px 0 var(--mauve-deep);
  animation: pay-pop .6s var(--ease-spring) both;
}
.pay-pic svg { width: 48px; height: 48px; }
@keyframes pay-pop { from { transform: rotate(-14deg) scale(.5); opacity: 0; } to { transform: rotate(-5deg) scale(1); opacity: 1; } }
.pay-card h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin-top: 30px; }
.pay-card .lead { margin-top: 16px; font-size: 15px; color: var(--ink-70); }
.pay-card .hero-cta { justify-content: center; }
.pay-ref { display: inline-block; margin-top: 14px; border: 2.5px solid var(--ink); border-radius: 999px; padding: 7px 16px; font-size: 13px; }

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 1080px) {
  .top nav, .top-login { display: none; }
  .burger { display: block; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .quote:nth-child(even) { transform: rotate(1.2deg); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 34px 22px; }
  .steps::before { display: none; }
  .plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .plan.hot { transform: none; order: -1; }
  .plan.hot:hover { transform: translate(-3px, -3px); }
}

@media (max-width: 880px) {
  .feat { grid-template-columns: 1fr; gap: 30px; }
  .feat:nth-child(even) .f-copy { order: 0; }
  .snake { display: none; }
  .cards2 { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(2, 1fr); }
  .app-body { grid-template-columns: 1fr; min-height: 0; }
  .app-side { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px; gap: 5px; }
  .app-side .sb { padding: 6px 10px; width: 100%; }
  .app-tab { width: auto; padding: 8px 12px; font-size: 12.5px; }
  .app-tab .n { margin-left: 6px; }
  .app-side .sep { display: none; }
  .app-tab.opt { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 30px 0; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .plaque { width: 72vw; }
  .plaque-hint { display: none; }
}

@media (max-width: 640px) {
  .top .nav-cta { display: none; }
  .brand .mark { width: 19px; height: 19px; }
  .brand .word { font-size: 23px; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  .hide-sm { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .clog-row { grid-template-columns: 1fr; gap: 8px; }
  .clog-row .tag { justify-self: start; }
  .hero-cta .btn { flex: 1 1 auto; }
  .kanban { grid-template-columns: 1fr; }
  .app { box-shadow: 7px 7px 0 var(--ink); }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .foot-bottom { flex-direction: column; gap: 6px; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; padding-left: 0; }
  .scan { grid-template-columns: 1fr; }
  .scan-receipt { min-height: 110px; }
}

/* ─── Mouvement réduit ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .pour { display: none !important; }
  .band-track, .cta-ghost { animation: none !important; }
  .chart-live .chart-line { stroke-dashoffset: 0; }
  .chart-live .chart-area, .chart-live .chart-dot { opacity: 1; }
}