/* ============================================================
   Feuille de style partagée du BLOG Rappli
   (utilisée par /blog et tous les articles — charte cohérente
    avec la page d'accueil)
   ============================================================ */
:root {
  --bleu: #1E3B8B;
  --bleu-vif: #4A6FD4;
  --bleu-fonce: #101F4A;
  --vert: #05976A;
  --vert-fonce: #04694A;
  --bleu-clair: #F1F5FC;
  --bleu-pale: #E5EBF8;
  --texte: #3A4560;
  --gris: #515E7E;
  --blanc: #FFFFFF;
  --bordure: #E5E9F3;
  --bordure-interactive: #7C89A5;
  --focus-ring: #1E3B8B;
  --r: 16px;
  --r-lg: 24px;
  --ombre: 0 16px 40px rgba(16, 31, 74, .12);
  --max: 1184px;
  --pad: 32px;
  /* Système typographique public — mode Read. */

  --type-weight-regular: var(--weight-regular);
  --type-weight-support: var(--weight-medium);
  --type-weight-ui: var(--weight-label);
  --type-weight-action: var(--weight-action);
  --type-weight-heading: var(--weight-heading);
  --type-weight-heading-strong: var(--weight-title);
  --type-weight-display: var(--weight-display);
  --type-body-size: 17px;
  --type-body-leading: 1.65;
  --type-prose-size: 18px;
  --type-prose-leading: 1.72;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; scrollbar-color: #9AA8C6 var(--bleu-clair); }
body {
  font-family: var(--font-sans);
  color: var(--texte); background: var(--blanc);
  line-height: var(--type-body-leading); font-size: var(--type-body-size); font-weight: var(--type-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { color: var(--bleu-fonce); font-weight: var(--type-weight-heading); line-height: 1.18; letter-spacing: -.018em; text-wrap: balance; }
strong, b { font-weight: var(--type-weight-action); }
a { color: var(--bleu); text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--bleu-pale); color: var(--bleu-fonce); }
button, input, select, textarea { font: inherit; caret-color: var(--bleu); }
button, summary { touch-action: manipulation; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.wrap-article { max-width: 76ch; }

/* ----- Boutons ----- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: inherit; font-weight: var(--type-weight-action); font-size: 17px; line-height: 1.2; letter-spacing: -.005em; min-height: 52px; padding: 14px 24px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: color .18s, border-color .18s, background-color .18s; text-align: center; }
.btn-primary { background: var(--bleu); color: #fff; }
.btn-primary:hover { background: #182F73; color: #fff; text-decoration: none; }
.btn-light, .btn-secondary { background: #fff; color: var(--bleu); border-color: #A8B5D1; }
.btn-light:hover, .btn-secondary:hover { background: var(--bleu-clair); border-color: var(--bleu); color: var(--bleu); text-decoration: none; }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 5px; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ----- En-tête (cohérent avec l'accueil) ----- */
header { position: sticky; top: 0; z-index: 100; background: var(--blanc); border-bottom: 1px solid var(--bordure); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 88px; gap: 32px; }
.logo { display: inline-flex; width: 120px; flex-shrink: 0; }
.logo img { width: 100%; height: auto; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { font-size: 15px; font-weight: var(--type-weight-ui); line-height: 1.2; color: var(--gris); white-space: nowrap; }
.nav-links a:hover { color: var(--bleu); text-decoration: underline; text-underline-offset: 7px; }
.nav-links a.actif { color: var(--bleu); }
.nav-links .btn { min-height: 44px; padding: 12px 17px; }
/* Le bouton CTA du header reste blanc sur bleu (sinon .nav-links a, plus spécifique, le noircit) */
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #fff; text-decoration: none; }

/* ----- Fil d'Ariane ----- */
.breadcrumb { font-size: 14px; line-height: 1.45; color: var(--gris); font-weight: var(--type-weight-regular); padding: 22px 0 0; }
.breadcrumb a { color: var(--gris); }
.breadcrumb a:hover { color: var(--bleu); }

/* ----- En-tête de la liste blog ----- */
.blog-quick-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:32px 0 56px;padding:24px 0;list-style:none;border-block:1px solid var(--bordure)}
.blog-quick-links a{display:grid;gap:8px;height:100%;padding:8px 0;color:var(--bleu-fonce);text-decoration:none}
.blog-quick-links strong{font-size:18px;line-height:1.4}.blog-quick-links span{color:var(--gris);font-size:16px;line-height:1.55}
.blog-quick-links a:hover strong{text-decoration:underline;text-underline-offset:4px}.blog-quick-links a:focus-visible{outline:3px solid var(--bleu);outline-offset:5px}
@media(max-width:720px){.blog-quick-links{grid-template-columns:1fr;gap:0;margin:28px 0 44px;padding:0}.blog-quick-links li+li{border-top:1px solid var(--bordure)}.blog-quick-links a{padding:20px 0}}
.blog-head { padding: 80px 0 64px; text-align: center; background: var(--bleu-clair); }
.blog-head h1 { max-width: 900px; margin-inline: auto; font-size: clamp(38px, 4.8vw, 56px); font-weight: var(--type-weight-display); line-height: 1.1; letter-spacing: -.03em; }
.blog-head p { color: var(--gris); font-size: clamp(18px, 2vw, 20px); line-height: 1.6; font-weight: var(--type-weight-regular); margin: 24px auto 0; max-width: 65ch; }

/* ----- Grille d'articles ----- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 36px 0 64px; }
.post { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--bordure); border-radius: var(--r); overflow: hidden; transition: border-color .18s, background-color .18s; }
.post:hover { border-color: #A8B5D1; background: #FAFBFE; text-decoration: none; }
/* Les vignettes sont décoratives : le sujet, le titre et l'extrait guident la lecture. */
.post .vignette { display: none; }
.post .corps { padding: 26px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.post .cat { font-size: 14px; font-weight: var(--type-weight-ui); line-height: 1.45; color: var(--gris); margin-bottom: 12px; }
.post h2, .post h3 { font-size: 20px; font-weight: var(--type-weight-heading); color: var(--bleu-fonce); margin-bottom: 8px; line-height: 1.32; letter-spacing: -.012em; }
.post p { color: var(--gris); font-size: 16px; line-height: 1.58; font-weight: var(--type-weight-regular); flex: 1; }
.post .meta { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--bordure); font-size: 14px; line-height: 1.4; color: var(--gris); font-weight: var(--type-weight-support); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.post .lire { color: var(--bleu); font-weight: var(--type-weight-action); }
.post:hover h2, .post:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .posts { grid-template-columns: 1fr; } }

/* ----- Corps d'article ----- */
.article { padding: clamp(28px, 4vw, 44px) 0 clamp(40px, 6vw, 70px); font-size: var(--type-prose-size); line-height: var(--type-prose-leading); font-weight: var(--type-weight-regular); }
.article .cat { font-weight: var(--type-weight-ui); color: var(--gris); font-size: 14px; line-height: 1.45; }
.article h1 { font-size: clamp(34px, 4.4vw, 48px); font-weight: var(--type-weight-heading-strong); margin: 12px 0 20px; line-height: 1.12; letter-spacing: -.025em; }
.article .meta { display: flex; align-items: center; gap: 12px; color: var(--gris); font-weight: var(--type-weight-support); font-size: 15px; line-height: 1.45; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--bordure); }
.article .chapo { font-size: 20px; color: var(--bleu-fonce); font-weight: var(--type-weight-support); line-height: 1.62; margin-bottom: 28px; }
.article h2 { font-size: clamp(24px, 3vw, 30px); font-weight: var(--type-weight-heading); margin: 42px 0 15px; line-height: 1.2; letter-spacing: -.018em; }
.article h3 { font-size: clamp(20px, 2.2vw, 22px); font-weight: var(--type-weight-action); margin: 28px 0 11px; line-height: 1.28; letter-spacing: -.01em; }
.article p { margin-bottom: 18px; }
.article ul, .article ol { margin: 0 0 18px 22px; }
.article li { margin-bottom: 10px; }
.article strong { color: var(--bleu-fonce); }
.article blockquote { border: 1px solid var(--bordure); background: var(--bleu-clair); padding: 18px 22px; border-radius: 12px; margin: 26px 0; font-size: 17px; line-height: 1.65; font-weight: var(--type-weight-support); color: var(--bleu-fonce); } /* CHARTE v1.1 : plus de bordure latérale colorée (le vert ne décore jamais) */
.article .callout { margin: 26px 0; padding: 18px 20px; border: 1px solid #CBD6EE; border-radius: 14px; background: #F7F9FE; color: var(--texte); font-size: 17px; line-height: 1.65; font-weight: var(--type-weight-support); }
.article .formula { margin: 26px 0; padding: 18px 20px; border: 1px solid #BFD0F1; border-radius: 14px; background: var(--bleu-clair); color: var(--bleu-fonce); font-size: 17px; line-height: 1.6; font-weight: var(--type-weight-support); text-align: center; }
.article code { padding: .12em .38em; border-radius: 6px; background: #E9EEF9; color: var(--bleu-fonce); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; font-weight: var(--type-weight-ui); }
.article .src { font-size: 14px; line-height: 1.5; font-weight: var(--type-weight-regular); color: var(--gris); }
.article a:not(.btn):not(.post) { text-decoration: underline; }

/* ----- Encart CTA dans l'article ----- */
.cta-band { background: var(--bleu); color: #fff; border-radius: var(--r-lg); padding: clamp(28px, 4vw, 40px); text-align: center; margin: 40px 0; }
.cta-band h3 { color: #fff; font-size: clamp(20px, 3vw, 26px); margin-bottom: 10px; }
.cta-band p { color: var(--bleu-pale); margin-bottom: 20px; }
.cta-band strong { color: inherit; }
.cta-band :focus-visible { outline-color: #fff; }
.cta-band .note { display: block; margin-top: 12px; font-size: 14px; line-height: 1.5; font-weight: var(--type-weight-support); color: var(--bleu-pale); }

/* ----- Réponse directe / à retenir (optimisation featured snippet) ----- */
.article .tldr { background: var(--bleu-clair); border: 1px solid var(--bordure); border-radius: 14px; padding: 18px 22px; margin: 0 0 28px; font-size: 17px; line-height: 1.65; }
.article .tldr strong { color: var(--bleu-fonce); }

/* ----- Sommaire ----- */
.article .toc { background: #fff; border: 1px solid var(--bordure); border-radius: 14px; padding: 18px 22px; margin: 0 0 30px; }
.article .toc-t { font-weight: var(--type-weight-ui); color: var(--bleu-fonce); font-size: 16px; line-height: 1.4; margin-bottom: 12px; }
.article .toc ul { margin: 0 0 0 18px; }
.article .toc li { margin-bottom: 6px; }

/* ----- Tableau comparatif (lisible + featured snippets) ----- */
.article .tbl-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--bordure); border-radius: 14px; -webkit-overflow-scrolling: touch; }
.article table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; font-weight: var(--type-weight-regular); background: #fff; }
.article th, .article td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.article thead th { background: var(--bleu-clair); color: var(--bleu-fonce); font-weight: var(--type-weight-action); white-space: normal; }
.article tbody tr:last-child td { border-bottom: 0; }
.article td strong { color: var(--bleu-fonce); }
.article .ok { color: var(--vert-fonce); font-weight: var(--type-weight-action); }
.article .no { color: #B42318; font-weight: var(--type-weight-action); }

/* ----- FAQ (questions fréquentes — rich results) ----- */
.article .faq h3 { margin: 22px 0 8px; }
.article .faq h3:first-of-type { margin-top: 8px; }

/* ----- Articles liés : format compact, lisible et distinct de la grille du blog ----- */
.relateds {
  margin-top: clamp(34px, 5vw, 50px);
  padding: clamp(20px, 3.5vw, 28px);
  border: 1px solid var(--bordure);
  border-radius: var(--r);
  background: var(--bleu-clair);
}
.relateds > h2 {
  margin: 0 0 18px;
  color: var(--bleu-fonce);
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: var(--type-weight-heading);
  line-height: 1.2;
  text-align: left;
}
.relateds .posts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
}
.relateds .post {
  min-width: 0;
  border-radius: 16px;
  box-shadow: none;
  overflow-wrap: normal;
  word-break: normal;
}
.relateds .post:hover {
  border-color: #A8B5D1;
}
.relateds .post .corps {
  min-width: 0;
  padding: 18px;
}
.relateds .post .cat {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.25;
}
.relateds .post h3 {
  margin: 0;
  color: var(--bleu-fonce);
  font-size: 16px;
  font-weight: var(--type-weight-action);
  line-height: 1.38;
  hyphens: none;
  overflow-wrap: normal;
  text-wrap: pretty;
  word-break: normal;
}
.relateds .post p {
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--gris);
  font-size: 14px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.relateds .post .meta {
  min-height: 0;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  font-size: 14px;
}
.relateds .post .lire { font-size: 14px; font-weight: var(--type-weight-action); }
@media (max-width: 640px) {
  .relateds {
    margin-top: 32px;
    padding: 18px;
    border-radius: 18px;
  }
  .relateds > h2 { margin-bottom: 15px; }
  .relateds .posts { grid-template-columns: 1fr; gap: 10px; }
  .relateds .post .corps { padding: 16px; }
  .relateds .post p { display: none; }
  .relateds .post .meta { display: none; }
}
@media (max-width: 360px) {
  .relateds { margin-inline: -4px; padding: 15px; }
  .relateds .post h3 { font-size: 16px; }
}

/* ----- Pied de page (cohérent avec l'accueil) ----- */
footer { background: var(--blanc); border-top: 1px solid var(--bordure); color: var(--gris); padding: 48px 0 24px; }
.foot-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
.foot-logo { display: inline-block; width: 118px; }
.foot-logo img { width: 100%; height: auto; }
.foot-brand p { color: var(--gris); margin-top: 14px; max-width: 320px; font-size: 15px; }
.foot-links { display: flex; gap: 36px; flex-wrap: wrap; }
.foot-col h4, .foot-title { color: var(--bleu-fonce); font-size: 15px; line-height: 1.4; font-weight: var(--type-weight-ui); margin: 0 0 12px; }
.foot-col a { display: block; color: var(--gris); padding: 7px 0; font-weight: var(--type-weight-regular); font-size: 15px; line-height: 1.45; }
.foot-col a:hover { color: var(--bleu); }
.foot-bottom { border-top: 1px solid var(--bordure); margin-top: 40px; padding-top: 24px; font-size: 14px; line-height: 1.5; color: var(--gris); font-weight: var(--type-weight-regular); }

/* ----- Navigation mobile et finitions transversales ----- */
.nav-mobile{display:none;position:relative}
.nav-mobile summary{display:inline-flex;align-items:center;justify-content:center;min-width:76px;min-height:48px;padding:10px 15px;border:1px solid var(--bordure);border-radius:12px;background:#fff;color:var(--bleu-fonce);font-size:15px;line-height:1.2;font-weight:var(--type-weight-action);cursor:pointer;list-style:none}
.nav-mobile summary::-webkit-details-marker{display:none}
.nav-mobile summary::after{content:"";width:7px;height:7px;margin-left:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.nav-mobile[open] summary::after{transform:rotate(225deg) translate(-1px,-1px)}
.nav-mobile-menu{position:absolute;top:calc(100% + 9px);right:0;display:grid;width:min(300px,calc(100vw - 40px));padding:10px;border:1px solid var(--bordure);border-radius:16px;background:#fff;box-shadow:var(--ombre);z-index:120}
.nav-mobile-menu a{display:flex;align-items:center;min-height:48px;padding:11px 13px;border-radius:10px;color:var(--bleu-fonce);font-size:15px;line-height:1.3;font-weight:var(--type-weight-ui)}
.nav-mobile-menu a:hover{background:var(--bleu-clair);color:var(--bleu);text-decoration:none}
.nav-mobile-menu .btn-primary{justify-content:center;margin-top:5px;color:#fff}
.nav-mobile-menu .btn-primary:hover{background:#182f73;color:#fff}
.nav-mobile summary:focus-visible,.filter-chip:focus-visible,.blog-search input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.article a,.article code{overflow-wrap:anywhere;word-break:break-word}
.article pre{max-width:100%;overflow:auto}
.table-scroll-hint{margin:20px 0 -16px;color:var(--gris);font-size:14px;line-height:1.45;font-weight:var(--type-weight-support)}
.table-scroll-hint[hidden]{display:none}

/* ----- Recherche et filtres du blog ----- */
.blog-tools{display:grid;gap:20px;margin:48px auto 0;padding:28px;border:1px solid var(--bordure);border-radius:var(--r);background:var(--bleu-clair)}
.blog-search{display:grid;gap:7px}
.blog-search label{color:var(--bleu-fonce);font-size:16px;line-height:1.4;font-weight:var(--type-weight-ui)}
.blog-search input{width:100%;min-height:50px;padding:12px 15px;border:1.5px solid var(--bordure-interactive);border-radius:12px;background:#fff;color:var(--texte);font:var(--type-weight-support) 16px/1.45 var(--font-sans);outline:none}
.blog-search input::placeholder{color:var(--gris);font-weight:var(--type-weight-regular)}
.blog-search input:hover{border-color:var(--bleu)}
.blog-search input:focus{border-color:var(--bleu)}
.blog-filters{display:flex;flex-wrap:wrap;gap:8px}
.filter-chip{min-height:44px;padding:9px 14px;border:1px solid var(--bordure-interactive);border-radius:10px;background:#fff;color:var(--bleu-fonce);font:var(--type-weight-ui) 14px/1.25 var(--font-sans);cursor:pointer}
.filter-chip:hover{border-color:var(--bleu);background:var(--bleu-clair)}
.filter-chip.is-active{border-color:var(--bleu);background:var(--bleu);color:#fff}
.blog-count{color:var(--gris);font-size:14px;line-height:1.45;font-weight:var(--type-weight-support)}
.blog-empty{margin:30px 0 60px;padding:24px;border:1px solid var(--bordure);border-radius:16px;background:var(--bleu-clair);color:var(--bleu-fonce);font-weight:var(--type-weight-ui);text-align:center}
.blog-empty[hidden],.post[hidden]{display:none}
.blog-tools+.blog-empty+.posts{padding-top:28px}

@media(max-width:1000px){
  .nav{height:72px}
  .nav-links{display:none}
  .nav-mobile{display:block}
}
@media(max-width:720px){
  :root{--pad:20px}
  html{scroll-padding-top:92px}
  .blog-head{padding:52px 0 44px}
  .blog-tools{margin-top:24px;padding:17px}
  .blog-filters{flex-wrap:wrap;overflow:visible;padding:1px 2px}
  .filter-chip{flex:0 1 auto}
  .article .meta{align-items:flex-start;flex-wrap:wrap}
  .article th,.article td{padding:11px 13px}
  .foot-col a{min-height:44px;padding:10px 0}
}
@media(max-width:420px){
  .blog-tools{margin-left:-4px;margin-right:-4px}
}
@media(prefers-reduced-motion:reduce){
  .post,.btn,.nav-mobile summary::after{transition:none}
  html{scroll-behavior:auto}
}

/* ----- Finitions publiques : lisibilite, tactile et stabilite responsive ----- */
html,body{max-width:100%;overflow-x:clip}
.post:focus-visible{outline:3px solid var(--bleu);outline-offset:4px;border-radius:var(--r);text-decoration:none}
.article .tbl-wrap{overscroll-behavior-inline:contain;scrollbar-color:#9badd3 var(--bleu-clair);scrollbar-width:thin}
.article .tbl-wrap:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
.article .tbl-wrap:focus-within:not(:focus-visible){outline:3px solid rgba(30,59,139,.22);outline-offset:3px}
@media(max-width:1024px){
  .nav-links a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
  .foot-col a{display:flex;align-items:center;min-height:44px;padding-top:9px;padding-bottom:9px}
}
@media(max-width:720px){
  .post .cat{font-size:14px}
  .post .meta,.post .lire,.blog-count{font-size:14px}
  .post .corps{padding:20px}
  .article .cat,.article .src,.table-scroll-hint{font-size:14px}
  .breadcrumb{padding-top:18px}
}
@media(max-width:420px){
  .nav-mobile-menu{right:0;width:calc(100vw - 28px)}
  .article blockquote,.article .tldr,.article .toc{padding-left:17px;padding-right:17px}
}
@media(forced-colors:active){
  .post,.blog-tools,.article .tbl-wrap,.article blockquote,.article .tldr,.article .toc{border:1px solid CanvasText}
  .filter-chip.is-active{background:Highlight;color:HighlightText}
}

/* ----- Refonte éditoriale globale — 2026-08-04 ----- */
.article h1,.article h2,.article h3{overflow-wrap:anywhere;text-wrap:pretty}
.skip-link{position:fixed;top:12px;left:16px;z-index:1000;padding:11px 16px;border:2px solid var(--bordure-interactive);border-radius:10px;background:#fff;color:var(--bleu-fonce);font-size:15px;line-height:1.3;font-weight:var(--type-weight-action);transform:translateY(-180%);transition:transform .16s}
.skip-link:focus{transform:translateY(0);text-decoration:none}
.article [id]{scroll-margin-top:108px}
.rappli-context{margin:24px 0 30px;padding:18px 0;border-top:1px solid var(--bordure);border-bottom:1px solid var(--bordure);color:var(--texte);font-size:17px;line-height:1.68}
.rappli-context>strong:first-child{color:var(--bleu-fonce)}
.rappli-mid-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;margin:34px 0;padding:22px;border:1px solid var(--bordure-interactive);border-radius:16px;background:#f7f9fe}
.rappli-mid-cta p{display:grid;gap:5px;margin:0}
.rappli-mid-cta p strong{font-size:18px;line-height:1.35;font-weight:var(--type-weight-heading)}
.rappli-mid-cta p span{color:var(--gris);font-size:15.5px;line-height:1.55}
.rappli-mid-cta .btn{min-width:220px}
.article-conclusion{margin-top:38px}
.cta-band[data-cta-position="final"]{margin-top:28px}
.blog-orientation{padding:64px 0 8px;background:#fff}
.blog-orientation h2{max-width:760px;margin:0 auto 12px;text-align:center;font-size:clamp(26px,3.2vw,34px);font-weight:var(--type-weight-heading);line-height:1.18;letter-spacing:-.018em;text-wrap:balance}
.blog-orientation>.wrap>p{max-width:760px;margin:0 auto 24px;color:var(--gris);text-align:center}
.blog-pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.blog-pillars a{display:grid;align-content:start;gap:8px;height:100%;padding:20px 0;border-top:1px solid var(--bordure);color:var(--bleu-fonce)}
.blog-pillars a:hover{border-color:var(--bleu);text-decoration:none}
.blog-pillars a:hover strong{text-decoration:underline;text-underline-offset:4px}
.blog-pillars a:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
.blog-pillars span{color:var(--gris);font-size:14px;line-height:1.5}
.blog-product-note{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:32px 0 4px;padding:28px;border-radius:var(--r);background:var(--bleu-clair)}
.blog-product-note p{max-width:760px;margin:0;color:var(--texte)}
.blog-product-note .btn{flex:0 0 auto}
@supports(content-visibility:auto){#blogPosts .post{content-visibility:auto;contain-intrinsic-size:auto 300px}}
@media(max-width:980px){
  .blog-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-pillars li:last-child{grid-column:1/-1}
}
@media(max-width:720px){
  .article [id]{scroll-margin-top:92px}
  .blog-orientation{padding-top:44px}
  .rappli-context{margin:20px 0 26px;padding:16px 0;font-size:17px}
  .relateds .post .cat{font-size:14px}
  .rappli-mid-cta{grid-template-columns:1fr;gap:16px;margin:28px 0;padding:18px}
  .rappli-mid-cta .btn,.cta-band .btn{width:100%;min-width:0}
  .blog-product-note{align-items:stretch;flex-direction:column;padding:18px}
  .blog-product-note .btn{width:100%}
}
@media(max-width:520px){
  .blog-pillars{grid-template-columns:1fr;gap:0}
  .blog-pillars li:last-child{grid-column:auto}
  .blog-pillars a{padding-block:16px}
}
@media(forced-colors:active){
  .rappli-mid-cta,.blog-pillars a,.blog-product-note{border:1px solid CanvasText}
}

/* rankings-2026:start */
.ranking-article .wrap-article{max-width:830px}
.ranking-article .chapo{max-width:72ch}
.ranking-article .toc details{margin:0}
.ranking-article .toc summary{cursor:pointer;color:var(--bleu);font-weight:var(--type-weight-action)}
.ranking-article .toc details ol{margin:8px 0 2px 22px;padding:0}
.ranking-article .toc details li{margin-bottom:5px}
[data-ranking-table] table{min-width:940px}
.rank-badge{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 8px;border:1px solid var(--bordure-interactive);border-radius:999px;background:var(--bleu-clair);color:var(--bleu-fonce);font-size:14px;font-weight:var(--type-weight-heading);line-height:1}
.ranking-entry{margin:34px 0 0;padding:30px 0 0;border-top:1px solid var(--bordure)}
.ranking-entry-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:13px}
.ranking-entry-head h3{margin:2px 0 0;flex:1}
.ranking-entry p{max-width:72ch}
.ranking-proof,.ranking-limit{padding:15px 17px;border:1px solid var(--bordure);border-radius:12px;background:#f8faff}
.ranking-limit{background:#fffaf2;border-color:#d8c9aa}
.ranking-source{margin-top:-3px;font-size:15px;line-height:1.5;font-weight:var(--type-weight-support)}
.ranking-source a::after{content:' ↗';font-size:.9em}
.ranking-criteria{display:grid;gap:12px;margin-left:0!important;padding:0;list-style:none}
.ranking-criteria li{margin:0;padding:15px 17px;border:1px solid var(--bordure);border-radius:12px;background:#fff}
.ranking-test-plan{display:grid;gap:11px;margin-left:0!important;padding:0;list-style:none;counter-reset:ranking-step}
.ranking-test-plan li{position:relative;margin:0;padding:15px 17px 15px 54px;border-top:1px solid var(--bordure);counter-increment:ranking-step}
.ranking-test-plan li::before{content:counter(ranking-step);position:absolute;left:10px;top:13px;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--bordure-interactive);border-radius:50%;color:var(--bleu-fonce);font-size:14px;font-weight:var(--type-weight-heading)}
@media(max-width:720px){
  .ranking-article .wrap-article{max-width:100%}
  .ranking-entry{margin-top:28px;padding-top:24px}
  .ranking-entry-head{gap:10px}
  .ranking-entry-head .rank-badge{min-width:29px;height:29px}
  .ranking-proof,.ranking-limit{padding:14px}
  .ranking-test-plan li{padding:14px 14px 14px 49px}
  .ranking-test-plan li::before{left:7px;top:12px}
}
@media(max-width:420px){
  .ranking-entry-head{display:grid;grid-template-columns:auto 1fr}
  .ranking-entry-head h3{font-size:19px}
}
@media(forced-colors:active){
  .rank-badge,.ranking-proof,.ranking-limit,.ranking-criteria li,.ranking-test-plan li{border:1px solid CanvasText}
}
/* rankings-2026:end */

/* rankings-index:start */
.post.is-page-hidden{display:none!important}
.blog-pagination{display:grid;justify-items:center;gap:12px;margin:32px auto 64px;text-align:center}
.blog-pagination-status{margin:0;color:var(--gris);font-size:15px;font-variant-numeric:tabular-nums}
.blog-load-more{min-height:48px;min-width:min(100%,280px);justify-content:center}
.blog-load-more[hidden]{display:none}
@media (max-width:640px){.blog-pagination{margin:24px auto 48px}.blog-load-more{width:100%}}
@media (forced-colors:active){.blog-load-more{border:1px solid ButtonText}}
/* rankings-index:end */

/* Identité v10 — surface éditoriale. Les pages légales qui importent encore
   cette feuille gardent leurs règles ; seul le corpus marqué utilise v10. */
body[data-rappli-blog]{
  --bleu:var(--rappli-blue,#1e3b8b);
  --bleu-fonce:var(--rappli-navy,#121e4a);
  --texte:var(--rappli-ink,#3d4863);
  --gris:var(--rappli-muted,#5b6889);
  --bordure:var(--rappli-line,#e7ebf3);
  --bleu-clair:var(--rappli-surface,#f5f7fb);
  --blanc:var(--rappli-white,#fff);
  --blog-shadow:var(--rappli-shadow-card,0 1px 2px rgba(18,30,74,.04),0 16px 40px -20px rgba(18,30,74,.18),inset 0 1px 0 #fff);
  --blog-ease:var(--rappli-ease,cubic-bezier(.23,1,.32,1));
  background:var(--blanc);color:var(--texte)
}
html:has(body[data-rappli-blog]){scrollbar-gutter:stable}
[data-rappli-blog] .site-header :is(.desktop-nav,.mobile-panel) a[aria-current="page"]{color:var(--bleu);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
[data-rappli-blog] main>.wrap,[data-rappli-blog] main>section>.wrap{max-width:1200px;padding-inline:0;width:calc(100% - 80px)}
[data-rappli-blog] main>.wrap-article,[data-rappli-blog] .article>.wrap-article{max-width:820px;width:calc(100% - 80px);padding-inline:0}
[data-rappli-blog] .blog-eyebrow{margin:0 0 18px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--bleu)}
[data-rappli-blog] .blog-head{padding:88px 0 58px;background:var(--blanc)}
[data-rappli-blog] .blog-head h1{font-size:clamp(38px,4.6vw,58px);font-weight:800;line-height:1.12;letter-spacing:-.03em;max-width:820px;color:var(--bleu-fonce)}
[data-rappli-blog] .blog-head p{max-width:610px;margin-top:22px;font-size:19px;line-height:1.65}
[data-rappli-blog] .blog-orientation{padding:28px 0 8px}
[data-rappli-blog] .blog-orientation h2{max-width:760px;font-size:30px;line-height:1.24;letter-spacing:-.02em}
[data-rappli-blog] .blog-orientation>.wrap>p{max-width:740px;line-height:1.7}
[data-rappli-blog] .blog-quick-links{gap:20px;margin:30px 0 72px;padding:0;border:0}
[data-rappli-blog] .blog-quick-links li{min-width:0;border:0}
[data-rappli-blog] .blog-quick-links a{padding:28px;border:1px solid var(--bordure);border-radius:22px;background:var(--blanc);box-shadow:var(--blog-shadow);gap:12px;align-content:start;transition:border-color 180ms var(--blog-ease)}
[data-rappli-blog] .blog-quick-links strong{font-size:20px;font-weight:750;line-height:1.3;letter-spacing:-.015em}
[data-rappli-blog] .blog-quick-links span{font-size:16px;line-height:1.65}
[data-rappli-blog] .blog-pillars{gap:16px;margin-top:30px}
[data-rappli-blog] .blog-pillars li{min-width:0}
[data-rappli-blog] .blog-pillars a{padding:23px 20px;border:1px solid var(--bordure);border-radius:18px;background:var(--blanc);box-shadow:var(--blog-shadow);gap:10px;text-decoration:none;transition:border-color 180ms var(--blog-ease)}
[data-rappli-blog] .blog-pillars strong{font-size:17px;line-height:1.35;font-weight:750;letter-spacing:-.01em}
[data-rappli-blog] .blog-pillars span{font-size:14px;line-height:1.55}
[data-rappli-blog] .blog-tools{padding:30px;margin-top:56px;gap:23px;border:1px solid var(--bordure);border-radius:20px;background:var(--bleu-clair);box-shadow:none}
[data-rappli-blog] .blog-search{max-width:640px;gap:10px}
[data-rappli-blog] .blog-search label{font-size:17px;font-weight:700}
[data-rappli-blog] .blog-search input{min-height:54px;padding:14px 18px;border:1px solid #8b96ac;border-radius:14px;background:var(--blanc);box-shadow:inset 0 1px 2px rgba(18,30,74,.03);transition:border-color 160ms var(--blog-ease),box-shadow 160ms var(--blog-ease)}
[data-rappli-blog] .blog-search input:focus{border-color:var(--bleu);box-shadow:0 0 0 3px rgba(30,59,139,.09)}
[data-rappli-blog] .blog-filters{gap:8px;flex-wrap:wrap}
[data-rappli-blog] .filter-chip{min-height:44px;padding:12px 16px;border-color:var(--bordure);border-radius:999px;background:var(--blanc);font-size:14px;line-height:1.25;font-weight:650;transition:background-color 160ms var(--blog-ease),border-color 160ms var(--blog-ease),color 160ms var(--blog-ease),transform 160ms var(--blog-ease)}
[data-rappli-blog] .filter-chip:active{transform:translateY(1px)}
@media(hover:hover) and (pointer:fine){
  [data-rappli-blog] .filter-chip.is-active:hover{background:var(--bleu-fonce);border-color:var(--bleu-fonce);color:var(--blanc)}
}
[data-rappli-blog] .filter-chip.is-active{border-color:var(--bleu);background:var(--bleu);color:var(--blanc);box-shadow:0 2px 5px -3px rgba(18,30,74,.24)}
[data-rappli-blog] .blog-count{font-variant-numeric:tabular-nums;margin:0;min-height:21px}
[data-rappli-blog] #blogPosts{gap:24px;padding-top:32px}
[data-rappli-blog] .post{border-radius:14px;background:var(--blanc);box-shadow:0 1px 2px rgba(18,30,74,.04);transition:border-color 180ms var(--blog-ease),box-shadow 180ms var(--blog-ease)}
[data-rappli-blog] .post .corps{padding:26px}
[data-rappli-blog] .post .cat{display:inline-flex;align-items:center;align-self:flex-start;max-width:100%;min-height:26px;margin-bottom:15px;padding:4px 11px;border:1px solid var(--bordure);border-radius:999px;background:var(--bleu-clair);color:var(--bleu);font-size:12px;font-weight:700;letter-spacing:.01em;line-height:1.35;text-wrap:pretty}
[data-rappli-blog] .post h2,[data-rappli-blog] .post h3{font-size:21px;font-weight:750;line-height:1.34;letter-spacing:-.016em;margin-bottom:12px;text-wrap:pretty}
[data-rappli-blog] .post p{display:-webkit-box;overflow:hidden;font-size:15.5px;line-height:1.62;-webkit-box-orient:vertical;-webkit-line-clamp:3}
[data-rappli-blog] .post .meta{margin-top:22px;padding-top:16px;font-size:13px;gap:9px;line-height:1.5}
[data-rappli-blog] .btn{min-height:52px;padding:15px 24px;border-radius:12px;font-size:15px;font-weight:700;gap:10px;letter-spacing:.02em;transition:background-color 160ms var(--blog-ease),border-color 160ms var(--blog-ease),box-shadow 160ms var(--blog-ease),transform 160ms var(--blog-ease)}
[data-rappli-blog] .btn-primary{background:var(--bleu);border-color:var(--bleu);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 0 color-mix(in oklch,var(--bleu) 76%,var(--bleu-fonce)),0 10px 24px -12px color-mix(in oklch,var(--bleu) 55%,transparent)}
@media(hover:hover) and (pointer:fine){
  [data-rappli-blog] .btn-primary:hover{background:var(--bleu-fonce);color:#fff;transform:translateY(-2px);box-shadow:0 4px 0 var(--bleu-fonce),0 14px 28px -14px color-mix(in oklch,var(--bleu) 65%,transparent)}
}
[data-rappli-blog] .btn-primary:active{background:var(--bleu-fonce);color:#fff;transform:translateY(1px);box-shadow:0 1px 0 var(--bleu-fonce),0 4px 10px -6px rgba(18,30,74,.3)}
[data-rappli-blog] .btn-secondary,[data-rappli-blog] .btn-light{background:var(--blanc);color:var(--bleu);border-color:#a4afc3;box-shadow:0 1px 2px rgba(18,30,74,.04)}
[data-rappli-blog] .btn-secondary:hover,[data-rappli-blog] .btn-light:hover{border-color:var(--bleu);background:var(--bleu-clair);color:var(--bleu)}
[data-rappli-blog] .btn:disabled{cursor:not-allowed;background:var(--bleu-clair);border-color:var(--bordure);color:var(--gris);box-shadow:none;transform:none}
[data-rappli-blog] .btn:focus-visible{outline:3px solid var(--bleu);outline-offset:4px}
[data-rappli-blog] .btn:focus-visible .icon{transform:none;transition:none}
[data-rappli-blog] .blog-empty{padding:44px 28px;background:var(--bleu-clair);border:1px solid var(--bordure);border-radius:20px;box-shadow:none;font-size:17px;line-height:1.65;font-weight:500}
[data-rappli-blog] .blog-empty:not([hidden]){display:grid;justify-items:center;gap:8px}
[data-rappli-blog] .blog-empty p{margin:0;max-width:52ch}
[data-rappli-blog] .blog-empty p:not(.blog-empty-title){color:var(--gris);font-size:16px}
[data-rappli-blog] .blog-empty-title{color:var(--bleu-fonce);font-size:19px;font-weight:700;line-height:1.35}
[data-rappli-blog] .blog-empty .btn{margin-top:14px}
[data-rappli-blog] .blog-product-note{padding:30px;border:1px solid var(--bordure);border-radius:24px;background:var(--blanc);box-shadow:var(--blog-shadow)}
[data-rappli-blog] .blog-pagination{margin:32px auto 80px;gap:18px}
[data-rappli-blog] .breadcrumb{padding-top:32px;font-size:13px;line-height:1.65}
[data-rappli-blog] .article{padding-top:38px;padding-bottom:80px}
[data-rappli-blog] .article>.wrap-article{font-size:18px;line-height:1.72}
[data-rappli-blog] .article>.wrap-article>.cat{display:inline-flex;align-items:center;min-height:32px;padding:6px 12px;background:var(--bleu-clair);border:1px solid var(--bordure);border-radius:999px;color:var(--bleu);font-size:13px;font-weight:700;line-height:1.4}
[data-rappli-blog] .article h1{font-size:clamp(32px,3.6vw,46px);line-height:1.16;letter-spacing:-.027em;font-weight:800;margin:18px 0 24px;text-wrap:pretty}
[data-rappli-blog] .article .meta{font-size:14px;line-height:1.55;flex-wrap:wrap;gap:5px 12px;padding-bottom:26px;margin-bottom:32px}
[data-rappli-blog] .article .chapo{font-size:20px;line-height:1.7;font-weight:500;color:var(--bleu-fonce);margin-bottom:30px}
[data-rappli-blog] .article h2{font-size:30px;line-height:1.26;letter-spacing:-.022em;font-weight:750;margin:52px 0 20px;max-width:none}
[data-rappli-blog] .article h3{font-size:23px;line-height:1.35;letter-spacing:-.014em;margin:30px 0 14px}
[data-rappli-blog] .article p{margin-bottom:21px}
[data-rappli-blog] .article :is(.tldr,.toc,.callout,.formula,blockquote){padding:26px 30px;background:var(--blanc);border:1px solid var(--bordure);border-radius:22px;box-shadow:var(--blog-shadow);line-height:1.7}
[data-rappli-blog] .article .tldr{background:var(--bleu-clair);box-shadow:inset 0 1px 0 #fff,0 5px 18px -12px rgba(18,30,74,.14)}
[data-rappli-blog] .article .toc-t{display:block;font-size:17px;font-weight:750;margin-bottom:15px}
[data-rappli-blog] .article .toc li{margin-bottom:9px}
[data-rappli-blog] .article .toc a{color:var(--texte);text-decoration-color:#aab5cb}
[data-rappli-blog] .article .tbl-wrap{border-radius:18px;border-color:var(--bordure);box-shadow:var(--blog-shadow);margin:28px 0}
[data-rappli-blog] .article th,[data-rappli-blog] .article td{padding:16px 18px;line-height:1.6}
[data-rappli-blog] .article thead th{background:var(--bleu-clair);font-size:14px}
[data-rappli-blog] .article :is(.cta-band,.rappli-mid-cta){padding:32px;border:1px solid var(--bordure);border-radius:24px;background:var(--blanc);box-shadow:var(--blog-shadow);color:var(--texte)}
[data-rappli-blog] .article .cta-band h3{margin:0 0 14px;color:var(--bleu-fonce);font-size:25px;line-height:1.3}
[data-rappli-blog] .article .cta-band p{color:var(--texte);margin-bottom:24px}
[data-rappli-blog] .article .cta-band .note{margin:18px auto 0;max-width:62ch;color:var(--gris);font-size:13px;line-height:1.65}
[data-rappli-blog] .article .cta-band :focus-visible{outline-color:var(--bleu)}
[data-rappli-blog] .article .relateds{padding:30px;background:var(--bleu-clair);border-radius:24px;border:1px solid var(--bordure);margin-top:52px}
[data-rappli-blog] .relateds>h2{font-size:26px;margin:0 0 24px}
[data-rappli-blog] .relateds .posts{gap:14px}
[data-rappli-blog] .relateds .post{border-radius:16px}
[data-rappli-blog] .relateds .post .corps{padding:20px}
[data-rappli-blog] .relateds .post .cat{font-size:12px;line-height:1.45;margin-bottom:9px}
[data-rappli-blog] .relateds .post h3{font-size:17px;line-height:1.4;margin:0;font-weight:700}
[data-rappli-blog] .relateds .post p{font-size:14px;line-height:1.55;margin:10px 0 0;flex:none;max-height:3.1em}
[data-rappli-blog] .relateds .post .meta{margin: auto 0 0;padding:15px 0 0;font-size:13px;line-height:1.4}
[data-rappli-blog] .ranking-entry{margin-top:40px;padding-top:36px}
[data-rappli-blog] .rank-badge{border-color:var(--bordure);background:var(--blanc);box-shadow:var(--blog-shadow);min-width:38px;height:38px;font-size:15px}
[data-rappli-blog] .ranking-entry-head h3{margin-top:3px}
[data-rappli-blog] .ranking-proof,[data-rappli-blog] .ranking-criteria li{border-color:var(--bordure);border-radius:16px;background:var(--blanc);box-shadow:0 2px 10px -6px rgba(18,30,74,.14);padding:20px}
[data-rappli-blog] .ranking-limit{border-radius:16px;padding:20px;background:#fffdf8}
[data-rappli-blog] .blog-not-found{max-width:780px;text-align:center;padding:100px 32px 120px}
[data-rappli-blog] .blog-error-code{font-size:14px;line-height:1;font-weight:750;letter-spacing:.12em;color:var(--bleu);margin-bottom:24px}
[data-rappli-blog] .blog-not-found h1{font-size:clamp(32px,4vw,48px);line-height:1.14;letter-spacing:-.025em;font-weight:800;margin:0 0 22px}
[data-rappli-blog] .blog-not-found>p:not(.blog-error-code){max-width:530px;margin:0 auto;color:var(--gris);font-size:18px;line-height:1.65}
[data-rappli-blog] .blog-error-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}
@media(min-width:1100px){
  /* Les grands comparatifs respirent hors de la colonne de lecture ; les
     paragraphes gardent leur largeur confortable. Aucun débordement de page. */
  [data-rappli-blog] .article .tbl-wrap[data-ranking-table]{width:min(1120px,calc(100vw - 80px));max-width:none;margin-left:50%;transform:translateX(-50%)}
}
@media(hover:hover) and (pointer:fine){
  [data-rappli-blog] .post:hover,[data-rappli-blog] .blog-quick-links a:hover,[data-rappli-blog] .blog-pillars a:hover{background:var(--blanc);border-color:#b1bdd4;box-shadow:0 2px 4px rgba(18,30,74,.03),0 20px 44px -24px rgba(18,30,74,.22)}
}
@media(max-width:1000px){
  [data-rappli-blog] .blog-quick-links{gap:16px}
  [data-rappli-blog] .blog-quick-links a{padding:24px}
  [data-rappli-blog] .blog-pillars{grid-template-columns:repeat(3,minmax(0,1fr))}
  [data-rappli-blog] .blog-pillars li:last-child{grid-column:auto}
  [data-rappli-blog] .post .corps{padding:26px}
}
@media(max-width:720px){
  [data-rappli-blog] main>.wrap,[data-rappli-blog] main>section>.wrap,[data-rappli-blog] .article>.wrap-article{width:calc(100% - 40px)}
  [data-rappli-blog] .blog-head{padding:54px 0 40px}
  [data-rappli-blog] .blog-head h1{font-size:38px;line-height:1.14}
  [data-rappli-blog] .blog-head p{font-size:17px;line-height:1.65;margin-top:20px}
  [data-rappli-blog] .blog-orientation{padding-top:18px}
  [data-rappli-blog] .blog-orientation h2{font-size:27px;line-height:1.3}
  [data-rappli-blog] .blog-quick-links{grid-template-columns:1fr;gap:16px;margin:26px 0 52px}
  [data-rappli-blog] .blog-quick-links a{padding:25px}
  [data-rappli-blog] .blog-pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  [data-rappli-blog] .blog-pillars a{padding:20px}
  [data-rappli-blog] .blog-tools{padding:23px 20px;margin:36px 0 0;border-radius:18px}
  [data-rappli-blog] .filter-chip{font-size:13px;padding:11px 14px;min-height:44px}
  [data-rappli-blog] #blogPosts{gap:20px;padding-top:26px}
  [data-rappli-blog] .blog-product-note{padding:24px;gap:22px}
  [data-rappli-blog] .blog-pagination{margin-bottom:56px}
  [data-rappli-blog] .breadcrumb{padding-top:24px;font-size:12px}
  [data-rappli-blog] .article{padding-top:30px;padding-bottom:56px}
  [data-rappli-blog] .article h1{font-size:34px;line-height:1.18;margin-top:16px}
  [data-rappli-blog] .article .chapo{font-size:19px;line-height:1.7}
  [data-rappli-blog] .article h2{font-size:27px;line-height:1.3;margin-top:42px}
  [data-rappli-blog] .article h3{font-size:22px;line-height:1.35}
  [data-rappli-blog] .article :is(.tldr,.toc,.callout,.formula,blockquote){padding:23px;border-radius:18px;font-size:16px}
  [data-rappli-blog] .article :is(.cta-band,.rappli-mid-cta){padding:26px 23px}
  [data-rappli-blog] .article .cta-band h3{font-size:24px}
  [data-rappli-blog] .article .relateds{padding:23px;margin-top:40px}
  [data-rappli-blog] .relateds>h2{margin:0 0 20px;font-size:25px}
  [data-rappli-blog] .relateds .posts{grid-template-columns:1fr}
  [data-rappli-blog] .relateds .post h3{font-size:18px}
  [data-rappli-blog] .article th,[data-rappli-blog] .article td{padding:14px 16px}
  [data-rappli-blog] .blog-not-found{padding:70px 20px 85px}
}
@media(max-width:400px){
  [data-rappli-blog] .blog-pillars{grid-template-columns:1fr}
  [data-rappli-blog] .blog-head h1{font-size:34px}
  [data-rappli-blog] .article h1{font-size:31px}
  [data-rappli-blog] .article :is(.tldr,.toc,.callout,.formula,blockquote){padding:20px}
}
@media(prefers-reduced-motion:reduce){
  [data-rappli-blog] *,[data-rappli-blog] *::before,[data-rappli-blog] *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
@media(forced-colors:active){
  [data-rappli-blog] .post,[data-rappli-blog] .blog-quick-links a,[data-rappli-blog] .blog-pillars a,[data-rappli-blog] .blog-tools,[data-rappli-blog] .article :is(.tldr,.toc,.callout,.formula,blockquote,.cta-band,.rappli-mid-cta){background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}
  [data-rappli-blog] .filter-chip,[data-rappli-blog] .btn{background:ButtonFace;color:ButtonText;border-color:ButtonText;box-shadow:none}
  [data-rappli-blog] .filter-chip.is-active{background:Highlight;color:HighlightText;border-color:Highlight}
  [data-rappli-blog] .blog-search input{border-color:ButtonText;box-shadow:none}
}

/* ============================================================
   Passe éditoriale v11 — bande de démarrage numérotée, rubriques
   sur filets, conclusion marine, densité des cartes.
   ============================================================ */
[data-rappli-blog]{--blog-rule:color-mix(in oklch,var(--bordure-interactive) 45%,var(--blanc))}
[data-rappli-blog] p{text-wrap:pretty}

/* Bande « Commencer ici » */
[data-rappli-blog] .blog-start{padding:54px 0 58px;border-block:1px solid var(--bordure);background:var(--bleu-clair)}
[data-rappli-blog] .blog-start-intro{max-width:760px;margin:0 auto 36px;text-align:center}
[data-rappli-blog] .blog-start-intro h2{font-size:clamp(26px,3.1vw,34px);line-height:1.2;letter-spacing:-.018em;font-weight:var(--type-weight-heading)}
[data-rappli-blog] .blog-start-intro p{max-width:66ch;margin:14px auto 0;color:var(--gris);font-size:17px;line-height:1.68}
[data-rappli-blog] .blog-quick-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:0;border:0}
[data-rappli-blog] .blog-quick-links li{min-width:0;border:0}
[data-rappli-blog] .blog-quick-links li+li{border-left:1px solid var(--blog-rule)}
[data-rappli-blog] .blog-quick-links a{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:5px 14px;height:100%;padding:6px 28px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--bleu-fonce);text-decoration:none;transition:background-color 160ms var(--blog-ease),transform 160ms var(--blog-ease)}
[data-rappli-blog] .blog-quick-links a:active{transform:translateY(1px)}
[data-rappli-blog] .blog-quick-links li:first-child a{padding-left:0}
[data-rappli-blog] .blog-quick-links li:last-child a{padding-right:0}
[data-rappli-blog] .blog-step-index{grid-column:1;grid-row:1/span 2;padding-top:2px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--bleu)}
[data-rappli-blog] .blog-quick-links a strong{grid-column:2;font-size:18px;font-weight:750;line-height:1.32;letter-spacing:-.012em}
[data-rappli-blog] .blog-quick-links a>span:not(.blog-step-index){grid-column:2;color:var(--gris);font-size:14px;line-height:1.6}
[data-rappli-blog] .blog-quick-links a:focus-visible{outline:3px solid var(--bleu);outline-offset:4px;border-radius:8px}

/* Rubriques — index éditorial sur filets, plus de boîtes */
[data-rappli-blog] .blog-pillars{grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 24px;margin-top:32px}
[data-rappli-blog] .blog-pillars li{min-width:0}
[data-rappli-blog] .blog-pillars li:last-child{grid-column:auto}
[data-rappli-blog] .blog-pillars a{padding:18px 0 0;border:0;border-top:1px solid var(--blog-rule);border-radius:0;background:transparent;box-shadow:none;gap:8px;color:var(--bleu-fonce);transition:border-color 160ms var(--blog-ease),background-color 160ms var(--blog-ease)}
[data-rappli-blog] .blog-pillars a:active{background:color-mix(in oklch,var(--blanc) 65%,transparent)}
[data-rappli-blog] .blog-pillars strong{font-size:17px;font-weight:750;line-height:1.32;letter-spacing:-.01em;text-wrap:pretty}
[data-rappli-blog] .blog-pillars span{font-size:14px;line-height:1.55;color:var(--gris)}
[data-rappli-blog] .blog-pillars a:focus-visible{outline:3px solid var(--bleu);outline-offset:4px;border-radius:6px}
[data-rappli-blog] .blog-orientation{padding:72px 0 8px}

/* Conclusion produit — bandeau marine, comme les pages Solutions */
[data-rappli-blog] .blog-closing{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;margin:0 0 64px;padding:38px 40px;border:0;border-radius:22px;background:var(--bleu-fonce);color:color-mix(in oklch,#fff 82%,var(--bleu-fonce));box-shadow:none}
[data-rappli-blog] .blog-closing p{margin:0;max-width:70ch;font-size:17px;line-height:1.65}
[data-rappli-blog] .blog-closing strong{color:#fff;font-weight:750}
[data-rappli-blog] .blog-closing .btn{flex:0 0 auto;background:#fff;border-color:#fff;color:var(--bleu-fonce);box-shadow:none}
[data-rappli-blog] .blog-closing .btn:active{transform:translateY(1px);box-shadow:none}
[data-rappli-blog] .blog-closing :is(a,button):focus-visible{outline-color:#fff}

/* Cartes — métadonnées tabulaires et relief au survol */
[data-rappli-blog] .post{transition:border-color 180ms var(--blog-ease),box-shadow 180ms var(--blog-ease),transform 180ms var(--blog-ease)}
[data-rappli-blog] .post:active{transform:translateY(0)}
[data-rappli-blog] .post .meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.01em}
[data-rappli-blog] .post .meta .lire{font-family:var(--font-sans);font-size:13px;letter-spacing:0}



@media(hover:hover) and (pointer:fine){
  [data-rappli-blog] .blog-quick-links a:hover{background:color-mix(in oklch,var(--blanc) 58%,transparent);border-color:transparent;box-shadow:none}
  [data-rappli-blog] .blog-quick-links a:hover strong{text-decoration:underline;text-underline-offset:4px}
  [data-rappli-blog] .blog-pillars a:hover{background:transparent;border:0;border-top:1px solid var(--bleu);box-shadow:none}
  [data-rappli-blog] .blog-pillars a:hover strong{text-decoration:underline;text-underline-offset:4px}
  [data-rappli-blog] .blog-closing .btn:hover{background:color-mix(in oklch,#fff 86%,var(--bleu));border-color:#fff;color:var(--bleu-fonce);transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(0,0,0,.45)}
  [data-rappli-blog] .post:hover{transform:translateY(-2px)}
}

@media(max-width:1000px){
  [data-rappli-blog] .blog-pillars{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}
  [data-rappli-blog] .blog-orientation{padding-top:60px}
}
@media(max-width:900px){
  [data-rappli-blog] .blog-quick-links{grid-template-columns:1fr;gap:0;margin:0;padding:0}
  [data-rappli-blog] .blog-quick-links li+li{border-left:0;border-top:1px solid var(--blog-rule)}
  [data-rappli-blog] .blog-quick-links a{padding:18px 2px}
}
@media(max-width:760px){
  [data-rappli-blog] .blog-start{padding:42px 0 44px}
  [data-rappli-blog] .blog-start-intro{margin-bottom:26px;text-align:left}
  [data-rappli-blog] .blog-orientation{padding:48px 0 8px}
  [data-rappli-blog] .blog-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-rappli-blog] .blog-closing{grid-template-columns:1fr;gap:22px;margin-bottom:52px;padding:26px 22px;border-radius:18px}
  [data-rappli-blog] .blog-closing .btn{width:100%;justify-content:center}
}
@media(max-width:560px){
  [data-rappli-blog] .blog-pillars{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  [data-rappli-blog] .post:hover,[data-rappli-blog] .blog-closing .btn:hover{transform:none}
}
@media(forced-colors:active){
  [data-rappli-blog] .blog-start{border-color:CanvasText}
  [data-rappli-blog] .blog-step-index{color:CanvasText}
  [data-rappli-blog] .blog-closing{background:Canvas;color:CanvasText;border:1px solid CanvasText}
  [data-rappli-blog] .blog-closing strong{color:CanvasText}
  [data-rappli-blog] .blog-closing .btn{background:ButtonFace;color:ButtonText;border-color:ButtonText}
}