/* ============================================================
   Compléments aux pages publiques.

   flux-public.css est un fichier LIVRÉ : on ne le modifie pas, pour qu'une
   nouvelle version puisse le remplacer tel quel. Tout ce que les captures
   montrent mais qu'il ne couvre pas vit ici — jauge de force du mot de passe,
   bouton « Afficher », séparateur « OU », sélecteur de langue, section des
   offres sur la page d'accueil.
   ============================================================ */

/* ---- Ossature commune ---- */
body { margin: 0; background: var(--bg); color: var(--text); }
#site, #auth { position: relative; z-index: 3; }
.hidden { display: none !important; }

/* Le décor est FIXE, pas absolu. En absolu il se cale sur le bloc conteneur
   initial, haut d'un écran : dès que la page défilait, le mur s'arrêtait au
   premier écran et le voile cessait de le couvrir. */
.fxp-wall, .fxp-veil { position: fixed; }

/* Le voile de la feuille livrée laisse les affiches trop lisibles au regard
   de la maquette, où elles ne sont qu'une texture. On en ajoute une couche,
   sans toucher au fichier livré. */
.fxp-veil {
  /* Le voile ne sert qu'à garantir la lisibilité du TEXTE, à gauche. À droite,
     là où il n'y a que des affiches, il s'efface presque entièrement — le
     cumul voile + filtre était ce qui rendait le mur invisible. */
  background:
    linear-gradient(100deg, var(--bg) 30%, rgba(18, 10, 13, .82) 50%, rgba(18, 10, 13, .30)),
    linear-gradient(0deg, var(--bg), rgba(18, 10, 13, .35) 42%, rgba(18, 10, 13, .12));
}
.fxp-tile { filter: saturate(.22) brightness(.34); }

/* Les liens de l'en-tête et du pied héritent sinon du bleu souligné par
   défaut du navigateur. */
#site a, #auth a { color: inherit; text-decoration: none; }
.fxp-logo:hover .fxp-logo-name { color: var(--text); }

/* La barre du haut pousse le menu au centre et les actions à droite. */
.fxp-menu { display: flex; gap: 22px; }
.fxp-menu a { font-size: 13.5px; color: var(--text-mut); text-decoration: none; }
.fxp-menu a:hover { color: var(--text); }
.fxp-head-acts { margin-left: auto; display: flex; align-items: center; gap: 18px; }

/* ---- Sélecteur de langue ---- */
.lang { display: flex; align-items: center; gap: 7px; }
.lang button {
  background: none; border: none; cursor: pointer; padding: 2px;
  font: inherit; font-size: 12.5px; color: var(--text-dim);
}
.lang button.on { color: var(--text); font-weight: 700; }
.lang-sep { color: var(--text-dim); font-size: 11px; }

/* ---- Mot de passe : révélation et force ----
   Le bouton vit DANS le champ ; le rembourrage droit de l'input lui réserve
   sa place, sans quoi le texte saisi passerait dessous. */
.fxp-pw { position: relative; }
.fxp-pw .fxp-input { padding-right: 76px; }
.fxp-pw-show {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--text-mut);
}
.fxp-pw-show:hover { color: var(--text); }

/* Quatre segments, remplis selon la force. Le libellé les double en toutes
   lettres : une couleur seule ne dit rien à qui ne la distingue pas. */
.fxp-strength { display: flex; gap: 6px; margin-top: 8px; }
.fxp-strength i {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--border-2); transition: background .2s ease;
}
.fxp-strength i.on { background: var(--ok); }
.fxp-strength-label { font-size: 12px; font-weight: 600; color: var(--ok); }

.fxp-label-row { display: flex; align-items: baseline; justify-content: space-between; }
.fxp-label-row a { font-size: 12px; color: var(--text-mut); text-decoration: none; }
.fxp-label-row a:hover { color: var(--text); }

/* ---- Case à cocher ---- */
.fxp-row { display: flex; align-items: center; gap: 10px; margin: 18px 0; }
.fxp-check {
  width: 18px; height: 18px; border-radius: 6px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--tile);
  font-size: 11px; color: transparent;
}
.fxp-check.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fxp-row label { font-size: 13px; color: var(--text-2); cursor: pointer; }

/* ---- Séparateur « OU » ---- */
.fxp-or {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0; font-size: 11.5px; color: var(--text-dim);
}
.fxp-or::before, .fxp-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Bouton secondaire pleine largeur (« code depuis le téléviseur »). */
.fxp-alt {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px; border-radius: var(--r-btn, 11px);
  background: var(--tile); border: 1px solid var(--border);
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text);
  cursor: pointer; text-decoration: none;
}
.fxp-alt:hover { background: var(--tile-hover); }

.fxp-foot { margin-top: 20px; text-align: center; font-size: 13px; color: var(--text-mut); }
.fxp-submit { width: 100%; justify-content: center; margin-top: 4px; }

/* ---- Offres sur la page d'accueil ---- */
.fxp-plans-wrap { position: relative; z-index: 3; padding: 30px 46px 70px; }
.fxp-plans-title {
  font-size: clamp(24px, 3vw, 34px); font-weight: 800;
  letter-spacing: -1px; margin: 0 0 8px; text-align: center;
}
.fxp-plans-sub {
  margin: 0 auto 34px; max-width: 620px; text-align: center;
  font-size: 13.5px; line-height: 1.6; color: var(--text-mut);
}

/* ---- Notification ---- */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 40;
  transform: translate(-50%, 14px);
  background: rgba(10, 5, 7, .94); border: 1px solid var(--border-2);
  border-radius: 12px; padding: 12px 20px; font-size: 13.5px;
  max-width: min(92vw, 420px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { border-color: var(--err); color: var(--err); }

/* ---- Messages du formulaire ---- */
.msg {
  margin-top: 14px; padding: 11px 14px; border-radius: 10px;
  font-size: 13px; border-left: 2px solid; background: rgba(255, 255, 255, .04);
}
.msg.err { border-color: var(--err); color: var(--err); }
.msg.ok { border-color: var(--ok); color: var(--ok); }
.msg.info { border-color: var(--accent-2); color: var(--text-2); }

.devcode { margin-top: 14px; padding: 13px 15px; border: 1px dashed rgba(243,205,134,.42); border-radius: 10px; }
.devcode b { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--warn); }
.devcode span { display: block; margin-top: 7px; font-size: 30px; letter-spacing: .2em; }
.devcode i { display: block; margin-top: 8px; font-size: 11.5px; color: var(--text-dim); font-style: normal; line-height: 1.5; }

/* Leurre anti-robot : hors écran plutôt que display:none — les robots un peu
   sérieux ignorent ce qui est masqué, mais remplissent ce qui existe. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 720px) {
  .fxp-head { padding: 16px 20px; gap: 16px; }
  .fxp-menu { display: none; }
  .fxp-hero { padding: 54px 20px 0; }
  .fxp-facts { padding: 40px 20px 34px; gap: 26px; }
  .fxp-plans-wrap { padding: 20px 20px 50px; }
  .fxp-auth { padding: 16px 20px 40px; }
}

/* Sur les écrans d'authentification, l'action de bascule est mise en avant :
   la capture la montre en gras, détachée de la phrase qui l'introduit. */
#auth-head-acts { font-size: 13px; color: var(--text-mut); }
#auth-head-acts .fxp-link { color: var(--text); font-weight: 700; margin-left: 6px; }

/* ============================================================
   P6 — document en six points
   ============================================================ */
.fxp-doc { position: relative; z-index: 3; max-width: 1100px; margin: 0 auto; padding: 60px 46px 80px; }
.fxp-doc-title {
  font-size: clamp(30px, 4.4vw, 46px); font-weight: 800;
  letter-spacing: -1.6px; line-height: 1.08; margin: 14px 0 20px;
}
.fxp-doc-lede { max-width: 560px; font-size: 14.5px; line-height: 1.7; color: var(--text-2); margin: 0 0 18px; }
.fxp-doc-date { font-size: 12px; color: var(--text-dim); margin: 0 0 44px; }

/* Une ligne par point : numéro, intitulé, phrase. Trois colonnes au large,
   empilées sous 900 px — le texte y a besoin de toute la largeur. */
.fxp-doc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.fxp-doc-list li {
  display: grid; grid-template-columns: 80px 300px 1fr; gap: 24px;
  align-items: start; padding: 26px 0; border-bottom: 1px solid var(--border);
}
.fxp-doc-n { font-size: 20px; font-weight: 800; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.fxp-doc-list h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.fxp-doc-list p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.fxp-doc-note { margin-top: 34px; font-size: 12.5px; line-height: 1.7; color: var(--text-dim); max-width: 900px; }
.fxp-doc-note a { color: var(--text-2); border-bottom: 1px solid var(--border-2); }

@media (max-width: 900px) {
  .fxp-doc { padding: 40px 20px 60px; }
  .fxp-doc-list li { grid-template-columns: 54px 1fr; gap: 10px 16px; }
  .fxp-doc-list h2 { grid-column: 2; }
  .fxp-doc-list p { grid-column: 2; margin-top: 6px; }
}

/* ============================================================
   P5 — choix des profils
   ============================================================ */
.fxp-profiles { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin: 26px 0 4px; }
.fxp-prof { width: 140px; }
.fxp-prof-face {
  position: relative; aspect-ratio: 1; border-radius: 16px;
  display: grid; place-items: center;
  font-size: 42px; font-weight: 800; color: #fff;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9);
}
.fxp-prof-screen {
  position: absolute; right: 8px; bottom: 8px;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(0, 0, 0, .6); font-size: 10px; font-weight: 700;
}
.fxp-prof-name { margin-top: 11px; font-size: 13.5px; font-weight: 700; text-align: center; }
.fxp-prof-sub { margin-top: 3px; font-size: 11.5px; color: var(--text-dim); text-align: center; }
.fxp-prof-tag {
  display: block; width: fit-content; margin: 7px auto 0;
  padding: 2px 9px; border-radius: 20px; font-size: 10px; font-weight: 700;
}
.fxp-prof-tag.adult { background: rgba(255, 255, 255, .08); color: var(--text-2); }
.fxp-prof-tag.kid { background: rgba(127, 214, 168, .16); color: var(--ok); }

/* La tuile d'ajout dit combien de places restent : « Ajouter » seul laisse
   croire que le nombre est illimité, alors que la formule le plafonne. */
.fxp-prof-add .fxp-prof-face {
  border: 1px dashed var(--border-2); background: none;
  font-size: 30px; color: var(--text-mut);
  cursor: pointer; box-shadow: none;
}
.fxp-prof-add .fxp-prof-face:hover { border-color: var(--accent); color: var(--text); }
.fxp-prof-add.full .fxp-prof-face { opacity: .4; cursor: not-allowed; }

.fxp-prof-form { max-width: 380px; margin: 20px auto 0; }
.fxp-colors { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 7px; }
.fxp-color { width: 30px; height: 30px; border-radius: 9px; cursor: pointer; border: 2px solid transparent; }
.fxp-color.on { border-color: #fff; }

/* ==========================================================================
   ACCUEIL — un écran, pas une page qui défile
   La maquette montre l'accueil entier dans la fenêtre : en-tête, promesse,
   bandeau de trois faits, pied. Les offres et le fonctionnement, qui étaient
   des sections sous le pli, sont devenus des pages à part.
   ========================================================================== */
body.fxp-fixe { height: 100dvh; overflow: hidden; }
body.fxp-fixe #site { height: 100dvh; display: flex; flex-direction: column; }
/* Le héros prend ce qui reste et centre son bloc verticalement, pour que la
   promesse tombe au même endroit quelle que soit la hauteur de fenêtre. */
body.fxp-fixe .fxp-hero {
  flex: 1; min-height: 0; padding-top: 0; padding-bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
  /* sans quoi les enfants s'étirent sur toute la largeur : la pastille
     « FLUX » devenait une barre de 620 px. */
  align-items: flex-start;
}

/* Dans la maquette, « FLUX » n'est pas une pastille mais une simple mention
   espacée au-dessus du titre. */
.fxp-eyebrow {
  padding: 0; background: none; border: 0;
  letter-spacing: 2.4px; margin-bottom: 22px;
}
body.fxp-fixe .fxp-facts { padding: 0; flex-wrap: nowrap; gap: 0; }

/* Le bandeau des trois faits est encadré, ses colonnes séparées par un filet
   — c'est ce que montre la capture, et c'est ce qui le détache du héros. */
.fxp-facts { border-top: 1px solid var(--border); }
.fxp-fact {
  flex: 1; min-width: 0; padding: 22px 30px;
  border-left: 1px solid var(--border);
}
.fxp-fact:first-child { border-left: 0; padding-left: 46px; }
.fxp-fact b { font-size: 19px; letter-spacing: -.4px; }

/* Mention légale à gauche, liens à droite (la feuille livrée fait l'inverse). */
.fxp-footer-legal { margin-left: 0; }
.fxp-footer nav { margin-left: auto; display: flex; gap: 26px; }

/* ==========================================================================
   MUR D'AFFICHES — droit, et en petites vignettes
   La rotation de la feuille livrée donnait une diagonale, et trois colonnes
   étirées sur 62 % de la largeur donnaient des affiches énormes. La maquette
   montre une trame droite de petites vignettes : largeur de vignette FIXE,
   nombre de colonnes calculé par wall.js à partir de la place disponible.
   ========================================================================== */
.fxp-wall-cols {
  top: -12%; right: 0; width: 54%; height: 128%;
  gap: 16px;
  transform: none;                       /* la diagonale disparaît */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%),
                      linear-gradient(180deg, transparent, #000 12%, #000 84%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%),
                      linear-gradient(180deg, transparent, #000 12%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.fxp-tile { border-radius: 8px; margin-bottom: 16px; }
/* Assez sombre pour rester un décor, assez clair pour qu'on VOIE des affiches.
   Le réglage précédent (brightness .24) les réduisait à des rectangles noirs :
   on devinait qu'il se passait quelque chose sans rien distinguer. */
.fxp-tile { filter: saturate(.62) brightness(.62) contrast(1.02); }

@media (max-width: 900px) {
  .fxp-wall-cols { width: 100%; right: 0; opacity: .38; }
  body.fxp-fixe { height: auto; overflow: auto; }
  body.fxp-fixe #site { height: auto; }
  body.fxp-fixe .fxp-hero { padding: 54px 20px 40px; }
  body.fxp-fixe .fxp-facts { flex-wrap: wrap; }
  .fxp-fact { border-left: 0; padding: 16px 20px; }
  .fxp-fact:first-child { padding-left: 20px; }
}

/* ==========================================================================
   PAGES « FONCTIONNEMENT » ET « OFFRES »
   Ce que l'accueil portait sous le pli vit désormais ici. Elles défilent
   normalement — c'est l'accueil, et lui seul, qui tient dans un écran.
   ========================================================================== */
.fxp-menu a.on { color: var(--text); }

.fxp-doc h1 {
  font-size: 38px; font-weight: 800; letter-spacing: -1.4px;
  margin: 0 0 16px; text-wrap: balance;
}
.fxp-doc h2 {
  font-size: 17px; font-weight: 700; letter-spacing: -.3px;
  margin: 52px 0 16px;
}

/* Les quatre étapes : le numéro est posé par le compteur CSS, il n'a pas à
   être écrit dans le HTML — le texte traduit n'aurait plus à le porter.
   La classe s'appelle fxp-how et PAS fxp-steps : ce dernier nom appartient
   aux barres de progression de l'assistant d'inscription (flux-public.css),
   dont le flex en ligne écrasait cette liste en colonnes d'un mot. */
.fxp-how { list-style: none; counter-reset: etape; margin: 34px 0 0; padding: 0; }
.fxp-how li {
  counter-increment: etape;
  display: grid; grid-template-columns: 42px 1fr; gap: 18px;
  padding: 20px 0; border-top: 1px solid var(--border);
}
.fxp-how li::before {
  content: counter(etape, decimal-leading-zero);
  font-size: 19px; font-weight: 800; color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.fxp-how b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
/* `grid-column: 2` n'est pas décoratif : sans lui, le placement automatique
   met le ::before (numéro) en colonne 1, le titre en colonne 2… et la
   description retombe RANGÉE SUIVANTE, COLONNE 1 — les 42 px du numéro, un
   mot par ligne. C'était le défaut visible en production. */
.fxp-how span {
  grid-column: 2; display: block; margin-top: 5px;
  font-size: 14px; line-height: 1.7; color: var(--text-2);
}

.fxp-limits { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.fxp-limits li {
  position: relative; padding: 9px 0 9px 20px;
  font-size: 14px; line-height: 1.7; color: var(--text-2);
}
.fxp-limits li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2);
}

.fxp-doc-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 52px; }
.fxp-doc-cta .fxp-note { margin-top: 0; }

.fxp-plans-note { margin: 30px 0 0; font-size: 12.5px; color: var(--text-dim); }

@media (max-width: 900px) {
  .fxp-doc h1 { font-size: 29px; letter-spacing: -1px; }
  .fxp-how li { grid-template-columns: 32px 1fr; gap: 12px; }
}

/* Défilement du mur : la feuille livrée n'anime que les trois PREMIÈRES
   colonnes (`nth-child(1)`, `(2)`, `(3)`). Depuis que leur nombre s'adapte à
   la largeur, les suivantes restaient parfaitement immobiles à côté des
   autres — c'est ce qui se voyait. On anime donc par cycle de six, chaque
   position gardant sa propre vitesse et son propre décalage pour que deux
   colonnes voisines ne montent jamais du même pas. */
.fxp-col:nth-child(6n + 1) { animation: fxp-up 46s linear infinite; animation-delay:  -4s; }
.fxp-col:nth-child(6n + 2) { animation: fxp-up 62s linear infinite; animation-delay: -18s; }
.fxp-col:nth-child(6n + 3) { animation: fxp-up 54s linear infinite; animation-delay: -34s; }
.fxp-col:nth-child(6n + 4) { animation: fxp-up 70s linear infinite; animation-delay: -11s; }
.fxp-col:nth-child(6n + 5) { animation: fxp-up 50s linear infinite; animation-delay: -27s; }
.fxp-col:nth-child(6n + 6) { animation: fxp-up 58s linear infinite; animation-delay: -41s; }

/* À redéclarer ici : la règle de la feuille livrée (`.fxp-col`) est moins
   spécifique que les sélecteurs ci-dessus et ne les couperait plus. */
@media (prefers-reduced-motion: reduce) {
  .fxp-col:nth-child(6n + 1), .fxp-col:nth-child(6n + 2), .fxp-col:nth-child(6n + 3),
  .fxp-col:nth-child(6n + 4), .fxp-col:nth-child(6n + 5), .fxp-col:nth-child(6n + 6) {
    animation: none;
  }
}


/* ==========================================================================
   Réparations vues en production (2026-08-13) — quatre défauts, une passe.
   ========================================================================== */

/* La feuille livrée passe .fxp-doc en grille « corps 1fr + sommaire 210px »
   dès 1080px. Aucune de nos pages n'a de sommaire latéral : les enfants
   directs se répartissaient en zigzag sur les deux colonnes — le chapô
   partait à droite au-dessus du mur, un titre sur deux flottait. Retour au
   flux normal ; le jour où une page aura un vrai sommaire, elle portera une
   classe dédiée. */
@media (min-width: 1080px) {
  .fxp-doc { display: block; max-width: 900px; }
}

/* Libellés des étapes de l'inscription : « 1 Compte · 2 Formule · 3 Profils ».
   Ils n'avaient AUCUNE règle — les <span> s'affichaient en ligne, collés
   (« 1Compte2Formule3Profils »), et le <i> du numéro héritait de l'italique
   du navigateur. */
.fxp-steps-labels {
  display: flex; justify-content: space-between; gap: 14px;
  margin: 0 0 24px;
}
.fxp-step-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--text-dim); font-style: normal;
}
.fxp-step-label i {
  font-style: normal; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px;
  background: var(--tile); border: 1px solid var(--border);
  color: var(--text-2);
}
.fxp-step-label.on { color: var(--text); }
.fxp-step-label.on i { background: var(--grad); border-color: transparent; color: #fff; }
.fxp-step-label.done { color: var(--text-2); }
.fxp-step-label.done i { color: var(--accent-tx); border-color: var(--accent-tx); }
/* Les barres se rapprochent des libellés qu'elles illustrent. */
.fxp-steps { margin-bottom: 10px; }

/* Les cartes d'offres : max-width sans margin auto, donc collées à gauche
   pendant que le titre, lui, était centré. Tout le bloc se centre. */
.fxp-plans { margin-inline: auto; }
.fxp-plans-wrap { max-width: 1192px; margin: 0 auto; }
.fxp-plans-note { text-align: center; }