/* ===== DTG Lab — pont entre Bootstrap 5.3 et la charte du site =====
   Ordre de chargement attendu :
     1. /assets/vendor/bootstrap/bootstrap.min.css
     2. /assets/fonts.css
     3. /assets/style.css
     4. /assets/bootstrap-theme.css   (ce fichier, en dernier)

   1) Les variables --bs-* pointent vers les jetons du site (--bg, --ink,
      --accent…). Comme ces jetons changent déjà en mode sombre dans
      style.css, les composants Bootstrap suivent automatiquement.
   2) Quelques classes du site portent le même nom qu'une classe Bootstrap
      (.row, .card, .col, .btn, .lead, .small) : on neutralise ici les effets
      indésirables dans les articles existants.
*/

:root{
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--ink);
  --bs-body-font-family:"Newsreader",Georgia,serif;
  --bs-secondary-color:var(--ink-soft);
  --bs-tertiary-color:var(--ink-faint);
  --bs-secondary-bg:var(--surface-2);
  --bs-tertiary-bg:var(--surface-2);
  --bs-emphasis-color:var(--ink);
  --bs-border-color:var(--line);
  --bs-border-color-translucent:var(--line);
  --bs-link-color:var(--accent);
  --bs-link-hover-color:var(--accent);
  --bs-code-color:var(--ink);
  --bs-heading-color:var(--ink);
  --bs-primary:var(--accent);
  --bs-focus-ring-color:color-mix(in srgb,var(--accent) 35%,transparent);
  --bs-border-radius:11px;
  --bs-border-radius-lg:14px;
  --bs-border-radius-pill:50rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){color-scheme:dark}
}
:root[data-theme="dark"]{color-scheme:dark}

/* Bootstrap lit les couleurs de lien via des triplets RGB : on force la couleur directe */
a{color:var(--accent)}
a:hover{color:var(--accent)}

/* ---------- Conflits de noms dans les articles existants ---------- */

/* .row (Fiche express) : Bootstrap en fait une ligne de grille flex à marges négatives */
.fiche .row{display:block;margin:0;--bs-gutter-x:0;--bs-gutter-y:0}
.fiche .row>*{width:auto;max-width:none;padding:0;margin-top:0}
.fiche dt{font-weight:400}

/* .card (maker / taker) : on garde la boîte du site */
.mt .card{display:block;--bs-card-bg:var(--surface);color:inherit}

/* .col (avantages / inconvénients) : neutralise le flex de grille */
.pc .col{flex:none;width:auto}

/* .lead : Bootstrap passe la graisse à 300, absente des polices du site */
.lead{font-weight:inherit}

/* .btn (encadré CTA) : Bootstrap ajoute bordure, couleurs de survol et transitions */
.cta a.btn{border:0;line-height:1.4}
.cta a.btn:hover,.cta a.btn:active{background:var(--accent);color:#fff;opacity:.92}

/* ---------- Composants Bootstrap aux couleurs du site ---------- */

.btn-primary{
  --bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:var(--accent);--bs-btn-hover-border-color:var(--accent);
  --bs-btn-active-bg:var(--accent);--bs-btn-active-border-color:var(--accent);
  --bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;
  font-family:"Sora",system-ui,sans-serif;font-weight:600;
}
.btn-primary:hover{opacity:.92}

/* ===================== Barre de navigation commune ===================== */

/* la barre reste collée en haut : les ancres (#sommaire, #articles…) s'arrêtent sous elle */
html{scroll-padding-top:calc(4.5rem + env(safe-area-inset-top,0px))}
h2.sec{scroll-margin-top:0}

/* Barre de navigation */
.site-nav{
  --bs-navbar-color:var(--ink-soft);
  --bs-navbar-hover-color:var(--accent);
  --bs-navbar-active-color:var(--accent);
  --bs-navbar-brand-color:var(--ink);
  --bs-navbar-brand-hover-color:var(--ink);
  --bs-navbar-toggler-border-color:var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding-block:.7rem;
  top:env(safe-area-inset-top,0px);
}
.site-nav .brand{padding:0;margin-right:1rem}
/* rubrique de l'article affiché */
.site-nav .nav-link.active{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45em}
.site-nav .nav-link{font-family:"Sora",system-ui,sans-serif;font-weight:500;font-size:.95rem}
.site-nav .navbar-toggler{padding:.35rem .55rem}
.site-nav .navbar-toggler:focus{box-shadow:0 0 0 3px var(--accent-soft)}
/* icône « burger » dessinée dans la couleur du texte (lisible en clair comme en sombre) */
.site-nav .navbar-toggler-icon{
  background-image:none;background-color:var(--ink);
  -webkit-mask:var(--bs-navbar-toggler-icon-bg) center/100% no-repeat;
  mask:var(--bs-navbar-toggler-icon-bg) center/100% no-repeat;
}
.site-nav .lang{align-items:center}
@media (max-width:767.98px){
  .site-nav .navbar-collapse{padding-top:.6rem}
  .site-nav .lang{padding-block:.5rem}
}

.home-v2 .container{--bs-gutter-x:2.5rem}
.home-v2 .home-hero{margin-bottom:.5rem}

/* Avant-propos */
.avant-propos .ap-body{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 14px 14px 0;box-shadow:var(--shadow);padding:1.4rem 1.6rem;
}
.avant-propos .ap-body p{margin:0 0 .9rem;color:var(--ink-soft);max-width:62ch}
.avant-propos .ap-intro{font-size:1.15rem;color:var(--ink)!important}
.avant-propos .ap-sign{margin:0!important;font-style:italic;color:var(--ink-faint)!important}

/* Sélecteur de rubriques */
.rubriques{display:flex;flex-wrap:wrap;gap:.5rem}
.rubrique{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);
  padding:.5em .95em;border-radius:50rem;
}
.rubrique:hover{border-color:var(--accent);color:var(--accent)}
.rubrique:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.rubrique[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.rubrique .n{
  font-size:.66rem;min-width:1.5em;text-align:center;padding:.1em .45em;border-radius:50rem;
  background:var(--surface-2);color:var(--ink-faint);
}
.rubrique .n:empty{display:none}
.rubrique[aria-pressed="true"] .n{background:rgba(255,255,255,.22);color:#fff}
.rubrique-etat{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-faint);margin:.8rem 0 1rem;min-height:1.2em}

/* Dernier article (à la une) */
.dernier{margin-bottom:.5rem}
.post-une{border-top:3px solid var(--accent);padding:1.6rem 1.8rem}
.post-une h3{font-size:clamp(1.35rem,3vw,1.7rem);line-height:1.2;margin-bottom:.6rem}
.post-une p{font-size:1.05rem;max-width:60ch}

/* Cartes d'articles en grille */
.liste-articles .post{display:flex;flex-direction:column}
.liste-articles .post h3{font-size:1.15rem;line-height:1.3}
.liste-articles .post p{font-size:.95rem;line-height:1.5}
.liste-articles .post .more{margin-top:auto;padding-top:.9rem}

/* Colonne latérale */
.home-v2 .support{margin-top:0}
@media (min-width:992px){
  .home-v2 .side-sticky{position:sticky;top:calc(5.5rem + env(safe-area-inset-top,0px));margin-top:3.6rem}
}
@media (max-width:991.98px){
  .home-v2 aside .support{margin-top:1rem}
}
/* animation activée seulement après le premier filtrage (évite un fondu au chargement) */
.rubriques.pret .rubrique{transition:border-color .12s,background .12s,color .12s}
@media (prefers-reduced-motion:reduce){.rubriques.pret .rubrique{transition:none}}

/* ===================== Pages d'article et pages légales ===================== */

.container{--bs-gutter-x:2.5rem}
.page{padding-bottom:1rem}
/* l'ancienne colonne .wrap faisait 760 px : la colonne d'article garde une largeur de lecture confortable */
.article-col{max-width:800px}
.page .art-hero{padding-top:2.2rem}

/* Colonne de droite : sommaire qui suit le défilement */
.article-side{position:sticky;top:calc(5.5rem + env(safe-area-inset-top,0px));padding-top:2.6rem;max-height:calc(100vh - 6rem);overflow-y:auto}
.toc-side .lbl{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .6rem}
.toc-side .nav{border-left:1px solid var(--line)}
.toc-side .nav-link{
  display:flex;gap:.55rem;padding:.38rem 0 .38rem .9rem;margin-left:-1px;border-left:2px solid transparent;
  font-family:"Sora",system-ui,sans-serif;font-size:.84rem;line-height:1.35;color:var(--ink-soft);
}
.toc-side .nav-link .n{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-faint);padding-top:.1em}
.toc-side .nav-link:hover{color:var(--accent)}
.toc-side .nav-link.active{color:var(--accent);border-left-color:var(--accent);font-weight:600}
.toc-side .nav-link.active .n{color:var(--accent)}
.side-links{display:flex;flex-direction:column;gap:.4rem;margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:.74rem}
.side-links a{color:var(--ink-faint);text-decoration:none}
.side-links a:hover{color:var(--accent)}

/* Bloc de don dans la colonne de droite des articles (en plus du bloc avant les Sources) */
.article-side .support{margin:1.4rem 0 0;padding:1rem 1.1rem}
.article-side .support .support-title{font-size:1rem}
.article-side .support p{font-size:.85rem;margin:.3rem 0 .8rem}
.article-side .support .btn-don{font-size:.88rem;padding:.6rem 1rem}
.article-side .support .fine{font-size:.72rem;margin-top:.7rem}