/* assets/hp-variants.css — Haut de la page d'accueil allégé (04/11/2026), inspiré de lovable.dev.
   Chargé seulement quand l'administrateur a mis en ligne une autre version que l'actuelle (scripts/hp_variant_lib.php ;
   aperçu ?hp_v=…). Classes sur <body> : hp-var-x (toute nouvelle version) + hp-var-a | hp-var-b | hp-var-c, et pour les
   versions épurées (B2, C) hp-var-lite (+ hp-var-b pour B2). Habillage seul : mêmes éléments, mêmes scripts.
   Visiteurs non connectés (hp-b3-guest) : vue réduite commune (titre, zone de saisie, 3 raccourcis, connexions en logos).
   Toutes les règles commencent par « html body.… » : les styles hp-b3, écrits plus loin dans la page, l'emportent sinon. */

/* ---------- Commun à toutes les nouvelles versions ---------- */
html body.hp-var-x #hp-section-01 .hp-subtitle { display: none !important; }
html body.hp-var-x #hp-section-01 #unifiedPrompt { border-radius: 24px !important; }
html body.hp-var-x #hp-section-01 #unifiedPrompt .assistant-strip {
  background: transparent !important; color: #33465E !important;
  border-bottom: 1px solid #EEF2F7 !important; border-radius: 24px 24px 0 0 !important;
}
html body.hp-var-x #hp-section-01 #unifiedPrompt .hp-b3-status,
html body.hp-var-x #hp-section-01 #unifiedPrompt .hp-b3-status * { color: #4B5D74 !important; }
html body.hp-var-x #hp-section-01 #unifiedPrompt .hp-b3-nets { color: #33465E !important; }
/* phrase d'introduction des visiteurs (« Votre agent IA rédige vos posts… ») : texte foncé lisible sur la zone blanche */
html body.hp-var-x #hp-section-01 #unifiedPrompt .assistant-strip .chips.no-auth .info { color: #33465E !important; opacity: 1 !important; text-shadow: none !important; }
/* le champ « Décrivez votre post social… » ne touche plus le haut du bloc blanc (04/11 soir, retour de l'utilisateur) :
   16 px sous le bord quand la phrase d'introduction est masquée (visiteurs), 14 px sous la ligne d'état sinon */
html body.hp-var-x #hp-section-01 #unifiedPrompt .hp-composer { margin-top: 4px !important; }
html body.hp-var-x.hp-b3-guest #hp-section-01 #unifiedPrompt .hp-composer { margin-top: 16px !important; }
html body.hp-var-x #hp-section-01 #hpPromptInput { background: #FFFFFF !important; border-color: transparent !important; color: #0B1A33 !important; }
html body.hp-var-x #hp-section-01 #hpCaps2 .hp-cap2 {
  background: transparent !important; border-color: #E1E8F2 !important; box-shadow: none !important;
  color: #33465E !important; font-weight: 500 !important; border-radius: 999px !important;
}
html body.hp-var-x #hp-section-01 #hpCaps2 .hp-cap2:hover { border-color: #BCD3EE !important; background: #F6F9FD !important; }
/* bouton « Créer mon compte gratuit » : bleu un peu plus soutenu pour que le texte blanc reste lisible (contraste ≥ 4,5) */
html body.hp-var-x header.header-homepage .auth-buttons .nav-primary { background: linear-gradient(135deg, #1D6AE5, #185FA5) !important; color: #FFFFFF !important; }

/* ---------- A · Lumière : fond clair, halo bleu de la marque sous la zone de saisie ---------- */
html body.hp-var-a #hpCarousel { display: none !important; }
html body.hp-var-a .full-screen-image {
  background:
    radial-gradient(60% 46% at 50% 92%, rgba(37,99,235,0.40) 0%, rgba(31,182,232,0.26) 40%, rgba(124,108,246,0.12) 64%, rgba(246,248,252,0) 82%),
    #F6F8FC !important;
}
html body.hp-var-a #hp-section-01,
html body.hp-var-a #hp-section-01 .hp-title,
html body.hp-var-a #hp-section-01 .hp-title-line,
html body.hp-var-a #hp-section-01 #hpTypeTxt { color: #0B1A33 !important; text-shadow: none !important; }
html body.hp-var-a #hp-section-01 h1.hp-title .hp-title-line.hp-title-line-1 { color: #0B1A33 !important; -webkit-text-fill-color: #0B1A33 !important; }
html body.hp-var-a #hp-section-01 .hp-type-caret { color: #2563EB !important; }
html body.hp-var-a #hpAgencyTag {
  background: rgba(255,255,255,0.82) !important; color: #0B1A33 !important; border-color: #DCE4EF !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body.hp-var-a #hpAgencyTag:hover { background: #FFFFFF !important; border-color: #BCD3EE !important; }
html body.hp-var-a #hp-section-01 #unifiedPrompt { box-shadow: 0 24px 60px rgba(11,26,51,0.14) !important; border: 1px solid #E1E8F2 !important; }
html body.hp-var-a #hp-section-01 #unifiedPrompt .chooser-rail .chip { background: #F3F6FA !important; color: #0B1A33 !important; border-color: #DCE4EF !important; }
html body.hp-var-a .hp-b3-hub-t,
html body.hp-var-a .hp-b3-hub-t * { color: #0B1A33 !important; text-shadow: none !important; }
html body.hp-var-a .hp-b3-hub-n { color: #14532D !important; background: rgba(22,163,74,0.10) !important; border-color: rgba(22,163,74,0.30) !important; }
html body.hp-var-a .hp-b3-hub-all { color: #185FA5 !important; }
html body.hp-var-a .hp-b3-hub-cat {
  background: rgba(255,255,255,0.82) !important; color: #0B1A33 !important; border-color: #DCE4EF !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body.hp-var-a .hp-b3-hub-cat:hover { background: #FFFFFF !important; border-color: #BCD3EE !important; }
html body.hp-var-a .hp-b3-hub-c { color: #33465E !important; background: #EEF2F7 !important; }
html body.hp-var-a .hp-b3-steps { background: rgba(255,255,255,0.82) !important; border-color: #DCE4EF !important; color: #0B1A33 !important; }
html body.hp-var-a .hp-b3-steps * { color: #0B1A33 !important; }
html body.hp-var-a .hp-b3-micro,
html body.hp-var-a .hp-b3-micro * { color: #33465E !important; }
/* A : bandeau du haut et bas d'écran lisibles sur fond clair */
html body.hp-var-a header.header-homepage:not(.scrolled) .powered-text,
html body.hp-var-a header.header-homepage:not(.scrolled) .powered-text a,
html body.hp-var-a header.header-homepage:not(.scrolled) .hamburger,
html body.hp-var-a header.header-homepage:not(.scrolled) a.nav-link,
html body.hp-var-a header.header-homepage:not(.scrolled) .header-right-container > a:not(.pricing-btn):not(.user-btn):not([class*="create"]),
html body.hp-var-a header.header-homepage:not(.scrolled) a.nav-ghost { color: #0B1A33 !important; text-shadow: none !important; }
html body.hp-var-a header.header-homepage:not(.scrolled) a.nav-outline { color: #0B1A33 !important; border-color: #B8C6D9 !important; background: #FFFFFF !important; text-shadow: none !important; }
html body.hp-var-a header.header-homepage:not(.scrolled) a.nav-ghost:hover { color: #185FA5 !important; }
html body.hp-var-a header.header-homepage:not(.scrolled) .pricing-btn,
html body.hp-var-a header.header-homepage:not(.scrolled) .user-btn { color: #0B1A33 !important; background: #FFFFFF !important; border: 1px solid #DCE4EF !important; }
html body.hp-var-a header.header-homepage:not(.scrolled) .user-btn-name { color: #0B1A33 !important; }
html body.hp-var-a .bottom-section-hp .disclaimer.hp-disc {
  background: rgba(255,255,255,0.80) !important; border-top: 1px solid rgba(11,26,51,0.06) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html body.hp-var-a .bottom-section-hp .disclaimer.hp-disc,
html body.hp-var-a .bottom-section-hp .disclaimer.hp-disc a,
html body.hp-var-a .bottom-section-hp .disclaimer.hp-disc span,
html body.hp-var-a .bottom-section-hp .disclaimer.hp-disc li,
html body.hp-var-a .bottom-section-hp .disclaimer.hp-disc p { color: #33465E !important; text-shadow: none !important; }
html body.hp-var-a .bottom-section-hp img.hp-disc-state { background: #FFFFFF !important; }

/* A en mode sombre : même mise en page, nuit bleue et halo lumineux */
html[data-dk] body.hp-var-a .full-screen-image {
  background:
    radial-gradient(60% 46% at 50% 92%, rgba(56,189,248,0.42) 0%, rgba(59,130,246,0.26) 40%, rgba(139,92,246,0.12) 64%, rgba(8,20,41,0) 82%),
    linear-gradient(180deg, #081429 0%, #0B1F45 60%, #123A7A 100%) !important;
}
html[data-dk] body.hp-var-a #hp-section-01,
html[data-dk] body.hp-var-a #hp-section-01 .hp-title,
html[data-dk] body.hp-var-a #hp-section-01 .hp-title-line,
html[data-dk] body.hp-var-a #hp-section-01 #hpTypeTxt,
html[data-dk] body.hp-var-a .hp-b3-hub-t,
html[data-dk] body.hp-var-a .hp-b3-hub-t *,
html[data-dk] body.hp-var-a .hp-b3-steps,
html[data-dk] body.hp-var-a .hp-b3-steps * { color: #FFFFFF !important; }
html[data-dk] body.hp-var-a #hp-section-01 h1.hp-title .hp-title-line.hp-title-line-1 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
html[data-dk] body.hp-var-a #hp-section-01 .hp-type-caret { color: #7DD3FC !important; }
html[data-dk] body.hp-var-a #hpAgencyTag,
html[data-dk] body.hp-var-a .hp-b3-hub-cat,
html[data-dk] body.hp-var-a .hp-b3-steps { background: rgba(255,255,255,0.08) !important; color: #FFFFFF !important; border-color: rgba(255,255,255,0.20) !important; }
html[data-dk] body.hp-var-a .hp-b3-hub-c { color: #CFE3F7 !important; background: rgba(143,208,255,0.14) !important; }
html[data-dk] body.hp-var-a .hp-b3-hub-n { color: #BBF7D0 !important; background: rgba(74,222,128,0.14) !important; }
html[data-dk] body.hp-var-a .hp-b3-hub-all { color: #A8D4FF !important; }
html[data-dk] body.hp-var-a .hp-b3-micro,
html[data-dk] body.hp-var-a .hp-b3-micro * { color: #C9D6E6 !important; }
html[data-dk] body.hp-var-a .bottom-section-hp .disclaimer.hp-disc { background: rgba(8,20,41,0.55) !important; border-top-color: rgba(255,255,255,0.08) !important; }
html[data-dk] body.hp-var-a .bottom-section-hp .disclaimer.hp-disc,
html[data-dk] body.hp-var-a .bottom-section-hp .disclaimer.hp-disc a,
html[data-dk] body.hp-var-a .bottom-section-hp .disclaimer.hp-disc span,
html[data-dk] body.hp-var-a .bottom-section-hp .disclaimer.hp-disc li,
html[data-dk] body.hp-var-a .bottom-section-hp .disclaimer.hp-disc p { color: #D6E2F0 !important; }
html[data-dk] body.hp-var-a .bottom-section-hp img.hp-disc-state { background: #0A1B33 !important; }
html[data-dk] body.hp-var-a header.header-homepage:not(.scrolled) .powered-text,
html[data-dk] body.hp-var-a header.header-homepage:not(.scrolled) .powered-text a,
html[data-dk] body.hp-var-a header.header-homepage:not(.scrolled) .hamburger,
html[data-dk] body.hp-var-a header.header-homepage:not(.scrolled) a.nav-link,
html[data-dk] body.hp-var-a header.header-homepage:not(.scrolled) .header-right-container > a:not(.pricing-btn):not(.user-btn):not([class*="create"]),
html[data-dk] body.hp-var-a header.header-homepage:not(.scrolled) a.nav-ghost { color: #FFFFFF !important; }
html[data-dk] body.hp-var-a header.header-homepage:not(.scrolled) a.nav-outline { color: #FFFFFF !important; border-color: rgba(255,255,255,0.35) !important; background: transparent !important; }
html[data-dk] body.hp-var-a header.header-homepage:not(.scrolled) .pricing-btn,
html[data-dk] body.hp-var-a header.header-homepage:not(.scrolled) .user-btn,
html[data-dk] body.hp-var-a header.header-homepage:not(.scrolled) .user-btn-name { color: #FFFFFF !important; background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.22) !important; }

/* ---------- B · Photo apaisée (et B2) : photo gardée, assombrie et floutée ---------- */
html body.hp-var-b #hpCarousel img { filter: blur(2px) brightness(0.55) saturate(0.85); }
html body.hp-var-b #hpCarousel::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,20,42,0.52) 0%, rgba(7,20,42,0.66) 45%, rgba(7,20,42,0.92) 100%);
}
html body.hp-var-b #hpAgencyTag,
html body.hp-var-c #hpAgencyTag { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.22) !important; }
html body.hp-var-b #hp-section-01 #unifiedPrompt .chooser-rail .chip,
html body.hp-var-c #hp-section-01 #unifiedPrompt .chooser-rail .chip { background: #0B1A33 !important; color: #FFFFFF !important; border-color: #0B1A33 !important; }
html body.hp-var-b .hp-b3-hub-cat {
  background: transparent !important; border-color: rgba(255,255,255,0.20) !important; color: #E8EEF7 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body.hp-var-b .hp-b3-hub-cat:hover { background: rgba(255,255,255,0.08) !important; }
html body.hp-var-b .hp-b3-hub-ic { opacity: 0.85; }
html body.hp-var-b .hp-b3-hub-n { background: transparent !important; }

/* ---------- C · Nuit vers lumière : sans photo, dégradé du bleu nuit vers un halo lumineux ---------- */
html body.hp-var-c #hpCarousel { display: none !important; }
html body.hp-var-c .full-screen-image {
  background:
    radial-gradient(55% 45% at 50% 100%, rgba(56,189,248,0.50) 0%, rgba(59,130,246,0.28) 40%, rgba(139,92,246,0.13) 65%, rgba(8,20,41,0) 82%),
    linear-gradient(180deg, #081429 0%, #0B1F45 42%, #123A7A 76%, #1C5CB8 100%) !important;
}
html body.hp-var-c #hp-section-01 .hp-type-caret { color: #7DD3FC !important; }
html body.hp-var-c #hp-section-01 #unifiedPrompt { box-shadow: 0 30px 90px rgba(3,10,24,0.55) !important; border-radius: 28px !important; }
html body.hp-var-c .hp-b3-hub-cats {
  display: inline-flex !important; flex-wrap: wrap; justify-content: center; gap: 0 !important;
  padding: 0 !important; border-radius: 16px; overflow: hidden;
  background: rgba(8,20,41,0.35); border: 1px solid rgba(255,255,255,0.12);
}
html body.hp-var-c .hp-b3-hub-cat {
  background: transparent !important; border: 0 !important; border-right: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important; color: #FFFFFF !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body.hp-var-c .hp-b3-hub-cats li:last-child .hp-b3-hub-cat { border-right: 0 !important; }
html body.hp-var-c .hp-b3-hub-cat:hover { background: rgba(255,255,255,0.08) !important; }
html body.hp-var-c .hp-b3-hub-n { background: rgba(74,222,128,0.14) !important; }
html body.hp-var-c .hp-b3-hub-all { color: #FFFFFF !important; }
html body.hp-var-c .bottom-section-hp .disclaimer.hp-disc { background: rgba(8,20,41,0.40) !important; border-top: 1px solid rgba(255,255,255,0.08) !important; }

/* ---------- Visiteurs non connectés, toutes les nouvelles versions : le strict nécessaire (04/11 soir, retour de l'utilisateur
   « les versions déconnectées sont encore trop riches, rendant confuse la navigation ») ---------- */
/* phrase d'introduction de la zone de saisie (le champ « Décrivez votre post social… » suffit), choix du ton, « 4 étapes » */
html body.hp-var-x.hp-b3-guest #hp-section-01 #unifiedPrompt .assistant-strip { display: none !important; }
html body.hp-var-x.hp-b3-guest #hp-section-01 #unifiedPrompt .hp-tone2-row { display: none !important; }
html body.hp-var-x.hp-b3-guest .hp-b3-steps { display: none !important; }
/* trois raccourcis + « Toutes les capacités » (les autres restent dans « Toutes les capacités ») */
html body.hp-var-x.hp-b3-guest #hp-section-01 #hpCaps2Row > .hp-cap2:nth-child(n+4) { display: none !important; }
@media (max-width: 900px) {
  html body.hp-var-x.hp-b3-guest #hp-section-01 #hpCaps2Row > .hp-cap2:nth-child(n+3) { display: none !important; }
}
/* connexions : ligne « Votre assistant IA se connecte à vos outils · 42 connexions sécurisées · Tout voir », puis une rangée
   de logos (3 par famille, sans libellé ni compteur) ; chaque groupe ouvre sa famille dans la fenêtre des connexions */
html body.hp-var-x.hp-b3-guest .hp-b3-hub-cats {
  display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px 18px !important;
  margin: 12px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important;
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body.hp-var-x.hp-b3-guest .hp-b3-hub-cat {
  padding: 4px !important; min-height: 0 !important; gap: 0 !important; background: transparent !important;
  border: 0 !important; border-radius: 12px !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body.hp-var-x.hp-b3-guest .hp-b3-hub-cat:hover { background: rgba(127,140,160,0.14) !important; }
html body.hp-var-x.hp-b3-guest .hp-b3-hub-l,
html body.hp-var-x.hp-b3-guest .hp-b3-hub-c { display: none !important; }
html body.hp-var-x.hp-b3-guest .hp-b3-hub-ic { display: inline-flex !important; gap: 8px !important; opacity: 1 !important; }
/* chaque logo porte déjà son carré arrondi (fichiers /images/brands/*.svg) : aucun fond, aucun arrondi ni anneau ajoutés, sinon un
   liseré blanc pixelisé apparaît sur le bord adouci (retour de l'utilisateur, 04/11) ; ombre qui suit la forme du logo */
html body.hp-var-x.hp-b3-guest .hp-b3-hub-ic img {
  width: 30px !important; height: 30px !important; margin: 0 !important; border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important; -webkit-filter: drop-shadow(0 1px 2px rgba(15,30,60,0.16)); filter: drop-shadow(0 1px 2px rgba(15,30,60,0.16));
}
@media (max-width: 600px) {
  html body.hp-var-x.hp-b3-guest .hp-b3-hub-cats { gap: 6px 10px !important; }
  html body.hp-var-x.hp-b3-guest .hp-b3-hub-ic { gap: 6px !important; }
  html body.hp-var-x.hp-b3-guest .hp-b3-hub-ic img { width: 26px !important; height: 26px !important; }
}
/* bandeau visiteur sur tablette : « Au cœur de Paisible AI » chevauchait « Pourquoi Paisible AI ? » entre 769 et 980 px */
@media (max-width: 980px) {
  html body.hp-var-x.hp-b3-guest header.header-homepage .header-left-container .powered-text { display: none !important; }
}

/* ---------- Versions épurées (B2, C), connecté : sans « 4 étapes », catégories compactes avec leurs logos ---------- */
html body.hp-var-lite .hp-b3-steps { display: none !important; }
html body.hp-var-lite .hp-b3-hub-cat { padding: 7px 12px !important; min-height: 38px !important; font-size: 13px !important; }

/* ---------- Mode sombre (toutes les nouvelles versions) : zone de saisie sombre du site → textes clairs ---------- */
html[data-dk] body.hp-var-x #hp-section-01 #hpPromptInput { background: transparent !important; color: #E8EEF7 !important; }
html[data-dk] body.hp-var-x #hp-section-01 #unifiedPrompt .assistant-strip { border-bottom-color: rgba(255,255,255,0.08) !important; color: #C9D6E6 !important; }
html[data-dk] body.hp-var-x #hp-section-01 #unifiedPrompt .hp-b3-status,
html[data-dk] body.hp-var-x #hp-section-01 #unifiedPrompt .hp-b3-status *,
html[data-dk] body.hp-var-x #hp-section-01 #unifiedPrompt .assistant-strip .chips.no-auth .info { color: #C9D6E6 !important; }
html[data-dk] body.hp-var-x #hp-section-01 #unifiedPrompt .hp-b3-nets { color: #CFE3F7 !important; }
html[data-dk] body.hp-var-x #hp-section-01 #hpCaps2 .hp-cap2 { border-color: rgba(255,255,255,0.14) !important; color: #C9D6E6 !important; }
html[data-dk] body.hp-var-x #hp-section-01 #hpCaps2 .hp-cap2:hover { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.28) !important; }
html[data-dk] body.hp-var-a #hp-section-01 #unifiedPrompt { border-color: rgba(255,255,255,0.10) !important; box-shadow: 0 24px 60px rgba(0,0,0,0.45) !important; }