/* hanout.net (2026-10-16) */
:root{--vert:#7b8f00;--vert-f:#4a5a00;--citron:#cfe14a;--nuit:#1e2733;--texte:#1f2933;--doux:#5b6775;--fond:#f6f8f1;--carte:#fff;--bord:#e3e8d6;--r:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic",sans-serif;color:var(--texte);background:var(--fond);line-height:1.55}
a{color:var(--vert-f)}img{max-width:100%;display:block}
.large{max-width:1180px;margin:0 auto;padding:0 16px}
.barre{background:var(--nuit);color:#fff;position:sticky;top:0;z-index:20}
.barre .large{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:1.25rem}
.logo img{height:44px;width:auto}footer .logo img{height:40px}
.logo span{background:var(--citron);color:var(--nuit);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:900}
nav{display:flex;gap:6px;align-items:center}
nav a{color:#dfe6ee;text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:600}
nav a:hover,nav a.actif{background:#2c3846;color:#fff}
.bouton,button.bouton{display:inline-block;background:var(--citron);color:var(--nuit)!important;border:0;border-radius:12px;padding:12px 20px;font-weight:800;text-decoration:none;cursor:pointer;font-size:1rem}
.bouton.second{background:transparent;color:inherit!important;border:2px solid currentColor}
#menu,.burger{display:none}
@media(max-width:820px){.burger{display:block;font-size:1.6rem;cursor:pointer;padding:8px}
 nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--nuit);flex-direction:column;align-items:stretch;padding:8px 16px 16px}
 #menu:checked~nav{display:flex}}
.hero{background:linear-gradient(160deg,var(--nuit) 0%,#2b3a22 100%);color:#fff;padding:64px 0 40px}
.hero .large{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.1;margin:0 0 16px}
.hero h1 em{color:var(--citron);font-style:normal}
.hero p{font-size:1.15rem;color:#d6dde5;margin:0 0 24px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero img{border-radius:var(--r);box-shadow:0 20px 50px #0007}
.hero img.maquette{border-radius:0;box-shadow:none;width:100%;height:auto}
.puces{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:#cfd8c2;font-size:.95rem}
@media(max-width:820px){.hero .large{grid-template-columns:1fr}.hero{padding-top:36px}}
section{padding:56px 0}section h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 8px}
.intro{color:var(--doux);margin:0 0 28px;max-width:720px}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);padding:20px}
.carte .ico{font-size:1.6rem;width:46px;height:46px;border-radius:12px;background:#eef3d6;display:grid;place-items:center;margin-bottom:10px}
.carte h3{margin:0 0 6px;font-size:1.08rem}.carte p{margin:0;color:var(--doux)}
.onglets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.onglets button{border:1px solid var(--bord);background:#fff;border-radius:999px;padding:8px 16px;font-weight:700;cursor:pointer}
.onglets button.on{background:var(--nuit);color:#fff;border-color:var(--nuit)}
.ecran{display:grid;grid-template-columns:2.2fr 1fr;gap:20px;align-items:start}
.ecran figure{margin:0}.ecran img{border-radius:12px;border:1px solid var(--bord);background:#fff}
.ecran figcaption{color:var(--doux);margin-top:8px}
@media(max-width:820px){.ecran{grid-template-columns:1fr}}
.etapes{counter-reset:e;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.etapes .carte{position:relative;padding-top:44px}
.etapes .carte::before{counter-increment:e;content:counter(e);position:absolute;top:14px;left:20px;background:var(--vert);color:#fff;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:stretch}
.tarif{display:flex;flex-direction:column}.tarif.mis{border:2px solid var(--vert);box-shadow:0 10px 30px #7b8f0026}
.prix{font-size:2.4rem;font-weight:900;margin:8px 0}.prix small{font-size:1rem;color:var(--doux);font-weight:600}
.tarif ul{padding-left:20px;margin:8px 0 20px;flex:1}.tarif li{margin:4px 0}
.badge{display:inline-block;background:var(--citron);color:var(--nuit);border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:800}
details{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:14px 18px;margin-bottom:10px}
summary{cursor:pointer;font-weight:700}
footer{background:var(--nuit);color:#c9d2dc;padding:40px 0 16px;margin-top:40px}
footer .large{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}
footer a{display:block;color:#c9d2dc;text-decoration:none;margin:4px 0}footer b{color:#fff}
.copy{text-align:center;color:#8794a3;margin:24px 0 0;font-size:.9rem}
@media(max-width:820px){footer .large{grid-template-columns:1fr 1fr}}
.page{padding:36px 0}
.form{max-width:760px}.form .ligne{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.form .ligne{grid-template-columns:1fr}}
label{display:block;font-weight:700;margin:12px 0 6px}label small{font-weight:500;color:var(--doux)}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid #cdd5bf;border-radius:10px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:3px solid #cfe14a88;border-color:var(--vert)}
.sd{display:flex;align-items:center;border:1px solid #cdd5bf;border-radius:10px;background:#fff;overflow:hidden}
.sd input{border:0;border-radius:0}.sd span{padding:0 12px;color:var(--doux);white-space:nowrap}
.aide{font-size:.9rem;margin-top:6px}.ok{color:#2f7d1e}.ko{color:#b42318}
.alerte{border-radius:12px;padding:14px 18px;margin:16px 0}.alerte.ko{background:#fdecea;color:#8a1c12}.alerte.ok{background:#eaf6e3;color:#24561a}
.piege{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.module{scroll-margin-top:80px}.module ol{padding-left:22px}.module li{margin:6px 0}
.sommaire{columns:2;gap:24px}@media(max-width:640px){.sommaire{columns:1}}
.capture{margin:12px 0;border-radius:12px;border:1px solid var(--bord)}
.astuce{background:#f2f7dc;border-left:4px solid var(--vert);padding:10px 14px;border-radius:8px;margin:10px 0}

/* Version arabe (2026-10-19) : bouton de langue, droite-à-gauche, police Tajawal */
.langue{margin-inline-start:auto;margin-inline-end:10px;color:#fff;text-decoration:none;font-weight:700;border:1px solid #4b5a6b;border-radius:999px;padding:6px 14px;font-size:.95rem;white-space:nowrap}
.langue:hover{background:#2c3846}
.langue[lang=ar]{font-family:Tajawal,"Noto Sans Arabic","Segoe UI",Tahoma,sans-serif}
[dir=rtl] body{font-family:Tajawal,"Noto Sans Arabic","Segoe UI",Tahoma,sans-serif}
[dir=rtl] .hero h1{line-height:1.3}
[dir=rtl] .etapes .carte::before{left:auto;right:20px}
[dir=rtl] .tarif ul{padding-left:0;padding-right:20px}
[dir=rtl] .module ol{padding-left:0;padding-right:22px}
[dir=rtl] .astuce{border-left:0;border-right:4px solid var(--vert)}
.sd{direction:ltr}
/* Formules (2026-10-19) : formule fermée grisée, prix en DT à vie */
.tarif.off{opacity:.6;background:#f3f4f1}.tarif.off h3{color:var(--doux)}
.badge.gris{background:#dde2d6;color:var(--doux)}
.prix.bientot{font-size:1.4rem;color:var(--doux)}
.unique{color:var(--vert-f);font-weight:700;margin:-4px 0 6px}
.bouton.inactif{cursor:not-allowed;opacity:.7;text-align:center}
.tarif .badge{align-self:flex-start}

/* Bouton flottant WhatsApp (2026-10-22) */
.wa-flottant{position:fixed;right:18px;bottom:18px;z-index:50;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .15s}
.wa-flottant:hover,.wa-flottant:focus-visible{transform:scale(1.08)}
[dir=rtl] .wa-flottant{right:auto;left:18px}
@media print{.wa-flottant{display:none}}