/* ============================================================================
   RESPONSIVE — bascule mobile + ajustements densité — Editorial Arena
   Shell app no-scroll : chaque vue tient dans le viewport (voir INSTRUCTIONS-IA §3.2.1).
   ============================================================================ */

/* ─── Mobile / portrait étroit : pans empilés, couture diagonale horizontale */
@media (max-width: 720px) {

  /* ═══════════════════════════ ARÈNE DUEL ═══════════════════════════ */

  /*
   * Architecture mobile :
   *   • Carte haute (left) = pan SUPÉRIEUR, ancré en haut, fond ink.
   *     Le clip diagonal coupe le bas à droite (88 % → 100 % de gauche).
   *     Contenu ancré via justify-content: flex-start + padding
   *     qui laisse un espace badge en haut et évite la diagonale en bas.
   *
   *   • Carte basse (right) = pan INFÉRIEUR, ancré en bas, fond crème.
   *     Le clip diagonal coupe le haut à gauche (12 % → 0 % à droite).
   *     Contenu ancré via justify-content: flex-end + padding
   *     qui évite la diagonale en haut et laisse un respir en bas.
   *
   *   • Badge de la carte basse repositionné sous la diagonale (top: 17 %).
   *   • Hover désactivé sur touch (voir @media hover: none dans screens.css).
   */

  /* ── Boîte commune ─────────────────────────────────────────────────── */
  .duel-card {
    width: 100%;
    left: 0;
    right: 0;
    top: auto;
    bottom: auto;
    height: 50%;
  }

  /* ── Pan supérieur : contenu ancré en haut ─────────────────────────── */
  .duel-card.left {
    top: 0;
    justify-content: flex-start;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    /*
     * padding-top : badge (~30 px) + décalage badge du bord (~16 px) + marge → 52-66 px
     * padding-bottom : 18 % pour ne pas entrer dans la zone diagonale
     * padding-left / right : marges latérales lisibles
     */
    padding: clamp(52px, 9vh, 68px)
             clamp(20px, 5.5vw, 36px)
             18%
             clamp(20px, 5.5vw, 36px);
  }

  /* ── Pan inférieur : contenu ancré en bas ──────────────────────────── */
  .duel-card.right {
    bottom: 0;
    justify-content: flex-end;
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
    /*
     * padding-top : 19 % pour dépasser la zone diagonale (max 12 % à gauche)
     * padding-bottom : respir visuel en bas de carte
     * padding-left / right : marges latérales
     */
    padding: 19%
             clamp(20px, 5.5vw, 36px)
             clamp(14px, 3.2vh, 26px)
             clamp(20px, 5.5vw, 36px);
  }

  /* ── Corps de carte — sans marges supplémentaires ─────────────────── */
  .duel-card .card-body {
    max-width: 100%;
    align-self: stretch;
    text-align: left;
    align-items: flex-start;
  }
  .duel-card.left .card-body,
  .duel-card.right .card-body {
    padding: 0;
    margin: 0;
    text-align: left;
    align-items: flex-start;
    align-self: stretch;
  }

  /* ── Séparateur de carte ───────────────────────────────────────────── */
  .duel-card .card-sep,
  .duel-card.right .card-sep {
    align-self: stretch;
    max-width: 100%;
  }

  /* ── Troncature de la description ──────────────────────────────────── */
  .duel-card .card-block--desc p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── Images — fond centré, fondu vers le haut ──────────────────────── */
  .duel-card.left .card-image,
  .duel-card.right .card-image {
    background-position: center 40%;
    -webkit-mask-image: linear-gradient(to top, #000 8%, rgba(0,0,0,0.72) 38%, rgba(0,0,0,0.28) 58%, transparent 78%);
            mask-image: linear-gradient(to top, #000 8%, rgba(0,0,0,0.72) 38%, rgba(0,0,0,0.28) 58%, transparent 78%);
  }

  /* ── VS — légèrement plus compact ─────────────────────────────────── */
  .duel-vs { font-size: clamp(2rem, 11vw, 3.2rem); }

  /* ── Typographie ──────────────────────────────────────────────────── */
  .duel-card h3 { font-size: clamp(1rem, 4.5vw, 1.4rem); }

  /* ═══════════════════════════ HUD ARÈNE ═══════════════════════════ */

  .arena-top-inner {
    min-height: clamp(118px, 16vh, 168px);
    padding: clamp(14px, 2.4vh, 22px) clamp(16px, 4vw, 24px) clamp(12px, 2vh, 18px);
    gap: 12px;
  }

  .arena-hud {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }

  .arena-hud .hud-progress {
    grid-column: 1 / -1;
    order: 3;
  }

  .arena-meta {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .arena-question h2 {
    font-size: clamp(1.15rem, 4.8vw, 1.5rem);
  }

  /* ═══════════════════════ ANIMATIONS D'ENTRÉE ═════════════════════ */
  /* Glissé vertical (WAAPI gère la sortie via arena.js) */
  .duel-card.left.enter  { animation: enterUp   0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .duel-card.right.enter { animation: enterDown 0.42s 0.06s cubic-bezier(0.22, 1, 0.36, 1) backwards; }

  /* ═══════════════════════ AUTRES ÉCRANS ═══════════════════════════ */

  /* Intro : colonne unique, cartes compacts */
  .intro-stage {
    justify-content: flex-start;
    padding-top: clamp(10px, 1.6vh, 14px);
  }
  .intro-steps { grid-template-columns: 1fr; }
  .intro-step  { align-self: stretch; }
  .intro-stagehead .pickpol-stagehead-title { max-width: none; }
  .intro-stagehead .pickpol-stagehead-subtitle { max-width: none; }

  .pickpol-head .fc-lib-modes button {
    font-size: 11px;
    padding: 5px 10px;
  }

  /* Tier-list compacte */
  .tier-row  { grid-template-columns: 48px 1fr; }
  .cand-chip { padding: 8px 12px 8px 8px; gap: 8px; }
  .cand-portrait-wrap--md { --portrait-size: 38px; }
  .tier-row:first-child .cand-portrait-wrap--md { --portrait-size: 42px; }
  .cand-dot  { width: 28px; height: 28px; }
  .cand-name { font-size: 0.82rem; }
  .cand-party { display: none; }
}

@keyframes loseUp    { to { transform: translateY(-60%); opacity: 0; } }
@keyframes loseDown  { to { transform: translateY(60%);  opacity: 0; } }
@keyframes enterUp   { from { opacity: 0; transform: translateY(-36px); } to { opacity: 1; transform: none; } }
@keyframes enterDown { from { opacity: 0; transform: translateY(36px);  } to { opacity: 1; transform: none; } }

/* ─── Très petit écran en hauteur (paysage mobile) */
@media (max-height: 560px) and (max-width: 920px) {
  .intro-steps { display: none; }
  .arena-top-inner { min-height: 108px; gap: 8px; }
  .arena-question { padding-top: 0; border-top: none; }
  .arena-question h2 { margin-top: 6px; font-size: 1.1rem; }
  .arena-stat strong { font-size: 0.95rem; }
  .duel-card h3 { font-size: clamp(0.95rem, 4vw, 1.4rem); }
  .duel-card p  { -webkit-line-clamp: 2; }
}

/* ─── Interlude fin de série */
@media (max-width: 720px) {
  .series-beat-winner-desc { -webkit-line-clamp: 2; }
  .series-beat-cta { width: 100%; }
}

@media (max-width: 560px) {
  .alignment-body { flex-direction: column; align-items: flex-start; gap: 12px; }
  .alignment-ring-wrap { align-self: center; }
}
@media (max-width: 420px) {
  .alignment-compare { grid-template-columns: 1fr; }
  .alignment-link { flex-direction: row; }
  .alignment-link-icon { transform: rotate(90deg); }
}

/* ─── Vote spontané : densité sur petit viewport */
@media (max-height: 640px) {
  .vote-intent-head { padding-top: 10px; padding-bottom: 8px; }
  .vote-intent-head h2 { font-size: 1rem; }
  .vote-intent-head p { font-size: 0.68rem; margin-top: 4px; }
  .vote-intent-stage { padding: 8px 10px; gap: 5px; }
  .vote-intent-meta { display: none; }
  .vote-intent-grid { gap: 5px; }
  .vote-intent-grid--4x4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 3px;
  }
  .vote-intent-grid--4x4 .vote-intent-photo-col {
    width: clamp(32px, 17vh, 52px);
    height: clamp(32px, 17vh, 52px);
  }
  .vote-intent-grid--4x4 .vote-intent-content {
    padding: 0 3px;
  }
  .vote-intent-action { display: none; }
}

/* ─── Détail : colonnes empilées, hauteur partagée */
@media (max-width: 720px) {
  .detail-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .detail-axe-card,
  .detail-axe-card--rejected {
    grid-template-columns: 20px minmax(0, 1fr) auto 14px;
    gap: 2px 7px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .detail-axe-title { -webkit-line-clamp: 2; }
}

/* ─── Admin : grille outils et métriques */
@media (max-width: 900px) {
  .admin-tool-grid { grid-template-columns: 1fr; }
  .admin-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-stats-panels { grid-template-columns: 1fr; }
  .admin-preview-chrome { flex-wrap: wrap; gap: 6px; }
  .admin-preview-chrome-meta { order: 3; width: 100%; }
  .admin-preview-scene-title { white-space: normal; }
}

/* ─── Bilan : colonnes empilées, boutons 2×2 */
@media (max-width: 900px) {
  .bilan-columns { grid-template-columns: 1fr; }
  .bilan-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .bilan-actions { grid-template-columns: 1fr; }
}

/* ─── Graphique séries : duel compact */
@media (max-width: 720px) {
  .bracket-duel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 4px;
  }
  .bracket-duel-vs { justify-self: center; }
  .bracket-round {
    grid-template-columns: 22px 1fr;
  }
  .bracket-round-delta {
    grid-column: 2;
    justify-self: end;
    margin-top: -4px;
  }
}

/* ─── Tablette : duel horizontal compact */
@media (min-width: 721px) and (max-width: 1024px) {
  .duel-card h3 { font-size: 1.5rem; }
}