#main .page-content:has(.plai){padding:0}
.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated:has(.plai){padding:0}

.elementor-container.elementor-container:has(.plai){max-width:none !important}

#main:has(.plai) .page-header,
.page-header:has(~ * .plai){display:none}

/* ---------- 1. TOKENS & BASE ---------- */
.plai{
  /* Fonds — du plus profond au plus levé */
  --bg:#0d0d0e; --bg-2:#151517; --surface:#0d0d0e; --surface-2:#151517; --surface-3:#1c1c1f;
  --sunk:#08080a;                      /* champs de saisie, fond des barres */
  --border:#2b2b2f; --border-2:#3a3a40;
  /* Textes — ratios mesurés sur --bg */
  --text:#e8e8e6;                      /* 15,83 ✓ */
  --text-2:#c6d2df;
  --muted:#9a9a97;                     /* 6,89  ✓ */
  --dim:#8a8a87;                       /* 5,61  ✓ (était #6a6a68 → 3,58 ✗) */
  /* Accents */
  --accent:#7ab51d;                    /* vert PCB — 7,82 ✓ */
  --accent-ink:#0a1200;                /* texte sur fond vert — 7,69 ✓ */
  --led:#8fd11a;                       /* vert LED : hover, focus, caret */
  --blue:#5a9fd4;                      /* réservé au « cloud » dans les comparatifs */
  --warn:#c9922a;                      /* palier supérieur / upsell — 7,06 ✓ */
  --danger:#d4685a;                    /* 5,48 ✓ (était #c4503f → 4,22 ✗) */
  --radius:0; --radius-sm:0;           /* aucun arrondi : c'est un choix, pas un oubli */
  --maxw:1220px;
  --font:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;
  color:var(--text); font-family:var(--font); line-height:1.55;
  background:var(--bg); -webkit-font-smoothing:antialiased;
}
.plai *{box-sizing:border-box; margin:0; padding:0}
.plai img{max-width:100%; display:block}
.plai a{text-decoration:none}
/* La couleur des liens se règle en section 3 : elle demande de battre un
   sélecteur à ID du thème, ce qui ne peut pas se faire ici. */

/* ── ANTI-DÉBORDEMENT HORIZONTAL — à ne pas retirer ───────────────────
   Un enfant de grid ou de flex a min-width:auto par défaut : il REFUSE de
   descendre sous la largeur min-content de son contenu. La console ASCII
   (<pre> non sécable, 57 caractères ≈ 383 px) forçait donc sa colonne, qui
   forçait la grille, qui forçait .wrap — et TOUTE la page débordait de la
   fenêtre sur mobile (449 px de contenu minimum pour 415 px d'écran).
   min-width:0 lève le verrou ; le overflow-x:auto du <pre> reprend alors
   son rôle et fait défiler la console dans son cadre.
   → Tout conteneur de contenu non sécable (pre, table, code) placé dans
     une grille doit avoir un parent à min-width:0. */
.plai .hero .wrap > *,.plai .grid > *,.plai .cols > *,.plai .split > *,
.plai .vrow > *,.plai .vhead > *,.plai .clc-grid > *,.plai .book > *,
.plai .step > *,.plai .frow > *{min-width:0}
.plai .term,.plai .decode{min-width:0; max-width:100%}
.plai .term pre{-webkit-overflow-scrolling:touch}
.plai .wrap{max-width:var(--maxw); margin:0 auto; padding:0 30px}
.plai section{padding:58px 0; border-bottom:1px solid var(--border)}

/* FOCUS CLAVIER — WCAG 2.4.7. :focus-visible uniquement : l'anneau
   n'apparaît qu'à la navigation clavier, jamais au clic souris. */
.plai a:focus-visible,.plai button:focus-visible,.plai summary:focus-visible,
.plai input:focus-visible,.plai select:focus-visible,.plai textarea:focus-visible{
  outline:2px solid var(--led); outline-offset:2px}
.plai .field input:focus-visible,.plai .field select:focus-visible,.plai .field textarea:focus-visible,
.plai .clc-f input:focus-visible,.plai .sel-f select:focus-visible{outline-offset:0}

/* ---------- 2. TYPO ---------- */
.plai h1{font-size:43px; line-height:1.05; letter-spacing:-.035em; font-weight:700; color:var(--text)}
.plai h2{font-size:29px; line-height:1.2; letter-spacing:-.025em; font-weight:700; margin-bottom:10px; color:var(--text)}
.plai h3{font-size:16.5px; letter-spacing:-.01em; font-weight:700; color:var(--text)}
.plai .eyebrow{font-family:var(--mono); color:var(--accent); font-size:.7rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px}
.plai .lead{color:var(--muted); font-size:1rem; max-width:64ch}

/* ---------- 3. BOUTONS & BADGES ---------- */
.plai .btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.85rem;
  padding:13px 22px; border:1px solid var(--accent); cursor:pointer; transition:.15s;
  background:var(--accent); font-family:inherit}
.plai .btn:hover{background:var(--led); border-color:var(--led)}
.plai .btn-primary,.plai .btn-primary:hover{background:var(--accent); border-color:var(--accent)}
.plai .btn-ghost,.plai .btn.ghost{background:transparent; border-color:var(--border-2)}
.plai .btn-ghost:hover,.plai .btn.ghost:hover{background:transparent; border-color:var(--accent)}

/* ── COULEUR DU TEXTE DES LIENS ET BOUTONS ─────────────────────────────
   Le thème PrestaShop colore TOUS ses liens en vert de marque via #main a —
   un sélecteur à ID, spécificité (1,0,1). Sur un bouton à fond vert, cela
   donne du vert sur vert : le libellé disparaît.

   Une règle de classe ne peut pas gagner, même avec !important : à !important
   égal, c'est la spécificité qui tranche, et (0,2,0) perd contre (1,0,1).
   Il faut donc un ID de notre côté — d'où le doublon #main pour chaque règle.
   La variante sans ID reste en secours si le thème change de conteneur.

   ⚠ Ne pas « simplifier » ce bloc en retirant les sélecteurs #main :
   les boutons redeviendraient illisibles.
   ------------------------------------------------------------------------ */
.plai .btn,#main .plai .btn,
.plai .btn:hover,#main .plai .btn:hover,
.plai .btn:focus,#main .plai .btn:focus,
.plai .btn:visited,#main .plai .btn:visited,
.plai .btn-primary,#main .plai .btn-primary,
.plai .btn-primary:hover,#main .plai .btn-primary:hover{color:var(--accent-ink) !important}

.plai .btn-ghost,#main .plai .btn-ghost,
.plai .btn.ghost,#main .plai .btn.ghost,
.plai .btn-ghost:visited,#main .plai .btn-ghost:visited{color:var(--text) !important}
.plai .btn-ghost:hover,#main .plai .btn-ghost:hover,
.plai .btn.ghost:hover,#main .plai .btn.ghost:hover{color:var(--accent) !important}

/* Liens courants : le thème imposerait son vert partout, y compris sur les
   textes qui doivent hériter de leur conteneur (noms de gammes dans une
   carte-lien, fil d'ariane, listes). Même bataille, même remède. */
.plai a:not(.btn),#main .plai a:not(.btn),
.plai a:not(.btn):hover,#main .plai a:not(.btn):hover,
.plai a:not(.btn):focus,#main .plai a:not(.btn):focus,
.plai a:not(.btn):visited,#main .plai a:not(.btn):visited{color:inherit; text-decoration:none}

/* Liens qui doivent porter une couleur PROPRE, différente de l'héritage.
   Regroupés ici avec leur doublon #main : sans lui, le vert du thème
   l'emporterait et les nuances (gris discret des mentions légales, accent des
   liens éditoriaux) disparaîtraient au profit d'un vert uniforme. */
.plai .art a:not(.btn),#main .plai .art a:not(.btn),
.plai .art a:not(.btn):hover,#main .plai .art a:not(.btn):hover,
.plai .related a,#main .plai .related a,
.plai .faq details p a,#main .plai .faq details p a,
.plai .crumb a:hover,#main .plai .crumb a:hover{color:var(--accent)}

.plai .legal a,#main .plai .legal a,
.plai .micro a,#main .plai .micro a{color:var(--muted)}
.plai .legal a:hover,#main .plai .legal a:hover,
.plai .micro a:hover,#main .plai .micro a:hover{color:var(--accent)}
.plai .form-ok.pending a,#main .plai .form-ok.pending a{color:var(--warn)}
.plai .cta-row,.plai .row{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
.plai .badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:.7rem; font-weight:400; letter-spacing:.06em; padding:5px 10px;
  border:1px solid var(--border-2); color:var(--muted)}
.plai .badge.buy,.plai .badge.star{color:var(--accent); border-color:rgba(122,181,29,.5); background:rgba(122,181,29,.09)}
.plai .badge.quote{color:var(--blue); border-color:rgba(90,159,212,.45); background:rgba(90,159,212,.09)}
/* .best = palier supérieur / upsell — axe « confort », distinct de .buy (« le plus vendu ») */
.plai .badge.best{color:var(--warn); border-color:rgba(201,146,42,.5); background:rgba(201,146,42,.10)}
/* margin-bottom explicite : le bouton a margin-top:auto, qui ne réserve AUCUN
   espace quand le contenu remplit déjà la carte — l'encadré se retrouvait alors
   collé au bouton. La marge basse garantit la respiration dans tous les cas. */
.plai .spec .upsell{margin:12px 0 18px; padding:10px 12px; border:1px solid rgba(201,146,42,.3);
  background:rgba(201,146,42,.06); font-size:.82rem; line-height:1.5; color:var(--text-2)}
.plai .spec .upsell b{color:var(--warn)}

/* ---------- 4. TRUST BAR / FIL D'ARIANE / FOOTNOTE ---------- */
.plai .trust{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg)}
.plai .trust .wrap{display:flex; flex-wrap:wrap; gap:10px 30px; padding:11px 30px}
.plai .trust span{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--dim)}
.plai .trust span::before{content:"●"; color:var(--accent); font-size:8px}
.plai .trust svg{width:14px; height:14px; color:var(--accent)}
/* La typographie est portée par .crumb lui-même, pas par son .wrap : les pages
   guides écrivent <div class="wrap"><div class="crumb">, l'inverse des autres.
   Avec le style sur .crumb, les deux imbrications rendent à l'identique. */
.plai .crumb{padding:18px 0 0; font-family:var(--mono); font-size:.7rem; color:var(--dim)}
.plai .crumb .wrap{font-family:inherit; font-size:inherit; color:inherit}
.plai .crumb a:hover{color:var(--accent)}
.plai .crumb b{color:var(--muted); font-weight:400}
.plai .footnote{font-family:var(--mono); color:var(--dim); font-size:.7rem;
  border-top:1px solid var(--border); padding:22px; text-align:center}

/* ---------- 5. HERO (+ variantes) ---------- */
/* Ni glow radial, ni masque de grille : c'était le marqueur « IA » n°3. */
.plai .hero{position:relative; padding:52px 0; border-bottom:1px solid var(--border); background:var(--bg)}
.plai .hero .wrap{position:relative}
.plai .hero h1{max-width:16ch; margin-top:4px}
.plai .hero p.sub{color:var(--muted); font-size:1rem; margin-top:16px; max-width:52ch}
.plai .hero.split-2 .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start}
.plai .hero.plain{padding:38px 0 10px}
.plai .hero.plain h1,.plai .hero.split-2 h1{max-width:none}
.plai .story{margin-top:16px; padding:12px 14px; border-left:2px solid var(--accent);
  background:var(--bg-2); color:var(--text-2); font-size:.9rem; max-width:58ch}
.plai .story b{color:var(--text)}
/* segmenté (persona) — onglets carrés, pas de pilule */
.plai .seg{display:inline-flex; gap:1px; margin-top:26px; background:var(--border); border:1px solid var(--border)}
.plai .seg button{background:var(--bg); border:none; border-top:2px solid transparent; color:var(--muted);
  font-family:var(--mono); font-size:.78rem; padding:10px 16px; cursor:pointer; transition:.15s}
.plai .seg button:hover{background:var(--bg-2)}
.plai .seg button.active{background:var(--bg-2); border-top-color:var(--accent); color:var(--accent)}
.plai .persona-note{margin-top:16px; color:var(--muted); font-size:.9rem; min-height:1.5em}
/* prix hero */
.plai .price-lg{margin-top:22px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.plai .price-lg .from{font-family:var(--mono); color:var(--dim); font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase}
.plai .price-lg .amt{font-family:var(--mono); font-size:1.7rem; font-weight:700;
  color:var(--text); letter-spacing:-.02em}
.plai .price-lg .ht{font-family:var(--mono); color:var(--dim); font-size:.75rem}
/* carte hero (specs / verdict) */
.plai .hero-card,.plai .verdict{background:var(--bg-2); border:1px solid var(--border); padding:22px}
/* .k = intertitre mono d'un encadré. Valable dans tout conteneur, pas seulement
   .hero-card / .verdict / .side : un .panel isolé l'utilise aussi. */
.plai .hero-card .k,.plai .verdict .k,.plai .panel .k{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px}
.plai .hero-card ul{list-style:none}
.plai .hero-card li{display:flex; justify-content:space-between; gap:14px; padding:10px 0;
  border-bottom:1px solid var(--border); font-family:var(--mono); font-size:.78rem}
.plai .hero-card li:last-child{border-bottom:none}
.plai .hero-card li span{color:var(--dim)}
.plai .hero-card li b{color:var(--text); font-weight:600}
.plai .verdict p{color:var(--muted); font-size:.9rem; margin-bottom:10px}
.plai .verdict b{color:var(--text)}

/* ---------- 5bis. CONSOLE + DÉCODAGE (hero du hub) ----------
   La console prouve que la machine tourne vraiment — c'est la pièce qui
   fait la différence avec une page marketing. Mais elle FAIT PEUR aux PME
   qui n'y connaissent rien : le bloc .decode juste en dessous la traduit,
   ligne par ligne. Les deux vont ensemble, ne jamais mettre l'une sans l'autre.
   Markup : voir l'en-tête de initConsole() dans serveurs-ia.js
   ------------------------------------------------------------------------ */
.plai .term{background:var(--sunk); border:1px solid var(--border)}
.plai .term .bar{display:flex; align-items:center; gap:7px; padding:8px 12px;
  border-bottom:1px solid var(--border); background:var(--bg-2)}
.plai .term .bar i{width:7px; height:7px; background:var(--border-2); display:block}
.plai .term .bar i.on{background:var(--led); animation:plai-pulse 2.4s ease-in-out infinite}
@keyframes plai-pulse{0%,100%{opacity:1} 50%{opacity:.35}}
.plai .term .bar span{font-family:var(--mono); font-size:.7rem; color:var(--dim); margin-left:6px}
.plai .term pre{font-family:var(--mono); font-size:.7rem; line-height:1.62; color:#bdbdb9;
  padding:13px; overflow-x:auto; min-height:196px}
.plai .term .c{color:var(--accent)}
.plai .term .g{color:var(--led)}
.plai .term .d{color:var(--dim)}
.plai .caret{display:inline-block; width:7px; background:var(--led); animation:plai-blink 1s step-end infinite}
@keyframes plai-blink{50%{opacity:0}}

.plai .decode{border:1px solid var(--border); border-top:none; background:var(--bg-2); padding:16px 14px}
.plai .decode .h{font-size:.82rem; color:var(--text); font-weight:700; margin-bottom:10px}
.plai .decode .h::before{content:"↑ "; color:var(--accent)}
.plai .decode ul{list-style:none; display:grid; gap:8px}
.plai .decode li{display:grid; grid-template-columns:auto 1fr; gap:10px;
  align-items:baseline; font-size:.8rem; color:var(--muted)}
.plai .decode code{font-family:var(--mono); font-size:.7rem; color:var(--accent);
  background:var(--sunk); border:1px solid var(--border-2); padding:2px 6px; white-space:nowrap}
.plai .decode b{color:var(--text); font-weight:600}

/* ---------- 6. GRIDS & CARTES ---------- */
/* Gouttière + filet sur chaque carte, plutôt que la grille à gap:1px du
   design E4 : si une rangée est incomplète (5 cartes en 3 colonnes), la
   technique du fond-filet laisse des blocs gris dans les cellules vides. */
.plai .grid{display:grid; gap:14px}
.plai .g-2{grid-template-columns:repeat(2,1fr)}
.plai .g-3{grid-template-columns:repeat(3,1fr)}
.plai .g-4{grid-template-columns:repeat(4,1fr)}
/* Le filet du haut est GRIS au repos, pas transparent. En transparent, la carte
   n'avait tout simplement plus de bord supérieur : elle paraissait coupée en
   haut. Il passe au vert au survol — le filet existe toujours, il change juste
   de couleur, ce qui rend le survol lisible au lieu de « faire apparaître » un
   bord venu de nulle part. */
.plai .card{background:var(--bg); border:1px solid var(--border); border-top:2px solid var(--border);
  padding:22px; transition:background .15s, border-color .15s}
/* Sensation de premier plan SANS translateY : le fond s'éclaircit (bg → surface-3)
   et tous les filets montent d'un cran. En design plat, la profondeur se rend par
   la luminance, pas par le mouvement — et le hover flottant faisait partie des
   marqueurs « design IA » qu'on a retirés. */
.plai .card:hover{background:var(--surface-3); border-color:var(--border-2); border-top-color:var(--accent)}
.plai .card .ic{width:28px; height:28px; color:var(--accent); margin-bottom:12px}
.plai .card p{color:var(--muted); font-size:.9rem; margin-top:8px}
.plai .panel{background:var(--bg-2); border:1px solid var(--border); padding:24px}
.plai .panel h3{margin-bottom:6px}
.plai .split{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border)}
.plai .split>div{background:var(--bg); padding:26px}

/* ---------- 7. SPHÈRES (hub) / SPECS (offres) / PHOTOS ---------- */
.plai .sphere{display:flex; flex-direction:column}
.plai .sphere.feat{background:var(--bg-2); border-top-color:var(--accent)}
.plai .sphere .top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.plai .sphere .tiers{margin:14px 0; border-top:1px solid var(--border); padding-top:14px}
.plai .sphere .tier{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:.85rem; padding:6px 0}
.plai .sphere .tier b{font-weight:600}
.plai .sphere .tier span{font-family:var(--mono); color:var(--accent); font-variant-numeric:tabular-nums; font-size:.78rem}
.plai .sphere .go{margin-top:auto; padding-top:14px; color:var(--accent); font-weight:700;
  font-size:.85rem; display:inline-flex; align-items:center; gap:6px}
.plai .sphere:hover .go{gap:10px}
.plai .spec{position:relative; background:var(--bg); border:1px solid var(--border);
  border-top:2px solid var(--border); padding:24px; display:flex; flex-direction:column}
.plai .spec:hover{border-color:var(--border-2)}
.plai .spec.feat{background:var(--bg-2); border-top-color:var(--accent)}
.plai .spec.feat:hover{border-top-color:var(--accent)}
/* Le badge est posé SUR la photo produit : son fond doit être opaque, sinon il
   prend la couleur de l'image (blanche sur les photos studio) et paraît sans
   contour. Valeurs = l'exact équivalent opaque des rgba(...,.09) d'origine :
   le rendu sur la carte est identique, la lisibilité sur photo est acquise. */
.plai .spec .tag{position:absolute; top:16px; right:16px; z-index:2}
.plai .spec .tag.buy{background:#1e2318}
.plai .spec .tag.best{background:#252019}
.plai .spec .tag.quote{background:#1b2128}
.plai .spec h3{font-size:1.2rem}
.plai .spec .sub{color:var(--muted); font-size:.85rem; margin:4px 0 14px}
.plai .spec .price{font-family:var(--mono); font-size:1.3rem; font-weight:700;
  letter-spacing:-.02em; margin-bottom:4px; color:var(--text)}
.plai .spec .price .from{font-size:.7rem; color:var(--dim); font-weight:400;
  letter-spacing:.08em; text-transform:uppercase}
.plai .spec ul{list-style:none; margin:14px 0}
.plai .spec li{display:flex; justify-content:space-between; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--border); font-family:var(--mono); font-size:.75rem}
.plai .spec li span{color:var(--dim)}
.plai .spec li b{color:var(--text); font-weight:600; text-align:right}
.plai .spec .btn{margin-top:auto; justify-content:center}
/* Photos produit.
   contain et non cover : cover recadre pour remplir le cadre et coupe donc le
   haut et le bas d'un boîtier photographié à la verticale. contain garde la
   machine entière.
   Le fond blanc correspond à celui des photos studio : le calage se fond dans
   l'image et l'ensemble se lit comme une planche catalogue, volontaire.
   → Avec des visuels détourés, passer background à var(--bg-2). */
.plai .pimg{width:100%; display:block; border:1px solid var(--border);
  background:#fff; object-fit:contain; aspect-ratio:16/10}
.plai .hero-card .pimg{aspect-ratio:4/3; margin-bottom:16px}
.plai .spec .pimg{margin-bottom:16px}

/* ---------- 8. TABLEAUX ---------- */
/* .plai *{padding:0} plus haut écrase le padding natif des cellules :
   tout doit être re-déclaré, sinon les en-têtes se collent. */
.plai .scroll{overflow-x:auto; border:1px solid var(--border)}
.plai .tbl{width:100%; border-collapse:collapse; font-size:.85rem}
.plai .tbl th,.plai .tbl td{text-align:left; padding:11px 14px;
  border-bottom:1px solid var(--border); vertical-align:top}
.plai .tbl thead th{font-family:var(--mono); color:var(--dim); font-weight:400; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.09em; border-bottom:1px solid var(--accent); white-space:nowrap}
.plai .tbl tbody tr:hover{background:var(--bg-2)}
.plai .tbl tbody td{color:var(--muted)}
.plai .tbl .em,.plai .tbl td.crit{color:var(--text); font-weight:700}
.plai .tbl .ok{color:var(--accent)}
.plai .tbl .no{color:var(--dim)}
.plai .tbl .mid{color:var(--warn)}
.plai .tbl .bl{color:var(--blue)}
/* .ptable — tableau de rentabilité avec barres animées (section « payback ») */
.plai .ptwrap{overflow-x:auto; margin-top:26px}
.plai .ptable{width:100%; min-width:660px; border-collapse:collapse; border:1px solid var(--border)}
.plai .ptable th,.plai .ptable td{padding:11px 14px; text-align:left; vertical-align:middle}
.plai .ptable thead th{font-family:var(--mono); font-size:.7rem; font-weight:400; text-transform:uppercase;
  letter-spacing:.09em; color:var(--dim); border-bottom:1px solid var(--accent); white-space:nowrap}
.plai .ptable thead th:first-child{width:31%; color:var(--muted)}
/* Largeur ÉGALE et IMPOSÉE sur les 3 colonnes de données. Sans width, elles se
   dimensionnent sur leur contenu : l'en-tête « ÉQUIPE PRODUIT IA · DATACENTER »
   étant le plus long, sa colonne faisait 390 px contre 174 pour la première.
   Les barres, calculées en % de leur propre piste, devenaient incomparables —
   14 mois affichait 102 px de vert et 7 mois 114 px. Le graphique disait
   littéralement l'inverse de la réalité. */
.plai .ptable thead th:not(:first-child){text-align:right; width:23%}
.plai .ptable tbody td{font-size:.82rem; color:var(--muted); border-bottom:1px solid var(--border)}
.plai .ptable tbody tr:last-child td{border-bottom:none}
.plai .ptable tbody tr:hover{background:var(--bg-2)}
.plai .ptable td.m{font-family:var(--mono); font-size:.75rem; text-align:right; color:var(--text)}
.plai .ptable td.tot{color:var(--text); font-weight:600}
.plai .ptable td.m.tot{color:var(--accent)}
.plai .ptable tr.sum td{border-top:1px solid var(--border-2)}
/* ── BARRE DE RENTABILITÉ — lecture « plus c'est long, mieux c'est » ───
   La piste vaut 24 mois. Le VERT est ancré à DROITE : il représente la
   période pendant laquelle la machine est DÉJÀ remboursée. La frontière
   sombre/vert marque le mois de rentabilité.

   Pourquoi pas l'inverse (barre = durée d'amortissement, ancrée à gauche) :
   le Studio, le moins cher, aurait eu la barre la plus LONGUE — or dans tout
   graphique, long = plus = mieux. On demandait au lecteur d'inverser sa
   lecture, et le visuel contredisait l'argument d'upsell. Une légende ne
   corrige jamais un mauvais instinct visuel.
   → Ne pas « remettre le remplissage à gauche » par réflexe. */
.plai .bkbar{height:16px; background:var(--sunk); border:1px solid var(--border-2);
  position:relative; overflow:hidden}
.plai .bkbar i{position:absolute; right:0; top:0; bottom:0; width:0; background:var(--accent);
  display:block; transition:width .9s cubic-bezier(.2,.8,.2,1)}
.plai .bkv{font-family:var(--mono); font-size:.7rem; color:var(--accent);
  margin-top:6px; text-align:right; white-space:nowrap}
.plai .bkscale{font-family:var(--mono); font-size:.7rem; color:var(--dim); margin-top:9px}
.plai .bkscale b{color:var(--accent); font-weight:400}
.plai .scrollhint{display:none; font-family:var(--mono); font-size:.7rem; color:var(--dim); margin-bottom:8px}

/* ---------- 8bis. SÉLECTEUR DE CAPACITÉ (nouveau — design E4) ----------
   Bloc interactif : on choisit une machine, le tableau montre ce qu'elle
   fait tourner ET pour combien de personnes. Nouveau dans la v2 : aucune
   des 16 pages ne l'utilisait encore (cf. lot 3).
   Markup : voir l'en-tête de initCapacity() dans serveurs-ia.js
   ------------------------------------------------------------------------ */
.plai .picker{display:flex; flex-wrap:wrap; gap:1px; background:var(--border);
  border:1px solid var(--border); margin-bottom:8px}
.plai .picker button{flex:1; background:var(--bg); border:none; border-top:2px solid transparent;
  color:var(--muted); font-family:var(--mono); font-size:.7rem; padding:12px 10px;
  cursor:pointer; text-align:left; transition:background .15s, color .15s}
.plai .picker button b{display:block; font-family:var(--font); font-size:.82rem;
  color:var(--text); margin-bottom:2px; letter-spacing:-.01em}
.plai .picker button:hover{background:var(--bg-2)}
.plai .picker button.on{background:var(--bg-2); border-top-color:var(--accent); color:var(--accent)}
.plai .picker button.on b{color:var(--accent)}
.plai .picker .tagpme{font-size:.7rem; color:var(--accent); letter-spacing:.08em}
/* tagup = palier supérieur — axe « confort », distinct du « le plus vendu » vert */
.plai .picker .tagup{font-size:.7rem; color:var(--warn); letter-spacing:.08em}

.plai .vtable{border:1px solid var(--border); border-top:none}
.plai .vhead,.plai .vrow{display:grid; grid-template-columns:1.5fr 1.5fr .6fr 1.6fr .9fr;
  gap:14px; align-items:center; padding:11px 14px}
.plai .vhead{border-bottom:1px solid var(--accent); font-family:var(--mono); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.09em; color:var(--dim)}
.plai .vhead .hum{color:var(--accent)}
.plai .vrow{border-bottom:1px solid var(--border)}
.plai .vrow:last-child{border-bottom:none}
.plai .vrow:hover{background:var(--bg-2)}
.plai .vrow .mdl{font-size:.82rem; font-weight:600; color:var(--text)}
.plai .vrow .mdl em{font-style:normal; font-family:var(--mono); font-size:.7rem; color:var(--dim)}
.plai .vrow .use{font-size:.78rem; color:var(--text)}
.plai .vrow .pre{font-family:var(--mono); font-size:.7rem; color:var(--muted)}
.plai .vbar{height:19px; background:var(--sunk); border:1px solid var(--border-2);
  position:relative; overflow:hidden}
.plai .vbar i{position:absolute; left:0; top:0; bottom:0; display:block; width:0;
  transition:width .7s cubic-bezier(.2,.8,.2,1), background .3s}
.plai .vbar i.ok{background:var(--accent)}
.plai .vbar i.wr{background:var(--warn)}
.plai .vbar i.no{background:var(--danger)}
.plai .vbar span{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:.7rem; color:var(--text)}
.plai .vrow .vd{font-family:var(--mono); font-size:.7rem; text-align:right}
.plai .vd.ok{color:var(--accent)}
.plai .vd.wr{color:var(--warn)}
.plai .vd.no{color:var(--dim)}

/* ---------- 9. LISTES À COCHES / ENCADRÉS ---------- */
/* Chevron ▸ plutôt qu'une coche SVG masquée : moins « template ». */
.plai ul.checks{list-style:none}
.plai ul.checks li{position:relative; padding-left:22px; margin:10px 0; color:var(--muted); font-size:.88rem}
.plai ul.checks li::before{content:"▸"; position:absolute; left:0; top:0; color:var(--accent); font-size:.7rem}
.plai ul.checks.cloud li::before{color:var(--blue)}
.plai ul.checks li b{color:var(--text); font-weight:600}
.plai .callout{background:var(--bg-2); border-left:2px solid var(--accent);
  padding:12px 14px; margin:24px 0; color:var(--muted); font-size:.88rem}
.plai .callout b{color:var(--text)}
.plai .callout::before{content:"En clair — "; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.plai .note{background:var(--bg-2); border:1px solid var(--border);
  padding:14px 16px; color:var(--muted); font-size:.85rem; margin-top:18px}
.plai .note b{color:var(--text)}
.plai .note-warn{background:rgba(201,146,42,.07); border:1px solid rgba(201,146,42,.35);
  padding:14px 16px; color:var(--muted); font-size:.85rem; margin:22px 0}
.plai .note-warn b{color:var(--warn)}

/* ---------- 10. CARROUSEL MARQUES ---------- */
/* La piste contient la liste deux fois : elle fait 2× la largeur, on la
   translate de -50 % → au rebouclage le 2e jeu est pile là où était le 1er,
   la couture est invisible. Les doublons portent .dup + aria-hidden. */
.plai .marquee{border:1px solid var(--border); overflow:hidden; position:relative; margin-top:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 70px,#000 calc(100% - 70px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 70px,#000 calc(100% - 70px),transparent)}
.plai .marquee-track{display:flex; width:max-content; animation:plai-scroll 60s linear infinite}
.plai .marquee:hover .marquee-track,.plai .marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes plai-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* Cellule de hauteur fixe : les logos ont des ratios très différents, sans
   hauteur imposée la piste sauterait à chaque marque. */
.plai .brand{display:flex; align-items:center; justify-content:center; flex:none;
  height:76px; padding:0 24px; border-right:1px solid var(--border);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--muted); white-space:nowrap}
/* Dimensionnement par la LARGEUR, pas la hauteur : les fichiers partagent
   tous le même gabarit 200×100. Caler sur la largeur garantit que le pavé
   optique de chaque marque est identique — ce qu'on veut dans une barre de
   logos. Caler sur la hauteur rendrait les logos très larges minuscules. */
.plai .brand img{width:112px; height:auto; object-fit:contain; display:block;
  filter:brightness(0) invert(1); opacity:.6; transition:opacity .2s}
/* Normalisation en blanc : les logos officiels sont pour la plupart sombres
   (le texte de NVIDIA est noir, Micron aussi) et disparaîtraient sur le fond
   noir. brightness(0) les aplatit en noir, invert(1) les repasse en blanc —
   quelle que soit leur couleur d'origine. Un logo déjà blanc reste blanc.
   → Pour qu'une marque garde ses couleurs : <span class="brand keep">. */
.plai .brand.keep img{filter:none; opacity:.9}
.plai .marquee:hover .brand img{opacity:.95}

/* ---------- 11. ÉCHELLE DE SERVICES ---------- */
/* Exactement 4 échelons : la grille à filet 1px est sans risque ici. */
.plai .ladder{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); margin-top:24px}
.plai .rung{background:var(--bg); padding:20px; display:flex; flex-direction:column}
.plai .rung.rec{background:var(--bg-2); box-shadow:inset 0 2px 0 var(--accent)}
.plai .rung .lvl{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim)}
.plai .rung h3{margin:7px 0; font-size:1rem}
.plai .rung p{color:var(--muted); font-size:.82rem; flex:1}
.plai .rung .pr{font-family:var(--mono); margin-top:12px; color:var(--accent);
  font-weight:700; font-size:.85rem}

/* ---------- 12. ÉTAPES (délais) ---------- */
.plai .steps{display:grid; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:26px}
.plai .step{display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  background:var(--bg); padding:18px 20px}
.plai .step:hover{background:var(--bg-2)}
/* Carré, pas rond : le rond était l'un des tics repérés à l'audit. */
.plai .step .n{width:34px; height:34px; border:1px solid var(--border-2); color:var(--accent);
  font-family:var(--mono); font-weight:700; font-size:.85rem;
  display:flex; align-items:center; justify-content:center; background:var(--sunk)}
.plai .step .t{font-weight:700; font-size:.95rem}
.plai .step .d{color:var(--muted); font-size:.85rem; margin-top:2px}
.plai .step .dur{font-family:var(--mono); color:var(--accent); font-size:.75rem;
  font-weight:700; white-space:nowrap}

/* ---------- 13. FAQ ---------- */
.plai .cat{font-family:var(--mono); color:var(--accent); font-size:.7rem; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; margin:26px 0 4px}
.plai .faq details{border-bottom:1px solid var(--border)}
.plai .faq summary{cursor:pointer; padding:15px 0; font-weight:600; font-size:.92rem; list-style:none;
  display:flex; justify-content:space-between; gap:16px; color:var(--text)}
.plai .faq summary::-webkit-details-marker{display:none}
.plai .faq summary::after{content:"+"; font-family:var(--mono); color:var(--accent)}
.plai .faq details[open] summary::after{content:"−"}
.plai .faq details p{color:var(--muted); font-size:.88rem; padding:0 0 15px}
.plai .faq details p a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}

/* ---------- 14. FORMULAIRES ---------- */
/* ── .cta = SECTION SOMBRE qui contient un formulaire ou des CTA ──────
   ⚠ NE PAS mettre de fond vert ici. Dans les 16 pages, .cta enveloppe le
   formulaire ; un aplat vert repeindrait tout ce qui est imbriqué dedans
   (encadré de réservation, séparateur, labels) avec des couleurs pensées
   pour un fond vert — donc illisibles sur les cartes noires.
   Le bandeau vert pleine largeur existe : c'est .cta.solid, ci-dessous. */
.plai .cta{background:var(--bg-2); border-top:1px solid var(--border); padding:52px 0}
.plai .cta.center{text-align:center}
.plai .cta.center .row,.plai .cta.center .cta-row{justify-content:center}

/* ── .cta.solid = bandeau vert pleine largeur ─────────────────────────
   À réserver aux sections SANS carte imbriquée : un titre, un paragraphe,
   des boutons. Rien d'autre. */
.plai .cta.solid{background:var(--accent); color:var(--accent-ink)}
.plai .cta.solid .eyebrow{color:#1f3004}            /* 5,70 ✓ sur le vert */
.plai .cta.solid h2{color:var(--accent-ink); max-width:22ch}
.plai .cta.solid p,.plai .cta.solid .lead{color:#294005; font-size:.95rem; margin-top:8px}
.plai .cta.solid .btn{background:var(--accent-ink); border-color:var(--accent-ink)}
.plai .cta.solid .btn:hover{background:#000; border-color:#000}
.plai .cta.solid .btn-ghost,.plai .cta.solid .btn.ghost{background:transparent; border-color:var(--accent-ink)}
.plai .cta.solid .btn-ghost:hover{background:var(--accent-ink)}
/* Inversion des couleurs sur le bandeau vert — même bataille de spécificité. */
.plai .cta.solid .btn,#main .plai .cta.solid .btn,
.plai .cta.solid .btn:hover,#main .plai .cta.solid .btn:hover{color:var(--accent) !important}
.plai .cta.solid .btn-ghost,#main .plai .cta.solid .btn-ghost,
.plai .cta.solid .btn.ghost,#main .plai .cta.solid .btn.ghost{color:var(--accent-ink) !important}
.plai .cta.solid .btn-ghost:hover,#main .plai .cta.solid .btn-ghost:hover{color:var(--accent) !important}
.plai form.lead{background:var(--bg-2); border:1px solid var(--border); padding:24px; margin-top:20px; max-width:none}
.plai .frow{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.plai .field{margin-bottom:13px}
.plai .field label{display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); margin-bottom:6px}
.plai .field input,.plai .field select,.plai .field textarea{width:100%; background:var(--sunk);
  border:1px solid var(--border-2); color:var(--text); padding:10px 11px; font-size:.9rem; font-family:inherit}
.plai .field input:focus,.plai .field select:focus,.plai .field textarea:focus{border-color:var(--accent)}
.plai .field input::placeholder,.plai .field textarea::placeholder{color:var(--dim); opacity:1}
/* Astérisque des champs obligatoires */
.plai .req{color:var(--danger); margin-left:3px; font-weight:700}
/* Légende sous le bouton, pas au-dessus des champs : en haut elle se lit
   avant qu'on sache quels champs existent. L'info « obligatoire » est portée
   par l'attribut required (annoncé par les lecteurs d'écran) — l'astérisque
   n'est qu'un rappel visuel, il peut donc s'expliquer après coup. */
.plai .flegend{font-size:.7rem; color:var(--dim); margin:12px 0 0; text-align:center}
.plai .flegend .req{margin-left:0; margin-right:3px; font-weight:400}
/* Consentement : un encadré cliquable, pas une case perdue en bas de page */
.plai .consent{display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--muted);
  margin:4px 0; padding:11px 12px; border:1px solid var(--border-2); background:var(--sunk); cursor:pointer}
.plai .consent input{width:auto; flex:none; margin-top:2px; accent-color:var(--accent)}
.plai .consent.opt{margin-bottom:12px}
.plai .legal{font-size:.75rem; line-height:1.6; color:var(--dim); margin:10px 0 16px}
.plai .legal b{color:var(--muted)}
.plai .legal a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.plai .legal a:hover{color:var(--accent)}
/* Pot de miel anti-spam : hors écran, mais pas display:none (les bots
   l'ignoreraient). Évite un captcha — et donc d'envoyer les visiteurs
   chez Google, ce qui contredirait le discours « vos données restent chez vous ». */
/* Pot de miel : masqué par clip et non par left:-9999px. Un décalage négatif
   peut créer un débordement horizontal selon le contexte de positionnement —
   on ne va pas réintroduire par la bande le bug qu'on vient de corriger.
   display:none est exclu : les robots l'ignoreraient, et le piège ne servirait
   plus à rien. */
.plai .hp{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0}
.plai form.lead{position:relative}
.plai .form-ok{display:none; background:rgba(122,181,29,.1); border:1px solid rgba(122,181,29,.45);
  color:var(--text); padding:14px 16px; margin-top:14px; font-size:.88rem}
.plai .form-ok b{color:var(--accent)}
/* .pending = le client mail s'est (peut-être) ouvert, mais RIEN n'est encore
   envoyé. Vert = « c'est fait » : ce serait un mensonge. Ambre = « à vous ». */
.plai .form-ok.pending{background:rgba(201,146,42,.08); border-color:rgba(201,146,42,.45)}
.plai .form-ok.pending b{color:var(--warn)}
.plai .form-ok.pending a{color:var(--warn); text-decoration:underline; text-underline-offset:2px}
/* ── BLOC RÉSERVATION ─────────────────────────────────────────────────
   Placé AVANT le formulaire : tant que l'envoi passe par mailto:, le
   prospect doit encore cliquer « Envoyer » dans sa messagerie. La
   réservation ne dépend d'aucun logiciel tiers — c'est le chemin de
   conversion le plus fiable, il passe donc en premier. */
.plai .book{border:1px solid var(--border); border-top:2px solid var(--accent); background:var(--bg-2);
  padding:24px; display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center; margin-top:20px}
.plai .book h3{font-size:1.15rem; margin:7px 0 6px}
.plai .book p{font-size:.85rem; color:var(--muted); max-width:54ch}
.plai .book .btn{white-space:nowrap}
.plai .orsep{display:flex; align-items:center; gap:14px; margin:26px 0; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.plai .orsep::before,.plai .orsep::after{content:""; flex:1; height:1px; background:var(--border)}
@media(max-width:760px){ .plai .book{grid-template-columns:1fr; gap:18px} .plai .book .btn{width:100%; justify-content:center} }

.plai .micro{font-family:var(--mono); color:var(--dim); font-size:.7rem; text-align:center; margin-top:10px}
.plai .micro a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.plai .micro a:hover{color:var(--accent)}
/* page besoin */
.plai .cols{display:grid; grid-template-columns:1.35fr .65fr; gap:30px; align-items:start; padding:30px 0 60px}
.plai .fset{border-top:1px solid var(--border); margin-top:20px; padding-top:18px}
.plai .fset:first-of-type{border-top:none; margin-top:0; padding-top:0}
.plai .fset .lg{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px}
.plai .side{display:grid; gap:14px; position:sticky; top:20px}
.plai .side .panel{padding:20px}
.plai .side .k{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px}
.plai .stepl{list-style:none}
.plai .stepl li{display:grid; grid-template-columns:auto 1fr; gap:12px; padding:9px 0;
  color:var(--muted); font-size:.85rem}
.plai .stepl .n{width:22px; height:22px; border:1px solid var(--border-2); color:var(--accent);
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; background:var(--sunk)}
.plai .stepl b{color:var(--text); display:block}

/* ---------- 15. INDEX DES GUIDES ---------- */
.plai .tools{display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--border); border:1px solid var(--border); margin-top:26px}
.plai .tool{display:flex; flex-direction:column; background:var(--bg-2);
  border-top:2px solid var(--accent); padding:22px; transition:background .15s}
.plai .tool:hover{background:var(--surface-3)}
.plai .tool .tag{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px}
.plai .tool p{color:var(--muted); font-size:.88rem; margin:8px 0 14px}
.plai .tool .go{color:var(--accent); font-weight:700; font-size:.85rem; margin-top:auto}
.plai .card .pill{display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  color:var(--muted); border:1px solid var(--border-2); padding:3px 9px; margin-bottom:10px; width:fit-content}
.plai .card .pill.star{color:var(--accent); border-color:rgba(122,181,29,.5); background:rgba(122,181,29,.09)}
.plai .card .go{color:var(--accent); font-weight:700; font-size:.85rem; margin-top:auto; padding-top:12px}
.plai .card:hover .go{text-decoration:underline}
.plai a.card{display:flex; flex-direction:column}

/* ---------- 16. ARTICLE (guides) ---------- */
.plai .head{border-bottom:1px solid var(--border); padding-bottom:26px}
.plai .art{max-width:760px; margin:0 auto; padding:34px 0 10px; line-height:1.7}
.plai .art h2{font-size:1.4rem; margin:34px 0 12px}
.plai .art h3{font-size:1.08rem; margin:24px 0 8px}
.plai .art p{color:var(--text-2); margin:14px 0; font-size:.95rem}
.plai .art strong{color:var(--text)}
/* :not(.btn) impératif — sinon .plai .art a (0,2,1) l'emporte sur .plai .btn
   (0,2,0) et le bouton d'un .cta-box placé dans un article se retrouve avec du
   texte vert sur fond vert : illisible. Les guides sont les seules pages où un
   bouton est imbriqué dans une zone de texte riche. */
.plai .art a:not(.btn),.plai .art a:not(.btn):hover{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.plai .art ol{margin:14px 0 14px 20px; color:var(--text-2)}
.plai .art ol li{margin:9px 0}
.plai .art ul{margin:14px 0 14px 4px; list-style:none}
.plai .art ul li{position:relative; padding-left:22px; margin:9px 0; color:var(--text-2)}
.plai .art ul li::before{content:"▸"; position:absolute; left:0; top:0; color:var(--accent); font-size:.7rem}
.plai .art ul li b{color:var(--text)}
.plai .art .tldr{background:var(--bg-2); border-left:2px solid var(--accent);
  padding:14px 16px; color:var(--muted); margin:18px 0; font-size:.88rem}
.plai .art .tldr b{color:var(--text)}
.plai .art table{width:100%; border-collapse:collapse; font-size:.85rem; border:1px solid var(--border)}
.plai .art th,.plai .art td{text-align:left; padding:11px 14px;
  border-bottom:1px solid var(--border); vertical-align:top; color:var(--muted)}
.plai .art thead th{font-family:var(--mono); color:var(--dim); font-weight:400; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.09em; border-bottom:1px solid var(--accent)}
.plai .art tbody tr:hover{background:var(--bg-2)}
.plai .art td.c{color:var(--text); font-weight:600}
.plai .cta-box{background:var(--bg-2); border:1px solid var(--border);
  border-top:2px solid var(--accent); padding:24px; margin:30px 0; text-align:center}
.plai .cta-box h3{font-size:1.1rem; margin-bottom:6px}
.plai .cta-box p{color:var(--muted); margin-bottom:16px; font-size:.9rem}
.plai .related{border-top:1px solid var(--border); margin-top:34px; padding:24px 0 40px}
/* Quand « Guides liés » suit directement la FAQ, le border-bottom du dernier
   <details> et le border-top de .related dessinent deux traits séparés par la
   marge. On supprime celui de .related : la FAQ ferme déjà le bloc. */
.plai .faq + .related{border-top:none; padding-top:0}
.plai .related .eyebrow{margin-bottom:10px}
.plai .related a,.plai .related a:hover{display:inline-block; margin-right:18px; color:var(--accent)}
.plai .related a:hover{text-decoration:underline}

/* ---------- 17. OUTIL — CALCULATEUR (clc-*) ---------- */
.plai .clc{background:var(--bg); border:1px solid var(--border); margin:26px 0}
.plai .clc-head{padding:20px 24px; border-bottom:1px solid var(--border)}
.plai .clc-head h3{margin:0 0 4px; font-size:1.2rem}
.plai .clc-head p{margin:0; color:var(--muted); font-size:.85rem}
.plai .clc-grid{display:grid; grid-template-columns:1fr 1fr}
.plai .clc-inputs{padding:20px 24px; border-right:1px solid var(--border)}
.plai .clc-f{margin-bottom:16px}
.plai .clc-f label{display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); margin-bottom:6px}
.plai .clc-f .clc-row{display:flex; align-items:center; gap:8px}
.plai .clc-f input[type=number]{width:100%; background:var(--sunk); border:1px solid var(--border-2);
  color:var(--text); padding:10px 11px; font-family:var(--mono); font-size:.9rem}
.plai .clc-f input:focus{border-color:var(--accent)}
.plai .clc-f .clc-unit{font-family:var(--mono); color:var(--dim); font-size:.75rem; white-space:nowrap}
.plai .clc-f input[type=range]{width:100%; accent-color:var(--accent); margin-top:8px}
.plai .clc-results{padding:20px 24px; background:var(--bg-2)}
.plai .clc-verdict{font-size:.95rem; font-weight:600; padding:12px 14px; margin-bottom:18px;
  background:rgba(122,181,29,.1); border:1px solid rgba(122,181,29,.4)}
.plai .clc-verdict.is-cloud{background:rgba(90,159,212,.1); border-color:rgba(90,159,212,.4)}
.plai .clc-bars{margin:16px 0 4px}
.plai .clc-bar{height:24px; margin:8px 0; display:flex; align-items:center; padding:0 10px;
  font-family:var(--mono); font-size:.7rem; white-space:nowrap; min-width:60px}
/* Aplats unis — les dégradés sur les barres faisaient « dashboard SaaS » */
.plai .clc-bar.is-local{background:var(--accent); color:var(--accent-ink)}
.plai .clc-bar.is-cloud{background:var(--blue); color:#04121f}
.plai .clc-stat{display:flex; justify-content:space-between; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--border)}
.plai .clc-stat:last-of-type{border-bottom:none}
.plai .clc-stat .clc-k{color:var(--muted); font-size:.85rem}
.plai .clc-stat .clc-v{font-family:var(--mono); font-size:1.05rem; font-weight:700; color:var(--text)}
.plai .clc-v.is-green{color:var(--accent)}
.plai .clc-v.is-blue{color:var(--blue)}
.plai .clc-v.is-warn{color:var(--warn)}
.plai .clc-cta{margin-top:20px; text-align:center}
.plai .clc-cta small{display:block; font-family:var(--mono); color:var(--dim); margin-top:8px; font-size:.7rem}
.plai .clc-note{font-family:var(--mono); color:var(--dim); font-size:.7rem;
  padding:12px 24px; border-top:1px solid var(--border)}

/* ---------- 18. OUTIL — SÉLECTEUR GPU (sel-*) ---------- */
.plai .sel{background:var(--bg); border:1px solid var(--border); margin:26px 0}
.plai .sel-head{padding:20px 24px; border-bottom:1px solid var(--border)}
.plai .sel-head h3{margin:0 0 4px; font-size:1.2rem}
.plai .sel-head p{margin:0; color:var(--muted); font-size:.85rem}
.plai .sel-body{padding:20px 24px}
.plai .sel-fields{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px}
.plai .sel-f label{display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); margin-bottom:6px}
.plai .sel-f select{width:100%; background:var(--sunk); border:1px solid var(--border-2);
  color:var(--text); padding:10px 11px; font-size:.9rem; font-family:inherit}
.plai .sel-f select:focus{border-color:var(--accent)}
.plai .sel-result{margin-top:22px; background:var(--bg-2); border:1px solid var(--border); padding:20px}
.plai .sel-vram{display:flex; align-items:baseline; gap:10px; margin-bottom:16px}
.plai .sel-vram .sel-big{font-family:var(--mono); font-size:2rem; font-weight:700; color:var(--accent)}
.plai .sel-vram .sel-lbl{color:var(--muted); font-size:.85rem}
.plai .sel-reco{display:flex; align-items:center; gap:14px; padding:14px;
  background:var(--sunk); border:1px solid var(--border-2); border-left:2px solid var(--accent)}
.plai .sel-reco .sel-badge{font-family:var(--mono); font-size:1.5rem; color:var(--accent)}
.plai .sel-reco .sel-name{font-size:1.05rem; font-weight:700; color:var(--text)}
.plai .sel-reco .sel-price{font-family:var(--mono); color:var(--muted); font-size:.8rem}
.plai .sel-reco .sel-desc{font-size:.85rem; color:var(--text-2); margin-top:2px}
.plai .sel-cta{margin-top:18px; text-align:center}
.plai .sel-cta .btn{margin:0 4px}
.plai .sel-cta small{display:block; font-family:var(--mono); color:var(--dim); margin-top:8px; font-size:.7rem}
.plai .sel-note{font-family:var(--mono); color:var(--dim); font-size:.7rem;
  padding:12px 24px; border-top:1px solid var(--border)}

/* ---------- 19. RESPONSIVE ---------- */
@media(max-width:960px){
  .plai h1{font-size:32px}
  .plai h2{font-size:24px}
  .plai .g-4{grid-template-columns:repeat(2,1fr)}
  .plai .ladder{grid-template-columns:repeat(2,1fr)}
  .plai .split{grid-template-columns:1fr}
}
@media(max-width:900px){
  .plai .hero.split-2 .wrap{grid-template-columns:1fr; gap:28px}
  .plai .cols{grid-template-columns:1fr; gap:22px}
  .plai .side{position:static}
  .plai .clc-grid{grid-template-columns:1fr}
  .plai .clc-inputs{border-right:none; border-bottom:1px solid var(--border)}
  .plai .sel-fields{grid-template-columns:1fr}
}
@media(max-width:820px){
  .plai .tools{grid-template-columns:1fr}
}
@media(max-width:760px){
  .plai .scrollhint{display:block}
  .plai .step{grid-template-columns:auto 1fr}
  .plai .step .dur{grid-column:2}
  .plai .brand{height:64px; padding:0 18px}
  .plai .brand img{width:88px}
  /* picker en 2×2 : à 4 de front les libellés et les tags se cassent */
  .plai .picker button{flex:1 1 calc(50% - 1px)}
}
@media(max-width:980px){
  .plai .vhead{display:none}
  .plai .vrow{grid-template-columns:1fr 1fr; gap:8px}
  .plai .vrow .pre{display:none}
}
@media(max-width:640px){
  .plai section{padding:44px 0}
  .plai .g-2,.plai .g-3,.plai .g-4{grid-template-columns:1fr}
  .plai .frow{grid-template-columns:1fr}
  .plai .hero{padding:40px 0}
  .plai .ladder{grid-template-columns:1fr}
  .plai .wrap{padding:0 20px}
}

/* ---------- 20. MOUVEMENT RÉDUIT ---------- */
/* Aucune animation n'est décorative ici : chacune porte une information.
   Elles sont donc désactivées, pas remplacées. */
@media(prefers-reduced-motion:reduce){
  .plai *,.plai *::before,.plai *::after{transition:none !important; animation:none !important}
  .plai .marquee-track{width:auto; flex-wrap:wrap}
  .plai .marquee-track .dup{display:none}
  .plai .marquee{-webkit-mask-image:none; mask-image:none}
}