/* ==========================================================================
   DISCIPLINE — /guide-des-tailles · « La juste mesure »
   Préfixe « gt- ». Complète service.css et main.css.
   SOMMAIRE
    1. Onglets, unités, panneaux
    2. Tableaux de mesures
    3. Silhouette annotée
    4. Entre deux tailles
   ========================================================================== */

/* ---------- 1. ONGLETS, UNITÉS, PANNEAUX ---------- */
.gt-tabsbar { display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 40px); border-bottom: 1px solid var(--rule); }
.gt-tabsbar .tabs__list { flex: 1; border-bottom: 0; min-width: 0; }
.gt-tabsbar .tabs__list { padding-right: 8px; }
.gt-units { position: relative; flex: none; display: inline-flex; margin-bottom: 8px; border: 1px solid var(--rule); border-radius: 999px; padding: 3px; }
.gt-unitbtn { position: relative; z-index: 1; min-width: 78px; height: 44px; padding: 0 14px; border-radius: 999px; font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); transition: background var(--dur-1), color 420ms var(--ease); }
.gt-unitbtn[aria-pressed='true'] { background: var(--ink); color: var(--marble); }
/* Pastille unique qui glisse d'une unité à l'autre (posée par guide-des-tailles.js) */
.gt-units__thumb { position: absolute; z-index: 0; top: 3px; left: 3px; width: 78px; height: 44px; border-radius: 999px; background: var(--ink); pointer-events: none; transition: transform 560ms var(--ease-in-out); }
.gt-units.has-thumb .gt-unitbtn[aria-pressed='true'] { background: transparent; }
.gt-unitbtn:not([aria-pressed='true']):hover { color: var(--fg); }
@media (max-width: 640px) {
  .gt-tabsbar { flex-direction: column-reverse; align-items: stretch; gap: 0; border-bottom: 0; }
  .gt-tabsbar .tabs__list { border-bottom: 1px solid var(--rule); }
  .gt-units { align-self: flex-start; margin: 0 0 16px; }
}
.gt-units.is-muted { opacity: 0.4; }
.gt-tabsbar .tabs [role='tab'], .gt-tabsbar [role='tab'] { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 640px) {
  /* Les onglets se prolongent au-delà de l'écran : un dégradé de bord l'indique, le dernier onglet reste lisible */
  .gt-tabsbar .tabs__list { padding-right: 36px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
}

.gt-panel { display: grid; gap: clamp(32px, 4vw, 64px); }
.gt-panel__main { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.gt-panel__title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); }
.gt-panel__intro { max-width: 46rem; color: var(--fg-muted); }
.gt-note { padding: 18px 22px; border-left: 4px solid var(--decor); background: var(--bg-alt); font-size: 0.92rem; color: var(--fg-muted); max-width: 46rem; }

/* ---------- 2. TABLEAUX ---------- */
.gt-scroll { overflow-x: auto; border-top: 1px solid var(--rule-strong); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.gt-scroll:focus-visible { outline-offset: 2px; }
.gt-scroll.is-scrollable:not(.is-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.gt-swipe { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 0.7rem/1.4 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.gt-swipe[hidden] { display: none; }
.gt-swipe svg { width: 22px; height: 12px; flex: none; animation: gt-nudge 1.6s var(--ease-in-out, ease-in-out) 2; }
@keyframes gt-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .gt-swipe svg { animation: none; } }
.gt-table { min-width: 700px; table-layout: fixed; border-collapse: collapse; text-align: left; font-variant-numeric: tabular-nums; }
.gt-table thead th { padding: 16px 12px; font: 600 1rem/1 var(--font-caps); letter-spacing: 0.12em; text-align: center; border-bottom: 1px solid var(--rule); color: var(--fg); }
.gt-table thead th:first-child { width: 13.5rem; text-align: left; padding-left: 0; font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); }
.gt-table tbody th { position: sticky; left: 0; z-index: 1; padding: 16px 16px 16px 0; font-weight: 400; font-size: 0.9rem; background: var(--marble); border-bottom: 1px solid var(--rule); min-width: 0; }
.gt-table tbody td { padding: 16px 6px; text-align: center; border-bottom: 1px solid var(--rule); color: var(--fg); font-size: 0.95rem; white-space: nowrap; transition: background 320ms var(--ease); }
.gt-table tbody th { transition: background 320ms var(--ease); }
.gt-table [data-cm] { display: inline-block; }
/* Survol : la ligne ET la colonne de la cellule se teintent en douceur (teinte pierre, aucune couleur d'accent) ; la cellule visée est un cran plus dense */
.gt-table tbody tr:hover td { background: rgba(15, 14, 12, 0.05); }
.gt-table tbody tr:hover th { background: #E9E4DA; }
.gt-table td.is-hot { background: rgba(15, 14, 12, 0.05) !important; }
.gt-table td.is-cell { background: rgba(15, 14, 12, 0.1) !important; }
.gt-table thead th { transition: color 320ms var(--ease); }
.gt-table thead th.is-hot { color: var(--accent); }
.gt-table tbody tr:nth-child(odd) td { background: rgba(233, 227, 215, 0.35); }
.gt-unit { margin-left: 4px; font-weight: 400; color: var(--fg-muted); font-size: 0.8rem; }
@media (max-width: 640px) { .gt-table { min-width: 680px; } .gt-table thead th:first-child { width: 9.5rem; } .gt-table tbody th { font-size: 0.82rem; padding-right: 8px; } }

/* ---------- 3. SILHOUETTE ANNOTÉE ---------- */
/* Un mannequin plein, ivoire, dans sa niche de pierre (aplat) : il se bâtit comme une colonne (jambes, buste, bras, tête), puis les repères se posent un à un */
.gt-measure-sec { overflow: clip; }
.gt-measure__grid { align-items: center; row-gap: clamp(32px, 5vw, 64px); }
.gt-fig-wrap { position: relative; isolation: isolate; max-width: 420px; margin-inline: auto; padding: clamp(8px, 2vw, 24px); }
.gt-fig-wrap::before { content: ''; position: absolute; z-index: -1; inset: 0 7% 0; border-radius: 999px 999px 0 0; background: var(--decor-soft); }
.gt-fig { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.gt-fig .gt-m, .gt-fig .gt-disc { transform-box: fill-box; }
.gt-fig .gt-m { transform-origin: 0 50%; }
.gt-fig .gt-m rect { fill: var(--gold); transition: fill var(--dur-2) var(--ease); }
.gt-fig .gt-disc { transform-origin: 50% 50%; transition: opacity var(--dur-2) var(--ease), transform 520ms var(--ease-out); }
.gt-fig .gt-disc circle { fill: var(--gold); transition: fill var(--dur-2) var(--ease); }
.gt-fig .gt-disc text { font: 600 13px var(--font-caps); fill: var(--ink); stroke: none; }
.gt-fig .gt-m { transition: opacity var(--dur-2) var(--ease); }
.gt-fig.has-active .gt-m:not(.is-on), .gt-fig.has-active .gt-disc:not(.is-on) { opacity: 0.28; }
.gt-fig .gt-m.is-on rect { fill: var(--gold-light); }
.gt-fig .gt-disc.is-on { transform: scale(1.22); }
.gt-fig .gt-disc.is-on circle { fill: var(--gold-light); }
/* Séquence d'entrée : les repères attendent la fin de la construction (≈ 0,5 s après son départ), puis se posent à 100 ms d'intervalle */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.no-reveal) .gt-fig.is-prepared:not(.is-built) .gt-m { transform: scaleX(0); }
  html.js:not(.no-reveal) .gt-fig.is-prepared:not(.is-built) .gt-disc { opacity: 0; transform: scale(0.5); }
  html.js:not(.no-reveal) .gt-fig.is-built .gt-m { transition: transform 640ms var(--ease-in-out) calc(var(--reveal-delay, 0ms) + 520ms + var(--mi, 0) * 100ms), opacity var(--dur-2) var(--ease); }
  html.js:not(.no-reveal) .gt-fig.is-built .gt-disc { transition: opacity 360ms var(--ease-out) calc(var(--reveal-delay, 0ms) + 760ms + var(--mi, 0) * 100ms), transform 520ms var(--ease-out) calc(var(--reveal-delay, 0ms) + 760ms + var(--mi, 0) * 100ms); }
  html.js:not(.no-reveal) .gt-fig.is-built.is-settled .gt-m, html.js:not(.no-reveal) .gt-fig.is-built.is-settled .gt-disc { transition-delay: 0ms; }
}

.gt-measure__text { display: grid; gap: var(--space-5); align-content: center; }
.gt-measure__text .display-2 { font-size: clamp(1.9375rem, 3.1vw, 2.875rem); }
.gt-measure__text .display-2 em { color: var(--gold-light); }
.gt-measures { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.gt-measure { display: grid; grid-template-columns: 3rem 1fr; gap: 12px; align-items: start; padding: 18px 8px 18px 0; border-bottom: 1px solid var(--rule); cursor: default; transition: padding var(--dur-2) var(--ease), background var(--dur-2); }
.gt-measure__num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--decor-soft); font: 600 0.78rem/1 var(--font-caps); color: var(--gold-light); transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.gt-measure strong { display: block; font: 600 0.78rem/1.3 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; }
.gt-measure span:not(.gt-measure__num) { display: block; margin-top: 6px; color: var(--fg-muted); font-size: 0.93rem; max-width: 34rem; }
.gt-measure:hover, .gt-measure:focus-visible, .gt-measure.is-on { padding-left: 10px; }
.gt-measure:hover .gt-measure__num, .gt-measure:focus-visible .gt-measure__num, .gt-measure.is-on .gt-measure__num { background: var(--gold); color: var(--ink); }
.gt-tips { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 0.9rem; color: var(--fg-muted); }
.gt-tips li { position: relative; padding-left: 26px; }
.gt-tips li::before { content: ''; position: absolute; left: 4px; top: 0.6em; width: 6px; height: 6px; background: var(--gold-light); transform: rotate(45deg); }

/* ---------- 4. ENTRE DEUX TAILLES ---------- */
.gt-between__grid { align-items: center; row-gap: clamp(32px, 5vw, 56px); }
.gt-between__intro { display: grid; gap: var(--space-5); align-content: start; }
.gt-between .display-2 { font-size: clamp(1.9375rem, 3.1vw, 2.875rem); }
.gt-between .display-2 em { color: var(--accent); }
.gt-aid { display: grid; gap: clamp(22px, 3vw, 32px); background: var(--marble); }
.gt-aid__group { display: grid; gap: 14px; }
.gt-aid__q { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; }
.gt-aid__q span { position: relative; isolation: isolate; display: inline-grid; place-items: center; width: 28px; height: 28px; font: 900 0.875rem/1 var(--font-sans); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--bg); }
.gt-aid__q span::before { content: ''; position: absolute; z-index: -1; inset: 3px; background: var(--decor); transform: rotate(45deg); }
.gt-aid__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gt-aid .chip { min-height: 44px; }
.gt-aid__result { padding: 22px 0 6px; border-top: 1px solid var(--rule); display: grid; gap: 8px; min-height: 9.5rem; align-content: start; }
.gt-aid__verdict { font: 900 clamp(1.25rem, 0.88rem + 1.09vw, 1.75rem)/1.06 var(--font-sans); letter-spacing: var(--brut-track-m); text-transform: uppercase; text-wrap: balance; }
.gt-aid__verdict em { font-style: normal; color: var(--accent); }
.gt-aid__why { color: var(--fg-muted); max-width: 34rem; }
.gt-aid__result.is-updating .gt-aid__verdict, .gt-aid__result.is-updating .gt-aid__why { animation: fade-up var(--dur-2) var(--ease) both; }