/* Thème clair par défaut, bascule auto selon le système, surchargeable via data-theme. */
  :root { color-scheme:light dark;
    --bg:#ffffff; --card:#f5f7fa; --soft:#eef1f6; --line:#e3e8ef;
    --txt:#1a1d24; --mut:#6b7280; --acc:#2f6bff; --ok:#3ecf8e; }
  @media (prefers-color-scheme: dark) {
    :root { --bg:#0f1115; --card:#1a1d24; --soft:#23272f; --line:#2a2e38;
      --txt:#e6e8ec; --mut:#9aa0a8; --acc:#5b8cff; --ok:#3ecf8e; } }
  :root[data-theme="light"] { --bg:#ffffff; --card:#f5f7fa; --soft:#eef1f6; --line:#e3e8ef;
    --txt:#1a1d24; --mut:#6b7280; --acc:#2f6bff; --ok:#3ecf8e; }
  :root[data-theme="dark"]  { --bg:#0f1115; --card:#1a1d24; --soft:#23272f; --line:#2a2e38;
    --txt:#e6e8ec; --mut:#9aa0a8; --acc:#5b8cff; --ok:#3ecf8e; }
  * { box-sizing:border-box; }
  body { margin:0; font:15px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--txt); }
  .wrap { width:100%; margin:0; padding:24px clamp(16px,3vw,48px) 80px; }
  h1 { font-size:22px; margin:0 0 4px; }
  .sub { color:var(--mut); margin:0 0 20px; }
  /* --- Accueil « à la Google » : hero centré, puis bascule en barre haute --- */
  .topbar { position:fixed; top:12px; right:14px; z-index:30; display:flex; gap:8px; align-items:center; }
  .topbar select { padding:8px 10px; font-size:13px; max-width:150px; text-overflow:ellipsis; }
  .hero { display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:14px; min-height:calc(100vh - 130px); transition:min-height .35s ease; }
  /* Mode résultats : header compact « à la Google » (logo + recherche sur une ligne). */
  /* Réserve à droite = largeur de la topbar figée (2 sélecteurs ≤150px + thème + gaps) → pas de chevauchement. */
  body.searched .hero { min-height:0; flex-direction:row; align-items:center; gap:16px;
    position:sticky; top:0; z-index:20; background:var(--bg); padding:10px 350px 8px 0;
    box-shadow:0 6px 14px -8px rgba(0,0,0,.25); }
  body.searched form { flex:1; max-width:none; margin:0; justify-content:flex-start; }
  .logo { font-size:46px; font-weight:700; letter-spacing:-1.5px; margin:0; cursor:pointer; }
  .logo span { color:var(--ok); }   /* « Fairly » en vert (neutralité/équité) */
  body.searched .logo { font-size:22px; white-space:nowrap; letter-spacing:-.5px; }
  .hero .sub { font-size:16px; margin:0; max-width:620px; }
  body.searched .hero .sub { display:none; }
  .suggests { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; max-width:680px; }
  body.searched .suggests { display:none; }
  .results { display:none; }
  /* Section de landing (SEO + conversion), masquée dès qu'une recherche démarre. */
  .landing { max-width:920px; margin:8px auto 0; padding:0 20px; text-align:center; }
  body.searched .landing { display:none; }
  .landing h2 { font-size:19px; font-weight:700; margin:12px 0 22px; color:var(--txt); }
  .lgrid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
  .lcard { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 16px; text-align:left; }
  .lcard .lnum { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
    border-radius:50%; background:var(--acc); color:#fff; font-size:13px; font-weight:700; margin-bottom:10px; }
  .lcard b { display:block; font-size:14.5px; margin-bottom:5px; color:var(--txt); }
  .lcard p { margin:0; font-size:13px; color:var(--mut); line-height:1.5; }
  .lwhy { margin:22px 0 0; font-size:13px; color:var(--mut); }
  /* Maillage interne (footer serveur) : liens catégories + comparatifs populaires. */
  .maillage { max-width:1200px; margin:32px auto 40px; padding:22px 20px 0; border-top:1px solid var(--line);
    display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
  .maillage h2 { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--mut);
    font-weight:600; margin:0 0 10px; }
  .maillage ul { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
  .maillage a { color:var(--acc); text-decoration:none; font-size:13.5px; line-height:1.4; }
  .maillage a:hover { text-decoration:underline; }
  .maillage .crumbs a { color:var(--mut); }
  body.searched .results { display:block; animation:fade .4s ease; }
  /* Compactage vertical en mode résultats (header slim). */
  body.searched .wrap { padding-top:12px; }
  body.searched .bar { margin:8px 0 2px; }
  body.searched .phase { min-height:0; font-size:13px; margin:0 0 2px; }
  body.searched .crumb { margin:6px 0 2px; }
  @keyframes fade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
  /* Mobile / écrans étroits : la topbar reste en haut à droite, mais le champ passe en
     pleine largeur SOUS le logo (plus de chevauchement avec le bouton ni la topbar). */
  @media (max-width:820px){
    .topbar { top:8px; right:10px; gap:6px; }
    .topbar select { max-width:112px; font-size:12px; padding:6px 8px; }
    /* padding-top réserve la hauteur de la topbar figée → le logo ne passe plus dessous. */
    body.searched .hero { padding:52px 8px 6px 0; flex-wrap:wrap; }
    body.searched form { flex-basis:100%; order:3; }
    body.searched .logo { font-size:20px; order:1; }
  }

  form { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; width:100%; max-width:700px; }
  body.searched form { max-width:none; justify-content:flex-start; margin-bottom:6px; }
  /* Champ & boutons très arrondis (pill) « à la Google » : familiarité = confiance. */
  input[type=text] { flex:1 1 400px; min-width:220px; padding:14px 20px; border-radius:28px;
    border:1px solid var(--line); background:var(--card); color:var(--txt); font-size:16px;
    box-shadow:0 1px 6px rgba(0,0,0,.08); transition:box-shadow .2s, border-color .2s; }
  input[type=text]:hover, input[type=text]:focus { box-shadow:0 2px 12px rgba(0,0,0,.14);
    border-color:var(--acc); outline:none; }
  body.searched input[type=text] { padding:11px 18px; font-size:15px; }
  .locale { display:flex; gap:8px; flex-basis:100%; justify-content:center; }
  body.searched .locale { flex-basis:auto; }
  select { padding:11px; border-radius:20px; border:1px solid var(--line); background:var(--card); color:var(--txt); }
  button { padding:12px 22px; border:0; border-radius:24px; background:var(--acc); color:#fff;
    font-weight:600; cursor:pointer; }
  button:disabled { opacity:.5; cursor:default; }
  .bar { height:6px; background:var(--line); border-radius:6px; overflow:hidden; margin:10px 0; }
  .bar > i { display:block; height:100%; width:0; background:var(--acc); transition:width .3s; }
  .phase { color:var(--mut); font-size:14px; min-height:20px; }
  .crumb { font-size:13px; color:var(--acc); margin:14px 0 4px; }
  .crumb span { color:var(--mut); }
  .catlink { color:var(--acc); text-decoration:none; }
  .catlink:hover { text-decoration:underline; }
  .calc { font-size:10px; color:var(--mut); border:1px solid var(--line); border-radius:4px;
    padding:0 4px; margin-left:5px; vertical-align:middle; }
  .v.der { font-style:italic; }
  /* Accueil : comparatifs déjà publiés, cliquables. Mesure du 2026-07-31 : 36 humains sur 67
     quittaient l'accueil sans jamais voir un comparatif (champ de recherche seul = rien à cliquer). */
  .popular { max-width:980px; margin:2px auto 24px; padding:0 14px; }
  body.searched .popular { display:none; }
  .popular h2 { font-size:14px; font-weight:600; color:var(--mut); margin:0 0 10px; text-align:center;
    letter-spacing:.01em; }
  .popgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:8px; }
  .popcard { display:block; padding:11px 13px; background:var(--card); border:1px solid var(--line);
    border-radius:10px; text-decoration:none; color:var(--txt); font-size:13.5px; font-weight:600;
    line-height:1.35; transition:border-color .15s, transform .15s; }
  .popcard:hover { border-color:var(--acc); transform:translateY(-1px); }
  /* Annuaire rendu SERVEUR : liste de liens réellement explorables par un crawler. */
  .dirlist { list-style:none; padding:0; margin:8px 0 18px; display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:6px; }
  .dirlist a { color:var(--txt); text-decoration:none; font-size:13.5px; font-weight:600; }
  .dirlist a:hover { color:var(--acc); text-decoration:underline; }
  .dirlist small { color:var(--mut); font-weight:400; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-top:14px; }
  table { width:100%; border-collapse:collapse; font-size:14px; }
  th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
  th { color:var(--mut); font-weight:600; }
  td.name { white-space:normal; font-weight:600; }
  .score { font-weight:700; color:var(--ok); }
  .badge { display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px;
    background:var(--soft); color:var(--mut); margin-left:8px; }
  .timings { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:8px; }
  .kpi { background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:12px; }
  .kpi b { display:block; font-size:22px; color:var(--txt); }
  .kpi small { color:var(--mut); }
  .kpi.hero b { color:var(--ok); }
  .err { color:#ff6b6b; }
  .clarify { max-width:640px; margin:24px auto; }
  .clar-title { font-size:18px; font-weight:700; margin-bottom:8px; }
  .blocked { max-width:560px; margin:28px auto; text-align:center; padding:26px 20px; }
  .blk-title { font-size:17px; font-weight:700; color:var(--txt); display:flex; gap:8px;
    align-items:center; justify-content:center; margin-bottom:8px; }
  .blk-title .ic { color:#f2704b; }
  .blocked p { color:var(--mut); font-size:14px; line-height:1.6; margin:0; }
  /* Bandeau « comparatif neutre » (sujets sensibles : aucun classement). */
  .neutral-note { display:flex; gap:8px; align-items:center; justify-content:center; margin:10px auto 4px;
    max-width:680px; padding:10px 14px; border-radius:10px; font-size:13px; color:var(--mut);
    background:color-mix(in srgb, var(--acc) 9%, transparent); }
  .neutral-note .ic { color:var(--acc); flex:0 0 auto; }
  .oscore.unrated { font-size:13px; font-weight:600; font-style:italic; color:var(--mut); }
  .clarify ul { margin:8px 0 0; padding-left:22px; } .clarify li { margin:5px 0; }
  .clarify p { margin:6px 0; color:var(--mut); }
  .verdict { font-size:15px; line-height:1.8; margin-bottom:4px; }
  .chip { background:var(--soft); color:var(--txt); border:1px solid var(--line); border-radius:999px;
    padding:5px 12px; margin:5px 6px 0 0; font-size:13px; cursor:pointer; font-weight:400; }
  .chip.on { background:var(--acc); border-color:var(--acc); color:#fff; font-weight:600; }
  .tag { display:inline-block; font-size:11px; padding:1px 7px; border-radius:999px;
    background:var(--ok); color:#04231a; font-weight:700; margin-left:4px; }
  tr.win td { background:rgba(62,207,142,.08); }
  .tag.est { background:var(--soft); color:var(--mut); }
  /* « sourcé » = confirmé par une source (contour vert, discret) ; « estimation » = non confirmé. */
  .tag.ver { background:transparent; color:var(--ok); font-weight:600;
    border:1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
  .provenance { display:flex; gap:6px; align-items:center; justify-content:center; margin-top:8px;
    font-size:11px; color:var(--mut); }
  /* Score « pourquoi ce rang » : indice qu'on peut voir le détail au survol (méthode auditable). */
  .oscore.explain { cursor:help; }
  .oscore.explain::after { content:"?"; font-size:10px; vertical-align:super; color:var(--mut);
    margin-left:2px; font-weight:600; }

  /* --- Comparaison en matrice : libellés à gauche (une fois), options en colonnes --- */
  .omatrix { display:grid; align-items:stretch; overflow-x:auto; }
  .mhc { border-bottom:2px solid var(--line); position:sticky; left:0; background:var(--card); z-index:3; }
  .ohead { padding:14px 12px 12px; text-align:center; position:relative;
    border-left:1px solid var(--line); border-bottom:2px solid var(--line); }
  .ohead.win { border-bottom-color:var(--ok);
    background:color-mix(in srgb, var(--ok) 7%, transparent); border-radius:14px 14px 0 0; }
  .orank { position:absolute; top:10px; right:12px; font-size:12px; color:var(--mut); font-weight:700; }
  .olog { width:46px; height:46px; border-radius:12px; object-fit:contain; background:var(--soft); }
  /* Photo produit : visuel principal de la carte (image réelle du produit). */
  .oimg { display:block; width:100%; height:112px; object-fit:contain; background:#fff; border:1px solid var(--line);
          border-radius:10px; padding:6px; margin-bottom:8px; }
  .ohead:has(.oimg) .olog { width:30px; height:30px; border-radius:8px; }  /* logo réduit en badge si photo */
  .olog.ph { display:inline-flex; align-items:center; justify-content:center; font-size:21px; font-weight:800;
    color:#fff; letter-spacing:-.5px; box-shadow:inset 0 -2px 6px rgba(0,0,0,.12); text-shadow:0 1px 2px rgba(0,0,0,.18); }
  .olog.photo { width:60px; height:60px; border-radius:50%; object-fit:cover; }
  .oname { font-weight:700; font-size:16px; margin-top:8px; }
  .oprov { color:var(--mut); font-size:12px; }
  .orate { font-size:13px; font-weight:600; color:#e0a52e; margin:2px 0 4px; }
  .orate small { color:var(--mut); font-weight:400; }
  .orate small.indic { font-style:italic; opacity:.75; cursor:help; }
  .pt { font-size:12px; line-height:1.45; text-align:left; }
  .pt.pros { color:#2f9e6b; } .pt.cons { color:#d9663a; }
  .rev { font-style:italic; color:var(--mut); font-size:12px; }
  .odesc { color:var(--mut); font-size:12px; line-height:1.4; margin:6px 0 2px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .oscore { font-size:34px; font-weight:800; line-height:1.1; margin:6px 0 4px; font-variant-numeric:tabular-nums; }
  .oscore small { font-size:13px; font-weight:600; color:var(--mut); }
  .obadges { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; min-height:18px; }
  /* Verdict « pour qui » - filet discret à gauche (pas d'encadré « carte IA »). */
  .bestfor { display:flex; gap:7px; align-items:flex-start; font-size:12.5px; line-height:1.45;
    color:var(--mut); padding:7px 2px 2px 10px; margin:8px 2px 0; text-align:left;
    border-left:2px solid color-mix(in srgb, var(--acc) 35%, transparent); }
  .bestfor .ic { color:var(--acc); flex:0 0 auto; margin-top:1px; }
  /* « Pourquoi ce rang » - classement explicable et honnête (montre forces ET faiblesses). */
  .whyrank { display:flex; gap:7px; align-items:flex-start; font-size:12.5px; line-height:1.5;
    color:var(--mut); padding:8px 10px; margin:8px 0 2px; text-align:left;
    background:color-mix(in srgb, var(--ok) 7%, transparent); border-radius:8px; }
  .whyrank .ic { color:var(--ok); flex:0 0 auto; margin-top:2px; }
  .whyrank .lead { color:var(--txt); font-weight:600; }
  .whyrank .lag { opacity:.72; }
  /* « Résultat serré » - honnêteté décisionnelle (#4) : ton ambré, distinct du « pourquoi ». */
  .close { display:flex; gap:7px; align-items:flex-start; font-size:12.5px; line-height:1.5;
    color:var(--mut); padding:8px 10px; margin:6px 0 2px; text-align:left;
    background:color-mix(in srgb, #f2b84b 10%, transparent); border-radius:8px; }
  .close .ic { color:#f2b84b; flex:0 0 auto; margin-top:2px; }
  .close b { color:var(--txt); font-weight:600; }
  /* Destination du CTA : où mène « Voir l'offre » AVANT le clic (transparence revendeur, #14). */
  .odest { display:flex; gap:5px; align-items:center; justify-content:center; margin:5px 0 0;
    font-size:11px; color:var(--mut); line-height:1.3; }
  .odest .ic { flex:0 0 auto; opacity:.7; }
  .odest b { color:var(--txt); font-weight:600; }
  /* Icônes SVG inline sobres (jamais d'emoji). */
  .ic { display:inline-flex; align-items:center; }
  .ic svg { width:1.05em; height:1.05em; }
  .vk { display:inline-flex; vertical-align:-.15em; color:var(--mut); }
  .vk.ok { color:var(--ok); }
  /* Marque du logo (le « O » de deux arcs + coche). */
  .brandmark { width:.92em; height:.92em; vertical-align:-.12em; margin-right:.28em; }
  body.searched .brandmark { width:.9em; height:.9em; }
  /* Mention de neutralité - notre différenciateur : classement non achetable, sourcé. */
  .neutral { display:flex; gap:7px; align-items:center; justify-content:center; margin-top:16px;
    padding-top:12px; border-top:1px solid var(--line); font-size:11.5px; color:var(--mut); text-align:center; }
  .neutral .ic { color:var(--ok); flex:0 0 auto; }
  .neutral.disclose { border-top:0; padding-top:2px; margin-top:4px; font-size:10.5px; opacity:.8; }
  /* FAQ dérivée (AEO : longue traîne, People-Also-Ask, moteurs de réponse IA). */
  .faq { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); text-align:left; }
  .faq h3 { font-size:13.5px; color:var(--mut); font-weight:600; margin:0 0 8px; text-transform:uppercase; letter-spacing:.03em; }
  .faq details { border-bottom:1px solid var(--line); }
  .faq summary { cursor:pointer; padding:9px 2px; font-size:13.5px; font-weight:600; list-style:none;
    display:flex; justify-content:space-between; align-items:center; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary::after { content:"+"; color:var(--mut); font-weight:400; font-size:16px; }
  .faq details[open] summary::after { content:"\2013"; }
  .faq details > div { padding:0 2px 11px; font-size:13px; color:var(--mut); line-height:1.55; }
  /* Méthodologie : transparence « comment on classe & comment on se rémunère » (moat #1/#2/#10). */
  .methodo { max-width:720px; margin:10px auto 0; text-align:left; }
  .methodo summary { cursor:pointer; list-style:none; display:flex; gap:7px; align-items:center;
    justify-content:center; font-size:11.5px; color:var(--mut); }
  .methodo summary::-webkit-details-marker { display:none; }
  .methodo summary .ic { color:var(--ok); }
  .methodo summary::after { content:"＋"; color:var(--mut); font-size:12px; }
  .methodo[open] summary::after { content:"−"; }
  .methodo ul { margin:10px 0 2px; padding:0 0 0 2px; list-style:none; display:grid; gap:8px; }
  .methodo li { font-size:12.5px; color:var(--mut); line-height:1.5; padding-left:12px; position:relative; }
  .methodo li::before { content:""; position:absolute; left:0; top:8px; width:5px; height:5px;
    border-radius:50%; background:var(--ok); }
  .methodo li b { color:var(--txt); font-weight:600; }
  /* Synthèse des avis (façon G2/Trustpilot, mais neutre : agrégée depuis les sources). */
  .rsum-meta { font-weight:700; color:var(--ok); font-size:12px; margin-bottom:3px; }
  .rsum { color:var(--txt); font-size:12.5px; line-height:1.45; }
  /* Carte de positionnement (type G2 Grid). */
  .vtoggle { display:inline-flex; gap:4px; margin-left:10px; }
  .qwrap { display:flex; justify-content:center; padding:6px 0 2px; }
  .qmap { width:100%; max-width:880px; height:auto; }
  .qmap .qzone { fill:var(--ok); font-size:11px; font-weight:700; opacity:.75; }
  .qmap .qax { fill:var(--mut); font-size:11px; font-weight:600; }
  .qmap .qlab { fill:var(--txt); font-size:11px; }
  /* Lien source = futur CTA d'affiliation tracé (/go/…), cf. docs/modele-economique.md */
  .osrc { display:inline-block; margin-top:8px; font-size:12px; font-weight:600; color:var(--acc);
    text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:4px 12px; }
  .osrc:hover { border-color:var(--acc); }
  /* CTA « Acheter » (entité à double nature) : accent plein, distinct du lien Wikipédia. */
  .osrc.buy { background:var(--acc); color:#fff; border-color:var(--acc); margin-left:6px; }
  .osrc.buy:hover { filter:brightness(1.05); }
  /* CTA MARCHAND principal : seul lien de la carte qui mène à une offre -> poids visuel de bouton.
     Un lien vers une SOURCE citée reste en style discret (.osrc nu) : la hiérarchie visuelle dit
     « ici on achète / ici on vérifie », elle ne modifie ni le classement ni le libellé. */
  .osrc.prim { background:var(--acc); color:#fff; border-color:var(--acc);
    font-size:13px; padding:7px 16px; margin-top:10px; }
  .osrc.prim:hover { filter:brightness(1.06); }
  .ocite { font-size:11px; color:var(--mut); margin-top:6px; line-height:1.4; }
  .ocite a { color:var(--mut); text-decoration:underline; }
  /* En-tête de section : regroupe les critères par catégorie de propriété. */
  .ggroup { grid-column:1/-1; background:var(--soft); margin-top:2px; }
  .ggroup span { position:sticky; left:0; display:inline-block; padding:7px 10px;
    font-size:11.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--acc); }
  .klabel { padding:11px 10px 11px 4px; font-size:13px; color:var(--mut); display:flex; align-items:center;
    border-bottom:1px solid var(--line); position:sticky; left:0; background:var(--card); z-index:2; }
  .klabel em { font-style:normal; opacity:.6; margin-left:3px; }
  .klabel.hi { color:var(--acc); font-weight:600; }
  /* Tri par critère : libellé cliquable (comme un en-tête de tableau triable). */
  .klabel.sortable { cursor:pointer; user-select:none; }
  .klabel.sortable:hover { color:var(--txt); }
  .klabel.sorted { color:var(--acc); font-weight:600; }
  .klabel .sarr { font-size:10px; margin-left:auto; padding-left:6px; }
  /* Barre de filtres (comble le manque des spécialistes : filtrer la comparaison). */
  .filters { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:2px 0 10px;
    font-size:13px; color:var(--mut); }
  .fchk { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
  .fchk input { accent-color:var(--acc); }
  .fprice { display:inline-flex; align-items:center; gap:6px; }
  .finput { width:90px; padding:5px 8px; border-radius:8px; border:1px solid var(--line);
    background:var(--card); color:var(--txt); font-size:13px; }
  .fempty { font-size:12px; color:#f2704b; margin:0 0 8px; }
  /* Menu d'annuaire (catégories racine, tout en haut). */
  .catmenu { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:6px 210px 6px 2px; min-height:20px; }
  .catmenu:empty { display:none; }
  .catlink-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px;
    border:1px solid var(--line); background:var(--card); color:var(--txt); font-size:12.5px;
    text-decoration:none; cursor:pointer; white-space:nowrap; }
  .catlink-chip:hover { border-color:var(--acc); color:var(--acc); }
  .catlink-chip .cnt { color:var(--mut); font-size:11px; }
  .catmenu .more { position:relative; }
  .catmenu .more-list { display:none; position:absolute; top:110%; left:0; z-index:40; background:var(--card);
    border:1px solid var(--line); border-radius:10px; padding:6px; min-width:180px; box-shadow:0 8px 24px -10px rgba(0,0,0,.3); }
  .catmenu .more.open .more-list { display:block; }
  .catmenu .more-list a { display:block; padding:5px 8px; border-radius:6px; color:var(--txt); text-decoration:none; font-size:12.5px; }
  .catmenu .more-list a:hover { background:var(--soft); color:var(--acc); }
  /* Page annuaire (liste « à la Google »). */
  .dir-head { margin:2px 0 10px; }
  .dir-crumb { font-size:13px; color:var(--acc); margin-bottom:8px; }
  .dir-crumb a { color:var(--acc); text-decoration:none; } .dir-crumb a:hover { text-decoration:underline; }
  .dir-crumb span { color:var(--mut); }
  .dir-subs { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 18px; }
  .dir-list { display:flex; flex-direction:column; gap:16px; }
  .dir-item .dt { font-size:18px; color:#1a5fd0; text-decoration:none; }
  :root[data-theme="dark"] .dir-item .dt { color:#8ab4ff; }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .dir-item .dt { color:#8ab4ff; } }
  .dir-item .dt:hover { text-decoration:underline; }
  .dir-item .du { font-size:12.5px; color:var(--ok); margin:1px 0 2px; }
  .dir-item .dd { font-size:13px; color:var(--mut); }
  .dir-pager { display:flex; gap:10px; justify-content:center; margin-top:22px; }
  .dir-empty { color:var(--mut); font-size:14px; padding:20px 0; }
  /* Profilage guidé : questions courtes dont la réponse affine la comparaison. */
  .profile { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin:4px 0 12px; font-size:13px; }
  .profile .plabel { display:inline-flex; align-items:center; gap:5px; color:var(--acc); font-weight:600; }
  .profile .plabel .ic { color:var(--acc); }
  .pgroup b { font-weight:600; color:var(--mut); margin-right:4px; font-size:12.5px; }
  .pchip { border:1px solid var(--line); background:var(--card); color:var(--txt); border-radius:999px;
    padding:4px 11px; font-size:12.5px; cursor:pointer; margin:2px 3px; transition:border-color .15s,color .15s; }
  .pchip:hover { border-color:var(--acc); color:var(--acc); }
  .vcell { padding:9px 12px; text-align:center; border-left:1px solid var(--line); border-bottom:1px solid var(--line);
    display:flex; flex-direction:column; justify-content:center; gap:4px; }
  .vcell.win { background:color-mix(in srgb, var(--ok) 6%, transparent); }
  .vcell.hi  { background:color-mix(in srgb, var(--acc) 6%, transparent); }
  /* Gagnant du critère (max subscore de la ligne) - repère visuel type RTINGS/Versus. */
  .vcell.best { background:color-mix(in srgb, var(--ok) 14%, transparent); }
  .vcell.best .v { color:var(--ok); }
  .wtag { display:inline-block; margin-left:5px; color:var(--ok); font-size:11px; font-weight:700;
    vertical-align:middle; line-height:1; }
  .delta { font-size:10.5px; color:var(--mut); font-variant-numeric:tabular-nums; }
  .vcell .v { font-weight:600; font-variant-numeric:tabular-nums; font-size:14px; }
  .vcell.txt { justify-content:flex-start; text-align:left; }
  .vcell.txt .v { font-weight:400; font-size:12.5px; font-variant-numeric:normal; line-height:1.45;
    color:var(--txt); white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
  .vcell .v { max-width:100%; overflow-wrap:anywhere; }
  .bar2 { height:4px; background:var(--soft); border-radius:4px; overflow:hidden; }
  .bar2 i { display:block; height:100%; border-radius:4px; }
  /* Squelette de chargement (shimmer) - perçu plus rapide, jamais d'écran vide. */
  .sk { background:linear-gradient(90deg, var(--soft) 25%, var(--line) 37%, var(--soft) 63%);
    background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:6px; }
  @keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
  /* Footer sobre */
  .cf-foot { margin:40px auto 24px; padding:16px; text-align:center; font-size:13px; color:var(--mut);
    border-top:1px solid var(--line); max-width:1100px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
  .cf-foot a { color:var(--acc); text-decoration:none } .cf-foot a:hover { text-decoration:underline }
  .cf-sep { opacity:.5 }
  /* Formulaire de contact */
  .contact-card { max-width:560px; margin:24px auto }
  .contact-card form { display:flex; flex-direction:column; gap:12px; margin-top:14px }
  .contact-card input, .contact-card textarea { font:inherit; padding:12px 14px; border:1px solid var(--line);
    border-radius:10px; background:var(--card); color:var(--txt); width:100% }
  .contact-card textarea { resize:vertical; min-height:130px }
  .contact-card button { align-self:flex-start; background:var(--acc); color:#fff; border:0; padding:12px 22px;
    border-radius:10px; font:inherit; font-weight:600; cursor:pointer }
  .contact-card button:disabled { opacity:.6; cursor:default }
  .cf-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
  #cf-status { margin-top:12px; font-size:14px }
  #cf-status.ok { color:var(--ok) } #cf-status.err { color:#f2704b }