/* =====================================================
   Calculateur Scierie — feuille de style MOBILE-FIRST
   Inspiration : vincesascie.fr (palette bois rustique-moderne)

   DESIGN SYSTEM
   -------------
   Palette        : 6 tons de bois (noir → crème) + accent vert forestier (CTA, sémantique OK)
   Sémantique     : --ok (vert), --warn (ocre), --erreur (rouge brique)
   Typo           : Montserrat (titres, weights 500-800) + Poppins (corps, 400-600)
   Échelle texte  : 11/12/13/14/15/16/17 (UI), 22-46 (h1 hero), 12px eyebrow letter-spacing 0.18em
   Espacement     : 4/6/8/10/12/14/16/18/22/24/28/32 (modulaires 4/8/12/16)
   Rayons         : 8 (pills) / 10 (inputs) / 12 (small cards) / 14 (cards) / 18-22 (hero cards) / 999 (chips)
   Ombres         : --shadow-soft (4px) pour tiles, --shadow-card (12px) pour cards principales
   Couleurs prod  : palette bois pour planches/lattes/tasseaux, vert pour poutre cœur

   PATTERNS
   --------
   - Bottom nav fixe (mobile-first), 5 items max
   - Cards blanches sur fond crème, cards résultat en bois foncé
   - Onboarding par overlay (visu floutée + CTA exemple)
   - Modal aide accessible depuis topbar "?"
   - Toast bottom (au-dessus du bottom nav)
   - Action-bar (Partager / Sauvegarder) au-dessus des résultats
   ===================================================== */

:root {
  /* Palette bois (vincesascie.fr) */
  --bois-noir:   #1a0f08;
  --bois-fonce:  #3C2613;
  --bois-moyen:  #7A6450;
  --bois-clair:  #AF8057;
  --beige:       #D1B499;
  --creme:       #DBC9B9;
  --creme-clair: #F4ECE0;
  --blanc:       #FFFFFF;
  --gris-clair:  #F1EFE9;
  --gris:        #c8c0b3;

  /* Vert forestier (CTA) */
  --vert:        #008361;
  --vert-fonce:  #006848;
  --vert-clair:  #def4f0;

  /* Sémantique */
  --ok:          #008361;
  --warn:        #c98a16;
  --erreur:      #b94434;
  --bg-erreur:   #fdeae8;
  --bg-warn:     #fff5e0;
  --bg-ok:       #def4f0;

  /* Couleurs pour planches numérotées (rotation) */
  --pl-1: #AF8057;
  --pl-2: #D1B499;
  --pl-3: #C49770;
  --pl-4: #B68A60;
  --pl-5: #A07550;
  --pl-6: #8E6840;

  /* Typo */
  --font-titre: 'Montserrat', system-ui, sans-serif;
  --font-corps: 'Poppins', system-ui, sans-serif;

  --rad: 14px;
  --rad-lg: 18px;
  --shadow-card: 0 1px 2px rgba(60,38,19,0.06), 0 12px 32px -12px rgba(60,38,19,0.18);
  --shadow-soft: 0 1px 2px rgba(60,38,19,0.04), 0 4px 12px -6px rgba(60,38,19,0.10);

  --bottom-nav-h: 68px;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-corps);
  color: var(--bois-fonce);
  background: var(--creme-clair);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.55;
  overscroll-behavior-y: contain;
}

/* Focus visible accessible */
:focus-visible {
  outline: 3px solid var(--vert);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, input:focus-visible, select:focus-visible {
  outline-offset: 3px;
}

/* Préférence : moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip link pour clavier */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  background: var(--bois-fonce);
  color: var(--creme);
  padding: 10px 16px;
  border-radius: 8px;
  font-family: var(--font-titre);
  font-weight: 600;
  text-decoration: none;
  z-index: 1000;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

body {
  background:
    radial-gradient(1200px 600px at 100% -200px, rgba(175,128,87,0.18), transparent 60%),
    radial-gradient(900px 500px at -100px 800px, rgba(0,131,97,0.06), transparent 60%),
    var(--creme-clair);
  min-height: 100vh;
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}

a { color: var(--vert-fonce); text-decoration: none; border-bottom: 1px solid rgba(0,131,97,0.3); transition: 0.15s; }
a:hover { color: var(--bois-fonce); border-bottom-color: var(--bois-fonce); }

/* Disable double-tap zoom but keep readability */
button, .seg-btn, .pill, .nav-btn, .bn-btn, label, .step-tab { touch-action: manipulation; }

/* ============== PIN SCREEN ============== */
.pin-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: linear-gradient(155deg, var(--bois-fonce) 0%, var(--bois-noir) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.pin-screen.hidden { display: none; }
.pin-inner {
  width: 100%;
  max-width: 360px;
  text-align: center;
  padding: 20px 0 max(20px, env(safe-area-inset-bottom));
}
.pin-logo {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  display: block;
}
.pin-eyebrow {
  font-family: var(--font-titre);
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bois-clair);
  margin: 0 0 6px;
}
.pin-title {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 26px;
  color: var(--blanc);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.pin-subtitle {
  font-size: 13.5px;
  color: var(--beige);
  margin: 0 0 28px;
  line-height: 1.5;
}
.pin-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.pin-dots span {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bois-clair);
  background: transparent;
  transition: background 0.15s, transform 0.15s;
}
.pin-dots span.filled {
  background: var(--bois-clair);
  transform: scale(1.1);
}
.pin-dots.error span {
  border-color: var(--erreur);
  animation: pinShake 0.4s;
}
@keyframes pinShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.pin-error {
  font-size: 13px;
  color: #ff9c8c;
  margin: 0 0 16px;
  font-weight: 600;
}
.pin-error.hidden { display: none; }
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 280px;
  margin: 0 auto;
}
.pin-key {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  color: var(--blanc);
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 28px;
  cursor: pointer;
  transition: 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.pin-key:hover { background: rgba(255,255,255,0.12); }
.pin-key:active { background: var(--bois-clair); transform: scale(0.92); }
.pin-key:disabled, .pin-key-empty { background: transparent; border: none; cursor: default; }
.pin-key-empty:hover { background: transparent; }
.pin-key-back { font-size: 16px; }
.pin-forgot {
  margin-top: 24px;
  background: transparent;
  border: none;
  color: var(--bois-clair);
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 6px 12px;
}
.pin-forgot.hidden { display: none; }
.pin-forgot:hover { color: var(--beige); }

/* ============== TOPBAR ============== */
.topbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--topbar-h);
  background: rgba(244,236,224,0.85);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(60,38,19,0.08);
}
.topbar-inner {
  max-width: 1320px;
  margin: 0 auto;
  height: 100%;
  padding: 0 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 36px; height: 36px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-line1 {
  font-family: var(--font-titre);
  font-weight: 600; font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bois-moyen);
}
.brand-line2 {
  font-family: var(--font-titre);
  font-weight: 800; font-size: 16px;
  letter-spacing: 0.04em; color: var(--bois-fonce);
  margin-top: 2px;
}
.topbar-actions { display: flex; gap: 10px; align-items: center; }
/* Touch targets ≥44px (Apple/Google guidelines pour mobile en atelier) */
.topbar-help, .topbar-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(60,38,19,0.15);
  background: var(--blanc);
  color: var(--bois-fonce);
  font-family: var(--font-titre);
  font-weight: 700; font-size: 18px;
  cursor: pointer;
  transition: 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.topbar-help:active, .topbar-icon:active { transform: scale(0.95); background: var(--gris-clair); }

/* Action bar (partager/sauvegarder) */
.action-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.action-btn {
  flex: 1;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 14px;
  background: var(--blanc);
  border: 1.5px solid rgba(60,38,19,0.12);
  border-radius: 10px;
  color: var(--bois-fonce);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: 0.15s;
}
.action-btn:active { transform: scale(0.97); background: var(--gris-clair); }
.action-btn:hover { border-color: var(--bois-clair); }

/* Toast */
.toast {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + 16px);
  left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bois-fonce);
  color: var(--creme);
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 250;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.hidden { display: none; }

/* Historique liste */
.histo-list {
  display: flex; flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}
.histo-item {
  background: var(--blanc);
  border: 1px solid rgba(60,38,19,0.06);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  transition: 0.15s;
}
.histo-item:hover { border-color: var(--bois-clair); background: rgba(175,128,87,0.03); }
.histo-item-info { min-width: 0; }
.histo-item-title {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--bois-fonce);
  margin-bottom: 4px;
}
.histo-item-meta {
  font-size: 12px;
  color: var(--bois-moyen);
  display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center;
}
.histo-item-meta .dot { color: var(--bois-clair); }
.histo-item-actions { display: flex; gap: 4px; }
.histo-item-action {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--gris-clair);
  border: none;
  color: var(--bois-moyen);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.histo-item-action:hover { background: rgba(175,128,87,0.15); color: var(--bois-fonce); }
.histo-item-action.danger:hover { background: var(--bg-erreur); color: var(--erreur); }
.histo-empty {
  text-align: center;
  padding: 30px 20px;
  color: var(--bois-moyen);
  font-size: 14px;
  border: 1px dashed rgba(60,38,19,0.15);
  border-radius: 12px;
}

/* ============== MAIN & TABS ============== */
main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 14px 20px;
}
.tab { display: none; animation: fadeUp 0.3s ease; }
.tab.active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============== HERO MOB ============== */
.hero-mob { padding: 4px 0 12px; }
.eyebrow {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--vert);
  margin: 0 0 4px;
}
.hero-mob h1 {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(24px, 6.5vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--bois-fonce);
}
.hero-mob h1 span { color: var(--bois-clair); font-weight: 700; }
.lead {
  font-size: 13.5px;
  color: var(--bois-moyen);
  margin: 0;
  line-height: 1.45;
}
/* Toast : feedback non-bloquant après partage / sauvegarde */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
  transform: translateX(-50%) translateY(20px);
  background: var(--bois-fonce);
  color: var(--creme-clair);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(60,38,19,0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.app-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Hero compact sur mobile : on cache eyebrow + lead, on garde un H1 plus serré.
   L'oncle ne lit pas un argumentaire à chaque ouverture, il vient travailler. */
@media (max-width: 640px) {
  .hero-mob { padding: 0 0 8px; }
  .hero-mob .eyebrow,
  .hero-mob .lead { display: none; }
  .hero-mob h1 {
    font-size: 22px;
    line-height: 1.1;
    margin: 0;
  }
  .hero-mob h1 br { display: none; }
  .hero-mob h1 span { display: inline; }
  .hero-mob h1 span::before { content: " "; }
  /* Sur les onglets utilitaires (Devis, Cubage), le hero "marketing" est inutile :
     le label de l'onglet en bottom nav indique déjà où on est. On masque entièrement
     pour gagner de l'espace au-dessus du fold. */
  #tab-conversions > .hero-mob,
  #tab-cubage > .hero-mob {
    display: none;
  }
  /* Le second hero "Conversions m³ · stère · BF" en milieu de Cubage reste visible
     mais en version très compacte. */
  #tab-cubage .hero-mob[style*="margin-top"] h1 {
    font-size: 18px;
  }
}
.lead code, code {
  background: var(--bois-fonce);
  color: var(--creme-clair);
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 13px;
  font-family: ui-monospace, SF Mono, Monaco, monospace;
}
.lead strong { color: var(--bois-fonce); }

/* ============== CARDS MOBILE ============== */
.card-mob {
  background: var(--blanc);
  border-radius: var(--rad-lg);
  padding: 18px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(60,38,19,0.05);
}
.card-mob h3 {
  font-family: var(--font-titre);
  font-weight: 700; font-size: 16px;
  margin: 0 0 14px;
  color: var(--bois-fonce);
  letter-spacing: -0.01em;
}
.card-title-mob {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bois-moyen);
  margin: 0 0 14px;
}

/* Card résultat (fond foncé bois) */
.card-result-mob {
  background: linear-gradient(155deg, var(--bois-fonce) 0%, var(--bois-noir) 100%);
  color: var(--creme);
  border-radius: var(--rad-lg);
  padding: 22px 18px;
  margin-bottom: 14px;
  border: 1px solid var(--bois-fonce);
}
.card-result-mob .result-label {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--beige);
  display: block;
  margin-bottom: 8px;
}
.card-result-mob .result-line {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 18px;
}
.card-result-mob .result-value {
  font-family: var(--font-titre); font-weight: 800;
  font-size: clamp(44px, 11vw, 64px);
  line-height: 1;
  color: var(--blanc);
  letter-spacing: -0.02em;
}
.card-result-mob .result-unit {
  font-family: var(--font-titre);
  font-size: 22px; font-weight: 600;
  color: var(--bois-clair);
}
.card-result-mob .result-meta { display: flex; flex-direction: column; gap: 0; }
.card-result-mob .meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.07);
  font-size: 14px; gap: 12px;
}
.card-result-mob .meta-row:last-child { border-bottom: none; }
.card-result-mob .meta-row span { color: var(--beige); }
.card-result-mob .meta-row span small { display: block; font-size: 11px; opacity: 0.7; margin-top: 2px; }
.card-result-mob .meta-row strong {
  font-family: var(--font-titre); font-weight: 700;
  color: var(--blanc); font-size: 15px; text-align: right;
}
/* Bloc "Autres unités" (stères, BF, cube réel par grume) replié par défaut */
.card-result-mob .meta-extra {
  margin-top: 4px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  padding-top: 4px;
}
.card-result-mob .meta-extra summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 0;
  font-size: 13px;
  color: var(--beige);
  opacity: 0.85;
}
.card-result-mob .meta-extra summary::-webkit-details-marker { display: none; }
.card-result-mob .meta-extra summary::before {
  content: '▸ ';
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.15s ease;
}
.card-result-mob .meta-extra[open] summary::before { transform: rotate(90deg); }

.meth-collapse { margin-top: 16px; border-top: 1px dashed rgba(255,255,255,0.1); padding-top: 14px; }
.meth-collapse summary {
  cursor: pointer;
  font-family: var(--font-titre);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--beige);
  list-style: none;
  padding: 6px 0;
}
.meth-collapse summary::-webkit-details-marker { display: none; }
.meth-collapse summary::before { content: '▸ '; transition: 0.15s; display: inline-block; }
.meth-collapse[open] summary::before { transform: rotate(90deg); }

.meth-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.meth-table th, .meth-table td {
  padding: 8px 6px; text-align: left;
  border-bottom: 1px dashed rgba(255,255,255,0.07);
}
.meth-table th { font-family: var(--font-titre); font-weight: 600; font-size: 10px; letter-spacing: 0.1em; color: var(--bois-clair); text-transform: uppercase; }
.meth-table td:nth-child(2), .meth-table td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.meth-table td:first-child { color: var(--blanc); font-weight: 500; }
.meth-table .ecart-plus { color: #b8e6d3; }
.meth-table .ecart-moins { color: #f0c8b8; }

/* Params advanced collapse */
.params-advanced summary {
  font-family: var(--font-titre); font-weight: 600;
  font-size: 13px; color: var(--vert);
  list-style: none; padding: 4px 0;
  cursor: pointer;
}
.params-advanced summary::-webkit-details-marker { display: none; }
.params-advanced summary::before { content: '▸ '; transition: 0.15s; display: inline-block; }
.params-advanced[open] summary::before { transform: rotate(90deg); }
.params-advanced > .quick-grid { margin-top: 14px; }

/* ============== FIELDS MOBILE ============== */
.field-mob { margin-bottom: 12px; }
.field-mob.hidden { display: none; }
.field-mob:last-child { margin-bottom: 0; }

label, .seg-label {
  display: block;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bois-moyen);
  margin-bottom: 6px;
}

.input-wrap { position: relative; }

/* Steppers +/- pour saisie tactile rapide */
.stepper {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 38px;
  gap: 4px;
  align-items: stretch;
}
.stepper-btn {
  background: var(--gris-clair);
  border: 1.5px solid rgba(60,38,19,0.12);
  border-radius: 10px;
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-titre);
  color: var(--bois-fonce);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  transition: 0.1s;
  line-height: 1;
}
.stepper-btn:active { background: var(--bois-clair); color: var(--blanc); transform: scale(0.95); }
.stepper-btn:hover { border-color: var(--bois-clair); }
input[type="number"], input[type="search"], select {
  width: 100%;
  padding: 14px 16px;
  font-size: 17px;
  font-family: var(--font-corps);
  font-weight: 500;
  border: 1.5px solid rgba(60,38,19,0.12);
  border-radius: 12px;
  background: var(--gris-clair);
  color: var(--bois-fonce);
  transition: 0.15s;
  -moz-appearance: textfield;
  appearance: none;
  -webkit-appearance: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input:focus, select:focus {
  outline: none;
  border-color: var(--bois-clair);
  background: var(--blanc);
  box-shadow: 0 0 0 4px rgba(175,128,87,0.18);
}
.input-wrap .suffix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--bois-moyen); font-weight: 600;
  pointer-events: none;
}
.input-wrap input[type="number"] { padding-right: 48px; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237A6450' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--bois-moyen); line-height: 1.45; }

.checkbox-mob {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-corps);
  text-transform: none; letter-spacing: normal; font-weight: 400;
  font-size: 14.5px; color: var(--bois-fonce);
  cursor: pointer;
  margin-top: 10px;
  padding: 10px;
  background: var(--gris-clair);
  border-radius: 10px;
}
.checkbox-mob input { width: 20px; height: 20px; accent-color: var(--bois-clair); cursor: pointer; flex-shrink: 0; }

/* ============== QUICK GRID (2 colonnes mobile) ============== */
.quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.quick-grid > .field-mob { margin-bottom: 0; }
@media (min-width: 720px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ============== SEGMENT ============== */
.segment {
  display: inline-flex;
  background: var(--gris-clair);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 14px;
}
.segment.full { display: flex; width: 100%; }
.seg-btn {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  /* Padding réduit pour qu'un libellé moyen rentre sans tronquage dans
     un segment 3-boutons sur largeur mobile (ex Diamètre/Rayon/Circonférence). */
  padding: 11px 8px;
  border: none;
  background: transparent;
  color: var(--bois-moyen);
  cursor: pointer;
  border-radius: 999px;
  transition: 0.15s;
  /* flex: 1 1 0 + min-width: 0 force tous les boutons à la même largeur,
     même quand leurs textes ont des longueurs différentes (sinon flex distribue
     à partir de la largeur intrinsèque et on a des boutons inégaux). */
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.seg-btn:hover { color: var(--bois-fonce); }
.seg-btn.active { background: var(--bois-fonce); color: var(--creme-clair); }

/* ============== BIG VISU CANVAS ============== */
.visu-wrap {
  position: relative;
  background: linear-gradient(155deg, var(--bois-fonce) 0%, var(--bois-noir) 100%);
  border-radius: var(--rad-lg);
  margin-bottom: 14px;
  padding: 14px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--bois-fonce);
  aspect-ratio: 1 / 1;
  max-width: 600px;
  margin-left: auto; margin-right: auto;
}
.visu-canvas {
  width: 100%; height: 100%;
  display: block;
  border-radius: 12px;
}
.visu-onboarding {
  position: absolute;
  inset: 14px;
  background: rgba(60,38,19,0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: var(--creme);
  z-index: 10;
}
.visu-onboarding.hidden { display: none; }
.visu-onboarding svg { color: var(--bois-clair); }
.visu-onboarding h3 {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 20px;
  margin: 4px 0 0;
  color: var(--blanc);
}
.visu-onboarding p {
  font-size: 14px;
  color: var(--beige);
  max-width: 320px;
  margin: 0 0 8px;
  line-height: 1.5;
}
.visu-onboarding p strong { color: var(--blanc); }

.fullscreen-btn {
  position: absolute;
  top: 24px; right: 24px;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--creme);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: 0.15s;
}
.fullscreen-btn:active { transform: scale(0.95); background: rgba(255,255,255,0.2); }
.visu-badge {
  position: absolute;
  top: 24px; left: 24px;
  background: rgba(255,255,255,0.92);
  color: var(--bois-fonce);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ============== VERDICT ============== */
.verdict {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--rad);
  background: var(--bg-ok);
  margin-bottom: 14px;
  border: 1px solid rgba(0,131,97,0.2);
}
.verdict.warn { background: var(--bg-warn); border-color: rgba(201,138,22,0.3); }
.verdict.erreur { background: var(--bg-erreur); border-color: rgba(185,68,52,0.3); }
.verdict-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ok); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px;
  flex-shrink: 0;
}
.verdict.warn .verdict-icon { background: var(--warn); }
.verdict.erreur .verdict-icon { background: var(--erreur); }
.verdict-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.verdict-text strong {
  font-family: var(--font-titre);
  font-weight: 700; font-size: 15.5px;
  color: var(--bois-fonce);
  line-height: 1.2;
}
.verdict-text span { color: var(--bois-moyen); font-size: 13.5px; line-height: 1.35; }

/* ============== RESULTS GRID ============== */
.results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.result-tile {
  background: var(--blanc);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(60,38,19,0.05);
  display: flex; flex-direction: column;
  gap: 4px;
}
.result-tile.big {
  grid-column: span 2;
  background: linear-gradient(155deg, var(--bois-fonce) 0%, var(--bois-noir) 100%);
  color: var(--creme);
  border-color: var(--bois-fonce);
}
.rt-label {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bois-moyen);
}
.result-tile.big .rt-label { color: var(--beige); }
.result-tile strong {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 22px;
  color: var(--bois-fonce);
  line-height: 1;
}
.result-tile.big strong {
  color: var(--bois-clair);
  font-size: 36px;
}
.result-tile small {
  font-size: 12px;
  color: var(--bois-moyen);
  margin-top: 4px;
}
.result-tile.big small { color: var(--beige); }

/* ============== MODE SWITCH ============== */
.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.mode-btn {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 14px;
  padding: 18px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(60,38,19,0.12);
  background: var(--blanc);
  color: var(--bois-moyen);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: 0.15s;
  box-shadow: var(--shadow-soft);
}
.mode-btn:active { transform: scale(0.98); }
.mode-btn.active {
  background: var(--bois-fonce);
  color: var(--creme-clair);
  border-color: var(--bois-fonce);
}
.mode-btn svg { flex-shrink: 0; }

.hidden { display: none !important; }

/* ============== PHOTO MODE ============== */
.photo-mode { display: flex; flex-direction: column; gap: 14px; }
.photo-canvas-wrap {
  position: relative;
  background: var(--bois-fonce);
  border-radius: var(--rad-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  box-shadow: var(--shadow-card);
}
.photo-canvas {
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
}
.photo-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: var(--creme);
}
.photo-empty svg { color: var(--bois-clair); }
.photo-empty h3 {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 18px;
  margin: 4px 0 0;
  color: var(--blanc);
}
.photo-empty p {
  font-size: 14px;
  color: var(--beige);
  max-width: 320px;
  margin: 0 0 12px;
}

.big-btn {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: 0.15s;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.big-btn.primary {
  background: var(--vert);
  color: var(--blanc);
}
.big-btn.primary:active { transform: scale(0.98); background: var(--vert-fonce); }
.big-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ghost-btn {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: 10px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.25);
  color: var(--creme);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: 0.15s;
}
.ghost-btn:active { background: rgba(255,255,255,0.08); }

/* Step tabs photo */
.step-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background: var(--gris-clair);
  padding: 4px;
  border-radius: 12px;
}
.step-tab {
  flex: 1;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 12.5px;
  padding: 10px 8px;
  border: none;
  background: transparent;
  color: var(--bois-moyen);
  cursor: pointer;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.step-tab.active {
  background: var(--bois-fonce);
  color: var(--creme-clair);
}
.step-n {
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.step-tab:not(.active) .step-n { background: rgba(60,38,19,0.1); color: var(--bois-fonce); }

.step-content { background: var(--blanc); border-radius: var(--rad-lg); padding: 18px 16px; box-shadow: var(--shadow-card); border: 1px solid rgba(60,38,19,0.05); }
.step-pane { display: none; }
.step-pane.active { display: block; animation: fadeUp 0.25s ease; }
.step-pane h3 {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--bois-fonce);
}
.step-pane p {
  font-size: 14px;
  color: var(--bois-moyen);
  margin: 0 0 14px;
}
.step-pane p strong { color: var(--bois-fonce); }
.step-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.step-row > .field-mob { flex: 1; min-width: 180px; margin-bottom: 0; }
.step-row .ghost-btn { color: var(--bois-moyen); border-color: rgba(60,38,19,0.18); }
.step-row .ghost-btn:active { background: rgba(60,38,19,0.06); }
.step-row .big-btn { flex: 1; }

.result-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(60,38,19,0.1);
}
.rs-item {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  background: var(--gris-clair);
  border-radius: 10px;
}
.rs-item span {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bois-moyen);
}
.rs-item strong {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 18px;
  color: var(--bois-fonce);
  line-height: 1;
}

/* ============== MODAL FULLSCREEN ============== */
.modal-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bois-noir);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-fullscreen.hidden { display: none; }
.modal-fullscreen canvas {
  max-width: 100%; max-height: 100%;
  display: block;
}
.modal-close {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  right: 20px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--creme);
  font-size: 28px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-info {
  position: absolute;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 20px; right: 20px;
  background: rgba(255,255,255,0.92);
  color: var(--bois-fonce);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  text-align: center;
  font-family: var(--font-titre);
  font-weight: 600;
}

/* ============== PRODUITS LIST ============== */
.card-help {
  font-size: 13px;
  color: var(--bois-moyen);
  line-height: 1.5;
  margin: 0 0 14px;
}
.card-help strong { color: var(--bois-fonce); }

.produits-list {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.produit-item {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  background: var(--gris-clair);
  border-radius: 10px;
  padding: 10px;
  border: 1.5px solid transparent;
  transition: 0.15s;
}
.produit-item.dragging { opacity: 0.5; }
.produit-priorite {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titre);
  font-weight: 800; font-size: 13px;
  color: var(--blanc);
  flex-shrink: 0;
}
.produit-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.produit-fields .row1 {
  display: flex; gap: 6px; align-items: center;
}
.produit-fields .row1 input.nom {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(60,38,19,0.12);
  background: var(--blanc);
  color: var(--bois-fonce);
  font-family: var(--font-titre);
  font-weight: 600;
  width: 100%;
}
.produit-fields .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.produit-fields .row2 .mini {
  padding: 8px 10px;
  padding-right: 28px;
  font-size: 13px;
  border-radius: 8px;
  border: 1.5px solid rgba(60,38,19,0.12);
  background: var(--blanc);
  color: var(--bois-fonce);
  width: 100%;
}
.produit-fields .row2 .mini-wrap { position: relative; }
.produit-fields .row2 .mini-wrap .mini-suffix {
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; color: var(--bois-moyen);
  font-weight: 600;
  pointer-events: none;
}
.produit-supprimer {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(185,68,52,0.10);
  color: var(--erreur);
  border: none;
  cursor: pointer;
  font-size: 18px; font-weight: 700;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: 0.15s;
  flex-shrink: 0;
  /* Marge gauche pour éviter le mauvais clic depuis l'input largeur */
  margin-left: 10px;
}
.produit-supprimer:active { background: rgba(185,68,52,0.20); transform: scale(0.95); }
.produit-supprimer:disabled { opacity: 0; pointer-events: none; }

/* Champ demande client (ajouté en mode demande) */
.produit-demande {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(60,38,19,0.12);
}
.produit-demande input.demande-qty {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(60,38,19,0.12);
  background: var(--blanc);
  color: var(--bois-fonce);
  font-family: var(--font-titre);
  font-weight: 600;
  width: 100%;
}
.produit-demande input.demande-qty::placeholder {
  color: rgba(60,38,19,0.35);
  font-weight: 400;
}
.produit-demande select.demande-unit {
  padding: 8px 24px 8px 8px;
  font-size: 12.5px;
  border-radius: 8px;
  border: 1.5px solid rgba(60,38,19,0.12);
  background-color: var(--gris-clair);
  background-position: right 8px center;
  font-family: var(--font-titre);
  font-weight: 600;
  color: var(--bois-fonce);
  width: 100%;
}
.produit-demande-label {
  grid-column: 1 / -1;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bois-moyen);
  margin-bottom: 2px;
}

.produits-actions {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-bottom: 6px;
}
.ghost-btn-light {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 13.5px;
  padding: 11px 16px;
  background: transparent;
  border: 1.5px dashed rgba(60,38,19,0.25);
  border-radius: 10px;
  color: var(--bois-moyen);
  cursor: pointer;
  transition: 0.15s;
  text-align: center;
}
.ghost-btn-light:hover { border-color: var(--bois-clair); color: var(--bois-fonce); background: rgba(175,128,87,0.05); }
.ghost-btn-light:active { transform: scale(0.99); }

.produits-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.preset-btn {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 11px;
  padding: 7px 11px;
  background: var(--blanc);
  border: 1.5px solid rgba(60,38,19,0.12);
  border-radius: 999px;
  color: var(--bois-moyen);
  cursor: pointer;
  transition: 0.15s;
  white-space: nowrap;
}
.preset-btn:active { transform: scale(0.97); border-color: var(--bois-clair); color: var(--bois-fonce); }

/* Grille de presets en cards : 2×2 sur mobile, lisible et tactile.
   L'oncle clique sur "Planche" et c'est ajouté à sa liste sans toucher un input. */
.presets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 14px;
}
.preset-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 16px;
  background: var(--blanc);
  border: 1.5px solid rgba(60,38,19,0.10);
  border-radius: 14px;
  font-family: var(--font-titre);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  min-height: 64px;
}
.preset-card:hover { border-color: var(--bois-clair); transform: translateY(-1px); }
.preset-card:active { transform: scale(0.98); }
.preset-card-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--bois-fonce);
  letter-spacing: -0.01em;
}
.preset-card-dim {
  font-family: var(--font-corps);
  font-weight: 500;
  font-size: 12px;
  color: var(--bois-moyen);
}
.preset-card-custom {
  background: rgba(175,128,87,0.06);
  border-style: dashed;
}
.preset-card-custom .preset-card-name { color: var(--bois-moyen); }

/* Bilan multi-produits */
.produits-bilan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.produit-bilan-item {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--blanc);
  border-radius: 10px;
  border: 1px solid rgba(60,38,19,0.06);
  font-size: 14px;
}
.produit-bilan-item .swatch {
  width: 14px; height: 14px;
  border-radius: 4px;
}
.produit-bilan-item .pb-name {
  font-family: var(--font-titre);
  font-weight: 600;
  color: var(--bois-fonce);
  font-size: 14px;
}
.produit-bilan-item .pb-dim {
  font-size: 11.5px;
  color: var(--bois-moyen);
  font-weight: 500;
}
/* Badge satisfaction (qty voulue vs qty obtenue) */
.produit-bilan-item .pb-satisf {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.produit-bilan-item .pb-satisf.ok {
  background: rgba(0,131,97,0.12);
  color: var(--vert-fonce);
}
.produit-bilan-item .pb-satisf.ko {
  background: rgba(180,40,40,0.10);
  color: #b42828;
}
.produit-bilan-item .pb-count {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 18px;
  color: var(--bois-fonce);
}
.produit-bilan-item .pb-count small {
  font-size: 11px;
  color: var(--bois-moyen);
  font-weight: 500;
  margin-left: 3px;
}
.produit-bilan-item.auto .pb-name::after {
  content: 'auto';
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--vert-clair);
  color: var(--vert-fonce);
  border-radius: 999px;
  vertical-align: middle;
  font-weight: 700;
}

/* Toggle "Valoriser les chutes" */
.toggle-valoriser {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--gris-clair);
  border-radius: 12px;
  cursor: pointer;
  transition: 0.15s;
  border: 1.5px solid transparent;
}
.toggle-valoriser:hover { background: rgba(175,128,87,0.08); border-color: rgba(175,128,87,0.18); }
.toggle-valoriser input { display: none; }
.toggle-track {
  position: relative;
  display: block;
  width: 44px; height: 26px;
  background: rgba(60,38,19,0.18);
  border-radius: 999px;
  flex-shrink: 0;
  transition: 0.2s;
  margin-top: 1px;
}
.toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: var(--blanc);
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.toggle-valoriser input:checked + .toggle-track {
  background: var(--vert);
}
.toggle-valoriser input:checked + .toggle-track .toggle-thumb {
  transform: translateX(18px);
}
.toggle-text {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.toggle-text strong {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 14px;
  color: var(--bois-fonce);
}
.toggle-text small {
  font-size: 12px;
  color: var(--bois-moyen);
  line-height: 1.45;
}
.toggle-text small em {
  color: var(--bois-fonce);
  font-style: normal;
  font-weight: 600;
}
.pb-satisfaction {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.pb-satisfaction.ok { background: var(--bg-ok); color: var(--ok); }
.pb-satisfaction.manque { background: var(--bg-erreur); color: var(--erreur); }
.pb-satisfaction.neutre { background: var(--gris-clair); color: var(--bois-moyen); }

/* Podium top 3 */
.podium {
  display: none; /* Top 3 retiré : on n'affiche plus que la meilleure stratégie. */
  background: var(--blanc);
  border-radius: var(--rad-lg);
  padding: 14px 14px 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(60,38,19,0.05);
}
.podium-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.podium-title {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bois-moyen);
}
.podium-meta {
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: 11px;
  color: var(--vert);
  letter-spacing: 0.04em;
}
.podium-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.podium-option {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 12px 8px 10px;
  background: var(--gris-clair);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: 0.15s;
  position: relative;
  font-family: var(--font-titre);
}
.podium-option:active { transform: scale(0.97); }
.podium-option.active {
  background: var(--bois-fonce);
  color: var(--creme);
  border-color: var(--bois-fonce);
}
.podium-option.active .po-rank { color: var(--bois-clair); }
.podium-option.active .po-pieces { color: var(--blanc); }
.podium-option.active .po-name { color: var(--beige); }
.po-rank {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bois-clair);
}
.po-pieces {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 22px;
  color: var(--bois-fonce);
  line-height: 1;
}
.po-pieces small { font-size: 11px; font-weight: 600; opacity: 0.7; margin-left: 2px; }
.po-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--bois-moyen);
  line-height: 1.2;
  margin-top: 4px;
}
.po-medal {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  border: 2px solid var(--blanc);
}
.po-rank-1 .po-medal { background: #FFD28C; color: #5A3500; }
.po-rank-2 .po-medal { background: #DBC9B9; color: #5A3500; }
.po-rank-3 .po-medal { background: #C49770; color: #fff; }

/* Liste prix devis */
.prix-list { display: flex; flex-direction: column; gap: 8px; }
.prix-item {
  display: grid;
  grid-template-columns: 14px minmax(0,1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--gris-clair);
  border-radius: 10px;
}
.prix-item .swatch { width: 14px; height: 14px; border-radius: 4px; }
.prix-item .px-name {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 14px;
  color: var(--bois-fonce);
  line-height: 1.2;
}
.prix-item .px-name small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--bois-moyen);
  margin-top: 2px;
}
.prix-item .px-input-wrap {
  position: relative;
  width: 90px;
}
.prix-item input.px-input {
  width: 100%;
  padding: 8px 30px 8px 10px;
  font-size: 13px;
  border-radius: 8px;
  border: 1.5px solid rgba(60,38,19,0.12);
  background: var(--blanc);
  font-family: var(--font-titre);
  font-weight: 600;
  color: var(--bois-fonce);
  text-align: right;
}
.prix-item .px-input-wrap small.unit {
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; color: var(--bois-moyen); font-weight: 600;
  pointer-events: none;
}
.prix-item .px-total {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 16px;
  color: var(--vert);
  min-width: 70px;
  text-align: right;
}

/* Stratégie box */
.strategie-box {
  background: linear-gradient(155deg, var(--vert-fonce) 0%, var(--vert) 100%);
  color: var(--blanc);
  border-radius: var(--rad-lg);
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex; flex-direction: column;
  gap: 4px;
}
/* Stratégie en sous-titre compact (mode photo) */
.strat-inline {
  margin: 6px 0 8px;
  font-size: 13px;
  color: var(--bois-moyen);
  text-align: center;
  line-height: 1.35;
}
.strat-inline span { font-weight: 600; color: var(--bois-fonce); }
.strat-inline[hidden] { display: none; }
.strategie-box.big { padding: 18px 22px; }
.strategie-box .rt-label,
.strategie-box .rs-item-lbl {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.strategie-box strong {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 18px;
  color: var(--blanc);
  letter-spacing: -0.01em;
}
.strategie-box.big strong { font-size: 22px; }
.strategie-box small {
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  margin-top: 4px;
}

/* Result strip étendue */
.rs-item-lbl {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bois-moyen);
}

/* Contour modes (étape 1 photo) */
.contour-modes {
  display: flex;
  background: var(--gris-clair);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 14px;
}
.contour-modes .seg-btn { flex: 1; padding: 10px 12px; font-size: 12.5px; }

.params-debit { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(60,38,19,0.1); }

/* ============== MODAL AIDE ============== */
.modal-aide {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(26,15,8,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.modal-aide.hidden { display: none; }
.modal-aide-inner {
  position: relative;
  background: var(--creme-clair);
  border-radius: var(--rad-lg);
  padding: 32px 22px 28px;
  max-width: 600px;
  width: 100%;
  margin-top: max(20px, env(safe-area-inset-top));
  margin-bottom: max(20px, env(safe-area-inset-bottom));
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.modal-aide .modal-close {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--bois-fonce);
  color: var(--creme);
  border: none;
}
.aide-header {
  text-align: center;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(60,38,19,0.15);
}
.aide-header h2 {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(22px, 5.5vw, 32px);
  color: var(--bois-fonce);
  margin: 4px 0 0;
  letter-spacing: -0.01em;
}
.aide-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.aide-biblio-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.aide-biblio-actions .ghost-btn-light {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  font-size: 14px;
}
/* Bouton "← Retour" en haut des tabs hors-nav (essences, normes) */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid rgba(60,38,19,0.15);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: var(--font-corps);
  font-size: 13px;
  font-weight: 600;
  color: var(--bois-fonce);
  cursor: pointer;
  margin: 0 0 12px;
  transition: background 0.15s ease;
}
.back-btn:hover { background: rgba(60,38,19,0.05); }
.back-btn:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
.aide-card {
  background: var(--blanc);
  border-radius: 14px;
  padding: 16px 16px 14px 56px;
  position: relative;
  border: 1px solid rgba(60,38,19,0.06);
  box-shadow: var(--shadow-soft);
}
.aide-num {
  position: absolute;
  left: 14px; top: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bois-fonce);
  color: var(--bois-clair);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titre);
  font-weight: 800; font-size: 14px;
}
.aide-card h3 {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 15px;
  color: var(--bois-fonce);
  margin: 0 0 6px;
}
.aide-card h3 strong {
  color: var(--vert);
}
.aide-card p {
  font-size: 13.5px;
  color: var(--bois-moyen);
  margin: 0;
  line-height: 1.5;
}
.aide-card p code {
  font-size: 12px;
  padding: 1px 5px;
}
.aide-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--bois-moyen);
  line-height: 1.55;
}
.aide-steps li { margin-bottom: 4px; }
.aide-steps li::marker { color: var(--bois-clair); font-weight: 700; }
.aide-footer {
  text-align: center;
  font-size: 12px;
  color: var(--bois-moyen);
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(60,38,19,0.15);
}

/* ============== ESSENCES (mobile cards) ============== */
.filter-pills { display: flex; gap: 6px; margin-top: 10px; }
.pill {
  font-family: var(--font-titre); font-weight: 600; font-size: 12.5px;
  padding: 8px 14px; border: 1.5px solid rgba(60,38,19,0.12);
  background: transparent; color: var(--bois-moyen);
  border-radius: 999px; cursor: pointer; transition: 0.15s;
  flex: 1; white-space: nowrap;
}
.pill:hover { border-color: var(--bois-clair); color: var(--bois-fonce); }
.pill.active { background: var(--bois-fonce); color: var(--creme-clair); border-color: var(--bois-fonce); }

.empty-state {
  text-align: center;
  padding: 36px 20px;
  background: var(--blanc);
  border-radius: 14px;
  border: 1px dashed rgba(60,38,19,0.15);
  color: var(--bois-moyen);
}
.empty-state svg { color: var(--bois-clair); margin-bottom: 10px; }
.empty-state h3 {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 16px;
  color: var(--bois-fonce);
  margin: 0 0 6px;
}
.empty-state p {
  font-size: 13.5px;
  color: var(--bois-moyen);
  margin: 0;
  line-height: 1.5;
}
.empty-state strong { color: var(--bois-fonce); }

.essences-list { display: flex; flex-direction: column; gap: 10px; }
.essence-card {
  background: var(--blanc);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(60,38,19,0.05);
}
.essence-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 10px;
}
.essence-name {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 16px;
  color: var(--bois-fonce);
  line-height: 1.2;
}
.essence-latin {
  font-style: italic;
  color: var(--bois-moyen);
  font-size: 12.5px;
  margin-top: 2px;
}
.cat-tag {
  display: inline-block; padding: 3px 10px;
  font-family: var(--font-titre); font-weight: 600; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: 999px;
  flex-shrink: 0;
}
.cat-feuillu { background: rgba(175,128,87,0.15); color: var(--bois-fonce); }
.cat-resineux { background: rgba(0,131,97,0.12); color: var(--vert-fonce); }

.essence-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.essence-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(60,38,19,0.08);
}
.essence-stat .lbl {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bois-moyen);
}
.essence-stat .val {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 14px;
  color: var(--bois-fonce);
}
.essence-usages {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(60,38,19,0.08);
  font-size: 13px;
  color: var(--bois-moyen);
  line-height: 1.45;
}
.dura-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }

/* ============== CONVERSIONS ============== */
.conv-out {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--gris-clair);
  border-radius: 10px;
  font-size: 14px;
  color: var(--bois-fonce);
  line-height: 1.6;
}
.conv-out strong { color: var(--vert); font-family: var(--font-titre); font-weight: 700; font-size: 16px; }
.conv-out.muted-out { color: var(--bois-moyen); font-size: 12.5px; }
.conv-out .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border-bottom: 1px dashed rgba(60,38,19,0.08); }
.conv-out .row:last-child { border-bottom: none; }
.conv-out .row > strong { font-size: 15px; }

/* ============== NORMES ============== */
.formula-box {
  background: var(--gris-clair);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 18px;
  text-align: center;
  border: 1px solid rgba(60,38,19,0.08);
}
.formula-eq {
  font-family: 'Times New Roman', serif;
  font-size: clamp(28px, 8vw, 38px);
  color: var(--bois-fonce);
  margin: 8px 0 16px;
  font-weight: 500;
}
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; padding: 0 6px; }
.frac .num, .frac .den { display: block; padding: 3px 10px; }
.frac .num { border-bottom: 2px solid var(--bois-fonce); }
.frac .den { font-size: 0.85em; }
.formula-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  font-size: 12.5px; color: var(--bois-moyen);
}
.formula-legend strong { color: var(--bois-fonce); font-family: var(--font-titre); }

#normeRegles { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.regle-item h4 {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 14px;
  color: var(--bois-fonce);
  margin: 0 0 5px;
}
.regle-item p { margin: 0; font-size: 13.5px; color: var(--bois-moyen); line-height: 1.55; }

.meth-block { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed rgba(60,38,19,0.1); }
.meth-block:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.meth-block h4 { font-family: var(--font-titre); font-weight: 700; font-size: 14px; color: var(--bois-fonce); margin: 0 0 5px; }
.meth-block p { margin: 0; font-size: 13.5px; color: var(--bois-moyen); line-height: 1.55; }

.glossaire { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.glossaire dt { font-family: var(--font-titre); font-weight: 700; color: var(--bois-fonce); font-size: 14px; }
.glossaire dd { margin: 3px 0 0; font-size: 13px; color: var(--bois-moyen); line-height: 1.5; }

/* ============== BOTTOM NAV (mobile-first) ============== */
.bottomnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--bottom-nav-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(244,236,224,0.95);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid rgba(60,38,19,0.1);
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -4px 20px rgba(60,38,19,0.06);
}
.bn-btn {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: var(--bois-moyen);
  font-family: var(--font-titre);
  font-weight: 600;
  /* Police lisible pour public 60+ : 12.5px au lieu de 10.5px */
  font-size: 12.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 8px 4px 6px;
  transition: color 0.15s;
}
.bn-btn:active { transform: scale(0.97); }
.bn-btn.active {
  color: var(--bois-fonce);
}
.bn-btn.active svg {
  color: var(--vert);
}
.bn-btn svg {
  transition: 0.15s;
}

/* ============== DESKTOP REFINEMENTS ============== */
@media (min-width: 720px) {
  main { padding: 24px 32px; max-width: 1280px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .results-grid { grid-template-columns: repeat(3, 1fr); }
  .result-tile.big { grid-column: span 3; }
  .essences-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .visu-wrap { aspect-ratio: 4 / 3; max-width: 800px; }
  /* Hero "marketing" caché sur TOUS les onglets en desktop :
     l'onglet actif en haut suffit pour situer l'utilisateur, on récupère
     ~130px de hauteur pour le vrai contenu (visu, formulaires). */
  #tab-decoupe > .hero-mob,
  #tab-conversions > .hero-mob,
  #tab-cubage > .hero-mob {
    display: none;
  }
  /* Preset cards : 4 colonnes sur desktop au lieu de 2×2 */
  .presets-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Mode-switch (Saisir Ø / Photo) masqué sur desktop : la prise de photo en
     bout de grume se fait avec un téléphone (caméra), pas un ordi de bureau.
     Sur desktop on reste sur le mode "Saisir Ø" qui est la valeur par défaut. */
  .mode-switch { display: none; }
  /* Forcer le mode manuel à être visible (au cas où l'utilisateur aurait
     basculé en mode Photo avant de passer sur desktop) */
  #photoMode { display: none; }
  #manuelMode { display: grid; }
}

@media (min-width: 980px) {
  main { padding: 28px 32px; }
  .hero-mob h1 { font-size: clamp(32px, 4vw, 46px); }
  .lead { font-size: 16px; max-width: 760px; }

  /* En desktop, le `gap` du grid prime sur les margin-bottom des cards.
     Sinon les marges s'additionnent au gap → vides de 40-60px partout. */
  #tab-decoupe .manuel-mode > *,
  #tab-decoupe .photo-mode > *,
  #tab-conversions > *,
  #tab-cubage > * {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }

  /* === DÉBIT : 2 colonnes vraiment propres, zéro blanc ===
     `grid-auto-rows: min-content` force chaque row à la taille de son contenu,
     pas plus. La visu prend "span 99" : sa hauteur naturelle (656px) est répartie
     virtuellement sur 99 rows, donc elle n'impose plus la hauteur de la 1ère row.
     Résultat : "Votre grume" en col 2 fait juste 228px (pas 656), action-bar
     juste en dessous, etc. Plus de trou de 428px sous "Votre grume". */
  #tab-decoupe.tab.active .manuel-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    gap: 14px 32px;
    align-items: start;
  }
  #tab-decoupe .manuel-mode .visu-wrap {
    grid-column: 1;
    grid-row: 1 / span 99;
    position: sticky;
    top: calc(var(--topbar-h) + 20px);
    aspect-ratio: 1 / 1;
    max-width: 100%;
    width: 100%;
    align-self: start;
  }
  #tab-decoupe .manuel-mode > *:not(.visu-wrap) {
    grid-column: 2;
  }
  /* Mode photo : même logique */
  #tab-decoupe.tab.active .photo-mode:not(.hidden) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    gap: 14px 32px;
    align-items: start;
  }
  #tab-decoupe .photo-mode .photo-canvas-wrap {
    grid-column: 1;
    grid-row: 1 / span 99;
    position: sticky;
    top: calc(var(--topbar-h) + 20px);
    align-self: start;
  }
  #tab-decoupe .photo-mode > *:not(.photo-canvas-wrap) {
    grid-column: 2;
  }

  /* === DEVIS : layout 2 colonnes — top-level grid === */
  #tab-conversions.tab.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 14px;
    grid-auto-rows: min-content;
    align-items: start;
    grid-auto-flow: dense;
  }
  /* Hero en pleine largeur */
  #tab-conversions > .hero-mob {
    grid-column: 1 / -1;
  }
  /* Tout par défaut en colonne 1 */
  #tab-conversions > .card-mob,
  #tab-conversions > .card-result-mob {
    grid-column: 1;
  }
  /* Forcer ces éléments en colonne 2 (par data-col attribute) */
  #tab-conversions > [data-col="2"] {
    grid-column: 2;
  }
  /* Wrapper col 2 (Devis) : prend toutes les rows, indépendant de col 1 */
  #tab-conversions > .dvs-col-right {
    grid-column: 2;
    grid-row: 1 / span 99;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* === CUBAGE : 2 colonnes équilibrées ===
     Mesures (col 1) + Cube NF result sticky (col 2) au-dessus,
     puis hero "Conversions" full-width, puis les 6 cards conversions
     distribuées automatiquement entre les 2 colonnes. */
  #tab-cubage.tab.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 32px;
    grid-auto-rows: min-content;
    grid-auto-flow: dense;
    align-items: start;
  }
  #tab-cubage > .hero-mob {
    grid-column: 1 / -1;
  }
  /* Première card-mob = "Mesures", en col 1 row 1 */
  #tab-cubage > .card-mob:first-of-type {
    grid-column: 1;
    grid-row: 1;
  }
  /* Card result NF = sticky en col 2, prend toutes les rows pour ne pas
     contraindre la hauteur de la row 1 (sinon "Mesures" aurait du vide en bas). */
  #tab-cubage > .card-result-mob {
    grid-column: 2;
    grid-row: 1 / span 99;
    align-self: start;
    position: sticky;
    top: calc(var(--topbar-h) + 20px);
  }
  /* Toutes les autres cards (conversions) : auto-flow remplit alternativement
     les 2 colonnes — pas de col 1 surchargée. */
  #tab-cubage > .card-mob:not(:first-of-type) {
    grid-column: auto;
  }

  /* === NORMES : 2 colonnes pour les cards info === */
  #tab-normes.tab.active {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start;
  }
  #tab-normes .hero-mob {
    grid-column: 1 / -1;
  }

  /* Essences : 3 colonnes */
  .essences-list {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Action bar : 3 boutons par ligne en desktop */
  .action-bar {
    gap: 12px;
  }
  .action-btn {
    padding: 12px 16px;
    font-size: 14px;
  }

  /* === Bottom-nav transformée en top-tabs sur desktop ===
     L'onglet est mieux placé en haut près du logo qu'en bas (mobile pattern).
     Style "tabs" sobre : pas de bg pill, juste un soulignement vert pour l'actif. */
  .bottomnav {
    position: fixed;
    top: 0;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    height: var(--topbar-h);
    width: auto;
    padding: 0;
    border-top: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    gap: 4px;
    align-items: stretch;
  }
  .bn-btn {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 0;
    font-size: 13px;
    height: 100%;
    color: var(--bois-moyen);
    position: relative;
  }
  .bn-btn.active {
    background: transparent;
    color: var(--bois-fonce);
  }
  .bn-btn.active::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    background: var(--vert);
    border-radius: 2px;
  }
  .bn-btn.active svg { color: var(--bois-fonce); }
  .bn-btn svg { width: 17px; height: 17px; }
  /* Plus besoin de réserver l'espace pour la bottom-nav */
  body { padding-bottom: 0; }
  main { padding-top: 12px; }

  /* Visu Débit : prend toute la largeur de la colonne 1 du grid */
  #tab-decoupe .manuel-mode .visu-wrap {
    width: 100%;
    max-width: none;
  }
}

/* Très large : juste plus de padding extérieur, on garde gap=14 et 1fr 1fr du @980 */
@media (min-width: 1280px) {
  main { padding: 32px 40px; }
}