/* Market by Mbôra (M²) — feuille de style commune */
:root{
  --paper:#f6faf7; --white:#fff; --ink:#10241b; --muted:#566860;
  --forest:#0b6b4a; --deep:#0a2a1f; --leaf:#19a572; --mint:#dff1e8;
  --ballpoint:#2a45c4; --grid:#cfe2ec; --margin:#e7a3a3; --saffron:#f0b429;
  --line:#d5e2db; --danger:#b3261e;
  --font-d:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --font-b:'Figtree','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-h:'Caveat','Segoe Print','Bradley Hand',cursive;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-b);font-size:17px;line-height:1.6}
img,svg{max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--saffron);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:6px;z-index:200}
.skip:focus{left:8px}
.wrap{width:min(var(--max),calc(100% - 40px));margin-inline:auto}

/* Typographie */
h1,h2,h3{font-family:var(--font-d);line-height:1.08;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.4rem,5.6vw,4.3rem);font-weight:800;letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(1.8rem,3.6vw,2.75rem);font-weight:700}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em}
.lead{font-size:1.2rem;color:var(--muted);max-width:34em}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.prose{max-width:62ch}

/* En-tête */
.site-head{position:sticky;top:0;z-index:100;background:rgba(246,250,247,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-d);font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.logo-mark{width:38px;height:38px;border-radius:10px;background:var(--forest);color:#fff;display:grid;place-items:center;font-size:1rem;font-weight:800}
.logo small{display:block;font-family:var(--font-b);font-weight:500;font-size:.72rem;color:var(--muted);letter-spacing:0;margin-top:-3px}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.site-nav a{text-decoration:none;padding:8px 12px;border-radius:8px;font-size:.95rem;color:#3d4f47}
.site-nav a:hover{background:var(--mint)}
.site-nav a[aria-current="page"]{color:var(--forest);font-weight:700;background:var(--mint)}
.site-nav a.btn{margin-left:8px;color:#fff}
.site-nav a.btn:hover{background:#095a3e}
.site-nav a.btn[aria-current="page"]{background:var(--ink)}
.menu-btn{display:none;margin-left:auto;border:1px solid var(--line);background:var(--white);border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:600}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:12px 20px;font-weight:700;text-decoration:none;cursor:pointer;background:var(--forest);color:#fff;transition:background .15s,transform .1s}
.btn:hover{background:#095a3e}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--deep)}
.btn--light:hover{background:var(--mint)}
.btn--sm{padding:8px 14px;font-size:.92rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Sections */
.band{padding:clamp(56px,9vw,110px) 0}
.band--white{background:var(--white);border-block:1px solid var(--line)}
.band--dark{background:var(--deep);color:#e9f3ee}
.band--dark .muted,.band--dark .lead{color:#a9c3b7}
.band--tight{padding:clamp(36px,6vw,64px) 0}
.sec-head{max-width:46rem;margin-bottom:clamp(28px,5vw,52px)}
.sec-head p{color:var(--muted);font-size:1.1rem;margin-top:14px;margin-bottom:0}
.band--dark .sec-head p{color:#a9c3b7}

/* Page intro (pages internes) */
.intro{padding:clamp(48px,8vw,96px) 0 clamp(24px,4vw,40px)}
.intro h1{font-size:clamp(2.1rem,4.8vw,3.5rem);max-width:17em}
.intro .lead{margin-top:20px}

/* Accueil : hero */
.hero{padding:clamp(40px,6vw,84px) 0 clamp(56px,8vw,96px)}
.hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{margin-bottom:22px;font-size:clamp(2.3rem,4.7vw,3.7rem)}
.hero .note{margin-top:18px;font-size:.88rem;color:var(--muted)}

/* Scène animée : cahier -> téléphone */
.stage{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:center}
.notebook{position:relative;background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px 14px 14px 46px;transform:rotate(-1.6deg);box-shadow:0 18px 40px rgba(10,42,31,.14);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:100% 32px,32px 100%;background-position:0 14px,14px 0}
.notebook::before{content:"";position:absolute;left:34px;top:0;bottom:0;width:2px;background:var(--margin)}
.nb-title{font-family:var(--font-h);font-size:1.5rem;line-height:32px;color:var(--ballpoint);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.nb-line{font-family:var(--font-h);font-size:1.6rem;line-height:32px;height:32px;color:var(--ballpoint);white-space:nowrap;overflow:hidden}
.nb-line.is-writing::after{content:"";display:inline-block;width:2px;height:1.1em;background:var(--ballpoint);margin-left:2px;vertical-align:text-bottom}
.nb-gap{height:32px}
.nb-order{color:var(--forest)}
.phone{background:#fff;border:6px solid #17231e;border-radius:28px;padding:12px;box-shadow:0 22px 50px rgba(10,42,31,.2);position:relative;overflow:hidden;min-height:330px;transform:rotate(1.2deg)}
.ph-top{width:54px;height:6px;border-radius:6px;background:#17231e;margin:0 auto 10px}
.ph-shop{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:.85rem;line-height:1.2}
.ph-shop small{display:block;color:var(--muted);font-size:.7rem}
.ph-logo{width:30px;height:30px;border-radius:8px;background:var(--forest);color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:800}
.ph-list{list-style:none;margin:0;padding:0}
.p-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #edf2ef;font-size:.78rem;line-height:1.25;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.p-item.on{opacity:1;transform:none}
.p-item .sw{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:800;color:#fff;font-size:.8rem;flex:none}
.p-item .tx{flex:1}
.p-item .tx small{display:block;color:var(--muted);font-size:.68rem}
.p-item .pr{font-weight:700;font-size:.74rem;white-space:nowrap}
.p-add{border:0;background:var(--mint);color:var(--forest);font-weight:700;font-size:.68rem;border-radius:6px;padding:5px 7px;transition:background .2s,color .2s}
.p-add.added{background:var(--forest);color:#fff}
.ph-cart{position:absolute;left:10px;right:10px;bottom:10px;background:var(--deep);color:#fff;border-radius:12px;padding:9px 12px;display:flex;justify-content:space-between;align-items:center;font-size:.76rem;transform:translateY(130%);transition:transform .45s}
.ph-cart.on{transform:none}
.ph-cart b{background:var(--saffron);color:var(--deep);border-radius:6px;padding:4px 9px;font-size:.72rem}
.ph-pay{position:absolute;inset:0;background:#fff;padding:22px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .35s;font-size:.82rem}
.ph-pay.on{opacity:1}
.ring{width:54px;height:54px;border-radius:50%;border:3px solid var(--mint);border-top-color:var(--forest);animation:spin 1s linear infinite}
.ph-pay.done .ring{animation:none;border-color:var(--forest);background:var(--forest);position:relative}
.ph-pay.done .ring::after{content:"";position:absolute;left:18px;top:10px;width:12px;height:22px;border:solid #fff;border-width:0 4px 4px 0;transform:rotate(45deg)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Ligne de parcours client */
.flowline{display:grid;grid-template-columns:repeat(5,1fr);position:relative;margin-top:8px}
.flowline::before{content:"";position:absolute;left:10%;right:10%;top:13px;height:2px;background:var(--line)}
.fl-node{position:relative;text-align:center;padding:0 6px}
.fl-node::before{content:"";display:block;width:28px;height:28px;margin:0 auto 12px;border-radius:50%;background:var(--paper);border:3px solid var(--forest);position:relative}
.fl-node strong{display:block;font-family:var(--font-d);font-size:1.1rem}
.fl-node span{font-size:.88rem;color:var(--muted);display:block;line-height:1.4}

/* Colonnes séparées par des filets */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.cols>div{padding:4px clamp(18px,3vw,36px) 4px;border-left:1.5px solid var(--line)}
.cols>div:first-child{padding-left:0;border-left:0}
.cols h3{margin-bottom:10px}
.cols p{color:var(--muted)}
.text-link{font-weight:700;color:var(--forest);text-decoration-thickness:2px;text-underline-offset:4px}

/* Lignes titre / texte */
.rows{border-top:1.5px solid var(--ink)}
.row-item{display:grid;grid-template-columns:minmax(150px,.7fr) 2fr;gap:12px 32px;padding:22px 0;border-bottom:1px solid var(--line)}
.row-item h3{font-size:1.15rem}
.row-item p{margin:0;color:var(--muted)}
.row-item a{font-weight:700;color:var(--forest)}

/* Principe : ce qui vous appartient */
.keep{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.keep li{padding:8px 16px;border:1.5px solid var(--forest);border-radius:999px;font-weight:600;color:var(--forest);background:var(--white)}
.statement{font-family:var(--font-d);font-size:clamp(1.7rem,3.8vw,2.7rem);line-height:1.12;letter-spacing:-.025em;font-weight:700;max-width:22em}

/* Bandeau CTA */
.cta-band{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between}
.cta-band h2{max-width:16em}

/* Interrupteurs segmentés et configurateur */
.cfg{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:start}
.cfg-mod{padding:20px 0;border-bottom:1px solid var(--line)}
.cfg-mod:first-child{border-top:1.5px solid var(--ink)}
.cfg-mod header{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;margin-bottom:8px}
.cfg-mod p{margin:0;color:var(--muted)}
.seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:10px;overflow:hidden}
.seg button{border:0;background:transparent;padding:8px 14px;font-weight:600;cursor:pointer;font-size:.92rem}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.cfg-out{position:sticky;top:90px;background:var(--deep);color:#e9f3ee;border-radius:14px;padding:24px}
.cfg-out h3{margin-bottom:14px;color:#fff}
.cfg-flow{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.cfg-flow li{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid #1d4636;font-size:.95rem}
.cfg-flow li b{color:var(--saffron);font-family:var(--font-d)}
.cfg-sum{color:#c6dccf;margin:0}

/* Onglets (situations) */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.tabs button{border:1.5px solid var(--line);background:var(--white);border-radius:999px;padding:10px 18px;font-weight:600;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--forest);border-color:var(--forest);color:#fff}
.panel[hidden]{display:none}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,64px)}
.panel dl{margin:0}
.panel dt{font-family:var(--font-d);font-weight:700;margin-top:22px}
.panel dt:first-child{margin-top:0}
.panel dd{margin:4px 0 0;color:var(--muted)}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.chain li{padding:8px 14px;border-radius:8px;background:var(--mint);font-weight:600;font-size:.92rem}
.chain li.is-market{background:var(--forest);color:#fff}
.chain li+li::before{content:"";}
.chain .sep{background:none;padding:0;color:var(--muted)}

/* Démo */
.demo{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(22px,4vw,48px);align-items:start}
.demo-side h3{color:#fff;margin:22px 0 10px;font-size:1rem}
.demo-side h3:first-child{margin-top:0}
.src-btns,.step-btns{display:grid;gap:8px}
.src-btns button,.step-btns button{text-align:left;border:1.5px solid #1d4636;background:#0f3727;color:#cfe3d8;border-radius:10px;padding:11px 14px;cursor:pointer}
.src-btns button[aria-pressed="true"],.step-btns button[aria-current="step"]{border-color:var(--leaf);background:#16503a;color:#fff}
.step-btns button .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#1d4636;margin-right:10px;font-size:.8rem;font-weight:700}
.step-btns button[aria-current="step"] .n{background:var(--saffron);color:var(--deep)}
.screen{background:#fff;color:var(--ink);border-radius:18px;padding:22px;min-height:420px;position:relative}
.screen .tag{display:inline-block;background:var(--mint);color:var(--forest);font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:999px}
.screen .tag--sim{background:#fff3cf;color:#7a5600}
.scr-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.scr-head b{font-family:var(--font-d);font-size:1.1rem}
.line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #edf2ef}
.line small{display:block;color:var(--muted)}
.qty{display:inline-flex;align-items:center;gap:8px}
.qty button{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--line);background:#fff;cursor:pointer;font-weight:700}
.qty span{min-width:20px;text-align:center;font-weight:700}
.total{display:flex;justify-content:space-between;font-family:var(--font-d);font-size:1.3rem;font-weight:700;margin:18px 0}
.field{display:grid;gap:6px;margin:14px 0}
.field label{font-weight:600;font-size:.92rem}
.field input,.field select,.field textarea{border:1.5px solid var(--line);border-radius:8px;padding:11px 12px;background:#fff;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--forest)}
.field .err{color:var(--danger);font-size:.88rem;min-height:1.2em;margin:0}
.methods{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.methods button{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:10px;cursor:pointer;text-align:left;font-weight:600}
.methods button[aria-pressed="true"]{border-color:var(--forest);background:var(--mint)}
.qr{display:grid;grid-template-columns:repeat(15,1fr);width:150px;height:150px;margin:10px auto;padding:8px;border:1.5px solid var(--line);border-radius:8px}
.qr i{background:transparent}.qr i.k{background:var(--ink)}
.wait{display:flex;flex-direction:column;align-items:center;gap:14px;padding:50px 10px;text-align:center}
.wait .ring{width:56px;height:56px}
.ok-mark{width:56px;height:56px;border-radius:50%;background:var(--forest);position:relative;margin:0 auto}
.ok-mark::after{content:"";position:absolute;left:19px;top:10px;width:13px;height:24px;border:solid #fff;border-width:0 4px 4px 0;transform:rotate(45deg)}
.bubble{background:#e2f7d5;border-radius:12px 12px 12px 2px;padding:12px 14px;margin:12px 0;max-width:30em;font-size:.95rem}
.bubble small{display:block;color:#4c6b3a;margin-top:4px}
.mini-table{width:100%;border-collapse:collapse;font-size:.9rem;margin:12px 0}
.mini-table th,.mini-table td{border:1px solid var(--line);padding:7px 9px;text-align:left}
.mini-table th{background:#f0f6f2}
.hand{font-family:var(--font-h);font-size:1.5rem;color:var(--ballpoint);line-height:1.2;background:#fff;border:1px dashed var(--grid);border-radius:6px;padding:8px 12px;margin:12px 0}

/* Formulaires */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.form-grid .full{grid-column:1/-1}
.checks{display:flex;flex-wrap:wrap;gap:8px 18px}
.checks label{display:flex;align-items:center;gap:8px;font-weight:500}
.checks input{width:auto}
.contact-box{border-left:1.5px solid var(--line);padding-left:clamp(20px,4vw,48px)}
.contact-box p{margin-bottom:.6em}

/* Étapes (vraie séquence) */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.steps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;font-weight:800;font-family:var(--font-d)}
.steps h3{margin-bottom:4px}
.steps p{margin:0;color:var(--muted)}

/* Pied de page */
.site-foot{background:var(--deep);color:#b9d1c5;padding:44px 0 30px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.site-foot a{color:#e9f3ee}
.site-foot h4{font-family:var(--font-d);color:#fff;margin:0 0 10px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot-bottom{border-top:1px solid #1d4636;margin-top:30px;padding-top:18px;font-size:.85rem}

/* Toast */
.toast{position:fixed;right:16px;bottom:16px;max-width:calc(100% - 32px);background:var(--ink);color:#fff;padding:12px 16px;border-radius:10px;opacity:0;transform:translateY(20px);transition:.3s;z-index:300;pointer-events:none}
.toast.show{opacity:1;transform:none}

/* Responsive */
@media(max-width:900px){
  .hero-grid,.cfg,.demo,.panel-grid{grid-template-columns:1fr}
  .cfg-out{position:static}
  .cols{grid-template-columns:1fr;gap:28px}
  .cols>div{border-left:0;padding:0;border-top:1.5px solid var(--line);padding-top:22px}
  .cols>div:first-child{border-top:0;padding-top:0}
  .flowline{grid-template-columns:1fr;gap:18px}
  .flowline::before{left:13px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
  .fl-node{text-align:left;padding-left:44px}
  .fl-node::before{position:absolute;left:0;top:0;margin:0}
  .row-item{grid-template-columns:1fr}
  .contact-box{border-left:0;padding-left:0;border-top:1.5px solid var(--line);padding-top:24px}
  .foot-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .menu-btn{display:block}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--paper);border-bottom:1px solid var(--line);padding:12px 20px 18px}
  .site-nav.open{display:flex}
  .site-nav .btn{margin:8px 0 0}
}
@media(max-width:520px){
  .stage{grid-template-columns:1fr}
  .phone{max-width:290px;margin-inline:auto}
  .nb-line{font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* Texte secondaire lisible dans l'écran de démo (fond blanc dans une section sombre) */
.band--dark .screen .muted{color:var(--muted)}
.band--dark .screen small.muted{color:var(--muted)}

/* Language switch */
.lang-switch{appearance:none;border:1px solid rgba(11,107,74,.22);background:#fff;color:var(--ink,#14231d);font:600 12px/1 Figtree,sans-serif;letter-spacing:.06em;border-radius:999px;padding:10px 12px;cursor:pointer;margin-left:8px;transition:.2s ease}.lang-switch:hover{transform:translateY(-1px);border-color:#0b6b4a;color:#0b6b4a}@media(max-width:900px){.lang-switch{margin:10px 0 4px;width:max-content}}