/* System safe areas belong to the real device, not a simulated phone. */
html.native-app,html.native-app body{background:#F3EEFB!important;overscroll-behavior:none}
html.native-app body{padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)!important;box-sizing:border-box}
html.native-app .tuner.standalone{height:var(--available-height,calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)))!important;min-height:0!important}
html.native-app .tuner.standalone .composition{height:var(--available-height)!important;min-height:0!important}
html.native-app .desktop-panel{max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 20px)!important;bottom:env(safe-area-inset-bottom,0px)!important}

/* Reserve navigation before sizing the metronome content. */
html.native-app .tuner.standalone.screen-metronome .composition{display:grid!important;grid-template-rows:auto minmax(0,1fr) 80px;justify-items:center;gap:8px!important;overflow:hidden}
html.native-app .tuner.standalone.screen-metronome .hero{width:100%;height:clamp(112px,17dvh,154px)!important}
html.native-app .tuner.standalone.screen-metronome .metro-page{align-self:stretch;min-height:0!important;max-height:100%!important;overflow-y:auto!important;margin:0 0 22px!important;width:92%!important;padding:8px!important;scrollbar-width:thin}
html.native-app .tuner.standalone.screen-metronome .metro-page .metro-display{height:clamp(56px,10dvh,94px)!important}
html.native-app .tuner.standalone.screen-metronome .app-navigation{align-self:end;margin:0!important;width:100%!important;height:80px!important;position:relative!important;z-index:5}
html.native-app .screen-metronome .metro-page .tempo-controls{min-height:76px!important;height:76px!important;padding:5px!important;gap:6px!important}
html.native-app .screen-metronome .metro-page .tempo-controls>button{min-height:64px!important;height:64px!important;gap:4px!important;font-size:12px!important}
html.native-app .screen-metronome .tap-tempo svg,html.native-app .screen-metronome .metro-start svg{width:23px!important;height:23px!important}
html.native-app .screen-metronome .tempo-value input{font-size:28px!important;line-height:30px!important;height:30px!important}
html.native-app .screen-metronome .tempo-value small{font-size:10px!important}
html.native-app .screen-metronome .tempo-value>div{height:26px!important;margin-top:2px!important;gap:5px!important}
html.native-app .screen-metronome .metro-bottom{margin-top:7px!important;padding:5px!important}
html.native-app .tuner.standalone.screen-metronome .metro-page{justify-self:center!important;margin:0 auto 22px!important}

/* Native settings sheet: anchored to the bottom, only its body scrolls. */
html.native-app .desktop-panel{top:auto!important;bottom:0!important;left:50%!important;transform:translateX(-50%)!important;width:min(100%,600px)!important;height:85dvh!important;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 12px)!important;border-radius:26px 26px 0 0!important;padding-bottom:env(safe-area-inset-bottom,0px)!important;box-sizing:border-box;animation:native-sheet-in .22s ease-out}
html.native-app .desktop-panel>.panel-content{flex:1;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain}
html.native-app .settings-sheet-header{flex-shrink:0!important}
@keyframes native-sheet-in{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){html.native-app .desktop-panel{animation:none}}

/* The measured wheel must never be stretched by flex layout. */
html.native-app .tuner.standalone.screen-accordeur .composition{gap:6px!important;overflow:hidden}
html.native-app .tuner.standalone.screen-accordeur .wheel-section{width:min(94cqw,var(--accordeur-wheel))!important;height:min(94cqw,var(--accordeur-wheel))!important;min-height:0!important;flex:0 0 auto!important;aspect-ratio:1!important;margin:auto!important}
html.native-app .tuner.standalone.screen-accordeur .app-navigation{flex:0 0 80px!important;height:80px!important;margin:0!important}
/* A bounded scroll viewport prevents the settings grid from being clipped on iOS. */
html.native-app .desktop-panel{display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;overflow:hidden!important}
html.native-app .desktop-panel>.panel-content{display:block!important;height:100%!important;max-height:none!important;box-sizing:border-box!important;overflow-x:hidden!important;overflow-y:scroll!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch;padding-bottom:28px!important}
html.native-app .desktop-panel>.panel-content>*+*{margin-top:12px}

/* One fixed navigation baseline shared by every native screen. */
html.native-app .tuner.standalone .composition{padding-bottom:100px!important;box-sizing:border-box!important}
html.native-app .tuner.standalone.screen-metronome .composition{grid-template-rows:auto minmax(0,1fr)!important}
html.native-app .tuner.standalone .app-navigation,
html.native-app .tuner.standalone.screen-metronome .app-navigation,
html.native-app .tuner.standalone.screen-accordeur .app-navigation{position:fixed!important;top:auto!important;bottom:env(safe-area-inset-bottom,0px)!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(100%,560px)!important;height:80px!important;min-height:80px!important;margin:0!important;padding:14px 12px 12px!important;box-sizing:border-box!important;z-index:40!important;background:#f3eefbeF!important}
html.native-app .tuner.standalone .app-navigation,
html.native-app .tuner.standalone.screen-metronome .app-navigation,
html.native-app .tuner.standalone.screen-accordeur .app-navigation{bottom:0!important;height:calc(80px + env(safe-area-inset-bottom,0px))!important;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;background:#f3eefb!important}
.native-settings-sheet{position:fixed!important;inset:auto 0 0!important;margin:0 auto!important;width:min(100%,600px)!important;max-width:100%!important;height:85dvh;max-height:calc(100dvh - env(safe-area-inset-top) - 12px);padding:0 0 env(safe-area-inset-bottom)!important;box-sizing:border-box;background:#f3eefb;color:#4a3392;border:1px solid #c9b8e7;border-radius:26px 26px 0 0;overflow:hidden}
.native-settings-sheet[open]{display:flex;flex-direction:column}
.native-settings-sheet::backdrop{background:#30204766;backdrop-filter:blur(5px)}
.native-settings-scroll{flex:1;min-height:0;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px 20px 28px}
.native-settings-scroll .panel-content{display:grid!important;overflow:visible!important;height:auto!important;max-height:none!important}
html.native-app .screen-metronome .tempo-value input{font-size:23px!important;height:25px!important;line-height:25px!important}
html.native-app .screen-metronome .tempo-value>div{height:25px!important;margin-top:2px!important}
html.native-app .screen-metronome .tempo-controls{align-items:center!important}
.metro-volume-caption{display:flex;align-items:center;gap:6px;line-height:1.3;margin-bottom:4px}.metro-volume-caption svg{flex:none;width:16px!important;height:16px!important}
html.native-app .tuner.standalone.screen-accordeur .compact-mic{position:absolute!important;top:calc(clamp(132px,18svh,170px) + 4px);z-index:5;height:28px!important}
html.native-app .tuner.standalone.screen-accordeur .wheel-section{width:94cqw!important;height:95.8cqw!important;margin:32px auto 0!important}
html.native-app .tuner.standalone.screen-accordeur .hold-card{height:78px!important;min-height:78px!important;margin:0!important;padding:5px 10px!important}
html.native-app .screen-accordeur .hold-head{flex-direction:row!important;justify-content:space-between}.screen-accordeur .hold-head span{font-size:16px!important}
html.native-app .screen-accordeur .hold-advice strong{font-size:14px!important}
.native-settings-sheet .native-settings-scroll{position:absolute!important;top:64px!important;bottom:env(safe-area-inset-bottom,0px)!important;left:0;right:0;height:auto!important;max-height:none!important;overflow-y:scroll!important;touch-action:pan-y!important}
.native-settings-sheet .panel-content{min-height:max-content!important;flex:none!important;position:static!important}
html.native-app .tuner.standalone.screen-accordeur .compact-mic{position:relative!important;inset:auto!important;height:26px!important;margin:0!important}
html.native-app .tuner.standalone.screen-accordeur .wheel-section{margin:0 auto!important}

/* Touch duration and prevent iOS focus magnification. */
.hold-duration{display:grid;gap:12px}.hold-duration-buttons{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:16px}.hold-duration-buttons button{height:48px;border:1px solid #c9b8e7;border-radius:14px;background:#e9e0f7;color:#4a3392;font-size:26px;touch-action:manipulation}.hold-duration-buttons output{text-align:center;float:none;font-size:24px;font-weight:700}.hold-duration input[type=range]{width:100%;height:44px;accent-color:#7c5fcf}.hold-duration-buttons button:disabled{opacity:.4}
html.native-app input:not([type=range]),html.native-app select{font-size:16px!important}
html.native-app:not(.web-app),html.native-app:not(.web-app) body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden!important}
html.native-app:not(.web-app) #root{height:100%;overflow:hidden}
html.native-app:not(.web-app) .tuner.standalone{width:min(100%,560px,calc((100dvh - 310px)/1.03))!important;min-width:0!important;overflow:hidden!important}

.settings-pair:has(input[type=range]){grid-template-columns:1fr}.settings-pair input[type=range]{width:100%;height:44px;accent-color:#7c5fcf}
html.native-app .tuner.standalone.screen-metronome .persistent-metronome{display:flex;align-items:center;justify-content:center;min-height:0;height:100%}
html.native-app .tuner.standalone.screen-metronome .metro-page{align-self:center!important;height:auto!important;margin:0 auto!important}
/* Chiffres lumineux contenus et centrés, de 1 à 6 temps. */
.metro-page .large-beats{position:absolute;inset:0;display:flex;align-items:stretch;justify-content:center;gap:6px;margin:0;padding:12px;box-sizing:border-box;overflow:hidden}
.metro-page .large-beats span{display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;width:auto;height:100%;max-height:100%;box-sizing:border-box;margin:0;padding:0;border-radius:14px;font-size:clamp(20px,4cqw,32px);line-height:1;font-variant-numeric:tabular-nums}

/* Deux activités sous le même en-tête et menu fixe. */
html.native-app .persistent-metronome.metro-with-tabs{display:flex!important;flex-direction:column!important;gap:8px;min-height:0!important;height:100%!important;justify-content:center!important}
html.native-app .persistent-metronome.metro-with-tabs[hidden]{display:none!important}
.metro-tabs{display:flex;flex:none;width:94%;max-width:540px;margin:0 auto;gap:4px;background:#ede5f8;border:1px solid #cdbce9;border-radius:14px;padding:4px}
.metro-tabs button{flex:1;border:0;border-radius:10px;padding:10px 5px;background:transparent;color:#50359a;font:600 13px system-ui;min-height:42px}
.metro-tabs button[aria-selected=true]{background:#7C5FCF;color:white}
.metro-beat-panel{width:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.metro-beat-panel[hidden]{display:none}
html.native-app .persistent-metronome.rhythm-mode{justify-content:flex-start!important;flex:1 1 0!important}
.rhythm-panel{border:0;width:96%;max-width:560px;flex:1 1 0;min-height:0;display:block;background:transparent}
/* Les deux panneaux occupent la même cellule : les onglets ne bougent plus. */
html.native-app .tuner.standalone.screen-metronome .persistent-metronome.metro-with-tabs{
 display:grid!important;grid-template-columns:100%;grid-template-rows:auto auto;align-content:center!important;justify-items:center;gap:8px;flex:1 0 auto!important;height:auto!important;
}
html.native-app .metro-with-tabs .metro-tabs{grid-row:1;grid-column:1}
html.native-app .metro-with-tabs .metro-beat-panel{grid-row:2;grid-column:1;width:100%;display:flex!important}
html.native-app .metro-with-tabs .metro-beat-panel[hidden]{visibility:hidden;pointer-events:none}
html.native-app .metro-with-tabs .rhythm-panel{grid-row:2;grid-column:1;align-self:stretch;justify-self:center;width:96%;height:100%;min-height:0;max-height:100%;z-index:1}

/* En-tête et gabarit validés dans la maquette logo V2. */
html.native-app .mock-brand{top:4px!important;height:calc(100% - 40px)!important;width:100%!important;max-width:100%!important}
html.native-app .mock-logo{filter:none!important;width:auto!important;max-width:100%!important;height:100%!important;margin:0 auto;object-fit:contain!important}
html.native-app .mock-shield,html.native-app .mock-subtitle{display:none!important}

html.native-app .mock-brand{display:flex!important;align-items:center;justify-content:center}
html.native-app .mock-logo{width:88%!important;max-width:490px!important;height:auto!important;max-height:85%!important}

html.native-app .mock-brand{display:block!important;width:88%!important;max-width:490px!important;top:6px!important}
html.native-app .mock-logo{width:100%!important;height:48%!important;max-height:none!important;object-fit:contain!important}
html.native-app .title-flourish{display:block;width:100%;height:52%;overflow:hidden}
html.native-app .mock-brand .mock-shield{display:block!important;top:68%!important;left:calc(50% - 11px)!important;width:22px!important;height:25px!important}
html.native-app .app-navigation::before{display:none!important;content:none!important}

/* Maquette : un gabarit commun aux deux roues. */
html.native-app .tuner.standalone.screen-tuner .composition,
html.native-app .tuner.standalone.screen-accordeur .composition{display:grid!important;grid-template-rows:154px 34px minmax(0,1fr) 112px 100px!important;height:var(--available-height,100dvh)!important;min-height:0!important;padding:0!important;gap:0!important;align-items:center!important;overflow:hidden!important}
html.native-app .tuner.standalone.screen-tuner .hero,
html.native-app .tuner.standalone.screen-accordeur .hero{grid-row:1;grid-column:1;height:154px!important;align-self:start}
html.native-app .tuner.standalone.screen-accordeur .compact-mic{grid-row:2;grid-column:1;justify-self:center;position:relative!important;margin:0!important}
html.native-app .tuner.standalone.screen-tuner .wheel-section,
html.native-app .tuner.standalone.screen-accordeur .wheel-section{grid-row:3;grid-column:1;align-self:center!important;justify-self:center!important;width:var(--shared-wheel)!important;height:var(--shared-wheel)!important;min-height:0!important;max-height:none!important;margin:0!important;order:0!important}
html.native-app .tuner.standalone.screen-tuner .lower-info,
html.native-app .tuner.standalone.screen-accordeur .hold-card{grid-row:4;grid-column:1;align-self:center!important;justify-self:center!important;position:relative!important;inset:auto!important;width:90%!important;margin:0!important;order:0!important}
html.native-app .tuner.standalone.screen-tuner .app-navigation,
html.native-app .tuner.standalone.screen-accordeur .app-navigation{grid-row:5;grid-column:1}

/* Rapprocher les ornements du titre sans déplacer le contenu. */
html.native-app .title-flourish,html.native-app .mock-brand .mock-shield{transform:translateY(-6px)!important}

/* menu-bas-21-09 : dans l'app native, le menu se pose au ras du bord.
   Avant : 80px + toute la zone de la barre d'accueil (34px) reservee dessous.
   Le web (html.native-app.web-app) n'est pas touche. */
html.native-app:not(.web-app) .tuner.standalone .app-navigation,
html.native-app:not(.web-app) .tuner.standalone.screen-metronome .app-navigation,
html.native-app:not(.web-app) .tuner.standalone.screen-accordeur .app-navigation{bottom:0!important;height:86px!important;min-height:86px!important;padding:14px 12px 12px!important}

/* selection-23-09 : on regarde, on n'attrape pas.
   Sans ces lignes, un appui un peu long surligne le dessin du cor ou un nom de note,
   fait apparaitre le menu « Copier / Partager » d'iOS, et l'image peut se traîner.
   Les champs ou l'on ecrit (tempo) gardent la selection, sinon on ne peut plus corriger un chiffre. */
html.native-app:not(.web-app) .tuner,html.native-app:not(.web-app) .desktop-panel,html.native-app:not(.web-app) .native-settings-sheet{-webkit-tap-highlight-color:transparent}
html.native-app:not(.web-app) .tuner,html.native-app:not(.web-app) .tuner *,
html.native-app:not(.web-app) .desktop-panel,html.native-app:not(.web-app) .desktop-panel *,
html.native-app:not(.web-app) .native-settings-sheet,html.native-app:not(.web-app) .native-settings-sheet *{
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.native-app:not(.web-app) .tuner img,html.native-app:not(.web-app) .desktop-panel img,html.native-app:not(.web-app) .native-settings-sheet img{-webkit-user-drag:none}
html.native-app:not(.web-app) .tuner input,html.native-app:not(.web-app) .tuner textarea,html.native-app:not(.web-app) .tuner select,html.native-app:not(.web-app) .tuner [contenteditable],
html.native-app:not(.web-app) .desktop-panel input,html.native-app:not(.web-app) .desktop-panel textarea,html.native-app:not(.web-app) .desktop-panel select,
html.native-app:not(.web-app) .native-settings-sheet input,html.native-app:not(.web-app) .native-settings-sheet textarea,html.native-app:not(.web-app) .native-settings-sheet select{
 -webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default}

/* cor-metronome-23-09 : le balancier prend la place qui reste, au lieu d'une hauteur figee a 94 px.
   Deux garde-fous calcules, pas choisis : un plancher de 120 px pour rester visible sur un petit ecran,
   et une limite de largeur — le cor bat de 30 deg de chaque cote, il lui faut environ 1,43 fois sa
   hauteur en largeur, sinon la pointe sort du cadre en fin de course. 62 % de la largeur = cette limite. */
html.native-app:not(.web-app) .tuner.standalone.screen-metronome .persistent-metronome.metro-with-tabs{height:100%!important;align-content:stretch!important}
html.native-app:not(.web-app) .tuner.standalone.screen-metronome .metro-beat-panel{height:100%!important;min-height:0!important;align-items:stretch!important}
html.native-app:not(.web-app) .tuner.standalone.screen-metronome .metro-page{align-self:stretch!important;height:auto!important;min-height:100%!important;max-height:none!important;display:flex!important;flex-direction:column!important;overflow:visible!important}
html.native-app:not(.web-app) .tuner.standalone.screen-metronome .metro-page .metro-display{height:auto!important;flex:1 1 auto!important;min-height:min(120px,10dvh)!important;max-height:min(62vw,340px)!important}

/* cor-metronome-web-23-09 : meme principe que dans l'app, mais pour le SITE (classe web-app).
   Mesure avant/apres dans un vrai navigateur : hauteur du cor 94 -> 163 px en 1512x982,
   94 -> 172 px en 900x1000, inchangee en 1280x800 (fenetre trop courte, rien ne deborde).
   Plafond min(62vw,320px) : le cor bat de 30 deg de chaque cote, il lui faut 1,43 fois sa hauteur
   en largeur, et la colonne de l'app est limitee a 560 px sur grand ecran. */
html.native-app.web-app .tuner.standalone.screen-metronome .persistent-metronome.metro-with-tabs{align-content:stretch!important}
html.native-app.web-app .tuner.standalone.screen-metronome .metro-beat-panel{height:100%!important;min-height:0!important;align-items:stretch!important}
html.native-app.web-app .tuner.standalone.screen-metronome .metro-page{height:auto!important;min-height:100%!important;max-height:none!important;display:flex!important;flex-direction:column!important;overflow:visible!important}
html.native-app.web-app .tuner.standalone.screen-metronome .metro-page .metro-display{height:auto!important;flex:1 1 auto!important;min-height:min(94px,10dvh)!important;max-height:min(62vw,320px)!important}

/* message-couleur-25-09 — app iPhone uniquement (jamais le site : voir REGLES.md) */
html.native-app:not(.web-app) .tuner.standalone.screen-accordeur .hold-card{height:110px!important;min-height:110px!important;border-top-width:2px!important;border-bottom-width:2px!important}
html.native-app:not(.web-app) .screen-accordeur .hold-advice span{font-size:14px!important;font-weight:600!important}
html.native-app:not(.web-app) .screen-accordeur .hold-card.etat-rien .hold-advice strong,html.native-app:not(.web-app) .screen-accordeur .hold-card.etat-rien .hold-advice span{color:#4A3392!important}
html.native-app:not(.web-app) .screen-accordeur .hold-card.etat-juste .hold-advice strong,html.native-app:not(.web-app) .screen-accordeur .hold-card.etat-juste .hold-advice span{color:#14532D!important}
html.native-app:not(.web-app) .screen-accordeur .hold-card.etat-juste:not(.achieved){border-top-color:#14532D!important;border-bottom-color:#14532D!important;background:#eefaf2cc!important}
html.native-app:not(.web-app) .screen-accordeur .hold-card.etat-bas .hold-advice strong,html.native-app:not(.web-app) .screen-accordeur .hold-card.etat-bas .hold-advice span{color:#B91C1C!important}
html.native-app:not(.web-app) .screen-accordeur .hold-card.etat-bas:not(.achieved){border-top-color:#B91C1C!important;border-bottom-color:#B91C1C!important;background:#fdf0f0cc!important}
html.native-app:not(.web-app) .screen-accordeur .hold-card.etat-haut .hold-advice strong,html.native-app:not(.web-app) .screen-accordeur .hold-card.etat-haut .hold-advice span{color:#B45309!important}
html.native-app:not(.web-app) .screen-accordeur .hold-card.etat-haut:not(.achieved){border-top-color:#B45309!important;border-bottom-color:#B45309!important;background:#fdf5eacc!important}

/* pastille-beta-25-09 — app iPhone uniquement. Enlever BETA dans Prototype.tsx pour la prod. */
html.native-app:not(.web-app) .beta-coin{position:absolute!important;top:calc(8px + env(safe-area-inset-top,0px));right:10px;z-index:45;
  background:#4A3392;color:#fff;font:900 10px Inter,system-ui,sans-serif;letter-spacing:.12em;padding:4px 9px;border-radius:999px;
  pointer-events:none;box-shadow:0 1px 4px #24184544}
/* pastille-beta-site-29-09 — Fred : « sur ordi y'a pas version bêta, mets-le »,
   puis, en voyant l'app posée sur son écran d'accueil : « il faut partout ».
   Elle s'affiche donc sur le site ET dans l'app installée depuis le navigateur,
   à toutes les largeurs. Pour la retirer partout à la vraie mise en production :
   BETA = false dans Prototype.tsx.

   POURQUOI ELLE EST À CET ENDROIT, et pas en haut à droite comme avant.
   Mesuré le 29.09 dans la page en ligne, aux vraies largeurs :
   le bloc du titre fait 300 px de large et descend jusqu'à y=120 ; en haut à droite
   la pastille (89 px) mordait donc le « r » de Tuner sur un téléphone. Elle est
   maintenant posée sur la MÊME LIGNE que le bandeau « Accorder · Fa · La 442,0 »
   (y=121 à 155), à droite de celui-ci, dans un espace qui reste vide à toutes les
   largeurs. Le bandeau d'en-tête mesure 154 px de haut quel que soit l'écran :
   top:128px tombe donc toujours juste, y compris sur ordinateur où la colonne de
   l'app est centrée (contrôlé à 1024 px : pastille en x=693-782, aucun chevauchement).
   Vérifié sans chevauchement à 1024, 430, 414, 393 et 390 px ; en dessous de 390 px
   la pastille est réduite pour ne pas toucher le bandeau. */
html.native-app.web-app .beta-coin{display:block!important;position:absolute!important;
  top:128px!important;right:10px!important;bottom:auto!important;left:auto!important;z-index:45;
  background:#4A3392;color:#fff;font:900 10px Inter,system-ui,sans-serif;letter-spacing:.12em;
  padding:4px 9px;border-radius:999px;pointer-events:none;box-shadow:0 1px 4px #24184544}
@media (max-width:389px){
  html.native-app.web-app .beta-coin{font-size:9px;letter-spacing:.06em;padding:3px 7px}
}

/* icones-relief-site-29-09 — les icônes en relief dans le menu du bas.
   ⚠ VISÉ UNIQUEMENT LE SITE : `html.native-app.web-app`.
   Le build web écrit les deux classes, le build natif n'écrit que `native-app`,
   donc l'app iPhone garde ses icônes actuelles et n'est pas touchée.
   Aucun changement dans Prototype.tsx : le dessin SVG est simplement masqué ici.
   Pour revenir en arrière : supprimer ce bloc. */
html.native-app.web-app .app-navigation button > svg{display:none!important}
html.native-app.web-app .app-navigation button::before{
  content:'';display:block;flex:none;width:26px;height:26px;
  background-position:center;background-size:contain;background-repeat:no-repeat}
html.native-app.web-app .app-navigation button:nth-of-type(1)::before{background-image:url('./icones/tuner_repos_GPT.webp')}
html.native-app.web-app .app-navigation button:nth-of-type(2)::before{background-image:url('./icones/metronome_repos_GPT.webp')}
html.native-app.web-app .app-navigation button:nth-of-type(3)::before{background-image:url('./icones/accordeur_repos_GPT.webp')}
html.native-app.web-app .app-navigation button:nth-of-type(4)::before{background-image:url('./icones/reglages_repos_GPT.webp')}
html.native-app.web-app .app-navigation button:nth-of-type(1)[aria-current=page]::before{background-image:url('./icones/tuner_actif_GPT.webp')}
html.native-app.web-app .app-navigation button:nth-of-type(2)[aria-current=page]::before{background-image:url('./icones/metronome_actif_GPT.webp')}
html.native-app.web-app .app-navigation button:nth-of-type(3)[aria-current=page]::before{background-image:url('./icones/accordeur_actif_GPT.webp')}
html.native-app.web-app .app-navigation button:nth-of-type(4)[aria-current=page]::before{background-image:url('./icones/reglages_actif_GPT.webp')}

/* fond-onglet-actif-29-09 — Fred : « tu m'as pas mis le carré autour de celui qui est sélectionné ».
   Ma maquette montrait un fond arrondi sur l'onglet ouvert ; l'app ne l'avait pas
   (maquette.css le remettait à transparent). On le rétablit, site ET app.
   #e6dcf6 sur la barre #F3EEFB : assez visible sans alourdir. */
.app-navigation button[aria-current=page]{
  background:#e6dcf6!important;border-radius:14px!important;box-shadow:none!important}