/*
 * Dorana Diffusion - apolo/index.css
 * Styles spécifiques au hub Apolo (apolo/index.html).
 */

/* ============================================================
   APOLO HUB — HERO
   ============================================================ */

.apolo-hero {
  min-height:     calc(100svh - 74px);
  padding:        clamp(64px, 8vw, 110px) 0;
  display:        flex;
  align-items:    center;
  background:
    radial-gradient(60% 55% at 88% 8%,  rgba(196, 147, 90, .28) 0%, transparent 55%),
    radial-gradient(45% 50% at  5% 85%, rgba(122, 58, 118, .15)  0%, transparent 55%),
    linear-gradient(165deg, #1A1208 0%, #0E0A08 60%, #14101A 100%);
  color:          var(--cream);
  position:       relative;
  overflow:       hidden;
}

.apolo-hero::before {
  content:          "";
  position:         absolute;
  inset:            0;
  pointer-events:   none;
  background-image: repeating-linear-gradient(to right, transparent 0 calc(100%/12 - 1px), rgba(255, 255, 255, .025) calc(100%/12 - 1px) calc(100%/12));
  mask-image:       linear-gradient(to bottom, transparent 0%, black 15%, black 80%, transparent 100%);
}

.apolo-hero__inner {
  display:               grid;
  grid-template-columns: 1.1fr 1fr;
  gap:                   clamp(48px, 6vw, 96px);
  align-items:           center;
}

@media (max-width: 900px) { .apolo-hero__inner { grid-template-columns: 1fr; } }

.apolo-hero__tag {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  background:     rgba(196, 147, 90, .12);
  border:         1px solid rgba(196, 147, 90, .25);
  border-radius:  999px;
  padding:        8px 18px;
  font-size:      12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight:    600;
  color:          var(--apolo-300);
}

.apolo-hero__tag::before {
  content:       "";
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--apolo-500);
}

.apolo-hero__brand {
  font-family:    var(--f-display);
  font-size:      clamp(72px, 10vw, 140px);
  font-weight:    500;
  line-height:    .9;
  letter-spacing: -.03em;
  color:          var(--cream);
  margin-top:     28px;
}

.apolo-hero__brand em {
  display:        block;
  font-style:     italic;
  color:          var(--apolo-300);
  font-size:      .45em;
  letter-spacing: .02em;
  margin-top:     10px;
  line-height:    1.3;
}

.apolo-hero__desc {
  font-size:   clamp(15px, 1.2vw, 18px);
  color:       rgba(250, 246, 241, .75);
  max-width:   50ch;
  line-height: 1.7;
  margin-top:  28px;
}

.apolo-hero__actions {
  display:   flex;
  gap:       14px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.apolo-hero__badge-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;
}

.apolo-stat-card {
  background:      rgba(255, 255, 255, .04);
  border:          1px solid rgba(255, 255, 255, .1);
  border-radius:   8px;
  padding:         24px;
  backdrop-filter: blur(8px);
  transition:      background .3s, border-color .3s, transform .3s var(--ease-out);
}

.apolo-stat-card:hover {
  background:   rgba(196, 147, 90, .08);
  border-color: rgba(196, 147, 90, .25);
  transform:    translateY(-2px);
}

.apolo-stat-card b {
  display:     block;
  font-family: var(--f-display);
  font-size:   clamp(30px, 3.5vw, 44px);
  font-weight: 500;
  color:       var(--cream);
  line-height: 1;
}

.apolo-stat-card span {
  display:        block;
  font-size:      11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          rgba(250, 246, 241, .5);
  margin-top:     8px;
}

.apolo-partner-badge {
  grid-column:  span 2;
  background:   rgba(196, 147, 90, .08);
  border:       1px solid rgba(196, 147, 90, .2);
  border-radius: 8px;
  padding:      20px 24px;
  display:      flex;
  align-items:  center;
  gap:          16px;
}

.apolo-partner-badge__icon {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      linear-gradient(135deg, var(--apolo-700), var(--apolo-900));
  border:          1px solid rgba(196, 147, 90, .3);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--f-display);
  font-style:      italic;
  font-size:       18px;
  color:           var(--apolo-300);
  flex-shrink:     0;
}

.apolo-partner-badge strong {
  color:          var(--apolo-300);
  font-size:      11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  display:        block;
  margin-bottom:  4px;
}

.apolo-partner-badge p { font-size: 13px; color: rgba(250, 246, 241, .65); line-height: 1.4; }


/* ============================================================
   APOLO HUB — BRAND STORY
   ============================================================ */

.apolo-brand-section {
  background:
    radial-gradient(50% 60% at 100% 50%, rgba(196, 147, 90, .1) 0%, transparent 55%),
    var(--cream);
}

.apolo-brand-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(48px, 6vw, 96px);
  align-items:           center;
}

@media (max-width: 900px) { .apolo-brand-grid { grid-template-columns: 1fr; } }

.apolo-brand-visual {
  aspect-ratio:  4/3;
  border-radius: 8px;
  background:    linear-gradient(135deg, var(--apolo-100), #EDE3D5);
  position:      relative;
  overflow:      hidden;
  transition:    box-shadow .4s ease;
}

.apolo-brand-visual:hover { box-shadow: 0 24px 60px -24px rgba(196, 147, 90, .35); }

.apolo-brand-visual__deco {
  position:         absolute;
  inset:            0;
  background-image: repeating-linear-gradient(135deg, rgba(196, 147, 90, .06) 0 2px, transparent 2px 16px);
}

.apolo-brand-visual__mark {
  position: absolute;
  inset:    0;
  pointer-events: none;
}

.apolo-brand-visual__mark img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  display:         block;
}

.apolo-brand-content .eyebrow         { color: var(--apolo-700); }
.apolo-brand-content .eyebrow::before { background: var(--apolo-700); }
.apolo-brand-content h2               { margin-top: 18px; max-width: 22ch; }
.apolo-brand-content h2 em            { color: var(--apolo-700); }

.apolo-brand-content > p {
  margin-top:  20px;
  color:       var(--ink-2);
  font-size:   16px;
  max-width:   50ch;
  line-height: 1.7;
}

.apolo-brand-points {
  list-style: none;
  padding:    0;
  margin:     28px 0 0;
  display:    grid;
  gap:        12px;
}

.apolo-brand-points li {
  display:     flex;
  gap:         14px;
  align-items: flex-start;
  font-size:   14px;
  color:       var(--ink-2);
  line-height: 1.55;
}

.apolo-brand-points__check {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  min-width:       22px;
  border-radius:   50%;
  background:      rgba(196, 147, 90, .15);
  color:           var(--apolo-500);
  flex-shrink:     0;
  margin-top:      1px;
}


/* ============================================================
   APOLO HUB — 5 CATEGORIES GRID
   ============================================================ */

.apolo-categories-section {
  background:
    radial-gradient(50% 55% at 10% 50%, rgba(196, 147, 90, .08) 0%, transparent 55%),
    var(--cream-2);
}

.apolo-hub-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
}

@media (max-width: 1100px) { .apolo-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  580px) { .apolo-hub-grid { grid-template-columns: 1fr; } }

.apolo-hub-card {
  background:     var(--cream);
  border:         1px solid var(--line);
  border-radius:  8px;
  padding:        clamp(28px, 3vw, 44px);
  display:        flex;
  flex-direction: column;
  gap:            16px;
  position:       relative;
  overflow:       hidden;
  transition:     border-color .3s, box-shadow .3s, transform .3s var(--ease-out);
}

.apolo-hub-card::before {
  content:          "";
  position:         absolute;
  top:              0;
  left:             0;
  right:            0;
  height:           3px;
  background:       linear-gradient(90deg, var(--apolo-700), var(--apolo-500));
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform .35s var(--ease-out);
}

.apolo-hub-card:hover {
  border-color: rgba(196, 147, 90, .3);
  box-shadow:   0 16px 48px -20px rgba(122, 84, 48, .2);
  transform:    translateY(-4px);
}

.apolo-hub-card:hover::before { transform: scaleX(1); }

.apolo-hub-card__num {
  font-family:    var(--f-display);
  font-style:     italic;
  font-size:      52px;
  color:          var(--apolo-300);
  line-height:    1;
  font-weight:    500;
  letter-spacing: -.02em;
}

.apolo-hub-card h3 {
  font-size:   clamp(18px, 1.6vw, 22px);
  line-height: 1.2;
  margin:      0;
  color:       var(--ink);
}

.apolo-hub-card p {
  font-size:   14px;
  color:       var(--muted);
  line-height: 1.6;
  flex:        1;
  margin:      0;
}

.apolo-hub-card__tags {
  display:  flex;
  gap:      8px;
  flex-wrap: wrap;
}

.apolo-hub-card__tag {
  font-size:      11px;
  letter-spacing: .06em;
  padding:        4px 10px;
  border-radius:  999px;
  background:     rgba(196, 147, 90, .1);
  color:          var(--apolo-700);
  font-weight:    500;
}

.apolo-hub-card__cta {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   13px;
  font-weight: 600;
  color:       var(--apolo-700);
  margin-top:  8px;
  transition:  gap .25s var(--ease-out), color .2s;
}

.apolo-hub-card:hover .apolo-hub-card__cta { gap: 14px; color: var(--apolo-500); }

.apolo-hub-card__cta svg { transition: transform .25s var(--ease-out); flex-shrink: 0; }
.apolo-hub-card:hover .apolo-hub-card__cta svg { transform: translateX(4px); }