/* ==========================================================================
   convertisseur24v.fr — feuille de style unique
   Sans framework. Mobile-first. Aucune ressource externe.
   Palette : navy technique + 3 niveaux couleur (1200 / 2000 / 3000 W)
   ========================================================================== */

:root{
  --ink:#10202f;
  --ink-2:#31465c;
  --muted:#5a6b7e;
  --line:#dde5ee;
  --bg:#f5f8fb;
  --surface:#ffffff;
  --navy:#0d2b45;
  --navy-2:#123a5c;
  --sky:#0b6e99;
  --sky-bg:#eaf3f9;
  --ok:#1a7f4e;
  --warn:#8a5200;
  --warn-bg:#fdf6e7;
  --warn-line:#ecd9ae;
  --danger:#a02c2c;
  --danger-bg:#fcefef;
  --danger-line:#f0c9c9;

  --c1200:#9c5708; --c1200-bg:#fbf3e2; --c1200-line:#ecd6ac;
  --c2000:#0e6f8e; --c2000-bg:#e7f5fa; --c2000-line:#c0e4ee;
  --c3000:#4341c9; --c3000-bg:#ededfc; --c3000-line:#d3d4f4;

  --radius:12px;
  --wrap:1060px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.65;font-size:16.5px;-webkit-text-size-adjust:100%}
img,svg{max-width:100%}
a{color:var(--sky)}
a:hover{color:var(--navy-2)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:.5rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}

h1,h2,h3,h4{line-height:1.25;color:var(--ink);font-weight:750}
h1{font-size:clamp(1.65rem,4.6vw,2.55rem);margin:.4em 0 .5em}
h2{font-size:clamp(1.35rem,3.2vw,1.85rem);margin:0 0 .6em}
h3{font-size:clamp(1.12rem,2.4vw,1.35rem);margin:1.6em 0 .5em}
p{margin:.7em 0}
ul,ol{padding-left:1.3em}
li{margin:.3em 0}
strong{color:var(--ink)}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:4px}

/* ---------- En-tête ---------- */
.site-head{background:var(--navy);color:#fff}
.head-in{display:flex;flex-direction:column;gap:.35rem;padding-top:.8rem;padding-bottom:.6rem}
.brand{color:#fff;text-decoration:none;font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.brand span{color:#ffd23f}
.brand-sub{margin:0;font-size:.78rem;color:#b9cbdd;letter-spacing:.02em}
.main-nav{display:flex;gap:.15rem;overflow-x:auto;padding:.45rem 0 .1rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.main-nav a{flex:0 0 auto;color:#dce8f2;text-decoration:none;font-size:.9rem;padding:.35rem .7rem;border-radius:999px}
.main-nav a:hover{background:var(--navy-2);color:#fff}
.main-nav a[aria-current="page"]{background:var(--navy-2);color:#ffd23f}
@media(min-width:760px){
  .head-in{flex-direction:row;align-items:center;justify-content:space-between;gap:1.5rem}
  .brand-block{display:flex;flex-direction:column;gap:.15rem}
  .main-nav{padding:.35rem 0}
}

/* ---------- Fil d'Ariane ---------- */
.crumb{background:var(--surface);border-bottom:1px solid var(--line)}
.crumb ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:.55rem 0;font-size:.8rem;color:var(--muted)}
.crumb li:not(:first-child)::before{content:"›";margin-right:.4rem;color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--sky)}

/* ---------- Sections ---------- */
.section{padding:2.4rem 0}
.section--alt{background:var(--surface)}
.kicker{display:inline-block;margin:0 0 .45rem;font-size:.75rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sky)}
.lead{font-size:1.05rem;color:var(--ink-2);max-width:46rem}

/* ---------- Réponse directe ---------- */
.answer{background:var(--sky-bg);border-left:5px solid var(--sky);border-radius:0 var(--radius) var(--radius) 0;
  padding:1rem 1.15rem;margin:1.2rem 0;max-width:46rem}
.answer p{margin:.25em 0}
.answer .kicker{color:var(--sky);margin-bottom:.2rem}

/* ---------- Boutons ---------- */
.btn{display:inline-block;text-decoration:none;text-align:center;font-weight:700;font-size:.95rem;
  padding:.72rem 1.25rem;border-radius:10px;border:2px solid transparent;cursor:pointer;max-width:100%}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-2);color:#fff}
.btn-ghost{border-color:var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.b1200{background:var(--c1200);color:#fff}
.b1200:hover{filter:brightness(.88);color:#fff}
.b2000{background:var(--c2000);color:#fff}
.b2000:hover{filter:brightness(.88);color:#fff}
.b3000{background:var(--c3000);color:#fff}
.b3000:hover{filter:brightness(.88);color:#fff}

/* ---------- Héros ---------- */
.hero{background:var(--surface);border-bottom:1px solid var(--line);padding:2.6rem 0 2.2rem}
.badge24{display:inline-block;background:var(--navy);color:#ffd23f;font-weight:800;font-size:.78rem;
  letter-spacing:.08em;padding:.35rem .8rem;border-radius:999px;margin-bottom:.9rem}
.hero .lead{margin-bottom:1.4rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2rem}

/* ---------- Tuiles 3 niveaux ---------- */
.tiles{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.5rem 0 .5rem}
@media(min-width:760px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--surface);border:1px solid var(--line);border-top:5px solid;border-radius:var(--radius);
  padding:1.1rem 1.15rem 1.2rem}
.tile h2{margin:.15rem 0 .3rem;font-size:1.05rem}
.tile .w{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.tile .tech{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:.15rem 0 .5rem}
.tile p.use{font-size:.92rem;color:var(--ink-2);margin:.2rem 0 .7rem}
.tile a{font-size:.88rem;font-weight:700}
.t-1200{border-top-color:var(--c1200)} .t-1200 .w,.t-1200 .tech{color:var(--c1200)}
.t-2000{border-top-color:var(--c2000)} .t-2000 .w,.t-2000 .tech{color:var(--c2000)}
.t-3000{border-top-color:var(--c3000)} .t-3000 .w,.t-3000 .tech{color:var(--c3000)}

/* ---------- Cartes / grilles ---------- */
.grid3{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.2rem 0}
@media(min-width:760px){.grid3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.15rem}
.card h3{margin:.1rem 0 .5rem;font-size:1.05rem}
.card p{font-size:.93rem;color:var(--ink-2);margin:.3rem 0}

/* ---------- Encadrés ---------- */
.callout{border-radius:var(--radius);padding:1rem 1.15rem;margin:1.3rem 0;max-width:46rem}
.callout h3,.callout h2{margin:.1rem 0 .4rem;font-size:1.02rem}
.callout p,.callout li{font-size:.94rem;margin:.3em 0}
.c-info{background:var(--sky-bg);border:1px solid #c6dff0}
.c-warn{background:var(--warn-bg);border:1px solid var(--warn-line)}
.c-warn h3{color:var(--warn)}
.c-danger{background:var(--danger-bg);border:1px solid var(--danger-line)}
.c-danger h3,.c-danger h2{color:var(--danger)}

/* ---------- Tableaux ---------- */
.tablewrap{overflow-x:auto;margin:1.2rem 0;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.92rem}
caption{text-align:left;font-weight:700;padding:.8rem 1rem .2rem;color:var(--ink)}
th,td{padding:.62rem .9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--navy);color:#fff;font-size:.85rem;letter-spacing:.02em}
tbody tr:nth-child(even){background:#f7fafc}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.col1200{color:var(--c1200);font-weight:700}
.col2000{color:var(--c2000);font-weight:700}
.col3000{color:var(--c3000);font-weight:700}

/* ---------- Assistant ---------- */
.asst{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1.2rem 1.5rem;max-width:640px;margin:0 auto;box-shadow:0 1px 3px rgba(13,43,69,.06)}
.asst-prog{display:flex;align-items:center;gap:.4rem;margin:0 0 1rem;list-style:none;padding:0}
.asst-prog li{width:100%;max-width:52px;height:5px;border-radius:99px;background:var(--line);margin:0;padding:0;overflow:hidden}
.asst-prog li.on{background:var(--sky)}
.asst-prog li.done{background:var(--navy-2)}
.asst-count{font-size:.78rem;color:var(--muted);margin:0 0 .9rem}
.asst-q{font-size:1.08rem;font-weight:750;margin:0 0 .9rem}
.asst-opts{display:grid;grid-template-columns:1fr;gap:.55rem}
@media(min-width:620px){.asst-opts{grid-template-columns:1fr 1fr}}
.opt{display:block;width:100%;text-align:left;padding:.68rem .9rem;background:#fff;color:var(--ink);
  border:1.5px solid var(--line);border-radius:10px;font-size:.94rem;font-weight:600;cursor:pointer;font-family:inherit}
.opt:hover,.opt:focus-visible{border-color:var(--sky);background:var(--sky-bg)}
.asst-num{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.asst-num input{flex:1 1 130px;min-width:0;padding:.65rem .8rem;font-size:1.05rem;border:1.5px solid var(--line);
  border-radius:10px;font-family:inherit}
.asst-num .unit{font-weight:700;color:var(--muted)}
.asst-hint{font-size:.83rem;color:var(--muted);margin:.7rem 0 .2rem}
.asst-help{background:var(--sky-bg);border-radius:10px;padding:.7rem .9rem;font-size:.85rem;margin:.8rem 0}
.asst-link{background:none;border:none;color:var(--sky);font-size:.85rem;text-decoration:underline;
  cursor:pointer;padding:0;font-family:inherit}
.asst-back{margin-top:1rem}
.asst-result{border-left:6px solid;border-radius:0 var(--radius) var(--radius) 0;padding:1.1rem 1.2rem;max-width:640px;margin:0 auto}
.ar-sm1200{background:var(--c1200-bg);border-color:var(--c1200)}
.ar-ps2000{background:var(--c2000-bg);border-color:var(--c2000)}
.ar-ps3000{background:var(--c3000-bg);border-color:var(--c3000)}
.ar-verify{background:var(--warn-bg);border-color:var(--warn)}
.asst-result h3{margin:.1rem 0 .2rem;font-size:1.25rem}
.asst-result .rtech{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin:0 0 .6rem}
.ar-sm1200 h3,.ar-sm1200 .rtech{color:var(--c1200)}
.ar-ps2000 h3,.ar-ps2000 .rtech{color:var(--c2000)}
.ar-ps3000 h3,.ar-ps3000 .rtech{color:var(--c3000)}
.ar-verify h3,.ar-verify .rtech{color:var(--warn)}
.asst-result ul{margin:.4rem 0 .8rem;padding-left:1.15em}
.asst-result li{font-size:.93rem;margin:.35em 0}
.asst-watch{background:rgba(255,255,255,.65);border-radius:8px;padding:.6rem .9rem;margin:.6rem 0}
.asst-watch b{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.asst-cta{display:flex;flex-direction:column;gap:.6rem;margin-top:.9rem}
@media(min-width:560px){.asst-cta{flex-direction:row;flex-wrap:wrap;align-items:center}}

/* ---------- Calculateur ---------- */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1.2rem;max-width:680px;margin:0 auto;box-shadow:0 1px 3px rgba(13,43,69,.06)}
.calc-grid{display:grid;grid-template-columns:1fr;gap:.9rem}
@media(min-width:620px){.calc-grid{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:.84rem;font-weight:700;margin-bottom:.25rem}
.field .fhint{font-weight:400;color:var(--muted);font-size:.78rem}
.field input,.field select{width:100%;padding:.6rem .75rem;font-size:1rem;border:1.5px solid var(--line);
  border-radius:9px;font-family:inherit;background:#fff}
.field input[type="range"]{padding:0;accent-color:var(--navy-2)}
.field .rangelab{font-size:.82rem;color:var(--muted);margin-top:.15rem}
.calc-actions{margin-top:1rem;display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.res{margin-top:1.3rem}
.res-grid{display:grid;grid-template-columns:1fr;gap:.7rem;margin:.8rem 0}
@media(min-width:620px){.res-grid{grid-template-columns:1fr 1fr}}
.res-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.85rem .95rem}
.res-card .rl{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.res-card .rv{font-size:1.45rem;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.res-card .rs{font-size:.8rem;color:var(--muted)}
.res-alert{border-radius:10px;padding:.7rem .95rem;font-size:.9rem;margin:.5rem 0}
.res-suggest{background:var(--navy);color:#fff;border-radius:10px;padding:.9rem 1rem;margin:.7rem 0;font-size:.95rem}
.res-suggest a{color:#ffd23f;font-weight:700}
.res-note{font-size:.8rem;color:var(--muted);margin-top:.6rem}

/* ---------- Cartes produits ---------- */
.models{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.5rem 0}
@media(min-width:800px){.models{grid-template-columns:repeat(3,1fr)}}
.model{background:var(--surface);border:1px solid var(--line);border-left:6px solid;border-radius:var(--radius);
  padding:1.15rem 1.2rem 1.3rem;display:flex;flex-direction:column}
.model h3{margin:.3rem 0 .2rem}
.model .mw{font-size:1.5rem;font-weight:800;line-height:1.15}
.model .mtech{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin:.1rem 0 .6rem}
.model ul{margin:.3rem 0 .9rem;padding-left:1.1em;flex:1}
.model li{font-size:.9rem}
.model .btn{font-size:.88rem}
.m-1200{border-left-color:var(--c1200)} .m-1200 .mw,.m-1200 .mtech{color:var(--c1200)}
.m-2000{border-left-color:var(--c2000)} .m-2000 .mw,.m-2000 .mtech{color:var(--c2000)}
.m-3000{border-left-color:var(--c3000)} .m-3000 .mw,.m-3000 .mtech{color:var(--c3000)}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line);max-width:46rem}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;padding:.85rem .2rem;font-weight:700;list-style:none;position:relative;padding-right:2rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:.3rem;top:.55rem;font-size:1.3rem;color:var(--sky);font-weight:700}
.faq-list details[open] summary::after{content:"–"}
.faq-list .fa{padding:0 .2rem .9rem;color:var(--ink-2);font-size:.95rem}

/* ---------- Écosystème ---------- */
.eco{background:var(--navy);color:#dce8f2}
.eco h2{color:#fff}
.eco p{color:#b9cbdd;max-width:46rem}
.eco .models .model{background:var(--navy-2);border-color:#1d4a70}
.eco .model h3,.eco .model li{color:#e8f1f8}
.eco strong{color:#fff}
.eco .m-1200 .mw,.eco .m-1200 .mtech{color:#ffb84d}
.eco .m-2000 .mw,.eco .m-2000 .mtech{color:#7fd4ef}
.eco .m-3000 .mw,.eco .m-3000 .mtech{color:#b8b7f7}

/* ---------- Pied de page ---------- */
.site-foot{background:var(--navy);color:#b9cbdd;margin-top:2.5rem}
.foot-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;padding-top:2.2rem;padding-bottom:1.4rem}
@media(min-width:760px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.foot-brand{color:#fff;font-weight:800;font-size:1.15rem;margin:.1rem 0 .5rem}
.foot-brand b{color:#ffd23f}
.site-foot h2{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;margin:.2rem 0 .6rem}
.site-foot nav a{display:block;color:#b9cbdd;text-decoration:none;font-size:.88rem;padding:.18rem 0}
.site-foot nav a:hover{color:#fff}
.foot-legal{border-top:1px solid #1d4a70;padding-top:1rem;padding-bottom:1.6rem;font-size:.78rem;color:#8ba3ba}

/* ---------- Page légale ---------- */
.legal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.5rem;max-width:52rem;margin:1.5rem auto}
.legal h2{font-size:1.15rem;margin-top:1.6rem}

/* ---------- Barre de debug mesure (?debug=1) ---------- */
.debugbar{position:fixed;left:0;right:0;bottom:0;background:#08131f;color:#7fe3a8;font-family:Consolas,"Courier New",monospace;
  font-size:.72rem;padding:.45rem .9rem;z-index:999;max-height:38vh;overflow:auto;border-top:2px solid #1d4a70}
.debugbar b{color:#ffd23f}
.debugbar .ttl{color:#8ba3ba;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;margin:.2rem 0}

/* ---------- Divers ---------- */
.center{text-align:center}
.mt0{margin-top:0}
.small{font-size:.85rem;color:var(--muted)}
.arrowline{font-weight:800;color:var(--sky)}
hr.sep{border:none;border-top:1px solid var(--line);margin:2.2rem 0}
@media print{.site-head,.site-foot,.main-nav,.debugbar{display:none}}