/* ============================================================
   TAWAF PRESTIGE — palette ivoire / or (planche de marque)
   ============================================================ */
:root{
  --ivoire:#F9F6F1; --blanc:#FEFCF8; --sable:#E8DDCA;
  --or:#C8A35D; --or-mat:#B58A3A; --pierre:#D9D2C7; --bleu:#6C8195;
  --encre:#3A3630; --txt:#57524A; --txt-doux:#8B8478;
  --serif:'Cormorant Garamond',serif; --sans:'Jost',sans-serif;
  --ombre:0 12px 40px rgba(58,54,48,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;background:var(--ivoire);color:var(--txt);font-size:15.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .25s}
ul{list-style:none}
.container{width:min(1180px,92%);margin:0 auto}
.container.narrow{width:min(980px,92%)}
.center{text-align:center}
.muted{color:var(--txt-doux)}
.w100{width:100%;justify-content:center}
.hp{display:none}

/* ---------- Ornements ---------- */
.orne{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--or);font-size:11px;margin:16px 0 22px}
.orne span{width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--or))}
.orne span:last-child{background:linear-gradient(90deg,var(--or),transparent)}
.orne.left{justify-content:flex-start}
.orne.left span:first-child{background:var(--or);width:38px}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 30px;font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;border-radius:3px;border:1px solid transparent;cursor:pointer;transition:.3s}
.btn-gold{background:linear-gradient(135deg,var(--or),var(--or-mat));color:#fff}
.btn-gold:hover{filter:brightness(1.07);box-shadow:0 10px 26px rgba(181,138,58,.35)}
.btn-ghost{background:rgba(255,255,255,.65);border-color:var(--pierre);color:var(--encre);backdrop-filter:blur(4px)}
.btn-ghost:hover{border-color:var(--or);color:var(--or-mat)}
.btn-ghost.dark{background:rgba(255,255,255,.85)}
.btn-outline{background:transparent;border-color:var(--or);color:var(--or-mat)}
.btn-outline:hover{background:var(--or);color:#fff}
.btn-pill{border:1px solid var(--or);border-radius:30px;padding:8px 22px;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--or-mat)}
.btn-pill:hover,.btn-pill.on{background:var(--or);color:#fff}
.link-more{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:var(--or-mat);font-weight:500}
.link-more i{transition:transform .25s}
.link-more:hover i{transform:translateX(5px)}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:60;background:rgba(254,252,248,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(217,210,199,.5)}
.header-in{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px}
.brand{display:inline-flex;flex:none}
.logo{width:172px;height:auto}
.nav{display:flex;align-items:center;gap:30px}
.nav>a{font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:var(--encre);font-weight:400;position:relative;padding:4px 0}
.nav>a:not(.btn-pill):after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--or);transition:width .3s}
.nav>a:not(.btn-pill):hover:after,.nav>a.on:not(.btn-pill):after{width:100%}
.nav>a:hover{color:var(--or-mat)}
.nav-wa{font-size:19px;color:var(--or-mat)!important}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:1.5px;background:var(--encre);transition:.3s}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:84vh;display:flex;align-items:center;overflow:hidden;background:var(--ivoire)}
.hero.small{min-height:46vh}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center}
/* Accueil : Kaaba estompée à gauche, homme en prière net à droite (maquette) */
.hero-kaaba{position:absolute;top:0;bottom:0;left:0;width:58%;background-size:cover;background-position:center left;opacity:.5}
.hero-homme{position:absolute;top:0;bottom:0;right:0;width:52%;background-size:cover;background-position:center right}
.hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(249,246,241,.55) 0%,rgba(249,246,241,.86) 30%,rgba(249,246,241,.9) 50%,rgba(249,246,241,.55) 66%,rgba(249,246,241,.05) 100%)}
.hero.small .hero-veil{background:linear-gradient(180deg,rgba(249,246,241,.55),rgba(249,246,241,.85))}
.hero-in{position:relative;z-index:2;padding:70px 0 110px;text-align:center;max-width:640px;margin-left:12%}
.hero.small .hero-in{text-align:center;padding:44px 0;margin:0 auto}
.hero-sur{font-family:var(--serif);font-size:clamp(26px,3.2vw,38px);color:var(--txt);font-weight:400;font-style:italic}
.hero-title{font-family:var(--serif);font-size:clamp(42px,6vw,74px);color:var(--or-mat);font-weight:600;line-height:1.06;letter-spacing:1px;margin-bottom:18px}
.hero-sub{max-width:480px;margin:0 auto 30px;font-size:14.5px;color:var(--txt);letter-spacing:.4px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero-curve{position:absolute;bottom:-1px;left:0;width:100%;height:70px;z-index:3}
.hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;width:40px;height:40px;border:1px solid var(--or);border-radius:50%;display:grid;place-items:center;color:var(--or-mat);animation:flotte 2.4s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- Sections ---------- */
.section{padding:84px 0}
.section.soft{background:var(--blanc)}
.section.texture{background-size:420px;background-repeat:repeat;background-color:var(--ivoire);background-blend-mode:overlay}
.section.marbre{background-size:cover;background-position:center;position:relative}
.section.marbre>*{position:relative;z-index:2}
.section.marbre:before{content:"";position:absolute;inset:0;background:rgba(254,252,248,.82)}
.sec-sur{font-size:12.5px;letter-spacing:3.4px;text-transform:uppercase;color:var(--or-mat);font-weight:500}
.center-block{display:block;text-align:center}
.sec-title.gold{color:var(--or-mat)}
.sec-title{font-family:var(--serif);font-size:clamp(30px,3.6vw,46px);color:var(--encre);font-weight:600;letter-spacing:1px;margin-top:6px}
.sec-title.small{font-size:clamp(23px,2.6vw,31px)}
.sec-title.center{text-align:center}
h2.center + .orne, .sec-title.center + .orne{margin-left:auto;margin-right:auto}

/* ---------- Prochains départs ---------- */
.split-departs{display:grid;grid-template-columns:1.15fr .95fr;gap:50px;align-items:center}
.departs-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 24px}
.dep-card{background:var(--blanc);border:1px solid rgba(217,210,199,.6);border-radius:6px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;transition:.3s;position:relative}
.dep-card:hover{border-color:var(--or);box-shadow:var(--ombre);transform:translateY(-3px)}
.dep-ico{flex:none;width:38px;height:38px;border:1px solid var(--or);border-radius:4px;display:grid;place-items:center;color:var(--or-mat);font-size:16px}
.dep-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.dep-txt b{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:1.2px;color:var(--encre);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dep-txt small{font-size:11px;color:var(--txt-doux);letter-spacing:1px}
.dep-txt em{font-style:normal;font-size:12.5px;color:var(--or-mat);font-weight:500}
.dep-tag{position:absolute;top:-9px;right:12px;background:var(--or);color:#fff;font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;padding:3px 10px;border-radius:12px;font-weight:500}
.dep-tag.full{background:#9c5c50}
.departs-img img{border-radius:220px 14px 14px 14px;box-shadow:var(--ombre);aspect-ratio:4/4.6;object-fit:cover}

/* ---------- Omra Premium + réservation ---------- */
.split-premium{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.prem-p{max-width:460px;margin-bottom:30px}
.prem-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px;text-align:center;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--txt);line-height:1.5}
.gold-ico{display:inline-grid;place-items:center;width:52px;height:52px;border:1px solid var(--or);border-radius:50%;color:var(--or-mat);font-size:20px;margin:0 auto 10px}
.gold-ico.big{width:74px;height:74px;font-size:30px;margin-bottom:16px}
.prem-icons>div{display:flex;flex-direction:column;align-items:center}

.resa-card{background:var(--blanc);border:1px solid rgba(217,210,199,.65);border-radius:8px;box-shadow:var(--ombre);padding:30px 28px}
.resa-card.sticky{position:sticky;top:96px}
.resa-card h3{font-family:var(--serif);font-size:22px;color:var(--encre);text-align:center;font-weight:600;letter-spacing:.6px}
.resa-card h3 i{color:var(--or-mat);font-size:17px;margin-right:4px}
.resa-card .orne{margin:12px 0 18px}
.resa-form{display:grid;gap:14px}
.resa-form label{display:block;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--txt-doux);margin-bottom:6px;font-weight:500}
.resa-form input,.resa-form select,.resa-form textarea{width:100%;padding:12px 14px;border:1px solid var(--pierre);border-radius:4px;background:var(--ivoire);font-family:var(--sans);font-weight:300;font-size:14.5px;color:var(--encre)}
.resa-form input:focus,.resa-form select:focus,.resa-form textarea:focus{outline:1px solid var(--or);border-color:var(--or)}
.resa-form textarea{min-height:96px;resize:vertical}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--txt);cursor:pointer}
.check input{width:auto;accent-color:var(--or-mat)}
.resa-note{display:block;text-align:center;font-size:12px;color:var(--txt-doux);letter-spacing:.4px}
.resa-alert{text-align:center;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--or-mat);border:1px dashed var(--or);border-radius:4px;padding:8px;margin-bottom:14px}
.resa-alert.full{color:#9c5c50;border-color:#c9a49b}
.alert{border-radius:6px;padding:14px 16px;font-size:14px;margin-bottom:14px;line-height:1.6}
.alert.ok{background:#F0F2EA;border:1px solid #CBD3B8;color:#5A6A42}
.alert.ko{background:#F6ECE8;border:1px solid #E0C4BA;color:#93513F}
.alert a{text-decoration:underline}

/* ---------- Hajj banner ---------- */
.hajj-banner{position:relative;min-height:430px;display:flex;align-items:center;background-size:cover;background-position:center}
.hajj-veil{position:absolute;inset:0;background:linear-gradient(95deg,rgba(249,246,241,.94) 0%,rgba(249,246,241,.7) 42%,rgba(249,246,241,.1) 100%)}
.hajj-in{position:relative;z-index:2;padding:60px 0}
.hajj-in h2{font-family:var(--serif);font-size:clamp(34px,4.4vw,54px);color:var(--or-mat);font-weight:600;letter-spacing:2px}
.hajj-in p{max-width:380px;margin-bottom:26px}

/* ---------- Villes ---------- */
.villes{display:grid;grid-template-columns:1fr 1fr;gap:70px;text-align:center}
.ville h3{font-family:var(--serif);font-size:32px;letter-spacing:5px;text-transform:uppercase;color:var(--encre);font-weight:600}
.arche{width:min(300px,74%);margin:8px auto 22px;border:1px solid var(--or);border-radius:170px 170px 6px 6px;padding:10px;background:var(--blanc)}
.arche img{border-radius:160px 160px 3px 3px;aspect-ratio:3/4;object-fit:cover}
.ville p{margin-bottom:16px;color:var(--txt)}

/* ---------- Pourquoi ---------- */
.why-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;text-align:center;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;line-height:1.55;color:var(--txt);margin-top:10px}
.why-grid>div{display:flex;flex-direction:column;align-items:center}

/* ---------- Témoignages + FAQ ---------- */
.split-tf{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:start}
.temoin-slider{position:relative;background:var(--blanc);border:1px solid rgba(217,210,199,.6);border-radius:8px;box-shadow:var(--ombre);padding:34px 30px 26px;text-align:center}
.temoin{display:none}
.temoin.on{display:block}
.temoin img{width:76px;height:76px;border-radius:50%;object-fit:cover;margin:0 auto 16px;border:2px solid var(--sable)}
.temoin p{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--encre);line-height:1.55;margin-bottom:12px}
.temoin b{display:block;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--txt-doux);font-weight:500}
.temoin .stars{color:var(--or);letter-spacing:4px;font-size:13px}
.t-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
.t-nav button{background:none;border:1px solid var(--pierre);border-radius:50%;width:34px;height:34px;display:grid;place-items:center;color:var(--or-mat);cursor:pointer;transition:.25s}
.t-nav button:hover{border-color:var(--or)}
.t-dots{display:flex;gap:7px}
.t-dots i{width:6px;height:6px;border-radius:50%;background:var(--pierre);transition:.25s}
.t-dots i.on{background:var(--or-mat)}
.faq-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.faq details{border-bottom:1px solid rgba(217,210,199,.7)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 4px;font-size:14.5px;font-weight:400;color:var(--encre);letter-spacing:.3px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-family:var(--serif);font-size:20px;color:var(--or-mat);transition:transform .3s;flex:none}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq p{padding:0 4px 16px;font-size:14px;color:var(--txt)}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--sable);padding:34px 0}
.news-in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.newsletter h3{font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:2.4px;text-transform:uppercase;color:var(--encre)}
.newsletter p{font-size:13.5px;color:var(--txt)}
.news-form{display:flex;gap:10px;flex-wrap:wrap}
.news-form input{padding:12px 16px;border:1px solid var(--pierre);border-radius:3px;background:var(--blanc);font-family:var(--sans);font-size:14px;min-width:240px}
.news-form input:focus{outline:1px solid var(--or)}

/* ---------- Footer ---------- */
.footer{position:relative;background-size:cover;background-position:center;padding:64px 0 0;color:var(--txt)}
.footer-veil{position:absolute;inset:0;background:rgba(254,252,248,.9)}
.footer-in{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr 1fr 1.2fr .9fr;gap:36px;padding-bottom:44px}
.f-col h4{font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--or-mat);font-weight:500;margin-bottom:14px}
.f-col p{font-size:14px;line-height:2}
.f-col a:hover{color:var(--or-mat)}
.f-brand .logo{width:150px;margin-bottom:18px}
.f-socials{display:flex;gap:14px}
.f-socials a{width:36px;height:36px;border:1px solid var(--pierre);border-radius:50%;display:grid;place-items:center;color:var(--or-mat);font-size:14px;transition:.25s}
.f-socials a:hover{border-color:var(--or);background:var(--blanc)}
.footer-legal{position:relative;z-index:2;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(217,210,199,.6);padding:18px 0;font-size:12px;color:var(--txt-doux);letter-spacing:.6px}

/* ---------- WhatsApp flottant ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:80;width:52px;height:52px;border-radius:50%;background:var(--blanc);border:1px solid var(--or);color:var(--or-mat);display:grid;place-items:center;font-size:23px;box-shadow:var(--ombre);transition:.25s}
.wa-float:hover{background:var(--or);color:#fff;transform:scale(1.06)}

/* ---------- Page séjours (liste) ---------- */
.mois-bloc{margin-bottom:44px}
.mois-titre{display:flex;align-items:center;gap:20px;font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:2px;color:var(--encre);text-transform:uppercase;margin-bottom:22px}
.mois-titre span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--pierre))}
.mois-titre span:first-child{background:linear-gradient(90deg,var(--pierre),transparent)}
.sej-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sej-card{position:relative;background:var(--blanc);border:1px solid rgba(217,210,199,.6);border-radius:8px;padding:24px 26px;display:flex;flex-direction:column;gap:9px;transition:.3s}
.sej-card:hover{border-color:var(--or);box-shadow:var(--ombre);transform:translateY(-4px)}
.sc-titre{font-family:var(--sans);font-weight:500;font-size:14.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--encre)}
.sc-dates,.sc-hotels{font-size:13px;color:var(--txt-doux)}
.sc-dates i,.sc-hotels i{color:var(--or-mat);margin-right:7px}
.sc-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid rgba(217,210,199,.5);padding-top:13px;margin-top:5px}
.sc-foot em{font-style:normal;font-size:13px;color:var(--txt)}
.sc-foot em b{font-family:var(--serif);font-size:21px;color:var(--or-mat);font-weight:700;margin-left:4px}
.sc-go{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--or-mat);font-weight:500}
.empty-bloc{background:var(--blanc);border:1px solid rgba(217,210,199,.6);border-radius:8px;box-shadow:var(--ombre);padding:54px 30px;display:flex;flex-direction:column;align-items:center}
.empty-bloc .btn{margin-top:8px}

/* ---------- Page séjour (détail) ---------- */
.split-sejour{display:grid;grid-template-columns:1.5fr 1fr;gap:46px;align-items:start}
.sd-h{font-family:var(--serif);font-size:26px;color:var(--encre);font-weight:600;letter-spacing:.6px;margin:40px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--sable)}
.sd-h:first-child{margin-top:0}
.sd-h small{font-family:var(--sans);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--txt-doux);font-weight:400;margin-left:10px}
.sd-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:8px}
.sd-strip>div{background:var(--blanc);border:1px solid rgba(217,210,199,.6);border-radius:6px;padding:16px 12px;text-align:center;display:flex;flex-direction:column;gap:3px}
.sd-strip i{font-size:19px;color:var(--or-mat)}
.sd-strip b{font-size:13.5px;color:var(--encre);font-weight:500;letter-spacing:.5px}
.sd-strip span{font-size:12px;color:var(--txt-doux)}
.sd-hotels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sd-hotel{background:var(--blanc);border:1px solid rgba(217,210,199,.6);border-radius:8px;overflow:hidden}
.sd-hotel img{aspect-ratio:4/2.6;object-fit:cover;width:100%}
.sd-hotel figcaption{padding:14px 16px}
.sd-hotel b{display:block;font-size:14px;letter-spacing:.8px;color:var(--encre);font-weight:500}
.sd-hotel span{font-size:12.5px;color:var(--txt-doux)}
.sd-prix{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.sd-prix-card{background:var(--blanc);border:1px solid rgba(217,210,199,.6);border-radius:6px;padding:18px 12px;text-align:center;display:flex;flex-direction:column;gap:3px;transition:.25s}
.sd-prix-card:hover{border-color:var(--or);box-shadow:var(--ombre)}
.spc-x{font-family:var(--serif);font-size:14px;color:var(--or-mat);font-weight:700;letter-spacing:1px}
.spc-type{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--txt-doux)}
.spc-val{font-family:var(--serif);font-size:24px;color:var(--encre);font-weight:700}
.sd-prix-card small{font-size:10.5px;color:var(--txt-doux);letter-spacing:.6px}
.sd-note{margin-top:12px;font-size:13.5px;color:var(--txt)}
.sd-inclus{display:grid;gap:9px}
.sd-inclus li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px}
.sd-inclus i{color:var(--or-mat);margin-top:3px;flex:none}
.sd-desc{font-size:14.5px;line-height:1.85;color:var(--txt)}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .split-departs,.split-premium,.split-tf,.split-sejour{grid-template-columns:1fr}
  .departs-img{display:none}
  .resa-card.sticky{position:static}
  .why-grid{grid-template-columns:repeat(3,1fr);gap:26px}
  .villes{gap:40px}
  .footer-in{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav{position:fixed;inset:69px 0 auto 0;background:var(--blanc);flex-direction:column;align-items:flex-start;padding:26px 6%;gap:20px;box-shadow:0 18px 40px rgba(58,54,48,.12);display:none;border-bottom:1px solid var(--sable)}
  .nav.open{display:flex}
  .burger{display:flex}
  .hero{min-height:74vh}
  .departs-grid,.sej-grid,.sd-hotels{grid-template-columns:1fr}
  .prem-icons{grid-template-columns:repeat(2,1fr)}
  .villes{grid-template-columns:1fr}
  .sd-strip{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr}
  .hero-btns .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}