/* ==========================================================================
   Thème « Blog Arras » — feuille unique.
   Direction : magazine éditorial contrasté. Fond ivoire, grands titres à
   empattements, filets fins, accents rouge brique et vert Artois, bleu
   d'ardoise et ocre en appoint. Aucune ressource externe (CSP style-src
   'self'), aucune police distante : piles système uniquement.

   Contrastes vérifiés (WCAG, texte sur fond ivoire #FBF8F2) :
   ink 17,2:1 · ink-2 14,2:1 · ink-3 9,6:1 · muted 5,6:1 · accent 5,7:1 ·
   vert 5,0:1 · bleu 4,9:1. L'ocre #A87908 (3,7:1) ne sert jamais au texte
   courant : uniquement aux aplats, filets et illustrations.

   Palette des graphiques, validée pour les daltonismes protan, deutan et
   tritan sur ce fond : #B5341F, #2A6FB0, #A87908, #1F7A57.
   ========================================================================== */

/* ── Jetons ───────────────────────────────────────────────────────────────── */
:root{
  --bg:#FBF8F2;
  --surface:#FFFFFF;
  --surface-2:#F3EEE5;
  --ink:#171512;
  --ink-2:#262220;
  --ink-3:#46403A;
  --muted:#6B6259;
  --muted-2:#8A8076;
  --line:#E4DCCE;
  --line-2:#D2C7B4;
  --accent:#B5341F;        /* rouge brique */
  --accent-dark:#8E2716;
  --accent-soft:#E3A093;
  --wash:#FBEEE9;
  --green:#1F7A57;         /* vert Artois */
  --green-wash:#E9F5EF;
  --blue:#2A6FB0;
  --blue-wash:#E8F1FA;
  --ocre:#A87908;
  --ocre-wash:#FAF0D9;

  --radius:14px;
  --radius-sm:8px;
  --radius-lg:22px;
  --shadow-1:0 1px 2px rgba(23,21,18,.05);
  --shadow-2:0 2px 6px rgba(23,21,18,.06), 0 16px 30px -22px rgba(23,21,18,.34);
  --shadow-3:0 8px 20px rgba(23,21,18,.09), 0 34px 62px -34px rgba(23,21,18,.42);

  --wrap:1180px;
  --read:760px;
  --header-h:78px;

  --font-title: var(--font-heading, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif);
  --font-text:  var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* lues par core/comment-section.php */
  --card-bg:var(--surface);
  --text:var(--ink-2);
  --border:var(--line);
  --primary:var(--accent);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:var(--font-text);font-size:1.0125rem;line-height:1.72;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--accent-dark)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-title);color:var(--ink);line-height:1.16;letter-spacing:-.012em;margin:0}
table{border-collapse:collapse}

.ba-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ba-skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--radius-sm) 0;font-weight:700}
.ba-skip:focus{left:0}

.ba-wrap{width:min(100% - 2.4rem, var(--wrap));margin-inline:auto}
.ba-section{padding-block:clamp(2.6rem,1.8rem + 3vw,4.6rem)}

/* ── Titres de section ────────────────────────────────────────────────────── */
.ba-kicker{
  font-family:var(--font-text);font-size:.7rem;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .7rem;display:flex;align-items:center;gap:.6rem;
}
.ba-kicker::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent);max-width:180px}
.ba-h2-lead{font-size:clamp(1.55rem,1.2rem + 1.4vw,2.15rem);margin:0 0 1.6rem;position:relative;padding-bottom:.7rem}
.ba-h2-lead::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;background:var(--accent)}

/* ── Barre de progression de lecture ─────────────────────────────────────── */
.ba-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:1300;background:transparent;pointer-events:none}
.ba-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--ocre));transition:width .08s linear}

/* ── Curseur magnétique ──────────────────────────────────────────────────── */
.ba-cursor{
  position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--accent);pointer-events:none;z-index:1400;
  transform:translate(-50%,-50%) scale(1);opacity:0;
  transition:opacity .25s ease, transform .18s ease, background-color .18s ease, border-color .18s ease;
  will-change:transform;
}
.ba-cursor.is-on{opacity:.75}
.ba-cursor.is-link{transform:translate(-50%,-50%) scale(1.85);background:rgba(181,52,31,.12);border-color:var(--accent-dark)}
@media (hover:none),(pointer:coarse){.ba-cursor{display:none}}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.ba-header{
  position:sticky;top:0;z-index:1200;background:rgba(251,248,242,.9);
  backdrop-filter:saturate(1.5) blur(12px);-webkit-backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--line);
}
.ba-header-in{width:min(100% - 2.4rem,var(--wrap));margin-inline:auto;height:var(--header-h);display:flex;align-items:center;gap:1.2rem}
.ba-header-line{height:2px;background:linear-gradient(90deg,var(--accent) 0%,var(--ocre) 30%,var(--green) 58%,var(--blue) 78%,transparent 100%);opacity:.9}
.ba-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
.ba-logo img{width:auto;height:38px}
.ba-logo-mark{display:block;width:38px;height:38px;flex:0 0 auto}
.ba-logo-mark svg{width:100%;height:100%}
.ba-logo-txt{display:flex;flex-direction:column;font-family:var(--font-title);font-weight:700;font-size:1.12rem;color:var(--ink);line-height:1.1}
.ba-logo-txt em{font-family:var(--font-text);font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.ba-nav{margin-left:auto}
.ba-nav ul{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.ba-nav a{
  position:relative;display:block;padding:.5rem .72rem;border-radius:var(--radius-sm);
  font-size:.9rem;font-weight:600;color:var(--ink-3);text-decoration:none;transition:color .18s;
}
.ba-nav a::after{content:"";position:absolute;left:.72rem;right:.72rem;bottom:.28rem;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.2,.8,.3,1)}
.ba-nav a:hover{color:var(--ink)}
.ba-nav a:hover::after,.ba-nav a.is-active::after{transform:scaleX(1)}
.ba-nav a.is-active{color:var(--accent-dark)}
.ba-nav-search{display:none}

.ba-header-tools{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.ba-search{display:flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.2rem .2rem .2rem .8rem;transition:border-color .18s,box-shadow .18s;max-width:230px}
.ba-search:focus-within{border-color:var(--accent-soft);box-shadow:0 0 0 3px rgba(181,52,31,.14)}
.ba-search input{border:0;background:none;font:inherit;font-size:.85rem;color:var(--ink);width:120px;padding:.34rem 0}
.ba-search input:focus{outline:none}
.ba-search button{border:0;background:var(--accent);color:#fff;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .18s,transform .18s}
.ba-search button:hover{background:var(--accent-dark);transform:scale(1.08)}
.ba-search svg{width:15px;height:15px}

.ba-burger{display:none;position:relative;width:42px;height:42px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}
.ba-burger span{position:absolute;left:11px;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .18s,top .28s}
.ba-burger span:nth-child(1){top:14px}
.ba-burger span:nth-child(2){top:20px}
.ba-burger span:nth-child(3){top:26px}
.ba-burger.is-open span:nth-child(1){top:20px;transform:rotate(45deg)}
.ba-burger.is-open span:nth-child(2){opacity:0}
.ba-burger.is-open span:nth-child(3){top:20px;transform:rotate(-45deg)}

.ba-overlay{position:fixed;inset:0;background:rgba(23,21,18,.42);z-index:1100;opacity:0;transition:opacity .28s}
.ba-overlay.is-on{opacity:1}

/* ── Fil d'Ariane ────────────────────────────────────────────────────────── */
.ba-crumbs{border-bottom:1px solid var(--line);background:var(--surface)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.42rem;list-style:none;margin:0;padding:.6rem 0;font-size:.8rem}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--accent-dark);text-decoration:underline}
.breadcrumb li[aria-current]{color:var(--ink-3);font-weight:600}
.breadcrumb-sep{color:var(--line-2)}

/* ── Héros de l'accueil ──────────────────────────────────────────────────── */
.ba-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(175deg,var(--wash) 0%,var(--bg) 62%)}
.ba-hero-bg{position:absolute;inset:0;pointer-events:none}
.ba-hero-bg svg{width:100%;height:100%;position:absolute;inset:0}
.ba-hero-in{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(1.6rem,1rem + 3vw,3.4rem);align-items:center;padding-block:clamp(2.4rem,1.6rem + 4vw,4.6rem)}
.ba-hero h1{font-size:clamp(2.1rem,1.35rem + 3.1vw,3.5rem);letter-spacing:-.022em;margin:.15rem 0 1rem}
.ba-hero h1 .ba-w{display:inline-block}
.ba-lead{font-size:clamp(1.03rem,.98rem + .3vw,1.16rem);color:var(--ink-3);max-width:44ch;margin:0 0 1.5rem}

.ba-type-wrap{display:flex;align-items:center;gap:.55rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.55rem 1rem;box-shadow:var(--shadow-1);max-width:26rem;margin-bottom:1.5rem}
.ba-type-wrap svg{width:17px;height:17px;color:var(--muted-2);flex:0 0 auto}
.ba-type{font-size:.94rem;color:var(--ink-2);font-weight:600}
.ba-caret{display:inline-block;width:2px;height:1.05em;background:var(--accent);vertical-align:-.16em;animation:ba-blink 1.05s steps(1) infinite}
@keyframes ba-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.ba-stats{display:flex;flex-wrap:wrap;gap:1.9rem;list-style:none;margin:0;padding:0}
.ba-stats li{display:flex;flex-direction:column}
.ba-stats strong{font-family:var(--font-title);font-size:2.15rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ba-stats span{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.ba-stats-note{font-size:.78rem;color:var(--muted-2);margin:.9rem 0 0;max-width:40ch}

/* ── Bandeau défilant ────────────────────────────────────────────────────── */
.ba-marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--ink);color:#F4EFE6;padding:.55rem 0}
.ba-marquee-in{display:flex;gap:2.4rem;width:max-content;animation:ba-slide 52s linear infinite}
.ba-marquee span{font-size:.78rem;font-weight:600;letter-spacing:.06em;white-space:nowrap;display:flex;align-items:center;gap:.7rem}
.ba-marquee span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ocre);flex:0 0 auto}
@keyframes ba-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ba-marquee:hover .ba-marquee-in{animation-play-state:paused}

/* ── Jeu de l'accueil ────────────────────────────────────────────────────── */
.ba-game{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.3rem 1.4rem 1.15rem;box-shadow:var(--shadow-3);overflow:hidden}
.ba-game::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--accent),var(--ocre),var(--green))}
.ba-game-title{font-family:var(--font-title);font-size:1.16rem;font-weight:700;color:var(--ink);margin:.25rem 0 .3rem}
.ba-game-sub{font-size:.83rem;color:var(--muted);margin:0 0 1rem}
.ba-quiz-q{font-size:1rem;font-weight:600;color:var(--ink-2);min-height:3.6em;margin:0 0 .85rem;line-height:1.5}
.ba-quiz-btns{display:flex;gap:.6rem;margin-bottom:.8rem}
.ba-quiz-btns button{
  flex:1;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);
  font:inherit;font-size:.88rem;font-weight:700;padding:.6rem .8rem;border-radius:var(--radius-sm);
  cursor:pointer;transition:transform .16s,background .16s,border-color .16s,color .16s;
}
.ba-quiz-btns button:hover{transform:translateY(-2px);border-color:var(--accent-soft);background:var(--wash)}
.ba-quiz-btns button:disabled{opacity:.55;cursor:default;transform:none}
.ba-quiz-msg{font-size:.85rem;line-height:1.55;color:var(--ink-3);min-height:4.4em;margin:0;padding:.6rem .75rem;border-radius:var(--radius-sm);background:var(--surface-2);border-left:3px solid var(--line-2);transition:border-color .2s,background .2s}
.ba-quiz-msg.is-ok{background:var(--green-wash);border-left-color:var(--green)}
.ba-quiz-msg.is-no{background:var(--wash);border-left-color:var(--accent)}
.ba-game-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.9rem}
.ba-game-score{font-size:.78rem;font-weight:700;letter-spacing:.05em;color:var(--muted);font-variant-numeric:tabular-nums}
.ba-btn-sm{border:0;background:var(--accent);color:#fff;font:inherit;font-size:.82rem;font-weight:700;padding:.5rem 1.05rem;border-radius:999px;cursor:pointer;transition:background .18s,transform .18s}
.ba-btn-sm:hover{background:var(--accent-dark);transform:translateY(-2px)}

/* ── Cartes d'article ────────────────────────────────────────────────────── */
.ba-cards{display:grid;gap:1.5rem}
.ba-cards-3{grid-template-columns:repeat(3,1fr)}
.ba-cards-2{grid-template-columns:repeat(2,1fr)}
.ba-card{
  position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;
  box-shadow:var(--shadow-1);transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s;
}
.ba-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-3);border-color:var(--line-2)}
.ba-card-img{display:block;overflow:hidden;background:var(--surface-2);aspect-ratio:1200/630}
.ba-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.ba-card:hover .ba-card-img img{transform:scale(1.045)}
.ba-card-body{display:flex;flex-direction:column;gap:.5rem;padding:1.05rem 1.15rem 1.25rem;flex:1}
.ba-card-kicker{display:flex;align-items:center;gap:.5rem;font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.ba-dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.ba-card-kicker .ba-d{color:var(--muted-2);font-weight:700;letter-spacing:.06em}
.ba-card-title{font-family:var(--font-title);font-size:1.1rem;font-weight:700;color:var(--ink);line-height:1.32}
.ba-card-desc{font-size:.87rem;color:var(--muted);line-height:1.6;flex:1}
.ba-card-more{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:var(--accent);margin-top:.2rem}
.ba-card:hover .ba-card-more span{transform:translateX(4px)}
.ba-card-more span{transition:transform .25s}

/* ── Rubriques en vitrine ────────────────────────────────────────────────── */
.ba-rubs{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.ba-rub{
  position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.2rem 1.1rem 1.3rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;overflow:hidden;transition:transform .28s,box-shadow .28s;
}
.ba-rub::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--c,var(--accent));transform:scaleX(.25);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.ba-rub:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.ba-rub:hover::before{transform:scaleX(1)}
.ba-rub-n{font-family:var(--font-title);font-size:1.5rem;color:var(--c,var(--accent));line-height:1}
.ba-rub-t{font-family:var(--font-title);font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.3}
.ba-rub-d{font-size:.8rem;color:var(--muted);line-height:1.55}
.ba-rub-c{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:auto}

/* ── Corps rédactionnel ──────────────────────────────────────────────────── */
.ba-content{font-size:1.055rem;line-height:1.78;color:var(--ink-2);max-width:var(--read)}
.ba-content-wide{max-width:none}
.ba-content>*+*{margin-top:1.15rem}
.ba-content h2{font-size:clamp(1.4rem,1.15rem + 1vw,1.92rem);margin-top:2.9rem;padding-top:1.5rem;border-top:1px solid var(--line);scroll-margin-top:96px}
.ba-content h3{font-size:clamp(1.08rem,1rem + .35vw,1.24rem);margin-top:2rem;color:var(--ink-2);scroll-margin-top:96px}
.ba-content p{margin:0}
.ba-content strong{color:var(--ink);font-weight:700}
.ba-content em{font-style:italic;color:var(--ink-3)}
.ba-content a{color:var(--accent-dark);text-decoration:underline;text-decoration-color:var(--accent-soft);text-decoration-thickness:2px;text-underline-offset:.2em;transition:background .2s,color .2s}
.ba-content a:hover{background:var(--wash);color:var(--accent)}
.ba-content ul{margin:0;padding-left:1.2rem}
.ba-content li+li{margin-top:.45rem}

.ba-content table{width:100%;margin:2rem 0;font-size:.93rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1)}
.ba-content thead th{background:var(--surface-2);font-family:var(--font-text);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.ba-content tbody td{padding:.82rem 1rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-3)}
.ba-content tbody tr:last-child td{border-bottom:0}
.ba-content tbody tr:nth-child(odd) td{background:rgba(243,238,229,.42)}
.ba-content tbody td:first-child{font-weight:600;color:var(--ink-2);width:38%}

.ba-content .ba-note,.ba-content .ba-warn{
  margin:1.9rem 0;padding:1rem 1.15rem;border-radius:var(--radius);font-size:.95rem;line-height:1.65;
  border-left:4px solid var(--green);background:var(--green-wash);color:var(--ink-2);
}
.ba-content .ba-warn{border-left-color:var(--accent);background:var(--wash)}

/* Numérotation des sections des pages longues */
.ba-content-count{counter-reset:ba-sec}
.ba-content-count h2{counter-increment:ba-sec;display:flex;gap:.85rem;align-items:baseline}
.ba-content-count h2::before{
  content:counter(ba-sec,decimal-leading-zero);
  font-family:var(--font-text);font-size:.78rem;font-weight:800;letter-spacing:.06em;
  color:var(--accent);background:var(--wash);border-radius:6px;padding:.28rem .5rem;flex:0 0 auto;
  transform:translateY(-.18em);
}

/* Grille de points clés */
.ba-keys{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0 !important;padding:0}
.ba-keys li{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ocre);border-radius:var(--radius-sm);padding:.95rem 1.05rem;font-size:.88rem;line-height:1.6;color:var(--muted);margin:0 !important}
.ba-keys li strong{display:block;font-family:var(--font-title);font-size:1rem;color:var(--ink);margin-bottom:.3rem}

/* Accordéons et FAQ */
.ba-acc,.ba-faq{margin:2rem 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.ba-acc details,.ba-faq details{border-bottom:1px solid var(--line)}
.ba-acc details:last-child,.ba-faq details:last-child{border-bottom:0}
.ba-acc summary,.ba-faq summary{
  position:relative;list-style:none;cursor:pointer;padding:1rem 3rem 1rem 1.15rem;
  font-family:var(--font-title);font-size:1rem;font-weight:700;color:var(--ink);transition:background .18s;
}
.ba-acc summary::-webkit-details-marker,.ba-faq summary::-webkit-details-marker{display:none}
.ba-acc summary:hover,.ba-faq summary:hover{background:var(--surface-2)}
.ba-acc summary::after,.ba-faq summary::after{
  content:"";position:absolute;right:1.15rem;top:50%;width:10px;height:10px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.ba-acc details[open] summary::after,.ba-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.ba-acc details>p,.ba-faq details>p{margin:0;padding:0 1.15rem 1.1rem;font-size:.94rem;line-height:1.7;color:var(--ink-3)}
.ba-acc details[open]>p,.ba-faq details[open]>p{animation:ba-fade .32s ease both}
@keyframes ba-fade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ── Figures et infographies ─────────────────────────────────────────────── */
.ba-fig{
  margin:2.4rem 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.3rem 1.4rem 1.15rem;box-shadow:var(--shadow-2);
}
.ba-fig svg{width:100%;height:auto;display:block;font-family:var(--font-text)}
.ba-fig figcaption{margin-top:1rem;padding-top:.85rem;border-top:1px dashed var(--line);font-size:.83rem;line-height:1.6;color:var(--muted)}
.ba-fig figcaption strong{color:var(--ink-3);font-weight:700}
/* Tracé progressif et croissance des marques à l'apparition.
   Les marques sont VISIBLES par défaut : elles ne sont masquées que si la classe
   ba-anim a été posée par le script à nonce du gabarit. Sans JavaScript, ou si
   l'observateur d'intersection échoue, la figure reste entièrement lisible. */
html.ba-anim .ba-fig .ba-draw{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
html.ba-anim .ba-fig.is-in .ba-draw{animation:ba-draw 1.5s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes ba-draw{to{stroke-dashoffset:0}}
html.ba-anim .ba-fig .ba-grow{transform:scaleX(0);transform-origin:left center}
html.ba-anim .ba-fig.is-in .ba-grow{animation:ba-grow .85s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--d,0ms)}
@keyframes ba-grow{to{transform:scaleX(1)}}
html.ba-anim .ba-fig .ba-rise{transform:scaleY(0);transform-origin:center bottom}
html.ba-anim .ba-fig.is-in .ba-rise{animation:ba-rise .85s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--d,0ms)}
@keyframes ba-rise{to{transform:scaleY(1)}}
html.ba-anim .ba-fig .ba-pop{opacity:0}
html.ba-anim .ba-fig.is-in .ba-pop{animation:ba-pop .5s ease forwards;animation-delay:var(--d,0ms)}
@keyframes ba-pop{to{opacity:1}}

/* ── Sommaire ────────────────────────────────────────────────────────────── */
.ba-toc{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);padding:1.1rem 1.3rem 1.2rem;margin:0 0 2.4rem}
.ba-toc-title{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 .7rem}
.ba-toc ol{columns:2;column-gap:2rem;margin:0;padding-left:1.15rem;font-size:.9rem}
.ba-toc li{margin:.28rem 0;break-inside:avoid}
.ba-toc a{color:var(--ink-3);text-decoration:none}
.ba-toc a:hover{color:var(--accent-dark);text-decoration:underline}

/* ── Article ─────────────────────────────────────────────────────────────── */
.ba-post-head{background:linear-gradient(180deg,var(--wash),var(--bg));border-bottom:1px solid var(--line)}
.ba-post-head .ba-wrap{padding-block:clamp(1.8rem,1.2rem + 2vw,3rem)}
.ba-post-head h1{font-size:clamp(1.75rem,1.3rem + 2.1vw,2.7rem);margin:.5rem 0 .9rem;max-width:26ch}
.ba-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-size:.8rem;color:var(--muted)}
.ba-post-hero{margin-block:0;margin-inline:auto;width:min(100% - 2.4rem,var(--wrap));border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-2);margin-top:1.6rem}
.ba-post-hero img{width:100%;height:auto}
.ba-post-body{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:clamp(1.6rem,1rem + 2.4vw,3.2rem);align-items:start;padding-block:clamp(2rem,1.4rem + 2vw,3.2rem)}
.ba-sidebar{position:sticky;top:calc(var(--header-h) + 1.2rem);display:flex;flex-direction:column;gap:1.1rem}
.sidebar-widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.05rem 1.15rem 1.15rem;box-shadow:var(--shadow-1)}
.sidebar-widget-title{font-family:var(--font-title);font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:.75rem;padding-bottom:.55rem;border-bottom:1px solid var(--line)}
.sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sidebar-list li{border-bottom:1px dashed var(--line)}
.sidebar-list li:last-child{border-bottom:0}
.sidebar-list a{display:block;padding:.5rem .1rem;font-size:.88rem;line-height:1.5;color:var(--ink-3);text-decoration:none;transition:color .16s,padding-left .16s}
.sidebar-list a:hover{color:var(--accent-dark);padding-left:.35rem}
.ba-side-search{display:flex;gap:.4rem}
.ba-side-search input{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:.55rem .7rem;font:inherit;font-size:.88rem;color:var(--ink);background:var(--surface)}
.ba-side-search input:focus{outline:none;border-color:var(--accent-soft);box-shadow:0 0 0 3px rgba(181,52,31,.14)}
.ba-side-search button{border:0;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font:inherit;font-size:.83rem;font-weight:700;padding:0 .85rem;cursor:pointer}
.ba-side-search button:hover{background:var(--accent-dark)}

/* ── Rubrique ────────────────────────────────────────────────────────────── */
.ba-cat-head{background:linear-gradient(180deg,var(--wash),var(--bg));border-bottom:1px solid var(--line)}
.ba-cat-head .ba-wrap{padding-block:clamp(2rem,1.4rem + 2vw,3.2rem);display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:center}
.ba-cat-head h1{font-size:clamp(1.75rem,1.3rem + 2vw,2.6rem);margin:.4rem 0 .8rem}
.ba-cat-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-2)}
.ba-cat-count{font-size:.76rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.ba-cat-intro,.ba-cat-outro{max-width:var(--read);margin-inline:auto}

.ba-pglink{display:grid;place-items:center;min-width:42px;height:42px;padding:0 .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-3);font-weight:700;font-size:.88rem;text-decoration:none;transition:background .18s,color .18s,border-color .18s,transform .18s}
.ba-pglink:hover{background:var(--wash);border-color:var(--accent-soft);color:var(--accent-dark);transform:translateY(-2px)}
.ba-pglink[aria-current]{background:var(--accent);border-color:var(--accent);color:#fff}
.ba-pglink-gap{color:var(--muted-2);padding:0 .3rem}
.ba-pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin-top:2.4rem}

/* ── Pages statiques ─────────────────────────────────────────────────────── */
.ba-page-head{background:linear-gradient(180deg,var(--wash),var(--bg));border-bottom:1px solid var(--line);padding-block:clamp(2rem,1.4rem + 2vw,3.2rem)}
.ba-page-head h1{font-size:clamp(1.8rem,1.35rem + 2vw,2.7rem);max-width:22ch}
.ba-longread{max-width:var(--read);margin-inline:auto}
.ba-longread-wide{max-width:1080px;margin-inline:auto}

/* ── Contact ─────────────────────────────────────────────────────────────── */
.ba-contact{background:var(--ink);color:#EDE6DA;scroll-margin-top:90px;position:relative;overflow:hidden}
.ba-contact-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,1rem + 3vw,3.4rem);padding-block:clamp(2.6rem,1.8rem + 3vw,4.4rem);position:relative}
.ba-contact h2{color:#FFFCF6;font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem);margin:0 0 1rem}
.ba-contact .ba-kicker{color:var(--ocre)}
.ba-contact .ba-kicker::after{background:linear-gradient(90deg,rgba(168,121,8,.6),transparent)}
.ba-contact p{color:#D6CEC1;font-size:.97rem}
.ba-contact strong{color:#FFFCF6}
.ba-contact-list{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem;font-size:.9rem;color:#D6CEC1}
.ba-contact-list li{display:flex;gap:.6rem;align-items:flex-start}
.ba-contact-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ocre);margin-top:.55rem;flex:0 0 auto}
.ba-contact-form{background:var(--surface);border-radius:var(--radius-lg);padding:1.4rem 1.5rem 1.6rem;box-shadow:var(--shadow-3)}

/* Formulaire natif */
.ba-contact-form .form-row,.ba-contact-form .form-group,.ba-contact-form .form-field{margin-bottom:.9rem}
.ba-contact-form label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.03em;color:var(--ink-3);margin-bottom:.35rem}
.ba-contact-form input[type=text],.ba-contact-form input[type=email],.ba-contact-form input[type=tel],
.ba-contact-form select,.ba-contact-form textarea{
  width:100%;border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:.62rem .8rem;
  font:inherit;font-size:.92rem;color:var(--ink);background:var(--surface);transition:border-color .18s,box-shadow .18s;
}
.ba-contact-form input:focus,.ba-contact-form select:focus,.ba-contact-form textarea:focus{outline:none;border-color:var(--accent-soft);box-shadow:0 0 0 3px rgba(181,52,31,.14)}
.ba-contact-form textarea{resize:vertical;min-height:8rem}
.ba-contact-form button[type=submit]{border:0;background:var(--accent);color:#fff;font:inherit;font-size:.94rem;font-weight:700;padding:.75rem 1.6rem;border-radius:999px;cursor:pointer;transition:background .18s,transform .18s,box-shadow .18s}
.ba-contact-form button[type=submit]:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.ba-contact-form input[type=checkbox]{width:auto;margin-right:.5rem;accent-color:var(--accent)}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.ba-404{background:linear-gradient(180deg,var(--wash),var(--bg))}
.ba-404-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,1rem + 3vw,3.2rem);align-items:center;padding-block:clamp(2.4rem,1.6rem + 3vw,4rem)}
.ba-404 h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,2.9rem);margin:.4rem 0 1rem}
.ba-404-links{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem}
.ba-chip{display:inline-flex;align-items:center;padding:.48rem 1rem;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-size:.85rem;font-weight:600;color:var(--ink-3);text-decoration:none;transition:background .18s,border-color .18s,transform .18s}
.ba-chip:hover{background:var(--wash);border-color:var(--accent-soft);color:var(--accent-dark);transform:translateY(-2px)}
.ba-404-search{display:flex;gap:.5rem;max-width:24rem;margin-top:1.2rem}
.ba-404-search input{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:.65rem .85rem;font:inherit;font-size:.92rem;background:var(--surface);color:var(--ink)}
.ba-404-search input:focus{outline:none;border-color:var(--accent-soft);box-shadow:0 0 0 3px rgba(181,52,31,.14)}
.ba-404-search button{border:0;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font:inherit;font-weight:700;padding:0 1.1rem;cursor:pointer}
.ba-game-404 canvas{width:100%;height:auto;background:var(--surface-2);border-radius:var(--radius);border:1px solid var(--line);display:block}
.ba-game-time{font-size:.78rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.ba-game-msg{font-size:.83rem;color:var(--muted);margin:.7rem 0 0;min-height:1.4em}
.ba-game-head{margin-bottom:.9rem}

/* ── Pied de page ────────────────────────────────────────────────────────── */
.ba-footer{background:var(--ink);color:#CFC7BA}
.ba-footer-top{display:grid;grid-template-columns:1.6fr .9fr;gap:2rem;padding-block:2.6rem 2rem}
.ba-footer-name{font-family:var(--font-title);font-size:1.15rem;font-weight:700;color:#FFFCF6;margin:.6rem 0 .5rem}
.ba-footer-about{font-size:.86rem;line-height:1.7;color:#B7AFA2;max-width:52ch;margin:0}
.ba-footer-col h2{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ocre);margin:0 0 .8rem;font-family:var(--font-text)}
.ba-footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.ba-footer-col a{color:#CFC7BA;font-size:.9rem;text-decoration:none;transition:color .18s,padding-left .18s}
.ba-footer-col a:hover{color:#FFFCF6;padding-left:.3rem}
.ba-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;padding-block:1.1rem 1.5rem;border-top:1px solid rgba(255,255,255,.09);font-size:.78rem;color:#8F877C}
.ba-footer-bottom p{margin:0}

/* ── Retour en haut ──────────────────────────────────────────────────────── */
.ba-top{position:fixed;right:1.1rem;bottom:1.1rem;z-index:900;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-2);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .28s,transform .28s,background .18s}
.ba-top.is-on{opacity:1;transform:none;pointer-events:auto}
.ba-top:hover{background:var(--wash);color:var(--accent-dark)}
.ba-top svg{width:19px;height:19px}

/* ── Easter egg ──────────────────────────────────────────────────────────── */
.ba-egg{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:1500;max-width:min(92vw,30rem);background:var(--ink);color:#F4EFE6;border-radius:var(--radius);padding:1rem 1.2rem;box-shadow:var(--shadow-3)}
.ba-egg-title{font-family:var(--font-title);font-size:1rem;font-weight:700;color:var(--ocre);margin:0 0 .35rem}
.ba-egg-txt{font-size:.85rem;line-height:1.6;color:#CFC7BA;margin:0}
html.ba-plan .ba-content h2,html.ba-plan .ba-content h3{outline:1px dashed var(--accent);outline-offset:5px}
html.ba-plan .ba-content a{background:var(--ocre-wash);box-shadow:0 0 0 2px var(--ocre)}
html.ba-plan img{outline:2px solid var(--blue);outline-offset:3px}
html.ba-plan .ba-fig{outline:2px dashed var(--green);outline-offset:4px}

/* ── Révélation au défilement ────────────────────────────────────────────── */
.reveal{opacity:1}
html.ba-anim .reveal{opacity:0;transform:translateY(22px)}
html.ba-anim .reveal.is-in{opacity:1;transform:none;transition:opacity .68s cubic-bezier(.2,.8,.3,1) var(--d,0ms),transform .68s cubic-bezier(.2,.8,.3,1) var(--d,0ms)}
html.ba-anim .ba-hero h1 .ba-w{opacity:0;transform:translateY(24px)}
html.ba-anim .ba-hero h1.is-in .ba-w{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.3,1) var(--d,0ms),transform .6s cubic-bezier(.2,.8,.3,1) var(--d,0ms)}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .ba-rubs{grid-template-columns:repeat(3,1fr)}
  .ba-cards-3{grid-template-columns:repeat(2,1fr)}
  .ba-post-body{grid-template-columns:1fr}
  .ba-sidebar{position:static;flex-direction:row;flex-wrap:wrap}
  .ba-sidebar .sidebar-widget{flex:1 1 260px}
  .ba-toc ol{columns:1}
}
@media (max-width:900px){
  .ba-hero-in,.ba-cat-head .ba-wrap,.ba-contact-in,.ba-404-in,.ba-footer-top{grid-template-columns:1fr}
  .ba-search{display:none}
  .ba-burger{display:block}
  .ba-nav{
    position:absolute;left:0;right:0;top:100%;margin:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-3);padding:1rem 1.2rem 1.3rem;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .26s,transform .26s,visibility .26s;
  }
  .ba-nav.is-open{opacity:1;visibility:visible;transform:none}
  .ba-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .ba-nav a{padding:.8rem .2rem;font-size:1.02rem;border-bottom:1px solid var(--line)}
  .ba-nav a::after{display:none}
  .ba-nav-search{display:flex;gap:.5rem;margin-top:1rem}
  .ba-nav-search input{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:.6rem .8rem;font:inherit;font-size:.92rem}
  .ba-nav-search button{border:0;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font:inherit;font-weight:700;padding:0 1rem;cursor:pointer}
  .ba-keys{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .ba-rubs,.ba-cards-3,.ba-cards-2,.ba-keys{grid-template-columns:1fr}
  .ba-fig{padding:1rem 1rem .9rem;border-radius:var(--radius)}
  .ba-content table{font-size:.86rem}
  .ba-content thead th,.ba-content tbody td{padding:.6rem .7rem}
  .ba-stats{gap:1.3rem}
  .ba-stats strong{font-size:1.75rem}
  .ba-content-count h2{gap:.55rem}
}

/* ── Mouvement réduit ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  html.ba-anim .reveal,html.ba-anim .ba-hero h1 .ba-w{opacity:1;transform:none}
  .ba-marquee-in{animation:none}
  .ba-cursor{display:none}
  .ba-caret{animation:none;opacity:1}
  html.ba-anim .ba-fig .ba-draw{stroke-dashoffset:0}
  html.ba-anim .ba-fig .ba-grow,html.ba-anim .ba-fig .ba-rise{transform:none}
  html.ba-anim .ba-fig .ba-pop{opacity:1}
}

/* ── Impression ──────────────────────────────────────────────────────────── */
@media print{
  .ba-header,.ba-footer,.ba-sidebar,.ba-top,.ba-progress,.ba-contact,.ba-game,.ba-marquee,.ba-cursor,.ba-crumbs,.ba-pagination,.ba-egg{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .ba-content{max-width:none}
  .ba-fig{break-inside:avoid;box-shadow:none;border:1px solid #ccc}
  a{color:#000;text-decoration:underline}
}