/* -- 1. Fonts -------------------------------------------------------------- */
/** assets/css/akata_fonts.css */

/* -- 2. Base --------------------------------------------------------------- */
html{scroll-behavior:smooth}
body{margin:0;background:#fff;-webkit-font-smoothing:antialiased}
a{color:#000A1C;text-decoration:none}
a:hover{color:#946200}
h1,h2,h3,h4{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
@keyframes agRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes agFade{from{opacity:0}to{opacity:1}}
@keyframes agLeft{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes agProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes agPulse{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes agWaRing{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* -- 3. Chrome partagé ------------------------------------------------------
   En-tête, fil d'Ariane, pied de page et bouton WhatsApp : repris tels quels
   de la page Témoignages, pour que le balisage se copie sans retouche.
   -------------------------------------------------------------------------- */

.page-1 { font-family:Archivo,system-ui,sans-serif; background:#fff; color:#000A1C }
.page-2 { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid #D3E2ED }
.page-3 { max-width:1440px; margin:0 auto; padding:0 64px; height:80px; display:flex; align-items:center; gap:28px }
.page-4 { display:flex; align-items:center; gap:12px; flex:none }
.page-5 { width:44px; height:44px; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1) }
.page-6-hv:hover { transform:rotate(-8deg) scale(1.06)!important }
.page-7 { font-size:15px; font-weight:700; letter-spacing:-.01em }
.page-8 { display:flex; gap:17px; margin-left:auto; font-size:14.5px; color:#001751 }
.page-9 { padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .25s,color .25s; white-space:nowrap }
.page-10-hv:hover { border-color:#946200!important }
.page-11 { padding-bottom:3px; border-bottom:1px solid #946200; color:#000A1C; font-weight:600; white-space:nowrap }
.page-12 { display:flex; align-items:center; gap:14px; flex:none }
.page-15 { background:#000A1C; color:#fff; padding:13px 20px; font-size:14px; font-weight:600; white-space:nowrap; transition:background .25s,transform .25s }
.page-16-hv:hover { background:#946200!important; color:#fff!important; transform:translateY(-1px)!important }
.page-17 { position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#FFBA13; transform-origin:0 50%; transform:scaleX(0); animation:agProgress 1s linear both; animation-timeline:scroll(root) }

.page-18 { border-bottom:1px solid #D3E2ED }
.page-19 { max-width:1440px; margin:0 auto; padding:0 64px }
.page-20 { padding:34px 0 26px; display:flex; align-items:baseline; gap:16px; animation:agFade .7s both }
.page-21 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; color:#946200 }
.page-22 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.18em; color:#5C7897 }
.page-23 { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; color:#5C7897; margin-left:auto; display:flex; align-items:center; gap:8px }
.page-24 { width:6px; height:6px; background:#FFBA13; flex:none; animation:agPulse 2s ease-in-out infinite }

.page-62 { background:#000A1C; color:#8DA9C4; border-top:1px solid rgba(141,169,196,.22) }
.page-63 { max-width:1440px; margin:0 auto; padding:24px 64px 40px; display:flex; gap:24px; font-family:'IBM Plex Mono',monospace; font-size:11.5px }
.page-64 { color:#FFBA13; letter-spacing:.06em }
.page-65 { color:#8DA9C4; letter-spacing:.06em }
.page-66 { margin-left:auto }
.page-67 { position:fixed; right:26px; bottom:26px; z-index:49; width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#25D366; box-shadow:0 12px 30px rgba(18,140,126,.42),0 2px 6px rgba(0,10,28,.2); transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s }
.page-68-hv:hover { transform:scale(1.07)!important; box-shadow:0 18px 42px rgba(18,140,126,.5)!important }
.page-69-bf::before { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:agWaRing 2.4s cubic-bezier(.2,.7,.2,1) infinite; pointer-events:none }
.page-70 { flex:none; display:block }

.bl-lang { display:flex; align-items:center; justify-content:center; width:44px; height:35px; flex:none; cursor:pointer; user-select:none; border:1px solid #D3E2ED; background:#fff; color:#001751; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.08em; font-weight:600; transition:background .25s,color .25s,border-color .25s }
.bl-lang:hover { border-color:#946200; color:#946200 }

.bl-cover { position:relative; overflow:hidden; background:#000A1C; display:block }
.bl-cover::before { content:''; position:absolute; inset:0; opacity:.2; background-image:repeating-linear-gradient(135deg,#FFBA13 0 1px,transparent 1px 14.1421px) }
.bl-cover[data-cat="blanche"] { background:#001751 }
.bl-cover[data-cat="prix"] { background:#081226 }
.bl-cover[data-cat="prix"]::before { opacity:.3 }
.bl-cover[data-cat="methode"] { background:#000A1C }
.bl-cover[data-cat="methode"]::before { background-image:repeating-linear-gradient(45deg,#8DA9C4 0 1px,transparent 1px 14.1421px); opacity:.26 }
.bl-cover[data-cat="autres"] { background:#0A1526 }
.bl-cover[data-cat="autres"]::before { background-image:repeating-linear-gradient(135deg,#8DA9C4 0 1px,transparent 1px 14.1421px); opacity:.22 }
.bl-cover > .bl-cover-l { position:absolute; left:0; right:0; bottom:0; padding:16px 18px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; color:#FFBA13; background:linear-gradient(transparent,rgba(0,10,28,.85)) }
.bl-cover > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }

/* -- 5. Liste ---------------------------------------------------------------- */

.bl-head { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:64px; padding-bottom:56px; align-items:end }
.bl-h1 { margin:0; font-size:68px; line-height:.98; font-weight:600; letter-spacing:-.035em; text-wrap:balance; animation:agRise .8s cubic-bezier(.2,.7,.2,1) both }
.bl-lede { margin:0; font-size:17px; line-height:1.6; color:#001751; text-wrap:pretty; animation:agRise .8s .08s cubic-bezier(.2,.7,.2,1) both }

.bl-feat { border-bottom:1px solid #D3E2ED; background:#F1F6FA }
.bl-feat-w { max-width:1440px; margin:0 auto; padding:56px 64px }
.bl-feat-k { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; color:#946200; margin-bottom:26px }
.bl-feat-in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center }
.bl-feat-cover { aspect-ratio:4/3; border:1px solid #D3E2ED; animation:agLeft .9s cubic-bezier(.2,.7,.2,1) both }
.bl-feat-body { animation:agRise .9s .1s cubic-bezier(.2,.7,.2,1) both }
.bl-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em; color:#5C7897; margin-bottom:22px }
.bl-tag { background:#FFBA13; color:#000A1C; padding:5px 9px; font-weight:600 }
.bl-feat-t { margin:0 0 20px; font-size:42px; line-height:1.06; font-weight:600; letter-spacing:-.028em; max-width:24ch; text-wrap:balance }
.bl-feat-t a:hover { color:#946200 }
.bl-feat-dek { margin:0 0 28px; font-size:16.5px; line-height:1.58; color:#001751; max-width:52ch; text-wrap:pretty }
.bl-feat-act { display:flex; align-items:center; gap:24px; flex-wrap:wrap }
.bl-btn { background:#000A1C; color:#fff; padding:15px 26px; font-size:15px; font-weight:600; transition:background .25s,transform .25s }
.bl-btn:hover { background:#946200; color:#fff; transform:translateY(-2px) }
.bl-by { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; color:#5C7897 }

.bl-bar { padding:30px 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-bottom:1px solid #D3E2ED }
.bl-bar-l { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; color:#5C7897; margin-right:12px }
.bl-filter { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; padding:9px 14px; cursor:pointer; white-space:nowrap; border:1px solid #D3E2ED; background:transparent; color:#001751; transition:background .2s,border-color .2s,color .2s }
.bl-filter:hover { border-color:#946200; color:#946200 }
.bl-filter.is-on { border-color:#000A1C; background:#000A1C; color:#fff }
.bl-count { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; color:#5C7897 }

.bl-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-left:1px solid #D3E2ED; margin:0 -64px }
.bl-card { display:flex; flex-direction:column; background:#fff; border-right:1px solid #D3E2ED; border-bottom:1px solid #D3E2ED; transition:background .25s,transform .3s cubic-bezier(.2,.7,.2,1); animation:agRise .7s cubic-bezier(.2,.7,.2,1) both }
.bl-card:hover { background:#F1F6FA; transform:translateY(-3px) }
.bl-card[hidden] { display:none }
.bl-grid > .bl-card:nth-child(2) { animation-delay:.04s }
.bl-grid > .bl-card:nth-child(3) { animation-delay:.08s }
.bl-grid > .bl-card:nth-child(4) { animation-delay:.12s }
.bl-grid > .bl-card:nth-child(5) { animation-delay:.16s }
.bl-grid > .bl-card:nth-child(6) { animation-delay:.2s }
.bl-card-cover { aspect-ratio:16/8; border-bottom:1px solid #D3E2ED }
.bl-card-in { padding:26px 30px 30px; display:flex; flex-direction:column; flex:1 }
.bl-card-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; color:#5C7897; margin-bottom:16px }
.bl-card-cat { color:#946200; font-weight:600 }
.bl-card-t { margin:0 0 12px; font-size:21px; line-height:1.16; font-weight:600; letter-spacing:-.02em; text-wrap:pretty }
.bl-card-dek { margin:0 0 22px; font-size:14.5px; line-height:1.55; color:#001751; text-wrap:pretty }
.bl-card-foot { margin-top:auto; padding-top:18px; border-top:1px solid #D3E2ED; display:flex; align-items:center; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; color:#5C7897 }
.bl-card-go { color:#946200; font-weight:600; display:inline-flex; align-items:center; gap:6px;
   transition:gap .25s, color .25s }
.bl-card:hover .bl-card-go, .bl-card-go:hover { gap:11px; color:#000A1C }
.bl-empty { padding:56px 0; border-bottom:1px solid #D3E2ED; font-size:16px; color:#5C7897; line-height:1.6 }
.bl-empty[hidden] { display:none }

.bl-soon { margin-top:72px; padding-bottom:82px }
.bl-soon-h { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid #000A1C }
.bl-soon-k { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; font-weight:600; color:#000A1C }
.bl-soon-n { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; color:#5C7897 }
.bl-soon-row { display:grid; grid-template-columns:200px minmax(0,1fr) 128px; gap:32px; align-items:baseline; padding:24px 0; border-bottom:1px solid #D3E2ED }
.bl-soon-cat { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; color:#5C7897 }
.bl-soon-t { margin:0 0 6px; font-size:18px; line-height:1.25; font-weight:600; letter-spacing:-.015em; text-wrap:pretty }
.bl-soon-dek { margin:0; font-size:14px; line-height:1.55; color:#5C7897; max-width:70ch; text-wrap:pretty }
.bl-soon-read { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; color:#8DA9C4; text-align:right }

/* -- 6. Infolettre ----------------------------------------------------------- */

.bl-nl { background:#000A1C; color:#fff }
.bl-nl-w { max-width:1440px; margin:0 auto; padding:80px 64px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:80px; align-items:start }
.bl-nl-k { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; color:#FFBA13; margin-bottom:22px }
.bl-nl-t { margin:0 0 18px; font-size:40px; line-height:1.06; font-weight:600; letter-spacing:-.03em; max-width:22ch; text-wrap:balance }
.bl-nl-p { margin:0; font-size:16px; line-height:1.6; color:#8DA9C4; max-width:46ch; text-wrap:pretty }
.bl-nl-list { margin-top:32px; display:flex; flex-direction:column; gap:12px }
.bl-nl-li { display:flex; align-items:baseline; gap:12px; font-size:14.5px; color:#D3E2ED; text-wrap:pretty }
.bl-nl-n { font-family:'IBM Plex Mono',monospace; font-size:11px; color:#FFBA13; flex:none }
.bl-nl-box { border:1px solid rgba(141,169,196,.3); padding:38px 36px; background:#081226 }
.bl-nl-form { display:flex; flex-direction:column; gap:14px }
.bl-nl-lb { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em; color:#8DA9C4 }
.bl-nl-in { background:transparent; border:1px solid rgba(141,169,196,.4); color:#fff; padding:15px 16px; font-family:Archivo,sans-serif; font-size:15px; outline:none; transition:border-color .25s }
.bl-nl-in:focus { border-color:#FFBA13 }
.bl-nl-sel { background:#081226; border:1px solid rgba(141,169,196,.4); color:#fff; padding:15px 16px; font-family:Archivo,sans-serif; font-size:15px; outline:none }
.bl-nl-b { margin-top:10px; background:#FFBA13; color:#000A1C; border:none; padding:16px 22px; font-family:Archivo,sans-serif; font-size:15px; font-weight:600; cursor:pointer; transition:background .25s,transform .25s }
.bl-nl-b:hover { background:#fff; transform:translateY(-2px) }
.bl-nl-fine { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; color:#5C7897; line-height:1.7; margin-top:6px }

/* -- 7. Article -------------------------------------------------------------- */

.bl-crumb { padding:26px 0; border-bottom:1px solid #D3E2ED; display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; color:#5C7897 }
.bl-crumb-a { color:#946200; display:flex; align-items:center; gap:8px }
.bl-crumb-r { margin-left:auto }

.bl-art-head { max-width:900px; padding:64px 0 48px }
.bl-art-h1 { margin:0 0 26px; font-size:60px; line-height:1.02; font-weight:600; letter-spacing:-.035em; text-wrap:balance; animation:agRise .8s cubic-bezier(.2,.7,.2,1) both }
.bl-art-lede { margin:0; font-size:21px; line-height:1.5; color:#001751; max-width:62ch; text-wrap:pretty; animation:agRise .8s .06s cubic-bezier(.2,.7,.2,1) both }
.bl-art-by { margin-top:38px; padding-top:26px; border-top:1px solid #D3E2ED; display:flex; align-items:center; gap:16px }
.bl-art-av { width:56px; height:56px; flex:none; display:block; border-radius:50%; object-fit:cover; background:#F1F6FA; border:1px solid #D3E2ED }
.bl-art-name { font-size:15px; font-weight:600 }
.bl-art-role { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; color:#5C7897; margin-top:4px }

.bl-art-hero { height:671px; border-left:1px solid #D3E2ED; border-right:1px solid #D3E2ED; margin:0 -64px }

.bl-art-w { max-width:1440px; margin:0 auto; padding:72px 64px; display:grid; grid-template-columns:220px minmax(0,1fr); gap:80px; align-items:start }
.bl-toc { position:sticky; top:112px; display:flex; flex-direction:column }
.bl-toc-k { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em; color:#946200; padding-bottom:14px; border-bottom:1px solid #D3E2ED }
.bl-toc-a { padding:13px 0; border-bottom:1px solid #D3E2ED; font-size:13.5px; line-height:1.35; color:#001751; transition:color .2s,padding-left .2s }
.bl-toc-a:hover { color:#946200; padding-left:6px }

/* La mesure de lecture, 74 caractères, s'applique au TEXTE — pas au cadre.
   Posée sur le conteneur, elle serrait aussi les tableaux : à 1440 px la boîte
   tombait à 676 px pour 680 demandés, et la dernière colonne — souvent la
   nôtre — disparaissait derrière un défilement. Un tableau de comparaison
   dont on ne voit pas la dernière colonne ne compare plus rien. */
.bl-prose { min-width:0; max-width: 74ch;}
.bl-prose h2 { margin: 56px 0px 20px; font-size:32px; line-height:1.12; font-weight:600; letter-spacing:-.025em; scroll-margin-top:110px }
.bl-prose h2:first-child { margin-top:0 }
.bl-prose p { margin:0 0 22px; font-size:17.5px; line-height:1.68; color:#001751; text-wrap:pretty }
.bl-prose strong { color:#000A1C; font-weight:600 }
.bl-prose blockquote { margin:36px 0; padding:30px 34px; background:#F1F6FA; border-left:3px solid #FFBA13; font-size:20px; line-height:1.45; font-weight:500; letter-spacing:-.015em; color:#000A1C; text-wrap:pretty }

/* Tableau de comparaison. L'ancienne règle stylait indistinctement tous les
   `th`, donc les intitulés de ligne héritaient du fond sombre des en-têtes de
   colonnes : les deux rôles sont maintenant séparés. */
.bl-tbl { border:1px solid #D3E2ED; max-width:100%; overflow-x:hidden; -webkit-overflow-scrolling:touch }
.bl-tbl table { width:100%; border-collapse:collapse; min-width:680px }

/* La légende vit sous le tableau, hors du cadre et hors de la boîte qui
   défile : c'est une précision qu'on lit après les chiffres, et il ne faut pas
   avoir à faire glisser le tableau pour l'atteindre. */
.bl-tbl-f { margin:0 0 14px }
.bl-tbl-n { margin:10px 0 0; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
   line-height:1.7; letter-spacing:.06em; color:#5C7897; text-transform:uppercase }

/* En-tête de colonnes. Aligné en bas : un intitulé sur deux lignes reste posé
   sur la même ligne de base que les autres. */
.bl-tbl thead th { padding:14px 16px; text-align:left; vertical-align:bottom;
   background:#000A1C; color:#fff; font-family:'IBM Plex Mono',monospace; font-size:10px;
   font-weight:400; letter-spacing:.1em; line-height:1.55;
   border-left:1px solid rgba(141,169,196,.25) }
.bl-tbl thead th:first-child { border-left:none }
.bl-tbl thead th.est-avant { background:#946200 }

/* Corps. Mêmes marges partout, quelle que soit la nature de la cellule. */
.bl-tbl tbody th, .bl-tbl tbody td { padding:15px 16px; text-align:left; vertical-align:top;
   font-size:14.5px; line-height:1.45; color:#001751;
   border-top:1px solid #D3E2ED; border-left:1px solid #D3E2ED }
.bl-tbl tbody th:first-child, .bl-tbl tbody td:first-child { border-left:none }

/* Première colonne en intitulé : elle nomme la ligne, elle ne la remplit pas. */
.bl-tbl tbody th[scope="row"] { background:#F1F6FA; color:#000A1C; font-weight:600 }
.bl-tbl tbody th[scope="row"].est-avant { background:#FFFBEF }

/* Colonne mise en avant. La teinte court sur toute la hauteur : sans elle, la
   couleur de l'en-tête ne désignait aucune colonne en particulier. */
.bl-tbl tbody .est-avant { background:#FFFBEF; color:#000A1C; font-weight:600 }
/* `.bl-prose p` est plus specifique que `.bl-note` seul : la legende repassait
   en corps de texte. */
.bl-prose .bl-note,
.bl-note { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; color:#5C7897; line-height:1.7; margin:0 0 16px }

.bl-boxes { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1px; background:#D3E2ED; border:1px solid #D3E2ED; margin:32px 0 }
.bl-box { background:#fff; padding:28px 26px }
.bl-box-k { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em; color:#946200; margin-bottom:12px }
.bl-box-p { font-size:16px; line-height:1.55; color:#001751; text-wrap:pretty }

.bl-abc { display:flex; flex-direction:column; border-top:1px solid #D3E2ED; margin:28px 0 }
.bl-abc-r { display:grid; grid-template-columns:36px minmax(0,1fr); gap:20px; padding:22px 0; align-items:baseline }
.bl-abc-n { font-family:'IBM Plex Mono',monospace; font-size:12px; color:#946200 }
.bl-abc-p { font-size:16.5px; line-height:1.6; color:#001751; text-wrap:pretty }

.bl-checks { border:1px solid #D3E2ED; margin:28px 0 }
.bl-check { display:grid; grid-template-columns:52px minmax(0,1fr); border-bottom:1px solid #D3E2ED }
.bl-check:last-child { border-bottom:none }
.bl-check-n { background:#F1F6FA; border-right:1px solid #D3E2ED; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:12px; color:#946200 }
.bl-check-p { padding:20px 24px; font-size:16px; line-height:1.55; color:#001751; text-wrap:pretty }

.bl-cta { margin:52px 0 0; background:#000A1C; color:#fff; padding:44px 46px; display:grid; grid-template-columns:minmax(0,1.2fr) auto; gap:44px; align-items:center }
.bl-cta-k { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; color:#FFBA13; margin-bottom:16px }
.bl-cta-t { margin:0 0 12px; font-size:28px; line-height:1.12; font-weight:600; letter-spacing:-.025em; max-width:26ch; text-wrap:balance }
.bl-cta-p { margin:0 !important; font-size:15.5px !important; line-height:1.6 !important; color:#8DA9C4 !important; max-width:52ch !important; text-wrap:pretty !important }
.bl-cta-b { display:flex; flex-direction:column; gap:12px; min-width:250px }
.bl-cta-1 { background:#FFBA13; color:#000A1C; padding:16px 26px; font-size:15px; font-weight:600; text-align:center; transition:background .25s,transform .25s }
.bl-cta-1:hover { background:#fff; color:#000A1C; transform:translateY(-2px) }
.bl-cta-2 { border:1px solid rgba(141,169,196,.45); color:#fff; padding:15px 26px; font-size:15px; font-weight:600; text-align:center; transition:background .25s }
.bl-cta-2:hover { background:rgba(255,255,255,.08); color:#fff }

.bl-art-foot { margin-top:44px; padding-top:26px; border-top:1px solid #D3E2ED; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
.bl-art-back { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; color:#946200 }
.bl-art-next { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; color:#5C7897 }

/* -- 8. Petits écrans --------------------------------------------------------
   Mêmes paliers que le reste du site : 1180 px resserre les gouttières,
   1100 px replie la navigation, 900 px passe en colonne unique, 560 px règle
   la typographie du téléphone.
   -------------------------------------------------------------------------- */

.page-1 { --head-h:81px }

.bl-nav { display:contents }
.bl-burger { display:none; flex:none; width:42px; height:42px; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:transparent; border:1px solid #D3E2ED; cursor:pointer; transition:border-color .25s }
.bl-burger-b { display:block; width:17px; height:1.5px; background:#000A1C; transition:transform .3s cubic-bezier(.2,.7,.2,1) }
.page-2.is-menu-open .bl-burger { border-color:#946200 }
.page-2.is-menu-open .bl-burger-b:first-child { transform:translateY(3.25px) rotate(45deg) }
.page-2.is-menu-open .bl-burger-b:last-child { transform:translateY(-3.25px) rotate(-45deg) }

@media (max-width:1180px) {
  .page-3, .page-19, .bl-feat-w, .bl-art-w, .bl-nl-w, .page-63 { padding-left:40px; padding-right:40px }
  /* Huit entrées, dont une en gras : entre 1100 et 1180 px le menu dépassait
     de quelques pixels et poussait le bouton d'appel hors de la barre. */
  .page-8 { gap:12px }
  .bl-h1 { font-size:52px }
  .bl-art-h1 { font-size:46px }
  .bl-grid { margin:0 -40px }
  .bl-art-hero { margin:0 -40px }
  .bl-art-w { grid-template-columns:180px minmax(0,1fr); gap:48px }
  .bl-feat-in { gap:36px }
  .bl-feat-t { font-size:34px }
}

@media (max-width:1100px) {
  .page-2 { background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none }
  .page-2.is-menu-open { z-index:110 }
  .bl-burger { display:flex; margin-left:auto }

  .bl-nav { position:fixed; top:var(--head-h); left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; padding:6px 40px 30px; background:#fff; overflow-y:auto; overscroll-behavior:contain; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .3s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1),visibility .3s }
  .page-2.is-menu-open .bl-nav { opacity:1; visibility:visible; transform:none }
  .page-8 { flex:none; flex-direction:column; gap:0; margin:0; font-size:16.5px }
  .page-9, .page-11 { display:flex; align-items:center; min-height:53px; padding:0; border-bottom:1px solid #EAF1F7; white-space:normal; font-weight:500 }
  .page-12 { flex-direction:column; align-items:stretch; gap:10px; margin-top:auto; padding-top:24px; max-width:440px }
  .bl-lang { width:100%; height:46px }
  .page-15 { order:-1; padding:16px; font-size:15px; text-align:center }

  .bl-toc { display:none }
  .bl-art-w { grid-template-columns:minmax(0,1fr); gap:0 }
}

@media (max-width:900px) {
  .page-1 { --head-h:58px }
  .page-3 { height:57px; padding:0 20px; gap:12px }
  .bl-nav { padding:6px 20px 26px }
  .page-12 { max-width:none }
  .page-5 { width:34px; height:34px }
  .page-7 { font-size:13.5px }

  .page-19, .bl-feat-w, .bl-art-w, .bl-nl-w, .page-63 { padding-left:20px; padding-right:20px }
  .page-20 { padding:20px 0 16px; flex-wrap:wrap; gap:6px 14px }
  .page-23 { margin-left:0 }

  .bl-head { grid-template-columns:minmax(0,1fr); gap:22px; padding-bottom:38px }
  .bl-h1 { font-size:34px }
  .bl-feat-w { padding:44px 20px }
  .bl-feat-in { grid-template-columns:minmax(0,1fr); gap:26px }
  .bl-feat-t { font-size:26px; max-width:none }
  .bl-feat-dek { max-width:none }
  .bl-bar { padding:20px 0 }
  .bl-bar-l { width:100%; margin:0 0 4px }
  .bl-count { margin-left:0; width:100% }
  .bl-grid { grid-template-columns:minmax(0,1fr); margin:0 -20px }
  .bl-card-in { padding:20px 20px 24px }
  .bl-soon { margin-top:48px; padding-bottom:56px }
  .bl-soon-row { grid-template-columns:minmax(0,1fr); gap:8px; padding:18px 0 }
  .bl-soon-read { text-align:left }

  .bl-art-head { padding:38px 0 32px }
  .bl-art-h1 { font-size:30px }
  .bl-art-lede { font-size:17.5px; max-width:none }
  .bl-art-hero { margin:0 -20px; height:220px }
  .bl-art-w { padding:44px 20px }
  .bl-prose h2 { font-size:24px; }
  .bl-prose p { font-size:16.5px }
  .bl-prose blockquote { padding:22px 20px; font-size:17px; margin:28px 0 }
  .bl-fig { margin:26px 0 }
  .bl-tbl thead th { padding:12px }
  .bl-tbl tbody th, .bl-tbl tbody td { padding:12px; font-size:14px }
  .bl-boxes { grid-template-columns:minmax(0,1fr) }
  .bl-cta { grid-template-columns:minmax(0,1fr); gap:26px; padding:30px 22px }
  .bl-cta-t { font-size:22px; max-width:none }
  .bl-cta-b { min-width:0 }

  .bl-nl-w { grid-template-columns:minmax(0,1fr); gap:36px; padding-top:52px; padding-bottom:54px }
  .bl-nl-t { font-size:28px; max-width:none }
  .bl-nl-p { max-width:none }
  .bl-nl-box { padding:26px 20px }

  .page-63 { flex-wrap:wrap; gap:8px 18px; padding-top:20px; padding-bottom:32px }
  .page-66 { margin-left:0 }
  .page-67 { right:16px; bottom:16px; width:54px; height:54px }
}

@media (max-width:560px) {
  .bl-h1 { font-size:29px }
  .bl-art-h1 { font-size:26px }
  .bl-feat-t { font-size:23px }
  .bl-nl-t { font-size:24px }
  .bl-art-av { width:46px; height:46px }
}

/* Illustration au fil de l'article. Elle déborde légèrement la mesure de
   lecture : une image à la largeur du texte paraît timide, et le débord la
   pose sans casser le rythme de lecture. */
.bl-fig { margin:36px 0; max-width:none }
.bl-fig img { display:block; width:100%; height:auto; border:1px solid #D3E2ED }
.bl-fig-l { margin:12px 0 0; font-family:'IBM Plex Mono',monospace; font-size:11px;
   line-height:1.7; letter-spacing:.05em; color:#5C7897; max-width:74ch }

/* Le piège à robots doit rester invisible sans être `display:none` : certains
   robots ignorent les champs masqués de cette façon. */
.bl-nl-piege { position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.bl-nl-etat { margin:12px 0 0; font-size:14px; line-height:1.5; color:#FFBA13 }
.bl-nl-etat.est-erreur { color:#FF9A8B }
.bl-nl-etat[hidden] { display:none }