/*
 * ═══════════════════════════════════════════════════════════════════════════
 *  GLOBAL CS® — IMAGINE SERVER SERIES
 *  Overview landing page stylesheet · imagine-series.css
 *
 *  Depends on: imagine-servers.css  (base tokens, nav, sections, form, footer)
 *  This file adds: gamme-specific tokens, hero gamme, 4-model cards,
 *  comparison table, selection guide, CTA gamme, responsive overrides.
 *
 *  Load order in HTML:
 *    <link rel="stylesheet" href="imagine-servers.css"/>
 *    <link rel="stylesheet" href="imagine-series.css"/>
 * ═══════════════════════════════════════════════════════════════════════════
 */


/* ══════════════════════════════════════════════════════════════════════════
   1. GAMME COLOR TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Per-model accent colors */
  --cyan:       #0BA8C8;
  --cyan-rgb:   11, 168, 200;

  --green2:     #2EA853;
  --green-rgb:  46, 168, 83;

  --gold:       #C87D0E;
  --gold-rgb:   200, 125, 14;

  --red2c:      #C0272D;
  --red-rgb:    192, 39, 45;
}

/* Override shared accent to neutral red for piliers & form inherited from imagine-servers.css */
body {
  --accent:     #C0272D;
  --accent2:    #9B1D21;
  --accent-rgb: 192, 39, 45;
}


/* ══════════════════════════════════════════════════════════════════════════
   2. HERO GAMME
   ══════════════════════════════════════════════════════════════════════════ */
.hero-gamme {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: 60px;
}

.hero-gamme-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0D0D0D 0%, #111 40%, #0a0a0a 100%);
}

.hero-gamme-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* 4-color top strip — one segment per model */
.hero-gamme-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--cyan)   0%,  var(--cyan)   25%,
    var(--green2) 25%, var(--green2) 50%,
    var(--gold)   50%, var(--gold)   75%,
    var(--red2c)  75%, var(--red2c)  100%
  );
}

.hero-gamme-in {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 32px 80px;
  text-align: center;
}

/* ── Eyebrow ── */
.hero-gamme-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.hero-gamme-eyebrow::before,
.hero-gamme-eyebrow::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--border);
}

/* ── Title ── */
.hero-gamme-title {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 16px;
}

/* Per-letter color classes */
.hero-gamme-title .g-c { color: var(--cyan); }
.hero-gamme-title .g-g { color: var(--green2); }
.hero-gamme-title .g-o { color: var(--gold); }
.hero-gamme-title .g-r { color: var(--red2c); }

/* ── Sub-title ── */
.hero-gamme-sub {
  font-size: clamp(15px, 2vw, 22px);
  font-weight: 400;
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto 48px;
  line-height: 1.7;
}

/* ── Model pills ── */
.hero-gamme-pills {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

.pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  border: 1px solid;
  cursor: default;
  transition: transform .2s;
}

.pill:hover {
  transform: translateY(-2px);
}

.pill-110 {
  border-color: rgba(var(--cyan-rgb),  .40);
  color: var(--cyan);
  background: rgba(var(--cyan-rgb),  .06);
}

.pill-120 {
  border-color: rgba(var(--green-rgb), .40);
  color: var(--green2);
  background: rgba(var(--green-rgb), .06);
}

.pill-130 {
  border-color: rgba(var(--gold-rgb),  .40);
  color: var(--gold);
  background: rgba(var(--gold-rgb),  .06);
}

.pill-140 {
  border-color: rgba(var(--red-rgb),   .40);
  color: var(--red2c);
  background: rgba(var(--red-rgb),   .06);
}

/* ── 4 device cards in hero ── */
.hero-devices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.hero-device-item {
  position: relative;
  text-align: center;
  padding: 24px 16px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--border);
  transition: transform .3s, border-color .3s;
}

.hero-device-item:hover          { transform: translateY(-8px); }
.hero-device-item.d-110:hover   { border-color: rgba(var(--cyan-rgb),  .40); }
.hero-device-item.d-120:hover   { border-color: rgba(var(--green-rgb), .40); }
.hero-device-item.d-130:hover   { border-color: rgba(var(--gold-rgb),  .40); }
.hero-device-item.d-140:hover   { border-color: rgba(var(--red-rgb),   .40); }

.hero-device-item img {
  width: 100%;
  margin-bottom: 16px;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .60));
}

/* Colored top bar on each device card */
.hdi-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 10px 10px 0 0;
}

.d-110 .hdi-bar  { background: var(--cyan); }
.d-120 .hdi-bar  { background: var(--green2); }
.d-130 .hdi-bar  { background: var(--gold); }
.d-140 .hdi-bar  { background: var(--red2c); }

.hdi-model {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}

.d-110 .hdi-model { color: var(--cyan); }
.d-120 .hdi-model { color: var(--green2); }
.d-130 .hdi-model { color: var(--gold); }
.d-140 .hdi-model { color: var(--red2c); }

.hdi-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .10em;
}


/* ══════════════════════════════════════════════════════════════════════════
   3. LINEUP CARDS — 4 models side by side
   ══════════════════════════════════════════════════════════════════════════ */
.position-sec {
  padding: 80px 0;
  background: var(--dark2);
  border-top: 1px solid var(--border);
}

.position-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.pos-card {
  background: var(--dark3);
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
  cursor: default;
}

/* Colored top stripe */
.pos-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}

.pos-110::before { background: var(--cyan); }
.pos-120::before { background: var(--green2); }
.pos-130::before { background: var(--gold); }
.pos-140::before { background: var(--red2c); }

/* Section label */
.pos-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.pos-110 .pos-num { color: var(--cyan); }
.pos-120 .pos-num { color: var(--green2); }
.pos-130 .pos-num { color: var(--gold); }
.pos-140 .pos-num { color: var(--red2c); }

.pos-model {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}

.pos-target {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: .06em;
  margin-bottom: 20px;
}

/* Spec rows */
.pos-specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.pos-spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.pos-spec-label { color: var(--muted); }

.pos-spec-val {
  font-weight: 700;
  font-family: var(--mono);
  font-size: 12px;
}

.pos-110 .pos-spec-val { color: var(--cyan); }
.pos-120 .pos-spec-val { color: var(--green2); }
.pos-130 .pos-spec-val { color: var(--gold); }
.pos-140 .pos-spec-val { color: var(--red2c); }

/* "Voir la fiche" link */
.pos-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 4px;
  border: 1px solid;
  transition: all .2s;
  cursor: pointer;
}

.pos-110 .pos-link { color: var(--cyan);   border-color: rgba(var(--cyan-rgb),  .30); }
.pos-120 .pos-link { color: var(--green2); border-color: rgba(var(--green-rgb), .30); }
.pos-130 .pos-link { color: var(--gold);   border-color: rgba(var(--gold-rgb),  .30); }
.pos-140 .pos-link { color: var(--red2c);  border-color: rgba(var(--red-rgb),   .30); }

.pos-110 .pos-link:hover { background: rgba(var(--cyan-rgb),  .08); }
.pos-120 .pos-link:hover { background: rgba(var(--green-rgb), .08); }
.pos-130 .pos-link:hover { background: rgba(var(--gold-rgb),  .08); }
.pos-140 .pos-link:hover { background: rgba(var(--red-rgb),   .08); }


/* ══════════════════════════════════════════════════════════════════════════
   4. COMPARISON TABLE
   ══════════════════════════════════════════════════════════════════════════ */
.compare-sec {
  padding: 100px 0;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 40px;
}

.compare-table th,
.compare-table td {
  padding: 14px 18px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

/* Sticky header row */
.compare-sticky thead th {
  position: sticky;
  top: 60px;
  z-index: 10;
}

.compare-table thead th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
  background: var(--dark2);
}

/* Column headers colored per model */
.compare-table thead .th-110 { color: var(--cyan); }
.compare-table thead .th-120 { color: var(--green2); }
.compare-table thead .th-130 { color: var(--gold); }
.compare-table thead .th-140 { color: var(--red2c); }

.compare-table tbody tr:hover {
  background: rgba(255, 255, 255, .02);
}

/* Row type: label column */
.compare-table .row-label {
  font-weight: 600;
  color: var(--off);
  font-size: 12.5px;
  white-space: nowrap;
  width: 200px;
}

/* Row type: category separator */
.compare-table .row-cat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sub);
  padding-top: 24px;
  border-bottom: none;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

/* Inline code badges */
.compare-table td code {
  font-family: var(--mono);
  font-size: 11px;
  background: rgba(255, 255, 255, .05);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--off);
}

/* Per-model value cells */
.compare-table .val-110 { color: var(--cyan);   font-weight: 700; font-family: var(--mono); font-size: 12px; }
.compare-table .val-120 { color: var(--green2); font-weight: 700; font-family: var(--mono); font-size: 12px; }
.compare-table .val-130 { color: var(--gold);   font-weight: 700; font-family: var(--mono); font-size: 12px; }
.compare-table .val-140 { color: var(--red2c);  font-weight: 700; font-family: var(--mono); font-size: 12px; }

/* Boolean check mark */
.check {
  color: var(--green);
  font-size: 14px;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. SELECTION GUIDE
   ══════════════════════════════════════════════════════════════════════════ */
.selector-sec {
  padding: 100px 0;
  background: var(--dark2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.selector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sel-card {
  background: var(--dark3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  transition: border-color .3s, transform .2s;
  cursor: default;
}

.sel-card:hover               { transform: translateY(-3px); }
.sel-card.s-110:hover         { border-color: rgba(var(--cyan-rgb),  .40); }
.sel-card.s-120:hover         { border-color: rgba(var(--green-rgb), .40); }
.sel-card.s-130:hover         { border-color: rgba(var(--gold-rgb),  .40); }
.sel-card.s-140:hover         { border-color: rgba(var(--red-rgb),   .40); }

.sel-img {
  width: 160px;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .70));
}

.sel-content {
  flex: 1;
}

/* Model badge */
.sel-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 10px;
  border: 1px solid;
}

.s-110 .sel-badge { color: var(--cyan);   border-color: rgba(var(--cyan-rgb),  .30); background: rgba(var(--cyan-rgb),  .06); }
.s-120 .sel-badge { color: var(--green2); border-color: rgba(var(--green-rgb), .30); background: rgba(var(--green-rgb), .06); }
.s-130 .sel-badge { color: var(--gold);   border-color: rgba(var(--gold-rgb),  .30); background: rgba(var(--gold-rgb),  .06); }
.s-140 .sel-badge { color: var(--red2c);  border-color: rgba(var(--red-rgb),   .30); background: rgba(var(--red-rgb),   .06); }

.sel-model {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}

.sel-tagline {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.6;
}

/* Tag chips */
.sel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.sel-chip {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
}

/* Use-case italic quote */
.sel-use {
  font-size: 12px;
  color: var(--off);
  font-style: italic;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  line-height: 1.6;
}

.s-110 .sel-use { border-color: var(--cyan); }
.s-120 .sel-use { border-color: var(--green2); }
.s-130 .sel-use { border-color: var(--gold); }
.s-140 .sel-use { border-color: var(--red2c); }


/* ══════════════════════════════════════════════════════════════════════════
   6. CTA GAMME — dual-gradient button & background
   ══════════════════════════════════════════════════════════════════════════ */
.cta-gamme-sec {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

/* Dual-tone ambient glow */
.cta-gamme-bg-el {
  position: absolute;
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle,
    rgba(var(--cyan-rgb), .04) 0%,
    rgba(var(--red-rgb),  .04) 50%,
    transparent 70%
  );
  pointer-events: none;
}

.cta-gamme-in {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 80px;
  align-items: start;
}

/* CTA button uses full gamme gradient — applied inline in HTML */
/* .btn-gamme-sub defined here for optional reuse */
.btn-gamme-sub {
  width: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--red2c));
  color: var(--white);
  border: none;
  border-radius: 4px;
  padding: 13px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
}

.btn-gamme-sub:hover {
  opacity: .88;
  transform: translateY(-1px);
}

/* Nav CTA gradient */
.btn-nav-gamme {
  background: linear-gradient(90deg, var(--cyan), var(--red2c)) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   7. FOOTER — colored model links
   ══════════════════════════════════════════════════════════════════════════ */
.foot-link-110 { color: var(--cyan)   !important; }
.foot-link-120 { color: var(--green2) !important; }
.foot-link-130 { color: var(--gold)   !important; }
.foot-link-140 { color: var(--red2c)  !important; }

/* Footer bottom model strip */
.foot-model-strip {
  display: flex;
  gap: 8px;
  align-items: center;
}

.foot-model-strip .m-110 { color: var(--cyan); }
.foot-model-strip .m-sep { color: var(--border); }
.foot-model-strip .m-120 { color: var(--green2); }
.foot-model-strip .m-130 { color: var(--gold); }
.foot-model-strip .m-140 { color: var(--red2c); }


/* ══════════════════════════════════════════════════════════════════════════
   8. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .hero-devices        { grid-template-columns: repeat(2, 1fr); }
  .position-grid       { grid-template-columns: repeat(2, 1fr); }
  .compare-table .row-label { width: 140px; }
  .selector-grid       { grid-template-columns: 1fr; }
  .cta-gamme-in        { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .hero-devices        { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hero-gamme-title    { font-size: 48px; }
  .position-grid       { grid-template-columns: 1fr; }
  .compare-table       { font-size: 11px; }
  .compare-table th,
  .compare-table td    { padding: 10px; }
  .sel-card            { flex-direction: column; }
  .sel-img             { width: 100%; max-width: 220px; }
}