/**
 * OpenFit - Palette Pantone 2026
 * Design homogène et moderne avec la palette Cloud Dancer
 * Appliqué à toutes les pages du thème
 */

/* ============================================
   VARIABLES CSS - PALETTE PANTONE 2026
   ============================================ */
:root {
  /* Pantone 2026 - Cloud Dancer */
  --cloud-dancer: #F2F3F2;
  --nimbus-cloud: #D6D8D9;

  /* Powdered Pastels */
  --lemon-icing: #F6E9B2;
  --raindrops-rose: #E9D6DB;
  --ice-melt: #EFE0D6;
  --peach-dust: #F0D8C8;
  --almost-aqua: #EBD3C7;
  --orchid-tint: #E7DBD3;

  /* Text Colors */
  --text-main: #1F1F1F;
  --text-muted: #6B6E70;
  --text-light: #9CA3AF;

  /* Semantic Colors (using Pantone palette) */
  --primary: #b85035;
  --primary-dark: #983920;
  --primary-light: #f6e3dc;
  --secondary: #983920;
  --accent: #d96b4d;
  --success: #3E8E5A;
  --warning: var(--lemon-icing);
  --info: var(--ice-melt);
  --danger: #E9A5A5;
  /* Soft red based on raindrops-rose */

  /* Background Colors */
  --bg-primary: #FFFFFF;
  --bg-secondary: var(--cloud-dancer);
  --bg-tertiary: var(--nimbus-cloud);
  --bg-card: #FFFFFF;
  --bg-gradient: linear-gradient(135deg, var(--ice-melt), var(--peach-dust), var(--lemon-icing));
  --bg-gradient-soft: linear-gradient(135deg, var(--raindrops-rose), var(--ice-melt));

  /* Border Colors */
  --border-color: var(--nimbus-cloud);
  --border-light: var(--cloud-dancer);
  --border-radius: 32px;
  --border-radius-md: 24px;
  --border-radius-sm: 16px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition: all 0.3s ease;
  --transition-fast: all 0.2s ease;
}

/* ============================================
   BASE STYLES
   ============================================ */
body {
  background: var(--cloud-dancer);
  color: var(--text-main);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1.125rem;
}

p {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

/* Survol des liens de CONTENU uniquement → couleur de marque. Les boutons-liens
   (classes `*btn*` ou `bg-*`) sont exclus : ils gardent leur couleur de texte
   (sinon le texte blanc des boutons virait à l'orange au survol). */
a:not([class*="btn"]):not([class*="bg-"]):hover {
  color: var(--primary-dark);
}

/* ============================================
   BUTTONS
   ============================================ */
button,
.btn,
input[type="submit"],
input[type="button"],
a.button {
  padding: 16px 34px;
  border-radius: 999px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.slider-btn.slider-next,
.slider-btn.slider-prev {
  padding: 16px 16px;

}

.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary,
button.btn-secondary {
  background: var(--bg-primary);
  color: var(--text-main);
  border: 1px solid var(--nimbus-cloud);
}

.btn-secondary:hover {
  background: var(--cloud-dancer);
  border-color: var(--primary);
}

.btn-accent {
  background: var(--raindrops-rose);
  color: var(--text-main);
}

.btn-accent:hover {
  background: #E0C4CC;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ============================================
   CARDS
   ============================================ */
.card,
.bg-white.rounded-xl,
.bg-white.rounded-lg {
  background: var(--bg-card);
  border-radius: var(--border-radius);

  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  transition: var(--transition);
}

.card:hover,
.bg-white.rounded-xl:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* ============================================
   BADGES & TAGS
   ============================================ */
.badge,
.tag,
span[class*="badge"],
span[class*="tag"] {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.badge-primary,
.tag-primary {
  background: var(--almost-aqua);
  color: var(--text-main);
}

.badge-secondary,
.tag-secondary {
  background: var(--orchid-tint);
  color: var(--text-main);
}

.badge-accent,
.tag-accent {
  background: var(--raindrops-rose);
  color: var(--text-main);
}

.badge-warning,
.tag-warning {
  background: var(--lemon-icing);
  color: var(--text-main);
}

.badge-info,
.tag-info {
  background: var(--ice-melt);
  color: var(--text-main);
}

/* ============================================
   INPUTS & FORMS
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
  width: 100%;
  border: 1px solid var(--nimbus-cloud);
  border-radius: var(--border-radius-sm);
  background: var(--bg-primary);
  color: var(--text-main);
  font-size: 16px;
  transition: var(--transition-fast);
}

/* Padding par défaut — pas sur les inputs à icône (classe utilitaire pl-*),
   sinon il écraserait le padding-left réservé au pictogramme. */
input[type="text"]:not([class*="pl-"]),
input[type="email"]:not([class*="pl-"]),
input[type="password"]:not([class*="pl-"]),
input[type="number"]:not([class*="pl-"]),
input[type="date"]:not([class*="pl-"]),
input[type="datetime-local"]:not([class*="pl-"]),
textarea:not([class*="pl-"]),
select:not([class*="pl-"]) {
  padding: 12px 16px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* ============================================
   BACKGROUNDS & GRADIENTS
   ============================================ */
.bg-gradient-pantone {
  background: var(--bg-gradient);
}

.bg-gradient-soft {
  background: var(--bg-gradient-soft);
}

.bg-cloud-dancer {
  background: var(--cloud-dancer);
}

.bg-primary {
  background: var(--primary);
}

.bg-secondary {
  background: var(--secondary);
}

.bg-accent {
  background: var(--accent);
}

/* ============================================
   TEXT COLORS
   ============================================ */
.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--secondary);
}

.text-muted {
  color: var(--text-muted);
}

.text-main {
  color: var(--text-main);
}

/* ============================================
   OVERRIDE TAILWIND COLORS - FORCÉ AVEC !important
   ============================================ */

/* Indigo colors -> Almost Aqua - TOUS LES VARIATIONS */
.bg-indigo-50,
.bg-indigo-100,
.bg-indigo-200,
.bg-indigo-300,
.bg-indigo-400,
.bg-indigo-500,
.bg-indigo-600,
.bg-indigo-700,
.bg-indigo-800,
.bg-indigo-900 {
  background-color: var(--almost-aqua) !important;
}

.bg-indigo-600,
.bg-indigo-500,
button.bg-indigo-600,
a.bg-indigo-600,
.btn-primary,
button[class*="bg-indigo"] {
  background-color: var(--almost-aqua) !important;
  background: var(--almost-aqua) !important;
  color: var(--text-main) !important;
}

.bg-indigo-100,
.bg-indigo-50 {
  background-color: var(--primary-light) !important;
  background: var(--primary-light) !important;
}

.text-indigo-600,
.text-indigo-500,
.text-indigo-700,
a.text-indigo-600,
span.text-indigo-600,
i.text-indigo-600,
i[class*="text-indigo"],
.fas.text-indigo-600,
.far.text-indigo-600,
.fab.text-indigo-600 {
  color: #6B8E7A !important;
  /* Couleur plus foncée pour meilleur contraste sur fond clair */
}

.hover\:bg-indigo-700:hover,
.hover\:bg-indigo-600:hover,
button:hover.bg-indigo-600,
a:hover.bg-indigo-600 {
  background-color: var(--primary-dark) !important;
  background: var(--primary-dark) !important;
}

.hover\:bg-indigo-200:hover,
.hover\:bg-indigo-100:hover {
  background-color: var(--primary-light) !important;
  background: var(--primary-light) !important;
}

/* Gray backgrounds -> Cloud Dancer palette - TOUS */
.bg-gray-50,
.bg-gray-100,
body.bg-gray-50,
div.bg-gray-50 {
  background-color: var(--cloud-dancer) !important;
  background: var(--cloud-dancer) !important;
}

.bg-gray-200,
.bg-gray-300 {
  background-color: var(--nimbus-cloud) !important;
  background: var(--nimbus-cloud) !important;
}

.text-gray-600,
.text-gray-500,
.text-gray-400,
p.text-gray-600,
span.text-gray-600 {
  color: var(--text-muted) !important;
}

.text-gray-800,
.text-gray-900,
h1.text-gray-800,
h2.text-gray-800,
h3.text-gray-800 {
  color: var(--text-main) !important;
}

/* Green -> Almost Aqua */
.bg-green-50,
.bg-green-100,
.bg-green-200 {
  background-color: var(--almost-aqua) !important;
  background: var(--almost-aqua) !important;
}

.text-green-700,
.text-green-600 {
  color: var(--primary-dark) !important;
}

.bg-green-50 {
  background-color: var(--primary-light) !important;
  background: var(--primary-light) !important;
}

/* Yellow -> Lemon Icing */
.bg-yellow-50,
.bg-yellow-100,
.bg-yellow-200 {
  background-color: var(--lemon-icing) !important;
  background: var(--lemon-icing) !important;
}

.text-yellow-700,
.text-yellow-600 {
  color: var(--text-main) !important;
}

/* Red -> Soft red based on raindrops-rose */
.bg-red-50,
.bg-red-100,
.bg-red-200 {
  background-color: #F5D5D5 !important;
  background: #F5D5D5 !important;
}

.text-red-700,
.text-red-600 {
  color: #C87A7A !important;
}

/* Blue -> Ice Melt */
.bg-blue-50,
.bg-blue-100,
.bg-blue-200 {
  background-color: var(--ice-melt) !important;
  background: var(--ice-melt) !important;
}

.text-blue-600,
.text-blue-700 {
  color: var(--text-main) !important;
}

/* Purple/Pink -> Orchid Tint / Raindrops Rose */
.bg-purple-50,
.bg-purple-100 {
  background-color: var(--orchid-tint) !important;
  background: var(--orchid-tint) !important;
}

.bg-pink-50,
.bg-pink-100 {
  background-color: var(--raindrops-rose) !important;
  background: var(--raindrops-rose) !important;
}

/* ============================================
   SPECIFIC COMPONENTS - FORCÉ
   ============================================ */
/* Activity Cards */
.activity-card,
.partner-card,
div[class*="activity"],
div[class*="partner"] {
  background: var(--bg-card) !important;
  border: 2px solid var(--border-light) !important;
  border-radius: var(--border-radius) !important;
  transition: var(--transition);
}

.activity-card:hover,
.partner-card:hover {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

.activity-card.active,
.partner-card.active {
  border-color: var(--primary) !important;
  background: var(--primary-light) !important;
}

/* Buttons in cards - TOUS LES BOUTONS */
.partner-card-btn,
.activity-card-btn,
button.bg-indigo-600,
a.bg-indigo-600,
button[class*="indigo"],
a[class*="indigo"],
.w-full.bg-indigo-600,
button.w-full.bg-indigo-600 {
  background: var(--almost-aqua) !important;
  background-color: var(--almost-aqua) !important;
  color: var(--text-main) !important;
}

.partner-card-btn:hover,
.activity-card-btn:hover,
button.bg-indigo-600:hover,
a.bg-indigo-600:hover,
.hover\:bg-indigo-700:hover {
  background: var(--primary-dark) !important;
  background-color: var(--primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* Slider buttons */
.slider-btn,
.partners-slider-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--primary-dark) !important;
}

.slider-btn:hover,
.partners-slider-btn:hover:not(:disabled) {
  background: var(--almost-aqua) !important;
  color: var(--text-main) !important;
}

/* Map controls */
.leaflet-control-zoom a {
  background-color: var(--bg-primary) !important;
  color: #6B8E7A !important;
  /* Couleur plus foncée pour meilleur contraste */
  border: 1px solid var(--border-light) !important;
}

.leaflet-control-zoom a:hover {
  background-color: var(--cloud-dancer) !important;
}

/* Icônes avec meilleur contraste - RÈGLES SPÉCIFIQUES */
i.fas,
i.far,
i.fab,
.fas,
.far,
.fab,
[class*="fas"],
[class*="far"],
[class*="fab"],
i[class*="fas"],
i[class*="far"],
i[class*="fab"] {
  /* Assurer que les icônes sont visibles */
  background: none !important;
  background-color: transparent !important;
  color: #5A7A68 !important;
  /* Couleur unifiée pour toutes les icônes */
}

/* Icônes text-indigo-600 - Couleur unifiée */
i.text-indigo-600,
.fas.text-indigo-600,
.far.text-indigo-600,
.fab.text-indigo-600,
i[class*="text-indigo-600"],
[class*="fas"][class*="text-indigo-600"],
[class*="far"][class*="text-indigo-600"],
i.fas.text-indigo-600,
i.far.text-indigo-600 {
  color: #5A7A68 !important;
  /* Couleur unifiée pour toutes les icônes */
}

/* Icônes sur fond blanc ou clair - Couleur unifiée */
.bg-white i.text-indigo-600,
.bg-white .fas.text-indigo-600,
.bg-white .far.text-indigo-600,
.bg-gray-50 i.text-indigo-600,
.bg-gray-100 i.text-indigo-600,
.bg-cloud-dancer i.text-indigo-600,
div[class*="bg-white"] i[class*="text-indigo-600"],
div[class*="bg-gray-50"] i[class*="text-indigo-600"],
div[class*="bg-gray-100"] i[class*="text-indigo-600"] {
  color: #5A7A68 !important;
  /* Couleur unifiée */
}

/* Icônes dans les headers et titres - Couleur unifiée */
h1 i.text-indigo-600,
h2 i.text-indigo-600,
h3 i.text-indigo-600,
h4 i.text-indigo-600,
.text-xl i.text-indigo-600,
.text-2xl i.text-indigo-600,
h2 .fas.text-indigo-600,
h3 .fas.text-indigo-600,
h1 .fas,
h2 .fas,
h3 .fas,
h4 .fas,
h1 i.fas,
h2 i.fas,
h3 i.fas,
h4 i.fas {
  color: #5A7A68 !important;
  /* Couleur unifiée pour toutes les icônes */
}

/* Backgrounds globaux */
body,
body.bg-gray-50,
.min-h-screen.bg-gray-50,
div.bg-gray-50 {
  background-color: var(--cloud-dancer) !important;
  background: var(--cloud-dancer) !important;
}

/* Cards blanches */
.bg-white,
.bg-white.rounded-xl,
.bg-white.rounded-lg,
div.bg-white {
  background-color: var(--bg-card) !important;
  background: var(--bg-card) !important;
}

/* Textes dans les headers */
h1,
h2,
h3,
h4,
h5,
h6,
h1.text-gray-800,
h2.text-gray-800,
h3.text-gray-800 {
  /* color: var(--text-main) !important;*/
}

p,
p.text-gray-600,
span.text-gray-600 {
  /*color: var(--text-muted) !important;*/
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  :root {
    --border-radius: 24px;
    --border-radius-md: 16px;
    --border-radius-sm: 12px;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  .card {
    padding: 24px;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.shadow-pantone {
  box-shadow: var(--shadow);
}

.shadow-pantone-md {
  box-shadow: var(--shadow-md);
}

.shadow-pantone-lg {
  box-shadow: var(--shadow-lg);
}

.rounded-pantone {
  border-radius: var(--border-radius);
}

.rounded-pantone-md {
  border-radius: var(--border-radius-md);
}

/**
 * OpenFit - Palette Pantone 2026 - FORCE OVERRIDE
 * Ce fichier force l'application de la palette même sur les styles inline
 * Chargé en dernier avec priorité maximale
 */

/* ============================================
   OVERRIDE FORCÉ - TOUTES LES VARIATIONS
   ============================================ */

/* Indigo -> Almost Aqua - TOUTES LES VARIATIONS ET COMBINAISONS */
[class*="bg-indigo"],
[class*="indigo-600"],
[class*="indigo-500"],
[class*="indigo-700"],
button[class*="indigo"],
a[class*="indigo"],
div[class*="indigo"],
span[class*="indigo"] {
  background-color: #C9D9CE !important;
  background: #C9D9CE !important;
}

[class*="bg-indigo-100"],
[class*="bg-indigo-50"] {
  background-color: #E5F0EA !important;
  background: #E5F0EA !important;
}

[class*="text-indigo"] {
  color: #6B8E7A !important;
  /* Couleur plus foncée pour meilleur contraste */
}

/* Supprimer le background et appliquer la couleur unifiée pour toutes les icônes Font Awesome */
i.fas,
i.far,
i.fab,
.fas,
.far,
.fab,
[class*="fas"],
[class*="far"],
[class*="fab"],
i[class*="fas"],
i[class*="far"],
i[class*="fab"] {
  background: none !important;
  background-color: transparent !important;
  color: #5A7A68 !important;
  /* Couleur unifiée pour toutes les icônes */
}

/* Icônes spécifiquement - Couleur unifiée */
i[class*="text-indigo"],
[class*="fas"][class*="text-indigo"],
[class*="far"][class*="text-indigo"],
[class*="fab"][class*="text-indigo"],
i.fas[class*="text-indigo"],
i.far[class*="text-indigo"] {
  color: #5A7A68 !important;
  /* Couleur unifiée pour toutes les icônes */
  background: none !important;
  background-color: transparent !important;
}

/* Icônes sur fond clair - Contraste maximum */
[class*="bg-white"] i[class*="text-indigo"],
[class*="bg-gray-50"] i[class*="text-indigo"],
[class*="bg-gray-100"] i[class*="text-indigo"],
[class*="bg-cloud-dancer"] i[class*="text-indigo"] {
  color: #4A6A58 !important;
  /* Très foncé sur fond très clair */
}

/* Icônes dans les titres et headers - Couleur unifiée */
h1 [class*="text-indigo"],
h2 [class*="text-indigo"],
h3 [class*="text-indigo"],
h4 [class*="text-indigo"],
h2 [class*="fas"][class*="text-indigo"],
h3 [class*="fas"][class*="text-indigo"],
h1 [class*="fas"],
h2 [class*="fas"],
h3 [class*="fas"],
h4 [class*="fas"],
h1 i[class*="fas"],
h2 i[class*="fas"],
h3 i[class*="fas"],
h4 i[class*="fas"] {
  color: #5A7A68 !important;
  /* Couleur unifiée pour toutes les icônes */
}

[class*="hover:bg-indigo"]:hover,
[class*="hover\:bg-indigo"]:hover {
  background-color: #A8C4B5 !important;
  background: #A8C4B5 !important;
}

/* Gray -> Cloud Dancer - TOUTES LES VARIATIONS */
[class*="bg-gray-50"],
[class*="bg-gray-100"],
body[class*="gray"],
div[class*="bg-gray-50"],
div[class*="bg-gray-100"] {
  background-color: #F2F3F2 !important;
  background: #F2F3F2 !important;
}

[class*="bg-gray-200"],
[class*="bg-gray-300"] {
  background-color: #D6D8D9 !important;
  background: #D6D8D9 !important;
}

[class*="text-gray-600"],
[class*="text-gray-500"],
[class*="text-gray-400"] {
  color: #6B6E70 !important;
}

[class*="text-gray-800"],
[class*="text-gray-900"] {
  color: #1F1F1F !important;
}

/* Green -> Almost Aqua */
[class*="bg-green-100"],
[class*="bg-green-50"] {
  background-color: #C9D9CE !important;
  background: #C9D9CE !important;
}

[class*="text-green-700"] {
  color: #A8C4B5 !important;
}

/* Yellow -> Lemon Icing */
[class*="bg-yellow-100"],
[class*="bg-yellow-50"] {
  background-color: #F6E9B2 !important;
  background: #F6E9B2 !important;
}

[class*="text-yellow-700"] {
  color: #1F1F1F !important;
}

/* Red -> Soft Red */
[class*="bg-red-100"],
[class*="bg-red-50"] {
  background-color: #F5D5D5 !important;
  background: #F5D5D5 !important;
}

[class*="text-red-700"] {
  color: #C87A7A !important;
}

/* Blue -> Ice Melt */
[class*="bg-blue-100"],
[class*="bg-blue-50"] {
  background-color: #DDEAF2 !important;
  background: #DDEAF2 !important;
}

/* Purple -> Orchid Tint */
[class*="bg-purple-100"],
[class*="bg-purple-50"] {
  background-color: #DDD6E2 !important;
  background: #DDD6E2 !important;
}

/* Pink -> Raindrops Rose */
[class*="bg-pink-100"],
[class*="bg-pink-50"] {
  background-color: #E9D6DB !important;
  background: #E9D6DB !important;
}

/* ============================================
   OVERRIDE STYLES INLINE (via attribut style)
   ============================================ */
/* Note: Les styles inline ne peuvent pas être override par CSS,
   mais on peut cibler les éléments avec des classes spécifiques */

/* Forcer les backgrounds même si style inline existe */
.bg-indigo-600[style*="background"],
.bg-indigo-500[style*="background"] {
  background-color: #C9D9CE !important;
  background: #C9D9CE !important;
}

.bg-gray-50[style*="background"],
.bg-gray-100[style*="background"] {
  background-color: #F2F3F2 !important;
  background: #F2F3F2 !important;
}

/* ============================================
   OVERRIDE SPÉCIFIQUE POUR COMPOSANTS
   ============================================ */
/* Boutons */
button,
.btn,
input[type="submit"],
a.button {
  /* Si la classe contient indigo, forcer almost-aqua */
}

button.bg-indigo-600,
a.bg-indigo-600,
.w-full.bg-indigo-600 {
  background-color: #C9D9CE !important;
  background: #C9D9CE !important;
  border-color: #C9D9CE !important;
}

button.bg-indigo-600:hover,
a.bg-indigo-600:hover,
.hover\:bg-indigo-700:hover {
  background-color: #A8C4B5 !important;
  background: #A8C4B5 !important;
  border-color: #A8C4B5 !important;
}

/* Cards */
.bg-white.rounded-xl,
.bg-white.rounded-lg {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

/* Body et containers principaux */
body,
.min-h-screen,
.min-h-screen.bg-gray-50 {
  background-color: #F2F3F2 !important;
  background: #F2F3F2 !important;
}

/**
 * OpenFit - Styles Unifiés
 * Tous les styles extraits des fichiers PHP et unifiés avec la palette Pantone 2026
 */

/* ============================================
   FILTRES - STYLE COMPACT ET TOGGLE SWITCH
   ============================================ */
/* Style pour les selects dans les filtres avec flèche visible */
#activity-filter-form select,
#activity-filter-form select.bg-white,
form#activity-filter-form select,
form#activity-filter-form select.bg-white {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px !important;
  background-color: var(--accent-soft) !important;
  padding-right: 2.75rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

#activity-filter-form select::-ms-expand {
  display: none !important;
  /* Masquer la flèche par défaut d'IE/Edge */
}

#activity-filter-form select:focus,
#activity-filter-form select.bg-white:focus {
  outline: none !important;
  border-color: #C9D9CE !important;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-color: var(--accent-soft) !important;
}

/* Toggle Switch Style */
#toggle-map-view {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

label[for="toggle-map-view"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.toggle-switch-wrapper {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background-color: #4b5563;
  border-radius: 9999px;
  transition: background-color 0.2s;
  top: 4px;
}

label[for="toggle-map-view"].toggle-active .toggle-switch-wrapper {
  background-color: #F0D8C8;
}

.toggle-switch-wrapper::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

label[for="toggle-map-view"].toggle-active .toggle-switch-wrapper::after {
  transform: translateX(20px);
}

/* Container du toggle avec texte */
.flex.items-center.gap-3.bg-gray-800 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: #F2F3F2;
  color: #000000;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
}

/* Style pour le bouton géolocalisation */
#get-location-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1rem;
  background-color: var(--accent-soft, #fde6de);
  color: var(--primary-dark, #983920);
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  border: none;
  cursor: pointer;
}

#get-location-btn:hover {
  background-color: #c7d2fe;
}

#get-location-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================
   FONT AWESOME ICONS - SUPPRESSION BACKGROUND ET COULEUR UNIFIÉE
   ============================================ */
.fas,
.far,
.fab,
i.fas,
i.far,
i.fab,
[class*="fas"],
[class*="far"],
[class*="fab"],
i[class*="fas"],
i[class*="far"],
i[class*="fab"] {
  background: none !important;
  background-color: transparent !important;
  color: #5A7A68 !important;
  /* Couleur unifiée pour toutes les icônes */
}

/* ============================================
   BOUTON RÉSERVER - COULEUR PEACH DUST
   ============================================ */
.reserve-btn-active {
  background-color: #F0D8C8 !important;
  background: #F0D8C8 !important;
  color: #1F1F1F !important;
  border: none;
}

.reserve-btn-active:hover:not(:disabled) {
  background-color: #E5C9B5 !important;
  background: #E5C9B5 !important;
  opacity: 0.9;
}

/* ============================================
   LEAFLET MAP STYLES
   ============================================ */
/* Style simplifié pour les popups de la carte */
.leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.leaflet-popup-content {
  margin: 12px;
}

/* Forcer l'affichage de toutes les images dans les popups Leaflet */
.leaflet-popup-content img,
.leaflet-popup-content-wrapper img,
.leaflet-popup img,
.leaflet-popup-content a img,
.leaflet-popup-content-wrapper a img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* S'assurer que les liens contenant des images sont visibles */
.leaflet-popup-content a[style*="display: block"],
.leaflet-popup-content a[href] {
  display: block !important;
  visibility: visible !important;
}

.custom-popup a:hover {
  text-decoration: underline;
}

.custom-popup img {
  transition: transform 0.2s ease;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  height: auto !important;
}

.custom-popup a:hover img {
  transform: scale(1.02);
}

/* Images dans les popups Leaflet - Forcer l'affichage */
.leaflet-popup-content img,
.leaflet-popup-content-wrapper img,
.custom-popup img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Images spécifiques dans les slides d'activités des popups */
.leaflet-popup-content .activity-slide img,
.leaflet-popup-content-wrapper .activity-slide img,
.custom-popup .activity-slide img,
.activity-slider-container .activity-slide img,
.activity-slider-wrapper .activity-slide img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}

/* Conteneur des images dans les popups */
.leaflet-popup-content a[style*="display: block"] img,
.leaflet-popup-content a img,
.activity-slide a img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Style simplifié pour la carte */
#activities-map {
  border-radius: 0.5rem;
}

/* Simplifier les contrôles de zoom */
.leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.leaflet-control-zoom a {
  background-color: var(--bg-primary) !important;
  color: var(--primary-dark) !important;
  border: 1px solid var(--border-light) !important;
}

.leaflet-control-zoom a:hover {
  background-color: var(--cloud-dancer) !important;
}

/* Simplifier l'attribution */
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.8) !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
}

/* ============================================
   ACTIVITY SLIDER STYLES
   ============================================ */
.activity-slider-container {
  position: relative;
}

.activity-slider-wrapper {
  position: relative;
  overflow: hidden;
}

.activity-slider-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.activity-slide {
  min-width: 100%;
  flex-shrink: 0;
  position: relative;
}

/* Images dans les slides d'activités des popups de la carte - Forcer l'affichage */
/* S'assurer que les slides dans les popups ne sont pas cachés par les styles du slider d'images */
.leaflet-popup-content .activity-slide,
.leaflet-popup-content-wrapper .activity-slide,
.custom-popup .activity-slide,
.activity-slider-container .activity-slide:not(#activity-image-slider .activity-slide) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  min-width: 100% !important;
  flex-shrink: 0 !important;
}

/* Images dans les popups - Forcer l'affichage avec toutes les variations possibles */
.activity-slider-container .activity-slide img,
.activity-slider-wrapper .activity-slide img,
.leaflet-popup-content .activity-slide img,
.leaflet-popup-content-wrapper .activity-slide img,
.custom-popup .activity-slide img,
.leaflet-popup-content img[style*="width: 100%"],
.leaflet-popup-content img[style*="height: 150px"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  margin-bottom: 0.5rem !important;
}

.slider-btn {
  transition: all 0.2s ease;
}

.slider-btn:hover {
  background: rgba(255, 255, 255, 1) !important;
  transform: translateY(-50%) scale(1.1);
}

.slider-dot:hover {
  transform: scale(1.2);
}

/* ============================================
   PARTNERS SLIDER STYLES
   ============================================ */
#partners-slider-container {
  margin-top: 1rem;
}

#partners-slider-wrapper {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

#partners-slider-wrapper::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

#partners-slider-track {
  display: flex;
  gap: 1rem;
  padding-bottom: 0.5rem;
}

.partner-card {
  min-width: 280px;
  max-width: 280px;
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--border-radius-md);
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.partner-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.partner-card.active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: var(--shadow-md);
}

.partner-card-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
  margin-bottom: 0.75rem;
  background: var(--bg-gradient-soft);
}

.partner-card-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.partner-card-info {
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.partner-card-activity-count {
  display: inline-block;
  background: var(--almost-aqua);
  color: var(--text-main);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.partner-card-btn {
  margin-top: 0.75rem;
  cursor: pointer;
  border: none;
  outline: none;
}

.partner-card-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.partners-slider-btn {
  transition: all 0.2s ease;
}

.partners-slider-btn:hover:not(:disabled) {
  background: var(--almost-aqua) !important;
  color: var(--text-main) !important;
}

/* ============================================
   RESERVATION POPUP STYLES
   ============================================ */
.reservation-popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.reservation-popup-overlay.active {
  display: flex;
}

.reservation-popup {
  background: var(--bg-card);
  border-radius: var(--border-radius-sm);
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  box-shadow: var(--shadow-lg);
}

.reservation-popup h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: var(--text-main);
}

.reservation-popup .info-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
}

.reservation-popup .info-item:last-child {
  border-bottom: none;
}

.reservation-popup .info-label {
  font-weight: 500;
  color: var(--text-muted);
}

.reservation-popup .info-value {
  font-weight: bold;
  color: var(--text-main);
}

.reservation-popup .credits-highlight {
  color: var(--primary-dark);
  font-size: 1.25rem;
}

.reservation-popup .credits-warning {
  color: var(--danger);
  font-size: 1.25rem;
}

.reservation-popup .buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.reservation-popup .btn {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius-sm);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.reservation-popup .btn-confirm {
  background: var(--almost-aqua);
  color: var(--text-main);
  border: none;
}

.reservation-popup .btn-confirm:hover {
  background: var(--primary-dark);
}

.reservation-popup .btn-cancel {
  background: var(--cloud-dancer);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.reservation-popup .btn-cancel:hover {
  background: var(--nimbus-cloud);
}

/* ============================================
   ACTIVITY IMAGE SLIDER STYLES
   ============================================ */
#activity-image-slider {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
}

/* Styles spécifiques pour le slider d'images dans single-activity.php uniquement */
#activity-image-slider .activity-slide {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 320px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#activity-image-slider .activity-slide.active {
  display: block !important;
  opacity: 1;
  z-index: 1;
}

#activity-image-slider .activity-slide img {
  width: 100% !important;
  height: 100% !important;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

.slider-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(0, 0, 0, 0.6) !important;
  border: none !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: all 0.3s ease !important;
  color: #ffffff !important;
  font-size: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.slider-nav:hover {
  background: rgba(0, 0, 0, 0.8) !important;
  transform: translateY(-50%) scale(1.05) !important;
}

.slider-nav i {
  color: #ffffff !important;
  font-size: 20px !important;
}

.slider-prev {
  left: 16px !important;
}

.slider-next {
  right: 16px !important;
}

/* Styles spécifiques pour les boutons dans #activity-image-slider */
#activity-image-slider .slider-nav {
  position: absolute !important;
  z-index: 20 !important;
}

/* Assurer que le conteneur parent prend toute la hauteur */
.slider-hero-container {
  position: relative;
  overflow: hidden;
}

.slider-hero-container #activity-image-slider {
  height: 100%;
  width: 100%;
}

/* ============================================
   CAROUSEL STYLES
   ============================================ */
.carousel-container {
  position: relative;
}

.carousel-slide {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel-slide.active {
  display: block;
}

/* ============================================
   SCHEDULE SLOT STYLES
   ============================================ */
.schedule-slot {
  transition: all 0.2s ease;
}

.schedule-slot:hover {
  transform: translateY(-2px);
}

/* ============================================
   SLIDER HERO CONTAINER
   ============================================ */
.slider-hero-container {
  height: 320px;
}

@media (max-width: 1024px) {
  .slider-hero-container {
    height: 250px;
  }
}

/* ============================================
   STICKY SIDEBAR
   ============================================ */
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 1.5rem;
  height: fit-content;
  align-self: flex-start;
}

/* Éviter les débordements sur mobile */
@media (max-width: 1024px) {
  .sticky {
    position: static;
    height: auto;
  }
}

/* ============================================
   SCROLL BEHAVIOR
   ============================================ */
html {
  scroll-behavior: smooth;
}

a.scroll-smooth {
  scroll-behavior: smooth;
}


/* ─── Identique à single-activity.php ─── */
:root {
  --bg: #f6f1e8;
  --surface: rgba(255, 252, 247, 0.86);
  --surface-strong: #fffaf3;
  --card: #ffffff;
  --text: #1f2933;
  --muted: #667085;
  --line: rgba(31, 41, 51, 0.08);
  --shadow: 0 20px 60px rgba(39, 32, 24, 0.12);
  --accent: #d96b4d;
  --accent-deep: #b85035;
  --accent-soft: #fde6de;
  --sage: #7d9b87;
  --sage-soft: #e4efe7;
  --gold: #e5b95c;
  --danger-soft: #fce8e6;
  --danger-text: #9f3a2b;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
}

@keyframes moveGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.ofa-page * {
  box-sizing: border-box;
}

.ofa-page {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text);
  /* background:
        radial-gradient(circle at top left, rgba(217,107,77,0.15), transparent 28%),
        radial-gradient(circle at right 20%, rgba(125,155,135,0.16), transparent 24%),
        linear-gradient(180deg, #f9f4ec 0%, #f3ede4 100%);*/
  min-height: 100vh;
  padding-bottom: 60px;
  /* --- Touche Gemini n°3 : Arrière-plan animé --- */
  background-size: 400% 400%;
  animation: moveGradient 30s ease infinite;
}

.ofa-hero-title {
  padding: 2rem 0;
  text-align: center;
  margin-bottom: 2rem;
}

.ofa-hero-title h1 {
  font-size: clamp(1.6rem, 4vw + .4rem, 2.6rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.ofa-hero-title h1 i {
  color: var(--accent) !important;
}

.ofa-hero-title p {
  max-width: 50ch;
  margin: 0.5rem auto 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

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

.ofa-page a {
  text-decoration: none;
}

.ofa-page h1,
.ofa-page h2,
.ofa-page h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
}

/*.ofa-page p { margin: 0; }*/

.ofa-shell {
  width: min(calc(100% - 32px));
  margin: 24px auto 0;
}

/* ─── Buttons (identique single-activity.php) ─── */
.ofa-btn,
.ofa-btn-soft,
.ofa-btn-ghost {
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  font: inherit;
  font-weight: 600 !important; /* graisse fixe : tous les boutons identiques (bat les overrides scopés) */
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ofa-btn {
  background: var(--accent-deep, #b85035);
  color: #fff !important; /* texte blanc garanti, même si une règle scopée `a` cible les liens */
  box-shadow: 0 16px 30px rgba(185, 80, 53, 0.25);
}

/* L'icône d'un bouton suit la couleur du texte du bouton (blanc sur les boutons
   pleins) — neutralise la règle globale d'icône sage `!important` qui colore TOUTES
   les icônes FontAwesome. Couvre toutes les variantes de boutons. */
.ofa-btn i, .ofa-btn .fas, .ofa-btn .far, .ofa-btn .fab,
.ofa-btn-soft i, .ofa-btn-soft .fas,
.ofa-btn-ghost i, .ofa-btn-ghost .fas,
.ofa-card-detail-btn i, .ofa-card-detail-btn .fas, .ofa-card-detail-btn .far,
.ofs-qr-btn i, .ofs-qr-btn .fas,
.partner-card-btn i, .partner-card-btn .fas,
.ofp-btn i, .ofp-btn .fas,
.ofa-pc-btn--edit i, .ofa-pc-btn--edit .fas,
.outline-btn i, .outline-btn .fas, .outline-btn .far,
.soft-btn i, .soft-btn .fas, .ghost-btn i, .ghost-btn .fas,
.ofc-btn i, .ofc-btn .fas, .btn-danger i, .btn-danger .fas,
.btn-primary i, .btn-primary .fas, .btn-secondary i, .btn-accent i {
  color: inherit !important;
}

.ofa-btn-soft {
  background: var(--accent-soft);
  color: var(--primary-dark, #983920);
}

.ofa-btn-ghost {
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  border: 1px solid var(--line);
}

.ofa-btn:hover,
.ofa-btn-soft:hover,
.ofa-btn-ghost:hover {
  transform: translateY(-2px);
  filter: brightness(0.93);
}

/* --- Touche Gemini n°2 : Boutons plus 'Vivants' --- */
.ofa-btn:active {
  transform: translateY(0px) scale(0.99);
  filter: brightness(0.98);
  box-shadow: 0 8px 20px rgba(185, 80, 53, 0.2);
}

.ofa-btn:disabled,
.ofa-btn-soft:disabled,
.ofa-btn-ghost:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* Focus clavier UNIFIÉ (accessibilité) — anneau terracotta de marque sur tous
   les éléments interactifs. Comble l'absence de :focus-visible cohérent. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.ofa-btn:focus-visible,
.ofa-btn-soft:focus-visible,
.ofa-btn-ghost:focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}

.ofa-btn-full {
  width: 100%;
  justify-content: center;
}

/* ─── Typography (Fraunces) ─── */
.ofa-page h1,
.ofa-page h2,
.ofa-page h3,
.ofa-page h4 {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: 0.01em;
}

/* ─── Hero ─── */
.ofa-hero {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  min-height: 380px;
  box-shadow: var(--shadow);
  margin-bottom: 28px;
}

.ofa-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24, 28, 32, 0.75) 0%, rgba(24, 28, 32, 0.30) 55%, rgba(24, 28, 32, 0.10) 100%);
  z-index: 1;
}

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

.ofa-hero-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2a2320 0%, #4a3830 50%, #3d4a45 100%);
  z-index: 0;
}

.ofa-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
  gap: 28px;
  min-height: 340px;
  padding: 42px;
  align-items: end;
}

.ofa-eyebrow {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.ofa-hero-copy h1 {
  font-size: clamp(1.7rem, 4.5vw + .3rem, 3.4rem);
  color: white !important;
  margin-bottom: 16px;
  line-height: 1.05;
}

.ofa-hero-copy>p {
  max-width: 58ch;
  margin-bottom: 22px;
  color: rgba(255, 250, 244, 0.88) !important;
  font-size: 1.05rem;
  line-height: 1.7;
}

.ofa-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ─── Glass Panel ─── */
.ofa-glass-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  padding: 22px;
  border-radius: var(--radius-xl);
  color: white;
  /* --- Touche Gemini : Rendu Glass-Panel amélioré --- */
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease, border 0.3s ease;
}

.ofa-rating-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.ofa-glass-kicker {
  /* --- Touche Gemini : Contraste amélioré --- */
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}

.ofa-glass-caption {
  /* --- Touche Gemini : Contraste amélioré --- */
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
  margin-top: 6px;
}

.ofa-glass-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  color: #fff;
  /* --- Touche Gemini : Contraste amélioré --- */
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}

.ofa-quick-card {
  padding: 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 248, 241, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ofa-quick-card small {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.ofa-quick-card .ofa-side-list {
  margin-top: 0;
}

.ofa-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

/* ── Portefeuille crédits / onboarding (dashboard adhérent) ── */
.ofa-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #983920, #b85035);
  color: #fff;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 22px;
  box-shadow: 0 8px 24px rgba(152, 57, 32, 0.18);
}
.ofa-wallet-info { min-width: 0; }
/* Texte forcé en blanc : une règle .ofa-page/.ofa-shell p plus tardive applique
   var(--muted) (#667085) → on la surclasse avec !important (override contenu). */
.ofa-wallet .ofa-wallet-label,
.ofa-wallet .ofa-wallet-balance,
.ofa-wallet .ofa-wallet-sub { color: #fff !important; }
.ofa-wallet-label {
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.ofa-wallet-balance {
  margin: 4px 0 0;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
}
.ofa-wallet-balance span { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,0.85) !important; }
.ofa-wallet-sub { margin: 6px 0 0; font-size: 0.85rem; color: rgba(255,255,255,0.92) !important; }
.ofa-wallet-sub--empty { font-weight: 700; }
/* Bouton clair sur fond orange (texte foncé), y compris au survol. */
.ofa-wallet .ofa-btn,
.ofa-wallet .ofa-btn:hover,
.ofa-wallet .ofa-btn:focus {
  background: #fff !important;
  color: #983920 !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.ofa-wallet .ofa-btn:hover { background: #fff3ee !important; color: #7a2d18 !important; }
.ofa-wallet--onboarding .ofa-wallet-sub { font-size: 0.95rem; }

/* ── Upsell « crédits insuffisants » dans la modale de réservation ── */
.ofa-modal-upsell {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff3ee;
  border: 1px solid #e7c3b6;
  text-align: center;
}
.ofa-modal-upsell p { margin: 0 0 12px; color: #983920; }
.ofa-modal-upsell .ofa-btn { width: 100%; justify-content: center; }

.ofa-stat-card {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.ofa-stat-card strong {
  display: block;
  font-size: 1.8rem;
  margin-top: 8px;
  color: var(--text);
}

/* ─── Panels ─── */
.ofa-panel {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.ofa-panel-inner {
  padding: 28px;
}

.ofa-filter-panel {
  padding: 24px !important;
  margin-bottom: 24px;
}

.ofa-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
}

.ofa-section-head h2 {
  font-size: 1.5rem;
}

.ofa-section-head p,
.ofa-muted {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

/* ─── Filter form ─── */
.ofa-filter-form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
}

.ofa-field {
  display: grid;
  gap: 8px;
}

.ofa-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ofa-filter-panel input,
.ofa-filter-panel select {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line) !important;
  background: white !important;
  padding: 0 16px;
  font-size: 0.95rem;
}

.ofa-filter-panel input:focus,
.ofa-filter-panel select:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

.ofa-filter-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.ofa-chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ofa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(31, 41, 51, 0.08);
  font-size: 0.88rem;
  color: var(--muted);
}

.ofa-map-toggle {
  display: inline-flex;
  height: 48px;
  align-items: center;
  gap: 12px;
  background: #1f2933;
  color: #fff;
  border-radius: 999px;
  padding: 0 20px;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}

.ofa-map-toggle:hover {
  background: #323d49;
}

.ofa-toggle-switch {
  display: inline-flex;
  align-items: center;
  width: 48px;
  height: 26px;
  cursor: pointer;
}

.ofa-toggle-switch input {
  display: none;
}

.ofa-toggle-slider {
  width: 48px;
  height: 26px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  position: relative;
  transition: background 0.2s;
}

.ofa-toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

.ofa-toggle-switch input:checked+.ofa-toggle-slider {
  background: var(--accent);
}

.ofa-toggle-switch input:checked+.ofa-toggle-slider::before {
  transform: translateX(22px);
}

#get-location-btn {
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  background: var(--accent-soft) !important;
  color: var(--primary-dark, #983920) !important;
  box-shadow: none;
  height: 48px;
}

#get-location-btn:hover {
  background: #f7d8cd !important;
}

/* ─── Results Layout ─── */
.ofa-results-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: end;
}

.ofa-results-head h2 {
  margin: 0;
  font-size: 1.5rem;
}

.ofa-results-head p {
  color: #5b6472; /* WCAG AA : ≥4.5 sur fond clair (var(--muted) #667085 échouait à 4.47) */
  margin: 8px 0 0;
  line-height: 1.6;
}

.ofa-discovery-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.ofa-discovery-layout.map-active {
  grid-template-columns: minmax(0, 0.5fr) minmax(360px, 0.95fr);
}

.ofa-results-column {
  min-width: 0;
}

.ofa-map-column {
  min-width: 0;
}

.ofa-list-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.ofa-discovery-layout.map-active .ofa-list-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* ─── Activity Cards (identique single-activity.php) ─── */
.ofa-card {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(39, 32, 24, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.ofa-card:hover {
  transform: translateY(-5px);
  /* --- Touche Gemini n°1 : Lueur subtile --- */
  box-shadow: 0 16px 40px rgba(39, 32, 24, 0.14), 0 0 40px rgba(217, 107, 77, 0.2);
}

.ofa-card-img {
  height: 160px !important;
  width: 100%;
  object-fit: cover;
}

.ofa-card img {
  transition: transform 0.4s ease;
}

.ofa-card:hover img {
  transform: scale(1.04);
}

.ofa-card-body {
  padding: 18px !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ofa-card-title {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem !important;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ofa-card-studio {
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 14px;
}

.ofa-next-slot-card {
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.ofa-card:hover .ofa-next-slot-card {
  transform: scale(1.01);
  background: rgba(217, 107, 77, 0.08) !important;
  border-color: rgba(217, 107, 77, 0.3);
}

/* ─── Tags/Facts (identique single-activity.php) ─── */
.ofa-tag {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid var(--line);
  margin-right: 6px;
  margin-bottom: 6px;
  /* --- Touche Gemini n°4 : Amélioration des tags --- */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ofa-tag:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.ofa-tag-accent {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: transparent;
}

.ofa-tag-sage {
  background: var(--sage-soft);
  color: #446c52;
  border-color: transparent;
}

.ofa-tag-gold {
  background: rgba(229, 185, 92, 0.18);
  color: #8d6403;
  border-color: transparent;
}

.ofa-meta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}

.ofa-card-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #fff !important;
  background: var(--accent-deep, #b85035);
  box-shadow: 0 10px 20px rgba(185, 80, 53, 0.22);
}

.partner-card {
  min-width: 230px;
  max-width: 230px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: 0 2px 12px rgba(39, 32, 24, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.partner-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(39, 32, 24, 0.14);
}

.partner-card.active {
  border-color: rgba(217, 107, 77, 0.38);
  box-shadow: 0 0 0 3px rgba(217, 107, 77, 0.14), 0 14px 30px rgba(39, 32, 24, 0.14);
}

.partner-card-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #e8e2d8 0%, #f4ede2 100%);
}

.partner-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  margin: 0 0 8px;
  color: var(--text);
}

.partner-card-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  margin-bottom: 8px;
}

.partner-card-activity-count {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--sage-soft);
  color: #446c52;
}

.partner-card-btn {
  margin-top: 10px;
  width: 100%;
  justify-content: center;
}

.ofa-popup-cta {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: var(--accent-deep, #b85035);
  color: #fff !important;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 10px 20px rgba(185, 80, 53, 0.22);
}

.ofa-icon-accent {
  color: var(--accent) !important;
}

/* ─── Empty & Misc ─── */
.ofa-empty-state {
  text-align: center;
  padding: 60px 40px !important;
}

.ofa-empty-state p,
.ofa-filter-subtitle,
.ofa-results-head p,
.ofa-chip,
.ofa-field label {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ─── Pagination (identique single-activity.php) ─── */
.ofa-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}

.ofa-page-btn {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.ofa-page-btn.active,
.ofa-page-btn:hover:not(:disabled) {
  background: var(--text);
  color: white;
  border-color: var(--text);
}

.ofa-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ─── Alerts (identique single-activity.php) ─── */
.ofa-alert {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  font-size: 0.95rem;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ofa-alert.success {
  background: #e6f7ef;
  border: 1px solid #a3d9bc;
  color: #1a6b42;
}

.ofa-alert.error {
  background: var(--danger-soft);
  border: 1px solid #f5b4ac;
  color: var(--danger-text);
}

.ofa-alert i {
  flex-shrink: 0;
  margin-top: 2px;
}

.ofa-side-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.ofa-side-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.94rem;
}

.ofa-side-item span:last-child {
  font-weight: 600;
  color: white;
}

/* ─── Skeleton Loading ─── */
.ofa-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: ofa-skeleton-loading 1.5s infinite;
  border-radius: 8px;
}

@keyframes ofa-skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.ofa-skeleton-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}

.ofa-skeleton-img {
  height: 160px;
  width: 100%;
}

.ofa-skeleton-body {
  padding: 18px;
}

.ofa-skeleton-title {
  height: 24px;
  width: 80%;
  margin-bottom: 12px;
}

.ofa-skeleton-text {
  height: 16px;
  width: 60%;
  margin-bottom: 8px;
}

.ofa-skeleton-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.ofa-skeleton-tag {
  height: 24px;
  width: 60px;
  border-radius: 999px;
}

.ofa-skeleton-btn {
  height: 40px;
  width: 100%;
  margin-top: 12px;
}

/* ─── Sticky Map ─── */
.ofa-map-column.sticky {
  position: sticky;
  top: 100px;
  align-self: start;
}

/* ─── Responsive ─── */
@media (max-width: 1080px) {

  .ofa-hero-grid,
  .ofa-hero-stats,
  .ofa-discovery-layout.map-active {
    grid-template-columns: 1fr !important;
  }

  .ofa-filter-form {
    grid-template-columns: 1fr 1fr !important;
  }

  .ofa-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .ofa-shell {
    width: min(calc(100% - 20px), 1280px);
  }

  .ofa-hero {
    padding: 28px;
    border-radius: 24px;
    min-height: auto;
  }

  .ofa-hero-grid {
    padding: 0;
  }

  .ofa-hero h1 {
    font-size: 2.4rem;
  }

  .ofa-results-head {
    align-items: flex-start;
  }

  .ofa-filter-form {
    grid-template-columns: 1fr !important;
  }

  #get-location-btn {
    width: 100%;
    justify-content: center;
  }

  .ofa-list-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   SLIDER HARMONIZATION (partners-slider & leaflet-popup)
   ============================================ */

/* 1. Style de base unifié pour les cartes/slides dans les sliders */
.partner-card,
.leaflet-popup-content .activity-slide {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  /* 20px */
  padding: 12px !important;
  box-shadow: 0 2px 12px rgba(39, 32, 24, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
  /* Pour s'assurer que le contenu respecte le border-radius */
}

/* Effet de survol unifié */
.partner-card:hover,
.leaflet-popup-content .activity-slide:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(39, 32, 24, 0.14);
  border-color: rgba(217, 107, 77, 0.38) !important;
}

/* 2. Style unifié pour les images dans les cartes/slides */
.partner-card-image,
.leaflet-popup-content .activity-slide img {
  height: 120px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: var(--radius-md) !important;
  /* 14px */
  margin-bottom: 10px !important;
  background: linear-gradient(135deg, #e8e2d8 0%, #f4ede2 100%) !important;
}

/* 3. Style unifié pour les boutons de navigation des sliders */
.partners-slider-btn,
.activity-slider-container .slider-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10;

  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;

  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.partners-slider-btn:hover,
.activity-slider-container .slider-btn:hover {
  background: #ffffff !important;
  transform: translateY(-50%) scale(1.05) !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

.partners-slider-btn:disabled,
.activity-slider-container .slider-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: translateY(-50%) scale(1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Positionnement spécifique */
#partners-slider-container .partners-slider-btn.prev,
.activity-slider-container .slider-prev {
  left: -20px;
}

#partners-slider-container .partners-slider-btn.next,
.activity-slider-container .slider-next {
  right: -20px;
}

/* Ajustement pour le slider dans le popup Leaflet */
.leaflet-popup-content .activity-slider-container {
  padding: 0;
  margin: -12px;
  /* Pour contrer le padding du .leaflet-popup-content */
}

.leaflet-popup-content .activity-slide {
  padding: 12px !important;
  /* Rétablir le padding interne */
}

.leaflet-popup-content .activity-slider-container .slider-prev {
  left: 4px;
}

.leaflet-popup-content .activity-slider-container .slider-next {
  right: 4px;
}

.leaflet-popup-content .activity-slide a:hover {
  text-decoration: none;
  /* Empêcher le soulignement qui peut être inesthétique ici */
}

.leaflet-popup-content .activity-slide-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/**
 * OpenFit Credits — page packs
 */

.ofc-panel {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.ofc-muted {
  color: #64748b;
  font-size: 0.9rem;
}

/* Balance */
.ofc-balance {
  margin-bottom: 2rem;
}

.ofc-balance__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ofc-balance__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  color: #0f172a;
}

.ofc-balance__main {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ofc-balance__value {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: #b85035;
}

.ofc-balance__label {
  font-size: 0.95rem;
  color: #64748b;
}

.ofc-balance__expire {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #334155;
}

.ofc-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ofc-badge--active {
  background: #dcfce7;
  color: #166534;
}

.ofc-badge--expired {
  background: #fee2e2;
  color: #991b1b;
}

.ofc-alert {
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
}

.ofc-alert--warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}

.ofc-progress {
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin: 0.5rem 0;
}

.ofc-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, #b85035, #d97757);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.ofc-progress__hint {
  margin: 0;
  font-size: 0.8rem;
  color: #94a3b8;
}

/* Grid packs */
.ofc-packs-section {
  margin-top: 0.5rem;
}

.ofc-packs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .ofc-packs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ofc-packs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Pack card */
.ofc-pack-card {
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ofc-pack-card:hover {
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1);
}

.ofc-pack-card.is-current {
  border-color: #b85035;
  box-shadow: 0 0 0 2px rgba(184, 80, 53, 0.2);
}

.ofc-pack-card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  background: #fef3c7;
  color: #92400e;
  border-radius: 6px;
}

.ofc-pack-card__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
  margin: 0 0 1rem;
  color: #0f172a;
  padding-right: 4rem;
}

.ofc-pack-card__price {
  margin-bottom: 0.75rem;
}

.ofc-pack-card__amount {
  font-size: 2rem;
  font-weight: 700;
  color: #b85035;
}

.ofc-pack-card__currency {
  font-size: 0.9rem;
  color: #64748b;
  margin-left: 0.25rem;
}

.ofc-pack-card__credits {
  margin-bottom: 1rem;
}

.ofc-pack-card__credits-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0f172a;
}

.ofc-pack-card__credits-label {
  display: block;
  font-size: 0.85rem;
  color: #64748b;
}

.ofc-pack-card__desc,
.ofc-pack-card__excerpt {
  flex: 1;
  font-size: 0.9rem;
  color: #475569;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

/* Buttons */
.ofc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.ofc-btn--primary {
  background: #b85035;
  color: #fff;
}

.ofc-btn--primary:hover:not(:disabled) {
  background: #9a4229;
}

.ofc-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ofc-btn.is-loading .ofc-btn__label {
  opacity: 0;
}

.ofc-btn.is-loading .ofc-btn__loader {
  display: block;
}

.ofc-btn__loader {
  display: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ofc-spin 0.7s linear infinite;
  position: absolute;
}

@keyframes ofc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Toast */
.ofc-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 9999;
  max-width: 90vw;
  width: 22rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}

.ofc-toast.is-visible,
.ofc-toast:not([hidden]) {
  transform: translateX(-50%) translateY(0);
}

.ofc-toast--success {
  background: #166534;
}

.ofc-toast--error {
  background: #991b1b;
}

.ofc-toast__message {
  margin: 0;
  font-weight: 600;
}

.ofc-toast__detail {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

.ofc-empty {
  grid-column: 1 / -1;
  text-align: center;
}

.ofc-page-packs {
  max-width: 72rem;
  margin: 0 auto;
  padding: 5.5rem 1rem 3rem;
}

.ofc-page-packs__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.75rem;
  margin: 0 0 0.35rem;
  color: #0f172a;
}

.ofc-page-packs__subtitle {
  margin: 0 0 2rem;
  color: #64748b;
}

/* ==========================================================================
   Paiement par virement bancaire — Modal & formulaire
   ========================================================================== */

/* Overlay */
.ofc-bt-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: ofc-fade-in .18s ease;
}

.ofc-bt-overlay[hidden] {
  display: none;
}

@keyframes ofc-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Modal */
.ofc-bt-modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
  animation: ofc-slide-up .22s ease;
}

@keyframes ofc-slide-up {
  from {
    transform: translateY(12px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.ofc-bt-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: .25rem;
  border-radius: .375rem;
  display: flex;
  align-items: center;
  transition: color .15s, background .15s;
}

.ofc-bt-modal__close:hover {
  color: #111827;
  background: #f3f4f6;
}

.ofc-bt-modal__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  padding-right: 2rem;
  color: #111827;
}

/* Intro */
.ofc-bt-intro {
  font-size: .9375rem;
  color: #374151;
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

/* Tableau coordonnées bancaires */
.ofc-bt-bank-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem 1rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: .625rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: .9375rem;
}

.ofc-bt-bank-info dt {
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
}

.ofc-bt-bank-info dd {
  margin: 0;
  color: #111827;
  word-break: break-all;
}

.ofc-bt-iban {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.ofc-bt-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .8125rem;
  color: #6366f1;
  background: none;
  border: 1px solid #c7d2fe;
  border-radius: .375rem;
  padding: .125rem .5rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.ofc-bt-copy-btn:hover {
  background: #eef2ff;
}

.ofc-bt-copy-btn.is-copied {
  color: #16a34a;
  border-color: #bbf7d0;
}

.ofc-bt-amount strong {
  font-size: 1.125rem;
  color: #1d4ed8;
}

/* Instructions */
.ofc-bt-instructions {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: .5rem;
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: .875rem;
  color: #92400e;
  line-height: 1.6;
}

/* Étapes */
.ofc-bt-step[hidden] {
  display: none;
}

/* Actions (boutons côte à côte) */
.ofc-bt-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-top: 1.25rem;
}

/* Champ de saisie */
.ofc-field {
  margin-bottom: 1.25rem;
}

.ofc-label {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: .375rem;
}

.ofc-optional {
  font-weight: 400;
  color: #9ca3af;
  font-size: .875rem;
}

.ofc-input {
  width: 100%;
  padding: .625rem .875rem;
  border: 1.5px solid #d1d5db;
  border-radius: .5rem;
  font-size: .9375rem;
  color: #111827;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}

.ofc-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.ofc-field-hint {
  font-size: .8125rem;
  color: #6b7280;
  margin: .375rem 0 0;
}

/* Notice d'information */
.ofc-bt-notice {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-size: .8125rem;
  color: #6b7280;
  margin-top: 1rem;
  line-height: 1.6;
}

.ofc-bt-notice svg {
  flex-shrink: 0;
  margin-top: .125rem;
}

/* Étape succès */
.ofc-bt-step--success {
  text-align: center;
  padding: 1rem 0;
}

.ofc-bt-success-icon {
  margin-bottom: 1rem;
  color: #16a34a;
}

.ofc-bt-step--success h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 .75rem;
}

.ofc-bt-step--success p {
  font-size: .9375rem;
  color: #6b7280;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* Bouton "Payer par virement" sur la carte pack */
.ofc-btn--virement {
  margin-top: .5rem;
  width: 100%;
  justify-content: center;
  border: 1.5px solid #d1d5db;
  color: #374151;
  background: #fff;
}

.ofc-btn--virement:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* Contact Form 7 : aligne la bordure générique sur la charte (le bleu CF7 par
   défaut #00a0d2 jurait avec le terracotta). Succès/erreur restent sémantiques. */
.wpcf7-response-output {
  border-color: var(--primary) !important;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--danger) !important;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--success) !important;
}

/* Menu profil (avatar) : items BLANCS, gris uniquement au survol. La règle globale
   `[class*="bg-gray-100"]{background:#F2F3F2!important}` capturait à tort la classe
   Tailwind `hover:bg-gray-100` et grisait les items en permanence. Sélecteur ID = priorité. */
#profile-menu a, #partner-profile-menu a {
  background: #fff !important;
}
#profile-menu a:hover, #partner-profile-menu a:hover {
  background: #f3f4f6 !important;
}

/* Boutons de connexion sociale (Nextend) : alignés sur la FORME de la page
   (pleine largeur, arrondis 12px, hauteur 48px, empilés) — on garde les COULEURS
   de marque des providers (Google blanc, Facebook bleu) pour la reconnaissance. */
.ofa-social-login .nsl-container { margin: 0 !important; }
.ofa-social-login .nsl-container-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.ofa-social-login .nsl-button {
  width: 100% !important;
  height: 48px !important;
  border-radius: 12px !important;
  font: inherit !important;
  font-weight: 600 !important;
}
.ofa-social-login .nsl-button:focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}