/* ==========================================================================
   TUBA PRACTICE HUB - STYLES PUBLICS (FRONT-END)
   ==========================================================================

   --- Modifié le 22/10/2026 (design « Scène ») ------------------------------
   Le hub reprend l'apparence de l'extension Paliers rythmiques (piste
   « Scène ») pour que les deux outils se ressemblent :
     · un cadre bleu très pâle autour du hub, des cartes blanches arrondies ;
     · une palette réduite : bleu pour la navigation, couleur d'accent pour
       l'action principale et l'élément en cours, vert pour la réussite ;
     · des boutons à plat, sans ombre ni soulèvement au survol ;
     · des onglets en boutons arrondis, où la couleur propre à chaque onglet
       ne subsiste que dans une pastille devant le nom.

   Ce qui ne change pas :
     · la police reste celle du site (Roboto Condensed, Roboto pour les
       titres) ;
     · pas de thème sombre ;
     · les noms des variables --tph-* sont conservés : les gabarits et les
       scripts qui s'en servent fonctionnent sans retouche.

   La couleur d'accent vient des réglages de Paliers rythmiques
   (Rythmes > Réglages) : class-tph-public.php la transmet dans
   --tph-scene-accent. Sans Paliers, l'orange par défaut de Paliers s'applique.
   ---------------------------------------------------------------------------
   ========================================================================== */

:root {
    /* --- Palette « Scène » (valeurs de Paliers rythmiques, thème clair) --- */
    --tph-scene-accent:    #e8731a;   /* remplacé par la couleur réglée dans Paliers */
    --tph-scene-on-accent: #1a1208;   /* texte posé sur l'accent */
    --tph-ground:   #eef4fb;          /* fond du cadre du hub */
    --tph-surf:     #ffffff;          /* cartes */
    --tph-line:     #d6e2f0;          /* bordure des cartes */
    --tph-line2:    #cbd9ea;          /* bordure des contrôles */
    --tph-ink:      #172b4d;          /* texte */
    --tph-muted:    #4f6180;          /* texte secondaire */
    --tph-muted2:   #9fb4ce;          /* repères discrets */
    --tph-blue:     #1e6fb8;          /* navigation, sélection */
    --tph-blue-ink: #14528a;          /* texte bleu sur fond clair */
    --tph-chip:     #dceefb;          /* pastilles d'étiquettes */
    --tph-track:    #e3ecf7;          /* fond des jauges */
    --tph-soft:     #f4f7fb;          /* surfaces intérieures */
    --tph-ok:       #1e8a5a;          /* réussite */
    --tph-ok-ink:   #166b45;
    --tph-bad:      #c0392f;          /* suppression, erreur */

    --tph-accent-soft: color-mix(in srgb, var(--tph-scene-accent) 16%, transparent);
    --tph-accent-ink:  color-mix(in srgb, var(--tph-scene-accent) 78%, var(--tph-ink));
    --tph-ok-soft:     color-mix(in srgb, var(--tph-ok) 14%, transparent);
    --tph-bad-soft:    color-mix(in srgb, var(--tph-bad) 12%, transparent);

    /* --- Anciens noms, branchés sur la palette « Scène » --- */
    --tph-primary:      var(--tph-blue);
    --tph-primary-dark: var(--tph-blue-ink);
    --tph-accent:       var(--tph-scene-accent);

    --tph-bg-body:      var(--tph-soft);
    --tph-bg-card:      var(--tph-surf);
    --tph-border:       var(--tph-line);

    --tph-text-main:    var(--tph-ink);
    --tph-text-muted:   var(--tph-muted);

    --tph-success:      var(--tph-ok);
    --tph-danger:       var(--tph-bad);
    --tph-warning-bg:   var(--tph-accent-soft);
    --tph-warning-text: var(--tph-accent-ink);

    /* --- Typographie : celle du site, inchangée --- */
    --tph-font:         inherit;
    --tph-font-heading: var(--wp--preset--font-family--roboto, inherit);

    /* --- Formes : les arrondis de Paliers --- */
    --tph-radius-sm: 12px;   /* champs, petits boutons */
    --tph-radius-md: 18px;   /* cartes de la grille, panneaux d'outils */
    --tph-radius-lg: 22px;   /* grandes cartes */
    --tph-radius-xl: 26px;   /* cadre du hub */

    /* Le design « Scène » est plat : les ombres ne servent plus qu'aux
       éléments qui flottent (notifications, panneaux d'outils sur mobile). */
    --tph-shadow-sm:    none;
    --tph-shadow-md:    0 8px 24px -8px rgba(23, 43, 77, 0.22);
    --tph-shadow-hover: none;

    --tph-transition: border-color 0.15s, background-color 0.15s, color 0.15s;

    /* --- Couleurs des onglets : CONSERVÉES, mais en pastille ---
           Elles restent le repère de navigation des élèves. Elles ne
           remplissent plus l'onglet actif : elles colorent la pastille devant
           son nom, et celle des raccourcis qui mènent à cet onglet. */
    --tph-tab-seance:     #10b981;
    --tph-tab-exercices:  #3b82f6;
    --tph-tab-etudes:     #4f46e5;
    --tph-tab-programmes: #8b5cf6;
    --tph-tab-generateur: #f59e0b;
    --tph-tab-favoris:    #ec4899;
    --tph-tab-suivi:      #06b6d4;
}

/* --------------------------------------------------------------------------
   1. BOUTONS
   --------------------------------------------------------------------------
   Trois niveaux, comme dans Paliers :
     · .tph-btn            bouton secondaire : blanc, bordure fine, texte bleu ;
     · .tph-btn-primary    action principale : fond d'accent (« Lancer ») ;
     · .tph-btn-success    validation : vert ;
   plus .tph-btn-danger / .tph-btn-ghost-danger pour les suppressions.
   Le thème du site stylise parfois tous les <button> : les propriétés
   remises à zéro ici l'en empêchent.
   -------------------------------------------------------------------------- */
.tph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin: 0;
    padding: 8px 18px;
    border: 1px solid var(--tph-line2);
    border-radius: 14px;
    background: var(--tph-surf);
    color: var(--tph-blue-ink);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: var(--tph-transition);
}

.tph-btn:hover {
    background: var(--tph-surf);
    border-color: var(--tph-blue);
    color: var(--tph-blue-ink);
    text-decoration: none;
}

.tph-btn:active { transform: none; }

.tph-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Focus clavier : contour d'accent, comme dans Paliers. */
.tph-btn:focus-visible,
.tph-tab-btn:focus-visible,
.tph-hub-wrapper :focus-visible {
    outline: 3px solid var(--tph-scene-accent);
    outline-offset: 2px;
}

/* Action principale */
.tph-btn.tph-btn-primary,
.tph-btn.tph-btn-primary:hover {
    background: var(--tph-scene-accent);
    border-color: var(--tph-scene-accent);
    color: var(--tph-scene-on-accent);
    font-family: var(--tph-font-heading, inherit);
    font-weight: 800;
}
.tph-btn.tph-btn-primary:hover { filter: brightness(0.96); }

/* Grande action (Générer, Suivant) */
.tph-btn.tph-btn-lg {
    min-height: 56px;
    padding: 8px 20px;
    border-radius: 16px;
    font-size: 1.2rem;
}

/* Validation */
.tph-btn.tph-btn-success,
.tph-btn.tph-btn-success:hover {
    background: var(--tph-ok);
    border-color: var(--tph-ok);
    color: #fff;
}
.tph-btn.tph-btn-success:hover { background: var(--tph-ok-ink); border-color: var(--tph-ok-ink); }

/* Suppression : à plat, texte et bordure rouges */
.tph-btn.tph-btn-danger,
.tph-btn.tph-btn-ghost-danger {
    background: var(--tph-surf);
    border-color: var(--tph-bad);
    color: var(--tph-bad);
}
.tph-btn.tph-btn-danger:hover,
.tph-btn.tph-btn-ghost-danger:hover {
    background: var(--tph-bad-soft);
    border-color: var(--tph-bad);
    color: var(--tph-bad);
}
.tph-btn.tph-btn-ghost-danger { font-size: 0.9rem; }

/* Petits boutons (barre du lecteur, arrêt du micro) */
.tph-btn.tph-btn-sm {
    min-height: 38px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.88rem;
}

/* Boutons-icônes carrés (favori, partage) */
.tph-btn.tph-icon-btn {
    flex: 0 0 auto;
    min-width: 46px;
    padding: 0 10px;
    font-size: 1.15rem;
    line-height: 1;
}

/* « Copié ! » s'affiche dans le bouton de partage : texte plus petit. */
.tph-btn.tph-icon-btn.is-flash { font-size: 0.9rem; }

/* Retour visuel bref après une action réussie (« Ajouté ! », « Copié »).
   Posé et retiré par les scripts. */
.tph-btn.is-flash,
.tph-btn.is-flash:hover {
    background: var(--tph-ok);
    border-color: var(--tph-ok);
    color: #fff;
}

/* Bouton « Réinitialiser » des filtres : texte atténué */
.tph-btn.tph-reset-filters { color: var(--tph-muted); }
.tph-btn.tph-reset-filters:hover { color: var(--tph-ink); border-color: var(--tph-muted2); }


/* --------------------------------------------------------------------------
   2. CATALOGUE (Filtres, Grille et Cartes)
   -------------------------------------------------------------------------- */
.tph-filters-form {
    background: var(--tph-surf);
    padding: 16px 18px;
    border-radius: var(--tph-radius-lg);
    margin-bottom: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--tph-line);
}

/* Champs : ceux des filtres, du générateur et des panneaux d'outils */
.tph-filters-form select,
.tph-filters-form input[type="text"],
.tph-field {
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--tph-line2);
    border-radius: var(--tph-radius-sm);
    background: var(--tph-surf);
    color: var(--tph-ink);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: none;
    transition: var(--tph-transition);
}

/* Base de 170 px : les huit contrôles passent sur deux lignes plutôt que
   d'écraser les libellés (« Tous les instru… »). */
.tph-filters-form select,
.tph-filters-form input[type="text"] {
    flex: 1 1 170px;
    min-width: 150px;
}

.tph-filters-form input::placeholder,
.tph-field::placeholder { color: var(--tph-muted); opacity: 0.8; }

.tph-filters-form select:focus,
.tph-filters-form input[type="text"]:focus,
.tph-field:focus {
    outline: none;
    border-color: var(--tph-scene-accent);
    box-shadow: 0 0 0 3px var(--tph-accent-soft);
}

/* 300 px au minimum : « Ajouter à ma séance » tient sur une ligne à côté des
   boutons favori et partage. */
.tph-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 16px;
}

.tph-card {
    background: var(--tph-surf);
    border-radius: var(--tph-radius-md);
    border: 1px solid var(--tph-line);
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: var(--tph-transition);
}

.tph-grid .tph-card:hover { border-color: var(--tph-line2); }

.tph-card-title {
    font-family: var(--tph-font-heading, inherit);
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 10px 0;
    color: var(--tph-ink);
    line-height: 1.2;
}

/* Étiquettes : pastilles bleu pâle, comme le niveau dans Paliers */
.tph-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.tph-card-tags span {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--tph-chip);
    color: var(--tph-blue-ink);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.5;
}

/* Compositeur : pastille blanche cerclée, pour la distinguer de l'objectif */
.tph-card-tags span.tph-tag-comp {
    background: var(--tph-surf);
    border: 1px solid var(--tph-line2);
    color: var(--tph-ink);
    line-height: 1.4;
}

.tph-card-meta {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 16px;
    flex-grow: 1;
    color: var(--tph-muted);
}

.tph-card-meta p { margin: 0 0 4px; }

.tph-card-meta strong { color: var(--tph-ink); }

/* Rangée de boutons en bas de carte (action + favori + partage) */
.tph-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.tph-card-actions > .tph-add-to-seance,
.tph-card-actions > .tph-load-program { flex: 1 1 auto; min-width: 0; }

.tph-pagination {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.tph-pagination a,
.tph-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 4px 12px;
    border: 1px solid var(--tph-line2);
    border-radius: var(--tph-radius-sm);
    background: var(--tph-surf);
    text-decoration: none;
    color: var(--tph-blue-ink);
    font-weight: 700;
    transition: var(--tph-transition);
}

.tph-pagination a:hover { border-color: var(--tph-blue); color: var(--tph-blue-ink); }

.tph-pagination .current {
    background: var(--tph-blue);
    color: #fff;
    border-color: var(--tph-blue);
}

/* États vides (aucun résultat, aucun favori) */
.tph-empty {
    grid-column: 1 / -1;
    padding: 32px 20px;
    border: 2px dashed var(--tph-line2);
    border-radius: var(--tph-radius-md);
    background: var(--tph-soft);
    color: var(--tph-muted);
    font-weight: 700;
    text-align: center;
}

.tph-empty p { margin: 0; font-size: 1.05rem; }

.tph-empty-hint {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: var(--tph-radius-md);
    background: var(--tph-chip);
    color: var(--tph-blue-ink);
}

.tph-empty-hint p { font-size: 0.95rem; }
.tph-empty-hint p:first-child { font-weight: 800; }
.tph-empty-hint p + p { font-weight: 400; }


/* --------------------------------------------------------------------------
   3. MA SÉANCE (Mise en page globale et Playlist)
   -------------------------------------------------------------------------- */
.tph-seance-app {
    display: grid;
    /* minmax( 0, 1fr ) et non 1fr : le minimum automatique d'une piste « 1fr »
       vaut « auto », c'est-a-dire la taille du contenu. Une seule image trop
       large suffisait donc a faire gonfler la piste au-dela du conteneur et a
       etirer toute la page (mesure : 3067 px de piste dans une colonne de
       664 px). Avec un minimum explicite a 0, la piste reste bornee et c'est
       l'image qui se plie. */
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.tph-seance-sidebar {
    background: var(--tph-surf);
    padding: 16px 18px;
    border-radius: var(--tph-radius-lg);
    border: 1px solid var(--tph-line);
}

.tph-playlist-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tph-playlist-item {
    background: var(--tph-soft);
    padding: 10px 12px !important;
    border: 1px solid var(--tph-line);
    margin-bottom: 8px;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--tph-transition);
}

/* Exercice en cours : entouré de la couleur d'accent, comme la carte
   d'exercice sélectionnée dans Paliers. Le rembourrage compense les 2 px
   de bordure en plus pour que la ligne ne saute pas. */
.tph-playlist-item.active {
    background: var(--tph-surf);
    border: 3px solid var(--tph-scene-accent);
    padding: 8px 10px !important;
}

.tph-playlist-item.active .tph-play-item {
    color: var(--tph-ink);
    font-weight: 800 !important;
}

.tph-playlist-item:hover:not(.active) {
    background: var(--tph-surf);
    border-color: var(--tph-line2);
}

.tph-drag-handle {
    cursor: grab;
    color: var(--tph-muted2);
    margin-right: 8px;
    font-size: 1.1rem;
    user-select: none;
    transition: color 0.15s;
}

.tph-drag-handle:active {
    cursor: grabbing !important;
    color: var(--tph-blue) !important;
}

.tph-remove-item {
    color: var(--tph-muted);
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: bold;
    transition: color 0.15s;
}

.tph-remove-item:hover { color: var(--tph-bad); }

.ui-sortable-helper {
    box-shadow: var(--tph-shadow-md);
    background: var(--tph-surf);
    opacity: 0.95;
    border: 2px solid var(--tph-blue) !important;
}


/* --------------------------------------------------------------------------
   4. LE LECTEUR (Studio)
   -------------------------------------------------------------------------- */
.tph-seance-stage {
    min-width: 0;
    background: var(--tph-surf);
    padding: 20px;
    border-radius: var(--tph-radius-lg);
    border: 1px solid var(--tph-line);

    display: flex;
    flex-direction: column;

    /* HAUTEUR AUTOMATIQUE (1.2.0)
       La scene etait figee a 80 % de la hauteur d'ecran, avec un ascenseur
       interne : sur une etude de plusieurs pages, l'eleve devait faire defiler
       une petite lucarne au milieu de la page. Elle grandit desormais avec son
       contenu, toutes les pages de la partition sont affichees a la suite, et
       c'est la page du site qui defile — un seul ascenseur au lieu de deux. */
    height: auto;
}

#tph-stage-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    /* Sans min-width: 0, un element flex refuse de descendre sous la taille
       de son contenu : la piste de grille etait alors forcee de s'elargir. */
    min-width: 0;
}

.tph-stage-empty {
    text-align: center;
    color: var(--tph-muted);
    padding-top: 10vh;
    /* La zone vide « Pret a jouer ? » a besoin d'une hauteur propre, puisque
       la scene ne fixe plus la sienne. */
    min-height: 40vh;
}

.tph-stage-empty h2 { color: var(--tph-ink); }

.tph-sticky-header {
    /* Maintenant que c'est la page qui defile, l'entete doit coller en haut de
       l'ecran : le titre, les outils et les fleches Precedent/Suivant restent
       accessibles meme au bas de la quatrieme page d'une etude. */
    position: sticky;
    /* Si un jour le site adopte un entete fixe, il suffira de definir
       --tph-sticky-offset (la hauteur de cet entete) pour que le bandeau du
       lecteur vienne se caler juste en dessous au lieu de passer derriere. */
    top: var(--tph-sticky-offset, 0px);

    background: var(--tph-surf);
    z-index: 10;
    padding-top: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--tph-line);
    margin-bottom: 18px;
    flex-shrink: 0;
}

/* Barre du haut : outils (mobile), progression, plein écran */
.tph-stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.tph-stage-header .tph-btn { flex-shrink: 0; }

#tph-progress {
    color: var(--tph-muted);
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
}

#tph-active-title {
    margin: 0 0 4px;
    color: var(--tph-ink);
    font-weight: 800;
    line-height: 1.15;
}

.tph-active-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 15px;
    color: var(--tph-muted);
    margin-bottom: 14px;
    font-size: 0.9rem;
    font-weight: 700;
}

/* Les deux BPM (départ / cible) composés par tph-player.js */
.tph-active-meta #tph-active-bpm span { font-weight: 800; }

.tph-conseil-box {
    background: var(--tph-accent-soft);
    color: var(--tph-ink);
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: 14px;
}

.tph-conseil-box strong { color: var(--tph-accent-ink); }

/* Commandes : outils, puis Précédent / Suivant */
.tph-stage-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 14px;
}

.tph-tools-placeholders,
.tph-stage-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.tph-tools-placeholders .tph-btn {
    flex: 1 1 auto;
    min-width: 90px;
    font-size: 0.95rem;
}

.tph-stage-nav .tph-btn { flex: 1 1 0; }

#tph-active-media { margin-bottom: 20px; text-align: center; }

#tph-active-media iframe { border: 0; border-radius: var(--tph-radius-md); }

.tph-scrollable-content {
    flex-grow: 1;
    /* L'ascenseur interne disparait : c'est la page qui defile.
       Il est retabli uniquement en plein ecran (voir section 6). */
    overflow-y: visible;
    min-width: 0;
}

.tph-scrollable-content::-webkit-scrollbar { width: 6px; }
.tph-scrollable-content::-webkit-scrollbar-track { background: transparent; }
.tph-scrollable-content::-webkit-scrollbar-thumb { background: var(--tph-line2); border-radius: 10px; }
.tph-scrollable-content::-webkit-scrollbar-thumb:hover { background: var(--tph-muted2); }


/* --------------------------------------------------------------------------
   4 bis. PANNEAUX D'OUTILS (métronome, drone, accordeur)
   --------------------------------------------------------------------------
   Les trois panneaux partagent le même habillage : une surface pâle,
   arrondie, sans couleur propre. Leur affichage (display) reste piloté par
   tph-tools.js, d'où le « display:none » laissé dans le gabarit.
   -------------------------------------------------------------------------- */
.tph-tool-panel {
    margin-bottom: 14px;
    padding: 14px;
    background: var(--tph-soft);
    border: 1px solid var(--tph-line);
    border-radius: var(--tph-radius-md);
    text-align: center;
}

.tph-tool-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Lecture / pause : rond, couleur d'accent ; pendant la lecture, blanc
   cerclé d'accent (comme « Lancer » / « Arrêter » dans Paliers). */
.tph-btn.tph-play-btn {
    width: 56px;
    height: 56px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--tph-scene-accent);
    border: 3px solid var(--tph-scene-accent);
    color: var(--tph-scene-on-accent);
    font-size: 1.3rem;
}

.tph-btn.tph-play-btn:hover {
    background: var(--tph-scene-accent);
    border-color: var(--tph-scene-accent);
    color: var(--tph-scene-on-accent);
    filter: brightness(0.96);
}

.tph-btn.tph-play-btn.is-playing,
.tph-btn.tph-play-btn.is-playing:hover {
    background: var(--tph-surf);
    color: var(--tph-ink);
    filter: none;
}

/* Groupe « − 120 + » et sélecteur de note */
.tph-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--tph-surf);
    border: 1px solid var(--tph-line2);
    border-radius: 14px;
}

.tph-stepper .tph-btn {
    width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    font-size: 1.3rem;
}

.tph-stepper .tph-btn:hover { background: var(--tph-soft); }

.tph-stepper input[type="number"],
.tph-stepper select {
    width: 76px;
    margin: 0;
    padding: 4px;
    border: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: var(--tph-ink);
    font-family: var(--tph-font-heading, inherit);
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    -moz-appearance: textfield;
}

.tph-stepper select { width: auto; padding: 4px 8px; cursor: pointer; }

.tph-stepper input[type="number"]::-webkit-outer-spin-button,
.tph-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tph-tool-unit {
    color: var(--tph-muted);
    font-weight: 800;
}

.tph-volume {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tph-volume input[type="range"] {
    width: 110px;
    cursor: pointer;
    accent-color: var(--tph-blue);
}

/* Accordeur */
.tph-tuner-init {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tph-tuner-init p {
    margin: 0;
    color: var(--tph-muted);
    font-size: 0.95rem;
    font-weight: 700;
}

/* #tph-tuner-display reçoit « display:flex » de tph-tools.js */
#tph-tuner-display {
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-direction: column;
}

.tph-tuner-readout {
    display: flex;
    align-items: baseline;
    justify-content: center;
    min-width: 150px;
}

#tph-tuner-note {
    font-family: var(--tph-font-heading, inherit);
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tph-ink);
}

#tph-tuner-cents-text {
    margin-left: 10px;
    min-width: 50px;
    text-align: left;
    color: var(--tph-blue-ink);
    font-size: 1.2rem;
    font-weight: 800;
}

.tph-tuner-gauge {
    position: relative;
    width: 100%;
    max-width: 300px;
    height: 16px;
    margin-top: 4px;
    border-radius: 999px;
    background: var(--tph-track);
    overflow: hidden;
}

.tph-tuner-center {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--tph-ink);
    z-index: 2;
    transform: translateX(-50%);
}

#tph-tuner-needle {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 10px;
    border-radius: 999px;
    background: var(--tph-scene-accent);
    transform: translateX(-50%);
    transition: left 0.1s ease-out;
}

.tph-tuner-scale {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 300px;
    color: var(--tph-muted);
    font-size: 0.85rem;
    font-weight: 800;
}

.tph-tuner-scale .tph-tuner-ok { color: var(--tph-ok-ink); }


/* --------------------------------------------------------------------------
   4 ter. BILAN DE FIN DE SÉANCE
   -------------------------------------------------------------------------- */
.tph-summary { padding: 20px; text-align: center; }

.tph-summary h2 {
    font-size: 2rem;
    margin: 0 0 8px;
    color: var(--tph-ink);
}

.tph-summary-lead {
    color: var(--tph-muted);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 24px;
}

.tph-summary .tph-stat-grid { margin-bottom: 18px; }

.tph-summary .tph-stat strong {
    display: block;
    font-family: var(--tph-font-heading, inherit);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--tph-ink);
}

/* Volume d'air : la réussite du jour, en vert */
.tph-air-box {
    margin-bottom: 18px;
    padding: 18px 20px;
    border-radius: var(--tph-radius-md);
    background: var(--tph-ok-soft);
    color: var(--tph-ok-ink);
}

.tph-air-box h3 {
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--tph-ok-ink);
}

.tph-air-box p { margin: 0; font-size: 0.95rem; font-weight: 700; }

.tph-export-box {
    text-align: left;
    padding: 16px;
    border-radius: var(--tph-radius-md);
    background: var(--tph-soft);
    border: 1px solid var(--tph-line);
}

.tph-export-box label {
    display: block;
    margin-bottom: 10px;
    color: var(--tph-ink);
    font-weight: 800;
}

#tph-export-text {
    width: 100%;
    height: 100px;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--tph-line2);
    border-radius: var(--tph-radius-sm);
    background: var(--tph-surf);
    color: var(--tph-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    resize: none;
}

.tph-export-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tph-export-actions .tph-btn { flex: 1 1 120px; }

#tph-export-help {
    margin: 12px 0 0;
    color: var(--tph-muted);
    font-size: 0.85rem;
    text-align: center;
}


/* ==========================================================================
   5. CENTRAGE ET TAILLE DU CONTENU (Partitions)
   ========================================================================== */
.tph-exercice-body {
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--tph-ink);
}

/* On nettoie les boîtes invisibles générées par l'éditeur WordPress */
.tph-exercice-body figure,
.tph-exercice-body .wp-block-image {
    margin: 0 0 25px 0 !important;
    width: 100%;
    display: block;
}

/* On force toutes les images à s'étirer à 100% de la zone de lecture */
.tph-exercice-body img {
    display: block;
    margin: 0 auto !important;
    width: 100% !important;
    /* Ceinture et bretelles : si la partition ne se charge pas, ou si le
       navigateur retient une variante beaucoup plus grande que prevu, elle ne
       doit en aucun cas pouvoir elargir la page. */
    max-width: 100% !important;
    height: auto !important; /* Garde les proportions intactes sans déformer la partition */
    border-radius: var(--tph-radius-sm);

    /* Blocage des comportements tactiles natifs (Anti-zoom, Anti-menu) */
    -webkit-touch-callout: none; /* Bloque le menu "Enregistrer l'image" sur iOS */
    -webkit-user-select: none;   /* Empêche la sélection au toucher */
    user-select: none;
    -webkit-user-drag: none;     /* Empêche de faire "glisser" l'image */
    pointer-events: none;        /* Le doigt glisse directement sur le lecteur */
}

/* Désactive les liens (<a>) générés par WordPress autour des images */
.tph-exercice-body .wp-block-image a,
.tph-exercice-body figure a,
.tph-exercice-body a:has(img) {
    pointer-events: none !important;
    cursor: default !important;
    display: block;
}


/* ==========================================================================
   6. MODE PLEIN ÉCRAN OPTIMISÉ
   ========================================================================== */
:fullscreen .tph-seance-stage { height: 100dvh; padding: 25px 40px; border-radius: 0; border: none; }
:-webkit-full-screen .tph-seance-stage { height: 100dvh; padding: 25px 40px; border-radius: 0; border: none; }

/* En plein ecran, la scene occupe tout l'ecran : c'est le seul cas ou
   l'ascenseur interne a encore un sens (la page, elle, ne defile plus). */
:fullscreen .tph-scrollable-content,
:-webkit-full-screen .tph-scrollable-content { overflow-y: auto; padding-right: 15px; }

:fullscreen .tph-sticky-header { padding-top: 10px; margin-bottom: 15px; }
:fullscreen #tph-active-title { font-size: 1.5rem; margin-bottom: 5px; }
:fullscreen .tph-active-meta { font-size: 0.9rem; margin-bottom: 10px; }
:fullscreen .tph-stage-controls { padding-bottom: 10px; }

:-webkit-full-screen .tph-sticky-header { padding-top: 10px; margin-bottom: 15px; }
:-webkit-full-screen #tph-active-title { font-size: 1.5rem; margin-bottom: 5px; }
:-webkit-full-screen .tph-active-meta { font-size: 0.9rem; margin-bottom: 10px; }


/* ==========================================================================
   7. LE HUB CENTRAL (cadre et onglets)
   ========================================================================== */
.tph-hub-wrapper {
    /* Suit la largeur « large » définie par le thème plutôt qu'une valeur
       arbitraire : le hub s'aligne ainsi sur les autres blocs de la page. */
    max-width: var(--wp--style--global--wide-size, 1400px);
    margin: 1.5em auto;
    box-sizing: border-box;
    /* Le cadre « Scène » : fond bleu très pâle, grand arrondi. */
    padding: 22px;
    border-radius: var(--tph-radius-xl);
    background: var(--tph-ground);
    color: var(--tph-ink);
    /* La police n'est pas imposée : elle est héritée du site. */
    font-family: var(--tph-font, inherit);
}

.tph-hub-wrapper *,
.tph-hub-wrapper *::before,
.tph-hub-wrapper *::after { box-sizing: border-box; }

/* Les titres internes du hub suivent la police de titre du site. */
.tph-hub-wrapper h2,
.tph-hub-wrapper h3,
.tph-card-title,
#tph-active-title {
    font-family: var(--tph-font-heading, inherit);
}

.tph-hub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

/* Onglet : bouton arrondi blanc, précédé de la pastille de sa couleur.
   Actif : fond bleu, la pastille garde sa couleur, cerclée de blanc. */
.tph-tab-btn {
    --tph-tab-dot: var(--tph-muted2);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid var(--tph-line2);
    border-radius: 14px;
    background: var(--tph-surf);
    color: var(--tph-ink);
    font-family: var(--tph-font-heading, inherit);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    transition: var(--tph-transition);
}

.tph-tab-btn::before {
    content: "";
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--tph-tab-dot);
}

.tph-tab-btn:hover {
    background: var(--tph-surf);
    border-color: var(--tph-blue);
    color: var(--tph-ink);
}

.tph-tab-btn.active,
.tph-tab-btn.active:hover {
    background: var(--tph-blue);
    border-color: var(--tph-blue);
    color: #fff;
    font-weight: 800;
}

.tph-tab-btn.active::before { box-shadow: 0 0 0 2px #fff; }

/* Une couleur par onglet, pour la pastille (et les raccourcis, section 10). */
[data-target="tph-tab-seance"]     { --tph-tab-dot: var(--tph-tab-seance); }
[data-target="tph-tab-exercices"]  { --tph-tab-dot: var(--tph-tab-exercices); }
[data-target="tph-tab-etudes"]     { --tph-tab-dot: var(--tph-tab-etudes); }
[data-target="tph-tab-programmes"] { --tph-tab-dot: var(--tph-tab-programmes); }
[data-target="tph-tab-generateur"] { --tph-tab-dot: var(--tph-tab-generateur); }
[data-target="tph-tab-favoris"]    { --tph-tab-dot: var(--tph-tab-favoris); }
[data-target="tph-tab-suivi"]      { --tph-tab-dot: var(--tph-tab-suivi); }

/* --- Bouton « Réglages » et son panneau (24/10/2026) ----------------------
   Repris de Paliers rythmiques : bouton carré à curseurs à droite des
   onglets, panneau posé dessous, aligné à droite. */
.tph-hub-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    margin-bottom: 18px;
}

.tph-hub-top .tph-hub-tabs { margin-bottom: 0; }

.tph-hub-tools { position: relative; }

.tph-gear {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tph-line2);
    border-radius: 14px;
    background: var(--tph-surf);
    color: var(--tph-ink);
    box-shadow: none;
    cursor: pointer;
    transition: var(--tph-transition);
}

.tph-gear:hover,
.tph-gear[aria-expanded="true"] {
    background: var(--tph-surf);
    border-color: var(--tph-scene-accent);
    color: var(--tph-ink);
}

.tph-gear svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Temps modifié : repère « ×2 » sur le bouton, visible avant tout choix. */
.tph-gear.is-modifie { border-color: var(--tph-scene-accent); }

.tph-gear-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 22px;
    padding: 2px 5px;
    border-radius: 999px;
    background: var(--tph-scene-accent);
    color: var(--tph-scene-on-accent);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.tph-gear-badge[hidden] { display: none; }

.tph-settings-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: min(340px, calc(100vw - 32px));
    padding: 14px 18px 18px;
    border: 1px solid var(--tph-line);
    border-radius: 20px;
    background: var(--tph-surf);
    color: var(--tph-ink);
    box-shadow: var(--tph-shadow-md);
    text-align: left;
}

.tph-settings-panel[hidden] { display: none; }

.tph-settings-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
}

.tph-settings-title {
    font-family: var(--tph-font-heading, inherit);
    font-size: 1.2rem;
    font-weight: 800;
}

.tph-settings-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--tph-muted);
    font-size: 24px;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
}

.tph-settings-close:hover { background: var(--tph-soft); color: var(--tph-ink); }

.tph-settings-field { display: flex; flex-direction: column; gap: 4px; }

.tph-settings-field > label {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--tph-muted);
}

.tph-settings-field select { width: 100%; }


/* --------------------------------------------------------------------------
   8. OPTIMISATION MOBILE
   -------------------------------------------------------------------------- */
/* ==========================================================================
   BASCULE SUR LA LARGEUR RÉELLE DISPONIBLE, PAS SUR CELLE DE LA FENÊTRE
   --------------------------------------------------------------------------
   Le hub est inséré dans la colonne de contenu du site, qui peut être bien
   plus étroite que la fenêtre. Une requête @media classique ne voit que la
   fenêtre ; une requête de conteneur mesure la place réellement disponible,
   quelle que soit la taille de l'écran.
   ========================================================================== */
/* Le conteneur est posé sur le WRAPPER et non sur .tph-hub-content : la barre
   d'onglets est un frère de .tph-hub-content, pas un descendant, et n'aurait
   donc jamais été concernée par la requête. */
.tph-hub-wrapper { container-type: inline-size; container-name: tph-hub; }

@container tph-hub (max-width: 860px) {
    .tph-seance-app   { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .tph-seance-stage { height: auto; }

    /* Les onglets défilent horizontalement au lieu de s'empiler sur trois
       lignes, ce qui repoussait tout le contenu vers le bas. */
    .tph-hub-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 3px 3px 6px;
        margin-bottom: 12px;
    }
    .tph-hub-tabs::-webkit-scrollbar { display: none; }
    .tph-tab-btn { flex: 0 0 auto; white-space: nowrap; font-size: 0.95rem; padding: 8px 14px; }

    /* Les quatre tuiles de statistiques tombaient en 3 + 1, la dernière seule
       sur sa ligne. Deux par deux, c'est équilibré et les libellés respirent. */
    .tph-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Repli pour les navigateurs sans requêtes de conteneur : la bascule sur la
   fenêtre vaut mieux que rien. */
@supports not (container-type: inline-size) {
    @media (max-width: 980px) {
        .tph-seance-app   { grid-template-columns: minmax(0, 1fr); gap: 14px; }
        .tph-seance-stage { height: auto; }
    }
}

@media (max-width: 768px) {
    /* Le cadre se resserre pour laisser la place à la partition. */
    .tph-hub-wrapper { padding: 12px; border-radius: 20px; }

    /* Masquage titre/meta pour navigation */
    #tph-active-title,
    .tph-active-meta,
    .tph-stage-header span#tph-progress {
        display: none !important;
    }

    .tph-seance-app { grid-template-columns: minmax(0, 1fr); gap: 14px; }

    .tph-sticky-header {
        margin-bottom: 10px !important;
        padding-bottom: 5px !important;
        border-bottom: none !important;
    }

    .tph-hub-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 3px 3px 6px;
        margin-bottom: 12px;
        scrollbar-width: none;
    }
    .tph-hub-tabs::-webkit-scrollbar { display: none; }

    .tph-tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 0.95rem;
        padding: 8px 14px;
    }

    .tph-seance-stage { height: auto; padding: 10px !important; }
    .tph-seance-sidebar { padding: 14px; }
    .tph-exercice-body img { width: 100% !important; }

    /* Outils flottants */
    #tph-metronome-panel, #tph-drone-panel, #tph-tuner-panel {
        position: absolute;
        left: 10px;
        right: 10px;
        z-index: 100;
        background: var(--tph-surf);
        border: 2px solid var(--tph-scene-accent);
        box-shadow: var(--tph-shadow-md);
        padding: 15px !important;
    }

    /* Les commandes restent affichées, en ligne ; le bouton « Outils » les
       replie (tph-tools.js). Jusqu'ici, un style en ligne « display:flex »
       l'emportait sur la règle « display:none » de cette section : on garde
       ce comportement réel, commandes visibles au chargement. */
    .tph-stage-controls {
        gap: 8px;
        padding: 10px;
        background: var(--tph-soft);
        border-radius: var(--tph-radius-md);
    }

    .tph-mobile-tools-toggle { display: inline-flex !important; }
}

.tph-mobile-tools-toggle { display: none; }

/* ==========================================================================
   PLEIN ÉCRAN FORCÉ (Contournement Apple / iPad / iOS)
   ========================================================================== */
.tph-ios-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    z-index: 999999 !important; /* Pour passer au-dessus des menus du thème WordPress */
    background: var(--tph-surf) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   9. GAMIFICATION (niveau, quêtes du jour, badges, notifications)
   ========================================================================== */

/* --- Bandeau de série, affiché en haut de « Ma Séance » --- */
#tph-gamif-streak { margin-bottom: 14px; }

.tph-streak-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--tph-soft);
    border: 1px solid var(--tph-line);
    border-radius: 14px;
}

.tph-streak-flame { font-size: 1.6rem; line-height: 1; filter: grayscale(1); }
.tph-streak-flame.is-lit { filter: none; }

.tph-streak-text { display: flex; flex-direction: column; line-height: 1.3; }
.tph-streak-text strong { color: var(--tph-ink); font-size: 1rem; font-weight: 800; }
.tph-streak-text em { color: var(--tph-muted); font-size: 0.82rem; font-style: normal; font-weight: 700; }

/* --- Panneau complet, en haut de « Mon Suivi » --- */
#tph-gamif-panel {
    background: var(--tph-surf);
    border: 1px solid var(--tph-line);
    border-radius: var(--tph-radius-lg);
    padding: 18px 20px;
    margin-bottom: 18px;
}

/* Le panneau reste vide si la gamification est désactivée : pas de cadre vide. */
#tph-gamif-panel:empty { display: none; }

.tph-gamif-head {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--tph-line);
}

.tph-gamif-level { display: flex; align-items: center; gap: 12px; }

/* Numéro de niveau : la pastille bleue du niveau dans Paliers (« ×2 ») */
.tph-gamif-level-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 8px;
    border-radius: 12px;
    background: var(--tph-blue);
    color: #fff;
    font-family: var(--tph-font-heading, inherit);
    font-size: 1.5rem;
    font-weight: 800;
    flex-shrink: 0;
}

.tph-gamif-level-title {
    font-family: var(--tph-font-heading, inherit);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--tph-ink);
}

.tph-gamif-bar-wrap { flex: 1 1 200px; min-width: 160px; }

.tph-gamif-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--tph-track);
    overflow: hidden;
}

.tph-gamif-bar-fill {
    height: 100%;
    background: var(--tph-blue);
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.tph-gamif-bar-label {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--tph-muted);
    text-align: right;
}

.tph-gamif-subtitle {
    font-family: var(--tph-font-heading, inherit);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--tph-ink);
    margin: 20px 0 10px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.tph-gamif-count { font-size: 0.82rem; font-weight: 700; color: var(--tph-muted); }

/* --- Quêtes du jour --- */
.tph-quest-list { list-style: none; padding: 0; margin: 0; }

.tph-quest {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--tph-soft);
    border: 1px solid var(--tph-line);
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--tph-ink);
}

.tph-quest.is-done {
    border-color: var(--tph-ok);
    background: var(--tph-ok-soft);
}

.tph-quest.is-done .tph-quest-label { text-decoration: line-through; opacity: 0.7; }

.tph-quest-label { flex: 1; }
.tph-quest-icon  { font-size: 1.05rem; }
.tph-quest-xp    { font-size: 0.78rem; font-weight: 800; color: var(--tph-muted); white-space: nowrap; }
.tph-quest.is-done .tph-quest-xp { color: var(--tph-ok-ink); }

/* --- Collection de badges --- */
.tph-badge-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}

.tph-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 12px 6px;
    border: 1px solid var(--tph-line);
    border-radius: 14px;
    background: var(--tph-soft);
    cursor: help;
}

.tph-badge-icon  { font-size: 1.7rem; line-height: 1; }
.tph-badge-label { font-size: 0.74rem; font-weight: 700; line-height: 1.25; color: var(--tph-ink); }
.tph-badge-progress { font-size: 0.68rem; font-weight: 700; color: var(--tph-muted); }

.tph-badge.is-locked { opacity: 0.45; }
.tph-badge.is-locked .tph-badge-icon { filter: grayscale(1); }

/* Badge débloqué : entouré d'accent, comme l'élément en cours */
.tph-badge.is-unlocked {
    border: 2px solid var(--tph-scene-accent);
    padding: 11px 5px;
    background: var(--tph-accent-soft);
}

/* --- Notifications éphémères --- */
.tph-toast-stack {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
    width: max-content;
    max-width: min(92vw, 420px);
}

.tph-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 16px;
    background: var(--tph-ink);
    color: #fff;
    box-shadow: var(--tph-shadow-md);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.tph-toast.is-visible { opacity: 1; transform: translateY(0); }

.tph-toast-icon { font-size: 1.4rem; line-height: 1; }
.tph-toast-text { display: flex; flex-direction: column; line-height: 1.3; }
.tph-toast-text strong { font-size: 0.98rem; font-weight: 800; }
.tph-toast-text em { font-size: 0.8rem; font-style: normal; opacity: 0.85; }

/* Respect du réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    .tph-toast,
    .tph-gamif-bar-fill,
    .tph-btn,
    .tph-tab-btn,
    .tph-card { transition: none !important; }
}

@media (max-width: 768px) {
    #tph-gamif-panel { padding: 16px; }
    .tph-gamif-head { gap: 12px; }
    .tph-badge-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}


/* ==========================================================================
   10. BLOCS D'ONGLET (intro, suivi, historique, playlist, générateur)
   ========================================================================== */

.tph-pane-intro { text-align: center; margin-bottom: 22px; padding-top: 6px; }
.tph-pane-intro h2 { margin-top: 0; color: var(--tph-ink); }
.tph-pane-intro p  { color: var(--tph-muted); margin-bottom: 0; font-weight: 700; }

.tph-suivi-card { border-radius: var(--tph-radius-lg); }

.tph-pane-title    { margin-top: 0; text-align: center; color: var(--tph-ink); }
.tph-pane-subtitle { text-align: center; color: var(--tph-muted); font-weight: 700; margin-bottom: 22px; }

.tph-section-title {
    font-family: var(--tph-font-heading, inherit);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tph-ink);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tph-line);
}

/* --- Tuiles de statistiques --- */
.tph-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.tph-stat {
    background: var(--tph-soft);
    border: 1px solid var(--tph-line);
    border-radius: var(--tph-radius-md);
    padding: 16px;
    text-align: center;
}

.tph-stat-icon  { font-size: 2rem; margin-bottom: 5px; line-height: 1; }
.tph-stat-value {
    font-family: var(--tph-font-heading, inherit);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--tph-ink);
}
.tph-stat-label { font-size: 0.85rem; font-weight: 700; color: var(--tph-muted); }

/* --- Historique --- */
.tph-history-list { list-style: none; padding: 0; margin: 0; }

.tph-history-item {
    background: var(--tph-soft);
    border: 1px solid var(--tph-line);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.tph-history-date { color: var(--tph-ink); display: block; margin-bottom: 3px; font-weight: 800; }
.tph-history-meta { font-size: 0.85rem; font-weight: 700; color: var(--tph-muted); }

.tph-history-duree {
    background: var(--tph-chip);
    color: var(--tph-blue-ink);
    padding: 3px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.85rem;
    white-space: nowrap;
}

.tph-history-empty { color: var(--tph-muted); font-weight: 700; text-align: center; padding: 20px; }

/* --- Actions secondaires --- */
.tph-pane-actions { text-align: center; margin-top: 24px; }

/* --- Barre latérale de séance --- */
.tph-sidebar-title {
    margin: 0 0 12px;
    font-family: var(--tph-font-heading, inherit);
    font-weight: 800;
    color: var(--tph-ink);
}

/* Ces deux blocs sont masqués au départ : tph-playlist.js les affiche
   (« flex » en ligne pour les actions). */
.tph-playlist-empty   { display: none; text-align: center; padding: 6px 0; }
.tph-playlist-actions { display: none; flex-direction: column; gap: 8px; margin-top: 16px; }

.tph-playlist-actions .tph-btn { width: 100%; }

.tph-playlist-empty-actions { display: flex; flex-direction: column; gap: 8px; }
.tph-playlist-empty-text    { color: var(--tph-muted); font-weight: 700; margin: 0 0 16px; font-size: 0.95rem; }

/* Raccourcis vers les onglets : boutons secondaires, précédés de la pastille
   de l'onglet vers lequel ils mènent (même repère que la barre d'onglets). */
.tph-nav-shortcut { width: 100%; justify-content: flex-start; }

.tph-btn.tph-nav-shortcut::before {
    content: "";
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--tph-tab-dot, var(--tph-muted2));
}

/* --- Générateur --- */
.tph-generator-card {
    max-width: 520px;
    margin: 4px auto;
    border-radius: var(--tph-radius-lg);
    padding: 22px;
}

.tph-generator-card .tph-card-title { text-align: center; font-size: 1.35rem; }

.tph-generator-lead {
    text-align: center;
    color: var(--tph-muted);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 22px;
}

.tph-generator-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tph-generator-form label {
    display: block;
    margin-bottom: 6px;
    color: var(--tph-ink);
    font-weight: 800;
}

.tph-generator-form .tph-field { width: 100%; font-size: 1rem; }

.tph-generator-form .tph-btn-primary { width: 100%; margin-top: 6px; }

.tph-generator-result {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 2px dashed var(--tph-line2);
}

.tph-generator-result .tph-card-title { text-align: center; font-size: 1.2rem; }

#res_duree { color: var(--tph-accent-ink); }

#res_liste {
    list-style: decimal;
    margin: 0 0 20px;
    padding-left: 25px;
    color: var(--tph-ink);
    line-height: 1.6;
}

#res_liste em { color: var(--tph-muted); font-style: normal; font-weight: 700; }

.tph-generator-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tph-generator-actions #btn_save_generated { flex: 1 1 180px; }
.tph-generator-actions #btn_regenerate     { flex: 0 1 140px; }

/* --- Carte d'un programme seul (shortcode [tph_programme]) --- */
.tph-single-programme-wrapper {
    max-width: 360px;
    margin: 20px auto;
    text-align: center;
    border-radius: var(--tph-radius-lg);
}

.tph-single-programme-wrapper .tph-card-title { margin-bottom: 8px; }

.tph-single-programme-wrapper .tph-programme-excerpt {
    margin: 0 0 14px;
    color: var(--tph-muted);
    font-size: 0.95rem;
}

.tph-single-programme-wrapper .tph-card-meta { margin-bottom: 18px; }


/* ==========================================================================
   11. PLAFOND DES COMMANDES DU LECTEUR
   --------------------------------------------------------------------------
   Quand la séance passe en une seule colonne, le lecteur dispose de toute la
   largeur. On plafonne la zone de commandes et les panneaux d'outils pour
   éviter des boutons démesurés ; la partition, elle, garde toute la largeur.
   ========================================================================== */
.tph-stage-controls,
#tph-metronome-panel,
#tph-drone-panel,
#tph-tuner-panel {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Le titre et les méta-informations suivent le même axe pour rester alignés
   avec les commandes plutôt que de flotter tout à gauche d'une large zone. */
.tph-sticky-header > #tph-active-title,
.tph-sticky-header > .tph-active-meta,
.tph-sticky-header > .tph-stage-header {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   12. COULEURS PAR ONGLET
   --------------------------------------------------------------------------
   Avant le design « Scène », la couleur de chaque onglet teintait aussi les
   boutons, les liserés des cartes et la pagination de son panneau. Elle ne
   subsiste plus que dans les pastilles (onglets et raccourcis, sections 7
   et 10) : à l'intérieur des panneaux, tout suit la palette commune.
   ========================================================================== */


/* ==========================================================================
   13. APERÇU DE LA PARTITION DANS LES FICHES DU CATALOGUE
   --------------------------------------------------------------------------
   La vignette déborde volontairement le rembourrage de la carte pour venir
   se coller sous son bord supérieur.

   L'image est mise à l'échelle sur la LARGEUR, jamais sur la hauteur, puis le
   cadre rogne ce qui dépasse par le bas. On voit donc toujours la partition
   sur toute sa largeur, et le début du morceau — la portée qui permet de le
   reconnaître. La hauteur du cadre, elle, ne bouge jamais : les tuiles
   restent alignées.
   ========================================================================== */
.tph-card-preview {
    /* Compense le padding de 20 px de la carte pour occuper toute sa largeur. */
    margin: -20px -20px 14px;
    height: 150px;
    overflow: hidden;
    background: var(--tph-surf);
    border-bottom: 1px solid var(--tph-line);
    border-radius: calc(var(--tph-radius-md) - 1px) calc(var(--tph-radius-md) - 1px) 0 0;

    /* Ancre l'image en haut du cadre. Une image trop haute déborde et se fait
       rogner par le bas ; une image inhabituellement plate laisse apparaître
       le fond sous elle, plutôt que d'être étirée. */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.tph-card-preview .tph-card-preview-img,
.tph-card-preview img {
    display: block;
    width: 100%;
    /* hauteur libre : c'est la largeur qui commande. */
    height: auto;
    max-width: 100%;
    /* Sans cela, le conteneur flex comprimerait l'image pour la faire entrer. */
    flex-shrink: 0;

    /* Dans un conteneur flex, une marge automatique sur l'axe transversal
       absorbe l'espace libre et prime sur align-items — mais seulement s'il
       y a de l'espace libre :
         · image plus haute que le cadre  -> marges à 0, l'image reste ancrée
           en haut et se fait rogner par le bas ;
         · image plus plate que le cadre  -> elle est centrée verticalement. */
    margin-top: auto;
    margin-bottom: auto;
}

/* Une image absente ne doit pas laisser un cadre vide disgracieux. */
.tph-card-preview img[alt=""]:not([src]),
.tph-card-preview img[src=""] { display: none; }

@media (max-width: 768px) {
    .tph-card-preview { height: 120px; }
}