:root{
    --gray-950:#202124;
    --gray-900:#303237;
    --gray-800:#3E4046;
    --gray-700:#5E6168;   /* assombri le 30/07/2026 : #6E727A tombait sous AA (4,10:1
                             sur blanc chaud) avant même tout motif de fond. Voir
                             demo-motifs-fonds.html pour les mesures. */
    /* 600 et 500 corrigés le 30/07/2026 : l'échelle était INVERSÉE — le 600 (#8A8B8E)
       était plus clair que le 500 (#7A7D83), alors que partout ailleurs le nombre qui
       monte assombrit. Qui cherchait « un gris un peu plus foncé » prenait donc le 600
       et obtenait le pire contraste : 3,41:1 sur blanc, 2,90:1 sur blanc chaud, pour du
       texte à 14-16 px (.folder-count, .library-subhead, .gallery-note, .leader-cite
       span, .resource-action). Nouvelles valeurs : 500 = 5,49:1 sur blanc / 4,67:1 sur
       blanc chaud ; 600 = 5,84:1 / 4,97:1. L'ordre 500 < 600 < 700 est rétabli.
       Les usages du 500 en SECTION SOMBRE ont été déplacés vers --gray-400 à cette
       occasion (.chain-card-total, .chain-step-media.placeholder) : les assombrir les
       aurait dégradés au lieu de les corriger. */
    --gray-600:#62656B;
    --gray-500:#67696F;
    --gray-400:#ADAFB2;
    --gray-300:#C0C2C6;
    --gray-200:#C6C6C6;
    --gray-100:#D7D9DD;
    --gray-50:#F7F7F6;
    --white:#FFFFFF;
    --amber-600:#F4B43B;
    --amber-500:#F9B042;     --amber-500-rgb:249,176,66;
    --amber-300:#F7C95E;
    --amber-50:#FDF1DD;
    --red-600:#E62A2A;
    --green-600:#4BAF4F;
    /* --- Direction artistique « Minerai » (Lot 1) : couleurs de MATIÈRE, tirées de la
       latérite des photos et du basalte des sections sombres. L'ambre reste la seule
       couleur d'ACTION (CTA, liens, états actifs) ; la latérite ne porte jamais de texte
       courant sous 18px (contraste insuffisant). --- */
    /* Arbitrage de charte rendu le 30/07/2026 : l'ambre est CONSERVÉ — ses trois nuances
       sont extraites du logo (#F9B042, #F4B43B, #F7C95E y figurent littéralement), et
       l'abandonner décorrélerait le site d'un logo qu'on ne peut pas redessiner. En
       revanche la matière est décalée vers l'ocre du prototype du 22/07 : teinte ramenée
       de ~25° à 17° (celle de son ocre #B85C38), saturation relevée de ~6 points,
       LUMINOSITÉ INCHANGÉE — c'est ce dernier point qui préserve tous les contrastes.
       --laterite-100 n'est pas touché : à 92 % de luminosité la teinte n'est plus
       perceptible, et c'est le fond de toutes les sections chaudes.
       Le triplet -rgb double la valeur hex pour les usages en rgba() ; les deux doivent
       rester synchronisés (voir aussi tools/build-motifs.py, constante CLAIR). */
    --laterite-800:#61301D;   --laterite-800-rgb:97,48,29;
    --laterite-700:#713822;   /* ajouté le 30/07/2026 : nuance intermédiaire du dégradé
                                 de carotte, jusque-là en dur (#6d4026) */
    --laterite-600:#8E482C;   --laterite-600-rgb:142,72,44;
    --laterite-300:#DBAC99;
    --laterite-100:#F5EBE1;
    --basalte-900:#1B1C1F;    --basalte-900-rgb:27,28,31;
    --basalte-800:#26282C;
    --font-display:'Poppins',sans-serif;
    --font-body:'Montserrat',sans-serif;
    --container:1240px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--font-body);color:var(--gray-900);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit;cursor:pointer;background:none;border:none;}
  .container{max-width:var(--container);margin:0 auto;padding:0 32px;}
  h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.15;letter-spacing:-0.01em;color:var(--gray-900);}
  :focus-visible{outline:3px solid var(--amber-500);outline-offset:2px;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  .skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--amber-500);color:var(--gray-900);padding:10px 20px;font-weight:700;font-size:15px;border-radius:0 0 8px 0;}
  .skip-link:focus{left:0;}
  .btn-disabled{opacity:.6;cursor:default;pointer-events:none;}

  .site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 0;transition:background .35s ease,padding .35s ease,box-shadow .35s ease;}
  .site-header.scrolled{background:rgba(255,255,255,.98);backdrop-filter:blur(8px);padding:12px 0;box-shadow:0 1px 0 var(--gray-100);}
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-left:165px;padding-right:170px;}
  .logo-link{display:flex;align-items:center;flex-shrink:0;}
  .logo-link img{height:41px;width:auto;transition:height .35s ease;}
  .site-header.scrolled .logo-link img{height:37px;}
  .site-header .logo-link{position:absolute;top:50%;left:16px;transform:translateY(-50%);z-index:110;}
  .site-nav{display:flex;gap:4px;align-items:center;}
  .site-nav a{font-size:17px;font-weight:600;padding:10px 14px;border-radius:6px;color:rgba(255,255,255,.92);transition:color .25s;}
  .site-header.scrolled .site-nav a{color:var(--gray-700);}
  .site-nav a:hover{color:var(--amber-500);}

  .nav-item{position:relative;display:flex;align-items:center;}
  .nav-dropdown-toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:-10px;color:rgba(255,255,255,.85);transition:color .25s,transform .25s;}
  .site-header.scrolled .nav-dropdown-toggle{color:var(--gray-600);}
  .nav-dropdown-toggle svg{width:14px;height:14px;}
  .nav-item.has-dropdown:hover .nav-dropdown-toggle,
  .nav-item.has-dropdown.open .nav-dropdown-toggle{color:var(--amber-500);}
  .nav-item.has-dropdown.open .nav-dropdown-toggle{transform:rotate(180deg);}
  .nav-dropdown-menu{position:absolute;top:100%;left:0;min-width:240px;padding:10px;margin-top:10px;background:var(--white);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:120;}
  .nav-item.has-dropdown:hover .nav-dropdown-menu,
  .nav-item.has-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
  .nav-dropdown-menu a{display:block;padding:11px 14px;border-radius:6px;font-size:15px;font-weight:600;color:var(--gray-800) !important;white-space:nowrap;}
  .nav-dropdown-menu a:hover{background:var(--amber-50);color:var(--gray-900) !important;}
  .header-right{display:flex;align-items:center;gap:20px;}
  .lang-toggle{display:flex;border:1px solid rgba(255,255,255,.4);border-radius:20px;overflow:hidden;font-size:13px;font-weight:700;flex-shrink:0;}
  .site-header.scrolled .lang-toggle{border-color:var(--gray-200);}
  /* La langue courante est un <span>, l'autre un <a> dès que sa page existe dans en/
     (cf. tools/build-includes.py). Les deux doivent porter la même géométrie, sans quoi
     la pastille ambre se décale au passage d'une langue à l'autre. */
  .lang-toggle span,.lang-toggle a{padding:6px 11px;color:rgba(255,255,255,.65);transition:color .25s;}
  .lang-toggle a:hover,.lang-toggle a:focus-visible{color:var(--white);}
  /* Attention à l'ordre de spécificité ici. « .site-header.scrolled .lang-toggle span »
     (0,3,1) l'emporte sur « .lang-toggle span.active » (0,2,1) : dans l'en-tête défilé, la
     pastille active gardait donc son fond ambre mais recevait la couleur des spans inactifs.
     Résultat : gris clair sur ambre, 1,18:1 — le pire contraste du site, sur 18 pages.
     D'où la règle .active explicitement redéclarée à l'état défilé. */
  .site-header.scrolled .lang-toggle span,.site-header.scrolled .lang-toggle a{color:var(--gray-700);}
  .site-header.scrolled .lang-toggle a:hover,.site-header.scrolled .lang-toggle a:focus-visible{color:var(--gray-900);}
  .lang-toggle span.active{background:var(--amber-500);color:var(--gray-900);}
  .site-header.scrolled .lang-toggle span.active{color:var(--gray-900);}
  .menu-toggle{display:none;flex-direction:column;gap:5px;padding:6px;}
  .menu-toggle span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:.25s;}
  .site-header.scrolled .menu-toggle span{background:var(--gray-900);}

  .partner-badge{display:flex;flex-direction:row;align-items:center;gap:8px;flex-shrink:0;padding:7px 10px;background:rgba(255,255,255,.95);border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.16);transition:padding .25s;}
  .partner-badge img{height:20px;width:auto;display:block;}
  .partner-badge img:first-child{padding-right:8px;border-right:1px solid rgba(48,50,55,.16);}
  .site-header .partner-badge{position:absolute;top:18px;right:16px;z-index:110;}
  .site-header.scrolled .partner-badge{padding:5px 8px;}
  .site-header.scrolled .partner-badge img{height:17px;}
  .site-footer .container{padding-right:170px;}
  .footer-top{display:flex;justify-content:flex-end;margin-bottom:0;}
  .footer-top .partner-badge{position:absolute;top:76px;right:16px;}
  .footer-top .partner-badge img{height:24px;}

  .hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--gray-950);}
  .hero-bg{position:absolute;inset:0;}
  .hero-bg > img{width:100%;height:100%;object-fit:cover;display:block;}
  /* Parallaxe des hero secondaires : la photo défile plus lentement que le texte,
     ce qui creuse la profondeur. Le sur-dimensionnement de 12 % est indispensable —
     sans lui la translation découvrirait un bord vide en haut ou en bas.
     .page-hero porte overflow:hidden, rien ne déborde. will-change prévient le
     navigateur qu'il faut isoler la couche : sinon la photo est repeinte à chaque
     image. Neutralisé sous mouvement réduit (voir le garde-fou [data-parallaxe]). */
  .page-hero .hero-bg > img[data-parallaxe]{height:112%;top:-6%;position:absolute;
    will-change:transform;}
  .terrace{position:absolute;left:-5%;right:-5%;bottom:0;}
  .terrace-1{height:40%;background:#3c4046;opacity:.5;clip-path:polygon(0 45%,14% 22%,30% 48%,48% 14%,66% 38%,84% 16%,100% 32%,100% 100%,0 100%);}
  .terrace-2{height:29%;background:#2a2c30;opacity:.75;clip-path:polygon(0 62%,18% 32%,36% 56%,56% 20%,76% 52%,100% 26%,100% 100%,0 100%);}
  .terrace-3{height:19%;background:var(--basalte-900);clip-path:polygon(0 72%,22% 42%,44% 66%,64% 30%,86% 60%,100% 46%,100% 100%,0 100%);}
  .horizon-glow{position:absolute;left:50%;bottom:24%;width:64%;height:220px;transform:translateX(-50%);background:radial-gradient(ellipse at center, rgba(var(--amber-500-rgb),.32) 0%, rgba(var(--amber-500-rgb),0) 72%);}
  .grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:46px 46px;}
  /* bande haute plus dense pour asseoir la nav blanche sur les ciels clairs */
  .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,33,36,.76) 0%,rgba(32,33,36,.46) 20%,rgba(32,33,36,.68) 55%,rgba(32,33,36,.94) 100%);}
  .hero-content{position:relative;z-index:2;max-width:700px;padding-top:88px;}
  .eyebrow{display:inline-block;color:var(--amber-500);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px;}
  .hero h1{color:var(--white);font-size:clamp(36px,5.5vw,62px);margin-bottom:22px;}
  .hero p.lead{color:var(--gray-100);font-size:20px;max-width:560px;margin-bottom:38px;}
  .cta-row{display:flex;gap:16px;flex-wrap:wrap;}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:15px 28px;border-radius:4px;font-weight:700;font-size:17px;letter-spacing:.02em;transition:all .25s;}
  .btn-primary{background:var(--amber-500);color:var(--gray-900);}
  .btn-primary:hover{background:var(--amber-300);transform:translateY(-1px);}
  .btn-outline{border:1.5px solid rgba(255,255,255,.45);color:var(--white);}
  .btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,.08);}
  .asset-tag{position:absolute;bottom:22px;right:24px;z-index:3;font-size:13px;color:var(--gray-100);background:rgba(0,0,0,.4);border:1px dashed rgba(255,255,255,.3);border-radius:4px;padding:6px 12px;display:flex;align-items:center;gap:6px;}
  .asset-tag svg{width:13px;height:13px;flex-shrink:0;}

  .stats{background:var(--white);padding:60px 0;border-bottom:1px solid var(--gray-100);}
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
  .stats-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
  .stats-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;max-width:520px;}
  .stat-num{font-family:var(--font-display);font-weight:800;font-size:clamp(31px,3.8vw,50px);color:var(--laterite-600);}
  .stat-label{font-size:16px;color:var(--gray-700);font-weight:500;margin-top:8px;}

  .manifesto{position:relative;color:var(--white);padding:120px 0;overflow:hidden;background:var(--gray-950);}
  .manifesto-bg{position:absolute;inset:0;z-index:0;}
  .manifesto-bg img{width:100%;height:100%;object-fit:cover;}
  .manifesto-bg-overlay{position:absolute;inset:0;background:linear-gradient(125deg,rgba(24,25,27,.94),rgba(24,25,27,.82) 45%,rgba(24,25,27,.94));}
  .manifesto-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:96px;align-items:stretch;max-width:none;padding:0 56px;}
  .manifesto-card{background:linear-gradient(135deg,rgba(var(--amber-500-rgb),.16),rgba(255,255,255,.05));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:28px 32px;display:flex;flex-direction:column;justify-content:center;align-self:center;}
  .manifesto-card .label{display:block;color:var(--amber-500);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px;}
  .manifesto-card p{font-family:var(--font-display);font-weight:500;font-size:clamp(13px,1.05vw,15px);margin:0 0 10px;line-height:1.5;color:var(--gray-100);}
  .manifesto-card .signoff{margin-bottom:16px;font-weight:700;color:var(--amber-500);font-size:clamp(13px,1.1vw,15px);}
  .manifesto-card .btn-primary{align-self:flex-start;padding:9px 18px;font-size:13px;}

  .manifesto-marquee{position:relative;height:860px;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.14);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);}
  .marquee-track{display:flex;flex-direction:column;gap:16px;will-change:transform;}
  .marquee-item{flex-shrink:0;height:150px;border-radius:16px;overflow:hidden;}
  .marquee-item img{width:100%;height:100%;object-fit:cover;display:block;}
  .marquee-arrow{position:absolute;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;background:rgba(20,21,23,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35);color:var(--white);display:flex;align-items:center;justify-content:center;z-index:6;transition:background .2s,border-color .2s,color .2s;}
  .marquee-arrow svg{width:16px;height:16px;}
  .marquee-arrow:hover{background:var(--amber-500);border-color:var(--amber-500);color:var(--gray-900);}
  .marquee-arrow-up{top:10px;}
  .marquee-arrow-down{bottom:10px;}
  /* Apparition au défilement. La courbe est volontairement « posée » (décélération
     marquée, pas de rebond) : registre institutionnel, on doit la sentir sans la
     remarquer. --reveal-i est le rang dans la grille, posé par main.js ; il produit
     la cascade. Un élément seul dans son parent n'a pas de rang, donc pas de délai. */
  .reveal{opacity:0;transform:translateY(22px);
    transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1);
    transition-delay:calc(var(--reveal-i,0) * var(--reveal-pas,0ms));}
  .reveal.visible{opacity:1;transform:none;}

  .news{padding:110px 0;background:var(--gray-50);border-top:1px solid var(--gray-100);}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px;gap:24px;flex-wrap:wrap;}
  .section-head .label{display:block;color:var(--laterite-600);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;}
  .section-head h2{font-size:clamp(29px,3.6vw,41px);}
  .section-head a{font-weight:700;font-size:17px;color:var(--gray-900);border-bottom:2px solid var(--amber-500);padding-bottom:3px;}
  /* Texte d'introduction + photo en regard (4 pages Opérations). La photo se cale
     sur le BLOC DE TEXTE, pas sur le titre : même haut, même bas, même hauteur,
     quel que soit le nombre de lignes des paragraphes.
     Pas de .frame-ring ici : le contour est réservé aux grandes figures isolées.

     Deux points qui ne vont pas de soi :
     1. margin-top est porté par la rangée, et remis à zéro sur le premier
        paragraphe : .content-lead a un margin-top de 18 px qui, sinon, décalerait
        le texte vers le bas et ferait mentir l'alignement des deux hauts.
     2. L'img est sortie du flux. .media-frame img est en height:100%, ce qui dans
        un cadre de hauteur indéfinie retombe sur auto : la photo imposait alors sa
        hauteur naturelle et c'est elle, et non le texte, qui dictait la hauteur de
        la ligne flex. En absolu elle ne compte plus dans le calcul — le cadre suit
        le texte, et object-fit:cover recadre ce qu'il faut.
     La largeur du texte reste bornée par le max-width:760px de .content-lead : la
     justesse de lecture du site est conservée, la colonne ne s'élargit pas. */
  .lead-media-row{display:flex;align-items:stretch;gap:40px;margin-top:18px;}
  .lead-media-text{flex:1 1 auto;min-width:0;}
  .lead-media-text .content-lead:first-child{margin-top:0;}
  .lead-media{flex:0 0 auto;width:min(34%,380px);align-self:stretch;border-radius:8px;}
  .lead-media > img{position:absolute;inset:0;}
  .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  .news-card{border:1px solid var(--gray-100);border-radius:8px;overflow:hidden;transition:box-shadow .25s,transform .25s,opacity .3s ease;}
  .news-card:hover{box-shadow:0 12px 28px rgba(48,50,55,.1);transform:translateY(-3px);}
  .news-thumb{aspect-ratio:16/10;background:var(--gray-50);position:relative;display:flex;align-items:center;justify-content:center;color:var(--gray-400);}
  .news-thumb svg{width:34px;height:34px;}
  .news-thumb .filename{position:absolute;bottom:9px;left:9px;font-size:12px;background:rgba(255,255,255,.92);padding:3px 9px;border-radius:3px;color:var(--gray-600);font-weight:600;}
  .news-body{padding:24px;}
  .news-date{font-size:14px;color:var(--laterite-600);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
  .news-title{font-family:var(--font-display);font-weight:600;font-size:21px;margin:10px 0 8px;line-height:1.35;}
  .news-excerpt{font-size:17px;color:var(--gray-700);}
  .news-body .link-cta{display:inline-block;margin-top:14px;font-size:15px;font-weight:700;color:var(--gray-900);border-bottom:2px solid var(--amber-500);padding-bottom:2px;}

  .news-feature-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:stretch;}
  .news-feature{display:flex;flex-direction:column;}
  .news-feature-media{aspect-ratio:16/10;border-radius:8px;margin-bottom:26px;background:var(--gray-50);border:1px solid var(--gray-100);}
  .news-feature-body{flex:1;display:flex;flex-direction:column;}
  .news-feature-body .news-title{font-size:clamp(23px,2.3vw,29px);margin:14px 0 14px;}
  .news-feature-body .news-excerpt{font-size:18px;margin-bottom:22px;}
  .news-feature-body .link-cta{margin-top:auto;align-self:flex-start;font-size:16px;font-weight:700;color:var(--gray-900);border-bottom:2px solid var(--amber-500);padding-bottom:3px;}
  .news-list{display:flex;flex-direction:column;}
  .news-list-item{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--gray-100);transition:transform .25s;}
  .news-list-item:first-child{padding-top:0;}
  .news-list-item:last-child{border-bottom:none;}
  .news-list-thumb{width:108px;height:80px;flex-shrink:0;border-radius:6px;background:var(--gray-50);border:1px solid var(--gray-100);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--gray-400);}
  .news-list-thumb svg{width:22px;height:22px;}
  .news-list-body{flex:1;min-width:0;}
  .news-list-title{font-family:var(--font-display);font-weight:600;font-size:17px;margin-top:6px;line-height:1.35;transition:color .2s;}
  .news-list-item:hover .news-list-title{color:var(--laterite-600);} /* l'ambre tombait à 1,84:1 : le titre devenait moins lisible au survol */
  .news-list-item:hover{transform:translateX(4px);}

  .site-footer{position:relative;background:var(--gray-950);color:var(--gray-400);padding:76px 0 30px;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.1);}
  .footer-logo img{height:39px;width:auto;margin-bottom:18px;} /* width:auto indispensable : sans lui l'attribut width= du HTML fait loi et max-width:100% étire le logo */
  .footer-grid p{font-size:16px;line-height:1.7;max-width:280px;}
  .footer-col h2{font-family:var(--font-body);color:var(--white);font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px;}
  .footer-col ul li{margin-bottom:11px;}
  .footer-col a{font-size:16px;transition:color .2s;}
  .footer-col a:hover{color:var(--amber-500);}
  .social-row{display:flex;gap:12px;margin-top:20px;}
  .social-row a{width:34px;height:34px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s;}
  .social-row a:hover{background:var(--amber-500);border-color:var(--amber-500);}
  .social-row a:hover svg{stroke:var(--gray-900);}
  .social-row svg{width:15px;height:15px;stroke:var(--gray-200);}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:15px;flex-wrap:wrap;gap:12px;}
  .footer-bottom .legal-links{display:flex;gap:22px;}
  .footer-bottom a:hover{color:var(--amber-500);}

  /* ---------- leader quote ---------- */
  .leader-quote{padding:100px 0;background:var(--gray-50);}
  .leader-grid{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:center;}
  .leader-portrait{aspect-ratio:3/4;border-radius:8px;background:var(--gray-100);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--gray-400);border:1px solid var(--gray-200);}
  .leader-portrait svg{width:52px;height:52px;}
  .leader-portrait .filename{position:absolute;bottom:10px;left:10px;right:10px;font-size:12px;background:rgba(255,255,255,.92);padding:4px 8px;border-radius:3px;color:var(--gray-600);font-weight:600;text-align:center;}
  .leader-quote .label{display:block;color:var(--laterite-600);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;}
  .leader-quote blockquote{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,3.1vw,36px);line-height:1.45;color:var(--gray-900);margin-bottom:24px;}
  .leader-cite{font-size:17px;font-weight:700;color:var(--gray-700);}
  .leader-cite span{display:block;font-weight:500;color:var(--gray-600);font-size:16px;margin-top:3px;}

  /* ---------- operations overview ---------- */
  .ops-overview{padding:110px 0;background:var(--white);}
  .ops-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:52px;}
  .ops-card{padding:32px 26px;border:1px solid var(--gray-100);border-radius:8px;transition:border-color .25s,transform .25s;}
  .ops-card:hover{border-color:var(--amber-500);transform:translateY(-3px);}
  .ops-icon{width:52px;height:52px;border-radius:50%;background:var(--amber-50);display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--amber-600);}
  .ops-icon svg{width:26px;height:26px;}
  .ops-card h3{font-size:20px;margin-bottom:10px;}
  .ops-card p{font-size:17px;color:var(--gray-700);margin-bottom:16px;min-height:56px;}
  .ops-card a{font-size:16px;font-weight:700;color:var(--gray-900);border-bottom:1.5px solid var(--amber-500);padding-bottom:2px;}

  /* ---------- partners band ---------- */
  .partners-band{padding:70px 0;background:var(--gray-50);border-top:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100);}
  .partners-head{text-align:center;max-width:620px;margin:0 auto 40px;}
  .partners-head .label{display:block;color:var(--laterite-600);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;}
  .partners-head p{font-size:18px;color:var(--gray-700);}
  .partners-row{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;}
  .partner-chip{display:flex;align-items:center;gap:12px;padding:12px 28px;border:1px dashed var(--amber-300);border-radius:8px;background:var(--amber-50);}
  .partner-chip .p-name{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--gray-900);}
  .partner-chip.has-logo{border-style:solid;border-color:var(--gray-100);background:var(--white);padding:12px 28px;}
  .partner-chip.has-logo img{height:34px;width:auto;display:block;}
  .partner-logo-mono{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:34px;min-width:34px;padding:0 9px;border-radius:6px;background:var(--white);border:1px solid var(--amber-300);font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--gray-900);}
  .partner-logo-mono--lg{height:40px;min-width:40px;padding:0 12px;font-size:16px;}

  /* ---------- rse teaser ---------- */
  .rse-teaser{padding:110px 0;}
  .rse-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  .rse-image{aspect-ratio:4/3;background:var(--gray-50);border-radius:8px;border:1px solid var(--gray-100);position:relative;display:flex;align-items:center;justify-content:center;color:var(--gray-400);}
  .rse-image svg{width:38px;height:38px;}
  .rse-image .filename{position:absolute;bottom:10px;left:10px;font-size:12px;background:rgba(255,255,255,.92);padding:3px 9px;border-radius:3px;color:var(--gray-600);font-weight:600;}
  .rse-teaser .label{display:block;color:var(--laterite-600);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;}
  .rse-teaser h2{font-size:clamp(29px,3.6vw,38px);margin-bottom:18px;}
  .rse-teaser p{font-size:18px;color:var(--gray-700);margin-bottom:26px;}
  .rse-chips{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px;}
  .rse-chip{padding:9px 16px;border-radius:20px;background:var(--amber-50);color:var(--laterite-600);font-size:16px;font-weight:700;}
  .rse-teaser a.link-cta{font-size:17px;font-weight:700;color:var(--gray-900);border-bottom:2px solid var(--amber-500);padding-bottom:3px;}


  /* ---------- page hero (compact) ---------- */
  .page-hero{position:relative;min-height:420px;display:flex;align-items:center;overflow:hidden;background:var(--gray-950);padding-top:80px;}
  .page-hero .hero-content{position:relative;z-index:2;max-width:700px;}
  .breadcrumb{color:var(--gray-200);font-size:16px;font-weight:600;margin-bottom:18px;}
  .breadcrumb a{color:var(--gray-200);opacity:.75;}
  .breadcrumb a:hover{color:var(--amber-500);opacity:1;}
  .breadcrumb .sep{margin:0 8px;opacity:.5;}
  .page-hero h1{color:var(--white);font-size:clamp(36px,5.3vw,58px);}
  .page-hero .lead{color:var(--gray-100);font-size:19px;max-width:560px;margin-top:16px;}

  /* ---------- generic content sections ---------- */
  .content-section{padding:100px 0;}
  .content-section.alt{background:var(--gray-50);}
  #galerieMultimedia{scroll-margin-top:100px;}
  .content-lead{font-size:20px;color:var(--gray-700);max-width:760px;line-height:1.75;margin-top:18px;}

  .diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 24px;margin-top:48px;}

  .value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;}
  .value-card{text-align:center;padding:28px 20px;border-top:2px solid var(--amber-500);}
  .value-num{font-family:var(--font-display);font-weight:800;color:var(--laterite-600);font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;display:block;margin-top:16px;}
  .value-card h3{font-size:20px;margin-bottom:8px;}
  .value-card p{font-size:17px;color:var(--gray-700);}

  .profile-grid{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start;margin-top:48px;padding:36px;background:var(--gray-50);border-radius:8px;}
  .profile-portrait{aspect-ratio:3/4;border-radius:8px;background:var(--white);border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;color:var(--gray-400);position:relative;}
  .profile-portrait svg{width:48px;height:48px;}
  .profile-portrait .filename{position:absolute;bottom:8px;left:8px;right:8px;font-size:11px;background:rgba(255,255,255,.92);padding:4px 6px;border-radius:3px;color:var(--gray-600);font-weight:600;text-align:center;}
  .profile-name{font-family:var(--font-display);font-weight:700;font-size:25px;margin-bottom:4px;}
  .profile-role{color:var(--amber-600);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:18px;}
  .profile-bio{font-size:18px;color:var(--gray-700);line-height:1.75;}

  .ethics-list{margin-top:28px;display:flex;flex-direction:column;gap:0;}
  .ethics-item{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--gray-100);}
  .ethics-item svg{width:20px;height:20px;flex-shrink:0;color:var(--amber-500);margin-top:2px;}
  .ethics-item p{font-size:17px;color:var(--gray-800);}

  .timeline{margin-top:60px;position:relative;}
  .timeline-track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
  .timeline-track::before{content:'';position:absolute;top:11px;left:6%;right:6%;height:2px;background:var(--gray-200);}
  .timeline-node{position:relative;padding:0 16px;text-align:center;}
  .timeline-dot{width:24px;height:24px;border-radius:50%;background:var(--amber-500);border:4px solid var(--white);box-shadow:0 0 0 2px var(--amber-500);margin:0 auto 20px;position:relative;z-index:2;}
  .timeline-year{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--gray-900);margin-bottom:8px;}
  .timeline-desc{font-size:16px;color:var(--gray-700);line-height:1.6;}

  .partner-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;}
  .partner-detail-card{padding:36px;border:1px solid var(--gray-100);border-radius:8px;}
  .partner-detail-logo{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--gray-900);}
  .partner-detail-logo-img{height:32px;width:auto;display:block;}
  .partner-detail-card p{font-size:17px;color:var(--gray-700);line-height:1.7;}

  /* Lien de la page courante. En haut de page l'en-tête est transparent au-dessus du hero
     sombre : l'ambre y est parfait. Mais dès le défilement l'en-tête passe en blanc à 98 %
     et l'ambre tombe à 1,86:1 — l'indicateur de page courante devenait le texte le moins
     lisible de la navigation, sur les 17 pages. La latérite tient 6,74:1 sur blanc.
     !important est nécessaire pour reprendre la main sur la règle ambre ci-dessus. */
  .site-nav a.active{color:var(--amber-500) !important;}
  .site-header.scrolled .site-nav a.active{color:var(--laterite-600) !important;}


  /* ---------- media frame : cadre image pro, prêt pour vraies photos + lightbox ---------- */
  .media-frame{position:relative;overflow:hidden;cursor:pointer;}
  .media-frame > svg{transition:transform .5s cubic-bezier(.2,.8,.2,1);}
  .media-frame:hover > svg{transform:scale(1.08);}
  .media-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
  /* Révélation en strates : l'image se dégage par balayage plutôt que par fondu,
     comme une couche que l'on met au jour. On anime clip-path et NON transform :
     l'image porte déjà un scale au survol, les deux se seraient écrasés.
     Le balayage part avec un temps de retard sur la cascade du bloc parent, pour que
     le cadre arrive d'abord et l'image ensuite. Sans JavaScript, .visible n'est jamais
     posé : le bloc <noscript> de chaque page neutralise le clip-path (sinon l'image
     resterait invisible). */
  .reveal .media-frame img{clip-path:inset(0 100% 0 0);
    transition:transform .5s cubic-bezier(.2,.8,.2,1),
               clip-path .85s cubic-bezier(.22,.61,.36,1);
    transition-delay:0s,calc(var(--reveal-i,0) * var(--reveal-pas,0ms) + 90ms);}
  .reveal.visible .media-frame img{clip-path:inset(0 0 0 0);}
  .media-frame:hover img{transform:scale(1.06);}
  .expand-hint{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s;color:var(--gray-900);pointer-events:none;}
  .media-frame:hover .expand-hint{opacity:1;transform:scale(1);}
  .expand-hint svg{width:15px;height:15px;}
  .media-caption{position:absolute;left:0;right:0;bottom:0;padding:22px 18px 14px;background:linear-gradient(180deg,rgba(16,17,18,0) 0%,rgba(16,17,18,.6) 100%);color:var(--white);font-size:15px;font-weight:600;}

  /* ---------- lightbox (agrandissement image) ---------- */
  .lightbox-overlay{position:fixed;inset:0;background:rgba(16,17,18,.93);z-index:1000;display:flex;align-items:center;justify-content:center;padding:60px 24px 24px;opacity:0;pointer-events:none;transition:opacity .3s ease;}
  .lightbox-overlay.open{opacity:1;pointer-events:auto;}
  .lightbox-box{max-width:880px;width:100%;background:var(--gray-50);border-radius:8px;overflow:hidden;transform:scale(.96);transition:transform .3s ease;}
  .lightbox-overlay.open .lightbox-box{transform:scale(1);}
  .lightbox-media{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:var(--gray-400);background:#141517;}
  .lightbox-media svg{width:52px;height:52px;}
  .lightbox-media img{width:100%;height:100%;object-fit:contain;display:block;}
  .lightbox-media svg.lightbox-illus{width:100%;height:100%;}
  .lightbox-caption{padding:18px 24px;font-size:16px;color:var(--gray-700);border-top:1px solid var(--gray-100);font-weight:600;}
  .lightbox-close{position:fixed;top:20px;right:24px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:var(--white);transition:background .2s;z-index:1001;}
  .lightbox-close:hover{background:rgba(255,255,255,.22);}
  .lightbox-close svg{width:18px;height:18px;}


  /* ---------- chaîne logistique scroll-driven (carte fixe + étapes illustrées, module signature) ---------- */
  .chain-section{padding:100px 0;background:var(--gray-950);color:var(--white);}
  .chain-section .label{display:block;color:var(--amber-500);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;}
  .chain-section h2{color:var(--white);font-size:clamp(29px,3.6vw,41px);}
  .chain-section .content-lead{color:var(--gray-300);}
  .chain-scroll{display:grid;grid-template-columns:360px 1fr;gap:64px;margin-top:56px;align-items:start;}
  .chain-sticky-col{position:sticky;top:120px;}
  .chain-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:40px 36px;}
  .chain-card-index{font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:var(--amber-500);letter-spacing:.06em;margin-bottom:16px;}
  .chain-card-total{color:var(--gray-400);} /* section sombre : gris CLAIR (6,54:1 sur la carte) */
  .chain-card h3{color:var(--white);font-size:26px;margin-bottom:14px;}
  .chain-card p{color:var(--gray-300);font-size:15px;line-height:1.7;min-height:96px;}
  .chain-progress{margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);}
  .chain-progress-head{display:flex;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-400);margin-bottom:10px;}
  .chain-progress-head span:last-child{color:var(--amber-500);}
  .chain-progress-track{height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;}
  .chain-progress-fill{height:100%;background:var(--amber-500);transition:width .5s cubic-bezier(.2,.8,.2,1);}

  .chain-steps-col{position:relative;}
  .chain-line{position:absolute;top:6px;bottom:6px;left:19px;width:2px;background:rgba(255,255,255,.12);}
  .chain-line-fill{position:absolute;top:0;left:0;width:2px;height:0%;background:var(--amber-500);transition:height .4s cubic-bezier(.2,.8,.2,1);}
  .chain-step{display:flex;gap:24px;padding-bottom:64px;position:relative;opacity:.4;transition:opacity .4s;}
  .chain-step:last-child{padding-bottom:0;}
  .chain-steps-col:not(.js-ready) .chain-step{opacity:1;}
  .chain-step.active{opacity:1;}
  .chain-step-dot{flex:0 0 40px;height:40px;position:relative;z-index:2;}
  .chain-step-dot::before{content:'';position:absolute;top:9px;left:13px;width:14px;height:14px;border-radius:50%;background:var(--gray-700);border:3px solid var(--gray-950);transition:background .3s,transform .3s;}
  .chain-step.active .chain-step-dot::before{background:var(--amber-500);transform:scale(1.25);}
  .chain-step-media{flex:0 0 200px;aspect-ratio:4/3;border-radius:10px;}
  .chain-step-media.placeholder{background:rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--gray-400);position:relative;}
  .chain-step-media.placeholder .media-icon{width:30px;height:30px;}
  .chain-step-media.placeholder .filename{font-size:10px;color:var(--gray-400);text-align:center;padding:0 8px;word-break:break-all;}
  .chain-step-body{flex:1;padding-top:2px;}
  .chain-step-tag{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-500);margin-bottom:8px;}
  .chain-step-body h4{color:var(--white);font-size:21px;margin-bottom:8px;}
  .chain-step-body p{color:var(--gray-300);font-size:15px;line-height:1.65;}

  /* ---------- operation segments (alternance texte / média) ---------- */
  .op-segment{padding:90px 0;}
  .op-segment.alt{background:var(--gray-50);}
  .segment-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  .segment-grid.reverse .segment-media,.segment-grid.reverse .segment-visual{order:2;}
  .segment-media{aspect-ratio:4/3;border-radius:8px;background:var(--white);border:1px solid var(--gray-100);color:var(--gray-400);position:relative;display:flex;align-items:center;justify-content:center;}
  .segment-media svg{width:38px;height:38px;}
  .segment-media .filename{position:absolute;bottom:10px;left:10px;font-size:12px;background:rgba(255,255,255,.92);padding:3px 9px;border-radius:3px;color:var(--gray-600);font-weight:600;}
  .segment-eyebrow{color:var(--amber-600);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;display:block;}
  .segment-content h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:16px;}
  .segment-content p{font-size:18px;color:var(--gray-700);line-height:1.75;margin-bottom:22px;}
  .segment-callout{display:inline-flex;flex-direction:column;padding:16px 22px;background:var(--amber-50);border-radius:8px;}
  .segment-callout .callout-label{font-size:13px;font-weight:700;color:var(--laterite-600);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
  .segment-callout .callout-text{font-size:17px;color:var(--gray-800);font-weight:600;}
  .callout-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px;}
  .callout-grid .segment-callout{display:flex;height:100%;}
  .callout-grid .callout-text{font-size:16px;line-height:1.55;}
  .segment-stat .stat-big{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,4.8vw,55px);color:var(--laterite-600);display:block;line-height:1;}
  .segment-stat .stat-label-small{font-size:16px;color:var(--gray-700);font-weight:600;margin-top:8px;display:block;}
  .segment-content .link-cta{display:inline-block;margin-top:26px;font-size:16px;font-weight:700;color:var(--gray-900);border-bottom:2px solid var(--amber-500);padding-bottom:3px;}
  .segment-content .link-cta:hover{color:var(--laterite-600);}
  .segment-media.has-illustration svg{width:100%;height:100%;display:block;}

  /* ---------- collage photo des segments (cadre en écho + pastille d'étape) ---------- */
  .segment-visual{position:relative;}
  .segment-visual::before{content:'';position:absolute;top:-16px;right:-16px;bottom:16px;left:16px;z-index:-1;border:2px solid var(--amber-300);border-radius:8px;}
  .segment-badge{position:absolute;bottom:-22px;left:-22px;z-index:3;width:74px;height:74px;border-radius:50%;background:var(--gray-950);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(32,33,36,.3);border:3px solid var(--white);}
  .segment-badge .num{font-family:var(--font-display);font-weight:800;font-size:21px;color:var(--amber-500);line-height:1;}
  .segment-badge .txt{font-family:var(--font-body);font-weight:700;font-size:8px;color:var(--gray-200);text-transform:uppercase;letter-spacing:.01em;margin-top:3px;max-width:54px;line-height:1.15;overflow-wrap:break-word;}

  /* ---------- stylized map ---------- */
  .map-section{padding:100px 0;}
  .map-section.alt{background:var(--gray-50);}
  .map-frame{margin-top:48px;border-radius:12px;overflow:hidden;position:relative;background:var(--gray-950);}
  .map-frame svg{width:100%;height:auto;display:block;}
  /* en haut à droite : le bas de l'illustration porte déjà les légendes du terrain */
  .map-tag{position:absolute;top:16px;right:16px;font-size:13px;color:var(--gray-100);background:rgba(0,0,0,.45);border:1px dashed rgba(255,255,255,.3);border-radius:4px;padding:6px 12px;}


  /* ---------- distinctions band ---------- */
  .distinctions-band{padding:52px 0;background:var(--amber-50);}
  .distinctions-row{display:flex;gap:32px;flex-wrap:wrap;justify-content:center;}
  .distinction-item{display:flex;align-items:center;gap:14px;max-width:420px;}
  .distinction-icon{width:44px;height:44px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;color:var(--laterite-600);flex-shrink:0;}
  .distinction-icon svg{width:22px;height:22px;}
  .distinction-text{font-size:16px;color:var(--gray-800);line-height:1.5;}
  .distinction-text strong{display:block;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--gray-900);margin-bottom:2px;}

  /* ---------- cycle de vie de la mine (3 étapes) ---------- */
  .lifecycle{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);position:relative;}
  .lifecycle::before{content:'';position:absolute;top:26px;left:16%;right:16%;height:2px;background:var(--gray-200);}
  .lifecycle-step{text-align:center;padding:0 16px;position:relative;}
  .lifecycle-icon{width:52px;height:52px;border-radius:50%;background:var(--white);border:2px solid var(--amber-500);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--laterite-600);position:relative;z-index:2;}
  .lifecycle-icon svg{width:24px;height:24px;}
  .lifecycle-step h3{font-size:19px;margin-bottom:8px;}
  .lifecycle-step p{font-size:16px;color:var(--gray-700);}

  /* ---------- slider avant / après (réhabilitation) ---------- */
  .before-after{margin-top:48px;max-width:820px;}
  .ba-caption{font-size:16px;color:var(--gray-600);margin-bottom:18px;}
  .ba-frame{--ba-pos:50%;position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:1px solid var(--gray-100);background:var(--gray-50);touch-action:none;cursor:ew-resize;}
  .ba-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gray-400);}
  .ba-img img{width:100%;height:100%;object-fit:cover;display:block;}
  .ba-img svg{width:34px;height:34px;}
  .ba-before{clip-path:inset(0 calc(100% - var(--ba-pos)) 0 0);background:var(--gray-100);}
  .ba-tag{position:absolute;top:14px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:4px;background:rgba(32,33,36,.78);color:var(--white);z-index:2;}
  .ba-tag-before{left:14px;}
  .ba-tag-after{right:14px;}
  .ba-img .filename{position:absolute;bottom:9px;left:9px;right:9px;font-size:11px;background:rgba(255,255,255,.92);padding:3px 7px;border-radius:3px;color:var(--gray-600);font-weight:600;text-align:center;}
  .ba-divider{position:absolute;top:0;bottom:0;left:var(--ba-pos);width:2px;background:var(--white);transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.12);}
  .ba-handle{position:absolute;top:50%;left:var(--ba-pos);transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;color:var(--gray-900);box-shadow:0 2px 12px rgba(0,0,0,.22);pointer-events:none;}
  .ba-handle svg{width:18px;height:18px;}
  .ba-range{-webkit-appearance:none;appearance:none;width:100%;margin-top:16px;height:4px;border-radius:2px;background:var(--gray-200);outline:none;}
  .ba-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--amber-500);border:3px solid var(--white);box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:pointer;}
  .ba-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--amber-500);border:3px solid var(--white);box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:pointer;border:none;}

  /* ---------- icon-box : bordure pointillée + icône flottante (composant partagé) ---------- */
  .rse-icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 32px;margin-top:56px;}
  .icon-box{position:relative;padding:40px 26px 28px;background:var(--white);border:2px dashed var(--gray-200);border-radius:20px;transition:border-color .3s ease,border-style .3s ease,transform .3s ease,box-shadow .3s ease;}
  .icon-box:hover{border-style:solid;border-color:var(--amber-500);transform:translateY(-5px);box-shadow:0 18px 36px rgba(48,50,55,.1);}
  .icon-box-icon{width:60px;height:60px;border-radius:50%;background:var(--amber-50);color:var(--laterite-600);display:flex;align-items:center;justify-content:center;position:absolute;top:-30px;left:26px;box-shadow:0 8px 20px rgba(var(--amber-500-rgb),.28);transition:background .3s ease,color .3s ease;}
  .icon-box-icon svg{width:24px;height:24px;}
  /* micro-mouvement de la pastille au survol : elle se remplit ET respire légèrement.
     La transition porte aussi sur transform, absent de la déclaration d'origine. */
  .icon-box-icon{transition:background .3s ease,color .3s ease,transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease;}
  /* Au survol la pastille se remplit d'ambre : le trait doit alors s'assombrir, pas
     blanchir. Le blanc sur ambre plein ne fait que 1,86:1 — l'icône disparaissait au
     survol comme elle disparaissait au repos. Le basalte y fait 6,91:1, et c'est déjà
     ce que porte `.icon-box--dark`, dont la pastille est ambre en permanence. */
  .icon-box:hover .icon-box-icon{background:var(--amber-500);color:var(--gray-900);
    transform:scale(1.09);box-shadow:0 12px 26px rgba(var(--amber-500-rgb),.42);}
  /* la variante sombre est centrée par translateX(-50%) : le scale doit s'y composer,
     sinon la pastille saute à gauche au survol */
  .icon-box--dark:hover .icon-box-icon{transform:translateX(-50%) scale(1.09);}
  .icon-box h3{font-size:19px;margin-bottom:8px;}
  .icon-box p{font-size:16px;color:var(--gray-700);}

  /* variante sombre (fond glass) + bandeau CTA, pour usage sur fond foncé */
  .icon-box--dark{background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.03));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.3);text-align:center;display:flex;flex-direction:column;padding:44px 26px 0;}
  .icon-box--dark:hover{border-color:var(--amber-500);box-shadow:0 18px 36px rgba(0,0,0,.28);}
  .icon-box--dark .icon-box-icon{left:50%;transform:translateX(-50%);background:var(--amber-500);color:var(--gray-900);box-shadow:none;}
  .icon-box--dark:hover .icon-box-icon{background:var(--amber-300);color:var(--gray-900);}
  .icon-box--dark h3{color:var(--white);}
  .icon-box--dark p{color:var(--gray-200);flex:1;margin-bottom:28px;}
  .icon-box-footer{display:block;margin:0 -26px;padding:16px;background:var(--amber-500);color:var(--gray-900);font-weight:700;font-size:15px;text-align:center;border-radius:0 0 18px 18px;transition:background .2s;}
  .icon-box-footer:hover{background:var(--amber-300);}

  /* ---------- galerie impact réel : mosaïque asymétrique ---------- */
  .gallery-note{font-size:16px;color:var(--gray-600);font-style:italic;margin-top:8px;}
  .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,150px);grid-template-areas:"a a b c" "a a b d" "e e f f";gap:16px;margin-top:32px;}
  .gallery-item{border-radius:8px;background:var(--gray-50);border:1px solid var(--gray-100);position:relative;display:flex;align-items:center;justify-content:center;color:var(--gray-400);}
  .gallery-item svg{width:30px;height:30px;}
  .gallery-item .filename{position:absolute;bottom:9px;left:9px;right:9px;font-size:11px;background:rgba(255,255,255,.92);padding:3px 7px;border-radius:3px;color:var(--gray-600);font-weight:600;text-align:center;}
  .gallery-item:nth-child(1){grid-area:a;}
  .gallery-item:nth-child(2){grid-area:b;}
  .gallery-item:nth-child(3){grid-area:c;}
  .gallery-item:nth-child(4){grid-area:d;}
  .gallery-item:nth-child(5){grid-area:e;}
  .gallery-item:nth-child(6){grid-area:f;}

  /* ---------- compteur social (en attente de données) ---------- */
  .social-counter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
  .counter-item{text-align:center;padding:32px 20px;border:1px dashed var(--gray-200);border-radius:8px;}
  .counter-icon{width:40px;height:40px;border-radius:50%;background:var(--gray-50);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--gray-400);}
  .counter-icon svg{width:18px;height:18px;}
  .counter-value{font-family:var(--font-display);font-weight:800;font-size:36px;color:var(--gray-300);display:block;}
  .counter-label{font-size:16px;color:var(--gray-700);font-weight:600;margin-top:10px;display:block;}
  .counter-pending{font-size:13px;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-top:8px;display:block;}


  /* ---------- notice canaux vérifiés ---------- */
  .verified-notice{display:flex;align-items:center;gap:14px;padding:18px 24px;background:var(--amber-50);border-radius:8px;margin-bottom:48px;}
  .verified-notice svg{width:22px;height:22px;color:var(--laterite-600);flex-shrink:0;}
  .verified-notice p{font-size:16px;color:var(--gray-800);line-height:1.6;}
  .verified-notice strong{font-weight:700;}

  /* ---------- filtres actualités ---------- */
  /* ⚠️ C'est le CONTOUR qui fait lire la pastille comme un bouton : son remplissage
     blanc ne se distingue pas du fond d'une .sec-warm (1,18:1). Le --gray-200
     d'origine tombait à 1,45:1 sur blanc chaud et 1,71:1 sur blanc — sous le seuil
     de 3:1 exigé pour la limite d'un élément d'interface (WCAG 1.4.11). Les trois
     filtres se lisaient alors comme une ligne de texte, et le défaut a été signalé
     comme « les boutons n'apparaissent pas » — exactement comme les icônes ambre
     en juillet. Trait de matière, même patron que les icônes : 3,27:1 sur blanc
     chaud, 3,50:1 sur blanc. */
  .news-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px;}
  .filter-btn{padding:9px 18px;border-radius:20px;border:1px solid rgba(var(--laterite-800-rgb),.6);background:var(--white);font-size:16px;font-weight:600;color:var(--gray-700);transition:all .2s;}
  /* Survol en latérite pleine et non en ambre : à 1,86:1 sur blanc, l'ambre effaçait
     le contour au lieu de l'appuyer. Il reste le survol des sections sombres, où il
     monte à 9,18:1 (voir .sec-dark .filter-btn plus bas). */
  .filter-btn:hover{border-color:var(--laterite-600);color:var(--gray-900);}
  .filter-btn.active{background:var(--gray-900);border-color:var(--gray-900);color:var(--white);}
  .news-tag{display:inline-block;font-size:13px;font-weight:700;color:var(--laterite-600);background:var(--amber-50);padding:3px 10px;border-radius:12px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;}
  .news-card.hidden{display:none;}
  .news-card.filtering{opacity:0;transform:scale(.94);pointer-events:none;}

  /* ---------- bibliothèque numérique (téléchargements) : carte verticale + bande d'action colorée ---------- */
  .library-subhead{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-600);margin-top:40px;margin-bottom:22px;}
  .folder-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px;}
  .folder-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:28px 24px;border:1px solid var(--gray-100);border-radius:12px;background:var(--white);transition:border-color .2s,transform .2s,box-shadow .2s;}
  .folder-card:hover{border-color:var(--amber-500);transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.08);}
  .folder-icon{width:52px;height:52px;border-radius:12px;background:var(--amber-50);display:flex;align-items:center;justify-content:center;color:var(--laterite-600);margin-bottom:16px;}
  .folder-icon svg{width:24px;height:24px;}
  .folder-name{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--gray-900);}
  .folder-count{font-size:14px;color:var(--gray-600);}
  .folder-cta{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:18px;font-size:14px;font-weight:700;color:var(--gray-900);}
  .folder-cta svg{width:14px;height:14px;transition:transform .2s;}
  .folder-card:hover .folder-cta svg{transform:translateX(3px);}
  .resource-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px;}
  .resource-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 24px 0;border:1px solid var(--gray-100);border-radius:12px;background:var(--white);overflow:hidden;transition:border-color .2s,transform .2s;}
  .resource-card:hover{border-color:var(--amber-500);transform:translateY(-3px);}
  .resource-icon{width:56px;height:56px;border-radius:50%;background:var(--amber-50);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--laterite-600);flex-shrink:0;}
  .resource-icon svg{width:24px;height:24px;}
  .resource-info{flex:1;margin-bottom:26px;}
  .resource-info h3{font-size:18px;margin-bottom:4px;}
  .resource-meta{font-size:14px;color:var(--gray-500);}
  .resource-action{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% + 48px);margin:0 -24px;padding:16px;background:var(--amber-500);color:var(--gray-900);font-weight:700;font-size:15px;white-space:nowrap;transition:background .2s;}
  .resource-action svg{width:16px;height:16px;}
  .resource-card:hover .resource-action{background:var(--amber-300);}

  /* ---------- page article (détail actualité) ---------- */
  .article-back{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--gray-700);margin-bottom:32px;}
  .article-back svg{width:16px;height:16px;transition:transform .2s;}
  .article-back:hover{color:var(--gray-900);}
  .article-back:hover svg{transform:translateX(-3px);}
  .article-layout{max-width:760px;margin:0 auto;}
  .article-meta-row{display:flex;align-items:center;gap:16px;margin-bottom:18px;}
  .article-meta-row .news-tag{margin-bottom:0;}
  .article-cover{border-radius:8px;margin:32px 0 40px;aspect-ratio:16/10;}
  .article-body p{font-size:18px;color:var(--gray-700);line-height:1.85;margin-bottom:24px;}
  .article-body h2{font-size:26px;margin:48px 0 18px;scroll-margin-top:110px;}
  .article-body h3{font-size:21px;margin:34px 0 14px;scroll-margin-top:110px;} /* sous-section, si un jour nécessaire */
  .article-body ul{margin:0 0 24px 22px;}
  .article-body li{font-size:18px;color:var(--gray-700);line-height:1.85;margin-bottom:8px;}
  .legal-toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px;}
  .legal-toc a{font-size:14px;font-weight:600;color:var(--gray-700);background:var(--gray-50);padding:8px 16px;border-radius:16px;transition:background .2s,color .2s;}
  .legal-toc a:hover{background:var(--amber-50);color:var(--gray-900);}
  .article-body blockquote{border-left:3px solid var(--amber-500);padding:2px 0 2px 28px;margin:44px 0;font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.5;color:var(--gray-900);}
  .article-figure{margin:36px 0;}
  .article-figure .media-frame{border-radius:8px;aspect-ratio:3/2;}
  .article-figure figcaption{font-size:14px;color:var(--gray-500);margin-top:10px;}
  .article-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:48px;padding-top:32px;border-top:1px solid var(--gray-100);}
  .article-tag{font-size:14px;font-weight:600;color:var(--gray-700);background:var(--gray-50);padding:6px 14px;border-radius:16px;}
  .article-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}

  .error-page{min-height:100vh;display:flex;align-items:center;padding:160px 0 100px;background:var(--gray-50);}
  .error-page-inner{max-width:640px;margin:0 auto;text-align:center;}
  .error-code{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(90px,16vw,160px);line-height:1;color:var(--laterite-600);letter-spacing:-.02em;margin-bottom:4px;}
  .error-page h1{font-size:clamp(26px,4vw,34px);margin-bottom:16px;}
  .error-page .lead{color:var(--gray-700);font-size:17px;margin-bottom:32px;}
  .error-page .cta-row{justify-content:center;margin-bottom:52px;}
  .error-page .btn-outline{border-color:var(--gray-200);color:var(--gray-900);}
  .error-page .btn-outline:hover{border-color:var(--gray-900);background:var(--gray-100);}
  .error-page-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;padding-top:36px;border-top:1px solid var(--gray-200);}
  .error-page-links a{font-size:15px;font-weight:700;color:var(--gray-700);}
  .error-page-links a:hover{color:var(--laterite-600);}

  /* ---------- galerie multimédia (photos + vidéos) ---------- */
  .media-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
  .media-gallery-item{aspect-ratio:4/3;border-radius:8px;background:var(--gray-50);border:1px solid var(--gray-100);position:relative;display:flex;align-items:center;justify-content:center;color:var(--gray-400);}
  .media-gallery-item svg.media-icon{width:30px;height:30px;}
  .media-gallery-item .filename{position:absolute;bottom:9px;left:9px;right:9px;font-size:11px;background:rgba(255,255,255,.92);padding:3px 7px;border-radius:3px;color:var(--gray-600);font-weight:600;text-align:center;}
  .video-badge{position:absolute;top:10px;left:10px;width:28px;height:28px;border-radius:50%;background:rgba(32,33,36,.75);display:flex;align-items:center;justify-content:center;}
  .video-badge svg{width:12px;height:12px;color:var(--white);}

  /* ---------- mur de photos filtrable (galerie multimédia, mosaïque colonnes) ---------- */
  .gallery-wall{column-count:4;column-gap:16px;margin-top:8px;}
  .gallery-wall-item{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 16px;border-radius:8px;background:var(--gray-50);border:1px solid var(--gray-100);}
  .gallery-wall-item img{width:100%;height:auto;border-radius:8px;}
  .gallery-wall-item.hidden{display:none;}
  .gallery-wall-item.filtering{opacity:0;transform:scale(.94);pointer-events:none;}
  .gallery-wall-item .filename{position:absolute;bottom:9px;left:9px;right:9px;font-size:11px;background:rgba(255,255,255,.92);padding:3px 7px;border-radius:3px;color:var(--gray-600);font-weight:600;text-align:center;}
  .gallery-wall-item.placeholder{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;color:var(--gray-400);}
  .gallery-wall-item.placeholder svg.media-icon{width:28px;height:28px;}

  /* ---------- espace privatif ----------
     EN RÉSERVE : la section « Espace actionnaires & partenaires » a été retirée
     de media-ressources.html le 30/07/2026, à la demande de la Direction et
     provisoirement. Ces six règles sont conservées pour son retour éventuel ;
     le balisage se récupère par `git show HEAD:media-ressources.html`.
     À supprimer avec elles si la décision devient définitive. */
  .private-space{padding:56px 0;background:var(--gray-950);}
  .private-card{max-width:640px;margin:0 auto;text-align:center;padding:52px 40px;}
  .private-icon{width:60px;height:60px;border-radius:50%;background:rgba(var(--amber-500-rgb),.12);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:var(--amber-500);}
  .private-icon svg{width:26px;height:26px;}
  .private-card h2{color:var(--white);font-size:26px;margin-bottom:14px;}
  .private-card p{color:var(--gray-200);font-size:17px;line-height:1.7;margin-bottom:28px;}


  /* ---------- pourquoi nous rejoindre ---------- */
  .benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:56px 20px;margin-top:40px;}
  .stage-nav-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

  /* ---------- bandeau CTA colorée (cartes d'action à bande de couleur) ---------- */
  .action-band{position:relative;padding:110px 0;background:var(--gray-950);overflow:hidden;}
  .action-band::before{content:'';position:absolute;top:-30%;right:-12%;width:60%;height:160%;background:radial-gradient(ellipse at center, rgba(var(--amber-500-rgb),.16) 0%, rgba(var(--amber-500-rgb),0) 70%);pointer-events:none;}
  .action-band .container{position:relative;}
  .action-band .label{color:var(--amber-500);}
  .action-band .section-head h2{color:var(--white);}
  .action-band .content-lead{color:var(--gray-200);}
  .action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:56px 24px;margin-top:48px;}

  /* ---------- offres d'emploi ---------- */
  .jobs-note{font-size:16px;color:var(--gray-600);font-style:italic;margin-bottom:32px;}
  .job-list{display:flex;flex-direction:column;gap:0;margin-top:8px;}
  .job-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;border-bottom:1px solid var(--gray-100);flex-wrap:wrap;transition:opacity .3s ease,transform .3s ease;}
  .job-row.hidden{display:none;}
  .job-row.filtering{opacity:0;transform:scale(.97);pointer-events:none;}
  .job-main h3{font-size:19px;margin-bottom:6px;}
  .job-meta{display:flex;gap:10px;flex-wrap:wrap;}
  .job-meta span{font-size:14px;font-weight:700;color:var(--gray-600);background:var(--gray-50);padding:4px 10px;border-radius:12px;}
  .job-apply{font-size:16px;font-weight:700;color:var(--gray-900);border-bottom:1.5px solid var(--amber-500);padding-bottom:2px;white-space:nowrap;}

  /* ---------- formulaire de candidature ---------- */
  .application-form{max-width:640px;margin-top:40px;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
  .form-group{margin-bottom:20px;}
  .form-group label{display:block;font-size:16px;font-weight:700;color:var(--gray-800);margin-bottom:8px;}
  .form-group input,.form-group select,.form-group textarea{width:100%;padding:13px 16px;border:1px solid var(--gray-200);border-radius:6px;font-family:var(--font-body);font-size:17px;color:var(--gray-900);background:var(--white);transition:border-color .2s;}
  .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--amber-500);}
  .form-group textarea{resize:vertical;min-height:110px;}
  .upload-box{display:block;border:1.5px dashed var(--gray-200);border-radius:6px;padding:24px;text-align:center;color:var(--gray-500);font-size:16px;cursor:pointer;transition:border-color .2s;}
  .upload-box:hover,.upload-box:focus-within{border-color:var(--amber-500);}
  .upload-box input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
  .upload-box .upload-filename{display:none;margin-top:8px;font-weight:700;color:var(--gray-800);}
  .upload-box.has-file{border-style:solid;border-color:var(--amber-500);}
  .upload-box.has-file .upload-filename{display:block;}
  .upload-box svg{width:22px;height:22px;margin-bottom:8px;color:var(--gray-400);}
  .form-submit{margin-top:8px;}
  .is-loading{position:relative;color:transparent;pointer-events:none;}
  .is-loading::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(32,33,36,.3);border-top-color:var(--gray-900);border-radius:50%;animation:btnspin .6s linear infinite;}
  @keyframes btnspin{to{transform:rotate(360deg);}}
  .hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;}
  .form-success{display:none;align-items:center;gap:14px;padding:20px 22px;background:var(--amber-50);border-radius:8px;margin-top:24px;}
  .form-success.visible{display:flex;}
  .form-success svg{width:24px;height:24px;color:var(--laterite-600);flex-shrink:0;}
  .form-success p{font-size:17px;color:var(--gray-800);font-weight:600;}


  /* ---------- coordonnées + carte ---------- */
  .contact-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:8px;}
  .contact-detail{display:flex;gap:16px;align-items:flex-start;margin-bottom:28px;}
  .contact-detail-icon{width:42px;height:42px;border-radius:50%;background:var(--amber-50);display:flex;align-items:center;justify-content:center;color:var(--laterite-600);flex-shrink:0;}
  .contact-detail-icon svg{width:19px;height:19px;}
  .contact-detail h3{font-size:17px;margin-bottom:4px;}
  .contact-detail p,.contact-detail a{font-size:17px;color:var(--gray-700);line-height:1.6;}
  .contact-map{border-radius:12px;overflow:hidden;position:relative;background:var(--gray-950);aspect-ratio:1/1;min-height:480px;width:100%;max-width:100%;}
  .contact-map iframe{width:100%;height:100%;display:block;}
  /* écran de consentement de la carte : motif topographique sombre, dans le vocabulaire de la DA */
  /* voile basalte à 93 % par-dessus la tuile : ramène le motif aux ~7 % du système
     (la tuile brute passait à pleine force et traversait le texte) */
  .contact-map--consent{background:
      linear-gradient(rgba(var(--basalte-900-rgb),.93),rgba(var(--basalte-900-rgb),.93)),
      var(--basalte-900) url('../images/topo-sombre.svg') repeat;
    background-size:auto,400px 400px;}
  .map-consent-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;min-height:inherit;padding:32px 28px;background:transparent;border:0;color:var(--white);font-family:inherit;text-align:center;cursor:pointer;transition:background .25s ease;}
  .map-consent-btn:hover,.map-consent-btn:focus-visible{background:rgba(var(--amber-500-rgb),.09);}
  .map-consent-btn svg{width:40px;height:40px;color:var(--amber-500);}
  .map-consent-title{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.01em;
    border-bottom:2px solid var(--amber-500);padding-bottom:5px;}
  .map-consent-note{font-size:15px;line-height:1.65;color:var(--gray-300);max-width:38ch;}
  .map-consent-note a{color:var(--amber-500);}
  .social-row-large{display:flex;gap:14px;margin-top:8px;}
  .social-row-large a{width:44px;height:44px;border-radius:50%;border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;color:var(--gray-700);transition:.2s;}
  .social-row-large a:hover{background:var(--amber-500);border-color:var(--amber-500);color:var(--gray-900);}
  .social-row-large svg{width:19px;height:19px;stroke:currentColor;}

  /* ---------- onglets formulaires segmentés ---------- */
  .contact-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px;border-bottom:1px solid var(--gray-100);}
  .tab-btn{padding:14px 18px;font-size:16px;font-weight:700;color:var(--gray-600);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s;}
  .tab-btn:hover{color:var(--gray-900);}
  .tab-btn.active{color:var(--gray-900);border-color:var(--amber-500);}
  .tab-panel{display:none;}
  .tab-panel.active{display:block;}

  .contact-form-layout{display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:start;margin-top:8px;}
  .contact-form-col{min-width:0;}
  .contact-form-visual{position:sticky;top:120px;}
  .contact-visual-frame{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;background:var(--gray-950);}
  .contact-visual-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;}
  .contact-visual-img.active{opacity:1;}
  .contact-visual-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,33,36,0) 45%,rgba(32,33,36,.85) 100%);}
  .contact-visual-caption{position:absolute;left:0;right:0;bottom:0;padding:26px 24px;}
  .contact-visual-eyebrow{display:block;color:var(--amber-500);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;}
  .contact-visual-label{display:block;color:var(--white);font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.3;}

  /* ---------- newsletter ---------- */
  .newsletter-box{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;max-width:520px;}
  .newsletter-box input{flex:1;min-width:220px;padding:14px 18px;border:1px solid var(--gray-200);border-radius:6px;font-family:var(--font-body);font-size:17px;}
  .newsletter-box input:focus{outline:none;border-color:var(--amber-500);}

  /* ---------- hero éditorial (accueil) : masthead qui se déplie au scroll ---------- */
  .hero-editorial{position:relative;height:230vh;background:var(--gray-950);}
  .hero-editorial-inner{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;--p:0;--cp:0;}
  .hero-editorial .hero-overlay{opacity:calc(.55 + var(--p) * .4);}
  .hero-mast{position:relative;z-index:2;flex:1;display:flex;align-items:center;padding-top:96px;transform:translateY(calc((1 - var(--cp)) * var(--shift,0px)));}
  .hero-mast .container{width:100%;}
  .hero-mast-logo{max-width:460px;width:100%;margin:0 0 30px;}
  .hero-mast-logo img{width:100%;height:auto;display:block;animation:heroLogoGlow 3.6s ease-in-out infinite;}
  @keyframes heroLogoGlow{
    0%,100%{filter:drop-shadow(0 0 14px rgba(var(--amber-500-rgb),.5)) drop-shadow(0 0 34px rgba(var(--amber-500-rgb),.26));}
    50%{filter:drop-shadow(0 0 22px rgba(var(--amber-500-rgb),.78)) drop-shadow(0 0 52px rgba(var(--amber-500-rgb),.4));}
  }
  @media(prefers-reduced-motion:reduce){.hero-mast-logo img{animation:none;filter:drop-shadow(0 0 18px rgba(var(--amber-500-rgb),.6)) drop-shadow(0 0 40px rgba(var(--amber-500-rgb),.3));}}
  .hero-mast h1{color:var(--white);font-size:clamp(24px,4.2vw,52px);line-height:1.12;letter-spacing:-.015em;margin-bottom:0;max-width:1080px;text-align:left;white-space:normal;}
  .hero-mast h1 .accent{color:var(--amber-500);}
  .hero-editorial-content{position:relative;z-index:3;flex-shrink:0;padding:0 0 64px;opacity:var(--cp);transform:translateY(calc(24px - var(--cp) * 24px));}
  .hero-editorial-content .lead{color:var(--gray-100);font-size:19px;max-width:610px;margin:0 0 28px;padding:22px 26px;border-radius:20px;background:linear-gradient(135deg,rgba(var(--amber-500-rgb),.22),rgba(255,255,255,.05));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);}
  .hero-scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:var(--gray-200);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:calc(1 - var(--p) * 4);display:flex;flex-direction:column;align-items:center;gap:8px;}
  .hero-scroll-hint::after{content:'';width:1px;height:34px;background:linear-gradient(var(--amber-500),transparent);animation:scrollHintMove 1.8s ease-in-out infinite;}
  @keyframes scrollHintMove{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

  /* ---------- vidéo de fond du hero ---------- */
  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}

  /* ======================================================
     RESPONSIVE — palier unique et consolidé (PC / tablette / mobile)
     Desktop  : > 1024px — valeurs par défaut ci-dessus
     Tablette : 861px – 1024px — grilles à 2 colonnes, nav encore horizontale
     Mobile L : 641px – 860px  — nav en tiroir, empilement des blocs mixtes
     Mobile S : ≤ 640px        — 1 colonne partout, UI condensée
     ====================================================== */

  /* --- Tablette (paysage/portrait large) --- */
  @media(max-width:1024px){
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .stats-grid-3{grid-template-columns:repeat(2,1fr);}
    .ops-grid{grid-template-columns:repeat(2,1fr);}
    .news-grid{grid-template-columns:repeat(2,1fr);}
    .news-feature-grid{grid-template-columns:1fr;gap:40px;}
    .news-list{flex-direction:row;gap:24px;}
    .news-list-item{flex:1;flex-direction:column;border-bottom:none;padding:0;gap:14px;}
    .news-list-thumb{width:100%;height:150px;}
    .manifesto-inner{gap:48px;padding:0 40px;}
    .manifesto-card{padding:24px 28px;}
    .manifesto-marquee{height:600px;}
    .profile-grid{grid-template-columns:200px 1fr;gap:32px;}
    .partner-detail-grid{grid-template-columns:repeat(2,1fr);}
    .segment-grid{gap:40px;}
    .benefit-grid{grid-template-columns:repeat(2,1fr);}
    .stage-nav-grid{grid-template-columns:repeat(2,1fr);}
    .action-grid{grid-template-columns:repeat(2,1fr);}
    .gallery-wall{column-count:3;}
    .chain-scroll{grid-template-columns:300px 1fr;gap:40px;}
    .chain-card{padding:32px 28px;}
    .folder-grid{grid-template-columns:repeat(2,1fr);}
    .contact-form-layout{grid-template-columns:1fr 300px;gap:36px;}
  }

  /* évite le retour à la ligne des liens du menu, faute de place entre 861px et ~1300px
     (plage plus large que le palier tablette ci-dessus, propre à la nav du header) */
  @media(max-width:1300px){
    .logo-link img{height:29px;}
    .site-nav{gap:0;}
    .site-nav a{padding:8px 7px;font-size:13px;white-space:nowrap;}
    .header-right{gap:10px;}
    .lang-toggle{font-size:11px;}
    .lang-toggle span,.lang-toggle a{padding:5px 8px;}
  }

  /* --- Logo + badge Simandou "coin réel" : seulement là où il y a la place (nav desktop pleine largeur) --- */
  @media(max-width:1160px){
    .header-inner{padding-left:0;padding-right:0;}
    .site-header .logo-link{position:static;transform:none;}
    .site-header .partner-badge{position:static;}
    .site-footer .container{padding-right:32px;}
    .footer-top{margin-bottom:36px;}
    .footer-top .partner-badge{position:static;}
  }

  /* --- Bascule du menu en tiroir + empilement des blocs 2 colonnes --- */
  @media(max-width:860px){
    .site-nav{position:fixed;top:0;right:-100%;height:100vh;width:78%;max-width:340px;background:var(--white);flex-direction:column;align-items:flex-start;padding:100px 32px 32px;gap:4px;transition:right .35s ease;box-shadow:-8px 0 30px rgba(0,0,0,.15);}
    .site-nav.open{right:0;}
    .site-nav a{color:var(--gray-900) !important;width:100%;padding:14px 6px;font-size:19px;border-bottom:1px solid var(--gray-100);}
    .menu-toggle{display:flex;z-index:110;}
    .menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .menu-toggle.active span:nth-child(2){opacity:0;}
    .menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
    .menu-toggle.active span{background:var(--gray-900);}
    .nav-item.has-dropdown{position:relative;flex-direction:column;align-items:stretch;width:100%;}
    .nav-dropdown-toggle{position:absolute;top:2px;right:0;width:48px;height:48px;margin-left:0;color:var(--gray-900);}
    .nav-dropdown-menu{position:static;min-width:0;opacity:1;visibility:visible;transform:none;box-shadow:none;margin-top:0;padding:0;max-height:0;overflow:hidden;background:var(--gray-50);border-radius:8px;transition:max-height .3s ease;}
    .nav-item.has-dropdown.open .nav-dropdown-menu{max-height:280px;}
    .nav-dropdown-menu a{padding:13px 10px 13px 20px;font-size:16px;border-bottom:1px solid var(--gray-100) !important;color:var(--gray-700) !important;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .leader-grid{grid-template-columns:1fr;gap:28px;}
    .leader-portrait{max-width:200px;}
    .rse-grid{grid-template-columns:1fr;gap:32px;}
    .rse-grid .rse-image{order:-1;}
    .news-list{flex-direction:column;gap:0;}
    .news-list-item{flex-direction:row;border-bottom:1px solid var(--gray-100);padding:22px 0;}
    .news-list-item:first-child{padding-top:0;}
    .news-list-item:last-child{border-bottom:none;}
    .news-list-thumb{width:108px;height:80px;}
    .diff-grid{grid-template-columns:1fr 1fr;}
    .value-grid{grid-template-columns:1fr 1fr;}
    .profile-grid{grid-template-columns:1fr;}
    .profile-portrait{max-width:220px;}
    .timeline-track{grid-template-columns:repeat(2,1fr);row-gap:40px;}
    .timeline-track::before{display:none;}
    .partner-detail-grid{grid-template-columns:1fr;}
    .segment-grid{grid-template-columns:1fr;gap:32px;}
    .segment-grid.reverse .segment-media,.segment-grid.reverse .segment-visual{order:0;}
    .chain-sticky-col{display:none;}
    .chain-scroll{grid-template-columns:1fr;margin-top:40px;}
    .chain-step{flex-direction:column;padding-left:44px;padding-bottom:48px;}
    .chain-step-dot{position:absolute;left:0;top:0;}
    .chain-step-media{width:100%;aspect-ratio:16/9;}
    .manifesto-inner{grid-template-columns:1fr;gap:32px;padding:0 32px;}
    .manifesto-card{padding:24px 24px;}
    .manifesto-marquee{height:420px;}
    .hero-mast{padding-top:76px;}
    .hero-mast-logo{max-width:280px;margin-bottom:20px;}
    .hero-mast h1{font-size:clamp(21px,5.8vw,28px);}
    /* --- Hero : neutraliser le scroll-driven sur tablette/mobile ---
       Le pin à 230vh + opacité pilotée relègue le contenu (titre + les 2
       boutons dont "Notre engagement local") sous la section "Nos opérations"
       sur petit écran. On affiche ici le hero en hauteur naturelle. */
    .hero-editorial{height:auto;min-height:100svh;}
    .hero-editorial-inner{position:relative;top:auto;height:auto;min-height:100svh;overflow:visible;--p:1;--cp:1;}
    .hero-editorial .hero-overlay{opacity:calc(.55 + 1 * .4);}
    .hero-mast{transform:none;padding-top:44px;}
    .hero-editorial-content{opacity:1;transform:none;padding:0 0 40px;}
    .hero-scroll-hint{display:none;}
    .rse-icon-grid{grid-template-columns:1fr 1fr;}
    .callout-grid{grid-template-columns:1fr;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);grid-template-areas:none;grid-template-rows:none;}
    .gallery-grid .gallery-item{grid-area:auto;aspect-ratio:1;}
    .media-gallery-grid{grid-template-columns:repeat(2,1fr);}
    .gallery-wall{column-count:2;}
    .job-row{flex-direction:column;align-items:flex-start;gap:12px;}
    .contact-info-grid{grid-template-columns:1fr;gap:32px;}
    .contact-map{aspect-ratio:auto;height:400px;min-height:0;}
    .contact-form-layout{grid-template-columns:1fr;}
    .contact-form-visual{position:static;order:-1;}
    .contact-visual-frame{aspect-ratio:16/9;}
  }

  /* --- Mobile : tout en 1 colonne --- */
  @media(max-width:640px){
    .ops-grid{grid-template-columns:1fr;}
    .news-grid{grid-template-columns:1fr;}
    .manifesto-card{padding:20px 18px;border-radius:20px;}
    .manifesto-marquee{height:300px;border-radius:20px;}
    .marquee-item{border-radius:12px;}
    .marquee-arrow-down{bottom:8px;}
    .marquee-arrow-up{top:8px;}
    .partners-row{gap:16px;}
    .partner-chip{width:100%;justify-content:center;}
    .diff-grid{grid-template-columns:1fr;}
    .value-grid{grid-template-columns:1fr;}
    .timeline-track{grid-template-columns:1fr;}
    .lifecycle{grid-template-columns:1fr;gap:32px;}
    .lifecycle::before{display:none;}
    .rse-icon-grid{grid-template-columns:1fr;}
    .callout-grid{grid-template-columns:1fr;}
    .gallery-grid{grid-template-columns:1fr 1fr;}
    .social-counter-grid{grid-template-columns:1fr;}
    .distinctions-row{flex-direction:column;align-items:center;}
    .resource-grid{grid-template-columns:1fr;}
    .folder-grid{grid-template-columns:1fr;}
    .media-gallery-grid{grid-template-columns:1fr 1fr;}
    .media-gallery-grid--videos{grid-template-columns:1fr;max-width:none;}
    .benefit-grid{grid-template-columns:1fr;}
    .stage-nav-grid{grid-template-columns:1fr;}
    .action-grid{grid-template-columns:1fr;}
    .segment-visual::before{top:-10px;right:-10px;bottom:10px;left:10px;}
    .segment-badge{width:58px;height:58px;bottom:-14px;left:-14px;}
    .segment-badge .num{font-size:17px;}
    .segment-badge .txt{font-size:7.5px;}
    .stats-grid-3{grid-template-columns:1fr;gap:24px;}
    .stats-grid-2{grid-template-columns:1fr;gap:24px;max-width:none;}
    .form-row{grid-template-columns:1fr;}
    .article-related-grid{grid-template-columns:1fr;}
    .article-body h2{font-size:22px;}
    .article-body blockquote{font-size:20px;}
  }

  /* --- Petit mobile --- */
  @media(max-width:480px){
    .footer-grid{grid-template-columns:1fr;}
    .header-right .lang-toggle{display:none;}
    .cta-row{flex-direction:column;align-items:stretch;}
    .cta-row .btn{justify-content:center;}
  }

  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .reveal{transition:none;opacity:1;transform:none;transition-delay:0s;}
    /* pas de cascade ni de balayage : tout est en place d'emblée */
    .reveal .media-frame img,.reveal.visible .media-frame img{clip-path:none;transition:none;transition-delay:0s;}
    .trace-topo path,.trace-topo line,.trace-topo polyline,.trace-topo circle,.trace-topo rect{
      stroke-dasharray:none !important;stroke-dashoffset:0 !important;transition:none !important;}
    [data-parallaxe]{transform:none !important;}
    .hero-editorial{height:100vh;}
    .hero-editorial-inner{position:relative;}
    .hero-mast{transform:none;}
    .hero-mast .eyebrow{opacity:1;}
    .hero-editorial-content{position:relative;opacity:1;transform:none;bottom:auto;margin-top:40px;}
    .hero-scroll-hint{display:none;}
  }

  /* ======================================================================
     DIRECTION ARTISTIQUE « MINERAI » — fondations (Lot 1)
     Voir PLAN-ACTION.md §1 et SUIVI-MODIFICATIONS.md.
     Tout ce bloc est ADDITIF : aucune page existante n'est modifiée tant que
     ces classes ne sont pas posées dans le HTML (propagation au Lot 2).

     DOCTRINE DE RYTHME DES FONDS — remplace l'alternance blanc / gris-50 :
       jamais plus de DEUX sections claires consécutives (.sec-light puis .sec-warm)
       sans une respiration sombre (.sec-dark) ou une section photo.
     ====================================================================== */

  /* ---------- 1.2 — textures de fond ---------- */
  .bg-topo{position:relative;isolation:isolate;}
  .bg-topo::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:url("../images/topo-clair.svg");background-size:400px 400px;opacity:.055;}

  /* Famille de motifs de fond — un seul motif par section, et jamais le même sur
     deux sections voisines. Chaque motif existe en deux tuiles carrelables
     (variantes -clair et -sombre), générées par tools/build-motifs.py.
     Plafond d'opacité : 9 % sur .sec-warm, au-delà le texte courant passe sous AA.
     Piège : sur .sec-dark le pseudo-élément est déjà pris par .sec-dark::before ;
     la règle plus spécifique ci-dessous le surcharge et repasse sous le halo ambré. */
  .bg-motif{position:relative;isolation:isolate;}
  .bg-motif::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:var(--motif);background-size:400px 400px;opacity:var(--motif-op,.055);}
  .sec-dark.bg-motif::before{background-image:var(--motif-dark);z-index:-2;}
  .m-strates{--motif:url("../images/motif-strates-clair.svg");
    --motif-dark:url("../images/motif-strates-sombre.svg");}
  .m-bathy{--motif:url("../images/motif-bathy-clair.svg");
    --motif-dark:url("../images/motif-bathy-sombre.svg");}

  /* ---------- 1.3 — contours ----------
     Deux dispositifs seulement, arbitrés sur mesure le 30/07/2026 :
     voir demo-contours.html pour les mesures et les options écartées. */

  /* Filet de niveau : appui sous les titres de section, en écho aux courbes
     du motif topo. Positionné en absolu, donc AUCUN décalage de mise en page —
     il se loge dans le margin-bottom de 52 px de .section-head, ce qui compte
     car .section-head est un flex en align-items:flex-end : toute hauteur
     ajoutée au titre décalerait le lien aligné à sa droite. */
  .section-head h2{position:relative;}
  .section-head h2::after{content:'';position:absolute;left:0;bottom:-14px;
    width:180px;height:5px;pointer-events:none;
    border-top:2px solid var(--amber-500);
    border-bottom:1px solid var(--laterite-300);}
  /* Le filet se trace de gauche à droite quand le bloc de titre entre en scène.
     scaleX et non width : c'est composité par le GPU, sans recalcul de mise en page,
     et le filet est décoratif donc aucun texte ne se déplace. Le retard le fait
     arriver après le titre, pas avec lui. Un .section-head hors .reveal garde le
     filet en place (aucune transformation ne s'applique). */
  .reveal .section-head h2::after,.section-head.reveal h2::after{
    transform:scaleX(0);transform-origin:left center;
    transition:transform .68s cubic-bezier(.22,.61,.36,1);transition-delay:.16s;}
  .reveal.visible .section-head h2::after,.section-head.reveal.visible h2::after{
    transform:scaleX(1);}
  .sec-dark .section-head h2::after{border-bottom-color:rgba(255,255,255,.3);}

  /* Contour d'image : cadre offset autour des grandes figures isolées.
     outline et non un pseudo-élément, parce que .media-frame porte
     overflow:hidden qui rognerait tout ::before débordant.
     À ne poser que sur un cadre disposant de 28 px de dégagement (deux fois
     l'offset plus le trait) : ni la galerie, dont les vignettes n'ont que
     16 px d'écart, ni les vignettes de cartes d'actualité, à 26 px. */
  .media-frame.frame-ring{outline:2px solid var(--laterite-300);outline-offset:12px;}
  .sec-dark .media-frame.frame-ring{outline-color:rgba(255,255,255,.28);}

  .sec-light{background:var(--white);}
  .sec-warm{background:var(--laterite-100);}
  .sec-dark{position:relative;background:var(--basalte-900);color:var(--gray-100);isolation:isolate;overflow:hidden;}
  .sec-dark::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
    background-image:url("../images/topo-sombre.svg");background-size:400px 400px;opacity:.05;}
  /* halo ambre : la lueur du minerai chaud, ancrée dans un angle */
  .sec-dark::after{content:'';position:absolute;z-index:-1;pointer-events:none;
    top:-25%;right:-10%;width:62%;height:150%;
    background:radial-gradient(ellipse at center,rgba(var(--amber-500-rgb),.15) 0%,rgba(var(--amber-500-rgb),0) 70%);}
  .sec-dark.glow-left::after{right:auto;left:-10%;}
  .sec-dark h2,.sec-dark h3,.sec-dark h4{color:var(--white);}
  .sec-dark .label,.sec-dark .section-head .label{color:var(--amber-500);}
  .sec-dark .content-lead,.sec-dark p{color:var(--gray-200);}
  .sec-dark .section-head a{color:var(--white);}

  /* ---------- 1.3 — FAMILLE DE SÉPARATIONS (bords de section) ----------
     Un même moteur, cinq découpes et un objet, à choisir selon le SENS de la page —
     l'objectif est de varier sans jamais tirer au hasard :

       .sep-strates   couches géologiques      → géologie, histoire, ressources
       .sep-faille    cassure nette en biais   → annonces, partenaires, ruptures
       .sep-gradins   front de taille en pas   → chiffres, performance, capacités
       .sep-carottes  échantillons de forage   → exploration, analyse, qualité
       .sep-rive      ondulation d'eau         → port, transbordement, environnement
       .sep-belt      bande de convoyeur       → objet posé ENTRE deux sections

     Usage : `class="... sep sep-t-faille sep-b-rive"` (t = haut, b = bas).
     RÈGLE : une frontière ne porte JAMAIS deux découpes. Si la section du dessus
     a une découpe basse, celle du dessous n'en met pas en haut — sinon les deux
     formes se superposent et le bord devient illisible.
     La marge négative fait mordre la section sur la précédente ; la découpe
     laisse alors apparaître la couleur de celle-ci. ------------------------ */
  .sep{clip-path:polygon(var(--sep-top,0 0,100% 0),var(--sep-bot,100% 100%,0 100%));}

  /* — couches géologiques (profondeur 26px) — */
  .sep-t-strates{--sep-top:0 26px,14% 8px,31% 22px,49% 0,67% 18px,84% 4px,100% 20px;margin-top:-26px;padding-top:126px;}
  .sep-b-strates{--sep-bot:100% calc(100% - 20px),86% calc(100% - 4px),68% calc(100% - 22px),50% calc(100% - 2px),33% calc(100% - 18px),15% calc(100% - 6px),0 calc(100% - 24px);padding-bottom:126px;}

  /* — cassure nette : une seule diagonale, très graphique (44px) — */
  .sep-t-faille{--sep-top:0 44px,100% 0;margin-top:-44px;padding-top:144px;}
  .sep-b-faille{--sep-bot:100% calc(100% - 44px),0 100%;padding-bottom:144px;}

  /* — front de taille : marches descendantes (42px) — */
  .sep-t-gradins{--sep-top:0 42px,20% 42px,20% 28px,45% 28px,45% 14px,72% 14px,72% 0,100% 0;margin-top:-42px;padding-top:142px;}
  .sep-b-gradins{--sep-bot:100% calc(100% - 42px),78% calc(100% - 42px),78% calc(100% - 28px),53% calc(100% - 28px),53% calc(100% - 14px),26% calc(100% - 14px),26% 100%,0 100%;padding-bottom:142px;}

  /* — carottes de forage : dents régulières (30px) — */
  .sep-t-carottes{--sep-top:0 34px,7% 34px,7% 6px,15% 6px,15% 34px,26% 34px,26% 16px,34% 16px,34% 34px,45% 34px,45% 0,53% 0,53% 34px,64% 34px,64% 20px,72% 20px,72% 34px,83% 34px,83% 10px,91% 10px,91% 34px,100% 34px;margin-top:-34px;padding-top:134px;}
  .sep-b-carottes{--sep-bot:100% calc(100% - 34px),91% calc(100% - 34px),91% calc(100% - 10px),83% calc(100% - 10px),83% calc(100% - 34px),72% calc(100% - 34px),72% calc(100% - 20px),64% calc(100% - 20px),64% calc(100% - 34px),53% calc(100% - 34px),53% 100%,45% 100%,45% calc(100% - 34px),34% calc(100% - 34px),34% calc(100% - 16px),26% calc(100% - 16px),26% calc(100% - 34px),15% calc(100% - 34px),15% calc(100% - 6px),7% calc(100% - 6px),7% calc(100% - 34px),0 calc(100% - 34px);padding-bottom:134px;}

  /* — rive : ondulation douce, sinusoïde approchée (24px) — */
  .sep-t-rive{--sep-top:0 0,7.1% 1.2px,14.3% 4.5px,21.4% 9.3px,28.6% 14.7px,35.7% 19.5px,42.9% 22.8px,50% 24px,57.1% 22.8px,64.3% 19.5px,71.4% 14.7px,78.6% 9.3px,85.7% 4.5px,92.9% 1.2px,100% 0;margin-top:-24px;padding-top:124px;}
  .sep-b-rive{--sep-bot:100% calc(100% - 24px),92.9% calc(100% - 22.8px),85.7% calc(100% - 19.5px),78.6% calc(100% - 14.7px),71.4% calc(100% - 9.3px),64.3% calc(100% - 4.5px),57.1% calc(100% - 1.2px),50% 100%,42.9% calc(100% - 1.2px),35.7% calc(100% - 4.5px),28.6% calc(100% - 9.3px),21.4% calc(100% - 14.7px),14.3% calc(100% - 19.5px),7.1% calc(100% - 22.8px),0 calc(100% - 24px);padding-bottom:124px;}

  /* — objet : bande de convoyeur posée entre deux sections — */
  .sep-belt{height:22px;background:var(--basalte-900);
    background-image:repeating-linear-gradient(115deg,rgba(var(--amber-500-rgb),.42) 0 2px,transparent 2px 22px);
    border-top:1px solid rgba(var(--amber-500-rgb),.35);border-bottom:1px solid rgba(255,255,255,.1);}
  .sep-belt--pale{background:var(--laterite-300);
    background-image:repeating-linear-gradient(115deg,rgba(var(--laterite-800-rgb),.32) 0 2px,transparent 2px 22px);
    border-color:rgba(var(--laterite-800-rgb),.22);}

  /* alias historiques (Accueil) — même géométrie que .sep-*-strates */
  .strata-top{clip-path:polygon(0 26px,14% 8px,31% 22px,49% 0,67% 18px,84% 4px,100% 20px,100% 100%,0 100%);}
  .strata-bottom{clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),86% calc(100% - 4px),68% calc(100% - 22px),50% calc(100% - 2px),33% calc(100% - 18px),15% calc(100% - 6px),0 calc(100% - 24px));}
  .strata-both{clip-path:polygon(0 26px,14% 8px,31% 22px,49% 0,67% 18px,84% 4px,100% 20px,100% calc(100% - 20px),86% calc(100% - 4px),68% calc(100% - 22px),50% calc(100% - 2px),33% calc(100% - 18px),15% calc(100% - 6px),0 calc(100% - 24px));}
  .strata-top,.strata-both{margin-top:-26px;padding-top:126px;}
  .strata-bottom,.strata-both{padding-bottom:126px;}

  /* ---------- 1.7 — overlay photo standard + hero « oxydation » ---------- */
  .hero-overlay--oxide{background:
    linear-gradient(180deg,rgba(var(--basalte-900-rgb),.78) 0%,rgba(var(--basalte-900-rgb),.42) 22%,rgba(38,32,28,.68) 58%,rgba(var(--basalte-900-rgb),.95) 100%),
    linear-gradient(115deg,rgba(var(--laterite-600-rgb),.34) 0%,rgba(var(--laterite-600-rgb),0) 55%,rgba(var(--amber-500-rgb),.16) 100%);}

  /* ---------- 1.5 — chiffres en gradins ---------- */
  .figures-terrace{position:relative;display:grid;gap:0;margin-top:52px;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    border-left:2px solid var(--laterite-300);}
  .figure-step{position:relative;padding:34px 28px 34px 30px;background:var(--laterite-100);
    border-bottom:1px solid rgba(var(--laterite-800-rgb),.14);}
  /* chaque gradin descend d'un cran : la lecture suit une pente, comme un front de taille */
  .figure-step:nth-child(2){margin-top:26px;}
  .figure-step:nth-child(3){margin-top:52px;}
  .figure-step:nth-child(4){margin-top:78px;}
  .figure-step::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber-500);opacity:0;transition:opacity .4s;}
  .figure-step:hover::before,.figure-step.visible::before{opacity:1;}
  .figure-num{display:block;font-family:var(--font-display);font-weight:800;line-height:1;
    font-size:clamp(34px,4vw,52px);color:var(--laterite-800);letter-spacing:-.02em;}
  .figure-unit{font-size:.5em;font-weight:700;color:var(--laterite-600);margin-left:4px;}
  .figure-label{display:block;margin-top:10px;font-size:15px;font-weight:600;color:var(--gray-700);line-height:1.45;}
  /* sur fond déjà latérite, les gradins se détachent en blanc translucide */
  .sec-warm .figure-step{background:rgba(255,255,255,.62);}
  .sec-dark .figure-step{background:rgba(255,255,255,.045);border-bottom-color:rgba(255,255,255,.1);}
  .sec-dark .figures-terrace{border-left-color:rgba(var(--amber-500-rgb),.5);}
  .sec-dark .figure-num{color:var(--amber-500);}
  .sec-dark .figure-unit{color:var(--amber-300);}
  .sec-dark .figure-label{color:var(--gray-200);}

  /* ---------- 1.6 — convoyeur (bande de progression horizontale à photos) ---------- */
  .conveyor{position:relative;margin-top:64px;}
  /* la bande passe derrière les photos, à mi-hauteur : le minerai « circule » d'une étape à l'autre */
  .conveyor-belt{position:absolute;top:104px;left:calc(12.5% - 2px);right:calc(12.5% - 2px);height:10px;
    background:rgba(255,255,255,.09);border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);
    background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.11) 0 2px,transparent 2px 12px);}
  .conveyor-belt-fill{position:absolute;top:0;left:0;height:100%;width:0;background:var(--amber-500);
    background-image:repeating-linear-gradient(115deg,rgba(32,33,36,.22) 0 2px,transparent 2px 12px);
    transition:width 1.2s cubic-bezier(.2,.8,.2,1);}
  .conveyor-stops{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;}
  .conveyor-stop{text-align:center;opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
  .conveyor-stop.visible{opacity:1;transform:none;}
  .conveyor-steps-static .conveyor-stop{opacity:1;transform:none;}
  .conveyor-visual{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
    border:1px solid rgba(255,255,255,.14);background:var(--basalte-800);}
  .conveyor-visual img{width:100%;height:100%;object-fit:cover;display:block;
    filter:grayscale(.35) contrast(1.05);transition:filter .5s,transform .6s cubic-bezier(.2,.8,.2,1);}
  .conveyor-stop.visible .conveyor-visual img{filter:none;}
  .conveyor-stop:hover .conveyor-visual img{transform:scale(1.05);}
  .conveyor-visual svg{width:100%;height:100%;display:block;}
  .conveyor-index{position:absolute;top:12px;left:12px;z-index:2;width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;background:var(--basalte-900);
    border:2px solid var(--amber-500);color:var(--amber-500);
    font-family:var(--font-display);font-weight:800;font-size:15px;}
  .conveyor-stop h3{font-size:20px;margin:22px 0 8px;color:var(--white);}
  .conveyor-stop p{font-size:15px;line-height:1.6;color:var(--gray-300);margin-bottom:14px;}
  .conveyor-stop a{font-size:15px;font-weight:700;color:var(--white);
    border-bottom:1.5px solid var(--amber-500);padding-bottom:2px;}
  .conveyor-stop a:hover{color:var(--amber-500);}

  /* ---------- 1.4 — icônes minières (sprite : voir assets/images/icons-mine.svg) ----------
     ⚠️ Le trait d'une icône sur fond clair est en LATÉRITE, jamais en ambre (01/08/2026).
     L'ambre `--amber-600` sur pastille `--amber-50` ne fait que 1,64:1, et 1,56:1 sur blanc
     chaud : les icônes étaient dans le DOM, correctement dimensionnées et colorées — et
     invisibles à l'œil. C'est ainsi que le défaut a été signalé, « les icônes ne s'affichent
     pas ». `--laterite-600` y fait 6,04:1 (et 6,74:1 sur blanc).
     Le patron est celui des libellés et des grands chiffres depuis le 30/07 : latérite par
     défaut, `.sec-dark <sélecteur>{color:var(--amber-500)}` pour restaurer l'ambre en
     section sombre, où il fait 9,18:1. L'ambre reste la couleur d'action ; il n'a jamais
     été une couleur de trait sur fond clair. */
  .ico{width:26px;height:26px;display:block;fill:none;stroke:currentColor;
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  .ico-lg{width:34px;height:34px;}

  /* ---------- numéro géant en filigrane (étapes, valeurs) ---------- */
  .ghost-num{position:absolute;top:-18px;right:8px;z-index:0;pointer-events:none;
    font-family:var(--font-display);font-weight:800;font-size:clamp(72px,9vw,132px);
    line-height:1;color:var(--laterite-800);opacity:.09;letter-spacing:-.04em;}
  .sec-dark .ghost-num{color:var(--amber-500);opacity:.13;}

  /* ---------- responsive de la DA ---------- */
  @media(max-width:1024px){
    .conveyor-stops{grid-template-columns:repeat(2,1fr);row-gap:44px;}
    .conveyor-belt{display:none;}
    .figures-terrace .figure-step:nth-child(n){margin-top:0;}
  }
  @media(max-width:640px){
    .conveyor-stops{grid-template-columns:1fr;row-gap:36px;}
    .figures-terrace{border-left-width:2px;}
    .figure-step{padding:26px 20px 26px 22px;}
    .strata-top,.strata-both,[class*="sep-t-"]{padding-top:96px;}
    .strata-bottom,.strata-both,[class*="sep-b-"]{padding-bottom:96px;}
    .sep-t-faille{--sep-top:0 26px,100% 0;margin-top:-26px;}
    .sep-b-faille{--sep-bot:100% calc(100% - 26px),0 100%;}
    .sep-t-gradins{--sep-top:0 26px,20% 26px,20% 17px,45% 17px,45% 9px,72% 9px,72% 0,100% 0;margin-top:-26px;}
    .sep-b-gradins{--sep-bot:100% calc(100% - 26px),78% calc(100% - 26px),78% calc(100% - 17px),53% calc(100% - 17px),53% calc(100% - 9px),26% calc(100% - 9px),26% 100%,0 100%;}
    .strata-top,.strata-both{margin-top:-16px;}
    .ghost-num{font-size:64px;}
  }
  @media(prefers-reduced-motion:reduce){
    .conveyor-stop{opacity:1;transform:none;transition:none;}
    .conveyor-belt-fill{transition:none;}
    .conveyor-visual img{filter:none;}
  }

  /* ---------- ajustements Lot 2A (Accueil) ---------- */
  /* compteur animé à l'intérieur d'un chiffre en gradin : il ne doit pas réimposer sa typo */
  .figure-num .stat-num{font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;}
  /* mot du dirigeant : portrait plus grand + guillemet de citation en grand corps */
  .leader-quote .leader-grid{grid-template-columns:320px 1fr;gap:64px;}
  .leader-quote blockquote{position:relative;padding-left:56px;}
  /* guillemet ouvrant en grand corps : il remplace les « » du texte, qui sont retirés du HTML */
  .leader-quote blockquote::before{content:'\00AB';position:absolute;left:-4px;top:-14px;
    font-family:var(--font-display);font-weight:800;font-size:96px;line-height:1;
    color:var(--amber-500);opacity:.5;pointer-events:none;}
  .partners-band.sec-dark{border-top-color:rgba(255,255,255,.1);border-bottom-color:rgba(255,255,255,.1);}
  .partners-band.sec-dark .partners-head p{color:var(--gray-200);}
  @media(max-width:860px){
    .leader-quote .leader-grid{grid-template-columns:1fr;gap:28px;}
    .leader-quote blockquote{padding-left:36px;}
    .leader-quote blockquote::before{font-size:86px;top:-18px;}
    /* la rangée passe en colonne : côte à côte, il ne resterait pas assez de largeur
       au texte. L'image devient un bandeau sous les paragraphes — il faut donc lui
       redonner une hauteur propre, puisqu'elle n'a plus de bloc voisin sur qui se
       caler : align-self:stretch la ferait retomber à zéro, l'img étant hors flux. */
    .lead-media-row{flex-direction:column;gap:26px;}
    .lead-media{width:100%;align-self:auto;aspect-ratio:2.4/1;}
  }

  /* carte de ressource en attente : elle informe sans faire croire à un lien */
  /* état « en préparation » : signalé par des teintes éteintes, PAS par opacity.
     Un opacity:.72 sur la carte entière composait le texte avec le blanc du fond et
     ramenait « Disponible prochainement » à 1,79:1 réellement rendu (2,41:1 en valeur
     déclarée — l'écart, c'est justement l'opacité). Les couleurs ci-dessous donnent le
     même effet d'atténuation tout en restant lisibles : 7,33:1 pour le libellé. */
  .resource-card--pending{background:var(--gray-50);}
  .resource-card--pending:hover{border-color:var(--gray-100);transform:none;}
  .resource-card--pending h3{color:var(--gray-700);}
  .resource-card--pending .resource-icon{background:var(--white);color:var(--gray-600);}
  .resource-card--pending .resource-action{background:var(--gray-100);color:var(--gray-800);}
  .resource-card--pending:hover .resource-action{background:var(--gray-100);}

  /* média en attente (vidéos non encore livrées) : informe sans imiter un contenu cliquable */
  /* le gabarit des vidéos vit dans la feuille de style, pas en attribut :
     un style en ligne bloquait la bascule mobile et débordait de l'écran */
  .media-gallery-grid--videos{grid-template-columns:repeat(2,1fr);max-width:640px;}
  .media-pending{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:8px;text-align:center;padding:20px;background:var(--laterite-100);
    border:1.5px dashed var(--laterite-300);cursor:default;}
  .media-pending-icon{width:44px;height:44px;border-radius:50%;background:var(--white);
    display:flex;align-items:center;justify-content:center;color:var(--laterite-600);}
  .media-pending-icon svg{width:21px;height:21px;}
  .media-pending-title{font-family:var(--font-display);font-weight:700;font-size:15px;
    color:var(--gray-900);line-height:1.35;}
  .media-pending-note{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--laterite-600);}

  /* ---------- Lot 2B — valeurs en strates numérotées ---------- */
  .value-strata{margin-top:52px;border-left:2px solid var(--laterite-300);}
  .value-band{position:relative;overflow:hidden;padding:30px 34px;
    background:rgba(255,255,255,.6);border-bottom:1px solid rgba(var(--laterite-800-rgb),.14);}
  .value-band:nth-child(2){margin-left:36px;}
  .value-band:nth-child(3){margin-left:72px;}
  .value-band::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
    background:var(--amber-500);opacity:0;transition:opacity .4s;}
  .value-band.visible::before,.value-band:hover::before{opacity:1;}
  .value-band h3{position:relative;z-index:1;font-size:22px;margin-bottom:6px;}
  .value-band p{position:relative;z-index:1;font-size:17px;color:var(--gray-700);max-width:640px;}
  .value-band .ghost-num{top:-12px;right:20px;font-size:clamp(56px,7vw,98px);}

  /* ---------- Lot 2B — frise verticale « carotte de forage » ---------- */
  .core-timeline{position:relative;margin-top:56px;padding-left:112px;}
  .core-timeline::before{content:'';position:absolute;left:30px;top:8px;bottom:8px;width:30px;border-radius:15px;
    background:linear-gradient(180deg,var(--laterite-600) 0%,var(--laterite-700) 16%,var(--laterite-600) 32%,var(--laterite-800) 50%,var(--laterite-600) 66%,var(--laterite-700) 84%,var(--laterite-600) 100%);
    box-shadow:inset -7px 0 14px rgba(0,0,0,.3),inset 7px 0 12px rgba(255,255,255,.09);}
  .core-node{position:relative;padding-bottom:48px;}
  .core-node:last-child{padding-bottom:0;}
  /* le trait de coupe sur la carotte, puis le tiret qui rejoint le texte */
  .core-node::before{content:'';position:absolute;left:-82px;top:13px;width:30px;height:3px;
    background:rgba(20,12,6,.5);}
  .core-node::after{content:'';position:absolute;left:-46px;top:14px;width:34px;height:1px;
    background:var(--laterite-300);}
  .core-year{display:block;font-family:var(--font-display);font-weight:800;font-size:26px;
    color:var(--laterite-800);line-height:1;margin-bottom:8px;letter-spacing:-.01em;}
  .core-desc{font-size:17px;color:var(--gray-700);line-height:1.65;max-width:620px;}
  .sec-dark .core-year{color:var(--amber-500);}
  .sec-dark .core-desc{color:var(--gray-200);}

  /* ---------- Lot 2B — profil et éthique sur fond sombre ---------- */
  .sec-dark .profile-grid{background:rgba(255,255,255,.05);}
  .sec-dark .profile-portrait{background:var(--basalte-800);border-color:rgba(255,255,255,.18);}
  .sec-dark .profile-name{color:var(--white);}
  .sec-dark .profile-role{color:var(--amber-500);}
  .sec-dark .ethics-item{border-bottom-color:rgba(255,255,255,.12);}
  .sec-dark .ethics-item svg{color:var(--amber-500);}
  .subsection-head{margin-top:76px;}
  /* base en latérite comme .section-head .label : aujourd'hui ce libellé n'apparaît qu'en
     section sombre, où l'override ci-dessous le repasse en ambre. Le laisser en ambre par
     défaut était un piège dormant — la première utilisation en section claire aurait
     publié un libellé à 1,84:1 sans que rien ne l'annonce. */
  .subsection-head .label{display:block;color:var(--laterite-600);font-weight:700;font-size:14px;
    letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;}
  .sec-dark .subsection-head .label{color:var(--amber-500);}
  .sec-dark .value-num{color:var(--amber-500);}
  .subsection-head h3{font-size:clamp(22px,2.6vw,28px);margin-bottom:8px;}
  .subsection-head .content-lead{margin-top:10px;}

  /* ---------- Lot 2B — cartes partenaires ---------- */
  .partner-detail-card{position:relative;overflow:hidden;}
  .partner-detail-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
    background:var(--amber-500);transform:scaleX(0);transform-origin:left;transition:transform .4s;}
  .partner-detail-card:hover::after{transform:scaleX(1);}
  .sec-warm .partner-detail-card{background:rgba(255,255,255,.62);border-color:rgba(var(--laterite-800-rgb),.16);}

  @media(max-width:640px){
    .value-band:nth-child(2),.value-band:nth-child(3){margin-left:0;}
    .value-band{padding:24px 22px;}
    .core-timeline{padding-left:74px;}
    .core-timeline::before{left:16px;width:22px;}
    .core-node::before{left:-58px;width:22px;}
    .core-node::after{left:-32px;width:22px;}
  }

  /* ---------- Lot 2C — lien d'étape dans la chaîne logistique ---------- */
  .chain-step-link{display:inline-block;margin-top:12px;font-size:15px;font-weight:700;
    color:var(--white);border-bottom:1.5px solid var(--amber-500);padding-bottom:2px;
    transition:color .2s;}
  .chain-step-link:hover{color:var(--amber-500);}

  /* ---------- Lot 2C — légende du territoire (sites, bases-vie, ports) ---------- */
  .territory-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px;}
  .territory-item-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
  .territory-item-head .ico{color:var(--amber-500);flex-shrink:0;}
  .territory-item h3{font-size:18px;margin:0;}
  .territory-item ul{margin:0;}
  .territory-item li{font-size:15px;color:var(--gray-300);padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,.09);}
  .territory-item li:last-child{border-bottom:none;}
  @media(max-width:860px){.territory-legend{grid-template-columns:1fr;gap:24px;}}

  /* ---------- Lot 2D — « Notre méthode » : trois points de contrôle ---------- */
  .method-points{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:46px;}
  .method-point{padding-top:22px;border-top:2px solid var(--amber-500);}
  .method-point .ico{color:var(--laterite-600);margin-bottom:14px;}
  .method-point h3{font-size:18px;margin-bottom:6px;}
  .method-point p{font-size:15px;line-height:1.6;color:var(--gray-700);}
  .sec-dark .method-point .ico{color:var(--amber-500);}
  .sec-dark .method-point p{color:var(--gray-200);}
  @media(max-width:860px){.method-points{grid-template-columns:1fr;gap:26px;}}

  /* variante à 3 arrêts du convoyeur (navigation croisée des sous-pages) */
  .conveyor--3 .conveyor-stops{grid-template-columns:repeat(3,1fr);}
  .conveyor--3 .conveyor-belt{left:calc(16.66% - 2px);right:calc(16.66% - 2px);}
  @media(max-width:1024px){.conveyor--3 .conveyor-stops{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:640px){.conveyor--3 .conveyor-stops{grid-template-columns:1fr;}}

  /* Garde-fou : certains composants gardent un fond clair à l'intérieur d'une section
     sombre. Sans ces règles, `.sec-dark p` (plus spécifique que `.icon-box p`) y écrirait
     du gris clair sur du blanc. */
  .sec-dark .icon-box h3,.sec-dark .news-card h3,.sec-dark .news-title{color:var(--gray-900);}
  .sec-dark .icon-box p,.sec-dark .news-card p,.sec-dark .news-excerpt{color:var(--gray-700);}
  .sec-dark .stat-label{color:var(--gray-200);}
  .sec-dark figcaption{color:var(--gray-400);}

  /* Unité en toutes lettres (« habitants », « enseignants ») : elle passe sous le nombre.
     Sinon, dans une grille à 4 colonnes, c'est le NOMBRE qui se coupe en deux — piège déjà
     rencontré sur les stats des pages Opérations. */
  .figure-unit--word{display:block;margin-left:0;margin-top:4px;font-size:.4em;line-height:1.2;}
  /* photo d'illustration dans une section de texte : elle ne doit pas écraser le propos */
  .article-figure--inline{max-width:760px;}

  /* ---------- Lot 2F — galerie chargée par lots ---------- */
  .gallery-wall-item.batched{display:none;}
  .gallery-more{display:flex;justify-content:center;margin-top:36px;}
  .gallery-more button{padding:14px 30px;border-radius:4px;font-weight:700;font-size:16px;
    border:1.5px solid rgba(255,255,255,.45);color:var(--white);transition:all .25s;}
  .gallery-more button:hover{border-color:var(--amber-500);background:rgba(var(--amber-500-rgb),.12);}
  .gallery-more[hidden]{display:none;}

  /* grille d'actualités à 2 colonnes : évite la carte orpheline quand il y en a 4 */
  .news-grid--2{grid-template-columns:repeat(2,1fr);}
  @media(max-width:860px){.news-grid--2{grid-template-columns:1fr;}}

  /* galerie et filtres posés sur une section sombre */
  .sec-dark .gallery-wall-item{background:var(--basalte-800);border-color:rgba(255,255,255,.1);}
  /* .28 mettait ce contour à 2,55:1 sur basalte, sous le même seuil de 3:1 que sa
     variante claire ; .38 le porte à 3,55:1. Le remplissage étant ici transparent,
     le contour est le seul dessin du bouton. */
  .sec-dark .filter-btn{background:transparent;color:var(--gray-200);border-color:rgba(255,255,255,.38);}
  .sec-dark .filter-btn:hover{border-color:var(--amber-500);color:var(--white);}
  .sec-dark .filter-btn.active{background:var(--amber-500);border-color:var(--amber-500);color:var(--gray-900);}

  /* ---------- Lot 2G/2H — derniers ajustements ---------- */
  /* carte sombre sans bandeau de pied (le CTA est unique, sous la grille) */
  .icon-box--dark.no-footer{padding-bottom:30px;}
  .icon-box--dark.no-footer p{margin-bottom:0;}
  .action-cta{display:flex;justify-content:center;margin-top:52px;}
  /* rangée d'offre : un filet ambre la désigne au survol */
  .job-row{position:relative;padding-left:18px;transition:background .25s,padding-left .25s;}
  .job-row::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;
    background:var(--amber-500);opacity:0;transition:opacity .25s;}
  .job-row:hover{background:rgba(255,255,255,.55);padding-left:24px;}
  .job-row:hover::before{opacity:1;}
  /* bande newsletter compacte en pied de page Contact */
  .newsletter-band .newsletter-box{margin-top:26px;}
  .newsletter-band .newsletter-box input{background:rgba(255,255,255,.94);border-color:transparent;}

  /* ---------- Équipe de direction : portraits détourés sur socle lumineux ----------
     Les portraits viennent de l'agenda 2026, détourés sur fond transparent (WebP).
     Le socle radial ambre/latérite leur sert de fond commun : c'est lui qui donne
     l'unité, pas le fond d'origine des photos — d'où un rendu homogène malgré des
     prises de vue très différentes. */
  .board-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:38px 26px;margin-top:56px;}
  .board-card{text-align:center;}
  .board-photo{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    background:radial-gradient(ellipse at 50% 118%,rgba(var(--amber-500-rgb),.34) 0%,rgba(var(--laterite-600-rgb),.62) 42%,rgba(var(--basalte-900-rgb),.96) 78%);
    transition:border-color .35s ease,box-shadow .35s ease;}
  .board-photo::after{content:'';position:absolute;left:0;right:0;bottom:0;height:38%;
    background:linear-gradient(180deg,rgba(var(--basalte-900-rgb),0),rgba(var(--basalte-900-rgb),.55));pointer-events:none;}
  .board-photo img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    height:97%;width:auto;max-width:none;filter:saturate(.9);
    transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease;}
  .board-card:hover .board-photo{border-color:var(--amber-500);box-shadow:0 18px 40px rgba(0,0,0,.35);}
  .board-card:hover .board-photo img{transform:translateX(-50%) translateY(-10px) scale(1.03);filter:none;}
  .board-name{display:block;margin-top:16px;font-family:var(--font-display);font-weight:700;
    font-size:17px;line-height:1.28;color:var(--white);}
  .board-role{display:block;margin-top:5px;font-size:13px;font-weight:600;line-height:1.45;
    color:var(--amber-500);}
  @media(max-width:1024px){.board-grid{grid-template-columns:repeat(3,1fr);}}
  @media(max-width:640px){.board-grid{grid-template-columns:repeat(2,1fr);gap:28px 18px;}
    .board-name{font-size:15px;} .board-role{font-size:12px;}}

  /* ---------- Vidéos : lecteur natif, cadré selon le format de la source ----------
     Les témoignages sont tournés au format carré (réseaux sociaux), la vidéo du port
     en 16/9 : chaque carte porte son propre ratio plutôt qu'un cadre commun qui
     rognerait les visages. */
  .video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px;align-items:start;}
  .video-card{background:var(--basalte-800);border:1px solid rgba(255,255,255,.1);
    border-radius:14px;overflow:hidden;transition:border-color .3s,transform .3s;}
  .video-card:hover{border-color:var(--amber-500);transform:translateY(-3px);}
  .video-card video{width:100%;height:auto;display:block;background:#000;}
  /* Bouton « agrandir » des vidéos. Il ne peut pas être posé sur la vidéo elle-même
     comme l'.expand-hint des images : <video controls> capte le clic pour lire, et
     un survol suffisant à révéler le bouton laisserait le doigt sans cible sur mobile.
     D'où un vrai <button>, toujours présent (simplement plus discret au repos),
     placé en haut à droite, hors de la zone des contrôles natifs qui est en bas. */
  .video-media{position:relative;line-height:0;}
  .video-expand{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;
    border-radius:50%;background:rgba(27,28,31,.72);color:var(--white);cursor:pointer;
    display:flex;align-items:center;justify-content:center;padding:0;opacity:.75;
    transition:opacity .25s ease,background .25s ease,transform .25s cubic-bezier(.22,.61,.36,1);}
  .video-expand svg{width:16px;height:16px;}
  .video-card:hover .video-expand,.video-expand:hover,.video-expand:focus-visible{
    opacity:1;background:var(--amber-500);color:var(--gray-900);transform:scale(1.08);}
  .video-expand:focus-visible{outline:2px solid var(--amber-500);outline-offset:2px;}

  /* la lightbox accueille aussi de la vidéo : elle doit pouvoir respirer en hauteur */
  .lightbox-media video{width:100%;height:100%;max-height:78vh;display:block;background:#000;object-fit:contain;}
  .lightbox-media:has(video){aspect-ratio:auto;}
  .video-card figcaption{padding:16px 18px 18px;}
  .video-card .video-title{display:block;font-family:var(--font-display);font-weight:700;
    font-size:16px;line-height:1.35;color:var(--white);}
  .video-card .video-meta{display:block;margin-top:6px;font-size:13px;color:var(--amber-500);font-weight:600;}
  @media(max-width:1024px){.video-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:640px){.video-grid{grid-template-columns:1fr;}}

  /* ============================================================
     Bandeau de consentement (30/07/2026)
     Fond basalte + motif topographique : même registre que .sec-dark, pour que le
     bandeau se lise comme une pièce du site et non comme un module tiers collé
     dessus. L'ambre reste la seule couleur d'action.
     ⚠️ Contrastes mesurés sur --basalte-900 : blanc 16,8:1, --gray-300 8,9:1,
     ambre 9,18:1. Les descriptions de catégorie sont en 14 px, donc au-dessus du
     seuil AA de 4,5:1 avec de la marge — ne pas les éclaircir sans remesurer.
     « Tout refuser » a exactement le même gabarit que « Tout accepter » (même
     padding, même taille de texte) : refuser doit être aussi simple qu'accepter,
     c'est une exigence CNIL et pas un détail de style.
     ============================================================ */
  .consentement:not([hidden]){display:block;}
  .consentement{position:fixed;left:0;right:0;bottom:0;z-index:900;padding:0 20px 20px;
    pointer-events:none;}
  .consentement-boite{pointer-events:auto;max-width:1080px;margin:0 auto;padding:26px 30px;
    border-radius:10px;border:1px solid rgba(var(--amber-500-rgb),.28);
    background:var(--basalte-900);
    box-shadow:0 -6px 40px rgba(0,0,0,.32);
    animation:consentement-entree .45s cubic-bezier(.22,.61,.36,1) both;}
  @keyframes consentement-entree{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
  @media(prefers-reduced-motion:reduce){.consentement-boite{animation:none;}}

  .consentement-titre{font-size:19px;color:var(--white);margin-bottom:8px;}
  .consentement-texte{font-size:14.5px;line-height:1.6;color:var(--gray-300);max-width:78ch;}
  .consentement-texte a{color:var(--amber-500);border-bottom:1px solid rgba(var(--amber-500-rgb),.45);}
  .consentement-texte a:hover{border-bottom-color:var(--amber-500);}

  .consentement-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;}
  .consentement-actions .btn{padding:11px 24px;font-size:15px;}
  /* .btn-outline porte une bordure de 1,5 px que .btn-primary n'a pas : sans ce
     rattrapage « Tout accepter » fait 41 px de haut contre 43 pour « Tout refuser »,
     et les deux boutons ne s'alignent pas. La parité des deux choix se voit. */
  .consentement-actions .btn-primary{border:1.5px solid transparent;}
  .consentement-lien{font-size:14.5px;font-weight:600;color:var(--gray-300);
    border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:2px;transition:color .2s,border-color .2s;}
  .consentement-lien:hover,.consentement-lien:focus-visible{color:var(--white);border-bottom-color:var(--white);}
  .consentement-lien--enregistrer{color:var(--amber-500);border-bottom-color:rgba(var(--amber-500-rgb),.5);}
  .consentement-lien--enregistrer:hover{color:var(--amber-500);border-bottom-color:var(--amber-500);}

  .consentement-detail{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);}
  .consentement-cats{display:flex;flex-direction:column;gap:16px;}
  .consentement-cat{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;}
  .consentement-cat-nom{display:block;font-family:var(--font-display);font-weight:600;
    font-size:15px;color:var(--white);margin-bottom:3px;}
  label.consentement-cat-nom{cursor:pointer;}
  .consentement-cat-desc{display:block;font-size:14px;line-height:1.55;color:var(--gray-300);max-width:70ch;}
  .consentement-cat-etat{flex:0 0 auto;font-size:13px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--amber-500);padding-top:2px;}

  /* Bascule : l'input reste en place et opaque au clavier (pas de display:none, qui
     le sortirait de l'ordre de tabulation), simplement rendu transparent au-dessus
     de la piste dessinée. */
  .consentement-bascule{position:relative;flex:0 0 auto;width:46px;height:26px;}
  .consentement-bascule input{position:absolute;inset:0;width:100%;height:100%;opacity:0;
    margin:0;cursor:pointer;z-index:1;}
  .consentement-bascule-piste{position:absolute;inset:0;border-radius:13px;
    background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);transition:background .2s,border-color .2s;}
  .consentement-bascule-piste::after{content:'';position:absolute;top:3px;left:3px;
    width:18px;height:18px;border-radius:50%;background:var(--white);transition:transform .2s;}
  .consentement-bascule input:checked ~ .consentement-bascule-piste{
    background:var(--amber-500);border-color:var(--amber-500);}
  .consentement-bascule input:checked ~ .consentement-bascule-piste::after{transform:translateX(20px);background:var(--gray-900);}
  .consentement-bascule input:focus-visible ~ .consentement-bascule-piste{
    outline:2px solid var(--amber-500);outline-offset:3px;}

  /* bouton du pied qui rouvre le bandeau : il doit se lire comme les liens voisins */
  .footer-bouton-lien{font:inherit;color:inherit;text-align:left;padding:0;
    border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
  .footer-bouton-lien:hover,.footer-bouton-lien:focus-visible{color:var(--amber-500);border-bottom-color:var(--amber-500);}

  @media(max-width:860px){
    .consentement{padding:0 12px 12px;}
    .consentement-boite{padding:22px 20px;max-height:82vh;overflow-y:auto;}
    .consentement-actions .btn{flex:1 1 auto;justify-content:center;}
    .consentement-cat{flex-direction:row;gap:16px;}
  }

  /* ============================================================
     Sélecteur de langue du pied.
     Il double celui de l'en-tête, qui disparaît sous 480 px : sans lui, le petit
     mobile n'a aucun moyen de passer en anglais. Le globe est doublé d'un intitulé
     texte, conformément à la règle de la DA sur les icônes.
     ============================================================ */
  .footer-lang{display:flex;align-items:center;gap:11px;}
  .footer-lang-globe{width:17px;height:17px;stroke:var(--gray-400);flex-shrink:0;}
  .footer-lang-libelle{font-size:13px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--gray-400);}
  /* Le pied est sombre en permanence : contrairement à l'en-tête, il n'a pas d'état
     « défilé » à prévoir, et les règles de base de .lang-toggle s'appliquent telles quelles. */
  .lang-toggle--pied{border-color:rgba(255,255,255,.24);}
  .lang-toggle--pied span,.lang-toggle--pied a{padding:5px 10px;color:var(--gray-300);}
  .lang-toggle--pied a:hover,.lang-toggle--pied a:focus-visible{color:var(--white);}
  .lang-toggle--pied span.active{color:var(--gray-900);}

  /* ============================================================
     Retour au hero — pastille flottante au coin inférieur droit de la fenêtre.

     Forme conventionnelle assumée : pastille ronde de 48 px, flèche montante, ombre
     portée. C'est le motif que le visiteur rencontre partout ailleurs, et un objet de
     navigation gagne à être reconnu plutôt que déchiffré. Le vocabulaire de la DA est
     porté par la couleur (ambre d'action, ombre en basalte), pas par la silhouette.

     État par défaut VISIBLE : le lien est une ancre vers #main, il fonctionne donc
     sans JavaScript. C'est le masquage qui est piloté, jamais l'apparition — l'inverse
     aurait laissé un site sans JavaScript avec un bouton définitivement invisible.

     z-index 90 : sous l'en-tête (100) et sous le bandeau de consentement (900), qui
     occupe le même coin de fenêtre et doit passer devant.
     ============================================================ */
  .retour-hero{position:fixed;right:24px;bottom:24px;z-index:90;
    width:48px;height:48px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--amber-500);color:var(--gray-900);
    box-shadow:0 6px 20px rgba(var(--basalte-900-rgb),.3);
    transition:opacity .3s ease,transform .3s ease,visibility .3s,
               background .25s ease,box-shadow .25s ease;}
  .retour-hero svg{display:block;width:21px;height:21px;}
  .retour-hero:hover{background:var(--amber-600);transform:translateY(-3px);
    box-shadow:0 11px 26px rgba(var(--basalte-900-rgb),.38);}
  /* Anneau BICOLORE, et ce n'est pas décoratif : le bouton flotte au-dessus de sections
     claires comme sombres. Un anneau basalte seul disparaîtrait sur .sec-dark, un anneau
     blanc seul sur .sec-light — le doublet garde toujours un liseré contrasté. */
  .retour-hero:focus-visible{outline:none;
    box-shadow:0 0 0 3px var(--gray-900),0 0 0 6px var(--white),
               0 6px 20px rgba(var(--basalte-900-rgb),.3);}
  /* Escamoté tant qu'on est encore dans le hero (classe posée par main.js), et pendant
     que le bandeau de consentement occupe le bas de la fenêtre.
     Déclaré APRÈS :hover, à spécificité égale : le survol ne peut pas le rappeler. */
  .retour-hero.masque,body.consentement-visible .retour-hero{
    opacity:0;visibility:hidden;transform:translateY(10px);}

  /* Dégagement du pied : arrivé en bas de page, la pastille flotte au-dessus du coin
     inférieur droit du document, là où se trouve le sélecteur de langue. Au-dessus de
     1160 px, les 170 px que .site-footer .container réserve déjà au badge suffisent. */
  @media(max-width:1160px){
    .footer-bottom{padding-right:84px;}
  }
  @media(max-width:640px){
    .retour-hero{right:16px;bottom:16px;width:46px;height:46px;}
    .footer-bottom{padding-right:0;}
    /* le pied passe en colonne : la pastille ne survole plus que du vide sous la
       dernière ligne, à condition de lui laisser cette marge */
    .site-footer{padding-bottom:78px;}
    .footer-lang{width:100%;}
  }

  @media(prefers-reduced-motion:reduce){
    .retour-hero{transition:none;}
    .retour-hero:hover{transform:none;}
    .retour-hero.masque,body.consentement-visible .retour-hero{transform:none;}
  }