/* Base commune des gabarits v2 (Atlas, Bahia, Ksar, Oasis).
   Structure et comportements partagés ; l'identité visuelle de chaque gabarit
   (polices, couleurs, compositions) vit dans le <style> du gabarit.
   Jetons attendus : --brand-primary, --brand-accent, --fond, --surface, --texte,
   --texte-doux, --filet, --rayon. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fond,#fff);color:var(--texte,#1d1d1d);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.1}
p{margin:0}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lien-evitement{position:absolute;left:12px;top:-60px;z-index:1000;padding:10px 14px;background:var(--surface,#fff);color:var(--texte,#111);border-radius:8px;text-decoration:none}
.lien-evitement:focus{top:12px}
:focus-visible{outline:2px solid var(--brand-accent,#c98a1f);outline-offset:3px}

/* ---------- mise en page ---------- */
.conteneur{width:min(100% - 2*clamp(20px,4vw,56px),1200px);margin-inline:auto}
.section{padding-block:clamp(64px,9vw,120px)}
.pile>*+*{margin-top:var(--pile,16px)}
.grille-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,72px);align-items:center}
.grille-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
@media (max-width:860px){.grille-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.grille-2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.grille-3{grid-template-columns:minmax(0,1fr)}}

/* ---------- boutons ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:var(--rayon-bouton,12px);border:1px solid transparent;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .3s cubic-bezier(.22,.61,.36,1),background-color .3s,color .3s,border-color .3s,box-shadow .3s}
.bouton:hover{transform:translateY(-2px)}
.bouton--plein{background:var(--brand-accent);color:var(--sur-accent,#14324a)}
.bouton--contour{border-color:currentColor;background:transparent}
.bouton--lien{padding:0;border-radius:0;text-decoration:underline;text-underline-offset:6px}
.bouton--lien:hover{transform:none}
.cms-voir-tout{display:flex;margin:28px auto 0;padding:13px 22px;border-radius:var(--rayon-bouton,12px);border:1px solid var(--filet,rgba(0,0,0,.15));background:var(--surface,#fff);color:var(--texte,#1d1d1d);font-weight:700;cursor:pointer;transition:background-color .3s,transform .3s}
.cms-voir-tout:hover{transform:translateY(-2px)}

/* ---------- révélation au défilement (site.js) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
.js [data-reveal].est-visible{opacity:1;transform:none}

/* ---------- diaporamas ---------- */
[data-diapo]{transition:opacity 1.2s ease}
[data-diaporama] [data-diapo]:not(.est-active){opacity:0;pointer-events:none}
[data-diaporama-barre]{position:relative;height:2px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden}
[data-diaporama-barre]::after{content:"";position:absolute;inset:0;background:currentColor;transform:scaleX(0);transform-origin:left}
[data-diaporama-barre].est-active::after{animation:barre-diapo var(--duree-diapo,6s) linear forwards}
@keyframes barre-diapo{to{transform:scaleX(1)}}

/* ---------- carrousels ---------- */
[data-carrousel]{position:relative}
[data-piste]{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
[data-piste]::-webkit-scrollbar{display:none}
[data-piste]>*{scroll-snap-align:start;flex:0 0 auto}
.photos-fiche{position:relative;overflow:hidden}
.photos-fiche [data-piste]{height:100%}
.photos-fiche [data-piste]>*{flex:0 0 100%;width:100%;height:100%;object-fit:cover}
.fleche{position:absolute;top:50%;z-index:2;width:36px;height:36px;margin-top:-18px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#1d1d1d;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px -8px rgba(0,0,0,.5);opacity:0;transition:opacity .3s}
.fleche--gauche{left:10px}.fleche--droite{right:10px}
.photos-fiche:hover .fleche,.fleche:focus-visible{opacity:1}
@media (hover:none){.fleche{opacity:.9}}
[data-points]{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:5px;justify-content:center;z-index:2}
[data-points] i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);transition:transform .3s,background-color .3s}
[data-points] i.est-actif{transform:scale(1.4);background:#fff}

/* ---------- accordéon (FAQ) : animé par grid-template-rows ---------- */
[data-accordeon]{border-bottom:1px solid var(--filet,rgba(0,0,0,.12))}
[data-accordeon-bouton]{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;font-weight:600}
[data-accordeon-bouton]:focus-visible{outline:2px solid var(--brand-accent,#c98a1f);outline-offset:4px}
.accordeon-signe{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--filet,rgba(0,0,0,.15));display:grid;place-items:center;transition:transform .35s}
[data-accordeon].est-ouvert .accordeon-signe{transform:rotate(45deg)}
.accordeon-reponse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
[data-accordeon].est-ouvert .accordeon-reponse{grid-template-rows:1fr}
.accordeon-reponse>div{overflow:hidden}
.accordeon-reponse p{padding-bottom:20px;color:var(--texte-doux,#555)}

/* ---------- défilement continu (cartes de verre, valeurs) ---------- */
[data-defilement-continu]{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fondu,15%),#000 calc(100% - var(--fondu,15%)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fondu,15%),#000 calc(100% - var(--fondu,15%)),transparent)}
[data-defilement-continu] [data-piste]{overflow:visible;width:max-content;scroll-snap-type:none;animation:defile var(--duree-defile,24s) linear infinite}
[data-defilement-continu]:hover [data-piste]{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------- lignes qui se remplissent (site.js, par transform) ---------- */
[data-remplissage-barre]{transform-origin:left top;transform:scaleX(0);transition:transform .2s linear}
[data-remplissage="y"] [data-remplissage-barre]{transform:scaleY(0)}

/* ---------- logo (spec contrat v2, §6.7) ---------- */
[data-cms-logo]{object-fit:contain}
[data-cms-variante="silhouette"]{filter:brightness(0) invert(1)}
[data-cms-variante="pastille"]{background:#fff;padding:4px 8px;border-radius:10px}

/* ---------- formulaires ---------- */
.champ{display:grid;gap:6px;margin-bottom:14px}
.champ label{font-size:13px;font-weight:600}
.champ input,.champ select,.champ textarea{width:100%;padding:13px 14px;border:1px solid var(--filet,rgba(0,0,0,.15));border-radius:10px;background:var(--surface,#fff);font-size:15px}
.champ textarea{min-height:110px;resize:vertical}
.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.champs-2{grid-template-columns:1fr}}
.champ-piege{position:absolute!important;left:-9999px!important}
[data-statut]{min-height:22px;margin-top:10px;font-size:14px}
[data-statut].est-ok{color:var(--ok,#2f6b57)}
[data-statut].est-erreur{color:var(--erreur,#b3261e)}
[data-statut] a{margin-left:4px;font-weight:700}

/* ---------- avis ---------- */
.note-etoiles{display:inline-flex;gap:2px;color:#e8a92b;font-size:15px}
[data-platform]{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px}
[data-platform="airbnb"]{background:#ffe8ec;color:#c4153f}
[data-platform="booking"]{background:#e3ecfb;color:#003b95}

/* ---------- bouton WhatsApp flottant ---------- */
.whatsapp-flottant{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:900;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);transition:transform .3s}
.whatsapp-flottant:hover{transform:scale(1.07)}
.whatsapp-flottant .ic{font-size:30px;color:#fff}

/* ---------- mouvement réduit : tout visible, rien ne bouge ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
  [data-defilement-continu] [data-piste]{animation:none}
}

/* ---------- icônes (Phosphor, licence MIT, assets/icons/) ----------
   Masque CSS : l'icône prend la couleur du texte, donc celle du gabarit et de son ambiance.
   Icône de contenu (champ « icon ») : mask-image posé par cms-v2.js sur un élément .ic. */
.ic{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.14em;background-color:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.ic-fleche-droite{-webkit-mask-image:url(icons/fleche-droite.svg);mask-image:url(icons/fleche-droite.svg)}
.ic-fleche-gauche{-webkit-mask-image:url(icons/fleche-gauche.svg);mask-image:url(icons/fleche-gauche.svg)}
.ic-fleche-bas{-webkit-mask-image:url(icons/fleche-bas.svg);mask-image:url(icons/fleche-bas.svg)}
.ic-chevron-gauche{-webkit-mask-image:url(icons/chevron-gauche.svg);mask-image:url(icons/chevron-gauche.svg)}
.ic-chevron-droit{-webkit-mask-image:url(icons/chevron-droit.svg);mask-image:url(icons/chevron-droit.svg)}
.ic-plus{-webkit-mask-image:url(icons/plus.svg);mask-image:url(icons/plus.svg)}
.ic-coche{-webkit-mask-image:url(icons/coche.svg);mask-image:url(icons/coche.svg)}
.ic-menu{-webkit-mask-image:url(icons/menu.svg);mask-image:url(icons/menu.svg)}
.ic-epingle{-webkit-mask-image:url(icons/epingle.svg);mask-image:url(icons/epingle.svg)}
.ic-telephone{-webkit-mask-image:url(icons/telephone.svg);mask-image:url(icons/telephone.svg)}
.ic-email{-webkit-mask-image:url(icons/email.svg);mask-image:url(icons/email.svg)}
.ic-whatsapp{-webkit-mask-image:url(icons/whatsapp.svg);mask-image:url(icons/whatsapp.svg)}
.ic-whatsapp-plein{-webkit-mask-image:url(icons/whatsapp-plein.svg);mask-image:url(icons/whatsapp-plein.svg)}
.ic-etoile{-webkit-mask-image:url(icons/etoile.svg);mask-image:url(icons/etoile.svg)}
.ic-guillemets{-webkit-mask-image:url(icons/guillemets.svg);mask-image:url(icons/guillemets.svg)}
.ic-etincelle{-webkit-mask-image:url(icons/etincelle.svg);mask-image:url(icons/etincelle.svg)}
.ic-maison{-webkit-mask-image:url(icons/maison.svg);mask-image:url(icons/maison.svg)}
.ic-horloge{-webkit-mask-image:url(icons/horloge.svg);mask-image:url(icons/horloge.svg)}
.ic-bouclier{-webkit-mask-image:url(icons/bouclier.svg);mask-image:url(icons/bouclier.svg)}
.ic-pieces{-webkit-mask-image:url(icons/pieces.svg);mask-image:url(icons/pieces.svg)}