/* ===== Blog — index et articles =====
   Pages publiques, lues par des visiteurs qui arrivent de Google. Priorité au
   confort de lecture : une colonne étroite, un rythme vertical régulier.
   Charte reprise de la landing (encre chaude, crème, serif éditorial). */

:root {
    --bl-encre: #1a1712;
    --bl-creme: #f2ede3;
    --bl-papier: #fffdf8;
    --bl-texte: #26221b;
    --bl-attenue: #57503f;
    --bl-filet: rgba(26, 23, 18, 0.14);
    --bl-filet-fort: rgba(26, 23, 18, 0.3);
    --bl-sans: 'Inter', -apple-system, sans-serif;
    --bl-serif: 'Cormorant Garamond', Georgia, serif;
    --bl-mono: 'JetBrains Mono', monospace;
    --bl-largeur: 720px;
    /* Alias pour `nav-public.css`, qui attend la palette des autres pages
       publiques. Meme valeurs, autres noms : la barre est la meme partout, il
       ne manquait que le vocabulaire. */
    --ink: #1a1712;
    --cream: #f2ede3;
    --font-sans: 'Inter', -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bl-creme);
    color: var(--bl-texte);
    font-family: var(--bl-sans);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* ── Barre de navigation ─────────────────────────────────────────────── */
/* La barre du haut n'est plus celle du blog : c'est `nav-public.css`, partagee
   avec la landing, la FAQ, « Qui sommes-nous » et la confidentialite. Les
   styles `.bl-nav*` partent avec elle. */

/* ── Colonne de lecture ──────────────────────────────────────────────── */
/* La page occupe toute la largeur et c'est son CREUX qui la cale, pas un
   centrage. Centree sur 720px, la colonne de lecture demarrait a 273px quand le
   logo de la barre etait a 115 : deux bords a 158px l'un de l'autre, sur deux
   elements qui se touchent presque.

   Le creux est celui de la barre, au calcul pres (cf. `nav-public.css`). La
   largeur de lecture, elle, ne bouge pas : elle est bornee sur les enfants.
   Elargir la colonne pour qu'elle remplisse l'ecran donnerait des lignes de
   180 caracteres, illisibles pour un article. */
.bl-page {
    max-width: none;
    margin: 0;
    padding-left: max(var(--gouttiere), calc((100% - var(--container)) / 2));
    padding-right: max(var(--gouttiere), calc((100% - var(--container)) / 2));
    /* La barre partagee est `position: fixed`, contrairement a l'ancienne qui
       etait `sticky` et poussait donc le contenu. On lui reserve sa hauteur. */
    padding-top: 7rem;
    padding-bottom: 5rem;
}

/* La colonne de lecture, calee a gauche sous le logo. */
.bl-page > * {
    max-width: var(--bl-largeur);
}

.bl-ariane {
    font-size: 0.8rem; color: var(--bl-attenue);
    margin-bottom: 2rem;
}
.bl-ariane a { color: var(--bl-attenue); text-decoration: none; }
.bl-ariane a:hover { color: var(--bl-encre); text-decoration: underline; }
.bl-ariane span[aria-hidden] { margin: 0 0.35rem; opacity: 0.5; }

/* ── En-tête d'article ───────────────────────────────────────────────── */
.bl-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
    font-size: 0.78rem; color: var(--bl-attenue); margin: 0 0 1.1rem;
}

.bl-cat {
    font-family: var(--bl-mono); font-size: 0.68rem; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--bl-attenue);
}

.bl-article-tete h1,
.bl-index-tete h1 {
    font-family: var(--bl-serif);
    font-size: clamp(2.1rem, 5.5vw, 3.1rem);
    font-weight: 600; line-height: 1.1; letter-spacing: -0.01em;
    color: var(--bl-encre);
    margin: 0 0 1rem;
}

.bl-chapo,
.bl-index-tete p {
    font-size: 1.12rem; line-height: 1.6;
    color: var(--bl-attenue);
    margin: 0 0 2.5rem;
}

.bl-article-tete {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--bl-filet);
    margin-bottom: 2.5rem;
}
.bl-article-tete .bl-chapo { margin-bottom: 0; }

/* ── Corps rédactionnel ──────────────────────────────────────────────── */
.bl-corps h2 {
    font-family: var(--bl-serif);
    font-size: 1.85rem; font-weight: 600; line-height: 1.2;
    color: var(--bl-encre);
    margin: 3rem 0 1rem;
}

.bl-corps h3 {
    font-size: 1.15rem; font-weight: 600;
    color: var(--bl-encre);
    margin: 2.2rem 0 0.8rem;
}

.bl-corps p { margin: 0 0 1.3rem; }

.bl-corps ul { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.bl-corps li { margin-bottom: 0.7rem; }

.bl-corps strong { font-weight: 600; color: var(--bl-encre); }

.bl-corps a { color: var(--bl-encre); text-decoration: underline; text-underline-offset: 2px; }

/* ── L'appel à l'action en fin d'article ─────────────────────────────── */
.bl-cta {
    margin-top: 3.5rem; padding: 2rem;
    background: var(--bl-encre); color: var(--bl-creme);
    border-radius: 16px;
}
.bl-cta h2 {
    font-family: var(--bl-serif); font-size: 1.6rem; font-weight: 600;
    color: #fff; margin: 0 0 0.7rem;
}
.bl-cta p { margin: 0 0 1.5rem; color: rgba(242, 237, 227, 0.82); font-size: 0.98rem; }
.bl-cta-bouton {
    display: inline-block; padding: 0.75rem 1.6rem; border-radius: 999px;
    background: var(--bl-creme); color: var(--bl-encre);
    text-decoration: none; font-weight: 600; font-size: 0.92rem;
    transition: transform 0.2s, background 0.2s;
}
.bl-cta-bouton:hover { background: #fff; transform: translateY(-1px); }

/* ── Cartes (index et « à lire ensuite ») ────────────────────────────── */
.bl-suite { margin-top: 4rem; }
.bl-suite h2 {
    font-family: var(--bl-serif); font-size: 1.6rem; font-weight: 600;
    color: var(--bl-encre); margin: 0 0 1.5rem;
    padding-bottom: 0.7rem; border-bottom: 1px solid var(--bl-filet);
}

.bl-suite-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.bl-index-grille { display: flex; flex-direction: column; gap: 1rem; }

.bl-carte {
    display: block; padding: 1.5rem;
    background: var(--bl-papier); border: 1px solid var(--bl-filet);
    border-radius: 14px; text-decoration: none; color: inherit;
    transition: border-color 0.2s, transform 0.2s;
    position: relative;
}
a.bl-carte:hover,
.bl-carte:hover { border-color: var(--bl-filet-fort); transform: translateY(-2px); }

/* Index : la carte est un <article> et le lien vit sur le titre — on étire ce
   lien sur toute la carte plutôt que d'envelopper le bloc, pour garder le
   titre comme texte d'ancrage. (Les cartes « à lire ensuite » sont déjà des
   <a>, la règle ne les gêne pas.) */
.bl-carte h2 a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.bl-carte:has(a:focus-visible) {
    border-color: var(--bl-filet-fort);
    outline: 2px solid var(--bl-encre);
    outline-offset: 3px;
}
a.bl-carte:focus-visible {
    outline: 2px solid var(--bl-encre);
    outline-offset: 3px;
}
.bl-carte h2 a:focus-visible { outline: none; }

.bl-carte h2, .bl-carte h3 {
    font-family: var(--bl-serif); font-weight: 600; line-height: 1.2;
    color: var(--bl-encre); margin: 0.6rem 0 0.6rem;
}
.bl-carte h2 { font-size: 1.5rem; }
.bl-carte h3 { font-size: 1.2rem; }
.bl-carte h2 a { color: inherit; text-decoration: none; }
.bl-carte h2 a:hover { text-decoration: underline; }

.bl-carte p { margin: 0 0 0.9rem; font-size: 0.95rem; color: var(--bl-attenue); }
.bl-carte .bl-meta { margin: 0; }

.bl-lire {
    font-size: 0.85rem; font-weight: 600; color: var(--bl-encre);
}
.bl-lire::after { content: ' →'; }

/* ── Pied de page ────────────────────────────────────────────────────── */
.bl-pied {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    padding: 2rem clamp(1.2rem, 5vw, 3rem);
    border-top: 1px solid var(--bl-filet);
    font-size: 0.85rem; color: var(--bl-attenue);
}
.bl-pied p { margin: 0; }
.bl-pied ul { display: flex; gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.bl-pied a { color: var(--bl-attenue); text-decoration: none; }
.bl-pied a:hover { color: var(--bl-encre); text-decoration: underline; }

@media (max-width: 640px) {
    body { font-size: 16px; }
    .bl-suite-grille { grid-template-columns: 1fr; }
    .bl-nav-liens a { padding: 0.45rem 0.7rem; font-size: 0.83rem; }

    /* La barre mesurait 470 px sur un écran de 375 (relevé du 19/08/2026) :
       logo et liens sur une seule ligne qui ne pliait pas. Toute la page
       devenait donc plus large que l'écran, on pouvait la faire glisser de
       droite à gauche, et le navigateur la dézoomait pour la faire tenir —
       le texte de l'article devenait illisible avant même d'être lu.
       On laisse la rangée plier, et le bloc de liens se centrer dessous. */
    .bl-nav { flex-wrap: wrap; gap: 0.5rem 0.9rem; padding: 0.8rem 1rem; }
    .bl-nav-liens { flex-wrap: wrap; justify-content: center; row-gap: 0.35rem; }
    .bl-nav-logo { font-size: 0.98rem; }
}


/* ── La barre du blog sur téléphone ──────────────────────────────────────
   Elle demandait 468 px pour un écran de 375 : le mot de la marque, trois
   liens et le bouton ne tiennent pas sur une ligne. Elle n'avait jamais été
   adaptée, ayant son propre balisage plutôt que celui des autres pages.

   Le mot part et l'icône reste, comme partout ailleurs sous 600 px. Les liens
   se resserrent, et le bouton garde sa cible de 44 px : c'est lui qui mène au
   produit depuis un article, la seule raison d'être de ce blog. */
@media (max-width: 600px) {
    .bl-nav { gap: 0.5rem; padding: 0.85rem 1rem; }
    .bl-nav-logo span { display: none; }
    .bl-nav-liens { gap: 0.15rem; }
    .bl-nav-liens a { padding: 0.55rem 0.6rem; font-size: 0.82rem; }
    .bl-nav-cta { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
}


/* ── L'encadré d'avertissement ───────────────────────────────────────────
   Utilisé par l'article d'exemple pour annoncer que ses chiffres sont une
   illustration. IL DOIT SE DISTINGUER DU TEXTE COURANT : noyé dans le corps,
   l'avertissement se saute, et le lecteur prend l'exemple pour un relevé réel
   — exactement ce que la mention est là pour empêcher. */
.bl-corps .encadre {
    margin: 2rem 0;
    padding: 1.1rem 1.3rem;
    border-left: 3px solid var(--bl-accent, currentColor);
    background: rgba(127, 127, 127, .08);
    border-radius: 0 8px 8px 0;
    font-size: .95rem;
    line-height: 1.65;
}