* { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    height: 100%;
  }

  body {
    background: #000;
    color: #222;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
  }

  /* ---------- BARRE LATERALE (toujours noire, ne suit pas la texture choisie) ---------- */
  #sidebar {
    width: 260px;
    flex-shrink: 0;
    background: #000;
    border-right: 1px solid rgba(255,255,255,0.25);
    padding: 24px 20px;
  }

  #main-content {
    flex: 1;
    background: #000;
    display: flex;
    flex-direction: column;
  }

  #game-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
  }

  #credits {
    padding: 16px 24px;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: #888;
  }

  #credits a { color: #aaa; }
  #credits a:hover { color: #fff; }

  #sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
  }

  h1 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
  }

  #sidebar-title-row h1 {
    margin-bottom: 0;
  }

  #sidebar-collapse-toggle {
    flex-shrink: 0;
    background: none;
    border: 1px solid #444;
    color: #ccc;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
  }

  #sidebar-collapse-toggle:hover {
    border-color: #888;
    color: #fff;
  }

  #sidebar.collapsed {
    width: auto;
    padding: 24px 12px;
    overflow: hidden;
  }

  #sidebar.collapsed > *:not(#sidebar-title-row) {
    display: none;
  }

  #sidebar.collapsed #sidebar-title-row {
    justify-content: flex-start;
  }

  #sidebar.collapsed #sidebar-title-row h1 {
    display: none;
  }

  #toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 6px;
    font-size: 14px;
  }

  #toolbar button {
    font-size: 14px;
    padding: 6px 14px;
    border: 1px solid #999;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
  }

  #toolbar button:hover { background: #eaeaea; }

  #status { color: #eee; }

  .score-delta.plus { color: #4ade80; }
  .score-delta.minus { color: #f87171; }

  /* --card-w est desormais defini plus bas, sur #board-inner, en unites de
     "container query" (cqw) plutot qu'en vw : voir la note pres de
     #board-felt pour l'explication. */

  /* ---------- PLATEAU (cadre bois) ---------- */
  #board {
    width: 60vw;
    min-height: 80vh;
    padding: 16px; /* epaisseur du cadre en bois */
    border-radius: 16px;
    background: #694925;
  }

  /* ---------- FEUTRE (fond controle par le choix "Surface") ---------- */
  #board-felt {
    height: 100%;
    min-height: calc(80vh - 32px);
    padding: 24px; /* marge d'origine entre le feutre et les cartes */
    border-radius: 10px;
    background-repeat: repeat;
    /* "container query" : la taille des cartes (--card-w, plus bas) et les
       espacements (gap) sont calcules en % de la largeur REELLE de cette
       zone (cqw), plutot qu'en % de la largeur de la fenetre (vw). Avant ce
       changement, les deux valeurs etaient decorrelees : le plateau (#board)
       ne fait que 60% de la largeur de la fenetre, mais la taille des cartes
       etait calculee sur les 100% de cette meme fenetre, ce qui provoquait
       un debordement du tableau hors du cadre en bois sur les resolutions
       moyennes (~600-800px). */
    container-type: inline-size;
    overflow-x: auto; /* filet de securite : si le contenu ne tient vraiment
       pas (tres petits ecrans), on peut le faire defiler plutot que de le
       laisser deborder de facon invisible */
  }

  #board-inner {
    --card-w: clamp(48px, 11cqw, 112px);
    width: max-content;
    margin: 0 auto;
  }

  .pile {
    width: var(--card-w);
    aspect-ratio: 168 / 244;
    border-radius: 6px;
    position: relative;
    background: transparent;
    outline: 1px solid rgba(255,255,255,0.35);
    outline-offset: -1px;
  }

  /* --card-bg-size : leger debordement de l'image, pose sur :root a chaque
     changement de paquet. Il masque le contour dessine dans les fichiers
     sources, qui ferait double emploi avec la bordure et les coins arrondis
     appliques ici. La marge n'etant pas la meme d'un paquet a l'autre, la
     valeur est propre a chacun (voir DECKS dans le script). */
  .card {
    width: var(--card-w);
    aspect-ratio: 168 / 244;
    border-radius: 6px;
    /* --card-border : pose sur :root a chaque changement de paquet. Le
       liseret separe deux cartes empilees, dont les fonds blancs se
       confondraient ; les paquets qui portent deja leur propre bordure le
       neutralisent (voir DECKS dans le script). */
    border: var(--card-border, 1px solid #999);
    position: absolute;
    left: 0;
    background: #fff;
    background-size: var(--card-bg-size, 104% 102.7%);
    background-position: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    user-select: none;
  }

  .card.face-down {
    background-color: #2a5db0; /* couleur de secours si l'image ne charge pas */
    background-size: var(--card-bg-size, 104% 102.7%);
    background-position: center;
  }

  .card.draggable { cursor: grab; touch-action: none; }
  .card.draggable:active { cursor: grabbing; }

  /* ---------- MENUS LATERAUX (cards / surface / background) ----------
     Chaque menu est un bloc positionne : le panneau noir s'ouvre par-dessus
     le reste de la page, ancre juste sous son bouton, et peut donc etre plus
     large que la barre laterale sans la deformer. */
  .menu-block {
    position: relative;
    margin-bottom: 14px;
  }

  /* Police des menus : Book Antiqua n'est installee que sur une partie des
     machines (surtout Windows/Office). On la fait donc suivre d'une pile de
     substituts tres proches par le dessin (memes proportions humanistes) :
     Palatino cote Apple, URW Palladio cote Linux, puis Georgia et enfin la
     serif du systeme. L'aspect reste coherent partout. */
  .menu-toggle,
  .menu-option span {
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, "URW Palladio L", "Palatino LT STD", Georgia, "Times New Roman", serif;
    font-weight: bold;
    font-style: italic;
  }

  .menu-toggle {
    display: block;
    width: 100%;
    padding: 6px 20px;
    border: 1px solid #fff;
    border-radius: 0;
    background: #000;
    color: #fff;
    font-size: 26px;
    line-height: 1.15;
    cursor: pointer;
    text-align: center;
  }

  .menu-toggle:hover {
    background: #1a1a1a;
  }

  .side-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    z-index: 60;
    width: max-content;
    max-width: min(calc(100vw - 32px), 960px);
    background: #000;
    border: 1px solid #fff;
    border-radius: 0;
    /* Le deploiement anime la HAUTEUR REELLE du contenu grace a l'astuce
       grid-template-rows 0fr -> 1fr. Une simple transition sur max-height
       donnerait un resultat trompeur : la valeur maximale depasse la hauteur
       reelle du panneau des le debut de l'animation, qui parait donc
       s'ouvrir d'un coup. */
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.22s ease,
                visibility 0s linear 0.32s;
  }

  /* Les trois reglages tiennent dans un seul panneau, une rangee chacun :
     cartes, surface, fond. Le panneau s'empile donc en colonne, chaque rangee
     alignant ses vignettes en ligne. */
  .side-menu-inner {
    display: flex;
    flex-direction: column;
    min-height: 0; /* indispensable pour que la ligne de grille puisse se replier a zero */
    overflow: hidden;
  }

  .menu-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
  }

  .menu-row + .menu-row {
    border-top: 1px solid rgba(255,255,255,0.55);
  }

  /* L'intitule tient une colonne de largeur fixe : sans elle, les trois
     rangees de vignettes ne commenceraient pas au meme fer. */
  .menu-row-label {
    flex-shrink: 0;
    width: 6.5em;
    color: #fff;
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, "URW Palladio L", "Palatino LT STD", Georgia, "Times New Roman", serif;
    font-weight: bold;
    font-style: italic;
    font-size: 20px;
  }

  .menu-row-options {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-width: 0;
  }

  .side-menu.open {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows 0.36s cubic-bezier(0.2, 0.9, 0.3, 1),
                opacity 0.24s ease,
                visibility 0s linear 0s;
  }

  /* une fois ouvert, on autorise le defilement HORIZONTAL seulement : sur un
     ecran etroit, les vignettes qui depassent restent atteignables. Le
     defilement vertical reste desactive, sinon une barre de defilement
     apparait puis disparait pendant le deploiement (le contenu depasse
     temporairement la hauteur, encore en cours d'animation). */
  /* Le debordement se joue rangee par rangee : un paquet de plus s'y fait
     defiler sans emporter les deux autres. Le conteneur, lui, reste masque :
     c'est son ecretage qui donne le depliage. */
  .side-menu.open .menu-row-options {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .menu-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    text-align: center;
    background: #000;
  }

  /* Fin trait de separation entre les vignettes */
  .menu-option + .menu-option {
    border-left: 1px solid rgba(255,255,255,0.55);
  }

  .menu-option:hover {
    background: #191919;
  }

  .menu-option.active {
    background: #232323;
  }

  /* Vignette d'un deck : le roi de coeur et le dos de la carte reunis sur une
     seule image, separes en diagonale (le dos occupe le triangle bas-droite). */
  .deck-preview {
    position: relative;
    width: 88px;
    aspect-ratio: 168 / 244;
    background: #fff;
    border: 1px solid #fff;
    flex-shrink: 0;
  }

  .deck-preview-face,
  .deck-preview-back {
    position: absolute;
    inset: 0;
    background-size: 104% 102.7%; /* valeur de secours : chaque vignette recoit la sienne en ligne */
    background-position: center;
    background-repeat: no-repeat;
  }

  .deck-preview-back {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }

  .felt-swatch {
    width: 88px;
    height: 88px;
    background-repeat: repeat;
    background-size: cover;
    border: 1px solid rgba(255,255,255,0.7);
    flex-shrink: 0;
  }

  .bg-swatch {
    width: 88px;
    height: 88px;
    background-repeat: repeat;
    background-size: 34px 34px;
    border: 1px solid rgba(255,255,255,0.7);
    flex-shrink: 0;
    filter: brightness(1.7) contrast(1.15); /* rend le motif lisible en petit apercu, sans changer le fond reel applique */
  }

  .bg-swatch.none {
    background: #000;
  }

  /* ---------- MISE EN PAGE MOBILE ----------
     En dessous de 700px, la barre laterale (260px fixes) et le plateau
     (60vw) ne cohabitent plus correctement : la barre a elle seule prend
     une trop grande part de l'ecran. On empile alors la barre laterale
     au-dessus du plateau, qui recupere la quasi-totalite de la largeur. */
  @media (max-width: 820px) {
    body {
      flex-direction: column;
    }

    #sidebar {
      width: 100%;
      border-right: none;
      border-bottom: 1px solid rgba(255,255,255,0.25);
    }

    #sidebar.collapsed {
      padding: 12px 20px;
    }

    #board {
      width: 94vw;
      min-height: 60vh;
    }

    #board-felt {
      min-height: calc(60vh - 32px);
    }
  }

  /* ---------- FENETRES MODALES (victoire / meilleurs scores) ---------- */
  #modal-overlay {
    position: fixed;
    inset: 0;
    background: transparent; /* l'arriere-plan reste parfaitement lisible */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
  }

  #modal-overlay.open { display: flex; }

  .modal {
    display: none;
    background: #000;
    border: 2px solid #fff;
    box-shadow: 0 12px 40px rgba(0,0,0,0.75);
    padding: 26px 30px;
    color: #fff;
    text-align: center;
    min-width: 320px;
    max-width: min(92vw, 520px);
    max-height: 86vh;
    overflow-y: auto;
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, "URW Palladio L", "Palatino LT STD", Georgia, "Times New Roman", serif;
  }

  .modal.open { display: block; }

  .modal h2 {
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 14px;
  }

  .modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 18px;
  }

  .modal-actions button {
    font-family: inherit;
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    padding: 6px 22px;
    color: #fff;
    background: #000;
    border: 1px solid #fff;
    border-radius: 0;
    cursor: pointer;
  }

  .modal-actions button:hover { background: #1f1f1f; }


  /* ---------- ACCES SECONDAIRES (scores / regles) ----------
     Distincts des gros boutons de choix graphiques par la police, la taille
     et la casse : ce ne sont pas des reglages d'apparence mais des acces a
     une fenetre. Empiles plutot qu'alignes : des libelles de longueur
     inegale, dans deux langues, ne tiennent pas proprement sur une ligne. */
  #sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.2);
  }

  .text-link {
    padding: 8px 12px;
    background: #000;
    border: 1px solid #666;
    border-radius: 3px;
    color: #ddd;
    font-family: inherit;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }

  .text-link:hover {
    background: #191919;
    border-color: #fff;
    color: #fff;
  }

  /* ---------- FENETRE DES REGLES ---------- */
  #rules-dialog { text-align: left; max-width: min(92vw, 560px); }

  #rules-dialog h2 { text-align: center; }

  .rules-body { font-size: 15px; line-height: 1.5; }

  .rules-body h3 {
    font-size: 18px;
    font-style: italic;
    margin: 14px 0 4px;
  }

  .rules-body h3:first-child { margin-top: 0; }

  .rules-body p { color: #ccc; }

  .rules-note {
    margin-top: 10px;
    font-size: 13px;
    color: #888;
  }

  /* ---------- ILLUSTRATIONS DES REGLES ---------- */
  .rules-figs {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center;
    align-items: stretch;
  }

  .rules-fig {
    margin: 12px auto 4px;
    text-align: center;
  }

  /* Les deux figures cote a cote n'ont pas la meme hauteur d'illustration
     (une colonne de trois cartes contre une rangee simple). Les deux zones
     d'image recoivent donc la meme hauteur, --fig-row-h, calculee par le
     script a partir de la plus haute : les images s'alignent par le haut, et
     les legendes DEMARRENT a la meme hauteur.

     Une precedente version faisait grandir la zone d'image pour pousser les
     legendes vers le bas. Mauvaise idee : la legende longue passe sur deux
     lignes et la courte sur une seule, si bien qu'alignees par le bas elles
     ne commencaient pas au meme niveau. */
  .rules-figs .rules-fig {
    flex: 1 1 0;
    margin: 12px 0 4px;
  }

  .rules-figs .fig-cards {
    min-height: var(--fig-row-h, 100px);
    align-items: flex-start;
  }

  .rules-fig.wide { display: block; }

  .rules-fig figcaption {
    margin-top: 8px;
    font-size: 12px;
    font-style: italic;
    color: #888;
  }

  .fig-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .fig-card {
    width: var(--fig-card-w, 46px);
    aspect-ratio: 168 / 244;
    flex-shrink: 0;
    border: var(--card-border, 1px solid #999);
    border-radius: 4px;
    background: #fff;
    background-size: var(--card-bg-size, 104% 102.7%);
    background-position: center;
    background-repeat: no-repeat;
  }

  .fig-arrow {
    color: #888;
    font-size: 22px;
    line-height: 1;
  }

  .fig-stack .fig-card {
    position: absolute;
    left: 0;
  }

  /* ---------- BARRES DE DEFILEMENT ----------
     Curseur blanc sur piste noire, partout : fenetre des regles, panneaux de
     choix, plateau sur petits ecrans. */
  * {
    scrollbar-width: thin;
    scrollbar-color: #fff #000;
  }

  .modal-actions button:disabled {
    color: #777;
    border-color: #555;
    cursor: default;
  }

  /* ---------- BASCULE DE LANGUE ---------- */
  /* Retour a la page de choix, en tete du panneau : on passe d'un jeu a
     l'autre sans repasser par la barre d'adresse. Enfant direct de #sidebar,
     il disparait avec le reste quand le panneau se replie.

     Meme gabarit que les gros boutons de reglage, mais borde du bois de la
     table : ce n'est pas un choix d'apparence, c'est la sortie. */
  #back-link {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    padding: 6px 20px;
    border: 2px solid #694925;
    background: #000;
    color: #fff;
    font-family: "Book Antiqua", "Palatino Linotype", Palatino, "URW Palladio L", "Palatino LT STD", Georgia, "Times New Roman", serif;
    font-weight: bold;
    font-style: italic;
    font-size: 28px;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
  }

  #back-link:hover,
  #back-link:focus-visible {
    background: #1a1a1a;
    border-color: #d8b579;
  }

  #lang-switch {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
  }

  /* Les drapeaux sont des SVG en ligne, et non des emoji : sous Windows, les
     emoji de drapeau ne sont pas rendus et s'affichent en lettres ("GB"). */
  .lang-flag {
    width: 30px;
    height: 20px;
    padding: 0;
    border: 1px solid #444;
    border-radius: 2px;
    background: none;
    line-height: 0;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.15s ease, border-color 0.15s ease;
  }

  .lang-flag:hover { opacity: 0.8; }

  .lang-flag.active {
    opacity: 1;
    border-color: #fff;
  }

  .lang-flag svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ---------- MENTIONS LEGALES ---------- */
  #legal-dialog { text-align: left; }

  #legal-dialog h2 { text-align: center; }

  .legal-body {
    font-size: 14px;
    line-height: 1.55;
    color: #ccc;
  }

  .legal-body p { margin-bottom: 10px; }

  .legal-body p:last-child { margin-bottom: 0; }

  .legal-head {
    font-size: 17px;
    font-style: italic;
    color: #fff;
    margin-bottom: 8px;
  }

  .legal-body a { color: #9db8d8; }
  .legal-body a:hover { color: #fff; }