/* DPS Club – styles de l'appli (caisse, back-office, pages publiques). Version sobre du 11 octobre 2026 :
   fond blanc, vert DPS Market bien présent, rouge en accent (titres, bouton principal) ; logo DPS Market en couleur + CLUB
   en vert, rubans vert et rouge en coin comme sur les cartes Gold et Black. Les cartes elles-mêmes gardent leurs couleurs
   (Club rouge, Gold or, Black noir). Bebas Neue pour les grands chiffres et les titres, Montserrat 800 en capitales espacées.
   Chargée après carte.css (styles de la carte elle-même, préfixés .card). */
:root{
  --red:#e63027;--red-deep:#b81e16;--red-dark:#8f140e;--green:#1a7a35;--green-deep:#0b4d1c;--green-bright:#2fb85a;--lime:#50d502;
  --gold:#d9a52b;--gold-ink:#1b1408;--platine:#d7d9de;
  --ink:#161c26;--ink-2:#3b4350;--muted:#6b7280;--bg:#f2f4f0;--surface:#fff;--line:#e3e8df;--line-2:#d5dbd0;--field:#f6f8f4;
  --rouge-carte:linear-gradient(135deg,#ff4d43 0%,#e63027 45%,#b81e16 100%);
  --or-carte:linear-gradient(135deg,#f9e9b8 0%,#e9cb66 22%,#d1a22b 48%,#f2d57c 70%,#bb861c 100%);
  --noir-carte:linear-gradient(135deg,#45454c 0%,#1a1a1e 45%,#000 100%);
  --display:'Bebas Neue','Montserrat',Impact,sans-serif;--head:'Montserrat','DM Sans',Arial,sans-serif;--body:'DM Sans','Segoe UI',Arial,sans-serif;--mono:'DM Mono',ui-monospace,Consolas,monospace;
  --ombre:0 14px 34px rgba(22,28,38,.08);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{font-family:var(--body);color:var(--ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
svg{display:inline-block}
a{color:var(--green);text-underline-offset:3px}
p{margin:0 0 12px}

/* ---------- Titres ---------- */
h1{font-family:var(--display);font-weight:400;font-size:46px;letter-spacing:.02em;line-height:.95;margin:8px 0 18px;color:var(--red)}
h2{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:.03em;line-height:1;margin:30px 0 12px;color:var(--ink)}
h1 small,h2 small,.surtitre{display:block;font-family:var(--head);font-weight:800;font-size:11px;letter-spacing:.3em;line-height:1.3;text-transform:uppercase;color:var(--green);margin-bottom:8px}
h3{font-family:var(--head);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px;color:var(--ink)}
.muet{color:var(--muted);font-size:14px}

/* ---------- Décor de la carte (dans tout bloc rouge en position relative) ---------- */
.decor-reflet,.decor-arc,.rubans{position:absolute;pointer-events:none}
.decor-reflet{inset:0;background:radial-gradient(560px 300px at 10% -20%,rgba(80,213,2,.06),transparent 62%)}
.decor-arc{border-radius:50%;border:2px solid rgba(22,28,38,.06)}
.decor-arc-1{width:620px;height:620px;right:-230px;top:-470px}
.decor-arc-2{width:440px;height:440px;right:-160px;top:-360px;border-color:rgba(26,122,53,.08)}
.rubans{right:0;bottom:0;width:250px;height:174px}
.rubans::before,.rubans::after{content:"";position:absolute;inset:0}
.rubans::before{background:linear-gradient(90deg,var(--green-deep),var(--green) 55%,var(--green-bright));clip-path:polygon(0 100%,100% 0,100% 29.5%,27.4% 100%)}
.rubans::after{background:var(--red);clip-path:polygon(35% 100%,100% 36.3%,100% 54.4%,52.6% 100%)}

/* ---------- Logo + CLUB ---------- */
.lockup-h{display:inline-flex;align-items:center;gap:12px}
.lockup-h img{height:38px;width:auto}
.lockup-h .club{font-family:var(--head);font-weight:800;font-size:13px;letter-spacing:.52em;line-height:1;color:var(--green)}
.lockup-v{display:inline-grid;justify-items:center;gap:6px}
.lockup-v img{width:170px;height:auto}
.lockup-v .club{font-family:var(--head);font-weight:800;font-size:20px;letter-spacing:.52em;padding-left:.52em;line-height:1;color:var(--green)}
.contexte{display:inline-flex;align-items:center;font-family:var(--head);font-weight:800;font-size:11px;letter-spacing:.3em;line-height:1;text-transform:uppercase;color:var(--green);
  padding:8px 10px 8px 14px;border-radius:999px;background:#e9f5ec;border:1.5px solid rgba(26,122,53,.25)}

/* ---------- Bandeau du haut (back-office, pages publiques) ---------- */
.barre{position:sticky;top:0;z-index:10;overflow:hidden;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;
  padding:12px 22px;background:#fff;color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 8px 24px rgba(22,28,38,.06)}
.barre .rubans{display:none}
.barre .marque{position:relative;display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink)}
.barre nav{position:relative;display:flex;gap:4px;flex-wrap:wrap}
.barre nav a{text-decoration:none;color:var(--ink);font-family:var(--head);font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;border:1.5px solid transparent}
.barre nav a:hover{background:#e9f5ec;color:var(--green)}
.barre nav a.actif{background:var(--green);color:#fff;box-shadow:0 6px 14px rgba(26,122,53,.22)}

/* ---------- Mise en page ---------- */
.contenu{position:relative;max-width:1140px;margin:0 auto;padding:24px 20px 64px}
.panneau{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:22px;margin-bottom:18px;box-shadow:var(--ombre)}
.grille-formulaires{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin:14px 0}
.grille-formulaires .panneau{margin:0}
.grille-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 16px}
.grille-champs h3,.grille-champs .ligne-boutons{grid-column:1/-1}
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.champ-large{grid-column:1/-1}

/* ---------- Écrans d'accueil (connexion caisse et back-office, désinscription) ---------- */
body.page-ecran,html:has(body.page-ecran){background:var(--bg)}
body.page-ecran{background:transparent}
.ecran-fond{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%)}
.ecran-fond .decor-arc-1{width:1100px;height:1100px;right:-420px;top:-760px;border-width:2px}
.ecran-fond .decor-arc-2{width:780px;height:780px;right:-300px;top:-560px}
.ecran-fond .decor-reflet{background:radial-gradient(900px 600px at 0 0,rgba(80,213,2,.07),transparent 60%)}
.ecran-fond .rubans{width:min(420px,60vw);height:min(292px,41.7vw)}
.ecran-marque{display:grid;justify-items:center;gap:18px;margin:34px auto 22px;text-align:center}
.ecran-marque h1.contexte,.ecran-marque .contexte{margin:0;font-size:12px}
.connexion{max-width:420px;margin:0 auto 18px;box-shadow:0 24px 50px rgba(22,28,38,.10)}
.connexion h1{font-size:34px;margin-top:0}
.ecran-pied{position:relative;text-align:center;color:var(--muted);font-family:var(--head);font-weight:700;font-size:13px}
.ecran-pied a{color:var(--green)}
.ecran-pied b{color:var(--ink);border-bottom:2px solid var(--green);padding-bottom:1px}

/* ---------- Champs ---------- */
.champ{display:grid;gap:7px;margin:0 0 14px;text-align:left}
.champ span{font-family:var(--head);font-weight:800;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.champ small{color:var(--muted);font-size:12px}
input,select,textarea{font:inherit;color:inherit;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--field);width:100%;min-height:50px}
textarea{min-height:0}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(26,122,53,.18);border-color:var(--green);background:#fff}
.case{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:10px 0}
.case input{width:22px;height:22px;min-height:0;margin-top:1px;flex:none;accent-color:var(--green)}
.case > span{flex:1}

/* ---------- Boutons : pilules comme sur la carte ---------- */
.btn{font-family:var(--head);font-weight:800;font-size:15px;border:0;border-radius:999px;padding:12px 22px;min-height:50px;cursor:pointer;
  background:var(--red);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  box-shadow:0 10px 22px rgba(230,48,39,.24);transition:transform .1s,background .15s,box-shadow .15s}
.btn:hover{background:var(--red-deep)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.6;cursor:wait}
.btn-grand{width:100%;font-size:17px;min-height:58px}
.btn-ghost{background:#fff;color:var(--green);border:1.5px solid var(--green);box-shadow:none}
.btn-ghost:hover{background:var(--green);color:#fff}
.btn-remise{background:var(--green);box-shadow:0 10px 22px rgba(26,122,53,.24);padding-left:10px}
.btn-remise::before{content:"€";display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--green);font-size:14px}
.btn-remise:hover{background:var(--green-deep)}
.ligne-boutons{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}
.ligne-boutons input{width:auto;flex:1;min-width:200px}

/* ---------- Messages ---------- */
.message{padding:12px 16px;border-radius:16px;margin:0 0 14px;font-weight:600;font-size:14.5px}
.message-erreur{background:#fde8e6;color:#9b1c14}
.message-info{background:#e6f4ea;color:#115a2b}

/* ---------- Chiffres clés ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:12px 0 8px}
.kpis div{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px 18px 14px;display:grid;gap:6px;align-content:start;box-shadow:var(--ombre)}
.kpis b{font-family:var(--display);font-weight:400;font-size:40px;line-height:.9;color:var(--ink);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.kpis span{font-size:10.5px;color:var(--muted);font-family:var(--head);font-weight:800;letter-spacing:.18em;text-transform:uppercase;line-height:1.35}
.kpis .kpi-club{background:var(--rouge-carte);border:0}
.kpis .kpi-gold{background:var(--or-carte);border:0}
.kpis .kpi-black{background:var(--noir-carte);border:0}
.kpis .kpi-club b,.kpis .kpi-club span{color:#fff}
.kpis .kpi-gold b,.kpis .kpi-gold span{color:var(--gold-ink)}
.kpis .kpi-black b{background:linear-gradient(180deg,#f6f6f8,#b9bcc4);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpis .kpi-black span{color:var(--platine)}
.kpis .kpi-club > *,.kpis .kpi-gold > *,.kpis .kpi-black > *{position:relative;z-index:1}
.kpis .kpi-club span,.kpis .kpi-gold span,.kpis .kpi-black span{padding-right:38px}
.kpis .kpi-club::after,.kpis .kpi-gold::after,.kpis .kpi-black::after{content:"";position:absolute;right:0;bottom:0;width:58px;height:40px;
  background:linear-gradient(90deg,var(--green-deep),var(--green) 55%,var(--green-bright));clip-path:polygon(0 100%,100% 0,100% 29.5%,27.4% 100%)}
.kpis .kpi-gold::after,.kpis .kpi-black::after{opacity:.95}
.kpis .kpi-club span,.kpis .kpi-gold span,.kpis .kpi-black span{opacity:.88}
.kpis svg.couronne{position:absolute;right:16px;top:14px;height:16px;width:auto}
.kpis .kpi-gold svg.couronne{fill:var(--gold-ink)}
.kpis .kpi-black svg.couronne{fill:var(--platine)}

/* ---------- Tableaux ---------- */
.tableau{overflow:auto;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--ombre)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#fbfcfa}
th{font-family:var(--head);font-weight:800;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);background:var(--field)}
td a{font-weight:700}
td.vide{color:var(--muted);text-align:center;padding:18px}
form.inline{display:inline-flex;gap:6px;align-items:center}
form.inline input,form.inline select{width:auto;min-height:38px;padding:6px 10px}
form.inline input{width:130px}
form.inline .btn{min-height:38px;padding:6px 14px;font-size:13px}

/* ---------- Statuts : Club rouge, Gold or, Black noir et platine ---------- */
.statut{display:inline-flex;align-items:center;gap:6px;font-family:var(--head);font-weight:800;font-size:10px;letter-spacing:.2em;line-height:1;text-transform:uppercase;
  padding:6px 11px 6px 10px;border-radius:999px;background:var(--field);color:var(--muted);border:1.5px solid var(--line);vertical-align:middle;white-space:nowrap}
.statut-club{background:var(--rouge-carte);color:#fff;border-color:transparent}
.statut-club::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(80,213,2,.28)}
.statut-gold{background:var(--or-carte);color:var(--gold-ink);border-color:rgba(27,20,8,.12)}
.statut-black{background:var(--noir-carte);color:var(--platine);border-color:rgba(215,217,222,.45)}
.statut svg.couronne{height:10px;width:auto;fill:currentColor}

/* ---------- Carte mise à l'échelle (caisse, back-office, page du client) ---------- */
.carte-mini{position:relative;width:100%}
.carte-echelle{position:absolute;left:0;top:0;width:1012px;transform-origin:0 0}
.carte-mini .card{box-shadow:0 30px 70px rgba(22,28,38,.26)}

/* ---------- Caisse ---------- */
.page-caisse .contenu{max-width:1080px;padding-top:16px}
.barre-caisse{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff;color:var(--ink);border:1px solid var(--line);padding:16px 150px 16px 20px;border-radius:26px;margin-bottom:16px;box-shadow:var(--ombre);min-height:84px}
.barre-caisse .rubans{width:150px;height:104px}
.barre-caisse .bc-gauche{position:relative;display:flex;align-items:center;gap:16px;min-width:0}
.barre-caisse .bc-sep{width:1.5px;align-self:stretch;background:var(--line)}
.barre-caisse .bc-depot{display:grid;gap:2px;min-width:0}
.barre-caisse .bc-depot b{font-family:var(--head);font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre-caisse .bc-depot span{font-family:var(--head);font-weight:800;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.barre-caisse .actions{position:relative;display:flex;gap:8px}
.barre-caisse .btn-ghost{min-height:42px;padding:8px 16px;font-size:13px}
.champ-scan input{font-size:22px;min-height:62px;font-family:var(--mono);letter-spacing:.06em;background:#fff;border-width:2px}
#camera video{width:100%;border-radius:18px;background:#000;margin:8px 0}
.resultats{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.resultats button{width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:12px 16px;font:inherit;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.resultats button:hover{border-color:var(--red)}
.resultats .r-nom{display:grid;gap:2px}
.resultats .r-nom b{font-family:var(--head);font-weight:800}
.resultats .r-nom span{font-size:13px;color:var(--muted);font-family:var(--mono)}
.client-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.client-carte{display:grid;gap:14px;align-content:start}
.client-infos{list-style:none;margin:0;padding:0;display:grid;gap:0;border:1px solid var(--line);border-radius:18px;background:var(--field)}
.client-infos li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:14px}
.client-infos li:last-child{border-bottom:0}
.client-infos > li > span{font-family:var(--head);font-weight:800;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.client-infos b{font-weight:700;text-align:right}
.client-actions{display:grid;gap:0;align-content:start}
.bloc-action{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.bloc-action:first-child{border-top:0;padding-top:0;margin-top:0}
.ligne-montant{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.ligne-montant .champ{margin:0}
.ligne-montant input{font-size:26px;font-family:var(--mono);min-height:62px;background:#fff;border-width:2px}
.ligne-montant .btn{min-height:62px;padding:12px 30px;font-size:18px}
.bon-emis{background:#e6f4ea;border:1.5px solid var(--green);border-radius:20px;padding:16px;display:grid;gap:8px;margin-top:12px}
.bon-emis b{font-size:17px;color:#115a2b}
.liste-passages{list-style:none;margin:0 0 10px;padding:0;font-size:14px}
.liste-passages li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.liste-passages b{font-family:var(--mono);font-weight:500}
.qr-lien{display:grid;justify-items:center;gap:10px;text-align:center;margin-top:12px}
.qr-lien svg{width:220px;height:220px;background:#fff;border-radius:22px;padding:10px;border:1px solid var(--line);box-shadow:var(--ombre)}
.qr-lien.grand svg{width:280px;height:280px}
.qr-lien h3{font-size:12px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:13px 20px;border-radius:999px;font-weight:700;max-width:92vw;z-index:50;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.toast.ok{background:var(--green)}
.toast.erreur{background:var(--red)}
@media (min-width:860px){
  .client-grille{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:24px}
}

.resume-livraison{background:var(--field);border:1.5px solid var(--line);border-radius:18px;padding:12px 16px;font-size:14.5px;line-height:1.55;margin-bottom:10px}
.resume-livraison b{color:var(--green)}
.resume-livraison.proche{border-color:var(--green);background:#e9f5ec}
.btn-petit{min-height:32px;padding:4px 12px;font-size:12px}
h3.sous-titre{margin-top:18px}
.code-parrain{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--field);border:1.5px dashed var(--green);border-radius:16px;padding:12px 16px;margin:12px 0}
.code-parrain span{font-family:var(--head);font-weight:800;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.code-parrain b{font-family:var(--mono);font-weight:500;font-size:24px;letter-spacing:.22em;color:var(--green)}
.code-admin{font-family:var(--mono);font-weight:500;letter-spacing:.16em;color:var(--green)}
.client-infos b.code{font-family:var(--mono);letter-spacing:.16em;color:var(--green)}
.btn-vert{background:var(--green);box-shadow:0 10px 22px rgba(26,122,53,.24)}
.btn-vert:hover{background:var(--green-deep)}
.client-carte .anciens-points{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin:0}
.client-carte .anciens-points h3{font-size:12px;letter-spacing:.12em}
.nb{white-space:nowrap}
.releve-calcul th{width:46%;background:var(--field);text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:600;font-size:14px;color:var(--ink-2)}
@media print{.barre,.ne-pas-imprimer{display:none}.contenu{padding:0;max-width:none}.panneau,.tableau{box-shadow:none}body,html{background:#fff}}

/* ---------- Back-office : fiche membre ---------- */
.fiche-entete{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start;margin-bottom:8px}
.fiche-entete h1{margin-top:0}
.fiche-entete .badges{display:flex;gap:6px;flex-wrap:wrap;margin:-8px 0 12px}
.fiche-entete .kpis{margin-top:0}
@media (min-width:900px){.fiche-entete{grid-template-columns:400px minmax(0,1fr)}}

/* ---------- Accueil public ---------- */
.hero-marque{position:relative;overflow:hidden;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:30px;padding:30px 26px 34px;margin-bottom:18px;box-shadow:var(--ombre)}
.hero-marque .rubans{width:200px;height:139px}
.hero-marque > *:not(i){position:relative}
.hero-marque h1{color:var(--red);font-size:52px;margin:22px 0 10px}
.hero-marque p{font-size:17px;max-width:520px}
.hero-marque .regle{display:inline-grid;justify-items:center;gap:6px;background:var(--green);color:#fff;border-radius:20px;padding:12px 20px;font-family:var(--display);font-size:34px;line-height:.95;margin:6px 0 18px;white-space:nowrap;box-shadow:0 12px 26px rgba(0,0,0,.16)}
.hero-marque .regle small{font-family:var(--head);font-weight:800;font-size:10.5px;letter-spacing:.2em;color:#d8f5c4}
.conditions h2{font-size:24px;margin-top:24px}
.langues{text-align:center}
.langues a{font-weight:700}

/* ---------- Page carte du client ---------- */
.page-carte .contenu{max-width:560px}
.page-carte{background:linear-gradient(180deg,#fff 0,var(--bg) 320px)}
.page-carte .carte-mini{margin:6px 0 16px}
.page-carte .carte-mini .card{box-shadow:0 24px 54px rgba(22,28,38,.22)}
.page-carte .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.page-carte .kpis div:nth-child(3){grid-column:1/-1}
.page-carte .kpis b{font-size:34px}
.maj-solde{margin:-4px 0 14px;text-align:center;font-size:12.5px;color:var(--muted);font-weight:600}
.boutons-wallet{display:grid;gap:10px}
.btn-wallet{display:flex;align-items:center;gap:14px;background:#000;color:#fff;text-decoration:none;border-radius:16px;padding:12px 18px;min-height:60px;font-family:var(--head)}
.btn-wallet.google{background:#1f1f1f}
.btn-wallet span{display:grid;line-height:1.15}
.btn-wallet small{font-size:11px;font-weight:600;opacity:.85}
.btn-wallet b{font-size:19px;font-weight:800}
.btn-wallet.installer{background:var(--green);border:0;cursor:pointer;width:100%;text-align:left;font:inherit;color:#fff}
.etapes{margin:0;padding:0;list-style:none;display:grid;gap:14px;counter-reset:s}
.etapes li{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start}
.etapes li::before{counter-increment:s;content:counter(s);width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--display);font-size:25px;display:grid;place-items:center;padding-top:2px}
.etapes b{display:block;font-family:var(--head);font-weight:800;font-size:15px;margin-top:2px}
.etapes span{display:block;color:var(--ink-2);font-size:14px}
.bandeau-hors-ligne{position:sticky;top:0;z-index:20;background:#1b1408;color:#fff;font-weight:600;font-size:14px;text-align:center;padding:10px 12px;border-radius:0 0 14px 14px;margin:-12px -12px 10px}

/* ---------- Campagnes ---------- */
.apercu{border:2px solid var(--green)}
.apercu h2{margin-top:0}
.exemples{margin:8px 0 14px;padding-left:18px;display:grid;gap:8px;font-size:14px}
.qr-tablette .qr-lien svg{width:180px;height:180px}

/* ---------- Petits écrans ---------- */
@media (max-width:640px){
  h1{font-size:38px}
  .contenu{padding:14px 12px 56px}
  .panneau{padding:18px;border-radius:22px}
  .barre{padding:10px 14px}
  .barre nav{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -4px}
  .barre nav a{padding:7px 12px;white-space:nowrap}
  .lockup-h img{height:30px}
  .barre-caisse{padding:14px 16px;border-radius:22px}
  .barre-caisse .rubans{display:none}
  .barre-caisse .bc-sep{display:none}
  .barre-caisse .bc-depot b{white-space:normal}
  .barre-caisse .lockup-h .club{letter-spacing:.34em}
  .barre-caisse .actions{width:100%}
  .barre-caisse .actions .btn-ghost,.barre-caisse .actions form{flex:1}
  .barre-caisse .actions form .btn-ghost{width:100%}
  .ligne-montant{grid-template-columns:1fr}
  .grille-2{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis b{font-size:34px}
  .hero-marque h1{font-size:44px}
}
/* Jauge du statut (carte du client, back-office) */
.jauge{height:10px;border-radius:999px;background:var(--field);border:1px solid var(--line);overflow:hidden;margin:6px 0 12px}
.jauge i{display:block;height:100%;min-width:4px;background:var(--green);border-radius:999px}
.statut-page-gold .jauge i{background:var(--or-carte)}
.statut-page-black .jauge i{background:var(--noir-carte)}
/* Client livré sans carte : emplacement « objectif » et badge */
.statut-aucune{background:var(--field);color:var(--muted);border:1px dashed var(--line-2)}
.carte-objectif{aspect-ratio:1012/638;max-width:100%;border:2px dashed var(--line-2);border-radius:18px;background:var(--field);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px}
.carte-objectif img{height:38px;width:auto}
.carte-objectif b{font-family:var(--head);font-weight:800;font-size:clamp(15px,3.6vw,19px);color:var(--ink)}
.carte-objectif span{color:var(--green);font-weight:700;font-size:14px}
.carte-objectif small{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em}