/* NÃ-TOMA — Identité « Héritage affiné ». Tokens définitifs (cf. handoff logo). */
:root{
/* Couleurs charte */
--n-charcoal:#17161B;--n-charcoal-2:#2A2A2A;--n-ivory:#F6F2E7;--n-bg:#FBFAF6;--n-card:#E9E6DE;
--n-gold:#C9A445;--n-gold-deep:#A9832F;--n-gold-dark:#8E6E2E;
--n-text:#17161B;--n-text-2:#79715E;--n-text-3:#6E6757;
--n-border:#D8D3C6;--n-border-2:#E4DFD2;
/* Fonctionnel (dérivé, terreux — PMS) */
--n-ok:#5C6B4E;--n-ok-bg:#E7EADF;--n-warn:#B08A3E;--n-warn-bg:#F4EAD3;
--n-danger:#9C5B41;--n-danger-bg:#F0DED5;--n-info:#55697A;--n-info-bg:#DFE5EA;
/* Type */
--n-serif:'Cormorant Garamond',Garamond,Georgia,serif;
--n-caps:'Cinzel','Cormorant Garamond',serif;
--n-sans:'Cormorant Garamond',Georgia,serif;
--n-mono:'IBM Plex Mono',ui-monospace,monospace;
/* Divers */
--n-r:2px;--n-shadow:0 1px 2px rgba(23,22,27,.04);--n-shadow-lg:0 24px 64px rgba(23,22,27,.10)
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--n-bg);color:var(--n-text);font-family:var(--n-serif);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;text-wrap:pretty}
h1,h2,h3,h4,h5{font-family:var(--n-serif);font-weight:600;color:var(--n-charcoal);margin:0;line-height:1.12;letter-spacing:-.005em;text-wrap:balance}
p{margin:0}
img{display:block;max-width:100%}
a{color:var(--n-gold-dark);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--n-gold)}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--n-gold);color:var(--n-charcoal)}

/* ── Labels Cinzel (compensation du letter-spacing au centrage) ── */
.n-label{font-family:var(--n-caps);font-weight:500;font-size:11px;letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:var(--n-gold-deep)}
.n-label--sm{font-size:9.5px;letter-spacing:.24em;padding-left:.24em}
.n-label--lg{font-size:12px;letter-spacing:.34em;padding-left:.34em}
.n-label--ink{color:var(--n-charcoal)}
.n-label--mute{color:var(--n-text-2)}
.n-label--ivory{color:var(--n-ivory)}
.n-label--gold{color:var(--n-gold)}

/* Sur-titre de section : label or + filet */
.n-eyebrow{display:inline-block;font-family:var(--n-caps);font-weight:500;font-size:11px;letter-spacing:.3em;padding:0 0 8px .3em;text-transform:uppercase;color:var(--n-gold-deep);border-bottom:1px solid var(--n-gold)}

/* ── Échelle titres ── */
.n-d1{font-size:clamp(44px,5.2vw,72px);font-weight:600;line-height:1.04}
.n-d2{font-size:clamp(36px,3.9vw,56px);font-weight:600;line-height:1.08}
.n-h1{font-size:42px;font-weight:600}
.n-h2{font-size:34px;font-weight:600}
.n-h3{font-size:26px;font-weight:600}
.n-h4{font-size:21px;font-weight:600}
.n-lead{font-size:19px;line-height:1.66;color:var(--n-text-3)}
.n-body{font-size:16.5px;line-height:1.68;color:var(--n-text-3)}
.n-small{font-size:14px;line-height:1.6;color:var(--n-text-2)}
.n-it{font-style:italic;color:var(--n-gold-deep)}

/* ── Boutons ── */
.n-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--n-caps);font-weight:500;font-size:11.5px;letter-spacing:.14em;padding:15px 30px;text-transform:uppercase;background:var(--n-charcoal);color:var(--n-ivory);border:1px solid var(--n-charcoal);border-radius:var(--n-r);cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.n-btn:hover{background:var(--n-charcoal-2);border-color:var(--n-gold);color:var(--n-ivory)}
.n-btn:disabled{opacity:.38;cursor:not-allowed;border-color:var(--n-charcoal)}
.n-btn--sec{background:transparent;color:var(--n-charcoal);border-color:var(--n-gold)}
.n-btn--sec:hover{background:rgba(201,164,69,.1);color:var(--n-charcoal);border-color:var(--n-gold-deep)}
.n-btn--light{background:transparent;color:var(--n-ivory);border-color:rgba(246,242,231,.42)}
.n-btn--light:hover{background:var(--n-ivory);color:var(--n-charcoal);border-color:var(--n-ivory)}
.n-btn--gold{background:var(--n-gold-deep);border-color:var(--n-gold-deep);color:var(--n-ivory)}
.n-btn--gold:hover{background:var(--n-gold-dark);border-color:var(--n-gold);color:var(--n-ivory)}
.n-btn--sm{padding:10px 18px;font-size:10px;letter-spacing:.12em}
.n-btn--lg{padding:18px 38px;font-size:12px}
.n-btn--block{width:100%}
.n-link-caps{font-family:var(--n-caps);font-size:11px;letter-spacing:.2em;padding-left:.2em;text-transform:uppercase;color:var(--n-charcoal);border-bottom:1px solid var(--n-gold);padding-bottom:5px;display:inline-block}
.n-link-caps:hover{color:var(--n-gold-deep);border-color:var(--n-gold-deep)}

/* ── Filets & vagues ── */
.n-rule{height:1px;background:var(--n-border);border:0;width:100%}
.n-rule--gold{background:var(--n-gold)}
.n-rule--dark{background:rgba(246,242,231,.16)}

/* ── Champs ── */
.n-field{display:block}
.n-field > span{display:block;font-family:var(--n-caps);font-size:9.5px;letter-spacing:.24em;padding-left:.24em;text-transform:uppercase;color:var(--n-text-2);margin-bottom:7px}
.n-input{width:100%;background:#fff;border:1px solid var(--n-border);border-radius:var(--n-r);padding:12px 14px;font-size:16px;color:var(--n-charcoal);outline:none;transition:border-color .18s ease}
.n-input:focus{border-color:var(--n-gold)}
.n-input::placeholder{color:#B3AB98}
select.n-input{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2379715E' stroke-width='1.4'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.n-input--err{border-color:var(--n-danger)}
.n-err{font-size:13px;color:var(--n-danger);margin-top:5px;font-style:italic}

/* ── Cartes ── */
.n-card{background:#fff;border:1px solid var(--n-border);border-radius:var(--n-r)}
.n-card--soft{background:var(--n-card);border-color:var(--n-border-2)}

/* ── Puce vague or ── */
.n-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.n-bullets li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:baseline;font-size:16px;color:var(--n-text-3)}
.n-bullets li::before{content:"";display:block;height:11px;margin-top:6px;background:var(--n-gold-deep);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 14'><path d='M3 9 C 9 2, 17 3, 23 8 C 29 13, 37 13, 43 5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 14'><path d='M3 9 C 9 2, 17 3, 23 8 C 29 13, 37 13, 43 5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") no-repeat center/contain}

/* ── Prix ── */
.n-price{font-size:24px;font-weight:600;color:var(--n-charcoal);font-variant-numeric:lining-nums tabular-nums}
.n-price em{font-style:normal;color:var(--n-gold-deep);font-size:.62em;letter-spacing:.06em;margin-left:4px}
.n-price small{font-size:14px;font-weight:400;color:var(--n-text-2)}

/* ── Badges ── */
.n-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--n-caps);font-size:9px;letter-spacing:.16em;padding:4px 9px 4px 10px;text-transform:uppercase;border:1px solid var(--n-border);color:var(--n-text-3);background:#fff;border-radius:var(--n-r)}
.n-badge--ok{background:var(--n-ok-bg);border-color:transparent;color:#3E4A33}
.n-badge--warn{background:var(--n-warn-bg);border-color:transparent;color:#7C5D1F}
.n-badge--danger{background:var(--n-danger-bg);border-color:transparent;color:#7A4028}
.n-badge--info{background:var(--n-info-bg);border-color:transparent;color:#3A4A57}
.n-badge--gold{background:rgba(201,164,69,.16);border-color:transparent;color:var(--n-gold-dark)}
.n-badge--dark{background:var(--n-charcoal);border-color:transparent;color:var(--n-ivory)}

.n-num{font-variant-numeric:lining-nums tabular-nums}
.n-scroll-lock{overflow:hidden}
@keyframes n-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.n-fade{animation:n-fade .42s cubic-bezier(.2,.7,.3,1) both}
@keyframes n-in{from{opacity:0}to{opacity:1}}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — ajouté le 30/07/2026.
   ───────────────────────────────────────────────────────────────────────────
   RÈGLE DE NON-RÉGRESSION : hormis (a) le bloc « prefers-reduced-motion » et
   (b) le tiroir de navigation mobile — dont le balisage n'est jamais rendu
   au-delà de 1023 px —, TOUTE règle ci-dessous vit dans une media query
   « max-width ». À 1280 px, aucune ne s'applique : le rendu de bureau validé
   est inchangé au pixel près.

   Le `!important` est requis et assumé : la mise en page est portée par des
   styles en ligne dans le JSX, qu'une feuille externe ne peut sinon pas
   surcharger. Il est confiné aux media queries.

   Deux paliers :
     ≤ 1023 px — tablette : navigation repliée, colonnes resserrées.
     ≤  767 px — téléphone : une seule colonne, typographie recalée.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tiroir de navigation (balisage rendu uniquement sous 1024 px) ────────── */
@keyframes nt-drawer-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.nt-drawer{position:fixed;inset:0;z-index:150;background:var(--n-charcoal);color:var(--n-ivory);
  display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
  animation:nt-drawer-in .24s cubic-bezier(.2,.7,.3,1) both}
.nt-drawer__top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:72px;padding:0 24px;flex-shrink:0;border-bottom:1px solid rgba(246,242,231,.14)}
.nt-drawer__nav{padding:8px 24px 0}
.nt-drawer__link{display:flex;align-items:center;justify-content:space-between;
  min-height:56px;padding:6px 0;border-bottom:1px solid rgba(246,242,231,.12);
  font-family:var(--n-caps);font-size:15px;letter-spacing:.16em;padding-left:.16em;
  text-transform:uppercase;color:rgba(246,242,231,.86)}
.nt-drawer__link[aria-current="page"]{color:var(--n-gold)}
.nt-drawer__link[aria-current="page"]::after{content:"";width:26px;height:1px;background:var(--n-gold)}
.nt-drawer__foot{margin-top:auto;padding:26px 24px calc(26px + env(safe-area-inset-bottom))}
.nt-drawer__call{display:flex;align-items:center;min-height:52px;font-size:19px;
  color:var(--n-ivory);border-bottom:1px solid rgba(246,242,231,.12)}
.nt-drawer__mail{display:flex;align-items:center;min-height:52px;font-size:16px;
  color:rgba(246,242,231,.74);border-bottom:1px solid rgba(246,242,231,.12)}
.nt-drawer__lang{display:flex;gap:10px;padding-top:20px}
.nt-drawer__lang button{min-height:44px;padding:0 16px;background:none;cursor:pointer;
  border:1px solid rgba(246,242,231,.22);border-radius:var(--n-r);
  font-family:var(--n-caps);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(246,242,231,.62)}
.nt-drawer__lang button[aria-pressed="true"]{color:var(--n-charcoal);background:var(--n-gold);border-color:var(--n-gold)}
.nt-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 9px;background:none;border:0;cursor:pointer;flex-shrink:0}
.nt-burger span{display:block;height:1.5px;width:100%;background:currentColor}
.nt-burger--over{color:var(--n-ivory)}
.nt-burger--ink{color:var(--n-charcoal)}

/* Barre de réservation fixe en bas — fiche chambre, téléphone uniquement.
   Rendue par le JSX seulement sous 768 px. */
.nt-bookbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;
  justify-content:space-between;gap:14px;background:rgba(251,250,246,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--n-border);padding:12px 20px calc(12px + env(safe-area-inset-bottom))}
.nt-bookbar__price{line-height:1.15}
body.nt-bookbar-on{padding-bottom:78px}

/* ── Accessibilité : mouvement réduit ─────────────────────────────────────
   Seule règle hors media query « max-width ». Elle ne s'applique qu'aux
   utilisateurs qui ont demandé la réduction des animations au niveau système :
   ce n'est pas une modification du rendu validé, c'est le respect d'un
   réglage d'accessibilité. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .n-fade,.nt-drawer{animation:none !important}
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
}


/* ═══ ≤ 1023 px — TABLETTE ═══════════════════════════════════════════════ */
@media (max-width:1023px){

  /* Gouttières : 40 px de bureau → 28 px. */
  .nt-wrap{padding-left:28px !important;padding-right:28px !important}

  /* En-tête : 104 px → 72 px. Le décalage négatif du bandeau transparent suit. */
  .nt-header-bar{height:72px !important;gap:14px !important}
  .nt-header--float{margin-bottom:-72px !important}

  /* Tout ce qui colle : le collage à droite n'a plus de sens en une colonne. */
  .nt-sticky{position:static !important;top:auto !important}
  .nt-filters{top:72px !important}

  /* Grilles de cartes : 3 → 2. */
  .nt-grid-3{grid-template-columns:repeat(2,1fr) !important}
  /* Variante à filets : l'écart de 1 px EST le trait de séparation, on n'y touche pas. */
  .nt-grid-rule-3{grid-template-columns:repeat(2,1fr) !important}

  /* Deux colonnes : on resserre l'écart de 76-80 px avant de l'empiler. */
  .nt-2col{gap:44px !important}

  /* Un élément de grille a `min-width:auto` par défaut : il s'élargit au lieu
     de laisser défiler son contenu, et les bandes horizontales (vignettes,
     autres catégories) débordaient donc la page entière. */
  .nt-2col > *,.nt-2col--early > *{min-width:0}

  /* Sections à deux colonnes dont la colonne étroite devient inutilisable
     bien avant 768 px (panneau de 340-380 px). */
  .nt-2col--early{grid-template-columns:1fr !important;gap:40px !important}

  /* Fiche chambre en liste (page Chambres, vue « liste »). */
  .nt-list-card{grid-template-columns:180px 1fr !important;gap:22px !important}
  .nt-list-card__buy{grid-column:1 / -1 !important;border-left:0 !important;padding-left:0 !important;
    padding-top:18px !important;border-top:1px solid var(--n-border);
    align-items:stretch !important;min-width:0 !important}

  /* Barre de réservation — palier tablette.
     Les quatre champs tiennent encore côte à côte sur 768 px, mais plus le
     bouton : à côté d'eux il déborde de 63 px et se fait rogner par
     l'`overflow:hidden` du bandeau. Il passe donc sur sa propre rangée,
     pleine largeur — ce qui, accessoirement, lui donne la présence qu'on
     veut lui donner. */
  .nt-searchbar{grid-template-columns:repeat(4,1fr) !important}
  .nt-sb-cta{grid-column:1 / -1 !important;margin-left:0 !important;
    width:100%;margin-top:14px}

  /* Bandeau restaurant de l'accueil : la photo n'a plus besoin de 620 px. */
  .nt-band__img{min-height:420px !important}
  .nt-band__body{padding:64px 40px !important}

  .nt-footer-cols{grid-template-columns:1fr 1fr !important;gap:40px !important}

  /* ── Zones tactiles : rien d'interactif sous 44 px ────────────────────
     Ce bloc vit au palier TABLETTE et non au palier téléphone : 768 px, c'est
     un iPad en portrait, donc un doigt. La règle des 44 px vaut partout où la
     mise en page est celle du tactile, pas seulement sur le plus petit écran. */
  .n-btn{min-height:46px}
  .n-btn--sm{padding:15px 18px !important;min-height:44px}
  .nt-chip{min-height:44px !important;padding:9px 16px !important}
  .nt-tap{min-height:44px;display:inline-flex;align-items:center}
  .nt-header-bar > a:first-child{min-height:44px;display:inline-flex;align-items:center}
  .nt-filters-inner select.n-input{min-height:44px}
  .nt-footer-cols a{display:inline-flex;align-items:center;min-height:44px}
  .nt-sb-cell input,.nt-sb-cell select{min-height:44px}

  /* Lien capitales souligné d'or : on ne peut pas lui ajouter de hauteur sans
     décoller le filet du texte. Zone tactile étendue par pseudo-élément — le
     dessin, lui, reste identique. */
  .n-link-caps{position:relative}
  .n-link-caps::after{content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px}

  /* Lignes « étiquette / valeur » cliquables (téléphone, e-mail, adresse)
     et fil d'Ariane de la fiche chambre. */
  .nt-kv a,.nt-crumb a{min-height:44px;display:inline-flex;align-items:center}

  /* Lien DANS un paragraphe : on ne peut pas lui donner 44 px de haut sans
     gonfler l'interligne du texte. Même procédé que .n-link-caps : zone
     tactile étendue par pseudo-élément, rendu inchangé. */
  .nt-tap-inline{position:relative}
  .nt-tap-inline::after{content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px}

  /* Curseur : la piste ne fait que 2 px de haut, donc la boîte de l'élément
     aussi, et l'on vise dans le vide. On lui rend une hauteur préhensible
     sans changer le dessin de la piste. */
  input[type=range]{height:44px !important;background:transparent !important}
  input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--n-border);border-radius:2px}
  input[type=range]::-moz-range-track{height:2px;background:var(--n-border);border-radius:2px}
  /* WebKit cale le curseur sur le HAUT de la piste quand elle est stylée :
     on le recentre (16 px de pouce sur 2 px de piste → -7 px). */
  input[type=range]::-webkit-slider-thumb{margin-top:-7px}
}


/* ═══ ≤ 767 px — TÉLÉPHONE ══════════════════════════════════════════════ */
@media (max-width:767px){

  /* ── Fondations ─────────────────────────────────────────────────────── */
  body{font-size:16.5px}
  .nt-wrap{padding-left:20px !important;padding-right:20px !important}

  /* ── Échelle typographique.
     Les tailles de bureau (72 / 56 / 42 px) écrasent un écran de 375 px : un
     titre display y occupe trois lignes et pousse tout le reste sous la ligne
     de flottaison. On redescend d'un cran sans changer la hiérarchie. ── */
  .n-d1{font-size:35px !important;line-height:1.1}
  .n-d2{font-size:29px !important;line-height:1.12}
  .n-h1{font-size:29px !important}
  .n-h2{font-size:25px !important}
  .n-h3{font-size:21px !important}
  .n-h4{font-size:18.5px !important}
  .n-lead{font-size:17px;line-height:1.6}
  .n-body{font-size:16px}
  .n-price{font-size:21px !important}

  /* ── Toutes les grilles à deux colonnes s'empilent ─────────────────── */
  .nt-2col{grid-template-columns:1fr !important;gap:34px !important}
  .nt-2col--early{gap:30px !important}
  /* Inversion d'ordre : la seconde colonne passe devant. Réservée aux sections
     où la colonne de droite porte l'action et non le décor. */
  .nt-swap > *:last-child{order:-1}

  /* Grilles de cartes : 2 → 1. */
  .nt-grid-3{grid-template-columns:1fr !important;gap:22px !important}
  .nt-grid-rule-3{grid-template-columns:1fr !important}
  /* Grilles de 4 (galerie, chiffres) : → 2. */
  .nt-grid-4{grid-template-columns:repeat(2,1fr) !important}

  .n-btn--lg{padding:16px 26px !important}

  /* ── En-tête ────────────────────────────────────────────────────────── */
  .nt-header-bar{gap:10px !important}

  /* ── Bandeau d'accueil ──────────────────────────────────────────────── */
  /* Hero plein écran, y compris sur mobile : 100dvh tient compte des barres
     du navigateur. Le contenu (titre, accroche, barre de réservation) est
     aligné en bas et tient dans la première vue avec le padding réduit. */
  .nt-hero{min-height:100dvh !important}
  .nt-hero-inner{padding:120px 20px 30px !important}
  .nt-hero-inner h1{max-width:none !important}
  .nt-hero-inner .n-lead{max-width:none !important;margin-top:18px !important}
  .nt-hero-inner .nt-hero-search{margin-top:32px !important}

  /* ── Barre de réservation ───────────────────────────────────────────── */
  /* Quatre champs + bouton en ligne → 2×2 champs + bouton pleine largeur.
     Trois rangées au lieu de cinq : on garde les quatre informations sans
     transformer le module en colonne interminable. */
  .nt-searchbar{grid-template-columns:1fr 1fr !important;padding:0 !important;gap:0 !important}
  .nt-sb-cell{padding:10px 16px !important;display:flex;
    flex-direction:column;justify-content:center}
  .nt-sb-cell:nth-of-type(2n){border-right:0 !important}
  .nt-sb-cell:nth-of-type(n+3){border-top:1px solid var(--nt-sb-rule)}
  /* Champs de saisie à 44 px : c'est le module de conversion du site, il ne
     peut pas être le seul endroit où l'on vise mal. */
  .nt-sb-cell input,.nt-sb-cell select{min-height:44px}
  .nt-sb-cta{grid-column:1 / -1 !important;margin-left:0 !important;width:100%;
    margin-top:0;min-height:52px;border-radius:0 !important}

  /* ── En-tête de page intérieure ─────────────────────────────────────── */
  .nt-pagehead{min-height:340px !important}
  .nt-pagehead-inner{padding:0 20px 34px !important}

  /* ── Bandeau restaurant (accueil) : photo puis texte ────────────────── */
  .nt-band{grid-template-columns:1fr !important}
  .nt-band__img{min-height:230px !important}
  .nt-band__body{padding:44px 20px 48px !important}

  /* ── Citation immersive ─────────────────────────────────────────────── */
  .nt-quote{font-size:22px !important;line-height:1.4 !important}

  /* ── Bandes de chiffres ─────────────────────────────────────────────── */
  /* 3 chiffres → une colonne (la valeur « 20 000 XOF » ne tient pas dans un
     tiers de 335 px) ; 4 chiffres → deux colonnes. */
  .nt-facts-3{grid-template-columns:1fr !important}
  .nt-facts-3 > *{padding:16px 0 !important;border-left:0 !important}
  .nt-facts-3 > * + *{border-top:1px solid var(--n-border)}
  .nt-facts-4{grid-template-columns:1fr 1fr !important}
  .nt-facts-4 > *{padding:18px 0 !important}
  .nt-facts-4 > *:nth-child(2n){padding-left:20px !important}
  .nt-facts-4 > *:nth-child(2n+1){border-left:0 !important;padding-left:0 !important}
  .nt-facts-4 > *:nth-child(n+3){border-top:1px solid var(--n-border)}
  /* Ne s'applique qu'aux valeurs réellement grandes (26-28 px) : les bandes dont
     la valeur est déjà à 18 px ne portent pas cette classe. */
  .nt-facts__v{font-size:21px !important}

  /* ── Photo flottante de la présentation ─────────────────────────────── */
  /* Vignette encadrée en débord (right:-18) : elle sort du cadre sur un
     petit écran et le chevauchement ne se lit plus. Masquée. */
  .nt-float-photo{display:none !important}

  /* ── Page Chambres : barre de filtres ───────────────────────────────── */
  /* La barre de filtres cesse d'être collante au téléphone. Même réduite à
     deux commandes, elle occupait 128 px — qui, ajoutés aux 72 px d'en-tête,
     confisquaient un quart de l'écran en permanence. Le catalogue tient en
     six fiches : on filtre une fois, en haut de page, puis on fait défiler. */
  .nt-filters{position:static !important}
  .nt-filters-inner{padding:12px 20px !important;gap:10px 14px !important}
  .nt-filters-inner .nt-filter-budget,
  .nt-filters-inner .nt-filter-view{display:none !important}
  /* Les intitulés « Voyageurs » et « Trier » sautent : les pastilles se lisent
     seules (Tous / 2+ / 3+ / 4) et le menu affiche « Prix croissant ». */
  .nt-filters-inner .n-label{display:none !important}
  .nt-filters-inner select.n-input{min-height:44px;width:100% !important}
  .nt-filters-inner > div{gap:8px !important}
  /* Rangée 1 : les quatre pastilles voyageurs, seules.
     Rangée 2 : le menu de tri, qui prend la place restante, et le décompte. */
  .nt-filters-inner > div:first-child{flex:1 0 100%}
  .nt-filters-inner > div:nth-child(3){flex:1 1 auto;min-width:150px}
  .nt-filters-inner > div:last-child{margin-left:0 !important;flex:0 0 auto}

  .nt-list-card{grid-template-columns:1fr !important;padding:14px !important}

  /* ── Fiche chambre ──────────────────────────────────────────────────── */
  /* Vignettes de la galerie : bande défilante horizontale plutôt qu'un pavé
     de deux par ligne (économise ~150 px de hauteur). */
  .nt-thumbs{flex-wrap:nowrap !important;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:4px;gap:8px !important}
  .nt-thumbs > button{flex:0 0 auto;width:92px !important;height:62px !important;scroll-snap-align:start}
  /* Idem pour « Autres catégories » : trois cartes en défilement horizontal. */
  .nt-related{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:14px !important;padding-bottom:4px}
  .nt-related > *{flex:0 0 66%;scroll-snap-align:start}

  /* ── Réservation ────────────────────────────────────────────────────── */
  /* Champs : les deux premiers passent pleine largeur, les suivants restent
     appariés quand ils sont courts. */
  .nt-form-2{gap:14px !important}
  .nt-form-2--dates > label:nth-child(-n+2){grid-column:1 / -1}
  .nt-form-2--guest > label:nth-child(n+3){grid-column:1 / -1}
  .nt-form-2--stack{grid-template-columns:1fr !important}
  .nt-actions{flex-direction:column !important;align-items:stretch !important;gap:10px !important}
  .nt-actions > .n-btn{width:100%}
  .nt-actions > .n-small{text-align:center}

  /* Sélection de catégorie : vignette + texte, prix sur toute la largeur. */
  .nt-pick{grid-template-columns:92px 1fr !important;gap:14px !important;
    align-items:start !important;padding:12px !important}
  .nt-pick__price{grid-column:1 / -1 !important;text-align:left !important;
    min-width:0 !important;padding-right:0 !important;padding-top:10px;
    border-top:1px solid var(--n-border-2);display:flex;align-items:baseline;
    justify-content:space-between;gap:12px;flex-wrap:wrap}
  .nt-pick__price > div{margin-top:0 !important}

  /* ── Contact ────────────────────────────────────────────────────────── */
  /* Étiquette au-dessus de la valeur : « contact@natoma.sn » et son libellé
     ne tiennent pas sur une ligne à 335 px. */
  .nt-kv{flex-direction:column !important;align-items:flex-start !important;gap:6px !important}

  /* ── Pied de page ───────────────────────────────────────────────────── */
  .nt-footer{padding:56px 0 26px !important}
  .nt-footer-brand{grid-column:1 / -1}
  .nt-footer-cols{gap:26px 24px !important}
  .nt-footer-legal{flex-direction:column !important;gap:10px !important;text-align:center;
    align-items:center !important}
  .nt-footer-rule{width:100% !important;max-width:280px}
}


/* ═══ ≤ 400 px — très petits écrans ═════════════════════════════════════ */
@media (max-width:400px){
  .n-d1{font-size:32px !important}
  .n-d2{font-size:27px !important}
  .nt-searchbar .nt-sb-cell{padding:11px 13px !important}
  .nt-pick{grid-template-columns:76px 1fr !important}
}

/* ═══ CALENDRIER — le composant de la maison, sur le site public ═══════════
   Recette du 23/08/2026. Les champs de date ouvraient le calendrier DU
   NAVIGATEUR : « August 2026 », jours en anglais, sélection bleu système, et
   le champ affichant « 08/24/2026 » sur un site en français. La logique est
   partagée avec la console (`spa/lib/pmsCalendar.js`, importé, jamais
   recopié) ; seul ce rendu est propre au site. */
.nt-datepicker{position:relative;min-width:0}
.nt-datepicker__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nt-datepicker__trigger{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-size:17px;font-weight:600;text-align:left;cursor:pointer}
.nt-datepicker__trigger>.nt-datepicker__icon{flex:0 0 auto;display:grid;place-items:center;color:var(--n-gold-deep,#A9832F)}
.nt-datepicker__nav button svg,.nt-datepicker__trigger svg{display:block}
.nt-datepicker__trigger .is-placeholder{opacity:.62;font-weight:400}
.nt-datepicker__popover{position:absolute;z-index:120;top:calc(100% + 10px);left:0;width:min(328px,calc(100vw - 32px));padding:12px;border:1px solid var(--n-border);background:#fff;box-shadow:var(--n-shadow-lg);max-height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:contain}
/* Retourne au-dessus quand la place manque dessous : un jour qu'on ne peut
   pas cliquer n'existe pas. */
.nt-datepicker__popover.is-above{top:auto;bottom:calc(100% + 10px)}
.nt-datepicker__nav{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;margin-bottom:10px;text-align:center;text-transform:capitalize}
.nt-datepicker__nav strong{font-size:15px}
.nt-datepicker__nav button{display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--n-border);background:#fff;color:var(--n-charcoal);cursor:pointer}
.nt-datepicker__nav button:hover{border-color:var(--n-gold);background:rgba(201,164,69,.08)}
.nt-datepicker__week,.nt-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr)}
.nt-datepicker__week{margin-bottom:4px;color:var(--n-text-2);font-size:9px;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.nt-datepicker__day{display:grid;height:36px;place-items:center;border:1px solid transparent;background:transparent;color:var(--n-charcoal);cursor:pointer;font:inherit;font-size:14px}
.nt-datepicker__day:hover:not(:disabled){border-color:var(--n-gold);background:rgba(201,164,69,.08)}
.nt-datepicker__day.is-outside{color:var(--n-text-3);opacity:.55}
.nt-datepicker__day.is-today{box-shadow:inset 0 -2px var(--n-gold)}
.nt-datepicker__day.is-selected{background:var(--n-charcoal);color:var(--n-ivory)}
.nt-datepicker__day:disabled{cursor:not-allowed;opacity:.28}