:root{
  --navy:#001D69; --navy-700:#0a2a86; --yellow:#F5A800; --amber:#F5A800; --amber-600:#e09a00;
  --heart:#E63329; --cream:#FBF7EF; --paper:#fff; --ink:#23272f; --muted:#6b7180;
  --line:#ece6d8; --font:"Montserrat",system-ui,Arial,sans-serif;
  --radius:14px; --shadow:0 14px 40px rgba(0,29,105,.10); --shadow-sm:0 4px 14px rgba(0,29,105,.07);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
.hidden{display:none!important}

/* ===== Boutons ===== */
button{font-family:var(--font);font-weight:700;cursor:pointer;border:0;border-radius:10px;font-size:14px;
  transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease}
button:disabled{opacity:.45;cursor:not-allowed}
button:active:not(:disabled){transform:translateY(1px)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.btn-primary{background:var(--amber);color:var(--navy);padding:13px 22px;border-radius:12px;font-weight:800;
  box-shadow:0 6px 18px rgba(245,168,0,.32)}
.btn-primary:hover:not(:disabled){background:var(--amber-600)}
.btn-outline{background:var(--paper);color:var(--navy);border:2px solid #d7ddea;padding:10px 16px}
.btn-outline:hover:not(:disabled){border-color:var(--navy);background:#f6f8fc}
.btn-drive{background:var(--navy);color:#fff;padding:9px 16px}
.btn-drive:hover:not(:disabled){background:var(--navy-700)}
.btn-text{background:transparent;color:var(--navy);padding:8px 12px;font-weight:600;opacity:.8}
.btn-text:hover{opacity:1}

.err{color:var(--heart);min-height:1.2em;margin:8px 0 0;font-weight:600;font-size:13px}

/* ===== Login ===== */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(125% 80% at 50% -10%, #fff 0%, var(--cream) 62%)}
.login-card{background:var(--paper);padding:42px 34px;border-radius:20px;width:360px;max-width:100%;
  text-align:center;box-shadow:var(--shadow);border:1px solid var(--line)}
.login-logo{width:172px;max-width:72%;display:block;margin:0 auto 8px}
.login-sub{color:var(--muted);margin:0 0 26px;font-weight:600;font-size:14px}
.login-card input{width:100%;padding:13px 14px;border:2px solid #e4e8f1;border-radius:11px;
  margin-bottom:14px;font-size:15px;font-family:var(--font)}
.login-card input:focus{outline:none;border-color:var(--navy)}
.login-card .btn-primary{width:100%}

/* ===== Topbar ===== */
.topbar{background:var(--paper);padding:13px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:3px solid var(--amber);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand-logo{height:30px;display:block}
.topbar-label{color:var(--navy);font-weight:800;font-size:15px;letter-spacing:.2px;
  padding-left:14px;border-left:1px solid var(--line)}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ===== Espace de travail (les 3 étapes) ===== */
.workspace{max-width:760px;margin:0 auto;padding:42px 24px 12px}
.workspace-head{margin:0 0 26px}
.workspace-head h1{color:var(--navy);font-weight:900;font-size:30px;letter-spacing:-.5px;margin:0 0 6px}
.workspace-head p{color:var(--muted);font-weight:600;font-size:15px;margin:0;max-width:50ch}

.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.step{display:flex;gap:18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;box-shadow:var(--shadow-sm)}
.step-mark{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:16px;margin-top:2px}
.step-body{flex:1;min-width:0}
.step-body h2{color:var(--navy);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.6px;
  margin:3px 0 5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.step-body .opt{font-size:11px;text-transform:none;letter-spacing:0;color:var(--amber-600);
  background:#fff6e2;border:1px solid #f3e2b6;padding:2px 9px;border-radius:20px;font-weight:700}
.step-help{color:var(--muted);font-weight:500;font-size:13.5px;margin:0 0 16px;line-height:1.55}

.pickers{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dropzone{position:relative;display:flex;align-items:center;gap:11px;flex:1;min-width:230px;cursor:pointer;
  background:#fbfcfe;border:2px dashed #cdd6e6;border-radius:12px;padding:14px 16px;color:var(--navy);
  font-weight:700;font-size:14px;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.drag{border-color:var(--amber);background:#fffaf0}
.dropzone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dropzone-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:0 0 26px;
  background:var(--navy);color:#fff;font-size:18px;line-height:1}
.picked{margin:13px 0 0;color:var(--navy);font-weight:600;font-size:13px}
.picked:empty{display:none}

.drive-save{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;
  padding:12px 14px;background:#fbfcfe;border:1px solid #eef1f6;border-radius:11px}
.drive-save-label{color:var(--navy);font-weight:700;font-size:13px}
.btn-sm{padding:7px 13px;font-size:13px}
.drive-save .picked{margin:0}

.consignes{margin:0 0 16px}
.consignes-label{display:block;color:var(--navy);font-weight:800;font-size:13px;
  text-transform:uppercase;letter-spacing:.4px;margin:0 0 6px}
.consignes-label .opt{margin-left:6px}
.consignes .step-help{margin:0 0 9px}
.consignes-input{width:100%;box-sizing:border-box;font-family:var(--font);font-size:14px;color:var(--ink);
  background:#fbfcfe;border:2px solid #d7ddea;border-radius:12px;padding:12px 14px;line-height:1.5;resize:vertical}
.consignes-input:focus{outline:none;border-color:var(--amber);background:#fffaf0}
.consignes-input::placeholder{color:#9aa1b1}

.remise-row{margin:6px 0 14px}
.remise-label{display:block;font-weight:700;color:var(--navy);font-size:14px;margin-bottom:6px}
.remise-field{display:inline-flex;align-items:center;gap:6px}
.remise-input{width:90px;box-sizing:border-box;font-family:var(--font);font-size:15px;font-weight:700;color:var(--ink);
  background:#fbfcfe;border:2px solid #d7ddea;border-radius:12px;padding:9px 12px}
.remise-input:focus{outline:none;border-color:var(--amber);background:#fffaf0}
.remise-unit{font-weight:700;color:var(--navy)}
.remise-row .step-help{margin:7px 0 0}
.generate-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.status{color:var(--muted);font-weight:600;font-size:13.5px;margin:15px 0 0;min-height:1.2em}
.status:empty{display:none}

@media (prefers-reduced-motion:no-preference){
  .step{animation:rise .4s ease both}
  .step:nth-child(2){animation-delay:.06s}
  .step:nth-child(3){animation-delay:.12s}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (max-width:560px){
  .workspace{padding:28px 16px 8px}
  .workspace-head h1{font-size:25px}
  .step{padding:18px 16px;gap:14px}
  .topbar-label{display:none}
}

/* ===== OFFER : deck 16:9 à la marque ===== */
.offer{display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px}
.offer-page{background:#fff;width:1280px;max-width:100%;aspect-ratio:16/9;
  box-shadow:0 6px 30px rgba(0,0,0,.12);position:relative;overflow:hidden;
  /* échelle interne : 1px de design = (largeur/1280) ; on dimensionne en % */
  container-type:inline-size}
.offer-page .pg{position:absolute;right:3.2%;bottom:4%;color:var(--navy);font-weight:800;
  font-size:1.4cqw;opacity:.6;z-index:3}

/* ===== Pages marketing FIXES = images pristine plein cadre (assets/deck/page-*.jpg) ===== */
.offer-page.deck{background:#fff}
.offer-page.deck img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---- Page 1 : splash logo (sans logo partenaire) ---- */
.offer-page.logos{display:grid;place-items:center;background:#fff;
  border-top:1.1cqw solid var(--yellow);border-bottom:1.1cqw solid var(--yellow)}
.logos .big-logo{width:38%;display:block;margin:0 auto .2cqw}
.logos .st{color:var(--navy);font-weight:600;font-size:2cqw;line-height:1.15;text-align:center}

/* ---- Cover (page 2) ---- */
.cover2{background:#000}
.cover2 .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.cover2 .card{position:absolute;top:6%;left:4.2%;width:42%;height:88%;background:#fff;
  border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:4.5cqw 3cqw;text-align:center}
.cover2 .logo{width:34%;margin:0 auto .6cqw}
.cover2 .tag{color:var(--yellow);font-weight:800;font-size:1.5cqw;margin:0 0 2.4cqw}
.cover2 .kick{display:inline-block;background:var(--yellow);color:#fff;font-weight:900;
  font-size:2cqw;letter-spacing:.5px;padding:.5cqw 1.2cqw;border-radius:3px;margin:0 0 1cqw}
.cover2 h2{color:var(--navy);font-weight:900;font-size:2.6cqw;line-height:1.1;margin:0 0 2.2cqw}
.cover2 .lots{color:var(--navy);font-weight:800;font-size:1.7cqw;margin:0 0 .6cqw}
.cover2 .meta{color:#2b3447;font-weight:600;font-size:1.35cqw;margin:0 0 2.4cqw}
.cover2 .url{display:inline-block;background:var(--navy);color:#fff;font-weight:800;font-size:1.3cqw;
  text-decoration:none;padding:.7cqw 1.6cqw;border-radius:20px;margin:0 0 2.4cqw}
.cover2 .client{color:var(--navy);font-weight:900;font-size:1.9cqw}

/* ---- Pages dynamiques menu-driven (service / tarifaire / note interne) ---- */
.offer-page.service,.offer-page.tarifaire,.offer-page.interne{padding:4.5cqw 5cqw;display:flex;flex-direction:column}

.sec-title{color:var(--navy);font-weight:900;font-size:2.3cqw;line-height:1.1;letter-spacing:.3px;
  margin:0 0 1.4cqw;text-transform:uppercase}
.sec-title .pax{display:inline-block;vertical-align:middle;margin-left:1cqw;background:var(--yellow);color:#fff;
  font-size:1.15cqw;font-weight:800;text-transform:none;padding:.3cqw 1cqw;border-radius:20px;letter-spacing:0}

/* page service : sous-titre + menu (colonnes de plats) + tableau */
.service .sub{color:#5a6172;font-size:1.12cqw;line-height:1.4;margin:0 0 1.6cqw;font-style:italic}
.service .menu{column-count:2;column-gap:3cqw;margin-bottom:1.8cqw}
.service .msec{break-inside:avoid;margin-bottom:1.3cqw}
.service .msec h4{color:var(--navy);font-weight:800;font-size:1.35cqw;margin:0 0 .4cqw;display:inline-block;
  border-bottom:.22cqw solid var(--yellow);padding-bottom:.25cqw}
.service .msec ul{margin:.4cqw 0 0;padding:0;list-style:none}
.service .msec li{font-size:1.22cqw;line-height:1.4;color:#2b3447;padding:.15cqw 0 .15cqw 1.5cqw;position:relative}
.service .msec li::before{content:"›";position:absolute;left:0;color:var(--yellow);font-weight:900}
/* Puces du deck « cas pratique » (scenarioPage) : menu du DQE découpé en composantes */
.service .menu-bullets{margin:0;padding:0;list-style:none}
.service .menu-bullets li{font-size:1.32cqw;line-height:1.45;color:#2b3447;padding:.35cqw 0 .35cqw 1.7cqw;
  position:relative;break-inside:avoid;margin-bottom:.25cqw}
.service .menu-bullets li::before{content:"›";position:absolute;left:0;color:var(--yellow);font-weight:900}

/* tableaux (lignes service + récap tarifaire) */
table.lignes,table.recap{width:100%;border-collapse:collapse;font-size:1.22cqw}
table.lignes{margin-top:auto}
table.lignes th,table.recap th{background:var(--navy);color:#fff;font-weight:800;text-align:left;
  padding:.65cqw 1cqw;font-size:1.12cqw}
table.lignes td,table.recap td{padding:.55cqw 1cqw;border-bottom:1px solid #eef1f6;color:#2b3447}
.num{text-align:right;white-space:nowrap}
table.lignes th.num,table.recap th.num{text-align:right}
table.lignes td.q{text-align:center;font-weight:700;color:var(--navy)}
table.lignes tfoot td,table.recap tfoot td{font-weight:900;color:var(--navy);font-size:1.4cqw;
  border-top:.2cqw solid var(--navy);border-bottom:0;background:#f6f8fc}
.sd{color:#b06a00;font-style:italic}
.sd-note{font-size:1.05cqw;color:#7a623a;margin:1.1cqw 0 0;font-style:italic}

/* page détail logistique : plusieurs petits tableaux (personnel / transport / matériel), en 2 colonnes */
.logistique-detail .logblocs{display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw 3cqw;
  margin-top:.6cqw;align-content:start}
.logistique-detail .logbloc{break-inside:avoid;min-width:0}
.logistique-detail .logbloc h4{color:var(--navy);font-weight:800;font-size:1.4cqw;margin:0 0 .5cqw;
  border-bottom:.22cqw solid var(--yellow);padding-bottom:.25cqw;display:inline-block}
.logistique-detail table.lignes{margin-top:.4cqw}
.logistique-detail table.lignes tfoot td{font-size:1.18cqw}

/* proposition tarifaire : table centrée, plus grande */
.tarifaire .recap{max-width:80%;margin:1.5cqw auto 0;font-size:1.5cqw}
.tarifaire .recap th{font-size:1.3cqw}
.tarifaire .recap tfoot td{font-size:1.75cqw}

/* note interne (page de travail) */
.offer-page.interne{background:#fffdf5}
.interne .warn{color:#b06a00;font-weight:700;font-size:1.05cqw;text-transform:none;letter-spacing:0}
.interne .note{font-size:1.18cqw;line-height:1.55;color:#3a414f;white-space:pre-wrap;margin:0;overflow:auto}

/* PRINT */
@media print{
  @page{size:13.333in 7.5in;margin:0}   /* 16:9 (format du deck), pas A4 */
  body{background:#fff}
  .no-print,.topbar,.workspace,.login{display:none!important}
  .offer{padding:0;gap:0}
  .offer-page{box-shadow:none;width:100%;max-width:none;aspect-ratio:auto;height:100vh;
    page-break-after:always;break-after:page;border:0}
  .offer-page:last-child{page-break-after:auto}
}