/* Cadre du composant clavier — FICHIER GÉNÉRÉ AU BUILD.
   Source : src/_data/clavier.js, via src/clavier-cadre.njk. Ne pas éditer.

   Pourquoi une feuille et pas un style en ligne : le site sert une CSP
   `style-src 'self'` sans `'unsafe-inline'` (voir `_headers`). Mesuré le
   2026-08-30 sous cette CSP, un `style="--col: …"` posé sur chaque touche est
   purement et simplement supprimé — les variables sortent vides, le
   `grid-column` retombe sur `auto` et une touche fait 1088 px de large. La
   géométrie doit donc voyager par une feuille externe.

   Les positions viennent du JSON canonique, jamais d'une écriture à la main :
   si la disposition change, ce fichier change avec elle au build suivant. */

.clavier__cadre {
  grid-template-columns: repeat(60, 1fr);
}

.clavier__touche[data-position="E00"] { --col: 1; --w: 4; --ligne: 1; --h: 1; }
.clavier__touche[data-position="E01"] { --col: 5; --w: 4; --ligne: 1; --h: 1; }
.clavier__touche[data-position="E02"] { --col: 9; --w: 4; --ligne: 1; --h: 1; }
.clavier__touche[data-position="E03"] { --col: 13; --w: 4; --ligne: 1; --h: 1; }
.clavier__touche[data-position="E04"] { --col: 17; --w: 4; --ligne: 1; --h: 1; }
.clavier__touche[data-position="E05"] { --col: 21; --w: 4; --ligne: 1; --h: 1; }
.clavier__touche[data-position="E06"] { --col: 25; --w: 4; --ligne: 1; --h: 1; }
.clavier__touche[data-position="E07"] { --col: 29; --w: 4; --ligne: 1; --h: 1; }
.clavier__touche[data-position="E08"] { --col: 33; --w: 4; --ligne: 1; --h: 1; }
.clavier__touche[data-position="E09"] { --col: 37; --w: 4; --ligne: 1; --h: 1; }
.clavier__touche[data-position="E10"] { --col: 41; --w: 4; --ligne: 1; --h: 1; }
.clavier__touche[data-position="E11"] { --col: 45; --w: 4; --ligne: 1; --h: 1; }
.clavier__touche[data-position="E12"] { --col: 49; --w: 4; --ligne: 1; --h: 1; }
.clavier__touche[data-mod="retour"] { --col: 53; --w: 8; --ligne: 1; --h: 1; }
.clavier__touche[data-mod="tab"] { --col: 1; --w: 6; --ligne: 2; --h: 1; }
.clavier__touche[data-position="D01"] { --col: 7; --w: 4; --ligne: 2; --h: 1; }
.clavier__touche[data-position="D02"] { --col: 11; --w: 4; --ligne: 2; --h: 1; }
.clavier__touche[data-position="D03"] { --col: 15; --w: 4; --ligne: 2; --h: 1; }
.clavier__touche[data-position="D04"] { --col: 19; --w: 4; --ligne: 2; --h: 1; }
.clavier__touche[data-position="D05"] { --col: 23; --w: 4; --ligne: 2; --h: 1; }
.clavier__touche[data-position="D06"] { --col: 27; --w: 4; --ligne: 2; --h: 1; }
.clavier__touche[data-position="D07"] { --col: 31; --w: 4; --ligne: 2; --h: 1; }
.clavier__touche[data-position="D08"] { --col: 35; --w: 4; --ligne: 2; --h: 1; }
.clavier__touche[data-position="D09"] { --col: 39; --w: 4; --ligne: 2; --h: 1; }
.clavier__touche[data-position="D10"] { --col: 43; --w: 4; --ligne: 2; --h: 1; }
.clavier__touche[data-position="D11"] { --col: 47; --w: 4; --ligne: 2; --h: 1; }
.clavier__touche[data-position="D12"] { --col: 51; --w: 4; --ligne: 2; --h: 1; }
.clavier__touche[data-mod="entree"] { --col: 55; --w: 6; --ligne: 2; --h: 2; }
.clavier__touche[data-mod="verrmaj"] { --col: 1; --w: 7; --ligne: 3; --h: 1; }
.clavier__touche[data-position="C01"] { --col: 8; --w: 4; --ligne: 3; --h: 1; }
.clavier__touche[data-position="C02"] { --col: 12; --w: 4; --ligne: 3; --h: 1; }
.clavier__touche[data-position="C03"] { --col: 16; --w: 4; --ligne: 3; --h: 1; }
.clavier__touche[data-position="C04"] { --col: 20; --w: 4; --ligne: 3; --h: 1; }
.clavier__touche[data-position="C05"] { --col: 24; --w: 4; --ligne: 3; --h: 1; }
.clavier__touche[data-position="C06"] { --col: 28; --w: 4; --ligne: 3; --h: 1; }
.clavier__touche[data-position="C07"] { --col: 32; --w: 4; --ligne: 3; --h: 1; }
.clavier__touche[data-position="C08"] { --col: 36; --w: 4; --ligne: 3; --h: 1; }
.clavier__touche[data-position="C09"] { --col: 40; --w: 4; --ligne: 3; --h: 1; }
.clavier__touche[data-position="C10"] { --col: 44; --w: 4; --ligne: 3; --h: 1; }
.clavier__touche[data-position="C11"] { --col: 48; --w: 4; --ligne: 3; --h: 1; }
.clavier__touche[data-position="C12"] { --col: 52; --w: 4; --ligne: 3; --h: 1; }
.clavier__touche[data-mod="maj-g"] { --col: 1; --w: 5; --ligne: 4; --h: 1; }
.clavier__touche[data-position="B00"] { --col: 6; --w: 4; --ligne: 4; --h: 1; }
.clavier__touche[data-position="B01"] { --col: 10; --w: 4; --ligne: 4; --h: 1; }
.clavier__touche[data-position="B02"] { --col: 14; --w: 4; --ligne: 4; --h: 1; }
.clavier__touche[data-position="B03"] { --col: 18; --w: 4; --ligne: 4; --h: 1; }
.clavier__touche[data-position="B04"] { --col: 22; --w: 4; --ligne: 4; --h: 1; }
.clavier__touche[data-position="B05"] { --col: 26; --w: 4; --ligne: 4; --h: 1; }
.clavier__touche[data-position="B06"] { --col: 30; --w: 4; --ligne: 4; --h: 1; }
.clavier__touche[data-position="B07"] { --col: 34; --w: 4; --ligne: 4; --h: 1; }
.clavier__touche[data-position="B08"] { --col: 38; --w: 4; --ligne: 4; --h: 1; }
.clavier__touche[data-position="B09"] { --col: 42; --w: 4; --ligne: 4; --h: 1; }
.clavier__touche[data-position="B10"] { --col: 46; --w: 4; --ligne: 4; --h: 1; }
.clavier__touche[data-mod="maj-d"] { --col: 50; --w: 11; --ligne: 4; --h: 1; }
.clavier__touche[data-position="A03"] { --col: 16; --w: 25; --ligne: 5; --h: 1; }
.clavier__touche[data-mod="altgr"] { --col: 41; --w: 5; --ligne: 5; --h: 1; }
/* Ancre d'une bulle ouverte au chargement (réglages par page, 2026-10-01) :
   le milieu de la touche et ses bords haut et bas, en pour cent du clavier.
   Même source que la grille : aucune position écrite à la main. */
.clavier-bulle--epinglee[data-ancre="E00"] { --x: 3.333; --haut: 0; --bas: 20; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="E01"] { --x: 10; --haut: 0; --bas: 20; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="E02"] { --x: 16.667; --haut: 0; --bas: 20; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="E03"] { --x: 23.333; --haut: 0; --bas: 20; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="E04"] { --x: 30; --haut: 0; --bas: 20; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="E05"] { --x: 36.667; --haut: 0; --bas: 20; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="E06"] { --x: 43.333; --haut: 0; --bas: 20; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="E07"] { --x: 50; --haut: 0; --bas: 20; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="E08"] { --x: 56.667; --haut: 0; --bas: 20; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="E09"] { --x: 63.333; --haut: 0; --bas: 20; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="E10"] { --x: 70; --haut: 0; --bas: 20; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="E11"] { --x: 76.667; --haut: 0; --bas: 20; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="E12"] { --x: 83.333; --haut: 0; --bas: 20; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="D01"] { --x: 13.333; --haut: 20; --bas: 40; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="D02"] { --x: 20; --haut: 20; --bas: 40; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="D03"] { --x: 26.667; --haut: 20; --bas: 40; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="D04"] { --x: 33.333; --haut: 20; --bas: 40; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="D05"] { --x: 40; --haut: 20; --bas: 40; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="D06"] { --x: 46.667; --haut: 20; --bas: 40; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="D07"] { --x: 53.333; --haut: 20; --bas: 40; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="D08"] { --x: 60; --haut: 20; --bas: 40; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="D09"] { --x: 66.667; --haut: 20; --bas: 40; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="D10"] { --x: 73.333; --haut: 20; --bas: 40; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="D11"] { --x: 80; --haut: 20; --bas: 40; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="D12"] { --x: 86.667; --haut: 20; --bas: 40; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="C01"] { --x: 15; --haut: 40; --bas: 60; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="C02"] { --x: 21.667; --haut: 40; --bas: 60; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="C03"] { --x: 28.333; --haut: 40; --bas: 60; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="C04"] { --x: 35; --haut: 40; --bas: 60; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="C05"] { --x: 41.667; --haut: 40; --bas: 60; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="C06"] { --x: 48.333; --haut: 40; --bas: 60; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="C07"] { --x: 55; --haut: 40; --bas: 60; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="C08"] { --x: 61.667; --haut: 40; --bas: 60; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="C09"] { --x: 68.333; --haut: 40; --bas: 60; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="C10"] { --x: 75; --haut: 40; --bas: 60; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="C11"] { --x: 81.667; --haut: 40; --bas: 60; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="C12"] { --x: 88.333; --haut: 40; --bas: 60; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="B00"] { --x: 11.667; --haut: 60; --bas: 80; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="B01"] { --x: 18.333; --haut: 60; --bas: 80; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="B02"] { --x: 25; --haut: 60; --bas: 80; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="B03"] { --x: 31.667; --haut: 60; --bas: 80; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="B04"] { --x: 38.333; --haut: 60; --bas: 80; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="B05"] { --x: 45; --haut: 60; --bas: 80; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="B06"] { --x: 51.667; --haut: 60; --bas: 80; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="B07"] { --x: 58.333; --haut: 60; --bas: 80; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="B08"] { --x: 65; --haut: 60; --bas: 80; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="B09"] { --x: 71.667; --haut: 60; --bas: 80; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="B10"] { --x: 78.333; --haut: 60; --bas: 80; --demi: 3.333; }
.clavier-bulle--epinglee[data-ancre="A03"] { --x: 45.833; --haut: 80; --bas: 100; --demi: 20.833; }