@import url('polices.css');

/* ==========================================================================
   Accromaroc — système de design
   Charte reprise à l'identique de l'ancien site (variables globales Elementor).
   Les valeurs ci-dessous sont relevées sur accromaroc.com, pas réinterprétées.
   ========================================================================== */

:root {
  /* --- couleurs de la charte ------------------------------------------ */
  --rouge:         #C3262F;   /* --e-global-color-primary / accent          */
  --rouge-fonce:   #a01f27;   /* survol, dérivé                            */
  --rouge-voile:   #fbeced;   /* fond léger, dérivé                        */
  --vert:          #2B5431;   /* --e-global-color-b69a5d1 (pied de page)   */
  --vert-fonce:    #1e3c23;
  --brun:          #512C1F;   /* --e-global-color-fdd7ab0                  */
  --noir:          #000000;   /* --e-global-color-secondary (titres)       */
  --gris-texte:    #7A7A7A;   /* --e-global-color-text                     */
  --corps:         #333333;   /* couleur de corps relevée                  */
  --gris-clair:    #F4F4F4;   /* --e-global-color-bcabb75                  */
  --bord:          rgba(202, 202, 202, .57);  /* --e-global-color-28bfcdd  */
  --bord-tenu:     rgba(202, 202, 202, .32);
  --blanc:         #FFFFFF;
  --whatsapp:      #00A884;   /* relevé sur le bouton WhatsApp             */

  /* --- typographie ---------------------------------------------------- */
  /* Police unique de la charte : Jost, en 400 / 500 / 600 */
  --police: 'Jost', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- rythme --------------------------------------------------------- */
  --p1: .25rem;  --p2: .5rem;   --p3: .75rem;  --p4: 1rem;
  --p5: 1.5rem;  --p6: 2rem;    --p7: 3rem;    --p8: 4rem;   --p9: 5rem;

  /* Rayons relevés sur l'ancien site : 7px pour les boutons, 8px ailleurs */
  --r-bouton: 7px;
  --r-carte: 8px;
  /* Forme caractéristique du badge d'annonce */
  --r-badge: 100px 8px 100px 100px;

  --ombre-douce: 0 2px 10px rgba(0, 0, 0, .06);
  --ombre-carte: 0 4px 20px rgba(0, 0, 0, .09);

  --contenu: 1180px;
  --lecture: 70ch;
}

/* --- remise à zéro ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.5;          /* 24px sur 16px, comme l'ancien site */
  font-weight: 400;
  color: var(--corps);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* --- typographie ------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--police);
  font-weight: 600;
  color: var(--noir);
  line-height: 1.15;
}
h1 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 1.875rem); }  /* 30px, charte */
h2 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.875rem); }   /* 30px, charte */
h3 { font-size: 1.15rem; }

a { color: var(--rouge); text-underline-offset: .18em; }
a:hover { color: var(--rouge-fonce); }

.surtitre {
  font-size: .8rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gris-texte);
}
.chapo { font-size: 1rem; color: var(--gris-texte); max-width: var(--lecture); }

/* --- structure -------------------------------------------------------- */
.contenu { max-width: var(--contenu); margin-inline: auto; padding-inline: var(--p5); }
.pile > * + * { margin-top: var(--p4); }

/* ==========================================================================
   En-tête — fond blanc, liens noirs en 500, comme la charte
   ========================================================================== */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: var(--blanc);
  border-bottom: 1px solid var(--bord-tenu);
}
.entete__interieur {
  display: flex; align-items: center; gap: var(--p5); flex-wrap: wrap;
  max-width: var(--contenu); margin-inline: auto;
  padding: var(--p3) var(--p5);
}
.marque { display: flex; align-items: center; text-decoration: none; flex: none; }
.marque img { width: 105px; height: auto; }
.nav { display: flex; gap: var(--p5); margin-left: auto; align-items: center; }
.nav a {
  font-size: 16px; font-weight: 500; color: var(--noir);
  text-decoration: none; padding-block: .35rem; position: relative;
  transition: color .2s;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--rouge); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav a:hover { color: var(--rouge); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current] { color: var(--rouge); }

/* --- menu ------------------------------------------------------------- */
/* Sur grand ecran, <details> disparait de la mise en page et la navigation
   redevient une barre horizontale ordinaire. */
.menu { display: contents; }
.menu__bouton { display: none; }
.nav__contact { display: none; }

/* Chrome 131+ et Safari 18.4+ exposent le contenu de <details> via le
   pseudo-element ::details-content, auquel ils appliquent
   `content-visibility: hidden` tant que l'element est ferme. Sur ces
   navigateurs, `display: contents` ne suffit plus a faire reapparaitre la
   navigation sur grand ecran : la barre du haut ne montrait plus que le
   logo. On force donc l'affichage au-dessus du point de bascule mobile.
   Les navigateurs plus anciens ignorent la regle et gardent l'ancien
   comportement, qui etait deja correct. */
@media (min-width: 901px) {
  .menu::details-content { content-visibility: visible; display: contents; }
}

@media (max-width: 900px) {
  /* Le defilement horizontal ne laissait voir que deux rubriques sur six,
     sans aucune indication qu'il y en avait d'autres. Un panneau deroulant
     les montre toutes. */
  .menu { display: block; margin-left: auto; }

  .menu__bouton {
    display: flex; align-items: center; gap: .5rem;
    padding: 10px 14px; border-radius: var(--r-bouton);
    border: 1px solid var(--bord); background: var(--blanc);
    font-size: .9rem; font-weight: 500; color: var(--noir);
    cursor: pointer; list-style: none; user-select: none;
    min-height: 44px;
  }
  .menu__bouton::-webkit-details-marker { display: none; }
  .menu[open] .menu__bouton { border-color: var(--rouge); color: var(--rouge); }

  /* Trois traits dessines en CSS : pas d'icone a charger */
  .menu__barres, .menu__barres::before, .menu__barres::after {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .25s ease, opacity .2s ease;
  }
  .menu__barres { position: relative; }
  .menu__barres::before, .menu__barres::after { content: ''; position: absolute; }
  .menu__barres::before { top: -6px; }
  .menu__barres::after { top: 6px; }
  .menu[open] .menu__barres { background: transparent; }
  .menu[open] .menu__barres::before { transform: translateY(6px) rotate(45deg); }
  .menu[open] .menu__barres::after { transform: translateY(-6px) rotate(-45deg); }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--blanc); border-bottom: 1px solid var(--bord);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .1);
    padding: var(--p2) var(--p4) var(--p4);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .nav a {
    padding: 14px 4px; border-bottom: 1px solid var(--bord-tenu);
    font-size: 1.02rem; min-height: 48px; display: flex; align-items: center;
  }
  .nav a:last-child { border-bottom: 0; }
  /* Le soulignement au survol n'a pas de sens dans une liste verticale */
  .nav a::after { display: none; }
  .nav a[aria-current] { color: var(--rouge); font-weight: 600; }
  .nav__contact { display: flex; color: var(--rouge); font-weight: 600; }

  .entete { position: sticky; }
  .entete__interieur { position: relative; }
  .marque img { width: 92px; }
}

/* ==========================================================================
   Boutons — #C3262F, 7px, 13px/28px, 15px en 500 (valeurs relevées)
   ========================================================================== */
.bouton {
  --fond: var(--rouge); --survol: var(--rouge-fonce); --texte-btn: var(--blanc);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 13px 28px; border: 0; border-radius: var(--r-bouton);
  background: var(--fond); color: var(--texte-btn);
  font-family: var(--police); font-size: 15px; font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.bouton:hover {
  background: var(--survol); color: var(--texte-btn);
  transform: translateY(-1px); box-shadow: var(--ombre-douce);
}
.bouton:active { transform: translateY(0); }
.bouton--large { width: 100%; }
.bouton--vert { --fond: var(--vert); --survol: var(--vert-fonce); }
.bouton--whatsapp { --fond: var(--whatsapp); --survol: #00926f; }
.bouton--fantome {
  --fond: transparent; --survol: var(--gris-clair); --texte-btn: var(--noir);
  border: 1px solid var(--bord);
}

/* ==========================================================================
   Étiquettes et badges
   ========================================================================== */
.etiquette {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 5px 12px; border-radius: var(--r-bouton);
  font-size: 14px; font-weight: 500;
  background: var(--gris-clair); color: var(--corps);
}
.etiquette--rouge { background: var(--rouge); color: var(--blanc); }
.etiquette--vert { background: var(--vert); color: var(--blanc); }
.etiquette--flottante {
  background: rgba(0, 0, 0, .62); backdrop-filter: blur(6px); color: var(--blanc);
}
/* Badge d'annonce : forme caractéristique de l'ancien site */
.badge-annonce {
  display: inline-flex; align-items: center;
  padding: 5px 10px; border-radius: var(--r-badge);
  background: var(--rouge); color: var(--blanc);
  font-size: 15px; font-weight: 500; line-height: 1.25;
}

/* ==========================================================================
   Fil d'Ariane
   ========================================================================== */
.ariane { font-size: .85rem; color: var(--gris-texte); padding-block: var(--p4); }
.ariane ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
.ariane li { display: flex; gap: .4rem; align-items: center; }
.ariane li + li::before { content: '›'; color: var(--bord); }
.ariane a { color: var(--gris-texte); text-decoration: none; }
.ariane a:hover { color: var(--rouge); }

/* ==========================================================================
   Galerie de la fiche
   ========================================================================== */
.galerie {
  display: grid; gap: 6px; border-radius: var(--r-carte); overflow: hidden;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(140px, 1fr));
  aspect-ratio: 16 / 8.4; background: var(--gris-clair); position: relative;
}
.galerie__element { position: relative; overflow: hidden; background: var(--gris-clair); }
.galerie__element:first-child { grid-row: span 2; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.galerie__element:hover img { transform: scale(1.04); }
.galerie__element:nth-child(n+6) { display: none; }
.galerie__compteur {
  position: absolute; right: var(--p4); bottom: var(--p4); z-index: 2;
  border: 0; cursor: pointer; font: inherit; font-size: .82rem;
}

@media (max-width: 780px) {
  .galerie { grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 3; }
  .galerie__element:first-child { grid-column: span 2; }
  .galerie__element:nth-child(n+4) { display: none; }
}

/* ==========================================================================
   Mise en page de la fiche
   ========================================================================== */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 360px;
         gap: var(--p8); align-items: start; padding-block: var(--p6) var(--p9); }
@media (max-width: 1000px) { .fiche { grid-template-columns: 1fr; gap: var(--p6); } }

.fiche__section { padding-block: var(--p6); border-top: 1px solid var(--bord-tenu); }
.fiche__section:first-child { border-top: 0; padding-top: 0; }
.fiche__section h2 { margin-bottom: var(--p4); }

.reperes { display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--p5); }
.repere { padding-right: var(--p5); margin-right: var(--p5); border-right: 1px solid var(--bord); }
.repere:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.repere__valeur { font-size: 1.5rem; font-weight: 600; color: var(--noir); line-height: 1.1; }
.repere__libelle { font-size: .82rem; color: var(--gris-texte); }

.prose { max-width: var(--lecture); color: var(--corps); }
.prose p { margin-bottom: var(--p4); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--noir); }

/* Équipements */
.equipements { display: grid; gap: var(--p5) var(--p6);
               grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.equipements__groupe .surtitre { margin-bottom: var(--p3); display: block; }
.equipements ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.equipements li { display: flex; gap: .6rem; align-items: baseline; font-size: .95rem; }
.equipements li::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rouge); translate: 0 -2px;
}

/* ==========================================================================
   Calendrier tarifaire
   Vert de la charte pour la basse saison, rouge de la charte pour la haute.
   ========================================================================== */
.calendrier { margin-top: var(--p5); }
.calendrier__grille {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
  align-items: end; height: 132px; margin-bottom: .5rem;
}
.calendrier__mois { position: relative; height: 100%;
                    display: flex; flex-direction: column; justify-content: flex-end; }
.calendrier__barre {
  border-radius: var(--r-bouton) var(--r-bouton) 3px 3px;
  background: var(--vert); transition: filter .2s; min-height: 6px;
}
.calendrier__mois--haut .calendrier__barre { background: var(--rouge); }
.calendrier__mois--vide .calendrier__barre {
  background: repeating-linear-gradient(45deg, var(--gris-clair) 0 4px,
              #e6e6e6 4px 8px);
  height: 8px;
}
.calendrier__mois:hover .calendrier__barre { filter: brightness(1.12); }
.calendrier__prix {
  font-size: .7rem; font-weight: 600; text-align: center; color: var(--corps);
  margin-bottom: .3rem; font-variant-numeric: tabular-nums;
}
.calendrier__etiquettes {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
  font-size: .68rem; color: var(--gris-texte); text-align: center;
  text-transform: uppercase; letter-spacing: .03em;
}
.calendrier__legende {
  display: flex; flex-wrap: wrap; gap: var(--p4); margin-top: var(--p4);
  font-size: .8rem; color: var(--gris-texte);
}
.calendrier__legende span { display: flex; align-items: center; gap: .4rem; }
.calendrier__puce { width: 10px; height: 10px; border-radius: 2px; flex: none; }
@media (max-width: 640px) {
  .calendrier__prix { font-size: 0; }
  .calendrier__grille { height: 96px; }
}

/* ==========================================================================
   Carte de réservation
   ========================================================================== */
.reservation { position: sticky; top: 92px; }
.reservation__carte {
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--r-carte); padding: var(--p5); box-shadow: var(--ombre-carte);
}
.reservation__prix { display: flex; align-items: baseline; gap: .45rem; margin-bottom: var(--p4); }
/* Prix en 30px/600 noir, comme sur l'ancienne fiche */
.reservation__montant { font-size: 30px; font-weight: 600; color: var(--noir); line-height: 1.1; }
.reservation__unite { color: var(--gris-texte); font-size: .92rem; }
.reservation__mention { font-size: .8rem; color: var(--gris-texte); margin-bottom: var(--p4); }

.champ { display: grid; gap: .3rem; margin-bottom: var(--p3); }
.champ label { font-size: .82rem; font-weight: 500; color: var(--corps); }
.champ input, .champ select, .champ textarea {
  padding: .7rem .85rem; border: 1px solid var(--bord); border-radius: var(--r-bouton);
  background: var(--blanc); font-size: .95rem; width: 100%;
  transition: border-color .18s, box-shadow .18s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 0; border-color: var(--rouge);
  box-shadow: 0 0 0 3px rgba(195, 38, 47, .12);
}
/* Une case a cocher n'est pas un champ de saisie. La regle `width: 100%`
   ci-dessus lui faisait occuper toute la largeur de sa cellule — 280 px dans
   le formulaire de lien du back-office —, ce qui rejetait son libelle hors du
   panneau. */
.champ input[type="checkbox"],
.champ input[type="radio"] {
  width: auto; padding: 0; accent-color: var(--rouge);
}
.champ textarea { resize: vertical; min-height: 76px; }
.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--p3); }

.consentement { display: flex; gap: .55rem; align-items: start; margin: var(--p4) 0;
                font-size: .78rem; color: var(--gris-texte); line-height: 1.45; }
.consentement input { margin-top: .2rem; flex: none; accent-color: var(--rouge); }

.reservation__separateur {
  display: flex; align-items: center; gap: var(--p3);
  margin: var(--p4) 0; font-size: .78rem; color: var(--gris-texte);
  text-transform: uppercase; letter-spacing: .08em;
}
.reservation__separateur::before, .reservation__separateur::after {
  content: ''; height: 1px; background: var(--bord); flex: 1;
}
.reservation__note { font-size: .78rem; color: var(--gris-texte);
                     text-align: center; margin-top: var(--p3); line-height: 1.45; }

/* Formulaire de demande : trois champs visibles, le reste replie. */
.demande > * + * { margin-top: var(--p3); }
.demande .bouton { margin-top: var(--p4); }
.facultatif { font-weight: 400; color: var(--gris-texte); }
.demande__plus > summary {
  cursor: pointer; list-style: none; font-size: .84rem; color: var(--rouge);
  font-weight: 500; padding: 6px 0; min-height: 32px;
  display: inline-flex; align-items: center; gap: .35rem;
}
.demande__plus > summary::-webkit-details-marker { display: none; }
.demande__plus > summary::before { content: '+'; font-size: 1.05rem; line-height: 1; }
.demande__plus[open] > summary::before { content: '–'; }

/* Barre d'action mobile */
.barre-mobile {
  position: fixed; inset: auto 0 0 0; z-index: 70; display: none;
  gap: var(--p3); align-items: center;
  padding: var(--p3) var(--p4) calc(var(--p3) + env(safe-area-inset-bottom));
  background: var(--blanc); border-top: 1px solid var(--bord);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .1);
}
.barre-mobile__prix { font-size: 1.2rem; font-weight: 600; color: var(--noir); line-height: 1.1; }
.barre-mobile__unite { font-size: .78rem; color: var(--gris-texte); }
.barre-mobile .bouton { margin-left: auto; padding: 10px 18px; }
@media (max-width: 1000px) {
  .barre-mobile { display: flex; }
  body { padding-bottom: 76px; }
  .reservation { position: static; }
}

/* ==========================================================================
   Localisation
   ========================================================================== */
.localisation__cadre {
  border-radius: var(--r-carte); overflow: hidden; border: 1px solid var(--bord);
  aspect-ratio: 16 / 7; background: var(--gris-clair);
}
.localisation__cadre iframe { width: 100%; height: 100%; border: 0; }
.localisation__adresse { display: flex; gap: .5rem; align-items: baseline;
                         margin-top: var(--p3); color: var(--corps); font-size: .95rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: .5rem; margin-top: var(--p5); }
.faq details {
  border: 1px solid var(--bord); border-radius: var(--r-carte);
  background: var(--blanc); overflow: hidden; transition: border-color .2s;
}
.faq details[open] { border-color: var(--rouge); }
.faq summary {
  cursor: pointer; list-style: none; padding: .95rem var(--p4);
  font-weight: 500; font-size: .98rem; color: var(--noir);
  display: flex; align-items: center; justify-content: space-between; gap: var(--p4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--gris-texte); border-bottom: 2px solid var(--gris-texte);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__reponse { padding: 0 var(--p4) var(--p4); color: var(--gris-texte); font-size: .94rem; }

/* ==========================================================================
   Cartes d'annonce
   Bordure 1px rgba(202,202,202,.57), rayon 8px, padding 10px : valeurs
   relevées sur les cartes de l'ancien site.
   ========================================================================== */
.grille-annonces {
  display: grid; gap: var(--p5);
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.annonce {
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--r-carte); padding: 10px;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.annonce:hover {
  transform: translateY(-2px); border-color: var(--rouge);
  box-shadow: var(--ombre-carte); color: inherit;
}
.annonce__visuel {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--gris-clair); border-radius: var(--r-carte);
}
.annonce__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.annonce:hover .annonce__visuel img { transform: scale(1.04); }
.annonce__badge { position: absolute; top: 10px; left: 10px; }
.annonce__corps { padding: var(--p3) var(--p1) var(--p1);
                  display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.annonce__titre {
  font-size: 1rem; font-weight: 600; color: var(--noir); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.annonce__lieu { font-size: .84rem; color: var(--gris-texte); }
.annonce__pied {
  margin-top: auto; padding-top: var(--p3); border-top: 1px solid var(--bord-tenu);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--p3);
}
/* Le prix ne se coupe jamais : « Sur demande » se brisait en « Sur » /
   « demande » des que la region voisine etait longue — « Tanger-Tetouan-Al
   Hoceima » l'est sur toutes les cartes du nord. */
.annonce__prix { font-weight: 600; font-size: 1rem; color: var(--noir);
                 white-space: nowrap; }
.annonce__prix small { font-weight: 400; color: var(--gris-texte); font-size: .78rem; }
.annonce__detail { font-size: .82rem; color: var(--gris-texte); }

/* ==========================================================================
   Pied de page — vert #2B5431 et drapeau en fond, comme la charte
   ========================================================================== */
.pied {
  position: relative; margin-top: var(--p9); padding-block: var(--p8) var(--p6);
  background-color: var(--vert);
  background-image: url('../images/drapeau-pied.webp');
  background-size: cover; background-position: center;
  color: var(--blanc);
}
/* Voile sombre : le drapeau reste visible mais le texte redevient lisible
   par-dessus les zones claires du visuel. */
.pied::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(30,60,35,.82) 0%, rgba(30,60,35,.62) 55%,
              rgba(30,60,35,.78) 100%);
}
.pied > * { position: relative; z-index: 1; }
.pied__grille { display: grid; gap: var(--p6); grid-template-columns: 1.6fr repeat(3, 1fr); }
@media (max-width: 820px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
.pied h3 { color: var(--blanc); font-size: .95rem; font-weight: 600;
           margin-bottom: var(--p3); }
.pied a { color: rgba(255, 255, 255, .88); text-decoration: none; font-size: .94rem; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.pied__logo { width: 130px; margin-bottom: var(--p3); filter: brightness(0) invert(1); }
.pied p { color: rgba(255, 255, 255, .88); }
.pied__bas {
  margin-top: var(--p7); padding-top: var(--p5);
  border-top: 1px solid rgba(255, 255, 255, .22);
  display: flex; flex-wrap: wrap; gap: var(--p4);
  justify-content: space-between; font-size: .85rem;
  color: rgba(255, 255, 255, .88);
}

/* --- le pied sur un téléphone -------------------------------------------
   Seize liens empilés à 44 px font sept cents pixels de pied : on fait
   défiler longtemps pour arriver au copyright. Les listes passent donc en
   lignes qui s'enroulent — même nombre de liens, quatre fois moins de
   hauteur — et les rubriques restent lisibles grâce à leurs intitulés.

   Le pied reste un pied : ses liens servent à rebondir, pas à agir. Une
   cible de 34 px y suffit, là où un bouton d'action en demanderait 44. */
@media (max-width: 560px) {
  .pied { padding-block: var(--p5) var(--p4); background-position: 60% center; }
  .pied__grille { grid-template-columns: 1fr; gap: var(--p4); }

  .pied__logo { width: 88px; margin-bottom: var(--p2); }
  .pied__grille > :first-child p { max-width: none; font-size: .88rem; }

  /* Trois groupes de liens enroulés se fondent en une seule bouillie si rien
     ne les sépare. Deux choses les redécoupent, sans rallonger : un intitulé
     franc — pas un murmure à 72 % d'opacité — et un filet au-dessus de
     chacun. L'écart entre deux groupes doit rester nettement plus grand que
     celui qui règne à l'intérieur, sinon l'œil ne voit qu'un bloc. */
  .pied__grille > * + * {
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-top: var(--p4);
  }
  .pied h3 {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--blanc); opacity: 1; font-weight: 600; margin-bottom: .45rem;
  }
  /* Deux colonnes plutôt qu'une ligne qui s'enroule. L'enroulement tenait en
     moins de hauteur, mais rien ne s'alignait : les libellés de deux mots se
     brisaient en deux, et le point de séparation se retrouvait en tête de
     ligne, rattaché à rien. Une grille coûte une rangée de plus et se lit du
     premier coup d'œil. */
  .pied ul {
    display: grid; grid-template-columns: 1fr 1fr; gap: .1rem var(--p4);
  }
  .pied ul a { display: block; padding: .35rem 0; font-size: .92rem; }
  /* La rangée d'icônes n'est pas une liste de liens : elle garde sa ligne. */
  .pied .reseaux--pied { display: flex; gap: var(--p5); }

  .reseaux--pied { margin-top: var(--p3); }

  .pied__bas {
    margin-top: var(--p4); padding-top: var(--p3);
    flex-direction: column; gap: .2rem; text-align: center;
    justify-content: center; font-size: .78rem;
    padding-bottom: 3.5rem;
  }
  /* La devise est de l'ornement : elle passe la première à la trappe. */
  .pied__bas span + span { display: none; }
}

/* ==========================================================================
   Accueil — hero
   Le voile sombre est indispensable : l'ancien hero posait du texte blanc
   directement sur un ciel clair, ce qui le rendait illisible.
   ========================================================================== */
.hero { position: relative; isolation: isolate; overflow: hidden;
        min-height: min(78vh, 620px); display: flex; align-items: center; }
.hero__fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.5) 46%,
              rgba(0,0,0,.24) 100%);
}
.hero__contenu { padding-block: var(--p8); color: var(--blanc); width: 100%; }
.hero__titre {
  color: var(--blanc); font-size: clamp(2rem, 1.5rem + 2.6vw, 3.4rem);
  font-weight: 600; line-height: 1.08; letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgba(0,0,0,.3);
}
.hero__accroche {
  color: rgba(255,255,255,.94); font-size: 1.08rem; max-width: 46ch;
  margin-top: var(--p4); text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

.recherche {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--p3);
  align-items: end; margin-top: var(--p6);
  background: var(--blanc); padding: var(--p4);
  border-radius: var(--r-carte); max-width: 800px;
  box-shadow: 0 10px 40px rgba(0,0,0,.24);
}
.recherche__champ { display: grid; gap: .3rem; min-width: 0; }
.recherche__champ label { font-size: .78rem; font-weight: 600; color: var(--gris-texte); }
/* La couleur doit etre posee, pas heritee : `select { color: inherit }` fait
   descendre le blanc du hero jusque dans le menu deroulant, que Chrome peint
   sur fond blanc. Le resultat etait une liste de villes invisibles, ou seule
   la ligne survolee apparaissait. `option` est repris explicitement parce que
   Firefox ne le fait pas heriter du `select`. */
.recherche__champ select {
  padding: .72rem .8rem; border: 1px solid var(--bord); border-radius: var(--r-bouton);
  background: var(--blanc); color: var(--corps); font-size: .95rem; width: 100%;
}
.recherche__champ select option { color: var(--corps); background: var(--blanc); }
.recherche__champ select:focus {
  outline: 0; border-color: var(--rouge); box-shadow: 0 0 0 3px rgba(195,38,47,.12);
}
.recherche__bouton { height: 44px; }
@media (max-width: 720px) {
  .recherche { grid-template-columns: 1fr; }
  .recherche__bouton { width: 100%; }
}

/* --- raccourcis de catégorie ------------------------------------------ */
.raccourcis {
  display: grid; gap: var(--p3); margin-top: calc(var(--p6) * -1);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  position: relative; z-index: 2;
}
.raccourci {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r-carte);
  padding: var(--p4); text-decoration: none; color: var(--noir);
  display: flex; flex-direction: column; gap: .1rem;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.raccourci:hover { border-color: var(--rouge); color: var(--rouge);
                   transform: translateY(-2px); box-shadow: var(--ombre-douce); }
.raccourci__nom { font-weight: 600; font-size: .98rem; }
.raccourci__nombre { color: var(--gris-texte); font-size: .84rem; }

/* --- blocs ------------------------------------------------------------ */
.bloc { padding-block: var(--p8); }
.bloc__entete {
  display: flex; flex-wrap: wrap; gap: var(--p4);
  align-items: end; justify-content: space-between; margin-bottom: var(--p5);
}
.bloc__entete .chapo { margin-top: .35rem; }

/* --- bande destinations ----------------------------------------------- */
.bande-villes { background: var(--vert); color: var(--blanc); padding-block: var(--p8); }
.bande-villes h2 { color: var(--blanc); }
.villes { display: grid; gap: var(--p3); margin-top: var(--p5);
          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ville {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-carte); padding: var(--p4);
  text-decoration: none; color: var(--blanc);
  display: flex; flex-direction: column; gap: .1rem;
  transition: background .2s, transform .2s;
}
.ville:hover { background: rgba(255,255,255,.18); color: var(--blanc);
               transform: translateY(-2px); }
.ville__nom { font-weight: 600; font-size: 1.02rem; }
.ville__nombre { font-size: .84rem; color: rgba(255,255,255,.8); }

/* --- arguments -------------------------------------------------------- */
.arguments { display: grid; gap: var(--p5);
             grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.argument { border-top: 3px solid var(--rouge); padding-top: var(--p4); }
.argument__numero { font-size: .82rem; font-weight: 600; color: var(--rouge);
                    letter-spacing: .1em; }
.argument h3 { margin: .4rem 0 .5rem; }
.argument p { color: var(--gris-texte); font-size: .95rem; }

/* --- articles --------------------------------------------------------- */
.grille-articles { display: grid; gap: var(--p4);
                   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.article {
  border: 1px solid var(--bord); border-radius: var(--r-carte); padding: var(--p5);
  text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .6rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.article:hover { border-color: var(--rouge); box-shadow: var(--ombre-douce);
                 transform: translateY(-2px); color: inherit; }
.article__titre { font-size: 1.08rem; font-weight: 600; color: var(--noir); line-height: 1.3; }
.article__chapeau { color: var(--gris-texte); font-size: .93rem; flex: 1; }
.article__lien { color: var(--rouge); font-weight: 500; font-size: .9rem; }

/* --- appel final ------------------------------------------------------ */
.appel { background: var(--gris-clair); padding-block: var(--p8); text-align: center; }
.appel p { color: var(--gris-texte); max-width: 52ch; margin: var(--p3) auto var(--p5); }
.bouton--large-auto { padding: 15px 34px; font-size: 16px; }

/* ==========================================================================
   Éditorial : article, contact, à propos, erreurs
   ========================================================================== */
.billet { max-width: 72ch; margin-inline: auto; padding-block: var(--p5) var(--p8); }
.billet__entete { padding-bottom: var(--p6); border-bottom: 1px solid var(--bord-tenu); }
.billet__corps { padding-top: var(--p6); color: var(--corps); font-size: 1.03rem; }
.billet__corps p { margin-bottom: var(--p4); }
.billet__corps h2 { font-size: 1.5rem; margin: var(--p6) 0 var(--p3); }
.billet__corps h3 { margin: var(--p5) 0 var(--p2); }
.billet__corps ul, .billet__corps ol { margin: 0 0 var(--p4) 1.2rem; }
.billet__corps li { margin-bottom: .4rem; }
.billet__corps img { border-radius: var(--r-carte); margin-block: var(--p4); }
.billet__corps a { color: var(--rouge); }
.billet__corps strong { font-weight: 600; color: var(--noir); }

.article__date { font-size: .78rem; font-weight: 600; letter-spacing: .06em;
                 text-transform: uppercase; color: var(--gris-texte); }

.deux-colonnes { display: grid; grid-template-columns: 1fr 420px; gap: var(--p8);
                 align-items: start; padding-block: var(--p4) var(--p9); }
@media (max-width: 940px) { .deux-colonnes { grid-template-columns: 1fr; gap: var(--p6); } }

.coordonnees { display: grid; gap: var(--p3); margin-top: var(--p6); max-width: 380px; }
.coordonnee {
  display: grid; gap: .15rem; padding: var(--p4);
  border: 1px solid var(--bord); border-radius: var(--r-carte);
  text-decoration: none; color: var(--noir); transition: border-color .2s;
}
a.coordonnee:hover { border-color: var(--rouge); color: var(--rouge); }
.coordonnee strong { font-weight: 600; font-size: 1.02rem; }

.chiffres-cles { display: grid; gap: var(--p4); padding-block: var(--p5);
                 grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.chiffre-cle { border-top: 3px solid var(--rouge); padding-top: var(--p4); }
.chiffre-cle__valeur { display: block; font-size: 2.4rem; font-weight: 600;
                       color: var(--noir); line-height: 1; }
.chiffre-cle__libelle { color: var(--gris-texte); font-size: .92rem; }

.erreur { text-align: center; padding-block: var(--p9); }
.erreur__code { display: block; font-size: 4.5rem; font-weight: 600;
                color: var(--rouge); line-height: 1; }
.erreur .chapo { margin-inline: auto; }
.erreur__actions { display: flex; flex-wrap: wrap; gap: var(--p3); justify-content: center; }
.erreur .grille-annonces { text-align: left; }

/* ==========================================================================
   Mobile
   Le trafic vient de TikTok et d'Instagram : il est quasi exclusivement
   mobile, il arrive par pics, et il est impatient. Ces regles ne sont pas
   du confort, elles portent la conversion.
   ========================================================================== */
@media (max-width: 1000px) {

  /* --- 1. Plus aucun debordement lateral ------------------------------
     Une page qui glisse horizontalement donne une impression de site casse,
     et sur un ecran tactile elle gene chaque geste de defilement. */
  html, body { overflow-x: hidden; }

  /* En grille, `1fr` vaut `minmax(auto, 1fr)` : la colonne ne descend jamais
     sous la largeur minimale de son contenu. Le calendrier a douze colonnes
     la poussait au-dela de l'ecran. */
  .fiche { grid-template-columns: minmax(0, 1fr); }
  .fiche > *, .deux-colonnes > * { min-width: 0; }

  /* Le menu defile horizontalement, mais un element flex refuse de retrecir
     sous son contenu sans `min-width: 0` : les liens debordaient de 270 px. */
  /* La navigation est desormais un panneau deroulant : plus de defilement
     horizontal a contraindre. */

  /* --- 2. Le prix et l'action d'abord ---------------------------------
     Quelqu'un qui arrive d'une video a deja vu le bien. Il ne veut pas la
     description, il veut le prix et le bouton. La carte de reservation
     remonte donc juste sous le titre, avant tout le reste. */
  .fiche { display: flex; flex-direction: column; }
  /* `display: contents` fait remonter les sections au niveau du conteneur
     flex, ce qui permet de les ordonner individuellement. */
  .fiche > div:first-child { display: contents; }
  /* Le bloc titre est un <header>, les suivants des <section> : on cible donc
     la balise et non `nth-of-type`, qui compte par type et se tromperait. */
  header.fiche__section { order: 1; }
  .reservation { order: 2; }
  section.fiche__section { order: 3; }

  /* --- 3. Cibles tactiles ---------------------------------------------
     44 px est le minimum confortable au pouce. */
  .nav a { padding-block: .7rem; }
  .ariane a, .ariane li { min-height: 34px; display: inline-flex; align-items: center; }
  .etiquette { padding: 9px 14px; }
  .faq summary { padding-block: 1.1rem; }
  .offre { padding: 12px; }

  /* --- 4. Densite ------------------------------------------------------
     La fiche faisait 6 300 px de haut : on resserre sans rien retirer. */
  .fiche__section { padding-block: var(--p5); }
  .bloc { padding-block: var(--p6); }
  .galerie { aspect-ratio: 3 / 2; }
  .reperes { gap: var(--p3) 0; }
  .repere { padding-right: var(--p4); margin-right: var(--p4); }
  .grille-annonces { grid-template-columns: 1fr 1fr; gap: var(--p3); }
  .annonce__titre { font-size: .92rem; }
  .annonce__corps { padding: var(--p3) 2px 2px; }
}

@media (max-width: 560px) {
  /* Une seule colonne de cartes en dessous : deux deviennent illisibles */
  .grille-annonces { grid-template-columns: 1fr; gap: var(--p4); }
  .annonce__titre { font-size: 1rem; }
  h1 { font-size: 1.5rem; }
  .contenu { padding-inline: var(--p4); }
  .reservation__carte { padding: var(--p4); }
  /* Le champ date natif deborde sur certains Android */
  .champ input[type="date"] { min-width: 0; }
}

/* La barre d'action reste toujours atteignable au pouce, y compris sur les
   iPhone a encoche. */
@supports (padding: max(0px)) {
  .barre-mobile {
    padding-bottom: max(var(--p3), env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   Utilitaires
   ========================================================================== */
.invisible {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; border-radius: 3px; }

.message { padding: var(--p4); border-radius: var(--r-carte); font-size: .92rem;
           margin-bottom: var(--p4); }
.message--succes { background: #eaf3ec; color: var(--vert-fonce);
                   border: 1px solid var(--vert); }
.message--erreur { background: var(--rouge-voile); color: var(--rouge-fonce);
                   border: 1px solid var(--rouge); }

@keyframes monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.monte { animation: monte .55s ease backwards; }
.monte:nth-child(1) { animation-delay: .04s; }
.monte:nth-child(2) { animation-delay: .1s; }
.monte:nth-child(3) { animation-delay: .16s; }
.monte:nth-child(4) { animation-delay: .22s; }

/* ==========================================================================
   Calendrier de disponibilite
   Deux mois compacts dans la carte de reservation. Affiche uniquement quand
   au moins une source s'est synchronisee : sans donnee, ne rien dire vaut
   mieux que montrer un logement libre a tort.
   ========================================================================== */
.dispo { margin-bottom: var(--p5); padding-bottom: var(--p4);
         border-bottom: 1px solid var(--bord-tenu); }
.dispo__entete { display: flex; align-items: baseline; justify-content: space-between;
                 gap: var(--p3); margin-bottom: var(--p3); }
.dispo__legende { font-size: .72rem; color: var(--gris-texte);
                  display: flex; align-items: center; gap: .3rem; }
.dispo__puce { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.dispo__puce--libre { background: #e8f2ea; border: 1px solid var(--vert); }
.dispo__puce--pris { background: var(--gris-clair); margin-left: .4rem; }

.dispo__mois + .dispo__mois { margin-top: var(--p3); }
.dispo__titre { font-size: .82rem; font-weight: 600; color: var(--corps);
                margin-bottom: .35rem; text-transform: capitalize; }
.dispo__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dispo__jour-nom { font-size: .62rem; color: var(--gris-texte); text-align: center;
                   padding-bottom: 2px; }
.dispo__case {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: .7rem; border-radius: 3px; color: var(--corps);
  font-variant-numeric: tabular-nums;
}
.dispo__case--vide { visibility: hidden; }
.dispo__case--libre { background: #e8f2ea; color: var(--vert-fonce); font-weight: 500; }
.dispo__case--pris { background: var(--gris-clair); color: #b9b9b9;
                     text-decoration: line-through; }
.dispo__case--passe { color: #d2d2d2; }
.dispo__note { font-size: .72rem; color: var(--gris-texte); margin-top: var(--p3); }

/* ==========================================================================
   Flotte d'une agence de location
   Une agence ne se reserve pas : elle expose des modeles. La grille remplace
   le paragraphe generique par une offre lisible et comparable.
   ========================================================================== */
.flotte { display: grid; gap: var(--p4); margin-top: var(--p5);
          grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.vehicule { border: 1px solid var(--bord); border-radius: var(--r-carte);
            overflow: hidden; background: var(--blanc);
            display: flex; flex-direction: column;
            transition: border-color .2s, box-shadow .2s; }
.vehicule:hover { border-color: var(--rouge); box-shadow: var(--ombre-douce); }
.vehicule__visuel { position: relative; aspect-ratio: 4 / 3;
                    background: var(--gris-clair); overflow: hidden; }
.vehicule__visuel img { width: 100%; height: 100%; object-fit: cover; }
.vehicule__categorie {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.62); backdrop-filter: blur(6px); color: var(--blanc);
  font-size: .7rem; font-weight: 500; padding: 3px 9px; border-radius: var(--r-bouton);
  text-transform: capitalize;
}
.vehicule__corps { padding: var(--p3) var(--p4) var(--p4); display: flex;
                   flex-direction: column; gap: .4rem; flex: 1; }
.vehicule__nom { font-size: 1rem; font-weight: 600; color: var(--noir); line-height: 1.25; }
.vehicule__specs { list-style: none; padding: 0; margin: 0; display: flex;
                   flex-wrap: wrap; gap: .3rem .6rem; font-size: .8rem;
                   color: var(--gris-texte); }
.vehicule__specs li { display: flex; align-items: center; gap: .3rem; }
.vehicule__specs li + li::before { content: '·'; color: var(--bord); margin-right: .3rem; }
.vehicule__prix { margin-top: auto; padding-top: var(--p3);
                  border-top: 1px solid var(--bord-tenu); }
.vehicule__prix strong { font-size: 1.15rem; color: var(--noir); }
.vehicule__prix span { font-size: .8rem; color: var(--gris-texte); }
.vehicule__degressif { font-size: .76rem; color: var(--vert); font-weight: 500; }
.vehicule__caution { font-size: .74rem; color: var(--gris-texte); }

@media (max-width: 560px) {
  .flotte { grid-template-columns: 1fr 1fr; gap: var(--p3); }
  .vehicule__corps { padding: var(--p3); }
  .vehicule__nom { font-size: .9rem; }
}

/* ==========================================================================
   Bloc de croisement (voiture sur les fiches d'hebergement)
   ========================================================================== */
.croisement { background: var(--gris-clair); border-radius: var(--r-carte);
              padding: var(--p5); display: grid; gap: var(--p5);
              grid-template-columns: 1fr 1.4fr; align-items: center; }
@media (max-width: 780px) { .croisement { grid-template-columns: 1fr; } }
.croisement__cartes { display: grid; gap: var(--p3);
                      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.croisement__carte { display: flex; gap: var(--p3); align-items: center;
                     background: var(--blanc); border: 1px solid var(--bord);
                     border-radius: var(--r-carte); padding: 10px;
                     text-decoration: none; color: inherit;
                     transition: border-color .2s, transform .15s; }
.croisement__carte:hover { border-color: var(--rouge); transform: translateY(-2px); }
.croisement__visuel { width: 64px; height: 64px; flex: none; border-radius: var(--r-bouton);
                      overflow: hidden; background: var(--gris-clair); }
.croisement__visuel img { width: 100%; height: 100%; object-fit: cover; }
.croisement__corps { display: grid; gap: .1rem; min-width: 0; }
.croisement__nom { font-weight: 600; font-size: .92rem; color: var(--noir); }
.croisement__detail { font-size: .78rem; color: var(--gris-texte); }
.croisement__prix { font-size: .82rem; font-weight: 600; color: var(--rouge); }

/* ==========================================================================
   Avis et signaux de confiance
   ========================================================================== */
.etoile--pleine { color: #E8A33D; }
.etoile--demie  { color: #E8A33D; opacity: .55; }
.etoile--vide   { color: var(--bord); }

.note-globale { display: grid; grid-template-columns: auto 1fr; gap: var(--p6);
                align-items: center; padding: var(--p5); margin-bottom: var(--p5);
                background: var(--gris-clair); border-radius: var(--r-carte); }
@media (max-width: 640px) { .note-globale { grid-template-columns: 1fr; gap: var(--p4); } }
.note-globale__chiffre { text-align: center; }
.note-globale__valeur { font-size: 2.6rem; font-weight: 600; color: var(--noir);
                        line-height: 1; }
.note-globale__sur { color: var(--gris-texte); font-size: 1rem; }
.note-globale__etoiles { font-size: 1.05rem; letter-spacing: .1em; margin-top: .2rem; }
.note-globale__total { font-size: .82rem; color: var(--gris-texte); margin-top: .2rem; }
.note-globale__repartition { display: grid; gap: .3rem; }
.repartition__ligne { display: grid; grid-template-columns: 34px 1fr 24px;
                      gap: .5rem; align-items: center; font-size: .78rem;
                      color: var(--gris-texte); }
.repartition__piste { background: var(--blanc); border-radius: 999px; height: 6px; }
.repartition__barre { background: #E8A33D; border-radius: 999px; height: 100%;
                      display: block; }
.repartition__nombre { text-align: right; font-variant-numeric: tabular-nums; }

.liste-avis { display: grid; gap: var(--p4); }
.avis { border: 1px solid var(--bord-tenu); border-radius: var(--r-carte);
        padding: var(--p4); }
.avis__entete { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
                margin-bottom: .4rem; }
.avis__auteur { color: var(--noir); }
.avis__etoiles { letter-spacing: .06em; font-size: .84rem; }
.avis__date { margin-left: auto; font-size: .78rem; color: var(--gris-texte); }
.avis__texte { color: var(--corps); font-size: .94rem; }
.avis__reponse { margin-top: var(--p3); padding: var(--p3);
                 background: var(--gris-clair); border-radius: var(--r-bouton);
                 font-size: .9rem; color: var(--corps); }
.avis__reponse .surtitre { display: block; margin-bottom: .2rem; font-size: .68rem; }

.annonce__note { font-size: .82rem; color: var(--corps); font-weight: 500; }
.annonce__note small { color: var(--gris-texte); font-weight: 400; }

/* --- signaux de rarete, tous mesures ---------------------------------- */
.signaux { display: grid; gap: .4rem; padding: var(--p3); margin-bottom: var(--p4);
           background: var(--gris-clair); border-radius: var(--r-bouton); }
.signal { display: flex; gap: .45rem; align-items: flex-start;
          font-size: .8rem; color: var(--corps); line-height: 1.4; }
.signal svg { flex: none; margin-top: .18rem; color: var(--rouge); }
.signal strong { font-weight: 600; }

/* --- depot d'avis ------------------------------------------------------- */
/* --- suivi d'une demande ------------------------------------------------
   Cette page s'ouvre depuis un lien WhatsApp : elle est lue au téléphone,
   d'une main, dans la rue. Elle est donc dessinée pour le petit écran, et
   c'est la version large qui s'adapte — l'inverse produit des cases de
   cases à cocher qu'on rate une fois sur trois. */
.suivi { display: block; }
.suivi__choix { border: 0; padding: 0; margin: 0 0 var(--p5); }
.suivi__choix legend {
  font-family: var(--titre, inherit); font-size: 1.15rem; font-weight: 600;
  color: var(--noir); padding: 0 0 var(--p4);
}
.suivi__option {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.1rem; margin-bottom: .6rem; cursor: pointer;
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--r-carte); transition: border-color .15s, background .15s;
  /* 56 px de haut : une cible qu'on atteint au pouce sans viser. */
  min-height: 56px;
}
.suivi__option:hover { border-color: var(--rouge); }
.suivi__option input { accent-color: var(--rouge); width: 1.15rem; height: 1.15rem;
                       flex: 0 0 auto; margin: 0; }
.suivi__option span { display: grid; gap: .1rem; line-height: 1.35; }
.suivi__option small { color: var(--gris-texte); font-size: .82rem; }
/* L'option retenue se voit sans avoir à chercher le point dans le cercle. */
.suivi__option:has(input:checked) {
  border-color: var(--rouge); background: var(--rouge-voile);
}
.suivi__option:has(input:focus-visible) { outline: 2px solid var(--rouge);
                                          outline-offset: 2px; }

.suivi__suite { margin-bottom: var(--p4); }
.suivi__suite label, .suivi label { display: block; font-weight: 500;
                                    margin-bottom: .4rem; }
.suivi select, .suivi textarea {
  width: 100%; padding: .8rem .9rem; font: inherit; color: var(--corps);
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--r-carte);
  /* 16 px minimum : en dessous, iOS zoome sur le champ à la sélection. */
  font-size: max(1rem, 16px);
}
.suivi select:focus, .suivi textarea:focus {
  outline: 2px solid var(--rouge); outline-offset: 1px; border-color: var(--rouge);
}
.suivi textarea { resize: vertical; min-height: 5.5rem; }
.suivi .bouton { width: 100%; padding-block: .9rem; font-size: 1.02rem; }

@media (min-width: 620px) {
  .suivi .bouton { width: auto; padding-inline: 2.4rem; }
}

.depot-avis { padding-block: var(--p6) var(--p9); }
.panneau-avis { background: var(--blanc); border: 1px solid var(--bord);
                border-radius: var(--r-carte); padding: var(--p5);
                box-shadow: var(--ombre-carte); }
.etoiles { border: 0; padding: 0; margin: 0 0 var(--p5); text-align: center;
           display: flex; flex-direction: row-reverse; justify-content: center; }
.etoiles legend { float: left; width: 100%; text-align: left; }
.etoiles input { position: absolute; opacity: 0; width: 0; }
.etoiles label { font-size: 2.4rem; color: var(--bord); cursor: pointer;
                 padding: 0 .1rem; transition: color .15s, transform .15s; }
.etoiles label:hover, .etoiles label:hover ~ label,
.etoiles input:checked ~ label { color: #E8A33D; }
.etoiles label:hover { transform: scale(1.12); }
.etoiles input:focus-visible + label { outline: 2px solid var(--rouge);
                                       outline-offset: 2px; border-radius: 4px; }

/* ======================================================================
   Moteur de recherche (page de resultats)
   Prefixe `moteur` et non `recherche` : `.recherche` designe deja le
   formulaire du hero d'accueil, en grille 3 colonnes. Reutiliser le nom
   faisait heriter la page de resultats de cette grille.
   Barre en haut, facettes a gauche, resultats a droite. En dessous de
   900px la colonne de facettes passe en accordeon sous la barre : sur
   mobile elle prendrait sinon un ecran entier avant le premier resultat.
   ====================================================================== */
.moteur { padding-block: var(--p5) var(--p9); }

.barre-recherche {
  display: grid; gap: var(--p3);
  grid-template-columns: 2fr 1.2fr 1fr 1fr .7fr auto;
  align-items: end;
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--r-carte); padding: var(--p4);
  box-shadow: var(--ombre-douce);
}
.barre-recherche__champ { display: grid; gap: .3rem; min-width: 0; }
.barre-recherche__champ label {
  font-size: .78rem; font-weight: 500; color: var(--gris-texte);
}
.barre-recherche__champ input,
.barre-recherche__champ select {
  width: 100%; padding: 11px 12px; font: inherit; font-size: .95rem;
  border: 1px solid var(--bord); border-radius: var(--r-bouton);
  background: var(--blanc); color: var(--corps); min-height: 44px;
}
.barre-recherche__champ input:focus,
.barre-recherche__champ select:focus {
  outline: 2px solid var(--rouge); outline-offset: -1px; border-color: var(--rouge);
}
.barre-recherche__bouton { min-height: 44px; white-space: nowrap; }

@media (max-width: 900px) {
  .barre-recherche { grid-template-columns: 1fr 1fr; }
  .barre-recherche__champ--large { grid-column: 1 / -1; }
  .barre-recherche__bouton { grid-column: 1 / -1; }
}

.moteur__entete {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--p4); flex-wrap: wrap; padding: var(--p6) 0 var(--p4);
}
.moteur__entete h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
.moteur__tri { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.moteur__tri-libelle { font-size: .82rem; color: var(--gris-texte); }
.moteur__tri .etiquette { text-decoration: none; }

.moteur__actifs {
  display: flex; gap: .5rem; flex-wrap: wrap; padding-bottom: var(--p5);
}
.jeton {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: 7px 13px; border-radius: 100px; text-decoration: none;
  background: var(--rouge-voile); color: var(--rouge);
  border: 1px solid transparent; font-size: .86rem; min-height: 34px;
}
.jeton:hover { border-color: var(--rouge); }
.jeton span[aria-hidden] { font-size: 1.05rem; line-height: 1; opacity: .7; }
.jeton--vide { background: transparent; color: var(--gris-texte); text-decoration: underline; }

.moteur__corps {
  display: grid; grid-template-columns: 232px 1fr; gap: var(--p6); align-items: start;
}
@media (max-width: 900px) {
  .moteur__corps { grid-template-columns: 1fr; gap: var(--p5); }
}

.facettes { display: block; }
.facettes__corps { display: grid; gap: var(--p5); }
.facettes__bouton { display: none; }

@media (min-width: 901px) {
  .facettes { position: sticky; top: var(--p4); }
  /* Meme contournement que pour le menu : sur Chrome 131+ et Safari 18.4+,
     un <details> ferme masque son contenu via ::details-content. */
  .facettes::details-content { content-visibility: visible; display: block; }
}

@media (max-width: 900px) {
  .facettes {
    border: 1px solid var(--bord); border-radius: var(--r-carte);
    background: var(--blanc);
  }
  .facettes__bouton {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; min-height: 46px; cursor: pointer;
    font-size: .95rem; font-weight: 500; color: var(--corps);
    list-style: none; user-select: none;
  }
  .facettes__bouton::-webkit-details-marker { display: none; }
  /* Chevron dessine en CSS, pivote a l'ouverture. */
  .facettes__bouton::after {
    content: ''; width: 8px; height: 8px; border-right: 2px solid var(--rouge);
    border-bottom: 2px solid var(--rouge); transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
  }
  .facettes[open] .facettes__bouton { color: var(--rouge); }
  .facettes[open] .facettes__bouton::after {
    transform: rotate(-135deg) translate(-3px, -3px);
  }
  .facettes__corps {
    padding: 0 16px 16px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}
.facette h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--gris-texte); font-weight: 600; margin-bottom: var(--p2);
}
.facette ul { list-style: none; padding: 0; display: grid; gap: 1px; }
.facette a {
  display: flex; justify-content: space-between; gap: .5rem; align-items: center;
  padding: 8px 10px; border-radius: var(--r-bouton); text-decoration: none;
  color: var(--corps); font-size: .92rem; min-height: 36px;
}
.facette a:hover { background: var(--gris-clair); }
.facette a[aria-current] {
  background: var(--rouge); color: var(--blanc); font-weight: 500;
}
.facette a[aria-current] .facette__n { color: var(--blanc); opacity: .8; }
.facette__n { font-size: .8rem; color: var(--gris-texte); font-variant-numeric: tabular-nums; }

.resultat { position: relative; display: grid; }
.pastille-dispo {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 5px 11px; border-radius: 100px; font-size: .76rem; font-weight: 500;
  background: var(--blanc); box-shadow: var(--ombre-douce);
}
.pastille-dispo--libre { color: var(--vert); }
.pastille-dispo--inconnue { color: var(--gris-texte); }

.note-dispo {
  background: var(--gris-clair); border-left: 3px solid var(--vert);
  padding: var(--p4); border-radius: var(--r-bouton);
  font-size: .92rem; color: var(--corps); margin-bottom: var(--p5);
  max-width: var(--lecture);
}

.pagination {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  padding: var(--p7) 0 0;
}
.pagination .etiquette {
  text-decoration: none; min-width: 2.4rem; min-height: 38px;
  justify-content: center;
}

.vide { padding: var(--p6) 0; max-width: var(--lecture); display: grid; gap: var(--p4); }
.vide h2 { font-size: 1.35rem; }
.vide__correction { font-size: 1.05rem; }
.vide__pistes { list-style: none; padding: 0; display: grid; gap: 1px; }
.vide__pistes li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--p3);
  padding: 11px 13px; border: 1px solid var(--bord); border-radius: var(--r-bouton);
}
.vide__pistes a { color: var(--rouge); }
.vide__contact { color: var(--gris-texte); font-size: .94rem; }

/* Barre de recherche compacte dans l'en-tete, sur toutes les pages.
   Largeur mesuree, pas choisie au juge : la rangee dispose de 1132 px, dont
   105 pour le logo, 661 pour la navigation et 48 de gouttieres. Au-dela de
   260 px la navigation bascule sur une seconde ligne et double la hauteur de
   l'en-tete, qui est colle en haut de page. */
.entete__recherche {
  display: flex; gap: .4rem; align-items: center;
  flex: 0 1 260px; min-width: 0;
}
.entete__recherche input {
  width: 100%; padding: 9px 13px; font: inherit; font-size: .92rem;
  border: 1px solid var(--bord); border-radius: 100px; min-height: 40px;
  background: var(--gris-clair);
}
.entete__recherche input:focus {
  outline: 2px solid var(--rouge); outline-offset: -1px; background: var(--blanc);
}
.entete__recherche button {
  border: 0; background: var(--rouge); color: var(--blanc); cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 1rem;
}
.entete__recherche button:hover { background: var(--rouge-fonce); }
@media (max-width: 860px) {
  .entete__recherche { order: 3; flex: 1 0 100%; padding-top: var(--p2); }
}

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.note-dispo--partiel { border-left-color: var(--rouge); }

/* --- fiabilite d'attribution d'un emplacement de lien ------------------- */
/* La couleur porte l'information : elle n'est pas decorative, elle dit si le
   chiffre de clics est opposable a un annonceur. */
.fiabilite {
  display: inline-block; padding: 1px 8px; border-radius: 100px;
  font-size: .72rem; font-weight: 500; vertical-align: 1px;
}
.fiabilite--certaine   { background: #E7F0E8; color: var(--vert); }
.fiabilite--bonne      { background: #EDF2ED; color: var(--vert); }
.fiabilite--partielle  { background: #FBF1E3; color: #8A5B13; }
.fiabilite--indicative { background: var(--gris-clair); color: var(--gris-texte); }

.aide-emplacements {
  margin-top: var(--p5); padding-top: var(--p4);
  border-top: 1px solid var(--bord-tenu);
}
.aide-emplacements > summary {
  cursor: pointer; font-size: .9rem; font-weight: 500; color: var(--rouge);
  min-height: 40px; display: flex; align-items: center;
}
.aide-emplacements dl { margin: var(--p3) 0 0; display: grid; gap: var(--p4); }
.aide-emplacements__ligne { display: grid; gap: .25rem; }
.aide-emplacements dt { font-weight: 600; font-size: .92rem; color: var(--corps); }
.aide-emplacements dd {
  margin: 0; font-size: .88rem; color: var(--gris-texte); max-width: 72ch;
}
.aide-emplacements__plateformes {
  display: inline-block; font-weight: 500; color: var(--corps);
  margin-right: .35rem;
}
.aide-emplacements__reserve {
  display: block; margin-top: .3rem; font-style: normal;
  color: #8A5B13; font-size: .84rem;
}

/* ======================================================================
   Vérification de dates sur la fiche
   Le visiteur obtient une réponse avant qu'on lui demande son numéro.
   ====================================================================== */
.verif { margin-bottom: var(--p4); }
.verif .bouton--fantome { margin-top: .2rem; }

.verdict {
  display: grid; gap: .3rem; padding: var(--p4);
  border-radius: var(--r-bouton); margin-bottom: var(--p4);
  font-size: .9rem; line-height: 1.45;
}
.verdict strong { font-size: .98rem; }
.verdict span { color: inherit; opacity: .88; }
/* La couleur porte le verdict : elle doit distinguer trois états, pas deux.
   « Inconnu » est neutre à dessein — ni vert rassurant, ni rouge alarmant. */
.verdict--libre    { background: #E7F0E8; color: var(--vert-fonce);
                     border-left: 3px solid var(--vert); }
.verdict--occupe   { background: var(--rouge-voile); color: #7C1A21;
                     border-left: 3px solid var(--rouge); }
.verdict--inconnu  { background: var(--gris-clair); color: var(--corps);
                     border-left: 3px solid var(--gris-texte); }
.verdict--invalide { background: #FBF1E3; color: #8A5B13;
                     border-left: 3px solid #C9922F; }
.verdict a { color: inherit; font-weight: 600; }

.estimation {
  border: 1px solid var(--bord); border-radius: var(--r-bouton);
  padding: var(--p4); margin-bottom: var(--p4);
}
.estimation__total { display: flex; align-items: baseline; gap: .5rem;
                     margin-bottom: var(--p3); }
.estimation__montant { font-size: 1.5rem; font-weight: 600; color: var(--noir);
                       font-variant-numeric: tabular-nums; }
.estimation__detail { color: var(--gris-texte); font-size: .9rem; }
.estimation__lignes { list-style: none; padding: 0; display: grid; gap: .35rem;
                      font-size: .86rem; }
.estimation__lignes li {
  display: grid; grid-template-columns: 1fr auto auto; gap: .7rem;
  color: var(--gris-texte);
}
.estimation__lignes li > :last-child {
  color: var(--corps); font-variant-numeric: tabular-nums; min-width: 4.2rem;
  text-align: right;
}
.estimation__note {
  margin-top: var(--p3); padding-top: var(--p3);
  border-top: 1px solid var(--bord-tenu);
  font-size: .78rem; color: var(--gris-texte); line-height: 1.5;
}

/* --- alternatives quand les dates sont prises --------------------------- */
/* Placé juste sous le verdict : le moment où le visiteur décide de rester ou
   de partir se joue là, pas en bas de page. */
.replis {
  border: 1px solid var(--bord); border-radius: var(--r-bouton);
  padding: var(--p4); margin-bottom: var(--p4);
}
.replis__titre {
  font-size: .84rem; font-weight: 600; color: var(--corps);
  margin-bottom: var(--p3);
}
.replis__liste { list-style: none; padding: 0; display: grid; gap: .3rem; }
.replis__liste a {
  display: flex; gap: .7rem; align-items: center; text-decoration: none;
  padding: 8px; border-radius: var(--r-bouton); color: var(--corps);
  min-height: 48px;
}
.replis__liste a:hover { background: var(--gris-clair); }
.replis__liste img {
  width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex: none;
}
.replis__corps { display: grid; gap: .12rem; min-width: 0; }
.replis__nom {
  font-size: .88rem; font-weight: 500; color: var(--noir);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.replis__meta { font-size: .78rem; color: var(--gris-texte); }
.replis__etat { font-size: .74rem; font-weight: 500; }
.replis__etat--libre { color: var(--vert); }
.replis__etat--inconnue { color: var(--gris-texte); }
.replis__tout {
  display: inline-block; margin-top: var(--p3); font-size: .82rem;
  color: var(--rouge); text-decoration: none; font-weight: 500;
}
.replis__tout:hover { text-decoration: underline; }

/* --- notes relevées sur les autres plateformes -------------------------- */
/* Volontairement distinctes de la note Accromaroc : le visiteur doit voir
   d'où vient chaque chiffre. */
.notes-externes {
  display: flex; flex-wrap: wrap; gap: var(--p3); margin-top: var(--p4);
}
.note-externe {
  display: grid; gap: .1rem; padding: var(--p3) var(--p4);
  border: 1px solid var(--bord); border-radius: var(--r-carte);
  background: var(--blanc); min-width: 130px;
}
.note-externe__valeur {
  font-size: 1.4rem; font-weight: 600; color: var(--noir);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.note-externe__plateforme { font-size: .86rem; font-weight: 500; color: var(--corps); }
.note-externe__nombre { font-size: .78rem; color: var(--gris-texte); }
.note-externe__mention {
  margin-top: var(--p3); font-size: .8rem; color: var(--gris-texte);
  max-width: var(--lecture);
}

/* Un seul bouton dans la barre collante : deux CTA cote a cote se
   neutralisent, et celui qui gagnait sautait la saisie du contact. */
.barre-mobile__action {
  display: inline-flex; align-items: center; gap: .45rem;
  text-decoration: none; white-space: nowrap;
}
/* Le formulaire est la cible d'une ancre : sans marge de defilement, la barre
   collante du haut recouvre son premier champ. */
#demande { scroll-margin-top: 84px; }

/* --- témoignages repris d'autres plateformes ---------------------------- */
.temoignages {
  display: grid; gap: var(--p3); margin-top: var(--p5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.temoignage {
  margin: 0; padding: var(--p4);
  border: 1px solid var(--bord); border-radius: var(--r-carte);
  background: var(--blanc); display: grid; gap: var(--p3);
  align-content: start;
}
.temoignage blockquote {
  margin: 0; font-size: .92rem; line-height: 1.55; color: var(--corps);
}
.temoignage blockquote::before { content: "« "; color: var(--gris-texte); }
.temoignage blockquote::after { content: " »"; color: var(--gris-texte); }
.temoignage figcaption {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline;
  font-size: .8rem;
}
.temoignage__auteur { font-weight: 600; color: var(--noir); }
/* La source est toujours nommee : un temoignage repris sans son origine
   ressemble a un avis maison, ce qu'il n'est pas. */
.temoignage__source { color: var(--gris-texte); }

/* Note venue d'une autre plateforme : meme place que la notre, mais sa source
   est nommee — le visiteur doit savoir d'ou vient le chiffre. */
.annonce__note--ailleurs small { color: var(--gris-texte); font-weight: 400; }

/* Rappel des dates deja verifiees : le formulaire ne les redemande plus. */
.dates-retenues {
  background: var(--gris-clair); border-radius: var(--r-bouton);
  padding: 10px 12px; margin-bottom: var(--p3);
  font-size: .88rem; color: var(--corps);
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
}
.dates-retenues a { margin-left: auto; font-size: .82rem; }

/* --- offres en cours ---------------------------------------------------- */
.offres { display: grid; gap: .4rem; margin-bottom: var(--p4); }
.offre {
  display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap;
  background: #eef4fb; border-radius: var(--r-bouton); padding: 9px 12px;
}
.offre__valeur { font-weight: 700; color: #2a5f96; font-size: 1rem; }
.offre__detail { font-size: .82rem; color: var(--corps); }

/* Sur la carte, la remise se place a l'oppose du badge pour ne pas se
   superposer a lui. */
.annonce__offre {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: #2a5f96; color: var(--blanc);
  font-size: .78rem; font-weight: 700; padding: 3px 10px;
  border-radius: 100px;
}
.estimation__economie {
  margin-top: .3rem; font-size: .86rem; color: #2a5f96;
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline;
}
.estimation__economie s { color: var(--gris-texte); }

/* --- carte de situation ------------------------------------------------- */
/* Le cadre remplace un iframe Google qui relancait une recherche textuelle a
   chaque affichage : la position vient maintenant de la base, posee a la main
   par le proprietaire. */
.localisation__carte {
  height: 320px; border-radius: var(--r-carte); overflow: hidden;
  border: 1px solid var(--bord); background: var(--gris-clair);
  z-index: 0;   /* Leaflet monte ses couches a 400 : on borne le contexte. */
}
@media (max-width: 700px) { .localisation__carte { height: 240px; } }

.localisation__note { color: var(--gris-texte); font-size: .88rem; }


/* Portee d'une note externe : « pour Résidence Océan ». Discret, mais il
   evite de laisser croire qu'un appartement a recueilli les avis de tout
   l'immeuble. */
.note-externe__lieu {
  display: block; font-size: .78rem; color: var(--gris-texte);
  font-style: italic;
}

/* Adresse sans interlocuteur : on remplace le formulaire par la seule chose
   utile — comment y aller — plutot que de promettre une transmission
   impossible. */
.reservation__libre {
  padding: var(--p4); background: var(--gris-clair);
  border-radius: var(--r-carte); font-size: .92rem;
}
.reservation__libre p { margin: 0 0 .5rem; }
.reservation__libre p:last-child { margin-bottom: 0; }

/* Premiere etape de la reservation : on ne demande que les dates. Le bloc
   remplace le formulaire complet, il doit donc occuper la meme place sans
   donner l'impression qu'il manque quelque chose. */
.etape-dates {
  padding: var(--p4); background: var(--gris-clair);
  border-radius: var(--r-carte); font-size: .9rem;
}
.etape-dates p { margin: 0 0 .6rem; }
.etape-dates p:last-child { margin-bottom: 0; }
.etape-dates a { color: var(--rouge); }

/* Encadré en cours de vérification : on signale l'attente sans faire
   disparaître ce qui est déjà lisible — un écran vide pendant une seconde
   inquiète plus qu'il n'informe. */
.reservation__carte--attente { opacity: .55; transition: opacity .12s; }
.reservation__carte--attente form { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .reservation__carte--attente { transition: none; }
}
.verdict:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }

/* Les nuits choisies dans le calendrier de disponibilité. Le trait porte
   l'information plutôt qu'un aplat : un fond plein rivaliserait avec le vert
   des jours libres, et on ne saurait plus lequel des deux on lit. */
.dispo__case--choisi {
  outline: 2px solid var(--rouge); outline-offset: -2px;
  font-weight: 600; color: var(--noir);
}
/* Le jour du départ n'est pas une nuit réservée : il reste louable, et se
   signale d'un trait discontinu plutôt que d'être compté avec le séjour. */
.dispo__case--sortie {
  outline: 2px dashed var(--rouge); outline-offset: -2px;
}

/* Suite d'un verdict : le geste que la phrase vient d'annoncer. Un lien plein
   plutôt qu'un bouton — il conduit plus bas dans la même page, il ne déclenche
   rien, et le promettre serait mentir sur ce qui va se passer. */
.verdict__suite {
  display: inline-block; margin-top: .55rem; font-size: .88rem;
  font-weight: 500; color: currentColor;
  text-decoration: none; border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
}
.verdict__suite:hover, .verdict__suite:focus-visible { opacity: .72; }

/* Bouton de tri par proximité : même forme que les autres tris, mais il
   déclenche une demande de permission au lieu de suivre un lien. */
.etiquette--action {
  cursor: pointer; border: 1px solid var(--bord); background: none;
  font: inherit; color: inherit;
}
.etiquette--action:hover:not(:disabled) { border-color: var(--encre, var(--noir)); }
.etiquette--action:disabled { opacity: .6; cursor: progress; }
.moteur__note-position {
  display: block; margin-top: .4rem; font-size: .8rem; color: var(--gris-texte);
}

/* Filtres en cours d'application : on estompe sans vider. Faire disparaître
   la liste le temps de l'aller-retour donnerait un clignotement à chaque
   case cochée. */
.moteur__corps[aria-busy="true"] { opacity: .6; transition: opacity .1s; }
@media (prefers-reduced-motion: reduce) {
  .moteur__corps[aria-busy="true"] { transition: none; }
}

/* ==========================================================================
   Assistant du site public
   Une bulle en retrait : le moteur de recherche reste le chemin principal,
   celui-ci est le detour qu'on prend quand on ne sait pas quoi taper.
   ========================================================================== */
.visiteur__bulle {
  position: fixed; right: var(--p4); bottom: var(--p4); z-index: 60;
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--vert); color: var(--blanc); font-size: 1.4rem;
  box-shadow: var(--ombre-carte); line-height: 1;
  transition: transform .15s ease, background .15s ease;
}
.visiteur__bulle:hover { background: var(--vert-fonce); transform: scale(1.06); }

.visiteur {
  position: fixed; right: var(--p4); bottom: calc(var(--p4) + 68px); z-index: 60;
  width: min(390px, calc(100vw - 2 * var(--p4)));
  height: min(540px, calc(100vh - 150px));
  display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--r-carte); box-shadow: var(--ombre-carte);
  overflow: hidden;
}
.visiteur[hidden] { display: none; }

.visiteur__tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem var(--p4); border-bottom: 1px solid var(--bord);
  background: var(--vert); color: var(--blanc); font-size: .98rem;
}
.visiteur__fermer {
  border: 0; background: none; cursor: pointer; font-size: 1.35rem;
  line-height: 1; color: var(--blanc); opacity: .8; padding: 0 .2rem;
}
.visiteur__fermer:hover { opacity: 1; }

.visiteur__journal {
  flex: 1; overflow-y: auto; padding: var(--p4);
  display: flex; flex-direction: column; gap: .6rem;
  font-size: .92rem; line-height: 1.55; color: var(--corps);
}
.visiteur__message { padding: .6rem .8rem; border-radius: var(--r-carte); max-width: 90%; }
.visiteur__message--moi { align-self: flex-end; background: var(--rouge-voile); }
.visiteur__message--lui { align-self: flex-start; background: var(--gris-clair); }
/* Les fiches citees sont la raison d'etre de la reponse : elles doivent se
   voir comme des liens, pas se fondre dans le paragraphe. */
.visiteur__message a { color: var(--rouge); font-weight: 500; }

.visiteur__saisie {
  display: flex; gap: .5rem; padding: .75rem var(--p4);
  border-top: 1px solid var(--bord);
}
.visiteur__saisie input {
  flex: 1; min-width: 0; padding: .55rem .7rem; font: inherit; font-size: .92rem;
  border: 1px solid var(--bord); border-radius: var(--r-bouton);
  background: var(--blanc); color: var(--corps);
}
.visiteur__saisie input:focus-visible { outline: 2px solid var(--vert); outline-offset: 1px; }
.visiteur__saisie button {
  border: 0; border-radius: var(--r-bouton); cursor: pointer;
  background: var(--vert); color: var(--blanc);
  padding: .55rem .95rem; font: inherit; font-size: .9rem; font-weight: 500;
}
.visiteur__saisie button:hover:not(:disabled) { background: var(--vert-fonce); }
.visiteur__saisie button:disabled, .visiteur__saisie input:disabled { opacity: .55; }

/* Sur mobile la bulle ne doit pas couvrir le bouton WhatsApp des fiches. */
@media (max-width: 600px) {
  .visiteur__bulle { width: 48px; height: 48px; bottom: var(--p3); right: var(--p3); }
  .visiteur { bottom: calc(var(--p3) + 58px); right: var(--p3);
              height: min(70vh, calc(100vh - 120px)); }
}

/* Repli sur l'assistant : visible seulement quand le moteur n'a rien rendu. */
.repli {
  margin: var(--p5) 0; padding: var(--p4);
  border: 1px dashed var(--bord); border-radius: var(--r-carte);
  background: var(--gris-clair);
}
.repli__intro { margin-bottom: .7rem; color: var(--corps); font-size: .94rem; }
.repli__reponse {
  margin-top: var(--p4); padding-top: var(--p4);
  border-top: 1px solid var(--bord);
  font-size: .94rem; line-height: 1.6; color: var(--corps);
}
.repli__reponse a { color: var(--rouge); font-weight: 500; }

/* Photos venues de Google : le crédit à l'auteur est obligatoire, et il doit
   rester lisible sans écraser l'image. */
.galerie__element--google { position: relative; }
.galerie__credit {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .3rem .5rem; font-size: .72rem; color: var(--blanc);
  background: linear-gradient(transparent, rgba(0, 0, 0, .6));
  text-align: right;
}
.galerie__credit a { color: var(--blanc); text-decoration: underline; }

/* --- visionneuse de photos ---------------------------------------------- */
.sans-defilement { overflow: hidden; }

.visionneuse {
  position: fixed; inset: 0; z-index: 200;
  display: grid; align-items: center;
  grid-template-columns: auto 1fr auto;
  gap: var(--p3); padding: var(--p4);
  background: rgba(0, 0, 0, .92);
}
.visionneuse[hidden] { display: none; }

.visionneuse__scene {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .6rem; min-width: 0; height: 100%;
}
.visionneuse__scene img {
  max-width: 100%; max-height: calc(100vh - 7rem);
  object-fit: contain; border-radius: 4px;
}
.visionneuse__credit { font-size: .78rem; color: rgba(255, 255, 255, .75); }
.visionneuse__credit a { color: rgba(255, 255, 255, .95); }

.visionneuse button {
  border: 0; background: rgba(255, 255, 255, .12); color: var(--blanc);
  cursor: pointer; border-radius: 50%; line-height: 1;
  transition: background .15s ease;
}
.visionneuse button:hover { background: rgba(255, 255, 255, .28); }
.visionneuse button:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }
.visionneuse__precedent, .visionneuse__suivant {
  width: 48px; height: 48px; font-size: 2rem;
}
.visionneuse__fermer {
  position: absolute; top: var(--p4); right: var(--p4);
  width: 40px; height: 40px; font-size: 1.5rem;
}
.visionneuse__compte {
  position: absolute; bottom: var(--p4); left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .8); font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .visionneuse { grid-template-columns: 1fr; padding: var(--p3); }
  /* Les flèches laissent la place à l'image : le balayage prend le relais. */
  .visionneuse__precedent, .visionneuse__suivant { display: none; }
  .visionneuse__scene img { max-height: calc(100vh - 6rem); }
}

/* --- page « rejoindre » -------------------------------------------------- */
.rejoindre__tete { text-align: center; max-width: 46rem; margin: var(--p7) auto var(--p6); }
.rejoindre__accroche { margin: var(--p4) auto 0; max-width: 38rem; }
.rejoindre__chiffres {
  display: flex; justify-content: center; gap: var(--p6);
  margin-top: var(--p5); font-size: .92rem; color: var(--gris-texte);
}
.rejoindre__chiffres strong { color: var(--rouge); font-size: 1.3rem; }

.rejoindre {
  display: grid; gap: var(--p6); align-items: start;
  grid-template-columns: 1fr 1fr; margin-bottom: var(--p9);
}
.rejoindre__arguments h2 { font-size: 1.25rem; margin: var(--p5) 0 var(--p4); }
.rejoindre__arguments h2:first-child { margin-top: 0; }
.rejoindre__liste, .rejoindre__etapes { display: grid; gap: var(--p4); }
.rejoindre__liste { list-style: none; }
.rejoindre__liste li { padding-left: 1.4rem; position: relative; line-height: 1.6; }
.rejoindre__liste li::before {
  content: "→"; position: absolute; left: 0; color: var(--rouge);
}
.rejoindre__etapes { padding-left: 1.2rem; line-height: 1.6; }

.rejoindre__formulaire {
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--r-carte); padding: var(--p5);
  box-shadow: var(--ombre-carte); position: sticky; top: var(--p5);
}
.rejoindre__formulaire h2 { font-size: 1.2rem; margin-bottom: var(--p4); }
.formulaire { display: grid; gap: var(--p4); }
.formulaire__paire { display: grid; gap: var(--p4); grid-template-columns: 1fr 1fr; }
.formulaire__mention { font-size: .8rem; color: var(--gris-texte); line-height: 1.5; }

/* Le choix de la formule : des cases assez grandes pour être touchées au
   pouce, et un libellé qui dit ce qu'on obtient. */
.champ--choix { border: 0; padding: 0; }
.champ--choix legend { font-weight: 500; margin-bottom: .5rem; font-size: .92rem; }
.choix {
  display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
  padding: .6rem .7rem; border: 1px solid var(--bord);
  border-radius: var(--r-bouton); margin-bottom: .4rem;
}
.choix:has(input:checked) { border-color: var(--rouge); background: var(--rouge-voile); }
.choix small { display: block; color: var(--gris-texte); font-size: .8rem; }
.rejoindre__merci { text-align: center; padding: var(--p5) 0; }
.rejoindre__merci h2 { color: var(--vert); }
.rejoindre__merci .bouton { margin-top: var(--p4); }

@media (max-width: 900px) {
  .rejoindre { grid-template-columns: 1fr; }
  .rejoindre__formulaire { position: static; }
  .formulaire__paire { grid-template-columns: 1fr; }
}

/* Le lien professionnel se distingue des rubriques de voyage : il ne s'adresse
   pas au même visiteur, et le noyer dans la navigation le rendrait invisible. */
.nav__pro {
  border: 1px solid var(--bord); border-radius: var(--r-bouton);
  padding: .35rem .7rem; color: var(--vert) !important;
}
.nav__pro:hover { background: var(--vert); color: var(--blanc) !important; }

/* --- réseaux sociaux ---------------------------------------------------- */
.reseaux { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.reseaux a {
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none; transition: color .15s ease, background .15s ease;
}

/* Au pied de page : sobre, aligné sur les autres liens de la colonne. */
.reseaux--pied { margin-top: var(--p4); gap: .75rem; }
.reseaux--pied a { color: inherit; opacity: .78; font-size: .88rem; }
.reseaux--pied a:hover { opacity: 1; }
/* Le nom du réseau n'apporte rien à côté de son logo, mais il doit rester
   lisible par un lecteur d'écran. */
.reseaux--pied span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Sur la page « à propos » : des pastilles qu'on a envie de cliquer. */
.reseaux--boutons { gap: .6rem; margin-top: var(--p4); }
.reseaux--boutons a {
  padding: .5rem .9rem; border: 1px solid var(--bord);
  border-radius: 100px; color: var(--corps); font-size: .88rem; font-weight: 500;
}
.reseaux--boutons a:hover { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }

/* --- le fondateur, sur « à propos » ------------------------------------- */
.fondateur {
  display: grid; gap: var(--p6); align-items: center;
  grid-template-columns: 380px 1fr; margin: var(--p6) 0;
}
.fondateur__portrait { margin: 0; }
.fondateur__portrait img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-carte); box-shadow: var(--ombre-carte);
}
.fondateur__mot h2 { font-size: 1.9rem; margin: .3rem 0 .2rem; }
.fondateur__devise {
  color: var(--rouge); font-size: 1.05rem; font-style: italic;
  margin-bottom: var(--p4);
}

@media (max-width: 860px) {
  .fondateur { grid-template-columns: 1fr; gap: var(--p5); }
  .fondateur__portrait { max-width: 320px; }
}

/* « Les amis… » vit dans la phrase, pas au-dessus : posé en titre, il se
   lisait comme une étiquette collée là. Juste assez appuyé pour qu'on
   l'entende, pas assez pour sortir du paragraphe. */
.fondateur__signature {
  font-style: normal; font-weight: 600; color: var(--vert);
}

/* --- retour d'expérience ------------------------------------------------ */
.retour {
  position: fixed; right: var(--p4); bottom: var(--p4); z-index: 120;
  width: min(340px, calc(100vw - 2 * var(--p4)));
  padding: var(--p4); background: var(--blanc);
  border: 1px solid var(--bord); border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
}
.retour--visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .retour { transition: none; }
}
.retour__fermer {
  position: absolute; top: .3rem; right: .5rem; border: 0; background: none;
  font-size: 1.3rem; line-height: 1; color: var(--gris-texte); cursor: pointer;
}
.retour__fermer:hover { color: var(--noir); }
.retour__titre { font-weight: 600; padding-right: 1.2rem; }
.retour__sous { font-size: .85rem; color: var(--gris-texte); margin-top: .3rem; line-height: 1.5; }
.retour__notes { display: flex; gap: .2rem; margin: .7rem 0 0; }
.retour__note {
  border: 0; background: none; cursor: pointer; padding: .1rem .15rem;
  font-size: 1.6rem; line-height: 1; color: var(--bord);
  transition: color .12s ease, transform .12s ease;
}
.retour__note:hover { transform: scale(1.12); }
.retour__note--pleine { color: #f0a500; }
.retour__suite { display: grid; gap: .5rem; margin-top: .7rem; }
.retour__suite textarea {
  width: 100%; padding: .5rem .6rem; font: inherit; font-size: .88rem;
  border: 1px solid var(--bord); border-radius: var(--r-bouton); resize: vertical;
}
.retour__merci { margin-top: .6rem; color: var(--vert); font-weight: 500; }

/* Une note basse doit sauter aux yeux dans la liste de gestion : c'est elle
   qui demande une action. */
.retour-faible { color: var(--rouge); }

/* La bulle de l'assistant occupe déjà le coin : le panneau se pose au-dessus
   plutôt que dessus. */
@media (min-width: 641px) {
  .retour { bottom: calc(var(--p4) + 74px); }
}

/* Retour vers l'espace de gestion, pour un partenaire connecté qui visite le
   site public. Discret mais reconnaissable — ce n'est pas une rubrique. */
.nav__gestion {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem .3rem .35rem; border-radius: 100px;
  background: var(--vert); color: var(--blanc) !important;
}
.nav__gestion:hover { background: var(--vert-fonce); }
.nav__gestion img { border-radius: 50%; object-fit: cover; }

/* « Connexion » s'adresse aux partenaires déjà inscrits : présent, mais moins
   appuyé que « Me référencer », qui vise ceux qu'on veut recruter. */
.nav__connexion { color: var(--gris-texte) !important; font-size: .92rem; }
.nav__connexion:hover { color: var(--vert) !important; }

/* --- horaires d'ouverture -----------------------------------------------
   Le jour courant est marqué : devant une fiche, la seule question posée est
   « est-ce ouvert maintenant », et sept lignes égales n'y répondent pas. */
.horaires { width: 100%; border-collapse: collapse; font-size: .94rem; }
.horaires th, .horaires td { padding: .55rem 0; text-align: left; vertical-align: top; }
.horaires th { font-weight: 500; color: var(--gris-texte); width: 42%; }
.horaires td { font-variant-numeric: tabular-nums; }
.horaires tr + tr { border-top: 1px solid var(--bord-tenu); }
.horaires__aujourdhui th, .horaires__aujourdhui td { color: var(--noir); font-weight: 600; }
.horaires__marque {
  display: inline-block; margin-left: .4rem; padding: .05rem .4rem;
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; border-radius: 99px;
  background: var(--vert-voile, #eaf3ec); color: var(--vert-fonce);
}

/* ==========================================================================
   Téléphone — ce qu'un pouce peut viser, ce qu'un œil peut lire
   Mesuré sur un écran de 390 px : soixante-huit liens à 33 px de haut, des
   icônes à 31, et des mentions à 10,9 px. Un doigt couvre environ 9 mm, soit
   44 px : en dessous, on vise à côté une fois sur trois et on repart.
   ========================================================================== */
@media (max-width: 640px) {
  /* iOS agrandit la page dès qu'on touche un champ dont le texte est sous
     16 px, et ne la remet jamais comme elle était : on tape, tout saute, et
     il faut repincer pour lire la suite. Ce n'est pas une préférence
     d'apparence — c'est la seule taille qui empêche le saut. */
  input, select, textarea { font-size: 16px; }

  .entete__recherche input { min-height: 44px; }
  .entete__recherche button { width: 44px; height: 44px; }
}

@media (max-width: 560px) {
  /* Le pied : ses liens servent à rebondir, mais 33 px restait sous le seuil
     du pouce. La grille absorbe la hauteur sans que le pied s'allonge. */
  .pied ul a { padding: .62rem 0; }
  .pied .reseaux--pied a {
    display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
  }

  /* Filtres, tri, pagination : des cibles qu'on enchaîne. Les rater coûte un
     aller-retour complet. */
  .etiquette, .jeton, .pagination a { min-height: 44px; }
  .etiquette, .jeton { display: inline-flex; align-items: center; }

  /* Ce qui était illisible. « (12) » sous une note et « / nuit » sous un prix
     portent l'information qui décide du clic. */
  .annonce__note small { font-size: .82rem; }
  .annonce__prix small { font-size: .84rem; }
  .facette__n { font-size: .84rem; }
  .facette h2, .barre-recherche__champ label, .recherche__champ label {
    font-size: .84rem;
  }
  .pied h3 { font-size: .82rem; }
}

/* --- l'accueil sur un téléphone -----------------------------------------
   Deux recherches se succédaient : le champ libre de la barre du haut, puis
   le formulaire Destination / Je cherche du hero, à cent pixels d'écart. Sur
   un grand écran ils cohabitent — l'un dans la barre, l'autre dans l'image.
   Sur un téléphone ils s'empilent, et la seconde ressemble à un bug de la
   première.

   On garde celle du hero : elle propose des villes et des rubriques, là où
   l'autre demande de deviner quoi taper. */
@media (max-width: 640px) {
  .page--accueil .entete__recherche { display: none; }

  /* 620 px d'image avant le premier mot de contenu, sur un écran qui en fait
     844 : le hero occupait l'ouverture entière sans rien dire de plus qu'en
     400. La photo reste, elle porte la promesse ; elle cesse d'imposer sa
     hauteur. */
  .hero { min-height: 0; }
  .hero__contenu { padding-block: var(--p6) var(--p5); }
  .hero__accroche { font-size: .98rem; margin-top: var(--p3); }
  .recherche { margin-top: var(--p4); }

  /* Les raccourcis remontent sur le hero — une superposition qui tient tant
     que le hero est haut. Raccourci, la carte de recherche descendait dans
     les tuiles : les deux se coupaient. Sur téléphone ils se suivent. */
  .raccourcis { margin-top: var(--p4); }
}

/* --- la bulle de l'assistant ne dispute pas sa place au contenu ----------
   Elle flottait à 16 px du bas, exactement là où la fiche pose sa barre
   « prix + Demander ». Les deux se recouvraient : le bouton qui fait vivre le
   site passait derrière celui qui ne sert qu'en cas de doute. */
body:has(.barre-mobile) .visiteur__bulle { bottom: calc(var(--p4) + 78px); }

@media (max-width: 560px) {
  .visiteur__bulle { width: 48px; height: 48px; font-size: 1.2rem; }

  /* Une image en 4/3 sur 390 px de large fait 292 px de haut : une carte
     occupait presque la moitié de l'écran, et comparer trois adresses
     demandait trois écrans. En 16/10 on en voit deux d'un coup — c'est le
     minimum pour choisir. */
  .annonce__visuel { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   Écran d'ordinateur — ce que la place en trop abîme
   Pas de débordement ni de bousculade ici : les défauts viennent de l'espace
   qu'on ne sait pas quoi faire, et de tailles pensées pour une maquette plus
   dense qu'elle ne l'est devenue.
   ========================================================================== */
@media (min-width: 901px) {
  /* La barre du haut tenait sur deux lignes : logo et champ de recherche
     serrés à gauche, huit cents pixels de vide à droite, puis la navigation
     en dessous. Le champ part à droite : la ligne est occupée d'un bord à
     l'autre, et la navigation garde la sienne — les huit rubriques plus les
     deux boutons ne tiennent pas sur une seule à 1280. */
  .entete__recherche { margin-left: auto; flex: 0 1 320px; }
  .nav { margin-left: 0; flex: 1 0 100%; }

  /* 10,9 px pour la source d'une note, 10,9 pour les jours d'un calendrier :
     ces tailles venaient d'une maquette plus dense. Elles portent pourtant ce
     qui décide — d'où vient la note, quel jour coûte combien. */
  .annonce__note small { font-size: .8rem; }
  .calendrier__prix { font-size: .78rem; }
  .calendrier__etiquettes span { font-size: .76rem; }

  /* Une adresse sur 708 px fait 93 caractères par ligne. Au-delà de 90, l'œil
     perd le début de la ligne suivante. */
  .localisation__adresse { max-width: 72ch; }
}

/* --- un plancher de lisibilité, à toutes les largeurs --------------------
   Ces tailles avaient d'abord été relevées sur téléphone, puis sur écran
   d'ordinateur. Restait la tablette, qui ne recevait ni l'une ni l'autre : à
   768 px, la fiche affichait encore vingt-sept mentions sous 12 px. Un
   plancher ne se règle pas par largeur — il vaut partout. */
.annonce__note small { font-size: .8rem; }
.annonce__prix small { font-size: .82rem; }
.facette__n { font-size: .82rem; }
.calendrier__prix { font-size: .78rem; }
.calendrier__etiquettes span { font-size: .76rem; }
.surtitre { font-size: .8rem; }
.barre-recherche__champ label, .recherche__champ label,
.facette h2 { font-size: .82rem; }

/* --- bandeau d'aperçu ---------------------------------------------------
   Il n'ajoute rien à la page : il dit seulement qu'on la regarde depuis la
   gestion. Sans lui, on croit voir une fiche déjà en ligne et on cherche
   pourquoi elle n'apparaît nulle part. */
.apercu-bandeau {
  position: sticky; top: 0; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--p3);
  justify-content: space-between;
  padding: .6rem var(--p5); font-size: .9rem;
  background: #2B5431; color: #fff;
}
.apercu-bandeau strong { font-weight: 600; }
.apercu-bandeau a {
  color: #fff; text-decoration: underline; white-space: nowrap;
  min-height: 40px; display: inline-flex; align-items: center;
}