/* ==========================================================================
   Pages Plugins — composants repris des maquettes validées
   ==========================================================================
   Source : ~/Projects/anthem-plugins-landing-design/mockup/{content-lab,
   anthem-bot,plugins}.html, tag audit-2026-09-11-baseline.

   Cette feuille n'est chargée que sur les trois gabarits Plugins (voir
   anthem_enqueue_scripts()). Les jetons et le reset ne s'appliquent donc nulle
   part ailleurs ; les sélecteurs d'élément nus sont en plus portés sur `.pg`,
   le conteneur de page, pour laisser l'en-tête et le pied du thème intacts.

   Ne pas éditer à la main sans reporter la modification dans la maquette :
   c'est elle qui fait foi, et la recette compare les captures aux siennes.
   ========================================================================== */
/* ==========================================================================
   1. Jetons — strictement ceux du thème anthem-theme v2.3.0
   ========================================================================== */
:root{
  /* couleur */
  --black:#000000;
  --surface:#111111;          /* bg-card du thème */
  --surface-2:#17171b;
  --surface-3:#1d1d22;
  --line:rgba(255,255,255,.10);        /* border-white/10, dominante du site */
  --line-soft:rgba(255,255,255,.06);
  --line-strong:rgba(255,255,255,.18);
  --line-hard:rgba(255,255,255,.40);   /* border-white/40 des boutons du header */
  --primary:#c43a59;
  --primary-hi:#d1466a;
  --primary-text:#e8607f;              /* teinte claire : 6,4:1 sur noir, AA en petit corps */
  --primary-wash:rgba(196,58,89,.12);
  --violet:#a855f7;                    /* lavis et orbes uniquement, jamais en texte */
  --fg:#ffffff;
  --fg-2:#d4d4d8;
  --fg-3:#a1a1aa;                      /* text-mute du thème */
  --fg-4:#8a8a92;   /* releve pour tenir 4,5:1 aussi sur les bandes charbon #111111 */

  /* rayons — quatre valeurs, un rôle chacune */
  --r-pill:999px;
  --r-card:16px;
  --r-frame:14px;
  --r-chip:8px;

  /* ombres — deux, pas plus */
  --sh-frame:0 28px 64px -32px rgba(0,0,0,.95);
  --sh-glow:0 0 40px rgba(196,58,89,.35);

  /* rythme : grille de 8 px */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px;
  --s-6:48px; --s-8:64px; --s-10:80px; --s-12:96px; --s-16:128px;

  /* type */
  --sans:'Inter','Inter repli',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display:clamp(2.5rem,5.4vw,5rem);
  --fs-h2:clamp(1.875rem,3.5vw,3.125rem);
  --fs-h3:1.375rem;
  --fs-h4:1.0625rem;
  --fs-lead:clamp(1.0625rem,1.25vw,1.25rem);
  --fs-body:1.0625rem;
  --fs-sm:.9375rem;
  --fs-xs:.875rem;
  --fs-micro:.75rem;

  /* mouvement */
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:160ms;
  --t-mid:220ms;
  --t-slow:300ms;

  /* motif de fond de l'accueil, réutilisé par les bandes de section */
  --dots:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  /* mise en page */
  --gutter:24px;
  --measure:66ch;
  --header-h:80px;
  --sec-y:72px;
}
@media(min-width:900px){
  :root{ --gutter:32px; --sec-y:128px; --header-h:96px; }
}
/* Repli métriquement calé sur Inter (Arial corrigé, valeurs usuelles de
   next/font) : tant qu'Inter n'est pas chargée, le texte occupe la même place,
   et son arrivée ne fait plus sauter le hero (CLS mesuré à 0,14 sans lui). */
@font-face{font-family:'Inter repli';src:local('Arial');ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;size-adjust:107.12%}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'kern' 1,'liga' 1,'calt' 1;
  overflow-x:hidden;
}
/* La couleur de texte héritée vit sur le conteneur de page, pas sur <body> :
   le thème pose `text-white` en classe sur <body>, qui gagne contre un
   sélecteur d'élément. Sur `.pg` elle s'applique à toute la page. */
.pg{color:var(--fg-2)}
:where(.pg) img,:where(.pg) svg{display:block;max-width:100%}
:where(.pg) figure{margin:0}
:where(.pg) h1,:where(.pg) h2,:where(.pg) h3,:where(.pg) h4{color:var(--fg);margin:0;text-wrap:balance}
:where(.pg) p{margin:0}
:where(.pg) ul,:where(.pg) ol{margin:0;padding:0;list-style:none}
:where(.pg) a{color:inherit;text-decoration:none}
:where(.pg) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--primary-text);outline-offset:3px;border-radius:2px}
::selection{background:var(--primary);color:#fff}
.ico{width:22px;height:22px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;color:var(--primary-text)}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{width:100%;max-width:1324px;margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-2);top:var(--s-2);z-index:200;background:var(--primary);color:#fff;
  padding:12px 20px;border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-sm)}
/* ==========================================================================
   2. Type
   ========================================================================== */
.h1{font-size:var(--fs-display);font-weight:800;letter-spacing:-.035em;line-height:1.0}
.h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.028em;line-height:1.08}
.h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.015em;line-height:1.25}
.h4{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.005em;line-height:1.4}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--fg-2);max-width:var(--measure)}
.body{max-width:var(--measure)}
.sm{font-size:var(--fs-sm);line-height:1.6}
.xs{font-size:var(--fs-xs);line-height:1.55;color:var(--fg-3)}
.mute{color:var(--fg-3)}
/* textes gris : les mots qui portent l'information en blanc et gras, une idée
   par paragraphe, interligne confortable (consigne du 01/10/2026) */
.pg strong{color:var(--fg);font-weight:600}
.txt p{line-height:1.65}
.txt p+p{margin-top:.8em}
.accent{color:var(--primary-text)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
/* en-tête de section : la hiérarchie se fait à la taille, à la graisse et à l'espace.
   Aucun libellé en capitales, aucun filet décoratif. */
.section-head{margin-bottom:var(--s-6)}
/* repère de page : un filet framboise vertical dans la marge du titre. Le seul ornement,
   répété à l'identique sur chaque section, jamais horizontal. */
.section-head .h2{position:relative}
.section-head .h2::before{content:'';position:absolute;left:-22px;top:0;bottom:0;
  width:4px;border-radius:2px;background:var(--primary)}
@media(max-width:760px){.section-head .h2::before{left:-16px}}
.section-head .h2{max-width:26ch}
.section-head p{max-width:var(--measure);margin-top:var(--s-2);color:var(--fg-3)}
/* ==========================================================================
   3. Boutons — reprise exacte des boutons du thème
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:48px;padding:0 28px;border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:700;letter-spacing:-.005em;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),box-shadow var(--t-mid) var(--ease);
}
.btn svg{width:16px;height:16px;flex:none;transition:transform var(--t-fast) var(--ease)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--sh-glow)}
.btn-primary:hover{background:var(--primary-hi);transform:translateY(-1px)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{border:2px solid var(--line-hard);color:var(--fg)}
.btn-ghost:hover{background:var(--primary);border-color:var(--primary)}
.btn-ghost:hover svg{transform:translateX(3px)}
.btn-sm{min-height:44px;padding:0 20px;font-size:var(--fs-xs)}
.link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:var(--fs-sm);font-weight:600;color:var(--fg);
  border-bottom:1px solid transparent;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.link svg{width:14px;height:14px;transition:transform var(--t-fast) var(--ease)}
.link:hover{color:var(--primary-text);border-bottom-color:var(--primary)}
.link:hover svg{transform:translateX(3px)}
/* ==========================================================================
   4. En-tête et pied — mêmes composants que le thème
   ========================================================================== */
.site-header{
  position:fixed;inset-inline:0;top:0;z-index:50;
  background:rgba(0,0,0,.8);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;
  max-width:1200px;margin-inline:auto;padding:var(--s-2) var(--gutter);gap:var(--s-3)}
.brand{display:flex;align-items:center;gap:10px;min-height:44px}
.brand-mark{width:34px;height:34px;flex:none}
.brand-name{font-size:12px;font-weight:700;letter-spacing:.16em;line-height:1.25;color:var(--fg);text-transform:uppercase}
.nav{display:none;gap:var(--s-5)}
.nav a{font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);
  display:inline-flex;align-items:center;min-height:44px;transition:color var(--t-fast) var(--ease)}
.nav a:hover{color:var(--primary-text)}
.nav a[aria-current]{color:var(--fg)}
.nav a[aria-current]{position:relative}
.nav a[aria-current]::after{content:'';position:absolute;inset-inline:0;bottom:11px;height:2px;background:var(--primary)}
.header-actions{display:flex;align-items:center;gap:var(--s-2)}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--line-hard);
  border-radius:var(--r-pill);color:var(--fg);transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.icon-btn:hover{background:var(--primary);border-color:var(--primary)}
.icon-btn svg{width:18px;height:18px}
.burger{display:grid}
.header-cta{display:none}
@media(min-width:1024px){
  .nav{display:flex}
  .burger{display:none}
  .header-cta{display:inline-flex}
}
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:var(--s-10) 0 var(--s-6)}
.footer-grid{display:grid;gap:var(--s-6);grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.site-footer h3{margin-bottom:var(--s-3)}
.site-footer li+li{margin-top:0}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-sm);color:var(--fg-3);transition:color var(--t-fast) var(--ease)}
.site-footer a:hover{color:var(--primary-text)}
.footer-base{margin-top:var(--s-6);padding-top:var(--s-3);border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);justify-content:space-between}
/* ==========================================================================
   5. Décor du site : lavis d'angle + orbes + grille pointillée
   ========================================================================== */
.wash{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:linear-gradient(to bottom right,rgba(196,58,89,.10),rgba(168,85,247,.10) 45%,var(--black) 78%)}
.wash::after{content:'';position:absolute;inset:0;opacity:.05;background-image:var(--dots)}
.orb{position:absolute;width:384px;height:384px;border-radius:50%;filter:blur(120px);pointer-events:none}
.orb-a{top:-80px;left:18%;background:rgba(196,58,89,.20)}
.orb-b{bottom:-120px;right:14%;background:rgba(168,85,247,.20)}
.rule{height:1px;border:0;margin:0;background:linear-gradient(to right,transparent,var(--line),transparent)}
/* ---- identité de fond des sections : charbon, grille, lavis framboise, lavis violet ----
   Quatre traitements, jamais deux sections voisines pareilles, palette du site uniquement. */
.sec{position:relative;isolation:isolate}
.sec::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
/* bande charbon : la surface du thème, relevée d'un souffle au centre, tenue par deux filets */
.sec-coal{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-coal::before{background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.03),transparent 72%)}
/* noir + grille pointillée de l'accueil */
.sec-grid::before{background-image:var(--dots);opacity:.045}
/* noir + lavis framboise très dilué, entrant par la gauche */
.sec-tint-p::before{background:radial-gradient(75% 62% at 4% 0%,rgba(196,58,89,.13),transparent 64%)}
/* noir + lavis violet très dilué, sortant par la droite */
.sec-tint-v::before{background:radial-gradient(70% 62% at 96% 100%,rgba(168,85,247,.12),transparent 62%)}
/* deux traitements peuvent se superposer : le second passe par ::after */
.sec-grid.sec-tint-p::after,.sec-coal.sec-grid::after{content:'';position:absolute;inset:0;z-index:-1;
  pointer-events:none;background-image:var(--dots);opacity:.045}
.sec-grid.sec-tint-p::before{background:radial-gradient(75% 62% at 4% 0%,rgba(196,58,89,.13),transparent 64%);background-image:none}
.sec-coal.sec-grid::before{background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.03),transparent 72%)}
/* orbe flou, posé quand une section a besoin d'un centre de gravité */
.sec-clip{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.sec-orb{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(130px);
  pointer-events:none}
.sec-orb-p{background:rgba(196,58,89,.13)}
.sec-orb-v{background:rgba(168,85,247,.12)}
/* sur charbon, les cartes de tarif remontent d'un cran pour rester détachées */
.sec-coal .plan{background:var(--surface-2)}
.sec-coal .plan-hi{background:linear-gradient(180deg,var(--primary-wash),transparent 55%),var(--surface-2)}
.sec-coal .panel{background:var(--surface-2)}
/* ==========================================================================
   6. Cadre de capture — barre fine, filet, ombre douce. Un seul composant.
   ========================================================================== */
.frame{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-frame);
  box-shadow:var(--sh-frame);overflow:hidden;
}
.frame-bar{display:flex;align-items:center;gap:8px;height:36px;padding-inline:14px;
  border-bottom:1px solid var(--line);background:var(--surface-3)}
.frame-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16);flex:none}
.frame-bar span{margin-left:8px;font-size:12px;color:var(--fg-3);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-body{position:relative;background:#fff;line-height:0}
.frame-body picture{display:block}
.frame-body img{width:100%;height:auto}
.frame-body video.demo{display:block;width:100%;height:auto;background:#fff}
/* Simulation d'interface : iframe au rapport de sa scène, centrée quand elle
   plafonne (scène étroite, ou cadre plus large que 130 % de la scène). */
.frame-body iframe.sim{display:block;width:100%;height:auto;border:0;margin-inline:auto;background:transparent}
.frame-body:has(iframe.sim){background:#f0f0f1}
/* Fenêtre de widget arrondie : rien derrière ses coins (fond transparent,
   cadre sans fond ni filet), sinon un rectangle clair dépasse aux angles. */
.frame-body:has(iframe.sim-portrait){background:transparent}
.widget-shot .frame:has(iframe.sim){background:transparent;border-color:transparent;box-shadow:none}
/* ==========================================================================
   7. Hero
   ========================================================================== */
.hero{position:relative;padding:var(--s-10) 0 0;isolation:isolate;overflow-x:clip}
@media(min-width:900px){.hero{padding-top:var(--s-16)}}
.hero .h1{max-width:26ch}
.hero .h1{margin:0}
.hero .h1 .hl{font-style:normal;color:var(--primary-text)}
/* surlignage sobre (01/10/2026) : seuls les termes en .hl prennent la couleur */
.h1 .clause{display:block}
.hero .lead{margin-top:var(--s-3)}
.hero-price{margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--fg-3)}
.hero-price b{color:var(--fg);font-weight:700}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin-top:var(--s-4)}
/* ==========================================================================
   8. Sections
   ========================================================================== */
.section{padding:var(--sec-y) 0}
.features{margin-top:var(--s-4);display:grid;gap:0;border-top:1px solid var(--line)}
.features li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;
  padding:var(--s-2) 0;border-bottom:1px solid var(--line-soft)}
.features .ico{margin-top:3px}
.features b{display:block;color:var(--fg);font-size:var(--fs-h4);font-weight:600;letter-spacing:-.005em}
.features span{display:block;margin-top:4px;font-size:var(--fs-sm);color:var(--fg-3);max-width:52ch}
@media(min-width:760px){
  .features{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-8)}
}
/* 8.1 hero sans visuel : la vidéo le suit (allègement du 01/10/2026) */
.hero-solo{padding-bottom:var(--s-10)}
@media(min-width:900px){.hero-solo{padding-bottom:var(--s-12)}}
/* 8.2 vidéo de présentation : affiche + bouton, lecture au clic avec le son.
   Le rapport 16/9 est réservé avant tout chargement : rien ne bouge. */
.vid-sec{padding-block:var(--s-8)}
@media(min-width:900px){.vid-sec{padding-block:var(--s-10)}}
.vid-sec .section-head{margin-bottom:var(--s-4)}
.vid{position:relative;aspect-ratio:16/9;border-radius:var(--r-frame);overflow:hidden;
  background:#000;border:1px solid var(--line);box-shadow:var(--sh-frame)}
.vid-media{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.vid-play{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;
  padding:0;border:0;background:transparent;cursor:pointer;overflow:hidden}
.vid-play[hidden]{display:none}
/* l'affiche floutée d'avance (agrandie : pas de liseré clair sur les bords),
   puis un voile noir lavé de framboise : le bouton se lit sur n'importe quelle image */
.vid-veil{position:absolute;inset:0}
.vid-veil img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:opacity .35s var(--ease)}
.vid-veil::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 80% at 50% 50%,rgba(196,58,89,.16),transparent 72%),rgba(8,4,6,.6);
  transition:opacity .35s var(--ease)}
.vid-cta{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.vid-btn{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--primary);color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 12px 30px rgba(0,0,0,.55),0 0 36px rgba(196,58,89,.28);
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.vid-btn svg{width:36px;height:36px;fill:currentColor;margin-left:5px}
.vid-lbl{font-size:var(--fs-sm);font-weight:700;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
@media(max-width:559px){
  .vid-btn{width:64px;height:64px}
  .vid-btn svg{width:26px;height:26px;margin-left:4px}
  .vid-cta{gap:10px}
  .vid-lbl{font-size:var(--fs-xs)}
}
/* survol et focus : le flou et le voile s'allègent, l'affiche nette transparaît */
.vid-play:hover .vid-veil img,.vid-play:focus-visible .vid-veil img{opacity:.7}
.vid-play:hover .vid-veil::after,.vid-play:focus-visible .vid-veil::after{opacity:.9}
.vid-play:hover .vid-btn{background:var(--primary-hi);transform:scale(1.05)}
.vid-play:focus-visible{outline:none}
.vid-play:focus-visible .vid-btn{outline:3px solid #fff;outline-offset:5px}
@media(prefers-reduced-motion:reduce){
  .vid-veil img,.vid-veil::after,.vid-btn{transition:none}
  .vid-play:hover .vid-btn{transform:none}
}
/* 8.3 fonctions clés : le texte et l'écran qui le montre, en alternance */
.keys{display:grid;gap:var(--s-8)}
@media(min-width:900px){.keys{gap:var(--s-10)}}
.key{display:grid;gap:var(--s-4);align-items:center}
.key-n{display:block;margin-bottom:12px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;color:var(--primary-text)}
.key-text p{margin-top:var(--s-2);color:var(--fg-3);max-width:52ch}
.key-shot{min-width:0}
.key-shot figcaption{margin-top:12px;font-size:var(--fs-xs);line-height:1.55;color:var(--fg-3)}
.key-widget .key-shot figcaption{text-align:center}
@media(min-width:900px){
  .key{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-8)}
  .keys>.key:nth-child(even){grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .keys>.key:nth-child(even) .key-text{order:2}
  .key-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8);align-items:stretch}
}
.key-pair{display:grid;gap:var(--s-10)}
.key-stack{display:flex;flex-direction:column;gap:var(--s-4);height:100%}
.key-stack .key-shot{margin-top:auto}
.key-stack .key-text{order:0!important}
/* sous 700 px : l'état final recadré, lisible, à la place de la simulation */
.key-mobile{display:none}
.key-mobile img{width:100%;height:auto}
.key-mobile.is-portrait{max-width:280px;margin-inline:auto}
@media(max-width:699px){
  .key-shot.has-mobile .key-frame{display:none}
  .key-shot.has-mobile .key-mobile{display:block}
}
.also-title{margin-top:var(--s-10)}
.also{margin-top:var(--s-3)}
/* 8.4 réassurance : ce que nous tenons, et ce que nous ne promettons pas */
.trust{display:grid;gap:var(--s-6)}
.trust-list{margin-top:0}
@media(min-width:900px){.trust.has-panel{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--s-8);align-items:start}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-4)}
.panel h3{margin-bottom:var(--s-2)}
.panel li{position:relative;padding-left:20px;font-size:var(--fs-sm);color:var(--fg-3)}
.panel li+li{margin-top:12px}
.panel li::before{content:'';position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--primary)}
.panel .xs{margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line-soft)}
/* 8.5 tarifs */
.plans{margin-top:var(--s-6);display:grid;gap:var(--s-2)}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.plan-hi{border-color:var(--primary);background:linear-gradient(180deg,var(--primary-wash),transparent 55%),var(--surface)}
.plan-chip{position:absolute;top:var(--s-3);right:var(--s-3);background:var(--primary);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:var(--r-pill);line-height:1.2}
.plan-vol{font-size:var(--fs-sm);font-weight:600;color:var(--fg)}
.plan-amount{display:flex;align-items:baseline;gap:8px}
.plan-amount b{font-size:3rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--fg);
  font-variant-numeric:tabular-nums}
.plan-amount span{font-size:var(--fs-xs);color:var(--fg-3)}
.plan-unit{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);
  padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plan-unit b{font-size:var(--fs-h3);font-weight:700;color:var(--primary-text);font-variant-numeric:tabular-nums}
.plan-unit span{font-size:var(--fs-xs);color:var(--fg-3)}
.plan ul li{position:relative;padding-left:22px;font-size:var(--fs-sm);color:var(--fg-2)}
.plan ul li+li{margin-top:12px}
.plan ul svg{position:absolute;left:0;top:4px;width:14px;height:14px;color:var(--primary-text)}
.plan .btn{margin-top:auto;width:100%;min-height:56px;padding:14px 24px;line-height:1.3;
  text-align:center;text-wrap:balance}
.plan-foot{margin-top:var(--s-4);display:grid;gap:var(--s-2)}
.plan-setup{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px var(--s-3);
  padding:var(--s-3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plan-setup b{font-size:var(--fs-h3);font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}
.plan-setup span{font-size:var(--fs-sm);color:var(--fg-3)}
/* 8.6 FAQ */
.faq{margin-top:var(--s-6);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  min-height:64px;padding:var(--s-2) 0;cursor:pointer;list-style:none;
  color:var(--fg);font-size:var(--fs-h4);font-weight:600;transition:color var(--t-fast) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--primary-text)}
.faq summary svg{width:18px;height:18px;flex:none;color:var(--fg-3);transition:transform var(--t-mid) var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg);color:var(--primary-text)}
.faq .answer{padding:0 0 var(--s-3);max-width:72ch;font-size:var(--fs-sm);color:var(--fg-3)}
/* 8.7 appel à l'action final */
.cta{position:relative;isolation:isolate;padding:var(--s-12) 0;overflow:hidden;text-align:center}
.cta .wrap{position:relative}
.cta .h2{margin-inline:auto;max-width:22ch}
.cta p{margin:var(--s-2) auto 0;max-width:52ch;color:var(--fg-2)}
.cta .btn{margin-top:var(--s-4)}
.cta .xs{margin-top:var(--s-2)}
/* ==========================================================================
   9. Apparition au défilement — un seul dispositif, discret
   ========================================================================== */
.js [data-reveal]{opacity:0;transform:translateY(8px)}
.js [data-reveal].is-in{opacity:1;transform:none;
  transition:opacity 420ms var(--ease),transform 420ms var(--ease);
  transition-delay:var(--d,0ms)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;
    transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* --- règles propres à la page anthem-bot ------------------------------------ */
.hero .h1 .clause{display:block}
@media(min-width:900px){.pg-anthem-bot .plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hero-split{display:grid;gap:var(--s-6);align-items:center}
.hero-split .h1{font-size:clamp(2.125rem,3.6vw,3.5rem);max-width:22ch}
.h1 .hl{font-style:normal;color:var(--primary-text)}
/* à partir de 1100 px, 62/38 : le visuel est vertical, le h1 prend la place
   (5 lignes au plus en 1280 et 1440) */
@media(min-width:1100px){.hero-split{grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:var(--s-8)}.hero-split .h1{max-width:none}}
.widget-shot{max-width:380px;margin-inline:auto}
.widget-shot .frame{border-radius:20px}
.widget-shot img,.widget-shot video{width:100%}
/* Content Lab : fenêtre de navigateur sur l'article publié, cadre sombre et
   lueur framboise ; h1 plus court en colonne (4 à 5 lignes à 1440 px). Sous
   700 px, la fenêtre réduite à 81 % rendait les pastilles illisibles (9 px) et
   repoussait la vidéo d'un écran : la vidéo, juste dessous, montre la même chose. */
.hero-split-cl .h1{font-size:var(--fs-display);max-width:none}
@media(min-width:900px){.hero-split-cl .h1{font-size:clamp(2.125rem,3.6vw,3.5rem)}}
.hero-card{width:100%;max-width:440px}
.hero-card .frame:has(iframe.sim){background:#141016;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-frame),0 0 60px rgba(196,58,89,.22)}
.hero-card .frame-body:has(iframe.sim-portrait){background:#141016}
.hero-card iframe.sim{max-width:none}
@media(max-width:699px){.hero-card{display:none}}

/* --- règles propres à la page plugins ------------------------------------ */
.hub{display:grid;gap:var(--s-3);margin-top:var(--s-8)}
@media(min-width:900px){.hub{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}}
.hub-card{position:relative;display:flex;flex-direction:column;gap:var(--s-3);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s-5) var(--s-4) var(--s-4);
  transition:border-color var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}
.hub-card:hover{border-color:rgba(196,58,89,.55);transform:translateY(-2px)}
.hub-card .ico{width:32px;height:32px}
.hub-card h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.028em;line-height:1.05}
.hub-card .lead{font-size:var(--fs-body);color:var(--fg-2);max-width:40ch}
.hub-list{display:grid;gap:0;border-top:1px solid var(--line);margin-top:var(--s-1)}
.hub-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line-soft);font-size:var(--fs-sm);color:var(--fg-2)}
.hub-list svg{width:16px;height:16px;margin-top:4px;color:var(--primary-text);stroke:currentColor;
  stroke-width:2.25;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hub-price{font-size:var(--fs-sm);color:var(--fg-3)}
.hub-price b{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}
.hub-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:auto;padding-top:var(--s-2)}
/* image clé de chaque carte : l'affiche de la vidéo de présentation */
.hub-shot{display:block;margin:calc(var(--s-5) * -1) calc(var(--s-4) * -1) 0;aspect-ratio:16/9;
  overflow:hidden;border-radius:var(--r-card) var(--r-card) 0 0;background:#000;border-bottom:1px solid var(--line)}
.hub-shot img{width:100%;height:100%;object-fit:cover}
.hub-shot+.ico{display:none}
/* maillage interne en fin de landing : la rubrique et un ou deux articles */
.liens{padding-block:var(--s-8)}
.liens ul{margin-top:var(--s-2);display:grid;gap:4px}
.liens .link{color:var(--fg-2)}

/* ==========================================================================
   Échelle de lecture des pages Plugins (02/10/2026) : corps 17 → 19 px,
   h2 31 → 54 px, h3 20 → 26 px, petits libellés 15 à 16 px. Portée : .pg
   seulement (contenu des trois pages), l'en-tête et le pied ne bougent pas.
   ========================================================================== */
.pg{
  --fs-h2:clamp(1.9375rem,1.1rem + 3vw,3.375rem);
  --fs-h3:clamp(1.25rem,.95rem + 1vw,1.625rem);
  --fs-h4:clamp(1.125rem,1rem + .35vw,1.25rem);
  --fs-lead:clamp(1.0625rem,.95rem + .55vw,1.25rem);
  --fs-copy:clamp(1.0625rem,.98rem + .45vw,1.1875rem);
  font-size:var(--fs-copy);
}
.pg .key-text p,.pg .features span,.pg .faq .answer,.pg .panel li,.pg .plan ul li,
.pg .hub-list li,.pg .hub-card .lead,.pg .plan-setup span,.pg .liens .link{font-size:var(--fs-copy);line-height:1.65}
.pg .key-text p{max-width:60ch}
.pg .features span{max-width:60ch}
.pg .key-shot figcaption,.pg .hero-price,.pg .plan-amount span,.pg .plan-unit span,.pg .hub-price,.pg .key-n{font-size:.96875rem}
.pg .h2+.lead,.pg .section-head .lead{margin-top:var(--s-3)}
.pg .section-head{margin-bottom:var(--s-6)}
.pg .key-text .h3{margin-bottom:var(--s-1)}
.pg .xs{font-size:.96875rem}

/* mots à l'accent dans un titre de fonction clé */
.pg .h3 .hl{color:var(--primary-text)}