/* outil-reutilisable.css : l'outil « Réutilisable : à partir de quand ? » de
   @PS-OUTILS. Une seule feuille pour ses deux places : sa page
   (outil-reutilisable.html) et l'article du thème Pollution
   (apprendre/pollution.html). Là, build-hub.mjs reprend le formulaire et le
   résultat de la page, entre <!--RU:OUTIL--> et <!--/RU:OUTIL-->.

   Le préfixe est « ru- » et non « ob- » : bw-premium.css restyle les classes
   .ob-* avec plus de spécificité, et un fond changé sans sa couleur de texte
   donne du noir sur noir. Rien ici ne porte un nom qu'il connaît, ni « card »
   (une ancienne règle sombre visait [class*="card"]).
   Chaque règle commence par .ru-cadre. Dans l'article, bw-hub.css donne 17 px,
   une interligne de 1,7 et des marges à tous les paragraphes et toutes les
   puces de .hb-a-corps (spécificité 0,1,1). Avec ce préfixe (0,2,0), l'outil
   garde les siennes.
   Toutes les couleurs viennent de la palette premium (--bwp-*), avec leur
   valeur en secours. */

/* ── Le cadre. Sur sa page : une seule section, donc aucun écart de 256 px
   entre la tête et l'outil (128 + 128, le rythme entre deux sections). Une
   grille de deux colonnes, la même de haut en bas : à gauche ce qu'on lit et
   ce qu'on saisit, à droite ce qu'on voit. La mesure porte sur le cadre
   (requête de conteneur) : la barre latérale ouverte le rétrécit. ── */
.ru-cadre{padding:0 var(--bw-gouttiere,28px);container-type:inline-size}
/* Ni la page ni l'article n'ont de remise à zéro globale : sans elle, une
   hauteur minimale de 44 px plus ses marges faisait des boutons de 66 px. */
.ru-cadre *,.ru-cadre *::before,.ru-cadre *::after{box-sizing:border-box}
.ru-cadre [hidden]{display:none !important}
.ru-cadre .ru-grille{display:grid;grid-template-columns:minmax(0,1fr);row-gap:48px}
@container (min-width:900px){
  .ru-cadre .ru-grille{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,6cqi,96px);row-gap:88px;align-items:start}
  .ru-cadre .ru-col-res{position:sticky;top:104px}
}
.ru-cadre .ru-cache{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Surtitre : la famille unique de la base (9.5). */
.ru-cadre .ru-k{margin:0 0 16px;font-family:'Inter',system-ui,sans-serif;font-size:.875rem;font-weight:500;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--bwp-dore,#886B26)}

/* ── La tête de la page : alignée à gauche, comme le hub des outils ── */
.ru-cadre .crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 24px;font-size:.8125rem;color:var(--bwp-brun,#5E574B)}
.ru-cadre .crumb a{color:var(--bwp-brun,#5E574B);font-weight:500;text-decoration:none}
.ru-cadre .crumb a:hover{color:var(--bwp-encre,#0A1712);text-decoration:underline;text-underline-offset:3px}
.ru-cadre .ru-tete h1{margin:0;font-size:clamp(2.25rem,1.6rem + 2.4vw,3.5rem);line-height:1.06;color:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-lede{margin:24px 0 0;max-width:46ch;font-size:clamp(1.0625rem,1rem + .45vw,1.1875rem);line-height:1.6;color:var(--bwp-brun,#5E574B)}

/* ── Comment ça marche : deux courbes, un croisement. Aucun chiffre : c'est
   le principe, pas un résultat. ── */
.ru-cadre .ru-schema{margin:0}
.ru-cadre .ru-schema-in{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center}
@container (min-width:1180px){ .ru-cadre .ru-schema-in{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:40px} }
.ru-cadre .ru-schema svg{display:block;width:100%;max-width:380px;height:auto}
.ru-cadre .ru-s-axe{fill:none;stroke:var(--bwp-contour,#8C8370);stroke-width:1}
.ru-cadre .ru-s-j{fill:none;stroke:var(--bwp-dore,#886B26);stroke-width:2;stroke-linecap:round}
.ru-cadre .ru-s-r{fill:none;stroke:var(--bwp-encre,#0A1712);stroke-width:2.5;stroke-linecap:round}
.ru-cadre .ru-s-seuil{fill:none;stroke:var(--bwp-encre,#0A1712);stroke-width:1;stroke-dasharray:3 3}
.ru-cadre .ru-s-pt{fill:var(--bwp-encre,#0A1712);stroke:var(--bwp-beige,#F5F3EC);stroke-width:2}
.ru-cadre .ru-s-t{font-family:'Inter',system-ui,sans-serif;font-size:12px;fill:var(--bwp-brun,#5E574B)}
.ru-cadre .ru-s-t.ru-s-tj{fill:var(--bwp-dore-f,#6B5420);font-weight:600}
.ru-cadre .ru-s-t.ru-s-tr,.ru-cadre .ru-s-t.ru-s-ts{fill:var(--bwp-encre,#0A1712);font-weight:600}
.ru-cadre .ru-schema-p{margin:0;max-width:46ch;font-size:.9375rem;line-height:1.6;color:var(--bwp-encre,#0A1712)}

/* ── Les étapes : 1 et 2 à gauche, 3 à droite. Des h2 sur la page, des h3
   dans l'article : la famille est donc écrite ici, pas héritée. ── */
.ru-cadre .ru-outil{display:grid;gap:56px}
.ru-cadre .ru-etape{max-width:440px}
html.bw-premium .ru-cadre .ru-etape-t{display:flex;align-items:center;gap:12px;margin:0 0 24px;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;font-size:1.5rem;line-height:1.2;letter-spacing:0;color:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-num{display:inline-flex;flex:none;align-items:center;justify-content:center;width:28px;height:28px;background:var(--bwp-encre,#0A1712);color:#fff;font-family:'Inter',system-ui,sans-serif;font-size:.875rem;font-weight:600;line-height:1}

.ru-cadre .ru-champ{margin:0 0 28px;padding:0;border:0;min-width:0}
.ru-cadre .ru-champ:last-child{margin-bottom:0}
.ru-cadre .ru-lab{display:block;margin:0 0 10px;padding:0;font-size:1rem;font-weight:600;line-height:1.4;color:var(--bwp-encre,#0A1712)}
/* La légende d'un fieldset n'accepte pas sa marge du bas partout : en
   flottant, elle redevient un bloc ordinaire. */
.ru-cadre legend.ru-lab{float:left;width:100%}
.ru-cadre legend.ru-lab + *{clear:both}
.ru-cadre .ru-aide{display:block;max-width:none;margin:-4px 0 12px;font-size:.875rem;line-height:1.5;color:var(--bwp-brun,#5E574B)}
.ru-cadre p.ru-aide{margin:-8px 0 20px}

/* Les choix : des boutons, l'encre pour celui qui est pris. */
.ru-cadre .ru-opts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.ru-cadre .ru-opt{position:relative;display:flex;min-width:0}
.ru-cadre .ru-opt + .ru-opt{margin-left:-1px}
.ru-cadre .ru-opt input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ru-cadre .ru-opt-b{display:flex;flex:1;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 8px;background:var(--bwp-blanc,#fff);border:1px solid var(--bwp-contour,#8C8370);color:var(--bwp-encre,#0A1712);font-size:.9375rem;font-weight:500;line-height:1.3;text-align:center;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.ru-cadre .ru-opt input:hover + .ru-opt-b{position:relative;border-color:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-opt input:checked + .ru-opt-b{position:relative;background:var(--bwp-encre,#0A1712);border-color:var(--bwp-encre,#0A1712);color:#fff}
.ru-cadre .ru-opt input:focus-visible + .ru-opt-b{position:relative;outline:2px solid var(--bwp-encre,#0A1712);outline-offset:3px}
.ru-cadre .ru-objets{gap:12px}
.ru-cadre .ru-objets .ru-opt + .ru-opt{margin-left:0}
/* L'icône au-dessus du mot : côte à côte, « Une tasse » débordait sa
   colonne de 26 px à 320 px de large. */
.ru-cadre .ru-objets .ru-opt-b{flex-direction:column;gap:6px;min-height:88px;padding:12px 8px;font-size:1rem}
.ru-cadre .ru-opt-b svg{flex:none;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.ru-cadre .ru-select{display:block;width:100%;min-height:48px;margin:0;padding:10px 44px 10px 14px;-webkit-appearance:none;appearance:none;background:var(--bwp-blanc,#fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%230A1712' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/16px 16px;border:1px solid var(--bwp-contour,#8C8370);color:var(--bwp-encre,#0A1712);font:inherit;font-size:1rem;font-weight:500;line-height:1.3;cursor:pointer}
.ru-cadre .ru-select:hover{border-color:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-select:focus-visible{outline:2px solid var(--bwp-encre,#0A1712);outline-offset:2px}

/* Les nombres : moins, la valeur, plus. On peut aussi taper. */
.ru-cadre .ru-nombres{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:24px 32px}
.ru-cadre .ru-nombres .ru-champ{margin:0}
.ru-cadre .ru-pas{display:inline-flex;align-items:stretch;background:var(--bwp-blanc,#fff);border:1px solid var(--bwp-contour,#8C8370)}
.ru-cadre .ru-pas:focus-within{border-color:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-pas-b{display:flex;align-items:center;justify-content:center;width:48px;min-height:48px;margin:0;padding:0;background:none;border:0;color:var(--bwp-encre,#0A1712);cursor:pointer;transition:background-color .2s ease}
.ru-cadre .ru-pas-b:hover{background:var(--bwp-sable,#F0EBDC)}
.ru-cadre .ru-pas-b:focus-visible{outline:2px solid var(--bwp-encre,#0A1712);outline-offset:-2px}
.ru-cadre .ru-pas-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ru-cadre input.ru-in{width:72px;min-height:48px;margin:0;padding:0 6px;background:var(--bwp-blanc,#fff);border:0;border-left:1px solid var(--bwp-trait,#E2DCCC);border-right:1px solid var(--bwp-trait,#E2DCCC);color:var(--bwp-encre,#0A1712);font:inherit;font-size:1.125rem;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.ru-cadre input.ru-in:focus-visible{outline:2px solid var(--bwp-encre,#0A1712);outline-offset:-2px}
.ru-cadre .ru-err{display:block;margin:8px 0 0;font-size:.8125rem;font-weight:600;color:var(--bwp-rouge,#B31B1B)}
.ru-cadre .ru-prive{display:flex;align-items:center;gap:10px;max-width:none;margin:32px 0 0;padding:12px 16px;background:var(--bwp-sable,#F0EBDC);font-size:.875rem;line-height:1.5;color:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-prive svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── Le résultat : un chiffre d'abord, puis chaque étude. La colonne est son
   propre conteneur : le chiffre et les marges suivent SA largeur (733 px sur
   la page à 1 440, 320 dans l'article), pas celle de l'écran. ── */
.ru-cadre .ru-col-res{container-type:inline-size}
.ru-cadre .ru-res{background:var(--bwp-blanc,#fff);border-top:3px solid var(--bwp-encre,#0A1712);padding:32px clamp(20px,5cqi,40px) 36px}
.ru-cadre .ru-res-n{max-width:none;margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:clamp(2.5rem,1rem + 8cqi,4.5rem);line-height:1.05;letter-spacing:-.01em;color:var(--bwp-encre,#0A1712);font-variant-numeric:lining-nums}
.ru-cadre .ru-res-u{font-family:'Inter',system-ui,sans-serif;font-size:1.25rem;font-weight:500;letter-spacing:0;white-space:nowrap}
.ru-cadre .ru-res-p{max-width:40ch;margin:12px 0 0;font-size:1.0625rem;line-height:1.55;color:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-quand{max-width:none;margin:24px 0 0;padding:14px 18px;background:var(--bwp-sable,#F0EBDC);font-size:1rem;line-height:1.6;color:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-quand b{font-weight:600}

/* Une barre par étude, toutes sur la même échelle : le seuil le plus haut
   prend toute la largeur. Le gris va jusqu'au seuil, l'encre montre où en
   est la personne, les hachures dorées marquent une fourchette. */
.ru-cadre .ru-etudes{margin:32px 0 0;padding:28px 0 0;border-top:1px solid var(--bwp-trait,#E2DCCC)}
.ru-cadre .ru-barres{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.ru-cadre .ru-barres > li{max-width:none;margin:0;padding:0;font-size:1rem;line-height:1.5}
.ru-cadre .ru-barre-l{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:.9375rem;line-height:1.4;color:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-barre-v{flex:none;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ru-cadre .ru-ok{display:inline-block;margin-left:8px;padding:2px 7px;background:var(--bwp-encre,#0A1712);color:#fff;font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;vertical-align:2px}
.ru-cadre .ru-barre-p{position:relative;display:block;height:10px;margin:10px 0 8px}
.ru-cadre .ru-barre-p::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--bwp-trait,#E2DCCC)}
.ru-cadre .ru-b-seuil,.ru-cadre .ru-b-zone,.ru-cadre .ru-b-toi{position:absolute;top:0;bottom:0;left:0}
.ru-cadre .ru-b-seuil{background:var(--bwp-trait,#E2DCCC);border-right:2px solid var(--bwp-encre,#0A1712)}
.ru-cadre .ru-b-zone{background:repeating-linear-gradient(135deg,var(--bwp-dore,#886B26) 0 2px,transparent 2px 5px)}
.ru-cadre .ru-b-toi{background:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-barre-b{display:block;font-size:.8125rem;line-height:1.5;color:var(--bwp-brun,#5E574B)}
.ru-cadre .ru-legende{max-width:none;margin:20px 0 0;font-size:.8125rem;line-height:1.55;color:var(--bwp-brun,#5E574B)}
.ru-cadre .ru-autres{margin:28px 0 0}
.ru-cadre .ru-autres-t{max-width:none;margin:0 0 8px;font-size:.875rem;font-weight:600;line-height:1.4;color:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-autres ul{list-style:none;margin:0;padding:0}
.ru-cadre .ru-autres li{max-width:none;margin:0;padding:10px 0;border-top:1px solid var(--bwp-trait,#E2DCCC);font-size:.875rem;line-height:1.5;color:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-tous{margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--bwp-trait,#E2DCCC);font-size:.9375rem;line-height:1.6;color:var(--bwp-brun,#5E574B)}
.ru-cadre .ru-tous p{max-width:none;margin:0;font-size:inherit;line-height:inherit;color:inherit}
.ru-cadre .ru-tous b{font-weight:600;color:var(--bwp-encre,#0A1712)}

/* ── Le bas de la page : la phrase du PNUE, et la méthode repliée ── */
.ru-cadre .ru-citation{margin:0;padding:4px 0 4px 24px;border-left:2px solid var(--bwp-dore,#886B26)}
.ru-cadre .ru-citation p{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:clamp(1.25rem,1.05rem + .7vw,1.625rem);line-height:1.4;color:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-citation p.ru-cit-a{margin-top:16px;font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:.9375rem;line-height:1.5;color:var(--bwp-brun,#5E574B)}
.ru-cadre .ru-methode{margin:0;border-top:1px solid var(--bwp-encre,#0A1712);border-bottom:1px solid var(--bwp-trait,#E2DCCC)}
.ru-cadre .ru-methode summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;list-style:none;cursor:pointer;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;font-size:1.25rem;line-height:1.3;color:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-methode summary::-webkit-details-marker{display:none}
.ru-cadre .ru-methode summary::after{content:"+";flex:none;font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:1.5rem;line-height:1}
.ru-cadre .ru-methode[open] summary::after{content:"\2212"}
.ru-cadre .ru-methode summary:focus-visible{outline:2px solid var(--bwp-encre,#0A1712);outline-offset:2px}
.ru-cadre .ru-methode .ru-corps{max-width:68ch;padding:8px 0 28px;font-size:.9375rem;line-height:1.65;color:var(--bwp-brun,#5E574B)}
.ru-cadre .ru-methode h3{margin:24px 0 8px;font-family:'Inter',system-ui,sans-serif;font-size:.9375rem;font-weight:600;color:var(--bwp-encre,#0A1712)}
.ru-cadre .ru-methode h3:first-child{margin-top:8px}
.ru-cadre .ru-methode p{margin:0}
.ru-cadre .ru-methode ul{margin:0;padding-left:20px}
.ru-cadre .ru-methode li{margin-bottom:6px}
.ru-cadre .ru-methode a{color:var(--bwp-encre,#0A1712);text-underline-offset:3px}

/* ── Dans un article (build-hub.mjs) : ni gouttière, puisque l'article a la
   sienne ; deux colonnes égales dès 640 px ; rien de collant. ── */
.ru-cadre.ru-integre{margin:32px 0 0;padding:0}
@container (min-width:640px){
  .ru-cadre.ru-integre .ru-grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;row-gap:48px;align-items:start}
}
.ru-cadre.ru-integre .ru-outil{gap:40px}
.ru-cadre.ru-integre .ru-col-res{position:static}
html.bw-premium .ru-cadre.ru-integre .ru-etape-t{font-size:1.25rem}
.ru-cadre .ru-integre-pied{max-width:none;margin:32px 0 0;font-size:.9375rem;line-height:1.5}

html.bw-motion-off .ru-cadre *{transition:none !important}
@media (prefers-reduced-motion:reduce){ .ru-cadre *{transition:none !important} }
@media print{
  .ru-cadre .ru-col-res{position:static}
  .ru-cadre .ru-pas-b,.ru-cadre .ru-prive{display:none}
  .ru-cadre .ru-res{border:1px solid #000}
  .ru-cadre .ru-b-toi,.ru-cadre .ru-num,.ru-cadre .ru-opt input:checked + .ru-opt-b{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}