/* ========================================================================== TCHIIRO RADIO PRIVÉE — DÉMONSTRATION ========================================================================== Feuille dédiée à la démo, ÉCRITE À PARTIR DU SITE TCHIIRO.COM : mêmes couleurs (relevées dans le :root du site), mêmes polices (Fraunces + Inter, les mêmes fichiers), même anneau multicolore, même braise de bouton, même trame de points, mêmes rayons et la même courbe de mouvement. Rien n'est inventé ici : chaque valeur vient de assets/css/style.css du site principal. Ce dossier est INDÉPENDANT du site : il ne touche à aucun de ses fichiers et n'est référencé nulle part dans sa navigation. ========================================================================== */ @font-face { font-family: 'Fraunces'; src: url('fonts/fraunces-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } /* L'angle des anneaux, animable comme sur le site. Le repli 0deg est indispensable : sans lui, un navigateur sans @property ferait disparaître tous les anneaux (leçon du site, 13/08). */ @property --tch-angle { syntax: ''; initial-value: 0deg; inherits: false; } :root { --tch-angle: 0deg; /* Palette : copie exacte du site */ --tch-bg: #040404; --tch-surface: #121212; --tch-text: #EAE5DE; --tch-muted: #A9A3A0; --tch-rose: #FE0178; --tch-rose-texte: #FF6FA8; --tch-rose-titre: #FF8CBA; --tch-rouge-fonce: #9E1B2F; --pal-rouille: #815018; --pal-grenat: #752A2E; --pal-bordeaux: #712532; --pal-prune: #671E33; --pal-or-fond: #8C5617; --pal-prune-fond: #A8183F; --pal-rouille-clair: #E19947; --pal-grenat-clair: #D84F56; --pal-bordeaux-clair: #DD4A63; --pal-prune-clair: #E34472; --pal-rouille-vif: #BA701C; --pal-prune-vif: #C93A62; --tch-radius-sm: 10px; --tch-radius-lg: 24px; --tch-ease: cubic-bezier(.2,.7,.2,1); --font-display: 'Fraunces', Georgia, serif; --font-ui: 'Inter', -apple-system, sans-serif; /* les masques des grandes ondes, declares UNE SEULE FOIS et partages par -webkit-mask-image et mask-image (audit 18/08 : ils etaient ecrits deux fois, soit ~22 Ko inutiles). */ --onde-barres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='48'%3E%3Crect width='2.3' height='48' fill='%23000'/%3E%3C/svg%3E"); --onde-fondu: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); --onde-forme-rose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='48' viewBox='0 0 1200 48'%3E%3Cpolygon fill='%23000' points='0,16.7 3,15.5 6,14.4 9,13.6 12,13.1 15,12.9 18,12.9 21,13.1 24,13.4 27,13.8 30,14.3 33,14.7 36,14.9 39,15.1 42,15.1 45,15.0 48,14.8 51,14.4 54,14.1 57,13.7 60,13.4 63,13.3 66,13.2 69,13.3 72,13.5 75,13.9 78,14.3 81,14.6 84,15.0 87,15.2 90,15.3 93,15.1 96,14.7 99,14.1 102,13.3 105,12.4 108,11.3 111,10.2 114,9.1 117,8.1 120,7.3 123,6.7 126,6.3 129,6.1 132,6.1 135,6.4 138,6.8 141,7.3 144,7.8 147,8.3 150,8.8 153,9.2 156,9.6 159,9.9 162,10.1 165,10.4 168,10.7 171,11.2 174,11.8 177,12.6 180,13.7 183,15.0 186,16.5 189,18.2 192,20.1 195,22.0 198,22.0 201,20.2 204,18.4 207,16.8 210,15.5 213,14.4 216,13.5 219,12.9 222,12.4 225,12.1 228,11.9 231,11.7 234,11.4 237,11.1 240,10.8 243,10.3 246,9.8 249,9.3 252,8.7 255,8.3 258,8.0 261,7.8 264,7.9 267,8.1 270,8.6 273,9.3 276,10.1 279,11.1 282,12.0 285,13.0 288,13.8 291,14.5 294,15.0 297,15.3 300,15.3 303,15.1 306,14.8 309,14.3 312,13.7 315,13.1 318,12.6 321,12.2 324,11.9 327,11.7 330,11.7 333,11.9 336,12.1 339,12.3 342,12.6 345,12.8 348,12.9 351,12.8 354,12.7 357,12.4 360,12.0 363,11.6 366,11.2 369,10.8 372,10.6 375,10.6 378,10.8 381,11.3 384,12.1 387,13.2 390,14.4 393,15.9 396,17.5 399,19.2 402,20.9 405,22.5 408,22.0 411,20.7 414,19.5 417,18.4 420,17.5 423,16.7 426,15.9 429,15.1 432,14.3 435,13.4 438,12.4 441,11.3 444,10.1 447,8.9 450,7.7 453,6.5 456,5.4 459,4.6 462,3.9 465,3.6 468,3.5 471,3.7 474,4.2 477,4.9 480,5.7 483,6.7 486,7.7 489,8.7 492,9.6 495,10.4 498,11.0 501,11.4 504,11.7 507,11.9 510,12.0 513,12.1 516,12.3 519,12.5 522,12.8 525,13.2 528,13.8 531,14.5 534,15.3 537,16.0 540,16.8 543,17.4 546,17.9 549,18.3 552,18.4 555,18.3 558,17.9 561,17.5 564,16.9 567,16.2 570,15.5 573,15.0 576,14.5 579,14.3 582,14.3 585,14.5 588,15.0 591,15.6 594,16.4 597,17.4 600,18.4 603,19.3 606,20.3 609,21.1 612,21.9 615,22.5 618,22.9 621,22.4 624,21.8 627,21.2 630,20.5 633,19.7 636,18.7 639,17.4 642,16.1 645,14.5 648,12.9 651,11.1 654,9.4 657,7.8 660,6.4 663,5.2 666,4.2 669,3.5 672,3.1 675,3.0 678,3.0 681,3.3 684,3.7 687,4.2 690,4.6 693,5.1 696,5.4 699,5.7 702,6.0 705,6.1 708,6.3 711,6.5 714,6.8 717,7.2 720,7.8 723,8.6 726,9.6 729,10.7 732,12.0 735,13.4 738,14.9 741,16.3 744,17.6 747,18.8 750,19.7 753,20.5 756,20.9 759,21.1 762,21.2 765,21.0 768,20.8 771,20.5 774,20.2 777,20.0 780,19.9 783,20.0 786,20.2 789,20.5 792,21.0 795,21.5 798,22.1 801,22.6 804,23.0 807,22.7 810,22.5 813,22.5 816,22.6 819,22.7 822,22.9 825,23.0 828,22.9 831,23.0 834,22.7 837,22.2 840,21.4 843,20.3 846,19.1 849,17.7 852,16.1 855,14.6 858,13.0 861,11.5 864,10.2 867,9.1 870,8.1 873,7.4 876,6.8 879,6.4 882,6.2 885,5.9 888,5.7 891,5.5 894,5.2 897,4.8 900,4.4 903,3.9 906,3.4 909,3.0 912,2.7 915,2.5 918,2.6 921,2.9 924,3.5 927,4.4 930,5.5 933,6.8 936,8.4 939,10.0 942,11.6 945,13.3 948,14.8 951,16.1 954,17.3 957,18.3 960,19.1 963,19.7 966,20.2 969,20.7 972,21.1 975,21.5 978,22.1 981,22.7 984,22.6 987,21.8 990,20.9 993,20.0 996,19.2 999,18.4 1002,17.7 1005,17.2 1008,17.0 1011,16.9 1014,17.1 1017,17.5 1020,18.0 1023,18.6 1026,19.2 1029,19.8 1032,20.2 1035,20.5 1038,20.5 1041,20.4 1044,20.0 1047,19.4 1050,18.6 1053,17.7 1056,16.8 1059,15.8 1062,14.9 1065,14.2 1068,13.5 1071,13.0 1074,12.6 1077,12.3 1080,12.0 1083,11.7 1086,11.4 1089,11.0 1092,10.5 1095,9.9 1098,9.1 1101,8.1 1104,7.1 1107,6.0 1110,5.0 1113,4.0 1116,3.2 1119,2.7 1122,2.3 1125,2.3 1128,2.6 1131,3.2 1134,4.0 1137,5.0 1140,6.2 1143,7.4 1146,8.6 1149,9.9 1152,11.0 1155,12.0 1158,12.9 1161,13.8 1164,14.5 1167,15.3 1170,16.0 1173,16.9 1176,17.8 1179,18.9 1182,20.2 1185,21.6 1188,22.9 1191,21.3 1194,19.7 1197,18.2 1200,16.7 1200,31.3 1197,29.8 1194,28.3 1191,26.7 1188,25.1 1185,26.4 1182,27.8 1179,29.1 1176,30.2 1173,31.1 1170,32.0 1167,32.7 1164,33.5 1161,34.2 1158,35.1 1155,36.0 1152,37.0 1149,38.1 1146,39.4 1143,40.6 1140,41.8 1137,43.0 1134,44.0 1131,44.8 1128,45.4 1125,45.7 1122,45.7 1119,45.3 1116,44.8 1113,44.0 1110,43.0 1107,42.0 1104,40.9 1101,39.9 1098,38.9 1095,38.1 1092,37.5 1089,37.0 1086,36.6 1083,36.3 1080,36.0 1077,35.7 1074,35.4 1071,35.0 1068,34.5 1065,33.8 1062,33.1 1059,32.2 1056,31.2 1053,30.3 1050,29.4 1047,28.6 1044,28.0 1041,27.6 1038,27.5 1035,27.5 1032,27.8 1029,28.2 1026,28.8 1023,29.4 1020,30.0 1017,30.5 1014,30.9 1011,31.1 1008,31.0 1005,30.8 1002,30.3 999,29.6 996,28.8 993,28.0 990,27.1 987,26.2 984,25.4 981,25.3 978,25.9 975,26.5 972,26.9 969,27.3 966,27.8 963,28.3 960,28.9 957,29.7 954,30.7 951,31.9 948,33.2 945,34.7 942,36.4 939,38.0 936,39.6 933,41.2 930,42.5 927,43.6 924,44.5 921,45.1 918,45.4 915,45.5 912,45.3 909,45.0 906,44.6 903,44.1 900,43.6 897,43.2 894,42.8 891,42.5 888,42.3 885,42.1 882,41.8 879,41.6 876,41.2 873,40.6 870,39.9 867,38.9 864,37.8 861,36.5 858,35.0 855,33.4 852,31.9 849,30.3 846,28.9 843,27.7 840,26.6 837,25.8 834,25.3 831,25.0 828,25.1 825,25.0 822,25.1 819,25.3 816,25.4 813,25.5 810,25.5 807,25.3 804,25.0 801,25.4 798,25.9 795,26.5 792,27.0 789,27.5 786,27.8 783,28.0 780,28.1 777,28.0 774,27.8 771,27.5 768,27.2 765,27.0 762,26.8 759,26.9 756,27.1 753,27.5 750,28.3 747,29.2 744,30.4 741,31.7 738,33.1 735,34.6 732,36.0 729,37.3 726,38.4 723,39.4 720,40.2 717,40.8 714,41.2 711,41.5 708,41.7 705,41.9 702,42.0 699,42.3 696,42.6 693,42.9 690,43.4 687,43.8 684,44.3 681,44.7 678,45.0 675,45.0 672,44.9 669,44.5 666,43.8 663,42.8 660,41.6 657,40.2 654,38.6 651,36.9 648,35.1 645,33.5 642,31.9 639,30.6 636,29.3 633,28.3 630,27.5 627,26.8 624,26.2 621,25.6 618,25.1 615,25.5 612,26.1 609,26.9 606,27.7 603,28.7 600,29.6 597,30.6 594,31.6 591,32.4 588,33.0 585,33.5 582,33.7 579,33.7 576,33.5 573,33.0 570,32.5 567,31.8 564,31.1 561,30.5 558,30.1 555,29.7 552,29.6 549,29.7 546,30.1 543,30.6 540,31.2 537,32.0 534,32.7 531,33.5 528,34.2 525,34.8 522,35.2 519,35.5 516,35.7 513,35.9 510,36.0 507,36.1 504,36.3 501,36.6 498,37.0 495,37.6 492,38.4 489,39.3 486,40.3 483,41.3 480,42.3 477,43.1 474,43.8 471,44.3 468,44.5 465,44.4 462,44.1 459,43.4 456,42.6 453,41.5 450,40.3 447,39.1 444,37.9 441,36.7 438,35.6 435,34.6 432,33.7 429,32.9 426,32.1 423,31.3 420,30.5 417,29.6 414,28.5 411,27.3 408,26.0 405,25.5 402,27.1 399,28.8 396,30.5 393,32.1 390,33.6 387,34.8 384,35.9 381,36.7 378,37.2 375,37.4 372,37.4 369,37.2 366,36.8 363,36.4 360,36.0 357,35.6 354,35.3 351,35.2 348,35.1 345,35.2 342,35.4 339,35.7 336,35.9 333,36.1 330,36.3 327,36.3 324,36.1 321,35.8 318,35.4 315,34.9 312,34.3 309,33.7 306,33.2 303,32.9 300,32.7 297,32.7 294,33.0 291,33.5 288,34.2 285,35.0 282,36.0 279,36.9 276,37.9 273,38.7 270,39.4 267,39.9 264,40.1 261,40.2 258,40.0 255,39.7 252,39.3 249,38.7 246,38.2 243,37.7 240,37.2 237,36.9 234,36.6 231,36.3 228,36.1 225,35.9 222,35.6 219,35.1 216,34.5 213,33.6 210,32.5 207,31.2 204,29.6 201,27.8 198,26.0 195,26.0 192,27.9 189,29.8 186,31.5 183,33.0 180,34.3 177,35.4 174,36.2 171,36.8 168,37.3 165,37.6 162,37.9 159,38.1 156,38.4 153,38.8 150,39.2 147,39.7 144,40.2 141,40.7 138,41.2 135,41.6 132,41.9 129,41.9 126,41.7 123,41.3 120,40.7 117,39.9 114,38.9 111,37.8 108,36.7 105,35.6 102,34.7 99,33.9 96,33.3 93,32.9 90,32.7 87,32.8 84,33.0 81,33.4 78,33.7 75,34.1 72,34.5 69,34.7 66,34.8 63,34.7 60,34.6 57,34.3 54,33.9 51,33.6 48,33.2 45,33.0 42,32.9 39,32.9 36,33.1 33,33.3 30,33.7 27,34.2 24,34.6 21,34.9 18,35.1 15,35.1 12,34.9 9,34.4 6,33.6 3,32.5 0,31.3'/%3E%3C/svg%3E"); --onde-forme-cuivre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='48' viewBox='0 0 1200 48'%3E%3Cpolygon fill='%23000' points='0,8.8 3,9.7 6,10.7 9,11.9 12,13.1 15,14.5 18,15.9 21,17.5 24,19.2 27,20.9 30,22.8 33,20.9 36,18.8 39,16.7 42,14.6 45,12.4 48,10.1 51,7.8 54,5.4 57,3.1 60,0.8 63,2.8 66,4.9 69,7.1 72,9.3 75,11.6 78,13.8 81,16.1 84,18.3 87,20.6 90,22.8 93,20.6 96,18.5 99,16.4 102,14.3 105,12.4 108,10.5 111,8.7 114,6.9 117,5.3 120,3.8 123,6.1 126,8.3 129,10.5 132,12.5 135,14.5 138,16.4 141,18.1 144,19.8 147,21.3 150,22.8 153,21.5 156,20.2 159,19.1 162,18.0 165,17.1 168,16.3 171,15.5 174,14.9 177,14.3 180,13.8 183,15.1 186,16.3 189,17.3 192,18.3 195,19.2 198,20.1 201,20.8 204,21.5 207,22.2 210,22.8 213,22.2 216,21.7 219,21.1 222,20.6 225,20.1 228,19.5 231,18.9 234,18.3 237,17.6 240,16.9 243,17.3 246,17.8 249,18.2 252,18.7 255,19.2 258,19.8 261,20.5 264,21.2 267,21.9 270,22.8 273,21.9 276,20.8 279,19.7 282,18.5 285,17.1 288,15.7 291,14.1 294,12.5 297,10.7 300,8.8 303,9.7 306,10.7 309,11.9 312,13.1 315,14.5 318,15.9 321,17.5 324,19.2 327,20.9 330,22.8 333,20.9 336,18.8 339,16.7 342,14.6 345,12.4 348,10.1 351,7.8 354,5.4 357,3.1 360,0.8 363,2.8 366,4.9 369,7.1 372,9.3 375,11.6 378,13.8 381,16.1 384,18.3 387,20.6 390,22.8 393,20.6 396,18.5 399,16.4 402,14.3 405,12.4 408,10.5 411,8.7 414,6.9 417,5.3 420,3.8 423,6.1 426,8.3 429,10.5 432,12.5 435,14.5 438,16.4 441,18.1 444,19.8 447,21.3 450,22.8 453,21.5 456,20.2 459,19.1 462,18.0 465,17.1 468,16.3 471,15.5 474,14.9 477,14.3 480,13.8 483,15.1 486,16.3 489,17.3 492,18.3 495,19.2 498,20.1 501,20.8 504,21.5 507,22.2 510,22.8 513,22.2 516,21.7 519,21.1 522,20.6 525,20.1 528,19.5 531,18.9 534,18.3 537,17.6 540,16.9 543,17.3 546,17.8 549,18.2 552,18.7 555,19.2 558,19.8 561,20.5 564,21.2 567,21.9 570,22.8 573,21.9 576,20.8 579,19.7 582,18.5 585,17.1 588,15.7 591,14.1 594,12.5 597,10.7 600,8.8 603,9.7 606,10.7 609,11.9 612,13.1 615,14.5 618,15.9 621,17.5 624,19.2 627,20.9 630,22.8 633,20.9 636,18.8 639,16.7 642,14.6 645,12.4 648,10.1 651,7.8 654,5.4 657,3.1 660,0.8 663,2.8 666,4.9 669,7.1 672,9.3 675,11.6 678,13.8 681,16.1 684,18.3 687,20.6 690,22.8 693,20.6 696,18.5 699,16.4 702,14.3 705,12.4 708,10.5 711,8.7 714,6.9 717,5.3 720,3.8 723,6.1 726,8.3 729,10.5 732,12.5 735,14.5 738,16.4 741,18.1 744,19.8 747,21.3 750,22.8 753,21.5 756,20.2 759,19.1 762,18.0 765,17.1 768,16.3 771,15.5 774,14.9 777,14.3 780,13.8 783,15.1 786,16.3 789,17.3 792,18.3 795,19.2 798,20.1 801,20.8 804,21.5 807,22.2 810,22.8 813,22.2 816,21.7 819,21.1 822,20.6 825,20.1 828,19.5 831,18.9 834,18.3 837,17.6 840,16.9 843,17.3 846,17.8 849,18.2 852,18.7 855,19.2 858,19.8 861,20.5 864,21.2 867,21.9 870,22.8 873,21.9 876,20.8 879,19.7 882,18.5 885,17.1 888,15.7 891,14.1 894,12.5 897,10.7 900,8.8 903,9.7 906,10.7 909,11.9 912,13.1 915,14.5 918,15.9 921,17.5 924,19.2 927,20.9 930,22.8 933,20.9 936,18.8 939,16.7 942,14.6 945,12.4 948,10.1 951,7.8 954,5.4 957,3.1 960,0.8 963,2.8 966,4.9 969,7.1 972,9.3 975,11.6 978,13.8 981,16.1 984,18.3 987,20.6 990,22.8 993,20.6 996,18.5 999,16.4 1002,14.3 1005,12.4 1008,10.5 1011,8.7 1014,6.9 1017,5.3 1020,3.8 1023,6.1 1026,8.3 1029,10.5 1032,12.5 1035,14.5 1038,16.4 1041,18.1 1044,19.8 1047,21.3 1050,22.8 1053,21.5 1056,20.2 1059,19.1 1062,18.0 1065,17.1 1068,16.3 1071,15.5 1074,14.9 1077,14.3 1080,13.8 1083,15.1 1086,16.3 1089,17.3 1092,18.3 1095,19.2 1098,20.1 1101,20.8 1104,21.5 1107,22.2 1110,22.8 1113,22.2 1116,21.7 1119,21.1 1122,20.6 1125,20.1 1128,19.5 1131,18.9 1134,18.3 1137,17.6 1140,16.9 1143,17.3 1146,17.8 1149,18.2 1152,18.7 1155,19.2 1158,19.8 1161,20.5 1164,21.2 1167,21.9 1170,22.8 1173,21.9 1176,20.8 1179,19.7 1182,18.5 1185,17.1 1188,15.7 1191,14.1 1194,12.5 1197,10.7 1200,8.8 1200,39.2 1197,37.3 1194,35.5 1191,33.9 1188,32.3 1185,30.9 1182,29.5 1179,28.3 1176,27.2 1173,26.1 1170,25.2 1167,26.1 1164,26.8 1161,27.5 1158,28.2 1155,28.8 1152,29.3 1149,29.8 1146,30.2 1143,30.7 1140,31.1 1137,30.4 1134,29.7 1131,29.1 1128,28.5 1125,27.9 1122,27.4 1119,26.9 1116,26.3 1113,25.8 1110,25.2 1107,25.8 1104,26.5 1101,27.2 1098,27.9 1095,28.8 1092,29.7 1089,30.7 1086,31.7 1083,32.9 1080,34.2 1077,33.7 1074,33.1 1071,32.5 1068,31.7 1065,30.9 1062,30.0 1059,28.9 1056,27.8 1053,26.5 1050,25.2 1047,26.7 1044,28.2 1041,29.9 1038,31.6 1035,33.5 1032,35.5 1029,37.5 1026,39.7 1023,41.9 1020,44.2 1017,42.7 1014,41.1 1011,39.3 1008,37.5 1005,35.6 1002,33.7 999,31.6 996,29.5 993,27.4 990,25.2 987,27.4 984,29.7 981,31.9 978,34.2 975,36.5 972,38.7 969,40.9 966,43.1 963,45.2 960,47.2 957,44.9 954,42.6 951,40.2 948,37.9 945,35.6 942,33.4 939,31.3 936,29.2 933,27.1 930,25.2 927,27.1 924,28.8 921,30.5 918,32.1 915,33.5 912,34.9 909,36.1 906,37.3 903,38.3 900,39.2 897,37.3 894,35.5 891,33.9 888,32.3 885,30.9 882,29.5 879,28.3 876,27.2 873,26.1 870,25.2 867,26.1 864,26.8 861,27.5 858,28.2 855,28.8 852,29.3 849,29.8 846,30.2 843,30.7 840,31.1 837,30.4 834,29.7 831,29.1 828,28.5 825,27.9 822,27.4 819,26.9 816,26.3 813,25.8 810,25.2 807,25.8 804,26.5 801,27.2 798,27.9 795,28.8 792,29.7 789,30.7 786,31.7 783,32.9 780,34.2 777,33.7 774,33.1 771,32.5 768,31.7 765,30.9 762,30.0 759,28.9 756,27.8 753,26.5 750,25.2 747,26.7 744,28.2 741,29.9 738,31.6 735,33.5 732,35.5 729,37.5 726,39.7 723,41.9 720,44.2 717,42.7 714,41.1 711,39.3 708,37.5 705,35.6 702,33.7 699,31.6 696,29.5 693,27.4 690,25.2 687,27.4 684,29.7 681,31.9 678,34.2 675,36.5 672,38.7 669,40.9 666,43.1 663,45.2 660,47.2 657,44.9 654,42.6 651,40.2 648,37.9 645,35.6 642,33.4 639,31.3 636,29.2 633,27.1 630,25.2 627,27.1 624,28.8 621,30.5 618,32.1 615,33.5 612,34.9 609,36.1 606,37.3 603,38.3 600,39.2 597,37.3 594,35.5 591,33.9 588,32.3 585,30.9 582,29.5 579,28.3 576,27.2 573,26.1 570,25.2 567,26.1 564,26.8 561,27.5 558,28.2 555,28.8 552,29.3 549,29.8 546,30.2 543,30.7 540,31.1 537,30.4 534,29.7 531,29.1 528,28.5 525,27.9 522,27.4 519,26.9 516,26.3 513,25.8 510,25.2 507,25.8 504,26.5 501,27.2 498,27.9 495,28.8 492,29.7 489,30.7 486,31.7 483,32.9 480,34.2 477,33.7 474,33.1 471,32.5 468,31.7 465,30.9 462,30.0 459,28.9 456,27.8 453,26.5 450,25.2 447,26.7 444,28.2 441,29.9 438,31.6 435,33.5 432,35.5 429,37.5 426,39.7 423,41.9 420,44.2 417,42.7 414,41.1 411,39.3 408,37.5 405,35.6 402,33.7 399,31.6 396,29.5 393,27.4 390,25.2 387,27.4 384,29.7 381,31.9 378,34.2 375,36.5 372,38.7 369,40.9 366,43.1 363,45.2 360,47.2 357,44.9 354,42.6 351,40.2 348,37.9 345,35.6 342,33.4 339,31.3 336,29.2 333,27.1 330,25.2 327,27.1 324,28.8 321,30.5 318,32.1 315,33.5 312,34.9 309,36.1 306,37.3 303,38.3 300,39.2 297,37.3 294,35.5 291,33.9 288,32.3 285,30.9 282,29.5 279,28.3 276,27.2 273,26.1 270,25.2 267,26.1 264,26.8 261,27.5 258,28.2 255,28.8 252,29.3 249,29.8 246,30.2 243,30.7 240,31.1 237,30.4 234,29.7 231,29.1 228,28.5 225,27.9 222,27.4 219,26.9 216,26.3 213,25.8 210,25.2 207,25.8 204,26.5 201,27.2 198,27.9 195,28.8 192,29.7 189,30.7 186,31.7 183,32.9 180,34.2 177,33.7 174,33.1 171,32.5 168,31.7 165,30.9 162,30.0 159,28.9 156,27.8 153,26.5 150,25.2 147,26.7 144,28.2 141,29.9 138,31.6 135,33.5 132,35.5 129,37.5 126,39.7 123,41.9 120,44.2 117,42.7 114,41.1 111,39.3 108,37.5 105,35.6 102,33.7 99,31.6 96,29.5 93,27.4 90,25.2 87,27.4 84,29.7 81,31.9 78,34.2 75,36.5 72,38.7 69,40.9 66,43.1 63,45.2 60,47.2 57,44.9 54,42.6 51,40.2 48,37.9 45,35.6 42,33.4 39,31.3 36,29.2 33,27.1 30,25.2 27,27.1 24,28.8 21,30.5 18,32.1 15,33.5 12,34.9 9,36.1 6,37.3 3,38.3 0,39.2'/%3E%3C/svg%3E"); --onde-forme-or: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='48' viewBox='0 0 1200 48'%3E%3Cpolygon fill='%23000' points='0,14.4 3,13.3 6,12.3 9,11.2 12,10.2 15,9.2 18,8.3 21,7.4 24,6.5 27,5.7 30,4.9 33,4.2 36,3.6 39,3.0 42,2.5 45,2.1 48,1.7 51,1.4 54,1.2 57,1.1 60,1.0 63,1.0 66,1.1 69,1.3 72,1.6 75,1.9 78,2.3 81,2.8 84,3.3 87,4.0 90,4.6 93,5.4 96,6.1 99,7.0 102,7.9 105,8.8 108,9.7 111,10.7 114,11.7 117,12.8 120,13.8 123,14.9 126,16.0 129,17.0 132,18.1 135,19.1 138,20.1 141,21.1 144,22.1 147,23.0 150,22.1 153,21.2 156,20.4 159,19.6 162,18.9 165,18.2 168,17.6 171,17.1 174,16.6 177,16.2 180,15.8 183,15.5 186,15.3 189,15.2 192,15.1 195,15.0 198,15.0 201,15.1 204,15.3 207,15.4 210,15.7 213,16.0 216,16.3 219,16.7 222,17.1 225,17.5 228,18.0 231,18.5 234,19.0 237,19.5 240,20.0 243,20.6 246,21.1 249,21.6 252,22.1 255,22.6 258,22.9 261,22.4 264,22.0 267,21.6 270,21.3 273,21.0 276,20.7 279,20.5 282,20.4 285,20.3 288,20.2 291,20.2 294,20.3 297,20.4 300,20.6 303,20.9 306,21.2 309,21.5 312,21.9 315,22.4 318,22.9 321,22.5 324,21.9 327,21.2 330,20.5 333,19.7 336,18.9 339,18.1 342,17.3 345,16.4 348,15.6 351,14.7 354,13.8 357,12.9 360,12.0 363,11.1 366,10.3 369,9.4 372,8.6 375,7.9 378,7.1 381,6.4 384,5.8 387,5.2 390,4.6 393,4.1 396,3.7 399,3.3 402,3.1 405,2.8 408,2.7 411,2.6 414,2.6 417,2.7 420,2.8 423,3.1 426,3.4 429,3.8 432,4.2 435,4.7 438,5.3 441,6.0 444,6.7 447,7.5 450,8.4 453,9.3 456,10.3 459,11.3 462,12.3 465,13.4 468,14.5 471,15.6 474,16.8 477,18.0 480,19.2 483,20.3 486,21.5 489,22.7 492,22.1 495,21.0 498,19.8 501,18.8 504,17.7 507,16.7 510,15.7 513,14.8 516,13.9 519,13.1 522,12.3 525,11.6 528,10.9 531,10.4 534,9.9 537,9.4 540,9.0 543,8.8 546,8.5 549,8.4 552,8.3 555,8.3 558,8.3 561,8.4 564,8.6 567,8.8 570,9.1 573,9.5 576,9.9 579,10.3 582,10.8 585,11.3 588,11.9 591,12.5 594,13.1 597,13.7 600,14.4 603,15.0 606,15.7 609,16.3 612,17.0 615,17.6 618,18.2 621,18.8 624,19.4 627,20.0 630,20.5 633,20.9 636,21.4 639,21.8 642,22.1 645,22.4 648,22.6 651,22.8 654,22.9 657,23.0 660,23.0 663,23.0 666,22.9 669,22.7 672,22.5 675,22.2 678,21.9 681,21.6 684,21.1 687,20.7 690,20.2 693,19.6 696,19.1 699,18.5 702,17.9 705,17.2 708,16.5 711,15.9 714,15.2 717,14.5 720,13.8 723,13.2 726,12.5 729,11.9 732,11.3 735,10.7 738,10.1 741,9.6 744,9.2 747,8.8 750,8.4 753,8.1 756,7.8 759,7.6 762,7.5 765,7.4 768,7.4 771,7.5 774,7.7 777,7.9 780,8.2 783,8.5 786,8.9 789,9.5 792,10.0 795,10.7 798,11.4 801,12.1 804,12.9 807,13.8 810,14.8 813,15.7 816,16.8 819,17.8 822,18.9 825,20.0 828,21.2 831,22.4 834,22.4 837,21.2 840,20.0 843,18.9 846,17.7 849,16.5 852,15.3 855,14.2 858,13.1 861,12.1 864,11.0 867,10.1 870,9.1 873,8.3 876,7.5 879,6.7 882,6.0 885,5.4 888,4.8 891,4.4 894,4.0 897,3.6 900,3.4 903,3.2 906,3.1 909,3.1 912,3.1 915,3.3 918,3.5 921,3.7 924,4.1 927,4.5 930,4.9 933,5.4 936,6.0 939,6.6 942,7.3 945,8.0 948,8.8 951,9.5 954,10.3 957,11.2 960,12.0 963,12.9 966,13.7 969,14.6 972,15.4 975,16.3 978,17.1 981,17.9 984,18.7 987,19.5 990,20.2 993,20.9 996,21.5 999,22.1 1002,22.7 1005,22.8 1008,22.4 1011,22.0 1014,21.7 1017,21.4 1020,21.2 1023,21.0 1026,20.9 1029,20.9 1032,20.9 1035,20.9 1038,21.1 1041,21.2 1044,21.5 1047,21.7 1050,22.1 1053,22.4 1056,22.8 1059,22.8 1062,22.3 1065,21.8 1068,21.3 1071,20.8 1074,20.2 1077,19.7 1080,19.2 1083,18.6 1086,18.1 1089,17.6 1092,17.1 1095,16.6 1098,16.2 1101,15.8 1104,15.4 1107,15.0 1110,14.8 1113,14.5 1116,14.3 1119,14.2 1122,14.1 1125,14.1 1128,14.1 1131,14.2 1134,14.4 1137,14.7 1140,15.0 1143,15.3 1146,15.7 1149,16.2 1152,16.8 1155,17.4 1158,18.1 1161,18.8 1164,19.6 1167,20.4 1170,21.3 1173,22.2 1176,22.8 1179,21.8 1182,20.8 1185,19.8 1188,18.7 1191,17.6 1194,16.6 1197,15.5 1200,14.4 1200,33.6 1197,32.5 1194,31.4 1191,30.4 1188,29.3 1185,28.2 1182,27.2 1179,26.2 1176,25.2 1173,25.8 1170,26.7 1167,27.6 1164,28.4 1161,29.2 1158,29.9 1155,30.6 1152,31.2 1149,31.8 1146,32.3 1143,32.7 1140,33.0 1137,33.3 1134,33.6 1131,33.8 1128,33.9 1125,33.9 1122,33.9 1119,33.8 1116,33.7 1113,33.5 1110,33.2 1107,33.0 1104,32.6 1101,32.2 1098,31.8 1095,31.4 1092,30.9 1089,30.4 1086,29.9 1083,29.4 1080,28.8 1077,28.3 1074,27.8 1071,27.2 1068,26.7 1065,26.2 1062,25.7 1059,25.2 1056,25.2 1053,25.6 1050,25.9 1047,26.3 1044,26.5 1041,26.8 1038,26.9 1035,27.1 1032,27.1 1029,27.1 1026,27.1 1023,27.0 1020,26.8 1017,26.6 1014,26.3 1011,26.0 1008,25.6 1005,25.2 1002,25.3 999,25.9 996,26.5 993,27.1 990,27.8 987,28.5 984,29.3 981,30.1 978,30.9 975,31.7 972,32.6 969,33.4 966,34.3 963,35.1 960,36.0 957,36.8 954,37.7 951,38.5 948,39.2 945,40.0 942,40.7 939,41.4 936,42.0 933,42.6 930,43.1 927,43.5 924,43.9 921,44.3 918,44.5 915,44.7 912,44.9 909,44.9 906,44.9 903,44.8 900,44.6 897,44.4 894,44.0 891,43.6 888,43.2 885,42.6 882,42.0 879,41.3 876,40.5 873,39.7 870,38.9 867,37.9 864,37.0 861,35.9 858,34.9 855,33.8 852,32.7 849,31.5 846,30.3 843,29.1 840,28.0 837,26.8 834,25.6 831,25.6 828,26.8 825,28.0 822,29.1 819,30.2 816,31.2 813,32.3 810,33.2 807,34.2 804,35.1 801,35.9 798,36.6 795,37.3 792,38.0 789,38.5 786,39.1 783,39.5 780,39.8 777,40.1 774,40.3 771,40.5 768,40.6 765,40.6 762,40.5 759,40.4 756,40.2 753,39.9 750,39.6 747,39.2 744,38.8 741,38.4 738,37.9 735,37.3 732,36.7 729,36.1 726,35.5 723,34.8 720,34.2 717,33.5 714,32.8 711,32.1 708,31.5 705,30.8 702,30.1 699,29.5 696,28.9 693,28.4 690,27.8 687,27.3 684,26.9 681,26.4 678,26.1 675,25.8 672,25.5 669,25.3 666,25.1 663,25.0 660,25.0 657,25.0 654,25.1 651,25.2 648,25.4 645,25.6 642,25.9 639,26.2 636,26.6 633,27.1 630,27.5 627,28.0 624,28.6 621,29.2 618,29.8 615,30.4 612,31.0 609,31.7 606,32.3 603,33.0 600,33.6 597,34.3 594,34.9 591,35.5 588,36.1 585,36.7 582,37.2 579,37.7 576,38.1 573,38.5 570,38.9 567,39.2 564,39.4 561,39.6 558,39.7 555,39.7 552,39.7 549,39.6 546,39.5 543,39.2 540,39.0 537,38.6 534,38.1 531,37.6 528,37.1 525,36.4 522,35.7 519,34.9 516,34.1 513,33.2 510,32.3 507,31.3 504,30.3 501,29.2 498,28.2 495,27.0 492,25.9 489,25.3 486,26.5 483,27.7 480,28.8 477,30.0 474,31.2 471,32.4 468,33.5 465,34.6 462,35.7 459,36.7 456,37.7 453,38.7 450,39.6 447,40.5 444,41.3 441,42.0 438,42.7 435,43.3 432,43.8 429,44.2 426,44.6 423,44.9 420,45.2 417,45.3 414,45.4 411,45.4 408,45.3 405,45.2 402,44.9 399,44.7 396,44.3 393,43.9 390,43.4 387,42.8 384,42.2 381,41.6 378,40.9 375,40.1 372,39.4 369,38.6 366,37.7 363,36.9 360,36.0 357,35.1 354,34.2 351,33.3 348,32.4 345,31.6 342,30.7 339,29.9 336,29.1 333,28.3 330,27.5 327,26.8 324,26.1 321,25.5 318,25.1 315,25.6 312,26.1 309,26.5 306,26.8 303,27.1 300,27.4 297,27.6 294,27.7 291,27.8 288,27.8 285,27.7 282,27.6 279,27.5 276,27.3 273,27.0 270,26.7 267,26.4 264,26.0 261,25.6 258,25.1 255,25.4 252,25.9 249,26.4 246,26.9 243,27.4 240,28.0 237,28.5 234,29.0 231,29.5 228,30.0 225,30.5 222,30.9 219,31.3 216,31.7 213,32.0 210,32.3 207,32.6 204,32.7 201,32.9 198,33.0 195,33.0 192,32.9 189,32.8 186,32.7 183,32.5 180,32.2 177,31.8 174,31.4 171,30.9 168,30.4 165,29.8 162,29.1 159,28.4 156,27.6 153,26.8 150,25.9 147,25.0 144,25.9 141,26.9 138,27.9 135,28.9 132,29.9 129,31.0 126,32.0 123,33.1 120,34.2 117,35.2 114,36.3 111,37.3 108,38.3 105,39.2 102,40.1 99,41.0 96,41.9 93,42.6 90,43.4 87,44.0 84,44.7 81,45.2 78,45.7 75,46.1 72,46.4 69,46.7 66,46.9 63,47.0 60,47.0 57,46.9 54,46.8 51,46.6 48,46.3 45,45.9 42,45.5 39,45.0 36,44.4 33,43.8 30,43.1 27,42.3 24,41.5 21,40.6 18,39.7 15,38.8 12,37.8 9,36.8 6,35.7 3,34.7 0,33.6'/%3E%3C/svg%3E"); } * { box-sizing: border-box; } /* ========================================================================== LA BARRE DE DEFILEMENT — celle du site, a l'identique (18/08) Elle ne sert normalement jamais (tout tient a l'ecran), mais si elle doit apparaitre, elle doit etre la meme que sur tchiiro.com : rail presque noir, poignee en degrade cuivre -> prune, qui s'eclaircit au survol. Firefox n'accepte qu'une couleur unie : il recoit le prune. ========================================================================== */ html { scrollbar-width: thin; scrollbar-color: var(--pal-prune-clair) #0b0b0b; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: #0b0b0b; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--pal-rouille-clair) 0%, var(--pal-rouille-vif) 32%, var(--pal-prune-vif) 68%, var(--pal-prune-clair) 100%); border-radius: 999px; border: 2px solid #0b0b0b; /* un lisere sombre affine la barre */ } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #FFB13D 0%, var(--pal-rouille-clair) 32%, var(--pal-prune-clair) 68%, #FF6FA8 100%); } ::-webkit-scrollbar-corner { background: #0b0b0b; } html { height: 100%; } body { margin: 0; min-height: 100.00vh; min-height: 100dvh; /* mobile : la vraie hauteur visible */ background: var(--tch-bg); color: var(--tch-text); font-family: var(--font-ui); line-height: 1.65; -webkit-font-smoothing: antialiased; font-variation-settings: "SOFT" 0, "WONK" 0; /* CENTRE DU CENTRE (17/08, demande de David) : quel que soit l'ecran, tout ce qu'on voit est au milieu — haut/bas ET gauche/droite. Le centrage vertical passe par les marges automatiques de la scene (et non par justify-content) : si le contenu devient plus haut que l'ecran, il redevient simplement defilable sans jamais etre coupe. */ display: flex; padding: 22px 16px; } /* ========================================================================== LES CINQ COUCHES DE FOND DU SITE, A L'IDENTIQUE (memes valeurs que tchiiro.com : halos cuivre -> rose qui respirent, accent organique flouté, grain cinema, trame de points) ========================================================================== */ .tchiiro-ambient, .tchiiro-ambient2 { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .tchiiro-ambient { background-color: var(--tch-bg); background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat; background-size: 260px 260px; } .tchiiro-ambient::before, .tchiiro-ambient::after, .tchiiro-ambient2::before, .tchiiro-ambient2::after { content: ''; position: absolute; top: 0; bottom: 0; filter: blur(70px); will-change: transform, opacity; } /* LES HALOS DU SITE, VERSION REGLEE DU 17/08 (2e passe, avec David) : on REPREND la mecanique exacte du site — degrade cuivre -> rose sur les cotes, flou 70px, respiration lente de 40 s — et on la regle selon ses mots : "moins de noir derriere le bloc", la couleur de gauche PENETRE vers la droite (et inversement) jusqu'a passer un peu derriere le cadre ; le haut et le bas recoivent la meme enveloppe, en partant du rose noir au bord ; et le fond noir reste maitre au centre — c'est le panneau sombre qui "determine", comme sur le site. */ .tchiiro-ambient::before { left: 0; /* REGLAGE DEFINITIF DU 17/08 ("une bonne fois pour toutes") : les halos restent AUX EXTREMITES et s'arretent A DISTANCE du cadre — 70px de noir a peine rose les separent du contour, quelle que soit la fenetre. C'est ce noir qui fait RESSORTIR le grand cadre, comme le fond du site fait ressortir ses blocs. L'ancienne penetration derriere le bloc est abandonnee. */ width: max(280px, calc((100vw - 660px) / 2 - 70px)); background: linear-gradient(to right, rgba(136,56,24,.88) 0%, /* cuivre : le tout bord, comme le site */ rgba(140,50,34,.82) 13%, rgba(152,44,56,.74) 24%, rgba(163,27,85,.66) 38%, rgba(163,26,86,.52) 54%, rgba(162,26,85,.36) 70%, rgba(160,26,84,.18) 86%, /* la couleur porte plus loin qu'avant */ transparent 100%); animation: halo-gauche 40s ease-in-out infinite alternate; } .tchiiro-ambient::after { right: 0; width: max(280px, calc((100vw - 660px) / 2 - 70px)); background: linear-gradient(to left, rgba(136,56,24,.88) 0%, rgba(140,50,34,.82) 13%, rgba(152,44,56,.74) 24%, rgba(163,27,85,.66) 38%, rgba(163,26,86,.52) 54%, rgba(162,26,85,.36) 70%, rgba(160,26,84,.18) 86%, transparent 100%); animation: halo-droite 40s ease-in-out infinite alternate; } /* l'accent organique du site : la profondeur douce, sans forme visible */ .tchiiro-ambient2::before { left: 0; width: max(280px, calc((100vw - 660px) / 2 - 70px)); top: -12%; bottom: -12%; background: radial-gradient(ellipse 78% 44% at 42% 50%, rgba(164,46,84,.32), transparent 74%); filter: blur(60px); animation: halo-gauche 40s ease-in-out infinite alternate; } .tchiiro-ambient2::after { right: 0; width: max(280px, calc((100vw - 660px) / 2 - 70px)); top: -12%; bottom: -12%; background: radial-gradient(ellipse 78% 44% at 58% 50%, rgba(164,46,84,.32), transparent 74%); filter: blur(60px); animation: halo-droite 40s ease-in-out infinite alternate; } /* L'ENVELOPPE DU HAUT ET DU BAS : "qu'on sente que c'est entoure". On part du ROSE NOIR au bord de l'ecran, qui s'eclaircit en rose avant de fondre — le bas d'abord (valide), le haut a l'identique, les deux un peu plus presents que la premiere version. */ /* 17/08, HAUT = BAS (demande de David, photo a l'appui) : les enveloppes haut/bas sont RETIREES. Un defaut d'empilement rendait celle du haut invisible (peinte sous le fond noir opaque) et celle du bas visible : au-dessus du cadre c'etait noir, en dessous c'etait rose. David a valide le rendu du HAUT — donc plus d'enveloppe du tout : au-dessus comme en dessous, le meme noir franc, seuls les halos des cotes affleurent dans les coins, a l'identique. */ @media (max-width: 900px) { .tchiiro-ambient::before, .tchiiro-ambient::after, .tchiiro-ambient2::before, .tchiiro-ambient2::after { width: 38vw; } } @keyframes halo-gauche { 0%{transform:translate(0,0) scaleX(1);} 100%{transform:translate(9%,0) scaleX(1.16);} } @keyframes halo-droite { 0%{transform:translate(0,0) scaleX(1);} 100%{transform:translate(-9%,0) scaleX(1.16);} } .tchiiro-grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07; background-repeat: repeat; background-size: 260px 260px; background-image: url("data:image/svg+xml;utf8,"); } .tchiiro-halo-dots { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E"); background-size: 3px 3px; opacity: .85; } /* ========================================================================== LES GRANDES ONDES DE FOND (17/08, 2e passe : "je voulais que ca bouge, et des ondes encore beaucoup plus sonores") : DEUX ondes superposees, prises parmi les motifs les plus nerveux du site (les n°3 et n°5, ceux qui zigzaguent le plus). Resserrees pour montrer plein de pics et de creux, TROIS FOIS plus rapides qu'avant, elles se CROISENT (la premiere part vers la gauche, la seconde vers la droite) et RESPIRENT verticalement — le battement d'une vraie forme d'onde sonore. La souris les rassemble : survoler a gauche les envoie toutes les deux a gauche, a droite toutes les deux a droite (script en bas de demo.js). ========================================================================== */ /* ========================================================================== LES TROIS GRANDES ONDES (17/08, 4e passe — formes dessinees sur mesure) -------------------------------------------------------------------------- NOUVELLES FORMES : les motifs du site plafonnaient en amplitude. Ces trois-la sont dessinees a facon (script Python maison, dessiner_ondes.py), avec des cretes qui frolent le haut et des creux qui frolent le bas — "des vagues vraiment tres hautes et tres basses" : ROSE = grandes houles de l'ocean (3 longues vagues + relief + ecume) CUIVRE = 20 dents geantes a enveloppe respirante (le zigzag electro) OR = houle composee (2 respirations qui s'additionnent) Elles ne se ressemblent pas, c'est voulu. ALIGNEMENT : trois lignes PARALLELES, hauteurs IDENTIQUES (280px), centres espaces REGULIEREMENT (200px d'ecart, soit 50% -200px / 50% / 50% +200px). Comme chaque onde fait 280px de haut pour 200px d'ecart, les voisines SE CHEVAUCHENT de 80px : les vagues se touchent, exactement comme demande. ⚠️ ARCHITECTURE EN DEUX ETAGES : quand la RESPIRATION (transform, confiee a la carte graphique) et le VOYAGE du masque (fil principal) vivent sur le MEME element, Chrome fige le voyage. Remede : respiration sur l'ENVELOPPE, voyage sur l'enfant .onde-fond. ========================================================================== */ .onde-enveloppe { position: fixed; left: 0; right: 0; /* 320px : hauteur choisie pour que le chevauchement TIENNE MEME au creux des respirations (au minimum : 320x.68 + 320x.76 = 461px de hauteur cumulee pour 400px requis — les vagues ne se decollent jamais, a aucun instant). */ height: 320px; z-index: 0; pointer-events: none; } .onde-enveloppe.est-rose { top: calc(50% - 200px); /* ligne haute */ animation: onde-respire-fort 4.6s ease-in-out infinite alternate; } .onde-enveloppe.est-cuivre { top: 50%; /* ligne du milieu */ animation: onde-respire 3.8s ease-in-out infinite alternate-reverse; } .onde-enveloppe.est-or { top: calc(50% + 200px); /* ligne basse */ animation: onde-respire 5.4s ease-in-out infinite alternate; } .onde-fond { position: absolute; inset: 0; background-size: 260% 100%; background-repeat: repeat-x; -webkit-mask-repeat: repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, no-repeat; -webkit-mask-composite: source-in, source-in; mask-composite: intersect, intersect; } /* -------- la ROSE : les grandes houles -------- */ .onde-enveloppe.est-rose .onde-fond { background-image: linear-gradient(100deg, #B4526A 0%, #E34472 14%, #FF6FA8 28%, #C93A62 42%, #E86A8E 56%, #FF8CBA 70%, #B4526A 84%, #B4526A 100%); -webkit-mask-image: var(--onde-barres), var(--onde-forme-rose), var(--onde-fondu); mask-image: var(--onde-barres), var(--onde-forme-rose), var(--onde-fondu); -webkit-mask-size: 5px 100%, 1700px 100%, 100% 100%; mask-size: 5px 100%, 1700px 100%, 100% 100%; opacity: .34; animation: onde-va-rose 11s linear infinite, tch-onde-lueurs-fond 20s linear infinite; } /* -------- la CUIVRE : les dents geantes -------- */ .onde-enveloppe.est-cuivre .onde-fond { background-image: linear-gradient(100deg, #7A4C33 0%, #8A5A3C 16%, #C4674A 32%, #D08A45 48%, #8A4A3A 64%, #C4674A 80%, #7A4C33 100%); -webkit-mask-image: var(--onde-barres), var(--onde-forme-cuivre), var(--onde-fondu); mask-image: var(--onde-barres), var(--onde-forme-cuivre), var(--onde-fondu); -webkit-mask-size: 5px 100%, 2000px 100%, 100% 100%; mask-size: 5px 100%, 2000px 100%, 100% 100%; opacity: .38; animation: onde-va-cuivre 12s linear infinite, tch-onde-lueurs-fond 18s linear infinite; } /* -------- l'OR : la houle composee -------- */ .onde-enveloppe.est-or .onde-fond { background-image: linear-gradient(100deg, #BA701C 0%, #E19947 18%, #F2AE63 36%, #D08A45 54%, #8C5617 72%, #E19947 88%, #BA701C 100%); -webkit-mask-image: var(--onde-barres), var(--onde-forme-or), var(--onde-fondu); mask-image: var(--onde-barres), var(--onde-forme-or), var(--onde-fondu); -webkit-mask-size: 5px 100%, 2400px 100%, 100% 100%; mask-size: 5px 100%, 2400px 100%, 100% 100%; opacity: .28; animation: onde-va-or 15s linear infinite, tch-onde-lueurs-fond 26s linear infinite reverse; } /* les voyages : un motif complet par cycle, bouclage invisible. rose et or vont vers la droite, la cuivre vers la gauche */ @keyframes onde-va-rose { from { -webkit-mask-position: 0 center, 0px center, 0 0; mask-position: 0 center, 0px center, 0 0; } to { -webkit-mask-position: 0 center, 1700px center, 0 0; mask-position: 0 center, 1700px center, 0 0; } } @keyframes onde-va-cuivre { from { -webkit-mask-position: 0 center, 0px center, 0 0; mask-position: 0 center, 0px center, 0 0; } to { -webkit-mask-position: 0 center, -2000px center, 0 0; mask-position: 0 center, -2000px center, 0 0; } } @keyframes onde-va-or { from { -webkit-mask-position: 0 center, 0px center, 0 0; mask-position: 0 center, 0px center, 0 0; } to { -webkit-mask-position: 0 center, 2400px center, 0 0; mask-position: 0 center, 2400px center, 0 0; } } @keyframes tch-onde-lueurs-fond { from { background-position: 0% center; } to { background-position: -260% center; } } /* les respirations restent amples, mais leur creux est releve : c'est ce qui garantit que les trois lignes se touchent en permanence. L'amplitude spectaculaire vient desormais des FORMES elles-memes. */ @keyframes onde-respire { from { transform: translateY(-50%) scaleY(.76); } to { transform: translateY(-50%) scaleY(1.18); } } @keyframes onde-respire-fort { from { transform: translateY(-50%) scaleY(.68); } to { transform: translateY(-50%) scaleY(1.30); } } .scene { z-index: 1; } /* ========================================================================== LA SCENE : le grand cadre qui englobe tout — le bloc-encadre du site, avec son filament multicolore qui parcourt lentement le contour. Les marges automatiques la posent au CENTRE EXACT de l'ecran. ========================================================================== */ .scene { position: relative; margin: auto; /* centre du centre, les deux axes */ width: min(660px, 100%); /* 17/08 : passe de .88 a .97 — l onde geante de fond se devinait a travers le bloc. Quasi opaque, elle disparait totalement derriere, comme demande ("il ne faut pas qu on la voit, sinon on ne verra pas le bloc"). Les halos ne passaient deja plus derriere le cadre depuis le reglage de la distance de noir : rien d autre ne change. */ background: rgba(10,10,10,.97); border: 1.5px solid rgba(234,229,222,.14); border-radius: var(--tch-radius-lg); padding: clamp(11px, 1.65vh, 40px) clamp(14px, 4vw, 40px); display: flex; flex-direction: column; align-items: center; } .scene::before { content: ''; position: absolute; inset: -2px; z-index: 0; border-radius: calc(var(--tch-radius-lg) + 2px); padding: 2px; /* LE CONTOUR MULTICOLORE, SYMETRIQUE ET IMMOBILE (17/08, restaure le 18/08 apres un essai en rose uni que David n'a pas retenu). ⚠️ La symetrie est essentielle : le rose habille le HAUT et le BAS a l'identique, l'or reste sur les cotes ou vivent deja les halos cuivres. C'est ce qui garantit que le noir du bas est cale sur celui du haut — le defaut que David avait repere. Et il ne tourne pas : une rotation ramenerait l'or en bas par moments. */ background: conic-gradient(from 0deg, var(--pal-prune-vif) 0deg, /* haut : rose */ var(--pal-bordeaux) 45deg, var(--pal-rouille-clair) 90deg, /* droite : or */ var(--pal-bordeaux) 135deg, var(--pal-prune-vif) 180deg, /* bas : rose, comme le haut */ var(--pal-bordeaux) 225deg, var(--pal-rouille-clair) 270deg, /* gauche : or */ var(--pal-bordeaux) 315deg, var(--pal-prune-vif) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .70; pointer-events: none; } .scene > * { position: relative; z-index: 1; } /* ---------- Le nom, au-dessus de la photo ---------- */ .marque { font-family: var(--font-display); /* 17/08 : TOUT SUR UNE LIGNE, A LA MEME TAILLE (demande de David). La taille est calculee pour que "TCHIIRO MUSIC-PRODUCTION" tienne toujours sur sa ligne, du telephone 320px au grand ecran. */ /* 17/08 : reduit d'un cran — il touchait presque le grand contour. La ligne garde ~60px d'air de chaque cote desormais. */ font-size: clamp(0.95rem, min(3.6vw, 3.00vh), 2.0rem); font-weight: 620; letter-spacing: .01em; line-height: 1.1; margin: 0 0 4px; text-align: center; white-space: nowrap; } /* MUSIC-PRODUCTION : meme taille que TCHIIRO, dans le ROSE DU CASQUE (le rose vif du site, celui de l'icone), et non plus le rose doux */ .marque .accent { color: var(--tch-rose); font-size: 1em; letter-spacing: .01em; } /* ---------- La photo du héros, avec l'anneau et la trame du site ---------- */ .portrait { position: relative; /* la photo suit la hauteur d'ecran : elle occupe toujours la meme part de la page, du grand ecran au petit portable (18/08) */ width: min(300px, 72vw, 30.00vh); aspect-ratio: 1 / 1; border-radius: var(--tch-radius-lg); margin: 0 auto clamp(8px, 1.65vh, 30px); line-height: 0; } .portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--tch-radius-lg); display: block; } /* l'anneau multicolore : le conic-gradient exact du site, qui tourne */ .portrait::before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: calc(var(--tch-radius-lg) + 2px); padding: 2px; background: conic-gradient(from var(--tch-angle), var(--pal-prune-clair) 0deg, var(--pal-prune-vif) 55deg, var(--pal-bordeaux) 100deg, var(--pal-grenat) 140deg, var(--pal-rouille-vif) 168deg, var(--pal-rouille-clair) 190deg, var(--pal-rouille-vif) 212deg, var(--pal-grenat) 252deg, var(--pal-bordeaux) 292deg, var(--pal-prune-vif) 328deg, var(--pal-prune-clair) 360deg); /* le masque qui EVIDE l'anneau : sans lui, le degrade est une plaque pleine derriere la carte (defaut vu sur capture le 17/08). C'est la technique exacte du site : deux calques, l'interieur soustrait. */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: tch-anneau 9s linear infinite; } /* la trame + LE REFLET DU SITE (17/08, demande de David : "les fameux reflets qu'on avait mis"). Transpose a l'identique de tchiiro.com : AMBRE 3 quand la souris arrive par la moitie gauche (il balaie vers la droite), ROSE 3 par la moitie droite (il balaie vers la gauche), mode lent 2,4 s — les choix valides de David sur le site, on n'en bouge pas. Le degrade n'est ecrit qu'une fois, les couleurs et le sens sont poses par le script via les variables. */ .portrait { --tch-reflet-coeur: rgba(255,184,95,.58); --tch-reflet-flanc: rgba(228,131,35,.15); --tch-reflet-angle: 105deg; --tch-reflet-depart: 100% center; } .portrait::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: var(--tch-radius-lg); background-image: linear-gradient(var(--tch-reflet-angle), transparent 22%, var(--tch-reflet-flanc) 32%, var(--tch-reflet-coeur) 42%, var(--tch-reflet-flanc) 52%, transparent 62%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E"); background-size: 260% 100%, 2px 2px; background-repeat: no-repeat, repeat; background-position: var(--tch-reflet-depart), 0 0; opacity: .85; } @media (hover: hover) and (pointer: fine) { .portrait.reflet-va-droite::after { animation: tch-reflet-vers-droite 2.4s cubic-bezier(.33, 0, .2, 1) 1; } .portrait.reflet-va-gauche::after { animation: tch-reflet-vers-gauche 2.4s cubic-bezier(.33, 0, .2, 1) 1; } } @keyframes tch-reflet-vers-droite { from { background-position: 100% center, 0 0; } to { background-position: -90% center, 0 0; } } @keyframes tch-reflet-vers-gauche { from { background-position: -90% center, 0 0; } to { background-position: 100% center, 0 0; } } @keyframes tch-anneau { to { --tch-angle: 360deg; } } /* ENTRER = LE BOUTON DU SITE, A L'IDENTIQUE (17/08, capture a l'appui : "tu te references exactement au site... avec le cadre et tout"). C'est le btn-ghost de tchiiro.com, transpose tel quel : fond noir, ecriture cuivre ancien, ANNEAU multicolore tournant a deux points lumineux face a face (rose d'un cote, or de l'autre), AURORE interieure qui tourne en sens inverse sous le noir, et au survol le filament s'emballe. Ces rotations-la sont CELLES DU SITE : elles restent — c'est l'effet demande, pas un residu. */ .btn { font-family: var(--font-ui); font-size: .98rem; letter-spacing: .02em; font-weight: 500; padding: clamp(8px, 1.21vh, 16px) clamp(22px, 5vw, 44px); border-radius: 999px; display: inline-block; cursor: pointer; position: relative; isolation: isolate; /* l'aurore reste sous le texte */ background: #000; border: none; overflow: visible; color: #D89A68; /* le cuivre ancien du site */ transition: color .55s var(--tch-ease), transform .55s var(--tch-ease), box-shadow .55s var(--tch-ease); } /* l'aurore interieure : les deux couleurs, tres attenuees, tournent lentement en sens inverse au fond du bouton */ .btn::after { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; /* LES QUADRILLONS (17/08, David : "tu as oublie les quadrillons... sur tous les boutons, tout le temps") : la trame de points du site, posee PAR-DESSUS l'aurore — elle se voit la ou la lumiere passe, comme sur les boutons de tchiiro.com. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E"), conic-gradient(from calc(var(--tch-angle) * -1), rgba(186,27,73,.32) 0deg, rgba(113,37,50,.12) 90deg, rgba(186,112,28,.30) 180deg, rgba(117,42,46,.12) 270deg, rgba(186,27,73,.32) 360deg); background-size: 2px 2px, auto; opacity: .55; animation: tch-filament-btn 5.5s linear infinite; transition: opacity .55s var(--tch-ease); pointer-events: none; } /* l'anneau : deux points lumineux face a face, rose et or */ .btn::before { content: ''; position: absolute; z-index: 1; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--tch-angle), var(--pal-prune-clair) 0deg, var(--pal-prune-vif) 42deg, var(--pal-bordeaux) 82deg, var(--pal-grenat) 118deg, var(--pal-rouille-vif) 150deg, var(--pal-rouille-clair) 180deg, var(--pal-rouille-vif) 210deg, var(--pal-grenat) 246deg, var(--pal-bordeaux) 285deg, var(--pal-prune-vif) 322deg, var(--pal-prune-clair) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: tch-filament-btn 5.5s linear infinite; opacity: .8; transition: opacity .55s var(--tch-ease); pointer-events: none; } @keyframes tch-filament-btn { to { --tch-angle: 360deg; } } .btn:hover, .btn:focus-visible { color: #D89A68; /* le texte ne bouge pas : l'anneau porte tout */ transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(227,68,114,.12), 0 12px 34px rgba(186,27,73,.30), 0 4px 16px rgba(225,153,71,.22); } .btn:hover::before, .btn:focus-visible::before { opacity: 1; animation-duration: 2.2s; /* le filament s'emballe */ } .btn:hover::after, .btn:focus-visible::after { opacity: 1; animation-duration: 2.2s; } /* ---------- Respect des personnes sensibles au mouvement ---------- */ /* ========================================================================== NOTE (18/08) : les quatre paliers de hauteur qui vivaient ici ont ete SUPPRIMES. Ils reglaient la mise en page par sauts (1120, 980, 900, 790 px), ce qui obligeait chaque palier a tenir sur son plus petit ecran — et laissait deborder tous les autres des qu'un element s'ajoutait. Les espacements sont desormais FLUIDES (clamp + vh) : ils suivent la hauteur de l'ecran en continu, sans aucun saut. ========================================================================== */ .btn:focus-visible, .btn-sortie:focus-visible, .lien-attestation:focus-visible, .btn-lecture:focus-visible, .volume input[type="range"]:focus-visible { border-radius: 999px; } /* ========================================================================== MOUVEMENT REDUIT — BLOC UNIQUE ET AUTORITAIRE (audit 18/08) -------------------------------------------------------------------------- Les personnes sujettes au mal des transports ou a l'epilepsie peuvent demander a leur systeme de limiter les animations. Le site doit alors se figer, sans rien perdre de son contenu. ⚠️ LECON DE L'AUDIT : sept petits blocs etaient dissemines dans la feuille, chacun visant `.onde-enveloppe`, `.btn::before`, etc. Or une requete @media N'AJOUTE AUCUNE PRIORITE : la regle `.onde-enveloppe .est-rose` (deux classes) l'emportait sur `.onde-enveloppe` (une seule), et les grandes ondes continuaient de tourner malgre la demande de l'utilisateur. Un seul bloc final, universel et prioritaire, supprime definitivement ce piege : plus aucune animation ne peut y echapper, quelle que soit la specificite de la regle qui l'a declaree. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } /* Ce que les images-cles portaient doit etre repose a la main, sinon l'element perd son placement en meme temps que son animation. */ .onde-enveloppe { transform: translateY(-50%); } .onde-fond { opacity: .16; } .tchiiro-ambient::before, .tchiiro-ambient::after, .tchiiro-ambient2::before, .tchiiro-ambient2::after { opacity: .13; transform: none; } /* les anneaux se figent sur un angle choisi, plus flatteur que 0 deg */ .btn::before, .btn::after, .ambiance::before, .ambiance::after, .btn-lecture::before, .portrait::before { --tch-angle: 285deg; } .btn:hover, .ambiance:hover { transform: none; } } /* ================================================================ TCHIIRO — sélection bordeaux globale Même rendu dans le Salon et dans le champ du code. ================================================================ */ ::selection { background: #621228; color: #FBEDE6; } ::-moz-selection { background: #621228; color: #FBEDE6; } /* 10/09/2026 — « cette page est deja sombre, ne la retouchez pas » : le mode sombre de Samsung Internet retravaillait les couleurs (gros points blancs). */ :root { color-scheme: dark; }