/* ════════════════════════════════════════════════════════════════
   DUALITY — press.css
   Partagé par press.html / press-en.html / press-es.html
   ────────────────────────────────────────────────────────────────
   Structure :
     1. Variables
     2. Reset & base
     3. Thème HOLO (variables + lisibilité)
     4. Header
     5. Layout & sections
     6. Description
     7. Assets (grille, téléchargement)
     8. Lightbox
     9. Fiche technique
    10. Contact & crédits
   ════════════════════════════════════════════════════════════════ */

/* ══ 1. VARIABLES ══════════════════════════════════════════════ */
:root {
  /* ── Fond ── */
  --bg:   #080b12;
  --bg2:  #0e1220;
  --bg3:  #141826;
  /* ── Couleurs de marque ── */
  --anima:   #ff44cc;
  --machina: #00ccff;
  --gold:    #2dd8a0;
  /* ── Texte ── */
  --text:  #7a9ab5;
  --text2: #c0d8e8;
  /* ── Bordures ── */
  --border:     rgba(255,255,255,.08);
  --border-dl:  rgba(45,216,160,.35);  /* boutons téléchargement */
}

/* ══ 2. RESET & BASE ══════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  font-family: 'Rajdhani', sans-serif;
  color: var(--text2);
  line-height: 1.7;
  padding: 0 0 80px;
}

/* ══ 3. THÈME HOLO ════════════════════════════════════════════
   Fond blanc holographique.
   Toutes les couleurs de texte sont des couleurs solides —
   jamais de rgba() sur du texte, cross-device safe.
   ══════════════════════════════════════════════════════════ */
body.holo {
  background: radial-gradient(ellipse 130% 110% at 50% 50%,
    #ffffff 0%, #f8fafb 30%, #edf2f6 60%, #e0e8ee 100%);

  /* ── Fonds ── */
  --bg:   #dde6ee;
  --bg2:  rgba(255,255,255,.72);
  --bg3:  rgba(185,205,220,.45);

  /* ── Texte : couleurs solides (pas de rgba sur du texte) ── */
  --text:  #5a7080;   /* équiv solide de rgba(30,50,75,.68) sur blanc */
  --text2: #1e2c42;   /* équiv solide de rgba(10,20,45,.90) sur blanc */

  /* ── Palette hiérarchique texte — aucune opacité, cross-device safe ── */
  --holo-text-primary: #1a2d45;   /* fort contraste, titres/corps */
  --holo-text-mid:     #364f66;   /* secondaire, descriptions */
  --holo-text-soft:    #5a6f80;   /* tertiaire, sous-titres, méta */
  --holo-text-muted:   #7d8f9e;   /* discret, tailles, dates */

  /* ── Couleurs de marque atténuées pour fond blanc ── */
  --gold:    #0d9b6f;
  --anima:   #cc2299;
  --machina: #0088cc;

  /* ── Bordures ── */
  --border: rgba(0,0,0,.10);
}

/* ── Header holo ── */
body.holo .header {
  background: linear-gradient(180deg, rgba(200,220,235,.60) 0%, transparent 100%);
  border-bottom-color: rgba(0,0,0,.10);
}

/* ── Lightbox holo ── */
body.holo .lb-overlay {
  background: rgba(210,225,235,.92);
}
body.holo .lb-img-wrap {
  background: #fff;
  border-color: var(--border);
}
body.holo .lb-arrow {
  background: rgba(215,228,238,.85);
  border-color: rgba(0,0,0,.15);
  color: var(--holo-text-mid);   /* solide — était rgba(10,20,45,.75) */
}
body.holo .lb-arrow:hover {
  background: rgba(13,155,111,.15);
  border-color: var(--gold);
  color: var(--gold);
}
body.holo .lb-close:hover {
  background: rgba(204,34,153,.12);
  border-color: var(--anima);
  color: var(--anima);
}

/* ── Boutons téléchargement holo (fond sombre → fond holo) ── */
body.holo .dl-btn,
body.holo .lb-dl {
  background: rgba(0,0,0,.04);
  border-color: var(--border-dl);
}

/* ── Icône zoom (blanche → sombre) sur fond holo clair ── */
body.holo .asset-preview::after {
  color: var(--holo-text-soft);
}

/* ── Taille asset : opacity → couleur solide ── */
body.holo .asset-size { color: var(--holo-text-muted); opacity: 1; }

/* ── Textes forts : rgba() → couleurs solides ── */
body.holo .description-box strong { color: var(--holo-text-primary); }  /* était rgba(10,20,45,.95) */
body.holo .contact-box strong     { color: var(--holo-text-primary); }  /* était rgba(10,20,45,.95) */
body.holo .credits strong         { color: var(--holo-text-primary); }  /* était rgba(10,20,45,.90) */

/* ── Tableau specs holo ── */
body.holo .specs-table tr:hover td { background: rgba(0,0,0,.025); }

/* ══ 4. HEADER ════════════════════════════════════════════════ */
.header {
  background: linear-gradient(180deg, rgba(255,68,204,.08) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
  padding: 48px 40px 36px;
  text-align: center;
}
.header h1 {
  font-family: 'Orbitron', monospace;
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  font-weight: 900;
  letter-spacing: .4em;
  background: linear-gradient(135deg, var(--anima), var(--machina));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(0,204,255,.25));
  width: fit-content;
  margin: 0 auto 8px;
}
.header .sub {
  font-size: .85rem;
  letter-spacing: .25em;
  color: var(--text);
  text-transform: uppercase;
}
.header-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.back-link {
  display: inline-flex;
  align-items: center;
  font-family: 'Orbitron', monospace;
  font-size: .55rem;
  letter-spacing: .2em;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 16px;
  transition: color .2s, border-color .2s;
}
.back-link:hover { color: var(--gold); border-color: var(--gold); }

/* ══ 5. LAYOUT & SECTIONS ═════════════════════════════════════ */
.container { max-width: 900px; margin: 0 auto; padding: 48px 24px 0; }
.section { margin-bottom: 56px; }
.section-title {
  font-family: 'Orbitron', monospace;
  font-size: .6rem;
  letter-spacing: .3em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ══ 6. DESCRIPTION ═══════════════════════════════════════════ */
.description-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 24px 28px;
}
.description-box p {
  margin-bottom: 12px;
  font-size: 1.05rem;
  color: var(--text2);
}
.description-box p:last-child { margin-bottom: 0; }
.description-box strong { color: #fff; }
/* Couleurs de clan */
.c-anima   { color: var(--anima);   font-weight: 600; }
.c-machina { color: var(--machina); font-weight: 600; }
.c-gold    { color: var(--gold); }

/* ══ 7. ASSETS ════════════════════════════════════════════════ */
/* ── Grille ── */
.assets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.asset-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .2s;
}
.asset-card:hover { border-color: rgba(255,255,255,.2); }

.asset-preview {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}
body.holo .asset-preview {
	background:#fff;
}
.asset-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.asset-preview.logo-preview {
  aspect-ratio: 1;
  max-height: 180px;
}
/* Icône zoom-in — blanche semi-trans sur fond sombre, thémée holo séparément */
.asset-preview::after {
  content: '⤢';
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: .85rem;
  color: rgba(255,255,255,.55);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.asset-preview:hover::after { opacity: 1; }

.asset-info {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.asset-name {
  font-family: 'Orbitron', monospace;
  font-size: .52rem;
  letter-spacing: .15em;
  color: var(--text);
  text-transform: uppercase;
}
/* opacity sur un texte : problématique en holo — voir override section 3 */
.asset-size { font-size: .8rem; color: var(--text); opacity: .6; }

/* ── Bouton téléchargement (card + lightbox partagent le même style) ── */
.dl-btn,
.lb-dl {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-dl);
  border-radius: 50%;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.dl-btn:hover,
.lb-dl:hover {
  background: rgba(45,216,160,.15);
  border-color: var(--gold);
}

/* ══ 8. LIGHTBOX ══════════════════════════════════════════════ */
.lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,6,12,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.lb-overlay.lb-open { opacity: 1; pointer-events: all; }

.lb-topbar {
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 12px;
}
.lb-title {
  font-family: 'Orbitron', monospace;
  font-size: .6rem;
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
  flex: 1;
}
.lb-counter {
  font-family: 'Orbitron', monospace;
  font-size: .52rem;
  letter-spacing: .1em;
  color: var(--text);
  flex-shrink: 0;
}
.lb-close {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text2);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  flex-shrink: 0;
}
.lb-close:hover { background: rgba(255,68,204,.15); border-color: var(--anima); color: var(--anima); }

.lb-modal { width: 100%; max-width: 1100px; }
.lb-img-wrap {
  position: relative;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  max-height: 76vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-img-wrap img {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  display: block;
  transition: opacity .2s;
}

.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(8,11,18,.7);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  color: var(--text2);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  user-select: none;
  z-index: 2;
}
.lb-arrow:hover  { background: rgba(45,216,160,.2); border-color: var(--gold); color: var(--gold); }
.lb-arrow.lb-prev { left: 12px; }
.lb-arrow.lb-next { right: 12px; }
/* opacity ici est fonctionnelle (état désactivé) — intentionnelle */
.lb-arrow.lb-disabled { opacity: .2; cursor: default; pointer-events: none; }

/* ══ 9. FICHE TECHNIQUE ═══════════════════════════════════════ */
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table tr { border-bottom: 1px solid var(--border); }
.specs-table tr:last-child { border-bottom: none; }
.specs-table td { padding: 12px 16px; font-size: .95rem; vertical-align: top; }
.specs-table td:first-child {
  font-family: 'Orbitron', monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  color: var(--text);
  text-transform: uppercase;
  white-space: nowrap;
  width: 180px;
}
.specs-table tr:hover td { background: rgba(255,255,255,.02); }

/* ══ 10. CONTACT & CRÉDITS ════════════════════════════════════ */
.contact-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-box a { color: var(--machina); text-decoration: none; }
.contact-box a:hover { text-decoration: underline; }

.credits { font-size: .88rem; color: var(--text); }
.credits strong { color: var(--text2); }