/* ==========================================================================
   Menu Scan — Blog
   --------------------------------------------------------------------------
   Feuille AUTONOME : les pages du blog sont copiées verbatim par Vite dans
   `dist/` et ne passent par aucun bundler. `src/styles/` n'est donc pas
   accessible depuis ici — les tokens ci-dessous sont la copie à l'identique
   de la section `:root` de `src/styles/base.css`. Toute divergence entre les
   deux fichiers est un bug visuel.
   ========================================================================== */

:root {
  --red: #DC2626;
  --red-h: #B91C1C;
  --red-lt: #FEE2E2;
  --red-glow: rgba(220,38,38,0.4);
  --bg: #0A0A0A;
  --bg2: #111111;
  --bg3: #161616;
  --bg4: #1C1C1C;
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --text: #FAFAFA;
  --text-secondary: #E5E5E5;
  --muted: #A3A3A3;
  --dim: #7A7A7A;
  --glass: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.08);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

@media (prefers-reduced-motion: no-preference) {
  html{scroll-behavior:smooth}
}

body{
  font-family:'Inter',sans-serif;
  color:var(--text);background:var(--bg);
  line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(220,38,38,0.2)
}

img{max-width:100%;height:auto;display:block}
a{color:var(--text)}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--red);outline-offset:3px;border-radius:8px
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--red);border-radius:2px}
::selection{background:rgba(220,38,38,.3);color:white}

/* --------------------------------------------------------------------------
   Structure
   -------------------------------------------------------------------------- */

.b-wrap{max-width:1200px;margin:0 auto;padding:0 32px}

.b-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,.7);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-bottom:1px solid var(--border)
}
.b-nav .b-wrap{display:flex;align-items:center;gap:16px;height:72px}

.b-logo{
  display:flex;align-items:center;gap:12px;margin-inline-end:auto;
  font-weight:800;font-size:1.15rem;letter-spacing:-.02em;
  text-decoration:none;color:var(--text)
}
.b-logo-icon{
  width:36px;height:36px;background:var(--red);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 20px rgba(220,38,38,.3);
  transition:box-shadow,transform .4s cubic-bezier(.34,1.56,.64,1)
}
.b-logo:hover .b-logo-icon{
  box-shadow:0 0 40px rgba(220,38,38,.6);transform:rotate(-10deg) scale(1.12)
}
.b-logo-icon svg{width:20px;height:20px;color:white}

.b-lang{
  display:flex;align-items:center;gap:2px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:8px;padding:2px
}
.b-lang-btn{
  background:transparent;color:var(--dim);border:none;
  padding:4px 8px;border-radius:6px;
  font:600 .75rem/1 'Inter',sans-serif;cursor:pointer;
  transition:color,background-color .2s ease
}
.b-lang-btn[aria-pressed="true"]{background:var(--red);color:#fff}
.b-lang-btn:hover[aria-pressed="false"]{color:var(--text-secondary);background:rgba(255,255,255,.05)}

/* Sélecteur de langue d'un ARTICLE : ce sont des liens (pas des boutons) car
   ils naviguent vers la traduction — l'interface ne change pas de langue. */
.b-lang-art{
  display:flex;align-items:center;gap:2px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:8px;padding:2px
}
.b-lang-art a{
  display:block;padding:4px 8px;border-radius:6px;
  font:600 .75rem/1 'Inter',sans-serif;text-decoration:none;
  color:var(--dim);background:transparent;
  transition:color,background-color .2s ease
}
.b-lang-art a:hover{color:var(--text-secondary);background:rgba(255,255,255,.05)}
.b-lang-art a[aria-current="true"]{background:var(--red);color:#fff}

.b-main{padding:56px 0 8px}

/** Footer (identique au site principal) **/
footer{background:#070707;border-top:1px solid var(--border);padding:40px 32px;position:relative}
footer::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(220,38,38,.3),transparent)
}
/* Neutralise le `body{line-height:1.6}` de cette feuille : sur index.html le
   footer hérite de `line-height:normal`. Sans cela les boîtes de ligne des
   liens (`::after` du soulignement) ne tombent pas au même endroit. */
footer{line-height:normal}
.f-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:.85rem;color:var(--dim)}
.f-logo{font-weight:800;color:white;font-size:1rem;display:flex;align-items:center;gap:10px;letter-spacing:-.02em}
.f-logo-icon{width:28px;height:28px;background:var(--red);border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(220,38,38,.3)}
.f-links{display:flex;gap:24px}
.f-links a{color:var(--dim);text-decoration:none;transition:color .3s ease;font-weight:500;position:relative}
.f-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--red);transition:width .3s ease}
.f-links a:hover{color:white}
.f-links a:hover::after{width:100%}
.f-credit{color:var(--red);transition:color .3s ease}
.f-credit:hover{color:var(--red-h)}
.f-credit:active{color:var(--red-h)}


/* --------------------------------------------------------------------------
   Hub
   -------------------------------------------------------------------------- */

.b-hero h1{
  font-size:clamp(2rem,5vw,3rem);line-height:1.1;
  letter-spacing:-.03em;font-weight:800;margin-bottom:16px
}
.b-hero p{color:var(--muted);font-size:1.0625rem;max-width:62ch}

.b-filters{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:32px 0 0;padding:0;list-style:none
}
.b-filter{
  background:var(--bg3);color:var(--muted);
  border:1px solid var(--border);border-radius:999px;
  padding:7px 14px;font:600 .8125rem/1.4 'Inter',sans-serif;
  cursor:pointer;transition:color,background-color,border-color .2s ease
}
.b-filter:hover{color:var(--text);border-color:var(--border-hover)}
.b-filter[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

.b-count{margin:28px 0 0;color:var(--dim);font-size:.875rem}

.b-list{
  list-style:none;margin:20px 0 0;padding:0;
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))
}

.b-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .3s ease,transform .3s cubic-bezier(.16,1,.3,1)
}
.b-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.b-card-img{aspect-ratio:16/9;background:var(--bg3);overflow:hidden}
.b-card-img img{width:100%;height:100%;object-fit:cover}
.b-card-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.b-card-cat{
  font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red)
}
.b-card h2{font-size:1.125rem;line-height:1.35;letter-spacing:-.01em}
.b-card h2 a{text-decoration:none}
.b-card h2 a:hover{color:var(--red)}
.b-card p{color:var(--muted);font-size:.9375rem}
.b-card .b-meta{margin-top:auto;padding-top:8px;color:var(--dim);font-size:.8125rem}

.b-empty{
  margin:20px 0 0;padding:48px 24px;text-align:center;
  border:1px dashed var(--border);border-radius:14px;
  color:var(--dim);background:var(--bg2)
}
.b-error{margin:20px 0 0;padding:24px;border-radius:14px;
  border:1px solid var(--red);color:var(--text-secondary);background:var(--bg2)}

/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */

.b-crumb{font-size:.875rem;color:var(--dim);margin-bottom:24px}
.b-crumb a{color:var(--muted);text-decoration:none}
.b-crumb a:hover{color:var(--text)}

.b-article{padding:48px 0 0;max-width:760px}
.b-article h1{
  font-size:clamp(1.875rem,4.5vw,2.75rem);line-height:1.15;
  letter-spacing:-.02em;font-weight:800;margin-bottom:16px
}
.b-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  color:var(--dim);font-size:.875rem;margin-bottom:28px
}
.b-meta-sep{color:var(--border-hover)}

.b-hero-img{
  margin:0 0 36px;border-radius:14px;overflow:hidden;
  border:1px solid var(--border);background:var(--bg3)
}
.b-hero-img img{width:100%;height:auto}

.b-body{font-size:1.0625rem;line-height:1.75;color:var(--text-secondary)}
.b-body>*+*{margin-top:1.25em}
.b-body h2{
  font-size:1.5rem;line-height:1.3;letter-spacing:-.01em;
  color:var(--text);margin-top:2em;font-weight:700
}
.b-body h3{font-size:1.1875rem;color:var(--text);margin-top:1.75em;font-weight:700}
.b-body p{text-wrap:pretty}
.b-body ul,.b-body ol{padding-inline-start:1.5em}
.b-body li+li{margin-top:.5em}
.b-body li::marker{color:var(--red)}
.b-body a{color:var(--red);text-underline-offset:3px}
.b-body a:hover{color:var(--text)}
.b-body strong{color:var(--text);font-weight:700}
.b-body blockquote{
  border-inline-start:3px solid var(--red);
  padding-inline-start:20px;color:var(--muted);font-style:italic
}
.b-body img{border-radius:10px;border:1px solid var(--border)}
.b-body figure{margin:0}
.b-body figcaption{margin-top:.5em;font-size:.8125rem;color:var(--dim)}
.b-body table{width:100%;border-collapse:collapse;font-size:.9375rem}
.b-body th,.b-body td{
  border:1px solid var(--border);padding:10px 12px;text-align:start
}
.b-body th{background:var(--bg2);color:var(--text);font-weight:700}

.b-cta{
  margin:48px 0 0;padding:28px;border-radius:14px;
  background:var(--bg2);border:1px solid var(--border)
}
.b-cta h2{font-size:1.25rem;letter-spacing:-.01em;margin-bottom:8px}
.b-cta p{color:var(--muted);font-size:.9375rem}
.b-cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.b-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 24px;border-radius:10px;
  font:600 .875rem/1 'Inter',sans-serif;text-decoration:none;
  background:var(--red);color:#fff;border:1px solid var(--red);
  transition:background-color .3s ease
}
.b-btn:hover{background:var(--red-h);border-color:var(--red-h)}
.b-btn-ghost{background:transparent;color:var(--text-secondary);border-color:var(--border-hover)}
.b-btn-ghost:hover{background:var(--bg3);color:#fff}

.b-back{
  display:inline-flex;align-items:center;gap:8px;
  margin:48px 0 0;color:var(--muted);
  font-size:.9375rem;text-decoration:none
}
.b-back:hover{color:var(--text)}

.b-nav-blog{
  color:var(--dim);text-decoration:none;
  font:600 .875rem/1 'Inter',sans-serif;
  transition:color .3s ease
}
.b-nav-blog:hover{color:var(--text)}

.article-excerpt{
  font-size:1.125rem;line-height:1.6;color:var(--text-secondary);
  margin-bottom:32px
}

/* Sommaire — construit par le moteur à partir des H2/H3 du corps */
.b-crumb .toc{margin-top:8px}
.b-toc-heading{
  font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);margin-bottom:8px
}
.b-crumb .toc ol{
  list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px
}
.b-crumb .toc li{margin:0}
.b-crumb .toc a{
  display:inline-block;padding:5px 10px;border-radius:999px;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--muted);font-size:.8125rem;text-decoration:none;
  transition:color,border-color .2s ease
}
.b-crumb .toc a:hover{color:var(--text);border-color:var(--border-hover)}

.b-pager{
  display:flex;flex-wrap:wrap;gap:16px;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--border)
}
.b-pager a{
  flex:1 1 240px;padding:16px 18px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--border);
  text-decoration:none;transition:border-color .3s ease
}
.b-pager a:hover{border-color:var(--border-hover)}
.b-pager .b-pager-kind{
  display:block;color:var(--dim);
  font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:6px
}
.b-pager .b-pager-title{display:block;color:var(--text);font-size:.9375rem}

.b-related{margin-top:48px}
.b-related h2{font-size:1.25rem;letter-spacing:-.01em;margin-bottom:16px}
.b-related ul{list-style:none;padding:0;display:grid;gap:12px}
.b-related a{
  display:block;padding:14px 16px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--border);
  text-decoration:none;transition:border-color .3s ease
}
.b-related a:hover{border-color:var(--border-hover)}

.b-faq{margin-top:48px}
.b-faq h2{font-size:1.25rem;letter-spacing:-.01em;margin-bottom:16px}
.b-faq details{
  border:1px solid var(--border);border-radius:12px;
  background:var(--bg2);padding:0 16px
}
.b-faq details+details{margin-top:10px}
.b-faq summary{
  cursor:pointer;padding:16px 0;font-weight:600;color:var(--text);
  list-style-position:inside
}
.b-faq details p{padding:0 0 16px;color:var(--muted)}

/* --------------------------------------------------------------------------
   Responsive — les animations sont supprimées ≤768px, comme sur le site
   principal (cf. src/styles/responsive.css).
   -------------------------------------------------------------------------- */

@media (max-width:768px){
  .b-wrap{padding:0 20px}
  .b-nav .b-wrap{height:64px;gap:12px}
  .b-logo{font-size:1rem;gap:8px}
  .b-logo-icon{width:30px;height:30px;border-radius:8px}
  .b-logo-icon svg{width:16px;height:16px}
.b-lang-btn{padding:4px 6px;font-size:.65rem;min-width:28px;text-align:center}
  .b-main{padding:36px 0 8px}
  .b-article{padding:32px 0 0}
  .b-list{grid-template-columns:1fr}
  .f-inner{flex-direction:column;text-align:center}
  .f-links{flex-wrap:wrap;justify-content:center}
  
    .b-card:hover{transform:none}
}

/* Le resserrement du footer (padding + corps de texte) est déclenché à 480px
   sur index.html, pas à 768px — cf. src/styles/responsive.css. */
@media (max-width:480px){
  footer{padding:28px 16px}
  .f-inner{font-size:.78rem;gap:12px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important
  }
}