/* ==========================================================================
   Dar Senia Hotel — feuille de style principale
   Scope : tout est préfixé .ds- pour survivre à la cascade Kadence.
   Transposable tel quel dans child-theme/assets/css/main.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. POLICE D'AFFICHAGE — self-hostée (§1.1 : jamais le CDN Google)
   Marcellus reprend les capitales romaines gravées de l'enseigne. C'est elle
   qui porte l'identité : sans elle la page retombe sur Georgia et perd son
   caractère. 14,5 Ko, sous-ensemble latin seul (aucun œ dans le site).
   Le corps de texte reste sur la pile système : Segoe UI / Roboto / SF sont
   d'excellentes neutres, disponibles instantanément. Embarquer Inter coûterait
   78 Ko pour trois graisses — mauvais échange sur un réseau 3G algérien.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Marcellus";
  src:url("../fonts/marcellus-400-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   Palette dérivée de l'enseigne : ardoise, or/laiton, vert olivier, ivoire.
   -------------------------------------------------------------------------- */
:root{
  /* Couleurs */
  --ds-ink:#20252E;          /* ardoise de l'enseigne */
  --ds-ink-deep:#161A21;     /* fond sombre */
  --ds-ink-soft:#3A4250;
  --ds-gold:#C9A227;         /* or du logo */
  --ds-gold-light:#E0C56B;
  --ds-wa:#25D366;           /* vert WhatsApp officiel — couleur de marque, pas de charte */
  --ds-wa-light:#4BE083;
  --ds-olive:#2F5D3A;        /* vert du feuillage */
  --ds-ivory:#F7F4EE;        /* blanc cassé */
  --ds-sand:#E8E1D5;         /* pierre de la façade */
  --ds-line:rgba(201,162,39,.28);

  /* Typo */
  --ds-display:"Marcellus","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ds-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Échelle fluide */
  --ds-t-hero:clamp(2.4rem,7vw,5.5rem);
  --ds-t-h2:clamp(1.75rem,3.6vw,3rem);
  --ds-t-h3:clamp(1.15rem,1.8vw,1.5rem);
  --ds-t-body:clamp(1rem,1.05vw,1.0625rem);
  --ds-t-small:.8125rem;

  /* Espacement — rythme 8pt */
  --ds-s1:.5rem;  --ds-s2:1rem;   --ds-s3:1.5rem;
  --ds-s4:2rem;   --ds-s5:3rem;   --ds-s6:5rem;   --ds-s7:7.5rem;

  --ds-max:1200px;
  --ds-ease:cubic-bezier(.22,.61,.36,1);
}

/* Règle §3.6 du prompt maître : on réduit l'ÉCHELLE en mobile,
   pas les sections une par une. */
@media (max-width:768px){
  :root{ --ds-s5:2rem; --ds-s6:3rem; --ds-s7:4rem; }
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
body.ds-body{
  margin:0;
  font-family:var(--ds-body);
  font-size:var(--ds-t-body);
  line-height:1.65;
  color:var(--ds-ink);
  background:var(--ds-ivory);
  -webkit-font-smoothing:antialiased;
}
/* :where() ⇒ spécificité 0. Les règles de base ne peuvent donc JAMAIS écraser
   une classe de composant. Sans ça, `.ds-body a{color:inherit}` (0,1,1) bat
   `.ds-btn--ghost{color:...}` (0,1,0) et les boutons deviennent illisibles. */
.ds-body :where(img){max-width:100%;height:auto;display:block}
.ds-body :where(a){color:inherit}

.ds-container{
  width:100%;
  max-width:var(--ds-max);
  margin-inline:auto;
  padding-inline:var(--ds-s3);
}

/* L'en-tête est en position:fixed : sans marge de défilement, chaque lien du
   menu déposait le visiteur AVEC le titre de section caché dessous. */
section[id]{scroll-margin-top:clamp(5rem,9vw,7rem)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Lien d'évitement : hors écran, révélé au focus clavier. */
.ds-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ds-gold);color:var(--ds-ink-deep);
  padding:.7em 1.2em;text-decoration:none;font-weight:600;
}
.ds-skip:focus{left:0}

/* Focus visible partout — §7 accessibilité */
.ds-body :focus-visible{
  outline:2px solid var(--ds-gold);
  outline-offset:3px;
  border-radius:2px;
}

/* Titres : couleur explicite (Kadence en impose une), mais en :where()
   pour que .ds-hero__title & co restent maîtres de la leur. */
.ds-body :where(h1,h2,h3){
  font-family:var(--ds-display);
  font-weight:400;
  line-height:1.12;
  margin:0;
  color:var(--ds-ink);
}

/* --------------------------------------------------------------------------
   3. ÉLÉMENT SIGNATURE — le moucharabieh du logo, en CSS pur (0 Ko)
   -------------------------------------------------------------------------- */
.ds-mashrabiya{
  --m:22px;
  background-image:
    linear-gradient(45deg,var(--ds-line) 25%,transparent 25%,transparent 75%,var(--ds-line) 75%),
    linear-gradient(45deg,var(--ds-line) 25%,transparent 25%,transparent 75%,var(--ds-line) 75%);
  background-size:var(--m) var(--m);
  background-position:0 0,calc(var(--m)/2) calc(var(--m)/2);
}

/* Filet or : séparateur récurrent */
.ds-rule{
  width:64px;height:1px;border:0;margin:0 0 var(--ds-s3);
  background:linear-gradient(90deg,var(--ds-gold),transparent);
}
.ds-rule--center{margin-inline:auto;
  background:linear-gradient(90deg,transparent,var(--ds-gold),transparent);width:120px}

/* Sur-titre en capitales espacées, repris de l'enseigne */
.ds-eyebrow{
  font-size:var(--ds-t-small);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ds-gold);
  margin:0 0 var(--ds-s2);
  font-weight:500;
}

/* --------------------------------------------------------------------------
   4. BOUTONS
   -------------------------------------------------------------------------- */
.ds-btn{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.9em 1.9em;
  font-size:.9375rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;
  border:1px solid var(--ds-gold);
  transition:background .3s var(--ds-ease),color .3s var(--ds-ease),transform .3s var(--ds-ease);
}
.ds-btn--solid{background:var(--ds-gold);color:var(--ds-ink-deep)}
.ds-btn--solid:hover{background:var(--ds-gold-light);border-color:var(--ds-gold-light);transform:translateY(-2px)}
.ds-btn--ghost{background:transparent;color:var(--ds-ivory)}
.ds-btn--ghost:hover{background:rgba(247,244,238,.1);transform:translateY(-2px)}
.ds-btn:active{transform:translateY(0)}

/* Vert WhatsApp officiel : c'est la reconnaissance de la couleur qui fait
   cliquer, la diluer en doré ferait perdre l'essentiel. On l'intègre par la
   forme (angles vifs, même graisse, mêmes capitales espacées) plutôt que par
   la teinte.
   Texte encre et non blanc : #25D366 sur blanc plafonne à ~1,8:1, très en
   dessous de AA. Sur l'encre du thème on est à ~9,8:1. */
.ds-btn--wa{background:var(--ds-wa);border-color:var(--ds-wa);color:var(--ds-ink-deep)}
.ds-btn--wa:hover{background:var(--ds-wa-light);border-color:var(--ds-wa-light);transform:translateY(-2px)}
.ds-btn__ico{width:1.15em;height:1.15em;flex:0 0 auto;fill:currentColor}

/* --------------------------------------------------------------------------
   5. EN-TÊTE
   -------------------------------------------------------------------------- */
.ds-hd{
  position:fixed;inset:0 0 auto 0;z-index:50;
  transition:background .4s var(--ds-ease),box-shadow .4s var(--ds-ease);
}
.ds-hd.is-stuck{
  background:rgba(22,26,33,.94);
  box-shadow:0 1px 0 var(--ds-line);
}
.ds-hd__in{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ds-s3);
  padding-block:var(--ds-s2);
}
.ds-hd__brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ds-ivory)}
.ds-hd__mark{width:30px;height:38px;flex-shrink:0}
.ds-hd__name{font-family:var(--ds-display);font-size:1.0625rem;letter-spacing:.16em;text-transform:uppercase;line-height:1}
/* Capitales imposées : le qualificatif vient du titre du site, sa casse de
   saisie ne doit pas casser le lockup de l'enseigne. */
.ds-hd__sub{display:block;font-family:var(--ds-body);font-size:.5625rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ds-gold);margin-top:.28em}

.ds-nav{display:flex;align-items:center;gap:var(--ds-s4)}
/* wp_nav_menu() rend un <ul> : il devient lui-même une piste flex. */
.ds-nav__list{
  display:flex;align-items:center;gap:var(--ds-s4);
  list-style:none;margin:0;padding:0;
}
.ds-nav a:not(.ds-btn){
  color:var(--ds-ivory);text-decoration:none;font-size:.875rem;letter-spacing:.05em;
  position:relative;padding-block:.35em;
}
/* §3.3 : on exclut le bouton de la règle générique des liens de nav */
.ds-nav a:not(.ds-btn)::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--ds-gold);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ds-ease);
}
.ds-nav a:not(.ds-btn):hover::after{transform:scaleX(1);transform-origin:left}

.ds-burger{
  display:none;background:transparent;border:0;padding:.4rem;cursor:pointer;
  color:var(--ds-ivory);line-height:0;
}
.ds-burger span{display:block;width:24px;height:1.5px;background:currentColor;margin:5px 0;
  transition:transform .3s var(--ds-ease),opacity .25s}
.ds-hd.is-open .ds-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.ds-hd.is-open .ds-burger span:nth-child(2){opacity:0}
.ds-hd.is-open .ds-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:900px){
  .ds-burger{display:block}
  .ds-hd:not(.is-stuck){background:linear-gradient(180deg,rgba(22,26,33,.75),transparent)}
  .ds-nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ds-ink-deep);
    border-top:1px solid var(--ds-line);
    padding:var(--ds-s2) var(--ds-s3) var(--ds-s4);
    display:none;
  }
  .ds-hd.is-open .ds-nav{display:flex}
  .ds-nav__list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .ds-nav a:not(.ds-btn){display:block;padding-block:.9em;border-bottom:1px solid rgba(247,244,238,.08)}
  .ds-nav .ds-btn{margin-top:var(--ds-s2);justify-content:center}
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.ds-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.ds-hero__media{position:absolute;inset:0}
.ds-hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* Voile : assez pour tenir le contraste AA du texte, assez léger pour
   que le ciel et la pierre de la façade restent lisibles. */
/* Voile : la façade est en pierre claire, il faut un dégradé gauche franc
   pour tenir le contraste AA du titre ivoire. Vérifié en capture. */
.ds-hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(22,26,33,.34) 0%,rgba(22,26,33,.05) 22%,rgba(22,26,33,.45) 55%,rgba(22,26,33,.92) 100%),
    linear-gradient(100deg,rgba(19,23,29,.90) 0%,rgba(19,23,29,.72) 30%,rgba(19,23,29,.30) 56%,transparent 78%);
}
.ds-hero__in{position:relative;width:100%;padding-block:var(--ds-s6) var(--ds-s5)}
.ds-hero__title{
  color:var(--ds-ivory);
  font-size:var(--ds-t-hero);
  letter-spacing:.02em;
  max-width:16ch;
}
.ds-hero__title em{font-style:normal;color:var(--ds-gold-light);display:block}
.ds-hero__lede{
  color:rgba(247,244,238,.9);max-width:46ch;
  font-size:clamp(1.0625rem,1.2vw,1.1875rem);
  margin:var(--ds-s3) 0 var(--ds-s4);
}
.ds-hero__cta{display:flex;flex-wrap:wrap;gap:var(--ds-s2)}

/* Mobile : le hero cesse d'être une image plein écran avec texte par-dessus.
   L'image prend son ratio natif (3/4) — donc le bâtiment est visible EN ENTIER,
   du toit à la rue — et le texte passe dessous sur fond ardoise. Bénéfice
   secondaire : plus aucun problème de contraste texte/photo. */
@media (max-width:768px){
  .ds-hero{min-height:0;display:block}
  .ds-hero__media{position:relative;aspect-ratio:3/4}
  .ds-hero__media img{object-position:50% 50%}
  .ds-hero__media::after{
    background:linear-gradient(180deg,rgba(22,26,33,.55) 0%,rgba(22,26,33,.05) 22%,
                                      transparent 70%,rgba(22,26,33,.35) 100%);
  }
  .ds-hero__in{
    background:var(--ds-ink-deep);
    padding-block:var(--ds-s4);
  }
  .ds-hero__title{max-width:none}
  .ds-hero__lede{margin-bottom:var(--ds-s3)}
}

/* Bandeau d'accroche sous le hero */
.ds-strip{background:var(--ds-ink-deep);color:var(--ds-ivory)}
.ds-strip__in{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-inline:1px solid rgba(247,244,238,.08);
}
.ds-strip__item{
  padding:var(--ds-s4) var(--ds-s3);
  border-left:1px solid rgba(247,244,238,.08);
}
.ds-strip__item:first-child{border-left:0}
.ds-strip__k{font-family:var(--ds-display);font-size:1.4rem;color:var(--ds-gold);display:block;margin-bottom:.2em}
.ds-strip__v{font-size:.875rem;color:rgba(247,244,238,.7);margin:0}
@media (max-width:700px){
  .ds-strip__in{grid-template-columns:minmax(0,1fr)}
  .ds-strip__item{border-left:0;border-top:1px solid rgba(247,244,238,.08);padding-block:var(--ds-s3)}
  .ds-strip__item:first-child{border-top:0}
}

/* --------------------------------------------------------------------------
   7. SECTIONS GÉNÉRIQUES
   -------------------------------------------------------------------------- */
.ds-sec{padding-block:var(--ds-s7)}
.ds-sec--dark{background:var(--ds-ink);color:var(--ds-ivory)}
.ds-sec--dark h2,.ds-sec--dark h3{color:var(--ds-ivory)}
.ds-sec--sand{background:var(--ds-sand)}
.ds-sec__head{max-width:56ch;margin-bottom:var(--ds-s5)}
.ds-sec__head--center{text-align:center;margin-inline:auto}
.ds-sec__title{font-size:var(--ds-t-h2)}
.ds-sec__lede{margin:var(--ds-s3) 0 0;color:var(--ds-ink-soft)}
.ds-sec--dark .ds-sec__lede{color:rgba(247,244,238,.72)}

/* --------------------------------------------------------------------------
   8. CHAMBRES
   -------------------------------------------------------------------------- */
.ds-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--ds-s3)}
.ds-room{
  background:var(--ds-ivory);
  border:1px solid rgba(32,37,46,.1);
  display:flex;flex-direction:column;
  transition:border-color .35s var(--ds-ease),transform .35s var(--ds-ease),box-shadow .35s var(--ds-ease);
}
.ds-room:hover{
  border-color:var(--ds-gold);
  transform:translateY(-4px);
  box-shadow:0 14px 34px -18px rgba(32,37,46,.45);
}
/* Placeholder photo : aspect-ratio réservé → zéro CLS même sans image (§5) */
.ds-room__ph{
  position:relative;aspect-ratio:4/3;
  background:linear-gradient(150deg,var(--ds-ink) 0%,var(--ds-ink-soft) 100%);
  display:grid;place-items:center;overflow:hidden;
}
/* Trame fine reprise du moucharabieh du logo — discrète, pas un damier. */
.ds-room__ph::before{
  content:"";position:absolute;inset:0;opacity:.07;
  background-image:
    repeating-linear-gradient(45deg,var(--ds-gold) 0 1px,transparent 1px 15px),
    repeating-linear-gradient(-45deg,var(--ds-gold) 0 1px,transparent 1px 15px);
}
.ds-room__ph::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 38%,rgba(201,162,39,.12),transparent 62%);
}
.ds-room__arch{position:relative;width:44px;height:56px;opacity:.85}
/* Vignette réelle d'une chambre, quand le client en a téléversé une. */
.ds-room__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ds-ease);
}
.ds-room:hover .ds-room__img{transform:scale(1.04)}
.ds-room__soon{
  position:absolute;bottom:.75rem;left:0;right:0;text-align:center;
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(247,244,238,.5);
}
.ds-room__body{padding:var(--ds-s3);display:flex;flex-direction:column;gap:.5rem;flex:1}
.ds-room__name{font-size:var(--ds-t-h3)}
.ds-room__meta{font-size:.8125rem;color:var(--ds-ink-soft);margin:0}
.ds-room__price{
  margin-top:auto;padding-top:var(--ds-s2);
  border-top:1px solid rgba(32,37,46,.1);
  font-family:var(--ds-display);font-size:1.5rem;color:var(--ds-ink);
}
.ds-room__price span{font-family:var(--ds-body);font-size:.75rem;letter-spacing:.1em;color:var(--ds-ink-soft)}

.ds-note{
  margin-top:var(--ds-s4);padding:var(--ds-s3);
  border-left:2px solid var(--ds-gold);
  background:rgba(201,162,39,.07);
  font-size:.875rem;color:var(--ds-ink-soft);
}

/* --------------------------------------------------------------------------
   9. DUO IMAGE + TEXTE
   -------------------------------------------------------------------------- */
.ds-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ds-s5);align-items:center}
.ds-duo--flip .ds-duo__media{order:2}
.ds-duo__media{position:relative}
.ds-duo__media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.ds-duo__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid var(--ds-line);transform:translate(14px,14px);
}
@media (max-width:860px){
  .ds-duo{grid-template-columns:minmax(0,1fr);gap:var(--ds-s4)}
  .ds-duo--flip .ds-duo__media{order:0}
  .ds-duo__media::after{transform:translate(8px,8px)}
}
.ds-list{list-style:none;margin:var(--ds-s3) 0 0;padding:0;display:grid;gap:.7rem}
.ds-list li{position:relative;padding-left:1.6rem;font-size:.9375rem}
.ds-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border:1px solid var(--ds-gold);transform:rotate(45deg);
}

/* --------------------------------------------------------------------------
   10. GALERIE — assume le format portrait des photos source
   -------------------------------------------------------------------------- */
/* align-items:start — sinon les figures s'étirent à la hauteur de la rangée et
   la légende, ancrée en bas de la figure, décroche du bas de l'image. */
.ds-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ds-s2);align-items:start}
.ds-gal__it{position:relative;overflow:hidden;background:var(--ds-ink);margin:0}
.ds-gal__it img{
  width:100%;aspect-ratio:9/16;object-fit:cover;
  transition:transform .7s var(--ds-ease),opacity .5s;
}
.ds-gal__it:hover img{transform:scale(1.05)}
.ds-gal__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--ds-s4) var(--ds-s2) var(--ds-s2);
  background:linear-gradient(transparent,rgba(22,26,33,.85));
  color:var(--ds-ivory);font-size:.8125rem;letter-spacing:.05em;
}
@media (max-width:900px){.ds-gal{grid-template-columns:repeat(2,1fr)}}

/* --------------------------------------------------------------------------
   11. CONTACT
   -------------------------------------------------------------------------- */
/* minmax(0,1fr) et NON 1fr : `1fr` = `minmax(auto,1fr)`, dont le minimum est la
   largeur min-content. Un <input type="date"> a une largeur intrinsèque
   incompressible (~172px) : avec `1fr`, la grille refuse de descendre sous
   2×172+gap = 360px et déborde le viewport mobile. Vérifié en mesurant
   gridTemplateColumns = 359.562px dans un conteneur de 327px. */
.ds-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ds-s5)}
@media (max-width:860px){.ds-contact{grid-template-columns:minmax(0,1fr);gap:var(--ds-s4)}}
.ds-info{display:grid;gap:var(--ds-s3);margin:0}
.ds-info div{display:grid;gap:.25rem}
.ds-info dt{font-size:var(--ds-t-small);letter-spacing:.18em;text-transform:uppercase;color:var(--ds-gold)}
.ds-info dd{margin:0;font-size:1.0625rem}
/* §3.3 : `.ds-info a` (0,2,0) écraserait un `.ds-btn` (0,1,0) posé dans le bloc
   et lui collerait un soulignement. On exclut explicitement les boutons. */
.ds-info a:not(.ds-btn){text-decoration:none;border-bottom:1px solid var(--ds-line);transition:border-color .3s}
.ds-info a:not(.ds-btn):hover{border-color:var(--ds-gold)}
.ds-contact__wa{margin:0 0 var(--ds-s4)}

.ds-form{display:grid;gap:var(--ds-s2)}
.ds-field{display:grid;gap:.4rem}
.ds-field label{font-size:var(--ds-t-small);letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,238,.66)}
.ds-field input,.ds-field textarea,.ds-field select{
  font-family:inherit;font-size:1rem;color:var(--ds-ivory);
  background:rgba(247,244,238,.05);
  border:1px solid rgba(247,244,238,.16);
  padding:.8em .9em;width:100%;min-width:0; /* min-width:0 → autorise le champ à rétrécir */
  transition:border-color .3s var(--ds-ease),background .3s var(--ds-ease);
}
.ds-field input:focus,.ds-field textarea:focus,.ds-field select:focus{
  border-color:var(--ds-gold);background:rgba(247,244,238,.08)
}
/* Chevron dessiné en CSS : pas de fichier image pour une flèche de 8px. */
.ds-field select{
  appearance:none;-webkit-appearance:none;
  padding-right:2.4em;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ds-gold) 50%),
                   linear-gradient(135deg,var(--ds-gold) 50%,transparent 50%);
  background-position:calc(100% - 1.15em) center,calc(100% - .8em) center;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
/* Le menu déroulant natif s'affiche aux couleurs de l'OS : forcer un fond
   lisible, sinon texte ivoire sur fond blanc système. */
.ds-field select option{background:var(--ds-ink-deep);color:var(--ds-ivory)}
.ds-field--duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-s2)}
@media (max-width:400px){.ds-field--duo{grid-template-columns:minmax(0,1fr)}}
.ds-form .ds-btn{justify-content:center;margin-top:var(--ds-s1)}

/* Honeypot anti-robots : masqué visuellement sans display:none, que certains
   robots détectent. Retiré du parcours clavier via tabindex="-1". */
.ds-piege{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* Retour après envoi du formulaire */
.ds-retour{
  margin:0 0 var(--ds-s3);padding:.85em 1.1em;
  border-left:2px solid var(--ds-gold);
  background:rgba(201,162,39,.1);
  font-size:.9375rem;color:var(--ds-ivory);
}
.ds-retour--ko{border-left-color:#C46B5A;background:rgba(196,107,90,.12)}

/* --------------------------------------------------------------------------
   11 bis. PAGES DE CONTENU (mentions légales, confidentialité…)
   -------------------------------------------------------------------------- */
.ds-page{padding-top:calc(var(--ds-s7) + 4rem)}
.ds-page__in{max-width:74ch}
.ds-page__head{margin-bottom:var(--ds-s4)}
.ds-prose{font-size:1.0625rem;line-height:1.75}
.ds-prose > * + *{margin-top:var(--ds-s3)}
.ds-prose h2{font-size:var(--ds-t-h3);margin-top:var(--ds-s5)}
.ds-prose h3{font-size:1.125rem;margin-top:var(--ds-s4)}
.ds-prose ul,.ds-prose ol{padding-left:1.4em}
.ds-prose li + li{margin-top:.4rem}
.ds-prose a{color:var(--ds-ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--ds-gold)}
.ds-prose img{margin-block:var(--ds-s3)}

/* --------------------------------------------------------------------------
   11 ter. CARTE — façade cliquable
   Aucun octet Google avant clic. Le ratio est réservé côté conteneur, donc
   l'insertion de l'iframe ne provoque aucun décalage (CLS = 0).
   -------------------------------------------------------------------------- */
.ds-map{background:var(--ds-ink)}
/* Le ratio est porte par le conteneur, pas par l'iframe : l'espace est reserve
   avant que Google reponde -> aucun decalage quand la carte arrive. */
.ds-map__frame{
  position:relative;
  aspect-ratio:1200/420;
  min-height:320px;
  overflow:hidden;
  background:var(--ds-ink-deep);
}
.ds-map__iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
/* Bandeau sous la carte. L'adresse etait auparavant posee EN SURIMPRESSION du
   plan, ce qui imposait un voile degrade pour tenir le contraste ; sur une vraie
   carte Google ce voile masquerait les rues. Elle passe donc dessous, sur fond
   plein : contraste garanti et carte entierement lisible. */
.ds-map__bar{background:var(--ds-ink);padding-block:var(--ds-s4)}
.ds-map__adr{
  font-family:var(--ds-display);
  font-size:clamp(1.35rem,2.4vw,1.9rem);
  line-height:1.28;color:var(--ds-ivory);
  margin:0 0 var(--ds-s3);
}
.ds-map__adr a{
  text-decoration:none;
  border-bottom:1px solid rgba(201,162,39,.45);
  transition:border-color .3s var(--ds-ease),color .3s var(--ds-ease);
}
.ds-map__adr a:hover{color:var(--ds-gold);border-color:var(--ds-gold)}
.ds-map__act{display:flex;flex-wrap:wrap;gap:var(--ds-s2)}

/* Numéro mis en avant dans le pied de page : traité comme un titre, pas comme
   une ligne de coordonnées. C'est le premier canal de conversion du site. */
.ds-ft__tel{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--ds-display);
  font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.1;color:var(--ds-gold);
  text-decoration:none;margin:0 0 .6rem;
  transition:color .3s var(--ds-ease)}
.ds-ft__tel svg{width:.85em;height:.85em;flex:0 0 auto;fill:currentColor}
.ds-ft__tel:hover{color:var(--ds-gold-light)}
.ds-ft__adr{margin:0;font-size:.875rem}
.ds-ft__adr a{
  text-decoration:none;
  border-bottom:1px solid rgba(247,244,238,.28);
  transition:border-color .3s var(--ds-ease),color .3s var(--ds-ease)}
.ds-ft__adr a:hover{color:var(--ds-gold);border-color:var(--ds-gold)}

@media (max-width:700px){
  /* 1200/420 est un format tres panoramique : sur un ecran etroit il ne
     resterait qu'une bande de 130px de haut, illisible. Hauteur fixe. */
  .ds-map__frame{aspect-ratio:auto;height:300px;min-height:0}
}

/* --------------------------------------------------------------------------
   12. PIED DE PAGE
   -------------------------------------------------------------------------- */
.ds-ft{background:var(--ds-ink-deep);color:rgba(247,244,238,.62);padding-block:var(--ds-s5) var(--ds-s4)}
.ds-ft__in{display:flex;flex-wrap:wrap;gap:var(--ds-s4);justify-content:space-between;align-items:flex-start}
.ds-ft__brand{font-family:var(--ds-display);color:var(--ds-ivory);font-size:1.25rem;letter-spacing:.16em;text-transform:uppercase}
.ds-ft__links{display:flex;flex-wrap:wrap;gap:var(--ds-s3);list-style:none;margin:0;padding:0;font-size:.875rem}
.ds-ft__links a{text-decoration:none}
.ds-ft__links a:hover{color:var(--ds-gold)}
.ds-ft__legal{
  margin-top:var(--ds-s4);padding-top:var(--ds-s3);
  border-top:1px solid rgba(247,244,238,.1);
  font-size:.8125rem;display:flex;flex-wrap:wrap;gap:var(--ds-s2) var(--ds-s3);justify-content:space-between;
}

/* Signature agence. Lien externe suivi (pas de rel="nofollow") ;
   `noopener` est là pour la sécurité de target=_blank et n'affecte pas le SEO. */
.ds-ft__by{
  margin:var(--ds-s3) 0 0;
  padding-top:var(--ds-s3);
  border-top:1px solid rgba(247,244,238,.07);
  text-align:center;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(247,244,238,.4);
}
.ds-ft__by a{
  color:rgba(247,244,238,.68);
  text-decoration:none;
  border-bottom:1px solid var(--ds-line);
  padding-bottom:1px;
  transition:color .3s var(--ds-ease),border-color .3s var(--ds-ease);
}
.ds-ft__by a:hover{color:var(--ds-gold);border-color:var(--ds-gold)}

/* Bouton WhatsApp flottant.
   Desktop uniquement : sous 768px la barre d'action fixée en bas porte déjà
   WhatsApp, et empiler les deux donnerait deux CTA identiques à 60px d'écart. */
.ds-fab{
  position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:45;
  display:none;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;
  background:var(--ds-wa);color:var(--ds-ink-deep);
  box-shadow:0 10px 28px -8px rgba(22,26,33,.5);
  transition:transform .3s var(--ds-ease),box-shadow .3s var(--ds-ease);
}
.ds-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 34px -10px rgba(22,26,33,.55)}
.ds-fab:active{transform:translateY(0) scale(1)}
.ds-fab svg{width:32px;height:32px;fill:currentColor}
@media (min-width:769px){.ds-fab{display:flex}}
@media (prefers-reduced-motion:reduce){
  .ds-fab,.ds-fab:hover{transition:none;transform:none}
}
@media print{.ds-fab{display:none}}

/* Barre d'appel mobile — zéro JS, un simple <a> */
.ds-callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  box-shadow:0 -6px 20px -10px rgba(0,0,0,.5);
}
.ds-callbar__act{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:.95rem .6rem;
  text-align:center;text-decoration:none;font-weight:600;letter-spacing:.08em;
  font-size:.9375rem;color:var(--ds-ink-deep);
}
.ds-callbar__act--tel{background:var(--ds-gold)}
.ds-callbar__act--wa{background:var(--ds-wa)}
.ds-callbar__ico{width:1.15em;height:1.15em;flex:0 0 auto;fill:currentColor}
@media (max-width:768px){
  /* minmax(0,1fr) et non 1fr : le minimum d'un `1fr` nu est min-content, et
     un libellé indivisible ferait déborder la barre. */
  .ds-callbar{display:grid;grid-template-columns:minmax(0,1fr)}
  .ds-callbar--duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* Dégager la hauteur de la barre d'appel : sinon elle recouvre le dernier
     CTA du hero et le bas du pied de page. */
  .ds-ft{padding-bottom:calc(var(--ds-s4) + 3.4rem)}
}

/* --------------------------------------------------------------------------
   12BIS. L'ARCHE ET LE MOUVEMENT
   --------------------------------------------------------------------------
   Toute l'audace est dépensée à un seul endroit : l'arche de l'enseigne.
   Elle ne servait jusqu'ici que de pictogramme dans les cartes SANS photo —
   la marque n'apparaissait donc que là où le contenu manquait. Elle devient
   l'ouverture par laquelle on regarde chaque chambre, pleine ou vide.

   Tout le mouvement ci-dessous ne touche que `transform` et `opacity` : c'est
   composé par le GPU, ça ne déclenche ni layout ni paint, donc aucun coût INP.
   -------------------------------------------------------------------------- */

/* L'ouverture en arc. Un vrai arc outrepassé demanderait un masque SVG qui se
   déforme au redimensionnement ; un rayon elliptique donne la même lecture,
   reste net à toute taille et coûte 0 octet. */
/* Le rayon est en pourcentage, donc proportionnel — mais une carte large
   (mobile, 1 colonne) donnait un dôme lourd là où la carte étroite du desktop
   restait fine. On plafonne la hauteur de la courbe en valeur absolue. */
.ds-room__ph{border-radius:44% 44% 0 0 / 62px 62px 0 0}

/* La photo respire à l'entrée dans le cadre, puis se pose. */
.ds-anim .ds-rv .ds-room__img{transform:scale(1.10);transition:transform 1.1s var(--ds-ease)}
.ds-anim .ds-rv.is-in .ds-room__img{transform:scale(1)}
.ds-room:hover .ds-room__img{transform:scale(1.05)}

/* Le prix est le point de décision : il s'allume quand la carte est survolée. */
.ds-room__price{transition:color .35s var(--ds-ease)}
.ds-room:hover .ds-room__price{color:var(--ds-gold)}

/* Le filet or est le motif répété du site. Le faire SE TRACER à l'arrivée le
   transforme en signe de ponctuation : chaque section s'ouvre du même geste. */
.ds-anim .ds-rv .ds-rule{width:0;transition:width .9s var(--ds-ease) .15s}
.ds-anim .ds-rv.is-in .ds-rule{width:64px}
.ds-anim .ds-rv .ds-rule--center{width:0}
.ds-anim .ds-rv.is-in .ds-rule--center{width:120px}

/* Dérive lente du hero. Une photo fixe est une photo morte ; 26 s pour 6 % de
   zoom, c'est en dessous du seuil de perception consciente — on ne voit pas
   l'animation, on sent que l'image est vivante. */
@keyframes ds-derive{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.06) translate3d(0,-1.2%,0)}
}
.ds-hero__media img{
  animation:ds-derive 26s var(--ds-ease) infinite alternate;
  will-change:transform;
}

/* Entrée du hero, en cascade. Le lecteur reçoit l'information dans l'ordre où
   elle compte : le lieu, la promesse, la preuve, l'action. */
@keyframes ds-monte{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:none}
}
.ds-hero__in > *{animation:ds-monte .9s var(--ds-ease) both}
.ds-hero__in > .ds-eyebrow{animation-delay:.10s}
.ds-hero__in > .ds-hero__title{animation-delay:.20s}
.ds-hero__in > .ds-hero__lede{animation-delay:.34s}
.ds-hero__in > .ds-hero__cta{animation-delay:.46s}
/* La seconde ligne du titre arrive après la première : le lockup de l'enseigne
   se compose sous les yeux du visiteur. */
.ds-hero__title em{animation:ds-monte .9s var(--ds-ease) both;animation-delay:.30s}

/* Les tuiles du bandeau arrivent l'une après l'autre plutôt qu'en bloc. */
.ds-strip__item{animation:ds-monte .8s var(--ds-ease) both}
.ds-strip__item:nth-child(1){animation-delay:.55s}
.ds-strip__item:nth-child(2){animation-delay:.65s}
.ds-strip__item:nth-child(3){animation-delay:.75s}

/* --------------------------------------------------------------------------
   13. RÉVÉLATION AU SCROLL
   -------------------------------------------------------------------------- */
/* Le contenu est visible PAR DÉFAUT. Il n'est masqué que si la classe .ds-anim
   a été posée sur <html> par le script inline du <head> — donc si JS tourne.
   Sans JS, script bloqué, ou erreur d'exécution : la page reste entièrement
   lisible au lieu de s'afficher vide. */
.ds-anim .ds-rv{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ds-ease),transform .8s var(--ds-ease);
}
.ds-anim .ds-rv.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .ds-body *,.ds-body *::before,.ds-body *::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
  .ds-anim .ds-rv{opacity:1;transform:none}
  /* Les états d'arrivée doivent être posés explicitement : une animation
     réduite à 0,01 ms se termine sur sa frame finale, mais les transitions
     pilotées par une classe, elles, resteraient sur leur état de départ. */
  .ds-anim .ds-rv .ds-rule{width:64px}
  .ds-anim .ds-rv .ds-rule--center{width:120px}
  .ds-anim .ds-rv .ds-room__img{transform:none}
  .ds-hero__media img{animation:none}
}

/* À l'impression / export PDF, rien ne scrolle : sans ça, tout le corps de
   page sortirait blanc. */
@media print{
  .ds-anim .ds-rv{opacity:1!important;transform:none!important}
  .ds-hd,.ds-callbar{position:static}
}