/* =========================================================================
   NSX Kompetenz — Charte 2026 (nouveau logo)
   Jeton de couleurs commun aux 3 versions du site. Couleurs extraites du
   PDF officiel NSX_2026_CorporateDesign_Farben (rendu CMJN -> écran).
   ========================================================================= */
:root{
  /* --- 5 couleurs officielles de la charte --- */
  --c-navy:    #094268;   /* C100 M40 Y10 K60 — bleu marine, structure & texte   */
  --c-orange:  #F68712;   /* C0  M50 Y100 K0 — orange de marque, CTA (figé)      */
  --c-blue:    #738BC9;   /* C55 M35 Y0  K5  — bleu clair (periwinkle)           */
  --c-green:   #37A37B;   /* C75 M0  Y55 K15 — vert / teal                       */
  --c-yellow:  #FEEB58;   /* C0  M5  Y65 K0  — jaune                             */

  /* --- variantes utilitaires (plus foncé / plus clair) --- */
  --c-navy-d:  #06314d;
  --c-navy-700:#0c4f7c;
  --c-orange-d:#d96f06;
  --c-blue-d:  #5a73b4;
  --c-green-d: #2a8765;
  --c-yellow-d:#f4d62e;
  /* nuances foncées « niveaux de langue » (validées) */
  --c-orange-dark:#8A4206;   /* orange brûlé (A2) */
  --c-green-dark: #17543C;   /* vert forêt   (B2) */

  /* --- accents de marque (issus de l'« alte FARBEN » officielle, validés) --- */
  --c-turquoise:#51BBAD;
  --c-teal:     #468693;
  --c-peach:    #F89B5A;
  --c-cream:    #FEEEA3;

  /* --- teintes très claires pour fonds de sections (5 % de couleur) --- */
  --tint-navy:  #eef3f7;
  --tint-orange:#fef1e2;
  --tint-blue:  #f1f3fb;
  --tint-green: #e9f6f1;
  --tint-yellow:#fffce6;

  /* --- neutres --- */
  --ink:       #15212b;   /* texte courant (navy désaturé)  */
  --muted:     #5b6b78;
  --paper:     #ffffff;
  --paper-2:   #f7fafc;   /* fond de section alterné        */
  --line:      rgba(9,66,104,.12);
  --line-strong:rgba(9,66,104,.20);

  /* --- rôles sémantiques --- */
  --cta:        var(--c-orange);     /* bouton principal = orange figé          */
  --cta-ink:    #ffffff;
  --focus-ring: rgba(246,135,18,.55);

  /* --- mapping piliers -> couleur (survol par catégorie) --- */
  --pilier-qsn:        var(--c-navy);    /* Qui sommes-nous   */
  --pilier-academy:    var(--c-green);   /* NSX Academy (formation, PRISM/BRIDGE) */
  --pilier-governance: var(--c-blue);    /* NSX Governance (employeur, TETRIS)    */
  --pilier-talents:    var(--c-yellow);  /* Espace talents    */

  /* --- typographie --- */
  /* Police de marque : VetoCom (sous licence pour la prod). Fallback web
     géométrique humaniste proche : Mulish / Figtree.                       */
  --font-head: "Mulish","Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body: "Mulish",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* --- formes & profondeur --- */
  --radius:   16px;
  --radius-lg:26px;
  --radius-pill:999px;
  --maxw:     1200px;
  --ease:     cubic-bezier(.22,.61,.36,1);
  --sh-sm: 0 1px 2px rgba(9,33,43,.06), 0 6px 16px -10px rgba(9,33,43,.18);
  --sh-md: 0 8px 20px -12px rgba(9,33,43,.22), 0 28px 56px -34px rgba(9,40,80,.40);
  --sh-lg: 0 14px 34px -16px rgba(9,33,43,.26), 0 48px 88px -44px rgba(9,40,80,.46);
  /* ombres colorées par catégorie (au survol) */
  --sh-orange:0 18px 40px -20px rgba(246,135,18,.55);
  --sh-green: 0 18px 40px -20px rgba(55,163,123,.50);
  --sh-blue:  0 18px 40px -20px rgba(115,139,201,.55);
  --sh-navy:  0 18px 40px -20px rgba(9,66,104,.45);
}

/* Accessibilité : anneau de focus visible */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:6px;
}

/* Bouton principal — orange figé (jamais d'animation en boucle) */
.btn-cta{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--cta);color:var(--cta-ink);font-weight:800;
  padding:.85em 1.4em;border-radius:var(--radius-pill);border:0;
  text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:var(--sh-orange)}

/* Motif pétales en fond (utilise color: pour teinter via currentColor) */
.has-motif{position:relative;isolation:isolate}
.has-motif::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url("../img/motif-petales.svg") repeat;
  background-size:240px 240px;color:var(--c-navy);opacity:.5;
}

/* Réduction des animations si l'utilisateur le demande */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}