/* =====================================================================
   Felines · Journal / Blog — public CSS  (mobile-first)
   Porté depuis le design Claude Design (Design System Felines).
   Breakpoints alignés skel : phone <=767 (base) · tablet >=768 · desktop >=1280.
   Chargé conditionnellement (pages blog) + cache-busté (?v=) — pitfall #15.
   Tout est scopé sous .journal (pas de reset global, pas de fuite cross-breakpoint).
   NB ancres TOC : PAS de scroll-margin-top (pitfall #5) — offset géré en JS.
   ===================================================================== */

:root{
  /* Primaire — violet de marque */
  --c-primary:#655a9f; --c-primary-deep:#514985; --c-primary-darker:#433d6e;
  --c-primary-soft:#938bbc; --c-primary-tint:#ecebf3; --c-active:#ed786a;
  /* Neutres */
  --c-white:#fff; --c-paper:#f9f9f9; --c-paper-2:#f5f5f5;
  --c-line:#e5e5e5; --c-line-2:#ccc; --c-muted:#999;
  --c-text-2:#666; --c-ink:#272727; --c-black:#000;
  /* Overlays + bandes footer réelles */
  --c-overlay:rgba(0,0,0,.5); --c-overlay-strong:rgba(0,0,0,.8);
  --c-cities:#756ba9; --c-copyright:#454060; --c-sep:#d0cde2; --c-btn-dark:#272727;
  /* Familles (déjà chargées par le site) */
  --f-title:'CorporateAPro-RegularItalic',Georgia,serif;     /* titres principaux (italic serif) */
  --f-subtitle:'c062022t',Georgia,serif;                     /* sous-titres de section */
  --f-ui:'ProximaNovaA-Regular','ProximaNova-Regular',Arial,sans-serif;   /* boutons, menu, labels */
  --f-body:'ProximaNovaA-Regular','ProximaNova-Regular',Arial,sans-serif;
  --f-semibold:'ProximaNovaS-Semibold','ProximaNovaA-Semibold',Arial,sans-serif;
}

.journal,.journal *,.journal *::before,.journal *::after{box-sizing:border-box}

.journal{font-family:var(--f-body);font-weight:300;color:#333;background:var(--c-white);
  line-height:1.72;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.journal-screen{padding:54px 0 72px}
/* Liste : onglets remontes juste sous le hero (le titre vient de la boite-hero du template,
   pas de gros vide ; .journal.journal-list = 2 classes -> bat .journal-screen a tous les breakpoints) */
.journal.journal-list{padding-top:18px}
.journal img{display:block;max-width:100%;height:auto}
.journal a{color:var(--c-primary);text-decoration:none}
.journal h1,.journal h2,.journal h3{font-family:var(--f-title);font-weight:400;color:var(--c-ink);line-height:1.16;margin:0}
.journal p{margin:0 0 1.15em}
.journal hr{border:0;height:1px;background:var(--c-sep);width:15%;margin:16px auto}

.j-wrap{max-width:1228px;margin:0 auto;padding:0 22px;width:100%}

/* ---------- photo placeholders (CMS swaps in <img> ; gradient = fallback) ---------- */
.blog-card__cover,.news-card__cover,.related-card__cover,.j-hero{
  position:relative;overflow:hidden;border-radius:3px;background:var(--c-primary-soft);display:block}
.blog-card__cover img,.news-card__cover img,.related-card__cover img,.j-hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-card__cover::after,.related-card__cover::after,.j-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(130% 100% at 24% 12%,rgba(255,255,255,.22),rgba(255,255,255,0) 56%)}
.c-a{background:linear-gradient(150deg,#938bbc,#655a9f 55%,#433d6e)}
.c-b{background:linear-gradient(158deg,#ecebf3,#938bbc 58%,#514985)}
.c-c{background:linear-gradient(135deg,#756ba9,#454060)}
.c-d{background:linear-gradient(150deg,#655a9f,#2d2a3f)}
.c-e{background:linear-gradient(160deg,#938bbc,#514985 68%,#272727)}
.c-f{background:linear-gradient(135deg,#ecebf3,#756ba9)}

/* ---------- index header (lean, no hero) ---------- */
.j-head{text-align:center;padding:6px 0 22px}
.j-eyebrow{font-family:var(--f-semibold);text-transform:uppercase;letter-spacing:.18em;
  font-size:12px;color:var(--c-primary);margin:0 0 14px}
.j-head h1{font-size:40px;margin:0 0 16px}
.j-intro{max-width:none;margin:0 auto;color:var(--c-text-2);font-size:17px;font-weight:300}

/* ---------- category tabs ---------- */
.blog-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px;
  margin:0;padding:2px 0 20px;border-bottom:1px solid var(--c-line)}
.blog-cats__tab{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.13em;font-size:12px;
  color:var(--c-text-2);padding:7px 1px 3px;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;white-space:nowrap}
.blog-cats__tab:hover{color:var(--c-primary)}
.blog-cats__tab.is-active{color:var(--c-primary-deep);border-bottom-color:var(--c-primary)}

/* ---------- main editorial grid ---------- */
.blog-grid{display:grid;grid-template-columns:1fr;gap:46px 34px;padding:40px 0 6px}
.blog-card{display:flex;flex-direction:column;text-align:center}
.blog-card__cover{aspect-ratio:3/2;width:100%;transition:opacity .25s ease}
.blog-card__cover:hover{opacity:.92}
.blog-card .blog-card__cat{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.15em;font-size:11px;
  color:var(--c-primary);margin:18px 0 10px}
.blog-card__title{font-family:var(--f-title);font-size:25px;line-height:1.18;margin:9px 0 0}
.blog-card__title a{color:var(--c-ink);transition:color .2s ease}
.blog-card__title a:hover{color:var(--c-primary)}
.blog-card__excerpt{color:var(--c-text-2);font-size:15.5px;font-weight:300;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card__date{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.12em;font-size:11px;
  color:var(--c-muted);margin:15px 0 0}

/* ---------- "The Latest": news cards + testimonial ---------- */
.news-section{margin-top:50px;padding:46px 0 4px;border-top:1px solid var(--c-line)}
.j-section-eyebrow{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.18em;font-size:12px;
  color:var(--c-primary);text-align:center;margin:0 0 30px}
.news-grid{display:grid;grid-template-columns:1fr;gap:24px 30px}
.news-card{display:flex;gap:15px;align-items:flex-start}
.news-card__media{flex:0 0 104px}
.news-card__cover{width:100%;aspect-ratio:3/2}
.news-card__body{flex:1 1 auto;min-width:0;text-align:left}
.news-card__title{font-family:var(--f-title);font-size:18px;line-height:1.22;margin:0;text-align:left}
.news-card__title a{color:var(--c-ink);transition:color .2s ease}
.news-card__title a:hover{color:var(--c-primary)}
.news-card__line{font-size:14px;color:var(--c-text-2);font-weight:300;margin:5px 0 0;line-height:1.5;text-align:left!important}
.journal .news-card__date{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;
  color:var(--c-muted);margin:7px 0 0;text-align:left}

.testimonial-quote{text-align:center;max-width:740px;margin:42px auto 0;padding:36px 28px 34px;background:var(--c-primary-tint)}
.testimonial-quote__mark{font-family:var(--f-title);font-size:60px;line-height:.5;color:var(--c-primary-soft);height:30px}
.testimonial-quote blockquote{font-family:var(--f-title);font-size:23px;line-height:1.4;color:var(--c-ink);margin:0;padding:0}
.testimonial-quote__cite{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.13em;font-size:12px;
  color:var(--c-primary-deep);margin:18px 0 0}
.testimonial-quote__cite a{border-bottom:1px solid var(--c-primary-soft);padding-bottom:1px}
.testimonial-quote__cite a:hover{color:var(--c-primary)}

/* compteur de resultats index (au-dessus de la pagination, affiche seulement si pagination) */
.j-count{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--c-muted);text-align:center;margin:0 0 14px}

/* ---------- pagination ---------- */
.j-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;
  margin-top:48px;padding:42px 0 0;border-top:1px solid var(--c-line)}
.blog-page{font-family:var(--f-ui);font-size:13px;min-width:40px;height:40px;line-height:38px;text-align:center;
  border:1px solid var(--c-line-2);color:var(--c-text-2);transition:all .2s ease}
.blog-page:hover{border-color:var(--c-primary);color:var(--c-primary)}
.blog-page.is-active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.j-pag-arrow{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.1em;font-size:12px;
  color:var(--c-primary-deep);padding:0 14px;height:40px;line-height:40px}
.j-pag-arrow:hover{color:var(--c-primary)}
.j-pag-arrow.is-disabled{color:var(--c-line-2);pointer-events:none}

/* ---------- article ---------- */
.j-breadcrumb{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.1em;font-size:11px;
  color:var(--c-muted);padding:0 0 4px;text-align:left}
.j-breadcrumb a{color:var(--c-text-2);transition:color .2s ease}
.j-breadcrumb a:hover{color:var(--c-primary)}
.j-breadcrumb .sep{color:var(--c-line-2);margin:0 8px}
.j-article-head{text-align:center;margin:0 auto;padding:22px 0 17px}/* pad-bottom 26->17 : -35% de l'espace byline->TOC (proportionnel avec .blog-toc margin-top) */
.j-article-head h1{font-size:40px;max-width:760px;margin:0 auto}
.j-article-head .j-subtitle{font-size:19px;color:var(--c-text-2);font-weight:300;margin:16px auto 0;max-width:900px;line-height:1.5}/* max-width : mesure de lecture desktop/tablette ; inerte en mobile (colonne < 900) */
.j-article-head .j-meta{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--c-muted);margin:26px 0 0}
.j-hero{aspect-ratio:auto;width:100%;margin:2px 0 0}
.j-hero img{position:static;width:100%;height:auto}
/* article SANS TOC (ex. billet intro) : le corps suit directement le hero -> respiration sous l'image (desktop/tablette ; sur mobile c'est le margin 2em !important de style-mobile qui gere) */
.j-hero + .j-article-body{margin-top:28px}

/* table of contents */
.blog-toc{max-width:700px;margin:19px auto 22px;border:1px solid var(--c-line);background:var(--c-paper);padding:22px 26px 15px}/* margin-top 30->19 : -35% de l'espace byline->TOC ; pad-bottom 15 -> ~25px sous le texte du dernier item ; margin-bottom 22 + padding-top 8 du corps = 30px avant le 1er paragraphe */
.blog-toc__label{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.15em;font-size:11px;color:var(--c-primary);margin:0 0 6px}
.blog-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.blog-toc li{counter-increment:toc;border-top:1px solid var(--c-line)}
.blog-toc li:first-child{border-top:0}
.blog-toc a{display:flex;align-items:baseline;gap:13px;padding:9px 0;font-family:var(--f-body);font-size:15.5px;color:var(--c-ink);transition:color .2s ease}
.blog-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--f-ui);font-size:12px;color:var(--c-primary-soft);flex:0 0 auto}
.blog-toc a:hover{color:var(--c-primary)}

/* article body — comfortable reading measure */
.j-article-body{max-width:700px;margin:0 auto;padding:8px 0 0;text-align:left}
.j-article-body .j-lede{font-size:20px;line-height:1.55;color:var(--c-ink);font-weight:300;margin:17px 0 22px}
.j-article-body h2{font-size:28px;margin:36px 0 12px}
.j-article-body h3{font-size:20px;margin:24px 0 6px}
.j-article-body h2,.j-article-body h3{text-align:left}/* override du reset global h2,h3{text-align:center} (style.css:1) : corps d'article = colonne alignee a gauche (cf maquette blog-article2) ; titres de bloc FAQ/Related restent centres via .blog-faq__h/.blog-related__h */
.j-article-body p{font-size:17px;line-height:1.4;color:#333;font-weight:300;margin:0 0 1.2em;text-align:left!important}
/* listes : padding-left pour que les puces restent dans la colonne (sinon debordent a gauche) */
.j-article-body ul,.j-article-body ol{margin:0 0 1.2em;padding-left:1.4em;text-align:left}
.j-article-body ul{list-style:disc outside}
.j-article-body ol{list-style:decimal outside}
.j-article-body li{font-size:17px;line-height:1.4;color:#333;font-weight:300;margin:0 0 .7em}
.j-article-body a{border-bottom:1px solid var(--c-primary-soft)}
.j-article-body a:hover{color:var(--c-primary-deep)}
/* images inline du corps (figures) : sizing responsive + respiration ; pas de legende (parti pris epure) */
.j-article-body img{max-width:100%;height:auto;display:block;border-radius:3px}
.j-article-body figure{margin:30px 0}
/* video d'ambiance du corps (boucle muette) : meme sizing responsive que les images */
.j-article-body video{width:100%;max-width:100%;height:auto;display:block;border-radius:3px;margin:30px 0}
/* bouton pause/play discret (injecte en JS, wrap relatif) */
.j-video-wrap{position:relative;margin:30px 0;border-radius:3px;overflow:hidden}
.j-article-body .j-video-wrap video.j-video{margin:0;border-radius:0}
.j-video-toggle{position:absolute;right:12px;bottom:12px;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:rgba(20,20,30,.5);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.j-video-toggle:hover,.j-video-toggle:focus-visible{background:rgba(20,20,30,.75);outline:none}
.j-video-toggle svg{width:14px;height:14px;fill:currentColor}

/* FAQ accordion */
.blog-faq{max-width:700px;margin:46px auto 0}
.journal .blog-faq__h{font-family:var(--f-title);font-size:26px;text-align:center;margin:0 0 20px}/* .journal prefix : bat le reset `.journal h2{margin:0}` (l.39, specificite 0,1,1) */
.blog-faq__row{border-top:1px solid var(--c-line)}
/* pas de bordure basse sur la derniere ligne FAQ : la bordure haute de .blog-author fait deja la separation (sinon 2 lignes grises au-dessus de la signature) */
.blog-faq__q{display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;padding:19px 2px;
  font-family:var(--f-title);font-size:19px;color:var(--c-ink);line-height:1.25}
.blog-faq__q:hover{color:var(--c-primary)}
.blog-faq__icon{position:relative;flex:0 0 14px;width:14px;height:14px;margin-top:4px}
.blog-faq__icon::before,.blog-faq__icon::after{content:"";position:absolute;background:var(--c-primary);transition:transform .25s ease}
.blog-faq__icon::before{top:6px;left:0;width:14px;height:2px}
.blog-faq__icon::after{top:0;left:6px;width:2px;height:14px}
.blog-faq__row.is-open .blog-faq__icon::after{transform:scaleY(0)}
.blog-faq__a{padding:0 2px 20px 22px;animation:faqIn .25s ease;display:none}/* indent reponse +20px par rapport a la question */
.blog-faq__row.is-open .blog-faq__a{display:block}
.blog-faq__a p{font-size:16px;line-height:1.35;color:var(--c-text-2);font-weight:300;margin:0;max-width:740px;text-align:left!important}/* interligne resserre ~50% (leading 11.2 -> 5.6px), tous breakpoints */
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* author (E-E-A-T) */
.blog-author{max-width:700px;margin:46px auto 0;padding:26px 0 0;border-top:1px solid var(--c-line);display:flex;gap:18px;align-items:flex-start}
.blog-author__mono{flex:0 0 58px;width:58px;height:58px;border-radius:50%;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}
.blog-author__mono img{width:100%;height:100%;object-fit:cover;display:block}
.blog-author__name{font-family:var(--f-semibold);text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--c-ink);margin:2px 0 0}
.blog-author__role{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--c-primary);margin:3px 0 0}
.blog-author__bio{font-size:15px;color:var(--c-text-2);font-weight:300;margin:9px 0 0;line-height:1.3}/* interligne resserre ~50% (leading 9 -> 4.5px), tous breakpoints */
/* signature alignee a gauche (sinon centree par #features-wrapper p) */
.blog-author__name,.blog-author__role,.blog-author__bio{text-align:left!important}

/* related */
.blog-related{max-width:1000px;margin:54px auto 0;padding:42px 0 0;border-top:1px solid var(--c-line)}
.journal .blog-related__h{font-family:var(--f-title);font-size:24px;text-align:center;margin:0 0 20px}/* .journal prefix : bat le reset `.journal h2{margin:0}` (l.39) */
.blog-related__grid{display:grid;grid-template-columns:1fr;gap:30px}
.journal .related-card{text-align:center;margin:0}/* margin:0 neutralise le `article{margin-bottom:3em}` du site (cartes = <article>) qui gonflait la hauteur de ligne -> vide fantome sous les dates */
.related-card__cover{aspect-ratio:3/2;width:100%;transition:opacity .25s ease}
.related-card__cover:hover{opacity:.92}
.related-card .related-card__cat{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;color:var(--c-primary);margin:8px 0 0}
.related-card__title{font-family:var(--f-title);font-size:19px;line-height:1.2;margin:8px 0 0;min-height:2.4em}/* min-height 2 lignes -> cartes liees de hauteur egale -> dates alignees en bas */
.related-card__title a{color:var(--c-ink);transition:color .2s ease}
.related-card__title a:hover{color:var(--c-primary)}
.related-card__date{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:var(--c-muted);margin:9px 0 0}

/* navigation inter-articles (bas d'article, avant "A lire aussi") : prev (plus recent) / compteur + lien index / next (plus ancien) */
.blog-post-nav{max-width:700px;margin:44px auto 0;padding:22px 0 0;border-top:1px solid var(--c-line);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.blog-post-nav__link{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.1em;font-size:11px;
  color:var(--c-primary-deep);display:inline-flex;align-items:center;gap:8px;transition:color .2s ease;flex:0 0 auto}
.blog-post-nav__link:hover{color:var(--c-primary)}
.blog-post-nav__link.is-disabled{color:var(--c-line-2);pointer-events:none}
.blog-post-nav__arrow{font-size:15px;line-height:1}
.blog-post-nav__center{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1 1 auto;min-width:0;text-align:center}
.blog-post-nav__count{font-family:var(--f-ui);font-size:13px;letter-spacing:.06em;color:var(--c-ink)}
.blog-post-nav__all{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:var(--c-muted);
  border-bottom:1px solid var(--c-sep);padding-bottom:1px;transition:color .2s ease}
.blog-post-nav__all:hover{color:var(--c-primary)}

/* share + CTA */
.blog-share{max-width:760px;margin:31px auto 0;padding:32px 24px 4px;border-top:1px solid var(--c-line);text-align:center}/* 31 + ~12 (bas date->bas carte) = ~43px = espace haut related, symetrie */
.blog-share__label{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.15em;font-size:11px;color:var(--c-muted);margin:0 0 16px}
.blog-share__row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.share-btn{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.06em;font-size:12px;
  padding:11px 17px;border:1px solid var(--c-primary-soft);color:var(--c-primary-deep);background:#fff;cursor:pointer;transition:all .2s ease}
.share-btn:hover{background:var(--c-primary-tint);border-color:var(--c-primary)}
.blog-share__cta{margin-top:26px}
.journal .btn{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.04em;font-size:13px;height:53px;line-height:51px;
  padding:0 34px;display:inline-block;cursor:pointer;color:#fff;background:var(--c-primary-deep);
  border:1px solid var(--c-primary-darker);text-decoration:none;transition:all .25s ease-in-out;border-radius:0}
.journal .btn:hover{background:var(--c-primary)}
.journal .btn:active{background:var(--c-active);border-color:var(--c-active)}

/* ===================== TABLET (>=768) ===================== */
@media(min-width:768px){
  .journal-screen{padding:60px 0 84px}
  .j-head h1,.j-article-head h1{font-size:48px}
  .j-head{padding:10px 0 24px}
  .blog-grid{grid-template-columns:1fr 1fr;gap:52px 38px;padding-bottom:0}
  .news-grid{grid-template-columns:1fr 1fr}
  .blog-related__grid{grid-template-columns:repeat(3,1fr);gap:34px}
  .blog-card__title{font-size:26px}
  /* index desktop : 50px entre date et ligne (date sans margin-bottom + padding-bottom:0 + margin-top:50 de .news-section) ;
     THE LATEST remonte de 20px (padding-top 46->26) ; espaces blancs temoignage halves */
  .journal .blog-card__date{margin-bottom:0}
  .news-section{padding-top:26px}
  /* 30px sous "THE LATEST" (sinon .journal p le ramene a ~14px) */
  .journal .j-section-eyebrow{margin-bottom:30px}
  /* le site applique article{margin-bottom:3em}=48px -> gonfle la ligne de la grille news
     de 48px sous les cartes (vide fantome avant le testimonial). On le neutralise.
     (Cartes laissees naturelles : H3 et excerpt peuvent aller sur 2 lignes.) */
  .journal .news-card{margin-bottom:0}
  /* 50px news cards -> testimonial (margin-top) ; padding interne reste resserre */
  /* padding-top majore : le guillemet (60px, line-height:.5) deborde vers le haut ~15px,
     on compense pour avoir ~18px visibles en haut comme en bas (READ REVIEW -> bas) */
  .testimonial-quote{margin-top:50px;padding-top:33px;padding-bottom:17px}
  /* 50px bas testimonial -> footer : 4px (.news-section) + 46px (padding bas de l'index) */
  .journal-list.journal-screen{padding-bottom:46px}
}

/* ===================== DESKTOP (>=1280) ===================== */
@media(min-width:1280px){
  .journal-screen{padding:64px 0 92px}
  .journal-screen:not(.journal-list){padding-bottom:46px}/* article (pas l'index) : bas bouton CTA -> footer = 50px (46 + 4 padding share) */
  .j-head h1,.j-article-head h1{font-size:54px}
  .j-intro{font-size:18px}
  .blog-grid{grid-template-columns:repeat(3,1fr);gap:29px 40px}/* row-gap 58->29 : -50% de l'espace vertical entre rangees (Dan) */
  .journal .blog-card{margin-bottom:24px}/* fuite article{margin-bottom:3em}=48 -> 24 : l'autre moitie ; espace inter-rangees = row-gap(29)+card mb(24) = 53 (etait 106) */
  .news-grid{grid-template-columns:repeat(3,1fr)}
  .blog-toc,.j-article-body,.blog-faq,.blog-author,.blog-post-nav{max-width:833px}
}

/* Mobile : resserre l'espace entre la ligne de separation (sous les onglets) et le 1er article.
   Neutralise la fuite generique `section, article {margin: 2em 0 !important}` du site
   (32px sur le <section> wrapper ET sur les <article> cartes). */
@media(max-width:767px){
  .journal .blog-grid-wrap{margin:0 0 20px!important}  /* fusionne avec news-section margin-top -> ~26 date->ligne */
  .journal .blog-card,.journal .news-card{margin:0!important}
  .blog-grid{padding-top:20px}
  /* onglets categories : remontes + plus compacts (mais lisibles) */
  .journal.journal-list{padding-top:8px}
  .blog-cats{gap:4px 24px;padding-bottom:12px}
  .blog-cats__tab{padding:4px 1px;line-height:1.25}
  /* fil d'ariane article : descendu un peu + centre sur mobile */
  .j-breadcrumb{text-align:center;margin-top:14px}
  /* mobile : espacements du fil "The Latest" */
  .journal .blog-card__date{margin-bottom:0}             /* date article sans marge basse */
  .journal .news-section{margin:20px 0 16px!important;padding-top:23px} /* date->ligne ~26 (halve) ; ligne->THE LATEST 23 (halve) ; bas->footer 50% */
  .journal .j-section-eyebrow{margin-bottom:24px}        /* THE LATEST -> 1ere carte (espace) */
  .news-grid{gap:20px}                                   /* inter-cartes news */
  .testimonial-quote{margin-top:24px}                    /* derniere carte -> testimonial */
  .journal-list.journal-screen{padding-bottom:23px}      /* bas testimonial -> footer (46 -> 23) */
  /* Le template rend le blog DANS #features-wrapper, qui sur mobile applique `p{font-size:12px!important}`
     + `#features-wrapper p{text-align:center}` : ca ecrase les <p> editoriaux du Journal (corps/lede/
     reponse FAQ/sous-titre/bio/label -> 12px) et centre le sommaire. On restaure les tailles de base
     (blog.css est mobile-first) + l'alignement gauche. !important + spec 0,1,x pour battre le
     `p{!important}` (0,0,1) et l'ID `#features-wrapper p` (1,0,1). Mobile-only : desktop non concerne. */
  .j-article-body p{font-size:17px!important}
  .j-article-body .j-lede{font-size:20px!important}
  .blog-faq__a p{font-size:16px!important}
  .blog-faq__a{padding-left:17px;margin-right:10px} /* champ reponse : indentation gauche -5px (22->17) + largeur zone totale -10px (marge droite) ; interligne 1.35 = regle de base */
  .j-article-head .j-subtitle{font-size:19px!important}
  .blog-author__bio{font-size:15px!important}
  .blog-toc__label{font-size:11px!important;text-align:left!important}
  .blog-toc{text-align:left}   /* items + label a gauche (le label, un <p>, est re-force ci-dessus vs #features-wrapper p) */
  /* Section "Related reading" : la fuite style-mobile `article/section{margin:2em!important}` (32px) s'ajoute
     aux espacements et gonfle tout. On la neutralise (cartes + share) puis on regle chaque espace a -50% du
     rendu precedent (SS Dan related-top/bottom : E1 titre->photo 52, E2 inter-cartes 94, E3 derniere->ligne 64, E4 bouton->footer 68). */
  .journal .related-card{margin:0!important}               /* neutralise la fuite article 2em (etait +32 top/bottom) */
  .journal .blog-related{margin-bottom:0!important}        /* neutralise la fuite section 2em (margin-bottom) qui gagnait le collapse et bloquait E3 a 32 */
  .journal .blog-related__h{margin-bottom:26px}            /* E1 titre -> 1ere photo : 52 -> 26 */
  .blog-related__grid{gap:40px}                            /* E2 espace inter-cartes : 94 -> 40 (affine Dan) */
  .blog-share{margin-top:25px!important}                   /* E3 derniere carte -> ligne separation : 64 -> 25 (neutralise fuite section ; affine Dan) */
  .journal-screen:not(.journal-list){padding-bottom:19px}  /* E4 bouton "Make an enquiry" -> footer : 68 -> ~15 (E4 = padding-bottom - 4 ; affine Dan) */
  /* Boutons partage : en FR les libelles ("COPIER LE LIEN", "PARTAGER") sont ~50px plus larges qu'en EN,
     le 3e bouton passait a la 2e ligne sur iPhone. On compacte (padding H 17->12, gap 10->7, letter-spacing
     .06->.03em, nowrap) pour que les 3 tiennent sur une ligne dans les DEUX langues. */
  .blog-share__row{gap:7px}
  .share-btn{padding:11px 12px;letter-spacing:.03em;white-space:nowrap}
  /* pagination index -> footer : le footer a margin-top:-50px (pitfall #4) et chevauchait la pagination
     sur mobile (espace -17px). Marge basse pour ~30px d'air sous la pagination. */
  .j-pagination{margin-bottom:47px}
}

/* ===== References / notes de bas de page (style Wikipedia) : citations avec lien uniquement ici ===== */
.j-article-body .blog-refs__sep{display:none}/* ancien <hr> plein largeur remplace par la ligne .blog-refs__title::before (cohérent partout) */
.j-article-body .blog-refs__title{margin:34px 0 10px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#655a9f;text-align:left!important}
/* fine ligne grise (20% de la largeur) au-dessus de TOUS les blocs de fin d'article (References + "Pour aller plus loin"), pour separer du corps ; l'ancien <hr> plein est masque (.blog-refs__sep) */
.j-article-body .blog-refs__title::before{content:"";display:block;width:20%;height:1px;background:#d5d3dd;margin:0 0 16px}
.j-article-body .blog-refs{font-size:14px;line-height:1.55;color:#666;padding-left:1.5em;margin:0}
.j-article-body .blog-refs li{margin:0 0 9px;text-align:left!important}
.j-article-body .blog-refs a{word-break:break-word;text-decoration:none!important;border-bottom:0!important}
.j-article-body .blog-refs a:hover,.j-article-body .blog-refs a:focus-visible{text-decoration:none!important;border-bottom:0!important}
.j-article-body sup{line-height:0}
.j-article-body sup{color:#655a9f;margin-left:2px}
@media(max-width:767px){.j-article-body .blog-refs,.j-article-body .blog-refs__title{font-size:12px!important}}

/* §3 tableau comparatif — vrai tableau, nuances de gris, compact */
.j-article-body table{border-collapse:collapse;width:100%;margin:30px 0;font-size:15px;line-height:1.4;table-layout:fixed;border:1px solid #d5d3dd}
.j-article-body table th,.j-article-body table td{border:1px solid #dcdae3;padding:9px 11px;text-align:left;vertical-align:top;word-wrap:break-word;overflow-wrap:break-word}
.j-article-body table tr:first-child th{background:#4f4d59;color:#fff;font-weight:600;text-align:center;font-size:14px;letter-spacing:.02em}
.j-article-body table tr:first-child th:first-child{width:19%}/* desktop/tablette : 1re colonne etroite, Incall/Outcall larges (pilote fixed-layout par la 1re ligne) */
.j-article-body table tr:not(:first-child) th{background:#eae9ef;color:#2e2b3d;font-weight:600}
.j-article-body table tr:not(:first-child):nth-child(even) td{background:#f6f5f9}
.j-article-body table tr:not(:first-child):nth-child(odd) td{background:#fff}
@media(max-width:767px){
.j-article-body table{font-size:12.5px;margin:22px 0}
.j-article-body table th,.j-article-body table td{padding:6px 7px}
.j-article-body table td{padding:6px 10px!important}/* bat le td{padding:0!important} de style-mobile */
.j-article-body table tr:first-child th{font-size:12px}
.j-article-body table tr:first-child th:first-child{width:29%!important}/* mobile : label court (2 lignes ok), Incall/Outcall gardent de la largeur */
.j-article-body table tr:first-child th:nth-child(2),.j-article-body table tr:first-child th:nth-child(3){width:35.5%!important}
.j-article-body table td:nth-child(2){width:auto!important}/* neutralise table td:nth-child(2){width:100%!important} de style-mobile */
}

/* citation (blockquote) : la bande grise epouse la hauteur du texte cite (override style.css blockquote{padding:1em 0}) ; l'espacement vient de la MARGE (hors bordure, ne rallonge pas la bande) */
.j-article-body blockquote{padding-top:0;padding-bottom:0;margin:26px 0}
.j-article-body blockquote p{margin:0!important}