/* =============================================================================
   obs-dedicace.css — Carte modale dédicace OBS Studio
   -----------------------------------------------------------------------------
   Styles centralisés pour la carte modale qui s'ouvre au clic sur le logo OBS
   dans le header. Même concept visuel que les cartes du site (fond sombre,
   bordure cyan, glow). Auto-contenu : peut être chargé sur n'importe quelle
   page qui souhaite afficher la dédicace OBS.
   ============================================================================= */

/* --- Overlay (fond sombre plein écran) --- */
.landing-obs-carte-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.landing-obs-carte-overlay.actif {
  display: flex;
}

/* --- Carte --- */
.landing-obs-carte {
  --obs-couleur: #67e8f9;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 28px 26px 24px;
  background: linear-gradient(180deg, rgba(10, 14, 26, 0.95), rgba(5, 8, 16, 0.95));
  border: 1px solid rgba(103, 232, 249, 0.25);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 32px rgba(103, 232, 249, 0.1);
  box-sizing: border-box;
  gap: 12px;
}

/* --- Bouton fermer --- */
.landing-obs-carte-fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-rapide);
}
.landing-obs-carte-fermer:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fff;
}

/* --- Icône (logo OBS) --- */
.landing-obs-carte-icone {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.landing-obs-carte-icone img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(103, 232, 249, 0.5));
}

/* --- Titre + sous-titre --- */
.landing-obs-carte-titre {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  color: #fff;
  letter-spacing: 0.02em;
  text-align: center;
}
.landing-obs-carte-soustitre {
  font-size: 12px;
  color: rgba(103, 232, 249, 0.8);
  margin: 0;
  text-align: center;
  font-weight: 600;
}

/* --- Corps (texte + sections) --- */
.landing-obs-carte-corps {
  width: 100%;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}
.landing-obs-carte-corps p {
  margin: 0 0 10px;
}
.landing-obs-carte-section {
  margin-top: 14px;
}
.landing-obs-carte-section h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--obs-couleur);
  margin: 0 0 8px;
}
.landing-obs-carte-section ul {
  margin: 0;
  padding-left: 18px;
  list-style: none;
}
.landing-obs-carte-section li {
  position: relative;
  margin-bottom: 6px;
  padding-left: 4px;
}
.landing-obs-carte-section li::before {
  content: '▸';
  position: absolute;
  left: -14px;
  color: var(--obs-couleur);
  opacity: 0.7;
}

/* --- Encadré dédicace --- */
.landing-obs-carte-dedicace {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(103, 232, 249, 0.06);
  border: 1px solid rgba(103, 232, 249, 0.15);
  border-radius: 8px;
  font-size: 12.5px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 1.6;
}

/* --- Lien vers le site officiel --- */
.landing-obs-carte-lien {
  margin-top: 8px;
  width: 100%;
}

/* --- Lien contributeurs GitHub --- */
.landing-obs-carte-contrib-lien {
  display: inline-block;
  color: rgba(103, 232, 249, 0.85);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}
.landing-obs-carte-contrib-lien:hover {
  text-decoration: underline;
}

/* --- Responsive --- */
@media (max-width: 560px) {
  .landing-obs-carte { padding: 22px 18px 20px; }
  .landing-obs-carte-titre { font-size: 19px; }
}