/* ==========================================================================
   THEME PREMIUM — Identité Alifon (rouge signature du logo)
   Chargé après bootstrap.min.css et styles.css : ces règles ont la priorité.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --bs-font-sans-serif: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Palette premium — rouge Alifon (#db1400), disponible dans les deux modes */
  --pro-accent: #DB1400;
  --pro-accent-2: #FF6B52;
  --pro-accent-soft: rgba(219, 20, 0, 0.14);
  --pro-gradient: linear-gradient(135deg, #DB1400 0%, #A30F00 60%, #6B0A00 100%);
  --pro-radius: 14px;
  --pro-radius-sm: 10px;

  --bs-primary: var(--pro-accent);
  --bs-primary-rgb: 219, 20, 0;
  --color-default: var(--pro-accent) !important;
}

[data-bs-theme=dark] {
  /* Palette de surfaces — uniquement en mode sombre */
  --pro-bg: #0B0E14;
  --pro-bg-elevated: #12151D;
  --pro-surface: #171B26;
  --pro-surface-hover: #1E2330;
  --pro-border: #262B3A;
  --pro-text: #E7E9EE;
  --pro-text-muted: #8A8FA3;
  --pro-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --pro-shadow-soft: 0 4px 16px -6px rgba(0, 0, 0, 0.4);

  --bs-body-bg: var(--pro-bg);
  --bs-body-color: var(--pro-text);
  --bs-border-color: var(--pro-border);
  --bs-secondary-color: var(--pro-text-muted);
  --bs-link-color: var(--pro-accent-2);
  --bs-link-hover-color: #FF8A75;
}

[data-bs-theme=dark] body {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(219, 20, 0, 0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(107, 10, 0, 0.12), transparent 55%),
    var(--pro-bg);
  letter-spacing: 0.1px;
}

[data-bs-theme=dark] h1, [data-bs-theme=dark] h2, [data-bs-theme=dark] h3,
[data-bs-theme=dark] h4, [data-bs-theme=dark] h5, [data-bs-theme=dark] h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------- Navbar ---------- */
[data-bs-theme=dark] .navbar,
[data-bs-theme=dark] header nav,
[data-bs-theme=dark] #header {
  background: rgba(11, 14, 20, 0.72) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--pro-border);
}

/* ---------- Cards / panels / tiles ---------- */
[data-bs-theme=dark] .card,
[data-bs-theme=dark] .bg-white,
[data-bs-theme=dark] .box,
[data-bs-theme=dark] .panel,
[data-bs-theme=dark] .dropdown-menu,
[data-bs-theme=dark] .modal-content {
  background-color: var(--pro-surface) !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow-soft);
}

[data-bs-theme=dark] .card:hover,
[data-bs-theme=dark] .figure-item:hover,
[data-bs-theme=dark] .item-photo:hover {
  border-color: rgba(219, 20, 0, 0.45) !important;
  box-shadow: var(--pro-shadow);
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--pro-radius-sm) !important;
  font-weight: 600;
  letter-spacing: 0.1px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-custom, .btn-primary, .btn-main {
  background: var(--pro-gradient) !important;
  border: none !important;
  box-shadow: 0 8px 20px -8px rgba(219, 20, 0, 0.55);
  color: #fff !important;
}
.btn-custom:hover, .btn-primary:hover, .btn-main:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(219, 20, 0, 0.65);
}
[data-bs-theme=dark] .btn-white,
[data-bs-theme=dark] .btn-outline-secondary {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-border) !important;
  color: var(--pro-text) !important;
}
[data-bs-theme=dark] .btn-white:hover,
[data-bs-theme=dark] .btn-outline-secondary:hover {
  background: var(--pro-surface-hover) !important;
}

/* ---------- Forms ---------- */
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select,
[data-bs-theme=dark] textarea {
  background-color: var(--pro-bg-elevated) !important;
  border: 1px solid var(--pro-border) !important;
  color: var(--pro-text) !important;
  border-radius: var(--pro-radius-sm) !important;
}
[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
  border-color: var(--pro-accent) !important;
  box-shadow: 0 0 0 3px var(--pro-accent-soft) !important;
}
[data-bs-theme=dark] .form-control::placeholder {
  color: var(--pro-text-muted);
}
/* Bootstrap masque le placeholder natif dans les form-floating pour éviter
   qu'il se superpose au label flottant — on doit préserver ce comportement */
.form-floating > .form-control::placeholder,
.form-floating > .form-select::placeholder {
  color: transparent !important;
}
[data-bs-theme=dark] .form-floating > label {
  color: var(--pro-text-muted);
}
[data-bs-theme=dark] .form-floating > .form-control:focus ~ label,
[data-bs-theme=dark] .form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-bs-theme=dark] .form-floating > .form-select ~ label {
  background: var(--pro-bg-elevated);
  padding: 0 6px;
  border-radius: 4px;
  color: var(--pro-accent-2);
}
.form-floating > .form-select {
  padding-top: 1.625rem !important;
  padding-bottom: 0.625rem !important;
  line-height: 1.25 !important;
  height: calc(3.5rem + 2px) !important;
}

/* ---------- Badges / tags ---------- */
[data-bs-theme=dark] .badge,
[data-bs-theme=dark] .btn-tags {
  background: var(--pro-accent-soft) !important;
  color: var(--pro-accent-2) !important;
  border: 1px solid rgba(219, 20, 0, 0.3);
  border-radius: 999px !important;
  font-weight: 600;
}

/* ---------- Photo / vector grid tiles ---------- */
[data-bs-theme=dark] .item-photo,
[data-bs-theme=dark] .figure-item,
[data-bs-theme=dark] .gallery-item {
  border-radius: var(--pro-radius) !important;
  overflow: hidden;
  border: 1px solid var(--pro-border);
}

/* ---------- Scrollbar (Webkit) ---------- */
[data-bs-theme=dark] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-bs-theme=dark] ::-webkit-scrollbar-track { background: var(--pro-bg); }
[data-bs-theme=dark] ::-webkit-scrollbar-thumb {
  background: var(--pro-border);
  border-radius: 999px;
}
[data-bs-theme=dark] ::-webkit-scrollbar-thumb:hover { background: var(--pro-accent); }

/* ---------- Footer ---------- */
[data-bs-theme=dark] footer {
  background: var(--pro-bg-elevated) !important;
  border-top: 1px solid var(--pro-border);
}

/* ---------- Cookie banner ---------- */
[data-bs-theme=dark] #cookie-consent-banner {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-radius) !important;
  color: var(--pro-text) !important;
  box-shadow: var(--pro-shadow);
}

/* ---------- Bloc statistiques (Membres/Téléchargements/Photos) — mobile ---------- */
@media (max-width: 767.98px) {
  .counter-stats {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* ---------- Cartes de la grille de fichiers : bordure pour se détacher du fond ---------- */
.flex-images .item.hovercard {
  border: 1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  overflow: hidden;
}

/* ---------- Fiche produit : cadre autour de l'image, titre, description ---------- */
.product-image-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  padding: 32px 16px;
}

.product-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #071C1F;
  margin-top: 20px;
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #ececec;
}

.product-description {
  color: #6b6b6b;
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: none;
  margin-top: 0;
  padding-bottom: 0;
}

/* ---------- Titre déplacé dans la colonne de droite, façon fiche boutique ---------- */
.product-title-sidebar {
  font-weight: 400;
  color: #071C1F;
  margin-bottom: 20px;
  padding-bottom: 0;
  border-bottom: none;
}

/* ---------- Séparateurs élégants entre les sections (Description, Fichiers similaires) ---------- */
.product-divider {
  border: none;
  border-top: 2px solid #b8b8b8;
  margin: 28px 0 22px;
}

.product-section-title {
  font-weight: 700 !important;
  font-size: 1.1rem;
  color: #071C1F;
  margin-bottom: 14px !important;
}

/* ---------- Fichiers similaires : une seule ligne, pleine largeur ---------- */
.product-similar-grid {
  display: flex !important;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 12px;
}
.product-similar-grid .item.hovercard {
  flex: 1 1 0;
  min-width: 0;
}

/* ---------- Forcer Poppins partout : le CSS d'origine impose 'Barlow' en dur
   directement sur body, ce qui écrase la simple variable --bs-font-sans-serif ---------- */
body, h1, h2, h3, h4, h5, h6, .btn, input, textarea, select {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ---------- Espacements mobile de la fiche produit ---------- */
@media (max-width: 767.98px) {
  .product-title-sidebar {
    margin-top: 8px;
    margin-bottom: 24px;
  }
}