/* ═══════════════════════════════════════════════════════════════════════════
   PLUME UI - la langue visuelle de la page d'accueil, rendue reutilisable.

   POURQUOI. templates/landing_v2.html porte une identite que brand.css n'a
   pas : Garet/Montserrat au lieu de Fraunces/DM Sans, le bleu #0051D5 au lieu
   de #1A56DB, des boutons en verre laque, un bouton dore, du verre depoli,
   des vignettes de produit et du pixel art. Les autres pages marketing
   peignent encore l'ancien systeme. Ce fichier extrait la nouvelle langue,
   VALEUR POUR VALEUR, pour qu'une page l'adopte en deux lignes au lieu d'une
   transcription.

   COMMENT L'UTILISER.
     <link rel="stylesheet" href="/static/css/fonts.css">
     <link rel="stylesheet" href="/static/css/plume-ui.css">
     <body class="plume-ui">              (ou sur une seule section)

   LA PORTEE EST LE CONTRAT. Tout est ecrit sous `.plume-ui`. Deux
   consequences voulues :
     1. rien ne fuit. Une page peut adopter la nouvelle langue sur un bloc et
        garder brand.css partout ailleurs ;
     2. la specificite (0,2,0) bat celle de brand.css (0,1,0), donc
        `.btn-primary` devient le bouton laque sans un seul `!important`.

   CE FICHIER NE TOUCHE PAS A LA PAGE D'ACCUEIL. landing_v2.html garde son
   bloc <style> ; ce fichier en est la copie utilisable ailleurs. Quand une
   valeur change la-bas, elle change ici, dans le meme commit.

   Reference visuelle : /static/styleguide.html
   Icones : /static/icons/plume-sprite.svg (47 symboles)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Jetons ──────────────────────────────────────────────────────────── */
.plume-ui{
  /* Bleu de marque. Celui du produit (#0051D5), pas celui de brand.css. */
  --blue-deep:#00194D;
  --blue-accent:#003EA8;
  --blue-primary:#0051D5;
  --blue-container:#316BF3;
  --blue-dim:#DBE1FF;

  /* Surfaces */
  --base:#F7F9FB;
  --surface:#F2F4F6;
  --elevated:#FFFFFF;

  /* Textes. --ink est l'encre des vignettes, plus bleutee que --text-primary,
     et --label le gris des intitules en capitales. */
  --text-primary:#191C1E;
  --text-secondary:#505F76;
  --text-muted:#717783;
  --ink:#0F2547;
  --label:#8A99B3;

  /* Etats. L'ambre est reserve aux lacunes et aux occasions, nulle part
     ailleurs ; le vert ne signale jamais un classement, seulement une
     verification. */
  --ok:#1C7A4C;
  --ok-bg:#DFF5E9;
  --warn:#8A5B0B;
  --warn-bg:#FFF1D6;
  --danger:#D93B3B;
  --danger-bg:#FDEAEA;

  /* Verre */
  --glass-line:rgba(255,255,255,.75);

  /* Fontes. Garet est commerciale et absente du depot : la pile retombe sur
     Montserrat, qui est bien la. */
  --font-display:'Garet','Montserrat',system-ui,-apple-system,sans-serif;
  --font-body:'Montserrat',system-ui,-apple-system,sans-serif;
  --font-code:'DM Mono',ui-monospace,monospace;

  /* Rayons */
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --radius-pill:999px;

  /* Ombres. Bleutees, jamais noires ni grises. Trois etages, jamais melanges :
     le verre ne porte presque rien, le panneau principal se pose dessus, le
     satellite flotte au-dessus du principal. */
  --sh-glass:0 2px 10px rgba(30,90,180,.05);
  --sh-panel:0 8px 28px rgba(30,90,180,.08);
  --sh-float:0 14px 35px rgba(30,90,180,.12);
  --sh-focal:0 18px 44px rgba(30,90,180,.18);
  --sh-deep:0 24px 60px rgba(0,20,60,.35);

  /* La taille d'un accent decoratif : un par carte, environ 10% de sa
     surface. Au-dela, l'illustration devient le sujet. */
  --illu-size:52px;

  font-family:var(--font-body);
  color:var(--text-primary);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ─── 2. Base ────────────────────────────────────────────────────────────── */
.plume-ui h1,.plume-ui h2,.plume-ui h3,.plume-ui h4,.plume-ui h5{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;margin:0}
.plume-ui a{text-decoration:none;color:inherit}
.plume-ui img{max-width:100%;display:block}
.plume-ui .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.plume-ui .wrap-wide{max-width:1384px;margin:0 auto;padding:0 32px}
.plume-ui .section{padding:88px 0}
.plume-ui .section-head{text-align:center;max-width:640px;margin:0 auto 52px}
/* Le chapeau de section : il porte le titre, donc il est en fonte
   d'affichage et suit la largeur de l'ecran plutot qu'un palier. */
.plume-ui .kicker{color:var(--text-primary);font-family:var(--font-display);
  font-weight:700;font-size:clamp(1.05rem,2.4vw,1.7rem);letter-spacing:-.02em;
  margin-bottom:10px}
.plume-ui .section-head p{color:var(--text-secondary);font-size:1.05rem}
.plume-ui .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ─── 3. Boutons ─────────────────────────────────────────────────────────── */
/* Six variantes, une seule base. Le rayon est une pastille pleine : c'est ce
   qui distingue le bouton de la page d'accueil de celui de brand.css. */
.plume-ui .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--radius-pill);font-family:var(--font-body);
  font-weight:600;font-size:.95rem;border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.plume-ui .btn:hover{transform:translateY(-1px)}
.plume-ui .btn svg{width:18px;height:18px;flex-shrink:0}

/* Bleu laque : un reflet radial en haut a gauche, un degrade a 135 degres, un
   halo, deux aretes internes. La lueur suit le contour et POSE le bouton ;
   une ombre portee tomberait sous lui et le decollerait. */
.plume-ui .btn-primary{
  color:#fff;font-weight:600;
  border:1px solid rgba(100,185,255,.35);
  background:
    radial-gradient(circle at 8% 0%,rgba(120,200,255,.55),transparent 38%),
    linear-gradient(135deg,#3a8eff 0%,#1268ff 42%,#0052f5 100%);
  box-shadow:
    0 0 8px rgba(0,105,255,.8),
    0 0 20px rgba(0,105,255,.45),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,35,150,.3);
  text-shadow:0 1px 3px rgba(0,40,140,.7)}

/* Dore : exactement la meme construction, transposee. Le texte passe en brun
   fonce, du blanc sur ce jaune mesure 1,3:1. C'est le bouton de l'action
   principale ; il n'y en a qu'un par ecran. */
.plume-ui .btn-gold{
  color:#3B2A00;font-weight:700;
  border:1px solid rgba(255,228,150,.7);
  background:
    radial-gradient(circle at 8% 0%,rgba(255,246,205,.8),transparent 40%),
    linear-gradient(135deg,#FFDD70 0%,#FFC53D 42%,#FFA50A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(150,95,0,.22),
    0 0 0 1px rgba(255,214,110,1),
    0 0 11px rgba(255,196,60,.53);
  text-shadow:none}
.plume-ui .btn-gold:hover{filter:brightness(1.04)}

/* Verre sur photo. `background:transparent` ne refracte rien : il laisse voir
   le fond tel quel, ce qui se lit comme un contour vide. C'est le
   `backdrop-filter` qui RE-ECHANTILLONNE l'image derriere le bouton. La
   luminosite baisse, elle ne monte pas : le texte est blanc, donc ce qui est
   derriere doit s'assombrir pour le porter. */
.plume-ui .btn-ghost-light,.plume-ui .btn-ghost-light .icon{color:#fff}
.plume-ui .btn-ghost-light{
  background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.10));
  border-color:rgba(255,255,255,.62);
  backdrop-filter:blur(14px) saturate(180%) brightness(.9);
  -webkit-backdrop-filter:blur(14px) saturate(180%) brightness(.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(255,255,255,.12),
    0 8px 26px rgba(0,20,60,.24)}
.plume-ui .btn-ghost-dark{background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(6px)}
.plume-ui .btn-solid-light{background:#fff;color:var(--blue-accent)}

/* Le bouton neutre : ni lueur ni ombre de texte. L'ombre bleue du bouton
   laque survivait a toutes les surcharges en ligne et bavait sur le mot. */
.plume-ui .btn-plain{background:var(--surface);color:#0B1220;border:1px solid #E1E6ED;
  box-shadow:none;text-shadow:none}
.plume-ui .btn-plain:hover{background:#fff;border-color:#CFD8E6}

.plume-ui .btn-block{width:100%}
.plume-ui .btn-sm{padding:9px 16px;font-size:.82rem}
/* Les deux boutons d'un heros sont dimensionnes par la MEME propriete. Un
   bouton regle par sa hauteur a cote d'un bouton regle par son rembourrage :
   les deux divergent des qu'on touche l'un. */
.plume-ui .btn-hero{height:57px;padding:0 35px;font-size:.95rem;border-radius:25px}
.plume-ui .btn-hero svg{width:21px;height:21px}

/* ─── 4. Icones ──────────────────────────────────────────────────────────── */
/* Un seul jeu, une seule grille, un seul poids : Phosphor plein sur 256.
   Dimensionne en em pour suivre le texte qui le porte, peint en currentColor
   pour n'avoir besoin d'aucun reglage par contexte. Le poids visuel vient de
   la forme, jamais d'une epaisseur de trait : il n'y a pas de trait. */
.plume-ui .icon{width:1em;height:1em;flex-shrink:0;fill:currentColor;stroke:none;
  vertical-align:-.14em}
/* Dix symboles du sprite sont dessines sur une grille de 24 et attendent un
   TRAIT, pas un remplissage : i-globe, i-type, i-alert, i-help, i-clock,
   i-shield, i-layers, i-chart, i-download, i-send. Peints avec .icon ils
   deviennent des taches pleines. */
.plume-ui .icon-stroke{width:1em;height:1em;flex-shrink:0;fill:none;
  stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-.14em}
.plume-ui .icon-16{width:16px;height:16px}
.plume-ui .icon-22{width:22px;height:22px}
.plume-ui .icon-26{width:26px;height:26px}
.plume-ui .icon-blue{color:var(--blue-primary)}
.plume-ui .icon-ok{color:#25A366}
.plume-ui .icon-warn{color:#DD9B2A}
.plume-ui .icon-mut{color:#A4B3C9}

/* ─── 5. Heros sombre ────────────────────────────────────────────────────── */
/* Trois couches, toujours dans cet ordre : la photo, le voile de lisibilite
   PAR-DESSUS elle, puis la bande claire qui termine la section. La barre de
   navigation passe en absolu et part avec le heros ; en fixe elle finirait
   posee sur les bandes blanches qui defilent dessous, illisible. */
.plume-ui .hero-dark{position:relative;overflow:hidden;box-sizing:border-box;
  display:flex;align-items:center;background:#0A2A6E;padding:104px 0 200px}
.plume-ui .hero-photo{position:absolute;inset:0;z-index:0;
  background:var(--hero-img,none) 88% 134% / 118% auto no-repeat}
.plume-ui .hero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,15,48,.62) 0%,rgba(0,20,60,.32) 28%,
    rgba(0,20,60,.08) 52%,rgba(0,20,60,0) 70%)}
/* La section claire chevauche le heros : bord haut plat, deux coins arrondis. */
.plume-ui .hero-cut{position:absolute;left:0;right:0;bottom:0;height:180px;z-index:2;
  background:var(--base);border-radius:47px 47px 0 0}
.plume-ui .hero-inner{position:relative;z-index:3}
.plume-ui .hero-dark h1{color:#fff;line-height:1.32;
  text-shadow:0 4px 24px rgba(0,10,40,.5);text-wrap:balance}
.plume-ui .hero-sub{color:#fff;font-size:1.13rem;max-width:58ch;
  text-shadow:0 2px 14px rgba(0,10,40,.55)}
.plume-ui .hero-note{color:#fff;font-size:.85rem;display:flex;align-items:center;gap:6px;
  text-shadow:0 2px 10px rgba(0,10,40,.6)}
.plume-ui .hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* La pastille d'audience : elle dit A QUI la page s'adresse avant de dire ce
   qu'elle vend. */
.plume-ui .eyebrow{display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px 7px 13px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(7px) saturate(140%);
  -webkit-backdrop-filter:blur(7px) saturate(140%);
  color:#fff;font-size:.62rem;font-weight:600;text-shadow:0 2px 10px rgba(0,10,40,.55)}

/* Le surlignage dore du titre : le degrade du bouton, mot pour mot, pose SOUS
   les lettres. `box-decoration-break:clone` donne sa pastille complete a
   chaque ligne ; sans lui la seconde arrive sans arrondi ni rembourrage. */
.plume-ui .accent{
  color:#3B2A00;-webkit-text-fill-color:#3B2A00;
  background-image:
    radial-gradient(circle at 8% 0%,rgba(255,246,205,.8),transparent 40%),
    linear-gradient(135deg,#FFDD70 0%,#FFC53D 42%,#FFA50A 100%);
  background-clip:border-box;-webkit-background-clip:border-box;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:.04em .2em;border-radius:.16em;filter:none;text-shadow:none}

/* Les pastilles de marque, dimensionnees en em pour rester solidaires du
   titre quelle que soit sa taille. Le leger chevauchement est ce qui les lit
   comme UN groupe plutot que comme des logos alignes. */
.plume-ui .brand-dot{display:inline-flex;align-items:center;justify-content:center;
  width:.95em;height:.95em;border-radius:50%;background:#fff;vertical-align:-.04em;
  flex-shrink:0;box-shadow:0 3px 12px rgba(0,15,50,.34),0 0 0 1px rgba(255,255,255,.55)}
.plume-ui .brand-dot > svg{width:60%;height:60%;display:block}
.plume-ui .brand-row{display:inline-flex;align-items:center;vertical-align:-.04em}
.plume-ui .brand-row .brand-dot + .brand-dot{margin-left:-.17em}

/* La barre de navigation posee sur le heros, EXACTEMENT celle de la page
   d'accueil. Le balisage vient du partiel partage ; ce bloc ne fournit que
   l'habillage.

   Deux facons de l'appeler, une seule recette :
     - `.nav-on-dark` sur un conteneur qui enveloppe la barre ;
     - la classe sur <body>, quand la barre vient d'un partiel auquel la page
       ne peut pas ajouter de classe - c'est le cas de tout ce qui inclut
       partials/header.html.
   Une page qui l'active doit aussi remettre --nav-footprint a zero : brand.css
   reserve 92px sous la barre flottante, et cette bande deviendrait un bandeau
   clair au-dessus du heros. */
.plume-ui .nav-on-dark,
.plume-ui.nav-on-dark header{position:absolute;top:22px;left:0;right:0;z-index:50;
  padding:0 clamp(16px,3vw,40px)}
.plume-ui .nav-on-dark nav,
.plume-ui.nav-on-dark header nav{
  position:static;transform:none;width:auto;max-width:1600px;height:auto;margin:0 auto;
  padding:12px 14px 12px 22px;gap:24px;border-radius:14px;
  border:1px solid rgba(190,225,255,.32);
  background:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.025) 100%);
  backdrop-filter:blur(18px) brightness(1.1) saturate(105%);
  -webkit-backdrop-filter:blur(18px) brightness(1.1) saturate(105%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(255,255,255,.07),
    0 8px 24px rgba(0,25,90,.14)}
.plume-ui .nav-on-dark .nav-logo,.plume-ui .nav-on-dark .nav-logo:hover,
.plume-ui.nav-on-dark header .nav-logo,
.plume-ui.nav-on-dark header .nav-logo:hover{color:#fff}
.plume-ui .nav-on-dark .nav-logo,
.plume-ui.nav-on-dark header .nav-logo{font-size:1.15rem}
.plume-ui .nav-on-dark .nav-links,
.plume-ui.nav-on-dark header .nav-links{gap:6px}
.plume-ui .nav-on-dark .nav-link-plain,.plume-ui .nav-on-dark .nav-dropdown-btn,
.plume-ui.nav-on-dark header .nav-link-plain,
.plume-ui.nav-on-dark header .nav-dropdown-btn{
  color:rgba(255,255,255,.86);font-size:.92rem;font-weight:500}
.plume-ui .nav-on-dark .nav-link-plain:hover,
.plume-ui .nav-on-dark .nav-dropdown-btn:hover,
.plume-ui.nav-on-dark header .nav-link-plain:hover,
.plume-ui.nav-on-dark header .nav-dropdown-btn:hover,
.plume-ui.nav-on-dark header .nav-dropdown-btn.open{color:#fff;background:rgba(255,255,255,.14)}
.plume-ui .nav-on-dark .burger span,
.plume-ui.nav-on-dark header .burger span{background:#fff}
.plume-ui.nav-on-dark header .lang-btn{color:rgba(255,255,255,.72)}
.plume-ui.nav-on-dark header .lang-btn:hover:not(.active){color:#fff}
.plume-ui.nav-on-dark header .lang-btn.active{color:#fff;background:rgba(255,255,255,.20)}
/* Le bouton de la barre porte le meme or que celui du heros : c'est le meme
   geste, il ne doit pas changer de couleur selon l'endroit. Une seule regle
   couvre les deux etats - hors ligne « Commencer », connecte « Tableau de
   bord » - car les deux portent .btn-primary.btn-nav. */
.plume-ui.nav-on-dark header .btn.btn-primary,
.plume-ui.nav-on-dark header .btn.btn-nav{
  color:#3B2A00;
  border:1px solid rgba(255,228,150,.7);
  background:
    radial-gradient(circle at 8% 0%,rgba(255,246,205,.8),transparent 40%),
    linear-gradient(135deg,#FFDD70 0%,#FFC53D 42%,#FFA50A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(150,95,0,.22),
    0 0 0 1px rgba(255,214,110,1),
    0 0 11px rgba(255,196,60,.53);
  border-radius:999px;padding:10px 20px;font-size:.88rem;font-weight:700;
  text-shadow:none}
.plume-ui.nav-on-dark header .btn.btn-primary:hover,
.plume-ui.nav-on-dark header .btn.btn-nav:hover{
  color:#3B2A00;filter:brightness(1.05);transform:translateY(-1px)}
/* Les menus deroulants restent clairs : ils s'ouvrent sur le contenu, pas sur
   le bleu du heros. */
.plume-ui .nav-on-dark .nav-dropdown a,
.plume-ui.nav-on-dark header .nav-dropdown a{color:var(--text-primary)}

/* ─── 6. Verre ───────────────────────────────────────────────────────────── */
.plume-ui .glass-card{position:relative;overflow:hidden;
  background:rgba(255,255,255,.21);
  backdrop-filter:blur(9px) saturate(160%);
  -webkit-backdrop-filter:blur(9px) saturate(160%);
  border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-lg);
  box-shadow:var(--sh-deep),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(255,255,255,.1),
    inset 0 0 40px 6px rgba(255,255,255,.06)}
.plume-ui .glass-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}
.plume-ui .glass-card::after{content:'';position:absolute;top:0;left:0;width:1px;height:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.8),transparent,rgba(255,255,255,.3))}

/* Le rebord. Un vrai verre ne floute pas uniformement : le bord devie et
   concentre la lumiere bien plus que le centre, donc il echantillonne le fond
   avec D'AUTRES reglages que le corps. C'est une refraction calculee sur
   l'image du fond, pas un degrade peint par-dessus. Les deux masques se
   SOUSTRAIENT ; additionnes, la couche couvrirait toute la carte. */
.plume-ui .glass-rim{position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:inherit;padding:15px;
  backdrop-filter:blur(3px) saturate(240%) brightness(1.16);
  -webkit-backdrop-filter:blur(3px) saturate(240%) brightness(1.16);
  mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  mask-clip:content-box,border-box;mask-composite:exclude;
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  -webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;
  box-shadow:inset 1px 1px 0 rgba(168,236,255,.55),
    inset -1px -1px 0 rgba(255,192,236,.34)}
/* La lumiere : reflets speculaires et caustiques. En mode ecran ils AJOUTENT
   de la lumiere au lieu de peindre du blanc par-dessus. */
.plume-ui .glass-spec{position:absolute;inset:0;z-index:5;pointer-events:none;
  border-radius:inherit;mix-blend-mode:screen;
  background:
    radial-gradient(120% 78% at 10% -12%,rgba(255,255,255,.30),transparent 46%),
    radial-gradient(66% 46% at 88% 6%,rgba(150,226,255,.20),transparent 62%),
    radial-gradient(52% 40% at 76% 104%,rgba(255,204,236,.13),transparent 64%),
    linear-gradient(112deg,transparent 33%,rgba(255,255,255,.10) 46%,transparent 57%);
  animation:pl-caustic 17s ease-in-out infinite}

/* ─── 7. Cartes ──────────────────────────────────────────────────────────── */
/* La carte exterieure EST le verre, pas un objet : elle ne porte presque pas
   d'ombre. La profondeur appartient aux panneaux qui flottent dedans. */
.plume-ui .card{position:relative;min-width:0;border-radius:20px;padding:18px;
  display:flex;flex-direction:column;gap:11px;
  background:rgba(255,255,255,.52);
  backdrop-filter:blur(20px) saturate(118%);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--sh-glass),inset 0 1px 0 var(--glass-line)}
/* La derniere carte d'une sequence : verre plus chaud, elevation bleue. */
.plume-ui .card-payoff{background:rgba(255,255,255,.62);
  border-color:rgba(190,220,255,.95);
  box-shadow:0 10px 40px rgba(0,81,213,.16),inset 0 1px 0 var(--glass-line)}
.plume-ui .card-head{display:flex;align-items:flex-start;gap:11px;position:relative;z-index:3;
  padding-right:calc(var(--illu-size) + 4px)}
.plume-ui .card-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:var(--blue-primary);color:#fff;font-family:var(--font-code);font-weight:600;
  font-size:.82rem;display:flex;align-items:center;justify-content:center}
.plume-ui .card-title{font-family:var(--font-display);font-weight:700;font-size:1.12rem;
  letter-spacing:-.02em;color:#080C12;margin:0 0 6px;text-wrap:balance}
.plume-ui .card-desc{color:var(--text-secondary);font-size:.82rem;line-height:1.4}

/* Carte blanche ordinaire, pour une page qui n'a pas de fond a laisser voir. */
.plume-ui .card-solid{position:relative;display:flex;flex-direction:column;
  padding:26px 24px 24px;border-radius:22px;background:#fff;border:1px solid #E3EAF4;
  box-shadow:0 6px 24px rgba(20,45,90,.06)}
.plume-ui .card-solid.featured{border-color:#A6CBFF;
  box-shadow:0 0 0 1px rgba(59,130,246,.16),0 16px 42px rgba(19,79,178,.16)}

/* ─── 8. Panneaux de vignette ────────────────────────────────────────────── */
/* Trois etages, jamais melanges. Un satellite chevauche le panneau du dessus
   par une marge negative, et ce panneau lui RESERVE du rembourrage en bas :
   un satellite doit toujours atterrir sur du vide, jamais sur du texte. */
.plume-ui .vig{position:relative;display:flex;flex-direction:column}
.plume-ui .vp{background:rgba(255,255,255,.94);border:1px solid rgba(224,232,244,.9);
  border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:7px;
  position:relative}
.plume-ui .vp.main{background:#fff;box-shadow:var(--sh-panel);z-index:1;padding-bottom:20px}
/* UN panneau par carte est la surface focale : plus clair, plus decolle du
   verre que tous les autres. Il porte le chiffre dont la carte parle. */
.plume-ui .vp.hi{background:#fff;border-color:rgba(255,255,255,.95);
  box-shadow:var(--sh-focal),0 0 0 1px rgba(255,255,255,.6) inset;z-index:3}
.plume-ui .vp.sat{box-shadow:var(--sh-float);z-index:2}
.plume-ui .vp.sat.r{align-self:flex-end;width:74%;margin-top:-14px;margin-right:-6px;
  transform:rotate(-.7deg);padding-bottom:22px}
.plume-ui .vp.sat.l{align-self:flex-start;width:86%;margin-top:-13px;margin-left:-6px;
  transform:rotate(.5deg)}
.plume-ui .rowset{display:flex;flex-direction:column;gap:5px}
.plume-ui .hr{height:1px;background:#EDF1F7;margin:1px 0}

/* ─── 9. Hierarchie de donnees ───────────────────────────────────────────── */
/* intitule < valeur < chiffre heros. Trois crans, jamais quatre. */
.plume-ui .lbl{display:flex;align-items:center;gap:5px;font-size:.55rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--label)}
.plume-ui .val{color:var(--ink);font-weight:600;font-size:.76rem;line-height:1.35}
.plume-ui .val.focal{font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.plume-ui .hero-n{font-family:var(--font-code);font-variant-numeric:tabular-nums;
  font-size:2.3rem;font-weight:600;color:var(--ink);line-height:.95;letter-spacing:-.02em}
.plume-ui .sub{color:var(--text-secondary);font-size:.66rem;line-height:1.45}
.plume-ui .meta{font-size:.6rem;color:var(--label);white-space:nowrap}
.plume-ui .num{font-family:var(--font-code);font-variant-numeric:tabular-nums}
.plume-ui .pl-row{display:flex;align-items:center;gap:8px}
.plume-ui .fill{flex:1;min-width:0}
.plume-ui .trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Champs */
.plume-ui .fld{display:flex;align-items:center;gap:7px;background:#F7F9FC;
  border:1px solid #E4EAF3;border-radius:9px;padding:7px 10px;color:var(--ink);
  font-size:.71rem;font-weight:500}
.plume-ui .fld.focal{font-size:.85rem;font-weight:600;padding:10px 12px;background:#fff;
  border-color:#D8E2F1}
.plume-ui .fld2{display:grid;grid-template-columns:1fr 1fr;gap:7px}

/* Pastilles d'etat. La couleur est semantique, jamais decorative :
   bleu = actif, vert = verifie, ambre = lacune, gris = neutre ou en attente. */
.plume-ui .pill{font-size:.56rem;font-weight:700;padding:3px 8px;
  border-radius:var(--radius-pill);white-space:nowrap;background:#EEF2F8;color:#61708A}
.plume-ui .pill.on{background:var(--blue-primary);color:#fff}
.plume-ui .pill.ok{background:var(--ok-bg);color:var(--ok)}
.plume-ui .pill.warn{background:var(--warn-bg);color:var(--warn)}
.plume-ui .pill.t1{background:var(--blue-dim);color:var(--blue-primary)}
.plume-ui .chip{background:#F4F7FC;border:1px solid #E4EAF3;
  border-radius:var(--radius-pill);padding:4px 9px;font-size:.6rem;
  color:var(--text-secondary)}
.plume-ui .chips{display:flex;flex-wrap:wrap;gap:5px}

/* Jauges */
.plume-ui .bar{height:5px;border-radius:var(--radius-pill);background:#E7EDF6;
  overflow:hidden}
.plume-ui .bar > i{display:block;height:100%;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--blue-container),var(--blue-primary))}
.plume-ui .barv{font-family:var(--font-code);font-variant-numeric:tabular-nums;
  font-size:.6rem;color:var(--text-secondary);min-width:26px;text-align:right}

/* Anneau de score. La valeur vient de data-score, le remplissage de --p. */
.plume-ui .ring{width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--blue-primary) var(--p,70%),#E7EDF6 0);
  display:flex;align-items:center;justify-content:center}
.plume-ui .ring::after{content:attr(data-score);width:43px;height:43px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-code);font-size:.95rem;font-weight:600;color:var(--ink)}

/* Rang. Le badge est NEUTRE : le vert est reserve a la verification, et une
   position dans les resultats ne verifie rien. */
.plume-ui .rk{width:15px;height:15px;border-radius:5px;background:#EEF2F8;color:#61708A;
  font-family:var(--font-code);font-size:.5rem;font-weight:600;display:flex;
  align-items:center;justify-content:center;flex-shrink:0}

/* Rangee d'actions */
.plume-ui .acts{display:flex;gap:8px;position:relative;z-index:2;margin-top:auto}
.plume-ui .act{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  border-radius:9px;padding:9px;font-size:.63rem;font-weight:600;background:#fff;
  border:1px solid #E4EAF3;color:var(--text-secondary)}
.plume-ui .act.pri{background:var(--blue-primary);border-color:var(--blue-primary);
  color:#fff;box-shadow:0 6px 16px rgba(0,81,213,.25)}

/* ─── 10. Bandeaux et badges ─────────────────────────────────────────────── */
.plume-ui .banner{background:linear-gradient(135deg,var(--blue-primary),var(--blue-accent));
  border-radius:var(--radius-lg);padding:32px 40px;display:flex;align-items:center;
  justify-content:space-between;gap:24px;flex-wrap:wrap;color:#fff}
.plume-ui .banner-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;
  margin-bottom:4px}
.plume-ui .banner-sub{color:rgba(255,255,255,.8);font-size:.88rem}
/* Le badge deborde du bord haut de sa carte, donc il est ancre sur un
   conteneur qui ne coupe RIEN. Une carte qui masque son interieur ne peut pas
   le porter elle-meme. */
.plume-ui .badge-pop{position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:7px 15px;
  border-radius:var(--radius-pill);background:var(--blue-primary);color:#fff;
  font-size:.74rem;font-weight:700;box-shadow:0 8px 20px rgba(0,60,180,.24)}
.plume-ui .badge-reco{position:absolute;top:-16px;right:18px;z-index:4;display:flex;
  align-items:center;gap:6px;padding:7px 13px;border-radius:16px;
  background:rgba(255,255,255,.96);color:#1D5EE8;font-size:.74rem;font-weight:700;
  box-shadow:0 12px 30px rgba(20,90,220,.18),0 2px 10px rgba(20,90,220,.10)}
.plume-ui .vs{width:72px;height:72px;border-radius:var(--radius-pill);display:grid;
  place-items:center;background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.88);color:#2568F5;font-family:var(--font-display);
  font-size:1.22rem;font-weight:800;letter-spacing:.02em;
  box-shadow:0 16px 34px rgba(61,103,180,.14),inset 0 1px 0 rgba(255,255,255,.9)}

/* En-tetes de carte comparative. Trois couches, pas une rampe : une source
   lumineuse en haut a gauche, une nappe plus sombre au milieu, la diagonale
   dessous. Cet ordre est ce qui garde le centre plus profond que le pourtour,
   et c'est toute la difference entre une surface eclairee et un aplat. */
.plume-ui .head-blue{
  background:
    radial-gradient(circle at 18% 0%,rgba(125,210,255,.72) 0%,rgba(64,148,255,.28) 28%,transparent 52%),
    radial-gradient(circle at 50% 58%,#0748D8 0%,#0756EB 42%,transparent 72%),
    linear-gradient(135deg,#39A6FF 0%,#0965F3 24%,#0647D7 58%,#0D5EEA 82%,#1589FF 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),inset 1px 0 0 rgba(116,219,255,.42),
    inset -1px 0 0 rgba(98,189,255,.36);color:#fff}
.plume-ui .head-grey{
  background:
    radial-gradient(circle at 18% 0%,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 28%,transparent 52%),
    radial-gradient(circle at 50% 55%,rgba(76,93,119,.42) 0%,transparent 68%),
    linear-gradient(135deg,#B8C5D6 0%,#8999AF 42%,#71839E 62%,#A9B8CB 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),inset 1px 0 0 rgba(255,255,255,.24),
    inset -1px 0 0 rgba(255,255,255,.18);color:#fff}
/* Lueur de contour. Le lisere suit le rayon de la carte, le halo se pose
   dehors ; un reflet interne serait peint sous les enfants et jamais vu. */
.plume-ui .glow-blue{border:1px solid rgba(188,235,255,.88);
  box-shadow:0 0 18px rgba(61,165,255,.44),0 0 48px rgba(19,112,255,.24),
    0 20px 44px rgba(19,79,178,.18)}
.plume-ui .glow-grey{border:1px solid rgba(255,255,255,.72);
  box-shadow:0 0 28px rgba(125,164,215,.22),0 18px 42px rgba(49,75,112,.16)}

/* ─── 11. Prix et tableau ────────────────────────────────────────────────── */
.plume-ui .price{display:flex;align-items:baseline;gap:5px;margin:0}
.plume-ui .price b{font-family:var(--font-display);font-size:2.9rem;font-weight:800;
  letter-spacing:-.045em;line-height:1;color:var(--ink)}
.plume-ui .price em{font-style:normal;font-size:1.2rem;font-weight:700;color:var(--ink)}
.plume-ui .price span{font-size:.92rem;color:var(--text-muted);margin-left:3px}

/* La colonne des intitules tient en place quand le tableau defile : une coche
   sans sa ligne ne veut rien dire. Et la croix est ROUGE : en gris elle se lit
   "sans objet" et non "vous ne l'avez pas". */
.plume-ui .ptable-wrap{position:relative;z-index:1;border:1px solid #E2E9F3;
  border-radius:22px;background:#fff;overflow-x:auto;
  box-shadow:0 6px 26px rgba(20,45,90,.06)}
.plume-ui .ptable{width:100%;min-width:760px;border-collapse:collapse;font-size:.9rem;
  text-align:center}
.plume-ui .ptable th,.plume-ui .ptable td{padding:13px 16px;vertical-align:middle;
  border-bottom:1px solid #EBF0F7}
.plume-ui .ptable tbody tr:last-child th,
.plume-ui .ptable tbody tr:last-child td{border-bottom:0}
.plume-ui .pt-feature{position:sticky;left:0;z-index:2;background:#fff;text-align:left;
  font-weight:600;color:var(--text-secondary);min-width:262px}
.plume-ui .pt-name{display:block;font-family:var(--font-display);font-weight:800;
  font-size:1.02rem;letter-spacing:-.02em;color:var(--ink)}
.plume-ui .ptable .hi{background:#F3F8FF}
.plume-ui .pt-group th,.plume-ui .pt-group td{padding:11px 16px;background:#F6FAFE}
.plume-ui .pt-group th{text-align:left;color:var(--text-muted);font-size:.72rem;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.plume-ui .pt-group .hi{background:#E9F2FD}
.plume-ui .pt-val{font-family:var(--font-display);font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.plume-ui .pt-mark{width:26px;height:26px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center}
.plume-ui .pt-mark.yes{background:#E1F6EA;color:#0E8B4E}
.plume-ui .pt-mark.no{background:var(--danger-bg);color:var(--danger)}

/* ─── 12. Pixel art ──────────────────────────────────────────────────────── */
/* Le ratio est tenu deliberement : environ 90% d'interface reelle, 10% de
   pixel art. UN accent par carte, jamais deux. Un accent qui sort de sa carte
   se lit comme un defaut d'affichage, pas comme une composition : la variete
   vient de la position DANS la zone sure, jamais d'un debordement.
   `image-rendering:pixelated` est ce qui garde les aretes nettes quand le
   navigateur agrandit un PNG de quelques dizaines de pixels. */
.plume-ui .px{image-rendering:pixelated;
  filter:drop-shadow(0 5px 10px rgba(30,90,180,.18))}
.plume-ui .px-flat{image-rendering:pixelated;filter:none}
.plume-ui .px-24{width:26px;height:26px;flex-shrink:0}
.plume-ui .px-76{width:76px;height:76px;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 6px 12px rgba(10,40,100,.26))}
.plume-ui .px-tall{width:auto;max-width:100%;max-height:218px;
  filter:drop-shadow(0 12px 20px rgba(20,60,140,.16))}
/* L'accent d'une carte : coin haut droit, taille --illu-size, toujours
   entierement a l'interieur de la boite. */
.plume-ui .card-illu{position:absolute;top:10px;right:14px;width:var(--illu-size);
  height:var(--illu-size);max-width:calc(100% - 28px);z-index:4;display:flex;
  align-items:center;justify-content:center;pointer-events:none;
  filter:drop-shadow(0 5px 10px rgba(30,90,180,.18))}
.plume-ui .card-illu img{width:100%;height:100%;object-fit:contain;
  image-rendering:pixelated}

/* Un decor de fond. Deux fondus INTERSECTES : deux couches de masque empilees
   UNIONNENT leurs zones visibles, donc chaque fondu annulerait l'autre et
   l'illustration reviendrait a pleine force. */
.plume-ui .scenery{position:absolute;right:1%;bottom:0;width:97%;z-index:0;
  /* Le rapport est ce qui donne sa hauteur au decor : il n'a pas de contenu,
     donc sans lui la boite mesure zero et l'image ne se dessine nulle part. */
  aspect-ratio:1440/720;pointer-events:none;opacity:.48;
  background:var(--scenery-img,none) center bottom / 100% auto no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 81%,#000 90%,transparent 100%),
                     linear-gradient(90deg,transparent 0,#000 15%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 81%,#000 90%,transparent 100%),
             linear-gradient(90deg,transparent 0,#000 15%,#000 93%,transparent 100%);
  mask-composite:intersect}

/* ─── 13. Micro-mouvement ────────────────────────────────────────────────── */
/* Chaque boucle PART et REVIENT a l'etat de repos, donc le premier rendu est
   deja l'image finie. Tout est coupe sous prefers-reduced-motion. */
@keyframes pl-sweep{0%,70%,100%{transform:translateX(-120%)}35%{transform:translateX(220%)}}
@keyframes pl-pulse{0%,100%{opacity:1;transform:scale(1)}45%{opacity:.6;transform:scale(1.14)}}
@keyframes pl-swap{0%,44%{opacity:1}52%,70%{opacity:.4}78%,100%{opacity:1}}
@keyframes pl-settle{0%,60%,100%{opacity:1;transform:translateY(0)}
  30%{opacity:.62;transform:translateY(-2px)}}
@keyframes pl-breathe{0%,100%{box-shadow:0 0 0 0 rgba(0,81,213,0)}
  50%{box-shadow:0 0 0 5px rgba(0,81,213,.10)}}
@keyframes pl-flow{0%,72%{opacity:0;transform:translateX(0)}8%{opacity:1}
  30%{opacity:1;transform:translateX(14px)}38%,100%{opacity:0;transform:translateX(14px)}}
@keyframes pl-caustic{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.2%,1.6%,0) scale(1.07)}}
@keyframes pl-float{0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-6px) rotate(-2deg)}}
@keyframes pl-twinkle{0%,100%{opacity:.3;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}}

.plume-ui .scan{position:relative;overflow:hidden}
.plume-ui .scan::after{content:'';position:absolute;top:0;bottom:0;width:38%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(49,107,243,.14),transparent);
  animation:pl-sweep 4.5s ease-in-out infinite}
.plume-ui .icon.live,.plume-ui .icon-stroke.live{
  animation:pl-pulse 3.3s ease-in-out infinite;transform-origin:center}
.plume-ui .chip.live{animation:pl-swap 4s ease-in-out infinite}
.plume-ui .ring.live{animation:pl-breathe 3.6s ease-in-out infinite}
.plume-ui .float{animation:pl-float 7s ease-in-out infinite}
/* Le fil entre deux cartes voisines, dessine dans la gouttiere de 18px, avec
   son point qui la parcourt. Il relie une carte a celle de DROITE : des que la
   grille se replie, il pointe dans le vide et doit disparaitre. */
.plume-ui .flows{position:relative}
.plume-ui .flows::after{content:'';position:absolute;top:52%;right:-18px;width:18px;
  height:2px;z-index:5;
  background:linear-gradient(90deg,rgba(0,81,213,.28),rgba(0,81,213,.10))}
.plume-ui .flows::before{content:'';position:absolute;top:calc(52% - 2px);right:-18px;
  width:6px;height:6px;border-radius:50%;background:var(--blue-primary);z-index:6;
  opacity:0;box-shadow:0 0 8px rgba(0,81,213,.55);
  animation:pl-flow 4.2s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .plume-ui .scan::after,.plume-ui .icon.live,.plume-ui .icon-stroke.live,
  .plume-ui .chip.live,.plume-ui .ring.live,.plume-ui .float,
  .plume-ui .flows::before,.plume-ui .glass-spec{animation:none}
}

/* ─── 14. Grilles et replis ──────────────────────────────────────────────── */
.plume-ui .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.plume-ui .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:1100px){
  .plume-ui .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plume-ui .flows::after,.plume-ui .flows::before{display:none}
}
@media(max-width:820px){
  .plume-ui .grid-2{grid-template-columns:minmax(0,1fr)}
  .plume-ui .vs{width:58px;height:58px;font-size:1.02rem}
}
@media(max-width:700px){
  .plume-ui .grid-3{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .plume-ui .wrap,.plume-ui .wrap-wide{padding:0 20px}
  .plume-ui .section{padding:64px 0}
  .plume-ui .hero-dark{padding:88px 0 132px}
  .plume-ui .hero-cut{height:120px;border-radius:32px 32px 0 0}
  .plume-ui .hero-sub{font-size:1rem}
  .plume-ui .banner{flex-direction:column;align-items:flex-start;gap:18px;padding:26px 22px}
  .plume-ui .banner-title{font-size:1.28rem}
  .plume-ui .price b{font-size:2.5rem}
  .plume-ui .kicker{font-size:min(5vw,1.7rem);text-wrap:balance}
}
