/* 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 Orbitron,sans-serif;
  letter-spacing:-.02em;color:#FFFFFF}
.bl-hero p{margin:0;color:#C7D3CC;font-size:1.08rem;line-height:1.65}

.bl-grille{display:grid;gap:18px;margin:0 0 40px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.bl-carte{display:flex;flex-direction:column;gap:10px;padding:0 0 26px;
  border:1px solid rgba(255,255,255,.09);border-radius:22px;text-decoration:none;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  transition:transform .18s ease,border-color .18s ease}
.bl-carte>*:not(.bl-vignette){margin-inline:26px}
.bl-vignette{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;
  display:block;margin:0 0 6px;border-bottom:1px solid rgba(255,255,255,.07)}
.bl-carte .bl-cat{margin-top:20px}

/* 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 rgba(255,255,255,.09)}
.bl-carte:hover{transform:translateY(-3px);border-color:rgba(85,230,149,.42)}
.bl-carte h2{margin:0;font-size:1.24rem;font-weight:800;color:#F2F5F3;line-height:1.3}
.bl-carte-chapo{margin:0;color:var(--muted);font-size:.95rem;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:.7rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--famille) 78%,#FFFFFF);
  border:1px solid color-mix(in srgb,var(--famille) 40%,transparent);
  background:color-mix(in srgb,var(--famille) 12%,transparent)}

.bl-meta{margin:0;display:flex;flex-wrap:wrap;gap:14px;
  color:var(--muted);font-size:.82rem}
.bl-meta span{display:inline-flex;align-items:center;gap:6px}

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

.bl-tete{max-width:62ch;margin:0 0 30px}
.bl-tete h1{margin:16px 0 16px;font:800 clamp(2rem,4.6vw,2.9rem)/1.1 Inter,sans-serif;
  letter-spacing:-.025em;color:#FFFFFF;text-wrap:balance}
.bl-chapo{margin:0 0 18px;color:#C7D3CC;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 .78rem 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:#DCE7E1;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:#F2F5F3;letter-spacing:-.015em;max-width:24ch}
.bl-section p{margin:0 0 14px;max-width:66ch;color:#C2CFC8;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:#C2CFC8;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:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.bl-encadre h3{margin:0 0 10px;font-size:1.02rem;font-weight:800;color:#F2F5F3}
.bl-encadre p:last-child{margin-bottom:0}

.bl-source{margin:10px 0 0;color:var(--muted);font-size:.82rem;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 rgba(255,255,255,.09);border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.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 .78rem 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:#F2F5F3}
.bl-resume{margin:0;color:var(--muted);font-size:.86rem;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 .68rem 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:#C2CFC8;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 .68rem 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:#EAFFF4;border:1px dashed rgba(85,230,149,.42);background:rgba(85,230,149,.07)}
.bl-date{margin:0;color:var(--muted);font-size:.78rem}
.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 .84rem 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:#F2F5F3}
/* 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 rgba(255,255,255,.09);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 rgba(255,255,255,.07)}
.bl-tableau th{font:800 .72rem Inter,sans-serif;letter-spacing:.11em;
  text-transform:uppercase;color:var(--green);background:rgba(85,230,149,.05)}
.bl-tableau td{color:#C2CFC8}
.bl-tableau tbody tr:last-child td{border-bottom:0}
.bl-forme{display:block;margin-top:3px;color:var(--muted);font-size:.78rem}

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

.bl-graphique{margin:0 0 26px;padding:22px;border-radius:18px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.bl-graphique figcaption{margin:0 0 16px;font-weight:800;color:#F2F5F3}
.bl-graphique svg{width:100%;height:auto;display:block;overflow:visible}
.bl-g-nom{fill:#DCE7E1;font:700 13px Inter,sans-serif}
.bl-g-valeur{fill:#FFFFFF;font:800 13px 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),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.bl-simu h3{margin:0 0 18px;font-size:1.16rem;font-weight:800;color:#F2F5F3}
.bl-simu-label{display:block;font:700 .7rem 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:#FFFFFF}
.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 rgba(255,255,255,.07);
  color:#C2CFC8;font-size:.92rem}
.bl-simu-detail strong{color:#F2F5F3}

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

.bl-pied{margin:40px 0 0;padding:26px;border-radius:20px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.02)}
.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:#FFFFFF}
.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}
}