/* UltraCylinder — MOBILE CLEAN vFinal
   Chargé via media query -> n'impacte pas desktop.
   Pas d'anim de layout; transitions limitées; sélecteurs stables.
*/

/* ------------------ LAYOUT GLOBAL ------------------ */
.layout{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto auto;
  grid-template-areas:"left" "viewer" "mid";
  gap:12px;
  padding:10px;
}
.card{ padding:8px; min-width:0 }

/* Grilles compactes par défaut */
.row{ display:grid; grid-template-columns:1fr; gap:6px; margin:8px 0 }
.row.two{ grid-template-columns:1fr; gap:6px }
.info{ display:none } /* détails masqués en mobile */

.headrow .help{ font-size:8px; opacity:.8 }
.muted{ font-size:12px }

/* ------------------ CARTE 1 : SÉRIE & DIMENSIONS ------------------ */
/* Scroll interne stable (classe posée par le script mobile si souhaité) */
main.layout > section.card.has-scroll{
  max-height:min(58vh,560px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
}

/* La carte 1 est une pile simple (accordéon) */
main.layout > section.card:first-of-type{
  display:grid;
  grid-template-columns:1fr;           /* 1 seule colonne */
  grid-auto-rows:min-content;
  gap:12px;
  max-height:min(60vh,560px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
}

/* ========== Accordéon (h2 → <details><summary>) ========== */
main.layout > section.card:first-of-type details.acc{
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--card-h);
  overflow:hidden;            /* bords propres pendant l’anim */
}
main.layout > section.card:first-of-type details.acc + details.acc{ margin-top:10px }

main.layout > section.card:first-of-type details.acc > summary.acc-sum{
  list-style:none; cursor:pointer; user-select:none;
  padding:8px 10px; font-weight:700; font-size:14px;
  display:flex; align-items:center; gap:10px;
}
main.layout > section.card:first-of-type details.acc > summary.acc-sum::-webkit-details-marker{ display:none }
main.layout > section.card:first-of-type details.acc > summary.acc-sum::after{
  content:"›"; margin-left:auto; transition:transform .15s ease;
}
main.layout > section.card:first-of-type details.acc[open] > summary.acc-sum::after{ transform:rotate(90deg) }

main.layout > section.card:first-of-type details.acc > .acc-body{
  padding:10px; display:grid; gap:12px;
}

/* --- Mise en page interne des sections --- */
/* Série + Alésage (wrapper .kv2 créé par mobile.ts) */
main.layout > section.card:first-of-type details.acc .kv2{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
@media (max-width:360px){
  main.layout > section.card:first-of-type details.acc .kv2{ grid-template-columns:1fr }
}
main.layout > section.card:first-of-type details.acc .kv2 .row{
  display:grid; grid-template-columns:1fr; gap:6px; margin:0;
}

/* Course | Tige : 2 colonnes — label + input sur UNE ligne */
main.layout > section.card:first-of-type details.acc .row.two:first-of-type{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
@media (max-width:360px){
  main.layout > section.card:first-of-type details.acc .row.two:first-of-type{ grid-template-columns:1fr }
}
main.layout > section.card:first-of-type details.acc .row.two:first-of-type > div{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px; margin:0;
}
main.layout > section.card:first-of-type details.acc .row.two:first-of-type > div > label{
  margin:0; white-space:nowrap; font-size:12px;
}

/* Extension de tige : 1 ligne, slider full-width, valeur à droite */
main.layout > section.card:first-of-type details.acc .range-row{
  display:grid; grid-template-columns:1fr; position:relative; gap:6px;
}
main.layout > section.card:first-of-type details.acc .range-row input[type="range"]{
  width:100%; height:36px; -webkit-tap-highlight-color:transparent; touch-action:pan-y;
}
main.layout > section.card:first-of-type details.acc .range-row output{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  min-width:56px; text-align:center; pointer-events:none;
  padding:2px 8px; border-radius:8px; background:var(--card-h);
}

/* Accessoires : 3 pastilles (2 si XS), plein largeur */
main.layout > section.card:first-of-type details.acc .grid3{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;
}
@media (max-width:380px){
  main.layout > section.card:first-of-type details.acc .grid3{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
main.layout > section.card:first-of-type details.acc .grid3 label{
  display:flex; align-items:center; gap:8px;
  padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--card-h);
}

/* ------------------ EXTENSION + COULEUR (général) ------------------ */
input[type="range"]{ -webkit-tap-highlight-color:transparent }
.range-row input[type="range"]{ touch-action:pan-y }
.range-row input[type="range"]::-webkit-slider-thumb{ box-shadow:none }

/* ------------------ PICKER COULEUR ------------------ */
#color{
  width:28px; height:28px; padding:0; border-radius:999px;
  -webkit-appearance:none; appearance:none;
}
#color::-webkit-color-swatch-wrapper{ padding:0 }
#color::-webkit-color-swatch{ border:none; border-radius:999px }

/* ------------------ STEPPER (+/–) ------------------ */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
input[type="number"]{ -moz-appearance:textfield }

.input-stepper{ position:relative; display:block }
.input-stepper input{ width:100%; padding-right:96px }
.input-stepper .step{
  position:absolute; top:5px; bottom:5px; width:42px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:8px; background:var(--card-h);
  font-weight:700; line-height:1; cursor:pointer;
  transition:transform .04s ease, background .12s ease;
}
.input-stepper .step:active{ transform:translateY(1px) }
.input-stepper .step[data-delta^="-"]{ right:50px } /* – */
.input-stepper .step:not([data-delta^="-"]){ right:6px } /* + */

/* ------------------ VIEWER / HUD ------------------ */
.viewerWrap{ height:clamp(300px,52vh,560px); min-height:0 }

.hudBookmark{
  position:absolute; left:8px; bottom:8px; z-index:2;
  width:30px; height:30px; border-radius:999px;
  border:1px solid var(--line); background:var(--card-h); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font:700 13px/1 system-ui; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.hudBookmark:after{ content:"i" }

/* Panneau discret (fermé par défaut) */
.viewerWrap .dimHud{
  left:8px; right:auto; bottom:46px; max-width:80vw;
  font-size:11px; padding:6px 8px; opacity:0; pointer-events:none;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;
  background:rgba(26,32,39,.92); color:#E9EEF6; border-color:rgba(255,255,255,.12);
}
.viewerWrap.hud-open .dimHud{ opacity:1; transform:none; pointer-events:auto }

/* ==== Topbar compact ==== */
.sitetop, .topbar, header.app{ padding:6px 10px !important }
.sitetop .brand, .topbar .brand{ font-size:18px !important; line-height:1.1 }
.sitetop .subtitle, .topbar .subtitle{
  font-size:12px !important; opacity:.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:65vw;
}
.sitetop, .topbar{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px }
//* === MOBILE — Série & Dimensions (accordéon #1) ===================== */
/* Mise en page générale du body du 1er panneau : 2 colonnes 50/50 */
main.layout > section.card:first-of-type details.acc:first-of-type .acc-body{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;  /* col gauche | col droite */
  gap:12px !important;
  align-items:start !important;
}

/* Série/Alésage ET Course/Tige occupent toute la largeur (eux-mêmes gèrent leur 2-col) */
main.layout > section.card:first-of-type details.acc:first-of-type .acc-body > .kv2,
main.layout > section.card:first-of-type details.acc:first-of-type .acc-body > .row.two{
  grid-column: 1 / -1 !important;
}

/* Course & Tige : 2 colonnes, labels AU-DESSUS */
main.layout > section.card:first-of-type details.acc:first-of-type .acc-body > .row.two{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:12px !important;
}
@media (max-width:360px){
  main.layout > section.card:first-of-type details.acc:first-of-type .acc-body > .row.two{
    grid-template-columns: 1fr !important;
  }
}
main.layout > section.card:first-of-type details.acc:first-of-type .acc-body > .row.two > div{
  display:grid !important;
  grid-template-columns: 1fr !important;   /* label au-dessus */
  gap:6px !important;
  margin:0 !important;
}
main.layout > section.card:first-of-type details.acc:first-of-type .acc-body > .row.two > div > label{
  margin:0 0 2px !important; white-space:nowrap !important; font-size:12px !important;
}

/* ===== Extension de tige DANS LA COLONNE DROITE ===== */
/* Le label du slider (le h2 avant .range-row) va en colonne 2 */
main.layout > section.card:first-of-type details.acc:first-of-type .acc-body > h2.sec:has(+ .range-row){
  grid-column: 2 !important;
  margin:0 0 4px !important;
  font-size:12px !important;
}

/* Le bloc .range-row va en colonne 2 ; on allonge VRAIMENT la piste */
main.layout > section.card:first-of-type details.acc:first-of-type .acc-body > .range-row{
  grid-column: 2 !important;                 /* → autre colonne (droite) */
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap:6px !important;
}

/* Piste longue (quasi bord à bord de la colonne) */
main.layout > section.card:first-of-type details.acc:first-of-type .acc-body > .range-row input[type="range"]{
  display:block !important;
  width: calc(100% + 16px) !important;       /* mord dans le padding pour gagner de la longueur */
  margin-inline: -8px !important;            /* compense visuellement */
  height: 44px !important;                   /* confort tactile */
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

/* Valeur superposée à droite, sans réduire la longueur utile */
main.layout > section.card:first-of-type details.acc:first-of-type .acc-body > .range-row output{
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  min-width: 56px; text-align: center; pointer-events: none;
}