/* ============================================================
   BookDelivery — Landing publique (page d'accueil du site)
   Design autonome (hero + trust + etapes + arguments + paiement + FAQ + WhatsApp).
   Charge par resources/views/site/index.blade.php (Route::view('/')).
   ============================================================ */
:root{
  --navy:#12276B; --navy-soft:#2A3F82; --yellow:#FFE300; --yellow-deep:#F5C400;
  --paper:#F7F9FC; --white:#fff; --line:#DDE4F0; --grey:#5C6A8A; --wa:#25D366;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--navy);-webkit-font-smoothing:antialiased;line-height:1.5}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

header{position:sticky;top:0;z-index:50;background:rgba(247,249,252,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:9px;font-family:'Archivo';font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none;color:var(--navy)}
.logo img{height:34px;width:auto;display:block}
.hd nav{display:flex;align-items:center;gap:22px}
.hd nav a{color:var(--navy);text-decoration:none;font-size:14px;font-weight:500}
.wa-btn{background:var(--navy);color:#fff!important;padding:9px 16px;border-radius:100px;font-size:13px;font-weight:600;text-decoration:none}
@media(max-width:720px){.hd nav a.hide-m{display:none}}

/* HERO */
.hero{padding:46px 0 0;text-align:center}
.mascot-slot{width:150px;height:150px;margin:0 auto 16px;display:grid;place-items:center;padding:4px}
.mascot-slot img{max-width:100%;max-height:100%;display:block}
@media(max-width:600px){.mascot-slot{width:118px;height:118px}}
.eyebrow{display:inline-block;font-family:'Archivo';font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-soft);background:var(--yellow);padding:5px 12px;border-radius:100px;margin-bottom:16px}
h1{font-family:'Archivo';font-weight:800;letter-spacing:-.035em;line-height:1.04;font-size:clamp(31px,5.8vw,54px);max-width:17ch;margin:0 auto 14px}
h1 .mark{background:linear-gradient(transparent 58%,var(--yellow) 58%);padding:0 3px}
.sub{font-size:17px;color:var(--grey);max-width:47ch;margin:0 auto 26px}

.cta-main{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--yellow);color:var(--navy);text-decoration:none;font-family:'Archivo';font-weight:800;font-size:18px;padding:17px 40px;border-radius:100px;box-shadow:0 8px 24px rgba(245,196,0,.42);transition:transform .16s,box-shadow .16s}
.cta-main:hover{background:var(--yellow-deep);transform:translateY(-2px);box-shadow:0 12px 30px rgba(245,196,0,.5)}
.cta-main svg{width:19px;height:19px}
.under{font-size:13px;color:var(--grey);margin-top:12px}

/* NB partenaire */
.nb{max-width:620px;margin:26px auto 0;background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:12px;padding:14px 18px;display:flex;gap:12px;text-align:left;align-items:flex-start}
.nb svg{width:19px;height:19px;flex:none;margin-top:2px}
.nb p{font-size:13.5px;color:var(--grey);line-height:1.55}
.nb b{color:var(--navy)}
.nb a{color:var(--navy);font-weight:600;white-space:nowrap}

/* TRUST */
.trust{margin:42px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left}
@media(max-width:860px){.trust-grid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.trust-grid{grid-template-columns:1fr}}
.ti{display:flex;gap:11px;align-items:flex-start}
.ti svg{width:22px;height:22px;flex:none;margin-top:2px}
.ti b{display:block;font-family:'Archivo';font-weight:700;font-size:13.5px;margin-bottom:2px}
.ti p{font-size:12.5px;color:var(--grey);line-height:1.45}

/* ETAPES */
.how{padding:56px 0 0}
.h2{font-family:'Archivo';font-weight:800;font-size:26px;letter-spacing:-.025em;text-align:center;margin-bottom:26px}
.h2 em{font-style:normal;background:linear-gradient(transparent 58%,var(--yellow) 58%);padding:0 3px}
.stp{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.stp{grid-template-columns:1fr}}
.st{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.st i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--yellow);font-family:'Archivo';font-weight:800;font-size:15px;font-style:normal;margin-bottom:13px}
.st h3{font-family:'Archivo';font-weight:700;font-size:16.5px;margin-bottom:5px}
.st p{font-size:14px;color:var(--grey)}

/* ARGS */
.args{padding:48px 0 0}
.args-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.args-grid{grid-template-columns:1fr}}
.arg{background:#fff;border-radius:16px;padding:22px;border:1px solid var(--line)}
.arg svg{width:32px;height:32px;margin-bottom:11px}
.arg h3{font-family:'Archivo';font-weight:700;font-size:16px;margin-bottom:5px}
.arg p{font-size:14px;color:var(--grey)}

/* PAY */
.pay{margin:52px 0 0;background:var(--navy);border-radius:24px;padding:34px 28px;color:#fff}
.pay-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:20px}
.pay h3{font-family:'Archivo';font-weight:800;font-size:21px;letter-spacing:-.02em;margin-bottom:5px}
.pay-head>div>p{font-size:14px;color:#B9C6E8;max-width:46ch}
.secure{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);padding:9px 14px;border-radius:100px;font-size:12.5px;font-weight:600;white-space:nowrap}
.secure svg{width:15px;height:15px}
.paylogos{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:760px){.paylogos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:440px){.paylogos{grid-template-columns:repeat(2,1fr)}}
.plogo{background:#fff;border-radius:12px;height:66px;display:grid;place-items:center;padding:11px 13px;overflow:hidden}
/* Hauteur plafonnee en PX (un max-height:% ne se resout pas dans cette grille -> debordement). */
.plogo img{max-height:34px;max-width:100%;width:auto;height:auto;object-fit:contain}
.plogo svg{max-height:30px;width:auto}
.plogo.txt{font-family:'Archivo';font-weight:800;font-size:12.5px;color:var(--navy);text-align:center;line-height:1.25}
.pnote{margin-top:15px;font-size:12.5px;color:#93A4D0;text-align:center}

/* FAQ */
.faq{padding:52px 0 40px;scroll-margin-top:74px}
.faq h2{font-family:'Archivo';font-weight:800;font-size:26px;letter-spacing:-.025em;margin-bottom:20px}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:9px}
summary{font-weight:600;font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-family:'Archivo';font-weight:700;font-size:19px;color:var(--navy-soft)}
details[open] summary::after{content:'\2013'}
details p{font-size:14.5px;color:var(--grey);margin-top:11px}

footer{background:var(--navy);color:#fff;padding:32px 0 92px;font-size:13.5px}
.ft{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.ft a{color:var(--yellow);text-decoration:none}
.ft span{color:#93A4D0}

/* WA WIDGET */
.wa-fab{position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--wa);border:none;cursor:pointer;box-shadow:0 8px 22px rgba(37,211,102,.42);display:grid;place-items:center}
.wa-fab svg{width:30px;height:30px}
.wa-fab::after{content:'';position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;background:#FF3B30;border:2px solid #fff}
.wa-panel{position:fixed;right:18px;bottom:86px;z-index:60;width:320px;max-width:calc(100vw - 36px);background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 22px 60px rgba(18,39,107,.3);display:none}
.wa-panel.open{display:block}
.wa-top{background:#075E54;color:#fff;padding:13px 15px;display:flex;gap:11px;align-items:center}
.wa-top .av{width:36px;height:36px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;flex:none;overflow:hidden}
.wa-top .av img{width:100%;height:100%;object-fit:contain;padding:4px}
.wa-top .av span{font-family:'Archivo';font-weight:800;font-size:13px;color:var(--navy)}
.wa-top b{font-size:14px;display:block}
.wa-top small{font-size:11.5px;color:#A7D5CD}
.wa-close{margin-left:auto;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1;opacity:.85}
.wa-body{background:#ECE5DD;padding:15px;min-height:104px}
.bubble{background:#fff;border-radius:0 10px 10px 10px;padding:10px 12px;font-size:13.5px;max-width:90%;box-shadow:0 1px 1px rgba(0,0,0,.08);line-height:1.5}
.bubble small{display:block;font-size:10px;color:#9AA5A2;text-align:right;margin-top:4px}
.wa-foot{padding:12px;background:#fff}
.wa-foot a{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--wa);color:#fff;text-decoration:none;font-family:'Archivo';font-weight:700;font-size:14px;padding:12px;border-radius:100px}
.wa-foot a svg{width:17px;height:17px}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px}