:root{
    --y:#F5A623; --y2:#ffcf6a; --ink:#14181F; --dark2:#1b2130; --dark3:#0e1218;
    --txt:#1A1E27; --mut:#656c79; --line:#eef0f4; --light:#F4F6F9;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  html,body{ overflow-x:hidden; max-width:100%; }
  body{ font-family:'Work Sans',system-ui,sans-serif; color:var(--txt); background:#fff; }
  a{ text-decoration:none; color:inherit; }
  img{ display:block; max-width:100%; }
  .wrap{ max-width:1200px; margin:0 auto; padding:0 28px; }
  .display{ font-family:'Big Shoulders Display',sans-serif; text-transform:uppercase; letter-spacing:.5px; }

  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; border-radius:100px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; border:none; }
  .btn:hover{ transform:translateY(-2px); }
  .btn-y{ background:var(--y); color:#14181F; box-shadow:0 8px 22px rgba(245,166,35,.35); }
  .btn-ghost{ border:2px solid rgba(255,255,255,.35); color:#fff; background:transparent; }
  .btn-dark{ background:var(--ink); color:#fff; }

  /* HEADER */
  header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); }
  .nav{ height:78px; display:flex; align-items:center; justify-content:space-between; }
  .logo{ height:46px; }
  nav.links{ display:flex; align-items:center; gap:32px; }
  nav.links a{ color:#2a2f3a; font-weight:600; font-size:16px; }
  nav.links a:hover{ color:var(--y); }
  .nav .btn-y{ padding:12px 24px; font-size:16px; }
  .burger{ display:none; }

  /* HERO */
  .hero{ background:
      radial-gradient(720px 520px at 84% 42%, rgba(245,166,35,.16), transparent 62%),
      linear-gradient(155deg,#161b26 0%,#12161f 60%,#0e1218 100%);
    color:#fff; position:relative; overflow:hidden; }
  .hero .wrap{ display:flex; align-items:center; gap:56px; padding-top:72px; padding-bottom:86px; }
  .hcopy{ flex:1; min-width:0; }
  .eyebrow{ font-weight:700; font-size:15px; letter-spacing:3px; color:var(--y); text-transform:uppercase; }
  h1{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(34px,7vw,78px); line-height:.92; letter-spacing:.5px; margin-top:16px; text-transform:uppercase; overflow-wrap:break-word; }
  h1 em{ font-style:normal; color:var(--y); }
  .lead{ font-size:clamp(17px,2.1vw,22px); line-height:1.45; color:#c9d2e2; margin-top:22px; max-width:min(540px,100%); }
  .ticks{ margin-top:24px; display:flex; flex-direction:column; gap:11px; }
  .tick{ display:flex; align-items:center; gap:12px; font-size:18px; font-weight:600; color:#eef2f8; }
  .tick i{ width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:var(--y); display:flex; align-items:center; justify-content:center; }
  .tick i svg{ width:16px; height:16px; }
  .cta{ margin-top:32px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .cta .btn{ padding:16px 30px; font-size:18px; }

  .hphone{ width:400px; flex:0 0 400px; display:flex; justify-content:center; position:relative; }
  .glow{ position:absolute; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(245,166,35,.28),transparent 65%); top:80px; }
  .ctqbadge{ position:absolute; top:63%; left:50%; transform:translateX(-50%); background:var(--y); color:#14181F; font-weight:700; font-size:14px; padding:8px 16px; border-radius:100px; z-index:4; box-shadow:0 10px 26px rgba(0,0,0,.55); white-space:nowrap; }
  .device{ width:300px; border-radius:44px; border:10px solid #05070a; overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.06); position:relative; z-index:2; }
  .checker{ height:12px;
    background-image:linear-gradient(45deg,var(--y) 25%,transparent 25%),linear-gradient(-45deg,var(--y) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--y) 75%),linear-gradient(-45deg,transparent 75%,var(--y) 75%);
    background-size:24px 24px; background-position:0 0,0 12px,12px -12px,-12px 0; background-color:var(--dark3); }

  /* SECTIONS */
  section{ padding:84px 0; }
  .sec-head{ text-align:center; margin-bottom:52px; }
  .sec-head h2{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(30px,5.4vw,54px); text-transform:uppercase; letter-spacing:.5px; overflow-wrap:break-word; }
  .sec-head p{ color:var(--mut); font-size:20px; margin-top:8px; }

  .why{ background:var(--light); }
  .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .card{ background:#fff; border-radius:20px; padding:38px 28px; box-shadow:0 12px 34px rgba(20,24,31,.06); text-align:center; }
  .card .ic{ width:70px; height:70px; border-radius:18px; background:linear-gradient(var(--y2),var(--y)); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; box-shadow:0 10px 24px rgba(245,166,35,.3); }
  .card .ic svg{ width:34px; height:34px; }
  .card h3{ font-size:23px; font-weight:700; }
  .card p{ margin-top:9px; color:var(--mut); font-size:17px; line-height:1.45; }

  /* COMMENT CA MARCHE */
  .steps{ background:#fff; }
  .grid3.stepgrid{ counter-reset:s; }
  .step{ text-align:center; padding:20px; position:relative; }
  .step .num{ width:64px; height:64px; border-radius:50%; background:var(--ink); color:var(--y); font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:34px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
  .step h3{ font-size:23px; font-weight:700; }
  .step p{ margin-top:8px; color:var(--mut); font-size:17px; line-height:1.45; }

  /* PRIX */
  .prix{ background:linear-gradient(155deg,#161b26,#0e1218); color:#fff; }
  .prixbox{ display:flex; gap:40px; align-items:stretch; background:rgba(255,255,255,.04); border:1px solid rgba(245,166,35,.25); border-radius:24px; padding:44px; flex-wrap:wrap; }
  .prixleft{ flex:1; min-width:240px; }
  .prixleft .amt{ display:flex; align-items:flex-start; gap:8px; }
  .prixleft .amt .n{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(64px,12vw,120px); color:var(--y); line-height:.85; }
  .prixleft .amt .c{ font-size:26px; font-weight:700; margin-top:14px; }
  .prixleft .per{ font-size:20px; color:#c9d2e2; margin-top:6px; }
  .prixleft .tag{ margin-top:6px; font-size:16px; color:var(--y); font-weight:600; }
  .prixleft .cta{ margin-top:26px; }
  .prixleft .cta .btn{ padding:16px 32px; font-size:18px; }
  .stores{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
  .store{ display:inline-flex; align-items:center; gap:10px; border:1.5px solid rgba(255,255,255,.3); border-radius:12px; padding:10px 18px; color:#fff; font-weight:700; font-size:15px; }
  .store small{ display:block; font-size:11px; font-weight:400; color:#9aa4b7; }
  .prixright{ flex:1; min-width:240px; }
  .prixright h3{ font-size:20px; margin-bottom:16px; color:#fff; }
  .incl{ display:flex; flex-direction:column; gap:12px; }
  .incl div{ display:flex; align-items:center; gap:12px; font-size:17px; color:#dfe5ef; }
  .incl i{ width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#2ECC71;display:flex;align-items:center;justify-content:center; }
  .incl i svg{ width:15px;height:15px; }

  /* ACCES */
  .access{ background:var(--light); }
  .acard{ background:#fff; border-radius:20px; padding:38px 30px; box-shadow:0 12px 34px rgba(20,24,31,.06); text-align:center; }
  .acard .ic{ width:80px; height:80px; border-radius:22px; background:var(--ink); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
  .acard .ic svg{ width:40px; height:40px; }
  .acard h3{ font-size:24px; font-weight:700; }
  .acard p{ margin:10px 0 22px; color:var(--mut); font-size:16px; line-height:1.4; }
  .acard .btn{ width:100%; padding:14px; font-size:16px; }

  /* FOOTER */
  footer{ background:var(--dark3); color:#8a93a6; padding:54px 0 30px; }
  .foot{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start; }
  .foot .u{ font-family:'Big Shoulders Display',sans-serif; font-size:30px; color:#fff; }
  .foot .u span{ color:var(--y); }
  .foot a{ color:#c9d2e2; }
  .foot a:hover{ color:var(--y); }
  .footcol h4{ color:#fff; font-size:16px; margin-bottom:12px; text-transform:uppercase; letter-spacing:1px; }
  .footcol div{ margin-bottom:8px; font-size:15px; }
  .copy{ margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); font-size:14px; text-align:center; }

  /* RESPONSIVE */
  @media (max-width:900px){
    nav.links{ display:none; }
    .nav .btn-y{ padding:10px 18px; font-size:14px; }
    .hero .wrap{ flex-direction:column; gap:40px; text-align:center; padding-top:52px; padding-bottom:60px; }
    .lead{ margin-left:auto; margin-right:auto; }
    .ticks{ align-items:flex-start; max-width:min(420px,100%); margin-left:auto; margin-right:auto; }
    .cta{ justify-content:center; }
    .hcopy{ width:100%; }
    .hphone{ flex-basis:auto; width:100%; }
    .grid3{ grid-template-columns:1fr; }
    section{ padding:60px 0; }
  }
  @media (max-width:480px){
    .wrap{ padding:0 18px; }
    .eyebrow{ font-size:13px; letter-spacing:2px; }
    .prixbox{ padding:24px; }
    .cta .btn, .prixleft .cta .btn{ padding:14px 22px; font-size:16px; }
  }
/* ---- Pages internes (service, mandataires) ---- */
.subhero{background:linear-gradient(135deg,var(--ink) 0%,var(--dark2) 55%,var(--dark3) 100%);color:#fff;padding:64px 0 56px}
.subhero .eyebrow{color:var(--y)}
.subhero h1{font-family:'Big Shoulders Display',sans-serif;font-size:clamp(34px,5.2vw,56px);line-height:1.02;letter-spacing:-.5px;margin:10px 0 14px}
.subhero h1 span{color:var(--y)}
.subhero .lead{color:#d8dbe2;max-width:720px;font-size:18px}
.subhero .cta{margin-top:22px}
.crumb{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--y)}
.crumb a{color:var(--y);text-decoration:none;opacity:.8}
.crumb a:hover{opacity:1}
.sec{padding:64px 0}
.sec.alt{background:var(--light)}
.prose{max-width:780px}
.prose p{color:#3d4351;font-size:17px;line-height:1.75;margin-bottom:16px}
.prose h3{font-size:21px;margin:28px 0 10px;color:var(--txt)}
.infobox{background:#fff;border:1px solid var(--line);border-left:5px solid var(--y);border-radius:14px;padding:22px 24px;margin:24px 0}
.infobox h3{margin:0 0 8px;font-size:19px}
.infobox p{margin:0;color:#3d4351;line-height:1.7}
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;position:relative;font-weight:600;color:var(--txt);font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:26px;line-height:1;color:var(--y)}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 22px 20px;color:#3d4351;line-height:1.7;margin:0}
.zone{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.zone span{background:#fff;border:1px solid var(--line);border-radius:100px;padding:8px 16px;font-size:14px;color:#3d4351}

/* ---- Appels a l'action centres (les .btn n'ont de rembourrage que dans .cta) ---- */
.cta.center{justify-content:center}
.sec .cta{margin-top:0}

/* ---- Formulaire de contact ---- */
.formwrap{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:start}
@media(max-width:900px){.formwrap{grid-template-columns:1fr}}
.fbox{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px}
.fbox h3{font-size:20px;margin:0 0 6px}
.fbox .sub{color:var(--mut);font-size:15px;margin-bottom:20px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:15px;margin-bottom:6px;color:var(--txt)}
.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1px solid #d9dde4;border-radius:10px;font-family:inherit;font-size:16px;color:var(--txt);background:#fff}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--y);box-shadow:0 0 0 3px rgba(245,166,35,.18)}
.field textarea{min-height:140px;resize:vertical}
.field .aide{font-size:13px;color:var(--mut);margin-top:5px}
.qui{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.qui label{display:inline-flex;align-items:center;gap:8px;border:1px solid #d9dde4;border-radius:100px;padding:10px 18px;cursor:pointer;font-weight:600;font-size:15px;margin:0}
.qui input{width:auto;margin:0}
.qui label:has(input:checked){border-color:var(--y);background:rgba(245,166,35,.10)}
#champ-ctq{display:none}
.formwrap:has(#qui-mandataire:checked) #champ-ctq{display:block}
.pot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden}
.msg{border-radius:12px;padding:16px 18px;margin-bottom:20px;font-size:15px;line-height:1.6}
.msg.ok{background:#e8f6ed;border:1px solid #b7e0c6;color:#1d6b3a}
.msg.err{background:#fdecec;border:1px solid #f3c2c2;color:#8f2020}
.coord{background:var(--ink);color:#fff;border-radius:18px;padding:28px}
.coord h3{font-size:19px;margin:0 0 16px;color:#fff}
.coord .bloc{margin-bottom:20px}
.coord .lab{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--y);font-weight:700;margin-bottom:6px}
.coord .val{font-size:16px;line-height:1.6;color:#e7e9ee}
.coord a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.coord a:hover{border-color:var(--y)}