/* Le blog.
 *
 * Reprend le fond et les tokens du reste du site. La colonne de lecture
 * est volontairement etroite : un article de fond se lit mal sur toute
 * la largeur d'un ecran, et les blocs qui ont besoin d'air (graphique,
 * simulateur, cartes d'offres) debordent d'eux-memes.
 */

.bl-shell{padding-top:74px;max-width:1100px}

.bl-fil{margin:0 0 18px}
.bl-fil a{color:var(--muted);text-decoration:none;font-size:.92rem}
.bl-fil a:hover{color:var(--green-soft)}

/* ---------- Index ---------- */

.bl-hero{max-width:62ch;margin:0 0 38px}
.bl-hero h1{margin:0 0 14px;font:700 clamp(2.1rem,5vw,3.2rem)/1.06 var(--ff-titre);
  letter-spacing:-.02em;color:var(--text)}
.bl-hero p{margin:0;color:var(--muted);font-size:1.08rem;line-height:1.65}

/* « Mieux espacees », demande le pense-bete. L'ecart passe de 18 a
   26 px et la colonne minimale de 320 a 340 : deux cartes trop serrees
   se lisent comme un tableau, pas comme des articles. */
.bl-grille{display:grid;gap:26px;margin:0 0 40px;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.bl-carte{display:flex;flex-direction:column;gap:0;padding:0 0 26px;
  border:1px solid var(--line);border-radius:22px;text-decoration:none;
  overflow:hidden;
  background:var(--surface-2);
  transition:transform .18s ease,border-color .18s ease}
.bl-carte-corps{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:20px 26px 0;flex:1 1 auto}
.bl-vignette{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;
  display:block;margin:0 0 6px;border-bottom:1px solid var(--line)}
.bl-carte .bl-carte .bl-cat{margin-top:0}

/* La couverture de l'article : large, mais elle ne doit pas repousser le
   texte sous la ligne de flottaison. */
.bl-couverture{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;
  display:block;margin:0 0 34px;border-radius:20px;
  border:1px solid var(--line)}
.bl-carte:hover{transform:translateY(-3px);border-color:rgba(85,230,149,.42)}
.bl-carte h2{margin:0;font:800 1.28rem var(--ff-titre);color:var(--text);line-height:1.28;letter-spacing:-.015em}
.bl-carte-chapo{margin:0;color:var(--muted);font-size:16px;line-height:1.6;flex:1 1 auto}

/* La pastille porte la couleur de sa famille, la meme que sur
   /partenaires : deux teintes differentes pour « Cashback » selon la
   page, et le visiteur ne fait plus le lien entre les deux. La teinte
   arrive en variable depuis le PHP, qui la lit dans api/familles.php. */
.bl-cat{margin:0;display:inline-flex;align-self:flex-start;padding:6px 13px;
  --famille:#55E695;
  border-radius:999px;font-size:14px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--famille) var(--dose-famille),var(--text));
  border:1px solid color-mix(in srgb,var(--famille) 40%,transparent);
  background:color-mix(in srgb,var(--famille) 12%,transparent)}

/* Trois informations, et elles racontent un entretien : qui repond du
   texte, quand il est paru, combien de temps il prend. La date de
   verification des montants n'est pas ici mais dans le sceau, plus
   haut : c'est elle qui compte le plus, elle ne se range pas avec le
   reste en petit gris. */
.bl-meta{margin:auto 0 0;padding-top:4px;display:flex;flex-wrap:wrap;gap:8px 16px;
  color:var(--faint);font-size:14px}
.bl-meta span{display:inline-flex;align-items:center;gap:6px}

/* ---------- Article ---------- */

/* L'unite « ch » se calcule sur la police de l'ELEMENT, pas sur celle
   de son titre. Posee ici, ou le texte fait 16 px, elle limitait le
   bloc a environ 500 px : le titre de l'article, ecrit en 46 px,
   tombait sur quatre lignes etroites au milieu d'une page de 1100.
   Une largeur en rem dit ce qu'on veut vraiment dire. */
.bl-tete{max-width:44rem;margin:0 0 30px}
.bl-tete .bl-chapo{max-width:38rem}
.bl-tete h1{margin:16px 0 16px;font:800 clamp(2rem,4.6vw,2.9rem)/1.1 var(--ff-titre);
  letter-spacing:-.025em;color:var(--text);text-wrap:balance}
.bl-chapo{margin:0 0 18px;color:var(--muted);font-size:1.14rem;line-height:1.62}

/* L'encadre de synthese : ce que le lecteur retient s'il ne lit rien
   d'autre. Il est en haut pour cette raison. */
.bl-retenir{margin:0 0 34px;padding:22px 26px;border-radius:18px;
  border:1px solid rgba(85,230,149,.24);
  background:linear-gradient(180deg,rgba(85,230,149,.09),rgba(85,230,149,.02))}
.bl-retenir h2{margin:0 0 12px;font:800 14px Inter,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green)}
.bl-retenir ul{margin:0;padding-left:20px;display:grid;gap:8px}
.bl-retenir li{color:var(--muted);line-height:1.55}

.bl-section{margin:0 0 38px}
.bl-section h2{margin:0 0 16px;font:800 clamp(1.45rem,3vw,1.95rem)/1.2 Inter,sans-serif;
  color:var(--text);letter-spacing:-.015em;max-width:24ch}
.bl-section p{margin:0 0 14px;max-width:66ch;color:var(--muted);line-height:1.75;font-size:1.02rem}

.bl-liste{margin:0 0 16px;padding-left:20px;max-width:66ch;display:grid;gap:9px}
.bl-liste li{color:var(--muted);line-height:1.65}

.bl-encadre{margin:0 0 20px;padding:20px 24px;border-radius:16px;max-width:66ch;
  border-left:3px solid var(--green);
  background:var(--surface-2)}
.bl-encadre h3{margin:0 0 10px;font-size:1.02rem;font-weight:800;color:var(--text)}
.bl-encadre p:last-child{margin-bottom:0}

.bl-source{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.5;max-width:66ch}

/* ---------- Cartes d'offres ---------- */

.bl-offres{display:grid;gap:16px;margin:0 0 26px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.bl-offre{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px;
  border:1px solid var(--line);border-radius:20px;
  background:var(--surface-2)}
.bl-offre::before{content:"";position:absolute;inset:-1px -1px auto;height:3px;
  border-radius:20px 20px 0 0;background:var(--marque)}
.bl-rang{position:absolute;top:-12px;right:18px;margin:0;padding:4px 11px;
  border-radius:999px;font:800 14px Inter,sans-serif;color:#04160b;
  background:var(--marque)}
.bl-offre-tete{display:flex;align-items:center;gap:13px}
.bl-logo{flex:0 0 auto;border-radius:12px;background:#fff}
.bl-offre h3{margin:0 0 3px;font-size:1.12rem;font-weight:800;color:var(--text)}
.bl-resume{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.bl-gain{margin:0;font:800 1.5rem Inter,sans-serif;color:var(--marque);line-height:1.1}
.bl-gain span{display:block;margin-top:3px;font:700 14px Inter,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.bl-atouts{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.bl-atouts li{position:relative;padding-left:20px;color:var(--muted);font-size:.88rem;line-height:1.4}
.bl-atouts li::before{content:"";position:absolute;left:2px;top:.45em;width:9px;height:9px;
  border-radius:50%;background:var(--marque);opacity:.75}
.bl-code{margin:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bl-code span{font:700 14px Inter,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.bl-code code{padding:5px 11px;border-radius:8px;font:700 .92rem ui-monospace,monospace;
  color:var(--text);border:1px dashed rgba(85,230,149,.42);background:rgba(85,230,149,.07)}
.bl-date{margin:0;color:var(--muted);font-size:14px}
.bl-cta{margin-top:auto;min-height:46px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:12px;text-decoration:none;
  font:800 14px Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;
  color:#04160b;background:var(--marque);transition:filter .16s ease,transform .16s ease}
.bl-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ---------- Tableau ---------- */

.bl-tableau{margin:0 0 26px}
.bl-tableau figcaption{margin:0 0 12px;font-weight:800;color:var(--text)}
/* Le tableau deborde sur telephone : il defile dans sa propre boite
   plutot que de pousser la page entiere. */
.bl-tableau-boite{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.bl-tableau table{width:100%;border-collapse:collapse;min-width:420px}
.bl-tableau th,.bl-tableau td{padding:13px 16px;text-align:left;font-size:.92rem;
  border-bottom:1px solid var(--line)}
.bl-tableau th{font:800 14px Inter,sans-serif;letter-spacing:.11em;
  text-transform:uppercase;color:var(--green);background:rgba(85,230,149,.05)}
.bl-tableau td{color:var(--muted)}
.bl-tableau tbody tr:last-child td{border-bottom:0}
.bl-forme{display:block;margin-top:3px;color:var(--muted);font-size:14px}

/* ---------- Graphique ---------- */

.bl-graphique{margin:0 0 26px;padding:22px;border-radius:18px;
  border:1px solid var(--line);
  background:var(--surface-2)}
.bl-graphique figcaption{margin:0 0 16px;font-weight:800;color:var(--text)}
.bl-graphique svg{width:100%;height:auto;display:block;overflow:visible}
.bl-g-nom{fill:#DCE7E1;font:700 14px Inter,sans-serif}
.bl-g-valeur{fill:#FFFFFF;font:800 14px Inter,sans-serif}
.bl-g-fond{fill:rgba(255,255,255,.06)}

/* ---------- Simulateur ---------- */

.bl-simu{margin:0 0 26px;padding:26px;border-radius:20px;
  border:1px solid rgba(85,230,149,.26);
  background:radial-gradient(circle at 50% 0%,rgba(85,230,149,.10),transparent 18rem),
    var(--surface-2)}
.bl-simu h3{margin:0 0 18px;font-size:1.16rem;font-weight:800;color:var(--text)}
.bl-simu-label{display:block;font:700 14px Inter,sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.bl-simu-pas{display:block;margin:4px 0 10px;font:800 2rem Inter,sans-serif;color:var(--text)}
.bl-simu-curseur{width:100%;accent-color:var(--green)}
.bl-simu-total{margin:20px 0 14px}
.bl-simu-total strong{font:800 2.4rem Inter,sans-serif;color:var(--green)}
.bl-simu-total span{margin-left:8px;color:var(--muted)}
.bl-simu-detail{margin:0;padding:0;list-style:none;display:grid;gap:8px;max-width:340px}
.bl-simu-detail li{display:flex;justify-content:space-between;gap:16px;
  padding-bottom:8px;border-bottom:1px solid var(--line);
  color:var(--muted);font-size:.92rem}
.bl-simu-detail strong{color:var(--text)}

/* ---------- Pied d'article ---------- */

.bl-pied{margin:28px 0 0;padding:26px;border-radius:20px;
  border:1px solid var(--line);background:var(--surface-2)}
.bl-transparence{margin:0 0 18px;max-width:66ch;color:var(--muted);
  font-size:.92rem;line-height:1.65}

.bl-vide{max-width:52ch;padding:40px 0}
.bl-vide h1{margin:0 0 12px;font:800 2rem Inter,sans-serif;color:var(--text)}
.bl-vide p{margin:0 0 20px;color:var(--muted);line-height:1.6}

@media(max-width:760px){
  .bl-shell{padding-top:78px}
  .bl-simu{padding:20px}
  .bl-simu-total strong{font-size:1.9rem}
}

@media(prefers-reduced-motion:reduce){
  .bl-carte,.bl-cta{transition:none}
  .bl-carte:hover,.bl-cta:hover{transform:none}
}

/* Le lien vers la page d'une marque, sous le bouton d'une offre citee
   dans un article. Discret : le bouton reste l'action principale. */
.bl-offre-fiche{margin:10px 0 0;text-align:center;font-size:14px;line-height:1.4}
.bl-offre-fiche a{color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.bl-offre-fiche a:hover{color:var(--marque,var(--green));
  border-bottom-color:color-mix(in srgb,var(--marque,var(--green)) 45%,transparent)}

/* ===================================================================
   LE SCEAU ET LE PARTAGE, ajoutes le 26 aout 2026, bloc 7.
   =================================================================== */

/* Le sceau de verification des montants. C'est le meme objet que sur
   les cartes d'offres et sur l'accueil : il n'y a aucune raison que
   l'element de marque du site s'arrete au catalogue.

   Ce qu'il date n'est pas l'article mais ses montants, et la nuance est
   ce qui fait « sentir que les articles sont suivis » : un texte publie
   il y a un mois dont les chiffres ont ete relus hier n'est pas un
   vieil article. */
.bl-sceau {
  margin: 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.bl-sceau svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* Sur la page d'un article, le sceau porte une phrase et un lien : il y
   a la place, et c'est l'endroit ou la question « pourquoi croire ces
   montants » se pose vraiment. */
.bl-sceau--article {
  margin: 18px 0 0;
  align-items: flex-start;
  padding: 11px 16px 11px 13px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.bl-sceau--article svg { margin-top: .2em; color: var(--accent-ink); }
.bl-sceau--article a { color: var(--accent-ink); font-weight: 700; }

/* --- Le partage ------------------------------------------------------
   Trois liens ordinaires, aucun script tiers : les boutons officiels
   chargent leur bibliotheque et posent leurs traceurs sur tous les
   lecteurs, y compris ceux qui ne cliquent jamais. */
.bl-partage {
  margin: 34px 0 0;
  padding: 22px 26px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.bl-partage-titre {
  margin: 0 0 14px;
  font: 700 1.02rem var(--ff-titre);
  color: var(--text);
}

.bl-partage-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bl-partage-lien {
  min-height: var(--tap);
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  font: 600 15px var(--ff-texte);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.bl-partage-lien:hover {
  border-color: var(--accent-line);
  background: var(--surface-3);
}

.bl-partage-lien:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .bl-partage { padding: 18px; }
  .bl-partage-liens { flex-direction: column; align-items: stretch; }
  .bl-partage-lien { justify-content: center; }
}

/* ==========================================================
   Les blocs de structure, poses le 27 aout 2026
   ----------------------------------------------------------
   Aucune regle existante n'a bouge : ce chantier porte sur le
   contenu des articles, et le volet visuel du blog venait
   d'etre refait le 26. Tout ce qui suit habille des blocs qui
   n'existaient pas.

   Deux contraintes gouvernent ces regles, et elles viennent du
   public : sept lecteurs sur dix ont plus de cinquante ans.
   Seize pixels de plancher pour tout texte, quarante quatre
   pixels de haut pour tout ce qu'on touche au doigt.
   ========================================================== */

/* ---------- La reponse, en tete d'article ---------- */
/* Elle porte le poids visuel le plus fort de la page apres le
   titre, parce qu'une bonne moitie des lecteurs ne lira qu'elle. */

.bl-reponse {
  margin: 0 0 8px;
  padding: 20px 22px;
  border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0;
  background: var(--accent-wash);
}

.bl-reponse p {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 1.12rem;
  line-height: 1.62;
}

.bl-reponse p:last-child { margin-bottom: 0; }

.bl-reponse ul {
  margin: 14px 0 0;
  padding: 0 0 0 20px;
  color: var(--muted);
  font-size: var(--fs-lift);
  line-height: 1.6;
}

.bl-reponse li { margin: 0 0 8px; }

/* ---------- Le sommaire ---------- */

.bl-sommaire {
  margin: 0 0 30px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.bl-sommaire-titre {
  margin: 0 0 10px;
  color: var(--faint);
  font: 700 .82rem/1 var(--ff-texte);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.bl-sommaire ol {
  margin: 0;
  padding: 0 0 0 22px;
  color: var(--muted);
}

.bl-sommaire li { margin: 0 0 6px; }

.bl-sommaire a {
  display: inline-block;
  padding: 6px 0;
  color: var(--muted);
  font-size: var(--fs-lift);
  line-height: 1.5;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.bl-sommaire a:hover,
.bl-sommaire a:focus-visible {
  color: var(--accent-ink);
  border-bottom-color: var(--accent-line);
}

/* ---------- L'appel a l'action, en milieu d'article ---------- */

.bl-appel {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0;
  padding: 22px 24px;
  border: 1px solid var(--accent-line);
  border-radius: 18px;
  background: var(--surface-2);
}

.bl-appel-titre {
  margin: 0 0 6px;
  color: var(--text);
  font: 700 1.12rem/1.3 var(--ff-titre);
}

.bl-appel-texte {
  margin: 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.6;
}

/* ---------- A qui c'est utile ---------- */

.bl-cas { display: grid; gap: 12px; margin: 4px 0 0; }

.bl-cas-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0;
  background: var(--surface);
}

/* Le cas defavorable se distingue par sa couleur d'avertissement,
   jamais par du rouge : ce n'est pas une erreur, c'est un conseil
   de ne pas y aller. */
.bl-cas-ligne--non { border-left-color: var(--warn); }

.bl-cas-profil {
  margin: 0;
  color: var(--text);
  font: 700 var(--fs-lift)/1.5 var(--ff-texte);
}

.bl-cas-reponse {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.62;
}

/* ---------- Les etapes ---------- */

.bl-etapes {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.bl-etapes li {
  position: relative;
  margin: 0 0 18px;
  padding: 0 0 0 52px;
  counter-increment: etape;
}

.bl-etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font: 800 1rem/1 var(--ff-titre);
}

.bl-etape-titre {
  margin: 6px 0 6px;
  color: var(--text);
  font: 700 var(--fs-lift)/1.4 var(--ff-texte);
}

.bl-etapes li p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.68;
}

/* ---------- Les questions ---------- */

.bl-questions { display: grid; gap: 4px; margin: 4px 0 0; }

.bl-qr {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.bl-qr:last-child { border-bottom: 0; }

.bl-qr h3 {
  margin: 0 0 8px;
  color: var(--text);
  font: 700 1.06rem/1.42 var(--ff-titre);
}

.bl-qr p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--fs-lift);
  line-height: 1.68;
}

.bl-qr p:last-child { margin-bottom: 0; }

/* ---------- Les sources ---------- */

.bl-sources ul { margin: 0; padding: 0; list-style: none; }

.bl-sources li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.bl-sources li:last-child { border-bottom: 0; }

.bl-source-quoi {
  flex: 1 1 320px;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.55;
}

.bl-source-ou { color: var(--muted); font-size: .94rem; }

.bl-source-le { color: var(--faint); font-size: .88rem; }

/* ---------- A lire ensuite ---------- */

.bl-suite {
  margin: 34px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
}

.bl-suite h2 {
  margin: 0 0 16px;
  color: var(--text);
  font: 700 1.32rem/1.25 var(--ff-titre);
}

.bl-suite ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.bl-suite a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: var(--tap);
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none;
}

.bl-suite a:hover,
.bl-suite a:focus-visible {
  border-color: var(--accent-line);
  background: var(--surface-2);
}

.bl-suite-cat {
  color: var(--faint);
  font: 700 .76rem/1 var(--ff-texte);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bl-suite-titre {
  color: var(--text);
  font: 600 var(--fs-lift)/1.45 var(--ff-texte);
}

/* ==========================================================
   L'espace commentaires
   ----------------------------------------------------------
   Les champs sont grands, les intitules sont au dessus et non
   dedans : un intitule pose a l'interieur du champ disparait
   des qu'on ecrit, et c'est celui qui lit lentement qui le
   cherche ensuite.
   ========================================================== */

.bl-avis {
  margin: 34px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
}

.bl-avis h2 {
  margin: 0 0 8px;
  color: var(--text);
  font: 700 1.5rem/1.22 var(--ff-titre);
}

.bl-avis-vide {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: var(--fs-lift);
  line-height: 1.6;
}

.bl-avis-liste {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.bl-avis-message {
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.bl-avis-tete {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  margin: 0 0 8px;
}

.bl-avis-prenom {
  color: var(--text);
  font: 700 var(--fs-base)/1.4 var(--ff-texte);
}

.bl-avis-jour { color: var(--faint); font-size: .86rem; }

.bl-avis-texte {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-lift);
  line-height: 1.68;
  overflow-wrap: anywhere;
}

/* Le retour apres envoi. Il doit se voir sans etre crie : le
   lecteur vient d'agir, il cherche la confirmation du regard. */
.bl-avis-retour {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: var(--fs-lift);
  line-height: 1.55;
}

.bl-avis-retour--ok {
  border: 1px solid var(--accent-line);
  background: var(--accent-wash);
  color: var(--text);
}

.bl-avis-retour--refus {
  border: 1px solid var(--warn);
  background: var(--warn-wash);
  color: var(--text);
}

.bl-avis-form { display: grid; gap: 16px; }

.bl-avis-champs {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.bl-avis-champs p,
.bl-avis-bloc { margin: 0; display: grid; gap: 6px; }

.bl-avis-form label {
  color: var(--text);
  font: 600 var(--fs-base)/1.4 var(--ff-texte);
}

.bl-avis-form input[type="text"],
.bl-avis-form input[type="email"],
.bl-avis-form textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: 400 var(--fs-lift)/1.55 var(--ff-texte);
}

.bl-avis-form textarea { resize: vertical; min-height: 130px; }

.bl-avis-form input:focus-visible,
.bl-avis-form textarea:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
  border-color: var(--accent-line);
}

.bl-avis-aide {
  color: var(--faint);
  font-size: .92rem;
  line-height: 1.5;
}

.bl-avis-form button { justify-self: start; min-height: var(--tap); }

.bl-avis-mentions {
  margin: 0;
  color: var(--faint);
  font-size: .92rem;
  line-height: 1.6;
}

.bl-avis-mentions a { color: var(--muted); }

/* Le champ piege.
   Il ne doit etre vu de personne, ni a l'ecran ni a l'oreille, mais il
   doit rester dans le document : display:none ferait que certains
   navigateurs ne l'envoient plus, et le piege ne prendrait plus rien. */
.bl-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .bl-cas-ligne { grid-template-columns: 1fr; gap: 8px; }
  .bl-appel { flex-direction: column; align-items: stretch; }
  .bl-appel .resource-primary { justify-content: center; }
  .bl-reponse { padding: 16px 18px; }
  .bl-avis-message { padding: 14px 16px; }
}

/* ==========================================================
   La colonne de lecture, reparee le 27 aout 2026
   ----------------------------------------------------------
   Joris, capture a l'appui : « les pages de blogs sont mal
   structuré ». Mesure sur un ecran de 1920 px, avant :

     conteneur de l'article ...... 1248 px
     colonne de texte ............  746 px, calee a GAUCHE
     vide a droite ...............  820 px
     un sous titre ...............  518 px, coupe en deux
                                    lignes avec 1073 px de
                                    vide a sa droite
     couverture ..................  655 px de haut, soit un
                                    ecran entier avant le titre

   LA CAUSE N'ETAIT PAS DANS CETTE FEUILLE, et c'est ce qui la
   rendait invisible. blog.css demande depuis toujours
   « .bl-shell{max-width:1100px} ». Cette regle n'a JAMAIS
   produit son effet : responsive.css declare
   « .resource-shell{max-width:100%} », meme specificite, et
   elle est chargee APRES. La derniere gagne.

   C'est la meme famille que la regle d'en-tete rangee dans la
   feuille d'une page, le 23 aout : une regle qui existe, qui
   est correcte, et qu'une autre annule sans que rien ne le
   signale. Le controle qui l'a montree ne lit pas le CSS, il
   MESURE la page rendue.

   LE REMEDE N'EST PAS D'ELARGIR LE TEXTE. Une ligne de 1200 px
   est illisible, et le public de ce site lit lentement : la
   colonne de 66 caracteres est bonne, c'est le conteneur qui
   etait trop large autour d'elle. On resserre donc le
   conteneur sur la colonne, et les blocs qui ont besoin d'air
   debordent des deux cotes.
   ========================================================== */

/* De quoi deborder symetriquement, sans jamais sortir de l'ecran. */
.bl-page {
  --bl-debord: clamp(0px, 8vw, 190px);
}

/* La double classe bat responsive.css sans employer !important,
   qui rendrait la regle impossible a corriger ensuite. */
.bl-page .bl-shell {
  max-width: calc(52rem + 2 * var(--bl-debord));
}

/* La colonne de lecture, centree. Tout ce qui n'est pas
   explicitement large tient dedans. */
.bl-page .bl-article,
.bl-page .bl-fil,
.bl-page .bl-vide {
  max-width: 52rem;
  margin-inline: auto;
}

/* Les blocs qui ont besoin d'air debordent des deux cotes.
   Ils restent centres sur la colonne, donc la page garde un axe. */
.bl-page .bl-offres,
.bl-page .bl-graphique,
.bl-page .bl-simu,
.bl-page .bl-bareme,
.bl-page .bl-couverture {
  width: calc(100% + 2 * var(--bl-debord));
  margin-inline: calc(-1 * var(--bl-debord));
  /* responsive.css plafonne « section » et les images a 100% de leur
     conteneur. Sans cette ligne, le bloc gardait la largeur de la colonne
     tout en recevant les marges negatives : il se decalait vers la gauche
     au lieu de deborder des deux cotes. Vu sur le simulateur, qui est un
     element section, et sur la couverture, qui est une image. */
  max-width: none;
}

/* La couverture ne mange plus l'ecran avant le titre.
   Son image est fabriquee en 1200 par 630 ; on la recadre plutot
   que de la deformer, et le plafond en pixels evite qu'elle
   grandisse indefiniment avec la fenetre. */
.bl-page .bl-couverture {
  aspect-ratio: auto;
  max-height: 360px;
  object-fit: cover;
  /* responsive.css plafonne toute image a 100% de son conteneur. Sans
     cette ligne, la couverture gardait la largeur de la colonne tout en
     recevant les marges negatives : elle se decalait vers la gauche au
     lieu de deborder des deux cotes. Mesure sur la page rendue, pas
     devinee en lisant la feuille. */
  max-width: none;
}

/* Un sous titre limite a 24 caracteres se coupait en deux lignes
   au milieu d'une page vide. La limite reste, elle empeche un
   titre de courir sur toute la largeur, mais elle respire. */
.bl-page .bl-section h2 {
  max-width: 40ch;
}

/* Ces largeurs de lecture ne servent plus a rien maintenant que
   le conteneur les porte, et elles recreaient le decalage a
   gauche dans les blocs qui debordent.

   L'en-tete en faisait partie : son titre etait limite a 44 rem
   dans une colonne de 52, donc il s'arretait bien avant le bord
   de la couverture juste en dessous. La limite avait ete posee
   quand le conteneur faisait 1100 px et servait alors a quelque
   chose ; elle ne sert plus qu'a decaler. */
.bl-page .bl-section p,
.bl-page .bl-liste,
.bl-page .bl-tete,
.bl-page .bl-tete .bl-chapo {
  max-width: none;
}

/* En dessous de la colonne de lecture, plus rien ne deborde :
   le calcul donnerait des marges negatives sur un ecran qui n'a
   pas la place, et la page defilerait de cote. */
@media (max-width: 900px) {
  .bl-page {
    --bl-debord: 0px;
  }

  .bl-page .bl-couverture {
    aspect-ratio: 1200 / 630;
    max-height: none;
  }
}

/* ==========================================================
   Deux alignements, repares le 27 aout 2026
   ----------------------------------------------------------
   Joris, captures a l'appui : « bloc mal alignés », et « même
   si le bloc attend un 3ème il faut aligner les offres même
   si y'en a 2 ou 1 ».
   ========================================================== */

/* ---------- Le formulaire de messages ----------
   Le champ du prenom descendait plus bas que celui du
   courriel, et il etait deux fois plus haut.

   LA CAUSE EST UNE HAUTEUR PARTAGEE. Les deux colonnes sont
   des cellules de grille, donc elles ont la meme hauteur, la
   plus grande des deux. Celle du courriel porte une ligne
   d'aide en dessous, elle est donc plus haute ; celle du
   prenom, qui n'en a pas, distribuait cette hauteur en trop
   entre son intitule et son champ. Le champ s'etirait.

   align-content:start dit aux deux cellules de garder leurs
   elements en haut, a leur taille naturelle. Les champs se
   retrouvent alors sur la meme ligne, ce qui est la seule
   chose que l'oeil regarde dans un formulaire. */
.bl-page .bl-avis-champs p,
.bl-page .bl-avis-bloc {
  align-content: start;
}

/* ---------- Les cartes d'offres ---------- */

/* Deux cartes ne laissent plus la place d'une troisieme.
   auto-fill reserve les colonnes vides, auto-fit les supprime.

   La borne haute reste 1fr et non une largeur fixe. Essayee a
   420 px, elle a produit l'inverse du but recherche : trois
   cartes de 420 plus leurs ecarts font 1292 px pour un bloc
   qui en mesure 1139, donc la troisieme tombait a la ligne
   suivante, seule. Une colonne qui ne peut pas retrecir ne
   sait pas s'adapter au bloc qui la contient. */
.bl-page .bl-offres {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* LES CONTENUS S'ALIGNENT D'UNE CARTE A L'AUTRE.
 *
 * Avant, chaque carte empilait ses elements pour son propre
 * compte : un resume sur trois lignes au lieu de deux, un
 * atout de plus, un code present d'un cote et absent de
 * l'autre, et le montant de gauche ne tombait plus en face du
 * montant de droite. Seul le bouton restait aligne, parce
 * qu'il etait pousse en bas.
 *
 * subgrid fait partager au contenu les lignes de la grille
 * parente : le montant de toutes les cartes tient sur la
 * meme ligne, les atouts aussi, et ainsi de suite.
 *
 * CHAQUE ELEMENT PORTE SA LIGNE EXPLICITEMENT, et ce n'est
 * pas du zele. Une carte sans code a un element de moins :
 * places automatiquement, ses elements suivants remonteraient
 * d'un cran et tout le benefice serait perdu, precisement sur
 * les cartes qui posent probleme. Avec une ligne nommee, la
 * carte sans code laisse sa ligne vide.
 *
 * Le nombre de lignes suit l'ordre pose par bloc_offres()
 * dans api/blog.php : tete, gain, atouts, code, date, bouton,
 * lien vers la fiche. Ajouter un element la bas oblige a
 * monter le compte ici. */
@supports (grid-template-rows: subgrid) {
  .bl-page .bl-offre {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    gap: 12px;
  }

  .bl-page .bl-offre-tete   { grid-row: 1; }
  .bl-page .bl-offre .bl-gain    { grid-row: 2; }
  .bl-page .bl-offre .bl-atouts  { grid-row: 3; }
  .bl-page .bl-offre .bl-code    { grid-row: 4; }
  .bl-page .bl-offre .bl-date    { grid-row: 5; }
  .bl-page .bl-offre .bl-cta     { grid-row: 6; margin-top: 0; }
  .bl-page .bl-offre .bl-offre-fiche { grid-row: 7; }

  /* Le haut de carte garde sa propre pile : le nom et le
     resume ne sont pas des lignes de la grille commune, ils
     vivent dans leur bloc. */
  .bl-page .bl-offre-tete {
    align-items: start;
  }
}