:root {
  --fond: #f6f7f9;
  --surface: #ffffff;
  --texte: #1c2430;
  --texte-doux: #5b6676;
  --bord: #d9dee5;
  --accent: #0b6bcb;
  --accent-texte: #ffffff;
  --accent-doux: #e3effb;
  --ok: #1a7f37;
  --attention: #9a6700;
  --refus: #c62828;
  --rayon: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #11161d;
    --surface: #1a212b;
    --texte: #e7ecf2;
    --texte-doux: #9aa6b5;
    --bord: #2e3846;
    --accent: #5aa9f5;
    --accent-texte: #0b1520;
    --accent-doux: #1b3550;
    --ok: #4cc26d;
    --attention: #e0b44c;
    --refus: #f2766b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.3rem; margin: 0 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 .75rem; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.entete { display: flex; align-items: center; gap: 1.5rem; padding: 1rem clamp(16px, 4vw, 48px); background: var(--surface); border-bottom: 1px solid var(--bord); flex-wrap: wrap; }
.marque { font-weight: 800; letter-spacing: .04em; font-size: 1.2rem; }
.marque span { color: var(--accent); }
.accroche { margin: 0; color: var(--texte-doux); flex: 1; min-width: 14rem; }
.lien-panier { text-decoration: none; font-weight: 600; }
.pastille { display: inline-block; min-width: 1.5em; padding: 0 .4em; border-radius: 999px; background: var(--accent); color: var(--accent-texte); text-align: center; font-size: .85em; }

.page { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem 2rem; max-width: 1200px; margin: 0 auto; padding: 1.5rem clamp(16px, 4vw, 48px) 3rem; }
.configurateur, .panier { grid-column: 1; }
.resume { grid-column: 2; grid-row: 1 / span 2; }
.carte-prix { position: sticky; top: 1rem; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.25rem; }

.etape { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); padding: 1rem 1.25rem 1.25rem; margin: 0 0 1rem; min-width: 0; }
.etape legend { font-weight: 700; padding: 0 .4rem; }
.etape legend small { font-weight: 400; color: var(--texte-doux); }
.num { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--accent-doux); color: var(--accent); margin-right: .3rem; font-size: .9em; }

.onglets { display: flex; gap: .5rem; flex-wrap: wrap; }
.onglets label { cursor: pointer; position: relative; }
.onglets input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.onglets span { display: block; padding: .5rem 1rem; border: 1px solid var(--bord); border-radius: 999px; }
.onglets input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); font-weight: 600; }
.onglets input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.grille-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem 1rem; }
.champ { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .5rem; }
.champ.large { grid-column: 1 / -1; }
.champ label, .pli label { font-size: .875rem; color: var(--texte-doux); }
input, select, textarea { font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--bord); border-radius: 8px; padding: .5rem .6rem; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.aide { color: var(--texte-doux); font-size: .875rem; margin: .25rem 0 .75rem; }

.forme-et-schema { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.5rem; align-items: start; }
.cadre-schema { margin: 0; position: sticky; top: 1rem; }
.schema { width: 100%; height: auto; max-height: 340px; aspect-ratio: 4 / 3; background: var(--fond); border-radius: 8px; display: block; }
.schema path { vector-effect: non-scaling-stroke; fill: none; }
.schema .piece { fill: var(--accent-doux); stroke: var(--accent); stroke-width: 1.5; }
.schema .piece-trait { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.schema .fond-plat { fill: var(--accent-doux); stroke: none; }
.schema .arete { stroke: var(--accent); stroke-width: 1.5; }
.schema .pli { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 5 4; }
.schema .cote { stroke: var(--texte-doux); stroke-width: 1; }
.schema .rappel { stroke: var(--texte-doux); stroke-width: .6; }
.schema .axe { stroke: var(--texte-doux); stroke-width: .8; stroke-dasharray: 8 3 2 3; }
.schema .fleche { fill: var(--texte-doux); stroke: none; }
.schema .cote-texte { fill: var(--texte); stroke: var(--fond); paint-order: stroke; font-weight: 600; font-family: inherit; }
.bascule-vue { display: inline-flex; border: 1px solid var(--bord); border-radius: 999px; padding: 2px; margin-bottom: .5rem; background: var(--surface); }
.bascule-vue button { font: inherit; font-size: .875rem; border: 0; background: transparent; color: var(--texte-doux); padding: .3rem .9rem; border-radius: 999px; cursor: pointer; }
.bascule-vue button.actif { background: var(--accent); color: var(--accent-texte); font-weight: 600; }
.vue-3d { width: 100%; aspect-ratio: 4 / 3; max-height: 340px; background: var(--fond); border-radius: 8px; display: grid; place-items: center; color: var(--texte-doux); font-size: .9rem; overflow: hidden; touch-action: none; }
.vue-3d[hidden], .schema[hidden] { display: none; }
.vue-3d canvas { width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.cadre-schema figcaption { margin: .4rem 0 0; }
.lettre { display: inline-grid; place-items: center; min-width: 1.45em; height: 1.45em; padding: 0 .2em; border-radius: 4px; background: var(--accent); color: var(--accent-texte); font-weight: 700; font-size: .8rem; }
.faces { display: grid; grid-template-columns: 1fr; gap: .25rem; max-width: 26rem; }
.faces .champ { margin-bottom: 0; }
.pli { display: grid; grid-template-columns: 4rem 5rem 1fr; gap: .5rem; align-items: center; padding: .25rem 0 .25rem 1rem; border-left: 3px solid var(--accent-doux); margin: .25rem 0; }
.actions-faces { display: flex; gap: .5rem; flex-wrap: wrap; margin: .75rem 0; }

/* forme libre */
.schema .element { stroke-width: 1.5; cursor: grab; touch-action: none; }
.schema .element.retrait { fill: var(--fond); stroke: var(--accent); stroke-dasharray: 6 3; }
.schema .element.ajout { fill: var(--accent-doux); stroke: var(--accent); }
.schema .element.choisi { stroke: var(--attention); stroke-width: 2.5; }
.schema .element:active { cursor: grabbing; }
.barre-libre { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .5rem 0 .75rem; }
.barre-libre .bouton-secondaire { padding: .4rem .75rem; font-size: .9rem; }
.barre-titre { font-size: .875rem; color: var(--texte-doux); }
.barre-espace { flex: 1; }
.elements { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; max-height: 32rem; overflow-y: auto; }
.element-ligne { border: 1px solid var(--bord); border-radius: 8px; padding: .5rem .75rem; background: var(--surface); }
.element-ligne.choisi { border-color: var(--attention); box-shadow: 0 0 0 1px var(--attention); }
.element-tete { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; margin-bottom: .4rem; }
.element-tete strong { font-size: .95rem; white-space: nowrap; }
.element-tete select { flex: 1 1 8rem; width: auto; min-width: 0; padding: .3rem .4rem; }
.element-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .25rem .5rem; }
.element-champs .champ { margin-bottom: 0; }
.dupliquer { background: none; border: none; color: var(--accent); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.elements .vide { padding: .25rem 0; }
.champ[hidden] { display: none; }

/* fichier DXF */
.biblio-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .4rem; max-height: 340px; overflow-y: auto; padding: .2rem; margin: .5rem 0; }
.biblio-grille button { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .4rem .2rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: transparent; color: inherit; font: inherit; font-size: .72rem; line-height: 1.15; cursor: pointer; }
.biblio-grille button:hover, .biblio-grille button:focus-visible { border-color: var(--accent); }
.biblio-grille button[aria-selected="true"] { border-color: var(--accent); background: var(--accent-doux); font-weight: 600; }
.biblio-grille svg { width: 52px; height: 52px; fill: currentColor; }
.biblio-nom { margin: .5rem 0; }
.credit { font-size: .8rem; }
.depot { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: 1.5rem 1rem; border: 2px dashed var(--bord); border-radius: var(--rayon); cursor: pointer; color: var(--texte-doux); }
.depot strong { color: var(--accent); }
.depot.survol, .depot:hover { border-color: var(--accent); background: var(--accent-doux); }
.depot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vecto { margin-top: 1rem; }
.vecto-apercu { margin-bottom: .75rem; }
.vecto-apercu image { opacity: .35; }
.vecto-apercu .piece { fill: var(--accent); fill-opacity: .45; stroke: var(--accent); stroke-width: 1.5; }
.vecto input[type=range] { padding: .5rem 0; background: none; border: 0; accent-color: var(--accent); }
.case { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin: .5rem 0; cursor: pointer; }
.case input { width: auto; }
.depot:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.aide.erreur { color: var(--refus); }

.bouton, .bouton-secondaire { font: inherit; cursor: pointer; border-radius: 8px; padding: .6rem 1.1rem; border: 1px solid var(--accent); }
.bouton { background: var(--accent); color: var(--accent-texte); font-weight: 600; width: 100%; margin-top: .5rem; }
.bouton-secondaire { background: transparent; color: var(--accent); }
.bouton:disabled, .bouton-secondaire:disabled { opacity: .45; cursor: not-allowed; }

.etat { font-weight: 600; margin: 0; }
.etat.ok { color: var(--ok); }
.etat.validation { color: var(--attention); }
.etat.refus { color: var(--refus); }
.prix { font-size: 2.2rem; font-weight: 750; margin: .25rem 0 0; font-variant-numeric: tabular-nums; }
.prix small { font-size: 1rem; font-weight: 500; color: var(--texte-doux); }
.unitaire { color: var(--texte-doux); margin: 0 0 .75rem; }
.apercu { width: 100%; height: 180px; background: var(--fond); border-radius: 8px; }
.apercu path { fill: var(--accent-doux); stroke: var(--accent); stroke-width: 1.5; }
.details { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; font-size: .9rem; margin: .75rem 0; }
.details dt { color: var(--texte-doux); }
.details dd { margin: 0; }
.messages { padding-left: 1.1rem; font-size: .875rem; color: var(--attention); }
.alerte { background: var(--accent-doux); border-radius: 8px; padding: .75rem 1rem; }

.panier { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.25rem; }
.panier table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.panier th, .panier td { padding: .45rem .5rem; border-bottom: 1px solid var(--bord); text-align: left; }
.panier thead th { color: var(--texte-doux); font-weight: 500; font-size: .85rem; }
.panier .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.panier tfoot th { font-weight: 500; text-align: right; }
.panier tr.total th, .panier tr.total td { font-weight: 700; border-bottom: none; }
.retirer { background: none; border: none; color: var(--refus); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.form-demande .bouton { width: auto; }
.retour.succes { color: var(--ok); font-weight: 600; }
.retour.erreur { color: var(--refus); }

.pied { text-align: center; color: var(--texte-doux); font-size: .85rem; padding: 1.5rem; }

/* Grand écran : toute la largeur, et la place gagnée va au schéma et à la vue 3D. */
@media (min-width: 1400px) {
  .page { max-width: none; grid-template-columns: minmax(0, 1fr) 380px; }
  .forme-et-schema { grid-template-columns: minmax(340px, 2fr) minmax(0, 3fr); }
  .schema, .vue-3d { max-height: min(60vh, 720px); }
  .grille-champs { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (min-width: 2200px) {
  .page { grid-template-columns: minmax(0, 1fr) 420px; }
  .forme-et-schema { grid-template-columns: minmax(380px, 1fr) minmax(0, 2fr); }
}

@media (max-width: 1100px) {
  .forme-et-schema { grid-template-columns: minmax(0, 1fr); }
  .cadre-schema { position: static; order: -1; }
}
@media (max-width: 880px) {
  .page { grid-template-columns: minmax(0, 1fr); }
  .resume { grid-column: 1; grid-row: auto; }
  .carte-prix { position: static; }
  .panier table { font-size: .875rem; }
  .panier thead th:nth-child(2), .panier tbody td:nth-child(2) { display: none; }
  .panier tfoot th { text-align: left; }
}