/* ==========================================================================
   Nutrition Sport Pro — Charte "Premium Coaching" (7.AQ)
   ==========================================================================
   Direction graphique (alignée sur le logo) :
   - Bleu nuit profond + cyan lumineux + vert nutrition
   - Typo : Space Grotesk (titres) + Inter (body) + JetBrains Mono (data)
   - Glass-morphism léger, ombres multi-couches, focus rings doux
   - Conçu pour mode clair ET sombre (cf. [data-bs-theme="dark"] plus bas)

   Pour revert : `git revert <commit>` ou `git reset --hard f7c1dbb`.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* ----- Palette brand (alignée sur le logo : bleu nuit + cyan + vert nutrition) ----- */
  --brand-primary:        #1B3A8B;   /* bleu profond du torse/réseau */
  --brand-primary-hover:  #15306F;   /* plus sombre au survol */
  --brand-primary-soft:   #EAF1FB;   /* fond tinté bleu très clair */
  --brand-popular:        #38BDF8;   /* cyan lumineux (contour du logo) — 2e couleur du gradient */
  --brand-accent:         #22C55E;   /* vert nutrition (feuille du logo) */
  --brand-accent-hover:   #16A34A;   /* vert plus profond */
  --brand-accent-soft:    #ECFDF3;   /* fond tinté vert très clair */

  /* Couleurs de marque dérivées du logo (réutilisables) */
  --brand-cyan:           #38BDF8;   /* cyan contour */
  --brand-cyan-glow:      #7DD3FC;   /* cyan clair (halos) */
  --brand-navy:           #0B1A33;   /* bleu presque noir (fond logo) */

  /* Conservés pour rétro-compat des anciens contrôles legacy */
  --brand-secondary:      #38BDF8;
  --brand-dark:           #0B1A33;
  --brand-light:          #FAFBFC;

  /* ----- Surfaces ----- */
  --surface-bg:           #FAFBFC;   /* body */
  --surface-card:         #FFFFFF;
  --surface-card-hover:   #F8FAFC;
  --surface-muted:        #F1F5F9;

  /* ----- Bordures ----- */
  --border-subtle:        #E2E8F0;
  --border-strong:        #CBD5E1;

  /* ----- Texte ----- */
  --text-base:            #0F172A;   /* slate-900 */
  --text-muted:           #475569;   /* slate-600 */
  --text-faint:           #94A3B8;   /* slate-400 */

  /* ----- Ombres en couches multiples ----- */
  --shadow-sm:    0 1px 2px rgb(15 23 42 / 0.06);
  --shadow-card:  0 4px 14px -4px rgb(15 23 42 / 0.08), 0 2px 6px -2px rgb(15 23 42 / 0.04);
  --shadow-lift:  0 10px 30px -8px rgb(27 58 139 / 0.18), 0 6px 16px -6px rgb(11 26 51 / 0.10);
  --shadow-modal: 0 30px 80px -20px rgb(27 58 139 / 0.30), 0 12px 32px -8px rgb(11 26 51 / 0.16);

  /* ----- Radius ----- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* ----- Typo ----- */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ----- Bootstrap variables overrides ----- */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 27, 58, 139;
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-primary-hover);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
}

html, body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  padding-top: 72px;
  background-color: var(--surface-bg);
  color: var(--text-base);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ----- Headings : Space Grotesk geometric + tracking serré ----- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  color: var(--text-base);
}

h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }

/* Numbers/data : JetBrains Mono pour les valeurs chiffrées (kcal, kg, %) */
.font-mono, .stat-value, .data-value {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' on, 'lnum' on;
}

/* -------- Navbar — Premium : glass effect + tracking serré -------- */
.navbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.navbar-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--text-base) !important;
}
.navbar-brand:hover {
  color: var(--brand-primary) !important;
}

/* Logo de marque (hexagone bleu nuit) — coins arrondis pour s'intégrer
   proprement sur navbar claire comme sombre. */
.brand-logo {
  height: 36px;
  width: 36px;
  object-fit: cover;
  border-radius: 9px;
  display: inline-block;
}

.nav-link {
  font-weight: 500;
  color: var(--text-muted) !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background-color 0.15s;
}

.nav-link:hover {
  color: var(--brand-primary) !important;
  background-color: var(--brand-primary-soft);
}

.btn-member {
  background-color: var(--brand-primary);
  color: #fff;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 50px;       /* pilule, comme l'app d'origine */
  font-weight: 600;
  transition: background-color 0.2s;
}

.btn-member:hover {
  background-color: var(--brand-primary-hover);
  color: #fff;
}

/* Quand l'utilisateur est connecté : bouton vert avec son prénom */
.btn-member-logged {
  background-color: #28a745;
}
.btn-member-logged:hover {
  background-color: #218838;
}

/* -------- Hero -------- */
/* Desktop : image absolute en arrière-plan + voile léger bleuté dégradé
   (calque exactement sur .hero-overlay de l'app d'origine).
   Mobile : on bascule en flux normal, l'image s'affiche en bloc au-dessus
   du texte, à sa taille naturelle ratio. Texte en noir sur blanc pour la
   lisibilité. Aucun crop. */
.hero {
  position: relative;
  min-height: 70vh;
  color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Version courte pour pages secondaires (adhésion, contact) */
.hero-short {
  min-height: 40vh;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Voile bleu nuit dégradé (couleurs du logo) : plus dense à gauche, là où
     se trouve le texte, pour garantir la lisibilité du titre blanc. */
  background: linear-gradient(
    to right,
    rgba(11, 26, 51, 0.78) 0%,
    rgba(11, 26, 51, 0.55) 35%,
    rgba(27, 58, 139, 0.30) 70%,
    rgba(11, 26, 51, 0.25) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 4rem 0;
  width: 100%;
}

/* Le hero a toujours du texte BLANC, quel que soit le thème (il est posé sur
   une image sombre). On surcharge la règle générique h1/h2 { color: text-base }. */
.hero h1,
.hero .lead,
.hero h1 * {
  color: #fff !important;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.75);
}

.hero .lead {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-bottom: 2rem;
  opacity: 0.97;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

/* -------- Boutons CTA — gradient subtil + lift -------- */
.btn-cta {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-popular) 100%);
  color: #fff;
  border: none;
  padding: 0.85rem 1.9rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 14px -2px rgb(27 58 139 / 0.35), 0 2px 4px -1px rgb(15 23 42 / 0.06);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s;
}

.btn-cta:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -4px rgb(27 58 139 / 0.45), 0 4px 8px -2px rgb(15 23 42 / 0.10);
  filter: brightness(1.04);
}

.btn-cta:active { transform: translateY(0); }

.btn-cta-outline {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  padding: 0.7rem 1.8rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  transition: background-color 0.2s, color 0.2s;
}

.btn-cta-outline:hover {
  background: #fff;
  color: var(--brand-primary);
}

/* -------- Sections -------- */
section {
  padding: 4.5rem 0;
}

section h2 {
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

section .section-intro {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 3rem;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Tagline en haut des sections : tracking large, indigo solide,
   chip discret avec liseré dégradé. C'est l'accent brand le plus
   visible des pages publiques. */
.section-tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--brand-primary);
  margin-bottom: 1rem;
  padding: 0.4rem 0.85rem;
  background: linear-gradient(135deg, rgba(27, 58, 139, 0.10), rgba(34, 197, 94, 0.08));
  border-radius: 50px;
  border: 1px solid rgba(27, 58, 139, 0.18);
}
.section-tagline small {
  font-size: inherit;
  letter-spacing: inherit;
}
.section-tagline::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--brand-accent);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.20);
}

/* -------- Cartes feature : ombre multi-couches + hover lift -------- */
.feature-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
  box-shadow: var(--shadow-sm);
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(27, 58, 139, 0.18);
}

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(27, 58, 139, 0.14), rgba(34, 197, 94, 0.10));
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  margin-bottom: 1.25rem;
  box-shadow: inset 0 0 0 1px rgba(27, 58, 139, 0.08);
}

.feature-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.015em;
}

/* -------- Tarifs / adhésion -------- */
.plan-card {
  background: var(--surface-card);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  height: 100%;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s, box-shadow 0.25s;
  box-shadow: var(--shadow-card);
}
.plan-card:hover { box-shadow: var(--shadow-lift); }

.plan-card.featured {
  border-color: var(--brand-popular);
  position: relative;
}

.plan-card.featured::before {
  content: "La plus populaire";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-popular);
  color: #fff;
  padding: 0.3rem 1.2rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.plan-card:hover {
  transform: translateY(-4px);
}

.plan-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #666;
  margin-bottom: 1rem;
}

.plan-price {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-base);
  margin-bottom: 0.25rem;
}

.plan-price small {
  font-size: 1rem;
  color: #666;
  font-weight: 400;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  text-align: left;
}

.plan-features li {
  padding: 0.5rem 0;
  color: #444;
}

.plan-features li::before {
  content: "✓";
  color: var(--brand-primary);
  font-weight: bold;
  margin-right: 0.5rem;
}

/* -------- Login / formulaires -------- */
.form-box {
  max-width: 440px;
  margin: 0 auto;
  padding: 2.75rem 2.25rem;
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.form-box h1 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.form-box .subtitle {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.form-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-base);
  margin-bottom: 0.4rem;
}

.form-control,
.form-select {
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-base);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgb(27 58 139 / 0.15);
  outline: none;
}

.form-control::placeholder { color: var(--text-faint); }

.btn-primary-brand {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-popular) 100%);
  color: #fff;
  border: none;
  padding: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  width: 100%;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 14px -2px rgb(27 58 139 / 0.35);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.15s;
}

.btn-primary-brand:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -4px rgb(27 58 139 / 0.45);
  filter: brightness(1.04);
}

/* -------- Footer -------- */
.site-footer {
  background: #1a1a1a;
  color: #aaa;
  padding: 3rem 0 1.5rem;
  margin-top: 4rem;
}

.site-footer h5, .site-footer h6 {
  color: #fff;
  margin-bottom: 1rem;
}

.site-footer a {
  color: #aaa;
  text-decoration: none;
  transition: color 0.2s;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer .footer-divider {
  border-color: #333;
  margin: 2rem 0 1.5rem;
}

/* -------- Messages / alerts -------- */
.alert-message {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  display: none;
}

.alert-message.show {
  display: block;
}

.alert-message.error {
  background: #fee;
  color: #c00;
  border: 1px solid #fcc;
}

.alert-message.success {
  background: #efe;
  color: #063;
  border: 1px solid #cfc;
}

/* -------- Image illustrations responsive -------- */
/* Sur desktop : image recadrée (hauteur fixe pour équilibrer le layout).
   Sur mobile : image entière, largeur 100%, pas de crop. */
.img-illustration {
  width: 100%;
  height: auto;
  max-height: 450px;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

@media (max-width: 991px) {
  .img-illustration {
    max-height: none;
    object-fit: contain;
  }
}

/* ==========================================================================
   Modals v3 (7.AQ — Premium Coaching)
   Design : modal large flottant avec backdrop flou, icône en pastille
   gradient indigo→or, typographie display, callout doré pour les tips.
   ========================================================================== */

/* Override par défaut : modal compact 540px pour la majorité des cas.
   Les tailles Bootstrap (.modal-lg, .modal-xl) doivent conserver leurs
   largeurs natives (800 / 1140 px) — sinon le cap 540 les écrase. */
.modal-dialog:not(.modal-lg):not(.modal-xl) { max-width: 540px; }

.modal-content {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  background: var(--surface-card);
  /* Léger gradient interne pour donner de la profondeur */
  background-image: linear-gradient(180deg, rgba(27, 58, 139, 0.025) 0%, transparent 220px);
}

/* Backdrop : opaque + flou subtle (glass-morphism du modal sur le fond) */
.modal-backdrop.show {
  opacity: 0.65;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.65), rgba(27, 58, 139, 0.45));
}

/* Animation d'entrée plus marquée (fade + scale + lift) */
.modal.fade .modal-dialog {
  transform: scale(0.96) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
}

.modal-header {
  position: relative;
  background: transparent;
  border-bottom: none;
  padding: 1.75rem 2rem 1.25rem;
  align-items: flex-start;
}

/* Liseré d'accent or sous le header — signature visuelle Premium */
.modal-header::after {
  content: "";
  position: absolute;
  left: 2rem; right: 2rem; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(27, 58, 139, 0.35) 0%,
    rgba(34, 197, 94, 0.35) 30%,
    rgba(34, 197, 94, 0.10) 60%,
    transparent 100%);
}

.modal-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text-base);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* Pastille icône : gradient indigo→amber avec glow subtle */
.modal-title .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 110%);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 1.25rem;
  margin-right: 0 !important;
  flex-shrink: 0;
  box-shadow: 0 6px 18px -4px rgb(27 58 139 / 0.45),
              inset 0 1px 0 rgb(255 255 255 / 0.20);
}

/* Bouton close : chip rond clairement visible (visible dès l'arrivée
   sur le modal, pas seulement au hover). */
.modal-header .btn-close {
  background-color: var(--surface-muted);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  opacity: 1;
  padding: 0;
  background-size: 13px;
  background-position: center;
  transition: all 0.18s ease;
  flex-shrink: 0;
  margin-top: 0.25rem;
  border: 1px solid var(--border-subtle);
}
.modal-header .btn-close:hover {
  background-color: var(--border-subtle);
  border-color: var(--border-strong);
  transform: rotate(90deg);
}
.modal-header .btn-close:focus {
  box-shadow: 0 0 0 4px rgb(27 58 139 / 0.20);
}

.modal-body {
  padding: 1.75rem 2rem;
  color: var(--text-base);
  line-height: 1.65;
  font-size: 0.95rem;
}
.modal-body p { margin-bottom: 1rem; }
.modal-body p:last-child { margin-bottom: 0; }
.modal-body strong { color: var(--text-base); font-weight: 600; }

.modal-body ul {
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
}
.modal-body ul li::marker { color: var(--brand-primary); }
.modal-body ul li + li { margin-top: 0.65rem; }

/* "Callout" doré : la dernière ligne en .text-muted devient un encart soigné.
   On reste en display:block (pas de flex sur le <p> sinon chaque <strong>/<em>
   intérieur devient un flex item séparé et le texte se colonne — bug visible
   sur le modal "% de masse grasse cible"). */
.modal-body > p.text-muted.small:last-child {
  margin-top: 1.25rem;
  padding: 0.95rem 1.1rem;
  background: linear-gradient(135deg, var(--brand-accent-soft), rgba(34, 197, 94, 0.04));
  border-left: 3px solid var(--brand-accent);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.modal-body > p.text-muted.small:last-child::before {
  content: "\F622"; /* bi-info-circle */
  font-family: bootstrap-icons;
  color: var(--brand-accent-hover);
  font-size: 1rem;
  margin-right: 0.5rem;
  vertical-align: -0.08em;
}

.modal-footer {
  background: var(--surface-muted);
  border-top: 1px solid var(--border-subtle);
  padding: 1rem 2rem;
  gap: 0.5rem;
}

.btn-modal-info {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
  vertical-align: middle;
}
.btn-modal-info:hover {
  color: var(--brand-primary);
  transform: scale(1.1);
}

@media (max-width: 576px) {
  .modal-content { border-radius: var(--radius-lg); }
  .modal-header { padding: 1.4rem 1.4rem 1.1rem; }
  .modal-header::after { left: 1.4rem; right: 1.4rem; }
  .modal-body { padding: 1.4rem; }
  .modal-footer { padding: 1rem 1.4rem; }
  .modal-title { font-size: 1.1rem; gap: 0.7rem; }
  .modal-title .bi { width: 38px; height: 38px; font-size: 1.1rem; }
}

/* ==========================================================================
   DARK MODE (7.AO — `prefers-color-scheme: dark` automatique)
   ==========================================================================
   Approche : on s'appuie sur Bootstrap 5.3 `[data-bs-theme="dark"]` (activé
   par un script inline dans chaque page) pour les composants Bootstrap, et
   on ajoute ici les overrides nécessaires pour nos styles custom.
   ========================================================================== */

[data-bs-theme="dark"] {
  /* Dark mode = ambiance native du logo (bleu presque noir). Le cyan devient
     la couleur primaire pour le contraste sur fond sombre, le vert reste
     l'accent nutrition. */
  --surface-bg:        #0B1A33;   /* bleu nuit du logo */
  --surface-card:      #102347;
  --surface-card-hover:#143063;
  --surface-muted:     #122A52;
  --border-subtle:     #1C3A6B;
  --border-strong:     #2A4E86;
  --text-base:         #EAF1FB;
  --text-muted:        #9DB4D6;
  --text-faint:        #6A87B5;
  --brand-primary-soft:rgba(56, 189, 248, 0.14);
  --brand-accent-soft: rgba(34, 197, 94, 0.12);
  /* Cyan primaire + vert accent, plus lumineux pour le contraste sur navy */
  --brand-primary:        #38BDF8;   /* cyan lumineux (contour logo) */
  --brand-primary-hover:  #7DD3FC;   /* cyan clair */
  --brand-popular:        #7DD3FC;
  --brand-accent:         #34D399;   /* vert un peu plus clair en dark */
  --brand-accent-hover:   #6EE7B7;
  --brand-light:          #102347;
}

[data-bs-theme="dark"] body {
  background-color: var(--surface-bg);
  color: var(--text-base);
}

[data-bs-theme="dark"] .navbar {
  background: rgba(20, 23, 29, 0.85) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .nav-link {
  color: var(--text-base) !important;
}
[data-bs-theme="dark"] .nav-link:hover {
  color: var(--brand-primary) !important;
  background-color: rgba(56, 189, 248, 0.12);
}

/* Cards / sections / form-box — alignés sur la palette Premium */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-soft,
[data-bs-theme="dark"] .data-table,
[data-bs-theme="dark"] .form-box,
[data-bs-theme="dark"] .plan-card,
[data-bs-theme="dark"] .feature-card {
  background-color: var(--surface-card);
  border-color: var(--border-subtle);
  color: var(--text-base);
}

/* Inputs (alignés sur la palette Premium) */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--surface-card);
  border-color: var(--border-subtle);
  color: var(--text-base);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--surface-card);
  border-color: var(--brand-primary);
  color: var(--text-base);
  box-shadow: 0 0 0 4px rgb(27 58 139 / 0.20);
}
[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--text-faint);
}
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
  background-color: var(--surface-muted);
  color: var(--text-muted);
}

/* Pills */
[data-bs-theme="dark"] .pill-choice {
  background-color: #2a2e34;
  border-color: #3a3f47;
  color: var(--text-base);
}
[data-bs-theme="dark"] .pill-choice.active {
  background-color: rgba(94, 114, 228, 0.18);
  border-color: var(--brand-primary);
  color: #fff;
}

/* Modals dark — alignés sur la palette Premium 7.AQ */
[data-bs-theme="dark"] .modal-content {
  background-color: var(--surface-card);
  color: var(--text-base);
  box-shadow: 0 30px 80px -15px rgb(0 0 0 / 0.7),
              0 10px 30px -10px rgb(0 0 0 / 0.5);
  background-image: linear-gradient(180deg, rgba(27, 58, 139, 0.06) 0%, transparent 220px);
}
[data-bs-theme="dark"] .modal-header { background: transparent; }
[data-bs-theme="dark"] .modal-header::after {
  background: linear-gradient(90deg,
    rgba(27, 58, 139, 0.45) 0%,
    rgba(34, 197, 94, 0.45) 30%,
    rgba(34, 197, 94, 0.10) 60%,
    transparent 100%);
}
[data-bs-theme="dark"] .modal-title { color: var(--text-base); }
/* La pastille icône reste avec son gradient indigo→amber, déjà parfait en dark */
[data-bs-theme="dark"] .modal-header .btn-close {
  /* Croix blanche (SVG inline) sur une pastille bleu nuit, liseré cyan —
     cohérent avec la charte (au lieu du gris Bootstrap inversé). */
  background-color: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237DD3FC'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
  filter: none;
}
[data-bs-theme="dark"] .modal-header .btn-close:hover {
  background-color: rgba(56, 189, 248, 0.22);
  border-color: var(--brand-cyan);
}
/* Callout doré : on garde la teinte amber mais sur fond sombre */
[data-bs-theme="dark"] .modal-body > p.text-muted.small:last-child {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(34, 197, 94, 0.04));
  border-left-color: var(--brand-accent);
  color: var(--text-muted);
}
[data-bs-theme="dark"] .modal-footer {
  background: var(--surface-muted);
  border-top-color: var(--border-subtle);
}

/* Tableaux (admin catalogue, programmes…) — fix bug 7.AQ : le thead
   restait sur fond clair en dark, on force tout le tableau et son
   header à utiliser les surfaces sombres. */
[data-bs-theme="dark"] .table {
  --bs-table-color: var(--text-base);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(27, 58, 139, 0.08);
  --bs-table-border-color: var(--border-subtle);
  color: var(--text-base);
}
[data-bs-theme="dark"] .table thead,
[data-bs-theme="dark"] .table > thead > tr > th {
  background-color: var(--surface-muted);
  color: var(--text-muted);
  border-color: var(--border-subtle);
}
/* Bootstrap 'table-success' (ligne recommandée) en dark : on ramène
   à un vert foncé lisible au lieu du clair par défaut. */
[data-bs-theme="dark"] .table > tbody > tr.table-success {
  --bs-table-color-state: #d1fae5;
  --bs-table-bg-state: rgba(34, 197, 94, 0.15);
}

/* input-group-text (badge "US Navy", "Auto"…) — Bootstrap utilise des
   variables qui ne sont pas pleinement override par data-bs-theme.
   On force avec !important pour gagner sur la spécificité Bootstrap. */
[data-bs-theme="dark"] .input-group-text,
[data-bs-theme="dark"] .input-group .input-group-text {
  background-color: var(--surface-muted) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-muted) !important;
}

/* Textarea : explicit override (Bootstrap a des règles propres pour textarea) */
[data-bs-theme="dark"] textarea.form-control {
  background-color: var(--surface-card);
  color: var(--text-base);
  border-color: var(--border-subtle);
}
[data-bs-theme="dark"] textarea.form-control::placeholder {
  color: var(--text-faint);
}
/* État disabled (cas "Aucune limitation particulière" cochée) */
[data-bs-theme="dark"] textarea.form-control:disabled,
[data-bs-theme="dark"] textarea.form-control[readonly] {
  background-color: var(--surface-muted);
  color: var(--text-muted);
  border-color: var(--border-subtle);
}

/* Liens et boutons outline */
[data-bs-theme="dark"] a { color: #8aa0ff; }
[data-bs-theme="dark"] a:hover { color: #b3c1ff; }
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #8aa0ff;
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-color: #fff;
}
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #b8bcc4;
  --bs-btn-border-color: #4b5563;
  --bs-btn-hover-bg: #4b5563;
  --bs-btn-hover-color: #fff;
}

/* Texte muted plus lisible en dark */
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .small.text-muted { color: #9ca3af !important; }

/* Hero : l'overlay de base (signature logo) suffit, pas de surcouche dark
   supplémentaire (évite le voile trop dense signalé). */
[data-bs-theme="dark"] .hero-overlay {
  /* Voile fortement réduit (~50 %) : juste assez pour lier l'image à la
     charte et garder le titre lisible à gauche, sans "noyer" la photo. */
  background: linear-gradient(
    100deg,
    rgba(8, 24, 47, 0.62) 0%,
    rgba(8, 24, 47, 0.34) 42%,
    rgba(8, 24, 47, 0.10) 70%,
    rgba(8, 24, 47, 0.05) 100%
  );
}

/* Backdrop modal plus dense en dark */
[data-bs-theme="dark"] .modal-backdrop.show { opacity: 0.75; }

/* ---- Pages d'auth (login + reset) : fond gradient (était inline) ---- */
body[data-page="reset"],
body[data-page="member-login"],
body[data-page="membre"] {
  background: linear-gradient(135deg, #f8f9fa 0%, #e8ecef 100%);
  min-height: 100vh;
}
[data-bs-theme="dark"] body[data-page="reset"],
[data-bs-theme="dark"] body[data-page="member-login"],
[data-bs-theme="dark"] body[data-page="membre"] {
  background: linear-gradient(135deg, #1a1d21 0%, #232629 100%);
}

/* ---- Surcharges ciblées pour les styles inline d'app.html ---- */
[data-bs-theme="dark"] body[data-page="app"] { background-color: #15171a; }
[data-bs-theme="dark"] .app-topbar,
[data-bs-theme="dark"] .app-tabs {
  background-color: #1f2226;
  border-bottom-color: #2e323a;
}
[data-bs-theme="dark"] .app-tabs .nav-link { color: #9ca3af; }
[data-bs-theme="dark"] .app-tabs .nav-link.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}
[data-bs-theme="dark"] .card-soft {
  background-color: #1f2226;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[data-bs-theme="dark"] .card-soft h3 { color: #EAF2FF; }
[data-bs-theme="dark"] .stat-label,
[data-bs-theme="dark"] .stat-unit { color: #9ca3af; }
[data-bs-theme="dark"] .meal-card {
  background-color: #2a2e34;
  border-color: #3a3f47;
}
[data-bs-theme="dark"] .meal-card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 2px 12px rgba(94, 114, 228, 0.30);
}
[data-bs-theme="dark"] .save-indicator {
  background-color: #1f2226;
  color: #c9ccd1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
[data-bs-theme="dark"] .placeholder-block { color: #6b7280; }
[data-bs-theme="dark"] .placeholder-block i { color: #4b5563; }

/* 11.F.bis7 - encart repas (renderMealDetailHtml) en dark mode :
   bg-white retire du markup, ici on definit le fond + bordure pour les 2 themes */
.meal-card-inline {
  background-color: #ffffff;
}
[data-bs-theme="dark"] .meal-card-inline {
  background-color: var(--surface-card);
  border-color: var(--border-subtle) !important;
  color: var(--text-base);
}
[data-bs-theme="dark"] .meal-card-inline .text-muted,
[data-bs-theme="dark"] .meal-card-inline strong { color: var(--text-base) !important; }
[data-bs-theme="dark"] .meal-card-inline .table { color: var(--text-base); }
[data-bs-theme="dark"] .meal-card-inline .table thead { color: var(--text-muted); }
[data-bs-theme="dark"] .meal-card-inline .alert-light {
  background-color: var(--surface-muted);
  color: var(--text-muted);
  border-color: var(--border-subtle);
}
[data-bs-theme="dark"] .meal-card-inline .alert-warning {
  background-color: rgba(34, 197, 94, 0.12);
  color: #fbbf24;
  border-color: rgba(34, 197, 94, 0.35);
}

/* 12.E - BodyHighlighter : silhouette SVG avec zones musculaires cliquables.
   Polygones MIT issus de react-body-highlighter (by giavinh79). Selection
   en ROUGE comme demande par user. Zones non-musculaires (tete, genoux)
   non cliquables, en gris discret. */
/* Dual-view : face + dos cote a cote. Taille reduite pour mobile. */
.bh-dual {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  background: var(--surface-muted, #f8f9fa);
  border-radius: 8px;
  padding: 0.75rem 0.5rem;
}
.bh-half {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.bh-view-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.25rem;
}
.bh-svg {
  max-height: 240px;
  width: auto;
  max-width: 100%;
}
.bh-dual-static .bh-svg { max-height: 200px; }
/* Legende dots */
.bh-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: baseline;
}
.bh-dot-primary { background: #dc3545; }
.bh-dot-secondary { background: #28a745; }
[data-bs-theme="dark"] .bh-dual { background: var(--surface-card); }
.bh-poly {
  fill: #b6bdc3;
  stroke: #fff;
  stroke-width: 0.3;
  transition: fill 0.15s ease;
}
.bh-poly[data-muscle] {
  cursor: pointer;
}
.bh-poly[data-muscle]:hover {
  fill: #e88c8c;
}
.bh-poly.selected {
  fill: #dc3545;
}
.bh-poly.not-clickable {
  fill: #d0d3d6;
  cursor: default;
}
/* Modal exo : static, muscles principaux rouge / secondaires vert */
.bh-poly.static { cursor: default; }
.bh-poly.static.primary { fill: #dc3545; }
.bh-poly.static.secondary { fill: #28a745; }

/* 14 : exercice inactif (catalogue admin) - ligne grisee */
tr.exo-inactive { opacity: 0.5; }
tr.exo-inactive td [data-label] { font-style: italic; }

/* 14.C : table programme IA en cartes sur mobile (pas de scroll lateral) */
@media (max-width: 767px) {
  .program-table { overflow-x: visible; }
  .program-table table, .program-table tbody, .program-table tr, .program-table td { display: block; width: 100%; }
  .program-table thead { display: none; }
  .program-table tbody tr {
    margin-bottom: 0.6rem; padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 8px;
  }
  .program-table td {
    padding: 0.25rem 0 0.25rem 38%; position: relative;
    text-align: right; min-height: 1.6rem;
    word-break: break-word; overflow-wrap: anywhere; border: 0;
  }
  .program-table td::before {
    content: attr(data-label); position: absolute; left: 0; top: 0.25rem;
    width: 34%; text-align: left; font-weight: 600; color: var(--text-muted, #6b7280);
  }
  .program-table td .badge { white-space: normal; }
  /* Numero d'exo redondant sur mobile -> masque */
  .program-table td[data-label="#"] { display: none; }
  /* Cellule Exercice : pleine largeur, label au-dessus, vignette + nom a gauche */
  .program-table td[data-label="Exercice"] {
    padding-left: 0; text-align: left;
    border-top: 1px solid var(--border-subtle, #e5e7eb);
    margin-top: 0.25rem; padding-top: 0.5rem;
  }
  .program-table td[data-label="Exercice"]::before {
    position: static; display: block; width: auto; margin-bottom: 0.35rem;
    text-transform: uppercase; font-size: 0.7rem; color: #999;
  }
  .program-table td[data-label="Exercice"] .d-flex { justify-content: flex-start; }
}
.bh-selected-list .badge { font-weight: 500; }
[data-bs-theme="dark"] .bh-container { background: var(--surface-card); }
[data-bs-theme="dark"] .bh-poly {
  fill: #7a8086;
  stroke: #2a2d31;
}
[data-bs-theme="dark"] .bh-poly[data-muscle]:hover { fill: #c44a4a; }
[data-bs-theme="dark"] .bh-poly.selected { fill: #ef4444; }
[data-bs-theme="dark"] .bh-poly.not-clickable { fill: #5a6065; }

/* 12.D - Vignette ExerciseMedia : illustration d'exo cliquable -> modal
   avec video + bouton YouTube. Aspect-ratio 16:9 (horizontal, comme les
   videos source). object-fit:contain pour image entiere (pas tronquee).
   Tailles sm/md/lg = width, height calculee automatiquement. */
.exercise-media-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background-color: var(--surface-muted, #f3f4f6);
  border: 1px solid var(--border-subtle, #e5e7eb);
  vertical-align: middle;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
}
.exercise-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: auto;
}
.exercise-media-thumb.clickable { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.exercise-media-thumb.clickable:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.exercise-media-thumb .play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 1.5rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.exercise-media-thumb.clickable:hover .play-overlay { opacity: 1; }
.exercise-media-thumb-empty {
  color: var(--text-muted, #9ca3af);
  font-size: 1.2rem;
}
.exercise-media-thumb-sm { width: 72px; }
.exercise-media-thumb-md { width: 100px; }
.exercise-media-thumb-lg { width: 144px; }

/* Phase 16 - Instructions + Tips FR dans la modal ExerciseMedia */
.exercise-modal-section-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.exercise-modal-list {
  padding-left: 1.25rem;
  margin-bottom: 0;
}
.exercise-modal-list li {
  margin-bottom: 0.4rem;
  line-height: 1.5;
}
.exercise-modal-list li:last-child { margin-bottom: 0; }
[data-bs-theme="dark"] .exercise-media-thumb {
  background-color: var(--surface-card);
  border-color: var(--border-subtle);
}

/* Admin super : categories/groupes muscles/heritage equipement
   text-muted devient illisible en dark (gris faible sur fond sombre).
   On force un gris plus clair. */
[data-bs-theme="dark"] .text-muted { color: #9ca3af !important; }
[data-bs-theme="dark"] .form-label.small.text-muted { color: #b6bbc4 !important; }
[data-bs-theme="dark"] .form-label { color: var(--text-base); }

/* 11.F.bis8 - corrections dark mode admin super restantes :
   - cartes cles Gemini (anciennement bg #fafafa inline)
   - pills "text-bg-light" Bootstrap (categories/groupes muscles, substituts equipement/machine)
   - inputs (form-control) deja gerees par Bootstrap dark mais on force au cas ou */
.gemini-key-card { background-color: #fafafa; }
[data-bs-theme="dark"] .gemini-key-card {
  background-color: var(--surface-muted) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-base);
}
[data-bs-theme="dark"] .gemini-key-card .form-label { color: var(--text-base); }
[data-bs-theme="dark"] .gemini-key-card .text-muted { color: var(--text-muted) !important; }

[data-bs-theme="dark"] .badge.text-bg-light {
  background-color: var(--surface-muted) !important;
  color: var(--text-base) !important;
  border: 1px solid var(--border-subtle);
}
[data-bs-theme="dark"] .badge.text-bg-light .btn-close {
  filter: invert(1) opacity(0.7);
}
[data-bs-theme="dark"] .badge.text-bg-secondary {
  background-color: #4b5563 !important;
  color: #e5e7eb !important;
}

/* ---- Surcharges ciblées pour les styles inline d'admin.html ---- */
[data-bs-theme="dark"] body[data-page="admin"] { background-color: #15171a; }
[data-bs-theme="dark"] .admin-topbar {
  background-color: #1f2226;
  border-bottom-color: #2e323a;
}
[data-bs-theme="dark"] .admin-tabs .nav-link { color: #9ca3af; }
[data-bs-theme="dark"] .admin-tabs .nav-link.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}
[data-bs-theme="dark"] .data-table {
  background-color: #1f2226;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[data-bs-theme="dark"] .data-table th {
  background-color: #232730;
  color: #9ca3af;
}
[data-bs-theme="dark"] .action-btn { color: #9ca3af; }
[data-bs-theme="dark"] .action-btn:hover { color: var(--brand-primary); }
[data-bs-theme="dark"] .empty-state { color: #6b7280; }
[data-bs-theme="dark"] .sortable:hover { background-color: #232730; }
[data-bs-theme="dark"] .sortable .sort-arrow { color: #6b7280; }

/* Badges status admin : on reduce la saturation des fonds clairs */
[data-bs-theme="dark"] .badge-active   { background: #14532d; color: #d1fae5; }
[data-bs-theme="dark"] .badge-notice   { background: #78350f; color: #fef3c7; }
[data-bs-theme="dark"] .badge-ended    { background: #7f1d1d; color: #fee2e2; }
[data-bs-theme="dark"] .badge-suspended{ background: #374151; color: #e5e7eb; }

/* Mobile-card du tableau admin : bordure visible en dark */
@media (max-width: 767px) {
  [data-bs-theme="dark"] .data-table tr { border-color: #2e323a; }
  [data-bs-theme="dark"] .data-table td::before { color: #9ca3af; }
}

/* ==========================================================================
   Blocs info / warning / expert (cartes typées avec liseré coloré)
   Définis comme classes pour avoir des variantes dark cohérentes au lieu
   de styles inline hardcodés.
   ========================================================================== */
.info-block {
  border-left: 4px solid var(--brand-primary);
}
.info-block-blue { background: #f0f7ff; }
.info-block-teal { background: #eef6fb; border-left-color: #1f7a8c; }

.warning-block {
  border-left: 4px solid #dc3545;
}
.warning-block-red { background: #fde2e4; }

.expert-block {
  border: 1.5px solid #b08d57;
  border-radius: 10px;
  background: #fffaf0;
}
.expert-block-title { color: #7c5a2a; }

/* Dark variants */
[data-bs-theme="dark"] .info-block-blue {
  background: rgba(94, 114, 228, 0.10);
  color: var(--text-base);
}
[data-bs-theme="dark"] .info-block-teal {
  background: rgba(31, 122, 140, 0.14);
  color: var(--text-base);
}
[data-bs-theme="dark"] .warning-block-red {
  background: rgba(220, 53, 69, 0.18);
  color: var(--text-base);
}
[data-bs-theme="dark"] .expert-block {
  background: rgba(176, 141, 87, 0.12);
  border-color: #c79b62;
  color: var(--text-base);
}
[data-bs-theme="dark"] .expert-block-title { color: #d4a865; }

/* Fix Bootstrap bg-light en dark mode (sinon reste gris clair fixé) */
[data-bs-theme="dark"] section.bg-light,
[data-bs-theme="dark"] .bg-light {
  background-color: #1a1d21 !important;
  color: var(--text-base);
}

/* Section intros + h2 — adaptés en dark */
[data-bs-theme="dark"] section h2 { color: var(--text-base); }
[data-bs-theme="dark"] section .section-intro { color: #9ca3af; }
[data-bs-theme="dark"] .feature-card h3 { color: var(--text-base); }
[data-bs-theme="dark"] .feature-card .text-muted { color: #b8bcc4 !important; }

/* Index page : sections tarifs et footer */
[data-bs-theme="dark"] .plan-card .text-muted,
[data-bs-theme="dark"] .gym-card .text-muted { color: #b8bcc4 !important; }

/* Liens de téléphone/email dans gym cards */
[data-bs-theme="dark"] .gym-card a { color: #8aa0ff; }

/* ==========================================================================
   Suivi de progression — journal de bord & FAB (7.AV)
   ========================================================================== */

/* FAB "+" en bas à droite, gradient brand, ombre prononcée */
.fab-add-workout {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-popular));
  color: #fff;
  font-size: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px -8px rgb(27 58 139 / 0.55),
              0 6px 16px -6px rgb(15 23 42 / 0.20);
  cursor: pointer;
  z-index: 25;
  transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.15s;
}
.fab-add-workout:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 18px 40px -8px rgb(27 58 139 / 0.65);
  filter: brightness(1.05);
}
.fab-add-workout:active { transform: translateY(0) scale(1); }
@media (max-width: 576px) {
  .fab-add-workout { bottom: 1.25rem; right: 1.25rem; width: 56px; height: 56px; }
}

/* Cartes du journal de bord : date à gauche, contenu à droite */
.journal-day-group { margin-bottom: 1rem; }
.journal-card {
  display: flex;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.75rem;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.18s;
  text-align: left;
  width: 100%;
  font: inherit;
  padding: 0;
}
.journal-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--brand-primary);
}
.journal-card-date {
  flex-shrink: 0;
  width: 70px;
  background: var(--surface-muted);
  padding: 1rem 0.5rem;
  text-align: center;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.journal-card-date .day-name {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.journal-card-date .day-num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--brand-primary);
  line-height: 1;
  margin: 0.15rem 0;
}
.journal-card-date .day-month {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.journal-card-body {
  flex: 1;
  padding: 0.85rem 1.1rem;
  min-width: 0;
}
.journal-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-base);
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.journal-exo-line {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.journal-card-meta {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* Separateur d'annee dans le journal (apparait au-dessus du premier
   item de chaque annee civile). Trait horizontal avec l'annee centree. */
.journal-year {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0.75rem;
  color: var(--text-faint);
}
.journal-year::before,
.journal-year::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.journal-year span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Empty state : pas encore de séance */
.journal-empty {
  text-align: center;
  padding: 3rem 1rem 6rem;
  color: var(--text-muted);
}
.journal-empty i {
  font-size: 3rem;
  color: var(--text-faint);
  display: block;
  margin-bottom: 0.75rem;
}

/* Modal réorganiser : z-index supérieur pour s'afficher PAR-DESSUS le
   modal de séance (Bootstrap par défaut empile mal les modals). On
   double aussi le backdrop pour qu'il couvre le 1er modal. */
#modalReorderExercises { z-index: 1080 !important; }
.modal-backdrop.modal-stacked-backdrop { z-index: 1075 !important; }

/* SortableJS — feedback visuel pendant le drag dans le modal réordonner */
.sortable-ghost {
  opacity: 0.5;
  background: var(--brand-primary-soft) !important;
  border-color: var(--brand-primary) !important;
}
#reorderList .list-group-item:active { cursor: grabbing; }
[data-bs-theme="dark"] .sortable-ghost { opacity: 0.4; }

/* Warning niveau d'exercice (séance libre) — encart amber au dessus de
   l'exercice fraichement ajouté qui dépasse le niveau du membre. */
.exo-level-warning {
  background: linear-gradient(135deg, var(--brand-accent-soft), rgba(34, 197, 94, 0.04));
  border-left: 3px solid var(--brand-accent);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
[data-bs-theme="dark"] .exo-level-warning {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04));
}

/* ---- qr.html : page publique vidéos QR ---- */
[data-bs-theme="dark"] body:has(.qr-card) { background-color: #15171a; }
[data-bs-theme="dark"] .qr-card {
  background-color: #1f2226;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
[data-bs-theme="dark"] .qr-subtitle { color: #9ca3af; }
[data-bs-theme="dark"] .empty-block {
  color: #6b7280;
  border-color: #3a3f47;
}

/* -------- Responsive : hero mobile SANS crop -------- */
@media (max-width: 768px) {
  body { padding-top: 60px; }

  .navbar-brand { font-size: 1.05rem; }

  /* Bascule hero en flux vertical : image pleine largeur à sa taille
     naturelle, puis bloc texte en dessous — sur fond bleu nuit (charte dark),
     texte blanc. */
  .hero {
    flex-direction: column;
    min-height: auto;
    color: #fff;
    background: var(--surface-bg);
  }
  .hero-bg-img {
    position: static;
    width: 100%;
    height: auto;           /* ratio naturel, AUCUN crop */
    object-fit: initial;
    max-height: 55vh;       /* plafond si image très haute (portrait) */
  }
  .hero-overlay {
    display: none;          /* plus de voile : l'image est au-dessus du texte */
  }
  .hero-content {
    padding: 1.75rem 0 2.5rem;
  }
  .hero h1,
  .hero .lead {
    text-shadow: none;      /* fond uni : plus besoin d'ombre */
  }

  section { padding: 2.5rem 0; }

  .plan-card, .feature-card { padding: 1.5rem; }

  .form-box { padding: 2rem 1.5rem; margin: 1rem; }
}

/* ============================================================================
   11.C.0 — Typeahead aliments (catalogue food_compensators)
   ============================================================================ */
.food-typeahead-wrap {
  position: relative;
}
.food-typeahead-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  max-height: 320px;
  overflow-y: auto;
}
.food-typeahead-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0.55rem 0.9rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.food-typeahead-item:last-child { border-bottom: 0; }
.food-typeahead-item:hover,
.food-typeahead-item:focus {
  background: var(--surface-muted);
  outline: none;
}
.food-typeahead-item .food-name {
  font-weight: 600;
  color: var(--text-base);
  font-size: 0.95rem;
}
.food-typeahead-item .food-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}
.food-typeahead-empty {
  padding: 0.75rem 0.9rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* ============================================================================
   11.C.1 — Chips de selection (aliments / sous-categories a exclure)
   ============================================================================ */
.food-chips-input {
  position: relative;
}
.food-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  min-height: 1.6rem;
}
.food-chips-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.85rem;
  padding: 0.25rem 0;
}
.food-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-base);
}
.food-chip-remove {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.1rem;
  cursor: pointer;
  transition: color 0.12s;
}
.food-chip-remove:hover {
  color: var(--brand-danger, #dc3545);
}

/* ============================================================================
   11.C.1 fix — Pills sous-categories (grille cliquable visible)
   ============================================================================ */
.subcategory-pills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.subcategory-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-base);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.subcategory-pill:hover {
  border-color: var(--brand-primary);
}
.subcategory-pill.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

/* ============================================================================
   11.C.2 — Editeur de rituel par repas
   ============================================================================ */
.meal-ritual-editor {
  position: relative;
}
.meal-ritual-items {
  margin-bottom: 0.4rem;
}
.meal-ritual-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.85rem;
  padding: 0.25rem 0;
}
.meal-ritual-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.meal-ritual-row:last-child { border-bottom: 0; }
.meal-ritual-name {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-base);
}
.meal-ritual-grams {
  width: 95px;
  text-align: right;
}
.meal-ritual-unit {
  font-size: 0.85rem;
  color: var(--text-muted);
  min-width: 56px;
}
.meal-ritual-remove {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
  transition: color 0.12s;
}
.meal-ritual-remove:hover { color: var(--brand-danger, #dc3545); }

/* ==========================================================================
   SIGNATURE LOGO — couche de refonte "dark de marque" (2026-06)
   ==========================================================================
   Le thème dark est forcé pour tous (cf. js/theme.js). Cette couche pousse le
   rendu au-delà du simple "dark fonctionnel" pour devenir le prolongement
   visuel du logo : fond bleu nuit profond, accents cyan + vert lumineux,
   halos subtils. Placée en fin de fichier pour primer sur les règles dark
   antérieures.
   ========================================================================== */

/* ----- Surfaces : fond TRÈS sombre + cartes nettement plus claires, pour
   que les cartes "décollent" (respiration) au lieu d'un bloc bleu uniforme. ----- */
[data-bs-theme="dark"] {
  --surface-bg:         #050F1E;   /* fond page : presque noir bleuté */
  --surface-card:       #112C52;   /* carte : net cran au-dessus du fond */
  --surface-card-hover: #173766;
  --surface-muted:      #0D2342;
  --border-subtle:      #234A82;   /* bordure plus visible = contour net */
  --border-strong:      #3060A0;
}

[data-bs-theme="dark"] body {
  background-color: var(--surface-bg);
  /* halos diffus façon "réseau" du logo : on équilibre cyan ET vert pour
     casser le "tout bleu" et ramener le vert flashy de la feuille. */
  background-image:
    radial-gradient(55rem 38rem at 8% -8%, rgba(56, 189, 248, 0.10), transparent 58%),
    radial-gradient(48rem 36rem at 100% 4%, rgba(34, 211, 153, 0.12), transparent 55%),
    radial-gradient(60rem 50rem at 50% 120%, rgba(34, 211, 153, 0.06), transparent 60%);
  background-attachment: fixed;
}

/* ----- Sections alternées : navy intermédiaire (entre fond et carte) ----- */
[data-bs-theme="dark"] section.bg-light,
[data-bs-theme="dark"] .bg-light {
  background-color: #0A1C36 !important;
}

/* ----- Respiration : les cartes "décollent" du fond (ombre + contour net) ----- */
[data-bs-theme="dark"] .feature-card,
[data-bs-theme="dark"] .card-soft,
[data-bs-theme="dark"] .plan-card,
[data-bs-theme="dark"] .card {
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.65),
              inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ----- Titres : blancs, mais le 1er mot/accent peut ressortir ----- */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] section h2 {
  color: #F2F8FF;
}
/* Filet d'accent dégradé sous les h2 de section (cyan → vert) */
[data-bs-theme="dark"] section > .container > .text-center > h2,
[data-bs-theme="dark"] section .text-center h2 {
  position: relative;
  padding-bottom: 0.6rem;
}
[data-bs-theme="dark"] section .text-center h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 72px;
  height: 3px;
  border-radius: 3px;
  /* vert nutrition dominant, ponctué de cyan — le flashy vient du vert */
  background: linear-gradient(90deg, var(--brand-cyan) 0%, #34D399 55%, #4ADE80 100%);
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.6);
}

/* ----- Tagline : chip VERT nutrition lumineux (ramène le flashy du logo) ----- */
[data-bs-theme="dark"] .section-tagline {
  color: #4ADE80;
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.16), rgba(56, 189, 248, 0.08));
  border-color: rgba(74, 222, 128, 0.40);
}
[data-bs-theme="dark"] .section-tagline::before {
  background: #4ADE80;
  box-shadow: 0 0 9px rgba(74, 222, 128, 0.95);
}

/* ----- Cartes : navy + bordure cyan au hover + halo ----- */
[data-bs-theme="dark"] .feature-card,
[data-bs-theme="dark"] .card-soft,
[data-bs-theme="dark"] .plan-card {
  background-color: var(--surface-card);
  border-color: var(--border-subtle);
}
[data-bs-theme="dark"] .feature-card:hover {
  border-color: rgba(74, 222, 128, 0.50);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(74, 222, 128, 0.22),
              0 0 26px -6px rgba(74, 222, 128, 0.35);
}

/* ----- Pastille icône feature : glow cyan→vert (vert dominant) ----- */
[data-bs-theme="dark"] .feature-icon {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(74, 222, 128, 0.26));
  color: #6EE7B7;
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.30),
              0 0 18px -6px rgba(74, 222, 128, 0.5);
}

/* ----- Boutons CTA : fond bleu nuit→cyan, TEXTE VERT flashy (signature) ----- */
[data-bs-theme="dark"] .btn-cta {
  background: linear-gradient(135deg, #15306F 0%, #1E5F9E 100%);
  color: #5BF0A0;
  font-weight: 700;
  border: 1px solid rgba(91, 240, 160, 0.35);
  text-shadow: 0 0 10px rgba(91, 240, 160, 0.35);
  box-shadow: 0 6px 22px -8px rgba(30, 95, 158, 0.7);
}
[data-bs-theme="dark"] .btn-cta:hover {
  filter: brightness(1.10);
  color: #7CFFB8;
  box-shadow: 0 10px 30px -6px rgba(91, 240, 160, 0.4);
}
[data-bs-theme="dark"] .btn-cta i { color: #5BF0A0; }
[data-bs-theme="dark"] .btn-cta-outline {
  color: #5BF0A0;
  border: 1.5px solid rgba(91, 240, 160, 0.55);
  background: rgba(91, 240, 160, 0.05);
}
[data-bs-theme="dark"] .btn-cta-outline:hover {
  background: rgba(91, 240, 160, 0.14);
  color: #7CFFB8;
  border-color: #5BF0A0;
}
[data-bs-theme="dark"] .btn-primary-brand,
[data-bs-theme="dark"] .btn-member {
  background: linear-gradient(135deg, #15306F 0%, #1E5F9E 100%);
  color: #5BF0A0;
  font-weight: 700;
  border: 1px solid rgba(91, 240, 160, 0.30);
  text-shadow: 0 0 8px rgba(91, 240, 160, 0.3);
}
[data-bs-theme="dark"] .btn-member i,
[data-bs-theme="dark"] .btn-primary-brand i { color: #5BF0A0; }
[data-bs-theme="dark"] .btn-member:hover,
[data-bs-theme="dark"] .btn-primary-brand:hover { filter: brightness(1.10); color: #7CFFB8; }

/* ----- Liste à puces "check" : la coche en vert nutrition ----- */
[data-bs-theme="dark"] .bi-check-circle-fill { color: var(--brand-accent) !important; }

/* ----- Navbar : navy translucide + liseré cyan bas ----- */
[data-bs-theme="dark"] .navbar {
  background: rgba(8, 24, 47, 0.82) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.22);
}

/* ----- Footer : bleu nuit, liens cyan au survol ----- */
[data-bs-theme="dark"] .site-footer {
  background: #061328;
  color: #9DB4D6;
  border-top: 1px solid rgba(56, 189, 248, 0.15);
}
[data-bs-theme="dark"] .site-footer a { color: #9DB4D6; }
[data-bs-theme="dark"] .site-footer a:hover { color: var(--brand-cyan); }
[data-bs-theme="dark"] .site-footer .footer-divider { border-color: rgba(56, 189, 248, 0.15); }

/* ----- Illustrations de section : cadre cyan subtil + glow ----- */
[data-bs-theme="dark"] .img-illustration {
  border: 1px solid rgba(56, 189, 248, 0.20);
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.7),
              0 0 24px -10px rgba(56, 189, 248, 0.35);
}

/* ----- Accordéon FAQ (Fonctionnalités) : on-brand ----- */
[data-bs-theme="dark"] .accordion-item {
  background-color: var(--surface-card);
  border-color: var(--border-subtle);
}
[data-bs-theme="dark"] .accordion-button {
  background-color: var(--surface-card);
  color: #F2F8FF;
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: rgba(56, 189, 248, 0.10);
  color: var(--brand-cyan);
  box-shadow: inset 0 -1px 0 rgba(56, 189, 248, 0.25);
}
[data-bs-theme="dark"] .accordion-body { color: var(--text-muted); }

/* ----- Onglet Conseils : titres lisibles (fix #222 sur fond sombre) ----- */
.conseil-titre {
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--text-base);
}
[data-bs-theme="dark"] .conseil-titre { color: #F2F8FF; }
/* Carte conseil : fine bande verte à gauche pour réchauffer + rythmer */
[data-bs-theme="dark"] #conseilsContent .card-soft {
  border-left: 3px solid rgba(74, 222, 128, 0.55);
}

/* Titres de cartes feature/section en blanc franc (évite le gris terne) */
[data-bs-theme="dark"] .feature-card h3 { color: #F2F8FF; }

/* ----- Badges "Sport"/"Repos" et accents : un peu de vert ----- */
[data-bs-theme="dark"] .badge.text-bg-success,
[data-bs-theme="dark"] .badge.bg-success { background-color: #16A34A !important; }

/* ==========================================================================
   VERT DANS L'APP + ADMIN — injection d'accents verts dans les écrans denses
   (les pages internes restaient "trop bleues"). On vise titres, onglets,
   icônes de titre, valeurs chiffrées et boutons.
   ========================================================================== */

/* Onglets de l'app : soulignement actif en VERT (au lieu de cyan) */
[data-bs-theme="dark"] .app-tabs .nav-link.active {
  color: #7CFFB8 !important;
  border-bottom-color: #4ADE80 !important;
}
[data-bs-theme="dark"] .app-tabs .nav-link:hover {
  color: #7CFFB8;
  background: rgba(74, 222, 128, 0.08);
}

/* Onglets admin : actif en vert (on conserve le style soulignement existant) */
[data-bs-theme="dark"] .admin-tabs .nav-link.active {
  color: #7CFFB8 !important;
  border-bottom-color: #4ADE80 !important;
}
[data-bs-theme="dark"] .admin-tabs .nav-link:hover {
  color: #7CFFB8;
  background: rgba(74, 222, 128, 0.08);
}

/* Barre d'accent à gauche des titres de carte (app) : vert dominant */
[data-bs-theme="dark"] .card-soft h3::before {
  background: linear-gradient(180deg, var(--brand-cyan), #4ADE80) !important;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

/* Icône en tête de titre (bi ... text-primary dans un h2/h3) → vert */
[data-bs-theme="dark"] h2 .text-primary,
[data-bs-theme="dark"] h3 .text-primary,
[data-bs-theme="dark"] h2 > .bi,
[data-bs-theme="dark"] h3 > .bi { color: #4ADE80 !important; }

/* Valeurs chiffrées clés (Besoins : %, kcal, macros) : on garde le cyan pour
   les gros chiffres mais on bascule les FIBRES + accents verts là où c'est
   nutritionnel. Le n° de calories reste cyan (lisibilité). */
[data-bs-theme="dark"] .stat-value { color: #5FD0FF; }

/* Liens d'action / boutons outline de l'app : texte vert */
[data-bs-theme="dark"] .btn-outline-primary {
  color: #5BF0A0;
  border-color: rgba(91, 240, 160, 0.5);
}
[data-bs-theme="dark"] .btn-outline-primary:hover {
  background: rgba(91, 240, 160, 0.14);
  color: #7CFFB8;
  border-color: #5BF0A0;
}

/* Badges "Sport"/"Repos"/niveau : le vert pour le positif */
[data-bs-theme="dark"] .badge.text-bg-success,
[data-bs-theme="dark"] .badge.bg-success {
  background-color: #1E7A46 !important;
  color: #B9FFD6 !important;
}

/* Bandeaux d'info internes (info-block) : liseré vert à gauche */
[data-bs-theme="dark"] .info-block,
[data-bs-theme="dark"] .info-block-blue,
[data-bs-theme="dark"] .info-block-teal {
  border-left: 3px solid rgba(74, 222, 128, 0.5);
}

/* ----- Zones encadrées du modal admin (Adhésion) : lisibles en dark ----- */
.admin-zone {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}
.admin-zone-warn {
  border-left: 4px solid #ffb300;
}
[data-bs-theme="dark"] .admin-zone {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-subtle);
  color: var(--text-base);
}
[data-bs-theme="dark"] .admin-zone-warn {
  background: rgba(255, 179, 0, 0.10);
  border-left-color: #ffb300;
}
[data-bs-theme="dark"] .admin-zone .form-text,
[data-bs-theme="dark"] .admin-zone .text-muted { color: #A6B6CE !important; }
[data-bs-theme="dark"] .admin-zone .form-label { color: var(--text-base); }

/* Boutons outline warning/info lisibles en dark (modal admin) */
[data-bs-theme="dark"] .btn-outline-warning {
  color: #FFCB52; border-color: rgba(255, 179, 0, 0.55);
}
[data-bs-theme="dark"] .btn-outline-warning:hover {
  background: rgba(255, 179, 0, 0.16); color: #FFE08A;
}
[data-bs-theme="dark"] .btn-outline-info {
  color: #5FD0FF; border-color: rgba(95, 208, 255, 0.55);
}
[data-bs-theme="dark"] .btn-outline-info:hover {
  background: rgba(95, 208, 255, 0.16); color: #9BE3FF;
}

/* ----- Écran "abonnement requis" (mode restreint B2C) ----- */
#subscriptionWall {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(5, 15, 30, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#subscriptionWall .sub-wall-card {
  max-width: 460px;
  width: 100%;
  text-align: center;
  padding: 2.2rem 1.8rem;
}
#subscriptionWall .sub-wall-icon {
  font-size: 2.6rem;
  color: var(--brand-cyan);
  display: block;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.6));
}
/* En mode restreint, on grise visuellement les onglets désactivés */
body.access-restricted .app-tabs .nav-link.disabled {
  opacity: 0.4;
  pointer-events: auto; /* on intercepte le clic pour montrer le mur */
  cursor: not-allowed;
}

/* ----- App native (Capacitor) : masquer les éléments WEB/vitrine ----- */
.native-app .hide-in-app { display: none !important; }
/* La connexion en plein écran (pas de header web → on récupère l'espace haut) */
.native-app body { padding-top: 0 !important; }

/* ----- Logo sur l'écran de connexion (app + web) ----- */
.login-logo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35),
              0 0 28px -6px rgba(56, 189, 248, 0.45);
}