/* FLARRITY — styles partagés des pages /guides/ (hub + articles) — DESIGN v2 (clair, palette logo) */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

:root{
  /* Palette v2 (fidèle au logo) — mêmes noms de variables, valeurs adaptées au fond CLAIR.
     Les <style> inline des articles référencent ces variables : ils basculent automatiquement. */
  --night:#F6F1FF;        /* fond de page (lilas très pâle = --paper v2) */
  --night2:#ECE4FA;
  --panel:#FFFFFF;        /* fond des encarts (toc, tip, app-card, cartes) */
  --line:#DED6F0;         /* filets discrets (cellules de tableau, encarts) */
  --ink:#211038;          /* texte principal + gras + titres */
  --dim:#41355E;          /* texte secondaire (lisible sur clair) */
  --faint:#6E6398;        /* labels mono / méta */
  --cyan:#0E8FA8;         /* accent froid lisible : liens, toc, tip, faq */
  --mag:#F11F61;          /* accent chaud : titres h2, « ko », go */
  --amber:#B26A00;        /* « partiel » (ambre lisible) */
  --lime:#1E9E4A;         /* « ok » (vert lisible) */
  --purp:#8A3FFF;
  --orange:#FF8202; --orange2:#FD5C24; --crimson:#F11F61; --pink:#FF3D9A;

  --sans:'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --disp:'Space Grotesk',var(--sans);
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --bd:3px solid var(--ink);
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --grad-logo:linear-gradient(135deg,var(--orange) 0%,var(--orange2) 38%,var(--crimson) 72%,var(--pink) 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);line-height:1.7;
  background:var(--night)}
a{color:var(--mag)}

/* top bar (nav v2) */
.bar{position:sticky;top:0;z-index:60;backdrop-filter:blur(10px);background:rgba(246,241,255,.92);
  border-bottom:var(--bd);padding:12px 22px;display:flex;align-items:center;gap:14px}
.bar .home{display:flex;align-items:center;gap:9px;text-decoration:none;font-family:'Archivo Black',var(--disp);
  font-weight:400;letter-spacing:2px;font-size:15px;color:var(--ink)}
.bar .home img{width:28px;height:28px;border-radius:7px}
.bar .nav{margin-left:auto;display:flex;gap:22px;font-size:14px;align-items:center}
.bar .nav a{color:var(--ink);text-decoration:none;font-weight:600;border-bottom:3px solid transparent;padding-bottom:2px}
.bar .nav a:hover{border-color:var(--crimson)}
/* --- Menu burger mobile (guides) --- */
.bar .burger{display:none;margin-left:auto;background:none;border:var(--bd);border-radius:10px;width:42px;height:38px;cursor:pointer;font-size:19px;line-height:1;color:var(--ink);align-items:center;justify-content:center}
.gmenu{display:none;position:fixed;top:55px;left:0;right:0;z-index:55;background:rgba(7,4,15,.98);backdrop-filter:blur(10px);flex-direction:column;padding:10px 22px 24px;gap:2px;border-bottom:1px solid rgba(255,255,255,.08);max-height:calc(100vh - 55px);overflow-y:auto}
.gmenu.open{display:flex}
.gmenu a{color:#F6F1FF;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.gmenu a:last-child{border-bottom:none}
.gmenu a.gcta{color:#FF8202;font-weight:700}
body.menu-open{overflow:hidden}
@media (max-width:820px){.bar .nav{display:none}.bar .burger{display:flex}}
@media (min-width:821px){.gmenu{display:none!important}}

main{max-width:760px;margin:0 auto;padding:40px 22px 0}

/* breadcrumb */
.crumb{font-size:13px;color:var(--faint);margin-bottom:22px;font-family:var(--mono);font-weight:500}
.crumb a{color:var(--dim);text-decoration:none}
.crumb a:hover{color:var(--ink)}

/* en-tête d'article / hub */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-size:12px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;
  padding:7px 15px;margin-bottom:18px}
h1{font-family:'Archivo Black',var(--disp);font-weight:400;font-size:clamp(30px,5.5vw,48px);line-height:1.04;
  letter-spacing:-.01em;text-transform:uppercase;margin-bottom:16px}
h1 .grad{background:var(--grad-logo);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--dim);font-size:18px;margin-bottom:14px}
.meta{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-bottom:30px}

article h2{font-family:var(--disp);font-weight:700;font-size:25px;color:var(--mag);margin:40px 0 12px;line-height:1.2}
article h3{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink);margin:26px 0 8px}
article p{color:var(--dim);margin-bottom:14px}
article ul,article ol{color:var(--dim);margin:0 0 16px 22px}
article li{margin-bottom:8px}
article strong{color:var(--ink)}
article a{color:var(--mag);text-decoration:underline;text-underline-offset:2px;font-weight:600}
article a:hover{color:var(--crimson)}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSANTS D'ARTICLE — factorisés depuis les <style> inline des guides.
   Un nouvel article n'a plus besoin de bloc <style> : il suffit d'utiliser
   les classes ci-dessous. Les anciens articles gardent leur <style> inline,
   qui écrase celui-ci (même spécificité, chargé après le <link>) — d'où le
   !important conservé sur .cmp th plus bas. À nettoyer article par article.
   ═══════════════════════════════════════════════════════════════════════════ */

/* respiration du texte */
.airy p{line-height:1.85}
article h2{scroll-margin-top:80px}

/* sommaire */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:24px 0 8px}
.toc .t{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.toc ol{margin:0 0 0 20px;color:var(--dim)}
.toc li{margin-bottom:8px}
.toc a{color:var(--cyan);text-decoration:none}
.toc a:hover{text-decoration:underline}

/* tableaux comparatifs / grilles de calcul */
.cmp-wrap{overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:14.5px}
.cmp th,.cmp td{border:1px solid var(--line);padding:10px 12px;text-align:left;color:var(--dim);vertical-align:top}
.cmp th{font-family:var(--disp);color:var(--ink);background:#F0E9FC}
.cmp td.ok{color:var(--lime)}
.cmp td.ko{color:var(--mag)}
.cmp td.partiel{color:var(--amber)}
.cmp td.num{font-family:var(--mono);color:var(--ink);white-space:nowrap}
.cmp tr.total td{background:#F0E9FC;color:var(--ink);font-weight:600}

/* fond clair : le header de tableau était rgba(255,255,255,.04) (invisible) → filet lilas lisible.
   Le !important neutralise les <style> inline encore présents dans les anciens articles. */
.cmp th{background:#F0E9FC!important}

/* FAQ */
.faq h3{color:var(--cyan);font-family:var(--disp);font-size:17px;margin:24px 0 8px}

/* encarts : conseil (vert) et mise en garde (ambre) */
.tip{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:12px;padding:16px 18px;margin:20px 0}
.tip .t{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.warn{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:12px;padding:16px 18px;margin:20px 0}
.warn .t{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--amber);margin-bottom:8px}

/* trio de chiffres clés (style carte v2) */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:26px 0}
.kpi{background:var(--panel);border:var(--bd);border-radius:18px;box-shadow:var(--shadow-sm);padding:20px}
.kpi b{display:block;font-family:'Archivo Black',var(--disp);font-weight:400;font-size:30px;line-height:1;
  color:var(--mag);margin-bottom:8px}
.kpi span{font-size:13.5px;color:var(--dim);line-height:1.55}

/* bloc sources & méthode (bas d'article) */
.src{border-top:3px solid var(--line);margin-top:44px;padding-top:22px}
.src .t{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.src p{font-size:13.5px;color:var(--faint);line-height:1.7}
.src a{color:var(--faint);font-weight:600}
.src a:hover{color:var(--ink)}

/* encart CTA (bande orange v2) */
.cta{margin:44px 0 10px;background:var(--grad-logo);border:var(--bd);border-radius:22px;
  padding:30px 26px;text-align:center;box-shadow:var(--shadow);color:#fff}
.cta h3{font-family:'Archivo Black',var(--disp);font-weight:400;text-transform:uppercase;font-size:22px;color:#fff;margin-bottom:8px}
.cta p{color:rgba(255,255,255,.95);margin-bottom:20px}
.cta a.btn{display:inline-block;font-family:var(--disp);font-weight:700;text-transform:uppercase;text-decoration:none;
  color:var(--ink);background:#fff;border:var(--bd);border-radius:999px;padding:14px 30px;
  box-shadow:var(--shadow-sm);transition:transform .15s}
.cta a.btn:hover{transform:translate(-2px,-2px)}

/* liens entre articles */
.more{margin-top:44px;border-top:3px solid var(--line);padding-top:26px}
.more .t{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--faint);margin-bottom:14px}

/* hub : grille de cartes (cartes v2) */
.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.card{display:block;text-decoration:none;background:var(--panel);border:var(--bd);border-radius:22px;
  overflow:hidden;box-shadow:var(--shadow);transition:transform .15s}
.card:hover{transform:translate(-3px,-3px)}
.card-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-bottom:var(--bd)}
.card-body{padding:22px 22px 24px}
.card .k{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--mag)}
.card h2{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink);margin:10px 0 8px;line-height:1.3}
.card p{color:var(--dim);font-size:14.5px;line-height:1.6}
.card .go{display:inline-block;margin-top:14px;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:13px;color:var(--ink)}

/* image héro d'article + images au fil du texte
   ⚠ Correctif cadrage : le 16/9 forcé rognait 16 % de hauteur sur TOUTES les images
   éditoriales, qui sont produites en 3:2 (1100x734, 1400x934…). Sur les visuels
   composés (logo Flarrity en haut, bouton d'interface en bas) le recadrage coupait
   précisément ces éléments. Chaque image garde donc son ratio natif : plus aucun
   rognage, quel que soit le format du fichier fourni aujourd'hui ou demain. */
.hero-img{width:100%;height:auto;border-radius:20px;display:block;margin:24px 0 4px;
  border:var(--bd);box-shadow:var(--shadow)}
figure{margin:32px 0}
figure img{width:100%;height:auto;border-radius:16px;display:block;border:var(--bd);box-shadow:var(--shadow-sm)}
figure figcaption{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-top:10px;text-align:center}

/* captures d'écran verticales (app-1/2/3.webp = 540x1168) : largeur bridée et centrées,
   sinon une image portrait étirée sur 760 px de large écrase la page. Remplace les
   style="max-width:240px…" écrits à la main dans certains articles. */
.shot{max-width:250px;width:100%;height:auto;margin-left:auto;margin-right:auto;border-radius:18px}

/* ═══ encart « Flarrity répond au problème » ═══
   Distinct du .cta orange de bas de page : celui-ci se place en cours de lecture et
   ne doit pas lui voler la vedette, d'où le fond blanc et l'accent réservé au badge
   et au bouton. Le bouton est restylé ici parce que .cta a.btn est scopé à .cta et
   ne s'applique donc pas en dehors de cet encart. */
.solve{background:var(--panel);border:var(--bd);border-radius:22px;box-shadow:var(--shadow-sm);
  padding:24px 26px;margin:30px 0}
.solve .t{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:#fff;background:var(--grad-logo);border-radius:999px;padding:5px 13px;display:inline-block;margin-bottom:12px}
.solve h3{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ink);margin:0 0 10px;line-height:1.25}
.solve p{color:var(--dim);margin-bottom:14px}
.solve p:last-of-type{margin-bottom:20px}
.solve a.btn{display:inline-block;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  text-decoration:none;font-size:14px;color:#fff;background:var(--grad-logo);border:var(--bd);
  border-radius:999px;padding:13px 26px;box-shadow:var(--shadow-sm);transition:transform .15s}
.solve a.btn:hover{transform:translate(-2px,-2px);color:#fff}

/* footer v2 */
footer{background:var(--ink);color:var(--night);margin-top:56px;padding:30px 22px;
  display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:center;font-size:13px}
footer a{color:var(--night);text-decoration:none;font-weight:600}
footer a:hover{color:var(--pink)}
footer span{color:#8E82B0}

@media (max-width:600px){.hub-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}