/* Space calculator, every shape (inc/calculateur.php, assets/js/calculateur.js). Own file: main.css is shared. */
.calc { display: grid; gap: 1.1rem; min-width: 0; max-width: 100%; box-sizing: border-box; padding: clamp(1.1rem, 3vw, 2.2rem); border: 1px solid var(--anthracite); border-radius: 22px; }
.calc .rubrique-simple { margin-bottom: 0; }
.calc .mesure__titre { margin: 0; }
.calc__lib { font: 600 var(--t-sm)/1.2 var(--sans); }

/* Placement: 4 cards with a plain top-view pictogram (2 x 2 on phones). */
.calc__modes { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; min-width: 0; }
.calc__modes legend { padding: 0; margin-bottom: 0.55rem; font: 600 var(--t-md)/1.2 var(--sans); }
.calc__mode { position: relative; display: block; min-width: 0; }
.calc__mode input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.calc__mode > span { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.65rem; align-items: center; height: 100%; box-sizing: border-box; padding: 0.7rem 0.8rem; border: 1px solid var(--trait); border-radius: 14px; background: var(--platre); cursor: pointer; transition: border-color .15s, background .15s; }
.calc__mode b { grid-column: 2; font: 650 var(--t-sm)/1.2 var(--sans); }
.calc__mode small { grid-column: 2; font: 400 var(--t-xs)/1.25 var(--sans); color: var(--feutre); }
.calc__picto { grid-row: 1 / span 2; width: 40px; height: 40px; fill: none; stroke: var(--anthracite); stroke-width: 1.6; stroke-linejoin: round; }
.calc__picto .m { stroke-width: 3; stroke-linecap: square; }
.calc__picto .z { stroke-dasharray: 3 2.5; stroke: var(--feutre); }
.calc__picto path:not(.m), .calc__picto rect:not(.z) { fill: var(--moutarde-voile); }
.calc__mode input:checked + span { border-color: var(--anthracite); background: var(--blanc); box-shadow: inset 0 0 0 1px var(--anthracite); }
.calc__mode input:checked + span .calc__picto path:not(.m), .calc__mode input:checked + span .calc__picto rect:not(.z) { fill: var(--moutarde); }
.calc__mode input:focus-visible + span { outline: 2px solid var(--moutarde); outline-offset: 2px; }
.calc__mode:hover > span { border-color: var(--anthracite); }
.calc__aide { margin: 0; }
.calc__modes[hidden] { display: none; }
.calc__places { list-style: none; margin: 0.2rem 0 0.3rem; padding: 0; display: grid; gap: 0.3rem; max-width: 30rem; }
.calc__places li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 2.4rem; align-items: center; gap: 0.6rem; font: 500 var(--t-sm)/1.2 var(--sans); }
.calc__places a { color: var(--anthracite); text-decoration: underline; text-decoration-color: var(--moutarde); text-underline-offset: 3px; }
.calc__places .num { text-align: right; font-weight: 650; }
.calc__barre { height: 6px; border-radius: 999px; background: var(--platre-2); overflow: hidden; }
.calc__barre i { display: block; height: 100%; background: var(--moutarde); border-radius: 999px; }
.calc__appliquer { justify-self: start; margin-top: 0.3rem; }

/* Measures and quick filters. */
.calc__champs, .calc__filtres { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: end; }
.calc__filtres { padding-top: 0.9rem; border-top: 1px solid var(--trait); }
.calc__champ, .calc__filtre { display: grid; gap: 0.35rem; }
.calc__champ[hidden], .calc__cote[hidden] { display: none; }
.calc__saisie { display: flex; align-items: center; gap: 0.4rem; font: 400 var(--t-sm)/1 var(--sans); }
.calc__saisie input { width: 6.5rem; min-height: 44px; box-sizing: border-box; padding: 0.55rem 0.7rem; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); font: 600 var(--t-md)/1 var(--sans); }
.calc__saisie input::placeholder { font-weight: 400; color: var(--feutre); }
.calc__filtre select { min-height: 44px; padding: 0.5rem 2rem 0.5rem 0.7rem; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); font: 500 var(--t-sm)/1 var(--sans); color: var(--anthracite); }
.calc__saisie input:focus-visible, .calc__filtre select:focus-visible { outline: 2px solid var(--moutarde); outline-offset: 1px; border-color: var(--anthracite); }
.calc__cote { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font: 500 var(--t-sm)/1.2 var(--sans); }
.calc__cote legend { padding: 0; margin-bottom: 0.35rem; font-weight: 600; }
.calc__cote label { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; }
.calc__cote input, .calc__conv input { accent-color: var(--moutarde); width: 1.1rem; height: 1.1rem; }
.calc__conv { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--trait); border-radius: 999px; background: var(--platre); font: 600 var(--t-sm)/1.2 var(--sans); cursor: pointer; }
.calc__conv:has(input:checked) { border-color: var(--anthracite); background: var(--moutarde-voile); }

/* Plan and result side by side, the list full width below. */
.calc__sortie { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.2rem; align-items: start; }
.calc__plan { width: 100%; height: auto; background: var(--platre); border-radius: 14px; }
.calc__plan text { font: 500 11px/1 var(--sans); fill: var(--anthracite); }
.calc__mur { fill: none; stroke: var(--anthracite); stroke-width: 5; stroke-linecap: square; }
.calc__zone { fill: none; stroke: var(--feutre); stroke-width: 1.5; stroke-dasharray: 5 4; }
.calc__canape { fill: rgba(214, 166, 43, 0.28); stroke: var(--moutarde); stroke-width: 2; }
.calc__deplie { fill: none; stroke: var(--bleu); stroke-width: 1.5; stroke-dasharray: 4 3; }
.calc__legende { font-weight: 650 !important; }
.calc__emprise { fill: none; stroke: var(--moutarde); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.calc__plan .calc__reste { font-size: 10px; fill: var(--feutre); }
.calc__fleche { fill: none; stroke: var(--feutre); stroke-width: 1; stroke-dasharray: 2 2; }
.calc__resultat { display: grid; gap: 0.45rem; align-content: start; }
.calc__resultat p { margin: 0; }
.calc__total { font: 600 var(--t-lg)/1.25 var(--sans); }
.calc__total .num { font-size: var(--t-2xl); margin-right: 0.15rem; }
.calc__sur { font: 400 var(--t-sm)/1.35 var(--sans); color: var(--feutre); }
.calc__verif, .calc__piste { font: 400 var(--t-sm)/1.4 var(--sans); }
.calc__collection { justify-self: start; margin-top: 0.3rem; }
.calc__cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 0.6rem; }
.calc__carte { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0.8rem; align-items: center; padding: 0.55rem; border: 1px solid var(--trait); border-radius: 12px; background: var(--blanc); color: var(--anthracite); text-decoration: none; transition: border-color .15s; }
.calc__carte:hover, .calc__carte:focus-visible { border-color: var(--anthracite); }
.calc__carte img, .calc__sansimg { width: 112px; height: 84px; object-fit: cover; border-radius: 8px; background: var(--platre); display: block; }
.calc__texte { display: grid; gap: 0.2rem; min-width: 0; }
.calc__nom { font: 650 var(--t-sm)/1.25 var(--sans); }
.calc__format { font: 400 var(--t-xs)/1.3 var(--sans); color: var(--feutre); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.calc__ligne { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font: 500 var(--t-sm)/1.2 var(--sans); }
.calc__plus { font: 500 var(--t-xs)/1.3 var(--sans); color: var(--bleu-2); }
.calc__encore { margin-top: 0.7rem; }
.calc__liste:empty { display: none; }

@media (max-width: 760px) {
  .calc__modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc__mode > span { grid-template-columns: 32px minmax(0, 1fr); padding: 0.6rem; column-gap: 0.5rem; }
  .calc__picto { width: 32px; height: 32px; }
  .calc__sortie { grid-template-columns: minmax(0, 1fr); }
  .calc__champs, .calc__filtres { gap: 0.7rem 0.9rem; }
  .calc__carte { grid-template-columns: 96px minmax(0, 1fr); }
  .calc__carte img, .calc__sansimg { width: 96px; height: 72px; }
}
@media (max-width: 400px) {
  .calc__saisie input { width: 5.6rem; }
  .calc__filtre { flex: 1 1 8rem; }
  .calc__filtre select { width: 100%; }
}