1<!DOCTYPE html> 2<html class="scroll-smooth dark" lang="fr"> 3 4<head> 5 <meta charset="utf-8" /> 6 <meta content="width=device-width, initial-scale=1.0" name="viewport" /> 7 <meta name="description" content="World Padel Quest réunit trois univers : le plus grand tournoi amateur de padel en France, les Padel Quest Awards qui récompensent celles et ceux qui font grandir ce sport, et le magazine du padel français." /> 8 <meta property="og:title" content="World Padel Quest : le tournoi, les Awards et le magazine du padel français" /> 9 <meta property="og:description" content="Trois univers, une seule adresse : le plus grand tournoi amateur de padel en France, les Padel Quest Awards et leur vote ouvert à tous, et bientôt le magazine du padel français." /> 10 <meta property="og:image" content="https://worldpadelquest.com/images/partage/accueil.jpg?v=20260921" /> 11 <meta property="og:type" content="website" /> 12 <meta property="og:locale" content="fr_FR" /> 13 <meta name="twitter:card" content="summary_large_image" /> 14 <meta name="twitter:image" content="https://worldpadelquest.com/images/partage/accueil.jpg?v=20260921" /> 15 <link rel="icon" href="/images/logo.webp" type="image/webp" /> 16 <title>World Padel Quest : le tournoi, les Awards et le magazine du padel français</title> 17 <link href="https://fonts.googleapis.com" rel="preconnect" /> 18 <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" /> 19 <link 20 href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=Montserrat:wght@300;400;500;600;700&
20family=Playfair+Display:ital,wght@0,700;1,700&display=swap" 21 rel="stylesheet" /> 22 <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap" 23 rel="stylesheet" /> 24 <link 25 href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" 26 rel="stylesheet" /> 27 <link rel="stylesheet" href="/styles.css?v=20260824" /> 28 <style> 29 :root { 30 --bela-blue-deep: #081b33; 31 --bela-blue-dark: #051224; 32 --bela-blue-mid: #0d2a4d; 33 --bela-blue-glow: rgba(49, 118, 209, 0.35); 34 --bela-blue-soft: rgba(103, 170, 255, 0.15); 35 --bela-gold: #d4af37; 36 --bela-white-sheen: rgba(255, 255, 255, 0.08); 37 } 38 39 body { 40 background: 41 radial-gradient(circle at 50% 0%, rgba(49, 118, 209, 0.35), transparent 45%), 42 radial-gradient(circle at 85% 15%, rgba(28, 92, 173, 0.25), transparent 35%), 43 radial-gradient(circle at 15% 85%, rgba(255, 255, 255, 0.04), transparent 30%), 44 var(--bela-blue-dark); 45 } 46 47 .bg-matte { 48 background-color: var(--bela-blue-dark) !important; 49 } 50 51 .bg-surface { 52 background-color: var(--bela-blue-deep) !important; 53 } 54 55 .bg-matte\/90 { 56 background-color: rgba(5, 18, 36, 0.92) !important; 57 } 58 59 .bg-matte\/70, 60 .bg-matte\/50, 61 .bg-matte\/40 { 62 background-color: rgba(5, 18, 36, 0.65) !important; 63 } 64 65 .bg-surface\/50, 66 .bg-surface\/30 { 67 background-color: rgba(8, 27, 51, 0.5) !important; 68 } 69 70 /* Glassmorphism Premium */ 71 .glass-card { 72 background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)) !important; 73 backdrop-filter: blur(12px) !important; 74 -webkit-backdrop-filter: blur(12px) !important; 75 border: 1px solid rgba(138, 183, 255, 0.12) !important; 76 box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6) !important; 77 } 78 79 .hero-bg { 80 background-size: cover; 81 background-position: center; 82 background-repeat: no-repeat; 83 } 84 85 .hero-bg__media { 86 position: absolute; 87 inset: 0; 88 z-index: 0; 89 } 90 91 .hero-bg__img { 92 width: 100%; 93 height: 100%; 94 object-fit: cover; 95 object-position: center; 96 } 97 98 .hero-bg__video { 99 width: 100%; 100 height: 100%; 101 object-fit: cover; 102 object-position: center; 103 filter: brightness(0.55) contrast(1.1) saturate(1.15); 104 } 105 106 .hero-bg__img { 107 filter: brightness(0.65) contrast(1.05) saturate(1.1); 108 } 109 110 .hero-blue-haze { 111 position: absolute; 112 inset: 0; 113 background: 114 linear-gradient(180deg, rgba(5, 18, 36, 0.7), rgba(5, 18, 36, 0.3) 46%, transparent 78%), 115 radial-gradient(circle at 50% 20%, rgba(49, 118, 209, 0.4), transparent 45%), 116 linear-gradient(110deg, rgba(255, 255, 255, 0.06), transparent 24%, transparent 72%, rgba(255, 255, 255, 0.04)); 117 z-index: 1; 118 pointer-events: none; 119 } 120 121 .hero-bottom-fade { 122 position: absolute; 123 left: 0; 124 right: 0; 125 bottom: 0; 126 height: min(34vh, 280px); 127 background: 128 linear-gradient(180deg, rgba(5, 18, 36, 0.05) 0%, rgba(7, 25, 49, 0.48) 26%, rgba(8, 28, 56, 0.84) 60%, rgba(8, 27, 51, 0.985) 100%), 129 radial-gradient(circle at 50% 100%, rgba(76, 136, 220, 0.28), transparent 52%); 130 z-index: 2; 131 pointer-events: none; 132 } 133 134 .partner-track { 135 will-change: transform; 136 transform: translate3d(0, 0, 0); 137 backface-visibility: hidden;
138 animation-duration: 80s; 139 } 140 141 .partner-track img { 142 height: 3rem; 143 } 144 145 .partners-strip { 146 background: 147 linear-gradient(180deg, rgba(17, 52, 94, 0.96), rgba(12, 29, 52, 0.98)), 148 linear-gradient(90deg, rgba(109, 173, 255, 0.08), transparent 18%, transparent 82%, rgba(109, 173, 255, 0.06)); 149 } 150 151 .region-marquee { 152 overflow: hidden; 153 position: relative; 154 } 155 156 .region-marquee::before, 157 .region-marquee::after { 158 content: ""; 159 position: absolute; 160 top: 0; 161 bottom: 0; 162 width: 64px; 163 pointer-events: none; 164 z-index: 2; 165 } 166 167 .region-marquee::before { 168 left: 0; 169 background: linear-gradient(to right, rgba(13, 13, 13, 1), rgba(13, 13, 13, 0)); 170 } 171 172 .region-marquee::after { 173 right: 0; 174 background: linear-gradient(to left, rgba(13, 13, 13, 1), rgba(13, 13, 13, 0)); 175 } 176 177 .region-track { 178 display: flex; 179 align-items: center; 180 gap: 1.5rem; 181 width: max-content; 182 animation: partner-marquee 75s linear infinite; 183 padding: 0.5rem 0; 184 will-change: transform; 185 transform: translate3d(0, 0, 0); 186 } 187 188 .region-track__clone { 189 display: flex; 190 align-items: center; 191 gap: 1.5rem; 192 } 193 194 .region-track:hover { 195 animation-play-state: paused; 196 } 197 198 .region-card { 199 position: relative; 200 display: inline-flex; 201 flex-direction: column; 202 align-items: center; 203 justify-content: center; 204 gap: 0.3rem; 205 min-width: 152px; 206 padding: 0.8rem 1.15rem; 207 border-radius: 999px; 208 border: 1px solid transparent; 209 background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)); 210 border-color: rgba(255, 255, 255, 0.08); 211 box-shadow: 0 16px 40px -26px rgba(0, 0, 0, 0.85), 212 inset 0 1px 0 rgba(255, 255, 255, 0.12); 213 backdrop-filter: blur(8px); 214 transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; 215 white-space: nowrap; 216 overflow: hidden; 217 } 218 219 .region-card::before { 220 content: ""; 221 position: absolute; 222 inset: -2px; 223 background: radial-gradient(circle at 18% 22%, rgba(212, 175, 55, 0.18), transparent 60%), 224 radial-gradient(circle at 82% 78%, rgba(212, 175, 55, 0.12), transparent 62%); 225 opacity: 0.9; 226 pointer-events: none; 227 } 228 229 .region-card::after { 230 content: ""; 231 position: absolute; 232 inset: 0; 233 background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.22), transparent 55%); 234 transform: translateX(-70%) rotate(8deg); 235 opacity: 0; 236 transition: opacity 0.35s ease, transform 0.75s ease; 237 pointer-events: none; 238 mix-blend-mode: overlay; 239 } 240 241 .region-card:hover { 242 transform: translateY(-3px); 243 box-shadow: 0 22px 55px -28px rgba(0, 0, 0, 0.82), 244 0 0 0 1px rgba(255, 255, 255, 0.06), 245 0 0 30px rgba(212, 175, 55, 0.14), 246 inset 0 1px 0 rgba(255, 255, 255, 0.16); 247 background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)); 248 } 249 250 .region-card:hover::after { 251 opacity: 0.12; 252 transform: translateX(70%) rotate(8deg); 253 } 254 255 .region-city { 256 font-family: "Barlow Condensed", "Montserrat", sans-serif; 257 font-size: 1.1rem; 258 line-height: 1; 259 letter-spacing: 0.18em; 260 text-transform: uppercase; 261 font-weight: 700; 262 color: #fff; 263 text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55); 264 } 265
266 .region-date { 267 font-size: 0.78rem; 268 color: rgba(255, 255, 255, 0.84); 269 letter-spacing: 0.16em; 270 font-weight: 700; 271 text-transform: uppercase; 272 text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55); 273 } 274 275 .calendar-card__title { 276 display: flex; 277 align-items: center; 278 justify-content: center; 279 flex-direction: column; 280 gap: 0.25rem; 281 } 282 283 .calendar-city { 284 font-family: "Barlow Condensed", "Montserrat", sans-serif; 285 font-size: 1.75rem; 286 line-height: 1; 287 letter-spacing: 0.22em; 288 text-transform: uppercase; 289 font-weight: 800; 290 color: #08182f; 291 text-shadow: none; 292 } 293 294 .calendar-city-subline { 295 font-size: 0.62rem; 296 line-height: 1; 297 letter-spacing: 0.26em; 298 text-transform: uppercase; 299 color: rgba(8, 24, 47, 0.58); 300 } 301 302 .calendar-shell { 303 position: relative; 304 max-width: 1120px; 305 margin: 0 auto; 306 padding: 0; 307 border-radius: 0; 308 background: transparent; 309 border: 0; 310 box-shadow: none; 311 overflow: visible; 312 } 313 314 .calendar-shell::before { 315 display: none; 316 } 317 318 .calendar-row-top, 319 .calendar-row-bottom { 320 position: relative; 321 z-index: 1; 322 } 323 324 .calendar-row-top { 325 max-width: 1120px; 326 margin: 0 auto; 327 } 328 329 .calendar-row-bottom { 330 max-width: 1120px; 331 margin: 0.35rem auto 0; 332 } 333 334 @media (min-width: 768px) { 335 .calendar-row-bottom { 336 margin-top: 0.5rem; 337 } 338 } 339 340 #concept, 341 #calendrier-regions, 342 #social-proof, 343 #dates, 344 #niveaux,
345 #destination-finale, 346 #bela-signature, 347 #pricing-value, 348 #faq, 349 footer { 350 position: relative; 351 } 352 353 #concept { 354 background: 355 radial-gradient(circle at 18% 12%, rgba(68, 145, 235, 0.22), transparent 24%), 356 linear-gradient(180deg, rgba(14, 38, 72, 0.98), rgba(10, 27, 49, 0.98)); 357 } 358 359 #calendrier-regions { 360 background: 361 radial-gradient(circle at 82% 18%, rgba(69, 150, 255, 0.2), transparent 24%), 362 linear-gradient(180deg, rgba(12, 34, 64, 0.98), rgba(10, 27, 49, 0.98)); 363 } 364 365 #destination-finale { 366 background: 367 radial-gradient(circle at 18% 16%, rgba(69, 150, 255, 0.28), transparent 32%), 368 linear-gradient(180deg, rgba(14, 39, 74, 0.98), rgba(10, 28, 52, 0.98)), 369 linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.02)); 370 } 371 372 #bela-signature { 373 background: 374 radial-gradient(circle at 78% 16%, rgba(69, 150, 255, 0.28), transparent 30%), 375 linear-gradient(180deg, rgba(15, 43, 81, 0.98), rgba(11, 30, 56, 0.98)), 376 linear-gradient(110deg, rgba(255, 255, 255, 0.05), transparent 16%, transparent 84%, rgba(255, 255, 255, 0.025)); 377 } 378 379 #pricing-value { 380 background: 381 radial-gradient(circle at 82% 18%, rgba(69, 150, 255, 0.3), transparent 30%), 382 linear-gradient(180deg, rgba(14, 35, 65, 0.98), rgba(10, 27, 49, 0.98)), 383 linear-gradient(120deg, rgba(255, 255, 255, 0.045), transparent 20%, transparent 82%, rgba(255, 255, 255, 0.025)); 384 } 385 386 #faq { 387 background: 388 radial-gradient(circle at 14% 0%, rgba(69, 150, 255, 0.18), transparent 20%), 389 linear-gradient(180deg, rgba(15, 39, 74, 0.98), rgba(10, 28, 49, 0.98)); 390 } 391 392 #social-proof { 393 background: 394 radial-gradient(circle at 82% 14%, rgba(69, 150, 255, 0.2), transparent 20%), 395 linear-gradient(180deg, rgba(11, 31, 57, 0.98), rgba(10, 24, 43, 0.98)); 396 } 397 398 #for-who { 399 background: 400 radial-gradient(circle at 18% 14%, rgba(69, 150, 255, 0.22), transparent 22%), 401 linear-gradient(180deg, rgba(14, 35, 65, 0.98), rgba(11, 25, 45, 0.98)); 402 } 403 404 .for-who-shell { 405 background: 406 linear-gradient(135deg, rgba(8, 27, 51, 0.95), rgba(5, 18, 36, 0.98)), 407 linear-gradient(120deg, rgba(49, 118, 209, 0.08), transparent 25%, transparent 75%, rgba(49, 118, 209, 0.05)); 408 border: 1px solid rgba(49, 118, 209, 0.22); 409 box-shadow: 410 0 40px 100px -30px rgba(0, 0, 0, 0.7), 411 0 0 0 1px rgba(103, 170, 255, 0.05), 412 inset 0 1px 0 rgba(103, 170, 255, 0.1); 413 backdrop-filter: blur(16px); 414 -webkit-backdrop-filter: blur(16px); 415 } 416 417 .for-who-item { 418 border: 1px solid rgba(49, 118, 209, 0.18); 419 background: linear-gradient(180deg, rgba(49, 118, 209, 0.1), rgba(49, 118, 209, 0.04)); 420 box-shadow: 421 inset 0 1px 0 rgba(103, 170, 255, 0.05), 422 0 16px 36px -28px rgba(0, 0, 0, 0.9); 423 transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 424 } 425 426 .for-who-item:hover { 427 background: linear-gradient(180deg, rgba(49, 118, 209, 0.18), rgba(49, 118, 209, 0.1)); 428 border-color: rgba(49, 118, 209, 0.4); 429 transform: translateY(-4px); 430 box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.6); 431 } 432 433 .for-who-check { 434 width: 44px; 435 height: 44px; 436 border-radius: 999px; 437 display: inline-flex; 438 align-items: center; 439 justify-content: center; 440 color: #f3d77b; 441 background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), rgba(17, 55, 101, 0.65)); 442 border: 1px solid rgba(121, 178, 255, 0.22); 443 box-shadow: 0 14px 30px -22px rgba(39, 115, 216, 0.6); 444 flex-shrink: 0; 445 } 446 447 .for-who-pricing { 448 background: 449 radial-gradient(circle at top, rgba(69, 150, 255, 0.14), transparent 32%), 450 linear-gradient(180deg, rgba(9, 23, 43, 0.92), rgba(8, 18, 34, 0.96)); 451 border: 1px solid rgba(121, 178, 255, 0.16); 452 box-shadow: 453 0 26px 60px -36px rgba(0, 0, 0, 0.9), 454 inset 0 1px 0 rgba(255, 255, 255, 0.05); 455 } 456 457 #dates { 458 background: 459 radial-gradient(circle at 18% 18%, rgba(69, 150, 255, 0.2), transparent 22%), 460 linear-gradient(180deg, rgba(13, 33, 60, 0.98), rgba(10, 27, 49, 0.98)); 461 } 462 463 #niveaux { 464 background: 465 radial-gradient(circle at 82% 16%, rgba(69, 150, 255, 0.2), transparent 22%), 466 linear-gradient(180deg, rgba(13, 34, 61, 0.98), rgba(10, 27, 49, 0.98)); 467 } 468 469 footer { 470 background: 471 linear-gradient(180deg, rgba(11, 31, 58, 0.98), rgba(13, 13, 13, 1)), 472 linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.025)); 473 } 474
475 #destination-finale article, 476 #bela-signature article, 477 #bela-signature > div > div > div:first-child, 478 #pricing-value .premium-shadow, 479 #faq details { 480 box-shadow: 481 0 18px 45px -30px rgba(0, 0, 0, 0.85), 482 0 0 0 1px rgba(109, 173, 255, 0.09), 483 inset 0 1px 0 rgba(255, 255, 255, 0.045); 484 } 485 486 #concept .group { 487 background: 488 linear-gradient(180deg, rgba(20, 50, 92, 0.84), rgba(12, 31, 57, 0.92)); 489 border-color: rgba(121, 178, 255, 0.16); 490 box-shadow: 491 0 28px 60px -38px rgba(8, 20, 39, 0.82), 492 0 0 0 1px rgba(255, 255, 255, 0.03), 493 inset 0 1px 0 rgba(255, 255, 255, 0.06); 494 } 495 496 #concept .group>div.absolute.inset-0 { 497 background: linear-gradient(135deg, rgba(86, 163, 255, 0.14), transparent 55%); 498 opacity: 0.72; 499 } 500 501 #destination-finale .inline-flex { 502 background: rgba(109, 173, 255, 0.08); 503 border-color: rgba(109, 173, 255, 0.18); 504 box-shadow: 505 0 16px 36px -28px rgba(8, 20, 39, 0.52), 506 inset 0 1px 0 rgba(255, 255, 255, 0.08); 507 } 508 509 #destination-finale article, 510 #bela-signature .space-y-5>article:first-child { 511 border-color: rgba(121, 178, 255, 0.12); 512 box-shadow: 513 0 30px 70px -42px rgba(8, 20, 39, 0.64), 514 0 0 0 1px rgba(109, 173, 255, 0.08), 515 inset 0 1px 0 rgba(255, 255, 255, 0.06); 516 } 517 518 #bela-signature > div > div > div:first-child { 519 background: 520 radial-gradient(circle at top, rgba(49, 118, 209, 0.22), transparent 45%), 521 linear-gradient(180deg, rgba(8, 27, 51, 0.98), rgba(5, 18, 36, 0.98)); 522 border-color: rgba(103, 170, 255, 0.18); 523 } 524 525 #bela-signature .grid.sm\:grid-cols-2>article, 526 #faq details { 527 background: 528 linear-gradient(180deg, rgba(17, 46, 84, 0.78), rgba(12, 31, 57, 0.88)); 529 border-color: rgba(121, 178, 255, 0.14); 530 box-shadow: 531 0 24px 54px -40px rgba(8, 20, 39, 0.7), 532 0 0 0 1px rgba(109, 173, 255, 0.06), 533 inset 0 1px 0 rgba(255, 255, 255, 0.05); 534 } 535 536 #niveaux-region-select { 537 color: #f7fbff !important; 538 background: 539 linear-gradient(180deg, rgba(20, 52, 95, 0.92), rgba(12, 31, 57, 0.96)) !important; 540 border-color: rgba(121, 178, 255, 0.24) !important; 541 box-shadow: 542 0 18px 40px -28px rgba(8, 20, 39, 0.72), 543 0 0 0 1px rgba(109, 173, 255, 0.08), 544 inset 0 1px 0 rgba(255, 255, 255, 0.08); 545 } 546 547 #niveaux-region-select:focus { 548 border-color: rgba(212, 175, 55, 0.5) !important; 549 box-shadow: 550 0 18px 40px -28px rgba(8, 20, 39, 0.72), 551 0 0 0 1px rgba(212, 175, 55, 0.12), 552 inset 0 1px 0 rgba(255, 255, 255, 0.08); 553 } 554 555 .site-header.is-scrolled { 556 background-color: rgba(5, 18, 36, 0.85); 557 backdrop-filter: blur(16px); 558 -webkit-backdrop-filter: blur(16px); 559 box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); 560 } 561 562 /* Header logo: larger footprint */ 563 .site-logo { 564 height: 72px !important; 565 transform: none !important; 566 } 567 .site-header.is-scrolled .site-logo { 568 height: 60px !important; 569 transform: none !important; 570 } 571 572 .header-fever-credit { 573 margin-top: 0.45rem; 574 display: inline-flex; 575 align-items: center; 576 justify-content: center; 577 gap: 0.3rem; 578 font-size: 0.52rem; 579 line-height: 1; 580 letter-spacing: 0.24em; 581 text-transform: uppercase; 582 color: rgba(255, 255, 255, 0.44); 583 white-space: nowrap; 584 } 585 586 .header-fever-credit img { 587 height: 11px; 588 width: auto; 589 opacity: 0.56; 590 display: block; 591 } 592 593 .pricing-card { 594 background: 595 linear-gradient(180deg, rgba(9, 22, 39, 0.92), rgba(5, 14, 27, 0.97)), 596 radial-gradient(circle at top, rgba(212, 175, 55, 0.1), transparent 36%), 597 linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 45%, rgba(212, 175, 55, 0.04)); 598 border: 1px solid rgba(212, 175, 55, 0.18); 599 box-shadow: 600 0 42px 110px -52px rgba(0, 0, 0, 0.96), 601 0 0 0 1px rgba(255, 255, 255, 0.03), 602 inset 0 1px 0 rgba(255, 255, 255, 0.08), 603 inset 0 -30px 60px rgba(0, 0, 0, 0.22); 604 backdrop-filter: blur(16px); 605 -webkit-backdrop-filter: blur(16px); 606 } 607 608 .pricing-card__body { 609 padding: 1.55rem 1.55rem 1.2rem; 610 } 611 612 .pricing-card__footer { 613 padding: 1rem 1.25rem 1.15rem; 614 border-top: 1px solid rgba(255, 255, 255, 0.08); 615 background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)); 616 } 617 618 .pricing-card::before { 619 content: ""; 620 position: absolute; 621 inset: 1px; 622 border-radius: inherit; 623 border: 1px solid rgba(255, 255, 255, 0.05); 624 pointer-events: none; 625 } 626 627 .pricing-card::after { 628 content: ""; 629 position: absolute; 630 top: 0; 631 left: 12%; 632 width: 76%; 633 height: 1px; 634 background: linear-gradient(90deg, transparent, rgba(245, 227, 181, 0.9), transparent); 635 opacity: 0.75; 636 pointer-events: none; 637 } 638 639 .pricing-card__eyebrow { 640 display: inline-flex; 641 align-items: center; 642 justify-content: center; 643 padding: 0; 644 border: 0; 645 background: transparent; 646 color: rgba(245, 227, 181, 0.92); 647 font-size: 0.66rem; 648 font-weight: 700; 649 letter-spacing: 0.28em; 650 text-transform: uppercase; 651 } 652 653 .pricing-card__divider { 654 width: 100%; 655 height: 1px; 656 margin: 0.8rem 0 0.9rem; 657 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); 658 } 659 660 .pricing-card__price { 661 display: flex; 662 align-items: flex-end; 663 justify-content: center; 664 gap: 0.3rem; 665 line-height: 1; 666 } 667 668 .pricing-card__price-main { 669 font-family: "Playfair Display", serif; 670 font-size: clamp(3.3rem, 6vw, 4.2rem); 671 font-weight: 700; 672 letter-spacing: -0.02em; 673 color: #fff; 674 text-shadow: 0 6px 20px rgba(0, 0, 0, 0.24); 675 } 676 677 .pricing-card__price-currency { 678 font-family: "Playfair Display", serif; 679 font-size: 1.65rem; 680 font-weight: 600; 681 color: #d4af37; 682 transform: translateY(-0.18rem); 683 } 684 685 .pricing-card__subline { 686 display: inline-flex; 687 align-items: center; 688 gap: 0.55rem; 689 font-size: 0.69rem; 690 font-weight: 700; 691 letter-spacing: 0.16em; 692 text-transform: uppercase; 693 color: rgba(255, 255, 255, 0.48); 694 } 695 696 .pricing-card__subline::before, 697 .pricing-card__subline::after { 698 content: ""; 699 width: 18px; 700 height: 1px; 701 background: rgba(255, 255, 255, 0.18); 702 } 703 704 .pricing-card__microcopy { 705 max-width: 14rem; 706 margin: 0 auto; 707 font-size: 0.8rem; 708 line-height: 1.45; 709 color: rgba(255, 255, 255, 0.68); 710 } 711 712 .pricing-card__trust { 713 font-size: 0.7rem; 714 letter-spacing: 0.06em; 715 color: rgba(255, 255, 255, 0.58); 716 } 717 718 .pricing-card__partner { 719 font-size: 0.62rem; 720 letter-spacing: 0.12em; 721 text-transform: uppercase; 722 color: rgba(255, 255, 255, 0.5); 723 } 724 725 :root { 726 --section-anchor-offset: 7.5rem; 727 } 728 729 html { 730 scroll-padding-top: var(--section-anchor-offset); 731 } 732 733 section[id] { 734 scroll-margin-top: var(--section-anchor-offset); 735 } 736 737 @media (max-width: 768px) { 738 :root { 739 --section-anchor-offset: 9.5rem; 740 } 741 } 742 743 .journey-bar { 744 position: fixed; 745 left: 50%; 746 bottom: 14px; 747 transform: translateX(-50%); 748 width: min(680px, calc(100% - 24px)); 749 z-index: 55; 750 padding: 10px; 751 border-radius: 16px; 752 background: rgba(13, 13, 13, 0.7); 753 border: 1px solid rgba(255, 255, 255, 0.1);
754 box-shadow: 0 26px 70px -34px rgba(0, 0, 0, 0.95), 755 0 0 0 1px rgba(212, 175, 55, 0.08); 756 backdrop-filter: blur(14px); 757 } 758 759 .journey-bar--single { 760 width: fit-content; 761 max-width: calc(100% - 24px); 762 } 763 764 html.overflow-hidden .journey-bar, 765 body.overflow-hidden .journey-bar { 766 display: none; 767 } 768 769 .journey-bar__inner { 770 display: grid; 771 grid-template-columns: 1fr 1fr; 772 gap: 10px; 773 } 774 775 .journey-bar .btn-wpq { 776 width: 100%; 777 text-align: center; 778 justify-content: center; 779 } 780 781 .journey-bar__inner--single { 782 display: flex; 783 justify-content: center; 784 } 785 786 .journey-bar__inner--single .btn-wpq { 787 width: auto; 788 min-width: min(360px, 100%); 789 } 790 791 .journey-bar--hidden { 792 display: none; 793 } 794 795 .video-play-badge { 796 position: absolute; 797 left: 50%; 798 top: 50%; 799 transform: translate(-50%, -50%); 800 width: 52px; 801 height: 52px; 802 border-radius: 999px; 803 background: #ff0000; 804 box-shadow: 0 18px 45px -20px rgba(0, 0, 0, 0.9); 805 display: grid; 806 place-items: center; 807 pointer-events: none; 808 } 809 810 .video-play-badge::before { 811 content: ""; 812 margin-left: 4px; 813 width: 0; 814 height: 0; 815 border-top: 8px solid transparent; 816 border-bottom: 8px solid transparent; 817 border-left: 13px solid #fff; 818 } 819 820 .video-play-badge.is-hidden { 821 opacity: 0; 822 } 823 824 @media (min-width: 768px) { 825 .video-play-badge { 826 width: 60px; 827 height: 60px; 828 } 829 830 .video-play-badge::before { 831 border-top-width: 9px; 832 border-bottom-width: 9px; 833 border-left-width: 15px; 834 } 835 } 836 837 @keyframes chevron-pulse { 838 839 0%, 840 100% { 841 opacity: 0.35; 842 transform: translateY(0); 843 } 844 845 50% { 846 opacity: 1; 847 transform: translateY(2px); 848 } 849 } 850 851 .category-chevron { 852 animation: chevron-pulse 1.4s ease-in-out infinite; 853 } 854 855 details[open] .category-chevron { 856 animation: none; 857 opacity: 1; 858 transform: none; 859 } 860 861 .feature-card { 862 position: relative; 863 overflow: hidden; 864 border-radius: 18px; 865 border: 1px solid rgba(212, 175, 55, 0.18); 866 background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); 867 box-shadow: 0 18px 45px -28px rgba(0, 0, 0, 0.85), 868 inset 0 1px 0 rgba(255, 255, 255, 0.08); 869 transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; 870 } 871 872 .feature-card::before { 873 content: ""; 874 position: absolute; 875 inset: 0; 876 background: radial-gradient(circle at 20% 15%, rgba(212, 175, 55, 0.14), transparent 55%); 877 opacity: 0.7; 878 pointer-events: none; 879 } 880 881 .feature-card:hover { 882 transform: translateY(-6px); 883 border-color: rgba(212, 175, 55, 0.4); 884 box-shadow: 0 28px 65px -30px rgba(0, 0, 0, 0.8), 885 0 0 0 1px rgba(212, 175, 55, 0.25); 886 } 887 888 .feature-card__icon { 889 width: 52px; 890 height: 52px; 891 border-radius: 999px; 892 display: inline-flex; 893 align-items: center; 894 justify-content: center; 895 background: rgba(212, 175, 55, 0.12); 896 border: 1px solid rgba(212, 175, 55, 0.3); 897 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); 898 } 899 900 @media (min-width: 1024px) { 901 .journey-bar { 902 bottom: 18px; 903 } 904 } 905 906 @media (max-width: 640px) { 907 .journey-bar { 908 left: 10px; 909 right: 92px; 910 transform: none; 911 width: auto; 912 max-width: none; 913 padding: 8px; 914 border-radius: 14px; 915 } 916 917 .journey-bar--single { 918 width: auto; 919 max-width: none; 920 } 921 922 .journey-bar__inner { 923 grid-template-columns: 1fr; 924 gap: 8px; 925 } 926 927 .journey-bar .btn-wpq { 928 padding: 0.75rem 1rem; 929 font-size: 0.75rem; 930 letter-spacing: 0.14em; 931 } 932 } 933 934 @media (min-width: 640px) { 935 .partner-track img { 936 height: 3.5rem; 937 } 938
939 .region-city { 940 font-size: 1.2rem; 941 } 942 943 .region-date { 944 font-size: 0.9rem; 945 } 946 } 947 948 @media (min-width: 768px) { 949 .partner-track img { 950 height: 4rem; 951 } 952 953 .region-city { 954 font-size: 1.3rem; 955 } 956 957 .region-date { 958 font-size: 0.95rem; 959 } 960 } 961 962 @media (max-width: 639px) { 963 .partners-strip { 964 padding-top: 1.5rem; 965 padding-bottom: 1.5rem; 966 } 967 968 .calendar-cta { 969 width: min(100%, 19rem); 970 padding: 0.9rem 1.2rem; 971 font-size: 0.72rem; 972 letter-spacing: 0.1em; 973 gap: 0.75rem; 974 line-height: 1; 975 } 976 977 .calendar-cta .material-symbols-outlined { 978 font-size: 1rem; 979 line-height: 1; 980 } 981 982 .hero-secondary, 983 .region-date, 984 .calendar-card__body, 985 .for-who-item p, 986 [class*="text-white/70"], 987 [class*="text-white/72"], 988 [class*="text-white/75"], 989 [class*="text-white/80"] { 990 color: rgba(255, 255, 255, 0.94); 991 text-shadow: 0 1px 14px rgba(0, 0, 0, 0.42); 992 } 993 994 [class*="text-white/55"], 995 [class*="text-white/60"] { 996 color: rgba(255, 255, 255, 0.82); 997 text-shadow: 0 1px 12px rgba(0, 0, 0, 0.38); 998 } 999 1000 .hero-title, 1001 .font-headingCondensed, 1002 [class*="text-white/90"], 1003 [class*="text-white/88"] { 1004 text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); 1005 } 1006 1007 .partner-marquee { 1008 overflow-x: auto; 1009 overflow-y: hidden; 1010 -webkit-overflow-scrolling: touch; 1011 touch-action: pan-x; 1012 cursor: grab; 1013 } 1014 1015 .partner-marquee:active { 1016 cursor: grabbing; 1017 } 1018 1019 .partner-marquee:active .partner-track { 1020 animation-play-state: paused; 1021 } 1022 1023 .partner-track { 1024 animation-duration: 80s; 1025 } 1026 1027 .region-marquee { 1028 overflow-x: auto; 1029 overflow-y: hidden; 1030 -webkit-overflow-scrolling: touch; 1031 touch-action: pan-x; 1032 cursor: grab; 1033 } 1034 1035 .region-marquee::before, 1036 .region-marquee::after { 1037 display: none; 1038 } 1039 1040 .region-marquee:active { 1041 cursor: grabbing; 1042 } 1043 1044 .region-marquee:active .region-track { 1045 animation-play-state: paused; 1046 } 1047 } 1048 1049 @media (min-width: 640px) { 1050 .hero-secondary, 1051 .region-date, 1052 .calendar-card__body, 1053 .for-who-item p, 1054 [class*="text-white/70"], 1055 [class*="text-white/72"], 1056 [class*="text-white/75"], 1057 [class*="text-white/80"] { 1058 color: rgba(255, 255, 255, 0.9); 1059 text-shadow: 0 1px 10px rgba(0, 0, 0, 0.24); 1060 } 1061 1062 [class*="text-white/55"], 1063 [class*="text-white/60"] { 1064 color: rgba(255, 255, 255, 0.76); 1065 text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); 1066 } 1067 1068 .hero-title, 1069 .font-headingCondensed, 1070 [class*="text-white/90"], 1071 [class*="text-white/88"] { 1072 text-shadow: 0 2px 14px rgba(0, 0, 0, 0.24); 1073 } 1074 } 1075 1076 @media (min-width: 769px) { 1077 .hero-bg { 1078 background-image: url("/images/bela/bela-padel-center-court.jpg") !important; 1079 } 1080 } 1081 1082 @media (max-width: 768px) { 1083 .hero-bg { 1084 background-image: url("/images/bela/bela-padel-center-court.jpg") !important; 1085 background-position: center; 1086 } 1087 1088 .hero-bg__video { 1089 display: none; 1090 } 1091 } 1092 1093 @media (max-width: 768px) and (min-resolution: 192dpi) { 1094 .hero-bg { 1095 background-image: url("/images/bela/bela-padel-center-court.jpg") !important; 1096 } 1097 } 1098 .instagram-extra { 1099 display: none; 1100 } 1101 1102 .instagram-extra.instagram-extra--shown { 1103 display: block; 1104 } 1105 @media (min-width: 640px) { 1106 .instagram-extra { 1107 display: block; 1108 } 1109 } 1110 1111 /* ------- Bela video player ------- */ 1112 .bela-phone { 1113 position: relative; 1114 width: 100%; 1115 max-width: 360px; 1116 margin-inline: auto; 1117 perspective: 1200px; 1118 } 1119 @media (min-width: 640px) { 1120 .bela-phone { max-width: 380px; } 1121 } 1122 @media (min-width: 1024px) { 1123 .bela-phone { max-width: 400px; } 1124 } 1125 .bela-phone::before { 1126 content: ""; 1127 position: absolute; 1128 inset: 10% -32% -22% -32%; 1129 background: 1130 radial-gradient(ellipse at 50% 55%, rgba(212,175,55,0.38) 0%, rgba(212,175,55,0) 58%), 1131 radial-gradient(ellipse at 25% 80%, rgba(103,170,255,0.3) 0%, rgba(103,170,255,0) 55%); 1132 filter: blur(48px); 1133 z-index: -1; 1134 pointer-events: none; 1135 } 1136 .bela-phone__frame { 1137 position: relative; 1138 aspect-ratio: 9 / 16.2; 1139 border-radius: 2.6rem; 1140 padding: 10px; 1141 background: 1142 linear-gradient(145deg, #1a1a1d 0%, #0a0a0c 55%, #1a1a1d 100%); 1143 box-shadow: 1144 0 40px 80px -30px rgba(0, 0, 0, 0.85), 1145 0 20px 40px -20px rgba(212, 175, 55, 0.18), 1146 inset 0 0 0 1.5px rgba(212, 175, 55, 0.28), 1147 inset 0 0 0 3px rgba(0, 0, 0, 0.9), 1148 inset 0 0 0 4px rgba(255, 255, 255, 0.04); 1149 } 1150 .bela-phone__frame::before { 1151 content: ""; 1152 position: absolute; 1153 inset: 4px; 1154 border-radius: 2.4rem; 1155 background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0) 45%); 1156 pointer-events: none; 1157 z-index: 1; 1158 } 1159 .bela-phone__notch { 1160 position: absolute; 1161 top: 16px; 1162 left: 50%; 1163 transform: translateX(-50%); 1164 width: 34%; 1165 height: 22px; 1166 background: #000; 1167 border-radius: 9999px; 1168 z-index: 5; 1169 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); 1170 } 1171 .bela-phone__notch::after { 1172 content: ""; 1173 position: absolute; 1174 top: 50%; 1175 right: 18%; 1176 transform: translateY(-50%); 1177 width: 6px; 1178 height: 6px; 1179 border-radius: 9999px; 1180 background: radial-gradient(circle at 35% 35%, #2a3a55 0%, #070b15 70%); 1181 box-shadow: 0 0 0 1px rgba(255,255,255,0.08); 1182 } 1183 .bela-phone__button { 1184 position: absolute; 1185 background: linear-gradient(90deg, #2a2a2d, #0a0a0c); 1186 border-radius: 2px; 1187 z-index: 0; 1188 } 1189 .bela-phone__button--power { 1190 right: -2px; 1191 top: 28%; 1192 width: 3px; 1193 height: 58px; 1194 border-radius: 0 2px 2px 0; 1195 } 1196 .bela-phone__button--vol-up { 1197 left: -2px; 1198 top: 22%; 1199 width: 3px; 1200 height: 40px; 1201 border-radius: 2px 0 0 2px; 1202 } 1203 .bela-phone__button--vol-down { 1204 left: -2px; 1205 top: calc(22% + 52px); 1206 width: 3px; 1207 height: 40px; 1208 border-radius: 2px 0 0 2px; 1209 } 1210 .bela-phone__screen { 1211 position: relative; 1212 width: 100%; 1213 height: 100%; 1214 border-radius: 2.1rem; 1215 overflow: hidden; 1216 background: #07111f; 1217 z-index: 2; 1218 } 1219 .bela-player__video { 1220 position: absolute; 1221 inset: 0; 1222 width: 100%; 1223 height: 100%; 1224 object-fit: cover; 1225 background: #07111f; 1226 } 1227 .bela-player__overlay { 1228 position: absolute; 1229 inset: 0; 1230 background: linear-gradient(to top, rgba(7,17,31,0.82), transparent 50%, rgba(7,17,31,0.16)); 1231 pointer-events: none; 1232 transition: opacity .4s ease; 1233 } 1234 .bela-player__glow { 1235 position: absolute; 1236 inset: 0; 1237 background: radial-gradient(circle at 50% 18%, rgba(212,175,55,0.14), transparent 34%); 1238 pointer-events: none; 1239 transition: opacity .4s ease; 1240 } 1241 .bela-player__caption { 1242 position: absolute; 1243 left: 14px; 1244 right: 14px; 1245 bottom: 18px; 1246 padding: 12px 14px; 1247 border-radius: 1rem; 1248 border: 1px solid rgba(255,255,255,0.1); 1249 background: rgba(0,0,0,0.38); 1250 backdrop-filter: blur(10px); 1251 -webkit-backdrop-filter: blur(10px); 1252 transition: opacity .4s ease; 1253 } 1254 .bela-player.is-playing .bela-player__overlay, 1255 .bela-player.is-playing .bela-player__glow, 1256 .bela-player.is-playing .bela-player__caption { 1257 opacity: 0; 1258 pointer-events: none; 1259 } 1260 .bela-player__play { 1261 position: absolute; 1262 top: 50%; 1263 left: 50%; 1264 transform: translate(-50%, -50%); 1265 width: 72px; 1266 height: 72px; 1267 z-index: 4; 1268 display: inline-flex; 1269 align-items: center; 1270 justify-content: center; 1271 border-radius: 9999px; 1272 border: 1px solid rgba(212, 175, 55, 0.55); 1273 background: rgba(7, 17, 31, 0.55); 1274 backdrop-filter: blur(8px); 1275 -webkit-backdrop-filter: blur(8px); 1276 color: #d4af37; 1277 cursor: pointer; 1278 z-index: 3; 1279 box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6), 0 0 0 8px rgba(212, 175, 55, 0.08); 1280 transition: transform .25s ease, background .25s ease, opacity .35s ease; 1281 } 1282 .bela-player__play svg { 1283 width: 26px;
1284 height: 26px; 1285 margin-left: 3px; 1286 position: relative; 1287 z-index: 2; 1288 } 1289 .bela-player__play:hover { 1290 transform: translate(-50%, -50%) scale(1.06); 1291 background: rgba(7, 17, 31, 0.7); 1292 } 1293 .bela-player__play-ring { 1294 position: absolute; 1295 inset: -6px; 1296 border-radius: 9999px; 1297 border: 1px solid rgba(212, 175, 55, 0.35); 1298 animation: bela-pulse 2.4s ease-out infinite; 1299 } 1300 @keyframes bela-pulse { 1301 0% { transform: scale(1); opacity: .7; } 1302 80% { transform: scale(1.35); opacity: 0; } 1303 100% { transform: scale(1.35); opacity: 0; } 1304 } 1305 .bela-player.is-playing .bela-player__play { 1306 opacity: 0; 1307 pointer-events: none; 1308 } 1309 .bela-player__sound { 1310 position: absolute; 1311 top: 16px; 1312 right: 16px; 1313 width: 42px; 1314 height: 42px; 1315 display: inline-flex; 1316 align-items: center; 1317 justify-content: center; 1318 border-radius: 9999px; 1319 border: 1px solid rgba(255, 255, 255, 0.18); 1320 background: rgba(7, 17, 31, 0.55); 1321 backdrop-filter: blur(8px); 1322 -webkit-backdrop-filter: blur(8px); 1323 color: #fff; 1324 cursor: pointer; 1325 z-index: 4; 1326 opacity: 0; 1327 transform: translateY(-4px); 1328 pointer-events: none; 1329 transition: opacity .3s ease, transform .3s ease, background .2s ease, border-color .2s ease; 1330 } 1331 .bela-player.is-playing .bela-player__sound { 1332 opacity: 1; 1333 transform: translateY(0); 1334 pointer-events: auto; 1335 } 1336 .bela-player__sound:hover { 1337 background: rgba(7, 17, 31, 0.78); 1338 border-color: rgba(212, 175, 55, 0.5); 1339 } 1340 .bela-player__sound svg { 1341 width: 20px; 1342 height: 20px; 1343 } 1344 .bela-player__sound .bela-player__icon-off { display: none; } 1345 .bela-player.is-muted .bela-player__sound .bela-player__icon-on { display: none; } 1346 .bela-player.is-muted .bela-player__sound .bela-player__icon-off { display: block; } 1347 1348 /* Le portail tient dans un ecran, pied compris. Cette feuille n'est 1349 servie que sur cette page, d'ou la regle sur `body` : l'en-tete est 1350 en `position: fixed` et ne compte pas, ne restent que les pans et le 1351 pied. Les pans prenaient la hauteur entiere de la fenetre, si bien 1352 que la page depassait exactement de la hauteur du pied et faisait 1353 apparaitre une barre de defilement pour quarante pixels. */ 1354 body { 1355 display: flex; 1356 flex-direction: column; 1357 min-height: 100vh; 1358 min-height: 100dvh; 1359 } 1360 1361 /* Bord a bord, sans marge ni gouttiere : ce sont les aplats qui font la 1362 mise en page, pas des cartes posees sur un fond. */ 1363 .pq-pans { 1364 display: grid; 1365 grid-template-columns: repeat(3, 1fr); 1366 /* Ce qui reste sous le pied, pas la fenetre entiere. */ 1367 flex: 1; 1368 min-height: 0; 1369 background: #0a0a0a; 1370 } 1371 1372 .pq-pan { 1373 position: relative; 1374 display: flex; 1375 flex-direction: column; 1376 justify-content: space-between; 1377 min-height: 0; 1378 overflow: hidden; 1379 text-decoration: none; 1380 /* L'en-tete flotte par-dessus la page : il faut lui laisser le 1381 passage, et la meme garde aux trois colonnes, sans quoi leurs 1382 intitules ne seraient plus sur une ligne. */ 1383 padding: 6.25rem 1.1rem 1.6rem; 1384 } 1385 1386 @media (min-width: 880px) and (orientation: landscape) { 1387 .pq-pan { 1388 padding: 7.5rem 2rem 2.5rem; 1389 } 1390 } 1391 1392 /* La photographie ne fait pas le pan, elle le texture. A cette 1393 opacite elle donne de la matiere sans jamais disputer l'aplat, et 1394 c'est l'aplat qui identifie l'univers. */ 1395 .pq-pan-texture { 1396 position: absolute; 1397 inset: 0; 1398 background-size: cover; 1399 background-repeat: no-repeat; 1400 /* En colonne haute et etroite l'ancrage bas cadre bien : les sujets 1401 remontent dans le pan, sous le mot geant. */ 1402 background-position: center 62%; 1403 opacity: 0.11; 1404 transition: opacity 0.8s ease, transform 1.2s cubic-bezier(0.25, 0.8, 0.35, 1); 1405 } 1406 1407 .pq-pan > *:not(.pq-pan-texture) { 1408 position: relative; 1409 /* Au-dessus du fondu du pan magazine, qui est en z-index 0. Sans
1410 cette cote, le pseudo-element etant le dernier enfant, il 1411 passerait devant le texte. */ 1412 z-index: 1; 1413 } 1414 1415 /* La ligne du haut ne porte plus que l'intitule : la numerotation 1416 « 01 / 02 / 03 » a ete retiree le 9 septembre 2026 a la demande de 1417 l'utilisateur. Le bloc reste, il porte l'entree en scene. */ 1418 .pq-pan-haut { display: block; } 1419 1420 /* Les logos des univers, ajoutes le 16 septembre 2026. Ils prennent la 1421 bande du logo World Padel Quest, que l'en-tete flottant pose au-dessus 1422 de la colonne du tournoi, centre a 40 px du haut : les trois marques 1423 se lisent sur une ligne. Choix de l'utilisateur sur planche, contre 1424 des logos a la place des noms au pied des pans, ou la colonne du 1425 tournoi restait seule en texte. 1426 1427 Hors du flux, pour ne rien deplacer de la garde ni du mot geant. La 1428 regle doit venir apres `.pq-pan > *:not(.pq-pan-texture)`, de meme 1429 specificite, qui les remettrait en position relative. La hauteur est 1430 fixe et la largeur bornee a la colonne : `object-fit` reduit le logo 1431 sans le deformer quand la colonne est trop etroite, sur telephone. 1432 1433 Le logo des Awards est en or, et l'or sur l'aplat or ne se voyait 1434 plus du tout : il prend l'encre sombre, comme tout le texte du pan. */ 1435 .pq-pan > .pq-pan-logo { 1436 --pq-logo: 44px; 1437 position: absolute; 1438 top: calc(40px - var(--pq-logo) / 2); 1439 left: 1.1rem; 1440 width: calc(100% - 2.2rem); 1441 height: var(--pq-logo); 1442 object-fit: contain; 1443 object-position: left center; 1444 pointer-events: none; 1445 } 1446 1447 .pq-pan-awards .pq-pan-logo { 1448 filter: brightness(0); 1449 opacity: 0.86; 1450 } 1451 1452 @media (min-width: 880px) and (orientation: landscape) { 1453 .pq-pan > .pq-pan-logo { 1454 --pq-logo: 52px; 1455 left: 2rem; 1456 width: calc(100% - 4rem); 1457 } 1458 } 1459 1460 @media (max-width: 599px) { 1461 .pq-pan > .pq-pan-logo { 1462 --pq-logo: 30px; 1463 left: 0.8rem; 1464 width: calc(100% - 1.6rem); 1465 } 1466 } 1467 1468 /* Le logo World Padel Quest sur le meme alignement que les deux autres. 1469 Demande de l'utilisateur le 16 septembre 2026, « pour que ce soit 1470 equilibre sur desktop ». L'en-tete commun range sa marque dans un 1471 conteneur centre de 1280 px : a 1440 px de large elle tombait a 1472 104 px du bord, quand les logos des Awards et du magazine sont au 1473 retrait des colonnes, 32 px. Sur le portail seul (cette feuille n'est 1474 servie que la), le conteneur prend toute la largeur et le retrait des 1475 pans, a chaque palier. Le fichier du logo n'a pas de marge 1476 transparente : le bord de l'image est le bord de l'encre. */ 1477 #site-header > div { 1478 max-width: none; 1479 padding-left: 1.1rem; 1480 padding-right: 1.1rem; 1481 } 1482 1483 @media (min-width: 880px) and (orientation: landscape) { 1484 #site-header > div { 1485 padding-left: 2rem; 1486 padding-right: 2rem; 1487 } 1488 } 1489 1490 @media (max-width: 599px) { 1491 #site-header > div { 1492 padding-left: 0.8rem; 1493 padding-right: 0.8rem; 1494 } 1495 } 1496 1497 .pq-pan-eyebrow { 1498 font-size: 0.66rem; 1499 letter-spacing: 0.32em; 1500 text-indent: 0.32em; 1501 text-transform: uppercase; 1502 /* Graisse et opacite remontees le 22 septembre 2026 : « on ne voit 1503 pas le texte, en gris sur le fond jaune, et il est ecrit trop 1504 fin ». En graisse normale a 72 %, l'encre sombre virait au gris 1505 sur l'or. */ 1506 font-weight: 600; 1507 opacity: 0.88; 1508 } 1509 1510 /* Le mot geant, tourne le long du pan. Il se lit de bas en haut, comme 1511 sur la reference. Il est en aria-hidden : le nom complet est juste 1512 dessous, en clair, et un lecteur d'ecran n'a pas a entendre deux fois 1513 la meme chose. */ 1514 /* Le mot geant, tourne le long du pan. Il se lit de bas en haut, comme 1515 sur la reference. 1516 1517 Il reste dans le flux, comme element du milieu de la colonne : sorti 1518 du flux, il montait sur la ligne d'index et sur le logo, et se 1519 faisait rogner par le haut du pan. En restant dedans, il prend 1520 exactement la place que lui laissent la ligne du haut et le pied. 1521 1522 Le corps est plafonne pour le mot le plus long : « Magazine » compte 1523 huit lettres, et un texte vertical additionne leurs chasses sur la 1524 hauteur disponible. Le rognage reste en filet de securite pour les 1525 fenetres tres basses. 1526 1527 En aria-hidden : le nom complet est juste dessous, en clair, et un 1528 lecteur d'ecran n'a pas a entendre deux fois la meme chose. */ 1529 .pq-pan-mot { 1530 writing-mode: vertical-rl; 1531 transform: rotate(180deg); 1532 align-self: flex-start; 1533 min-height: 0; 1534 /* Marge haute automatique : les trois mots finissent alors a la 1535 meme hauteur, juste au-dessus du pied, comme sur la reference. 1536 Centres, ils flottaient chacun a son altitude parce qu'ils n'ont 1537 pas le meme nombre de lettres. */ 1538 margin: 1.25rem -0.22em; 1539 margin-top: auto; 1540 /* La boite est plus etroite que les glyphes : une interligne de 0,9 1541 vaut ici une largeur, et le rognage de securite coupait la hampe 1542 basse du « g » de Magazine. On elargit la boite de 0,22 cadratin 1543 de chaque cote et on la recale d'autant en marge negative : le 1544 mot ne bouge pas d'un pixel, seul le rognage recule. */ 1545 padding: 0 0.22em; 1546 overflow: hidden; 1547 /* Le texte etant vertical, c'est la hauteur qui borne le corps, et 1548 le `min()` avec elle est indispensable : un corps en `vw` seul 1549 donnait 112 px sur un telephone couche, ou l'ecran n'a que 390 px 1550 de haut, et le mot y depassait son pan de trois cents pixels. */ 1551 font-size: clamp(2.6rem, min(12vw, 9svh), 6rem); 1552 font-weight: 800; 1553 letter-spacing: -0.03em; 1554 line-height: 0.9; 1555 pointer-events: none; 1556 } 1557 1558 @media (min-width: 880px) and (orientation: landscape) { 1559 .pq-pan-mot { 1560 font-size: clamp(2.8rem, 5vw, 5rem); 1561 margin-bottom: 1.75rem; 1562 } 1563 } 1564 1565 .pq-pan-pied { 1566 display: block; 1567 max-width: 22rem; 1568 } 1569 1570 /* Le pied s'est agrandi d'un cran le 21 septembre 2026, a la demande de
1571 l'utilisateur : « le texte aussi est trop petit ». Les trois pans 1572 montent ensemble, leurs pieds devant rester alignes et se lire comme 1573 une seule ligne d'horizon. */ 1574 .pq-pan-nom { 1575 display: block; 1576 font-size: 1.28rem; 1577 font-weight: 700; 1578 letter-spacing: -0.005em; 1579 line-height: 1.25; 1580 } 1581 1582 /* La micro-typographie technique de la reference, ou l'on trouvait le 1583 code hexadecimal et les valeurs RVB. Ici ce sont les faits : ce qu'on 1584 vient chercher dans chaque univers. */ 1585 .pq-pan-faits { 1586 display: block; 1587 margin-top: 0.7rem; 1588 font-size: 0.86rem; 1589 line-height: 1.6; 1590 letter-spacing: 0.02em; 1591 /* Deux tiers d'opacite tenaient de la micro-typographie de la 1592 reference ; sur l'or, l'encre sombre y virait au gris et les deux 1593 lignes passaient pour une legende. */ 1594 font-weight: 500; 1595 opacity: 0.92; 1596 } 1597 1598 .pq-pan-faits span { display: block; } 1599 1600 /* Sur l'or, aucune transparence : la moindre laisse passer la 1601 photographie et grise l'encre. */ 1602 .pq-pan-awards .pq-pan-eyebrow, 1603 .pq-pan-awards .pq-pan-faits { 1604 font-weight: 600; 1605 opacity: 1; 1606 } 1607 1608 .pq-pan-action { 1609 display: inline-flex; 1610 align-items: center; 1611 gap: 0.5rem; 1612 margin-top: 1.35rem; 1613 font-size: 0.74rem; 1614 font-weight: 700; 1615 letter-spacing: 0.18em; 1616 text-transform: uppercase; 1617 } 1618 1619 .pq-pan-action svg { 1620 width: 1rem; 1621 height: 1rem; 1622 fill: none; 1623 stroke: currentColor; 1624 stroke-width: 2; 1625 stroke-linecap: round; 1626 stroke-linejoin: round; 1627 transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.35, 1); 1628 } 1629 1630 /* L'action de chaque pan est un bouton, meme forme pour les trois. 1631 1632 Demande de l'utilisateur le 21 septembre 2026 : « c'est trop petit et 1633 peu visible pour que les gens cliquent direct », puis « il faut 1634 aligner le design au niveau des trois cartes ». Mesure avant 1635 retouche, sur le lien ecrit des Awards : 77 x 18 px sur un ecran de 1636 1440, 57 x 14 px sur un telephone â sous la cible tactile de 1637 quarante-quatre pixels, et sans rien qui dise qu'on peut appuyer. 1638 1639 Le pan entier est deja cliquable : le bouton ne change pas ce qui 1640 l'est, il le dit. 1641 1642 Une seule forme, trois habillages, chacun tire de l'aplat qu'il 1643 porte : sur l'or, l'encre sombre, le contraste inverse qui fait deja 1644 la signature des Awards ; sur le bleu nuit, l'or de la charte, qui y 1645 est la couleur des actions ; sur le noir du magazine, un contour 1646 seul, parce que « Bientot » n'est pas une action et ne doit pas se 1647 faire cliquer. */ 1648 .pq-pan-bouton { 1649 margin-top: 1.5rem; 1650 padding: 0.85rem 1.35rem; 1651 border: 1px solid transparent; 1652 border-radius: 999px; 1653 font-size: 0.8rem; 1654 letter-spacing: 0.16em; 1655 /* Un plancher commun : sans lui, « Voter » faisait une pastille a 1656 cote du bouton du tournoi, et les trois ne se lisaient plus comme 1657 une serie. « Decouvrir », plus long, depasse ce plancher. */ 1658 min-width: 9.5rem; 1659 justify-content: center; 1660 box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.85); 1661 transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.35, 1), 1662 box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.35, 1); 1663 } 1664 1665 /* L'or clair de la charte : sur l'encre, il rend la marque au bouton 1666 sans ramener du blanc dans un pan qui n'en a pas. */ 1667 .pq-pan-awards .pq-pan-bouton { 1668 background: #0d0d0d; 1669 color: #f5dd9a; 1670 } 1671 1672 .pq-pan-tournoi .pq-pan-bouton { 1673 background: #d4af37; 1674 color: #0b1b3a; 1675 } 1676 1677 /* Ni fond ni ombre : la pastille garde la forme des deux autres et 1678 s'arrete la. Elle annonce un etat, pas un geste. */ 1679 .pq-pan-magazine .pq-pan-bouton { 1680 background: none; 1681 border-color: rgba(255, 255, 255, 0.34); 1682 color: #ffffff; 1683 opacity: 0.72; 1684 box-shadow: none; 1685 } 1686 1687 a.pq-pan:hover .pq-pan-bouton { 1688 transform: translateY(-2px); 1689 box-shadow: 0 22px 34px -18px rgba(0, 0, 0, 0.9); 1690 } 1691 1692 a.pq-pan:active .pq-pan-bouton { 1693 transform: translateY(0); 1694 transition: transform 0.15s ease; 1695 } 1696 1697 @media (min-width: 880px) and (orientation: landscape) { 1698 .pq-pan-bouton { 1699 padding: 0.95rem 1.6rem; 1700 font-size: 0.84rem; 1701 } 1702 1703 .pq-pan-nom { font-size: 1.45rem; } 1704 1705 .pq-pan-faits { 1706 font-size: 0.92rem; 1707 margin-top: 0.85rem; 1708 } 1709 } 1710 1711 a.pq-pan:hover .pq-pan-texture { 1712 opacity: 0.28; 1713 transform: scale(1.04); 1714 } 1715 1716 /* Le magazine n'est pas un lien, mais sa photographie s'agrandit comme 1717 les deux autres au survol : sans ce zoom, la colonne paraissait 1718 figee a cote de ses voisines. Signale par l'utilisateur le 16 1719 septembre 2026. Seul le mouvement est repris : pas de fleche, et son 1720 voile est deja a sa valeur de survol. */ 1721 .pq-pan-magazine:hover .pq-pan-texture { transform: scale(1.04); } 1722 1723 a.pq-pan:hover .pq-pan-action svg { transform: translateX(5px); } 1724 1725 /* Sans survol, un pan touche ne renvoie rien : la meme fleche avance, 1726 et le bloc de texte s'attenue le temps de l'appui. */ 1727 a.pq-pan:active .pq-pan-action svg { transform: translateX(5px); } 1728 1729 a.pq-pan:active .pq-pan-pied { 1730 opacity: 0.65; 1731 transition: opacity 0.15s ease; 1732 } 1733 1734 a.pq-pan:focus-visible { 1735 outline: 3px solid currentColor; 1736 outline-offset: -3px; 1737 } 1738 1739 /* Les trois couleurs de la charte, une par univers. L'or passe en aplat 1740 et prend l'encre sombre : c'est le seul contraste inverse des trois, 1741 et c'est ce qui fait ressortir le pan des Awards. */ 1742 .pq-pan-tournoi { 1743 background: #0b1b3a; 1744 color: #ffffff; 1745 } 1746 1747 /* Hors grand ecran, la photographie du tournoi se voit davantage. A 1748 0,11 elle restait une matiere a peine devinee, et la derive y passait 1749 inapercue ; a 0,2 on reconnait les joueurs et le bleu nuit reste la 1750 couleur du pan, alors qu'a 0,24 la photographie commencait a le 1751 griser. Demande de l'utilisateur le 13 septembre 2026. Sur grand 1752 ecran, ou le survol la fait deja monter, elle garde son voile. */ 1753 .pq-pan-tournoi .pq-pan-texture { opacity: 0.2; } 1754 1755 @media (min-width: 880px) and (orientation: landscape) { 1756 .pq-pan-tournoi .pq-pan-texture { opacity: 0.11; } 1757 } 1758 1759 .pq-pan-awards { 1760 background: #d4af37; 1761 color: #0d0d0d; 1762 } 1763 1764 /* Sur l'or, la fusion multiplicative garde la teinte mais la salit 1765 vite : la photographie de ceremonie est elle-meme chaude, et les deux 1766 chaleurs se cumulent en moutarde. Un dixieme suffit a donner du 1767 relief sans quitter l'aplat. */ 1768 .pq-pan-awards .pq-pan-texture { 1769 opacity: 0.24; 1770 mix-blend-mode: multiply; 1771 } 1772 1773 a.pq-pan-awards:hover .pq-pan-texture { opacity: 0.34; } 1774 1775 .pq-pan-magazine { 1776 background: #0a0a0a; 1777 color: #ffffff; 1778 } 1779 1780 /* Le seul pan des trois dont l'image n'est pas une matiere mais un 1781 sujet : on doit y reconnaitre un magazine. Il est donc bien plus 1782 present que les deux autres, et cadre sur la couverture. */ 1783 .pq-pan-magazine .pq-pan-texture { 1784 /* Assez pour reconnaitre un magazine de padel, pas assez pour que 1785 le pan cesse d'etre un aplat : a 0,5 il devenait une photographie 1786 et rompait la serie des trois, et le mot geant passait sur le 1787 visage de la couverture. 1788 1789 Dans une colonne etroite, le mot geant et le nom passent sur la 1790 couverture elle-meme : un cran de moins que sur grand ecran les 1791 garde lisibles sans l'effacer. */ 1792 opacity: 0.22; 1793 background-position: 50% 40%; 1794 } 1795 1796 /* Le recadrage ne vaut que sur grand ecran, ou la colonne a presque les 1797 proportions de la photographie : en « cover » elle l'epouse, et il ne 1798 reste presque rien a decaler. On l'agrandit de seize pour cent pour 1799 se donner de la marge, puis on la pousse a droite, degageant le mot 1800 geant qui court le long du bord gauche. Dans une colonne de 1801 telephone ou de tablette debout, l'image deborde deja largement en 1802 largeur et le cadrage « cover » suffit. */ 1803 @media (min-width: 880px) and (orientation: landscape) { 1804 .pq-pan-magazine .pq-pan-texture { 1805 opacity: 0.28; 1806 background-size: auto 116%; 1807 background-position: 88% 44%; 1808 } 1809 } 1810 1811 /* Le bas du pan magazine se fond dans l'aplat. C'est le seul des trois 1812 dont l'image est un sujet et non une matiere, et une couverture porte
1813 par definition des zones tres claires : selon la largeur, le bandeau 1814 dore de la couverture tombait derriere le nom, les deux lignes de 1815 texte ou la pastille « Bientot », et rien n'y etait plus lisible. 1816 Regler le cadrage ne suffisait pas â il change a chaque palier de 1817 largeur. Le fondu, lui, tient a toutes. 1818 1819 Il ne se voit pas comme un procede : la photographie ne fait que 1820 rejoindre l'aplat sur lequel elle est posee. */ 1821 .pq-pan-magazine::after { 1822 content: ''; 1823 position: absolute; 1824 inset: 0; 1825 z-index: 0; 1826 pointer-events: none; 1827 background: linear-gradient(to top, #0a0a0a 6%, rgba(10, 10, 10, 0.82) 30%, rgba(10, 10, 10, 0) 62%); 1828 } 1829 1830 /* Les filets qui separent les pans. Un pixel, pas une bordure : une 1831 bordure sur trois pans en donne quatre d'epaisseur inegale. */ 1832 .pq-pan + .pq-pan::before { 1833 content: ''; 1834 position: absolute; 1835 top: 0; 1836 bottom: 0; 1837 left: 0; 1838 width: 1px; 1839 background: rgba(255, 255, 255, 0.12); 1840 z-index: 2; 1841 } 1842 1843 .pq-pan-awards + .pq-pan::before { background: rgba(255, 255, 255, 0.12); } 1844 1845 /* Telephone ----------------------------------------------------------- 1846 Des colonnes de 120 a 200 px. Le mot geant garde toute la hauteur et 1847 y prend du corps : 66 px sur un iPhone, contre 60 quand les pans 1848 s'empilaient. C'est le reste qui se resserre, et les deux lignes de 1849 faits s'effacent, faute de place ; elles reviennent a partir de 1850 600 px. Ce qu'on vient chercher dans chaque univers est a un 1851 toucher. */ 1852 @media (max-width: 599px) { 1853 .pq-pan { padding: 6rem 0.8rem 1.3rem; } 1854 1855 .pq-pan-eyebrow { 1856 font-size: 0.55rem; 1857 letter-spacing: 0.18em; 1858 text-indent: 0; 1859 } 1860 1861 .pq-pan-mot { 1862 font-size: clamp(2.4rem, min(18vw, 10svh), 5rem); 1863 margin-bottom: 1rem; 1864 } 1865 1866 .pq-pan-pied { max-width: none; } 1867 1868 .pq-pan-nom { 1869 font-size: 0.95rem; 1870 line-height: 1.2; 1871 } 1872 1873 .pq-pan-faits { display: none; } 1874 1875 .pq-pan-action { 1876 margin-top: 0.75rem; 1877 font-size: 0.58rem; 1878 letter-spacing: 0.14em; 1879 gap: 0.3rem; 1880 } 1881 1882 .pq-pan-action svg { 1883 width: 0.8rem; 1884 height: 0.8rem; 1885 } 1886 1887 /* La colonne ne laisse que 105 px de contenu : le bouton garde sa 1888 forme, ses marges internes se resserrent. Mesure : il tient sans 1889 rien renvoyer a la ligne jusqu'a 320 px. */ 1890 /* La colonne ne laisse que 105 px de contenu, et « Decouvrir » 1891 debordait de neuf pixels a 360 px, vingt-deux a 320. Le bouton 1892 prend donc toute la largeur de sa colonne : plus rien ne peut 1893 depasser, et les trois barres s'alignent exactement, ce qu'une 1894 largeur au contenu ne donnait pas. */ 1895 .pq-pan-bouton { 1896 display: flex; 1897 width: 100%; 1898 min-width: 0; 1899 margin-top: 0.9rem; 1900 padding: 0.72rem 0.5rem; 1901 font-size: 0.6rem; 1902 letter-spacing: 0.08em; 1903 } 1904 1905 /* La fleche ne tient pas a cote d'un mot de neuf lettres dans une 1906 colonne de cette largeur, et le bouton dit deja qu'on appuie. */ 1907 .pq-pan-bouton svg { display: none; } 1908 1909 } 1910 1911 /* A 320 px, des colonnes de 107 : « Les trophees » passait sur deux 1912 lignes. */ 1913 @media (max-width: 359px) { 1914 .pq-pan-eyebrow { letter-spacing: 0.06em; } 1915 1916 .pq-pan-bouton { 1917 padding: 0.7rem 0.35rem; 1918 font-size: 0.55rem; 1919 letter-spacing: 0.04em; 1920 } 1921 } 1922 1923 /* Pied du portail ---------------------------------------------------- 1924 Une ligne, et rien de plus. Il reprend le fond et le filet des pans 1925 (meme blanc a douze pour cent que les separations verticales), leurs 1926 retraits lateraux, et leur micro-typographie en capitales espacees : 1927 vu de loin c'est la derniere bande de la composition, pas un bloc 1928 rapporte. Le pied commun faisait quatre cents pixels sur quatre 1929 colonnes, sous une page d'un seul ecran. */ 1930 .pq-pied { 1931 display: flex; 1932 flex-wrap: wrap; 1933 align-items: center; 1934 justify-content: space-between; 1935 gap: 0.75rem 1.5rem; 1936 padding: 0.7rem 1.75rem; 1937 background: #0a0a0a; 1938 border-top: 1px solid rgba(255, 255, 255, 0.12); 1939 } 1940 1941 @media (min-width: 880px) and (orientation: landscape) { 1942 .pq-pied { padding: 0.7rem 2rem; } 1943 } 1944 1945 /* A droite, ce qu'on ne consulte que si on le cherche : gris clair, 1946 interlettrage large, et aucun poids. */ 1947 .pq-pied-legal { 1948 order: 2; 1949 font-size: 0.58rem; 1950 letter-spacing: 0.16em; 1951 text-indent: 0.16em; 1952 text-transform: uppercase; 1953 color: rgba(255, 255, 255, 0.34); 1954 text-decoration: none; 1955 transition: color 0.25s ease; 1956 } 1957 1958 .pq-pied-legal:hover, 1959 .pq-pied-legal:focus-visible { color: #ffffff; } 1960 1961 /* Les mentions et le lien qui rouvre le bandeau de cookies, ensemble a 1962 droite. Le second est un bouton, remis a plat pour se lire comme le 1963 premier. */ 1964 .pq-pied-droite { 1965 order: 2; 1966 display: inline-flex; 1967 align-items: center; 1968 gap: 1.25rem; 1969 } 1970 1971 button.pq-pied-legal { 1972 margin: 0; 1973 padding: 0; 1974 background: none; 1975 border: 0; 1976 font: inherit; 1977 font-size: 0.58rem; 1978 cursor: pointer; 1979 } 1980 1981 /* Le bandeau de consentement se pose au-dessus du pied, jamais dessus : 1982 CookieYes a ete retire parce que son bouton recouvrait l'invitation 1983 Instagram. Le pied fait 49 px, 47 sur telephone. */
1984 #wpq-cookies { 1985 bottom: calc(49px + 1.25rem); 1986 max-height: calc(100dvh - 49px - 2.5rem); 1987 } 1988 1989 /* A gauche, la seule chose du pied qu'on veut voir. Elle est batie 1990 comme les actions des pans â un intitule capitales espacees, une 1991 fleche qui avance au survol â pour rester de la meme famille, mais 1992 elle porte la couleur d'Instagram, qui se reconnait avant d'etre 1993 lue. C'est le seul endroit du site ou une couleur hors charte est 1994 admise ; ailleurs elle serait une faute. */ 1995 .pq-pied-insta { 1996 order: 1; 1997 display: inline-flex; 1998 align-items: center; 1999 gap: 0.6rem; 2000 text-decoration: none; 2001 color: rgba(255, 255, 255, 0.62); 2002 transition: color 0.25s ease; 2003 } 2004 2005 .pq-pied-insta:hover, 2006 .pq-pied-insta:focus-visible { color: #ffffff; } 2007 2008 /* Le degrade officieux d'Instagram, celui que tout le monde reconnait. 2009 Il est porte par une pastille et non par le trace : a cette taille un 2010 trace en degrade ne se lit plus, alors qu'un aplat oui. */ 2011 .pq-pied-insta-pastille { 2012 display: inline-flex; 2013 align-items: center; 2014 justify-content: center; 2015 width: 1.6rem; 2016 height: 1.6rem; 2017 border-radius: 0.5rem; 2018 background: radial-gradient(circle at 28% 108%, #fdf497 0%, #fdf497 6%, #fd5949 42%, #d6249f 62%, #285aeb 92%); 2019 transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease; 2020 } 2021 2022 .pq-pied-insta-pastille svg { 2023 display: block; 2024 width: 0.95rem; 2025 height: 0.95rem; 2026 fill: none; 2027 stroke: #ffffff; 2028 stroke-width: 1.9; 2029 } 2030 2031 .pq-pied-insta:hover .pq-pied-insta-pastille, 2032 .pq-pied-insta:focus-visible .pq-pied-insta-pastille { 2033 transform: translateY(-1px) scale(1.06); 2034 box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 18px rgba(214, 36, 159, 0.4); 2035 } 2036 2037 .pq-pied-insta-nom { 2038 font-size: 0.6rem; 2039 font-weight: 700; 2040 letter-spacing: 0.16em; 2041 text-indent: 0.16em; 2042 text-transform: uppercase; 2043 } 2044 2045 .pq-pied-insta-fleche { 2046 width: 0.85rem; 2047 height: 0.85rem; 2048 fill: none; 2049 stroke: currentColor; 2050 stroke-width: 2; 2051 stroke-linecap: round; 2052 stroke-linejoin: round; 2053 opacity: 0.55; 2054 transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.25s ease; 2055 } 2056 2057 .pq-pied-insta:hover .pq-pied-insta-fleche, 2058 .pq-pied-insta:focus-visible .pq-pied-insta-fleche { 2059 transform: translateX(4px); 2060 opacity: 1; 2061 } 2062 2063 /* Sur telephone aussi, une seule ligne : l'invitation en bas a gauche, 2064 les mentions en bas a droite, comme demande. Ranges l'un sous 2065 l'autre, les deux blocs faisaient un pied de 75 px sous un portail 2066 qui doit tenir dans l'ecran ; resserres, 47. A 320 px la ligne se 2067 replie d'elle-meme. */ 2068 @media (max-width: 599px) { 2069 .pq-pied { 2070 padding: 0.65rem 1rem; 2071 gap: 0.5rem 0.75rem; 2072 } 2073 2074 .pq-pied-insta-nom, 2075 .pq-pied-legal { 2076 letter-spacing: 0.1em; 2077 text-indent: 0; 2078 } 2079 2080 /* Le lien « Cookies » a rejoint les mentions le 16 septembre 2081 2026, et le pied passait sur deux lignes, 69 px au lieu de 47 : 2082 le portail ne tenait plus dans l'ecran. Pour tenir sur une 2083 ligne jusqu'a 320 px, la fleche d'Instagram s'efface, 2084 l'interlettrage se resserre, et « Mentions légales » devient 2085 « Mentions » sous 430 px, le libelle complet restant celui du 2086 lien pour un lecteur d'ecran. */ 2087 .pq-pied-droite { gap: 0.7rem; } 2088 2089 .pq-pied-insta-fleche { display: none; } 2090 2091 .pq-pied-insta-nom, 2092 .pq-pied-legal { letter-spacing: 0.06em; } 2093
2094 #wpq-cookies { 2095 bottom: calc(47px + 0.75rem); 2096 max-height: calc(100dvh - 47px - 1.5rem); 2097 } 2098 2099 /* Replie en barre compacte (28 septembre 2026), il se pose 2100 a ras du pied, sans rien couvrir de l'invitation Instagram. */ 2101 body #wpq-cookies:not(.est-detaille) { 2102 bottom: 47px; 2103 padding-bottom: 0.7rem; 2104 } 2105 } 2106 2107 /* Sous 330 px, le pied passe sur deux lignes : 69 px. */ 2108 @media (max-width: 329px) { 2109 body #wpq-cookies:not(.est-detaille) { bottom: 69px; } 2110 } 2111 2112 @media (max-width: 429px) { 2113 .pq-pied-long { display: none; } 2114 } 2115 2116 /* Entree en scene ---------------------------------------------------- 2117 Les aplats sont la des le premier rendu â ce sont eux qui portent la 2118 mise en page, ils ne doivent jamais clignoter. Ne s'anime que ce qui 2119 est pose dessus : la matiere qui monte en opacite, puis la ligne du 2120 haut, le mot geant et le pied, decales pan par pan. Tout est en CSS, 2121 donc rien ne depend d'un script qui n'arriverait pas. */ 2122 @keyframes pq-parait { 2123 from { 2124 opacity: 0; 2125 transform: translateY(15px); 2126 } 2127 } 2128 2129 /* Le mot se decouvre lettre a lettre, dans le sens ou il se lit : de 2130 haut en bas. La boite etant verticale, c'est son bord bas qu'il faut 2131 fermer â `inset(0 0 100% 0)` â puis rouvrir. Ferme sur le bord haut, 2132 le mot apparaissait par la fin, « ournoi » avant son T. */ 2133 @keyframes pq-devoile { 2134 from { clip-path: inset(0 0 100% 0); } 2135 to { clip-path: inset(0 0 0 0); } 2136 } 2137 2138 @keyframes pq-matiere { 2139 from { opacity: 0; } 2140 } 2141 2142 /* Le rythme, revu a la baisse le 9 septembre 2026. 2143 2144 La courbe compte plus que la duree, et c'est le piege : un `ease-out` 2145 tres marque (quintique) place quatre-vingt-dix pour cent du chemin 2146 dans le premier tiers du temps. Allonger la duree ne se voyait donc 2147 pas â mesure, tout etait fini a 800 ms pour des animations reglees a 2148 1,6 s. C'est une courbe repartie (`cubic-bezier(0.4, 0, 0.2, 1)`) qui 2149 rend la duree lisible : le mouvement occupe vraiment le temps qu'on 2150 lui donne. 2151 2152 La sequence entiere dure a present un peu plus de deux secondes, du 2153 premier voile a la derniere ligne du troisieme pan. */ 2154 .pq-pan { --pq-decalage: 0s; } 2155 .pq-pan:nth-child(2) { --pq-decalage: 0.22s; } 2156 .pq-pan:nth-child(3) { --pq-decalage: 0.44s; } 2157 2158 .pq-pan-texture { 2159 animation: pq-matiere 2s ease both; 2160 animation-delay: var(--pq-decalage); 2161 } 2162 2163 .pq-pan-logo, 2164 .pq-pan-haut, 2165 .pq-pan-pied { 2166 animation: pq-parait 1.2s cubic-bezier(0.4, 0, 0.2, 1) both; 2167 } 2168 2169 .pq-pan-logo, 2170 .pq-pan-haut { animation-delay: calc(var(--pq-decalage) + 0.16s); } 2171 .pq-pan-pied { animation-delay: calc(var(--pq-decalage) + 0.5s); } 2172 2173 .pq-pan-mot { 2174 animation: pq-devoile 1.6s cubic-bezier(0.4, 0, 0.2, 1) both; 2175 animation-delay: calc(var(--pq-decalage) + 0.3s); 2176 } 2177 2178 /* La photographie en mouvement ------------------------------------------ 2179 Sans survol ni defilement, plus rien ne bougeait sur telephone une fois 2180 l'entree en scene jouee. Demande de l'utilisateur le 13 septembre 2181 2026 : animer la photographie « pour avoir l'impression que c'est une 2182 video qui tourne ». Hors grand ecran seulement, ou la souris a deja 2183 l'accordeon et le zoom au survol. 2184 2185 Le premier reglage, juge « trop discret » par l'utilisateur, a ete 2186 accelere le jour meme : periodes raccourcies d'un peu plus de 40 %, 2187 soit un mouvement 1,75 fois plus rapide, a amplitude inchangee. Sous 2188 des photographies aussi voilees, un mouvement trop lent passe 2189 inapercu. 2190 2191 Deux animations sur deux proprietes distinctes, `scale` et 2192 `translate`, plutot qu'une seule sur `transform` : a periodes 2193 differentes, elles ne se retrouvent au meme point qu'au bout de pres 2194 de neuf minutes au plus court, et le mouvement se lit comme un plan 2195 filme plutot que comme un aller-retour. Chaque colonne a son axe, 2196 ses periodes et son point de depart, pris par des delais negatifs : 2197 les trois ne repartent jamais ensemble, et tout est deja en 2198 mouvement au chargement. 2199 2200 Le glissement est surtout vertical : dans une colonne de 130 px, un 2201 pourcentage de la largeur ne fait que quelques pixels, un pourcentage 2202 de la hauteur en fait vingt-cinq. 2203 2204 Le zoom ne descend jamais sous 1,12 : l'image deborde alors de 6 % de 2205 chaque cote, et le glissement plafonne a 4,5 %, si bien qu'aucun bord 2206 de la photographie n'entre dans le pan. Seules des transformations 2207 bougent, sans repeindre. 2208 2209 Enveloppee dans `prefers-reduced-motion: no-preference` : quand 2210 l'appareil demande moins d'animations, la derive n'existe pas, et il 2211 n'y a rien a annuler plus bas. */ 2212 @keyframes pq-zoom { 2213 from { scale: 1.12; } 2214 to { scale: 1.24; } 2215 } 2216 2217 @keyframes pq-glisse-tournoi { 2218 from { translate: -2% 4%; } 2219 to { translate: 2% -4%; } 2220 } 2221 2222 @keyframes pq-glisse-awards { 2223 from { translate: 1% 4.5%; } 2224 to { translate: -1% -4.5%; } 2225 } 2226 2227 @keyframes pq-glisse-magazine { 2228 from { translate: -1.5% -4%; } 2229 to { translate: 1.5% 4%; } 2230 } 2231 2232 @media (prefers-reduced-motion: no-preference) { 2233 @media (max-width: 879px), (orientation: portrait) { 2234 .pq-pan-texture { 2235 animation-name: pq-matiere, pq-zoom, pq-glisse-tournoi; 2236 animation-duration: 2s, 11s, 15.5s; 2237 animation-timing-function: ease, ease-in-out, ease-in-out; 2238 animation-iteration-count: 1, infinite, infinite; 2239 animation-direction: normal, alternate, alternate; 2240 animation-fill-mode: both, both, both; 2241 animation-delay: var(--pq-decalage), -4s, -6.5s; 2242 } 2243 2244 .pq-pan-awards .pq-pan-texture { 2245 animation-name: pq-matiere, pq-zoom, pq-glisse-awards; 2246 animation-duration: 2s, 13s, 17.5s; 2247 animation-delay: var(--pq-decalage), -9s, -3s; 2248 } 2249 2250 .pq-pan-magazine .pq-pan-texture { 2251 animation-name: pq-matiere, pq-zoom, pq-glisse-magazine; 2252 animation-duration: 2s, 9.5s, 14s; 2253 animation-delay: var(--pq-decalage), -2s, -10s; 2254 } 2255 } 2256 } 2257 2258 /* L'accordeon --------------------------------------------------------- 2259 Survoler un pan lui donne de la place et en retire aux deux autres. 2260 `grid-template-columns` s'anime dans les navigateurs courants ; la ou 2261 `:has` ou l'interpolation manquent, rien ne bouge et la page reste 2262 celle-ci. Reserve au pointeur fin : au doigt, le survol precede le 2263 clic et ferait bouger la page sous la main. */ 2264 @media (min-width: 880px) and (orientation: landscape) and (hover: hover) { 2265 .pq-pans { 2266 transition: grid-template-columns 0.75s cubic-bezier(0.25, 0.8, 0.35, 1); 2267 } 2268 2269 .pq-pans:has(.pq-pan:nth-child(1):hover) { grid-template-columns: 1.32fr 0.84fr 0.84fr; } 2270 .pq-pans:has(.pq-pan:nth-child(2):hover) { grid-template-columns: 0.84fr 1.32fr 0.84fr; } 2271 .pq-pans:has(.pq-pan:nth-child(3):hover) { grid-template-columns: 0.84fr 0.84fr 1.32fr; } 2272 } 2273 2274 @media (prefers-reduced-motion: reduce) { 2275 .pq-pan, 2276 .pq-pan-texture, 2277 .pq-pan-action svg, 2278 .pq-pan-bouton, 2279 .pq-pied-insta-pastille, 2280 .pq-pied-insta-fleche { 2281 transition: none; 2282 } 2283 2284 a.pq-pan:hover .pq-pan-texture, 2285 .pq-pan-magazine:hover .pq-pan-texture { transform: none; } 2286 2287 .pq-pied-insta:hover .pq-pied-insta-pastille, 2288 .pq-pied-insta:focus-visible .pq-pied-insta-pastille, 2289 .pq-pied-insta:hover .pq-pied-insta-fleche, 2290 .pq-pied-insta:focus-visible .pq-pied-insta-fleche { 2291 transform: none; 2292 } 2293 2294 /* L'entree en scene et l'accordeon sont annules, pas ralentis : ce 2295 qui gene n'est pas la duree mais le deplacement. */ 2296 .pq-pan-texture, 2297 .pq-pan-logo, 2298 .pq-pan-haut, 2299 .pq-pan-pied, 2300 .pq-pan-mot { 2301 animation: none; 2302 } 2303 2304 .pq-pans, 2305 .pq-pans:has(.pq-pan:hover) { 2306 transition: none; 2307 grid-template-columns: repeat(3, 1fr); 2308 } 2309 } 2310 </style> 2311 <!-- Google tag (gtag.js) - Google Ads -->
vendor: 128 bytes, lines 2311-2313
2311 2312 <script type="text/plain" data-wpq-consentement="publicite" async 2313 src="https://www.googletagmanager.com/gtag/js?id=
2313AW-831452495
vendor: 16 bytes, lines 2313-2314
2313"></script> 2314
2314<script type="text/plain" data-wpq-consentement="publicite"> 2315
vendor: 155 bytes, lines 2315-2319
2315window.dataLayer = window.dataLayer || []; 2316 function gtag() { dataLayer.push(arguments); } 2317 gtag('js', new Date()); 2318 2319 gtag('config', '
2319AW-831452495
vendor: 8 bytes, lines 2319-2320
2319'); 2320
2320</script>
2320 2321
2321<script type="text/plain" data-wpq-consentement="inscriptions" 2322 src="https://www.cdn.feverup.com/utmkeeper.js"></script>
2322 2323 <!-- Meta Pixel Code -->
2324<script type="text/plain" data-wpq-consentement="publicite">
vendor: 399 bytes, lines 2324-2333
2324 2325!function(f,b,e,v,n,t,s) 2326{if(f.fbq)return;n=f.fbq=function(){n.callMethod? 2327n.callMethod.apply(n,arguments):n.queue.push(arguments)}; 2328if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; 2329n.queue=[];t=b.createElement(e);t.async=!0; 2330t.src=v;s=b.getElementsByTagName(e)[0]; 2331s.parentNode.insertBefore(t,s)}(window, document,'script', 2332'https://connect.facebook.net/en_US/fbevents.js'); 2333fbq('init', '
2333752396404237806
vendor: 30 bytes, lines 2333-2334
2333'); 2334fbq('track', 'PageView');
2335</script>
2335 2336<!-- End Meta Pixel Code --> 2337 2338 2339 2340
2341<script data-navigate-once> 2342 /* Gestionnaire du consentement. 2343 2344 Le choix vit dans le cookie wpq_consentement, six mois, duree que 2345 recommande la CNIL avant de redemander : « 1|publicite:0|... ». Un 2346 cookie illisible, d'une autre version ou incomplet vaut absence de 2347 choix, et le bandeau reparait. 2348 2349 Retirer un accord deja donne recharge la page : un script execute ne 2350 se decharge pas. Les cookies que ces services deposent sur notre 2351 domaine sont effaces avant. */ 2352 (() => { 2353 const NOM = 'wpq_consentement'; 2354 const VERSION = '1'; 2355 const DUREE = 60 * 60 * 24 * 182; 2356 const CATEGORIES = ['publicite', 'inscriptions', 'discussion']; 2357 const TRACES = { 2358 publicite: [/^_fbp$/, /^_fbc$/, /^_gcl_/], 2359 inscriptions: [/^utm/i], 2360 discussion: [/^twk_/, /^TawkConnectionTime$/, /^__tawk/], 2361 }; 2362 2363 const lire = () => { 2364 const brut = document.cookie.split('; ').find((c) => c.startsWith(NOM + '=')); 2365 if (!brut) return null; 2366 let valeur; 2367 try { valeur = decodeURIComponent(brut.slice(NOM.length + 1)); } catch { return null; } 2368 const [version, ...paires] = valeur.split('|'); 2369 if (version !== VERSION) return null; 2370 const choix = {}; 2371 for (const paire of paires) { 2372 const [cle, etat] = paire.split(':'); 2373 if (CATEGORIES.includes(cle)) choix[cle] = etat === '1'; 2374 } 2375 return CATEGORIES.every((cle) => cle in choix) ? choix : null; 2376 }; 2377 2378 const ecrire = (choix) => { 2379 const valeur = [VERSION, ...CATEGORIES.map((cle) => cle + ':' + (choix[cle] ? 1 : 0))].join('|'); 2380 document.cookie = NOM + '=' + encodeURIComponent(valeur) + '; Max-Age=' + DUREE 2381 + '; Path=/; SameSite=Lax' + (location.protocol === 'https:' ? '; Secure' : ''); 2382 }; 2383 2384 const activer = (choix) => { 2385 if (!choix) return; 2386 document.querySelectorAll('script[type="text/plain"][data-wpq-consentement]').forEach((bloque) => { 2387 if (!choix[bloque.dataset.wpqConsentement]) return; 2388 const script = document.createElement('script'); 2389 for (const attribut of bloque.attributes) { 2390 if (attribut.name !== 'type' && !attribut.name.startsWith('data-wpq-')) { 2391 script.setAttribute(attribut.name, attribut.value); 2392 } 2393 } 2394 script.text = bloque.text; 2395 bloque.replaceWith(script); 2396 }); 2397 }; 2398 2399 const effacer = (categories) => { 2400 const hote = location.hostname; 2401 const domaines = ['', hote, '.' + hote, '.' + hote.split('.').slice(-2).join('.')]; 2402 const motifs = categories.flatMap((cle) => TRACES[cle]); 2403 for (const morceau of document.cookie.split('; ')) { 2404 const nom = morceau.split('=')[0]; 2405 if (!motifs.some((motif) => motif.test(nom))) continue; 2406 for (const domaine of domaines) { 2407 document.cookie = nom + '=; Max-Age=0; Path=/' + (domaine ? '; Domain=' + domaine : ''); 2408 } 2409 } 2410 try { 2411 for (const cle of Object.keys(localStorage)) { 2412 if (motifs.some((motif) => motif.test(cle))) localStorage.removeItem(cle); 2413 } 2414 } catch {} 2415 }; 2416 2417 // Rend faux quand la page va se recharger. 2418 const decider = (choix) => { 2419 const avant = lire(); 2420 const retires = avant ? CATEGORIES.filter((cle) => avant[cle] && !choix[cle]) : []; 2421 ecrire(choix); 2422 if (retires.length) { 2423 effacer(retires); 2424 location.reload(); 2425 return false;
2426 } 2427 activer(choix); 2428 return true; 2429 }; 2430 2431 window.wpqConsentement = { CATEGORIES, lire, decider }; 2432 2433 activer(lire()); 2434 document.addEventListener('DOMContentLoaded', () => activer(lire())); 2435 })(); 2436 </script>
2436 2437 2438</head> 2439 2440<body> 2441 <header id="site-header" class="site-header"> 2442 <div class="max-w-7xl mx-auto px-4 sm:px-6"> 2443 <div class="site-header__inner gap-2"> 2444 <a class="flex items-center group" href="/" aria-label="World Padel Quest"> 2445 <picture> 2446 <source type="image/webp" srcset="/images/logo.webp" /> 2447 <img src="/images/logo.png" alt="World Padel Quest" class="site-logo" /> 2448 </picture> 2449 </a> 2450 </div> 2451 </div> 2452 </header> 2453 2454 <main class="pq-pans" id="univers"> 2455 <a class="pq-pan pq-pan-tournoi" href="https://worldpadelquest.com/tournoi"> 2456 <span class="pq-pan-texture" aria-hidden="true" 2457 style="background-image: url('/images/portail/tournoi.webp')"></span> 2458 2459 <span class="pq-pan-haut"> 2460 <span class="pq-pan-eyebrow">Le tournoi</span> 2461 </span> 2462 2463 <span class="pq-pan-mot" aria-hidden="true">Tournoi</span> 2464 2465 <span class="pq-pan-pied"> 2466 <span class="pq-pan-nom">World Padel Quest</span> 2467 <span class="pq-pan-faits"> 2468 <span>Des étapes partout en France</span> 2469 <span>Finale au Bela Padel Center, Barcelone</span> 2470 </span> 2471 <span class="pq-pan-action pq-pan-bouton"> 2472 Découvrir 2473 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg> 2474 </span> 2475 </span> 2476 </a> 2477 2478 <a class="pq-pan pq-pan-awards" href="/awards"> 2479 <span class="pq-pan-texture" aria-hidden="true" 2480 style="background-image: url('/images/portail/awards.webp')"></span> 2481 <img class="pq-pan-logo" src="/images/portail/logo-awards.webp" alt="" 2482 width="800" height="211" decoding="async"> 2483 2484 <span class="pq-pan-haut"> 2485 <span class="pq-pan-eyebrow">Les trophées</span> 2486 </span> 2487 2488 <span class="pq-pan-mot" aria-hidden="true">Awards</span> 2489 2490 <span class="pq-pan-pied"> 2491 <span class="pq-pan-nom">Padel Quest Awards</span> 2492 <span class="pq-pan-faits"> 2493 <span>Vingt trophées, un vote ouvert à tous</span> 2494 <span>Cérémonie le jeudi 3 décembre 2026</span> 2495 </span> 2496 2497 <span class="pq-pan-action pq-pan-bouton"> 2498 Voter 2499 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg> 2500 </span> 2501 </span> 2502 </a> 2503 2504 <div class="pq-pan pq-pan-magazine"> 2505 <span class="pq-pan-texture" aria-hidden="true" 2506 style="background-image: url('/images/portail/magazine.webp')"></span> 2507 <img class="pq-pan-logo" src="/images/portail/logo-magazine.webp" alt="" 2508 width="800" height="236" decoding="async"> 2509 2510 <span class="pq-pan-haut"> 2511 <span class="pq-pan-eyebrow">Le magazine</span> 2512 </span> 2513 2514 <span class="pq-pan-mot" aria-hidden="true">Magazine</span> 2515 2516 <span class="pq-pan-pied"> 2517 <span class="pq-pan-nom">Padel Quest Magazine</span> 2518 <span class="pq-pan-faits"> 2519 <span>Le padel français raconté par ceux</span> 2520 <span>qui le jouent, lâorganisent et le font vivre</span> 2521 </span> 2522 2523 <span class="pq-pan-action pq-pan-bouton">Bientôt</span> 2524 </span> 2525 </div> 2526</main> 2527 2528 <footer class="pq-pied"> 2529 <a class="pq-pied-insta" href="https://www.instagram.com/worldpadelquest/" 2530 target="_blank" rel="noopener noreferrer" 2531 aria-label="Suivre World Padel Quest sur Instagram"> 2532 <span class="pq-pied-insta-pastille"> 2533 <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"> 2534 <rect x="3.2" y="3.2" width="17.6" height="17.6" rx="5" /> 2535 <circle cx="12" cy="12" r="4.1" /> 2536 <circle cx="17.3" cy="6.7" r="1.15" fill="#ffffff" stroke="none" /> 2537 </svg> 2538 </span>
2539 <span class="pq-pied-insta-nom">@worldpadelquest</span> 2540 <svg class="pq-pied-insta-fleche" viewBox="0 0 24 24" aria-hidden="true" focusable="false"> 2541 <path d="M5 12h14M13 6l6 6-6 6" /> 2542 </svg> 2543 </a> 2544 2545 2546 <span class="pq-pied-droite"> 2547 <a class="pq-pied-legal" href="/mentions-legales" rel="nofollow" 2548 aria-label="Mentions légales">Mentions<span class="pq-pied-long"> légales</span></a> 2549 <button type="button" class="pq-pied-legal" data-wpq-cookies>Cookies</button> 2550 </span> 2551</footer> 2552 2553 <section id="wpq-cookies" class="wpq-cookies" role="dialog" aria-modal="false" 2554 aria-labelledby="wpq-cookies-titre" aria-describedby="wpq-cookies-texte" hidden> 2555 <p class="wpq-cookies-titre" id="wpq-cookies-titre">Cookies</p> 2556 <p class="wpq-cookies-texte" id="wpq-cookies-texte"> 2557 Avec votre accord, nous utilisons des cookies pour mesurer nos publicités, savoir dâoù 2558 viennent les inscriptions et vous proposer la discussion en direct. Vous pouvez changer 2559 dâavis à tout moment, depuis le lien « Cookies » en bas de page. 2560 </p> 2561 <!-- Version courte, pour le bandeau compact au telephone (28 septembre 2562 2026) : memes finalites. --> 2563 <p class="wpq-cookies-court"> 2564 Avec votre accord, nous utilisons des cookies pour la publicité, le suivi des 2565 inscriptions et la discussion en direct. 2566 </p> 2567 2568 <div class="wpq-cookies-detail"> 2569 <label class="wpq-cookies-ligne"> 2570 <span class="wpq-cookies-finalite"> 2571 <strong>Publicité</strong> 2572 <span>Google Ads et Meta mesurent lâefficacité de nos campagnes.</span> 2573 </span> 2574 <input type="checkbox" class="wpq-cookies-interrupteur" data-wpq-categorie="publicite"> 2575 </label> 2576 <label class="wpq-cookies-ligne"> 2577 <span class="wpq-cookies-finalite"> 2578 <strong>Suivi des inscriptions</strong> 2579 <span>Fever, notre billetterie, retient la campagne qui vous a amené jusquâà elle.</span> 2580 </span> 2581 <input type="checkbox" class="wpq-cookies-interrupteur" data-wpq-categorie="inscriptions"> 2582 </label> 2583 <label class="wpq-cookies-ligne"> 2584 <span class="wpq-cookies-finalite"> 2585 <strong>Discussion en direct</strong> 2586 <span>Tawk.to affiche la fenêtre de discussion avec notre équipe.</span> 2587 </span> 2588 <input type="checkbox" class="wpq-cookies-interrupteur" data-wpq-categorie="discussion"> 2589 </label> 2590 <div class="wpq-cookies-ligne"> 2591 <span class="wpq-cookies-finalite"> 2592 <strong>Mémorisation de votre choix</strong> 2593 <span>Nécessaire, conservée six mois.</span> 2594 </span> 2595 <span class="wpq-cookies-toujours">Toujours</span> 2596 </div> 2597 </div> 2598 2599 <div class="wpq-cookies-actions"> 2600 <button type="button" class="wpq-cookies-bouton" data-wpq-choix="refuser">Tout refuser</button> 2601 <button type="button" class="wpq-cookies-bouton" data-wpq-choix="accepter">Tout accepter</button> 2602 <button type="button" class="wpq-cookies-bouton wpq-cookies-enregistrer" data-wpq-choix="enregistrer">Enregistrer mes choix</button> 2603 </div> 2604 2605 <p class="wpq-cookies-bas"> 2606 <button type="button" class="wpq-cookies-lien wpq-cookies-personnaliser" data-wpq-choix="personnaliser">Personnaliser</button> 2607 <a class="wpq-cookies-lien" href="/mentions-legales#cookies">En savoir plus</a> 2608 </p> 2609</section> 2610 2611<style> 2612 /* Le bandeau parle la langue du portail : aplat noir, filet blanc a 2613 12 %, capitales espacees, et l'or de la charte en seul accent, sur le 2614 bord haut. Les deux choix principaux ont exactement le meme dessin. */ 2615 .wpq-cookies { 2616 position: fixed; 2617 z-index: 2147483000; 2618 right: 1.5rem; 2619 bottom: 1.5rem; 2620 box-sizing: border-box; 2621 width: min(25rem, calc(100vw - 2rem)); 2622 max-height: calc(100dvh - 3rem); 2623 overflow-y: auto; 2624 padding: 1.35rem 1.5rem 1.1rem; 2625 background: #0a0a0a; 2626 color: #ffffff; 2627 border: 1px solid rgba(255, 255, 255, 0.12); 2628 border-top: 2px solid #d4af37; 2629 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); 2630 font-family: "Montserrat", system-ui, sans-serif; 2631 text-align: left;
2632 animation: wpq-cookies-parait 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; 2633 } 2634 2635 .wpq-cookies[hidden] { display: none; } 2636 2637 @keyframes wpq-cookies-parait { 2638 from { opacity: 0; transform: translateY(12px); } 2639 } 2640 2641 .wpq-cookies p { margin: 0; } 2642 2643 /* La phrase courte n'apparait que dans le bandeau compact, voir plus bas. */ 2644 .wpq-cookies-court { display: none; } 2645 2646 .wpq-cookies-titre { 2647 font-size: 0.62rem; 2648 font-weight: 700; 2649 letter-spacing: 0.28em; 2650 text-transform: uppercase; 2651 color: #d4af37; 2652 } 2653 2654 .wpq-cookies-texte { 2655 margin-top: 0.65rem !important; 2656 font-size: 0.78rem; 2657 line-height: 1.6; 2658 color: rgba(255, 255, 255, 0.74); 2659 } 2660 2661 /* Le detail n'apparait qu'a la demande. */ 2662 .wpq-cookies-detail, 2663 .wpq-cookies-enregistrer { display: none; } 2664 2665 .wpq-cookies.est-detaille .wpq-cookies-detail { display: block; } 2666 .wpq-cookies.est-detaille .wpq-cookies-enregistrer { display: block; } 2667 .wpq-cookies.est-detaille .wpq-cookies-personnaliser { display: none; } 2668 2669 .wpq-cookies-detail { 2670 margin-top: 1rem; 2671 border-top: 1px solid rgba(255, 255, 255, 0.12); 2672 } 2673 2674 .wpq-cookies-ligne { 2675 display: flex; 2676 align-items: center; 2677 justify-content: space-between; 2678 gap: 1rem; 2679 padding: 0.75rem 0; 2680 border-bottom: 1px solid rgba(255, 255, 255, 0.08); 2681 cursor: pointer; 2682 } 2683 2684 div.wpq-cookies-ligne { cursor: default; } 2685 2686 .wpq-cookies-finalite strong { 2687 display: block; 2688 font-size: 0.76rem; 2689 font-weight: 700; 2690 } 2691 2692 .wpq-cookies-finalite span { 2693 display: block; 2694 margin-top: 0.2rem; 2695 font-size: 0.68rem; 2696 line-height: 1.5; 2697 color: rgba(255, 255, 255, 0.56); 2698 } 2699 2700 .wpq-cookies-toujours { 2701 flex: none; 2702 font-size: 0.56rem; 2703 letter-spacing: 0.16em; 2704 text-transform: uppercase; 2705 color: rgba(255, 255, 255, 0.45); 2706 } 2707 2708 /* Un interrupteur dessine sur la case elle-meme : elle reste une vraie 2709 case a cocher, au clavier comme pour un lecteur d'ecran. */ 2710 .wpq-cookies-interrupteur { 2711 appearance: none; 2712 -webkit-appearance: none; 2713 flex: none; 2714 position: relative; 2715 width: 2.3rem; 2716 height: 1.3rem; 2717 margin: 0; 2718 border-radius: 999px; 2719 background: rgba(255, 255, 255, 0.16); 2720 cursor: pointer; 2721 transition: background 0.25s ease; 2722 } 2723 2724 .wpq-cookies-interrupteur::after { 2725 content: ""; 2726 position: absolute; 2727 top: 0.15rem; 2728 left: 0.15rem; 2729 width: 1rem; 2730 height: 1rem; 2731 border-radius: 50%; 2732 background: #ffffff; 2733 transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); 2734 } 2735 2736 .wpq-cookies-interrupteur:checked { background: #d4af37; } 2737 .wpq-cookies-interrupteur:checked::after { transform: translateX(1rem); } 2738 2739 .wpq-cookies-interrupteur:focus-visible, 2740 .wpq-cookies-bouton:focus-visible, 2741 .wpq-cookies-lien:focus-visible { 2742 outline: 2px solid #d4af37; 2743 outline-offset: 2px; 2744 } 2745 2746 .wpq-cookies-actions { 2747 display: grid; 2748 grid-template-columns: 1fr 1fr; 2749 gap: 0.6rem; 2750 margin-top: 1.1rem; 2751 } 2752 2753 .wpq-cookies-bouton { 2754 margin: 0; 2755 padding: 0.8rem 0.5rem; 2756 background: transparent; 2757 color: #ffffff; 2758 border: 1px solid rgba(255, 255, 255, 0.3); 2759 border-radius: 0; 2760 font: inherit; 2761 font-size: 0.62rem; 2762 font-weight: 700; 2763 letter-spacing: 0.16em; 2764 text-transform: uppercase; 2765 cursor: pointer; 2766 transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease; 2767 } 2768 2769 .wpq-cookies-bouton:hover { 2770 border-color: #d4af37; 2771 color: #d4af37; 2772 } 2773 2774 .wpq-cookies-enregistrer { 2775 grid-column: 1 / -1; 2776 background: #d4af37; 2777 border-color: #d4af37; 2778 color: #0a0a0a; 2779 } 2780 2781 .wpq-cookies-enregistrer:hover { 2782 background: #e2c25a; 2783 color: #0a0a0a; 2784 } 2785
2786 .wpq-cookies-bas { 2787 display: flex; 2788 justify-content: space-between; 2789 gap: 1rem; 2790 margin-top: 0.85rem !important; 2791 } 2792 2793 .wpq-cookies-lien { 2794 margin: 0; 2795 padding: 0; 2796 background: none; 2797 border: 0; 2798 font: inherit; 2799 font-size: 0.6rem; 2800 letter-spacing: 0.14em; 2801 text-transform: uppercase; 2802 color: rgba(255, 255, 255, 0.5); 2803 text-decoration: underline; 2804 text-underline-offset: 3px; 2805 cursor: pointer; 2806 } 2807 2808 .wpq-cookies-lien:hover { color: #ffffff; } 2809 2810 @media (max-width: 599px) { 2811 .wpq-cookies { 2812 left: 0.75rem; 2813 right: 0.75rem; 2814 bottom: 0.75rem; 2815 width: auto; 2816 max-height: calc(100dvh - 1.5rem); 2817 padding: 1.1rem 1.1rem 0.95rem; 2818 } 2819 2820 .wpq-cookies-ligne { padding: 0.55rem 0; } 2821 2822 .wpq-cookies-texte { font-size: 0.74rem; } 2823 } 2824 2825 /* Bandeau compact au telephone (28 septembre 2026). En carte flottante, 2826 il couvrait plus d'un tiers d'un ecran de telephone. Replie, il devient 2827 une barre pleine largeur collee au bas : la phrase courte, qui dit les 2828 trois finalites, « Tout refuser » et « Tout accepter » cote a cote, du 2829 meme dessin, puis « Personnaliser » et « En savoir plus ». Deplie, il 2830 reprend sa forme entiere. Aucune regle ne touche a son display : le 2831 masquer reste l'affaire de [hidden] et, sur le vote, de public/vote.css. 2832 Le portail et le tunnel de vote le remontent au-dessus de leur pied. */ 2833 @media (max-width: 599px) { 2834 #wpq-cookies:not(.est-detaille) { 2835 left: 0; 2836 right: 0; 2837 bottom: 0; 2838 width: auto; 2839 max-height: none; 2840 padding: 0.75rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px)); 2841 border-left: 0; 2842 border-right: 0; 2843 border-bottom: 0; 2844 } 2845 2846 #wpq-cookies:not(.est-detaille) .wpq-cookies-titre, 2847 #wpq-cookies:not(.est-detaille) .wpq-cookies-texte { 2848 display: none; 2849 } 2850 2851 #wpq-cookies:not(.est-detaille) .wpq-cookies-court { 2852 display: block; 2853 margin: 0; 2854 font-size: 0.72rem; 2855 line-height: 1.5; 2856 color: rgba(255, 255, 255, 0.78); 2857 } 2858 2859 #wpq-cookies:not(.est-detaille) .wpq-cookies-actions { 2860 gap: 0.5rem; 2861 margin-top: 0.6rem; 2862 } 2863 2864 #wpq-cookies:not(.est-detaille) .wpq-cookies-bouton { 2865 padding: 0.65rem 0.4rem; 2866 } 2867 2868 #wpq-cookies:not(.est-detaille) .wpq-cookies-bas { 2869 margin-top: 0.55rem !important; 2870 } 2871 } 2872 2873 @media (prefers-reduced-motion: reduce) { 2874 .wpq-cookies { animation: none; } 2875 .wpq-cookies-interrupteur, 2876 .wpq-cookies-interrupteur::after { transition: none; } 2877 } 2878</style> 2879
2880<script> 2881 (() => { 2882 const gestion = window.wpqConsentement; 2883 const bandeau = document.getElementById('wpq-cookies'); 2884 if (!gestion || !bandeau) return; 2885 2886 const cases = [...bandeau.querySelectorAll('[data-wpq-categorie]')]; 2887 let dernierFocus = null; 2888 2889 const montrer = (detaille) => { 2890 const actuel = gestion.lire(); 2891 for (const c of cases) c.checked = Boolean(actuel && actuel[c.dataset.wpqCategorie]); 2892 bandeau.classList.toggle('est-detaille', detaille); 2893 dernierFocus = document.activeElement; 2894 bandeau.hidden = false; 2895 }; 2896 2897 const cacher = () => { 2898 bandeau.hidden = true; 2899 if (dernierFocus && document.contains(dernierFocus)) dernierFocus.focus(); 2900 }; 2901 2902 const tous = (valeur) => Object.fromEntries(gestion.CATEGORIES.map((cle) => [cle, valeur])); 2903 2904 bandeau.addEventListener('click', (evenement) => { 2905 const bouton = evenement.target.closest('[data-wpq-choix]'); 2906 if (!bouton) return; 2907 const action = bouton.dataset.wpqChoix; 2908 if (action === 'personnaliser') { 2909 montrer(true); 2910 bandeau.querySelector('[data-wpq-categorie]').focus(); 2911 return; 2912 } 2913 const choix = action === 'accepter' ? tous(true) 2914 : action === 'refuser' ? tous(false) 2915 : Object.fromEntries(cases.map((c) => [c.dataset.wpqCategorie, c.checked])); 2916 if (gestion.decider(choix)) cacher(); 2917 }); 2918
2919 // Tout lien marque data-wpq-cookies rouvre le bandeau, detail deplie. 2920 document.addEventListener('click', (evenement) => { 2921 const lien = evenement.target.closest('[data-wpq-cookies]'); 2922 if (!lien) return; 2923 evenement.preventDefault(); 2924 montrer(true); 2925 bandeau.querySelector('[data-wpq-categorie]').focus(); 2926 }); 2927 2928 bandeau.addEventListener('keydown', (evenement) => { 2929 if (evenement.key === 'Escape' && gestion.lire()) cacher(); 2930 }); 2931 2932 if (location.hash === '#gerer-les-cookies') { 2933 montrer(true); 2934 history.replaceState(null, '', location.pathname + location.search); 2935 } else if (!gestion.lire()) { 2936 montrer(false); 2937 } 2938 })(); 2939</script>
2939 2940 2941 </body> 2942 2943</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.