/* Sous-pages du site (les environs, bon à savoir, réservation, blogue) et ajouts à l'accueil.
   Reprend les variables et le style « plan d'architecte » de demo.css. */

.nav-ordi a[aria-current="page"] { color: var(--c-accent); }

/* En-tête des sous-pages : titre, puis une grande fenêtre cadrée de noir */
.page-tete { padding-top: calc(76px + clamp(48px, 7vw, 96px)); }
.page-tete h1 { font-size: clamp(40px, 7vw, 92px); line-height: .98; letter-spacing: -.045em; max-width: 15ch; margin-bottom: clamp(20px, 3vw, 36px); }
.page-tete-bas { display: grid; gap: 22px; align-items: end; padding-bottom: clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--c-texte); }
.page-tete-bas .chapeau { margin: 0; }
.page-tete-bas .bouton { justify-self: start; }
@media (min-width: 900px) { .page-tete-bas { grid-template-columns: minmax(0, 1fr) auto; } }
.page-vitre { position: relative; margin: clamp(36px, 5vw, 64px) auto 0; width: min(100% - 2 * var(--gouttiere), var(--conteneur)); padding: var(--cadre); background: var(--c-sombre); }
.page-vitre img { width: 100%; height: clamp(260px, 46vw, 560px); object-fit: cover; }
.page-vitre .cote { position: absolute; left: calc(var(--cadre) + 12px); bottom: calc(var(--cadre) + 12px); padding: 6px 9px; background: var(--c-papier); color: var(--c-texte); }

/* Texte + carte de réservation */
.page-grille { display: grid; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (min-width: 980px) { .page-grille { grid-template-columns: minmax(0, 1fr) 340px; } }
.page-seule { max-width: 820px; }
.texte-riche { max-width: 72ch; font-size: 18px; line-height: 1.65; }
.texte-riche h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; max-width: none; margin: 1.7em 0 .55em; }
.texte-riche > h2:first-child { margin-top: 0; }
.texte-riche h3 { font-size: 21px; margin: 1.4em 0 .4em; }
.texte-riche p { margin: 0 0 1em; }
.texte-riche ul, .texte-riche ol { margin: 0 0 1.2em; padding-left: 1.25em; display: grid; gap: .45em; }
.texte-riche li::marker { color: var(--c-accent); font-weight: 700; }
.texte-riche a, .faq .chapeau a { color: var(--c-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.texte-riche a:hover { color: var(--c-accent-fonce); }
.article-retour { font: 500 12px/1 var(--f-cote); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 28px !important; }
.article-retour a { text-decoration: none !important; }
.article-meta { font: 500 12px var(--f-cote); letter-spacing: .06em; text-transform: uppercase; color: var(--c-texte-doux); }

.carte-info { position: sticky; top: 96px; padding: 26px 26px 24px; background: var(--c-papier); border: 1px solid var(--c-texte); box-shadow: 10px 10px 0 var(--c-texte); }
.carte-info h2 { font-size: 26px; margin: 8px 0 14px; }
.carte-info ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 0; font-size: 16px; }
.carte-info li { padding: 9px 0; border-bottom: 1px dashed var(--c-trait-fort); }
.carte-info ul a { font-weight: 600; }
.carte-info ul a:hover { color: var(--c-accent); }
.carte-info .bouton { width: 100%; justify-content: space-between; }

/* Cartes de liens (articles, pages, 404) */
.cartes-liens { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; margin-top: 36px; border-top: 1px solid var(--c-texte); border-left: 1px solid var(--c-trait-fort); }
.carte-lien { display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; background: var(--c-papier); border-right: 1px solid var(--c-trait-fort); border-bottom: 1px dashed var(--c-trait-fort); transition: background-color .3s, color .3s; }
.carte-lien > .cote { color: var(--c-accent); }
.carte-lien h3 { font-size: 24px; margin: 0; }
.carte-lien p { margin: 0; color: var(--c-texte-doux); }
.carte-lien .lien-fleche { margin-top: auto; padding-top: 8px; font: 500 13px var(--f-cote); text-transform: uppercase; letter-spacing: .05em; color: var(--c-accent); }
@media (hover: hover) { .carte-lien:hover { background: var(--c-sombre); color: var(--c-sombre-texte); } .carte-lien:hover p { color: inherit; opacity: .75; } }

/* Tarifs */
.tarifs { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--c-texte); }
.tarifs > div { padding: 18px 14px 20px 0; border-bottom: 1px dashed var(--c-trait-fort); }
.tarifs > div + div { padding-left: 16px; border-left: 1px dashed var(--c-trait-fort); }
.tarifs dt { font: 500 11px var(--f-cote); text-transform: uppercase; letter-spacing: .08em; color: var(--c-texte-doux); margin-bottom: 4px; }
.tarifs dd { margin: 0; font: 700 clamp(44px, 6vw, 84px)/1 var(--f-titre); letter-spacing: -.05em; }
.tarifs dd small { font: 500 14px var(--f-texte); letter-spacing: 0; color: var(--c-texte-doux); }
.tarifs-note { margin: 16px 0 0; font-size: 15px; color: var(--c-texte-doux); }
.section-tarifs .entete-section { margin-bottom: 32px; }

/* Liste à deux colonnes avec cotes (pièces du chalet, attraits) */
.liste-cotes { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--c-texte); }
@media (min-width: 820px) { .liste-cotes { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.liste-cotes li { display: grid; grid-template-columns: 70px 1fr; gap: 4px 14px; padding: 20px 0; border-bottom: 1px dashed var(--c-trait-fort); }
.liste-cotes .cote { grid-row: span 2; color: var(--c-accent); padding-top: 4px; }
.liste-cotes h3 { margin: 0; }
.liste-cotes p { margin: 0; color: var(--c-texte-doux); font-size: 16px; }

/* Photos des environs : mosaïque de l'accueil */
/* Téléphone : rangée qu'on fait glisser; ordinateur : mosaïque (grande photo + 4) */
.environs-mosaique { display: flex; gap: 10px; margin: 0 calc(-1 * var(--gouttiere)) 20px; padding-inline: var(--gouttiere); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere); scrollbar-width: none; }
.environs-mosaique::-webkit-scrollbar { display: none; }
.environs-mosaique > * { flex: 0 0 78%; height: 240px; scroll-snap-align: start; }
@media (min-width: 900px) {
  .environs-mosaique { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .environs-mosaique > * { height: auto; }
  .environs-mosaique > :first-child { grid-column: span 2; grid-row: span 2; }
}
.environs-photo { position: relative; margin: 0; border: 1px solid var(--c-texte); }
.environs-photo .cote, .attrait-photo .cote { position: absolute; left: 0; bottom: 0; max-width: 100%; padding: 6px 9px; background: var(--c-papier); font-size: 10px; }
.environs-photo .cote small { display: block; margin-top: 2px; font-size: 9px; text-transform: none; color: var(--c-texte-doux); }

/* Attraits des environs, avec photo */
.attraits { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(32px, 4vw, 48px) 24px; }
@media (min-width: 680px) { .attraits { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .attraits { grid-template-columns: repeat(3, 1fr); } }
.attrait { display: grid; align-content: start; gap: 6px; min-width: 0; }
.attrait-photo { position: relative; margin: 0 0 12px; aspect-ratio: 4 / 3; border: 1px solid var(--c-texte); }
.attrait > .cote { color: var(--c-accent); }
.attrait h3 { margin: 0; }
.attrait p { margin: 0; color: var(--c-texte-doux); font-size: 16px; }
@media (hover: hover) {
  .environs-photo img, .attrait-photo img { transition: scale .8s var(--courbe); }
  .environs-photo:hover img, .attrait:hover .attrait-photo img { scale: 1.05; }
}

/* Votre hôte (accueil, section tarifs) */
.hote--clair { margin-top: clamp(32px, 4vw, 48px); border-color: var(--c-texte); background: var(--c-papier); }
.hote--clair .hote-texte { margin: 0; max-width: 64ch; color: var(--c-texte-doux); overflow-wrap: anywhere; }
.hote--clair .hote-texte a { color: var(--c-texte); font-weight: 600; border-bottom: 1px solid currentColor; }
.hote--clair .hote-texte a:hover { color: var(--c-accent); }
.hote--clair .hote-texte a[href^="tel"] { white-space: nowrap; }

/* Bande d'appel en bas des sous-pages */
.page-appel { display: grid; gap: 32px; align-items: end; }
@media (min-width: 900px) { .page-appel { grid-template-columns: minmax(0, 1fr) auto; } }
.page-appel h2 { max-width: 18ch; }
.page-appel-actions { display: grid; gap: 14px; justify-items: start; }
.page-appel-tel { font: 500 15px var(--f-cote); letter-spacing: .04em; border-bottom: 1px solid currentColor; }
.page-appel-tel:hover { color: var(--c-accent); }

/* Page réservation : formulaire en grand */
.resa--page { margin-top: 0; }
.resa-page-grille { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (min-width: 980px) { .resa-page-grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.etapes-apres { list-style: none; counter-reset: e; margin: 0; padding: 0; border-top: 1px solid var(--c-texte); }
.etapes-apres li { counter-increment: e; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px dashed var(--c-trait-fort); font-size: 16px; }
.etapes-apres li::before { content: "0" counter(e); font: 500 12px var(--f-cote); color: var(--c-accent); padding-top: 4px; }

/* 404 */
.page-404 h1 { max-width: 12ch; }
.resa.resa--page { display: block; margin-top: 0; animation: none; box-shadow: 10px 10px 0 var(--c-accent); }
.resa.resa--page .resa-tete { flex-direction: row; margin-bottom: 10px; }
.resa.resa--page .resa-actions { margin-top: 18px; }
.pied-bas a { text-transform: none; }
.pied-bas a:hover { color: #6fa6dc; }
.lien-texte { color: var(--c-accent); font-weight: 600; border-bottom: 1px solid currentColor; }
.lien-texte:hover { color: var(--c-accent-fonce); }
.final-faits a:hover { color: var(--c-accent); }