/* =========================================================================
   NSX Kompetenz V1 — THÈME « code couleur par pôle » (ISO 9001) + menu icônes
   Chargé APRÈS v1-nav.css. Définit une couleur de pôle par page (data-pole),
   un menu en icônes seules (libellé au survol / sous-menu), un accent d'en-tête
   qui suit l'icône survolée, et le cadre photo horizontal + filigrane blanc.
   ========================================================================= */

/* ---- 1) Couleur de pôle par page (var --c-pole + tinte) ---- */
:root{ --c-pole: var(--c-orange); --tint-pole: var(--tint-orange); }
body[data-pole="home"]      { --c-pole: var(--c-orange); --tint-pole: var(--tint-orange); }
body[data-pole="about"]     { --c-pole: var(--c-yellow-d);--tint-pole: var(--tint-yellow);}  /* JAUNE (ex-navy) */
body[data-pole="academy"]   { --c-pole: var(--c-green);  --tint-pole: var(--tint-green);  }
body[data-pole="governance"]{ --c-pole: var(--c-blue);   --tint-pole: var(--tint-blue);   }
body[data-pole="elite"]     { --c-pole: var(--c-navy);   --tint-pole: var(--tint-navy);   }  /* NAVY (ex-jaune) */
body[data-pole="contact"]   { --c-pole: var(--c-orange); --tint-pole: var(--tint-orange); }

/* La couleur de pôle irrigue les accents de la page (sans toucher au CTA orange figé) */
body[data-pole] .v1-eyebrow{ color: var(--c-pole); }
body[data-pole] .v1-section .v1-eyebrow::before{ background: var(--c-pole); }
body[data-pole] .v1-btn--ghost{ border-color: var(--c-pole); color: var(--c-pole); }
body[data-pole] .v1-btn--ghost:hover{ background: var(--tint-pole); }

/* ---- 2) Menu en ICÔNES seules + libellé au survol ---- */
@media (min-width:1024px){
  .v1-nav{ gap:6px; align-items:center; }
  .v1-nav > a, .v1-nav .has-sub > a{
    position:relative; flex-direction:row; min-width:0; padding:4px; gap:0;
    border-radius:50%; font-size:0;            /* masque le texte hérité */
  }
  /* icône ronde, couleur PROPRE à chaque entrée */
  .v1-nav .nav-icon{ width:46px; height:46px; padding:11px; border-radius:50%;
    background:var(--tint-navy); color:var(--c-navy); box-shadow:inset 0 0 0 1px var(--line);
    transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
  .v1-nav a.is-home    .nav-icon{ background:var(--tint-orange); color:var(--c-orange); }
  .v1-nav a[href^="qui-sommes-nous"] .nav-icon{ background:var(--tint-yellow); color:var(--c-yellow-d); } /* about = jaune */
  .v1-nav a.is-academy .nav-icon{ background:var(--tint-green);  color:var(--c-green); }
  .v1-nav a.is-governance .nav-icon{ background:var(--tint-blue); color:var(--c-blue); }
  .v1-nav a.is-elite   .nav-icon{ background:var(--tint-navy);   color:var(--c-navy); }   /* elite = navy */
  /* Contact (dernier lien) en orange */
  .v1-nav > a:last-child .nav-icon{ background:var(--tint-orange); color:var(--c-orange); }
  .v1-nav > a:hover .nav-icon, .v1-nav .has-sub:hover > a .nav-icon{ transform:translateY(-2px); filter:saturate(1.15); }
  /* survol : conserver la couleur du pôle (neutralise l'ancien jaune d'Elite de v1-nav.css) */
  .v1-nav a.is-elite:hover .nav-icon{ background:var(--tint-navy); color:var(--c-navy); }
  .v1-nav a[href^="qui-sommes-nous"]:hover .nav-icon{ background:var(--tint-yellow); color:var(--c-yellow-d); }
  /* page active : pastille pleine de la couleur du pôle */
  .v1-nav a[aria-current="page"] .nav-icon{ background:var(--c-pole); color:#fff; box-shadow:none; }

  /* libellé = info-bulle au survol (pour les entrées SANS sous-menu) */
  .v1-nav > a > span:not(.nav-icon){
    position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%) translateY(4px);
    background:var(--c-navy); color:#fff; padding:.34em .62em; border-radius:8px; font-size:.74rem;
    font-weight:700; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; z-index:90;
    transition:opacity .15s var(--ease), transform .15s var(--ease); box-shadow:var(--sh-md); }
  .v1-nav > a:hover > span:not(.nav-icon),
  .v1-nav > a:focus-visible > span:not(.nav-icon){ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  /* entrées AVEC sous-menu : pas d'info-bulle (le sous-menu prend le relais) */
  .v1-nav .has-sub > a > span:not(.nav-icon){ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .v1-nav .submenu{ top:calc(100% + 6px); }
}

/* ---- 3) En-tête : accent qui prend la couleur de l'icône survolée ---- */
.v1-header{ border-bottom:3px solid transparent; transition:border-color .25s var(--ease); }
.v1-header[data-hover="orange"]{ border-bottom-color:var(--c-orange); }
.v1-header[data-hover="green"] { border-bottom-color:var(--c-green); }
.v1-header[data-hover="blue"]  { border-bottom-color:var(--c-blue); }
.v1-header[data-hover="yellow"]{ border-bottom-color:var(--c-yellow-d); }
.v1-header[data-hover="navy"]  { border-bottom-color:var(--c-navy); }
/* au repos : fin filet de la couleur de la page */
body[data-pole] .v1-header{ border-bottom-color:color-mix(in srgb, var(--c-pole) 28%, transparent); }

/* ---- 4) Cadre photo HORIZONTAL + filigrane BLANC ---- */
.v1-photo{ position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--sh-md);
  background:var(--c-pole); }
.v1-photo img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
/* force le format paysage même pour des sources portrait (toutes les photos encadrées) */
.visual img, .v1-photo picture{ width:100%; }
.visual img{ aspect-ratio:16/9; object-fit:cover; border-radius:22px; }
/* panneau décoratif à motif (filigrane BLANC uniquement) sur fond couleur de pôle */
.v1-petalpanel{ position:relative; border-radius:22px; background:var(--c-pole); isolation:isolate; }
.v1-petalpanel::before{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:url("../img/motif-petales-blanc.png") repeat; background-size:200px 200px; opacity:.14; }
/* le filigrane générique .has-motif passe en BLANC (plus de currentColor) */
.has-motif::before{ background:url("../img/motif-petales-blanc.png") repeat !important;
  background-size:220px 220px !important; opacity:.12 !important; color:transparent !important; }

/* ---- 5) RTL : info-bulle centrée OK ; rien de spécifique requis ---- */

/* =========================================================================
   6) Propagation de la couleur — SOUS-MENU (couleur de l'entrée) + PAGE
   ========================================================================= */
/* sous-menu : filet + libellé + survol dans la couleur du pôle de l'entrée */
.v1-nav .has-sub:has(.is-academy)    .submenu{border-top:3px solid var(--c-green)}
.v1-nav .has-sub:has(.is-governance) .submenu{border-top:3px solid var(--c-blue)}
.v1-nav .has-sub:has(.is-elite)      .submenu{border-top:3px solid var(--c-navy)}   /* elite = navy */
/* about (has-sub sans classe is-*) = jaune */
.v1-nav .has-sub:not(:has(.is-academy)):not(:has(.is-governance)):not(:has(.is-elite)) .submenu{border-top:3px solid var(--c-yellow-d)}

.v1-nav .has-sub:has(.is-academy)    .submenu-label{color:var(--c-green)}
.v1-nav .has-sub:has(.is-governance) .submenu-label{color:var(--c-blue)}
.v1-nav .has-sub:has(.is-elite)      .submenu-label{color:var(--c-navy)}   /* elite = navy */

.v1-nav .has-sub:has(.is-academy)    .submenu a:hover{background:var(--tint-green); color:var(--c-green-d)}
.v1-nav .has-sub:has(.is-governance) .submenu a:hover{background:var(--tint-blue); color:var(--c-blue-d)}
.v1-nav .has-sub:has(.is-elite)      .submenu a:hover{background:var(--tint-navy); color:var(--c-navy)}   /* elite = navy */
/* about = jaune : fond jaune clair + texte navy (lisible) */
.v1-nav .has-sub:not(:has(.is-academy)):not(:has(.is-governance)):not(:has(.is-elite)) .submenu a:hover{background:var(--tint-yellow); color:var(--c-navy)}

/* PAGE : la couleur du pôle irrigue les sections, filets, cartes, ombres */
body[data-pole] .v1-section--tint{ background:var(--tint-pole); }
body[data-pole] .v1-eyebrow::before,
body[data-pole] .v1-section-eyebrow::before{ background:var(--c-pole) !important; }
body[data-pole] .v1-pole{ border-left-color:var(--c-pole); }
/* .v1-featcard garde son accent PROPRE par carte (--ac : bleu/vert/orange…) */
body[data-pole] .v1-pilier:hover, body[data-pole] .v1-card:hover{
  box-shadow:0 18px 40px -20px color-mix(in srgb, var(--c-pole) 55%, transparent); }
body[data-pole] .v1-cta{ background:var(--c-pole); }
body[data-pole] .v1-cta .v1-btn--cta{ background:#fff; color:var(--c-pole); }
/* le tiroir mobile : entête + items dans la couleur de page */
body[data-pole] .v1-drawer .v1-drawer-head{ border-bottom:3px solid var(--c-pole); }
body[data-pole] .v1-drawer nav a:hover{ color:var(--c-pole); }
/* on garde l'ORANGE figé pour le CTA principal hors bandeau coloré */
.v1-btn--cta{ background:var(--c-orange); color:#fff; }

/* ---- 7) Helpers finition ---- */
.pgm-suffix{ color:inherit; font-weight:800; } /* « Spectrum » / « X » : hérite la couleur du bloc, plus de teinte verte fixe */
.v1-statgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:18px; }
.v1-statgrid > div{ background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--c-pole);
  border-radius:14px; padding:14px 16px; }
.v1-statgrid b{ display:block; font-family:var(--font-head); font-size:1.5rem; color:var(--c-pole); line-height:1; margin-bottom:3px; }
.v1-statgrid span{ font-size:.86rem; color:var(--muted); }
/* cadre photo Yann : photo + panneau pétales couleur, en horizontal */
.v1-photoframe{ position:relative; border-radius:24px; overflow:hidden; box-shadow:var(--sh-md); background:var(--c-pole); }
.v1-photoframe::after{ content:""; position:absolute; inset:0; background:url("../img/motif-petales-blanc.png") repeat;
  background-size:180px 180px; opacity:.12; pointer-events:none; mix-blend-mode:screen; }
.v1-photoframe img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; position:relative; z-index:1; }

/* =========================================================================
   8) CTA uni sur TOUTES les pages : aplat de la couleur du pôle, compact,
      sans motif. (Le fond couleur vient déjà de body[data-pole] .v1-cta.)
   ========================================================================= */
.v1-cta{ padding:clamp(26px,3.4vw,44px) !important; }

/* =========================================================================
   MOTIF PÉTALES — RETIRÉ PARTOUT (reproduction temporaire jugée non aboutie).
   On ne garde que les fonds pleins / dégradés ; le motif reviendra via le
   fichier OFFICIEL du designer quand il sera fourni.
   ========================================================================= */
.has-motif::before,
.v1-cta::before,
.v1-petalpanel::before,
.v1-photoframe::after,
.v1-panel-visual::before,
.v1-group-visual::before{ content:none !important; background:none !important; }
.v1-hero .petal-bg{ display:none !important; }

/* =========================================================================
   Panneaux colorés (.v1-petalpanel) : TEXTE CLAIR sur TOUTES les pages.
   (Ces règles vivaient dans v1-fin-3.css, non chargé partout → texte foncé
   illisible et <h2> invisible sur navy. Rendues globales ici.)
   ========================================================================= */
.v1-petalpanel{ padding:clamp(28px,4vw,44px); color:#fff; overflow:hidden; }
.v1-petalpanel > *{ position:relative; z-index:1; }
.v1-petalpanel h2, .v1-petalpanel h3{ color:#fff; }
.v1-petalpanel p{ color:rgba(255,255,255,.92); }
.v1-petalpanel .v1-eyebrow{ color:rgba(255,255,255,.92); }
.v1-petalpanel .v1-eyebrow::before{ background:rgba(255,255,255,.85) !important; }
.v1-petalpanel.is-green{ background:var(--c-green); }
.v1-petalpanel.is-navy{ background:var(--c-navy); }

/* =========================================================================
   PAGE « about » = JAUNE : jaune en aplats/identité, TEXTE en navy (AA).
   ========================================================================= */
body[data-pole="about"] .v1-eyebrow{ color:var(--c-navy); }
body[data-pole="about"] .v1-statgrid b{ color:var(--c-navy); }
body[data-pole="about"] .v1-btn--ghost{ color:var(--c-navy); border-color:var(--c-yellow-d); }
body[data-pole="about"] .v1-btn--ghost:hover{ background:var(--tint-yellow); }
body[data-pole="about"] .v1-cta h2,
body[data-pole="about"] .v1-cta p{ color:var(--c-navy); }
body[data-pole="about"] .v1-cta .v1-btn--cta{ background:var(--c-navy); color:#fff; }

/* =========================================================================
   ELITE — Option A : CTA final en NAVY CLAIR (tinte) pour le distinguer du
   bandeau navy plein qui le précède. Texte + bouton navy (lisibilité).
   ========================================================================= */
body[data-pole="elite"] .v1-cta{ background:var(--tint-navy) !important; }
body[data-pole="elite"] .v1-cta h2,
body[data-pole="elite"] .v1-cta p{ color:var(--c-navy); }
body[data-pole="elite"] .v1-cta .v1-btn--white,
body[data-pole="elite"] .v1-cta .v1-btn--cta{ background:var(--c-navy); color:#fff; }
body[data-pole="elite"] .v1-cta .v1-btn--white svg{ color:#fff; }

/* Chips de niveau colorés (.v1-level .badge) : suffixe Spectrum/X en BLANC
   (le vert d'Academy jure sur les fonds colorés). Ailleurs le suffixe reste vert. */
.v1-level .badge .pgm-suffix{ color:#fff !important; margin:0 .28em; }

/* Section « Nos valeurs en action » : plus compacte + respiration après le titre */
#valeurs{ padding-block:clamp(40px,5vw,64px) !important; }
#valeurs .v1-values{ margin-top:clamp(22px,3vw,34px); }