@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


/* CSS du listing Insight — EXTRAIT du rendu du SPA, ne pas éditer.
 *
 * Produit par tools/extraire-styles-listing.py depuis
 * reference/rendu/listing-insight.html.
 *
 * Le SPA charge 627 Ko de feuille pour toute l'application, dont **67 règles
 * seulement servent** cette page. Ces 2 509 octets sont les deux blocs \3c style>
 * en ligne qui portent réellement le listing : la barre d'écosystème ORBii et
 * les 9 sélecteurs de la page. Les quatre autres blocs sont des bibliothèques
 * tierces (Toastify, force-graph, Google) que le listing n'utilise pas.
 *
 * Tout le reste du design est en styles en ligne — 275 des 393 éléments — et vit
 * dans src/styles/insight/listing-spa.json, extrait par le même outil.
 *
 * L'@import de polices vient du même rendu. Il ne charge qu'Inter : Playfair
 * Display, que les styles en ligne réclament partout, n'est jamais rendue —
 * voir la règle de titrage plus bas.
 */

/* ── Le titrage, reproduit tel qu'il est RENDU ──
 *
 * Défaut du SPA, mesuré et reproduit exprès. Ses styles en ligne demandent
 * « Playfair Display » sur les 275 éléments décorés — et une règle globale
 *
 *     h1, h2, h3 { font-family: var(--font-display) !important }
 *
 * les écrase toutes, `!important` l'emportant même sur un style en ligne.
 * Résultat : Playfair Display n'est **jamais utilisée**, elle n'est pas même
 * chargée par la page. Le titrage rend en Newsreader.
 *
 * Reproduire l'intention aurait donné des titres 20 px plus courts par
 * en-tête que ceux de la production. On reproduit donc le rendu, et on note le
 * défaut : c'est un chantier éditorial, pas de migration. */
.insights-page-padding h1, .insights-page-padding h2,
.insights-grid-2col h2, .insights-grid-2col h3, .insights-grid-2col h4 {
  font-family: Newsreader, Georgia, 'Times New Roman', serif !important;
}

.orbii-ecosystem-bar{background:#1e1b4b;color:#fff;padding:7px 24px;font-size:12px;display:flex;align-items:center;gap:18px;font-family:Inter,Geist,-apple-system,sans-serif;letter-spacing:.02em;border-bottom:1px solid rgba(255,255,255,.08)}.orbii-ecosystem-label{font-weight:800;font-size:13px;letter-spacing:.05em;color:#a78bfa;margin-right:4px}.orbii-ecosystem-bar a{color:rgba(255,255,255,.55);text-decoration:none;font-weight:500;transition:color .2s;padding:2px 0}.orbii-ecosystem-bar a:hover{color:#fff}.orbii-ecosystem-bar a.orbii-eco-active{color:#fff;font-weight:700;border-bottom:2px solid #a78bfa;padding-bottom:0}@media(max-width:640px){.orbii-ecosystem-bar{padding:6px 16px;gap:12px;font-size:11px;overflow-x:auto;white-space:nowrap}}

/* ── Le titrage, reproduit tel qu'il est RENDU ──
 *
 * Défaut du SPA, mesuré et reproduit exprès. Ses styles en ligne demandent
 * « Playfair Display » sur les 275 éléments décorés — et une règle globale
 *
 *     h1, h2, h3 { font-family: var(--font-display) !important }
 *
 * les écrase toutes, `!important` l'emportant même sur un style en ligne.
 * Résultat : Playfair Display n'est **jamais utilisée**, elle n'est pas même
 * chargée par la page. Le titrage rend en Newsreader.
 *
 * Reproduire l'intention aurait donné des titres 20 px plus courts par
 * en-tête que ceux de la production. On reproduit donc le rendu, et on note le
 * défaut : c'est un chantier éditorial, pas de migration. */
.insights-page-padding h1, .insights-page-padding h2,
.insights-grid-2col h2, .insights-grid-2col h3, .insights-grid-2col h4 {
  font-family: Newsreader, Georgia, 'Times New Roman', serif !important;
}
        @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.8)} }
        @keyframes spin { to { transform: rotate(360deg); } }
        ::selection { background: rgba(192,57,43,0.12); }
        a { text-decoration: none; color: inherit; }
        .etude-card { transition: transform 0.2s, box-shadow 0.2s; }
        .etude-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(26,26,46,0.25); }
        .news-card { transition: all 0.2s; }
        .news-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); transform: translateY(-1px); }
        .more-card { transition: all 0.2s; }
        .more-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.07); transform: translateY(-2px); }
        .filter-btn-custom:hover { border-color: #c0392b !important; color: #c0392b !important; }
        .voir-plus-link:hover { background: #fef5f4 !important; border-color: #c0392b !important; }
        .line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
        @media (max-width: 1024px) {
          .insights-grid-2col { grid-template-columns: 1fr !important; }
          .explore-grid-4col { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 640px) {
          .insights-grid-2col, .explore-grid-4col { grid-template-columns: 1fr !important; }
          .insights-page-padding { padding-left: 20px !important; padding-right: 20px !important; }
        }

/* ── L'écrêtage, reproduit tel qu'il est RENDU ──
 *
 * Même nature de défaut que le titrage. Le bloc \3c style> en ligne du SPA définit
 * `.line-clamp-2 { -webkit-line-clamp: 2 }`, et le rendu **écrête à 1 ligne** :
 * une seconde définition, quelque part dans les 627 Ko de Bootstrap + Tailwind
 * de l'application, l'emporte par ordre de cascade. Une classe nommée « 2 » qui
 * écrête à 1, c'est exactement le « 36 fichiers CSS en conflit » de l'audit de
 * mars.
 *
 * Mesuré sur la production : chapô de vedette 1 ligne, titre de carte
 * d'exploration 1 ligne, chapô d'exploration 1 ligne. Reproduire la définition
 * plutôt que le rendu donnait des cartes 30 à 53 px trop hautes chacune.
 *
 * On reproduit donc l'effet, et on note la cause : c'est le conflit qui est à
 * corriger, pas cette règle. */
.news-card .line-clamp-2,
.more-card h4.line-clamp-2,
.more-card p.line-clamp-2 { -webkit-line-clamp: 1 }

/* ── Les cartes sont des liens, et un lien est `inline` ──
 *
 * Le SPA rend ses cartes en `<div>` avec un gestionnaire de clic : ce ne sont
 * pas de vrais liens. On ne peut ni les ouvrir dans un onglet, ni les suivre au
 * clavier, ni les indexer. Je les rends en `<a>`, ce qui est meilleur sur les
 * trois points.
 *
 * Mais un `<a>` est `display: inline` là où un `<div>` est `block`, et la
 * disposition des cartes vient de leurs styles en ligne — qui ne portent pas de
 * `display`, un `<div>` n'en ayant pas besoin. Résultat, vu en production : la
 * carte se réduisait à une bande verticale et son texte débordait sur le fond
 * de page, en blanc sur clair.
 *
 * Cette règle ne s'applique qu'aux cartes qui ne déclarent pas leur propre
 * `display` en ligne — les brèves numérotées sont en `flex` et le restent, un
 * style en ligne l'emportant sur une feuille. */
a.etude-card, a.news-card, a.more-card, a.voir-plus-link { display: block }