/* tokens.css */
/* Design tokens : couleurs, typo, espaces, radius, ombres, etc. */

:root {
  /* Couleurs */
  --color-bg: #050505;
  --color-bg-alt: #101010;
  --color-text: #f5f5f5;
  --color-muted: #b3b3b3;
  --color-accent: #dd9933;
  --color-accent-soft: #ffae3f;
  --color-border: #333;

  /* Typo */
  --font-body: "Raleway", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-title: "Bebas Neue", system-ui, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* Espaces */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius & ombres */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.45);

  /* Animations */
  --speed-fast: 150ms;
  --speed-normal: 280ms;
  --ease-snap: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
:root {
  --pk-primary: #dd9933;     /* action standard */
  --pk-special: #0b4f58;     /* CTA événementiel */
  --pk-special-hover: #11707c;
}
.btn-special {
  background: var(--pk-special);
  color: #fff;
  letter-spacing: .02em; /* WHY: sensation premium */
}
.btn-special:hover {
  background: var(--pk-special-hover);
}
@media (max-width: 768px) {
  .btn-special {
    font-size: 14px;
    padding: 12px 18px;
    border-radius: 6px;
  }

  .btn-special + .btn-primary {
    margin-top: 14px; /* respiration */
  }
}

.btn-special{
  background:#0b4f58;
  color:#fff;
  font-size:15px;
  padding:12px 18px;
  border-radius:6px;
  letter-spacing:.02em;

  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  line-height:1;
}

.btn-special__icon{
  width:18px;
  height:18px;
  fill:currentColor;
  opacity:.95;
  transform: translateX(0);
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}

.btn-special:hover{ background:#11707c; }
.btn-special:hover .btn-special__icon{
  transform: translateX(2px);
  opacity:1;
}

/* Mobile */
@media (max-width:768px){
  .btn-special{ font-size:14px; padding:12px 16px; }
  .btn-special__icon{ width:17px; height:17px; }
}

.btn-special-split {
    display: inline-flex;
    align-items: center;
    background:#0b4f58;
    color: #fff;
    font-family: 'Raleway', system-ui;
    margin-bottom: 24px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
    font-size: 15px;
}

.btn-special-split__text{
  padding:12px 20px;
}

.btn-special-split__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  border-left:1px solid rgba(0,0,0,.18);
}

.btn-special-split__icon svg{
  width:24px;
  height:28px;
  fill:rgba(255,255,255,.35);
}

/* Hover subtil */
.btn-special-split:hover{
  background:#11707c;
}
.btn-special-split:hover .btn-special-split__icon svg{
  fill:rgba(255,255,255,.55);
}

/* Mobile */
@media (max-width:768px){
  .btn-special-split{
    font-size:14px;
  }
  .btn-special-split__icon{
    width:46px;
  }
}