/* Page Médecine chinoise : seulement ses sections propres. Haut de page, bandeau, titres et fin de
   page viennent des styles communs (accueil, page Hyrox). Préfixe mc- partout. */

/* Rubrique active de l'en-tête : marquée par le menu commun (version-2c-fluo.css, 06/10). */
/* Bandeau : la piste recule de la moitié de sa largeur ; l'écart final la fait tomber juste. */
.mc-page .hy-ribbon>div{padding-right:28px}

/* Haut de page : colonne de texte élargie (comme Renforcement musculaire) pour que la question
   tienne en trois lignes au lieu de quatre. */
@media(min-width:1024px){.mc-page .hm-hero-grid{grid-template-columns:1.28fr 1fr}}
/* 1. Haut de page : « MÉDECINE », puis « CHINOISE » en étiquette fluo à sa gauche (comme COACHING +
   PERSO) ; en petit, la photo du cabinet du pôle santé. */
.mc-page .hm-edge-word{font-size:27px;right:8%}
.mc-edge-second{position:absolute;z-index:1;top:70px;right:calc(8% + 58px);padding:10px 6px 9px;background:var(--fluo);box-shadow:4px 4px 0 #202322;color:#202322;font-size:27px;font-weight:900;line-height:1;letter-spacing:.19em;pointer-events:none;text-transform:uppercase;user-select:none;writing-mode:vertical-rl}
.mc-badge{flex:none;display:block;width:30px;height:30px;padding:13px;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}

/* 3. Qu'est-ce que la MTC : l'introduction centrée, puis le bilan et l'acupuncture côte à côte
   (sans ordre imposé entre les deux). */
.mc-what{background:var(--soft)}
.mc-intro{max-width:860px;margin:0 auto 56px;text-align:center}
.mc-intro p{margin:0;font-size:20.5px!important;line-height:1.55!important}
.mc-path{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:stretch;padding:0 10px 10px 0}
.mc-step{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:44px 38px 38px;border-radius:12px;background:var(--paper);box-shadow:10px 10px 0 var(--night);transform:rotate(-1deg)}
.mc-step-sky{background:var(--sky);transform:rotate(1deg)}
.mc-step .mc-badge{margin-bottom:18px}
.mc-step h3{margin:0 0 14px;font-size:26px!important;line-height:1.2}
.mc-step p{margin:0}

/* 4. Pourquoi consulter : les pastilles « qu'est-ce qui vous amène ? » mettent en avant la carte qui
   en parle. Le titre et la question se centrent au-dessus des trois cartes. Pastilles sans contour
   sombre : une ombre décalée, comme les cartes. Les cartes non choisies gardent tout leur contraste. */
.mc-why{background:var(--paper)}
.mc-why .hx-title{text-align:center}
.mc-chips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:0 0 40px}
.mc-chips-ask{flex:0 0 100%;margin:0 0 4px;font-size:18px!important;font-weight:850;text-align:center}  /* la question sur sa ligne, les pastilles sur une seule ligne dessous */
.mc-chip{padding:9px 16px;border:0;border-radius:999px;background:var(--soft);color:var(--night);font:inherit;font-size:15px;font-weight:800;box-shadow:3px 3px 0 var(--night);cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
.mc-chip:hover{transform:translateY(-2px);box-shadow:4px 5px 0 var(--night)}
.mc-chip[aria-pressed=true]{background:var(--fluo)}
.mc-chip:focus-visible{outline:3px solid var(--night);outline-offset:3px}
.mc-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:stretch;padding:0 10px 10px 0}
.mc-why-card{display:flex;flex-direction:column;justify-content:center;padding:34px 30px;border-radius:12px;background:var(--soft);box-shadow:10px 10px 0 var(--night);transition:transform .3s,box-shadow .3s,background .3s}
.mc-why-card h3{margin:0 0 14px;font-size:23px!important;line-height:1.25}
.mc-why-card p{margin:0}
.mc-why-grid.has-focus .mc-why-card.is-on{background:var(--sky);box-shadow:10px 10px 0 var(--fluo);transform:translateY(-8px) rotate(-1deg)}

/* 5. Avec Merry : sa carte à gauche, le texte à droite. */
.mc-merry{background:var(--sky)}
.mc-merry-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center;padding:0 10px 10px 0}
.mc-card-name{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:300px;padding:44px 40px;border-radius:12px;background:var(--night);color:var(--paper);box-shadow:10px 10px 0 var(--fluo);transform:rotate(-1.5deg);overflow:clip}
.mc-card-name b{font-size:96px;font-weight:900;line-height:.9;letter-spacing:-.04em}
.mc-card-name span{margin-top:14px;font-size:14px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--fluo)}
.mc-stamp{position:absolute;top:26px;right:26px;padding:8px 12px;border:2px solid var(--fluo);border-radius:6px;color:var(--fluo);font-size:12px;font-style:normal;font-weight:900;letter-spacing:.14em;transform:rotate(6deg)}
.mc-wave{position:absolute;right:-20px;bottom:18px;width:180px;opacity:.5}
.mc-merry-text p{margin:0 0 16px}
.mc-merry-text .v-cta{margin-top:12px}

/* 6. L'accès, sur le moucheté (seule section sombre) : texte sur carte à gauche, carte Google à droite. */
.mc-access{padding-bottom:170px;margin-bottom:-70px;background:var(--night) url('/m/assets/v2c-fluo/mouchete.svg') center/240px;color:var(--paper)}
.mc-access .hx-title{color:var(--paper);text-align:center}
/* La fin de page arrondie suit cette section sombre : le fond passe sous le coin (comme Remise en forme). */
.mc-access + .hm-closing{z-index:1}
.mc-access-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch;padding:0 10px 10px 0}
.mc-access-card{display:flex;flex-direction:column;justify-content:center;padding:38px 40px;border-radius:12px;background:var(--paper);color:var(--night);box-shadow:10px 10px 0 var(--fluo);transform:rotate(-1deg)}
.mc-access-card p{margin:0 0 14px}
.mc-facts{display:grid;gap:12px;margin:10px 0 0;padding:0;list-style:none}
.mc-facts li{display:flex;align-items:center;gap:14px;font-size:17px;font-weight:750}
.mc-facts a{color:inherit;text-decoration:none}
.mc-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--fluo)}
.mc-ico svg{width:20px;height:20px;fill:none;stroke:var(--night);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mc-access-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.mc-access-actions .v-cta{margin-top:0}
/* Second bouton de la carte : fond bleu clair, sans contour sombre (« Jamais de bordure noire »). */
.mc-cta-light{background:var(--sky)!important}
.mc-cta-light:hover{background:#d3dbe5!important}
.mc-map{border-radius:12px;box-shadow:10px 10px 0 var(--fluo);transform:rotate(1deg)}
.mc-map :is(iframe,:where(.c-carte-plan)){height:100%;min-height:420px;border-radius:12px}

@media(prefers-reduced-motion:reduce){.mc-chip,.mc-why-card{transition:none}}
@media(max-width:1023px){
  .mc-path,.mc-why-grid,.mc-merry-grid,.mc-access-grid{grid-template-columns:1fr;gap:40px}
  .mc-step,.mc-step-sky,.mc-card-name,.mc-access-card,.mc-map{transform:none}
}

/* Version téléphone (08/10) : les pastilles des besoins à 44 px au doigt. */
@media(max-width:1023px){
  .mc-chip{min-height:44px}
  .v2c.c-fluo .mc-intro+.cta-tel{margin-bottom:34px}   /* 22/10 : le bouton de téléphone touchait la paire de cartes (Virginie) */
  /* La carte « Merry » suit la largeur de l'écran : en 96 px, le prénom imposait 338 px à sa colonne (débordement à 360). */
  .mc-merry-grid{grid-template-columns:minmax(0,1fr)}
  .mc-card-name b{font-size:clamp(64px,22vw,96px)}
}
/* Grand titre sur téléphone (22/10) : « Médecine chinoise » fait 317 px à 40 px ; la taille se réduit pour qu'il tienne (hyrox-mix/page.css). */
.hy-hero-copy h1.pg-h1-grand{--pg-h1-ratio:0.1262}