@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

@font-face{
  font-family:"DO Sans";
  src:url("./fonts/DO-Sans-RegularPRO.woff2") format("woff2"),
      url("./fonts/DO-Sans-RegularPRO.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --bg:#1F2223; --panel:#282C2C; --inset:#191B1C; --green:#21402F;
  --ink:#ECE9E2; --muted:#9B9D98; --orange:#E86C2A; --orange-soft:rgba(232,108,42,.28);
  --line:rgba(236,233,226,.13); --field:#16181B; --radius:14px;
  --hand:"DO Sans","Bradley Hand",cursive;
  --sans:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.55; padding:24px 16px; display:flex; justify-content:center}
.wrap{width:100%; max-width:680px}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px 26px}
.head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:18px}
.title{font-family:var(--hand); font-size:34px; font-weight:400; letter-spacing:.4px; line-height:1; color:var(--ink); text-transform:uppercase}
.brand{font-family:var(--hand); font-size:14px; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange)}

.params{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:16px}
.fg,.fg2{display:flex; flex-direction:column; gap:4px}
.fg label,.fg2 label{font-size:12px; color:var(--muted)}
input,select{font:inherit; font-size:15px; color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:8px; padding:8px 9px; width:100%}
input:focus,select:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft)}
select option{background:var(--panel); color:var(--ink)}

.ing{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:10px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; background:var(--inset)}
.ing .fg{gap:3px} .ing .fg label{font-size:11px}
.fg.name{flex:1 1 150px} .fg.sm{flex:0 0 86px}
.cost,.tot{text-align:right; font-variant-numeric:tabular-nums; font-weight:500; padding-bottom:7px}
.cost{flex:0 0 72px} .tot{flex:0 0 96px}
.cost small,.tot small{display:block; font-size:10px; color:var(--muted); font-weight:400}
.del{flex:0 0 auto; background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; padding:6px}
.del:hover{color:var(--orange)}
.add{margin-top:4px; background:none; border:1px dashed var(--line); border-radius:8px; color:var(--orange); cursor:pointer; font-size:14px; padding:9px 14px; width:100%}
.add:hover{border-color:var(--orange); background:var(--orange-soft)}

.slider{display:flex; align-items:center; gap:12px; margin:20px 0 4px}
.slider label{font-size:13px; color:var(--muted); white-space:nowrap}
.slider input[type=range]{flex:1; accent-color:var(--orange)}
.slider .val{font-size:14px; font-weight:500; min-width:38px; text-align:right; color:var(--orange)}

.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:18px}
.metric{background:var(--inset); border-radius:10px; padding:14px}
.metric .k{font-family:var(--hand); font-size:13px; color:var(--muted); margin-bottom:5px; letter-spacing:.5px; text-transform:uppercase}
.metric .v{font-family:var(--sans); font-size:25px; font-weight:500; color:var(--ink)}
.metric .v .u{font-size:12px; color:var(--muted); margin-left:2px}
.metric .hint{font-size:10px; color:var(--muted); margin-top:3px}
.v.good{color:#7FC24F} .v.warn{color:#E8A23A} .v.bad{color:#E2706E}

.reco{margin-top:14px; background:var(--green); color:var(--ink); border-radius:10px; padding:13px 16px; font-size:14px; border:1px solid rgba(127,194,79,.2)}
.reco b{color:var(--orange); font-size:16px}

.steps{margin-top:16px; font-size:13px; color:var(--muted); line-height:1.7}
.steps b{color:var(--ink); font-weight:500}
.foot{margin-top:16px; font-size:11px; color:var(--muted)}
.foot a{color:var(--orange); text-decoration:none}

.backlink{display:inline-block; margin-bottom:14px; font-size:13px; color:var(--muted); text-decoration:none}
.backlink:hover{color:var(--orange)}
.hero{text-align:center; margin-bottom:30px}
.hero .brand{display:block; margin-bottom:10px}
.hero .title{font-size:46px; line-height:1.05; margin:0 0 14px}
.sub{font-size:16px; color:var(--muted); max-width:460px; margin:0 auto}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px}
a.tool{display:block; text-decoration:none; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; transition:border-color .15s, transform .15s}
a.tool:hover{border-color:var(--orange); transform:translateY(-2px)}
.tool .tt{font-family:var(--sans); font-size:21px; font-weight:500; color:var(--orange); margin-bottom:6px}
.tool .td{font-size:14px; color:var(--muted); line-height:1.5}
.tool .go{margin-top:14px; font-size:13px; color:var(--orange); font-weight:500}

@media(max-width:430px){
  .fg.sm{flex:1 1 calc(50% - 7px)} .cost,.tot{flex:1 1 100%; text-align:left}
  .title{font-size:29px} .hero .title{font-size:36px}
  .ec-row{flex-direction:column} .ec-row button{padding:11px}
}

/* --- composants app : PWA / monétisation / UX --- */
.copybtn{margin-top:14px; width:100%; background:none; border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); font:inherit; font-size:14px; padding:11px; cursor:pointer; transition:border-color .15s, background .15s}
.copybtn:hover{border-color:var(--orange)}
.copybtn.ok{border-color:#7FC24F; color:#7FC24F}

.aff{margin-top:20px; border-top:1px solid var(--line); padding-top:16px}
.aff-t{font-family:var(--hand); text-transform:uppercase; font-size:14px; letter-spacing:.5px; color:var(--orange); margin-bottom:10px}
.aff-row{display:flex; flex-wrap:wrap; gap:8px}
.aff-chip{display:inline-block; font-size:13px; color:var(--ink); background:var(--inset); border:1px solid var(--line); border-radius:20px; padding:7px 13px; text-decoration:none; transition:border-color .15s, color .15s}
.aff-chip:hover{border-color:var(--orange); color:var(--orange)}
.aff-n{font-size:10px; color:var(--muted); margin-top:8px}

.emailcap{margin-top:20px; background:var(--inset); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.ec-t{font-size:14px; color:var(--ink); margin-bottom:10px}
.ec-row{display:flex; gap:8px}
.ec-row input{flex:1; background:var(--field); border:1px solid var(--line); border-radius:8px; color:var(--ink); font:inherit; font-size:15px; padding:9px 11px}
.ec-row input:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft)}
.ec-row button{background:var(--orange); color:#1F2223; border:none; border-radius:8px; font:inherit; font-size:14px; font-weight:500; padding:0 16px; cursor:pointer; white-space:nowrap}
.ec-row button:hover{filter:brightness(1.06)}

.search{width:100%; background:var(--inset); border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); font:inherit; font-size:15px; padding:12px 14px; margin-bottom:4px}
.search:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft)}
.search::placeholder{color:var(--muted)}

.install{display:inline-block; margin-top:16px; background:var(--orange); color:#1F2223; border:none; border-radius:var(--radius); font:inherit; font-size:14px; font-weight:500; padding:10px 18px; cursor:pointer}
.ioshint{margin-top:14px; font-size:12px; color:var(--muted)}

/* --- email gate --- */
.gate{position:fixed; inset:0; background:rgba(20,22,24,.97); display:flex; align-items:center; justify-content:center; padding:24px; z-index:9999}
.gate-box{max-width:380px; text-align:center}
.gate-brand{font-family:var(--hand); text-transform:uppercase; letter-spacing:1.5px; color:var(--orange); font-size:15px; margin-bottom:12px}
.gate-title{font-family:var(--hand); text-transform:uppercase; font-size:34px; color:var(--ink); line-height:1; margin-bottom:12px}
.gate-sub{color:var(--muted); font-size:15px; line-height:1.6; margin-bottom:20px}
.gate-form{display:flex; flex-direction:column; gap:10px}
.gate-form input{background:var(--field); border:1px solid var(--line); border-radius:10px; color:var(--ink); font:inherit; font-size:16px; padding:12px 14px}
.gate-form input:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft)}
.gate-form button{background:var(--orange); color:#1F2223; border:none; border-radius:10px; font:inherit; font-size:16px; font-weight:500; padding:13px; cursor:pointer}
.gate-form button:hover{filter:brightness(1.06)}
.gate-note{font-size:12px; color:var(--muted); margin-top:14px}
.srclink{display:inline-block; margin-top:16px; font-size:12px; color:var(--muted); text-decoration:none}
.srclink:hover{color:var(--orange)}