/* ====================================================================
   Atelier des coûts — styles des pages métier (/restaurant, /batiment…)
   Charte KIT ATC : noir #06050A, crème #EDEBE6, or #F4DA60, grille.
   Accent par métier via la classe body.p-<slug>.
   ==================================================================== */
:root{
  --bg:#06050A; --panel:#16151D; --panel2:#211F28; --line:#363440;
  --ink:#EDEBE6; --sub:#8F8C84;
  --gold:#F4DA60; --goldSoft:rgba(244,218,96,0.14); --goldLine:rgba(244,218,96,0.38);
  --green:#8FAF7E; --terra:#D9634B;
  --display:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body:"Nunito", system-ui, -apple-system, sans-serif;
  --accent:var(--gold); --accentSoft:var(--goldSoft); --accentLine:var(--goldLine);
}
body.p-restaurant{--accent:#F4DA60;--accentSoft:rgba(244,218,96,.14);--accentLine:rgba(244,218,96,.38)}
body.p-batiment{--accent:#BEE1ED;--accentSoft:rgba(190,225,237,.13);--accentLine:rgba(190,225,237,.38)}
body.p-garage{--accent:#E8926F;--accentSoft:rgba(217,99,75,.16);--accentLine:rgba(217,99,75,.45)}
body.p-jardin{--accent:#8FAF7E;--accentSoft:rgba(118,144,105,.2);--accentLine:rgba(118,144,105,.5)}
body.p-boulangerie{--accent:#D8B478;--accentSoft:rgba(216,180,120,.16);--accentLine:rgba(216,180,120,.45)}
body.p-fleuriste{--accent:#D6A0B4;--accentSoft:rgba(214,160,180,.16);--accentLine:rgba(214,160,180,.45)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body);
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size:46px 46px;
}
.wrap{max-width:920px;margin:0 auto;padding:0 22px}
section{padding:54px 0}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-0.02em;line-height:1.08}
h2{font-size:clamp(24px,4.2vw,34px)}
.eyebrow{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  font-size:12px;color:var(--accent);margin-bottom:14px}
.muted{color:var(--sub)}
a{color:inherit}

/* ── TOPBAR ── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0}
.topbar .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.topbar .logo{width:34px;height:34px;border-radius:10px;background:var(--gold);
  display:grid;place-items:center;font-family:var(--display);font-weight:800;
  color:#06050A;font-size:19px;box-shadow:0 0 0 1px var(--goldLine);flex:none}
.topbar .bname{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.01em}
.topbar nav{display:flex;align-items:center;gap:14px}
.toplink{font-size:14px;font-weight:700;color:var(--sub);text-decoration:none}
.toplink:hover{color:var(--ink)}
.topbtn{display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:#06050A;
  font-weight:800;font-size:13.5px;text-decoration:none;padding:9px 14px;border-radius:11px}
.topbtn svg{width:15px;height:15px}
@media(max-width:560px){.toplink{display:none}}

/* ── HERO ── */
.hero{padding:36px 0 20px;text-align:center}
.hero h1{font-size:clamp(31px,6.6vw,52px);margin:0 auto 16px;max-width:18ch}
.hero .lead{font-size:clamp(16.5px,2.3vw,19px);color:var(--sub);max-width:52ch;margin:0 auto 26px}
.cta-row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 22px;border-radius:13px;
  font-family:var(--body);font-weight:800;font-size:15.5px;text-decoration:none;
  transition:transform .12s ease,opacity .12s ease;border:1px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#06050A}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn svg{width:18px;height:18px;flex:none}
.hero .under{margin-top:14px;font-size:13px;color:var(--sub)}

/* ── CAPTURES ── */
.shots{padding:26px 0 10px}
.shots-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px 2px 16px;-webkit-overflow-scrolling:touch}
.shots-row figure{flex:0 0 232px;scroll-snap-align:start}
.shots-row img{width:100%;height:auto;display:block;border-radius:20px;
  border:1px solid var(--line);background:var(--panel)}
.shots-row figcaption{font-size:12.5px;color:var(--sub);margin-top:9px;text-align:center;font-weight:600}
@media(min-width:800px){
  .shots-row{overflow:visible;flex-wrap:wrap;justify-content:center}
  .shots-row figure{flex:0 1 205px}
}

/* ── FONCTIONNALITÉS ── */
.feats-head{text-align:center;margin-bottom:30px}
.feats-head h2{margin-bottom:10px}
.grid-feat{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px}
.card .ico{font-size:24px;line-height:1;margin-bottom:12px;display:block}
.card h3{font-size:17px;margin-bottom:7px}
.card p{color:var(--sub);font-size:14.5px}
@media(max-width:680px){.grid-feat{grid-template-columns:1fr}}

/* ── APPRENDRE ── */
.learn-card{display:flex;align-items:center;gap:18px;background:var(--panel);
  border:1px solid var(--accentLine);border-radius:20px;padding:24px 26px;
  text-decoration:none;transition:transform .12s ease;box-shadow:0 0 0 4px var(--accentSoft)}
.learn-card:hover{transform:translateY(-2px)}
.learn-card .play{width:52px;height:52px;border-radius:16px;background:var(--accentSoft);
  border:1px solid var(--accentLine);display:grid;place-items:center;flex:none;font-size:21px}
.learn-card h3{font-size:17.5px;margin-bottom:5px}
.learn-card p{color:var(--sub);font-size:14px}
.learn-card .arrow{margin-left:auto;color:var(--sub);font-size:20px;flex:none}

/* ── FAQ ── */
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:15px;
  padding:0;margin-bottom:11px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;
  padding:17px 20px;font-family:var(--display);font-weight:700;font-size:15.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--accent);
  font-family:var(--body);font-weight:800;transition:transform .15s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 20px 18px;color:var(--sub);font-size:14.5px}

/* ── TÉLÉCHARGER / WAITLIST ── */
.dl-card{background:var(--panel);border:1px solid var(--goldLine);border-radius:20px;
  padding:34px 30px;text-align:center;max-width:640px;margin:0 auto;box-shadow:0 0 0 4px var(--goldSoft)}
.dl-card h2{margin-bottom:10px}
.dl-sub{color:var(--sub);font-size:15px;max-width:46ch;margin:0 auto 22px}
.dl-card .androidline{margin:26px auto 0;padding-top:24px;border-top:1px solid var(--line);max-width:520px}
.dl-card .androidline h3{font-size:16px;margin-bottom:6px}
.dl-card .androidline .note{color:var(--sub);font-size:13.5px;margin-bottom:16px}
.wl-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.wl-input{flex:1;min-width:210px;max-width:300px;background:var(--panel2);border:1px solid var(--line);
  border-radius:13px;padding:13px 16px;color:var(--ink);font-family:var(--body);font-size:15px;outline:none}
.wl-input:focus{border-color:var(--goldLine)}
.wl-msg{margin-top:13px;font-size:14px;color:var(--sub);min-height:20px}

/* ── AUTRES MÉTIERS ── */
.others{text-align:center}
.others h2{margin-bottom:8px}
.others .sub{color:var(--sub);margin-bottom:26px}
.grid-others{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.other{display:inline-flex;align-items:center;gap:9px;background:var(--panel);
  border:1px solid var(--line);border-radius:13px;padding:11px 16px;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--ink);
  transition:transform .12s ease,border-color .15s ease}
.other:hover{transform:translateY(-2px);border-color:var(--accentLine)}
.other .em{font-size:17px}
.hublink{display:inline-block;margin-top:20px;color:var(--sub);font-size:14px;font-weight:700}

/* ── FOOTER ── */
footer{border-top:1px solid var(--line);padding:30px 0 46px;text-align:center;color:var(--sub);font-size:13.5px}
footer .name{font-family:var(--display);font-weight:800;color:var(--ink);font-size:15px}
footer .fnav{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center}
footer .fnav a{color:var(--sub);text-decoration:none;font-weight:600}
footer .fnav a:hover{color:var(--ink)}

@media(max-width:720px){section{padding:44px 0}}