/* Kit SEO technique · page autonome dans public/, DA outremer.
   Les lignes qui suivent jusqu'au repère « FIN DU SHELL » sont reprises telles quelles
   de public/skills/style.css : tokens, voile d'entrée, nav en trois îlots, boutons.
   Tout ce qui vient après appartient à cette page. */
:root{
  --ink:#2b2b30; --ink-2:#6f6f78; --line:#e8e6e6; --paper:#fff;
  --c-top:#2f4fe0; --c-bottom:#7fa0ff;
  --accent-rgb:47,79,224; --shadow-rgb:33,55,157;
  --tint:#e8eeff; --tint-2:#e3eaff; --wash:#f7f9ff;
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-xl:40px;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --grad:linear-gradient(160deg,var(--c-top) 0%,var(--c-top) 45%,var(--c-bottom) 100%);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.ico{width:18px;height:18px;flex:none}
kbd{font-family:var(--mono);font-size:11px}

/* entrée : voile bleu grainé, le logo se compose, le voile remonte */
.intro{position:fixed;inset:0;z-index:200;background:var(--grad);display:grid;place-items:center;isolation:isolate;overflow:hidden;animation:intro-out .5s .42s cubic-bezier(.7,0,.2,1) forwards;pointer-events:none}
.intro::after{content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px}
.intro-mark{width:96px;height:96px;position:relative;z-index:1;animation:approche .62s .02s cubic-bezier(.16,.8,.24,1) both}
@keyframes approche{from{opacity:0;transform:scale(1.42) rotate(-5deg);filter:blur(9px)}55%{opacity:1}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes intro-out{to{transform:translateY(-100%);border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl)}}
body.intro-on .hero h1 .w,body.intro-on .hero-sub,body.intro-on .hero-note{animation-play-state:paused}
body.intro-done .intro,.intro.done{display:none}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* nav trois îlots : reprise telle quelle de public/da/nav-island.css de la landing
   (verre teinté au-dessus du hero, îles blanches au scroll via .glass) */
.nav-bar{position:sticky;top:0;z-index:30;padding:14px 16px 0;margin-bottom:-62px;pointer-events:none;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-bar.glass{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-bar .wrap{max-width:980px;padding:0}

/* le conteneur ne porte plus de verre : trois îlots, la grille centre le deuxième
   quel que soit le poids des deux autres */
.nav{pointer-events:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;height:auto;padding:0;border-radius:0;color:#fff;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transition:color .3s ease}
.nav-bar.glass .nav{background:transparent;border:0;box-shadow:none;color:var(--ink)}

/* recette de verre commune aux trois îlots ; rayon 19 = rayon interne + retrait
   (pastille du logo 9 + 10 de marge, pastille du bouton 8 + 11 de marge) */
.logo,.nav-links,.nav .btn-ghost{pointer-events:auto;height:48px;border-radius:19px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(var(--shadow-rgb),.18),inset 0 1px 0 rgba(255,255,255,.35)}
.nav-bar.glass .logo,.nav-bar.glass .nav-links{background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.9);box-shadow:0 12px 34px rgba(var(--shadow-rgb),.14)}

.logo{justify-self:start;display:flex;align-items:center;gap:8px;font-weight:600;color:inherit;font-size:17px;padding:0 16px 0 10px;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,color .3s ease}
.logo .chip{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;flex:none;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  transition:background .3s ease,border-color .3s ease,transform .3s ease}
.nav-bar.glass .logo .chip{background:#eef2ff;border-color:#dfe6ff}
.logo:hover .chip{transform:translateY(-1px)}
.logo .mark{width:17px;height:17px}
/* sur l'île blanche le symbole garde ses dégradés, sur le hero il passe en blanc plein */
.logo .mark .pa{fill:url(#orgA)}
.logo .mark .pb{fill:url(#orgB)}
.nav-bar:not(.glass) .logo .mark .pa,.nav-bar:not(.glass) .logo .mark .pb{fill:#fff}

.nav-links{justify-self:center;position:relative;display:flex;align-items:center;gap:2px;padding:0 6px;font-size:14px;color:inherit;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,color .3s ease}
.nav-links a{position:relative;z-index:1;padding:8px 16px;border-radius:999px;opacity:.72;color:inherit;white-space:nowrap;
  transition:opacity .15s ease,scale .15s cubic-bezier(.2,0,0,1)}
.nav-links a:active{scale:.96}
.nav-links a:hover,.nav-links a.on{opacity:1;color:inherit}
/* La pastille de verre glisse sous l'onglet survolé, puis revient se poser sur
   l'onglet actif quand la souris quitte l'îlot (position posée par app.js). */
.nav-links .puck{position:absolute;top:6px;height:36px;border-radius:999px;z-index:0;opacity:0;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  transition:left .35s cubic-bezier(.2,0,0,1),width .35s cubic-bezier(.2,0,0,1),opacity .2s ease,
             background .3s ease,border-color .3s ease}
.nav-bar.glass .nav-links .puck{background:#eef2ff;border-color:#dfe6ff}
/* une lumière très légère suit le curseur dans l'îlot */
.nav-links::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  background:radial-gradient(120px circle at var(--lx,50%) var(--ly,50%),rgba(255,255,255,.18),transparent 65%);
  opacity:0;transition:opacity .3s ease}
.nav-links:hover::after{opacity:1}
.nav-bar.glass .nav-links::after{background:radial-gradient(120px circle at var(--lx,50%) var(--ly,50%),rgba(70,133,240,.10),transparent 65%)}
@media (prefers-reduced-motion:reduce){.nav-links .puck,.nav-links::after{transition:none}}

/* Le bouton reprend le verre du bouton du hero (choix de Tim, 2026-09-10) : fond blanc
   à 10 %, liseré clair, flou d'arrière-plan, pastille de verre. Au survol la couleur
   ne bouge pas : une lumière traverse le verre et le grain se lève. */
.nav .btn-ghost{justify-self:end;position:relative;overflow:hidden;isolation:isolate;gap:10px;padding:0 11px 0 18px;
  color:#fff;
  transition:border-color .35s ease,box-shadow .35s ease,scale .15s cubic-bezier(.2,0,0,1)}
.nav .btn-ghost:active{scale:.96;transform:none}
.nav .btn-ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.52);
  box-shadow:0 16px 40px rgba(var(--shadow-rgb),.28),inset 0 1px 0 rgba(255,255,255,.35)}
.nav .btn-ghost .lab{position:relative;z-index:3;white-space:nowrap}
.nav .btn-ghost .pil{position:relative;z-index:3;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;
  transition:background .3s ease,border-color .3s ease}
.nav .btn-ghost .pil .ico{width:15px;height:15px}
.nav .btn-ghost:hover .pil{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.48)}
.nav .btn-ghost:hover .ico{transform:none}   /* la flèche ne bouge pas : un seul effet */
/* la lumière qui passe */
.nav .btn-ghost::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:55%;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:skewX(-14deg);transition:left .62s cubic-bezier(.3,.6,.2,1)}
.nav .btn-ghost:hover::before{left:120%}
/* le grain se lève le temps du survol */
.nav .btn-ghost::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--grain);background-size:260px 260px;mix-blend-mode:overlay;opacity:0;transition:opacity .4s ease}
.nav .btn-ghost:hover::after{opacity:.45}
/* île blanche : le verre n'aurait plus de fond à teinter, la pilule prend le dégradé grainé */
.nav-bar.glass .btn-ghost{background:var(--grad);color:#fff;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 22px rgba(var(--shadow-rgb),.22)}
.nav-bar.glass .btn-ghost:hover{background:var(--grad);border-color:transparent;box-shadow:0 12px 30px rgba(var(--shadow-rgb),.3)}
.nav-bar.glass .btn-ghost::before{background:linear-gradient(100deg,transparent 0%,rgba(159,179,247,.95) 45%,rgba(201,213,249,.8) 62%,transparent 100%)}
.nav-bar.glass .btn-ghost::after,.nav-bar.glass .btn-ghost:hover::after{opacity:.5}
.nav-bar.glass .btn-ghost .pil{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.nav-bar.glass .btn-ghost:hover .pil{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.5)}

@media (max-width:900px){
  .nav-bar{padding:10px 12px 0;margin-bottom:-52px}
  .nav{gap:10px}
  .logo,.nav-links,.nav .btn-ghost{height:42px;border-radius:17px}
  .nav-links{padding:0 5px;gap:0;font-size:13px}
  .nav-links a{padding:6px 12px}
  .nav-links .puck{top:5px;height:32px}
  .nav .btn-ghost{padding:0 9px 0 14px;font-size:13px;gap:8px}
  .nav .btn-ghost .pil{width:23px;height:23px;border-radius:7px}
}
@media (max-width:520px){
  .logo{font-size:0;gap:0;padding:0;width:42px;justify-content:center}
  .logo .chip{width:32px;height:32px}.logo .mark{width:19px;height:19px}
  /* trois îlots ne tiennent plus sur une rangée : les onglets passent dessous, centrés */
  .nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
  .nav-links{order:3;flex:1 1 100%;justify-content:center;gap:0;font-size:12px}
  .nav-links a{padding:6px 10px}
  .nav-bar{margin-bottom:-102px}
}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-sm);font-size:14px;font-weight:500;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:transform .15s ease,background .15s ease,color .15s ease}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#1f1f24}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--wash)}
.btn .ico{transition:transform .2s ease}
.btn:hover .ico{transform:translateX(3px)}
/* ════════════════════ FIN DU SHELL ════════════════════ */
footer{padding:40px 0 96px;border-top:1px solid var(--line);color:var(--ink-2);font-size:14px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .links{display:flex;gap:24px;flex-wrap:wrap}
footer a:hover{color:var(--ink)}

/* ═══════════════════════ la page ═══════════════════════ */
:root{
  /* outremer peint dans la lettre : une image SVG (aplat + bruit) découpée par le texte,
     reprise de public/da/theme-monaco.css pour que les H2 soient identiques au reste du site */
  --grad-text:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='240' preserveAspectRatio='none'><defs><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' result='t'/><feColorMatrix in='t' type='saturate' values='0' result='m'/><feComponentTransfer in='m' result='a'><feFuncA type='linear' slope='.7'/></feComponentTransfer><feComposite in='a' in2='SourceGraphic' operator='in' result='c'/><feBlend in='SourceGraphic' in2='c' mode='overlay'/></filter></defs><rect width='100%' height='100%' fill='%232f4fe0' filter='url(%23n)'/></svg>");
  --ease:cubic-bezier(.2,0,0,1);
  --ol:oklch(0 0 0 / 0.1);           /* liseré des images, jamais teinté */
}
code{font-family:var(--mono);font-size:.92em;background:var(--tint);padding:2px 6px;border-radius:6px}

/* Le bouton de la nav n'a pas la classe .btn du shell : sans display:inline-flex
   le libellé et la pastille se mettent l'un sous l'autre. La pastille porte le
   cristal Obsidian et le bouton descend sur la carte de prix.
   Il garde le fond animé du hero en permanence, y compris une fois la barre
   passée en îles blanches : le dégradé CSS reste dessous comme repli. */
.nav .btn-ghost{display:inline-flex;align-items:center;white-space:nowrap;
  isolation:isolate;overflow:hidden;color:#fff;
  background:var(--grad);border-color:rgba(255,255,255,.34);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 10px 30px rgba(var(--shadow-rgb),.24),inset 0 1px 0 rgba(255,255,255,.3)}
.nav .btn-ghost:hover{background:var(--grad);border-color:rgba(255,255,255,.5);
  box-shadow:0 16px 40px rgba(var(--shadow-rgb),.32),inset 0 1px 0 rgba(255,255,255,.35)}
.nav-fond{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity .7s ease}
.nav-fond.on{opacity:1}
/* la barre passe en îles blanches, le bouton lui ne change pas */
.nav-bar.glass .btn-ghost,.nav-bar.glass .btn-ghost:hover{background:var(--grad);border-color:rgba(255,255,255,.34);
  color:#fff;box-shadow:0 10px 30px rgba(var(--shadow-rgb),.26),inset 0 1px 0 rgba(255,255,255,.3)}
.nav-bar.glass .btn-ghost::before{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%)}
.nav .btn-ghost .pil,.nav-bar.glass .btn-ghost .pil{overflow:hidden;
  background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.38)}
.nav .btn-ghost:hover .pil,.nav-bar.glass .btn-ghost:hover .pil{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.5)}
.pil-obs{width:15px;height:15px;display:block}
.logo .mark .pa{fill:url(#orgA)}
.logo .mark .pb{fill:url(#orgB)}
.nav-bar:not(.glass) .logo .mark .pa,.nav-bar:not(.glass) .logo .mark .pb{fill:#fff}

/* entrée au défilement : les blocs arrivent par paquets, décalés de 100 ms */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ─────────── hero ─────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--grad);color:#fff;
  padding:132px 0 0;border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl)}
/* le fond animé, repris de la home : le dégradé CSS reste dessous le temps que
   three.js arrive, et la toile apparaît en fondu par-dessus */
.hero-fond{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity .7s ease}
.hero-fond.on{opacity:1}
.hero-grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;mix-blend-mode:overlay;
  background-image:var(--grain);background-size:260px 260px}
.hero-in{position:relative;z-index:1;max-width:1000px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero h1{margin:0;font-size:clamp(34px,5.1vw,70px);line-height:1.02;letter-spacing:-.042em;max-width:25ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:rgba(255,255,255,.58)}
.hero-sub{margin-top:24px;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:rgba(255,255,255,.88);max-width:58ch}
.hero-note{margin-top:28px;color:rgba(255,255,255,.7);max-width:56ch;line-height:1.65}

/* boutons de la page : rayon externe 14 = rayon de la pastille 8 + les 6 de retrait */
.btn{height:52px;padding:0 8px 0 20px;border-radius:14px;font-size:15px;gap:14px;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease,scale .15s var(--ease)}
.btn:active{scale:.96;transform:none}
.btn .pil{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;flex:none}
.btn .pil svg{width:17px;height:17px;transition:transform .25s var(--ease)}
.btn:hover .pil svg{transform:translateX(3px)}
.btn-white{background:#fff;color:var(--ink);box-shadow:0 14px 34px rgba(var(--shadow-rgb),.26)}
.btn-white .pil{background:var(--tint);color:var(--c-top)}
.btn-white:hover{box-shadow:0 20px 44px rgba(var(--shadow-rgb),.34)}
.btn-glass{display:inline-flex;align-items:center;height:52px;padding:0 22px;border-radius:14px;color:#fff;font-size:15px;font-weight:500;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .25s ease,border-color .25s ease,scale .15s var(--ease)}
.btn-glass:active{scale:.96}
.btn-glass:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}

/* la fenêtre : châssis de navigateur. Rayon externe 18 = rayon du contenu 12 + 6 de retrait. */
.win{position:relative;border-radius:18px;background:#f4f5f8;overflow:hidden;
  border:1px solid rgba(255,255,255,.22);box-shadow:0 34px 80px rgba(var(--shadow-rgb),.3)}
.win-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#e9ebf1;border-bottom:1px solid #dcdfe8}
.win-bar i{width:10px;height:10px;border-radius:50%;background:#c9cdd8;flex:none}
.win-url{margin-left:12px;color:#8b90a0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-dark{background:#111b21;border-color:rgba(255,255,255,.1)}
.win-bar.dark{background:#1f2c33;border-bottom-color:#2a3942}
.win-bar.dark .win-url{color:#7a8b95}
.win-bar.dark i.r{background:#ff5f57}.win-bar.dark i.y{background:#febc2e}.win-bar.dark i.g{background:#28c840}

/* ─────────── la bande de terminaux sous le titre ───────────
   Cinq sessions réelles de l'agent, dupliquées pour que le défilement boucle
   sans coupure. Chaque ligne s'allume à son tour et le cycle repart. */
.hero-band{position:relative;z-index:1;margin-top:62px;padding-bottom:58px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.band-track{display:flex;gap:20px;width:max-content;animation:band-drift 62s linear infinite}
@keyframes band-drift{to{transform:translateX(calc(-50% - 10px))}}
.bterm{display:flex;flex-direction:column;flex:none;width:470px;height:300px;overflow:hidden;border-radius:16px;
  background:rgba(8,14,34,.78);border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 26px 64px rgba(10,20,70,.3),inset 0 1px 0 rgba(255,255,255,.12)}
.bterm-bar{position:relative;display:flex;align-items:center;gap:7px;flex:none;height:34px;padding:0 12px;
  background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.09)}
.bterm-bar::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:linear-gradient(90deg,#5fd3a6,#9fb3f7);
  animation:bprog 9s linear infinite;animation-delay:calc(-1 * var(--p,0s))}
@keyframes bprog{0%{width:0;opacity:1}86%{width:100%;opacity:1}88%,100%{width:100%;opacity:0}}
.bterm-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.24);flex:none}
.bterm-bar .mono{margin-left:10px;font-size:11px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none;font-family:var(--mono);font-size:10.5px;color:#7ee0b4}
.live s{width:6px;height:6px;border-radius:50%;background:#5fd3a6;text-decoration:none;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.bterm-body{flex:1;padding:13px 15px;font-family:var(--mono);font-size:11.5px;line-height:1.66;overflow:hidden;text-align:left}
.bl{display:flex;gap:8px;opacity:0;transform:translateY(3px);
  animation:bline 9s linear infinite;animation-delay:calc(var(--i) * .26s - var(--p,0s))}
@keyframes bline{
  0%,1.4%{opacity:0;transform:translateY(3px);clip-path:inset(0 100% 0 0)}
  2%{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
  6.5%,88%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
  94%,100%{opacity:0;transform:translateY(-2px);clip-path:inset(0 0 0 0)}}
.bl i{font-style:normal;flex:none;width:10px;text-align:center}
.bl.cmd{color:#fff;margin-bottom:7px}
.bl.cmd i{color:#9fb3f7}
.bl.skill{color:#b3c4f5;margin-bottom:6px}
.bl.skill i{color:#9fb3f7}
.bl.skill b{color:#fff;font-weight:500}
.bl.ok{color:rgba(255,255,255,.62)}
.bl.ok i{color:#5fd3a6}
.bl.out{color:#fff;margin-top:8px}
.bl.out i{color:#ffc46b}
.bl.say{color:rgba(255,255,255,.45);padding-left:18px}
@media (prefers-reduced-motion:reduce){
  .band-track{animation:none}
  .bl{opacity:1;transform:none;clip-path:none;animation:none}
  .bterm-bar::after,.live s{animation:none}
  .bterm-bar::after{width:100%}
}

/* ─────────── ossature des sections ─────────── */
.sec{padding:48px 0 132px}
#modules{padding-top:150px}
.sec-head{max-width:800px;margin-bottom:56px}
.sec-head h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.032em;
  color:transparent;-webkit-text-fill-color:transparent;background-image:var(--grad-text);
  background-size:100% 100%;-webkit-background-clip:text;background-clip:text;width:fit-content;max-width:100%}
.sec-sub{margin-top:18px;font-size:17px;line-height:1.6;color:var(--ink-2)}

/* ─────────── les six modules ─────────── */
/* bento : le cristal au centre, des cases de tailles différentes serrées autour */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:minmax(236px,auto) minmax(236px,auto) minmax(228px,auto);gap:12px}
.core{grid-column:2/4;grid-row:1/3}
.m-a{grid-column:1;grid-row:1}          /* petite */
.m-b{grid-column:4;grid-row:1/3}        /* haute */
.m-f h3,.m-b h3{font-size:20px}
.m-c{grid-column:1;grid-row:2}          /* petite */
.m-d{grid-column:1;grid-row:3}          /* petite */
.m-e{grid-column:2;grid-row:3}          /* petite */
.m-f{grid-column:3/5;grid-row:3}        /* large */
.mod{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:24px;border-radius:24px;
  background:var(--wash);border:1px solid transparent;
  transition:border-color .35s ease,box-shadow .35s ease,color .35s ease}
/* au survol la carte passe en dégradé grainé, sans se soulever (choix de Tim sur /skills/) */
.mod::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--grad);opacity:0;transition:opacity .35s ease}
.mod::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;mix-blend-mode:overlay;
  background-image:var(--grain);background-size:260px 260px;transition:opacity .35s ease}
.mod:hover{color:#fff;box-shadow:0 26px 60px rgba(var(--shadow-rgb),.24)}
.mod:hover::before{opacity:1}
.mod:hover::after{opacity:.5}
.mod .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:#fff;color:var(--c-top);font-size:12px;transition:background .35s ease,color .35s ease}
.mod:hover .n{background:rgba(255,255,255,.18);color:#fff}
.mod h3{margin:13px 0 9px;font-size:18px;letter-spacing:-.021em}
.mod p{font-size:14.5px;line-height:1.6;color:var(--ink-2);transition:color .35s ease}
.mod p + p{margin-top:11px}
.mod:hover p{color:rgba(255,255,255,.9)}
.mod-edge{margin-top:12px;color:var(--ink) !important}
.mod:hover .mod-edge{color:#fff !important}
.rend{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);transition:border-color .35s ease}
.mod:hover .rend{border-top-color:rgba(255,255,255,.28)}
.rend .mono{display:block;color:var(--c-top);margin-bottom:5px;text-transform:uppercase;letter-spacing:.08em;transition:color .35s ease}
.mod:hover .rend .mono{color:rgba(255,255,255,.75)}

/* la carte s'ouvre sur un terminal : au clic, la fiche s'efface et la session
   s'écrit ligne par ligne. Rien ne bouge en dehors de la carte. */
.mod{cursor:pointer}
.mod:focus-visible{outline:2px solid var(--c-top);outline-offset:3px}
.mod-face{display:flex;flex-direction:column;flex:1;min-height:0;transition:opacity .3s var(--ease),filter .3s var(--ease)}
.mod.run .mod-face{opacity:0;filter:blur(4px);pointer-events:none}
.mod.run{border-color:transparent;color:var(--ink);box-shadow:0 26px 60px rgba(var(--shadow-rgb),.24);cursor:default}
.mod.run::before,.mod.run::after,.mod.run:hover::before,.mod.run:hover::after{opacity:0}
.mod-run{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;margin-top:auto;height:36px;padding:0 14px 0 8px;
  border-radius:11px;background:#fff;color:var(--c-top);font-size:13.5px;font-weight:500;box-shadow:0 2px 6px rgba(var(--shadow-rgb),.07);
  transition:background .35s ease,color .35s ease}
.mr-ico{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--tint);flex:none}
.mr-ico svg{width:14px;height:14px}
.mod:hover .mod-run{background:rgba(255,255,255,.18);color:#fff}
.mod:hover .mr-ico{background:rgba(255,255,255,.22)}

/* ─────────── le logo Obsidian, seul au centre du bento ───────────
   Le fichier officiel (obsidian.md), sans fond : les identifiants de ses
   dégradés sont préfixés ob- pour ne croiser aucun autre de la page.
   Autour, le halo et l'ombre portée qui lui donnent son volume. */
.core{display:grid;place-items:center;padding:0;background:none;border:0;min-height:340px}
.gem-wrap{position:relative;width:min(100%,330px);aspect-ratio:1;display:grid;place-items:center;
  animation:gem-float 7.5s ease-in-out infinite}
.gem-halo{position:absolute;inset:-26%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(140,88,255,.5),rgba(124,74,246,.16) 58%,transparent 76%);
  filter:blur(6px);animation:gem-halo 9s ease-in-out infinite}
.gem-floor{position:absolute;left:14%;right:14%;bottom:-4%;height:9%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(68,38,166,.42),transparent 72%);
  filter:blur(7px);animation:gem-floor 7.5s ease-in-out infinite}
/* le logo tourne avec le défilement : vers la droite en descendant,
   vers la gauche en remontant (angle posé par app.js) */
.gem{position:relative;z-index:1;width:100%;height:auto;
  filter:drop-shadow(0 26px 44px rgba(84,42,210,.42)) drop-shadow(0 4px 10px rgba(50,20,140,.24));
  transform:rotate(var(--rot,0deg))}
@keyframes gem-float{50%{transform:translateY(-12px)}}
@keyframes gem-halo{50%{opacity:.68;transform:scale(1.06)}}
@keyframes gem-floor{50%{opacity:.6;transform:scaleX(.88)}}
@media (prefers-reduced-motion:reduce){.gem-wrap,.gem-halo,.gem-floor{animation:none}.gem{transform:none}
  .road-line{transform:none}.rstep{opacity:1;transform:none}}

/* rayon interne 14 = rayon de la carte 22 moins les 8 de retrait */
.term{position:absolute;inset:8px;z-index:3;display:flex;flex-direction:column;overflow:hidden;
  border-radius:18px;background:#0e1524;color:#c9d3ef;
  opacity:0;transform:scale(.985);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.term[hidden]{display:none}
.mod.run .term{opacity:1;transform:none}
.term-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 10px 0 13px;background:#16203a;flex:none}
.term-bar i{width:9px;height:9px;border-radius:50%;background:#2e3c61;flex:none}
.term-bar .mono{margin-left:10px;font-size:11px;color:#6d7da8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term-x{margin-left:auto;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none;
  background:transparent;border:0;color:#6d7da8;cursor:pointer;
  transition:background .2s ease,color .2s ease,scale .15s var(--ease)}
.term-x svg{width:15px;height:15px}
.term-x:hover{background:rgba(255,255,255,.08);color:#c9d3ef}
.term-x:active{scale:.96}
.term-body{flex:1;overflow-y:auto;padding:14px 16px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.72;
  scrollbar-width:thin;scrollbar-color:#243154 transparent}
.term-body::-webkit-scrollbar{width:7px}
.term-body::-webkit-scrollbar-thumb{background:#243154;border-radius:4px}
.tl{display:flex;gap:9px;margin-bottom:2px;opacity:0;transform:translateY(4px);
  transition:opacity .26s var(--ease),transform .26s var(--ease)}
.tl.in{opacity:1;transform:none}
.tl i{font-style:normal;flex:none;width:11px;text-align:center}
.tl.cmd{color:#fff;margin-bottom:10px}
.tl.cmd i{color:#7fa0ff}
.tl.skill{color:#a9bcf0;margin-bottom:8px}
.tl.skill i{color:#7fa0ff}
.tl.skill b{color:#fff;font-weight:500}
.tl.ok{color:#93a4cd}
.tl.ok i{color:#5fd3a6}
.tl.out{color:#fff;margin-top:10px}
.tl.out i{color:#ffc46b}
.tl.say{color:#6d7da8;padding-left:20px;margin-bottom:8px}
.blink{display:inline-block;width:7px;height:14px;background:#7fa0ff;vertical-align:-2px;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .tl{opacity:1;transform:none;transition:none}
  .blink{animation:none}
  .term,.mod-face{transition:none}
}

/* ─────────── les onglets de l'espace, en bande qui défile ───────────
   Cinq vues, chacune dans une fenêtre carrée, dupliquées pour que le défilement
   boucle sans coupure. Le contenu est composé en taille réelle puis réduit. */
.shots{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.shots-track{display:flex;gap:22px;width:max-content;align-items:flex-start;
  animation:shots-drift 68s linear infinite}
@keyframes shots-drift{to{transform:translateX(calc(-50% - 11px))}}
.shot{flex:none;width:430px;margin:0}
.shot-win{border-radius:18px;overflow:hidden;background:#fff;border:1px solid #e6e9f4;
  box-shadow:0 22px 52px rgba(var(--shadow-rgb),.16)}
@media (prefers-reduced-motion:reduce){.shots-track{animation:none}}
@media (max-width:640px){.shot{width:320px}.shots-track{gap:16px}}

/* ─────────── preuves ─────────── */
/* le panneau des preuves : fond #F4F7FF, trois cartes du système de la page
   (blanche, 24 px, filet, bouton rond) avec le chiffre qui ressort et la
   capture Search Console dessous */
.preuves-panel{position:relative;padding:28px;border-radius:28px;background:#F4F7FF}
.proofs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.proof{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 20px 22px;border-radius:24px;color:var(--ink);background:#fff;border:1px solid var(--line)}
.pf-head{display:flex;align-items:center;justify-content:space-between;align-self:stretch;font-size:17px;font-weight:500;letter-spacing:-.01em}
.pf-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f1f2f6;color:var(--ink)}
.pf-btn svg{width:18px;height:18px}
.pf-n{display:block;margin-top:22px;font-size:72px;font-weight:600;letter-spacing:-.05em;line-height:.95;font-variant-numeric:tabular-nums;
  color:transparent;background-color:#BCC9F8;background-image:var(--grain);background-size:260px 260px;background-blend-mode:soft-light;-webkit-background-clip:text;background-clip:text}
.pf-n small{font-size:16px;font-weight:500;color:var(--ink-2);letter-spacing:0;margin-left:6px;background:none;-webkit-text-fill-color:var(--ink-2)}
.pf-l{display:block;margin-top:10px;font-size:14px;color:var(--ink-2)}
.proof img{display:block;width:100%;height:auto;margin-top:20px;aspect-ratio:1375/619;object-fit:cover;object-position:top;border-radius:14px;outline:1px solid var(--ol);outline-offset:-1px}
.proof figcaption{margin-top:14px;font-size:14px;line-height:1.55;color:var(--ink-2)}

/* ─────────── l'installation, en quatre cartes enchaînées ───────────
   Le fil est une flèche posée dans l'écart entre deux cartes. La carte et sa
   pastille s'allument quand le défilement atteint l'étape. */
.sec-etapes{padding-top:128px}
.road{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
/* rayon externe 24 = rayon de la pastille 13 + les 11 de retrait */
.rstep{position:relative;padding:26px 24px 28px;border-radius:24px;background:var(--wash);
  opacity:.5;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),background .45s var(--ease)}
.rstep.on{opacity:1;transform:none}
/* la flèche qui mène à l'étape suivante, dans l'écart */
.rstep::after{content:"";position:absolute;top:46px;left:calc(100% + 7px);width:12px;height:12px;
  border-top:2px solid #c9d3f2;border-right:2px solid #c9d3f2;transform:rotate(45deg);
  transition:border-color .45s var(--ease)}
.rstep:last-child::after{content:none}
.rstep.on::after{border-color:var(--c-top)}
.rs-n{display:grid;place-items:center;width:44px;height:44px;margin-bottom:20px;border-radius:13px;
  background:#fff;color:#a9b2cd;font-size:13px;letter-spacing:.04em;
  box-shadow:0 2px 6px rgba(var(--shadow-rgb),.08);
  transition:background .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease)}
.rstep.on .rs-n{position:relative;isolation:isolate;overflow:hidden;background:var(--grad);color:#fff;
  box-shadow:0 10px 24px rgba(var(--shadow-rgb),.28)}
.rstep.on .rs-n::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px}
.rstep h3{font-size:18px;letter-spacing:-.02em;margin-bottom:10px}
.rstep p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
@media (max-width:1080px){
  .road{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .rstep:nth-child(2n)::after{content:none}
}
@media (max-width:620px){
  .road{grid-template-columns:1fr;gap:14px}
  .rstep::after,.rstep:last-child::after{content:none}
  .rstep{padding:22px 22px 24px}
  .rs-n{margin-bottom:16px}
}

/* ─────────── prix ─────────── */
.prix-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:36px;align-items:start}
.prix-say p{font-size:17px;line-height:1.65;color:var(--ink-2);margin-bottom:18px}
.nope{margin-top:32px;padding:22px 24px;border-radius:18px;background:var(--wash);border:1px solid #e6eaf8}
.nope-t{display:block;color:var(--c-top);margin-bottom:12px;text-transform:uppercase;letter-spacing:.08em}
.nope ul{margin:0;padding-left:18px}
.nope li{font-size:15px;line-height:1.55;color:var(--ink-2);margin-bottom:8px}
.nope li:last-child{margin-bottom:0}
/* rayon externe 30 = rayon du contenu 22 + les 8 de retrait */
.card{position:sticky;top:96px;isolation:isolate;overflow:hidden;padding:8px;border-radius:30px;background:var(--grad);
  box-shadow:0 34px 80px rgba(var(--shadow-rgb),.3)}
.card-grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;mix-blend-mode:overlay;
  background-image:var(--grain);background-size:260px 260px}
.card-in{position:relative;z-index:1;padding:30px;border-radius:22px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);color:#fff}
.amount{display:flex;align-items:baseline;gap:8px}
.amount b{font-size:62px;line-height:1;letter-spacing:-.04em;font-weight:600}
.amount span{font-size:26px;font-weight:500}
.amount s{margin-left:6px;font-size:17px;color:rgba(255,255,255,.6)}
.amount-say{margin-top:12px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.82)}
.card-list{list-style:none;margin:22px 0 26px;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.24)}
.card-list li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5;margin-bottom:10px;color:rgba(255,255,255,.94)}
.card-list li::before{content:"";position:absolute;left:0;top:5px;width:12px;height:7px;
  border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg)}
/* le bouton d'achat : le fond animé du hero tourne dedans, une lumière le
   traverse en boucle, la pastille est blanche. Rayon externe 18 = pastille 12 + 6. */
.buy{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  gap:14px;width:100%;height:66px;padding:0 6px 0 22px;border-radius:18px;color:#fff;
  background:var(--grad);
  font-size:17px;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 18px 44px rgba(12,24,80,.4),inset 0 1px 0 rgba(255,255,255,.28);
  transition:box-shadow .3s ease,scale .15s var(--ease)}
.buy:active{scale:.98}
.buy:hover{box-shadow:0 26px 60px rgba(12,24,80,.5),inset 0 1px 0 rgba(255,255,255,.34)}
.buy-fond{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block;
  opacity:0;transition:opacity .7s ease}
.buy-fond.on{opacity:1}
.buy-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:var(--grain);background-size:260px 260px}
.buy-lab{position:relative;z-index:2}
/* la lumière qui traverse */
.buy::before{content:"";position:absolute;top:0;bottom:0;left:-55%;width:48%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4) 48%,transparent);
  transform:skewX(-14deg);animation:buy-shine 4.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes buy-shine{0%{left:-55%}55%,100%{left:125%}}
.buy:hover::before{animation-duration:1.5s}
/* rayon interne 12 = rayon externe 18 moins les 6 de retrait */
.buy-pil{position:relative;z-index:2;display:grid;place-items:center;width:54px;height:54px;flex:none;
  border-radius:12px;background:#fff;color:var(--c-top);
  box-shadow:0 8px 20px rgba(10,20,70,.3);
  transition:transform .3s var(--ease)}
.buy-pil svg{width:22px;height:22px;transition:transform .35s var(--ease)}
.buy:hover .buy-pil{transform:scale(1.04)}
.buy:hover .buy-pil svg{transform:translateY(3px)}
@media (prefers-reduced-motion:reduce){.buy::before{animation:none;opacity:0}}

/* ═══════════ les maquettes ═══════════
   Faux espace et faux WhatsApp, dessinés en HTML plutôt que capturés : le texte
   reste net à toutes les tailles. Chaque maquette est composée à sa taille
   naturelle (data-w × data-h) puis réduite par app.js, qui pose --s et la hauteur. */
.mock{position:relative;width:100%;overflow:hidden}
.mock .mk{width:var(--mw,1180px);height:var(--mh,760px);transform-origin:top left;transform:scale(var(--s,1))}

/* ─────────── faux espace ─────────── */
.mk.dash{display:grid;grid-template-columns:272px minmax(0,1fr);background:#fff;color:var(--ink);font-family:var(--sans)}
.ds{display:flex;flex-direction:column;padding:18px 14px;border-right:1px solid #ecedf3;background:#fcfcfe}
.ds-head{display:flex;align-items:center;gap:11px;padding:4px 8px 16px;border-bottom:1px solid #eef0f6}
.ds-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#eef2ff;flex:none}
.ds-mark svg{width:20px;height:20px}
.ds-mark .pa{fill:url(#orgA)}.ds-mark .pb{fill:url(#orgB)}
.ds-head b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.ds-head span{display:block;font-size:13px;color:#9aa0b4;margin-top:1px}
.ds-prog{margin:14px 4px;padding:13px 14px;border-radius:14px;background:#f2f5ff;border:1px solid #e0e8ff}
.dp-t{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--c-top);font-weight:500}
.dp-t i{width:7px;height:7px;border-radius:50%;background:var(--c-top);flex:none}
.ds-prog b{display:block;margin-top:7px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.dp-bars{display:flex;gap:4px;margin-top:12px}
.dp-bars i{flex:1;height:5px;border-radius:3px;background:#dbe3ff}
.dp-bars i.f{background:var(--c-top)}
.ds-nav{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.dn{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;font-size:14.5px;color:#55565f}
.dn svg{width:19px;height:19px;flex:none;color:#9aa0b4}
.dn em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11.5px;color:#9aa0b4}
.dn.on{background:#eef2ff;color:var(--c-top);font-weight:500}
.dn.on svg{color:var(--c-top)}
.dn.on em{color:var(--c-top)}
.ds-foot{display:flex;align-items:center;gap:11px;margin-top:auto;padding:14px 10px 4px;border-top:1px solid #eef0f6;font-size:14px;color:#55565f}
.dsf-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#25d366;color:#fff;flex:none}
.dsf-ico svg{width:16px;height:16px}

.dm{padding:32px 38px;min-width:0;overflow:hidden}
.dm-hi{margin:0 0 20px;font-size:31px;font-weight:600;letter-spacing:-.03em;color:var(--c-top)}
.dm-intro{font-size:14px;line-height:1.6;color:var(--ink-2);margin-bottom:18px}
.dm-intro code{font-size:13px}
.dm-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:24px;
  padding:26px 28px;border-radius:20px;background:var(--grad);color:#fff}
.dm-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;mix-blend-mode:overlay;
  background-image:var(--grain);background-size:260px 260px}
.dh-l>span{font-size:14px;color:rgba(255,255,255,.82)}
.dh-big{display:flex;align-items:baseline;gap:11px;margin-top:6px;font-size:15px;color:rgba(255,255,255,.9)}
.dh-big b{font-size:46px;line-height:1;font-weight:600;letter-spacing:-.035em}
.dh-bars{display:flex;gap:6px;margin-top:20px}
.dh-bars i{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.3)}
.dh-bars i.f{background:#fff}
.dh-r{position:relative;z-index:1;padding:16px;border-radius:14px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24)}
.dh-r span{font-size:13px;color:rgba(255,255,255,.8)}
.dh-r b{display:block;margin-top:4px;font-size:17px;font-weight:600;letter-spacing:-.015em}
.dh-btn{display:grid;place-items:center;height:38px;margin-top:14px;border-radius:10px;font-size:14px;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.2)}
.dm-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:22px;padding:18px 0;border-bottom:1px solid #eef0f6}
.dm-stats>div{padding:0 20px;border-left:1px solid #eef0f6}
.dm-stats>div:first-child{padding-left:0;border-left:0}
.dm-stats b{font-size:30px;font-weight:600;letter-spacing:-.03em}
.dm-stats s{text-decoration:none;font-size:14px;color:#9aa0b4;margin-left:3px}
.dm-stats span{display:block;font-size:14px;margin-top:4px}
.dm-stats em{display:block;font-style:normal;font-size:13px;color:#9aa0b4;margin-top:2px}
.dm-card{margin-top:20px;padding:20px 22px;border-radius:14px;border:1px solid #eceef5}
.dm-card b{display:block;font-size:16px;letter-spacing:-.015em}
.dm-card p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.dm-row{display:flex;align-items:center;gap:13px;margin-top:10px;padding:14px 18px;border-radius:12px;border:1px solid #eceef5;font-size:14.5px}
.dr-ok{color:var(--c-top);font-weight:600}
.dm-row s{color:#9aa0b4}
.dm-row em{margin-left:auto;font-style:normal;font-size:13px;color:#9aa0b4}
.dr-n{display:grid;place-items:center;width:30px;height:24px;border-radius:7px;background:#eef2ff;color:var(--c-top);font-family:var(--mono);font-size:11.5px}
.dm-mods{display:flex;flex-direction:column;gap:8px}
.dmm{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid #eceef5;border-radius:12px}
.dmm-n{display:grid;place-items:center;width:34px;height:25px;border-radius:7px;background:#eef2ff;color:var(--c-top);font-family:var(--mono);font-size:11.5px;flex:none}
.dmm b{display:block;font-size:14.5px;font-weight:500}
.dmm s{display:block;text-decoration:none;font-family:var(--mono);font-size:11.5px;color:#9aa0b4;margin-top:2px}
.dmm em{margin-left:auto;font-style:normal;font-size:12px;color:#9aa0b4}
.dmm.done{background:#f7f9ff;border-color:#dfe7ff}
.dmm.done .dmm-n{background:var(--c-top);color:#fff}
.dmm.done em{color:var(--c-top)}
.dm-dl{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;
  padding:18px 20px;border-radius:14px;background:#f5f8ff;border:1px solid #e2e9ff}
.dm-dl b{display:block;font-size:15px;letter-spacing:-.015em}
.dm-dl s{display:block;text-decoration:none;font-family:var(--mono);font-size:12px;color:#9aa0b4;margin-top:3px}
.dm-btn{display:grid;place-items:center;height:38px;padding:0 18px;border-radius:11px;flex:none;
  background:var(--grad);color:#fff;font-size:14px;font-weight:500;box-shadow:0 8px 20px rgba(var(--shadow-rgb),.24)}
.dm-btn.wa{background:#25d366;box-shadow:0 8px 20px rgba(37,211,102,.28)}
.dm-code{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;padding:16px 18px;border-radius:14px;
  background:#0e1524;color:#a9bcf0;font-family:var(--mono);font-size:12.5px;line-height:1.7}
.dm-code span::before{content:"$ ";color:#5f76b8}
.dr-t b{display:block;font-size:14.5px;font-weight:500}
.dr-t s{display:block;text-decoration:none;font-size:13px;color:#9aa0b4;margin-top:2px}

/* ─────────── faux WhatsApp ─────────── */
.mk.wa{display:grid;grid-template-columns:392px minmax(0,1fr);background:#0b141a;color:#e9edef;font-family:var(--sans)}
.wa-side{display:flex;flex-direction:column;background:#111b21;border-right:1px solid #222d34;min-width:0}
.wa-sh{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 14px}
.wa-sh b{font-size:22px;font-weight:600;letter-spacing:-.02em}
.wa-sh svg{width:20px;height:20px;color:#8696a0}
.wa-q{display:flex;align-items:center;gap:11px;height:38px;margin:0 16px 8px;padding:0 14px;border-radius:9px;background:#202c33;color:#8696a0;font-size:14px}
.wa-q svg{width:16px;height:16px;flex:none}
.wa-list{list-style:none;margin:0;padding:0;min-width:0}
.wa-list li{display:flex;align-items:center;gap:13px;padding:12px 16px;border-bottom:1px solid #1d282f;min-width:0}
.wa-list li.on{background:#2a3942}
.wa-list li>div{min-width:0}
.av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;font-weight:600;font-size:16px;flex:none}
.a1{background:#4a6cf0}.a2{background:#c05f9a}.a3{background:#3f8f7a}.a4{background:#b4783a}.a5{background:#6a63c4}.a6{background:#5c7d93}
.wa-list b{display:block;font-size:15px;font-weight:500}
.wa-list s{display:block;text-decoration:none;font-size:13px;color:#8696a0;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-list em{margin-left:auto;align-self:flex-start;font-style:normal;font-size:12px;color:#8696a0;flex:none;padding-top:2px}
.wa-list li.on em{color:#25d366}

.wa-chat{display:flex;flex-direction:column;min-width:0}
.wa-ch{display:flex;align-items:center;gap:12px;padding:9px 20px;background:#202c33;border-bottom:1px solid #222d34}
.wa-ch .av{width:38px;height:38px;font-size:14px}
.wa-ch b{font-size:16px;font-weight:500}
.wa-ch s{display:block;text-decoration:none;font-size:12px;color:#8696a0;margin-top:1px}
.wa-body{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 38px;overflow:hidden}
.wa-doodle{position:absolute;inset:0;opacity:.05;pointer-events:none;background-size:300px 300px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' fill='none' stroke='%23ffffff' stroke-width='2'><circle cx='40' cy='44' r='13'/><rect x='110' y='28' width='26' height='26' rx='6'/><path d='M200 30h30v22h-30z'/><path d='M262 36l12 12-12 12'/><circle cx='86' cy='128' r='9'/><path d='M150 118l14 20h-28z'/><path d='M216 112h34v30h-34z'/><path d='M28 196c14-18 32-18 46 0'/><circle cx='138' cy='206' r='14'/><path d='M198 194l16 16-16 16-16-16z'/><path d='M258 198h26v26h-26z'/><path d='M48 272h32v18H48z'/><circle cx='150' cy='276' r='11'/><path d='M214 266l10 20h-20z'/></svg>")}
.wa-day{position:relative;display:block;width:fit-content;margin:10px auto 14px;padding:5px 13px;border-radius:8px;background:#182229;color:#8696a0;font-size:12px}
.wb{position:relative;max-width:66%;padding:8px 13px 20px;border-radius:9px;font-size:14.5px;line-height:1.45;margin-bottom:8px;
  box-shadow:0 1px 1px rgba(0,0,0,.28)}
.wb i{position:absolute;right:11px;bottom:5px;font-style:normal;font-size:11px;color:rgba(233,237,239,.5)}
.wb.you{background:#202c33;border-top-left-radius:2px}
.wb.me{background:#005c4b;margin-left:auto;border-top-right-radius:2px}
.wb.me i{color:rgba(233,237,239,.6)}
.wa-in{display:flex;align-items:center;gap:14px;padding:11px 18px;background:#202c33}
.wi-plus{font-size:26px;line-height:1;color:#8696a0}
.wi-box{flex:1;display:flex;align-items:center;height:42px;padding:0 16px;border-radius:9px;background:#2a3942;color:#8696a0;font-size:14px}
.wi-mic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#00a884;color:#fff;flex:none}
.wi-mic svg{width:20px;height:20px}

/* ─────────── tailles intermédiaires ─────────── */
@media (max-width:1180px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .core{grid-column:1/3;grid-row:1;min-height:300px}
  .m-a,.m-b,.m-c,.m-d,.m-e,.m-f{grid-column:auto;grid-row:auto}
}
@media (max-width:1080px){
  .prix-grid{grid-template-columns:1fr}
  .card{position:static}
}
@media (max-width:820px){
  .hero{padding-top:112px}
  .hero-band{margin-top:46px;padding-bottom:44px}
  .bterm{width:340px;height:262px}
  .bterm-body{font-size:10.5px;padding:11px 13px}
  .proofs{grid-template-columns:1fr}
  .preuves-panel{padding:16px}
  .pf-n{font-size:60px}
  .sec{padding:32px 0 88px}
  #modules{padding-top:96px}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .core{grid-column:1;padding:30px 24px}
  .core{min-height:250px}
  .gem-wrap{width:min(100%,240px)}
  .hero h1{font-size:34px}
  .btn,.btn-glass{width:100%;justify-content:space-between}
  .card-in{padding:24px}
}

/* ═══════════ la section messages : le fil se remplit dans un écran de verre ═══════════ */
.sec-wa{padding-top:60px}
.wa-grid{display:flex;flex-direction:column;align-items:center}
.wa-say{width:100%}
.wa-say .sec-head{max-width:760px;margin:0 auto 52px;text-align:center}
.wa-say .sec-head h2{margin:0 auto}

/* fond blanc, comme le reste du site : le verre se lit à son ombre et à
   son liseré, pas à un lit de couleur derrière lui */
/* Les trois conversations dans le système de carte de la page (Tim, 21/09) : un
   panneau #F4F7FF, trois cartes blanches 24 px, l'avatar dans un anneau, la
   pastille « en ligne », le bouton rond ; les bulles du client en gris clair,
   les miennes en outremer grainé ; la saisie en pilule et l'envoi rond. */
.wa-phones{width:100%;max-width:1100px;margin:0 auto;padding:28px;border-radius:28px;background:#F4F7FF;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.ph-one{margin:0;display:flex;flex-direction:column;align-items:center}
.ph-one figcaption{margin-top:16px;font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink);text-align:center}
.phone{width:100%}
.ph-frame{position:relative;border-radius:24px;padding:0;background:none}
.ph-screen{position:relative;display:flex;flex-direction:column;height:500px;overflow:hidden;
  border-radius:24px;color:var(--ink);background:#fff;border:1px solid var(--line)}
.ph-head{display:flex;align-items:center;gap:12px;padding:16px 16px 14px;flex:none;border-bottom:1px solid var(--line)}
.ph-av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c-top)}
.ph-who{min-width:0;flex:1}
.ph-who b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.ph-who s{display:flex;align-items:center;gap:6px;text-decoration:none;font-size:12px;color:var(--ink-2);margin-top:2px}
.ph-who s i{width:7px;height:7px;border-radius:50%;background:#22b573;flex:none;animation:pulse 1.1s ease-in-out infinite}
.ph-head::after{content:"";width:40px;height:40px;border-radius:50%;flex:none;background:#f1f2f6 center/16px no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2b30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7h8v8'/></svg>")}

.ph-body{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:16px;overflow-y:auto;scrollbar-width:none}
.ph-body::-webkit-scrollbar{display:none}
.ph-day{flex:none;align-self:center;padding:4px 12px;margin-bottom:2px;border-radius:20px;background:#f1f2f6;color:var(--ink-2);font-size:11px;font-weight:500}

/* les conversations sont déjà écrites à l'arrivée : aucun écran vide (Tim, 21/09) */
.pm{flex:none;position:relative;max-width:88%;padding:10px 48px 10px 13px;border-radius:16px;font-size:13.5px;line-height:1.46;max-height:260px;opacity:1;margin-bottom:0;overflow:hidden}
.pm i{bottom:8px}
.pm b{font-family:var(--mono);font-size:.9em;font-weight:500;background:rgba(43,43,48,.08);border-radius:4px;padding:0 4px}
.pm i{position:absolute;right:12px;bottom:6px;font-style:normal;font-size:10px;color:var(--ink-2)}
.pm.you{background:#f4f5f7;align-self:flex-start;border-bottom-left-radius:6px;color:var(--ink)}
.pm.me{background:var(--grad);color:#fff;align-self:flex-end;border-bottom-right-radius:6px;isolation:isolate}
.pm.me::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px}
.pm.me>*{position:relative;z-index:1}
.pm.me b{background:rgba(255,255,255,.2)}
.pm.me i{color:rgba(255,255,255,.75)}
.pm.typing{padding:11px 13px;min-width:46px}
.dots{display:flex;gap:3px}
.dots i{position:static;width:5px;height:5px;border-radius:50%;background:var(--ink-2);animation:dot 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.18s}
.dots i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.ph-in{display:flex;align-items:center;gap:10px;padding:12px 14px;flex:none;border-top:1px solid var(--line)}
.pi-box{flex:1;height:40px;display:flex;align-items:center;padding:0 16px;border-radius:999px;background:#f1f2f6;color:var(--ink-2);font-size:13px}
.pi-send{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;color:#fff;background:var(--grad)}
.pi-send svg{width:16px;height:16px}

@media (prefers-reduced-motion:reduce){
  .pm{max-height:260px;opacity:1;margin-bottom:0;transform:none;transition:none}
  .pm.typing{display:none}
  .dots i,.ph-who s i{animation:none}
}
@media (max-width:1080px){
  .wa-say .sec-head{margin-bottom:26px}
}
/* ils restent sur une ligne tant qu'il y a la place, ils rétrécissent avant de s'empiler */
@media (max-width:1020px){.wa-phones{gap:18px}}
@media (max-width:760px){.wa-phones{gap:14px}.ph-one figcaption{font-size:13px;margin-top:14px}}
@media (max-width:560px){
  .wa-phones{grid-template-columns:1fr;gap:16px;max-width:360px;margin:0 auto;padding:16px}
  .ph-screen{height:440px}
  .ph-one figcaption{font-size:14px}
}

/* ═══════════ la data qui converge vers Claude et ton vault ═══════════
   Toute la scène tient dans un panneau clair : les six sources ne flottent
   plus dans le blanc, elles sont posées autour du duo central et reliées par
   des courbes où un trait file vers le centre. */
.sec-cx{padding-top:48px}
.cx-defs{position:absolute;width:0;height:0;overflow:hidden}
.cx-head{max-width:820px;margin:0 auto 44px;text-align:center}
.cx-head h2{margin:0 auto}
/* rayon externe 34 = rayon des pastilles 18 + les 16 de retrait */
.cx-panneau{position:relative;max-width:1080px;margin:0 auto;padding:16px 16px 0;border-radius:34px;
  background:linear-gradient(180deg,#f7f9ff 0%,#eef2fe 100%);border:1px solid #e2e8fb;
  box-shadow:0 26px 60px rgba(var(--shadow-rgb),.1)}
.cx{position:relative;width:100%;aspect-ratio:980/430}
.cx-net{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cx-line{fill:none;stroke:#dde4f8;stroke-width:2;stroke-linecap:round}
.cx-flux{fill:none;stroke:var(--c-top);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:30 460;stroke-dashoffset:490;
  animation:cx-flux 3.2s linear infinite;animation-delay:var(--d,0s)}
@keyframes cx-flux{to{stroke-dashoffset:0}}

/* une source : son nom, et rien d'autre. Les trois noms d'une colonne sont
   alignés sur le même bord intérieur, d'où partent les courbes. */
.cx-sat{position:absolute}
.cx-g{transform:translate(-100%,-50%);text-align:right}
.cx-d{transform:translate(0,-50%);text-align:left}
.cx-nom{display:inline-block;white-space:nowrap;font-size:15px;font-weight:500;letter-spacing:.01em;
  background:linear-gradient(100deg,var(--c-top) 0%,var(--c-top) 42%,#6a8af5 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.cx-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:14px}
.cx-glow{position:absolute;inset:-60% -18%;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.05) 56%,transparent 74%);
  filter:blur(6px);animation:cx-breathe 9s ease-in-out infinite}
@keyframes cx-breathe{50%{opacity:.6;transform:scale(1.07)}}
.cx-pied{margin:0;padding:22px 34px 26px;border-top:1px solid #e2e8fb;
  font-size:15px;line-height:1.6;color:var(--ink-2);text-align:center}

/* le point d'arrivée : un seul réceptacle en dégradé outremer grainé, les deux
   symboles posés dedans en blanc plein, le nom en mono juste dessous */
.cx-hub{position:relative;display:flex;align-items:center;gap:22px;padding:24px 28px;border-radius:30px;
  background:var(--grad);border:1px solid rgba(255,255,255,.4);isolation:isolate;
  box-shadow:0 20px 44px rgba(var(--shadow-rgb),.26),0 2px 6px rgba(var(--shadow-rgb),.12),
             inset 0 1px 0 rgba(255,255,255,.4);
  animation:cx-bob2 7s ease-in-out infinite}
.cx-hub::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:var(--grain);background-size:260px 260px;opacity:.5;mix-blend-mode:overlay}
.cx-hub-ico{position:relative;z-index:1;width:56px;height:56px;flex:none;color:#fff;fill:#fff}
/* le cristal porte son volume plus bas que l'étoile : 2px de remontée optique */
.cx-hub-obs{width:46px;height:46px;margin-top:-2px}
.cx-hub-sep{position:relative;z-index:1;width:1px;height:42px;background:rgba(255,255,255,.4)}
.cx-hub-nom{color:var(--ink-2);white-space:nowrap}
@keyframes cx-bob2{50%{transform:translateY(-10px)}}

@media (prefers-reduced-motion:reduce){
  .cx-flux,.cx-glow,.cx-hub{animation:none}
  .cx-flux{stroke-dashoffset:0;stroke-dasharray:none;opacity:.5}
}
@media (max-width:900px){
  .cx{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:22px;padding:22px 18px}
  .cx-net{display:none}
  .cx-sat{position:static;transform:none;text-align:center}
  .cx-nom{font-size:14px}
  .cx-core{position:static;transform:none;grid-column:1/3;order:-1;justify-content:center;
    gap:18px;margin-bottom:6px}
  .cx-pied{padding:20px 22px 24px;font-size:14px}
}
@media (max-width:900px){
  .cx-hub{gap:16px;padding:18px 20px;border-radius:24px}
  .cx-hub-ico{width:44px;height:44px}
  .cx-hub-obs{width:42px;height:42px}
}

/* le grand « Organikk » sous le pied de page, le même sur toutes les pages (Tim, 22/09) */
.wordmark{max-width:1200px;margin:8px auto 40px;padding:0 24px}
.wordmark svg{display:block;width:100%;height:auto;aspect-ratio:1200/230;overflow:visible;-webkit-mask-image:linear-gradient(180deg,#000 18%,rgba(0,0,0,.55) 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 18%,rgba(0,0,0,.55) 60%,transparent 100%)}
.wordmark text{font-family:var(--sans,var(--font-sans,system-ui));font-weight:600;font-size:260px;letter-spacing:-.04em}
@media (max-width:900px){.wordmark{padding:0 12px;margin-bottom:24px}}