/* ======================================================================
   PULPE! — Thème unifié (header, profil, polices, fonds cinématiques)
   S'applique à toutes les pages de l'app (#app) pour garantir une
   cohérence visuelle entre Accueil, Labo, Grimoire, Codex, Traçabilité…
   ====================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;0,9..144,900;1,9..144,700;1,9..144,900&family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=Archivo+Black&family=JetBrains+Mono:wght@400;600&display=swap');

/* ---- HEADER ------------------------------------------------------- */
#app .hdr {
  background: rgba(245, 247, 251, 0.9) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(99, 102, 241, 0.12) !important;
}

/* Logo mark (carré dégradé indigo→violet avec "P!") */
#app .logo-w {
  display: flex;
  align-items: center;
  gap: 12px;
}

#app .logo-ic {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #a855f7) !important;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
  overflow: hidden;
}

#app .logo-ic .app-logo-img { display: none; }

.logo-mark-txt { display: none; }
#app .logo-ic .logo-mark-txt {
  display: inline-block;
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: 17px;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.5px;
}

#app .logo-nm {
  font-family: "Fraunces", serif !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  color: #0a1628 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.15 !important;
}

#app .logo-nm span { color: #6366f1; }

#app .logo-sl {
  font-size: 10px !important;
  color: #6366f1 !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

/* ---- NAV PRINCIPALE ---------------------------------------------- */
#app .nav {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  border-radius: 999px !important;
  padding: 5px !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.05);
}

#app .nb {
  color: #6b7280 !important;
}

#app .nb:hover { color: #0a1628 !important; }

#app .nb.act {
  background: linear-gradient(135deg, #6366f1, #818cf8) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

#app .nb-faq {
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
  background: rgba(6, 182, 212, 0.08) !important;
  color: #0f766e !important;
  font-weight: 700 !important;
}

#app .nb-faq.act {
  background: linear-gradient(135deg, #06b6d4, #6366f1) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ---- PROFIL UTILISATEUR (uniforme sur toutes les pages) ---------- */
#app .user-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 6px 6px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(99, 102, 241, 0.12) !important;
  border-radius: 100px !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.05) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#app .user-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #ec4899) !important;
  color: #fff !important;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
}

#app .user-info { line-height: 1.2; }

#app .user-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #0a1628 !important;
}

#app .user-role {
  font-size: 10px !important;
  color: #6366f1 !important;
}

#app .user-chevron {
  color: #6366f1;
  font-size: 10px;
}

/* ---- BANDEAU SAISON ---------------------------------------------- */
#app .band.band--ticker {
  background: linear-gradient(180deg, #EEF2FF 0%, #E0E7FF 100%) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(99, 102, 241, 0.14) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.14) !important;
}

#app .band .bl {
  color: #312E81 !important;
  font-weight: 700 !important;
  position: relative;
}

/* Les pastilles de produits défilantes : texte foncé et lisible sur fond bleu clair */
#app .band--ticker .bch {
  color: #1E3A8A !important;
  font-weight: 600 !important;
}

#app .band--ticker .bch::before {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
}

/* Adoucit les fondus gauche/droite pour qu'ils matchent le nouveau fond */
#app .band-ticker-fade--l {
  background: linear-gradient(to right, #EEF2FF 0%, rgba(238, 242, 255, 0) 100%) !important;
}
#app .band-ticker-fade--r {
  background: linear-gradient(to left, #E0E7FF 0%, rgba(224, 231, 255, 0) 100%) !important;
}

#app .band .bl::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e !important;
  margin-right: 7px;
  animation: pulse-dot 2s infinite;
}

#app .band-ticker-track {
  animation: ticker 40s linear infinite;
}

#app .band-ticker-fade { width: 140px; }

/* ======================================================================
   FOND CINÉMATIQUE PARTAGÉ (Codex, Traçabilité, Mes recettes, Profil)
   ====================================================================== */
#p-cod.pg,
#p-tra.pg,
#p-mesrec.pg,
#p-profil.pg {
  position: relative;
  background: #f5f7fb;
  overflow: hidden;
  isolation: isolate;
  font-family: "Inter", "DM Sans", sans-serif;
  color: #0a1628;
}

#p-cod .inner,
#p-tra .inner,
#p-mesrec .inner,
#p-profil .inner {
  position: relative;
  z-index: 2;
}

/* Les pseudo-éléments ::before/::after existants jouent le rôle d'orbes
   sur la page. On repeint juste leur couleur pour qu'elle soit identique à
   l'accueil, sans toucher à leurs dimensions / positions / animations. */
#p-cod.pg.on::before,
#p-mesrec.pg.on::before,
#p-profil.pg.on::before {
  background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.42) 0%, transparent 68%) !important;
}

#p-cod.pg.on::after,
#p-mesrec.pg.on::after,
#p-profil.pg.on::after {
  background: radial-gradient(circle at 50% 50%, rgba(129, 140, 248, 0.3) 0%, transparent 68%) !important;
}

#p-tra.pg.on::before {
  background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.42) 0%, transparent 68%) !important;
}

#p-tra.pg.on::after {
  background: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.3) 0%, transparent 68%) !important;
}

/* ---- Typographie PG-OVER / PG-TITLE alignée sur l'accueil -------- */
#p-cod .pg-over,
#p-tra .pg-over,
#p-mesrec .pg-over,
#p-profil .pg-over,
#p-lab .pg-over,
#p-gri .pg-over {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: #4338ca !important;
  width: fit-content;
}

#p-cod .pg-title,
#p-tra .pg-title,
#p-mesrec .pg-title,
#p-profil .pg-title {
  font-family: "Fraunces", serif !important;
  font-weight: 900 !important;
  font-size: clamp(34px, 5vw, 48px) !important;
  line-height: 1.02 !important;
  letter-spacing: -1.5px !important;
  color: #0a1628 !important;
  margin: 12px 0 18px !important;
}

#p-cod .pg-title em,
#p-tra .pg-title em,
#p-mesrec .pg-title em,
#p-profil .pg-title em,
#p-lab .pg-title em,
#p-gri .pg-title em {
  font-style: italic;
  background: linear-gradient(120deg, #4338ca 0%, #6366f1 50%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Cartes / blocs génériques alignés sur l'accueil ------------- */
#p-cod .fb,
#p-tra .fb,
#p-mesrec .fb,
#p-profil .fb {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(99, 102, 241, 0.12) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
}

#p-cod .fbt,
#p-tra .fbt,
#p-mesrec .fbt,
#p-profil .fbt {
  font-family: "Fraunces", serif !important;
  font-weight: 700 !important;
  color: #0a1628 !important;
  letter-spacing: -0.2px;
}

/* ---- Onglets (tabs) harmonisés ----------------------------------- */
#p-cod .tabs,
#p-tra .tabs {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(99, 102, 241, 0.1) !important;
  border-radius: 14px !important;
  padding: 5px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  gap: 4px;
}

#p-cod .tab,
#p-tra .tab {
  color: #6b7280 !important;
  border-radius: 10px !important;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

#p-cod .tab.a,
#p-tra .tab.a {
  background: linear-gradient(135deg, #6366f1, #818cf8) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* ---- Boutons primaires génériques (sur cod/tra) ------------------ */
#p-cod .bpasse,
#p-tra .bpasse,
#p-mesrec .bpasse,
#p-profil .bpasse {
  background: linear-gradient(135deg, #4338ca, #6366f1) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-family: "DM Sans", sans-serif !important;
  transition: transform 0.2s, box-shadow 0.2s;
}

#p-cod .bpasse:hover,
#p-tra .bpasse:hover,
#p-mesrec .bpasse:hover,
#p-profil .bpasse:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(67, 56, 202, 0.45);
}

/* ======================================================================
   HARMONISATION PALETTE : Codex, Traçabilité, Mes recettes, Profil
   doivent partager STRICTEMENT la palette de l'Accueil
   (indigo / violet / bleu ciel / lavande + papier très clair)
   ====================================================================== */

/* Halos #app::before — même recette que l'accueil sur toutes ces pages */
#app:has(#p-cod.pg.on)::before,
#app:has(#p-tra.pg.on)::before,
#app:has(#p-mesrec.pg.on)::before,
#app:has(#p-profil.pg.on)::before,
#app:has(#p-faq.pg.on)::before {
  background:
    radial-gradient(ellipse 78% 58% at 14% 6%, rgba(129, 140, 248, 0.28) 0%, transparent 58%),
    radial-gradient(ellipse 68% 52% at 86% 14%, rgba(56, 189, 248, 0.24) 0%, transparent 52%),
    radial-gradient(ellipse 58% 48% at 42% 94%, rgba(167, 139, 250, 0.2) 0%, transparent 50%) !important;
}

/* Couche "life" identique à l'accueil */
#app:has(#p-cod.pg.on) > .pulpe-bg-life,
#app:has(#p-tra.pg.on) > .pulpe-bg-life,
#app:has(#p-mesrec.pg.on) > .pulpe-bg-life,
#app:has(#p-profil.pg.on) > .pulpe-bg-life,
#app:has(#p-faq.pg.on) > .pulpe-bg-life {
  background:
    radial-gradient(ellipse 92% 72% at 10% 6%, rgba(129, 140, 248, 0.2) 0%, transparent 55%),
    radial-gradient(ellipse 72% 58% at 92% 88%, rgba(56, 189, 248, 0.16) 0%, transparent 52%),
    radial-gradient(ellipse 52% 42% at 48% 48%, rgba(167, 139, 250, 0.12) 0%, transparent 60%) !important;
}

/* Variables CSS : papier clair + accents indigo (copie accueil) */
#app:has(#p-cod.pg.on),
#app:has(#p-tra.pg.on),
#app:has(#p-mesrec.pg.on),
#app:has(#p-profil.pg.on),
#app:has(#p-faq.pg.on) {
  --pulpe-bg: #f5f7fb !important;
  --pulpe-paper: #ffffff !important;
  --pulpe-paper-up: #ffffff !important;
  --pulpe-paper-muted: #f1f5f9 !important;
  --pulpe-edge: rgba(99, 102, 241, 0.22) !important;
  --pulpe-accent-a: #6366f1 !important;
  --pulpe-accent-b: #818cf8 !important;
  --pulpe-nav-act-bg: rgba(99, 102, 241, 0.34) !important;
  --pulpe-nav-act: #ffffff !important;
  --pulpe-user-avatar-bg: rgba(99, 102, 241, 0.28) !important;
  --pulpe-user-role: #6366f1 !important;
  --pulpe-focus-ring: rgba(99, 102, 241, 0.45) !important;
  --pulpe-surface-soft: rgba(99, 102, 241, 0.12) !important;
  --pulpe-atm-glow: rgba(99, 102, 241, 0.16) !important;
}

/* Orbes décoratifs : on remplace vert/ambre/cyan par indigo/violet/lavande */
.pulpe-page-orbs--tra .pulpe-page-orb--a {
  background: radial-gradient(circle at 45% 40%, rgba(99, 102, 241, 0.22) 0%, transparent 68%) !important;
}
.pulpe-page-orbs--tra .pulpe-page-orb--b {
  background: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.2) 0%, transparent 68%) !important;
}
.pulpe-page-orbs--tra .pulpe-page-orb--c {
  background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.18) 0%, transparent 68%) !important;
}
.pulpe-page-orbs--tra .pulpe-page-orb--d {
  background: radial-gradient(circle at 50% 50%, rgba(129, 140, 248, 0.16) 0%, transparent 68%) !important;
}
.pulpe-page-orbs--tra .pulpe-page-orb--e {
  background: radial-gradient(circle at 50% 50%, rgba(165, 180, 252, 0.15) 0%, transparent 68%) !important;
}

/* Codex : déjà indigo, on fige les teintes au strict accueil */
.pulpe-page-orbs--cod .pulpe-page-orb--a {
  background: radial-gradient(circle at 55% 45%, rgba(99, 102, 241, 0.22) 0%, transparent 68%) !important;
}
.pulpe-page-orbs--cod .pulpe-page-orb--b {
  background: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.2) 0%, transparent 68%) !important;
}
.pulpe-page-orbs--cod .pulpe-page-orb--c {
  background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.18) 0%, transparent 68%) !important;
}
.pulpe-page-orbs--cod .pulpe-page-orb--d {
  background: radial-gradient(circle at 50% 50%, rgba(129, 140, 248, 0.15) 0%, transparent 68%) !important;
}

/* Fond de page lui-même (sous .inner) : papier clair homogène */
#p-cod.pg,
#p-tra.pg,
#p-mesrec.pg,
#p-profil.pg,
#p-faq.pg {
  background: #f5f7fb !important;
  color: #0a1628 !important;
}

/* Texte par défaut : plus foncé sur fond clair */
#p-cod.pg.on,
#p-tra.pg.on,
#p-mesrec.pg.on,
#p-profil.pg.on {
  color: #0a1628 !important;
}

#p-cod.pg .fb,
#p-tra.pg .fb,
#p-mesrec.pg .fb,
#p-profil.pg .fb {
  color: #0a1628 !important;
}

#p-cod.pg p,
#p-tra.pg p,
#p-mesrec.pg p,
#p-profil.pg p,
#p-cod.pg label,
#p-tra.pg label,
#p-mesrec.pg label,
#p-profil.pg label {
  color: #334155 !important;
}

/* ======================================================================
   CODEX — Arsenal & Geste : cartes texte blanc sur fond bleu
   (harmonisation demandée : les deux panneaux partagent le même style)
   ====================================================================== */
#app:has(#p-cod.pg.on) .arsenal-card,
#app:has(#p-cod.pg.on) .geste-terme-row {
  background: linear-gradient(135deg, #4338CA 0%, #6366F1 60%, #818CF8 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 10px 26px rgba(67, 56, 202, 0.22);
  color: #ffffff !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

#app:has(#p-cod.pg.on) .arsenal-card:hover,
#app:has(#p-cod.pg.on) .geste-terme-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(67, 56, 202, 0.35);
  filter: brightness(1.05);
  border-color: rgba(255, 255, 255, 0.32) !important;
}

#app:has(#p-cod.pg.on) .arsenal-card-nom,
#app:has(#p-cod.pg.on) .geste-terme-nom {
  color: #ffffff !important;
  font-weight: 700 !important;
}

#app:has(#p-cod.pg.on) .arsenal-card-apercu,
#app:has(#p-cod.pg.on) .geste-terme-apercu {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Titre de section Le Geste visible sur fond clair */
#app:has(#p-cod.pg.on) .geste-terme-sec-h {
  color: #4338CA !important;
  border-bottom-color: rgba(99, 102, 241, 0.22) !important;
}

/* Anciennes touches vert / ambre de la Traçabilité → remplacées par indigo */
#app:has(#p-tra.pg.on) .fp.a,
#app:has(#p-tra.pg.on) .enc-filter-btn.enc-filter-active,
#app:has(#p-tra.pg.on) .codex-arsenal-panel .arsenal-cat-pill.a {
  background: linear-gradient(135deg, #4338ca, #6366f1) !important;
  color: #fff !important;
  border-color: transparent !important;
}

#app:has(#p-tra.pg.on) .bpasse {
  background: linear-gradient(135deg, #4338ca, #6366f1) !important;
  color: #fff !important;
}

#app:has(#p-tra.pg.on) .bpasse:hover {
  box-shadow: 0 12px 30px rgba(67, 56, 202, 0.45) !important;
}

#app:has(#p-tra.pg.on) .rbadge {
  background: linear-gradient(135deg, #4338ca, #818cf8) !important;
  color: #fff !important;
}

#app:has(#p-tra.pg.on) .tots {
  background: linear-gradient(135deg, #4338ca, #6366f1) !important;
  color: #fff !important;
}

#app:has(#p-tra.pg.on) .profile-card {
  background: linear-gradient(135deg, #4338ca, #6366f1) !important;
  color: #fff !important;
}

#app:has(#p-tra.pg.on) .profile-card .profile-name,
#app:has(#p-tra.pg.on) .profile-card .profile-pseudo,
#app:has(#p-tra.pg.on) .profile-card .profile-metier {
  color: #fff !important;
}

#app:has(#p-tra.pg.on) .profile-card .profile-pseudo {
  color: rgba(255, 255, 255, 0.78) !important;
}

#app:has(#p-tra.pg.on) .profile-avatar-big {
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.25) !important;
}

/* Footer par page : même couleur papier que l'accueil */
body:has(#app:not(.hidden)):has(#p-cod.pg.on) .site-footer,
body:has(#app:not(.hidden)):has(#p-tra.pg.on) .site-footer,
body:has(#app:not(.hidden)):has(#p-mesrec.pg.on) .site-footer,
body:has(#app:not(.hidden)):has(#p-profil.pg.on) .site-footer,
body:has(#app:not(.hidden)):has(#p-faq.pg.on) .site-footer {
  background: #f5f7fb !important;
  color: #4b5563 !important;
  border-top: 1px solid rgba(99, 102, 241, 0.12) !important;
}

/* ---- Watermark géant (type "PULPE!") partagé ----------------------- */
.pulpe-page-giant {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Fraunces", serif;
  font-size: 38vw;
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.8px rgba(99, 102, 241, 0.22);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.22), rgba(129, 140, 248, 0.06) 55%, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}

.pulpe-page-giant--small {
  font-size: 26vw;
}

/* Assure que toutes les pages cinématiques cadrent correctement le watermark */
#p-mesrec.pg,
#p-profil.pg,
#p-cod.pg,
#p-tra.pg {
  overflow: hidden !important;
}

/* ---- Animations partagées ---------------------------------------- */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

@keyframes breathe {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.82; }
}

@keyframes float-slow {
  0% { transform: translate(0, 0); }
  50% { transform: translate(15px, -8px); }
  100% { transform: translate(-10px, 10px); }
}

@keyframes shimmer {
  from { left: -100%; }
  to { left: 200%; }
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}