/* ============================================================================
   editorial.css - Compliance, Responsible sourcing, Company

   Un noyau editorial, trois themes. Les jetons sont poses sur .ed et JAMAIS
   sur :root : site.css definit --ink comme une couleur de TEXTE sombre et ces
   pages s en servent comme d un FOND. Les melanger retournerait le header et
   le footer, qui restent rendus par site.css, intacts.

   ECHELLE UNIQUE
   Espacements : multiples de 4px, exposes en --s1..--s12. Typo : une seule
   echelle fluide --t--3..--t-6. Aucune valeur en dur ailleurs dans le fichier.

   REVELATION NON BLOQUANTE
   Le contenu est visible par defaut, toujours. On n anime qu un translateY de
   10px. La classe .js-enabled est posee par editorial.js APRES le premier
   paint : si le script tombe, si IntersectionObserver manque, ou si le JS est
   coupe, rien n est jamais masque.
   ========================================================================== */

.ed{
  /* espacements, multiples de 4 */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px;  --s7:40px;  --s8:56px;  --s9:72px;  --s10:96px;

  /* typographie, une seule echelle */
  --t--2:10.5px;
  --t--1:12px;
  --t-0:clamp(14.5px,1vw,15.5px);
  --t-1:clamp(15.5px,1.1vw,17px);
  --t-2:clamp(17px,1.35vw,20px);
  --t-3:clamp(20px,1.8vw,25px);
  --t-4:clamp(25px,2.6vw,34px);
  --t-5:clamp(30px,3.6vw,48px);
  --t-6:clamp(34px,4.6vw,64px);

  --pad:clamp(20px,4vw,56px);
  --bleed:clamp(48px,5.6vw,88px);
  --serif:'Fraunces','Georgia',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  background:var(--paper);
  color:var(--carbon);
  font-family:var(--sans);
}

/* ---------------------------------------------------------------- themes
   Compliance : encre et pierre, un seul accent froid. AUCUN VERT.
   Responsible sourcing : le vert vit ici et nulle part ailleurs.
   Company : graphite, bleu, cuivre. */
.ed.pg-compliance{
  --paper:#F2F1EC; --carbon:#0E1013; --accent:#2B5F86;
  --muted:#5C6167; --hair:rgba(14,16,19,.20); --hair-2:rgba(14,16,19,.10);
  --stone:#C8CDD2;
}
/* Le vert tient la page entiere, pas seulement un accent : fond vegetal
   pale, encre vert profond, filets verts, accent vert franc. */
.ed.pg-esg{
  --paper:#E4ECE0; --carbon:#12200F; --accent:#2A6E4A;   /* 5,07:1 sur le fond, mesure */
  --muted:#4C5A48; --hair:rgba(18,32,15,.22); --hair-2:rgba(18,32,15,.11);
  --deep:#0B1A0C; --leaf:#C6F19D;
}
/* les traits, les puces et les filets passent au vert */
.ed.pg-esg .ed-check .b{background:var(--accent)}
.ed.pg-esg .ed-eyebrow{color:var(--accent)}
.ed.pg-esg .ed-dark .ed-eyebrow{color:var(--leaf)}
.ed.pg-esg .ed-stations b{color:var(--leaf)}
.ed.pg-esg .ed-stations li{border-top-color:rgba(198,241,157,.28);color:rgba(230,238,226,.62)}
.ed.pg-esg .ed-ring-core .k{color:rgba(198,241,157,.72)}
.ed.pg-esg .ed-ring-core .v{color:#fff}
/* Le remplissage --leaf est l identite de la page et ne bouge pas. Mais il est
   a 1,05:1 sur --paper : le bouton PRINCIPAL n avait donc aucun bord visible,
   alors que le bouton secondaire juste a cote, .ed-btn--ghost, en a un. La
   hierarchie etait inversee. On ajoute seulement un bord --deep (14,9:1 sur le
   papier) ; le fond, la couleur du texte et la teinte ne changent pas. */
.ed.pg-esg .ed-btn{background:var(--leaf);border-color:var(--deep);color:#12200F}
.ed.pg-esg .ed-btn--ghost{background:transparent;border-color:var(--hair);color:var(--carbon)}
.ed.pg-esg .ed-figure picture{background:rgba(18,32,15,.10)}
.ed.pg-company{
  --paper:#F2F4F7; --carbon:#111216; --accent:#2B5F86;
  --muted:#5B6065; --hair:rgba(17,18,22,.20); --hair-2:rgba(17,18,22,.10);
  --copper:#B87844;
}
body.ed-page{overflow-x:hidden}
body.pg-compliance-body{background:#F2F1EC}
body.pg-esg-body{background:#E4ECE0}
body.pg-company-body{background:#F2F4F7}

/* ------------------------------------------------------------- structure */
.ed-wrap{max-width:1280px;margin-left:auto;margin-right:auto;margin-inline:auto;padding-left:var(--pad);padding-right:var(--pad);padding-inline:var(--pad)}
@media (min-width:1900px){.ed-wrap{max-width:1440px}}

.ed-sec{padding-top:var(--bleed);padding-bottom:var(--bleed);padding-block:var(--bleed)}
.ed-sec--tight{padding-top:calc(var(--bleed) * .6);padding-bottom:calc(var(--bleed) * .6);padding-block:calc(var(--bleed) * .6)}
/* deux sections de meme fond n additionnent pas leurs marges */
.ed-sec + .ed-sec:not(.ed-dark){padding-top:calc(var(--bleed) * .5)}
.ed-dark + .ed-sec.ed-sec{padding-top:var(--bleed)}
.ed-rule{border:0;border-top:1px solid var(--hair);margin:0}

/* ----------------------------------------------------------- typographie */
.ed-eyebrow{
  display:block;font-family:var(--mono);font-size:var(--t--1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 var(--s4);
}
.ed h1{
  font-family:var(--serif);font-weight:400;font-size:var(--t-6);
  line-height:1.05;letter-spacing:-.018em;margin:0;max-width:17ch;
}
.ed h2{
  font-family:var(--serif);font-weight:400;font-size:var(--t-5);
  line-height:1.1;letter-spacing:-.016em;margin:0 0 var(--s4);max-width:20ch;
}
.ed h3{
  font-family:var(--serif);font-weight:400;font-size:var(--t-3);
  line-height:1.2;letter-spacing:-.01em;margin:0;
}
.ed p{font-size:var(--t-1);line-height:1.62;margin:0 0 var(--s4);max-width:62ch}
.ed p:last-child{margin-bottom:0}
.ed-lead{font-size:var(--t-2);line-height:1.5;color:var(--muted);max-width:48ch}
.ed-note{
  font-size:var(--t-0);line-height:1.6;color:var(--muted);max-width:68ch;
  border-left:2px solid var(--hair);padding-left:var(--s4);
}
.ed-note b{color:var(--carbon);font-weight:600}
.ed a{color:inherit}
.ed-link{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent);padding-top:2px;padding-bottom:2px;padding-block:2px;
}
.ed-link:hover{background:var(--hair-2)}


/* fil d Ariane : le balisage BreadcrumbList du <head> doit correspondre a
   quelque chose de visible sur la page. */
.ed-crumb{
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s5);
}
.ed-crumb a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding-right:var(--s1)}
.ed-crumb a:hover{color:var(--accent)}
.ed-crumb span[aria-current]{color:var(--carbon)}

/* ---------------------------------------------------------------- focus */
.ed :focus-visible,
.vx-zone:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:1px;
}
/* Sur les sections sombres l anneau accent tombe a 2,75:1 (mesure : #2B5F86
   sur #111216), sous le seuil de 3:1 du critere 1.4.11. Les quatre zones de
   la carte de company.html sont exactement dans ce cas. Le blanc y monte a
   18,7:1. Meme geste que site.css pour .cta-light et la barre du hero. */
.ed-dark :focus-visible,
.ed-dark .vx-zone:focus-visible{outline-color:#fff}

/* ----------------------------------------------------------------- heros */
.ed-hero{padding-top:var(--s8);padding-bottom:var(--s7);padding-block:var(--s8) var(--s7)}
.ed-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,64px);align-items:end;
}
.ed-hero .ed-lead{margin-top:var(--s5)}
/* Le rapport d image et le rognage portent sur <picture>, PAS sur <figure> :
   places sur la figure, ils enfermaient aussi la <figcaption> dans la boite
   a ratio fixe, sous overflow:hidden - la legende etait purement invisible. */
.ed-figure{margin:0;position:relative}
.ed-figure picture{display:block;overflow:hidden;background:var(--hair-2)}
.ed-figure img{width:100%;height:100%;object-fit:cover;display:block}
.ed-figure--wide picture{aspect-ratio:16/9}
.ed-figure--tall picture{aspect-ratio:4/5}
/* bande pleine largeur : un 16/9 pleine page coutait 700px de haut en desktop */
.ed-figure--band picture{aspect-ratio:21/9}
@media (max-width:640px){.ed-figure--band picture{aspect-ratio:16/9}}
figcaption,.ed-cap{
  font-family:var(--mono);font-size:var(--t--2);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:var(--s2);
}

/* ------------------------------------------------- index d articles, hero
   Remplace la carte "dossier" qui imitait un tableau de bord. C est une
   table des matieres, pas un composant d interface. */
.ed-index{border-top:1px solid var(--carbon)}
.ed-index li{
  list-style:none;display:grid;grid-template-columns:var(--s7) 1fr;
  gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--hair-2);
  font-size:var(--t-0);
}
.ed-index .n{font-family:var(--mono);font-size:var(--t--1);color:var(--accent)}

/* -------------------------------------------------------------- articles
   Numerotation d articles, filets fins : le registre visuel d un acte, pas
   d un dashboard. */
.ed-arts{border-top:1px solid var(--carbon);margin:0;padding:0;list-style:none}
.ed-art{
  border-bottom:1px solid var(--hair);padding:var(--s5) 0;
  display:grid;grid-template-columns:var(--s9) minmax(0,1fr);gap:clamp(16px,2.4vw,40px);
}
.ed-art .n{
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.12em;
  color:var(--muted);padding-top:var(--s1);
}
/* le niveau semantique ne dicte pas la taille : ces titres sont des h2 sur
   compliance et des h3 sur company, ils se lisent pareil. */
.ed-art h2,.ed-art h3{font-family:var(--sans);font-weight:600;font-size:var(--t-1);
  letter-spacing:.005em;line-height:1.35;margin:0 0 var(--s2);max-width:none}
.ed-art p{font-size:var(--t-0);color:var(--muted);max-width:56ch;margin:0}
/* Les puces logees dans une etape n ont pas besoin de leurs propres filets :
   elles doublaient la hauteur de la section sombre. */
.ed-art .ed-check{padding:var(--s2) 0;border:0;grid-template-columns:var(--s4) minmax(0,1fr)}
.ed-art .ed-check:first-child{border-top:0}
.ed-art .ed-checks{margin-top:var(--s3)}

/* ------------------------------------------------------- section sombre */
.ed-dark{background:var(--carbon);color:#EAEBE8}
.ed.pg-esg .ed-dark{background:var(--deep)}
.ed-dark .ed-eyebrow{color:rgba(234,235,232,.62)}
.ed-dark h2,.ed-dark h3{color:#fff}
.ed-dark p{color:rgba(234,235,232,.78)}
.ed-dark .ed-arts,.ed-dark .ed-art{border-color:rgba(255,255,255,.18)}
.ed-dark .ed-art .n{color:rgba(234,235,232,.62)}
.ed-dark .ed-art p{color:rgba(234,235,232,.74)}

/* interdictions : une phrase entiere, pas un libelle plus sa paraphrase */
.ed-nots{list-style:none;margin:var(--s6) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.18)}
.ed-not{
  border-bottom:1px solid rgba(255,255,255,.18);padding:var(--s6) 0;
  display:grid;grid-template-columns:var(--s9) minmax(0,1fr);gap:clamp(16px,2.4vw,40px);
  align-items:baseline;
}
.ed-not .n{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.12em;color:rgba(234,235,232,.55)}
.ed-not p{
  font-family:var(--serif);font-weight:400;font-size:var(--t-4);
  line-height:1.18;letter-spacing:-.012em;color:#fff;margin:0;max-width:26ch;
}

/* ------------------------------------------------------------------ onglets */
.ed-tabbar{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--hair);margin-bottom:var(--s6)}
.ed-tab{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:var(--s4) var(--s5) var(--s3);cursor:pointer;
  min-height:44px;transition:color .2s,border-color .2s;
}
.ed-tab:first-child{padding-left:0}
.ed-tab[aria-selected="true"]{color:var(--carbon);border-bottom-color:var(--accent)}
.ed-tab:hover{color:var(--carbon)}
.ed-tabpanel[hidden]{display:none}
/* Empile un seul panneau des l analyse du document. La classe .js est posee
   par un script en ligne dans le <head>, donc AVANT la premiere peinture,
   alors que [hidden] n est applique par editorial.js qu apres. Entre les deux,
   les quatre panneaux etaient empiles et la page se contractait de ~320 px
   sous le doigt du visiteur. Frere GENERAL et non adjacent : correct quel que
   soit l onglet actif. Sans JavaScript le selecteur ne matche pas et tous les
   panneaux restent lisibles, ce qui est le repli voulu. */
html.js .ed-tabpanel:not([hidden]) ~ .ed-tabpanel:not([hidden]){display:none}
.ed-two{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:start}

/* ------------------------------------------------------------ boucle metal */
.ed-loop{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--hair)}
.ed-loop-step{
  border-right:1px solid var(--hair);padding:var(--s5) var(--s3);
  min-height:clamp(120px,13vw,168px);display:flex;flex-direction:column;position:relative;
}
.ed-loop-step:last-child{border-right:0}
.ed-loop-step .n{font-family:var(--mono);font-size:var(--t--2);letter-spacing:.1em;color:var(--muted)}
.ed-loop-step .t{font-family:var(--serif);font-size:var(--t-2);line-height:1.15;margin:auto 0 0}
.js-enabled .ed-loop-step::after{
  content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.js-enabled .ed-loop-step.is-on::after{transform:scaleX(1)}

/* --------------------------------------------------------- liste cochee */
.ed-checks{list-style:none;margin:0;padding:0}
.ed-check{
  display:grid;grid-template-columns:var(--s5) minmax(0,1fr);gap:var(--s3);
  align-items:start;border-bottom:1px solid var(--hair-2);padding:var(--s4) 0;
}
.ed-check:first-child{border-top:1px solid var(--hair-2)}
.ed-check .b{width:7px;height:7px;background:var(--accent);margin-top:9px}
.ed-check span{font-size:var(--t-0);line-height:1.55}
.ed-check b{font-weight:600}

/* ------------------------------------------------------------ faits */
.ed-facts{border-top:1px solid var(--carbon);margin:0}
.ed-fact{
  display:grid;grid-template-columns:minmax(120px,.26fr) minmax(0,1fr);
  gap:clamp(12px,2.4vw,40px);border-bottom:1px solid var(--hair);
  padding:var(--s5) 0;align-items:baseline;
}
.ed-fact dt{
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0;
}
.ed-fact dd{margin:0;font-family:var(--serif);font-size:var(--t-3);line-height:1.25}

/* --------------------------------------------------------- globe voxel */
.ed-map-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,56px);align-items:center}
/* Regle de la premiere version. Le fond a ete retire : il peignait un
   rectangle --carbon derriere CHAQUE piece, visible comme un liseré autour
   de l anneau dont la section est plus sombre que --carbon. Le fond est
   desormais pose par piece (.vx-world seulement). */
.vx{width:100%;height:auto;display:block}
.vx-land{fill:#3A3F45}
.vx-on{fill:#C3C9CF;transition:fill 150ms linear}
.vx-hit{fill:transparent;cursor:pointer}
.vx-home{fill:var(--copper,#B87844)}
/* survol, focus clavier et tap donnent le meme etat */
.vx-zone:hover .vx-on,
.vx-zone:focus-visible .vx-on,
.vx-zone.is-active .vx-on{fill:#D8322A}
.vx-zone{outline-offset:2px}
.ed-markets{list-style:none;margin:0;padding:0}
.ed-markets li{
  display:flex;align-items:baseline;gap:var(--s3);
  border-bottom:1px solid var(--hair-2);padding:var(--s3) 0;min-height:44px;
}
.ed-markets li:first-child{border-top:1px solid var(--hair-2)}
.ed-markets .d{width:8px;height:8px;background:var(--muted);flex:none;transition:background 150ms linear}
.ed-markets li.is-active .d{background:#D8322A}
.ed-markets .r{font-family:var(--serif);font-size:var(--t-2)}
.ed-markets .m{font-family:var(--mono);font-size:var(--t--2);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:auto}

/* --------------------------------------------------------------- split */
.ed-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.ed-split--flip .ed-figure{order:-1}

/* --------------------------------------------------------------- boutons */
.ed-close{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s7)}
.ed-btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:#fff;color:var(--carbon);border:1px solid var(--carbon);
  border-radius:2px;padding:var(--s3) var(--s5);min-height:48px;
  font-size:var(--t-0);font-weight:600;letter-spacing:.3px;text-decoration:none;
  transition:background .2s;
}
.ed-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.ed-btn--ghost{background:transparent;border-color:var(--hair)}
@media (hover:hover) and (pointer:fine){
  .ed-btn:hover{background:#EDEDEB}
  .ed-btn--ghost:hover{border-color:var(--carbon)}
}
.ed-dark .ed-btn{background:#fff;border-color:#fff}
.ed-dark .ed-btn--ghost{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}

/* ------------------------------------------- feuillage, page ESG seulement
   En angle, derriere le contenu, jamais devant du texte. */
.ed.pg-esg .ed-leaf{
  position:absolute;width:clamp(120px,17vw,260px);height:auto;
  opacity:.11;color:var(--deep);pointer-events:none;z-index:0;
}
.ed.pg-esg .ed-leaf--tr{top:0;right:0;transform:scaleX(-1)}
.ed.pg-esg .ed-leaf--bl{bottom:0;left:0;transform:scaleY(-1)}
.ed.pg-esg .ed-sec{position:relative}
.ed.pg-esg .ed-wrap{position:relative;z-index:1}

/* ------------------------------------------------------------ revelation
   Jamais d opacity:0 sur un bloc entier. Un translateY de 10px, 380ms, et
   uniquement si le JS a pu poser .js-enabled. */
@media (prefers-reduced-motion:no-preference){
  .js-enabled .ed [data-rise]{
    transform:translateY(10px);
    transition:transform 380ms cubic-bezier(.22,.7,.2,1);
    transition-delay:calc(var(--i,0) * 60ms);
  }
  .js-enabled .ed [data-rise][data-risen]{transform:none}
}

/* ------------------------------------------------------------- responsive */
@media (max-width:980px){
  .ed-hero-grid,.ed-two,.ed-split,.ed-map-grid{grid-template-columns:1fr}
  .ed-split--flip .ed-figure{order:0}
  .ed-loop{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ed-loop-step:nth-child(3n){border-right:0}
  .ed-loop-step:nth-child(-n+3){border-bottom:1px solid var(--hair)}
  .ed-art,.ed-not{grid-template-columns:var(--s7) minmax(0,1fr);gap:var(--s3)}
}
@media (max-width:640px){
  /* Sur telephone les blocs se regroupent au lieu de s empiler pleine largeur */
  .ed-loop{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ed-loop-step:nth-child(3n){border-right:1px solid var(--hair)}
  .ed-loop-step:nth-child(2n){border-right:0}
  .ed-loop-step:nth-child(-n+4){border-bottom:1px solid var(--hair)}
  .ed-loop-step{min-height:96px;padding:var(--s4) var(--s3)}
  .ed-fact{grid-template-columns:1fr;gap:var(--s1);padding:var(--s4) 0}
  /* Densification mobile : le meme contenu, moins de vide. Sans cela la page
     se parcourt interminablement au pouce. */
  .ed-art{padding:var(--s4) 0}
  .ed-not{padding:var(--s4) 0}
  .ed-not p{font-size:var(--t-3)}
  .ed-fact{padding:var(--s3) 0}
  .ed-fact dd{font-size:var(--t-2)}
  .ed-check{padding:var(--s2) 0}
  .ed-hero{padding-top:var(--s5);padding-bottom:var(--s5);padding-block:var(--s5) var(--s5)}
  .ed-sec{padding-top:var(--s7);padding-bottom:var(--s7);padding-block:var(--s7)}
  .ed-sec--tight{padding-top:var(--s6);padding-bottom:var(--s6);padding-block:var(--s6)}
  .ed-sec + .ed-sec:not(.ed-dark){padding-top:var(--s6)}
  .ed-dark + .ed-sec.ed-sec{padding-top:var(--s7)}
  .ed-tab{padding:var(--s3) var(--s4) var(--s2)}
  .ed-tab:first-child{padding-left:0}
  .ed-hero{padding-top:var(--s6);padding-bottom:var(--s6);padding-block:var(--s6) var(--s6)}
}
@media (max-width:420px){
  .ed{--pad:16px}
  .ed-art,.ed-not{grid-template-columns:1fr;gap:var(--s1)}
  .ed-index li{grid-template-columns:var(--s6) 1fr}
}

/* ------------------------------------------------------------------ print
   La page Compliance doit s imprimer comme une piece a verser au dossier. */
@media print{
  .ed{background:#fff;color:#000}
  .ed-dark{background:#fff;color:#000}
  .ed-dark h2,.ed-dark h3,.ed-not p{color:#000}
  .ed-dark .ed-arts,.ed-dark .ed-art,.ed-nots,.ed-not{border-color:#999}
  .ed-dark .ed-art .n,.ed-dark .ed-art p,.ed-dark p,.ed-not .n{color:#333}
  .ed [data-rise]{transform:none}
  .ed-tabpanel[hidden]{display:block}
  .ed-tabbar,.ed-close,.ed-figure,.vx{display:none}
  .ed-art,.ed-not,.ed-fact{break-inside:avoid}
  .ed-sec{padding-top:18pt;padding-bottom:18pt;padding-block:18pt}
  .ed h1{font-size:22pt}.ed h2{font-size:16pt}.ed h3{font-size:11pt}
  .ed p,.ed-art p{font-size:9.5pt}
  .ed-link{color:#000;border-bottom:1px solid #000}
  .ed-link::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
}

/* ============================================================================
   PIECES VOXEL - planisphere, anneau, registre

   REGLE : l etat FINAL est l etat par defaut. La classe .js-enabled, posee par
   le script, remet la piece a son etat de depart ; .is-in la relache. Sans JS,
   sans IntersectionObserver ou en mouvement reduit, on voit directement la
   piece terminee. Rien ne depend d une animation pour exister.
   ========================================================================== */
.vx{width:100%;height:auto;display:block}
.vx-hit{fill:transparent;cursor:pointer}

/* --- planisphere ---------------------------------------------------------- */
/* meme valeur que --carbon de la page : la carte pleine largeur se fond dans
   la section, elle ne s y pose pas */
.ed-atlas{background:var(--vx-ground)}
.vx-world{background:var(--vx-ground)}
.vx-world .vx-land{fill:var(--vx-land)}
.vx-world .vx-on{fill:var(--vx-mark);transition:fill 150ms linear}
.vx-world .vx-home{fill:var(--vx-home)}
.vx-zone{outline-offset:2px}
.vx-zone:hover .vx-on,
.vx-zone:focus-visible .vx-on,
.vx-zone.is-active .vx-on{fill:#D8322A}

/* --- anneau du cycle ------------------------------------------------------ */
.vx-ring .vx-arc{fill:var(--vx-lit)}

/* --- registre ------------------------------------------------------------- */
.vx-ledger .vx-band{fill:var(--vx-filled)}

@media (prefers-reduced-motion:no-preference){
  /* la carte s assemble en onde depuis Geneve - jamais invisible, seulement
     en retrait, pour ne rien cacher si l observateur ne se declenche pas */
  .js-enabled .vx-world .vx-land{opacity:.16}
  .js-enabled .vx-world.is-in .vx-land{
    opacity:1;transition:opacity 460ms ease;transition-delay:calc(var(--d,0) * 55ms);
  }
  /* l anneau se referme dans le sens de lecture, gris melange vers vert propre */
  .js-enabled .vx-ring .vx-arc{fill:var(--vx-dim)}
  .js-enabled .vx-ring.is-in .vx-arc{
    fill:var(--vx-lit);transition:fill 1ms steps(1,end);transition-delay:calc(var(--d,0) * 105ms);
  }
  /* le registre se remplit bande par bande, comme un dossier qui se complete */
  .js-enabled .vx-ledger .vx-band{fill:var(--vx-empty)}
  .js-enabled .vx-ledger .vx-band.is-filled{fill:var(--vx-filled);transition:fill 420ms ease}
}

/* jetons voxel par theme */
.ed.pg-company{
  --vx-ground:#111216; --vx-land:#3A3F45; --vx-mark:#C3C9CF; --vx-home:#B87844;
}
.ed.pg-esg{
  --vx-dim:#4A5A48; --vx-lit:#C6F19D;
}
.ed.pg-compliance{
  --vx-empty:#CDD2D7; --vx-filled:#2B5F86;
}

/* --- mises en page des pieces --------------------------------------------- */
/* le planisphere devient la piece maitresse : pleine largeur, hors conteneur */
.ed-bleed{width:100%;margin-left:0;margin-right:0;margin-inline:0}
.ed-map-figure{margin:0;position:relative}
/* Sous 760px la carte passe dans un rail defilant : a 360px de large une zone
   de marche tombe a ~36x22px, sous le seuil du doigt. Le rail garantit une
   cible utilisable et le defilement reste naturel au pouce. */
.ed-map-rail{overflow:visible}
.ed-map-rail .vx{min-width:0;width:100%}
.ed-map-legend{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--hair);
}
/* Sous 900px les zones de la carte tombent sous le doigt : c est la legende
   qui porte l interaction. Chaque ligne est un bouton de 44px qui allume sa
   zone. Au-dessus, la carte reste directement survolable. */
.ed-map-legend li{
  list-style:none;display:flex;align-items:center;gap:var(--s2);
  min-height:44px;padding:0 var(--s3);border:1px solid transparent;
  font-family:var(--mono);font-size:var(--t--1);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;
}
.ed-map-legend li:hover,.ed-map-legend li.is-active{border-color:rgba(255,255,255,.30)}
.ed-map-legend li:focus-visible{outline:2px solid var(--vx-mark);outline-offset:2px}
/* la legende vit sur le bloc sombre : pastille et texte clairs, pas encre */
.ed-map-legend .d{width:9px;height:9px;background:var(--vx-mark);flex:none;transition:background 150ms linear}
.ed-map-legend li{color:rgba(234,235,232,.60)}
.ed-map-legend li.is-active{color:#fff}
.ed-atlas .ed-map-legend{border-top-color:rgba(255,255,255,.18)}
.ed-atlas .ed-cap{color:rgba(234,235,232,.52);max-width:52ch}
.ed-map-legend li.is-active .d{background:#D8322A}

/* l anneau et ses six stations */
.ed-ring{position:relative;max-width:min(560px,88vw);margin-left:auto;margin-right:auto;margin-inline:auto}
.ed-ring .vx{overflow:visible}
.ed-ring-core{
  position:absolute;inset:24%;display:grid;place-content:center;text-align:center;gap:var(--s2);
}
.ed-ring-core .k{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ed-ring-core .v{font-family:var(--serif);font-size:var(--t-4);line-height:1.05}
.ed-stations{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3) var(--s5);
  margin-top:var(--s6);list-style:none;padding:0;
}
.ed-stations li{
  border-top:1px solid var(--hair);padding-top:var(--s3);
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.ed-stations b{display:block;font-family:var(--serif);font-size:var(--t-2);letter-spacing:0;
  text-transform:none;color:var(--carbon);font-weight:400;margin-top:var(--s1)}

/* le registre, colle a hauteur des articles */
.ed-ledger-col{position:-webkit-sticky;position:sticky;top:calc(var(--pin-nav-h, var(--nav-h,78px)) + var(--s5));align-self:start}
.ed-ledger-col .vx{max-width:96px}
.ed-ledger-col .cap{
  margin-top:var(--s3);font-family:var(--mono);font-size:var(--t--2);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.ed-with-ledger{display:grid;grid-template-columns:96px minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start}

@media (max-width:980px){
  .ed-with-ledger{grid-template-columns:1fr}
  .ed-ledger-col{display:none}       /* la colonne est un ornement, pas du contenu */
  .ed-stations{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .ed-stations{grid-template-columns:1fr}
}

/* ============================================================================
   LE FIL - la piece qui relie les trois pages a "How we trade"

   Un filet vertical le long de la marge, avec un noeud carre a chaque section.
   Le segment colore grandit avec le defilement, via animation-timeline:scroll()
   quand le navigateur sait faire ; partout ailleurs il est simplement complet.
   Zero JavaScript, zero travail par frame.
   ========================================================================== */
.ed{position:relative}
.ed-thread{
  position:absolute;left:calc(var(--pad) - 1px);top:0;bottom:0;width:1px;
  background:var(--hair);pointer-events:none;z-index:0;
}
.ed-thread i{
  position:absolute;inset:0;display:block;background:var(--accent);
  transform-origin:top;transform:scaleY(1);
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .ed-thread i{transform:scaleY(0);animation:edThread linear both;animation-timeline:scroll(root block)}
  }
}
@keyframes edThread{to{transform:scaleY(1)}}

/* un noeud carre sur le fil, a l entree de chaque section : la meme brique */
.ed-sec,.ed-hero{position:relative}
.ed-sec::before,.ed-hero::before{
  content:'';position:absolute;top:calc(var(--bleed) * .5);left:calc(var(--pad) - 4px);
  width:7px;height:7px;background:var(--paper);border:1px solid var(--muted);z-index:1;
}
.ed-dark::before{background:var(--carbon);border-color:rgba(255,255,255,.42)}
.ed.pg-esg .ed-dark::before{background:var(--deep)}
@media (max-width:640px){
  /* trop pres du bord au pouce : le fil et ses noeuds passent en retrait */
  .ed-thread{left:6px}
  .ed-sec::before,.ed-hero::before{left:3px}
}

/* ============================================================================
   LE TRI - responsible sourcing
   Quatre voies. En vrac les cellules sont dans n importe quelle voie ; triees
   elles rejoignent la leur. Un translateY par groupe, seize groupes.
   ========================================================================== */
/* Le "d" du path dessine les cellules a leur place EN VRAC ; --dy est ce qui
   leur reste a parcourir pour rejoindre leur voie. L etat final (donc l etat
   par defaut, sans JS) est donc translateY(--dy), pas 0. L avoir ecrit a
   l envers laissait les quatre bandes melangees une fois "triees". */
.vx-sorter .vx-str{transform:translateY(var(--dy))}
/* La voie 0 est la bande du HAUT : elle porte le grade le plus propre, pour
   que l ordre lu de haut en bas suive celui de la legende. */
/* `background-color` a cote de `fill` : les memes quatre classes servent aux
   <path> du schema ET aux <span class="sw"> de la legende, et `fill` ne peint
   rien sur une boite HTML. Les quatre pastilles de la legende etaient donc
   quatre carres transparents : la legende nommait quatre grades sans dire
   lequel etait quelle bande. `background-color` n a symetriquement aucun effet
   sur un <path>, donc le schema ne bouge pas d un pixel. La source unique de
   couleur voulue ici est preservee. */
.vx-s0{fill:var(--leaf,#C6F19D);background-color:var(--leaf,#C6F19D)}
.vx-s1{fill:#8CC47E;background-color:#8CC47E}
.vx-s2{fill:#5E9463;background-color:#5E9463}
.vx-s3{fill:#3F6B4A;background-color:#3F6B4A}
@media (prefers-reduced-motion:no-preference){
  .js-enabled .vx-sorter .vx-str{transform:translateY(0)}
  .js-enabled .vx-sorter.is-in .vx-str{
    transform:translateY(var(--dy));
    transition:transform 720ms cubic-bezier(.22,.7,.2,1);
    transition-delay:calc(var(--d,0) * 34ms);
  }
}
.ed-sorter{max-width:100%;overflow:hidden}
.ed-sorter-legend{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s4);
  list-style:none;padding:0;
}
/* le tri est pose sur une section CLAIRE : la legende suit le texte de la
   page, pas la teinte des blocs sombres */
.ed-sorter-legend li{
  display:flex;align-items:center;gap:var(--s2);min-height:44px;
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.ed-dark .ed-sorter-legend li{color:rgba(230,238,226,.72)}
.ed-sorter-legend .sw{width:10px;height:10px;flex:none}

/* ============================================================================
   LE SCEAU - compliance. Une coche en pixels qui se pose quand le dossier
   est complet. Meme brique, meme loi.
   ========================================================================== */
.vx-seal{width:auto;height:clamp(44px,5vw,64px)}
.vx-seal path{fill:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .js-enabled .vx-seal path{opacity:.18}
  .js-enabled .vx-seal.is-in path{opacity:1;transition:opacity 340ms ease;transition-delay:calc(var(--d,0) * 60ms)}
}
.ed-seal-row{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s6)}
.ed-seal-row .t{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* ============================================================================
   FEUILLAGE - responsible sourcing uniquement, en angle, derriere le contenu.
   ========================================================================== */
.ed.pg-esg .ed-leaf{
  position:absolute;width:clamp(110px,15vw,230px);height:auto;
  opacity:.10;color:var(--carbon);pointer-events:none;z-index:0;
}
.ed.pg-esg .ed-dark .ed-leaf{color:var(--leaf);opacity:.13}
.ed.pg-esg .ed-leaf--tr{top:0;right:0;transform:scaleX(-1)}
.ed.pg-esg .ed-leaf--bl{bottom:0;left:0;transform:scaleY(-1)}
.ed .ed-wrap{position:relative;z-index:1}




/* ============================================================================
   LE DOSSIER - compliance

   Une fenetre de dossier, epinglee. Tant que les six articles ne sont pas
   passes, la page ne descend pas : la section est haute, la fenetre est
   collee, et le defilement fait avancer le fichier ouvert. Meme principe que
   le noeud de "How we trade".

   DEGRADATION : la hauteur de la section et l epinglage n existent QUE sous
   .js-enabled. Sans JavaScript, sans IntersectionObserver ou en mouvement
   reduit, la section reprend sa hauteur naturelle et les six documents
   s empilent, lisibles, sans piege de defilement.
   ========================================================================== */
.ed-pin-sec{position:relative}
.js-enabled .ed-pin-sec{height:calc(var(--steps, 6) * 64svh)}
/* Uniquement quand la section est REELLEMENT epinglee. Sous 621 px de haut le
   bloc @media plus bas depingle tout (position:static, height:auto) mais cette
   ligne-ci continuait d annuler le rembourrage vertical : le dossier venait se
   coller a la section suivante, sans respiration, sur tout telephone en
   paysage. La borne est la meme que celle du bloc de depinglage. */
@media (min-height:621px){
 html.js-enabled .ed-sec.ed-pin-sec{padding-top:0;padding-bottom:0;padding-block:0}
}
@supports not (height:1svh){ .js-enabled .ed-pin-sec{height:calc(var(--steps, 6) * 64vh)} }

.ed-pin{position:relative}
.js-enabled .ed-pin{
  /* var(--pin-nav-h) est la hauteur REELLEMENT mesuree, publiee par
     editorial.js. Repli en chaine sur --nav-h puis sur 78px, pour que la page
     reste correctement composee si le script ne tourne pas. */
  position:-webkit-sticky;position:sticky;top:calc(var(--pin-nav-h, var(--nav-h, 78px)) + var(--s4));
  height:calc(100svh - var(--nav-h, 78px) - var(--s6));
  display:flex;align-items:stretch;
}
/* REPLI OBLIGATOIRE, et il doit passer par @supports.
   La ligne ci-dessus contient un var(), donc le navigateur ne peut pas juger la
   validite de `100svh` a l analyse : il la garde, la substitue, et n echoue
   qu au calcul - moment ou la propriete ne retombe PAS sur une declaration
   precedente mais sur sa valeur initiale, `height:auto`. Sur tout navigateur
   sans svh (iOS <= 15.3, Chrome < 108, Samsung Internet < 21) la fenetre du
   dossier de compliance.html se reduisait donc a zero pixel, derriere une
   section de 384vh : six ecrans entierement vides.
   Place APRES le bloc ci-dessus (specificite egale, l ordre source tranche) et
   AVANT l echappatoire @media (max-height:620px) plus bas, qui doit continuer a
   gagner sur les ecrans trop bas pour epingler. */
@supports not (height:1svh){
  .js-enabled .ed-pin{height:calc(100vh - var(--nav-h, 78px) - var(--s6))}
}
.js-enabled .ed-pin > .ed-wrap{display:flex;flex-direction:column;min-height:0}

/* --- la fenetre ----------------------------------------------------------- */
.ed-win{
  width:100%;border:1px solid var(--carbon);background:var(--paper);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 48px -32px rgba(14,16,19,.55);
}
.js-enabled .ed-win{flex:1;min-height:0}

.ed-win-bar{
  display:flex;align-items:center;gap:var(--s3);flex:none;
  background:var(--carbon);color:#fff;padding:var(--s3) var(--s4);
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.1em;
}
.ed-win-bar .dots{display:flex;gap:5px;flex:none}
.ed-win-bar .dots i{width:9px;height:9px;background:rgba(255,255,255,.42);display:block}
.ed-win-bar .nm{text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-win-bar .ct{margin-left:auto;color:rgba(255,255,255,.62);flex:none}

.ed-win-body{display:grid;grid-template-columns:minmax(160px,.32fr) minmax(0,1fr);flex:1;min-height:0}

/* la colonne des fichiers */
.ed-win-side{
  border-right:1px solid var(--hair);background:rgba(14,16,19,.035);
  padding:var(--s3) 0;overflow:auto;min-height:0;
}
.ed-file{
  display:grid;grid-template-columns:var(--s5) auto minmax(0,1fr);gap:var(--s2);
  align-items:center;padding:var(--s2) var(--s4);
  font-size:var(--t-0);color:var(--muted);min-height:44px;cursor:pointer;
  border:0;background:none;width:100%;text-align:left;font-family:inherit;
}
.ed-file .ic{width:13px;height:16px;background:var(--hair);position:relative;display:block}
.ed-file .n{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.08em}
.ed-file .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-file:hover{background:var(--hair-2)}
.ed-file:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.ed-file .ic::after{content:'';position:absolute;top:0;right:0;width:5px;height:5px;background:var(--paper)}
.ed-file[aria-current="true"]{background:var(--accent);color:#fff}
.ed-file[aria-current="true"] .n{color:#fff}
.ed-file[aria-current="true"] .ic{background:#fff}
.ed-file[aria-current="true"] .ic::after{background:var(--accent)}

/* le document ouvert */
.ed-win-doc{position:relative;min-height:0;overflow:hidden}
.ed-doc{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%}
.js-enabled .ed-doc{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 140ms ease, visibility 0s linear 140ms;
}
.js-enabled .ed-doc.is-on{
  opacity:1;visibility:visible;
  transition:opacity 260ms ease 120ms, visibility 0s linear 120ms;
}
html:not(.js-enabled) .ed-doc + .ed-doc{border-top:1px solid var(--hair)}
html:not(.js-enabled) .ed-doc{min-height:260px}
.ed-doc-img{position:relative;overflow:hidden;background:var(--carbon);min-height:0}
.ed-doc-img img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.4) contrast(1.06)}
.ed-doc-txt{padding:var(--s4) var(--s5) var(--s5);flex:none}
.ed-doc-txt .r{
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:var(--s2);
}
.ed-doc-txt h2{font-family:var(--sans);font-weight:600;font-size:var(--t-2);
  line-height:1.3;margin:0 0 var(--s2);max-width:none}
.ed-doc-txt p{font-size:var(--t-0);color:var(--muted);margin:0;max-width:60ch}

/* barre de progression du dossier */
.ed-win-foot{
  flex:none;display:flex;gap:3px;padding:0;background:var(--hair-2);height:3px;
}
.ed-win-foot i{flex:1;background:transparent;transition:background 260ms ease}
.ed-win-foot i.is-done{background:var(--accent)}

@media (max-width:760px){
  .ed-win-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  /* La colonne devient six pastilles numerotees qui se PARTAGENT la largeur :
     elles tiennent toutes a 320px, donc rien a faire glisser sur le cote. */
  .ed-win-side{
    display:flex;border-right:0;border-bottom:1px solid var(--hair);
    padding:0;overflow:visible;
  }
  .ed-file{
    flex:1 1 0;min-width:0;width:auto;display:flex;justify-content:center;
    padding:var(--s2) 2px;border-right:1px solid var(--hair-2);
  }
  .ed-file:last-child{border-right:0}
  .ed-file .ic,.ed-file .tt{display:none}
  .ed-file .n{font-size:var(--t-0);opacity:1}
  .ed-doc-txt{padding:var(--s3) var(--s4) var(--s4)}
}
/* Pas assez de hauteur pour epingler : la fenetre reprend sa taille naturelle
   et les documents s empilent, comme sans JavaScript. */
@media (max-height:620px){
  .js-enabled .ed-pin-sec{height:auto}
  .js-enabled .ed-pin{position:static;height:auto}
  .js-enabled .ed-win{flex:none;min-height:0}
  .js-enabled .ed-doc{position:relative;inset:auto;opacity:1;visibility:visible;transition:none}
  .js-enabled .ed-doc + .ed-doc{border-top:1px solid var(--hair)}
  .ed-doc{min-height:230px}
}

/* ==========================================================================
   Repli sans `gap` en flexbox
   Le gap sur un conteneur FLEX n existe qu a partir de Safari 14.1 et de
   Samsung Internet 14 ; il est ignore, sans erreur, sur tout ce qui est plus
   ancien. Douze conteneurs de ce fichier n avaient aucun autre espacement : le
   fil d Ariane, la liste des marches, les boutons de fin de section, les deux
   legendes de schema, la barre et le pied de la fenetre de dossier. Sur un
   iPhone reste en iOS 12, 13 ou 14.0 leurs elements se touchaient - pastilles
   collees a leur libelle, boutons soudes l un a l autre.
   Il n existe AUCUNE requete @supports capable de distinguer le gap flex du gap
   grid : Safari 12 accepte deja la propriete pour la grille. On remplace donc
   l espacement plutot que de le conditionner - gap remis a zero, marges
   equivalentes -, ce qui rend a l identique sur tous les moteurs, anciens comme
   recents. Les valeurs sont les memes jetons qu avant, aucun pixel ne bouge.
   Selecteurs prefixes par .ed, donc (0,2,0) contre (0,1,0) : ils gagnent par
   specificite et pas seulement par ordre source.
   ========================================================================== */
/* Le fil d Ariane ne porte que column-gap:0 : row-gap est laisse intact parce
   qu il a deja une margin-bottom a lui (--s5), et lui ajouter une marge basse
   par element aurait rallonge le bloc de 8 px sur les trois pages editoriales
   pour un retour a la ligne qui n arrive quasiment jamais a deux entrees. */
.ed .ed-crumb{column-gap:0}
.ed .ed-crumb > * + *{margin-left:var(--s2)}
.ed .ed-markets li{gap:0}
.ed .ed-markets li > * + *{margin-left:var(--s3)}
.ed .ed-close{gap:0}
.ed .ed-close > *{margin-right:var(--s3);margin-bottom:var(--s3)}
.ed .ed-btn{gap:0}
.ed .ed-btn > * + *{margin-left:var(--s2)}
.ed .ed-map-legend{gap:0}
.ed .ed-map-legend > li{margin-right:var(--s6);margin-bottom:var(--s2)}
.ed .ed-map-legend li{gap:0}
.ed .ed-map-legend li > * + *{margin-left:var(--s2)}
.ed .ed-sorter-legend{gap:0}
.ed .ed-sorter-legend > li{margin-right:var(--s5);margin-bottom:var(--s2)}
.ed .ed-sorter-legend li{gap:0}
.ed .ed-sorter-legend li > * + *{margin-left:var(--s2)}
.ed .ed-seal-row{gap:0}
.ed .ed-seal-row > * + *{margin-left:var(--s4)}
.ed .ed-win-bar{gap:0}
.ed .ed-win-bar > * + *{margin-left:var(--s3)}
.ed .ed-win-bar .dots{gap:0}
.ed .ed-win-bar .dots > * + *{margin-left:5px}
.ed .ed-win-foot{gap:0}
.ed .ed-win-foot > * + *{margin-left:3px}