@charset "utf-8";
/* CSS Document */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --or:#e84d1c;
  --or-lt:#fff5f2;
  --or-bd:#ffd5c2;
  --bl:#3b7dd8;
  --bl-lt:#eef4ff;
  --bl-bd:#b8d0f8;
  --gr:#2c9e4b;
  --gr-lt:#f0fff4;
  --gr-bd:#b2ddb2;
  --mv:#8b5cf6;
  --mv-lt:#f5f3ff;
  --mv-bd:#c4b5fd;
  --warn-bg:#fff3cd;
  --warn-bd:#ffc107;
  --radius:10px;
  --sh:0 1px 8px rgba(0,0,0,.07);
}

body{
  background:#f3f4f6;
  font-family:'Segoe UI',Arial,sans-serif;
  color:#222;
}

/* ══════════════════════════════════════
   WRAPPER PRINCIPAL 2 COLONNES
══════════════════════════════════════ */
.calc-page{
  display:flex;
  align-items:flex-start;
  max-width:1280px;
  margin:0 auto;
  padding:30px 20px;
  gap:24px;
}

/* ══════════════════════════════════════
   PANNEAU GAUCHE — FORMULAIRE
══════════════════════════════════════ */
.form-left{
  flex:0 0 360px;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--sh);
  padding:22px 20px 26px;
}

.form-left h1{
  font-size:18px;
  font-weight:700;
  color:#111;
  margin-bottom:3px;
}
.form-left .subtitle{
  font-size:11px;
  color:#aaa;
  margin-bottom:14px;
}

/* Tabs */
.tab-nav{display:flex;gap:8px;margin-bottom:18px}
.tab-nav a{
  flex:1;
  padding:8px 6px;
  border-radius:7px;
  font-size:12px;
  font-weight:600;
  text-align:center;
  border:1.5px solid #e0e0e0;
  background:#fff;
  color:#888;
  text-decoration:none;
  display:block;
  transition:.2s;
}
.tab-nav a:hover{border-color:var(--or);color:var(--or)}
.tab-nav a.active{background:var(--or);border-color:var(--or);color:#fff}

/* Section titles */
.sec{
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#bbb;
  margin:16px 0 8px;
  padding-bottom:5px;
  border-bottom:1px solid #f0f0f0;
}

/* Form grid */
.row2{display:flex;gap:10px}
.row2>.fg{flex:1}
.fg{margin-bottom:10px}
.fg label{
  display:block;
  font-size:11px;
  font-weight:600;
  color:#666;
  margin-bottom:4px;
}
.fg small{font-size:10px;color:#ccc;margin-top:3px;display:block}
.fg input{
  width:100%;
  padding:7px 10px;
  border:1.5px solid #e5e5e5;
  border-radius:6px;
  font-size:14px;
  color:#222;
  background:#fff;
  outline:none;
  transition:border-color .2s;
  -moz-appearance:textfield;
}
.fg input::-webkit-outer-spin-button,
.fg input::-webkit-inner-spin-button{opacity:1}
.fg input:focus{border-color:var(--or)}

/* Étoile champ obligatoire */
.req{color:#dc3545;margin-left:2px;font-size:12px}

/* Champ invalide */
.fg input.champ-invalide{border-color:#dc3545!important;background:#fff5f5!important}
.msg-erreur{color:#dc3545;font-size:10px;margin-top:3px;display:none}
.fg input.champ-invalide ~ .msg-erreur{display:block}

/* Alerte globale validation */
.alert-valid{
  background:#fff5f5;border:1px solid #f5c6cb;color:#dc3545;
  padding:9px 13px;border-radius:6px;font-size:11.5px;
  margin-bottom:12px;display:none;font-weight:600}
.alert-valid ul{margin:4px 0 0 14px;padding:0;font-weight:400;font-size:11px}

/* Tooltip */
.tt-wrap{position:relative;display:inline-flex;align-items:center;gap:4px}
.tt-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;background:#bbb;color:#fff;
  font-size:9px;font-weight:800;cursor:help;flex-shrink:0;
  transition:background .15s;line-height:1;
}
.tt-icon:hover{background:var(--or)}
.tt-box{
  position:absolute;left:50%;bottom:calc(100% + 7px);
  transform:translateX(-50%);
  background:#222;color:#fff;font-size:10.5px;line-height:1.45;
  border-radius:7px;padding:9px 12px;width:230px;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  pointer-events:none;opacity:0;transition:opacity .15s;z-index:200;
  font-weight:400;
}
.tt-box::after{
  content:'';position:absolute;top:100%;left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#222;
}
.tt-icon:hover .tt-box,
.tt-wrap:hover .tt-box{opacity:1}

/* Alerte IP */
.alert-ip{
  background:#fff3cd;
  border:1px solid #ffc107;
  color:#856404;
  padding:9px 12px;
  border-radius:6px;
  font-size:11.5px;
  margin-bottom:10px;
  display:none;
}
.ctr{font-size:10.5px;color:#ccc;text-align:right;margin-bottom:6px}
.ctr span{font-weight:700;color:#aaa}

/* Bouton calculer */
.btn-calc{
  width:100%;
  padding:11px;
  background:var(--or);
  color:#fff;
  border:none;
  border-radius:7px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  margin-top:12px;
  transition:background .2s;
}
.btn-calc:hover{background:#cc3e0f}

/* ══════════════════════════════════════
   PANNEAU DROIT — RÉSULTATS
══════════════════════════════════════ */
.result-right{flex:1;min-width:0}

.res-title{
	font-size:18px;
	font-weight:bolder;
	color:#333;
	margin-bottom:14px;
}

/* Header résultat : texte + RESET */
.res-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:5px;
}
.res-top .res-desc{
  font-size:12.5px;
  color:#666;
  line-height:1.5;
}
.btn-reset{
  padding:8px 20px;
  background:var(--gr);
  color:#fff;
  border:none;
  border-radius:7px;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
  transition:background .2s;
}
.btn-reset:hover{background:#237a3b}

/* Sous-label */
.res-sublabel{
  font-size:12px;
  color:#aaa;
  margin-bottom:14px;
}

/* ── Grille détail coûts + prix revient ── */
.detail-grid{
  display:flex;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--sh);
  margin-bottom:14px;
  overflow:hidden;
  display:none;
}
.detail-bloc{flex:1;padding:14px 16px}
.detail-bloc h4{
  font-size:12.5px;
  font-weight:700;
  color:#111;
  margin-bottom:10px;
}
.detail-row{
  display:flex;
  justify-content:space-between;
  padding:5px 0;
  font-size:12px;
  border-bottom:1px solid #f5f5f5;
}
.detail-row:last-child{border:none}
.detail-row .dl{color:#888}
.detail-row .dv{font-weight:700;color:#222}
.detail-divider{width:1px;background:#f0f0f0;align-self:stretch}

/* ── Cards marge ── */
.cards-wrap{display:flex;gap:12px}

.mcard{
  flex:1;
  border-radius:var(--radius);
  box-shadow:var(--sh);
  overflow:hidden;
  display:none;
}

/* Header card */
.card-head{
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 13px;
}
.card-bars{
  display:flex;
  gap:2px;
  align-items:flex-end;
  height:16px;
}
.card-bars span{
  display:inline-block;
  width:4px;
  border-radius:2px 2px 0 0;
}
.card-title{font-size:11px;font-weight:800;letter-spacing:.03em}

/* ── Card BLEUE (marge souhaitée) ── */
.mcard-blue .card-head{
  background:var(--bl-lt);
  border-bottom:1px solid var(--bl-bd);
}
.mcard-blue .card-bars span:nth-child(1){height:6px;background:#3b7dd8}
.mcard-blue .card-bars span:nth-child(2){height:11px;background:#6fa1e8}
.mcard-blue .card-bars span:nth-child(3){height:16px;background:#a8c7f5}
.mcard-blue .card-title{color:var(--bl)}

/* ── Card MAUVE (prix vente saisi) ── */
.mcard-green .card-head{
  background:var(--mv-lt);
  border-bottom:1px solid var(--mv-bd);
}
.mcard-green .card-bars span:nth-child(1){height:6px;background:#8b5cf6}
.mcard-green .card-bars span:nth-child(2){height:11px;background:#a78bfa}
.mcard-green .card-bars span:nth-child(3){height:16px;background:#c4b5fd}
.mcard-green .card-title{color:var(--mv)}

/* Body card */
.card-body{background:#fff;padding:11px 13px 14px}
.card-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:5px 0;
  font-size:12px;
  border-bottom:1px solid #f5f5f5;
}
.card-row:last-of-type{border:none}
.card-row .cr-label{color:#888;font-size:11px;line-height:1.4}
.card-row .cr-val{font-weight:700;font-size:13px;color:#222}
.card-row .cr-val-blue{color:var(--bl);font-weight:700;font-size:13px}
.card-row .cr-val-green{color:var(--mv);font-weight:700;font-size:13px}

/* Pills */
.pill{
  display:inline-block;
  padding:3px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:700;
  color:#fff;
}
.pill-blue {background:var(--bl)}
.pill-green{background:var(--mv)}

/* Badge marge totale — reste VERT (résultat) */
.marge-badge{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#f7f8fb;
  border-radius:6px;
  padding:7px 11px;
  margin:9px 0 3px;
}
.marge-badge .mb-label{font-size:11px;color:#888}
.marge-badge .mb-val{
  font-size:13px;
  font-weight:800;
  padding:3px 12px;
  border-radius:20px;
  color:#fff;
  background:var(--gr);
  transition:background .3s, color .3s;
}
/* Badge négatif → warning */
.marge-badge .mb-val.warn{
  background:var(--warn-bg);
  color:#333;
  border:1px solid var(--warn-bd);
}

/* Texte % marge réelle */
.pct-text{
  font-size:11px;
  color:#999;
  text-align:center;
  margin-top:6px;
  padding:0 4px;
}
.pct-text strong{color:#555}

/* Jauge speedometer */
.gauge-wrap{display:flex;justify-content:center;margin-top:10px}
.gauge-wrap svg{overflow:visible}

.titre-card {
  background: #fff;
  border-radius: var(--rad);
  box-shadow: var(--shad);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.titre-card h1 {
  margin: 0 0 4px;
}
.titre-card .sub {
  margin: 0;
}
/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:960px){
  .calc-page{flex-direction:column;padding:14px}
  .form-left{flex:none;width:100%;position:static;max-height:none}
  .cards-wrap{flex-direction:column}
  .detail-grid{flex-direction:column}
  .detail-divider{width:auto;height:1px}
}