/* ==================================================================
   NEYBI — greffe.css : ce que le back-end ajoute au front

   Le front (CODE/, fil.css, neybi-overrides.css) appartient à Sady et
   n'est jamais modifié par neybi/. Ce fichier porte les quelques règles
   que la greffe Supabase a besoin d'ajouter ; prepare-framer.ts le copie
   dans public/greffe.css et l'insère avant </body> de chaque page, et
   app/fil/layout.tsx le lie après fil.css dans le hub.
   ================================================================== */

/* --- Transitions de vue entre documents (J3 pt 3) ---------------------
   Le parcours traverse deux mondes : les pages Framer servies en statique
   et le hub rendu par Next. Sans ceci, chaque passage est un écran blanc.
   `navigation: auto` pose un fondu, sans dépendance ni JavaScript. La
   règle doit être vue par les DEUX documents : c'est le cas puisque ce
   fichier est lié partout. */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* --- Squelettes pendant boot() (J3 pt 6) ------------------------------
   #liste-postes arrive vide : il faut le temps que l'adaptateur interroge
   Supabase, puis que donnees.js et fil.js s'évaluent. `:empty` fait tout
   le travail sans JavaScript : la règle cesse de s'appliquer dès que
   fil.js insère la première carte. Les jetons --raised / --hairline sont
   ceux du thème de fil.css, redéfinis en sombre. */
#liste-postes:empty {
  display: grid;
  gap: 14px;
  min-height: 60vh;
}
#liste-postes:empty::before,
#liste-postes:empty::after {
  content: "";
  display: block;
  height: 300px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--raised);
  animation: neybiAttente 1400ms ease-in-out infinite;
}
#liste-postes:empty::after { animation-delay: 200ms; }
@keyframes neybiAttente { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
body[data-motion="off"] #liste-postes:empty::before,
body[data-motion="off"] #liste-postes:empty::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #liste-postes:empty::before,
  #liste-postes:empty::after { animation: none; }
}

/* --- Une estimation ne se lit pas comme un relevé (J4) ----------------
   `products.breakdown_source` sépare depuis toujours `bon_de_commande`
   de `derive` ; l'interface affichait les deux à l'identique, sous un
   titre qui dit « [ Transparence ] ». Ces deux règles portent la note
   que prepare-hub.ts insère — celle de la fiche d'achat, qui dépend de
   la source, et celle de l'étiquette du fil, qui est toujours dérivée.
   Jetons de fil.css : --ink-3 est la couleur du texte de service. */
.dec-source {
  margin: -2px 0 10px;
  font-size: 11px;
  line-height: 16px;
  color: var(--ink-3);
  max-width: 46ch;
}
/* Le signe fait le travail avant que la phrase soit lue. */
.dec-source.dec-estime::before {
  content: "≈ ";
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.etq-note {
  margin-top: 6px;
  font-size: 10px;
  line-height: 14px;
  opacity: 0.5;
}

/* --- Sans archétype, une invitation plutôt qu'un trou (J5) ------------

   Trois écrans du hub supposaient l'archétype connu : dans la maquette
   de Sady, tout le monde avait déjà passé le quiz. Depuis que les
   comptes sont réels, quelqu'un qui s'inscrit n'en a pas — et c'est
   exactement lui qu'on regarde s'inscrire pendant une démonstration.

   Les crochets (o) à (q) de prepare-hub.ts posent le balisage ; ces
   règles l'habillent. Elles n'utilisent que des jetons de fil.css
   (--raised, --hairline, --ink, --ink-3, --nav-h), pour suivre les
   thèmes clair, sombre et archétype sans les redéclarer.

   `.aq-encres` — les cinq encres en bandeau — est repris tel quel de
   Sady : c'est le même signe sur les quatre écrans. */

/* 1. Les Looks. Le volet d'ouverture, au format plein cadre de la pile,
      sur le même noir que les vidéos. */
.volet-quiz {
  display: grid;
  place-items: center;
  padding: 0 20px;
}
.vq-carte {
  width: min(100%, 380px);
  padding: 22px 20px 24px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.14));
  border-radius: 20px;
  /* La pile est toujours noire, quel que soit le thème : la carte porte
     donc ses propres couleurs plutôt que --raised, qui vire au blanc en
     thème clair et ferait un pavé lumineux dans une pile sombre. */
  background: rgba(24, 24, 24, 0.92);
  color: #fff;
  text-align: left;
}
.vq-titre {
  margin: 0 0 6px;
  font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.vq-txt {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}
.vq-btn {
  display: block;
  text-align: center;
  text-decoration: none;
}
.vq-suite {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
}

/* 2. La boutique. Le bandeau d'encres au-dessus du titre du hero vide ;
      `.bq-hero-vide` de fil.css fait déjà le fond et les couleurs. */
.bq-hero-encres {
  margin-bottom: 12px;
}

/* 3. Le profil. Sans image d'archétype, `.pf-banniere` peignait 132 px
      de noir plein sous un dégradé sombre — une image cassée, à l'œil.
      Les cinq encres y tiennent la place de la bannière qu'on n'a pas
      encore choisie. Le fond revient sur le gris de surface : l'encre
      d'archétype n'existe pas encore, et la simuler en noir était le
      problème. */
.pf-banniere-vide {
  background: var(--raised, #f4f4f4);
}
.pf-banniere-vide::after {
  /* Le dégradé sombre de fil.css sert à faire lire du blanc sur une
     photo. Il n'y a pas de photo. */
  display: none;
}
.pf-banniere-encres {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.pf-banniere-encres i {
  display: block;
  width: 30px;
  height: 7px;
  border-radius: 999px;
}
@media (min-width: 700px) {
  .pf-banniere-encres i { width: 40px; height: 9px; }
}

/* --- L'attente de confirmation par e-mail ----------------------------
   La porte de Sady n'avait que deux états à afficher : une erreur, ou
   rien. Il en fallait un troisième — le compte est créé, l'adresse
   attend son lien — et il ne doit ressembler ni à l'un ni à l'autre :
   pas rouge, parce que rien n'a échoué ; pas invisible, parce que c'est
   la seule chose à faire à cet instant. On reprend l'encre d'archétype,
   celle que le hub utilise déjà pour ce qui est en cours. */
.po-attente {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--accent, #E8D44D);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #E8D44D) 12%, transparent);
  color: var(--ink, inherit);
  font-size: 13.5px;
  line-height: 1.55;
}
.po-attente b { font-weight: 600; word-break: break-all; }
.po-attente-fin { opacity: 0.7; font-size: 12.5px; }

/* --- Revenir quand on a déjà un compte -------------------------------
   Sous le bouton du quiz, au même rang que « Regarder d'abord ». Discret
   par construction : le premier écran ne doit pas demander un compte,
   il doit seulement cesser d'en interdire l'accès à qui en a un. */
.po-deja {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  opacity: 0.72;
}
.po-deja-lien {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent, currentColor);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.po-deja-lien:hover { opacity: 0.8; }

/* --- Garder sa couleur : l'invitation au compte -----------------------
   Reprend `.appel-quiz` de Sady sans rien y changer ; la classe en plus
   ne sert qu'à distinguer les deux dans une inspection. */
.appel-compte .aq-btn { cursor: pointer; }