/* GÉNÉRÉ depuis logiciel/interface.html — ne pas modifier. */
:root{
--page:#f4f2ee; --surface:#ffffff; --surface2:#faf9f6;
--ink:#0b0b0b; --ink2:#52514e; --muted:#898781;
--line:#e6e3db; --line2:#efece5;
--brand:#123a63; --brand2:#1c5cab; --brand3:#2a78d6;
--seq1:#cde2fb; --seq2:#86b6ef; --seq3:#3987e5; --seq4:#1c5cab;
--good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
--good-bg:#e7f5e7; --warning-bg:#fdf1d8; --critical-bg:#fbe6e6;
--track:#eceae3;
--shadow:0 1px 2px rgba(11,11,11,.04),0 8px 24px rgba(11,11,11,.05);
--shadow-lg:0 4px 12px rgba(11,11,11,.06),0 20px 48px rgba(18,58,99,.10);
--radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);
font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5;
-webkit-font-smoothing:antialiased}
/* ---------- En-tête ---------- */
/* Bandeau de marque SO Courtage : la photo passe SOUS un voile bleu nuit,
assez dense pour que le texte blanc reste lisible. Le degrade final sert
de repli si fond.webp est absent. */
header{position:relative;overflow:hidden;color:#fff;
background:
linear-gradient(100deg,rgba(9,32,58,.95) 0%,rgba(14,47,82,.86) 42%,rgba(11,40,71,.80) 100%),
url("banniere.webp") center 30% / cover no-repeat,
linear-gradient(120deg,#0e2f52 0%,#123a63 45%,#1c5cab 100%);
padding:30px 30px 34px}
header .inner{max-width:1120px;margin:0 auto;position:relative;z-index:1}
.brand-row{display:flex;align-items:center;gap:12px}
.marque{margin-left:auto;height:54px;width:auto;flex-shrink:0;
filter:drop-shadow(0 3px 12px rgba(0,0,0,.5))}
@media(max-width:760px){.marque{display:none}}
.logo{width:58px;height:58px;border-radius:17px;overflow:hidden;flex-shrink:0;
border:1px solid rgba(255,255,255,.28);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.logo img{width:100%;height:100%;object-fit:cover;object-position:center 16%;display:block}
header h1{margin:0;font-size:22px;font-weight:650;letter-spacing:-.01em}
header .sub{margin:3px 0 0;opacity:.82;font-size:13px;max-width:640px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.chip{font-size:11.5px;padding:5px 11px;border-radius:20px;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
/* ---------- Structure ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:24px 24px 12px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:860px){.grid{grid-template-columns:1fr}}
.carte{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
padding:20px 22px;margin-bottom:20px;box-shadow:var(--shadow)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:var(--brand3)}
.carte h2{margin:2px 0 15px;font-size:16.5px;font-weight:640;letter-spacing:-.01em;
color:var(--ink);display:flex;align-items:center;gap:9px}
.carte h2 .ic{font-size:17px}
/* ---------- Champs ---------- */
label{display:block;font-size:12px;color:var(--ink2);margin:12px 0 4px;font-weight:550}
input,select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
font-size:14px;font-family:inherit;background:var(--surface2);color:var(--ink);
transition:border-color .15s,box-shadow .15s,background .15s}
input:hover,select:hover{border-color:#d3cfc5}
input:focus,select:focus{outline:none;border-color:var(--brand3);background:#fff;
box-shadow:0 0 0 3.5px rgba(42,120,214,.14)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.ligne{display:grid;grid-template-columns:1fr 108px 132px 38px;gap:9px;
align-items:end;margin-bottom:9px}
.ligne.charge{grid-template-columns:1fr 132px 38px}
.btn-mini{background:var(--surface2);border:1px solid var(--line);border-radius:9px;
cursor:pointer;font-size:18px;color:var(--muted);height:41px;transition:.15s}
.btn-mini:hover{background:var(--critical-bg);color:var(--critical);border-color:#f0cccc}
.btn-add{background:none;border:1.5px dashed var(--line);color:var(--brand2);
padding:9px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:550;
width:100%;margin-top:6px;transition:.15s}
.btn-add:hover{background:#eef4fb;border-color:var(--brand3)}
.slider-row{display:grid;grid-template-columns:150px 1fr 46px;gap:12px;
align-items:center;margin-bottom:10px}
.slider-row label{margin:0}
.slider-row output{font-weight:700;text-align:right;font-size:14px;color:var(--brand2);
font-variant-numeric:tabular-nums}
input[type=range]{padding:0;accent-color:var(--brand3);height:6px}
/* ---------- Boutons ---------- */
.btn{padding:12px 22px;border-radius:11px;border:none;cursor:pointer;
font-size:14px;font-weight:600;font-family:inherit;transition:.15s;
display:inline-flex;align-items:center;gap:8px}
.btn-primary{background:linear-gradient(120deg,#1c5cab,#2a78d6);color:#fff;
box-shadow:0 6px 18px rgba(28,92,171,.28)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px);
box-shadow:0 10px 24px rgba(28,92,171,.34)}
.btn-primary.big{font-size:15.5px;padding:15px 34px;border-radius:13px}
.btn-ghost{background:var(--surface);color:var(--brand2);border:1px solid var(--line)}
.btn-ghost:hover{background:#eef4fb;border-color:var(--brand3)}
.cta{display:flex;justify-content:center;margin:8px 0 26px}
/* ---------- Import ---------- */
#fichiers{padding:11px;border:1.5px dashed var(--line);background:var(--surface2);
cursor:pointer;border-radius:11px}
#fichiers:hover{border-color:var(--brand3);background:#eef4fb}
.doc{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:12px;
background:var(--surface2)}
.doc-titre{font-weight:640;color:var(--ink);font-size:14px}
.doc-type{display:inline-block;font-size:11px;background:#e7eef8;color:var(--brand2);
padding:2px 10px;border-radius:12px;margin-left:8px;font-weight:600}
.doc-avert{background:var(--warning-bg);color:#8a5a00;padding:9px 11px;border-radius:9px;
font-size:12.5px;margin:9px 0}
.sugg{display:flex;justify-content:space-between;align-items:center;gap:10px;
padding:8px 0;border-bottom:1px solid var(--line2);font-size:13px}
.sugg .montant{font-weight:700;font-variant-numeric:tabular-nums}
.btn-sugg{background:var(--brand2);color:#fff;border:none;border-radius:8px;
padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s}
.btn-sugg.charge{background:var(--ink2)}
.btn-sugg:hover{filter:brightness(1.12)}
details{margin-top:10px;font-size:12.5px}
details summary{cursor:pointer;color:var(--brand2);font-weight:550;padding:4px 0}
details pre{white-space:pre-wrap;background:#fff;border:1px solid var(--line);
border-radius:9px;padding:11px;max-height:260px;overflow:auto;font-size:11.5px}
.cand{display:flex;justify-content:space-between;gap:9px;padding:6px 0;
border-bottom:1px solid var(--line2);align-items:center}
.cand .ctx{color:var(--ink2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-row{display:flex;gap:10px;align-items:center;padding:5px 0;font-size:13px}
.cat-row .pill{white-space:nowrap;min-width:210px}
.cat-items{color:var(--ink2)}
@media(max-width:640px){.cat-row{flex-direction:column;align-items:flex-start;gap:2px}}
.err{background:var(--critical-bg);color:#8a1f1f;padding:13px 15px;border-radius:11px;
margin-bottom:18px;display:none;border:1px solid #f0cccc;font-size:13.5px}
/* ---------- Résultats / dashboard ---------- */
#resultats{display:none}
.verdict{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:14px;
margin-bottom:20px;font-size:15px;font-weight:600;border:1px solid}
.verdict .vic{font-size:26px}
.verdict.good{background:var(--good-bg);color:#0a6b0a;border-color:#bfe3bf}
.verdict.warn{background:var(--warning-bg);color:#8a5a00;border-color:#f2d99a}
.verdict.bad{background:var(--critical-bg);color:#8a1f1f;border-color:#f0cccc}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
@media(max-width:720px){.kpi{grid-template-columns:1fr 1fr}}
.box{background:var(--surface);border:1px solid var(--line);border-radius:14px;
padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand3)}
.box.b-good::before{background:var(--good)} .box.b-warn::before{background:var(--warning)}
.box.b-bad::before{background:var(--critical)}
.box .l{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;
letter-spacing:.05em}
.box .v{font-size:25px;font-weight:720;margin-top:5px;letter-spacing:-.02em}
.box .s{font-size:11.5px;color:var(--ink2);margin-top:3px}
.duo-viz{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:720px){.duo-viz{grid-template-columns:1fr}}
.viz-center{display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring{width:170px;height:170px}
.ring-num{font-size:38px;font-weight:760;fill:var(--ink)}
.ring-lbl{font-size:13px;fill:var(--muted);font-weight:600}
.gauge{width:230px;height:150px}
.gauge-num{font-size:34px;font-weight:760}
.gauge-lbl{font-size:11px;fill:var(--muted)}
.legende{text-align:center;font-size:12.5px;color:var(--ink2);margin-top:6px}
.legende b{color:var(--ink)}
/* barres horizontales */
.bars{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.bar-row{display:grid;grid-template-columns:66px 1fr auto;gap:12px;align-items:center;font-size:13px}
.bar-row .cap{color:var(--ink2);font-weight:550}
.bar-track{background:var(--track);border-radius:7px;height:24px;overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:7px;min-width:3px;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.bar-val{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.seuil-mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.55}
.seuil-cap{font-size:10.5px;color:var(--muted);text-align:right;margin-top:2px}
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line2)}
thead th{color:var(--muted);font-weight:650;font-size:11px;text-transform:uppercase;
letter-spacing:.04em;border-bottom:1px solid var(--line)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--surface2)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
font-size:11.5px;font-weight:650}
.ok{background:var(--good-bg);color:#0a6b0a} .warn{background:var(--warning-bg);color:#8a5a00}
.bad{background:var(--critical-bg);color:#8a1f1f}
.note{font-size:12px;color:var(--ink2);margin-top:10px}
.regles{background:var(--surface2)}
.regles .note{font-style:normal}
footer{text-align:center;color:var(--muted);font-size:11.5px;padding:26px}
/* ---------- Questionnaire gratuit ---------- */
.g-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:720px){.g-grid{grid-template-columns:1fr 1fr}}
.feu{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:22px;
font-weight:700;font-size:15px}
.feu.vert{background:var(--good-bg);color:#0a6b0a}
.feu.orange{background:var(--warning-bg);color:#8a5a00}
.feu.rouge{background:var(--critical-bg);color:#8a1f1f}
.filigrane{position:relative;overflow:hidden}
.filigrane::after{content:"ESTIMATION INDICATIVE";position:absolute;inset:0;display:flex;
align-items:center;justify-content:center;font-size:30px;font-weight:800;
color:rgba(18,58,99,.07);transform:rotate(-16deg);pointer-events:none;letter-spacing:.12em}
.g-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media(max-width:640px){.g-kpis{grid-template-columns:1fr 1fr}}
.g-cta{margin-top:14px;padding:12px 14px;background:#eef4fb;border:1px solid var(--line);
border-radius:11px;font-size:13.5px}
/* ---------- Contrôle bulletins / fraude ---------- */
.bulletin{border:1px solid var(--line);border-radius:12px;padding:12px 14px;
margin-bottom:10px;background:var(--surface2);position:relative}
.bull-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
@media(max-width:720px){.bull-grid{grid-template-columns:repeat(2,1fr)}}
.bull-grid label{font-size:10.5px;margin:4px 0 2px}
.bull-grid input{padding:7px 8px;font-size:13px}
.bull-rm{position:absolute;top:10px;right:10px;height:30px;width:30px;font-size:16px}
.fraude-tete{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.fraude-score{font-size:34px;font-weight:770;letter-spacing:-.02em}
.band-bar{flex:1;min-width:180px}
.finding{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:11px 0;
border-bottom:1px solid var(--line2);align-items:start}
.finding .lib{font-weight:600;font-size:13.5px}
.finding .obs{font-size:12px;color:var(--ink2);margin-top:3px}
.finding .obs b{color:var(--ink);font-variant-numeric:tabular-nums}
.pieces{background:var(--surface2);border:1px solid var(--line);border-radius:11px;
padding:12px 14px 12px 30px;margin-top:12px;font-size:13px}
.pieces li{margin:3px 0}
.suspendu{background:var(--warning-bg);color:#8a5a00;border:1px solid #f2d99a;
border-radius:9px;padding:8px 11px;font-size:12.5px;margin-top:8px;font-weight:600}
/* ---------- Analyse des relevés de compte ---------- */
.rel-tete{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.rel-chip{font-size:11.5px;padding:4px 11px;border-radius:20px;background:#eef4fb;
color:var(--brand2);border:1px solid #d6e4f5;font-weight:600}
.rel-chip.gris{background:var(--surface2);color:var(--ink2);border-color:var(--line)}
.rel-bloc{margin-top:16px}
.rel-bloc h3{font-size:13px;font-weight:700;margin:0 0 4px;color:var(--ink);
display:flex;align-items:center;gap:7px}
.rel-vide{font-size:12.5px;color:var(--muted);padding:6px 0}
.rel-lib{font-weight:550}
.rel-meta{font-size:11px;color:var(--muted);margin-top:2px}
.rel-alerte{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:10px 0;
border-bottom:1px solid var(--line2);align-items:start;font-size:13px}
.rel-alerte .titre{font-weight:600}
.rel-alerte .msg{font-size:12.5px;color:var(--ink2);margin-top:2px}
.rel-total{font-weight:700;font-variant-numeric:tabular-nums}
.rel-releve{margin-top:14px;border:1px solid var(--line);border-radius:11px;
padding:10px 12px;background:var(--surface2);break-inside:avoid;page-break-inside:avoid}
.rel-releve-titre{font-size:12.5px;font-weight:700;color:var(--brand2);margin-bottom:2px}
.rel-releve table{font-size:12px}
.rel-releve td,.rel-releve th{padding:6px 8px}
/* ---------- Impression / PDF ---------- */
.barre-impression{display:flex;justify-content:flex-end;margin-bottom:14px}
.btn-print{background:var(--good);color:#fff;border:none;border-radius:11px;
padding:11px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.btn-print:hover{filter:brightness(.95)}
.print-entete{display:none}
/* logo en encre bleu nuit : la version claire serait invisible sur papier */
.print-marque{height:40px;width:auto;display:block;margin-bottom:9px}
.print-entete h1{font-size:20px;margin:0 0 2px;color:var(--brand)}
.print-entete .date{font-size:12px;color:var(--ink2)}
.print-entete .avert{font-size:11px;color:var(--muted);margin-top:6px}
@media print{
@page{margin:13mm}
header,footer,.toolbar,.cta,.actions,#erreur,.grid,#import-carte,#fraude-carte,#gratuit-carte,#releves-carte,.barre-impression{display:none !important}
body{background:#fff;color:#000}
.wrap{max-width:100%;padding:0;margin:0}
#resultats{display:block !important}
.print-entete{display:block;border-bottom:2.5px solid var(--brand);padding-bottom:9px;margin-bottom:16px}
.carte,.box{box-shadow:none;border:1px solid #ccc;break-inside:avoid;page-break-inside:avoid}
.kpi,.duo-viz,.bar-row{break-inside:avoid}
.pill{border:1px solid #bbb}
}