.cca-cfg { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--cca-s8); align-items: start; padding-block: var(--cca-s7) var(--cca-s8); }
.cca-cfg-galerie { position: sticky; top: var(--cca-s5); display: grid; gap: var(--cca-s3); }
.cca-cfg-vue { aspect-ratio: 1; background: #fff; overflow: hidden; }
.cca-cfg-vue img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cca-cfg-vignettes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--cca-s2); }
.cca-cfg-vignettes button { padding: 0; aspect-ratio: 1; border: 1px solid var(--cca-line); background: #fff; cursor: pointer; }
.cca-cfg-vignettes button[aria-current] { border-color: var(--cca-marine); box-shadow: inset 0 0 0 1px var(--cca-marine); }
.cca-cfg-vignettes img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cca-cfg-note { margin: 0; color: var(--cca-ink-soft); font-size: .8125rem; }

.cca-cfg-form { display: grid; gap: var(--cca-s5); min-width: 0; }
.cca-cfg-form h1 { margin: 0; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 500; line-height: 1.08; text-wrap: balance; }
.cca-cfg-prix { margin: calc(var(--cca-s3) * -1) 0 0; color: var(--cca-ink); font: 400 1.6rem/1.2 var(--cca-serif); }
.cca-cfg .cca-cfg-etape { padding-inline: 0; margin-inline: 0; }
.cca-cfg-etape { display: grid; gap: var(--cca-s3); min-width: 0; margin: 0; padding: var(--cca-s5) 0 0; border: 0; border-top: 1px solid var(--cca-line); }
.cca-cfg .cca-cfg-etape legend { margin-left: 0; margin-right: 0; padding-inline: 0; }
.cca-cfg-etape legend { display: flex; align-items: center; gap: var(--cca-s3); float: left; width: 100%; margin-bottom: var(--cca-s3); padding: 0; color: var(--cca-ink); font: 500 .75rem/1 var(--cca-sans); letter-spacing: .14em; text-transform: uppercase; }
.cca-cfg-etape legend span { color: var(--cca-bordeaux-nuit); font: italic 400 1.5rem/1 var(--cca-serif); letter-spacing: 0; text-transform: none; }
.cca-cfg-etape legend b { margin-left: auto; color: var(--cca-ink-soft); font-weight: 400; letter-spacing: .02em; text-transform: none; font-size: .875rem; }
.cca-cfg-etape > :not(legend) { clear: both; }

.cca-cfg-voiture { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cca-s3); }
.cca-cfg-large { grid-column: 1 / -1; }
.cca-cfg-champ { display: grid; gap: 6px; min-width: 0; margin: 0; }
.cca-cfg-champ > span { color: var(--cca-ink); font-size: .875rem; font-weight: 500; }
.cca-cfg-champ em { color: var(--cca-ink-soft); font-style: normal; font-weight: 400; }
.cca-cfg-champ :is(select, input, textarea) { width: 100%; min-width: 0; padding: 0 var(--cca-s4); font: 400 1rem/1.3 var(--cca-serif); }
.cca-cfg-champ select { padding-right: 40px; text-overflow: ellipsis; }
.cca-cfg-champ textarea { min-height: 96px; padding-block: var(--cca-s3); resize: vertical; }

.cca-cfg-champ input[readonly] { background: var(--cca-paper); color: var(--cca-ink-soft); }
.cca-cfg-champ [aria-invalid="true"] { border-color: var(--cca-rouge); box-shadow: inset 0 0 0 1px var(--cca-rouge); }
.cca-cfg-aide { margin: -4px 0 0; color: var(--cca-ink-soft); font-size: .8125rem; line-height: 1.45; }
.cca-cfg-sous { margin: var(--cca-s2) 0 0; color: var(--cca-ink); font-size: .875rem; font-weight: 500; }
.cca-cfg-sous em { color: var(--cca-ink-soft); font-style: normal; font-weight: 400; }
.cca-cfg-sous b { margin-left: var(--cca-s2); color: var(--cca-ink-soft); font-weight: 400; }

.cca-cfg-opt { position: relative; display: block; cursor: pointer; }
.cca-cfg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cca-cfg-tissus { display: grid; gap: var(--cca-s2); }
.cca-cfg-carte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--cca-s4); padding: var(--cca-s3) var(--cca-s4); border: 1px solid var(--cca-line); background: var(--cca-papier); }
.cca-cfg-carte b { font: 400 1.35rem/1.2 var(--cca-serif); }
.cca-cfg-carte span { grid-column: 1; color: var(--cca-ink-soft); font-size: .8125rem; }
.cca-cfg-carte em { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--cca-ink); font-style: normal; font-weight: 500; white-space: nowrap; }
.cca-cfg-opt input:checked + .cca-cfg-carte, .cca-cfg-opt input:checked + .cca-cfg-bouton { border-color: var(--cca-marine); box-shadow: inset 0 0 0 1px var(--cca-marine); }
.cca-cfg-opt input:focus-visible + * { outline: 2px solid var(--cca-marine); outline-offset: 3px; }

.cca-cfg-pastilles { display: flex; flex-wrap: wrap; gap: var(--cca-s2); }
.cca-cfg-pastille { display: block; width: 44px; height: 44px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(27, 31, 49, .18); }
.cca-cfg-sans { background: repeating-linear-gradient(135deg, #fff 0 6px, var(--cca-paper) 6px 12px); }
.cca-cfg-opt input:checked + .cca-cfg-pastille { outline: 2px solid var(--cca-marine); outline-offset: 3px; }

.cca-cfg-choix { display: flex; flex-wrap: wrap; gap: var(--cca-s2); }
.cca-cfg-bouton { display: flex; align-items: center; gap: var(--cca-s2); min-height: 44px; padding: 0 var(--cca-s4); border: 1px solid var(--cca-line); background: var(--cca-papier); font: 400 1rem var(--cca-serif); }
.cca-cfg-bouton em { color: var(--cca-ink-soft); font-style: normal; font-size: .8125rem; }
.cca-cfg-logo { display: grid; gap: var(--cca-s3); }

.cca-cfg-form .cca-status { display: none; gap: var(--cca-s3); align-items: flex-start; margin: 0; color: var(--cca-rouge); font-size: .9375rem; }
.cca-cfg-form .cca-status.cca-voir { display: flex; }
.cca-cfg-achat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--cca-s3); }
.cca-cfg-qte { display: grid; grid-template-columns: 44px 36px 44px; align-items: center; border: 1px solid var(--cca-line); background: #fff; }
.cca-cfg-qte button { height: 50px; border: 0; background: none; color: var(--cca-ink); font-size: 1.25rem; cursor: pointer; }
.cca-cfg-qte output { text-align: center; }
.cca-cfg-form .cca-btn, .cca-cfg-barre .cca-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--cca-s5); border: 0; background: var(--cca-rouge); color: #fff; font: 600 .75rem/1.2 var(--cca-sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.cca-cfg-form .cca-btn:disabled { opacity: .7; cursor: wait; }
.cca-cfg-faits { display: flex; flex-wrap: wrap; gap: var(--cca-s2) var(--cca-s5); margin: 0; padding: 0; list-style: none; color: var(--cca-ink-soft); font-size: .8125rem; }

.cca-cfg-infos { max-width: 760px; padding-block: var(--cca-s7) var(--cca-s9); border-top: 1px solid var(--cca-line); }
.cca-cfg-infos h2 { margin: 0 0 var(--cca-s4); font-weight: 500; }
.cca-cfg-infos h3 { margin: var(--cca-s5) 0 var(--cca-s2); font: 500 .75rem/1 var(--cca-sans); letter-spacing: .14em; text-transform: uppercase; }
.cca-cfg-infos-corps { color: var(--cca-ink-soft); }
.cca-cfg-infos-corps ul { padding-left: 1.1em; }

.cca-cfg-barre { display: none; }

@media (hover: hover) and (pointer: fine) {
  .cca-cfg-form .cca-btn:hover, .cca-cfg-barre .cca-btn:hover { background: var(--cca-rouge-hover); }
  .cca-cfg-opt:hover .cca-cfg-carte, .cca-cfg-opt:hover .cca-cfg-bouton { border-color: var(--cca-ink-soft); }
}

@media (max-width: 900px) {
  .cca-cfg { grid-template-columns: 1fr; gap: var(--cca-s5); padding-block: var(--cca-s4) var(--cca-s7); }
  .cca-cfg-galerie { position: static; }
  .cca-cfg-vue { aspect-ratio: 4 / 3; }
  .cca-cfg-barre:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--cca-s3); padding: 10px 1rem calc(10px + env(safe-area-inset-bottom)); background: var(--cca-paper-hi); border-top: 1px solid var(--cca-line); }
  .cca-cfg-barre p { margin: 0; color: var(--cca-ink); font-size: .875rem; font-weight: 500; }
  .cca-cfg-barre .cca-btn { flex: none; min-height: 48px; padding-inline: var(--cca-s4); white-space: nowrap; }
  .cca-cfg-infos { padding-bottom: calc(var(--cca-s9) + 40px); }
}
@media (max-width: 420px) {
  .cca-cfg-voiture { grid-template-columns: 1fr; }
}