/* =========================================================
   Ancien Relais de Poste de Marolles — feuille de style
   Aucune ressource externe (pas de Google Fonts, RGPD-safe).
   ========================================================= */

:root{
  /* --- Verts : la colonne vertébrale « nature » ---------------
     On descend du vert profond (presque noir, pour le texte et les
     fonds pleins) au sauge très pâle qui remplace les anciennes
     bordures. Une seule famille : c'est ce qui donne le calme. */
  --ink:#16241d;          /* vert-noir : texte et fonds pleins */
  --ink-soft:#4a5f54;     /* texte secondaire */
  --sage:#8a9d8f;         /* vert doux, filets et détails */
  --sage-pale:#dfe6dd;    /* filets, séparateurs */

  /* --- Fonds : beaucoup de blanc, à peine teinté --------------
     L'ancien crème saturé (#faf7f1) alourdissait tout. Un blanc
     très légèrement vert respire et laisse les photos parler. */
  --paper:#fcfdfb;
  --paper-2:#f3f6f1;
  --white:#fff;

  --line:var(--sage-pale);

  /* --- Accents : argile et mousse, plus botaniques que l'ocre -- */
  --clay:#b4674a;         /* terre cuite, pour les liens et le rappel */
  --clay-soft:#d68c6c;
  --moss:#7d8f4f;         /* mousse, pour les prix et les chiffres */
  --gold:var(--clay);     /* alias : l'ancien ocre pointe sur l'argile */
  --gold-soft:#c9b38a;    /* lin, sur fond sombre */
  /* Le meme or, mais pour les fonds CLAIRS. #c9b38a n'y donne que
     2,04:1 et se delave — il est fait pour l'image de l'en-tete.
     #b8912f monte a 2,95:1 sur blanc, et c'est la teinte des
     etoiles d'advoue : les notes des deux sites se repondent.
     Ajoute le 24/08/2026. */
  --gold-ink:#b8912f;     /* or sourd, sur fond clair */
  --brick:var(--clay);

  /* --- Ombres : diffuses et vertes, jamais grises ------------- */
  --shadow:0 1px 2px rgba(22,36,29,.04), 0 12px 32px rgba(22,36,29,.06);
  --shadow-lg:0 30px 80px rgba(22,36,29,.20);

  /* --- Typographie -------------------------------------------
     Le serif reste : un relais du XVIIIe siècle ne se raconte pas
     en Helvetica. Mais il est réservé aux titres, en graisse
     normale et interlettrage serré, ce qui le modernise. Le texte
     courant passe au sans système, un peu plus grand et plus aéré. */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1200px;
  --r:18px;               /* arrondis plus francs, plus contemporains */
  --r-sm:10px;
}

*,*::before,*::after{box-sizing:border-box}

/* ---------------------------------------------------------
   L'attribut hidden doit TOUJOURS gagner.
   Le display:none de hidden vient de la feuille du navigateur :
   n'importe quelle regle d'auteur le bat, meme moins specifique.
   Sans cette ligne, .lightbox{display:flex} laissait la visionneuse
   affichee en permanence par-dessus la page, et .prog-buttons
   {display:grid} montrait les boutons du programme a vide.
   --------------------------------------------------------- */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:82px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17.5px/1.75 var(--sans);   /* plus aéré : le confort de lecture fait moderne */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--brick);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--gold)}
/* Graisse normale et non semi-gras, interlettrage négatif : un serif
   traité comme une typo d'affiche contemporaine plutôt que comme un
   livre ancien. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,7vw,5rem);letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,4vw,3.1rem);letter-spacing:-.03em}
h3{font-size:1.25rem;letter-spacing:-.015em}
p{margin:0 0 1em}
sup{font-size:.6em;vertical-align:super}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.hint{font-size:.85rem;color:var(--ink-soft);opacity:.85}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font:500 .98rem/1 var(--sans);letter-spacing:.005em;
  padding:17px 30px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:.2s cubic-bezier(.2,.7,.2,1);
}
.btn-primary{background:var(--ink);color:var(--white)}
.btn-primary:hover{background:#0d1712;color:var(--white);transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,36,29,.18)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--white)}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.stack{display:grid;gap:10px}

/* ---------- En-tête ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(252,253,251,.82);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(138,157,143,.18);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text strong{font-family:var(--serif);font-size:1.06rem;font-weight:600}
.nav{display:flex;align-items:center;gap:22px}
.nav a{font-size:.92rem;color:var(--ink);text-decoration:none;font-weight:500}
.nav a:hover{color:var(--gold)}
.nav-cta{
  background:var(--ink);color:var(--white)!important;padding:11px 20px;border-radius:999px;font-weight:600;
}
.nav-cta:hover{background:#152019}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{display:none;flex-direction:column;padding:8px 24px 20px;border-top:1px solid var(--line)}
.nav-mobile a{padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.nav-mobile .nav-cta{margin-top:14px;text-align:center;border:0}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:#f6f1e8;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;opacity:.72}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,26,20,.42) 0%,rgba(14,26,20,.22) 30%,rgba(14,26,20,.88) 100%);
}
.hero-body{position:relative;z-index:2;padding:clamp(110px,20vh,220px) 0 clamp(56px,9vh,96px)}
.eyebrow{
  font:600 .76rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:18px;
}
.hero h1{color:#fdfaf4;margin-bottom:22px;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.lede{font-size:clamp(1.05rem,1.6vw,1.28rem);max-width:56ch;color:#e9e2d5;line-height:1.6}
.hero-facts{
  list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:26px 0 30px;padding:0;
  border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);
}
.hero-facts li{
  padding:16px 30px 16px 0;margin-right:30px;font-size:.9rem;color:#d9d2c4;
  letter-spacing:.04em;text-transform:uppercase;
  border-right:1px solid rgba(255,255,255,.16);
}
.hero-facts li:last-child{border-right:0;margin-right:0;padding-right:0}
.hero-facts strong{display:block;font-family:var(--serif);font-size:1.9rem;color:#fdfaf4;text-transform:none;letter-spacing:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.hero-actions .btn-primary{background:var(--gold-soft);color:#20180c}
.hero-actions .btn-primary:hover{background:#e8bb7c;color:#20180c}
.hero-actions .btn-ghost{color:#fdfaf4;border-color:rgba(255,255,255,.5)}
.hero-actions .btn-ghost:hover{background:#fdfaf4;color:var(--ink)}
.hero-rating{font-size:.92rem;color:#dcd5c7;margin:0}
.hero-rating strong{color:#fdfaf4}
.stars{color:var(--gold-soft);letter-spacing:.06em}

/* ---------- Bandeau points forts ---------- */
.strip{background:var(--ink);color:#e9e2d5;border-top:1px solid rgba(255,255,255,.1)}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-block:0}
.strip-grid>div{padding:32px 30px;border-right:1px solid rgba(255,255,255,.12)}
.strip-grid>div:last-child{border-right:0}
.strip h3{color:var(--gold-soft);font-size:1.02rem;margin-bottom:6px}
.strip p{font-size:.9rem;margin:0;color:#c9c2b4;line-height:1.55}

/* ---------- Sections ---------- */
/* Beaucoup plus d'air vertical : c'est le respirateur principal du
   design. L'alternance de fonds devient presque imperceptible —
   c'est l'espace qui sépare les sections, plus des aplats. */
.section{padding:clamp(72px,11vw,150px) 0}
.section-alt{background:var(--paper-2)}
.section-head{max-width:62ch;margin-bottom:clamp(36px,5vw,60px)}
.section-head .eyebrow{color:var(--gold)}
.section-intro{font-size:1.06rem;color:var(--ink-soft)}
.big{font-size:1.12rem;line-height:1.7}
.note{margin-top:26px;font-size:.92rem;color:var(--ink-soft);border-left:3px solid var(--gold-soft);padding-left:16px}
.cta-line{margin-top:26px}

/* ---------- Galerie ---------- */
/* Photos plus grandes, gouttières plus fines : les images portent le
   « nature », autant leur laisser la place. */
.gallery{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:230px;gap:8px;
}
.shot{
  padding:0;border:0;background:var(--paper-2);cursor:zoom-in;overflow:hidden;
  border-radius:var(--r-sm);position:relative;
}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{transform:scale(1.05)}
.shot-wide{grid-column:span 2}
.shot-tall{grid-row:span 2}

/* ---------- Deux colonnes ---------- */
.two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:28px;margin-bottom:12px;line-height:1.6}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--gold-soft);box-shadow:0 0 0 3px rgba(176,129,60,.16);
}
.card-histoire{
  background:var(--ink);color:#ddd6c8;padding:34px;border-radius:var(--r);
  font-size:.95rem;line-height:1.7;box-shadow:var(--shadow);
}
.card-histoire h3{color:var(--gold-soft);font-size:1.3rem}
.card-histoire .pull{
  font-family:var(--serif);font-size:1.12rem;color:#fdfaf4;font-style:italic;
  border-top:1px solid rgba(255,255,255,.18);padding-top:18px;margin-bottom:0;
}

/* ---------- Équipements ---------- */
.amenities{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.amen-group{background:var(--white);border:0;border-radius:var(--r);padding:26px 28px;box-shadow:var(--shadow)}
.amen-group h3{
  font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;font-family:var(--sans);
  font-weight:700;color:var(--gold);padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.amen-group ul{list-style:none;padding:0;margin:0;font-size:.94rem}
.amen-group li{padding:5px 0 5px 20px;position:relative;line-height:1.5}
.amen-group li::before{
  content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;
  border:1.5px solid var(--gold-soft);border-radius:2px;
}

/* ---------- Chambres ---------- */
.rooms{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.room{margin:0;background:var(--white);border:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.room img{aspect-ratio:4/3;object-fit:cover;width:100%}
.room figcaption{padding:16px 18px;display:flex;flex-direction:column;gap:3px}
.room figcaption strong{font-family:var(--serif);font-size:1.05rem}
.room figcaption span{font-size:.87rem;color:var(--ink-soft)}

/* ---------- Onglets alentours ---------- */
.tablist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.tablist button{
  font:600 .88rem/1 var(--sans);padding:12px 20px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--ink-soft);transition:.16s;
}
.tablist button:hover{border-color:var(--ink);color:var(--ink)}
.tablist button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
/* ---------- Fiches des lieux ---------- */
.places{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.nearby-sub{
  grid-column:1/-1;font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  margin:18px 0 2px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.nearby-sub:first-child{margin-top:0}
.place{
  background:var(--white);border:0;border-radius:var(--r);box-shadow:var(--shadow);
  padding:24px 26px;display:flex;flex-direction:column;gap:6px;
}
.place-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.place-head h4{margin:0;font-size:1.08rem;line-height:1.25}
.place-time{
  font-family:var(--serif);font-size:.95rem;color:var(--moss);white-space:nowrap;
  background:var(--paper-2);border-radius:999px;padding:4px 12px;
}
.place-town{
  margin:0;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}
.place-desc{margin:4px 0 0;font-size:.93rem;line-height:1.55;color:var(--ink-soft)}
.place-actions{
  margin:10px 0 0;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:.87rem;
}
.place-actions a{font-weight:600}
.place-locate{
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink-soft);
  font:600 .87rem var(--sans);text-decoration:underline;text-underline-offset:3px;
}
.place-locate:hover{color:var(--gold)}

/* ---------- Carte ---------- */
.map-box{margin-top:52px}
.map-title{font-size:1.35rem;margin-bottom:16px}
.map-frame{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/9;min-height:380px;background:var(--paper-2);
}
.map-frame.is-loading::after{
  content:"Chargement de la carte…";display:grid;place-items:center;
  height:100%;color:var(--ink-soft);font-size:.9rem;
}
.map-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px}
.map-key .k{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:-8px}
.k-home{background:#d9a55f;box-shadow:0 0 0 2px #8f4a34}
.k-famille{background:#d9a55f}
.k-sport{background:#8f4a34}
.k-patrimoine{background:#4a6b8a}
.k-nature{background:#5c7a52}
.k-table{background:#9c6b8f}
/* Popups Leaflet accordées à la charte */
.leaflet-popup-content{font:400 .9rem/1.5 var(--sans);color:var(--ink)}
.leaflet-popup-content strong{font-family:var(--serif);font-size:1rem}
.leaflet-popup-content .pop-meta{
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}
.leaflet-container{font:inherit;background:var(--paper-2)}

/* ---------- Avis ---------- */
.ratings{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 48px;max-width:840px}
.rating-row{display:grid;grid-template-columns:9.5em 1fr auto;align-items:center;gap:16px;padding:9px 0}
.rating-row span{font-size:.94rem}
.rating-row b{font-family:var(--serif);font-size:1.02rem}
.bar{height:5px;background:var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold);border-radius:99px}
/* Notes par catégorie (pourcentages fournis par Airbnb) */
.r-proprete      .bar i{width:96.8%}
.r-precision     .bar i{width:98.6%}
.r-arrivee       .bar i{width:99.2%}
.r-communication .bar i{width:98.4%}
.r-emplacement   .bar i{width:94.0%}
.r-qualiteprix   .bar i{width:98.0%}
.host{
  display:flex;gap:28px;align-items:flex-start;margin-top:52px;
  background:var(--white);border:0;border-radius:var(--r);padding:32px 34px;box-shadow:var(--shadow);
}
.host-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:0 0 96px}
.host h3{margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.host p{margin:0 0 6px;font-size:.95rem}
.host-stats b{font-family:var(--serif)}
.tag{
  font:600 .7rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  background:var(--gold-soft);color:#20180c;padding:5px 10px;border-radius:999px;
}

/* ---------- Réservation ---------- */
.booking{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:start}
.booking-cal{background:var(--white);border:0;border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.cal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.cal-status{margin:0;font-family:var(--serif);font-size:1.1rem;text-align:center;flex:1}
.cal-nav{
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);cursor:pointer;font-size:1rem;color:var(--ink);transition:.16s;
}
.cal-nav:hover:not([disabled]){background:var(--ink);color:var(--white);border-color:var(--ink)}
.cal-nav[disabled]{opacity:.3;cursor:not-allowed}
.cal-months{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.cal-month h4{text-align:center;font-size:1rem;margin-bottom:12px;text-transform:capitalize}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{
  font:600 .68rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);text-align:center;padding:6px 0 10px;
}
.cal-day{
  aspect-ratio:1;border:0;background:transparent;border-radius:8px;cursor:pointer;
  font:500 .9rem/1 var(--sans);color:var(--ink);position:relative;transition:.12s;
}
.cal-day:hover:not([disabled]){background:var(--paper-2)}
.cal-day[disabled]{cursor:not-allowed;color:#bdb3a5}
.cal-day.is-busy{color:#c3b9ab;text-decoration:line-through;text-decoration-color:#d8cdbe}
.cal-day.is-empty{visibility:hidden}
.cal-day.is-range{background:var(--paper-2)}
.cal-day.is-edge{background:var(--gold);color:#20180c;font-weight:600;text-decoration:none}
.cal-legend{display:flex;flex-wrap:wrap;gap:20px;margin:22px 0 6px;font-size:.85rem;color:var(--ink-soft)}
.cal-legend span{display:inline-flex;align-items:center;gap:8px}
.cal-legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.lg-free{background:var(--paper-2);border:1px solid var(--line)}
.lg-busy{background:repeating-linear-gradient(45deg,#e5dcce,#e5dcce 3px,#f2ece1 3px,#f2ece1 6px)}
.lg-sel{background:var(--gold)}

.booking-side{position:sticky;top:100px}
.booking-summary{background:var(--ink);color:#e9e2d5;border-radius:var(--r);padding:24px 26px;margin-bottom:18px}
.bs-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:.92rem}
.bs-line b{font-family:var(--serif);font-size:1.1rem;color:#fdfaf4}
.bs-quote{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.22)}
.bs-sub{font-size:.85rem;color:#c4bdaf;border-bottom:0;padding:6px 0}
.bs-sub b{font-size:.95rem;font-family:var(--sans);font-weight:600}
.bs-total{border-bottom:0;padding-top:12px;border-top:1px solid rgba(255,255,255,.22)}
.bs-total b{color:var(--gold-soft);font-size:1.35rem}
.bs-deposit{border-bottom:0;font-size:.85rem}
.bs-deposit b{font-size:1rem}
.bs-hint{margin:16px 0 0;font-size:.85rem;color:var(--gold-soft);border:0;padding:0}
.booking-form{margin-top:26px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.booking-form h3{margin-bottom:18px}
.booking-form label{display:block;font-size:.85rem;font-weight:600;color:var(--ink-soft);margin-bottom:14px}
.booking-form input,.booking-form select,.booking-form textarea{
  width:100%;margin-top:6px;padding:12px 14px;font:400 .96rem var(--sans);color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:9px;
}
.booking-form textarea{resize:vertical}
.booking-form .check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.85rem}
.booking-form .check input{width:auto;margin:2px 0 0}
/* Pot de miel : hors écran plutôt que display:none, que certains robots détectent. */
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin:14px 0 0;font-size:.9rem;min-height:1.2em}
.form-msg.ok{color:#2f6b4a;font-weight:600}
.form-msg.ko{color:#a3372a;font-weight:600}

/* ---------- Règles ---------- */
/* Six pavés désormais : trois par ligne se lisent mieux que quatre
   colonnes étroites où chaque puce passait à la ligne. */
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rules>div{background:var(--white);border:0;border-radius:var(--r);padding:28px 30px;box-shadow:var(--shadow)}
.rules h3{
  font-size:.78rem;font-family:var(--sans);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--clay);
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--sage-pale);
}
.rules ul{list-style:none;padding:0;margin:0;font-size:.93rem}

/* Puce en feuille, en position ABSOLUE.
   Surtout pas de display:grid sur le <li> : chaque enfant (le texte,
   les <strong>, les <span class="hint">) deviendrait une cellule et
   passerait à la ligne. Le marqueur sort donc du flux, et padding-left
   donne le retrait pendant que le contenu reste en ligne. */
.rules li{position:relative;padding:7px 0 7px 22px;line-height:1.6}
.rules li::before{
  content:"";position:absolute;left:1px;top:1.05em;
  width:7px;height:7px;background:var(--sage);
  border-radius:50% 0 50% 50%;      /* feuille : un angle vif, trois arrondis */
  transform:rotate(-45deg);
}
.rules li strong{color:var(--ink)}
.rules li .hint{display:inline}     /* reste sur la même ligne que le texte */
.rules p.hint{margin:-6px 0 12px}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--ink);color:#c4bdaf;padding:64px 0 28px;font-size:.93rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.site-footer h4{color:#fdfaf4;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;font-family:var(--sans);margin-bottom:14px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{padding:5px 0}
.site-footer a{color:#c4bdaf;text-decoration:none}
.site-footer a:hover{color:var(--gold-soft);text-decoration:underline}
.site-footer strong{color:#fdfaf4}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
}
.footer-bottom p{margin:0;font-size:.84rem}

/* ---------- Visionneuse ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(17,24,20,.96);
  display:flex;align-items:center;justify-content:center;padding:56px 72px;
}
.lightbox figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:14px;align-items:center}
.lightbox img{max-height:78vh;max-width:100%;object-fit:contain;border-radius:6px;box-shadow:var(--shadow-lg)}
.lightbox figcaption{color:#e9e2d5;font-family:var(--serif);font-size:1.05rem;text-align:center}
.lb-close,.lb-prev,.lb-next{
  position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  color:#fdfaf4;cursor:pointer;border-radius:50%;transition:.16s;
}
.lb-close{top:20px;right:20px;width:44px;height:44px;font-size:1.6rem;line-height:1}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2rem;line-height:1}
.lb-prev{left:20px}.lb-next{right:20px}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.24)}
.lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#a99f90;font-size:.85rem;margin:0}
body.lb-open{overflow:hidden}

/* =========================================================
   Adaptatif
   ========================================================= */
@media (max-width:1020px){
  .nav{display:none}
  .burger{display:block}
  .site-header.open .nav-mobile{display:flex}
  .two-col{grid-template-columns:1fr;gap:38px}
  .amenities{grid-template-columns:repeat(2,1fr)}
  .rooms{grid-template-columns:repeat(2,1fr)}
  .rules{grid-template-columns:repeat(2,1fr)}
  .places{grid-template-columns:repeat(2,1fr)}
  .booking{grid-template-columns:1fr;gap:32px}
  .booking-side{position:static}
  .strip-grid{grid-template-columns:repeat(2,1fr)}
  .strip-grid>div{border-bottom:1px solid rgba(255,255,255,.12)}
  .strip-grid>div:nth-child(2n){border-right:0}
  .strip-grid>div:nth-last-child(-n+2){border-bottom:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .reviews{columns:1}
  .ratings{grid-template-columns:1fr;gap:0}
}
@media (max-width:760px){
  body{font-size:16px}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
  .shot-wide{grid-column:span 2}
  .shot-tall{grid-row:span 1}
  .places{grid-template-columns:1fr}
  .map-frame{aspect-ratio:1/1;min-height:320px}
  .cal-months{grid-template-columns:1fr;gap:26px}
  .amenities{grid-template-columns:1fr}
  .hero-facts li{padding-right:18px;margin-right:18px;font-size:.78rem}
  .hero-facts strong{font-size:1.5rem}
  .lightbox{padding:64px 12px}
  .lb-prev{left:6px}.lb-next{right:6px}
  .lb-prev,.lb-next{width:44px;height:44px;font-size:1.6rem}
  .host{flex-direction:column;gap:16px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .card-histoire{padding:26px}
}
@media (max-width:460px){
  .rooms,.rules{grid-template-columns:1fr}
  .strip-grid{grid-template-columns:1fr}
  .strip-grid>div{border-right:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .shot:hover img{transform:none}
}

@media print{
  .site-header,.lightbox,.booking-side,.map-box,.hero-actions{display:none}
  body{background:#fff;font-size:11pt}
  .hero::after,.hero-media{display:none}
  .hero{background:#fff;color:#000}
  .hero h1,.lede,.hero-facts strong{color:#000}
  .section{padding:18px 0;break-inside:avoid}
}

/* =========================================================
   Pages légales (mentions, conditions, confidentialité)
   ========================================================= */
.legal{max-width:76ch}
.legal h1{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:.4em}
.legal h2{
  font-size:1.25rem;margin-top:2.2em;padding-bottom:.4em;
  border-bottom:1px solid var(--line);
}
.legal p,.legal li{font-size:.98rem;line-height:1.75}
.legal ul{padding-left:22px}
.legal li{margin-bottom:.5em}
.legal-table{
  width:100%;border-collapse:collapse;margin:18px 0;font-size:.9rem;
  display:block;overflow-x:auto;
}
.legal-table th,.legal-table td{
  border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;
}
.legal-table th{background:var(--paper-2);font-family:var(--sans);font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase}
.footer-legal{
  margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
}
.footer-legal p{margin:0}
.footer-legal strong{color:var(--gold-soft)}

/* ---------- Questions fréquentes ---------- */
.faq{max-width:80ch}
.faq details{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:10px;overflow:hidden;
}
.faq summary{
  cursor:pointer;padding:18px 24px;font-family:var(--serif);font-size:1.08rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--sans);font-size:1.3rem;color:var(--gold);
  flex:0 0 auto;transition:transform .18s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--gold)}
.faq details p{margin:0;padding:0 24px 20px;font-size:.96rem;color:var(--ink-soft);line-height:1.7}
.bs-perhead{
  margin:2px 0 12px;font-size:.82rem;color:var(--gold-soft);text-align:right;
  border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:12px;
}

/* ---------- Avis ---------- */
/* Colonnes CSS et non grille : une grille aligne par lignes, et la
   ligne prend la hauteur de la plus grande carte — d'ou un trou sous
   les avis courts. Les colonnes remplissent de haut en bas, sans
   trou possible. Corrige le 24/08/2026. */
.reviews{
  columns:2;column-gap:14px;
  margin:40px 0 18px;
}
.review{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:14px}
.review{
  background:var(--white);border:0;border-radius:var(--r);box-shadow:var(--shadow);
  padding:26px 28px;
}
.review-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
.review-head strong{display:block;font-family:var(--serif);font-size:1.05rem}
.review-meta{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
/* « .review p.review-stars » et non « .review-stars » : la regle
   « .review p » vaut 0,1,1 en specificite et l'emportait sur 0,1,0.
   Les etoiles s'affichaient donc en --ink-soft, le vert-de-gris du
   texte secondaire — mesure le 24/08/2026, elles n'avaient jamais
   ete dorees. Pas de !important : cela masquerait le probleme. */
.review p.review-stars{margin:0;color:var(--gold-ink);font-size:.9rem;letter-spacing:.08em;white-space:nowrap}
.review p{font-size:.94rem;line-height:1.65;color:var(--ink-soft);margin:0 0 .7em}
.review p:last-child{margin-bottom:0}
.review-reply{
  border-left:3px solid var(--gold-soft);padding-left:14px;margin-top:14px!important;
  font-style:italic;font-size:.9rem!important;
}
.review-lang{font-size:.78rem!important;color:var(--ink-soft);opacity:.7;margin-top:10px!important}

/* ---------- WhatsApp ---------- */
.btn-wa{background:#25d366;color:#08331b;border-color:#25d366}
.btn-wa:hover{background:#1fb959;color:#08331b}
.btn-wa::before{content:"";width:18px;height:18px;flex:0 0 18px;background:currentColor;
  -webkit-mask:var(--wa) center/contain no-repeat;mask:var(--wa) center/contain no-repeat}
:root{--wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.38a9.87 9.87 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm5.8 14.13c-.24.68-1.42 1.3-1.95 1.35-.53.05-1.03.24-3.47-.72-2.94-1.16-4.79-4.22-4.94-4.42-.14-.19-1.16-1.55-1.16-2.95 0-1.4.73-2.09 1-2.38.24-.27.53-.34.72-.34s.39 0 .56.01c.19.01.44-.07.68.53.24.6.83 2.02.9 2.17.07.14.12.31.02.5-.1.19-.15.31-.29.48-.15.17-.31.38-.44.51-.14.14-.29.29-.12.58.17.29.75 1.24 1.62 2.01 1.11.99 2.05 1.29 2.34 1.44.29.14.46.12.63-.07.17-.19.72-.84.92-1.13.19-.29.39-.24.65-.14.27.1 1.69.8 1.98.94.29.15.48.22.55.34.07.12.07.7-.17 1.38z'/%3E%3C/svg%3E")}
.wa-float{
  position:fixed;bottom:20px;right:20px;z-index:70;
  width:56px;height:56px;border-radius:50%;background:#25d366;
  display:grid;place-items:center;box-shadow:0 6px 24px rgba(0,0,0,.28);
  text-decoration:none;transition:.18s;
}
.wa-float:hover{transform:scale(1.06)}
.wa-float span{
  width:30px;height:30px;background:#08331b;display:block;
  -webkit-mask:var(--wa) center/contain no-repeat;mask:var(--wa) center/contain no-repeat;
}
@media print{.wa-float{display:none}}

/* ---------- Générateur de programme ---------- */
.prog{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:start;margin-bottom:52px}
.prog-pick h3{font-size:1.35rem}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.theme{
  text-align:left;cursor:pointer;padding:16px 18px;border-radius:var(--r-sm);
  background:var(--white);border:0;box-shadow:var(--shadow);transition:.2s;
  display:flex;flex-direction:column;gap:3px;font-family:var(--sans);
}
.theme strong{font-family:var(--serif);font-size:1rem;color:var(--ink)}
.theme span{font-size:.78rem;color:var(--ink-soft);line-height:1.4}
.theme:hover{border-color:var(--gold);transform:translateY(-1px)}
.theme[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.theme[aria-pressed="true"] strong{color:var(--gold-soft)}
.theme[aria-pressed="true"] span{color:#c4bdaf}

.prog-panel{
  background:var(--ink);color:#ddd6c8;border-radius:var(--r);padding:26px 28px;
  position:sticky;top:100px;
}
.prog-panel h3{color:#fdfaf4;font-size:1.2rem;margin-bottom:4px}
.prog-panel header p{font-size:.88rem;margin:0 0 16px}
.prog-panel header b{font-family:var(--serif);font-size:1.15rem;color:var(--gold-soft)}
.prog-panel .hint{color:#a99f90}
.prog-list h4{
  color:var(--gold-soft);font-family:var(--sans);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;margin:18px 0 6px;
}
.prog-list ul{list-style:none;padding:0;margin:0}
.prog-list li{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.88rem;
}
.prog-list li b{font-size:.76rem;color:#a99f90;font-weight:400;white-space:nowrap}
.prog-kill{
  background:none;border:0;color:#a99f90;cursor:pointer;font-size:1.1rem;line-height:1;padding:0 2px;
}
.prog-kill:hover{color:#fff}
.prog-buttons{display:grid;gap:8px;margin-top:22px}

.place-pick{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.place-pick input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer;flex:0 0 16px}
.place-pick:hover{color:var(--gold)}
.place-dur{margin:2px 0 0;font-size:.8rem;color:var(--moss)}

@media (max-width:1020px){
  .prog{grid-template-columns:1fr}
  .prog-panel{position:static}
  .themes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){ .themes{grid-template-columns:1fr} }
@media print{
  .prog-pick,.tabs,.map-box,.prog-buttons{display:none}
  .prog{grid-template-columns:1fr}
  .prog-panel{background:#fff;color:#000;position:static;padding:0}
  .prog-panel h3,.prog-panel header b,.prog-list h4{color:#000}
  .prog-list li{border-color:#ccc}
}

/* ---------- Pages de retour de paiement ---------- */
.wrap-narrow{max-width:680px}
.page-title{font-size:clamp(1.8rem,4vw,2.2rem)}

/* ---------- Options payantes ---------- */
.bs-options{
  border:1px solid rgba(255,255,255,.18);border-radius:10px;
  padding:14px 16px 12px;margin:0 0 16px;
}
.bs-options legend{
  font:700 .7rem var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-soft);padding:0 6px;
}
.bs-options label{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:.9rem;padding:7px 0;color:#ddd6c8;
}
.bs-options label span{flex:1}
.bs-options label b{color:#fdfaf4;font-weight:600}
.bs-options input{width:16px;height:16px;flex:0 0 16px;accent-color:var(--gold);cursor:pointer}
.bs-options .opt-prix{font-family:var(--serif);font-size:1rem;color:var(--gold-soft);white-space:nowrap}
.bs-options .hint{margin:8px 0 0;color:#a99f90;font-size:.8rem;line-height:1.5}
.bs-options .hint strong{color:var(--gold-soft)}

/* =========================================================
   Distinctions Airbnb — badges dessinés pour ce site
   ---------------------------------------------------------
   Les symboles sont dans le sprite en haut de index.html. La
   branche de laurier est unique : celle de droite est la même,
   retournée par transform, ce qui garantit la symétrie.
   ========================================================= */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.distinctions{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  margin:22px 0 0;
}
.dist{display:inline-flex;align-items:center;gap:8px;color:var(--gold-soft)}
.dist b{
  font-family:var(--serif);font-weight:400;font-size:.98rem;line-height:1.2;
  letter-spacing:.01em;text-align:center;color:#fdfaf4;
}
.laurier{width:16px;height:44px;fill:currentColor;flex:0 0 16px}
.laurier-d{transform:scaleX(-1)}
.rosette{width:26px;height:26px;fill:currentColor;flex:0 0 26px}
.rosette-sm{width:15px;height:15px;flex:0 0 15px;margin-right:5px}
.dist-src{
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:#a8b0a5;align-self:flex-end;
}
.dist-src a{color:#c9d0c6}

/* La note en vedette, dans la rubrique Avis */
.note-vedette{
  display:flex;align-items:center;justify-content:flex-start;gap:6px;
  color:var(--moss);margin:0 0 22px;
}
.note-vedette .laurier{width:26px;height:74px;flex-basis:26px}
.note-chiffre{
  display:flex;flex-direction:column;align-items:center;line-height:1;
  font-family:var(--serif);font-size:clamp(2.6rem,6vw,3.8rem);
  color:var(--ink);letter-spacing:-.03em;padding:0 4px;
}
.note-chiffre small{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:10px;
}
.host .tag{display:inline-flex;align-items:center}

@media (max-width:560px){
  .distinctions{gap:12px 18px}
  .dist b{font-size:.9rem}
  .note-vedette .laurier{width:20px;height:60px;flex-basis:20px}
}
@media print{ .distinctions .dist-src{display:none} }

/* Le forfait « les deux » : mis en avant sans crier */
.bs-options .opt-duo{
  background:rgba(201,179,138,.12);
  border:1px solid rgba(201,179,138,.35);
  border-radius:var(--r-sm);
  padding:10px 12px;margin:4px 0;
}
.bs-options .opt-duo span b{color:var(--gold-soft);font-weight:400;font-size:.85em}
.bs-options .opt-duo .opt-prix s{opacity:.5;font-size:.8em;margin-right:5px}


/* ---------- Logo ---------- */
/* Le logo est une façade : viewBox 64x48, rapport 4/3. Respecter ce
   rapport, sinon le toit s'écrase ou s'étire. */
.brand-logo{width:50px;height:37.5px;flex:0 0 50px;color:var(--ink);fill:currentColor}
.brand-logo-lg{width:68px;height:51px;flex-basis:68px;color:var(--gold-soft);margin-bottom:16px}
.brand-text strong{line-height:1.15}


/* Titre tenant sur une seule ligne */
.h2-court{white-space:nowrap;font-size:clamp(1.4rem,3.2vw,2.6rem)}

/* Nombre de voyageurs, modifiable dans le récapitulatif */
.bs-line .bs-select{
  background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:8px;
  color:#fdfaf4;font:400 1rem var(--serif);padding:3px 8px;cursor:pointer;
}
.bs-line .bs-select option{color:var(--ink);background:var(--white)}
.bs-line label{cursor:pointer}


/* =========================================================
   Page « Les travaux »
   ---------------------------------------------------------
   Toutes les photos de la page sont recadrées en 4/3 par
   tools/photo-web.ps1. C'est ce qui permet une grille régulière
   sans rogner à l'affichage : le rapport est donné à la case,
   et l'image le remplit exactement.
   ========================================================= */

/* Bandeau d'ouverture : une seule photo, pleine largeur */
.trav-hero{position:relative;background:var(--ink)}
.trav-hero img{width:100%;height:clamp(280px,46vw,560px);object-fit:cover;display:block;opacity:.94}
.trav-hero figcaption{
  padding:14px 0 0;font-size:.86rem;color:var(--ink-soft);
}

/* Un chantier = un titre, un texte, et sa série de photos */
.chantier + .chantier{margin-top:clamp(48px,7vw,84px)}
.chantier-head{max-width:62ch;margin-bottom:22px}
.chantier-head h2{margin-bottom:8px}
.chantier-head p{color:var(--ink-soft);margin:0}

/* La série : 1 à 3 étapes, à largeur égale. auto-fit plutôt qu'un
   nombre fixe de colonnes, pour qu'un chantier à deux photos remplisse
   la ligne au lieu de laisser un trou. */
.triptyque{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

.etape{margin:0}
/* .shot vit normalement dans .gallery, qui lui donne sa hauteur par
   grid-auto-rows. Hors de la galerie il faut la lui donner ici, sinon
   le bouton s'effondre et l'image disparaît. */
.etape .shot{display:block;width:100%;aspect-ratio:4/3}
.etape figcaption{padding-top:10px;font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.etape-tag{
  display:inline-block;margin-bottom:5px;font-size:.7rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--clay);
}
.etape-tag.t-pendant{color:var(--moss)}
.etape-tag.t-apres{color:var(--ink)}

/* Les photos « avant » restantes, en vignettes plus petites */
.trav-reste{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* Le navigateur donne d'office 40 px de marge laterale a <figure>. Sans
   cette remise a zero, la vignette tombe a 78 px dans une colonne de
   157 px. Meme piege que pour .etape, qui a deja son margin:0. */
.trav-reste figure{margin:0}
.trav-reste .shot{display:block;width:100%;aspect-ratio:4/3}
.trav-reste figcaption{padding-top:8px;font-size:.84rem;color:var(--ink-soft)}

@media (max-width:700px){
  .triptyque{grid-template-columns:1fr}
  .trav-reste{grid-template-columns:repeat(2,1fr)}
}
@media print{
  .trav-hero img{height:auto;max-height:8cm}
}

/* Utilitaires des pages de contenu */
.center{text-align:center}
.cta-paire{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Un chantier n'ayant qu'une seule photo : la contenir à la largeur de deux
   cases. Sans cela auto-fit lui donne toute la ligne et l'image écrase le
   reste de la page. */
.triptyque.solo{max-width:66%}
@media (max-width:700px){ .triptyque.solo{max-width:100%} }

/* .section-head est plafonne a 62 caracteres, pour garder une longueur de
   ligne lisible. Ce modificateur libere les blocs qui doivent tenir toute
   la largeur du contenu. */
.section-head-large{max-width:none}
/* Precision sur la caution, sous son montant (24/08/2026) : la
   question « est-ce que je vais etre debite ? » se pose la, pas
   dans la FAQ en bas de page. */
.bs-note{margin:6px 0 0;font-size:.86em;line-height:1.45;color:var(--muted,#6b6b6b)}

/* =========================================================
   REGLE PLACEE EN FIN DE FICHIER, ET C'EST LE POINT
   ---------------------------------------------------------
   Cette regle vivait dans le bloc @media (max-width:1020px)
   de la ligne 477, alors que .reviews de base est declare
   ligne 574. Une requete media n'ajoute AUCUNE specificite :
   a specificite egale, la derniere regle lue gagne. La regle
   de base ecrasait donc l'adaptation mobile, et les avis
   s'affichaient sur DEUX colonnes sur un telephone.

   Constate a la mesure le 24/08/2026 (columnCount = 2 a
   384 px de large), et anterieur au passage en colonnes CSS :
   la version en grille souffrait exactement du meme defaut.

   Ne pas la deplacer plus haut.
   ========================================================= */
@media (max-width:1020px){
  .reviews{columns:1}
}

/* Le forfait menage dans la liste des options : cochee et desactivee.
   Il faut que l'oeil comprenne tout de suite qu'elle n'est pas
   negociable, sans pour autant la rendre illisible — un opacity
   global effacerait aussi le libelle et le montant. On grise donc la
   case seule, et le curseur reste la fleche par defaut. */
.bs-options .opt-fixe{cursor:default}
.bs-options .opt-fixe input{cursor:default;accent-color:var(--ink-soft);opacity:.75}
/* Pas de couleur imposee au libelle ni au montant : les autres
   options heritent, celle-ci doit se fondre dans la liste. Seule la
   case est grisee — c'est a elle de dire « non modifiable », pas au
   texte. Corrige le 24/08/2026. */

/* Le prix sous le numero du jour. Le bouton devient une colonne :
   numero au-dessus, prix en dessous, tous deux centres. La taille
   reduite du prix evite qu'il concurrence le numero, qui reste
   l'element sur lequel on clique. */
.cal-day{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;gap:1px}
.cal-num{font-variant-numeric:tabular-nums}
.cal-prix{font-size:.62em;letter-spacing:0;color:var(--ink-soft);font-variant-numeric:tabular-nums}
/* Un tarif different de la base se signale, sans couleur criarde :
   c'est l'or des etoiles, deja employe sur ce site. */
.cal-prix-haut{color:var(--gold-ink);font-weight:600}
@media (max-width:560px){
  /* Sous 560 px la case est trop petite pour deux lignes lisibles :
     le prix disparait plutot que de devenir illisible. */
  .cal-prix{display:none}
}