/* ============================================================
   CLIMAX DESIGN — COMPONENTS
   ------------------------------------------------------------
   Composants visuels reutilisables, partages entre projets.

   Convention de nommage : prefixe .c- pour eviter les collisions
   avec les classes locales d'un projet (qui peuvent etre n'importe
   quoi). Si tu vois .c-quelque-chose, c'est de la DA partagee.
   ============================================================ */

/* --- Panneau translucide -----------------------------------
   Fond blanc semi-opaque avec flou d'arriere-plan.
   Reprise visuelle de la fenetre de contenu du site studio. */
.c-panel {
  background: var(--panneau-blanc);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  color: var(--texte-noir);
}

/* Variante plus claire / moins floue */
.c-panel--light {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* --- Drag handle (poignee arrondie) ------------------------
   Rectangle 38x24 px, border-radius 6 px, indique une zone draggable.
   Reference dans le CLAUDE.md du site, repris ici pour coherence. */
.c-drag-handle {
  width: 38px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: grab;
}

.c-drag-handle:active {
  cursor: grabbing;
  background: rgba(255, 255, 255, 0.7);
}

/* --- Bouton sobre (texte capitales espacees) --------------- */
.c-btn {
  display: inline-block;
  padding: 14px 28px;
  background: transparent;
  border: 1px solid var(--texte-noir);
  color: var(--texte-noir);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.c-btn:hover {
  background: var(--texte-noir);
  color: #fff;
}

/* Variante sur fond noir */
.c-btn--light {
  border-color: rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.9);
}

.c-btn--light:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--bg-noir);
}

/* --- Attribution Climax (pied de page sobre) ---------------
   Mention "Offert par Climax Mastering" reproductible partout. */
.c-attribution {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.c-attribution a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.25s ease;
}

.c-attribution a:hover {
  color: rgba(255, 255, 255, 0.9);
}