/* ================================================================
   VERSUS — Section comparatif "Super Designer vs les autres"
   Figma node : 1281-5684

   Structure HTML (column-first) :
     .versus
       .container-heading.versus__header
       .versus__table
         .vs-col.vs-col--labels      col 1 : critères  (bevel gauche)
         .vs-col                     col 2 : Freelance  (plain)
         .vs-col.vs-col--sd          col 3 : SuperDesigner (carte orange)
         .vs-col                     col 4 : Agence     (plain)
         .vs-col.vs-col--internalise col 5 : Internalisé (bevel droit)

   Bevel pixel-art par cellule (cols 1 & 5) :
     Col 1 gauche  → [bevel-xl py-8 / 4px] [bevel-l py-4 / 4px] [body flex-1]
     Col 5 droit   → [body flex-1] [bevel-r py-4 / 4px] [bevel-xr py-8 / 4px]

   Carte orange SuperDesigner (col 3, in-flow) :
     margin: -20px 0  → pop-out de 20px haut et bas
     flex-direction: row : [side-l 6px] [body flex-1] [side-r 6px]
     Items alignés sur les lignes : head = 80px, data = 56px, gap = 8px
     padding-top = 48px / padding-bottom = 42px
       (compense le margin -20px + col padding 32px + gradient borders)
================================================================ */

/* ── Variables & section ───────────────────────────────────────── */
.versus {
  background:      var(--purple-900);
  overflow:        hidden;

  --ch-accent:     var(--gold-fill);
  --heading-color: white;

  /* Carte orange SuperDesigner */
  --vs-card-black: var(--orange-900);  /* #342312 */
  --vs-card-light: var(--orange-50);   /* #fff7e7 */
  --vs-card-fill:  var(--gold-fill);   /* #ffd794 */
  --vs-card-shade: var(--orange-700);  /* #fe9e3a */
}

.versus .ch__subtitle {
  color:   var(--purple-100);
  opacity: 1;
}

/* ── En-tête ────────────────────────────────────────────────────── */
.versus__header {
  margin-bottom: 56px;
}

/* ── Tableau : flex-row de 5 colonnes ──────────────────────────── */
.versus__table {
  width:       100%;
  max-width:   1440px;
  margin:      0 auto;
  padding:     0 32px;
  display:     flex;
  align-items: stretch;
  overflow:    visible; /* laisse la carte SD dépasser */
}

/* ── Colonne générique ──────────────────────────────────────────── */
.vs-col {
  flex:           1 0 0;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding:        32px 0;
  min-width:      0;
}

/* ── Cellule : couleur de ligne comme custom property héritée ───── */
/*   → accessible à tous les enfants (body + strips)                */
.vs-cell--head { --vs-row-bg: var(--purple-700); }
.vs-cell--data { --vs-row-bg: var(--purple-500); }

/* ── Typographie commune ────────────────────────────────────────── */
.vs-cell--head {
  font-family: var(--font-body);
  font-size:   20px;
  font-weight: 700;
  line-height: 32px;
  color:       white;
}

.vs-cell--data {
  font-family: var(--font-body);
  font-size:   14px;
  font-weight: 500;
  color:       var(--purple-900);
}

/* ── Cellules "plain" (Freelance + Agence) ─────────────────────── */
/*   Fond + padding directs sur la cellule                          */
.vs-col:not(.vs-col--labels):not(.vs-col--internalise):not(.vs-col--sd) .vs-cell--head {
  background:  var(--vs-row-bg);
  padding:     24px;
  min-height:  80px;
  display:     flex;
  align-items: center;
}

.vs-col:not(.vs-col--labels):not(.vs-col--internalise):not(.vs-col--sd) .vs-cell--data {
  background:  var(--vs-row-bg);
  padding:     18px 24px;
  min-height:  56px;
  display:     flex;
  align-items: center;
}

/* ── Cellules à bevel (labels + internalisé) ───────────────────── */
/*   Fond et padding délégués au .vs-cell__body + strips            */
.vs-col--labels .vs-cell,
.vs-col--internalise .vs-cell {
  background: transparent;
  padding:    0;
  display:    flex;
  align-items: stretch;
}

/* Body intérieur */
.vs-cell__body {
  flex:    1;
  display: flex;
  align-items: center;
}

.vs-cell--head .vs-cell__body {
  background:  var(--vs-row-bg);
  padding:     24px;
  min-height:  80px;
}

.vs-cell--data .vs-cell__body {
  background:  var(--vs-row-bg);
  padding:     18px 24px;
  min-height:  56px;
}

/* ── Cellule label : police pixel + uppercase ──────────────────── */
.vs-cell--label h5,
.vs-cell--label .vs-cell__body {
  font-family:    var(--font-pixel);
  font-size:      18px;
  line-height:    1;
  font-weight:    400;
  text-transform: uppercase;
  color:          var(--purple-900);
  margin:         0;
}

/* ── Bevel strips ─────────────────────────────────────────────── */
/*   .vs-bevel      : wrapper avec padding (raccourcit le strip)   */
/*   .vs-bevel span : le strip coloré (background = --vs-row-bg)   */
.vs-bevel {
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
}

.vs-bevel--xl,
.vs-bevel--xr { padding: 8px 0; }

.vs-bevel--l,
.vs-bevel--r  { padding: 4px 0; }

.vs-bevel span {
  flex:       1;
  width:      4px;
  display:    block;
  min-height: 1px;
  background: var(--vs-row-bg); /* hérite de la cellule parente */
}

/* ════════════════════════════════════════════════════════════
   CARTE ORANGE — colonne SuperDesigner (in-flow, pop-out)

   .vs-col--sd est flex-row : [side-l] [body] [side-r]
   Bords latéraux = 3 strips × 2px (outer plein + mid/inner gradient)
   Corps = gradient vertical pixel-art (top 4px / fill / bottom 10px)
════════════════════════════════════════════════════════════ */

.vs-col--sd {
  flex-direction: row;   /* override column */
  padding:        0;     /* géré par vs-hi__items */
  margin:         -20px 0;
  z-index:        10;
  gap:            0 !important;
}

/* ── Bords latéraux ─────────────────────────────────────────────── */
.vs-hi__side {
  display:        flex;
  flex-direction: row;
  align-items:    stretch;
  flex-shrink:    0;
  width:          6px;
}

.vs-hi__outer,
.vs-hi__mid,
.vs-hi__inner {
  flex-shrink: 0;
  width:       2px;
}

.vs-hi__outer { background: var(--vs-card-black); }

.vs-hi__mid,
.vs-hi__inner {
  background: linear-gradient(
    to bottom,
    var(--vs-card-black) 0px               4px,
    var(--vs-card-light) 4px               6px,
    var(--vs-card-fill)  6px               calc(100% - 10px),
    var(--vs-card-light) calc(100% - 10px) calc(100% - 8px),
    var(--vs-card-shade) calc(100% - 8px)  calc(100% - 2px),
    var(--vs-card-black) calc(100% - 2px)  100%
  );
}

/* ── Corps de la carte ──────────────────────────────────────────── */
.vs-hi__body {
  flex:           1;
  display:        flex;
  flex-direction: column;
  background: linear-gradient(
    to bottom,
    var(--vs-card-black) 0px               2px,
    var(--vs-card-light) 2px               4px,
    var(--vs-card-fill)  4px               calc(100% - 10px),
    var(--vs-card-light) calc(100% - 10px) calc(100% - 8px),
    var(--vs-card-shade) calc(100% - 8px)  calc(100% - 2px),
    var(--vs-card-black) calc(100% - 2px)  100%
  );
}

/* ── Items (alignés sur les lignes des autres colonnes) ─────────── */
/*   padding-top  = 20px pop-out + 32px col-padding − 4px grad-top  */
/*   padding-bot  = 20px pop-out + 32px col-padding − 10px grad-bot */
.vs-hi__items {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            8px;           /* = gap entre .vs-col rows */
  padding:        48px 12px 42px;
}

/* En-tête (hauteur = min-height .vs-cell--head = 80px) */
.vs-hi__item--head {
  flex:            0 0 80px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  font-family:     var(--font-body);
  font-size:       20px;
  font-weight:     700;
  line-height:     32px;
  color:           var(--vs-card-black);
}

/* Items data (hauteur = min-height .vs-cell--data = 56px) */
.vs-hi__item {
  flex:            0 0 56px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         0 4px;
  font-family:     var(--font-body);
  font-size:       14px;
  font-weight:     700;
  color:           var(--vs-card-black);
  line-height:     1.25;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .versus__table {
    padding:                    0 var(--space-4);
    overflow-x:                 auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Empêche les colonnes d'être trop étroites */
  .vs-col { min-width: 120px; }
}

@media (max-width: 600px) {
  .versus__header { margin-bottom: 32px; }
}