:root{
  --bg:#ffffff; --bg2:#f7f7f5; --card:#ffffff;
  --txt:#37352f; --mut:#6b6a67; --dim:#767570;
  --br:#e6e6e3; --br2:#efefec;
  --acc:#0f7b53; --acc-bg:#edf7f2; --acc-br:#c9e7d9;
  --blue:#1f6feb; --blue-bg:#eef4ff;
  --warn:#b45309; --bad:#b91c1c;
  --sh:0 1px 2px rgba(15,15,15,.05),0 3px 8px rgba(15,15,15,.04);
  --sh2:0 2px 4px rgba(15,15,15,.06),0 8px 24px rgba(15,15,15,.07);
  --r:12px; --max:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
section[id]{scroll-margin-top:92px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg); color:var(--txt);
  font:400 16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:64px 0}
section.alt{background:var(--bg2);border-top:1px solid var(--br2);border-bottom:1px solid var(--br2)}
h1,h2,h3,h4{line-height:1.25;letter-spacing:-.018em;color:var(--txt)}
h1{font-size:clamp(1.95rem,4.6vw,2.85rem);font-weight:700}
h2{font-size:clamp(1.4rem,3vw,1.95rem);font-weight:650;margin-bottom:12px}
h3{font-size:1.06rem;font-weight:620}
p{color:var(--mut)}
a{color:inherit}
.lead{font-size:clamp(1rem,1.8vw,1.12rem);max-width:63ch;color:var(--mut)}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--br)}
nav .inner{max-width:var(--max);margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:6px}
.brand{font-weight:700;letter-spacing:-.02em;font-size:.98rem;text-decoration:none;white-space:nowrap;margin-right:auto}
.brand span{color:var(--acc)}
.links{display:flex;align-items:center;gap:4px}
nav a.lnk{text-decoration:none;color:var(--mut);font-size:.9rem;font-weight:520;padding:7px 11px;border-radius:7px;white-space:nowrap;transition:.15s}
nav a.lnk:hover{color:var(--txt);background:var(--bg2)}
nav a.lnk.on{color:var(--txt);background:var(--bg2);font-weight:600}
nav a.navcta{text-decoration:none;background:var(--acc);color:#fff;font-weight:600;font-size:.87rem;padding:8px 15px;border-radius:8px;white-space:nowrap;margin-left:6px}
/* Mobile : deux rangées assumées, jamais un retour à la ligne accidentel */
@media(max-width:760px){
  nav .inner{flex-wrap:wrap;justify-content:center;gap:7px;padding:9px 12px}
  .brand{margin-right:0;width:100%;text-align:center;font-size:.93rem}
  /* pas de justify-content:center ici : avec un débordement il rogne les DEUX
     extrémités. On répartit, et le lien Accueil saute (la marque le remplace). */
  .links{width:100%;display:flex;justify-content:space-between;align-items:center;gap:4px}
  .links a[href="index.html"]{display:none}
  nav a.lnk{font-size:.83rem;padding:6px 7px}
  nav a.navcta{font-size:.81rem;padding:7px 11px;margin-left:0}
}
@media(max-width:360px){
  nav a.lnk{font-size:.79rem;padding:6px 5px}
  nav a.navcta{font-size:.78rem;padding:6px 9px}
}

/* ---------- ATOMES ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);background:var(--acc-bg);border:1px solid var(--acc-br);padding:5px 11px;border-radius:6px;margin-bottom:16px}
.eyebrow.b{color:var(--blue);background:var(--blue-bg);border-color:#d5e3ff}
.glass,.card,.plan,.stat,.step,.calc,details,.band{background:var(--card);border:1px solid var(--br);border-radius:var(--r);box-shadow:var(--sh)}
.grid{display:grid;gap:16px}
@media(min-width:820px){.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:600px) and (max-width:819px){.g3,.g2{grid-template-columns:repeat(2,1fr)}}
.cta{display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#fff;font-weight:620;padding:12px 22px;border-radius:9px;text-decoration:none;box-shadow:var(--sh);transition:.16s}
.cta:hover{background:#0c6644;transform:translateY(-1px)}
.cta.ghost{background:#fff;color:var(--txt);border:1px solid var(--br)}
.cta.ghost:hover{background:var(--bg2)}
.chip{font-size:.84rem;color:var(--txt);background:var(--bg2);border:1px solid var(--br);padding:7px 13px;border-radius:999px;display:inline-block}
.note{font-size:.9rem;color:var(--dim);margin-top:14px;line-height:1.6}
.note b{color:var(--mut)}
.src{font-size:.79rem;color:var(--dim);margin-top:16px}
.card{padding:22px}
.card h3{margin-bottom:7px}
.card p{font-size:.93rem}
.ico{font-size:1.4rem;margin-bottom:10px;display:block}

.stat{padding:20px}
.stat b{display:block;font-size:2rem;font-weight:700;color:var(--acc);letter-spacing:-.03em}
.stat span{font-size:.9rem;color:var(--mut);display:block;margin-top:5px}

.steps{counter-reset:s;display:grid;gap:14px;margin-top:24px}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{padding:20px}
.step::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:7px;margin-bottom:11px;background:var(--acc-bg);border:1px solid var(--acc-br);color:var(--acc);font-weight:700;font-size:.9rem}
.step h3{font-size:.99rem;margin-bottom:5px}
.step p{font-size:.89rem}

/* ---------- TARIFS ---------- */
.plans{display:grid;gap:18px;margin-top:26px}
@media(min-width:940px){.plans{grid-template-columns:repeat(3,1fr);align-items:start}}
.plan{padding:24px;display:flex;flex-direction:column;height:100%;position:relative}
.plan.reco{border-color:var(--acc);box-shadow:var(--sh2)}
.badge{position:absolute;top:-11px;left:24px;background:var(--acc);color:#fff;font-size:.68rem;font-weight:700;padding:4px 11px;border-radius:5px;letter-spacing:.04em;text-transform:uppercase}
.plan .who{font-size:.81rem;color:var(--blue);font-weight:620;margin-bottom:7px}
.price{margin:14px 0 3px;font-size:2.15rem;font-weight:700;letter-spacing:-.03em}
.price small{font-size:.88rem;font-weight:500;color:var(--mut)}
.sub{font-size:.88rem;color:var(--mut);min-height:40px}
.plan ul{list-style:none;margin:18px 0 0;flex:1}
.plan li{position:relative;padding-left:24px;margin-bottom:10px;font-size:.91rem;color:var(--mut)}
.plan li::before{content:"✓";position:absolute;left:0;top:0;color:var(--acc);font-weight:700}
.plan li.no{color:var(--dim)}.plan li.no::before{content:"—";color:var(--dim)}
.plan li b{color:var(--txt)}
/* « mise en place avec vous » : ce qui distingue la formule Commande */
.plan li.hl::before{content:"👋";font-size:.85rem}
.plan li.hl{color:var(--txt)}
.plan .cta{margin-top:20px;justify-content:center}

/* ---------- SIMULATEUR ---------- */
.calc{padding:26px}
.tabs{display:flex;gap:7px;margin-bottom:20px;flex-wrap:wrap}
.tab{font:inherit;appearance:none;flex:1;min-width:150px;padding:11px 14px;border-radius:9px;cursor:pointer;text-align:center;background:var(--bg2);border:1px solid var(--br);color:var(--mut);font-size:.89rem;font-weight:600;transition:.15s;user-select:none}
.tab:hover{color:var(--txt)}
.tab.on{background:var(--acc-bg);border-color:var(--acc);color:var(--acc)}
.calc label{display:block;font-size:.89rem;color:var(--txt);font-weight:600;margin-bottom:8px}
.calc input[type=range]{width:100%;accent-color:var(--acc);height:6px;cursor:pointer}
.calc .val{font-size:1.65rem;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.res{display:grid;gap:12px;margin-top:22px}
@media(min-width:660px){.res{grid-template-columns:repeat(3,1fr)}}
.res div{padding:15px;border-radius:9px;background:var(--bg2);border:1px solid var(--br)}
.res small{display:block;font-size:.74rem;color:var(--dim);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;font-weight:600}
.res strong{font-size:1.32rem;font-weight:700;letter-spacing:-.02em;display:block;color:var(--txt)}
.eco strong{color:var(--acc)}.perte strong{color:var(--bad)}.cout strong{color:var(--warn)}
.payback{margin-top:18px;padding:14px 16px;border-radius:9px;text-align:center;background:var(--acc-bg);border:1px solid var(--acc-br);color:var(--txt);font-size:.95rem}
.payback b{color:var(--acc)}

/* ---------- MAQUETTES ---------- */
.browser{border-radius:9px;overflow:hidden;border:1px solid var(--br);background:#fff}
.bar{display:flex;align-items:center;gap:5px;padding:8px 11px;background:#f1f1ef;border-bottom:1px solid var(--br)}
.dot{width:8px;height:8px;border-radius:50%}
.url{flex:1;margin-left:7px;background:#fff;border:1px solid var(--br);border-radius:5px;font-size:.66rem;color:var(--dim);padding:3px 8px;overflow:hidden;white-space:nowrap}
.screen{padding:14px;min-height:200px;font-size:.74rem;color:#111}
.m-hero{background:#2f3437;color:#fff;padding:18px 13px;border-radius:7px;text-align:center}
.m-hero h4{font-size:.97rem;margin-bottom:3px;color:#fff}
.m-hero p{color:#d3d6d8;font-size:.67rem}
.m-btn{display:inline-block;margin-top:9px;background:#0f7b53;color:#fff;font-weight:650;padding:6px 14px;border-radius:6px;font-size:.69rem}
.m-row{display:flex;justify-content:space-between;align-items:center;padding:8px 3px;border-bottom:1px solid #f0f0ee;gap:8px}
.m-row b{font-size:.74rem;color:#111}.m-row span{color:#787774;font-size:.66rem}
.m-price{color:#111;font-weight:700}
.m-add{background:#37352f;color:#fff;border-radius:5px;padding:2px 8px;font-size:.63rem}
.m-cart{margin-top:11px;background:#f7f7f5;border:1px solid var(--br);border-radius:7px;padding:9px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.m-slot{display:inline-block;border:1px solid #dcdcd8;border-radius:5px;padding:5px 9px;margin:3px 3px 0 0;font-size:.66rem;color:#37352f}
.m-slot.on{background:#0f7b53;border-color:#0f7b53;color:#fff;font-weight:650}

/* ---------- TABLE / FAQ ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--br);border-radius:var(--r);margin-top:18px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:.91rem;min-width:540px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--br2)}
tr:last-child td{border-bottom:none}
th{color:var(--txt);font-weight:640;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;background:var(--bg2)}
td{color:var(--mut)}td:first-child{color:var(--txt);font-weight:540}
details{padding:16px 20px;margin-bottom:10px}
summary{cursor:pointer;font-weight:620;color:var(--txt);list-style:none;font-size:.98rem}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";color:var(--acc);font-weight:700;display:inline-block;width:18px}
details[open] summary::before{content:"−"}
details p{margin-top:10px;font-size:.93rem;padding-left:18px}
details p+p{margin-top:9px}

.band{padding:38px 28px;text-align:center;margin-top:16px;background:var(--acc-bg);border-color:var(--acc-br)}
.band h2{margin-bottom:8px}
.band .cta{margin-top:18px}

footer{padding:36px 0 50px;text-align:center;color:var(--dim);font-size:.86rem;border-top:1px solid var(--br);margin-top:44px;background:var(--bg2)}
footer b{color:var(--txt)}
footer a{color:var(--mut);text-decoration:none;margin:0 8px}
footer a:hover{color:var(--txt);text-decoration:underline}

/* Bloc contact — le point le plus important de la page */
.contact-box{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
.tel{display:inline-flex;align-items:center;gap:9px;background:var(--acc);color:#fff;font-weight:700;
     font-size:1.08rem;padding:14px 26px;border-radius:10px;text-decoration:none;box-shadow:var(--sh)}
.tel:hover{background:#0c6644}
.mail{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--txt);border:1px solid var(--br);
      font-weight:600;padding:14px 22px;border-radius:10px;text-decoration:none}
.mail:hover{background:var(--bg2)}
.guarantee{margin-top:18px;padding:14px 18px;border-radius:9px;background:#fff;border:1px solid var(--acc-br);
           font-size:.93rem;color:var(--txt);text-align:left}
.guarantee b{color:var(--acc)}
.me{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.me .txt{flex:1;min-width:260px}
.me .ph{width:96px;height:96px;border-radius:50%;background:var(--bg2);border:1px solid var(--br);
        display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--dim);flex-shrink:0}

/* ---------- MAQUETTE BACK-OFFICE ---------- */
.adm{display:flex;min-height:230px;font-size:.72rem;background:#fff}
.adm-side{width:118px;flex-shrink:0;background:#f7f7f5;border-right:1px solid var(--br);padding:10px 8px}
.adm-side b{display:block;font-size:.68rem;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin:0 4px 8px}
.adm-side a{display:block;padding:6px 8px;border-radius:6px;color:#37352f;text-decoration:none;margin-bottom:2px;font-size:.71rem}
.adm-side a.on{background:#0f7b53;color:#fff;font-weight:650}
.adm-main{flex:1;padding:12px 14px;min-width:0}
.adm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}
.adm-top h5{font-size:.82rem;color:#37352f}
.adm-btn{background:#0f7b53;color:#fff;border-radius:5px;padding:4px 10px;font-size:.66rem;font-weight:650;white-space:nowrap}
.adm-item{display:flex;align-items:center;gap:8px;padding:7px 6px;border:1px solid var(--br);border-radius:7px;margin-bottom:6px;background:#fff}
.adm-thumb{width:26px;height:26px;border-radius:5px;background:#efefec;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.75rem}
.adm-item .nm{flex:1;min-width:0;color:#37352f;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-item .pr{color:#37352f;font-weight:700;font-size:.7rem}
.sw{width:28px;height:16px;border-radius:99px;background:#0f7b53;position:relative;flex-shrink:0}
.sw::after{content:"";position:absolute;right:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff}
.sw.off{background:#d4d4d0}.sw.off::after{left:2px;right:auto}
.adm-note{margin-top:8px;font-size:.66rem;color:var(--dim)}
@media(max-width:520px){.adm-side{width:92px}.adm{font-size:.68rem}}

.pb-note{display:block;margin-top:8px;font-weight:400;font-size:.88rem;color:var(--mut)}