/* ============================================================
   Atelier — coût de revient impression 3D (impression3d.*)
   Same "blueprint" direction as the main site: blue ground,
   cyan lines, orange kept for actions. No build, served as is.
   Fonts come from the system (Bahnschrift, Cascadia, Segoe UI on
   Windows): nothing is loaded from a third party.
   ============================================================ */
:root{
  color-scheme:dark;
  --fond:#0B1B2E;
  --fond-2:#0E2439;
  --carte:#0F2337;
  --grille:rgba(127,196,238,.085);
  --bleu:#7FC4EE;
  --trait:rgba(127,196,238,.26);
  --trait-doux:rgba(127,196,238,.14);
  --texte:#E9F1F8;
  --texte-2:#9BB4CA;
  --texte-3:#86A2BB;
  --orange:#FF7A2F;
  --orange-fonce:#C4520F;
  --vert:#4FD08A;
  --rouge:#FF8A8A;
  --mono:"Cascadia Mono","Cascadia Code","JetBrains Mono",Consolas,"DejaVu Sans Mono",ui-monospace,monospace;
  --texte-f:"Source Sans 3","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --titre:"Bahnschrift","Barlow Semi Condensed","Liberation Sans Narrow","Arial Narrow",sans-serif;
  --largeur:1200px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background-color:var(--fond);
  background-image:linear-gradient(var(--grille) 1px,transparent 1px),linear-gradient(90deg,var(--grille) 1px,transparent 1px);
  background-size:40px 40px;
  color:var(--texte); font-family:var(--texte-f); font-size:16px; line-height:1.5;
}
a{color:var(--texte-2); text-decoration:none}
a:hover{color:var(--orange)}
:focus-visible{outline:2px solid var(--orange); outline-offset:2px}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.evitement{position:absolute; left:16px; top:-60px; z-index:10; padding:10px 14px; background:var(--orange); color:#1B0C03; font-family:var(--mono); font-size:12px}
.evitement:focus{top:12px; color:#1B0C03}
.mono{font-family:var(--mono)}

/* ---------- header ---------- */
.entete{border-bottom:1px solid var(--trait); background:rgba(9,21,35,.86)}
.entete__dedans{max-width:var(--largeur); margin:0 auto; padding:12px 20px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 36px}
.marque{display:flex; align-items:center; gap:12px; color:#FFF}
.marque:hover{color:#FFF}
.mark{font-family:var(--titre); font-size:21px; letter-spacing:.17em; text-transform:uppercase; color:#FFF; white-space:nowrap; line-height:1.15}
.mark s{text-decoration:none; color:var(--bleu)}
.mark-kana{font-family:var(--mono); font-size:9.5px; letter-spacing:.34em; color:var(--texte-3); display:block; margin-top:-2px}
.marque__picto{width:30px; height:30px; color:var(--bleu); flex:none}
.nav{display:flex; flex-wrap:wrap; gap:0 28px; flex:1 1 auto}
.nav a{display:inline-flex; align-items:center; min-height:44px; border-bottom:2px solid transparent; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.nav a[aria-current="page"]{border-bottom-color:var(--orange); color:var(--orange)}
.compte{display:flex; align-items:center; gap:10px}
.compte__nom{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--texte-2); text-transform:uppercase}

/* ---------- page ---------- */
main{flex:1 0 auto}
.page{max-width:var(--largeur); margin:0 auto; padding:36px 20px 64px; display:flex; flex-direction:column; gap:32px}
.tete{display:flex; flex-wrap:wrap; align-items:flex-end; gap:20px 32px}
.tete__texte{flex:999 1 420px; min-width:0; display:flex; flex-direction:column; gap:8px}
.tete__actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.surtitre{margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--orange)}
.titre-page{margin:0; font-family:var(--titre); font-weight:700; font-size:clamp(32px,5vw,44px); line-height:1.05; letter-spacing:.04em; text-transform:uppercase; color:#FFF; overflow-wrap:anywhere}
.contour{color:transparent; -webkit-text-stroke:1.5px var(--bleu)}
@supports not (-webkit-text-stroke:1px #000){.contour{color:var(--bleu)}}
.intro{margin:0; color:var(--texte-2); max-width:620px; text-wrap:pretty}
.revision{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--texte-3); padding-right:8px}
.etiquette{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--texte-2); text-transform:uppercase}
.a-faire{color:var(--orange)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 17px;
  border:1px solid var(--trait); background:transparent; color:var(--texte-2);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{color:#FFF; border-color:var(--bleu)}
.btn--accent{border-color:var(--orange); background:rgba(255,122,47,.07); color:var(--orange)}
.btn--accent:hover{background:var(--orange); color:#1B0C03; border-color:var(--orange)}
.btn--danger{border-color:rgba(255,138,138,.5); color:var(--rouge)}
.btn--danger:hover{background:rgba(255,138,138,.12); color:#FFF; border-color:var(--rouge)}
.btn--petit{min-height:36px; padding:0 12px; font-size:10.5px}
.btn[aria-pressed="true"],.btn.actif{border-color:var(--orange); background:var(--orange); color:#0B1B2E}
.lien-action{display:inline-flex; align-items:center; min-height:44px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange)}
.lien-action:hover{color:#FFF}
form.en-ligne{display:inline}

/* ---------- flash ---------- */
.flashs{display:flex; flex-direction:column; gap:8px}
.flash{border:1px solid var(--trait); background:var(--carte); padding:10px 16px; font-size:15px}
.flash--ok{border-color:rgba(79,208,138,.55)}
.flash--ok::before{content:"✓ "; color:var(--vert)}
.flash--erreur{border-color:rgba(255,138,138,.6)}
.flash--erreur::before{content:"! "; color:var(--rouge); font-weight:700}

/* ---------- filters ---------- */
.filtres{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px}
.filtres input[type="search"]{flex:1 1 240px; min-width:0}
.puces{display:flex; flex-wrap:wrap; gap:6px}
.puce{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--trait); color:var(--texte-2); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase}
.puce[aria-current="true"]{border-color:var(--bleu); background:rgba(127,196,238,.14); color:#FFF}

/* ---------- cards ---------- */
.grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:20px}
.grille--serree{grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr)); gap:16px}
.carte{border:1px solid var(--trait); background:var(--carte); display:flex; flex-direction:column; color:var(--texte)}
a.carte:hover{border-color:var(--bleu); color:var(--texte)}
a.carte:hover h2,a.carte:hover h3{color:var(--orange)}
.carte__photo{height:132px; border-bottom:1px solid var(--trait-doux); background-color:var(--fond-2); background-image:repeating-linear-gradient(135deg,var(--grille) 0 1px,transparent 1px 12px); display:flex; align-items:center; justify-content:center; overflow:hidden}
.carte__photo img{width:100%; height:100%; object-fit:cover; display:block}
.carte__photo span{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--texte-2)}
.carte__corps{padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; flex:1}
.carte__tete{display:flex; flex-direction:column; gap:3px}
.carte__ref{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--orange); text-transform:uppercase}
.carte__titre{margin:0; font-family:var(--titre); font-weight:700; font-size:20px; line-height:1.15; letter-spacing:.045em; text-transform:uppercase; color:#FFF; overflow-wrap:anywhere}
.carte__meta{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--texte-2); text-transform:uppercase}
.chiffres{margin:0; border-top:1px solid var(--trait-doux); padding-top:12px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.chiffres > div{display:flex; flex-direction:column; gap:2px; min-width:0}
.chiffres dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--texte-2); text-transform:uppercase}
.chiffres dd{margin:0; font-family:var(--mono); font-size:15px; color:var(--texte)}
.chiffres dd.fort{font-family:var(--titre); font-weight:700; font-size:22px; line-height:1.15; color:#FFF}
.chiffres dd.orange{color:var(--orange)}
.prix-plateformes{list-style:none; margin:0; padding:0; border-top:1px solid var(--trait-doux); display:flex; flex-direction:column}
.prix-plateformes li{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; padding:8px 0; border-bottom:1px solid var(--trait-doux)}
.prix-plateformes li:last-child{border-bottom:0; padding-bottom:0}
.prix-plateformes .nom{flex:1 1 120px; min-width:0; font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--texte-2); text-transform:uppercase}
.prix-plateformes .pv{font-family:var(--titre); font-weight:700; font-size:20px; color:var(--orange)}
.prix-plateformes .marge{font-family:var(--mono); font-size:12px; color:var(--vert); min-width:86px; text-align:right}
.vide{border:1px dashed var(--trait); padding:28px 22px; color:var(--texte-2); display:flex; flex-direction:column; align-items:flex-start; gap:14px}

/* ---------- sections ---------- */
.section{display:flex; flex-direction:column; gap:12px; scroll-margin-top:20px}
.section__tete{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; border-bottom:1px solid var(--trait); padding-bottom:10px}
.section__no{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--orange)}
.section__titre{margin:0; flex:1 1 auto; font-family:var(--titre); font-weight:700; font-size:22px; letter-spacing:.05em; text-transform:uppercase; color:#FFF}
.section__resume{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--texte-2)}
.sous-titre{margin:8px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bleu)}

/* ---------- two columns ---------- */
.deux-colonnes{display:flex; flex-wrap:wrap; align-items:flex-start; gap:32px}
.colonne-principale{flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:36px}
.colonne-laterale{flex:1 1 360px; min-width:0; display:flex; flex-direction:column; gap:20px}
@media (min-width:980px){.colonne-laterale{position:sticky; top:20px}}

/* ---------- part lines ---------- */
.ligne{border:1px solid var(--trait); background:var(--carte); padding:16px 18px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; scroll-margin-top:20px}
.ligne--achat{border-color:var(--trait-doux); background:rgba(15,35,55,.6); padding:12px 18px; gap:8px 28px}
.ligne__nom{flex:1 1 250px; min-width:0; display:flex; flex-direction:column; gap:4px}
.ligne__titre{margin:0; font-family:var(--titre); font-weight:700; font-size:19px; letter-spacing:.045em; text-transform:uppercase; color:#FFF; overflow-wrap:anywhere}
.ligne--achat .ligne__titre{font-family:var(--texte-f); font-size:16px; font-weight:600; letter-spacing:0; text-transform:none}
.ligne__titre a{color:inherit}
.ligne__titre a:hover{color:var(--orange)}
.ligne__detail{margin:0; display:flex; flex-wrap:wrap; gap:22px}
.ligne__detail > div{display:flex; flex-direction:column; gap:2px}
.ligne__detail dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--texte-3)}
.ligne__detail dd{margin:0; font-family:var(--mono); font-size:14px}
.ligne__total{margin-left:auto; display:flex; align-items:baseline; gap:14px}
.ligne__qte{font-family:var(--mono); font-size:12px; color:var(--texte-2)}
.ligne__prix{font-family:var(--titre); font-weight:700; font-size:24px; letter-spacing:.02em; color:#FFF; min-width:78px; text-align:right}
.ligne--achat .ligne__prix{font-size:20px}
.ligne__alerte{flex-basis:100%; margin:0; font-size:14px; color:var(--orange)}
.rebut{display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; border:1px dashed var(--trait); padding:10px 18px}
.rebut span:first-child{flex:1 1 220px; font-size:15px; color:var(--texte-2)}

/* ---------- side panels ---------- */
.panneau{border:1px solid var(--bleu); background:var(--carte); padding:22px; display:flex; flex-direction:column; gap:16px}
.panneau--orange{border-color:rgba(255,122,47,.6)}
.panneau__titre{margin:0; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bleu)}
.panneau--orange .panneau__titre{color:var(--orange)}
.gros-chiffre{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
.gros-chiffre strong{font-family:var(--titre); font-weight:700; font-size:clamp(44px,6vw,60px); line-height:1.05; letter-spacing:.02em; color:#FFF}
.panneau--orange .gros-chiffre strong{font-size:48px; color:var(--orange)}
.gros-chiffre span{font-size:14px; color:var(--texte-2)}
.barre{display:flex; gap:2px; height:14px}
.barre > span{display:block; min-width:2px}
.legende{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.legende li{display:flex; align-items:center; gap:10px}
.legende .pastille{width:10px; height:10px; flex:none}
.legende .lib{flex:1 1 auto}
.legende .pct{font-family:var(--mono); font-size:12px; color:var(--texte-2)}
.legende .val{font-family:var(--mono); font-size:14px; min-width:64px; text-align:right}
.c-matiere{background:var(--orange)}
.c-machine{background:var(--bleu)}
.c-elec{background:var(--texte)}
.c-rebut{background:var(--orange-fonce)}
.c-achats{background:#6E8CA6}
.c-frais{background:#6E8CA6}
.c-marge{background:var(--vert)}
.pied-panneau{margin:0; border-top:1px solid var(--trait-doux); padding-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--texte-2); text-transform:uppercase}
.coefs{display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:6px}
.coefs .btn{padding:0 6px; font-size:13px; letter-spacing:.04em; text-transform:none}
.pv-plateforme{border-top:1px solid var(--trait-doux); padding-top:14px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 16px}
.pv-plateforme__nom{flex:1 1 170px; min-width:0; display:flex; flex-direction:column; gap:3px}
.pv-plateforme h3{margin:0; font-family:var(--titre); font-weight:700; font-size:18px; letter-spacing:.045em; text-transform:uppercase; color:#FFF}
.pv-plateforme .detail{font-family:var(--mono); font-size:11px; color:var(--texte-2)}
.pv-plateforme .part{font-family:var(--mono); font-size:11px; color:var(--vert)}
.pv-plateforme .pv{font-family:var(--titre); font-weight:700; font-size:34px; line-height:1.1; letter-spacing:.02em; color:var(--orange)}
.note{margin:0; font-size:14px; color:var(--texte-2); text-wrap:pretty}
.formule{margin:0; font-family:var(--mono); font-size:12px; line-height:1.7; color:var(--texte-2)}

/* ---------- definition rows (platforms, settings) ---------- */
.lignes-def{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.lignes-def > *{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 16px; border-top:1px solid var(--trait-doux); padding:10px 0}
.lignes-def .lib{flex:1 1 220px; min-width:0}
.lignes-def .val{font-family:var(--mono); font-size:14px}
.lignes-def .val.fort{font-family:var(--titre); font-weight:700; font-size:22px; color:#FFF}
.lignes-def .hors{color:var(--texte-3)}
dl.lignes-def dd{margin:0}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips a{display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border:1px solid var(--trait); color:var(--texte); font-size:15px}
.chips a:hover{border-color:var(--orange); color:var(--orange)}
.inactif{opacity:.6}

/* ---------- files ---------- */
.fichiers{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.fichiers li{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; border-top:1px solid var(--trait-doux); padding:10px 0}
.fichiers .nom{flex:1 1 220px; min-width:0; overflow-wrap:anywhere}
.fichiers .taille{font-family:var(--mono); font-size:12px; color:var(--texte-2)}

/* ---------- forms ---------- */
.formulaire{display:flex; flex-direction:column; gap:20px; max-width:760px}
.formulaire--large{max-width:none}
.champs{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:16px 20px}
.champ{display:flex; flex-direction:column; gap:6px; min-width:0}
.champ--plein{grid-column:1/-1}
.champ > label,.champ legend{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--texte-2)}
.champ--case{flex-direction:row; align-items:center; gap:10px; min-height:44px}
.champ--case > label{font-family:var(--texte-f); font-size:15px; letter-spacing:0; text-transform:none; color:var(--texte)}
.aide{margin:0; font-size:13.5px; color:var(--texte-2)}
.erreurs{list-style:none; margin:0; padding:0; color:var(--rouge); font-size:14px}
input[type="text"],input[type="search"],input[type="email"],input[type="password"],input[type="url"],input[type="number"],select,textarea{
  width:100%; min-height:44px; padding:8px 12px; border:1px solid var(--trait); background:#0A1A2B; color:var(--texte);
  font-family:var(--texte-f); font-size:16px; border-radius:0;
}
textarea{min-height:88px; resize:vertical}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--texte-2) 50%),linear-gradient(135deg,var(--texte-2) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:34px}
select option,select optgroup{background:#0A1A2B; color:var(--texte)}
input:hover,select:hover,textarea:hover{border-color:var(--bleu)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--rouge)}
input[type="checkbox"]{width:20px; height:20px; accent-color:var(--orange); margin:0}
input[type="file"]{font-family:var(--texte-f); font-size:15px; color:var(--texte-2); padding:10px 0}
input[type="file"]::file-selector-button{margin-right:12px; min-height:40px; padding:0 14px; border:1px solid var(--trait); background:transparent; color:var(--texte-2); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer}
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.collection{display:flex; flex-direction:column; gap:10px}
.collection__ligne{border:1px solid var(--trait-doux); background:rgba(15,35,55,.6); padding:14px 16px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px}
.collection__ligne .champs{flex:1 1 420px}
.encart{border:1px solid var(--trait); background:var(--carte); padding:20px 22px; display:flex; flex-direction:column; gap:16px}
.encart--danger{border-color:rgba(255,138,138,.35)}
.ligne-form{border:1px solid var(--trait); background:var(--carte); padding:16px 18px; display:flex; flex-direction:column; gap:14px; scroll-margin-top:20px}
.ligne-form__tete{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px}
.ligne-form__tete .ligne__titre{flex:1 1 auto}
.slots{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:12px 20px}

/* ---------- login ---------- */
.connexion{max-width:460px; margin:0 auto; padding:64px 20px; display:flex; flex-direction:column; gap:20px; width:100%}
/* In a column, the 420px basis of .tete__texte would become a height. */
.connexion .tete__texte{flex:none}

/* ---------- footer ---------- */
.pied{border-top:1px solid var(--trait-doux); padding:18px 20px; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--texte-3); text-transform:uppercase}

@media (max-width:560px){
  .page{padding:24px 16px 48px}
  .entete__dedans{padding:10px 16px}
  .nav{gap:0 18px}
  .ligne__total{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important}}