/*
 * SymptômeAI — Body Selector v1.0 (LOCKED)
 * Rendering layer validated on 2026-07-27.
 * Coordinates and marker rules are intentionally frozen.
 * Do not alter body-map selectors without testing all six views:
 * Homme/Femme/Enfant × Face/Dos.
 */

:root{--green:#079665;--green2:#e4f8f0;--ink:#071426;--muted:#667085;--line:#e7ebef;--bg:#f4f6f7;--shadow:0 20px 70px rgba(20,30,42,.14)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;color:var(--ink);background:var(--bg)}button{font:inherit}.desktop-stage{min-height:100vh;display:grid;place-items:center;padding:22px}.app-shell{width:min(430px,100%);height:min(900px,calc(100vh - 44px));background:#fff;border-radius:34px;box-shadow:var(--shadow);overflow:hidden;position:relative}.topbar{height:68px;padding:17px 26px 8px;display:flex;align-items:center;justify-content:space-between;background:#fff;position:relative;z-index:8}.brand{font-size:23px;font-weight:950;letter-spacing:-1.2px}.brand span{color:var(--green)}.icon-btn{border:0;background:transparent;font-size:23px;font-weight:900;cursor:pointer;color:#0b1118}.hidden{visibility:hidden}.scroll-area{height:calc(100% - 68px);overflow-y:auto;overflow-x:hidden;padding:8px 26px 112px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.screen{display:none;animation:fade .22s ease}.screen.active{display:block}@keyframes fade{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:none}}.eyebrow{color:#087e57;font-weight:900;font-size:12px;letter-spacing:1.5px;margin:9px 0 10px}h1{font-size:36px;line-height:1.06;letter-spacing:-1.7px;margin:0 0 13px}h2{font-size:25px;margin:0}h3{font-size:15px;margin:26px 0 12px}.lead{font-size:17px;color:var(--muted);line-height:1.45;margin:0 0 21px}.doctor-hero{height:298px;display:grid;place-items:end center;overflow:hidden}.doctor-hero img{width:236px;height:236px;object-fit:contain;image-rendering:auto}.primary{width:100%;border:0;border-radius:18px;padding:19px 21px;background:linear-gradient(135deg,#058f60,#0cb476);color:#fff;font-weight:900;font-size:17px;display:flex;justify-content:space-between;box-shadow:0 13px 24px rgba(7,150,101,.2);cursor:pointer}.home-links{display:grid;gap:10px;margin-top:17px}.home-links button{border:1px solid var(--line);background:#fff;border-radius:17px;padding:16px;display:grid;grid-template-columns:28px 1fr 20px;align-items:center;text-align:left}.home-links b{font-size:15px}.home-links em{font-style:normal;font-size:23px}.home-links .danger span{color:#e93f43}.stepper{display:flex;align-items:center;justify-content:center;margin:2px 0 28px}.stepper span{width:56px;height:5px;background:#dfe4e8;position:relative}.stepper span:first-child{border-radius:8px 0 0 8px}.stepper span:last-child{border-radius:0 8px 8px 0}.stepper span+span{margin-left:8px}.stepper span.active{background:var(--green)}.profile-list{display:grid;gap:14px;margin-top:23px}.profile-card{border:1.5px solid var(--line);border-radius:22px;min-height:132px;background:#fff;padding:0 17px;display:grid;grid-template-columns:108px 1fr 30px;align-items:center;text-align:left;overflow:hidden;cursor:pointer}.profile-card.man{border-color:#51c49b;background:linear-gradient(110deg,#f0fff9,#fff)}.profile-card.woman{border-color:#d9cbff;background:linear-gradient(110deg,#fbf8ff,#fff)}.profile-card.child{border-color:#f1d58d;background:linear-gradient(110deg,#fff9ed,#fff)}.profile-card img{width:100px;height:125px;object-fit:contain;align-self:end}.profile-card b{font-size:21px}.profile-card small{display:block;color:var(--muted);font-size:14px;margin-top:3px}.profile-card em{font-style:normal;color:var(--green);font-size:27px}.segmented{display:grid;grid-template-columns:1fr 1fr;background:#f2f4f5;border-radius:17px;padding:4px;margin:15px 0 8px}.segmented button{border:0;background:transparent;padding:12px;border-radius:14px;font-weight:850;color:#5a6474}.segmented button.active{background:var(--green2);color:#077c55}.body-stage{display:grid;place-items:center;min-height:510px}.body-svg{width:255px;max-width:100%;height:auto}.hidden-figure{display:none}.hot{cursor:pointer}.hot circle:first-child{fill:rgba(255,255,255,.85);stroke:rgba(7,150,101,.35);stroke-width:8}.hot circle:last-child{fill:var(--green)}.hot:hover circle:first-child,.hot:focus circle:first-child{stroke:rgba(7,150,101,.62);transform-box:fill-box;transform-origin:center;transform:scale(1.08)}.info-card{background:#f7f9fa;border-radius:18px;padding:16px;text-align:center;color:var(--muted);font-size:14px}.head-illustration{height:330px;overflow:hidden;display:grid;place-items:center;margin-top:-6px}.head-illustration svg{width:100%;max-width:360px;height:330px}.detail-card{border:1px solid var(--line);border-radius:23px;padding:18px;background:#fff;box-shadow:0 12px 28px rgba(20,30,40,.06);margin-top:-8px}.detail-card p{color:var(--muted);margin:4px 0 15px}.head-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.head-grid button{min-height:102px;border:1px solid var(--line);background:#fff;border-radius:17px;padding:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer}.head-grid button:hover,.head-grid button:focus{border-color:#64c9a7;background:#f4fff9}.head-grid small{font-weight:800;font-size:11px}.mini-head{width:42px;height:46px;border:2px solid #66717d;border-radius:48% 48% 44% 44%;position:relative;display:block}.mini-head:before{content:"";position:absolute;left:7px;right:7px;top:4px;height:10px;background:#1d252d;border-radius:14px 14px 5px 5px}.mini-head.front:after{content:"";position:absolute;left:3px;right:3px;top:16px;border-top:4px solid #72d1b0}.mini-head.temple:after{content:"";position:absolute;width:8px;height:10px;right:1px;top:14px;background:#72d1b0;border-radius:50%}.mini-head.crown:after{content:"";position:absolute;left:9px;right:9px;top:3px;border-top:5px solid #72d1b0}.mini-head.side-left{border-radius:46% 55% 46% 50%;transform:scaleX(-1)}.mini-head.side-right{border-radius:46% 55% 46% 50%}.mini-head.side-left:after,.mini-head.side-right:after{content:"";position:absolute;left:2px;top:11px;width:19px;height:25px;background:#72d1b0;border-radius:50% 30% 35% 45%;opacity:.75}.mini-head.back:after{content:"";position:absolute;inset:8px 5px 5px;background:#1d252d;border-radius:45%}.feature-icon{font-size:35px;line-height:1;color:#1f2b36}.selected-zone{border:1px solid var(--line);border-radius:19px;padding:15px;display:flex;align-items:center;gap:13px}.selected-zone>span{width:43px;height:43px;background:var(--green2);color:var(--green);display:grid;place-items:center;border-radius:50%}.selected-zone b,.selected-zone small{display:block}.selected-zone small{color:var(--muted);margin-top:4px}.symptom-list{display:grid;gap:10px}.symptom-list button{border:1px solid var(--line);border-radius:17px;padding:14px;background:#fff;display:grid;grid-template-columns:34px 1fr 16px;align-items:center;text-align:left;cursor:pointer}.symptom-list div b,.symptom-list small{display:block}.symptom-list small{color:var(--muted);margin-top:3px}.symptom-list em{font-style:normal;font-size:23px}.red{color:#ff4148}.purple{color:#7451e8}.orange{color:#ff8a18}.blue{color:#2489e8}.green{color:#08a06a}.assistant-bubble{background:#f7faf9;border-radius:21px;padding:14px;display:flex;align-items:center;gap:13px;margin-bottom:23px}.assistant-bubble img{width:68px;height:68px;object-fit:cover;border-radius:17px}.assistant-bubble p{margin:0;line-height:1.4}.answers{display:grid;gap:11px}.answers button{border:1px solid var(--line);background:#fff;border-radius:17px;padding:18px;text-align:left;font-weight:850}.bottom-nav{position:absolute;bottom:0;left:0;right:0;height:88px;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:9px 11px 14px;z-index:10}.bottom-nav button{border:0;background:transparent;color:#687384;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:750}.bottom-nav button span{font-size:24px}.bottom-nav button small{font-size:11px}.bottom-nav .active{color:var(--green)}
@media(max-width:520px){.desktop-stage{padding:0}.app-shell{width:100%;height:100vh;border-radius:0}.scroll-area{padding-left:22px;padding-right:22px}.topbar{padding-left:22px;padding-right:22px}h1{font-size:35px}}


/* ===== V17 — mascotte statique officielle ===== */
.static-mascot {
  position: relative;
  min-height: 330px;
  margin: 8px 0 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}
.static-mascot .doctor-glow {
  position: absolute;
  width: 265px;
  height: 265px;
  bottom: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(80, 220, 167, .28), rgba(219, 248, 237, .72) 52%, rgba(255,255,255,0) 74%);
}
.static-mascot img {
  position: relative;
  z-index: 2;
  display: block;
  width: min(285px, 78vw);
  max-height: 330px;
  object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(20, 70, 54, .14));
}
.doctor-badge {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 34px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  border: 1px solid #e3efea;
  box-shadow: 0 8px 20px rgba(22, 52, 44, .10);
  color: #087a56;
  font-size: 13px;
  font-weight: 850;
}
@media (max-height: 760px) {
  .static-mascot { min-height: 270px; }
  .static-mascot img { max-height: 270px; width: 235px; }
}


/* ===== V19 — Dr Sym intégré naturellement, sans cadre ni rond ===== */
#home .static-mascot {
  min-height: 330px;
  margin: 0 0 2px;
  overflow: hidden;
  align-items: flex-end;
}
#home .static-mascot .doctor-glow {
  display: none;
}
#home .static-mascot img {
  width: min(345px, 90vw);
  height: 340px;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 15px 22px rgba(19, 65, 50, .12));
}
#home .doctor-badge {
  right: 0;
  bottom: 62px;
}
@media (max-width: 520px) {
  #home .static-mascot {
    min-height: 325px;
  }
  #home .static-mascot img {
    width: min(360px, 94vw);
    height: 335px;
  }
}
@media (max-height: 760px) {
  #home .static-mascot {
    min-height: 265px;
  }
  #home .static-mascot img {
    width: 290px;
    height: 280px;
  }
  #home .doctor-badge {
    bottom: 48px;
  }
}


/* ===== V20 — deuxième page figée selon le visuel validé ===== */
.profile-screen-v20 {
  padding-top: 4px;
}

.profile-screen-v20 .profile-step {
  margin-top: 8px;
  margin-bottom: 12px;
  letter-spacing: .7px;
}

.profile-screen-v20 h1 {
  font-size: 31px;
  line-height: 1.08;
  letter-spacing: -1.25px;
  margin-bottom: 8px;
}

.profile-screen-v20 .lead {
  margin-bottom: 26px;
}

.profile-screen-v20 .profile-list {
  gap: 18px;
  margin-top: 0;
}

.profile-screen-v20 .profile-card {
  min-height: 142px;
  padding: 14px 22px 14px 18px;
  grid-template-columns: 112px minmax(0, 1fr) 24px;
  gap: 18px;
  border: 1px solid #e5e8ec;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(20, 30, 40, .07);
  overflow: visible;
}

.profile-screen-v20 .profile-card.man,
.profile-screen-v20 .profile-card.woman,
.profile-screen-v20 .profile-card.child {
  border-color: #e5e8ec;
  background: #fff;
}

.profile-screen-v20 .profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.profile-screen-v20 .man .profile-avatar {
  background: #dff7ec;
}

.profile-screen-v20 .woman .profile-avatar {
  background: #ffe1ed;
}

.profile-screen-v20 .child .profile-avatar {
  background: #fff0bd;
}

.profile-screen-v20 .profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  align-self: auto;
  display: block;
}

.profile-screen-v20 .profile-copy {
  min-width: 0;
}

.profile-screen-v20 .profile-card b {
  font-size: 21px;
  line-height: 1.1;
}

.profile-screen-v20 .profile-card small {
  font-size: 15px;
  margin-top: 5px;
}

.profile-screen-v20 .profile-card em {
  color: #111820;
  font-size: 33px;
  line-height: 1;
  font-weight: 400;
}

.profile-screen-v20 .profile-card:hover,
.profile-screen-v20 .profile-card:focus-visible {
  border-color: #69c9a9;
  box-shadow: 0 12px 28px rgba(7, 150, 101, .12);
}

@media (max-width: 390px) {
  .profile-screen-v20 .profile-card {
    grid-template-columns: 92px minmax(0, 1fr) 20px;
    min-height: 126px;
    padding: 12px 16px 12px 14px;
    gap: 14px;
  }
  .profile-screen-v20 .profile-avatar {
    width: 82px;
    height: 82px;
  }
  .profile-screen-v20 h1 {
    font-size: 29px;
  }
}


/* ===== V23 — page 3 premium, pages 1 et 2 figées ===== */
.body-screen-v23 .stepper{margin-bottom:20px}
.body-screen-v23 .eyebrow{margin-top:0;margin-bottom:10px}
.body-screen-v23 h1{font-size:31px;line-height:1.08;margin-bottom:8px}
.body-screen-v23 .lead{margin-bottom:15px}
.body-view-tabs{margin:0 0 10px;border-radius:18px;padding:5px;background:#f0f2f5}
.body-view-tabs button{font-size:15px;padding:12px 8px;transition:.2s ease}
.body-view-tabs button.active{background:linear-gradient(135deg,#049b67,#22bd81);color:#fff;box-shadow:0 7px 16px rgba(7,150,101,.22)}
.body-stage-v23{position:relative;min-height:500px;height:500px;border-radius:26px;background:linear-gradient(180deg,#fbfdfc 0%,#f7faf9 72%,#eef5f2 100%);overflow:hidden;border:1px solid #edf1ef}
.body-canvas{width:100%;height:100%;display:grid;place-items:center;transform-origin:center center;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.body-svg-v23{width:auto;height:490px;max-width:92%;overflow:visible}
.figure-v23{transition:opacity .24s ease,transform .24s ease}
.hotspots-v23 .hot{cursor:pointer;outline:none;filter:url(#hotShadowV23)}
.hotspots-v23 .hot circle:first-child{fill:rgba(255,255,255,.93);stroke:rgba(7,150,101,.45);stroke-width:5;transition:transform .18s ease,stroke .18s ease,fill .18s ease}
.hotspots-v23 .hot circle:last-child{fill:#079665;stroke:#fff;stroke-width:2}
.hotspots-v23 .hot:hover circle:first-child,.hotspots-v23 .hot:focus-visible circle:first-child{fill:#e6fff5;stroke:#08a971;transform:scale(1.17)}
.hotspots-v23 .hot:hover circle:last-child,.hotspots-v23 .hot:focus-visible circle:last-child{fill:#04b979}
.hotspots-v23 .hot{animation:hotPulse 2.5s ease-in-out infinite}
.hotspots-v23 .hot:nth-child(3n){animation-delay:.45s}.hotspots-v23 .hot:nth-child(3n+1){animation-delay:.9s}
@keyframes hotPulse{0%,100%{opacity:.92}50%{opacity:1}}
.back-only{display:none}.body-screen-v23.is-back .front-only{display:none}.body-screen-v23.is-back .back-only{display:block}
.zoom-controls{position:absolute;right:14px;bottom:18px;display:grid;gap:10px;z-index:5}
.zoom-controls button{width:48px;height:48px;border:1px solid #e2e8e5;border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 8px 20px rgba(26,47,40,.12);font-size:25px;font-weight:500;color:#17231f;cursor:pointer;display:grid;place-items:center;transition:.18s ease}
.zoom-controls button:hover{border-color:#68c9a9;color:#079665}
.body-zone-hint{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;color:#68756f;font-size:13px;background:#f7f9f8;border-radius:14px;padding:11px}
.body-zone-hint span{color:#079665;font-size:18px}
@media(max-width:390px){.body-screen-v23 h1{font-size:28px}.body-stage-v23{height:470px;min-height:470px}.body-svg-v23{height:460px}.zoom-controls button{width:43px;height:43px}}


/* ===== V24 — vues Homme face/dos validées ===== */
.body-screen-v24 .stepper{margin-bottom:18px}
.body-screen-v24 h1{font-size:32px;margin-bottom:8px}
.body-screen-v24 .lead{margin-bottom:15px}
.body-view-tabs-v24{margin:0 0 10px}
.body-view-tabs-v24 button.active{
  color:#fff;
  background:linear-gradient(135deg,#039862,#12b779);
  box-shadow:0 7px 16px rgba(7,150,101,.18);
}
.body-stage-v24{
  position:relative;
  height:555px;
  min-height:555px;
  overflow:hidden;
  border-radius:22px;
  background:#fff;
}
.body-visual-v24{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}
.body-view-v24{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.body-view-v24.hidden-figure{display:none}
.body-view-v24 img{
  display:block;
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.hotspot-layer-v24{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  height:100%;
  aspect-ratio:555/770;
  max-width:100%;
}
.body-hot{
  position:absolute;
  z-index:3;
  border:0;
  padding:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transform:translate(-50%,-50%);
}
.body-hot:focus-visible{
  outline:3px solid rgba(7,150,101,.45);
  outline-offset:2px;
}
.body-hot:hover{
  background:rgba(7,150,101,.10);
}
.body-instruction-v24{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:8px;
  padding:13px 16px;
  border:1px solid #cde9df;
  border-radius:16px;
  background:linear-gradient(110deg,#f5fffb,#fff);
}
.instruction-hand-v24{font-size:28px;color:#079665}
.body-instruction-v24 div{display:flex;flex-direction:column;gap:3px}
.body-instruction-v24 b{font-size:14px}
.body-instruction-v24 small{font-size:12px;color:var(--muted)}
@media(max-width:390px){
  .body-screen-v24 h1{font-size:28px}
  .body-stage-v24{height:500px;min-height:500px}
}


/* ===== V25 — corps entièrement visible et recentré ===== */
.body-screen-v24{
  padding-bottom:0;
}
.body-screen-v24 .stepper{
  margin-top:0;
  margin-bottom:12px;
}
.body-screen-v24 .eyebrow{
  margin-top:0;
  margin-bottom:7px;
}
.body-screen-v24 h1{
  font-size:29px;
  line-height:1.05;
  margin-bottom:7px;
}
.body-screen-v24 .lead{
  font-size:15px;
  margin-bottom:11px;
}
.body-view-tabs-v24{
  margin:0 0 8px;
}
.body-view-tabs-v24 button{
  padding:10px;
}
.body-stage-v24{
  height:430px;
  min-height:430px;
  border-radius:18px;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.body-visual-v24,
.body-view-v24{
  width:100%;
  height:100%;
}
.body-view-v24 img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
}
.hotspot-layer-v24{
  height:100%;
  aspect-ratio:620/860;
}
.body-instruction-v24{
  margin-top:7px;
  padding:10px 14px;
  min-height:58px;
}
.instruction-hand-v24{
  font-size:24px;
}
.body-instruction-v24 b{
  font-size:13px;
}
.body-instruction-v24 small{
  font-size:11px;
}
@media(max-height:820px){
  .body-stage-v24{
    height:400px;
    min-height:400px;
  }
  .body-screen-v24 h1{
    font-size:27px;
  }
}
@media(max-height:740px){
  .body-stage-v24{
    height:350px;
    min-height:350px;
  }
  .body-instruction-v24{
    display:none;
  }
}


/* ===== V26 — corps entier obligatoire, format application mobile ===== */
#body.body-screen-v24{
  height:100%;
  display:none;
  overflow:hidden;
}
#body.body-screen-v24.active{
  display:flex;
  flex-direction:column;
}
#body.body-screen-v24 .stepper{
  flex:0 0 auto;
  margin:0 0 8px;
}
#body.body-screen-v24 .eyebrow{
  flex:0 0 auto;
  margin:0 0 6px;
}
#body.body-screen-v24 h1{
  flex:0 0 auto;
  font-size:28px;
  line-height:1.04;
  margin:0 0 6px;
}
#body.body-screen-v24 .lead{
  flex:0 0 auto;
  font-size:15px;
  margin:0 0 9px;
}
#body .body-view-tabs-v24{
  flex:0 0 auto;
  margin:0 0 7px;
}
#body .body-view-tabs-v24 button{
  padding:9px 10px;
}
#body .body-stage-v24{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  width:100%;
  overflow:hidden;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#fff;
}
#body .body-visual-v24,
#body .body-view-v24{
  width:100%;
  height:100%;
  min-height:0;
}
#body .body-view-v24{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
#body .body-view-v24.hidden-figure{
  display:none;
}
#body .body-view-v24 img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
  display:block;
}
#body .hotspot-layer-v24{
  top:0;
  height:100%;
  max-height:100%;
  aspect-ratio:520/800;
}
#body .body-instruction-v24{
  flex:0 0 auto;
  min-height:52px;
  margin:6px 0 0;
  padding:8px 12px;
}
#body .instruction-hand-v24{
  font-size:22px;
}
#body .body-instruction-v24 b{
  font-size:12px;
}
#body .body-instruction-v24 small{
  font-size:10px;
}

/* The body page must not scroll; the full figure remains visible. */
.scroll-area:has(#body.active){
  overflow:hidden;
  padding-bottom:96px;
}

/* Compact layout for short laptop/browser windows. */
@media(max-height:820px){
  #body.body-screen-v24 h1{font-size:25px}
  #body.body-screen-v24 .lead{font-size:14px}
  #body .body-instruction-v24{min-height:46px;padding:6px 10px}
}
@media(max-height:730px){
  #body.body-screen-v24 h1{font-size:22px}
  #body.body-screen-v24 .stepper{margin-bottom:4px}
  #body.body-screen-v24 .eyebrow{margin-bottom:3px}
  #body.body-screen-v24 .lead{margin-bottom:5px}
  #body .body-view-tabs-v24{margin-bottom:4px}
  #body .body-instruction-v24{display:none}
}


/* ===== V27 — CORPS COMPLET GARANTI ===== */
#body.body-screen-v24.active {
  display: grid;
  grid-template-rows:
    auto auto auto auto auto
    minmax(0, 1fr)
    auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#body.body-screen-v24 .stepper {
  margin: 0 0 6px;
}

#body.body-screen-v24 .eyebrow {
  margin: 0 0 5px;
}

#body.body-screen-v24 h1 {
  font-size: clamp(22px, 3.4vh, 29px);
  line-height: 1.03;
  margin: 0 0 5px;
}

#body.body-screen-v24 .lead {
  font-size: 14px;
  line-height: 1.25;
  margin: 0 0 7px;
}

#body .body-view-tabs-v24 {
  margin: 0 0 5px;
}

#body .body-view-tabs-v24 button {
  padding: 8px 10px;
}

#body .body-stage-v24 {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}

#body .body-visual-v24,
#body .body-view-v24 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

#body .body-view-v24 {
  display: grid;
  place-items: center;
}

#body .body-view-v24.hidden-figure {
  display: none;
}

#body .body-view-v24 img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

#body .hotspot-layer-v24 {
  top: 50%;
  left: 50%;
  height: 96%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 500 / 760;
  transform: translate(-50%, -50%);
}

#body .body-instruction-v24 {
  min-height: 48px;
  margin: 5px 0 0;
  padding: 7px 11px;
}

#body .body-instruction-v24 b {
  font-size: 12px;
}

#body .body-instruction-v24 small {
  font-size: 10px;
}

/* The app content itself cannot scroll while the body map is open. */
.scroll-area.body-map-open,
.scroll-area:has(#body.active) {
  overflow: hidden !important;
  padding-bottom: 96px;
}

/* Extra compact mode: preserve the complete body before anything else. */
@media (max-height: 800px) {
  #body .body-instruction-v24 {
    display: none;
  }

  #body.body-screen-v24 h1 {
    font-size: 23px;
  }
}

@media (max-height: 700px) {
  #body.body-screen-v24 .stepper {
    display: none;
  }

  #body.body-screen-v24 h1 {
    font-size: 21px;
  }

  #body.body-screen-v24 .lead {
    margin-bottom: 4px;
  }
}


/* ===== V28 — affichage complet avec background-size: contain ===== */

/* Réserve une hauteur réelle et fiable au corps. */
#body.body-screen-v24.active {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#body.body-screen-v24 .stepper,
#body.body-screen-v24 .eyebrow,
#body.body-screen-v24 h1,
#body.body-screen-v24 .lead,
#body .body-view-tabs-v24,
#body .body-instruction-v24 {
  flex: 0 0 auto;
}

#body.body-screen-v24 .stepper { margin: 0 0 5px; }
#body.body-screen-v24 .eyebrow { margin: 0 0 4px; }
#body.body-screen-v24 h1 {
  font-size: 25px;
  line-height: 1.03;
  margin: 0 0 4px;
}
#body.body-screen-v24 .lead {
  font-size: 14px;
  margin: 0 0 6px;
}
#body .body-view-tabs-v24 {
  margin: 0 0 5px;
}
#body .body-view-tabs-v24 button {
  padding: 8px 10px;
}

/* La zone disponible absorbe tout l'espace restant. */
#body .body-stage-v24 {
  position: relative;
  flex: 1 1 0;
  width: 100%;
  height: auto !important;
  min-height: 260px;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
}

#body .body-visual-v24,
#body .body-view-v24 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#body .body-view-v24 {
  display: block;
}

#body .body-view-v24.hidden-figure {
  display: none;
}

/* Suppression complète du comportement problématique de l'ancien <img>. */
#body .body-view-v24 img {
  display: none !important;
}

/* Le visuel complet est toujours contenu : jamais de découpe. */
#body .body-image-v28 {
  position: absolute;
  inset: 4px 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  pointer-events: none;
}

#body .front-image-v28 {
  background-image: url("assets/body_man_front_v27.jpg");
}

#body .back-image-v28 {
  background-image: url("assets/body_man_back_v27.jpg");
}

/* La couche cliquable suit exactement le ratio du visuel. */
#body .hotspot-layer-v24 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: calc(100% - 8px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 500 / 760;
  transform: translate(-50%, -50%);
}

/* Instruction compacte pour conserver davantage de place au corps. */
#body .body-instruction-v24 {
  min-height: 44px;
  margin: 4px 0 0;
  padding: 6px 10px;
}
#body .body-instruction-v24 b { font-size: 12px; }
#body .body-instruction-v24 small { font-size: 10px; }

/* Aucun scroll sur la carte corporelle. */
.scroll-area.body-map-open,
.scroll-area:has(#body.active) {
  overflow: hidden !important;
  padding-bottom: 96px;
}

/* Sur les écrans courts, on réduit le texte, jamais le bas du corps. */
@media (max-height: 800px) {
  #body.body-screen-v24 h1 { font-size: 22px; }
  #body .body-instruction-v24 { display: none; }
}

@media (max-height: 710px) {
  #body.body-screen-v24 .stepper { display: none; }
  #body.body-screen-v24 .eyebrow { font-size: 10px; }
  #body.body-screen-v24 h1 { font-size: 19px; }
  #body.body-screen-v24 .lead { font-size: 12px; }
  #body .body-view-tabs-v24 button { padding: 6px 8px; }
}


/* ===== V29 — proportions naturelles et points réellement cliquables ===== */
#body.body-screen-v29 {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#body.body-screen-v29.active {
  display: flex;
  flex-direction: column;
}

#body.body-screen-v29 .stepper {
  flex: 0 0 auto;
  margin: 0 0 5px;
}

#body.body-screen-v29 .eyebrow {
  flex: 0 0 auto;
  margin: 0 0 4px;
}

#body.body-screen-v29 h1 {
  flex: 0 0 auto;
  font-size: 25px;
  line-height: 1.04;
  margin: 0 0 4px;
}

#body.body-screen-v29 .lead {
  flex: 0 0 auto;
  font-size: 14px;
  margin: 0 0 6px;
}

#body .body-tabs-v29 {
  flex: 0 0 auto;
  margin: 0 0 5px;
}

#body .body-tabs-v29 button {
  padding: 8px 10px;
}

#body .body-tabs-v29 button.active {
  color: #fff;
  background: linear-gradient(135deg, #039862, #12b779);
  box-shadow: 0 7px 16px rgba(7,150,101,.18);
}

#body .body-area-v29 {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #fff;
}

#body .body-figure-v29 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

#body .body-figure-v29.hidden-figure {
  display: none;
}

/* One fixed-ratio wrapper controls both the image and the click layer. */
#body .body-canvas-v29 {
  position: relative;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
}

#body .front-canvas-v29 {
  aspect-ratio: 400 / 730;
}

#body .back-canvas-v29 {
  aspect-ratio: 405 / 730;
}

#body .body-canvas-v29 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

#body .body-click-layer-v29 {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Large invisible hitbox centered on each visible marker. */
#body .body-point-v29 {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(7,150,101,0);
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
}

#body .body-point-v29:hover {
  background: rgba(7,150,101,.15);
}

#body .body-point-v29:focus-visible {
  outline: 3px solid rgba(7,150,101,.55);
  outline-offset: 2px;
}

#body .body-help-v29 {
  flex: 0 0 auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  padding: 6px 10px;
  border: 1px solid #cde9df;
  border-radius: 14px;
  background: linear-gradient(110deg,#f5fffb,#fff);
}

#body .body-help-v29 > span {
  color: #079665;
  font-size: 22px;
}

#body .body-help-v29 div {
  display: flex;
  flex-direction: column;
}

#body .body-help-v29 b {
  font-size: 12px;
}

#body .body-help-v29 small {
  color: var(--muted);
  font-size: 10px;
}

.scroll-area.body-map-open,
.scroll-area:has(#body.active) {
  overflow: hidden !important;
  padding-bottom: 96px;
}

@media (max-height: 800px) {
  #body.body-screen-v29 h1 {
    font-size: 22px;
  }

  #body .body-help-v29 {
    display: none;
  }
}

@media (max-height: 700px) {
  #body.body-screen-v29 .stepper {
    display: none;
  }

  #body.body-screen-v29 .eyebrow {
    font-size: 10px;
  }

  #body.body-screen-v29 h1 {
    font-size: 19px;
  }

  #body.body-screen-v29 .lead {
    font-size: 12px;
    margin-bottom: 4px;
  }

  #body .body-tabs-v29 button {
    padding: 6px 8px;
  }
}


/* ===== V30 — corps plus grand, scroll naturel et zones alignées ===== */

/* La page du corps redevient scrollable : on privilégie la taille du personnage. */
#body.body-screen-v29 {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

#body.body-screen-v29.active {
  display: block;
}

/* Annule les anciens verrouillages de scroll. */
.scroll-area.body-map-open,
.scroll-area:has(#body.active) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 112px;
}

/* En-tête compact mais confortable. */
#body.body-screen-v29 .stepper {
  margin: 0 0 10px;
}

#body.body-screen-v29 .eyebrow {
  margin: 0 0 7px;
}

#body.body-screen-v29 h1 {
  font-size: 29px;
  line-height: 1.04;
  margin: 0 0 7px;
}

#body.body-screen-v29 .lead {
  font-size: 15px;
  margin: 0 0 11px;
}

#body .body-tabs-v29 {
  margin: 0 0 10px;
}

#body .body-tabs-v29 button {
  padding: 10px;
}

/* Le corps est volontairement plus grand.
   Sa hauteur dépasse l’écran, ce qui permet un scroll naturel. */
#body .body-area-v29 {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
  display: block;
  background: #fff;
}

#body .body-figure-v29 {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  display: block;
}

#body .body-figure-v29.hidden-figure {
  display: none;
}

/* Le wrapper définit exactement la même géométrie pour l’image et les clics. */
#body .body-canvas-v29 {
  position: relative;
  width: min(360px, 100%);
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0 auto;
}

#body .front-canvas-v29 {
  aspect-ratio: 400 / 730;
}

#body .back-canvas-v29 {
  aspect-ratio: 405 / 730;
}

#body .body-canvas-v29 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

#body .body-click-layer-v29 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

/* Hitboxes plus larges, centrées sur chaque cercle visible. */
#body .body-point-v29 {
  width: 42px;
  height: 42px;
  pointer-events: auto;
  background: rgba(7,150,101,0);
  z-index: 20;
}

#body .body-point-v29:hover {
  background: rgba(7,150,101,.16);
}

#body .body-point-v29:active {
  background: rgba(7,150,101,.24);
}

/* Le cartouche reste sous le corps et fait partie du scroll. */
#body .body-help-v29 {
  display: flex !important;
  width: 100%;
  min-height: 58px;
  margin: 12px 0 0;
  padding: 10px 14px;
}

#body .body-help-v29 b {
  font-size: 13px;
}

#body .body-help-v29 small {
  font-size: 11px;
}

/* Sur téléphone étroit : même principe, personnage toujours grand. */
@media (max-width: 390px) {
  #body .body-canvas-v29 {
    width: min(340px, 100%);
  }

  #body.body-screen-v29 h1 {
    font-size: 27px;
  }
}

/* Sur écran court, on garde le scroll au lieu de réduire le personnage. */
@media (max-height: 800px) {
  #body.body-screen-v29 h1 {
    font-size: 27px;
  }

  #body .body-help-v29 {
    display: flex !important;
  }
}

@media (max-height: 700px) {
  #body.body-screen-v29 .stepper {
    display: flex;
  }

  #body.body-screen-v29 .eyebrow {
    font-size: 12px;
  }

  #body.body-screen-v29 h1 {
    font-size: 25px;
  }

  #body.body-screen-v29 .lead {
    font-size: 14px;
  }

  #body .body-tabs-v29 button {
    padding: 9px;
  }
}


/* ===== V31 — corps centré et clics calculés dans le repère exact ===== */
#body.body-screen-v31 {
  min-height: 100%;
}

#body.body-screen-v31.active {
  display: block;
}

#body.body-screen-v31 .stepper {
  margin: 0 0 10px;
}

#body.body-screen-v31 .eyebrow {
  margin: 0 0 7px;
}

#body.body-screen-v31 h1 {
  font-size: 29px;
  line-height: 1.04;
  margin: 0 0 7px;
}

#body.body-screen-v31 .lead {
  font-size: 15px;
  margin: 0 0 11px;
}

#body .body-tabs-v31 {
  margin: 0 0 10px;
}

#body .body-tabs-v31 button {
  padding: 10px;
}

#body .body-tabs-v31 button.active {
  color: #fff;
  background: linear-gradient(135deg,#039862,#12b779);
  box-shadow: 0 7px 16px rgba(7,150,101,.18);
}

/* Natural page scrolling, as validated. */
#body .body-scroll-v31 {
  width: 100%;
  overflow: visible;
}

#body .body-figure-v31 {
  width: 100%;
}

#body .body-figure-v31.hidden-figure {
  display: none;
}

/* The image and click layer share this exact wrapper. */
#body .body-canvas-v31 {
  position: relative;
  width: min(370px, 100%);
  margin: 0 auto;
}

#body .front-canvas-v31 {
  aspect-ratio: 280 / 720;
}

#body .back-canvas-v31 {
  aspect-ratio: 265 / 655;
}

#body .body-canvas-v31 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

#body .body-click-layer-v31 {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

#body .body-point-v31 {
  position: absolute;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 20;
  -webkit-tap-highlight-color: transparent;
}

#body .body-point-v31:hover,
#body .body-point-v31:focus-visible {
  background: rgba(7,150,101,.16);
}

#body .body-point-v31:focus-visible {
  outline: 3px solid rgba(7,150,101,.52);
  outline-offset: 1px;
}

#body .body-help-v31 {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid #cde9df;
  border-radius: 15px;
  background: linear-gradient(110deg,#f5fffb,#fff);
}

#body .body-help-v31 > span {
  color: #079665;
  font-size: 24px;
}

#body .body-help-v31 div {
  display: flex;
  flex-direction: column;
}

#body .body-help-v31 b {
  font-size: 13px;
}

#body .body-help-v31 small {
  color: var(--muted);
  font-size: 11px;
}

/* Explicitly restore scrolling for the body page. */
.scroll-area.body-map-open,
.scroll-area:has(#body.active) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 112px;
}

@media (max-width:390px) {
  #body .body-canvas-v31 {
    width: min(350px,100%);
  }

  #body.body-screen-v31 h1 {
    font-size: 27px;
  }
}


/* ===== V32 — proportions du dernier écran validé ===== */
#body.body-screen-v32.active{display:block}
#body.body-screen-v32 .stepper{margin:0 0 10px}
#body.body-screen-v32 .eyebrow{margin:0 0 7px}
#body.body-screen-v32 h1{font-size:28px;line-height:1.04;margin:0 0 7px}
#body.body-screen-v32 .lead{font-size:15px;margin:0 0 11px}
#body .body-tabs-v32{margin:0 0 10px}
#body .body-tabs-v32 button{padding:10px}
#body .body-tabs-v32 button.active{color:#fff;background:linear-gradient(135deg,#039862,#12b779);box-shadow:0 7px 16px rgba(7,150,101,.18)}
#body .body-scroll-v32{width:100%;overflow:visible}
#body .body-figure-v32{width:100%}
#body .body-figure-v32.hidden-figure{display:none}
#body .body-canvas-v32{position:relative;width:min(285px,82%);margin:0 auto}
#body .front-canvas-v32{aspect-ratio:400/730}
#body .back-canvas-v32{aspect-ratio:405/730}
#body .body-canvas-v32 img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;image-rendering:auto}
#body .body-click-layer-v32{position:absolute;inset:0;z-index:10;pointer-events:none}
#body .body-point-v32{position:absolute;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;z-index:20;-webkit-tap-highlight-color:transparent}
#body .body-point-v32:hover,#body .body-point-v32:focus-visible{background:rgba(7,150,101,.15)}
#body .body-point-v32:focus-visible{outline:3px solid rgba(7,150,101,.52);outline-offset:1px}
#body .body-help-v32{width:100%;min-height:58px;display:flex;align-items:center;gap:11px;margin:12px 0 0;padding:10px 14px;border:1px solid #cde9df;border-radius:15px;background:linear-gradient(110deg,#f5fffb,#fff)}
#body .body-help-v32>span{color:#079665;font-size:24px}
#body .body-help-v32 div{display:flex;flex-direction:column}
#body .body-help-v32 b{font-size:13px}
#body .body-help-v32 small{color:var(--muted);font-size:11px}
.scroll-area.body-map-open,.scroll-area:has(#body.active){overflow-y:auto!important;overflow-x:hidden!important;padding-bottom:112px}
@media(max-width:390px){#body .body-canvas-v32{width:min(270px,82%)}#body.body-screen-v32 h1{font-size:26px}}


/* ===== V33 — proportions validées, centrage réel et export HD ===== */
#body.body-screen-v33.active{display:block}
#body.body-screen-v33 .stepper{margin:0 0 10px}
#body.body-screen-v33 .eyebrow{margin:0 0 7px}
#body.body-screen-v33 h1{font-size:28px;line-height:1.04;margin:0 0 7px}
#body.body-screen-v33 .lead{font-size:15px;margin:0 0 11px}

#body .body-tabs-v33{margin:0 0 10px}
#body .body-tabs-v33 button{padding:10px}
#body .body-tabs-v33 button.active{
  color:#fff;
  background:linear-gradient(135deg,#039862,#12b779);
  box-shadow:0 7px 16px rgba(7,150,101,.18)
}

#body .body-scroll-v33{width:100%;overflow:visible}
#body .body-figure-v33{width:100%}
#body .body-figure-v33.hidden-figure{display:none}

/* Same proportions as V32, with the visible body now centered inside the file. */
#body .body-canvas-v33{
  position:relative;
  width:min(285px,82%);
  margin:0 auto;
}
#body .front-canvas-v33{aspect-ratio:400/730}
#body .back-canvas-v33{aspect-ratio:405/730}

#body .body-canvas-v33 img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  image-rendering:auto;
}

#body .body-click-layer-v33{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
}

#body .body-point-v33{
  position:absolute;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  cursor:pointer;
  z-index:20;
  -webkit-tap-highlight-color:transparent;
}
#body .body-point-v33:hover,
#body .body-point-v33:focus-visible{background:rgba(7,150,101,.15)}
#body .body-point-v33:focus-visible{
  outline:3px solid rgba(7,150,101,.52);
  outline-offset:1px;
}

#body .body-help-v33{
  width:100%;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:11px;
  margin:12px 0 0;
  padding:10px 14px;
  border:1px solid #cde9df;
  border-radius:15px;
  background:linear-gradient(110deg,#f5fffb,#fff);
}
#body .body-help-v33>span{color:#079665;font-size:24px}
#body .body-help-v33 div{display:flex;flex-direction:column}
#body .body-help-v33 b{font-size:13px}
#body .body-help-v33 small{color:var(--muted);font-size:11px}

.scroll-area.body-map-open,
.scroll-area:has(#body.active){
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-bottom:112px;
}

@media(max-width:390px){
  #body .body-canvas-v33{width:min(270px,82%)}
  #body.body-screen-v33 h1{font-size:26px}
}


/* ===== V34 — parcours Femme ===== */
#body .body-canvas-v34{
  position:relative;
  width:min(285px,82%);
  margin:0 auto;
  aspect-ratio:1200/2000;
}
#body .body-canvas-v34 img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
#body .female-click-layer-v34{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
}
#body .female-point-v34{
  position:absolute;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  cursor:pointer;
  z-index:20;
  -webkit-tap-highlight-color:transparent;
}
#body .female-point-v34:hover,
#body .female-point-v34:focus-visible{
  background:rgba(7,150,101,.15);
}
#body .female-point-v34:focus-visible{
  outline:3px solid rgba(7,150,101,.52);
  outline-offset:1px;
}
@media(max-width:390px){
  #body .body-canvas-v34{width:min(270px,82%)}
}


/* ===== V35 — Femme au même gabarit que l’Homme ===== */
#body .female-front-canvas-v34{
  width:min(285px,82%);
  aspect-ratio:400/730;
}
#body .female-back-canvas-v34{
  width:min(285px,82%);
  aspect-ratio:405/730;
}
#body .female-click-layer-v35{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
}
#body .female-point-v35{
  position:absolute;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  cursor:pointer;
  z-index:20;
  -webkit-tap-highlight-color:transparent;
}
#body .female-point-v35:hover,
#body .female-point-v35:focus-visible{
  background:rgba(7,150,101,.15);
}
#body .female-point-v35:focus-visible{
  outline:3px solid rgba(7,150,101,.52);
  outline-offset:1px;
}
@media(max-width:390px){
  #body .female-front-canvas-v34,
  #body .female-back-canvas-v34{
    width:min(270px,82%);
  }
}


/* ===== V36 — vue Femme dos recentrée et assets PNG HD ===== */
#body .female-front-canvas-v34 img,
#body .female-back-canvas-v34 img{
  image-rendering:auto;
  -webkit-font-smoothing:antialiased;
  transform:translateZ(0);
}


/* ===== V39 — centrage structurel définitif Femme dos ===== */
#body #backFigure.body-figure-v33{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  align-items:start;
}

#body #backFigure.body-figure-v33.hidden-figure{
  display:none;
}

#body #backFigure .female-back-canvas-v34{
  position:relative !important;
  width:min(285px,82%) !important;
  aspect-ratio:405/730 !important;
  margin:0 auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  justify-self:center !important;
}

#body #backFigure .female-back-canvas-v34 img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:50% 50% !important;
  transform:none !important;
}

@media(max-width:390px){
  #body #backFigure .female-back-canvas-v34{
    width:min(270px,82%) !important;
  }
}

/* ===== V40 — architecture nettoyée + centrage Femme dos ===== */
#body #backFigure .female-back-canvas-v34 {
  /* The full canvas moves as one unit, so image and click targets stay aligned. */
  transform: translateX(32px) !important;
}

@media (max-width: 390px) {
  #body #backFigure .female-back-canvas-v34 {
    transform: translateX(25px) !important;
  }
}


/* ===== V41 — zones de clic Femme recalées sur les cercles réels ===== */
#body .female-click-layer-v41{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:10;
  pointer-events:none;
}

#body .female-point-v41{
  position:absolute;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  cursor:pointer;
  z-index:20;
  -webkit-tap-highlight-color:transparent;
}

#body .female-point-v41:hover,
#body .female-point-v41:focus-visible{
  background:rgba(7,150,101,.18);
}

#body .female-point-v41:focus-visible{
  outline:3px solid rgba(7,150,101,.55);
  outline-offset:1px;
}


/* ===== V42 — nouveaux points anatomiques Femme, design V41 inchangé ===== */
#body .female-added-point-v42{
  width:34px;
  height:34px;
  border-radius:50%;
  background:#fff;
  border:2px solid #079665;
  box-shadow:
    0 2px 5px rgba(7,20,38,.16),
    inset 0 0 0 4px rgba(255,255,255,.95);
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:30;
}

#body .female-added-point-v42::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#071426;
  transform:translate(-50%,-50%);
}

#body .female-added-point-v42:hover,
#body .female-added-point-v42:focus-visible{
  background:#e9fff7;
  border-color:#08aa72;
  transform:translate(-50%,-50%) scale(1.08);
}

#body .female-added-point-v42:focus-visible{
  outline:3px solid rgba(7,150,101,.35);
  outline-offset:2px;
}


/* ===== V46 — diamètre Femme aligné sur l’Homme, structure V42 inchangée ===== */
/* Aucun changement de mise en page ni de coordonnées : seules les tailles visuelles
   des marqueurs féminins ajoutés sont harmonisées avec celles des images Homme. */
#body .female-added-point-v42{
  width:38px !important;
  height:38px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:translate(-50%,-50%) !important;
}
#body .female-added-point-v42::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:17px !important;
  height:17px !important;
  border:1.5px solid #079665 !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(7,20,38,.12) !important;
  transform:translate(-50%,-50%) !important;
}
#body .female-added-point-v42::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:5px !important;
  height:5px !important;
  border-radius:50% !important;
  background:#071426 !important;
  transform:translate(-50%,-50%) !important;
}
#body .female-added-point-v42:hover,
#body .female-added-point-v42:focus-visible{
  background:rgba(7,150,101,.08) !important;
  transform:translate(-50%,-50%) !important;
}


/* ===== V47 — tous les marqueurs Femme strictement uniformisés =====
   Même diamètre visuel, même contour, même centre et même zone de clic.
   Les coordonnées et la taille des silhouettes restent inchangées. */
#body .female-point-v41,
#body .female-added-point-v42{
  width:38px !important;
  height:38px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:translate(-50%,-50%) !important;
  overflow:visible !important;
}

#body .female-point-v41::before,
#body .female-added-point-v42::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:18px !important;
  height:18px !important;
  box-sizing:border-box !important;
  border:1.5px solid #079665 !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(7,20,38,.12) !important;
  transform:translate(-50%,-50%) !important;
  pointer-events:none !important;
}

#body .female-point-v41::after,
#body .female-added-point-v42::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:5px !important;
  height:5px !important;
  border-radius:50% !important;
  background:#071426 !important;
  transform:translate(-50%,-50%) !important;
  pointer-events:none !important;
}

#body .female-point-v41:hover,
#body .female-point-v41:focus-visible,
#body .female-added-point-v42:hover,
#body .female-added-point-v42:focus-visible{
  background:rgba(7,150,101,.08) !important;
  transform:translate(-50%,-50%) !important;
}


/* ===== V49 — marqueur visible pour les parties génitales, homme de face ===== */
#body .male-added-point-v49{
  width:38px !important;
  height:38px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:translate(-50%,-50%) !important;
  overflow:visible !important;
}
#body .male-added-point-v49::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:18px;
  box-sizing:border-box;
  border:1.5px solid #079665;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(7,20,38,.12);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
#body .male-added-point-v49::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#071426;
  transform:translate(-50%,-50%);
  pointer-events:none;
}


/* ===== V50 — profil Enfant habillé, face et dos ===== */
#body .child-body-v50{
  position:relative;
  width:55%;
  min-height:0;
}
#body .child-body-v50 img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
#body .child-click-layer-v50{
  position:absolute;
  inset:0;
}
#body .child-point-v50{
  position:absolute;
  width:38px;
  height:38px;
  transform:translate(-50%,-50%);
  border:0;
  padding:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  z-index:4;
}
#body .child-point-v50:hover{
  background:rgba(7,150,101,.08);
}


/* ===== V51.2 — proportion finale du profil Enfant ===== */
#body .child-body-v50{
  width:55%;
  margin:0 auto;
}

/* V51.4 */
#body .child-body-v50{width:55%;margin:0 auto;}

/* ===== V51.15 — zones cliquables enfant plus précises ===== */
/* Réduit uniquement les hitbox rapprochées de la vue de face enfant.
   Les cercles visuels et leurs positions restent strictement inchangés. */
#body .child-front-canvas-v50 .child-point-v50[data-zone="wrist-left"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="wrist-right"]{
  width:24px;
  height:24px;
  z-index:7;
}
#body .child-front-canvas-v50 .child-point-v50[data-zone="hand-left"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="hand-right"]{
  width:22px;
  height:22px;
  z-index:6;
}
#body .child-front-canvas-v50 .child-point-v50[data-zone="ankle-left"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="ankle-right"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="foot-left"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="foot-right"]{
  width:24px;
  height:24px;
}


/* ===== V51.17 — précision des mains et poignets enfant vue de dos ===== */
#body .child-back-canvas-v50 .child-point-v50[data-zone="wrist-left"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="wrist-right"]{
  width:24px;
  height:24px;
  z-index:7;
}
#body .child-back-canvas-v50 .child-point-v50[data-zone="hand-left"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="hand-right"]{
  width:22px;
  height:22px;
  z-index:6;
}


/* ===== V51.18 — précision chevilles/pieds enfant vue de dos ===== */
#body .child-back-canvas-v50 .child-point-v50[data-zone="ankle-left"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="ankle-right"]{
  width:24px;
  height:24px;
  z-index:7;
}
#body .child-back-canvas-v50 .child-point-v50[data-zone="foot-left"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="foot-right"]{
  width:22px;
  height:22px;
  z-index:6;
}


/* ===== V51.19 — enfant vue de dos : Cheville + Talon uniquement ===== */
#body .child-back-canvas-v50 .child-point-v50[data-zone="ankle-left"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="ankle-right"]{
  width:24px;
  height:24px;
  z-index:7;
}
#body .child-back-canvas-v50 .child-point-v50[data-zone="heel-left"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="heel-right"]{
  width:22px;
  height:22px;
  z-index:6;
}


/* ===== V51.20 — finition globale des zones cliquables Enfant ===== */
#body .child-front-canvas-v50 .child-point-v50,
#body .child-back-canvas-v50 .child-point-v50{width:24px;height:24px;}
#body .child-front-canvas-v50 .child-point-v50[data-zone="wrist-left"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="wrist-right"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="hand-left"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="hand-right"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="ankle-left"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="ankle-right"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="foot-left"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="foot-right"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="wrist-left"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="wrist-right"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="hand-left"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="hand-right"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="ankle-left"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="ankle-right"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="heel-left"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="heel-right"]{width:21px;height:21px;}
#body .child-front-canvas-v50 .child-point-v50[data-zone="calf-left"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="calf-right"]{width:22px;height:22px;}


/* ===== V51.21 — mollets enfant vue de dos ===== */
#body .child-back-canvas-v50 .child-point-v50[data-zone="calf-left"],
#body .child-back-canvas-v50 .child-point-v50[data-zone="calf-right"]{
  width:22px;
  height:22px;
}


/* ===== V51.24 — enfant face : cuisses et mollets parfaitement centrés ===== */
#body .child-front-canvas-v50 .child-point-v50[data-zone="thigh-left"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="thigh-right"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="calf-left"],
#body .child-front-canvas-v50 .child-point-v50[data-zone="calf-right"]{
  width:22px;
  height:22px;
}


/* ===== V52 — Face Selector interactif (Body Selector LOCKED inchangé) ===== */
.face-selector-v52{padding-bottom:10px}
.face-selector-v52 .stepper{margin-bottom:16px}
.face-selector-v52 .eyebrow{margin-top:0;margin-bottom:7px}
.face-selector-v52 h1{font-size:31px;line-height:1.06;margin-bottom:7px}
.face-selector-v52>.lead{font-size:15px;margin-bottom:12px}
.face-selector-card-v52{border:1px solid #e7edeb;border-radius:25px;background:linear-gradient(180deg,#f7fffb 0%,#fff 80%);box-shadow:0 14px 34px rgba(16,55,43,.08);padding:10px 10px 12px}
.face-visual-v52{position:relative;width:100%;aspect-ratio:1/1;max-height:390px;overflow:hidden;border-radius:21px;background:radial-gradient(circle at 50% 45%,#effdf7 0,#e6f7ef 48%,#f8fbfa 77%)}
.face-glow-v52{position:absolute;inset:8% 9%;border-radius:50%;background:radial-gradient(circle,rgba(7,150,101,.16),rgba(255,255,255,0) 70%)}
.face-visual-v52 img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;transform:scale(1.9);user-select:none;-webkit-user-drag:none;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.face-selector-v52.active .face-visual-v52 img{animation:faceEnterV555 .22s ease-out}
@keyframes faceEnterV555{from{opacity:.35}to{opacity:1}}
.face-hotspots-v52{position:absolute;inset:0}
.face-hot-v52{position:absolute;transform:translate(-50%,-50%);border:1.5px solid transparent;border-radius:50%;padding:0;background:rgba(255,255,255,0);cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s;outline:0}
.face-hot-v52 span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.86);white-space:nowrap;opacity:0;font-size:10px;font-weight:850;color:#067b55;background:rgba(255,255,255,.94);border:1px solid #cae9de;border-radius:999px;padding:4px 7px;pointer-events:none;transition:opacity .15s,transform .15s}
.face-hot-v52:hover,.face-hot-v52:focus-visible{background:rgba(7,150,101,.13);border-color:rgba(7,150,101,.55);box-shadow:0 0 0 5px rgba(7,150,101,.07)}
.face-hot-v52:hover span,.face-hot-v52:focus-visible span{opacity:1;transform:translate(-50%,-50%) scale(1)}
.face-hot-v52.selected{background:rgba(7,150,101,.22);border-color:#079665;box-shadow:0 0 0 5px rgba(255,255,255,.78),0 0 0 8px rgba(7,150,101,.18);transform:translate(-50%,-50%) scale(1.04)}
.face-hot-v52.selected span{opacity:1;transform:translate(-50%,-50%) scale(1);color:#fff;background:#079665;border-color:#079665}
.face-hot-wide-v52{border-radius:999px}
.face-selection-v52{min-height:58px;margin-top:9px;display:grid;grid-template-columns:42px minmax(0,1fr) 34px;align-items:center;gap:10px;padding:8px 9px;border-radius:16px;background:#f5f8f7}
.face-selection-icon-v52{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#e2f8ef;color:#079665;font-size:23px;font-weight:900}
.face-selection-v52 small,.face-selection-v52 b{display:block}.face-selection-v52 small{font-size:9px;letter-spacing:.8px;color:#78837f;font-weight:850}.face-selection-v52 b{margin-top:2px;font-size:14px}.face-clear-v52{width:31px;height:31px;border:0;border-radius:50%;background:#e9eeec;color:#52605b;font-size:20px;cursor:pointer}
.face-shortcuts-v52{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.face-shortcuts-v52 button{min-height:52px;border:1px solid #e4eae7;background:#fff;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px;font-size:11px;font-weight:800;color:#2d3935;cursor:pointer;transition:.18s}
.face-shortcuts-v52 button span{font-size:17px;color:#079665}.face-shortcuts-v52 button:hover,.face-shortcuts-v52 button:focus-visible,.face-shortcuts-v52 button.selected{border-color:#57c39d;background:#effcf7;color:#067a54}
.face-continue-v52{margin-top:2px;padding:16px 19px;border-radius:17px}
.face-continue-v52:disabled{background:#dfe5e2;color:#98a19e;box-shadow:none;cursor:not-allowed}
.face-help-v52{text-align:center;color:#84908c;font-size:10px;line-height:1.35;margin:8px 8px 0}
.scroll-area:has(#headDetail.active){padding-bottom:106px}
@media(max-width:390px){.face-selector-v52 h1{font-size:28px}.face-shortcuts-v52 button{font-size:10px}.face-selection-v52{min-height:53px}}
@media(max-height:760px){.face-selector-v52 .stepper{display:none}.face-selector-v52 h1{font-size:25px}.face-selector-v52>.lead{font-size:13px;margin-bottom:7px}.face-visual-v52{max-height:310px}.face-shortcuts-v52{margin:7px 0}.face-shortcuts-v52 button{min-height:44px}.face-help-v52{display:none}}


/* ===== V55 — zones cliquables premium du visage ===== */
.face-hotspots-v55{z-index:4;pointer-events:none}
.face-hot-v55{pointer-events:auto;border-color:rgba(7,150,101,.14);background:rgba(7,150,101,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.face-hot-v55::before{content:"";position:absolute;inset:10%;border-radius:inherit;background:radial-gradient(circle at 50% 45%,rgba(95,220,172,.18),rgba(7,150,101,.04) 62%,transparent 72%);opacity:.72;transition:opacity .18s ease,transform .18s ease}
.face-hot-v55 i{position:absolute;left:50%;top:50%;width:13px;height:13px;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:#079665;box-shadow:0 0 0 2px rgba(7,150,101,.28),0 4px 10px rgba(7,93,67,.22);pointer-events:none;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;opacity:.88}
.face-hot-v55 span{z-index:3;top:calc(50% + 22px);font-size:9px;padding:4px 7px;box-shadow:0 5px 14px rgba(20,40,33,.12)}
.face-hot-v55:hover,.face-hot-v55:focus-visible{background:rgba(7,150,101,.12);border-color:rgba(7,150,101,.58);box-shadow:0 0 0 4px rgba(7,150,101,.08),inset 0 0 0 1px rgba(255,255,255,.7)}
.face-hot-v55:hover::before,.face-hot-v55:focus-visible::before{opacity:1;transform:scale(1.05)}
.face-hot-v55:hover i,.face-hot-v55:focus-visible i{transform:translate(-50%,-50%) scale(1.22);box-shadow:0 0 0 5px rgba(7,150,101,.14),0 5px 12px rgba(7,93,67,.25)}
.face-hot-v55.selected{background:rgba(7,150,101,.20);border-color:#079665;box-shadow:0 0 0 4px rgba(255,255,255,.82),0 0 0 7px rgba(7,150,101,.20),inset 0 0 18px rgba(7,150,101,.10)}
.face-hot-v55.selected::before{opacity:1}
.face-hot-v55.selected i{background:#fff;border-color:#079665;box-shadow:0 0 0 4px rgba(7,150,101,.18);transform:translate(-50%,-50%) scale(1.2)}
.face-hot-v55.selected span{top:calc(50% + 24px)}
.zone-scalp-v55,.zone-forehead-v55{border-radius:46% 46% 42% 42%}
.zone-nose-v55{border-radius:45% 45% 52% 52%}
.zone-mouth-v55{border-radius:999px}
@media (hover:none){.face-hot-v55 span{display:none}.face-hot-v55 i{width:15px;height:15px}.face-hot-v55{background:rgba(7,150,101,.045);border-color:rgba(7,150,101,.18)}}
@media(max-width:390px){.face-hot-v55 i{width:11px;height:11px;border-width:2px}.face-hot-v55 span{font-size:8px}}

/* ===== V55.1 — zones du visage invisibles mais cliquables ===== */
.face-hotspots-v55{
  z-index:4;
  pointer-events:none;
}
.face-hot-v55{
  pointer-events:auto;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:0;
  cursor:pointer;
}
.face-hot-v55::before,
.face-hot-v55::after,
.face-hot-v55 i,
.face-hot-v55 span{
  display:none !important;
}
.face-hot-v55:hover,
.face-hot-v55:active,
.face-hot-v55.selected{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:translate(-50%,-50%) !important;
}
/* Indication uniquement au clavier, sans encombrer l’interface. */
.face-hot-v55:focus-visible{
  outline:2px dashed rgba(7,150,101,.72);
  outline-offset:2px;
  background:rgba(7,150,101,.025) !important;
}

/* ===== V55.3 — toutes les zones accessibles sous le visage ===== */
.face-zone-picker-v553{margin:10px 0 2px}
.face-shortcuts-primary-v553{margin:0}
.face-show-all-v553{
  width:100%;min-height:44px;margin-top:8px;border:1px solid #dfe7e3;border-radius:14px;
  background:#f8fbfa;color:#245044;font-weight:850;font-size:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:.18s ease;
}
.face-show-all-v553:hover,.face-show-all-v553:focus-visible{border-color:#65c9a7;background:#effbf6;color:#087b56}
.face-show-all-v553 span{font-size:17px;transition:transform .18s ease}
.face-show-all-v553[aria-expanded="true"] span{transform:rotate(180deg)}
.face-all-zones-v553{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px;
  padding:10px;border:1px solid #e5ece8;border-radius:16px;background:#fbfdfc;
}
.face-all-zones-v553[hidden]{display:none}
.face-all-zones-v553 button{
  min-height:42px;border:1px solid #e3e9e6;border-radius:13px;background:#fff;color:#30423c;
  font-size:11px;font-weight:800;padding:8px 10px;cursor:pointer;transition:.18s ease;
}
.face-all-zones-v553 button:hover,.face-all-zones-v553 button:focus-visible,.face-all-zones-v553 button.selected{
  border-color:#57c39d;background:#effcf7;color:#067a54;
}
@media(max-width:390px){.face-all-zones-v553 button{font-size:10px;padding:7px 6px}}

/* ===== V55.4 — calage exact des zones sur le portrait agrandi =====
   Le portrait V54.1 est affiché avec un zoom CSS de 1.9. Jusqu'ici, seule
   l'image était zoomée : la carte de clic restait à l'échelle 1, ce qui
   décalait les yeux, le nez, les joues et la bouche. La couche interactive
   suit désormais exactement la même transformation que l'image. */
.face-visual-v52{
  --face-zoom-v554:1.9;
}
.face-visual-v52 img{
  transform:scale(var(--face-zoom-v554));
  transform-origin:center center;
}
.face-hotspots-v55{
  inset:0;
  transform:scale(var(--face-zoom-v554));
  transform-origin:center center;
}

/* Les dents et les gencives ne sont pas visibles sur une bouche fermée :
   elles restent accessibles dans « Voir toutes les zones », mais ne
   recouvrent plus le nez ou les lèvres sur le portrait. */
.face-hotspots-v55 [data-face-zone="Dents et gencives"]{
  display:none !important;
}


/* ===== V55.5 — suppression du saut petit → grand =====
   L’ancienne animation animait transform de scale(.88) à scale(1), puis le
   portrait revenait brutalement à son zoom final 1.9. Désormais, le zoom est
   appliqué dès la première frame et seule l’opacité est animée. */
.face-selector-v52.active .face-visual-v52 img{
  transform:scale(var(--face-zoom-v554));
  animation:faceEnterV555 .22s ease-out;
}
@keyframes faceEnterV555{from{opacity:.35}to{opacity:1}}


/* ===== V56 — sélection = validation, puis questions automatiques ===== */
.face-selection-v52{transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}
.face-selection-v52.is-confirming{
  background:linear-gradient(110deg,#effcf7,#f8fffc);
  box-shadow:0 8px 22px rgba(7,150,101,.11);
  transform:translateY(-1px);
}
.face-selection-v52.is-confirming .face-selection-icon-v52{
  animation:faceConfirmV56 .48s ease both;
}
.face-selection-status-v56{display:block;margin-top:3px;color:#6e7d77;font-size:10px;font-style:normal;font-weight:700}
.face-selection-v52.is-confirming .face-selection-status-v56{color:#07825a}
@keyframes faceConfirmV56{0%{transform:scale(.72);opacity:.35}55%{transform:scale(1.16)}100%{transform:scale(1);opacity:1}}
.face-help-v56{margin-top:10px}
.question-zone-v56{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;
  padding:12px 14px;border:1px solid #dceae5;border-radius:16px;background:#f5fbf8;
}
.question-zone-v56 small,.question-zone-v56 b{display:block}
.question-zone-v56 small{font-size:9px;letter-spacing:.8px;color:#718079;font-weight:850}
.question-zone-v56 b{margin-top:2px;font-size:14px;color:#15332a}
.question-zone-v56 button{
  flex:0 0 auto;border:0;background:transparent;color:#07825a;font-weight:850;font-size:11px;
  padding:8px 6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
@media(max-width:390px){.question-zone-v56{padding:10px 11px}.question-zone-v56 b{font-size:13px}.question-zone-v56 button{font-size:10px}}

/* ===== V56.1 — confirmation anatomique locale après le toucher =====
   Les zones restent entièrement invisibles au repos. Seule la zone choisie
   apparaît brièvement, avec un halo qui épouse sa forme, avant les questions. */
.face-hot-v55.zone-feedback-v561{
  z-index:12;
  border:1.5px solid rgba(7,150,101,.78) !important;
  background:rgba(51,207,151,.20) !important;
  box-shadow:
    0 0 0 5px rgba(255,255,255,.72) inset,
    0 0 0 4px rgba(7,150,101,.13),
    0 8px 24px rgba(7,113,79,.18) !important;
  transform:translate(-50%,-50%) scale(1) !important;
  animation:faceZoneFeedbackV561 .52s cubic-bezier(.2,.8,.25,1) both;
}
.face-hot-v55.zone-feedback-v561::before{
  content:"";
  display:block !important;
  position:absolute;
  inset:8%;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 46%,rgba(126,245,199,.62) 0%,rgba(27,190,132,.30) 48%,rgba(7,150,101,.08) 72%,transparent 100%);
  opacity:1;
  pointer-events:none;
  animation:faceZoneGlowV561 .52s ease-out both;
}
.face-hot-v55.zone-feedback-v561::after{
  content:"✓";
  display:grid !important;
  place-items:center;
  position:absolute;
  left:50%;top:50%;
  width:24px;height:24px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#079665;
  color:#fff;
  border:3px solid rgba(255,255,255,.96);
  box-shadow:0 4px 13px rgba(5,91,64,.28);
  font-size:13px;
  line-height:1;
  font-weight:950;
  pointer-events:none;
  animation:faceZoneCheckV561 .42s .05s cubic-bezier(.2,.9,.25,1.25) both;
}
@keyframes faceZoneFeedbackV561{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.82) !important}
  32%{opacity:1;transform:translate(-50%,-50%) scale(1.08) !important}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1) !important}
  100%{opacity:.92;transform:translate(-50%,-50%) scale(1) !important}
}
@keyframes faceZoneGlowV561{
  0%{opacity:0;transform:scale(.7)}
  45%{opacity:1;transform:scale(1.08)}
  100%{opacity:.75;transform:scale(1)}
}
@keyframes faceZoneCheckV561{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
  65%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media(max-width:390px){
  .face-hot-v55.zone-feedback-v561::after{width:20px;height:20px;font-size:11px;border-width:2px}
}
@media(prefers-reduced-motion:reduce){
  .face-hot-v55.zone-feedback-v561,
  .face-hot-v55.zone-feedback-v561::before,
  .face-hot-v55.zone-feedback-v561::after{animation:none}
}

/* ===== V56.2 — zones anatomiques recalibrées + surbrillance discrète =====
   La zone visible épouse uniquement le membre sélectionné. Aucun pictogramme,
   aucun grand halo et aucun rectangle de validation. */
.face-hot-v55.zone-feedback-v561{
  z-index:12;
  border:1.25px solid rgba(7,150,101,.66) !important;
  background:rgba(35,194,137,.16) !important;
  box-shadow:0 0 10px rgba(7,150,101,.18), inset 0 0 7px rgba(255,255,255,.34) !important;
  transform:translate(-50%,-50%) scale(1) !important;
  animation:faceZoneSubtleV562 .52s ease-out both;
}
.face-hot-v55.zone-feedback-v561::before{
  content:"";
  display:block !important;
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(ellipse at center,rgba(97,225,177,.22),rgba(7,150,101,.07) 68%,transparent 100%);
  opacity:1;
  pointer-events:none;
  animation:none;
}
.face-hot-v55.zone-feedback-v561::after{display:none !important;content:none !important}

/* Formes sur mesure par zone. */
.face-hot-v55[data-face-zone="Crâne / cuir chevelu"]{border-radius:48% 48% 38% 38% / 58% 58% 35% 35%}
.face-hot-v55[data-face-zone="Front"]{border-radius:44% 44% 34% 34% / 55% 55% 38% 38%}
.face-hot-v55[data-face-zone^="Tempe"]{border-radius:48% 48% 44% 44% / 55% 55% 45% 45%;transform:translate(-50%,-50%) rotate(4deg)}
.face-hot-v55[data-face-zone="Tempe droite"]{transform:translate(-50%,-50%) rotate(-4deg)}
.face-hot-v55[data-face-zone^="Sourcil"]{border-radius:60% 60% 42% 42% / 70% 70% 38% 38%}
.face-hot-v55[data-face-zone^="Œil"]{border-radius:50% / 60%}
.face-hot-v55[data-face-zone^="Oreille"]{border-radius:48% / 56%}
.face-hot-v55[data-face-zone="Nez et sinus"]{border-radius:45% 45% 52% 52% / 24% 24% 70% 70%;clip-path:polygon(34% 0,66% 0,78% 68%,100% 88%,76% 100%,24% 100%,0 88%,22% 68%)}
.face-hot-v55[data-face-zone^="Joue"]{border-radius:52% 46% 54% 48% / 46% 50% 54% 50%;transform:translate(-50%,-50%) rotate(-8deg)}
.face-hot-v55[data-face-zone="Joue droite"]{transform:translate(-50%,-50%) rotate(8deg)}
.face-hot-v55[data-face-zone="Lèvres et bouche"],
.face-hot-v55[data-face-zone="Dents et gencives"]{border-radius:50% / 64%}
.face-hot-v55[data-face-zone^="Mâchoire"]{border-radius:30% 45% 58% 38% / 38% 45% 62% 55%;transform:translate(-50%,-50%) rotate(13deg);clip-path:polygon(0 0,100% 22%,82% 100%,28% 90%)}
.face-hot-v55[data-face-zone="Mâchoire droite"]{transform:translate(-50%,-50%) rotate(-13deg);clip-path:polygon(0 22%,100% 0,72% 90%,18% 100%)}
.face-hot-v55[data-face-zone="Menton"]{border-radius:40% 40% 55% 55% / 35% 35% 65% 65%}
.face-hot-v55[data-face-zone="Gorge et cou"]{border-radius:32% 32% 46% 46% / 35% 35% 62% 62%}

/* Les rotations anatomiques doivent être conservées durant l'animation. */
.face-hot-v55[data-face-zone="Tempe gauche"].zone-feedback-v561{animation:faceZoneSubtleRotP4V562 .52s ease-out both}
.face-hot-v55[data-face-zone="Tempe droite"].zone-feedback-v561{animation:faceZoneSubtleRotM4V562 .52s ease-out both}
.face-hot-v55[data-face-zone="Joue gauche"].zone-feedback-v561{animation:faceZoneSubtleRotM8V562 .52s ease-out both}
.face-hot-v55[data-face-zone="Joue droite"].zone-feedback-v561{animation:faceZoneSubtleRotP8V562 .52s ease-out both}
.face-hot-v55[data-face-zone="Mâchoire gauche"].zone-feedback-v561{animation:faceZoneSubtleRotP13V562 .52s ease-out both}
.face-hot-v55[data-face-zone="Mâchoire droite"].zone-feedback-v561{animation:faceZoneSubtleRotM13V562 .52s ease-out both}

@keyframes faceZoneSubtleV562{0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}42%{opacity:1;transform:translate(-50%,-50%) scale(1.035)}100%{opacity:.92;transform:translate(-50%,-50%) scale(1)}}
@keyframes faceZoneSubtleRotP4V562{0%{opacity:0;transform:translate(-50%,-50%) rotate(4deg) scale(.92)}42%{opacity:1;transform:translate(-50%,-50%) rotate(4deg) scale(1.035)}100%{opacity:.92;transform:translate(-50%,-50%) rotate(4deg) scale(1)}}
@keyframes faceZoneSubtleRotM4V562{0%{opacity:0;transform:translate(-50%,-50%) rotate(-4deg) scale(.92)}42%{opacity:1;transform:translate(-50%,-50%) rotate(-4deg) scale(1.035)}100%{opacity:.92;transform:translate(-50%,-50%) rotate(-4deg) scale(1)}}
@keyframes faceZoneSubtleRotM8V562{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.92)}42%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1.035)}100%{opacity:.92;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
@keyframes faceZoneSubtleRotP8V562{0%{opacity:0;transform:translate(-50%,-50%) rotate(8deg) scale(.92)}42%{opacity:1;transform:translate(-50%,-50%) rotate(8deg) scale(1.035)}100%{opacity:.92;transform:translate(-50%,-50%) rotate(8deg) scale(1)}}
@keyframes faceZoneSubtleRotP13V562{0%{opacity:0;transform:translate(-50%,-50%) rotate(13deg) scale(.92)}42%{opacity:1;transform:translate(-50%,-50%) rotate(13deg) scale(1.035)}100%{opacity:.92;transform:translate(-50%,-50%) rotate(13deg) scale(1)}}
@keyframes faceZoneSubtleRotM13V562{0%{opacity:0;transform:translate(-50%,-50%) rotate(-13deg) scale(.92)}42%{opacity:1;transform:translate(-50%,-50%) rotate(-13deg) scale(1.035)}100%{opacity:.92;transform:translate(-50%,-50%) rotate(-13deg) scale(1)}}

@media(prefers-reduced-motion:reduce){.face-hot-v55.zone-feedback-v561{animation:none !important}}

/* ===== V56.3 — recalage millimétrique de la carte tactile du visage =====
   CORRECTION STRUCTURELLE : le portrait reste zoomé à 1.9, mais la couche
   tactile n'est plus zoomée. Ses coordonnées sont désormais exprimées
   directement dans le repère visible de la carte, ce qui supprime le décalage
   (ex. devoir toucher le front pour sélectionner un œil).
   Les marges tactiles restent légèrement supérieures aux formes visibles,
   sans empiéter sur les zones voisines. */
.face-hotspots-v55{
  inset:0;
  transform:none !important;
  transform-origin:center center;
}

/* Coordonnées anatomiques du portrait homme V54 affiché dans face-visual-v52. */
.face-hot-v55[data-face-zone="Crâne / cuir chevelu"]{left:50% !important;top:21.5% !important;width:32% !important;height:15% !important}
.face-hot-v55[data-face-zone="Front"]{left:50% !important;top:35% !important;width:24% !important;height:9.5% !important}
.face-hot-v55[data-face-zone="Tempe gauche"]{left:31.5% !important;top:43% !important;width:8% !important;height:10% !important}
.face-hot-v55[data-face-zone="Tempe droite"]{left:68.5% !important;top:43% !important;width:8% !important;height:10% !important}
.face-hot-v55[data-face-zone="Sourcil gauche"]{left:41% !important;top:43.5% !important;width:13% !important;height:4.5% !important}
.face-hot-v55[data-face-zone="Sourcil droit"]{left:59% !important;top:43.5% !important;width:13% !important;height:4.5% !important}
.face-hot-v55[data-face-zone="Œil gauche"]{left:41% !important;top:49% !important;width:11.5% !important;height:6.5% !important}
.face-hot-v55[data-face-zone="Œil droit"]{left:59% !important;top:49% !important;width:11.5% !important;height:6.5% !important}
.face-hot-v55[data-face-zone="Oreille gauche"]{left:25.5% !important;top:55% !important;width:7% !important;height:13.5% !important}
.face-hot-v55[data-face-zone="Oreille droite"]{left:74.5% !important;top:55% !important;width:7% !important;height:13.5% !important}
.face-hot-v55[data-face-zone="Nez et sinus"]{left:50% !important;top:57% !important;width:8% !important;height:14.5% !important}
.face-hot-v55[data-face-zone="Joue gauche"]{left:39.5% !important;top:61.5% !important;width:12.5% !important;height:10.5% !important}
.face-hot-v55[data-face-zone="Joue droite"]{left:60.5% !important;top:61.5% !important;width:12.5% !important;height:10.5% !important}
.face-hot-v55[data-face-zone="Lèvres et bouche"]{left:50% !important;top:68.5% !important;width:16% !important;height:5.5% !important}
.face-hot-v55[data-face-zone="Mâchoire gauche"]{left:40% !important;top:73.5% !important;width:14% !important;height:10.5% !important}
.face-hot-v55[data-face-zone="Mâchoire droite"]{left:60% !important;top:73.5% !important;width:14% !important;height:10.5% !important}
.face-hot-v55[data-face-zone="Menton"]{left:50% !important;top:78.5% !important;width:13% !important;height:7% !important}
.face-hot-v55[data-face-zone="Gorge et cou"]{left:50% !important;top:88% !important;width:20% !important;height:12% !important}

/* La surbrillance visible reprend exactement le même gabarit que la zone
   choisie, mais reste fine et sans pictogramme. */
.face-hot-v55.zone-feedback-v561{
  border-width:1px !important;
  background:rgba(35,194,137,.13) !important;
  box-shadow:0 0 8px rgba(7,150,101,.14),inset 0 0 5px rgba(255,255,255,.28) !important;
}

/* ===== V56.4 — recalage anatomique millimétrique sur le portrait V54 =====
   Le portrait est zoomé à 1.9 autour du centre. Les coordonnées ci-dessous
   sont calculées dans le repère réellement visible après ce zoom, et non dans
   le fichier source non zoomé. Chaque zone tactile et sa surbrillance partagent
   exactement le même gabarit. */
.face-hot-v55[data-face-zone="Crâne / cuir chevelu"]{left:50% !important;top:27% !important;width:31% !important;height:15% !important;border-radius:48% 52% 42% 42% / 58% 58% 42% 42% !important}
.face-hot-v55[data-face-zone="Front"]{left:50% !important;top:41.5% !important;width:22% !important;height:9% !important;border-radius:46% 46% 38% 38% / 55% 55% 40% 40% !important}
.face-hot-v55[data-face-zone="Tempe gauche"]{left:31.5% !important;top:50.5% !important;width:7.5% !important;height:10% !important;border-radius:48% !important}
.face-hot-v55[data-face-zone="Tempe droite"]{left:68.5% !important;top:50.5% !important;width:7.5% !important;height:10% !important;border-radius:48% !important}
.face-hot-v55[data-face-zone="Sourcil gauche"]{left:40.8% !important;top:51.5% !important;width:12.5% !important;height:4.4% !important;border-radius:60% 45% 45% 60% / 65% 65% 40% 40% !important;transform:translate(-50%,-50%) rotate(-5deg) !important}
.face-hot-v55[data-face-zone="Sourcil droit"]{left:59.2% !important;top:51.5% !important;width:12.5% !important;height:4.4% !important;border-radius:45% 60% 60% 45% / 65% 65% 40% 40% !important;transform:translate(-50%,-50%) rotate(5deg) !important}
.face-hot-v55[data-face-zone="Œil gauche"]{left:40.7% !important;top:57.2% !important;width:11.2% !important;height:6.2% !important;border-radius:50% !important}
.face-hot-v55[data-face-zone="Œil droit"]{left:59.3% !important;top:57.2% !important;width:11.2% !important;height:6.2% !important;border-radius:50% !important}
.face-hot-v55[data-face-zone="Oreille gauche"]{left:31.2% !important;top:62.2% !important;width:6.5% !important;height:13% !important;border-radius:48% 42% 45% 55% / 44% 48% 52% 56% !important}
.face-hot-v55[data-face-zone="Oreille droite"]{left:68.4% !important;top:62.2% !important;width:6.5% !important;height:13% !important;border-radius:42% 48% 55% 45% / 48% 44% 56% 52% !important}
.face-hot-v55[data-face-zone="Nez et sinus"]{left:50% !important;top:64% !important;width:7.5% !important;height:15.5% !important;border-radius:38% 38% 52% 52% / 28% 28% 64% 64% !important}
.face-hot-v55[data-face-zone="Joue gauche"]{left:39.2% !important;top:65.2% !important;width:12.5% !important;height:10.5% !important;border-radius:52% 48% 55% 45% / 45% 48% 52% 55% !important;transform:translate(-50%,-50%) rotate(-8deg) !important}
.face-hot-v55[data-face-zone="Joue droite"]{left:60.8% !important;top:65.2% !important;width:12.5% !important;height:10.5% !important;border-radius:48% 52% 45% 55% / 48% 45% 55% 52% !important;transform:translate(-50%,-50%) rotate(8deg) !important}
.face-hot-v55[data-face-zone="Lèvres et bouche"]{left:50% !important;top:72.1% !important;width:15.5% !important;height:5.3% !important;border-radius:55% / 70% !important}
.face-hot-v55[data-face-zone="Mâchoire gauche"]{left:39.8% !important;top:75.5% !important;width:13.5% !important;height:10% !important;border-radius:35% 55% 55% 70% / 40% 45% 65% 60% !important;transform:translate(-50%,-50%) rotate(12deg) !important}
.face-hot-v55[data-face-zone="Mâchoire droite"]{left:60.2% !important;top:75.5% !important;width:13.5% !important;height:10% !important;border-radius:55% 35% 70% 55% / 45% 40% 60% 65% !important;transform:translate(-50%,-50%) rotate(-12deg) !important}
.face-hot-v55[data-face-zone="Menton"]{left:50% !important;top:80% !important;width:12.5% !important;height:6.8% !important;border-radius:45% 45% 58% 58% / 42% 42% 68% 68% !important}
.face-hot-v55[data-face-zone="Gorge et cou"]{left:50% !important;top:89.5% !important;width:19% !important;height:10% !important;border-radius:38% 38% 50% 50% / 30% 30% 60% 60% !important}

/* Pas d'étiquette au survol : la sélection reste visuelle et épurée. */
.face-hot-v55 span{display:none !important}

/* ===== V57 — NEZ SVG SUR MESURE (zone 1 figée après validation) =====
   Le nez n'utilise plus une ellipse générique. La zone tactile suit une
   silhouette anatomique dédiée et la surbrillance visible est dessinée en SVG.
   Les autres zones du visage restent strictement inchangées dans cette version. */
.face-hot-v55.zone-nose-v57[data-face-zone="Nez et sinus"]{
  left:49.45% !important;
  top:62.95% !important;
  width:8.55% !important;
  height:14.85% !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  clip-path:polygon(40% 1%,60% 1%,62% 44%,67% 68%,79% 84%,76% 93%,65% 98%,35% 98%,24% 93%,21% 84%,33% 68%,38% 44%);
}
.face-hot-v55.zone-nose-v57::before,
.face-hot-v55.zone-nose-v57::after,
.face-hot-v55.zone-nose-v57 i{display:none !important}

/* ===== V62 — Zones du visage femme =====
   Toutes les zones ci-dessus (V57 / V57.3 / V57.8 / V57.9) sont verrouillées
   en !important et calibrées pour le portrait homme. Le portrait femme cadre
   le visage plus bas (chignon volumineux en haut), donc chaque zone doit être
   repositionnée pour ce profil. Sélecteur plus spécifique (.is-woman-face-v62)
   pour l'emporter sur les règles homme sans les modifier. ===== */
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Crâne / cuir chevelu"]{
  left:50% !important; top:22% !important; width:36% !important; height:20% !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Front"]{
  left:50% !important; top:42% !important; width:18% !important; height:8% !important;
  border-radius:46% 46% 38% 38% / 58% 58% 42% 42% !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Tempe gauche"]{
  left:32% !important; top:47% !important; width:5% !important; height:5% !important;
  transform:translate(-50%,-50%) rotate(2deg) !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Tempe droite"]{
  left:68% !important; top:47% !important; width:5% !important; height:5% !important;
  transform:translate(-50%,-50%) rotate(-2deg) !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Sourcil gauche"]{
  left:42% !important; top:47.3% !important; width:12% !important; height:3.6% !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Sourcil droit"]{
  left:58% !important; top:47.3% !important; width:12% !important; height:3.6% !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Œil gauche"]{
  left:42% !important; top:53.5% !important; width:13% !important; height:9% !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Œil droit"]{
  left:58% !important; top:53.5% !important; width:13% !important; height:9% !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Oreille gauche"]{
  left:33% !important; top:57.5% !important; width:12% !important; height:15% !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Oreille droite"]{
  left:67% !important; top:57.5% !important; width:12% !important; height:15% !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55.zone-nose-v57[data-face-zone="Nez et sinus"]{
  left:50% !important;
  top:58.5% !important;
  width:12% !important;
  height:11% !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Joue gauche"]{
  left:40% !important; top:62% !important; width:9% !important; height:9% !important;
  border-radius:50% !important; transform:translate(-50%,-50%) rotate(0deg) !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Joue droite"]{
  left:60% !important; top:62% !important; width:9% !important; height:9% !important;
  border-radius:50% !important; transform:translate(-50%,-50%) rotate(0deg) !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Lèvres et bouche"]{
  left:50% !important; top:68.7% !important; width:13% !important; height:3% !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Mâchoire gauche"]{
  left:36% !important; top:73.5% !important; width:12% !important; height:6.5% !important;
  border-radius:40% 60% 55% 45% / 45% 45% 55% 55% !important;
  transform:translate(-50%,-50%) rotate(6deg) !important;
  clip-path:none !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Mâchoire droite"]{
  left:64% !important; top:73.5% !important; width:12% !important; height:6.5% !important;
  border-radius:60% 40% 45% 55% / 45% 45% 55% 55% !important;
  transform:translate(-50%,-50%) rotate(-6deg) !important;
  clip-path:none !important;
}
.face-selector-v52.is-woman-face-v62 .face-hot-v55[data-face-zone="Menton"]{
  left:50% !important; top:78.5% !important; width:16% !important; height:7% !important;
}
.nose-highlight-v57{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  opacity:0;
  transform:scale(.96);
  transform-origin:50% 55%;
}
.nose-highlight-v57 path{
  fill:rgba(35,194,137,.13);
  stroke:rgba(9,157,108,.76);
  stroke-width:1.85;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 3px rgba(9,157,108,.18));
}
.face-hot-v55.zone-nose-v57.zone-feedback-v561{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  animation:none !important;
}
.face-hot-v55.zone-nose-v57.zone-feedback-v561 .nose-highlight-v57{
  animation:noseSelectV57 .5s ease-out both;
}
@keyframes noseSelectV57{
  0%{opacity:0;transform:scale(.96)}
  42%{opacity:1;transform:scale(1.018)}
  100%{opacity:.96;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .face-hot-v55.zone-nose-v57.zone-feedback-v561 .nose-highlight-v57{animation:none;opacity:.96;transform:none}
}


/* ===== V57.3 — FACE ZONES LOCK =====
   Les éléments portant data-zone-locked="true" sont validés et figés.
   Ce sélecteur n'altère volontairement aucun rendu. Il sert de garde-fou
   documentaire et technique pour les versions suivantes. */
.face-hot-v55[data-zone-locked="true"]{}

/* ===== V57.8 — BOUCHE / LÈVRES RECALÉES =====
   Ajustement demandé : le sélecteur était trop haut, sur le philtrum.
   Cette règle finale est volontairement prioritaire et ne modifie aucune
   autre zone déjà validée/verrouillée. */
.face-hot-v55[data-face-zone="Lèvres et bouche"]{
  left:50% !important;
  top:76.6% !important;
  width:15.5% !important;
  height:5.3% !important;
  border-radius:55% / 70% !important;
}


/* ===== V57.9 — MENTON RECALÉ + GORGE/COU RETIRÉ DU FACE SELECTOR =====
   Le menton est descendu sur sa zone osseuse. La gorge et le cou restent
   accessibles uniquement depuis le Body Selector verrouillé. */
.face-hot-v55[data-face-zone="Menton"]{
  left:50% !important;
  top:83.5% !important;
  width:12.5% !important;
  height:6.8% !important;
  border-radius:45% 45% 58% 58% / 42% 42% 68% 68% !important;
}

/* V58.0 — Choix Bouche / Dents, uniquement après un clic sur la bouche */
.mouth-choice-overlay-v580{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:flex-end; justify-content:center;
  padding:18px;
  background:rgba(7,18,32,.32);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .18s ease;
}
.mouth-choice-overlay-v580[hidden]{display:none!important}
.mouth-choice-overlay-v580.is-open{opacity:1}
.mouth-choice-sheet-v580{
  position:relative; width:min(420px,100%); padding:24px 18px 14px;
  border:1px solid rgba(13,158,111,.13); border-radius:26px;
  background:rgba(255,255,255,.98); box-shadow:0 24px 70px rgba(8,22,38,.24);
  transform:translateY(22px) scale(.985); transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.mouth-choice-overlay-v580.is-open .mouth-choice-sheet-v580{transform:translateY(0) scale(1)}
.mouth-choice-close-v580{
  position:absolute; top:12px; right:14px; width:34px; height:34px; border:0;
  border-radius:50%; background:#f1f4f5; color:#52606d; font-size:24px; line-height:1;
}
.mouth-choice-kicker-v580{font-size:11px;font-weight:800;letter-spacing:.14em;color:#14956d;margin:0 40px 7px 2px}
.mouth-choice-sheet-v580 h2{margin:0 40px 6px 2px;font-size:23px;line-height:1.15;color:#071426}
.mouth-choice-intro-v580{margin:0 2px 17px;color:#667182;font-size:14px;line-height:1.35}
.mouth-choice-option-v580{
  width:100%; display:grid; grid-template-columns:46px 1fr 18px; align-items:center; gap:12px;
  margin:10px 0; padding:15px 13px; border:1px solid #e4e9e8; border-radius:18px;
  background:#fff; text-align:left; color:#071426; box-shadow:0 4px 16px rgba(13,32,48,.04);
}
.mouth-choice-option-v580:active{transform:scale(.985)}
.mouth-choice-option-v580:hover{border-color:rgba(13,158,111,.42);background:#f8fffc}
.mouth-choice-icon-v580{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#eafaf4;color:#11966d;font-size:25px;font-weight:700}
.mouth-choice-icon-v580.tooth-v580{font-size:24px}
.mouth-choice-option-v580 b{display:block;font-size:16px;margin-bottom:3px}
.mouth-choice-option-v580 small{display:block;color:#6c7684;font-size:12px;line-height:1.3}
.mouth-choice-chevron-v580{font-size:28px;color:#9aa5ad}
.mouth-choice-cancel-v580{width:100%;border:0;background:transparent;padding:12px 8px 5px;color:#5e6975;font-weight:700;font-size:14px}
@media (min-width:700px){.mouth-choice-overlay-v580{align-items:center}.mouth-choice-sheet-v580{border-radius:28px}}


/* ===== V59 — Hand Selector (ajout isolé, Body/Face inchangés) ===== */
.hand-screen-v59 h1{font-size:31px;line-height:1.08;margin-bottom:8px}.hand-screen-v59 .lead{margin-bottom:12px}.hand-tabs-v59{margin:0 0 8px}.hand-tabs-v59 button.active{background:linear-gradient(135deg,#039862,#12b779);color:#fff;box-shadow:0 7px 16px rgba(7,150,101,.18)}
.hand-stage-v59{position:relative;height:480px;display:grid;place-items:center;overflow:hidden;border-radius:24px;background:linear-gradient(180deg,#fbfdfc,#f4faf7);border:1px solid #edf2ef}.hand-figure-v59{position:relative;height:100%;aspect-ratio:300/470}.hand-figure-v59 svg{display:block;width:100%;height:100%}.hand-shape-v59{fill:#f3b889;stroke:#d99768;stroke-width:3}.hand-back-shape-v59{fill:#efb284}.hand-line-v59{fill:none;stroke:#d79770;stroke-width:3;stroke-linecap:round;opacity:.72}.hand-knuckle-v59{fill:none;stroke:#d79770;stroke-width:2;opacity:.65}.hand-hotspots-v59{position:absolute;inset:0}.hand-hot-v59{position:absolute;border:0;background:transparent;border-radius:30px;cursor:pointer;transform:none;padding:0}.hand-hot-v59:after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%;background:#0a1825;border:8px solid #fff;box-shadow:0 0 0 2px #0aa273,0 5px 15px rgba(7,150,101,.2);transition:.18s ease}.hand-hot-v59 span{position:absolute;left:50%;top:calc(50% + 27px);transform:translateX(-50%);white-space:nowrap;background:rgba(255,255,255,.94);border:1px solid #dfeae5;border-radius:999px;padding:4px 7px;font-size:10px;font-weight:850;color:#344054;opacity:0;pointer-events:none;transition:.15s}.hand-hot-v59:hover:after,.hand-hot-v59:focus-visible:after{box-shadow:0 0 0 7px rgba(7,150,101,.17),0 5px 15px rgba(7,150,101,.2);transform:translate(-50%,-50%) scale(1.08)}.hand-hot-v59:hover span,.hand-hot-v59:focus-visible span{opacity:1}.hand-hot-v59.selected:after{background:#fff;border-color:#079665;box-shadow:0 0 0 8px rgba(7,150,101,.15)}
.hand-selection-v59{margin-top:9px;border:1px solid #dceae4;border-radius:18px;padding:12px 14px;display:flex;align-items:center;gap:12px;background:#f7fcfa}.hand-selection-v59>span{width:40px;height:40px;border-radius:50%;background:#e4f8f0;color:#079665;display:grid;place-items:center;font-size:22px}.hand-selection-v59 small,.hand-selection-v59 b,.hand-selection-v59 em{display:block}.hand-selection-v59 small{font-size:10px;letter-spacing:1px;color:#708078;font-weight:900}.hand-selection-v59 b{font-size:15px;margin-top:2px}.hand-selection-v59 em{font-size:11px;color:#667085;font-style:normal;margin-top:2px}.finger-choice-overlay-v59{position:fixed;inset:0;z-index:80;background:rgba(7,20,38,.36);backdrop-filter:blur(7px);display:grid;align-items:end;justify-items:center;padding:18px}.finger-choice-overlay-v59[hidden]{display:none}.finger-choice-overlay-v59 .mouth-choice-sheet-v580{width:min(430px,100%)}
@media(max-height:820px){.hand-stage-v59{height:400px}.hand-screen-v59 h1{font-size:27px}.hand-selection-v59{padding:9px 12px}}@media(max-height:720px){.hand-stage-v59{height:340px}.hand-screen-v59 .stepper{display:none}.hand-selection-v59{display:none}}


/* ===== V59.1 — Hand Selector HD validé ===== */
.hand-stage-image-v591{height:480px;background:#fff;border-color:#edf1ef}
.hand-photo-v591{width:100%;height:100%;aspect-ratio:auto;position:relative;display:grid;place-items:center}
.hand-photo-v591[hidden]{display:none}
.hand-photo-v591>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none}
.hand-photo-v591 .hand-hotspots-v59{position:absolute;inset:0}
.hand-photo-v591 .marker-hit-v591{width:58px;height:58px;transform:translate(-50%,-50%);border-radius:50%;z-index:4}
.hand-photo-v591 .marker-hit-v591:after{display:none!important}
.hand-photo-v591 .marker-hit-v591 span{top:calc(50% + 29px);opacity:0}
.hand-photo-v591 .marker-hit-v591:hover span,.hand-photo-v591 .marker-hit-v591:focus-visible span{opacity:1}
.hand-photo-v591 .marker-hit-v591:focus-visible{outline:4px solid rgba(7,150,101,.25);outline-offset:0}
.hand-photo-v591 .marker-hit-v591.selected{box-shadow:0 0 0 7px rgba(7,150,101,.16)}
@media(max-height:820px){.hand-stage-image-v591{height:400px}.hand-photo-v591 .marker-hit-v591{width:52px;height:52px}}
@media(max-height:720px){.hand-stage-image-v591{height:340px}.hand-photo-v591 .marker-hit-v591{width:46px;height:46px}}

/* ===== V59.2 — fond blanc du Hand Selector ===== */
.hand-stage-image-v591,.hand-photo-v591{background:#fff!important;}


/* ===== V61.3 — Hand Selector Femme aligné sur le fonctionnement Homme ===== */
/* Les repères visuels sont intégrés aux images, comme pour la main Homme.
   Les zones cliquables restent invisibles et utilisent les mêmes coordonnées. */
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 .marker-hit-v591::after{
  display:none!important;
}
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 img{
  object-fit:contain;
  object-position:center bottom;
}

/* ===== V61.2 — Main femme recentrée, espace supérieur réduit ===== */
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 > img,
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 > .hand-hotspots-v59{
  transform:translateY(-46px);
}
@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 > img,
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 > .hand-hotspots-v59{
    transform:translateY(-38px);
  }
}
@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 > img,
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 > .hand-hotspots-v59{
    transform:translateY(-30px);
  }
}

/* ===== V61.4 — Repères Femme identiques au Hand Selector Homme ===== */
/* Les images Femme sont désormais sans repères intégrés. Les repères sont
   dessinés par le composant CSS original afin d'obtenir exactement le même
   rendu que pour l'Homme : centre noir, anneau blanc et contour vert. */
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 .marker-hit-v591::after{
  display:block!important;
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:22px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#0a1825;
  border:8px solid #fff;
  box-shadow:0 0 0 2px #0aa273,0 5px 15px rgba(7,150,101,.20);
  transition:.18s ease;
}
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 .marker-hit-v591:hover::after,
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 .marker-hit-v591:focus-visible::after{
  box-shadow:0 0 0 7px rgba(7,150,101,.17),0 5px 15px rgba(7,150,101,.20);
  transform:translate(-50%,-50%) scale(1.08);
}

/* ===== V61.5 — Repères Femme intégrés à l’image, taille Homme ===== */
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 .marker-hit-v591::after{
  display:none!important;
}


/* ===== V61.6 — Traits guides supprimés des assets Main Femme ===== */
/* Aucun changement de mise en page, de coordonnées ou de zones cliquables. */


/* ===== V61.8 — Main Femme agrandie et recentrée sans recadrage =====
   La source PNG reste intacte. L'image et les zones cliquables sont
   transformées ensemble afin de préserver leur alignement. */
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591{
  overflow:hidden;
}
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 > img,
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 > .hand-hotspots-v59{
  transform:translate3d(0,-30px,0) scale(1.12);
  transform-origin:50% 50%;
}
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 > img{
  object-fit:contain;
  object-position:center center;
}
@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 > img,
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 > .hand-hotspots-v59{
    transform:translate3d(0,-25px,0) scale(1.10);
  }
}
@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 > img,
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591 > .hand-hotspots-v59{
    transform:translate3d(0,-20px,0) scale(1.08);
  }
}

/* ===== V61.9 — Paume femme harmonisée avec le dos =====
   Agrandissement ciblé de la vue Paume uniquement. L'image et ses hotspots
   sont transformés ensemble afin de préserver exactement leur alignement. */
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > img,
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > .hand-hotspots-v59{
  transform:translate3d(0,-40px,0) scale(1.32);
  transform-origin:50% 50%;
}
@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > img,
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > .hand-hotspots-v59{
    transform:translate3d(0,-34px,0) scale(1.27);
  }
}
@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > img,
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > .hand-hotspots-v59{
    transform:translate3d(0,-26px,0) scale(1.20);
  }
}

/* ===== V61.10 — Hitbox auriculaire paume femme =====
   Ajout ciblé d'une zone cliquable plus généreuse sur l'auriculaire.
   Aucun changement visuel : le repère reste intégré à l'image. */
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"]
  .marker-hit-v591[data-hand-zone="Auriculaire"]{
  width:78px;
  height:78px;
  z-index:10;
  pointer-events:auto;
}
@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"]
    .marker-hit-v591[data-hand-zone="Auriculaire"]{
    width:70px;
    height:70px;
  }
}
@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"]
    .marker-hit-v591[data-hand-zone="Auriculaire"]{
    width:62px;
    height:62px;
  }
}


/* ===== V61.11 — Hitbox index paume femme =====
   Même correction que pour l’auriculaire : zone cliquable agrandie,
   sans modifier le repère visuel intégré à l’image. */
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"]
  .marker-hit-v591[data-hand-zone="Index"]{
  width:78px;
  height:78px;
  z-index:10;
  pointer-events:auto;
}
@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"]
    .marker-hit-v591[data-hand-zone="Index"]{
    width:70px;
    height:70px;
  }
}
@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"]
    .marker-hit-v591[data-hand-zone="Index"]{
    width:62px;
    height:62px;
  }
}


/* ===== V61.14 — Hitbox index précise =====
   Zone cliquable légèrement plus grande que le repère visible,
   sans empiéter sur le majeur voisin. */
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"]
  .marker-hit-v591[data-hand-zone="Index"]{
  width:34px;
  height:34px;
}
@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"]
    .marker-hit-v591[data-hand-zone="Index"]{
    width:32px;
    height:32px;
  }
}
@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"]
    .marker-hit-v591[data-hand-zone="Index"]{
    width:30px;
    height:30px;
  }
}


/* ===== V61.15 — Hitbox majeur paume femme =====
   Zone cliquable précise, légèrement plus grande que le repère visible,
   sans chevauchement avec l’index ou l’annulaire. */
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"]
  .marker-hit-v591[data-hand-zone="Majeur"]{
  width:34px;
  height:34px;
  z-index:10;
  pointer-events:auto;
}
@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"]
    .marker-hit-v591[data-hand-zone="Majeur"]{
    width:32px;
    height:32px;
  }
}
@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"]
    .marker-hit-v591[data-hand-zone="Majeur"]{
    width:30px;
    height:30px;
  }
}


/* ===== V61.17 — Zone cliquable du majeur recréée ===== */
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="palm"] .hand-hotspots-v59{
  z-index:20;
  pointer-events:none;
}
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="palm"] .woman-palm-middle-hit-v6117{
  width:40px!important;
  height:40px!important;
  z-index:50!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] .woman-palm-middle-hit-v6117{
    width:38px!important;
    height:38px!important;
  }
}
@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] .woman-palm-middle-hit-v6117{
    width:36px!important;
    height:36px!important;
  }
}


/* ===== V61.18 — Hitbox majeure indépendante =====
   Cette zone n’est plus dans le calque transformé des autres hotspots.
   Elle est placée directement sur le rond visible du doigt du milieu. */
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="palm"] > .woman-palm-middle-fixed-v6118{
  position:absolute;
  left:49.2%;
  top:9.2%;
  width:36px!important;
  height:36px!important;
  transform:translate(-50%,-50%)!important;
  z-index:100!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  display:block!important;
}
@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] > .woman-palm-middle-fixed-v6118{
    left:49.2%;
    top:9.0%;
    width:34px!important;
    height:34px!important;
  }
}
@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] > .woman-palm-middle-fixed-v6118{
    left:49.2%;
    top:8.8%;
    width:32px!important;
    height:32px!important;
  }
}


/* ===== V61.19 — Hitbox annulaire indépendante =====
   Zone posée directement sur le rond visible de l’annulaire,
   hors du calque transformé des autres hotspots. */
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="palm"] > .woman-palm-ring-fixed-v6119{
  position:absolute;
  left:62.8%;
  top:13.0%;
  width:36px!important;
  height:36px!important;
  transform:translate(-50%,-50%)!important;
  z-index:100!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  display:block!important;
}
@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] > .woman-palm-ring-fixed-v6119{
    left:62.8%;
    top:12.8%;
    width:34px!important;
    height:34px!important;
  }
}
@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] > .woman-palm-ring-fixed-v6119{
    left:62.8%;
    top:12.6%;
    width:32px!important;
    height:32px!important;
  }
}

.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="palm"]>.woman-palm-thumb-fixed-v6120{
position:absolute;left:14.0%;top:39.5%;
width:36px!important;height:36px!important;
transform:translate(-50%,-50%)!important;
z-index:100!important;pointer-events:auto!important;cursor:pointer!important;display:block!important;
}


/* ===== V61.25 — Auriculaire paume femme parfaitement centré =====
   Nouvelle hitbox indépendante posée directement sur le rond visible. */
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="palm"] > .woman-palm-pinky-fixed-v6125{
  position:absolute;
  left:74.8%;
  top:25.9%;
  width:36px!important;
  height:36px!important;
  transform:translate(-50%,-50%)!important;
  z-index:100!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  display:block!important;
}
@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] > .woman-palm-pinky-fixed-v6125{
    width:34px!important;
    height:34px!important;
  }
}
@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] > .woman-palm-pinky-fixed-v6125{
    width:32px!important;
    height:32px!important;
  }
}


/* ===== V61.26 — Centre de la paume, hitbox indépendante =====
   Zone centrée directement sur le rond visible du centre de la main. */
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="palm"] > .woman-palm-center-fixed-v6126{
  position:absolute;
  left:51.2%;
  top:50.2%;
  width:36px!important;
  height:36px!important;
  transform:translate(-50%,-50%)!important;
  z-index:100!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  display:block!important;
}
@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] > .woman-palm-center-fixed-v6126{
    width:34px!important;
    height:34px!important;
  }
}
@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] > .woman-palm-center-fixed-v6126{
    width:32px!important;
    height:32px!important;
  }
}


/* V61.27 Paume */
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="palm"]>.woman-palm-palm-fixed-v6127{
position:absolute;
left:51.3%;
top:63.8%;
width:36px!important;
height:36px!important;
transform:translate(-50%,-50%)!important;
z-index:100!important;
pointer-events:auto!important;
cursor:pointer!important;
display:block!important;
}


/* ===== V61.32 — Dos de la main femme harmonisé avec la paume ===== */
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] .hand-media-v59{
  transform: translate(-50%, -52%) scale(1.18) !important;
  transform-origin: center center !important;
}


/* ===== V61.33 — Dos femme réellement harmonisé avec la paume =====
   Correction structurelle : ciblage des vrais éléments (> img et hotspots).
   Même échelle et même position verticale que la vue Paume. */
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] > img,
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] > .hand-hotspots-v59{
  transform:translate3d(0,-40px,0) scale(1.32) !important;
  transform-origin:50% 50% !important;
}

@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="back"] > img,
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="back"] > .hand-hotspots-v59{
    transform:translate3d(0,-34px,0) scale(1.27) !important;
  }
}

@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="back"] > img,
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="back"] > .hand-hotspots-v59{
    transform:translate3d(0,-26px,0) scale(1.20) !important;
  }
}


/* ===== V61.34 — Dos femme recentré, doigts entièrement visibles ===== */
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] > img,
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] > .hand-hotspots-v59{
  transform:translate3d(-3px,8px,0) scale(1.32) !important;
  transform-origin:50% 50% !important;
}

@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="back"] > img,
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="back"] > .hand-hotspots-v59{
    transform:translate3d(-2px,7px,0) scale(1.27) !important;
  }
}

@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="back"] > img,
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="back"] > .hand-hotspots-v59{
    transform:translate3d(-2px,6px,0) scale(1.20) !important;
  }
}


/* ===== V61.38 — Paume alignée verticalement sur le dos =====
   Tous les éléments sont déplacés ensemble, sans modifier aucune coordonnée interne. */
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="palm"] > img,
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="palm"] > .hand-hotspots-v59{
  transform:translate3d(0,-16px,0) scale(1.32) !important;
  transform-origin:50% 50% !important;
}

.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="palm"] > [data-fixed-hand-hitbox="true"]{
  margin-top:24px !important;
}

@media(max-height:820px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] > img,
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] > .hand-hotspots-v59{
    transform:translate3d(0,-14px,0) scale(1.27) !important;
  }

  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] > [data-fixed-hand-hitbox="true"]{
    margin-top:20px !important;
  }
}

@media(max-height:720px){
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] > img,
  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] > .hand-hotspots-v59{
    transform:translate3d(0,-10px,0) scale(1.20) !important;
  }

  .hand-screen-v59.is-woman-hand-v61
  .hand-photo-v591[data-hand-panel="palm"] > [data-fixed-hand-hitbox="true"]{
    margin-top:16px !important;
  }
}


/* ===== V61.38 corrigée — alignement final Paume / Dos ===== */
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > img,
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > .hand-hotspots-v59{transform:translate3d(0,-11px,0) scale(1.32)!important;transform-origin:50% 50%!important;}
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > [data-fixed-hand-hitbox="true"]{margin-top:29px!important;}
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="back"] > img,
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="back"] > .hand-hotspots-v59{transform:translate3d(-3px,5px,0) scale(1.32)!important;transform-origin:50% 50%!important;}
@media(max-height:820px){
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > img,
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > .hand-hotspots-v59{transform:translate3d(0,-9px,0) scale(1.27)!important;}
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > [data-fixed-hand-hitbox="true"]{margin-top:24px!important;}
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="back"] > img,
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="back"] > .hand-hotspots-v59{transform:translate3d(-2px,4px,0) scale(1.27)!important;}
}
@media(max-height:720px){
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > img,
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > .hand-hotspots-v59{transform:translate3d(0,-6px,0) scale(1.20)!important;}
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="palm"] > [data-fixed-hand-hitbox="true"]{margin-top:20px!important;}
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="back"] > img,
.hand-screen-v59.is-woman-hand-v61 .hand-photo-v591[data-hand-panel="back"] > .hand-hotspots-v59{transform:translate3d(-2px,3px,0) scale(1.20)!important;}
}


/* ===== V61.40 corrigée — Repères visibles sur le dos de la main femme ===== */
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] .marker-hit-v591::after{
  display:block!important;
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:22px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#0a1825;
  border:8px solid #fff;
  box-shadow:0 0 0 2px #0aa273,0 5px 15px rgba(7,150,101,.20);
  transition:.18s ease;
  pointer-events:none;
}

.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] .marker-hit-v591:hover::after,
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] .marker-hit-v591:focus-visible::after{
  box-shadow:0 0 0 7px rgba(7,150,101,.17),0 5px 15px rgba(7,150,101,.20);
  transform:translate(-50%,-50%) scale(1.08);
}

.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] .marker-hit-v591.selected::after{
  background:#fff;
  border-color:#079665;
  box-shadow:0 0 0 8px rgba(7,150,101,.15);
}


/* ===== V61.40 finale — repères Dos femme identiques à la Paume =====
   Taille compensée pour le scale(1.32) du calque : rendu final ~21 px. */
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] .marker-hit-v591::after{
  display:block !important;
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8px !important;
  height:8px !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50%;
  box-sizing:content-box;
  background:#0a1825 !important;
  border:4px solid #fff !important;
  box-shadow:0 0 0 1.5px #0aa273 !important;
  pointer-events:none;
}

.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] .marker-hit-v591:hover::after,
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] .marker-hit-v591:focus-visible::after{
  transform:translate(-50%,-50%) scale(1.08) !important;
  box-shadow:0 0 0 5px rgba(7,150,101,.16),0 0 0 1.5px #0aa273 !important;
}


/* ===== V61.40 précise — taille réellement identique aux repères de la paume =====
   Cette règle finale remplace les essais précédents uniquement sur le dos femme. */
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] .marker-hit-v591::after{
  display:block !important;
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px !important;
  height:7px !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50%;
  box-sizing:content-box;
  background:#0a1825 !important;
  border:3.5px solid #fff !important;
  box-shadow:0 0 0 1.25px #0aa273 !important;
  pointer-events:none;
}

.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] .marker-hit-v591:hover::after,
.hand-screen-v59.is-woman-hand-v61
.hand-photo-v591[data-hand-panel="back"] .marker-hit-v591:focus-visible::after{
  transform:translate(-50%,-50%) scale(1.06) !important;
  box-shadow:0 0 0 4px rgba(7,150,101,.14),0 0 0 1.25px #0aa273 !important;
}


/* ===== V61.47 — Pied homme, même DA que la main ===== */
.foot-screen-v6147 .lead{margin-bottom:12px}
.foot-tabs-v6147{margin-bottom:10px}
.foot-stage-v6147{
  position:relative;
  height:430px;
  border:1px solid #edf0ee;
  border-radius:24px;
  background:#fff;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* V61.47.1 : le panneau reprend le ratio exact de son image (plante 291/650,
   dessus 298/650) au lieu d'un carré fixe. Sans ça, object-fit:contain crée
   des bandes vides variables selon la largeur réelle de l'écran et les zones
   cliquables (en %) ne tombent plus sur l'image affichée. */
.foot-panel-v6147{
  position:relative;
  height:100%;
  aspect-ratio:291/650;
}
.foot-panel-v6147[data-foot-panel="top"]{
  aspect-ratio:298/650;
}
/* V61.48 : le pied féminin utilise des images recadrées à un ratio différent
   de celui de l'homme (mesuré sur les fichiers foot_woman_*). */
.foot-screen-v6147.is-woman-foot-v6148 .foot-panel-v6147{
  aspect-ratio:375/932;
}
.foot-screen-v6147.is-woman-foot-v6148 .foot-panel-v6147[data-foot-panel="top"]{
  aspect-ratio:355/975;
}
.foot-panel-v6147[hidden]{display:none!important}
.foot-panel-v6147>img{
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  display:block;
}
.foot-hotspots-v6147{
  position:absolute;
  inset:0;
}
.foot-hotspots-v6147 button{
  position:absolute;
  width:42px;
  height:42px;
  transform:translate(-50%,-50%);
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}
/* V61.47.3 : repères toujours visibles, taille alignée sur le rendu réel de
   la main (mesuré à l'écran, pas seulement sur la valeur CSS déclarée). */
.foot-hotspots-v6147 button::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#0a1825;
  border:3px solid #fff;
  box-shadow:0 0 0 1.2px #0aa273,0 5px 15px rgba(7,150,101,.2);
  transition:.18s ease;
}
.foot-hotspots-v6147 button:hover::after,
.foot-hotspots-v6147 button:focus-visible::after{
  box-shadow:0 0 0 7px rgba(7,150,101,.17),0 5px 15px rgba(7,150,101,.2);
  transform:translate(-50%,-50%) scale(1.08);
}
.foot-hotspots-v6147 button.selected::after{
  background:#fff;
  border-color:#079665;
  box-shadow:0 0 0 8px rgba(7,150,101,.15);
}
.foot-selection-v6147{margin-top:10px}
@media(max-height:820px){
  .foot-stage-v6147{height:385px}
}
@media(max-height:720px){
  .foot-stage-v6147{height:330px}
}