/* ══════════════════════════════════════════════════════════════════════════ Kokoro — kokoro-ai.fr · article.css Tout ce qui n'existe que sur un article de blog. Chargé APRÈS site.css, et par les articles seulement : inutile de faire porter 12 Ko de styles de prose aux pages vitrines. Préfixe `.art-` pour la structure, `.pr-` pour les composants que le CORPS d'un article peut utiliser. Cette séparation compte : le corps est écrit par la rédaction (et par l'IA), pas par un intégrateur. Les classes `.pr-` sont le contrat — voir le chapitre « Composants du corps » dans article-template. Trois règles héritées du système : · un seul accent dominant, le Blue #2782FF ; · aucun dégradé, aucune ombre hors les deux recettes verre ; · la colonne de texte ne dépasse jamais 68 caractères. ══════════════════════════════════════════════════════════════════════════ */ /* ── Hero de l'article ─────────────────────────────────────────────────── Soft Canvas, comme le hero des pages d'offre : l'article s'ouvre sur la même matière que le reste du site. */ /* La barre de nav est flottante (`.site-nav-wrap` en sticky, hauteur 0) : elle ne pousse rien. Comme .hero et .off-hero, l'en-tête d'article dégage donc lui-même la place — sinon le fil d'Ariane passe dessous. */ .art-hero{background:var(--kokoro-soft-canvas);padding-top:clamp(104px,11vw,142px);padding-bottom:clamp(36px,4.4vw,60px)} .art-hero__inner{max-width:var(--site-max);margin-inline:auto;padding-inline:clamp(20px,4vw,var(--web-margin))} .art-hero h1{margin:clamp(16px,2vw,24px) 0 0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(31px,4.2vw,58px);line-height:1.07;letter-spacing:-.04em;color:var(--kokoro-black);max-width:20ch} .art-lead{margin:clamp(18px,2.2vw,26px) 0 0;font-family:var(--font-body);font-size:clamp(17px,1.5vw,20.5px);line-height:1.62;color:var(--kokoro-muted);max-width:62ch} /* Chip de catégorie : la pilule du système, en Blue franc. */ .art-cat{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:14px;line-height:1;padding:9px 17px;border-radius:var(--radius-pill);background:var(--kokoro-blue);color:var(--kokoro-white);text-decoration:none} a.art-cat:hover{background:var(--kokoro-black);color:var(--kokoro-white)} /* Ligne de méta : date, mise à jour, durée, auteur. Séparateurs en points médians plutôt qu'en icônes — le système n'a pas de jeu d'icônes. */ .art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:clamp(22px,2.6vw,30px) 0 0;padding-top:clamp(18px,2.2vw,24px);border-top:var(--stroke-hairline) solid var(--border-hairline);font-family:var(--font-body);font-size:14.5px;line-height:1.5;color:var(--kokoro-muted)} .art-meta__item{display:inline-flex;align-items:center;gap:8px} .art-meta__item+.art-meta__item::before{content:"·";margin-right:10px;color:var(--kokoro-quiet-stone)} .art-meta a{color:var(--kokoro-blue-link);text-decoration:none} .art-meta a:hover{color:var(--kokoro-black)} /* ── Couverture ────────────────────────────────────────────────────────── Elle chevauche la bascule Soft Canvas → White : l'image tient la couture entre les deux fonds, plutôt que de flotter dans l'un des deux. */ .art-cover{background:linear-gradient(var(--kokoro-soft-canvas) 50%,var(--kokoro-white) 50%)} .art-cover__inner{max-width:var(--site-max);margin-inline:auto;padding-inline:clamp(20px,4vw,var(--web-margin))} .art-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-tile-sm)} /* ── Corps : colonne de texte + colonne collante ───────────────────────── La colonne de droite n'apparaît qu'au-delà de 1180 px. En dessous, le CTA qu'elle porte est déjà rendu par le bloc de fin d'article : on ne le duplique pas, on le masque. */ .art-body{padding-block:clamp(34px,4.4vw,58px) clamp(56px,7vw,96px)} .art-body__inner{max-width:var(--site-max);margin-inline:auto;padding-inline:clamp(20px,4vw,var(--web-margin));display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(36px,4.4vw,64px)} @media (min-width:1180px){ .art-body__inner{grid-template-columns:minmax(0,1fr) 300px} } .art-main{min-width:0;max-width:68ch} .art-aside{display:none} @media (min-width:1180px){ .art-aside{display:block} .art-aside__inner{position:sticky;top:calc(var(--nav-top) + 78px)} } /* ── Sommaire ──────────────────────────────────────────────────────────── Plaque White sur filet, pas de fond gris : le système n'a pas de surface intermédiaire entre White et Soft Canvas. */ .art-toc{border:var(--stroke-hairline) solid var(--border-hairline);border-radius:var(--radius-tile-sm);padding:clamp(22px,2.6vw,30px)} .art-toc__title{display:block;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-lh);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;color:var(--kokoro-black);opacity:.58;margin-bottom:16px} .art-toc ol,.art-toc ul{margin:0;padding:0;list-style:none;counter-reset:toc} .art-toc li{counter-increment:toc;margin-top:11px} .art-toc li:first-child{margin-top:0} /* Sous-niveau du sommaire. La classe existait dans les articles Glass Light, stylée dans leur