/* Marine de Davia — feuille de style unique.
   Palette neutre et chaude, tirée des photos : murs crème, bois clair, terre
   cuite des textiles. L'accent reste rare, la respiration fait le travail. */

:root {
  --fond: #faf8f5;
  --surface: #ffffff;
  --encre: #1d1b18;
  --doux: #6d665d;
  --ligne: #e6e0d6;
  --sable: #efe9df;
  --accent: #9a5f43;
  --accent-clair: #b8785c;

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

  --marge: clamp(1.25rem, 5vw, 5rem);
  --large: 78rem;
  --texte: 40rem;

  --pas-1: 0.5rem;
  --pas-2: 1rem;
  --pas-3: 2rem;
  --pas-4: 3.5rem;
  --pas-5: 6rem;
  --pas-6: 9rem;
}

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* Cormorant Garamond utilise des chiffres elzéviriens par défaut : « 10 » se
     lit alors « IO » et « 300 € » descend sous la ligne de base. */
  font-variant-numeric: lining-nums;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 var(--pas-2);
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
p { margin: 0 0 var(--pas-2); max-width: var(--texte); text-wrap: pretty; }

.sur-titre {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--pas-2);
}

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.evitement {
  position: absolute; left: var(--pas-2); top: -4rem; z-index: 100;
  background: var(--encre); color: var(--fond);
  padding: .75rem 1.25rem; border-radius: 2px; text-decoration: none;
  transition: top .2s;
}
.evitement:focus { top: var(--pas-2); }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- en-tête */

.entete {
  position: sticky; top: 0; z-index: 50;
  /* Repli opaque d'abord : sans lui, un navigateur sans color-mix() laisserait
     la barre transparente et le menu passerait sur les photos, illisible. */
  background: var(--fond);
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.entete.defile { border-bottom-color: var(--ligne); }

.bande {
  max-width: var(--large);
  margin-inline: auto;
  padding: var(--pas-2) var(--marge);
  display: flex; align-items: center; gap: var(--pas-3);
}

.marque { text-decoration: none; display: grid; line-height: 1.15; }
.marque-nom { font-family: var(--serif); font-size: 1.5rem; letter-spacing: .01em; }
.marque-lieu {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--doux);
}

.entete nav { margin-left: auto; }
.entete nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(1rem, 2.4vw, 2.25rem);
}
.entete nav a {
  text-decoration: none; font-size: .9rem; color: var(--doux);
  padding-block: .35rem; position: relative; transition: color .2s;
}
.entete nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform .25s;
}
.entete nav a:hover, .entete nav a[aria-current] { color: var(--encre); }
.entete nav a:hover::after, .entete nav a[aria-current]::after { transform: scaleX(1); }

.bascule { display: none; }

@media (max-width: 860px) {
  .entete nav { margin-left: 0; }
  .bascule {
    display: grid; place-items: center; margin-left: auto;
    width: 2.75rem; height: 2.75rem;
    background: none; border: 1px solid var(--ligne); border-radius: 2px; cursor: pointer;
  }
  .bascule-trait, .bascule-trait::before, .bascule-trait::after {
    content: ''; display: block; width: 1.15rem; height: 1px; background: var(--encre);
    transition: transform .25s, opacity .2s;
  }
  .bascule-trait::before { transform: translateY(-6px); }
  .bascule-trait::after { transform: translateY(5px); }
  .bascule[aria-expanded="true"] .bascule-trait { background: transparent; }
  .bascule[aria-expanded="true"] .bascule-trait::before { transform: rotate(45deg); }
  .bascule[aria-expanded="true"] .bascule-trait::after { transform: rotate(-45deg); }

  .entete nav {
    flex-basis: 100%; display: none;
    border-top: 1px solid var(--ligne); margin-top: var(--pas-2); padding-top: var(--pas-2);
  }
  .entete nav.ouvert { display: block; }
  .entete nav ul { flex-direction: column; gap: 0; }
  .entete nav a { display: block; padding: .7rem 0; font-size: 1.05rem; }
  .bande { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ héros */

.heros {
  position: relative;
  min-height: 58vh;
  display: grid; align-items: end;
  padding: var(--pas-5) var(--marge) var(--pas-4);
  overflow: hidden;
}
.heros-plein { min-height: min(88vh, 46rem); align-items: center; }

.heros-fond {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: -2;
}
.heros::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20,17,14,.72) 0%, rgba(20,17,14,.34) 45%, rgba(20,17,14,.14) 100%);
}

.heros-contenu { max-width: var(--large); margin-inline: auto; width: 100%; color: #fff; }
.heros-contenu .sur-titre { color: rgba(255,255,255,.82); }
.heros-contenu h1 { color: #fff; max-width: 16ch; }
.heros-sous-titre {
  font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: rgba(255,255,255,.92); max-width: 34ch; margin-top: var(--pas-2);
}
.heros .bouton { margin-top: var(--pas-3); }

/* ---------------------------------------------------------------- boutons */

.bouton {
  display: inline-block;
  background: var(--encre); color: var(--fond);
  padding: .95rem 2.1rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--encre); border-radius: 2px; cursor: pointer;
  transition: background .25s, color .25s;
}
.bouton:hover { background: transparent; color: var(--encre); }
.heros .bouton { background: #fff; border-color: #fff; color: var(--encre); }
.heros .bouton:hover { background: transparent; color: #fff; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--accent); margin-top: var(--pas-2);
}
.lien-fleche::after { content: '→'; transition: transform .25s; }
.lien-fleche:hover::after { transform: translateX(5px); }

/* ---------------------------------------------------------------- sections */

section { padding-inline: var(--marge); }
main > section + section { margin-top: var(--pas-6); }
main > .heros + .acces, main > .heros + section { margin-top: var(--pas-5); }

.acces {
  max-width: var(--large); margin-inline: auto;
  display: grid; gap: var(--pas-3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.carte { text-decoration: none; display: block; }
.carte-image { overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: var(--pas-2); }
.carte-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.carte:hover .carte-image img { transform: scale(1.045); }
.carte h2 { font-size: 1.65rem; margin-bottom: .15rem; }
.carte p { color: var(--doux); font-size: .95rem; margin: 0; }

.presentation, .region, .bloc {
  max-width: var(--large); margin-inline: auto;
  display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.presentation-image img, .region-image img, .bloc-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.region-image img { aspect-ratio: 5 / 4; }
.bloc-inverse .bloc-image { order: -1; }
@media (max-width: 900px) { .bloc-inverse .bloc-image { order: 0; } }

.chiffres {
  max-width: var(--large); margin-inline: auto;
  border-block: 1px solid var(--ligne); padding-block: var(--pas-4);
}
.chiffres ul {
  list-style: none; margin: 0 0 var(--pas-3); padding: 0;
  display: grid; gap: var(--pas-3);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.chiffres li { display: grid; gap: .1rem; }
.chiffre { font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; }
.chiffres li span:last-child { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--doux); }

.atouts { border-top: 1px solid var(--ligne); padding-top: var(--pas-3) !important; margin-bottom: 0 !important; }
.atouts li { font-size: .95rem; color: var(--doux); position: relative; padding-left: 1.15rem; }
.atouts li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }

.services, .encart, .appel, .erreur {
  max-width: var(--large); margin-inline: auto;
  background: var(--sable); padding: var(--pas-4) clamp(1.5rem, 4vw, 3.5rem);
}
.services ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .65rem var(--pas-3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.services li { position: relative; padding-left: 1.4rem; }
.services li::before { content: '·'; position: absolute; left: .35rem; color: var(--accent); font-weight: 700; }

.appel, .erreur { text-align: center; }
.appel p, .erreur p { margin-inline: auto; }
.appel .bouton, .erreur .bouton { margin-top: var(--pas-2); }
.erreur { padding-block: var(--pas-5); }

/* --------------------------------------------------------------- galerie */

.galerie { max-width: var(--large); margin-inline: auto; }
.galerie-grille {
  margin-top: var(--pas-3);
  display: grid; gap: .65rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.vignette {
  padding: 0; border: 0; background: none; cursor: zoom-in;
  overflow: hidden; aspect-ratio: 3 / 4;
}
.vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.vignette:hover img { transform: scale(1.06); }

.visionneuse {
  border: 0; padding: 0; max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%; background: rgba(18,16,14,.94);
}
.visionneuse::backdrop { background: rgba(18,16,14,.9); }
.visionneuse figure {
  margin: 0; height: 100%;
  display: grid; place-content: center; place-items: center; gap: var(--pas-2);
  padding: clamp(1rem, 5vw, 4rem);
}
.visionneuse img { max-height: 82vh; width: auto; max-width: 100%; }
.visionneuse figcaption { color: rgba(255,255,255,.8); font-size: .9rem; text-align: center; }
.visionneuse button {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 2.4rem; line-height: 1; padding: .5rem 1rem; opacity: .75; transition: opacity .2s;
}
.visionneuse button:hover { opacity: 1; }
.visionneuse-fermer { top: .5rem; right: .5rem; font-size: 2.8rem; }
.visionneuse-prec { left: 0; top: 50%; transform: translateY(-50%); }
.visionneuse-suiv { right: 0; top: 50%; transform: translateY(-50%); }

/* ---------------------------------------------------------------- tarifs */

.grille-tarifs, .calendrier { max-width: var(--large); margin-inline: auto; }
.tableau-defilant { overflow-x: auto; margin-top: var(--pas-3); }

table.tarifs { border-collapse: collapse; width: 100%; min-width: 34rem; background: var(--surface); }
table.tarifs th, table.tarifs td {
  text-align: left; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--ligne);
  vertical-align: top;
}
table.tarifs thead th {
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--doux);
}
table.tarifs tbody th { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; white-space: nowrap; }
table.tarifs td { font-size: .95rem; color: var(--doux); }
/* sélecteur assez spécifique pour l'emporter sur « table.tarifs td » */
table.tarifs td.prix { font-family: var(--serif); font-size: 1.75rem; color: var(--encre); white-space: nowrap; }
tr.ferme { color: var(--doux); }
table.tarifs tr.ferme td.prix { font-size: 1.15rem; font-style: italic; color: var(--doux); }

.note { font-size: .88rem; color: var(--doux); margin-top: var(--pas-2); }

.legende { list-style: none; display: flex; gap: var(--pas-3); padding: 0; margin: var(--pas-2) 0 var(--pas-3); font-size: .85rem; }
.legende li { display: flex; align-items: center; gap: .5rem; }
.pastille { width: .85rem; height: .85rem; border-radius: 50%; display: inline-block; }
.pastille.libre { background: var(--surface); border: 1px solid var(--ligne); }
.pastille.reserve { background: var(--accent-clair); }

.mois-grille {
  display: grid; gap: var(--pas-3);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.mois { margin: 0; background: var(--surface); border: 1px solid var(--ligne); padding: var(--pas-2); }
.mois figcaption {
  font-family: var(--serif); font-size: 1.3rem; text-transform: capitalize;
  margin-bottom: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--ligne);
}
.mois table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.mois th { font-size: .68rem; font-weight: 500; color: var(--doux); padding-bottom: .35rem; }
.mois abbr { text-decoration: none; }
.mois td { text-align: center; font-size: .85rem; padding: .3rem 0; }
.mois td.reserve { background: var(--accent-clair); color: #fff; border-radius: 2px; }
.mois td.libre { color: var(--encre); }
.mois td.vide { color: transparent; }

/* --------------------------------------------------------------- contact */

.contact {
  max-width: var(--large); margin-inline: auto;
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.champ { display: grid; gap: .4rem; max-width: none; margin-bottom: var(--pas-2); }
.champ label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.champ input, .champ textarea {
  font: inherit; font-size: 1rem; color: var(--encre);
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 2px;
  padding: .8rem .9rem; width: 100%; transition: border-color .2s;
}
.champ input:focus, .champ textarea:focus { border-color: var(--accent); }
.champ textarea { resize: vertical; }
.piege { position: absolute; left: -9999px; }

.mention-donnees { font-size: .82rem; color: var(--doux); margin-top: var(--pas-2); }
.retour { font-weight: 500; margin-top: var(--pas-2); }
.retour.ok { color: #2f6b46; }
.retour.echec { color: #a3402f; }

.infos dl { margin: 0; display: grid; gap: .3rem; }
.infos dt { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--doux); margin-top: var(--pas-2); }
.infos dd { margin: 0; }

/* ------------------------------------------------------------ pages légales */

.page-legale main { max-width: 48rem; margin-inline: auto; }
.entete-legale { padding-top: var(--pas-5); }
.entete-legale h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.chapeau { font-family: var(--serif); font-size: 1.3rem; color: var(--doux); max-width: 46ch; }
.texte-legal { padding-inline: 0; }
main > .texte-legal + .texte-legal { margin-top: var(--pas-4); }
.texte-legal h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.definitions { display: grid; gap: .2rem; margin: 0; }
.definitions dt { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--doux); margin-top: var(--pas-2); }
.definitions dd { margin: 0; }
.a-completer { background: #fdf3d3; padding: .1rem .3rem; }

/* --------------------------------------------- ordre de lecture sur mobile */

/* Sur téléphone, l'empilement rejetait les chiffres clés — capacité, chambres,
   salles de bains — au cinquième écran, après le héros, les trois cartes et
   quatre paragraphes. C'est pourtant ce qu'un vacancier vérifie en premier.
   On les remonte juste sous l'ouverture, sans toucher à la mise en page large :
   seul l'ordre d'affichage change, le document reste dans le même ordre. */
@media (max-width: 860px) {
  /* Grille à une piste, et non flex : dans un conteneur flex un enfant garde sa
     largeur minimale de contenu, si bien que la grille des trois cartes
     conservait ses trois colonnes et débordait de 482 px. minmax(0, 1fr)
     contraint la piste et laisse les grilles internes se replier. */
  .page-accueil main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pas-5);
  }

  /* les marges entre sections laisseraient des blancs incohérents une fois
     l'ordre changé ; l'espacement passe entièrement par le gap ci-dessus */
  /* margin-inline: auto doit disparaître ici : sur un élément de grille, une
     marge automatique annule l'étirement sur la piste, et la section se
     dimensionne alors sur son contenu — la grille des trois cartes gardait
     ainsi ses trois colonnes et débordait de 482 px. Le centrage ne sert de
     toute façon à rien sous 860 px, où max-width n'est jamais atteint. */
  .page-accueil main > section,
  .page-accueil main > section + section,
  .page-accueil main > .heros + section {
    margin-top: 0;
    margin-inline: 0;
    min-width: 0;
  }

  .page-accueil main > .heros { order: 1; }
  .page-accueil main > .chiffres { order: 2; }
  .page-accueil main > .acces { order: 3; }
  .page-accueil main > .presentation { order: 4; }
  .page-accueil main > .region { order: 5; }

  /* le bloc arrive directement sous une photo pleine largeur : sans bordure
     haute, la transition est plus franche */
  .page-accueil main > .chiffres { border-top: 0; padding-top: 0; }

  /* un héros de 88 vh occupe presque tout l'écran et repousse le reste */
  .heros-plein { min-height: 74vh; }
}

/* ------------------------------------------------------------- pied de page */

.pied {
  margin-top: var(--pas-6);
  border-top: 1px solid var(--ligne);
  padding: var(--pas-4) var(--marge) var(--pas-3);
}
.pied-grille {
  max-width: var(--large); margin-inline: auto;
  display: grid; gap: var(--pas-3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.pied h2 { font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--doux); }
.pied-marque { font-family: var(--serif); font-size: 1.5rem; margin-bottom: .25rem; }
.pied-phrase { color: var(--doux); font-size: .95rem; max-width: 30ch; }
.liste-nue { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .95rem; }
.liste-nue a { text-decoration: none; color: var(--doux); transition: color .2s; }
.liste-nue a:hover { color: var(--encre); text-decoration: underline; }
.pied-bas {
  max-width: var(--large); margin: var(--pas-3) auto 0;
  padding-top: var(--pas-2); border-top: 1px solid var(--ligne);
  font-size: .8rem; color: var(--doux);
}

/* ------------------------------------------------------ livret d'accueil */

/* Écran de saisie : une porte, avant le livret. */
.porte {
  position: relative;
  min-height: min(88vh, 44rem);
  display: grid; place-items: center;
  padding: var(--pas-5) var(--marge);
  overflow: hidden;
}
.porte-fond {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.porte::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20,17,14,.82) 0%, rgba(20,17,14,.6) 60%, rgba(20,17,14,.42) 100%);
}
.porte-contenu { max-width: 34rem; width: 100%; color: #fff; text-align: center; }
.porte-contenu .sur-titre { color: rgba(255,255,255,.82); }
.porte-contenu h1 { color: #fff; font-size: clamp(2.2rem, 6vw, 3.6rem); }
.porte-texte { color: rgba(255,255,255,.9); margin-inline: auto; }

#porte-livret { margin-top: var(--pas-3); }
#porte-livret label {
  display: block; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: .5rem;
}
.porte-champ { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.porte-champ input {
  font: inherit; font-size: 1rem; color: var(--encre);
  background: rgba(255,255,255,.96); border: 1px solid transparent; border-radius: 2px;
  padding: .85rem 1rem; min-width: 0; flex: 1 1 14rem; max-width: 20rem;
}
.porte-champ input:focus { border-color: var(--accent-clair); }
.porte-champ .bouton { background: #fff; border-color: #fff; color: var(--encre); flex: 0 0 auto; }
.porte-champ .bouton:hover { background: transparent; color: #fff; }
.porte-retour { min-height: 1.5em; margin: var(--pas-2) auto 0; font-weight: 500; color: #fff; }
.porte-retour.echec { color: #ffc9be; }
.porte-aide { font-size: .88rem; color: rgba(255,255,255,.72); margin: var(--pas-3) auto 0; }
.porte-aide a { color: #fff; }

/* Le livret, une fois ouvert. */
#livret { padding-inline: var(--marge); }
#livret:focus { outline: none; }
/* la barre de navigation est collante : sans cette marge, le défilement
   automatique vers le livret glisse son titre dessous */
#livret, .section-guide { scroll-margin-top: 6rem; }

.entete-guide {
  max-width: var(--large); margin: var(--pas-5) auto var(--pas-4);
  padding-bottom: var(--pas-3); border-bottom: 1px solid var(--ligne);
}
.titre-guide { font-size: clamp(2.4rem, 6vw, 4rem); }
.entete-guide .chapeau { margin-top: var(--pas-2); }

.sommaire {
  max-width: var(--large); margin: 0 auto var(--pas-5);
  background: var(--sable); padding: var(--pas-3) clamp(1.25rem, 3vw, 2.5rem);
}
.sommaire-titre {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--doux); margin-bottom: var(--pas-2);
}
.sommaire ol {
  list-style: none; margin: 0; padding: 0; counter-reset: item;
  display: grid; gap: .5rem var(--pas-3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.sommaire li { counter-increment: item; }
.sommaire a {
  text-decoration: none; display: flex; gap: .7rem; align-items: baseline;
  padding: .2rem 0; transition: color .2s;
}
.sommaire a::before {
  content: counter(item, decimal-leading-zero);
  font-family: var(--serif); font-size: .95rem; color: var(--accent); flex: 0 0 auto;
}
.sommaire a:hover { color: var(--accent); }

.section-guide {
  max-width: var(--large); margin-inline: auto;
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
.section-guide:not(:last-of-type) { margin-bottom: var(--pas-5); }
.section-guide:has(> .section-guide-texte:only-child) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .section-guide { grid-template-columns: minmax(0, 1fr); } }
.section-guide h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  padding-bottom: .5rem; border-bottom: 1px solid var(--ligne); margin-bottom: var(--pas-3);
}
.section-guide-image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.intro-section { color: var(--doux); font-family: var(--serif); font-size: 1.2rem; }

.blocs-guide { display: grid; gap: var(--pas-3); }
.bloc-guide h3 {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--doux);
  margin-bottom: .5rem;
}
.bloc-guide p:last-child { margin-bottom: 0; }
.bloc-guide strong { font-weight: 600; color: var(--encre); background: #f3e9e2; padding: 0 .25em; }

/* Sécurité, interdits, risques : ce qui ne doit pas être survolé du regard. */
.bloc-important {
  border-left: 3px solid var(--accent); padding-left: clamp(1rem, 2vw, 1.5rem);
}
.bloc-important h3 { color: var(--accent); }

.chambres {
  display: grid; gap: var(--pas-2);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.chambre {
  background: var(--surface); border: 1px solid var(--ligne);
  padding: var(--pas-2) 1.25rem;
}
.chambre h3 { font-size: 1.5rem; margin-bottom: .3rem; }
.chambre p { font-size: .92rem; margin-bottom: .6rem; max-width: none; }
.chambre .situation { color: var(--doux); }
.chambre .couchage { display: grid; gap: .1rem; }
.chambre .couchage span {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.chambre .equipement { color: var(--doux); font-size: .88rem; margin-bottom: 0; }

.etapes { counter-reset: etape; list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.etapes li { counter-increment: etape; position: relative; padding-left: 2.6rem; }
.etapes li::before {
  content: counter(etape);
  position: absolute; left: 0; top: -.15rem;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sable); color: var(--accent);
  font-family: var(--serif); font-size: 1.05rem;
}
.etapes strong { font-weight: 600; background: #f3e9e2; padding: 0 .25em; }

.depart .section-guide-texte { background: var(--sable); padding: var(--pas-4) clamp(1.5rem, 4vw, 3rem); }
.depart h2 { border-bottom-color: var(--accent-clair); }
.depart h3 {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--doux);
  margin-top: var(--pas-3); margin-bottom: .6rem;
}
.checklist, .cles { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.checklist li { position: relative; padding-left: 2rem; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 1.05rem; height: 1.05rem; border: 1px solid var(--accent-clair); border-radius: 2px;
}
.cles { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.cles li { position: relative; padding-left: 1.2rem; color: var(--doux); }
.cles li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }

.contact-guide {
  max-width: var(--large); margin: var(--pas-5) auto 0;
  padding-top: var(--pas-4); border-top: 1px solid var(--ligne); text-align: center;
}
.contact-guide p { margin-inline: auto; }
.coordonnees-guide {
  display: flex; gap: var(--pas-3); justify-content: center; flex-wrap: wrap;
  margin-top: var(--pas-2); font-family: var(--serif); font-size: 1.3rem;
}
.coordonnees-guide a { text-decoration: none; border-bottom: 1px solid var(--accent-clair); }

/* ---------------------------------------------------- espace propriétaire */

/* La porte du propriétaire reprend celle du livret, sans photo : c'est un
   outil, pas une page d'accueil. Le fond sombre garde la parenté visuelle. */
.porte-proprio {
  background: #14110e;
  min-height: min(80vh, 38rem);
}
.porte-proprio .champ { text-align: left; max-width: 22rem; margin-inline: auto; }
.porte-proprio .champ label { color: rgba(255,255,255,.72); }
.porte-proprio .champ input {
  background: rgba(255,255,255,.96); border-color: transparent;
}
.porte-proprio .champ input:focus { border-color: var(--accent-clair); }
.porte-proprio .bouton {
  background: #fff; border-color: #fff; color: var(--encre); margin-top: var(--pas-1);
}
.porte-proprio .bouton:hover { background: transparent; color: #fff; }

#atelier { padding: var(--pas-5) var(--marge); max-width: 46rem; margin-inline: auto; }
/* L'en-tête est collant : sans cette marge, il recouvrirait le bloc amené à
   l'écran après la connexion ou la création d'un code. */
#atelier, #bloc-code { scroll-margin-top: 6rem; }
#atelier:focus { outline: none; }
.entete-proprio { text-align: center; margin-bottom: var(--pas-4); }
.titre-proprio { font-family: var(--serif); font-weight: 400; line-height: 1.15; font-size: clamp(2rem, 5vw, 2.9rem); margin: 0; }

.carte-proprio {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 3px;
  padding: var(--pas-3);
  margin-bottom: var(--pas-3);
}
.carte-proprio h2 { font-size: 1.55rem; margin: 0 0 var(--pas-1); }
.carte-texte { color: var(--doux); font-size: .92rem; margin: 0 0 var(--pas-2); }

.dates-sejour { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pas-2); align-items: end; }
.dates-sejour .champ { margin-bottom: 0; }
.duree {
  grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--doux);
  letter-spacing: .08em; text-transform: uppercase; min-height: 1.2em;
}
#creer-code .bouton { margin-top: var(--pas-2); }
#retour-code { color: var(--encre); min-height: 0; margin-top: var(--pas-2); }
#retour-code.echec { color: #a3402f; }
#retour-code:empty { margin-top: 0; }

/* Le code lui-même : la seule chose que le propriétaire recopie, donc la seule
   qu'on met en avant. Chiffres alignés, pour qu'on puisse le lire à voix haute. */
.carte-code { background: var(--sable); border-color: transparent; text-align: center; }
.code-genere {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 3.6vw, 1.5rem);
  font-weight: 600; letter-spacing: .1em;
  font-variant-numeric: lining-nums tabular-nums;
  word-break: break-all;
  margin: var(--pas-2) 0 var(--pas-1);
}
.code-validite { font-size: .88rem; color: var(--doux); margin: 0 0 var(--pas-2); }

.copiable { display: flex; gap: .6rem; align-items: flex-start; }
.copiable input, .copiable textarea {
  font: inherit; font-size: .95rem; color: var(--encre);
  background: var(--fond); border: 1px solid var(--ligne); border-radius: 2px;
  padding: .8rem .9rem; flex: 1 1 auto; min-width: 0; resize: vertical;
}
.copiable input:focus, .copiable textarea:focus { border-color: var(--accent); }
.bouton-copier {
  flex: 0 0 auto; padding: .8rem 1.2rem; font-size: .7rem;
  background: transparent; color: var(--encre);
}
.bouton-copier:hover { background: var(--encre); color: var(--fond); }
.bouton-copier.copie {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.carte-code .bouton-copier { background: var(--encre); color: var(--fond); }
.carte-code .bouton-copier:hover { background: transparent; color: var(--encre); }

@media (max-width: 34rem) {
  .dates-sejour { grid-template-columns: 1fr; }
  .copiable { flex-wrap: wrap; }
  .copiable .bouton-copier { width: 100%; }
}