/* ═══════════════════════════════════════════════════════════════
   bw-onglets.css, la page d'un thème en deux onglets : Information et Agir
   (Tristan, 11 oct.). Pilote sur Pollution : build-hub.mjs, constante ONGLETS.
   Chargée après bw-hub.css et bw-premium.css, seulement sur ces pages.
   · Les enjeux du thème pendent sous le titre, dans l'en-tête de la page.
   · La barre d'onglets prend toute la largeur, onglets au centre : collée sous
     l'en-tête du site sur grand écran (--hb-entete, mesurée par le script),
     fixée au bas de l'écran sous 960 px.
   · Information : l'article, et « Dans cet article » à droite qui suit la
     lecture (sous 1 000 px : replié en tête). Agir : sur toute la largeur.
   ═══════════════════════════════════════════════════════════════ */

/* l'en-tête : le titre, et ses enjeux en branches. Dès 1 000 px, les enjeux
   passent à droite du titre et du chapeau (Tristan, 11 oct.) ; dessous, ils
   suivent le titre. La ligne part de la première branche : ni racine, ni bout
   qui pend. */
.hb-a-tete .hb-a-arbre-tete{max-width:640px;margin:24px 0 40px}
.hb-a-tete .hb-a-arbre-tete ul{margin-left:4px}
.hb-a-arbre-tete li:first-child::before{top:22px}
.hb-a-arbre-tete li:only-child::before{display:none}
@media (min-width:1000px){
  .hb-avec-onglets .hb-a-tete .container{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"titre arbre" "lede arbre" "partage arbre";column-gap:72px;align-items:start}
  .hb-avec-onglets .hb-a-tete h1{grid-area:titre}
  .hb-avec-onglets .hb-a-tete .hb-lede{grid-area:lede}
  .hb-avec-onglets .hb-a-tete .hb-partage{grid-area:partage}
  .hb-avec-onglets .hb-a-tete .hb-a-arbre-tete{grid-area:arbre;align-self:center;margin:0}
}

/* la barre d'onglets */
.hb-onglets-barre{z-index:90;background:var(--bw-creme);border-bottom:1px solid var(--bw-trait)}
/* chaque onglet sa moitié : Information au centre de la gauche, Agir au
   centre de la droite (Tristan, 11 oct.) */
.hb-onglets{display:flex}
.hb-onglet{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-width:0;min-height:52px;padding:0 24px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--bw-gris);text-decoration:none;font:500 .8125rem/1 'Inter',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;transition:color .2s ease,border-color .2s ease}
.hb-onglet:hover{color:var(--bw-encre)}
.hb-onglet[aria-selected="true"]{color:var(--bw-encre);border-bottom-color:var(--bw-encre)}
.hb-panneau[hidden]{display:none}
.hb-panneaux{padding-top:48px}
@media (min-width:960px){
  .hb-onglets-barre{position:sticky;top:var(--hb-entete,72px)}
  .hb-a-onglets :is(.hb-a-sec,.hb-ag-k){scroll-margin-top:calc(var(--hb-entete,72px) + var(--hb-barre,53px) + 24px)}
  /* une vue du direct visée par l'adresse (#direct-annee) garde au-dessus d'elle la ligne « En direct » */
  .hb-a-onglets .hb-dr-vue{scroll-margin-top:calc(var(--hb-entete,72px) + var(--hb-barre,53px) + 84px)}
}
/* au téléphone : en bas de l'écran, à portée de pouce, chaque onglet sa moitié */
@media (max-width:959px){
  .hb-onglets-barre{position:fixed;left:0;right:0;bottom:0;border-top:1px solid var(--bw-trait);border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  .hb-onglet{min-height:56px;padding:0 8px;margin:-1px 0 0;border-bottom:0;border-top:2px solid transparent}
  .hb-onglet[aria-selected="true"]{border-top-color:var(--bw-encre)}
  body.hb-avec-onglets{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* Information : l'article, et à droite ce qui aide à s'y retrouver */
.hb-a-onglets .hb-a-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:64px}
.hb-a-cote .hb-a-sommaire{padding:0;border:0}
.hb-a-cote .hb-a-sommaire ol{columns:1}
@media (min-width:1000px){
  .hb-a-onglets .hb-a-grille{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:none;column-gap:72px;align-items:start}
  .hb-a-onglets .hb-a-corps{grid-column:1;grid-row:auto}
  .hb-a-cote{grid-column:2;position:sticky;top:calc(var(--hb-entete,72px) + var(--hb-barre,53px) + 24px);max-height:calc(100vh - var(--hb-entete,72px) - var(--hb-barre,53px) - 48px);overflow:auto}
  .hb-a-sommaire-tel{display:none}
}
@media (max-width:999px){.hb-a-cote{display:none}}
/* Où l'on est dans l'article (Tristan, 11 oct.) : un rail fin le long du
   sommaire ; la section en cours de lecture y est marquée d'un trait d'encre
   et passe en gras (classe est-la, posée par le script des onglets). */
.hb-a-cote .hb-a-sommaire ol{border-left:1px solid var(--bw-trait)}
.hb-a-cote .hb-a-sommaire li{position:relative;padding:5px 0 5px 16px}
.hb-a-cote .hb-a-sommaire a{color:var(--bw-gris);transition:color .2s ease}
.hb-a-cote .hb-a-sommaire a:hover{color:var(--bw-encre)}
.hb-a-cote .hb-a-sommaire li.est-la::before{content:"";position:absolute;left:-1px;top:4px;bottom:4px;width:2px;background:var(--bw-encre)}
.hb-a-cote .hb-a-sommaire li.est-la a{color:var(--bw-encre);font-weight:600}
.hb-a-sommaire-tel li.est-la a{font-weight:600}
@media (prefers-reduced-motion:reduce){.hb-a-cote .hb-a-sommaire a{transition:none}}
html.bw-motion-off .hb-a-cote .hb-a-sommaire a{transition:none}
/* L'article prend la largeur (Tristan, 11 oct. : « pas assez visuel, dur à
   lire ») : le texte garde ses 68 caractères, calé à gauche ; chiffres, cartes,
   graphiques et encadrés s'étendent jusqu'au sommaire. Plus d'air entre les
   sections, et leur première phrase plus grande et plus légère : on sait où
   l'on va avant d'entrer dans le détail. */
.hb-a-onglets .hb-a-corps{max-width:none}
.hb-a-onglets .hb-a-sec>:is(h2,p,.hb-a-liste,.hb-a-chrono,.hb-a-cit){max-width:68ch}
.hb-a-onglets .hb-a-sec{margin-top:clamp(72px,8vw,112px)}
.hb-a-onglets .hb-a-corps>.hb-a-sec:first-child{margin-top:0}
.hb-a-onglets .hb-a-corps .hb-a-intro{font-size:clamp(1.1875rem,1.7vw,1.375rem);font-weight:300;line-height:1.55}
@media (min-width:1100px){.hb-a-onglets :is(.hb-a-sec:not(.hb-a-cas),.hb-es-vue)>.hb-a-chiffres{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* L'essentiel ouvre l'article : sur deux colonnes dès que la place le permet */
.hb-a-onglets .hb-a-essentiel .hb-a-liste{max-width:none}
/* Ses deux vues (Tristan, 13 oct.) : le titre à gauche, la flèche à droite,
   comme « En direct » ; la vue en chiffres reprend les cases des chiffres clés. */
.hb-es-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 24px}
.hb-a-sec .hb-es-tete h2{margin:0}
.hb-es-vue>.hb-a-chiffres{margin:0}
/* Au téléphone, les chiffres clés passent à deux colonnes (bw-premium.css) ;
   dans la boîte de L'essentiel, déjà rentrée, elles n'ont plus la place : une. */
@media (max-width:767px){html.bw-premium .hb-es-vue>.hb-a-chiffres{grid-template-columns:minmax(0,1fr)!important}}
@media (min-width:760px){
  .hb-a-onglets .hb-a-essentiel .hb-a-liste{columns:2;column-gap:56px}
  .hb-a-onglets .hb-a-essentiel .hb-a-liste li{break-inside:avoid}
}
.hb-a-sommaire-tel{margin:0 0 40px;border-top:1px solid var(--bw-trait-2);border-bottom:1px solid var(--bw-trait-2)}
.hb-a-sommaire-tel summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;cursor:pointer;list-style:none;font:500 .75rem/1.5 'Inter',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--bw-encre)}
.hb-a-sommaire-tel summary::-webkit-details-marker{display:none}
.hb-a-sommaire-tel summary::after{content:"+";font:300 1.375rem/1 'Inter',system-ui,sans-serif;letter-spacing:0}
.hb-a-sommaire-tel[open] summary::after{content:"\2212"}
.hb-a-sommaire-tel ol{margin:0 0 16px;padding:0;list-style:none}
.hb-a-sommaire-tel li{padding:4px 0;font-size:.9375rem;line-height:1.5}
.hb-a-sommaire-tel a{color:var(--bw-encre);text-decoration:none}
.hb-a-sommaire-tel a:hover{text-decoration:underline;text-underline-offset:3px}
.hb-a-vers-agir{margin:48px 0 0}

/* Agir (Tristan, 11 oct. : la proposition « Visuel », retenue entre trois). En
   tête, le titre et sa phrase, et à droite le compteur des gestes. Chaque geste
   est une carte à cocher, avec son pictogramme, qui passe à l'encre une fois
   cochée (classe .on, posée par le script des gestes). Les outils BetterWorld
   sont en cartes, « Ailleurs » et les solutions en rangées, l'état de chaque
   solution en pastille. Puis les outils, comme avant. */
.hb-ag-tete{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:end;margin:0 0 64px}
@media (min-width:900px){.hb-ag-tete{grid-template-columns:minmax(0,1fr) 320px;gap:72px}}
.hb-a-action .hb-ag-titre h2{margin:0 0 20px;font:700 clamp(2rem,3.4vw,2.75rem)/1.1 'Bricolage Grotesque',system-ui,sans-serif;color:var(--bw-encre)}
.hb-a-action .hb-ag-titre p{max-width:62ch;margin:0 0 12px;font-size:1.1875rem;font-weight:300;line-height:1.6;color:var(--bw-encre)}
.hb-ag-compteur{padding:28px;background:var(--bw-blanc);border:1px solid var(--bw-trait)}
.hb-ag-compteur p{max-width:none;margin:0}
.hb-ag-n{font:600 4rem/1 'Playfair Display',Georgia,serif;font-variant-numeric:lining-nums tabular-nums;color:var(--bw-encre)}
.hb-ag-sur{font-size:2rem;color:var(--bw-trait-2)}
.hb-a-action .hb-ag-compteur .hb-ag-l{margin-top:8px;font-size:.9375rem;line-height:1.4;color:var(--bw-gris)}
.hb-ag-barre{display:block;height:8px;margin-top:18px;background:var(--bw-trait)}
.hb-ag-barre span{display:block;width:0;height:100%;background:var(--bw-encre);transition:width .3s ease}
.hb-a-action .hb-ag-compteur .hb-ag-aide{margin-top:12px;font-size:.8125rem;line-height:1.4;color:var(--bw-gris)}
.hb-ag-k{margin:72px 0 20px}
.hb-ag-tete+.hb-ag-k{margin-top:0}
/* les gestes : des cases jointes par un filet, comme les cartes de l'article */
.hb-ag-gestes{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;margin:0;padding:0;list-style:none;background:var(--bw-trait-2);border:1px solid var(--bw-trait-2)}
@media (min-width:560px){.hb-ag-gestes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.hb-ag-4{grid-template-columns:repeat(4,minmax(0,1fr))}.hb-ag-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hb-ag-gestes li{display:flex;max-width:none;margin:0}
/* un nombre impair de gestes sur deux colonnes : le dernier prend la rangée,
   sinon la case vide montre le fond du filet en aplat (cinq gestes : Ressources,
   Société, Paix et sécurité). Sur trois colonnes, chacun reprend sa case. */
@media (min-width:560px){.hb-ag-gestes li:last-child:nth-child(odd){grid-column:1 / -1}}
@media (min-width:1000px){.hb-ag-3 li:last-child:nth-child(odd){grid-column:auto}}
.hb-ag-geste{position:relative;display:flex;flex-direction:column;gap:10px;width:100%;padding:26px 24px;background:var(--bw-creme);cursor:pointer;transition:background-color .2s ease}
.hb-ag-geste:not(.on):hover{background:var(--bw-blanc)}
.hb-ag-ic{display:block;width:34px;height:34px;color:var(--bw-encre)}
.hb-ag-ic svg,.hb-ag-ok svg{display:block;width:100%;height:100%}
.hb-ag-t{padding-right:36px;font-weight:600;font-size:1.0625rem;line-height:1.35;color:var(--bw-encre)}
.hb-ag-d{font-size:.875rem;line-height:1.55;color:var(--bw-gris)}
/* la case : la vraie case à cocher (clavier, lecteur d'écran), dessinée carrée */
.hb-ag-geste input{position:absolute;top:20px;right:20px;width:26px;height:26px;margin:0;-webkit-appearance:none;appearance:none;border:1.5px solid var(--bw-trait-2);border-radius:2px;background:transparent;cursor:pointer}
.hb-ag-geste input:checked{border-color:var(--bw-encre);background:var(--bw-encre)}
.hb-ag-ok{position:absolute;top:20px;right:20px;display:none;width:26px;height:26px;padding:3px;box-sizing:border-box;color:var(--bw-creme);pointer-events:none}
.hb-ag-geste input:checked~.hb-ag-ok{display:block}
.hb-ag-geste.on{background:var(--bw-encre);--bw-focus:var(--bw-creme)}
.hb-ag-geste.on :is(.hb-ag-ic,.hb-ag-t){color:var(--bw-creme)}
.hb-ag-geste.on .hb-ag-d{color:color-mix(in srgb,var(--bw-creme) 72%,transparent)}
.hb-ag-geste.on input:checked{border-color:var(--bw-creme);background:var(--bw-creme)}
.hb-ag-geste.on .hb-ag-ok{color:var(--bw-encre)}
/* les outils BetterWorld : les cartes de l'article, chaque case un lien */
.hb-ag-bw li{display:flex;max-width:none;margin:0;background:var(--bw-creme)}
.hb-ag-carte{display:flex;flex-direction:column;gap:12px;width:100%;padding:28px;color:var(--bw-encre);text-decoration:none;transition:background-color .2s ease}
.hb-ag-carte:hover{background:var(--bw-blanc)}
.hb-ag-carte .hb-a-carte-p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--bw-gris)}
/* ailleurs et les solutions : deux colonnes de rangées */
.hb-ag-deux{display:grid;grid-template-columns:minmax(0,1fr);gap:0 72px}
@media (min-width:1000px){.hb-ag-deux{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hb-ag-rangs{margin:0;padding:0;list-style:none;border-top:1px solid var(--bw-encre)}
.hb-ag-rangs li{max-width:none;margin:0;border-bottom:1px solid var(--bw-trait)}
.hb-ag-rang{display:block;padding:18px 0;color:var(--bw-encre);text-decoration:none}
.hb-ag-rt{display:block;font-weight:600;font-size:1rem;line-height:1.4}
.hb-ag-rang:hover .hb-ag-rt{text-decoration:underline;text-underline-offset:3px}
.hb-ag-rd{display:block;margin-top:4px;font-size:.875rem;line-height:1.55;color:var(--bw-gris)}
.hb-ag-rm{display:block;margin-top:8px;font-size:.75rem;font-weight:500;line-height:1.4;letter-spacing:.04em;color:var(--bw-or)}
.hb-ag-etat{display:inline-block;margin-bottom:10px;padding:5px 9px;border-radius:2px;font-size:.6875rem;font-weight:600;line-height:1;letter-spacing:.14em;text-transform:uppercase}
.hb-ag-fait{background:var(--bw-encre);color:var(--bw-creme)}
.hb-ag-cours{background:var(--bw-or);color:var(--bw-blanc)}
.hb-ag-proto{background:var(--bw-trait);color:var(--bw-encre)}
/* les outils, après : leurs paragraphes au corps de l'article */
.hb-a-action .hb-a-sec{margin-top:96px}
.hb-a-action .hb-a-sec p{margin:0 0 16px;font-size:1.0625rem;line-height:1.7;color:var(--bw-encre)}
.hb-a-action .hb-a-sec p a{color:var(--bw-encre);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){:is(.hb-ag-geste,.hb-ag-carte,.hb-ag-barre span){transition:none}}
html.bw-motion-off :is(.hb-ag-geste,.hb-ag-carte,.hb-ag-barre span){transition:none}

@media (prefers-reduced-motion:reduce){.hb-onglet{transition:none}}
html.bw-motion-off .hb-onglet{transition:none}