/* ═══════════════════════════════════════════════════════════════════════════
   Yinzo — système de design
   Palette : pin profond + ocre chaud sur crème. « Yinzo » veut dire maison ;
   on part de la terre et du bois, pas du corail des plateformes existantes.
   Mobile d'abord : tout est dessiné pour le pouce, puis élargi.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* — Vert de marque (pin) — */
  /* --v600 est le « Vert Yinzo » de la charte de marque (brand/CHARTE.md).
     Il doit rester identique au vert des logos : deux verts presque
     semblables cote a cote se lisent comme un defaut, pas comme un choix.
     Contraste sur blanc 6,03:1 — texte et boutons conformes. */
  --v900:#052C25; --v800:#083A31; --v700:#0B4A3E; --v600:#1B6F5E;
  --v500:#1A7A66; --v300:#7FBBAA; --v100:#DFEFE9; --v50:#F1F8F5;
  /* — Ocre chaud, accent parcimonieux — */
  --o700:#8F5320; --o600:#B4692B; --o500:#CE8340; --o100:#FAEBDC; --o50:#FDF6EF;
  /* — Neutres crème — */
  --n900:#14201D; --n700:#384743; --n600:#5A6965; --n500:#83918D;
  --n300:#C6CDC9; --n200:#E2E6E2; --n100:#EFF1ED; --n50:#F9F8F4; --blanc:#FFFFFF;
  /* — États — */
  --danger:#9E2E1C; --danger-fond:#FCEFEC;
  --succes:#1A7A66; --succes-fond:var(--v100);
  --or:#C79325;

  --encre:var(--n900); --encre-doux:var(--n600); --encre-tenu:var(--n500);
  --fond:var(--blanc); --fond-doux:var(--n50); --bord:var(--n200); --bord-fort:var(--n300);

  /* — Echelle typographique. Sept pas, pas quarante-trois : une taille
     qui differe de 0,01 rem de sa voisine ne cree aucune hierarchie, elle
     fait juste paraitre chaque bloc different du precedent. — */
  --t-xs:0.75rem;
  --t-s:0.875rem;
  --t-m:1.0rem;
  --t-l:1.125rem;
  --t-xl:1.375rem;
  --t-2xl:1.625rem;
  --t-3xl:2.0rem;
  /* — Trois graisses. Seize valeurs entre 450 et 710 etaient
     indiscernables a l'oeil et ne se distinguaient qu'au fichier. — */
  --g-normal:400;
  --g-appuye:600;
  --g-fort:700;
  --r-micro:3px; --r-xxs:6px; --r-xs:8px; --r-s:12px; --r-m:16px;
  --r-l:22px; --r-xl:30px;

  /* — Echelle d'espacement, base 4. Sept pas, comme la typographie. —

     Ajoutee le 2026-09-15, et c'etait le dernier angle mort du systeme. Un
     releve de `yinzo.css` a montre **trente-neuf valeurs d'espacement
     distinctes** pour 297 declarations : 9px vingt-cinq fois, 14px vingt-cinq
     fois, 11px quatorze fois, 13px treize fois. C'est la version « marges »
     des quarante-trois tailles de police que ce fichier denonce plus haut, et
     personne ne l'avait jamais corrigee.

     Pas de valeur entre 4 et 8, deliberement. Le 6px servait vingt-trois fois
     pour les petits interstices ; il passe a 4px. Ajouter `--e-0:2` pour
     sauver ce 6px rouvrirait exactement la porte que les regles 7 et 8
     ferment ailleurs : moins de valeurs vaut mieux qu'une valeur commode.

     `--gouttiere` reste a part : c'est la marge de PAGE, elle respire avec la
     largeur de l'ecran (20 / 32 / 44) et ne suit pas cette echelle.

     **Les 235 composants existants ne sont pas migres.** Tout code neuf emploie
     ces jetons ; la migration se fait par lots, a l'occasion. La regle 9 de
     `ops/harmonie.py` ne s'activera que le jour ou le decompte tombe a zero --
     une regle qui echouerait sur 163 declarations des le premier deploiement
     ne laisserait que l'option de la desactiver, et un garde qu'on desactive
     est pire qu'un garde absent. Voir ADR-071. */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px;
  --e-6:24px; --e-7:32px;

  /* — La charte de marque, appliquee a la conciergerie —

     `brand/CHARTE.md` fixe quatre couleurs. Un releve du 2026-09-15 a montre
     que TROIS SUR QUATRE etaient absentes de ce fichier : seul le vert avait
     survecu, sans doute parce qu'il est aussi dans le logo. L'encre etait un
     autre noir (#14201D), la brume un creme (#F9F8F4), l'ocre plus brun
     (#B4692B). L'application avait cesse d'appliquer sa propre marque.

     Ces jetons-ci sont conformes. Ils portent le prefixe `--cg-` et ne
     remplacent PAS les couleurs du site voyageur : les changer repeindrait
     yinzo.fr entier, contre la consigne « aucune regression ». La conciergerie
     n'est donc pas une seconde palette — c'est la PREMIERE ZONE REMISE EN
     CONFORMITE, et le reste du site porte la dette. Voir ADR-072. */
  --cg-vert:#1B6F5E; --cg-vert-fonce:#125044; --cg-vert-clair:#E1F0EC;
  --cg-ocre:#E9A63A; --cg-ocre-clair:#FBF0DC;
  --cg-encre:#10312B; --cg-encre-2:#4A615B; --cg-encre-3:#7C8F8A;
  --cg-brume:#EAF2EF; --cg-fond-nav:#F1F8F5;
  --cg-trait:#DCE6E2; --cg-trait-fort:#C3D3CE;
  --cg-rouge:#B3261E; --cg-rouge-clair:#FBEAE9;
  --cg-ok:#1D7A4C; --cg-ok-clair:#E4F3EA;

  /* — Relief —
     Les ombres sont TEINTEES de l'encre verte, jamais grises : une ombre neutre
     sur un fond creme se voit comme une salissure, une ombre teintee se lit
     comme de la lumiere. Chaque niveau superpose une ombre de contact courte et
     une ombre portee longue — c'est ce qui donne l'epaisseur, plus que la taille
     de l'ombre elle-meme.
     `--liseret` est un filet clair pose en haut des surfaces relevees : il
     simule l'arete eclairee d'un objet, et c'est lui qui fait basculer une carte
     de « rectangle colore » a « objet pose sur la page ». */
  --o1:0 1px 2px rgba(16,49,43,.05), 0 2px 8px rgba(16,49,43,.05);
  --o2:0 2px 6px rgba(16,49,43,.07), 0 14px 30px rgba(16,49,43,.09);
  --o3:0 10px 44px rgba(16,49,43,.17);
  --o-releve:0 1px 1px rgba(16,49,43,.05), 0 4px 10px rgba(16,49,43,.07),
             0 18px 38px rgba(16,49,43,.10);
  --o-flottant:0 2px 4px rgba(16,49,43,.06), 0 10px 22px rgba(16,49,43,.10),
               0 30px 60px rgba(16,49,43,.14);
  --liseret:inset 0 1px 0 rgba(255,255,255,.6);
  --liseret-fort:inset 0 1px 0 rgba(255,255,255,.28);
  --anneau:0 0 0 3px var(--v100), 0 0 0 4px var(--v500);

  --t:170ms cubic-bezier(.2,.6,.3,1);
  --t-doux:260ms cubic-bezier(.22,1,.36,1);
  --entete:72px; --barre-basse:64px;
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:var(--t-s);line-height:1.55;color:var(--encre);background:var(--fond);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.16;letter-spacing:-.022em;font-weight:var(--g-appuye)}
h1{font-size:clamp(1.65rem,1.15rem+2.2vw,3rem)}
h2{font-size:clamp(1.2rem,1.05rem+.7vw,1.6rem)}
h3{font-size:var(--t-m)}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--v600);outline-offset:2px;border-radius:var(--r-xs)}
::selection{background:var(--v100)}

/* Gouttières : une seule source de vérité pour toute la mise en page.
   Les pages n'ont plus de style en ligne — c'est ce qui faisait dériver
   certains textes trop à gauche et d'autres trop à droite. */
:root{--gouttiere:20px;--large:1320px;--moyen:900px;--etroit:640px;--lecture:720px}
@media(min-width:720px){:root{--gouttiere:32px}}
@media(min-width:1400px){:root{--gouttiere:44px}}

.contenu{width:100%;max-width:var(--large);margin-inline:auto;
  padding-inline:max(var(--gouttiere),env(safe-area-inset-left))}

/* Largeurs de page : à choisir selon le contenu, jamais en style en ligne.
   .page-lecture  → texte suivi (pages légales) : ~70 caractères par ligne
   .page-etroite  → formulaires courts, centrés
   .page-moyenne  → tableaux, détails de réservation
   .page          → grilles et listes, pleine largeur */
.page,.page-moyenne,.page-etroite,.page-lecture{
  width:100%;margin-inline:auto;
  padding-inline:max(var(--gouttiere),env(safe-area-inset-left));
  padding-block:28px 56px}
@media(min-width:720px){.page,.page-moyenne,.page-etroite,.page-lecture{padding-block:36px 72px}}
.page{max-width:var(--large)}
/* Une page qui doit exploiter l'ecran : formulaires longs, grilles denses.
   Elle s'elargit avec la fenetre au lieu de rester une colonne centree, tout
   en gardant un plafond — au-dela, l'oeil ne suit plus une ligne d'un bord a
   l'autre. Les blocs de texte qu'elle contient restent, eux, en colonne de
   lecture : c'est `.colonne-lecture` qui s'en charge. */
.page-atelier{max-width:min(var(--large), 100%)}
.colonne-lecture{max-width:var(--lecture)}
.page-moyenne{max-width:var(--moyen)}
.page-etroite{max-width:var(--etroit)}
.page-lecture{max-width:var(--lecture)}

/* Un en-tête de page homogène partout */
.page-entete{margin-bottom:22px}
.page-entete h1{font-size:clamp(1.35rem,1.15rem+.9vw,1.75rem);margin-bottom:6px}
.page-entete p{color:var(--encre-doux);margin:0;font-size:var(--t-s)}
.page-retour{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-s);
  color:var(--encre-doux);margin-bottom:12px}
.page-retour:hover{color:var(--encre)}
.page-retour svg{width:15px;height:15px}

/* Les éléments qui doivent déborder jusqu'au bord sur mobile (galerie, tableaux)
   utilisent cette largeur négative, calculée sur la même gouttière. */
.pleine-bande{margin-inline:calc(var(--gouttiere) * -1);
  padding-inline:var(--gouttiere)}
@media(min-width:720px){.pleine-bande{margin-inline:0;padding-inline:0}}

/* ── Entête ─────────────────────────────────────────────────────────────── */
.entete{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--bord)}
.entete-grille{max-width:var(--large);margin-inline:auto;
  padding:12px max(var(--gouttiere),env(safe-area-inset-left));
  display:flex;align-items:center;gap:14px;justify-content:space-between}
@media(min-width:1024px){.entete-grille{padding-block:14px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:26px}}

/* Le logo est un fichier de la charte, plus un picto generique accompagne du
   mot « Yinzo » : le mot-symbole y est deja compose, et le composer une seconde
   fois en CSS donnait deux typographies differentes pour le meme nom. */
.marque{display:inline-flex;align-items:center;flex:none}
.marque img{height:34px;width:auto;display:block}
@media(max-width:560px){.marque img{height:28px}}

.lien-ia{display:inline-flex;align-items:center;gap:6px;color:var(--v700)}
.lien-ia svg{width:16px;height:16px;color:var(--v600)}
.lien-ia:hover{color:var(--v800)}

.entete-nav{display:none;align-items:center;gap:4px;justify-self:end}
@media(min-width:1024px){.entete-nav{display:flex}}
.lien-nav{padding:9px 13px;border-radius:999px;font-weight:var(--g-appuye);font-size:var(--t-s);transition:background var(--t)}
.lien-nav:hover{background:var(--fond-doux)}

/* ── Recherche : pilule (bureau) / déclencheur (mobile) ─────────────────── */
.pilule{display:none}
@media(min-width:1024px){
  .pilule{display:flex;align-items:stretch;justify-self:center;background:var(--blanc);
    border:1px solid var(--bord);border-radius:999px;box-shadow:var(--o1);overflow:hidden;
    transition:box-shadow var(--t);max-width:700px;width:100%}
  .pilule:hover,.pilule:focus-within{box-shadow:var(--o2)}
}
.pilule-champ{flex:1;min-width:0;padding:8px 20px;border:0;background:none;
  display:flex;flex-direction:column;justify-content:center;position:relative}
.pilule-champ+.pilule-champ::before{content:"";position:absolute;left:0;top:24%;height:52%;
  width:1px;background:var(--bord)}
.pilule-champ label{font-size:var(--t-xs);font-weight:var(--g-fort);letter-spacing:.045em;
  text-transform:uppercase;color:var(--encre-doux)}
.pilule-champ input,.pilule-champ select{border:0;padding:1px 0;font-size:var(--t-s);background:none;
  width:100%;color:var(--encre);font-family:inherit;min-height:auto}
.pilule-champ input:focus{box-shadow:none;outline:none}
.pilule-champ input::placeholder{color:var(--encre-tenu)}
.pilule-bouton{margin:6px;border:0;border-radius:999px;background:var(--v600);color:#fff;
  width:44px;height:44px;flex:none;display:grid;place-items:center;cursor:pointer;
  transition:background var(--t),transform var(--t)}
.pilule-bouton:hover{background:var(--v700);transform:scale(1.05)}
.pilule-bouton svg{width:17px;height:17px}

/* Déclencheur mobile : ouvre la feuille de recherche */
.recherche-mobile{display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  border:1px solid var(--bord);border-radius:999px;background:var(--blanc);
  box-shadow:var(--o1);padding:9px 8px 9px 16px;cursor:pointer;text-align:left;
  font:inherit;color:inherit;min-height:46px}
@media(min-width:1024px){.recherche-mobile{display:none}}
.recherche-mobile svg{width:17px;height:17px;color:var(--v600);flex:none}
.recherche-mobile b{display:block;font-size:var(--t-s);font-weight:var(--g-appuye);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recherche-mobile span{display:block;font-size:var(--t-xs);color:var(--encre-tenu);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recherche-mobile .rond{margin-left:auto;width:32px;height:32px;border-radius:50%;
  background:var(--v600);color:#fff;display:grid;place-items:center;flex:none}
.recherche-mobile .rond svg{color:#fff;width:14px;height:14px}

.bouton-menu{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--bord);background:var(--blanc);cursor:pointer;flex:none}
@media(min-width:1024px){.bouton-menu{display:none}}
.bouton-menu svg{width:18px;height:18px}

/* ── Barre de navigation basse (mobile) ─────────────────────────────────── */
.barre-basse{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;
  background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  border-top:1px solid var(--bord);padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:1024px){.barre-basse{display:none}}
.barre-basse a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:9px 3px 8px;font-size:var(--t-xs);font-weight:var(--g-appuye);color:var(--encre-tenu);
  min-height:56px;text-align:center;overflow:hidden;white-space:nowrap}
/* Cinq entrees depuis l'ajout de l'IA : sur les ecrans les plus etroits, les
   libelles se resserrent plutot que de deborder. */
@media(max-width:359px){.barre-basse a{font-size:var(--t-xs);padding-inline:2px}}
.barre-basse a.actif{color:var(--v600)}
.barre-basse svg{width:21px;height:21px}
body.a-barre-basse{padding-bottom:calc(var(--barre-basse) + env(safe-area-inset-bottom))}
@media(min-width:1024px){body.a-barre-basse{padding-bottom:0}}

/* ── Boutons ────────────────────────────────────────────────────────────── */
.bouton,.bouton-principal,.bouton-doux{display:inline-flex;align-items:center;
  justify-content:center;gap:8px;font:inherit;font-weight:var(--g-appuye);cursor:pointer;
  border-radius:var(--r-s);padding:12px 20px;min-height:46px;transition:all var(--t);
  border:1px solid transparent;text-align:center}
/* Un bouton se presse. Le degrade et le liseret le posent au-dessus de la page ;
   au clic, l'ombre se retracte et le liseret s'inverse — la surface s'enfonce
   au lieu de simplement retrecir. C'est ce retour tactile qui distingue un
   bouton d'un rectangle cliquable. */
.bouton-principal{color:#fff;
  background:linear-gradient(180deg,var(--v500),var(--v600) 62%,var(--v700));
  box-shadow:var(--liseret-fort),0 1px 2px rgba(16,49,43,.16),
             0 4px 12px rgba(16,49,43,.18)}
.bouton-principal:hover{
  background:linear-gradient(180deg,var(--v600),var(--v700) 62%,var(--v800));
  box-shadow:var(--liseret-fort),0 2px 4px rgba(16,49,43,.18),
             0 8px 20px rgba(16,49,43,.22);
  transform:translateY(-1px)}
.bouton-principal:active{transform:translateY(1px) scale(.99);
  box-shadow:inset 0 2px 5px rgba(5,44,37,.34),0 1px 1px rgba(16,49,43,.12)}

.bouton{background:linear-gradient(180deg,var(--blanc),var(--n50));
  color:var(--encre);border-color:var(--bord-fort);
  box-shadow:var(--liseret),0 1px 2px rgba(16,49,43,.07)}
.bouton:hover{border-color:var(--encre);transform:translateY(-1px);
  box-shadow:var(--liseret),0 2px 4px rgba(16,49,43,.09),0 6px 14px rgba(16,49,43,.10)}
.bouton:active{transform:translateY(1px) scale(.99);
  box-shadow:inset 0 2px 4px rgba(16,49,43,.10)}

.bouton-doux{background:linear-gradient(180deg,var(--n50),var(--n100));color:var(--encre);
  box-shadow:var(--liseret),0 1px 2px rgba(16,49,43,.06)}
.bouton-doux:hover{background:linear-gradient(180deg,var(--v50),var(--v100));
  transform:translateY(-1px)}
.bouton-doux:active{transform:translateY(1px) scale(.99);
  box-shadow:inset 0 2px 4px rgba(16,49,43,.09)}

/* Un anneau de focus visible partout, y compris sur fond vert : sans lui, la
   navigation au clavier devient un jeu de devinettes. */
.bouton:focus-visible,.bouton-principal:focus-visible,.bouton-doux:focus-visible,
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,summary:focus-visible{outline:none;box-shadow:var(--anneau)}
.bouton-lien{border:0;background:none;padding:0;color:inherit;cursor:pointer;font:inherit;
  text-decoration:underline;text-underline-offset:3px;min-height:auto}
.pleine-largeur{width:100%}
button[disabled],.bouton[disabled]{opacity:.45;cursor:not-allowed}

/* ── Champs ─────────────────────────────────────────────────────────────── */
input,select,textarea{font:inherit;color:var(--encre);background:var(--blanc);
  border:1px solid var(--bord-fort);border-radius:var(--r-s);padding:11px 13px;width:100%;
  min-height:46px;transition:border-color var(--t),box-shadow var(--t)}
/* 16px minimum sur mobile : en dessous, iOS zoome à la mise au point. */
/* 16 px **en dur**, et pas `var(--t-m)` : la regle d'iOS porte sur des
   pixels calcules, pas sur des rem. Si quelqu'un reduit la taille de base
   de son navigateur, 1 rem tombe sous 16 px et le zoom automatique revient
   — la page devient inutilisable d'une main. C'est une exception assumee
   a l'echelle typographique, et `ops/harmonie.py` la connait. */
@media(max-width:1023px){input,select,textarea{font-size:16px}}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--v600);
  box-shadow:0 0 0 3px var(--v100)}
label{display:block;font-weight:var(--g-appuye);font-size:var(--t-s);margin-bottom:5px}
.champ{margin-bottom:16px}
.aide{font-size:var(--t-xs);color:var(--encre-doux);margin-top:5px}
.formulaire{max-width:520px}
.formulaire p{margin-bottom:15px}
.formulaire ul.errorlist{color:var(--danger);font-size:var(--t-s);padding-left:1.1em;margin:4px 0;list-style:none}

/* ── Rubans de catégories ───────────────────────────────────────────────── */
.rubans{border-bottom:1px solid var(--bord);background:var(--blanc);
  position:sticky;top:var(--entete);z-index:40}
.rubans-piste{max-width:var(--large);margin-inline:auto;display:flex;gap:26px;
  padding:11px max(var(--gouttiere),env(safe-area-inset-left));
  overflow-x:auto;scrollbar-width:none;align-items:center;-webkit-overflow-scrolling:touch}
@media(min-width:720px){.rubans-piste{gap:32px}}
.rubans-piste::-webkit-scrollbar{display:none}
.ruban{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;
  padding-bottom:9px;border-bottom:2px solid transparent;color:var(--encre-doux);
  font-size:var(--t-xs);font-weight:var(--g-appuye);white-space:nowrap;transition:all var(--t);
  opacity:.72;min-width:52px}
.ruban svg{width:22px;height:22px}
.ruban:hover{opacity:1;color:var(--encre);border-bottom-color:var(--bord-fort)}
.ruban.actif{opacity:1;color:var(--encre);border-bottom-color:var(--encre)}
.barre-outils{display:flex;gap:9px;align-items:center;margin-left:auto;padding-left:16px;
  position:sticky;right:0;background:linear-gradient(90deg,transparent,var(--blanc) 22%)}
.puce-filtre{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;
  border:1px solid var(--bord-fort);border-radius:var(--r-s);background:var(--blanc);
  font-size:var(--t-s);font-weight:var(--g-appuye);white-space:nowrap;cursor:pointer;min-height:42px}
.puce-filtre:hover{border-color:var(--encre)}
.puce-filtre .compteur{background:var(--v600);color:#fff;border-radius:999px;min-width:19px;
  height:19px;display:grid;place-items:center;font-size:var(--t-xs);padding:0 5px}

/* ── Cartes d'annonce ───────────────────────────────────────────────────── */
.grille-annonces{display:grid;gap:24px 18px;grid-template-columns:1fr}
@media(min-width:520px){.grille-annonces{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grille-annonces{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1240px){.grille-annonces{grid-template-columns:repeat(4,1fr)}}
.recherche-liste .grille-annonces{grid-template-columns:1fr}
@media(min-width:640px){.recherche-liste .grille-annonces{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1400px){.recherche-liste .grille-annonces{grid-template-columns:repeat(3,1fr)}}

/* La carte se souleve au survol. Le mouvement est court (3 px) et lent : trop
   ample, il donne le mal de mer sur une grille de vingt logements. */
.carte{display:block;color:inherit;transition:transform var(--t-doux)}
@media(hover:hover){.carte:hover{transform:translateY(-3px)}}
.carte-media{position:relative;aspect-ratio:20/19;border-radius:var(--r-m);overflow:hidden;
  background:var(--fond-doux);margin-bottom:11px;
  box-shadow:0 1px 2px rgba(16,49,43,.08),0 4px 12px rgba(16,49,43,.08);
  transition:box-shadow var(--t-doux)}
@media(hover:hover){.carte:hover .carte-media{box-shadow:var(--o-releve)}}
.carte-media img{width:100%;height:100%;object-fit:cover;transition:transform 400ms cubic-bezier(.2,.6,.3,1)}
@media(hover:hover){.carte:hover .carte-media img{transform:scale(1.05)}}
.carte-vide{width:100%;height:100%;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--v100),var(--n50) 55%,var(--o100));color:var(--v600);opacity:.6}
.carte-vide svg{width:48px;height:48px}
.carte-etiquette{position:absolute;top:11px;left:11px;background:rgba(255,255,255,.95);
  padding:6px 11px;border-radius:999px;font-size:var(--t-xs);font-weight:var(--g-fort);box-shadow:var(--o1);
  backdrop-filter:blur(4px);display:inline-flex;align-items:center;gap:5px}
.carte-etiquette svg{width:12px;height:12px;color:var(--o600)}
.carte-titre{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.carte-titre h3{margin:0;font-size:var(--t-m);font-weight:var(--g-appuye);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.carte-note{display:inline-flex;align-items:center;gap:3px;font-size:var(--t-s);font-weight:var(--g-appuye);flex:none}
.carte-note svg{width:13px;height:13px;fill:var(--encre)}
.carte-meta{color:var(--encre-doux);font-size:var(--t-s);margin:2px 0 5px}
.carte-prix{font-size:var(--t-s);margin:0}
.carte-prix strong{font-weight:var(--g-fort)}
.carte-prix .total{color:var(--encre-doux);font-size:var(--t-s)}

/* ── Accueil ────────────────────────────────────────────────────────────── */
.heros{background:
    radial-gradient(1200px 520px at 82% -14%,var(--v100),transparent 60%),
    radial-gradient(800px 420px at 2% 6%,var(--o100),transparent 56%),var(--n50);
  border-bottom:1px solid var(--bord)}
.heros-inner{max-width:var(--large);margin-inline:auto;text-align:center;
  padding:48px max(var(--gouttiere),env(safe-area-inset-left)) 44px}
@media(min-width:720px){.heros-inner{padding-block:78px 66px}}
.heros h1{max-width:16ch;margin:0 auto .5em}
.heros .accroche{font-size:clamp(.97rem,.94rem+.28vw,1.14rem);color:var(--encre-doux);
  max-width:58ch;margin:0 auto 30px}
.heros-chiffres{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:34px}
@media(min-width:720px){.heros-chiffres{gap:46px}}
.chiffre b{display:block;font-size:clamp(1.35rem,1.1rem+.9vw,1.8rem);font-weight:var(--g-fort);
  letter-spacing:-.032em;
  background:linear-gradient(170deg,var(--v500),var(--v800));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* Repli : si le decoupage sur texte n'est pas supporte, la couleur pleine
     reprend la main plutot que de laisser un texte transparent, donc invisible. */
  -webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .chiffre b{background:none;color:var(--v600);-webkit-text-fill-color:currentColor}
}
.chiffre span{font-size:var(--t-xs);color:var(--encre-doux);display:block;max-width:19ch}

.recherche-grande{display:grid;grid-template-columns:1fr;gap:0;
  background:linear-gradient(180deg,#fff,var(--n50));
  border:1px solid var(--bord);border-radius:var(--r-l);
  box-shadow:var(--liseret),var(--o-releve);
  max-width:960px;margin:0 auto;overflow:hidden;
  transition:box-shadow var(--t-doux)}
.recherche-grande:focus-within{box-shadow:var(--liseret),var(--o-flottant)}
@media(min-width:560px){.recherche-grande{grid-template-columns:1fr 1fr}}
@media(min-width:940px){.recherche-grande{grid-template-columns:1.7fr 1fr 1fr .9fr auto;border-radius:999px}}
.recherche-grande .pilule-champ{display:flex;padding:13px 22px;border-top:1px solid var(--bord)}
.recherche-grande .pilule-champ:first-child{border-top:0}
@media(min-width:560px){.recherche-grande .pilule-champ:nth-child(2){border-top:0}}
@media(min-width:940px){.recherche-grande .pilule-champ{border-top:0}}
.recherche-grande .pilule-champ+.pilule-champ::before{display:none}
@media(min-width:940px){.recherche-grande .pilule-champ+.pilule-champ::before{display:block}}
.recherche-grande .pilule-bouton{width:auto;height:48px;margin:12px;border-radius:var(--r-s)}
@media(min-width:940px){.recherche-grande .pilule-bouton{width:50px;height:50px;border-radius:999px;margin:6px}}
.recherche-grande .pilule-bouton .texte{font-weight:var(--g-appuye);padding:0 6px}
@media(min-width:940px){.recherche-grande .pilule-bouton .texte{display:none}}

.section{padding:44px 0}
@media(min-width:720px){.section{padding:62px 0}}
.section-doux{background:var(--n50)}
.section-entete{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:22px;flex-wrap:wrap}
.section-entete p{color:var(--encre-doux);margin:3px 0 0;font-size:var(--t-s)}

.trio{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:680px){.trio{grid-template-columns:repeat(3,1fr);gap:34px}}
/* Traitement « icone d'application » : un degrade qui va du clair au fonce vers
   le bas, un liseret blanc sur l'arete haute, et une ombre de contact courte.
   Les trois ensemble suffisent — un degrade seul reste plat, une ombre seule
   fait autocollant. Le `::after` pose un voile lumineux sur la moitie haute,
   c'est ce qui donne l'impression de verre bombe. */
.pictogramme{position:relative;width:52px;height:52px;border-radius:var(--r-m);
  display:grid;place-items:center;margin-bottom:16px;isolation:isolate;
  background:linear-gradient(160deg,var(--v500),var(--v700));color:#fff;
  box-shadow:var(--liseret-fort),0 1px 2px rgba(16,49,43,.14),
             0 6px 14px rgba(16,49,43,.16);
  transition:transform var(--t-doux),box-shadow var(--t-doux)}
.pictogramme::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 62%);
  pointer-events:none}
.pictogramme.chaud{background:linear-gradient(160deg,var(--o500),var(--o700))}
.pictogramme svg{width:25px;height:25px;position:relative;z-index:1;
  filter:drop-shadow(0 1px 1px rgba(16,49,43,.25))}
@media(hover:hover){
  .trio article:hover .pictogramme{transform:translateY(-2px) scale(1.04);
    box-shadow:var(--liseret-fort),0 2px 4px rgba(16,49,43,.16),
               0 12px 24px rgba(16,49,43,.20)}
}
.trio h3{font-size:var(--t-m)}
.trio p{color:var(--encre-doux);margin:0;font-size:var(--t-s)}

.villes{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,158px),1fr))}
.ville{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-m);
  border:1px solid var(--bord);background:var(--blanc);transition:all var(--t);min-height:66px}
.ville:hover{border-color:var(--encre);box-shadow:var(--o1)}
.ville-vignette{width:40px;height:40px;border-radius:var(--r-s);flex:none;
  background:linear-gradient(140deg,var(--v100),var(--o100));display:grid;place-items:center;color:var(--v600)}
.ville-vignette svg{width:19px;height:19px}
.ville b{display:block;font-size:var(--t-s);font-weight:var(--g-appuye)}
.ville span{font-size:var(--t-xs);color:var(--encre-doux)}

/* ── Recherche : liste + carte ──────────────────────────────────────────── */
.recherche-page{display:grid;grid-template-columns:1fr}
@media(min-width:1100px){.recherche-page{grid-template-columns:1fr 40vw}
  .recherche-page.sans-carte{grid-template-columns:1fr}}
.recherche-liste{min-width:0;padding-block:20px 48px;
  padding-inline:max(var(--gouttiere),env(safe-area-inset-left))}
@media(min-width:720px){.recherche-liste{padding-block:26px 64px}}
.recherche-carte{display:none;background:var(--n50)}
@media(min-width:1100px){.recherche-carte{display:block;position:sticky;
  top:calc(var(--entete) + 53px);height:calc(100vh - var(--entete) - 53px);
  border-left:1px solid var(--bord)}}
#carte{width:100%;height:100%;min-height:300px}
@media(max-width:1099px){
  .recherche-page.carte-visible .recherche-carte{display:block;height:calc(100vh - var(--entete) - 53px - var(--barre-basse))}
  .recherche-page.carte-visible .recherche-liste{display:none}}
.bascule-carte{position:fixed;bottom:calc(var(--barre-basse) + 18px + env(safe-area-inset-bottom));
  left:50%;transform:translateX(-50%);z-index:50;background:var(--encre);color:#fff;border:0;
  border-radius:999px;padding:12px 22px;font-weight:var(--g-appuye);box-shadow:var(--o3);display:none;
  cursor:pointer;align-items:center;gap:8px;font-size:var(--t-s)}
@media(max-width:1099px){.bascule-carte{display:inline-flex}}
.bascule-carte svg{width:16px;height:16px}
.marqueur-prix{background:var(--blanc);border:1px solid var(--bord-fort);border-radius:999px;
  padding:6px 12px;font-size:var(--t-xs);font-weight:var(--g-fort);box-shadow:var(--o1);cursor:pointer;
  white-space:nowrap;transition:all var(--t);color:var(--encre);font-family:inherit}
.marqueur-prix:hover,.marqueur-prix.actif{background:var(--encre);color:#fff;
  border-color:var(--encre);transform:scale(1.07)}

/* ── Feuilles et panneaux (dialog) ──────────────────────────────────────── */
dialog.panneau{border:0;padding:0;color:var(--encre);background:var(--blanc);
  box-shadow:var(--o3);width:100%;max-width:100%;height:100%;max-height:100%;margin:0}
@media(min-width:720px){dialog.panneau{border-radius:var(--r-l);width:min(760px,94vw);
  height:auto;max-height:88vh;margin:auto}}
dialog.panneau::backdrop{background:rgba(20,32,29,.45);backdrop-filter:blur(2px)}
.panneau-entete{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--bord);position:sticky;top:0;
  background:var(--blanc);z-index:2}
.panneau-entete h2{margin:0;font-size:var(--t-m)}
.panneau-fermer{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:0;background:var(--fond-doux);cursor:pointer;flex:none}
.panneau-fermer svg{width:17px;height:17px}
.panneau-corps{padding:6px 18px 20px;overflow-y:auto;flex:1;
  max-height:calc(100vh - 150px);-webkit-overflow-scrolling:touch}
@media(min-width:720px){.panneau-corps{padding:6px 24px 22px;max-height:calc(88vh - 146px)}}
.panneau-pied{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--bord);
  position:sticky;bottom:0;background:var(--blanc)}
@media(min-width:720px){.panneau-pied{padding:15px 24px}}
.groupe-filtre{padding:20px 0;border-bottom:1px solid var(--bord)}
.groupe-filtre:last-child{border-bottom:0}
.groupe-filtre h3{font-size:var(--t-m);margin-bottom:12px}
.choix-grille{display:flex;flex-wrap:wrap;gap:9px}
.choix{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;
  border:1px solid var(--bord-fort);border-radius:var(--r-s);cursor:pointer;font-size:var(--t-s);
  background:var(--blanc);transition:all var(--t);user-select:none;min-height:44px}
.choix:hover{border-color:var(--encre)}
.choix input{position:absolute;opacity:0;width:0;height:0}
.choix:has(input:checked){border-color:var(--v600);background:var(--v50);
  box-shadow:inset 0 0 0 1px var(--v600);font-weight:var(--g-appuye)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.compteur-reglage{display:flex;align-items:center;justify-content:space-between;padding:11px 0;gap:16px}
.compteur-boutons{display:flex;align-items:center;gap:13px}
.compteur-boutons .bouton-pas{width:38px;height:38px;border-radius:50%;border:1px solid var(--bord-fort);
  background:var(--blanc);font-size:var(--t-l);cursor:pointer;line-height:1;display:grid;
  place-items:center;min-height:38px;padding:0}
.compteur-boutons button:hover:not([disabled]){border-color:var(--encre)}
.compteur-boutons output{min-width:26px;text-align:center;font-weight:var(--g-appuye)}

/* Feuille de recherche mobile */
.feuille-recherche .panneau-corps{padding-top:16px}
.feuille-recherche .champ-feuille{border:1px solid var(--bord);border-radius:var(--r-m);
  padding:14px 16px;margin-bottom:12px}
.feuille-recherche .champ-feuille label{font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.05em;font-weight:var(--g-fort);color:var(--encre-doux)}
.feuille-recherche .champ-feuille input{border:0;padding:2px 0;min-height:auto;font-size:var(--t-m)}
.feuille-recherche .champ-feuille input:focus{box-shadow:none}

/* ── Fiche d'annonce ────────────────────────────────────────────────────── */
.galerie{display:grid;grid-template-columns:1fr;gap:6px;border-radius:0;overflow:hidden;
  aspect-ratio:4/3;margin:0 calc(var(--gouttiere) * -1) 22px}
@media(min-width:720px){.galerie{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;
  gap:8px;border-radius:var(--r-l);aspect-ratio:2.1/1;margin:0 0 30px}
  .galerie>*:first-child{grid-row:1/3}}
.galerie>*{background:var(--fond-doux);overflow:hidden}
@media(max-width:719px){.galerie>*:not(:first-child){display:none}}
.galerie img{width:100%;height:100%;object-fit:cover}

.annonce-colonnes{display:grid;grid-template-columns:1fr;gap:30px;padding-bottom:56px}
@media(min-width:1000px){.annonce-colonnes{grid-template-columns:minmax(0,1fr) 372px;gap:62px;
  align-items:start}}
.bloc{padding:26px 0;border-bottom:1px solid var(--bord)}
.bloc:last-of-type{border-bottom:0}
.equipements{display:grid;grid-template-columns:1fr;gap:13px}
@media(min-width:520px){.equipements{grid-template-columns:repeat(2,1fr)}}
.equipement{display:flex;align-items:center;gap:11px;font-size:var(--t-s)}
.equipement svg{width:19px;height:19px;color:var(--v600);flex:none}

.reserver{border:1px solid var(--bord);border-radius:var(--r-l);padding:20px;
  box-shadow:var(--o2);background:var(--blanc)}
@media(min-width:1000px){.reserver{position:sticky;top:calc(var(--entete) + 20px);padding:24px}}
.reserver-prix{display:flex;align-items:baseline;gap:6px;margin-bottom:16px}
.reserver-prix b{font-size:var(--t-xl);font-weight:var(--g-fort)}
.reserver-prix span{color:var(--encre-doux);font-size:var(--t-s)}
.reserver-dates{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--bord-fort);
  border-radius:var(--r-s);overflow:hidden;margin-bottom:11px}
.reserver-dates>div{padding:9px 13px}
.reserver-dates>div+div{border-left:1px solid var(--bord-fort)}
.reserver-dates label{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;
  font-weight:var(--g-fort);margin-bottom:2px}
.reserver-dates input,.reserver-dates select{border:0;padding:0;font-size:var(--t-s);min-height:auto}
.reserver-dates input:focus,.reserver-dates select:focus{box-shadow:none}
.detail-lignes{margin-top:18px;font-size:var(--t-s)}
.detail-lignes div{display:flex;justify-content:space-between;gap:16px;padding:6px 0}
.detail-lignes .total{border-top:1px solid var(--bord);margin-top:9px;padding-top:13px;
  font-weight:var(--g-fort);font-size:var(--t-m)}

/* Barre de réservation collante en bas, sur mobile */
.reserver-mobile{position:fixed;left:0;right:0;bottom:0;z-index:65;display:flex;
  align-items:center;justify-content:space-between;gap:14px;padding:11px 18px;
  padding-bottom:calc(11px + env(safe-area-inset-bottom));background:var(--blanc);
  border-top:1px solid var(--bord);box-shadow:0 -4px 18px rgba(20,32,29,.09)}
@media(min-width:1000px){.reserver-mobile{display:none}}
.reserver-mobile .prix b{font-size:var(--t-m);font-weight:var(--g-fort)}
.reserver-mobile .prix span{display:block;font-size:var(--t-xs);color:var(--encre-doux)}
body.a-barre-reservation{padding-bottom:88px}
@media(min-width:1000px){body.a-barre-reservation{padding-bottom:0}}

/* ── Encarts, étiquettes, tableaux ──────────────────────────────────────── */
.encart{background:var(--v50);border-radius:var(--r-m);padding:15px 17px;font-size:var(--t-s);
  display:flex;gap:12px;align-items:flex-start}
.encart svg{width:20px;height:20px;color:var(--v600);flex:none;margin-top:2px}
.encart.chaud{background:var(--o50)}.encart.chaud svg{color:var(--o600)}
.encart.alerte{background:var(--danger-fond)}.encart.alerte svg{color:var(--danger)}
.encart p:last-child{margin-bottom:0}
.etiquette{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:var(--t-xs);font-weight:var(--g-appuye);background:var(--fond-doux)}
.etiquette-vert{background:var(--v100);color:var(--v800)}
.etiquette-ocre{background:var(--o100);color:var(--o700)}
.statut{display:inline-flex;padding:5px 12px;border-radius:999px;background:var(--v100);
  color:var(--v800);font-size:var(--t-s);font-weight:var(--g-appuye)}
/* Chaque etat porte sa couleur, et TOUS sont declares. Le vert de `.statut`
   convenait deja aux etats favorables, mais un etat non declare tombait
   dessus par defaut : un brouillon et un sejour termine s'affichaient donc
   pareil, et un litige aussi. Un test verifie que chaque valeur de
   `BookingStatus` et de `DepositState` a une regle — sans quoi un etat ajoute
   plus tard s'afficherait en vert, quoi qu'il signifie. */
.statut-confirmed,.statut-checked_in,.statut-checked_out,.statut-completed,
.statut-authorized,.statut-released,.statut-claim_accepted{
  background:var(--v100);color:var(--v800)}
.statut-draft,.statut-none,.statut-scheduled{
  background:var(--n100);color:var(--n700)}
.statut-cancelled_by_traveler,.statut-cancelled_by_host,.statut-cancelled_by_system,
.statut-authorization_failed,.statut-refunded{
  background:var(--danger-fond);color:var(--danger)}
.statut-pending_payment,.statut-traveler_action_required,.statut-claim_opened,
.statut-claim_contested,.statut-human_decision,.statut-captured_partial,
.statut-captured_full,.statut-charged{
  background:var(--o100);color:var(--o700)}
/* Le litige se distingue de l'attente : c'est un etat ou quelqu'un doit
   trancher, pas un etat ou l'on patiente. */
.statut-disputed{background:var(--o100);color:var(--o700);
  box-shadow:inset 0 0 0 1px var(--o500)}

.tableau{width:100%;border-collapse:collapse;font-size:var(--t-s)}
.tableau th,.tableau td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--bord)}
.tableau tr.total th,.tableau tr.total td{border-top:2px solid var(--encre);border-bottom:0;font-weight:var(--g-fort)}
.defilable{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--gouttiere) * -1);padding-inline:var(--gouttiere)}
@media(min-width:720px){.defilable{margin-inline:0;padding-inline:0}}

.messages{list-style:none;max-width:var(--large);margin:14px auto 0;
  padding-inline:max(var(--gouttiere),env(safe-area-inset-left))}
.messages li{padding:12px 16px;border-radius:var(--r-s);margin-bottom:8px;background:var(--v100);font-size:var(--t-s)}
.messages li.error{background:var(--danger-fond);color:var(--danger)}

.liste{list-style:none;padding:0;margin:0}
.liste li{padding:12px 0;border-bottom:1px solid var(--bord)}
.liste.mini li{font-size:var(--t-s);color:var(--encre-doux);padding:6px 0}
.vide{color:var(--encre-tenu);font-style:italic}
.etat-vide{padding:60px 0;max-width:44ch;margin-inline:auto}
.etat-vide .pictogramme{margin:0 auto 16px}
.etat-vide h2{font-size:var(--t-l)}
.recherche-compacte{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  max-width:420px;margin-inline:auto}
.recherche-compacte input{flex:1;min-width:150px}
.popup-carte{display:block;max-width:210px;color:inherit}
/* Plus petit que le corps, et pas seulement plus gris : c'est la taille
   qui dit « ceci est une precision », la couleur seule ne suffit pas. */
.mini{font-size:var(--t-xs);color:var(--encre-doux)}
.centre{text-align:center}

.indicateurs{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,154px),1fr))}
.kpi{border:1px solid var(--bord);border-radius:var(--r-m);padding:15px;background:var(--blanc)}
.kpi.etoile{border-color:var(--v600);background:var(--v50)}
.kpi.alerte{border-color:var(--danger);background:var(--danger-fond)}
.kpi .valeur{display:block;font-size:var(--t-2xl);font-weight:var(--g-fort);letter-spacing:-.03em}
.kpi .libelle{font-size:var(--t-xs);color:var(--encre-doux)}

.document{max-width:720px}
.document h2{margin-top:2em;font-size:var(--t-l)}
.document ul{padding-left:1.15em}
.document li{margin-bottom:.4em}

details{border-bottom:1px solid var(--bord);padding:14px 0}
summary{cursor:pointer;font-weight:var(--g-appuye);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--encre-doux);font-size:var(--t-l);line-height:1}
details[open] summary::after{content:"−"}

.fil{list-style:none;padding:0}
.fil li{border:1px solid var(--bord);border-radius:var(--r-m);padding:14px;margin-bottom:10px;background:var(--blanc)}
.ligne-voyageur{display:grid;grid-template-columns:1fr 92px;gap:9px;margin:8px 0}

/* ── Pied ───────────────────────────────────────────────────────────────── */
.pied{border-top:1px solid var(--bord);background:var(--n50);padding:40px 0 26px;margin-top:56px}
.pied-grille{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:560px){.pied-grille{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.pied-grille{grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px}}
.pied h4{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--encre-doux);
  margin-bottom:11px;font-weight:var(--g-fort)}
.pied a{display:block;padding:5px 0;font-size:var(--t-s);color:var(--encre-doux)}
.pied a:hover{color:var(--encre);text-decoration:underline;text-underline-offset:3px}
.pied-bas{border-top:1px solid var(--bord);margin-top:28px;padding-top:20px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--t-s);
  color:var(--encre-doux);align-items:center}
/* Selecteur de langue, dans l'en-tete. Compact : il partage la barre avec la
   navigation, et le nom complet de la langue y prendrait toute la place. */
.selecteur-langue{position:relative;display:inline-flex;align-items:center;flex:none}
.selecteur-langue select{appearance:none;padding:8px 26px 8px 30px;border:1px solid transparent;
  border-radius:var(--r-s);background:transparent;font-size:var(--t-s);font-weight:var(--g-appuye);
  cursor:pointer;width:auto;color:var(--encre-doux);min-height:40px}
.selecteur-langue select:hover{border-color:var(--bord);color:var(--encre)}
.selecteur-langue .picto-langue{position:absolute;left:9px;width:16px;height:16px;
  pointer-events:none;color:var(--encre-doux)}
.selecteur-langue::after{content:"▾";position:absolute;right:10px;top:50%;
  transform:translateY(-50%);pointer-events:none;color:var(--encre-doux);font-size:var(--t-xs)}

/* Dans le menu mobile, la langue est en tete du panneau et garde son nom complet. */
.langue-menu{margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--bord)}
.langue-menu select{width:100%}
.avis-environnement{background:var(--o50);border-top:1px solid var(--bord);
  padding:10px max(var(--gouttiere),env(safe-area-inset-left));
  text-align:center;font-size:var(--t-s);color:var(--o700)}

/* ── Connexion Google et Apple ──────────────────────────────────────────── */
.separateur-ou{display:flex;align-items:center;gap:14px;margin:24px 0 18px;
  color:var(--encre-tenu);font-size:var(--t-s)}
.separateur-ou::before,.separateur-ou::after{content:"";flex:1;height:1px;background:var(--bord)}

.connexion-externe{display:grid;gap:10px}
.connexion-externe form{margin:0}
.bouton-externe{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 18px;font:inherit;font-weight:var(--g-appuye);font-size:var(--t-s);cursor:pointer;
  border:1px solid var(--bord);border-radius:var(--r-s);background:var(--blanc);color:var(--encre);
  transition:border-color .15s,box-shadow .15s}
.bouton-externe:hover{border-color:var(--encre-tenu);box-shadow:var(--o1)}
.bouton-externe svg{flex:none}
/* Apple impose un bouton noir ou blanc, sans variante de couleur. */
.bouton-apple{background:#000;border-color:#000;color:#fff}
.bouton-apple:hover{background:#141414;border-color:#141414}

.note-externe{margin-top:14px;color:var(--encre-tenu);max-width:42ch;
  margin-inline:auto;line-height:1.5}

/* ── Mention d'origine ──────────────────────────────────────────────────── */
/* Trois traits de couleur, sobres. PAS de Marianne, PAS de cocarde, PAS de
   logo officiel : ce sont des emblemes de l'Etat, dont l'usage commercial est
   interdit et laisserait croire a un adoubement public. */
.origine-france{display:flex;align-items:center;justify-content:center;gap:9px;
  margin:26px 0 0;padding-top:22px;border-top:1px solid var(--bord);
  font-size:var(--t-s);color:var(--encre-doux)}
.origine-france a{color:var(--encre-doux);text-decoration:none}
.origine-france a:hover{color:var(--encre);text-decoration:underline;text-underline-offset:3px}
.drapeau{display:inline-flex;width:20px;height:14px;border-radius:var(--r-micro);overflow:hidden;
  border:1px solid var(--bord);flex:none}
.drapeau i{flex:1;display:block}
.drapeau i:nth-child(1){background:#000091}
.drapeau i:nth-child(2){background:#fff}
.drapeau i:nth-child(3){background:#e1000f}

/* ── Modération ─────────────────────────────────────────────────────────── */
.signalement-entete{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:12px}
.signalement-actions{margin-top:14px}
.signalement-actions textarea{width:100%;min-height:78px;margin-bottom:10px}
.signalement-actions .duo{gap:10px}

/* ── États des lieux ────────────────────────────────────────────────────── */
.empreinte{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-xs);
  color:var(--encre-tenu);word-break:break-all;margin:6px 0 0;line-height:1.5}

.grille-preuves{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr));gap:12px}
.preuve{margin:0;border:1px solid var(--bord);border-radius:var(--r-m);overflow:hidden;
  background:var(--fond-doux)}
.preuve img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.preuve figcaption{padding:8px 10px;font-size:var(--t-xs);color:var(--encre-doux)}
.preuve figcaption span{display:block;margin-bottom:3px;color:var(--encre)}
.preuve code{font-size:var(--t-xs);color:var(--encre-tenu);word-break:break-all}

/* ── Fenêtre d'offres ───────────────────────────────────────────────────── */
/* Incrustee en bas a droite sur grand ecran ; sur telephone, au-dessus de la
   barre de navigation basse, jamais par-dessus le contenu qu'on lit. */
.fenetre-offres{position:fixed;z-index:65;display:grid;gap:10px;
  left:max(var(--gouttiere),env(safe-area-inset-left));
  right:max(var(--gouttiere),env(safe-area-inset-right));
  bottom:calc(var(--barre-basse) + 12px + env(safe-area-inset-bottom))}
/* Des 720 px, la fenetre se range a droite — mais elle garde le decalage de la
   barre de navigation basse, qui reste affichee jusqu'a 1024 px. Sans cette
   distinction, elle recouvrait les onglets sur les tablettes. */
@media(min-width:720px){
  .fenetre-offres{left:auto;width:min(360px,calc(100vw - 2 * var(--gouttiere)))}
}
@media(min-width:1024px){
  .fenetre-offres{bottom:calc(20px + env(safe-area-inset-bottom))}
}
.fenetre-offres[hidden]{display:none}

.offre{position:relative;background:var(--blanc);border:1px solid var(--bord);
  border-radius:var(--r-m);box-shadow:var(--o2);padding:15px 40px 15px 17px;
  opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease}
.fenetre-offres.entree .offre{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .offre{transition:none;opacity:1;transform:none}
}

.offre-etiquette{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
  border-radius:999px;background:var(--o100);color:var(--o700);font-size:var(--t-xs);
  font-weight:var(--g-fort);letter-spacing:.04em;text-transform:uppercase;margin-bottom:9px}
.offre-etiquette svg{width:12px;height:12px}
.offre b{display:block;font-size:var(--t-m);line-height:1.3;color:var(--encre);margin-bottom:5px}
.offre p{font-size:var(--t-s);color:var(--encre-doux);line-height:1.5;margin:0 0 9px}
.offre-action{font-size:var(--t-s);font-weight:var(--g-appuye);color:var(--v600)}
.offre-action:hover{color:var(--v800)}

/* 44 px de cible tactile, comme partout ailleurs. */
.offre-fermer{position:absolute;top:6px;right:6px;width:34px;height:34px;display:grid;
  place-items:center;border:0;background:none;cursor:pointer;color:var(--encre-tenu);
  border-radius:50%}
.offre-fermer:hover{background:var(--fond-doux);color:var(--encre)}
.offre-fermer svg{width:15px;height:15px}

/* ── Recherche par IA ───────────────────────────────────────────────────── */
/* Le heros est clair : encre foncee sur blanc, jamais de texte blanc. */
.bande-ia{display:flex;align-items:center;gap:14px;max-width:520px;margin:20px auto 0;
  padding:13px 16px;background:var(--blanc);border:1px solid var(--bord);
  border-radius:var(--r-m);box-shadow:var(--o1);text-align:left;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.bande-ia:hover{border-color:var(--v600);box-shadow:var(--o2);transform:translateY(-1px)}
.bande-ia-picto{flex:none;display:grid;place-items:center;width:38px;height:38px;
  border-radius:var(--r-s);background:linear-gradient(135deg,var(--v600),var(--v800));color:#fff}
.bande-ia-picto svg{width:20px;height:20px}
.bande-ia-texte{min-width:0;flex:1}
.bande-ia-texte b{display:block;font-size:var(--t-m);color:var(--encre);line-height:1.3}
.bande-ia-texte span{display:block;font-size:var(--t-s);color:var(--encre-doux);margin-top:2px}
.bande-ia-fleche{flex:none;color:var(--encre-tenu)}
.bande-ia-fleche svg{width:17px;height:17px}
.bande-ia:hover .bande-ia-fleche{color:var(--v600)}
/* Hors du heros centre : la bande occupe toute la colonne. */
.bande-ia-large{max-width:none;margin:0 0 22px}
@media(prefers-reduced-motion:reduce){.bande-ia,.bande-ia:hover{transition:none;transform:none}}

.puce-ia{color:var(--v700);border-color:var(--v100);background:var(--v50)}
.puce-ia svg{color:var(--v600)}
.puce-ia:hover{border-color:var(--v600)}

.cartes-ia{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.cartes-ia{grid-template-columns:repeat(2,1fr)}}
.carte-ia{display:block;padding:16px 17px;border:1px solid var(--bord);
  border-radius:var(--r-m);background:var(--blanc);transition:border-color .15s,box-shadow .15s}
.carte-ia:hover{border-color:var(--v600);box-shadow:var(--o1)}
.carte-ia-picto{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-xs);
  background:var(--v50);color:var(--v600);margin-bottom:10px}
.carte-ia-picto svg{width:18px;height:18px}
.carte-ia b{display:block;font-size:var(--t-m);color:var(--encre);margin-bottom:4px}
.carte-ia span:not(.carte-ia-picto){display:block;font-size:var(--t-s);color:var(--encre-doux);
  line-height:1.5}

/* Etiquette « IA » : un signe court, reutilisable partout ou l'assistant agit. */
.tag-ia{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  background:var(--v100);color:var(--v800);font-size:var(--t-xs);font-weight:var(--g-fort);
  letter-spacing:.03em;text-transform:uppercase;vertical-align:middle}
.tag-ia svg{width:12px;height:12px}

/* ── Assistant ──────────────────────────────────────────────────────────── */
.assistant-saisie{margin-bottom:26px}
.assistant-saisie textarea{width:100%;min-height:96px;resize:vertical;line-height:1.55}
.assistant-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.assistant-sous-titre{font-size:var(--t-m);margin-bottom:14px}

.assistant-exemples{list-style:none;display:grid;gap:8px}
.assistant-exemples a{display:block;padding:13px 15px;border:1px solid var(--bord);
  border-radius:var(--r-m);font-size:var(--t-s);color:var(--encre-doux);background:var(--blanc)}
.assistant-exemples a:hover{border-color:var(--v600);color:var(--encre)}

/* Deux colonnes dès qu'il y a la place ; empilées sur telephone, sans jamais
   coller au bord — la gouttiere de .page-moyenne s'en charge. */
.assistant-criteres{display:grid;gap:2px}
.assistant-criteres>div{display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--bord)}
.assistant-criteres>div:last-child{border-bottom:0}
.assistant-criteres dt{color:var(--encre-doux);font-size:var(--t-s)}
.assistant-criteres dd{font-weight:var(--g-appuye);text-align:right;font-size:var(--t-s);margin:0}

.assistant-brouillon{background:var(--fond-doux);border-radius:var(--r-m);padding:18px 20px}
.assistant-brouillon h3{font-size:var(--t-l);margin-bottom:10px}
.assistant-brouillon p{font-size:var(--t-s);color:var(--encre-doux);margin-bottom:10px}
.assistant-brouillon p:last-child{margin-bottom:0}

.assistant-puces{list-style:none;display:grid;grid-template-columns:1fr;gap:9px}
@media(min-width:520px){.assistant-puces{grid-template-columns:repeat(2,1fr)}}
.assistant-puces li{display:flex;align-items:center;gap:10px;font-size:var(--t-s)}
.assistant-puces svg{width:17px;height:17px;color:var(--v600);flex:none}

.assistant-chiffre{font-size:var(--t-2xl);font-weight:var(--g-fort);letter-spacing:-.03em;margin:14px 0 4px}
.assistant-chiffre small{font-size:var(--t-s);font-weight:var(--g-normal);color:var(--encre-doux);
  margin-left:7px;letter-spacing:0}

.assistant-conseils{list-style:none;display:grid;gap:12px}
.conseil{display:flex;gap:12px;align-items:flex-start;padding:15px 17px;
  border-radius:var(--r-m);background:var(--fond-doux)}
.conseil svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--encre-doux)}
.conseil b{display:block;font-size:var(--t-m);margin-bottom:4px}
.conseil p{font-size:var(--t-s);color:var(--encre-doux);margin:0 0 6px}
.conseil a{font-size:var(--t-s);font-weight:var(--g-appuye);color:var(--v600)}
.conseil-urgent{background:var(--danger-fond)}
.conseil-urgent svg{color:var(--danger)}
.conseil-attention{background:var(--o50)}
.conseil-attention svg{color:var(--o600)}
.conseil-info svg{color:var(--v600)}

/* D'ou vient ce texte : l'usager doit pouvoir le savoir sans le chercher. */
.assistant-origine{margin-top:22px;padding-top:14px;border-top:1px solid var(--bord);
  color:var(--encre-tenu)}

.saut{position:absolute;left:-9999px}
.saut:focus{left:12px;top:12px;z-index:100;background:var(--blanc);padding:11px 17px;
  border-radius:var(--r-s);box-shadow:var(--o2)}

html[lang^="zh"] body{line-height:1.78}
html[lang="de"] .carte-titre h3,html[lang="de"] .ruban{letter-spacing:-.03em}


/* ── Les deux chemins de la page d'accueil ──────────────────────────────────
   Affiches tant que le catalogue est mince (`catalogue_fourni`, vue home).
   L'hote passe en premier et porte le relief le plus marque : c'est lui qui
   manque au lancement, et c'est lui qui a le plus a gagner tout de suite. */
.deux-chemins{display:grid;gap:14px;grid-template-columns:1fr;max-width:720px;
  margin:26px auto 0}
@media(min-width:620px){.deux-chemins{grid-template-columns:1fr 1fr}}

.chemin{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:22px;border-radius:var(--r-l);text-align:left;color:inherit;
  background:linear-gradient(180deg,#fff,var(--n50));
  border:1px solid var(--bord);
  box-shadow:var(--liseret),var(--o1);
  transition:transform var(--t-doux),box-shadow var(--t-doux),border-color var(--t)}
@media(hover:hover){
  .chemin:hover{transform:translateY(-3px);box-shadow:var(--liseret),var(--o-releve);
    border-color:var(--v300)}
}
.chemin:active{transform:translateY(1px)}
.chemin b{font-size:var(--t-m);letter-spacing:-.015em}
.chemin > span:last-child{font-size:var(--t-s);color:var(--encre-doux)}

.chemin-picto{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-s);
  margin-bottom:6px;color:var(--v600);
  background:linear-gradient(160deg,var(--v50),var(--v100));
  box-shadow:var(--liseret),0 1px 2px rgba(16,49,43,.10)}
.chemin-picto svg{width:23px;height:23px}

/* Le chemin de l'hote : fond vert, picto en creux clair. Le contraste du texte
   blanc sur --v600 est de 6,03:1, au-dessus du seuil de 4,5:1. */
.chemin-fort{background:linear-gradient(165deg,var(--v600),var(--v800));
  border-color:transparent;color:#fff;
  box-shadow:var(--liseret-fort),0 2px 6px rgba(16,49,43,.18),
             0 14px 30px rgba(16,49,43,.20)}
.chemin-fort > span:last-child{color:rgba(255,255,255,.82)}
.chemin-fort .chemin-picto{background:rgba(255,255,255,.16);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
@media(hover:hover){.chemin-fort:hover{border-color:transparent}}

.recherche-compacte{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:18px}

/* ── Criteres corrigeables de l'assistant ───────────────────────────────────
   Ce que l'assistant a compris n'est pas un verdict : chaque valeur est un
   champ. Le voyageur corrige, et ce sont ses valeurs qui lancent la recherche. */
.criteres-modifiables{display:grid;gap:12px;margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr))}
.critere-large{grid-column:1/-1}
@media(min-width:620px){.critere-large{grid-column:span 2}}
.critere{display:flex;flex-direction:column;gap:5px}
.critere label{font-size:var(--t-xs);font-weight:var(--g-appuye);color:var(--encre-doux);
  text-transform:uppercase;letter-spacing:.04em}
.critere input{font:inherit;padding:10px 12px;border-radius:var(--r-s);
  border:1px solid var(--bord-fort);background:var(--blanc);color:var(--encre);
  box-shadow:var(--liseret),0 1px 2px rgba(16,49,43,.05);
  transition:border-color var(--t),box-shadow var(--t)}
.critere input:hover{border-color:var(--v300)}

/* Signalement : present mais discret. Trop visible, il invite au signalement
   reflexe ; introuvable, il ne remplit pas l'obligation d'accessibilite. */
.lien-signalement{color:var(--encre-tenu);text-decoration:underline;
  text-underline-offset:3px;font-size:var(--t-s)}
.lien-signalement:hover{color:var(--danger)}

/* Navigation du back-office. Sans elle, chaque ecran etait une impasse. */
.nav-gestion{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:22px;
  padding-bottom:12px;border-bottom:1px solid var(--bord)}
.nav-gestion a{padding:7px 13px;border-radius:999px;font-size:var(--t-s);font-weight:var(--g-appuye);
  color:var(--encre-doux);transition:background var(--t),color var(--t)}
.nav-gestion a:hover{background:var(--n100);color:var(--encre)}
.nav-gestion a.actif{background:var(--v600);color:#fff;
  box-shadow:var(--liseret-fort),0 1px 2px rgba(16,49,43,.14)}

/* Visite piece par piece. Les vignettes gardent un rapport constant : une
   grille d'images de hauteurs differentes se lit comme un site mal fini. */
.galerie-piece{display:grid;gap:10px;margin-bottom:22px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.galerie-piece img{width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-s);box-shadow:var(--o1);transition:box-shadow var(--t-doux)}
@media(hover:hover){.galerie-piece img:hover{box-shadow:var(--o-releve)}}

/* Messagerie. Les bulles distinguent l'auteur sans couleur criarde : un fil
   se lit longtemps, et un contraste violent fatigue avant la fin. */
.conversation{display:flex;flex-direction:column;gap:3px;padding:14px 16px;
  border:1px solid var(--bord);border-radius:var(--r-m);margin-bottom:10px;
  background:linear-gradient(180deg,#fff,var(--n50));color:inherit;
  box-shadow:var(--liseret),var(--o1);transition:transform var(--t-doux),box-shadow var(--t-doux)}
@media(hover:hover){.conversation:hover{transform:translateY(-2px);box-shadow:var(--liseret),var(--o-releve)}}
.conversation-titre{display:flex;align-items:center;gap:9px}
.conversation-apercu{font-size:var(--t-s);color:var(--encre-doux);margin-top:4px}
.pastille{background:var(--v600);color:#fff;border-radius:999px;padding:1px 8px;
  font-size:var(--t-xs);font-weight:var(--g-fort);box-shadow:var(--liseret-fort)}

.fil{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.bulle{max-width:86%;padding:12px 15px;border-radius:var(--r-m);
  background:var(--n50);border:1px solid var(--bord);box-shadow:var(--liseret)}
.bulle-moi{align-self:flex-end;background:var(--v50);border-color:var(--v100)}
.bulle p{margin:5px 0 0}

/* Assistant d'accueil. Un <details> ancre en bas a droite : il s'ouvre sans
   JavaScript, et ne masque jamais la barre de navigation basse du mobile. */
.assistant-bulle{position:fixed;right:16px;z-index:40;
  bottom:calc(var(--barre-basse) + 16px + env(safe-area-inset-bottom))}
@media(min-width:1024px){.assistant-bulle{bottom:20px}}
.assistant-bulle summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:9px;padding:11px 18px;border-radius:999px;
  background:linear-gradient(165deg,var(--v600),var(--v800));color:#fff;
  font-weight:var(--g-appuye);font-size:var(--t-s);
  box-shadow:var(--liseret-fort),0 2px 6px rgba(16,49,43,.2),0 12px 26px rgba(16,49,43,.22)}
.assistant-bulle summary::-webkit-details-marker{display:none}
.assistant-bulle summary svg{width:17px;height:17px}
.assistant-bulle[open] summary{margin-bottom:10px}
.assistant-bulle-corps{width:min(340px,calc(100vw - 32px));max-height:62vh;overflow:auto;
  padding:16px;border-radius:var(--r-l);background:var(--blanc);
  border:1px solid var(--bord);box-shadow:var(--liseret),var(--o-flottant)}
.assistant-question,.assistant-reponse{margin:0 0 10px;padding:9px 12px;
  border-radius:var(--r-s);font-size:var(--t-s)}
.assistant-question{background:var(--v50);border:1px solid var(--v100)}
.assistant-reponse{background:var(--n50);border:1px solid var(--bord)}
.assistant-suggestion{display:block;padding:8px 12px;margin-bottom:8px;font-size:var(--t-s);
  border:1px solid var(--bord);border-radius:var(--r-s);color:inherit}
.assistant-suggestion:hover{border-color:var(--v600)}

/* Avis. La reponse de l'hote est visuellement rattachee a l'avis qu'elle
   commente : deux blocs cote a cote se liraient comme deux avis. */
.avis{padding:14px 0;border-bottom:1px solid var(--bord)}
.avis:last-child{border-bottom:0}
.avis-note{font-weight:var(--g-fort);color:var(--v600)}
.avis-reponse{margin:10px 0 0 18px;padding:10px 14px;border-left:3px solid var(--v300);
  background:var(--v50);border-radius:0 var(--r-s) var(--r-s) 0}
.avis-reponse p{margin:3px 0}
/* Visible des seuls lecteurs d'ecran. `.saut` ne convenait pas : elle revient
   a l'ecran au focus, ce qu'on veut pour un lien d'evitement et pas pour un
   libelle. `display:none` la retirerait aussi de la restitution vocale. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Bouton compact, pour les actions posees a cote d'une ligne de liste.
   `.mini` ne convenait pas : elle regle une taille et une couleur de texte,
   pas une taille de bouton, et ecrasait la couleur de `.bouton-doux`. */
.bouton-court{padding:6px 12px;font-size:var(--t-s)}
/* Classement des photos par glisser-deposer. Le curseur dit que la ligne se
   prend ; l'opacite dit laquelle on tient. Rien d'autre ne bouge : le tableau
   reste lisible pendant le deplacement. */
#photos-classables tr[data-photo]{cursor:grab}
#photos-classables tr[data-photo]:active{cursor:grabbing}
#photos-classables tr.en-deplacement{opacity:.45;background:var(--v50)}

/* Le planning de l'hote. Une nuit, une case, un seul etat. La couleur porte
   l'information, mais jamais seule : la case reservee porte le nom du
   voyageur, la case bloquee sa raison. Une personne qui ne distingue pas le
   vert du gris lit quand meme son planning. */
.planning{width:100%;border-collapse:collapse;table-layout:fixed;min-width:520px}
.planning th{padding:8px 4px;font-size:var(--t-xs);font-weight:var(--g-appuye);color:var(--encre-doux);
  text-transform:uppercase;letter-spacing:.04em}
.planning td.jour{height:62px;vertical-align:top;padding:5px 6px;border:1px solid var(--bord);
  border-radius:var(--r-s);font-size:var(--t-xs)}
.jour-numero{font-weight:var(--g-appuye);color:var(--encre-doux)}
.jour-ref{display:block;margin-top:2px;font-size:var(--t-xs);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jour.hors-mois{opacity:.38}
.jour-libre{background:var(--blanc)}
.jour-passe{background:var(--n50);opacity:.6}
.jour-reserve{background:var(--v50);border-color:var(--v300)}
.jour-reserve .jour-ref{color:var(--v600);font-weight:var(--g-appuye)}
.jour-bloque{background:repeating-linear-gradient(45deg,var(--n50),var(--n50) 6px,
  var(--n100) 6px,var(--n100) 12px)}
.pastille{display:inline-block;width:11px;height:11px;border-radius:var(--r-micro);
  vertical-align:-1px;border:1px solid var(--bord)}
.pastille-reserve{background:var(--v50);border-color:var(--v300)}
.pastille-bloque{background:var(--n100)}
.pastille-libre{background:var(--blanc)}

/* Grille de notation. Les etoiles sont des boutons radio deguises : elles
   restent donc accessibles au clavier et lisibles par un lecteur d'ecran, qui
   annonce « 4 sur 5 » et non « etoile etoile etoile etoile ».
   L'ordre est inverse en CSS pour que le survol colore de la premiere jusqu'a
   celle qu'on pointe, sans une ligne de JavaScript. */
.grille-notes{border:0;padding:0;margin:0}
.grille-notes legend{font-weight:var(--g-appuye);margin-bottom:10px}
.ligne-note{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--bord);flex-wrap:wrap}
.ligne-note:last-child{border-bottom:0}
.ligne-note-titre{font-size:var(--t-s)}
.etoiles-saisie{display:inline-flex;flex-direction:row-reverse;gap:2px}
.etoiles-saisie input{position:absolute;width:1px;height:1px;opacity:0}
.etoiles-saisie label{cursor:pointer;font-size:var(--t-xl);line-height:1;color:var(--n200);
  transition:color .12s}
.etoiles-saisie input:checked ~ label,
.etoiles-saisie label:hover,
.etoiles-saisie label:hover ~ label{color:var(--v600)}
.etoiles-saisie input:focus-visible + label{outline:2px solid var(--v600);outline-offset:2px}
/* Le detail d'un avis publie, sous son texte. */
.avis-criteres{display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0 0;padding:0;list-style:none}
.avis-criteres li{font-size:var(--t-xs);color:var(--encre-doux)}
.avis-criteres strong{color:var(--encre);font-weight:var(--g-appuye)}

/* Bascule voyageur / hote. Deux boutons cote a cote plutot qu'un interrupteur :
   on voit d'un coup d'oeil dans quel role on se trouve, sans avoir a deduire
   l'etat d'une position. `aria-current` porte l'information pour un lecteur
   d'ecran — la couleur ne la porte jamais seule. */
.bascule-mode{display:flex;gap:0;margin:0 0 16px;padding:3px;border-radius:999px;
  background:var(--n50);border:1px solid var(--bord)}
.bascule-choix{flex:1;border:0;background:transparent;cursor:pointer;padding:8px 12px;
  border-radius:999px;font:inherit;font-size:var(--t-s);color:var(--encre-doux)}
.bascule-choix.actif{background:var(--blanc);color:var(--encre);font-weight:var(--g-appuye);
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.bascule-choix:focus-visible{outline:2px solid var(--v600);outline-offset:2px}
/* Sur une page large, la bascule ne doit pas s'etirer sur toute la largeur :
   deux boutons de 400 px ne se lisent pas comme un choix entre deux etats.
   La largeur vit ici, pas en style en ligne — un test l'exige, et il a raison :
   c'est ce genre de valeur posee a la main qui faisait deriver les pages. */
.bascule-large{max-width:22rem}
/* Liste de faits, sans puces : des horaires ne sont pas une enumeration. */
.liste-plate{list-style:none;margin:8px 0 0;padding:0}
.liste-plate li{padding:5px 0;font-size:var(--t-s);border-bottom:1px solid var(--bord)}
.liste-plate li:last-child{border-bottom:0}

/* Le selecteur d'equipements. Cent une cases : sans regroupement ni colonnes,
   la page devient une liste interminable qu'on abandonne au tiers.
   Chaque categorie porte son pictogramme — meme jeu, meme trait que partout
   ailleurs sur le site — et chaque equipement est une pastille cliquable qui
   s'allume. Les cases natives restent dessous : le clavier, les lecteurs
   d'ecran et le « sans CSS » continuent de fonctionner. */
.equipements-choix{border:0;padding:0;margin:26px 0 0}
.equipements-choix legend{font-weight:var(--g-fort);font-size:var(--t-m);padding:0}

.equipements-groupe{margin-top:22px}
.equipements-titre{display:flex;align-items:center;gap:9px;margin:0 0 10px;
  font-size:var(--t-m);font-weight:var(--g-appuye);color:var(--encre)}
.equipements-picto{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--r-xs);background:var(--v50);color:var(--v600);
  flex:0 0 28px}
.equipements-picto svg{width:16px;height:16px}

.equipements-grille{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,212px),1fr))}

.equipement{position:relative;display:flex;align-items:center;gap:9px;
  padding:9px 12px;border:1px solid var(--bord);border-radius:var(--r-m);
  background:var(--blanc);cursor:pointer;font-size:var(--t-s);line-height:1.25;
  transition:border-color .12s,background .12s}
.equipement:hover{border-color:var(--v300);background:var(--v50)}
.equipement input{position:absolute;width:1px;height:1px;opacity:0}
.equipement-marque{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex:0 0 20px;border:1px solid var(--bord);
  border-radius:var(--r-xxs);background:var(--blanc);color:transparent;transition:.12s}
.equipement-marque svg{width:13px;height:13px}
.equipement input:checked ~ .equipement-marque{background:var(--v600);
  border-color:var(--v600);color:var(--blanc)}
.equipement:has(input:checked){border-color:var(--v600);background:var(--v50)}
.equipement input:focus-visible ~ .equipement-marque{outline:2px solid var(--v600);
  outline-offset:2px}
.equipement-nom{min-width:0}

/* Le meme pictogramme dans le panneau de filtres : une categorie doit se
   reconnaitre au meme signe des deux cotes du site. */
.picto-categorie{width:15px;height:15px;margin-right:7px;vertical-align:-2px;
  color:var(--v600)}
/* Une remise s'ecrit en negatif et se lit d'un coup : sans couleur, la ligne
   « -813,75 € » se confond avec les autres montants du recapitulatif. */
.tableau td.remise{color:var(--v600);font-weight:var(--g-appuye)}
/* Une proposition de tarif se lit comme un bloc, pas comme une ligne de liste :
   elle porte un montant, une variation et une justification. */
.proposition{padding:12px 0;border-bottom:1px solid var(--bord)}
.proposition:last-child{border-bottom:0}

/* Un champ qui porte une URL ou une cle : la police a chasse fixe evite de
   confondre l, 1 et I. Une classe plutot qu'un style en ligne — un style en
   ligne echappe au theme, et le garde-fou d'harmonie le refuse. */
.champ-technique{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--t-s)}
/* Le libelle de ville dans une bulle de carte, construite en JavaScript. */
.carte-bulle-ville{color:var(--encre-doux);font-size:var(--t-s)}
.carte-bulle-prix{font-weight:var(--g-appuye)}
/* Un formulaire d'atelier : ses champs restent en colonne de lecture, ses
   grilles prennent toute la largeur. `.formulaire` borne ses enfants pour les
   formulaires courts — ici c'est `.colonne-lecture` qui borne, bloc par bloc. */
.formulaire-large{max-width:none}
.formulaire-large > .colonne-lecture > p,
.formulaire-large > .colonne-lecture > .champ{max-width:none}

/* Une case a cocher et son libelle, alignes. Le HTML portait `.case` dans
   trois gabarits et la feuille de style l'ignorait : les cases rendaient nues
   au milieu d'une page stylee. C'est exactement l'ecart que le validateur de
   pages cherche — invisible au code, visible a l'ecran. */
.case{display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:var(--t-s);line-height:1.3;padding:4px 0}
.case input{flex:0 0 auto;width:17px;height:17px;accent-color:var(--v600)}

/* ── Réservation groupée ──────────────────────────────────────────────────
   Une liste de personnes et un compte à rebours d'argent. Tout est repris de
   l'échelle existante : pas une taille, pas un rayon, pas une teinte de plus.
   La grille des lignes s'écroule en une colonne sous 560 px — un groupe se
   compose souvent depuis le téléphone, dans la conversation où on l'organise. */
.groupe-avancement{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:12px}
.groupe-reste{color:var(--encre-doux);font-size:var(--t-s)}
.groupe-jauge{height:8px;border-radius:999px;background:var(--n100);overflow:hidden}
.groupe-jauge span{display:block;height:100%;background:var(--v600);
  border-radius:999px;transition:width var(--t)}

.groupe-liste{list-style:none;padding:0;margin:16px 0 0}
.groupe-ligne{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:12px;padding:13px 0;border-top:1px solid var(--bord)}
.groupe-ligne:first-child{border-top:0}
.groupe-pastille{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--v100);color:var(--v700);font-weight:var(--g-appuye);
  font-size:var(--t-s);flex:0 0 auto}
.groupe-regle .groupe-pastille{background:var(--succes-fond);color:var(--succes)}
.groupe-qui{min-width:0}
.groupe-nom{font-weight:var(--g-appuye);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.groupe-role{color:var(--encre-tenu);font-size:var(--t-xs)}
.groupe-montant{text-align:right;white-space:nowrap;font-weight:var(--g-appuye)}
.groupe-montant small{display:block;font-weight:var(--g-normal);
  color:var(--encre-tenu);font-size:var(--t-xs)}

/* Le lien à faire circuler. Il déborde par nature : on le laisse défiler
   plutôt que de le tronquer — un lien coupé qu'on croit avoir copié en
   entier est pire qu'un lien qui se voit long. */
.groupe-lien{display:flex;gap:8px;align-items:center;margin-top:8px}
.groupe-lien input{flex:1 1 auto;min-width:0;font-size:var(--t-xs);
  padding:8px 10px;border:1px solid var(--bord);border-radius:var(--r-xs);
  background:var(--fond-doux);color:var(--encre-doux)}

.groupe-saisie{display:grid;grid-template-columns:1fr 1fr 96px auto;gap:10px;
  align-items:end;margin-bottom:10px}
.groupe-saisie .champ{margin:0}
@media(max-width:640px){
  .groupe-saisie{grid-template-columns:1fr 1fr;}
  .groupe-ligne{grid-template-columns:auto 1fr;row-gap:4px}
  .groupe-montant{grid-column:2;text-align:left}
}

/* La colonne du bouton « Retirer » : elle existe même vide, pour que les
   lignes restent alignées avec ou sans JavaScript. */
.groupe-retrait{display:flex;align-items:center;min-height:44px}
.groupe-retrait button{white-space:nowrap;font-size:var(--t-xs)}
#groupe-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}

/* Bandeau Yinzo Direct : discret, mais présent sur chaque page tant que le
   rattachement dure. Un avantage qu'on ne voit pas est un avantage qu'on ne
   comprend pas — et un rattachement qu'on ne voit pas est pire encore. */
.bandeau-direct{display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;background:var(--v50);border-bottom:1px solid var(--v100);
  padding:8px var(--gouttiere);font-size:var(--t-s);color:var(--v700)}
.bandeau-direct span{display:inline-flex;align-items:center;gap:7px}
.bandeau-direct svg{width:15px;height:15px}
.bandeau-direct form{margin:0}

/* ── Le film de lancement (page d'attente hôtes) ─────────────────────────── */
.film{max-width:960px;margin:28px auto 8px;padding:0 18px}
.film video{width:100%;border-radius:var(--r-m);background:#000;
  box-shadow:0 1px 2px rgba(16,49,43,.06),0 8px 24px rgba(16,49,43,.10)}
.film-mention{margin-top:8px;font-size:var(--t-xs);color:#7C8F8A;text-align:right}