/* ════════════════════════════════════════════════════════════
   AgfaRythmo — vitrine. Styles communs aux trois pages.
   Direction : sombre éditorial. Le fond nuit de l'application, composé comme
   une affiche : titres très grands, peu de texte courant, grands blancs,
   sections séparées par un filet de 1 px. Pas de cartes.
   Tokens : mêmes valeurs que agfa-rythmo-frontend/src/assets/styles/da-tokens.css.
   Une seule action primaire bleue par page. Aucune ressource externe.
   ════════════════════════════════════════════════════════════ */

:root{
  --da-bg:#121827;
  --da-slot:#0f131e;
  --da-slot-rgb:15,19,30;
  --da-tray:#1a2030;
  --da-card:#1d2436;
  --da-card-rgb:29,36,54;
  --da-panel:#1b2231;

  /* #3182ce ne donne que 3,7:1 avec du blanc : insuffisant pour le libelle
     d'un bouton en 0,92rem. On descend d'un cran (5,2:1) et le survol suit. */
  --da-blue:#2563eb; --da-blue-hover:#1d4ed8;
  --da-violet:#8455f6; --da-violet-pale:#c9b6ff; --da-violet-deep:#5b34c4;
  --da-ardoise:#657390; --da-ardoise-rgb:101,115,144;

  --da-ink-strong:#fff; --da-ink:#e5e7eb; --da-ink-muted:#9ca3af;
  /* Accessibilite : l'app pose --da-ink-faint:#6b7280, qui ne donne que 3,9:1
     sur le fond nuit. La vitrine s'en sert pour du vrai texte (pied de page,
     mentions legales, notes de prix), donc on l'eclaircit a 5,6:1 (WCAG AA). */
  --da-ink-faint:#8a94a6;

  --da-rule:rgba(255,255,255,.06);
  --da-hollow:inset 0 2px 5px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.04);
  --da-lift:0 16px 40px -24px rgba(0,0,0,.55);
  --da-ease:cubic-bezier(.22,1,.36,1);

  /* Mode clair : canaux et dosages. Un voile ou une ombre ne s'écrit plus
     rgba(0,0,0,.6) mais rgba(var(--da-shade-rgb),calc(.6*var(--da-shade-k))).
     En sombre le canal vaut le littéral et le dosage 1 : rien ne bouge. En
     clair, le canal passe au bleu nuit et le dosage règle la force. Trois
     familles, à ne pas mélanger :
       shade  ombres, creux, rainures        (noir → bleu nuit, bien plus léger)
       edge   filets clairs sur le fond nuit (deviennent foncés)
       glint  reflets sur une lèvre ou un bord (restent blancs, plus francs) */
  --da-shade-rgb:0,0,0; --da-shade-k:1;
  --da-edge-rgb:255,255,255; --da-edge-k:1;
  --da-glint-rgb:255,255,255; --da-glint-k:1;
  --da-grain:.05;
  --da-nav:rgba(26,32,48,.86); --da-nav-open:rgba(26,32,48,.96);
  --da-panel-veil:rgba(27,34,49,.88); --da-slot-veil:rgba(15,19,30,.62);
  --da-violet-pale-rgb:201,182,255;
  /* Couleurs à rôle unique, avec leur jumeau lisible en clair */
  --v-heart:#f9a8d4; --v-ok:#8fd3a8; --v-ko:#f0a3a3;
  --v-teal-rgb:45,212,191; --v-teal-ink:#2dd4bf; --v-engrave:#0e1321;

  /* La bande (rythmo.css et les bandes miniatures d'illus.css) : repères de
     agfa-rythmo-frontend/src/utils/themeBande.ts, recopiés à la main. */
  --band-bg:#202937; --band-sep:rgba(59,130,246,.2); --band-shadow:0 4px 6px rgba(0,0,0,.1);
  --band-tick:#aaa; --band-second:#8455f6; --band-scene:#8455F6; --band-hint-rgb:45,212,191;
  --band-cursor-a:#ffffff; --band-cursor-b:#e5e7eb;
  --band-cursor-shadow:0 0 8px rgba(255,255,255,.6),0 0 16px rgba(0,0,0,.8);
  --band-glow:0 0 6px rgba(255,255,255,.6); --band-head-glow:0 0 6px rgba(255,255,255,.7);
  --band-handle-glow:0 0 6px rgba(255,255,255,.8);

  --display:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1180px;
  --gutter:clamp(20px,4vw,48px);
}

/* ── Mode clair ────────────────────────────────────────────
   data-theme est posé par le script en tête de chaque page : le choix
   enregistré (bouton du header), sinon le thème de l'OS. Sans JavaScript, la
   vitrine reste sombre. Ambiance « gris froid » validée sur
   docs/notes/maquette-mode-clair.html ; planchers AA dans README.md. */
:root[data-theme="light"]{
  color-scheme:light;
  --da-bg:#eef1f6; --da-slot:#dfe4ec; --da-slot-rgb:223,228,236; --da-tray:#e6eaf1; --da-card:#ffffff; --da-card-rgb:255,255,255; --da-panel:#ffffff;
  --da-violet-pale:#5b34c4; --da-violet-deep:#4c2aa8; --da-violet-pale-rgb:91,52,196;
  --da-ink-strong:#0b1220; --da-ink:#1e293b; --da-ink-muted:#475569;
  /* 5,6:1 sur le fond, comme le plancher du sombre */
  --da-ink-faint:#56627a;
  --da-rule:rgba(15,23,42,.08);
  --da-hollow:inset 0 2px 5px rgba(15,23,42,.14),0 1px 0 rgba(255,255,255,.8);
  --da-lift:0 16px 40px -24px rgba(15,23,42,.22);

  --da-shade-rgb:15,23,42; --da-shade-k:.25;
  --da-edge-rgb:15,23,42; --da-edge-k:1.3;
  --da-glint-k:18;
  --da-grain:.035;
  --da-nav:rgba(255,255,255,.82); --da-nav-open:rgba(255,255,255,.97);
  --da-panel-veil:rgba(255,255,255,.9); --da-slot-veil:rgba(223,228,236,.7);
  /* Plancher AA 4,5:1 sur le fond : l’ardoise sert aussi de texte (kicker 404). */
  --da-ardoise:#56627a;
  --v-heart:#db2777; --v-ok:#166534; --v-ko:#b91c1c;
  --v-teal-rgb:13,148,136; --v-teal-ink:#115e59; --v-engrave:#d3d9e3;

  --band-bg:#f8fafc; --band-sep:rgba(37,99,235,.22); --band-shadow:0 1px 2px rgba(15,23,42,.06);
  --band-tick:#475569; --band-second:#7c3aed; --band-scene:#7c3aed; --band-hint-rgb:13,148,136;
  --band-cursor-a:#0f172a; --band-cursor-b:#0f172a;
  --band-cursor-shadow:0 0 10px rgba(15,23,42,.35);
  --band-glow:0 0 10px rgba(15,23,42,.35); --band-head-glow:0 0 10px rgba(15,23,42,.35);
  --band-handle-glow:0 0 0 1px rgba(255,255,255,.85);
}

/* Titres : Poppins 600, sosie libre du tracé du logo. Le courant reste sur la
   pile système ; Lexend est réservée à la bande (rythmo.css), comme dans l'app. */
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('poppins-600.woff2') format('woff2');
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Defilement : meme matiere que l'application (tailwind.css). Sans cela le
   navigateur pose sa barre claire par defaut, qui traverse le fond nuit. Elle
   se voit surtout sous Windows, ou la barre reste affichee en permanence. */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(var(--da-ardoise-rgb),.45);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--da-ardoise-rgb),.65)}
*{scrollbar-width:thin;scrollbar-color:rgba(var(--da-ardoise-rgb),.45) transparent}

body{
  margin:0;background:var(--da-bg);color:var(--da-ink);
  font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}

/* ── La matière de la page ───────────────────────────────
   Deux surcouches fixes, sans couleur propre : les bords s'assombrissent, ce
   qui creuse le centre, et un grain très fin enlève au fond son aspect de
   surface plate. Rien ne bouge, rien ne clignote. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(90deg,rgba(var(--da-shade-rgb),calc(.34*var(--da-shade-k))),transparent 14%,transparent 86%,rgba(var(--da-shade-rgb),calc(.34*var(--da-shade-k)))),
             radial-gradient(120% 80% at 50% 0%,rgba(132,85,246,.07),transparent 60%)}

body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:var(--da-grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Lien d'evitement ─────────────────────────────────────
   Premier element focalisable de chaque page : il saute la navigation pour
   aller au contenu. Invisible tant qu'il n'a pas le focus. */
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;
  padding:.7rem 1.2rem;border-radius:999px;background:var(--da-panel);
  color:var(--da-ink-strong);text-decoration:none;font-size:.9rem;font-weight:600;
  border:1px solid var(--da-rule);box-shadow:var(--da-lift)}
.skip:focus{top:14px}
main:focus{outline:none}

/* ── Focus visible ────────────────────────────────────────
   Le navigateur pose un contour bleu que le fond nuit avale. On le remplace
   par l'anneau violet des champs, partout et sur la meme regle. */
:focus-visible{outline:2px solid var(--da-violet);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.nav__brand:focus-visible,.skip:focus-visible{outline-offset:4px}

/* ── Typographie ─────────────────────────────────────────── */
h1,h2,h3{color:var(--da-ink-strong);margin:0;font-family:var(--display);font-weight:600}
h1{font-size:clamp(2.8rem,8vw,6.5rem);letter-spacing:-.035em;line-height:.98;text-wrap:balance}
h2{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.02em;line-height:1.2}
p{margin:0}
.kicker{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--da-violet-pale);margin:0 0 18px}
.lede{color:var(--da-ink-muted);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.55;max-width:38ch}
.body{color:var(--da-ink-muted);font-size:1rem;line-height:1.7;max-width:56ch}
.body + .body{margin-top:1em}
.lede b,.body b{color:var(--da-ink-strong);font-weight:600}
.kbd{font-family:var(--mono);font-size:.8em;color:var(--da-ink);background:var(--da-tray);
  border:1px solid var(--da-rule);border-bottom-width:2px;border-radius:.3rem;padding:.08em .45em}

/* ── Boutons ─────────────────────────────────────────────── */
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.btn{display:inline-flex;align-items:center;gap:.55em;padding:.8rem 1.4rem;
  border-radius:999px;font-size:.92rem;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;line-height:1;
  transition:background .22s var(--da-ease),transform .22s var(--da-ease),border-color .22s var(--da-ease)}
/* Guide DA, chapitre « Boutons & poignées » : primaire en plein bleu, un seul
   par vue ; secondaire en fond translucide neutre, qui s'efface. */
.btn--primary{
  background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 2px 10px -2px rgba(37,99,235,.55);
}
.btn--primary::after{content:"→";transition:transform .22s var(--da-ease)}
.btn--primary:hover{
  background:linear-gradient(135deg,#60a5fa 0%,#1d4ed8 100%);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 4px 16px -2px rgba(37,99,235,.7);
}
.btn--primary:hover::after{transform:translateX(3px)}
.btn--primary:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.btn--second{background:rgba(101,115,144,.2);border-color:rgba(101,115,144,.35);color:var(--da-ink)}
.btn--second:hover{border-color:rgba(185,167,245,.35)}

/* ── En-tête ─────────────────────────────────────────────── */
/* Le header est une pilule posée sur la page, pas une barre collée au bord :
   la gouttière-pilule du guide DA, avec son liseré et son flou.
   Deux zones : liens éditoriaux (nav__links) à gauche du logo,
   actions utilisateur (nav__actions) regroupées à droite. */
.nav{position:sticky;top:0;z-index:50;padding:14px var(--gutter);background:transparent}
.nav__in{max-width:calc(var(--wrap) - var(--gutter));margin:0 auto;
  padding:7px 10px 7px 22px;display:flex;align-items:center;align-content:flex-start;
  column-gap:20px;row-gap:0;flex-wrap:wrap;
  background:var(--da-nav);border:1px solid var(--da-rule);border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(var(--da-glint-rgb),calc(.05*var(--da-glint-k))),0 20px 44px -30px rgba(var(--da-shade-rgb),calc(.95*var(--da-shade-k)));
  backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);
  transition:border-radius .38s var(--da-ease),padding .38s var(--da-ease),row-gap .38s var(--da-ease)}
.nav__brand{display:flex;align-items:center;flex:none;transition:margin-left .38s var(--da-ease);order:1}
.nav__brand img{height:38px;width:auto}
.nav__links{display:flex;gap:22px;font-size:.9rem;order:2}
.nav__links a{color:var(--da-ink-muted);text-decoration:none;transition:color .2s var(--da-ease)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--da-ink-strong)}
.nav__drawer-actions{display:none !important}
/* Groupe d'actions : thème (injecté par JS), connexion, CTA — alignés à droite */
.nav__actions{display:flex;align-items:center;gap:12px;margin-left:auto;order:3}
.nav__actions .nav__login{
  display:inline-flex;align-items:center;gap:.35em;
  padding:.45rem .85rem;border-radius:999px;
  font-size:.86rem;font-weight:600;
  color:#fff;text-decoration:none;white-space:nowrap;
  background:rgba(var(--da-slot-rgb),.5);
  border:1px solid rgba(var(--da-edge-rgb),calc(.1*var(--da-edge-k)));
  box-shadow:0 1px 2px rgba(var(--da-shade-rgb),calc(.2*var(--da-shade-k)));
  transition:color .2s var(--da-ease),background .2s var(--da-ease),border-color .2s var(--da-ease),transform .2s var(--da-ease);
}
:root[data-theme="light"] .nav__actions .nav__login{
  color:var(--da-ink-strong);
}
.nav__actions .nav__login:hover{
  color:#fff;
  background:rgba(var(--da-slot-rgb),.85);
  border-color:rgba(var(--da-violet-pale-rgb),.4);
}
:root[data-theme="light"] .nav__actions .nav__login:hover{
  color:var(--da-ink-strong);
}
.nav__actions .nav__login::after{
  content:"↗";font-size:.85em;opacity:.9;margin-left:.2em;
  transition:transform .2s var(--da-ease);
}
.nav__actions .nav__login:hover::after{
  transform:translate(1px,-1px);
}
.nav .btn{padding:.55rem 1.05rem;font-size:.82rem;color:#fff}
.nav__burger{display:none;order:4;flex:none;width:34px;height:34px;padding:0;
  border-radius:999px;border:1px solid rgba(var(--da-edge-rgb),calc(.12*var(--da-edge-k)));
  background:transparent;color:var(--da-ink-muted);cursor:pointer;position:relative;
  align-items:center;justify-content:center;flex-direction:column;gap:3.5px;
  transition:color .2s var(--da-ease),border-color .2s var(--da-ease),background .2s var(--da-ease)}
.nav__burger::before{content:"";position:absolute;inset:-6px}
.nav__burger:hover{color:var(--da-ink-strong);border-color:rgba(var(--da-violet-pale-rgb),.45)}
.nav__burger span{display:block;width:14px;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .22s var(--da-ease),opacity .18s var(--da-ease);transform-origin:center}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* Deuxième ligne de chapitres intégrée dans le header pilule (style ModalTabs) */
.has-scrolled-past .nav__in{border-radius:22px;padding:8px 12px;row-gap:6px}
.has-scrolled-past .nav__brand{margin-left:6px}

.nav__sub{
  order:99;width:100%;display:flex;align-items:center;gap:3px;
  max-height:0;opacity:0;margin:0;padding:0;border:none;
  border-radius:999px;
  background:rgba(var(--da-slot-rgb),.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 3px transparent;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  position:relative;user-select:none;-webkit-user-select:none;pointer-events:none;
  transform:translateY(-6px);
  transition:max-height .32s var(--da-ease),
             opacity .22s var(--da-ease),
             transform .32s var(--da-ease),
             padding .32s var(--da-ease),
             border-color .22s var(--da-ease),
             box-shadow .32s var(--da-ease)}
.nav__sub::-webkit-scrollbar{display:none}

.has-scrolled-past .nav__sub{
  max-height:44px;opacity:1;transform:translateY(0);pointer-events:auto;
  padding:3px;margin:0;
  border:1px solid rgba(var(--da-edge-rgb),calc(.05*var(--da-edge-k)));
  box-shadow:inset 0 1px 3px rgba(var(--da-shade-rgb),calc(.5*var(--da-shade-k)))}

.nav__sub a{position:relative;z-index:2;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--sans);font-size:.78rem;font-weight:500;cursor:pointer;
  color:var(--da-ink-muted);text-decoration:none;white-space:nowrap;
  padding:5px 12px;border-radius:999px;transition:color .25s var(--da-ease)}
.nav__sub a b{font-family:var(--mono);font-size:.68rem;font-weight:600;
  color:var(--da-violet-pale);opacity:.85;transition:color .25s var(--da-ease),opacity .25s var(--da-ease)}
.nav__sub a:hover{color:var(--da-ink)}
.nav__sub a:hover b{opacity:1}
.nav__sub a.is-active{color:var(--da-ink-strong);font-weight:600}
.nav__sub a.is-active b{color:var(--da-violet);opacity:1}
.nav__sub a.target{color:var(--da-ink-strong);font-weight:600}
.nav__sub a.target b{color:var(--da-violet);opacity:1}

/* Apparition en cascade des chapitres (comme ModalTabs.vue dans l'application) */
@keyframes nav-tab-in{
  from{opacity:0;transform:translateX(-7px)}
  to{opacity:1;transform:none}
}
.has-scrolled-past .nav__sub a{animation:nav-tab-in .32s var(--da-ease) both}

/* Pastille active = noyau en relief neutre (comme ModalTabs.vue dans l'application) */
.nav__indicator{position:absolute;z-index:1;top:3px;bottom:3px;border-radius:999px;
  background:var(--da-card);border:1px solid rgba(var(--da-edge-rgb),calc(.08*var(--da-edge-k)));
  box-shadow:0 8px 20px -12px rgba(var(--da-shade-rgb),var(--da-shade-k));
  pointer-events:none;opacity:0;
  transition:left .5s var(--da-ease),width .5s var(--da-ease),opacity .2s var(--da-ease)}
.nav__indicator.is-visible{opacity:1}
.nav__indicator.dragging{
  transition:none !important;
  box-shadow:0 16px 36px -14px rgba(var(--da-shade-rgb),calc(.9*var(--da-shade-k)));
}
.nav__sub.snapping .nav__indicator{
  transition:left .55s var(--da-ease),width .55s var(--da-ease);
}

/* Poignée transparente par-dessus le texte : c'est elle qu'on attrape */
.nav__handle{
  position:absolute;z-index:5;top:3px;bottom:3px;border-radius:999px;
  cursor:grab;touch-action:none;opacity:0;pointer-events:none;
  transition:left .5s var(--da-ease),width .5s var(--da-ease);
}
.has-scrolled-past .nav__handle{opacity:1;pointer-events:auto}
.nav__handle:active,.nav__handle.dragging{
  cursor:grabbing;
  transition:none !important;
}
.nav__sub.snapping .nav__handle{
  transition:left .55s var(--da-ease),width .55s var(--da-ease);
}

/* Scroll margin des sections ciblées par la sous-navigation */
#demo,#etapes,#edition,#detection,#equipe,#export,#donnees,#prix{scroll-margin-top:clamp(80px,10vw,110px)}

/* ── Sections ────────────────────────────────────────────── */
.sec{padding:clamp(44px,6vw,80px) 0 0}
.sec + .sec{border-top:1px solid rgba(var(--da-shade-rgb),calc(.55*var(--da-shade-k)));box-shadow:inset 0 1px 0 var(--da-rule);margin-top:clamp(44px,6vw,80px)}

/* Une section creusée dans la page : fond plus sombre, ombre interne en haut
   et en bas, liseré clair sur la lèvre inférieure. Elle prend toute la largeur
   et se colle à ce qui la précède. */
.sec--dig{background:var(--da-slot);padding-bottom:clamp(44px,6vw,80px);
  border-top:1px solid rgba(var(--da-shade-rgb),calc(.6*var(--da-shade-k)));border-bottom:0;
  box-shadow:inset 0 16px 30px -22px rgba(var(--da-shade-rgb),calc(.95*var(--da-shade-k))),inset 0 -14px 26px -22px rgba(var(--da-shade-rgb),calc(.7*var(--da-shade-k))),
             inset 0 -1px 0 rgba(var(--da-glint-rgb),calc(.045*var(--da-glint-k)));
  margin-top:clamp(44px,6vw,80px)}
.sec--dig + .sec{border-top:0;box-shadow:none;margin-top:clamp(44px,6vw,80px)}
.sec__head{margin-bottom:clamp(22px,3vw,36px)}
.sec__head .lede{margin-top:22px}
.rule{border:0;border-top:1px solid var(--da-rule);margin:0}

/* Emplacement d'une capture ou d'une vidéo à fournir : un creux, un libellé. */
.shot{position:relative;aspect-ratio:16/10;background:var(--da-slot);
  border:1px solid rgba(var(--da-shade-rgb),calc(.45*var(--da-shade-k)));border-radius:14px;box-shadow:var(--da-hollow);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.shot--wide{aspect-ratio:21/9}
.shot--video{aspect-ratio:16/9}
.shot__label{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--da-ink-faint);text-align:center;padding:0 20px;line-height:1.8}
.shot__label b{display:block;color:var(--da-ardoise);font-weight:600;font-size:.62rem;letter-spacing:.16em}
.shot img,.shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── Pied de page complet ────────────────────────────────── */
.foot{position:relative;overflow:hidden;margin-top:clamp(80px,11vw,150px);border-top:1px solid var(--da-rule);
  padding:clamp(48px,6vw,76px) 0 36px;
  background:rgba(var(--da-shade-rgb),calc(.15*var(--da-shade-k)))}
.foot > .wrap{position:relative;z-index:1}

.foot__grid{display:grid;grid-template-columns:minmax(0,2.3fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);align-items:start}

.foot__brand{display:grid;gap:12px;max-width:44ch}
.foot__logo-link{display:inline-block;line-height:1}
.foot__logo{height:36px;width:auto;opacity:1}
.foot__tagline{font-size:.92rem;line-height:1.55;color:var(--da-ink-strong);margin:0}
.foot__colophon{font-size:.8rem;line-height:1.6;color:var(--da-ink-faint);margin:0}
.foot__cta{justify-self:start;padding:.52rem 1.1rem;font-size:.82rem;margin-top:4px}

.foot__col{display:grid;gap:14px}
.foot__title{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--da-ink-strong)}

.foot__nav{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:.88rem}
.foot__nav a{color:var(--da-ink-muted);text-decoration:none;transition:color .15s ease;
  display:inline-flex;align-items:center;gap:6px}
.foot__nav a:hover{color:var(--da-ink-strong)}
.foot__dim{color:var(--da-ink-faint);font-size:.84rem}

.foot__bottom{margin-top:clamp(40px,5vw,56px);padding-top:24px;
  border-top:1px solid rgba(var(--da-shade-rgb),calc(.3*var(--da-shade-k)));
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.8rem;color:var(--da-ink-faint)}
.foot__bottom p{margin:0}
.foot__bottom-right{font-family:var(--mono);font-size:.72rem;color:var(--da-ink-faint)}

@media (max-width:900px){
  .foot__grid{grid-template-columns:1fr 1fr;gap:36px 28px}
  .foot__brand{grid-column:1 / -1;max-width:100%}
}
@media (max-width:520px){
  .foot__grid{grid-template-columns:1fr;gap:32px}
}

/* Le cœur du soutien (pied de page, section « Le prix ») : même tracé et même
   rose que l'icône de l'application. Il se remplit au survol du lien. */
.heart{width:1.1em;height:1.1em;flex:none;fill:none;stroke:var(--v-heart);stroke-width:1.8;
  stroke-linejoin:round;transition:fill .2s var(--da-ease)}
a:hover .heart{fill:rgba(249,168,212,.3)}

/* ── Révélation au défilement ────────────────────────────── */
/* Sans JavaScript, l'IntersectionObserver ne rend jamais le contenu : on ne
   masque donc qu'une fois la classe `js` posee par le document. */
html.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--da-ease),transform .7s var(--da-ease)}
html.js .reveal.in{opacity:1;transform:none}

/* ── Adaptatif ───────────────────────────────────────────── */
@media (max-width:960px){
  .nav{padding:10px clamp(12px,3vw,24px)}
  .nav__in{position:relative;padding:6px 8px 6px 16px;column-gap:8px;row-gap:0}
  .nav__brand img{height:30px}
  .nav__burger{display:inline-flex}
  .nav__links{position:absolute;top:calc(100% + 8px);left:0;right:0;display:none;
    flex-direction:column;gap:3px;background:var(--da-nav-open);
    border:1px solid rgba(var(--da-edge-rgb),calc(.1*var(--da-edge-k)));
    border-radius:20px;padding:10px;
    box-shadow:0 24px 50px -16px rgba(var(--da-shade-rgb),calc(.95*var(--da-shade-k))),
               0 2px 8px rgba(var(--da-shade-rgb),calc(.3*var(--da-shade-k)));
    backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
    z-index:100}
  .nav__links.is-open{display:flex;animation:nav-drawer-in .22s var(--da-ease) both}
  .nav__links > a{display:flex;align-items:center;justify-content:space-between;
    padding:11px 16px;border-radius:12px;font-size:.92rem;font-weight:600;
    color:#fff;text-decoration:none;
    transition:background .18s var(--da-ease),color .18s var(--da-ease);border:none}
  :root[data-theme="light"] .nav__links > a{color:var(--da-ink-strong)}
  .nav__links > a::after{content:"›";font-size:1.2em;opacity:.4;font-weight:400;transition:transform .2s var(--da-ease),opacity .2s var(--da-ease)}
  .nav__links > a:hover::after,.nav__links > a:active::after{opacity:1;transform:translateX(2px)}
  .nav__links > a:hover,.nav__links > a:active{
    background:rgba(var(--da-slot-rgb),.6);color:#fff}
  :root[data-theme="light"] .nav__links > a:hover,:root[data-theme="light"] .nav__links > a:active{
    color:var(--da-ink-strong)}
  .nav__links > a[aria-current="page"]{background:rgba(var(--da-slot-rgb),.85);color:#fff}
  :root[data-theme="light"] .nav__links > a[aria-current="page"]{color:var(--da-ink-strong)}

  .nav__drawer-actions{display:flex !important;flex-direction:column;gap:8px;
    margin-top:10px;padding-top:12px;border-top:1px solid rgba(var(--da-edge-rgb),calc(.08*var(--da-edge-k)))}
  .nav__drawer-actions .btn{justify-content:center;width:100%;text-align:center;
    padding:.75rem 1.2rem;font-size:.92rem;font-weight:600;border-radius:999px;color:#fff}
  .nav__drawer-actions .nav__login{display:flex;align-items:center;justify-content:center;gap:.35em;
    width:100%;padding:.7rem 1.2rem;border-radius:999px;font-size:.88rem;font-weight:600;
    color:#fff;text-decoration:none;
    background:rgba(var(--da-slot-rgb),.6);
    border:1px solid rgba(var(--da-edge-rgb),calc(.1*var(--da-edge-k)));
    box-shadow:0 1px 3px rgba(var(--da-shade-rgb),calc(.25*var(--da-shade-k)));
    transition:color .2s var(--da-ease),background .2s var(--da-ease),border-color .2s var(--da-ease)}
  :root[data-theme="light"] .nav__drawer-actions .nav__login{color:var(--da-ink-strong)}
  .nav__drawer-actions .nav__login:hover{background:rgba(var(--da-slot-rgb),.9);color:#fff;border-color:rgba(var(--da-violet-pale-rgb),.4)}
  :root[data-theme="light"] .nav__drawer-actions .nav__login:hover{color:var(--da-ink-strong)}
  .nav__drawer-actions .nav__login::after{content:"↗";font-size:.85em;opacity:.9;margin-left:.25em}

  .nav__actions .nav__login{display:none}
  .nav__actions{gap:8px}
  .nav__actions .btn{padding:.45rem .85rem;font-size:.8rem}
  .has-scrolled-past .nav__in{padding:6px 8px 6px 12px;row-gap:5px}
  .has-scrolled-past .nav__brand{margin-left:2px}
  .nav__sub{padding:0;gap:2px;scroll-padding:4px}
  .has-scrolled-past .nav__sub{max-height:38px;padding:2px 3px;margin:0}
  .nav__sub a{padding:4px 8px;font-size:.72rem;gap:4px}
  .nav__sub a b{font-size:.64rem}
  .nav__indicator,.nav__handle{top:2px;bottom:2px}
  .foot__links{margin-left:0}
}

@keyframes nav-drawer-in{
  from{opacity:0;transform:translateY(-6px) scale(.99)}
  to{opacity:1;transform:none}
}

@media (max-width:540px){
  .nav{padding:8px clamp(8px,2.5vw,14px)}
  .nav__in{padding:5px 6px 5px 12px;column-gap:6px;row-gap:0}
  .nav__brand img{height:26px}
  .nav__actions .btn{display:none}
  .nav__theme,.nav__burger{width:32px;height:32px}
  .has-scrolled-past .nav__in{padding:5px 6px 5px 10px;row-gap:4px}
  .has-scrolled-past .nav__brand{margin-left:0}
  .has-scrolled-past .nav__sub{max-height:36px;padding:2px;margin:0}
  .nav__sub a{padding:3px 7px;font-size:.7rem;gap:3px}
  .nav__sub a b{font-size:.62rem}
}

/* ── Mouvement réduit ────────────────────────────────────── */
/* Sous cette largeur, le texte entre dans la zone assombrie : on ne garde que
   la lueur du haut. */
@media (max-width:1100px){
  body::before{background:radial-gradient(140% 70% at 50% 0%,rgba(132,85,246,.07),transparent 60%)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  html.js .reveal{opacity:1;transform:none}
  .nav__links.is-open{animation:none !important}
}

/* ── Bascule de thème ────────────────────────────────────
   Le bouton est ajouté par site.js dans la pilule du header : sans JavaScript,
   il ne servirait à rien. Il montre le thème vers lequel il bascule. */
.nav__theme{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;padding:0;
  border-radius:999px;border:1px solid rgba(var(--da-edge-rgb),calc(.12*var(--da-edge-k)));background:transparent;
  color:var(--da-ink-muted);cursor:pointer;position:relative;
  transition:color .2s var(--da-ease),border-color .2s var(--da-ease)}
.nav__theme::before{content:"";position:absolute;inset:-6px}
.nav__theme:hover{color:var(--da-ink-strong);border-color:rgba(var(--da-violet-pale-rgb),.45)}
.nav__theme svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav__theme .i-lune{display:none}
[data-theme="light"] .nav__theme .i-soleil{display:none}
[data-theme="light"] .nav__theme .i-lune{display:block}

/* Deux fichiers de logo, un par thème : le SVG est une image, sa couleur ne
   se change pas depuis la page. La paire est dans le HTML. */
.logo--clair{display:none !important}
[data-theme="light"] .logo--sombre{display:none !important}
[data-theme="light"] .logo--clair{display:block !important}

/* Pendant la bascule, rien ne glisse d'une couleur à l'autre. Retour de
   secours si la View Transitions API ci-dessous n'existe pas. */
html.theme-bascule *,html.theme-bascule *::before,html.theme-bascule *::after{transition:none !important}

/* Bascule « fondu » (site.js, basculerEnFondu) : la View Transitions API
   capture l'ancien et le nouvel écran toute seule, ici juste l'easing maison
   plutôt que le fondu par défaut du navigateur (250ms, linéaire). Copie de
   agfa-rythmo-frontend/src/assets/styles/tailwind.css. */
@keyframes theme-fondu-sort{to{opacity:0}}
@keyframes theme-fondu-entre{from{opacity:0}}
::view-transition-old(root){animation:theme-fondu-sort .42s var(--da-ease) both}
::view-transition-new(root){animation:theme-fondu-entre .42s var(--da-ease) both}