/* ==========================================================================
   whypayfor.com — design system
   One stylesheet for every page type. Edit here, never in build.py.
   ========================================================================== */

:root{
  /* surfaces */
  --bg:#FFFFFF; --card:#FFFFFF; --soft:#F2F1F7; --line:#E8E6EF;
  /* text */
  --ink:#1B1B1B; --body:#55525E; --dim:#6A6573;
  /* system accents */
  --acc:#5B54D9; --accbg:#E7E5F9;
  /* money — montants et labels free, jamais un bouton ni un lien */
  --money:#1F7A56; --moneybg:#E3F3EC;
  /* inline links inside page copy */
  --link:#5B54D9; --link-line:rgba(91,84,217,.38);
  /* soft rose band — the pastel from the homepage sticker, used as the surface
     for table headers and box headers instead of the neutral grey-brown.
     Green stays the brand colour; this is decoration, not meaning. */
  --band:#EAEDFF; --band-line:#D6DCFF; --band-ink:#2536A8;
  --warn:#8A5A0E; --warnbg:#FDF6E8; --warnline:#F2E3C7;
  /* category palette — tint / ink / solid */
  --peach:#FDF1E6; --peach-i:#9F6029; --peach-s:#F0B27A;
  --mint:#EAF6F1;  --mint-i:#2E7A64;  --mint-s:#8FD0C0;
  --peri:#EEEFFB;  --peri-i:#5560AD;  --peri-s:#A8B4F0;
  --rose:#FCEDF0;  --rose-i:#A75367;  --rose-s:#F0A8B4;
  --olive:#F2F4E7; --olive-i:#69752F; --olive-s:#C9D48F;
  --lilac:#F4EFFA; --lilac-i:#74589F; --lilac-s:#C4A8E0;
  --sky:#EAF2FA;   --sky-i:#3A6890;   --sky-s:#9EC0DE;
  --sand:#FBF4E6;  --sand-i:#8E7020;  --sand-s:#E0C67E;
  /* metrics */
  --radius:12px; --nav-h:58px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.021em;margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:#D8EDE2;color:var(--ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:9px 14px;border-radius:8px;z-index:99}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ── home : bandes alternees + mini-nav collante ───────────────────────
   Mockups "F" (bandes + mini-nav) et "G" (+ cards allegees) valides par
   Matthis (sept 2026) : la couleur de fond fait toute la separation entre
   blocs de la home, la mini-nav permet de sauter directement a un bloc
   plutot que de scroller, utile maintenant que la home a plusieurs blocs
   (auteur, score, checks, FAQ, SEO) en plus des cartes. */
.hsection{width:100%}
.hsection .wrap{padding-top:50px;padding-bottom:50px}
.hsection .wrap>:first-child{margin-top:0}
.hsection .wrap>:last-child{margin-bottom:0}
.hsection:nth-of-type(odd){background:var(--bg)}
.hsection:nth-of-type(even){background:var(--soft)}
.hsection[data-key="sponsors"]{background:#FBFAF7}
.sectionnav{position:sticky;top:var(--nav-h);z-index:39;background:rgba(252,251,249,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sectionnav .in{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;gap:4px;
  overflow-x:auto;scrollbar-width:none}
.sectionnav .in::-webkit-scrollbar{display:none}
.sectionnav a{padding:12px 12px;font-size:13px;font-weight:600;color:var(--dim);
  white-space:nowrap;border-bottom:2px solid transparent;transition:color .12s,border-color .12s}
.sectionnav a:hover{color:var(--ink)}
.sectionnav a.active{color:var(--acc);border-bottom-color:var(--acc)}
@media(max-width:640px){.hsection .wrap{padding-top:38px;padding-bottom:38px}}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── header ─────────────────────────────────────────────────────────── */
.nav{border-bottom:1px solid var(--line);background:rgba(252,251,249,.88);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:40}
.nav .in{max-width:1180px;margin:0 auto;padding:0 24px;height:var(--nav-h);display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;color:var(--ink);font-size:15.5px;letter-spacing:-.03em}
.brand .mk{width:25px;height:25px;border-radius:7px;background:var(--acc);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.nav nav{display:flex;gap:2px;font-size:14px}
.nav nav a{padding:7px 11px;border-radius:8px;transition:background .12s,color .12s}
.nav nav a:hover,.nav nav a[aria-current]{background:var(--soft);color:var(--ink)}
.nav .r{margin-left:auto;display:flex;align-items:center;gap:8px}
.ghost{padding:7px 12px;border-radius:8px;font-size:14px}
.ghost:hover{background:var(--soft);color:var(--ink)}
.solid{background:var(--ink);color:#fff;padding:8px 14px;border-radius:9px;font-size:13.5px;font-weight:500;transition:background .12s}
.solid:hover{background:#000}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:7px 10px;cursor:pointer}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:1fr 348px;gap:52px;padding:48px 0 26px;align-items:center}
.hero.solo{grid-template-columns:1fr;gap:0;padding:44px 0 30px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
  border-radius:99px;padding:4px 12px 4px 5px;font-size:12.5px;margin-bottom:20px}
.eyebrow b{background:var(--accbg);color:var(--acc);border-radius:99px;padding:2px 9px;font-weight:600;font-size:12px}
/* max-width + balance : sans ça le titre laisse « on » seul sur une ligne, et le
   dégradé démarre sur une ligne orpheline au lieu de courir sur la phrase. */
.hero h1{font-size:clamp(31px,4.2vw,45px);font-weight:680;line-height:1.1;margin-bottom:15px;
  max-width:19ch;text-wrap:balance}
.hero.solo h1{max-width:22ch}
.lede{font-size:17px;max-width:58ch;margin:0 0 24px}
.lede b{color:var(--ink);font-weight:600}
.social{display:flex;align-items:center;gap:12px;font-size:13.5px}
.faces{display:flex}
.faces i{display:block;width:28px;height:28px;border-radius:50%;border:2.5px solid var(--bg);
  margin-left:-9px;font-style:normal;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.faces i:first-child{margin-left:0}
.social b{color:var(--ink);font-weight:600}
.trustbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.trustbar li{font-size:11.5px;font-weight:600;color:var(--dim);background:var(--soft);
  border:1px solid var(--line);border-radius:99px;padding:5px 12px;letter-spacing:.01em}

/* ── card shelf (hero) ──────────────────────────────────────────────── */
/* Concept 03 valide par Matthis : une colonne de VRAIES cartes card() qui
   defile a DROITE du H1 (comme l'ancien savings_panel), pas en dessous.
   Verticale et masquee en haut : les cartes disparaissent dans le fondu
   avant de toucher le titre, elles ne s'alignent jamais dessus au pixel
   pres. La liste est dupliquee une fois dans le HTML (card_shelf() dans
   build.py) pour boucler sans a-coup ; le keyframe glisse exactement la
   moitie du track. */
.shelf{width:100%;height:min(460px,72vh);overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 88%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 14%,#000 88%,transparent)}
.shelf-track{display:flex;flex-direction:column;gap:14px;width:100%;
  animation:shelf-scroll-y 38s linear infinite}
.shelf:hover .shelf-track{animation-play-state:paused}
.shelf .card{width:100%;flex:none}
@keyframes shelf-scroll-y{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media (prefers-reduced-motion: reduce){
  .shelf-track{animation:none}
  .shelf{overflow-y:auto}
}
@media (max-width:900px){
  .shelf{height:340px}
}

/* ── filter bar ─────────────────────────────────────────────────────── */
.bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 0;
  display:flex;gap:7px;align-items:center;flex-wrap:wrap;position:sticky;top:var(--nav-h);
  background:rgba(252,251,249,.94);backdrop-filter:blur(10px);z-index:30}
.chip{border:1px solid var(--line);border-radius:99px;padding:6px 13px;font-size:13.5px;background:var(--card);
  display:inline-flex;align-items:center;gap:7px;transition:border-color .12s,background .12s}
.chip .d{width:8px;height:8px;border-radius:50%}
.chip:hover{border-color:#DCD6CB;color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500}
.count{padding:22px 0 14px;font-size:13.5px;color:var(--dim)}
.count b{color:var(--ink);font-weight:600}

/* ── cards ──────────────────────────────────────────────────────────── */
/* cartes compactes : le lecteur scrolle moins et la grille respire plus */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  display:flex;flex-direction:column;overflow:hidden;transition:border-color .14s,box-shadow .14s,transform .14s}
.card:hover{border-color:#DCD6CB;box-shadow:0 14px 28px -24px rgba(27,26,23,.55);transform:translateY(-2px)}
/* cards allegees dans les sections de la home (Option G, meme retour) : le
   contour dur laisse place a un filet quasi invisible et un fond qui bascule
   d'une teinte a l'autre selon la bande, comme la grille de listings de
   tinystartups.com. Scope a .hsection : les pages categorie (meme classe
   .card) gardent le traitement d'origine, jamais discute pour ce template. */
.hsection .card{border-color:rgba(20,19,26,.07);box-shadow:none}
.hsection:nth-of-type(odd) .card{background:var(--soft)}
.hsection:nth-of-type(even) .card{background:var(--card)}
.hsection .card:hover{border-color:rgba(20,19,26,.14);
  box-shadow:0 12px 26px -22px rgba(27,26,23,.4)}
/* le pastille pays (fond --soft par defaut) redevient visible meme sur une
   card qui a elle-meme un fond --soft (bandes impaires) */
.hsection:nth-of-type(odd) .card .ctry{background:var(--card);border:1px solid var(--line)}
.rail{height:4px;width:100%}
.pad{padding:13px 14px 13px;display:flex;flex-direction:column;gap:9px;flex:1}
.ct{display:flex;align-items:flex-start;gap:9px}
.ico{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.ico svg{width:15px;height:15px;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.card .nm{min-width:0}
.card h3{font-size:15px;font-weight:800;line-height:1.22;letter-spacing:-.02em}
.card .cat{font-size:11.5px;font-weight:500;margin-top:1px}
.card .fl{margin-left:auto;flex:none;font-size:10.5px;padding:2px 9px}
.card .ctry{margin-left:auto;flex:none;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  padding:3px 10px;border-radius:99px;background:var(--soft);color:var(--dim);white-space:nowrap}
/* Le resume est coupe a DEUX LIGNES rendues, pas a un nombre de caracteres :
   la coupe suit la largeur reelle de la carte et finit par des points de
   suspension en bout de ligne, jamais au milieu d'un mot. Le texte entier reste
   dans le DOM — seul l'affichage est tronque, donc rien n'est perdu pour un
   moteur ni pour un lecteur d'ecran. La fiche complete porte la phrase entiere. */
.card p{margin:0;font-size:13px;line-height:1.45;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(2 * 1.45em)}
.cscore{font-size:11px;font-weight:600;color:var(--dim);letter-spacing:.01em;
  padding-top:8px;border-top:1px solid var(--line)}
.cscore b{color:var(--acc);font-weight:800;font-variant-numeric:tabular-nums}
.cscore small{color:var(--dim);font-weight:500}
/* le pied : contre quoi, et a quel point. Plus de montant — il est deja dans le
   classement et dans le tableau des prix, et douze fois d'affilee il ne dit plus rien. */
.cfoot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-top:9px;border-top:1px solid var(--line)}
.vs{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.03em;flex:none}
.sc small{font-size:11px;font-weight:600;color:var(--dim);letter-spacing:0}

/* ── la navigation par categorie, accueil ──────────────────────────────── */
.cnavgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin:0 0 34px}
.cnav{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;
  transition:border-color .12s,transform .12s}
.cnav:hover{border-color:var(--acc);transform:translateY(-2px)}
.cnav .pad{display:flex;flex-direction:column;gap:6px;padding:13px}
.cnav .ico{width:30px;height:30px}
.cn-t{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.cn-m{font-size:11px;color:var(--dim);line-height:1.3}
.cn-m b{color:var(--money);font-weight:700}
@media(max-width:900px){.cnavgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.cnavgrid{grid-template-columns:repeat(2,1fr)}}

/* category colouring — one class does the whole card */
.k-photo  .rail{background:#F72585} .k-photo  .ico{background:#FCE3EF} .k-photo  .ico svg{stroke:#B0186A} .k-photo  .cat{color:#B0186A} .k-photo  .save{background:var(--moneybg);color:var(--money)} .k-photo  .meta .hl{color:var(--ink)}
.k-video  .rail{background:#4ECDC4} .k-video  .ico{background:#E6F7F5} .k-video  .ico svg{stroke:#1F7A72} .k-video  .cat{color:#1F7A72} .k-video  .save{background:var(--moneybg);color:var(--money)} .k-video  .meta .hl{color:var(--ink)}
.k-audio  .rail{background:#2A9D8F} .k-audio  .ico{background:#E4F4F1} .k-audio  .ico svg{stroke:#1E6E63} .k-audio  .cat{color:#1E6E63} .k-audio  .save{background:var(--moneybg);color:var(--money)} .k-audio  .meta .hl{color:var(--ink)}
.k-ai  .rail{background:#A78BFA} .k-ai  .ico{background:#F1ECFD} .k-ai  .ico svg{stroke:#5F4DB0} .k-ai  .cat{color:#5F4DB0} .k-ai     .save{background:var(--moneybg);color:var(--money)} .k-ai     .meta .hl{color:var(--ink)}
.k-learn  .rail{background:#FFD166} .k-learn  .ico{background:#FFF6DE} .k-learn  .ico svg{stroke:#8A6A12} .k-learn  .cat{color:#8A6A12} .k-learn  .save{background:var(--moneybg);color:var(--money)} .k-learn  .meta .hl{color:var(--ink)}
.k-files  .rail{background:#E76F51} .k-files  .ico{background:#FBE9E4} .k-files  .ico svg{stroke:#A83F26} .k-files  .cat{color:#A83F26} .k-files  .save{background:var(--moneybg);color:var(--money)} .k-files  .meta .hl{color:var(--ink)}
.k-sec  .rail{background:#F4A261} .k-sec  .ico{background:#FCEEE1} .k-sec  .ico svg{stroke:#A85C1E} .k-sec  .cat{color:#A85C1E} .k-sec    .save{background:var(--moneybg);color:var(--money)} .k-sec    .meta .hl{color:var(--ink)}
.k-health  .rail{background:#95D5B2} .k-health  .ico{background:#EAF7F0} .k-health  .ico svg{stroke:#2F7A54} .k-health  .cat{color:#2F7A54} .k-health .save{background:var(--moneybg);color:var(--money)} .k-health .meta .hl{color:var(--ink)}
.k-stream  .rail{background:#5B54D9} .k-stream  .ico{background:#ECEAFB} .k-stream  .ico svg{stroke:#423CB0} .k-stream  .cat{color:#423CB0} .k-stream .save{background:var(--moneybg);color:var(--money)} .k-stream .meta .hl{color:var(--ink)}
.k-utils  .rail{background:#FF6B6B} .k-utils  .ico{background:#FDECEC} .k-utils  .ico svg{stroke:#B23A3A} .k-utils  .cat{color:#B23A3A} .k-utils  .save{background:var(--moneybg);color:var(--money)} .k-utils  .meta .hl{color:var(--ink)}

/* free-tier label — the consumer-facing verdict on every card */
.fl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  border-radius:99px;padding:3px 10px 3px 8px;white-space:nowrap;letter-spacing:.005em}
.fl i{width:7px;height:7px;border-radius:50%;display:block;font-style:normal;flex:none}
/* deux etiquettes, deux roles : le vert dit « argent », le cobalt dit « ca coute ».
   Voir config.FREEDOM — le libelle est calcule, pas saisi. */
/* trois etats : vert = rien ne coince, ambre = il y a un mur, cobalt = ca coute.
   Le libelle porte le sens, la couleur ne le porte jamais seule. Voir config.FREEDOM. */
.fl-free{background:#E9F6EF;color:#0E7A4F} .fl-free i{background:#3F9D77}
.fl-limited{background:#FCF6E4;color:#8A6D1C} .fl-limited i{background:#D9AE3C}
.fl-paid{background:var(--accbg);color:var(--acc)} .fl-paid i{background:var(--acc)}
.labels{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}

/* watch-list card */
.card.watch{background:var(--warnbg);border-color:var(--warnline)}
.card.watch .rail{background:#E8C98A}
.card.watch .ico{background:var(--card)} .card.watch .ico svg{stroke:var(--warn)}
.card.watch h3,.card.watch .cat{color:var(--warn)}
.card.watch .save{background:var(--card);color:var(--warn)}
.card.watch .alt b{background:var(--card);border-color:var(--warnline)}

/* ── pagination ─────────────────────────────────────────────────────── */
.pager{display:flex;justify-content:center;gap:6px;padding:32px 0;flex-wrap:wrap}
.pager a,.pager span{border:1px solid var(--line);border-radius:9px;min-width:35px;height:35px;
  display:flex;align-items:center;justify-content:center;font-size:13.5px;background:var(--card)}
.pager span{border-color:transparent;background:none;color:var(--dim)}
.pager a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.pager a:hover:not([aria-current]){background:var(--soft);color:var(--ink)}

/* ── generic blocks ─────────────────────────────────────────────────── */
.rule{margin-top:52px;border:1px solid var(--line);border-radius:18px;background:var(--card);padding:30px;
  display:grid;grid-template-columns:1fr 1.25fr;gap:38px;align-items:center;position:relative;overflow:hidden}
.rule::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;
  background:var(--acc)}
.rule h2{font-size:23px;font-weight:650;margin-bottom:9px}
.rule ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:14.5px}
.rule li{display:flex;gap:11px}
.rule li i{font-style:normal;width:21px;height:21px;border-radius:7px;background:var(--rose);color:var(--rose-i);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex:none;margin-top:1px}
.rule li b{color:var(--ink);font-weight:600}

/* text stays at a comfortable measure; components get room to breathe */
.prose{max-width:940px}
.prose > p,.prose > ul,.prose > ol,.prose > h2,.prose > h3,.prose > h4{max-width:74ch}
.prose h2{font-size:20px;font-weight:650;margin:26px 0 10px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:16.5px;font-weight:600;margin:20px 0 6px}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 14px;padding-left:20px}
.prose li{margin-bottom:5px}
.prose .src-note{font-size:13px;color:var(--dim);font-style:italic;margin:-4px 0 14px}

.seo{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}

/* ── breadcrumb ─────────────────────────────────────────────────────── */
.crumbs{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--dim);padding:20px 0 0;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.5}

/* ── entry page ─────────────────────────────────────────────────────── */
.entry{display:grid;grid-template-columns:1fr 330px;gap:44px;padding:14px 0 0;align-items:start}
.ehead{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.ehead .ico{width:60px;height:60px;border-radius:16px}
.ehead .ico svg{width:29px;height:29px}
.ehead h1{font-size:clamp(28px,3.6vw,38px);font-weight:680;line-height:1.1}
.ehead .sub{font-size:14.5px;color:var(--dim);margin-top:2px}
.ehead .sub s{color:var(--dim)}
.ehead .best-for{font-size:14.5px;color:var(--dim);margin-top:6px}
.ehead .best-for b{color:var(--ink);font-weight:600}
/* ── le verdict : la première chose qu'on doit lire ────────────────────── */
.verdict{border:1px solid var(--line);border-left:4px solid var(--acc);
  border-radius:var(--radius);background:var(--card);margin-bottom:26px;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,19,26,.05)}
.vtop{display:flex;gap:20px;align-items:flex-start;padding:20px 22px 18px}
.vscore{flex:none;text-align:center;min-width:96px;padding-top:2px}
.vnum{display:block;font-size:44px;font-weight:800;letter-spacing:-.045em;line-height:.95;
  color:var(--ink)}
.vnum small{font-size:15px;font-weight:600;color:var(--dim);letter-spacing:0}
.vband{display:block;font-size:12px;font-weight:700;color:var(--money);margin-top:6px;line-height:1.25}
.vtext h2{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin:0 0 7px}
.vtext p{margin:0;font-size:17px;line-height:1.5;color:var(--ink);font-weight:450}
.vfacts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  background:var(--bg)}
.vfacts>div{padding:11px 16px;border-left:1px solid var(--line);display:flex;
  flex-direction:column;gap:2px}
.vfacts>div:first-child{border-left:0}
.vfacts .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  font-weight:600}
.vfacts b{font-size:15px;font-weight:700;color:var(--ink);line-height:1.25}
.vfacts b.save{color:var(--money)}
.vfacts b small{font-size:11.5px;font-weight:600;color:var(--dim)}
@media(max-width:720px){
  .vtop{flex-direction:column;gap:12px;padding:18px}
  .vscore{display:flex;align-items:baseline;gap:12px;text-align:left;min-width:0}
  .vband{margin-top:0}
  .vfacts{grid-template-columns:1fr 1fr}
  .vfacts>div:nth-child(3){border-left:0}
  .vfacts>div:nth-child(n+3){border-top:1px solid var(--line)}
}
.pricebox .peryear{font-size:11.5px;color:var(--dim);line-height:1.45;margin-top:8px}
.fl-once{background:var(--accbg);color:var(--acc)} .fl-once i{background:var(--acc)}
.kd-once{background:var(--accbg);color:var(--acc)}
.breaks{border:1px solid var(--warnline);background:var(--warnbg);border-radius:var(--radius);padding:18px 20px;margin:0 0 26px}
.breaks h2{font-size:16px;font-weight:650;color:var(--warn);margin-bottom:6px}
.breaks ul{margin:0;padding-left:19px;font-size:14.5px}
.breaks li{margin-bottom:4px}

.aside-box{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden;margin-bottom:16px}
.aside-box .h{padding:11px 16px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;
  letter-spacing:.11em;color:var(--dim);font-weight:700;background:var(--soft);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.aside-box .b{padding:14px 16px}
.pricebox{text-align:center;padding:20px 16px}
.pricebox .was{font-size:14px;color:var(--dim);text-decoration:line-through}
.pricebox .now{font-size:40px;font-weight:700;color:var(--money);letter-spacing:-.045em;line-height:1;margin:4px 0}
.pricebox .lab{font-size:12.5px;color:var(--dim)}
.pricebox .go{display:block;margin-top:14px;background:var(--ink);color:#fff;border-radius:10px;
  padding:11px;font-weight:600;font-size:14px}
.pricebox .go:hover{background:#000}
.spec{display:grid}
.sr{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:6px 0;border-bottom:1px solid var(--line)}
.sr:last-child{border-bottom:0}
.sr .lb{color:var(--dim);white-space:nowrap}
.sr .fill{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-2px);min-width:8px}
.sr .vl{color:var(--ink);font-weight:500;white-space:nowrap;text-align:right}
.linklist{display:grid;gap:2px}
.linklist a{display:flex;justify-content:space-between;gap:10px;padding:7px 9px;border-radius:8px;font-size:13.5px}
.linklist a:hover{background:var(--soft);color:var(--ink)}
.linklist a span{color:var(--dim);font-size:12.5px}

/* related strip */
.related{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.related h2{font-size:20px;font-weight:650;margin-bottom:4px}
.related .s{color:var(--dim);font-size:14px;margin:0 0 20px}

/* ── category / listing header ──────────────────────────────────────── */
.lhead{padding:10px 0 26px}
.lhead h1{font-size:clamp(28px,3.8vw,40px);font-weight:680;line-height:1.12;margin-bottom:12px;max-width:22ch}
.lhead .lede{margin-bottom:16px}
.kpis{display:flex;gap:30px;flex-wrap:wrap}
.kpis div b{display:block;font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.kpis div span{font-size:12.5px;color:var(--dim)}

/* ── category index tiles ───────────────────────────────────────────── */
.cattiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ctile{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:18px;
  transition:border-color .14s,transform .14s}
.ctile:hover{transform:translateY(-2px)}
.ctile .ico{margin-bottom:12px}
.ctile h2{font-size:16.5px;font-weight:600;margin-bottom:2px}
.ctile .n{font-size:12.5px;color:var(--dim);margin-bottom:10px}
.ctile .ex{font-size:13px;color:var(--body);line-height:1.9}
.ctile .ex s{color:var(--dim)}
.ctile .sv{margin-top:10px;font-size:12.5px;font-weight:600}

/* ── footer ─────────────────────────────────────────────────────────── */
footer{margin-top:44px;border-top:1px solid var(--line);background:var(--card)}
.fcols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px;padding:34px 0 28px}
.fcols h4{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--dim);font-weight:700;margin-bottom:11px}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px}
.fcols a:hover{color:var(--ink)}
.fcols .about p{font-size:13.5px;margin:10px 0 0;max-width:36ch}
.fbot{border-top:1px solid var(--line);padding:16px 0 60px;font-size:12.5px;color:var(--dim);line-height:1.9}

/* ── responsive ─────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .hero{grid-template-columns:1fr;gap:34px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .cattiles{grid-template-columns:repeat(2,1fr)}
  .rule{grid-template-columns:1fr}
  .entry{grid-template-columns:1fr;gap:28px}
  .fcols{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:640px){
  .grid,.cattiles{grid-template-columns:1fr}
  .nav nav,.nav .r .ghost{display:none}
  .fcols{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
@media print{.nav,.bar,.shelf,.sectionnav,footer{display:none}body{background:#fff}}

/* ── checks table (entry page + method page) ────────────────────────────── */
.checks{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden;margin:0 0 26px}
.checks .h{padding:11px 18px;border-bottom:1px solid var(--line);background:var(--soft);
  font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--dim);font-weight:700;
  display:flex;justify-content:space-between}
.checks .row{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line);font-size:14px}
.checks .row:last-child{border-bottom:0}
.checks .q{flex:1;color:var(--ink);font-weight:500}
.checks .a{color:var(--body);text-align:right}
.checks .a.ok{color:var(--money);font-weight:600}
.checks .a.no{color:var(--warn);font-weight:600}
.checks .note{font-size:12.5px;color:var(--dim);display:block}

/* ── report a correction ────────────────────────────────────────────────── */
.aside-box.fix{background:var(--soft)}
.aside-box.fix .b p{margin:0 0 12px;font-size:13.5px}
.aside-box.fix .b p b{color:var(--ink);font-weight:600;white-space:nowrap}
.aside-box.fix .b p.tiny{margin:10px 0 0;font-size:12px;color:var(--dim)}
.fixbtn{display:block;text-align:center;border:1px solid var(--line);background:var(--card);
  border-radius:10px;padding:10px;font-size:13.5px;font-weight:600;color:var(--ink);
  transition:border-color .12s,background .12s}
.fixbtn:hover{border-color:var(--acc);color:var(--acc)}
.fixline{margin:18px 0 0;font-size:13.5px;color:var(--dim)}
.fixline a{color:var(--acc);font-weight:600;border-bottom:1px solid rgba(47,75,255,.32)}

/* ── nav: dropdowns, submit button, mobile menu ─────────────────────────── */
.nav nav a svg,.dtop svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.drop{position:relative}
.dtop{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:8px;
  font-size:14px;transition:background .12s,color .12s}
.dtop:hover,.drop:hover .dtop,.drop:focus-within .dtop,.drop.open .dtop{background:var(--soft);color:var(--ink)}
.drop .dmenu{position:absolute;top:calc(100% + 6px);left:0;min-width:186px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 18px 34px -22px rgba(27,26,23,.5);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s,transform .14s,visibility .14s;z-index:50}
.drop:hover .dmenu,.drop:focus-within .dmenu{opacity:1;visibility:visible;transform:translateY(0)}
.drop .dmenu a{display:block;padding:8px 11px;border-radius:8px;font-size:14px;white-space:nowrap}
.drop .dmenu a:hover{background:var(--soft);color:var(--ink)}
.drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}

.submit{display:inline-flex;align-items:center;gap:7px;background:var(--acc);color:#fff;
  padding:9px 16px;border-radius:10px;font-size:14px;font-weight:600;
  box-shadow:0 8px 18px -10px rgba(24,107,78,.7);transition:background .12s,transform .12s,box-shadow .12s}
.submit svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.submit:hover{background:#14573F;transform:translateY(-1px);box-shadow:0 12px 22px -10px rgba(24,107,78,.75)}

#navtoggle{display:none}
@media(max-width:860px){
  .nav .in{gap:12px}
  .burger{display:flex;align-items:center;justify-content:center;margin-left:auto;order:2}
  .burger svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round}
  .nav .r{order:3;margin-left:0}
  .nav nav{order:4;display:none;width:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--line);padding:8px 0 14px}
  #navtoggle:checked ~ nav{display:flex}
  .nav .in{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px}
  .nav nav > a,.dtop{padding:11px 4px;font-size:15px;border-radius:0}
  .drop .dmenu{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    padding:0 0 4px 14px;min-width:0;background:none}
  .drop .dmenu a{padding:9px 4px;font-size:14.5px;color:var(--dim)}
  .submit{padding:8px 13px;font-size:13.5px}
}
@media(max-width:640px){.nav nav{display:none}#navtoggle:checked ~ nav{display:flex}}

/* ── homepage FAQ ───────────────────────────────────────────────────────── */
.faqs{display:grid;grid-template-columns:300px 1fr;gap:44px;margin-top:44px;
  padding-top:34px;border-top:1px solid var(--line);align-items:start}
.fhead h2{font-size:23px;font-weight:650;margin-bottom:9px}
.fhead p{margin:0;font-size:14.5px}
.fhead a{color:var(--acc);font-weight:600;border-bottom:1px solid rgba(47,75,255,.32)}
.flist{border-top:1px solid var(--line)}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 2px;cursor:pointer;list-style:none;font-size:16px;font-weight:600;color:var(--ink)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:hover{color:var(--acc)}
details.faq summary svg{width:16px;height:16px;flex:none;stroke:var(--dim);fill:none;
  stroke-width:2.2;stroke-linecap:round;transition:transform .18s}
details.faq[open] summary svg{transform:rotate(45deg)}
details.faq .fa{padding:0 44px 18px 2px}
details.faq .fa p{margin:0;font-size:14.5px}
details.faq .fa b{color:var(--ink);font-weight:600}
@media(max-width:860px){.faqs{grid-template-columns:1fr;gap:22px}}

/* same-app free plan badge */
.fl.kd-own{background:#EEF0FB;color:#4A55A2}
.fl.kd-own i{background:#8894D8}

/* ── replacement score breakdown ────────────────────────────────────────── */
.aside-box .h a{text-transform:none;letter-spacing:0;font-weight:600;color:var(--acc);font-size:12px}
.scorehead{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.scorehead .big{font-size:34px;font-weight:700;color:var(--ink);letter-spacing:-.04em;line-height:1}
.scorehead .big small{font-size:14px;font-weight:500;color:var(--dim);letter-spacing:0}
.scorehead .bandname{font-size:13px;color:var(--money);font-weight:600;line-height:1.3}
.scorerows{display:grid;gap:9px}
.sc{display:grid;grid-template-columns:1fr 64px 30px;gap:9px;align-items:center;font-size:12.5px}
.sc .l{color:var(--body)}
.sc .track{height:6px;border-radius:99px;background:var(--soft);overflow:hidden}
.sc .track i{display:block;height:100%;border-radius:99px;background:var(--money)}
.sc .v{color:var(--dim);text-align:right}

/* ── scoring page tables ────────────────────────────────────────────────── */
.scoretable{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px}
.scoretable th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dim);font-weight:700;padding:0 12px 8px 0;border-bottom:1px solid var(--line)}
.scoretable td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.scoretable td b{color:var(--ink);font-weight:600}
.scoretable td.n{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.scoretable td.n b.free{color:var(--money)}
.scoretable tr.tot td{border-bottom:0;border-top:2px solid var(--ink);color:var(--ink)}
.prose code{background:var(--soft);border:1px solid var(--line);border-radius:6px;
  padding:2px 7px;font-size:13.5px}

/* ── inline links inside page copy ──────────────────────────────────────────
   Anything a reader can click *within a sentence* is blue and underlined.
   Navigation, buttons, cards and the "see all →" affordances keep the brand
   green, so the two never get confused. */
.prose a,
.fa a,
.fhead a,
.verdict a,
.breaks a,
.scoretable a,
.lhead .lede a,
.hero .lede a,
.seo a,
.rule a,
.related .s a,
.aside-box .b p a,
.fixline a,
.checks a,
.fbot a{
  color:var(--link);
  text-decoration:underline;
  text-decoration-color:var(--link-line);
  text-decoration-thickness:1px;
  text-underline-offset:2.5px;
  border-bottom:0;
  transition:text-decoration-color .12s,color .12s;
}
.prose a:hover,.fa a:hover,.fhead a:hover,.verdict a:hover,.breaks a:hover,
.scoretable a:hover,.lhead .lede a:hover,.hero .lede a:hover,.seo a:hover,
.rule a:hover,.related .s a:hover,.aside-box .b p a:hover,.fixline a:hover,
.checks a:hover,.fbot a:hover{
  color:#1F5586;
  text-decoration-color:currentColor;
}

/* ══════════════════════════════════════════════════════════════════════════
   EDITORIAL COMPONENTS — for the About / Manifesto / Method / Scoring pages.
   Use them inside a page's body HTML; they are all plain markup + CSS.
   ══════════════════════════════════════════════════════════════════════════ */

/* author card ───────────────────────────────────────────────────────────── */
.author{display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:start;
  border:1px solid var(--line);border-radius:18px;background:var(--card);padding:26px;margin:0 0 30px}
.avatar{width:132px;height:132px;border-radius:18px;overflow:hidden;flex:none;
  background:linear-gradient(150deg,#FDF1E6,#EAF6F1 55%,#EEEFFB);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar .mono{font-size:40px;font-weight:700;color:var(--ink);letter-spacing:-.04em;opacity:.62}
.author .who h2{font-size:22px;font-weight:650;margin:0 0 2px}
.author .who .role{font-size:14px;color:var(--dim);margin:0 0 12px}
.author .who p{margin:0 0 10px;font-size:15px}
.author .who p:last-child{margin-bottom:0}
.author .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.author .meta span{font-size:12.5px;background:var(--soft);border:1px solid var(--line);
  border-radius:99px;padding:4px 11px;color:var(--body)}

/* v25bis (retour Matthis) : contenu de l'option B (nom / role / bio sur
   leurs propres lignes, credentials en pilules), habillage de l'option C
   (liseret degrade en haut, photo ronde avec halo) - choisi apres 3
   mockups + un hybride. Voir CLAUDE.md. */
.authorstrip{position:relative;border:1px solid var(--line);border-radius:20px;
  background:var(--card);padding:26px 28px 22px;margin:28px 0 0;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,19,26,.04)}
.authorstrip::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:var(--spectrum)}
.authorstrip .row{display:flex;align-items:flex-start;gap:22px}
.authorstrip .avatar{width:88px;height:88px;border-radius:50%;flex:none;
  border:3px solid var(--accbg)}
.authorstrip .avatar .mono{font-size:32px}
.authorstrip .who{flex:1;min-width:0}
.authorstrip .who .name{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 1px}
.authorstrip .who .role{font-size:13px;color:var(--acc);font-weight:600;margin:0 0 9px}
.authorstrip .who p.bio{margin:0 0 13px;font-size:14px;line-height:1.55;color:var(--body);max-width:60ch}
.authorstrip .stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.authorstrip .stats span{font-size:11.5px;font-weight:700;background:var(--soft);
  border:1px solid var(--line);border-radius:99px;padding:4px 12px;color:var(--body)}
.authorstrip .who>a{color:var(--acc);font-weight:600;font-size:13.5px}
@media(max-width:700px){.authorstrip .row{flex-direction:column}}

/* ── "How every score is built", home (v30, retour Matthis) ─────────────── */
.scoreintro{font-size:14.5px;color:var(--body);max-width:70ch;margin:0 0 20px}
.scoreintro a{color:var(--acc);font-weight:600}
.score-overview{display:flex;gap:34px;align-items:center;border:1px solid var(--line);
  border-radius:16px;background:var(--card);padding:26px;margin:0 0 8px}
.score-overview .donutwrap{position:relative;display:flex;align-items:center;
  justify-content:center;flex:none}
.score-overview .donutwrap .center{position:absolute;text-align:center}
.score-overview .donutwrap .center b{display:block;font-size:24px;font-weight:800;
  color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.score-overview .donutwrap .center span{font-size:10.5px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.06em}
.score-overview .dleg{display:grid;gap:11px;flex:1;min-width:0}
.score-overview .dleg-row{display:grid;grid-template-columns:12px 1fr;gap:11px;align-items:start}
.score-overview .dleg-row .sw{width:12px;height:12px;border-radius:4px;margin-top:4px;flex:none}
.score-overview .dleg-row b{color:var(--ink);font-weight:650;font-size:14px}
.score-overview .dleg-row .pct{color:var(--dim);font-weight:700;font-size:13px;margin-left:8px;
  font-variant-numeric:tabular-nums}
.score-overview .dleg-row .d{display:block;font-size:12.5px;color:var(--dim);margin-top:1px}
@media(max-width:700px){.score-overview{flex-direction:column;align-items:flex-start}}

/* big stat row ──────────────────────────────────────────────────────────── */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 30px}
.statrow div{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:16px 18px}
.statrow b{display:block;font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.statrow span{font-size:12.5px;color:var(--dim)}

/* numbered principle cards ──────────────────────────────────────────────── */
.pcards{display:grid;gap:12px;margin:0 0 30px}
.pcard{border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:20px 22px;display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start}
.pcard .n{width:34px;height:34px;border-radius:11px;background:var(--accbg);color:var(--acc);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.pcard h3{font-size:17px;font-weight:650;margin:4px 0 6px}
.pcard p{margin:0 0 8px;font-size:14.5px}
.pcard p:last-child{margin-bottom:0}

/* label / definition cards ──────────────────────────────────────────────── */
.defcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 30px}
.defcard{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:18px;
  display:flex;flex-direction:column;gap:9px}
.defcard p{margin:0;font-size:14px}
.defcard .ex{font-size:12.5px;color:var(--dim);border-top:1px solid var(--line);padding-top:9px;margin-top:auto}

/* weight chart ──────────────────────────────────────────────────────────── */
.weights{border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:22px 24px;margin:0 0 30px;display:grid;gap:14px}
.wrow{display:grid;grid-template-columns:280px 1fr 42px;gap:14px;align-items:center;font-size:14px}
.wrow .wl{color:var(--ink);font-weight:600}
.wrow .wt{height:12px;border-radius:99px;background:var(--soft);overflow:hidden}
.wrow .wt i{display:block;height:100%;border-radius:99px;background:var(--money)}
.wrow .wv{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
.wrow small{display:block;font-weight:400;color:var(--dim);font-size:12.5px;margin-top:1px}

/* callout ───────────────────────────────────────────────────────────────── */
.callout{border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:12px;
  background:var(--soft);padding:18px 20px;margin:0 0 26px}
.callout h3{font-size:15.5px;font-weight:650;margin:0 0 6px}
.callout p{margin:0;font-size:14.5px}
.callout.warn{border-left-color:#D6A13A;background:var(--warnbg);border-color:var(--warnline)}

/* anatomy diagram (what an entry contains) ──────────────────────────────── */
.anatomy{border:1px solid var(--line);border-radius:16px;background:var(--card);
  padding:22px;margin:0 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.anat{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:12px;border-radius:11px;background:var(--soft)}
.anat i{width:26px;height:26px;border-radius:8px;background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;
  font-weight:700;color:var(--acc)}
.anat b{display:block;color:var(--ink);font-weight:600;font-size:14px;margin-bottom:2px}
.anat span{font-size:13px;color:var(--body)}

@media(max-width:760px){
  .author{grid-template-columns:1fr;gap:18px}
  .avatar{width:96px;height:96px}
  .statrow{grid-template-columns:repeat(2,1fr)}
  .defcards,.anatomy{grid-template-columns:1fr}
  .wrow{grid-template-columns:1fr;gap:6px}
  .wrow .wv{text-align:left}
}

/* price provenance */
.pend{color:var(--warn);font-weight:600}
.pendnote{border:1px solid var(--warnline);background:var(--warnbg);border-radius:12px;
  padding:12px 16px;margin:0 0 18px;font-size:13.5px;color:#6E4A0C}
.pendnote b{color:var(--warn);font-weight:600}

/* ── card: stretched link, so the "Alternative to" chips stay real links ─── */
.card{position:relative}
.card h3 a{color:inherit}
.card h3 a.stretch::after{content:"";position:absolute;inset:0;z-index:1}
.card .alt a{position:relative;z-index:2;background:var(--soft);border:1px solid var(--line);
  border-radius:7px;padding:3px 8px;color:var(--body);font-weight:500;
  transition:border-color .12s,color .12s}
.card .alt a:hover{border-color:var(--acc);color:var(--acc)}

/* ── keep / give up ─────────────────────────────────────────────────────── */
.klgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 26px}
.kl{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--card)}
.kl h3{font-size:15px;font-weight:650;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.kl h3::before{content:"";width:9px;height:9px;border-radius:50%;flex:none}
.kl.keep h3::before{background:var(--money)}
.kl.lose h3::before{background:#D6A13A}
.kl ul{margin:0;padding-left:18px;font-size:14px}
.kl li{margin-bottom:6px}
.kl.keep{background:var(--moneybg);border-color:#CFE7DC}
.kl.lose{background:var(--warnbg);border-color:var(--warnline)}
.scoretable.costs td.keep{color:var(--money);font-weight:700}
.scoretable td.n,.scoretable th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:760px){.klgrid{grid-template-columns:1fr}}

/* ── comparison tables on paid-app pages ────────────────────────────────── */
.tablewrap{overflow-x:auto;margin:0 0 10px}
.scoretable.compare{min-width:760px}
.scoretable.compare td{vertical-align:middle}
.scoretable.compare td.n b{font-size:16px}
.scoretable.compare td.n small{color:var(--dim);font-size:11.5px}
.scoretable a{color:var(--ink);text-decoration:none;border:0}
.scoretable a:hover b{color:var(--acc)}
.tag-own{font-size:11px;background:#EEF0FB;color:#4A55A2;border-radius:5px;padding:2px 6px;
  margin-left:6px;white-space:nowrap}
ul.gaps{margin:0;padding-left:17px;font-size:13.5px}
ul.gaps li{margin-bottom:3px}
.tnote{font-size:13px;color:var(--dim);margin:0 0 26px}
.prose .faqs{margin-top:38px}

/* ── rose bands (headers of boxes and tables) ───────────────────────────── */
.aside-box .h{background:var(--band);border-bottom-color:var(--band-line);color:var(--band-ink)}
.aside-box .h a{color:var(--acc)}
.checks .h{background:var(--band);border-bottom-color:var(--band-line);color:var(--band-ink)}
.scoretable thead th{background:var(--band);color:var(--band-ink);
  border-bottom-color:var(--band-line);padding:9px 12px;border-radius:0}
.scoretable thead th:first-child{border-radius:8px 0 0 8px;padding-left:12px}
.scoretable thead th:last-child{border-radius:0 8px 8px 0}
.scoretable td:first-child{padding-left:12px}
.eyebrow{background:var(--band);border-color:var(--band-line)}
.eyebrow b{background:var(--card);color:var(--band-ink)}

/* ── provenance des prix : d'où vient ce chiffre, et quand ─────────────── */
.prov{display:block;font-size:11.5px;line-height:1.4;margin-top:5px;letter-spacing:0}
.prov a{color:var(--link);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--link-line)}
.prov-ok{color:var(--money)}
.prov-ok i{display:inline-block;width:5px;height:5px;border-radius:9px;
  background:var(--money);margin-right:6px;vertical-align:middle}
.prov-pend{color:var(--warn)}
.kpis .prov{margin-top:6px;font-weight:500}
.pricebox .prov{margin:6px 0 2px}

/* ── page price tracker ────────────────────────────────────────────────── */
.pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;border-radius:99px;padding:2px 8px;white-space:nowrap}
.pill.ok{background:var(--moneybg);color:var(--money)}
.pill.pend{background:var(--warnbg);color:var(--warn)}
.chg{font-size:12.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.chg.up{color:var(--warn)}
.chg.down{color:var(--money)}
.chg.flat,.chg.none{color:var(--dim);font-weight:500}
.scoretable td small{color:var(--dim);font-weight:500}


/* ── first-letter chip on tool cards (round-3 "Confetti" mockup) ─────────── */
.ico.letter{border-radius:9px;color:#fff;font-weight:800;font-size:14px;
  font-family:Inter,system-ui,sans-serif;letter-spacing:0}
.k-photo   .ico.letter{background:#F72585}
.k-video   .ico.letter{background:#4ECDC4}
.k-audio   .ico.letter{background:#2A9D8F}
.k-ai      .ico.letter{background:#A78BFA}
.k-learn   .ico.letter{background:#FFD166}
.k-files   .ico.letter{background:#E76F51}
.k-sec     .ico.letter{background:#F4A261}
.k-health  .ico.letter{background:#95D5B2}
.k-stream  .ico.letter{background:#5B54D9}
.k-utils   .ico.letter{background:#FF6B6B}

/* ── le spectre : la signature de marque ──────────────────────────────────
   Les dix pastels de catégorie dans l'ordre Photo → Utils. Voir BRAND.md §8. */
:root{
  --spectrum:linear-gradient(100deg,#FF6B6B,#E76F51,#F4A261,#FFD166,#95D5B2,
    #4ECDC4,#2A9D8F,#5B54D9,#A78BFA,#F72585);
}
.nav::after{content:"";position:absolute;inset:auto 0 -4px 0;height:4px;
  background:var(--spectrum)}
@media print{.nav::after{display:none}}

/* Le spectre en TEXTE — uniquement le H1 de la home. Voir BRAND.md §8.
   Ce ne sont PAS les pastels : sur le fond os ils tombent vers 1,5:1, illisibles.
   Ce sont les dix inks de catégorie, chacun au-dessus de 4,5:1 sur --bg, donc le
   titre reste conforme lettre par lettre et pas seulement en moyenne. */
:root{
  --spectrum-ink:linear-gradient(100deg,#B23A3A,#A83F26,#A85C1E,#8A6A12,#2F7A54,
    #1F7A72,#1E6E63,#423CB0,#5F4DB0,#B0186A);
}
.hero h1 .spec{color:var(--ink)}   /* le repli : si le clip ne prend pas, c'est de l'encre */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .spec{
    background-image:var(--spectrum-ink);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    -webkit-box-decoration-break:slice;box-decoration-break:slice;
  }
}
/* Repli obligatoire là où un dégradé ne veut plus rien dire :
   impression noir et blanc, contraste forcé, texte sélectionné. */
@media print{
  .hero h1 .spec{background:none!important;color:var(--ink)!important;
    -webkit-text-fill-color:var(--ink)!important}
}
@media (forced-colors:active){
  .hero h1 .spec{background:none!important;color:CanvasText!important;
    forced-color-adjust:none;-webkit-text-fill-color:CanvasText!important}
}
.hero h1 .spec::selection{-webkit-text-fill-color:var(--ink);background:var(--accbg)}

/* ══════════════════════════════════════════════════════════════════════════
   LE BANDEAU DE CATÉGORIE — variante « aplats », pages fiche uniquement.
   Voir BRAND.md §10.

   Mécanisme : la couleur pleine de la catégorie occupe toute la largeur, et
   TOUT le texte qui compte vit sur une feuille opaque posée dessus. Le
   contraste ne se mesure donc jamais contre la couleur.

   Ce qui touche directement l'aplat est limité à trois choses, toutes en
   encre foncée : le fil d'ariane, le H1 et sa ligne de sous-titre.
   #14131A sur le plus sombre des dix aplats (#EE9C8F) = 8,6:1.
   #2F2C38 sur ce même aplat = 6,36:1. Le gris courant --body (#55525E) n'y
   passe PAS (3,55:1) — ne jamais l'utiliser ici.
   ══════════════════════════════════════════════════════════════════════════ */
.k-photo{--solid:#F0B27A} .k-video{--solid:#F0A8B4} .k-audio{--solid:#C4A8E0}
.k-ai{--solid:#A8B4F0}    .k-learn{--solid:#9EC0DE} .k-files{--solid:#8FD0C0}
.k-sec{--solid:#B8D49A}   .k-health{--solid:#E8CE84} .k-stream{--solid:#EE9C8F}
.k-utils{--solid:#CBBBA8}

.catband{background:var(--solid);padding:0 0 30px;margin-bottom:30px;
  border-bottom:1px solid rgba(20,19,26,.10)}

/* l'ink de catégorie, pour les libellés posés sur la feuille */
.k-photo{--cink:#9F6029} .k-video{--cink:#A75367} .k-audio{--cink:#74589F}
.k-ai{--cink:#5560AD}    .k-learn{--cink:#3A6890} .k-files{--cink:#2E7A64}
.k-sec{--cink:#5C7534}   .k-health{--cink:#8A6D1C} .k-stream{--cink:#A94F3F}
.k-utils{--cink:#6F5F4C}

/* les trois éléments posés à même la couleur */
.catband .crumbs{color:#2F2C38;padding:18px 0 0}
.catband .crumbs a{color:#2F2C38}
.catband .crumbs a:hover{color:#14131A}
.catband .crumbs .sep{opacity:.45}
.catband .ehead{margin:16px 0 22px;align-items:flex-start}
.catband .ehead h1{color:#14131A;display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.catband .ehead .sub{color:#2F2C38;font-size:15px;margin-top:6px}
.catband .ehead .sub s{color:#2F2C38;font-weight:600;text-decoration:none}
.catband .ehead .best-for{color:#2F2C38;margin-top:8px}
.catband .ehead .best-for b{color:#14131A}
.catband .ehead .ico{box-shadow:0 1px 0 rgba(255,255,255,.5) inset}
/* la puce « Free, no strings » : blanche sur l'aplat, elle vaut pour les quatre
   valeurs de freedom — le mot porte le sens, la couleur ne le porte jamais seule */
.fchip{font-size:13px;font-weight:700;background:var(--card);color:#14131A;
  padding:5px 13px;border-radius:99px;letter-spacing:0;white-space:nowrap;
  box-shadow:0 1px 3px rgba(20,19,26,.14)}

/* ── la feuille : verdict + score, ensemble, flottant sur l'aplat ────────── */
.catband .sheet{background:var(--card);border-radius:16px;padding:26px 28px;
  box-shadow:0 14px 40px -16px rgba(20,19,26,.34),0 2px 6px rgba(20,19,26,.06)}
.catband .pendnote{margin:0 0 20px}

/* le verdict : un encart posé sur la feuille, pas une carte de plus */
.catband .verdict{border:1px solid var(--line);border-left:1px solid var(--line);
  border-radius:13px;background:var(--bg);padding:20px 22px;margin:0 0 24px;
  box-shadow:none;overflow:visible}
.catband .verdict .vl{font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cink);margin:0 0 9px}
.catband .verdict>p{margin:0;font-size:17.5px;line-height:1.5;color:var(--ink);font-weight:450}
.catband .verdict>p.reviewed{font-size:12.5px;color:var(--dim);font-weight:500;margin:0 0 12px}
.catband .verdict>p.reviewed a{color:var(--dim);text-decoration:underline;text-decoration-color:var(--line)}
.catband .vfacts{display:flex;gap:38px;background:none;border:0;
  border-top:1px solid var(--line);margin-top:18px;padding-top:15px}
.catband .vfacts>div{padding:0;border:0;display:flex;flex-direction:column;gap:3px}
.catband .vfacts .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);font-weight:700}
.catband .vfacts b{font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1;
  color:var(--ink)}
.catband .vfacts b.save{color:var(--money);background:none;padding:0}
.catband .vfacts b.sc{color:var(--cink)}
.catband .vfacts b.country{font-size:20px;letter-spacing:-.01em}
.catband .vfacts b small{font-size:13px;font-weight:600;color:var(--dim);
  letter-spacing:0;margin-left:5px}
.catband .vfacts b.sc small{margin-left:1px}

/* le tableau des scores, sur la même feuille */
.catband .sh{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin:0 0 14px}
.catband .weights{border:0;background:none;border-radius:0;padding:0}
.catband .weights .wrow{grid-template-columns:230px 1fr 44px}
.catband .weights .wt i{background:var(--cink)}
.catband .snote{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--dim)}
.catband .snote b{color:var(--ink);font-weight:600}

/* la prose reprend sur le fond os */
.catband + .wrap .entry{padding-top:0}

@media(max-width:860px){
  .catband .weights .wrow{grid-template-columns:1fr}
  .catband .weights .wrow .wv{text-align:left}
}
@media(max-width:720px){
  .catband{padding-bottom:22px;margin-bottom:22px}
  .catband .sheet{padding:20px 18px}
  .catband .verdict{padding:16px 17px}
  .catband .vfacts{gap:24px;flex-wrap:wrap}
  .catband .ehead{margin:14px 0 18px}
}
@media print{
  .catband{background:none;border-bottom:1px solid var(--line);padding-bottom:10px}
  .catband .verdict{box-shadow:none;border:1px solid var(--line)}
}

/* ── MAQUETTE page catégorie « money » (preview_category.py) ──────────────
   À intégrer ou à jeter selon la décision de structure. */
.prose.wide{max-width:none}
.pblock{margin:0 0 36px}
.pbody{display:grid;grid-template-columns:340px 1fr;gap:30px;align-items:start}
.pbody .grid{display:block;margin:0}
.ptext{padding-top:2px}
.pg.tiny{font-size:13px;color:var(--dim);border-top:1px solid var(--line);padding-top:12px;
  margin-top:14px}
@media(max-width:860px){.pbody{grid-template-columns:1fr}}
.pblock .ph{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:14px}
.pblock .ph h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0}
.pblock .pp{font-size:16px;font-weight:700;color:var(--ink)}
.pblock .pp small{font-size:12.5px;font-weight:600;color:var(--dim)}
.pblock .pg{font-size:14.5px;color:var(--body);margin:0 0 8px;max-width:78ch}
.pblock .pg b{color:var(--ink);font-weight:600}
.pblock .pg.gap b{color:#A94F3F}
.pblock .grid{margin-top:16px}
.ownlist{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.ownlist li{margin:0}
.ownlist a{display:inline-flex;align-items:baseline;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:13.5px;
  font-weight:600;color:var(--ink)}
.ownlist a span{font-size:11.5px;font-weight:600;color:var(--dim)}
/* L'emplacement d'annonce : c'est une offre commerciale, pas un avertissement.
   Il porte donc le liseré de marque et un vrai bouton — un cadre pointillé gris
   se lit comme une zone vide qu'on a oublié de remplir. */
.slot{border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:20px 22px;margin:30px 0;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr auto;gap:18px 26px;align-items:center}
.slot::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--spectrum)}
.slot-lab{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);
  background:var(--card);border-radius:99px;padding:3px 10px;margin-bottom:9px}
.slot p{margin:0;font-size:14px;color:var(--body);max-width:62ch;grid-column:1}
.slot .slot-top+p{grid-row:2}
.slot p b{color:var(--ink);font-weight:600}
.smalllist{list-style:none;padding:0;margin:10px 0 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px 22px}
.smalllist li{font-size:14px;color:var(--body);padding:7px 0;border-bottom:1px solid var(--line)}
.smalllist li b{color:var(--ink);font-weight:600}
.smalllist li span{color:var(--dim);font-size:13px}
h2.gh{max-width:1180px;margin:34px auto 16px;padding:0;font-size:26px;font-weight:700;
  letter-spacing:-.025em}

/* ── la dateline, l'axe, la table des rôles, le slot chiffré ─────────────── */
.catband .dline{display:inline-flex;align-items:center;gap:7px;font-size:12px;
  background:#FBFAF7;border-radius:99px;padding:4px 13px;margin-bottom:11px;color:#2F2C38}
.catband .dline b{font-weight:700;color:#14131A}
.catband .verdict p.axis{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);
  font-size:15px;color:var(--body);line-height:1.55}
.scoretable.roles td.ty{color:var(--dim)}
.scoretable.roles td.vd{font-weight:600;color:var(--ink)}
.scoretable.roles tr.top td{background:var(--soft)}
.scoretable.roles .star{color:var(--cink);font-weight:400}
/* L'emplacement d'annonce : c'est une offre commerciale, pas un avertissement.
   Il porte donc le liseré de marque et un vrai bouton — un cadre pointillé gris
   se lit comme une zone vide qu'on a oublié de remplir. */
.slot{border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:20px 22px;margin:30px 0;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr auto;gap:18px 26px;align-items:center}
.slot::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--spectrum)}
.slot-top{display:flex;align-items:baseline;gap:12px;margin-bottom:7px;grid-column:1}
.slot-lab{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);
  background:var(--card);border-radius:99px;padding:3px 10px}
.slot-price{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.slot-price small{font-size:13px;font-weight:600;color:var(--dim);letter-spacing:0}
/* la couleur est forcee : .prose a colorait le bouton en cobalt sur fond encre */
.slot a.slot-cta,.prose .slot a.slot-cta{grid-column:2;grid-row:1/3;align-self:center;
  display:inline-block;font-size:14px;font-weight:700;color:#fff;background:var(--ink);
  border-radius:99px;padding:11px 20px;white-space:nowrap;text-decoration:none;
  box-shadow:none;border:0}
.slot a.slot-cta:hover,.prose .slot a.slot-cta:hover{background:var(--acc);color:#fff}
@media(max-width:720px){.slot{grid-template-columns:1fr}
  .slot-cta{grid-column:1;grid-row:auto;justify-self:start}}

/* ── page catégorie, format « best of » ─────────────────────────────────── */
.besthead{max-width:760px;margin:0 auto;text-align:center;padding:6px 0 26px}
.besthead h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.04em;
  line-height:1.06;color:#14131A;margin:12px 0 0;text-wrap:balance}
.besthead .axis{font-size:16.5px;line-height:1.55;color:#2F2C38;margin:16px auto 0;max-width:62ch}
.catband .sheet .tablewrap{margin:0}
.catband .sheet table{margin:0}

.bestlist{max-width:820px;margin:34px auto 0}
.best{padding:26px 0;border-top:1px solid var(--line)}
.best:first-child{border-top:0;padding-top:6px}
.bh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.bn{font-size:13px;font-weight:700;color:var(--dim);letter-spacing:.04em}
.bico{width:34px;height:34px;border-radius:10px}
.bico svg{width:17px;height:17px}
.bh h3{font-size:23px;font-weight:700;letter-spacing:-.025em;margin:0}
.rbadge{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cink);background:var(--card);border:1px solid var(--line);
  border-radius:99px;padding:4px 11px}
.bsave{margin-left:auto;font-size:16px;font-weight:800;color:var(--money);letter-spacing:-.02em}
.bsave small{font-size:12px;font-weight:600;color:var(--dim)}
.blede{font-size:16px;line-height:1.55;color:var(--body);margin:0 0 8px}
.bgap{font-size:14px;line-height:1.5;color:var(--body);margin:0}
.bgap b{color:#A94F3F;font-weight:600}
.bfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.bmeta{font-size:12.5px;color:var(--dim)}
.bgo{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--acc)}
.scoretable td.pv{font-size:12px}
@media(max-width:720px){
  .bsave,.bgo{margin-left:0}
  .best{padding:20px 0}
}

/* v54 (retour Matthis) : sur mobile, la colonne "Best for" du tableau categorie
   etirait chaque ligne sur 10-15 lignes de texte (le wrap normal), ce qui rendait
   le tableau demesurement long et forcait un scroll vertical enorme. Le texte
   lui-meme reste intact dans le HTML (SEO + lecteurs d'ecran) -- seul le rendu
   visuel est limite a 3 lignes avec ellipse, uniquement sous 720px. */
@media(max-width:720px){
  .scoretable.roles td.vd{
    line-height:1.35;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    max-height:4.1em;
  }
}

/* badge preview (home + about) -- v54 : montrer les deux versions du badge
   embarquable, pas seulement en decrire le principe en texte. */
.badge-preview{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0 26px}
.badge-swatch{margin:0;padding:22px;border-radius:14px;border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.badge-swatch.light{background:#F4F3F8}
.badge-swatch.dark{background:#1B1B1B}
.badge-swatch img{display:block;width:220px;height:auto}
.badge-swatch figcaption{font-size:11.5px;color:var(--dim)}
.badge-swatch.dark figcaption{color:#A9A6B3}

/* ══════════════════════════════════════════════════════════════════════════
   LA PAGE MÉTIER — le seul type de page money du site
   ══════════════════════════════════════════════════════════════════════════ */
.jband{background:var(--soft);border-bottom:1px solid var(--line);padding:0 0 34px;
  margin-bottom:34px;position:relative}
.jband::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--spectrum)}
.jband .besthead{max-width:780px;margin:0 auto;text-align:center;padding:8px 0 28px}
.jband .dline{display:inline-flex;gap:7px;font-size:12px;background:var(--card);
  border:1px solid var(--line);border-radius:99px;padding:4px 13px;margin-bottom:13px}
.jband .dline b{color:var(--ink);font-weight:700}
.jband h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.04em;
  line-height:1.06;color:var(--ink);margin:0;text-wrap:balance}
.jband .axis{font-size:16.5px;line-height:1.55;color:var(--body);margin:16px auto 0;max-width:64ch}

/* les trois paliers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tier{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:18px 19px 19px;display:flex;flex-direction:column;gap:9px}
.tier.t0{border-color:var(--money);box-shadow:0 0 0 1px var(--money) inset}
.thead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tlab{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.tier.t0 .tlab{color:var(--money)}
.trange{font-size:12.5px;font-weight:700;color:var(--dim)}
.tlong{font-size:12.5px;color:var(--dim);margin:-4px 0 4px;line-height:1.4}
.tw{display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-decoration:none}
.twn{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.025em}
.tw:hover .twn{color:var(--acc)}
.tsum{font-size:13.5px;line-height:1.5;color:var(--body);margin:0}
.tfoot{display:flex;align-items:baseline;gap:16px;padding-top:9px;border-top:1px solid var(--line);
  margin-top:auto}
.tcost{font-size:20px;font-weight:800;color:var(--money);letter-spacing:-.03em}
.tcost small,.tsc small{font-size:12px;font-weight:600;color:var(--dim)}
.tsc{font-size:16px;font-weight:700;color:var(--ink)}
.tmore{font-size:12px;color:var(--dim);margin:0}
.tempty{font-size:13.5px;color:var(--dim);margin:0;padding:14px 0}
.tier .slot{margin:4px 0 0;padding:12px 13px;border-radius:10px;background:var(--bg)}
.tier .slot-top{margin-bottom:5px}
.tier .slot-lab{font-size:9.5px;padding:2px 8px}
.tier .slot-price{font-size:15px}
.tier .slot p{font-size:12px;line-height:1.45}
.tier .slot-cta{margin-top:7px;font-size:12.5px}

/* les tuiles métier */
.jtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;
  margin:8px 0 34px}
.jtile{display:flex;flex-direction:column;gap:9px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:19px 20px;text-decoration:none;
  transition:border-color .12s}
.jtile:hover{border-color:var(--acc)}
.jtile h2,.jtile h3{font-size:19px;font-weight:700;letter-spacing:-.025em;color:var(--ink);margin:0}
.jtile p{font-size:13.5px;line-height:1.5;color:var(--body);margin:0}
.jfoot{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--dim);
  padding-top:10px;border-top:1px solid var(--line);margin-top:auto}
.jfoot b{color:var(--ink);font-weight:700}
.jfoot .keep{color:var(--money);font-weight:700}

/* la liste détaillée */
.bestlist{max-width:840px;margin:0 auto}
.best .bcost{margin-left:auto;font-size:16px;font-weight:800;color:var(--money);letter-spacing:-.02em}
.best .bcost small{font-size:12px;font-weight:600;color:var(--dim)}

@media(max-width:860px){
  .tiers{grid-template-columns:1fr}
  .jband{padding-bottom:24px;margin-bottom:24px}
}
.tslot{display:flex;align-items:baseline;gap:8px;margin-top:2px;padding-top:10px;
  border-top:1px dashed var(--line);font-size:12.5px;color:var(--dim);text-decoration:none}
.tslot span{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px}
.tslot b{color:var(--ink);font-weight:800;font-size:14px}
.tslot small{font-size:11.5px}
.tslot:hover span,.tslot:hover b{color:var(--acc)}

/* le classement en tête de page catégorie */
.scoretable .rk{width:34px;color:var(--dim);font-weight:700;text-align:left}
.scoretable.roles tr.top .rk{color:var(--cink)}
.scoretable td.inst a{display:block;font-weight:600;color:var(--ink)}
.scoretable td.inst a:hover{color:var(--acc)}
.scoretable td.inst s{display:block;font-size:12px;color:var(--dim);text-decoration:line-through;
  font-weight:600;margin-top:1px}
.besthead .rulenote{font-size:13.5px;color:#2F2C38;margin:16px auto 0;max-width:62ch;
  padding-top:13px;border-top:1px solid rgba(20,19,26,.14);font-weight:600}
.besthead .criteria{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  list-style:none;margin:14px 0 0;padding:0}
.besthead .criteria li{font-size:11.5px;font-weight:600;color:#2F2C38;
  background:rgba(255,255,255,.55);border:1px solid rgba(20,19,26,.14);
  border-radius:99px;padding:5px 12px}

/* ── le mur de sponsors, accueil ─────────────────────────────────────────── */
/* colle au hero : le panneau de droite laisse deja beaucoup d'air en dessous */
.sponsors{margin:6px 0 10px}
.sphead{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:13.5px;color:var(--dim);margin-bottom:14px;text-align:center}
.sphead a{color:var(--acc);font-weight:600}
.spgrid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:var(--card)}
.sp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:22px 14px;text-align:center;border-left:1px solid var(--line);text-decoration:none;
  transition:background .12s}
.sp:first-child{border-left:0}
.sp b{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.sp span{font-size:11.5px;color:var(--dim);line-height:1.35}
.sp:hover{background:var(--soft)}
.sp:hover b{color:var(--acc)}
.sp.empty{background:repeating-linear-gradient(135deg,transparent,transparent 7px,
  rgba(20,19,26,.022) 7px,rgba(20,19,26,.022) 14px)}
.sp.empty b{color:var(--dim);font-weight:600;font-size:14px}
.sp.empty:hover b{color:var(--acc)}
.spnote{font-size:12px;color:var(--dim);text-align:center;margin:11px 0 0}
@media(max-width:860px){.spgrid{grid-template-columns:repeat(2,1fr)}
  .sp{border-left:0;border-top:1px solid var(--line)}
  .sp:first-child,.sp:nth-child(2){border-top:0}}