/* Boutons de l'en-tête du site et cadre du bouton « Jouer » (le piano complet, app.pianovera.com, par-dessus la page, au clic).
   jouer-4 (11/11/2026, décisions de Stéphane) : UNE feuille pour toutes les pages, piano virtuel compris.
   · Le bouton de téléchargement de l'en-tête a partout le même libellé long (« Télécharger gratuitement »…, classe nav-cta-l) et la même icône :
     une pastille ronde avec une flèche blanche vers le bas, jumelle de la pastille « ▶ » de « Jouer » (dessinée ici en SVG, pas un caractère ;
     un lecteur d'écran ne lit que le libellé).
   · C'est l'ORDRE des deux liens dans la page qui décide lequel est en vedette, sans classe ni réglage par page :
       téléchargement PUIS « Jouer » (toutes les pages)       → téléchargement bleu nuit en vedette, « Jouer » blanc ;
       « Jouer » PUIS téléchargement (les 4 pages piano virtuel) → « Jouer » bleu nuit en vedette, téléchargement bleu du site comme avant.
   jouer-6 (11/11/2026, lot « menu et textes », va avec jouer-4.js) : le menu du haut a 2 liens de moins (Défis, Fonctions) et retrouve un texte
   plus grand ; bloc « Défi du jour » de la page Cours ; page Tarifs. Le reste est celui de jouer-5 :
   jouer-5 (11/11/2026, lot « chemin direct ») :
   · un bouton qui dit « Windows » et qui a la pastille Google Play / App Store à côté (data-direct-win="masquer") n'est plus montré sur téléphone ;
   · la barre du cadre « Jouer » reçoit un bouton de téléchargement (même pastille à flèche) et tient sur une ligne sur téléphone (libellés courts). */
.os-android [data-direct-win="masquer"],.os-ios [data-direct-win="masquer"],.pv-android [data-direct-win="masquer"],.pv-ios [data-direct-win="masquer"]{display:none!important}
.nav-jouer{margin-left:8px;display:inline-flex;align-items:center;gap:8px;background:#0a1430;color:#fff!important;border:1px solid #2f6bff;box-shadow:0 0 0 3px rgba(47,107,255,.18),0 6px 18px rgba(10,20,48,.35)}
.nav-jouer:hover{background:#0f1d45}
.nav-jouer i,.btn-jouer i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#2f6bff;font-size:11px;color:#fff}
/* bouton de téléchargement : pastille à flèche, même taille et même alignement que la pastille de « Jouer » */
.nav-cta.btn-primary{gap:8px;white-space:nowrap;background:#0a1430;color:#fff!important;border:1px solid #2f6bff;box-shadow:0 0 0 3px rgba(47,107,255,.18),0 6px 18px rgba(10,20,48,.35)}
.nav-cta.btn-primary:hover{background:#0f1d45;color:#fff!important;filter:none;box-shadow:0 0 0 3px rgba(47,107,255,.3),0 8px 22px rgba(10,20,48,.4)}
.nav-cta.btn-primary::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:#2f6bff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.8v7.6M2.6 6.2 6 9.6l3.4-3.4' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat}
/* téléchargement en premier : « Jouer » devient le bouton blanc à bordure */
.nav-cta.btn-primary+.nav-jouer{background:#fff;color:var(--txt,#14213d)!important;border:1.5px solid var(--line2,#cfd9ee);box-shadow:0 1px 2px rgba(20,33,61,.05)}
.nav-cta.btn-primary+.nav-jouer:hover{background:#eef4ff;border-color:var(--blue,#2563eb);color:var(--blue,#2563eb)!important}
/* « Jouer » en premier (piano virtuel) : le téléchargement garde le bleu du site ; sa pastille passe en bleu nuit pour rester lisible sur le bleu */
.nav-jouer+.nav-cta.btn-primary{background:var(--grad);border:1.5px solid transparent;box-shadow:0 10px 24px rgba(37,99,235,.28)}
.nav-jouer+.nav-cta.btn-primary:hover{background:var(--grad);filter:brightness(1.06);box-shadow:0 14px 30px rgba(37,99,235,.34)}
.nav-jouer+.nav-cta.btn-primary::before{background-color:#0a1430}
.nav:has(.nav-jouer) .nav-links a{white-space:nowrap;padding-left:7px;padding-right:7px}
.nav-links a.nav-creer{color:#1d4ed8;font-weight:800}
@media (max-width:1299px){.nav-jouer{display:none}}
/* LARGEURS (voir le bloc en fin de fichier) */
.btn-jouer{display:inline-flex;align-items:center;gap:12px;background:#0a1430;color:#fff!important;border:1px solid #2f6bff;box-shadow:0 0 0 4px rgba(47,107,255,.2),0 10px 28px rgba(10,20,48,.35);text-align:left;line-height:1.15}
.btn-jouer i{width:34px;height:34px;font-size:15px}
.btn-jouer small{display:block;font-weight:500;font-size:13px;opacity:.8}
/* haut de l'accueil : « Jouer » côtoie les boutons de téléchargement (Google Play, App Store, Windows) → bouton blanc à toutes les largeurs */
.hero-actions .btn-jouer{background:#fff;color:var(--txt,#14213d)!important;border:1.5px solid var(--line2,#cfd9ee);box-shadow:0 1px 2px rgba(20,33,61,.05)}
.hero-actions .btn-jouer:hover{background:#eef4ff;border-color:var(--blue,#2563eb);color:var(--blue,#2563eb)!important}
#pv-jouer{position:fixed;inset:0;z-index:99999;background:#050a18;display:flex;flex-direction:column}
#pv-jouer[hidden]{display:none}
#pv-jouer header{display:flex;align-items:center;gap:10px;height:56px;padding:0 12px;background:#0a1430;color:#dfe8ff;font:600 14px/1 system-ui,sans-serif;border-bottom:1px solid #1d2c5c}
#pv-jouer header>span{flex:1}
#pv-jouer header button,#pv-jouer header a{font:600 14px/1 system-ui,sans-serif;color:#fff;background:#13245a;border:1px solid #2f6bff;border-radius:8px;padding:9px 12px;cursor:pointer;text-decoration:none}
#pv-jouer header [data-a=close]{order:-1;font-size:16px;font-weight:800;background:#fff;color:#0a1430;border:0;border-radius:10px;padding:11px 18px;box-shadow:0 0 0 4px rgba(47,107,255,.45)}
#pv-jouer header [data-a=close]:hover{background:#e6eeff}
#pv-jouer header>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pv-jouer header button,#pv-jouer header a{white-space:nowrap;flex:none}
/* téléchargement depuis le cadre : même pastille à flèche que dans l'en-tête du site */
#pv-jouer header [data-a=dl]{display:inline-flex;align-items:center;gap:8px;font-weight:800;padding:5px 12px 5px 6px;background:#13245a;border-color:#6f9bff}
#pv-jouer header [data-a=dl]:hover{background:#1b3277}
#pv-jouer header [data-a=dl]::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:#2f6bff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.8v7.6M2.6 6.2 6 9.6l3.4-3.4' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat}
#pv-jouer .pvj-c{display:none}
/* écran étroit (téléphone tenu droit, petite fenêtre) : libellés courts, titre masqué, tout sur une ligne */
@media (max-width:900px){#pv-jouer .pvj-l{display:none}#pv-jouer .pvj-c{display:inline}}
@media (max-width:640px){#pv-jouer header{gap:6px;padding:0 8px;height:52px}#pv-jouer header>span{display:none}
  #pv-jouer header button,#pv-jouer header a{font-size:13px;padding:8px 8px}#pv-jouer header [data-a=close]{font-size:14px;padding:9px 11px;margin-right:auto;box-shadow:0 0 0 3px rgba(47,107,255,.45)}
  #pv-jouer header [data-a=dl]{padding:4px 9px 4px 5px;gap:6px}}
@media (max-width:400px){#pv-jouer header{gap:5px;padding:0 6px}#pv-jouer header button,#pv-jouer header a{padding:8px 7px}#pv-jouer header [data-a=close]{padding:9px 9px}#pv-jouer header [data-a=dl]{padding:4px 8px 4px 5px}}
@media (max-width:359px){#pv-jouer header [data-a=dl]::before{display:none}#pv-jouer header [data-a=dl]{padding:8px 7px}}
#pv-jouer iframe{flex:1;width:100%;border:0;background:#050a18}
html.pv-jouer-ouvert{overflow:hidden}
/* LARGEURS (jouer-6) : le menu du haut a 2 liens de moins, il respire. Texte du menu : 15 px, 14,5 px de 1161 à 1499 px, jamais moins. */
/* 641 à 1299 px : le téléchargement est seul dans l'en-tête (« Jouer » masqué) */
@media (min-width:641px) and (max-width:1299px){.nav-cta.btn-primary{padding-left:10px;padding-right:13px;font-size:14.5px;margin-left:2px}}
@media (min-width:641px) and (max-width:759px){.nav:has(.nav-cta-l){gap:6px}.nav:has(.nav-cta-l) .lang4 a{padding:5px 4px}.nav-cta.btn-primary{padding-left:8px;padding-right:10px;font-size:14px}}
/* 1161 à 1499 px : menu un peu serré (marges), texte à 14,5 px ; au-delà, tailles normales du site */
@media (min-width:1161px) and (max-width:1499px){.nav:has(.nav-cta-l){gap:10px}.nav:has(.nav-cta-l) .nav-links{gap:0}.nav:has(.nav-cta-l) .nav-links a{padding-left:6px;padding-right:6px;font-size:14.5px;white-space:nowrap}.nav:has(.nav-cta-l) .lang4 a{padding:5px 5px}}
@media (min-width:1300px) and (max-width:1499px){.nav-cta.btn-primary{padding-left:11px;padding-right:14px;font-size:14.5px;margin-left:4px}.nav-jouer{margin-left:4px;padding-left:11px;padding-right:13px;font-size:14.5px}}
/* page Cours : bloc « Défi du jour » (les défis ne sont plus dans le menu du haut) */
.defi-jour{background:#fff;border:1.5px solid var(--line2,#cfd9ee);border-left:6px solid var(--blue,#2563eb);border-radius:18px;padding:22px 24px;margin:34px 0 8px;box-shadow:0 1px 2px rgba(20,33,61,.05)}
.defi-jour h2{margin:0 0 8px}
.defi-jour p{margin:0 0 16px;color:var(--txt,#14213d)}
/* page Tarifs */
.tarifs-page .hub-head h1{margin-bottom:14px}
.tarifs-page .hub-head .lead{max-width:64ch}
.tarifs-page h2{margin:46px 0 18px}
.tarifs-page .plans{margin-top:8px}
.tarifs-page .plan .ticks{margin-bottom:18px}
.tarifs-page .tarifs-ttc{color:var(--mut,#4a5878);font-size:15px;margin:18px 0 0}
.tarifs-page .tarifs-essai{max-width:74ch;font-size:17px}
.tarifs-page .faq{max-width:820px}
.tarifs-page .tarifs-fin{margin:38px 0 0}
/* cartes de prix (accueil et page Tarifs) : le libellé plus long du bouton passe à la ligne plutôt que d'élargir la carte */
.plan .btn-block{white-space:normal;text-align:center;justify-content:center}
.plans .plan{min-width:0}