/* Feuille éditoriale OBEN — pages article et page /blog.
   Servie avec une empreinte de contenu dans l'URL (calculée par genere.py à
   chaque génération) : le cache immuable ne peut jamais servir une version
   qui ne correspond pas aux pages.
   Source unique du design : la modifier ici, puis relancer
   generateur/construit_gabarit.py et genere.py --regenere. */

/* ============ Page article OBEN ============ */
/* Toutes les classes sont préfixées art- ; les balises nues du
   corps CMS sont stylées via .art-corps. */

/* Pas de défilement lissé : sur un article de 15 000 px, sauter à une section
   lointaine prenait plusieurs secondes. Le clic doit être immédiat. */

.art-main { padding-top: 7.25rem; }

.art-arrow { font-family: Inter, sans-serif; font-style: normal; }

/* Reckless italique dans un titre Acid Grotesk : correction optique.
   Deux écarts se cumulent — une hauteur d'x inférieure de 1 % (mesurée :
   44,9 contre 44,4 à 100 px) et un trait de serif Regular bien plus fin que
   celui du sans Medium, qui fait paraître le mot plus petit encore. 1,07em
   aligne les deux à l'œil ; au-delà de 1,10 l'italique se met à dominer. */
.art-it {
  font-family: Recklessneue, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.07em;
  letter-spacing: 0;
}

/* ---------- En-tête d’article : bande rose arrondie ---------- */
.art-hero {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  border-radius: var(--radius--xlarge);
  /* Fond rose OBEN : reprend le SVG du site (base #FFF9FC + ellipse
     floutée #FBDFED en bas à gauche) — voir background-linear-rose.svg */
  background:
    radial-gradient(62% 88% at 18% 96%, #fbdfed 0%, #fbdfed00 68%),
    #fff9fc;
}
.art-hero-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 3.25rem 3.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(185px, 24vw, 340px);
  gap: clamp(1.75rem, 3vw, 4rem);
  align-items: center;
}
/* La colonne de texte du héros doit pouvoir rétrécir : sans min-width: 0,
   le fil d'ariane en nowrap impose sa largeur à toute la grille et la page
   déborde sur les petits écrans. */
.art-hero-text { min-width: 0; }
.art-breadcrumb {
  font-size: .85rem;
  color: var(--black--700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.art-breadcrumb a { color: var(--black--700); text-decoration: none; }
.art-breadcrumb a:hover { color: var(--black--900); text-decoration: underline; }
.art-bc-sep { margin: 0 .5rem; color: var(--black--400); }
.art-bc-current { color: var(--black--900); }

.art-title {
  font-family: Acidgrotesk, sans-serif;
  font-size: clamp(2.1rem, 3.3vw, 2.85rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.07rem;
  color: var(--black--900);
  margin: 1.2rem 0 1.3rem;
}
.art-chapo {
  font-family: Recklessneue, Georgia, serif;
  font-style: italic;
  font-size: 1.28rem;
  line-height: 1.55;
  color: var(--black--800);
  max-width: 34em;
  margin: 0 0 1.9rem;
}
/* Reckless n'existe qu'en Regular italique : demander un gras ferait fabriquer
   au navigateur un faux-gras baveux. L'accent se fait donc à l'encre pleine,
   pas à la graisse. */
.art-chapo strong {
  font-weight: 400;
  color: var(--black--900);
}
.art-meta {
  font-size: .9rem;
  color: var(--black--700);
  margin: 0;
}
.art-meta-author {
  color: var(--black--900);
  font-weight: 600;
  text-decoration: none;
}
.art-meta-author:hover { text-decoration: underline; }
.art-meta-sep { margin: 0 .55rem; color: var(--black--400); }

/* Image principale en arche (plein cintre) */
.art-hero-fig { margin: 0; }
.art-hero-fig img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  border-radius: 50% 50% var(--radius--large) var(--radius--large) / 42% 42% var(--radius--large) var(--radius--large);
}

/* ---------- Grille sommaire + colonne de lecture ---------- */
.art-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 700px);
  gap: 4.5rem;
  justify-content: center;
  padding: 0 5%;
  margin-top: 4.5rem;
}
/* Un élément de grille ne rétrécit pas sous son contenu sans min-width: 0 —
   sans ça, un tableau large pousse toute la colonne hors de l'écran. */
.art-colonne { min-width: 0; }
.art-aside {
  align-self: start;
  position: sticky;
  top: 7rem;
  max-height: calc(100vh - 8.5rem);
  /* seul le sommaire défile : la carte d'appel en dessous reste toujours
     entière à l'écran, même quand l'article a beaucoup de sections */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.art-aside .art-toc {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.art-aside .art-aside-card { flex: none; }
.art-aside-label {
  font-family: Acidgrotesk, sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--black--900);
  margin: 0 0 .9rem;
}
.art-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--black--300);
}
.art-toc li { margin: 0; }
.art-toc a {
  display: block;
  padding: .34rem 0 .34rem 1rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--black--800);
  text-decoration: none;
  border-left: 1px solid transparent;
  margin-left: -1px;
}
.art-toc a:hover { color: var(--black--900); border-left-color: var(--black--900); }
/* Section en cours de lecture */
.art-toc a.est-actif {
  color: var(--black--900);
  font-weight: 600;
  border-left-color: var(--black--900);
}

.art-toc-mobile { display: none; }

/* Carte d’appel discrète, sous le sommaire */
.art-aside-card {
  margin-top: 2rem;
  background: #fff9fc;
  border: 1px solid #f7e3ee;
  border-radius: var(--radius--large);
  padding: 1.15rem 1.25rem 1.3rem;
}
.art-aside-card p {
  font-family: Acidgrotesk, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--black--900);
  margin: 0 0 .85rem;
}
.art-aside-card a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--black--900);
  background: var(--pink);
  border-radius: var(--radius--xxlarge);
  padding: .5rem 1rem;
  text-decoration: none;
  transition: background-color .3s;
}
.art-aside-card a:hover { background: #ffc9e0; }

/* ---------- Corps CMS : balises nues sous .art-corps ---------- */
.art-corps .w-richtext {
  font-family: Inter, sans-serif;
  font-size: 1.08rem;
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--black--900);
  margin-bottom: 0;
}
.art-corps p {
  margin: 0 0 1.4rem;
  text-align: left;
  letter-spacing: 0;
}
.art-corps h2 {
  font-family: Acidgrotesk, sans-serif;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.25;
  letter-spacing: -.04rem;
  color: var(--black--900);
  margin: 3.6rem 0 1.1rem;
  scroll-margin-top: 7.5rem;
  text-align: left;
}
.art-corps h3 {
  font-family: Acidgrotesk, sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.35;
  letter-spacing: -.01rem;
  color: var(--black--900);
  margin: 2.3rem 0 .8rem;
  text-align: left;
}
.art-corps h2 + h3 { margin-top: 1.4rem; }
/* Filet discret au-dessus des sections : donne le rythme sans meubler.
   Il reste plus proche du titre qui suit que du texte qui précède, pour
   se lire comme l'ouverture d'une section et non comme une barre flottante. */
.art-corps h2::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--black--300);
  margin-bottom: 2rem;
}
.art-corps > .w-richtext > h2:first-child::before { display: none; }

/* Bloc « L’essentiel » : la liste qui suit ce titre devient une carte
   vert d’eau à puces cochées. Sélecteur d’id — un article sans cette
   section garde simplement une liste normale. */
.art-corps h2#l-essentiel::before { margin-bottom: 2.2rem; }
.art-corps h2#l-essentiel + ul {
  list-style: none;
  background: var(--jaune-pale);
  border-radius: var(--radius--large);
  padding: 1.6rem 1.75rem;
  margin: 0 0 1.9rem;
}
.art-corps h2#l-essentiel + ul li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: 1rem;
}
.art-corps h2#l-essentiel + ul li:last-child { margin-bottom: 0; }
.art-corps h2#l-essentiel + ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--yellow);
  border-radius: 50%;
  /* coche blanche centrée */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.art-corps h2#l-essentiel + ul li::after {
  content: "";
  position: absolute;
  left: .3rem;
  top: .72em;
  width: .42rem;
  height: .22rem;
  border-left: 2px solid var(--black--900);
  border-bottom: 2px solid var(--black--900);
  transform: rotate(-45deg);
}
.art-corps a {
  color: var(--black--900);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.art-corps a:hover { color: #6b6b64; }
.art-corps strong { font-weight: 600; }
.art-corps ul, .art-corps ol {
  margin: 0 0 1.5rem;
  padding-left: 1.3rem;
}
.art-corps li { margin-bottom: .65rem; padding-left: .3rem; }
.art-corps li::marker { color: var(--black--900); }
.art-corps figure {
  max-width: 100%;
  margin: 2.25rem auto;
}
.art-corps figure img { width: 100%; border-radius: var(--radius--large); }
.art-corps figcaption {
  font-size: .85rem;
  color: var(--black--700);
  text-align: center;
  margin-top: .6rem;
}
/* Citation : elle sort légèrement de la colonne et s'ouvre sur un guillemet
   en filigrane. Pas de filet — le décrochage et la police suffisent à la
   détacher du texte courant. */
.art-corps blockquote {
  position: relative;
  /* la feuille du site pose un filet gris de 0,25rem sur toute citation */
  border-left: 0;
  font-family: Recklessneue, Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--black--900);
  margin: 2.75rem 0 2.75rem -2.5rem;
  padding: .5rem 0 .5rem 2.5rem;
}
.art-corps blockquote::before {
  content: "“";
  position: absolute;
  left: -.15rem;
  top: -1.35rem;
  font-family: Recklessneue, Georgia, serif;
  font-style: italic;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--pink);
  pointer-events: none;
}
.art-corps blockquote p { margin: 0 0 .6rem; font-size: inherit; line-height: inherit; }
.art-corps blockquote p:last-child { margin-bottom: 0; }
/* attribution : « — Prénom Nom, fonction » en fin de citation */
.art-corps blockquote cite,
.art-corps blockquote footer {
  display: block;
  margin-top: .9rem;
  font-family: Inter, sans-serif;
  font-style: normal;
  font-size: .92rem;
  font-weight: 600;
  color: var(--black--700);
}

/* Avertissement de fin d'article : même police que le texte, posé dans une
   carte neutre — mis à part sans être mis en avant. */
.art-avertissement {
  background: var(--black--100);
  border: 1px solid var(--black--300);
  border-radius: var(--radius--large);
  padding: 1.35rem 1.5rem;
  margin: 2.75rem 0 0;
}
.art-avertissement p {
  font-size: .96rem;
  line-height: 1.7;
  color: var(--black--800);
  margin: 0 0 .8rem;
}
.art-avertissement p:last-child { margin-bottom: 0; }
.art-avertissement a { color: var(--black--900); }

/* Tableaux du corps */
.art-corps div:has(> table) {
  margin: 2rem 0 2.25rem;
  border: 1px solid var(--black--300);
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Le corps du CMS enveloppe déjà ses tableaux dans un div overflow-x:auto ;
   ce sélecteur habille ce conteneur quelle que soit sa classe. */
.art-corps [style*="overflow-x"] {
  min-width: 0;
  max-width: 100%;
}
.art-corps table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.55;
}
.art-corps th {
  background: var(--jaune-pale);
  font-weight: 600;
  font-size: .88rem;
  text-align: left;
  padding: .85rem 1.1rem;
  color: var(--black--900);
}
.art-corps td {
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--black--300);
  vertical-align: top;
}
.art-corps td:first-child { font-weight: 600; }
.art-corps th + th, .art-corps td + td { border-left: 1px solid var(--black--300); }

/* ---------- Signature auteur ---------- */
.art-signature {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--black--300);
  margin-top: 3.5rem;
  padding-top: 2rem;
}
.art-avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--pink);
  color: var(--black--900);
  font-family: Acidgrotesk, sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art-signature-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--black--900);
  margin: 0 0 .15rem;
}
.art-signature-role {
  font-size: .88rem;
  color: var(--black--700);
  margin: 0;
}
.art-signature-role a { color: var(--black--900); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- CTA : bande douce ---------- */
.art-cta {
  /* même gabarit que la bande d'abonnement (.abo) : seules les couleurs
     distinguent les bandes de bas de page */
  width: 90%;
  max-width: 1240px;
  margin: 5rem auto 0;
  background: var(--jaune-pale);
  border-radius: var(--radius--xlarge);
  padding: 3.5rem 2.5rem 3.75rem;
  text-align: center;
}
.art-cta-title {
  font-family: Acidgrotesk, sans-serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 2.7vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -.05rem;
  color: var(--black--900);
  margin: 0;
}
.art-cta-sub {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--black--800);
  margin: 1rem auto 2rem;
  max-width: 36em;
}
.art-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.art-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  border-radius: var(--radius--xxlarge);
  background-color: var(--yellow);
  color: var(--black--900);
  font-weight: 600;
  font-size: 1rem;
  padding: .9rem 1.75rem;
  text-decoration: none;
  transition: background-color .4s;
}
.art-btn:hover { background-color: #f5df71; }
.art-btn--ghost {
  background-color: var(--white);
  border: 1px solid var(--black--400);
}
.art-btn--ghost:hover { background-color: #f5f5f5; }

/* ---------- À lire aussi ---------- */
.art-related {
  width: 90%;
  max-width: 1240px;
  margin: 5rem auto 0;
}
.art-related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.art-related-title {
  font-family: Acidgrotesk, sans-serif;
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -.05rem;
  color: var(--black--900);
  margin: 0;
}
/* Lien de section : le vert est réservé aux liens dans le corps du texte —
   ici on reste sur l'encre du titre, souligné pour rester lisible comme lien. */
.art-related-all {
  font-size: .95rem;
  font-weight: 600;
  color: var(--black--900);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--black--400);
  white-space: nowrap;
}
.art-related-all:hover { text-decoration-color: var(--black--900); }
.art-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.art-card {
  display: block;
  background: #fff9fc url(/65266eb4c347d563ef6d65b7/6526d206568cf8830b3ff3d9_background-linear-rose.svg) center / cover no-repeat;
  border-radius: 24px;
  padding: 1.4rem 1.4rem 1.6rem;
  text-decoration: none;
}
.art-card-fig { margin: 0; }
/* Le liseré clair autour de l'image est le motif du site (--outline, noir à
   4 %), déjà porté par .offres-cash_media et .pack_media sur la page d'accueil. */
.art-card-fig img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 9;
  object-fit: cover;
  border: 4px solid var(--outline);
  border-radius: 50% 50% var(--radius--large) var(--radius--large) / 44.5% 44.5% var(--radius--large) var(--radius--large);
}
.art-card-title {
  font-family: Acidgrotesk, sans-serif;
  font-weight: 500;
  font-size: 1.18rem;
  line-height: 1.32;
  letter-spacing: -.01rem;
  color: var(--black--900);
  margin: 1.3rem 0 .6rem;
}
.art-card-link {
  font-size: .9rem;
  font-weight: 600;
  color: var(--black--900);
}
.art-card:hover .art-card-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Footer : respiration avant la bande sombre */
.footer_component { margin-top: 6rem; }

/* ---------- Sommaire latéral : seulement quand la largeur le permet ----------
   250 px de sommaire + 700 px de colonne + la gouttière ne tiennent pas
   sous ~1120 px ; en dessous, le sommaire passe en bloc dans la colonne,
   toujours déployé : rien à ouvrir pour savoir ce que l'article contient. */
@media (max-width: 1119px) {
  .art-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    justify-content: stretch;
  }
  .art-colonne { max-width: 700px; width: 100%; margin: 0 auto; }
  .art-aside { display: none; }
  .art-toc-mobile {
    display: block;
    border: 1px solid var(--black--300);
    border-radius: var(--radius--large);
    padding: 1.1rem 1.4rem;
    margin-bottom: 2.5rem;
  }
  .art-toc-mobile-titre {
    margin: 0;
    font-family: Acidgrotesk, sans-serif;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--black--900);
  }
  .art-toc-mobile .art-toc { margin-top: 1rem; }
}

/* ---------- Tablette ---------- */
@media (max-width: 991px) {
  .art-hero-inner { padding: 2.75rem 2rem; }
  /* Le titre ne tient pas dans le fil d'ariane et s'y tronquait en « … » :
     le fil s'arrête à « Blog », le titre est juste dessous de toute façon. */
  .art-bc-current, .art-bc-sep.is-dernier { display: none; }
  .art-cards { grid-template-columns: 1fr 1fr; }
  .art-card:last-child { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .art-main { padding-top: 6.25rem; }
  .art-hero { width: calc(100% - 1.6rem); border-radius: 24px; }
  .art-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    padding: 2.25rem 1.4rem 1.4rem;
  }
  .art-title { font-size: 1.85rem; letter-spacing: -.04rem; margin: 1rem 0 1rem; }
  .art-chapo { font-size: 1.12rem; margin-bottom: 1.4rem; }
  .art-meta { line-height: 1.9; }
  .art-meta-sep { margin: 0 .4rem; }
  /* Sur mobile la colonne unique donnait à l'arche toute la largeur du héros :
     360 px de haut sur un iPhone, soit la moitié de l'écran avant le premier
     paragraphe. Elle redevient une vignette centrée, à la largeur qu'elle a
     déjà dans la colonne de droite du grand écran (185 px), forme inchangée. */
  .art-hero-fig img {
    width: min(58%, 200px);
    margin-inline: auto;
    aspect-ratio: 4 / 4.5;
    border-radius: 50% 50% 16px 16px / 44.5% 44.5% 16px 16px;
  }
  .art-layout { padding: 0 1.25rem; margin-top: 2.75rem; }
  .art-corps .w-richtext { font-size: 1.03rem; line-height: 1.72; }
  .art-corps h2 { font-size: 1.5rem; margin-top: 2.6rem; }
  .art-corps h3 { font-size: 1.2rem; }
  .art-corps blockquote {
    font-size: 1.28rem;
    margin-left: 0;
    padding-left: 1.6rem;
  }
  .art-corps blockquote::before { font-size: 4.2rem; top: -1rem; }
  .art-avertissement { padding: 1.15rem 1.2rem; }
  .art-corps table { min-width: 560px; font-size: .9rem; }
  .art-cta { width: calc(100% - 1.6rem); margin-top: 3.5rem; padding: 2.75rem 1.4rem 3rem; border-radius: 24px; }
  .art-cta-buttons { flex-direction: column; align-items: center; }
  .art-btn { width: 100%; max-width: 320px; justify-content: center; }
  .art-related { width: auto; margin-left: 1.25rem; margin-right: 1.25rem; }
  .art-related-title { font-size: 1.6rem; }
  .art-cards { grid-template-columns: 1fr; gap: 1.25rem; }
  .art-card:last-child { display: block; }
  .art-card { padding: 1.2rem 1.2rem 1.4rem; }
  .art-card-fig img { aspect-ratio: 2 / 1.6; border-radius: 16px; }
  .footer_component { margin-top: 4.5rem; }
}

/* ============ Page /blog ============ */
.blog-main { padding-top: 7.25rem; }

/* En-tête : même bande rose que le héros d'article */
.blog-hero {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  border-radius: var(--radius--xlarge);
  background:
    radial-gradient(62% 88% at 18% 96%, #fbdfed 0%, #fbdfed00 68%),
    #fff9fc;
  padding: 3.5rem 3.5rem 3.75rem;
  text-align: center;
}
.blog-hero-titre {
  font-family: Acidgrotesk, sans-serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.07rem;
  color: var(--black--900);
  margin: 0;
}
.blog-hero-chapo {
  font-family: Recklessneue, Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--black--800);
  max-width: 32em;
  margin: 1.1rem auto 0;
}

/* Article mis en avant */
.blog-une {
  width: 90%;
  max-width: 1240px;
  margin: 4rem auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 420px);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  text-decoration: none;
}
.blog-une-texte { min-width: 0; }
.blog-etiquette {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--black--800);
  background: var(--jaune-pale);
  border-radius: var(--radius--xxlarge);
  padding: .35rem .9rem;
  margin-bottom: 1.1rem;
}
.blog-une-titre {
  font-family: Acidgrotesk, sans-serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: -.05rem;
  color: var(--black--900);
  margin: 0 0 1rem;
}
.blog-une:hover .blog-une-titre,
.blog-carte:hover .blog-carte-titre {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.blog-une-resume {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--black--800);
  margin: 0 0 1.3rem;
  max-width: 40em;
}
.blog-une-fig { margin: 0; }
.blog-une-fig img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.2;
  object-fit: cover;
  border: 4px solid var(--outline);
  border-radius: 50% 50% var(--radius--large) var(--radius--large) / 42% 42% var(--radius--large) var(--radius--large);
}

/* Ligne d'informations, commune à la une et aux cartes */
.blog-info {
  font-size: .88rem;
  color: var(--black--700);
  margin: 0;
}
.blog-info-sep { margin: 0 .5rem; color: var(--black--400); }
.blog-lire {
  display: inline-block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--black--900);
  margin-top: 1.2rem;
}

/* Grille d'articles */
.blog-grille-tete {
  width: 90%;
  max-width: 1240px;
  margin: 5rem auto 1.75rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.blog-grille-titre {
  font-family: Acidgrotesk, sans-serif;
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -.05rem;
  color: var(--black--900);
  margin: 0;
}
.blog-compte { font-size: .95rem; color: var(--black--700); white-space: nowrap; }
.blog-grille {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}
.blog-carte {
  display: flex;
  flex-direction: column;
  background: #fff9fc;
  border: 1px solid #f7e3ee;
  border-radius: 24px;
  padding: 1.4rem 1.4rem 1.6rem;
  text-decoration: none;
}
.blog-carte-fig { margin: 0 0 1.3rem; }
.blog-carte-fig img {
  display: block;
  width: 100%;
  /* paysage : dans une carte, la photo illustre — c'est le texte qui informe */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 4px solid var(--outline);
  border-radius: 50% 50% var(--radius--large) var(--radius--large) / 26% 26% var(--radius--large) var(--radius--large);
}
.blog-carte-titre {
  font-family: Acidgrotesk, sans-serif;
  font-weight: 500;
  font-size: 1.24rem;
  line-height: 1.3;
  letter-spacing: -.015rem;
  color: var(--black--900);
  margin: 0 0 .65rem;
}
.blog-carte-resume {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--black--800);
  margin: 0 0 1.1rem;
}
/* pousse la ligne d'informations en bas : toutes les cartes s'alignent */
.blog-carte .blog-info { margin-top: auto; }

/* ---------- Tablette ---------- */
@media (max-width: 991px) {
  .blog-hero { padding: 2.75rem 2rem 3rem; }
  .blog-une {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    margin-top: 3rem;
  }
  .blog-une-fig { order: -1; max-width: 420px; margin: 0 auto; }
  .blog-une-fig img { aspect-ratio: 4 / 3.2; }
  .blog-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-grille-tete { margin-top: 4rem; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .blog-main { padding-top: 6.25rem; }
  .blog-hero {
    width: calc(100% - 1.6rem);
    border-radius: 24px;
    padding: 2.25rem 1.4rem 2.5rem;
  }
  .blog-hero-chapo { font-size: 1.12rem; }
  .blog-une, .blog-grille, .blog-grille-tete {
    width: auto;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
  .blog-une-fig img { aspect-ratio: 4 / 3.4; border-radius: 40% 40% 16px 16px / 22% 22% 16px 16px; }
  .blog-grille { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .blog-carte-fig img { aspect-ratio: 2 / 1.5; border-radius: 16px; }
  .blog-grille-titre { font-size: 1.6rem; }
}

/* ============ Abonnement au blog ============ */
.abo {
  /* même gabarit que l'appel à la simulation (.art-cta) : rose pâle quand
     l'autre est vert d'eau, deux bandes jumelles aux couleurs près */
  width: 90%;
  max-width: 1240px;
  margin: 5rem auto 0;
  background: #fff9fc;
  border: 1px solid #f7e3ee;
  border-radius: var(--radius--xlarge);
  padding: 3.5rem 2.5rem 3.75rem;
  text-align: center;
}
.abo-titre {
  font-family: Acidgrotesk, sans-serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 2.7vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -.05rem;
  color: var(--black--900);
  margin: 0;
}
.abo-sous {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--black--800);
  max-width: 36em;
  margin: 1rem auto 2rem;
}
.abo-form {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  max-width: 34rem;
  margin: 0 auto;
}
.abo-champ {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  color: var(--black--900);
  background: var(--white);
  border: 1px solid var(--black--400);
  border-radius: var(--radius--xxlarge);
  padding: .85rem 1.25rem;
}
.abo-champ::placeholder { color: var(--black--600); }
.abo-champ:focus {
  outline: none;
  border-color: var(--black--900);
  box-shadow: 0 0 0 4px #21211c14;
}
.abo-envoi {
  flex: 0 0 auto;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--black--900);
  background: var(--yellow);
  border: 0;
  border-radius: var(--radius--xxlarge);
  padding: .85rem 1.6rem;
  cursor: pointer;
  transition: background-color .3s;
}
.abo-envoi:hover { background: #f5df71; }
.abo-envoi[disabled] { opacity: .55; cursor: default; }
.abo-mention {
  font-size: .82rem;
  color: var(--black--700);
  margin: 1rem auto 0;
  max-width: 34em;
}
/* message de retour, annoncé aux lecteurs d'écran */
.abo-retour {
  font-size: .95rem;
  font-weight: 600;
  color: var(--black--900);
  margin: 1rem 0 0;
  min-height: 1.4em;
}
.abo-retour.est-erreur { color: #b3402c; }

@media (max-width: 767px) {
  .abo {
    width: calc(100% - 1.6rem);
    border-radius: 24px;
    padding: 2.75rem 1.4rem 3rem;
    margin-top: 3.5rem;
  }
  .abo-form { flex-direction: column; }
  .abo-envoi { width: 100%; }
}

/* Bandeau d'abonnement fin — entre la une et la grille de /blog */
.abo-bande {
  width: 90%;
  max-width: 1240px;
  margin: 4rem auto 0;
  background: #fff9fc;
  border: 1px solid #f7e3ee;
  border-radius: var(--radius--large);
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.abo-bande-texte {
  font-family: Acidgrotesk, sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -.01rem;
  color: var(--black--900);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.abo-bande-sous {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: .85rem;
  letter-spacing: 0;
  color: var(--black--700);
}
.abo-bande .abo-form {
  flex: 1 1 22rem;
  max-width: 30rem;
  margin: 0;
  justify-content: flex-end;
}
.abo-bande .abo-champ { padding: .7rem 1.1rem; }
.abo-bande .abo-envoi { padding: .7rem 1.3rem; }
.abo-bande .abo-retour { flex-basis: 100%; text-align: right; margin: 0; min-height: 0; }
.abo-bande .abo-retour:empty { display: none; }

@media (max-width: 767px) {
  .abo-bande {
    width: auto;
    margin: 3rem 1.25rem 0;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 1.4rem 1.2rem;
  }
  .abo-bande .abo-form { max-width: none; }
  .abo-bande .abo-retour { text-align: center; }
}

:root { --jaune-pale: #FFF8D6; }

/* CTA glissé entre deux paragraphes du corps (injecté par le générateur) */
.art-cta-inline { margin: 2.2rem 0; text-align: center; }
.art-cta-inline .art-btn { width: auto; max-width: none; }

/* Un bouton jaune, c'est toujours une écriture noire (Martin, 2026-09-04) */
.art-corps a.art-btn, .art-corps a.art-btn:hover {
  color: var(--black--900);
  text-decoration: none;
}