/*
 * Dorana Diffusion - css/apolo.css
 * Styles partagés entre apolo.html et toutes les sous-pages Apolo.
 */

/* ============================================================
   APOLO — TOKENS
   ============================================================ */

:root {
  --apolo-900: #1A1208;
  --apolo-700: #7A5430;
  --apolo-500: #C4935A;
  --apolo-300: #E5C89A;
  --apolo-100: #F8F0E3;
}

[data-delay="80"]  { transition-delay: .08s; }
[data-delay="160"] { transition-delay: .16s; }
[data-delay="240"] { transition-delay: .24s; }
[data-delay="320"] { transition-delay: .32s; }



/* ============================================================
   GLOBAL OVERRIDES - palette Apolo (bronze/or)
   ============================================================ */

.eyebrow             { color: var(--apolo-500); }
.eyebrow::before     { background: var(--apolo-500); }
.italic              { color: var(--apolo-300); }


/* ============================================================
   NAV ACTIVE STATE (APOLO pages)
   ============================================================ */

.nav-links a.nav-active                 { color: var(--apolo-500); }
.nav-links a.nav-active::after          { width: 100%; background: var(--apolo-500); }


/* ============================================================
   APOLO BUTTONS
   ============================================================ */

.btn-apolo {
  background:  linear-gradient(135deg, var(--apolo-700) 0%, var(--apolo-500) 100%);
  color:       #fff;
  box-shadow:  0 12px 40px -12px rgba(196, 147, 90, .5);
}

.btn-apolo:hover {
  background:  linear-gradient(135deg, var(--apolo-900) 0%, var(--apolo-700) 100%);
  box-shadow:  0 16px 48px -12px rgba(196, 147, 90, .65);
  transform:   translateY(-2px);
}

.btn-apolo .arrow { background: rgba(255, 255, 255, .22); color: #fff; }

.btn-ghost-apolo {
  background:   transparent;
  color:        rgba(250, 246, 241, .85);
  border:       1px solid rgba(196, 147, 90, .35);
}

.btn-ghost-apolo:hover {
  background:   rgba(196, 147, 90, .08);
  border-color: rgba(196, 147, 90, .55);
}

.btn-ghost-apolo .arrow { background: rgba(196, 147, 90, .2); color: var(--apolo-300); }



/* ============================================================
   APOLO SUBCATEGORY — BREADCRUMB
   ============================================================ */

.apolo-breadcrumb-wrap {
  background:    var(--cream);
  border-bottom: 1px solid var(--line);
  padding:       14px 0;
  position:      relative;
  z-index:       2;
}

.apolo-breadcrumb {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   13px;
  color:       var(--muted);
}

.apolo-breadcrumb a { color: var(--muted); transition: color .2s; }
.apolo-breadcrumb a:hover { color: var(--apolo-700); }
.apolo-breadcrumb__sep { color: var(--line-strong); }
.apolo-breadcrumb__current { color: var(--apolo-700); font-weight: 500; }


/* ============================================================
   APOLO SUBCATEGORY — HERO
   ============================================================ */

.apolo-sub-hero {
  padding:  clamp(64px, 8vw, 100px) 0;
  background:
    radial-gradient(55% 55% at 90% 10%, rgba(196, 147, 90, .22) 0%, transparent 55%),
    radial-gradient(45% 50% at  5% 85%, rgba(122, 58, 118, .12)  0%, transparent 55%),
    linear-gradient(160deg, #1C1208 0%, #0E0A08 60%, #14101A 100%);
  color:    var(--cream);
  position: relative;
  overflow: hidden;
}

.apolo-sub-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-sub-hero__inner {
  display:               grid;
  grid-template-columns: 1.2fr 1fr;
  gap:                   clamp(48px, 6vw, 80px);
  align-items:           center;
  position:              relative;
  z-index:               1;
}

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

.apolo-sub-hero__meta {
  display:       flex;
  align-items:   center;
  gap:           20px;
  flex-wrap:     wrap;
  margin-bottom: 32px;
}

.apolo-sub-hero__back {
  display:    flex;
  align-items: center;
  gap:         8px;
  font-size:   13px;
  color:       rgba(250, 246, 241, .6);
  transition:  color .2s, gap .25s var(--ease-out);
}

.apolo-sub-hero__back:hover       { color: var(--apolo-300); gap: 12px; }
.apolo-sub-hero__back svg         { transition: transform .25s var(--ease-out); }
.apolo-sub-hero__back:hover svg   { transform: translateX(-4px); }

.apolo-sub-hero__eyebrow {
  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:        6px 16px;
  font-size:      11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight:    600;
  color:          var(--apolo-300);
}

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

.apolo-sub-hero h1             { font-size: clamp(40px, 5.5vw, 80px); line-height: 1.02; color: var(--cream); }
.apolo-sub-hero h1 em          { color: var(--apolo-300); font-weight: 400; }

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

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

.apolo-sub-hero__visual {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}

.apolo-sub-stat {
  background:    rgba(255, 255, 255, .04);
  border:        1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding:       20px;
  transition:    background .25s, border-color .25s;
}

.apolo-sub-stat:hover {
  background:   rgba(196, 147, 90, .07);
  border-color: rgba(196, 147, 90, .2);
}

.apolo-sub-stat b {
  display:     block;
  font-family: var(--f-display);
  font-size:   clamp(26px, 3vw, 38px);
  font-weight: 500;
  color:       var(--cream);
  line-height: 1;
}

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


/* ============================================================
   APOLO SUBCATEGORY — PRODUCTS
   ============================================================ */

.apolo-products { background: var(--cream); }

.apolo-products .section-head h2 em { color: var(--apolo-700); }
.apolo-products .eyebrow             { color: var(--apolo-700); }
.apolo-products .eyebrow::before     { background: var(--apolo-700); }

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

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

.apolo-product-card {
  background:    var(--cream);
  border:        1px solid var(--line);
  border-radius: 8px;
  overflow:      hidden;
  transition:    box-shadow .3s, transform .3s var(--ease-out), border-color .3s;
}

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

.apolo-product-card__visual {
  aspect-ratio:    4/3;
  background:      linear-gradient(135deg, var(--apolo-100), #EDE3D5);
  position:        relative;
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

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

.apolo-product-card__visual-label {
  position:    relative;
  z-index:     1;
  font-family: var(--f-display);
  font-style:  italic;
  font-size:   clamp(16px, 2vw, 22px);
  color:       var(--apolo-700);
  text-align:  center;
  padding:     0 20px;
}

.apolo-product-card__tag {
  position:       absolute;
  top:            14px;
  right:          14px;
  background:     var(--apolo-500);
  color:          #fff;
  font-size:      10px;
  letter-spacing: .12em;
  font-weight:    700;
  padding:        4px 10px;
  border-radius:  999px;
  text-transform: uppercase;
  z-index:        2;
}

.apolo-product-card__body { padding: 24px; }

.apolo-product-card h3 {
  font-size:   16px;
  font-family: var(--f-sans);
  font-weight: 600;
  color:       var(--ink);
  margin:      0;
}

.apolo-product-card p {
  font-size:   13px;
  color:       var(--muted);
  margin-top:  8px;
  line-height: 1.55;
}

.apolo-product-card__meta {
  display:   flex;
  gap:       8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.apolo-product-card__meta span {
  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 SUBCATEGORY — FEATURES
   ============================================================ */

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

.apolo-features .eyebrow         { color: var(--apolo-700); }
.apolo-features .eyebrow::before { background: var(--apolo-700); }

.apolo-feature-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   20px;
  margin-top:            clamp(48px, 5vw, 72px);
}

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

.apolo-feature-item {
  background:    var(--cream);
  border:        1px solid var(--line);
  border-radius: 8px;
  padding:       clamp(24px, 2.5vw, 36px);
  display:       flex;
  gap:           20px;
  transition:    border-color .25s, box-shadow .25s, transform .25s var(--ease-out);
}

.apolo-feature-item:hover {
  border-color: rgba(196, 147, 90, .25);
  box-shadow:   0 8px 32px -12px rgba(122, 84, 48, .12);
  transform:    translateY(-2px);
}

.apolo-feature-item__icon {
  width:           44px;
  height:          44px;
  border-radius:   10px;
  background:      linear-gradient(135deg, var(--apolo-100), #F0E0C8);
  border:          1px solid rgba(196, 147, 90, .2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  color:           var(--apolo-700);
  font-size:       20px;
}

.apolo-feature-item h3 {
  font-size:   16px;
  font-family: var(--f-sans);
  font-weight: 600;
  color:       var(--ink);
  margin:      0 0 8px;
}

.apolo-feature-item p {
  font-size:   14px;
  color:       var(--ink-2);
  line-height: 1.6;
}


/* ============================================================
   APOLO — CTA SECTION (hub & sub-pages)
   ============================================================ */

.apolo-cta-section {
  background:
    radial-gradient(55% 55% at 5%  50%, rgba(196, 147, 90, .18) 0%, transparent 55%),
    radial-gradient(50% 60% at 95% 50%, rgba(122, 58, 118, .15)  0%, transparent 55%),
    linear-gradient(160deg, #1C1208 0%, #14101A 100%);
  color: var(--cream);
}

.apolo-cta-band {
  border:        1px solid rgba(196, 147, 90, .15);
  border-radius: 8px;
  padding:       clamp(48px, 6vw, 80px);
  position:      relative;
  overflow:      hidden;
}

.apolo-cta-band__mark {
  position:       absolute;
  right:          -3vw;
  bottom:         -10vw;
  font-family:    var(--f-display);
  font-style:     italic;
  font-size:      clamp(100px, 18vw, 260px);
  color:          rgba(196, 147, 90, .06);
  line-height:    .8;
  pointer-events: none;
  user-select:    none;
}

.apolo-cta-band__inner {
  display:               grid;
  grid-template-columns: 1.3fr 1fr;
  gap:                   48px;
  align-items:           center;
  position:              relative;
  z-index:               1;
}

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

.apolo-cta-band .eyebrow         { color: var(--apolo-300); }
.apolo-cta-band .eyebrow::before { background: var(--apolo-300); }

.apolo-cta-band h2        { color: var(--cream); max-width: 22ch; margin-top: 18px; }
.apolo-cta-band h2 em     { color: var(--apolo-300); font-weight: 400; }

.apolo-cta-band > div > p {
  color:       rgba(250, 246, 241, .75);
  font-size:   16px;
  max-width:   42ch;
  line-height: 1.7;
  margin-top:  18px;
}

.apolo-cta-band .actions {
  display:   flex;
  gap:       14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.apolo-contact-card {
  border:          1px solid rgba(196, 147, 90, .2);
  border-radius:   8px;
  padding:         28px;
  background:      rgba(196, 147, 90, .05);
  backdrop-filter: blur(8px);
}

.apolo-contact-card b {
  font-family: var(--f-display);
  font-style:  italic;
  font-size:   26px;
  display:     block;
  color:       var(--cream);
}

.apolo-contact-card > span {
  display:    block;
  font-size:  13px;
  color:      rgba(250, 246, 241, .55);
  margin-top: 6px;
}

.apolo-contact-card .row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         12px 0;
  border-top:      1px solid rgba(255, 255, 255, .08);
  font-size:       13px;
}

.apolo-contact-card .row:first-of-type { margin-top: 18px; }

.apolo-contact-card .row em {
  font-style:     normal;
  color:          rgba(250, 246, 241, .45);
  font-size:      11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.apolo-contact-card a             { color: rgba(250, 246, 241, .8); transition: color .2s; }
.apolo-contact-card a:hover       { color: var(--apolo-300); }


/* ============================================================
   APOLO SUBCATEGORY — SPECS TABLE
   ============================================================ */

.apolo-specs { background: var(--cream); }

.apolo-specs .eyebrow         { color: var(--apolo-700); }
.apolo-specs .eyebrow::before { background: var(--apolo-700); }

.apolo-specs-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  border:                1px solid var(--line);
  border-radius:         10px;
  overflow:              hidden;
  margin-top:            clamp(40px, 4.5vw, 64px);
}

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

.apolo-spec-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             24px;
  padding:         16px 24px;
  background:      var(--cream);
  border-bottom:   1px solid var(--line);
}

.apolo-spec-row:nth-child(even) { background: rgba(196, 147, 90, .03); }

.apolo-spec-row dt {
  font-size:   13px;
  color:       var(--muted);
  font-weight: 500;
}

.apolo-spec-row dd {
  font-size:   13px;
  font-weight: 600;
  color:       var(--ink);
  text-align:  right;
  flex-shrink: 0;