/* La Combe Claire — démonstration Cyanto. Gîte fictif. */

@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/source-sans-3-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/source-sans-3-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --creme:#F6F1E7;
  --pierre:#ECE3D3;
  --pierre-fonce:#D9CDB8;
  --encre:#231F1A;
  --texte:#4A433A;
  --doux:#6E6558;
  --terre:#B4532A;
  --terre-fonce:#8F3F1D;
  --olive:#5E6B3A;
  --olive-clair:#E4E8D5;
  --pris:#CFC5B4;
  --rayon:18px;
  --titre:"Fraunces",Georgia,serif;
  --corps:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --gouttiere:clamp(16px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--creme);color:var(--texte);font-family:var(--corps);font-size:18px;line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--titre);color:var(--encre);font-weight:500;font-optical-sizing:auto;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(40px,6.4vw,88px);line-height:1.02;font-weight:400}
h1 em{font-style:italic;color:var(--terre)}
h2{font-size:clamp(30px,4vw,52px);line-height:1.08}
h3{font-size:26px;line-height:1.2}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--terre);outline-offset:3px}

.ph{background:var(--pierre-fonce)}

/* Bandeau démonstration */
.demo-bar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:6px var(--gouttiere);background:var(--encre);color:#EFE8DC;font-size:13px;line-height:1.4}
.demo-bar p{margin:0}
.demo-bar a{color:#fff}
.demo-court{display:none}
.demo-bar__back{font-weight:600;text-decoration:none;white-space:nowrap}
.demo-bar__back:hover{text-decoration:underline}

/* En-tête */
.entete{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:14px var(--gouttiere);background:rgba(246,241,231,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.entete.defile{border-bottom-color:var(--pierre-fonce)}
.marque{white-space:nowrap;display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--titre);font-size:22px;color:var(--encre);font-weight:500}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:16px;color:var(--texte)}
.nav a:hover{color:var(--terre)}
.menu{display:none}

.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:999px;background:var(--terre);color:#fff;font-weight:600;font-size:17px;text-decoration:none;border:none;cursor:pointer;font-family:inherit;transition:background .2s,transform .2s}
.bouton:hover{background:var(--terre-fonce)}
.bouton:active{transform:scale(.98)}
.bouton--petit{min-height:44px;padding:0 20px;font-size:16px}
.bouton--plein{width:100%}
.lien-fleche{font-weight:600;text-decoration:none;color:var(--encre);border-bottom:2px solid var(--terre);padding-bottom:2px}
.lien-fleche::after{content:" →"}

.surtitre{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);margin-bottom:14px}

/* Hero */
.hero{padding:0 var(--gouttiere) 24px}
.hero__photo{border-radius:0 0 var(--rayon) var(--rayon);overflow:hidden;margin:0 calc(var(--gouttiere) * -1);aspect-ratio:21/9;min-height:320px}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero__texte{max-width:960px;margin:-110px auto 0;position:relative;background:var(--creme);border-radius:var(--rayon);padding:40px clamp(20px,4vw,56px) 36px;text-align:center}
.hero__chapo{font-size:clamp(18px,1.6vw,21px);max-width:640px;margin:22px auto 28px}
.hero__actions{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap}
.faits{list-style:none;padding:0;margin:40px auto 0;max-width:1100px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--pierre-fonce);border-bottom:1px solid var(--pierre-fonce)}
.faits li{padding:20px 12px;text-align:center;font-size:15px;color:var(--doux)}
.faits li+li{border-left:1px solid var(--pierre-fonce)}
.faits strong{display:block;font-family:var(--titre);font-weight:500;font-size:30px;color:var(--encre);line-height:1.2}

/* Sections */
.section{padding:clamp(48px,6vw,84px) var(--gouttiere);max-width:1280px;margin:0 auto}
.section__tete{max-width:760px;margin-bottom:44px}
.section__chapo{font-size:19px;margin-top:18px}
.note{font-size:15px;color:var(--doux)}
.note--petite{font-size:14px;margin:12px 0 0}

.gite{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.gite__texte h2{margin-bottom:26px}
.equipements{list-style:none;margin:0;padding:0;display:grid;gap:0}
.equipements li{padding:18px 0;border-top:1px solid var(--pierre-fonce);display:grid;grid-template-columns:130px 1fr;gap:16px}
.equipements li:last-child{border-bottom:1px solid var(--pierre-fonce)}
.equipements span{font-weight:600;color:var(--encre)}

/* Galerie */
.grille-photos{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:260px 260px;gap:12px}
.vignette{padding:0;border:0;border-radius:14px;overflow:hidden;cursor:zoom-in;display:block}
.vignette img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.vignette:hover img{transform:scale(1.04)}
.vignette--grande{grid-row:span 2}

/* Chambres */
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.carte{background:var(--pierre);border-radius:var(--rayon);padding:30px}
.carte h3{margin-bottom:8px}
.carte__detail{font-size:15px;color:var(--olive);font-weight:600}
.carte p:last-child{margin:0}

/* Tarifs */
.tableau-defilant{overflow-x:auto}
.table-tarifs{width:100%;border-collapse:collapse;font-size:18px;min-width:520px}
.table-tarifs th,.table-tarifs td{text-align:left;padding:20px 16px 20px 0;border-bottom:1px solid var(--pierre-fonce);vertical-align:middle}
.table-tarifs thead th{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--doux);font-weight:600;padding-top:0}
.table-tarifs tbody th{font-family:var(--titre);font-weight:500;font-size:22px;color:var(--encre)}
.table-tarifs tbody th span{display:block;font-family:var(--corps);font-size:15px;color:var(--doux);font-weight:400}
.table-tarifs td[data-saison]{font-family:var(--titre);font-size:26px;color:var(--terre)}
.tarifs .note{margin-top:22px;max-width:760px}

/* Réservation */
.dispos{max-width:1280px}
.resa{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;align-items:start}
.calendrier{background:#fff;border-radius:var(--rayon);padding:24px;box-shadow:0 1px 0 var(--pierre-fonce)}
.calendrier__barre{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.calendrier__legende{margin:0;font-size:14px;color:var(--doux);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;justify-content:center}
.pastille{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:4px}
.pastille--libre{background:#fff;border:1px solid var(--pierre-fonce)}
.pastille--pris{background:var(--pris)}
.pastille--choisi{background:var(--terre)}
.cal-nav{width:44px;height:44px;border-radius:999px;border:1px solid var(--pierre-fonce);background:var(--creme);font-size:18px;cursor:pointer;color:var(--encre);flex:none}
.cal-nav:hover:not(:disabled){border-color:var(--terre);color:var(--terre)}
.cal-nav:disabled{opacity:.35;cursor:default}
.calendrier__mois{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.mois h3{font-size:20px;text-align:center;margin:6px 0 12px;text-transform:capitalize}
.mois__grille{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.mois__jsem{font-size:12px;text-align:center;color:var(--doux);font-weight:600;padding-bottom:4px}
.jour{aspect-ratio:1;border:0;border-radius:8px;background:transparent;font:inherit;font-size:15px;color:var(--encre);cursor:pointer;position:relative;padding:0}
.jour:hover:not(:disabled){background:var(--olive-clair)}
.jour:disabled{cursor:default;color:#B3AA9B}
.jour--passe{color:#C9C1B3}
.jour--pris{background:var(--pris);color:#574F43;text-decoration:line-through}
.jour--pris.jour--depart-possible{background:linear-gradient(135deg,transparent 50%,var(--pris) 50%);color:var(--encre);text-decoration:none}
.jour--sejour{background:#F1D9CC;border-radius:0}
.jour--debut,.jour--fin{background:var(--terre)!important;color:#fff!important;border-radius:8px;text-decoration:none}
.jour--aujourdhui::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.cal-aide{font-size:15px;color:var(--olive);font-weight:600;margin:14px 0 0;min-height:1.6em;text-align:center}

.demande{background:var(--pierre);border-radius:var(--rayon);padding:26px}
.recap{background:var(--creme);border-radius:12px;padding:18px 20px;margin-bottom:20px}
.recap__vide{margin:0;color:var(--doux)}
.recap__dates{font-family:var(--titre);font-size:21px;color:var(--encre);margin:0 0 10px;line-height:1.3}
.recap dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:4px 0;font-size:16px}
.recap dd{margin:0;text-align:right;padding-left:12px}
.recap .total{font-weight:600;color:var(--encre);border-top:1px solid var(--pierre-fonce);padding-top:8px;margin-top:4px}
.champ{margin-bottom:16px}
.champ--duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-weight:600;font-size:15px;color:var(--encre);margin-bottom:6px}
.facultatif{font-weight:400;color:var(--doux)}
input,select,textarea{width:100%;font:inherit;font-size:17px;padding:12px 14px;border:1px solid var(--pierre-fonce);border-radius:10px;background:#fff;color:var(--encre)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--terre);box-shadow:0 0 0 3px rgba(180,83,42,.18)}
textarea{resize:vertical}
.erreur{color:#9B2C12;font-weight:600;font-size:15px;min-height:0;margin:0 0 12px}
.erreur:empty{display:none}
.envoye{text-align:center;padding:24px 8px}
.envoye h3{margin-bottom:12px}

/* Autour */
.autour{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.autour__photo{border-radius:var(--rayon);overflow:hidden;aspect-ratio:4/5}
.autour__photo img{width:100%;height:100%;object-fit:cover}
.autour h2{margin-bottom:26px}
.distances{list-style:none;margin:0 0 14px;padding:0}
.distances li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--pierre-fonce)}
.distances li:last-child{border-bottom:1px solid var(--pierre-fonce)}
.distances li span:last-child{font-family:var(--titre);color:var(--terre);white-space:nowrap}

/* Pied */
.pied{background:var(--encre);color:#D8D0C2;padding:56px var(--gouttiere) 32px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;font-size:16px}
.pied a{color:#fff}
.pied__marque{font-family:var(--titre);font-size:26px;color:#fff;margin-bottom:10px}
.pied .note{color:#A89F90}
.pied__credits{grid-column:1/-1;border-top:1px solid #3B352D;padding-top:22px;margin:8px 0 0;font-size:14px;color:#A89F90}
.a-completer{background:#FFE9A8;color:#3A2F00;padding:0 4px;border-radius:3px}

/* Visionneuse */
.visionneuse{border:0;padding:0;background:transparent;max-width:min(94vw,1600px);max-height:92vh;overflow:visible}
.visionneuse::backdrop{background:rgba(20,17,13,.88)}
.visionneuse img{max-width:min(94vw,1600px);max-height:92vh;width:auto;border-radius:10px}
.visionneuse__fermer{position:absolute;top:-14px;right:-14px;width:48px;height:48px;border-radius:999px;border:0;background:var(--creme);color:var(--encre);font-size:28px;line-height:1;cursor:pointer}

/* Tablette */
@media (max-width:980px){
  .resa{grid-template-columns:1fr}
  .gite,.autour{grid-template-columns:1fr}
  .autour__photo{aspect-ratio:3/2}
  .cartes{grid-template-columns:1fr}
  .faits{grid-template-columns:repeat(3,1fr)}
  .faits li:nth-child(4){border-left:0}
  .faits li:nth-child(n+4){border-top:1px solid var(--pierre-fonce)}
}

/* Téléphone */
@media (max-width:760px){
  body{font-size:17px}
  .entete{gap:12px}
  .entete .bouton--petit{margin-left:auto}
  .menu{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;border-radius:999px;border:0;background:var(--encre);padding:0 12px;cursor:pointer;flex:none}
  .menu span{display:block;height:2px;background:var(--creme);border-radius:2px;transition:transform .2s}
  .menu[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
  .menu[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--creme);border-bottom:1px solid var(--pierre-fonce);padding:8px var(--gouttiere) 16px}
  .nav.ouvert{display:flex}
  .nav a{padding:12px 0;font-size:18px}
  .marque span{font-size:19px}
  .demo-long{display:none}
  .demo-court{display:block}
  .demo-bar{flex-wrap:nowrap;font-size:12.5px;padding-top:6px;padding-bottom:6px}
  .hero__photo{aspect-ratio:4/5;min-height:0;border-radius:0}
  .hero__texte{margin-top:-64px;padding:28px 18px 26px;text-align:left}
  .hero__actions{justify-content:flex-start}
  .faits{grid-template-columns:1fr 1fr}
  .faits li{border-left:0!important;border-top:1px solid var(--pierre-fonce)}
  .faits li:nth-child(-n+2){border-top:0}
  .faits li:nth-child(even){border-left:1px solid var(--pierre-fonce)!important}
  .faits li:last-child{grid-column:1/-1;border-left:0!important}
  .grille-photos{grid-template-columns:1fr 1fr;grid-template-rows:auto;grid-auto-rows:150px}
  .vignette--grande{grid-column:1/-1;grid-row:auto;height:230px}
  .equipements li{grid-template-columns:1fr;gap:2px}
  .calendrier{padding:16px 12px}
  .calendrier__mois{grid-template-columns:1fr}
  .pied{grid-template-columns:1fr}
}
/* Audit 28/09 : textes en terre cuite un peu plus foncés (contraste AA) */
.distances li span:last-child,.table-tarifs td[data-saison]{color:#A34A24}