/* Style pour les barres de reprise - RESPONSIVE avec points d'origine */
.bar-line.repeat-bar::before {
    content: "•\A•"; /* Revenir aux points simples d'origine */
    white-space: pre;
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(16px, 1.5vw, 30px); /* Responsive : de 16px à 30px */
    line-height: 1;
    color: #000;
    font-weight: bold;
    text-shadow: 0 0 2px white;
  }
  
  /* Levée + barre de reprise en fin de galerie : deux points à droite de la barre en 0-0 */
  .gallery:has(.has-levee-forward-repeat-hint) {
    overflow: visible !important;
  }

  .cell.has-levee-forward-repeat-hint {
    overflow: visible !important;
    z-index: 35 !important;
  }

  .bar-line.levee-forward-repeat-marker {
    overflow: visible;
    z-index: 36 !important;
    position: absolute;
  }

  .levee-forward-repeat-thick-bar {
    position: absolute;
    top: 0;
    height: 100%;
    width: clamp(6px, 0.4vw, 8px);
    left: auto;
    background-color: #000;
    pointer-events: none;
    user-select: none;
    z-index: 37;
  }

  .levee-forward-repeat-dots {
    position: absolute;
    left: 0;
    top: 50%;
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    white-space: pre;
    font-size: clamp(16px, 1.5vw, 30px);
    line-height: 1;
    color: #000;
    font-weight: bold;
    text-shadow: 0 0 2px white;
    pointer-events: none;
    user-select: none;
    z-index: 37;
  }

  /* 2e passage : double barre clairement à droite de l'avant-dernière (hors zone FIN) */
  .gallery.levee-second-pass-end-double,
  .gallery:has(.has-levee-end-double-bar) {
    overflow: visible !important;
  }

  .cell.has-levee-end-double-bar {
    position: relative;
    overflow: visible !important;
    z-index: 56 !important; /* au-dessus de la cellule FIN (label z 55) */
  }

  /*
   * Continuité d'un carton double (ex. Blanche) qui déborde depuis la case précédente
   * vers l'avant-dernière (double barre 2e passage) : ne pas masquer le carton avec
   * le fond / bordure de .position (sinon on ne voit que le point de départ).
   */
  .cell.has-levee-end-double-bar[data-main-cell],
  .cell.levee-fin-span-continuation {
    background: transparent !important;
  }
  .cell.has-levee-end-double-bar[data-main-cell] > .position,
  .cell.levee-fin-span-continuation > .position {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
  }

  .fixed-bar-line.levee-end-double-bar-second-pass {
    background-color: #000 !important;
    opacity: 1 !important;
    /* Ne pas utiliser le right négatif de fin de galerie : il poussait la barre sous FIN */
    right: 0 !important;
    z-index: 60 !important;
    width: clamp(6px, 0.4vw, 8px) !important;
    pointer-events: none;
  }

  /* Aspect double barre (fine à gauche + épaisse), sans points de reprise */
  .fixed-bar-line.levee-end-double-bar-second-pass::before {
    content: '' !important;
    white-space: normal;
    position: absolute;
    top: 0;
    height: 100%;
    width: 2px;
    right: calc(100% + 3px);
    left: auto;
    transform: none;
    background-color: #000;
    font-size: 0;
    line-height: 0;
    color: transparent;
    text-shadow: none;
    pointer-events: none;
  }

  /* Masquer la barre de mesure simple restée sur la cellule FIN (évite un fantôme en bout) */
  .gallery.levee-second-pass-end-double .cell.has-levee-fin > .bar-line:not(.fixed-bar-line),
  .cell.levee-fin-end-bar-relocated > .bar-line:not(.fixed-bar-line) {
    visibility: hidden !important;
  }

  /* Levée + FIN en dernière cellule (reprise 2e lecture / double barre) */
  /* Pas de z-index élevé sur la cellule : ça masquait l'avant-dernière (carton double / bord). */
  .cell.has-levee-fin {
    position: relative;
    overflow: visible !important;
  }

  /* Masquer les numéros d'identification de cellule sous FIN */
  .cell.has-levee-fin .position {
    color: transparent;
  }

  .cell.has-levee-fin .pulse-number {
    display: none !important;
  }

  .levee-fin-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 55;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: 700;
    font-size: clamp(20px, 2.5vw, 40px);
    letter-spacing: 0.06em;
    line-height: 1;
    color: rgba(0, 0, 0, 0.72);
    background: #fff;
    border: none;
    outline: none;
    box-shadow: none;
    text-shadow:
      0 0 3px rgba(255, 255, 255, 0.85),
      0 0 1px #fff,
      1px 0 0 rgba(255, 255, 255, 0.7),
      -1px 0 0 rgba(255, 255, 255, 0.7),
      0 1px 0 rgba(255, 255, 255, 0.7),
      0 -1px 0 rgba(255, 255, 255, 0.7);
    pointer-events: none;
    user-select: none;
  }

  /* Style pour la barre de reprise fixe à la fin de la ligne - RESPONSIVE */
  .fixed-bar-line.repeat-bar::before {
    content: "•\A•"; /* Revenir aux points simples d'origine */
    white-space: pre;
    position: absolute;
    right: clamp(12px, 1vw, 16px); /* Très légèrement augmenté pour créer un peu plus d'espace avec la barre de mesure */
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(16px, 1.5vw, 30px); /* Responsive : de 16px à 30px */
    line-height: 1;
    color: #000;
    font-weight: bold;
    text-shadow: 0 0 2px white;
    pointer-events: none; /* Pour que les clics passent à travers les points */
  }
  
  /* Styles pour les lignes actives dans les modes multi-lignes */
  .active-row {
    background-color: rgba(40, 167, 69, 0.2) !important; /* Vert, plus opaque */
    box-shadow: inset 0 0 15px rgba(40, 167, 69, 0.5) !important; /* Vert, plus intense */
    transition: background-color 0.3s ease !important;
    border: 2px solid rgba(40, 167, 69, 0.5) !important; /* Bordure verte */
  }
  

  /* Multi-son ON : pas d'encadré vert sur la cellule spéciale — la portée indique la priorité */
  .cell.special-cell.speaker-priority-active,
  .cell.special-cell.speaker-priority-active.active-special-cell {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
  }

  /* Style pour la cellule spéciale active (colonne 0) - très visible */
  .active-special-cell {
    background-color: rgba(144, 238, 144, 0.5) !important; /* Vert tendre */
    box-shadow: inset 0 0 25px rgba(144, 238, 144, 0.85) !important; /* Ombre interne plus marquée */
    transition: all 0.3s ease !important;
    border: 4px solid #39ff14 !important; /* Bordure verte fluo très épaisse et opaque */
    transform: none !important; /* Pas de scale : évite le débordement 4/4 dans la cellule du dessous (zoom Windows) */
    z-index: 10 !important; /* Au-dessus des autres éléments */
  }
  
  /* Prévisualisation de la cellule spéciale au survol */
  .special-cell-preview {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(144, 238, 144, 0.3);
    pointer-events: none;
    z-index: 5;
    border: 3px solid rgba(57, 255, 20, 0.7);
    box-shadow: inset 0 0 15px rgba(144, 238, 144, 0.6);
  }
  
  
  .row-highlight {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(40, 167, 69, 0.2); /* Vert, plus opaque */
    pointer-events: none;
    z-index: 5;
    border: 2px solid rgba(40, 167, 69, 0.5); /* Bordure verte */
  }
  
  .subdivision-et {
    color: #666;
    background-color: transparent !important;
    pointer-events: none;
  }
  
  /* Style pour le rectangle blanc sur la quatrième rangée en mode 4X8 */
  .fourth-row-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-color: white;
    z-index: 10;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  }
  
  /* Style pour les boutons dans la cellule 4-1 en mode 4X8 */
  .cell-4-1-buttons-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;  /* Centre les boutons horizontalement */
    padding: 3px;
    z-index: 15;
    box-sizing: border-box;
  }
  
  .cell-4-1-button {
    width: 216px;  /* Largeur augmentée de 20% (180px * 1.2 = 216px) */
    height: 31%;
    background-color: #8a4b38;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 2px !important; /* Padding ajusté pour contenir les boutons +/- */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    transition: background-color 0.3s;
    white-space: normal !important; /* Permet le retour à la ligne */
    overflow: visible !important; /* IMPORTANT : Permet au contenu d'être visible */
    box-sizing: border-box;
    margin: 0 auto;  /* Centrage horizontal */
  }

.group-title {
  font-size: clamp(10px, 1.5vw, 24px);
  font-weight: bold;
  margin-top: clamp(2px, 0.4vw, 8px);
  margin-bottom: clamp(4px, 0.6vw, 10px);
  min-height: clamp(10px, 1.5vw, 24px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: transparent;
  align-self: flex-start;
  padding-right: clamp(24px, 4vw, 48px);
  padding-left: clamp(6px, 0.9vw, 14px);
  overflow: hidden;
}

.group-letter-row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 24px);
  margin: clamp(4px, 0.7vw, 10px) 0;
}

.group-controls-row {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
  margin-top: clamp(2px, 0.4vw, 6px);
}

.group-letter {
  font-size: clamp(30px, 3.45vw, 48px) !important;
  font-weight: 600;
  line-height: 0.85;
  color: #111;
  letter-spacing: 0.04em;
  text-align: center;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 38%;
  margin-top: 0;
}

/* Petit PC / zoom Windows : le contenu des cellules A–D doit tenir dans le carré */
.cell.special-cell {
  container-type: size;
}
.cell.special-cell .position {
  padding: 2px 0 4px !important;
  justify-content: center !important;
  overflow: hidden;
  min-height: 0;
}
.cell.special-cell .group-title {
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.cell.special-cell .group-letter {
  font-size: clamp(30px, 3.45vw, 48px) !important;
  margin-top: 0 !important;
  line-height: 0.9;
  max-height: 42%;
}
.cell.special-cell .group-controls-row {
  margin-top: 0;
  margin-bottom: 0;
  gap: 2px;
  flex-shrink: 0;
}
.cell.special-cell .ch-button,
.cell.special-cell .group-ch-button {
  font-size: clamp(14px, 4.3vw, 35px) !important;
  padding: 3px 9px !important;
  max-width: 90%;
  box-sizing: border-box;
}
.cell.special-cell .speaker-toggle {
  font-size: clamp(14px, 2vw, 26px) !important;
  top: 2px !important;
  right: 2px !important;
  width: auto !important;
  height: auto !important;
}


.speaker-toggle {
  position: absolute;
  top: clamp(4px, 0.8vw, 12px);
  right: clamp(4px, 0.8vw, 12px);
  border: none;
  background: transparent;
  font-size: clamp(20px, 4.4vw, 36px);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 4.4vw, 44px);
  height: clamp(32px, 4.4vw, 44px);
  min-width: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.18s ease, color 0.18s ease;
  color: #868e96;
  overflow: visible; /* Permettre au numéro de dépasser si nécessaire */
}

.top-menu-container {
  position: absolute;
  /* Position horizontale gérée par JavaScript pour centrer au-dessus de la colonne 0 des cellules de la galerie */
  /* Aligné verticalement exactement au même niveau que la première rangée de micro-boutons */
  top: 0;
  z-index: 10000; /* Z-index très élevé pour être au-dessus de la cellule active (z-index: 10) */
  /* Sépare le MENU des micro-boutons avec un petit espace */
  margin-right: clamp(8px, 1.2vw, 16px);
  /* Jumeler les boutons verticalement */
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Pour les résolutions inférieures à 1920x1080, ajuster le positionnement du MENU pour éviter la superposition */
/* Étape 4 — MENU / micro-boutons : le décalage « vieux PC » ne s’applique
   plus qu’en dessous de 1024 px. Ordinateurs et tablettes gardent le
   placement prévu pour 1920×1080. */
@media (max-width: 1023px) {
  .top-menu-container {
    /* left géré par JS : bord gauche de l’écran, isolé des micro-boutons */
    right: auto !important;
    margin-right: 0 !important;
    position: absolute !important;
  }

  .mini-buttons-container {
    left: clamp(5%, 8vw, 10%) !important;
    right: clamp(5%, 8vw, 10%) !important;
  }

  .buttons {
    /* Plus besoin d’une grosse réserve : le MENU est hors flux, à gauche de l’écran */
    padding-left: clamp(8px, 1.2vw, 16px) !important;
  }
}

/* Adapter un micro-bouton pour le menu supérieur (sans l'étirer sur toute la rangée) */
/* +2 px de hauteur / +2 pt de police pour le lettrage MENU.
   L’agrandissement horizontal est compensé vers la gauche (JS) pour
   ne pas décaler les micro-boutons ni la galerie. */
.top-menu-toggle.micro-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  height: clamp(24px, calc(2.2vw + 2px), 28px) !important;
  min-height: clamp(24px, calc(2.2vw + 2px), 28px) !important;
  max-height: clamp(24px, calc(2.2vw + 2px), 28px) !important;
  padding: 0 clamp(5px, 0.8vw, 9px) !important;
  border-radius: 4px !important;
  border-right: 1px solid #ccc !important;
  /* Même famille responsive que .micro-btn, +2 pt */
  font-size: clamp(12px, calc(2.2vw + 2px), 18px) !important;
  letter-spacing: 0.55px !important;
  /* Croissance vers le haut : bas aligné avec la rangée des micros */
  margin-top: -2px !important;
  box-sizing: border-box !important;
  transform: none !important; /* pas de scale au survol qui décalerait le voisinage */
}
.top-menu-toggle.micro-btn:hover,
.top-menu-toggle.micro-btn:active {
  transform: none !important;
}
.top-menu-toggle.micro-btn .btn-name,
.top-menu-toggle.micro-btn .btn-number {
  font-size: clamp(12px, calc(2.2vw + 2px), 18px) !important;
  letter-spacing: 0.55px !important;
  line-height: 1 !important;
  height: auto !important;
  max-width: none !important;
  transform: none !important;
  font-weight: bold !important;
}
@media (max-width: 1200px) {
  .top-menu-toggle.micro-btn,
  .top-menu-toggle.micro-btn .btn-name,
  .top-menu-toggle.micro-btn .btn-number {
    font-size: clamp(11px, calc(2vw + 2px), 16px) !important;
    letter-spacing: 0.45px !important;
  }
}
@media (max-width: 900px) {
  .top-menu-toggle.micro-btn,
  .top-menu-toggle.micro-btn .btn-name,
  .top-menu-toggle.micro-btn .btn-number {
    font-size: clamp(10px, calc(2.2vw + 2px), 14px) !important;
    letter-spacing: 0.4px !important;
  }
}
@media (max-width: 600px) {
  .top-menu-toggle.micro-btn,
  .top-menu-toggle.micro-btn .btn-name,
  .top-menu-toggle.micro-btn .btn-number {
    font-size: clamp(9px, calc(2.5vw + 2px), 12px) !important;
    letter-spacing: 0.3px !important;
  }
}

.gamme-witness-host {
  position: fixed;
  z-index: 200;
  left: 0;
  top: 0;
  pointer-events: none;
  visibility: hidden;
}

body.presentation-4x8 .gamme-witness-host {
  visibility: hidden !important;
  pointer-events: none !important;
}

.gamme-witness-toggle.micro-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  /* +4 px d’épaisseur ; la base reste ancrée (JS : top = badge - h - gap) */
  height: auto !important;
  min-height: calc(22px + 4px) !important;
  max-height: none !important;
  /* Marge verticale minimale : le JS calibre le texte sur la hauteur restante */
  padding: 1px 3px !important;
  border-radius: 4px !important;
  pointer-events: auto;
  line-height: 1 !important;
}

.gamme-witness-toggle {
  position: relative !important;
  overflow: hidden !important;
  white-space: normal !important;
  line-height: 1 !important;
}

.gamme-witness-label {
  position: relative;
  z-index: 3; /* au-dessus du X : les mots restent lisibles */
  display: block;
  width: 100%;
  /* Taille réelle imposée par fitGammeWitnessLabelSpacing (hauteur max) */
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
}

.gamme-witness-toggle.is-off {
  background-color: #9e3b2f !important;
  border-color: #9e3b2f !important;
  color: #fff !important;
}

.gamme-witness-toggle.is-off .gamme-witness-label {
  font-weight: 800;
  letter-spacing: 0;
  padding-left: 0;
  box-sizing: border-box;
  /* Halo rouge léger : le X derrière ne « mange » presque plus les lettres */
  text-shadow:
    0 0 1.5px #dc3545,
    0 0 3px #dc3545,
    0.5px 0 0 #dc3545,
    -0.5px 0 0 #dc3545,
    0 0.5px 0 #dc3545,
    0 -0.5px 0 #dc3545;
}

.gamme-witness-toggle.is-on {
  background-color: #5f7f4a !important;
  border-color: #5f7f4a !important;
  color: #fff !important;
}

.gamme-witness-toggle.is-on .gamme-witness-label {
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  letter-spacing: 0;
  padding-left: 0;
  box-sizing: border-box;
}

.gamme-witness-toggle.is-on.is-majeur .gamme-witness-label {
  text-transform: uppercase;
}

.gamme-witness-option {
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
}

.gamme-witness-x {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* sous le texte */
  pointer-events: none;
  display: none;
  filter: none;
  overflow: hidden;
  opacity: 0.42;
}

.gamme-witness-x line {
  stroke: #111;
  stroke-width: 0.7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.gamme-witness-toggle.is-off .gamme-witness-x {
  display: block;
}

.gamme-witness-dropdown {
  position: fixed !important;
  padding: clamp(5px, 0.6vw, 9px);
  background: rgba(255,255,255,0.97);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.12);
  display: none;
  flex-direction: column;
  gap: clamp(3px, 0.35vw, 5px);
  min-width: 0;
  width: max-content;
  box-sizing: border-box;
  overflow: hidden;
  max-width: 92vw;
  z-index: 99999;
}

.gamme-witness-dropdown.open {
  display: flex;
}

.gamme-witness-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: none !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  cursor: pointer;
}

.gamme-witness-option:hover {
  background: rgba(138, 75, 56,0.08);
}

.gamme-witness-option.selected {
  background: rgba(40,167,69,0.22) !important;
  font-weight: 700 !important;
}

.gamme-witness-option[data-gamme="off"].selected {
  background: rgba(220,53,69,0.22) !important;
}

/* Témoin type de gamme (MAJEUR / Mineur…) — même gabarit que Gammes ON/OFF */
.gamme-mode-witness-host {
  position: fixed;
  z-index: 200;
  left: 0;
  top: 0;
  pointer-events: none;
  visibility: hidden;
}

body.presentation-4x8 .gamme-mode-witness-host,
body.gammes-mode-off .gamme-mode-witness-host {
  visibility: hidden !important;
  pointer-events: none !important;
}

.gamme-mode-witness-toggle.micro-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: calc(22px + 4px) !important;
  max-height: none !important;
  padding: 1px 3px !important;
  border-radius: 4px !important;
  pointer-events: auto;
  line-height: 1 !important;
  /* Même fond que « Gammes ON », texte blanc */
  background-color: #5f7f4a !important;
  border: 1px solid #5f7f4a !important;
  color: #ffffff !important;
  cursor: pointer !important;
}

.gamme-mode-witness-toggle {
  position: relative !important;
  overflow: hidden !important;
  white-space: normal !important;
  line-height: 1 !important;
}

.gamme-mode-witness-label {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
  color: #ffffff !important;
  white-space: nowrap;
  text-overflow: clip;
}

.gamme-mode-witness-toggle:hover {
  background-color: #218838 !important;
  border-color: #218838 !important;
}


/* Choix direct du type de gamme : texte agrandi pour remplir la largeur du témoin */
.gamme-mode-witness-dropdown {
  padding: clamp(3px, 0.35vw, 5px) !important;
}

.gamme-mode-witness-dropdown .gamme-mode-witness-option {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  text-align: center !important;
  padding: 5px 3px !important;
  min-height: 28px !important;
  word-break: normal;
  overflow-wrap: normal;
}

.gamme-mode-witness-toggle:active {
  transform: translateY(0.5px);
}


.top-menu-dropdown {
  position: fixed !important; /* Position fixed pour sortir du contexte de stacking du parent */
  /* Position calculée dynamiquement par JavaScript */
  padding: clamp(5px, 0.6vw, 9px);
  background: rgba(255,255,255,0.97);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.12);
  display: none;
  flex-direction: column;
  gap: clamp(3px, 0.35vw, 5px);
  min-width: clamp(118px, 11vw, 158px);
  max-width: 50vw;
  z-index: 99999 !important; /* Z-index extrêmement élevé pour être au-dessus de tous les éléments, y compris les chiffres de multi-sons (z-index: 10) */
}

.top-menu-dropdown.open {
  display: flex;
}

.top-menu-item {
  font-size: clamp(13px, 1.15vw, 17px);
  padding: clamp(5px, 0.55vw, 9px) clamp(10px, 1vw, 16px);
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #333;
  text-align: left;
  cursor: pointer;
}

.top-menu-item:hover {
  background: rgba(138, 75, 56,0.08);
}

.top-menu-item-two-lines {
  line-height: 1.2;
  white-space: pre-line;
}

.top-menu-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.35vw, 5px);
}

.top-menu-submenu .top-menu-submenu-title {
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: bold;
  padding: clamp(4px, 0.5vw, 7px) 0;
  color: #333;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  margin-bottom: clamp(2px, 0.3vw, 4px);
}

.top-menu-submenu-back {
  margin-bottom: clamp(3px, 0.4vw, 5px) !important;
}

.top-menu-submenu-option {
  font-size: clamp(13px, 1.15vw, 17px);
  padding: clamp(5px, 0.55vw, 9px) clamp(10px, 1vw, 16px);
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #333;
  text-align: left;
  cursor: pointer;
}

.top-menu-submenu-option:hover {
  background: rgba(138, 75, 56,0.08);
}

.top-menu-submenu-option.selected {
  background: rgba(138, 75, 56,0.15);
  font-weight: bold;
}

/* Styles pour le conteneur d'image du haut-parleur */
.speaker-toggle .speaker-image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Styles pour l'image du haut-parleur (désormais SVG portée musicale) */
.speaker-toggle .speaker-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Styles pour la portée musicale SVG */
.speaker-toggle .speaker-staff {
  width: 100%;
  height: 100%;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Styles pour le numéro du haut-parleur - superposé au centre */
.speaker-toggle .speaker-number {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(14px, 3vw, 24px); /* Taille augmentée */
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  line-height: 1;
  z-index: 10;
  white-space: nowrap;
  pointer-events: none; /* Permettre les clics à travers le numéro */
}

.speaker-toggle:focus {
  outline: 2px solid rgba(0, 123, 255, 0.45);
  outline-offset: 2px;
}

.speaker-toggle.state-null {
  color: #868e96;
  background-color: transparent; /* Pas de fond rouge pour OFF */
  border-radius: clamp(4px, 0.6vw, 8px);
  padding: clamp(2px, 0.3vw, 4px);
}

.speaker-toggle.state-on {
  color: #ffffff;
  background-color: #28a745; /* Vert pour ON */
  border-radius: clamp(4px, 0.6vw, 8px);
  box-shadow: 0 0 0 clamp(1px, 0.2vw, 3px) rgba(40, 167, 69, 0.45);
  padding: clamp(2px, 0.3vw, 4px);
}

.speaker-toggle:hover {
  transform: scale(1.12);
}

  .cell-4-1-button:hover {
    background-color: #6f3a2b;
    transform: scale(1.03);
  }
  
  .cell-4-1-button .button-subtext {
    font-size: 16px;  /* Augmenté de 10px à 16px (6 points de plus) */
    font-style: italic;
    margin-top: 10px; /* Encore plus d'espace entre ligne 1 et ligne 2 */
    white-space: normal; /* Permet le retour à la ligne */
    overflow: visible; /* Permet au contenu d'être visible */
    width: 100%;
    display: block;
  }
  
  /* Ajuster spécifiquement les boutons Défis et Citations */
  #defis-button,
  #citations-button {
    line-height: 1 !important; /* Réduit l'interligne pour compacter */
  }
  
  /* Style pour les fenêtres associées aux boutons de la cellule 4-1 */
  .button-window {
    position: absolute;
    left: 100%;
    top: 0;
    height: 100%; /* Hauteur égale à celle du bouton parent */
    background-color: white;
    border: 2px solid #8a4b38;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 20;
    display: none;
    overflow: auto;
    padding: 0; /* AUCUN padding pour utiliser tout l'espace disponible */
    box-sizing: border-box;
    /* NOUVEAU : Largeur définie par JavaScript - CSS ne doit pas interférer */
    width: 1650px; /* Largeur par défaut - sera modifiée par JavaScript */
    max-width: none; /* Pas de limite maximale */
    min-width: 400px; /* Largeur minimale de sécurité */
  }
  
  .button-window.active {
    display: block;
  }
  
  /* Media queries pour adapter les boîtes de dialogue en basse résolution */
  @media (max-width: 1400px) {
    .button-window {
      width: calc(100vw - 40px) !important; /* Utiliser presque toute la largeur de l'écran */
      max-width: none !important;
    }
  }
  
  @media (max-width: 1200px) {
    .button-window {
      width: calc(100vw - 20px) !important; /* Encore plus de largeur */
      max-width: none !important;
    }
  }
  
  @media (max-width: 900px) {
    .button-window {
      width: calc(100vw - 10px) !important; /* Largeur presque pleine écran */
      max-width: none !important;
    }
    
    /* Réduire les espacements pour plus de contenu visible */
    .button-window-file {
      padding: 3px 6px !important;
      font-size: clamp(10px, 1.5vw, 14px) !important;
    }
    
    .button-window-header {
      padding: 5px !important;
    }
  }
  
  @media (max-width: 600px) {
    .button-window {
      width: 100vw !important;
      max-width: none !important;
    }
    
    .button-window-file {
      padding: 2px 4px !important;
      font-size: clamp(8px, 2vw, 12px) !important;
    }
  }
  
  .button-window-content {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  
  .button-window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(4px, 0.5vw, 8px); /* Adaptatif */
    padding-bottom: clamp(4px, 0.5vw, 8px); /* Adaptatif */
    border-bottom: 1px solid #eee;
  }
  
  .button-window-title {
    font-weight: bold;
    color: #8a4b38;
    margin: 0;
    font-size: clamp(18px, 2.5vw, 36px); /* Plus gros pour tableau interactif */
  }

  .overlay-document-window-title.overlay-document-window-title--app-bar {
    background-color: #4b2c22 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: clamp(20px, 2.4vw, 28px) !important;
    line-height: 1.35 !important;
    padding: 10px 36px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .overlay-document-window-title--app-bar .user-role-tri,
  .overlay-document-window-title--app-bar strong.user-role-tri {
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 1em !important;
    letter-spacing: 0.02em;
    margin-left: 0.15em;
    padding: 0.08em 0.28em 0.1em;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.22);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  
  .button-window-close {
    cursor: pointer;
    font-size: clamp(24px, 3vw, 48px); /* Beaucoup plus gros pour tableau interactif */
    color: #dc3545;
    background: none;
    border: none;
    padding: 0 clamp(8px, 1vw, 16px); /* Plus d'espace */
    font-weight: bold; /* Plus visible */
  }
  
  .button-window-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(4px, 0.5vw, 8px); /* Adaptatif */
  }
  
  .button-window-file {
    padding: clamp(4px, 0.5vw, 8px) clamp(8px, 1vw, 16px); /* Adaptatif */
    background-color: #f0f0f0;
    border-radius: clamp(2px, 0.3vw, 5px); /* Adaptatif */
    cursor: pointer;
    font-size: clamp(12px, 1vw, 16px); /* Adaptatif : 12px min, 1vw, 16px max */
  }
  
  .button-window-file:hover {
    background-color: #e0e0e0;
  }
  
  .button-window-file.active {
    background-color: #8a4b38;
    color: white;
  }
  
  .button-window-empty {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: clamp(8px, 1vw, 16px); /* Adaptatif */
    font-size: clamp(12px, 1vw, 16px); /* Adaptatif */
  }
  
  /* NOUVEAU : Styles pour le contenu des fenêtres (citations et défis) - TEXTE GIGANTESQUE */
  .button-window-content-text {
    font-size: clamp(48px, 8vw, 160px); /* GIGANTESQUE : 48px min, 8% de l'écran, 160px max */
    line-height: 1.15; /* Espacement des lignes très serré pour texte gigantesque */
    color: #000; /* Noir pour meilleur contraste */
    padding: clamp(24px, 4vw, 48px); /* Beaucoup d'espace pour texte gigantesque */
    text-align: center; /* Centré pour tableau interactif */
    word-wrap: break-word; /* Coupure des mots longs */
    overflow-wrap: break-word; /* Coupure des mots longs */
    font-weight: bold; /* Gras pour meilleure visibilité */
    letter-spacing: 2px; /* Plus d'espace entre lettres pour lisibilité */
  }
  
  .button-window-content-text p {
    margin: 0 !important; /* AUCUN espacement entre paragraphes pour utiliser toute la hauteur */
  }
  
  .button-window-content-text p:last-child {
    margin-bottom: 0; /* Pas de marge en bas du dernier paragraphe */
  }
  
  /* Style spécifique pour rendre les barres de fin cliquables - RESPONSIVE */
  .fixed-bar-line {
    cursor: pointer !important;
    z-index: 20 !important;
    width: clamp(6px, 0.4vw, 8px) !important; /* Responsive : de 6px à 8px */
    background-color: #000 !important; /* Noir plus intense */
    position: absolute;
    top: 0;
    right: clamp(-12px, -0.8vw, -16px) !important; /* Déplacée encore un peu plus vers la droite */
    height: 100%;
  }
  
  /* Ajouter un effet de surbrillance au survol pour mieux voir la barre cliquable */
  .fixed-bar-line:hover {
    background-color: #555 !important;
    box-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
  }
  
  /* Ajouter un indicateur visuel sur les barres de reprise */
  .fixed-bar-line.repeat-bar {
    background-color: #000 !important;
    box-shadow: 0 0 3px rgba(0,0,0,0.8) !important;
  }

  /* Tablettes : cible tactile élargie sur la barre de reprise elle-même */
/* Tablettes : dernière cellule — laisser passer les touches vers la barre de reprise */
    .tablet-repeat-bar-touch-strip {
      position: absolute;
      top: -12px;
      right: -28px;
      width: calc(35% + 28px);
      height: calc(100% + 24px);
      z-index: 45;
      touch-action: manipulation;
      background: transparent;
      pointer-events: auto;
    }

  @media (pointer: coarse) {
    .cell[data-position$="-8"] .position {
      pointer-events: none;
    }

    .cell[data-position$="-8"] .fixed-bar-line {
      z-index: 30 !important;
      touch-action: manipulation;
    }
  }

  @media (pointer: coarse) {
    .fixed-bar-line {
      z-index: 25 !important;
    }

    .fixed-bar-line::after {
      content: '';
      position: absolute;
      top: -16px;
      bottom: -16px;
      left: -36px;
      right: -36px;
      z-index: 1;
      pointer-events: auto;
    }
  }
  
  /* Style pour le conteneur principal des micro-boutons - RESPONSIVE */
  .mini-buttons-container {
    position: absolute !important;
    left: 5% !important; /* Marge de 5% de chaque côté */
    right: 5% !important; /* Marge de 5% de chaque côté */
    top: -28px !important; /* Positionné avec espacement optimal - ni trop ni trop peu */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Aligné à gauche pour permettre le MENU à gauche */
    gap: var(--micro-buttons-container-gap-default, 5px) !important;
    z-index: 100 !important;
    background-color: transparent !important;
    border: none !important; /* Pas de bordure */
    box-shadow: none !important; /* Pas d'ombre */
    outline: none !important; /* Pas de contour */
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important; /* Largeur automatique basée sur left/right */
    overflow: visible !important; /* MENU peut dépasser à gauche (bord écran) */
  }
  
  
  /* Style pour les rangées de micro-boutons - RESPONSIVE UNIFIÉ */
  .mini-buttons-row {
    display: flex !important;
    justify-content: stretch !important; /* Étirer pour remplir l'espace */
    gap: 0 !important; /* Supprimer l'espacement pour unifier */
    margin: 0 !important;
    padding: 0 0 0 var(--menu-reserved-left, 0px) !important; /* Place pour le MENU (colonne A) */
    box-sizing: border-box !important;
    width: 100% !important; /* Utiliser toute la largeur disponible */
    flex-wrap: nowrap !important; /* Empêcher le retour à la ligne */
  }
  
  /* Style amélioré pour les micro-boutons - RESPONSIVE UNIFIÉ */
  .micro-btn {
    flex: 1 !important; /* Chaque bouton prend une part égale de l'espace */
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
    padding: 0 0.5vw !important; /* Padding horizontal réduit pour unifier */
    margin: 0 !important;
    background-color: #e9dcc6 !important;
    border-radius: 0 !important; /* Supprimer les coins arrondis pour unifier */
    cursor: pointer !important;
    position: relative !important;
    border: 1px solid #cbb38f !important;
    border-right: none !important; /* Supprimer la bordure droite pour unifier */
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Centrer le texte */
    font-size: clamp(8px, 1.5vw, 12px) !important; /* Police responsive */
    color: #4b2c22 !important;
    font-weight: normal !important;
    text-align: center !important;
    overflow: hidden !important; /* Masquer le débordement */
    line-height: 1.2 !important;
    white-space: nowrap !important; /* Empêcher le retour à la ligne */
    text-overflow: ellipsis !important; /* Points de suspension si nécessaire */
    z-index: 2 !important; /* Ajouté pour l'ordre d'empilement */
  }

  /* Premier bouton de chaque rangée - coins arrondis à gauche */
  .micro-btn:first-child {
    border-radius: 3px 0 0 3px !important;
  }

  /* Dernier bouton de chaque rangée - coins arrondis à droite et bordure droite */
  .micro-btn:last-child {
    border-radius: 0 3px 3px 0 !important;
    border-right: 1px solid #ccc !important;
  }
  
  /* RÈGLES RESPONSIVE PRIORITAIRES - Barre des micro-boutons */
  .mini-buttons-container {
    left: 13% !important; /* Marge augmentée de 3% pour l'esthétique parfaite */
    right: 13% !important; /* Marge augmentée de 3% pour l'esthétique parfaite */
    width: auto !important;
    max-width: none !important;
    min-width: none !important;
  }

  .mini-buttons-row {
    width: 100% !important;
    gap: 0 !important;
    justify-content: stretch !important;
    flex-wrap: nowrap !important;
  }
  
  /* Espacement entre les boutons 1-5 et 6-10 (aligné sur --main-buttons-row-offset) */
  /* margin-bottom augmente l'écart ; la rangée 6-10 reste en place grâce au couple margin-top/margin-bottom */
  .mini-buttons-row-top, .mini-buttons-container > .mini-buttons-row:nth-child(2) {
    margin-top: calc(-1 * (var(--main-buttons-row-offset, 8px) - var(--micro-buttons-container-gap-default, 5px))) !important;
    margin-bottom: calc(var(--main-buttons-row-offset, 8px) - var(--micro-buttons-container-gap-default, 5px)) !important;
  }

  .micro-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    border-right: none !important;
    padding: 0 0.3vw !important; /* Padding réduit pour plus d'espace au texte */
    font-size: clamp(10px, 2.2vw, 16px) !important; /* Police plus grande en plein écran */
    font-weight: bold !important; /* Texte en gras pour meilleure lisibilité */
    letter-spacing: 0.8px !important; /* Espacement entre les lettres augmenté */
  }

  .micro-btn:first-child {
    border-radius: 3px 0 0 3px !important;
  }

  .micro-btn:last-child {
    border-radius: 0 3px 3px 0 !important;
    border-right: 1px solid #ccc !important;
  }

  /* Media queries pour la barre des micro-boutons - UNIFIÉ */
  @media (max-width: 1200px) {
    .mini-buttons-container {
      left: 9% !important; /* Marge proportionnelle augmentée de 3% */
      right: 9% !important; /* Marge proportionnelle augmentée de 3% */
    }
    .micro-btn {
      font-size: clamp(9px, 2vw, 14px) !important; /* Police optimisée pour cette taille */
      padding: 0 0.25vw !important; /* Padding réduit pour plus d'espace */
      font-weight: bold !important; /* Texte en gras maintenu */
      letter-spacing: 0.6px !important; /* Espacement adapté */
    }
    .btn-name {
      font-size: clamp(9px, 2vw, 14px) !important;
      letter-spacing: 0.6px !important;
      font-weight: bold !important;
    }
  }

  @media (max-width: 900px) {
    .mini-buttons-container {
      left: 7% !important; /* Marge proportionnelle augmentée de 3% */
      right: 7% !important; /* Marge proportionnelle augmentée de 3% */
    }
    .micro-btn {
      font-size: clamp(8px, 2.2vw, 12px) !important; /* Police optimisée pour cette taille */
      padding: 0 0.2vw !important; /* Padding réduit pour plus d'espace */
      font-weight: bold !important; /* Texte en gras maintenu */
      letter-spacing: 0.5px !important; /* Espacement adapté */
    }
    .btn-name {
      font-size: clamp(8px, 2.2vw, 12px) !important;
      letter-spacing: 0.5px !important;
      font-weight: bold !important;
    }
  }

  @media (max-width: 600px) {
    .mini-buttons-container {
      left: 5% !important; /* Marge proportionnelle augmentée de 3% */
      right: 5% !important; /* Marge proportionnelle augmentée de 3% */
    }
    .micro-btn {
      font-size: clamp(7px, 2.5vw, 10px) !important; /* Police optimisée pour cette taille */
      padding: 0 0.15vw !important; /* Padding réduit pour plus d'espace */
      font-weight: bold !important; /* Texte en gras maintenu */
      letter-spacing: 0.4px !important; /* Espacement adapté */
    }
    .btn-name {
      font-size: clamp(7px, 2.5vw, 10px) !important;
      letter-spacing: 0.4px !important;
      font-weight: bold !important;
    }
  }
  
  .btn-name {
    font-size: clamp(10px, 2.2vw, 16px) !important; /* Police responsive */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important; /* Utiliser flex pour un meilleur centrage */
    align-items: center !important; /* Centrage vertical */
    justify-content: center !important; /* Centrage horizontal */
    line-height: 1 !important; /* Ligne plus serrée */
    color: #000 !important;
    letter-spacing: 0.8px !important; /* Espacement entre les lettres augmenté */
    max-width: 140px !important;
    position: relative !important;
    z-index: 5 !important;
    font-weight: bold !important; /* Texte en gras pour meilleure lisibilité */
    text-align: center !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    transform: translateY(-1px) !important; /* Ajusté à -1px pour baisser légèrement */
    height: 100% !important; /* Utiliser toute la hauteur disponible */
  }
  
  /* Ajuster le conteneur du micro-bouton pour mieux centrer le contenu - RESPONSIVE */
  .micro-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0.3vw !important; /* Padding responsive maintenu et réduit */
    flex: 1 !important; /* Maintenir la flexibilité */
    width: auto !important; /* Largeur automatique */
    min-width: auto !important; /* Supprimer les contraintes de largeur */
    max-width: none !important; /* Supprimer les contraintes de largeur */
    font-size: clamp(10px, 2.2vw, 16px) !important; /* Police responsive optimisée */
    font-weight: bold !important; /* Texte en gras pour meilleure lisibilité */
    letter-spacing: 0.8px !important; /* Espacement entre les lettres augmenté */
  }
  
  /* Amélioration de la visibilité du texte dans les micro-boutons */
  .micro-btn:hover .btn-name,
  .micro-btn:hover .btn-number {
    color: #4b2c22 !important;
    font-weight: bold !important;
  }
  
  .micro-btn:active .btn-name,
  .micro-btn:active .btn-number {
    color: white !important;
  }
  
  .micro-btn:hover {
    background-color: #ddcbb0 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Ajout pour que les noms soient plus visibles sur les boutons actifs */
  .micro-btn.active {
    background-color: #964f3e !important; /* Couleur de fond bleue pour les boutons actifs */
  }
  
  .micro-btn.active .btn-name {
    color: white !important;
    font-weight: bold !important;
    text-shadow: 0px 0px 1px rgba(255,255,255,0.5) !important; /* Ajout d'une ombre pour meilleure visibilité */
  }
  
  .micro-btn.active .btn-number {
    color: white !important;
    font-weight: bold !important;
    text-shadow: 0px 0px 1px rgba(255,255,255,0.5) !important;
  }

  /* Contrôles réservés aux enseignants (choix C) — même rendu que PARTAGE */
  .micro-btn.partage-locked,
  .micro-btn.teacher-only-locked,
  .select-carton-btn.teacher-only-locked,
  .top-menu-item.teacher-only-locked {
    opacity: 0.42;
    cursor: not-allowed;
    filter: grayscale(0.35);
  }
  .micro-btn.partage-locked:hover,
  .micro-btn.teacher-only-locked:hover,
  .select-carton-btn.teacher-only-locked:hover,
  .top-menu-item.teacher-only-locked:hover {
    opacity: 0.5;
    transform: none;
    box-shadow: none;
  }
  .micro-btn.partage-locked.active,
  .micro-btn.teacher-only-locked.active {
    background: inherit;
  }
  .top-menu-item.teacher-only-locked {
    pointer-events: auto; /* clic → message, pas d'action */
  }

  /* RÈGLES RESPONSIVE PRIORITAIRES POUR LE TEXTE DES MICRO-BOUTONS */
  .micro-btn .btn-name {
    font-size: clamp(10px, 2.2vw, 16px) !important;
    font-weight: bold !important;
    letter-spacing: 0.8px !important;
  }

  @media (max-width: 1200px) {
    .micro-btn .btn-name {
      font-size: clamp(9px, 2vw, 14px) !important;
      letter-spacing: 0.6px !important;
      font-weight: bold !important;
    }
  }

  @media (max-width: 900px) {
    .micro-btn .btn-name {
      font-size: clamp(8px, 2.2vw, 12px) !important;
      letter-spacing: 0.5px !important;
      font-weight: bold !important;
    }
  }

  @media (max-width: 600px) {
    .micro-btn .btn-name {
      font-size: clamp(7px, 2.5vw, 10px) !important;
      letter-spacing: 0.4px !important;
      font-weight: bold !important;
    }
  }
  

/* =====================================================
   Chrome vs Edge : éviter le micro-scroll de page
   Chrome (barre classique) peut dépasser de quelques px ;
   Edge (overlay) paraît « plein écran total ».
   ===================================================== */
html {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow-x: hidden;
  max-width: 100%;
}
html:fullscreen,
html:-webkit-full-screen {
  overflow: hidden !important;
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
}
html:fullscreen body,
html:-webkit-full-screen body {
  overflow: hidden !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Petit dépassement détecté en JS : compacter sans scroller la page */
body.tri-soft-fit-viewport {
  overflow: hidden !important;
}
body.tri-soft-fit-viewport .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.tri-soft-fit-viewport:not(.low-resolution) .buttons {
  margin-top: 16px !important;
  margin-bottom: 4px !important;
}
body.tri-soft-fit-viewport:not(.low-resolution) .gallery-container {
  padding-top: 8px !important;
  padding-bottom: 10px !important;
}
body.tri-soft-fit-viewport.low-resolution .gallery-container {
  padding-bottom: max(10px, calc(clamp(20px, 1.5vw, 30px) - var(--tri-soft-fit-px, 0px))) !important;
}

/* Tablettes : hauteur réduite (plein écran perdu) → galerie rétrécie et centrée, calculée en JS */
html body.tri-tablet-height-fit .gallery-container {
  width: var(--tri-tablet-gallery-width) !important;
  max-width: var(--tri-tablet-gallery-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body.tri-tablet-height-fit .gallery .cell {
  min-height: 0 !important;
}


  /* Styles de base */
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #efe3d2;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  
  .container {
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
  }
  
  h1 {
    margin: 0;
    padding: 15px 0;
    font-size: 28px;
    background-color: #4b2c22;
    border-bottom: 3px solid #c9a37a;
    color: white !important;
    width: 100%;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
  }

  /* Doivent pouvoir afficher un nom complet de 75 caracteres : texte reparti
     sur deux lignes plutot que tronque par une ellipse. */
  .galerie-credit-bar,
  .galerie-file-name-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(11px, 1.05vw, 15px);
    font-weight: 500;
    line-height: 1.2;
    opacity: 0.96;
    color: white !important;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    width: min(36vw, 560px);
    overflow: hidden;
    pointer-events: none;
    display: none;
  }

  .galerie-file-name-bar {
    left: 18px;
    text-align: left;
  }

  .galerie-credit-bar {
    right: 18px;
    text-align: right;
    font-style: italic;
  }

  .galerie-credit-bar:not(:empty),
  .galerie-file-name-bar:not(:empty) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  @media (max-width: 900px) {
    .galerie-credit-bar,
    .galerie-file-name-bar {
      width: 32vw;
      font-size: clamp(10px, 1.5vw, 13px);
    }
  }


  
  .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end; /* Aligner les boutons en bas */
    gap: 20px;
    margin: 30px 0 10px 0; /* Augmenter la marge du haut pour éloigner les micro-boutons du titre */
    width: 100%;
    padding-top: 38px !important; /* Espace optimal pour éviter la superposition */
    position: relative !important; /* Contexte de positionnement pour les enfants absolus */
  }
  
  label, button {
    padding: 15px 30px;
    font-size: 18px;
    background-color: #8a4b38;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
  }
  
  /* Style spécifique pour le bouton "Encadré" (ex-Numérotation pulsations) */
  /* Les styles inline JavaScript (autres états) peuvent surcharger */
  #pulse-numbering-btn {
    background-color: #5f7f4a; /* Vert identique au bouton "Liaison" (repos) */
  }
  
  label, button {
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background-color 0.3s, transform 0.2s;
    flex-grow: 1;
    max-width: 250px;
  }
  
  label:hover, button:hover {
    background-color: #6f3a2b;
    transform: scale(1.05);
  }
  
  input[type="file"] {
    display: none;
  }
  
  .gallery-container {
    width: 100%; /* Responsive par défaut en haute résolution */
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;
    background-color: #fbf6ee;
    border: 2px solid #d9c4a5;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: relative !important; /* IMPORTANT pour que les subdivisions absolute se positionnent correctement */
    touch-action: none; /* PC+TNI : empêcher le menu tactile Windows (X dans cercle) qui bloque le glisser-déposer */
  }

  /* Barre verticale verte : déclencheur TAP (mode MANUEL 3 ou 4). À gauche de la galerie, sur toute la hauteur des 4 lignes. */
  .tap-trigger-bar {
    position: absolute;
    left: 0;
    width: 8px;
    min-width: 8px;
    background: #28a745;
    border-radius: 2px;
    cursor: pointer;
    z-index: 50;
    pointer-events: auto;
    box-shadow: 0 0 4px rgba(40, 167, 69, 0.5);
  }
  .tap-trigger-bar:hover {
    background: #218838;
    box-shadow: 0 0 6px rgba(40, 167, 69, 0.7);
  }
  
  /* Modification de la grille pour réduire l'espace entre les lignes */
  .gallery {
    touch-action: none; /* PC+TNI : empêcher le menu tactile Windows (X dans cercle) */
    display: grid;
    grid-template-columns: repeat(9, 1fr); /* Responsive par défaut */
    grid-gap: 0; /* Supprimé pour éliminer l'espace gris entre les cellules */
    row-gap: 0; /* Supprimé pour éliminer l'espace gris entre les lignes */
    width: 100%; /* Responsive par défaut */
    background-color: #e0e0e0; /* Gris pâle pour correspondre au fond des cellules */
    position: relative !important; /* IMPORTANT pour que les subdivisions absolute se positionnent dans la grille */
  }
  
  /* Modification de la cellule pour maintenir la taille des cartons */
  .cell {
    position: relative;
    min-height: 100px;
    aspect-ratio: 1/1; /* Responsive par défaut */
    margin-bottom: -3px; /* Compensation négative pour réduire l'espace vertical */
  }
  
  /* ============================================
     CONFIGURATIONS SPÉCIFIQUES PAR RÉSOLUTION
     ============================================ */
  
  /* 1280x720 et 1280x800 - Configuration optimale */
  /* Étape 2 — 1280 à 1439 px : même galerie fluide que l’étape 1
   (tablettes paysage, portables 1366). En dessous de 1280 px :
   anciens compromis encore en place. */
@media (max-width: 1280px) {
    .gallery-container {
      width: 100%;
      margin: 0 auto;
    }

    .gallery {
      grid-template-columns: repeat(9, 1fr);
      width: 100%;
    }

    .cell {
      width: auto;
      height: auto;
      aspect-ratio: 1/1;
    }
  }
  
  /* 1366x768 - Configuration optimale */
  /* Étape 2 — 1280 à 1439 px : même galerie fluide que l’étape 1
   (tablettes paysage, portables 1366). En dessous de 1280 px :
   anciens compromis encore en place. */
@media (min-width: 1281px) and (max-width: 1366px) {
    .gallery-container {
      width: 100%;
      margin: 0 auto;
    }

    .gallery {
      grid-template-columns: repeat(9, 1fr);
      width: 100%;
    }

    .cell {
      width: auto;
      height: auto;
      aspect-ratio: 1/1;
    }
  }
  
  /* 1440x900 - Configuration optimale */
  /* Étape 1 — écrans récents (1440px et plus) : plus de largeur/cellules
   figées héritées des vieux PC. On laisse la galerie fluide (comme en 1920).
   Les paliers 1280 / 1366 restent inchangés pour l’instant. */
@media (min-width: 1367px) and (max-width: 1440px) {
    .gallery-container {
      width: 100%;
      margin: 0 auto;
    }

    .gallery {
      grid-template-columns: repeat(9, 1fr);
      width: 100%;
    }

    .cell {
      width: auto;
      height: auto;
      aspect-ratio: 1/1;
    }
  }
  
  /* 1512x982 - Configuration optimale (Mac) */
  /* Ne s'applique que si la classe JavaScript n'est pas détectée */
  /* Étape 1 — écrans récents (1440px et plus) : plus de largeur/cellules
   figées héritées des vieux PC. On laisse la galerie fluide (comme en 1920).
   Les paliers 1280 / 1366 restent inchangés pour l’instant. */
@media (min-width: 1441px) and (max-width: 1512px) {
    .gallery-container {
      width: 100%;
      margin: 0 auto;
    }

    .gallery {
      grid-template-columns: repeat(9, 1fr);
      width: 100%;
    }

    .cell {
      width: auto;
      height: auto;
      aspect-ratio: 1/1;
    }
  }
  
  /* 1536x864 - Configuration optimale */
  /* Étape 1 — écrans récents (1440px et plus) : plus de largeur/cellules
   figées héritées des vieux PC. On laisse la galerie fluide (comme en 1920).
   Les paliers 1280 / 1366 restent inchangés pour l’instant. */
@media (min-width: 1513px) and (max-width: 1536px) {
    .gallery-container {
      width: 100%;
      margin: 0 auto;
    }

    .gallery {
      grid-template-columns: repeat(9, 1fr);
      width: 100%;
    }

    .cell {
      width: auto;
      height: auto;
      aspect-ratio: 1/1;
    }
  }
  
  /* Fallback pour toutes les autres résolutions entre 1537px et 1600px */
  /* Étape 1 — écrans récents (1440px et plus) : plus de largeur/cellules
   figées héritées des vieux PC. On laisse la galerie fluide (comme en 1920).
   Les paliers 1280 / 1366 restent inchangés pour l’instant. */
@media (min-width: 1537px) and (max-width: 1600px) {
    .gallery-container {
      width: 100%;
      margin: 0 auto;
    }

    .gallery {
      grid-template-columns: repeat(9, 1fr);
      width: 100%;
    }

    .cell {
      width: auto;
      height: auto;
      aspect-ratio: 1/1;
    }
  }
  
  .position {
    background-color: #e0e0e0;
    border: 2px dashed #aaa;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    font-size: 16px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
  }

  /* Mono-chiffrage uniquement : cellules inactives 2-1, 3-1, 4-1 (aspect carton blanc) */
  body.presentation-normal .cell.mono-inactive-col0-cell .position {
    background-color: white;
    border: 2px solid transparent;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    color: transparent;
  }

  body.presentation-normal .cell.mono-inactive-col0-cell .pulsation {
    display: none !important;
  }

  body.presentation-normal .cell.mono-levee-col0-cell .pulsation {
    display: none !important;
  }

  /* Bandeau du badge de tonalité : même fond que le badge, au-dessus de l'encadré. */
  body.presentation-normal .cell.mono-levee-col0-cell.levee-cell-gallery-complete::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(7px + clamp(14px, 1.5vw, 19px) + 3px);
    background: rgba(255, 255, 255, 0.92);
    pointer-events: none;
    z-index: 0;
  }

  /* Galerie complète : la levée inutilisée adopte le fond blanc des cartons,
     encadrée pour rappeler qu'il s'agit d'un emplacement de carton rythmique.
     Le texte « Levée bienvenue » reste lisible. */
  body.presentation-normal .cell.mono-levee-col0-cell.levee-cell-gallery-complete .position {
    background-color: white;
    border: 2px solid #aaa;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    color: #777;
    /* Bord supérieur juste sous le badge de tonalité (top 7px + hauteur 1em du badge). */
    top: calc(7px + clamp(14px, 1.5vw, 19px) + 3px);
    /* Les rangées se chevauchent de 3px (.cell margin-bottom: -3px) : sans ce retrait,
       le bord inférieur passe sous la rangée suivante et devient invisible.
       A 3px, il s'aligne sur le bas apparent des cartons voisins. */
    bottom: 3px;
    height: auto;
  }
  
  /* Style pour les barres de mesure - RESPONSIVE */
  .bar-line {
    position: absolute;
    width: clamp(4px, 0.3vw, 6px); /* Responsive : de 4px à 6px */
    background-color: #000000; /* Noir le plus foncé possible */
    height: 68%; /* Hauteur inchangée */
    right: 0; /* Aligné exactement à la limite droite de la cellule (sans déborder) */
    top: 17%; /* Commence à 20% du haut (4% plus bas qu'avant) */
    z-index: 10;
  }
  
  /* Style pour les cartons avec z-index ajusté pour être sous les pulsations */
  .carton {
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    background-color: white;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Réduit pour être sous les pulsations */
    /* Empêcher les gestes tactiles par défaut pour permettre le glisser-déposer */
    touch-action: none;
    -webkit-touch-callout: none; /* Empêcher le menu contextuel sur iOS */
    -webkit-user-select: none; /* Empêcher la sélection de texte */
    user-select: none;
    transition: border 0.2s ease, box-shadow 0.2s ease;
  }
  
  /* Style pour le carton sélectionné pour déplacement en mode tablette */
  /* Style pour un carton copié (système copier-coller) */
  .carton.carton-copied {
    border: 3px solid #28a745 !important;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.6) !important;
    transform: scale(1.05);
    transition: all 0.2s ease;
    z-index: 1000;
  }
  
  .carton.carton-selected-for-move {
    border: 3px solid #007BFF !important;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.6) !important;
    z-index: 10 !important;
  }
  
  /* Style pour la cellule source sélectionnée */
  .cell.cell-source-selected {
    background-color: rgba(0, 123, 255, 0.1) !important;
  }
  
  .carton.being-moved {
    opacity: 0.6;
    z-index: 100;
    pointer-events: none;
  }
  
  .carton.target-replaceable {
    border: 2px dashed #28a745 !important;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.7) !important;
    opacity: 0.8;
    transform: scale(0.98);
    transition: all 0.2s ease;
  }
  
  /* Style modifié pour les pulsations (rectangles rouges verticaux) - ADAPTATIF TEST */
  .pulsation {
    position: absolute;
    bottom: 0;
    left: 0.4vw; /* Relatif à la largeur de la fenêtre (viewport width) */
    width: 0.35vw; /* S'adapte à la fenêtre - TEST sans min/max */
    height: 1.2vw; /* S'adapte à la fenêtre - TEST sans min/max */
    background-color: #ff0000; /* Couleur rouge */
    border-radius: 2px; /* Coins arrondis */
    z-index: 3; /* Au-dessus des cartons */
    pointer-events: none; /* Permet de cliquer à travers */
    opacity: 1; /* Ne pas atténuer les numéros de pulsation (enfants) */
    transition: background-color 0.1s ease-in-out;
  }
  
  /* État éteint : barre rouge atténuée, numéros inchangés */
  .pulsation.inactive {
    background-color: rgba(255, 0, 0, 0.2);
  }
  
  /* État actif de la pulsation pendant la lecture (celle qui est jouée) */
  .pulsation.active {
    background-color: #ff0000;
  }

  /* Mono 2/2 et 4/2 : barres entre les chiffres de pulsation (2e cellule de blanche) */
  .pulsation.cut-time-interpulse {
    background-color: #9aa0a6;
  }

  .pulsation.cut-time-interpulse.inactive {
    background-color: rgba(154, 160, 166, 0.35);
  }

  .pulsation.cut-time-interpulse.active {
    background-color: #ff0000;
  }
  
  /* Style pour le sélecteur de chiffrage */
  #time-signature {
    margin-left: 5px;
    background-color: #6c757d;
    color: white;
    border: none;
    cursor: pointer;
  }
  
  /* Style pour le mini-bouton de chiffrage - HAUTEUR FIXE */
  #miniBtn {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Style pour les numéros de pulsation - ADAPTATIF */
  .pulse-number {
    position: absolute;
    bottom: -1px; /* Position inchangée */
    left: 0.4vw; /* Aligné juste après la pulsation */
    font-size: clamp(12px, 1.1vw, 22px); /* Taille adaptative basée sur viewport */
    font-weight: bold;
    color: #333;
    display: none; /* Caché par défaut */
    opacity: 1;
    z-index: 4;
  transform-origin: left bottom;
  transform: scale(1);
  transition: none;
  will-change: transform;
}

.pulse-number.pulse-number-active {
  transform: scale(1.5);
}

/* Numéro de répétition indépendant, juste sous l'angle supérieur gauche de l'encadré vert. */
.encadre-repeat-count {
  position: absolute;
  top: calc(10% + clamp(4px, 0.5vw, 8px));
  left: clamp(14px, 1.3vw, 22px);
  color: #2ecc71;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(18px, 2vw, 34px);
  font-weight: 800;
  line-height: 1;
  z-index: 61;
  pointer-events: none;
  -webkit-text-stroke: clamp(0.55px, 0.075vw, 1px) #111;
  paint-order: stroke fill;
  text-shadow: none;
}
  
  /* Styles pour les subdivisions "ET" et "et" DANS les cellules - ADAPTATIF */
  .cell-subdivision-et {
    position: absolute;
    bottom: -1px; /* Position en bas de la cellule, comme les numéros de pulsation */
    font-weight: bold;
    color: #000;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 0 0.2vw;
    border-radius: 3px;
    pointer-events: none;
    z-index: 50;
    display: none; /* Caché par défaut */
  }
  
  /* Grand "ET" binaire */
  .cell-subdivision-et.binary {
    left: 50%; /* Centré dans la cellule */
    transform: translateX(calc(-50% + clamp(7px, 1.3vw, 19px))); /* Centrage avec décalage ajusté par résolution */
    font-size: clamp(12px, 0.8vw, 16px);
  }
  
  /* Petit "et" ternaire - premier (1/3) */
  .cell-subdivision-et.ternary-1 {
    left: 33.33%; /* À 1/3 de la cellule */
    transform: translateX(calc(-50% + clamp(-6px, 1.3vw, 17px))); /* Centrage avec décalage ajusté par résolution */
    font-size: clamp(10px, 0.9vw, 18px);
  }
  
  /* Petit "et" ternaire - deuxième (2/3) */
  .cell-subdivision-et.ternary-2 {
    left: 66.66%; /* À 2/3 de la cellule */
    transform: translateX(calc(-50% + clamp(-6px, 1.3vw, 17px))); /* Centrage avec décalage ajusté par résolution */
    font-size: clamp(10px, 0.9vw, 18px);
  }
  
  .cell.start-cell-highlight-start,
  .cell.start-cell-highlight-end,
  .cell.start-cell-highlight-end-guide,
  .cell.start-cell-highlight-start-guide {
    position: relative;
  }

.cell.start-cell-highlight-start::after,
.cell.start-cell-highlight-end::after {
  content: '';
  position: absolute;
  top: 10%;
  left: clamp(2px, 0.3vw, 8px);
  height: calc(25% - clamp(2px, 0.3vw, 6px));
  width: var(--highlight-width, calc(100% - clamp(4px, 0.6vw, 16px)));
  border: clamp(5px, 0.87vw, 13px) solid;
  border-bottom: none;
  pointer-events: none;
  z-index: 60;
}

.cell.start-cell-highlight-end-guide::after,
.cell.start-cell-highlight-start-guide::after {
  --encadre-guide-stroke: clamp(5px, 0.72vw, 9px);
  --encadre-guide-dash-on: 5px;
  --encadre-guide-dash-off: 2px;
  content: '';
  position: absolute;
  top: 10%;
  height: calc(25% - clamp(2px, 0.3vw, 6px));
  border: none;
  pointer-events: none;
  z-index: 59;
  opacity: 1;
  transform: scaleY(0.75);
}

.cell.start-cell-highlight-end-guide::after {
  left: clamp(2px, 0.3vw, 8px);
  width: var(--highlight-width, calc(100% - clamp(4px, 0.6vw, 16px)));
  border-radius: 0 clamp(4px, 0.6vw, 10px) 0 0;
  transform-origin: right top;
  background:
    repeating-linear-gradient(
      to right,
      rgba(229, 57, 53, 1) 0,
      rgba(229, 57, 53, 1) var(--encadre-guide-dash-on),
      transparent var(--encadre-guide-dash-on),
      transparent calc(var(--encadre-guide-dash-on) + var(--encadre-guide-dash-off))
    ) top left / 100% var(--encadre-guide-stroke) no-repeat,
    repeating-linear-gradient(
      to bottom,
      rgba(229, 57, 53, 1) 0,
      rgba(229, 57, 53, 1) var(--encadre-guide-dash-on),
      transparent var(--encadre-guide-dash-on),
      transparent calc(var(--encadre-guide-dash-on) + var(--encadre-guide-dash-off))
    ) top right / var(--encadre-guide-stroke) 100% no-repeat;
}

.cell.start-cell-highlight-start-guide::after {
  left: clamp(2px, 0.3vw, 8px);
  width: calc(50% - clamp(2px, 0.3vw, 8px));
  border-radius: clamp(4px, 0.6vw, 10px) 0 0 0;
  transform-origin: left top;
  background:
    repeating-linear-gradient(
      to right,
      rgba(46, 204, 113, 1) 0,
      rgba(46, 204, 113, 1) var(--encadre-guide-dash-on),
      transparent var(--encadre-guide-dash-on),
      transparent calc(var(--encadre-guide-dash-on) + var(--encadre-guide-dash-off))
    ) top left / 100% var(--encadre-guide-stroke) no-repeat,
    repeating-linear-gradient(
      to bottom,
      rgba(46, 204, 113, 1) 0,
      rgba(46, 204, 113, 1) var(--encadre-guide-dash-on),
      transparent var(--encadre-guide-dash-on),
      transparent calc(var(--encadre-guide-dash-on) + var(--encadre-guide-dash-off))
    ) top left / var(--encadre-guide-stroke) 100% no-repeat;
}

.cell.start-cell-highlight-start::after {
  border-color: #2ecc71;
  border-right: none;
  border-radius: clamp(4px, 0.6vw, 10px) 0 0 0;
  transform-origin: left top;
  transform: scaleY(0.75);
}

.cell.start-cell-highlight-end::after {
  border-color: #e53935;
  border-left: none;
  border-radius: 0 clamp(4px, 0.6vw, 10px) 0 0;
  transform-origin: right top;
  transform: scaleY(0.75);
}

.cell.highlight-selection::after {
  border-color: #ff5252 !important;
  border-width: clamp(11px, 1.46vw, 24px) !important;
}

.cell.playback-highlight {
  position: relative;
}

/* Épaisseur de la barre bleue (lecture auto + TAP) : moitié des valeurs d’origine */
.playback-indicator {
  position: absolute;
  top: calc(100% + clamp(-1px, 0.05vw, 3px));
  left: clamp(2px, 0.3vw, 8px);
  right: clamp(2px, 0.3vw, 8px);
  height: clamp(1.8px, 0.315vw, 4.5px);
  pointer-events: none;
  z-index: 55;
}

.playback-indicator-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(1.6px, 0.24vw, 4.05px);
  background-color: #1e88e5;
}
  
  /* Modification de la couleur du bouton Effacer */
  .clear-btn {
    background-color: #9c27b0;
  }
  
  .clear-btn:hover {
    background-color: #7b1fa2;
  }
  
  .save-btn {
    background-color: #28a745;
  }
  
  .save-btn:hover {
    background-color: #218838;
  }
  
  .select-carton-btn {
    background-color: #c2702e; /* Orange */
  }
  
  .select-carton-btn:hover {
    background-color: #a95f23; /* Orange foncé au survol */
  }
  
  .random-btn {
    background-color: #5f7f4a; /* Vert identique au bouton PLAY */
  }
  
  .random-btn:hover {
    background-color: #4e6b3c; /* Vert foncé au survol */
  }
  
  .new-btn {
    background-color: #17a2b8;
  }
  
  .new-btn:hover {
    background-color: #138496;
  }
  
  /* Style pour le bouton d'effacement de carton avec animation de clignotement */
  .delete-carton-btn {
    background-color: #9e3b2f;
    padding: 12px 16px;
    max-width: fit-content;
    min-width: auto;
    width: fit-content;
  }
  
  .delete-carton-btn:hover {
    background-color: #85301f;
  }
  
  /* Réduire la hauteur des 7 premiers boutons */
  .mini-btn, 
  label[for="folderInput"], 
  .clear-btn, 
  .save-btn, 
  .select-carton-btn, 
  .random-btn, 
  .delete-carton-btn {
    min-height: 45px !important; /* Hauteur réduite */
    padding: 8px 10px !important; /* Padding vertical réduit */
    font-size: 18px !important; /* Taille de police légèrement réduite */
  }
  
  /* Ajuster l'espacement du texte sur deux lignes */
  .mini-btn .btn-text-wrap, 
  label[for="folderInput"] .btn-text-wrap, 
  .clear-btn .btn-text-wrap, 
  .test-btn .btn-text-wrap,
  .save-btn .btn-text-wrap, 
  .select-carton-btn .btn-text-wrap, 
  .random-btn .btn-text-wrap, 
  .delete-carton-btn .btn-text-wrap {
    margin-top: 2px !important; /* Espace réduit entre les deux lignes de texte */
  }
  
  /* PHASE 3 : Styles favoris commentés - Désactivé
  .favorites-btn {
    min-height: 60px;
    padding: 12px 20px;
    font-size: 16px;
  }
  Fin PHASE 3 */
  
  .mini-btn:hover {
    background-color: #5a3b58; /* Couleur plus foncée au survol */
    transform: scale(1.05);
  }
  
  /* Style spécifique pour le bouton Mini en orientation verticale */
  .mini-btn {
    width: 58px !important; /* Même que la hauteur des autres boutons */
    height: 116px !important; /* Hauteur doublée pour correspondre au bouton Effacer */
    writing-mode: vertical-rl !important; /* Texte vertical */
    text-orientation: mixed !important;
    transform: rotate(180deg) !important; /* Pour que le texte soit dans le bon sens */
    margin-right: 0 !important; /* Trio chiffrage/HP/PLAY (témoin chiffrage puis haut-parleur) : gap de la rangée seulement */
    margin-left: 0 !important;
    min-width: auto !important; /* Annuler la largeur minimale */
    max-width: 58px !important; /* Limiter la largeur maximale */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #6d4a6b !important; /* Couleur violette pour le distinguer */
  }
  
  /* Ajustement pour le bouton Mini avec image */
  .mini-btn.has-image {
    transform: none !important; /* Ne pas pivoter quand il y a une image */
    writing-mode: horizontal-tb !important; /* Revenir à l'orientation normale pour les images */
    text-orientation: mixed !important;
    background-size: cover !important; /* Couvrir tout l'espace du bouton */
    color: transparent !important; /* Rendre le texte invisible quand il y a une image */
    padding: 0 !important; /* Supprimer le padding pour maximiser l'espace de l'image */
  }
  
  /* RESPONSIVE - Mini-bouton (carré) */
  #miniBtn.mini-btn {
    /* Maintenir un carré responsive */
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    transform: rotate(180deg) !important;
    color: white !important;
    background-color: #6d4a6b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    font-size: clamp(14px, 2vw, 20px) !important;
    padding: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Version avec image - responsive */
  #miniBtn.mini-btn.has-image {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    color: transparent !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Media queries pour le mini-bouton */
  @media (max-width: 1200px) {
    #miniBtn.mini-btn {
      width: 52px !important;
      height: 52px !important;
      min-width: 52px !important;
      max-width: 52px !important;
      min-height: 52px !important;
      max-height: 52px !important;
      font-size: clamp(12px, 2.2vw, 18px) !important;
    }
  }

  @media (max-width: 900px) {
    #miniBtn.mini-btn {
      width: 46px !important;
      height: 46px !important;
      min-width: 46px !important;
      max-width: 46px !important;
      min-height: 46px !important;
      max-height: 46px !important;
      font-size: clamp(10px, 2.5vw, 16px) !important;
      padding: 6px !important;
    }
  }

  @media (max-width: 600px) {
    #miniBtn.mini-btn {
      width: 40px !important;
      height: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      font-size: clamp(8px, 3vw, 14px) !important;
      padding: 5px !important;
    }
  }
  
  .mini-btn.has-image {
    border: 3px solid #5f7f4a;
    padding: 3px !important; /* Réduire le padding pour donner plus d'espace à l'image */
    position: relative;
    overflow: hidden; /* Pour s'assurer que l'image ne déborde pas */
  }
  
  /* ============================================
     BOUTON DE LECTURE RYTHMIQUE (3 états)
     ============================================ */
  
  .play-btn {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    border: 3px solid #5f7f4a !important; /* Contour vert par défaut */
    border-radius: 5px;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 10px 0 0 !important; /* Pas de marge gauche (trio serré) ; droite = espacement métronome actuel */
    box-sizing: border-box !important;
    background-color: transparent !important;
    position: relative;
    /* Centre visuel entre chiffrage et métronome sans déplacer les voisins
       (écart droit ≈ 40px vs gauche 20px → décalage +10px) */
    left: 10px;
    transition: all 0.3s ease;
  }
  
  /* État waiting : contour jaune */
  .play-btn.waiting {
    border-color: #d1a64a !important; /* Jaune */
  }
  
  /* État playing : contour rouge */
  .play-btn.playing {
    border-color: #9e3b2f !important; /* Rouge */
  }
  
  /* État 1 : Triangle vert (play) - État initial */
  .play-btn::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 26px solid #5f7f4a; /* Vert - Triangle plus gros */
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    margin-left: 2px; /* Décalage pour centrer visuellement */
  }
  
  /* État 2 : Triangle jaune clignotant (en attente) */
  .play-btn.waiting::before {
    border-left-color: #d1a64a; /* Jaune */
    animation: blink-yellow 1s infinite;
  }
  
  @keyframes blink-yellow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  
  /* État 3 : Carré rouge (stop) - Lecture en cours */
  .play-btn.playing::before {
    width: 24px;
    height: 24px;
    border: none;
    background-color: #9e3b2f; /* Rouge */
    margin-left: 0;
    border-radius: 2px;
    animation: none;
  }
  
  /* Hover pour l'état initial */
  .play-btn:hover:not(.waiting):not(.playing)::before {
    border-left-color: #4e6b3c; /* Vert plus foncé */
  }
  
  .play-btn:hover:not(.waiting):not(.playing) {
    border-color: #4e6b3c !important; /* Contour vert plus foncé au survol */
  }
  
  /* Hover pour l'état lecture */
  .play-btn.playing:hover::before {
    background-color: #85301f; /* Rouge plus foncé */
  }
  
  .play-btn.playing:hover {
    border-color: #85301f !important; /* Contour rouge plus foncé au survol */
  }
  
  /* Hover pour l'état waiting */
  .play-btn.waiting:hover {
    border-color: #b98f35 !important; /* Contour jaune plus foncé au survol */
  }
  
  /* Responsive - même breakpoints que le mini-btn */
  @media (max-width: 1200px) {
    .play-btn {
      width: 52px !important;
      height: 52px !important;
      min-width: 52px !important;
      max-width: 52px !important;
      min-height: 52px !important;
      max-height: 52px !important;
    }
    .play-btn::before {
      border-left-width: 22px;
      border-top-width: 14px;
      border-bottom-width: 14px;
      margin-left: 2px;
    }
    .play-btn.playing::before {
      width: 20px;
      height: 20px;
    }
  }
  
  @media (max-width: 900px) {
    .play-btn {
      width: 46px !important;
      height: 46px !important;
      min-width: 46px !important;
      max-width: 46px !important;
      min-height: 46px !important;
      max-height: 46px !important;
    }
    .play-btn::before {
      border-left-width: 20px;
      border-top-width: 12px;
      border-bottom-width: 12px;
      margin-left: 1px;
    }
    .play-btn.playing::before {
      width: 18px;
      height: 18px;
    }
  }
  
  @media (max-width: 600px) {
    .play-btn {
      width: 40px !important;
      height: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
    }
    .play-btn::before {
      border-left-width: 16px;
      border-top-width: 10px;
      border-bottom-width: 10px;
      margin-left: 1px;
    }
    .play-btn.playing::before {
      width: 16px;
      height: 16px;
    }
  }
  

  .mini-btn.has-image::after {
    content: "✓";
    position: absolute;
    bottom: 2px;
    right: 2px;
    background-color: rgba(95, 127, 74, 0.85);
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
  }
  
  /* ============================================
     BOUTON MÉTRONOME (2 états : rouge/vert)
     ============================================ */
  
  .metronome-btn {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    border: none !important;
    border-radius: 5px;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 10px !important;
    box-sizing: border-box !important;
    position: relative !important; /* Nécessaire pour positionner l'affichage du BPM */
    background-color: #f6ead2 !important;
    transition: all 0.3s ease;
    /* Miniature du BIG métronome (bois + pendule) */
    background-image: url("M_Bouton_Metronome.png");
    background-size: auto 90% !important;
    background-position: center 3px !important;
    background-repeat: no-repeat !important;
    overflow: visible !important; /* Permettre au BPM de dépasser si nécessaire */
  }
  
  /* État rouge (désactivé/OFF) - Métronome rouge */
  .metronome-btn.active {
    background-image: url("M_Bouton_Metronome.png");
  }
  
  /* Supprimer les pseudo-éléments précédents */
  .metronome-btn::before,
  .metronome-btn::after {
    display: none !important;
  }
  
  /* Hover pour le bouton métronome */
  .metronome-btn:hover:not(.active) {
    opacity: 0.8;
  }
  
  .metronome-btn.active:hover {
    opacity: 0.8;
  }
  
  /* État bleu (PARAMÈTRES) - Métronome bleu avec icône d'engrenage */
  .metronome-btn.params {
    background-image: url("M_Bouton_Metronome.png");
  }
  
  .metronome-btn.params:hover {
    opacity: 0.8;
  }
  
  /* Affichage du BPM sur l'icône du métronome */
  .metronome-bpm-display {
    position: absolute !important;
    bottom: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: #4b2c22 !important;
    color: #f8ecd4 !important;
    font-weight: bold !important;
    font-size: 10px !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
    border: 1px solid #d9b98a !important;
    pointer-events: none !important;
    z-index: 10 !important; /* Z-index modéré pour être au-dessus du bouton mais en dessous des fenêtres (z-index: 20+) */
    line-height: 1.1 !important;
    min-width: 22px !important;
    text-align: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }
  
  /* S'assurer que le span est au-dessus de l'image de fond */
  .metronome-btn .metronome-bpm-display {
    position: absolute !important;
    z-index: 10 !important; /* Z-index modéré pour être en dessous des fenêtres (z-index: 20+) */
  }
  
  /* Responsive pour l'affichage du BPM */
  @media (max-width: 1200px) {
    .metronome-bpm-display {
      font-size: 10px;
      padding: 1px 3px;
      bottom: 1px;
    }
  }
  
  @media (max-width: 768px) {
    .metronome-bpm-display {
      font-size: 9px;
      padding: 0px 2px;
      bottom: 1px;
    }
  }
  
  /* Menu de paramètres du métronome */
  /* Responsive - même breakpoints que le play-btn */
  @media (max-width: 1200px) {
    .metronome-btn {
      width: 52px !important;
      height: 52px !important;
      min-width: 52px !important;
      max-width: 52px !important;
      min-height: 52px !important;
      max-height: 52px !important;
    }
  }
  
  @media (max-width: 900px) {
    .metronome-btn {
      width: 46px !important;
      height: 46px !important;
      min-width: 46px !important;
      max-width: 46px !important;
      min-height: 46px !important;
      max-height: 46px !important;
    }
  }
  
  @media (max-width: 600px) {
    .metronome-btn {
      width: 40px !important;
      height: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
    }
  }
  
  /* ============================================
     BOUTON HAUT-PARLEUR (2 états : ON/OFF)
     ============================================ */
  
  .speaker-btn {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    border: 3px solid #5f7f4a !important; /* Contour vert par défaut (ON) */
    border-radius: 5px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important; /* Espacement via .main-buttons-row gap (comme Effacer galerie/carton) */
    box-sizing: border-box !important;
    background-color: #5f7f4a !important; /* Fond vert par défaut (ON) */
    position: relative !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
  }
  
  /* État OFF (rouge) pour le bouton speaker */
  .speaker-btn.active {
    background-color: #9e3b2f !important; /* Rouge (OFF) */
    border-color: #9e3b2f !important; /* Contour rouge (OFF) */
  }
  
  /* Hover pour le bouton speaker */
  .speaker-btn:hover:not(.active) {
    border-color: #4e6b3c !important; /* Contour vert plus foncé au survol */
    background-color: #4e6b3c !important;
  }
  
  .speaker-btn.active:hover {
    border-color: #85301f !important; /* Contour rouge plus foncé au survol */
    background-color: #85301f !important;
  }

  /* État Habituel (straight) : fond rouge, mot « Swing », X fin par-dessus le libellé */
  .speaker-btn.show-style-label:not(.style-swing):not(.active),
  .speaker-btn.style-straight:not(.active) {
    background-color: #9e3b2f !important;
    border-color: #9e3b2f !important;
  }

  .speaker-btn.show-style-label:not(.style-swing):not(.active):hover,
  .speaker-btn.style-straight:not(.active):hover {
    background-color: #85301f !important;
    border-color: #85301f !important;
  }

  .speaker-btn.show-style-label:not(.style-swing):not(.active) .speaker-icon,
  .speaker-btn.style-straight:not(.active) .speaker-icon {
    fill: #ffffff !important;
  }

  .speaker-btn.show-style-label:not(.style-swing):not(.active) .speaker-style-label,
  .speaker-btn.style-straight:not(.active) .speaker-style-label {
    color: #ffffff !important;
  }

  /* Enveloppe du libellé : le X se centre sur le mot « Swing » */
  .speaker-btn .speaker-style-label-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    max-width: 100% !important;
  }

  /* X fin / grand — calé sur le rectangle du mot (pas le X muet plein bouton) */
  .speaker-btn .speaker-swing-off-x {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 118% !important;
    height: 145% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 16 !important;
    pointer-events: none !important;
    display: none !important;
    overflow: visible !important;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.55)) !important;
  }
  .speaker-btn .speaker-swing-off-x line {
    stroke: #ffffff !important;
    stroke-width: 2.25 !important;
    stroke-linecap: round !important;
  }
  .speaker-btn.style-straight.show-style-label:not(.active) .speaker-swing-off-x,
  .speaker-btn.show-style-label:not(.style-swing):not(.active) .speaker-swing-off-x {
    display: block !important;
  }
  /* Masquer ce X fin en Swing jaune ou en muet */
  .speaker-btn.style-swing .speaker-swing-off-x,
  .speaker-btn.active .speaker-swing-off-x {
    display: none !important;
  }

  /* Laisser dépasser un peu le X sans le couper */
  .speaker-btn.show-style-label {
    overflow: visible !important;
  }

  /* État Swing — mêmes couleurs que « Aide-mémoire » : fond jaune, texte + icône noirs */
  .speaker-btn.style-swing:not(.active) {
    background-color: #d1a64a !important;
    border-color: #d1a64a !important;
  }

  .speaker-btn.style-swing:not(.active):hover {
    background-color: #b98f35 !important;
    border-color: #b98f35 !important;
  }

  .speaker-btn.style-swing:not(.active) .speaker-icon {
    fill: #000000 !important;
  }

  .speaker-btn.style-swing:not(.active) .speaker-style-label {
    color: #3a2018 !important;
    text-shadow: none !important;
  }
  
  /* Contenu empilé : même hauteur 58px que Aide-mémoire / barre principale */
  .speaker-btn.has-style-label,
  .speaker-btn.show-style-label {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    /* Largeur proche des boutons texte (Aide-mémoire, etc.) */
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    align-self: flex-end !important;
    overflow: visible !important;
  }

  /* Icône compacte pour laisser place au libellé dans 58px */
  .speaker-btn.show-style-label .speaker-icon,
  .speaker-btn.has-style-label .speaker-icon {
    width: 18px !important;
    height: 18px !important;
    margin-top: 1px !important;
  }

  .speaker-btn .speaker-icon {
    width: 32px !important;
    height: 32px !important;
    fill: white !important;
    display: block !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
  }

  /* Label bas : maximisé dans le bouton 58×96 (harmonisé) */
  .speaker-btn .speaker-style-label {
    display: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.05em !important;
    color: rgba(255, 255, 255, 0.98) !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    margin-top: auto !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    z-index: 5 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) !important;
  }

  .speaker-btn.show-style-label .speaker-style-label,
  .speaker-btn .speaker-style-label.is-visible {
    display: block !important;
  }

  .speaker-btn .speaker-style-label.is-straight {
    font-weight: 800 !important;
    letter-spacing: -0.06em !important;
  }

  .speaker-btn .speaker-style-label.is-swing {
    font-weight: 900 !important;
    font-size: 19px !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
  }
  
  /* Style pour le X superposé sur le bouton speaker (visible uniquement quand rouge/OFF) */
  .speaker-btn .speaker-x-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 15 !important;
    pointer-events: none !important; /* Permettre les clics à travers le X */
    display: none !important; /* Caché par défaut (quand vert/ON) */
    transition: opacity 0.3s ease !important;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8)) !important;
  }
  
  /* Lignes du X - épaisseur fine pour voir l'icône en dessous */
  .speaker-btn .speaker-x-overlay line {
    stroke: white !important;
    stroke-width: 3 !important;
    stroke-linecap: round !important;
  }
  

  /* Afficher le X uniquement quand le bouton est rouge (OFF) */
  .speaker-btn.active .speaker-x-overlay {
    display: block !important;
  }
  
  /* Responsive - même breakpoints que le play-btn */
  @media (max-width: 1200px) {
    .speaker-btn {
      width: 52px !important;
      height: 52px !important;
      min-width: 52px !important;
      max-width: 52px !important;
      min-height: 52px !important;
      max-height: 52px !important;
    }
    .speaker-btn.has-style-label,
    .speaker-btn.show-style-label {
      width: 88px !important;
      min-width: 88px !important;
      max-width: 88px !important;
      height: 52px !important;
      min-height: 52px !important;
      max-height: 52px !important;
    }
    
    .speaker-btn .speaker-icon {
      width: 26px !important;
      height: 26px !important;
    }
    .speaker-btn.show-style-label .speaker-icon,
    .speaker-btn.has-style-label .speaker-icon {
      width: 16px !important;
      height: 16px !important;
    }
    .speaker-btn .speaker-style-label {
      font-size: 15px !important;
    }
    .speaker-btn .speaker-style-label.is-swing {
      font-size: 17px !important;
    }
    
    .speaker-btn .speaker-x-overlay line {
      stroke-width: 2.5 !important;
    }
  }
  
  @media (max-width: 900px) {
    .speaker-btn {
      width: 46px !important;
      height: 46px !important;
      min-width: 46px !important;
      max-width: 46px !important;
      min-height: 46px !important;
      max-height: 46px !important;
    }
    .speaker-btn.has-style-label,
    .speaker-btn.show-style-label {
      width: 80px !important;
      min-width: 80px !important;
      max-width: 80px !important;
      height: 46px !important;
      min-height: 46px !important;
      max-height: 46px !important;
    }
    
    .speaker-btn .speaker-icon {
      width: 22px !important;
      height: 22px !important;
    }
    .speaker-btn.show-style-label .speaker-icon,
    .speaker-btn.has-style-label .speaker-icon {
      width: 14px !important;
      height: 14px !important;
    }
    .speaker-btn .speaker-style-label {
      font-size: 13px !important;
    }
    .speaker-btn .speaker-style-label.is-swing {
      font-size: 15px !important;
    }
    
    .speaker-btn .speaker-x-overlay line {
      stroke-width: 2.2 !important;
    }
  }
  
  @media (max-width: 600px) {
    .speaker-btn {
      width: 40px !important;
      height: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
    }
    .speaker-btn.has-style-label,
    .speaker-btn.show-style-label {
      width: 72px !important;
      min-width: 72px !important;
      max-width: 72px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
    }
    
    .speaker-btn .speaker-icon {
      width: 18px !important;
      height: 18px !important;
    }
    .speaker-btn.show-style-label .speaker-icon,
    .speaker-btn.has-style-label .speaker-icon {
      width: 12px !important;
      height: 12px !important;
    }
    .speaker-btn .speaker-style-label {
      font-size: 11px !important;
    }
    .speaker-btn .speaker-style-label.is-swing {
      font-size: 12px !important;
    }
    
    .speaker-btn .speaker-x-overlay line {
      stroke-width: 2 !important;
    }
  }
  
  .notification {
    position: fixed;
    top: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    background-color: #8a4b38;
    color: white;
    padding: 4px 16px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1001;
    font-size: clamp(14px, 1.6vw, 20px);
    line-height: 1.3;
    max-width: min(92vw, 960px);
    text-align: center;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  
  .notification.show {
    opacity: 1;
    visibility: visible;
  }
  
  .cell.highlight {
    position: relative;
  }
  
  .cell.highlight::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,123,255,0.3);
    border: 2px solid #007BFF;
    border-radius: 5px;
    z-index: 1;
  }
  
  /* Style pour le mode suppression */
  .carton.delete-mode {
    cursor: not-allowed;
  }
  
  .carton.delete-mode:hover {
    border: 2px solid #dc3545;
    box-shadow: 0 0 10px rgba(220,53,69,0.5);
  }
  
  /* Style pour la cellule cible de glissement */
  .cell.target-highlight::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(40,167,69,0.3);
    border: 2px solid #28a745;
    border-radius: 5px;
    z-index: 1;
  }
  
  /* Style pour le carton sélectionné pour copier */
  .carton.selected-for-copy {
    border: 3px solid #17a2b8;
    box-shadow: 0 0 15px rgba(23,162,184,0.7);
  }
  
  /* Ajustement pour les cartons de différentes tailles */
  .carton[data-span="2"] {
    width: calc(200% + 5px); /* Ajusté pour le nouvel espacement */
  }
  
  .carton[data-span="3"] {
    width: calc(300% + 10px); /* Ajusté pour le nouvel espacement */
  }
  
  .carton[data-span="4"] {
    width: calc(400% + 15px); /* Ajusté pour le nouvel espacement */
  }
  
  .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    overflow: auto;
  }
  
  .modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border-radius: 8px;
    width: 60%;
    max-width: 600px;
  }
  
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }
  
  .close:hover {
    color: black;
  }
  
  .modal-title {
    margin-top: 0;
    color: #333;
  }
  
  .modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
  }
  .fullscreen-continue-modal {
    position: fixed;
    inset: 0;
    /* Sous les Premiers pas (30350) : l'invite ne doit jamais les masquer */
    z-index: 30200;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
  }

  .fullscreen-continue-content {
    background: #fff;
    border-radius: 12px;
    padding: 28px 32px 24px;
    max-width: min(520px, 92vw);
    width: auto;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
    text-align: center;
  }

  .fullscreen-continue-message {
    margin: 0 0 18px;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 500;
    line-height: 1.45;
    color: #222;
  }

  .fullscreen-continue-btn {
    background-color: #28a745 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 600;
    cursor: pointer;
    min-width: 140px;
  }

  .fullscreen-continue-btn:hover {
    background-color: #218838 !important;
  }

  .dismissible-action-tip-modal {
    position: fixed;
    /* Au-dessus de .fullscreen-continue-modal (30200) pour que les Premiers pas restent visibles */
    z-index: 30350;
    display: none;
    background-color: rgba(0, 0, 0, 0.58);
    overflow: visible;
    box-sizing: border-box;
  }

  .dismissible-action-tip-modal--gallery {
    background-color: rgba(0, 0, 0, 0.34);
  }

  .dismissible-action-tip-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 28px 30px 24px;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
  }

  .dismissible-action-tip-close {
    display: none;
    position: absolute;
    top: 2px;
    right: 6px;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #111;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    opacity: 0.9;
    appearance: none;
    -webkit-appearance: none;
  }

  .dismissible-action-tip-close:hover,
  .dismissible-action-tip-close:focus {
    opacity: 1;
    color: #000;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
  }

  .dismissible-action-tip-modal--single-dismiss .dismissible-action-tip-close {
    display: inline-block;
  }

  .dismissible-action-tip-modal--single-dismiss .dismissible-action-tip-content {
    padding-top: 34px;
  }

  .dismissible-action-tip-modal--app {
    background-color: rgba(0, 0, 0, 0.34);
    /* Doit rester AU-DESSUS de .fullscreen-continue-modal (30200) */
    z-index: 30350;
  }

  .dismissible-action-tip-modal--single-dismiss {
    z-index: 30350;
  }

  .dismissible-action-tip-modal .modal-title {
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    line-height: 1.25;
    margin-bottom: 4px;
  }

  .dismissible-action-tip-message {
    font-size: clamp(1.15rem, 2.1vw, 1.42rem);
    line-height: 1.55;
    color: #222;
    margin: 14px 0 0;
    white-space: pre-wrap;
    font-weight: 500;
  }


  /* Premiers pas... — variante plus discrète (−3 pt) */
  .dismissible-action-tip-modal--compact-font .modal-title {
    font-size: clamp(1.1rem, calc(2.4vw - 3pt), calc(1.65rem - 3pt));
  }

  .dismissible-action-tip-modal--compact-font .dismissible-action-tip-message {
    font-size: clamp(0.9rem, calc(2.1vw - 3pt), calc(1.42rem - 3pt));
  }

  .gallery-first-steps-text {
    display: block;
  }

  .gallery-first-steps-title-reference {
    font-weight: 700;
  }

  .gallery-first-steps-fill-preview {
    display: inline-block;
    width: min(94px, 28%);
    height: auto;
    margin: 0 3px;
    border-radius: 5px;
    vertical-align: middle;
  }

  .dismissible-action-tip-modal--playback-lecture .dismissible-action-tip-content {
    /* Largeur pilotée surtout en JS ; CSS de secours = espace libre réduit de moitié */
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    max-height: 92vh;
    padding: 24px 40px 20px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .dismissible-action-tip-modal--playback-lecture .dismissible-action-tip-message {
    white-space: normal;
  }

  /* Au revoir! (QUITTER) : fenêtre large pour moins de retours à la ligne */
  .dismissible-action-tip-modal--farewell-quit .dismissible-action-tip-content {
    width: min(94vw, 1400px);
    max-width: 1400px;
    max-height: 92vh;
    padding: 24px 40px 22px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .dismissible-action-tip-modal--farewell-quit .dismissible-action-tip-message {
    white-space: normal;
  }

  .dismissible-action-tip-modal--farewell-quit .dismissible-action-tip-buttons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: stretch;
    align-items: stretch;
    gap: 12px;
  }

  /* Suggestion Swing : deux boutons côte à côte, largeur égale, texte sur une ligne */
  .dismissible-action-tip-modal--farewell-quit:not(.dismissible-action-tip-modal--single-dismiss)
    .dismissible-action-tip-dismiss,
  .dismissible-action-tip-modal--farewell-quit:not(.dismissible-action-tip-modal--single-dismiss)
    .dismissible-action-tip-ok {
    flex: 1 1 0 !important;
    width: calc((100% - 12px) / 2) !important;
    max-width: calc((100% - 12px) / 2) !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 12px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    text-align: center;
    box-sizing: border-box;
  }

  .dismissible-action-tip-modal--farewell-quit:not(.dismissible-action-tip-modal--single-dismiss)
    .dismissible-action-tip-dismiss .btn-text-wrap {
    display: inline !important;
    margin-top: 0 !important;
  }

  .dismissible-action-tip-modal--farewell-quit.dismissible-action-tip-modal--single-dismiss
    .dismissible-action-tip-dismiss {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    white-space: normal !important;
    line-height: 1.25;
    text-align: center;
    font-weight: 700;
  }

  .playback-lecture-tip-text p {
    margin: 0 0 0.85em;
  }

  .playback-lecture-tip-text strong {
    font-weight: 700;
  }

  /* TRi dans les tips : même emphase que l'accueil, taille = texte environnant */
  .dismissible-action-tip-message .user-role-tri,
  .dismissible-action-tip-message strong.user-role-tri,
  .playback-lecture-tip-text .user-role-tri,
  .playback-lecture-tip-text strong.user-role-tri {
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 1em !important;
    letter-spacing: 0.02em;
    margin: 0 0.08em;
    padding: 0.08em 0.28em 0.1em;
    border-radius: 6px;
    background: #8a4b38;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    vertical-align: baseline;
    display: inline;
    line-height: inherit;
  }

  /* À l'intérieur d'un strong parent : ne pas « sur-grossir », garder l'emphase TRi */
  .playback-lecture-tip-text strong .user-role-tri,
  .dismissible-action-tip-message strong .user-role-tri {
    font-weight: 900 !important;
  }


  /* Icône inline du bouton lecture (Premiers pas...) — version grise (cadre + triangle) */
  .premiers-pas-play-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3em;
    height: 2.3em;
    min-width: 2.3em;
    border: 0.16em solid #6c757d;
    border-radius: 0.24em;
    box-sizing: border-box;
    vertical-align: -0.36em;
    margin: 0 0.15em;
    background: transparent;
    flex-shrink: 0;
  }

  .premiers-pas-play-btn-icon::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.68em 0 0.68em 1.1em;
    border-color: transparent transparent transparent #6c757d;
    margin-left: 0.14em;
  }

  .playback-lecture-tip-text p:last-child {
    margin-bottom: 0;
  }


  /* Aide Encadré combinée : étapes et aperçu des angles vert et rouge. */
  .dismissible-action-tip-modal--encadre-guide .dismissible-action-tip-content {
    width: min(88vw, 920px);
    max-width: 920px;
    max-height: 92vh;
    padding: 24px 34px 20px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .dismissible-action-tip-modal--encadre-guide .dismissible-action-tip-message {
    white-space: normal;
  }

  .encadre-tip-intro,
  .encadre-tip-ensuite,
  .encadre-tip-step,
  .encadre-tip-alternative,
  .encadre-tip-diagrams,
  .encadre-tip-diagram,
  .encadre-tip-frame,
  .encadre-tip-diagram-label {
    display: block;
  }

  .encadre-tip-intro {
    margin-bottom: 10px;
  }

  .encadre-tip-ensuite {
    margin-bottom: 6px;
    font-weight: 700;
  }

  .encadre-tip-step + .encadre-tip-step {
    margin-top: 8px;
  }

  .encadre-tip-alternative {
    margin-top: 10px;
    font-size: 0.78em;
    line-height: 1.3;
    color: #666;
    text-align: center;
    font-weight: 400;
  }

  .encadre-tip-diagrams {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(48px, 10vw, 120px);
    margin-top: 14px;
  }

  .encadre-tip-diagram {
    text-align: center;
  }

  .encadre-tip-frame {
    position: relative;
    width: clamp(125px, 15vw, 165px);
    height: clamp(62px, 7vw, 76px);
    box-sizing: border-box;
    margin: 0 auto 7px;
  }

  .encadre-tip-frame--start {
    border-top: 8px solid #2ecc71;
    border-left: 8px solid #2ecc71;
    border-radius: 5px 0 0 0;
  }

  .encadre-tip-frame--end {
    border-top: 8px solid #e53935;
    border-right: 8px solid #e53935;
    border-radius: 0 5px 0 0;
  }

  .encadre-tip-carton {
    position: absolute;
    left: 50%;
    top: 54%;
    width: 58%;
    height: 45%;
    transform: translate(-50%, -50%);
    border: 2px solid #777;
    border-radius: 4px;
    background: repeating-linear-gradient(90deg, #fff 0 11px, #d9d9d9 11px 13px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  }

  .encadre-tip-diagram-label {
    font-size: 0.82em;
    line-height: 1.15;
    font-weight: 700;
  }

  .encadre-tip-diagram-label small {
    font-size: 0.8em;
    font-weight: 600;
    color: #555;
  }

  .encadre-tip-diagram-label--start {
    color: #168a45;
  }

  .encadre-tip-diagram-label--end {
    color: #c62828;
  }

  .dismissible-action-tip-modal--encadre-guide .dismissible-action-tip-buttons {
    margin-top: 16px;
  }

  @media (max-width: 600px) {
    .dismissible-action-tip-modal--encadre-guide .dismissible-action-tip-content {
      width: 94vw;
      padding: 20px 20px 16px;
    }

    .encadre-tip-diagrams {
      gap: 22px;
    }
  }

  .dismissible-action-tip-buttons {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
  }

  .dismissible-action-tip-buttons .button {
    font-size: clamp(1.05rem, 1.9vw, 1.22rem);
    font-weight: 700;
    padding: 14px 24px;
    min-height: 48px;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  }

  /* Bouton bleu « J'ai bien compris / ne plus afficher » : rectangle + 2 lignes (HTML) */
  .dismissible-action-tip-buttons .dismissible-action-tip-dismiss {
    margin-right: auto;
    background-color: #8a4b38;
    color: #fff;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 260px) !important;
    max-width: min(100%, 260px) !important;
    min-width: 220px !important;
    min-height: 72px !important;
    height: auto !important;
    padding: 14px 20px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    text-align: center;
    box-sizing: border-box;
  }

  .dismissible-action-tip-buttons .dismissible-action-tip-dismiss .btn-text-wrap {
    display: block !important;
    margin-top: 2px !important;
    white-space: normal !important;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
  }

  .dismissible-action-tip-buttons .dismissible-action-tip-dismiss:hover,
  .dismissible-action-tip-buttons .dismissible-action-tip-dismiss:focus {
    background-color: #6f3a2b;
    color: #fff;
  }

  .dismissible-action-tip-buttons .dismissible-action-tip-ok {
    background-color: #28a745;
    color: #fff;
    min-width: 140px;
    align-self: center;
  }

  .dismissible-action-tip-buttons .dismissible-action-tip-ok:hover,
  .dismissible-action-tip-buttons .dismissible-action-tip-ok:focus {
    background-color: #218838;
    color: #fff;
  }

  .dismissible-action-tip-modal--single-dismiss .dismissible-action-tip-buttons {
    justify-content: center;
  }

  .dismissible-action-tip-modal--single-dismiss .dismissible-action-tip-dismiss {
    margin-right: 0;
    background-color: #28a745;
    color: #fff;
    width: auto !important;
    max-width: 100% !important;
    min-width: 140px !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 14px 24px !important;
    white-space: normal !important;
    line-height: 1.35;
    text-align: center;
    flex-direction: column !important;
  }

  .dismissible-action-tip-modal--notification {
    background: transparent !important;
    pointer-events: none;
  }

  .dismissible-action-tip-content--notification {
    background-color: #8a4b38;
    color: #fff;
    padding: 8px 12px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    overflow: auto;
    box-sizing: border-box;
    text-align: center;
  }

  .dismissible-action-tip-modal--notification .modal-title {
    display: none;
  }

  .dismissible-action-tip-modal--notification .dismissible-action-tip-message {
    color: #fff;
    font-size: clamp(14px, 1.6vw, 20px);
    line-height: 1.3;
    margin: 0;
    font-weight: normal;
    white-space: normal;
  }

  .dismissible-action-tip-modal--notification .dismissible-action-tip-buttons {
    margin-top: 8px;
    justify-content: center;
    gap: 8px;
  }

  .dismissible-action-tip-modal--notification .dismissible-action-tip-buttons .button {
    font-size: clamp(12px, 1.4vw, 16px);
    padding: 6px 12px;
  }

  .dismissible-action-tip-modal--notification .dismissible-action-tip-dismiss {
    background-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.55);
  }

  .dismissible-action-tip-modal--notification .dismissible-action-tip-ok {
    background-color: #fff;
    color: #8a4b38;
  }


  
  /* Media queries réactivées (sauf pour .gallery et .cell qui sont gérées par la solution hybride) */
  @media (max-width: 768px) {
    label, button {
      padding: 12px 20px;
      font-size: 16px;
    }
    .position {
      font-size: 14px;
    }
  }
  
  @media (min-width: 1600px) {
    label, button {
      font-size: 20px;
      padding: 18px 36px;
    }
  }
  
  .carton-selection-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
  }
  
  .carton-selection-content {
    background-color: white;
    border-radius: 8px;
    width: 80%;
    max-width: 800px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  /* Media queries pour adapter la boîte de sélection de cartons */
  @media (max-width: 1400px) {
    .carton-selection-content {
      width: 90% !important;
      max-width: none !important;
    }
  }
  
  @media (max-width: 1200px) {
    .carton-selection-content {
      width: 95% !important;
      max-width: none !important;
    }
  }
  
  @media (max-width: 900px) {
    .carton-selection-content {
      width: 98% !important;
      max-width: none !important;
    }
  }
  
  @media (max-width: 600px) {
    .carton-selection-content {
      width: 100% !important;
      border-radius: 0;
    }
  }
  
  .carton-selection-header {
    padding: 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .carton-selection-header h2 {
    margin: 0;
    font-size: 24px;
  }
  
  .chiffrage-info {
    background-color: #8a4b38;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
  }
  
  .close-button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
  }
  
  .carton-selection-body {
    padding: 15px;
    overflow-y: auto;
    flex-grow: 1;
  }
  
  .carton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
  }
  
  .carton-selection-item {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    transition: transform 0.2s;
  }
  
  .carton-selection-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(138, 75, 56, 0.3);
  }
  
  .carton-selection-item img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
  }
  
  /* Alignement vertical du texte dans les boutons */
  label[for="folderInput"] {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: normal;
  }
  
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
  }
  
  /* Fantôme du carton pour le glisser-coller */
  .carton-ghost {
    position: fixed; /* fixed = coordonnées viewport, cohérent avec clientX/clientY sur tablette */
    pointer-events: none;
    opacity: 0.7;
    z-index: 1000;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px dashed #17a2b8;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(23,162,184,0.5);
  }
  
  /* Animation améliorée pour le bouton d'effacement */
  @keyframes strongBlink {
    0% {
      background-color: #28a745;
      transform: scale(1);
    }
    50% {
      background-color: #5dff8a;
      transform: scale(1.05);
      box-shadow: 0 0 15px rgba(40,167,69,0.8);
    }
    100% {
      background-color: #28a745;
      transform: scale(1);
    }
  }
  
  .delete-carton-btn.active-delete-mode {
    background-color: #5f7f4a !important;
    border: 3px solid #ff0000;
    font-weight: bold;
    text-transform: none;
    position: relative;
  }

  /* Contour rouge pour Encadré / Liaison en mode actif (comme Effacer cellule) */
  #pulse-numbering-btn.active-mode-outline,
  button.select-carton-btn#liaisonEncadreBtn.active-mode-outline {
    border: 3px solid #ff0000 !important;
    font-weight: bold;
    box-sizing: border-box;
  }

  /* Toute lecture : seuls STOP et les haut-parleurs restent accessibles. */
  body.playback-controls-locked .mini-buttons-container,
  body.playback-controls-locked .top-menu-container {
    pointer-events: none !important;
  }

  body.playback-controls-locked button:not(#playBtn):not(#speakerToggle),
  body.playback-controls-locked input,
  body.playback-controls-locked select,
  body.playback-controls-locked textarea,
  body.playback-controls-locked a,
  body.playback-controls-locked [role="button"]:not(.speaker-toggle) {
    pointer-events: none !important;
  }

  body.playback-controls-locked #playBtn,
  body.playback-controls-locked #speakerToggle,
  body.playback-controls-locked .speaker-toggle,
  body.playback-controls-locked #masterVolumeControl,
  body.playback-controls-locked #masterVolumeSlider {
    pointer-events: auto !important;
    opacity: 1 !important;
    z-index: 101;
  }

  /* Ne pas écraser position:absolute des portées multi-son dans les cellules spéciales */
  body.playback-controls-locked #playBtn,
  body.playback-controls-locked #speakerToggle {
    position: relative;
  }

  /* Compte à rebours discret des deux phases minutées du mode Encadré. */
  button#pulse-numbering-btn {
    position: relative !important;
  }

  button#pulse-numbering-btn .encadre-countdown {
    position: absolute;
    top: 2px;
    right: 4px;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: clamp(11px, 1vw, 15px);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
  }
  
  /* Amélioration des boutons - texte plus grand et sur deux lignes */
  label, 
  button {
    font-size: 22px !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.2;
    padding: 12px 10px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: Arial, sans-serif;
    text-transform: none;
    max-width: 170px;
    min-width: 140px;
    min-height: 60px;
  }
  
  /* Classe pour ajouter un saut de ligne dans le texte des boutons */
  .btn-text-wrap {
    display: block;
    margin-top: 4px;
    font-size: inherit; /* Hérite la taille de police du parent */
    font-weight: inherit; /* Hérite le poids de la police du parent */
    letter-spacing: inherit; /* Hérite l'espacement des lettres du parent */
  }
  
  /* Style pour le mode miniature */
  .gallery.mini-mode {
    grid-gap: 2px;
    row-gap: 1px;
  }
  
  .gallery.mini-mode .cell {
    min-height: 50px; /* Hauteur réduite de moitié */
  }
  
  .gallery.mini-mode .position {
    font-size: 10px; /* Texte plus petit */
  }
  
  .mini-btn.has-image {
    border: 3px solid #5f7f4a;
    position: relative;
  }
  
  .mini-btn.has-image::after {
    content: "✓";
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(95, 127, 74, 0.85);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }
  
  .mini-btn.active-placement {
    animation: pulse 0.5s;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
      box-shadow: 0 0 15px rgba(102, 16, 242, 0.8);
    }
    100% {
      transform: scale(1);
    }
  }
  
  /* Améliorer la taille des boutons standard - taille uniforme de 22px */
  label, 
  button {
    font-size: 22px !important; /* Taille de police augmentée à 22px avec priorité */
    font-weight: 500; /* Poids de la police (semi-gras) */
    letter-spacing: 0.5px; /* Espacement légèrement augmenté entre les lettres */
    line-height: 1.2; /* Espacement des lignes réduit */
    padding: 12px 15px; /* Padding légèrement augmenté pour accommoder la police plus grande */
    height: auto; /* Hauteur automatique */
    display: flex;
    flex-direction: column; /* Disposition en colonne pour le texte */
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: Arial, sans-serif; /* Police de caractères */
    text-transform: none; /* Pas de transformation de texte */
    max-width: 200px; /* Largeur maximale augmentée pour accommoder la police plus grande */
    min-height: 60px; /* Hauteur minimale augmentée pour accommoder la police plus grande */
  }
  
  /* S'assurer que le texte de saut de ligne dans les boutons hérite de la taille */
  .btn-text-wrap {
    display: block;
    margin-top: 6px; /* Légèrement augmenté pour l'espacement */
    font-size: inherit; /* Hérite la taille de police du parent */
    font-weight: inherit; /* Hérite le poids de la police du parent */
    letter-spacing: inherit; /* Hérite l'espacement des lettres du parent */
  }
  
  /* PHASE 3 : Bloc complet des styles favoris - DÉSACTIVÉ
  
  .favorites-btn {
    max-width: 520px;
    min-width: 480px;
    padding: 12px 20px;
    font-size: 16px;
  }
  
  .favorite-slot {
    width: 50px !important;
    height: 50px !important;
    margin: 0 5px;
  }
  
  .favorites-container {
    margin-top: 8px !important;
    gap: 8px !important;
  }
  
  .favorites-btn {
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .favorites-btn > span {
    margin-bottom: 6px;
    font-size: 15px;
  }
  
  .favorites-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 4px !important;
    gap: 6px !important;
  }
  
  .favorite-slot {
    width: 70px !important;
    height: 70px !important;
    margin: 0;
    flex: 1;
  }
  
  .favorites-btn {
    background-color: #ff9800;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }
  
  .favorites-btn:hover {
    background-color: #e68a00;
  }
  
  .favorites-container {
    display: flex;
    gap: 5px;
    margin-top: 5px;
  }
  
  .favorite-slot {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.3);
    border: 2px dashed rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .favorites-btn.can-drop {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    transform: scale(1.05);
  }
  
  .favorite-slot.highlight {
    border: 2px solid white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5) inset;
  }
  
  #favoritesMenu {
    max-height: 80vh;
    overflow-y: auto;
  }
  
  .favorite-slot.delete-mode {
    cursor: not-allowed;
    position: relative;
  }
  
  .favorite-slot.delete-mode:hover {
    border: 2px solid #dc3545;
    box-shadow: 0 0 10px rgba(220,53,69,0.5);
  }
  
  .favorite-slot.delete-mode:hover::before {
    content: "×";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #dc3545;
    font-weight: bold;
  }
  
  Fin PHASE 3 - Bloc favoris commenté */
  
  .liaison-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
  }
  
  .liaison {
    position: absolute;
    width: clamp(35px, 2.6vw, 60px); /* Responsive: 50px base, adaptatif */
    height: clamp(35px, 2.6vw, 60px); /* Responsive: 50px base, adaptatif */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 15;
    pointer-events: none;
    transition: all 0.2s ease;
  }
  
  .liaison[data-active="true"] {
    border: 2px solid rgba(255, 255, 0, 0.7) !important;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.5) !important;
  }
  
  .liaison[data-is-lp-croche="true"] {
    width: clamp(60px, 5.21vw, 100px) !important; /* 100px en 1920px, réduit en basse résolution */
    height: clamp(25px, 2.6vw, 50px) !important; /* 50px en 1920px, réduit en basse résolution */
  }
  
  /* Media queries pour réduire l'épaisseur des liaisons en basse résolution */
  @media (max-width: 1200px) {
    .liaison {
      width: clamp(25px, 2vw, 45px) !important; /* Réduire de ~30% */
      height: clamp(25px, 2vw, 45px) !important;
    }
    
    .liaison[data-is-lp-croche="true"] {
      width: clamp(45px, 4vw, 75px) !important;
      height: clamp(18px, 2vw, 38px) !important;
    }
  }
  
  @media (max-width: 900px) {
    .liaison {
      width: clamp(20px, 1.8vw, 35px) !important; /* Réduire de ~40% */
      height: clamp(20px, 1.8vw, 35px) !important;
    }
    
    .liaison[data-is-lp-croche="true"] {
      width: clamp(35px, 3vw, 60px) !important;
      height: clamp(15px, 1.8vw, 30px) !important;
    }
  }
  
  @media (max-width: 600px) {
    .liaison {
      width: clamp(15px, 1.5vw, 25px) !important; /* Réduire de ~50% */
      height: clamp(15px, 1.5vw, 25px) !important;
    }
    
    .liaison[data-is-lp-croche="true"] {
      width: clamp(25px, 2.5vw, 45px) !important;
      height: clamp(10px, 1.5vw, 22px) !important;
    }
  }
  
  /* Styles pour les boutons de navigation +/- dans Défis et Citations */
  .nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important; /* Padding encore augmenté */
    margin: 0 !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 5px !important; /* Border-radius encore augmenté */
    cursor: pointer !important;
    font-weight: bold !important;
    font-size: 18px !important; /* Font-size encore augmenté */
    line-height: 1 !important;
    transition: all 0.2s !important;
    user-select: none !important;
    min-width: 32px !important; /* Largeur encore augmentée */
    height: 28px !important; /* Hauteur encore augmentée */
    flex-shrink: 0 !important; /* Empêche les boutons de rétrécir */
  }
  
  .nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.2) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
  }
  
  .nav-btn:active {
    transform: scale(0.9) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
  }
  
  /* Styles de correction avec haute priorité */
  label, 
  button {
    padding: 12px 10px !important;
    max-width: 170px !important;
    min-width: 140px !important;
  }
  
  .delete-carton-btn {
    padding: 12px 10px !important; /* Identique aux autres boutons */
    max-width: 170px !important; /* Largeur maximale comme les autres */
    min-width: 140px !important; /* Largeur minimale comme les autres */
    min-height: 58px !important; /* Hauteur identique aux autres boutons */
    height: 58px !important; /* Hauteur fixe identique */
    max-height: 58px !important; /* Hauteur maximale identique */
  }
  
  /* Correction pour la hauteur des 7 premiers boutons - priorité maximale */
  .mini-btn, 
  label[for="folderInput"], 
  .clear-btn, 
  .save-btn, 
  .select-carton-btn, 
  .random-btn,
  .delete-carton-btn {
    min-height: 58px !important; /* Hauteur augmentée de 52px à 58px */
    padding: 12px 10px !important; /* Padding vertical augmenté de 10px à 12px */
    font-size: 18px !important; /* Taille de police inchangée */
    max-height: 58px !important; /* Forcer la hauteur maximale également */
    height: 58px !important; /* Forcer la hauteur exacte */
    margin-top: auto !important; /* Aligner en bas */
    align-self: flex-end !important; /* Aligner en bas dans un conteneur flex */
  }
  
  /* Style spécifique pour le bouton Effacer - taille normale comme les autres */
  .delete-carton-btn {
    min-height: 58px !important; /* Hauteur normale comme les autres boutons */
    padding: 12px 10px !important; /* Padding normal comme les autres boutons */
    font-size: 18px !important; /* Taille de police inchangée */
    max-height: 58px !important; /* Hauteur maximale normale */
    height: 58px !important; /* Hauteur exacte normale */
  }
  
  /* Ciblage spécifique pour chaque bouton avec ID */
  button.save-btn#saveCodeBtn {
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
  }
  
  button.clear-btn#clearBtn {
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
  }
  
  button.select-carton-btn#selectButtonsBtn {
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
  }
  
  button.random-btn#randomBtn {
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
  }

  /* EXPÉRIMENTATION RESPONSIVE - Bouton "Combler cellules" */
  button.random-btn#randomBtn {
    min-width: auto !important;
    max-width: fit-content !important;
    width: fit-content !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    padding: 12px 16px !important;
    font-size: clamp(14px, 2vw, 18px) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
  }
  
  /* Permettre l'affichage sur deux lignes dans le bouton "Combler cellules" */
  button.random-btn#randomBtn .btn-text-wrap {
    display: block !important;
    white-space: normal !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
    line-height: 1.2 !important;
  }

  /* Media queries pour ajustements spécifiques */
  @media (max-width: 1200px) {
    button.random-btn#randomBtn {
      min-width: auto !important;
      max-width: fit-content !important;
      width: fit-content !important;
      min-height: 58px !important;
      height: 58px !important;
      max-height: 58px !important;
      font-size: clamp(12px, 2.2vw, 16px) !important;
      padding: 12px 14px !important;
    }
  }

  @media (max-width: 900px) {
    button.random-btn#randomBtn {
      min-width: auto !important;
      max-width: fit-content !important;
      width: fit-content !important;
      min-height: 58px !important;
      height: 58px !important;
      max-height: 58px !important;
      font-size: clamp(10px, 2.5vw, 14px) !important;
      padding: 10px 12px !important;
    }
  }

  @media (max-width: 600px) {
    button.random-btn#randomBtn {
      min-width: auto !important;
      max-width: fit-content !important;
      width: fit-content !important;
      min-height: 58px !important;
      height: 58px !important;
      max-height: 58px !important;
      font-size: clamp(8px, 3vw, 12px) !important;
      padding: 8px 10px !important;
    }
  }

  /* RESPONSIVE - Bouton "Encadré" */
  button#pulse-numbering-btn, label[for="folderInput"]#pulse-numbering-btn {
    min-width: auto !important;
    max-width: fit-content !important;
    width: fit-content !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    padding: 12px 16px !important;
    font-size: clamp(14px, 2vw, 18px) !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: inline-flex !important;
    flex-direction: column !important; /* Par défaut, colonne pour deux lignes */
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important; /* Permettre le retour à la ligne */
  }
  
  /* Par défaut, le bouton Encadré */
  button#pulse-numbering-btn, label[for="folderInput"]#pulse-numbering-btn .btn-text-wrap {
    display: block !important;
    margin-top: 4px !important;
    white-space: normal !important;
  }
  
  /* Quand le texte est "SUBDIVISIONS" ou "FIN SUBDIVISIONS", afficher sur une seule ligne */
  button#pulse-numbering-btn, label[for="folderInput"]#pulse-numbering-btn.single-line-text {
    display: inline-flex !important;
    flex-direction: row !important; /* Ligne pour une seule ligne */
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important; /* Empêcher le retour à la ligne */
  }
  
  button#pulse-numbering-btn, label[for="folderInput"]#pulse-numbering-btn.single-line-text .btn-text-wrap {
    display: inline !important;
    white-space: nowrap !important;
    margin-top: 0 !important;
    margin-left: 4px !important;
  }

  @media (max-width: 1200px) {
    button#pulse-numbering-btn, label[for="folderInput"]#pulse-numbering-btn {
      min-width: auto !important;
      max-width: fit-content !important;
      width: fit-content !important;
      font-size: clamp(12px, 2.2vw, 16px) !important;
      padding: 12px 14px !important;
    }
  }

  @media (max-width: 900px) {
    button#pulse-numbering-btn, label[for="folderInput"]#pulse-numbering-btn {
      min-width: auto !important;
      max-width: fit-content !important;
      width: fit-content !important;
      font-size: clamp(10px, 2.5vw, 14px) !important;
      padding: 10px 12px !important;
    }
  }

  @media (max-width: 600px) {
    button#pulse-numbering-btn, label[for="folderInput"]#pulse-numbering-btn {
      min-width: auto !important;
      max-width: fit-content !important;
      width: fit-content !important;
      font-size: clamp(8px, 3vw, 12px) !important;
      padding: 8px 10px !important;
    }
  }

  /* RESPONSIVE - Bouton "Effacer tout" */
  button.clear-btn#clearBtn {
    min-width: 8vw !important;
    max-width: 15vw !important;
    width: auto !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    padding: 12px 1vw !important;
    font-size: clamp(14px, 2vw, 18px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  @media (max-width: 1200px) {
    button.clear-btn#clearBtn {
      min-width: 10vw !important;
      max-width: 18vw !important;
      font-size: clamp(12px, 2.2vw, 16px) !important;
    }
  }

  @media (max-width: 900px) {
    button.clear-btn#clearBtn {
      min-width: 12vw !important;
      max-width: 22vw !important;
      font-size: clamp(10px, 2.5vw, 14px) !important;
      padding: 10px 0.8vw !important;
    }
  }

  @media (max-width: 600px) {
    button.clear-btn#clearBtn {
      min-width: 15vw !important;
      max-width: 25vw !important;
      font-size: clamp(8px, 3vw, 12px) !important;
      padding: 8px 0.5vw !important;
    }
  }

  /* RESPONSIVE - Bouton "Sauvegardes" */
  button.save-btn#saveCodeBtn {
    min-width: 8vw !important;
    max-width: 15vw !important;
    width: auto !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    padding: 12px 1vw !important;
    font-size: clamp(14px, 2vw, 18px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  @media (max-width: 1200px) {
    button.save-btn#saveCodeBtn {
      min-width: 10vw !important;
      max-width: 18vw !important;
      font-size: clamp(12px, 2.2vw, 16px) !important;
    }
  }

  @media (max-width: 900px) {
    button.save-btn#saveCodeBtn {
      min-width: 12vw !important;
      max-width: 22vw !important;
      font-size: clamp(10px, 2.5vw, 14px) !important;
      padding: 10px 0.8vw !important;
    }
  }

  @media (max-width: 600px) {
    button.save-btn#saveCodeBtn {
      min-width: 15vw !important;
      max-width: 25vw !important;
      font-size: clamp(8px, 3vw, 12px) !important;
      padding: 8px 0.5vw !important;
    }
  }

  /* RESPONSIVE - Bouton "Effacer galerie" */
  button.select-carton-btn#selectButtonsBtn {
    min-width: auto !important;
    max-width: fit-content !important;
    width: fit-content !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    padding: 12px 16px !important;
    font-size: clamp(14px, 2vw, 18px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  @media (max-width: 1200px) {
    button.select-carton-btn#selectButtonsBtn {
      min-width: auto !important;
      max-width: fit-content !important;
      width: fit-content !important;
      font-size: clamp(12px, 2.2vw, 16px) !important;
      padding: 12px 14px !important;
    }
  }

  @media (max-width: 900px) {
    button.select-carton-btn#selectButtonsBtn {
      min-width: auto !important;
      max-width: fit-content !important;
      width: fit-content !important;
      font-size: clamp(10px, 2.5vw, 14px) !important;
      padding: 10px 12px !important;
    }
  }

  @media (max-width: 600px) {
    button.select-carton-btn#selectButtonsBtn {
      min-width: auto !important;
      max-width: fit-content !important;
      width: fit-content !important;
      font-size: clamp(8px, 3vw, 12px) !important;
      padding: 8px 10px !important;
    }
  }

  /* Style pour que le bouton "Aide-mémoire" ait la même largeur, police et taille de texte que "Effacer galerie" */
  button.select-carton-btn#aideMemoireBtn {
    background-color: #d1a64a !important;
    color: #3a2018 !important;
    -webkit-text-stroke: 0;
    text-shadow: none;
    min-width: auto !important;
    max-width: fit-content !important;
    width: fit-content !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    padding: 12px 16px !important;
    font-size: clamp(14px, 2vw, 18px) !important;
    font-family: Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  @media (max-width: 1200px) {
    button.select-carton-btn#aideMemoireBtn {
      padding: 12px 14px !important;
      font-size: clamp(12px, 2.2vw, 16px) !important;
    }
  }

  @media (max-width: 900px) {
    button.select-carton-btn#aideMemoireBtn {
      padding: 10px 12px !important;
      font-size: clamp(10px, 2.5vw, 14px) !important;
    }
  }

  @media (max-width: 600px) {
    button.select-carton-btn#aideMemoireBtn {
      padding: 8px 10px !important;
      font-size: clamp(8px, 3vw, 12px) !important;
    }
  }

  /* Style pour le texte sur deux lignes du bouton "Aide-mémoire" */
  button.select-carton-btn#aideMemoireBtn .btn-text-wrap {
    display: block;
    line-height: 1.2;
    color: inherit;
    -webkit-text-stroke: 0;
    text-shadow: none;
  }

  
/* Volume général — glissière verticale étroite (bas→haut) à droite de Oups! Undo */
.main-buttons-row > .master-volume-control {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  min-height: 58px;
  height: 58px;
  max-height: 58px;
  padding: 2px 1px 2px;
  box-sizing: border-box;
  background: #455a64;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  color: #fff;
  flex: 0 0 28px;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}
.main-buttons-row > .master-volume-control .master-volume-value {
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
  width: 100%;
  color: #e3f2fd;
  flex: 0 0 auto;
}
.main-buttons-row > .master-volume-control .master-volume-label {
  font-family: Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  opacity: 0.9;
  flex: 0 0 auto;
}
.main-buttons-row > .master-volume-control .master-volume-track-wrap {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 28px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Range horizontale tournée : bas = faible, haut = fort */
.main-buttons-row > .master-volume-control .master-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 14px;
  margin: 0;
  padding: 0;
  transform: rotate(-90deg);
  transform-origin: center center;
  cursor: pointer;
  background: transparent;
  accent-color: #4fc3f7;
}
.main-buttons-row > .master-volume-control .master-volume-slider::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.38);
}
.main-buttons-row > .master-volume-control .master-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  margin-top: -4px;
  border-radius: 50%;
  background: #4fc3f7;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.main-buttons-row > .master-volume-control .master-volume-slider::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.38);
}
.main-buttons-row > .master-volume-control .master-volume-slider::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #4fc3f7;
  border: 1px solid rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
@media (max-width: 1439px) {
  .main-buttons-row > .master-volume-control {
    width: 26px;
    min-width: 26px;
    max-width: 26px;
    flex-basis: 26px;
    min-height: 48px;
    height: 48px;
    max-height: 48px;
  }
  .main-buttons-row > .master-volume-control .master-volume-track-wrap {
    height: 26px;
    min-height: 24px;
  }
  .main-buttons-row > .master-volume-control .master-volume-slider {
    width: 26px;
    height: 12px;
  }
  .main-buttons-row > .master-volume-control .master-volume-value {
    font-size: 8px;
  }
  .main-buttons-row > .master-volume-control .master-volume-label {
    font-size: 7px;
  }
}



/* Contour noir mince du lettrage blanc — même type qu'Aide-mémoire (version initiale) */
  #pulse-numbering-btn,
  button.select-carton-btn#liaisonEncadreBtn,
  button.select-carton-btn#planDeCoursPlusBtn,
  button.select-carton-btn#selectButtonsBtn,
  button.delete-carton-btn#deleteCartonBtn,
  button.random-btn#randomBtn,
  button.select-carton-btn.undo-btn#undoBtn {
    -webkit-text-stroke: 0.25px #000000;
    paint-order: stroke fill;
    text-shadow:
      -0.25px -0.25px 0 #000,
       0.25px -0.25px 0 #000,
      -0.25px  0.25px 0 #000,
       0.25px  0.25px 0 #000;
  }

  #pulse-numbering-btn .btn-text-wrap,
  button.select-carton-btn#liaisonEncadreBtn .btn-text-wrap,
  button.select-carton-btn#planDeCoursPlusBtn .btn-text-wrap,
  button.select-carton-btn#selectButtonsBtn .btn-text-wrap,
  button.delete-carton-btn#deleteCartonBtn .btn-text-wrap,
  button.random-btn#randomBtn .btn-text-wrap,
  button.select-carton-btn.undo-btn#undoBtn .btn-text-wrap {
    -webkit-text-stroke: inherit;
    text-shadow: inherit;
  }

  /* RESPONSIVE - Bouton "Plan de cours +" - Même largeur que "Effacer galerie" */
  button.select-carton-btn#planDeCoursPlusBtn {
    min-width: auto !important;
    max-width: fit-content !important;
    width: fit-content !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    padding: 12px 16px !important;
    font-size: clamp(14px, 2vw, 18px) !important;
    font-family: Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  @media (max-width: 1200px) {
    button.select-carton-btn#planDeCoursPlusBtn {
      padding: 12px 14px !important;
      font-size: clamp(12px, 2.2vw, 16px) !important;
    }
  }

  @media (max-width: 900px) {
    button.select-carton-btn#planDeCoursPlusBtn {
      padding: 10px 12px !important;
      font-size: clamp(10px, 2.5vw, 14px) !important;
    }
  }

  @media (max-width: 600px) {
    button.select-carton-btn#planDeCoursPlusBtn {
      padding: 8px 10px !important;
      font-size: clamp(8px, 3vw, 12px) !important;
    }
  }

  /* Style pour le texte sur deux lignes du bouton "Plan de cours" */
  button.select-carton-btn#planDeCoursPlusBtn .btn-text-wrap {
    display: block;
    line-height: 1.2;
  }


  /* Bouton Undo — dernier bouton de la ligne, même espacement que les autres */
  button.select-carton-btn#undoBtn {
    background-color: #3d6f73 !important;
    min-width: auto !important;
    max-width: fit-content !important;
    width: fit-content !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    padding: 12px 16px !important;
    font-size: clamp(14px, 2vw, 18px) !important;
    font-family: Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    flex-shrink: 0 !important;
  }

  button.select-carton-btn#undoBtn:hover {
    background-color: #2f5a5e !important;
  }

  button.select-carton-btn#undoBtn .btn-text-wrap {
    display: block;
    line-height: 1.2;
  }

  @media (max-width: 1200px) {
    button.select-carton-btn#undoBtn {
      padding: 12px 14px !important;
      font-size: clamp(12px, 2.2vw, 16px) !important;
    }
  }

  @media (max-width: 900px) {
    button.select-carton-btn#undoBtn {
      padding: 10px 12px !important;
      font-size: clamp(10px, 2.5vw, 14px) !important;
    }
  }

  @media (max-width: 600px) {
    button.select-carton-btn#undoBtn {
      padding: 8px 10px !important;
      font-size: clamp(8px, 3vw, 12px) !important;
    }
  }

  /* RESPONSIVE - Bouton "Liaison" - Même largeur que "Plan de cours" */
  button.select-carton-btn#liaisonEncadreBtn {
    min-width: auto !important;
    max-width: fit-content !important;
    width: fit-content !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    padding: 12px 16px !important;
    font-size: clamp(14px, 2vw, 18px) !important;
    font-family: Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  @media (max-width: 1200px) {
    button.select-carton-btn#liaisonEncadreBtn {
      padding: 12px 14px !important;
      font-size: clamp(12px, 2.2vw, 16px) !important;
    }
  }

  @media (max-width: 900px) {
    button.select-carton-btn#liaisonEncadreBtn {
      padding: 10px 12px !important;
      font-size: clamp(10px, 2.5vw, 14px) !important;
    }
  }

  @media (max-width: 600px) {
    button.select-carton-btn#liaisonEncadreBtn {
      padding: 8px 10px !important;
      font-size: clamp(8px, 3vw, 12px) !important;
    }
  }

  /* Style pour le bouton "Liaison" (legacy deux lignes si besoin) */
  button.select-carton-btn#liaisonEncadreBtn .btn-text-wrap {
    display: block;
    line-height: 1.2;
  }

  /* Compte à rebours discret du mode Liaison actif. */
  button.select-carton-btn#liaisonEncadreBtn.active-mode-outline {
    position: relative !important;
  }

  button.select-carton-btn#liaisonEncadreBtn .liaison-countdown {
    position: absolute;
    top: 2px;
    right: 4px;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: clamp(11px, 1vw, 15px);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
  }

  /* RESPONSIVE - Bouton "Effacer cellule" */
  button.delete-carton-btn#deleteCartonBtn {
    min-width: auto !important;
    max-width: fit-content !important;
    width: fit-content !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    padding: 12px 16px !important;
    font-size: clamp(14px, 1.5vw, 18px) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-transform: none !important;
  }

  button.delete-carton-btn#deleteCartonBtn .btn-text-wrap {
    display: block;
    line-height: 1.2;
  }

  /* Compte à rebours discret du mode Effacer cellule actif. */
  button.delete-carton-btn#deleteCartonBtn.active-delete-mode {
    position: relative !important;
  }

  button.delete-carton-btn#deleteCartonBtn .delete-mode-countdown {
    position: absolute;
    top: 2px;
    right: 4px;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: clamp(11px, 1vw, 15px);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
  }

  @media (max-width: 1200px) {
    button.delete-carton-btn#deleteCartonBtn {
      padding: 12px 14px !important;
      font-size: clamp(13px, 1.6vw, 17px) !important;
    }
  }

  @media (max-width: 900px) {
    button.delete-carton-btn#deleteCartonBtn {
      padding: 10px 12px !important;
      font-size: clamp(12px, 1.8vw, 16px) !important;
    }
  }

  @media (max-width: 600px) {
    button.delete-carton-btn#deleteCartonBtn {
      padding: 8px 10px !important;
      font-size: clamp(11px, 2vw, 14px) !important;
    }
  }

  /* RESPONSIVE - Bouton "TEST" */
  
  /* Espace blanc projetable sur TNI, affiché sous les micro-boutons avec CITATIONS */
  .citation-tni-space {
    position: fixed;
    left: 0;
    width: 100%;
    display: none;
    box-sizing: border-box;
    background: #fff;
    z-index: 1800;
    overflow: hidden;
    pointer-events: auto;
    touch-action: none;
  }

  .citation-tni-space-heading {
    margin: clamp(12px, 2vh, 24px) 0 0;
    padding: 0 56px;
    text-align: center;
  }

  .citation-tni-space-title {
    margin: 0;
    padding: 0;
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 600;
    line-height: 1.15;
  }

  .citation-tni-space-subtitle {
    margin-top: 2px;
    color: #666;
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(10px, 1.15vw, 15px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .citation-tni-space-close {
    position: absolute;
    top: clamp(8px, 1.2vh, 14px);
    right: clamp(10px, 1.5vw, 22px);
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: clamp(5px, 0.7vw, 8px) clamp(9px, 1.1vw, 14px);
    border: 2px solid #333;
    border-radius: 5px;
    background: #f2f2f2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    color: #222;
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(15px, 1.6vw, 21px);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    z-index: 1801;
    opacity: 1;
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.5vw, 7px);
  }

  .citation-tni-space-close span:first-child {
    font-size: 1.45em;
    font-weight: 500;
    line-height: 0.75;
  }

  .citation-tni-space-close:hover,
  .citation-tni-space-close:focus {
    color: #000;
    border-color: #000;
    background: #fff;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
    outline: none;
  }

  /* Pendant l'Espace TNI, seul le micro-bouton CITATIONS reste accessible. */
  body.citation-tni-space-open .mini-buttons-container .micro-btn,
  body.citation-tni-space-open .top-menu-container,
  body.citation-tni-space-open .main-buttons-row {
    pointer-events: none !important;
  }

  body.citation-tni-space-open #microBtn7 {
    position: relative !important;
    z-index: 1900 !important;
    pointer-events: auto !important;
  }

  /* Fenêtre d'affichage de texte */
  .text-display-window {
    position: fixed;
    /* Position contrôlée par JavaScript */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    display: none;
    flex-direction: column;
    overflow: visible;
    /* Les dimensions et position seront contrôlées par JavaScript pour être responsive */
  }
  
  /* Rendre les vieux boutons "Défis à relever" et "Citations" invisibles */
  #defis-button,
  #citations-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  .text-window-header {
    padding: 2px 6px !important;
    border-bottom: 1px solid #ddd !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #f8f9fa !important;
    border-radius: 8px 8px 0 0 !important;
    height: 20px !important;
    max-height: 20px !important;
    min-height: 20px !important;
  }
  
  .text-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background-color: #8a4b38 !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: clamp(33px, 4.33vw, 43px) !important;
    height: clamp(33px, 4.33vw, 43px) !important;
    min-width: clamp(33px, 4.33vw, 43px) !important;
    max-width: clamp(33px, 4.33vw, 43px) !important;
    min-height: clamp(33px, 4.33vw, 43px) !important;
    max-height: clamp(33px, 4.33vw, 43px) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    z-index: 2001 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(138, 75, 56, 0.4) !important;
    overflow: visible !important;
  }
  
  .text-nav-btn .nav-symbol {
    font-size: clamp(22px, 2.67vw, 31px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: block !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    -webkit-text-stroke: 2px white !important;
    text-stroke: 2px white !important;
  }
  
  .text-nav-btn.text-nav-prev {
    left: clamp(28px, 3.83vw, 38px) !important;
  }
  
  .text-nav-btn.text-nav-next {
    right: clamp(28px, 3.83vw, 38px) !important;
    /* Même hauteur que le bouton - (centré verticalement) */
    top: 50% !important;
  }
  
  .text-nav-btn:hover {
    background-color: #6f3a2b !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 6px 16px rgba(138, 75, 56, 0.6) !important;
  }
  
  .text-nav-btn.text-nav-next:hover {
    transform: translateY(-50%) scale(1.1) !important;
  }
  
  .text-nav-btn:active {
    transform: translateY(-50%) scale(0.95) !important;
  }
  
  .text-nav-btn.text-nav-next:active {
    transform: translateY(-50%) scale(0.95) !important;
  }
  
  .text-window-title {
    margin: 0;
    font-size: 14px;
    color: #333;
    font-weight: bold;
    flex: 1;
    text-align: center;
  }
  
  .text-window-close {
    display: none !important;
    position: absolute !important;
    top: clamp(15px, 2vw, 25px) !important;
    right: clamp(5px, 0.8vw, 10px) !important;
    background-color: transparent !important;
    color: #333 !important;
    border: none !important;
    border-radius: 50% !important;
    width: clamp(30px, 4vw, 38px) !important;
    height: clamp(30px, 4vw, 38px) !important;
    min-width: clamp(30px, 4vw, 38px) !important;
    max-width: clamp(30px, 4vw, 38px) !important;
    min-height: clamp(30px, 4vw, 38px) !important;
    max-height: clamp(30px, 4vw, 38px) !important;
    font-size: clamp(32px, 4vw, 43px) !important;
    font-weight: normal !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    z-index: 2002 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    overflow: visible !important;
  }
  
  .text-window-close,
  .text-window-close *,
  button.text-window-close,
  button.text-window-close * {
    font-size: clamp(32px, 4vw, 43px) !important;
  }
  
  .text-window-close:hover {
    background-color: transparent !important;
    color: #000 !important;
    transform: scale(1.1) !important;
    box-shadow: none !important;
  }
  
  .text-window-close:active {
    transform: scale(0.95) !important;
  }
  
  .text-window-body {
    padding: 5px clamp(90px, 12vw, 120px) 5px clamp(90px, 12vw, 120px);
    overflow-y: auto;
    flex-grow: 1;
    overflow-x: hidden;
  }
  
  .text-content {
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(24px, 4vw, 48px);
    font-weight: bold;
    line-height: 1.4;
    color: #333;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    background-color: #f8f9fa;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }
  .text-content.citation-fit-active {
    display: block !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    line-height: 1.1 !important;
    padding: 2px 6px !important;
    overflow: hidden !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  
  /* Fenêtre DÉROULEMENT DU COURS */
  .cours-window {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70vh; /* Hauteur par défaut, sera ajustée dynamiquement par JavaScript */
    max-height: 70vh;
    background-color: white;
    border-bottom: 2px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    flex-direction: column;
  }
  
  .cours-window-header {
    padding: clamp(8px, 1vw, 12px) clamp(12px, 1.5vw, 20px);
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    flex-shrink: 0;
  }
  
  .cours-window-title {
    margin: 0;
    font-size: clamp(18px, 2.5vw, 28px);
    color: #333;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
  }
  
  .cours-window-actions {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 12px);
  }
  
  .cours-window-defis {
    background: none;
    border: 1px solid #8a4b38;
    font-size: clamp(10px, 1.2vw, 14px);
    cursor: pointer;
    color: #8a4b38;
    padding: clamp(2px, 0.3vw, 4px) clamp(6px, 0.8vw, 10px);
    border-radius: 3px;
    transition: all 0.2s;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 500;
  }
  
  .cours-window-defis:hover {
    background-color: #8a4b38;
    color: white;
    border-color: #6f3a2b;
  }
  
  .cours-window-clear {
    background: none;
    border: 1px solid #ccc;
    font-size: clamp(10px, 1.2vw, 14px);
    cursor: pointer;
    color: #666;
    padding: clamp(2px, 0.3vw, 4px) clamp(6px, 0.8vw, 10px);
    border-radius: 3px;
    transition: all 0.2s;
    font-family: Helvetica, Arial, sans-serif;
    opacity: 0.6;
  }
  
  .cours-window-clear:hover {
    background-color: #f0f0f0;
    color: #333;
    opacity: 1;
    border-color: #999;
  }
  
  .cours-window-close {
    background: none;
    border: none;
    font-size: clamp(20px, 2.5vw, 28px);
    cursor: pointer;
    color: #999;
    padding: 0;
    width: clamp(24px, 3vw, 32px);
    height: clamp(24px, 3vw, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transition: all 0.2s;
  }
  
  .cours-window-close:hover {
    background-color: #e9ecef;
    color: #666;
  }
  
  .cours-window-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(10px, 1.5vw, 20px);
  }
  
  /* Conteneur pour les portées musicales */
  .portees-musicales-container {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(35px, 3.5vw, 70px) clamp(20px, 2vw, 40px) clamp(20px, 2vw, 40px) clamp(20px, 2vw, 40px); /* Padding-top augmenté de 75% */
    gap: clamp(40px, 5vw, 80px); /* Espacement considérable entre les portées pour TYPE A */
  }
  
  /* Styles pour les portées musicales TYPE A (trois portées séparées) */
  .portee-musicale {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .portee-musicale svg {
    width: 100%;
    height: auto;
  }
  
  /* Styles pour les portées musicales TYPE B (quatre portées groupées deux par deux) */
  .portees-group-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 40px);
  }
  
  .portee-group {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.5vw, 20px);
  }
  
  .portee-group-bracket {
    position: absolute;
    left: 0;
    width: clamp(8px, 1vw, 12px);
    background-color: black;
    z-index: 1;
  }
  
  .portee-group-content {
    margin-left: clamp(12px, 1.5vw, 18px);
    width: calc(100% - clamp(12px, 1.5vw, 18px));
  }
  
  /* Boutons de sélection du type de portée (surcharge des styles globaux button) */
  .portees-type-selector {
    display: flex;
    gap: clamp(6px, 0.8vw, 10px);
    align-items: center;
    margin-right: clamp(6px, 0.8vw, 10px);
  }
  
  .cours-window-header .portee-type-btn {
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    padding: 8px 10px !important;
    flex-grow: 0 !important;
    flex-direction: row !important;
    background-color: #f8f9fa !important;
    color: #333 !important;
    border: 2px solid #ccc !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12) !important;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
  }
  
  .cours-window-header .portee-type-btn:hover {
    border-color: #8a4b38 !important;
    background-color: #f8f0e4 !important;
    color: #333 !important;
    transform: scale(1.03) !important;
  }
  
  .cours-window-header .portee-type-btn.active {
    border-color: #8a4b38 !important;
    background-color: #e7f3ff !important;
  }
  
  .cours-window-header .portee-type-btn svg {
    display: block;
    width: 40px;
    height: 30px;
    flex-shrink: 0;
  }
  
  /* Contrôles d'espacement +/- */
  .portees-spacing-controls {
    display: flex;
    gap: clamp(6px, 0.8vw, 10px);
    align-items: center;
    margin-right: clamp(6px, 0.8vw, 10px);
  }
  
  .cours-window-header .portee-spacing-btn {
    min-width: auto !important;
    max-width: none !important;
    width: 48px !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    padding: 0 !important;
    flex-grow: 0 !important;
    flex-direction: row !important;
    background-color: #f8f9fa !important;
    border: 2px solid #ccc !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12) !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    cursor: pointer;
    color: #333 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
  }
  
  .cours-window-header .portee-spacing-btn:hover {
    background-color: #e9ecef !important;
    border-color: #8a4b38 !important;
    color: #8a4b38 !important;
    transform: scale(1.03) !important;
  }
  
  .cours-window-header .portee-spacing-btn:active {
    transform: scale(0.97) !important;
  }
  
  /* Fenêtre d'accueil */
  .welcome-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
  .welcome-content {
    background-color: white;
    border-radius: 10px;
    padding: clamp(12px, 2vw, 25px);
    max-width: 900px;
    width: calc(100% - 40px);
    max-height: calc(100vh - 40px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
  }
  
  .welcome-title {
    color: #8a4b38;
    font-size: clamp(24px, 4vw, 36px);
    font-weight: bold;
    margin-bottom: clamp(8px, 1.5vw, 15px);
    text-transform: uppercase;
    text-align: center;
  }
  
  .welcome-text-intro {
    font-size: clamp(13px, 2vw, 18px);
    line-height: 1.5;
    color: #333;
    margin-bottom: clamp(6px, 1vw, 12px);
    text-align: left;
  }
  
  .welcome-text {
    font-size: clamp(12px, 1.8vw, 16px);
    line-height: 1.5;
    color: #333;
    margin-bottom: clamp(8px, 1.2vw, 15px);
    text-align: left;
  }
  
  .welcome-text.note {
    margin-top: clamp(6px, 1vw, 10px);
    margin-bottom: clamp(8px, 1.2vw, 15px);
  }
  
  .welcome-text strong {
    font-weight: bold;
  }
  

  .environment-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);
    margin-top: clamp(16px, 2vw, 20px);
    flex-wrap: wrap;
  }

  .environment-cancel-button {
    background-color: #f8f9fa;
    color: #333;
    border: 2px solid #ccc;
    padding: clamp(10px, 1.5vw, 15px) clamp(24px, 3.5vw, 36px);
    font-size: clamp(16px, 2.5vw, 20px);
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
    text-transform: uppercase;
  }

  .environment-cancel-button:hover {
    background-color: #e9ecef;
    border-color: #999;
    transform: scale(1.03);
  }

  .environment-actions .continue-button {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .continue-button {
    background-color: #8a4b38;
    color: white;
    border: none;
    padding: clamp(10px, 1.5vw, 15px) clamp(30px, 4vw, 40px);
    font-size: clamp(16px, 2.5vw, 20px);
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    margin-top: auto;
    margin-left: auto;
    margin-right: 0;
    transition: background-color 0.3s;
    text-transform: uppercase;
  }
  
  .continue-button:hover {
    background-color: #6f3a2b;
    transform: scale(1.05);
  }
  
  .welcome-signature {
    margin-top: clamp(8px, 1.2vw, 15px);
    margin-bottom: clamp(8px, 1.2vw, 15px);
    font-size: clamp(12px, 1.8vw, 16px);
    color: #666;
    text-align: left;
  }
  

  /* Fenêtre d'accueil TABLEAU RYTHMIQUE — première fenêtre à l'ouverture */
  #welcomeModal .welcome-content {
    min-height: min(80vh, 700px);
    padding: clamp(24px, 4vh, 42px) clamp(16px, 2.5vw, 30px);
  }

  #welcomeModal .welcome-text-intro {
    color: #000000;
    font-weight: bold;
    text-align: center;
    font-size: clamp(15px, 2.2vw, 20px);
    padding: clamp(14px, 2vh, 20px);
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 8px;
    margin: clamp(18px, 3vh, 30px) 0;
    line-height: 1.45;
  }

  #welcomeModal .welcome-text-intro strong {
    color: #000000;
    font-size: 1.05em;
    font-weight: bold;
  }

  #welcomeModal .welcome-text {
    font-size: clamp(15px, 2.2vw, 20px);
    font-weight: bold;
    line-height: 1.45;
    color: #000000;
    margin-bottom: clamp(22px, 4vh, 38px);
  }

  #welcomeModal .welcome-text strong {
    font-weight: bold;
  }

  #welcomeModal .welcome-platform-label {
    display: inline-block;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 2px;
    margin-bottom: 0.35em;
  }

  #welcomeModal .welcome-signature {
    font-size: clamp(14px, 2vw, 18px);
    font-weight: bold;
    color: #333;
  }

  /* Media queries pour garantir l'affichage sans scrolling */
  @media (max-height: 700px) {
    .welcome-content {
      padding: 10px 20px;
      max-height: calc(100vh - 20px);
    }

    #welcomeModal .welcome-content {
      min-height: auto;
      padding: 14px 20px;
    }

    #welcomeModal .welcome-text-intro,
    #welcomeModal .welcome-text {
      font-size: 13px;
      font-weight: bold;
      line-height: 1.45;
    }

    #welcomeModal .welcome-signature {
      font-size: 13px;
      font-weight: bold;
    }
    
    .welcome-title {
      font-size: 20px;
      margin-bottom: 6px;
    }
    
    .welcome-text-intro {
      font-size: 12px;
      margin-bottom: 4px;
    }
    
    .welcome-text {
      font-size: 11px;
      margin-bottom: 6px;
      line-height: 1.4;
    }
    
    .welcome-signature {
      font-size: 11px;
      margin-top: 6px;
      margin-bottom: 6px;
    }
    
    .continue-button {
      padding: 8px 25px;
      font-size: 14px;
      margin-top: 8px;
    }
  }
  
  @media (min-width: 1900px) and (min-height: 1000px) {
    .welcome-content {
      padding: 25px;
      max-width: 900px;
    }

    #welcomeModal .welcome-content {
      min-height: 720px;
      padding: 42px 30px;
    }

    #welcomeModal .welcome-text-intro,
    #welcomeModal .welcome-text {
      font-size: 20px;
      font-weight: bold;
    }

    #welcomeModal .welcome-signature {
      font-size: 18px;
      font-weight: bold;
    }
    
    .welcome-title {
      font-size: 36px;
      margin-bottom: 15px;
    }
    
    .welcome-text-intro {
      font-size: 18px;
      margin-bottom: 12px;
    }
    
    .welcome-text {
      font-size: 16px;
      margin-bottom: 15px;
    }
    
    .welcome-signature {
      font-size: 16px;
      margin-top: 15px;
      margin-bottom: 15px;
    }
  }
  
.cell.special-cell .pulsation {
  display: none !important;
}

.group-controls-row .ch-button {
  margin: 0 auto;
}

.special-cell .speaker-toggle.floating {
  position: absolute;
  bottom: clamp(2px, 0.4vw, 8px);
  right: clamp(4px, 0.6vw, 8px);
  display: flex;
  justify-content: flex-end;
}

/* =====================================================
   RÉSOLUTION SPÉCIFIQUE : 1512x982 (Mac par défaut)
   Maximisation de l'espace horizontal disponible
   Utilise une classe JavaScript pour une détection plus fiable
   ===================================================== */
body.resolution-1512x982 {
  align-items: stretch !important; /* Au lieu de center */
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

body.resolution-1512x982 .container {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.resolution-1512x982 .gallery-container {
  padding: 2px !important; /* Réduit au strict minimum */
  width: 98% !important; /* 98% pour laisser un petit espace et éviter le débordement */
  max-width: calc(100vw - 20px) !important; /* Largeur maximale = viewport moins barre de scroll (17px) et padding */
  min-width: 98% !important;
  margin: 0 auto !important; /* Centré avec marge automatique */
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  box-sizing: border-box !important;
}

/* Surcharger la media query qui fixe 1400px pour 1512px */
/* Les règles génériques low-resolution s'appliquent déjà, cette media query assure la compatibilité */
@media (min-width: 1441px) and (max-width: 1512px) {
  body.resolution-1512x982.low-resolution .gallery-container {
    padding: 2px var(--gallery-padding-right, 16px) clamp(20px, 1.5vw, 30px) 2px !important; /* Padding-bottom pour prévoir l'espace des pulsations et de la barre bleue active */
    width: var(--optimal-percentage, 98%) !important;
    max-width: var(--optimal-width, calc(100vw - 35px)) !important; /* Utilise la largeur optimale calculée (scrollbar ~17px + barres 16px + buffer 2px) */
    min-width: var(--optimal-percentage, 98%) !important;
    margin: 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  body.resolution-1512x982.low-resolution .gallery {
    width: calc(100% - var(--gallery-padding-right, 16px)) !important;
    max-width: calc(100% - var(--gallery-padding-right, 16px)) !important;
    grid-template-columns: repeat(9, 1fr) !important; /* Colonnes flexibles */
    grid-auto-columns: minmax(0, 1fr) !important; /* Forcer les colonnes à respecter la largeur */
  }
  
  body.resolution-1512x982.low-resolution .cell {
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
    max-width: 100% !important;
  }
}

body.resolution-1512x982 .gallery {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.resolution-1512x982 h1 {
  width: 100% !important;
  max-width: calc(100vw - 20px) !important; /* Tenir compte de la barre de scroll */
  margin: 0 !important;
  padding: 10px 0 !important; /* Réduit de 15px à 10px pour récupérer de l'espace vertical */
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important; /* S'assurer que le h1 est au-dessus du body mais en dessous des éléments flottants */
}

body.resolution-1512x982 .buttons {
  width: 100% !important;
  max-width: calc(100vw - 20px) !important; /* Tenir compte de la barre de scroll */
  box-sizing: border-box !important;
  margin: 5px 0 0 0 !important; /* Réduit de 15px à 5px pour réduire l'espace avec les micro-boutons */
  padding-top: 60px !important; /* Espace pour les micro-boutons (2 rangées de ~25px + gap) */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  gap: 5px !important; /* Réduire considérablement l'espace entre les éléments (de 20px à 5px) */
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important; /* Aligner les boutons au centre verticalement */
  overflow: visible !important; /* Permettre aux micro-boutons d'être visibles */
  position: relative !important; /* Contexte de positionnement pour les enfants absolus */
}

body.resolution-1512x982 .mini-buttons-container {
  left: 0 !important;
  right: 0 !important;
  padding: 0 2px !important;
  width: 100% !important;
  max-width: calc(100vw - 20px) !important; /* Tenir compte de la barre de scroll */
  box-sizing: border-box !important;
  position: absolute !important; /* Position absolue pour éviter d'être coupé */
  top: 0 !important; /* Positionné au-dessus des boutons */
  gap: 3px !important; /* Réduit de 5px à 3px pour récupérer de l'espace vertical */
  overflow: visible !important; /* Permettre aux micro-boutons d'être visibles */
  z-index: 10 !important; /* Au-dessus des boutons mais en dessous du MENU */
}

body.resolution-1512x982 .top-menu-container {
  position: absolute !important;
  top: 60px !important; /* Aligné avec le haut des gros boutons (même valeur que padding-top de .buttons) */
  /* left : JS → bord gauche écran (ne pas forcer ici) */
  z-index: 10000 !important; /* Z-index très élevé pour être au-dessus de la cellule active (z-index: 10) */
}

body.resolution-1512x982 .select-carton-btn,
body.resolution-1512x982 .random-btn,
body.resolution-1512x982 .delete-carton-btn {
  margin: 5px !important;
}

/* =====================================================
   SYSTÈME AUTOMATIQUE D'ADAPTATION POUR TOUTES LES BASSES RÉSOLUTIONS
   Utilise des variables CSS calculées dynamiquement par JavaScript
   S'applique automatiquement à toutes les résolutions < 1920px
   ===================================================== */

body.low-resolution {
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important; /* Empêcher le scrolling horizontal */
}

body.low-resolution .container {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

body.low-resolution .gallery-container {
  padding: 2px var(--gallery-padding-right, 16px) clamp(20px, 1.5vw, 30px) 2px !important; /* Padding-bottom pour prévoir l'espace des pulsations et de la barre bleue active (1.2vw + buffer) */
  width: var(--optimal-percentage, 98%) !important; /* Utilise le pourcentage calculé, fallback augmenté pour maximiser la largeur */
  max-width: var(--optimal-width, calc(100vw - 35px)) !important; /* Utilise la largeur optimale calculée (scrollbar ~17px + barres 16px + buffer 2px) */
  min-width: var(--optimal-percentage, 98%) !important;
  margin: 0 auto !important; /* Centré avec marge automatique */
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  box-sizing: border-box !important;
  /* Permettre aux barres de dépasser dans le padding-right - pas de overflow-x: hidden */
  overflow: visible !important; /* Permettre aux éléments qui dépassent d'être visibles */
}

/* Cacher la barre de scroll pour WebKit (Chrome, Safari) */
body.low-resolution .gallery-container::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body.low-resolution .gallery {
  width: calc(100% - var(--gallery-padding-right, 16px)) !important; /* La galerie tient dans le conteneur moins le padding-right */
  max-width: calc(100% - var(--gallery-padding-right, 16px)) !important; /* S'assurer qu'elle ne dépasse jamais */
  box-sizing: border-box !important;
  /* Permettre aux barres de dépasser - elles seront visibles dans le padding-right du conteneur */
  overflow: visible !important; /* Permettre aux éléments absolus (barres) de dépasser */
  grid-template-columns: repeat(9, 1fr) !important; /* Colonnes flexibles pour s'adapter automatiquement */
  /* S'assurer que la galerie ne dépasse pas de son conteneur */
  min-width: 0 !important; /* Permet aux colonnes flexibles de se rétrécir si nécessaire */
  /* Forcer les colonnes à respecter la largeur disponible */
  grid-auto-columns: minmax(0, 1fr) !important;
}

body.low-resolution .cell {
  width: 100% !important; /* Les cellules utilisent 100% de leur colonne */
  height: auto !important;
  aspect-ratio: 1/1 !important; /* Responsive avec aspect-ratio */
  max-width: 100% !important;
  min-width: 0 !important; /* Permet aux cellules de se rétrécir si nécessaire */
  overflow: visible !important; /* Permettre aux barres absolues de dépasser de la cellule */
  position: relative !important; /* Contexte de positionnement pour les éléments absolus */
  box-sizing: border-box !important; /* Inclure padding et border dans la largeur */
}

body.low-resolution h1 {
  width: 100% !important;
  max-width: calc(var(--available-width, 100vw)) !important; /* Utilise la variable CSS calculée */
  margin: 0 !important;
  padding: 10px 0 !important; /* Réduit de 15px à 10px pour récupérer de l'espace vertical */
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
}

body.low-resolution .buttons {
  width: 100% !important;
  max-width: calc(var(--available-width, 100vw)) !important; /* Utilise la variable CSS calculée */
  box-sizing: border-box !important;
  margin: 5px 0 0 0 !important; /* Réduit de 15px à 5px pour réduire l'espace avec les micro-boutons */
  padding-top: 60px !important; /* Espace pour les micro-boutons (2 rangées de ~25px + gap) */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  gap: 5px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important; /* Aligner les boutons au centre verticalement */
  overflow: visible !important; /* Permettre aux micro-boutons d'être visibles */
  position: relative !important; /* Contexte de positionnement pour les enfants absolus */
}

body.low-resolution .mini-buttons-container {
  left: 0 !important;
  right: 0 !important;
  padding: 0 2px !important;
  width: 100% !important;
  max-width: calc(var(--available-width, 100vw)) !important; /* Utilise la variable CSS calculée */
  box-sizing: border-box !important;
  position: absolute !important; /* Position absolue pour éviter d'être coupé */
  top: 0 !important; /* Positionné au-dessus des boutons */
  gap: 3px !important; /* Réduit de 5px à 3px pour récupérer de l'espace vertical */
  overflow: visible !important; /* Permettre aux micro-boutons d'être visibles */
  z-index: 10 !important; /* Au-dessus des boutons mais en dessous du MENU */
}

body.low-resolution .top-menu-container {
  position: absolute !important;
  top: 60px !important; /* Aligné avec le haut des gros boutons (même valeur que padding-top de .buttons) */
  /* left : JS → bord gauche écran (ne pas forcer ici) */
  z-index: 10000 !important; /* Z-index très élevé pour être au-dessus de la cellule active (z-index: 10) */
}

/* Surcharger les media queries existantes pour les basses résolutions */
@media (max-width: 1919px) {
  body.low-resolution .gallery-container {
    padding: 2px var(--gallery-padding-right, 16px) clamp(20px, 1.5vw, 30px) 2px !important; /* Padding-bottom pour prévoir l'espace des pulsations et de la barre bleue active */
    width: var(--optimal-percentage, 98%) !important;
    max-width: var(--optimal-width, calc(100vw - 35px)) !important;
    min-width: var(--optimal-percentage, 98%) !important;
    margin: 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  body.low-resolution .gallery {
    width: calc(100% - var(--gallery-padding-right, 16px)) !important;
    max-width: calc(100% - var(--gallery-padding-right, 16px)) !important;
    grid-template-columns: repeat(9, 1fr) !important; /* Colonnes flexibles */
    grid-auto-columns: minmax(0, 1fr) !important; /* Forcer les colonnes à respecter la largeur */
  }
  
  body.low-resolution .cell {
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
    max-width: 100% !important;
  }
}

/* ===========================================
   FONCTIONNALITÉ EXPÉRIMENTALE BIG MÉTRONOME
   ===========================================
   SECTION À SUPPRIMER SI LA FONCTIONNALITÉ N'EST PAS INTÉGRÉE
   =========================================== */

/* Fenêtre BIG métronome - positionnée juste sous la barre de titre et utilise tout le reste de l'écran */
.big-metronome-window {
  position: fixed;
  top: 0; /* Sera ajusté dynamiquement par JavaScript pour être sous le h1 */
  left: 0;
  width: 100vw; /* Utilise toute la largeur de l'écran */
  height: 100vh; /* Sera ajusté dynamiquement par JavaScript pour utiliser l'espace restant */
  background-color: #e3d1b9; /* Sable chaud (fond de la fenêtre) */
  border: 2px solid #834530; /* Acajou du métronome */
  border-radius: 0; /* Pas de coins arrondis pour une fenêtre plein écran */
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 2000;
  display: none;
  overflow: visible !important; /* Permettre au battant de dépasser */
  box-sizing: border-box;
  transform: none; /* Pas de transformation pour une fenêtre plein écran */
}

.big-metronome-window.active {
  display: flex;
  flex-direction: column;
}

/* En-tête de la fenêtre BIG */
.big-metronome-header {
  position: relative;
  /* 3 colonnes : CONFIRMER (collé à droite) | ON/OFF (centre exact) | VOLUME + × (collés à gauche) */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(16px, 4vw, 56px);
  padding: 8px 16px 28px; /* bas plus grand : place du label VOLUME (hors flux) */
  border-bottom: 1px solid #331e17;
  background-color: #4b2c22; /* Noyer foncé, comme le BPM */
  flex-shrink: 0;
  min-height: 70px; /* Hauteur minimale fixe pour éviter les changements de taille */
  height: auto; /* Permet l'expansion si nécessaire mais avec min-height comme référence */
  box-sizing: border-box;
  overflow: visible; /* Permettre au BPM de descendre vers le rectangle blanc */
}

/* Conteneur pour les boutons de gauche */
.big-metronome-left-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px; /* Hauteur minimale fixe pour correspondre à la hauteur des boutons */
  height: 50px; /* Hauteur fixe pour éviter les changements de taille */
  box-sizing: border-box;
  z-index: 3;
  grid-column: 1;
  justify-self: end;
}

/* VOLUME + fermeture, à droite du bouton ON / OFF */
.big-metronome-right-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  z-index: 3;
  grid-column: 3;
  justify-self: start;
}

.big-metronome-title {
  font-weight: bold;
  color: #007BFF;
  margin: 0;
  font-size: 24px;
  display: none; /* Masquer le titre */
}

/* BPM centré horizontalement ; top réglé en JS (base = haut du rectangle blanc) */
.big-metronome-speed-controls {
  position: absolute;
  left: 50%;
  top: 12px; /* fallback avant sync */
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: none;
  z-index: 25;
  pointer-events: none;
}

.big-metronome-speed-controls .big-metronome-speed-display {
  pointer-events: auto;
}

/* Scène : image + boutons collés aux flancs du dessin */
.big-metronome-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  min-height: 0;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 8px;
}

/* Enveloppe calée sur le SVG (max 800px) — référence pour coller les boutons au dessin */
.big-metronome-svg-wrap {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 800px;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.big-metronome-svg-wrap .big-metronome-svg {
  width: 100%;
  height: 100%;
}

/*
  Haut aligné sur le rectangle blanc.
  Centre horizontal de chaque bouton = bord gauche / droit du rectangle blanc
  (milieu géométrique de chaque côté vertical).
*/
.big-metronome-speed-btn--side {
  position: absolute;
  top: 0;
  z-index: 20;
  max-width: none;
  white-space: nowrap;
  /* Pas de scale : le bouton reste fixe sous la souris */
  transition: background-color 0.2s, opacity 0.2s;
}

.big-metronome-speed-btn--decrease {
  /* Fallback avant sync JS : bord gauche approx. du PNG dans le SVG */
  left: 18.8%;
  right: auto;
  transform: translate(-50%, 0) !important;
}

.big-metronome-speed-btn--increase {
  /* Fallback Safari-safe : ancré à droite (évite empilement si left:0) */
  left: auto;
  right: 18.8%;
  transform: translate(50%, 0) !important;
}

.big-metronome-speed-btn.big-metronome-speed-btn--side:hover,
.big-metronome-speed-btn.big-metronome-speed-btn--side:active {
  /* Couleur seulement — aucune échelle / déplacement */
  background-color: #743b2a;
  opacity: 0.92;
}

@media (max-width: 700px) {
  .big-metronome-speed-btn.big-metronome-speed-btn--side {
    width: 124px;
    min-width: 124px;
    font-size: 10px;
    padding: 5px 6px;
  }
}

/* Affichage de la vitesse actuelle */
.big-metronome-speed-display {
  background-color: #4b2c22; /* Noyer foncé (flancs du métronome) */
  color: #fff4e6;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 18px;
  min-width: 100px;
  text-align: center;
}

/* Boutons de contrôle de vitesse */
.big-metronome-speed-btn {
  background-color: #964f3e; /* Acajou clair */
  color: white;
  border: 2px solid #743b2a;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  min-height: 50px; /* Même hauteur minimale que le bouton MÉTRONOME GALERIE */
  height: auto; /* Hauteur automatique mais avec min-height */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  line-height: 1.2; /* Espacement entre les lignes */
  word-wrap: break-word; /* Permettre le retour à la ligne si nécessaire */
}

.big-metronome-speed-btn:hover {
  background-color: #743b2a;
  transform: scale(1.05);
}

.big-metronome-speed-btn:active {
  transform: scale(0.95);
}

/* Spécificité > .big-metronome-speed-btn (sinon font-size:14px / padding:16px gagnent) */
.big-metronome-speed-btn.big-metronome-speed-btn--side {
  font-size: 11px;
  font-weight: bold;
  padding: 6px 10px;
  width: 142px;
  min-width: 142px;
  min-height: 40px;
  letter-spacing: 0;
  box-sizing: border-box;
}

.big-metronome-speed-btn.big-metronome-speed-btn--decrease:hover,
.big-metronome-speed-btn.big-metronome-speed-btn--decrease:active {
  transform: translate(-50%, 0) !important;
}
.big-metronome-speed-btn.big-metronome-speed-btn--increase:hover,
.big-metronome-speed-btn.big-metronome-speed-btn--increase:active {
  transform: translate(50%, 0) !important;
}

/* Conteneur pour le bouton d'intensité avec label.
   Le label VOLUME est hors flux : seul le bouton compte pour le centrage vertical,
   ce qui l'aligne exactement sur CONFIRMER. */
.big-metronome-intensity-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

/* Bouton d'intensité du son */
.big-metronome-intensity-btn {
  background-color: #ffc107; /* Jaune par défaut (MOYEN) */
  color: white;
  border: 2px solid #e0a800;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  min-width: 96px;
  min-height: 50px; /* Même hauteur minimale que le bouton MÉTRONOME GALERIE */
  height: auto; /* Hauteur automatique mais avec min-height */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  line-height: 1.2; /* Espacement entre les lignes */
  word-wrap: break-word; /* Permettre le retour à la ligne si nécessaire */
}

.big-metronome-intensity-btn:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.big-metronome-intensity-btn:active {
  transform: scale(0.95);
}

/* Label "VOLUME" sous le bouton d'intensité */
.big-metronome-intensity-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  white-space: nowrap;
  font-size: 18px;
  font-weight: bold;
  color: #e6d3b8;
  text-align: center;
  pointer-events: none;
}

/* Bouton MÉTRONOME ON/OFF dans la fenêtre BIG métronome */
.big-metronome-toggle-btn {
  background-color: #28a745; /* Vert par défaut (ON) */
  color: white;
  border: 2px solid #218838;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  min-width: 120px;
  height: 50px; /* Hauteur fixe pour éviter les changements de taille */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  line-height: 1.2; /* Espacement entre les lignes */
  word-wrap: break-word; /* Permettre le retour à la ligne si nécessaire */
}

.big-metronome-toggle-btn:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.big-metronome-toggle-btn:active {
  transform: scale(0.95);
}

/* Bouton CONFIRMER dans la fenêtre BIG métronome */
.big-metronome-confirm-btn {
  background-color: #c9a37a; /* Même couleur que le volume DOUX (par défaut) */
  color: #3a2018;
  border: 2px solid #a9825a;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  min-width: 100px;
  min-height: 50px; /* Même hauteur minimale que le bouton MÉTRONOME GALERIE */
  height: auto; /* Hauteur automatique mais avec min-height */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  line-height: 1.2; /* Espacement entre les lignes */
  word-wrap: break-word; /* Permettre le retour à la ligne si nécessaire */
}

.big-metronome-confirm-btn:hover {
  background-color: #b8916a;
  transform: scale(1.05);
}

.big-metronome-confirm-btn:active {
  transform: scale(0.95);
}

.big-metronome-close {
  cursor: pointer;
  font-size: 32px;
  color: #e6d3b8;
  background: none;
  border: none;
  padding: 0 12px;
  font-weight: bold;
  line-height: 1;
}

/* Annule les règles globales des boutons (140×60 px, padding, en !important) pour garder le × compact */
.big-metronome-header .big-metronome-close {
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto;
  padding: 0 8px !important;
}

.big-metronome-close:hover {
  opacity: 0.7;
}

/* Conteneur pour le bouton BIG */
.big-metronome-big-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0; /* Empêcher la réduction de taille */
  visibility: visible !important; /* Forcer la visibilité */
}

/* Bouton ON / OFF + rappel « Barre d'espacement », entre CONFIRMER et VOLUME */
.big-metronome-onoff-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  z-index: 4;
  grid-column: 2;
}

/* Les règles globales des boutons imposent taille, largeur et padding en !important */
.big-metronome-onoff-group .big-metronome-barre-espacement-label {
  min-width: 96px !important;
  min-height: 50px;
  padding: 6px 18px !important;
  font-size: 24px !important;
  font-weight: bold;
  line-height: 1;
  color: white;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: background-color 0.2s, transform 0.1s, opacity 0.2s;
}

.big-metronome-barre-espacement-label:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.big-metronome-barre-espacement-label:active {
  transform: scale(0.95);
}

/* Pendule arrêté : bouton vert « ON » */
.big-metronome-barre-espacement-label.barre-espacement-off {
  background-color: #28a745;
  border-color: #218838;
}

/* Pendule en marche : bouton rouge « OFF » */
.big-metronome-barre-espacement-label.barre-espacement-on {
  background-color: #dc3545;
  border-color: #bd2130;
}

/* Rappel (texte seulement) sous le bouton ON / OFF */
.big-metronome-barre-espacement-hint {
  font-size: 11px;
  line-height: 1.1;
  color: #d9c3a5;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Espaceur entre l'en-tête et le métronome (BPM et DIMINUER / AUGMENTER suivent l'image) */
.big-metronome-barre-espacement-spacer {
  width: 100%;
  height: 80px;
  flex-shrink: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Petits écrans (préparation version téléphone) : en-tête plus compact */
@media (max-width: 600px) {
  .big-metronome-header {
    column-gap: 8px;
    padding: 6px 8px 22px;
  }
  .big-metronome-barre-espacement-spacer {
    height: 56px;
  }
  .big-metronome-left-buttons {
    height: auto;
    min-height: 44px;
  }
  .big-metronome-header .big-metronome-confirm-btn,
  .big-metronome-header .big-metronome-intensity-btn {
    min-width: 0 !important;
    min-height: 44px;
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
  .big-metronome-onoff-group .big-metronome-barre-espacement-label {
    min-width: 64px !important;
    min-height: 44px;
    padding: 4px 12px !important;
    font-size: 20px !important;
  }
  .big-metronome-intensity-label {
    font-size: 13px;
  }
  .big-metronome-header .big-metronome-close {
    padding: 0 4px !important;
  }
}

/* Bouton BIG avec image réduite du métronome */
.big-metronome-big-button {
  width: 80px;
  height: 80px;
  border: 2px solid #007BFF;
  border-radius: 8px;
  background-color: #f8f9fa;
  cursor: pointer;
  padding: 5px;
  display: flex !important; /* Forcer l'affichage */
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.1s, border-color 0.2s;
  position: relative;
  overflow: hidden;
  visibility: visible !important; /* Forcer la visibilité */
  opacity: 1 !important; /* Forcer l'opacité */
}

.big-metronome-big-button:hover {
  transform: scale(1.05);
}

.big-metronome-big-button:active {
  transform: scale(0.95);
}

/* Image réduite du métronome dans le bouton */
.big-metronome-big-button-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* État OFF (par défaut) */
.big-metronome-big-button.big-button-off {
  background-color: #f8f9fa;
  border-color: #007BFF;
}

/* État ON (fond vert) */
.big-metronome-big-button.big-button-on {
  background-color: #28a745;
  border-color: #218838;
}

/* Label d'état ON/OFF sous le bouton */
.big-metronome-big-button-label {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  pointer-events: none;
  min-width: 40px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s;
}

/* État OFF */
.big-metronome-big-button-label.big-button-label-off {
  color: #6c757d;
  background-color: #e9ecef;
}

/* État ON */
.big-metronome-big-button-label.big-button-label-on {
  color: #ffffff;
  background-color: #28a745;
}

/* Conteneur des boutons de contrôle */
.big-metronome-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Boutons de contrôle du battant */
.big-metronome-control-btn {
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  color: white;
  background-color: #007BFF;
  border: 2px solid #0056b3;
  border-radius: 4px;
  padding: 6px 12px;
  transition: all 0.2s;
  min-width: 80px;
}

.big-metronome-control-btn:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

.big-metronome-control-btn:active {
  transform: scale(0.95);
  background-color: #004085;
}

/* Conteneur du métronome */
.big-metronome-container {
  flex: 1;
  display: flex;
  flex-direction: column; /* Empiler verticalement : texte au-dessus, métronome en dessous */
  align-items: center; /* Centrer horizontalement */
  justify-content: flex-start;
  position: relative;
  overflow: visible !important; /* Permettre au battant de dépasser - important pour forcer */
  background: linear-gradient(to bottom, #efe3d2 0%, #e3d1b9 100%); /* Sable chaud, plus foncé vers le bas */
  min-height: 0;
  padding-top: 0;
  gap: 0;
}

/* SVG du métronome */
.big-metronome-svg {
  width: 100%;
  height: 100%;
  max-width: 800px;
  max-height: 800px;
  overflow: visible !important; /* Permettre au battant de dépasser */
  position: relative;
  z-index: 10;
}

/* Base du métronome (pieds, base, bande, capuchon, clé) */
.big-metronome-base {
  fill: #8B4513;
  stroke: #654321;
  stroke-width: 3;
}

/* Corps du métronome (corps principal et lignes intérieures) */
.big-metronome-body {
  fill: #D2691E;
  stroke: #8B4513;
  stroke-width: 3;
}

/* Battant du métronome - pivot EN BAS */
.big-metronome-pendulum {
  transform-origin: 0 0; /* Le groupe est déjà translaté au point de pivot en bas (300, 680) */
  transition: none;
  position: relative;
  z-index: 1000; /* S'assurer que le battant est au-dessus de tout */
}

.big-metronome-pendulum-rod {
  fill: #FF6B35; /* Orange vif pour la tige - très visible */
  stroke: #CC5529; /* Bordure plus foncée */
  stroke-width: 4; /* Bordure épaisse */
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); /* Ombre pour plus de profondeur */
}

.big-metronome-pendulum-weight {
  fill: #FF4444; /* Rouge vif pour le poids - très visible */
  stroke: #CC0000; /* Bordure plus foncée */
  stroke-width: 6; /* Bordure très épaisse */
  filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4)); /* Ombre plus prononcée */
}

/* Image du battant avec fond blanc rendu transparent */
.big-metronome-pendulum-image {
  /* Le filtre SVG est appliqué directement dans l'attribut filter de l'image */
  /* Le filtre removeWhiteBackground rend le blanc transparent */
}

/* Animation du battant - va-et-vient */
.big-metronome-pendulum.animating {
  animation: pendulumSwing linear infinite;
  animation-direction: alternate;
}

@keyframes pendulumSwing {
  0% {
    transform: rotate(-40deg); /* Position gauche */
  }
  50% {
    transform: rotate(0deg); /* Position verticale centrale - le "beep" se déclenche ici */
  }
  100% {
    transform: rotate(40deg); /* Position droite */
  }
}

/* Indicateur de statut */
.big-metronome-status {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  z-index: 10;
}

.big-metronome-status.active {
  background-color: rgba(40, 167, 69, 0.8);
}

.big-metronome-status.inactive {
  background-color: rgba(220, 53, 69, 0.8);
}

/* Responsive pour basses résolutions - La position et la hauteur sont gérées dynamiquement par JavaScript */
@media (max-width: 1400px) {
  .big-metronome-window {
    width: 100vw !important; /* Utilise toute la largeur */
    /* top et height sont gérés dynamiquement par JavaScript */
  }
}

@media (max-width: 1200px) {
  .big-metronome-window {
    width: 100vw !important; /* Utilise toute la largeur */
    /* top et height sont gérés dynamiquement par JavaScript */
  }
}

@media (max-width: 900px) {
  .big-metronome-window {
    width: 100vw !important; /* Utilise toute la largeur */
    /* top et height sont gérés dynamiquement par JavaScript */
  }
}

@media (max-width: 600px) {
  .big-metronome-window {
    width: 100vw !important; /* Utilise toute la largeur */
    /* top et height sont gérés dynamiquement par JavaScript */
  }
}

/* ===========================================
   FIN FONCTIONNALITÉ EXPÉRIMENTALE BIG MÉTRONOME
   =========================================== */

/* ===========================================
   STYLES POUR LA FENÊTRE AIDE-MÉMOIRE
   =========================================== */

/* Conteneur principal du contenu de l'aide-mémoire */
.aide-memoire-content {
  background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
}

/* Titre principal */
.aide-memoire-title {
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 700;
  color: #8a4b38;
  margin: 12px 0 12px 0;
  padding-bottom: 10px;
  border-bottom: 3px solid #8a4b38;
  line-height: 1.25;
}


.aide-memoire-title:first-child {
  margin-top: 0;
}

/* Table des matières Aide-mémoire */
.aide-memoire-toc {
  margin: 8px 0 28px 0;
  padding: 18px 20px 14px 20px;
  background: #f8f0e4;
  border: 1px solid #e0cdb0;
  border-radius: 8px;
}

.aide-memoire-toc-heading {
  margin: 0 0 4px 0;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: #8a4b38;
}

.aide-memoire-toc-hint {
  margin: 0 0 12px 0;
  font-size: clamp(14px, 1.3vw, 16px);
  color: #5a6a7a;
}

.aide-memoire-toc-list {
  margin: 0;
  padding: 0 0 0 1.6em;
  list-style: decimal;
  width: 100%;
  box-sizing: border-box;
}

.aide-memoire-toc-item {
  margin: 4px 0;
  padding: 0;
  line-height: 1.35;
}

/* Annuler les styles globaux label/button (max-width 170px, flex colonne, etc.) */
.aide-memoire-content button.aide-memoire-toc-link,
.aide-memoire-toc button.aide-memoire-toc-link,
button.aide-memoire-toc-link {
  display: inline !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #6f3a2b !important;
  font-size: clamp(15px, 1.35vw, 17px) !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
  line-height: 1.35 !important;
  text-align: left !important;
  text-transform: none !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow: visible !important;
  cursor: pointer !important;
  transform: none !important;
}

.aide-memoire-content button.aide-memoire-toc-link:hover,
.aide-memoire-content button.aide-memoire-toc-link:focus,
.aide-memoire-toc button.aide-memoire-toc-link:hover,
.aide-memoire-toc button.aide-memoire-toc-link:focus,
button.aide-memoire-toc-link:hover,
button.aide-memoire-toc-link:focus {
  color: #5a2f22 !important;
  background: none !important;
  background-color: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none;
}

.aide-memoire-subtitle.is-toc-target {
  background: #fff3cd;
  border-left-color: #ffc107;
  transition: background 0.3s ease;
}

/* Pied de page HORS scroll — Aide-mémoire (ne chevauche plus le texte) */
.button-window-content:has(.aide-memoire-window-footer) {
  min-height: 0;
}
.aide-memoire-window-footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0 0;
  padding: 14px 10px 10px 10px;
  background: #ffffff;
  border-top: 1px solid #e0cdb0;
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.08);
  text-align: center;
  z-index: 8;
}
.aide-memoire-window-footer button.aide-memoire-back-to-toc,
.aide-memoire-window-footer button.aide-memoire-back-to-gallery {
  /* hérite des règles bouton existantes */
}

/* Ancien bandeau dans le contenu : plus sticky (évite le flotteur sur le texte) */
.aide-memoire-back-to-toc-wrap {
  position: relative;
  bottom: auto;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0 0;
  padding: 14px 10px 16px 10px;
  background: #ffffff;
  background-image: none;
  border-top: 1px solid #e0cdb0;
  box-shadow: none;
  text-align: center;
}

/* Dans Aide-mémoire, masquer tout résidu de bandeau interne (footer externe actif) */
#aideMemoire-window .aide-memoire-content .aide-memoire-back-to-toc-wrap {
  display: none !important;
}


/* Léger espace bas dans la zone scrollable */
.aide-memoire-content {
  padding-bottom: 12px;
}

/* Ancres TOC : laisser de la place au-dessus du bandeau sticky */
.aide-memoire-content .aide-memoire-subtitle {
  scroll-margin-bottom: 88px;
  scroll-margin-top: 12px;
}

.aide-memoire-content button.aide-memoire-back-to-toc,
.aide-memoire-content button.aide-memoire-back-to-gallery,
button.aide-memoire-back-to-toc,
button.aide-memoire-back-to-gallery {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  border: 2px solid #8a4b38 !important;
  border-radius: 6px !important;
  background: #8a4b38 !important;
  background-color: #8a4b38 !important;
  box-shadow: 0 2px 8px rgba(138, 75, 56, 0.25) !important;
  color: #ffffff !important;
  font-size: clamp(14px, 1.3vw, 16px) !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  text-align: center !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  word-break: normal !important;
  cursor: pointer !important;
  transform: none !important;
}

.aide-memoire-content button.aide-memoire-back-to-toc:hover,
.aide-memoire-content button.aide-memoire-back-to-toc:focus,
.aide-memoire-content button.aide-memoire-back-to-gallery:hover,
.aide-memoire-content button.aide-memoire-back-to-gallery:focus,
button.aide-memoire-back-to-toc:hover,
button.aide-memoire-back-to-toc:focus,
button.aide-memoire-back-to-gallery:hover,
button.aide-memoire-back-to-gallery:focus {
  background: #6f3a2b !important;
  background-color: #6f3a2b !important;
  border-color: #6f3a2b !important;
  color: #ffffff !important;
  transform: none !important;
  outline: none;
}


/* Sous-titre — espacement resserré pour lire plus sans scroller */
.aide-memoire-subtitle {
  font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 600;
  color: #495057;
  margin: 18px 0 8px 0;
  padding-left: 12px;
  border-left: 4px solid #8a4b38;
  line-height: 1.25;
}

/* Paragraphe — interligne et marges réduits (même bloc de texte) */
.aide-memoire-paragraph {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.35;
  color: #333333;
  margin: 3px 0;
  text-align: justify;
  text-justify: inter-word;
}

/* Liste à puces */
.aide-memoire-list {
  margin: 6px 0 8px 24px;
  padding-left: 0;
  list-style: none;
}

.aide-memoire-list-item {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.35;
  color: #333333;
  margin: 3px 0;
  padding-left: 26px;
  position: relative;
}

.aide-memoire-list-item::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #8a4b38;
  font-weight: bold;
  font-size: 1.2em;
}

/* Message vide */
.aide-memoire-empty {
  font-size: clamp(16px, 1.5vw, 18px);
  color: #6c757d;
  font-style: italic;
  text-align: center;
  padding: 40px 20px;
}

/* Lignes vides du Markdown : peu d'espace (éviter le double écart avec les <p>) */
.aide-memoire-content br {
  display: block;
  margin: 2px 0;
  content: "";
  line-height: 0;
  height: 0;
}

/* Scrollbar épaisse et bien visible (fenêtre Aide-mémoire uniquement) */
.aide-memoire-content {
  scrollbar-width: auto; /* Firefox: barre épaisse (pas thin) */
  scrollbar-color: #8a4b38 #d0d0d0;
}

.aide-memoire-content::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}

.aide-memoire-content::-webkit-scrollbar-track {
  background: #d0d0d0;
  border-radius: 10px;
  border: 2px solid #f0f0f0;
}

.aide-memoire-content::-webkit-scrollbar-thumb {
  background: #8a4b38;
  border-radius: 10px;
  border: 3px solid #d0d0d0;
  min-height: 40px;
}

.aide-memoire-content::-webkit-scrollbar-thumb:hover {
  background: #6f3a2b;
}

/* Responsive pour basses résolutions */
@media (max-width: 1200px) {
  .aide-memoire-title {
    font-size: clamp(24px, 4vw, 32px);
  }
  
  .aide-memoire-subtitle {
    font-size: clamp(20px, 3vw, 26px);
  }
  
  .aide-memoire-paragraph,
  .aide-memoire-list-item {
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.35;
    margin: 3px 0;
  }
}

@media (max-width: 768px) {
  .aide-memoire-content {
    padding: 20px !important;
  }
  
  .aide-memoire-title {
    font-size: clamp(20px, 5vw, 28px);
    margin: 20px 0 15px 0;
  }
  
  .aide-memoire-subtitle {
    font-size: clamp(18px, 4vw, 24px);
    margin: 20px 0 12px 0;
  }
  
  .aide-memoire-list {
    margin-left: 20px;
  }
  
  .aide-memoire-list-item {
    padding-left: 25px;
    font-size: clamp(14px, 3vw, 16px);
  }
}

/* ===========================================
   FIN STYLES POUR LA FENÊTRE AIDE-MÉMOIRE
   =========================================== */

#introVisualGuide {
  position: absolute;
  z-index: 101;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  gap: 10px;
}

#introVisualGuide .intro-circle {
  flex: 1;
  aspect-ratio: 1;
  border: 2px solid #7dcea0;
  border-radius: 50%;
  background-color: transparent;
  max-width: 60px;
  max-height: 60px;
  min-width: 30px;
  min-height: 30px;
  transition: background-color 0.1s ease, border-width 0.1s ease;
}

#introVisualGuide .intro-circle.intro-circle-medium {
  border: 4px solid #28a745;
}

#introVisualGuide .intro-circle.intro-circle-strong {
  border: 5px solid #1e7e34;
}

#introVisualGuide .intro-circle.intro-circle-weak {
  border: 2px solid #7dcea0;
}

#introVisualGuide .intro-circle.filled {
  background-color: #82e0aa;
}

#introVisualGuide .intro-circle.intro-circle-medium.filled {
  background-color: #28a745;
}

#introVisualGuide .intro-circle.intro-circle-strong.filled {
  background-color: #145a32;
}

/* Samsung / Android : bloquer le glisser-déposer natif sur les cartons */
body.android-tablet .gallery .carton {
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
}


/* =====================================================
   LIGNE DES BOUTONS PRINCIPAUX — décalage vertical
   Variable : --main-buttons-row-offset (0 = position d'origine)
   ===================================================== */
:root {
  --main-buttons-row-offset: 8px;
  --micro-buttons-container-gap-default: 5px;
  --buttons-padding-top-micro: 38px;
  --mini-buttons-container-top: -28px;
  /* Centre la rangée 6-10 entre la rangée 1-5 et les boutons principaux */
  --micro-buttons-row-bottom-offset: calc(
    (var(--buttons-padding-top-micro) - var(--mini-buttons-container-top) - 50px - var(--micro-buttons-container-gap-default)) / 2
  );
}

body.resolution-1512x982,
body.low-resolution {
  --micro-buttons-container-gap-default: 3px;
  --buttons-padding-top-micro: 60px;
  --mini-buttons-container-top: 0px;
}

.main-buttons-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  /* gap = espacement type Effacer galerie / Effacer cellule ; marges HP/chiffrage retirées pour trio serré avant PLAY */
  gap: 20px;
  width: 100%;
  margin-top: var(--main-buttons-row-offset);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

body.resolution-1512x982 .main-buttons-row,
body.low-resolution .main-buttons-row {
  gap: 5px !important;
  align-items: center !important;
}

/* Compenser pour conserver la position et la taille de la galerie */
.container > .gallery-container {
  margin-top: calc(-1 * var(--main-buttons-row-offset)) !important;
}




/* =====================================================
   RANGÉES MICRO-BOUTONS — espacement vertical et alignement horizontal
   ===================================================== */
.mini-buttons-row-top, .mini-buttons-container > .mini-buttons-row:nth-child(2),
.mini-buttons-row-bottom, .mini-buttons-container > .mini-buttons-row:nth-child(3) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

.mini-buttons-row-bottom, .mini-buttons-container > .mini-buttons-row:nth-child(3) {
  margin-top: var(--micro-buttons-row-bottom-offset, 6px) !important;
}

.mini-buttons-row-top, .mini-buttons-container > .mini-buttons-row:nth-child(2) {
  margin-top: calc(-1 * (var(--main-buttons-row-offset, 8px) - var(--micro-buttons-container-gap-default, 5px))) !important;
  margin-bottom: calc(var(--main-buttons-row-offset, 8px) - var(--micro-buttons-container-gap-default, 5px)) !important;
}

/* =====================================================
   MENU déroulant — neutralise les styles globaux button
   (label, button { font-size: 22px !important; min-width: 140px; … })
   ===================================================== */
.top-menu-dropdown .top-menu-item,
.top-menu-dropdown .top-menu-submenu-option,
.top-menu-dropdown .top-menu-submenu-back {
  font-size: clamp(13px, 1.15vw, 17px) !important;
  padding: clamp(5px, 0.55vw, 9px) clamp(10px, 1.1vw, 18px) !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  background-color: transparent !important;
  background: transparent !important;
  color: #333 !important;
  box-shadow: none !important;
  transform: none !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
  border-radius: 3px !important;
  border: none !important;
  flex-grow: 0 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

.top-menu-dropdown .top-menu-item-two-lines {
  line-height: 1.2 !important;
}

/* SON de la pulsation : libellé menu sur une seule ligne */
.top-menu-dropdown #topMenuChoixTonalite {
  white-space: nowrap !important;
}

/* Sous-menu tonalités : titre long + liste scrollable */
.top-menu-dropdown #topMenuTonaliteSubmenu,
.top-menu-dropdown .top-menu-tonalite-submenu {
  max-height: min(72vh, 520px) !important;
  overflow-y: auto !important;
  min-width: min(94vw, 420px) !important;
  max-width: min(96vw, 480px) !important;
}

.top-menu-dropdown #topMenuTonaliteSubmenu .top-menu-submenu-title,
.top-menu-dropdown .top-menu-tonalite-submenu-title {
  white-space: nowrap !important;
  line-height: 1.35 !important;
  font-size: clamp(15px, 1.45vw, 19px) !important;
  font-weight: 800 !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  padding-top: clamp(6px, 0.8vw, 10px) !important;
  padding-bottom: clamp(8px, 1vw, 12px) !important;
}

.top-menu-dropdown .top-menu-submenu-title-line {
  display: block !important;
  white-space: normal !important;
  text-align: center !important;
  width: 100% !important;
}

.top-menu-dropdown #topMenuTonaliteSubmenu .top-menu-submenu-spacer {
  min-height: clamp(22px, 2.2vw, 32px) !important;
  height: clamp(22px, 2.2vw, 32px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none !important;
}

.top-menu-dropdown .top-menu-submenu-fermer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #cfd4da !important;
  border-radius: 0 !important;
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

.top-menu-dropdown .top-menu-submenu-option-soon,
.top-menu-dropdown .top-menu-submenu-option-soon:hover {
  color: #888 !important;
  font-style: italic !important;
  font-weight: 400 !important;
  background: transparent !important;
  cursor: default !important;
  opacity: 0.85;
}

/* Tonalité active (lecture) */
.top-menu-dropdown .top-menu-submenu-option.selected,
.top-menu-dropdown #topMenuTonaliteSubmenu .top-menu-submenu-option.selected {
  font-weight: 800 !important;
}

/* Tonalités préférées (disponibles, sans « à venir ») : gras + crochet vert */
.top-menu-dropdown #topMenuTonaliteSubmenu .top-menu-submenu-option.is-preferred {
  font-weight: 800 !important;
  position: relative !important;
  padding-right: 2.2em !important;
}
.top-menu-dropdown #topMenuTonaliteSubmenu .top-menu-submenu-option.is-preferred::after {
  content: "✓" !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #28a745 !important;
  font-size: 1.05em !important;
  font-weight: 800 !important;
  font-style: normal !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.top-menu-dropdown .top-menu-item:hover,
.top-menu-dropdown .top-menu-submenu-option:hover,
.top-menu-dropdown .top-menu-submenu-back:hover {
  background-color: rgba(138, 75, 56, 0.08) !important;
  transform: none !important;
  box-shadow: none !important;
}

.top-menu-dropdown .top-menu-submenu .top-menu-submenu-title {
  font-size: clamp(13px, 1.15vw, 17px) !important;
  padding: clamp(4px, 0.5vw, 7px) 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
}

.top-menu-dropdown {
  min-width: clamp(118px, 11vw, 158px) !important;
  max-width: min(96vw, 480px) !important;
  padding: clamp(5px, 0.6vw, 9px) !important;
  gap: clamp(3px, 0.35vw, 5px) !important;
}

/* =====================================================
   Fenêtre de sélection d'environnement — quasi originale + vh
   ===================================================== */
.environment-selection-modal {
  align-items: center;
  padding: 2px 0;
  box-sizing: border-box;
}

.environment-selection-modal .environment-selection-content {
  display: flex;
  flex-direction: column;
  max-width: min(1180px, calc(100vw - 16px));
  width: min(1180px, calc(100vw - 16px));
  max-height: calc(100vh - 6px);
  padding: clamp(16px, 2.4vh, 24px) clamp(20px, 2.4vw, 28px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.environment-selection-modal .environment-selection-title {
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.2;
  margin-bottom: clamp(10px, 1.6vh, 16px);
  white-space: nowrap;
}

.environment-selection-modal .environment-options {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.9vh, 16px);
  margin: clamp(14px, 2.2vh, 22px) 0 0;
  flex: 0 0 auto;
}

.environment-option {
  cursor: pointer;
  border-radius: 10px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.environment-option-main {
  padding: clamp(15px, 2.3vh, 20px) clamp(16px, 2vw, 20px);
  border: 2px solid #ccc;
  background-color: #f9f9f9;
  text-align: center;
}

.environment-option-compact {
  padding: clamp(10px, 1.6vh, 14px) clamp(14px, 1.8vw, 18px);
  border: 1px solid #ddd;
  background-color: #fafafa;
  opacity: 0.9;
  text-align: center;
}

.environment-option-title {
  font-size: clamp(20px, 3.1vh, 24px);
  font-weight: bold;
  color: #333;
  line-height: 1.2;
  margin-bottom: clamp(4px, 0.7vh, 8px);
}

.environment-option-desc {
  font-size: clamp(17px, 2.8vh, 20px);
  font-weight: bold;
  color: #333;
  line-height: 1.25;
}

.environment-option-note {
  font-size: clamp(15px, 2.4vh, 18px);
  font-weight: bold;
  color: #555;
  line-height: 1.2;
  margin-top: clamp(2px, 0.5vh, 5px);
}

.environment-option-note-inline {
  display: inline;
  margin-top: 0;
  margin-left: 0.35em;
  vertical-align: baseline;
}

.environment-option.selected {
  border-color: #8a4b38 !important;
  background-color: #e7f3ff !important;
  opacity: 1 !important;
}

.environment-option.selected .environment-option-title {
  color: #8a4b38;
}

.environment-selection-modal .environment-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(18px, 2.6vh, 28px);
  margin-bottom: clamp(10px, 1.5vh, 16px);
  flex-shrink: 0;
}

.environment-selection-modal .continue-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: clamp(150px, 20vw, 220px) !important;
  max-width: none !important;
  padding: clamp(10px, 1.5vh, 14px) clamp(34px, 4.5vw, 52px) !important;
  font-size: clamp(15px, 2.1vh, 18px) !important;
  font-weight: bold !important;
  background-color: #8a4b38 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(138, 75, 56, 0.35) !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  flex-grow: 0 !important;
  flex-direction: row !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

.environment-selection-modal .continue-button:hover {
  background-color: #6f3a2b !important;
  transform: scale(1.03) !important;
  box-shadow: 0 4px 12px rgba(138, 75, 56, 0.45) !important;
}

@media (max-height: 920px) {
  .environment-selection-modal .environment-selection-content {
    min-height: calc(100vh - 8px);
    justify-content: flex-start;
  }
}

@media (min-height: 921px) {
  .environment-selection-modal .environment-selection-content {
    min-height: auto;
    justify-content: flex-start;
  }
}

@media (max-height: 580px) {
  .environment-selection-modal .environment-selection-title {
    font-size: clamp(16px, 2vw, 20px);
    white-space: nowrap;
  }

  .environment-option-title {
    font-size: clamp(17px, 2.8vh, 20px);
  }

  .environment-option-desc {
    font-size: clamp(15px, 2.5vh, 17px);
    font-weight: bold;
  }

  .environment-option-note {
    font-size: clamp(14px, 2.3vh, 16px);
    font-weight: bold;
  }

  .environment-selection-modal .continue-button {
    padding: clamp(9px, 1.4vh, 12px) clamp(28px, 4vw, 40px) !important;
    font-size: clamp(14px, 2vh, 16px) !important;
    min-width: clamp(130px, 18vw, 180px) !important;
  }
}



/* --- Sélecteur de modèles (MENU → CHARGER Modèle) --- */
.modele-picker-modal {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  /* Au-dessus des « Premiers pas... » (30350) et de l'accueil (10050) */
  z-index: 30450 !important;
}

.modele-picker-modal .modele-picker-content {
  margin: 0 !important;
  width: min(560px, 96vw) !important;
  max-width: min(560px, 96vw) !important;
  max-height: min(82vh, 680px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 20px 18px !important;
  box-sizing: border-box;
}

.modele-picker-modal .modal-title {
  margin: 0 36px 8px 0;
  padding-right: 8px;
  color: #1a1a1a !important;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
}

.modele-picker-modal .modele-picker-close {
  color: #666 !important;
  float: none;
  position: absolute;
  top: 12px;
  right: 14px;
  line-height: 1;
}

.modele-picker-modal .modele-picker-content {
  position: relative;
}

.modele-picker-subtitle {
  margin: 0 0 14px 0;
  font-size: clamp(14px, 1.15vw, 16px);
  color: #555;
  line-height: 1.4;
}

.modele-picker-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 2px;
  flex: 1 1 auto;
  min-height: 0;
}

/* Neutraliser les styles globaux label/button dans cette fenêtre */
.modele-picker-modal button {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  flex-grow: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
}

.modele-picker-modal button:hover {
  transform: none !important;
}

.modele-picker-category-btn,
.modele-picker-back-btn {
  padding: 13px 15px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
  background: #f3f6f9 !important;
  color: #1f2933 !important;
  font-size: clamp(15px, 1.2vw, 17px) !important;
  font-weight: 600 !important;
}

.modele-picker-category-btn:hover,
.modele-picker-back-btn:hover {
  background: rgba(138, 75, 56, 0.1) !important;
  border-color: rgba(138, 75, 56, 0.35) !important;
}

.modele-picker-back-btn {
  font-weight: 500 !important;
  margin-bottom: 2px;
}

.modele-picker-item {
  padding: 14px 15px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #1f2933 !important;
  gap: 6px;
}

.modele-picker-item:hover {
  background: rgba(138, 75, 56, 0.06) !important;
  border-color: rgba(138, 75, 56, 0.32) !important;
}

.modele-picker-item-label {
  display: block;
  width: 100%;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
  color: #111 !important;
  margin: 0;
  line-height: 1.3;
}

.modele-picker-item-description {
  display: block;
  width: 100%;
  font-size: clamp(13px, 1.05vw, 15px);
  color: #444 !important;
  line-height: 1.45;
  margin: 0;
}

.modele-picker-item-author {
  display: block;
  width: 100%;
  font-size: clamp(12px, 1vw, 14px);
  color: #5c6770 !important;
  font-style: italic;
  margin: 2px 0 0 0;
}


.modele-picker-year-section {
  margin: 14px 0 6px;
  padding: 8px 10px;
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 700;
  color: #1a1a1a;
  background: #eef5ff;
  border-left: 4px solid #8a4b38;
  border-radius: 4px;
  text-align: left;
}

.modele-picker-year-section:first-of-type {
  margin-top: 4px;
}

.modele-picker-empty {
  padding: 12px;
  color: #666;
  font-size: 14px;
  line-height: 1.45;
}


/* PARTAGE — indicateur visuel de préparation et d’envoi */
#suggestionSubmissionProgress {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(8, 24, 43, 0.78);
  backdrop-filter: blur(3px);
}

.suggestion-submission-progress-panel {
  width: min(460px, 92vw);
  padding: 26px 28px 22px;
  box-sizing: border-box;
  border-radius: 14px;
  background: #fff;
  color: #263238;
  text-align: center;
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.35);
}

.suggestion-submission-progress-panel h3 {
  margin: 10px 0 8px;
  color: #8a4b38;
  font-size: clamp(20px, 3vw, 26px);
}

#suggestionSubmissionStage {
  min-height: 1.5em;
  margin: 0 0 16px;
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 600;
}

.suggestion-submission-spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto;
  border: 5px solid #d9e9fb;
  border-top-color: #8a4b38;
  border-radius: 50%;
  animation: suggestionSubmissionSpin 0.8s linear infinite;
}

.suggestion-submission-progress-track {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce8f4;
}

.suggestion-submission-progress-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8a4b38, #c9a37a);
  animation: suggestionSubmissionTravel 1.25s ease-in-out infinite;
}

.suggestion-submission-elapsed {
  margin: 12px 0 5px;
  color: #8a4b38;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.suggestion-submission-reassurance {
  margin: 0;
  color: #5b6870;
  font-size: 13px;
  line-height: 1.4;
}

#suggestionSubmitButton:disabled {
  cursor: wait !important;
  opacity: 0.72;
}

@keyframes suggestionSubmissionSpin {
  to { transform: rotate(360deg); }
}

@keyframes suggestionSubmissionTravel {
  0% { left: -45%; }
  100% { left: 105%; }
}

@media (prefers-reduced-motion: reduce) {
  .suggestion-submission-spinner {
    animation-duration: 1.8s;
  }
  .suggestion-submission-progress-bar {
    width: 70%;
    animation: none;
    left: 15%;
  }
}


/* PARTAGE — fenêtre d’erreur courte (remplace alert) */
#suggestionSubmissionError {
  position: fixed;
  inset: 0;
  z-index: 3001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(8, 24, 43, 0.78);
  backdrop-filter: blur(3px);
}

.suggestion-submission-error-panel h3 {
  color: #c62828;
}

.suggestion-submission-error-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: #ffebee;
  color: #c62828;
  font-size: 28px;
  font-weight: 800;
  line-height: 48px;
}

.suggestion-submission-error-message {
  margin: 0 0 18px;
  color: #37474f;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-line;
}

.suggestion-submission-error-ok {
  min-width: 120px;
  padding: 10px 22px;
  border: none;
  border-radius: 6px;
  background: #8a4b38;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.suggestion-submission-error-ok:hover {
  background: #6f3a2b;
}


/* Brassage busy overlay — anti-gel UI */
.brassage-busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 28, 36, 0.42);
  backdrop-filter: blur(1px);
  pointer-events: all;
}

.brassage-busy-panel {
  min-width: min(320px, 86vw);
  padding: 28px 26px 24px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  text-align: center;
}

.brassage-busy-spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 14px;
  border: 5px solid #d9e9fb;
  border-top-color: #8a4b38;
  border-radius: 50%;
  animation: brassageBusySpin 0.8s linear infinite;
}

.brassage-busy-title {
  margin: 0 0 6px;
  color: #1a2330;
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 700;
}

.brassage-busy-hint {
  margin: 0;
  color: #5b6870;
  font-size: 14px;
  line-height: 1.35;
}

body.brassage-busy {
  cursor: wait;
}

.brassage-relief-label {
  display: block;
  width: fit-content;
  margin: 18px auto;
  padding: 10px 24px;
  border: 3px solid #b71c1c;
  border-radius: 10px;
  background: #ffebee;
  color: #b71c1c;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-align: center;
}

.cell.brassage-relief-highlight {
  outline: 5px solid #e53935 !important;
  outline-offset: -5px;
  box-shadow: inset 0 0 18px rgba(229, 57, 53, 0.45) !important;
  animation: brassageReliefPulse 1.1s ease-in-out infinite alternate;
}

@keyframes brassageReliefPulse {
  from { outline-color: #e53935; }
  to { outline-color: #ff8a80; }
}

@keyframes brassageBusySpin {
  to { transform: rotate(360deg); }
}




/* =====================================================
   Choix de profil (élève / enseignant) — ouverture
   ===================================================== */
.user-role-selection-modal {
  z-index: 10060;
}

.user-role-selection-content {
  max-width: min(720px, calc(100vw - 28px)) !important;
  width: min(720px, calc(100vw - 28px)) !important;
  text-align: center;
  padding: clamp(18px, 2.5vw, 28px) clamp(20px, 3vw, 32px) clamp(24px, 3vw, 36px) !important;
}

/* Bandeau titre : texte blanc lisible sur fond bleu */
.user-role-selection-modal .user-role-selection-title,
.user-role-selection-content > .user-role-selection-title {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 clamp(18px, 2.5vw, 28px) !important; /* mi-chemin vs ancien espacement */
  padding: clamp(14px, 2vw, 20px) clamp(12px, 2vw, 18px) !important;
  border-radius: 8px !important;
  background-color: #4b2c22 !important;
  background: #4b2c22 !important;
  color: #ffffff !important;
  font-size: clamp(20px, 2.8vw, 28px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

.user-role-selection-title .user-role-tri,
.user-role-selection-title strong.user-role-tri {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1.22em !important; /* un peu plus grand que le reste du titre (fenêtre d'accueil) */
  letter-spacing: 0.02em;
  margin-left: 0.15em;
  padding: 0.08em 0.28em 0.1em;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22); /* léger encadré pour faire ressortir TRi */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Barre bleue : Tableau Rythmique 2.0 interactif TRi
   2.0 = 50 % du titre ; TRi = encadré blanc. */
h1 .app-version-suffix,
.app-version-suffix {
  font-size: 0.5em !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  margin-left: 0.25em;
  margin-right: 0.5em;
  padding: 0 !important;
  vertical-align: baseline;
  line-height: 1 !important;
  color: inherit !important;
  background: none !important;
  box-shadow: none !important;
  display: inline !important;
}

/* « i » de interactif : même taille que « nteractif », plus gras et plus blanc, sans fond */
h1 .app-title-interactif-i,
.app-title-interactif-i {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1em;
  line-height: inherit;
  display: inline;
  background: none !important;
  padding: 0 !important;
  margin: 0;
  vertical-align: baseline;
  text-shadow: 0 0 0.6px #ffffff;
}

/* « nteractif » : plus blanc qu’avant, mais moins que Tableau Rythmique 2.0 */
h1 .app-title-interactif-rest,
.app-title-interactif-rest {
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: inherit;
}

h1 .user-role-tri,
h1 strong.user-role-tri {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1em !important;
  letter-spacing: 0.02em;
  margin-left: 0.15em;
  padding: 0.08em 0.28em 0.1em;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.user-role-selection-subtitle {
  margin: 0 0 clamp(22px, 3vw, 30px) !important;
  padding: 0 !important;
  font-size: clamp(17px, 2.2vw, 21px) !important;
  font-weight: 600 !important;
  color: #333 !important;
  line-height: 1.4 !important;
}

.user-role-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  text-align: left;
  align-self: stretch;
}

/* Lignes de sélection pleine largeur — neutralise styles globaux button (max-width 250px, fond bleu, etc.) */
.user-role-selection-modal button.user-role-option,
.user-role-selection-modal .user-role-option,
button.user-role-option {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  text-align: left !important;
  cursor: pointer;
  border: 1px solid #d0d7de !important;
  border-radius: 8px !important;
  background: #fafbfc !important;
  background-color: #fafbfc !important;
  color: #222 !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color 0.15s ease, background 0.15s ease;
  font: inherit !important;
  font-size: inherit !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.user-role-selection-modal button.user-role-option:hover,
.user-role-selection-modal button.user-role-option:focus-visible,
button.user-role-option:hover,
button.user-role-option:focus-visible {
  border-color: #8a4b38 !important;
  background: #f8f0e4 !important;
  background-color: #f8f0e4 !important;
  color: #222 !important;
  outline: none;
  box-shadow: none !important;
  transform: none !important;
}

.user-role-selection-modal .user-role-option-letter {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  border: 2px solid #8a4b38 !important;
  background: #ffffff !important;
  color: #8a4b38 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
}

.user-role-selection-modal .user-role-option-label {
  flex: 1 1 auto !important;
  display: block !important;
  font-size: clamp(15px, 1.9vw, 18px) !important;
  font-weight: 500 !important;
  color: #222 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
}

/* =====================================================
   Page d'accueil enseignants (Netlify Forms)
   ===================================================== */
.teacher-welcome-modal {
  z-index: 10050;
  align-items: flex-start;
  padding: 12px 0;
  overflow-y: auto;
}

.teacher-welcome-modal .teacher-welcome-content,
.teacher-welcome-content {
  max-width: calc(100vw - 24px) !important;
  width: calc(100vw - 24px) !important;
  text-align: left;
  padding: clamp(16px, 2.5vw, 28px) clamp(20px, 3vw, 40px) !important;
  margin: 12px auto !important;
  box-sizing: border-box !important;
  /* Empêche le flex de compresser le bandeau titre (moitié de titre coupée) */
  align-items: stretch !important;
  flex-shrink: 0 !important;
  max-height: calc(100vh - 24px) !important;
}

/* Bandeau titre : ne jamais shrinker dans le flex column du modal */
.teacher-welcome-modal .teacher-welcome-title,
.teacher-welcome-content > .teacher-welcome-title {
  display: block !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 3.2em !important;
  margin: 0 0 clamp(14px, 2vw, 22px) !important;
  padding: clamp(16px, 2.2vw, 22px) clamp(14px, 2vw, 20px) !important;
  border-radius: 8px !important;
  background-color: #4b2c22 !important;
  background: #4b2c22 !important;
  color: #ffffff !important;
  font-size: clamp(22px, 2.6vw, 30px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  aspect-ratio: auto !important;
  position: relative !important;
  z-index: 2 !important;
  box-shadow: none !important;
}
.teacher-welcome-title .user-role-tri,
.teacher-welcome-title strong.user-role-tri {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1.22em !important;
  letter-spacing: 0.02em;
  margin-left: 0.15em;
  padding: 0.08em 0.28em 0.1em;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  vertical-align: middle;
  display: inline-block;
  line-height: 1.2;
}

.teacher-welcome-intro {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.5;
  color: #222;
  margin-bottom: clamp(12px, 2vw, 18px);
  width: 100%;
  max-width: none;
}

/* TRi dans le texte d'accueil enseignants */
.teacher-welcome-intro .user-role-tri,
.teacher-welcome-intro strong.user-role-tri {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1em !important;
  letter-spacing: 0.02em;
  margin: 0 0.08em;
  padding: 0.08em 0.28em 0.1em;
  border-radius: 6px;
  background: #8a4b38;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  vertical-align: baseline;
  display: inline;
  line-height: inherit;
}

.teacher-welcome-intro p {
  margin: 0 0 0.65em 0;
}

.teacher-welcome-intro p:last-child {
  margin-bottom: 0;
}

.teacher-welcome-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.teacher-welcome-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.teacher-welcome-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 640px) {
  .teacher-welcome-name-row {
    grid-template-columns: 1fr;
  }
}

.teacher-welcome-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.teacher-welcome-field label {
  font-weight: 700;
  font-size: clamp(13px, 1.8vw, 15px);
  color: #ffffff;
}

.teacher-welcome-field input[type="text"],
.teacher-welcome-field input[type="email"] {
  border: 2px solid #cfd6dd;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: clamp(14px, 2vw, 16px);
  width: 100%;
  box-sizing: border-box;
}

.teacher-welcome-field input[type="text"]:focus,
.teacher-welcome-field input[type="email"]:focus {
  outline: none;
  border-color: #8a4b38;
  box-shadow: 0 0 0 3px rgba(138, 75, 56, 0.15);
}

.teacher-welcome-status {
  min-height: 1.2em;
  font-size: clamp(13px, 1.8vw, 15px);
  color: #0b5ed7;
  margin: 0;
}

.teacher-welcome-status.is-error {
  color: #b00020;
}

.teacher-welcome-status.is-success {
  color: #146c2e;
}

.teacher-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.teacher-welcome-actions .continue-button {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(18px, 2.4vw, 24px);
  padding: clamp(12px, 2vw, 18px) clamp(44px, 6vw, 64px);
  letter-spacing: 0.05em;
  box-shadow: 0 4px 14px rgba(138, 75, 56, 0.35);
}

.teacher-welcome-actions .environment-cancel-button {
  margin: 0;
  font-size: clamp(14px, 1.8vw, 17px);
  font-weight: 600;
  padding: clamp(10px, 1.5vw, 14px) clamp(20px, 3vw, 28px);
  opacity: 0.92;
}

.teacher-welcome-signature {
  margin-top: 16px;
  text-align: center;
}

/* Élèves : bouton CONTINUER sous le texte de présentation (sans formulaire) */
.student-welcome-continue {
  margin-top: clamp(8px, 1.5vw, 14px);
}
.teacher-welcome-modal[data-welcome-audience="eleve"] .teacher-welcome-form {
  display: none !important;
}

.student-welcome-intro {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.5;
  color: #222;
  margin-bottom: clamp(12px, 2vw, 18px);
  width: 100%;
  max-width: none;
}

.student-welcome-intro .user-role-tri,
.student-welcome-intro strong.user-role-tri {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1em !important;
  letter-spacing: 0.02em;
  margin: 0 0.08em;
  padding: 0.08em 0.28em 0.1em;
  border-radius: 6px;
  background: #8a4b38;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  vertical-align: baseline;
  display: inline;
  line-height: inherit;
}

.student-welcome-intro p {
  margin: 0 0 0.65em 0;
}

.student-welcome-intro p:last-child {
  margin-bottom: 0;
}

.teacher-welcome-modal[data-welcome-audience="eleve"] .teacher-welcome-intro {
  display: none !important;
}

.teacher-welcome-modal[data-welcome-audience="eleve"] .student-welcome-intro {
  display: block !important;
}

.teacher-welcome-modal[data-welcome-audience="enseignant"] .student-welcome-intro {
  display: none !important;
}

.teacher-welcome-modal[data-welcome-audience="enseignant"] .student-welcome-continue {
  display: none !important;
}



@media (max-width: 640px) {
  .teacher-welcome-actions {
    flex-direction: column;
  }
  .teacher-welcome-actions .continue-button,
  .teacher-welcome-actions .environment-cancel-button {
    width: 100%;
  }
}


/* =====================================================
   Mode expérimental nouveau chiffrage (Denis — Ctrl+Option+C)
   Invisible pour les utilisateurs habituels tant que le mode est off
   ===================================================== */
.experimental-chiffrage-badge {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10060;
  background: #c45c26;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  cursor: pointer;
  font-family: Arial, sans-serif;
}

.experimental-chiffrage-badge:hover {
  background: #a34a1c;
}

.experimental-chiffrage-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  z-index: 10070;
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: min(90vw, 520px);
  text-align: center;
  font-family: Arial, sans-serif;
}

.experimental-chiffrage-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Témoin numérique sur le carton source : suit la largeur réelle (simple → quadruple). */
.carton > .carton-source-countdown {
  position: absolute;
  top: calc(5% - 4px);
  /* Retrait intérieur pour ne pas empiéter sur la bordure droite du carton */
  right: 16px;
  min-width: 19px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.88);
  color: #1a1a1a;
  font-family: Arial, sans-serif;
  font-size: clamp(12px, 1.2vw, 16.8px);
  font-weight: 700;
  line-height: 1.1;
  text-align: right;
  pointer-events: none;
  z-index: 1001;
}

/* Sur cartons larges, un léger retrait proportionnel garde le chiffre près du bord droit réel */
.carton > .carton-source-countdown.span-2 {
  right: max(16px, 1.2%);
}
.carton > .carton-source-countdown.span-3 {
  right: max(16px, 1%);
}
.carton > .carton-source-countdown.span-4 {
  right: max(16px, 0.8%);
}



/* Badge tonalité — sous la portée multi-son (z plus bas) dans les cellules spéciales */
.cell.special-cell > .gallery-tonalite-label,
.cell.special-cell > button.gallery-tonalite-label {
  z-index: 20 !important;
  /* Laisse de la place à droite pour .speaker-toggle (portée multi-son) */
  max-width: calc(100% - 52px) !important;
  /* Même taille que mono / 2×16 / 4×8 (réf. 4×8 + 2 px) */
  font-size: clamp(17px, calc(1.2vw + 5px), 21px) !important;
  top: 14px !important;
  left: 3px !important;
  padding: 1px 5px !important;
  height: auto !important;
  min-height: 0 !important;
}
.cell.special-cell > .position {
  z-index: 1;
}
/* Portée multi-son toujours cliquable au-dessus du badge tonalité */
.cell.special-cell > .speaker-toggle,
.cell.special-cell .speaker-toggle {
  z-index: 40 !important;
  position: absolute !important;
}

/* Micro-bouton tonalité — override des styles globaux button (!important) */
button.gallery-tonalite-label,
.gallery-tonalite-label {
  position: absolute !important;
  top: 17px !important;
  left: 4px !important;
  z-index: 20 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  flex-grow: 0 !important;
  flex-shrink: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 5px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(42%, 90px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  font-family: Arial, sans-serif !important;
  /* Badge LA / SIb — taille unique tous modes (= ancien 4×8 + 2 px) */
  font-size: clamp(17px, calc(1.2vw + 5px), 21px) !important;
  font-weight: bold !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-transform: none !important;
  color: #ffffff !important;
  background: #5f7f4a !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  touch-action: manipulation !important;
}

/*
 * Zone tactile : élargie à gauche/haut/bas, mais PAS à droite
 * (évite de masquer/bloquer la portée multi-son en haut à droite).
 */
button.gallery-tonalite-label::before,
.gallery-tonalite-label::before {
  content: "" !important;
  position: absolute !important;
  top: -14px !important;
  right: 0 !important;
  bottom: -14px !important;
  left: -14px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

/* Poly 4×8 / 2×16 : badge encore plus compact (cellules spéciales étroites) */
body.presentation-4x8 .cell.special-cell > button.gallery-tonalite-label,
body.presentation-4x8 .cell.special-cell > .gallery-tonalite-label,
body.presentation-2x16 .cell.special-cell > button.gallery-tonalite-label,
body.presentation-2x16 .cell.special-cell > .gallery-tonalite-label {
  max-width: calc(100% - 48px) !important;
  /* Même taille que mono (réf. ancien 4×8 + 2 px) */
  font-size: clamp(17px, calc(1.2vw + 5px), 21px) !important;
  padding: 1px 4px !important;
}

button.gallery-tonalite-label:hover,
.gallery-tonalite-label:hover {
  background: #4e6b3c !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
  color: #ffffff !important;
  transform: none !important;
}

button.gallery-tonalite-label:active,
.gallery-tonalite-label:active {
  transform: translateY(0.5px) !important;
}


/* ========== PARTAGE — fenêtre plein écran (micro-bouton 6) ========== */
.partage-window [hidden] {
  display: none !important;
}

.partage-window {
  position: fixed;
  left: 0;
  width: 100vw;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #fff;
  border-top: 2px solid #8a4b38;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  font-family: Helvetica, Arial, sans-serif;
  color: #333;
}

.partage-window-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(8px, 1.2vw, 12px) clamp(12px, 1.8vw, 20px);
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
  min-height: 48px;
  box-sizing: border-box;
}

.partage-window-title {
  margin: 0;
  font-size: clamp(16px, 2.2vw, 24px);
  font-weight: 700;
  color: #8a4b38;
  line-height: 1.2;
}

.partage-window-close {
  flex-shrink: 0;
  width: clamp(28px, 3vw, 36px);
  height: clamp(28px, 3vw, 36px);
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #666;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partage-window-close:hover {
  background: #e9ecef;
  color: #333;
  border-color: #999;
}

.partage-window-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 24px);
  padding: clamp(10px, 1.4vw, 18px) clamp(12px, 1.8vw, 22px);
  overflow: hidden;
  box-sizing: border-box;
  align-content: start;
}

.partage-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
  min-width: 0;
}

.partage-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1vw, 12px);
}

.partage-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}


/* Libellé long : 2 lignes comme les autres boutons (évite le wrap en 4 lignes à 170px) */

/* Libellé « Nom du fichier de la galerie » : 2 lignes comme les autres boutons */
.partage-window label.partage-ligne2-label {
  max-width: 240px !important;
  min-width: 200px !important;
  width: auto !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  font-size: clamp(14px, 1.5vw, 18px) !important;
  padding: 10px 12px !important;
}

.partage-window label.partage-ligne2-label .btn-text-wrap {
  margin-top: 2px !important;
  font-size: inherit !important;
}

.partage-window label.partage-etablissement-label {
  max-width: 260px !important;
  min-width: 220px !important;
  width: auto !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  font-size: clamp(14px, 1.5vw, 18px) !important;
  padding: 10px 12px !important;
}

.partage-window label.partage-etablissement-label .btn-text-wrap {
  margin-top: 2px !important;
  font-size: inherit !important;
}

.partage-field label,
.partage-fieldset legend {
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 700;
  color: #333;
  margin: 0;
}

.partage-field input[type="text"],
.partage-field input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(8px, 1vw, 11px) 10px;
  border: 2px solid #8a4b38;
  border-radius: 6px;
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 500;
  color: #222;
  background: #fff;
  box-shadow: none;
}

.partage-field input:disabled {
  background: #f1f3f5;
  border-color: #adb5bd;
  color: #6c757d;
  cursor: not-allowed;
}

.partage-fieldset {
  margin: 0;
  padding: clamp(8px, 1vw, 12px);
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #fafbfc;
  min-width: 0;
}

.partage-fieldset legend {
  padding: 0 6px;
  color: #8a4b38;
}

.partage-type-grid,
.partage-pub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

.partage-choice {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px;
  margin: 0 !important;
  padding: 6px 8px !important;
  border-radius: 6px;
  cursor: pointer;
  font-size: clamp(12px, 1.25vw, 14px) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #333 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: normal !important;
  text-align: left !important;
  background: #fff;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.partage-choice:hover {
  border-color: #c5d9f5;
  background: #f3f8ff;
}

.partage-choice:has(input:checked) {
  border-color: #8a4b38;
  background: #eaf3ff;
}

.partage-choice input {
  flex-shrink: 0;
  margin: 2px 0 0 0;
  transform: scale(1.15);
}

.partage-choice span {
  flex: 1 1 auto;
  min-width: 0;
}

.partage-hint {
  margin: 0;
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 700;
  color: #333;
  line-height: 1.35;
}

.partage-info {
  margin: 0;
  font-size: clamp(12px, 1.2vw, 13px);
  color: #555;
  line-height: 1.35;
}

.partage-vote-mention {
  padding: clamp(10px, 1.2vw, 14px);
  border: 2px solid #8a4b38;
  border-radius: 6px;
  background: #f1f7ff;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 600;
  color: #6f3a2b;
  text-align: center;
}

.partage-counter {
  text-align: right;
  font-size: 12px;
  color: #666;
}

.partage-pub-intro {
  margin: 0 0 6px;
  font-size: clamp(12px, 1.2vw, 13px);
  color: #666;
}

.partage-window-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: clamp(8px, 1.1vw, 12px) clamp(12px, 1.8vw, 20px);
  border-top: 1px solid #ddd;
  background: #f8f9fa;
  box-sizing: border-box;
}

.partage-contact {
  margin: 0;
  font-size: clamp(12px, 1.2vw, 14px);
  font-style: italic;
  color: #555;
}

.partage-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.partage-btn {
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  padding: clamp(8px, 1vw, 10px) clamp(14px, 1.6vw, 20px);
  font-size: clamp(13px, 1.4vw, 15px);
}

.partage-btn-cancel {
  background: #6c757d;
  color: #fff;
  min-width: 96px;
}

.partage-btn-cancel:hover {
  background: #5a6268;
}

.partage-btn-submit {
  background: #8a4b38;
  color: #fff;
  min-width: 140px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

.partage-btn-submit:hover {
  background: #6f3a2b;
}

/* Petits écrans : une colonne, défilement uniquement si nécessaire */
@media (max-width: 900px), (max-height: 700px) {
  .partage-window-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .partage-type-grid,
  .partage-pub-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .partage-field-row,
  .partage-type-grid,
  .partage-pub-grid {
    grid-template-columns: 1fr;
  }

  .partage-window-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .partage-actions {
    margin-left: 0;
    width: 100%;
  }

  .partage-btn {
    flex: 1 1 auto;
  }
}

@media (max-height: 620px) {
  .partage-window-header,
  .partage-window-footer {
    padding-top: 6px;
    padding-bottom: 6px;
    min-height: 0;
  }

  .partage-window-body {
    gap: 8px;
    padding: 8px 12px;
  }

  .partage-panel {
    gap: 6px;
  }

  .partage-field input[type="text"],
  .partage-field input[type="email"] {
    padding: 6px 8px;
  }

  .partage-choice {
    padding: 4px 6px !important;
  }
}

/* Neutralise les styles globaux trop agressifs sur les labels du formulaire PARTAGE */
.partage-window label[for="voteGalerie"],
.partage-window label.partage-choice {
  white-space: normal !important;
  max-width: none !important;
  width: auto !important;
}



/* Cartons de la galerie : masquer les deux fines lignes horizontales rouges des
   dessins. Le filtre recopie la voie rouge sur les trois canaux, donc le rouge pur
   devient blanc et les notes noires restent noires.
   Les cartons en cours de copie / deplacement / suppression gardent leurs couleurs
   d'etat, ces classes sont donc exclues. */
.cell .carton:not(.carton-copied):not(.carton-selected-for-move):not(.being-moved):not(.target-replaceable):not(.delete-mode):not(.selected-for-copy) {
  filter: url(#cartonSansLignesRouges);
}


/* Mono-chiffrage avec levée (2/4, 2/2, 4/2, 4/4, 6/8, 12/8) : pas de barre de mesure
   simple entre la cellule de levée et la cellule voisine, quel que soit l'état de la
   galerie. L'élément reste dans le DOM car il sert d'ancrage au signe de reprise de
   levée (barre épaisse + deux points), qui doit rester visible quand il est actif. */
body.presentation-normal .cell[data-position="0-0"] > .bar-line:not(.fixed-bar-line):not(.levee-forward-repeat-marker) {
  visibility: hidden;
}


/* Mono-chiffrage avec levée : les barres de mesure simples à gauche des lignes 2, 3 et 4
   (portées par les cellules inactives de la colonne 1) passent à un gris discret. */
body.presentation-normal .cell.mono-inactive-col0-cell > .bar-line:not(.fixed-bar-line) {
  background-color: #aaaaaa;
}

/* Contexte 3 — jumelage 2 temps, GAMME ON seulement :
   barres internes en gris un peu plus foncé + pointillé (même gabarit) */
.bar-line.context3-paired-measure-bar:not(.fixed-bar-line) {
  background-color: transparent !important;
  /* Trait vertical pointillé : segments gris, espaces transparents */
  background-image: repeating-linear-gradient(
    to bottom,
    #9a9a9a 0,
    #9a9a9a 5px,
    transparent 5px,
    transparent 10px
  ) !important;
  opacity: 1;
}


/* Mot de passe d'accès aux galeries d'une école (PROGRESSIONS PÉDAGOGIQUES) */
.modele-folder-password-modal {
  position: fixed;
  inset: 0;
  z-index: 30460;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  padding: 16px;
  box-sizing: border-box;
}
.modele-folder-password-panel {
  width: min(440px, 100%);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  padding: 22px 24px 20px;
  box-sizing: border-box;
}
.modele-folder-password-title {
  margin: 0 0 10px;
  color: #8a4b38;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
.modele-folder-password-text {
  margin: 0 0 16px;
  color: #333;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}
.modele-folder-password-label {
  display: block;
  margin: 0 0 6px;
  font-weight: 600;
  color: #222;
  font-size: 14px;
  max-width: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  transform: none !important;
}
.modele-folder-password-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 2px solid #8a4b38;
  border-radius: 6px;
  font-size: 18px;
  letter-spacing: 0.08em;
}
.modele-folder-password-error {
  margin: 8px 0 0;
  color: #c62828;
  font-size: 14px;
  font-weight: 600;
}
.modele-folder-password-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.modele-folder-password-cancel,
.modele-folder-password-confirm {
  max-width: none !important;
  min-width: 0 !important;
  flex-grow: 0 !important;
  width: auto !important;
  padding: 10px 18px !important;
  font-size: 15px !important;
  border-radius: 6px !important;
}
.modele-folder-password-cancel {
  background: #6c757d !important;
  color: #fff !important;
}
.modele-folder-password-confirm {
  background: #8a4b38 !important;
  color: #fff !important;
}

/* Fenêtre choix direction gamme (encadré + Gamme ON) */
.encadre-gamme-direction-modal {
  position: fixed;
  inset: 0;
  z-index: 30500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  padding: 16px;
  box-sizing: border-box;
}
.encadre-gamme-direction-panel {
  width: min(480px, 100%);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  padding: 22px 24px 18px;
  box-sizing: border-box;
}
.encadre-gamme-direction-title {
  margin: 0 0 12px;
  color: #8a4b38;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
.encadre-gamme-direction-text {
  margin: 0 0 12px;
  color: #333;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
}
.encadre-gamme-direction-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.encadre-gamme-direction-btn {
  flex: 1;
  padding: 14px 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: 2px solid transparent !important;
  cursor: pointer;
  color: #fff !important;
  max-width: none !important;
  min-width: 0 !important;
  width: auto !important;
}
.encadre-gamme-direction-btn--asc {
  background: #28a745 !important;
  border-color: #1e7e34 !important;
}
.encadre-gamme-direction-btn--desc {
  background: #8a4b38 !important;
  border-color: #6f3a2b !important;
}
.encadre-gamme-direction-btn:hover {
  filter: brightness(1.05);
}
.encadre-gamme-direction-btn:focus {
  outline: 3px solid rgba(138, 75, 56, 0.35);
  outline-offset: 2px;
}
.encadre-gamme-direction-cancel {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  background: #6c757d !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer;
  max-width: none !important;
}
.encadre-gamme-direction-cancel:hover {
  background: #5a6268 !important;
}




#tabletQuitLanding {
  position: fixed;
  inset: 0;
  z-index: 40000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: linear-gradient(160deg, #1a1a1a 0%, #2c2c2c 55%, #1f2933 100%);
}
.tablet-quit-landing-card {
  width: min(560px, 94vw);
  background: #fff;
  border-radius: 14px;
  padding: 28px 26px 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  text-align: center;
  box-sizing: border-box;
}
.tablet-quit-landing-title {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 3.2vw, 2rem);
  color: #222;
}
.tablet-quit-landing-text {
  margin: 0 0 10px;
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  line-height: 1.45;
  color: #333;
}
.tablet-quit-landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
}
.tablet-quit-landing-actions .button {
  min-width: min(220px, 100%);
  min-height: 48px;
  font-size: 1.05rem;
  font-weight: 600;
}

.tablet-quit-landing-steps {
  margin: 12px auto 8px;
  padding-left: 1.35em;
  max-width: 36em;
  text-align: left;
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  line-height: 1.45;
  color: #333;
}
.tablet-quit-landing-steps li {
  margin-bottom: 8px;
}

/* Astuces & suggestions : TRi + deux encadrés PRIMAIRE / SECONDAIRE */
.aide-memoire-content .user-role-tri,
.aide-memoire-content strong.user-role-tri {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1em !important;
  letter-spacing: 0.02em;
  margin: 0 0.08em;
  padding: 0.08em 0.28em 0.1em;
  border-radius: 6px;
  background: #8a4b38;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  vertical-align: baseline;
  display: inline;
  line-height: inherit;
}

.astuces-section-box {
  border: 2px solid #8a4b38;
  border-radius: 8px;
  padding: 14px 18px 28px 18px;
  margin: 22px 0 0 0;
  background: #f7fbff;
  min-height: 110px;
  box-sizing: border-box;
}

.astuces-section-box .astuces-section-title,
.astuces-section-box .aide-memoire-subtitle {
  margin-top: 0;
  margin-bottom: 8px;
}

.communaute-comments {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.communaute-empty {
  margin: 8px 0 0 0;
  color: #667;
  font-size: clamp(14px, 1.3vw, 16px);
  font-style: italic;
}

.communaute-comment {
  position: relative;
  padding: 12px 14px;
  border: 1px solid #e0cdb0;
  border-radius: 6px;
  background: #ffffff;
}

.communaute-comments.is-managing .communaute-comment {
  padding-right: 96px;
}

.communaute-comment-text {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.45;
  color: #222;
  white-space: pre-wrap;
}

.communaute-comment-meta {
  margin: 8px 0 0 0;
  font-size: clamp(12px, 1.1vw, 14px);
  color: #5a6a7a;
}

.communaute-comment-delete {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  border: 1px solid #c0392b !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #c0392b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
}

.communaute-comment-delete:hover,
.communaute-comment-delete:focus {
  background: #c0392b !important;
  color: #fff !important;
  transform: none !important;
}

.aide-memoire-content button.communaute-manage-btn,
button.communaute-manage-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  border: 2px solid #8a4b38 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  color: #8a4b38 !important;
  font-size: clamp(14px, 1.3vw, 16px) !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  text-align: center !important;
  text-transform: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transform: none !important;
}

.aide-memoire-content button.communaute-manage-btn:hover,
.aide-memoire-content button.communaute-manage-btn:focus,
button.communaute-manage-btn:hover,
button.communaute-manage-btn:focus {
  background: #eaf3ff !important;
  color: #6f3a2b !important;
  border-color: #6f3a2b !important;
  transform: none !important;
  outline: none;
}



/* =====================================================
   Correctifs affichage (micro-boutons, mono-chiffrage, cellules A–D)
   ===================================================== */
.mini-buttons-row .micro-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  letter-spacing: 0 !important;
  font-size: clamp(8px, 1.05vw, 13px) !important;
  transform: none !important;
}
.mini-buttons-row .micro-btn:hover {
  transform: none !important;
}
.mini-buttons-row .micro-btn .btn-name {
  max-width: none !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  letter-spacing: 0 !important;
  font-size: inherit !important;
  line-height: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Écrans normaux / grands : police maximisée dans la hauteur fixe (26px).
   Petits écrans / low-resolution : règles ci-dessus inchangées. */
@media (min-width: 1440px) {
  /* Rangée 1–5 : entre l’ancien max et la rangée 6–10 */
  body:not(.low-resolution) .mini-buttons-row .micro-btn {
    font-size: 20px !important;
    letter-spacing: -0.2px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  body:not(.low-resolution) .mini-buttons-row .micro-btn .btn-name {
    font-size: inherit !important;
    line-height: 1 !important;
    height: 100% !important;
    letter-spacing: inherit !important;
    font-weight: 800 !important;
    transform: none !important;
  }
  /* Rangée 6–10 : inchangée (écart plus doux avec 1–5) */
  body:not(.low-resolution) .mini-buttons-row-bottom .micro-btn {
    font-size: 18px !important;
  }
}

.main-buttons-row {
  flex-wrap: nowrap !important;
  gap: clamp(4px, 0.7vw, 16px) !important;
}
/* Sous 1440px seulement : compactage. Au-delà, maximisation JS/CSS des libellés. */
@media (max-width: 1439px) {
  .main-buttons-row > button.select-carton-btn,
  .main-buttons-row > #pulse-numbering-btn,
  .main-buttons-row > #undoBtn,
  .main-buttons-row > .undo-btn {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
}

/* Grands écrans : base plus lisible ; le JS affine jusqu’au max sans changer les lignes. */
@media (min-width: 1440px) {
  body:not(.low-resolution) .main-buttons-row > #planDeCoursPlusBtn,
  body:not(.low-resolution) .main-buttons-row > #pulse-numbering-btn,
  body:not(.low-resolution) .main-buttons-row > #aideMemoireBtn,
  body:not(.low-resolution) .main-buttons-row > #liaisonEncadreBtn,
  body:not(.low-resolution) .main-buttons-row > #selectButtonsBtn,
  body:not(.low-resolution) .main-buttons-row > #deleteCartonBtn,
  body:not(.low-resolution) .main-buttons-row > #randomBtn,
  body:not(.low-resolution) .main-buttons-row > #undoBtn {
    font-size: 20px !important;
    line-height: 1.08 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  body:not(.low-resolution) .main-buttons-row > #planDeCoursPlusBtn .btn-text-wrap,
  body:not(.low-resolution) .main-buttons-row > #aideMemoireBtn .btn-text-wrap,
  body:not(.low-resolution) .main-buttons-row > #selectButtonsBtn .btn-text-wrap,
  body:not(.low-resolution) .main-buttons-row > #deleteCartonBtn .btn-text-wrap,
  body:not(.low-resolution) .main-buttons-row > #randomBtn .btn-text-wrap,
  body:not(.low-resolution) .main-buttons-row > #undoBtn .btn-text-wrap {
    margin-top: 0 !important;
    line-height: inherit !important;
    font-size: inherit !important;
  }
  /* Même gabarit 58px que la barre ; largeur type Aide-mémoire */
  body:not(.low-resolution) .speaker-btn.show-style-label,
  body:not(.low-resolution) .speaker-btn.has-style-label {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }
  body:not(.low-resolution) .speaker-btn .speaker-style-label {
    font-size: 18px !important;
  }
  body:not(.low-resolution) .speaker-btn .speaker-style-label.is-swing {
    font-size: 20px !important;
  }
  body:not(.low-resolution) .metronome-bpm-display {
    font-size: 13px !important;
  }
}

.cell.special-cell {
  overflow: hidden !important;
}
.cell.special-cell .position {
  padding: 2px 0 26px !important;
  justify-content: center !important;
  overflow: hidden !important;
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
.cell.special-cell .group-letter {
  font-size: clamp(30px, 3.45vw, 48px) !important;
  max-height: 40% !important;
  margin-top: 0 !important;
  line-height: 0.9 !important;
  flex-shrink: 1 !important;
  min-height: 0 !important;
}
body.presentation-2x16 .cell.special-cell .position {
  padding: 2px 0 24px !important;
}
body.presentation-2x16 .cell.special-cell .group-letter {
  font-size: clamp(30px, 3.3vw, 45px) !important;
  max-height: 36% !important;
}
body.presentation-4x8 .cell.special-cell .position {
  padding: 1px 0 22px !important;
}
body.presentation-4x8 .cell.special-cell .group-letter {
  font-size: clamp(30px, 3.15vw, 42px) !important;
  max-height: 32% !important;
}
.cell.special-cell .group-controls-row {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 4px !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  z-index: 6 !important;
  pointer-events: auto !important;
}


/* Gammes ON 3/4–9/8 : cellules mesures 9–12 inactives (discret : fond blanc carton) */
.cell.mode-gamme-34-98-excluded {
  pointer-events: none;
}

body.presentation-normal .cell.mode-gamme-34-98-excluded .position {
  background-color: white;
  border: 2px solid transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  color: transparent;
}

body.presentation-normal .cell.mode-gamme-34-98-excluded .pulsation,
body.presentation-normal .cell.mode-gamme-34-98-excluded .pulse-number,
body.presentation-normal .cell.mode-gamme-34-98-excluded .cell-subdivision-et {
  display: none !important;
}

body.presentation-normal .cell.mode-gamme-34-98-excluded > .bar-line:not(.fixed-bar-line) {
  opacity: 0;
  pointer-events: none;
}

/* Mesure 9 : sous le message temporaire (reste non éditable) */
.cell.mode-gamme-34-98-excluded.mode-gamme-34-98-m9 {
  /* hérite du fond blanc ; le placeholder reste lisible par-dessus */
}

.mode-gamme-34-98-m9-placeholder {
  position: absolute;
  z-index: 26;
  pointer-events: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.2em;
  padding: 0.35em 0.45em;
  background: rgba(255, 255, 255, 0.94);
  color: #3a3a3a;
  font-family: Georgia, "Times New Roman", Times, serif;
  /* ~2× l’ancien clamp ; JS ajuste encore si débordement */
  font-size: clamp(20px, 2.3vw, 30px);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.01em;
  border-radius: 2px;
  overflow: hidden;
}

.mode-gamme-34-98-m9-line {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

/* Cellule fin m.8 : laisser dépasser la barre ; PAS de z-index cellule
   (sinon la 3e case de m.8 masque une blanche span=2 placée sur la 2e). */
.cell.mode-gamme-34-98-end-cell {
  overflow: visible !important;
}

/* Cellule secondaire d’un span : ne pas afficher le libellé « 3-6 » par-dessus */
.cell.mode-gamme-34-98-end-cell[data-main-cell] > .position {
  visibility: hidden !important;
}

/* Barre épaisse (cliquable reprise ↔ double barre), hauteur = barre de mesure */
.bar-line.fixed-bar-line.mode-gamme-34-98-end-repeat {
  right: clamp(-10px, -0.65vw, -14px) !important;
  width: clamp(6px, 0.4vw, 8px) !important;
  height: 68% !important;
  top: 17% !important;
  background-color: #000 !important;
  opacity: 1 !important;
  z-index: 32 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Ligne mince à gauche de la barre épaisse (= barre de mesure simple) */
.bar-line.fixed-bar-line.mode-gamme-34-98-end-repeat > .mode-gamme-34-98-repeat-thin {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  margin-right: clamp(2px, 0.2vw, 4px);
  width: clamp(4px, 0.3vw, 6px);
  background-color: #000;
  pointer-events: none;
}

/* Points à gauche de la ligne mince */
.bar-line.fixed-bar-line.mode-gamme-34-98-end-repeat.repeat-bar::before {
  content: "•\A•" !important;
  white-space: pre !important;
  position: absolute !important;
  left: auto !important;
  right: calc(100% + clamp(10px, 0.85vw, 14px)) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: clamp(14px, 1.35vw, 26px) !important;
  line-height: 1 !important;
  color: #000 !important;
  font-weight: bold !important;
  text-shadow: 0 0 2px white !important;
  pointer-events: none !important;
  z-index: 33 !important;
}


/* Sélecteur micro-boutons 1–5 : bouton « Placer automatiquement » (texte complet, marges réduites) */
#imageSelector button.image-selector-place-btn {
  max-width: none !important;
  min-width: 0 !important;
  width: auto !important;
  flex-grow: 0 !important;
  padding: 8px 4px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  white-space: normal !important;
  hyphens: none !important;
}

/* Version téléphone : masquer Portées vierges + Effacer galerie (tablette/ordinateur inchangés) */
body.tri-phone-layout #planDeCoursPlusBtn,
body.tri-phone-layout #selectButtonsBtn,
body.tri-phone-layout button.select-carton-btn#planDeCoursPlusBtn,
body.tri-phone-layout button.select-carton-btn#selectButtonsBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Téléphone : liaisons galerie plus fines (images + SVG) — tablette/ordinateur inchangés */
body.tri-phone-layout .liaison {
  width: clamp(12px, 3.2vw, 20px) !important;
  height: clamp(12px, 3.2vw, 20px) !important;
}
body.tri-phone-layout .liaison[data-is-lp-croche="true"] {
  width: clamp(20px, 5vw, 36px) !important;
  height: clamp(8px, 2.2vw, 16px) !important;
}
body.tri-phone-layout .new-liaison-path {
  /* filet CSS ; l'épaisseur réelle vient surtout de stroke-width JS */
  vector-effect: non-scaling-stroke;
}

/* Téléphone : rapprocher chiffres de pulsation / subdivisions / liaisons des notes */
body.tri-phone-layout .pulse-number {
  bottom: clamp(8px, 12%, 20px) !important;
}
body.tri-phone-layout .cell-subdivision-et {
  bottom: clamp(8px, 12%, 20px) !important;
}