/* PROMACEO PDF — styles propres au site vitrine. Jetons et primitives dans promaceo.css. */
/* Layout : la page est traitée comme un plan technique — fond quadrillé, sections encadrées
   comme des cartouches ISO, repères de cotation. Le sujet fournit la forme. */
.wrap{max-width:1140px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
section{padding-block:clamp(44px,7vw,84px)}
/* ---------- barre de navigation ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;gap:20px;padding-block:11px;flex-wrap:wrap}
.nav-l{display:flex;gap:18px;font-size:14px;font-weight:600}
.nav-l a{color:var(--ink-2);text-decoration:none}
.nav-l a:hover{color:var(--or)}
@media (max-width:760px){.nav-l{display:none}}
.nav-sp{flex:1}
/* ---------- cartouche : l'encadré ISO qui sert de motif ---------- */
/* ---------- hero ---------- */
.hero{padding-top:clamp(24px,3.2vw,40px);padding-bottom:clamp(20px,2.6vw,34px)}
.hero h1 em{font-style:normal;color:inherit;
  background:linear-gradient(transparent 78%,color-mix(in srgb,var(--or) 26%,transparent) 78%,color-mix(in srgb,var(--or) 26%,transparent) 96%,transparent 96%)}
.hero-sub{font-size:clamp(16px,2vw,19px);color:var(--ink-2);max-width:58ch;margin:16px 0 22px}
.cta-row{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.trust{display:flex;gap:16px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--ink-2)}
.trust span{display:inline-flex;gap:6px;align-items:center}
.trust b{color:var(--ink)}
/* ---------- recherche d'outil ---------- */
.finder{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.finder input{flex:1 1 260px;min-width:0;font:inherit;padding:12px 14px;border:1.5px solid var(--rule);
  border-radius:3px;background:var(--sheet);color:var(--ink)}
.finder input:focus{border-color:var(--or);outline:none}
.fil{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.fil button{font:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--rule);background:var(--sheet);
  color:var(--ink-2);border-radius:999px;padding:4px 12px;cursor:pointer}
.fil button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px}
.tile{background:var(--sheet);border:1px solid var(--rule);padding:12px 13px;border-radius:3px;min-width:0}
.tile.new{border-left:3px solid var(--or-vif)}
.tile h3{font-size:15px;font-family:var(--fb);font-weight:600;letter-spacing:0;margin-bottom:3px}
.tile p{font-size:12.5px;color:var(--ink-2);margin:0}
.tile .lab{font-family:var(--fm);font-size:9.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--or);
  display:block;margin-bottom:4px}
.none{color:var(--ink-2);font-size:14px;padding:18px 0}
/* ---------- démo retouche ---------- */
.demo2{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:18px}
.demo-pane{background:var(--sheet);border:1px solid var(--rule);border-radius:3px;overflow:hidden;min-width:0}
.demo-pane header{padding:8px 12px;border-bottom:1px solid var(--rule);font-family:var(--fm);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.1em;display:flex;justify-content:space-between;gap:8px;align-items:center}
.demo-pane.bad header{background:color-mix(in srgb,var(--crit) 12%,transparent);color:var(--crit)}
.demo-pane.good header{background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok)}
.docrow{padding:22px 0;background:var(--sheet);position:relative;overflow:hidden}
.docline{display:grid;grid-template-columns:1fr 92px 108px;align-items:baseline;
  font-family:"Times New Roman",serif;font-size:15px;padding:7px 14px;border-top:1px solid var(--rule)}
.docline:last-child{border-bottom:1px solid var(--rule)}
.docline .q{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.cellbox{position:relative;text-align:right;font-variant-numeric:tabular-nums;border-left:1px solid var(--rule);
  padding-left:8px;height:1.3em}
.cellbox .val{position:absolute;right:0;top:0;white-space:nowrap;transform-origin:100% 50%}
.cellbox.clip{overflow:visible}
.cellbox .val.over{color:var(--crit)}
.bump{outline:1px dashed var(--crit);outline-offset:2px}
.demo-ctl{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:16px}
.demo-ctl label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--ink-2)}
.demo-ctl input{font:inherit;font-family:var(--fm);padding:8px 10px;border:1.5px solid var(--rule);border-radius:3px;
  background:var(--sheet);color:var(--ink);width:160px}
.metr{font-family:var(--fm);font-size:11.5px;color:var(--ink-2);padding:8px 12px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* ---------- démo cartouche ---------- */
.plan{background:var(--sheet);border:1.5px solid var(--ink);position:relative;aspect-ratio:1.414/1;
  min-height:210px;overflow:hidden}
.plan::before{content:"";position:absolute;inset:10px;border:1px solid var(--rule)}
.plan .walls{position:absolute;inset:0}
.pc{position:absolute;right:10px;bottom:10px;width:min(62%,300px);background:var(--sheet);
  border:1.5px solid var(--ink);font-family:var(--fm);font-size:9.5px}
.pc .r{display:flex;border-bottom:1px solid var(--rule)}
.pc .r:last-child{border-bottom:0}
.pc .c{padding:3px 6px;border-right:1px solid var(--rule);flex:1;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pc .c:last-child{border-right:0}
.pc .k{color:var(--ink-2);font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.scanbar{position:absolute;left:0;right:0;height:2px;background:var(--or);box-shadow:0 0 12px var(--or);
  opacity:0;top:0}
.scanning .scanbar{animation:scan 1.1s ease-in-out}
@keyframes scan{0%{top:0;opacity:1}100%{top:100%;opacity:0}}
.idx{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:12px}
.idx th,.idx td{border:1px solid var(--rule);padding:5px 8px;text-align:left}
.idx th{background:var(--or-soft);font-family:var(--fm);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}
.idx td.mono{font-family:var(--fm)}
/* ---------- calculateur ---------- */
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;align-items:end}
.calc label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.calc input{font:inherit;font-family:var(--fm);padding:10px 12px;border:1.5px solid var(--rule);border-radius:3px;
  background:var(--sheet);color:var(--ink)}
.out-big{font-family:var(--fd);font-weight:800;font-size:clamp(30px,5vw,46px);letter-spacing:-.03em;color:var(--or);
  font-variant-numeric:tabular-nums;line-height:1}
.out-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin-top:22px;
  padding-top:20px;border-top:1px solid var(--rule)}
.out-row div span{display:block;font-family:var(--fm);font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-2);margin-top:6px}
/* ---------- comparatif ---------- */
table.cmp{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--sheet)}
table.cmp th,table.cmp td{border:1px solid var(--rule);padding:9px 11px;text-align:left;vertical-align:top}
table.cmp thead th{background:var(--or-soft);font-family:var(--fm);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.08em;white-space:nowrap}
table.cmp tbody th{font-weight:600;font-size:13.5px}
table.cmp td{text-align:center;font-family:var(--fm);font-size:12.5px}
table.cmp td.y{color:var(--ok);font-weight:600}
table.cmp td.n{color:var(--ink-2)}
table.cmp td.p{color:var(--signal)}
table.cmp col.me{background:color-mix(in srgb,var(--or) 7%,transparent)}
/* ---------- confidentialité ---------- */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:8px}
.step{background:var(--sheet);border:1px solid var(--rule);padding:14px;border-radius:3px}
.step .n{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;color:var(--or)}
.step h3{font-size:15.5px;font-family:var(--fb);font-weight:600;letter-spacing:0;margin:5px 0 5px}
.step p{font-size:13px;color:var(--ink-2);margin:0}
/* ---------- tarifs ---------- */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.price{background:var(--sheet);border:1px solid var(--rule);padding:20px;border-radius:3px;display:flex;
  flex-direction:column;gap:10px}
.price.hi{border:1.5px solid var(--or);box-shadow:var(--sh)}
.price .amt{font-family:var(--fd);font-weight:800;font-size:33px;letter-spacing:-.03em}
.price .amt small{font-family:var(--fb);font-weight:400;font-size:13px;color:var(--ink-2);letter-spacing:0}
.price ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink-2);display:grid;gap:5px}
.price .btn{margin-top:auto;justify-content:center}
/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:15px 0;font-weight:600;font-size:16px;list-style:none;display:flex;
  gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--fm);color:var(--or);font-weight:600;flex:0 0 auto;
  width:14px;line-height:1.5}
.faq details[open] summary::before{content:"–"}
.faq .ans{padding:0 0 16px 26px;color:var(--ink-2);font-size:14.5px}
.faq .ans p:last-child{margin-bottom:0}
/* ---------- pied ---------- */
footer{border-top:1.5px solid var(--ink);background:var(--sheet)}
.foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px;padding-block:34px}
.foot h4{font-family:var(--fm);font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-2);
  font-weight:600;margin-bottom:9px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:13.5px}
.foot a{color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--or);text-decoration:underline}
.foot-b{border-top:1px solid var(--rule);padding-block:16px;font-size:12.5px;color:var(--ink-2);
  display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.copybox{display:inline-flex;gap:8px;align-items:center;font-family:var(--fm);font-size:12.5px;
  border:1px solid var(--rule);border-radius:3px;padding:3px 4px 3px 9px}

/* ---- pages d'outil : étapes numérotées et tuiles cliquables ---- */
ol.etapes{counter-reset:et;list-style:none;margin:18px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
ol.etapes li{counter-increment:et;background:var(--sheet);border:1px solid var(--rule);
  border-radius:var(--r);padding:16px 16px 14px;position:relative}
ol.etapes li::before{content:counter(et,decimal-leading-zero);font-family:var(--fm);font-size:11px;
  letter-spacing:.12em;color:var(--or);display:block;margin-bottom:6px}
ol.etapes h3{font-size:15.5px;font-family:var(--fb);font-weight:600;letter-spacing:0;margin-bottom:5px}
ol.etapes p{font-size:13px;color:var(--ink-2);margin:0}
a.tile{text-decoration:none;color:inherit;display:block;transition:border-color .12s}
a.tile:hover{border-color:var(--or-vif);box-shadow:0 0 0 2px var(--or-soft)}
.hero-sub a{color:var(--or)}