/* KommIA : styles communs à tout le site (navigation, boutons, titres, zones, téléphone, FAQ, appel final, pied de page) */
/* Page d'accueil, direction A « La vitrine ».
   Feuille autonome : ne dépend ni de styles.css ni du Tailwind compilé (styles.css reste intact). */
@font-face {
  font-family: 'Uncut Sans';
  src: url('/fonts/uncut-sans/UncutSans-Variable.woff2') format('woff2-variations'),
       url('/fonts/uncut-sans/UncutSans-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Uncut Sans';
  src: url('/fonts/uncut-sans/UncutSans-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Uncut Sans';
  src: url('/fonts/uncut-sans/UncutSans-SemiboldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
:root {
  --canvas: #FDFDFF;
  --ink: #0E0E14;
  --ink-70: rgba(14, 14, 20, 0.72);
  --ink-60: rgba(14, 14, 20, 0.62);
  --line: rgba(14, 14, 20, 0.10);
  --violet: #876AFF;
  --violet-ink: #5B3FE0;
  --blue: #168EFF;
  --cyan: #5AD3FF;
  --grad: linear-gradient(100deg, #168EFF 0%, #876AFF 55%, #9A7DFF 100%);
  --shadow-tile: 0 1px 2px rgba(40, 28, 96, 0.08), 0 24px 46px -22px rgba(52, 36, 130, 0.38);
  --shadow-panel: 0 1px 2px rgba(40, 28, 96, 0.05), 0 30px 60px -36px rgba(52, 36, 130, 0.35);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 76px;
  --section-y: clamp(72px, 8vw, 120px);
  interpolate-size: allow-keywords;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Uncut Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
:focus-visible { outline: 2px solid var(--violet-ink); outline-offset: 3px; border-radius: 6px; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none;
}
.skip:focus { top: 12px; }
/* ────── Navigation ────── */
.nav {
  position: sticky; top: 0; z-index: 30;
  height: var(--nav-h);
  transition: background-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.nav[data-scrolled] {
  background: rgba(253, 253, 255, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.nav__inner {
  max-width: 1320px; height: 100%; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.nav__logo img { height: 30px; width: auto; }
.nav__links { display: flex; gap: clamp(20px, 2.6vw, 40px); }
.nav__links a {
  position: relative; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-70);
  padding: 10px 0; transition: color 200ms var(--ease-out);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav__cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--ink); color: #fff; text-decoration: none; font-size: 15px; font-weight: 600;
  transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.nav__cta:hover { background: #26262E; }
.nav__cta:active { transform: scale(0.97); }
.nav__burger {
  display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
}
.nav__burger span {
  position: absolute; left: 12px; right: 12px; height: 1.8px; border-radius: 2px; background: currentColor;
  transition: transform 350ms var(--ease-out);
}
.nav__burger span:first-child { top: 17px; }
.nav__burger span:last-child { top: 25px; }
.nav__burger.is-open span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-menu {
  position: fixed; top: calc(var(--nav-h) - 6px); left: 12px; right: 12px; z-index: 29;
  padding: 10px; border-radius: 24px;
  background: rgba(255, 255, 255, 0.97); box-shadow: 0 30px 60px -24px rgba(40, 28, 96, 0.35), 0 0 0 1px var(--line);
  opacity: 0; pointer-events: none; transform: translateY(-8px) scale(0.98); transform-origin: top center;
  transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out);
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: none; }
.mobile-menu nav a {
  display: block; padding: 14px 14px; border-bottom: 1px solid var(--line);
  font-size: 17px; font-weight: 500; text-decoration: none;
}
.mobile-menu nav a:last-child { border-bottom: 0; color: var(--ink-60); font-size: 15px; }
.mobile-menu__cta {
  display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 8px;
  border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600;
}
/* ────── Fond : halos de couleur de la marque ────── */
main { position: relative; overflow-x: clip; }
main > section { position: relative; z-index: 1; }
.aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.blob, .halo, .mesh {
  position: absolute; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  will-change: transform;
  animation: drift 24s ease-in-out infinite alternate;
}
.halo { z-index: -1; }
.blob--violet {
  top: -300px; right: -14vw; width: min(74vw, 1080px);
  background: radial-gradient(closest-side, rgba(135, 106, 255, 0.6), rgba(135, 106, 255, 0.27) 48%, rgba(135, 106, 255, 0) 100%);
}
.blob--lilac {
  top: -180px; left: -14vw; width: min(48vw, 700px);
  background: radial-gradient(closest-side, rgba(184, 165, 255, 0.44), rgba(184, 165, 255, 0) 100%);
  animation-duration: 30s; animation-delay: -8s;
}
.blob--cyan {
  top: 52vh; left: -18vw; width: min(58vw, 840px);
  background: radial-gradient(closest-side, rgba(90, 211, 255, 0.44), rgba(90, 211, 255, 0.16) 50%, rgba(90, 211, 255, 0) 100%);
  animation-duration: 28s; animation-delay: -14s;
}
.blob--blue {
  top: calc(100dvh + 6vh); right: -6vw; width: min(56vw, 820px);
  background: radial-gradient(closest-side, rgba(22, 142, 255, 0.28), rgba(22, 142, 255, 0.1) 50%, rgba(22, 142, 255, 0) 100%);
  animation-duration: 34s; animation-delay: -4s;
}
.halo--violet {
  top: 4%; right: -16vw; width: min(62vw, 860px);
  background: radial-gradient(closest-side, rgba(135, 106, 255, 0.42), rgba(135, 106, 255, 0.16) 50%, rgba(135, 106, 255, 0) 100%);
  animation-duration: 32s;
}
.halo--cyan {
  top: 16%; left: -20vw; width: min(60vw, 820px);
  background: radial-gradient(closest-side, rgba(90, 211, 255, 0.38), rgba(90, 211, 255, 0.12) 50%, rgba(90, 211, 255, 0) 100%);
  animation-duration: 29s; animation-delay: -10s;
}
.halo--lilac {
  top: -6%; right: -14vw; width: min(56vw, 780px);
  background: radial-gradient(closest-side, rgba(184, 165, 255, 0.48), rgba(184, 165, 255, 0) 100%);
  animation-duration: 27s; animation-delay: -6s;
}
.halo--cyan-low {
  bottom: -18%; left: -16vw; width: min(52vw, 720px);
  background: radial-gradient(closest-side, rgba(90, 211, 255, 0.34), rgba(90, 211, 255, 0) 100%);
  animation-duration: 31s; animation-delay: -12s;
}
/* Grain très léger, comme sur le site officiel */
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: 0.025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* ────── Éléments communs ────── */
.h2 {
  font-size: clamp(2.1rem, 1rem + 2.8vw, 3.6rem); font-weight: 620;
  letter-spacing: -0.04em; line-height: 1.03; text-wrap: balance;
}
.grad {
  font-style: italic; font-weight: 600; color: var(--violet);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad {
      background-image: var(--grad);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      padding-right: 0.07em;
    }
}
.h2 .grad { display: block; width: fit-content; margin-top: 0.04em; }
.h2 .grad--inline { display: inline; margin: 0; padding-right: 0.02em; }
.lead { font-size: 1.125rem; line-height: 1.6; color: var(--ink-70); max-width: 34rem; text-wrap: pretty; }
.sec-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end;
  gap: 24px clamp(32px, 5vw, 80px); margin-bottom: clamp(44px, 5vw, 72px);
}
/* Variante : le sous-titre sous le titre, quand il décrit ce qui suit (un tableau, une grille) */
.sec-head--stack { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 14px; }
.sec-head--stack .lead { max-width: 40rem; }
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 8px 0 26px; border-radius: 999px;
  background: var(--ink); color: #fff; text-decoration: none; font-size: 16px; font-weight: 600;
  transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-out);
}
.btn__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--ink);
  transition: transform 300ms var(--ease-spring);
}
.btn:hover { background: #26262E; }
.btn:hover .btn__icon { transform: translateX(3px) scale(1.05); }
.btn:active { transform: scale(0.98); }
.text-link {
  font-size: 15.5px; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-color: rgba(14, 14, 20, 0.28); text-underline-offset: 5px;
  transition: text-decoration-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.text-link:hover { color: var(--violet-ink); text-decoration-color: currentColor; }
/* Au doigt, les liens texte et ceux du pied de page gagnent une zone de toucher d'environ 44 px, sans bouger la mise en page */
@media (pointer: coarse) {
  .text-link, .foot__cols a, .foot__bottom a { position: relative; }
  .text-link::after, .foot__cols a::after, .foot__bottom a::after { content: ''; position: absolute; inset: -8px -6px; }
  .foot__legal ul { row-gap: 8px; }
}
/* Apparitions au défilement (seulement si le script tourne) */
.js [data-reveal] { transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); }
.meta-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(14, 14, 20, 0.08), 0 10px 24px -14px rgba(40, 28, 96, 0.35);
  font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.meta-badge img { height: 15px; width: auto; margin-left: -1px; }
.meta-badge__check { flex: none; }
.phone {
  position: relative; z-index: 1;
  width: clamp(220px, 18.5vw, 272px);
  padding: 9px; border-radius: 46px; background: var(--ink);
  box-shadow: 0 2px 4px rgba(14, 14, 20, 0.08), 0 40px 70px -30px rgba(40, 24, 90, 0.45);
}
.phone img { border-radius: 37px; }
/* ────── Séparation des sections, sans encadrés ────── */
/* Une teinte douce qui apparaît et disparaît en fondu, sans bord */
[data-zone]::before {
  content: ''; position: absolute; z-index: -2; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0%, var(--zone) 22%, var(--zone) 78%, transparent 100%);
  pointer-events: none;
}
[data-zone="lilac"] { --zone: #F2EEFF; }
[data-zone="blue"] { --zone: #EAF4FF; }
/* Le téléphone : bezel sombre et fin, liseré clair comme un cadre en titane, ombre discrète */
.device {
  position: relative; width: var(--device-w); padding: 6px; border-radius: 44px; background: #131319;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 1.5px #CDD1DB, 0 30px 60px -34px rgba(40, 28, 110, 0.45), 0 10px 24px -18px rgba(40, 28, 110, 0.3);
}
.device::before {
  content: ''; position: absolute; z-index: 3; top: 14px; left: 50%; width: 30%; height: 3.9%; transform: translateX(-50%);
  border-radius: 999px; background: #000;
}
.device__screen { position: relative; aspect-ratio: 1179 / 2556; overflow: hidden; border-radius: 38px; background: #fff; }
/* Chaque écran arrive par le bas et repart par le haut, comme quand on fait défiler l'app */
.device__view {
  position: absolute; inset: 0; opacity: 0; transform: translateY(6%) scale(0.97);
  transition: opacity 420ms var(--ease-out), transform 720ms var(--ease-out);
}
.device__view.is-before { transform: translateY(-6%) scale(0.97); }
.device__view.is-active { opacity: 1; transform: none; }
.device__view img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
/* ────── Tableau comparatif : la colonne KommIA posée dessus comme une carte (Tarifs, Comparatifs) ────── */
.compare__tabs { display: none; }
.compare__stage { --first: 24%; --col: 19%; position: relative; isolation: isolate; }
/* La carte KommIA : blanche, contour en dégradé qui tourne, ombre douce, un peu plus haute que le tableau */
.compare__lift {
  position: absolute; z-index: -1; top: -12px; bottom: -12px; right: 0; width: var(--col);
  border-radius: 24px; background: #fff;
  box-shadow: 0 40px 80px -44px rgba(52, 36, 130, 0.55), 0 12px 30px -20px rgba(52, 36, 130, 0.25);
}
.compare__lift::before {
  content: ''; position: absolute; inset: -1.5px; border-radius: 25.5px; padding: 1.5px;
  background: conic-gradient(from var(--edge), #5AD3FF, #168EFF, #876AFF, #B8A5FF, #5AD3FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: edge-spin 8s linear infinite;
}
.compare__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.compare__table thead td { width: var(--first); }
.compare__table thead th.is-k { width: var(--col); }
.compare__table thead :is(th, td) { padding: 22px 18px 18px; text-align: left; vertical-align: bottom; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-70); }
.compare__table thead small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-60); }
.compare__table thead .is-k { color: var(--ink); font-size: 1.2rem; }
.k-head { display: inline-flex; align-items: center; gap: 9px; }
.k-head img { width: 26px; height: 26px; }
.compare__table tbody :is(th, td) { padding: 15px 18px; border-top: 1px solid rgba(14, 14, 20, 0.08); text-align: left; vertical-align: top; font-size: 15px; line-height: 1.45; }
.compare__table tbody th { padding-left: 0; font-weight: 600; color: var(--ink); }
.compare__table tbody th > span { vertical-align: top; }
.row-ico { display: inline-block; margin: 1px 10px 0 0; vertical-align: top; color: var(--violet-ink); opacity: 0.75; }
.compare__table tbody td { color: var(--ink-60); }
.compare__table tbody td.is-k { color: var(--ink); font-weight: 500; border-top-color: rgba(135, 106, 255, 0.14); }
.k-ico { display: inline-block; flex: none; margin: 2px 8px 0 0; vertical-align: top; color: var(--violet); }
.compare__table td.is-k > .k-ico + span { display: inline-block; max-width: calc(100% - 26px); vertical-align: top; }
.compare__table sup { font-size: 0.7em; color: var(--violet-ink); }
.compare__foot { margin-top: 26px; max-width: 64rem; font-size: 13.5px; line-height: 1.55; color: var(--ink-60); }
.compare__foot sup { color: var(--violet-ink); }
/* Marques par cellule : inclus, limité, absent, et ce que KommIA fait en plus (étoile en dégradé) */
/* flex: none : dans une liste en flex, la marque ne se tasse jamais à côté d'un texte long */
.st { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin: 0 9px 0 0; border-radius: 50%; vertical-align: top; }
.st svg { width: 12px; height: 12px; }
.st--yes { background: rgba(14, 14, 20, 0.06); color: var(--ink-60); }
.st--part { background: rgba(242, 165, 22, 0.2); color: #946300; }
.st--no { background: rgba(214, 64, 64, 0.14); color: #BF3434; }
.st--k { background: rgba(135, 106, 255, 0.14); color: var(--violet); }
.st--star { background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff; box-shadow: 0 6px 14px -6px rgba(91, 63, 224, 0.7); }
.st--star svg { width: 14px; height: 14px; }
.compare__table td > .st + span { display: inline-block; max-width: calc(100% - 31px); padding-top: 1px; vertical-align: top; }
.compare__table tbody td.is-plus { color: var(--ink); font-weight: 600; background-image: linear-gradient(90deg, rgba(135, 106, 255, 0.13), rgba(135, 106, 255, 0.02) 95%); }
.compare__legend { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--ink-60); }
.compare__box + .compare__foot { margin-top: 14px; }
/* Le bouton d'essai en bas de la colonne KommIA (grand écran) ; sous le tableau, pleine largeur, sur téléphone */
.compare__cta td { padding: 20px 14px 6px; }
.btn--block { width: 100%; justify-content: space-between; padding-left: 20px; font-size: 15px; }
.compare__cta-m { display: none; }
/* Sur téléphone et tablette, le bouton de l'appel final mène déjà au store : les badges feraient doublon */
.store-cta .final__stores { display: none; }
.compare__gift { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--ink-60); text-align: center; }
/* Ce que comprend le prix de KommIA, sous le tableau */
.compare__note { margin-top: 34px; max-width: 60rem; font-size: 15px; line-height: 1.6; color: var(--ink-70); text-wrap: pretty; }
.compare__note strong { font-weight: 600; color: var(--ink); }
.compare__note a { color: var(--violet-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(91, 63, 224, 0.4); white-space: nowrap; }
.compare__note a:hover { text-decoration-color: currentColor; }
.compare__note + .compare__legend { margin-top: 16px; }
.compare__legend li { display: inline-flex; align-items: center; }
.compare__legend .st { margin: 0 8px 0 0; }
/* À l'arrivée du tableau, les marques apparaissent ligne après ligne, et chaque étoile lance une onde fine */
.js .compare__table .st { transition: opacity 400ms var(--ease-out), transform 600ms var(--ease-spring); transition-delay: calc(250ms + var(--r, 0) * 70ms); }
.js .compare__box:not(.is-in) .compare__table .st { opacity: 0; transform: scale(0.4); }
.compare__box.is-in .compare__table .st--star { animation: st-ring 1500ms var(--ease-out) calc(650ms + var(--r, 0) * 70ms) 1 both; }
@keyframes st-ring {
  from { box-shadow: 0 6px 14px -6px rgba(91, 63, 224, 0.7), 0 0 0 0 rgba(135, 106, 255, 0.5); }
  to   { box-shadow: 0 6px 14px -6px rgba(91, 63, 224, 0.7), 0 0 0 10px rgba(135, 106, 255, 0); }
}
@media (hover: hover) { .compare__table tbody tr:hover :is(th, td) { background-color: rgba(135, 106, 255, 0.04); } }

/* ────── La preuve de Gaby : le chiffre à gauche, sa phrase à droite (Comparatifs, pages kommia-vs) ────── */
.proof {
  margin: clamp(48px, 5vw, 72px) 0 0; padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px clamp(32px, 5vw, 80px); align-items: center;
}
.proof__num { font-size: clamp(2.4rem, 1.4rem + 2.6vw, 3.6rem); font-weight: 650; letter-spacing: -0.045em; line-height: 1; color: var(--violet); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .proof__num { width: fit-content; background-image: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.proof__label { margin-top: 10px; max-width: 27rem; font-size: 15.5px; line-height: 1.55; color: var(--ink-70); text-wrap: pretty; }
.proof__label strong { font-weight: 600; color: var(--ink); }
.proof__label a { color: var(--violet-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(91, 63, 224, 0.4); white-space: nowrap; }
.proof__label a:hover { text-decoration-color: currentColor; }
.proof__quote { padding-left: 22px; border-left: 2px solid rgba(135, 106, 255, 0.4); }
.proof__quote p { font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.proof__quote footer { margin-top: 14px; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-60); }
.proof__quote img { height: 28px; width: auto; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(14, 14, 20, 0.08); }

/* ────── Sommaire collant (pages kommia-vs, Fonctionnalités, Tarifs) : une bande lavande qui se fond vers les bords,
   soulignée d'un filet au dégradé de la marque effilé aux deux bouts ; la section en cours est soulignée d'un trait en dégradé
   qui glisse d'un lien à l'autre, le survol d'un trait fin comme le menu principal. Chaque page qui l'utilise déclare --vnav-h ────── */
.vnav {
  position: sticky; top: var(--nav-h); z-index: 20; height: var(--vnav-h, 52px);
  display: flex; justify-content: center; align-items: center; padding: 0 var(--gutter);
}
.vnav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(246, 243, 255, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
.vnav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 10%, rgba(22, 142, 255, 0.35) 32%, rgba(135, 106, 255, 0.5) 50%, rgba(90, 211, 255, 0.35) 68%, transparent 90%);
}
.vnav__list {
  position: relative; display: flex; gap: clamp(22px, 2.6vw, 38px); max-width: 100%; height: 36px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.vnav__list::-webkit-scrollbar { display: none; }
/* Le trait de la section en cours : placé par site.js (--x, --w), invisible avant la première section */
.vnav__list::before {
  content: ''; position: absolute; bottom: 4px; left: 0; width: var(--w, 0px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #168EFF, #876AFF, #5AD3FF);
  transform: translateX(var(--x, 0px)); opacity: var(--o, 0);
}
.vnav__list.is-ready::before { transition: transform 450ms var(--ease-out), width 450ms var(--ease-out), opacity 300ms var(--ease-out); }
.vnav li { position: relative; flex: none; }
.vnav a {
  position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0; white-space: nowrap; text-decoration: none;
  font-size: 14.5px; font-weight: 500; color: var(--ink-60); transition: color 250ms var(--ease-out);
}
/* Survol : le trait fin du menu principal */
.vnav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease-out);
}
.vnav a:hover { color: var(--ink); }
.vnav a:hover::after { transform: scaleX(1); }
.vnav a[aria-current="true"] { color: var(--ink); }
.vnav a[aria-current="true"]::after { display: none; }
.vnav a:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 4px; }

/* ────── Vitrine à défilement (bonus de Fonctionnalités, convictions d'À propos) : une entrée dépliée à la fois,
   une barre qui se remplit puis passe à la suivante, une illustration par entrée dans la scène ────── */
/* La liste part du haut : quand un texte plus long se déplie, seule sa fin bouge, la scène garde sa hauteur et la page ne saute pas */
.gifts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; column-gap: clamp(40px, 6vw, 96px); }
.gifts__list { padding-top: 12px; }

/* La liste : le bonus choisi est net et déplié, les autres restent en retrait */
.gifts__list { list-style: none; margin: 0; padding-left: 0; padding-right: 0; }
.gift { border-top: 1px solid var(--line); }
.gift:last-child { border-bottom: 1px solid var(--line); }
.gift h3 { margin: 0; font: inherit; }
.gift__btn {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink);
}
.gift__icon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: rgba(135, 106, 255, 0.1); color: var(--violet-ink);
  transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out);
}
.gift__name { transition: opacity 400ms var(--ease-out), color 200ms var(--ease-out); }
.js .gift:not(.is-active) .gift__name, .js .gift:not(.is-active) .gift__icon { opacity: 0.5; }
.js .gift:not(.is-active) .gift__btn:hover .gift__name { opacity: 0.85; color: var(--violet-ink); }
.gift.is-active .gift__icon { background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff; }
/* Le texte se déplie en douceur */
.gift__detail { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 520ms var(--ease-out), opacity 420ms var(--ease-out); }
.js .gift:not(.is-active) .gift__detail { grid-template-rows: 0fr; opacity: 0; }
.gift__inner { overflow: hidden; padding-left: 50px; }
.gift__body { font-size: 15.5px; line-height: 1.55; color: var(--ink-60); }
.gift__body p { text-wrap: pretty; }
.gift__body p + p { margin-top: 6px; }
.gift__contact { font-size: 14.5px; }
.gift__contact a { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(91, 63, 224, 0.4); }
.gift__contact a:hover { text-decoration-color: currentColor; }
/* Barre fine qui se remplit pendant que le bonus est affiché, puis passe au suivant */
.gift__bar { display: block; height: 2px; margin: 14px 0 16px; border-radius: 2px; background: rgba(14, 14, 20, 0.07); overflow: hidden; }
.gift__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #168EFF, #876AFF); transform-origin: left center; transform: scaleX(0); }
.gifts.is-running .gift.is-active .gift__bar span { animation: gift-bar var(--gift-dur, 5500ms) linear forwards; }
.gifts:not(.is-auto) .gift__bar { visibility: hidden; }

/* La scène : une seule illustration à la fois, sur un halo lilas et cyan */
.gifts__stage { position: relative; height: 528px; isolation: isolate; }
.gifts__stage::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 110%; height: 110%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(closest-side at 32% 38%, rgba(184, 165, 255, 0.75), rgba(184, 165, 255, 0) 100%),
    radial-gradient(closest-side at 70% 64%, rgba(90, 211, 255, 0.5), rgba(90, 211, 255, 0) 100%);
  filter: blur(36px); transform: translate(-50%, -50%);
  animation: fx-aura 26s linear infinite;
}
.gift-art {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(5%) scale(0.97);
  transition: opacity 460ms var(--ease-out), transform 760ms var(--ease-out), visibility 0s linear 460ms;
}
.gift-art.is-before { transform: translateY(-5%) scale(0.97); }
.gift-art.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ────── Questions ────── */
.faq {
  max-width: 1320px; margin: 0 auto; padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start;
}
.faq__head { position: sticky; top: calc(var(--nav-h) + var(--vnav-h, 0px) + 40px); }
.faq__head .lead { margin-top: 18px; }
.faq__help { margin-top: 28px; font-size: 15px; color: var(--ink-60); }
.faq__help a { color: var(--violet-ink); text-underline-offset: 4px; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa[id] { scroll-margin-top: calc(var(--nav-h) + var(--vnav-h, 0px) + 24px); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35;
  transition: color 200ms var(--ease-out);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--violet-ink); }
.qa__icon { position: relative; flex: none; width: 18px; height: 18px; }
.qa__icon::before, .qa__icon::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.6px; margin-top: -0.8px;
  border-radius: 2px; background: currentColor; transition: transform 350ms var(--ease-out);
}
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon::after { transform: rotate(0deg); }
.qa__a p { padding-bottom: 24px; max-width: 42em; font-size: 16px; line-height: 1.65; color: var(--ink-70); }
.qa__a a { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(91, 63, 224, 0.4); }
.qa__a a:hover { text-decoration-color: currentColor; }
.qa::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size 450ms var(--ease-out), content-visibility 450ms allow-discrete;
}
.qa[open]::details-content { block-size: auto; }
/* ────── Dernière ligne droite ────── */
.final { --pf: 1; max-width: 1320px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gutter) var(--section-y); }
.final__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 24px;
  min-height: 500px; padding: clamp(40px, 6vw, 88px) clamp(28px, 6vw, 88px) 0;
  border-radius: 36px; background: #F3F0FF;
  box-shadow: inset 0 0 0 1px rgba(135, 106, 255, 0.12);
}
.mesh { z-index: -1; }
.mesh--a { top: -40%; left: -12%; width: 70%; background: radial-gradient(closest-side, rgba(184, 165, 255, 0.85), rgba(184, 165, 255, 0) 100%); }
.mesh--b { top: 10%; right: -18%; width: 70%; background: radial-gradient(closest-side, rgba(90, 211, 255, 0.6), rgba(90, 211, 255, 0) 100%); animation-duration: 26s; animation-delay: -9s; }
.mesh--c { bottom: -55%; left: 30%; width: 60%; background: radial-gradient(closest-side, rgba(22, 142, 255, 0.35), rgba(22, 142, 255, 0) 100%); animation-duration: 31s; animation-delay: -5s; }
.final__text { align-self: center; padding-bottom: clamp(40px, 6vw, 88px); }
.final__title { font-size: clamp(2.3rem, 1rem + 3.4vw, 4.1rem); font-weight: 620; letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; }
.final__lead { margin-top: 22px; max-width: 32rem; font-size: 1.125rem; line-height: 1.6; color: var(--ink-70); }
.final__actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
/* Petit titre et bandeau de confiance de l'appel final : communs à toutes les pages qui les utilisent */
.final__kicker { margin-bottom: 18px; }
.final__trust { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink-60); }
.final__trust li { display: inline-flex; align-items: center; gap: 8px; }
.final__trust li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--violet); opacity: 0.6; }
.final__visio { margin-top: 22px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
.final__visio svg { flex: none; color: var(--violet-ink); }
/* Rendez-vous découverte (2026-09-29) : pour qui hésite avant d'installer, sous la visio de prise en main, même alignement */
.final__demo { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-60); }
.final__demo svg { flex: none; color: var(--violet-ink); }
.final__demo a { color: var(--violet-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(91, 63, 224, 0.4); text-underline-offset: 3px; }
.final__demo a:hover { text-decoration-color: currentColor; }
.final__price { margin-top: 12px; font-size: 14px; color: var(--ink-60); }
.final__price a { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(91, 63, 224, 0.4); white-space: nowrap; }
.final__price a:hover { text-decoration-color: currentColor; }
.final__stores { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.final__stores span { font-size: 13.5px; color: var(--ink-60); margin-right: 2px; }
.final__stores img { height: 40px; width: auto; transition: transform 220ms var(--ease-out); }
.final__stores a:hover img { transform: translateY(-2px); }
.final__stage { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.phone--final {
  width: clamp(220px, 20vw, 290px);
  transform: translateY(calc(16% + (1 - var(--pf)) * 140px)) rotate(7deg);
  margin-bottom: -2px;
}
/* Variante au cadre fin, celui de la vitrine : même mouvement que le téléphone épais ci-dessus */
.device--final {
  --device-w: clamp(220px, 20vw, 290px);
  transform: translateY(calc(16% + (1 - var(--pf)) * 140px)) rotate(7deg);
  margin-bottom: -2px;
}
.device--final .device__screen > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* ────── Pied de page ────── */
.foot { max-width: 1320px; margin: 0 auto; padding: 24px var(--gutter) 36px; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 40px clamp(40px, 6vw, 96px); }
.foot__brand img { height: 30px; width: auto; }
.foot__brand p { margin-top: 14px; max-width: 20rem; font-size: 15px; color: var(--ink-60); }
.foot__social { list-style: none; padding: 0; margin-top: 20px; display: flex; gap: 8px; }
.foot__social a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  color: var(--ink-70); box-shadow: inset 0 0 0 1px var(--line);
  transition: color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.foot__social a:hover { color: #fff; background: var(--ink); }
/* Quatre colonnes depuis le 2026-09-29 (Produit, Entreprise, Ressources, Légal) */
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot__title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.foot__cols ul { list-style: none; padding: 0; }
.foot__cols a { display: inline-block; padding: 5px 0; font-size: 15px; color: var(--ink-60); text-decoration: none; transition: color 200ms var(--ease-out); }
.foot__cols a:hover { color: var(--ink); }
.foot__bottom {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  font-size: 13.5px; color: var(--ink-60);
}
.foot__bottom a { color: var(--ink-60); text-underline-offset: 4px; }
/* ────── Bannière de suggestion anglaise (injectée par script.js) ────── */
.lang-suggest-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px;
  padding: 10px 44px 10px 16px; background: var(--ink); color: #fff; font-size: 13px;
  transform: translateY(-100%); transition: transform 320ms var(--ease-out);
}
.lang-suggest-banner.is-visible { transform: translateY(0); }
.lang-suggest-banner__text { display: inline-flex; align-items: center; gap: 8px; }
.lang-suggest-banner__flag { font-size: 14px; }
.lang-suggest-banner__cta { color: #B8A5FF; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.lang-suggest-banner__cta:hover { color: #fff; }
.lang-suggest-banner__close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; background: transparent; color: #fff; opacity: 0.6; cursor: pointer; font-size: 18px; line-height: 1;
}
.lang-suggest-banner__close:hover { opacity: 1; }
body.has-lang-suggest { padding-top: 40px; }
/* ────── Mobile ────── */
@media (max-width: 899px) {
  .gifts { grid-template-columns: minmax(0, 1fr); }
  /* Scène et liste tiennent dans un seul écran : l'illustration reste visible quand on choisit un bonus */
  .gifts__stage { order: -1; height: 250px; margin-bottom: 12px; }
  .gifts__list { padding-top: 0; }
  .gift__btn { padding: 9px 0; font-size: 1.05rem; }
  .gift__icon { width: 32px; height: 32px; border-radius: 10px; }
  .gift__inner { padding-left: 46px; }
  .gift__bar { margin: 12px 0 14px; }
  .vnav { padding: 0; }
  .vnav::before { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .vnav__list { padding: 0 var(--gutter); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 32px), transparent); }
  .vnav__list { gap: 22px; }
  .vnav a { font-size: 14px; }
  .proof { grid-template-columns: minmax(0, 1fr); }
  :root { --nav-h: 68px; }
  .nav__links { display: none; }
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__burger { display: block; }
  .nav__cta { height: 40px; padding: 0 16px; font-size: 14px; }
  .nav__logo img { height: 26px; }
  .phone { width: min(64vw, 280px); }
  .blob--violet { top: -160px; right: -40vw; width: 120vw; }
  .blob--lilac { top: -80px; left: -40vw; width: 90vw; }
  .blob--cyan { top: 70vh; left: -45vw; width: 110vw; }
  .blob--blue { top: auto; bottom: 10vh; right: -40vw; width: 110vw; }
  .halo--violet, .halo--cyan, .halo--lilac, .halo--cyan-low { width: 110vw; }
  .sec-head { grid-template-columns: 1fr; align-items: start; }
  .lead { font-size: 1.0625rem; }
  .device { border-radius: 40px; }
  .device__screen { border-radius: 34px; }
  .device::before { top: 13px; }
  .faq { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .final__panel { grid-template-columns: 1fr; min-height: 0; padding-top: 44px; border-radius: 28px; }
  .final__title .nowrap { white-space: normal; }
  .final__text { padding-bottom: 12px; }
  .final__stage { height: 300px; overflow: hidden; }
  /* Stores : le libellé au-dessus, les deux badges côte à côte, à la même hauteur */
  .final__stores { display: grid; grid-template-columns: repeat(2, max-content); align-items: center; gap: 8px 10px; }
  .final__stores span { grid-column: 1 / -1; margin-right: 0; }
  .final__stores a { display: block; line-height: 0; }
  .phone--final { width: min(60vw, 240px); transform: translateY(calc(10% + (1 - var(--pf)) * 100px)) rotate(6deg); align-self: flex-start; margin-top: 20px; }
  .device--final { --device-w: min(60vw, 240px); transform: translateY(calc(10% + (1 - var(--pf)) * 100px)) rotate(6deg); align-self: flex-start; margin-top: 20px; }
  .foot__top { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  /* Liens légaux en une ligne compacte : le pied de page ne prend plus un écran entier */
  .foot__legal { grid-column: 1 / -1; }
  .foot__legal ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .foot__legal a { font-size: 13.5px; }
}
@media (max-width: 899px) {
  /* Tableau : KommIA face à une seule alternative à la fois, choisie avec les onglets */
  .compare__tabs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; padding: 4px;
    border-radius: 999px; background: rgba(14, 14, 20, 0.05);
  }
  .compare__tabs button {
    height: 40px; border: 0; border-radius: 999px; background: none; cursor: pointer;
    font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink-60);
    transition: background-color 250ms var(--ease-out), color 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
  }
  .compare__tabs button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 4px 14px -8px rgba(40, 28, 96, 0.45); }
  .compare__box[data-show="1"] :is(th, td):is(:nth-child(3), :nth-child(4)),
  .compare__box[data-show="2"] :is(th, td):is(:nth-child(2), :nth-child(4)),
  .compare__box[data-show="3"] :is(th, td):is(:nth-child(2), :nth-child(3)) { display: none; }
  .compare__stage { --first: 34%; --col: 33%; }
  .compare__lift { top: -8px; bottom: -8px; border-radius: 20px; }
  .compare__lift::before { border-radius: 21.5px; }
  .compare__table thead :is(th, td) { padding: 16px 12px 12px; font-size: 1rem; }
  .compare__table thead .is-k { font-size: 1.05rem; }
  .k-head img { width: 22px; height: 22px; }
  .compare__table tbody :is(th, td) { padding: 12px; font-size: 14px; }
  .compare__table :is(thead, tbody) th:first-child, .compare__table thead td:first-child { padding-left: 0; }
  .row-ico { display: none; }
  .k-ico { display: none; }
  .compare__legend { margin-top: 24px; }
  .compare__cta { display: none; }
  .compare__cta-m { display: block; margin-top: 22px; }
  .compare__cta-m .btn { width: 100%; justify-content: space-between; }
  .compare__note { margin-top: 22px; }
  .compare__table td.is-k > .k-ico + span { max-width: none; }
}
@media (max-width: 599px) {
  .compare__table td > .st { display: grid; margin: 0 0 6px; }
  .compare__table td > .st + span { display: block; max-width: none; }
}
@media (max-width: 420px) {
  .btn { width: 100%; justify-content: space-between; }
  .final__actions { flex-direction: column; align-items: stretch; }
  /* Tableau sur petit téléphone : le logo passe au-dessus du nom ; sous 360 px, les mots longs se coupent à la française */
  .compare__table thead :is(th, td) { padding: 14px 8px 10px; }
  .compare__table tbody :is(th, td) { padding: 12px 8px; }
  .compare__table thead .k-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 359px) {
  .compare__table tbody td { -webkit-hyphens: auto; hyphens: auto; }
}
/* ────── La bulle « Et bien d'autres » (accueil et À propos) : anneau en pointillés aux couleurs de la marque qui tourne lentement,
   disque plat teinté aux couleurs de la marque, « + » en dégradé qui pivote au survol. Elle remplit son conteneur ; --more-ring règle l'épaisseur de l'anneau ────── */
.more-bubble { --more-ring: 3px; position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
.more-bubble::before {
  content: ''; position: absolute; inset: 0; z-index: -2; border-radius: 50%;
  background: conic-gradient(from 0deg, #5AD3FF, #168EFF, #876AFF, #B8A5FF, #5AD3FF);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--more-ring)), #000 calc(100% - var(--more-ring) + 0.5px)), repeating-conic-gradient(#000 0deg 9deg, transparent 9deg 15deg);
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--more-ring)), #000 calc(100% - var(--more-ring) + 0.5px)), repeating-conic-gradient(#000 0deg 9deg, transparent 9deg 15deg);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  animation: more-spin 18s linear infinite;
}
.more-bubble::after {
  content: ''; position: absolute; inset: calc(var(--more-ring) + 2px); z-index: -1; border-radius: 50%;
  background: linear-gradient(135deg, #D6EFFF, #E0E1FF 50%, #EADCFF);
}
.more-bubble__plus {
  width: 30%; aspect-ratio: 1; background: linear-gradient(135deg, #168EFF, #876AFF);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 600ms var(--ease-spring);
}
@media (hover: hover) { li:hover .more-bubble__plus { transform: rotate(90deg); } }
@keyframes more-spin { to { transform: rotate(360deg); } }

/* ────── Mouvement réduit : tout est affiché dans son état final ────── */
@media (prefers-reduced-motion: reduce) {
  .gifts__stage::before { animation: none; }
  .gift-art, .gift__detail { transition: none; }
  .vnav__list.is-ready::before, .vnav a, .vnav a::after { transition: none; }
  .hero__title .w, .hero__title .line--accent, .hero__eyebrow, .hero__trust, .hero__intro, .hero__actions, .tile, .blob, .halo, .mesh { animation: none; }
  .phone--final, .device--final { transform: translateY(16%) rotate(7deg); }
  .js [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
  .qa::details-content { transition: none; }
  .device__view, .pillar, .pillar::before { transition: none; }
  .compare__lift::before, .compare__box.is-in .compare__table .st--star { animation: none; }
  .js .compare__box:not(.is-in) .compare__table .st, .js .compare__table .st { opacity: 1; transform: none; transition: none; }
  .device__view, .device__view.is-before { transform: none; }
  .more-bubble::before { animation: none; }
  .more-bubble__plus { transition: none; }
  html { scroll-behavior: auto; }
}
@property --edge { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes edge-spin { to { --edge: 360deg; } }
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3vw, 4vh, 0) scale(1.08); }
  100% { transform: translate3d(2vw, -3vh, 0) scale(0.95); }
}
@keyframes gift-bar { to { transform: scaleX(1); } }
@keyframes fx-aura {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.08); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

/* ────── Fenêtre vidéo (liens a[data-yt], site.js) : fond sombre voilé, la vidéo au centre, le titre et « Ouvrir sur YouTube » dessous ────── */
.ytm { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: var(--gutter); border: 0; background: transparent; color: #fff; overflow: hidden; }
.ytm[open] { display: grid; place-items: center; }
.ytm::backdrop { background: rgba(14, 14, 20, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ytm__box { position: relative; width: min(1080px, 100%, calc((100dvh - 180px) * 16 / 9)); animation: ytm-in 360ms var(--ease-out) both; }
@keyframes ytm-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.ytm__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: clamp(14px, 2vw, 22px); background: #0E0E14; box-shadow: 0 0 0 1px rgba(135, 106, 255, 0.25), 0 40px 90px -30px rgba(0, 0, 0, 0.8); }
.ytm__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Lecteur bloqué par Termly (pas de consentement) : son encart d'activation, centré dans le cadre */
.ytm__frame .termly-blocked-content { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; }
.ytm__close {
  position: absolute; top: -54px; right: 0; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; transition: background-color 200ms var(--ease-out), transform 300ms var(--ease-spring);
}
.ytm__close:hover { background: rgba(255, 255, 255, 0.26); transform: rotate(90deg); }
.ytm__close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.ytm__meta { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.ytm__title { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); font-weight: 620; letter-spacing: -0.015em; }
.ytm__out { font-size: 14.5px; color: rgba(255, 255, 255, 0.75); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 4px; }
.ytm__out:hover { color: #fff; text-decoration-color: currentColor; }
html.ytm-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ytm__box { animation: none; } }