/* =========================================================================
   Grand Host · LA feuille de style du site (DE / FR / EN).

   Direction retenue par Wiam le 2026-08-15 (l'ancienne « V2 », inspiree de
   landedhouses.co.uk) : on emprunte la COMPOSITION de la reference (bandes de
   couleur pleine largeur, boutons pilule, photos arrondies, heros centre,
   carte qui chevauche la photo) et on garde la CHARTE du client (navy, ambre,
   Cormorant Garamond, Montserrat). L'ancienne direction vit dans git.

   ⚠️ Ecrite a la main, aucun lien mecanique avec pages.js : toute nouvelle
      section demande une edition ICI et LA-BAS.
   ⚠️ L'allemand est la langue de composition : 25 a 35 % plus long que le
      francais, chaque composant se dimensionne sur lui.

   🔴 CONTRASTES CALCULES (ne pas les rejouer a l'oeil) :
        navy #153060 sur blanc ................. 13,00:1
        navy sur creme #fdf6ea ................. 12,04:1
        navy-70 sur blanc ....................... 5,15:1
        navy-70 sur creme ....................... 5,00:1
        navy sur ambre clair #fcc978 ............ 8,48:1
        navy-90 sur ambre clair ................. 6,90:1
        ambre #f7a70a et navy (les deux sens) ... 6,46:1
        navy sur vert WhatsApp #25D366 .......... 6,52:1
        navy sur vert WhatsApp clair #4AE68A .... 7,99:1
      ⛔ navy-70 sur ambre clair = 4,26:1 : ECHOUE. Sur la bande ambre le texte
         secondaire passe en navy-90.
      ⛔ ambre sur ambre clair = 1,31:1 : le bouton d'action de la bande ambre
         est NAVY, jamais ambre.
      ⛔ orange Vojood #fc6600 sur ambre clair = 1,96:1 : c'est pour ca que le
         bas du pied de page reste navy.
      ⛔ BLANC sur vert WhatsApp = 1,98:1 : ECHOUE, exactement comme sur l'ambre
         (2,00:1). Les boutons WhatsApp portent donc du texte NAVY, jamais blanc.
         ⚠️ Et un vert PLUS FONCE ne repare rien : #1DA851 tombe a 4,17:1 avec le
         navy et reste a 3,10:1 avec le blanc. Le vert de la marque s'eclaircit,
         il ne se fonce pas.
   ========================================================================= */

/* ---------- Polices auto-hebergees (nLPD : aucun appel a Google Fonts) ---- */
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/assets/fonts/cormorant-700italic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Tokens ------------------------------------------------------- */
:root {
  --navy: #153060;
  --navy-90: rgba(21,48,96,.90);
  --navy-70: rgba(21,48,96,.70);
  --navy-12: rgba(21,48,96,.12);
  --navy-08: rgba(21,48,96,.08);
  --bleu: #3c60a0;
  --bleu-clair: #acbfd1;
  --ambre: #f7a70a;
  --ambre-clair: #fcc978;
  --blanc: #ffffff;
  /* Creme chaude, derivee de l'ambre. ⚠️ Reservee aux pages de TEXTE LONG.
     Elle ne parait pas sur l'accueil : blanc + ambre + navy y suffisent, et une
     creme + un serif + un accent chaud, c'est le rendu par defaut d'une IA. */
  --creme: #fdf6ea;
  --filet-22: rgba(172,191,209,.22);
  --filet-40: rgba(172,191,209,.40);
  --credit-vojood: #fc6600;
  /* Vert de WhatsApp, la SEULE couleur du site qui vienne d'une marque tierce
     (demande de Wiam, 2026-08-20). ⛔ Il se comporte exactement comme l'ambre :
     1,98:1 avec du blanc, donc son texte est TOUJOURS navy (6,52:1). */
  --whatsapp: #25D366;
  --whatsapp-clair: #4AE68A;

  /* Couleur de texte secondaire, REDEFINIE par les bandes qui en ont besoin.
     C'est la seule variable dont la valeur change selon le fond. */
  --txt-2: var(--navy-70);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;

  --r-photo: 14px;
  --r-controle: 8px;
  --r-pilule: 999px;

  --sp-section: clamp(4rem, 8vw, 7rem);
  --sp-bloc: clamp(2rem, 4vw, 3.5rem);
  --sp-gouttiere: clamp(1.25rem, 2.5vw, 2rem);
  --page-max: 1200px;
  --texte-max: 68ch;
  --bord-page: clamp(1.25rem, 5vw, 3rem);
  --chevauchement: clamp(1.75rem, 5vw, 4.5rem);
}

/* ---------- Base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--blanc); color: var(--navy);
  font-family: var(--sans); font-size: 1rem; line-height: 1.7; font-weight: 400;
}
/* 🔴 height:auto obligatoire : sans lui, une image qui porte ses dimensions est
   ETIREE. On peut rogner une photo, jamais la deformer. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); }
h1, h2, h3 { margin: 0 0 .6em; hyphens: auto; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.1em; }
table { border-collapse: collapse; }

/* Le groupe « nombre + unite » ne se coupe jamais en fin de ligne. */
.unite { white-space: nowrap; }

/* ---------- Accessibilite : plancher global ------------------------------ */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.bande--navy :focus-visible, .carte-ancre :focus-visible,
.pied__bas :focus-visible, .consentement :focus-visible { outline-color: var(--blanc); }

.saut {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: var(--blanc); padding: .8rem 1.2rem;
}
.saut:focus { left: 0; }

/* Visible des lecteurs d'ecran uniquement. */
.hors-ecran { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Typographie -------------------------------------------------- */
/* 🔴 Cormorant Garamond ne descend JAMAIS sous 32px (2rem) : ses delies
   disparaissent. Il ne porte donc que le H1 et les titres de section. Tout le
   reste, y compris les titres de carte, est en Montserrat.
   ⚠️ Chiffres elzeviriens par defaut : le « 1 » de Biel1 sort en chiffre bas et
   se lit « Bielı ». `lining-nums` force les chiffres alignes. */
.display {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: 1.02; letter-spacing: .01em;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "onum" 0;
}
.titre-section {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: .01em;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "onum" 0;
}
.titre-carte { font-family: var(--sans); font-weight: 600; font-size: 1.375rem; line-height: 1.25;
  letter-spacing: -.005em; }
.titre-mini { font-family: var(--sans); font-weight: 600; font-size: 1.125rem; line-height: 1.3; }

/* Le kicker. Montserrat 600 a 12px contre Cormorant 700 a 72px : le saut de
   taille est de x6, c'est lui qui donne son caractere a la page. */
.kicker {
  font-family: var(--sans); font-weight: 600; font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--txt-2);
  margin: 0 0 1rem;
}
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; max-width: 62ch; }
.micro { font-size: .78rem; font-weight: 500; letter-spacing: .02em; color: var(--txt-2); }

/* Exception « signature » au plancher Cormorant : le claim fait partie du logo,
   il reste en serif italique, jamais sous 20px (valide Wiam 2026-08-16). */
.claim { font-family: var(--serif); font-weight: 700; font-style: italic;
  font-size: 1.25rem; line-height: 1.35; color: var(--txt-2); }

.prix { font-family: var(--sans); font-weight: 600; font-size: 1.5rem; display: inline-block; }
.prix-n { font-size: .82em; font-weight: 500; color: var(--txt-2); }
.prix--inconnu { font-size: 1rem; font-weight: 600; color: var(--txt-2); }
.texte { max-width: var(--texte-max); }
b, strong { font-weight: 600; } /* Montserrat 700 n'est pas embarquee */

/* ---------- Le motif de Bienne : la paire bilingue ----------------------- */
/* Bienne est officiellement bilingue. Le mot allemand, un point ambre, le mot
   francais. C'est le detail qu'aucun gabarit generique n'aurait. */
.paire-bilingue .pt {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ambre); margin: 0 .55rem; vertical-align: middle;
}

/* ---------- Mise en page : le systeme de bandes -------------------------- */
.conteneur { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--bord-page); }
.conteneur--etroit { max-width: 780px; }
.bande { padding: var(--sp-section) 0; }
.bande--serree { padding: var(--sp-bloc) 0; }

/* La bande ambre : le champ sature, le pari de la V2.
   🔴 --txt-2 passe en navy-90 : navy-70 tombe a 4,26:1 sur ce fond. */
.bande--ambre { background: var(--ambre-clair); --txt-2: var(--navy-90); }

.bande--navy { background: var(--navy); color: var(--blanc); --txt-2: var(--bleu-clair); }
.bande--navy .titre-section, .bande--navy a { color: var(--blanc); }

.bande--creme { background: var(--creme); }

/* En-tete de page interieure : centre, court, sur blanc. */
.entete-page { padding: clamp(3rem, 6vw, 5rem) 0 var(--sp-bloc); text-align: center; }
.entete-page .lead { margin-left: auto; margin-right: auto; }

/* Titre de section centre, avec son kicker au-dessus. */
.tete-section { text-align: center; margin-bottom: var(--sp-bloc); }
.tete-section .lead { margin-left: auto; margin-right: auto; }

/* ---------- Boutons : la pilule ------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600; font-size: .9375rem; letter-spacing: .01em;
  padding: .9rem 1.75rem; min-height: 48px; border-radius: var(--r-pilule);
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
/* ⛔ JAMAIS de texte blanc sur l'ambre : 2,00:1. Le texte est TOUJOURS navy. */
.btn--1 { background: var(--ambre); color: var(--navy); border-color: var(--ambre); }
.btn--1:hover { background: var(--ambre-clair); border-color: var(--ambre-clair); }
.btn--2 { background: var(--navy); color: var(--blanc); border-color: var(--navy); }
.btn--2:hover { background: #1d4180; border-color: #1d4180; }
.btn--3 { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--3:hover { background: var(--navy-08); }
/* WhatsApp. ⛔ Texte NAVY, jamais blanc : 1,98:1 sur ce vert, le meme piege que
   l'ambre. Le bouton de la page contact et le bouton flottant portent la MEME
   couleur : ils font la meme chose et se voient sur le meme ecran. */
.btn--wa { background: var(--whatsapp); color: var(--navy); border-color: var(--whatsapp); }
.btn--wa:hover { background: var(--whatsapp-clair); border-color: var(--whatsapp-clair); }
/* Sur fond navy : la pilule s'inverse. */
.btn--surnavy { background: var(--blanc); color: var(--navy); border-color: var(--blanc); }
.btn--surnavy:hover { background: var(--bleu-clair); border-color: var(--bleu-clair); }
/* 🔴 Une regle « .bande--navy a { color: blanc } » ecraserait la couleur du texte
   d'un bouton clair pose sur navy : blanc sur blanc, donc invisible. Piege deja
   paye sur la V1, page 404. On le desamorce ici pour TOUS les contextes sombres. */
.bande--navy a.btn--surnavy, .bande--navy a.btn--1,
.carte-ancre a.btn--1, .carte-ancre a.btn--surnavy,
.pied__bas a.btn--surnavy, .consentement .btn--surnavy { color: var(--navy); }
.bande--navy a.btn--1 { border-color: var(--ambre); }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.actions--centre { justify-content: center; }

/* Pilule avec pictogramme. Le picto est en aria-hidden : c'est le mot qui porte
   le sens, jamais l'image. La gouttiere est en em pour suivre la taille du texte
   quand le visiteur agrandit la police. */
.btn--ic { gap: .55em; }
.btn--ic svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* Ligne d'accroche posee juste au-dessus d'une action, dans une entete de page.
   ⚠️ navy-70 sur blanc mesure 5,0:1 : il tient en texte courant, contrairement
   au gris de la charte (#7a899e, 3,56:1) qui est reserve au grand texte. */
.canaux__note { color: var(--navy-70); margin: 1.1rem 0 .6rem; }

/* ---------- En-tete ------------------------------------------------------ */
/* Blanc, minimal, un filet en bas. La pilule d'action reste HORS du menu
   deroulant : en mobile elle doit rester visible quand le burger est ferme. */
.entete { background: var(--blanc); border-bottom: 1px solid var(--filet-22); }
.entete__in { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-top: 1rem; padding-bottom: 1rem; }
.entete__logo { margin-right: auto; }
.nav { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.nav a { font-size: .9375rem; font-weight: 500; color: var(--navy); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; }
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav a[aria-current] { font-weight: 600; text-decoration: underline; text-underline-offset: 6px;
  text-decoration-thickness: 2px; }
/* Selecteur de langue COMPACT : drapeau + code a deux lettres (choix de Wiam,
   2026-08-15). Il gagne une trentaine de pixels sur les noms complets et se lit
   comme un controle, pas comme trois liens de nav de plus, d'ou le filet qui
   l'isole.
   🔴 Les drapeaux sont des SVG en ligne, JAMAIS des emoji : sous Windows, le
      drapeau emoji ne rend aucun pixel colore et retombe sur deux lettres, donc
      « DE DE » a l'ecran. Mesure faite, voir pages.js.
   ⚠️ Le code visible est en aria-hidden, le nom complet de la langue vit dans un
      span hors ecran : un lecteur d'ecran annonce « Français », pas « F R ». */
/* Une seule langue visible, les autres au survol (demande de Wiam, 2026-08-15).
   Le bloc entier ne coute plus que ~68 px dans l'en-tete, contre 188 px pour les
   trois noms complets de depart. */
.langues { position: relative; padding-left: .75rem;
  border-left: 1px solid var(--filet-40); }

.langues__b { display: inline-flex; align-items: center; gap: .3rem;
  min-height: 44px; padding: 0 .35rem; border: 0; border-radius: var(--r-controle);
  background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: .6875rem; font-weight: 600; letter-spacing: .03em;
  color: var(--txt-2); }
.langues__b:hover { color: var(--navy); background: var(--navy-08); }
.langues__v { flex: none; opacity: .6; transition: transform .15s ease; }
.langues__b[aria-expanded="true"] .langues__v { transform: rotate(180deg); }

/* 🔴 Le PONT : la liste est collee au bouton (top:100%) et sa garniture haute
   fait partie de sa zone de survol. Avec une marge a la place, la souris
   traverserait un vide en descendant et le menu se refermerait sous le doigt. */
.langues__l { position: absolute; top: 100%; right: 0; z-index: 60;
  display: none; margin: 0; padding: .35rem; list-style: none;
  min-width: 100%; background: var(--blanc); border-radius: var(--r-controle);
  box-shadow: 0 1px 2px var(--navy-08), 0 10px 28px var(--navy-12);
  border: 1px solid var(--filet-40); }

/* Trois portes d'ouverture, et il en faut trois :
   1. le survol, mais UNIQUEMENT sur un pointeur fin : sur tactile, un `:hover`
      reste colle apres le doigt et le menu ne se refermerait plus ;
   2. le focus clavier, qui ouvre sans aucun JavaScript ;
   3. le clic, pose par site.js via [data-ouvert], pour le tactile. */
@media (hover: hover) and (pointer: fine) {
  .langues:hover .langues__l { display: block; }
}
.langues:focus-within .langues__l,
.langues[data-ouvert] .langues__l { display: block; }

.langues__l li { margin: 0; }
.langue { display: flex; align-items: center; gap: .4rem; width: 100%;
  min-height: 44px; padding: 0 .5rem; border-radius: var(--r-controle);
  font-size: .6875rem; font-weight: 600; letter-spacing: .03em;
  color: var(--txt-2); text-decoration: none; white-space: nowrap; }
/* Le liseré empeche le blanc des drapeaux francais et britannique de se fondre
   dans l'en-tete blanc. */
.langue__d { flex: none; display: block; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--navy-12); }
.langue:hover { color: var(--navy); background: var(--navy-08); }
.langue--on { color: var(--navy); background: var(--navy-08); }
/* La langue courante n'est pas un lien : son drapeau reste net, les autres
   sont legerement en retrait tant qu'on ne les survole pas. */
.langue:not(.langue--on) .langue__d { opacity: .75; }
.langue:hover .langue__d { opacity: 1; }
.entete .btn { padding: .7rem 1.4rem; min-height: 44px; font-size: .875rem; }
.burger { display: none; }

@media (max-width: 900px) {
  .burger { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
    background: transparent; border: 1.5px solid var(--navy); border-radius: var(--r-pilule);
    padding: .5rem 1rem; font-family: var(--sans); font-weight: 600; font-size: .875rem;
    color: var(--navy); cursor: pointer; order: 3; }
  /* Trois traits, en currentColor. */
  .burger__b { position: relative; display: block; width: 18px; height: 2px;
    background: currentColor; border-radius: 2px; }
  .burger__b::before, .burger__b::after { content: ''; position: absolute; left: 0;
    width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
  .burger__b::before { top: -6px; }
  .burger__b::after { top: 6px; }
  .menu { display: none; width: 100%; order: 5; }
  body.menu-ouvert .menu { display: block; }
  .nav { flex-direction: column; gap: 0; }
  .nav a { min-height: 48px; border-bottom: 1px solid var(--filet-22); width: 100%; }
  /* ⚠️ Dans un menu empile, le filet doit separer par le HAUT : garde en
     position verticale, il tracait un trait a gauche d'une rangee pleine
     largeur, ce qui ne separait rien. */
  .langues { padding: .6rem 0 0; border-left: 0; border-top: 1px solid var(--filet-40);
    margin-top: .4rem; }
  /* 🔴 Pas de menu deroulant DANS le menu burger : ouvrir un tiroir a
     l'interieur d'un tiroir demande deux gestes pour rien, et la place ne
     manque pas ici. Le bouton disparait, les trois langues s'affichent en
     rangee, exactement comme avant. Le deroulant ne sert que dans l'en-tete
     desktop, ou l'espace est reellement dispute. */
  .langues__b { display: none; }
  .langues__l { display: flex; position: static; gap: .1rem; padding: 0;
    background: none; border: 0; box-shadow: none; }
  .langue { width: auto; padding: 0 .3rem; }
}
@media (min-width: 901px) {
  /* La nav et le selecteur de langue cohabitent sur la rangee. */
  .menu { display: flex; align-items: center; gap: 1.75rem; }
}

/* ---------- Le heros ----------------------------------------------------- */
/* Texte centre sur blanc, puis la photo pleine largeur du conteneur, puis la
   carte navy qui la chevauche. C'est le seul endroit du site ou un element
   franchit une frontiere. */
.heros { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; text-align: center; }
.heros__txt { max-width: 820px; margin: 0 auto var(--sp-bloc); }
.heros .lead { margin-left: auto; margin-right: auto; }
.heros__media { position: relative; }
.heros__photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-photo); }

/* ⭐ L'ELEMENT SIGNATURE de la V2 : la carte d'ancrage, qui porte le formulaire
   de recherche. Un seul chevauchement par page, jamais deux.
   🔴 Elle chevauche le HAUT de la photo, pas le bas. Posee sous la photo, elle
   tombait sous la ligne de flottaison sur un ecran de 1000 px : le visiteur
   devait defiler pour trouver l'action principale. C'est aussi ce que fait la
   reference (son widget precede le media dans le DOM). */
.carte-ancre {
  position: relative; z-index: 2;
  margin: 0 auto calc(var(--chevauchement) * -1);
  max-width: 980px; background: var(--navy); color: var(--blanc);
  --txt-2: var(--bleu-clair);
  border-radius: var(--r-photo); padding: clamp(1.5rem, 3vw, 2.25rem);
  text-align: left;
}
/* --- Le formulaire de recherche, dans la carte d'ancrage ---------------- */
/* Il EST la carte, il ne s'y ajoute pas : un seul chevauchement par page. */
.recherche__champs { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .recherche__champs { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  /* Logement plus large que les dates, personnes etroit, action au bout.
     Les fractions plutot que auto : sinon la longueur des noms de logement
     fait bouger toute la rangee. */
  .recherche__champs { grid-template-columns: 1.5fr 1fr 1fr .7fr auto; align-items: end; }
}
.recherche__c { margin: 0; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.recherche__c label { font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bleu-clair); }
.recherche__c select, .recherche__c input {
  width: 100%; font: inherit; font-size: .9375rem; min-height: 48px;
  padding: .6rem .85rem; border-radius: var(--r-controle);
  border: 1.5px solid rgba(255,255,255,.28); background: var(--blanc); color: var(--navy);
}
.recherche__c select:focus, .recherche__c input:focus { border-color: var(--ambre); }
/* ⚠️ Safari iOS rend un input[type=date] vide plus bas que les autres champs :
   on force la hauteur de ligne pour aligner la rangee. */
.recherche__c input[type=date] { line-height: 1.2; }
.recherche__c--action { justify-content: flex-end; }
.recherche__c--action .btn { width: 100%; }

/* Le message de validation. Il ne fait pas sauter la mise en page en
   apparaissant : il vit sous les champs, au-dessus des faits. */
.recherche__msg[hidden] { display: none; }
.recherche__msg { margin: .9rem 0 0; font-size: .875rem; font-weight: 600;
  color: var(--ambre-clair); }

.carte-ancre__faits { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0; padding: 0;
  list-style: none; }
.recherche .carte-ancre__faits { margin-top: 1.25rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.16); }
.carte-ancre__faits li { display: flex; align-items: center; gap: .6rem; font-size: .9375rem;
  font-weight: 500; }
.carte-ancre__faits svg { flex: none; width: 18px; height: 18px; color: var(--ambre); }

/* ---------- Cartes de logement ------------------------------------------ */
/* ⚠️ Aucune bordure, aucune ombre, aucun cadre : la photo arrondie et le texte
   posé dessous, comme sur la reference. C'est ce qui distingue le plus la V2 de
   la V1 au premier coup d'oeil. ⛔ Pas de zoom au survol (regle du CADRAGE). */
.grille-logements { display: grid; gap: var(--sp-bloc) var(--sp-gouttiere);
  grid-template-columns: 1fr; }
@media (min-width: 760px) { .grille-logements { grid-template-columns: 1fr 1fr; } }
/* ⚠️ grid-template-columns doit etre REPOSE : sans lui, la regle a deux colonnes
   du media query gagne et la carte unique n'occupe qu'une demi-colonne. */
.grille-logements--1 { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }

.logement__lien { display: block; border-radius: var(--r-photo); overflow: hidden; }
.logement__photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.logement__corps { padding-top: 1.25rem; }
.logement__titre { font-family: var(--sans); font-weight: 600; font-size: 1.375rem;
  line-height: 1.25; margin: 0 0 .5rem; }
/* ⚠️ Cible tactile de 44px : le titre de carte est un vrai point d'entree vers
   le logement, pas un lien en ligne dans une phrase. Regle deja apprise sur la
   V1, elle etait tombee ici. */
.logement__titre a { color: var(--navy); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; }
.logement__titre a:hover { text-decoration: underline; text-underline-offset: 4px; }
.logement__accroche { color: var(--txt-2); margin-bottom: 1rem; }
.logement__prix { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: 1rem 0; border-top: 1px solid var(--filet-40); border-bottom: 1px solid var(--filet-40);
  margin-bottom: 1.25rem; }
.logement__prix .micro { margin: 0; }

/* Frais obligatoires, juste sous le prix. Ils appartiennent visuellement au
   MEME bloc que le prix : le filet du bas descend donc sous eux, sinon le
   visiteur lit un prix ferme puis, apres separation, une remarque detachee.
   ⚠️ Sans :has(), le filet reste sur le prix et la ligne se pose dessous :
   c'est moins joint, mais toujours lisible. Degradation acceptee. */
.logement__prix:has(+ .prix-frais) { border-bottom: 0; margin-bottom: 0; padding-bottom: .35rem; }
.prix-frais { margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--filet-40);
  font-size: .8125rem; line-height: 1.5; color: var(--navy-70); }

/* La ligne de faits, a icones. Le picto ne remplace jamais le mot. */
.faits { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 1rem; padding: 0;
  list-style: none; font-size: .875rem; color: var(--txt-2); }
/* ⚠️ Une liste flex ne suit pas le text-align du parent : sous le H1 centre
   d'une page logement, il faut la centrer explicitement. C'est la ligne qui
   porte la surface, donc elle doit rester visible en haut de page. */
.entete-page .faits { justify-content: center; margin-top: 1.25rem; margin-bottom: 0; }

/* Le rappel du sejour choisi dans le formulaire du heros. */
.rappel[hidden] { display: none; }
.rappel { background: var(--creme); border-left: 3px solid var(--ambre);
  border-radius: var(--r-controle); padding: 1rem 1.25rem; margin: 0 0 var(--sp-bloc); }
.rappel__t { margin: 0; font-size: 1rem; }
.rappel__n { margin: .3rem 0 0; font-size: .875rem; color: var(--txt-2); }
.faits li { display: flex; align-items: center; gap: .45rem; }
.faits svg { flex: none; width: 17px; height: 17px; }

/* ---------- La bande d'avis (accueil, fond creme) ------------------------ */
/* Cartes blanches sur creme : navy sur blanc 13,00:1 et navy-70 sur blanc
   5,15:1, deja au registre. Les etoiles ambre sont DECORATIVES (aria-hidden,
   la note est ecrite en toutes lettres a cote) : pas d'exigence de contraste.
   ⚠️ Pas de carrousel : 3 citations posees, rien qui bouge tout seul. */
.notes-otas { display: flex; flex-wrap: wrap; gap: .5rem .6rem; justify-content: center;
  margin: 1rem 0 0; }
.note-ota { display: inline-flex; align-items: center; gap: .35rem; background: var(--blanc);
  border-radius: var(--r-pilule); padding: .4rem 1rem; font-weight: 600; font-size: .9375rem; }
.grille-avis { display: grid; gap: var(--sp-gouttiere); grid-template-columns: 1fr; }
@media (min-width: 900px) { .grille-avis { grid-template-columns: 1fr 1fr 1fr; } }
.avis { background: var(--blanc); border-radius: var(--r-photo); padding: 1.5rem;
  margin: 0; display: flex; flex-direction: column; gap: .9rem; }
.avis__etoiles { display: inline-flex; gap: .15rem; color: var(--ambre); }
.avis__etoiles svg { width: 17px; height: 17px; }
.avis__texte { margin: 0; }
.avis__texte p { margin: 0; font-size: .9688rem; line-height: 1.65; }
/* margin-top auto : la signature reste collee en bas, les 3 cartes s'alignent. */
.avis__qui { margin-top: auto; font-size: .875rem; line-height: 1.5; }
.avis__qui strong { font-weight: 600; }
.avis__source { display: block; color: var(--txt-2); }
.avis__trad { display: block; color: var(--txt-2); font-size: .8125rem; font-style: italic; }
.avis-releve { text-align: center; margin-top: var(--sp-bloc); }

/* ---------- Les quatre arguments (bande ambre) --------------------------- */
.arguments { display: grid; gap: var(--sp-bloc) var(--sp-gouttiere); grid-template-columns: 1fr; }
@media (min-width: 700px) { .arguments { grid-template-columns: 1fr 1fr; } }
.argument__ic { width: 48px; height: 48px; border-radius: 50%; background: var(--blanc);
  color: var(--navy); display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; }
.argument__ic svg { width: 22px; height: 22px; }
.argument h3 { margin-bottom: .35rem; }
.argument p { margin: 0; color: var(--txt-2); }
/* Sur la bande ambre, les pastilles blanches ont besoin d'un liseré : blanc sur
   ambre clair ne fait que 1,4:1, le cercle se perdrait sans lui. */
.bande--ambre .argument__ic { box-shadow: 0 0 0 1px var(--navy-12); }

/* Les paliers de rabais. Chiffres rendus par le build, jamais ecrits en dur.
 * ⚠️ Le bloc entier disparait quand avantageDirect() rend une chaine vide : ne
 *    jamais poser de marge sur le parent qui survivrait au bloc absent. */
.bloc-paliers { margin-top: var(--sp-bloc); text-align: center; }
.bloc-paliers .micro { margin: 1rem 0 0; }
.paliers { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
  margin: 0; padding: 0; list-style: none; }
.paliers li { background: var(--blanc); border-radius: var(--r-pilule); padding: .5rem 1.1rem;
  font-size: .875rem; font-weight: 600; box-shadow: 0 0 0 1px var(--navy-12); }
.bande--navy .paliers li { background: rgba(255,255,255,.10); color: var(--blanc);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22); }

/* ---------- Bloc editorial texte + photo -------------------------------- */
.duo { display: grid; gap: var(--sp-bloc); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); } }
.duo__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-photo); }
.duo--inverse .duo__media { order: -1; }
@media (max-width: 899px) { .duo--inverse .duo__media { order: 0; } }

/* ---------- Galerie, equipements, comparatif ---------------------------- */
.galerie { display: grid; gap: var(--sp-gouttiere); grid-template-columns: 1fr; }
@media (min-width: 700px) { .galerie { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .galerie { grid-template-columns: 1fr 1fr 1fr; } }
.galerie__i { margin: 0; }
.galerie__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-photo); }

.equip { display: grid; gap: var(--sp-bloc); grid-template-columns: 1fr; }
@media (min-width: 700px) { .equip { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .equip { grid-template-columns: 1fr 1fr 1fr; } }
.equip ul { list-style: none; padding: 0; }
.equip li { padding: .45rem 0; border-bottom: 1px solid var(--filet-22); font-size: .9375rem; }

/* Prestations optionnelles, sous la grille d'equipements.
 * Le filet du haut les separe de la grille : ce sont des prestations PAYANTES
 * et se reservant a part, pas une colonne d'equipements de plus. */
.prestations { margin-top: var(--sp-bloc); padding-top: var(--sp-bloc);
  border-top: 1px solid var(--filet-40); }
.prestations ul { list-style: none; padding: 0; max-width: 62ch; }
.prestations li { padding: .45rem 0; border-bottom: 1px solid var(--filet-22);
  font-size: .9375rem; }
.prestations .note { margin-top: 1rem; font-size: .875rem; color: var(--txt-2);
  max-width: 62ch; }

.tableau-enveloppe { overflow-x: auto; }
.comparatif { width: 100%; font-size: .9375rem; min-width: 480px; }
.comparatif th, .comparatif td { text-align: left; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--filet-40); }
.comparatif thead th { font-weight: 600; font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--txt-2); }
.comparatif tbody th { font-weight: 500; color: var(--txt-2); }

/* Image absente : reserve la place pour ne pas faire sauter la mise en page. */
.img-absente { background: var(--creme); border: 1px dashed var(--filet-40);
  border-radius: var(--r-photo); aspect-ratio: 3 / 2; }

/* ---------- FAQ : accordeon natif, aucun JavaScript --------------------- */
/* ⚠️ Fermee par defaut, contrairement a la V1 : six reponses ouvertes font un mur
   de texte. <details> reste utilisable au clavier et sans JS. */
.faq { max-width: 860px; margin: 0 auto; }
.faq__i { border-bottom: 1px solid var(--filet-40); }
.faq__i summary {
  font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; line-height: 1.4;
  cursor: pointer; min-height: 56px; display: flex; align-items: center; gap: 1rem;
  padding: 1rem 0; list-style: none;
}
.faq__i summary::-webkit-details-marker { display: none; }
/* Le marqueur : un plus qui devient un moins. Purement CSS. */
.faq__i summary::after {
  content: ''; flex: none; margin-left: auto; width: 14px; height: 14px;
  background:
    linear-gradient(var(--navy), var(--navy)) center / 14px 2px no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 2px 14px no-repeat;
  transition: transform .2s ease;
}
.faq__i[open] summary::after { background-size: 14px 2px, 2px 0; transform: rotate(180deg); }
.faq__r { padding: 0 0 1.5rem; max-width: var(--texte-max); color: var(--txt-2); }
.faq__r p:last-child { margin-bottom: 0; }

/* ---------- Bande de confiance ------------------------------------------ */
.bande-confiance { font-size: .78rem; font-weight: 500; letter-spacing: .02em;
  color: var(--txt-2); margin: 0; text-align: center; }

/* ---------- Appartenance (reseau FEWOlution, accueil seulement) ---------- */
/* Le mot « FEWOlution » est noir : ce bloc n'a de sens que sur un fond clair.
   Il partage la taille et la couleur de la bande de confiance juste au-dessus,
   pour rester une mention et jamais un deuxieme logo de marque. */
.membre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .2rem .7rem; margin: 1rem 0 0; font-size: .78rem; font-weight: 500;
  letter-spacing: .02em; color: var(--txt-2); }
.membre a { display: inline-flex; align-items: center; }
.membre img { display: block; width: 140px; height: auto; }

/* ---------- Smoobu ------------------------------------------------------- */
/* Conteneur NEUTRE. Le tunnel est une iframe dont on ne controle pas la
   structure : aucune mise en page de la V2 ne doit dependre de son contenu. */
.tunnel, .calendrier { background: var(--blanc); border: 1px solid var(--filet-40);
  border-radius: var(--r-photo); padding: 0; margin: var(--sp-bloc) 0;
  max-width: 1000px; overflow: hidden; }
.calendrier { padding: 1rem; }
.calendarWidget { min-height: 400px; }
.tunnel { min-height: 640px; }

/* --- Widget calendrier : habillage complet, a nous de le faire -----------
   Le widget est pose avec data-disable-css="true" : Smoobu ne charge alors AUCUN
   style, et son HTML arrive nu. Sans les regles ci-dessous, les fleches de mois
   sont des images pleine largeur (954 px, mesure le 2026-08-15) et le bloc fait
   2 481 px de haut.
   🔴🔴 SEMANTIQUE DES CELLULES, CORRIGEE LE 2026-08-20 : elle etait INVERSEE depuis
   le 2026-08-15, donc le calendrier montrait le contraire de la realite (octobre
   entier annonce COMPLET alors qu'il est entierement LIBRE). Elle avait ete
   SUPPOSEE d'apres l'allure de la grille ; elle est maintenant PROUVEE, en croisant
   11 periodes avec l'API `checkAvailability` du tunnel, sur les deux logements :
     td class="" (VIDE)    = jour LIBRE          <- et non « complet »
     td.normal             = jour COMPLET        <- oui, « normal » veut dire PRIS
     td.arrival            = une arrivee ce jour : libre le matin, PRIS la nuit
     td.departure          = un depart ce jour  : PRIS le matin, LIBRE la nuit
     td.current-day        = aujourd'hui, TOUJOURS combinee (ex. "current-day normal")
   ⇒ La nuit qui commence le jour J est libre si J est VIDE ou `.departure`.
   ⚠️ Ne pas renommer ces classes : elles viennent du JS de Smoobu. */
.calendarWidget { font-family: var(--sans); }
.calendarWidget .multiCalendarWidget { display: flex; flex-wrap: wrap;
  gap: var(--sp-gouttiere); justify-content: center; }
.calendarWidget .fullCalendar { flex: 1 1 260px; max-width: 420px; min-width: 0; }
.calendarWidget #firstPartHeader { font-size: .875rem; color: var(--navy-70); text-align: center; }
.calendarWidget #secondPartHeader { display: flex; align-items: center; justify-content: center;
  gap: .5rem; position: relative; min-height: 44px; }
.calendarWidget #secondPartHeader h2 { margin: 0; font-family: var(--sans);
  font-size: 1.05rem; font-weight: 600; color: var(--navy); }
.calendarWidget .btn-prev, .calendarWidget .btn-next { display: inline-flex;
  align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; }
.calendarWidget .btn-prev { order: -1; }
.calendarWidget .btn-prev img, .calendarWidget .btn-next img { width: 18px; height: 18px; display: block; }
.calendarWidget table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: .5rem 0 0; }
.calendarWidget td { text-align: center; padding: 0; font-size: .875rem;
  color: var(--navy); border: 1px solid var(--blanc); }
/* ⚠️ Le JS de Smoobu pose height/line-height/width en style inline avec !important
   sur chaque cellule : on ne lutte pas, on ne style que couleurs et bordures. */
/* ⚠️ thead et pas tr:first-child : `:first-child` attrape AUSSI la premiere semaine
   du tbody, qui heritait donc du style des noms de jours. */
.calendarWidget thead td { color: var(--navy-70); font-weight: 600;
  font-size: .75rem; background: none; }
/* Jour LIBRE = le cas par defaut du tbody (Smoobu pose class="" VIDE, pas absent :
   un td:not([class]) ne l'attrape PAS, d'ou une regle de fond et non d'exception). */
.calendarWidget tbody td { background: var(--blanc); }
/* Jour COMPLET. Oui, la classe s'appelle `normal` : voir l'encadre en tete de
   section, c'est mesure, pas suppose. */
.calendarWidget tbody td.normal {
  background: var(--navy-12); color: var(--navy-90); text-decoration: line-through; }
/* Demi-journees. Le degrade se lit dans le sens de la journee : moitie haute =
   matin. Une arrivee occupe la NUIT, un depart la LIBERE. */
.calendarWidget tbody td.arrival { background: linear-gradient(135deg,
  var(--blanc) 0 50%, var(--navy-12) 50% 100%); }
.calendarWidget tbody td.departure { background: linear-gradient(135deg,
  var(--navy-12) 0 50%, var(--blanc) 50% 100%); }
.calendarWidget td.current-day { outline: 2px solid var(--navy); outline-offset: -2px; }
/* La mention Smoobu reste (c'est leur donnee, on les crédite), discrete. */
.calendarWidget .logo { text-align: right; margin-top: .75rem; }
.calendarWidget .logo a { font-size: .75rem; color: var(--navy-70); text-decoration: none; }

.calendrier__legende { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin: 1rem 0 0;
  padding: 0; list-style: none; font-size: .8125rem; color: var(--navy-70); }
.calendrier__legende li { display: inline-flex; align-items: center; gap: .5rem; }
.calendrier__legende .pastille { width: 14px; height: 14px; flex: 0 0 14px;
  border: 1px solid var(--filet-40); border-radius: 3px; display: inline-block; }
.calendrier__legende .pastille--libre { background: var(--blanc); }
.calendrier__legende .pastille--occupe { background: var(--navy-12); }

/* Jours cliquables. calendrier.js pose data-gh (la date ISO) sur les SEULS jours
   libres et a venir : un jour pris ou passe n'a donc ni curseur, ni tabulation,
   ni surbrillance, et ne promet rien.
   ⚠️ On surligne par outline et jamais par background : les demi-journees
   .arrival/.departure portent un degrade qu'un fond effacerait, et un fond
   navy-12 ferait passer un jour LIBRE pour un jour occupe. */
.calendarWidget td[data-gh] { cursor: pointer; }
.calendarWidget td[data-gh]:hover,
.calendarWidget td[data-gh]:focus-visible {
  outline: 2px solid var(--navy); outline-offset: -2px; }

/* Le sejour choisi : arrivee et depart en navy plein, nuits intermediaires en
   ambre clair. ⚠️ Contrastes deja mesures pour la charte : sur l'ambre clair
   #fcc978 seul le navy plein tient, sur le navy plein c'est le blanc. Ne pas
   melanger les deux couples.
   ⚠️ Ces regles viennent APRES celles de .normal / .arrival / .departure : meme
   specificite, donc c'est l'ordre qui les fait gagner. Ne pas les remonter. */
.calendarWidget td[data-gh-etat="milieu"] { background: var(--ambre-clair); color: var(--navy); }
.calendarWidget td[data-gh-etat="debut"],
.calendarWidget td[data-gh-etat="fin"] {
  background: var(--navy); color: var(--blanc); font-weight: 600; }

.calendrier__astuce { margin: .75rem 0 0; font-size: .8125rem; color: var(--navy-70); }
.calendrier__msg { margin: .5rem 0 0; font-size: .875rem; font-weight: 600; color: var(--navy); }
/* ⚠️ [hidden] doit gagner sur le display de .btn, sinon le lien reste visible
   avant meme qu'un sejour soit choisi. Meme piege que la barre collante. */
.calendrier__cta { margin-top: 1rem; }
.calendrier__cta[hidden] { display: none; }

/* ---------- Formulaires -------------------------------------------------- */
.form { max-width: var(--texte-max); }
.champ { display: block; margin-bottom: 1.1rem; }
.champ label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }
.champ input, .champ textarea {
  width: 100%; font: inherit; padding: .8rem 1rem; min-height: 48px;
  border: 1.5px solid var(--filet-40); border-radius: var(--r-controle);
  background: var(--blanc); color: var(--navy);
}
.champ input:focus, .champ textarea:focus { border-color: var(--navy); }
.champ--2 { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.champ--2 > * { min-width: 0; }
.champ input[type=date] { width: 100%; max-width: 100%; box-sizing: border-box; }
.champ--case { display: flex; gap: .6rem; align-items: flex-start; }
.champ--case input { width: auto; min-height: auto; margin-top: .35rem; }
.champ--case label { font-weight: 400; }
.opt { font-weight: 400; color: var(--txt-2); }
/* ⛔ jamais en hors-ecran : un pot de miel a gauche resterait lu par un lecteur d'ecran. */
.pot-de-miel { display: none; }

/* ---------- Liens OTA ---------------------------------------------------- */
/* Liens TEXTE, pas d'icones : Airbnb et Booking sont des marques deposees. */
.ota { margin-top: 1.5rem; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.ota__l { min-height: 44px; display: inline-flex; align-items: center; font-size: .875rem; }

/* ---------- Pied de page ------------------------------------------------- */
/* ⭐ LE PARI : finir sur un champ ambre clair quand tout le secteur finit sur du
   sombre. Mesure a 8,48:1, donc plus lisible que la plupart des pieds sombres.
   🔴 Le bandeau du BAS reste navy : le point orange de la signature Vojood ne
   fait que 1,96:1 sur l'ambre clair, il y disparaitrait. */
.pied { background: var(--ambre-clair); color: var(--navy); --txt-2: var(--navy-90);
  padding: var(--sp-section) 0 0; }
.pied a { color: var(--navy); }
.pied__marque { margin-bottom: var(--sp-bloc); }
.pied__logo { margin-bottom: .8rem; }
.pied__cols { display: grid; gap: var(--sp-bloc); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pied__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .pied__cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.pied__t { font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .8rem; }
.pied__liens { display: flex; flex-direction: column; gap: .1rem; align-items: flex-start;
  list-style: none; padding: 0; margin: 0; }
/* ⚠️ 44px et pas 40 : ce sont des liens de navigation empiles, pas des liens en
   ligne dans une phrase. L'exception « lien en ligne » ne les couvre pas. */
.pied__liens a, .lien-cookies { min-height: 44px; display: inline-flex; align-items: center;
  font-size: .9375rem; }
.lien-cookies { background: none; border: 0; padding: 0; color: var(--navy); font: inherit;
  text-decoration: underline; cursor: pointer; }

.pied__bas { margin-top: var(--sp-section); background: var(--navy); color: var(--blanc);
  --txt-2: var(--bleu-clair); padding: 1.25rem 0; }
.pied__bas a { color: var(--bleu-clair); }
.pied__bas .conteneur { display: flex; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; align-items: center; }
.pied__bas .micro { margin: 0; }

/* La signature d'agence. ⛔ Jamais de text-transform, jamais traduite.
   Le point final est le SEUL pixel orange autorise sur le site. */
.signature-vojood { margin: 0; font-size: .875rem; color: var(--bleu-clair); }
.signature-vojood a { font-weight: 600; color: var(--blanc); text-decoration: none; }
.signature-vojood .point { color: var(--credit-vojood); font-weight: 700; }

/* ---------- Banniere de consentement (CONTEXTE SOMBRE) ------------------ */
/* ⚠️ [hidden] doit gagner sur le display de la barre. */
.consentement[hidden] { display: none !important; }
.consentement { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--navy); color: var(--blanc); border-top: 1px solid rgba(255,255,255,.16);
  padding: 1rem 0; }
.consentement__in { display: flex; gap: 1.25rem; align-items: center;
  justify-content: space-between; flex-wrap: wrap; }
.consentement__txt { margin: 0; font-size: .875rem; max-width: 70ch; }
.consentement a { color: var(--bleu-clair); }
/* Refuser doit etre aussi facile qu'accepter : meme rangee, meme taille, un clic. */
.consentement__actions { display: flex; gap: .75rem; flex: none; }
.consentement__actions .btn { min-width: 8.5rem; flex: 1 1 8.5rem; }

/* La banniere et la barre collante vivent toutes deux en bas d'ecran : a la
   premiere visite la banniere recouvrait la barre. La banniere a priorite. */
body:has(.consentement:not([hidden])) .sticky-mobile { display: none !important; }

/* ---------- Barre collante mobile des pages de logement ----------------- */
.sticky-mobile[hidden] { display: none !important; }
.sticky-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--blanc); border-top: 1px solid var(--filet-40);
  padding: .7rem var(--bord-page); display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; }
.sticky-mobile .prix { font-size: 1.05rem; }
.sticky-mobile .btn { padding: .7rem 1.4rem; min-height: 44px; }
/* ⚠️ La barre recouvrait la derniere ligne du pied de page : on reserve sa hauteur. */
@media (max-width: 899px) {
  body:has(.sticky-mobile:not([hidden])) .pied__bas { padding-bottom: 5.5rem; }
}
@media (min-width: 900px) { .sticky-mobile { display: none !important; } }

/* ---------- Bouton WhatsApp flottant ------------------------------------- */
/* 🔴 TROIS elements se disputent le bas de l'ecran : la banniere de
   consentement (z 90), la barre collante mobile (z 80) et ce bouton (z 70).
   L'ordre est pose ICI, explicitement. Sans ces deux regles, le bouton
   recouvrait la barre de reservation sur les fiches logement.
   ⛔ Il n'est PAS ambre : l'ambre est reserve a UNE action par ecran et ce
      bouton est sur TOUS les ecrans. Il porte le vert de WhatsApp (demande de
      Wiam, 2026-08-20), avec du texte NAVY : blanc sur ce vert = 1,98:1. */
.wa-flottant {
  position: fixed; right: var(--bord-page); bottom: var(--bord-page); z-index: 70;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.15rem; min-height: 48px;
  background: var(--whatsapp); color: var(--navy); border-radius: var(--r-pilule);
  font-family: var(--sans); font-weight: 600; font-size: .875rem; letter-spacing: .01em;
  text-decoration: none; box-shadow: 0 6px 20px rgba(21,48,96,.28);
  transition: background .18s ease;
}
.wa-flottant:hover { background: var(--whatsapp-clair); }
.wa-flottant svg { width: 20px; height: 20px; flex: none; }

/* La banniere de consentement est une decision qui BLOQUE : rien ne doit lui
   disputer l'attention. Meme traitement que la barre collante juste au-dessus. */
body:has(.consentement:not([hidden])) .wa-flottant { display: none !important; }

@media (max-width: 899px) {
  /* Au-dessus de la barre collante, jamais par-dessus. */
  body:has(.sticky-mobile:not([hidden])) .wa-flottant { bottom: 5.25rem; }
  /* ⚠️ Meme piege que la barre collante : le bouton masquait la derniere ligne
     du pied de page. On reserve sa hauteur quand la barre n'est pas la. */
  body:not(:has(.sticky-mobile:not([hidden]))) .pied__bas { padding-bottom: 5rem; }
}

/* ---------- 404 : une page, trois langues -------------------------------- */
/* Servie par Vercel pour toute URL inconnue : on ne sait pas quelle langue le
   visiteur cherchait, donc les trois blocs, l'allemand d'abord. */
.e404__fond { min-height: 70vh; }
.e404 { display: grid; gap: var(--sp-bloc); grid-template-columns: 1fr; margin-top: var(--sp-bloc); }
@media (min-width: 800px) { .e404 { grid-template-columns: repeat(3, 1fr); } }
.e404__l h2 { color: var(--blanc); }
.e404__l p { color: var(--bleu-clair); }

/* ---------- Mouvement ---------------------------------------------------- */
/* L'etat par defaut est l'etat FINAL : rien n'est invisible sans JavaScript.
   C'est mouvement.js qui, sur l'accueil seulement, remet a zero puis anime. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}