Farha \u2014 L'art d'orchestrer votre mariage<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --ivory:#FBF6EE;\r\n --ivory-2:#F4EBDD;\r\n --plum:#331528;\r\n --plum-2:#43203A;\r\n --wine:#7A2A40;\r\n --gold:#B0863A;\r\n --gold-soft:#CBA35A;\r\n --gold-2:#E4C77E;\r\n --rose:#C98A78;\r\n --ink:#2A2320;\r\n --muted:#8A7A6C;\r\n --line:rgba(176,134,58,.28);\r\n }\r\n *{box-sizing:border-box;margin:0;padding:0}\r\n html{scroll-behavior:smooth}\r\n body{\r\n background:var(--ivory);\r\n color:var(--ink);\r\n font-family:'Jost',system-ui,sans-serif;\r\n font-weight:300;\r\n line-height:1.65;\r\n -webkit-font-smoothing:antialiased;\r\n overflow-x:hidden;\r\n }\r\n .serif{font-family:'Cormorant Garamond',Georgia,serif}\r\n .eyebrow{\r\n font-family:'Jost',sans-serif;\r\n font-weight:500;\r\n font-size:.72rem;\r\n letter-spacing:.42em;\r\n text-transform:uppercase;\r\n color:var(--gold);\r\n }\r\n .wrap{max-width:1160px;margin:0 auto;padding:0 28px}\r\n a{color:inherit;text-decoration:none}\r\n img{max-width:100%}\r\n\r\n \/* ---------- zellige star motif ---------- *\/\r\n .star{display:inline-block;line-height:0}\r\n .star svg{display:block}\r\n\r\n \/* ---------- divider flourish ---------- *\/\r\n .flourish{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto}\r\n .flourish .rule{height:1px;width:min(120px,22vw);background:linear-gradient(90deg,transparent,var(--gold))}\r\n .flourish .rule.r{background:linear-gradient(90deg,var(--gold),transparent)}\r\n\r\n \/* ---------- nav ---------- *\/\r\n header.nav{\r\n position:sticky;top:0;z-index:60;\r\n background:rgba(51,21,40,.0);\r\n transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease;\r\n border-bottom:1px solid transparent;\r\n }\r\n header.nav.solid{\r\n background:rgba(51,21,40,.92);\r\n backdrop-filter:blur(10px);\r\n border-bottom:1px solid rgba(176,134,58,.25);\r\n }\r\n .nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px}\r\n .brand{display:flex;align-items:center;gap:12px;color:var(--ivory)}\r\n .brand .name{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.7rem;letter-spacing:.14em}\r\n .navlinks{display:flex;gap:34px;align-items:center}\r\n .navlinks a{color:rgba(251,246,238,.82);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;transition:color .25s}\r\n .navlinks a:hover{color:var(--gold-2)}\r\n .nav-cta{\r\n border:1px solid var(--gold);color:var(--gold-2);\r\n padding:11px 22px;border-radius:2px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;\r\n transition:background .3s,color .3s;\r\n }\r\n .nav-cta:hover{background:var(--gold);color:var(--plum)}\r\n .burger{display:none;background:none;border:none;color:var(--ivory);cursor:pointer}\r\n\r\n \/* ---------- hero ---------- *\/\r\n .hero{\r\n position:relative;\r\n background:\r\n radial-gradient(120% 90% at 82% 8%,rgba(122,42,64,.55),transparent 60%),\r\n radial-gradient(90% 80% at 6% 96%,rgba(176,134,58,.20),transparent 55%),\r\n linear-gradient(160deg,#3b1a30,#2a1120 70%);\r\n color:var(--ivory);\r\n padding:120px 0 130px;\r\n overflow:hidden;\r\n margin-top:-78px;\r\n padding-top:200px;\r\n }\r\n .hero::before{\r\n content:\"\";position:absolute;inset:0;opacity:.10;pointer-events:none;\r\n background-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23E4C77E' stroke-width='1'><path d='M60 8 L74 46 L112 60 L74 74 L60 112 L46 74 L8 60 L46 46 Z'\/><path d='M60 20 L69 51 L100 60 L69 69 L60 100 L51 69 L20 60 L51 51 Z'\/><\/g><\/svg>\");\r\n background-size:150px 150px;\r\n }\r\n .hero-inner{position:relative;text-align:center;max-width:880px;margin:0 auto}\r\n .hero .kicker{margin-bottom:26px}\r\n .hero h1{\r\n font-family:'Cormorant Garamond',serif;font-weight:300;\r\n font-size:clamp(3rem,8vw,6.2rem);line-height:1.02;letter-spacing:.01em;\r\n }\r\n .hero h1 em{font-style:italic;color:var(--gold-2)}\r\n .hero p.lede{\r\n max-width:560px;margin:30px auto 0;color:rgba(251,246,238,.80);\r\n font-size:1.08rem;font-weight:300;\r\n }\r\n .hero .actions{margin-top:44px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}\r\n .btn-gold{\r\n background:linear-gradient(180deg,var(--gold-2),var(--gold));\r\n color:#3a1a2c;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;\r\n padding:16px 34px;border-radius:2px;border:none;cursor:pointer;\r\n box-shadow:0 14px 34px -14px rgba(176,134,58,.7);\r\n transition:transform .25s,box-shadow .25s;\r\n }\r\n .btn-gold:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(176,134,58,.85)}\r\n .btn-ghost{\r\n border:1px solid rgba(228,199,126,.5);color:var(--ivory);\r\n padding:16px 30px;border-radius:2px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;\r\n transition:border-color .3s,color .3s;\r\n }\r\n .btn-ghost:hover{border-color:var(--gold-2);color:var(--gold-2)}\r\n .hero-stats{\r\n margin-top:66px;display:flex;justify-content:center;gap:56px;flex-wrap:wrap;\r\n position:relative;\r\n }\r\n .hstat{text-align:center}\r\n .hstat .n{font-family:'Cormorant Garamond',serif;font-size:2.4rem;color:var(--gold-2);font-weight:400}\r\n .hstat .l{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(251,246,238,.6);margin-top:4px}\r\n\r\n \/* ---------- section shell ---------- *\/\r\n section{padding:110px 0}\r\n .sec-head{text-align:center;max-width:680px;margin:0 auto 60px}\r\n .sec-head .flourish{margin-bottom:22px}\r\n .sec-head h2{\r\n font-family:'Cormorant Garamond',serif;font-weight:300;\r\n font-size:clamp(2.3rem,4.6vw,3.4rem);line-height:1.08;margin-top:14px;color:var(--plum);\r\n }\r\n .sec-head p{margin-top:16px;color:var(--muted);font-size:1.02rem}\r\n\r\n \/* ---------- prestations ---------- *\/\r\n .cats{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}\r\n .cat{\r\n position:relative;background:#fff;border:1px solid var(--line);\r\n padding:40px 38px 36px;border-radius:3px;overflow:hidden;\r\n transition:transform .4s,box-shadow .4s;\r\n }\r\n .cat::after{\r\n content:\"\";position:absolute;top:0;left:0;right:0;height:3px;\r\n background:linear-gradient(90deg,var(--gold),var(--rose));\r\n transform:scaleX(0);transform-origin:left;transition:transform .5s;\r\n }\r\n .cat:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(51,21,40,.35)}\r\n .cat:hover::after{transform:scaleX(1)}\r\n .cat .num{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--gold);letter-spacing:.2em}\r\n .cat h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.8rem;color:var(--plum);margin:6px 0 14px}\r\n .cat-head{display:flex;align-items:center;gap:18px;margin-bottom:14px}\r\n .cat-illu{\r\n flex:0 0 auto;width:84px;height:84px;border-radius:50%;\r\n background:radial-gradient(circle at 50% 34%, #ffffff, var(--ivory-2));\r\n border:1px solid var(--line);\r\n display:flex;align-items:center;justify-content:center;\r\n transition:transform .45s ease,box-shadow .45s ease;\r\n }\r\n .cat:hover .cat-illu{transform:scale(1.06) rotate(-3deg);box-shadow:0 12px 26px -14px rgba(176,134,58,.55)}\r\n .cat-illu svg{width:54px;height:54px;display:block}\r\n .cat-head .num{display:block}\r\n .cat-head h3{margin:2px 0 0}\r\n .cat p{color:var(--muted);font-size:.95rem;margin-bottom:20px}\r\n .taglist{display:flex;flex-wrap:wrap;gap:8px}\r\n .tag{\r\n font-size:.72rem;letter-spacing:.05em;color:var(--wine);\r\n background:var(--ivory-2);border:1px solid var(--line);\r\n padding:5px 11px;border-radius:100px;\r\n }\r\n\r\n \/* ---------- process ---------- *\/\r\n .process{background:linear-gradient(165deg,#2f1327,#3d1c35);color:var(--ivory)}\r\n .process .sec-head h2{color:var(--ivory)}\r\n .process .sec-head p{color:rgba(251,246,238,.7)}\r\n .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:st}\r\n .pstep{position:relative;padding:34px 28px;border:1px solid rgba(176,134,58,.28);border-radius:3px;background:rgba(255,255,255,.02)}\r\n .pstep .idx{\r\n font-family:'Cormorant Garamond',serif;font-size:2.6rem;color:var(--gold-2);\r\n line-height:1;display:block;margin-bottom:14px;\r\n }\r\n .pstep h4{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.4rem;margin-bottom:10px}\r\n .pstep p{color:rgba(251,246,238,.72);font-size:.92rem}\r\n\r\n \/* ---------- DEVIS wizard ---------- *\/\r\n .devis{background:\r\n radial-gradient(80% 60% at 100% 0,rgba(201,138,120,.10),transparent 60%),\r\n var(--ivory);}\r\n .wizard{\r\n background:#fff;border:1px solid var(--line);border-radius:4px;\r\n box-shadow:0 40px 90px -50px rgba(51,21,40,.4);\r\n max-width:900px;margin:0 auto;overflow:hidden;\r\n }\r\n .wz-top{\r\n background:linear-gradient(160deg,#3b1a30,#2a1120);color:var(--ivory);\r\n padding:30px 40px 26px;\r\n }\r\n .wz-top .wz-title{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:400}\r\n .wz-top .wz-sub{font-size:.82rem;color:rgba(251,246,238,.65);margin-top:2px}\r\n .progress{display:flex;gap:6px;margin-top:22px}\r\n .pdot{flex:1;height:4px;border-radius:100px;background:rgba(251,246,238,.18);transition:background .4s}\r\n .pdot.on{background:var(--gold-2)}\r\n .steplabels{display:flex;justify-content:space-between;margin-top:10px;gap:6px}\r\n .steplabels span{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,246,238,.45);flex:1;text-align:center}\r\n .steplabels span.on{color:var(--gold-2)}\r\n\r\n .wz-body{padding:38px 40px 30px;min-height:360px}\r\n .panel{display:none;animation:fade .5s ease}\r\n .panel.on{display:block}\r\n @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}\r\n .panel h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.7rem;color:var(--plum);margin-bottom:4px}\r\n .panel .hint{color:var(--muted);font-size:.9rem;margin-bottom:26px}\r\n\r\n .field{margin-bottom:22px}\r\n .field label.flabel{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wine);margin-bottom:9px;font-weight:500}\r\n .inp,select.inp{\r\n width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:3px;\r\n background:var(--ivory);color:var(--ink);font-family:'Jost',sans-serif;font-size:.95rem;\r\n transition:border-color .25s,box-shadow .25s;\r\n }\r\n .inp:focus,select.inp:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,134,58,.15)}\r\n .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}\r\n\r\n .gamme{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}\r\n .gcard{\r\n cursor:pointer;border:1px solid var(--line);border-radius:3px;padding:20px 18px;text-align:center;\r\n background:var(--ivory);transition:all .25s;position:relative;\r\n }\r\n .gcard:hover{border-color:var(--gold)}\r\n .gcard.sel{border-color:var(--gold);background:#fff;box-shadow:0 12px 30px -18px rgba(176,134,58,.6)}\r\n .gcard .gt{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--plum);font-weight:500}\r\n .gcard .gd{font-size:.74rem;color:var(--muted);margin-top:4px;letter-spacing:.03em}\r\n .gcard.sel .gt{color:var(--wine)}\r\n\r\n .options{display:grid;grid-template-columns:1fr 1fr;gap:12px}\r\n .opt{\r\n display:flex;align-items:flex-start;gap:12px;cursor:pointer;\r\n border:1px solid var(--line);border-radius:3px;padding:14px 15px;background:var(--ivory);\r\n transition:all .22s;\r\n }\r\n .opt:hover{border-color:var(--gold);background:#fff}\r\n .opt.sel{border-color:var(--gold);background:#fff}\r\n .opt .box{\r\n width:18px;height:18px;border:1.5px solid var(--gold);border-radius:3px;flex:0 0 auto;margin-top:2px;\r\n display:flex;align-items:center;justify-content:center;transition:background .2s;\r\n }\r\n .opt.sel .box{background:var(--gold)}\r\n .opt .box svg{opacity:0;transition:opacity .2s}\r\n .opt.sel .box svg{opacity:1}\r\n .opt .otext{flex:1}\r\n .opt .ol{font-size:.9rem;color:var(--ink);font-weight:400;line-height:1.3}\r\n .opt .op{font-size:.72rem;color:var(--muted);margin-top:2px}\r\n\r\n .radiogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}\r\n .rcard{cursor:pointer;border:1px solid var(--line);border-radius:3px;padding:16px 12px;text-align:center;background:var(--ivory);transition:all .22s}\r\n .rcard:hover{border-color:var(--gold)}\r\n .rcard.sel{border-color:var(--gold);background:#fff;box-shadow:0 10px 26px -18px rgba(176,134,58,.6)}\r\n .rcard .rt{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--plum)}\r\n .rcard .rp{font-size:.68rem;color:var(--muted);margin-top:2px}\r\n .subhead{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wine);font-weight:500;margin:4px 0 12px}\r\n\r\n .wz-foot{\r\n display:flex;justify-content:space-between;align-items:center;\r\n padding:22px 40px;border-top:1px solid var(--line);background:var(--ivory);\r\n }\r\n .btn-prev{background:none;border:none;color:var(--muted);font-family:'Jost',sans-serif;\r\n font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .2s}\r\n .btn-prev:hover{color:var(--plum)}\r\n .btn-prev[disabled]{opacity:0;pointer-events:none}\r\n .btn-next{\r\n background:var(--plum);color:var(--ivory);border:none;cursor:pointer;\r\n padding:14px 30px;border-radius:2px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;\r\n font-family:'Jost',sans-serif;transition:background .25s;\r\n }\r\n .btn-next:hover{background:var(--wine)}\r\n\r\n \/* result *\/\r\n .result-hero{text-align:center;margin-bottom:8px}\r\n .result-hero .rlabel{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}\r\n .result-hero .ramount{\r\n font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--plum);\r\n font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.1;margin-top:6px;\r\n }\r\n .result-hero .rrange{color:var(--muted);font-size:.9rem;margin-top:4px}\r\n .recap{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin:22px 0 30px}\r\n .recap div{text-align:center}\r\n .recap .rv{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--wine)}\r\n .recap .rk{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}\r\n .masked{filter:blur(11px);-webkit-user-select:none;user-select:none;pointer-events:none;transition:filter .9s ease}\r\n #resultWrap.revealed .masked{filter:none;user-select:auto;pointer-events:auto}\r\n .masknote{margin-top:14px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:500}\r\n #resultWrap.revealed .masknote{display:none}\r\n .breakdown{border-top:1px solid var(--line);padding-top:22px}\r\n .brow{margin-bottom:16px}\r\n .brow .btop{display:flex;justify-content:space-between;font-size:.86rem;margin-bottom:6px}\r\n .brow .bname{color:var(--ink)}\r\n .brow .bval{color:var(--wine);font-weight:500}\r\n .bar{height:7px;border-radius:100px;background:var(--ivory-2);overflow:hidden}\r\n .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--rose));border-radius:100px;transition:width 1s ease}\r\n .lead{margin-top:30px;background:var(--ivory);border:1px solid var(--line);border-radius:3px;padding:26px}\r\n .lead h4{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--plum);margin-bottom:4px}\r\n .lead p.ls{color:var(--muted);font-size:.86rem;margin-bottom:18px}\r\n .disc{font-size:.74rem;color:var(--muted);text-align:center;margin-top:18px;font-style:italic}\r\n .confirm{display:none;text-align:center;padding:20px;background:#fff;border:1px solid var(--gold);border-radius:3px;margin-top:18px}\r\n .confirm.on{display:block;animation:fade .5s}\r\n .confirm .ct{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--wine)}\r\n\r\n \/* ---------- final cta ---------- *\/\r\n .final{background:linear-gradient(160deg,#3b1a30,#2a1120);color:var(--ivory);text-align:center}\r\n .final h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.2rem,5vw,3.4rem)}\r\n .final h2 em{font-style:italic;color:var(--gold-2)}\r\n .final p{max-width:520px;margin:18px auto 34px;color:rgba(251,246,238,.75)}\r\n\r\n \/* ---------- footer ---------- *\/\r\n footer.site{background:#241019;color:rgba(251,246,238,.7);padding:60px 0 40px}\r\n .foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}\r\n .foot-brand .name{font-family:'Cormorant Garamond',serif;font-size:1.8rem;color:var(--ivory);letter-spacing:.12em}\r\n .foot-brand p{max-width:280px;margin-top:12px;font-size:.86rem}\r\n .foot-col h5{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}\r\n .foot-col a{display:block;font-size:.86rem;margin-bottom:9px;color:rgba(251,246,238,.7);transition:color .2s}\r\n .foot-col a:hover{color:var(--gold-2)}\r\n .foot-bottom{border-top:1px solid rgba(176,134,58,.2);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.76rem;color:rgba(251,246,238,.45)}\r\n\r\n .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}\r\n .reveal.in{opacity:1;transform:none}\r\n\r\n \/* ---------- responsive ---------- *\/\r\n @media(max-width:860px){\r\n .navlinks{display:none}\r\n .burger{display:block}\r\n .cats{grid-template-columns:1fr}\r\n .steps{grid-template-columns:1fr}\r\n .options{grid-template-columns:1fr}\r\n .radiogrid{grid-template-columns:repeat(2,1fr)}\r\n .grid2{grid-template-columns:1fr}\r\n .gamme{grid-template-columns:1fr}\r\n .wz-body,.wz-top,.wz-foot{padding-left:24px;padding-right:24px}\r\n section{padding:80px 0}\r\n .hero{padding-top:150px}\r\n }\r\n @media(prefers-reduced-motion:reduce){\r\n *{animation:none!important;transition:none!important;scroll-behavior:auto!important}\r\n .reveal{opacity:1;transform:none}\r\n }\r\n :focus-visible{outline:2px solid var(--gold);outline-offset:2px}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<header class=\"nav\" id=\"nav\">\r\n <div class=\"wrap nav-inner\">\r\n <a class=\"brand\" href=\"#top\">\r\n <span class=\"star\" aria-hidden=\"true\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 120 120\"><g fill=\"none\" stroke=\"#E4C77E\" stroke-width=\"5\">\r\n <path d=\"M60 8 L74 46 L112 60 L74 74 L60 112 L46 74 L8 60 L46 46 Z\"\/><\/g><\/svg>\r\n <\/span>\r\n <span class=\"name\">Farha<\/span>\r\n <\/a>\r\n <nav class=\"navlinks\">\r\n <a href=\"#prestations\">Prestations<\/a>\r\n <a href=\"#process\">Notre m\u00e9thode<\/a>\r\n <a href=\"#devis\">Devis<\/a>\r\n <a href=\"#contact\">Contact<\/a>\r\n <a href=\"#devis\" class=\"nav-cta\">Mon devis<\/a>\r\n <\/nav>\r\n <button class=\"burger\" aria-label=\"Menu\" onclick=\"document.getElementById('devis').scrollIntoView({behavior:'smooth'})\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><path d=\"M3 6h18M3 12h18M3 18h18\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n<\/header>\r\n\r\n\r\n<section class=\"hero\" id=\"top\">\r\n <div class=\"wrap hero-inner\">\r\n <div class=\"kicker eyebrow\">L'art d'orchestrer votre mariage \u00b7 Maroc<\/div>\r\n <h1>Un seul jour.<br>Une <em>f\u00eate<\/em> inoubliable.<\/h1>\r\n <p class=\"lede\">Farha r\u00e9unit les meilleurs artisans du mariage marocain \u2014 du lieu \u00e0 la neggafa, de la dakka \u00e0 la coordination du jour J \u2014 et coordonne chaque d\u00e9tail \u00e0 votre place.<\/p>\r\n <div class=\"actions\">\r\n <button class=\"btn-gold\" onclick=\"document.getElementById('devis').scrollIntoView({behavior:'smooth'})\">Composer mon devis<\/button>\r\n <a href=\"#prestations\" class=\"btn-ghost\">D\u00e9couvrir nos prestations<\/a>\r\n <\/div>\r\n <div class=\"hero-stats\">\r\n <div class=\"hstat\"><div class=\"n\">4<\/div><div class=\"l\">Univers coordonn\u00e9s<\/div><\/div>\r\n <div class=\"hstat\"><div class=\"n\">80+<\/div><div class=\"l\">Prestations<\/div><\/div>\r\n <div class=\"hstat\"><div class=\"n\">1<\/div><div class=\"l\">Interlocuteur unique<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"prestations\">\r\n <div class=\"wrap\">\r\n <div class=\"sec-head reveal\">\r\n <div class=\"flourish\"><span class=\"rule\"><\/span>\r\n <span class=\"star\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 120 120\"><g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"6\"><path d=\"M60 8 L74 46 L112 60 L74 74 L60 112 L46 74 L8 60 L46 46 Z\"\/><\/g><\/svg><\/span>\r\n <span class=\"rule r\"><\/span><\/div>\r\n <span class=\"eyebrow\">Ce que Farha coordonne<\/span>\r\n <h2>Quatre univers, une seule main experte<\/h2>\r\n <p>Chaque mariage est unique. Nous orchestrons l'ensemble des prestations autour de quatre univers, pour que vous n'ayez plus qu'\u00e0 profiter.<\/p>\r\n <\/div>\r\n\r\n <div class=\"cats\">\r\n <div class=\"cat reveal\">\r\n <div class=\"cat-head\">\r\n <div class=\"cat-illu\" aria-hidden=\"true\"><svg viewBox=\"0 0 64 64\"><g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M8 54 H56\"\/> <path d=\"M16 54 V30\"\/> <path d=\"M48 54 V30\"\/> <path d=\"M16 30 C16 15 24 8 32 8 C40 8 48 15 48 30\"\/> <path d=\"M32 54 V38\"\/> <\/g> <g fill=\"none\" stroke=\"#C98A78\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M21 30 C21 19 26 14 32 14 C38 14 43 19 43 30\"\/> <\/g> <g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"1.6\"> <path d=\"M32 6 l2.2 4 4.5 1.5 -4.5 1.5 -2.2 4 -2.2 -4 -4.5 -1.5 4.5 -1.5 Z\"\/> <\/g><\/svg><\/div>\r\n <div><span class=\"num\">I<\/span><h3>Lieu & Infrastructure<\/h3><\/div>\r\n <\/div>\r\n <p>Le d\u00e9cor de votre journ\u00e9e, jusqu'aux d\u00e9tails invisibles qui font qu'une f\u00eate se d\u00e9roule sans accroc.<\/p>\r\n <div class=\"taglist\">\r\n <span class=\"tag\">Salle \u00b7 Ferme \u00b7 Villa \u00b7 Tente<\/span><span class=\"tag\">Capacit\u00e9 & parking<\/span>\r\n <span class=\"tag\">H\u00e9bergement<\/span><span class=\"tag\">Transport invit\u00e9s<\/span>\r\n <span class=\"tag\">S\u00e9curit\u00e9 & autorisations<\/span><span class=\"tag\">G\u00e9n\u00e9rateur \u00b7 Climatisation<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cat reveal\">\r\n <div class=\"cat-head\">\r\n <div class=\"cat-illu\" aria-hidden=\"true\"><svg viewBox=\"0 0 64 64\"><g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <ellipse cx=\"34\" cy=\"31\" rx=\"11\" ry=\"9.5\"\/> <path d=\"M27 23 C28 18 40 18 41 23\"\/> <circle cx=\"34\" cy=\"16.5\" r=\"1.6\" fill=\"#B0863A\"\/> <path d=\"M23 30 C15 29 12 23 12 18\"\/> <path d=\"M45 27 C53 25 53 37 45 35\"\/> <path d=\"M12 44 H22 L20 55 H14 Z\"\/> <\/g> <g fill=\"none\" stroke=\"#C98A78\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 19 C12 30 15 40 16 44\"\/> <path d=\"M13.5 50 H20.5\"\/> <\/g><\/svg><\/div>\r\n <div><span class=\"num\">II<\/span><h3>Exp\u00e9rience des invit\u00e9s<\/h3><\/div>\r\n <\/div>\r\n <p>Traiteur, service et accueil \u2014 le soin apport\u00e9 \u00e0 ceux que vous aimez, du premier verre au dernier g\u00e2teau.<\/p>\r\n <div class=\"taglist\">\r\n <span class=\"tag\">Traiteur \u00b7 Buffet \u00b7 D\u00eener<\/span><span class=\"tag\">Cocktail & boissons<\/span>\r\n <span class=\"tag\">Th\u00e9 & caf\u00e9 \u00b7 Serveurs<\/span><span class=\"tag\">Vaisselle \u00b7 Tables \u00b7 Plan de table<\/span>\r\n <span class=\"tag\">H\u00f4tesses d'accueil<\/span><span class=\"tag\">Animation enfants \u00b7 Voiturier<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cat reveal\">\r\n <div class=\"cat-head\">\r\n <div class=\"cat-illu\" aria-hidden=\"true\"><svg viewBox=\"0 0 64 64\"><g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M6 51 H58\"\/> <path d=\"M16 51 V45 H48 V51\"\/> <path d=\"M18 45 C18 26 46 26 46 45\"\/> <path d=\"M32 26 V19\"\/> <path d=\"M26 45 V38 H38 V45\"\/> <\/g> <g fill=\"none\" stroke=\"#C98A78\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M21 33 Q25 37 29 33 Q33 37 37 33 Q41 37 43 33\"\/> <\/g> <g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"1.5\"> <path d=\"M32 12 l1.8 3.5 3.8 1.3 -3.8 1.3 -1.8 3.5 -1.8 -3.5 -3.8 -1.3 3.8 -1.3 Z\"\/> <circle cx=\"9\" cy=\"51\" r=\"2\"\/> <circle cx=\"55\" cy=\"51\" r=\"2\"\/> <\/g><\/svg><\/div>\r\n <div><span class=\"num\">III<\/span><h3>Mari\u00e9s & C\u00e9r\u00e9monie<\/h3><\/div>\r\n <\/div>\r\n <p>La neggafa, les takchitas, le rituel Amariya \u2014 la tradition sublim\u00e9e, orchestr\u00e9e au bon tempo.<\/p>\r\n <div class=\"taglist\">\r\n <span class=\"tag\">Neggafa \u00b7 Takchitas \u00b7 Caftans<\/span><span class=\"tag\">Coiffure & maquillage<\/span>\r\n <span class=\"tag\">Soir\u00e9e Henna<\/span><span class=\"tag\">Bijoux & accessoires<\/span>\r\n <span class=\"tag\">Amariya \u00b7 Dakhla \u00b7 Cort\u00e8ge<\/span><span class=\"tag\">Bouquet \u00b7 Alliances<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cat reveal\">\r\n <div class=\"cat-head\">\r\n <div class=\"cat-illu\" aria-hidden=\"true\"><svg viewBox=\"0 0 64 64\"><g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <circle cx=\"32\" cy=\"8\" r=\"2.6\"\/> <path d=\"M32 10.6 V15\"\/> <path d=\"M24 21 C24 16 40 16 40 21\"\/> <path d=\"M25 21 L24 39 C24 45 40 45 40 39 L39 21 Z\"\/> <path d=\"M32 45 V51\"\/> <\/g> <g fill=\"none\" stroke=\"#C98A78\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M28 40 V33 C28 28 36 28 36 33 V40\"\/> <\/g> <g stroke=\"#B0863A\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.7\"> <path d=\"M18 26 l-4 -1.5\"\/> <path d=\"M17 32 l-4.5 0\"\/> <path d=\"M18 38 l-4 1.5\"\/> <path d=\"M46 26 l4 -1.5\"\/> <path d=\"M47 32 l4.5 0\"\/> <path d=\"M46 38 l4 1.5\"\/> <\/g><\/svg><\/div>\r\n <div><span class=\"num\">IV<\/span><h3>Ambiance & Production<\/h3><\/div>\r\n <\/div>\r\n <p>D\u00e9cor, lumi\u00e8re, musique et image \u2014 la mise en sc\u00e8ne qui transforme une soir\u00e9e en souvenir.<\/p>\r\n <div class=\"taglist\">\r\n <span class=\"tag\">D\u00e9coration florale & salle<\/span><span class=\"tag\">Sc\u00e8ne \u00b7 Tr\u00f4ne \u00b7 \u00c9clairage<\/span>\r\n <span class=\"tag\">DJ \u00b7 Orchestre \u00b7 Dakka Marrakchia<\/span><span class=\"tag\">Issawa \u00b7 Gnaoua<\/span>\r\n <span class=\"tag\">Photo \u00b7 Vid\u00e9o \u00b7 Drone \u00b7 LED<\/span><span class=\"tag\">Wedding planner \u00b7 Jour J<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"process\" id=\"process\">\r\n <div class=\"wrap\">\r\n <div class=\"sec-head reveal\">\r\n <div class=\"flourish\"><span class=\"rule\"><\/span>\r\n <span class=\"star\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 120 120\"><g fill=\"none\" stroke=\"#E4C77E\" stroke-width=\"6\"><path d=\"M60 8 L74 46 L112 60 L74 74 L60 112 L46 74 L8 60 L46 46 Z\"\/><\/g><\/svg><\/span>\r\n <span class=\"rule r\"><\/span><\/div>\r\n <span class=\"eyebrow\">Notre m\u00e9thode<\/span>\r\n <h2>De l'id\u00e9e au jour J, sans stress<\/h2>\r\n <\/div>\r\n <div class=\"steps\">\r\n <div class=\"pstep reveal\">\r\n <span class=\"idx\">I<\/span>\r\n <h4>Vous composez<\/h4>\r\n <p>En quelques minutes, vous nous dites votre ville, votre nombre d'invit\u00e9s et les prestations qui comptent pour vous. Vous recevez une estimation imm\u00e9diate.<\/p>\r\n <\/div>\r\n <div class=\"pstep reveal\">\r\n <span class=\"idx\">II<\/span>\r\n <h4>Nous affinons<\/h4>\r\n <p>Un conseiller Farha vous rappelle, ajuste chaque poste selon votre budget et s\u00e9lectionne les artisans les plus adapt\u00e9s \u00e0 votre vision.<\/p>\r\n <\/div>\r\n <div class=\"pstep reveal\">\r\n <span class=\"idx\">III<\/span>\r\n <h4>Nous orchestrons<\/h4>\r\n <p>Le jour J, notre coordination g\u00e8re prestataires, timing et impr\u00e9vus. Vous \u00eates invit\u00e9s \u00e0 votre propre mariage.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"devis\" id=\"devis\">\r\n <div class=\"wrap\">\r\n <div class=\"sec-head reveal\">\r\n <div class=\"flourish\"><span class=\"rule\"><\/span>\r\n <span class=\"star\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 120 120\"><g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"6\"><path d=\"M60 8 L74 46 L112 60 L74 74 L60 112 L46 74 L8 60 L46 46 Z\"\/><\/g><\/svg><\/span>\r\n <span class=\"rule r\"><\/span><\/div>\r\n <span class=\"eyebrow\">Votre devis sur mesure<\/span>\r\n <h2>Composez votre mariage, poste par poste<\/h2>\r\n <p>S\u00e9lectionnez ce qui vous ressemble. L'estimation se met \u00e0 jour en temps r\u00e9el. Aucun engagement.<\/p>\r\n <\/div>\r\n\r\n <div class=\"wizard reveal\" id=\"wizard\">\r\n <div class=\"wz-top\">\r\n <div class=\"wz-title\">G\u00e9n\u00e9rateur de devis Farha<\/div>\r\n <div class=\"wz-sub\">Une estimation indicative, personnalis\u00e9e en 6 \u00e9tapes.<\/div>\r\n <div class=\"progress\" id=\"progress\"><\/div>\r\n <div class=\"steplabels\" id=\"steplabels\">\r\n <span>Essentiels<\/span><span>Lieu<\/span><span>Invit\u00e9s<\/span><span>C\u00e9r\u00e9monie<\/span><span>Ambiance<\/span><span>Devis<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"wz-body\" id=\"wzbody\">\r\n \r\n <div class=\"panel on\" data-step=\"0\">\r\n <h3>Les essentiels<\/h3>\r\n <p class=\"hint\">Quelques rep\u00e8res pour calibrer votre estimation.<\/p>\r\n <div class=\"grid2\">\r\n <div class=\"field\">\r\n <label class=\"flabel\" for=\"ville\">Ville de la f\u00eate<\/label>\r\n <select class=\"inp\" id=\"ville\">\r\n <option value=\"Casablanca\">Casablanca<\/option>\r\n <option value=\"Rabat\">Rabat<\/option>\r\n <option value=\"Marrakech\">Marrakech<\/option>\r\n <option value=\"Tanger\">Tanger<\/option>\r\n <option value=\"F\u00e8s\">F\u00e8s<\/option>\r\n <option value=\"Agadir\">Agadir<\/option>\r\n <option value=\"Autre\">Autre ville<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"field\">\r\n <label class=\"flabel\" for=\"invites\">Nombre d'invit\u00e9s<\/label>\r\n <input class=\"inp\" id=\"invites\" type=\"number\" min=\"20\" max=\"2000\" step=\"10\" value=\"300\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"field\">\r\n <label class=\"flabel\" for=\"datem\">Date approximative<\/label>\r\n <input class=\"inp\" id=\"datem\" type=\"month\" \/>\r\n <\/div>\r\n <div class=\"field\">\r\n <label class=\"flabel\">Gamme souhait\u00e9e<\/label>\r\n <div class=\"gamme\" id=\"gamme\">\r\n <div class=\"gcard\" data-g=\"ess\"><div class=\"gt\">Essentielle<\/div><div class=\"gd\">Belle & ma\u00eetris\u00e9e<\/div><\/div>\r\n <div class=\"gcard sel\" data-g=\"prem\"><div class=\"gt\">Premium<\/div><div class=\"gd\">Raffin\u00e9e & g\u00e9n\u00e9reuse<\/div><\/div>\r\n <div class=\"gcard\" data-g=\"prest\"><div class=\"gt\">Prestige<\/div><div class=\"gd\">Sur mesure, sans limite<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"panel\" data-step=\"1\">\r\n <h3>Lieu & Infrastructure<\/h3>\r\n <p class=\"hint\">Choisissez le cadre, puis les indispensables logistiques.<\/p>\r\n <div class=\"subhead\">Type de lieu<\/div>\r\n <div class=\"radiogrid\" id=\"lieuradio\"><\/div>\r\n <div class=\"subhead\">Logistique<\/div>\r\n <div class=\"options\" data-cat=\"1\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"panel\" data-step=\"2\">\r\n <h3>Exp\u00e9rience des invit\u00e9s<\/h3>\r\n <p class=\"hint\">Traiteur, service et petites attentions.<\/p>\r\n <div class=\"options\" data-cat=\"2\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"panel\" data-step=\"3\">\r\n <h3>Mari\u00e9s & C\u00e9r\u00e9monie<\/h3>\r\n <p class=\"hint\">La tradition, orchestr\u00e9e avec soin.<\/p>\r\n <div class=\"options\" data-cat=\"3\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"panel\" data-step=\"4\">\r\n <h3>Ambiance & Production<\/h3>\r\n <p class=\"hint\">D\u00e9cor, musique et images de votre soir\u00e9e.<\/p>\r\n <div class=\"options\" data-cat=\"4\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"panel\" data-step=\"5\" id=\"resultWrap\">\r\n <div class=\"result-hero\">\r\n <div class=\"rlabel\">Votre estimation personnalis\u00e9e<\/div>\r\n <div class=\"ramount masked\" id=\"ramount\">000 000 DH<\/div>\r\n <div class=\"rrange masked\" id=\"rrange\">Fourchette masqu\u00e9e<\/div>\r\n <div class=\"masknote\" id=\"masknote\">\ud83d\udd12 Montant r\u00e9v\u00e9l\u00e9 apr\u00e8s saisie de votre e-mail<\/div>\r\n <\/div>\r\n <div class=\"recap\" id=\"recap\"><\/div>\r\n <div class=\"breakdown\" id=\"breakdown\"><\/div>\r\n\r\n <div class=\"lead\">\r\n <h4>Recevez votre devis chiffr\u00e9 par e-mail<\/h4>\r\n <p class=\"ls\">Saisissez votre e-mail pour r\u00e9v\u00e9ler le montant exact et recevoir le devis d\u00e9taill\u00e9, poste par poste. Un conseiller Farha vous rappelle sous 24 heures.<\/p>\r\n <div class=\"grid2\">\r\n <div class=\"field\" style=\"margin-bottom:14px\"><input class=\"inp\" id=\"lname\" placeholder=\"Nom complet\" \/><\/div>\r\n <div class=\"field\" style=\"margin-bottom:14px\"><input class=\"inp\" id=\"lphone\" placeholder=\"T\u00e9l\u00e9phone\" \/><\/div>\r\n <\/div>\r\n <div class=\"field\" style=\"margin-bottom:16px\"><input class=\"inp\" id=\"lemail\" type=\"email\" placeholder=\"Adresse e-mail\" \/><\/div>\r\n <button class=\"btn-gold\" style=\"width:100%\" id=\"sendlead\">Afficher & recevoir mon devis<\/button>\r\n <div class=\"confirm\" id=\"confirm\">\r\n <div class=\"ct\">Votre devis est d\u00e9bloqu\u00e9.<\/div>\r\n <p style=\"margin-top:6px;color:var(--muted);font-size:.88rem\">Le d\u00e9tail chiffr\u00e9 part vers votre bo\u00eete mail, et un conseiller Farha vous contacte <b style=\"color:var(--wine)\">sous 24 heures<\/b> pour construire votre f\u00eate.<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"disc\">Estimation indicative g\u00e9n\u00e9r\u00e9e automatiquement \u00e0 partir de vos choix. Le devis d\u00e9finitif est \u00e9tabli apr\u00e8s \u00e9change avec un conseiller Farha.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"wz-foot\">\r\n <button class=\"btn-prev\" id=\"prev\" disabled>\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n <button class=\"btn-next\" id=\"next\">Continuer \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"final\" id=\"contact\">\r\n <div class=\"wrap\">\r\n <div class=\"flourish reveal\" style=\"margin-bottom:24px\"><span class=\"rule\"><\/span>\r\n <span class=\"star\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 120 120\"><g fill=\"none\" stroke=\"#E4C77E\" stroke-width=\"6\"><path d=\"M60 8 L74 46 L112 60 L74 74 L60 112 L46 74 L8 60 L46 46 Z\"\/><\/g><\/svg><\/span>\r\n <span class=\"rule r\"><\/span><\/div>\r\n <h2 class=\"reveal\">Et si votre plus beau jour<br>commen\u00e7ait <em>aujourd'hui<\/em> ?<\/h2>\r\n <p class=\"reveal\">Parlez-nous de votre projet. Un conseiller Farha vous accompagne, de la premi\u00e8re id\u00e9e jusqu'\u00e0 la derni\u00e8re danse.<\/p>\r\n <div class=\"reveal\"><button class=\"btn-gold\" onclick=\"document.getElementById('devis').scrollIntoView({behavior:'smooth'})\">D\u00e9marrer mon devis<\/button><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<footer class=\"site\">\r\n <div class=\"wrap\">\r\n <div class=\"foot-grid\">\r\n <div class=\"foot-brand\">\r\n <div class=\"name\">Farha<\/div>\r\n <p>L'agence qui orchestre les mariages marocains \u2014 du lieu \u00e0 la lumi\u00e8re, avec un seul interlocuteur.<\/p>\r\n <\/div>\r\n <div class=\"foot-col\">\r\n <h5>Prestations<\/h5>\r\n <a href=\"#prestations\">Lieu & Infrastructure<\/a>\r\n <a href=\"#prestations\">Exp\u00e9rience des invit\u00e9s<\/a>\r\n <a href=\"#prestations\">Mari\u00e9s & C\u00e9r\u00e9monie<\/a>\r\n <a href=\"#prestations\">Ambiance & Production<\/a>\r\n <\/div>\r\n <div class=\"foot-col\">\r\n <h5>Agence<\/h5>\r\n <a href=\"#process\">Notre m\u00e9thode<\/a>\r\n <a href=\"#devis\">G\u00e9n\u00e9rer un devis<\/a>\r\n <a href=\"#contact\">Nous contacter<\/a>\r\n <\/div>\r\n <div class=\"foot-col\">\r\n <h5>Contact<\/h5>\r\n <a href=\"mailto:contact@farha.ma\">contact@farha.ma<\/a>\r\n <a href=\"#\">+212 5 00 00 00 00<\/a>\r\n <a href=\"#\">Casablanca \u00b7 Maroc<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"foot-bottom\">\r\n <span>\u00a9 2026 Farha \u2014 farha.ma. Tous droits r\u00e9serv\u00e9s.<\/span>\r\n <span>Mentions l\u00e9gales \u00b7 Confidentialit\u00e9<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n(function(){\r\n \"use strict\";\r\n\r\n \/* ---------- pricing model (MAD, base = gamme Essentielle) ---------- *\/\r\n var GAMME = { ess:{mult:1.0,label:\"Essentielle\"}, prem:{mult:1.55,label:\"Premium\"}, prest:{mult:2.4,label:\"Prestige\"} };\r\n var CITY = { Casablanca:1.15, Rabat:1.12, Marrakech:1.20, Tanger:1.06, F\u00e8s:1.0, Agadir:1.05, Autre:1.0 };\r\n\r\n var LIEU = [\r\n { id:\"salle\", label:\"Salle des f\u00eates\", base:20000 },\r\n { id:\"ferme\", label:\"Ferme\", base:34000 },\r\n { id:\"villa\", label:\"Villa priv\u00e9e\", base:40000 },\r\n { id:\"tente\", label:\"Tente ca\u00efdale\", base:28000 }\r\n ];\r\n\r\n \/\/ per: 'flat' or 'guest' | cat 1-4\r\n var ITEMS = [\r\n \/\/ 1 \u2014 Lieu & Infrastructure (logistique)\r\n { id:\"heberg\", cat:1, label:\"H\u00e9bergement des invit\u00e9s\", per:\"guest\", base:110, def:false },\r\n { id:\"transport\",cat:1, label:\"Transport \/ navettes invit\u00e9s\", per:\"flat\", base:9000, def:false },\r\n { id:\"generateur\",cat:1,label:\"G\u00e9n\u00e9rateur \u00e9lectrique\", per:\"flat\", base:4500, def:true },\r\n { id:\"clim\", cat:1, label:\"Climatisation \/ chauffage\", per:\"flat\", base:6000, def:false },\r\n { id:\"securite\", cat:1, label:\"S\u00e9curit\u00e9 & voiturier\", per:\"flat\", base:6500, def:true },\r\n { id:\"sanit\", cat:1, label:\"Sanitaires & nettoyage\", per:\"flat\", base:4000, def:true },\r\n { id:\"autor\", cat:1, label:\"Autorisations & assurance\", per:\"flat\", base:5000, def:true },\r\n \/\/ 2 \u2014 Exp\u00e9rience des invit\u00e9s\r\n { id:\"traiteur\", cat:2, label:\"Traiteur \u2014 d\u00eener complet\", per:\"guest\", base:300, def:true },\r\n { id:\"cocktail\", cat:2, label:\"Cocktail & verrines\", per:\"guest\", base:65, def:true },\r\n { id:\"boissons\", cat:2, label:\"Th\u00e9, caf\u00e9 & boissons\", per:\"guest\", base:28, def:true },\r\n { id:\"vaisselle\",cat:2, label:\"Vaisselle, tables & chaises\", per:\"guest\", base:48, def:true },\r\n { id:\"gateau\", cat:2, label:\"G\u00e2teau de mariage\", per:\"flat\", base:4500, def:true },\r\n { id:\"hotesses\", cat:2, label:\"H\u00f4tesses d'accueil & plan de table\", per:\"flat\", base:5000, def:true },\r\n { id:\"cadeaux\", cat:2, label:\"Cadeaux invit\u00e9s\", per:\"guest\", base:35, def:false },\r\n { id:\"enfants\", cat:2, label:\"Animation enfants\", per:\"flat\", base:3500, def:false },\r\n \/\/ 3 \u2014 Mari\u00e9s & C\u00e9r\u00e9monie\r\n { id:\"neggafa\", cat:3, label:\"Neggafa, takchitas & caftans\", per:\"flat\", base:16000, def:true },\r\n { id:\"costume\", cat:3, label:\"Costume du mari\u00e9\", per:\"flat\", base:4500, def:true },\r\n { id:\"coif\", cat:3, label:\"Coiffure & maquillage mari\u00e9e\", per:\"flat\", base:5500, def:true },\r\n { id:\"henna\", cat:3, label:\"Soir\u00e9e Henna\", per:\"flat\", base:7000, def:true },\r\n { id:\"bijoux\", cat:3, label:\"Bijoux & accessoires (location)\", per:\"flat\", base:5500, def:false },\r\n { id:\"amariya\", cat:3, label:\"Rituel Amariya & Dakhla\", per:\"flat\", base:8500, def:true },\r\n { id:\"bouquet\", cat:3, label:\"Bouquet & alliances\", per:\"flat\", base:2800, def:true },\r\n { id:\"cortege\", cat:3, label:\"Cort\u00e8ge & voiture des mari\u00e9s\", per:\"flat\", base:4500, def:false },\r\n \/\/ 4 \u2014 Ambiance & Production\r\n { id:\"deco\", cat:4, label:\"D\u00e9coration florale & salle\", per:\"flat\", base:22000, def:true },\r\n { id:\"scene\", cat:4, label:\"Sc\u00e8ne & tr\u00f4ne\", per:\"flat\", base:9500, def:true },\r\n { id:\"eclair\", cat:4, label:\"\u00c9clairage & sonorisation\", per:\"flat\", base:11000, def:true },\r\n { id:\"dj\", cat:4, label:\"DJ\", per:\"flat\", base:7500, def:true },\r\n { id:\"orchestre\",cat:4, label:\"Orchestre (cha\u00e2bi \/ andalou)\", per:\"flat\", base:14000, def:false },\r\n { id:\"dakka\", cat:4, label:\"Dakka Marrakchia\", per:\"flat\", base:6500, def:true },\r\n { id:\"issawa\", cat:4, label:\"Issawa \/ Gnaoua\", per:\"flat\", base:6500, def:false },\r\n { id:\"photo\", cat:4, label:\"Photographe\", per:\"flat\", base:9500, def:true },\r\n { id:\"video\", cat:4, label:\"Vid\u00e9aste & montage\", per:\"flat\", base:12000, def:true },\r\n { id:\"drone\", cat:4, label:\"Drone\", per:\"flat\", base:3800, def:false },\r\n { id:\"led\", cat:4, label:\"\u00c9cran LED \/ mapping\", per:\"flat\", base:8500, def:false },\r\n { id:\"effets\", cat:4, label:\"Effets sp\u00e9ciaux (feux froids)\", per:\"flat\", base:3200, def:false },\r\n { id:\"planner\", cat:4, label:\"Wedding planner & coordination jour J\", per:\"flat\", base:19000, def:true }\r\n ];\r\n\r\n var CAT_NAMES = { 1:\"Lieu & Infrastructure\", 2:\"Exp\u00e9rience des invit\u00e9s\", 3:\"Mari\u00e9s & C\u00e9r\u00e9monie\", 4:\"Ambiance & Production\" };\r\n\r\n \/* ---------- state ---------- *\/\r\n var state = {\r\n ville:\"Casablanca\", invites:300, gamme:\"prem\", lieu:\"ferme\",\r\n selected:{}\r\n };\r\n ITEMS.forEach(function(it){ state.selected[it.id] = !!it.def; });\r\n\r\n var CHECK_SVG = '<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"3\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>';\r\n\r\n \/* ---------- render options ---------- *\/\r\n function money(n){ return Math.round(n\/100)*100; }\r\n function fmt(n){ return money(n).toLocaleString('fr-FR') + ' DH'; }\r\n\r\n function itemCost(it){\r\n var g = GAMME[state.gamme].mult;\r\n if(it.per === \"guest\"){ return it.base * state.invites * g; }\r\n return it.base * g * CITY[state.ville];\r\n }\r\n function lieuCost(){\r\n var l = LIEU.filter(function(x){return x.id===state.lieu;})[0];\r\n if(!l) return 0;\r\n return l.base * GAMME[state.gamme].mult * CITY[state.ville];\r\n }\r\n\r\n function renderLieu(){\r\n var c = document.getElementById(\"lieuradio\");\r\n c.innerHTML = \"\";\r\n LIEU.forEach(function(l){\r\n var d = document.createElement(\"div\");\r\n d.className = \"rcard\" + (state.lieu===l.id ? \" sel\":\"\");\r\n d.innerHTML = '<div class=\"rt\">'+l.label+'<\/div>';\r\n d.onclick = function(){ state.lieu = l.id; renderLieu(); updateTotals(); };\r\n c.appendChild(d);\r\n });\r\n }\r\n\r\n function renderOptions(){\r\n document.querySelectorAll('.options[data-cat]').forEach(function(box){\r\n var cat = parseInt(box.getAttribute(\"data-cat\"),10);\r\n box.innerHTML = \"\";\r\n ITEMS.filter(function(i){return i.cat===cat;}).forEach(function(it){\r\n var sel = state.selected[it.id];\r\n var el = document.createElement(\"div\");\r\n el.className = \"opt\" + (sel?\" sel\":\"\");\r\n el.setAttribute(\"role\",\"checkbox\");\r\n el.setAttribute(\"tabindex\",\"0\");\r\n el.setAttribute(\"aria-checked\", sel?\"true\":\"false\");\r\n el.innerHTML = '<span class=\"box\">'+CHECK_SVG+'<\/span><span class=\"otext\"><span class=\"ol\">'+it.label+\r\n '<\/span><span class=\"op\">'+ (it.per===\"guest\" ? \"au couvert\" : \"forfait\") +'<\/span><\/span>';\r\n function toggle(){\r\n state.selected[it.id] = !state.selected[it.id];\r\n renderOptions(); updateTotals();\r\n }\r\n el.onclick = toggle;\r\n el.onkeydown = function(e){ if(e.key===\" \"||e.key===\"Enter\"){ e.preventDefault(); toggle(); } };\r\n box.appendChild(el);\r\n });\r\n });\r\n }\r\n\r\n \/* ---------- totals ---------- *\/\r\n function compute(){\r\n var byCat = {1:0,2:0,3:0,4:0};\r\n byCat[1] += lieuCost();\r\n ITEMS.forEach(function(it){\r\n if(state.selected[it.id]) byCat[it.cat] += itemCost(it);\r\n });\r\n var subtotal = byCat[1]+byCat[2]+byCat[3]+byCat[4];\r\n return { byCat:byCat, subtotal:subtotal, low:subtotal*0.9, high:subtotal*1.15 };\r\n }\r\n function updateTotals(){ \/* montants r\u00e9v\u00e9l\u00e9s uniquement apr\u00e8s saisie de l'e-mail *\/ }\r\n\r\n \/* ---------- result panel ---------- *\/\r\n function renderResult(){\r\n var r = compute();\r\n document.getElementById(\"ramount\").textContent = fmt(r.subtotal);\r\n document.getElementById(\"rrange\").textContent = \"Fourchette : \"+fmt(r.low)+\" \u2014 \"+fmt(r.high);\r\n\r\n var recap = document.getElementById(\"recap\");\r\n recap.innerHTML =\r\n '<div><div class=\"rv\">'+state.invites+'<\/div><div class=\"rk\">Invit\u00e9s<\/div><\/div>'+\r\n '<div><div class=\"rv\">'+state.ville+'<\/div><div class=\"rk\">Ville<\/div><\/div>'+\r\n '<div><div class=\"rv\">'+GAMME[state.gamme].label+'<\/div><div class=\"rk\">Gamme<\/div><\/div>';\r\n\r\n var bd = document.getElementById(\"breakdown\");\r\n bd.innerHTML = \"\";\r\n var max = Math.max(r.byCat[1],r.byCat[2],r.byCat[3],r.byCat[4],1);\r\n [1,2,3,4].forEach(function(c){\r\n var pct = Math.round(r.byCat[c]\/max*100);\r\n var row = document.createElement(\"div\");\r\n row.className = \"brow\";\r\n row.innerHTML = '<div class=\"btop\"><span class=\"bname\">'+CAT_NAMES[c]+'<\/span><span class=\"bval masked\">'+fmt(r.byCat[c])+'<\/span><\/div>'+\r\n '<div class=\"bar\"><span style=\"width:0%\"><\/span><\/div>';\r\n bd.appendChild(row);\r\n setTimeout(function(){ row.querySelector(\".bar span\").style.width = pct+\"%\"; }, 60);\r\n });\r\n }\r\n\r\n \/* ---------- wizard nav ---------- *\/\r\n var step = 0, MAX = 5;\r\n var panels = document.querySelectorAll(\".panel\");\r\n var progress = document.getElementById(\"progress\");\r\n var stepLabels = document.getElementById(\"steplabels\").children;\r\n for(var i=0;i<=MAX;i++){ var d=document.createElement(\"div\"); d.className=\"pdot\"+(i===0?\" on\":\"\"); progress.appendChild(d); }\r\n\r\n function show(n){\r\n step = n;\r\n panels.forEach(function(p){ p.classList.toggle(\"on\", parseInt(p.getAttribute(\"data-step\"),10)===n); });\r\n for(var i=0;i<progress.children.length;i++){ progress.children[i].classList.toggle(\"on\", i<=n); }\r\n for(var j=0;j<stepLabels.length;j++){ stepLabels[j].classList.toggle(\"on\", j===n); }\r\n document.getElementById(\"prev\").disabled = (n===0);\r\n var next = document.getElementById(\"next\");\r\n if(n===MAX){ next.textContent = \"Recommencer\"; renderResult(); }\r\n else { next.textContent = (n===MAX-1 ? \"Voir mon estimation \u2192\" : \"Continuer \u2192\"); }\r\n document.getElementById(\"wizard\").scrollIntoView({behavior:\"smooth\",block:\"start\"});\r\n }\r\n\r\n document.getElementById(\"next\").onclick = function(){\r\n if(step===MAX){ resetAll(); return; }\r\n \/\/ read essentials on leaving step 0\r\n if(step===0){\r\n state.ville = document.getElementById(\"ville\").value;\r\n var g = parseInt(document.getElementById(\"invites\").value,10);\r\n state.invites = (isNaN(g)||g<20) ? 20 : (g>2000?2000:g);\r\n document.getElementById(\"invites\").value = state.invites;\r\n renderLieu(); renderOptions();\r\n }\r\n show(step+1);\r\n };\r\n document.getElementById(\"prev\").onclick = function(){ if(step>0) show(step-1); };\r\n\r\n function resetAll(){\r\n state.gamme=\"prem\"; state.lieu=\"ferme\"; state.ville=\"Casablanca\"; state.invites=300;\r\n ITEMS.forEach(function(it){ state.selected[it.id]=!!it.def; });\r\n document.getElementById(\"ville\").value=\"Casablanca\";\r\n document.getElementById(\"invites\").value=300;\r\n document.querySelectorAll(\"#gamme .gcard\").forEach(function(x){ x.classList.toggle(\"sel\", x.getAttribute(\"data-g\")===\"prem\"); });\r\n document.getElementById(\"confirm\").classList.remove(\"on\");\r\n document.getElementById(\"resultWrap\").classList.remove(\"revealed\");\r\n var sl=document.getElementById(\"sendlead\"); sl.disabled=false; sl.textContent=\"Afficher & recevoir mon devis\";\r\n document.getElementById(\"lname\").value=\"\"; document.getElementById(\"lphone\").value=\"\"; document.getElementById(\"lemail\").value=\"\";\r\n renderLieu(); renderOptions(); updateTotals(); show(0);\r\n }\r\n\r\n \/* gamme selector *\/\r\n document.querySelectorAll(\"#gamme .gcard\").forEach(function(card){\r\n card.onclick = function(){\r\n document.querySelectorAll(\"#gamme .gcard\").forEach(function(x){x.classList.remove(\"sel\");});\r\n card.classList.add(\"sel\");\r\n state.gamme = card.getAttribute(\"data-g\");\r\n renderLieu(); renderOptions(); updateTotals();\r\n };\r\n });\r\n\r\n \/* lead form *\/\r\n document.getElementById(\"sendlead\").onclick = function(){\r\n var em = document.getElementById(\"lemail\").value.trim();\r\n var nm = document.getElementById(\"lname\").value.trim();\r\n if(!nm || !\/.+@.+\\..+\/.test(em)){\r\n alert(\"Merci d'indiquer votre nom et une adresse e-mail valide.\");\r\n return;\r\n }\r\n document.getElementById(\"resultWrap\").classList.add(\"revealed\");\r\n document.getElementById(\"confirm\").classList.add(\"on\");\r\n this.textContent = \"Devis d\u00e9bloqu\u00e9 \u2713\";\r\n this.disabled = true;\r\n };\r\n\r\n \/* ---------- nav solidify + reveal ---------- *\/\r\n var nav = document.getElementById(\"nav\");\r\n window.addEventListener(\"scroll\", function(){\r\n nav.classList.toggle(\"solid\", window.scrollY > 40);\r\n });\r\n var io = new IntersectionObserver(function(entries){\r\n entries.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add(\"in\"); io.unobserve(e.target); } });\r\n }, { threshold:.14 });\r\n document.querySelectorAll(\".reveal\").forEach(function(el){ io.observe(el); });\r\n\r\n \/* init *\/\r\n renderLieu(); renderOptions(); updateTotals();\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/farha.ma\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/farha.ma\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/farha.ma\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/farha.ma\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/farha.ma\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":1,"href":"https:\/\/farha.ma\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/farha.ma\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/farha.ma\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":12,"date":"2026-07-03T23:22:19","date_gmt":"2026-07-03T23:22:19","guid":{"rendered":"https:\/\/farha.ma\/?page_id=12"},"modified":"2026-07-03T23:22:20","modified_gmt":"2026-07-03T23:22:20","slug":"farha","status":"publish","type":"page","link":"https:\/\/farha.ma\/","title":{"rendered":"Farha"},"content":{"rendered":"\r\n\r\n\r\n\r\n\r\nFarha \u2014 L'art d'orchestrer votre mariage<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --ivory:#FBF6EE;\r\n --ivory-2:#F4EBDD;\r\n --plum:#331528;\r\n --plum-2:#43203A;\r\n --wine:#7A2A40;\r\n --gold:#B0863A;\r\n --gold-soft:#CBA35A;\r\n --gold-2:#E4C77E;\r\n --rose:#C98A78;\r\n --ink:#2A2320;\r\n --muted:#8A7A6C;\r\n --line:rgba(176,134,58,.28);\r\n }\r\n *{box-sizing:border-box;margin:0;padding:0}\r\n html{scroll-behavior:smooth}\r\n body{\r\n background:var(--ivory);\r\n color:var(--ink);\r\n font-family:'Jost',system-ui,sans-serif;\r\n font-weight:300;\r\n line-height:1.65;\r\n -webkit-font-smoothing:antialiased;\r\n overflow-x:hidden;\r\n }\r\n .serif{font-family:'Cormorant Garamond',Georgia,serif}\r\n .eyebrow{\r\n font-family:'Jost',sans-serif;\r\n font-weight:500;\r\n font-size:.72rem;\r\n letter-spacing:.42em;\r\n text-transform:uppercase;\r\n color:var(--gold);\r\n }\r\n .wrap{max-width:1160px;margin:0 auto;padding:0 28px}\r\n a{color:inherit;text-decoration:none}\r\n img{max-width:100%}\r\n\r\n \/* ---------- zellige star motif ---------- *\/\r\n .star{display:inline-block;line-height:0}\r\n .star svg{display:block}\r\n\r\n \/* ---------- divider flourish ---------- *\/\r\n .flourish{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto}\r\n .flourish .rule{height:1px;width:min(120px,22vw);background:linear-gradient(90deg,transparent,var(--gold))}\r\n .flourish .rule.r{background:linear-gradient(90deg,var(--gold),transparent)}\r\n\r\n \/* ---------- nav ---------- *\/\r\n header.nav{\r\n position:sticky;top:0;z-index:60;\r\n background:rgba(51,21,40,.0);\r\n transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease;\r\n border-bottom:1px solid transparent;\r\n }\r\n header.nav.solid{\r\n background:rgba(51,21,40,.92);\r\n backdrop-filter:blur(10px);\r\n border-bottom:1px solid rgba(176,134,58,.25);\r\n }\r\n .nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px}\r\n .brand{display:flex;align-items:center;gap:12px;color:var(--ivory)}\r\n .brand .name{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.7rem;letter-spacing:.14em}\r\n .navlinks{display:flex;gap:34px;align-items:center}\r\n .navlinks a{color:rgba(251,246,238,.82);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;transition:color .25s}\r\n .navlinks a:hover{color:var(--gold-2)}\r\n .nav-cta{\r\n border:1px solid var(--gold);color:var(--gold-2);\r\n padding:11px 22px;border-radius:2px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;\r\n transition:background .3s,color .3s;\r\n }\r\n .nav-cta:hover{background:var(--gold);color:var(--plum)}\r\n .burger{display:none;background:none;border:none;color:var(--ivory);cursor:pointer}\r\n\r\n \/* ---------- hero ---------- *\/\r\n .hero{\r\n position:relative;\r\n background:\r\n radial-gradient(120% 90% at 82% 8%,rgba(122,42,64,.55),transparent 60%),\r\n radial-gradient(90% 80% at 6% 96%,rgba(176,134,58,.20),transparent 55%),\r\n linear-gradient(160deg,#3b1a30,#2a1120 70%);\r\n color:var(--ivory);\r\n padding:120px 0 130px;\r\n overflow:hidden;\r\n margin-top:-78px;\r\n padding-top:200px;\r\n }\r\n .hero::before{\r\n content:\"\";position:absolute;inset:0;opacity:.10;pointer-events:none;\r\n background-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23E4C77E' stroke-width='1'><path d='M60 8 L74 46 L112 60 L74 74 L60 112 L46 74 L8 60 L46 46 Z'\/><path d='M60 20 L69 51 L100 60 L69 69 L60 100 L51 69 L20 60 L51 51 Z'\/><\/g><\/svg>\");\r\n background-size:150px 150px;\r\n }\r\n .hero-inner{position:relative;text-align:center;max-width:880px;margin:0 auto}\r\n .hero .kicker{margin-bottom:26px}\r\n .hero h1{\r\n font-family:'Cormorant Garamond',serif;font-weight:300;\r\n font-size:clamp(3rem,8vw,6.2rem);line-height:1.02;letter-spacing:.01em;\r\n }\r\n .hero h1 em{font-style:italic;color:var(--gold-2)}\r\n .hero p.lede{\r\n max-width:560px;margin:30px auto 0;color:rgba(251,246,238,.80);\r\n font-size:1.08rem;font-weight:300;\r\n }\r\n .hero .actions{margin-top:44px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}\r\n .btn-gold{\r\n background:linear-gradient(180deg,var(--gold-2),var(--gold));\r\n color:#3a1a2c;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;\r\n padding:16px 34px;border-radius:2px;border:none;cursor:pointer;\r\n box-shadow:0 14px 34px -14px rgba(176,134,58,.7);\r\n transition:transform .25s,box-shadow .25s;\r\n }\r\n .btn-gold:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(176,134,58,.85)}\r\n .btn-ghost{\r\n border:1px solid rgba(228,199,126,.5);color:var(--ivory);\r\n padding:16px 30px;border-radius:2px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;\r\n transition:border-color .3s,color .3s;\r\n }\r\n .btn-ghost:hover{border-color:var(--gold-2);color:var(--gold-2)}\r\n .hero-stats{\r\n margin-top:66px;display:flex;justify-content:center;gap:56px;flex-wrap:wrap;\r\n position:relative;\r\n }\r\n .hstat{text-align:center}\r\n .hstat .n{font-family:'Cormorant Garamond',serif;font-size:2.4rem;color:var(--gold-2);font-weight:400}\r\n .hstat .l{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(251,246,238,.6);margin-top:4px}\r\n\r\n \/* ---------- section shell ---------- *\/\r\n section{padding:110px 0}\r\n .sec-head{text-align:center;max-width:680px;margin:0 auto 60px}\r\n .sec-head .flourish{margin-bottom:22px}\r\n .sec-head h2{\r\n font-family:'Cormorant Garamond',serif;font-weight:300;\r\n font-size:clamp(2.3rem,4.6vw,3.4rem);line-height:1.08;margin-top:14px;color:var(--plum);\r\n }\r\n .sec-head p{margin-top:16px;color:var(--muted);font-size:1.02rem}\r\n\r\n \/* ---------- prestations ---------- *\/\r\n .cats{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}\r\n .cat{\r\n position:relative;background:#fff;border:1px solid var(--line);\r\n padding:40px 38px 36px;border-radius:3px;overflow:hidden;\r\n transition:transform .4s,box-shadow .4s;\r\n }\r\n .cat::after{\r\n content:\"\";position:absolute;top:0;left:0;right:0;height:3px;\r\n background:linear-gradient(90deg,var(--gold),var(--rose));\r\n transform:scaleX(0);transform-origin:left;transition:transform .5s;\r\n }\r\n .cat:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(51,21,40,.35)}\r\n .cat:hover::after{transform:scaleX(1)}\r\n .cat .num{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--gold);letter-spacing:.2em}\r\n .cat h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.8rem;color:var(--plum);margin:6px 0 14px}\r\n .cat-head{display:flex;align-items:center;gap:18px;margin-bottom:14px}\r\n .cat-illu{\r\n flex:0 0 auto;width:84px;height:84px;border-radius:50%;\r\n background:radial-gradient(circle at 50% 34%, #ffffff, var(--ivory-2));\r\n border:1px solid var(--line);\r\n display:flex;align-items:center;justify-content:center;\r\n transition:transform .45s ease,box-shadow .45s ease;\r\n }\r\n .cat:hover .cat-illu{transform:scale(1.06) rotate(-3deg);box-shadow:0 12px 26px -14px rgba(176,134,58,.55)}\r\n .cat-illu svg{width:54px;height:54px;display:block}\r\n .cat-head .num{display:block}\r\n .cat-head h3{margin:2px 0 0}\r\n .cat p{color:var(--muted);font-size:.95rem;margin-bottom:20px}\r\n .taglist{display:flex;flex-wrap:wrap;gap:8px}\r\n .tag{\r\n font-size:.72rem;letter-spacing:.05em;color:var(--wine);\r\n background:var(--ivory-2);border:1px solid var(--line);\r\n padding:5px 11px;border-radius:100px;\r\n }\r\n\r\n \/* ---------- process ---------- *\/\r\n .process{background:linear-gradient(165deg,#2f1327,#3d1c35);color:var(--ivory)}\r\n .process .sec-head h2{color:var(--ivory)}\r\n .process .sec-head p{color:rgba(251,246,238,.7)}\r\n .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:st}\r\n .pstep{position:relative;padding:34px 28px;border:1px solid rgba(176,134,58,.28);border-radius:3px;background:rgba(255,255,255,.02)}\r\n .pstep .idx{\r\n font-family:'Cormorant Garamond',serif;font-size:2.6rem;color:var(--gold-2);\r\n line-height:1;display:block;margin-bottom:14px;\r\n }\r\n .pstep h4{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.4rem;margin-bottom:10px}\r\n .pstep p{color:rgba(251,246,238,.72);font-size:.92rem}\r\n\r\n \/* ---------- DEVIS wizard ---------- *\/\r\n .devis{background:\r\n radial-gradient(80% 60% at 100% 0,rgba(201,138,120,.10),transparent 60%),\r\n var(--ivory);}\r\n .wizard{\r\n background:#fff;border:1px solid var(--line);border-radius:4px;\r\n box-shadow:0 40px 90px -50px rgba(51,21,40,.4);\r\n max-width:900px;margin:0 auto;overflow:hidden;\r\n }\r\n .wz-top{\r\n background:linear-gradient(160deg,#3b1a30,#2a1120);color:var(--ivory);\r\n padding:30px 40px 26px;\r\n }\r\n .wz-top .wz-title{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:400}\r\n .wz-top .wz-sub{font-size:.82rem;color:rgba(251,246,238,.65);margin-top:2px}\r\n .progress{display:flex;gap:6px;margin-top:22px}\r\n .pdot{flex:1;height:4px;border-radius:100px;background:rgba(251,246,238,.18);transition:background .4s}\r\n .pdot.on{background:var(--gold-2)}\r\n .steplabels{display:flex;justify-content:space-between;margin-top:10px;gap:6px}\r\n .steplabels span{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,246,238,.45);flex:1;text-align:center}\r\n .steplabels span.on{color:var(--gold-2)}\r\n\r\n .wz-body{padding:38px 40px 30px;min-height:360px}\r\n .panel{display:none;animation:fade .5s ease}\r\n .panel.on{display:block}\r\n @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}\r\n .panel h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.7rem;color:var(--plum);margin-bottom:4px}\r\n .panel .hint{color:var(--muted);font-size:.9rem;margin-bottom:26px}\r\n\r\n .field{margin-bottom:22px}\r\n .field label.flabel{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wine);margin-bottom:9px;font-weight:500}\r\n .inp,select.inp{\r\n width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:3px;\r\n background:var(--ivory);color:var(--ink);font-family:'Jost',sans-serif;font-size:.95rem;\r\n transition:border-color .25s,box-shadow .25s;\r\n }\r\n .inp:focus,select.inp:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,134,58,.15)}\r\n .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}\r\n\r\n .gamme{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}\r\n .gcard{\r\n cursor:pointer;border:1px solid var(--line);border-radius:3px;padding:20px 18px;text-align:center;\r\n background:var(--ivory);transition:all .25s;position:relative;\r\n }\r\n .gcard:hover{border-color:var(--gold)}\r\n .gcard.sel{border-color:var(--gold);background:#fff;box-shadow:0 12px 30px -18px rgba(176,134,58,.6)}\r\n .gcard .gt{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--plum);font-weight:500}\r\n .gcard .gd{font-size:.74rem;color:var(--muted);margin-top:4px;letter-spacing:.03em}\r\n .gcard.sel .gt{color:var(--wine)}\r\n\r\n .options{display:grid;grid-template-columns:1fr 1fr;gap:12px}\r\n .opt{\r\n display:flex;align-items:flex-start;gap:12px;cursor:pointer;\r\n border:1px solid var(--line);border-radius:3px;padding:14px 15px;background:var(--ivory);\r\n transition:all .22s;\r\n }\r\n .opt:hover{border-color:var(--gold);background:#fff}\r\n .opt.sel{border-color:var(--gold);background:#fff}\r\n .opt .box{\r\n width:18px;height:18px;border:1.5px solid var(--gold);border-radius:3px;flex:0 0 auto;margin-top:2px;\r\n display:flex;align-items:center;justify-content:center;transition:background .2s;\r\n }\r\n .opt.sel .box{background:var(--gold)}\r\n .opt .box svg{opacity:0;transition:opacity .2s}\r\n .opt.sel .box svg{opacity:1}\r\n .opt .otext{flex:1}\r\n .opt .ol{font-size:.9rem;color:var(--ink);font-weight:400;line-height:1.3}\r\n .opt .op{font-size:.72rem;color:var(--muted);margin-top:2px}\r\n\r\n .radiogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}\r\n .rcard{cursor:pointer;border:1px solid var(--line);border-radius:3px;padding:16px 12px;text-align:center;background:var(--ivory);transition:all .22s}\r\n .rcard:hover{border-color:var(--gold)}\r\n .rcard.sel{border-color:var(--gold);background:#fff;box-shadow:0 10px 26px -18px rgba(176,134,58,.6)}\r\n .rcard .rt{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--plum)}\r\n .rcard .rp{font-size:.68rem;color:var(--muted);margin-top:2px}\r\n .subhead{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wine);font-weight:500;margin:4px 0 12px}\r\n\r\n .wz-foot{\r\n display:flex;justify-content:space-between;align-items:center;\r\n padding:22px 40px;border-top:1px solid var(--line);background:var(--ivory);\r\n }\r\n .btn-prev{background:none;border:none;color:var(--muted);font-family:'Jost',sans-serif;\r\n font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .2s}\r\n .btn-prev:hover{color:var(--plum)}\r\n .btn-prev[disabled]{opacity:0;pointer-events:none}\r\n .btn-next{\r\n background:var(--plum);color:var(--ivory);border:none;cursor:pointer;\r\n padding:14px 30px;border-radius:2px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;\r\n font-family:'Jost',sans-serif;transition:background .25s;\r\n }\r\n .btn-next:hover{background:var(--wine)}\r\n\r\n \/* result *\/\r\n .result-hero{text-align:center;margin-bottom:8px}\r\n .result-hero .rlabel{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}\r\n .result-hero .ramount{\r\n font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--plum);\r\n font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.1;margin-top:6px;\r\n }\r\n .result-hero .rrange{color:var(--muted);font-size:.9rem;margin-top:4px}\r\n .recap{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin:22px 0 30px}\r\n .recap div{text-align:center}\r\n .recap .rv{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--wine)}\r\n .recap .rk{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}\r\n .masked{filter:blur(11px);-webkit-user-select:none;user-select:none;pointer-events:none;transition:filter .9s ease}\r\n #resultWrap.revealed .masked{filter:none;user-select:auto;pointer-events:auto}\r\n .masknote{margin-top:14px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:500}\r\n #resultWrap.revealed .masknote{display:none}\r\n .breakdown{border-top:1px solid var(--line);padding-top:22px}\r\n .brow{margin-bottom:16px}\r\n .brow .btop{display:flex;justify-content:space-between;font-size:.86rem;margin-bottom:6px}\r\n .brow .bname{color:var(--ink)}\r\n .brow .bval{color:var(--wine);font-weight:500}\r\n .bar{height:7px;border-radius:100px;background:var(--ivory-2);overflow:hidden}\r\n .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--rose));border-radius:100px;transition:width 1s ease}\r\n .lead{margin-top:30px;background:var(--ivory);border:1px solid var(--line);border-radius:3px;padding:26px}\r\n .lead h4{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--plum);margin-bottom:4px}\r\n .lead p.ls{color:var(--muted);font-size:.86rem;margin-bottom:18px}\r\n .disc{font-size:.74rem;color:var(--muted);text-align:center;margin-top:18px;font-style:italic}\r\n .confirm{display:none;text-align:center;padding:20px;background:#fff;border:1px solid var(--gold);border-radius:3px;margin-top:18px}\r\n .confirm.on{display:block;animation:fade .5s}\r\n .confirm .ct{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--wine)}\r\n\r\n \/* ---------- final cta ---------- *\/\r\n .final{background:linear-gradient(160deg,#3b1a30,#2a1120);color:var(--ivory);text-align:center}\r\n .final h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.2rem,5vw,3.4rem)}\r\n .final h2 em{font-style:italic;color:var(--gold-2)}\r\n .final p{max-width:520px;margin:18px auto 34px;color:rgba(251,246,238,.75)}\r\n\r\n \/* ---------- footer ---------- *\/\r\n footer.site{background:#241019;color:rgba(251,246,238,.7);padding:60px 0 40px}\r\n .foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}\r\n .foot-brand .name{font-family:'Cormorant Garamond',serif;font-size:1.8rem;color:var(--ivory);letter-spacing:.12em}\r\n .foot-brand p{max-width:280px;margin-top:12px;font-size:.86rem}\r\n .foot-col h5{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}\r\n .foot-col a{display:block;font-size:.86rem;margin-bottom:9px;color:rgba(251,246,238,.7);transition:color .2s}\r\n .foot-col a:hover{color:var(--gold-2)}\r\n .foot-bottom{border-top:1px solid rgba(176,134,58,.2);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.76rem;color:rgba(251,246,238,.45)}\r\n\r\n .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}\r\n .reveal.in{opacity:1;transform:none}\r\n\r\n \/* ---------- responsive ---------- *\/\r\n @media(max-width:860px){\r\n .navlinks{display:none}\r\n .burger{display:block}\r\n .cats{grid-template-columns:1fr}\r\n .steps{grid-template-columns:1fr}\r\n .options{grid-template-columns:1fr}\r\n .radiogrid{grid-template-columns:repeat(2,1fr)}\r\n .grid2{grid-template-columns:1fr}\r\n .gamme{grid-template-columns:1fr}\r\n .wz-body,.wz-top,.wz-foot{padding-left:24px;padding-right:24px}\r\n section{padding:80px 0}\r\n .hero{padding-top:150px}\r\n }\r\n @media(prefers-reduced-motion:reduce){\r\n *{animation:none!important;transition:none!important;scroll-behavior:auto!important}\r\n .reveal{opacity:1;transform:none}\r\n }\r\n :focus-visible{outline:2px solid var(--gold);outline-offset:2px}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<header class=\"nav\" id=\"nav\">\r\n <div class=\"wrap nav-inner\">\r\n <a class=\"brand\" href=\"#top\">\r\n <span class=\"star\" aria-hidden=\"true\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 120 120\"><g fill=\"none\" stroke=\"#E4C77E\" stroke-width=\"5\">\r\n <path d=\"M60 8 L74 46 L112 60 L74 74 L60 112 L46 74 L8 60 L46 46 Z\"\/><\/g><\/svg>\r\n <\/span>\r\n <span class=\"name\">Farha<\/span>\r\n <\/a>\r\n <nav class=\"navlinks\">\r\n <a href=\"#prestations\">Prestations<\/a>\r\n <a href=\"#process\">Notre m\u00e9thode<\/a>\r\n <a href=\"#devis\">Devis<\/a>\r\n <a href=\"#contact\">Contact<\/a>\r\n <a href=\"#devis\" class=\"nav-cta\">Mon devis<\/a>\r\n <\/nav>\r\n <button class=\"burger\" aria-label=\"Menu\" onclick=\"document.getElementById('devis').scrollIntoView({behavior:'smooth'})\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><path d=\"M3 6h18M3 12h18M3 18h18\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n<\/header>\r\n\r\n\r\n<section class=\"hero\" id=\"top\">\r\n <div class=\"wrap hero-inner\">\r\n <div class=\"kicker eyebrow\">L'art d'orchestrer votre mariage \u00b7 Maroc<\/div>\r\n <h1>Un seul jour.<br>Une <em>f\u00eate<\/em> inoubliable.<\/h1>\r\n <p class=\"lede\">Farha r\u00e9unit les meilleurs artisans du mariage marocain \u2014 du lieu \u00e0 la neggafa, de la dakka \u00e0 la coordination du jour J \u2014 et coordonne chaque d\u00e9tail \u00e0 votre place.<\/p>\r\n <div class=\"actions\">\r\n <button class=\"btn-gold\" onclick=\"document.getElementById('devis').scrollIntoView({behavior:'smooth'})\">Composer mon devis<\/button>\r\n <a href=\"#prestations\" class=\"btn-ghost\">D\u00e9couvrir nos prestations<\/a>\r\n <\/div>\r\n <div class=\"hero-stats\">\r\n <div class=\"hstat\"><div class=\"n\">4<\/div><div class=\"l\">Univers coordonn\u00e9s<\/div><\/div>\r\n <div class=\"hstat\"><div class=\"n\">80+<\/div><div class=\"l\">Prestations<\/div><\/div>\r\n <div class=\"hstat\"><div class=\"n\">1<\/div><div class=\"l\">Interlocuteur unique<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"prestations\">\r\n <div class=\"wrap\">\r\n <div class=\"sec-head reveal\">\r\n <div class=\"flourish\"><span class=\"rule\"><\/span>\r\n <span class=\"star\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 120 120\"><g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"6\"><path d=\"M60 8 L74 46 L112 60 L74 74 L60 112 L46 74 L8 60 L46 46 Z\"\/><\/g><\/svg><\/span>\r\n <span class=\"rule r\"><\/span><\/div>\r\n <span class=\"eyebrow\">Ce que Farha coordonne<\/span>\r\n <h2>Quatre univers, une seule main experte<\/h2>\r\n <p>Chaque mariage est unique. Nous orchestrons l'ensemble des prestations autour de quatre univers, pour que vous n'ayez plus qu'\u00e0 profiter.<\/p>\r\n <\/div>\r\n\r\n <div class=\"cats\">\r\n <div class=\"cat reveal\">\r\n <div class=\"cat-head\">\r\n <div class=\"cat-illu\" aria-hidden=\"true\"><svg viewBox=\"0 0 64 64\"><g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M8 54 H56\"\/> <path d=\"M16 54 V30\"\/> <path d=\"M48 54 V30\"\/> <path d=\"M16 30 C16 15 24 8 32 8 C40 8 48 15 48 30\"\/> <path d=\"M32 54 V38\"\/> <\/g> <g fill=\"none\" stroke=\"#C98A78\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M21 30 C21 19 26 14 32 14 C38 14 43 19 43 30\"\/> <\/g> <g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"1.6\"> <path d=\"M32 6 l2.2 4 4.5 1.5 -4.5 1.5 -2.2 4 -2.2 -4 -4.5 -1.5 4.5 -1.5 Z\"\/> <\/g><\/svg><\/div>\r\n <div><span class=\"num\">I<\/span><h3>Lieu & Infrastructure<\/h3><\/div>\r\n <\/div>\r\n <p>Le d\u00e9cor de votre journ\u00e9e, jusqu'aux d\u00e9tails invisibles qui font qu'une f\u00eate se d\u00e9roule sans accroc.<\/p>\r\n <div class=\"taglist\">\r\n <span class=\"tag\">Salle \u00b7 Ferme \u00b7 Villa \u00b7 Tente<\/span><span class=\"tag\">Capacit\u00e9 & parking<\/span>\r\n <span class=\"tag\">H\u00e9bergement<\/span><span class=\"tag\">Transport invit\u00e9s<\/span>\r\n <span class=\"tag\">S\u00e9curit\u00e9 & autorisations<\/span><span class=\"tag\">G\u00e9n\u00e9rateur \u00b7 Climatisation<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cat reveal\">\r\n <div class=\"cat-head\">\r\n <div class=\"cat-illu\" aria-hidden=\"true\"><svg viewBox=\"0 0 64 64\"><g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <ellipse cx=\"34\" cy=\"31\" rx=\"11\" ry=\"9.5\"\/> <path d=\"M27 23 C28 18 40 18 41 23\"\/> <circle cx=\"34\" cy=\"16.5\" r=\"1.6\" fill=\"#B0863A\"\/> <path d=\"M23 30 C15 29 12 23 12 18\"\/> <path d=\"M45 27 C53 25 53 37 45 35\"\/> <path d=\"M12 44 H22 L20 55 H14 Z\"\/> <\/g> <g fill=\"none\" stroke=\"#C98A78\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M12 19 C12 30 15 40 16 44\"\/> <path d=\"M13.5 50 H20.5\"\/> <\/g><\/svg><\/div>\r\n <div><span class=\"num\">II<\/span><h3>Exp\u00e9rience des invit\u00e9s<\/h3><\/div>\r\n <\/div>\r\n <p>Traiteur, service et accueil \u2014 le soin apport\u00e9 \u00e0 ceux que vous aimez, du premier verre au dernier g\u00e2teau.<\/p>\r\n <div class=\"taglist\">\r\n <span class=\"tag\">Traiteur \u00b7 Buffet \u00b7 D\u00eener<\/span><span class=\"tag\">Cocktail & boissons<\/span>\r\n <span class=\"tag\">Th\u00e9 & caf\u00e9 \u00b7 Serveurs<\/span><span class=\"tag\">Vaisselle \u00b7 Tables \u00b7 Plan de table<\/span>\r\n <span class=\"tag\">H\u00f4tesses d'accueil<\/span><span class=\"tag\">Animation enfants \u00b7 Voiturier<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cat reveal\">\r\n <div class=\"cat-head\">\r\n <div class=\"cat-illu\" aria-hidden=\"true\"><svg viewBox=\"0 0 64 64\"><g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M6 51 H58\"\/> <path d=\"M16 51 V45 H48 V51\"\/> <path d=\"M18 45 C18 26 46 26 46 45\"\/> <path d=\"M32 26 V19\"\/> <path d=\"M26 45 V38 H38 V45\"\/> <\/g> <g fill=\"none\" stroke=\"#C98A78\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M21 33 Q25 37 29 33 Q33 37 37 33 Q41 37 43 33\"\/> <\/g> <g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"1.5\"> <path d=\"M32 12 l1.8 3.5 3.8 1.3 -3.8 1.3 -1.8 3.5 -1.8 -3.5 -3.8 -1.3 3.8 -1.3 Z\"\/> <circle cx=\"9\" cy=\"51\" r=\"2\"\/> <circle cx=\"55\" cy=\"51\" r=\"2\"\/> <\/g><\/svg><\/div>\r\n <div><span class=\"num\">III<\/span><h3>Mari\u00e9s & C\u00e9r\u00e9monie<\/h3><\/div>\r\n <\/div>\r\n <p>La neggafa, les takchitas, le rituel Amariya \u2014 la tradition sublim\u00e9e, orchestr\u00e9e au bon tempo.<\/p>\r\n <div class=\"taglist\">\r\n <span class=\"tag\">Neggafa \u00b7 Takchitas \u00b7 Caftans<\/span><span class=\"tag\">Coiffure & maquillage<\/span>\r\n <span class=\"tag\">Soir\u00e9e Henna<\/span><span class=\"tag\">Bijoux & accessoires<\/span>\r\n <span class=\"tag\">Amariya \u00b7 Dakhla \u00b7 Cort\u00e8ge<\/span><span class=\"tag\">Bouquet \u00b7 Alliances<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cat reveal\">\r\n <div class=\"cat-head\">\r\n <div class=\"cat-illu\" aria-hidden=\"true\"><svg viewBox=\"0 0 64 64\"><g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <circle cx=\"32\" cy=\"8\" r=\"2.6\"\/> <path d=\"M32 10.6 V15\"\/> <path d=\"M24 21 C24 16 40 16 40 21\"\/> <path d=\"M25 21 L24 39 C24 45 40 45 40 39 L39 21 Z\"\/> <path d=\"M32 45 V51\"\/> <\/g> <g fill=\"none\" stroke=\"#C98A78\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M28 40 V33 C28 28 36 28 36 33 V40\"\/> <\/g> <g stroke=\"#B0863A\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.7\"> <path d=\"M18 26 l-4 -1.5\"\/> <path d=\"M17 32 l-4.5 0\"\/> <path d=\"M18 38 l-4 1.5\"\/> <path d=\"M46 26 l4 -1.5\"\/> <path d=\"M47 32 l4.5 0\"\/> <path d=\"M46 38 l4 1.5\"\/> <\/g><\/svg><\/div>\r\n <div><span class=\"num\">IV<\/span><h3>Ambiance & Production<\/h3><\/div>\r\n <\/div>\r\n <p>D\u00e9cor, lumi\u00e8re, musique et image \u2014 la mise en sc\u00e8ne qui transforme une soir\u00e9e en souvenir.<\/p>\r\n <div class=\"taglist\">\r\n <span class=\"tag\">D\u00e9coration florale & salle<\/span><span class=\"tag\">Sc\u00e8ne \u00b7 Tr\u00f4ne \u00b7 \u00c9clairage<\/span>\r\n <span class=\"tag\">DJ \u00b7 Orchestre \u00b7 Dakka Marrakchia<\/span><span class=\"tag\">Issawa \u00b7 Gnaoua<\/span>\r\n <span class=\"tag\">Photo \u00b7 Vid\u00e9o \u00b7 Drone \u00b7 LED<\/span><span class=\"tag\">Wedding planner \u00b7 Jour J<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"process\" id=\"process\">\r\n <div class=\"wrap\">\r\n <div class=\"sec-head reveal\">\r\n <div class=\"flourish\"><span class=\"rule\"><\/span>\r\n <span class=\"star\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 120 120\"><g fill=\"none\" stroke=\"#E4C77E\" stroke-width=\"6\"><path d=\"M60 8 L74 46 L112 60 L74 74 L60 112 L46 74 L8 60 L46 46 Z\"\/><\/g><\/svg><\/span>\r\n <span class=\"rule r\"><\/span><\/div>\r\n <span class=\"eyebrow\">Notre m\u00e9thode<\/span>\r\n <h2>De l'id\u00e9e au jour J, sans stress<\/h2>\r\n <\/div>\r\n <div class=\"steps\">\r\n <div class=\"pstep reveal\">\r\n <span class=\"idx\">I<\/span>\r\n <h4>Vous composez<\/h4>\r\n <p>En quelques minutes, vous nous dites votre ville, votre nombre d'invit\u00e9s et les prestations qui comptent pour vous. Vous recevez une estimation imm\u00e9diate.<\/p>\r\n <\/div>\r\n <div class=\"pstep reveal\">\r\n <span class=\"idx\">II<\/span>\r\n <h4>Nous affinons<\/h4>\r\n <p>Un conseiller Farha vous rappelle, ajuste chaque poste selon votre budget et s\u00e9lectionne les artisans les plus adapt\u00e9s \u00e0 votre vision.<\/p>\r\n <\/div>\r\n <div class=\"pstep reveal\">\r\n <span class=\"idx\">III<\/span>\r\n <h4>Nous orchestrons<\/h4>\r\n <p>Le jour J, notre coordination g\u00e8re prestataires, timing et impr\u00e9vus. Vous \u00eates invit\u00e9s \u00e0 votre propre mariage.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"devis\" id=\"devis\">\r\n <div class=\"wrap\">\r\n <div class=\"sec-head reveal\">\r\n <div class=\"flourish\"><span class=\"rule\"><\/span>\r\n <span class=\"star\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 120 120\"><g fill=\"none\" stroke=\"#B0863A\" stroke-width=\"6\"><path d=\"M60 8 L74 46 L112 60 L74 74 L60 112 L46 74 L8 60 L46 46 Z\"\/><\/g><\/svg><\/span>\r\n <span class=\"rule r\"><\/span><\/div>\r\n <span class=\"eyebrow\">Votre devis sur mesure<\/span>\r\n <h2>Composez votre mariage, poste par poste<\/h2>\r\n <p>S\u00e9lectionnez ce qui vous ressemble. L'estimation se met \u00e0 jour en temps r\u00e9el. Aucun engagement.<\/p>\r\n <\/div>\r\n\r\n <div class=\"wizard reveal\" id=\"wizard\">\r\n <div class=\"wz-top\">\r\n <div class=\"wz-title\">G\u00e9n\u00e9rateur de devis Farha<\/div>\r\n <div class=\"wz-sub\">Une estimation indicative, personnalis\u00e9e en 6 \u00e9tapes.<\/div>\r\n <div class=\"progress\" id=\"progress\"><\/div>\r\n <div class=\"steplabels\" id=\"steplabels\">\r\n <span>Essentiels<\/span><span>Lieu<\/span><span>Invit\u00e9s<\/span><span>C\u00e9r\u00e9monie<\/span><span>Ambiance<\/span><span>Devis<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"wz-body\" id=\"wzbody\">\r\n \r\n <div class=\"panel on\" data-step=\"0\">\r\n <h3>Les essentiels<\/h3>\r\n <p class=\"hint\">Quelques rep\u00e8res pour calibrer votre estimation.<\/p>\r\n <div class=\"grid2\">\r\n <div class=\"field\">\r\n <label class=\"flabel\" for=\"ville\">Ville de la f\u00eate<\/label>\r\n <select class=\"inp\" id=\"ville\">\r\n <option value=\"Casablanca\">Casablanca<\/option>\r\n <option value=\"Rabat\">Rabat<\/option>\r\n <option value=\"Marrakech\">Marrakech<\/option>\r\n <option value=\"Tanger\">Tanger<\/option>\r\n <option value=\"F\u00e8s\">F\u00e8s<\/option>\r\n <option value=\"Agadir\">Agadir<\/option>\r\n <option value=\"Autre\">Autre ville<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"field\">\r\n <label class=\"flabel\" for=\"invites\">Nombre d'invit\u00e9s<\/label>\r\n <input class=\"inp\" id=\"invites\" type=\"number\" min=\"20\" max=\"2000\" step=\"10\" value=\"300\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"field\">\r\n <label class=\"flabel\" for=\"datem\">Date approximative<\/label>\r\n <input class=\"inp\" id=\"datem\" type=\"month\" \/>\r\n <\/div>\r\n <div class=\"field\">\r\n <label class=\"flabel\">Gamme souhait\u00e9e<\/label>\r\n <div class=\"gamme\" id=\"gamme\">\r\n <div class=\"gcard\" data-g=\"ess\"><div class=\"gt\">Essentielle<\/div><div class=\"gd\">Belle & ma\u00eetris\u00e9e<\/div><\/div>\r\n <div class=\"gcard sel\" data-g=\"prem\"><div class=\"gt\">Premium<\/div><div class=\"gd\">Raffin\u00e9e & g\u00e9n\u00e9reuse<\/div><\/div>\r\n <div class=\"gcard\" data-g=\"prest\"><div class=\"gt\">Prestige<\/div><div class=\"gd\">Sur mesure, sans limite<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"panel\" data-step=\"1\">\r\n <h3>Lieu & Infrastructure<\/h3>\r\n <p class=\"hint\">Choisissez le cadre, puis les indispensables logistiques.<\/p>\r\n <div class=\"subhead\">Type de lieu<\/div>\r\n <div class=\"radiogrid\" id=\"lieuradio\"><\/div>\r\n <div class=\"subhead\">Logistique<\/div>\r\n <div class=\"options\" data-cat=\"1\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"panel\" data-step=\"2\">\r\n <h3>Exp\u00e9rience des invit\u00e9s<\/h3>\r\n <p class=\"hint\">Traiteur, service et petites attentions.<\/p>\r\n <div class=\"options\" data-cat=\"2\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"panel\" data-step=\"3\">\r\n <h3>Mari\u00e9s & C\u00e9r\u00e9monie<\/h3>\r\n <p class=\"hint\">La tradition, orchestr\u00e9e avec soin.<\/p>\r\n <div class=\"options\" data-cat=\"3\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"panel\" data-step=\"4\">\r\n <h3>Ambiance & Production<\/h3>\r\n <p class=\"hint\">D\u00e9cor, musique et images de votre soir\u00e9e.<\/p>\r\n <div class=\"options\" data-cat=\"4\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"panel\" data-step=\"5\" id=\"resultWrap\">\r\n <div class=\"result-hero\">\r\n <div class=\"rlabel\">Votre estimation personnalis\u00e9e<\/div>\r\n <div class=\"ramount masked\" id=\"ramount\">000 000 DH<\/div>\r\n <div class=\"rrange masked\" id=\"rrange\">Fourchette masqu\u00e9e<\/div>\r\n <div class=\"masknote\" id=\"masknote\">\ud83d\udd12 Montant r\u00e9v\u00e9l\u00e9 apr\u00e8s saisie de votre e-mail<\/div>\r\n <\/div>\r\n <div class=\"recap\" id=\"recap\"><\/div>\r\n <div class=\"breakdown\" id=\"breakdown\"><\/div>\r\n\r\n <div class=\"lead\">\r\n <h4>Recevez votre devis chiffr\u00e9 par e-mail<\/h4>\r\n <p class=\"ls\">Saisissez votre e-mail pour r\u00e9v\u00e9ler le montant exact et recevoir le devis d\u00e9taill\u00e9, poste par poste. Un conseiller Farha vous rappelle sous 24 heures.<\/p>\r\n <div class=\"grid2\">\r\n <div class=\"field\" style=\"margin-bottom:14px\"><input class=\"inp\" id=\"lname\" placeholder=\"Nom complet\" \/><\/div>\r\n <div class=\"field\" style=\"margin-bottom:14px\"><input class=\"inp\" id=\"lphone\" placeholder=\"T\u00e9l\u00e9phone\" \/><\/div>\r\n <\/div>\r\n <div class=\"field\" style=\"margin-bottom:16px\"><input class=\"inp\" id=\"lemail\" type=\"email\" placeholder=\"Adresse e-mail\" \/><\/div>\r\n <button class=\"btn-gold\" style=\"width:100%\" id=\"sendlead\">Afficher & recevoir mon devis<\/button>\r\n <div class=\"confirm\" id=\"confirm\">\r\n <div class=\"ct\">Votre devis est d\u00e9bloqu\u00e9.<\/div>\r\n <p style=\"margin-top:6px;color:var(--muted);font-size:.88rem\">Le d\u00e9tail chiffr\u00e9 part vers votre bo\u00eete mail, et un conseiller Farha vous contacte <b style=\"color:var(--wine)\">sous 24 heures<\/b> pour construire votre f\u00eate.<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"disc\">Estimation indicative g\u00e9n\u00e9r\u00e9e automatiquement \u00e0 partir de vos choix. Le devis d\u00e9finitif est \u00e9tabli apr\u00e8s \u00e9change avec un conseiller Farha.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"wz-foot\">\r\n <button class=\"btn-prev\" id=\"prev\" disabled>\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n <button class=\"btn-next\" id=\"next\">Continuer \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"final\" id=\"contact\">\r\n <div class=\"wrap\">\r\n <div class=\"flourish reveal\" style=\"margin-bottom:24px\"><span class=\"rule\"><\/span>\r\n <span class=\"star\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 120 120\"><g fill=\"none\" stroke=\"#E4C77E\" stroke-width=\"6\"><path d=\"M60 8 L74 46 L112 60 L74 74 L60 112 L46 74 L8 60 L46 46 Z\"\/><\/g><\/svg><\/span>\r\n <span class=\"rule r\"><\/span><\/div>\r\n <h2 class=\"reveal\">Et si votre plus beau jour<br>commen\u00e7ait <em>aujourd'hui<\/em> ?<\/h2>\r\n <p class=\"reveal\">Parlez-nous de votre projet. Un conseiller Farha vous accompagne, de la premi\u00e8re id\u00e9e jusqu'\u00e0 la derni\u00e8re danse.<\/p>\r\n <div class=\"reveal\"><button class=\"btn-gold\" onclick=\"document.getElementById('devis').scrollIntoView({behavior:'smooth'})\">D\u00e9marrer mon devis<\/button><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<footer class=\"site\">\r\n <div class=\"wrap\">\r\n <div class=\"foot-grid\">\r\n <div class=\"foot-brand\">\r\n <div class=\"name\">Farha<\/div>\r\n <p>L'agence qui orchestre les mariages marocains \u2014 du lieu \u00e0 la lumi\u00e8re, avec un seul interlocuteur.<\/p>\r\n <\/div>\r\n <div class=\"foot-col\">\r\n <h5>Prestations<\/h5>\r\n <a href=\"#prestations\">Lieu & Infrastructure<\/a>\r\n <a href=\"#prestations\">Exp\u00e9rience des invit\u00e9s<\/a>\r\n <a href=\"#prestations\">Mari\u00e9s & C\u00e9r\u00e9monie<\/a>\r\n <a href=\"#prestations\">Ambiance & Production<\/a>\r\n <\/div>\r\n <div class=\"foot-col\">\r\n <h5>Agence<\/h5>\r\n <a href=\"#process\">Notre m\u00e9thode<\/a>\r\n <a href=\"#devis\">G\u00e9n\u00e9rer un devis<\/a>\r\n <a href=\"#contact\">Nous contacter<\/a>\r\n <\/div>\r\n <div class=\"foot-col\">\r\n <h5>Contact<\/h5>\r\n <a href=\"mailto:contact@farha.ma\">contact@farha.ma<\/a>\r\n <a href=\"#\">+212 5 00 00 00 00<\/a>\r\n <a href=\"#\">Casablanca \u00b7 Maroc<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"foot-bottom\">\r\n <span>\u00a9 2026 Farha \u2014 farha.ma. Tous droits r\u00e9serv\u00e9s.<\/span>\r\n <span>Mentions l\u00e9gales \u00b7 Confidentialit\u00e9<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n(function(){\r\n \"use strict\";\r\n\r\n \/* ---------- pricing model (MAD, base = gamme Essentielle) ---------- *\/\r\n var GAMME = { ess:{mult:1.0,label:\"Essentielle\"}, prem:{mult:1.55,label:\"Premium\"}, prest:{mult:2.4,label:\"Prestige\"} };\r\n var CITY = { Casablanca:1.15, Rabat:1.12, Marrakech:1.20, Tanger:1.06, F\u00e8s:1.0, Agadir:1.05, Autre:1.0 };\r\n\r\n var LIEU = [\r\n { id:\"salle\", label:\"Salle des f\u00eates\", base:20000 },\r\n { id:\"ferme\", label:\"Ferme\", base:34000 },\r\n { id:\"villa\", label:\"Villa priv\u00e9e\", base:40000 },\r\n { id:\"tente\", label:\"Tente ca\u00efdale\", base:28000 }\r\n ];\r\n\r\n \/\/ per: 'flat' or 'guest' | cat 1-4\r\n var ITEMS = [\r\n \/\/ 1 \u2014 Lieu & Infrastructure (logistique)\r\n { id:\"heberg\", cat:1, label:\"H\u00e9bergement des invit\u00e9s\", per:\"guest\", base:110, def:false },\r\n { id:\"transport\",cat:1, label:\"Transport \/ navettes invit\u00e9s\", per:\"flat\", base:9000, def:false },\r\n { id:\"generateur\",cat:1,label:\"G\u00e9n\u00e9rateur \u00e9lectrique\", per:\"flat\", base:4500, def:true },\r\n { id:\"clim\", cat:1, label:\"Climatisation \/ chauffage\", per:\"flat\", base:6000, def:false },\r\n { id:\"securite\", cat:1, label:\"S\u00e9curit\u00e9 & voiturier\", per:\"flat\", base:6500, def:true },\r\n { id:\"sanit\", cat:1, label:\"Sanitaires & nettoyage\", per:\"flat\", base:4000, def:true },\r\n { id:\"autor\", cat:1, label:\"Autorisations & assurance\", per:\"flat\", base:5000, def:true },\r\n \/\/ 2 \u2014 Exp\u00e9rience des invit\u00e9s\r\n { id:\"traiteur\", cat:2, label:\"Traiteur \u2014 d\u00eener complet\", per:\"guest\", base:300, def:true },\r\n { id:\"cocktail\", cat:2, label:\"Cocktail & verrines\", per:\"guest\", base:65, def:true },\r\n { id:\"boissons\", cat:2, label:\"Th\u00e9, caf\u00e9 & boissons\", per:\"guest\", base:28, def:true },\r\n { id:\"vaisselle\",cat:2, label:\"Vaisselle, tables & chaises\", per:\"guest\", base:48, def:true },\r\n { id:\"gateau\", cat:2, label:\"G\u00e2teau de mariage\", per:\"flat\", base:4500, def:true },\r\n { id:\"hotesses\", cat:2, label:\"H\u00f4tesses d'accueil & plan de table\", per:\"flat\", base:5000, def:true },\r\n { id:\"cadeaux\", cat:2, label:\"Cadeaux invit\u00e9s\", per:\"guest\", base:35, def:false },\r\n { id:\"enfants\", cat:2, label:\"Animation enfants\", per:\"flat\", base:3500, def:false },\r\n \/\/ 3 \u2014 Mari\u00e9s & C\u00e9r\u00e9monie\r\n { id:\"neggafa\", cat:3, label:\"Neggafa, takchitas & caftans\", per:\"flat\", base:16000, def:true },\r\n { id:\"costume\", cat:3, label:\"Costume du mari\u00e9\", per:\"flat\", base:4500, def:true },\r\n { id:\"coif\", cat:3, label:\"Coiffure & maquillage mari\u00e9e\", per:\"flat\", base:5500, def:true },\r\n { id:\"henna\", cat:3, label:\"Soir\u00e9e Henna\", per:\"flat\", base:7000, def:true },\r\n { id:\"bijoux\", cat:3, label:\"Bijoux & accessoires (location)\", per:\"flat\", base:5500, def:false },\r\n { id:\"amariya\", cat:3, label:\"Rituel Amariya & Dakhla\", per:\"flat\", base:8500, def:true },\r\n { id:\"bouquet\", cat:3, label:\"Bouquet & alliances\", per:\"flat\", base:2800, def:true },\r\n { id:\"cortege\", cat:3, label:\"Cort\u00e8ge & voiture des mari\u00e9s\", per:\"flat\", base:4500, def:false },\r\n \/\/ 4 \u2014 Ambiance & Production\r\n { id:\"deco\", cat:4, label:\"D\u00e9coration florale & salle\", per:\"flat\", base:22000, def:true },\r\n { id:\"scene\", cat:4, label:\"Sc\u00e8ne & tr\u00f4ne\", per:\"flat\", base:9500, def:true },\r\n { id:\"eclair\", cat:4, label:\"\u00c9clairage & sonorisation\", per:\"flat\", base:11000, def:true },\r\n { id:\"dj\", cat:4, label:\"DJ\", per:\"flat\", base:7500, def:true },\r\n { id:\"orchestre\",cat:4, label:\"Orchestre (cha\u00e2bi \/ andalou)\", per:\"flat\", base:14000, def:false },\r\n { id:\"dakka\", cat:4, label:\"Dakka Marrakchia\", per:\"flat\", base:6500, def:true },\r\n { id:\"issawa\", cat:4, label:\"Issawa \/ Gnaoua\", per:\"flat\", base:6500, def:false },\r\n { id:\"photo\", cat:4, label:\"Photographe\", per:\"flat\", base:9500, def:true },\r\n { id:\"video\", cat:4, label:\"Vid\u00e9aste & montage\", per:\"flat\", base:12000, def:true },\r\n { id:\"drone\", cat:4, label:\"Drone\", per:\"flat\", base:3800, def:false },\r\n { id:\"led\", cat:4, label:\"\u00c9cran LED \/ mapping\", per:\"flat\", base:8500, def:false },\r\n { id:\"effets\", cat:4, label:\"Effets sp\u00e9ciaux (feux froids)\", per:\"flat\", base:3200, def:false },\r\n { id:\"planner\", cat:4, label:\"Wedding planner & coordination jour J\", per:\"flat\", base:19000, def:true }\r\n ];\r\n\r\n var CAT_NAMES = { 1:\"Lieu & Infrastructure\", 2:\"Exp\u00e9rience des invit\u00e9s\", 3:\"Mari\u00e9s & C\u00e9r\u00e9monie\", 4:\"Ambiance & Production\" };\r\n\r\n \/* ---------- state ---------- *\/\r\n var state = {\r\n ville:\"Casablanca\", invites:300, gamme:\"prem\", lieu:\"ferme\",\r\n selected:{}\r\n };\r\n ITEMS.forEach(function(it){ state.selected[it.id] = !!it.def; });\r\n\r\n var CHECK_SVG = '<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"3\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>';\r\n\r\n \/* ---------- render options ---------- *\/\r\n function money(n){ return Math.round(n\/100)*100; }\r\n function fmt(n){ return money(n).toLocaleString('fr-FR') + ' DH'; }\r\n\r\n function itemCost(it){\r\n var g = GAMME[state.gamme].mult;\r\n if(it.per === \"guest\"){ return it.base * state.invites * g; }\r\n return it.base * g * CITY[state.ville];\r\n }\r\n function lieuCost(){\r\n var l = LIEU.filter(function(x){return x.id===state.lieu;})[0];\r\n if(!l) return 0;\r\n return l.base * GAMME[state.gamme].mult * CITY[state.ville];\r\n }\r\n\r\n function renderLieu(){\r\n var c = document.getElementById(\"lieuradio\");\r\n c.innerHTML = \"\";\r\n LIEU.forEach(function(l){\r\n var d = document.createElement(\"div\");\r\n d.className = \"rcard\" + (state.lieu===l.id ? \" sel\":\"\");\r\n d.innerHTML = '<div class=\"rt\">'+l.label+'<\/div>';\r\n d.onclick = function(){ state.lieu = l.id; renderLieu(); updateTotals(); };\r\n c.appendChild(d);\r\n });\r\n }\r\n\r\n function renderOptions(){\r\n document.querySelectorAll('.options[data-cat]').forEach(function(box){\r\n var cat = parseInt(box.getAttribute(\"data-cat\"),10);\r\n box.innerHTML = \"\";\r\n ITEMS.filter(function(i){return i.cat===cat;}).forEach(function(it){\r\n var sel = state.selected[it.id];\r\n var el = document.createElement(\"div\");\r\n el.className = \"opt\" + (sel?\" sel\":\"\");\r\n el.setAttribute(\"role\",\"checkbox\");\r\n el.setAttribute(\"tabindex\",\"0\");\r\n el.setAttribute(\"aria-checked\", sel?\"true\":\"false\");\r\n el.innerHTML = '<span class=\"box\">'+CHECK_SVG+'<\/span><span class=\"otext\"><span class=\"ol\">'+it.label+\r\n '<\/span><span class=\"op\">'+ (it.per===\"guest\" ? \"au couvert\" : \"forfait\") +'<\/span><\/span>';\r\n function toggle(){\r\n state.selected[it.id] = !state.selected[it.id];\r\n renderOptions(); updateTotals();\r\n }\r\n el.onclick = toggle;\r\n el.onkeydown = function(e){ if(e.key===\" \"||e.key===\"Enter\"){ e.preventDefault(); toggle(); } };\r\n box.appendChild(el);\r\n });\r\n });\r\n }\r\n\r\n \/* ---------- totals ---------- *\/\r\n function compute(){\r\n var byCat = {1:0,2:0,3:0,4:0};\r\n byCat[1] += lieuCost();\r\n ITEMS.forEach(function(it){\r\n if(state.selected[it.id]) byCat[it.cat] += itemCost(it);\r\n });\r\n var subtotal = byCat[1]+byCat[2]+byCat[3]+byCat[4];\r\n return { byCat:byCat, subtotal:subtotal, low:subtotal*0.9, high:subtotal*1.15 };\r\n }\r\n function updateTotals(){ \/* montants r\u00e9v\u00e9l\u00e9s uniquement apr\u00e8s saisie de l'e-mail *\/ }\r\n\r\n \/* ---------- result panel ---------- *\/\r\n function renderResult(){\r\n var r = compute();\r\n document.getElementById(\"ramount\").textContent = fmt(r.subtotal);\r\n document.getElementById(\"rrange\").textContent = \"Fourchette : \"+fmt(r.low)+\" \u2014 \"+fmt(r.high);\r\n\r\n var recap = document.getElementById(\"recap\");\r\n recap.innerHTML =\r\n '<div><div class=\"rv\">'+state.invites+'<\/div><div class=\"rk\">Invit\u00e9s<\/div><\/div>'+\r\n '<div><div class=\"rv\">'+state.ville+'<\/div><div class=\"rk\">Ville<\/div><\/div>'+\r\n '<div><div class=\"rv\">'+GAMME[state.gamme].label+'<\/div><div class=\"rk\">Gamme<\/div><\/div>';\r\n\r\n var bd = document.getElementById(\"breakdown\");\r\n bd.innerHTML = \"\";\r\n var max = Math.max(r.byCat[1],r.byCat[2],r.byCat[3],r.byCat[4],1);\r\n [1,2,3,4].forEach(function(c){\r\n var pct = Math.round(r.byCat[c]\/max*100);\r\n var row = document.createElement(\"div\");\r\n row.className = \"brow\";\r\n row.innerHTML = '<div class=\"btop\"><span class=\"bname\">'+CAT_NAMES[c]+'<\/span><span class=\"bval masked\">'+fmt(r.byCat[c])+'<\/span><\/div>'+\r\n '<div class=\"bar\"><span style=\"width:0%\"><\/span><\/div>';\r\n bd.appendChild(row);\r\n setTimeout(function(){ row.querySelector(\".bar span\").style.width = pct+\"%\"; }, 60);\r\n });\r\n }\r\n\r\n \/* ---------- wizard nav ---------- *\/\r\n var step = 0, MAX = 5;\r\n var panels = document.querySelectorAll(\".panel\");\r\n var progress = document.getElementById(\"progress\");\r\n var stepLabels = document.getElementById(\"steplabels\").children;\r\n for(var i=0;i<=MAX;i++){ var d=document.createElement(\"div\"); d.className=\"pdot\"+(i===0?\" on\":\"\"); progress.appendChild(d); }\r\n\r\n function show(n){\r\n step = n;\r\n panels.forEach(function(p){ p.classList.toggle(\"on\", parseInt(p.getAttribute(\"data-step\"),10)===n); });\r\n for(var i=0;i<progress.children.length;i++){ progress.children[i].classList.toggle(\"on\", i<=n); }\r\n for(var j=0;j<stepLabels.length;j++){ stepLabels[j].classList.toggle(\"on\", j===n); }\r\n document.getElementById(\"prev\").disabled = (n===0);\r\n var next = document.getElementById(\"next\");\r\n if(n===MAX){ next.textContent = \"Recommencer\"; renderResult(); }\r\n else { next.textContent = (n===MAX-1 ? \"Voir mon estimation \u2192\" : \"Continuer \u2192\"); }\r\n document.getElementById(\"wizard\").scrollIntoView({behavior:\"smooth\",block:\"start\"});\r\n }\r\n\r\n document.getElementById(\"next\").onclick = function(){\r\n if(step===MAX){ resetAll(); return; }\r\n \/\/ read essentials on leaving step 0\r\n if(step===0){\r\n state.ville = document.getElementById(\"ville\").value;\r\n var g = parseInt(document.getElementById(\"invites\").value,10);\r\n state.invites = (isNaN(g)||g<20) ? 20 : (g>2000?2000:g);\r\n document.getElementById(\"invites\").value = state.invites;\r\n renderLieu(); renderOptions();\r\n }\r\n show(step+1);\r\n };\r\n document.getElementById(\"prev\").onclick = function(){ if(step>0) show(step-1); };\r\n\r\n function resetAll(){\r\n state.gamme=\"prem\"; state.lieu=\"ferme\"; state.ville=\"Casablanca\"; state.invites=300;\r\n ITEMS.forEach(function(it){ state.selected[it.id]=!!it.def; });\r\n document.getElementById(\"ville\").value=\"Casablanca\";\r\n document.getElementById(\"invites\").value=300;\r\n document.querySelectorAll(\"#gamme .gcard\").forEach(function(x){ x.classList.toggle(\"sel\", x.getAttribute(\"data-g\")===\"prem\"); });\r\n document.getElementById(\"confirm\").classList.remove(\"on\");\r\n document.getElementById(\"resultWrap\").classList.remove(\"revealed\");\r\n var sl=document.getElementById(\"sendlead\"); sl.disabled=false; sl.textContent=\"Afficher & recevoir mon devis\";\r\n document.getElementById(\"lname\").value=\"\"; document.getElementById(\"lphone\").value=\"\"; document.getElementById(\"lemail\").value=\"\";\r\n renderLieu(); renderOptions(); updateTotals(); show(0);\r\n }\r\n\r\n \/* gamme selector *\/\r\n document.querySelectorAll(\"#gamme .gcard\").forEach(function(card){\r\n card.onclick = function(){\r\n document.querySelectorAll(\"#gamme .gcard\").forEach(function(x){x.classList.remove(\"sel\");});\r\n card.classList.add(\"sel\");\r\n state.gamme = card.getAttribute(\"data-g\");\r\n renderLieu(); renderOptions(); updateTotals();\r\n };\r\n });\r\n\r\n \/* lead form *\/\r\n document.getElementById(\"sendlead\").onclick = function(){\r\n var em = document.getElementById(\"lemail\").value.trim();\r\n var nm = document.getElementById(\"lname\").value.trim();\r\n if(!nm || !\/.+@.+\\..+\/.test(em)){\r\n alert(\"Merci d'indiquer votre nom et une adresse e-mail valide.\");\r\n return;\r\n }\r\n document.getElementById(\"resultWrap\").classList.add(\"revealed\");\r\n document.getElementById(\"confirm\").classList.add(\"on\");\r\n this.textContent = \"Devis d\u00e9bloqu\u00e9 \u2713\";\r\n this.disabled = true;\r\n };\r\n\r\n \/* ---------- nav solidify + reveal ---------- *\/\r\n var nav = document.getElementById(\"nav\");\r\n window.addEventListener(\"scroll\", function(){\r\n nav.classList.toggle(\"solid\", window.scrollY > 40);\r\n });\r\n var io = new IntersectionObserver(function(entries){\r\n entries.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add(\"in\"); io.unobserve(e.target); } });\r\n }, { threshold:.14 });\r\n document.querySelectorAll(\".reveal\").forEach(function(el){ io.observe(el); });\r\n\r\n \/* init *\/\r\n renderLieu(); renderOptions(); updateTotals();\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/farha.ma\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/farha.ma\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/farha.ma\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/farha.ma\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/farha.ma\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":1,"href":"https:\/\/farha.ma\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/farha.ma\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/farha.ma\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}