/* Page ATHX : seulement les sections propres à l'ATHX. Le reste vient de la page Hyrox
   (../page-hyrox.css, ../hyrox-independant/page.css, ../hyrox-mix/page.css). */

.at-icon{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Pourquoi intégrer l'ATHX : deux paragraphes, puis trois cartes comme le pôle santé. */
.at-why-text{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.at-cards{list-style:none;margin:56px 0 0;padding:0 10px 10px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.at-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:18px;padding:34px 26px 38px;border-radius:10px;background:var(--paper);box-shadow:10px 10px 0 var(--night);text-align:center;transform:rotate(-1deg)}
.at-card:nth-child(2){background:var(--fluo);transform:rotate(1.2deg)}
.at-card:nth-child(3){background:var(--sky);transform:rotate(-.6deg)}
.at-card .at-icon{width:64px;height:64px;padding:14px;border-radius:50%;background:var(--night);color:var(--fluo);box-sizing:content-box}
.at-card p{font-size:21px;line-height:1.3;margin:0}
.at-why{border-top:1px solid #d8ddd5}

/* La compétition : fond sombre moucheté de l'accueil, frise des six zones. */
.at-comp{background:var(--night) url('/m/assets/v2c-fluo/mouchete.svg') center/240px;color:var(--paper)}
.at-comp .hx-title{color:var(--paper)}
.at-comp .c-title-highlight{color:var(--paper)}
/* Retenu le 30/09 : titre et texte sur fond clair, la frise seule sur le fond moucheté. */
.at-comp-intro{background:var(--soft)}
.at-comp-zones{padding:64px 0 84px}
.at-comp-zones .at-legend{margin-top:0}
/* Pastille à cheval sur la jonction : la frise est la suite du texte au-dessus. */
.at-comp-intro{padding-bottom:110px}
.at-bridge{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;margin:-87px 0 26px}
.hx-section .at-bridge-pill{display:inline-flex;align-items:center;gap:12px;margin:0;padding:13px 24px;border-radius:40px;background:var(--fluo);color:var(--night);box-shadow:0 12px 28px #0d0f0d40;font-size:16px;font-weight:850;letter-spacing:.04em;line-height:1}
.at-bridge-pill svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:at-nudge 1.6s ease-in-out infinite}
.at-bridge-line{display:block;width:0;height:44px;border-left:3px dashed var(--fluo);opacity:.7}
@keyframes at-nudge{50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.at-bridge-pill svg{animation:none}}
.at-eyebrow{display:block;margin-bottom:14px;font-size:11px;font-weight:850;letter-spacing:.14em}
.at-comp-intro p{margin:0}

/* Présentation 1 : trois cartes, comme « Pourquoi choisir notre salle » sur l'accueil. */
.at-facts{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.at-fact{padding:33px 36px;border-radius:12px;background:var(--paper)}
.at-fact-main{grid-row:span 2;display:flex;flex-direction:column;justify-content:center;padding:45px;background:var(--night);color:var(--paper)}
.at-fact-main .at-eyebrow{color:var(--fluo)}
.at-fact-main p{font-size:19.5px;line-height:1.6;color:#eef0ea}
.at-hatch{display:block;height:70px;margin-top:34px;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%)}
.at-fact-fluo{background:var(--fluo)}

/* Présentation 2 : un onglet par paragraphe ; les trois panneaux partagent la même case. */
.at-tabs{display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;align-items:stretch}
.at-tab-list{display:flex;flex-direction:column;gap:12px}
.at-tab-list button{display:flex;align-items:center;gap:16px;padding:16px 20px;border:0;border-radius:12px;background:var(--paper);color:var(--night);font:inherit;font-size:18px;font-weight:800;text-align:left;cursor:pointer;transition:transform .2s,background .2s}
.at-tab-list button:hover{transform:translateX(4px)}
.at-tab-list button[aria-selected=true]{background:var(--night);color:var(--paper)}
.at-tab-icon{flex:none;width:26px;height:26px;padding:9px;border-radius:50%;background:var(--fluo);color:var(--night);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;box-sizing:content-box}
.at-panels{display:grid}
.at-panel{grid-area:1/1;display:flex;align-items:center;padding:40px 46px;border-radius:12px;background:var(--paper);box-shadow:10px 10px 0 var(--night);visibility:hidden;opacity:0;transition:opacity .25s}
.at-panel.is-active{visibility:visible;opacity:1}
.at-panel p{font-size:20px;line-height:1.65}

/* Présentation 3 : le premier paragraphe en chapô, deux encarts de même hauteur dessous. */
.at-lead-text{max-width:900px;font-size:22px!important;line-height:1.6!important}
.at-lead-cards{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;margin-top:40px;padding:0 10px 10px 0}
.at-lead-card{padding:32px 36px;border-radius:10px;background:var(--paper);box-shadow:10px 10px 0 var(--night);transform:rotate(-.8deg)}
.at-lead-fluo{background:var(--fluo);transform:rotate(1deg)}
.at-legend{display:flex;gap:26px;margin:56px 0 22px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.at-legend span:before{content:'';display:inline-block;width:14px;height:14px;margin-right:9px;vertical-align:-2px;border-radius:3px}
.at-legend-test:before{background:var(--fluo)}
.at-legend-pause:before{border:2px dashed #ffffff80}
.at-zones{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;align-items:center}
.at-zones:before{content:'';position:absolute;left:0;right:0;top:50%;border-top:3px dashed #ffffff40;z-index:0}
.at-zone{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;padding:20px 16px 22px;border-radius:12px;transition:transform .2s}
.at-zone:hover{transform:translateY(-4px)}
.at-zone-num{font-size:13px;font-weight:850;letter-spacing:.1em}
.at-zone p{margin:0;font-size:14px;line-height:1.45}
.at-zone p strong{display:block;margin-bottom:6px;font-size:17px;line-height:1.2}
.at-zone-pause{min-height:215px;background:#2c312d;border:2px dashed #ffffff55;color:#d6dbd3}
.at-zone-test{min-height:280px;background:var(--fluo);color:var(--night);box-shadow:8px 8px 0 #0d0f0d;transform:rotate(-1.5deg)}
.at-zone-test:nth-child(4){transform:rotate(1.2deg)}
.at-zone-test:hover{transform:rotate(0) translateY(-4px)}
.at-zone-test .at-icon{width:54px;height:54px}
.at-zone-test p strong{font-size:21px}

/* Pourquoi chez Pornic Hybrid Training : les trois forces sous le texte. */
.at-assets{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.at-assets li{display:flex;align-items:center;gap:18px;padding:14px 18px;border-radius:10px;background:var(--soft)}
.at-assets li:nth-child(2){background:var(--fluo)}
.at-asset-icon{flex:none;width:30px;height:30px;padding:10px;border-radius:50%;background:var(--night);color:var(--fluo);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;box-sizing:content-box}
.at-assets p{margin:0;font-size:17px;line-height:1.4}

@media(max-width:1179px){.at-zones{grid-template-columns:repeat(3,minmax(0,1fr))}.at-zones:before{display:none}}
@media(max-width:1023px){
  .at-why-text,.at-cards,.at-facts,.at-tabs,.at-lead-cards{grid-template-columns:1fr}
  .at-fact-main{grid-row:auto}
  .at-zones{grid-template-columns:1fr}
  .at-zone-test,.at-zone-pause{min-height:0;transform:none}
}

/* « Qu'est-ce que l'ATHX » : un seul trait, entre les deux articles (Virginie, 30/09). */
.athx-page .hy-intro-copy article:last-child{border-bottom:0;padding-bottom:0}

/* Planche de la section sous le haut de page : raccords des blocs de l'accueil. */
.at-intro-collage .c-trial-p5-step h3{font-size:24px}
.at-intro-collage .c-trial-p5-step p{font-size:17px;color:#474b47}
.at-intro-collage .c-trial-p5-steps{margin-top:0;gap:36px}
.at-intro-collage .c-trial-p5-visual .c-wave{position:absolute;z-index:4;left:-46px;top:236px;width:120px;height:44px;color:var(--fluo)}
/* Création : la recette de l'ATHX. */
.at-intro-recipe{background:var(--paper)}
.at-recipe{display:flex;flex-direction:column;align-items:center;margin-bottom:64px}
.at-recipe-row{display:flex;align-items:center;justify-content:center;gap:22px}
.at-ingredient{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:150px;height:150px;border:0;border-radius:50%;background:var(--soft);color:var(--night);font:inherit;font-size:16px;font-weight:850;box-shadow:8px 8px 0 var(--night);cursor:pointer;transition:transform .2s,background .2s}
.at-ingredient:nth-of-type(1){transform:rotate(-4deg)}.at-ingredient:nth-of-type(3){transform:rotate(3deg)}
.at-ingredient:hover{transform:translateY(-4px)}
.at-ingredient .at-icon{width:44px;height:44px}
.at-ingredient[aria-pressed=true]{background:var(--fluo)}
.at-ingredient.is-seen:not([aria-pressed=true]){background:var(--sky)}
.at-op{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--fluo);color:var(--night);font-size:30px;font-weight:900;line-height:1}
.at-result{display:flex;flex-direction:column;align-items:center;justify-content:center;width:170px;height:170px;border-radius:28px;background:var(--night);color:var(--paper);transform:rotate(-3deg);transition:background .3s,color .3s,transform .3s}
.at-result strong{font-size:44px;font-weight:900;letter-spacing:-.04em;line-height:1}
.at-result-count{margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.at-result.is-complete{background:var(--fluo);color:var(--night);transform:rotate(2deg) scale(1.05)}
.hx-section .at-recipe-hint,.at-recipe-hint{margin:26px 0 0;font-size:14px;font-weight:700;color:var(--muted)}
.at-recipe-cols{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.at-recipe-cols article{display:grid;grid-template-columns:58px 1fr;gap:22px}
.at-recipe-cols h3{margin-bottom:18px;font-size:26px}
.at-recipe-cols p{font-size:17.5px;line-height:1.65;color:#474b47}
.at-mark{background:linear-gradient(transparent 62%,transparent 62%);transition:background .3s}
.at-mark.is-lit{background:linear-gradient(transparent 55%,var(--fluo) 55%,var(--fluo) 92%,transparent 92%)}
.at-intro-goals .v-goal:after{content:none!important}
.at-intro-goals .v-goal h3{margin:18px 0 14px}
.at-intro-goals .v-goal-symbol .at-icon{width:52px;height:52px;padding:12px;border-radius:50%;background:var(--night);color:var(--fluo);box-sizing:content-box}
.at-goals-hatch{grid-column:1 / 6;align-self:start;margin-top:26px;height:60px}

/* Version téléphone (08/10/2026) : la recette sur deux lignes — les trois ingrédients, puis « = ATHX » — et ses
   deux colonnes de texte l'une sous l'autre (elles faisaient 890 px de large à 375 px). */
@media(max-width:1023px){
  .at-recipe{margin-bottom:44px}
  .at-recipe-row{display:grid;grid-template-columns:repeat(5,auto);justify-content:center;align-items:center;gap:16px 4px}
  .at-ingredient{width:90px;height:90px;gap:4px;font-size:14px;letter-spacing:-.01em;box-shadow:5px 5px 0 var(--night)}
  .at-ingredient .at-icon,.at-ingredient svg{width:30px;height:30px}
  .at-op{width:22px;height:22px;font-size:17px}
  /* « = » et le résultat dans la même case, centrés ensemble : le résultat au milieu, « = » juste à sa gauche. */
  .at-recipe-row>.at-op:last-of-type{grid-column:1/6;grid-row:2;justify-self:center;transform:translateX(-92px)}
  .at-result{grid-column:1/6;grid-row:2;justify-self:center;width:132px;height:112px;border-radius:22px}
  /* « Pourquoi intégrer l'ATHX » : les trois cartes en rangées, l'icône à gauche (une carte faisait un tiers d'écran). */
  .at-cards{gap:18px;margin-top:36px}
  .at-card{flex-direction:row;gap:18px;padding:18px 22px;text-align:left}
  .at-card .at-icon{width:36px;height:36px;padding:11px}
  .at-card p{font-size:18px}
  /* Les trois onglets de la compétition côte à côte (ils s'empilaient sur 200 px), icône réduite. */
  .at-tab-list{flex-direction:row;flex-wrap:wrap;gap:8px}
  .at-tab-list button{min-height:44px;gap:8px;padding:6px 14px 6px 6px;font-size:15px}
  .at-tab-list button:hover{transform:none}
  .at-tab-icon{width:18px;height:18px;padding:6px}
  .at-panel{padding:28px 24px}
  .at-panel p{font-size:17px}
  /* 22/10 : sur téléphone, la carte de l'onglet prend la hauteur de SON texte (les trois partageaient la plus haute :
     170 px de vide au-dessus du « Format ») ; la légende des zones sur deux lignes propres. */
  .at-panels{display:block}
  .at-panel{display:none}
  .at-panel.is-active{display:flex}
  .at-legend{flex-direction:column;gap:10px;margin-top:40px}
  .at-result strong{font-size:34px}
  .at-result-count{font-size:12px}
  .at-recipe-cols{grid-template-columns:1fr;gap:38px}
  .at-recipe-cols article{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .at-recipe-cols .hy-index{width:44px;height:44px;font-size:14px}
  .at-recipe-cols h3{font-size:22px}
  .at-recipe-cols p{font-size:16.5px}
}
/* Très petits téléphones : les trois ingrédients un peu plus petits pour tenir dans 284 px. */
@media(max-width:359px){.at-ingredient{width:80px;height:80px;font-size:13px}.at-ingredient svg{width:26px;height:26px}.at-recipe-row{gap:14px 2px}}