/* ══════════════════════════════════════════════════════════════════════════
   SwapGo — feuille de style du site
   Identité : logo SwapGo, vert #1D9E75 (application) et #02E038 (logo).
   Typographie : Archivo (titres), Public Sans (texte), IBM Plex Mono (chiffres).
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#FAFAF7; --surface:#FFFFFF; --sunk:#F2F2EC;
  --ink:#1A1C1B; --ink-2:#464343; --muted:#7E837E;
  --line:#E4E4DD; --line-2:#CFCFC5;
  --brand:#1D9E75; --brand-deep:#085041; --brand-soft:#E1F5EE; --brand-bright:#02E038;
  --coral:#D85A30; --amber:#BA7517;
  --logo-bg:#FFFFFF;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(26,28,27,.05), 0 18px 40px -32px rgba(26,28,27,.55);
  --rail:#CFCFC5;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0F1211; --surface:#161A18; --sunk:#1B201D;
    --ink:#ECEFEB; --ink-2:#B9C0BA; --muted:#868D88;
    --line:#252B27; --line-2:#36403A;
    --brand:#35C48F; --brand-deep:#8FE7C6; --brand-soft:#11291F; --brand-bright:#02E038;
    --coral:#E9835E; --amber:#DFA640;
    --logo-bg:#0F1211; --rail:#36403A;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 20px 44px -34px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0F1211; --surface:#161A18; --sunk:#1B201D;
  --ink:#ECEFEB; --ink-2:#B9C0BA; --muted:#868D88;
  --line:#252B27; --line-2:#36403A;
  --brand:#35C48F; --brand-deep:#8FE7C6; --brand-soft:#11291F; --brand-bright:#02E038;
  --coral:#E9835E; --amber:#DFA640;
  --logo-bg:#0F1211; --rail:#36403A;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 20px 44px -34px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:-.022em}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

.wrap{width:100%; max-width:1120px; margin:0 auto; padding-inline:22px}
.narrow{max-width:820px}
section{padding-block:74px; border-top:1px solid var(--line)}
section.first{border-top:none}
.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:14px; display:block;
}
h2.sec{font-size:clamp(26px,3.4vw,37px); font-weight:700; line-height:1.15; max-width:20ch}
.lede{margin-top:14px; font-size:17px; color:var(--ink-2); max-width:62ch; line-height:1.66}
.prose p + p{margin-top:15px}
.prose p{font-size:16px; color:var(--ink-2); line-height:1.7; max-width:66ch}

/* ─── en-tête ─── */
.nav{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:60;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(1.3) blur(12px); border-bottom:1px solid var(--line);
}
.navin{display:flex; align-items:center; gap:16px; height:66px}
.brandmark{display:flex; align-items:center; flex:none; text-decoration:none}
.brandmark img{height:25px; width:auto; display:block}
.brandmark img.lg-d{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brandmark img.lg-l{display:none}
  :root:not([data-theme="light"]) .brandmark img.lg-d{display:block}
}
:root[data-theme="dark"] .brandmark img.lg-l{display:none}
:root[data-theme="dark"] .brandmark img.lg-d{display:block}
:root[data-theme="light"] .brandmark img.lg-l{display:block}
:root[data-theme="light"] .brandmark img.lg-d{display:none}
.navlinks{display:flex; gap:20px; margin-left:10px}
.navlinks a{
  font-size:14.5px; font-weight:500; color:var(--ink-2); text-decoration:none;
  padding-block:7px; border-bottom:1.5px solid transparent; white-space:nowrap;
}
.navlinks a:hover{color:var(--ink); border-bottom-color:var(--brand)}
.navlinks a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--brand)}
.navspace{margin-left:auto}
.langs{display:flex; border:1px solid var(--line-2); border-radius:7px; overflow:hidden; flex:none}
.langs button{
  padding:5px 9px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em;
  color:var(--muted); border-right:1px solid var(--line-2);
}
.langs button:last-child{border-right:none}
.langs button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.iconbtn{
  border:1px solid var(--line-2); border-radius:7px; width:34px; height:31px;
  display:grid; place-items:center; color:var(--ink-2); flex:none;
}
.iconbtn:hover{border-color:var(--brand); color:var(--brand)}
.burger{display:none}
@media (max-width:980px){
  .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--surface); border-bottom:1px solid var(--line); padding:8px 22px 16px;
  }
  .navlinks.open{display:flex}
  .navlinks a{padding-block:11px; border-bottom:1px solid var(--line); border-radius:0}
  .burger{display:grid}
}

/* ─── boutons ─── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:9px; font-weight:600; font-size:15px;
  border:1px solid var(--line-2); color:var(--ink); text-decoration:none; white-space:nowrap;
}
.btn:hover{border-color:var(--ink-2)}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#FFFFFF}
.btn.primary:hover{filter:brightness(1.06)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn.primary{color:#062018} }
:root[data-theme="dark"] .btn.primary{color:#062018}
.btn.ghost{background:var(--surface)}
.cta{display:flex; flex-wrap:wrap; gap:11px; margin-top:26px}

/* ─── emplacements photo ───
   L'image réelle est chargée depuis img/. Tant qu'elle n'existe pas, le bloc
   bascule sur une composition dessinée (classe .noimg) : le site reste fini. */
.ph{position:relative; margin:0; border-radius:14px; overflow:hidden; background:var(--sunk); border:1px solid var(--line)}
.ph img{display:block; width:100%; height:100%; object-fit:cover}
.ph .art{display:none}
.ph.noimg img{display:none}
.ph.noimg .art{
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  width:100%; height:100%; padding:22px;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--brand) 7%, transparent) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 22%, var(--sunk)) 0%, var(--sunk) 68%);
}
.ph.noimg .art svg{width:46px; height:46px; color:var(--brand); opacity:.85}
.ph.noimg .art .cap{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--brand-deep); text-transform:uppercase}
.ph.r32{aspect-ratio:3/2}
.ph.r169{aspect-ratio:16/9}
.ph.r23{aspect-ratio:2/3}
.ph.r11{aspect-ratio:1/1}

/* ─── ouverture ─── */
.hero{padding-block:58px 0; border-top:none}
.herogrid{display:grid; grid-template-columns:1.06fr .94fr; gap:46px; align-items:center}
@media (max-width:940px){ .herogrid{grid-template-columns:1fr; gap:32px} }
.tag{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-deep);
  background:var(--brand-soft); border:1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  padding:5px 11px; border-radius:999px;
}
.tag .pulse{width:7px; height:7px; border-radius:50%; background:var(--brand-bright)}
h1.hero-t{
  margin-top:20px; font-size:clamp(35px,5.6vw,58px); font-weight:800; line-height:1.03;
  letter-spacing:-.035em; max-width:16ch;
}
h1.hero-t em{font-style:normal; color:var(--brand)}
h1.page-t{font-size:clamp(31px,4.6vw,48px); font-weight:800; line-height:1.06; letter-spacing:-.03em; max-width:18ch}
.hero-p{margin-top:19px; font-size:18px; line-height:1.6; color:var(--ink-2); max-width:52ch}
.hero-note{margin-top:15px; font-size:13px; color:var(--muted)}

/* ─── corridor ─── */
.corhead{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.corhead h3{font-size:19px; font-weight:700}
.corhead .meta{font-family:var(--mono); font-size:12px; color:var(--muted)}
.line{position:relative; padding-top:24px; overflow-x:auto}
.linetrack{position:relative; min-width:594px; margin-inline:9.5%; height:3px; background:var(--rail); border-radius:2px}
.linetrack i{
  position:absolute; inset:0; background:linear-gradient(90deg, var(--brand), var(--brand-bright));
  border-radius:2px; transform-origin:left center; animation:draw 2.1s cubic-bezier(.22,.7,.2,1) .15s both;
}
@keyframes draw{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
.stops{display:flex; justify-content:space-between; min-width:660px; margin-top:-8px}
.stop{display:flex; flex-direction:column; align-items:center; gap:9px; width:19%; text-align:center}
.stop .dot{width:13px; height:13px; border-radius:50%; background:var(--surface); border:3px solid var(--brand); box-shadow:0 0 0 4px var(--paper)}
.stop.hub .dot{background:var(--brand-bright); border-color:var(--brand-bright)}
.stop .n{font-size:13px; font-weight:600; line-height:1.25}
.stop .t{font-family:var(--mono); font-size:11.5px; color:var(--muted)}
@media (prefers-reduced-motion:reduce){ .linetrack i{animation:none} html{scroll-behavior:auto} }

/* ─── grilles ─── */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:980px){ .grid4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:860px){ .grid3{grid-template-columns:1fr} .grid2{grid-template-columns:1fr} }
@media (max-width:560px){ .grid4{grid-template-columns:1fr} }
.split{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
@media (max-width:900px){ .split{grid-template-columns:1fr; gap:28px} }

.card{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:22px 24px; display:flex; flex-direction:column; gap:10px}
.card h3{font-size:19px; font-weight:700}
.card p{font-size:15px; color:var(--ink-2); line-height:1.62}
.card ul{margin:0; padding-left:18px; font-size:14.5px; color:var(--ink-2); line-height:1.75}
.card .foot{margin-top:auto; padding-top:12px; border-top:1px solid var(--line); font-family:var(--mono); font-size:13.5px}
.badge{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid currentColor; padding:2px 7px; border-radius:4px; align-self:flex-start;
}
.b-cur{color:var(--brand)} .b-com{color:var(--coral)} .b-rel{color:var(--amber)} .b-shp{color:var(--brand-deep)}

.step{border-top:2px solid var(--ink); padding-top:15px}
.step .num{font-family:var(--mono); font-size:12px; color:var(--brand); font-weight:600; letter-spacing:.1em}
.step h3{margin-top:8px; font-size:19px; font-weight:700}
.step p{margin-top:8px; font-size:15px; color:var(--ink-2); line-height:1.62}

.tcard{border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:0 11px 11px 0; padding:18px 20px; background:var(--surface)}
.tcard h3{font-size:16.5px; font-weight:700}
.tcard p{margin-top:7px; font-size:14.5px; color:var(--ink-2); line-height:1.62}

/* ─── chiffres ─── */
.figures{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 24px; box-shadow:var(--shadow)}
.figures h3{font-size:13.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.frow{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:13px 0; border-bottom:1px solid var(--line)}
.frow:last-of-type{border-bottom:none}
.frow .k{font-size:14.5px; color:var(--ink-2)}
.frow .v{font-family:var(--mono); font-size:19px; font-weight:600}
.frow .v small{font-size:12px; color:var(--muted); font-weight:400}
.figures .foot{margin-top:12px; font-size:12.5px; color:var(--muted); line-height:1.6}

/* ─── tableaux ─── */
.tablewrap{margin-top:30px; overflow-x:auto; border:1px solid var(--line); border-radius:13px; background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:620px}
th,td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line)}
thead th{background:var(--sunk); font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
tbody tr:last-child td{border-bottom:none}
td.num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
td .sub{display:block; font-size:12.5px; color:var(--muted)}
.note{margin-top:14px; font-size:13.5px; color:var(--muted); max-width:72ch; line-height:1.65}

/* ─── maquettes de téléphone ─── */
.phones{display:flex; gap:26px; justify-content:center; flex-wrap:wrap}
.phone{
  width:266px; flex:none; border-radius:38px; padding:11px;
  background:linear-gradient(170deg,#2C2C2A,#111312); box-shadow:0 26px 60px -32px rgba(0,0,0,.75), 0 2px 5px rgba(0,0,0,.3);
}
.screen{
  position:relative; border-radius:28px; overflow:hidden; background:#FFFFFF; color:#1A1C1B;
  height:540px; display:flex; flex-direction:column; font-size:13px;
}
.screen .bar{
  display:flex; align-items:center; justify-content:space-between; padding:11px 16px 6px;
  font-family:var(--mono); font-size:10.5px; color:#1A1C1B;
}
.screen .notch{position:absolute; top:7px; left:50%; transform:translateX(-50%); width:86px; height:19px; border-radius:11px; background:#111312}
.screen .body{padding:10px 16px 16px; display:flex; flex-direction:column; gap:11px; overflow:hidden}
.screen h4{font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:-.02em}
.screen .sub{font-size:11.5px; color:#7E837E}
.sline{display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; border-bottom:1px solid #EDEDE6; font-size:12.5px}
.sline:last-child{border-bottom:none}
.sline b{font-family:var(--mono); font-weight:600}
.sbox{border:1px solid #E4E4DD; border-radius:11px; padding:12px 14px; display:flex; flex-direction:column; gap:4px}
.sbox.code{border-color:#1D9E75; background:#E1F5EE}
.sbox .codev{font-family:var(--mono); font-size:25px; font-weight:600; letter-spacing:7px; color:#085041}
.sbtn{margin-top:auto; background:#1D9E75; color:#fff; border-radius:10px; padding:12px; text-align:center; font-weight:600; font-size:13.5px}
.sbtn.ghost{background:transparent; color:#1D9E75; border:1px solid #1D9E75}
.stl{display:flex; gap:10px; align-items:flex-start}
.stl .rail{display:flex; flex-direction:column; align-items:center; width:14px; padding-top:3px}
.stl .rail .d{width:10px; height:10px; border-radius:50%; background:#1D9E75}
.stl .rail .d.off{background:#fff; border:2px solid #D8D8D0}
.stl .rail .l{width:2px; flex:1; min-height:22px; background:#D8D8D0}
.stl .rail .l.on{background:#1D9E75}
.stl .txt .t1{font-size:12.5px; font-weight:600}
.stl .txt .t2{font-size:11px; color:#7E837E}
.job{border:1px solid #E4E4DD; border-radius:11px; padding:11px 13px; display:flex; flex-direction:column; gap:5px}
.job .jt{display:flex; justify-content:space-between; align-items:baseline}
.job .jn{font-size:12.5px; font-weight:600}
.job .jp{font-family:var(--mono); font-weight:600; color:#1D9E75}
.job .jm{font-size:11px; color:#7E837E}
.phonecap{margin-top:12px; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

/* ─── liste d'attente ─── */
.dlbox{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px; box-shadow:var(--shadow)}
.stores{display:flex; gap:11px; flex-wrap:wrap; margin-top:4px}
.store{display:flex; align-items:center; gap:10px; border:1px solid var(--line-2); border-radius:10px; padding:10px 15px; opacity:.72}
.store .s1{font-size:10.5px; color:var(--muted); letter-spacing:.04em}
.store .s2{font-size:14.5px; font-weight:600}
.waitlist{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}
.waitlist input, .waitlist select{
  flex:1; min-width:180px; background:var(--paper); border:1px solid var(--line-2); border-radius:9px;
  padding:12px 14px; color:var(--ink); font-family:var(--body); font-size:15px;
}
.waitlist input::placeholder{color:var(--muted)}
.wl-msg{margin-top:12px; font-size:13.5px; color:var(--brand-deep)}
.wl-mail{margin-top:14px; font-size:13.5px; color:var(--ink-2); display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.wl-mail .addr{font-family:var(--mono); font-size:14px; color:var(--ink)}
.copybtn{border:1px solid var(--line-2); border-radius:7px; padding:5px 10px; font-size:12.5px; color:var(--ink-2)}
.copybtn:hover{border-color:var(--brand); color:var(--brand)}

/* ─── questions ─── */
details{border-bottom:1px solid var(--line)}
summary{list-style:none; cursor:pointer; padding:17px 0; font-weight:600; font-size:16.5px; display:flex; align-items:center; justify-content:space-between; gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--mono); color:var(--brand); font-size:19px; flex:none}
details[open] summary::after{content:"\2013"}
details p{padding-bottom:17px; font-size:15px; color:var(--ink-2); line-height:1.68; max-width:72ch}

/* ─── bandeau d'appel ─── */
.band{background:var(--sunk)}
.band .inner{display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.band h2{font-size:clamp(22px,2.8vw,30px); font-weight:700; max-width:22ch}

/* ─── mentions ─── */
.todo{display:inline-block; font-family:var(--mono); font-size:11px; color:var(--coral); border:1px dashed var(--coral); border-radius:4px; padding:1px 6px}

/* ─── pied de page ─── */
footer{border-top:1px solid var(--line); padding-block:36px 46px; background:var(--surface)}
.footgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:26px}
@media (max-width:860px){ .footgrid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .footgrid{grid-template-columns:1fr} }
.footgrid h4{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:11px; font-weight:500}
.footgrid a{display:block; font-size:14px; color:var(--ink-2); text-decoration:none; padding-block:4px}
.footgrid a:hover{color:var(--brand)}
.footbot{margin-top:28px; padding-top:18px; border-top:1px solid var(--line); display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.footbot .c{font-size:13px; color:var(--muted)}
.footbot .mono{font-size:13px; color:var(--ink-2)}

/* ─── écran d'accueil de l'application (maquette sombre) ─── */
.phones.four{gap:20px}
.phones.four > div{width:240px; flex:none}
.phones.four .phone{width:240px; padding:10px}
.phones.four .phonecap{font-size:10px; letter-spacing:.05em; line-height:1.5}
.screen.dark{background:#0A1310; color:#F3F5F3}
.screen.dark .bar{color:#7E8C86}
.screen.dark .body{gap:12px; align-items:center; text-align:center; padding:14px 16px 16px}
.wm{font-family:var(--display); font-weight:800; font-size:31px; letter-spacing:-.03em; line-height:1; margin-top:16px}
.wm em{font-style:normal; color:#3FD07E}
.wsub{font-size:11.5px; color:#D2DBD7; margin:0}
.wloc{font-family:var(--mono); font-size:9.5px; color:#6C7A74; margin:0}
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:100%}
.tile{border:1px solid #223029; border-radius:10px; padding:9px 2px 7px; background:#0E1A15; display:flex; flex-direction:column; align-items:center; gap:5px}
.tile svg{width:18px; height:18px; color:#8FD3B4}
.tile span{font-size:8px; letter-spacing:.03em; color:#AEBDB6}
.pills{display:flex; gap:5px; width:100%}
.pill{flex:1; border:1px solid #223029; border-radius:999px; padding:6px 0; font-size:10px; font-weight:600; color:#8C9A94; background:#0E1A15}
.pill.on{border-color:#3FD07E; color:#3FD07E}
.wtag{font-size:11.5px; line-height:1.5; color:#79CFA6; margin:0}
.wbtns{margin-top:auto; width:100%; display:flex; flex-direction:column; gap:8px}
.wbtn{border-radius:10px; padding:11px; text-align:center; font-weight:700; font-size:13px}
.wbtn.solid{background:linear-gradient(180deg,#5CC87E,#41A964); color:#fff}
.wbtn.line{border:1px solid #3FD07E; color:#3FD07E}
.wsec{display:flex; align-items:center; justify-content:center; gap:5px; font-size:9.5px; color:#6C7A74; margin:2px 0 0}
.wsec svg{width:10px; height:10px}