/* Calculateur de volume : bloc repris de ~/georgesbox-calculateur-site (calculateur.css, à partir de la ligne 128). Chargé seulement sur la page du calculateur. */
/* Calculateur de volume (composant volume-calculator.njk, script /assets/js/volume-calculator.js)
   Pleine largeur : le choix des objets, puis le résultat (box, vue 3D, liste). Barre de résumé fixée en bas. */
.vc {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px;
  /* Teintes des faces de la vue 3D : turquoise de la marque pour les meubles, crème foncée « carton » pour le reste. */
  --obj-t: var(--turq-500); --obj-l: #6ec7cd; --obj-r: #52aeb4;
  --box-t: #f3dcb9; --box-l: #e8c99c; --box-r: #dbb784; --box-line: #c79f6a;
  --wall-l: #f4efe8; --wall-r: #ece5db; --rib: #e2d9cc; --floor: #e4ddd2;
}
.vc-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.vc-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 8px; }
@media (min-width: 900px) { .vc-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; } }
.vc-find { display: grid; gap: 8px; min-width: 0; }
.vc-label { font: 650 1rem/1.3 var(--font-display); }
.vc-search { width: 100%; min-width: 0; min-height: 52px; padding: 0 20px; font: inherit; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); }
.vc-options { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: 10px; }
.vc-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; line-height: 1.4; }
.vc-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--brand-strong); }
.vc-check small { display: block; color: var(--ink-soft); font-size: .88rem; }
.vc-empty { margin: 0; padding: 14px 16px; border-radius: var(--r-sm); background: var(--bg-soft); }
.vc-cat { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.vc-cat > summary { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 20px; cursor: pointer; list-style: none; font: 650 1.08rem/1.3 var(--font-display); }
.vc-cat > summary::-webkit-details-marker { display: none; }
.vc-cat > summary svg { width: 20px; height: 20px; margin-left: auto; }
.vc-cat[open] > summary svg { transform: rotate(180deg); }
.vc-cat > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-lg); }
.vc-badge { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--brand); color: var(--ink); font: 700 .85rem/26px var(--font); text-align: center; }
.vc-badge[hidden] { display: none; }
/* Objets d'une catégorie : en grille sur grand écran, pour profiter de la largeur. */
.vc-items { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 6px; }
@media (min-width: 700px) { .vc-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .vc-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Objets au format pilule, comme les liens « Le détail de chaque box » de la page Tarifs */
.vc-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 6px 8px 6px 18px; border: 1px solid var(--line); border-radius: 27px; background: var(--surface); transition: background-color .15s ease, border-color .15s ease; }
@media (hover: hover) and (pointer: fine) { .vc-item:hover { border-color: var(--turquoise); } }
.vc-item.is-on { background: var(--brand-soft); border-color: var(--turquoise); }
.vc-item[hidden] { display: none; }
.vc-name { min-width: 0; font: 600 1rem/1.25 var(--font-display); }
.vc-name small { display: block; color: var(--ink-soft); font: 500 .8rem/1.3 var(--font-display); }
/* Très petit téléphone (320 px) : un peu moins de marges pour que nom et boutons tiennent sur la ligne. */
@media (max-width: 359px) {
  .vc-items { padding: 0 8px 8px; }
  .vc-item { gap: 6px; padding: 6px 6px 6px 14px; }
}
.vc-qty { display: flex; align-items: center; gap: 2px; flex: none; }
.vc-qty input, .vc-qty .vc-q { width: 2.2em; min-height: 44px; text-align: center; font: 650 1rem/44px var(--font-display); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); -moz-appearance: textfield; }
.vc-qty input::-webkit-inner-spin-button, .vc-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.vc-step { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--bg-soft); color: var(--ink); font: 600 1.25rem/1 var(--font); cursor: pointer; transition: background-color .15s ease, transform .12s var(--ease-out); }
.vc-step[data-step="1"] { color: var(--action-text); }
@media (hover: hover) and (pointer: fine) { .vc-step:hover { background: var(--brand); color: var(--ink); } }
@media (prefers-reduced-motion: no-preference) { .vc-step:active:not(:disabled) { transform: scale(.95); } }
/* Zone tactile de 44 px autour du rond de 38 px */
.vc-step::after { content: ""; position: absolute; inset: -3px; }
.is-on .vc-step { background: var(--surface); }
.vc-step:focus-visible, .vc-qty input:focus-visible, .vc-search:focus-visible, .vc-check input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vc-step:disabled, .vc-qty input:disabled { opacity: .45; cursor: not-allowed; }
.vc-custom-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 20px 18px; }
@media (min-width: 900px) { .vc-custom-form { grid-template-columns: 2fr repeat(4, 1fr); align-items: end; } }
.vc-custom-form .btn { grid-column: 1 / -1; justify-self: start; }
.vc-help, .vc-field-name, .vc-error { grid-column: 1 / -1; margin: 0; }
@media (min-width: 900px) { .vc-field.vc-field-name { grid-column: auto; } }
.vc-help { color: var(--ink-soft); }
.vc-field { display: grid; gap: 4px; }
.vc-field label { font-size: .9rem; font-weight: 600; }
.vc-field input { min-height: 44px; padding: 0 12px; font: inherit; border: 1px solid var(--ink-soft); border-radius: var(--r-sm); }
.vc-error { color: var(--action-text); font-weight: 600; }

/* ---------- Résultat ---------- */
.vc-out { display: grid; gap: 20px; padding: 28px 20px; border-radius: var(--r-xl); background: var(--surface-warm); scroll-margin-top: calc(var(--header-h) + 16px); }
@media (min-width: 900px) { .vc-out { padding: 40px; } }
.vc-out-title { margin: 0; font: 750 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.1 var(--font-display); }
.vc-out-title:focus, .vc-list-head h3:focus { outline: none; }
.vc-out-title:focus-visible, .vc-list-head h3:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.vc-res-empty { margin: 0; color: var(--ink-soft); }
[data-result] { display: grid; gap: 20px; }
.vc-out-grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) {
  .vc-out-grid { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "list side" "vue side"; gap: 28px; }
  .vc-out-grid > .vc-side { grid-area: side; align-self: start; position: sticky; top: calc(var(--header-h) + 20px); }
  .vc-out-grid > .vc-list { grid-area: list; }
  .vc-out-grid > .vc-3d { grid-area: vue; }
  /* Dans la colonne de gauche, la liste tient sur deux colonnes au plus. */
  .vc-out-grid > .vc-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-out-grid.is-solo { grid-template-columns: minmax(0, 520px); grid-template-areas: "side"; }
}
.vc-side { display: grid; gap: 12px; }
.vc-reco { display: grid; gap: 8px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.vc-reco > * { margin: 0; }
.vc-total { font-weight: 600; }
.vc-reco-k { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.vc-reco-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 750 2.4rem/1.05 var(--font-display); }
.vc-reco-v small { display: block; font: 500 .92rem/1.4 var(--font); color: var(--ink-soft); }
.vc-reco-sub { font-size: .92rem; }
.vc-gauge { height: 10px; border-radius: 5px; background: var(--brand-soft); overflow: hidden; }
.vc-gauge span { display: block; height: 100%; background: var(--brand-strong); border-radius: 5px; }
.vc-why, .vc-warn { margin: 0; font-size: .95rem; }
.vc-reco .vc-why { font-size: .88rem; color: var(--ink-soft); }
.vc-warn { padding: 12px 14px; border-radius: var(--r-sm); background: var(--white); border-left: 4px solid var(--action); }
.vc-cta { width: 100%; justify-content: center; }
.vc-more { margin: 0; font-size: .9rem; }

/* Vue 3D du box */
.vc-3d { margin: 0; display: grid; gap: 16px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--header-h) + 16px); }
.vc-3d:focus { outline: none; }
.vc-3d:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (min-width: 900px) { .vc-3d { padding: 24px 28px; } }
/* Téléphone : la vue 3D prend presque toute la largeur (208 px de dessin sur 320 avant). Même seuil que le texte
   de 12 px du dessin (480 px), sinon le dessin rétrécissait en passant de 399 à 412 px. */
@media (max-width: 479px) {
  .vc-out { padding: 24px 10px; }
  .vc-3d { padding: 12px 6px; }
  .vc-3d figcaption { padding-inline: 6px; }
}
.vc-3d svg { display: block; width: 100%; height: auto; max-height: 500px; }
.vc-3d .vc-wall-l { fill: var(--wall-l); }
.vc-3d .vc-wall-r { fill: var(--wall-r); }
.vc-3d .vc-rib { stroke: var(--rib); stroke-width: 1; }
.vc-3d .vc-floor { fill: var(--floor); }
.vc-3d .vc-aisle { fill: var(--white); fill-opacity: .7; stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 6 5; }
.vc-3d .vc-hu { stroke: var(--brand-strong); stroke-width: 1.5; stroke-dasharray: 7 6; }
.vc-3d polygon { stroke-linejoin: round; }
.vc-3d .vc-obj { stroke: var(--brand-strong); stroke-width: .8; stroke-opacity: .5; }
.vc-3d .vc-obj.vc-ft { fill: var(--obj-t); }
.vc-3d .vc-obj.vc-fl { fill: var(--obj-l); }
.vc-3d .vc-obj.vc-fr { fill: var(--obj-r); }
.vc-3d .vc-mass { opacity: .62; }
.vc-3d .vc-ghost { fill: var(--obj-t); fill-opacity: .18; stroke: var(--brand-strong); stroke-width: 1.2; stroke-opacity: .55; }
.vc-3d .vc-box.vc-ft { fill: var(--box-t); }
.vc-3d .vc-box.vc-fl { fill: var(--box-l); }
.vc-3d .vc-box.vc-fr { fill: var(--box-r); }
.vc-3d .vc-cl { stroke: var(--box-line); stroke-width: 1; stroke-opacity: .7; }
.vc-3d .vc-edge { stroke: var(--ink); stroke-width: 1; stroke-opacity: .35; }
.vc-3d .vc-edge-front { stroke-dasharray: 5 5; }
.vc-3d .vc-pin circle { fill: var(--white); stroke: var(--ink); stroke-width: 1.2; }
.vc-3d .vc-lead { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vc-3d text { fill: var(--ink); font-family: var(--font-display); font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.vc-3d .vc-dim { font-family: var(--font); font-weight: 500; fill: var(--ink-soft); }
.vc-3d .vc-dim-end { text-anchor: end; }
.vc-3d .vc-dim-hu { fill: var(--brand-strong); font-weight: 650; }
.vc-3d figcaption { display: grid; gap: 8px 32px; font-size: .95rem; line-height: 1.45; padding-top: 16px; border-top: 1px solid var(--line); }
.vc-key-g { display: grid; gap: 8px; align-content: start; }
@media (min-width: 700px) { .vc-3d figcaption { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .vc-key-tip { grid-column: 1 / -1; } }
.vc-key-t { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-weight: 650; }
.vc-sw { flex: none; width: 16px; height: 16px; border-radius: 4px; }
.vc-sw-sol { background: var(--obj-t); box-shadow: inset -5px -5px 0 var(--obj-r); }
.vc-sw-box { background: var(--box-t); box-shadow: inset -5px -5px 0 var(--box-r); }
.vc-sw-aisle { background: var(--white); border: 1.5px dashed var(--ink-soft); }
.vc-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vc-key li { display: flex; align-items: baseline; gap: 8px; }
.vc-key small { color: var(--ink-soft); }
.vc-n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.2px solid var(--ink); font: 700 .8rem/1 var(--font-display); transform: translateY(2px); }
.vc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vc-chips li { padding: 3px 10px; border-radius: 999px; background: var(--bg-soft); font-size: .88rem; }
.vc-key-tip { margin: 4px 0 0; color: var(--ink-soft); font-size: .9rem; }
.vc-sw-hu { display: inline-block; width: 22px; vertical-align: middle; border-top: 2px dashed var(--brand-strong); }

/* Votre liste */
.vc-list { padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); }
.vc-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.vc-list-head h3 { margin: 0; font: 700 1.15rem/1.3 var(--font-display); }
.vc-list-head h3 span { margin-left: 6px; font: 500 .92rem/1 var(--font); color: var(--ink-soft); }
.vc-list ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0 32px; }
@media (min-width: 700px) { .vc-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .vc-list ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vc-list-actions { display: flex; gap: 16px; }
.vc-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.vc-l-name { min-width: 0; font-size: .95rem; line-height: 1.3; overflow-wrap: break-word; }
.vc-l-qty { display: flex; align-items: center; gap: 4px; flex: none; }
.vc-l-qty .vc-q { min-width: 2.6em; text-align: center; font-weight: 700; }
/* Petit téléphone : les boutons passent sous le nom, qui garde toute la largeur. */
@media (max-width: 459px) {
  .vc-list { padding: 16px 14px; }
  .vc-list li { flex-wrap: wrap; row-gap: 2px; }
  .vc-l-name { flex: 1 1 100%; }
  .vc-l-qty { margin-left: auto; }
}
.vc-list-note { margin: 6px 0 0; font-size: .88rem; color: var(--ink-soft); }
.vc-step-sm, .vc-remove { position: relative; }
.vc-step-sm { width: 36px; height: 36px; font-size: 1.15rem; }
.vc-remove { width: 36px; height: 36px; margin-left: 4px; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); font: 500 1.5rem/1 var(--font); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .vc-remove:hover { background: var(--bg-soft); color: var(--ink); } }
.vc-remove:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Zone tactile de 44 px : le pseudo-élément part du bord intérieur, la bordure de 1,5 px est comptée. */
.vc-step-sm::after, .vc-remove::after { content: ""; position: absolute; inset: -6px; }
.vc-link { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: .22em; cursor: pointer; }

/* Barre de résumé fixée en bas, pendant qu'on remplit la liste */
.vc-bar {
  position: fixed; z-index: 20; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(720px, calc(100% - 24px)); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 66px; padding: 10px 10px 10px 20px; border-radius: 999px; background: var(--surface); box-shadow: 0 10px 30px rgb(42 38 35 / .18), 0 0 0 1px var(--line);
  transition: transform .25s var(--ease-out), opacity .25s var(--ease-out), visibility 0s;
}
.vc-bar[hidden] { display: none; }
/* Escamotée : hors de l'écran, et invisible aussi pour le clavier et les lecteurs d'écran (après la glissade). */
.vc-bar.is-away { transform: translate(-50%, calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .18s var(--ease-out), opacity .18s var(--ease-out), visibility 0s .18s; }
.vc-bar-sum { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; line-height: 1.3; font-size: .9rem; color: var(--ink-soft); min-width: 0; }
.vc-bar-sum b { order: -1; flex-basis: 100%; font: 750 1.15rem/1.25 var(--font-display); color: var(--ink); }
@media (min-width: 640px) { .vc-bar-sum b { flex-basis: auto; } }
.vc-bar .btn { flex: none; }
.vc-bar-actions { flex: none; display: flex; gap: 8px; }
/* Petits écrans : deux boutons côte à côte, on resserre la barre. */
@media (max-width: 479px) {
  .vc-bar { padding-left: 16px; gap: 8px; }
  .vc-bar .btn-sm { padding-inline: .8em; font-size: .9rem; }
}
/* Très petits écrans : on garde la taille et le prix, le nombre d'objets reste dans le résultat. */
@media (max-width: 359px) { .vc-bar-sum:has(> b + span) > span:first-child { display: none; } }
/* Mobile : quand la barre du calculateur propose « Réserver », elle remplace la barre fixe du site ; sinon (liste vide,
   plusieurs box, « À voir avec nous »), la barre du site reste pour garder Réserver, Contact et le téléphone. */
@media (max-width: 767px) { body:has(.vc-bar:not([hidden]):not(.is-away) a[data-track="reserver"]) .mobile-bar { display: none; } }
/* Nouvelle taille conseillée : anneau turquoise et taille en couleur un instant (sans mouvement). */
.vc-bar.is-new { animation: vc-pop .9s ease; }
.vc-bar.is-new b { animation: vc-flash .9s ease; }
@keyframes vc-pop { 30% { box-shadow: 0 10px 30px rgb(42 38 35 / .18), 0 0 0 4px var(--brand); } }
@keyframes vc-flash { 30% { color: var(--brand-strong); } }
@media (prefers-reduced-motion: reduce) { .vc-bar, .vc-bar.is-away { transition: none; } }
.btn-dark { background: var(--ink); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn-dark:hover { background: var(--brand-strong); color: var(--white); } }

.vc-how { max-width: 760px; }
.vc-how > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 10px; list-style: none; }
.vc-how > summary::-webkit-details-marker { display: none; }
/* Flèche d'ouverture (le display:flex retire le marqueur natif). */
.vc-how > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.vc-how[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.vc-how > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.vc-how p { font-size: .92rem; color: var(--ink); }

/* En-tête simple de la page autonome */
.gb-head { position: sticky; top: 0; z-index: 10; height: var(--header-h); display: flex; align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); }
.gb-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gb-head img { display: block; height: 36px; width: auto; }
.gb-head a { color: var(--ink); font-weight: 650; text-decoration: none; }