/* FLERP — vitrine flerp.me · v4 « Les 5 applications » (refonte 2026-07-24)
   Identité conservée : dégradé de marque violet→teal→vert, Space Grotesk + Inter, largeur 1400 px,
   fond « brume » + panneaux blancs flottants, canvas de particules masqué aux gouttières,
   fil conducteur vertical. Nouveautés : accents Fact (violet) et Cali (doré), aperçus d'interface
   dessinés en CSS pur (section « .shot »). Blanc uniquement (décision Florian 04-07). */

:root {
  --violet: #7B4FE2;
  --teal: #1E9FC9;
  --green: #10B981;
  --grad: linear-gradient(120deg, #7B4FE2 0%, #1E9FC9 52%, #10B981 100%);
  --btn-grad: linear-gradient(135deg, #5B2ECC, #14789B, #0B8A61); /* assombri : AA avec texte blanc */
  --btn-text: #fff;
  --bg: #F4F6FC;            /* brume : blanc adouci qui fait « lever » les panneaux */
  --panel: #FFFFFF;
  --panel-line: #EEF1F8;
  --band-soft: #F6F7FB;     /* palier tonal (FAQ) */
  --band-tint: #F4F1FD;     /* bande teintée marque (portail) */
  --ink: #0F172A;
  --muted: #64748B;
  --line: #E6E9F2;
  --surface: #FFFFFF;
  --nav-bg: rgba(255, 255, 255, .72);
  --nav-bg-scrolled: rgba(255, 255, 255, .9);
  --shadow-card: 0 12px 40px rgba(15, 23, 42, .08);
  --shadow-card-hover: 0 24px 60px rgba(15, 23, 42, .14);
  --shadow-panel: 0 2px 8px rgba(15, 23, 42, .04), 0 24px 60px -34px rgba(15, 23, 42, .22);
  --spot: rgba(123, 79, 226, .07);
  --dot: rgba(15, 23, 42, .05);
  --wm-opacity: .07;
  --net-opacity: .5;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --teal-aa: #0C6F92;      /* teal assombri pour le TEXTE (AA >=4.5:1 sur blanc & bandes teintées) */
  /* accents par app + variante texte AA */
  --agro: #4CAF50;  --agro-aa: #2F7D34;
  --com: #007AFF;   --com-aa: #0A6CD6;
  --reco: #FD8000;  --reco-aa: #B35400;
  --fact: #7B4FE2;  --fact-aa: #5B35BE;
  --cali: #FFC400;  --cali-aa: #7A5C00;
  --gest: #8F3A45;  --gest-aa: #6E2530;
  --chat: #0E7490;  --chat-aa: #0C617A;
  /* palette des aperçus d'interface */
  --shot-bg: #F5F6FA;
  --shot-panel: #FFFFFF;
  --shot-ink: #16202E;
  --shot-muted: #6B7688;
  --shot-line: #E6E9F0;
  --shot-line2: #EEF1F6;
  --shot-hover: #FAFBFD;
  --shot-good: #1E9E5A;   --shot-good-bg: #E4F6EC;
  --shot-warn: #B45309;   --shot-warn-bg: #FFF3E6;
  --shot-bad: #B42318;    --shot-bad-bg: #FDECEC;
  --shot-frame: rgba(15, 23, 42, .10);
}

/* ---------- Thème sombre : VOLONTAIREMENT ABSENT ----------
   Décision Florian du 04-07-2026, reconduite le 24-07 : la vitrine est en
   BLANC UNIQUEMENT. Un jeu de tokens sombres complet (prefers-color-scheme)
   a été écrit puis retiré le 24-07 pour respecter cette décision — il est
   dans l'historique git du même jour si elle change un jour. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: "Space Grotesk", system-ui, sans-serif; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
h2 { letter-spacing: -.028em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: rgba(123, 79, 226, .35); }
.svg-sprite { position: absolute; }

/* icônes au trait partagées */
.ic { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Barre de progression de lecture (site.js pose la largeur) ---- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; width: 0; background: var(--grad); }

/* ---- Fond vivant : particules MASQUÉES aux gouttières (jamais derrière le texte) ---- */
#net-canvas {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: var(--net-opacity);
  -webkit-mask-image: radial-gradient(1150px 680px at 50% 32%, transparent 0 42%, #000 80%);
  mask-image: radial-gradient(1150px 680px at 50% 32%, transparent 0 42%, #000 80%);
}
header, main, footer { position: relative; z-index: 1; }

.grad {
  background: var(--grad); background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.center { text-align: center; }
.eyebrow { font-family: "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: .2em; font-size: .74rem; font-weight: 600; color: var(--teal-aa); }
.eyebrow.center { display: block; }

/* ---- Bandes & panneaux flottants ---- */
.band { position: relative; width: 100%; padding-block: clamp(16px, 2.6vw, 30px); }
.band::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.band > * { position: relative; z-index: 1; }
.band-hero::before { background: radial-gradient(900px 520px at 92% -6%, rgba(123, 79, 226, .07), transparent 60%); }
#suite::before { background: radial-gradient(760px 520px at 4% 108%, rgba(30, 159, 201, .06), transparent 60%); }
#parcours::before { background: radial-gradient(700px 500px at 96% 8%, rgba(16, 185, 129, .055), transparent 60%); }
#metiers::before { background: radial-gradient(760px 520px at 0% 0%, rgba(123, 79, 226, .05), transparent 60%); }
#tarifs::before { background: radial-gradient(820px 540px at 100% 100%, rgba(30, 159, 201, .05), transparent 60%); }
#app-agro::before { background: radial-gradient(700px 460px at 88% 6%, rgba(76, 175, 80, .07), transparent 62%); }
#app-com::before  { background: radial-gradient(700px 460px at 12% 6%, rgba(0, 122, 255, .07), transparent 62%); }
#app-reco::before { background: radial-gradient(700px 460px at 88% 6%, rgba(253, 128, 0, .07), transparent 62%); }
#app-fact::before { background: radial-gradient(700px 460px at 12% 6%, rgba(123, 79, 226, .08), transparent 62%); }
#app-cali::before { background: radial-gradient(700px 460px at 88% 6%, rgba(255, 196, 0, .09), transparent 62%); }

/* ---- Filigrane molécule VECTORIEL (net, jamais flouté) ----
   ⚠️ 26-07 — IL NE COUVRE PLUS TOUT LE PANNEAU DU HERO. Il était centré sur le panneau, large de
   920 px : ses grands cercles ouverts traversaient le H1 et le paragraphe, ce qui donnait au hero
   son air « pas fini » (deuxième moitié du reproche de Florian). Il est désormais confiné à la
   MOITIÉ DROITE, derrière le graphe, où il fait ce pour quoi il est là — répéter le motif de la
   marque — sans jamais croiser une ligne de texte.
   Le filigrane lui-même (vecteur net, pas de flou raster) est une validation de Florian : on le
   déplace, on ne le supprime pas. */
.band-hero .panel::before {
  content: ""; position: absolute; z-index: 0;
  top: 50%; right: -14%; transform: translateY(-50%);
  width: min(560px, 46%); aspect-ratio: 720 / 630;
  background: url(/molecule-wm.svg?v=2) no-repeat center / contain;
  /* ⚠️ deux fois plus discret que partout ailleurs : le hero porte DÉJÀ la molécule, en vrai,
     au centre du graphe. À .07 le filigrane répétait le même motif juste derrière — deux
     molécules superposées, ce qui se lit comme du désordre et non comme une texture. */
  opacity: calc(var(--wm-opacity) / 2); pointer-events: none;
}
/* Sous 900 px le hero passe en une colonne : le filigrane repasserait SOUS le texte. */
@media (max-width: 900px) { .band-hero .panel::before { display: none; } }

.panel {
  width: min(1400px, 100% - clamp(28px, 6vw, 80px));
  margin-inline: auto;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 28px;
  box-shadow: var(--shadow-panel);
  padding: clamp(40px, 6vw, 84px) clamp(22px, 5vw, 72px);
  position: relative;
  overflow: hidden;
}
.band-soft { background: var(--band-soft); padding-block: clamp(52px, 7vw, 100px); }
.band-tint { background: var(--band-tint); padding-block: clamp(52px, 7vw, 100px); }
.inner { width: min(1400px, 100% - clamp(28px, 6vw, 80px)); margin-inline: auto; }

/* ---- Boutons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 22px; border-radius: 13px;
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .98rem;
  cursor: pointer; transition: transform .2s var(--ease-out), box-shadow .25s, opacity .2s, border-color .2s, color .2s, background .2s;
}
.btn-primary { background: var(--btn-grad); color: var(--btn-text); box-shadow: 0 8px 22px rgba(93, 63, 190, .28); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(93, 63, 190, .4); }
.btn-ghost { border: 1.5px solid var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-2px); }
.btn-ghost-dark { border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; }
.btn-ghost-dark:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.btn-login { height: 42px; padding: 0 18px; background: var(--btn-grad); color: var(--btn-text); }
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(93, 63, 190, .35); }

/* ---- Nav : pilule flottante ---- */
.nav {
  position: sticky; top: 12px; z-index: 40;
  display: flex; align-items: center; gap: 22px;
  max-width: 1400px; margin: 12px auto 0; padding: 10px 20px;
  border-radius: 18px;
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(15, 23, 42, .07);
  transition: padding .3s ease, box-shadow .3s ease, background .3s ease;
}
@media (max-width: 1440px) { .nav { margin-left: 14px; margin-right: 14px; } }
.nav.scrolled { padding-top: 6px; padding-bottom: 6px; background: var(--nav-bg-scrolled); box-shadow: 0 14px 44px rgba(15, 23, 42, .12); }

/* ---- Logo FLERP animé : molécule vectorielle + la vraie écriture (flerp-word.png) ---- */
.brand { display: inline-flex; align-items: center; border-radius: 12px; padding: 2px 6px; }
.brand-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 0; will-change: filter; transition: filter .28s ease, transform .28s ease; }
.brand-mol { height: 30px; width: auto; display: block; overflow: visible; transition: height .3s ease; }
.brand-word { height: 14px; width: auto; display: block; transition: height .3s ease; }
.nav.scrolled .brand-mol { height: 25px; }
.nav.scrolled .brand-word { height: 12px; }
.brand:hover .brand-logo, .brand:focus-visible .brand-logo { animation: logo-on .5s var(--ease-out) forwards; }
.brand-mol .mol, .footer-mol .mol { transform-box: view-box; transform-origin: 380px 332px; }
.brand-mol .electron.e-c, .footer-mol .electron.e-c { transform-box: view-box; transform-origin: 270px 200px; }
.brand-mol .electron.e-f2, .footer-mol .electron.e-f2 { transform-box: view-box; transform-origin: 624px 344px; }
@media (prefers-reduced-motion: no-preference) {
  .brand-mol .mol, .footer-mol .mol { animation: flerp-breathe 11s ease-in-out infinite; }
  .brand-mol .electron.e-c, .footer-mol .electron.e-c { animation: flerp-orbit 7s linear infinite; }
  .brand-mol .electron.e-f2, .footer-mol .electron.e-f2 { animation: flerp-orbit 10s linear infinite reverse; }
}
@keyframes flerp-breathe { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes flerp-orbit { to { transform: rotate(360deg); } }
/* en thème sombre le mot « FLERP » est un PNG noir : on l'inverse sans jamais le redessiner */

.nav-links { margin-left: auto; display: flex; gap: 20px; }
.nav-links a { color: var(--muted); font-weight: 500; font-size: .93rem; transition: color .2s; position: relative; }
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; border-radius: 1px;
  background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .22s ease-out;
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 14px; }

/* ---- Sélecteur de langue ---- */
.lang-switch { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 2px; }
.lang-switch button {
  border: none; background: none; cursor: pointer; font-family: "Space Grotesk", sans-serif;
  font-weight: 600; font-size: .82rem; color: var(--muted); padding: 6px 10px; border-radius: 8px; transition: color .2s;
}
.lang-switch button.active { background: var(--btn-grad); color: var(--btn-text); }

/* ---- Hero ---- */
.hero { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(36px, 5vw, 80px); }
.hero h1 { font-size: clamp(2.3rem, 4.8vw, 4.2rem); font-weight: 700; margin: 14px 0 18px; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 48ch; }
.hero-cta { display: flex; gap: 14px; margin: 30px 0 0; flex-wrap: wrap; }
.hero-cta.center { justify-content: center; }
.hero-note { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 500; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.hero-note .pill:nth-child(1)::before { background: var(--violet); }
.hero-note .pill:nth-child(2)::before { background: var(--teal); }
.hero-note .pill:nth-child(3)::before { background: var(--green); }
.hero-scroll { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; color: var(--muted); font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .86rem; }
.hero-scroll:hover { color: var(--violet); }
.hero-scroll .ic { width: 18px; height: 18px; }

/* Séquence d'entrée du héros */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(24px); animation: rise-in .6s var(--ease-out) forwards; }
  .hero-text .rise:nth-child(1) { animation-delay: .05s; }
  .hero-text .rise:nth-child(2) { animation-delay: .14s; }
  .hero-text .rise:nth-child(3) { animation-delay: .23s; }
  .hero-text .rise:nth-child(4) { animation-delay: .32s; }
  .hero-text .rise:nth-child(5) { animation-delay: .41s; }
  .hero-text .rise:nth-child(6) { animation-delay: .5s; }
  .grad { animation: grad-shift 7s ease-in-out infinite alternate; }
  .hero-scroll .ic { animation: bob 1.6s ease-in-out infinite; }
}
@keyframes rise-in { to { opacity: 1; transform: none; } }
@keyframes grad-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ================== GRAPHE HERO : la molécule FLERP et ses 5 applications ==================
   Centre = le logo réel (molécule) · satellites = les icônes réelles des apps.
   Un « bras » = <a class="arm"> qui contient LA LIAISON, L'ICÔNE ET LE LIBELLÉ : ils partagent
   la même transformation, une app ne peut donc pas se détacher de sa liaison.
   Règles de mouvement : transform/opacity uniquement (sauf le tracé d'entrée des liaisons, qui
   joue une seule fois), pas de setInterval, tout est débrayé en prefers-reduced-motion. */
.hero-graph { position: relative; will-change: transform; }
.hero-graph .graph { width: 100%; height: auto; overflow: visible; display: block; }
.hero-graph .core { overflow: visible; }

/* accent + halo par app (jamais de color-mix : on reste sur du CSS sans surprise) */
.hero-graph .a-agro { --acc: #4CAF50; --acc-t: #2F7D34; --glow: rgba(76, 175, 80, .55); }
.hero-graph .a-com  { --acc: #007AFF; --acc-t: #0A6CD6; --glow: rgba(0, 122, 255, .5); }
.hero-graph .a-reco { --acc: #FD8000; --acc-t: #B35400; --glow: rgba(253, 128, 0, .5); }
.hero-graph .a-fact { --acc: #7B4FE2; --acc-t: #5B35BE; --glow: rgba(123, 79, 226, .5); }
.hero-graph .a-cali { --acc: #E8AC00; --acc-t: #7A5C00; --glow: rgba(232, 172, 0, .55); }
.hero-graph .a-gest { --acc: #8F3A45; --acc-t: #7C2F3A; --glow: rgba(143, 58, 69, .5); }
.hero-graph .a-chat { --acc: #0E7490; --acc-t: #0C617A; --glow: rgba(14, 116, 144, .45); }
/* CHAT EN LIGNE le 09-08 (CH1) : le nœud rejoint les six autres à pleine
   opacité — le « ton en retrait » de la préparation n'a plus lieu d'être. */

/* ---- LE SOCLE (26-07) ----------------------------------------------------------------
   Le reproche « c'est trop simpliste » venait de là : les liaisons visaient le centre
   GÉOMÉTRIQUE du pentagone, or la molécule n'a aucune matière à cet endroit. Les cinq traits
   s'éteignaient donc dans le vide entre deux atomes — rien ne s'accrochait à rien.
   Le socle donne au logo une assise physique et aux liaisons un BORD sur lequel se poser. */
.hero-graph .orbit { fill: none; stroke: var(--line); stroke-width: 1.2;
  stroke-dasharray: 2 9; stroke-linecap: round; opacity: .55; }
.hero-graph .socle-glow { fill: url(#socle-glow); }
.hero-graph .socle-disc { fill: #fff; filter: drop-shadow(0 10px 26px rgba(15, 23, 42, .10)); }
.hero-graph .socle-ring { fill: none; stroke: url(#socle-ring); stroke-width: 1.6; opacity: .42; }

.hero-graph .arm { cursor: pointer; text-decoration: none; transition: opacity .4s var(--ease-out); }
.hero-graph .arm, .hero-graph .plate, .hero-graph .tile, .hero-graph .pulse { transform-box: view-box; }
.hero-graph .arm { transform-origin: 240px 250px; }   /* les bras pivotent autour du socle */
/* centre de chaque icône : origine du survol ET de l'arrivée en scène */
.hero-graph .a-agro .plate, .hero-graph .a-agro .tile { transform-origin: 240px 64px; }
.hero-graph .a-com  .plate, .hero-graph .a-com  .tile { transform-origin: 385.42px 134.03px; }
.hero-graph .a-reco .plate, .hero-graph .a-reco .tile { transform-origin: 320.7px 417.58px; }
.hero-graph .a-fact .plate, .hero-graph .a-fact .tile { transform-origin: 421.34px 291.39px; }
.hero-graph .a-cali .plate, .hero-graph .a-cali .tile { transform-origin: 58.66px 291.39px; }
.hero-graph .a-chat .plate, .hero-graph .a-chat .tile { transform-origin: 159.3px 417.58px; }
.hero-graph .a-gest .plate, .hero-graph .a-gest .tile { transform-origin: 94.58px 134.03px; }

/* La liaison va du BORD DU SOCLE au BORD DE L'ICÔNE, et ne descend jamais sous 45 % d'opacité
   à son départ : c'est ce qui rendait Agro (vert clair, trait vertical) invisible sur blanc. */
.hero-graph .bond { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .88;
  transition: stroke-width .35s var(--ease-out), opacity .35s ease; }
.hero-graph .a-agro .bond { stroke: url(#bond-agro); }
.hero-graph .a-com  .bond { stroke: url(#bond-com); }
.hero-graph .a-reco .bond { stroke: url(#bond-reco); }
.hero-graph .a-fact .bond { stroke: url(#bond-fact); }
.hero-graph .a-cali .bond { stroke: url(#bond-cali); }
.hero-graph .a-chat .bond { stroke: url(#bond-chat); }
.hero-graph .a-gest .bond { stroke: url(#bond-gest); }

/* Le PORT : le point d'accroche sur le bord du socle. C'est lui qui dit « c'est branché ». */
.hero-graph .port { fill: #fff; stroke: var(--acc-t); stroke-width: 2.4;
  transition: r .3s var(--ease-out), stroke-width .3s ease; }
/* ① LE FLUX — un pointille FIN qui defile PAR-DESSUS la liaison. C'est lui qui transforme
   un fil inerte en canal : la liaison dit « c'est relie », le flux dit « ca circule ». */
.hero-graph .flujo {
  fill: none; stroke: var(--acc-t); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 2 10; opacity: .5;
}
/* ② L'ONDE D'IMPACT — l'arrivee de la perle devient un EVENEMENT. Sans elle la perle
   disparaissait simplement, et la fin du trajet ne se voyait pas. */
.hero-graph .onda { fill: none; stroke: var(--acc-t); stroke-width: 2; opacity: 0; }
/* ④ SECOND ARC, contra-rotatif et plus fin. Deux anneaux en sens inverse font un
   MECANISME ; un seul fait une decoration. */
.hero-graph .socle-arco2 {
  fill: none; stroke: url(#socle-ring); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 26 464; opacity: 0;
}
/* ⚠️ LA PERLE : cercle blanc OBLIGATOIRE. Sans lui l'influx a la couleur du fil
   et a peine sa largeur — il devient litteralement invisible, et l'anim parait
   morte alors qu'elle tourne. C'est ce qui s'est passe au 1er jet du 26-07. */
.hero-graph .pulse { fill: var(--acc-t); stroke: #fff; stroke-width: 2.2;
  filter: drop-shadow(0 0 3px var(--glow)); opacity: 0; }
/* LE SILLAGE — trois disques decroissants font une COMETE. Un point qui glisse est un
   point ; une comete a une DIRECTION et une VITESSE, et c'est ce qui se lit comme
   « ca circule » plutot que « ca bouge ». Les deux trainards sont plus petits, plus
   pales, et partent legerement apres : c'est ce decalage qui fait la queue. */
.hero-graph .estela { fill: var(--acc-t); stroke: #fff; stroke-width: 1.4;
  opacity: 0; }
/* L'ARC DE BALAYAGE — le motif « systeme en marche ». Sans lui le centre reste une image
   fixe posee au milieu de cinq bras qui bougent, ce qui est exactement l'impression de
   raideur qu'on veut enlever. Un seul arc, lent, jamais un cercle plein qui tournerait. */
.hero-graph .socle-arco {
  fill: none; stroke: url(#socle-ring); stroke-width: 4.2; stroke-linecap: round;
  stroke-dasharray: 52 401;        /* 2Pi x 72 = 452 : un arc de ~7,5 %, le reste vide */
  opacity: 0;
}
.hero-graph .tile { filter: drop-shadow(0 8px 18px rgba(15, 23, 42, .16));
  transform: scale(var(--tile-s, 1));   /* --tile-s : grossissement des icônes sur petit écran */
  transition: transform .35s var(--ease-out), filter .35s ease; }
.hero-graph .lbl { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 15px;
  text-anchor: middle; fill: var(--muted); transition: fill .25s ease; }

/* Survol / focus clavier : la liaison de l'app s'allume à son accent, les autres s'estompent. */
.hero-graph .arm:hover .bond, .hero-graph .arm:focus-visible .bond { opacity: 1; stroke-width: 4.6; }
.hero-graph .arm:hover .port, .hero-graph .arm:focus-visible .port { r: 7; stroke-width: 3.2; }
.hero-graph .arm:hover .lbl, .hero-graph .arm:focus-visible .lbl { fill: var(--acc-t); }
.hero-graph .arm:hover .tile, .hero-graph .arm:focus-visible .tile {
  transform: scale(calc(var(--tile-s, 1) * 1.09));
  filter: drop-shadow(0 10px 22px rgba(15, 23, 42, .18)) drop-shadow(0 0 16px var(--glow));
}
.hero-graph .graph:has(.arm:hover) .arm:not(:hover),
.hero-graph .graph:has(.arm:focus-visible) .arm:not(:focus-visible) { opacity: .22; }
.hero-graph .arm:focus-visible { outline: 2px solid var(--acc-t); outline-offset: 2px; border-radius: 10px; }

@media (prefers-reduced-motion: no-preference) {
  /* ① le logo se pose, ② chaque liaison se trace vers l'extérieur, ③ l'app arrive au bout */
  .hero-graph .socle { transform-box: view-box; transform-origin: 240px 250px;
    opacity: 0; animation: core-in .8s var(--ease-out) forwards; }
  /* L'ORBITE : ce sont les POINTILLES qui defilent, pas le cercle qui tourne. Un cercle
     en rotation est invisible (il est identique a lui-meme) ; des tirets qui avancent se
     voient tout de suite et coutent le meme rien. */
  .hero-graph .orbit { opacity: 0;
    animation: orbit-in 1.1s var(--ease-out) .25s forwards, orbit-flow 26s linear 1.4s infinite; }
  .hero-graph .socle-arco { transform-box: view-box; transform-origin: 240px 250px;
    animation: arco-in .8s var(--ease-out) .9s forwards, arco-turn 11s linear 1.7s infinite; }
  .hero-graph .core { opacity: 0; animation: core-in .9s var(--ease-out) .1s forwards;
    transform-box: view-box; transform-origin: 380px 330px; }
  .hero-graph .mol { transform-box: view-box; transform-origin: 380px 332px;
    animation: core-breathe 14s ease-in-out 1.2s infinite; }
  .hero-graph .electron.e-c { transform-box: view-box; transform-origin: 270px 200px;
    animation: core-spin 8s linear infinite; }
  .hero-graph .electron.e-f2 { transform-box: view-box; transform-origin: 624px 344px;
    animation: core-spin 11s linear infinite reverse; }

  .hero-graph .bond { stroke-dasharray: 100; stroke-dashoffset: 100;
    animation: bond-draw .65s var(--ease-out) forwards; }
  .hero-graph .plate { opacity: 0; animation: plate-in .5s var(--ease-out) forwards; }
  .hero-graph .a-agro .bond { animation-delay: .55s; } .hero-graph .a-agro .plate { animation-delay: .90s; }
  .hero-graph .a-com  .bond { animation-delay: .68s; } .hero-graph .a-com  .plate { animation-delay: 1.03s; }
  .hero-graph .a-reco .bond { animation-delay: .81s; } .hero-graph .a-reco .plate { animation-delay: 1.16s; }
  .hero-graph .a-fact .bond { animation-delay: .94s; } .hero-graph .a-fact .plate { animation-delay: 1.29s; }
  .hero-graph .a-cali .bond { animation-delay: 1.07s; } .hero-graph .a-cali .plate { animation-delay: 1.42s; }
  .hero-graph .a-chat .bond { animation-delay: 1.20s; } .hero-graph .a-chat .plate { animation-delay: 1.55s; }
  .hero-graph .a-gest .bond { animation-delay: 1.33s; } .hero-graph .a-gest .plate { animation-delay: 1.68s; }

  /* Dérive au repos : PAS un manège. Cinq périodes premières entre elles (17/19/23/29/31 s) —
     elles ne se resynchronisent jamais, donc l'ensemble ne tourne jamais en bloc. Le bras pivote
     autour du logo : la liaison reste soudée au centre ET à son app. */
  .hero-graph .arm { animation: arm-drift 23s ease-in-out infinite; }
  .hero-graph .a-agro { animation-duration: 17s; animation-delay: 2.0s; }
  .hero-graph .a-com  { animation-duration: 19s; animation-delay: 2.2s; }
  .hero-graph .a-reco { animation-duration: 23s; animation-delay: 2.4s; }
  .hero-graph .a-fact { animation-duration: 29s; animation-delay: 2.6s; }
  .hero-graph .a-cali { animation-duration: 31s; animation-delay: 2.8s; }
  .hero-graph .a-chat { animation-duration: 37s; animation-delay: 3.0s; }
  .hero-graph .a-gest { animation-duration: 41s; animation-delay: 3.2s; }

  /* ① le flux defile VERS le socle (dashoffset positif = sens du trace) */
  .hero-graph .flujo { animation: flujo-run 1.9s linear infinite; }
  .hero-graph .a-com  .flujo { animation-duration: 2.1s; }
  .hero-graph .a-reco .flujo { animation-duration: 2.3s; }
  .hero-graph .a-fact .flujo { animation-duration: 2.5s; }
  .hero-graph .a-cali .flujo { animation-duration: 2.7s; }
  .hero-graph .a-chat .flujo { animation-duration: 2.9s; }
  .hero-graph .a-gest .flujo { animation-duration: 3.1s; }
  /* ② l'onde s'ouvre a l'instant ou la perle touche le port : meme periode, meme phase */
  .hero-graph .onda { transform-box: view-box; }
  .hero-graph .a-agro .onda { transform-origin: 240px 178px; animation: onda 3.1s linear infinite; }
  .hero-graph .a-com  .onda { transform-origin: 296.29px 205.11px; animation: onda 3.4s linear .6s infinite; }
  .hero-graph .a-reco .onda { transform-origin: 271.24px 314.87px; animation: onda 3.7s linear 1.2s infinite; }
  .hero-graph .a-fact .onda { transform-origin: 310.19px 266.02px; animation: onda 4.1s linear 1.9s infinite; }
  .hero-graph .a-cali .onda { transform-origin: 169.81px 266.02px; animation: onda 4.6s linear 2.5s infinite; }
  .hero-graph .a-chat .onda { transform-origin: 208.76px 314.87px; animation: onda 5s linear 3s infinite; }
  .hero-graph .a-gest .onda { transform-origin: 183.71px 205.11px; animation: onda 5.4s linear 3.4s infinite; }
  /* ④ le second arc tourne A L'ENVERS, plus lentement */
  .hero-graph .socle-arco2 { transform-box: view-box; transform-origin: 240px 250px;
    animation: arco-in 1s var(--ease-out) 1.1s forwards, arco-turn 17s linear 1.9s infinite reverse; }
  /* 🔴 LA CADENCE — c'est ICI que se jouait « pas assez dynamique » (Florian 26-07).
     L'ancienne version lancait UN influx toutes les 15 a 23 SECONDES par bras. Un visiteur
     reste quatre secondes sur un hero : il ne voyait donc rien bouger, et jugeait une image
     fixe. Ce n'etait pas un choix de style, c'etait un reglage qui rendait l'anim invisible.
     Desormais 6 a 8,5 s — assez pour qu'il s'en passe toujours une a l'ecran, jamais assez
     pour clignoter. Les periodes restent PREMIERES ENTRE ELLES (6/6,5/7/7,5/8,5) : elles ne
     se resynchronisent jamais, donc jamais d'effet manege — c'etait le reproche du 25-07. */
  .hero-graph .a-agro .pulse, .hero-graph .a-agro .pulse.p2, .hero-graph .a-agro .estela { animation: pulse-agro 3.1s linear infinite; }
  .hero-graph .a-com  .pulse, .hero-graph .a-com .pulse.p2, .hero-graph .a-com  .estela { animation: pulse-com 3.4s linear .6s infinite; }
  .hero-graph .a-reco .pulse, .hero-graph .a-reco .pulse.p2, .hero-graph .a-reco .estela { animation: pulse-reco 3.7s linear 1.2s infinite; }
  .hero-graph .a-fact .pulse, .hero-graph .a-fact .pulse.p2, .hero-graph .a-fact .estela { animation: pulse-fact 4.1s linear 1.9s infinite; }
  .hero-graph .a-cali .pulse, .hero-graph .a-cali .pulse.p2, .hero-graph .a-cali .estela { animation: pulse-cali 4.6s linear 2.5s infinite; }
  .hero-graph .a-chat .pulse, .hero-graph .a-chat .pulse.p2, .hero-graph .a-chat .estela { animation: pulse-chat 5s linear 3s infinite; }
  .hero-graph .a-gest .pulse, .hero-graph .a-gest .pulse.p2, .hero-graph .a-gest .estela { animation: pulse-gest 5.4s linear 3.4s infinite; }
  /* ③ la 2e perle (APRES le raccourci `animation`, qui remet le delay a 0) : MEME trajet, decalee d'un DEMI-cycle -> le trafic double sans accelerer */
  .hero-graph .a-agro .pulse.p2 { animation-delay: -1.55s; }
  .hero-graph .a-com  .pulse.p2 { animation-delay: -1.1s; }
  .hero-graph .a-reco .pulse.p2 { animation-delay: -.65s; }
  .hero-graph .a-fact .pulse.p2 { animation-delay: -.15s; }
  .hero-graph .a-cali .pulse.p2 { animation-delay: .2s; }
  .hero-graph .a-chat .pulse.p2 { animation-delay: .5s; }
  .hero-graph .a-gest .pulse.p2 { animation-delay: .7s; }
  /* le sillage suit la tete : meme trajet, quelques centiemes plus tard */
  .hero-graph .estela.e2 { animation-delay: -.07s; opacity: .55; }
  .hero-graph .estela.e3 { animation-delay: -.14s; opacity: .28; }
  .hero-graph .a-com  .estela.e2 { animation-delay: .53s; } .hero-graph .a-com  .estela.e3 { animation-delay: .46s; }
  .hero-graph .a-reco .estela.e2 { animation-delay: 1.13s; } .hero-graph .a-reco .estela.e3 { animation-delay: 1.06s; }
  .hero-graph .a-fact .estela.e2 { animation-delay: 1.83s; } .hero-graph .a-fact .estela.e3 { animation-delay: 1.76s; }
  .hero-graph .a-cali .estela.e2 { animation-delay: 2.43s; } .hero-graph .a-cali .estela.e3 { animation-delay: 2.36s; }
  .hero-graph .a-chat .estela.e2 { animation-delay: 2.93s; } .hero-graph .a-chat .estela.e3 { animation-delay: 2.86s; }
  .hero-graph .a-gest .estela.e2 { animation-delay: 3.33s; } .hero-graph .a-gest .estela.e3 { animation-delay: 3.26s; }
  /* au survol, le flux se resserre : la liaison qu'on regarde devient la plus vivante */
  .hero-graph .arm:hover .pulse, .hero-graph .arm:hover .estela,
  .hero-graph .arm:focus-visible .pulse, .hero-graph .arm:focus-visible .estela {
    animation-duration: 1.6s; }
}
@keyframes core-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes core-breathe { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
@keyframes core-spin { to { transform: rotate(360deg); } }
@keyframes bond-draw { to { stroke-dashoffset: 0; } }
@keyframes plate-in { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
/* Amplitude portee de 0,85 a 1,5 degre : on passe d'un frremissement qu'on ne voit pas a
   une respiration qu'on percoit sans la regarder. Au-dela de ~2 degres ca commence a
   balancer, et c'est la que ca devient enfantin. */
@keyframes arm-drift {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25%      { transform: rotate(1.5deg) scale(1.02); }
  50%      { transform: rotate(0deg) scale(.99); }
  75%      { transform: rotate(-1.5deg) scale(1.014); }
}
@keyframes flujo-run { to { stroke-dashoffset: -36; } }
/* l'onde : un anneau qui s'ouvre et s'efface, ~15 % du cycle — au-dela ca clignote */
@keyframes onda {
  0%, 82% { transform: scale(1); opacity: 0; }
  86%     { opacity: .7; }
  100%    { transform: scale(2.6); opacity: 0; }
}
@keyframes orbit-flow { to { stroke-dashoffset: -452; } }   /* 2Pi x 72, un tour exact */
@keyframes arco-in { to { opacity: 1; } }
@keyframes arco-turn { to { transform: rotate(360deg); } }
@keyframes orbit-in { from { opacity: 0; transform: scale(.86); } to { opacity: .55; transform: none; } }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
/* Un vecteur par app : l'influx est POSÉ sur le bout de la liaison (côté icône) et descend
   jusqu'au port, sur le bord du socle — donc `translate` = (départ du bras − bout du bras).
   Les cinq vecteurs ont la MÊME longueur (82 px) : le rayon du socle et celui des icônes sont
   les mêmes pour tout le monde, la vitesse apparente est donc identique partout. */
@keyframes pulse-agro { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .95; } 80% { opacity: .95; } 100% { transform: translate(0, 82px); opacity: 0; } }
@keyframes pulse-com  { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .95; } 80% { opacity: .95; } 100% { transform: translate(-64.11px, 51.13px); opacity: 0; } }
@keyframes pulse-reco { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .95; } 80% { opacity: .95; } 100% { transform: translate(-35.58px, -73.88px); opacity: 0; } }
@keyframes pulse-fact { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .95; } 80% { opacity: .95; } 100% { transform: translate(-79.95px, -18.25px); opacity: 0; } }
@keyframes pulse-cali { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .95; } 80% { opacity: .95; } 100% { transform: translate(79.95px, -18.25px); opacity: 0; } }
@keyframes pulse-chat { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .95; } 80% { opacity: .95; } 100% { transform: translate(35.58px, -73.88px); opacity: 0; } }
@keyframes pulse-gest { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .95; } 80% { opacity: .95; } 100% { transform: translate(64.11px, 51.13px); opacity: 0; } }

/* ---- Titres de section ---- */
.stats h2, .panel > h2, .inner > h2, .apps-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin: 10px 0 12px; }
.panel > .eyebrow.center, .inner > .eyebrow.center, .stats > .eyebrow.center { margin-bottom: 6px; }

/* ---- Chiffres clés ---- */
.stats::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.stats > * { position: relative; z-index: 1; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 30px 0 8px; }
.stat { text-align: center; }
.stat-n {
  display: block; font-family: "Space Grotesk", sans-serif; font-weight: 700; line-height: 1;
  font-size: clamp(3rem, 6vw, 5.4rem); font-variant-numeric: tabular-nums;
  background: var(--grad); background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat p { color: var(--muted); font-size: .95rem; margin-top: 8px; max-width: 22ch; margin-inline: auto; }
.stats-note { color: var(--muted); margin-top: 30px; max-width: 62ch; margin-inline: auto; }

/* ---- Cartes (Suite / Tarifs / Métiers) ---- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; perspective: 1200px; margin-top: 20px; }
.cards-5 { grid-template-columns: repeat(3, 1fr); }
.cards.metiers { grid-template-columns: repeat(3, 1fr); }
.card, .price, .metier {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-card); transition: transform .25s var(--ease-out), border-color .3s, box-shadow .35s;
  transform-style: preserve-3d; overflow: hidden;
}
.card { padding: 30px 28px; display: flex; flex-direction: column; }
.metier { padding: 30px 28px; }
.price { padding: 30px 24px; text-align: center; }
.card::before, .price::before, .metier::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 45%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.card:hover::before, .price:hover::before, .metier:hover::before { opacity: 1; }
.card::after, .metier::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 82% at 50% 0%, var(--halo, transparent), transparent 62%);
  opacity: .55; transition: opacity .35s;
}
.card:hover::after, .metier:hover::after { opacity: 1; }
.card-agro   { --halo: rgba(76, 175, 80, .12); }
.card-com    { --halo: rgba(0, 122, 255, .12); }
.card-reco   { --halo: rgba(253, 128, 0, .12); }
.card-fact   { --halo: rgba(123, 79, 226, .13); }
.card-cali   { --halo: rgba(255, 196, 0, .15); }
.card-gest   { --halo: rgba(143, 58, 69, .13); }
.card-chat   { --halo: rgba(14, 116, 144, .12); }
.card-portal { --halo: rgba(30, 159, 201, .12); }
.card:hover, .price:hover, .metier:hover { box-shadow: var(--shadow-card-hover); }
.card-agro:hover, .metier.card-agro:hover { border-color: rgba(76, 175, 80, .55); }
.card-com:hover, .metier.card-com:hover { border-color: rgba(0, 122, 255, .55); }
.card-reco:hover, .metier.card-reco:hover { border-color: rgba(253, 128, 0, .55); }
.card-fact:hover, .metier.card-fact:hover { border-color: rgba(123, 79, 226, .55); }
.card-cali:hover, .metier.card-cali:hover { border-color: rgba(255, 196, 0, .65); }
.card-gest:hover, .metier.card-gest:hover { border-color: rgba(143, 58, 69, .6); }
.card-chat:hover, .metier.card-chat:hover { border-color: rgba(14, 116, 144, .55); }
.card-portal:hover { border-color: rgba(30, 159, 201, .55); }

/* tuile-icône dégradée par app */
.ic-tile { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 16px; box-shadow: 0 10px 22px -10px rgba(15, 23, 42, .45); }
.ic-tile.sm { width: 46px; height: 46px; margin: 0 auto 12px; }
.ic-tile .ic { width: 30px; height: 30px; color: #fff; }
.ic-tile img.app-ic { width: 32px; height: 32px; display: block; filter: brightness(0) invert(1); }
.ic-tile.sm img.app-ic { width: 26px; height: 26px; }
/* Tuile portant une VRAIE icône d'app : le SVG a déjà son fond dégradé et son glyphe blanc.
   On retire donc le dégradé du parent ET le filtre qui blanchissait tout (glyphe compris). */
.ic-tile.ic-app { background: none; box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .55); }
.ic-tile.ic-app img.app-ic { width: 100%; height: 100%; border-radius: 16px; filter: none; }
.ic-tile.ic-app.sm img.app-ic { border-radius: 13px; }
.t-agro   { background: linear-gradient(135deg, #55C15A, #2F7D34); }
.t-com    { background: linear-gradient(135deg, #2E93FF, #0A6CD6); }
.t-reco   { background: linear-gradient(135deg, #FF9A2E, #C25E00); }
.t-fact   { background: linear-gradient(135deg, #9B76F0, #5B35BE); }
.t-cali   { background: linear-gradient(135deg, #FFD44D, #D79E00); }
.t-gest   { background: linear-gradient(135deg, #A54A56, #7C2F3A); }
.t-chat   { background: linear-gradient(135deg, #1691B4, #0C617A); }
.t-portal { background: var(--btn-grad); }

.tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; border: 1px solid var(--line); color: var(--muted); background: transparent;
  align-self: flex-start;
}
.card-agro .tag   { color: var(--agro-aa); border-color: rgba(76, 175, 80, .45); }
.card-com .tag    { color: var(--com-aa); border-color: rgba(0, 122, 255, .45); }
.card-reco .tag   { color: var(--reco-aa); border-color: rgba(253, 128, 0, .45); }
.card-fact .tag   { color: var(--fact-aa); border-color: rgba(123, 79, 226, .45); }
.card-cali .tag   { color: var(--cali-aa); border-color: rgba(255, 196, 0, .6); }
.card-gest .tag   { color: var(--gest-aa); border-color: rgba(143, 58, 69, .55); }
.card-chat .tag   { color: var(--chat-aa); border-color: rgba(14, 116, 144, .5); }
.card-portal .tag { color: var(--teal-aa); border-color: rgba(30, 159, 201, .45); }
.card h3, .price h3, .metier h3 { font-size: 1.3rem; margin-bottom: 10px; position: relative; z-index: 1; }
.metier h3 { font-size: 1.12rem; }
.card p, .metier p { color: var(--muted); font-size: .95rem; margin-bottom: 16px; position: relative; z-index: 1; }
.metier-quote { color: var(--ink); font-style: italic; font-size: .98rem; }
.card ul, .metier ul { list-style: none; position: relative; z-index: 1; }
.card li, .metier li { position: relative; padding-left: 22px; color: var(--ink); font-size: .92rem; margin: 8px 0; }
.card li::before, .metier li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 11px; height: 11px; border-radius: 4px; background: var(--grad); opacity: .9;
}
.card-link {
  margin-top: auto; position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .88rem; color: var(--teal-aa);
}
.card-link .ic { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform .25s var(--ease-out); }
.card-link:hover .ic { transform: rotate(-90deg) translateY(-3px); }
.card-agro .card-link { color: var(--agro-aa); }
.card-com .card-link { color: var(--com-aa); }
.card-reco .card-link { color: var(--reco-aa); }
.card-fact .card-link { color: var(--fact-aa); }
.card-cali .card-link { color: var(--cali-aa); }
.card-gest .card-link { color: var(--gest-aa); }
/* la carte CHAT n'a pas de lien : un badge « En préparation » honnête à la place */
.card-soon { display: inline-block; margin-top: auto; align-self: flex-start;
  padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  color: var(--chat-aa); border: 1px dashed rgba(14, 116, 144, .5); }

/* ===================================================================
   SECTIONS PAR APPLICATION + APERÇUS D'INTERFACE (CSS pur, zéro image)
   =================================================================== */
.apps-head { text-align: center; padding-block: clamp(18px, 3vw, 34px); }
.apps-head .pricing-sub { max-width: 70ch; }
.appband { padding-block: clamp(10px, 1.6vw, 18px); }
.appsec { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
/* section inversée : c'est la COLONNE qui change de côté, pas seulement l'ordre visuel —
   sinon l'aperçu se retrouve coincé dans la colonne étroite et le tableau déborde. */
.appsec-rev { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
.appsec-rev .shot-wrap { grid-column: 1; grid-row: 1; }
.appsec-rev .appsec-text { grid-column: 2; grid-row: 1; }
/* Reco montre DEUX appareils : elle prend toute la largeur du panneau. */
.appsec-wide { grid-template-columns: 1fr; gap: 30px; }
.appsec-wide .appsec-text { max-width: 78ch; }
.appsec-wide .appsec-text .lead { max-width: 70ch; }
.appsec-wide .app-list { columns: 2; column-gap: 44px; }
.appsec-wide .app-list li { break-inside: avoid; }
.appsec-text h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 12px 0 14px; }
.appsec-text .lead { font-size: 1.05rem; max-width: 42ch; }
.app-name { color: var(--app-aa, var(--ink)); }
.app-agro { --app: var(--agro); --app-aa: var(--agro-aa); }
.app-com  { --app: var(--com);  --app-aa: var(--com-aa); }
.app-reco { --app: var(--reco); --app-aa: var(--reco-aa); }
.app-fact { --app: var(--fact); --app-aa: var(--fact-aa); }
.app-cali { --app: var(--cali); --app-aa: var(--cali-aa); }
.app-gest { --app: var(--gest); --app-aa: var(--gest-aa); }
.app-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--app-aa);
}
.app-badge .app-ic { width: 22px; height: 22px; display: block; border-radius: 7px; }
.app-list { list-style: none; margin-top: 22px; }
.app-list li { position: relative; padding-left: 26px; margin: 11px 0; font-size: .96rem; color: var(--ink); }
.app-list li::before {
  content: ""; position: absolute; left: 0; top: .48em; width: 12px; height: 12px; border-radius: 4px;
  background: var(--app, var(--violet)); opacity: .95;
}

.shot-wrap { margin: 0; }
.shot-cap {
  margin-top: 12px; text-align: center; color: var(--muted); font-size: .8rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.shot-cap::before { content: "✎"; opacity: .7; }

/* --- Cadre de la maquette --- */
.shot {
  --u: clamp(8.5px, .58vw + 4.2px, 12px);
  --acc: var(--app, var(--violet));
  --acc-d: var(--app-aa, var(--violet));
  position: relative;
}
.shot-agro { --acc: #4CAF50; --acc-d: var(--agro-aa); --acc-soft: rgba(76, 175, 80, .14); }
.shot-com  { --acc: #007AFF; --acc-d: var(--com-aa);  --acc-soft: rgba(0, 122, 255, .13); }
.shot-reco { --acc: #FD8000; --acc-d: var(--reco-aa); --acc-soft: rgba(253, 128, 0, .14); }
.shot-fact { --acc: #7B4FE2; --acc-d: var(--fact-aa); --acc-soft: rgba(123, 79, 226, .14); }
.shot-cali { --acc: #FFC400; --acc-d: var(--cali-aa); --acc-soft: rgba(255, 196, 0, .2); }
.shot-gest { --acc: #8F3A45; --acc-d: var(--gest-aa); --acc-soft: rgba(143, 58, 69, .16); }

.shot-win {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--u); line-height: 1.5; color: var(--shot-ink);
  background: var(--shot-bg);
  border: 1px solid var(--shot-line);
  border-radius: 1.2em; overflow: hidden;
  box-shadow: 0 1.6em 4em -1.6em var(--shot-frame), 0 .2em .6em -.3em var(--shot-frame);
  display: grid; grid-template-columns: 14em minmax(0, 1fr);
  min-height: 26em;
  /* conteneur de requête : le contenu s'adapte à la largeur DE LA MAQUETTE,
     pas à celle de la fenêtre — une maquette en colonne étroite se simplifie toute seule. */
  container-type: inline-size;
}
/* colonnes secondaires retirées quand la maquette devient étroite (repli : défilement) */
@container (max-width: 640px) { .shot-tbl .opt { display: none; } }
@container (max-width: 520px) { .shot-kpis { grid-template-columns: 1fr 1fr; } .shot-duo2 { grid-template-columns: 1fr; } }

/* barre latérale */
.shot-side {
  background: var(--shot-panel); border-right: 1px solid var(--shot-line2);
  padding: 1.1em .9em; display: flex; flex-direction: column; gap: .15em;
}
.shot-brand { display: flex; align-items: center; gap: .6em; font-weight: 500; margin-bottom: 1em; padding: 0 .3em; white-space: nowrap; }
.shot-brand b { color: var(--acc-d); }
.sb-ic { width: 1.9em; height: 1.9em; border-radius: .55em; flex: none; }
.sb-agro { background: linear-gradient(135deg, #5DBE60, #2E9E5B); }
.sb-com  { background: linear-gradient(135deg, #3AA0F0, #0A6FE0); }
.sb-reco { background: linear-gradient(135deg, #FFA23A, #FD7E00); }
.sb-fact { background: linear-gradient(135deg, #9B76F0, #5B35BE); }
.sb-cali { background: linear-gradient(135deg, #FFD44D, #E8AC00); }
.sb-gest { background: linear-gradient(135deg, #A54A56, #7C2F3A); }
.shot-nav { list-style: none; display: flex; flex-direction: column; gap: .12em; }
.shot-nav li {
  display: flex; align-items: center; gap: .75em;
  padding: .58em .8em; border-radius: .75em;
  color: var(--shot-muted); font-weight: 500; white-space: nowrap; overflow: hidden;
}
.shot-nav li i { font-style: normal; width: 1.3em; flex: none; text-align: center; }
.shot-nav li .sn-t { overflow: hidden; text-overflow: ellipsis; }
.shot-nav li.on { background: var(--acc-soft); color: var(--acc-d); font-weight: 600; }

/* barre du haut */
.shot-main { display: flex; flex-direction: column; min-width: 0; }
.shot-top {
  display: flex; align-items: center; gap: .9em;
  padding: .7em 1.1em; min-height: 3.4em;
  background: var(--shot-panel); border-bottom: 1px solid var(--shot-line);
}
.shot-hello { font-weight: 600; }
.shot-sel { border: 1px solid var(--shot-line); border-radius: .65em; padding: .25em .7em; font-weight: 600; color: var(--acc-d); background: var(--acc-soft); }
.shot-who { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; text-align: right; }
.shot-who b { font-weight: 600; }
.shot-who em { font-style: normal; font-size: .84em; color: var(--shot-muted); }
.shot-out { background: var(--acc-soft); color: var(--acc-d); font-weight: 600; padding: .45em .9em; border-radius: .8em; white-space: nowrap; }

/* corps */
.shot-body { padding: 1.2em 1.1em 1.4em; display: flex; flex-direction: column; gap: .75em; min-width: 0; }
.shot-h1 { font-family: inherit; font-size: 1.5em; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.shot-lead { color: var(--shot-muted); margin-top: -.45em; }
.shot-cap-line { color: var(--acc-d); font-weight: 600; margin-top: -.4em; }
.shot-sub { font-weight: 600; font-size: 1.1em; margin-top: .3em; }

.shot-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.1em, 1fr)); gap: .6em; }
.shot-kpis.kpi-2 { grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); }
.shot-kpi {
  background: var(--shot-panel); border: 1px solid var(--shot-line); border-radius: .9em;
  padding: .8em .7em; display: flex; flex-direction: column; gap: .15em; min-width: 0;
}
.shot-kpi b { font-size: 1.4em; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.shot-kpi b.acc { color: var(--acc-d); }
.shot-kpi b.ok { color: var(--shot-good); }
.shot-kpi b.bad { color: var(--shot-bad); }
.shot-kpi span { color: var(--shot-muted); font-size: .84em; line-height: 1.3; }

/* tableau */
.shot-tw { background: var(--shot-panel); border: 1px solid var(--shot-line); border-radius: .9em; overflow-x: auto; }
.shot-tbl { width: 100%; border-collapse: collapse; font-size: .95em; }
.shot-tbl th {
  text-align: left; font-size: .8em; text-transform: uppercase; letter-spacing: .04em;
  color: var(--shot-muted); font-weight: 600; padding: .75em .8em; border-bottom: 1px solid var(--shot-line); white-space: nowrap;
}
.shot-tbl td { padding: .7em .8em; border-bottom: 1px solid var(--shot-line2); white-space: nowrap; }
.shot-tbl tbody tr:last-child td { border-bottom: 0; }
.shot-tbl tbody tr:hover td { background: var(--shot-hover); }
.shot-tbl .n { text-align: right; font-variant-numeric: tabular-nums; }
.shot-tbl .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; color: var(--acc-d); }
.shot-tbl tr.tot td { font-weight: 700; border-top: 1px solid var(--shot-line); background: var(--shot-hover); }

/* pastilles d'état */
.sp {
  display: inline-block; padding: .18em .7em; border-radius: 999px;
  font-size: .82em; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: var(--shot-line2); color: var(--shot-muted); white-space: nowrap;
}
.sp.on { background: var(--shot-good-bg); color: var(--shot-good); }
.sp.warn { background: var(--shot-warn-bg); color: var(--shot-warn); }
.sp.bad { background: var(--shot-bad-bg); color: var(--shot-bad); }

/* Fact : bandeau de lecture IA */
.shot-read {
  display: flex; align-items: center; gap: .7em; flex-wrap: wrap;
  background: var(--acc-soft); border: 1px solid var(--shot-line); border-radius: .8em; padding: .7em .9em;
  color: var(--acc-d); font-weight: 600;
}
.sr-bar { flex: 1 1 6em; min-width: 5em; height: .55em; border-radius: 999px; background: var(--shot-line2); overflow: hidden; }
.sr-bar i { display: block; width: 40%; height: 100%; border-radius: 999px; background: var(--acc); }
.sr-p { font-variant-numeric: tabular-nums; }

/* Cali : jauge + cartes */
.shot-duo2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); gap: .7em; }
.shot-card { background: var(--shot-panel); border: 1px solid var(--shot-line); border-radius: .9em; padding: .9em; min-width: 0; }
.sc-h { font-weight: 600; margin-bottom: .5em; }
.cali-gauge { width: 10em; max-width: 100%; height: auto; display: block; margin: 0 auto .3em; }
.cali-gauge .g-track { stroke: var(--shot-line2); }
.cali-gauge .g-arc { stroke: var(--acc); }
.cali-gauge .g-num { fill: var(--shot-ink); font-size: 22px; font-weight: 700; font-family: inherit; }
.sc-list, .sc-alerts { list-style: none; display: flex; flex-direction: column; gap: .35em; font-size: .95em; }
.sc-list li { display: flex; justify-content: space-between; gap: .6em; color: var(--shot-muted); }
.sc-list li b { color: var(--shot-ink); }
.sc-alerts li { padding: .5em .7em; border-radius: .7em; background: var(--shot-line2); }
.sc-alerts li.al-w { background: var(--shot-warn-bg); color: var(--shot-warn); }
.sc-alerts li.al-b { background: var(--shot-bad-bg); color: var(--shot-bad); }

/* Reco : bureau + téléphone côte à côte */
.shot-duo { display: grid; grid-template-columns: minmax(0, 1fr) 14em; gap: 1.4em; align-items: center; }
.shot-phone {
  background: var(--shot-panel); border: .35em solid var(--shot-ink); border-radius: 1.8em;
  padding: .5em; box-shadow: 0 1.6em 4em -1.6em var(--shot-frame);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--u); color: var(--shot-ink); line-height: 1.45;
}
.ph-body { background: var(--shot-bg); border-radius: 1.2em; padding: .9em .8em; display: flex; flex-direction: column; gap: .55em; }
.ph-top { display: flex; flex-direction: column; }
.ph-top b { font-size: 1.25em; font-weight: 700; letter-spacing: -.02em; }
.ph-top span { color: var(--shot-muted); font-size: .9em; }
.ph-warn { background: var(--shot-warn-bg); color: var(--shot-warn); font-weight: 600; border-radius: .7em; padding: .5em .65em; font-size: .9em; }
.ph-times { display: flex; gap: .5em; }
.ph-times span { flex: 1; background: var(--shot-panel); border: 1px solid var(--shot-line); border-radius: .7em; padding: .4em .6em; display: flex; flex-direction: column; color: var(--shot-muted); font-size: .85em; }
.ph-times b { color: var(--shot-ink); font-size: 1.25em; font-weight: 600; }
.ph-count { color: var(--acc-d); font-weight: 600; font-size: .95em; }
.ph-list { list-style: none; display: flex; flex-direction: column; gap: .4em; }
.ph-list li {
  display: flex; align-items: center; justify-content: space-between; gap: .5em;
  background: var(--shot-panel); border: 1.5px solid var(--shot-line); border-radius: .8em; padding: .5em .65em;
}
.ph-list li span { display: flex; flex-direction: column; min-width: 0; }
.ph-list li b { font-weight: 600; font-size: .95em; }
.ph-list li em { font-style: normal; font-size: .8em; color: var(--shot-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ph-list li.off { background: var(--shot-bad-bg); border-color: rgba(180, 35, 24, .35); }
.ph-list li.off b { text-decoration: line-through; }
.ph-btn {
  margin-top: .3em; text-align: center; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #FF9A2E, #C25E00); border-radius: .85em; padding: .8em; font-size: 1.02em;
}

/* --- Aperçu du portail --- */
.portal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(26px, 3.5vw, 52px); align-items: center; margin-top: 34px; }
.trust-grid.portal-trust { margin-top: 0; grid-template-columns: repeat(2, 1fr); }
.shot-portal { --acc: var(--violet); --acc-d: var(--teal-aa); --acc-soft: rgba(123, 79, 226, .12); }
.portal-win { display: block; min-height: 0; }
.pw-head {
  display: flex; align-items: center; gap: .7em; padding: .9em 1.1em;
  background: var(--shot-panel); border-bottom: 1px solid var(--shot-line);
}
.pw-key { width: 2em; height: 2em; border-radius: .6em; display: grid; place-items: center; background: var(--btn-grad); color: #fff; flex: none; }
.pw-key .ic { width: 1.2em; height: 1.2em; stroke-width: 2; }
.pw-head b { font-weight: 600; }
.pw-soc { margin-left: auto; color: var(--shot-muted); border: 1px solid var(--shot-line); border-radius: .6em; padding: .2em .65em; }
.pw-body { padding: 1.2em 1.1em 1.4em; display: flex; flex-direction: column; gap: .9em; }
.pw-hello { font-size: 1.4em; font-weight: 700; letter-spacing: -.02em; }
.pw-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(7em, 1fr)); gap: .6em; }
.pw-app {
  background: var(--shot-panel); border: 1px solid var(--shot-line); border-radius: .9em;
  padding: .8em .7em; display: flex; flex-direction: column; align-items: center; gap: .15em; text-align: center;
}
.pw-app i { font-style: normal; font-size: 1.5em; line-height: 1.1; }
.pw-app em { font-style: normal; font-size: .8em; color: var(--shot-good); font-weight: 600; }
.pa-agro { border-color: rgba(76, 175, 80, .5); }
.pa-com { border-color: rgba(0, 122, 255, .5); }
.pa-reco { border-color: rgba(253, 128, 0, .5); }
.pa-fact { border-color: rgba(123, 79, 226, .5); }
.pa-cali { border-color: rgba(255, 196, 0, .6); }
.pa-gest { border-color: rgba(143, 58, 69, .6); }
.pa-off { opacity: .55; }
.pa-off em { color: var(--shot-muted); }
.pw-2fa { background: var(--shot-good-bg); color: var(--shot-good); font-weight: 600; border-radius: .8em; padding: .6em .8em; text-align: center; }

/* ---- Le parcours (fil conducteur) ---- */
.journey { position: relative; max-width: 820px; margin: 40px auto 0; }
.journey-line { position: absolute; left: 26px; top: 22px; bottom: 30px; width: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.journey-line .fil { display: block; width: 100%; height: calc(var(--fill, 0) * 100%); background: var(--grad); background-size: 100% 300%; border-radius: 3px; }
.step { position: relative; display: flex; gap: 22px; align-items: flex-start; padding-bottom: 30px; }
.step:last-child { padding-bottom: 0; }
.step-dot { position: relative; z-index: 1; flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .4); }
.step-dot .ic { width: 26px; height: 26px; color: var(--muted); }
.step-agro .step-dot { border-color: rgba(76, 175, 80, .6); } .step-agro .step-dot .ic { color: var(--agro-aa); }
.step-com .step-dot { border-color: rgba(0, 122, 255, .6); } .step-com .step-dot .ic { color: var(--com-aa); }
.step-reco .step-dot { border-color: rgba(253, 128, 0, .6); } .step-reco .step-dot .ic { color: var(--reco-aa); }
.step-fact .step-dot { border-color: rgba(123, 79, 226, .6); } .step-fact .step-dot .ic { color: var(--fact-aa); }
.step-cali .step-dot { border-color: rgba(255, 196, 0, .7); } .step-cali .step-dot .ic { color: var(--cali-aa); }
.step-gest .step-dot { border-color: rgba(143, 58, 69, .7); } .step-gest .step-dot .ic { color: var(--gest-aa); }
.step-body { padding-top: 4px; }
.step-tag { display: block; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.step-agro .step-tag { color: var(--agro-aa); }
.step-com .step-tag { color: var(--com-aa); }
.step-reco .step-tag { color: var(--reco-aa); }
.step-fact .step-tag { color: var(--fact-aa); }
.step-cali .step-tag { color: var(--cali-aa); }
.step-gest .step-tag { color: var(--gest-aa); }
.step-body p { color: var(--ink); font-size: 1rem; }

/* ---- En construction (honnêteté) ---- */
.soon {
  max-width: 820px; margin: 42px auto 0; padding: 26px 28px;
  border: 1px dashed var(--line); border-radius: 20px; background: var(--band-soft);
}
.soon h3 { font-size: 1.05rem; margin-bottom: 14px; color: var(--ink); }
.soon-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; }
.soon-list li { position: relative; padding-left: 24px; font-size: .93rem; color: var(--muted); }
.soon-list li::before { content: "⏳"; position: absolute; left: 0; top: 0; font-size: .85em; }
.soon-note { margin-top: 16px; font-size: .88rem; color: var(--muted); font-style: italic; }

/* ---- Tarifs ---- */
.pricing-sub { color: var(--muted); max-width: 62ch; margin: 6px auto 8px; }
.price-tag {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.5rem;
  background: var(--grad); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin: 6px 0 4px;
}
.price-desc { color: var(--muted); font-size: .88rem; }
.included { margin-top: 40px; border-top: 1px solid var(--panel-line); padding-top: 30px; }
.included h3 { text-align: center; font-size: 1.15rem; margin-bottom: 20px; }
.incl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 34px; max-width: 720px; margin-inline: auto; list-style: none; }
.incl-grid li { position: relative; padding-left: 26px; color: var(--ink); font-size: .95rem; }
.incl-grid li::before { content: ""; position: absolute; left: 0; top: .4em; width: 13px; height: 13px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 3px rgba(123, 79, 226, .1); }

/* ---- Confiance & sécurité ---- */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; }
.trust { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px; box-shadow: var(--shadow-card); }
.trust-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); margin-bottom: 14px; }
.trust-ic .ic { width: 24px; height: 24px; color: var(--violet); }
.trust h3 { font-size: 1.02rem; margin-bottom: 6px; }
.trust p { color: var(--muted); font-size: .9rem; }
.trust-badges { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.badge { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .82rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; }

/* ---- FAQ (accordéon natif) ---- */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; margin-top: 32px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 20px; box-shadow: var(--shadow-card); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 0; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1rem; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .chev { width: 20px; height: 20px; color: var(--muted); flex: none; transition: transform .3s; }
.faq-item[open] .chev { transform: rotate(180deg); }
.faq-item p { color: var(--muted); font-size: .94rem; padding: 0 0 20px; margin: 0; }
@media (prefers-reduced-motion: no-preference) { .faq-item[open] p { animation: faq-in .28s var(--ease-out); } }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Bande CTA (seule zone saturée : la marque) ---- */
.cta-band {
  position: relative; width: min(1200px, 100% - clamp(28px, 6vw, 80px)); margin-inline: auto;
  padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 72px); border-radius: 28px; text-align: center;
  background: var(--btn-grad); background-size: 300% 300%; box-shadow: 0 30px 80px rgba(93, 63, 190, .35); overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) { .cta-band { animation: band-shift 16s ease-in-out infinite; } }
@keyframes band-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.cta-band h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 12px; color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .88); margin-bottom: 26px; }
.cta-reassure { color: rgba(255, 255, 255, .82) !important; font-size: .85rem; margin: 18px 0 0 !important; }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--line); background: var(--surface); padding: clamp(40px, 5vw, 66px) clamp(24px, 6vw, 88px) 40px; color: var(--muted); font-size: .9rem; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 30px; max-width: 1400px; margin-inline: auto; }
.footer-brand-col { max-width: 320px; }
.footer-brand { display: inline-flex; }
.footer-mol { height: 34px; width: auto; display: block; overflow: visible; }
.footer-brand .brand-word { height: 16px; }
.footer-tag { margin-top: 12px; font-size: .86rem; }
.footer-col h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); margin-bottom: 12px; }
.footer-col a { display: block; color: var(--muted); font-size: .9rem; padding: 4px 0; transition: color .2s; }
.footer-col a:hover { color: var(--violet); }
.footer-col a[href^="mailto:"] { color: var(--teal-aa); word-break: break-word; }
.footer-legal { text-align: center; font-size: .82rem; color: var(--muted); border-top: 1px solid var(--line); margin: 34px auto 0; padding-top: 22px; max-width: 1400px; }

/* ---- Révélations au scroll ---- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.cards .reveal:nth-child(2) { transition-delay: .08s; }
.cards .reveal:nth-child(3) { transition-delay: .16s; }
.cards .reveal:nth-child(4) { transition-delay: .24s; }
.cards .reveal:nth-child(5) { transition-delay: .32s; }
.cards .reveal:nth-child(6) { transition-delay: .4s; }
.stats-grid .reveal:nth-child(2) { transition-delay: .08s; }
.stats-grid .reveal:nth-child(3) { transition-delay: .16s; }
.stats-grid .reveal:nth-child(4) { transition-delay: .24s; }
.trust-grid .reveal:nth-child(even) { transition-delay: .08s; }
.appsec .shot-wrap.reveal { transition-delay: .12s; }

/* ---- Logo footer qui s'illumine ---- */
.footer-brand:hover .brand-logo, .footer-brand:active .brand-logo { animation: logo-on .5s var(--ease-out) forwards; }
@keyframes logo-on {
  0% { filter: brightness(1) saturate(1); transform: scale(1); }
  55% { filter: brightness(1.28) saturate(1.4) drop-shadow(0 0 10px rgba(123, 79, 226, .85)) drop-shadow(0 0 26px rgba(30, 159, 201, .6)) drop-shadow(0 0 44px rgba(16, 185, 129, .45)); transform: scale(1.08); }
  100% { filter: brightness(1.14) saturate(1.22) drop-shadow(0 0 6px rgba(123, 79, 226, .7)) drop-shadow(0 0 18px rgba(30, 159, 201, .45)) drop-shadow(0 0 32px rgba(16, 185, 129, .32)); transform: scale(1.05); }
}

/* ---- Balayage lumineux des boutons dégradé ---- */
.btn-primary, .btn-login { position: relative; overflow: hidden; }
.btn-primary::after, .btn-login::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); pointer-events: none;
}
.btn-primary:hover::after, .btn-login:hover::after, .btn-primary:focus-visible::after, .btn-login:focus-visible::after { animation: shine-sweep .6s ease; }
@keyframes shine-sweep { to { left: 160%; } }

/* ---- Accessibilité ---- */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

/* ================= Responsive ================= */
@media (max-width: 1200px) {
  .appsec, .appsec-rev { grid-template-columns: 1fr; gap: 30px; }
  /* une fois empilé, on relâche le placement explicite des sections inversées,
     sinon texte et aperçu se superposent dans la même cellule. */
  .appsec-rev .appsec-text, .appsec-rev .shot-wrap { grid-column: auto; grid-row: auto; }
  .appsec-wide .app-list { columns: 2; }
  .appsec-text .lead { max-width: 62ch; }
  .portal-grid { grid-template-columns: 1fr; }
  .trust-grid.portal-trust { grid-template-columns: repeat(3, 1fr); }
  .shot { --u: clamp(9px, 1.05vw, 13px); }
}
@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; max-width: none; }
  .nav-links { gap: 16px; font-size: .9rem; }
}
@media (max-width: 1024px) {
  .cards, .cards-5, .cards.metiers { grid-template-columns: 1fr 1fr; }
  .trust-grid, .trust-grid.portal-trust { grid-template-columns: 1fr 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  /* En dessous de ~1024px les liens ne tiennent plus dans la pilule : ils restent
     accessibles au scroll et dans le pied de page. */
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
}
@media (max-width: 900px) {
  .shot-duo { grid-template-columns: 1fr; gap: 1.4em; }
  .shot-phone { max-width: 19em; margin-inline: auto; width: 100%; }
}
@media (max-width: 820px) {
  /* la barre latérale de l'aperçu devient une bande d'icônes : rien ne déborde */
  .shot-win { grid-template-columns: 1fr; min-height: 0; }
  .shot-side {
    flex-direction: row; align-items: center; gap: .25em;
    border-right: 0; border-bottom: 1px solid var(--shot-line2);
    padding: .55em .6em; overflow: hidden;
  }
  .shot-side .sn-t, .shot-brand .sb-t { display: none; }
  .shot-brand { margin-bottom: 0; margin-right: .3em; }
  .shot-nav { flex-direction: row; flex: 1; overflow: hidden; }
  .shot-nav li { padding: .45em .5em; }
  .shot-nav li i { width: auto; }
  .shot-tbl .opt, .shot-top .shot-hello { display: none; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .lead { max-width: none; margin: 0 auto; }
  .hero-cta, .hero-note, .hero-scroll { justify-content: center; }
  /* ⚠️ `width: 100%` OBLIGATOIRE : avec `margin-inline: auto` seul, l'élément de grille cesse
     de s'étirer et le <svg> retombe sur sa taille intrinsèque par défaut (300 px) — le graphe
     restait bloqué à 300 px de 480 px à 760 px de large. */
  .hero-graph { order: -1; width: 100%; max-width: 420px; margin: 0 auto 6px; }
  .cards, .cards-5, .cards.metiers, .stats-grid, .trust-grid, .trust-grid.portal-trust { grid-template-columns: 1fr; }
  .stats-grid { gap: 30px; }
  .incl-grid, .soon-list { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .cards .reveal, .stats-grid .reveal, .trust-grid .reveal { transition-delay: 0s; }
  .appsec-text { text-align: left; }
  .appsec-wide .app-list { columns: 1; }
  .app-badge { font-size: .7rem; }
  .shot { --u: clamp(8.5px, 2.5vw, 11px); }
  .journey-line { left: 21px; }
  .step { gap: 16px; }
  .step-dot { width: 44px; height: 44px; }
  .step-dot .ic { width: 22px; height: 22px; }

  /* Header mobile : la pilule passe sur 2 lignes, tout reste DANS le cadre. */
  .nav { gap: 10px 12px; padding: 8px 12px; flex-wrap: wrap; }
  .brand { margin-right: auto; }
  .brand-mol { height: 26px; }
  .brand-word { height: 12px; }
  .nav-actions { margin-left: auto; gap: 8px; flex-wrap: nowrap; }
  .lang-switch button { padding: 5px 8px; font-size: .76rem; }
  .btn-login { height: 38px; padding: 0 13px; font-size: .88rem; }
}
@media (max-width: 460px) {
  /* Téléphone : le graphe ne dispose plus que de ~250-390 px. On ne laisse RIEN déborder — on
     grossit les icônes et les libellés dans le repère du SVG (transform + font-size, donc aucune
     géométrie recalculée), et on écarte les libellés des icônes devenues plus grandes.
     Débattement vérifié : icône la plus excentrée à 212/240 du centre, libellés dans le cadre. */
  .hero-graph { --tile-s: 1.22; }
  .hero-graph .lbl { font-size: 19px; transform: translateY(8px); }
  .hero-graph .a-agro .lbl { transform: translateY(-5px); }
  .shot-kpis { grid-template-columns: 1fr 1fr; }
  .shot-duo2 { grid-template-columns: 1fr; }
  .pw-apps { grid-template-columns: 1fr 1fr; }
  .soon { padding: 20px 18px; }
}
@media (max-width: 400px) {
  .nav-actions { flex-basis: 100%; justify-content: flex-end; }
  .footer-top { grid-template-columns: 1fr; }
}

/* ---- Reduced motion : tout est débrayé, les états restent lisibles ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .grad, .cta-band, .hero-scroll .ic { animation: none; }
  /* Graphe hero : plus une seule animation, mais l'image finale est COMPLÈTE — les 5 liaisons
     tracées, les 5 icônes et le logo visibles. L'influx lumineux disparaît (il n'a pas de sens
     immobile) ; le survol garde son épaississement/estompage, qui sont de simples transitions. */
  .hero-graph .core, .hero-graph .mol, .hero-graph .electron, .hero-graph .socle,
  .hero-graph .orbit, .hero-graph .arm, .hero-graph .bond, .hero-graph .plate { animation: none; }
  .hero-graph .core, .hero-graph .plate, .hero-graph .socle { opacity: 1; transform: none; }
  .hero-graph .orbit { opacity: .55; transform: none; stroke-dashoffset: 0; }
  .hero-graph .bond { stroke-dasharray: none; stroke-dashoffset: 0; }
  /* L'influx est le SEUL élément purement décoratif : il disparaît. Le socle, les ports, les
     liaisons et les icônes restent — débrayer le mouvement ne doit jamais amputer l'image. */
  .hero-graph .pulse, .hero-graph .estela, .hero-graph .socle-arco,
  .hero-graph .socle-arco2, .hero-graph .onda { display: none; }
  /* le flux reste VISIBLE mais fige : il fait partie de l'image, pas du mouvement */
  .hero-graph .flujo { animation: none; }
  .journey-line .fil { height: 100%; }
  .footer-brand:hover .brand-logo, .footer-brand:active .brand-logo, .brand:hover .brand-logo, .brand:focus-visible .brand-logo {
    animation: none;
    filter: brightness(1.12) saturate(1.2) drop-shadow(0 0 6px rgba(123, 79, 226, .6)) drop-shadow(0 0 16px rgba(30, 159, 201, .4));
    transform: none;
  }
  .btn-primary:hover::after, .btn-login:hover::after, .btn-primary:focus-visible::after, .btn-login:focus-visible::after { animation: none; }
  .nav-links a::after { transition: none; }
  .card, .price, .metier { transition: border-color .3s, box-shadow .35s; }
  #net-canvas { display: none; }
}