.hyrox-page{--hy-cream:#f4f4ef;--hy-line:#d8d9d1;--hy-gray:#666b66;background:#fffefa}
.hyrox-page .v-header{transition:transform .28s ease;will-change:transform}
.hyrox-page .v-header.hy-header-hidden{transform:translateY(-105%)}
.hyrox-main h2{font-size:40px;font-weight:850;line-height:1.1;letter-spacing:-.035em}
.hyrox-main h3{font-weight:800}
.hy-highlight{background:linear-gradient(transparent 70%,var(--fluo) 70% 94%,transparent 94%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hy-eyebrow{display:block;margin-bottom:16px;color:#74796f;font-size:12px;font-weight:850;letter-spacing:.17em;text-transform:uppercase}
.hy-hero{overflow:hidden;background:#fffefa}
.hy-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:86px;align-items:center;min-height:650px;padding-top:70px;padding-bottom:80px}
/* Gris du petit titre : #727773 (contraste 4,52:1 sur le fond) au lieu de #747975 (4,40:1), sur toutes les
   pages intérieures (Virginie, 07/10, après la relecture Codex de Tarifs). L'accueil ne charge pas ce fichier. */
.hy-hero-copy h1{margin-bottom:24px;color:#727773;font-size:22px;font-weight:500;line-height:1.35;letter-spacing:0}
.hy-hero-copy h1 span{white-space:nowrap}
.hy-hero-copy h2{max-width:650px;font-size:60px;font-weight:850;line-height:1.02;letter-spacing:-.045em}
/* Le H1 en grand dans le haut de page : toutes les pages intérieures depuis le 08/10 (Virginie : le H2 « Qu’est-ce que… »
   repasse sous la bande et devient le titre de la première section ; l’accueil garde son H2 en haut). Venu de
   pages-communes.css (Drop-in, Tarifs). Partie en petit avant (pg-h1-avant) ou après (pg-h1-apres) la partie en grand. */
.hy-hero-copy h1.pg-h1-grand{max-width:650px;margin-bottom:40px;color:var(--ink);font-size:60px;font-weight:850;line-height:1.05;letter-spacing:-.045em}
.pg-h1-grand .pg-h1-avant{display:block;margin-bottom:14px;color:#727773;font-size:22px;font-weight:500;line-height:1.35;letter-spacing:0}
.pg-h1-grand .pg-h1-apres{display:block;margin-top:14px;color:#727773;font-size:22px;font-weight:500;line-height:1.35;letter-spacing:0}
/* Titre de section centré quand le bloc du dessous forme un ensemble de même largeur (règle des sites TDB). */
.hx-title.pg-titre-centre{text-align:center}
@media(max-width:1023px){.hy-hero-copy h1.pg-h1-grand{font-size:40px}}
/* Haut de page centré sur téléphone et tablette, comme l'accueil ; l'ordinateur reste à gauche (Virginie, 19/10). */
@media(max-width:1023px){.hy-hero-copy{text-align:center}.hy-hero-copy h1,.hy-hero-copy .v-cta{margin-inline:auto}}
/* Titre du haut de page sur téléphone et tablette : plus d'interligne, et la ligne soulignée garde autant d'air dessous
   que les autres (la bande fluo descend sous sa ligne et mangeait l'espace suivant). Le repère invisible en fin de
   soulignage descend la ligne d'un demi-cadratin, seulement quand le titre continue sur la ligne suivante (pas devant
   le petit texte gris en bloc de Planning, Première visite, Tarifs). Mesuré à l'encre : ~15 px entre chaque ligne.
   Virginie, 19/10, planche titres-soulignes-ecart/. */
@media(max-width:1023px){.hy-hero-copy h1.pg-h1-grand{line-height:1.2}
  .hy-hero-copy .he-highlight:has(+ .sans-coupure)::after{content:'';display:inline-block;width:0;height:0;vertical-align:-.5em}}
.hy-hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin:33px 0 40px}
.hy-hero-tags span{padding:10px 15px;border:1px solid #d4d5d0;border-radius:99px;color:#4e534f;font-size:13px;font-weight:750;letter-spacing:.03em}
.hy-hero-visual{position:relative;height:500px;border-radius:30px;background:#efefec}
.hy-hero-visual:before{content:'';position:absolute;inset:0;border-radius:30px;background-image:url('/m/assets/v2c-fluo/mouchete.svg');background-size:210px;opacity:.45}
.hy-hero-visual figure{position:absolute;z-index:1;left:35px;top:-18px;width:315px;height:470px;margin:0;overflow:hidden;border:6px solid #fffefa;border-radius:22px;box-shadow:0 24px 44px rgba(32,35,34,.22);transform:rotate(-2.5deg)}
.hy-hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hy-hero-number{position:absolute;z-index:2;right:-20px;top:78px;color:var(--fluo);font-size:112px;font-weight:900;line-height:.8;letter-spacing:-.08em;text-shadow:5px 5px 0 #202322;transform:rotate(4deg)}
.hy-hero-caption{position:absolute;z-index:3;right:20px;bottom:48px;padding:11px 15px;background:var(--fluo);box-shadow:6px 6px 0 #202322;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-3deg)}
.hy-scribble{position:absolute;z-index:2;right:15px;top:215px;width:100px;height:auto;color:#202322}
.hy-scribble path{fill:none;stroke:currentColor;stroke-width:2}
.hy-ribbon{overflow:hidden;padding:15px 0;background:var(--fluo);color:#202322}
.hy-ribbon>div{display:flex;width:max-content;align-items:center;gap:28px;animation:hy-ribbon 75s linear infinite}
.hy-ribbon span{font-size:15px;font-weight:850;letter-spacing:.08em;white-space:nowrap}
.hy-ribbon b{font-size:24px;line-height:1}
@keyframes hy-ribbon{to{transform:translateX(-50%)}}
.hy-intro{background:var(--hy-cream)}
.hy-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.hy-intro-photo{position:relative;height:650px;overflow:hidden;border-radius:22px}
.hy-intro-photo img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hy-intro-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.55))}
.hy-intro-photo span{position:absolute;z-index:1;left:28px;bottom:28px;padding:11px 16px;background:var(--fluo);box-shadow:5px 5px 0 #202322;font-size:13px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.hy-intro-copy{display:grid;gap:0}
.hy-intro-copy article{display:grid;grid-template-columns:58px 1fr;gap:24px;padding:34px 0;border-bottom:1px solid var(--hy-line)}
.hy-intro-copy article:first-child{padding-top:0}
.hy-intro-copy h3{margin-bottom:20px;font-size:29px}
.hy-intro-copy p{color:#474b47;font-size:17px;line-height:1.65}
.hy-index{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--fluo);font-size:16px;font-weight:900}
.hy-section-head{display:flex;justify-content:space-between;align-items:end;gap:55px;margin-bottom:50px}
.hy-section-head>div{max-width:780px}
.hy-section-head>p{max-width:280px;color:var(--hy-gray);font-size:15px;text-align:right}
.hy-race{background:#fffefa}
.hy-race-shell{overflow:hidden;border:1px solid #d7d8d3;border-radius:24px;background:#efefec}
.hy-laps{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border-bottom:1px solid #cfd0ca}
.hy-laps button{display:grid;gap:8px;min-height:105px;padding:16px 8px;border:0;border-right:1px solid #cfd0ca;background:transparent;font-size:12px;font-weight:750;line-height:1.25;text-align:left}
.hy-laps button:last-child{border-right:0}
.hy-laps button span{color:#777c76;font-size:11px;letter-spacing:.12em}
.hy-laps button[aria-selected="true"]{background:#202322;color:#fff}
.hy-laps button[aria-selected="true"] span{color:var(--fluo)}
.hy-lap-panel{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;padding:55px 70px 36px;background-color:#202322;background-image:url('/m/assets/v2c-fluo/mouchete.svg');background-size:220px;color:#fff}
.hy-run-block,.hy-station-block{display:grid;place-items:center;min-height:190px;padding:26px;border:1px solid #ffffff45;border-radius:18px;background:#ffffff0d;text-align:center}
.hy-run-block span,.hy-station-block span{margin-bottom:12px;color:#d2d4ce;font-size:14px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.hy-run-block strong,.hy-station-block strong{font-size:44px;line-height:1}
.hy-lap-panel .hy-station-block{background:var(--fluo);color:#202322;transform:rotate(1.5deg)}
.hy-station-block span{color:#3d413d}
.hy-arrow{font-size:36px;text-align:center;color:var(--fluo)}
.hy-progress{grid-column:1/-1;display:grid;grid-template-columns:105px 1fr;gap:18px;align-items:center;margin-top:32px;color:#d6d8d1;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.hy-progress i,.hy-reason-count i{display:block;height:5px;overflow:hidden;border-radius:99px;background:#ffffff2b}
.hy-progress b,.hy-reason-count b{display:block;width:12.5%;height:100%;border-radius:99px;background:var(--fluo);transition:width .25s ease}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.hy-why{background:#202322;color:#fff}
.hy-section-head-light .hy-eyebrow{color:var(--fluo)}
.hy-section-head-light>p{color:#c4c7c1}
.hy-why-grid{display:grid;grid-template-columns:370px minmax(0,1fr);gap:55px;align-items:stretch}
.hy-reason-tabs{display:flex;flex-direction:column}
.hy-reason-tabs button{display:grid;grid-template-columns:46px 1fr;gap:15px;align-items:center;padding:22px 12px;border:0;border-bottom:1px solid #ffffff30;background:transparent;color:#c7cac4;font-size:17px;font-weight:700;text-align:left}
.hy-reason-tabs button span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid #ffffff4a;font-size:11px}
.hy-reason-tabs button[aria-selected="true"]{color:#fff}
.hy-reason-tabs button[aria-selected="true"] span{border-color:var(--fluo);background:var(--fluo);color:#202322}
.hy-reason-count{display:grid;grid-template-columns:70px 1fr;gap:15px;align-items:center;margin-top:auto;padding-top:34px;color:#c7cac4;font-size:12px;font-weight:800;text-transform:uppercase}
.hy-reason-count b{width:33.333%}
.hy-reason-stage{position:relative;min-height:540px;overflow:hidden;border-radius:22px}
.hy-reason-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(18,20,18,.92) 100%)}
.hy-reason-stage img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.hy-reason-stage article{position:absolute;z-index:1;left:44px;right:44px;bottom:40px}
.hy-reason-stage h3{max-width:660px;margin-bottom:18px;font-size:34px}
.hy-reason-stage p{max-width:760px;color:#e1e3de;line-height:1.65}
.hy-benefits{background:#fffefa}
.hy-benefits>div>h2{max-width:710px;margin-bottom:50px}
.hy-benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.hy-benefit-grid article{position:relative;min-height:420px;padding:42px;border:1px solid #d6d7d1;border-radius:20px;background:#efefec;overflow:hidden}
.hy-benefit-grid article:nth-child(2){background:var(--fluo);transform:rotate(1deg)}
.hy-benefit-grid article:after{content:attr(data-mark);position:absolute;right:-15px;bottom:-70px;color:#2023220b;font-size:230px;font-weight:900;line-height:1}
.hy-benefit-icon{display:grid;place-items:center;width:76px;height:76px;margin-bottom:55px;border-radius:50%;background:#202322;color:var(--fluo)}
.hy-benefit-icon svg{width:42px;height:42px}
.hy-benefit-grid h3{max-width:430px;margin-bottom:22px;font-size:30px}
.hy-benefit-grid p{max-width:520px;color:#4a4f4a;line-height:1.65}
.hy-audience{background:#edeedc}
.hy-audience-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}
.hy-audience-intro h2{margin-bottom:24px}
.hy-ui-copy{color:#696e68}
.hy-profile-tabs{display:grid;gap:10px;margin-top:34px}
.hy-profile-tabs button{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:center;padding:17px 20px;border:1px solid #c8cac1;border-radius:9px;background:#fffefa;font-size:16px;font-weight:750;text-align:left}
.hy-profile-tabs button span{color:#777d76;font-size:11px;letter-spacing:.12em}
.hy-profile-tabs button[aria-selected="true"]{border-color:#202322;background:#202322;color:#fff;box-shadow:7px 7px 0 var(--fluo)}
.hy-profile-tabs button[aria-selected="true"] span{color:var(--fluo)}
.hy-laps button:focus-visible,.hy-reason-tabs button:focus-visible,.hy-profile-tabs button:focus-visible{outline:3px solid var(--fluo);outline-offset:3px}
.hy-profile-stage{position:relative;min-height:520px;padding:190px 58px 55px;border-radius:24px;background-color:#202322;background-image:url('/m/assets/v2c-fluo/mouchete.svg');background-size:220px;color:#fff;overflow:hidden}
.hy-profile-stage:before{content:'';position:absolute;inset:0 0 auto;height:160px;background:url('/m/assets/photos/pornic-hybrid-training/challenge-bikeerg-pornic-hybrid-training.webp') center 37%/cover no-repeat;opacity:.75}
.hy-profile-number{position:absolute;z-index:1;right:24px;top:92px;color:var(--fluo);font-size:140px;font-weight:900;line-height:.8;letter-spacing:-.08em;text-shadow:4px 4px 0 #202322}
.hy-profile-stage article{position:relative;z-index:1}
.hy-profile-stage h3{max-width:620px;margin-bottom:22px;font-size:34px}
.hy-profile-stage p{color:#e3e5df;line-height:1.7}
.hy-closing{background:#fffefa;color:#202322}
.hy-closing-grid{display:grid;grid-template-columns:1fr 470px;gap:75px;align-items:center}
.hy-closing h2{max-width:680px;margin-bottom:30px}
.hy-closing p{max-width:680px;color:#4a4f4a;line-height:1.65}
.hy-closing .v-cta{margin-top:38px}
.hy-closing figure{position:relative;height:520px;margin:0;overflow:hidden;border-radius:220px 220px 28px 28px;border:7px solid #202322}
.hy-closing figure:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 65%,rgba(0,0,0,.65))}
.hy-closing img{width:100%;height:100%;object-fit:cover;object-position:center 36%}
.hy-closing figure span{position:absolute;z-index:1;left:50%;bottom:30px;padding:10px 16px;background:var(--fluo);box-shadow:5px 5px 0 #202322;color:#202322;font-size:13px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;transform:translateX(-50%) rotate(-2deg)}
@media(max-width:1199px),(hover:none) and (pointer:coarse){.hyrox-page:has(.c-device-preview-notice){overflow:hidden}}
@media(prefers-reduced-motion:reduce){.hy-ribbon>div{animation:none}.hyrox-page .v-header{transition:none}.hy-progress b,.hy-reason-count b{transition:none}}
