/* ══════════════════════════════════════════════════════════════════════
   NVI INTÉRIM — COUCHE D'IDENTITÉ VISUELLE
   ----------------------------------------------------------------------
   Objectif : que le site NE SE LISE PAS comme celui de NVI Facility.
   Recette validée : 70 % socle structurel · 15 % DPM · 15 % N2M Sécurité.

   Le socle (grille, container, rythme des sections, architecture des
   composants) reste inchangé — c'est le « 70 % ». Ce fichier ajoute la
   surcouche qui change la PERCEPTION :

     · DPM  → verre dépoli (glassmorphism), barre supérieure animée au
              survol, easing premium, profondeur charbon chaud.
     · N2M  → sections sombres à lueur radiale, filets fins, teal charte
              aux marqueurs de crédibilité.

   Règle d'usage de la couleur :
     ROUGE #E22620 = action (CTA, liens, marque)
     TEAL  #1B829B = preuve (charte : « à très petite échelle ») (conformité, certifications, chiffres)
     Ne jamais utiliser le teal comme bouton d'action ni comme fond de section.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   1. VERRE DÉPOLI — emprunt DPM
   ══════════════════════════════════════ */

.nvii-glass {
    background: var(--glass-light);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 8px 16px rgba(29, 29, 27, 0.06);
}

.nvii-glass--dark {
    background: var(--glass-dark);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    color: var(--white);
}

/* Repli si backdrop-filter non supporté : on garde un fond opaque lisible
   plutôt qu'un bloc transparent illisible. */
@supports not (backdrop-filter: blur(2px)) {
    .nvii-glass       { background: rgba(255, 255, 255, 0.96); }
    .nvii-glass--dark { background: rgba(15, 95, 115, 0.96); }
}

/* ══════════════════════════════════════
   2. CARTE PREMIUM — barre animée (DPM)
   La barre supérieure se déploie au survol : signature DPM,
   absente du socle NVI Facility.
   ══════════════════════════════════════ */

.nvii-card-premium {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: transform 0.4s var(--ease-premium),
                box-shadow 0.4s var(--ease-premium);
}

.nvii-card-premium::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg,
                var(--card-accent, var(--red)),
                var(--red-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease-premium);
}

.nvii-card-premium:hover,
.nvii-card-premium:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.nvii-card-premium:hover::before,
.nvii-card-premium:focus-within::before {
    transform: scaleX(1);
}

/* ══════════════════════════════════════
   3. SECTIONS SOMBRES À LUEUR — emprunt N2M
   Rompt franchement avec le « tout clair » du socle : on alterne
   des respirations sombres qui donnent le registre corporate premium.
   ══════════════════════════════════════ */

.nvii-section--dark {
    position: relative;
    background: var(--surface-dark);
    color: var(--white);
    overflow: hidden;
    isolation: isolate;
}

.nvii-section--ink-2 {
    background: var(--surface-dark-2);   /* variante chaude DPM */
}

/* Lueur radiale discrète — le marqueur N2M. Opacité volontairement
   basse : on veut une profondeur, pas un effet « gaming ». */
.nvii-section--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 80% at 100% 0%, var(--glow-red), transparent 60%),
        radial-gradient(90% 70% at 0% 100%, var(--teal-glow), transparent 65%);
    pointer-events: none;
}

.nvii-section--dark h1,
.nvii-section--dark h2,
.nvii-section--dark h3 { color: var(--white); }

.nvii-section--dark p  { color: rgba(255, 255, 255, 0.78); }

/* Filet fin de séparation — N2M */
.nvii-hairline {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}

/* ══════════════════════════════════════
   4. MARQUEURS DE CRÉDIBILITÉ — teal de la charte
   Réservés à ce qui PROUVE : conformité Code du Travail, CSS/IPRES,
   certifications, chiffres clés. Jamais un bouton.
   ══════════════════════════════════════ */

.nvii-proof {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid rgba(27, 130, 155, 0.35);
    border-radius: 100px;
    background: rgba(27, 130, 155, 0.08);
    color: var(--teal-dark);
    font-family: var(--font-condensed);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nvii-section--dark .nvii-proof {
    color: var(--teal);
    border-color: rgba(27, 130, 155, 0.45);
}

.nvii-proof svg { width: 15px; height: 15px; flex: none; }

/* Chiffre clé : le nombre en teal, le libellé en neutre */
.nvii-stat__value {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    color: var(--teal);
    letter-spacing: -0.01em;
}

.nvii-stat__label {
    font-size: 0.9rem;
    color: var(--gray-mid);
    margin-top: 6px;
}

.nvii-section--dark .nvii-stat__label { color: rgba(255, 255, 255, 0.65); }

/* ══════════════════════════════════════
   5. TITRES — registre corporate
   Chakra Petch (substitut libre d'Equalize, la display de la charte) + filet
   rouge court : lecture « institutionnelle », loin du display arrondi du socle.
   ══════════════════════════════════════ */

.nvii-title-lead {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.05;
    text-transform: uppercase;
}

.nvii-title-lead::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 18px;
    background: var(--red);
}

.nvii-title-lead--center::after { margin-left: auto; margin-right: auto; }

.nvii-eyebrow {
    display: block;
    font-family: var(--font-condensed);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 10px;
}

/* ══════════════════════════════════════
   ACCENTS SUR SECTIONS BLEUES (D-025)
   Les sections sombres sont désormais BLEUES (--surface-dark #0F5F73).
   Le rouge ET le teal en TEXTE n'y contrastent plus (rouge 1.56, teal ~1.3).
   Sur ces sections, le texte d'accent passe donc en BLANC ; le rouge reste
   pour les FORMES (filet du titre, V, boutons pleins) où il est lisible.
   ══════════════════════════════════════ */
.nvii-section--dark .nvii-eyebrow { color: #fff; }

/* Marqueurs de crédibilité : teal invisible sur bleu → blanc */
.nvii-section--dark .nvii-proof {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
}
.nvii-section--dark .nvii-stat__value { color: #fff; }

/* Bouton outline sur bleu : contour + texte blanc, remplissage blanc au survol */
.nvii-section--dark .nvii-btn--outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}
.nvii-section--dark .nvii-btn--outline:hover {
    background: #fff;
    color: var(--surface-dark);
    border-color: #fff;
}

/* ══════════════════════════════════════
   6. ACCESSIBILITÉ
   ══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .nvii-card-premium,
    .nvii-card-premium::before {
        transition: none;
    }
    .nvii-card-premium:hover { transform: none; }
}

/* Sécurité : même en mode desktop, la nav ne doit jamais pousser
   le bouton CTA hors de l'écran ni le recouvrir. */
.header-main__inner .header-nav {
    min-width: 0;
}

.header-main__inner .header-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   9. MOTIF SIGNATURE — LE « V » NVI + LA FENÊTRE  (D-023, selon la charte)
   ══════════════════════════════════════════════════════════════════════
   Système visuel de la charte (pages « Système visuel » / « Motifs ») :
   le « V » du logo est le device de marque — la charte le décrit comme le
   symbole de « l'ouverture et de la connexion ». Il se décline de trois
   manières, et de trois seulement :
     1. COULEUR UNIE  — le V plein, dans une couleur de la charte,
     2. LIGNE DE CONTOUR — le cadre HEXAGONAL qui dérive du V (pas une
        ellipse ronde : la charte dit « elliptique » mais le trace angulaire),
     3. FENÊTRE — la même forme en MASQUE, révélant une image à l'intérieur.

   ⚠️ RÈGLE DE RETENUE (charte : « à utiliser à très petite échelle,
   pour souligner un détail ») : le device est un ACCENT, jamais un papier
   peint. Peu d'emplois, sinon on détruit le registre corporate visé.
     · le V en petit → l'angle des cartes (couleur unie)
     · l'hexagone en grand et discret → le côté des sections sombres (contour)
     · la fenêtre → une image mise en avant (.nvii-window)
   La flèche des CTA reste une flèche : c'est une AFFORDANCE de navigation,
   pas la signature de marque — on ne la confond pas avec le V.

   Technique : le V est un SVG en `mask` → il prend la couleur du contexte
   (`currentColor` ou la couleur d'accent), sans image bitmap ni JS. */

:root {
    /* Le « V » du logo : lettre V symétrique (pas une coche), léger élan à
       droite comme le wordmark italique. Contour épais, angles francs. */
    --nvii-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 6L16 25L28 6' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    /* L'hexagone « ligne de contour » (vertical, dérivé du V). */
    --nvii-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Cpolygon points='60,3 117,38 117,112 60,147 3,112 3,38' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
}

/* — Le V, device réutilisable : prend la couleur courante — */
.nvii-vmark {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: var(--nvii-v) center / contain no-repeat;
            mask: var(--nvii-v) center / contain no-repeat;
}

/* — 1. Couleur unie : le V, en petit, dans l'angle des cartes —
   ::before porte déjà la barre supérieure animée : on utilise ::after. */
.nvii-card-premium::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 16px;
    height: 16px;
    background: var(--card-accent, var(--red));
    -webkit-mask: var(--nvii-v) center / contain no-repeat;
            mask: var(--nvii-v) center / contain no-repeat;
    opacity: 0.26;
    transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
    pointer-events: none;
}

.nvii-card-premium:hover::after,
.nvii-card-premium:focus-within::after {
    opacity: 1;
    transform: translateY(-2px);
}

/* — Flèche des CTA (affordance de navigation, PAS le motif de marque) —
   Uniquement sur les LIENS d'action ; `gap: 8px` du bouton gère l'espace. */
a.nvii-btn--primary::after,
a.nvii-btn--outline::after {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.35s var(--ease-premium);
}

a.nvii-btn--primary:hover::after,
a.nvii-btn--outline:hover::after {
    transform: rotate(45deg) translate(3px, -3px);
}

/* — 2. Ligne de contour : l'hexagone en grand, discret, sur le côté —
   Même couche que la lueur radiale (::before, z-index -1 sous
   `isolation: isolate`) : le device passe DERRIÈRE le contenu.
   Un SEUL hexagone, pas une trame : la charte réserve le device à l'accent. */
.nvii-section--dark::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    top: 50%;
    right: -72px;
    width: 300px;
    height: 375px;
    transform: translateY(-50%);
    background: var(--nvii-hex) center / contain no-repeat;
    opacity: 0.07;
}

/* — 3. Fenêtre : la forme du device en MASQUE sur une image —
   À poser sur une <img> ou un conteneur d'image mis en avant. */
.nvii-window {
    -webkit-clip-path: polygon(50% 0%, 100% 27%, 100% 73%, 50% 100%, 0% 73%, 0% 27%);
            clip-path: polygon(50% 0%, 100% 27%, 100% 73%, 50% 100%, 0% 73%, 0% 27%);
}

/* Accessibilité : aucun mouvement si l'utilisateur l'a demandé.
   Le motif reste visible — c'est l'animation qu'on retire, pas l'identité. */
@media (prefers-reduced-motion: reduce) {
    .nvii-card-premium::after,
    a.nvii-btn--primary::after,
    a.nvii-btn--outline::after {
        transition: none;
    }
    .nvii-card-premium:hover::after,
    .nvii-card-premium:focus-within::after {
        transform: none;
    }
    a.nvii-btn--primary:hover::after,
    a.nvii-btn--outline:hover::after {
        transform: rotate(45deg);
    }
}

/* §10 « Correctifs mode sombre » retiré (D-022) : plus de mode sombre. */