/* igo-topbar.css — header partagé entre tous les modules igoReal.
 *
 * Usage dans chaque module :
 *   <link rel="stylesheet" href="<path-to>/shared/igo-topbar.css">
 *   <header class="igo-topbar">
 *     <a class="igo-topbar-brand" href="<path-to-hub>/index.html" title="Retour au hub">
 *       <div class="igo-topbar-logo"></div>
 *       <div class="igo-topbar-text">
 *         <div class="igo-topbar-title">igoReal</div>
 *         <div class="igo-topbar-sub">BY L'ORÉAL · <span class="module-name">…</span></div>
 *       </div>
 *     </a>
 *     <div class="igo-topbar-spacer"></div>
 *     <div class="igo-topbar-actions"><!-- boutons module --></div>
 *     <div class="igo-topbar-powered">powered by <strong>Igonogo</strong></div>
 *   </header>
 *
 * Le brand est toujours cliquable → retour au hub (sauf bien sûr quand on
 * EST sur le hub, où le lien pointe vers index.html lui-même = no-op).
 */

:root {
  --igo-col-intense:   #4E2A8E;
  --igo-col-medium:    #DCD0EA;
  --igo-col-soft:      #B1A4CE;
  --igo-col-bg:        #ECE9F3;
  --igo-col-page-bg:   #F5F2FA;
  --igo-col-text:      #1A1A1A;
  --igo-col-text-soft: #555555;
  --igo-col-border:    #E0DCEC;
}

.igo-topbar {
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--igo-col-border);
  background: white;
  font-family: 'L\'OREAL Essentielle', 'Helvetica Neue', Arial, sans-serif;
}

.igo-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 8px;
  transition: background 0.15s;
}
.igo-topbar-brand:hover {
  background: var(--igo-col-page-bg);
}

/* Logo : pastille violette type "L'Oréal" — peut être remplacé par un vrai SVG plus tard */
.igo-topbar-logo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--igo-col-intense);
  position: relative;
  flex: 0 0 24px;
}
.igo-topbar-logo::after {
  content: 'L';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 13px;
  font-weight: 700;
  font-family: serif;
}

/* Logo image igoReal dans le topbar (remplace le wordmark texte). Si le fichier
   est absent, l'attribut onerror révèle le texte de repli (.igo-topbar-title). */
.igo-topbar-logo-img {
  height: 30px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

.igo-topbar-text { display: flex; flex-direction: column; line-height: 1; }
.igo-topbar-title {
  font-size: 17px; font-weight: 700; color: var(--igo-col-intense);
}
.igo-topbar-sub {
  font-size: 10px; color: var(--igo-col-text-soft);
  letter-spacing: 1.2px; text-transform: uppercase; margin-top: 4px;
}
.igo-topbar-sub .module-name {
  color: var(--igo-col-intense); font-weight: 600;
}

.igo-topbar-spacer { flex: 1; }

.igo-topbar-actions {
  display: flex; align-items: center; gap: 8px;
}
.igo-topbar-actions .topbar-field {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 10px; color: var(--igo-col-text-soft);
  text-transform: uppercase; letter-spacing: 0.8px;
}
.igo-topbar-actions .topbar-field input,
.igo-topbar-actions .topbar-field select {
  padding: 6px 10px;
  border: 1px solid var(--igo-col-border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  text-transform: none;
  letter-spacing: 0;
  color: var(--igo-col-text);
}

.igo-topbar-btn {
  background: white;
  color: var(--igo-col-intense);
  border: 1px solid var(--igo-col-border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.igo-topbar-btn:hover {
  background: var(--igo-col-page-bg);
  border-color: var(--igo-col-soft);
}
.igo-topbar-btn.primary {
  background: var(--igo-col-intense);
  color: white;
  border-color: var(--igo-col-intense);
}
.igo-topbar-btn.primary:hover {
  background: #3a1d6e;
}

.igo-topbar-powered {
  font-size: 11px; color: var(--igo-col-text-soft);
}
.igo-topbar-powered strong { color: var(--igo-col-intense); font-weight: 600; }

/* ===== Background hub-page pour le wizard (mode "wizard") ===== */
/* Quand le wizard tourne, on garde la topbar visible et le wizard apparaît
   centré sur fond hub-page gradient. */
body[data-mode="wizard"] .igo-topbar { display: flex !important; }
body.igo-page {
  margin: 0;
  background: linear-gradient(135deg, var(--igo-col-page-bg) 0%, #FFFFFF 100%);
  min-height: 100vh;
}