/* ============================================================================ Le blog, commun aux deux marques. ⚠ UN SEUL FICHIER POUR LES DEUX. Ce qui change d'une marque à l'autre tient dans la classe posée sur `` : `bl-corpinfo` ou `bl-dataseeker`. Deux feuilles auraient voulu dire deux mises en page à tenir d'accord, et la seconde aurait pris du retard dès la première retouche — c'est le défaut le plus coûteux du projet. Toutes les couleurs viennent de `commun.css`. Le fond sombre du hero corpinfo vient de `corpinfo.css`, qui n'est chargé que sur ce domaine. ============================================================================ */ .bl-large{max-width:1100px;margin:0 auto;padding:0 48px;width:100%} /* ── Le hero ─────────────────────────────────────────────────────────────────── */ .bl-hero{padding:52px 0 44px;border-bottom:1px solid var(--bord)} /* dataseeker : clair, avec le halo violet de l'accueil. corpinfo : le fond ink, posé par la classe `ci-ink` que le gabarit ajoute. */ body.bl-dataseeker .bl-hero{ background:radial-gradient(ellipse 60% 80% at 15% 0%, var(--accent-fond), transparent 70%)} body.bl-corpinfo .bl-hero{border-bottom:0} .bl-hero h1{font-family:Sora,sans-serif;font-weight:600;font-size:38px; letter-spacing:-.03em;line-height:1.15;margin:10px 0 0;max-width:22ch;text-wrap:balance} .bl-hero p{font-size:16px;line-height:1.6;margin:14px 0 0;max-width:62ch; color:var(--txt-2);text-wrap:pretty} body.bl-corpinfo .bl-hero p{color:rgba(255,255,255,.78)} .bl-surtitre{font-family:"Chivo Mono",monospace;font-size:10.5px;text-transform:uppercase; letter-spacing:.13em;color:var(--txt-3)} body.bl-corpinfo .bl-hero .bl-surtitre{color:rgba(255,255,255,.6)} /* ── Filtres par rubrique ────────────────────────────────────────────────────── */ .bl-corps{padding-top:28px;padding-bottom:64px} .bl-filtres{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:20px} .bl-puce{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px; border-radius:99px;border:1px solid var(--bord);background:var(--surface); color:var(--txt-2);font-size:13px;white-space:nowrap} .bl-puce:hover{border-color:var(--accent-bord);color:var(--ds-accent)} .bl-puce.ici{background:var(--accent-fond);border-color:var(--accent-bord); color:var(--ds-accent);font-weight:600} .bl-puce span{font-family:"Chivo Mono",monospace;font-size:10.5px;color:var(--txt-3)} .bl-puce.ici span{color:var(--ds-accent)} .bl-meta{margin-left:auto;font-size:10.5px;color:var(--txt-3);white-space:nowrap} /* ── La grille de cartes ─────────────────────────────────────────────────────── */ .bl-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .bl-carte{background:var(--surface);border:1px solid var(--bord);border-radius:12px; padding:18px 20px;color:inherit;display:flex;flex-direction:column;gap:8px;min-width:0} .bl-carte:hover{border-color:var(--ds-accent);color:inherit} .bl-carte .rub{font-family:"Chivo Mono",monospace;font-size:10.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--ds-accent)} .bl-carte b{font-family:Sora,sans-serif;font-weight:600;font-size:18px; letter-spacing:-.02em;line-height:1.3;text-wrap:pretty} .bl-carte .ext{font-size:13px;color:var(--txt-2);line-height:1.55; /* Trois lignes au plus : sans cette borne, un chapeau long déforme la grille et les trois colonnes cessent d'être alignées. */ display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .bl-carte .bas{margin-top:auto;padding-top:6px;display:flex;align-items:center; justify-content:space-between;gap:10px;font-family:"Chivo Mono",monospace; font-size:10.5px;color:var(--txt-3)} .bl-carte .src{color:var(--ds-accent);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:55%} .bl-rien{grid-column:1/-1;color:var(--txt-2);font-size:13.5px;padding:24px 0} /* ── Pagination ──────────────────────────────────────────────────────────────── */ .bl-pages{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px; font-size:13px} .bl-pages .mono{font-family:"Chivo Mono",monospace;font-size:11px;color:var(--txt-3)} .bl-pages .mort{color:var(--txt-3);opacity:.5} /* ── L'article ───────────────────────────────────────────────────────────────── */ .bl-article{padding-top:32px;padding-bottom:72px;max-width:760px} .bl-retour{font-size:13px;color:var(--txt-2)} .bl-retour:hover{color:var(--ds-accent)} .bl-article h1{font-family:Sora,sans-serif;font-weight:600;font-size:36px; letter-spacing:-.03em;line-height:1.18;margin:10px 0 0;text-wrap:balance} .bl-chapo{font-size:18px;line-height:1.6;color:var(--txt-2);margin:16px 0 0; text-wrap:pretty} .bl-auteur{display:flex;align-items:center;gap:12px;margin:24px 0;padding:14px 0; border-top:1px solid var(--bord-discret);border-bottom:1px solid var(--bord-discret)} .bl-auteur .rond{width:34px;height:34px;border-radius:50%;background:var(--accent-fond); border:1px solid var(--accent-bord);color:var(--ds-accent);display:grid; place-items:center;font-size:12px;font-weight:700;flex:none} .bl-auteur span span{display:block;font-size:11px;color:var(--txt-3)} .bl-texte{font-size:16px;line-height:1.75} .bl-texte p{margin:0 0 18px} .bl-texte h2{font-family:Sora,sans-serif;font-weight:600;font-size:22px; letter-spacing:-.02em;margin:32px 0 12px} .bl-note{background:var(--surface-2);border-left:3px solid var(--accent-bord); padding:12px 16px;border-radius:0 8px 8px 0;color:var(--txt-2);font-size:15px} .bl-cta{display:inline-flex;align-items:center;height:44px;padding:0 20px; border-radius:9px;background:var(--ds-accent);color:#fff;font-weight:600; margin:24px 0 8px} .bl-cta:hover{background:var(--accent-survol);color:#fff} .bl-suite-t{font-family:Sora,sans-serif;font-weight:600;font-size:20px; letter-spacing:-.02em;margin:40px 0 14px} .bl-article .bl-grille{grid-template-columns:repeat(3,minmax(0,1fr))} .bl-article .bl-carte b{font-size:15px} /* ── Le pied ─────────────────────────────────────────────────────────────────── */ .bl-pied{border-top:1px solid var(--bord);padding:20px 48px;display:flex; justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px; color:var(--txt-3);max-width:1100px;margin:0 auto} .bl-pied .liens{display:flex;gap:20px;flex-wrap:wrap} @media (max-width:1000px){ .bl-grille,.bl-article .bl-grille{grid-template-columns:1fr} .bl-large,.bl-pied{padding-left:24px;padding-right:24px} .bl-hero h1{font-size:30px} .bl-article h1{font-size:28px} .bl-meta{margin-left:0;width:100%} }