/* ══════════════════════════════════════════════════════════════════════════
   CHROME — barre de navigation, menus, pied de page
   Chargé sur TOUTES les pages depuis app/layout.tsx.

   Le vocabulaire de relief est celui de /ressources : un sol ivoire unique,
   des ombres chaudes, des faces extrudées qui contiennent des puits creusés.
   La barre en est l'exemple le plus dense — une pilule extrudée qui porte
   une gorge creusée, dans laquelle la page courante ressort en relief.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --nv-face:   var(--face);
  --nv-well:   var(--sol-creuse);
  --nv-out:    var(--neu-3);
  --nv-out-s:  var(--neu-2);
  --nv-out-xs: var(--neu-1);
  --nv-in:     var(--neu-in-3);
  --nv-in-s:   var(--neu-in-2);
  --nv-ink:    #1A1A1A;
  --nv-ink-2:  #5A544A;
  --nv-ink-3:  #928B7D;
  --nv-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --nv-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

  /* ── Les rayons ──
     Une famille rectangulaire à angles adoucis, plutôt que la pilule. Les
     valeurs décroissent avec la taille de la surface : la barre porte la
     gorge, qui porte les touches, et chaque niveau doit se lire comme
     posé DANS le précédent — un rayon égal ou plus grand à l'intérieur
     casse l'emboîtement. */
  --nv-r-barre:  14px;
  --nv-r-gorge:  10px;
  --nv-r-touche:  8px;
  --nv-r-bouton:  9px;
  --nv-r-panneau: 18px;
  --nv-r-item:   10px;
}

/* ══ LA BARRE ════════════════════════════════════════════════════════════ */

.nv {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  padding: 14px var(--gutter, 28px) 0;
  pointer-events: none;
}
.nv > * { pointer-events: auto; }

.nv-bar {
/* La barre n'est plus une surface : c'est une RÉGLETTE.

   Trois blocs autonomes posés sur la page — la marque, la gorge des liens,
   les actions — au lieu d'une pilule qui les enferme. Chaque bloc porte son
   propre relief ; entre eux, la page reste visible. Ce qui change avec le
   défilement n'est donc plus la barre, mais chaque plaque prise à part. */
  position: relative; max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; gap: 26px;
  height: 62px; padding: 0;
  background: none; box-shadow: none; border-radius: 0;
  transition: height 0.35s var(--nv-ease);
}
.nv--defile .nv-bar { height: 56px; }

/* Le vocabulaire commun aux deux plaques. Extrudées, puisqu'elles ne sont
   plus posées dans quoi que ce soit. */
.nv-piste, .nv-actions {
  background: var(--nv-face); box-shadow: var(--nv-out-s);
  transition: box-shadow 0.35s var(--nv-ease);
}
.nv--defile .nv-piste, .nv--defile .nv-actions { box-shadow: var(--nv-out); }

/* ── Marque ── */
/* En haut de page, la marque est à nu : elle respire sur le héros. Dès
   qu'on défile, elle reçoit son socle comme les deux autres blocs — sans
   quoi le contenu de la page lui passe dessus et la rend illisible, ce qui
   est arrivé au premier titre venu. */
.nv-brand {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  text-decoration: none; padding: 9px 16px 9px 12px; border-radius: var(--nv-r-gorge);
  background: none; box-shadow: none;
  transition: background 0.35s var(--nv-ease), box-shadow 0.35s var(--nv-ease);
}
.nv--defile .nv-brand { background: var(--nv-face); box-shadow: var(--nv-out); }
.nv--sombre.nv--defile .nv-brand {
  box-shadow: 0 14px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.12);
}
.nv--sombre.nv--defile .nv-mot { color: var(--nv-ink); }
.nv--sombre.nv--defile .nv-dots .nv-dot { fill: #1A1A1A; }
.nv--sombre.nv--defile .nv-dots .nv-d1 { fill: #6366F1; }
.nv--sombre.nv--defile .nv-dots .nv-d3, .nv--sombre.nv--defile .nv-dots .nv-d8 { fill: #FF91E4; }
.nv--sombre.nv--defile .nv-dots .nv-d5 { fill: #068FFF; }
.nv-dots .nv-dot { transition: transform 0.5s var(--nv-spring); transform-origin: 18px 18px; }
.nv-brand:hover .nv-dots .nv-dot { transform: scale(0.82); }
.nv-brand:hover .nv-dots .nv-d1,
.nv-brand:hover .nv-dots .nv-d3,
.nv-brand:hover .nv-dots .nv-d5,
.nv-brand:hover .nv-dots .nv-d8 { transform: scale(1.18); }
.nv-mot {
  white-space: nowrap;
  font-size: 16px; font-weight: 500; letter-spacing: 0.14em; color: var(--nv-ink);
  line-height: 1;
}

/* ── La gorge et ses touches ── */
/* Centrée sans sortir du flux.

   Première tentative : `position:absolute; left:50%`. Centrage parfait, mais
   la gorge cessait de participer à la mise en page — au sixième lien elle
   est passée SOUS la marque et par-dessus « Se connecter », qui s'est
   retrouvé tronqué. Un élément hors flux ne peut pas négocier sa place.

   Ici, les deux flancs reçoivent la même base élastique : ils occupent
   exactement la moitié de ce qui reste chacun, donc la gorge tombe au
   milieu de la BARRE, et si elle grandit encore ce sont les flancs qui
   cèdent, pas le voisin qui est recouvert. */
.nv-piste {
  display: flex; align-items: center; gap: 2px; flex: none;
  padding: 5px; border-radius: var(--nv-r-gorge);
}
.nv-lien {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer; font: inherit; text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: -0.004em; color: var(--nv-ink-2);
  padding: 9px 13px; border-radius: var(--nv-r-touche); white-space: nowrap;
  transition: color 0.25s var(--nv-ease), box-shadow 0.3s var(--nv-ease), background 0.3s var(--nv-ease);
}
.nv-lien:hover { color: var(--nv-ink); }
/* La plaque est extrudée : la touche courante se CREUSE dedans. C'est le
   geste inverse d'avant, et le bon ici — un relief posé sur un relief se
   lit comme deux objets empilés, un creux se lit comme une touche
   enfoncée. */
.nv-lien.est-actif,
.nv-lien.est-ouvert {
  color: var(--nv-ink); font-weight: 700;
  background: var(--nv-well); box-shadow: var(--nv-in-s);
}
.nv-lien:focus-visible { outline: 2px solid #068FFF; outline-offset: 2px; }
.nv-chev { width: 13px; height: 13px; opacity: 0.55; transition: transform 0.35s var(--nv-spring); }
.nv-lien.est-ouvert .nv-chev { transform: rotate(180deg); opacity: 1; }

/* ── Actions ── */
.nv-actions {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 5px 5px 5px 8px; border-radius: var(--nv-r-gorge);
}
/* La marque ne s'étire pas : maintenant qu'elle porte un fond au
   défilement, une base élastique la transformait en plaque de six cents
   pixels. C'est la gorge qui prend l'espace libre, également des deux
   côtés. */
.nv-brand { flex: none; }
.nv-piste { margin-inline: auto; }
.nv-ghost {
  white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--nv-ink-2); text-decoration: none;
  padding: 9px 13px; border-radius: var(--nv-r-touche);
  transition: color 0.25s var(--nv-ease), box-shadow 0.3s var(--nv-ease);
}
.nv-ghost:hover { color: var(--nv-ink); background: var(--nv-well); box-shadow: var(--nv-in-s); }
/* Le texte était en ivoire : sur du noir, il tirait au beige. Blanc franc.
   Et au doigt, le bouton passe au rose de la charte — le mouvement seul ne
   suffisait pas à dire que le clic était pris. */
.nv-cta {
  /* Une base élastique sur le flanc droit autorise ses enfants à se
     comprimer : sans ce `flex: none`, l'étiquette du bouton passait sur
     deux lignes dès que la gorge gagnait une entrée. */
  flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
  color: #FFFFFF; background: var(--nv-ink); text-decoration: none;
  padding: 11px 18px; border-radius: var(--nv-r-touche);
  box-shadow: 3px 4px 9px rgba(60,45,25,0.24);
  transition: transform 0.3s var(--nv-ease), box-shadow 0.3s var(--nv-ease),
              background 0.22s var(--nv-ease), color 0.22s var(--nv-ease);
}
.nv-cta svg { width: 14px; height: 14px; transition: transform 0.3s var(--nv-ease); }
.nv-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 8px 10px 22px rgba(60,45,25,0.34), -4px -4px 10px rgba(255,255,255,0.75); }
.nv-cta:hover svg { transform: translateX(3px); }
.nv-cta:active {
  transform: translateY(0); background: #FF91E4; color: #1A1A1A;
  box-shadow: inset 3px 4px 9px rgba(120,40,95,0.4), inset -2px -2px 6px rgba(255,255,255,0.4);
}
.nv-m-pied .nv-cta:active { background: #FF91E4; color: #1A1A1A; }
.nv-cta:focus-visible, .nv-ghost:focus-visible { outline: 2px solid #068FFF; outline-offset: 3px; }

.nv-burger {
  display: none; flex: none; width: 46px; height: 46px; border: 0; border-radius: var(--nv-r-gorge);
  background: var(--nv-face); box-shadow: var(--nv-out-s); color: var(--nv-ink);
  align-items: center; justify-content: center; cursor: pointer;
  transition: box-shadow 0.25s var(--nv-ease);
}
.nv-burger[aria-expanded="true"] { box-shadow: var(--nv-in-s); }

/* ══ LA BARRE SUR FOND SOMBRE ════════════════════════════════════════════

   Elle NE change PAS de robe. Une barre qui s'inverse au passage d'une
   section sombre se lit comme deux barres différentes, et le repère de
   navigation doit rester le même d'un bout à l'autre de la page.

   Ce qui change, c'est ce qui la détache du fond : l'ombre portée descend
   dans le noir et un liseré très fin cerne la pilule. Elle reste claire,
   elle se pose simplement au-dessus au lieu de flotter dans le vide.
   ═══════════════════════════════════════════════════════════════════════ */

.nv--sombre .nv-voile { background: rgba(12, 14, 20, 0.42); }

/* Sans plaque derrière elle, la marque est à nu : sur une section sombre,
   des points noirs et un mot en encre disparaissent. Eux seuls s'adaptent —
   les deux plaques, elles, restent claires. */
.nv--sombre .nv-mot { color: #EDEDEF; }
.nv--sombre .nv-dots .nv-dot { fill: #E4E4E7; }
.nv--sombre .nv-dots .nv-d1 { fill: #6366F1; }
.nv--sombre .nv-dots .nv-d3, .nv--sombre .nv-dots .nv-d8 { fill: #FF91E4; }
.nv--sombre .nv-dots .nv-d5 { fill: #068FFF; }
.nv--sombre .nv-piste, .nv--sombre .nv-actions, .nv--sombre .nv-burger {
  box-shadow: 0 14px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.12);
}

/* ══ LES MENUS ═══════════════════════════════════════════════════════════

   Un seul fond, qui se déforme d'un menu à l'autre. Faire disparaître un
   panneau pour en faire apparaître un autre coupe le geste en deux ; ici
   la carte reste et change de taille, ce qui se lit comme un seul objet
   qui répond. La taille est posée en pixels par le script, parce qu'aucune
   transition CSS n'existe entre deux `auto`.
   ═══════════════════════════════════════════════════════════════════════ */

.nv-scene {
  position: relative; max-width: 1320px; margin: 10px auto 0;
  pointer-events: none;
}
.nv-scene[hidden] { display: none; }

.nv-fond {
  position: absolute; top: 0; left: 50%;
  width: 0; height: 0; border-radius: var(--nv-r-panneau);
  background: var(--nv-face); box-shadow: var(--nv-out);
  transform: translateX(-50%) scale(0.97); opacity: 0;
  transition: width 0.44s var(--nv-ease), height 0.44s var(--nv-ease),
              opacity 0.28s var(--nv-ease), transform 0.44s var(--nv-spring);
}
.nv-scene.est-ouverte .nv-fond { opacity: 1; transform: translateX(-50%) scale(1); }

.nv-panneau {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0; padding: 14px;
  opacity: 0; pointer-events: none;
}
.nv-panneau[hidden] { display: none; }
.nv-panneau.est-visible { opacity: 1; pointer-events: auto; }
.nv-panneau-face { display: flex; gap: 10px; align-items: stretch; }

/* Les entrées entrent en cascade : c'est ce décalage, et non la vitesse,
   qui fait sentir que le panneau se déploie plutôt qu'il n'apparaît. */
.nv-panneau .nv-item, .nv-panneau .nv-mini, .nv-panneau .nv-vitrine, .nv-panneau .nv-col-titre {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.38s var(--nv-ease), transform 0.38s var(--nv-ease);
}
.nv-panneau.est-visible .nv-item,
.nv-panneau.est-visible .nv-mini,
.nv-panneau.est-visible .nv-vitrine,
.nv-panneau.est-visible .nv-col-titre { opacity: 1; transform: none; }
.nv-panneau.est-visible .nv-col:nth-child(1) > * > *:nth-child(1) { transition-delay: 0.03s; }
.nv-panneau.est-visible .nv-col:nth-child(1) > * > *:nth-child(2) { transition-delay: 0.06s; }
.nv-panneau.est-visible .nv-col:nth-child(1) > * > *:nth-child(3) { transition-delay: 0.09s; }
.nv-panneau.est-visible .nv-col:nth-child(1) > * > *:nth-child(4) { transition-delay: 0.12s; }
.nv-panneau.est-visible .nv-col:nth-child(2) { transition-delay: 0.06s; }
.nv-panneau.est-visible .nv-vitrine { transition-delay: 0.14s; }

.nv-col { display: flex; flex-direction: column; min-width: 268px; padding: 8px 6px; }
.nv-col + .nv-col { border-left: 1px solid rgba(120,120,128,0.16); padding-left: 18px; margin-left: 6px; }
/* Les secteurs tiennent sur UNE colonne. Sur deux, « Cabinet paramédical »
   et « E-commerce et boutique » passaient à la ligne et les rangs se
   décalaient les uns par rapport aux autres. Huit entrées d'un seul tenant
   font par ailleurs exactement la hauteur des quatre entrées illustrées de
   la colonne de gauche. */
.nv-col--compacte { min-width: 236px; }
.nv-col-titre {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nv-ink-3); padding: 0 12px; margin-bottom: 12px;
}
.nv-col-liste { display: flex; flex-direction: column; gap: 2px; }
.nv-col--compacte .nv-col-liste { gap: 0; }
.nv-col--compacte .nv-mini { padding: 7px 12px; }

.nv-item {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 11px 12px; border-radius: var(--nv-r-item); text-decoration: none; color: var(--nv-ink);
  transition: box-shadow 0.28s var(--nv-ease), background 0.28s var(--nv-ease);
}
.nv-item-ic {
  flex: none; width: 38px; height: 38px; border-radius: 8px;
  display: grid; place-items: center; color: var(--nv-ink-2);
  background: var(--nv-well); box-shadow: var(--nv-in-s);
  transition: color 0.28s var(--nv-ease), box-shadow 0.28s var(--nv-ease);
}
.nv-item-ic svg { width: 18px; height: 18px; }
.nv-item-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nv-item-txt strong { font-size: 13.5px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.3; }
.nv-item-txt span { font-size: 12px; line-height: 1.45; color: var(--nv-ink-3); }
.nv-item:hover { background: var(--nv-well); box-shadow: var(--nv-in-s); color: var(--nv-ink); }
.nv-item:hover .nv-item-ic { color: #068FFF; background: var(--nv-face); box-shadow: var(--nv-out-xs); }
.nv-item:focus-visible, .nv-mini:focus-visible, .nv-vitrine:focus-visible { outline: 2px solid #068FFF; outline-offset: 2px; }

.nv-mini {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: 8px; text-decoration: none;
  font-size: 12.5px; font-weight: 600; color: var(--nv-ink-2);
  transition: box-shadow 0.28s var(--nv-ease), color 0.28s var(--nv-ease), background 0.28s var(--nv-ease);
}
.nv-mini > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-mini-go { flex: none; width: 12px; height: 12px; opacity: 0; transform: translateX(-4px); transition: all 0.28s var(--nv-ease); }
.nv-mini:hover { color: var(--nv-ink); background: var(--nv-well); box-shadow: var(--nv-in-s); }
.nv-mini:hover .nv-mini-go { opacity: 0.6; transform: none; }

/* ── La vitrine : la carte de droite, teintée, avec le motif à neuf points. ── */
.nv-vitrine {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; width: 264px; flex: none;
  padding: 22px 22px 20px; border-radius: 14px; text-decoration: none; color: var(--nv-ink);
  background: var(--tint, var(--sol-creuse));
  transition: transform 0.35s var(--nv-ease), box-shadow 0.35s var(--nv-ease);
}
/* Les cinq accents, disponibles pour n'importe quelle vitrine. */
.nv-vitrine.a-pink   { --tint: var(--tint-rose);   --acc: #FF91E4; --acc-ink: #D45FB4; }
.nv-vitrine.a-blue   { --tint: var(--tint-bleu);   --acc: #068FFF; --acc-ink: #0570CC; }
.nv-vitrine.a-indigo { --tint: var(--tint-indigo); --acc: #6366F1; --acc-ink: #4F52D9; }
.nv-vitrine.a-amber  { --tint: var(--tint-ambre);  --acc: #FF6B2B; --acc-ink: #D9500F; }
.nv-vitrine.a-green  { --tint: var(--tint-vert);   --acc: #00D084; --acc-ink: #009A61; }
.nv-vitrine:hover { transform: translateY(-3px); box-shadow: var(--nv-out-s); }
.nv-vitrine-tag {
  align-self: flex-start; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--nv-ink-2);
  background: rgba(255,255,255,0.7); border-radius: 8px; padding: 5px 11px;
  box-shadow: inset 1px 1px 3px rgba(120,104,84,0.12);
}
.nv-vitrine-pts {
  position: absolute; top: 20px; right: 20px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; width: 56px; height: 56px;
  pointer-events: none;
}
.nv-vitrine-pts i { border-radius: 50%; background: var(--acc); opacity: 0.08; }
.nv-vitrine-pts i:nth-child(1), .nv-vitrine-pts i:nth-child(3),
.nv-vitrine-pts i:nth-child(5), .nv-vitrine-pts i:nth-child(8) { opacity: 0.42; }
.nv-vitrine strong {
  margin-top: auto; padding-top: 40px;
  font-size: 17px; font-weight: 800; line-height: 1.24; letter-spacing: -0.024em;
}
.nv-vitrine-txt { font-size: 12px; line-height: 1.5; color: var(--nv-ink-2); margin-top: 8px; }
.nv-vitrine-go {
  margin-top: 16px; align-self: flex-start;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: var(--acc-ink); background: rgba(255,255,255,0.75);
  box-shadow: 2px 2px 6px rgba(120,104,84,0.14), -2px -2px 6px rgba(255,255,255,0.8);
  transition: transform 0.3s var(--nv-ease);
}
.nv-vitrine-go svg { width: 14px; height: 14px; }
.nv-vitrine:hover .nv-vitrine-go { transform: translateX(3px); }

/* ── Le voile : la page recule, elle ne disparaît pas. ── */
.nv-voile {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(242,242,243,0.5); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.32s var(--nv-ease);
}
.nv-voile[hidden] { display: none; }
.nv-voile.est-visible { opacity: 1; }

/* ══ LE MENU MOBILE ══════════════════════════════════════════════════════ */

.nv-mobile {
  max-width: 1320px; margin: 10px auto 0;
  max-height: calc(100vh - 110px); overflow-y: auto;
  opacity: 0; transform: translateY(-10px);
  transition: opacity 0.32s var(--nv-ease), transform 0.32s var(--nv-ease);
}
.nv-mobile[hidden] { display: none; }
.nv-mobile.est-ouvert { opacity: 1; transform: none; }
.nv-m-face {
  padding: 14px; border-radius: var(--nv-r-panneau);
  background: var(--nv-face); box-shadow: var(--nv-out);
}
.nv-m-groupe + .nv-m-groupe { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(120,120,128,0.14); }
.nv-m-lien {
  display: block; padding: 13px 16px; border-radius: var(--nv-r-item);
  font-size: 15px; font-weight: 700; letter-spacing: -0.015em; color: var(--nv-ink); text-decoration: none;
}
.nv-m-lien:active { box-shadow: var(--nv-in-s); }
.nv-m-sous { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 0 6px 8px; }
.nv-m-sous a {
  padding: 9px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--nv-ink-2); text-decoration: none;
}
.nv-m-sous a:active { background: var(--nv-well); box-shadow: var(--nv-in-s); }
.nv-m-pied { display: flex; align-items: center; gap: 10px; padding: 12px 6px 4px; }
.nv-m-pied .nv-cta { flex: 1; justify-content: center; }

@media (max-width: 1080px) {
  .nv-piste, .nv-actions { display: none; }
  .nv-burger { display: inline-flex; }
  .nv-bar { justify-content: space-between; padding: 0 10px 0 18px; }
}
@media (min-width: 1081px) { .nv-mobile { display: none !important; } }

/* ══ LE PIED DE PAGE ═════════════════════════════════════════════════════ */

.ft-appel { padding: clamp(56px, 8vw, 96px) 0 0; background: var(--bg); }
.ft-plaque {
  position: relative; overflow: hidden;
  padding: clamp(40px, 6vw, 68px) clamp(28px, 5vw, 64px);
  border-radius: 22px; text-align: center;
  background: #16181F;
  box-shadow: 16px 20px 44px rgba(50,38,22,0.3), -10px -10px 26px rgba(255,255,255,0.85);
}
.ft-plaque h2 {
  font-size: clamp(26px, 3.8vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -0.035em;
  color: #EDEDEF; margin: 0; text-wrap: balance;
}
.ft-plaque p {
  font-size: clamp(14.5px, 1.4vw, 16.5px); line-height: 1.6; color: rgba(242,242,243,0.62);
  margin: 18px auto 0; max-width: 52ch;
}
.ft-plaque-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
/* Le rose de la charte plutôt que l'ivoire : sur une plaque sombre, un
   bouton ivoire tire au beige et se confond avec le texte qui l'entoure.
   L'encre foncée sur ce rose passe largement les seuils de contraste. */
.ft-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: 11px; text-decoration: none;
  font-size: 15px; font-weight: 700; letter-spacing: -0.012em;
  color: #16181F; background: #FF91E4;
  box-shadow: 0 10px 26px rgba(255,145,228,0.28), 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.3s var(--nv-ease), box-shadow 0.3s var(--nv-ease), background 0.25s var(--nv-ease);
}
.ft-btn svg { width: 15px; height: 15px; transition: transform 0.3s var(--nv-ease); }
.ft-btn:hover { transform: translateY(-2px); color: #16181F; background: #FFA6EA; box-shadow: 0 16px 38px rgba(255,145,228,0.38), 0 2px 6px rgba(0,0,0,0.3); }
.ft-btn:hover svg { transform: translateX(3px); }
.ft-btn:active { transform: translateY(0); background: #F07FD2; box-shadow: inset 3px 4px 9px rgba(120,40,95,0.45), inset -2px -2px 6px rgba(255,255,255,0.35); }
/* Le relief neumorphique tient aussi sur une surface sombre : l'ombre
   portée devient un noir plus profond, la lumière un blanc très dilué.
   Au repos la touche affleure ; sous le doigt elle s'enfonce. */
.ft-btn2 {
  display: inline-flex; align-items: center; padding: 15px 28px; border-radius: 11px;
  font-size: 15px; font-weight: 600; color: rgba(242,242,243,0.92); text-decoration: none;
  background: #1B1E26;
  box-shadow: 5px 6px 14px rgba(0,0,0,0.5), -4px -4px 12px rgba(255,255,255,0.055);
  transition: box-shadow 0.28s var(--nv-ease), color 0.28s var(--nv-ease),
              transform 0.28s var(--nv-ease), background 0.28s var(--nv-ease);
}
.ft-btn2:hover { color: #fff; transform: translateY(-2px); box-shadow: 7px 9px 20px rgba(0,0,0,0.55), -4px -4px 12px rgba(255,255,255,0.07); }
.ft-btn2:active {
  transform: translateY(0); color: rgba(242,242,243,0.86); background: #15171E;
  box-shadow: inset 5px 6px 13px rgba(0,0,0,0.62), inset -4px -4px 11px rgba(255,255,255,0.06);
}
.ft-btn:focus-visible, .ft-btn2:focus-visible { outline: 2px solid #068FFF; outline-offset: 4px; }

.ft { background: var(--bg); padding: clamp(56px, 8vw, 88px) 0 34px; }
.ft-grille {
  display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 30px;
  padding-bottom: 44px;
}
.ft-marque { display: flex; flex-direction: column; }
.ft-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; align-self: flex-start; }
.ft-desc { font-size: 13.5px; line-height: 1.65; color: var(--nv-ink-2); margin: 18px 0 0; max-width: 30ch; }
.ft-reseaux { display: flex; gap: 9px; margin-top: 22px; }
.ft-rs {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  color: var(--nv-ink-2); background: var(--nv-face); box-shadow: var(--nv-out-xs);
  transition: box-shadow 0.28s var(--nv-ease), color 0.28s var(--nv-ease), transform 0.28s var(--nv-ease);
}
.ft-rs svg { width: 17px; height: 17px; }
.ft-rs:hover { color: var(--nv-ink); transform: translateY(-2px); box-shadow: var(--nv-out-s); }
.ft-rs:focus-visible, .ft-tout:focus-visible { outline: 2px solid #068FFF; outline-offset: 3px; }

.ft-col { display: flex; flex-direction: column; min-width: 0; }
.ft-col-titre {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nv-ink-3); margin-bottom: 18px;
}
.ft-liens { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.ft-liens a {
  font-size: 13px; color: var(--nv-ink-2); text-decoration: none;
  transition: color 0.22s var(--nv-ease);
}
.ft-liens a:hover { color: var(--nv-ink); }
.ft-tout {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px; padding: 9px 15px; border-radius: 8px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; letter-spacing: -0.008em;
  color: var(--nv-ink-2); text-decoration: none;
  background: var(--nv-face); box-shadow: var(--nv-out-xs);
  transition: box-shadow 0.28s var(--nv-ease), color 0.28s var(--nv-ease);
}
.ft-tout svg { width: 11px; height: 11px; }
.ft-tout:hover { color: var(--nv-ink); box-shadow: var(--nv-in-s); }

.ft-bas {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid rgba(120,120,128,0.18);
}
.ft-copy { font-size: 12.5px; color: var(--nv-ink-3); margin: 0; }
.ft-copy a { color: inherit; text-decoration: none; }
.ft-copy a:hover { color: var(--nv-ink); }
.ft-drapeau { width: 15px; height: 11px; vertical-align: middle; margin: 0 2px; border-radius: 8px; display: inline-block; }
.ft-legal { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.ft-legal a, .ft-legal button {
  font: inherit; font-size: 12.5px; color: var(--nv-ink-3); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color 0.22s var(--nv-ease);
}
.ft-legal a:hover, .ft-legal button:hover { color: var(--nv-ink); }

@media (max-width: 1080px) {
  .ft-grille { grid-template-columns: repeat(3, 1fr); gap: 34px 24px; }
  .ft-marque { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ft-grille { grid-template-columns: repeat(2, 1fr); }
  .ft-plaque { border-radius: 18px; }
    .ft-bas { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .nv-bar, .nv-fond, .nv-panneau, .nv-panneau *, .nv-voile, .nv-mobile,
  .nv-cta, .ft-btn, .ft-rs, .nv-dots .nv-dot { transition: none !important; }
  .nv-cta:hover, .ft-btn:hover, .ft-rs:hover, .nv-vitrine:hover { transform: none; }
}