/* Casa Masamour — styles communs a toutes les pages.
   Sortis de la page d'accueil le jour ou le site est passe en plusieurs pages :
   un fichier separe est mis en cache une fois et sert partout, la ou du style
   en ligne est retelecharge a chaque page. */

/* ─────────────────────────────────────────────────────────────────────────
   Une location de vacances ne s'explique pas, elle se fait imaginer. D'où le
   carrousel plein écran d'entrée : cinq photos qui montrent la terrasse, la
   plage et la vue avant qu'on ait lu une ligne. Le reste de la page ne fait
   que confirmer, et propose un seul geste — demander les dates.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --sable:#faf7f2; --sable-2:#f3ece2; --pierre:#e3d8c8;
  --encre:#1f1e1a; --encre-2:#57524a; --doux:#8b8479;
  --mer:#16697a; --mer-clair:#1f8b9e; --or:#bd7f3e;
  --serif:"Cormorant Garamond",Didot,Georgia,serif;
  --sans:"Avenir Next","Helvetica Neue",Arial,sans-serif;
  --e1:6px;--e2:12px;--e3:20px;--e4:32px;--e5:52px;--e6:88px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--sable);color:var(--encre);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
.env{width:min(100% - 2.5rem,1200px);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:.01em;line-height:1.08}

/* ── en-tête ─────────────────────────────────────────────────────────── */
.entete{position:fixed;inset:0 0 auto;z-index:70;padding:var(--e3) 0;transition:background .35s,box-shadow .35s}
.entete[data-fixe="1"]{background:rgba(250,247,242,.95);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--pierre)}
.entete .env{display:flex;align-items:center;justify-content:space-between;gap:var(--e3)}
.logo{font:400 1.3rem/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:#fff;
  text-decoration:none;transition:color .35s;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.logo small{display:block;font:500 8px/1 var(--sans);letter-spacing:.3em;margin-top:6px;opacity:.9}
.entete[data-fixe="1"] .logo{color:var(--encre);text-shadow:none}
.nav{display:flex;gap:var(--e4);align-items:center}
.nav a{font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;
  text-decoration:none;transition:color .35s;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.entete[data-fixe="1"] .nav a{color:var(--encre-2);text-shadow:none}
.btn{display:inline-block;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  padding:15px 26px;border-radius:2px;text-decoration:none;cursor:pointer;border:1px solid transparent;
  text-shadow:none}
.btn--plein{background:var(--mer);color:#fff}
.btn--plein:hover{background:var(--mer-clair)}
.btn--fil{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.entete[data-fixe="1"] .btn--fil{border-color:var(--encre);color:var(--encre);background:none}

/* ── carrousel d'ouverture ───────────────────────────────────────────── */
.heros{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden}
@supports not (height:100svh){.heros{min-height:100vh}}
/* Les diapositives sont TOUTES superposees et c'est l'opacite qui change : un
   carrousel qui deplace ses images fait sauter la mise en page au premier
   rendu, avant que le script ait pris la main. */
.diapo{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.diapo[data-vu="1"]{opacity:1}
.diapo img{width:100%;height:100%;object-fit:cover}
.heros::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,19,16,.44) 0%,rgba(20,19,16,.08) 38%,rgba(20,19,16,.6) 100%)}
.heros__mot{position:relative;z-index:2;text-align:center;color:#fff;padding:var(--e6) var(--e3)}
.sur{font:500 10.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;margin-bottom:var(--e4);opacity:.92}
.heros h1{font-size:clamp(2.5rem,1.3rem + 5vw,5rem);margin-bottom:var(--e3);text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.3)}
.heros__mot > div > p{font-size:1.125rem;max-width:36ch;margin:0 auto var(--e5);opacity:.95}
.duo{display:flex;gap:var(--e2);justify-content:center;flex-wrap:wrap}
.points{position:absolute;inset:auto 0 var(--e4);z-index:3;display:flex;gap:9px;justify-content:center}
.points button{width:34px;height:3px;border:0;padding:0;cursor:pointer;border-radius:3px;
  background:rgba(255,255,255,.34);transition:background .4s}
.points button[aria-selected="true"]{background:#fff}
.fleche{position:absolute;top:50%;translate:0 -50%;z-index:3;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.12);color:#fff;cursor:pointer;
  display:grid;place-items:center}
.fleche svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fleche:hover{background:rgba(0,0,0,.3)}
.fleche--g{left:var(--e3)} .fleche--d{right:var(--e3)}

/* ── chiffres ────────────────────────────────────────────────────────── */
.bandeau{background:var(--encre);color:var(--sable);padding:var(--e4) 0}
.bandeau .env{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--e4);text-align:center}
.bandeau b{display:block;font:400 1.85rem/1 var(--serif)}
.bandeau span{font:500 9.5px/1.5 var(--sans);letter-spacing:.15em;text-transform:uppercase;opacity:.72}

/* ── blocs alternés ──────────────────────────────────────────────────── */
.sect{padding:var(--e6) 0}
.duo-bloc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,68px);align-items:center}
.duo-bloc img{aspect-ratio:4/3;object-fit:cover;width:100%}
.duo-bloc.inverse .txt{order:2}
.txt h2{font-size:clamp(1.9rem,1.3rem + 2.2vw,2.9rem);margin-bottom:var(--e3)}
.txt p{color:var(--encre-2);margin-bottom:var(--e3);max-width:52ch}
.liste{list-style:none;margin-top:var(--e4);border-top:1px solid var(--pierre);padding-top:var(--e4)}
.liste li{position:relative;padding-left:24px;margin-bottom:var(--e2);font-size:.9375rem;color:var(--encre-2)}
.liste li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--or)}

/* ── mosaïque ────────────────────────────────────────────────────────── */
.tete-c{text-align:center;margin-bottom:var(--e5)}
.tete-c h2{font-size:clamp(1.9rem,1.3rem + 2.2vw,2.9rem);margin-bottom:var(--e2)}
.tete-c p{color:var(--doux);max-width:46ch;margin-inline:auto}
.mosaique{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mosaique figure{margin:0;position:relative;overflow:hidden;background:var(--sable-2)}
.mosaique img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.mosaique figure:hover img{transform:scale(1.05)}
.mosaique .large{grid-column:span 2;grid-row:span 2}
.mosaique figure:not(.large) img{aspect-ratio:1/1}
.mosaique .large img{aspect-ratio:1/1}
.mosaique figcaption{position:absolute;inset:auto 0 0 0;padding:var(--e5) var(--e3) var(--e2);color:#fff;
  font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(to top,rgba(20,19,16,.62),transparent)}

/* ── équipements ─────────────────────────────────────────────────────── */

/* ── réservation ─────────────────────────────────────────────────────── */
.reserver{background:var(--sable-2)}
.reserver .env{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:clamp(28px,5vw,64px);align-items:start}
.form{background:#fff;border:1px solid var(--pierre);padding:var(--e4)}
.champ{margin-bottom:var(--e3)}
.champ label{display:block;font:500 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--doux);margin-bottom:var(--e1)}
.champ input,.champ select,.champ textarea{width:100%;padding:12px;border:1px solid var(--pierre);
  background:var(--sable);color:var(--encre);font:inherit;font-size:15px}
.champ textarea{min-height:80px;resize:vertical}
.deux-ch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e2)}
.form .btn{width:100%;text-align:center;border:0}
.note{font-size:.8125rem;color:var(--doux);margin-top:var(--e2);text-align:center}
.contact{list-style:none}
.contact li{padding:var(--e3) 0;border-bottom:1px solid var(--pierre);font-size:.9375rem}
.contact b{display:block;font:500 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--doux);margin-bottom:var(--e1)}
.contact a{color:var(--mer);text-decoration:none}

/* ── pied ────────────────────────────────────────────────────────────── */
.pied{background:var(--encre);color:var(--sable);padding:var(--e6) 0 var(--e4)}
.pied .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--e5);margin-bottom:var(--e5)}
.pied h3{font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-bottom:var(--e3);opacity:.6}
.pied li{list-style:none;font-size:.875rem;opacity:.82;margin-bottom:var(--e2)}
.pied .bas{border-top:1px solid rgba(250,247,242,.16);padding-top:var(--e4);font-size:.75rem;opacity:.55;text-align:center}
:focus-visible{outline:2px solid var(--mer);outline-offset:3px}

/* Les requêtes viennent APRÈS les règles qu'elles surchargent : à spécificité
   égale, la dernière l'emporte. Placées avant, elles n'auraient aucun effet. */
@media (max-width:900px){
  .nav a:not(.btn){display:none}
  .duo-bloc,.reserver .env{grid-template-columns:minmax(0,1fr)}
  .duo-bloc.inverse .txt{order:0}
  .sect{padding:var(--e5) 0}
  .heros{min-height:86svh}
  .mosaique{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fleche{width:38px;height:38px}
}
@media (max-width:480px){
  .deux-ch{grid-template-columns:minmax(0,1fr)}
  .mosaique{gap:5px}
  .mosaique .large{grid-column:span 2;grid-row:span 1}
  .logo{font-size:1.05rem}
  .fleche{display:none}
}

/* ── Diaporamas verticaux ────────────────────────────────────────────────
   Les blocs alternés portaient une photo fixe. Une location se juge sur
   l'ensemble des pièces, pas sur une vue : les images défilent donc sur place,
   intérieur d'un côté, extérieur de l'autre. Format vertical, parce qu'une
   chambre ou un pin parasol se lisent mieux en hauteur qu'en largeur. */
.diapo-v{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sable-2)}
.diapo-v>div{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.diapo-v>div[data-vu="1"]{opacity:1}
.diapo-v img{width:100%;height:100%;object-fit:cover}
.diapo-v .pts{position:absolute;inset:auto 0 var(--e3);z-index:2;display:flex;gap:6px;justify-content:center}
.diapo-v .pts button{width:22px;height:3px;border:0;padding:0;cursor:pointer;border-radius:3px;
  background:rgba(255,255,255,.42);transition:background .4s}
.diapo-v .pts button[aria-selected="true"]{background:#fff}
.diapo-v::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;pointer-events:none;
  background:linear-gradient(to top,rgba(20,19,16,.42),transparent)}

/* ── Icônes des équipements ─────────────────────────────────────────────
   Dessinées ici plutôt que chargées depuis une bibliothèque : une police
   d'icônes ajoute une requête bloquante et un fichier de 80 Ko pour douze
   pictogrammes. Le trait de 1,5 px reprend celui des filets de la page. */
.equip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--e2)}
/* ⚠ `>` OBLIGATOIRE. Chaque carte contient une div qui groupe le titre et sa
   description : sans l'enfant direct, elle héritait du bord et du fond de la
   carte, ce qui donnait un encadré dans l'encadré et des titres écrasés. */
.equip > div{background:#fff;border:1px solid var(--pierre);padding:var(--e3);
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--e3);align-items:start}
.equip > div > div{min-width:0}
.equip svg{width:24px;height:24px;fill:none;stroke:var(--mer);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.equip b{display:block;font:500 .9375rem/1.3 var(--sans);margin-bottom:3px}
.equip span{font-size:.8125rem;color:var(--doux);line-height:1.45}

/* ── Visionneuse ────────────────────────────────────────────────────────
   Une galerie de vignettes carrées recadre les photos : la visionneuse rend
   l'image entière, dans ses proportions d'origine. */
.mosaique figure{cursor:zoom-in}
.vis{position:fixed;inset:0;z-index:100;background:rgba(16,15,13,.96);display:grid;
  place-items:center;opacity:0;visibility:hidden;transition:opacity .3s}
.vis[data-ouvert="1"]{opacity:1;visibility:visible}
.vis img{max-width:92vw;max-height:82vh;object-fit:contain}
.vis__leg{position:absolute;inset:auto 0 var(--e5);text-align:center;color:#fff;
  font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.82}
.vis__leg em{display:block;font-style:normal;margin-top:8px;font-size:10px;opacity:.6;letter-spacing:.1em}
.vis button{position:absolute;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.vis__f{top:var(--e4);right:var(--e4);width:46px;height:46px;font-size:22px;line-height:1}
.vis__g,.vis__d{top:50%;translate:0 -50%;width:52px;height:52px}
.vis__g{left:var(--e4)} .vis__d{right:var(--e4)}
.vis svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:620px){
  .vis__g,.vis__d{width:42px;height:42px}
  .vis__g{left:8px} .vis__d{right:8px}
  .vis__f{top:12px;right:12px;width:40px;height:40px}
  .vis img{max-width:96vw;max-height:74vh}
}

/* ── Blog ─────────────────────────────────────────────────────────────────
   Les pages d'article partent sous l'en-tete fixe : elles n'ont pas de grande
   image d'ouverture pour la repousser, d'ou la marge haute. */
body.article, .article{padding-top:96px}
.fil{font:500 10.5px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--doux);margin-bottom:var(--e4)}
.fil a{color:var(--doux);text-decoration:none}
.fil a:hover{color:var(--encre)}
.fil span{opacity:.5;margin:0 4px}
.sur-art{font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);margin-bottom:var(--e3)}
.article h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem);max-width:20ch;margin-bottom:var(--e3)}
.chapo{font-size:1.1875rem;color:var(--encre-2);max-width:56ch;line-height:1.6}
.art-img{margin:var(--e5) 0 0}
.art-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.art-corps{padding-block:var(--e5)}
.art-corps h2{font-size:clamp(1.4rem,1.1rem + 1.1vw,1.9rem);margin:var(--e5) 0 var(--e3);max-width:26ch}
.art-corps p{max-width:64ch;color:var(--encre-2);margin-bottom:var(--e3)}
.art-corps .intro{font-size:1.0625rem;color:var(--encre)}
.encart{background:var(--sable-2);border-left:2px solid var(--or);padding:var(--e4);
  margin:var(--e6) 0 0;max-width:64ch}
.encart h2{margin-top:0;font-size:1.4rem}
.encart p{margin-bottom:var(--e4)}

/* Cartes d'articles */
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--e4)}
.cartes--large{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.carte{display:block;text-decoration:none;color:inherit;background:#fff;
  border:1px solid var(--pierre);overflow:hidden}
.carte img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.carte:hover img{transform:scale(1.04)}
.carte > div{padding:var(--e3)}
.carte span{display:block;font:500 9.5px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--or);margin-bottom:var(--e2)}
.carte b{display:block;font:400 1.1875rem/1.28 var(--serif);margin-bottom:var(--e2)}
.carte p{font-size:.875rem;color:var(--doux);line-height:1.55}

/* ── Tarifs ───────────────────────────────────────────────────────────── */
.tarifs{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--pierre)}
.tarifs th,.tarifs td{padding:var(--e3);text-align:left;border-bottom:1px solid var(--pierre)}
.tarifs thead th{font:500 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--doux);background:var(--sable-2)}
.tarifs tbody th{font:400 1.0625rem/1.3 var(--serif);font-weight:400}
.tarifs td:last-child{text-align:right;font:500 1.0625rem/1 var(--sans);white-space:nowrap}
.tarifs tr:last-child th,.tarifs tr:last-child td{border-bottom:0}
.tarifs small{display:block;font-size:.8125rem;color:var(--doux);margin-top:3px;font-weight:400}
.enrobe{overflow-x:auto}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq{max-width:76ch;margin-inline:auto}
.faq details{border-bottom:1px solid var(--pierre)}
.faq summary{padding:var(--e4) 0;cursor:pointer;font:400 1.1875rem/1.35 var(--serif);
  list-style:none;display:flex;justify-content:space-between;gap:var(--e3);align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:1.3rem;color:var(--or);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details > div{padding-bottom:var(--e4);color:var(--encre-2);max-width:62ch}
.faq details > div p + p{margin-top:var(--e2)}

/* ── Venir ────────────────────────────────────────────────────────────── */
.venir{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--e4)}
.venir div{border-top:2px solid var(--or);padding-top:var(--e3)}
.venir b{display:block;font:400 1.25rem/1.3 var(--serif);margin-bottom:var(--e2)}
.venir p{font-size:.9375rem;color:var(--encre-2)}

/* ── Pages légales ────────────────────────────────────────────────────── */
.legal{max-width:70ch}
.legal h2{font-size:1.4rem;margin:var(--e5) 0 var(--e3)}
.legal p,.legal li{color:var(--encre-2);margin-bottom:var(--e2);font-size:.9375rem}
.legal ul{padding-left:var(--e3)}

.pied a{color:inherit;text-decoration:none;opacity:.9}
.pied a:hover{text-decoration:underline}

@media (max-width:900px){
  body.article,.article{padding-top:78px}
  .art-img img{aspect-ratio:4/3}
}