/* ============================================================
   FOC STUDIO — BLOG (commun : liste /blog/ + enveloppe d'article)
   ------------------------------------------------------------
   Préfixe bl-. S'appuie sur css/base.css (tokens, titres, boutons,
   cartes, reveals). Le style propre à un article vit dans son
   propre fichier (ex. css/blog-prix.css).
   ============================================================ */

/* Texte pour lecteurs d'écran uniquement (en-têtes de tableau, etc.). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Largeur de la colonne de lecture (texte, partage, consigne). */
:root { --bl-col: 1000px; }

/* Rythme vertical du blog : moins d'air entre hero, règle et texte. */
body.page-blog { --section-pad: clamp(2.75rem, 5.5vw, 5.5rem); }

/* ---------- HERO (fond FEU : toute page blog commence par du rouge — Janine, 20 oct. 2026) ---------- */
.bl-hero {
  background: var(--feu);
  color: var(--noir);
  padding: calc(var(--section-pad) + clamp(60px, 8vw, 110px)) var(--gutter) var(--section-pad);
}

.bl-hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.bl-hero__sur { color: var(--noir); font-weight: 700; }
.bl-hero .text-feu { color: var(--rose); }   /* l'accent passe en rose sur fond feu */

.bl-hero__title {
  color: var(--noir);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.bl-hero__sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--noir);
  line-height: 1.4;
  max-width: 730px;
  text-wrap: balance;
}

/* ---------- LISTE (fond ROSE : la dernière section avant le pied de page est toujours rose) ---------- */
.bl-list {
  background: var(--rose);
  padding: var(--section-pad) var(--gutter);
}

.bl-list__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
}
.bl-list__inner--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin: 0; }

/* ---------- CARTE D'ARTICLE (blog/_card.php) : tout le bloc est un lien, cadre noir,
   survol = fond noir + titre rose ; avec image = deux colonnes (image | texte) ---------- */
.bl-list__inner { align-items: stretch; grid-auto-flow: dense; }   /* même hauteur sur une rangée : bas alignés */
.bl-card {
  --card-x: clamp(1.25rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--noir);
  text-decoration: none;
  border: 2px solid var(--noir);
  background: transparent;
  transition: background 0.3s var(--ease-out-quart, ease), color 0.3s;
}
.bl-card[hidden] { display: none !important; }
.bl-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 2em var(--card-x) 1.25rem;
}
.bl-card__img {
  display: block;
  overflow: hidden;
  background: rgba(10, 10, 10, 0.08);
}
.bl-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-expo, ease);
}
.bl-card:hover .bl-card__img img { transform: scale(1.03); }
/* Avec image : la carte prend deux colonnes, image à gauche, texte à droite */
.bl-card--img { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bl-card--img .bl-card__img img { aspect-ratio: auto; min-height: 100%; }
.bl-card__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-wrap: balance;
  margin: 0 0 0.6rem;
  transition: color 0.3s;
}
.bl-card__desc {
  display: -webkit-box;                    /* coupe à 4 lignes avec « … » si la description est longue */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.45;
  margin-bottom: clamp(1rem, 1.6vw, 1.4rem);
}
.bl-card__meta { margin-top: auto; }       /* le pied reste collé en bas, quelle que soit la longueur */
.bl-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(10, 10, 10, 0.5);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.7rem, 0.85vw, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: border-color 0.3s;
}
.bl-card__when { font-weight: 400; }
.bl-card__sep { font-weight: 400; opacity: 0.5; }
.bl-card__draft { padding: 0.1em 0.5em; border: 1px solid currentColor; font-size: 0.85em; }
.bl-card__go {
  margin-left: auto;
  width: 1.25rem;
  color: var(--noir);
  transition: transform 0.4s var(--ease-out-expo, ease), color 0.3s;
}
.bl-card__go svg { display: block; width: 100%; height: auto; fill: currentColor; }
/* Survol / focus : la carte s'inverse */
.bl-card:hover,
.bl-card:focus-visible { background: var(--noir); color: var(--blanc); outline: none; }
.bl-card:hover .bl-card__title,
.bl-card:focus-visible .bl-card__title { color: var(--rose); }
.bl-card:hover .bl-card__meta,
.bl-card:focus-visible .bl-card__meta { border-top-color: rgba(255, 255, 255, 0.35); }
.bl-card:hover .bl-card__go,
.bl-card:focus-visible .bl-card__go { color: var(--rose); transform: translateX(0.25em); }

.bl-empty {
  font-family: var(--font-body);
  color: var(--noir);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

@media (max-width: 1100px) {
  .bl-list__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bl-list__inner, .bl-list__inner--2 { grid-template-columns: 1fr; }
  .bl-card--img { grid-column: auto; grid-template-columns: 1fr; }
}

/* ============================================================
   ARTICLE — enveloppe commune (hero noir → contenu → partage → offre)
   Chaque article = une page « info indépendante » qui traite UN sujet
   et glisse UNE offre FOC en bas de page (tunnel léger).
   ============================================================ */
.bl-hero__meta {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 0.95vw, 0.9rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(10, 10, 10, 0.65);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* TL;DR dans le hero : l'essentiel en trois lignes. */
.bl-tldr {
  max-width: 640px;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.1rem, 2.2vw, 1.75rem);
  border: 2px solid var(--noir);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.45;
}
.bl-tldr__label {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6em;
}
.bl-tldr ul { list-style: none; padding: 0; }
.bl-tldr li { position: relative; padding-left: 1.2em; }
.bl-tldr li + li { margin-top: 0.4em; }
.bl-tldr li::before { content: '→'; position: absolute; left: 0; font-weight: 700; }
.bl-tldr code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

/* ---------- LA RÈGLE (bandeau NOIR, énorme : après un hero feu) ---------- */
.bl-rule {
  background: var(--noir);
  color: var(--blanc);
  padding: var(--section-pad) var(--gutter);
}

.bl-rule__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.bl-rule__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}

.bl-rule__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 4.25rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 14ch;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.bl-rule__body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.4;
  max-width: 640px;
}

.bl-rule__body p { margin-bottom: 0.9em; }
.bl-rule__body strong { font-weight: 700; }

.bl-rule__label { color: var(--rose); }

.bl-rule__quote {
  border-left: 3px solid var(--rose);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  margin: 1.25em 0;
  font-style: italic;
}

/* ---------- PROSE (fond ROSE : jamais de blanc sur le blog — Janine, 20 oct. 2026) ----------
   Colonne de lecture 720 px alignée sur le bord gauche des en-têtes (même
   conteneur 1280 px que .bl-hero__inner), pas centrée : même alignement partout. */
.bl-prose {
  background: var(--rose);
  color: var(--noir);
  padding: var(--section-pad) var(--gutter);
  padding-left: max(var(--gutter), calc((100% - var(--max-width)) / 2));
}

.bl-prose__inner {
  max-width: var(--bl-col);
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.55;
}

.bl-prose__inner > * + * { margin-top: 1em; }

.bl-prose__inner h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-top: 2.2em;
  margin-bottom: 0.6em;
}

.bl-prose__inner h2:first-child { margin-top: 0; }

.bl-prose__inner h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05em;
  margin-top: 1.6em;
}

.bl-prose__inner strong { font-weight: 700; }
.bl-prose__inner em { font-style: italic; }
.bl-prose__inner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(10, 10, 10, 0.1);
  padding: 0.1em 0.35em;
  border-radius: 0;
}

.bl-prose__inner a { color: var(--noir); text-decoration: underline; text-underline-offset: 0.15em; }   /* même style que les petits liens du hero : soulignement noir */
.bl-prose__inner a:hover { color: var(--feu); }

.bl-prose__inner ul,
.bl-prose__inner ol { padding-left: 1.4em; }
.bl-prose__inner li + li { margin-top: 0.4em; }

.bl-prose__inner blockquote {
  border-left: 3px solid var(--feu);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  font-style: italic;
}

/* Étapes numérotées (« Toujours un doute ? ») */
.bl-steps { list-style: none; padding: 0; counter-reset: step; }
.bl-steps li {
  position: relative;
  padding-left: 3rem;
  counter-increment: step;
}
.bl-steps li + li { margin-top: 1.1em; }
.bl-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0;                 /* carré : jamais d'arrondi sur FOC */
  background: var(--feu);
  color: var(--blanc);
  font-family: var(--font-title);
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: 1rem;
}

/* Tableaux */
.bl-table-wrap { overflow-x: auto; }
.bl-prose__inner table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}
.bl-prose__inner th,
.bl-prose__inner td {
  text-align: left;
  vertical-align: top;
  padding: 0.7em 0.8em;
  border-bottom: 1px solid rgba(10, 10, 10, 0.15);
}
.bl-prose__inner th {
  font-weight: 700;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--noir);
}
.bl-prose__inner td strong { font-weight: 700; }
.bl-table--verdict td:first-child { width: 2.5em; font-size: 1.2em; }
.bl-table--verdict td:nth-child(2),
.bl-table--verdict td:nth-child(2) strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; white-space: nowrap; } /* l'adresse reste sur UNE ligne, même la partie en gras (base.css remet strong en white-space normal) ; le tableau défile si besoin */
.bl-table--verdict td:nth-child(2) strong { font-size: 1em; }

/* Encadré (pourquoi j'écris ça, conclusion des tests) */
.bl-aside {
  background: var(--noir);
  color: var(--blanc);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.bl-aside h2 { color: var(--rose); }
.bl-aside a { color: var(--blanc); text-decoration-color: var(--rose); }
.bl-aside > * + * { margin-top: 0.9em; }

/* Séparateur « pour aller plus loin » */
.bl-more {
  margin-top: 3em;
  padding-top: 2em;
  border-top: 2px solid var(--noir);
}
.bl-more__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--noir);
}

/* ---------- PARTAGE (fond noir) — aucun SDK tiers ---------- */
.bl-share {
  background: var(--noir);
  color: var(--blanc);
  padding: var(--section-pad) var(--gutter);
  padding-left: max(var(--gutter), calc((100% - var(--max-width)) / 2));
}

.bl-share__inner {
  max-width: var(--bl-col);
  margin: 0;
}

.bl-share__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.bl-share__title .text-rose { color: var(--rose); }

.bl-share__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bl-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;                 /* jamais d'arrondi sur FOC */
  background: transparent;
  color: var(--blanc);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.bl-share__btn:hover,
.bl-share__btn:focus-visible {
  border-color: var(--rose);
  background: var(--rose);
  color: var(--noir);
}

.bl-share__btn svg { width: 1.1em; height: 1.1em; flex: none; }
.bl-share__btn.is-copied { border-color: var(--rose); background: var(--rose); color: var(--noir); }

/* Bouton natif (mobile, navigator.share) : caché tant que le JS ne l'active pas. */
.bl-share__native { display: none; }
.bl-share.has-native .bl-share__native { display: inline-flex; }
.bl-share.has-native .bl-share__row { display: none; }

/* ---------- OFFRE (fond ROSE : dernière section avant le pied de page) ---------- */
.bl-offer {
  background: var(--rose);
  color: var(--noir);
  padding: var(--section-pad) var(--gutter);
}

.bl-offer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.bl-offer__label { color: var(--noir); }

.bl-offer__title {
  color: var(--noir);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.bl-offer__title .text-rose { color: var(--feu); }

.bl-offer__desc {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.45;
  max-width: 560px;
}

.bl-offer__desc + .bl-offer__desc { margin-top: 0.9em; }

.bl-offer__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.bl-offer__points {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.bl-offer__points li {
  --card-pad: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.4;
  color: var(--blanc);
}

.bl-offer__points strong { font-weight: 700; color: var(--rose); }

@media (max-width: 900px) {
  .bl-offer__inner { grid-template-columns: 1fr; }
}

/* ---------- TAGS sur /blog/ : filtre + puces sur les cartes ---------- */
.bl-tags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
}
.bl-tags__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 0.95em;
  border: 2px solid var(--noir);
  border-radius: 0;
  background: transparent;
  color: var(--noir);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.bl-tags__btn:hover,
.bl-tags__btn:focus-visible { background: rgba(10, 10, 10, 0.12); }
.bl-tags__btn.is-active { background: var(--noir); color: var(--rose); }
.bl-tags__count { font-weight: 400; opacity: 0.7; }
.bl-empty--filter { grid-column: 1 / -1; }
/* [hidden] doit gagner sur le display:flex des cartes (filtre par tag). */
.bl-card[hidden], .bl-empty--filter[hidden] { display: none !important; }

/* Ancres (sommaire) : on s'arrête avec de l'air au-dessus du titre, pas collé au header. */
.bl-prose__inner h2,
.bl-prose__inner h3 { scroll-margin-top: clamp(100px, 16vh, 160px); }
/* (scroll-behavior: smooth est déjà posé dans base.css) */

/* ---------- SOMMAIRE LATÉRAL (barre qui suit les titres) ---------- */
.bl-toc:not(.is-ready) { display: none; }
.bl-toc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.3;
}
.bl-toc__label {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--feu);
  margin-bottom: 0.9rem;
}
.bl-toc__rail { display: none; }
.bl-toc__list { list-style: none; padding: 0; margin: 0; }
.bl-toc__list li { position: relative; padding-left: 1rem; }
.bl-toc__list li + li { margin-top: 0.55rem; }
.bl-toc__list a {
  color: rgba(10, 10, 10, 0.65);
  text-decoration: none;
  transition: color 0.2s;
}
.bl-toc__list a:hover,
.bl-toc__list li.is-active a { color: var(--noir); }
.bl-toc__list li.is-active a { font-weight: 700; }
.bl-toc__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 0;
  background: rgba(10, 10, 10, 0.2);
  transition: background 0.2s, transform 0.2s;
}
.bl-toc__list li.is-active::before { background: var(--feu); transform: scale(1.4); }

/* Petit écran : sommaire compact au-dessus du texte. */
.bl-prose--toc .bl-toc { max-width: var(--bl-col); margin: 0 0 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(10, 10, 10, 0.2); }

/* Grand écran : sommaire collant à GAUCHE, texte à côté. */
@media (min-width: 1180px) {
  .bl-prose--toc {
    display: grid;
    grid-template-columns: 200px var(--bl-col);
    justify-content: start;
    column-gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
  }
  .bl-prose--toc .bl-toc {
    position: sticky;
    top: 110px;
    margin: 0;
    padding: 0 0 0 1.25rem;
    border: 0;
    display: grid;
    grid-template-columns: auto;
  }
  .bl-prose--toc .bl-prose__inner { margin: 0; }
  .bl-toc__rail {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(10, 10, 10, 0.18);
    border-radius: 0;
    overflow: hidden;
  }
  .bl-toc__fill {
    display: block;
    width: 100%;
    height: 0;
    background: var(--feu);
    transition: height 0.15s linear;
  }
}

/* ---------- /blog/ : chargement progressif (10 d'abord, puis par 6) ---------- */
/* Sentinelle du défilement infini : un bloc vide d'un pixel en bas de la grille. */
.bl-more-articles { grid-column: 1 / -1; height: 1px; }
.bl-more-articles[hidden] { display: none !important; }
.bl-progress {
  display: grid;
  gap: 0.5rem;
  width: min(100%, 360px);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--noir);
}
.bl-progress__bar {
  display: block;
  height: 4px;
  background: rgba(10, 10, 10, 0.2);
  border-radius: 0;
  overflow: hidden;
}
.bl-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--noir);
  transition: width 0.3s var(--ease-out-quart, ease);
}

/* Sommaire : sous-entrées (h3 marqués data-toc) sous leur titre de niveau 2 */
.bl-toc__sub { list-style: none; padding: 0; margin: 0.45rem 0 0; }
.bl-toc__sub li { padding-left: 0.9rem; font-size: 0.92em; }
.bl-toc__sub li + li { margin-top: 0.4rem; }
.bl-toc__sub li::before { width: 0.3rem; height: 0.3rem; top: 0.5em; }
.bl-toc__list > li.is-open > a { color: var(--noir); }

/* Listes numérotées sur mobile (Janine, 26 oct.) : moins de retrait, numéro plus petit, lignes plus serrées */
@media (max-width: 640px) {
  .bl-prose__inner .bl-steps { padding-left: 0; }
  .bl-steps li { padding-left: 2.3rem; }
  .bl-steps li + li { margin-top: 0.8em; }
  .bl-steps li::before { width: 1.7rem; height: 1.7rem; font-size: 0.85rem; top: 0.1em; }
}