/* assets/site-variants.css — Mission RS, S2 (08/11/2026) : le style choisi pour l'accueil (admin › Réglages › Style du site)
   habille TOUTES les pages à en-tête commun. Classes posées sur <html> par scripts/hp_variant_lib.php (hpv_site_head) :
     ps-sv + ps-sv-a (Lumière) | ps-sv-b (Photo apaisée) | ps-sv-b2 (Photo épurée) | ps-sv-c (Nuit vers lumière)
     + ps-sv-dark (en-tête sombre : B, B2, C) ou ps-sv-light (A).
   Habillage seulement : en-tête, bandeau d'ambiance sous l'en-tête, barre latérale réduite, pied de page, boutons principaux.
   Les contenus des pages ne changent pas (lisibilité, référencement). La page d'accueil garde assets/hp-variants.css.
   Mode sombre : html[data-dk]. Toute règle est préfixée par html.ps-sv… (poids supérieur aux règles d'origine). */

:root { --sv-night: #081429; --sv-night-2: #0B1F45; --sv-night-3: #123A7A; --sv-brand: #185FA5; --sv-brand-2: #1D6AE5; --sv-ink: #0B1A33; }

/* ---------- En-tête ---------- */
html.ps-sv body header.header-standard { transition: background-color .2s ease; }
/* A · Lumière : verre clair, liseré fin */
html.ps-sv-a body header.header-standard {
  background: rgba(255, 255, 255, 0.86) !important;
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid #E1E8F2; box-shadow: 0 6px 24px rgba(11, 26, 51, 0.06);
}
/* B · Photo apaisée : la photo de l'accueil, assombrie */
html.ps-sv-b body header.header-standard {
  background: linear-gradient(180deg, rgba(7, 20, 42, 0.80), rgba(7, 20, 42, 0.86)), url("/images/homepage/paisible_homepage_01-960w.webp") center 38% / cover no-repeat, var(--sv-night-2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 26px rgba(3, 10, 24, 0.28);
}
/* B2 · Photo épurée : bleu nuit uni, translucide */
html.ps-sv-b2 body header.header-standard {
  background: rgba(9, 24, 48, 0.94) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 8px 26px rgba(3, 10, 24, 0.24);
}
/* C · Nuit vers lumière : dégradé de nuit */
html.ps-sv-c body header.header-standard {
  background: linear-gradient(90deg, var(--sv-night) 0%, var(--sv-night-2) 58%, var(--sv-night-3) 100%) !important;
  border-bottom: 1px solid rgba(125, 211, 252, 0.16); box-shadow: 0 8px 26px rgba(3, 10, 24, 0.28);
}

/* En-tête sombre (B, B2, C) : textes, icônes et pastilles clairs, comme le haut de l'accueil */
html.ps-sv-dark body header.header-standard .hamburger,
html.ps-sv-dark body header.header-standard .powered-text,
html.ps-sv-dark body header.header-standard .powered-text a,
html.ps-sv-dark body header.header-standard a.nav-link,
html.ps-sv-dark body header.header-standard .auth-buttons .nav-ghost { color: #FFFFFF !important; text-shadow: none !important; }
html.ps-sv-dark body header.header-standard .auth-buttons .nav-ghost:hover { background: rgba(255, 255, 255, 0.14) !important; color: #FFFFFF !important; }
html.ps-sv-dark body header.header-standard .auth-buttons .nav-outline,
html.ps-sv-dark body header.header-standard.is-logged .header-right-container .pricing-btn {
  background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.55) !important; color: #FFFFFF !important; box-shadow: none !important;
}
html.ps-sv-dark body header.header-standard .auth-buttons .nav-outline:hover,
html.ps-sv-dark body header.header-standard.is-logged .header-right-container .pricing-btn:hover { background: rgba(255, 255, 255, 0.22) !important; }
html.ps-sv-dark body header.header-standard.is-logged .header-right-container .user-btn {
  background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.45) !important; color: #FFFFFF !important; box-shadow: none !important;
}
html.ps-sv-dark body header.header-standard.is-logged .header-right-container .user-btn .user-btn-name { color: #FFFFFF !important; }
html.ps-sv-dark body header.header-standard .header-avatar-more,
html.ps-sv-dark body header.header-standard .header-new-assistant-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
/* En-tête clair (A) : le lien « Au cœur de Paisible AI », blanc sur certaines pages (prospection, passkeys), redevient lisible */
html.ps-sv-light body header.header-standard .powered-text,
html.ps-sv-light body header.header-standard .powered-text a { color: var(--sv-ink) !important; text-shadow: none !important; }
/* Bouton « Créer mon compte gratuit » : même bleu soutenu que l'accueil (contraste du texte blanc ≥ 4,5) */
html.ps-sv body header.header-standard .auth-buttons .nav-primary { background: linear-gradient(135deg, var(--sv-brand-2), var(--sv-brand)) !important; color: #FFFFFF !important; }

/* ---------- Bandeau d'ambiance sous l'en-tête (derrière le contenu, jamais devant) ---------- */
html.ps-sv-a body::before,
html.ps-sv-b body::before,
html.ps-sv-c body::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 440px; z-index: -1; pointer-events: none;
}
html.ps-sv-a body::before { background: radial-gradient(60% 100% at 50% 0%, rgba(37, 99, 235, 0.16) 0%, rgba(31, 182, 232, 0.09) 42%, rgba(124, 108, 246, 0.05) 62%, rgba(246, 248, 252, 0) 82%); }
html.ps-sv-b body::before { background: linear-gradient(180deg, rgba(11, 31, 69, 0.10) 0%, rgba(11, 31, 69, 0.04) 45%, rgba(11, 31, 69, 0) 100%); }
html.ps-sv-c body::before { background: radial-gradient(70% 110% at 50% 0%, rgba(56, 189, 248, 0.20) 0%, rgba(59, 130, 246, 0.10) 40%, rgba(139, 92, 246, 0.05) 62%, rgba(246, 248, 252, 0) 85%); }

/* ---------- Barre latérale réduite (clients connectés) : la mosaïque cède la place au style ---------- */
html.ps-sv body.sidebar-collapsed:not(.sidebar-expanded) .sidebar .sidebar-collapsed-grid { display: none !important; }
html.ps-sv-a body.sidebar-collapsed:not(.sidebar-expanded) .sidebar { background: linear-gradient(180deg, #F3F7FC 0%, #E6EFFA 60%, #D9E7F8 100%) !important; box-shadow: inset -1px 0 0 #DCE4EF !important; }
html.ps-sv-b body.sidebar-collapsed:not(.sidebar-expanded) .sidebar { background: linear-gradient(180deg, rgba(7, 20, 42, 0.86), rgba(7, 20, 42, 0.94)), url("/images/homepage/paisible_homepage_01-640w.webp") center / cover no-repeat, var(--sv-night) !important; }
html.ps-sv-b2 body.sidebar-collapsed:not(.sidebar-expanded) .sidebar { background: linear-gradient(180deg, #0A1B36 0%, var(--sv-night-2) 100%) !important; }
html.ps-sv-c body.sidebar-collapsed:not(.sidebar-expanded) .sidebar { background: linear-gradient(180deg, var(--sv-night) 0%, var(--sv-night-2) 45%, var(--sv-night-3) 80%, #1C5CB8 100%) !important; }

/* ---------- Pied de page ---------- */
html.ps-sv-a body footer.site-footer { background: #0B1A33 !important; }
html.ps-sv-b body footer.site-footer,
html.ps-sv-b2 body footer.site-footer { background: linear-gradient(180deg, var(--sv-night-2) 0%, var(--sv-night) 100%) !important; }
html.ps-sv-c body footer.site-footer { background: linear-gradient(180deg, var(--sv-night-3) 0%, var(--sv-night-2) 35%, var(--sv-night) 100%) !important; }

/* ---------- Boutons principaux : le bleu dégradé de l'accueil ---------- */
html.ps-sv body .btn-primary:not(:disabled):not(.disabled),
html.ps-sv body .btn-cta-pricing:not(:disabled),
html.ps-sv body .mpa-nx-b.pri { background-image: linear-gradient(135deg, var(--sv-brand-2), var(--sv-brand)) !important; border-color: var(--sv-brand) !important; color: #FFFFFF !important; }

/* ---------- Mode sombre ---------- */
html[data-dk].ps-sv-a body header.header-standard { background: rgba(8, 20, 41, 0.92) !important; border-bottom-color: rgba(255, 255, 255, 0.08); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35); }
html[data-dk].ps-sv-a body header.header-standard .hamburger,
html[data-dk].ps-sv-a body header.header-standard .powered-text,
html[data-dk].ps-sv-a body header.header-standard .powered-text a,
html[data-dk].ps-sv-a body header.header-standard .auth-buttons .nav-ghost { color: #FFFFFF !important; }
html[data-dk].ps-sv-a body header.header-standard .auth-buttons .nav-outline,
html[data-dk].ps-sv-a body header.header-standard.is-logged .header-right-container .pricing-btn,
html[data-dk].ps-sv-a body header.header-standard.is-logged .header-right-container .user-btn { background: rgba(255, 255, 255, 0.10) !important; border-color: rgba(255, 255, 255, 0.40) !important; color: #FFFFFF !important; }
html[data-dk].ps-sv-a body header.header-standard.is-logged .header-right-container .user-btn .user-btn-name { color: #FFFFFF !important; }
html[data-dk].ps-sv-a body::before { background: radial-gradient(60% 100% at 50% 0%, rgba(56, 189, 248, 0.14) 0%, rgba(59, 130, 246, 0.07) 45%, rgba(8, 20, 41, 0) 82%); }
html[data-dk].ps-sv-c body::before { background: radial-gradient(70% 110% at 50% 0%, rgba(56, 189, 248, 0.16) 0%, rgba(139, 92, 246, 0.06) 55%, rgba(8, 20, 41, 0) 85%); }
html[data-dk].ps-sv-b body::before { background: none; }
html[data-dk].ps-sv-a body.sidebar-collapsed:not(.sidebar-expanded) .sidebar { background: linear-gradient(180deg, #0A1B36 0%, var(--sv-night-2) 100%) !important; box-shadow: none !important; }

/* ---------- Aperçu réservé aux administrateurs : pastille « Aperçu du style … » ---------- */
.ps-sv-badge { position: fixed; z-index: 2147483000; left: max(14px, env(safe-area-inset-left, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 999px; background: #0B1A33; color: #FFFFFF;
  font: 600 12.5px/1.2 Montserrat, system-ui, -apple-system, sans-serif; box-shadow: 0 10px 30px rgba(3, 10, 24, 0.35); }
.ps-sv-badge a { color: #0B1A33; background: #FFFFFF; border-radius: 999px; padding: 5px 10px; font-weight: 700; text-decoration: none; }
.ps-sv-badge a:focus-visible { outline: 2px solid #7DB4F0; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { html.ps-sv body header.header-standard { transition: none; } }