/* outil-environnement.css : comparateur d'impact environnemental.
   Prefixe .ev-cadre partout : bw-premium.css restyle les classes avec plus de
   specificite, et un prefixe a soi est la seule protection fiable.
   Palette : UNIQUEMENT les --bwp-* de bw-premium (regle 7 de @SITE).

   PARTI PRIS VISUEL : aucune hierarchie de couleur entre les trois paliers.
   Un palier 3 n'est pas « moins bon » qu'un palier 1, il est plus conditionnel.
   Le sens est porte par le TEXTE de l'etiquette, jamais par une teinte, sinon la
   page classerait les comparaisons alors qu'elle existe pour refuser de classer. */

.ev-cadre{padding:0 var(--bw-gouttiere,28px);container-type:inline-size}
/* Sans remise a zero locale, une hauteur minimale de 44 px plus ses marges
   fabrique des boutons de 66 px : la page n'en a pas de globale. */
.ev-cadre *,.ev-cadre *::before,.ev-cadre *::after{box-sizing:border-box}
.ev-cadre [hidden]{display:none !important}
.ev-cadre .ev-grille{display:grid;grid-template-columns:minmax(0,1fr);row-gap:56px}
.ev-cadre .ev-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}

/* ── Tete ── */
.ev-cadre .crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 24px;font-size:.8125rem;color:var(--bwp-brun,#5E574B)}
.ev-cadre .crumb a{color:var(--bwp-brun,#5E574B);font-weight:500;text-decoration:none}
.ev-cadre .crumb a:hover{color:var(--bwp-encre,#0A1712);text-decoration:underline;text-underline-offset:3px}
.ev-cadre .ev-tete h1{margin:0;font-size:clamp(2.25rem,1.6rem + 2.4vw,3.5rem);line-height:1.06;color:var(--bwp-encre,#0A1712)}
.ev-cadre .ev-lede{margin:24px 0 0;max-width:48ch;font-size:clamp(1.0625rem,1rem + .45vw,1.1875rem);line-height:1.6;color:var(--bwp-brun,#5E574B)}
.ev-cadre .ev-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)}

/* ── « Impact sur quoi » : la question qui passe avant toutes les autres ── */
.ev-cadre .ev-quoi{padding:28px;border:1px solid var(--bwp-encre,#0A1712);background:var(--bwp-encre,#0A1712);color:#fff;border-radius:2px}
.ev-cadre .ev-quoi h2{margin:0;font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);line-height:1.2;color:#fff}
.ev-cadre .ev-quoi p{margin:16px 0 0;max-width:62ch;font-size:1rem;line-height:1.65;color:#fff;opacity:.92}
.ev-cadre .ev-quoi strong{color:#fff;font-weight:700;opacity:1}

/* ── Le filtre : une vue, pas un jugement ── */
.ev-cadre .ev-filtre{display:flex;flex-wrap:wrap;gap:8px}
.ev-cadre .ev-filtre-t{margin:0 0 12px;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--bwp-brun,#5E574B)}
/* Une carte qui manque doit se VOIR, pas seulement s'entendre : ce compteur est
   annonce ET affiche. Une page qui en montrerait six sur sept en silence serait
   pire que l'erreur de donnees qui l'a causee. */
.ev-cadre .ev-compte{margin:14px 0 28px;font-size:.875rem;line-height:1.5;color:var(--bwp-brun,#5E574B)}
.ev-cadre .ev-f{min-height:44px;padding:10px 16px;font:inherit;font-size:.9375rem;font-weight:500;color:var(--bwp-encre,#0A1712);background:var(--bwp-blanc,#FFF);border:1px solid var(--bwp-contour,#8C8370);border-radius:999px;cursor:pointer}
.ev-cadre .ev-f:hover{border-color:var(--bwp-encre,#0A1712)}
.ev-cadre .ev-f[aria-pressed="true"]{background:var(--bwp-encre,#0A1712);border-color:var(--bwp-encre,#0A1712);color:#fff}
.ev-cadre .ev-f:focus-visible{outline:3px solid var(--bwp-encre,#0A1712);outline-offset:2px}

/* ── Une carte de comparaison ── */
.ev-cadre .ev-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin:0;padding:0;list-style:none}
.ev-cadre .ev-c{padding:clamp(20px,3cqi,32px);background:var(--bwp-blanc,#FFF);border:1px solid var(--bwp-trait,#E2DCCC);border-radius:2px}
.ev-cadre .ev-c-tete{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between}
.ev-cadre .ev-c h3{margin:0;max-width:34ch;font-size:clamp(1.1875rem,1.1rem + .5vw,1.4375rem);line-height:1.2;color:var(--bwp-encre,#0A1712)}
.ev-cadre .ev-c-q{margin:10px 0 0;max-width:56ch;font-size:.9375rem;line-height:1.6;color:var(--bwp-brun,#5E574B)}

/* Les deux etiquettes. Meme traitement : le texte porte le sens. */
.ev-cadre .ev-tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.ev-cadre .ev-tag{display:inline-block;padding:5px 11px;font-size:.78125rem;font-weight:600;line-height:1.3;color:var(--bwp-brun,#5E574B);background:var(--bwp-sable,#F0EBDC);border:1px solid var(--bwp-trait,#E2DCCC);border-radius:2px}
.ev-cadre .ev-tag b{font-weight:700;color:var(--bwp-encre,#0A1712)}

/* Les lignes de resultat */
.ev-cadre .ev-lignes{margin:24px 0 0;border-top:1px solid var(--bwp-trait,#E2DCCC)}
.ev-cadre .ev-l{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0;border-bottom:1px solid var(--bwp-trait,#E2DCCC)}
@container (min-width:620px){
  .ev-cadre .ev-l{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:8px 24px;align-items:baseline}
  .ev-cadre .ev-l-v{text-align:right}
}
.ev-cadre .ev-l-lib{min-width:0;font-size:.9375rem;line-height:1.5;color:var(--bwp-encre,#0A1712)}
.ev-cadre .ev-l-v{min-width:0;font-size:1.0625rem;font-weight:700;line-height:1.35;color:var(--bwp-encre,#0A1712);font-variant-numeric:tabular-nums}
.ev-cadre .ev-l-v .ev-u{font-weight:500;color:var(--bwp-brun,#5E574B)}
.ev-cadre .ev-l-marque{display:block;margin-top:3px;font-size:.78125rem;font-weight:500;color:var(--bwp-brun,#5E574B)}
.ev-cadre .ev-l-mot{font-weight:600;font-size:.9375rem}

/* Notre lecture : separee de la source, et nommee comme telle */
.ev-cadre .ev-nous{margin:24px 0 0;padding:16px 20px;background:var(--bwp-sable,#F0EBDC);border-left:3px solid var(--bwp-dore,#886B26);border-radius:0 2px 2px 0}
.ev-cadre .ev-nous-t{margin:0 0 6px;font-size:.78125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bwp-dore-f,#6B5420)}
/* PIEGE, et je me le suis fait a moi-meme : « .ev-nous p » vaut (0,2,1) et
   ecrasait « .ev-nous-t » a (0,2,0), qui perdait sa taille ET son dore. Le
   :not() fait que les deux regles ne se disputent plus le meme element, ce qui
   vaut mieux que de surencherir en specificite. */
.ev-cadre .ev-nous p:not(.ev-nous-t){margin:0;max-width:62ch;font-size:.9375rem;line-height:1.65;color:var(--bwp-encre,#0A1712)}

/* Ce que l'etude precise elle-meme */
.ev-cadre .ev-res{margin:20px 0 0;padding:0 0 0 20px;list-style:disc}
.ev-cadre .ev-res li{margin:0 0 6px;max-width:62ch;font-size:.875rem;line-height:1.6;color:var(--bwp-brun,#5E574B)}
.ev-cadre .ev-res-t{margin:20px 0 6px;font-size:.78125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bwp-brun,#5E574B)}

/* La source, depliable, avec la phrase verbatim */
.ev-cadre .ev-src{margin:20px 0 0;border-top:1px solid var(--bwp-trait,#E2DCCC);padding-top:16px}
.ev-cadre .ev-src summary{min-height:44px;display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:var(--bwp-encre,#0A1712);cursor:pointer}
.ev-cadre .ev-src summary:focus-visible{outline:3px solid var(--bwp-encre,#0A1712);outline-offset:2px}
.ev-cadre .ev-src-ref{margin:8px 0 0;font-size:.875rem;line-height:1.6;color:var(--bwp-brun,#5E574B)}
.ev-cadre .ev-src-ref a{color:var(--bwp-encre,#0A1712)}
.ev-cadre .ev-cit{margin:14px 0 0;padding:0 0 0 16px;border-left:2px solid var(--bwp-contour,#8C8370)}
.ev-cadre .ev-cit p{margin:0 0 10px;max-width:70ch;font-size:.875rem;line-height:1.65;color:var(--bwp-encre,#0A1712)}
.ev-cadre .ev-cit .ev-cit-ou{display:block;margin-top:4px;font-size:.78125rem;font-weight:600;color:var(--bwp-brun,#5E574B)}

/* ── La part structurelle ── */
.ev-cadre .ev-struct{padding:clamp(20px,3cqi,32px);background:var(--bwp-blanc,#FFF);border:1px solid var(--bwp-encre,#0A1712);border-radius:2px}
.ev-cadre .ev-struct h2{margin:0;font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);line-height:1.2;color:var(--bwp-encre,#0A1712)}
.ev-cadre .ev-deux{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:24px 0 0}
@container (min-width:760px){ .ev-cadre .ev-deux{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} }
.ev-cadre .ev-deux>div{padding:16px 20px;background:var(--bwp-sable,#F0EBDC);border-radius:2px}
.ev-cadre .ev-deux .ev-nous-t{color:var(--bwp-brun,#5E574B)}

/* ── Les sujets ecartes : une absence nommee ── */
.ev-cadre .ev-ecartes{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ev-cadre .ev-ecartes li{padding:16px 20px;max-width:72ch;font-size:.9375rem;line-height:1.6;color:var(--bwp-brun,#5E574B);background:var(--bwp-sable,#F0EBDC);border-radius:2px}

.ev-cadre h2{font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);line-height:1.2;color:var(--bwp-encre,#0A1712)}
.ev-cadre .ev-bloc-t{margin:0 0 20px}
.ev-cadre .ev-bloc-p{margin:0 0 28px;max-width:62ch;font-size:1rem;line-height:1.65;color:var(--bwp-brun,#5E574B)}

/* ── Sous 380 px, le libelle et la valeur ne tiennent plus cote a cote ── */
@container (max-width:380px){
  .ev-cadre .ev-c{padding:18px 16px}
  .ev-cadre .ev-quoi{padding:20px 16px}
}

/* ── Impression : la page se lit sur papier, sans les commandes ── */
@media print{
  .ev-cadre .ev-filtre{display:none}
  .ev-cadre .ev-c,.ev-cadre .ev-struct{border:1px solid #999;break-inside:avoid;page-break-inside:avoid}
  .ev-cadre .ev-quoi{background:#fff;color:#000;border:2px solid #000}
  .ev-cadre .ev-quoi h2,.ev-cadre .ev-quoi p,.ev-cadre .ev-quoi strong{color:#000;opacity:1}
  .ev-cadre .ev-src summary{min-height:0}
}