/* ===== location-villa-marrakech.com — design system ===== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..500&family=Inter:wght@300..700&display=swap');

:root{
  --creme:#FAF8F5; --blanc:#FFFFFF; --brun:#8C7262; --brun-fonce:#3A2E26; --terracotta:#C1703F;
  --filet:#E4DBD1; --texte:#3A2E26; --texte-doux:#6E6257; --wa:#25D366;
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif;
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:96px;--s9:128px;
  --r:2px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--texte);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--brun);text-decoration:none} a:hover{color:var(--brun-fonce)}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.15;color:var(--brun-fonce);margin:0 0 var(--s3)}
h1{font-size:clamp(34px,4.5vw,60px)} h1.fiche{font-size:clamp(28px,3vw,40px)} h2{font-size:clamp(24px,2.4vw,28px)} h3{font-size:20px}
.ital{font-style:italic} .lead{font-size:18px;color:var(--texte-doux);max-width:60ch}
.label{font-family:var(--sans);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--texte-doux)}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--s4)} .section{padding:var(--s8) 0} @media(max-width:768px){.section{padding:var(--s6) 0}}
.grid{display:grid;gap:var(--s4)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;gap:12px}}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:999px;font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--brun-fonce);background:var(--brun-fonce);color:var(--creme);cursor:pointer;transition:background .3s var(--ease),color .3s,border-color .3s}
.btn:hover{background:var(--brun);border-color:var(--brun);color:var(--creme)}
.btn-outline{background:transparent;color:var(--brun-fonce)} .btn-outline:hover{background:var(--brun-fonce);color:var(--creme)}
.btn-wa{background:var(--wa);border-color:var(--wa);color:#fff} .btn-wa:hover{background:#1ebe5a;border-color:#1ebe5a;color:#fff}
.lien{color:var(--brun);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.badge{display:inline-block;background:var(--terracotta);color:#fff;font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:var(--r)}

/* barre utilitaire + header */
.util{font-size:13px;color:var(--texte-doux);display:flex;justify-content:flex-end;gap:var(--s4);padding:8px 0;border-bottom:.5px solid var(--filet)}
.header{position:sticky;top:0;z-index:50;background:rgba(250,248,245,.92);backdrop-filter:blur(8px);border-bottom:.5px solid transparent;transition:border-color .3s}
.header.is-scrolled{border-bottom-color:var(--filet)}
.header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px}
.logo{font-family:var(--serif);font-size:22px;color:var(--brun-fonce);text-align:center;letter-spacing:.02em} .logo small{display:block;font:500 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brun);margin-top:4px}
.nav{display:flex;gap:var(--s4);font-size:14px} .nav a{color:var(--brun-fonce)} .nav-r{justify-content:flex-end}
.burger{display:none} @media(max-width:900px){.nav{display:none}.burger{display:block}.header .wrap{grid-template-columns:auto 1fr auto}}

/* header transparent sur le hero (accueil) puis crème une fois défilé */
body.has-hero .hero{margin-top:-72px}
body.has-hero .header{background:transparent;border-bottom-color:transparent}
body.has-hero .header .nav a,body.has-hero .header .logo,body.has-hero .header .logo small,body.has-hero .header .burger{color:var(--creme)}
body.has-hero .header.is-scrolled{background:rgba(250,248,245,.92);border-bottom-color:var(--filet)}
body.has-hero .header.is-scrolled .nav a,body.has-hero .header.is-scrolled .logo,body.has-hero .header.is-scrolled .logo small,body.has-hero .header.is-scrolled .burger{color:var(--brun-fonce)}
@media(max-width:900px){body.has-hero .hero{margin-top:-64px}}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
body.has-hero .header .nav a:focus-visible,body.has-hero .header .burger:focus-visible{outline-color:var(--creme)}

/* hero */
.hero{position:relative;height:min(88vh,820px);min-height:520px;overflow:hidden;background:var(--brun-fonce)}
.hero img{width:100%;height:100%;object-fit:cover;opacity:.92}
.hero .inner{position:absolute;inset:auto 0 0 0;padding:0 0 var(--s7);color:var(--creme)}
.hero h1{color:var(--creme);max-width:14ch;margin-bottom:var(--s2)} .hero p{color:rgba(250,248,245,.85);margin:0 0 var(--s5);font-size:18px}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,22,16,.4) 0%,rgba(30,22,16,0) 24%,rgba(0,0,0,0) 40%,rgba(30,22,16,.55) 100%);pointer-events:none}
.hero .inner{z-index:2}
.search{background:var(--creme);border-radius:var(--r);padding:var(--s3);display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:var(--s3);max-width:900px;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.search select,.search input,.champ input,.champ select,.champ textarea{width:100%;font:16px var(--sans);padding:12px 14px;border:1px solid var(--filet);border-radius:var(--r);background:var(--blanc);color:var(--texte)}
.search select:focus,.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--brun)}
.search select:focus-visible,.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{outline:2px solid var(--terracotta);outline-offset:1px}
@media(max-width:768px){.search{grid-template-columns:1fr 1fr}.search .btn{grid-column:1/-1;justify-content:center}}

/* réassurance */
.reassurance{display:grid;grid-template-columns:repeat(4,1fr);border-top:.5px solid var(--filet);border-bottom:.5px solid var(--filet)}
.reassurance div{padding:var(--s5) var(--s3);text-align:center;border-left:.5px solid var(--filet)} .reassurance div:first-child{border-left:0}
.reassurance b{display:block;font:400 28px/1.1 var(--serif);color:var(--brun-fonce);margin-bottom:6px} .reassurance span{font-size:13px;color:var(--texte-doux)}
@media(max-width:768px){.reassurance{grid-template-columns:1fr 1fr}.reassurance div:nth-child(3){border-left:0}}

/* vignette villa */
.card{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--brun-fonce);aspect-ratio:4/3;color:#fff}
.card picture{display:block;width:100%;height:100%}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .card:hover img{transform:scale(1.04)}
.card .ov{position:absolute;inset:auto 0 0 0;padding:var(--s4);background:linear-gradient(180deg,rgba(0,0,0,0),rgba(30,22,16,.7))}
.card .nom{font:400 22px/1.15 var(--serif);color:#fff;margin:0 0 4px} .card .meta{font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
.card .prix{font-size:14px;margin-top:6px} .card .prix b{font-weight:600}
.card .specs{position:absolute;top:var(--s3);left:var(--s3);display:flex;gap:6px;flex-wrap:wrap;opacity:0;transition:opacity .3s} .card:hover .specs{opacity:1}
.card .specs span{background:rgba(250,248,245,.9);color:var(--brun-fonce);font-size:11px;padding:4px 8px;border-radius:var(--r)}
@media(hover:none){.card .specs{opacity:1}}
.card .wa{position:absolute;top:var(--s3);right:var(--s3);width:36px;height:36px;border-radius:50%;background:var(--wa);display:grid;place-items:center;opacity:0;transition:opacity .3s} .card:hover .wa{opacity:1}

/* pilules quartier */
.pills{display:flex;gap:var(--s3);flex-wrap:wrap} .pill{position:relative;flex:1 1 200px;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;color:#fff;font:400 20px var(--serif)}
.pill img{width:100%;height:100%;object-fit:cover} .pill span{position:absolute;left:var(--s3);bottom:var(--s3);text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* fiche villa */
.galerie{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;height:min(62vh,640px);border-radius:var(--r);overflow:hidden}
.galerie a{display:block;overflow:hidden;background:var(--brun-fonce)} .galerie a:first-child{grid-row:1/3} .galerie img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .galerie a:hover img{transform:scale(1.03)}
.galerie .plus{position:relative} .galerie .plus::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;background:rgba(30,22,16,.45);color:#fff;font:500 14px var(--sans)}
@media(max-width:768px){.galerie{grid-template-columns:1fr;grid-template-rows:auto;height:auto}.galerie a:not(:first-child){display:none}.galerie a:first-child{aspect-ratio:4/3}}
.fiche{display:grid;grid-template-columns:1fr 360px;gap:var(--s7);align-items:start} @media(max-width:1024px){.fiche{grid-template-columns:1fr}}
.specs-ligne{display:flex;gap:var(--s4);flex-wrap:wrap;color:var(--texte-doux);font-size:15px;margin:var(--s2) 0 var(--s5)} .specs-ligne b{color:var(--brun-fonce);font-weight:600}
.note-google{display:inline-flex;align-items:center;gap:8px;font-size:14px} .etoiles{color:var(--terracotta);letter-spacing:2px}
.bloc{padding:var(--s6) 0;border-top:.5px solid var(--filet)} .bloc:first-of-type{border-top:0}
.accroche{font-family:var(--serif);font-size:22px;font-style:italic;line-height:1.4;color:var(--brun-fonce);border-left:2px solid var(--brun);padding-left:var(--s4);margin:0 0 var(--s2)} .signature{font-size:13px;color:var(--texte-doux)}
.equip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)} .equip h4{margin:0 0 var(--s2);font:600 13px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--texte-doux)} .equip ul{list-style:none;margin:0;padding:0;font-size:15px} .equip li{padding:4px 0} @media(max-width:768px){.equip{grid-template-columns:1fr 1fr}}
table.tab{width:100%;border-collapse:collapse;font-size:15px} .tab td{padding:10px 0;border-bottom:.5px solid var(--filet)} .tab td:last-child{text-align:right;white-space:nowrap;color:var(--brun-fonce);font-weight:600}
.sidebar{position:sticky;top:96px;background:var(--blanc);border:.5px solid var(--filet);border-radius:var(--r);padding:var(--s5)}
.sidebar .prix{font:400 30px/1 var(--serif);color:var(--brun-fonce)} .sidebar .prix small{font:400 13px var(--sans);color:var(--texte-doux)}
.sidebar .btn{width:100%;justify-content:center;margin-top:var(--s3)} .sidebar .sans{font-size:13px;color:var(--texte-doux);text-align:center;margin-top:var(--s3)}
.contact-v{display:flex;gap:12px;align-items:center;margin-top:var(--s4);padding-top:var(--s4);border-top:.5px solid var(--filet);font-size:14px} .contact-v img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.barre-mobile{display:none} @media(max-width:1024px){.sidebar{position:static}.barre-mobile{display:flex;position:fixed;inset:auto 0 0 0;z-index:60;background:var(--blanc);border-top:.5px solid var(--filet);padding:12px var(--s3);gap:12px;align-items:center;justify-content:space-between}.barre-mobile .prix{font:400 20px var(--serif)}.barre-mobile .btn{padding:12px 20px}body.has-barre{padding-bottom:76px}}
.faq details{border-top:.5px solid var(--filet);padding:14px 0} .faq summary{cursor:pointer;font-weight:600;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq p{margin:10px 0 0;color:var(--texte-doux)}

/* filtres catalogue */
.filtres{position:sticky;top:72px;z-index:40;background:var(--creme);padding:var(--s3) 0;border-bottom:.5px solid var(--filet);display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.filtres select,.filtres input{font:14px var(--sans);padding:10px 12px;border:1px solid var(--filet);border-radius:999px;background:var(--blanc)}
.filtres .actif{border-color:var(--terracotta);color:var(--terracotta)}
.chips{display:flex;gap:8px;flex-wrap:wrap} .chip{font-size:13px;padding:8px 14px;border:1px solid var(--filet);border-radius:999px;background:var(--blanc);cursor:pointer} .chip.on{background:var(--brun-fonce);color:var(--creme);border-color:var(--brun-fonce)}

/* formulaire */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)} .form .full{grid-column:1/-1} .champ label{display:block;font-size:13px;color:var(--texte-doux);margin-bottom:6px} .hp{position:absolute;left:-9999px}
.form .erreur{color:var(--terracotta);font-size:13px} @media(max-width:640px){.form{grid-template-columns:1fr}}
.merci{max-width:60ch;margin:var(--s8) auto;text-align:center}

/* footer */
.footer{background:var(--brun-fonce);color:rgba(250,248,245,.8);padding:var(--s8) 0 var(--s5);font-size:14px} .footer a{color:rgba(250,248,245,.85)} .footer h4{font:400 16px var(--serif);color:var(--creme);margin:0 0 var(--s3)}
.footer .bas{margin-top:var(--s6);padding-top:var(--s4);border-top:.5px solid rgba(250,248,245,.15);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);font-size:12px;color:rgba(250,248,245,.55)}

/* apparition au défilement */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)} .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.card img,.galerie img{transition:none}}
.wa-flottant{position:fixed;right:20px;bottom:20px;z-index:55;width:56px;height:56px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.18)} @media(max-width:1024px){.has-barre .wa-flottant{bottom:92px}}

/* ===== menu mobile plein écran ===== */
.menu-mobile{position:fixed;inset:0;z-index:100;background:var(--brun-fonce);display:flex}
.menu-mobile[hidden]{display:none}
.menu-mobile__inner{display:flex;flex-direction:column;width:100%;padding:var(--s4) var(--s4) var(--s6);overflow-y:auto}
.menu-mobile__fermer{align-self:flex-end;width:44px;height:44px;border:1px solid rgba(250,248,245,.3);border-radius:50%;background:transparent;color:var(--creme);font-size:18px;cursor:pointer}
.menu-mobile__nav{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s6)}
.menu-mobile__nav a{font-family:var(--serif);font-size:28px;color:var(--creme)}
.menu-mobile__bas{margin-top:auto;padding-top:var(--s6);display:flex;flex-direction:column;gap:var(--s3);border-top:.5px solid rgba(250,248,245,.15)}
.menu-mobile__bas .btn{width:100%;justify-content:center}
.menu-mobile__tel{display:flex;gap:var(--s4);font-size:15px}
.menu-mobile__tel a,.menu-mobile__langue{color:rgba(250,248,245,.85)}
body.menu-ouvert{overflow:hidden}
@media(min-width:901px){.menu-mobile{display:none!important}}

/* ===== lightbox galerie (Swiper, injecté en JS) ===== */
.lightbox{position:fixed;inset:0;z-index:200;background:#0d0906;display:flex;flex-direction:column}
.lightbox[hidden]{display:none}
.lightbox__barre{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s4);color:var(--creme);font:14px var(--sans)}
.lightbox__compteur{letter-spacing:.04em}
.lightbox__fermer{width:44px;height:44px;border-radius:50%;border:1px solid rgba(250,248,245,.3);background:transparent;color:var(--creme);font-size:18px;cursor:pointer}
.lightbox__swiper{flex:1;min-height:0}
.lightbox .swiper-slide{display:flex;align-items:center;justify-content:center}
.lightbox .swiper-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lightbox .swiper-button-prev,.lightbox .swiper-button-next{color:var(--creme);--swiper-navigation-size:22px;width:44px;height:44px;background:rgba(255,255,255,.08);border-radius:50%}
.lightbox .swiper-pagination-bullet{background:var(--creme);opacity:.5} .lightbox .swiper-pagination-bullet-active{opacity:1;background:var(--terracotta)}
@media(max-width:640px){.lightbox .swiper-button-prev,.lightbox .swiper-button-next{display:none}}

/* ===== galerie fiche villa : carrousel swipe plein cadre sur mobile + bouton pilule ===== */
.galerie-pill{display:none}
@media(max-width:768px){
  .galerie{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;grid-template-columns:unset;grid-template-rows:unset;height:auto;scrollbar-width:none}
  .galerie::-webkit-scrollbar{display:none}
  .galerie a{flex:0 0 100%;scroll-snap-align:start;grid-row:auto;aspect-ratio:4/3}
  .galerie a:not(:first-child){display:block}
  .galerie-pill{position:absolute;right:var(--s3);bottom:var(--s3);z-index:2;background:rgba(30,22,16,.72);color:var(--creme);font:600 12px/1 var(--sans);letter-spacing:.04em;padding:10px 16px;border-radius:999px;border:0;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
}
@media(prefers-reduced-motion:reduce){.galerie{scroll-behavior:auto}}

/* ===== mini-carrousel au survol des vignettes (desktop uniquement) ===== */
@media(hover:hover) and (pointer:fine){
  .card-carousel{position:absolute;inset:0} .card-carousel .swiper-slide{width:100%;height:100%} .card-carousel img{width:100%;height:100%;object-fit:cover}
}

/* ===== typographie des descriptions ===== */
.prose{font-size:16px;line-height:1.7;color:var(--texte)}
.prose p{margin:0 0 1em}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.3em}
.prose li{margin:.3em 0}
.prose h3{font-size:19px;margin:1.4em 0 .5em}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose > *:last-child{margin-bottom:0}

/* ===== tableau responsive ===== */
@media(max-width:560px){
  table.tab,table.tab tbody,table.tab tr,table.tab td{display:block;width:100%}
  table.tab tr{padding:8px 0;border-bottom:.5px solid var(--filet)}
  .tab td{border-bottom:0;padding:2px 0}
  .tab td:last-child{text-align:left}
}

/* ===== chip accessible au clavier ===== */
.chip{position:relative}
.chip input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.chip:focus-within{outline:2px solid var(--terracotta);outline-offset:2px}

/* ===== pagination KnpPaginator ===== */
.pagination{display:flex;gap:6px;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;font:14px var(--sans)}
.pagination li{display:inline-flex}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border-radius:999px;color:var(--brun-fonce)}
.pagination a{border:1px solid var(--filet);background:var(--blanc)}
.pagination a:hover{border-color:var(--brun);color:var(--brun)}
.pagination .current span{background:var(--brun-fonce);color:var(--creme);border-radius:999px}
.pagination .disabled span{color:var(--texte-doux);opacity:.5}

/* ===== skeleton de chargement de la grille (filtres) ===== */
.grille-skeleton{display:grid;gap:var(--s4);grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.grille-skeleton{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.grille-skeleton{grid-template-columns:1fr}}
.skel-card{aspect-ratio:4/3;border-radius:var(--r);background:linear-gradient(100deg,var(--filet) 30%,#efe8de 45%,var(--filet) 60%);background-size:250% 100%;animation:skel-shimmer 1.3s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.skel-card{animation:none;background:var(--filet)}}
@keyframes skel-shimmer{0%{background-position:150% 0}100%{background-position:-50% 0}}

/* ===== formulaire : erreurs inline, focus, état d'envoi ===== */
.champ input:invalid.touche,.champ select:invalid.touche,.champ input.champ-invalide{border-color:var(--terracotta)}
.champ .erreur:empty{display:none}
.champ .erreur{display:block;margin-top:4px;font-size:13px;color:var(--terracotta)}
.btn[disabled],.btn.is-loading{opacity:.75;cursor:progress;pointer-events:none}
.btn.is-loading::after{content:"";width:14px;height:14px;margin-left:8px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:btn-spin .7s linear infinite}
@media(prefers-reduced-motion:reduce){.btn.is-loading::after{animation:none}}
@keyframes btn-spin{to{transform:rotate(360deg)}}
/* bandeau cookies (RGPD) */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--brun-fonce);color:var(--creme);padding:var(--s3) var(--s4);display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;justify-content:space-between;box-shadow:0 -4px 20px rgba(0,0,0,.15)}
.cookies[hidden]{display:none}
.cookies p{margin:0;font-size:13px;max-width:70ch;color:rgba(250,248,245,.9)}
.cookies a{color:var(--creme);text-decoration:underline}
.cookies .actions{display:flex;gap:8px;flex-shrink:0}
.cookies button{font:600 13px var(--sans);padding:10px 20px;border-radius:999px;border:1px solid rgba(250,248,245,.4);background:transparent;color:var(--creme);cursor:pointer}
.cookies button.principal{background:var(--terracotta);border-color:var(--terracotta);color:#fff}
@media(max-width:640px){.cookies{flex-direction:column;align-items:stretch;text-align:center}.cookies .actions{justify-content:center}}