/* ============================================================
   Vivre en Esprit — Design system (THÈME LUMINEUX UNIQUEMENT)
   Couleurs : bleu #1a4a8a · bleu ciel #4a90d9 · doré #c9a227
              violet #7b5ea7 · fond #faf8f3 · texte #2d2a26
   ============================================================ */

:root {
  --bleu: #1a4a8a;
  --bleu-ciel: #4a90d9;
  --bleu-clair: #e8f0fb;
  --dore: #c9a227;
  --dore-clair: #f7ecd0;
  --violet: #7b5ea7;
  --violet-clair: #efe9f7;
  --fond: #faf8f3;
  --carte: #ffffff;
  --texte: #2d2a26;
  --texte-doux: #6b6258;
  --bordure: #e8e0d2;
  --vert: #3e9e5c;
  --orange: #d97a2b;
  --rouge: #c0392b;
  --gris: #8a8a8a;
  --ombre: 0 4px 18px rgba(26, 74, 138, 0.10);
  --ombre-forte: 0 8px 28px rgba(26, 74, 138, 0.16);
  --rayon: 16px;
  --rayon-sm: 10px;
  --header-h: 64px;
  --bottom-nav-h: 64px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fond);
  color: var(--texte);
  line-height: 1.6;
  min-height: 100vh;
  padding-bottom: 0;
}

a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ---------- Typographie ---------- */
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.6em; color: var(--bleu); }
h1 { font-size: 2rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.1rem; }
.sec-title {
  display: flex; align-items: center; gap: 10px;
  margin: 2.2rem 0 1rem;
}
.sec-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--bordure), transparent);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-size: 0.95rem; font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--bleu), var(--bleu-ciel));
  color: #fff; box-shadow: var(--ombre);
}
.btn-primary:hover { box-shadow: var(--ombre-forte); text-decoration: none; }
.btn-outline {
  background: #fff; color: var(--bleu); border-color: var(--bleu);
}
.btn-outline:hover { background: var(--bleu-clair); text-decoration: none; }
.btn-gold {
  background: linear-gradient(135deg, var(--dore), #e3b93c);
  color: #3a2f08;
}
.btn-ghost {
  background: transparent; color: var(--bleu); border-color: var(--bordure);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.badge-sim   { background: #fdebd7; color: var(--orange); border: 1px solid var(--orange); }
.badge-demo  { background: #f9dcd6; color: var(--rouge);  border: 1px solid var(--rouge); }
.badge-brouillon { background: #eee; color: var(--gris);  border: 1px solid var(--gris); }
.badge-bientot { background: var(--violet-clair); color: var(--violet); border: 1px solid var(--violet); }
.badge-gold  { background: var(--dore-clair); color: #8a6d14; border: 1px solid var(--dore); }
.badge-bleu  { background: var(--bleu-clair); color: var(--bleu); border: 1px solid var(--bleu-ciel); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
  box-shadow: 0 2px 12px rgba(26, 74, 138, 0.06);
  height: var(--header-h);
}
.header-inner {
  max-width: 1200px; margin: 0 auto; height: var(--header-h);
  display: flex; align-items: center; gap: 18px; padding: 0 18px;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 800; color: var(--bleu); white-space: nowrap; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand-cross { font-size: 1.5rem; }
.brand-name {
  background: linear-gradient(120deg, var(--bleu), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Nav desktop */
.main-nav {
  display: flex; gap: 4px; margin-left: auto;
  flex: 1 1 auto; min-width: 0; overflow-x: auto;
  scrollbar-width: none; /* noms toujours accessibles, sans barre visible */
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a { flex-shrink: 0; }
.main-nav a {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--rayon-sm);
  color: var(--texte); font-size: 0.9rem; font-weight: 500; cursor: pointer;
  white-space: nowrap; text-align: center; line-height: 1.25;
}
.main-nav a:hover { background: var(--bleu-clair); text-decoration: none; }
.main-nav a.active { background: var(--bleu); color: #fff; }
.nav-ic { font-size: 1.05rem; }

.header-actions { display: flex; align-items: center; gap: 10px; }

/* Bandeau recherche (2026-10-12 : rempli par VE.renderSearchBar(), visible sur toutes les pages) */
.search-strip {
  background: var(--bleu-clair, #eef3fb);
  border-bottom: 1px solid var(--bordure, #e2ddcf);
  padding: 8px 18px;
}
.search-strip .header-search { max-width: 640px; margin: 0 auto; }
.header-search form { display: flex; gap: 8px; }
.header-search input[type="search"] {
  flex: 1 1 auto; min-width: 0; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--bordure, #e2ddcf); font-size: 0.85rem; background: #fff;
}
.header-search .ve-searchbar-btn { padding: 9px 16px; border-radius: 999px; white-space: nowrap; }

/* Toggle langue */
.lang-toggle {
  display: flex; background: var(--bleu-clair); border-radius: 999px; padding: 3px;
}
.lang-btn {
  border: 0; background: transparent; padding: 5px 12px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; cursor: pointer; color: var(--bleu);
}
.lang-btn.active { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); }

/* ---------- Layout ---------- */
#app {
  max-width: 1200px; margin: 0 auto; padding: 26px 18px 60px;
  min-height: calc(100vh - var(--header-h) - 90px);
}
.view { display: none; animation: fadein .25s ease; }
.view.active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Hero ---------- */
.hero {
  border-radius: 24px;
  padding: 48px 36px;
  background:
    radial-gradient(circle at 85% 20%, rgba(201,162,39,.22), transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(74,144,217,.18), transparent 45%),
    linear-gradient(135deg, #ffffff, var(--bleu-clair));
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre);
  text-align: center;
  margin-bottom: 30px;
}
.hero .hero-cross { font-size: 2.6rem; }
.hero h1 { font-size: 2.4rem; margin: 8px 0 10px; }
.hero h1 .gold { color: var(--dore); }
.hero p { color: var(--texte-doux); font-size: 1.08rem; max-width: 640px; margin: 0 auto 22px; }
.hero .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Cartes & grilles ---------- */
.grid { display: grid; gap: 18px; }
.grid.g2 { grid-template-columns: repeat(2, 1fr); }
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
.grid.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--carte); border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre);
  padding: 22px;
}
.card h3 { margin-top: 0; display: flex; align-items: center; gap: 8px; }
.card .sub { color: var(--texte-doux); font-size: 0.9rem; }
.card.clickable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.card.clickable:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }

/* Cartes vidéo */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.video-card { overflow: hidden; padding: 0; }
.video-card .thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.video-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-card .thumb .dur {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0,0,0,.75); color: #fff;
  font-size: 0.72rem; padding: 2px 8px; border-radius: 6px;
}
.video-card .vbody { padding: 14px 16px 16px; }
.video-card .vtitle { font-weight: 600; font-size: 0.95rem; margin: 0 0 6px; color: var(--texte); }
.video-card .vmeta { display: flex; gap: 8px; align-items: center; font-size: 0.8rem; color: var(--texte-doux); }

/* ---------- Listes ---------- */
.list-row {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
  padding: 14px 16px; margin-bottom: 10px;
}
.list-row .grow { flex: 1; }

/* ---------- Formulaires ---------- */
input, select, textarea {
  font: inherit; padding: 10px 14px; border-radius: var(--rayon-sm);
  border: 1px solid var(--bordure); background: #fff; color: var(--texte);
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bleu-ciel); border-color: var(--bleu-ciel); }
label { font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; display: block; }
.field { margin-bottom: 14px; }

/* ---------- Placeholder / bientôt ---------- */
.placeholder {
  text-align: center; padding: 40px 24px;
  border: 2px dashed var(--bordure); border-radius: var(--rayon);
  background: #fff; color: var(--texte-doux);
}
.placeholder .big-ic { font-size: 2.4rem; margin-bottom: 10px; }

/* ---------- Footer ---------- */
.site-footer {
  background: #fff; border-top: 1px solid var(--bordure);
  padding: 26px 18px; text-align: center; color: var(--texte-doux); font-size: 0.88rem;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-line { margin: 4px 0; }
.footer-admin { font-size: 0.78rem; }
.footer-admin a { color: var(--gris); }
.footer-admin .badge-demo { margin-left: 8px; }

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: #fff; border-top: 1px solid var(--bordure);
  box-shadow: 0 -4px 18px rgba(26, 74, 138, 0.10);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav a {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; font-size: 0.68rem; color: var(--texte-doux);
  border-radius: var(--rayon-sm); cursor: pointer; font-weight: 600;
}
.bottom-nav a .nav-lb {
  font-size: 0.6rem; line-height: 1.25; text-align: center;
  overflow-wrap: break-word; hyphens: auto; max-width: 100%;
}
.bottom-nav a .nav-ic { font-size: 1.3rem; }
.bottom-nav a.active { color: var(--bleu); background: var(--bleu-clair); }
.bottom-nav a:hover { text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1400px) {
  /* 2026-10-12 : les noms de sections restent visibles (demande Dave) — version compacte */
  .main-nav a { padding: 8px 10px; white-space: nowrap; }
  .main-nav a .nav-ic { font-size: 1.2rem; }
  .main-nav a .nav-lb { font-size: 0.82rem; }
}

@media (max-width: 900px) {
  .main-nav { display: none; }
  .bottom-nav { display: flex; }
  body { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
  .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: 1fr 1fr; }
  .hero { padding: 36px 22px; }
  .hero h1 { font-size: 1.8rem; }
  #btn-parcours { display: none; }
}

@media (max-width: 560px) {
  .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: 1fr; }
  .header-inner { gap: 8px; padding: 0 10px; }
  .brand-name { display: none; } /* logo seul sur mobile (4 langues dans le header) */
  .brand .ve-logo { width: 40px; height: 40px; }
  #btn-login { padding: 8px 10px; font-size: 0.78rem; }
  #btn-login .badge-sim { display: none; }
  .lang-btn { padding: 5px 8px; font-size: 0.72rem; }
  .header-actions { gap: 6px; }
  #app { padding: 18px 12px 48px; }
}

/* ---------- Utilitaires ---------- */
.text-center { text-align: center; }
.mt { margin-top: 18px; }
.mt-lg { margin-top: 30px; }
.muted { color: var(--texte-doux); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }