/* ===================================================================
   MOSAICA : SYSTEME DE COMPOSANTS EDITORIAL (arborescence McKinsey)
   Ce fichier vient s'ajouter a assets/styles.css (variables, hero,
   boutons). Il ne redefinit jamais #nav ni .hero-* de l'ancien systeme.
   =================================================================== */

/* ---------- Mosaique artistique (motif du livre Mosaica) ---------- */
.mosaic-art{position:absolute;pointer-events:none;filter:drop-shadow(0 20px 60px rgba(0,0,0,0.35))}
.mosaic-art svg{width:100%;height:100%;display:block}
.mosaic-corner-br{right:-8%;bottom:-14%;width:min(58vw,620px);opacity:0.94;z-index:1}
.mosaic-corner-bl{left:-10%;bottom:-18%;width:min(46vw,480px);opacity:0.4;transform:scaleX(-1);z-index:1}
.mosaic-inline{position:relative;width:100%;max-width:420px;margin:0 auto;filter:drop-shadow(0 12px 30px rgba(6,34,47,0.25))}
.mosaic-inline svg{width:100%;height:auto;display:block}
.mosaic-strip{display:flex;height:10px;overflow:hidden;border-radius:0}
.mosaic-strip span{flex:1}
@media(max-width:700px){
  .mosaic-corner-br{width:78vw;right:-18%;bottom:-10%;opacity:0.5}
  .mosaic-corner-bl{display:none}
}

/* ---------- Base editoriale ---------- */
.tag-cat{display:inline-block;font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold)}
.tag-cat.navy{color:var(--navy)}
.tag-cat.green{color:var(--green)}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 1.5rem}
section.pad{padding:5rem 0}
@media(max-width:700px){section.pad{padding:3.25rem 0}}
.eb-head{max-width:680px;margin-bottom:3rem}
.eb-head h2{font-family:'Ibarra Real Nova',serif;font-size:clamp(1.6rem,3.2vw,2.15rem);color:var(--navy);font-weight:700;margin:0.6rem 0 0.85rem;line-height:1.25}
.eb-head p{color:var(--gray6);font-size:1rem;line-height:1.7}
.eb-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- NAV GLOBALE (gnav) ---------- */
.gnav{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);background:#fff;border-bottom:2px solid var(--gold);box-shadow:0 2px 16px rgba(0,0,0,0.06);transition:box-shadow 0.2s}
.gnav.scrolled{box-shadow:0 6px 24px rgba(1,46,74,0.1)}
.gnav-inner{max-width:1320px;margin:0 auto;height:100%;display:flex;align-items:center;padding:0 1.5rem;gap:clamp(1rem,0.4rem + 1.6vw,2rem)}
.gnav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.gnav-logo img{display:block;border-radius:0;height:34px;width:auto}
.gnav-logo-text{font-family:'Ibarra Real Nova',serif;font-weight:700;font-size:0.98rem;color:var(--navy);white-space:nowrap}
.gnav-logo-text span{color:var(--gold)}
.gnav-primary{display:flex;align-items:center;gap:clamp(0.05rem,-0.1rem + 0.4vw,0.35rem);flex:1;list-style:none;min-width:0}
.gnav-primary>li{position:relative}
.gnav-link,.gnav-btn{display:inline-flex;align-items:center;gap:5px;color:var(--navy);text-decoration:none;font-size:0.79rem;font-weight:600;letter-spacing:0.01em;padding:9px clamp(8px,0.3vw + 6px,12px);border-radius:0;background:none;border:none;cursor:pointer;font-family:'Space Grotesk',sans-serif;white-space:nowrap;transition:background 0.15s,color 0.15s}
.gnav-link:hover,.gnav-btn:hover,.gnav-btn.open{background:var(--gray1);color:var(--gold)}
.gnav-btn svg{width:9px;height:9px;transition:transform 0.2s;flex-shrink:0}
.gnav-btn.open svg{transform:rotate(180deg)}
.gnav-util{display:flex;align-items:center;gap:clamp(0.6rem,0.2rem + 0.8vw,1.1rem);flex-shrink:0}

/* Sélecteur de langue : discret, jamais un bouton. Français est l'état
   courant (pas un lien : il n'existe qu'une version du site) ; English
   est visible mais inerte — aucun href, donc aucune navigation possible,
   simplement affiché avec une opacité réduite et une bulle native au
   survol/focus (title). */
.gnav-lang{display:flex;align-items:center;gap:7px;font-size:0.76rem;font-weight:600;letter-spacing:0.01em;white-space:nowrap}
.gnav-lang-fr{color:var(--navy)}
.gnav-lang-sep{color:rgba(1,46,74,0.28)}
.gnav-lang-en{color:rgba(1,46,74,0.4);cursor:default}
.gnav-lang-en:hover,.gnav-lang-en:focus-visible{color:rgba(1,46,74,0.62)}
.gnav-lang-short{display:none}

/* Sélecteur de langue compact « FR ▾ » : construit par assets/nav.js
   (initLangSelect) à partir du .gnav-lang existant ci-dessus, qui reste
   affiché tel quel sans JavaScript (repli, jamais une deuxième maquette).
   Le menu reste toujours sur fond clair, y compris depuis un bouton en
   mode héros : c'est un panneau posé au-dessus de la page, pas une
   extension de la navbar elle-même. */
.gnav-langsel{position:relative}
.gnav-langsel-btn{
  display:inline-flex;align-items:center;gap:4px;
  height:36px;padding:0 .6rem;
  border:1px solid rgba(1,46,74,0.22);border-radius:5px;
  background:transparent;color:var(--navy);
  font-family:'Space Grotesk',sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.02em;
  cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.gnav-langsel-btn:hover,.gnav-langsel-btn[aria-expanded="true"]{background:var(--gray1);border-color:var(--gold);color:var(--gold-dark)}
/* Anneau de focus propre au bouton : le contour bleu par défaut du
   navigateur n'a jamais été redéfini ici, corrigé au passage. */
.gnav-langsel-btn:focus-visible{outline:2px solid var(--gold-dark);outline-offset:2px}
.gnav-langsel-caret{width:8px;height:8px;flex-shrink:0;transition:transform .15s}
.gnav-langsel-btn[aria-expanded="true"] .gnav-langsel-caret{transform:rotate(180deg)}
body.hm-hero-mode .gnav-langsel-btn{border-color:rgba(255,255,255,.45);color:var(--white)}
body.hm-hero-mode .gnav-langsel-btn:hover,
body.hm-hero-mode .gnav-langsel-btn[aria-expanded="true"]{background:rgba(255,255,255,.14);border-color:var(--gold);color:var(--gold)}
body.hm-hero-mode .gnav-langsel-btn:focus-visible{outline-color:var(--gold)}

.gnav-langsel-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:150px;
  background:#fff;border:1px solid #e5e9ed;border-radius:8px;
  box-shadow:0 10px 28px rgba(1,46,74,.14);
  padding:.4rem;z-index:1050;
}
.gnav-langsel-item{
  display:block;width:100%;text-align:left;
  padding:.55rem .7rem;border:0;border-radius:5px;background:none;
  font-family:'Space Grotesk',sans-serif;font-size:.85rem;font-weight:600;
  color:var(--navy);text-decoration:none;cursor:pointer;
}
.gnav-langsel-item:hover,.gnav-langsel-item:focus-visible{background:var(--gray1)}
/* Anneau de focus discret, cohérent avec la palette, à la place du
   contour bleu par défaut. outline-offset négatif : le popup est compact,
   un anneau qui déborderait serait rogné par son propre padding. */
.gnav-langsel-item:focus-visible{outline:2px solid var(--gold-dark);outline-offset:-2px}
/* Français, langue active : fond légèrement distinct du blanc du menu,
   texte marine, poids un cran au-dessus — jamais de gros indicateur. */
.gnav-langsel-item.is-active{background:var(--gray1);font-weight:700}
/* English tant que la version anglaise n'est pas réellement disponible :
   gris solide (--gray6, déjà utilisé ailleurs sur le site pour le texte
   secondaire) plutôt qu'une transparence sur le marine — une transparence
   sur fond blanc se lit trop pâle et donne l'impression d'un bug plutôt
   que d'un état volontairement secondaire (contraste ~5.7:1, AA). */
.gnav-langsel-item.is-disabled{color:var(--gray6);cursor:default}
.gnav-langsel-item.is-disabled:hover,.gnav-langsel-item.is-disabled:focus-visible{background:none}

.gnav-icon-btn{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(1,46,74,0.22);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy);transition:background 0.2s,border-color 0.2s,color 0.2s;flex-shrink:0}
.gnav-icon-btn:hover{background:rgba(201,164,92,0.08);border-color:var(--gold);color:var(--gold-dark)}
.gnav-icon-btn svg{width:18px;height:18px}

/* Mon espace : discret, jamais un gros bloc doré. Remplace l'ancien CTA
   commercial « Présenter une situation ». Largeur ~140-155px obtenue par
   min-width plutôt que par une valeur fixe, pour rester juste si la police
   du système change le rendu du texte. */
.gnav-myspace{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;min-width:148px;padding:0 1.25rem;
  border-radius:6px;
  border:1.5px solid rgba(1,46,74,0.22);
  background:transparent;
  color:var(--navy);
  font-family:'Space Grotesk',sans-serif;
  font-size:0.8rem;font-weight:600;letter-spacing:0.02em;
  text-decoration:none;white-space:nowrap;flex-shrink:0;
  transition:background 0.2s,border-color 0.2s,color 0.2s;
}
.gnav-myspace:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}

/* Menu utilisateur connecté : « [Prénom] ▾ », construit par assets/nav.js
   (initMonEspaceLink) une fois la session Supabase confirmée. Le bouton
   déclencheur reprend .gnav-myspace/.gm-myspace tel quel (dimensions,
   couleurs, survol, mode héros) : lui ajouter cette classe suffit à
   hériter de tout ça sans dupliquer une seule règle. */
.gnav-usermenu{position:relative}
.gnav-usermenu-name{display:inline-block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.gnav-usermenu-caret{width:8px;height:8px;margin-left:6px;flex-shrink:0;transition:transform .15s}
.gnav-usermenu-btn[aria-expanded="true"] .gnav-usermenu-caret{transform:rotate(180deg)}

.gnav-usermenu-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:190px;
  background:#fff;border:1px solid #e5e9ed;border-radius:8px;
  box-shadow:0 10px 28px rgba(1,46,74,.14);
  padding:.4rem;z-index:1050;
}
.gnav-usermenu-item{
  display:block;width:100%;text-align:left;
  padding:.6rem .75rem;border:0;border-radius:5px;background:none;
  font-family:'Space Grotesk',sans-serif;font-size:.85rem;font-weight:600;
  color:var(--navy);text-decoration:none;cursor:pointer;
}
.gnav-usermenu-item:hover,.gnav-usermenu-item:focus-visible{background:var(--gray1);color:var(--gold-dark)}
.gnav-usermenu-sep{height:1px;background:#eef1f4;margin:.35rem .3rem}
.gnav-usermenu-signout{color:#a02b2b}
.gnav-usermenu-signout:hover,.gnav-usermenu-signout:focus-visible{background:#fbeaea}

.gnav-mobile-btn{display:none;background:none;border:none;width:38px;height:38px;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.gnav-mobile-btn span{display:block;width:20px;height:2px;background:var(--navy);border-radius:0}

/* Mega menu (survol desktop, clic mobile) */
.gnav-mega{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:#fff;border-top:3px solid var(--gold);box-shadow:0 24px 60px rgba(0,0,0,0.14);z-index:999;max-height:calc(100vh - var(--nav-h));overflow-y:auto}
.gnav-mega.open{display:block}
.gnav-mega-inner{max-width:1180px;margin:0 auto;padding:2.25rem 1.5rem}
.gnav-mega-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0.25rem}
.gnav-mega-cols.cols-2{grid-template-columns:repeat(2,1fr);max-width:640px}
.gnav-mega-label{font-size:0.64rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--gray6);margin-bottom:1rem;grid-column:1/-1}
.gnav-mega-item{display:block;padding:0.85rem 1rem;border-radius:0;text-decoration:none;color:var(--navy);font-size:0.88rem;font-weight:600;transition:background 0.15s}
.gnav-mega-item:hover{background:var(--gray1);color:var(--gold)}
.gnav-mega-item small{display:block;font-weight:400;color:var(--gray6);font-size:0.76rem;margin-top:0.2rem;line-height:1.4}
.gnav-mega-overlay{display:none;position:fixed;inset:0;top:var(--nav-h);background:rgba(1,20,35,0.25);z-index:998}
.gnav-mega-overlay.open{display:block}
/* Industries, Expertises et Services sont uniquement des declencheurs de
   mega-menu (aucune page generale) : plus de variante lien+declencheur
   cote a cote, donc plus de .gnav-mega-all ni de .gnav-btn-caret. */

/* Mobile menu */
.gnav-mobile{display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:#fff;z-index:997;overflow-y:auto;padding:1rem 1.25rem 2rem}
.gnav-mobile.open{display:block}
.gm-item{border-bottom:1px solid #eef1f4}
.gm-item>a,.gm-item>button{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;text-align:left;padding:1rem 0.25rem;font-size:0.98rem;font-weight:600;color:var(--navy);text-decoration:none;cursor:pointer;font-family:'Space Grotesk',sans-serif}
.gm-item>button svg{width:11px;height:11px;transition:transform 0.2s}
.gm-item>button.open svg{transform:rotate(180deg)}
.gm-sub{display:none;padding:0 0.25rem 1rem 0.75rem}
.gm-sub.open{display:block}
.gm-sub a{display:block;padding:0.6rem 0;color:var(--gray6);text-decoration:none;font-size:0.88rem;border-bottom:1px dashed #f0f0f0}

/* Bas du panneau mobile : langue + Mon espace, a la place de l'ancien
   CTA commercial « Démarrer un mandat ». */
.gm-util{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid #eef1f4}
.gm-util .gnav-lang{font-size:0.86rem}
.gm-myspace{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap,44px);padding:0 1.25rem;
  border-radius:6px;border:1.5px solid rgba(1,46,74,0.22);
  background:transparent;color:var(--navy);
  font-family:'Space Grotesk',sans-serif;font-size:0.85rem;font-weight:600;
  text-decoration:none;white-space:nowrap;
  transition:background 0.2s,border-color 0.2s,color 0.2s;
}
.gm-myspace:hover,.gm-myspace:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--navy)}
@media(max-width:1080px){
  .gnav-primary,.gnav-icon-btn.search-desktop{display:none}
  /* Langue et Mon espace rejoignent le panneau mobile (.gm-util) : la
     recherche seule reste dans l'en-tete replié (voir responsive.css,
     qui la réaffiche juste en dessous). */
  .gnav-lang,.gnav-myspace{display:none}
  .gnav-mobile-btn{display:flex}
  .gnav-inner{padding:0 1.1rem}
}
/* Sélecteur de langue compact : noms complets sur grand écran, FR|EN au
   palier ordinateur standard, avant le passage au menu mobile. */
@media(max-width:1200px){
  .gnav-lang-full{display:none}
  .gnav-lang-short{display:inline}
}

/* ---------- BANDEAU A LA UNE (accueil) ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.feat-card{display:block;text-decoration:none;color:inherit}
.feat-card img{width:100%;height:150px;object-fit:cover;border-radius:0;display:block;margin-bottom:1rem;transition:transform 0.25s}
.feat-card:hover img{transform:scale(1.03)}
.feat-card h3{font-family:'Ibarra Real Nova',serif;font-size:1.02rem;color:var(--navy);line-height:1.35;margin-top:0.55rem;font-weight:700}
.feat-card:hover h3{color:var(--gold)}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}

/* ---------- 3 CARTES SERVICES (accueil) ---------- */
.svc3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.svc3-card{background:#fff;border:1px solid #e8ecf0;border-radius:0;padding:2.25rem 2rem;transition:box-shadow 0.25s,transform 0.2s;text-decoration:none;color:inherit;display:block}
.svc3-card:hover{box-shadow:0 20px 50px rgba(1,46,74,0.12);transform:translateY(-4px);border-color:transparent}
.svc3-num{font-family:'Ibarra Real Nova',serif;font-size:0.85rem;font-weight:900;color:var(--gold);margin-bottom:1.25rem}
.svc3-card h3{font-family:'Ibarra Real Nova',serif;font-size:1.25rem;color:var(--navy);margin-bottom:0.75rem}
.svc3-card p{color:var(--gray6);font-size:0.9rem;line-height:1.7;margin-bottom:1.25rem}
.svc3-link{font-size:0.8rem;font-weight:700;color:var(--navy)}
.svc3-card:hover .svc3-link{color:var(--gold)}
@media(max-width:900px){.svc3-grid{grid-template-columns:1fr}}

/* ---------- BANDEAU CHIFFRES ---------- */
.stat-band{background:var(--navy);padding:3.5rem 0}
.stat-band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.stat-band strong{display:block;font-family:'Ibarra Real Nova',serif;font-size:2.5rem;font-weight:900;color:var(--gold);line-height:1}
.stat-band span{display:block;font-size:0.78rem;color:rgba(255,255,255,0.65);margin-top:0.6rem;letter-spacing:0.03em}
@media(max-width:800px){.stat-band-grid{grid-template-columns:1fr 1fr;gap:2rem}}

/* ---------- INFOLETTRE ---------- */
.nl-band{background:var(--gray1);padding:4rem 0}
.nl-inner{max-width:640px;margin:0 auto;text-align:center}
.nl-form{display:flex;gap:0.75rem;margin-top:1.5rem;flex-wrap:wrap;justify-content:center}
.nl-form input{flex:1;min-width:220px;padding:12px 16px;border:1px solid #dde2e8;border-radius:0;font-family:'Space Grotesk',sans-serif;font-size:0.9rem}

/* ---------- MISSION 3 CARTES VALEURS ---------- */
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.val-card{text-align:center;padding:0 1rem}
.val-icon{width:56px;height:56px;border-radius:50%;background:rgba(249,160,28,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem}
.val-icon svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:1.7}
.val-card h3{font-family:'Ibarra Real Nova',serif;font-size:1.1rem;color:var(--navy);margin-bottom:0.65rem}
.val-card p{color:var(--gray6);font-size:0.88rem;line-height:1.7}
@media(max-width:800px){.val-grid{grid-template-columns:1fr}}

/* ---------- PAGE HERO (industrie / expertise / service / interne) ---------- */
.page-hero{background:var(--navy);padding:calc(68px + 3.5rem) 1.5rem 3.5rem;color:#fff;position:relative;overflow:hidden}
.page-hero-inner{max-width:1180px;margin:0 auto;position:relative;z-index:1}
.page-hero .tag-cat{color:var(--gold)}
.page-hero h1{font-family:'Ibarra Real Nova',serif;font-size:clamp(1.9rem,3.6vw,2.75rem);font-weight:800;margin:0.75rem 0 1rem;line-height:1.2;max-width:820px}
.page-hero p{color:rgba(255,255,255,0.72);font-size:1.02rem;line-height:1.7;max-width:660px}
.page-hero .breadcrumb{font-size:0.76rem;color:rgba(255,255,255,0.45);margin-bottom:1rem}
.page-hero .breadcrumb a{color:rgba(255,255,255,0.6);text-decoration:none}
.page-hero .breadcrumb a:hover{color:var(--gold)}

/* ---------- CONSTATS TERRAIN (3 colonnes) ---------- */
.constat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.constat-card{background:var(--gray1);border-radius:0;padding:1.75rem;border-left:3px solid var(--gold)}
.constat-num{font-family:'Ibarra Real Nova',serif;font-size:1.6rem;font-weight:900;color:var(--navy);opacity:0.25;margin-bottom:0.6rem}
.constat-card p{color:var(--gray8);font-size:0.92rem;line-height:1.7}
@media(max-width:900px){.constat-grid{grid-template-columns:1fr}}

/* ---------- RENVOI 4 SERVICES (reformules) ---------- */
.art-photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:900px}
.art-photo-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #e8ecf0;transition:box-shadow 0.2s,transform 0.2s}
.art-photo-card:hover{box-shadow:0 16px 40px rgba(1,46,74,0.1);transform:translateY(-3px)}
.art-photo-card img{width:100%;height:220px;object-fit:cover;display:block}
.art-photo-card-body{padding:1.5rem}
.art-photo-card h3{font-family:'Ibarra Real Nova',serif;font-size:1.15rem;color:var(--navy);margin:0.6rem 0 0.6rem;line-height:1.3}
.art-photo-card p{color:var(--gray6);font-size:0.88rem;line-height:1.65}
.art-photo-card .art-read{display:inline-block;margin-top:0.6rem;font-size:0.85rem;font-weight:700;color:var(--navy);border-bottom:1.5px solid var(--gold)}
@media(max-width:700px){.art-photo-grid{grid-template-columns:1fr}}
.svc4-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.svc4-card{background:#fff;border:1px solid #e8ecf0;border-radius:0;padding:1.5rem;text-decoration:none;color:inherit;transition:border-color 0.2s,box-shadow 0.2s}
.svc4-card:hover{border-color:var(--gold);box-shadow:0 12px 30px rgba(1,46,74,0.08)}
.svc4-card h3{font-family:'Ibarra Real Nova',serif;font-size:1rem;color:var(--navy);margin:0.6rem 0 0.5rem;line-height:1.3}
.svc4-card p{color:var(--gray6);font-size:0.82rem;line-height:1.6}
@media(max-width:900px){.svc4-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc4-grid{grid-template-columns:1fr}}

/* ---------- CTA bandeau ---------- */
.cta-band{background:var(--navy);border-radius:0;padding:3rem;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#0c2c3a,#C9A45C,#0e3446,var(--gold),#EAD9B6,#0b2733)}
.cta-band h2{color:#fff;position:relative}
.cta-band p{color:rgba(255,255,255,0.7);max-width:520px;margin:0 auto 1.75rem;line-height:1.7;position:relative}
.cta-band .btn-gold,.cta-band .tag-cat{position:relative}

/* ---------- HUB RESSOURCES ---------- */
.res-filters{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.85rem}
.res-filter-group{margin-bottom:1.25rem}
.res-filter-label{font-size:0.66rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--gray6);margin-bottom:0.6rem;display:block}
.res-chip{background:#fff;border:1.5px solid #e0e4ea;color:var(--navy);font-size:0.76rem;font-weight:600;padding:7px 14px;border-radius:40px;cursor:pointer;transition:all 0.15s;font-family:'Space Grotesk',sans-serif}
.res-chip:hover{border-color:var(--gold)}
.res-chip.active{background:var(--navy);border-color:var(--navy);color:#fff}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.res-card{background:#fff;border:1px solid #e8ecf0;border-radius:0;padding:1.6rem;transition:box-shadow 0.2s,transform 0.2s}
.res-card.has-img{padding:0}
.res-card.has-img .res-card-tags,.res-card.has-img .tag-cat,.res-card.has-img h3,.res-card.has-img p,.res-card.has-img .res-link{margin-left:1.6rem;margin-right:1.6rem}
.res-card.has-img .res-link{display:inline-block;margin-bottom:1.6rem}
.res-card-img{width:100%;height:170px;object-fit:cover;display:block;margin-bottom:1.25rem}
.res-card:hover{box-shadow:0 16px 40px rgba(1,46,74,0.1);transform:translateY(-3px)}
.res-card-tags{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:0.85rem}
.res-pill{font-size:0.62rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:3px 9px;border-radius:20px}
.res-pill.ind{background:rgba(1,70,109,0.08);color:var(--navy)}
.res-pill.exp{background:rgba(249,160,28,0.12);color:var(--gold)}
.res-card h3{font-family:'Ibarra Real Nova',serif;font-size:1.02rem;color:var(--navy);margin-bottom:0.5rem;line-height:1.35}
.res-card p{color:var(--gray6);font-size:0.84rem;line-height:1.6;margin-bottom:0.9rem}
.res-card a.res-link{font-size:0.78rem;font-weight:700;color:var(--navy);text-decoration:none}
.res-card a.res-link:hover{color:var(--gold)}
.res-empty{text-align:center;padding:3rem 1rem;color:var(--gray6);font-size:0.9rem}
.res-mini{margin-top:1rem}
@media(max-width:900px){.res-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.res-grid{grid-template-columns:1fr}}

/* ---------- CALENDRIER INTERACTIF ---------- */
.cal2-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.cal2-card{background:#fff;border:1px solid #e8ecf0;border-radius:0;padding:1.5rem 1.6rem;display:flex;gap:1.25rem;align-items:flex-start;transition:box-shadow 0.2s}
.cal2-card:hover{box-shadow:0 16px 40px rgba(1,46,74,0.1)}
.cal2-card.full{opacity:0.6}
.cal2-date{flex-shrink:0;width:64px;text-align:center;background:var(--gray1);border-radius:0;padding:0.6rem 0.3rem}
.cal2-date .m{font-size:0.6rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold)}
.cal2-date .d{font-family:'Ibarra Real Nova',serif;font-size:1.5rem;font-weight:900;color:var(--navy);line-height:1.1}
.cal2-body h3{font-family:'Ibarra Real Nova',serif;font-size:1.02rem;color:var(--navy);margin-bottom:0.35rem}
.cal2-meta{font-size:0.78rem;color:var(--gray6);margin-bottom:0.6rem;line-height:1.6}
.cal2-seats{display:inline-flex;align-items:center;gap:5px;font-size:0.74rem;font-weight:700;padding:4px 10px;border-radius:20px;margin-bottom:0.75rem}
.cal2-seats.ok{background:rgba(0,150,81,0.1);color:var(--green)}
.cal2-seats.low{background:rgba(249,160,28,0.14);color:#c07800}
.cal2-seats.full{background:rgba(200,50,50,0.1);color:#c83232}
.cal2-btn{display:inline-block;font-size:0.78rem;font-weight:700;color:var(--navy);text-decoration:none;border:1.5px solid var(--navy);padding:7px 15px;border-radius:0}
.cal2-btn:hover{background:var(--navy);color:#fff}
@media(max-width:700px){.cal2-grid{grid-template-columns:1fr}}

/* ---------- QUIZ INTEGRAMETRE EXPRESS ---------- */
.quiz-box{background:#fff;border:1px solid #e8ecf0;border-radius:0;padding:2.5rem;box-shadow:0 20px 60px rgba(1,46,74,0.08)}
.quiz-progress{height:5px;background:var(--gray1);border-radius:0;overflow:hidden;margin-bottom:2rem}
.quiz-progress-bar{height:100%;background:var(--gold);border-radius:0;transition:width 0.3s;width:10%}
.quiz-step-label{font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--gray6);margin-bottom:0.6rem}
.quiz-question{font-family:'Ibarra Real Nova',serif;font-size:1.3rem;color:var(--navy);margin-bottom:1.75rem;line-height:1.4}
.quiz-opts{display:flex;flex-direction:column;gap:0.7rem}
.quiz-opt{display:flex;align-items:center;gap:0.9rem;padding:0.95rem 1.1rem;border:1.5px solid #e0e4ea;border-radius:0;cursor:pointer;background:#fff;font-family:'Space Grotesk',sans-serif;font-size:0.92rem;color:var(--gray8);text-align:left;transition:border-color 0.15s,background 0.15s}
.quiz-opt:hover{border-color:var(--gold);background:#fffaf0}
.quiz-opt .qn{width:24px;height:24px;border-radius:50%;border:1.5px solid #dde2e8;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;color:var(--gray6)}
.quiz-nav{display:flex;justify-content:space-between;margin-top:2rem}
.quiz-back{background:none;border:none;color:var(--gray6);font-size:0.82rem;font-weight:600;cursor:pointer;font-family:'Space Grotesk',sans-serif}
.quiz-back:hover{color:var(--navy)}
.quiz-result{text-align:center}
.quiz-score-ring{width:150px;height:150px;margin:0 auto 1.5rem;position:relative;display:flex;align-items:center;justify-content:center}
.quiz-score-ring strong{font-family:'Ibarra Real Nova',serif;font-size:2.5rem;color:var(--navy);position:relative;z-index:1}
.quiz-score-label{font-size:0.72rem;color:var(--gray6);text-transform:uppercase;letter-spacing:0.08em;margin-top:-1.4rem;position:relative;z-index:1}
.quiz-verdict{font-family:'Ibarra Real Nova',serif;font-size:1.2rem;color:var(--navy);margin:1.25rem 0 0.75rem}
.quiz-verdict-sub{color:var(--gray6);font-size:0.9rem;line-height:1.7;max-width:460px;margin:0 auto 1.75rem}
.quiz-email-form{max-width:400px;margin:0 auto;display:flex;gap:0.6rem;flex-wrap:wrap;justify-content:center}
.quiz-email-form input{flex:1;min-width:200px;padding:11px 15px;border:1px solid #dde2e8;border-radius:0;font-family:'Space Grotesk',sans-serif}
@media(max-width:600px){.quiz-box{padding:1.75rem 1.4rem}}

/* ---------- FOOTER GLOBAL ----------
   Déplacé vers assets/footer.css (namespace .mfoot), chargé en dernier.
   Voir ce fichier pour le pied de page actuel. */

/* ---------- Bandeau preuve regionale ---------- */
.proof-band{background:#fff;border:1px solid #e8ecf0;border-radius:0;padding:2rem 2.25rem}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.proof-item{border-left:2px solid var(--gold);padding-left:1rem}
.proof-item strong{display:block;font-family:'Ibarra Real Nova',serif;font-size:1.5rem;color:var(--navy)}
.proof-item span{font-size:0.76rem;color:var(--gray6)}
@media(max-width:800px){.proof-grid{grid-template-columns:1fr 1fr}}

/* ---------- Bouton rendez-vous flottant ---------- */
.book-float{position:fixed;bottom:1.5rem;right:1.5rem;z-index:900;display:flex;align-items:center;gap:8px;background:var(--gold);color:var(--navy);font-weight:700;font-size:0.82rem;padding:12px 18px;border-radius:50px;text-decoration:none;box-shadow:0 8px 26px rgba(249,160,28,0.4)}
.book-float:hover{background:#A9803F}
@media(max-width:600px){.book-float span{display:none}.book-float{padding:14px;border-radius:50%}}

/* ---------- 404 ---------- */
.err-page{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8rem 1.5rem 4rem}
.err-page .num{font-family:'Ibarra Real Nova',serif;font-size:6rem;font-weight:900;color:var(--gold);line-height:1}
.err-page h1{font-family:'Ibarra Real Nova',serif;font-size:1.6rem;color:var(--navy);margin:1rem 0}
.err-page p{color:var(--gray6);max-width:440px;margin-bottom:2rem}

/* ---------- Globe du recrutement international ---------- */
.globe-section{background:var(--navy-deep);padding:5rem 0;position:relative;overflow:hidden}
.globe-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.globe-canvas-wrap{display:flex;justify-content:center;position:relative}
.globe-canvas-wrap canvas{max-width:100%;height:auto}
.globe-text .tag-cat{color:var(--gold)}
.globe-text h2{font-family:'Ibarra Real Nova',serif;font-size:1.7rem;color:#fff;margin:0.75rem 0 1.1rem;line-height:1.3}
.globe-text p{color:rgba(255,255,255,0.68);font-size:0.95rem;line-height:1.75;margin-bottom:1.5rem}
.globe-legend{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.25rem}
.globe-legend-item{display:flex;align-items:center;gap:8px;font-size:0.8rem;color:rgba(255,255,255,0.6)}
.globe-legend-dot{width:9px;height:9px;border-radius:50%}
@media(max-width:900px){.globe-grid{grid-template-columns:1fr}.globe-canvas-wrap{order:-1}}
.globe-mini-wrap{position:relative;display:flex;justify-content:center;align-items:center}
.globe-mini-wrap canvas{max-width:100%;height:auto;opacity:0.92}

/* ---------- ARTICLES D'EXPERTISE (pages industrie) ---------- */
.art-list{display:flex;flex-direction:column;max-width:800px}
.art-item{padding:2.75rem 0;border-top:1px solid #e8ecf0}
.art-item:first-child{border-top:none;padding-top:0}
.art-eyebrow{font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:0.75rem;display:block}
.art-item h3{font-family:'Ibarra Real Nova',serif;font-size:1.5rem;color:var(--navy);line-height:1.32;margin-bottom:0.9rem;font-weight:700}
.art-chapo{font-family:'Ibarra Real Nova',serif;font-style:italic;font-size:1.06rem;color:#333;line-height:1.6;margin-bottom:1.1rem}
.art-p{color:var(--gray6);font-size:0.95rem;line-height:1.85;margin-bottom:1rem}
.art-p:last-child{margin-bottom:0}
@media(max-width:700px){.art-item{padding:2rem 0}.art-item h3{font-size:1.25rem}}


/* =========================================================================
   MÉGA MENUS : ARCHITECTURE COMMUNE
   -------------------------------------------------------------------------
   Un seul squelette pour Industries, Services et Expertises. Même grille,
   même hauteur, même marine, même typographie, même état actif, mêmes
   durées, même position : NAVIGATION À GAUCHE, VISUEL À DROITE.

   Seule la couche visuelle change, et c'est la signature de chaque section :
     Industries  .gnav-pane--media    photographie, boucle vidéo possible
     Services    .gnav-pane--mosaic   la mosaïque propre au service
     Expertises  .gnav-pane--scene    un schéma conceptuel animé en SVG

   LE BLEU
   --pane-navy vaut #031827, soit rgb(3,24,39) : la valeur posée sur .gnav
   par body.hm-hero-mode. Aucun bleu inventé, les trois panneaux partagent
   exactement le même fond.

   LA JONCTION AVEC LE VISUEL
   Un masque en pixels sur .gnav-pane-visual, identique pour les trois : le
   fondu mesure 300 px quelle que soit la largeur d'écran, ce qu'un
   pourcentage ne garantirait pas. La scène déborde de 140 px SOUS la
   navigation, si bien que le fondu commence bien avant la colonne visuelle
   sans lui voler un pixel. Le masque vaut pour une <img>, une <video> et un
   <svg> : les trois signatures s'intègrent de la même façon.
   ========================================================================= */
.gnav-pane{
  --pane-navy:#031827;
  --pane-ink:#D8E2EA;        /* nom, 12,2:1 */
  --pane-slate:#8FA6B6;      /* sous-texte, 6,6:1 */
  --pane-slate-dim:#CFDCE6;  /* catégorie, 12,0:1 */
  --pane-h:clamp(357px,25vw,384px);
  --pane-fade:300px;
  --pane-bleed:140px;
  background:var(--pane-navy);
  color:var(--pane-ink);
  /* Filet de lumière en haut, ombre portée en bas : le panneau se détache
     de la page sans qu'aucune bordure n'apparaisse. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),
             0 1px 0 rgba(2,16,27,.55),
             0 16px 38px rgba(1,13,22,.34);
  max-height:calc(100dvh - var(--nav-h));
  overflow:hidden;
}
@media(max-height:720px){ .gnav-pane{--pane-h:322px} }

.gnav-pane-in{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,41vw);
  align-items:center;
  min-height:var(--pane-h);
  /* Le nom tombe sur l'axe du logo : mêmes jetons que .gnav-inner. Le
     retrait de .75rem est le décalage du filet d'or, qui déborde dans la
     marge : c'est le mot qui s'aligne, pas le trait. */
  padding-left:calc(
    max(var(--page-padding),(100% - var(--container-wide))/2 + var(--page-padding))
    - .75rem);
}

/* ---------- La navigation ---------------------------------------------- */
.gnav-pane-nav{
  display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  align-items:start;
  padding:clamp(14px,1.2vw,20px) clamp(24px,2.4vw,44px) clamp(14px,1.2vw,20px) 0;
  /* La scène déborde sous cette colonne : le texte passe devant. */
  position:relative;z-index:2;
}
/* Services et Expertises n'ont qu'une catégorie : son groupe occupe les
   deux colonnes et c'est sa liste qui se dédouble. Industries en a deux :
   un groupe par colonne. Un seul squelette, deux remplissages. */
.gnav-pane-group--wide{grid-column:1 / -1}
.gnav-pane-group--wide .gnav-pane-list{
  display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  column-gap:clamp(18px,2vw,40px);
}
.gnav-pane-family{
  margin:0 0 .65rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:.75rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--pane-slate-dim);
}
.gnav-pane-list{list-style:none;margin:0;padding:0}

/* Trois signaux d'état actif : le nom passe à l'or, un filet d'or de 2 px
   se déploie à gauche, le sous-texte s'éclaircit. Aucun fond, aucune carte,
   identiques dans les trois menus. */
.gnav-pane-item{
  display:block;position:relative;
  padding:.9rem 0 .9rem .75rem;
  color:inherit;text-decoration:none;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.gnav-pane-item::before{
  content:"";position:absolute;left:0;top:.9rem;bottom:.9rem;width:2px;
  background:var(--gold);transform:scaleY(0);
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.gnav-pane-item.is-active{transform:translateX(3px)}
.gnav-pane-item.is-active::before{transform:scaleY(1)}
.gnav-pane-item:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.gnav-pane-name{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.1rem;font-weight:600;line-height:1.22;letter-spacing:-.004em;
  color:var(--pane-ink);text-wrap:balance;
  transition:color .26s;
}
.gnav-pane-item.is-active .gnav-pane-name{color:var(--gold)}
.gnav-pane-note{
  display:block;margin-top:.26rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:.83rem;font-weight:400;line-height:1.4;
  color:var(--pane-slate);
  transition:color .26s;
}
.gnav-pane-item.is-active .gnav-pane-note{color:#B3C6D2}
/* Les deux seuls libellés qui passent à deux lignes réclament plus de
   largeur qu'aucune répartition raisonnable ne peut offrir. Micro réduction
   pour eux seuls, afin qu'ils ne pèsent pas plus que les autres. */
.gnav-pane-item--long .gnav-pane-name{font-size:1.03rem;letter-spacing:-.008em}

/* ---------- La zone visuelle, commune aux trois signatures -------------- */
.gnav-pane-visual{
  position:relative;overflow:hidden;align-self:stretch;min-height:var(--pane-h);
  margin-left:calc(var(--pane-bleed) * -1);z-index:1;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0px,rgba(0,0,0,.04) calc(var(--pane-fade)*.28),
    rgba(0,0,0,.16) calc(var(--pane-fade)*.52),
    rgba(0,0,0,.42) calc(var(--pane-fade)*.73),
    rgba(0,0,0,.78) calc(var(--pane-fade)*.89),#000 var(--pane-fade));
          mask-image:linear-gradient(90deg,
    transparent 0px,rgba(0,0,0,.04) calc(var(--pane-fade)*.28),
    rgba(0,0,0,.16) calc(var(--pane-fade)*.52),
    rgba(0,0,0,.42) calc(var(--pane-fade)*.73),
    rgba(0,0,0,.78) calc(var(--pane-fade)*.89),#000 var(--pane-fade));
}
/* Chaque couche est un calque empilé : une seule visible à la fois. */
.gnav-pane-layer{
  position:absolute;inset:0;
  opacity:0;transform:scale(1.012);
  transition:opacity .32s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1);
}
.gnav-pane-layer.is-active{opacity:1;transform:scale(1)}
.gnav-pane-layer > img,
.gnav-pane-layer > video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--pane-pos,center);display:block;
}
.gnav-pane-layer > video{z-index:1}
/* Adoucissement haut et bas, dans le marine du panneau. Il n'a de sens que
   sur une image : sur un schema, il assombrirait les bords sans raison. */
.gnav-pane--scene .gnav-pane-visual::after{content:none}
.gnav-pane-visual::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(3,24,39,.30) 0px,rgba(3,24,39,0) 22px,
    rgba(3,24,39,0) calc(100% - 26px),rgba(3,24,39,.55) 100%);
}

/* ---------- Signature 1 : Industries, la photographie ------------------- */
/* Sans boucle disponible, la photographie dérive de 2 % sur 24 s. Assez
   lente pour ne pas se voir bouger, assez présente pour que la scène ne
   soit pas morte. Posée par le JS sur le seul calque actif. */
@keyframes gnav-pane-derive{
  from{transform:scale(1) translate3d(0,0,0)}
  to  {transform:scale(1.02) translate3d(-.4%,0,0)}
}
.gnav-pane--media .gnav-pane-layer.is-still.is-active > img{
  animation:gnav-pane-derive 24s ease-in-out infinite alternate;
}

/* ---------- Signature 2 : Services, la mosaïque ------------------------- */
/* Double présence : le calque de droite porte la mosaïque nette, et la même
   mosaïque revient sur tout le fond du panneau à 13 %, sous un voile marine
   qui s'épaissit vers la gauche. Elle enrichit le marine, elle ne devient
   jamais un papier peint. */
.gnav-pane-amb{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.gnav-pane-amb .gnav-pane-layer{transform:none}
.gnav-pane-amb .gnav-pane-layer.is-active{transform:none}
.gnav-pane-amb img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;opacity:.13;
}
.gnav-pane-amb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(3,24,39,1) 0%,rgba(3,24,39,.98) 46%,
    rgba(3,24,39,.86) 72%,rgba(3,24,39,.72) 100%);
}
/* ---- Le fondu de Services : une seule logique ---------------------------
   L'ancien reglage produisait une masse sombre au centre : la mosaique
   n'occupait que 51 % de la largeur et son masque, exprime en pixels, la
   rendait quasi nulle sur 300 px. On ne voyait pas un fondu, on voyait
   l'absence d'image puis son arrivee.

   Ce qui change :
     1. l'element media passe de 51 % a 62 % de la largeur du panneau, il
        commence donc bien plus a gauche ;
     2. le masque est exprime en POURCENTAGES de cet element, avec une rampe
        longue qui monte doucement puis franchement une fois passe le texte ;
     3. plus aucun voile horizontal n'est pose PAR-DESSUS l'image : le
        marine du panneau, revele par le masque, assure seul la continuite.
   Au dela de 46 % de l'element, la mosaique est a 100 % : ni voile, ni
   filtre, ni opacite reduite. --------------------------------------------- */
.gnav-pane--mosaic{--pane-bleed:300px}
.gnav-pane--mosaic .gnav-pane-visual{
  /* Repli si la mosaique ne charge pas : jamais un trou. */
  background:radial-gradient(120% 100% at 78% 42%,#0A2C42 0%,var(--pane-navy) 70%);
  -webkit-mask-image:linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,.04) 10%,
    rgba(0,0,0,.11) 17%,
    rgba(0,0,0,.24) 25%,
    rgba(0,0,0,.42) 32%,
    rgba(0,0,0,.64) 38%,
    rgba(0,0,0,.85) 42%,
    #000 46%,
    #000 100%);
          mask-image:linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,.04) 10%,
    rgba(0,0,0,.11) 17%,
    rgba(0,0,0,.24) 25%,
    rgba(0,0,0,.42) 32%,
    rgba(0,0,0,.64) 38%,
    rgba(0,0,0,.85) 42%,
    #000 46%,
    #000 100%);
}
/* Adoucissement haut et bas seulement, pour que la matiere ne soit pas
   coupee net par les bords du panneau. Rien au centre, rien a droite. */
.gnav-pane--mosaic .gnav-pane-visual::after{
  background:linear-gradient(180deg,
    rgba(3,24,39,.94) 0px,
    rgba(3,24,39,.52) 38px,
    rgba(3,24,39,0)   84px,
    rgba(3,24,39,0)   calc(100% - 104px),
    rgba(3,24,39,.46) calc(100% - 46px),
    rgba(3,24,39,.97) 100%);
}
/* Protection locale du texte, la ou le media passe desormais dessous : un
   marine plein sur la colonne, qui s'efface avant la zone claire. Elle
   remplace le voile general, elle ne s'y ajoute pas. */
.gnav-pane--mosaic .gnav-pane-nav{
  background:linear-gradient(to right,
    var(--pane-navy) 0%,var(--pane-navy) 58%,
    rgba(3,24,39,.88) 80%,rgba(3,24,39,0) 100%);
}

/* ---------- Signature 3 : Expertises, le schéma animé ------------------- */
/* Aucune image : cinq schémas SVG, chacun réduit au geste fondamental du
   mécanisme de sa page. Le cycle tourne entre 3 et 4 s, uniquement quand le
   calque est actif ET le panneau ouvert : .gnav-pane-scene ne s'anime que
   sous .is-active, et le JS retire la classe à la fermeture. */
.gnav-pane--scene .gnav-pane-visual{
  /* AUCUN fond propre : le marine du panneau passe tel quel derriere les
     schemas. Un degrade radial y posait une zone plus claire que le reste
     du menu, et la limite de cette zone se voyait. */
  background:none;
  /* NI masque NI debordement pour les schemas. Le fondu lateral existe pour
     fondre le BORD d'une photographie dans le marine ; applique a un dessin
     au trait, il en effaçait 44 % : la moitie gauche de chaque geste
     disparaissait, et la ligne d'Accueil semblait coupee. Un schema en
     lignes sur le meme marine n'a aucun bord a cacher. */
  margin-left:0;
  -webkit-mask-image:none;
          mask-image:none;
}
.gnav-pane-scene{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(22px,2.6vw,44px) clamp(20px,2.6vw,48px);
}
.gnav-pane-scene svg{width:100%;height:auto;max-height:100%;overflow:visible}
.gnav-pane-scene .sc-line{fill:none;stroke:rgba(216,226,234,.30);stroke-width:1.5}
.gnav-pane-scene .sc-trace{fill:none;stroke:var(--gold);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.gnav-pane-scene .sc-node{fill:none;stroke:rgba(216,226,234,.55);stroke-width:1.6}
.gnav-pane-scene .sc-node--on{fill:var(--gold);stroke:var(--gold)}
.gnav-pane-scene .sc-ghost{fill:none;stroke:rgba(216,226,234,.16);stroke-width:1.5}

/* ---------- Paliers étroits -------------------------------------------- */
@media(max-width:1240px){
  .gnav-pane{--pane-h:clamp(357px,29vw,376px);--pane-fade:252px;--pane-bleed:112px}
  .gnav-pane-in{grid-template-columns:minmax(0,1fr) minmax(0,40vw)}
  .gnav-pane-name{font-size:1.04rem}
  .gnav-pane-item{padding-top:.78rem;padding-bottom:.78rem}
  .gnav-pane-item::before{top:.78rem;bottom:.78rem}
}
/* Entre 1081 et 1160px, la zone visuelle rend encore de la largeur : c'est
   le seul moyen de garder les sous-textes sur une ligne. */
@media(max-width:1160px){
  .gnav-pane-in{grid-template-columns:minmax(0,1fr) minmax(0,38vw)}
  .gnav-pane{--pane-fade:212px;--pane-bleed:92px}
}
/* Sous 1080px la barre principale cède la place à l'accordéon mobile : ces
   panneaux ne sont plus atteignables. Garde-fou si la fenêtre est réduite
   alors que l'un d'eux est ouvert. */
@media(max-width:1080px){
  .gnav-pane-in{grid-template-columns:minmax(0,1fr);padding-left:1.25rem}
  .gnav-pane-visual,.gnav-pane-amb{display:none}
  .gnav-pane-nav{grid-template-columns:minmax(0,1fr)}
  .gnav-pane-group--wide .gnav-pane-list{grid-template-columns:minmax(0,1fr)}
  .gnav-pane{--pane-h:auto;overflow-y:auto}
}

@media(prefers-reduced-motion:reduce){
  .gnav-pane-layer,.gnav-pane-item,.gnav-pane-item::before,
  .gnav-pane-name,.gnav-pane-note{transition-duration:.01ms}
  .gnav-pane-layer,.gnav-pane-layer.is-active{transform:none}
  .gnav-pane-item.is-active{transform:none}
  .gnav-pane--media .gnav-pane-layer.is-still.is-active > img{animation:none}
  /* Expertises : le schéma reste, figé sur son état final. */
  .gnav-pane-scene *{animation:none !important}
}

/* -------------------------------------------------------------------------
   EXPERTISES : LES CINQ SCHÉMAS
   Chacun reprend le mécanisme de sa page, avec le MÊME vocabulaire
   graphique que celui des heros (assets/leadership-pratiques-gestion.css et
   voisins) :

     .sc-frame    l'ossature qui ne change pas   or 1,4 à 62 %
     .sc-station  les repères de position        blanc 11 %
     .sc-hair     les liens fins                 blanc 28 %
     .sc-trace    le mouvement                   or 2
     .sc-dot      un moment acquis               or plein
     .sc-open     un moment pas encore porté     contour seul
     .sc-ghost    les échos de répétition        blanc 14 %

   Chaque schéma est une chorégraphie par étapes, pas un simple trait qui se
   dessine : les éléments entrent quand la trace les atteint, et la scène
   tient son état final avant de reprendre. Cycle de 4 à 4,6 s.

   Les animations ne tournent que sous .is-active : un calque inactif, ou un
   panneau fermé (le JS retire la classe), ne consomme rien.
   ------------------------------------------------------------------------- */
/* La classe est doublee a dessein : chaque schema pose son animation par la
   propriete raccourcie `animation`, qui remet animation-play-state a
   running. Sans ce surcroit de specificite, les schemas continuaient de
   tourner derriere un panneau ferme. */
.gnav-pane-scene .sc-anim.sc-anim{animation-play-state:paused}
.gnav-pane-layer.is-active .gnav-pane-scene .sc-anim.sc-anim{animation-play-state:running}

.gnav-pane-scene .sc-frame{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:.62}
.gnav-pane-scene .sc-station{fill:none;stroke:rgba(255,255,255,.11);stroke-width:1}
.gnav-pane-scene .sc-hair{fill:none;stroke:rgba(255,255,255,.38);stroke-width:1.1}
.gnav-pane-scene .sc-trace{fill:none;stroke:var(--gold);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.gnav-pane-scene .sc-ghost{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.gnav-pane-scene .sc-dot{fill:var(--gold)}
.gnav-pane-scene .sc-open{fill:none;stroke:var(--gold);stroke-width:1.6}
.gnav-pane-scene .sc-tess{fill:rgba(255,255,255,.22)}
/* Les bornes de Leadership : plus presentes que les stations, elles
   disent ce que le point peut decider. */
.gnav-pane-scene .sc-borne{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1.3}

/* Deux gestes réutilisés par les cinq schémas. */
@keyframes sc-draw{from{stroke-dashoffset:var(--l)}to{stroke-dashoffset:0}}
@keyframes sc-in{from{opacity:0}to{opacity:1}}
.sc-anim[class*="sc-d-"]{stroke-dasharray:var(--l);stroke-dashoffset:var(--l)}

/* =========================================================================
   1. CULTURE ORGANISATIONNELLE
   Cinq plaques superposees, memes coordonnees qu'a la validation : la
   composition ne bouge pas, seule la matiere change.

   LA PROFONDEUR ne vient d'aucune perspective. Elle vient de trois choses,
   et de trois seulement :
     l'ombre     graduee sur trois niveaux. Les plans du fond portent une
                 ombre large et diffuse (13 de flou, dy 11), ceux du dessus
                 une ombre courte et plus dense (6 de flou, dy 5). C'est cet
                 ecart qui fait remonter les couches.
     le remplissage  chaque plaque a le sien, de 6 a 23 %, jamais deux fois
                 le meme : on sent des epaisseurs de verre, pas un aplat.
     l'arete     un liseré clair propre a chaque plaque, de 22 a 46 %.

   LA ZONE COMMUNE est l'intersection exacte des QUATRE plaques qui se
   recouvrent, x 196..224 et y 96..114, calculee depuis leurs coordonnees.
   La plaque du haut a droite y mord desormais : une exigence de plus, donc
   une zone plus petite, 28x18 au lieu de 46x30.

   Elle prend la COULEUR de l'or, elle ne s'allume pas : c'est une plaque de
   plus dans la pile, doree, avec la meme arete et la meme ombre que les
   autres. Aucun halo, aucun flou, aucune lueur.
   ========================================================================= */
.gnav-pane-scene .sc-cult-l{stroke-width:1}
/* Du fond vers le dessus : l'ombre se resserre et se fonce, le remplissage
   s'affirme. Aucune plaque n'a le meme traitement qu'une autre. */
.gnav-pane-scene .sc-cult-e{filter:url(#cultOmb1);fill:rgba(150,176,196,.07);stroke:rgba(216,226,234,.22)}
.gnav-pane-scene .sc-cult-a{filter:url(#cultOmb1);fill:rgba(126,157,180,.16);stroke:rgba(216,226,234,.30)}
.gnav-pane-scene .sc-cult-b{filter:url(#cultOmb2);fill:rgba(168,192,210,.11);stroke:rgba(216,226,234,.26)}
.gnav-pane-scene .sc-cult-c{filter:url(#cultOmb3);fill:rgba(93,130,160,.23);stroke:rgba(216,226,234,.38)}
.gnav-pane-scene .sc-cult-d{filter:url(#cultOmb3);fill:rgba(186,205,219,.11);stroke:rgba(216,226,234,.46)}
/* La lueur : chaude, diffuse, sans bord franc. */
/* La zone commune prend la COULEUR de l'or : c'est une plaque de plus dans
   la pile, doree, avec la meme arete que les autres. Aucun halo, aucun
   flou, aucune lueur : elle ne s'allume pas, elle devient doree. */
.gnav-pane-scene .sc-cult-zone{
  fill:rgba(201,164,92,.52);stroke:rgba(201,164,92,.78);stroke-width:1;
  filter:url(#cultOmb3);
}

/* Le rapprochement. Chaque plaque porte son decalage : les cinq n'arrivent
   pas comme un seul bloc. */
@keyframes sc-cult-approche{
  0%,6%   {transform:translate(var(--tx),var(--ty));opacity:.3}
  56%,100%{transform:translate(0,0);opacity:1}
}
.sc-cult-l{animation:sc-cult-approche 3.6s cubic-bezier(.32,0,.22,1) infinite}
/* La lueur ne monte qu'une fois les recouvrements etablis. */
@keyframes sc-cult-zone{0%,62%{opacity:0}86%,100%{opacity:1}}
.sc-cult-zone{opacity:0;animation:sc-cult-zone 3.6s ease-out infinite}
@keyframes sc-cult-groupe{0%{opacity:0}8%,92%{opacity:1}100%{opacity:0}}
.sc-cult-groupe{animation:sc-cult-groupe 3.6s linear infinite}

/* =========================================================================
   2. LEADERSHIP ET PRATIQUES DE GESTION
   L'orientation, en haut, ne bouge jamais. La décision se transmet de
   point en point ; chaque point atteint se remplit, ses deux repères
   bornent ce qu'il peut décider, et un lien remonte vers l'orientation :
   il en répond. À la fin, quatre points à des hauteurs différentes, tous
   reliés au même cadre.
   ========================================================================= */
.sc-ldr-relais{stroke-dasharray:var(--l);animation:sc-draw 4s cubic-bezier(.42,0,.3,1) infinite both}
.sc-ldr-relais--2{animation-delay:.5s}
.sc-ldr-relais--3{animation-delay:1.3s}
.sc-ldr-relais--4{animation-delay:2.1s}
.sc-ldr-garde{opacity:0}
.sc-ldr-garde--2{animation:sc-ldr-g2 4s linear infinite}
.sc-ldr-garde--3{animation:sc-ldr-g3 4s linear infinite}
.sc-ldr-garde--4{animation:sc-ldr-g4 4s linear infinite}
@keyframes sc-ldr-g2{0%,14%{opacity:0}20%,100%{opacity:1}}
@keyframes sc-ldr-g3{0%,34%{opacity:0}40%,100%{opacity:1}}
@keyframes sc-ldr-g4{0%,54%{opacity:0}60%,100%{opacity:1}}
.sc-ldr-dot--2{animation:sc-ldr-d2 4s ease-out infinite}
.sc-ldr-dot--3{animation:sc-ldr-d3 4s ease-out infinite}
.sc-ldr-dot--4{animation:sc-ldr-d4 4s ease-out infinite}
@keyframes sc-ldr-d2{0%,20%{fill:rgba(199,166,106,0);stroke:rgba(255,255,255,.34)}30%,100%{fill:var(--gold);stroke:var(--gold)}}
@keyframes sc-ldr-d3{0%,40%{fill:rgba(199,166,106,0);stroke:rgba(255,255,255,.34)}50%,100%{fill:var(--gold);stroke:var(--gold)}}
@keyframes sc-ldr-d4{0%,60%{fill:rgba(199,166,106,0);stroke:rgba(255,255,255,.34)}70%,100%{fill:var(--gold);stroke:var(--gold)}}
.sc-ldr-rep--2{animation:sc-ldr-r2 4s cubic-bezier(.42,0,.3,1) infinite}
.sc-ldr-rep--3{animation:sc-ldr-r3 4s cubic-bezier(.42,0,.3,1) infinite}
.sc-ldr-rep--4{animation:sc-ldr-r4 4s cubic-bezier(.42,0,.3,1) infinite}
@keyframes sc-ldr-r2{0%,26%{stroke-dashoffset:var(--l)}38%,100%{stroke-dashoffset:0}}
@keyframes sc-ldr-r3{0%,46%{stroke-dashoffset:var(--l)}58%,100%{stroke-dashoffset:0}}
@keyframes sc-ldr-r4{0%,66%{stroke-dashoffset:var(--l)}78%,100%{stroke-dashoffset:0}}
.sc-ldr-rep--2,.sc-ldr-rep--3,.sc-ldr-rep--4{stroke-dasharray:var(--l)}

/* =========================================================================
   3. ACCUEIL, INTÉGRATION ET RÉTENTION
   La composition se lit de droite à gauche. Depuis la situation visible,
   la trace remonte le parcours. Chaque moment dit s'il avait un appui :
   un appui net, un appui en pointillé, une barre courte qui s'interrompt,
   ou rien du tout entre deux repères qui bornent un vide.
   ========================================================================= */
.sc-air-trace{stroke-dasharray:var(--l);animation:sc-draw 4.6s cubic-bezier(.38,0,.32,1) infinite both}
.sc-air-trace--2{animation-delay:.9s}
.sc-air-trace--3{animation-delay:1.9s}
@keyframes sc-air-m1{0%,16%{opacity:0}24%,100%{opacity:1}}
@keyframes sc-air-m2{0%,30%{opacity:0}38%,100%{opacity:1}}
@keyframes sc-air-m3{0%,40%{opacity:0}48%,100%{opacity:1}}
@keyframes sc-air-m4{0%,62%{opacity:0}70%,100%{opacity:1}}
@keyframes sc-air-m5{0%,78%{opacity:0}86%,100%{opacity:1}}
@keyframes sc-air-vide{0%,52%{opacity:0}60%,100%{opacity:1}}
.sc-air-m1{opacity:0;animation:sc-air-m1 4.6s ease-out infinite}
.sc-air-m2{opacity:0;animation:sc-air-m2 4.6s ease-out infinite}
.sc-air-m3{opacity:0;animation:sc-air-m3 4.6s ease-out infinite}
.sc-air-m4{opacity:0;animation:sc-air-m4 4.6s ease-out infinite}
.sc-air-m5{opacity:0;animation:sc-air-m5 4.6s ease-out infinite}
.sc-air-vide{opacity:0;animation:sc-air-vide 4.6s ease-out infinite}

/* =========================================================================
   4. STRATÉGIE ET GOUVERNANCE DE LA DIVERSITÉ
   Six moments alignés, le premier ouvert : l'intention existe avant d'être
   portée. Puis la réévaluation repart du dernier moment, traverse toute la
   composition et remonte modifier les priorités. La boucle est fermée,
   rien ne se termine au dernier point.
   ========================================================================= */
@keyframes sc-sgd-ligne{0%{stroke-dashoffset:var(--l)}26%,100%{stroke-dashoffset:0}}
@keyframes sc-sgd-c1{0%,4%{opacity:0}10%,100%{opacity:1}}
@keyframes sc-sgd-c2{0%,9%{opacity:0}15%,100%{opacity:1}}
@keyframes sc-sgd-c3{0%,14%{opacity:0}20%,100%{opacity:1}}
@keyframes sc-sgd-c4{0%,19%{opacity:0}25%,100%{opacity:1}}
@keyframes sc-sgd-c5{0%,24%{opacity:0}30%,100%{opacity:1}}
@keyframes sc-sgd-c6{0%,29%{opacity:0}35%,100%{opacity:1}}
@keyframes sc-sgd-retour{0%,38%{stroke-dashoffset:var(--l)}88%,100%{stroke-dashoffset:0}}
@keyframes sc-sgd-relance{0%,86%{r:5;opacity:.5}94%,100%{r:8.5;opacity:1}}
.sc-sgd-ligne{stroke-dasharray:var(--l);animation:sc-sgd-ligne 4.4s cubic-bezier(.42,0,.3,1) infinite}
.sc-sgd-c1{opacity:0;animation:sc-sgd-c1 4.4s ease-out infinite}
.sc-sgd-c2{opacity:0;animation:sc-sgd-c2 4.4s ease-out infinite}
.sc-sgd-c3{opacity:0;animation:sc-sgd-c3 4.4s ease-out infinite}
.sc-sgd-c4{opacity:0;animation:sc-sgd-c4 4.4s ease-out infinite}
.sc-sgd-c5{opacity:0;animation:sc-sgd-c5 4.4s ease-out infinite}
.sc-sgd-c6{opacity:0;animation:sc-sgd-c6 4.4s ease-out infinite}
.sc-sgd-retour{stroke-dasharray:var(--l);animation:sc-sgd-retour 4.4s cubic-bezier(.38,0,.32,1) infinite}
.sc-sgd-relance{animation:sc-sgd-relance 4.4s ease-out infinite}

/* =========================================================================
   5. INTELLIGENCE CULTURELLE  (inchangée : elle fonctionne)
   ========================================================================= */
@keyframes sc-icu-branche{
  0%,10%  {stroke-dashoffset:300;opacity:0}
  22%     {opacity:1}
  55%,100%{stroke-dashoffset:0;opacity:1}
}
@keyframes sc-icu-sortie{
  0%,58%  {stroke-dashoffset:150;opacity:0}
  70%     {opacity:1}
  92%,100%{stroke-dashoffset:0;opacity:1}
}
.sc-icu-branche{stroke-dasharray:300;animation:sc-icu-branche 3.6s cubic-bezier(.4,0,.3,1) infinite}
.sc-icu-branche:nth-of-type(2){animation-delay:.09s}
.sc-icu-branche:nth-of-type(3){animation-delay:.18s}
.sc-icu-branche:nth-of-type(4){animation-delay:.27s}
.sc-icu-sortie{stroke-dasharray:150;animation:sc-icu-sortie 3.6s cubic-bezier(.4,0,.3,1) infinite}
.gnav-pane-scene .sc-line{fill:none;stroke:rgba(216,226,234,.30);stroke-width:1.5}
.gnav-pane-scene .sc-node{fill:none;stroke:rgba(216,226,234,.55);stroke-width:1.6}
.gnav-pane-scene .sc-node--on{fill:var(--gold);stroke:var(--gold)}


/* =========================================================================
   SERVICES : LA DÉRIVE ET LA PROFONDEUR
   -------------------------------------------------------------------------
   La mosaique du premier plan avance tres lentement, celle du fond recule en
   sens contraire et deux fois plus lentement. L'ecart entre les deux donne
   du volume au panneau : c'est le seul traitement qui se serve des DEUX
   presences de la mosaique, celle de droite et celle du fond.

   Volontairement limite a une transformation sur l'IMAGE :
     aucun masque, qui rendrait le calque invisible ;
     aucun mode de fusion, qui ne compose pas sous un parent masque ;
     aucune opacite, qui se confondrait avec le fondu de changement.
   Rien ici ne peut empecher la mosaique de s'afficher.

   3,5 % sur 22 s : cela ne se voit pas, cela se sent.
   ========================================================================= */
.gnav-pane--mosaic .gnav-pane-visual .gnav-pane-layer.is-active > img{
  animation:svc-derive-avant 22s ease-in-out infinite alternate;
}
.gnav-pane--mosaic .gnav-pane-amb .gnav-pane-layer.is-active > img{
  animation:svc-derive-arriere 31s ease-in-out infinite alternate;
}
@keyframes svc-derive-avant{
  from{transform:scale(1) translateX(0)}
  to  {transform:scale(1.035) translateX(-1.3%)}
}
@keyframes svc-derive-arriere{
  from{transform:scale(1.03) translateX(0)}
  to  {transform:scale(1) translateX(1.8%)}
}
@media(prefers-reduced-motion:reduce){
  .gnav-pane--mosaic .gnav-pane-layer.is-active > img{animation:none}
}