/* Calculateur de superficie du formulaire de soumission. Noir, blanc, accent rouge. */
.calc { margin-top: -4px; }
.calc__ouvrir { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px dashed rgba(255, 255, 255, .3); border-radius: 10px; background: rgba(255, 255, 255, .03); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .25s, background .25s, transform .16s ease-out; }
.calc__ouvrir:active { transform: scale(.985); }
.calc__ouvrir > i:first-child { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--red); font-size: 18px; }
.calc__ouvrir span { display: grid; gap: 2px; }
.calc__ouvrir b { font-weight: 500; font-size: 15px; }
.calc__ouvrir small { font-size: 12.5px; color: var(--muted); }
.calc__fleche { margin-left: auto; font-size: 16px; transition: transform .35s var(--sortie); }
.calc.est-ouvert .calc__fleche { transform: rotate(180deg); }
.calc.est-ouvert .calc__ouvrir { border-style: solid; border-color: rgba(255, 255, 255, .22); border-radius: 10px 10px 0 0; }
@media (hover: hover) and (pointer: fine) { .calc__ouvrir:hover { border-color: #fff; background: rgba(255, 255, 255, .06); } }

.calc__panneau { padding: 20px 16px 18px; border: 1px solid rgba(255, 255, 255, .22); border-top: 0; border-radius: 0 0 10px 10px; background: rgba(255, 255, 255, .03); animation: calc-arrive .4s var(--sortie); }
@keyframes calc-arrive { from { opacity: 0; transform: translateY(-8px); } }
.calc__q { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 14px; font-weight: 500; color: #fff; }
.calc__q:not(:first-child) { margin-top: 20px; }
.calc__q b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #0a0a0a; font-size: 12px; font-weight: 600; }

.calc__puces { display: flex; flex-wrap: wrap; gap: 6px; }
.calc__puces button, .calc__unites button { padding: 8px 13px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: none; color: rgba(255, 255, 255, .82); font: 400 13.5px var(--sans); cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .16s ease-out; }
.calc__puces button:active, .calc__unites button:active, .calc__modes button:active, .calc__tailles button:active { transform: scale(.97); }
.calc__puces button[aria-pressed="true"], .calc__unites button[aria-pressed="true"] { background: #fff; border-color: #fff; color: #0a0a0a; }

.calc__modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.calc__modes button { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; background: none; color: rgba(255, 255, 255, .8); font: 400 13px/1.25 var(--sans); text-align: center; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .16s ease-out; }
.calc__modes i { font-size: 22px; }
.calc__modes button[aria-selected="true"] { border-color: var(--red); background: var(--red-soft); color: #fff; }
.calc__modes button[aria-selected="true"] i { color: var(--red-hi); }

.calc__vue { margin-top: 14px; }
.calc__mesures { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
.calc__mesures > b { padding-bottom: 12px; font-size: 18px; font-weight: 400; color: var(--muted); }
.calc__mesures label { display: grid; gap: 6px; }
.calc__mesures label > span:first-child { font: 400 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.calc__champ { position: relative; display: block; }
.calc .calc__champ input { width: 100%; height: 48px; padding: 0 46px 0 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; background: #111; color: #fff; font: 500 17px var(--sans); }
.calc .calc__champ input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.calc .calc__champ input::placeholder { color: #555; font-weight: 400; }
.calc__champ i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13px; color: var(--muted); pointer-events: none; }
.calc__unites { display: flex; gap: 6px; margin-top: 10px; }
.calc__unites button { padding: 6px 11px; font-size: 12.5px; }
.calc__astuce { display: flex; gap: 10px; margin: 0 0 12px; padding: 11px 13px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.calc__astuce i { flex: none; margin-top: 2px; font-size: 17px; color: var(--red-hi); }

.calc__tailles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.calc__tailles button { display: grid; justify-items: center; align-content: end; gap: 3px; min-height: 132px; padding: 12px 6px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; background: none; color: #fff; font: inherit; text-align: center; cursor: pointer; transition: background .2s, border-color .2s, transform .16s ease-out; }
.calc__tailles i { display: block; width: calc(46px * var(--t)); height: calc(46px * var(--t)); margin-bottom: 8px; border: 1.5px solid rgba(255, 255, 255, .7); background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, .22) 6px 7px); }
.calc__tailles b { font-size: 14px; font-weight: 500; }
.calc__tailles small { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.calc__tailles em { margin-top: 2px; font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.calc__tailles button[aria-pressed="true"] { border-color: var(--red); background: var(--red-soft); }
.calc__tailles button[aria-pressed="true"] i { border-color: var(--red-hi); }

.calc__bas { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.calc__plan { flex: none; display: grid; justify-items: center; gap: 6px; width: 132px; }
.calc__rect { display: grid; place-items: center; height: 54px; aspect-ratio: var(--ratio, 1.4); max-width: 132px; border: 1.5px solid rgba(255, 255, 255, .28); background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, .1) 8px 9px); transition: aspect-ratio .45s var(--sortie), border-color .3s; }
.calc.a-une-piece .calc__rect { border-color: #fff; }
.calc__rect span { padding: 2px 6px; background: #0a0a0a; font: 600 13px var(--sans); color: #fff; white-space: nowrap; }
.calc__rect span:empty { display: none; }
.calc__plan small { font-size: 11.5px; color: var(--muted); text-align: center; }
.calc__ajouter { flex: 1; justify-content: center; gap: 8px; }
.calc__ajouter:disabled { opacity: .4; cursor: not-allowed; }

.calc__pied { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
.calc__pied.vient-de-changer .calc__total b { animation: calc-bat .5s var(--sortie); }
@keyframes calc-bat { from { transform: scale(1.12); color: var(--red-hi); } }
.calc__liste { list-style: none; margin: 0; padding: 0; }
.calc__liste li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.calc__liste li span { display: grid; }
.calc__liste li b { font-weight: 500; }
.calc__liste li small { font-size: 12px; color: var(--muted); }
.calc__liste li em { margin-left: auto; font-style: normal; white-space: nowrap; }
.calc__liste li button { flex: none; width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: none; color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .calc__liste li button:hover { background: var(--red); border-color: var(--red); } }
.calc__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 0; }
.calc__total > span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.calc__total b { transform-origin: right center; font: 600 28px/1 var(--serif); color: #fff; white-space: nowrap; }
.calc__note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 520px) {
  .calc__tailles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc__tailles button { min-height: 116px; }
  .calc__bas { flex-direction: column; align-items: stretch; }
  .calc__plan { width: auto; }
  .calc__modes button { font-size: 12px; padding: 10px 4px; }
}
@media (prefers-reduced-motion: reduce) { .calc__panneau, .calc__pied.vient-de-changer .calc__total b { animation: none; } .calc__rect { transition: none; } }