@import url('/assets/neybi-polices-ext.css');

/* ------------------------------------------------------------------
   NEYBI — surcharges appliquées à l'export statique.
   Un seul fichier, chargé par les 72 pages : point d'entrée unique
   pour tout ajustement, sans toucher au HTML généré par Framer.

   Pourquoi `!important` : le runtime Framer réapplique ses styles en
   ligne à l'hydratation (assets/animate/Video.*.mjs). Une déclaration
   `!important` dans une feuille d'auteur l'emporte sur un style en
   ligne ordinaire — seul moyen de tenir face au runtime.
   ------------------------------------------------------------------ */

/* Les 15 vidéos utilisées sont toutes en 720×1280, soit exactement
   9:16 : elles remplissent l'écran d'un téléphone avec un rognage
   négligeable. `cover` supprime les bandes noires — c'est le réglage
   des feeds verticaux, TikTok compris. La seule vidéo en paysage du
   dossier n'est référencée par aucune page. */
video {
  object-fit: cover !important;
  background-color: #0a0a0a !important;
}

/* ------------------------------------------------------------------
   Le feed vertical remplit l'écran
   ------------------------------------------------------------------
   À l'export, chaque volet est figé à 844 px de haut et la colonne
   média à 474 px de large — les valeurs du gabarit mobile. Sur un
   écran plus grand, ça laisse une bande noire en bas et deux sur les
   côtés.

   On rend les deux relatifs à l'écran : le volet prend toute la
   hauteur, la colonne prend le plus grand 9:16 qui y tient. Les
   surcouches (en-tête, rail, légende) sont positionnées en absolu
   dans le volet : elles suivent sans rien à changer.

   ⚠ Les noms de classe sont des empreintes générées par Framer. Un
   nouvel export peut les changer : à revérifier à ce moment-là.
   ------------------------------------------------------------------ */

.framer-ng6bwm {
  height: 100dvh !important;
}

.framer-lbqdp3,
.framer-lbqdp3 > .framer-14a8jcz-container,
.framer-lbqdp3 video {
  width: min(100vw, calc(100dvh * 9 / 16)) !important;
  height: 100dvh !important;
}

/* ------------------------------------------------------------------
   Accueil — le héros
   ------------------------------------------------------------------
   Les flèches et les puces ne sont plus masquées ici : elles ne sont
   plus rendues du tout. Les props du composant Slideshow ont été
   corrigées à la source, dans
   assets/animate/xczzStNmCuIqhuf-…CMb2ZEiN.mjs
   (showMouseControls et showProgressDots à faux, intervalle 2,6 s → 6 s,
   ressort remplacé par un fondu-glissé de 1,8 s).
   Sauvegarde de l'original : même nom, suffixe `.avant-neybi`.
   ------------------------------------------------------------------ */

/* Les deux liserés blancs du héros. */
.framer-16gj1tr,
.framer-14cpsvl {
  display: none !important;
}

/* Le voile de lisibilité : rétabli, mais deux fois plus léger.
   Sans lui le wordmark blanc disparaît sur les plans clairs ; trop
   dense, il éteint la vidéo. 0,28 en haut et en bas, presque rien au
   centre : le texte tient, l'image respire. */
.framer-1nfppuw {
  display: block !important;
  background-image: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.34) 0%,
    rgba(10, 10, 10, 0.10) 42%,
    rgba(10, 10, 10, 0.34) 100%
  ) !important;
}

/* Le fond du héros est blanc dans l'export : pendant le glissement du
   carrousel, il transparaît sur les bords et fait la « bande blanche ».
   On le passe à l'encre : un interstice devient invisible. */
.framer-1yibodr {
  background-color: #0a0a0a !important;
}

/* Les flèches sont aussi dans le HTML prérendu de l'export : le patch
   JS empêche de les recréer, ce filet les masque là où elles existent
   déjà. Les deux sont nécessaires. */
button[aria-label="Previous"],
button[aria-label="Next"] {
  display: none !important;
}

/* ------------------------------------------------------------------
   Accueil — la section sous le héros passe en blanc dominant
   ------------------------------------------------------------------
   Le fond noir venait de la racine de page ; la section elle-même
   n'en portait aucun. On lui en donne un, blanc, et on repasse toute
   son encre en noir. Le héros au-dessus n'est pas touché.
   ------------------------------------------------------------------ */

.framer-shly1x {
  background-color: #ffffff !important;
}

/* Titres, chapô, tagline, mentions : tout en encre. */
.framer-shly1x,
.framer-shly1x p,
.framer-shly1x h1,
.framer-shly1x h2,
.framer-shly1x span,
.framer-shly1x a {
  color: #0a0a0a !important;
}

/* Le filet sous le titre était blanc sur noir : il s'inverse aussi. */
.framer-shly1x hr,
.framer-shly1x [class*="framer-"][style*="background-color: rgb(255, 255, 255)"] {
  background-color: #0a0a0a !important;
}

/* Le CTA principal était blanc sur noir : sur fond blanc il
   disparaîtrait. Il devient noir — c'est l'inversion qui garde un
   bouton lisible et prioritaire.
   Les sélecteurs sont préfixés par la section : sans ça, la règle
   `.framer-shly1x span` plus haut est plus spécifique et repeint le
   libellé en noir sur noir. */
.framer-shly1x .framer-tbuHX {
  background-color: #0a0a0a !important;
}
.framer-shly1x .framer-tbuHX,
.framer-shly1x .framer-tbuHX *,
.framer-shly1x .framer-tbuHX span,
.framer-shly1x .framer-tbuHX p {
  color: #ffffff !important;
}