/* ============================================================
   MINEXX V2 - styles.css
   Design system: Brand Book light. #3AA9E0 = marque (jamais en
   texte sur blanc) · #166A99 Blue Deep = interactif sur clair ·
   noir = autorité · #9D9C9C = filets / texte sur noir.
   Build: SITE_v2_v1_20260729 (FORGE).
   ============================================================ */
:root{
  --mx-blue:#3AA9E0;
  --mx-blue-deep:#166A99;
  --mx-black:#000000;
  --mx-white:#FFFFFF;
  --mx-grey:#9D9C9C;
  --mx-grey-bg:#F4F4F4;
  --mx-grey-text:#595959;
  --mx-rule:#E0E0E0;
  --mx-error:#B42318;
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-6:48px; --sp-8:64px; --sp-12:96px;
  --fs-display:clamp(40px,5vw,61px);
  --fs-h2:clamp(28px,3.4vw,39px);
  --fs-h3:clamp(22px,2.6vw,31px);
  --fs-lead:clamp(19px,2vw,24px);
  --fs-body:18px; --fs-small:15px; --fs-eyebrow:13px;
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:400ms;
  --ease:cubic-bezier(0.2,0,0,1);
  --nav-h:64px;
}
@font-face{ font-family:'Ubuntu'; font-weight:300; font-style:normal; font-display:swap; src:url('../fonts/ubuntu-light.woff') format('woff'); }
@font-face{ font-family:'Ubuntu'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/ubuntu-regular.woff') format('woff'); }
@font-face{ font-family:'Ubuntu'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/ubuntu-medium.woff') format('woff'); }
@font-face{ font-family:'Ubuntu'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/ubuntu-bold.woff') format('woff'); }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Ubuntu',Arial,sans-serif; font-weight:300;
  font-size:var(--fs-body); line-height:1.55;
  color:var(--mx-black); background:var(--mx-white);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
.container{ max-width:1200px; margin:0 auto; padding:0 var(--sp-3); }
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--mx-black); color:var(--mx-white); padding:12px 20px; font-size:15px;
}
.skip-link:focus{ left:0; }

/* ---------- Typo ---------- */
h1{ font-size:var(--fs-display); font-weight:700; line-height:1.08; letter-spacing:-0.01em; }
h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.15; letter-spacing:-0.01em; }
h3{ font-size:var(--fs-h3); font-weight:700; line-height:1.2; }
.lead{ font-size:var(--fs-lead); font-weight:500; line-height:1.4; }
p, li{ max-width:65ch; }
.small{ font-size:var(--fs-small); font-weight:400; }
.muted{ color:var(--mx-grey-text); }
.eyebrow{
  font-size:var(--fs-eyebrow); font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mx-blue-deep); display:block; margin-bottom:var(--sp-2);
}
a{ color:var(--mx-blue-deep); text-decoration:none; border-bottom:1px solid currentColor; transition:opacity var(--dur-fast) var(--ease); }
a:hover{ opacity:.7; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--mx-black); outline-offset:2px;
}
.on-dark a:focus-visible, .on-dark button:focus-visible{ outline-color:var(--mx-blue); }

/* ---------- Boutons ---------- */
.btn{
  display:inline-block; font-family:inherit; font-size:16px; font-weight:500; line-height:1;
  padding:16px 32px; cursor:pointer; border:1px solid transparent; border-radius:0;
  text-decoration:none; text-align:center;
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-primary{ background:var(--mx-black); color:var(--mx-white); border-color:var(--mx-black); }
.btn-primary:hover{ background:#222; border-color:#222; opacity:1; }
.btn-secondary{ background:transparent; color:var(--mx-black); border-color:var(--mx-black); }
.btn-secondary:hover{ background:var(--mx-black); color:var(--mx-white); opacity:1; }
.btn-inverse{ background:transparent; color:var(--mx-white); border-color:var(--mx-white); }
.btn-inverse:hover{ background:var(--mx-white); color:var(--mx-black); opacity:1; }
.btn-brand-on-dark{ background:var(--mx-blue); color:var(--mx-black); border-color:var(--mx-blue); }
.btn-brand-on-dark:hover{ background:#5FBBE8; border-color:#5FBBE8; opacity:1; }

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:rgba(255,255,255,.96); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--mx-rule);
}
.site-nav .container{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.nav-logo{ border:none; display:flex; align-items:center; }
.nav-logo img{ height:34px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:var(--sp-3); list-style:none; }
.nav-links a{
  font-size:15px; font-weight:400; color:var(--mx-black); border-bottom:2px solid transparent;
  padding:4px 0; transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-links a:hover{ color:var(--mx-blue-deep); opacity:1; }
.nav-links a[aria-current="true"]{ border-bottom-color:var(--mx-blue-deep); color:var(--mx-blue-deep); }
/* CTA du menu = exactement le bouton hero « Discover our work » (btn-brand-on-dark), plat, sans ombre */
/* Même STYLE que le bouton hero (bleu/texte noir/plat), dimensionné pour tenir dans la nav sans la faire déborder */
.nav-links a.nav-cta{ color:var(--mx-black); background:var(--mx-blue); border:1px solid var(--mx-blue); padding:11px 22px; font-size:15px; font-weight:500; white-space:nowrap; }
.nav-links a.nav-cta:hover{ background:#5FBBE8; border-color:#5FBBE8; color:var(--mx-black); opacity:1; }
.nav-toggle{ display:none; background:none; border:1px solid var(--mx-black); width:46px; height:40px; padding:0; position:relative; font-size:0; cursor:pointer; }
.nav-toggle::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:20px; height:2px; background:var(--mx-black); box-shadow:0 -6px 0 var(--mx-black),0 6px 0 var(--mx-black); }
@media (max-width:980px){
  .nav-toggle{ display:block; }
  .nav-links{
    display:none; position:absolute; top:var(--nav-h); left:0; right:0;
    background:var(--mx-white); border-bottom:1px solid var(--mx-rule);
    flex-direction:column; align-items:flex-start; padding:var(--sp-3); gap:var(--sp-2);
  }
  .nav-links.is-open{ display:flex; }
}

/* ---------- Sections ---------- */
section{ padding:var(--sp-12) 0; }
section[id]{ scroll-margin-top:calc(var(--nav-h) + 12px); }
.section-grey{ background:var(--mx-grey-bg); }
.section-dark{ background:var(--mx-black); color:var(--mx-white); }
.section-dark p, .section-dark li{ color:#C9C9C9; }
.section-dark h2, .section-dark h3{ color:var(--mx-white); }
.section-dark .eyebrow{ color:var(--mx-blue); }
.section-dark .muted{ color:var(--mx-grey); }
@media (max-width:760px){ section{ padding:var(--sp-8) 0; } }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:min(92vh,860px); display:flex; align-items:center; padding:calc(var(--sp-12) + var(--sp-6)) 0; color:var(--mx-white); overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(0,0,0,.88) 0%, rgba(6,26,38,.72) 45%, rgba(22,106,153,.45) 100%);
}
.hero-media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 85% 110% at 82% 20%, rgba(58,169,224,.28) 0%, transparent 60%);
  mix-blend-mode:screen;
}
.hero-content{ position:relative; z-index:2; max-width:840px; }
.hero .eyebrow{ color:var(--mx-blue); }
.hero h1{ margin-bottom:var(--sp-3); }
.hero-sub{ font-size:var(--fs-lead); font-weight:300; line-height:1.45; color:#E8E8E8; max-width:56ch; margin-bottom:var(--sp-4); }
.hero-actions{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.hero-points{ list-style:none; display:grid; gap:10px; }
.hero-points li{ font-size:var(--fs-small); font-weight:400; color:#DDD; padding-left:18px; position:relative; }
.hero-points li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:2px; background:var(--mx-blue); }

/* ---------- Proof band ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
.kpi{ padding:var(--sp-3) 0; border-top:1px solid #2A2A2A; }
.kpi-number{ font-size:clamp(34px,3.6vw,52px); font-weight:700; line-height:1; color:var(--mx-blue); letter-spacing:-0.01em; }
.kpi-label{ font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--mx-grey); margin-top:10px; max-width:none; }
.chip-row{ display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-top:var(--sp-6); }
.chip{
  font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 16px; border:1px solid #333; color:var(--mx-grey); background:transparent;
}
@media (max-width:900px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- About / minerals ---------- */
.minerals{ display:grid; grid-template-columns:repeat(8,1fr); gap:var(--sp-2); margin-top:var(--sp-6); list-style:none; }
.minerals li{ text-align:center; font-size:14px; font-weight:500; color:var(--mx-grey-text); max-width:none; transition:color var(--dur-base) var(--ease); animation:mineralIn var(--dur-slow) var(--ease) both; }
.minerals img{ width:100%; aspect-ratio:1; object-fit:cover; margin-bottom:8px; filter:grayscale(.15); will-change:transform; transition:transform var(--dur-base) var(--ease), filter var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
/* Effet survol : la tuile se soulève, reprend sa couleur pleine et gagne une ombre */
.minerals li:hover{ color:var(--mx-blue-deep); }
.minerals li:hover img{ transform:translateY(-6px) scale(1.05); filter:grayscale(0); box-shadow:0 12px 26px rgba(0,0,0,.20); }
/* Apparition échelonnée au chargement */
@keyframes mineralIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.minerals li:nth-child(1){ animation-delay:.04s; } .minerals li:nth-child(2){ animation-delay:.09s; }
.minerals li:nth-child(3){ animation-delay:.14s; } .minerals li:nth-child(4){ animation-delay:.19s; }
.minerals li:nth-child(5){ animation-delay:.24s; } .minerals li:nth-child(6){ animation-delay:.29s; }
.minerals li:nth-child(7){ animation-delay:.34s; } .minerals li:nth-child(8){ animation-delay:.39s; }
@media (max-width:900px){ .minerals{ grid-template-columns:repeat(4,1fr); } }

/* ---------- Vidéo (façade) ---------- */
.video-facade{
  position:relative; aspect-ratio:16/9; max-width:960px; margin:var(--sp-6) auto 0;
  background:var(--mx-black); cursor:pointer; overflow:hidden; border:0; padding:0; width:100%;
  display:block;
}
.video-facade img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); opacity:.75; }
.video-facade::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(0,0,0,.55), rgba(22,106,153,.35)); }
.play-btn{
  position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);
  width:84px; height:84px; border-radius:50%; background:var(--mx-white); border:none;
  display:flex; align-items:center; justify-content:center; pointer-events:none;
  transition:transform var(--dur-fast) var(--ease);
}
.video-facade:hover .play-btn{ transform:translate(-50%,-50%) scale(1.06); }
.play-btn span{ width:0; height:0; border-style:solid; border-width:13px 0 13px 22px; border-color:transparent transparent transparent var(--mx-black); margin-left:6px; }
.video-facade iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }
.video-caption{ text-align:center; margin:var(--sp-2) auto 0; }

/* ---------- Value chain ---------- */
.vc-steps{ display:flex; flex-wrap:wrap; gap:8px; margin:var(--sp-6) 0 var(--sp-3); }
.vc-step{
  font-family:inherit; font-size:13px; font-weight:500; letter-spacing:.03em;
  padding:10px 14px; background:var(--mx-white); border:1px solid var(--mx-rule); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.vc-step:hover{ border-color:var(--mx-black); }
.vc-step[aria-selected="true"]{ background:var(--mx-black); color:var(--mx-white); border-color:var(--mx-black); }
.vc-panel{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); align-items:start; }
.vc-panel[hidden]{ display:none; }
.vc-media{ position:relative; overflow:hidden; }
.vc-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; filter:grayscale(.9) contrast(1.03); }
.vc-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(22,106,153,.30), rgba(0,0,0,.25)); mix-blend-mode:multiply; }
.vc-body .step-index{ font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--mx-grey-text); margin-bottom:var(--sp-1); }
.vc-body h3{ font-size:24px; margin-bottom:var(--sp-2); }
.vc-body ul{ margin:var(--sp-2) 0 0 18px; }
.vc-body li{ margin-bottom:6px; font-size:var(--fs-small); font-weight:400; color:var(--mx-grey-text); }
.vc-ctas{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-4); }
@media (max-width:820px){ .vc-panel{ grid-template-columns:1fr; } }

/* ---------- Cards (standards / ecosystem) ---------- */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-6); }
.card{
  background:var(--mx-white); border:1px solid var(--mx-rule); padding:var(--sp-4);
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.card:hover{ transform:scale(1.02); box-shadow:0 2px 12px rgba(0,0,0,.06); }
.card h3{ font-size:19px; margin-bottom:var(--sp-1); }
.card p{ font-size:var(--fs-small); font-weight:400; color:var(--mx-grey-text); }
.card .card-link{ display:inline-block; margin-top:var(--sp-2); font-size:var(--fs-small); font-weight:500; }
.card-eyebrow{ font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--mx-grey-text); display:block; margin-bottom:var(--sp-1); }
@media (max-width:900px){ .cards-3{ grid-template-columns:1fr; } }

/* ---------- MineSmart ---------- */
.ms-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-6); align-items:center; margin-top:var(--sp-6); }
.ms-list{ list-style:none; margin-top:var(--sp-3); display:grid; gap:14px; }
.ms-list li{ padding-left:22px; position:relative; font-size:var(--fs-small); font-weight:400; }
.ms-list li::before{ content:""; position:absolute; left:0; top:.5em; width:10px; height:2px; background:var(--mx-blue); }
.ms-media{ position:relative; overflow:hidden; }
.ms-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; filter:grayscale(1); opacity:.85; }
.ms-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(150deg, rgba(58,169,224,.35), rgba(0,0,0,.55)); mix-blend-mode:multiply; }
@media (max-width:900px){ .ms-grid{ grid-template-columns:1fr; } }

/* ---------- Energy ---------- */
.energy-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:center; }
.energy-points{ list-style:none; margin:var(--sp-3) 0 var(--sp-4); display:grid; gap:12px; }
.energy-points li{ padding-left:22px; position:relative; font-size:var(--fs-small); font-weight:400; color:var(--mx-grey-text); }
.energy-points li::before{ content:""; position:absolute; left:0; top:.5em; width:10px; height:2px; background:var(--mx-blue-deep); }
.energy-media{ position:relative; overflow:hidden; }
.energy-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (max-width:900px){ .energy-grid{ grid-template-columns:1fr; } }

/* ---------- News ---------- */
.news-item{ border:1px solid var(--mx-rule); background:var(--mx-white); margin-top:var(--sp-3); }
.news-item summary{
  list-style:none; cursor:pointer; display:grid; grid-template-columns:180px 1fr auto;
  gap:var(--sp-3); align-items:center; padding:var(--sp-3);
  transition:background-color var(--dur-fast) var(--ease);
}
.news-item summary::-webkit-details-marker{ display:none; }
.news-item summary:hover{ background:var(--mx-grey-bg); }
.news-thumb{ width:180px; aspect-ratio:16/10; object-fit:cover; }
.news-head h3{ font-size:19px; line-height:1.3; margin-bottom:6px; }
.news-date{ font-size:14px; font-weight:400; color:var(--mx-grey-text); }
.news-more{ font-size:15px; font-weight:500; color:var(--mx-blue-deep); white-space:nowrap; }
.news-body{ padding:0 var(--sp-4) var(--sp-4); border-top:1px solid var(--mx-rule); }
.news-body h4{ font-size:18px; font-weight:700; margin:var(--sp-4) 0 var(--sp-1); }
.news-body p{ margin-top:var(--sp-2); font-weight:300; }
.news-body ul{ margin:var(--sp-2) 0 0 20px; }
.news-body li{ margin-bottom:6px; }
@media (max-width:760px){ .news-item summary{ grid-template-columns:1fr; } .news-thumb{ width:100%; } }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); margin-top:var(--sp-6); align-items:start; }
.contact-info h3, .contact-form-col h3{ font-size:16px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--sp-3); }
.contact-info ul{ margin:var(--sp-3) 0 0 18px; }
.contact-info li{ margin-bottom:8px; font-size:var(--fs-small); font-weight:400; color:var(--mx-grey-text); }
.contact-photo{ margin-top:var(--sp-4); width:100%; aspect-ratio:16/10; object-fit:cover; }
.form-grid{ display:grid; gap:var(--sp-3); }
.field label{ display:block; font-size:var(--fs-small); font-weight:500; margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; font-family:inherit; font-size:16px; font-weight:400;
  padding:14px 16px; border:1px solid var(--mx-grey); background:var(--mx-white);
  color:var(--mx-black); border-radius:0;
}
.form-disclaimer{ font-size:14px; font-weight:400; color:var(--mx-grey-text); }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--mx-black); color:var(--mx-grey); padding:var(--sp-8) 0 var(--sp-4); font-size:var(--fs-small); }
.footer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
.site-footer h4{ color:var(--mx-white); font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--sp-2); }
.site-footer a{ color:var(--mx-grey); border-bottom-color:transparent; display:inline-block; margin-bottom:8px; font-weight:300; }
.site-footer a:hover{ color:var(--mx-blue); opacity:1; }
.footer-group{ border-top:1px solid #2A2A2A; margin-top:var(--sp-6); padding-top:var(--sp-4); }
.footer-group p{ font-weight:300; max-width:none; }
.footer-group strong{ color:var(--mx-white); font-weight:500; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); flex-wrap:wrap; border-top:1px solid #2A2A2A; margin-top:var(--sp-4); padding-top:var(--sp-3); }
.footer-baseline{ color:var(--mx-blue); font-weight:500; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Dialogs (policies) ---------- */
dialog.policy{
  max-width:820px; width:calc(100% - 32px); max-height:85vh; overflow-y:auto;
  margin:auto; /* recentre : le reset *{margin:0} tuait le centrage natif du dialog */
  border:1px solid var(--mx-rule); padding:var(--sp-6);
}
dialog.policy::backdrop{ background:rgba(0,0,0,.55); }
dialog.policy h2{ margin-bottom:var(--sp-3); font-size:28px; }
dialog.policy h3{ font-size:18px; margin:var(--sp-4) 0 var(--sp-1); }
dialog.policy p{ margin-top:var(--sp-2); font-size:var(--fs-small); font-weight:400; color:#222; }
dialog.policy ul{ margin:var(--sp-1) 0 0 20px; }
dialog.policy li{ font-size:var(--fs-small); font-weight:400; color:#222; margin-bottom:4px; }
.dialog-close{ position:sticky; top:0; z-index:2; display:block; float:none; margin:0 0 var(--sp-3) auto; width:fit-content; background:var(--mx-black); color:var(--mx-white); border:none; font-size:15px; padding:8px 14px; cursor:pointer; }
dialog.policy h2{ margin-top:0; }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:var(--mx-white); border-top:1px solid var(--mx-rule);
  padding:var(--sp-3); display:none;
}
.cookie-banner.is-visible{ display:block; }
.cookie-inner{ max-width:1200px; margin:0 auto; display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; }
.cookie-inner p{ font-size:14px; font-weight:400; color:var(--mx-grey-text); flex:1; min-width:260px; max-width:none; }
.cookie-actions{ display:flex; gap:var(--sp-1); flex-wrap:wrap; }
.cookie-actions .btn{ font-size:13px; padding:10px 18px; }

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:40; width:44px; height:44px;
  background:var(--mx-black); color:var(--mx-white); border:none; font-size:18px; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease);
}
.to-top.is-visible{ opacity:1; pointer-events:auto; }

/* ---------- Reveals ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- v4 : Refinery (cartes blanches sur section sombre) ---------- */
#refinery .card h3{ color:var(--mx-black); }
#refinery .card p{ color:var(--mx-grey-text); }
#refinery .card .step-index{ color:var(--mx-blue); }
.refinery-fiche{ max-width:640px; }
.fiche-dl{ margin-top:16px; display:grid; gap:10px; }
.fiche-dl > div{ display:grid; grid-template-columns:150px 1fr; gap:12px; font-size:var(--fs-small); }
.fiche-dl dt{ color:var(--mx-grey-text); font-weight:500; }
.fiche-dl dd{ color:var(--mx-black); margin:0; }
@media (max-width:640px){ .fiche-dl > div{ grid-template-columns:1fr; gap:2px; } }

/* ---------- v4 : Films (deux vidéos côte à côte) ---------- */
.films-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin-top:var(--sp-6); }
.film-item{ margin:0; }
.film-item .video-facade{ margin:0; max-width:none; }
.film-item figcaption{ margin-top:var(--sp-2); color:var(--mx-grey-text); }
@media (max-width:900px){ .films-grid{ grid-template-columns:1fr; } }

/* ---------- v4 : Value chain « à plat » (rail MineSmart, porté de v3, Laurent) ---------- */
.vc{position:relative}
.vc__legend{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin:var(--sp-2) 0 var(--sp-6);
  font-size:var(--fs-small);color:var(--mx-grey-text)}
.vc__legend .k{display:inline-flex;align-items:center;gap:var(--sp-1)}
.vc__legend .swatch{width:24px;height:14px;display:inline-block;border:2px solid}
.swatch--direct{background:var(--mx-blue);border-color:var(--mx-blue)}
.swatch--partner{background:transparent;border-color:var(--mx-grey-text)}
.vc__rail{position:relative;padding-left:44px}
.vc__rail::before{content:"";position:absolute;left:13px;top:6px;bottom:60px;width:4px;
  background:var(--mx-blue);border-radius:4px}
.vc__railtag{position:absolute;left:-2px;top:-30px;font-weight:500;font-size:var(--fs-eyebrow);
  letter-spacing:.14em;text-transform:uppercase;color:var(--mx-grey-text)}
.vc__phase{margin:var(--sp-4) 0 var(--sp-2);background:var(--mx-black);color:var(--mx-white);
  display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);flex-wrap:wrap}
.vc__phase:first-of-type{margin-top:0}
.vc__phase .ph-num{font-weight:700;color:var(--mx-blue);font-size:var(--fs-small);letter-spacing:.04em}
.vc__phase .ph-name{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:1.0625rem}
.vc__phase .ph-desc{margin-left:auto;color:#c9ced2;font-size:var(--fs-small);font-weight:300}
.vc__node{position:absolute;left:5px;width:20px;height:20px;border-radius:50%;
  background:var(--mx-blue);border:3px solid var(--mx-white);margin-top:26px;box-shadow:0 0 0 1px var(--mx-rule)}
.vc__step{position:relative;display:grid;grid-template-columns:120px 1fr;gap:var(--sp-3);
  align-items:center;background:var(--mx-white);border:1px solid var(--mx-rule);
  padding:var(--sp-3);margin-bottom:var(--sp-2)}
.vc__step.is-owned{background:var(--mx-grey-bg);border-color:#d7dde2}
.vc__step.is-owned::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--mx-blue)}
.vc__step .thumb{width:120px;height:120px;background:var(--mx-white);border:1px solid var(--mx-rule);overflow:hidden}
.vc__step .thumb img{width:100%;height:100%;object-fit:cover}
.vc__step .body{min-width:0}
.vc__step .name{font-weight:700;font-size:1.125rem;color:var(--mx-black);margin:0 0 4px;line-height:1.2}
.vc__step .spec{font-size:var(--fs-small);color:var(--mx-grey-text);font-weight:400;margin:0;max-width:60ch}
.vc__badge{display:inline-flex;align-items:center;gap:7px;margin-top:var(--sp-2);
  font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.08em;
  text-transform:uppercase;padding:4px var(--sp-1);border:1px solid;min-height:24px}
.vc__badge--direct{color:var(--mx-blue-deep);border-color:var(--mx-blue-deep)}
.vc__badge--direct::before{content:"";width:9px;height:9px;background:var(--mx-blue);display:inline-block;flex:none}
.vc__badge--partner{color:var(--mx-grey-text);border-color:#c7cdd2}
.vc__badge--partner::before{content:"";width:9px;height:9px;border:2px solid var(--mx-grey-text);display:inline-block;box-sizing:border-box;flex:none}
.vc__exit{position:relative;display:grid;grid-template-columns:120px 1fr;gap:var(--sp-3);
  align-items:center;background:var(--mx-white);border:1px dashed #c7cdd2;padding:var(--sp-3);margin-top:var(--sp-1)}
.vc__exit .thumb{width:120px;height:120px;overflow:hidden;border:1px solid var(--mx-rule);filter:grayscale(.35) opacity(.9)}
.vc__exit .thumb img{width:100%;height:100%;object-fit:cover}
.vc__exit .name{font-weight:700;color:var(--mx-grey-text);margin:0 0 4px}
.vc__exit .spec{font-size:var(--fs-small);color:var(--mx-grey-text);margin:0;max-width:60ch}
.vc__note{margin-top:var(--sp-4);font-size:var(--fs-small);color:var(--mx-grey-text);max-width:76ch}
@media (max-width:640px){
  .vc__step,.vc__exit{grid-template-columns:84px 1fr;gap:var(--sp-2);padding:var(--sp-2)}
  .vc__step .thumb,.vc__exit .thumb{width:84px;height:84px}
  .vc__phase .ph-desc{margin-left:0;flex-basis:100%}
}

/* ---------- v4 : illustrations iso de section (Refinery / Standards) ---------- */
.section-illus{ margin:var(--sp-6) auto 0; max-width:760px; }
.section-illus img{ width:100%; height:auto; display:block; }
/* Encadré blanc quand l'illustration (fond blanc) est posée sur une section sombre */
.section-illus--framed{ background:var(--mx-white); padding:var(--sp-4); }

/* ---------- v4 (retours QA 24/08) ---------- */
/* Value chain : retrait légende + trait vertical bleu + nœuds → gain de place à gauche */
.vc__legend{ display:none; }
.vc__rail{ padding-left:0; }
.vc__rail::before{ content:none; }
.vc__node{ display:none; }

/* Effet zoom au survol : vignettes Latest News + photo Contact */
.news-item summary{ overflow:hidden; }
.news-thumb{ transition:transform var(--dur-base) var(--ease); }
.news-item summary:hover .news-thumb{ transform:scale(1.06); }
.contact-info{ overflow:hidden; }
.contact-photo{ transition:transform var(--dur-base) var(--ease); }
.contact-photo:hover{ transform:scale(1.05); }

/* ================= v4 - PASSE LAYOUT (retours QA 24/08 soir) ================= */
/* 1. Métaux : 2 rangées de 4, images plus grandes */
.minerals{ grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
@media (max-width:760px){ .minerals{ grid-template-columns:repeat(2,1fr); } }

/* 2. Intros de section : le texte va jusqu'au bout (on lève le cap 65ch sur les leads) */
.lead{ max-width:none; }

/* 3. Illustrations/photos de section : taille contrôlée + cadre pour les délimiter */
.section-illus{ max-width:860px; margin:var(--sp-6) auto 0; border:1px solid var(--mx-rule); }
.section-illus img{ width:100%; max-width:860px; height:auto; display:block; }
.section-dark .section-illus{ border-color:rgba(255,255,255,.16); }

/* 4. Refinery : fiche « Open an account » en pleine largeur (colonnage) */
.refinery-fiche{ max-width:none; }
@media (min-width:900px){ .fiche-dl{ grid-template-columns:1fr 1fr; column-gap:var(--sp-8); } }

/* 5. News : « Read more » ⇄ « Read less » selon l'état ouvert */
.news-more{ font-size:0; }
.news-more::after{ content:"Read more"; font-size:15px; font-weight:500; color:var(--mx-blue-deep); }
.news-item[open] .news-more::after{ content:"Read less"; }

/* 6. Energy : zoom au survol de l'image (comme News/Contact) */
.energy-media img{ transition:transform var(--dur-base) var(--ease); }
.energy-media:hover img{ transform:scale(1.05); }

/* 7. Footer : le texte central réellement centré */
.footer-bottom{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-3); }
.footer-bottom > :nth-child(2){ text-align:center; }
.footer-bottom > :last-child{ text-align:right; }
@media (max-width:760px){ .footer-bottom{ grid-template-columns:1fr; text-align:center; }
  .footer-bottom > :nth-child(2), .footer-bottom > :last-child{ text-align:center; } }

/* 8. CTA menu : plus présent (calé sur le bouton hero « Discover our work ») */
.nav-cta{ padding:14px 28px; font-size:15px; }

/* v4 - Value chain : resserrer le bloc en colonne centrée (fini le vide à droite) + texte qui remplit la carte */
.vc{ max-width:940px; margin-left:auto; margin-right:auto; }
.vc__step .spec, .vc__exit .spec{ max-width:none; }

/* v4 - passe layout 2 : élargir photo Refinery + réduire les vides à droite du texte */
#refinery .section-illus, #refinery .section-illus img{ max-width:none; }
p, li{ max-width:80ch; }
.section-dark .small, .section-dark .muted, #refinery p{ max-width:none; }
.footer-bottom{ align-items:baseline; }

/* v4 - fiche Refinery : titre/intro à gauche, bouton à droite sur la même bande */
.fiche-head{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-6); flex-wrap:wrap; }
.fiche-intro{ flex:1 1 340px; }
.fiche-head .btn{ flex:none; }

/* v4 - effet zoom au survol des illustrations de section + vignettes value chain */
.section-illus{ overflow:hidden; }
.section-illus img{ transition:transform var(--dur-base) var(--ease); }
.section-illus:hover img{ transform:scale(1.04); }
.vc__step .thumb{ overflow:hidden; }
.vc__step .thumb img{ transition:transform var(--dur-base) var(--ease); }
.vc__step:hover .thumb img{ transform:scale(1.08); }

/* v4 - Nav : empêcher les libellés de se couper sur 2 lignes + resserrer + hamburger plus tôt */
.nav-links{ gap:18px; }
.nav-links a{ white-space:nowrap; }
@media (max-width:1100px){
  .nav-toggle{ display:block; }
  .nav-links{
    display:none; position:absolute; top:var(--nav-h); left:0; right:0;
    background:var(--mx-white); border-bottom:1px solid var(--mx-rule);
    flex-direction:column; align-items:flex-start; padding:var(--sp-3); gap:var(--sp-2);
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a.nav-cta{ align-self:flex-start; }
}

/* v4 - Navbar compacte au scroll */
.site-nav{ transition:height var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.nav-logo img{ transition:height var(--dur-base) var(--ease); }
.nav-links a{ transition:font-size var(--dur-base) var(--ease), padding var(--dur-base) var(--ease); }
.site-nav.is-scrolled{ height:44px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.site-nav.is-scrolled .nav-logo img{ height:20px; }
.site-nav.is-scrolled .nav-links a{ font-size:13px; padding:2px 0; }
.site-nav.is-scrolled .nav-links a.nav-cta{ padding:5px 14px; font-size:13px; }

/* v4 - libellé produit MineSmart par étape de la value chain */
.vc__prod{ font-size:var(--fs-eyebrow); font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--mx-blue-deep); margin:0 0 4px; }

/* ===== TEST BIG JOHN (brand book) sur les titres - à valider par Chris ===== */
@font-face{ font-family:'Big John PRO'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/bigjohn-bold.woff') format('woff'); }
@font-face{ font-family:'Big John PRO'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/bigjohn-regular.woff') format('woff'); }
@font-face{ font-family:'Big John PRO'; font-weight:300; font-style:normal; font-display:swap; src:url('../fonts/bigjohn-light.woff') format('woff'); }
/* Big John = display, seulement sur les éléments EN CAPITALES (minuscules cassées sinon). Titres H1/H2/H3 = Ubuntu. */
.eyebrow, .card-eyebrow, .kpi-number, .vc__phase .ph-name, .vc__prod, .chip{ font-family:'Big John PRO','Ubuntu',Arial,sans-serif; }
/* footer LinkedIn (lien plein) */
.footer-linkedin{ color:var(--mx-grey); font-weight:300; }

/* v4 - icônes iso en tête des cartes du flux Refinery */
.card-icon{ width:96px; height:96px; object-fit:contain; margin-bottom:var(--sp-2); display:block; }

/* v4 (retours 24/08 soir) */
/* Spacing : respiration entre l'intro value chain et la 1re phase */
.vc{ margin-top:var(--sp-8); }
/* Illustrations de section plus larges (pleine colonne, plus seulement 860px) */
.section-illus{ max-width:none; }
/* Effet survol sur toutes les cartouches blanches : cartes (refinery/standards/écosystème) + étapes value chain */
.card{ transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.12); }
.vc__step{ transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.vc__step:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.12); }

/* v4 - image d'habillage dans le corps des news (flottée) + texte pleine largeur */
.news-body-img{ float:right; width:min(42%,440px); margin:var(--sp-2) 0 var(--sp-3) var(--sp-4); border:1px solid var(--mx-rule); background:var(--mx-white); }
.news-body p, .news-body li{ max-width:none; }
.news-body::after{ content:""; display:block; clear:both; }
@media (max-width:640px){ .news-body-img{ float:none; width:100%; margin:0 0 var(--sp-3); } }

/* ============================================================
   NEWS CARDS (homepage) + ARTICLE PAGES  - v20260824v
   ============================================================ */
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6,24px);margin-top:var(--sp-8,32px)}
.news-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mx-rule,#E0E0E0);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease}
.news-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.10)}
.news-card__thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.news-card__body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px}
.news-card__date{font-family:'Big John PRO','Ubuntu',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--mx-blue-deep,#166A99)}
.news-card__title{font-family:'Ubuntu',sans-serif;font-weight:500;font-size:19px;line-height:1.3;color:var(--mx-black,#000)}
.news-card__more{margin-top:auto;font-weight:500;font-size:14px;color:var(--mx-blue-deep,#166A99)}
.news-card:hover .news-card__more{text-decoration:underline}
@media (max-width:820px){.news-grid{grid-template-columns:1fr}}

/* ---- Article page ---- */
.article{padding:calc(var(--sp-10,48px) + 40px) 0 var(--sp-12,64px)}
.article-narrow{max-width:760px}
.breadcrumb{font-size:13px;color:var(--mx-grey,#9D9C9C);margin-bottom:18px}
.breadcrumb a{color:var(--mx-blue-deep,#166A99);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.article-title{font-family:'Ubuntu',sans-serif;font-weight:700;font-size:clamp(28px,4vw,42px);line-height:1.18;margin:6px 0 22px}
.article-hero{margin:0 0 var(--sp-8,32px)}
.article-hero img{width:100%;height:auto;border-radius:10px;display:block}
.article-body p{font-size:17px;line-height:1.72;margin:0 0 20px;max-width:none}
.article-body h2{font-family:'Ubuntu',sans-serif;font-weight:600;font-size:22px;margin:34px 0 14px}
.article-body ul{margin:0 0 20px 22px}
.article-body li{font-size:17px;line-height:1.6;margin-bottom:8px}
.article-body blockquote{margin:28px 0;padding:18px 24px;border-left:4px solid var(--mx-blue,#3AA9E0);background:var(--mx-grey-bg,#F4F4F4);border-radius:0 8px 8px 0}
.article-body blockquote p{margin-bottom:6px;font-style:italic}
.article-body blockquote p.small{font-style:normal}
.article-foot{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--sp-10,48px);padding-top:var(--sp-6,24px);border-top:1px solid var(--mx-rule,#E0E0E0)}

/* v4 (fix largeur illustrations) : lever le plafond 860px de l'image
   pour qu'elle remplisse tout le conteneur .section-illus (déjà max-width:none). */
.section-illus img{ width:100%; max-width:100%; }

/* v4 : formulaire 2 colonnes pleine largeur (page subscribe) */
.form-2col{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); align-items:start; margin-top:var(--sp-4); }
.form-2col .field--full{ grid-column:1 / -1; }
.form-2col > button,
.form-2col > .form-disclaimer{ grid-column:1 / -1; }
.form-2col > button{ justify-self:start; }
@media (max-width:640px){ .form-2col{ grid-template-columns:1fr; } }

/* v4 : cross-linking prev/next + bloc mission (pages articles) */
.article-nav{display:flex;gap:16px;justify-content:space-between;margin:var(--sp-10,48px) 0 0;flex-wrap:wrap}
.article-nav__link{flex:1 1 240px;display:flex;flex-direction:column;gap:4px;padding:16px 20px;border:1px solid var(--mx-rule,#E0E0E0);border-radius:10px;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease;background:#fff}
.article-nav__link:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.10)}
.article-nav__link span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mx-blue-deep,#166A99);font-family:'Big John PRO','Ubuntu',sans-serif}
.article-nav__link strong{font-weight:500;font-size:15px;line-height:1.3;color:var(--mx-black,#000)}
.article-nav__next{text-align:right;align-items:flex-end}
.article-nav__spacer{flex:1 1 240px}
.article-mission{margin-top:var(--sp-10,48px);padding:var(--sp-8,32px);background:var(--mx-grey-bg,#F4F4F4);border-radius:12px;text-align:center}
.article-mission .eyebrow{display:inline-block}
.article-mission h2{font-family:'Ubuntu',sans-serif;font-weight:600;font-size:clamp(20px,3vw,26px);line-height:1.25;margin:8px auto 12px;max-width:38ch}
.article-mission p{max-width:60ch;margin:0 auto 20px;color:var(--mx-grey-text,#555)}
.article-mission .article-foot{justify-content:center;border-top:none;padding-top:0;margin-top:0}
.article-back{margin-top:24px}
.article-back a{color:var(--mx-blue-deep,#166A99);text-decoration:none}
.article-back a:hover{text-decoration:underline}
@media (max-width:600px){.article-nav__next{text-align:left;align-items:flex-start}}

/* v4 (a11y contraste) : liens en section sombre en bleu clair (ratio AA sur noir) */
.section-dark a:not(.btn){ color:var(--mx-blue); }
.section-dark a:not(.btn):hover{ color:#5FBBE8; opacity:1; }

/* mobile: contact section stacks (info over form) */
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; gap:var(--sp-6); } }