@font-face{font-family:"Sorts Mill Goudy";src:url(fonts/goudy.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Sorts Mill Goudy";font-style:italic;src:url(fonts/goudy-i.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Alegreya";font-weight:400;src:url(fonts/alegreya-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Alegreya";font-weight:400;font-style:italic;src:url(fonts/alegreya-400i.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Alegreya";font-weight:500;src:url(fonts/alegreya-500.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Alegreya";font-weight:700;src:url(fonts/alegreya-700.woff2) format("woff2");font-display:swap}

:root{
  --enc:#3B2C39;--enc2:#4C3A49;--enc-ink:#F3EEF2;--enc-soft:#BFA9BA;
  --bg:#EFECEE;--card:#FFFFFF;--line:#D6CDD3;--line2:#E4DEE2;--ink:#1d1e20;--muted:#5E5560;--faint:#8D838B;
  --prune:#7A5A72;--prune-pale:#EFE6EC;--ardoise:#5F7389;--vert:#6F8679;--etain:#A8ABA6;--argent:#D4D6D2;
  --warn:#7A2A2B;--warn-soft:#F3E2E1;--ok:#4E6A57;--ok-soft:#E3ECE5;
  --goudy:"Sorts Mill Goudy",Georgia,serif;--body:"Alegreya",Georgia,serif;
  --nav-w:216px;--nav-h:64px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.4;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--prune);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* structure */
#app{min-height:100vh}
#nav{position:fixed;left:0;top:0;bottom:0;width:var(--nav-w);background:var(--enc);color:var(--enc-ink);display:flex;flex-direction:column;padding:22px 14px;gap:4px;z-index:5}
#nav .brand{font-family:var(--goudy);font-size:28px;padding:0 10px 2px}
#nav .brand-sub{font-size:13px;color:var(--enc-soft);padding:0 10px 22px}
#nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--enc-ink);text-decoration:none;font-size:17px;cursor:pointer}
#nav a:hover{background:var(--enc2)}
#nav a.on{background:var(--enc-ink);color:var(--enc)}
#nav a svg{width:18px;height:18px;flex:none}
#nav .bas{margin-top:auto;font-size:12px;color:var(--enc-soft);padding:0 12px}
main{margin-left:var(--nav-w);padding:32px clamp(16px,4vw,48px) 80px;max-width:calc(1180px + var(--nav-w))}
@media (max-width:820px){
  #nav{top:auto;right:0;width:auto;height:calc(var(--nav-h) + env(safe-area-inset-bottom));flex-direction:row;padding:6px 8px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;gap:0}
  #nav .brand,#nav .brand-sub,#nav .bas{display:none}
  #nav a{flex-direction:column;gap:2px;font-size:12px;padding:6px 10px;flex:1;justify-content:center}
  #nav a svg{width:22px;height:22px}
  main{margin-left:0;padding:20px 16px calc(var(--nav-h) + 40px)}
}

/* textes */
.h{font-family:var(--goudy);font-weight:400;margin:0;line-height:1.1}
h1.h{font-size:clamp(30px,5vw,40px)}
h2.h{font-size:24px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--prune);font-weight:500}
.muted{color:var(--muted)}
.small{font-size:14px}
.faint{color:var(--faint)}
b,strong{font-weight:500}
.num{font-variant-numeric:tabular-nums lining-nums}

/* blocs */
.col{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.gap4{gap:4px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}
.card{background:var(--card);border:1px solid var(--line2);border-radius:16px}
.pad{padding:20px}
.entete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.entete .col{gap:6px}

/* boutons et champs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:16px;white-space:nowrap}
.btn:hover{border-color:var(--prune)}
.btn.dark{background:var(--enc);border-color:var(--enc);color:var(--enc-ink)}
.btn.dark:hover{background:var(--enc2)}
.btn.warn{color:var(--warn);border-color:#E3C4C3}
.btn.petit{min-height:34px;padding:4px 12px;font-size:15px}
.btn.icone{width:38px;min-height:38px;padding:0;border-radius:50%}
.lien{color:var(--prune);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
label.champ{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.input,select.input,textarea.input{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:16px;color:var(--ink)}
textarea.input{min-height:80px;resize:vertical}
.input:focus{border-color:var(--prune);outline:none;box-shadow:0 0 0 3px var(--prune-pale)}
.suffixe{position:relative}
.suffixe .input{padding-right:46px}
.suffixe span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:15px;pointer-events:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:560px){.grid3{grid-template-columns:1fr 1fr}}

/* choix segmentés */
.seg{display:inline-flex;background:var(--line2);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{padding:7px 14px;border-radius:999px;font-size:15px;color:var(--muted)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* pastilles */
.pastille{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:13px;background:var(--line2);color:var(--muted)}
.pastille.sigilla{background:#E6E9EE;color:#3F5165}
.pastille.loge{background:var(--prune-pale);color:#5D4357}
.pastille.alerte{background:var(--warn-soft);color:var(--warn)}
.pastille.bon{background:var(--ok-soft);color:var(--ok)}

/* liste des calculs */
.liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.carte-calc{display:flex;flex-direction:column;gap:10px;text-align:left;padding:18px;border-radius:16px;background:var(--card);border:1px solid var(--line2);transition:border-color .15s,transform .15s}
.carte-calc:hover{border-color:var(--prune);transform:translateY(-1px)}
.carte-calc .prix{font-family:var(--goudy);font-size:30px;line-height:1}
.filtres{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.filtres .input{max-width:260px}
.vide{padding:36px 24px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}

/* éditeur */
.editeur{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
@media (max-width:1060px){.editeur{grid-template-columns:1fr}}
.resultat{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px}
@media (max-width:1060px){.resultat{position:static}}
.bloc{display:flex;flex-direction:column;gap:14px}
.bloc-titre{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.temps{display:flex;gap:10px}
.temps .suffixe{flex:1}
.lignes{display:flex;flex-direction:column;gap:8px}
.ligne{display:grid;grid-template-columns:minmax(0,1fr) 92px 78px 34px;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line2);border-radius:12px;background:#FCFBFC}
.ligne .nom{display:flex;flex-direction:column;min-width:0}
.ligne .nom b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne .cout{text-align:right;font-variant-numeric:tabular-nums}
.ligne .input{min-height:38px;padding:6px 8px}
@media (max-width:560px){.ligne{grid-template-columns:minmax(0,1fr) 84px 34px;grid-template-areas:"nom qte x" "cout cout cout";row-gap:2px}.ligne>:nth-child(1){grid-area:nom}.ligne>:nth-child(2){grid-area:qte}.ligne>:nth-child(3){grid-area:cout;text-align:left;font-size:14px;color:var(--muted)}.ligne>:nth-child(4){grid-area:x}}
.mini{display:none}
@media (max-width:1060px){.mini{display:flex;position:sticky;bottom:12px;z-index:4;margin-top:4px;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-radius:999px;background:var(--enc);color:var(--enc-ink);box-shadow:0 6px 20px rgba(29,30,32,.25);width:100%;text-align:left}.mini b{font-family:var(--goudy);font-size:24px;font-weight:400}.mini span{font-size:14px;color:var(--enc-soft)}}
@media (max-width:820px){.mini{bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom))}}
.ajout{display:flex;gap:8px;flex-wrap:wrap}
.ajout select{flex:1;min-width:200px}

.prix-propose{display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:16px;background:var(--enc);color:var(--enc-ink)}
.prix-propose .grand{font-family:var(--goudy);font-size:54px;line-height:1}
.prix-propose .eyebrow{color:var(--enc-soft)}
.prix-propose .small{color:var(--enc-soft)}
.barre{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--line2)}
.barre i{display:block;height:100%}
.legende{display:flex;flex-direction:column;gap:7px}
.legende .l{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;font-size:15px}
.legende .l .p{width:12px;height:12px;border-radius:3px}
.legende .l span:last-child{font-variant-numeric:tabular-nums lining-nums}
.chiffres{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chiffre{padding:12px 14px;border-radius:12px;background:#F7F4F6;display:flex;flex-direction:column;gap:2px}
.chiffre .v{font-family:var(--goudy);font-size:24px;line-height:1.1;font-variant-numeric:lining-nums}
.chiffre .t{font-size:13px;color:var(--muted)}
.chiffre.alerte{background:var(--warn-soft)}
.chiffre.alerte .v{color:var(--warn)}
.chiffre.bon .v{color:var(--ok)}
.message{padding:12px 14px;border-radius:12px;font-size:15px}
.message.alerte{background:var(--warn-soft);color:var(--warn)}
.message.info{background:#F1EEF0;color:var(--muted)}
.etat-save{font-size:13px;color:var(--faint)}
details.avance summary{cursor:pointer;color:var(--prune);font-size:15px}
details.avance[open] summary{margin-bottom:12px}

/* matières */
.mat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;text-align:left;width:100%;border-bottom:1px solid var(--line2)}
.mat:last-child{border-bottom:0}
.mat:hover{background:#FBF9FA}
.mat .u{text-align:right;font-variant-numeric:tabular-nums lining-nums}

/* réglages */
.reg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.aide{font-size:13px;color:var(--faint);line-height:1.35}

/* feuille (modale) */
#sheet{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(29,30,32,.45)}
#sheet.on{display:flex}
#sheet .panneau{background:var(--card);border-radius:20px;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:24px;display:flex;flex-direction:column;gap:14px}
@media (max-width:560px){#sheet{align-items:flex-end;padding:0}#sheet .panneau{border-radius:20px 20px 0 0;max-height:92vh;padding:20px 16px calc(20px + env(safe-area-inset-bottom))}}

/* connexion */
.login{min-height:80vh;display:flex;align-items:center;justify-content:center}
.login .card{width:min(400px,100%);padding:28px;display:flex;flex-direction:column;gap:14px}
body.sans-nav main{margin-left:0}
body.sans-nav #nav{display:none}

#toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 20px);transform:translate(-50%,20px);background:var(--enc);color:var(--enc-ink);padding:10px 18px;border-radius:999px;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:30;max-width:calc(100vw - 32px)}
#toast.on{opacity:1;transform:translate(-50%,0)}
@media (min-width:821px){#toast{bottom:28px;left:calc(50% + var(--nav-w)/2)}}

.imp{display:grid;grid-template-columns:24px minmax(0,1fr) 84px 104px;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line2);border-radius:12px;background:#FCFBFC}
.imp .nom{display:flex;flex-direction:column;min-width:0}
.imp .input{min-height:38px;padding:6px 8px}
@media (max-width:560px){.imp{grid-template-columns:24px 1fr 1fr}.imp .nom{grid-column:2/4}.imp>:nth-child(3){grid-column:2/3}.imp>:nth-child(4){grid-column:3/4}}