/* NOVELLUM — barre HORS-SITE et panneau « J'envoie mes photos ».
   Servi en statique depuis la racine (server.js : express.static(__dirname),
   gzip + cache 1 an comme les autres assets du site).

   POURQUOI UN FICHIER À PART, ET PAS DU STYLE DANS LA PAGE : ce même habillage
   sert sur TROIS pages qui n'ont pas la même charte — l'enveloppe /demo/:slug,
   maquette.html et maquette-en-cours.html. Un style recopié trois fois diverge
   au premier ajustement. Tout est préfixé `nvl-` : rien ne peut toucher au site
   du client, qui vit de toute façon dans une iframe séparée.

   Zéro dépendance, zéro police à télécharger (pile système), zéro animation
   coûteuse : la barre s'affiche avant la maquette, jamais après. */

:root { --nvl-h: 44px; }

/* --- L'ENVELOPPE : la barre ne recouvre JAMAIS le site --------------------
   La hauteur de la barre est RÉSERVÉE (l'iframe commence dessous et mesure
   « 100% moins la barre »), au lieu d'être superposée : un bandeau flottant
   masquerait le logo du commerçant, c'est-à-dire exactement ce qu'il vient
   regarder. */
.nvl-body { margin: 0; background: #050816; overflow: hidden; }
.nvl-site {
  position: fixed; top: var(--nvl-h); left: 0;
  width: 100%; height: calc(100% - var(--nvl-h));
  border: 0; display: block; background: #fff;
}

.nvl-barre {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nvl-h);
  z-index: 2147483000;
  display: flex; align-items: center; gap: .55rem;
  padding: 0 .55rem; box-sizing: border-box;
  background: #080d1c; border-bottom: 1px solid rgba(148, 163, 184, .22);
  font: 400 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #e5e7eb;
}
.nvl-barre__txt { flex: 1 1 auto; min-width: 0; }
.nvl-l1, .nvl-l2 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nvl-l1 { font-size: 12.5px; color: #cbd5e1; }
.nvl-l1 b { color: #fff; font-weight: 600; }
.nvl-l2 { font-size: 11.5px; color: #94a3b8; }
.nvl-prix { color: #f59e0b; }
.nvl-barre__act { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; }

.nvl-btn {
  font: inherit; font-weight: 600; font-size: 12.5px; line-height: 1;
  border: 1px solid transparent; border-radius: 8px; padding: .62rem .7rem;
  cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none;
}
.nvl-btn[disabled] { opacity: .6; cursor: default; }
.nvl-btn--go { background: #f59e0b; color: #111827; }
.nvl-btn--go:hover:not([disabled]) { background: #fbbf24; }
/* L'ACHAT — second geste, jamais concurrent du premier : contour d'ambre sur
   fond sombre, il se lit comme une alternative et non comme un doublon du
   bouton plein. */
.nvl-btn--buy { background: transparent; color: #fbbf24; border-color: rgba(245, 158, 11, .55); }
.nvl-btn--buy:hover:not([disabled]) { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .8); }
/* Le tableau de bord : un lien, pas un bouton d'action — il ouvre une page,
   il n'engage rien. Même poids visuel que « mes photos », teinte froide pour
   qu'il ne concurrence pas l'ambre du paiement. */
.nvl-btn--pro { background: rgba(56, 189, 248, .12); color: #bae6fd; border-color: rgba(56, 189, 248, .3);
  text-decoration: none; display: inline-flex; align-items: center; }
.nvl-btn--pro:hover { background: rgba(56, 189, 248, .22); color: #e0f2fe; }
.nvl-btn--ph { background: rgba(148, 163, 184, .14); color: #e5e7eb; border-color: rgba(148, 163, 184, .3); }
.nvl-btn--ph:hover:not([disabled]) { background: rgba(148, 163, 184, .24); }
.nvl-q { color: #94a3b8; text-decoration: none; font-size: 12px; padding: .5rem .3rem; white-space: nowrap; }
.nvl-q:hover { color: #e5e7eb; }
.nvl-barre :focus-visible, .nvl-panneau :focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }

/* --- Libellés courts / longs ----------------------------------------------
   Sur un téléphone de 360 px, « J'envoie mes photos — 69 €/mois, en ligne sous
   48 h » ne tient pas : le libellé rétrécit, la PROMESSE (le prix et le délai)
   reste, elle, toujours lisible — sur la deuxième ligne quand elle quitte le
   bouton. On ne cache jamais le prix, jamais le délai. */
.nvl-long { display: none; }
.nvl-court { display: inline; }
.nvl-pos, .nvl-sep { display: none; }
@media (min-width: 560px) {
  .nvl-btn--ph .nvl-long, .nvl-q .nvl-long, .nvl-l1 .nvl-long { display: inline; }
  .nvl-btn--ph .nvl-court, .nvl-q .nvl-court, .nvl-l1 .nvl-court { display: none; }
}
/* Le libellé long du tableau de bord n'apparaît qu'au large : sous 900 px la
   barre porte déjà deux boutons de paiement, et « Espace » se comprend seul. */
@media (min-width: 900px) {
  .nvl-btn--pro .nvl-long { display: inline; }
  .nvl-btn--pro .nvl-court { display: none; }
}
/* Sous 420 px, chaque pixel gagné sur les boutons est un pixel rendu au NOM du
   commerce : c'est lui qui fait dire « c'est le mien », pas le bouton. */
@media (max-width: 419px) {
  .nvl-barre { gap: .4rem; padding: 0 .45rem; }
  .nvl-barre__act { gap: .25rem; }
  .nvl-btn { font-size: 12px; padding: .6rem .55rem; }
  .nvl-l1 { font-size: 12px; }
  .nvl-l2 { font-size: 10.5px; }
}
@media (min-width: 620px) { .nvl-pos, .nvl-sep { display: inline; } }
@media (min-width: 900px) {
  .nvl-btn--go .nvl-long, .nvl-btn--buy .nvl-long { display: inline; }
  /* sans cette ligne, le bouton d'achat affichait « Je l'achète — 890 € + 30 €/mois890 € » */
  .nvl-btn--buy .nvl-court { display: none; }
}

/* --- Le mot de la barre (succès, panne, repli sans paiement) --------------- */
.nvl-msg {
  position: fixed; top: calc(var(--nvl-h) + 8px); left: 50%; transform: translateX(-50%);
  z-index: 2147483000; margin: 0; max-width: min(92vw, 540px);
  padding: .6rem .85rem; border-radius: 10px; box-sizing: border-box;
  background: #0f172a; color: #e5e7eb; border: 1px solid rgba(148, 163, 184, .3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  font: 400 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.nvl-msg.is-err { border-color: rgba(255, 136, 146, .55); }
.nvl-msg[hidden] { display: none; }

/* --- Le panneau photos ---------------------------------------------------- */
.nvl-ov {
  position: fixed; inset: 0; z-index: 2147483001; background: rgba(2, 6, 20, .74);
  display: flex; align-items: flex-end; justify-content: center;
  font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (min-width: 640px) { .nvl-ov { align-items: center; padding: 1.2rem; } }
.nvl-panneau {
  width: min(100%, 560px); max-height: 88vh; overflow: auto; -webkit-overflow-scrolling: touch;
  background: #0b1120; color: #e5e7eb; box-sizing: border-box;
  border: 1px solid rgba(148, 163, 184, .22); border-radius: 14px 14px 0 0;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .5);
}
@media (min-width: 640px) { .nvl-panneau { border-radius: 14px; } }
.nvl-tete { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .7rem; }
.nvl-tete h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.nvl-tete p { margin: .3rem 0 0; font-size: .85rem; color: #94a3b8; }
.nvl-x {
  margin-left: auto; flex: 0 0 auto; background: none; border: 0; color: #94a3b8;
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .1rem .3rem;
}
.nvl-x:hover { color: #e5e7eb; }

.nvl-zone {
  border: 1.5px dashed rgba(148, 163, 184, .38); border-radius: 12px;
  padding: 1.1rem .9rem; text-align: center; color: #94a3b8; cursor: pointer;
  background: rgba(148, 163, 184, .05);
}
.nvl-zone.is-drag { border-color: #f59e0b; color: #e5e7eb; background: rgba(245, 158, 11, .08); }
.nvl-zone b { display: block; color: #e5e7eb; font-weight: 600; font-size: .95rem; margin-bottom: .2rem; }
.nvl-zone span { font-size: .8rem; }
.nvl-in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.nvl-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .8rem; }
@media (min-width: 480px) { .nvl-grille { grid-template-columns: repeat(4, 1fr); } }
.nvl-vig { position: relative; aspect-ratio: 1/1; border-radius: 9px; overflow: hidden; background: #131c2e; }
.nvl-vig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nvl-vig button {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: rgba(2, 6, 20, .8); color: #fff; font: 600 13px/1 sans-serif; cursor: pointer;
}
.nvl-mot { display: block; margin-top: .85rem; font-size: .85rem; color: #94a3b8; }
.nvl-mot textarea {
  display: block; width: 100%; box-sizing: border-box; margin-top: .3rem; min-height: 4.5rem; resize: vertical;
  font: inherit; color: #e5e7eb; background: #0f172a; border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 9px; padding: .55rem .6rem;
}
.nvl-pied { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; }
.nvl-envoyer { flex: 1 1 auto; background: #f59e0b; color: #111827; border: 0; border-radius: 10px; padding: .8rem 1rem; font: inherit; font-weight: 600; cursor: pointer; }
.nvl-envoyer[disabled] { opacity: .55; cursor: default; }
.nvl-etat { margin: .7rem 0 0; font-size: .85rem; color: #94a3b8; min-height: 1.2em; }
.nvl-etat.is-err { color: #ff8892; }
.nvl-etat.is-ok { color: #22c55e; }
.nvl-fine { margin: .7rem 0 0; font-size: .75rem; color: #64748b; }

/* --- Le bouton d'appel posé sur maquette.html / maquette-en-cours.html ----- */
.nvl-cta {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer;
  background: rgba(245, 158, 11, .14); color: #f59e0b; border: 1px solid rgba(245, 158, 11, .45);
  border-radius: 10px; padding: .75rem 1rem;
}
.nvl-cta:hover { background: rgba(245, 158, 11, .22); }

/* --- 08/09/2026 — LA PASTILLE (Louis : « "ça m'intéresse" et photos en haut,
   c'est chiant ») : sur bureau la barre quitte le haut de l'écran. Le site
   prend toute la hauteur ; les deux actions vivent dans une pastille en bas à
   droite, translucide, qui ne cache ni logo ni titre. Sur téléphone la barre
   reste en haut mais fine (44 px), sans la deuxième ligne. */
.nvl-l2 { display: none; }
@media (min-width: 900px) {
  .nvl-site { top: 0; height: 100%; }
  .nvl-barre {
    top: auto; left: auto; right: 18px; bottom: 18px; height: auto;
    border-radius: 999px; padding: 6px 6px 6px 14px; gap: .6rem;
    background: rgba(8, 13, 28, .88); border: 1px solid rgba(148, 163, 184, .28);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    /* LE DERNIER BOUTON SORTAIT DE L'ÉCRAN (09/09/2026, signalé par Louis).
       Quatre boutons — « Je le prends », « Je prends l'année », « Corriger mes
       infos », « J'envoie mes photos » — font près de 900 px. La pastille était
       plafonnée à 720 px, les actions déclarées `flex: 0 0 auto` (ni
       rétrécissement ni passage à la ligne) : le contenu débordait et le
       dernier bouton était coupé par le bord de la fenêtre. C'était le bouton
       d'envoi des photos, c'est-à-dire l'action qui fait revenir le visiteur.
       On laisse la barre respirer et, surtout, PASSER À LA LIGNE : mieux vaut
       deux rangs lisibles qu'un rang tronqué. */
    max-width: min(96vw, 980px);
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: .4rem;
  }
  /* ⚠️ LE VERROU ÉTAIT AILLEURS (10/09/2026, second signalement de Louis).
     Hier j'ai autorisé le passage à la ligne SUR LA BARRE, sans toucher au
     bloc des boutons — qui porte `flex: 0 0 auto` dans la règle de base,
     c'est-à-dire « ne rétrécis jamais ». Il gardait donc sa largeur de contenu
     (six boutons + le nom du commerce ≈ 1 200 px), débordait du plafond de
     980 px et sortait par la droite de l'écran. Le passage à la ligne ne
     servait à rien tant que le bloc refusait de se plier.
     Il faut les DEUX : l'autorisation de plier (`flex: 1 1 auto`) et la levée
     du plancher de largeur (`min-width: 0`), sans quoi un conteneur flex ne
     descend jamais sous la taille de son contenu. */
  .nvl-barre__act { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: .35rem; }
  /* et la barre elle-même ne peut plus dépasser la fenêtre, quoi qu'il arrive */
  .nvl-barre { max-width: calc(100vw - 36px); }
  .nvl-barre__txt { flex: 0 1 auto; }
  .nvl-l1 { font-size: 12px; }
  .nvl-l1 .nvl-long { display: none; }
  .nvl-btn { border-radius: 999px; padding: .55rem .8rem; }
  .nvl-q { padding-right: .5rem; }
}

/* --- 09/09/2026 — SUR TÉLÉPHONE AUSSI, UNE PASTILLE (Louis : « pas un truc
   énorme en haut de l'écran, un truc discret ») : le site prend tout l'écran,
   la pastille se pose en bas à droite, au-dessus de la barre du pouce du
   site (60 px + zone sûre). Deux actions courtes, rien d'autre. */
@media (max-width: 899px) {
  .nvl-site { top: 0; height: 100%; }
  .nvl-barre {
    top: auto; left: auto; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); height: auto;
    border-radius: 999px; padding: 5px; gap: .3rem;
    background: rgba(8, 13, 28, .9); border: 1px solid rgba(148, 163, 184, .28);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .nvl-barre__txt, .nvl-q { display: none; }
  .nvl-btn { padding: .5rem .7rem; font-size: 12px; border-radius: 999px; }
  /* LE BOUTON D'ACHAT SORTAIT PAR LA GAUCHE (30/09/2026). La pastille était
     ancrée à droite seulement (right: 10px, left: auto) et refusait de plier :
     avec cinq boutons, elle grandissait vers la gauche et, mesuré à 360 px,
     #nvl-prendre commençait à x = -101 — le seul geste qui encaisse était hors
     de l'écran. La barre est maintenant tenue des deux côtés et ne dépasse
     jamais la fenêtre ; le bouton d'achat passe EN PREMIER et prend toute la
     place libre ; les autres gardent leur largeur. */
  .nvl-barre {
    left: 10px; right: 10px; max-width: calc(100vw - 20px);
    flex-wrap: nowrap;
  }
  .nvl-barre__act { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; }
  #nvl-prendre {
    order: -1; flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
  }
  .nvl-plus { display: none; }
}
/* SOUS 600 PX, TROIS BOUTONS ET PAS UN DE PLUS (30/09/2026) : acheter,
   photos, « Plus ». L'année, le tableau de bord et « Corriger mes infos »
   passent derrière « Plus », qui ouvre la feuille d'offre (demo-barre.js) —
   rien n'est retiré, seulement rangé. */
@media (max-width: 599px) {
  #nvl-acheter, #nvl-espace, #nvl-infos { display: none; }
  .nvl-plus { display: inline-block; flex: 0 0 auto; }
}
@media (min-width: 900px) { .nvl-plus { display: none; } }
/* De 600 à 759 px, cinq boutons tiennent seulement en libellés courts : mesuré
   à 600 px avec « Corriger mes infos » et « J'envoie mes photos » en toutes
   lettres, le bouton d'achat tombait à 120 px et coupait son prix
   (« Le mettre en li… »). Le prix d'abord, les mots ensuite. */
@media (min-width: 600px) and (max-width: 759px) {
  .nvl-btn--ph .nvl-long { display: none; }
  .nvl-btn--ph .nvl-court { display: inline; }
}


/* (30/09/2026) Le bandeau « Ouvrez-le sur ordinateur » (.nvl-pc) est retiré de
   l'enveloppe : sur téléphone, le seul geste à l'écran doit être l'achat. */


/* --- Panneau « Corriger mes infos » ---------------------------------------- */
/* Mêmes règles que le panneau photos : il vit dans la même boîte, il doit s'y
   fondre. Le compteur de signes est visible en permanence — un plafond qu'on
   découvre au moment où le texte se coupe passe pour un bug. */
.nvl-champs { display: flex; flex-direction: column; gap: .9rem; margin: 1rem 0 .2rem; }
.nvl-champ { display: flex; flex-direction: column; gap: .35rem; }
.nvl-champ-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: 13px; color: #cbd5e1; }
.nvl-compte { font-style: normal; font-size: 11.5px; color: #64748b; font-variant-numeric: tabular-nums; }
.nvl-champ input, .nvl-champ textarea {
  width: 100%; padding: .6rem .7rem; border-radius: 10px; font: inherit; font-size: 14px;
  border: 1px solid rgba(148, 163, 184, .26); background: rgba(255, 255, 255, .04); color: #e5e7eb;
  resize: vertical;
}
.nvl-champ input:focus, .nvl-champ textarea:focus { outline: 2px solid #f59e0b; outline-offset: 1px; }
.nvl-aide { font-size: 11.5px; color: #64748b; line-height: 1.4; }
.nvl-etat.is-err { color: #f87171; }

/* « CE SITE VOUS PLAÎT ? » (13/09/2026) — feuille basse, au-dessus du site. */
.nvl-avis{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;width:min(520px,calc(100% - 24px));
  background:#0e1220;color:#f3f1ec;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:16px 18px 16px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;animation:nvl-avis-in .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes nvl-avis-in{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
.nvl-avis__x{position:absolute;top:6px;right:8px;background:none;border:0;color:#9aa0ad;font-size:22px;line-height:1;cursor:pointer;padding:4px 8px}
.nvl-avis__q{margin:0 28px 12px 0;font-weight:600;font-size:16px}
.nvl-avis__r,.nvl-avis__s{display:flex;flex-wrap:wrap;gap:8px}
.nvl-avis__s{flex-direction:column;align-items:stretch}
.nvl-avis__b{font:inherit;font-weight:600;border:1px solid rgba(255,255,255,.22);background:transparent;color:#f3f1ec;border-radius:10px;padding:10px 14px;cursor:pointer}
.nvl-avis__b--oui{background:#f59e0b;border-color:#f59e0b;color:#111}
.nvl-avis__b:hover{filter:brightness(1.08)}
.nvl-avis__ou{margin:6px 0 0;color:#b8bcc6;font-size:13.5px}
.nvl-avis__tel{display:flex;gap:8px}
.nvl-avis__tel input,.nvl-avis textarea{flex:1 1 auto;font:inherit;color:#f3f1ec;background:#161b2b;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 12px;min-width:0}
.nvl-avis textarea{resize:vertical;width:100%}
.nvl-avis input.is-err{border-color:#ef4444}
@media (max-width:560px){.nvl-avis{padding:14px}.nvl-avis__q{font-size:15px}}

.nvl-offre__l{margin:0 0 12px;padding:0 0 0 18px;color:#d9dbe1;font-size:14.5px}
.nvl-offre__l li{margin:4px 0}
/* sur téléphone la barre est en bas : la feuille se pose au-dessus d'elle */
@media (max-width:899px){.nvl-avis{bottom:calc(136px + env(safe-area-inset-bottom));max-height:calc(100% - 170px);overflow:auto}}
/* LES FEUILLES NE CHEVAUCHENT PLUS LA BARRE (15/09/2026). À ≥ 900 px la barre
   est en bas à droite (bottom 18px) et, large, traverse le centre : la feuille
   « Ce site vous ressemble ? » (z-index 60 contre 2147483000) passait dessous —
   vu par Louis sur Le Royal d'Or. Elle se pose au-dessus, à la hauteur mesurée
   par demo-barre.js (--nvl-barre-h), et au même plan que la barre : posée
   après elle dans le DOM, elle reste visible ; les panneaux (.nvl-ov,
   2147483001) restent au-dessus de tout. */
@media (min-width:900px){.nvl-avis{bottom:calc(18px + var(--nvl-barre-h,56px) + 14px);z-index:2147483000}}

/* LA FEUILLE « PLUS » (30/09/2026) : ce que la pastille range sous 600 px. */
.nvl-offre__plus{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.nvl-offre__plus .nvl-avis__b{flex:1 1 auto;text-align:center;text-decoration:none;font-size:14px}