/* ── REPRISE (IA + humain) ── bloo-header ──
 * FICHIER : assets/css/www/www-themes.css
 * ROLE : Styles propres à la page « Thèmes & mises en page » (/themes). Classes préfixées .th-*.
 *        S'ajoute à assets/css/bloo-www-2026.css (variables, .sec, .wrap, .card, .grid-3, .eyebrow,
 *        .btn, .cta-band, .faq, .page-hero chargées par header.php). Aucune couleur d'interface « IA ».
 * ENTREES/SORTIES : aucune. Recopiée via <link> par www/www-themes.html (?v= = empreinte).
 * DEPEND : variables de bloo-www-2026.css (--maxw, --ink-2, --ink-3, --surf, --surf-2, --line, --line-2,
 *          --r, --r-s, --brand, --brand-2, --shadow).
 * APPELE PAR : www/www-themes.html (balise <link> du $PAGE['head']).
 * REPRISE : mobile d'abord ; ruptures à 900 et 560 px alignées sur la feuille du site.
 * MAJ : 2026-10-14 · création
 * ── fin REPRISE ── */
.th-crumbs{max-width:var(--maxw);margin:0 auto;padding:16px 20px 0;font-size:.86rem;color:var(--ink-3)}
.th-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.th-crumbs li+li::before{content:"›";color:var(--ink-3);margin-right:6px}
.th-crumbs a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

.th-hero .th-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.th-trust{margin-top:18px;font-size:13.5px;color:var(--ink-3)}
.th-i{width:1.05em;height:1.05em;flex:none}

.th-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:860px;margin:0 auto}
.th-gcard{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.th-gcard a{display:block}
.th-gshot{display:block;width:100%;height:auto}
.th-glabel{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 16px}
.th-glabel b{color:var(--ink);font-size:15px}
.th-glabel span{color:var(--ink-3);font-size:13px;text-transform:uppercase;letter-spacing:.08em}

.th-lay-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.th-chip{display:flex;align-items:center;gap:10px;background:var(--surf-2);border:1px solid var(--line-2);border-radius:var(--r-s,12px);padding:14px 16px;font-weight:700;color:var(--ink);font-size:15px}
.th-chip-n{font-size:12px;font-weight:800;color:var(--brand-2);background:rgba(20,16,50,.06);border-radius:8px;padding:3px 7px;letter-spacing:.04em}
.th-fine{margin:22px 0 0;font-size:13.5px;color:var(--ink-3)}
.th-fine a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

.th-ic{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,rgba(16,8,72,.14),rgba(79,91,255,.10));color:var(--brand);display:grid;place-items:center;margin-bottom:14px}
.th-ic svg{width:24px;height:24px}

.th-more{text-align:center}
.th-more-h{font-size:17px;margin:0 0 14px}
.th-more-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:0}
.th-more-links a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;font-size:14.5px}
.th-updated{margin:22px 0 0;font-size:13px;color:var(--ink-3)}

@media (max-width:900px){
  .th-lay-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .th-gal{grid-template-columns:1fr}
  .th-lay-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}