/* Page Hyrox mixte : seulement ce qui raccorde les deux directions. */

/* Titres : toute la largeur du contenu, jamais une largeur plus étroite qui les coupe
   (règle des sites TDB, 30/09/2026). */
.hm-page .hx-title,.hm-page .hx-section-top .hx-title,.hm-page .v-closing .v-title{max-width:none}
/* Sur deux lignes, le soulignage ou le surlignage ne touche jamais la ligne du dessous (Virginie, 01/10). */
.hm-page .hx-title,.hm-page .v-closing .v-title{line-height:1.3}
.hm-page .hx-section-top .hx-title{flex:1 1 auto}

/* Haut de page : colonne de texte plus large que le visuel (règle du héros). */
.hm-hero-grid{grid-template-columns:1.2fr 1fr;gap:64px}
.hm-hero .hy-hero-copy h2{margin-bottom:40px;line-height:1.1}
.hm-hero .hx-hero-art{margin-bottom:0}

/* Bande verticale « HYROX », reprise de « HYBRID » sur l'accueil. */
.hm-edge-word{position:absolute;z-index:1;top:44px;right:13%;padding:10px 7px 9px;border-left:5px solid var(--fluo);color:#202322;font-size:31px;font-weight:900;line-height:1;letter-spacing:.19em;pointer-events:none;text-transform:uppercase;user-select:none;writing-mode:vertical-rl}

/* Variante B de la planche : les deux colonnes des bénéfices dans des cartes. */
.hm-benefits-cards .hx-benefit-grid{gap:32px;align-items:stretch}
.hm-benefits-cards .hx-benefit-grid>article{background:var(--paper);border-radius:18px;padding:34px 36px 38px;box-shadow:0 18px 40px #20232214}
.hm-benefits-cards .hx-breath b,.hm-benefits-cards .hx-strength b{background:var(--paper)}
.hm-titles-centered .hx-benefit-grid h3{text-align:center}
/* Titre au-dessus d'un bloc centré pleine largeur : centré aussi (Virginie, 01/10). Hyrox et ATHX. */
.hm-benefits-cards .hx-title{text-align:center}
.hm-text-justify .hx-benefit-grid p{text-align:justify;hyphens:auto}
.hm-text-center .hx-benefit-grid p{text-align:center}
.hm-variant-label{max-width:1140px;margin:40px auto 0;padding:0 0 12px;font-size:13px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.hm-board .hx-benefits{margin-bottom:30px}
.hm-board .v-header{position:static}

/* Version « après » : éléments repris de l'accueil (cartes du pôle santé et des objectifs,
   vague hachurée de « Pourquoi choisir », vague dessinée du héros et de la fin). */
.hm-apres .hm-hero-wave{position:absolute;z-index:2;left:-62px;bottom:64px;width:120px;height:44px;color:var(--fluo)}
.hm-apres .hy-intro-photo{transform:rotate(-1.5deg);box-shadow:10px 10px 0 var(--night)}
.hm-apres .hx-race-focus{position:relative}
.hm-apres .hx-race-focus:after{content:'';display:block;height:34px;margin:18px 6px 0;background:repeating-linear-gradient(125deg,transparent 0 10px,var(--night) 10px 13px);clip-path:polygon(0 55%,30% 0,65% 80%,100% 20%,100% 65%,65% 100%,30% 30%,0 90%)}
.hm-apres .hx-coach-photo{box-shadow:10px 10px 0 var(--night)}
.hm-apres .hm-benefits-cards .hx-benefit-grid{gap:44px;padding:0 10px 10px 0}
.hm-apres .hm-benefits-cards .hx-benefit-grid>article{position:relative;overflow:hidden;border-radius:10px;box-shadow:10px 10px 0 var(--night);transform:rotate(-1deg)}
.hm-apres .hm-benefits-cards .hx-benefit-grid>article:nth-child(2){background:var(--sky);transform:rotate(1.2deg)}
.hm-apres .hm-benefits-cards .hx-benefit-grid>article:nth-child(2) .hx-strength b{background:var(--sky)}
.hm-apres .hm-benefits-cards .hx-benefit-grid>article:after{position:absolute;right:18px;bottom:-24px;font-size:112px;font-weight:900;line-height:1;color:var(--night);opacity:.07;letter-spacing:-.08em;pointer-events:none}
.hm-apres .hm-benefits-cards .hx-benefit-grid>article:nth-child(1):after{content:'01'}
.hm-apres .hm-benefits-cards .hx-benefit-grid>article:nth-child(2):after{content:'02'}
.hm-apres .hx-profile[open] .hx-profile-copy:after{content:'';display:block;max-width:420px;height:60px;margin-top:26px;background:repeating-linear-gradient(125deg,transparent 0 14px,var(--fluo) 14px 17px);opacity:.85;clip-path:polygon(0 55%,30% 0,65% 80%,100% 20%,100% 65%,65% 100%,30% 30%,0 90%)}

@media(max-width:1179px){.hm-edge-word{font-size:26px;right:10%}}
@media(max-width:1023px){.hm-hero-grid{grid-template-columns:1fr}.hm-edge-word{font-size:22px;top:30px;right:8%}}

/* ======================================================================================================
   VERSION TÉLÉPHONE — haut de page commun aux 15 pages intérieures (08/10/2026). Au-dessus de 760 px, rien ne change.
   ====================================================================================================== */
@media(max-width:1023px){
  /* Une colonne, de l'air sous l'en-tête (le titre y était collé : 0 px), et plus de hauteur minimale d'ordinateur. */
  body.hm-page .hm-hero-grid{grid-template-columns:minmax(0,1fr);gap:46px;min-height:0;padding-top:34px;padding-bottom:44px}
  /* Le grand H1 à 40 px, comme Contact et l'accueil (Virginie, 22/10, planche titre-haut-40px/). Son groupe souligné ne
     se coupe jamais (règle des sites TDB) : sur les pages dont le plus large groupe ne tient pas à 40 px (« Drainage
     lymphatique » : 380 px, « moderne et conviviale » : 379 px…), la taille se réduit juste assez pour tenir dans la largeur
     de l'écran — chaque page pose son rapport --pg-h1-ratio (40 px / largeur du groupe à 40 px) dans son page.css. */
  body.hm-page .hy-hero-copy h1.pg-h1-grand{font-size:min(40px,calc((100vw - 52px) * var(--pg-h1-ratio,1)));margin-bottom:30px}
  body.hm-page .pg-h1-grand .pg-h1-avant,body.hm-page .pg-h1-grand .pg-h1-apres{font-size:18px}
  /* Le visuel : les mots verticaux ne passent JAMAIS sur une photo (règle des sites TDB). La grande photo reste à
     gauche ; les mots, en 22 px, prennent la colonne de droite ; la petite photo descend sous eux, en bas à droite. */
  /* Le coin arrondi du fond gris passe de 100 à 56 px : à 100 px, les premières lettres du mot vertical (haut 24 px,
     bord droit 8 px) sortaient du gris dans la courbe (Virginie, 22/10). À 56 px, la courbe laisse 5 px au bord à la hauteur
     des premières lettres, à toute largeur : les réglages du mot sont en pixels, pas en pourcentage. */
  body.hm-page .hx-hero-art{height:430px;border-radius:28px 56px 28px 28px}
  body.hm-page .hx-hero-art .hm-edge-word{top:24px;right:8px;font-size:22px}
  /* Le second mot (Drainage LYMPHATIQUE, Coaching PERSO…) : en contour, sans bloc fluo, sans ombre, sans trait, à côté du
     premier et à sa hauteur — choix C « mais pas souligné » de Virginie (22/10, planche second-mot-telephone/). */
  body.hm-page .hx-hero-art>span[aria-hidden="true"]:not(.hm-edge-word):not(.hx-stamp){top:24px;right:55px;font-size:22px;padding:10px 7px 9px;background:none;box-shadow:none;border:0;color:transparent;-webkit-text-stroke:1.4px #202322}   /* right 55 : 6 px après le trait du premier mot, et 2 à 8 px avant la boîte de la grande photo de 360 à 430 px (mesuré, surface commune nulle) */
  body.hm-page .hx-hero-art .hx-photo-small{right:-10px;bottom:-22px;width:46%;height:150px}
  body.hm-page .hx-hero-art .hx-stamp{left:14px}
  /* Sections un peu moins hautes sur téléphone (65 px de marge en haut et en bas, comme sur une tablette). */
  body.hm-page .hx-section{padding:56px 0}
  /* « Qu'est-ce que l'Hyrox ? » : une colonne (la grille de l'ordinateur laissait 128 px au texte et 33 px à
     l'étiquette de la photo) ; la photo moins haute, les numéros plus petits. */
  body.hm-page .hy-intro-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  /* L'étiquette « Cardio + renforcement » sur une bande sombre sous la photo, jamais dessus (règle des sites TDB). */
  body.hm-page .hy-intro-photo{height:auto;background:var(--night)}
  body.hm-page .hy-intro-photo img{height:330px}
  body.hm-page .hy-intro-photo span{left:18px;bottom:14px}
  body.hm-page .hy-intro-photo:after{bottom:auto;height:330px}
  body.hm-page .hy-intro-photo{padding-bottom:70px}
  body.hm-page .hy-intro-copy article{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:26px 0}
  body.hm-page .hy-intro-copy .hy-index{width:44px;height:44px;font-size:14px}
  body.hm-page .hy-intro-copy h3{font-size:22px;margin-bottom:14px}
  body.hm-page .hy-intro-copy p{font-size:16.5px}
  body.hm-page .hx-station>[data-hx-source] span{font-size:inherit}
  body.hm-page .hx-detail summary{min-height:44px}   /* accordéons « Pourquoi pratiquer » au doigt (la grille centre déjà) */
  /* Les liens d'une liste de coordonnées (téléphone, adresse) : zone de toucher agrandie autour du mot. */
  body.hm-page main li>span>a{position:relative}
  body.hm-page main li>span>a:after{content:'';position:absolute;inset:-12px -8px}
}
/* Tablette en paysage et petit ordinateur (1 024 à 1 199 px) : le haut de page garde ses deux colonnes, mais le visuel
   prend la disposition du téléphone — sinon le second mot vertical passait sur la grande photo (mesuré : 194 à
   6 855 px² selon la page). L'ordinateur validé (1 200 px et plus) ne bouge pas. */
@media(min-width:1024px) and (max-width:1199px){
  body.hm-page .hx-hero-art{border-radius:28px 56px 28px 28px}   /* même raison que sur téléphone (22/10) */
  body.hm-page .hx-hero-art .hm-edge-word{top:24px;right:10px;font-size:24px}
  body.hm-page .hx-hero-art>span[aria-hidden="true"]:not(.hm-edge-word):not(.hx-stamp){top:24px;right:59px;font-size:22px;padding:10px 7px 9px;background:none;box-shadow:none;border:0;color:transparent;-webkit-text-stroke:1.4px #202322}   /* second mot en contour, comme sur téléphone (22/10) ; en 22 px et à 59 px, sinon il touche la grande photo ou le premier mot à 1 024 px */
  body.hm-page .hx-hero-art .hx-photo-small{right:-10px;bottom:-22px;width:46%;height:170px}
  body.hm-page .hx-hero-art .hx-stamp{left:14px}
}
/* Très petits téléphones (moins de 360 px, 320 px pour les plus anciens) : marges latérales de 18 px, titres de
   section en 26 px pour que leurs groupes de mots tiennent (« Pornic Hybrid Training » ne se coupe jamais), mots
   verticaux et tampon du haut de page plus petits, libellés des boutons en 14 px. */
@media(max-width:359px){
  body.hm-page .v-wrap,body.hm-page.hx-page .v-wrap{padding:0 18px}
  body.hm-page .hx-title{font-size:26px}
  body.hm-page .hy-hero-copy h1.pg-h1-grand{font-size:min(40px,calc((100vw - 40px) * var(--pg-h1-ratio,1)))}   /* marges de 18 px ici */
  body.hm-page .hx-hero-art .hm-edge-word{font-size:19px;right:6px}
  body.hm-page .hx-hero-art>span[aria-hidden="true"]:not(.hm-edge-word):not(.hx-stamp){font-size:19px;right:50px;top:24px}   /* 6 px après le trait du premier mot, 1 px avant la boîte de la grande photo à 320 px (mesuré, surface commune nulle) */
  body.hm-page .hx-hero-art .hx-stamp{left:8px;padding:9px 13px;font-size:11px}
  body.hm-page .hx-hero-art .hx-photo-small{width:44%;height:136px}
  body.hm-page .v-cta{gap:10px;font-size:14px}
  body.hm-page .cta-tel:not(.cta-tel-dedans){padding:0 18px}
}