/*--------------------------------------------------------------
>>> WAKATOO
--------------------------------------------------------------*/

/* Import de la police Nunito de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800;900&display=swap');

:root {
    --yellow: #F0C430;
    --green: #019879;
    --red: #DA4435;
    --orange: #E68F2E;
    --violet: #802a77;
    --black: #272727;
}

.cards {
    --card-size: 72px;
    --cards-gutter: 4px;
    --cards-columns: 4;
    --cards-row-size: var(--card-size);
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* Colors */

.cards .card {
    border: solid var(--card-border-width) var(--orange);
    border-radius: var(--card-radius);
}

.cards .card.wakatoo-card-plus,
.cards .card.wakatoo-card-minus {
    border-color: var(--red);
}

/* Cartes avec bordure rouge */
.cards .card.touf,
.cards .card.touf.j,
.cards .card.kouf,
.cards .card.kouf.j,
.cards .card.ks,
.cards .card.ks.j,
.cards .card.pch,
.cards .card.pch.j,
.cards .card.ts,
.cards .card.ts.j,
.cards .card.kl,
.cards .card.kl.j,
.cards .card.douf,
.cards .card.douf.j {
    border: solid var(--card-border-width) var(--red);
}

/* Cartes contenant breath_ : bordure verte par défaut */
.cards .card[class*="breath-"],
.cards .card.breath-contains-breath {
    border: solid var(--card-border-width) var(--green);
    position: relative;
}

/* Cartes doubles avec bordures bicolores */
.cards .card.wakatoo-card-double-bicolor {
    border: none;
    position: relative;
}

/* Carte double : les deux parties ont breath_, border entièrement verte */
.cards .card.wakatoo-card-double-both-breath {
    border: solid var(--card-border-width) var(--green);
}

/* Carte double : seulement la partie gauche a breath_, gauche verte, droite orange */
.cards .card.wakatoo-card-double-left-breath::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    border-top: solid var(--card-border-width) var(--green);
    border-bottom: solid var(--card-border-width) var(--green);
    border-left: solid var(--card-border-width) var(--green);
    border-top-left-radius: var(--card-radius);
    border-bottom-left-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

.cards .card.wakatoo-card-double-left-breath::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    border-top: solid var(--card-border-width) var(--orange);
    border-bottom: solid var(--card-border-width) var(--orange);
    border-right: solid var(--card-border-width) var(--orange);
    border-top-right-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

/* Carte double : seulement la partie droite a breath_, gauche orange, droite verte */
.cards .card.wakatoo-card-double-right-breath::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    border-top: solid var(--card-border-width) var(--orange);
    border-bottom: solid var(--card-border-width) var(--orange);
    border-left: solid var(--card-border-width) var(--orange);
    border-top-left-radius: var(--card-radius);
    border-bottom-left-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

.cards .card.wakatoo-card-double-right-breath::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    border-top: solid var(--card-border-width) var(--green);
    border-bottom: solid var(--card-border-width) var(--green);
    border-right: solid var(--card-border-width) var(--green);
    border-top-right-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

/* Carte double : aucun breath_, border entièrement orange (par défaut) */
.cards .card.wakatoo-card-double-no-breath {
    border: solid var(--card-border-width) var(--orange);
}

/* Cartes doubles : afficher le contenu sur une seule ligne */
.cards .card.wakatoo-card-double-bicolor .card-content {
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.2em;
    font-size: var(--card-font-size);
}

/* Plus de paliers par nombre de majuscules (data-length) : le libellé d'une carte double
   s'ajuste comme tous les autres, par .wakatoo-card-text (21/09/2026). */

/* S'assurer que les bordures bicolores prennent le dessus sur les bordures breath-* */
.cards .card.wakatoo-card-double-bicolor[class*="breath-"] {
    border: none !important;
}

/* Cartes breath_touf et breath_kouf : bordure bicolore (rouge en haut, vert en bas) */
.cards .card.breath-touf,
.cards .card.breath-touf.j,
.cards .card.breath-kouf,
.cards .card.breath-kouf.j {
    border: none;
    position: relative;
}

.cards .card.breath-touf::before,
.cards .card.breath-touf.j::before,
.cards .card.breath-kouf::before,
.cards .card.breath-kouf.j::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    border-top: solid var(--card-border-width) var(--red);
    border-left: solid var(--card-border-width) var(--red);
    border-right: solid var(--card-border-width) var(--red);
    border-top-left-radius: var(--card-radius);
    border-top-right-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

.cards .card.breath-touf::after,
.cards .card.breath-touf.j::after,
.cards .card.breath-kouf::after,
.cards .card.breath-kouf.j::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    border-bottom: solid var(--card-border-width) var(--green);
    border-left: solid var(--card-border-width) var(--green);
    border-right: solid var(--card-border-width) var(--green);
    border-bottom-left-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

/* Cartes breath_voice_*_3m : bordure bicolore (jaune à gauche, vert à droite) */
.cards .card.wakatoo-card-breath-voice-bicolor,
.cards .card.wakatoo-card-breath-voice-bicolor.j {
    border: none;
    position: relative;
}

.cards .card.wakatoo-card-breath-voice-bicolor::before,
.cards .card.wakatoo-card-breath-voice-bicolor.j::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    border-top: solid var(--card-border-width) var(--yellow);
    border-bottom: solid var(--card-border-width) var(--yellow);
    border-left: solid var(--card-border-width) var(--yellow);
    border-top-left-radius: var(--card-radius);
    border-bottom-left-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

.cards .card.wakatoo-card-breath-voice-bicolor::after,
.cards .card.wakatoo-card-breath-voice-bicolor.j::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    border-top: solid var(--card-border-width) var(--green);
    border-bottom: solid var(--card-border-width) var(--green);
    border-right: solid var(--card-border-width) var(--green);
    border-top-right-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}



.cards .card.silence {
    border: solid var(--card-border-width) var(--green);
}

.cards .card.g, .cards .card.c, .cards .card.r {
    border: solid var(--card-border-width) var(--orange);
}

.black {
    border: solid var(--card-border-width) var(--black);
}

.cards-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: auto;
    margin-bottom: 20px;
    width: 100%;
}

.rythm-wrapper {
    display: flex;
    flex-direction: column;
    width: calc((var(--card-size) * var(--cards-columns)) + (var(--cards-gutter) * (var(--cards-columns) - 1)));
}

:root {
    /* Couleurs de l'application Flutter (harmonisation 2025) */
    --waka-white: #FAF7F4;
    --waka-text: #39291D;
    --waka-grey-light: #F5F5F0;
    
    --waka-card-respiration: #4A9B7E; /* Vert sauge */
    --waka-card-classic: #E89A4C;     /* Ambre doré */
    --waka-card-accent: #D86F4A;      /* Terracotta */
    --waka-card-structure: #8B5A8E;   /* Violet doux */
    --waka-card-voice: #E8B84C;       /* Miel doré */
    --waka-choisi: #2E9E5B;           /* Vert du choix : coche d'une carte sélectionnée */

    /* Anciennes variables pour compatibilité ascendante si besoin */
    --yellow: var(--waka-card-voice);
    --green: var(--waka-card-respiration);
    --red: var(--waka-card-accent);
    --orange: var(--waka-card-classic);
    --violet: var(--waka-card-structure);
    --black: var(--waka-text);
}

.cards {
    --card-size: 72px;
    --cards-gutter: 4px;
    --cards-columns: 4;
    --cards-row-size: var(--card-size);
    /* SOURCE DE VÉRITÉ : l'app Wakatoo (lib/core/widgets/card_visual_widget.dart).
       Toute la géométrie d'une carte découle de --card-size, avec les coefficients de l'app :
       bordure 3,5 % (1,5 à 8 px), arrondi 14 % (3 à 8 px), texte 30 %, numéro du temps 15 %,
       indicateur 16 %. Une page ne règle QUE --card-size (et la gouttière) : jamais la bordure,
       l'arrondi, la police ni la graisse (Gauthier, 21/09/2026 : « centraliser l'affichage »). */
    --card-radius: clamp(3px, calc(var(--card-size) * 0.14), 8px);
    --card-border-width: clamp(1.5px, calc(var(--card-size) * 0.035), 8px);
    --card-font-size: calc(var(--card-size) * 0.30);
    --card-beat-font-size: clamp(8px, calc(var(--card-size) * 0.15), 12px);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Colors */

.cards .card {
    border: solid var(--card-border-width) var(--waka-card-classic);
    border-radius: var(--card-radius);
    background-color: var(--waka-white);
    box-shadow: 0 2px 4px rgba(57, 41, 29, 0.15);
    transition: transform 0.06s ease-out;
}

.cards .card.wakatoo-card-plus,
.cards .card.wakatoo-card-minus {
    border-color: var(--waka-card-accent);
}

/* Cartes avec bordure rouge (Accentuation) */
.cards .card.touf,
.cards .card.touf.j,
.cards .card.kouf,
.cards .card.kouf.j,
.cards .card.ks,
.cards .card.ks.j,
.cards .card.pch,
.cards .card.pch.j,
.cards .card.ts,
.cards .card.ts.j,
.cards .card.kl,
.cards .card.kl.j,
.cards .card.douf,
.cards .card.douf.j {
    border-color: var(--waka-card-accent);
}

/* Cartes contenant breath_ : bordure verte par défaut (Respiration) */
.cards .card[class*="breath-"],
.cards .card.breath-contains-breath {
    border-color: var(--waka-card-respiration);
    position: relative;
}

/* Souffles écrits à l'ancienne dans les rythmes des formations (WON, WA, WI, ON, TON… sans le
   préfixe breath_) : ce sont des respirations, donc vertes comme dans l'app. Même liste que le
   groupe RESPIRATION de la bibliothèque de rythmes. Centralisé ici le 21/09/2026 : une page ne
   recolore jamais une carte. */
.cards .card.won,
.cards .card.waon,
.cards .card.wa,
.cards .card.wi,
.cards .card.on,
.cards .card.ton,
.cards .card.kon,
.cards .card.don,
.cards .card.gon,
.cards .card.dlrong,
.cards .card.low {
    border-color: var(--waka-card-respiration);
}

/* Les deux moitiés d'une carte bicolore (les ::before / ::after ci-dessus et plus bas) : leur
   bordure est DANS leur largeur, donc la séparation des deux couleurs tombe pile au milieu de
   la carte. Sans ça, chaque moitié faisait « 50 % + une bordure » : elles se chevauchaient et
   le trait de séparation était décalé d'une bordure vers la gauche (visible sur une grande
   carte — 21/09/2026). Dans l'app, c'est un seul contour peint en deux couleurs, coupé au
   milieu (_BicolorBorderPainter). */
.cards .card::before,
.cards .card::after {
    box-sizing: border-box;
}

/* Une carte seule, hors d'un rythme (wakatoo_render_card()) : pas de marge, pas de curseur de jeu */
.wakatoo-carte-seule.cards {
    display: inline-flex;
    max-width: none;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHOISIR UNE CARTE — le même signal partout, site et administration
   (Gauthier, 21/09/2026 : « que ce soit cohérent partout »).
   Non choisie : la carte passe en noir et blanc. Choisie : elle reprend ses
   couleurs et une coche dans un rond vert se pose sur son coin.
   Une page n'écrit PLUS son propre anneau, sa propre opacité ni sa propre coche :
   elle pose la classe `wakatoo-choix` sur ce qui entoure la carte (avec la case à
   cocher dedans), ou `est-choisie` quand l'état ne vient pas d'une case.
   Tout est proportionnel à --card-size, comme le reste du dessin.
   ───────────────────────────────────────────────────────────────────────────── */
.wakatoo-choix .cards {
    position: relative;
}

.wakatoo-choix .card {
    filter: grayscale(1);
    opacity: 0.5;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

/* Survol : seulement là où l'on peut vraiment choisir (une case à cocher dans l'entourage) */
.wakatoo-choix:has(input):hover .card {
    opacity: 0.75;
}

/* La coche : posée sur le coin haut-droit (le numéro du temps est en haut au centre,
   les flèches et les ronds des voix en bas : ce coin est toujours libre). */
.wakatoo-choix .cards::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: calc(var(--card-size) * -0.07);
    right: calc(var(--card-size) * -0.07);
    width: clamp(14px, calc(var(--card-size) * 0.32), 22px);
    height: clamp(14px, calc(var(--card-size) * 0.32), 22px);
    border-radius: 50%;
    background-color: var(--waka-choisi);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.8 4.8L19 7.2'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 62%;
    box-shadow: 0 0 0 2px var(--waka-white);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.wakatoo-choix:has(input:checked) .card,
.wakatoo-choix.est-choisie .card {
    filter: none;
    opacity: 1;
}

.wakatoo-choix:has(input:checked) .cards::after,
.wakatoo-choix.est-choisie .cards::after {
    opacity: 1;
    transform: none;
}

/* Carte double : les deux parties ont breath_ */
.cards .card.wakatoo-card-double-both-breath {
    border-color: var(--waka-card-respiration);
}

/* Carte double : gauche verte, droite orange */
.cards .card.wakatoo-card-double-left-breath::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    border-top: solid var(--card-border-width) var(--waka-card-respiration);
    border-bottom: solid var(--card-border-width) var(--waka-card-respiration);
    border-left: solid var(--card-border-width) var(--waka-card-respiration);
    border-top-left-radius: var(--card-radius);
    border-bottom-left-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

.cards .card.wakatoo-card-double-left-breath::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    border-top: solid var(--card-border-width) var(--waka-card-classic);
    border-bottom: solid var(--card-border-width) var(--waka-card-classic);
    border-right: solid var(--card-border-width) var(--waka-card-classic);
    border-top-right-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

/* Carte double : gauche orange, droite verte */
.cards .card.wakatoo-card-double-right-breath::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    border-top: solid var(--card-border-width) var(--waka-card-classic);
    border-bottom: solid var(--card-border-width) var(--waka-card-classic);
    border-left: solid var(--card-border-width) var(--waka-card-classic);
    border-top-left-radius: var(--card-radius);
    border-bottom-left-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

.cards .card.wakatoo-card-double-right-breath::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    border-top: solid var(--card-border-width) var(--waka-card-respiration);
    border-bottom: solid var(--card-border-width) var(--waka-card-respiration);
    border-right: solid var(--card-border-width) var(--waka-card-respiration);
    border-top-right-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

/* Cartes breath_touf et breath_kouf : bicolore rouge/vert */
.cards .card.breath-touf::before,
.cards .card.breath-touf.j::before,
.cards .card.breath-kouf::before,
.cards .card.breath-kouf.j::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    border-top: solid var(--card-border-width) var(--waka-card-accent);
    border-left: solid var(--card-border-width) var(--waka-card-accent);
    border-right: solid var(--card-border-width) var(--waka-card-accent);
    border-top-left-radius: var(--card-radius);
    border-top-right-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

.cards .card.breath-touf::after,
.cards .card.breath-touf.j::after,
.cards .card.breath-kouf::after,
.cards .card.breath-kouf.j::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    border-bottom: solid var(--card-border-width) var(--waka-card-respiration);
    border-left: solid var(--card-border-width) var(--waka-card-respiration);
    border-right: solid var(--card-border-width) var(--waka-card-respiration);
    border-bottom-left-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

/* Cartes breath_voice : bicolore jaune/vert */
.cards .card.wakatoo-card-breath-voice-bicolor::before,
.cards .card.wakatoo-card-breath-voice-bicolor.j::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    border-top: solid var(--card-border-width) var(--waka-card-voice);
    border-bottom: solid var(--card-border-width) var(--waka-card-voice);
    border-left: solid var(--card-border-width) var(--waka-card-voice);
    border-top-left-radius: var(--card-radius);
    border-bottom-left-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

.cards .card.wakatoo-card-breath-voice-bicolor::after,
.cards .card.wakatoo-card-breath-voice-bicolor.j::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    border-top: solid var(--card-border-width) var(--waka-card-respiration);
    border-bottom: solid var(--card-border-width) var(--waka-card-respiration);
    border-right: solid var(--card-border-width) var(--waka-card-respiration);
    border-top-right-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
    pointer-events: none;
    z-index: 1;
}

.cards .card.silence {
    border-color: var(--waka-card-respiration);
}

/* FLÈCHES : héritent automatiquement de la couleur de la carte précédente.
   Le PHP copie les classes CSS de la carte précédente sur la flèche.
   La règle par défaut .cards .card donne déjà la couleur classique (orange).
   On surcharge uniquement les catégories spéciales ci-dessous. */

/* Flèches orphelines (aucun son précédent) : structure violette */
.cards .card.arrow {
    border-color: var(--waka-card-structure);
}

/* Flèches avec classe de respiration (breath) */
.cards .card.f[class*="breath"] {
    border-color: var(--waka-card-respiration);
}

/* Flèches avec classe accent (consonnes accentuées et plus/minus) */
.cards .card.f.touf,
.cards .card.f.kouf,
.cards .card.f.ks,
.cards .card.f.pch,
.cards .card.f.ts,
.cards .card.f.kl,
.cards .card.f.douf,
.cards .card.f.j,
.cards .card.f.wakatoo-card-plus,
.cards .card.f.wakatoo-card-minus {
    border-color: var(--waka-card-accent);
}

/* Flèches avec classe voice */
.cards .card.f.wakatoo-card-voice-3m {
    border-color: var(--waka-card-voice);
}

/* Flèches suivant une carte bicolore :
   Les cartes bicolores ont border:none + pseudo-éléments ::before/::after.
   Sur les flèches : supprimer les pseudo-éléments et restaurer une bordure simple. */

.cards .card.f.wakatoo-card-double-bicolor::before,
.cards .card.f.wakatoo-card-double-bicolor::after,
.cards .card.f.breath-touf::before,
.cards .card.f.breath-touf::after,
.cards .card.f.breath-kouf::before,
.cards .card.f.breath-kouf::after,
.cards .card.f.wakatoo-card-breath-voice-bicolor::before,
.cards .card.f.wakatoo-card-breath-voice-bicolor::after {
    display: none;
}

/* Restaurer la bordure simple (annule "border: none" des cartes bicolores).
   On utilise border-style + border-width séparément pour ne pas écraser
   border-color qui sera fixé par les règles de couleur ci-dessous. */
.cards .card.f.wakatoo-card-double-bicolor,
.cards .card.f.breath-touf,
.cards .card.f.breath-kouf,
.cards .card.f.wakatoo-card-breath-voice-bicolor {
    border-style: solid;
    border-width: var(--card-border-width);
}

/* Couleur du côté droit pour chaque type bicolore */
/* left-breath (gauche=vert, droite=orange) et no-breath (tout orange) → orange */
.cards .card.f.wakatoo-card-double-left-breath,
.cards .card.f.wakatoo-card-double-no-breath {
    border-color: var(--waka-card-classic);
}

/* breath-voice-bicolor (gauche=jaune, droite=vert) → vert */
/* Vient après .card.f.wakatoo-card-voice-3m (même spécificité → ordre CSS décide) */
.cards .card.f.wakatoo-card-breath-voice-bicolor {
    border-color: var(--waka-card-respiration);
}

.cards .card.g, .cards .card.c, .cards .card.r {
    border-color: var(--waka-card-classic);
}

.cards .card.too, .cards .card.tooh {
    border-color: var(--waka-card-classic);
}

.cards .card.black {
    border-color: var(--waka-text);
}

.cards .card.wakatoo-card-voice-3m {
    border-color: var(--waka-card-voice);
}

.wakatoo-card-double-no-breath {
    border-color: var(--waka-card-classic);
}

/* S'assurer que les bordures bicolores prennent le dessus */
.cards .card.wakatoo-card-double-bicolor[class*="breath-"] {
    border: none !important;
}

.rythm-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    justify-content: flex-start;
    width: 100%;
}

.rythm-wrapper.no-title .rythm-header {
    margin-bottom: 0;
}

.rythm-wrapper.no-title {
    cursor: pointer;
}

.rythm-wrapper {
    cursor: pointer;
}

.rythm-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--waka-text);
    margin: 0;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cards-gutter);
    /* Limite à 8 cartes par ligne maximum */
    max-width: calc((var(--card-size) * 8) + (var(--cards-gutter) * 7));
}

.card-block {
    display: flex;
    align-items: flex-start; /* jamais d'étirement : une carte reste carrée */
    gap: var(--cards-gutter);
}

/* Quand un temps contient 3 cartes, le bloc prend sa taille naturelle 
   (identique aux blocs binaires) */
.card-block.block-3 {
    flex: 0 0 auto;
}

/* Dans l'app, chaque carte est entière (quatre coins arrondis) et séparée de ses voisines par la
   même gouttière, à l'intérieur d'un temps comme entre deux temps. L'ancienne règle n'arrondissait
   que les coins extérieurs du bloc et collait les cartes : deux arrondis différents dans une même
   rangée (Gauthier, 21/09/2026). La largeur de .rythm-wrapper (n cartes + n-1 gouttières) était
   déjà calculée pour des gouttières partout. */

.cards .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* La largeur définit la taille principale de la carte */
    width: var(--card-size);
    /* La bordure est DANS la taille, comme dans l'app (width = size) : une carte bicolore, qui n'a
       pas de bordure propre, fait ainsi exactement la même largeur que ses voisines. */
    box-sizing: border-box;
    /* TOUJOURS un carré (Gauthier, 21/09/2026). La hauteur est posée en dur, égale à la largeur :
       `aspect-ratio` seul ne suffisait pas, une rangée en flex étirait en hauteur la carte la plus
       basse (une bicolore, sans bordure propre, devenait plus haute que large). `flex: none`
       l'empêche aussi de rétrécir ou de grandir dans sa rangée. */
    height: var(--card-size);
    aspect-ratio: 1 / 1;
    flex: none;
    align-self: flex-start;
    -webkit-font-smoothing: antialiased; /* numéro du temps et indicateurs compris */
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--waka-white);
    color: var(--waka-text);
    position: relative;
    border: solid var(--card-border-width) var(--waka-card-classic);
    border-radius: var(--card-radius);
    box-shadow: 0 2px 4px rgba(57, 41, 29, 0.15);
    transition: transform 0.06s ease-out;
}

/* Numéro du temps (app : top 5 %, rembourrage 4 %, police 15 % bornée 8-12 px, fond #EFEAE2 à 70 %) */
.time-number {
    position: absolute;
    top: calc(var(--card-size) * 0.05);
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--card-beat-font-size) + var(--card-size) * 0.08);
    height: calc(var(--card-beat-font-size) + var(--card-size) * 0.08);
    border-radius: 50%;
    background-color: rgba(239, 234, 226, 0.7);
    color: rgba(30, 21, 9, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    font-size: var(--card-beat-font-size);
    font-weight: 700;
    line-height: 1;
    z-index: 1;
}

.card-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: var(--card-font-size);
    font-weight: 700;
    line-height: 1;
    /* Même rendu que l'app : sans ce lissage, macOS épaissit les lettres (sous-pixels) et le texte
       paraît plus gras que dans Wakatoo. Le thème le pose sur body pour les pages publiques, mais
       pas sur les leçons ni la bibliothèque, qui ne chargent pas site.css (21/09/2026). */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--waka-text);
    font-family: 'Nunito', sans-serif;
}

/* Ajustement du texte, comme le FittedBox(scaleDown) de l'app : le libellé tient toujours sur une
   ligne. --n = « poids » du texte (minuscule 1, majuscule 1,25), posé par
   wakatoo_apply_writing_exceptions(). Largeur utile ≈ 88 % de la carte, une lettre Nunito grasse
   ≈ 0,6 × la police → police max = 1,45 × --card-size / n. En dessous de ~5 lettres rien ne bouge. */
.wakatoo-card-text {
    display: inline-block;
    white-space: nowrap;
    font-size: min(1em, calc(var(--card-size) * 1.45 / var(--n, 1)));
    line-height: 1;
    /* MÊME GRAISSE PARTOUT (Gauthier, 21/09/2026 : « il faut que la graisse SOIT TOUJOURS LA
       MÊME !! »). Un libellé long est écrit plus petit pour tenir sur une ligne ; à 700 partout,
       ses traits sont alors plus fins que ceux de ses voisines — « TOHWA » à 33 px contre 45 px
       pour « taka », soit des traits d'un quart plus fins (mesuré). On rattrape la graisse à
       mesure que le texte rétrécit : le texte est réduit dès que --n dépasse 4,83
       (= 1,45 / 0,30), et la graisse monte dans la même proportion, bornée à 900. */
    font-weight: clamp(700, calc(700 * var(--n, 1) / 4.83), 900);
}

/* Les deux sons d'une carte double sont dans des .wakatoo-card-text imbriqués : eux ne
   rétrécissent pas (ils héritent de la taille du parent), donc ils en héritent aussi la graisse. */
.wakatoo-card-text .wakatoo-card-text {
    font-weight: inherit;
}

/* Indicateur pour les cartes de type *_plus */
.wakatoo-card-plus .card-content {
    position: relative;
    flex-direction: column;
}

.wakatoo-card-plus-indicator {
    position: absolute;
    top: auto;
    bottom: calc(var(--card-size) * 0.08);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--card-size) * 0.03);
    /* Taille de base pour une carte ~87px, proportionnelle à --card-size */
    font-size: calc(var(--card-size) * 0.16);
    font-weight: 700;
    opacity: 0.7;
}

.wakatoo-card-plus-arrow {
    font-size: 1.2em;
    line-height: 1;
    /* Épaisseur visuelle sans dépendre du gras de la fonte */
    text-shadow: 0 0 0.4px currentColor;
}

.wakatoo-card-plus-number {
    font-size: 1em;
    line-height: 1;
}

/* Indicateur pour les cartes de type *_minus */
.wakatoo-card-minus .card-content {
    position: relative;
    flex-direction: column;
}

.wakatoo-card-minus-indicator {
    position: absolute;
    top: auto;
    bottom: calc(var(--card-size) * 0.08);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--card-size) * 0.03);
    /* Même logique de taille proportionnelle que *_plus */
    font-size: calc(var(--card-size) * 0.16);
    font-weight: 700;
    opacity: 0.7;
}

.wakatoo-card-minus-arrow {
    font-size: 1.2em;
    line-height: 1;
    text-shadow: 0 0 0.4px currentColor;
}

/* Indicateur pour les cartes de type voice_*_3m (3 cercles verticaux) */
.wakatoo-card-voice-3m .card-content {
    position: relative;
    flex-direction: column;
}

.wakatoo-card-voice-3m-indicator {
    position: absolute;
    top: auto;
    bottom: calc(var(--card-size) * 0.06); /* app : à 6 % du bas, 2 % entre les ronds */
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--card-size) * 0.02);
}

.wakatoo-card-voice-3m-dot {
    display: block;
    /* Diamètre proportionnel à la taille de la carte, plus petit que la flèche */
    width: calc(var(--card-size) * 0.08);
    height: calc(var(--card-size) * 0.08);
    border-radius: 50%;
    border: 1px solid var(--black);
    background-color: transparent;
    box-sizing: border-box;
}

/* Variation d’intensité de la sous-vibration :
   - 3m      : cercle du milieu rempli
   - unisson : cercle du bas rempli
   - high    : cercle du haut rempli */
.wakatoo-card-voice-3m-middle .wakatoo-card-voice-3m-dot.dot-middle {
    background-color: var(--black);
}

.wakatoo-card-voice-3m-bottom .wakatoo-card-voice-3m-dot.dot-bottom {
    background-color: var(--black);
}

.wakatoo-card-voice-3m-top .wakatoo-card-voice-3m-dot.dot-top {
    background-color: var(--black);
}

/* Bordure jaune pour les cartes voice_*_3m */
.cards .card.wakatoo-card-voice-3m {
    border-color: var(--yellow);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(196, 135, 56, 0.2);
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    pointer-events: none;
    z-index: 10;
}

.cards .card.playing .card-overlay {
    opacity: 1;
}

.card-icon {
    display: none;
}

.cards .card.c .card-icon {
    background-image: url(https://wakademy.online/wp-content/uploads/wk/wakatoo/c.png);
}

.cards .card.r .card-icon {
    background-image: url(https://wakademy.online/wp-content/uploads/wk/wakatoo/r.png);
}

.cards .card.g .card-icon {
    background-image: url(https://wakademy.online/wp-content/uploads/wk/wakatoo/g.png);
}

.cards .card.too .card-icon {
    background-image: url(https://wakademy.online/wp-content/uploads/wk/wakatoo/tooh.png);
}

.cards .card.tooh .card-icon {
    background-image: url(https://wakademy.online/wp-content/uploads/wk/wakatoo/too.png);
}

.cards .card.silence {
    border: solid var(--card-border-width) var(--green);
}

.cards .card.g, .cards .card.c, .cards .card.r {
    border: solid var(--card-border-width) var(--yellow);
}

.cards .card.black {
    border: solid var(--card-border-width) var(--black);
}


@media (max-width: 768px) {
    .rythm-wrapper {
        width: 100%;
    }
    
    .cards .card {
        border-width: var(--card-border-width);
    }
    
    .cards .card.too, .cards .card.tooh {
        border-width: var(--card-border-width);
    }
    
    .cards .card.f, .cards .card.silence {
        border-width: var(--card-border-width);
    }
    
    .cards .card.g, .cards .card.c, .cards .card.r {
        border-width: var(--card-border-width);
    }
    
    .cards .card.black {
        border-width: var(--card-border-width);
    }
}

/* Réduire légèrement les cartes sur les très petits écrans pour éviter le débordement */
@media (max-width: 320px) {
    .cards {
        --card-size: 65px;
        --cards-row-size: 65px;
        --cards-gutter: 3px;
    }
}

@media (min-width: 600px) {
    .cards {
        --cards-columns: 8;
    }
}

@media (min-width: 1440px) {
    .cards {
        --card-size: 90px;
        --cards-row-size: 90px;
        margin-top: 36px
    }
}

/* WAKATOO CONTROLS */

.controls-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}

.play-stop-button {
    width: 32px;
    height: 32px;
    cursor: pointer;
    background-color: var(--wk-or, #B8792F);
    border-radius: 100%;
    border: solid 1px var(--wk-or, #B8792F);
    flex-shrink: 0;
    position: relative;
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.38, 1.8, 0.32, 1);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.38, 1.8, 0.32, 1);
    -o-transition: -o-transform 0.1s cubic-bezier(0.38, 1.8, 0.32, 1);
    -ms-transition: -ms-transform 0.1s cubic-bezier(0.38, 1.8, 0.32, 1);
    transition: transform 0.1s cubic-bezier(0.38, 1.8, 0.32, 1);
}

/* Icône play (triangle) par défaut */
.play-stop-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-left: 9px solid var(--wk-sur-or, #FAF7F4);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* Icône stop (carré) quand en lecture */
.play-stop-button.playing::before {
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border: none;
    background-color: var(--wk-sur-or, #FAF7F4);
    border-left: none;
    border-top: none;
    border-bottom: none;
}

.play-stop-button.active {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition-duration: 0.5s;
}

.rythm-caption {
    margin-left: 20px;
}

/* Masquer les boutons play sur la page de documentation */
.ecriture-wakatoo-page .play-stop-button,
.ecriture-wakatoo-page .rythm-header .play-stop-button {
    display: none !important;
}

.ecriture-wakatoo-page .rythm-header {
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

.ecriture-wakatoo-page .rythm-title {
    display: none !important;
}

.ecriture-wakatoo-page .rythm-wrapper.no-title .rythm-header {
    display: none !important;
}

/* NOUVEAU LECTEUR AUDIO MODERNE */

.wakatoo-rhythm-container[data-has-audio="1"] .wakatoo-audio-player {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.wakatoo-audio-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: var(--wk-sable, #EFEAE2);
    border-radius: 8px;
    margin-top: 16px;
    box-shadow: 0 2px 4px rgba(57, 41, 29, 0.1);
}

.wakatoo-audio-player .play-stop-button {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: var(--waka-text);
    border: none;
    margin: 0;
}

.wakatoo-audio-player .play-stop-button::before {
    border-left-color: var(--waka-white);
}

.wakatoo-audio-player .play-stop-button.playing::before {
    background-color: var(--waka-white);
}

/* Animation de chargement */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.wakatoo-audio-player .play-stop-button.loading {
    animation: spin 1s linear infinite;
    opacity: 0.7;
}

.wakatoo-audio-player .speed-button {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: var(--wk-sable-fonce, #E6DCCF);
    border: none;
    border-radius: 50%;
    margin-left: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--waka-text);
    transition: all 0.2s ease;
    user-select: none;
}

.wakatoo-audio-player .speed-button:hover {
    background-color: color-mix(in srgb, var(--wk-ecorce, #39291D) 8%, var(--wk-sable-fonce, #E6DCCF));
}

.wakatoo-audio-player .speed-button:active {
    transform: scale(0.95);
}

.wakatoo-audio-player .speed-button[data-speed="2"] {
    background-color: var(--waka-text);
    color: var(--waka-white);
}

.audio-progress-container {
    flex: 1;
    height: 6px;
    background-color: var(--wk-trait, rgba(57, 41, 29, .16));
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.audio-progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--waka-text);
    border-radius: 3px;
}

/* Masquer l'ancien emplacement du bouton play dans le header */
.rythm-header .play-stop-button {
    display: none;
}

/* Ajuster le header quand il n'y a pas de titre */
.rythm-wrapper.no-title .rythm-header {
    display: none;
}

/* Masquer le nouveau lecteur audio sur la page de documentation */
.ecriture-wakatoo-page .wakatoo-audio-player {
    display: none !important;
}

/* Souffle + survibration (breath_ton_plus, breath_wa_plus…) : bicolore comme
   dans l'app, gauche rouge (accent), droite verte (souffle). Même structure que
   la carte double « droite verte », seule la moitié gauche change de couleur. */
.cards .card.wakatoo-card-double-right-breath.wakatoo-card-left-accent::before {
    border-color: var(--waka-card-accent, var(--red));
}

/* Une carte double n'a plus rien de particulier pour son texte (21/09/2026) : ses deux sons
   sont collés comme dans l'app et le libellé passe par .wakatoo-card-text, la règle unique
   d'ajustement. Avant : un conteneur CSS et une taille en cqw plafonnée à 17 px — le texte
   restait minuscule sur une grande carte. */

/*--------------------------------------------------------------
>>> MODE SOMBRE
Suit l'appareil, seulement quand le thème pose la classe « wk-sombre »
sur <body> (thèmes wakademy et wakatoo-site). Couleurs de l'app Wakatoo :
fond de carte gris foncé, texte blanc cassé, catégories assombries d'environ 30 %.
--------------------------------------------------------------*/
@media (prefers-color-scheme: dark) {
	body.wk-sombre .cards-container {
		--waka-white: #2C2C2E;
		--waka-text: #F2F2F7;
		--waka-grey-light: #3A3A3C;
		--black: #F2F2F7;
		--waka-card-respiration: #346D58;
		--waka-card-classic: #A26C35;
		--waka-card-accent: #974E34;
		--waka-card-structure: #613F63;
		--waka-card-voice: #A28135;
		--yellow: var(--waka-card-voice);
		--green: var(--waka-card-respiration);
		--red: var(--waka-card-accent);
		--orange: var(--waka-card-classic);
		--violet: var(--waka-card-structure);
	}
	body.wk-sombre .cards .card,
	body.wk-sombre .card {
		box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
	}
}

/*--------------------------------------------------------------
>>> MODE DALTONIEN
Palette de l'app Wakatoo (bleu à la place du vert, couleurs plus franches).
Classe « wakatoo-mode-daltonien » sur <html>, posée par le shortcode [wakatoo_daltonien].
--------------------------------------------------------------*/
html.wakatoo-mode-daltonien,
html.wakatoo-mode-daltonien .cards-container {
	--waka-card-respiration: #0154DC;
	--waka-card-classic: #E69900;
	--waka-card-accent: #DB3E08;
	--waka-card-structure: #F286FF;
	--waka-card-voice: #FAF301;
	--yellow: var(--waka-card-voice);
	--green: var(--waka-card-respiration);
	--red: var(--waka-card-accent);
	--orange: var(--waka-card-classic);
	--violet: var(--waka-card-structure);
}

/* Interrupteur rond */
.wakatoo-daltonien {
	display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none;
	font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 15px; color: inherit;
}
.wakatoo-daltonien__case { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.wakatoo-daltonien__bouton {
	position: relative; flex: none; width: 46px; height: 26px; border-radius: 13px;
	background: color-mix(in srgb, var(--wk-ecorce, #39291D) 22%, transparent); transition: background .2s ease;
}
.wakatoo-daltonien__bouton::after {
	content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
	background: var(--wk-creme, #FAF7F4); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s ease;
}
.wakatoo-daltonien__case:checked + .wakatoo-daltonien__bouton { background: var(--wk-or, #B8792F); }
.wakatoo-daltonien__case:checked + .wakatoo-daltonien__bouton::after { transform: translateX(20px); }
.wakatoo-daltonien__case:focus-visible + .wakatoo-daltonien__bouton { outline: 2px solid var(--wk-or, #B8792F); outline-offset: 3px; }
@media (prefers-color-scheme: dark) {
	body.wk-sombre .wakatoo-daltonien__bouton { background: rgba(255, 255, 255, .22); }
}

/* Petite main sur les éléments cliquables (demande de Gauthier, 15/09 ; déplacé depuis site.css pour valoir aussi dans les leçons). */
.wakatoo-daltonien__case, .wakatoo-daltonien label { cursor: pointer; }