/* ═══════════════════════════════════════════════════════════════════════════
   landscape.css — Adaptation iPad / Mac Catalyst en mode paysage
   Inclure dans chaque page APRÈS tous les styles principaux.

   Cible UNIQUEMENT iPad et Mac (min-height: 600px en paysage).
   L'iPhone en paysage a une hauteur ≤ 430px → non concerné.

   RÈGLE DE SÉPARATION :
     • orientation: landscape  → changements de LAYOUT uniquement
     • min-width: 700px        → scale-up de TEXTE uniquement (portrait + paysage)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (orientation: landscape) and (min-height: 600px) {

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     index.html — Page de configuration principale
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* ── Setup page : layout 2 colonnes iPad paysage ──────────────────────
     Col gauche (≈30 %) : panneau marque  → hero + ambiance
     Col droite (≈70 %) : contrôles       → joueurs / jeu / dés virtuels
     Ligne pleine largeur                 → bouton CTA
     ──────────────────────────────────────────────────────────────────── */

  #setup-page {
    display: grid !important;
    grid-template-columns: clamp(210px, 28%, 320px) 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "hero    joueurs"
      "hero    game"
      "ambiance toggle"
      "cta     cta" !important;
    column-gap: clamp(20px, 3vw, 44px) !important;
    row-gap: 0 !important;
    padding: max(env(safe-area-inset-top, 0px) + 10px, 20px)
             max(env(safe-area-inset-right, 0px) + 20px, 28px)
             max(env(safe-area-inset-bottom, 0px) + 12px, 18px)
             max(env(safe-area-inset-left, 0px) + 20px, 28px) !important;
    overflow: hidden !important;
    align-items: start !important;
  }

  /* ── Colonne gauche : Hero ── */

  #setup-page .app-hero {
    grid-area: hero !important;
    width: auto !important;
    height: 100% !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 0 0 !important;
    gap: 6px !important;
    /* Séparateur vertical discret entre les colonnes */
    border-right: 1px solid rgba(255, 105, 180, 0.14) !important;
    padding-right: clamp(16px, 2.5vw, 32px) !important;
    margin-right: 0 !important;
  }

  #setup-page .app-logo {
    width: clamp(68px, 10vh, 108px) !important;
    height: clamp(68px, 10vh, 108px) !important;
    margin-bottom: 6px !important;
    animation: heroFloat 4s ease-in-out infinite !important;
  }

  #setup-page .app-title {
    font-size: clamp(1.7rem, 3.8vh, 2.6rem) !important;
    text-align: center !important;
    margin-bottom: 0 !important;
    line-height: 1.15 !important;
  }

  /* Afficher le sous-titre — on a de la place en paysage */
  #setup-page .app-subtitle {
    display: block !important;
    font-size: clamp(0.76rem, 1.2vh, 0.9rem) !important;
    text-align: center !important;
    opacity: 0.7 !important;
    margin-top: 2px !important;
    margin-bottom: 4px !important;
  }

  /* Ligne décorative sous le sous-titre */
  #setup-page .app-hero::after {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 1.5px !important;
    background: linear-gradient(to right, transparent, var(--pink-hot), transparent) !important;
    border-radius: 1px !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
  }

  /* ── Colonne gauche : Ambiance (thèmes de couleur) ── */

  #setup-page > .section:has(.theme-row) {
    grid-area: ambiance !important;
    margin-bottom: 0 !important;
    padding-right: clamp(16px, 2.5vw, 32px) !important;
    border-right: 1px solid rgba(255, 105, 180, 0.14) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding-bottom: 0 !important;
  }

  /* ── Colonne droite : sections de configuration ── */

  #setup-page > .section:has(.players-row) {
    grid-area: joueurs !important;
    margin-bottom: clamp(10px, 1.6vh, 18px) !important;
  }

  #setup-page > .section:has(.game-type-row) {
    grid-area: game !important;
    margin-bottom: clamp(10px, 1.6vh, 18px) !important;
  }

  #setup-page > .section:has(.toggle-card) {
    grid-area: toggle !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  /* ── Ligne pleine largeur : CTA ── */

  #setup-page > .cta-wrap {
    grid-area: cta !important;
    width: 100% !important;
    padding-top: clamp(8px, 1.2vh, 14px) !important;
    margin-top: 0 !important;
  }

  #setup-page #setupNextBtn {
    padding: 0.82rem 2rem !important;
    font-size: clamp(1rem, 1.8vh, 1.15rem) !important;
  }

  /* ── Ajustements des composants internes ── */

  /* Boutons genre : un peu plus grands en paysage iPad */
  #setup-page .gender-btn {
    padding: 10px 8px !important;
    font-size: 1.05rem !important;
  }

  /* Thèmes : centrés dans la colonne gauche, légèrement plus petits */
  #setup-page .theme-row {
    justify-content: center !important;
    gap: 10px !important;
  }

  #setup-page .theme-btn {
    width: 44px !important;
    height: 44px !important;
  }

  /* Toggle card : aligne verticalement avec le bas de la section */
  #setup-page .toggle-card {
    width: 100% !important;
  }

  #infoBtn {
    top: max(env(safe-area-inset-top, 0px) + 6px, 14px) !important;
  }


  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     dice-setup.html / progressive-setup.html
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  #dice-page,
  #prog-page {
    padding-top: max(env(safe-area-inset-top, 0px) + 6px, 18px) !important;
    padding-left: max(env(safe-area-inset-left, 0px) + 12px, 20px) !important;
    padding-right: max(env(safe-area-inset-right, 0px) + 12px, 20px) !important;
  }

  .dice-header,
  .prog-header {
    padding-top: 0 !important;
    margin-bottom: 0.8rem !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    justify-content: center !important;
  }

  .dice-logo,
  .prog-logo {
    width: 40px !important;
    height: 40px !important;
    animation: none !important;
    margin-bottom: 0 !important;
  }

  .dice-title,
  .prog-title {
    font-size: clamp(1.7rem, 3vw, 2.2rem) !important;
    margin: 0 !important;
  }

  .dice-subtitle,
  .prog-subtitle { display: none !important; }

  .players-row {
    flex-direction: row !important;
    gap: 16px !important;
  }

  .gender-btn {
    width: 70px !important;
    height: 70px !important;
    font-size: 2.6rem !important;
    line-height: 70px !important;
  }

  #ia-levels-slot,
  #cc-ia-row {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #diceBackBtn,
  #progBackBtn {
    top: max(env(safe-area-inset-top, 0px) + 6px, 14px) !important;
  }

  #heatStart,
  #startBtn,
  .start-btn {
    padding: 0.9rem 2.2rem !important;
    font-size: 1.1rem !important;
    margin-top: 0.6rem !important;
    margin-bottom: 0.6rem !important;
  }


  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     game.html (#game) — Jeu de dés
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  #game {
    padding-top: max(env(safe-area-inset-top, 0px) + 6px, 16px) !important;
    padding-left: max(env(safe-area-inset-left, 0px) + 12px, 20px) !important;
    padding-right: max(env(safe-area-inset-right, 0px) + 12px, 20px) !important;
  }

  #game .players-row {
    flex-direction: row !important;
    gap: 20px !important;
  }

  .dice-display {
    font-size: clamp(3.5rem, 8vw, 5rem) !important;
  }

  .action-text,
  #game .action-card,
  #game .action-display {
    max-height: 30vh !important;
    overflow-y: auto !important;
  }

  #game .btn-roll,
  #game .btn-next,
  #game .action-btn {
    padding: 0.9rem 2rem !important;
    font-size: 1.1rem !important;
  }


  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     cards.html (#game-root) — LAYOUT PAYSAGE SEULEMENT
     En portrait ces règles sont inactives → pas d'effet de bord.
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* ── Jeu de Cartes — layout paysage iPad (fallback JS) ── */

  /* Même répartition 70/30 que le bloc @media (min-width:700px) */
  #play-zone {
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }
  #hand-section {
    flex: 0 0 28dvh !important; /* un peu moins en paysage car écran plus court */
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 2px 10px 0 !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px) + 4px, 6px) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #hand-cards {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
  }
  #hand-cards .hand-card-wrap {
    aspect-ratio: unset !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
  }
  #hand-cards .game-card { height: 100% !important; }

  .card-action {
    font-size: clamp(0.78rem, 1.4vw, 0.95rem) !important;
    line-height: 1.4 !important;
    padding: 6px 7px 7px !important;
  }
  .card-die-sym { width: 26px !important; height: 26px !important; font-size: 1rem !important; }

  /* ── Padding safe-area (notch latéral en paysage) ── */
  #game-root {
    padding-left:  max(env(safe-area-inset-left,  0px) + 4px, 8px) !important;
    padding-right: max(env(safe-area-inset-right, 0px) + 4px, 8px) !important;
    overflow: hidden !important;
  }

  #game-header {
    padding-top: max(env(safe-area-inset-top, 0px) + 4px, 10px) !important;
    min-height: 50px !important;
  }

  /* Zone centrale : 2/3 de la hauteur disponible */
  #play-zone {
    flex: 2 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 6px 24px 10px !important;
  }

  /* Carte centrale : déverrouille max-width:220px hérité, garantit ratio 2:3 */
  #discard-pile {
    max-width: min(48vw, 300px) !important;
    flex: 0 0 auto !important;
  }

  #discard-stack {
    width: min(46vw, 280px) !important;
    min-height: min(69vw, 420px) !important; /* 1.5 × width → ratio 2:3 */
  }

  /* Pioche poussée vers la droite */
  #deck-pile {
    margin-left: min(8vw, 64px) !important;
    margin-right: max(3vw, 16px) !important;
    padding-top: 0 !important;
    flex-shrink: 0 !important;
  }

  .deck-card-visual {
    width: clamp(56px, 9vw, 76px) !important;
  }

  /* Texte de la carte centrale en paysage */
  #top-discard .card-action {
    font-size: clamp(1.05rem, 2.4vw, 1.4rem) !important;
    padding: 14px 16px 18px !important;
    line-height: 1.65 !important;
  }
  #top-discard .card-die-hearts { font-size: 0.9rem !important; }
  #top-discard .card-die-sym    { width: 42px !important; height: 42px !important; font-size: 1.55rem !important; }
  #top-discard .card-table-badge { font-size: 0.76rem !important; }
  #top-discard .card-dice-bar   { padding: 9px 13px 7px !important; gap: 11px !important; }

  /* Main du joueur : 1/3 de l'écran, 1 seule ligne de cartes */
  #hand-section {
    flex-shrink: 0 !important;
    max-height: 30vh !important;
    overflow: hidden !important;
    padding-left:  max(env(safe-area-inset-left,  0px) + 8px, 10px) !important;
    padding-right: max(env(safe-area-inset-right, 0px) + 8px, 10px) !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px) + 6px, 8px) !important;
  }

  /* Toutes les cartes sur 1 seule ligne */
  #hand-cards {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  #hand-cards .hand-card-wrap {
    aspect-ratio: 2/3 !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  /* Bandeau tour et barre d'actions compacts */
  #turn-banner { padding: 3px 14px !important; }
  #action-bar {
    padding: 5px 16px !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px) + 5px, 8px) !important;
    gap: 8px !important;
  }
  #hand-divider { margin: 0 14px !important; }

  /* Titres en paysage */
  #turn-title      { font-size: clamp(1.4rem, 3.5vw, 1.85rem) !important; }
  #turn-banner-text { font-size: clamp(1.2rem, 3vw, 1.55rem) !important; }

  /* Écran victoire : 3 colonnes en paysage */
  #win-scroll {
    padding: 40px 0 28px !important;
    gap: 14px !important;
  }
  #win-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 0 20px !important;
    gap: 14px !important;
  }
  .win-btn-row { padding: 0 24px !important; }


  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Éléments partagés
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  #hearts-canvas { opacity: 0.3 !important; }

  /* ── Splash : disposition horizontale en paysage iPad ── */
  .splash-content {
    flex-direction: row !important;
    gap: clamp(20px, 4vw, 40px) !important;
    align-items: center !important;
  }

  .splash-logo {
    width: clamp(60px, 9vh, 80px) !important;
    height: clamp(60px, 9vh, 80px) !important;
    flex-shrink: 0 !important;
  }

  .splash-title {
    font-size: clamp(1.5rem, 4.5vh, 2rem) !important;
  }

  .duo-modal > div,
  #helpModal > div,
  #rules-modal > div,
  #action-modal > div,
  #levels-modal > div,
  #win-modal > div,
  #lm-page {
    max-height: 90dvh !important;
    overflow-y: auto !important;
  }

  .section { margin-bottom: 10px !important; }

}


/* ═══════════════════════════════════════════════════════════════════════════
   SCALE-UP TEXTE — iPad et + (portrait ET paysage)
   Contient UNIQUEMENT des tailles de police. Zéro changement de layout.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 700px) {

  /* ── UI setup / navigation ── */

  .sect-label { font-size: 0.95rem !important; }

  .prog-group-label,
  .lm-group-label { font-size: 0.95rem !important; }

  .prog-level-card,
  .lm-level-card-name { font-size: 0.95rem !important; }

  .prog-subtitle,
  .dice-subtitle,
  .app-subtitle { font-size: 0.95rem !important; }

  .prog-group-free,
  .prog-group-locked-badge,
  .lm-group-free-tag,
  .lm-group-locked-tag { font-size: 0.85rem !important; }

  .sect-hint-text { font-size: 1rem !important; }
  .name-input     { font-size: 1.05rem !important; }

  /* ── Jeu de Dés — dés plus grands sur iPad ──────────────────────────── */

  /* Dés : on lève le plafond de 210px à 280px max.
     aspect-ratio: 1/1 reste actif → carrés garantis. */
  .dice-box {
    max-width: clamp(180px, 38vw, 280px) !important;
    overflow: hidden !important;   /* empêche tout débordement d'emoji */
  }

  /* Fonte du dé symbole : on reste raisonnable pour ne pas déborder */
  .dice-box--hearts,
  .dice-box--symbol {
    font-size: clamp(2.6rem, 10vw, 5rem) !important;
  }

  /* Grille de cœurs : plafonds revus pour tenir dans le carré */
  .hearts-1 { font-size: clamp(3rem,   13vw, 6.5rem) !important; }
  .hearts-2 { font-size: clamp(2.6rem, 11vw, 5.5rem) !important; }
  .hearts-3 { font-size: clamp(2.2rem,  9vw, 4.8rem) !important; }
  .hearts-4 { font-size: clamp(1.9rem,  8vw, 4.2rem) !important; }
  .hearts-5 { font-size: clamp(1.6rem,  7vw, 3.6rem) !important; }
  .hearts-6 { font-size: clamp(1.4rem,  6vw, 3.2rem) !important; }

  /* Titre de tour */
  #game h2#turnTitle {
    padding-top: max(env(safe-area-inset-top, 0px) + 2.6rem, 3.6rem) !important;
    font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  }

  /* Zone résultat */
  #result { font-size: clamp(1.3rem, 2.8vw, 1.7rem) !important; }

  /* Boutons de jeu */
  .game-btn {
    padding: 1rem 2.6rem !important;
    font-size: 1.2rem !important;
  }

  /* ── Jeu de Cartes iPad — répartition 70 / 30 ─────────────────────────
     La moitié haute (#play-zone) prend 70 % de l'écran,
     les cartes en main (#hand-section) occupent les 30 % restants.
     La hauteur de la section est fixée ; les cartes s'y adaptent
     (on inverse la logique aspect-ratio : c'est la hauteur qui dicte).
     ─────────────────────────────────────────────────────────────────── */

  /* Zone de jeu : absorbe tout l'espace libre */
  #play-zone {
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }

  /* Section main : hauteur fixe 30dvh, ne grandit plus */
  #hand-section {
    flex: 0 0 30dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 4px 10px 0 !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px) + 4px, 8px) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Grille : remplit toute la hauteur disponible de la section */
  #hand-cards {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    /* height auto via flex */
  }

  /* Les wraps de cartes remplissent la cellule de grille en hauteur */
  #hand-cards .hand-card-wrap {
    aspect-ratio: unset !important;   /* ← libère la contrainte largeur→hauteur */
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
  }
  #hand-cards .game-card {
    height: 100% !important;
    border-radius: 12px !important;
  }

  /* ── Texte des cartes en main — plus grand, plus lisible ── */
  .card-action {
    font-size: clamp(0.82rem, 1.6vw, 1rem) !important;
    line-height: 1.45 !important;
    padding: 7px 8px 8px !important;
    -webkit-line-clamp: 6 !important;
    color: rgba(230, 200, 235, 0.92) !important;
  }
  .card-dice-bar {
    padding: 6px 9px 5px !important;
    gap: 6px !important;
  }
  .card-die-sym {
    width: 28px !important;
    height: 28px !important;
    font-size: 1.05rem !important;
  }
  .card-die-hearts { font-size: 0.66rem !important; }
  .card-table-badge {
    font-size: 0.58rem !important;
    color: rgba(255,105,180,0.5) !important;
  }

  /* ── Label et boutons de la section basse ── */
  #hand-label { font-size: 0.75rem !important; margin-bottom: 5px !important; }
  #action-bar {
    padding: 6px 16px 8px !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px) + 6px, 10px) !important;
  }
  .action-btn { font-size: 1rem !important; padding: 13px 12px !important; }

  /* ── Carte centrale (défausse) — plus grande, ratio 2:3 respecté ── */
  #discard-pile {
    max-width: clamp(180px, 44vw, 280px) !important;
  }
  #discard-stack {
    width: clamp(160px, 42vw, 260px) !important;
    min-height: clamp(240px, 63vw, 390px) !important; /* 1.5× width → ratio 2:3 */
  }

  /* Texte de la carte centrale */
  #top-discard .card-action {
    font-size: clamp(1rem, 2.6vw, 1.35rem) !important;
    line-height: 1.62 !important;
  }
  #top-discard .card-die-hearts { font-size: 0.9rem !important; }
  #top-discard .card-die-sym    { width: 40px !important; height: 40px !important; font-size: 1.45rem !important; }

  /* ── Header ── */
  #score-display         { font-size: 0.92rem !important; }
  #score-display .sc-name { font-size: 0.92rem !important; }
  #turn-title            { font-size: clamp(1.4rem, 3.5vw, 1.8rem) !important; }

  /* ── Écran victoire ── */
  .win-trophy      { font-size: 3.5rem !important; }
  .win-title       { font-size: clamp(1.5rem, 4vw, 2rem) !important; }
  .win-sub         { font-size: 0.95rem !important; line-height: 1.5 !important; }
  .win-choose-label { font-size: 1.1rem !important; }
  .win-counter     { font-size: 0.85rem !important; }
  .win-card-text   { font-size: 0.96rem !important; line-height: 1.58 !important; -webkit-line-clamp: 6 !important; }
  .win-card-bar    { font-size: 0.96rem !important; }
  .win-btn-primary   { font-size: 1.1rem !important; padding: 17px 0 !important; }
  .win-btn-secondary { font-size: 0.95rem !important; padding: 14px 0 !important; }

  /* ── Modale action ── */
  .action-modal-text  { font-size: clamp(1.2rem, 3.2vw, 1.55rem) !important; }
  .action-modal-title { font-size: clamp(1.3rem, 3.2vw, 1.65rem) !important; }

}


/* ═══════════════════════════════════════════════════════════════════════════
   iPad Pro / Mac — scale-up texte supplémentaire
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {

  /* UI setup */
  .sect-label             { font-size: 1rem !important; }
  .prog-group-label,
  .lm-group-label         { font-size: 1rem !important; }
  .prog-level-card,
  .lm-level-card-name     { font-size: 1.05rem !important; }
  .prog-subtitle,
  .dice-subtitle,
  .app-subtitle           { font-size: 1rem !important; }
  .sect-hint-text         { font-size: 1.05rem !important; }

  /* Dés */
  .dice-box {
    max-width: clamp(240px, 36vw, 340px) !important;
    overflow: hidden !important;
  }
  .dice-box--hearts,
  .dice-box--symbol {
    font-size: clamp(3rem, 11vw, 6rem) !important;
  }
  .hearts-1 { font-size: clamp(4rem,   15vw, 8rem)   !important; }
  .hearts-2 { font-size: clamp(3.4rem, 13vw, 7rem)   !important; }
  .hearts-3 { font-size: clamp(2.8rem, 11vw, 6rem)   !important; }
  .hearts-4 { font-size: clamp(2.4rem,  9vw, 5.2rem) !important; }
  .hearts-5 { font-size: clamp(2rem,    7vw, 4.5rem) !important; }
  .hearts-6 { font-size: clamp(1.7rem,  6vw, 3.8rem) !important; }

  /* Carte centrale iPad Pro — ratio 2:3 */
  #discard-pile  { max-width: clamp(220px, 38vw, 320px) !important; }
  #discard-stack {
    width: clamp(200px, 36vw, 300px) !important;
    min-height: clamp(300px, 54vw, 450px) !important;
  }

  /* Cartes en main — section un peu plus haute sur grand écran */
  #hand-section { flex: 0 0 32dvh !important; }
  #hand-cards { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; }
  .card-action {
    font-size: clamp(0.9rem, 1.5vw, 1.05rem) !important;
    line-height: 1.48 !important;
    padding: 8px 10px 10px !important;
  }
  .card-die-sym { width: 32px !important; height: 32px !important; font-size: 1.15rem !important; }
  .card-dice-bar { padding: 7px 10px 6px !important; }

  /* Cartes */
  .card-action            { font-size: 0.96rem !important; line-height: 1.45 !important; }
  #top-discard .card-action {
    font-size: clamp(1.2rem, 1.9vw, 1.52rem) !important;
    padding: 16px 18px 20px !important;
  }

  /* Victoire */
  .win-title   { font-size: clamp(1.75rem, 3.2vw, 2.4rem) !important; }
  .win-sub     { font-size: 1.05rem !important; }
  .win-card-text { font-size: 1.02rem !important; }

}


/* ═══════════════════════════════════════════════════════════════════════════
   iPad Pro / Mac PAYSAGE — layout supplémentaire grandes dimensions
   ═══════════════════════════════════════════════════════════════════════════ */

@media (orientation: landscape) and (min-height: 800px) {

  /* ── Setup page — iPad Pro / grand écran ── */

  #setup-page {
    grid-template-columns: clamp(250px, 30%, 360px) 1fr !important;
    column-gap: clamp(28px, 3.5vw, 56px) !important;
    padding: max(env(safe-area-inset-top, 0px) + 16px, 28px)
             max(env(safe-area-inset-right, 0px) + 28px, 40px)
             max(env(safe-area-inset-bottom, 0px) + 16px, 24px)
             max(env(safe-area-inset-left, 0px) + 28px, 40px) !important;
  }

  #setup-page .app-logo {
    width: clamp(88px, 11vh, 130px) !important;
    height: clamp(88px, 11vh, 130px) !important;
  }

  #setup-page .app-title {
    font-size: clamp(2rem, 4vh, 3rem) !important;
  }

  #setup-page .app-subtitle {
    font-size: clamp(0.84rem, 1.4vh, 1rem) !important;
  }

  #setup-page > .section:has(.players-row),
  #setup-page > .section:has(.game-type-row) {
    margin-bottom: clamp(14px, 2vh, 24px) !important;
  }

  #setup-page .theme-btn {
    width: 50px !important;
    height: 50px !important;
  }

  #setup-page #setupNextBtn {
    padding: 0.95rem 2.2rem !important;
    font-size: 1.15rem !important;
  }

  /* Carte centrale encore plus imposante */
  #discard-pile  { max-width: min(40vw, 330px) !important; }
  #discard-stack {
    width: min(38vw, 310px) !important;
    min-height: min(57vw, 465px) !important;
  }

  /* Pioche */
  .deck-card-visual { width: clamp(64px, 8.5vw, 92px) !important; }
  #deck-pile { margin-left: min(10vw, 90px) !important; }

  /* Main légèrement plus haute */
  #hand-section { max-height: 32vh !important; }

  /* 4 colonnes sur l'écran victoire */
  #win-cards-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    padding: 0 32px !important;
    gap: 18px !important;
  }

}


/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTIF WKWebView — classe .landscape posée par orientation.js
   Duplique les règles de layout paysage pour les cas où le media query
   CSS `orientation` n'est pas réévalué après une rotation sur iPad.
   ═══════════════════════════════════════════════════════════════════════════ */

html.landscape {

  /* ── Jeu de Dés — dés plus grands en paysage iPad ── */
  .dice-box {
    max-width: clamp(180px, 30vw, 320px) !important;
  }
  .dice-box--hearts,
  .dice-box--symbol {
    font-size: clamp(3rem, 12vw, 7rem) !important;
  }
  .hearts-1 { font-size: clamp(4rem,  15vw, 9rem)   !important; }
  .hearts-2 { font-size: clamp(3.4rem, 13vw, 7.5rem) !important; }
  .hearts-3 { font-size: clamp(2.8rem, 11vw, 6.5rem) !important; }
  .hearts-4 { font-size: clamp(2.4rem,  9vw, 5.5rem) !important; }
  .hearts-5 { font-size: clamp(2rem,    8vw, 4.8rem) !important; }
  .hearts-6 { font-size: clamp(1.8rem,  7vw, 4.2rem) !important; }

  #game h2#turnTitle {
    padding-top: max(env(safe-area-inset-top, 0px) + 1.8rem, 2.4rem) !important;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important;
    margin-bottom: 0.4rem !important;
  }

  #result { font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important; }

  /* ── index.html ── */

  #setup-page {
    display: grid !important;
    grid-template-columns: clamp(210px, 28%, 320px) 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "hero    joueurs"
      "hero    game"
      "ambiance toggle"
      "cta     cta" !important;
    column-gap: clamp(20px, 3vw, 44px) !important;
    row-gap: 0 !important;
    padding: max(env(safe-area-inset-top, 0px) + 10px, 20px)
             max(env(safe-area-inset-right, 0px) + 20px, 28px)
             max(env(safe-area-inset-bottom, 0px) + 12px, 18px)
             max(env(safe-area-inset-left, 0px) + 20px, 28px) !important;
    overflow: hidden !important;
    align-items: start !important;
  }
  #setup-page .app-hero {
    grid-area: hero !important;
    width: auto !important;
    height: 100% !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 6px !important;
    border-right: 1px solid rgba(255, 105, 180, 0.14) !important;
    padding-right: clamp(16px, 2.5vw, 32px) !important;
  }
  #setup-page .app-logo {
    width: clamp(68px, 10vh, 108px) !important;
    height: clamp(68px, 10vh, 108px) !important;
    margin-bottom: 6px !important;
    animation: heroFloat 4s ease-in-out infinite !important;
  }
  #setup-page .app-title {
    font-size: clamp(1.7rem, 3.8vh, 2.6rem) !important;
    text-align: center !important; margin-bottom: 0 !important; line-height: 1.15 !important;
  }
  #setup-page .app-subtitle {
    display: block !important;
    font-size: clamp(0.76rem, 1.2vh, 0.9rem) !important;
    text-align: center !important; opacity: 0.7 !important; margin-bottom: 4px !important;
  }
  #setup-page > .section:has(.theme-row) {
    grid-area: ambiance !important; margin-bottom: 0 !important;
    padding-right: clamp(16px, 2.5vw, 32px) !important;
    border-right: 1px solid rgba(255, 105, 180, 0.14) !important;
    display: flex !important; flex-direction: column !important; justify-content: flex-end !important;
  }
  #setup-page > .section:has(.players-row) {
    grid-area: joueurs !important; margin-bottom: clamp(10px, 1.6vh, 18px) !important;
  }
  #setup-page > .section:has(.game-type-row) {
    grid-area: game !important; margin-bottom: clamp(10px, 1.6vh, 18px) !important;
  }
  #setup-page > .section:has(.toggle-card) {
    grid-area: toggle !important; margin-bottom: 0 !important;
    display: flex !important; align-items: flex-end !important;
  }
  #setup-page > .cta-wrap {
    grid-area: cta !important; width: 100% !important;
    padding-top: clamp(8px, 1.2vh, 14px) !important; margin-top: 0 !important;
  }
  #setup-page #setupNextBtn { padding: 0.82rem 2rem !important; font-size: clamp(1rem, 1.8vh, 1.15rem) !important; }
  #setup-page .gender-btn { padding: 10px 8px !important; font-size: 1.05rem !important; }
  #setup-page .theme-row { justify-content: center !important; gap: 10px !important; }
  #setup-page .theme-btn { width: 44px !important; height: 44px !important; }
  #setup-page .toggle-card { width: 100% !important; }
  #infoBtn { top: max(env(safe-area-inset-top, 0px) + 6px, 14px) !important; }

  /* ── Splash horizontal en paysage ── */
  .splash-content {
    flex-direction: row !important;
    gap: clamp(20px, 4vw, 40px) !important;
    align-items: center !important;
  }
  .splash-logo { width: clamp(60px, 9vh, 80px) !important; height: clamp(60px, 9vh, 80px) !important; flex-shrink: 0 !important; }
  .splash-title { font-size: clamp(1.5rem, 4.5vh, 2rem) !important; }

  /* ── dice-setup.html / progressive-setup.html ── */

  #dice-page,
  #prog-page {
    padding-top: max(env(safe-area-inset-top, 0px) + 6px, 18px) !important;
    padding-left: max(env(safe-area-inset-left, 0px) + 12px, 20px) !important;
    padding-right: max(env(safe-area-inset-right, 0px) + 12px, 20px) !important;
  }
  .dice-header, .prog-header {
    padding-top: 0 !important;
    margin-bottom: 0.8rem !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    justify-content: center !important;
  }
  .dice-logo, .prog-logo {
    width: 40px !important; height: 40px !important;
    animation: none !important; margin-bottom: 0 !important;
  }
  .dice-title, .prog-title { font-size: clamp(1.7rem, 3vw, 2.2rem) !important; margin: 0 !important; }
  .dice-subtitle, .prog-subtitle { display: none !important; }
  .players-row { flex-direction: row !important; gap: 16px !important; }
  .gender-btn { width: 70px !important; height: 70px !important; font-size: 2.6rem !important; line-height: 70px !important; }
  #ia-levels-slot, #cc-ia-row { width: 100% !important; box-sizing: border-box !important; }
  #diceBackBtn, #progBackBtn { top: max(env(safe-area-inset-top, 0px) + 6px, 14px) !important; }
  #heatStart, #startBtn, .start-btn {
    padding: 0.9rem 2.2rem !important;
    font-size: 1.1rem !important;
    margin-top: 0.6rem !important;
    margin-bottom: 0.6rem !important;
  }

  /* ── game.html ── */

  #game {
    padding-top: max(env(safe-area-inset-top, 0px) + 6px, 16px) !important;
    padding-left: max(env(safe-area-inset-left, 0px) + 12px, 20px) !important;
    padding-right: max(env(safe-area-inset-right, 0px) + 12px, 20px) !important;
  }
  #game .players-row { flex-direction: row !important; gap: 20px !important; }
  .dice-display { font-size: clamp(3.5rem, 8vw, 5rem) !important; }
  .action-text,
  #game .action-card,
  #game .action-display { max-height: 30vh !important; overflow-y: auto !important; }
  #game .btn-roll, #game .btn-next, #game .action-btn {
    padding: 0.9rem 2rem !important; font-size: 1.1rem !important;
  }

  /* ── cards.html ── */

  #game-root {
    padding-left:  max(env(safe-area-inset-left,  0px) + 4px, 8px) !important;
    padding-right: max(env(safe-area-inset-right, 0px) + 4px, 8px) !important;
    overflow: hidden !important;
  }
  #game-header { padding-top: max(env(safe-area-inset-top, 0px) + 4px, 10px) !important; min-height: 50px !important; }
  #play-zone {
    flex: 2 1 0 !important; min-height: 0 !important; overflow: hidden !important;
    display: flex !important; flex-direction: row !important;
    justify-content: center !important; align-items: center !important;
    gap: 0 !important; padding: 6px 24px 10px !important;
  }
  #discard-pile { max-width: min(48vw, 300px) !important; flex: 0 0 auto !important; }
  #discard-stack { width: min(46vw, 280px) !important; min-height: min(69vw, 420px) !important; }
  #deck-pile {
    margin-left: min(8vw, 64px) !important; margin-right: max(3vw, 16px) !important;
    padding-top: 0 !important; flex-shrink: 0 !important;
  }
  .deck-card-visual { width: clamp(56px, 9vw, 76px) !important; }
  #top-discard .card-action {
    font-size: clamp(1.05rem, 2.4vw, 1.4rem) !important;
    padding: 14px 16px 18px !important; line-height: 1.65 !important;
  }
  #top-discard .card-die-hearts { font-size: 0.9rem !important; }
  #top-discard .card-die-sym    { width: 42px !important; height: 42px !important; font-size: 1.55rem !important; }
  #top-discard .card-table-badge { font-size: 0.76rem !important; }
  #top-discard .card-dice-bar   { padding: 9px 13px 7px !important; gap: 11px !important; }
  #hand-section {
    flex-shrink: 0 !important; height: 27vh !important; max-height: 27vh !important; overflow: hidden !important;
    padding-left:  max(env(safe-area-inset-left,  0px) + 8px, 10px) !important;
    padding-right: max(env(safe-area-inset-right, 0px) + 8px, 10px) !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px) + 6px, 8px) !important;
  }
  /* Ligne unique quelle que soit le nombre de cartes (1–8) */
  #hand-cards {
    grid-template-columns: unset !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 1fr !important;
    gap: 5px !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  #hand-cards .hand-card-wrap {
    aspect-ratio: unset !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  /* ── Grille main : centrage + proportions carte (2:3) pour peu de cartes ── */
  /* Hauteur hand-section ≈ 27vh → largeur idéale par carte = 27vh × (2/3) = 18vh */
  #hand-cards[data-count="1"] {
    max-width: 18vh !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  #hand-cards[data-count="2"] {
    max-width: calc(36vh + 5px) !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  #hand-cards[data-count="3"] {
    max-width: calc(54vh + 10px) !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  #hand-cards[data-count="4"] {
    max-width: calc(72vh + 15px) !important;
    margin-left: auto !important; margin-right: auto !important;
  }

  /* ── Texte cartes main — centré verticalement, adaptatif ── */
  #hand-cards .card-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-line-clamp: unset !important;
    font-family: 'Playfair Display', serif !important;
    line-height: 1.5 !important;
    color: rgba(240, 210, 235, 0.94) !important;
    text-align: center !important;
    /* Padding-bottom large pour réserver l'espace du bouton "i"
       (22-26px + marges = ~36px). Sans ça le texte clampé se
       faisait recouvrir par le bouton. */
    padding: 8px 10px 38px !important;
    letter-spacing: 0.01em !important;
    overflow: hidden !important;
    /* défaut ≥ 7 cartes */
    font-size: 0.93rem !important;
  }
  /* Le span interne porte un clamp qui évite que le texte ne
     se glisse sous le bouton "i". Le nombre de lignes autorisées
     s'adapte à la taille de police ci-dessous. */
  #hand-cards .card-action > span {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    -webkit-line-clamp: 5 !important;
  }
  #hand-cards[data-count="6"] .card-action { font-size: 1.06rem !important; }
  #hand-cards[data-count="4"] .card-action,
  #hand-cards[data-count="5"] .card-action { font-size: 1.2rem !important; }
  #hand-cards[data-count="2"] .card-action,
  #hand-cards[data-count="3"] .card-action { font-size: 1.38rem !important; }
  #hand-cards[data-count="1"] .card-action { font-size: 1.5rem !important; }
  /* Moins de lignes quand la police est plus grosse (cartes peu nombreuses) */
  #hand-cards[data-count="4"] .card-action > span,
  #hand-cards[data-count="5"] .card-action > span,
  #hand-cards[data-count="6"] .card-action > span { -webkit-line-clamp: 6 !important; }
  #hand-cards[data-count="2"] .card-action > span,
  #hand-cards[data-count="3"] .card-action > span { -webkit-line-clamp: 7 !important; }
  #hand-cards[data-count="1"] .card-action > span { -webkit-line-clamp: 8 !important; }

  #hand-cards .card-dice-bar { padding: 5px 7px 4px !important; gap: 5px !important; }
  #hand-cards .card-die-sym  { width: 22px !important; height: 22px !important; font-size: 0.86rem !important; }
  #hand-cards .card-die-hearts { font-size: 0.62rem !important; padding: 2px 4px !important; }
  #hand-cards .card-table-badge { font-size: 0.62rem !important; }
  #turn-banner { padding: 3px 14px !important; }
  #action-bar {
    padding: 5px 16px !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px) + 5px, 8px) !important;
    gap: 8px !important;
  }
  #hand-divider { margin: 0 14px !important; }

  /* ── Carte sélectionnée en paysage : pas de translateY qui ferait
     déborder la carte hors de la zone main (overflow: hidden).
     On utilise juste un scale + glow pour signaler la sélection. ── */
  #hand-cards .game-card.selected {
    transform: scale(1.04) !important;
    z-index: 5 !important;
  }
  /* Laisse respirer la carte sélectionnée dans son wrap */
  #hand-section { overflow: visible !important; }
  #hand-cards   { overflow: visible !important; }
  #turn-title       { font-size: clamp(1.4rem, 3.5vw, 1.85rem) !important; }
  #turn-banner-text { font-size: clamp(1.2rem, 3vw, 1.55rem) !important; }
  #win-scroll { padding: 40px 0 28px !important; gap: 14px !important; }
  #win-cards-grid { grid-template-columns: repeat(3, 1fr) !important; padding: 0 20px !important; gap: 14px !important; }
  .win-btn-row { padding: 0 24px !important; }

  /* ── Partagés ── */

  #hearts-canvas { opacity: 0.3 !important; }
  .splash-logo { width: 72px !important; height: 72px !important; }
  .duo-modal > div,
  #helpModal > div, #rules-modal > div, #action-modal > div,
  #levels-modal > div, #win-modal > div, #lm-page {
    max-height: 90dvh !important; overflow-y: auto !important;
  }
  .section { margin-bottom: 10px !important; }

}


/* ── iPad Pro / Mac paysage large — classe JS ── */

html.landscape #discard-pile  { max-width: min(28vw, 240px) !important; }
html.landscape #discard-stack {
  width: min(18vw, 200px) !important;
  min-height: 0 !important;
  max-height: 100% !important;
}
html.landscape .deck-card-visual { width: clamp(64px, 8.5vw, 92px) !important; }
html.landscape #deck-pile        { margin-left: min(10vw, 90px) !important; }
html.landscape #hand-section     { height: 30vh !important; max-height: 30vh !important; }

/* ──────────────────────────────────────────────────────────────────────────
   Écran de victoire en paysage — cartes plus grandes, forme de carte
   respectée (ratio 2:3), meilleure occupation de l'espace vertical.
   ────────────────────────────────────────────────────────────────────────── */
html.landscape #win-cards-grid {
  /* 3 colonnes → 6 cartes = 3×2 rangées, chaque carte est large
     et bien lisible au lieu d'un 4×2 qui laisse une rangée orpheline. */
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px 22px !important;
  /* Contraint la largeur totale → les cartes ne deviennent pas trop
     larges sur grand écran iPad Pro paysage, et le ratio reste joli. */
  max-width: min(82vw, 920px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  /* Hauteur adaptative calée sur la hauteur dispo de l'écran de victoire */
  align-content: center !important;
}

html.landscape .win-pick-wrap {
  /* Forme de carte — plus haute que large */
  aspect-ratio: 2 / 3 !important;
  /* Limite pour que les cartes ne deviennent pas gigantesques quand
     il n'y en a que 3 ou 4 à distribuer (2 rangées hautes). */
  max-height: min(42vh, 380px) !important;
  /* Laisse le grid calculer la largeur — on ne force rien */
  display: flex !important;
  flex-direction: column !important;
  justify-self: center !important;
  width: 100% !important;
}

/* Agrandir texte et dés pour remplir la plus grande carte */
html.landscape .win-card-bar {
  padding: 12px 14px 10px !important;
  font-size: 1.02rem !important;
}
html.landscape .win-card-text {
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  padding: 14px 16px 18px !important;
  -webkit-line-clamp: 7 !important;
}

/* Petite compensation pour très petit iPad / iPad mini paysage :
   6 cartes en 3×2 prennent trop de hauteur → on revient à 4×2 compact. */
@media (max-height: 760px) {
  html.landscape #win-cards-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: min(88vw, 980px) !important;
    gap: 12px 14px !important;
  }
  html.landscape .win-pick-wrap {
    max-height: min(36vh, 300px) !important;
  }
  html.landscape .win-card-bar  { font-size: 0.92rem !important; padding: 10px 12px 8px !important; }
  html.landscape .win-card-text { font-size: 0.94rem !important; padding: 12px 14px 16px !important; -webkit-line-clamp: 6 !important; }
}

/* Règles compactes pour iPad en paysage à hauteur réduite — inchangées */
@media not (min-height: 800px) {
  html.landscape #discard-pile  { max-width: min(24vw, 220px) !important; }
  html.landscape #discard-stack { width: min(16vw, 180px) !important; min-height: 0 !important; max-height: 100% !important; }
  html.landscape .deck-card-visual { width: clamp(56px, 9vw, 76px) !important; }
  html.landscape #deck-pile { margin-left: min(8vw, 64px) !important; }
  html.landscape #hand-section { height: 27vh !important; max-height: 27vh !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   iPad PORTRAIT — index.html (page de configuration)
   Cible : tablettes en portrait (min-width ≥ 700px, min-height ≥ 900px)
   Objectif : distribuer l'espace vertical pour occuper tout l'écran,
   sans scroll, en agrandissant les éléments proportionnellement.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (orientation: portrait) and (min-width: 700px) and (min-height: 900px) {

  /* ── Page : flex-column qui remplit exactement l'écran sans scroll ── */
  #setup-page {
    justify-content: space-between !important;
    overflow: hidden !important;
    padding-left:  clamp(32px, 5vw, 64px) !important;
    padding-right: clamp(32px, 5vw, 64px) !important;
    gap: 0 !important;
  }

  /* ── Hero : logo + titre plus grands, moins de padding bas ── */
  #setup-page .app-hero {
    padding: 0 0 clamp(16px, 2.5vh, 28px) !important;
    flex-shrink: 0 !important;
  }

  #setup-page .app-logo {
    width:  clamp(96px, 13vw, 130px) !important;
    height: clamp(96px, 13vw, 130px) !important;
    margin-bottom: 16px !important;
  }

  #setup-page .app-title {
    font-size: clamp(2.6rem, 6vw, 3.4rem) !important;
    margin-bottom: 8px !important;
  }

  #setup-page .app-subtitle {
    font-size: clamp(0.9rem, 1.4vw, 1.05rem) !important;
  }

  /* ── Sections : flex:1 pour absorber l'espace restant ── */
  #setup-page > .section {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
    /* Petite marge entre sections via padding-bottom */
    padding-bottom: clamp(8px, 1.2vh, 16px) !important;
  }

  /* Label de section — un peu plus grand */
  #setup-page .section-label {
    font-size: 0.88rem !important;
    margin-bottom: 12px !important;
  }

  /* ── Joueurs : cartes plus hautes ── */
  #setup-page .player-card {
    padding: 20px 18px !important;
    gap: 16px !important;
  }

  #setup-page .gender-btn {
    padding: 14px 10px !important;
    font-size: 1.2rem !important;
  }

  #setup-page .name-input {
    padding: 14px 16px !important;
    font-size: 16px !important; /* ≥16px pour éviter zoom iOS */
  }

  /* ── Type de jeu : boutons plus hauts ── */
  #setup-page .game-type-btn {
    padding: 20px 12px !important;
    gap: 8px !important;
  }

  #setup-page .game-type-btn .gt-icon  { font-size: 1.9rem !important; }
  #setup-page .game-type-btn .gt-label { font-size: 0.95rem !important; }
  #setup-page .game-type-btn .gt-desc  { font-size: 0.88rem !important; }

  /* ── Ambiance : pastilles plus grandes ── */
  #setup-page .theme-row {
    gap: 18px !important;
  }

  #setup-page .theme-btn {
    width:  clamp(52px, 7vw, 68px) !important;
    height: clamp(52px, 7vw, 68px) !important;
  }

  /* ── Toggle dés ── */
  #setup-page .toggle-card {
    padding: 18px 20px !important;
  }

  #setup-page .toggle-title { font-size: 1rem !important; }
  #setup-page .toggle-sub   { font-size: 0.86rem !important; }

  /* ── CTA : bouton Suivant plus généreux ── */
  #setup-page .cta-wrap {
    flex-shrink: 0 !important;
    padding-top: clamp(12px, 1.8vh, 22px) !important;
    margin-top: 0 !important;
    padding-bottom: clamp(16px, 2.5vh, 28px) !important;
  }

  #setup-page #setupNextBtn {
    padding: 1.2rem 2rem !important;
    font-size: clamp(1.05rem, 1.8vw, 1.2rem) !important;
    max-width: 420px !important;
  }

  /* ── Bouton info ── */
  #infoBtn {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.1rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Modal "Mes actions personnalisées" — iPad PORTRAIT
   Cible : tablettes en portrait (min-width ≥ 700px, min-height ≥ 900px)
   Objectif : modal plus large, texte et chips plus lisibles.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (orientation: portrait) and (min-width: 700px) and (min-height: 900px) {

  .cc-content {
    width: min(88vw, 580px) !important;
    padding: 48px 36px 36px !important;
  }

  .cc-emoji  { font-size: 3.4rem !important; margin-bottom: 10px !important; }
  .cc-title  { font-size: 1.6rem !important; }
  .cc-desc   { font-size: 0.95rem !important; margin-bottom: 20px !important; }

  .cc-section-label { font-size: 0.88rem !important; margin-top: 20px !important; }

  .cc-chip       { padding: 12px 10px !important; }
  .cc-chip-emoji { font-size: 1.4rem !important; }
  .cc-chip-label { font-size: 0.9rem !important; }
  .cc-chip-desc  { font-size: 0.85rem !important; }

  .cc-heat-btn   { padding: 14px 12px !important; }
  .cc-heat-emoji { font-size: 1.6rem !important; }
  .cc-heat-name  { font-size: 0.95rem !important; }
  .cc-heat-desc  { font-size: 0.88rem !important; }

  .cc-textarea {
    font-size: 1rem !important;
    min-height: 100px !important;
    padding: 14px 18px !important;
  }

  .cc-btn-generate {
    padding: 18px 24px !important;
    font-size: 1.1rem !important;
    margin-top: 20px !important;
  }

  .cc-existing-notice { font-size: 0.88rem !important; padding: 10px 14px !important; }
  .cc-legal           { font-size: 0.87rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Modal "Mes actions personnalisées" — iPad PAYSAGE
   Cible : tablettes en paysage (min-height ≥ 600px) — iPhone exclu.
   Layout 3 bandes (même structure que portrait Pro 13") :
     Ligne 1 (pleine largeur) → Header
     Ligne 2 (2 colonnes)     → Ambiance | Accessoire
     Ligne 3 (pleine largeur) → Détails
     Ligne 4 (pleine largeur) → Intensité en 4 colonnes
     Ligne 5 (pleine largeur) → Notice + CTA + Legal
   ═══════════════════════════════════════════════════════════════════════════ */

@media (orientation: landscape) and (min-height: 600px) {

  /* ── Boîte modale — large, grid 2 colonnes ── */
  .cc-content {
    width: min(90vw, 800px) !important;
    max-height: 88dvh !important;
    padding: 36px 32px 28px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-flow: row dense !important;
    column-gap: 28px !important;
    align-items: start !important;
    text-align: left !important;
  }

  /* Descriptions des chips masquées en paysage — labels + emojis suffisent,
     et le texte long faisait gonfler les chips sur une colonne étroite */
  .cc-chip-desc { display: none !important; }

  /* ── Header : pleine largeur ── */
  .cc-content > .cc-close,
  .cc-content > .cc-halo,
  .cc-content > .cc-emoji,
  .cc-content > .cc-title,
  .cc-content > .cc-desc {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }

  /* ── Ligne 2 col gauche : Ambiance ── */
  .cc-content > .cc-section-label:has(+ #ccThemeGrid),
  .cc-content > #ccThemeGrid {
    grid-column: 1 !important;
    /* Séparateur vertical entre Ambiance et Accessoire */
    padding-right: 20px !important;
    border-right: 1px solid rgba(180, 80, 255, 0.2) !important;
  }

  /* ── Ligne 2 col droite : Accessoire ── */
  .cc-content > .cc-section-label:has(+ #ccAccGrid),
  .cc-content > #ccAccGrid {
    grid-column: 2 !important;
  }

  /* ── Lignes 3+ : pleine largeur — Détails, Intensité, CTA ── */
  .cc-content > .cc-section-label:has(+ #ccPrompt),
  .cc-content > #ccPrompt,
  .cc-content > .cc-chars,
  .cc-content > .cc-section-label:has(+ .cc-heat-grid),
  .cc-content > .cc-heat-grid,
  .cc-content > .cc-prog-journey,
  .cc-content > .cc-rhythm-option,
  .cc-content > .cc-existing-notice,
  .cc-content > .cc-btn-generate,
  .cc-content > .cc-legal {
    grid-column: 1 / -1 !important;
  }

  /* ── Intensité : 4 colonnes sur toute la largeur ── */
  .cc-content > .cc-heat-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    margin-bottom: 10px !important;
  }

  /* ── Accessoire : 3 colonnes dans sa demi-largeur ── */
  .cc-content > #ccAccGrid.cc-chip-grid--3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* ── Header compact en paysage ── */
  .cc-emoji { font-size: 2.2rem !important; margin-bottom: 4px !important; }
  .cc-title { font-size: 1.28rem !important; margin-bottom: 6px !important; }
  .cc-desc  {
    font-size: 0.84rem !important;
    margin-bottom: 10px !important;
    /* Séparateur visuel entre header et colonnes */
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(180, 80, 255, 0.15) !important;
  }

  /* ── Labels de section ── */
  .cc-section-label {
    font-size: 0.78rem !important;
    margin-top: 14px !important;
    margin-bottom: 7px !important;
  }
  .cc-section-label:first-of-type { margin-top: 0 !important; }

  /* ── Chips Ambiance/Accessoire ── */
  .cc-chip       { padding: 9px 7px !important; }
  .cc-chip-emoji { font-size: 1.15rem !important; }
  .cc-chip-label { font-size: 0.77rem !important; }
  .cc-chip-desc  { font-size: 0.71rem !important; line-height: 1.25 !important; }
  .cc-chip-grid  { gap: 7px !important; }

  /* ── Boutons Intensité ── */
  .cc-heat-btn   { padding: 10px 8px !important; }
  .cc-heat-grid  { gap: 8px !important; }
  .cc-heat-emoji { font-size: 1.25rem !important; }
  .cc-heat-name  { font-size: 0.82rem !important; }
  .cc-heat-desc  { font-size: 0.74rem !important; line-height: 1.3 !important; }

  /* ── Textarea Détails ── */
  .cc-textarea {
    min-height: 80px !important;
    font-size: 0.9rem !important;
    padding: 10px 13px !important;
  }
  .cc-chars { font-size: 0.74rem !important; margin-bottom: 0 !important; }

  /* ── CTA ── */
  .cc-btn-generate {
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
    margin-top: 14px !important;
    margin-bottom: 8px !important;
  }

  .cc-existing-notice { font-size: 0.76rem !important; }
  .cc-legal           { font-size: 0.76rem !important; }


  /* ── iPad mini paysage (hauteur ≤ 800px) : header encore plus compact ── */
  @media (max-height: 800px) {
    .cc-emoji { display: none !important; }
    .cc-title { font-size: 1.15rem !important; margin-bottom: 4px !important; }
    .cc-desc  { font-size: 0.80rem !important; margin-bottom: 8px !important; padding-bottom: 12px !important; }
    .cc-content { padding: 28px 28px 22px !important; }
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   iPad Pro 13" portrait (min-width ≥ 1000px, portrait)
   Layout :
     Ligne 1 (pleine largeur) → Header
     Ligne 2 (2 colonnes)     → Ambiance | Accessoire
     Ligne 3 (pleine largeur) → Détails (textarea)
     Ligne 4 (pleine largeur) → Intensité en 4 colonnes
     Ligne 5 (pleine largeur) → Notice + CTA + Legal
   ═══════════════════════════════════════════════════════════════════════════ */

@media (orientation: portrait) and (min-width: 1000px) {

  /* ── Boîte modale — large, grid 2 colonnes ── */
  .cc-content {
    width: min(80vw, 820px) !important;
    max-height: 90dvh !important;
    padding: 44px 40px 36px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* dense : remonte le label Accessoire dans la ligne du label Ambiance
       au lieu de le laisser glisser sous les chips Ambiance */
    grid-auto-flow: row dense !important;
    column-gap: 28px !important;
    align-items: start !important;
    text-align: left !important;
  }

  /* ── Ligne 1 : Header pleine largeur ── */
  .cc-content > .cc-close,
  .cc-content > .cc-halo,
  .cc-content > .cc-emoji,
  .cc-content > .cc-title,
  .cc-content > .cc-desc {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }

  .cc-content > .cc-desc {
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(180, 80, 255, 0.15) !important;
    margin-bottom: 4px !important;
  }

  /* ── Ligne 2 col gauche : Ambiance ── */
  .cc-content > .cc-section-label:has(+ #ccThemeGrid),
  .cc-content > #ccThemeGrid {
    grid-column: 1 !important;
    /* Séparateur vertical entre Ambiance et Accessoire */
    padding-right: 28px !important;
    border-right: 1px solid rgba(180, 80, 255, 0.2) !important;
  }

  /* ── Ligne 2 col droite : Accessoire ── */
  .cc-content > .cc-section-label:has(+ #ccAccGrid),
  .cc-content > #ccAccGrid {
    grid-column: 2 !important;
  }

  /* ── Lignes 3-5 : pleine largeur ── */
  .cc-content > .cc-section-label:has(+ #ccPrompt),
  .cc-content > #ccPrompt,
  .cc-content > .cc-chars,
  .cc-content > .cc-section-label:has(+ .cc-heat-grid),
  .cc-content > .cc-heat-grid,
  .cc-content > .cc-prog-journey,
  .cc-content > .cc-rhythm-option,
  .cc-content > .cc-existing-notice,
  .cc-content > .cc-btn-generate,
  .cc-content > .cc-legal {
    grid-column: 1 / -1 !important;
  }

  /* ── Intensité : 4 colonnes sur toute la largeur ── */
  .cc-content > .cc-heat-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    margin-bottom: 12px !important;
  }

  /* ── Accessoire : 3 colonnes dans sa demi-largeur ── */
  .cc-content > #ccAccGrid.cc-chip-grid--3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* ── Typographie agrandie ── */
  .cc-emoji  { font-size: 3.2rem !important; }
  .cc-title  { font-size: 1.75rem !important; }
  .cc-desc   { font-size: 1rem !important; }

  .cc-section-label {
    font-size: 0.88rem !important;
    margin-top: 18px !important;
    margin-bottom: 8px !important;
  }
  .cc-section-label:first-of-type { margin-top: 0 !important; }

  /* ── Chips ── */
  .cc-chip       { padding: 12px 8px !important; }
  .cc-chip-emoji { font-size: 1.35rem !important; }
  .cc-chip-label { font-size: 0.88rem !important; }
  .cc-chip-desc  { font-size: 0.82rem !important; }

  /* ── Boutons Intensité (4 cols → plus larges) ── */
  .cc-heat-btn   { padding: 14px 10px !important; }
  .cc-heat-emoji { font-size: 1.5rem !important; }
  .cc-heat-name  { font-size: 0.95rem !important; }
  .cc-heat-desc  { font-size: 0.84rem !important; }

  /* ── Textarea ── */
  .cc-textarea {
    font-size: 1rem !important;
    min-height: 88px !important;
    padding: 14px 16px !important;
  }
  .cc-chars { margin-bottom: 4px !important; }

  /* ── CTA ── */
  .cc-btn-generate {
    padding: 18px 24px !important;
    font-size: 1.1rem !important;
    margin-top: 16px !important;
  }

  .cc-existing-notice { font-size: 0.88rem !important; }
  .cc-legal           { font-size: 0.87rem !important; text-align: center !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modal "Mes actions personnalisées" — Retouches globales (iPad + Mac)
   Appliqué sur tous les breakpoints de landscape.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Flamme rose pour le niveau Doux (heat=0) ── */
/* Même filtre que .flame-pink dans dice-setup.html */
.cc-heat-btn[data-heat="0"] .cc-heat-emoji {
  filter: hue-rotate(300deg) saturate(1.4) !important;
}

/* ── Notice "Cinq niveaux IA" : centrée et auto-dimensionnée ── */
.cc-existing-notice {
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* ── Bouton fermer : plus grand et plus facile à toucher ── */
.cc-close {
  font-size: 1.3rem !important;
  padding: 8px 14px !important;
  top: 14px !important;
  right: 16px !important;
}