/* ═══════════════════════════════════════════════════════════════════════════
   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)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTONS RETOUR — règles GLOBALES (toutes orientations).
   Tap target élargi à 48 × 48 visuel + zone tactile invisible étendue
   (≈68 × 68 effective) pour respecter Apple HIG (44pt min, 60pt confortable)
   et éviter les ratés sur les boutons « ← » de chaque page.
   Cible : la classe partagée .ds-back-btn (ds-ui.css), + anciens IDs encore
   en place (#lmBackBtn, #back-btn de cards). Tous les boutons retour des
   jeux passent désormais par .ds-back-btn → taille/zone tactile identiques.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Standard (60×60, retrait, z-index, zone tactile, :active) → ds-ui.css sur
   .ds-back-btn. Ici, uniquement #back-btn / #lmBackBtn de cards.html qui
   n'utilisent pas la classe partagée → même taille/zone tactile que les autres. */
#lmBackBtn,
#back-btn {
  width: 60px !important;
  height: 60px !important;
  left: clamp(14px, 2.4vw, 22px) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  /* z-index élevé (600) pour passer au-dessus du titre de tour, de la barre
     de progression (500) et autres éléments — sinon le bas du bouton est
     recouvert et seul le haut reste cliquable. */
  z-index: 600 !important;
}
/* La zone tactile invisible s'étend de 20 px supplémentaires → 100×100
   effectif. Plus de raté possible sur iPhone, même avec coque. */
#lmBackBtn::after,
#back-btn::after {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
/* Retour visuel net au tap pour confirmer le clic même quand on touche la
   zone étendue invisible. */
#lmBackBtn:active,
#back-btn:active {
  transform: scale(0.92);
}

@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
     ──────────────────────────────────────────────────────────────────── */

  /* Accueil en 2 étapes : une seule étape visible → #setup-page centre
     l'étape active (voir bloc « Accueil en 2 étapes » en fin de fichier). */
  #setup-page {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: none !important;
    margin: 0 !important;
    padding: max(env(safe-area-inset-top, 0px) + 16px, 28px)
             max(env(safe-area-inset-right, 0px) + 24px, 40px)
             max(env(safe-area-inset-bottom, 0px) + 18px, 28px)
             max(env(safe-area-inset-left, 0px) + 24px, 40px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !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: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;  /* colle au centre via le row gap */
    padding-bottom: clamp(6px, 1vh, 14px) !important;
  }

  #setup-page > .section:has(.game-type-row) {
    grid-area: game !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: clamp(6px, 1vh, 14px) !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;
    /* En paysage (grille, tient sans scroller) : on annule le sticky/marges
       négatives/fond du mode portrait pour rester dans la cellule de grille. */
    position: static !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 0 !important;
    background: none !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-setup.html / progressive-setup.html — layout 2 colonnes ──
     Rangée 1 (full)   : header (logo+titre côte à côte) + tagline grande
     Rangée 2          : slider à GAUCHE, carte IA à DROITE
     Rangée 3 (full)   : CTA "Commencer la partie"
     Séparateur vertical discret entre les 2 colonnes (pseudo-élément). */
  #dice-page,
  #prog-page {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    grid-template-areas:
      "header  header"
      "slider  ia"
      "cta     cta" !important;
    column-gap: clamp(28px, 4vw, 64px) !important;
    row-gap: clamp(18px, 3vh, 36px) !important;
    align-items: stretch !important;
    max-width: clamp(900px, 94vw, 1280px) !important;
    margin: 0 auto !important;
    padding: max(env(safe-area-inset-top, 0px) + 18px, 32px)
             max(env(safe-area-inset-right, 0px) + 16px, 28px)
             max(env(safe-area-inset-bottom, 0px) + 22px, 32px)
             max(env(safe-area-inset-left, 0px) + 16px, 28px) !important;
    min-height: 100dvh !important;
    position: relative !important;
  }
  /* Séparateur vertical discret entre les 2 colonnes (rangée du milieu).
     `bottom` plus généreux sur #prog-page : son footer est plus haut
     (rythme + résumé + bouton) que celui de dice-setup. */
  #dice-page::before,
  #prog-page::before {
    content: '';
    position: absolute;
    top: clamp(120px, 18vh, 220px);
    bottom: clamp(90px, 12vh, 160px);
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg,
      transparent,
      color-mix(in srgb, var(--lvs-accent, #ff70c7) 40%, transparent) 18%,
      color-mix(in srgb, var(--lvs-accent, #ff70c7) 40%, transparent) 82%,
      transparent);
    pointer-events: none;
    z-index: 0;
  }
  /* Progressif : footer = chips rythme + résumé + bouton ≈ 200-280 px.
     On remonte la base du séparateur en conséquence pour ne plus couper
     le texte du résumé / le bouton. */
  #prog-page::before {
    bottom: clamp(220px, 30vh, 320px);
  }
  /* Quand une carte « Édition saisonnière » est présente sous le CTA, on
     remonte fortement la base du séparateur pour qu'il s'arrête bien
     au-dessus du bloc CTA + carte (sinon il transparaît au centre). */
  #dice-page.ds-has-seasonal::before { bottom: clamp(230px, 34vh, 360px); }
  #prog-page.ds-has-seasonal::before { bottom: clamp(330px, 46vh, 460px); }

  /* Quand une carte saisonnière est présente : on insère une rangée dédiée
     « saison » AVANT la rangée « cta », pour que le bouton de lancement passe
     SOUS le niveau saisonnier (et reste pleine largeur). */
  #dice-page.ds-has-seasonal,
  #prog-page.ds-has-seasonal {
    grid-template-rows: auto 1fr auto auto !important;
    grid-template-areas:
      "header  header"
      "slider  ia"
      "saison  saison"
      "cta     cta" !important;
  }
  #dice-page.ds-has-seasonal #dsSeasonalCard,
  #prog-page.ds-has-seasonal #dsSeasonalCard {
    grid-area: saison !important;
    justify-self: center !important;
  }
  /* La rangée saison ajoute de la hauteur : on rend la PAGE défilante (et le
     body/html avec, sinon leur overflow:hidden coupe le bouton hors écran
     sur les paysages courts).
     ⚠️ Rustines réservées aux pages PAS ENCORE migrées sur setup-scroll.css
     (le système mutualisé rend la page défilante par construction, saison ou
     pas). dice-setup est migré → exclu via :not(.ds-setup-scroll). */
  html:has(.ds-has-seasonal:not(.ds-setup-scroll)) body,
  body:has(.ds-has-seasonal:not(.ds-setup-scroll)) {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100dvh !important;
  }
  #dice-page.ds-has-seasonal:not(.ds-setup-scroll),
  #prog-page.ds-has-seasonal:not(.ds-setup-scroll) {
    min-height: 100dvh !important;
    height: auto !important;
  }
  /* La carte saison reste compacte pour limiter la hauteur ajoutée. */
  #dice-page.ds-has-seasonal #dsSeasonalCard,
  #prog-page.ds-has-seasonal #dsSeasonalCard { margin-top: 4px !important; }
  /* En landscape, on n'utilise pas la pastille portrait sous le slider —
     on a un séparateur vertical + pastille centrale entre les deux
     colonnes (cf. règle juste en dessous). */
  .ia-card::before,
  .lvslider-section::after { display: none !important; }
  /* Restaure le margin-bottom normal */
  .lvslider-section { margin-bottom: 0 !important; }

  /* Pastille « OU » au centre du séparateur — signale que slider et carte
     IA sont deux choix alternatifs. */
  #dice-page::after,
  #prog-page::after,
  #lm-page::after {
    content: var(--i18n-or, 'OU');   /* --i18n-or posée par i18n.js (cf. level-slider.css) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(160deg,
      rgba(40, 0, 60, 0.95),
      rgba(20, 0, 30, 0.95));
    border: 1.5px solid color-mix(in srgb, var(--lvs-accent, #ff70c7) 55%, transparent);
    color: var(--lvs-accent, #ff70c7);
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-shadow: 0 0 12px var(--lvs-accent-glow, rgba(255,48,140,0.6));
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.45),
      0 0 18px color-mix(in srgb, var(--lvs-accent, #ff70c7) 30%, transparent);
    z-index: 2;
    pointer-events: none;
  }

  .dice-header,
  .prog-header {
    grid-area: header !important;
    padding-top: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    text-align: center !important;
    z-index: 1;
  }
  /* Ligne logo + titre — côte à côte */
  .dice-header-row,
  .prog-header-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(14px, 1.6vw, 22px) !important;
  }
  .dice-logo,
  .prog-logo {
    /* Logo dimensionné pour s'aligner visuellement avec la hauteur du
       titre (env. 1.05em du font-size). */
    width: clamp(64px, 1.4em, 110px) !important;
    height: clamp(64px, 1.4em, 110px) !important;
    margin: 0 !important;
    align-self: center !important;
    flex-shrink: 0 !important;
  }
  .dice-title,
  .prog-title {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem) !important;
    margin: 0 !important;
    line-height: 1 !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .dice-subtitle,
  .prog-subtitle { display: none !important; }
  /* Tagline plus visible en landscape — typo Playfair italique +
     étoiles décoratives gérées par le style de base. */
  .dice-tagline,
  .prog-tagline {
    margin-top: clamp(8px, 1.4vh, 14px) !important;
    font-size: clamp(1.05rem, 2vw, 1.4rem) !important;
  }

  /* Plaque + slider + stops : col GAUCHE, centrés verticalement.
     Padding-right pour éloigner du séparateur central (et de la pastille OU). */
  .lvslider-section,
  #dsIntensitySection {
    grid-area: slider !important;
    align-self: center !important;
    justify-self: stretch !important;
    margin: 0 !important;
    padding-right: clamp(24px, 3vw, 48px) !important;
    z-index: 1;
  }

  /* Carte IA : col DROITE, centrée verticalement.
     Padding-left symétrique → la pastille OU n'effleure jamais la carte. */
  .ia-card {
    grid-area: ia !important;
    align-self: center !important;
    justify-self: stretch !important;
    margin: 0 0 0 clamp(24px, 3vw, 48px) !important;
    width: calc(100% - clamp(24px, 3vw, 48px)) !important;
    max-width: none !important;
    z-index: 1;
  }

  /* Legacy sect-label restant : masqué en landscape aussi */
  .sect-label { display: none !important; }

  /* CTA pleine largeur (dice-setup). Pour progressif, le bouton est un
     enfant direct de #prog-page (sticky mutualisé, hors .prog-footer qui
     garde l'aire cta pour le rythme) → rangée implicite pleine largeur. */
  #dice-page .btn-wrap {
    grid-area: cta !important;
  }
  #prog-page > .btn-wrap {
    grid-column: 1 / -1 !important;
  }
  /* Pages migrées setup-scroll.css : le padding-bas de la grille fausserait
     le point d'ancrage du CTA sticky (il s'ancrerait 22-32px au-dessus du
     bord). ID+classe pour battre le padding !important du sélecteur #id.
     height forcée aussi : la règle paysage #lm-page pose height:auto
     !important, qui battrait le height:100dvh de .ds-setup-scroll. */
  #dice-page.ds-setup-scroll,
  #prog-page.ds-setup-scroll,
  #lm-page.ds-setup-scroll {
    padding-bottom: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  #dice-page .btn-wrap,
  #prog-page > .btn-wrap {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 1;
  }
  /* Progressive — footer centré qui s'applique aux DEUX choix (slider + IA). */
  .prog-footer {
    grid-area: cta !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    /* La rangée cta occupe tout l'espace restant (1fr, voir #prog-page ci-dessous).
       Le footer s'y étire et répartit : « nombre de lancers » EN HAUT (juste sous
       les cartes) et le bouton « Lancer » EN BAS, sans chevauchement. */
    align-self: stretch !important;
    justify-content: space-between !important;
    gap: 12px !important;
    z-index: 1;
  }
  /* Progressif paysage : cartes en rangée AUTO (donc collées en haut, sous
     l'en-tête → plus de grand vide au-dessus) et rangée cta en 1fr pour que le
     footer s'étire (menu en haut / bouton en bas). Scopé #prog-page : n'affecte
     ni dés, ni cartes, ni A/V. */
  #prog-page { grid-template-rows: auto auto 1fr !important; }
  /* Léger abaissement de la rangée slider/IA : collée tout en haut elle paraissait
     « montée trop haut ». On la descend d'un cran modéré. Le bouton reste en bas
     (footer cta en 1fr, space-between) → pas de chevauchement. Scopé #prog-page. */
  #prog-page .lvslider-section,
  #prog-page #dsIntensitySection,
  #prog-page .ia-card {
    margin-top: clamp(14px, 4vh, 48px) !important;
  }
  .prog-footer-rhythm {
    text-align: center;
  }
  .prog-footer .prog-rhythm-chips {
    justify-content: center !important;
  }
  .prog-footer .prog-launch-card .btn-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  #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: 0 !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;
    height: min(50vh, 420px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    flex-shrink: 1 !important;
  }
  .do-action-btn { bottom: 12px !important; padding: 12px 26px !important; }

  /* 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 en paysage : empilé (logo, « Flam », filet, tagline) ──
     La disposition horizontale (row) mettait tous ces éléments — qui sont
     des enfants directs — sur une seule ligne. On garde donc la colonne. */
  .splash-content {
    flex-direction: column !important;
    gap: clamp(10px, 2.5vh, 18px) !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,
  #win-modal > div {
    max-height: 90dvh !important;
    overflow-y: auto !important;
  }

  /* ── cards.html — modal #levels-modal en grid 2 colonnes (landscape) ──
     Même architecture que dice-setup : header full-width, slider à gauche,
     carte IA à droite, CTA full-width en bas. Séparateur vertical discret. */
  #lm-page {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    grid-template-areas:
      "header  header"
      "slider  ia"
      "cta     cta" !important;
    column-gap: clamp(28px, 4vw, 64px) !important;
    row-gap: clamp(18px, 3vh, 36px) !important;
    align-items: stretch !important;
    max-width: clamp(900px, 94vw, 1280px) !important;
    margin: 0 auto !important;
    padding: max(env(safe-area-inset-top, 0px) + 18px, 32px)
             max(env(safe-area-inset-right, 0px) + 16px, 28px)
             max(env(safe-area-inset-bottom, 0px) + 22px, 32px)
             max(env(safe-area-inset-left, 0px) + 16px, 28px) !important;
    height: auto !important;
    min-height: 100dvh !important;
    position: relative !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Séparateur vertical + pastille « OU » — gérés en commun plus haut
     (règles `#dice-page::before/after, #prog-page::before/after, #lm-page::before/after`).
     On ne déclare ici que le `::before` propre à #lm-page pour bénéficier
     de la même couleur theme-aware. */
  #lm-page::before {
    content: '';
    position: absolute;
    top: clamp(120px, 18vh, 220px);
    bottom: clamp(90px, 12vh, 160px);
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg,
      transparent,
      color-mix(in srgb, var(--lvs-accent, #ff70c7) 40%, transparent) 18%,
      color-mix(in srgb, var(--lvs-accent, #ff70c7) 40%, transparent) 82%,
      transparent);
    pointer-events: none;
    z-index: 0;
  }

  /* Header : logo + titre côte à côte, tagline étoilée dessous */
  .lm-header-new {
    grid-area: header !important;
    padding-top: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    text-align: center !important;
    z-index: 1;
  }
  .lm-header-new .dice-header-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(14px, 1.6vw, 22px) !important;
  }
  .lm-header-icon {
    font-size: clamp(2rem, 4.5vh, 2.8rem) !important;
    margin: 0 !important;
  }
  .lm-title-new {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem) !important;
    margin: 0 !important;
    line-height: 1.05 !important;
  }
  .lm-subtitle-new { display: none !important; }
  .lm-header-new .dice-tagline {
    margin-top: clamp(8px, 1.4vh, 14px) !important;
    font-size: clamp(1.05rem, 2vw, 1.4rem) !important;
  }

  /* Slider : colonne gauche, centrée verticalement */
  #lm-page .lvslider-section {
    grid-area: slider !important;
    align-self: center !important;
    justify-self: stretch !important;
    margin: 0 !important;
    padding-right: clamp(8px, 1vw, 18px) !important;
    z-index: 1;
  }

  /* Carte IA : colonne droite, centrée verticalement */
  #lm-page .ia-card {
    grid-area: ia !important;
    align-self: center !important;
    justify-self: stretch !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 1;
  }

  /* CTA pleine largeur */
  #lm-page .lm-btn-wrap {
    grid-area: cta !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 1;
  }

  /* Bouton retour calé au-dessus à gauche */
  #lmBackBtn {
    top: max(env(safe-area-inset-top, 0px) + 6px, 14px) !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: visible !important;   /* visible : requis pour le cube 3D (preserve-3d) */
  }

  /* 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.
     Padding plus généreux haut/bas pour laisser respirer le HALO
     dynamique de la carte centrale (jusqu'à ~100 px de spread sur les
     cartes 5-6 cœurs) — sinon il se fait couper par #game-root overflow. */
  #play-zone {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding-top: clamp(36px, 6vh, 80px) !important;
    padding-bottom: clamp(72px, 11vh, 110px) !important;   /* +bouton flottant */
  }

  /* 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. Auto-fit JS
     géré côté script.js / adaptHandCardFont si dispo ; ici on cap la
     taille raisonnable et on autorise jusqu'à 8 lignes pour ne plus
     couper le texte. */
  .card-action {
    font-size: clamp(0.78rem, 1.4vw, 0.98rem) !important;
    line-height: 1.4 !important;
    padding: 7px 9px 30px !important;     /* +padding-bottom pour le bouton "i" */
    -webkit-line-clamp: 8 !important;
    color: rgba(230, 200, 235, 0.92) !important;
  }
  /* Le span intérieur doit avoir le même line-clamp pour que la troncature
     apparaisse au bon endroit (sinon le parent clip et le texte se coupe
     en plein mot sans ellipse). */
  .card-action > span {
    -webkit-line-clamp: 8 !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é.
     Le bouton « Faire l'action » est désormais flottant au bas du
     #play-zone (cf. cards.html .do-action-btn), donc la carte peut
     occuper toute la hauteur du play-zone. */
  #discard-pile {
    max-width: clamp(180px, 44vw, 280px) !important;
  }
  #discard-stack {
    width: clamp(160px, 42vw, 260px) !important;
    /* Hauteur réduite pour laisser de la place au HALO en haut/bas
       (le halo dynamique peut atteindre ~100 px de spread). */
    height: clamp(220px, 42vh, 360px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    flex-shrink: 1 !important;
  }
  /* CTA premium « Faire l'action » : plus grand en landscape */
  .do-action-btn {
    bottom: 14px !important;
    padding: 13px 28px !important;
    font-size: 1.05rem !important;
  }

  /* 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: visible !important;   /* visible : requis pour le cube 3D (preserve-3d) */
  }
  .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 ── */

  /* Accueil en 2 étapes : une seule étape visible → #setup-page centre
     l'étape active (voir bloc « Accueil en 2 étapes » en fin de fichier). */
  #setup-page {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: none !important;
    margin: 0 !important;
    padding: max(env(safe-area-inset-top, 0px) + 16px, 28px)
             max(env(safe-area-inset-right, 0px) + 24px, 40px)
             max(env(safe-area-inset-bottom, 0px) + 18px, 28px)
             max(env(safe-area-inset-left, 0px) + 24px, 40px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !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 paysage (≥800px) : EMPILÉ comme le bloc 600px ──
     Auparavant `row` → tous les éléments (logo, « Flam », filet, tagline…)
     sur UNE seule ligne sur desktop web et grands iPad (viewport haut ≥800px,
     où ce bloc prime sur celui de 600px). On garde donc la colonne partout. */
  .splash-content {
    flex-direction: column !important;
    gap: clamp(10px, 2.5vh, 18px) !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-setup / progressive-setup : on NE redéfinit PAS la mise en page ici
     (header en row, padding spéciaux). Ces règles ont été déplacées dans le
     bloc `@media (orientation: landscape) and (min-height: 600px)` plus haut
     (lignes ~190+) où la grid 2-colonnes header / slider / IA / CTA est
     définie de façon cohérente. Toucher ce bloc revient à dupliquer
     (et casser) le layout. */
  .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: 0 !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;
    /* « safe » : si le texte est plus haut que la carte, on aligne en HAUT au
       lieu de centrer — sinon la 1re ligne se faisait rogner par le haut
       (vécu sur iPad paysage). Ignoré des vieux navigateurs → center. */
    align-items: safe 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(40vw, 330px) !important; }
html.landscape #discard-stack {
  width: min(38vw, 310px) !important;
  min-height: min(57vw, 465px) !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(48vw, 300px) !important; }
  html.landscape #discard-stack { width: min(46vw, 280px) !important; min-height: min(69vw, 420px) !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 0 !important;   /* bas à 0 → barre « Générer » sticky affleurante */
  }
  /* Barre pleine largeur (compense le padding latéral 36px). */
  .cc-content > .cc-generate-bar { margin: 6px -36px 0 !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;
  }

  /* Barre de génération : rangée « generate » dédiée (grid-area posée par
     custom-level.js) → toujours la DERNIÈRE rangée, placement déterministe
     même sur iPad WebKit (l'auto-placement order/dense la remontait en haut).
     position:sticky bottom:0 → le bouton « Générer » reste visible en bas
     même quand le contenu déborde (comme le CTA sticky en portrait).
     Marges négatives = padding paysage (28px latéral) pour un plein-cadre. */
  .cc-content > .cc-generate-bar {
    grid-column: 1 / -1 !important;
    position: sticky !important;
    bottom: 0 !important;
    margin: 8px -28px -22px !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;
}

/* ═══════════════════════════════════════════════════════════════════════
   Accueil en 2 étapes (joueurs ▸ jeux) — override paysage
   Placé en fin de fichier pour primer sur les anciens blocs #setup-page
   (qui ciblaient l'ancienne structure à plat, désormais nichée dans les
   .setup-step). Une seule étape visible → on exploite toute la largeur.
   ═══════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (min-height: 480px) {
  html #setup-page {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: none !important;
    margin: 0 !important;
    padding: max(env(safe-area-inset-top,0px) + 14px, 24px)
             max(env(safe-area-inset-right,0px) + 24px, 40px)
             max(env(safe-area-inset-bottom,0px) + 16px, 24px)
             max(env(safe-area-inset-left,0px) + 24px, 40px) !important;
    height: 100dvh !important; max-height: 100dvh !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html #setup-page > .setup-step { width: 100% !important; }
  /* L'étape masquée reste masquée (bat #stepGames{display:…!important}) */
  html #setup-page > .setup-step[hidden] { display: none !important; }

  /* ── ÉTAPE 1 : hero (gauche) + joueurs / CTA (droite) ── */
  html #stepPlayers {
    display: grid !important;
    grid-template-columns: clamp(240px, 36%, 420px) 1fr !important;
    grid-template-areas: "hero joueurs" "hero cta" !important;
    align-items: center !important;
    column-gap: clamp(28px, 5vw, 72px) !important;
    row-gap: clamp(10px, 2vh, 22px) !important;
    max-width: 1080px !important; margin: 0 auto !important;
  }
  #stepPlayers .app-hero {
    grid-area: hero !important; width: auto !important; height: 100% !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    border-right: 1px solid rgba(255,105,180,0.14) !important;
    padding-right: clamp(20px, 3vw, 44px) !important; margin: 0 !important;
  }
  #stepPlayers .app-logo { width: clamp(90px, 15vh, 148px) !important; height: clamp(90px, 15vh, 148px) !important; animation: heroFloat 4s ease-in-out infinite !important; }
  #stepPlayers .app-title { font-size: clamp(1.9rem, 5vh, 3rem) !important; text-align: center !important; margin: 0 !important; }
  #stepPlayers .app-subtitle { display: block !important; text-align: center !important; opacity: .7 !important; margin-top: 4px !important; }
  #stepPlayers > .section:has(.players-row) { grid-area: joueurs !important; margin: 0 !important; align-self: end !important; }
  #stepPlayers .players-row { justify-content: center !important; }
  #stepPlayers > .cta-wrap { grid-area: cta !important; align-self: start !important; width: 100% !important; margin: 0 !important; padding-top: clamp(8px,1.5vh,16px) !important; position: static !important; background: none !important; }
  #stepPlayers #toGamesBtn { max-width: 420px !important; }

  /* ── ÉTAPE 2 : chip + titre pleine largeur, jeux en grille 3 colonnes ── */
  html #stepGames { max-width: 1080px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; }
  #stepGames .games-top { max-width: none !important; }
  #stepGames > .section:has(.game-type-row) { margin: 0 !important; }
  #stepGames .game-type-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: clamp(14px, 2vw, 24px) !important; max-width: none !important; }
  /* Tuiles agrandies en paysage (on a la place) */
  html #stepGames .game-type-btn { min-height: clamp(158px, 30vh, 216px) !important; padding: 1.3rem 1rem !important; }
  html #stepGames .game-type-btn .gt-icon { width: 62px !important; height: 62px !important; font-size: 2rem !important; }
  html #stepGames .game-type-btn .gt-label { font-size: 1.05rem !important; }
}

/* ── Grand écran paysage (iPad et plus) : le contenu de l'accueil était
   minuscule et perdu au milieu d'un immense vide sur iPad — on agrandit
   nettement logo/titre/cartes/bouton au lieu d'ajouter du contenu. ── */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 480px) {
  html #stepPlayers { max-width: 1400px !important; column-gap: clamp(48px, 6vw, 96px) !important; }
  #stepPlayers .app-logo { width: clamp(140px, 18vh, 210px) !important; height: clamp(140px, 18vh, 210px) !important; }
  #stepPlayers .app-title { font-size: clamp(2.6rem, 6vh, 4rem) !important; }
  #stepPlayers .app-subtitle { font-size: clamp(1rem, 1.8vh, 1.2rem) !important; }
  #stepPlayers .players-sub { font-size: clamp(.95rem, 1.6vh, 1.1rem) !important; margin-bottom: 1.1rem !important; }
  #stepPlayers .player-card { padding: clamp(20px, 2.6vh, 30px) clamp(18px, 2vw, 26px) !important; gap: 18px !important; }
  #stepPlayers .gender-btn { padding: clamp(14px, 1.8vh, 20px) 10px !important; font-size: clamp(1.3rem, 2.4vh, 1.6rem) !important; }
  #stepPlayers .name-input { padding: clamp(14px, 1.8vh, 20px) 16px !important; font-size: clamp(1.05rem, 1.8vh, 1.2rem) !important; }
  #stepPlayers .players-amp { font-size: clamp(2rem, 4vh, 2.8rem) !important; }
  #stepPlayers #toGamesBtn { max-width: 520px !important; padding: clamp(1.05rem, 1.9vh, 1.4rem) 2rem !important; font-size: clamp(1.1rem, 1.9vh, 1.3rem) !important; }
  #stepPlayers .cta-reassurance { font-size: clamp(.85rem, 1.4vh, 1rem) !important; }

  html #stepGames { max-width: 1400px !important; }
}