@import url('colore.css');

/* =====================================================
   SKIN THÈME A — « Épurée & Premium »
   Surcouche sur colore.css (import ci-dessus).
   Ne redéfinit que les overrides visuels Thème A.
   Palette inchangée : orange #E8731C figé, bleu #1B3A6B,
   vert #1F7A5A, crème #F6F1E7, encre #15161A.
   ===================================================== */

/* --- Tokens supplémentaires Thème A --- */
:root {
  --orange-d:  #B05212; /* assombri de #C25A12 pour passer AA 4.5:1 sur blanc et crème */
  --orange-bg: rgba(232,115,28,.08);
  --blue-bg:   rgba(27,58,107,.08);
  --green-bg:  rgba(31,122,90,.08);
  --blue-d:    #12294D;
  --green-d:   #185C43;
  --line-s:    rgba(20,18,12,.16);
  --radius:    18px;
  --radius-lg: 26px;
  --nav-h:     76px; /* hauteur de barre de nav unifiée (remplace le 82px de colore.css) */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --sh:        0 2px 8px -4px rgba(20,24,40,.08), 0 16px 40px -20px rgba(20,30,60,.14);
  --sh-c:      0 8px 32px -16px rgba(232,115,28,.45);
  --sh-g:      0 8px 32px -16px rgba(31,122,90,.45);
  --sh-b:      0 8px 32px -16px rgba(27,58,107,.45);
  /* Violet — NSX Governance */
  --violet:    #6a4ea3;
  --violet-d:  #533d80;
  --violet-bg: rgba(106,78,163,.09);
  --violet-sh: 0 8px 32px -16px rgba(106,78,163,.45);
  /* Teal — Qui sommes-nous */
  --teal:      #178a86;
  --teal-d:    #39424e;  /* anthracite (pilier Qui-sommes-nous) — AA sur blanc */
  --teal-bg:   rgba(57,66,78,.10);
  --teal-sh:   0 8px 32px -16px rgba(23,138,134,.45);
  /* Gold/Amber — Contact */
  --gold:      #c79a2e;
  --gold-d:    #9a7220;  /* foncé → contraste AA ≥ 4.5:1 sur blanc */
  --gold-bg:   rgba(199,154,46,.10);
  --gold-sh:   0 8px 32px -16px rgba(199,154,46,.45);
}

/* =====================================================
   BARRE DE SCROLL — dégradé orange→bleu
   ===================================================== */
.scrollbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: linear-gradient(90deg, var(--orange), var(--blue));
}

/* =====================================================
   HEADER THÈME A — fond blanc semi-transparent + blur
   ===================================================== */
.site-header {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
  z-index: 100;
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgba(20,30,60,.12);
}
.nav { height: var(--nav-h); }

/* --- Brand — sous-libellé orange --- */
.brand .word span { color: var(--orange); }

/* =====================================================
   MENU PRINCIPAL — pilule arrondie avec fond teinté
   Thème A : icône + libellé flottant au survol (pas de bulle sombre)
   Zone tactile ≥ 44px · mobile-first · AA
   ===================================================== */

/* Base : pilule neutre */
.menu > li > a {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
  min-width: 46px; min-height: 46px;
  padding: 8px 12px; border-radius: 100px;
  background: rgba(21,22,26,.05);
  color: var(--muted);
  font-size: 0;
  transition: color .22s var(--ease), background .22s var(--ease);
  position: relative;
  text-decoration: none;
}
/* Supprime le soulignement animé de colore.css */
.menu > li > a::after { display: none !important; }

/* État actif : orange */
.menu > li.active > a {
  color: var(--orange-d);
  background: var(--orange-bg);
}

/* Icônes nav 22px */
.menu > li > a svg.nav-icon {
  width: 22px; height: 22px; flex-shrink: 0;
  opacity: .65;
  transition: opacity .22s, transform .22s var(--ease);
}
.menu > li > a:hover svg.nav-icon,
.menu > li.active > a svg.nav-icon { opacity: 1; transform: scale(1.08); }

/* sr-only : accessible mais invisible sur desktop */
.menu > li > a .sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* -------------------------------------------------------
   LIBELLÉ FLOTTANT au survol (remplace la bulle sombre)
   Items SANS sous-menu uniquement (Accueil, Contact).
   ------------------------------------------------------- */
.nav-tip {
  display: block;
  font-size: .65rem; font-weight: 600; letter-spacing: .04em;
  white-space: nowrap; color: inherit;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .2s var(--ease), opacity .2s var(--ease);
  pointer-events: none;
}
.menu > li > a:hover .nav-tip,
.menu > li.active > a .nav-tip { max-height: 18px; opacity: 1; }

/* Survol par défaut : orange (Accueil) */
.menu > li > a:hover {
  color: var(--orange-d);
  background: var(--orange-bg);
}

/* Qui sommes-nous → teal #178a86 */
.menu > li.pilier-qsn > a:hover,
.menu > li.pilier-qsn:focus-within > a {
  color: var(--teal-d); background: var(--teal-bg);
}
.menu > li.pilier-qsn > a:hover svg.nav-icon,
.menu > li.pilier-qsn:focus-within > a svg.nav-icon { opacity: 1; }
.menu > li.pilier-qsn.active > a {
  color: var(--teal-d); background: var(--teal-bg);
}

/* NSX Academy → vert */
.menu > li.pilier-academy > a:hover,
.menu > li.pilier-academy:focus-within > a {
  color: var(--green-d); background: var(--green-bg);
}
.menu > li.pilier-academy > a:hover svg.nav-icon,
.menu > li.pilier-academy:focus-within > a svg.nav-icon { opacity: 1; }

/* NSX Governance → violet */
.menu > li.pilier-governance > a:hover,
.menu > li.pilier-governance:focus-within > a {
  color: var(--violet-d); background: var(--violet-bg);
}
.menu > li.pilier-governance > a:hover svg.nav-icon,
.menu > li.pilier-governance:focus-within > a svg.nav-icon { opacity: 1; }

/* NSX Elite → bleu */
.menu > li.pilier-elite > a:hover,
.menu > li.pilier-elite:focus-within > a {
  color: var(--blue); background: var(--blue-bg);
}
.menu > li.pilier-elite > a:hover svg.nav-icon,
.menu > li.pilier-elite:focus-within > a svg.nav-icon { opacity: 1; }

/* Contact → gold/amber #c79a2e */
.menu > li.pilier-contact > a:hover,
.menu > li.pilier-contact:focus-within > a {
  color: var(--gold-d); background: var(--gold-bg);
}
.menu > li.pilier-contact > a:hover svg.nav-icon,
.menu > li.pilier-contact:focus-within > a svg.nav-icon { opacity: 1; }
.menu > li.pilier-contact.active > a {
  color: var(--gold-d); background: var(--gold-bg);
}
/* États actifs (page courante) — alignés sur la couleur du pilier */
.menu > li.pilier-academy.active > a    { color: var(--green-d);  background: var(--green-bg); }
.menu > li.pilier-governance.active > a { color: var(--violet-d); background: var(--violet-bg); }
.menu > li.pilier-elite.active > a      { color: var(--blue);     background: var(--blue-bg); }

/* Chevron colore.css masqué sur Thème A */
.menu .has-sub > a::after { display: none !important; }

/* =====================================================
   DROPDOWN (submenu) THÈME A
   ===================================================== */
.submenu {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 8px; box-shadow: var(--sh); list-style: none;
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 60;
}
.has-sub:hover .submenu,
.has-sub:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* Dernier pilier (Elite) : ancré à droite */
.pilier-elite .submenu { left: auto; right: 0; transform: translateY(6px) !important; }
.pilier-elite:hover .submenu,
.pilier-elite:focus-within .submenu { transform: translateY(0) !important; }

/* Items dropdown */
.submenu a {
  display: block; padding: 10px 14px; border-radius: 9px;
  font-size: .86rem; color: #33353C;
  transition: background .15s, color .15s, padding-left .15s;
}
.submenu a:hover { background: var(--orange-bg); color: var(--orange-d); padding-left: 18px; }

/* Couleurs par pilier dans les dropdowns */
.pilier-qsn .submenu a:hover        { background: var(--teal-bg);   color: var(--teal-d); }
.pilier-academy .submenu a:hover    { background: var(--green-bg);  color: var(--green-d); }
.pilier-governance .submenu a:hover { background: var(--violet-bg); color: var(--violet-d); }
.pilier-elite .submenu a:hover      { background: var(--blue-bg);   color: var(--blue); }

/* Titre de catégorie en tête du sous-menu */
.submenu-label {
  display: block; padding: 6px 14px 4px;
  font-size: .65rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green-d); border-bottom: 1px solid var(--line); margin-bottom: 4px;
  pointer-events: none; user-select: none;
}
.pilier-qsn .submenu-label        { color: var(--teal-d);   border-bottom-color: var(--teal-bg); }
.pilier-governance .submenu-label { color: var(--violet-d); border-bottom-color: var(--violet-bg); }
.pilier-elite .submenu-label      { color: var(--blue);     border-bottom-color: var(--blue-bg); }

/* Supprime le .submenu-title injecté par interactive.js */
.submenu .submenu-title { display: none !important; }

/* =====================================================
   NAV CTA — bouton primaire orange
   ===================================================== */
.nav-cta .btn-primary { background: var(--orange); color: #fff; }
.nav-cta .btn-primary:hover { background: var(--orange-d); }

/* Sélecteur de langue */
.lang-pill {
  display: flex; align-items: center; gap: 7px;
  font-size: .8rem; color: var(--muted);
  padding: 9px 13px; border: 1.5px solid var(--line); border-radius: 100px;
  background: #fff; cursor: pointer; min-height: 44px;
  transition: border-color .2s;
}
.lang-pill:hover { border-color: var(--orange); }

/* =====================================================
   HERO THÈME A
   Fond crème, suppression flagline et barre orange
   ===================================================== */
.hero { background: var(--cream) !important; color: var(--ink) !important; }
.hero .flagline { display: none !important; }
.hero .eyebrow::before { display: none !important; }
.hero .eyebrow { color: var(--orange-d) !important; margin-bottom: clamp(16px,2.5vw,24px); }
.hero h1 { color: var(--ink) !important; }
.hero h1 .rotator   { color: var(--orange-d) !important; }
.hero h1 .rotator .w { color: var(--orange-d) !important; }
.hero .sub { color: #3a3c44 !important; }
.hero-photo { box-shadow: var(--sh); }

/* Filigrane goutte logo */
.hero-drop-accent {
  position: absolute; right: -2%; top: -8%;
  width: clamp(220px,32vw,420px);
  opacity: .055; color: var(--orange);
  pointer-events: none; z-index: 1; /* au-dessus des pseudo-éléments hero::before/after (z-index:0) */
  transform: rotate(18deg);
}
.hero-drop-accent svg { width: 100%; height: auto; display: block; }

/* =====================================================
   CARDS THÈME A — 3 piliers
   Carte 1 = NSX Academy (vert)
   Carte 2 = NSX Governance (violet) [.b2]
   Carte 3 = NSX Elite (bleu) [.b3]
   Écrase la border-top orange de colore.css.
   ===================================================== */
.card {
  border-radius: 22px; border-top-width: 5px;
  box-shadow: var(--sh);
}
.card:hover { transform: translateY(-4px); }

/* Couleurs des 3 cartes piliers — UNIQUEMENT sur l'accueil (sinon icone=bordure via colore.css) */
.piliers-accueil .card            { border-top-color: var(--green) !important; }
.piliers-accueil .card:hover      { box-shadow: var(--sh-g); }
.piliers-accueil .card.b2         { border-top-color: var(--violet) !important; }
.piliers-accueil .card.b2:hover   { box-shadow: var(--violet-sh); }
.piliers-accueil .card.b3         { border-top-color: var(--blue) !important; }
.piliers-accueil .card.b3:hover   { box-shadow: var(--sh-b); }
.piliers-accueil .card .kicker    { color: var(--green-d) !important; }
.piliers-accueil .card.b2 .kicker { color: var(--violet-d) !important; }
.piliers-accueil .card.b3 .kicker { color: var(--blue) !important; }
.piliers-accueil .card .idx    { color: var(--green-d) !important; }
.piliers-accueil .card.b2 .idx { color: var(--violet-d) !important; }
.piliers-accueil .card.b3 .idx { color: var(--blue) !important; }

/* =====================================================
   SECTION TESSERA / APROPOS — respiration supplémentaire
   ===================================================== */
#apropos { padding-bottom: clamp(56px,8vw,96px) !important; }
.cards.c3 { margin-top: clamp(36px,5vw,56px); }

/* Grille 4 colonnes responsive — remplace les style="grid-template-columns:repeat(4,1fr)"
   inline (qui-sommes-nous, espace-employeur, nsx-elite) qui ne se repliaient pas sur mobile. */
.cards.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .cards.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards.c4 { grid-template-columns: 1fr; } }

/* =====================================================
   VALEURS THÈME A
   ===================================================== */
.value { box-shadow: var(--sh); }
.value:hover              { transform: translateY(-5px); box-shadow: var(--sh-c); }
.value:nth-child(2):hover { box-shadow: var(--sh-g); }
.value:nth-child(3):hover { box-shadow: var(--sh-b); }

/* =====================================================
   STATS THÈME A
   ===================================================== */
.stats .stat { box-shadow: var(--sh); }

/* =====================================================
   CTA BAND THÈME A — encre + halo orange/bleu
   ===================================================== */
.cta-band {
  background: var(--ink) !important;
  border-radius: var(--radius-lg);
  padding: clamp(42px,6vw,64px) clamp(28px,5vw,56px);
  text-align: center; color: #fff;
  position: relative; overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(20,30,60,.5);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(400px 300px at 15% 50%, rgba(232,115,28,.18), transparent 60%),
    radial-gradient(300px 300px at 85% 50%, rgba(27,58,107,.25), transparent 60%);
}
.cta-band h2       { position: relative; z-index: 1; letter-spacing: -.02em; }
.cta-band p        { position: relative; z-index: 1; color: rgba(255,255,255,.78); }
.cta-band .btn-white { position: relative; z-index: 1; }
.cta-band .btn-white:hover { box-shadow: 0 12px 32px -10px rgba(0,0,0,.4); }

/* =====================================================
   FOOTER THÈME A — grid 4 colonnes
   ===================================================== */
.footer .top { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
.footer h5 { color: var(--orange); }
.footer ul a:hover { color: #fff; }

/* =====================================================
   FOOTER RESPONSIVE — surcharge la grille 4 colonnes de Thème A
   (qui, sans media query, écrasait les règles mobile de colore.css).
   Tablette ≤980 : 2 colonnes (2×2).
   Mobile ≤760 : marque pleine largeur, listes « Liens utiles » /
   « Support » côte à côte, Contact pleine largeur. Liens visibles.
   ===================================================== */
@media (max-width: 980px) {
  .footer .top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .footer .top {
    grid-template-columns: 1fr 1fr;
    gap: 30px 24px;
    text-align: left;
  }
  .footer .top > div:first-child { grid-column: 1 / -1; } /* marque + phrase */
  .footer .top > div.ct          { grid-column: 1 / -1; } /* contact (adresse longue) */
  .footer .about { max-width: none; }
}

/* =====================================================
   ONGLETS 3 PILIERS — section #espaces
   NSX Academy (vert) · NSX Governance (violet) · NSX Elite (bleu)

   Neutralise le hover transform de colore.css (translateY(-3px)) —
   interdit par la règle "aucune animation en boucle". Réduit-motion garanti.
   ===================================================== */
.tabs-big {
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Base commune : pilule, transitions couleur uniquement */
.tabs-big button {
  flex: none !important;
  border-radius: 100px !important;
  font-size: clamp(.9rem, 2vw, 1.05rem) !important;
  padding: 13px 22px !important;
  gap: 8px !important;
  transform: none !important;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), box-shadow .22s var(--ease) !important;
}
.tabs-big button:hover { transform: none !important; }

/* NSX Academy (vert) */
.tabs-big button[data-target="p-academy"] {
  border: 2px solid var(--green-d) !important;
  color: var(--green-d) !important;
  background: transparent !important;
}
.tabs-big button[data-target="p-academy"]:hover {
  background: var(--green-bg) !important;
  color: var(--green-d) !important;
}
.tabs-big button[data-target="p-academy"].active {
  background: var(--green-d) !important;
  color: #fff !important;
  border-color: var(--green-d) !important;
  box-shadow: 0 6px 20px -8px rgba(31,122,90,.5) !important;
}

/* NSX Governance (violet) */
.tabs-big button[data-target="p-gov"] {
  border: 2px solid var(--violet-d) !important;
  color: var(--violet-d) !important;
  background: transparent !important;
}
.tabs-big button[data-target="p-gov"]:hover {
  background: var(--violet-bg) !important;
  color: var(--violet-d) !important;
}
.tabs-big button[data-target="p-gov"].active {
  background: var(--violet-d) !important;
  color: #fff !important;
  border-color: var(--violet-d) !important;
  box-shadow: 0 6px 20px -8px rgba(106,78,163,.5) !important;
}

/* NSX Elite (bleu) */
.tabs-big button[data-target="p-elite"] {
  border: 2px solid var(--blue) !important;
  color: var(--blue) !important;
  background: transparent !important;
}
.tabs-big button[data-target="p-elite"]:hover {
  background: var(--blue-bg) !important;
  color: var(--blue) !important;
}
.tabs-big button[data-target="p-elite"].active {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
  box-shadow: 0 6px 20px -8px rgba(27,58,107,.5) !important;
}

/* Ticks et eyebrows dans les panneaux */
#p-academy .tick    { background: var(--green-d) !important; }
#p-academy .eyebrow { color: var(--green-d) !important; }
#p-gov .tick        { background: var(--violet-d) !important; }
#p-gov .eyebrow     { color: var(--violet-d) !important; }
#p-elite .tick      { background: var(--blue) !important; }
#p-elite .eyebrow   { color: var(--blue) !important; }

/* =====================================================
   NAVIGATION RESPONSIVE — seuil unique à 1024px
   ≥1024 : menu inline (pastilles icônes) + dropdowns au survol
   ≤1023 : tiroir latéral droit + accordéons (tablette ET mobile)
   Corrige : zone morte 761–767px, header surchargé 768–960px,
   débordement header mobile (CTA + langue déplacés dans le tiroir).
   ===================================================== */

/* Bouton accordéon masqué par défaut (desktop) — affiché en ≤1023 */
.acc-toggle { display: none; }

/* ---- Desktop : menu inline, pas de burger ---- */
@media (min-width: 1024px) {
  .menu   { display: flex; }
  .burger { display: none; }
}

/* ---- Tablette & mobile : tiroir latéral droit ---- */
@media (max-width: 1023px) {
  .burger { display: flex !important; }

  /* Voile (élément .nav-scrim injecté par interactive.js) */
  .nav-scrim {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(15,16,20,.5);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .nav-scrim.show { opacity: 1; visibility: visible; }
  body.nav-open  { overflow: hidden; }

  /* Panneau tiroir */
  .menu {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(86vw, 360px);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border: 0;
    padding: calc(var(--nav-h) + 10px) 16px 24px;
    transform: translateX(100%);
    transition: transform .35s var(--ease);
    z-index: 96; overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: -16px 0 44px -16px rgba(20,30,60,.28);
  }
  .menu.open { transform: translateX(0); }

  /* Chaque entrée occupe une ligne (libellé + chevron, sous-menu en dessous) */
  .menu > li { display: flex; flex-wrap: wrap; align-items: center; width: 100%; }

  .menu > li > a {
    flex: 1 1 auto;
    flex-direction: row; justify-content: flex-start;
    width: auto; height: auto; min-height: 52px;
    padding: 13px 14px; gap: 12px; margin-bottom: 4px;
    border-bottom: 0; border-radius: 12px;
    background: rgba(21,22,26,.04); color: var(--ink);
    font-size: 1rem;
  }
  .menu > li > a svg.nav-icon { width: 22px; height: 22px; opacity: 1; }
  .menu > li > a .sr-only {
    position: static; width: auto; height: auto;
    clip: auto; overflow: visible; margin: 0;
    font-size: 1rem; font-weight: 500;
  }
  .nav-tip { display: none !important; }

  /* Couleurs par pilier */
  .menu > li.pilier-qsn > a        { color: var(--teal-d);   background: var(--teal-bg); }
  .menu > li.pilier-academy > a    { color: var(--green-d);  background: var(--green-bg); }
  .menu > li.pilier-governance > a { color: var(--violet-d); background: var(--violet-bg); }
  .menu > li.pilier-elite > a      { color: var(--blue);     background: var(--blue-bg); }
  .menu > li.pilier-contact > a    { color: var(--gold-d);   background: var(--gold-bg); }

  /* Bouton accordéon (élément .acc-toggle injecté par interactive.js) */
  .menu .acc-toggle {
    flex: 0 0 46px; align-self: stretch; min-height: 52px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px; padding: 0;
    background: transparent; border: 0; cursor: pointer; color: var(--muted);
  }
  .menu .acc-toggle::before {
    content: ""; width: 9px; height: 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .25s var(--ease); opacity: .8;
  }
  .menu > li.has-sub.sub-open .acc-toggle::before { transform: rotate(-135deg); }
  .menu > li.has-sub > a::after { display: none !important; }

  /* Sous-menu : accordéon replié par défaut */
  .submenu {
    flex: 0 0 100%; order: 99;
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    max-height: 0; overflow: hidden; padding: 0 0 0 14px;
    transition: max-height .3s var(--ease);
  }
  .pilier-elite .submenu { right: auto; left: auto; }
  .menu > li.has-sub.sub-open .submenu { max-height: 360px; padding: 2px 0 8px 14px; }
  .submenu a { min-height: 44px; display: flex; align-items: center; }

  /* CTA + langue déplacés dans le bas du tiroir (relocation par interactive.js) */
  .menu .nav-cta {
    width: 100%;
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    margin: 18px 0 0; padding: 18px 2px 0; border-top: 1px solid var(--line);
  }
  .menu .nav-cta .lang-pill   { display: flex; justify-content: center; width: 100%; }
  .menu .nav-cta .btn         { display: inline-flex; justify-content: center; width: 100%; }
  .menu .nav-cta .btn-outline { display: inline-flex; }
}

/* ---- Très petit mobile : respiration & lisibilité ---- */
@media (max-width: 480px) {
  .wrap    { padding: 0 20px; }
  .hero    { padding-top: clamp(92px, 22vw, 130px); }
  .hero h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .section { padding: 56px 0; }
}

/* =====================================================
   BOUTON GOVERNANCE — violet (surcharge btn-employeur bleu)
   Usage : <a class="btn btn-governance" …>
   ===================================================== */
.btn-governance {
  color: #fff;
  background: var(--violet);
  box-shadow: 0 10px 26px -14px rgba(106,78,163,.55);
  transition: background .4s var(--ease), transform .3s, box-shadow .4s;
}
.btn-governance:hover {
  background: var(--violet-d);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -14px rgba(106,78,163,.6);
}

/* =====================================================
   ACCESSIBILITÉ — focus visible
   ===================================================== */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible,
.btn:focus-visible {
  outline: 3px solid rgba(232,115,28,.6);
  outline-offset: 3px; border-radius: 8px;
}

/* =====================================================
   REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .tabs-big button { transition: none !important; }
}
/* ===========================================================
   ITÉRATION 8 — Surcharges Thème A
   2026-06-15
   =========================================================== */

/* ── Tâche 1 RTL : encre sur fond crème en Thème A ──────────*/
[dir="rtl"] body { color: var(--ink); }

/* ── Tâche 2 : accrocheurs Thème A ──────────────────────────*/
.rotator { animation: none !important; }
.rotator .w { animation: none !important; }
.hl::after { background: rgba(176,82,18,.20); }

/* ── Tâche 5 : logo-accent z-index cohérent ─────────────────*/
.wrap { position: relative; z-index: 1; }

/* ── Tâche 6 : cta-band Thème A — variantes couleur
   Le .cta-band par défaut reste encre (règle existante du thème).
   Les classes de couleur le surchargent.                     */
.cta-band.cta-talent,
.cta-band.cta-academy   { background: var(--green) !important; color: #fff; }
.cta-band.cta-employeur,
.cta-band.cta-elite     { background: var(--blue) !important;  color: #fff; }
.cta-band.cta-governance { background: var(--violet) !important; color: #fff; }
.cta-band.cta-contact   { background: var(--gold) !important;  color: #fff; }

/* ── Tâche 7 : value-ic Thème A ─────────────────────────────*/
.value-ic { background: rgba(176,82,18,.10); color: var(--orange-d); }

/* CTA accueil : orange (au lieu de l'encre par défaut) */
.cta-band.cta-accueil{background:var(--orange) !important}
.cta-band.cta-accueil::before{background:radial-gradient(460px 320px at 18% 35%,rgba(255,255,255,.16),transparent 60%),radial-gradient(360px 300px at 85% 70%,rgba(0,0,0,.10),transparent 60%)}

/* CTA Qui-sommes-nous : pétrole (distinct du vert) */
.cta-band.cta-qsn{background:#39424e !important}