:root{
  --bg:#F1F4F3; --surface:#FFFFFF; --surface-2:#E7EBEA; --ink:#0F1A1B; --ink-2:#2A3838;
  --muted:#5D6E6E; --line:#D3DAD9; --line-2:#BFC9C8;
  --accent:#0F6E6B; --accent-soft:#DCEDEB; --accent-ink:#0B4F4D;
  --trial:#9E6608; --trial-soft:#F7E9CE;
  --danger:#A03D28; --danger-soft:#F6DCD4;
  --shadow:0 1px 2px rgba(15,26,27,.05), 0 10px 30px -20px rgba(15,26,27,.5);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B1213; --surface:#111A1B; --surface-2:#182324; --ink:#E3ECEA; --ink-2:#C3D0CE;
    --muted:#8DA09F; --line:#243130; --line-2:#31403F;
    --accent:#4FCFC4; --accent-soft:#10312F; --accent-ink:#8FE3DA;
    --trial:#E2A855; --trial-soft:#33260F;
    --danger:#E08469; --danger-soft:#331C15;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -20px rgba(0,0,0,.9);
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink); min-height:100vh;
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center; padding:32px 20px 64px;
}
h1,h2,h3{font-family:Archivo,"IBM Plex Sans",system-ui,sans-serif; margin:0; text-wrap:balance}
code,.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}

.brand{font-family:Archivo,sans-serif; font-weight:700; letter-spacing:.07em; font-size:15px; margin-bottom:22px}
.brand span{color:var(--accent)}

.card{
  width:100%; max-width:460px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); padding:26px;
}
h1{font-size:22px; letter-spacing:-.015em; margin-bottom:6px}
.lede{color:var(--muted); font-size:14px; margin:0 0 22px}

.steps{display:flex; gap:6px; margin-bottom:22px}
.steps i{flex:1; height:3px; border-radius:2px; background:var(--line); display:block}
.steps i.on{background:var(--accent)}

label{display:block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px}
input{
  width:100%; padding:11px 12px; border:1px solid var(--line-2); border-radius:7px;
  background:var(--bg); color:var(--ink); font-size:15px;
  font-family:"IBM Plex Mono",monospace; letter-spacing:.04em;
}
input::placeholder{color:var(--muted); opacity:.65}
input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
input[type=email]{font-family:"IBM Plex Sans",sans-serif; letter-spacing:normal}
.field{margin-bottom:14px}

button{
  width:100%; padding:12px; border:0; border-radius:7px; background:var(--accent); color:var(--bg);
  font-family:Archivo,sans-serif; font-weight:600; font-size:15px; cursor:pointer;
}
button:hover{filter:brightness(1.08)}
button:disabled{opacity:.55; cursor:progress}
button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
button.ghost{background:transparent; color:var(--muted); border:1px solid var(--line-2); margin-top:9px}

.plan{
  display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%;
  border:1px solid var(--line-2); border-radius:8px; padding:13px 15px; margin-bottom:10px;
  background:var(--surface); cursor:pointer; text-align:left; color:var(--ink);
}
.plan[aria-checked="true"]{border:2px solid var(--accent); padding:12px 14px}
.plan strong{font-family:Archivo,sans-serif; font-size:14.5px; display:block}
.plan small{color:var(--muted); font-size:12.5px}
.plan .price{font-family:"IBM Plex Mono",monospace; font-size:15px; white-space:nowrap}

.recap{background:var(--surface-2); border-radius:8px; padding:13px 15px; margin-bottom:18px}
.recap dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13px}
.recap dt{color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; align-self:center}
.recap dd{margin:0; font-family:"IBM Plex Mono",monospace; letter-spacing:.05em}
.recap dd.status{display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:0}
.recap dd.status .pill{white-space:nowrap; flex:0 0 auto}
.recap .until{font-family:"IBM Plex Sans",sans-serif; letter-spacing:0; font-size:11.5px; color:var(--muted); white-space:nowrap; min-width:0}
@media (max-width:480px){ .recap dl{gap:4px 10px} .recap .until{font-size:11px} }

.pill{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:3px 10px;
  font-size:11px; font-weight:600; font-family:"IBM Plex Mono",monospace}
.pill.trial{background:var(--trial-soft); color:var(--trial)}
.pill.active{background:var(--accent-soft); color:var(--accent-ink)}
.pill.expired,.pill.revoked{background:var(--danger-soft); color:var(--danger)}

.msg{border-radius:7px; padding:11px 13px; font-size:13.5px; margin-bottom:16px; display:none}
.msg.show{display:block}
.msg.error{background:var(--danger-soft); color:var(--danger)}
.msg.info{background:var(--accent-soft); color:var(--accent-ink)}

.ok{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:12px 0}
.ring{width:52px;height:52px;border-radius:50%;border:2px solid var(--accent);display:grid;place-items:center;
  color:var(--accent); font-size:24px; font-family:Archivo,sans-serif}
.hint{color:var(--muted); font-size:12.5px; margin-top:20px; text-align:center; max-width:460px}
.hidden{display:none}

/* ------------------------------------------------------- tarifs & compte */
.topline{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:6px}
.topline h1{margin:0}
.topline select{font:inherit; font-family:"IBM Plex Mono",monospace; font-size:12.5px; padding:5px 26px 5px 8px; border:1px solid var(--line-2); border-radius:7px; background:var(--surface); color:var(--ink)}
.plan .price small{display:block; font-family:"IBM Plex Sans",sans-serif; font-size:11.5px; color:var(--muted); text-align:right; white-space:normal}
.badge{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; background:var(--accent-soft); color:var(--accent-ink); border-radius:5px; padding:1px 6px; margin-left:6px; vertical-align:middle}
.badge.promo{background:var(--trial-soft); color:var(--trial)}
.strike{text-decoration:line-through; color:var(--muted); font-size:12px; margin-right:6px}
.check{display:flex; gap:9px; align-items:flex-start; font-family:"IBM Plex Sans",sans-serif; font-size:12.5px; letter-spacing:normal; text-transform:none; color:var(--ink-2); margin:12px 0 14px; line-height:1.5}
.check input{width:auto; margin:4px 0 0; accent-color:var(--accent)}
.check a{color:var(--accent-ink)}
.h2{font-size:15px; margin:18px 0 8px}
.h2 .muted{color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:400; margin-left:6px}
.dev{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; padding:6px 0; border-top:1px solid var(--line)}
.dev .me{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); margin-left:6px}
.dev .old{color:var(--muted)}
button.mini{width:auto; padding:4px 10px; font-size:12px; margin:0; background:transparent; color:var(--muted); border:1px solid var(--line-2)}
.attach .row2{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:center}
.attach input{margin:0}
.attach button{width:auto; margin:0; padding:9px 12px}
.offer{border:1px solid var(--line-2); border-radius:8px; padding:13px 15px; margin-bottom:10px}
.offer.main{border:2px solid var(--accent); background:var(--accent-soft)}
.offer .t{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.offer strong{font-family:Archivo,sans-serif; font-size:14.5px}
.offer .price{font-family:"IBM Plex Mono",monospace; font-size:17px; white-space:nowrap}
.offer p{margin:4px 0 10px; font-size:12.5px; color:var(--ink-2)}
.offer button{width:auto; padding:8px 14px; font-size:13px; margin:0}
.links{display:flex; flex-wrap:wrap; gap:16px; font-size:12.5px; margin-top:16px}
.links a{color:var(--muted)}
#step-account.card{max-width:520px}

/* ------------------------------------------------------- téléchargements */
.downloads{background:var(--surface-2); border-radius:8px; padding:4px 14px 10px; margin-bottom:14px}
.downloads .h2{margin:10px 0 4px}
.downloads.fresh{animation:dlFresh 2.4s ease-out}
@keyframes dlFresh{0%{box-shadow:0 0 0 2px var(--accent)}100%{box-shadow:0 0 0 2px transparent}}
@media (prefers-reduced-motion: reduce){.downloads.fresh{animation:none}}
.dl{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; border-top:1px solid var(--line)}
.dl strong{font-family:"IBM Plex Mono",monospace; font-size:12.5px; display:block; word-break:break-all}
.dl small{color:var(--muted); font-size:12px}
.dlbtn{flex:0 0 auto; font-family:Archivo,sans-serif; font-weight:600; font-size:13px; color:var(--bg); background:var(--accent); border-radius:7px; padding:8px 14px; text-decoration:none}
.downloads .hint{margin:8px 0 0; text-align:left; font-size:11.5px}


/* ---- aperçu « Utilisateur test » (console) ---- */
.preview-banner{position:sticky; top:0; z-index:5; margin:-8px 0 16px; padding:8px 14px; border-radius:8px; background:var(--accent); color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.02em; text-align:center}
body.preview #back, body.preview #account-back{display:none}
body.preview #attach-form button, body.preview .offer button,
body.preview .dev button, body.preview #manage-link{opacity:.55; pointer-events:none}
.dlbtn.off{opacity:.55; cursor:not-allowed}

/* parcours simulé (aperçu) */
.preview-next{display:block; margin-top:14px; font-size:13px; color:var(--accent-ink); text-align:center}
.plan.closed{border-style:dashed; opacity:.78}
.plan.closed[aria-checked="true"]{opacity:1}
.badge.closed{background:transparent; border:1px dashed var(--line-2); color:var(--muted)}

/* page Stripe simulée : volontairement neutre, hors de la charte CDSTV */
.card.stripe{background:#FFFFFF; color:#1A1F36; border-color:#E3E8EE; font-family:-apple-system,"Segoe UI",Roboto,"IBM Plex Sans",sans-serif; padding:18px 26px 22px}
.stripe .st-url{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:#8792A2; background:#F6F9FC; border:1px solid #E3E8EE; border-radius:6px; padding:4px 8px; margin:0 0 14px; text-align:center}
.stripe .st-url b{color:#9E6608}
.stripe .st-back{display:inline-block; color:#1A1F36; text-decoration:none; font-weight:600; font-size:14px; margin-bottom:14px}
.stripe .st-name{color:#697386; font-size:14px}
.stripe .st-amount{font-size:32px; font-weight:700; letter-spacing:-.02em; line-height:1.2}
.stripe .st-then{color:#697386; font-size:13px; margin-bottom:12px}
.stripe .st-lines{border-top:1px solid #E3E8EE; margin:6px 0 16px}
.stripe .st-line{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:8px 0; border-bottom:1px solid #E3E8EE}
.stripe .st-line.promo span:last-child{color:#0A7B53}
.stripe .st-line.total{font-weight:700; border-bottom:0}
.stripe .st-label{font-size:13px; font-weight:600; color:#30313D; margin:10px 0 5px}
.stripe .st-input{border:1px solid #E0E0E6; border-radius:6px; padding:9px 11px; font-size:14px; margin-bottom:6px; background:#FFFFFF; color:#30313D; box-shadow:0 1px 1px rgba(0,0,0,.03)}
.stripe .st-input.muted{color:#A3ACB9}
.stripe .st-row{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.stripe #stripe-pay{margin-top:12px; background:#0074D4; color:#FFFFFF; border-radius:6px; font-family:inherit}
.stripe .st-legal{font-size:11.5px; color:#697386; margin:10px 0 0; text-align:center}
.stripe .st-note{font-size:11.5px; color:#8792A2; margin:16px 0 0; padding-top:12px; border-top:1px dashed #E3E8EE}

/* tuiles de téléchargement : l'image du système (déposée dans la console) */
.dltiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:8px; margin:6px 0 2px}
.dltile{display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 3px 10px; border:1px solid var(--line-2); border-radius:10px; background:var(--surface); color:var(--ink); text-decoration:none; text-align:center; min-width:0}
a.dltile:hover{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.dltile.off{opacity:.8; cursor:not-allowed}
@media (max-width:480px){.dltiles{grid-template-columns:repeat(2,1fr)}}
.dltile b{font-family:Archivo,sans-serif; font-size:12px; font-weight:600; line-height:1.2}
.dltile small{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--muted)}
.dlicon{width:48px; height:48px; display:grid; place-items:center; margin-bottom:2px}
.dlicon img{max-width:44px; max-height:44px; object-fit:contain}
.dlicon.word{width:auto; min-width:56px; max-width:100%; padding:0 7px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line-2); font-family:Archivo,sans-serif; font-weight:700; font-size:11.5px; color:var(--ink-2)}

/* Code promo : « J'ai un code » */
a.havecode{display:inline-block; font-size:13px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; margin:2px 0 12px}
.coderow{display:flex; gap:8px; align-items:center; margin:2px 0 12px}
.coderow.hidden, a.havecode.hidden{display:none}
.coderow input{flex:1; font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.06em; margin:0}
.coderow button{width:auto; margin:0; padding:10px 16px}
.coderow button.ghost{margin:0}
.badge.code{background:color-mix(in srgb,#B8672D 22%,transparent); color:#D08A4A}
.plan.unlocked{border-color:#B8672D}
.msg.ok{display:none; background:var(--accent-soft); color:var(--accent-ink); border-radius:8px; padding:8px 12px; font-size:13px; margin:0 0 12px}
.msg.ok.show{display:block}
#code-box .msg.error{margin:0 0 12px}
.plan .price.free{color:var(--accent-ink); font-weight:600}
.check.hidden{display:none}

/* Apple Pay / Google Pay sur la page (Express Checkout Element de Stripe) */
.express{margin:14px 0 0}
.express.hidden{display:none}
.express #express-element{min-height:46px}
.express .orline{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12.5px; margin:12px 0 0}
.express .orline span{flex:1; height:1px; background:var(--line)}
.express .msg{margin:8px 0 0}

/* Aperçu : bouton et fenêtre Apple Pay simulés */
.applepay-sim{display:flex; align-items:center; justify-content:center; width:100%; height:46px; border-radius:8px; background:#000; color:#fff; border:0; font:600 17px -apple-system,"Segoe UI",sans-serif; cursor:pointer}
.applepay-sim:hover{background:#111}
.applepay-note{margin:6px 0 0; font-size:11.5px; color:var(--muted); text-align:center; line-height:1.4}
.apsim-veil{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.5); display:flex; align-items:flex-start; justify-content:center; padding-top:60px}
.apsim-sheet{background:#ECECEE; color:#000; font:14px -apple-system,"Segoe UI",sans-serif; border-radius:12px; width:430px; max-width:calc(100% - 24px); padding:14px 16px 16px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.apsim-sheet.iphone{position:fixed; left:0; right:0; bottom:0; width:auto; max-width:none; border-radius:14px 14px 0 0; background:#F2F2F7; padding:14px 18px 26px}
.apsim-sheet.qr{background:#fff; text-align:center}
.apsim-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.apsim-head b{font-size:17px}
.apsim-cancel{color:#007AFF; text-decoration:none}
.apsim-row{display:flex; justify-content:space-between; gap:10px; background:#fff; border-radius:10px; padding:10px 12px; margin-bottom:8px}
.apsim-row span:first-child{color:#8E8E93}
.apsim-box{background:#fff; border-radius:10px; padding:10px 12px; margin-bottom:12px}
.apsim-box small{display:block; color:#8E8E93; font-size:12.5px; margin-top:3px}
.apsim-line{display:flex; justify-content:space-between; gap:10px}
.apsim-line.total{font-weight:700; margin-top:8px; border-top:1px solid #E5E5EA; padding-top:8px}
.apsim-confirm{display:block; width:100%; height:44px; border-radius:10px; background:#000; color:#fff; border:0; font:600 15px -apple-system,"Segoe UI",sans-serif; cursor:pointer; margin-top:4px}
.apsim-note{margin:10px 0 0; text-align:center; color:#8E8E93; font-size:11.5px}
.apsim-tabs{display:flex; gap:6px; margin:0 0 12px}
.apsim-tabs button{flex:1; min-height:30px; padding:6px 8px; line-height:1.25; white-space:nowrap; border-radius:7px; border:1px solid #D1D1D6; background:#fff; color:#3C3C43; font:500 12.5px -apple-system,"Segoe UI",sans-serif; cursor:pointer}
.apsim-tabs button.on{background:#000; color:#fff; border-color:#000}
.apsim-qrtext{margin:4px 0 12px; font-size:15px}
.apsim-qr{display:flex; justify-content:center; margin-bottom:10px}
.apsim-qr svg{background:#fff}
.apsim-legal{display:block; color:#6E6E73; font-size:12.5px; margin-bottom:12px}

/* Téléphone (2026.10.02-31) */
@media (max-width:480px){
  .recap dd.status{flex-wrap:wrap; row-gap:4px}
  .recap .until{white-space:normal}
  .attach .row2{grid-template-columns:1fr}
  .attach button{width:100%; padding:11px 12px}
}