*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g:#0CB04A;--gd:#088036;--gl:#E6F7EE;--g2:#B7E4CA;
  --blk:#0F1512;--dk:#1A2937;--sub:#374151;--gr:#6B7280;--grl:#9CA3AF;
  --bdr:#E5E7EB;--bg:#F4F6F5;--wh:#FFFFFF;
  --red:#DC2626;--redl:#FEF2F2;--amb:#D97706;--ambl:#FFFBEB;
  --blu:#1558A0;--blul:#EFF6FF;--pur:#7C3AED;--purl:#F5F3FF;
  --r:10px;--sh:0 2px 20px rgba(0,0,0,0.08)
}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--blk);min-height:100vh;display:flex;flex-direction:column}

/* ── TOAST ── */
#toast{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast-item{background:var(--blk);color:var(--wh);padding:12px 18px;border-radius:var(--r);font-size:13px;font-weight:700;border-left:4px solid var(--g);animation:slideIn .3s ease;max-width:320px;box-shadow:0 4px 20px rgba(0,0,0,0.2)}
.toast-item.err{border-left-color:var(--red)}.toast-item.info{border-left-color:var(--blu)}.toast-item.warn{border-left-color:var(--amb)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── OVERLAY ── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:800;align-items:center;justify-content:center;padding:1rem;overflow-y:auto}
.overlay.on{display:flex}
.modal{background:var(--wh);border-radius:16px;padding:2rem;width:100%;max-width:520px;box-shadow:0 20px 60px rgba(0,0,0,0.25);animation:mIn .22s ease;margin:auto}
@keyframes mIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.modal-hd{font-size:17px;font-weight:800;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:8px}
.ico-sm{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.modal-foot{display:flex;gap:10px;margin-top:1.5rem;justify-content:flex-end;flex-wrap:wrap}

/* ── HEADER ── */
header{background:var(--wh);border-bottom:3px solid var(--g);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 1.75rem;position:sticky;top:0;z-index:300;box-shadow:0 2px 10px rgba(0,0,0,0.07)}
.logo-area{display:flex;align-items:center;gap:11px;cursor:pointer}
.logo-icon-wrap{width:42px;height:42px;flex-shrink:0;overflow:hidden;border-radius:8px;display:flex;align-items:center;justify-content:center;background:transparent}
.logo-icon-wrap img,.bo-bar-logo img,.hero-logo-big img,.login-logo .ico-big img{width:100%;height:100%;object-fit:contain}
.logo-text .logo-name{font-size:21px;font-weight:800;color:var(--blk);letter-spacing:-.5px}
.logo-text .logo-name b{color:var(--g)}
.logo-text .logo-sub{font-size:9.5px;color:var(--gr);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.hdr-right{display:flex;align-items:center;gap:8px}
@media(max-width:640px){
  header{height:auto;min-height:64px;flex-wrap:wrap;row-gap:6px;padding:.6rem 1rem}
  .hdr-right{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
  .hdr-right .pill-green{display:none}
  #hdrAgentBadge{padding:5px 9px;font-size:11px}
  #btnAgentDash{padding:5px 10px;font-size:11px}
}
.pill{font-size:11px;padding:4px 11px;border-radius:20px;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:all .2s}
.pill-green{background:var(--gl);color:var(--gd)}
.pill-gray{background:#F3F4F6;color:var(--gr)}.pill-gray:hover{background:#E5E7EB;color:var(--blk)}

/* ── VIEWS ── */
.view{display:none;flex:1}.view.on{display:block;animation:sodeciViewIn .18s ease}/* viewFerme supprimée */
@keyframes sodeciViewIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.view.on{animation:none}}
.wrap{max-width:640px;margin:0 auto;padding:2.5rem 1rem 4rem}
.wrap-wide{max-width:1180px;margin:0 auto;padding:2rem 1.25rem 4rem}

/* ── HERO / BANNER ── */
.hero{color:var(--wh);padding:0;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--blk) 0%,#1A3A24 100%)}
.hero.custom-bg{background:none}
/* Nouveau hero style plaquette */
.hero-plaquette{background:#fff;position:relative;border-bottom:3px solid #0CB04A}
#viewLogin{background:#fff}
.hero-plaquette-inner{display:flex;align-items:stretch;min-height:380px;position:relative}
/* Côté gauche — contenu */
.hero-plaquette-left{flex:1;padding:3rem 2rem 2.5rem;background:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
/* Côté droit — photo */
.hero-plaquette-right{width:46%;position:relative;overflow:hidden;flex-shrink:0;background:#f0f9f3}
.hero-plaquette-right img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* Badge */
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:#0CB04A;color:#fff;font-size:10.5px;font-weight:800;padding:5px 14px;border-radius:20px;letter-spacing:.6px;margin-bottom:1.25rem;text-transform:uppercase;width:fit-content}
/* Titre */
.hero-plaquette-title{font-size:clamp(22px,3.5vw,32px);font-weight:900;color:#0D1F14;line-height:1.2;margin-bottom:.875rem;letter-spacing:-.3px}
.hero-plaquette-title span{color:#0CB04A}
/* Sous-titre */
.hero-plaquette-sub{font-size:16px;color:#4B6355;line-height:1.65;margin-bottom:1.5rem;font-weight:500;max-width:420px}
/* Feature rows */
.hero-feats{display:flex;flex-direction:column;gap:14px}
.hero-feat-row{display:flex;align-items:flex-start;gap:12px}
.hero-feat-ic{width:36px;height:36px;border-radius:50%;background:#E8F5ED;border:2px solid #A7D9B5;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.hero-feat-txt strong{display:block;font-size:15px;font-weight:800;color:#0D1F14;margin-bottom:2px}
.hero-feat-txt span{font-size:14px;color:#6B8B76;font-weight:500;line-height:1.4}
/* Why section */
.why-section{background:#0A2E1A;padding:2rem 2rem}
.why-inner{display:flex;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.why-title{font-size:16px;font-weight:800;color:#fff;margin-bottom:1.1rem;padding-bottom:.6rem;border-bottom:2px solid #0CB04A}
.why-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;flex:1}
.why-list li{display:flex;align-items:center;gap:10px;font-size:15px;color:rgba(255,255,255,.88);font-weight:600;line-height:1.45}
.why-check{width:22px;height:22px;min-width:22px;background:#0CB04A;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff}
/* Update section */
.update-section{background:#F8FFF9;padding:2rem 2rem;border-top:1px solid #D1FAE5}
.update-title{font-size:15px;font-weight:800;color:#0D1F14;margin-bottom:1.25rem;text-align:center;position:relative}
.update-title::after{content:'';display:block;width:40px;height:3px;background:#0CB04A;border-radius:2px;margin:.5rem auto 0}
.update-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.update-item{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border:1.5px solid #D1FAE5;border-radius:12px;padding:16px 10px;text-align:center;transition:border-color .2s,box-shadow .2s}
.update-item:hover{border-color:#0CB04A;box-shadow:0 4px 12px rgba(12,176,74,.12)}
.update-icon{font-size:26px}
.update-label{font-size:11.5px;font-weight:700;color:#374151;line-height:1.35}
/* Assist bar */
.assist-bar{background:#0A2E1A;padding:1.5rem 2rem;display:flex;flex-wrap:wrap;gap:0;border-top:3px solid #0CB04A}
.assist-item{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:140px;padding:.5rem 1rem .5rem 0;border-right:1px solid rgba(255,255,255,.08)}
.assist-item:first-child{padding-left:0}
.assist-item:last-child{border-right:none}
.assist-icon{font-size:22px;flex-shrink:0;margin-top:2px}
.assist-title{font-size:15px;font-weight:800;color:#fff;margin-bottom:3px}
.assist-sub{font-size:13.5px;color:rgba(255,255,255,.6);font-weight:500}
.assist-cta{font-size:20px;font-weight:900;color:#0CB04A;line-height:1}
/* Channels */
.channels{background:#E8F5ED;border-bottom:1px solid #A7D9B5;padding:.65rem 2rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:#0F6B2C;font-weight:700}
.ch-tag{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #A7D9B5;border-radius:20px;padding:4px 12px;font-weight:600}
/* Hero logo big (system) */
.hero-logo-big{display:none}
.hero h1{display:none}.hero p{display:none}.hero-features{display:none}
/* Responsive */
@media(max-width:640px){
  .hero-plaquette-right{display:block!important;height:220px;width:100%}
  .hero-plaquette-right img{object-fit:cover;object-position:center 20%}
  .hero-plaquette-inner{flex-direction:column-reverse;min-height:auto}
  .hero-plaquette-left{padding:1.5rem 1.25rem 1.5rem}
  .update-grid{grid-template-columns:repeat(2,1fr)}
  .assist-item{min-width:48%;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
}

/* ── CARD ── */
.card{background:var(--wh);border-radius:16px;box-shadow:var(--sh);padding:2rem;border:1px solid var(--bdr);margin-bottom:1.5rem}
.card-hd{font-size:17px;font-weight:800;color:var(--blk);padding-bottom:.75rem;border-bottom:1px solid var(--bdr);margin-bottom:1.5rem;display:flex;align-items:center;gap:8px}
.card-ico{width:22px;height:22px;background:var(--gl);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── FIELDS ── */
.field{margin-bottom:1.15rem}
.field label{display:block;font-size:14px;font-weight:700;color:var(--sub);margin-bottom:5px}
.field label .req{color:var(--red);margin-left:2px}
.field label .opt{font-size:11px;color:var(--grl);font-weight:400;margin-left:4px}
.field input,.field select,.field textarea{width:100%;padding:11px 14px;border:1.5px solid var(--bdr);border-radius:var(--r);font-family:'Nunito',sans-serif;font-size:16px;font-weight:600;color:var(--blk);background:var(--wh);transition:border-color .2s,box-shadow .2s;outline:none;appearance:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(12,176,74,.13)}
.field input.err{border-color:var(--red)}.field input.ok{border-color:var(--g)}
.ferr{font-size:13px;color:var(--red);margin-top:4px;display:none;font-weight:600}.ferr.on{display:block}
.fhint{font-size:13px;color:var(--grl);margin-top:4px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pwd-wrap{position:relative}.pwd-wrap input{padding-right:44px}
.pwd-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--grl);padding:4px;font-size:16px;line-height:1}
.pwd-toggle:hover{color:var(--blk)}
.pwd-str{height:4px;border-radius:2px;margin-top:5px;background:var(--bdr);overflow:hidden}
.pwd-str-bar{height:100%;border-radius:2px;transition:width .3s,background .3s}

/* ── CONSENT ── */
.consent-box{background:var(--gl);border:1.5px solid var(--g2);border-radius:var(--r);padding:1rem 1.25rem;display:flex;gap:12px;align-items:flex-start;margin:1.5rem 0}
.consent-box input[type=checkbox]{width:20px;height:20px;flex-shrink:0;margin-top:1px;accent-color:var(--g);cursor:pointer}
.consent-box label{font-size:15px;color:var(--sub);line-height:1.65;cursor:pointer;font-weight:500}
.cerr{font-size:12px;color:var(--red);font-weight:700;margin-top:-1rem;margin-bottom:1rem;display:none}.cerr.on{display:block}

/* ── BTN ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 22px;border-radius:var(--r);font-family:'Nunito',sans-serif;font-size:16px;font-weight:800;cursor:pointer;border:none;transition:transform .12s ease,background-color .18s,border-color .18s,color .18s,box-shadow .18s;letter-spacing:.02em}
.btn:active{transform:scale(.97)}
.btn-g{background:var(--g);color:var(--wh)}.btn-g:hover{background:var(--gd)}.btn-g:active{transform:scale(.98)}
.btn-o{background:var(--wh);color:var(--sub);border:1.5px solid var(--bdr)}.btn-o:hover{border-color:var(--g);color:var(--g);background:var(--gl)}
.btn-red{background:var(--red);color:var(--wh)}.btn-red:hover{background:#b91c1c}
.btn-amb{background:var(--amb);color:var(--wh)}.btn-amb:hover{background:#b45309}
.btn-blu{background:var(--blu);color:var(--wh)}.btn-blu:hover{background:#0E4278}
.btn-w{width:100%}
.btn-sm{padding:8px 15px;font-size:14px}.btn-xs{padding:6px 10px;font-size:13px}
.btn-row{display:flex;gap:10px;margin-top:1.5rem}.btn-row .btn-g{flex:1}

/* ── STEPS ── */
.steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:2rem}
.step-nd{display:flex;flex-direction:column;align-items:center;gap:5px}
.step-c{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;border:2px solid var(--bdr);color:var(--grl);background:var(--wh);transition:all .3s}
.step-c.done{background:var(--g);border-color:var(--g);color:var(--wh)}.step-c.active{background:var(--g);border-color:var(--g);color:var(--wh);box-shadow:0 0 0 4px rgba(12,176,74,.15)}
.step-lb{font-size:10.5px;font-weight:700;color:var(--grl);white-space:nowrap}.step-lb.active,.step-lb.done{color:var(--gd)}
.step-ln{width:48px;height:2px;background:var(--bdr);margin-bottom:22px;transition:background .3s;flex-shrink:0}.step-ln.done{background:var(--g)}

/* ── CONFIRM ── */
.cfm{text-align:center;padding:1.5rem 1rem}
.cfm-ico{width:80px;height:80px;border-radius:50%;background:var(--gl);margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center}
.cfm h2{font-size:22px;font-weight:800;margin-bottom:8px}
.cfm p{font-size:15px;color:var(--gr);max-width:420px;margin:0 auto 1.25rem;line-height:1.75}
.cfm-ref{display:inline-block;font-size:14px;background:#F3F4F6;border:1.5px solid var(--bdr);border-radius:8px;padding:10px 20px;color:var(--blk);font-weight:800;margin-bottom:1.5rem;letter-spacing:.04em}
.cfm-agent-banner{background:linear-gradient(135deg,var(--g),var(--gd));color:var(--wh);border-radius:var(--r);padding:1.25rem 1.5rem;margin-top:1rem;text-align:center}
.cfm-agent-banner p{font-size:13px;opacity:.9;margin-bottom:1rem}
.cfm-agent-banner .btn{background:var(--wh);color:var(--gd);font-size:14px}
.cfm-agent-banner .btn:hover{background:var(--gl)}

/* ── Écran de confirmation "image" (clients publics uniquement) ──
   L'ancien contenu (icône/titre/référence/bandeau) reste dans le DOM pour le
   mode agent (voir body.public-mode ci-dessous) ; seul le rendu visuel change. */
.cfm-img-wrap{position:relative;width:100%;max-width:480px;margin:0 auto;container-type:inline-size;display:none}
.cfm-img-wrap .cfm-img{width:100%;display:block;border-radius:16px}
.cfm-img-ref{
  position:absolute;left:22%;top:35.6%;width:37%;height:2.3%;
  background:#F7F8FA;display:flex;align-items:center;justify-content:flex-start;
  font-weight:800;font-size:2.15cqw;color:#0CB04A;letter-spacing:.01em;
  white-space:nowrap;font-family:inherit;overflow:hidden
}
.cfm-img-btn{position:absolute;background:transparent;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Les 3 badges de store sont imprimés dans l'image ; ces zones invisibles les rendent cliquables */
.cfm-img-dl-gplay{left:21.48%;top:86.6%;width:19.15%;height:5.5%}
.cfm-img-dl-apple{left:40.63%;top:86.6%;width:18.65%;height:5.5%}
.cfm-img-dl-huawei{left:59.28%;top:86.6%;width:18.85%;height:5.5%}

.cfm-img-quit-row{display:none;justify-content:center;margin-top:18px}
.cfm-img-quit-row .btn{min-width:220px}

.cfm-img-dl-msg{
  left:5%;top:43.3%;width:42%;height:5%;
  background:#E6F7EE;border:1.3px solid #A7F3C0!important;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:.4em;
  font-weight:700;color:#0A6B3A;font-size:1.85cqw;line-height:1.1;
  padding:0 .6em;box-sizing:border-box;text-align:center;white-space:nowrap;overflow:hidden;
  transition:opacity .15s
}
.cfm-img-dl-msg:hover{opacity:.85}

.cfm-badges-flash{position:absolute;left:21.48%;top:86.6%;width:56.65%;height:5.5%;border-radius:12px;pointer-events:none;opacity:0}
.cfm-badges-flash.on{animation:cfmFlashPulse .9s ease-out}
@keyframes cfmFlashPulse{
  0%{opacity:1;box-shadow:0 0 0 0 rgba(12,176,74,.55);background:rgba(12,176,74,.18)}
  70%{opacity:1;box-shadow:0 0 0 14px rgba(12,176,74,0);background:rgba(12,176,74,.05)}
  100%{opacity:0;box-shadow:0 0 0 14px rgba(12,176,74,0);background:rgba(12,176,74,0)}
}

/* Mode public : afficher l'image fournie et masquer l'ancien contenu texte */
body.public-mode #viewConfirm .cfm-ico,
body.public-mode #viewConfirm > .wrap .card .cfm > h2,
body.public-mode #viewConfirm #cfmRef,
body.public-mode #viewConfirm #cfmHelp,
body.public-mode #viewConfirm #publicConfirmActions{display:none!important}
body.public-mode #viewConfirm .cfm-img-wrap{display:block}
body.public-mode #viewConfirm .cfm-img-quit-row{display:flex}

/* ── RECAP TABLE ── */
.rtbl{width:100%;border-collapse:collapse}
.rtbl td{padding:10px 0;border-bottom:1px solid var(--bdr);font-size:14px}
.rtbl tr:last-child td{border-bottom:none}
.rtbl td:first-child{color:var(--gr);font-weight:600;width:44%}
.rtbl td:last-child{font-weight:700;color:var(--blk)}

/* ── LOGIN ── */
.login-outer{max-width:420px;margin:3rem auto;padding:0 1rem;position:relative;z-index:10}
.hero-feat-ic.why-ic{background:#0CB04A;color:#fff;border-radius:50%;width:22px;height:22px;min-width:22px;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.sort-btn{background:#fff;color:#0A2E1A;border:1.5px solid #0CB04A;font-weight:700;transition:all .18s}
.sort-btn:hover{background:#E6F7EE}
.sort-btn.sort-active{background:#0CB04A;color:#fff;border-color:#0CB04A}
/* ── LOGIN GRID (2 colonnes comme plaquette) ── */
.login-grid-wrap{display:grid;grid-template-columns:1fr 1fr;max-width:900px;margin:1.5rem auto 0;border-radius:12px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.12)}
.login-grid-left{background:#fff;padding:2rem 2.25rem}
.login-grid-hd{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;color:#0D1F14;margin-bottom:.6rem}
.login-grid-ico{font-size:22px}
.login-grid-right{background:#122744;padding:2rem 2.25rem;display:flex;flex-direction:column;justify-content:center}
.login-grid-right-title{font-size:22px;font-weight:800;color:#fff;line-height:1.3;margin-bottom:.75rem}
.login-grid-right-bar{width:40px;height:3px;background:#0CB04A;margin-bottom:1.5rem;border-radius:2px}
.login-grid-right-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.login-grid-right-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:rgba(255,255,255,.9);font-weight:600;line-height:1.45}
.lgr-check{width:22px;height:22px;min-width:22px;background:#0CB04A;border-radius:50%;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.lgr-drop{font-size:32px;text-align:right;margin-top:1.5rem;opacity:.35}
.login-logo{text-align:center;margin-bottom:2rem}
.login-logo .ico-big{width:64px;height:64px;background:transparent;border-radius:16px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.login-logo h2{font-size:20px;font-weight:800}
.login-logo p{font-size:13px;color:var(--gr);margin-top:4px}
.demo-hint{background:var(--ambl);border:1px solid #FCD34D;border-radius:var(--r);padding:10px 14px;font-size:12px;color:#92400E;font-weight:600;text-align:center;margin-bottom:1rem}
.forgot-link{font-size:12.5px;color:var(--blu);font-weight:700;cursor:pointer;text-align:right;margin-top:6px;display:block}.forgot-link:hover{text-decoration:underline}

/* ── FIRST LOGIN BANNER ── */
.first-banner{background:linear-gradient(135deg,#7C3AED,#5B21B6);color:var(--wh);padding:.75rem 1.75rem;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700}
.first-banner .dot{width:10px;height:10px;background:#FCD34D;border-radius:50%;flex-shrink:0}