/* ============================================================
   NEXUS VORTEX — RESPONSIVE
   Mobile < 768 · Tablette 768-1023 · Desktop 1024-1439 · Large >= 1440
   Le mobile n'est pas une reduction du desktop : moins
   d'animations, moins de parallax, hierarchie resserree.
   ============================================================ */

/* ============================================================
   LARGE DESKTOP (>= 1440px)
   ============================================================ */
@media (min-width:1440px){
  .nv-hero__symbol{right:-4%}
}

/* ============================================================
   TABLETTE ET EN DESSOUS (< 1024px)
   La navigation passe en menu plein ecran.
   ============================================================ */
@media (max-width:1023px){
  :root{
    --nv-header-h:80px;
    --nv-header-h-compact:64px;
  }

  .nv-nav{display:none}
  .nv-burger{display:block}

  /* Grille 8 colonnes */
  .nv-grid{grid-template-columns:repeat(8,minmax(0,1fr))}

  .nv-split{display:flex;flex-direction:column;gap:var(--nv-s5)}
  .nv-split__main,
  .nv-split__aside{grid-column:auto}

  /* Contact : le formulaire passe en premier, l'echange direct en dessous */
  .nv-contact{grid-template-columns:minmax(0,1fr);gap:var(--nv-s6)}
  .nv-direct{position:static}

  .nv-hero{min-height:auto;padding-block:calc(var(--nv-header-h) + var(--nv-s7)) var(--nv-s7)}
  .nv-hero__symbol{
    right:-22%;
    width:min(88vw,560px);
    opacity:.1;
  }
  .nv-js .nv-hero.is-in .nv-hero__symbol{opacity:.1}

  .nv-footer__grid{grid-template-columns:1fr 1fr}
  .nv-footer__brand{grid-column:1 / -1}

  /* Parallax desactive : trop couteux et peu lisible au doigt */
  .nv-parallax{transform:none!important}

  /* Le parcours passe a la verticale */
  .nv-journey{padding-left:var(--nv-s5)}
  .nv-journey__track{
    left:0;top:6px;bottom:6px;right:auto;
    width:1px;height:auto;
  }
  .nv-journey__fill{width:100%;height:var(--p,0%);transition:height 140ms linear}
  .nv-journey__list{grid-template-columns:1fr;gap:var(--nv-s4)}
  .nv-journey__step{padding-top:0}
  .nv-journey__step::before{left:calc(-1 * var(--nv-s5) - 5px);top:1px}

  /* Formules empilees. minmax(0,1fr) et non 1fr : sans cela la piste ne peut
     pas descendre sous la largeur mini de son contenu et deborde. */
  .nv-formules{grid-template-columns:minmax(0,1fr)}

  /* References : 3 marques par ligne (5 logos -> 3 + 2) */
  .nv-refs{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--nv-s5) var(--nv-gap)}

  /* Motif du hero : recentre derriere le texte */
  .nv-hero-motif{
    right:auto;left:50%;
    translate:-50% -50%;
    width:min(96vw,620px);
    opacity:.1;
  }
  .nv-js .nv-hero.is-in .nv-hero-motif{opacity:.1;animation:none}
}

/* ============================================================
   MOBILE (< 768px)
   ============================================================ */
@media (max-width:767px){
  :root{
    --nv-lh-body:1.6;
    --nv-gap:20px;
  }

  /* Hero : 85-95svh, titre court, symbole en arriere-plan */
  .nv-hero{min-height:88svh}
  .nv-hero__symbol{
    right:auto;
    left:50%;
    top:44%;
    translate:-50% -50%;
    width:132vw;
    opacity:.07;
  }
  .nv-js .nv-hero__symbol{transform:translate(-50%,-50%) rotate(-9deg) scale(.94)}
  .nv-js .nv-hero.is-in .nv-hero__symbol{
    opacity:.07;
    transform:translate(-50%,-50%) rotate(0deg) scale(1);
    /* Pas de derive continue sur mobile : priorite a la fluidite */
    animation:none;
  }
  .nv-hero__meta{
    margin-top:var(--nv-s6);
    flex-direction:column;
    align-items:flex-start;
    gap:var(--nv-s2);
    font-size:.9rem;
  }

  /* Boutons pleine largeur, faciles a atteindre.
     Le libelle peut passer a la ligne : en nowrap, un intitule long imposait
     une largeur mini au conteneur et faisait deborder la page. */
  .nv-btn-row{flex-direction:column;align-items:stretch;width:100%}
  .nv-btn{
    width:100%;
    white-space:normal;
    text-align:center;
    padding-inline:var(--nv-s3);
    min-height:52px;
  }

  /* Formules : moins de rembourrage, sinon le contenu n'a plus de place */
  .nv-formule{padding:var(--nv-s4) var(--nv-s3)}

  /* References : 2 par ligne, logos un peu plus bas.
     --h est reduit d'environ un tiers en conservant l'ecart entre les logos. */
  .nv-refs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nv-ref{min-height:88px;padding:var(--nv-s2)}
  .nv-ref__logo{max-height:calc(var(--h,48px) * .72)}
  .nv-cta-final .nv-btn-row{align-items:stretch}

  /* Grille 4 colonnes, cartes sur une colonne */
  .nv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nv-enjeux{grid-template-columns:1fr}
  .nv-enjeu{padding:var(--nv-s4) 0}
  .nv-method{grid-template-columns:1fr;gap:var(--nv-s4)}
  .nv-principes{grid-template-columns:1fr;gap:var(--nv-s4)}

  /* Expertises : la fleche disparait, la numerotation passe au-dessus */
  .nv-expertise{
    grid-template-columns:1fr;
    gap:12px;
    padding-block:var(--nv-s4);
  }
  .nv-expertise:hover{padding-left:0}
  .nv-expertise__go{display:none}

  .nv-steps-words{gap:var(--nv-s2) var(--nv-s4)}

  .nv-footer__grid{grid-template-columns:1fr;gap:var(--nv-s5)}
  .nv-footer__bottom{flex-direction:column;align-items:flex-start}

  /* Formulaire sur une seule colonne */
  .nv-form__row{grid-template-columns:1fr}
  .nv-timeline{padding-left:var(--nv-s4)}
  .nv-timeline__step::before{left:calc(-1 * var(--nv-s4) - 4px)}
  .nv-timeline__step{padding-bottom:var(--nv-s6)}

  /* Moins de mouvement : niveau d'animation vise 3/10 */
  .nv-js .nv-reveal{
    transform:translateY(18px);
    transition-duration:var(--nv-medium);
    transition-delay:calc(var(--i,0) * 60ms);
  }
}

/* ============================================================
   TRES PETITS ECRANS (<= 360px)
   ============================================================ */
@media (max-width:360px){
  :root{--nv-gutter:18px}
  .nv-brand__name{font-size:.95rem}
  .nv-brand .nv-symbol{width:32px;height:32px}
}

/* ============================================================
   SURVOL INDISPONIBLE (tactile)
   Les etats de survol ne doivent jamais masquer une information.
   ============================================================ */
@media (hover:none){
  .nv-expertise__go{opacity:1;transform:none}
  .nv-expertise:hover{padding-left:0}
  .nv-enjeu:hover{background:var(--bg)}
}