/* NZ'Studio — jetons + base, concaténés pour le site statique. Généré depuis /jetons. */

/* ===== polices ===== */
/* NZ'Studio — familles de caractères. Servies par Google Fonts (mêmes familles que NZ'Stratt). */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Yellowtail&family=Questrial&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root{
  /* Display : capitales condensées, ultra-bold. Titres uniquement. */
  --font-display:"Anton","Arial Narrow",Impact,sans-serif; /* @kind font */
  /* Corps : géométrique, une seule graisse. Tout le texte courant + UI. */
  --font-sans:"Questrial","Helvetica Neue",Arial,sans-serif; /* @kind font */
  /* Mono : chiffres, montants, eyebrows, libellés techniques. */
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* @kind font */
  /* Script : signature de marque. 1 usage par écran maximum. */
  --font-script:"Yellowtail","Brush Script MT",cursive; /* @kind font */
}


/* ===== couleurs ===== */
/* Strictement noir & blanc — valeurs reprises à l'identique du système NZ'Stratt. */
:root{
  /* Noir — la base : fonds, surfaces, élévations */
  --noir-1000:#000000;
  --noir-900:#0b0b0b;
  --noir-800:#141416;
  --noir-700:#1d1d20;
  --noir-600:#2a2a2e;
  --noir-500:#3a3a41;

  /* Ivoire & neutres — texte, surfaces claires, gris de support */
  --ivory-50:#faf9f6;
  --ivory-100:#f2f0ea;
  --ivory-200:#e5e1d7;
  --grey-400:#c9c9cf;
  --grey-500:#9a9aa1;
  --grey-600:#6e6e74;

  /* Alias sémantiques — ce que l'on utilise en pratique */
  --bg-canvas:var(--noir-1000);
  --surface-card:var(--noir-800);
  --surface-inset:var(--noir-700);
  --surface-raised:var(--noir-600);
  --accent:var(--ivory-50);
  --text-primary:var(--ivory-50);
  --text-secondary:var(--grey-400);
  --text-tertiary:var(--grey-500);
  --text-on-accent:var(--noir-1000);
  --border-hairline:rgba(250,249,246,.14);
  --border-strong:rgba(250,249,246,.34);
  --border-focus:var(--ivory-50);
  --hairline-rule:linear-gradient(90deg,rgba(250,249,246,0) 0%,rgba(250,249,246,.45) 50%,rgba(250,249,246,0) 100%); /* @kind color */
  --sheen-metal:linear-gradient(100deg,#6e6e74 0%,#c9c9cf 38%,#faf9f6 58%,#9a9aa1 100%); /* @kind color */
  --scrim-full:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.78) 62%,rgba(0,0,0,.94) 100%); /* @kind color */
  --scrim-flat:rgba(0,0,0,.62); /* @kind color */

  /* Inverse — planches et supports imprimés sur ivoire */
  --bg-canvas-inverse:var(--ivory-50);
  --surface-card-inverse:#ffffff;
  --text-primary-inverse:var(--noir-1000);
  --text-secondary-inverse:var(--grey-600);
  --border-hairline-inverse:rgba(0,0,0,.14);
}


/* ===== typographie ===== */
/* Échelle typographique — identique à NZ'Stratt. Display en clamp, corps en px. */
:root{
  --text-display-xl:clamp(56px,6.4vw,96px);
  --text-display-l:clamp(44px,4.8vw,72px);
  --text-display-m:clamp(36px,3.6vw,56px);
  --text-h1:44px;
  --text-h2:32px;
  --text-h3:24px;
  --text-body-l:18px;
  --text-body:16px;
  --text-body-s:14px;
  --text-caption:12px;
  --text-eyebrow:11px;

  --lh-display:0.92; /* @kind font */
  --lh-heading:1.06; /* @kind font */
  --lh-body:1.6; /* @kind font */
  --lh-tight:1.35; /* @kind font */

  --track-display:-0.01em; /* @kind font */
  --track-body:0; /* @kind font */
  --track-ui:0.08em; /* @kind font */
  --track-eyebrow:0.22em; /* @kind font */
  --track-nav:0.12em; /* @kind font */

  --weight-display:400; /* @kind font */ /* Anton n'a qu'une graisse */
  --weight-body:400; /* @kind font */
  --weight-mono:500; /* @kind font */
}


/* ===== espacements ===== */
/* Échelle d'espacement base 4 — générosité de blanc, rythme vertical large. */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --space-11:160px;

  --gutter:24px;
  --page-margin:clamp(24px,6vw,96px);
  --content-max:1200px;
  --measure:60ch; /* @kind other */
  --section-y:clamp(64px,10vw,160px); /* @kind spacing */
  --grid-columns:12; /* @kind other */
}


/* ===== rayons ===== */
/* Rayons — champs 8, cartes 20, contrôles pill. */
:root{
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;
  --border-width:1px; /* @kind other */
  --border-width-strong:2px; /* @kind other */
}


/* ===== elevation ===== */
/* Plat au repos ; l'ombre signale le flottant. */
:root{
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 2px 8px rgba(0,0,0,.55);
  --shadow-md:0 8px 24px rgba(0,0,0,.6);
  --shadow-lg:0 24px 64px rgba(0,0,0,.72);
  --shadow-glow:0 0 0 1px rgba(250,249,246,.4),0 0 32px rgba(250,249,246,.08);
  --focus-ring:0 0 0 2px var(--noir-900),0 0 0 4px var(--ivory-50); /* @kind shadow */
}


/* ===== mouvement ===== */
/* Fondus et translations courtes · aucun rebond, aucune rotation. */
:root{
  --dur-fast:160ms; /* @kind other */
  --dur-base:240ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --dur-reveal:700ms; /* @kind other */
  --ease-standard:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --press-scale:0.985; /* @kind other */
}


/* ===== base ===== */
/* Réglages de base — appliqués par les planches et les kits. */
:root{color-scheme:dark}
.nz-root{background:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
.nz-root a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--border-hairline);transition:border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard)}
.nz-root a:hover{border-color:var(--border-strong);opacity:.86}
.nz-eyebrow{font-family:var(--font-mono);font-size:var(--text-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-secondary)}
.nz-display{font-family:var(--font-display);line-height:var(--lh-display);letter-spacing:var(--track-display);text-transform:uppercase}
.nz-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.nz-rule{height:1px;border:0;background:var(--hairline-rule)}
/* Thème clair — à poser sur toute section à fond ivoire. Réécrit les alias, les composants suivent. */.nz-clair{--bg-canvas:var(--ivory-50);--surface-card:#ffffff;--surface-inset:var(--ivory-100);--surface-raised:var(--ivory-200);--accent:var(--noir-1000);--text-primary:var(--noir-1000);--text-secondary:var(--grey-600);--text-tertiary:var(--grey-500);--text-on-accent:var(--ivory-50);--border-hairline:rgba(0,0,0,.14);--border-strong:rgba(0,0,0,.34);--border-focus:var(--noir-1000);--hairline-rule:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,0) 100%); /* @kind color */--shadow-glow:0 0 0 1px rgba(0,0,0,.4),0 0 32px rgba(0,0,0,.06);--focus-ring:0 0 0 2px var(--ivory-50),0 0 0 4px var(--noir-1000);background:var(--bg-canvas);color:var(--text-primary)}

/* — Animations — fondus et translations courtes. Aucun rebond, aucune rotation. */
@keyframes nz-apparait{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes nz-fondu{from{opacity:0}to{opacity:1}}
/* Apparition au scroll : posée par ressources/reveal.js */
.nz-reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.nz-reveal.est-visible{opacity:1;transform:none}
/* Texte : chaque ligne monte un peu plus franchement que les blocs, avec un fondu plus long */
.nz-reveal-ligne{transform:translateY(22px);transition-duration:var(--dur-slow),var(--dur-slow)}
/* Liens de navigation : filet qui se déplie au survol */
.nz-root header nav a{position:relative;padding-bottom:4px}
.nz-root header nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-standard)}
.nz-root header nav a:hover::after,.nz-root header nav a[aria-current="page"]::after{transform:scaleX(1)}
/* Cartes cliquables : le filet s'éclaircit, la surface monte de 2 px */
.nz-root section a>div{transition:transform var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.nz-root section a:hover>div{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.nz-root section a:active>div{transform:scale(var(--press-scale))}
/* Contrôles : pression uniforme */
.nz-root button:active,.nz-root a[role="button"]:active{transform:scale(var(--press-scale))}
.nz-root button{transition:transform var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard)}
/* Champs : le filet s'affirme au focus */
.nz-root input,.nz-root textarea,.nz-root select{transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.nz-root input:focus,.nz-root textarea:focus,.nz-root select:focus{outline:none;border-color:var(--border-focus)}
@media (prefers-reduced-motion:reduce){
.nz-reveal,.nz-reveal.est-visible,.nz-reveal-ligne{opacity:1;transform:none;transition:none}
.nz-root section a:hover>div,.nz-root section a:active>div,.nz-root button:active{transform:none}
.nz-root header nav a::after{transition:none}
}

/* — Animations, deuxième couche — */
/* Bandeau défilant : se met en pause au survol */
.nz-marquee:hover{animation-play-state:paused}
/* Avis clients : colonnes qui montent en boucle — même principe que le bandeau, en vertical.
   La piste contient deux fois la même liste ; elle remonte d'exactement une moitié, donc la boucle
   ne se voit pas. Le padding bas vaut l'écart entre les cartes, sinon le raccord saute. */
@keyframes nz-monte-avis{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.nz-avis-defile{max-height:min(740px,82vh);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%)}
.nz-colonne-avis{--duree-avis:20s /* @kind other */;flex:1 1 0;min-width:0;max-width:360px}
.nz-colonne-avis-piste{display:flex;flex-direction:column;gap:24px;padding-bottom:24px;animation:nz-monte-avis var(--duree-avis) linear infinite;will-change:transform}
/* Les deux exemplaires de la liste. Mise en page ici et non en style en ligne, sinon le
   display:none du repli sans animation ne peut pas l'emporter sur l'attribut style. */
.nz-avis-groupe{display:flex;flex-direction:column;gap:24px}
.nz-colonne-avis:hover .nz-colonne-avis-piste,.nz-colonne-avis:focus-within .nz-colonne-avis-piste{animation-play-state:paused}
/* Garde-fou mobile : une seule colonne visible, même si le calcul JS a lu la largeur
   avant que la balise viewport ne soit appliquée (Safari iOS peut renvoyer la largeur
   du viewport de mise en page — souvent 980px — au tout premier rendu). */
@media (max-width:767px){
.nz-avis-defile{flex-direction:column;align-items:stretch}
.nz-colonne-avis{max-width:none;width:100%}
.nz-colonne-avis:nth-child(n+2){display:none}
}
@media (prefers-reduced-motion:reduce){
/* Sans mouvement : les colonnes redeviennent des listes fixes, sans doublon ni fondu. */
.nz-avis-defile{max-height:none;-webkit-mask-image:none;mask-image:none}
.nz-colonne-avis-piste{animation:none;padding-bottom:0}
.nz-avis-copie{display:none}
}
/* En-tête : se compacte au défilement */
.nz-root header{transition:padding var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.nz-root header.est-compact{padding-top:12px;padding-bottom:12px;box-shadow:var(--shadow-md);border-bottom-color:var(--border-strong)}
/* Jauge de défilement, en haut de page */
.nz-jauge{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ivory-50);z-index:50;transition:width 90ms linear;pointer-events:none}
/* Variante collée au bas de l'en-tête, sur toute la largeur : repère de progression dans la page. */
.nz-jauge-entete{position:absolute;top:auto;bottom:0;height:2px;z-index:1}
/* Retour en haut */
.nz-haut{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);width:48px;height:48px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--noir-1000);color:var(--ivory-50);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:40;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.nz-haut.est-visible{opacity:1;transform:none;pointer-events:auto}
.nz-haut:hover{background:var(--ivory-50);color:var(--noir-1000);border-color:var(--ivory-50)}
.nz-haut:active{transform:scale(var(--press-scale))}
/* Variantes d'apparition : la direction alterne d'un bloc à l'autre */
.nz-reveal.nz-de-gauche{transform:translateX(-18px)}
.nz-reveal.nz-de-droite{transform:translateX(18px)}
.nz-reveal.nz-echelle{transform:scale(.985)}
.nz-reveal.est-visible{transform:none}
/* Titres display : apparition ligne par ligne, au chargement */
@keyframes nz-monte{from{transform:translateY(105%)}to{transform:none}}
.nz-ligne{display:block;overflow:hidden;padding:.14em 0 .1em;margin:-.14em 0 -.1em}
.nz-ligne>span{display:block;animation:nz-monte 760ms var(--ease-out) both}
/* Histoire : portrait + texte, asymétrique sur desktop ; empilés sous 700px (les fr seuls
   ne s'empilent jamais, ils se contentent de rétrécir chaque colonne). */
.nz-histoire-duo{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:700px){.nz-histoire-duo{grid-template-columns:1fr}}
/* Bandeau d'accueil : texte à gauche, portable 3D à droite ; empilés sous 1000px. */
.nz-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.04fr);gap:clamp(12px,1.4vw,24px);align-items:center}
@media (max-width:1000px){
.nz-hero{grid-template-columns:1fr}
.nz-hero>div:last-child{order:2;height:320px;margin-top:24px}
}
/* Icônes de bouton : glissent au survol */
.nz-root button svg,.nz-root a svg{transition:transform var(--dur-base) var(--ease-standard)}
.nz-root button:hover svg,.nz-root a:hover svg{transform:translateX(3px)}
/* Étiquettes de filtre */
.nz-root span[style*="cursor: pointer"]>span{transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
/* Emplacements d'image : léger zoom arrière à l'apparition */
.nz-media{overflow:hidden}
.nz-media>*{transition:transform var(--dur-reveal) var(--ease-out)}
/* Accordéon : ouverture en hauteur */
.nz-repli{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ease-standard),opacity var(--dur-base) var(--ease-standard);opacity:0}
.nz-repli.est-ouvert{grid-template-rows:1fr;opacity:1}
.nz-repli>*{overflow:hidden;min-height:0}
@media (prefers-reduced-motion:reduce){
.nz-marquee{animation:none}
.nz-jauge,.nz-haut{transition:none}
.nz-ligne>span{animation:none}
.nz-root button:hover svg,.nz-root a:hover svg{transform:none}
.nz-repli{transition:none}
}

/* — Animations de la page d'accueil — */
@keyframes nz-entre{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes nz-filet{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes nz-pouls{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes nz-descend{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
/* Entrée du hero, cascade */
.nz-entre{animation:nz-entre 760ms var(--ease-out) both}
/* Filet qui se trace */
.nz-trace{transform-origin:left;animation:nz-filet 900ms var(--ease-out) both}
/* Invitation à défiler, en bas du hero */
.nz-defiler{display:inline-flex;flex-direction:column;align-items:center;gap:10px}
.nz-defiler i{display:block;width:1px;height:38px;background:currentColor;animation:nz-descend 1.6s var(--ease-standard) infinite alternate}
.nz-defiler span{animation:nz-pouls 2.4s var(--ease-standard) infinite}
/* Étiquette de métier : le numéro glisse, l'icône s'inverse */
.nz-root a:hover .nz-pastille{background:var(--text-primary);color:var(--bg-canvas);border-color:var(--text-primary)}
.nz-pastille{transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
/* Étape de méthode : le filet supérieur se trace à l'apparition */
.nz-etape{position:relative}
.nz-etape::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--border-strong);transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--ease-out)}
.nz-etape.est-visible::before,.est-visible .nz-etape::before{transform:scaleX(1)}
/* Chiffres clés : le filet sous le chiffre s'étire */
.nz-stat-filet{display:block;height:1px;background:var(--border-strong);transform:scaleX(0);transform-origin:left;transition:transform 700ms var(--ease-out)}
.est-visible .nz-stat-filet{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
.nz-entre,.nz-trace,.nz-defiler i,.nz-defiler span{animation:none}
.nz-etape::before,.nz-stat-filet{transform:none;transition:none}
}

/* — Menu principal plein écran — logo à gauche, bouton à droite. À l'ouverture, trois panneaux
   glissent depuis la droite, puis les liens montent un à un ; les motifs suivent le survol.
   L'en-tête passe au-dessus du voile pour que le bouton reste cliquable, menu ouvert. */
.nz-entete{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px clamp(24px,4vw,64px);background:var(--noir-1000);border-bottom:1px solid var(--border-hairline)}
.nz-root .nz-entete-logo{display:flex;border-bottom:0}
.nz-menu-bouton{display:inline-flex;align-items:center;gap:13px;padding:11px 22px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:none;color:var(--text-primary);cursor:pointer;font-family:var(--font-mono);font-size:var(--text-caption);font-weight:var(--weight-mono);letter-spacing:var(--track-nav);text-transform:uppercase}
.nz-menu-bouton:hover{background:var(--ivory-50);color:var(--noir-1000);border-color:var(--ivory-50)}
.nz-menu-bouton-textes{display:block;height:1em;overflow:hidden;text-align:left}
.nz-menu-bouton-textes>span{display:block;line-height:1;transition:transform var(--dur-base) var(--ease-standard)}
.nz-menu-bouton.est-ouvert .nz-menu-bouton-textes>span{transform:translateY(-100%)}
/* Trois barres empilées, qui se croisent à l'ouverture : celle du milieu s'efface,
   les deux autres se rejoignent au centre et pivotent. */
.nz-menu-bouton-icone{position:relative;display:block;width:18px;height:12px;flex:none}
.nz-menu-bouton-icone>span{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform var(--dur-base) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard)}
.nz-menu-bouton-icone>span:nth-child(1){top:0}
.nz-menu-bouton-icone>span:nth-child(2){top:5px}
.nz-menu-bouton-icone>span:nth-child(3){top:10px}
.nz-menu-bouton.est-ouvert .nz-menu-bouton-icone>span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nz-menu-bouton.est-ouvert .nz-menu-bouton-icone>span:nth-child(2){opacity:0}
.nz-menu-bouton.est-ouvert .nz-menu-bouton-icone>span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
/* Voile et panneaux */
.nz-menu{position:fixed;inset:0;z-index:60;visibility:hidden;transition:visibility 0s linear var(--dur-slow)}
.nz-menu.est-ouvert{visibility:visible;transition-delay:0s}
.nz-menu-voile{position:absolute;inset:0;background:var(--scrim-flat);opacity:0;transition:opacity var(--dur-base) var(--ease-standard)}
.nz-menu.est-ouvert .nz-menu-voile{opacity:1}
.nz-menu-contenu{position:absolute;top:0;right:0;bottom:0;width:min(620px,100%);display:flex;align-items:center;overflow:hidden}
.nz-menu-panneau{position:absolute;inset:0;display:block;transform:translateX(101%);transition:transform var(--dur-slow) var(--ease-out)}
.nz-panneau-1{background:var(--noir-700)}
.nz-panneau-2{background:var(--noir-800)}
.nz-panneau-3{background:var(--noir-1000);border-left:1px solid var(--border-hairline)}
.nz-menu.est-ouvert .nz-menu-panneau{transform:none}
.nz-menu.est-ouvert .nz-panneau-2{transition-delay:.1s}
.nz-menu.est-ouvert .nz-panneau-3{transition-delay:.2s}
/* Motifs de fond, au survol d'un lien */
.nz-menu-formes{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.nz-menu-forme{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity var(--dur-base) var(--ease-standard)}
.nz-menu-forme.est-active{opacity:1}
.nz-menu-forme-element{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.nz-menu-forme.est-active .nz-menu-forme-element{opacity:1;transform:none}
/* Liens */
.nz-menu-liste{position:relative;z-index:2;width:100%;margin:0;padding:0 clamp(28px,5vw,64px);list-style:none;display:flex;flex-direction:column;gap:clamp(4px,1vw,10px)}
.nz-menu-item{overflow:hidden}
.nz-root .nz-menu-lien{display:block;padding:4px 0;border-bottom:0}
.nz-root .nz-menu-lien:hover{opacity:1}
.nz-menu-lien-texte{display:flex;align-items:center;font-family:var(--font-display);font-size:clamp(32px,5vw,60px);line-height:1.04;letter-spacing:var(--track-display);text-transform:uppercase;transform:translateY(140%) rotate(10deg);transform-origin:left top;transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-fast) var(--ease-standard)}
.nz-menu.est-ouvert .nz-menu-lien-texte{transform:none}
.nz-menu-lien:hover .nz-menu-lien-texte{opacity:.55}
.nz-menu-lien[aria-current="page"] .nz-menu-lien-texte{opacity:.45}
/* Page courante : une flèche devant le libellé. La gouttière est réservée sur tous les liens,
   sinon seul le lien courant se décalerait et les libellés ne seraient plus alignés. */
.nz-menu-lien-texte::before{content:"";flex:none;width:1.1em;font-family:var(--font-mono);font-size:.42em;line-height:1}
.nz-menu-lien[aria-current="page"] .nz-menu-lien-texte::before{content:"→"}
/* Notre méthode en frise horizontale : un rail, un point par étape, le jour et le texte dessous.
   L'apparition suit la chronologie — le rail se trace de gauche à droite, puis chaque point
   surgit à son tour, suivi de son texte, d'après le rang porté par --ordre. Tout est visible
   par défaut et n'est mis en retrait que tant que le bloc n'est pas révélé : sans JavaScript,
   la frise reste complète. */
.nz-rail{position:relative;margin-top:clamp(40px,5vw,64px)}
.nz-rail-ligne{position:absolute;left:0;right:0;top:6px;height:1px;background:var(--border-hairline);overflow:hidden}
.nz-rail-trace{display:block;width:100%;height:100%;background:var(--border-strong);transform-origin:left;transition:transform 1000ms var(--ease-out)}
.nz-reveal:not(.est-visible) .nz-rail-trace{transform:scaleX(0)}
.nz-rail-liste{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin:0;padding:0;list-style:none}
.nz-rail-etape{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
/* Le halo reprend le fond de la section : le rail passe derrière le point, jamais au travers. */
.nz-rail-point{width:13px;height:13px;border-radius:var(--radius-pill);background:var(--text-primary);box-shadow:0 0 0 6px var(--bg-canvas);transition:transform var(--dur-base) var(--ease-out);transition-delay:calc(var(--ordre) * 300ms + 260ms)}
.nz-reveal:not(.est-visible) .nz-rail-point{transform:scale(0)}
.nz-rail-jour{font-family:var(--font-mono);font-size:var(--text-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-tertiary)}
.nz-rail-titre{font-size:var(--text-caption);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-primary)}
.nz-rail-texte{margin:2px 0 0;max-width:34ch;color:var(--text-secondary);line-height:var(--lh-body)}
.nz-rail-jour,.nz-rail-titre,.nz-rail-texte{transition:opacity var(--dur-slow) var(--ease-standard),transform var(--dur-slow) var(--ease-out);transition-delay:calc(var(--ordre) * 300ms + 420ms)}
.nz-reveal:not(.est-visible) .nz-rail-jour,.nz-reveal:not(.est-visible) .nz-rail-titre,.nz-reveal:not(.est-visible) .nz-rail-texte{opacity:0;transform:translateY(12px)}
.nz-rail-note{margin:clamp(28px,3.5vw,44px) 0 0;max-width:none;font-size:var(--text-body-s);line-height:var(--lh-body);color:var(--text-tertiary)}
/* Sous 760 px, trois colonnes deviennent illisibles : les étapes s'empilent, le rail s'efface
   et le point passe en marge, à gauche de chaque étape. */
@media (max-width:760px){
.nz-rail-liste{grid-template-columns:minmax(0,1fr);gap:28px}
.nz-rail-ligne{display:none}
.nz-rail-etape{position:relative;padding-left:28px}
.nz-rail-point{position:absolute;left:0;top:5px;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
.nz-rail-trace,.nz-rail-point,.nz-rail-jour,.nz-rail-titre,.nz-rail-texte{transition:none}
.nz-reveal:not(.est-visible) .nz-rail-trace,.nz-reveal:not(.est-visible) .nz-rail-point{transform:none}
.nz-reveal:not(.est-visible) .nz-rail-jour,.nz-reveal:not(.est-visible) .nz-rail-titre,.nz-reveal:not(.est-visible) .nz-rail-texte{opacity:1;transform:none}
}

/* Colonne épinglée : le titre suit le défilement de sa section, puis repart avec elle.
   Exige alignItems:start sur la grille — une colonne étirée n'a aucune marge pour coller.
   Coupé en une seule colonne, où le titre resterait planté devant le contenu. */
.nz-colle{position:sticky;top:clamp(88px,11vh,132px)}
@media (max-width:760px){.nz-colle{position:static}}
.nz-faq-titre{position:sticky;top:clamp(88px,11vh,132px)}
@media (max-width:760px){.nz-faq-titre{position:static}}

/* FAQ en fil de discussion : la question est une bulle « reçue », la réponse une bulle « envoyée »,
   décalée et inversée. Les couleurs viennent des alias, donc la section tient en clair comme en noir.
   Le dépliage réutilise .nz-repli — aucune bibliothèque d'animation n'est nécessaire. */
.nz-faq-fil{display:flex;flex-direction:column;gap:8px}
.nz-faq-horodatage{margin-bottom:10px;font-family:var(--font-mono);font-size:var(--text-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-tertiary)}
.nz-faq-question{display:flex;align-items:center;gap:14px;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:var(--text-primary);font-family:var(--font-sans)}
.nz-faq-bulle{display:inline-block;padding:14px 20px;border:1px solid var(--border-hairline);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);background:var(--surface-inset);font-size:var(--text-body-l);line-height:var(--lh-tight);transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.nz-faq-question:hover .nz-faq-bulle,.nz-faq-question.est-ouvert .nz-faq-bulle{background:var(--surface-raised);border-color:var(--border-strong)}
/* Les signes se calent tous à droite plutôt que de suivre la fin de chaque bulle : sans cela,
   leur bord change à chaque question, au gré de la longueur du libellé. */
.nz-faq-signe{display:flex;flex:none;margin-left:auto;color:var(--text-tertiary);transition:color var(--dur-fast) var(--ease-standard)}
.nz-faq-question:hover .nz-faq-signe,.nz-faq-question.est-ouvert .nz-faq-signe{color:var(--text-primary)}
/* Le site fait glisser les icônes des boutons au survol : ici le signe doit rester en place. */
.nz-faq-question:hover svg{transform:none}
.nz-faq-reponse{margin:8px 0 6px clamp(28px,5vw,64px);max-width:46ch;padding:14px 20px;border-radius:var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);background:var(--text-primary);color:var(--bg-canvas);font-size:var(--text-body);line-height:var(--lh-body)}

/* Offres de l'accueil : six cartes, trois par ligne — un compte rond, plus besoin de centrage.
   Colonnes en minmax(0,1fr) : sans le 0, un mot long élargirait la colonne et ferait déborder. */
.nz-grille-offres{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1150px){
.nz-grille-offres{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
.nz-grille-offres{grid-template-columns:minmax(0,1fr)}
}
/* Boutons des offres : tous identiques, et inversion au survol — fond plein, texte inversé.
   !important est ici nécessaire, non par facilité : le composant bouton pose ses couleurs en
   style en ligne (background, color, border-color), qu'une règle ordinaire ne peut pas surcharger. */
.nz-grille-offres a:hover{background:var(--text-primary)!important;color:var(--bg-canvas)!important;border-color:var(--text-primary)!important;opacity:1}
/* Très petits écrans : le logo et le bouton tiennent tout juste, on resserre les marges. */
@media (max-width:420px){
.nz-entete{padding:16px;gap:12px}
.nz-menu-bouton{padding:10px 16px;gap:11px}
}
@media (prefers-reduced-motion:reduce){
/* Sans mouvement : le menu s'affiche d'un bloc, sans glissement ni décalage. */
.nz-menu,.nz-menu-voile,.nz-menu-panneau,.nz-menu-lien-texte,.nz-menu-forme,.nz-menu-forme-element,.nz-menu-bouton-icone>span,.nz-menu-bouton-textes>span{transition:none}
.nz-menu-panneau,.nz-menu-lien-texte{transform:none}
}