/* ==========================================================================
   Kanoa Lodge — adaptation aux écrans étroits

   La maquette a été exportée depuis un rendu à une seule largeur de bureau :
   les 548 classes de `layout.css` portent donc des valeurs figées, sans la
   moindre media query. Cette feuille ne corrige que ce qui casse réellement
   sous 700 px, et ne touche jamais au rendu bureau validé.

   Elle est chargée APRÈS `layout.css` : c'est ce qui lui permet de reprendre
   la main sur une classe générée à spécificité égale. C'est aussi pour cette
   raison qu'elle porte les quelques corrections valables à toute largeur,
   regroupées juste en dessous.
   ========================================================================== */

/* Colonnes de prestations à largeur égale.
   L'export donnait `flex: 2.4` à la première, « Le matin », qui ressortait
   donc nettement plus large que les trois autres sans raison apparente. */
[data-svc] { flex: 1 1 0; }


/* --------------------------------------------------------------------------
   Course de la piste horizontale « Autour du lodge »
   La hauteur de la section épinglée fixe la vitesse : plus elle est courte,
   moins il faut défiler pour parcourir les mêmes cartes. 420vh → 360vh, soit
   un cinquième de défilement en moins pour la même distance.
   Posé ici et non dans layout.css, qui est régénéré à chaque build.
   -------------------------------------------------------------------------- */
#autour [data-track] { height: 360vh; }

/* Grille des guides. Tant qu'un seul guide reste dans la grille — l'autre
   est à la une — la carte occupait un quart de rangée et flottait toute
   seule à gauche. Elle prend deux colonnes dans ce cas : une demi-rangée,
   taille de carte normale. Dès qu'il y a d'autres articles, la règle ne
   s'applique plus et la grille reprend son comportement d'origine. */
#guides .k404 > a:only-child { grid-column: span 2; }

@media (max-width: 700px) {

  /* ---------------------------------------------------------------- entête
     Le groupe de droite (langues + « Réserver ») sortait de l'écran de près
     de 90 px : rien ne pouvait rétrécir. On retire les deux libellés qui font
     doublon — le bouton garde son `aria-label`, le logo son `alt` — et on
     resserre les pastilles. Aucun élément n'est supprimé du HTML : l'entête
     reste identique sur toutes les pages, comme l'impose la spec §3. */
  header nav {
    gap: 8px;
    padding: 6px 8px;
  }
  header [data-menu-label] { display: none; }
  header [data-menu-open] {
    gap: 0;
    height: 38px;
    padding: 0 13px;
  }
  header nav > a > span { display: none; }   /* la baseline sous le logo */
  header .lang-switcher { height: 38px; }
  /* Le bouton de réservation quitte l'entête : il est repris par la barre
     collée en bas, sous le pouce. Cela rend aussi sa place au sélecteur de
     langue, qui était à l'étroit. */
  header [data-head-book] { display: none; }

  .kn-resa-bas {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    padding: 10px 14px;
    /* la barre gestuelle des téléphones récents ne doit pas recouvrir le bouton */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(251, 240, 200, .9);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(69, 71, 40, .14);
  }
  /* le pied de page ne doit pas finir caché derrière la barre */
  body { padding-bottom: 76px; }

  /* --------------------------------------------------------------- galerie
     Quatre colonnes donnaient des vignettes de 75 px. */
  [data-gallery-grid] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(120px, 34vw, 170px);
  }

  /* -------------------------------------------------------------- tableaux
     Ces grilles ont un `min-width` de 480 à 820 px : sur mobile elles
     imposaient un défilement horizontal à l'intérieur de leur cadre. On les
     relit en lignes, chaque cellule précédée de son intitulé de colonne
     (recopié au build dans `data-col`). */
  [data-table] { overflow-x: visible; }
  [data-table-head] { display: none; }
  [data-table-row] {
    display: block;
    min-width: 0;
    padding: 6px 0;
  }
  [data-table-row] > * { display: block; }
  [data-table-row] > [data-col]::before {
    content: attr(data-col);
    display: block;
    margin-bottom: 1px;
    font-family: var(--kn-police-titre);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kn-olive-clair);
  }


  /* ----------------------------------------------- colonnes de prestations
     Quatre colonnes de 130 px sur un écran de 390. La première est plus large
     que les autres en bureau (flex 2.4) : on remet tout le monde à égalité
     pour obtenir deux colonnes par ligne. */
  [data-svc] {
    flex: 1 1 calc(50% - 7px);
    min-width: 0;
  }

  /* --------------------------------------------------------------- sentier
     Le tracé passe en `preserveAspectRatio="none"` (posé par le JS) pour
     occuper toute la hauteur de sa boîte et descendre du haut vers le bas. */
  [data-trail-slice] { width: 100%; height: 100%; }

  /* -------------------------------------------- sélecteur de langue du menu */
  .kn-lang-menu { margin-top: 14px; }

  /* ---------------------------------------------- fenêtre de réservation
     Sur mobile elle occupe l'écran : plus confortable qu'une petite boîte. */
  .kn-resa { padding: 0; }
  .kn-resa-boite {
    width: 100%;
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0;
    padding: 64px 22px 32px;
  }
  /* un mois sous l'autre, et la ligne de réservation en deux rangs :
     quatre contrôles côte à côte sont inutilisables sur 390 px. */
  .kn-resa-ligne { grid-template-columns: 1fr; }
  .kn-resa-ligne .kn-resa-envoi { height: 52px; }
  /* le calendrier du plugin est plus haut en colonne unique */
  [data-mc-booking-calendar] { min-height: 460px; }
}

/* Écrans étroits : l'entête a besoin de 351 px pour tenir tel quel. En
   dessous, le groupe de droite débordait et la pastille des langues se
   retrouvait rognée — il n'en restait que le fond gris. Deux paliers, le
   second pour le zoom d'affichage d'iOS, qui ramène un écran de 390 à 320. */
@media (max-width: 380px) {
  header nav { gap: 6px; }
  header [data-menu-open] { padding: 0 11px; }
  header .kn-lang { padding: 0 9px; }
  header [data-head-book] { padding: 0 10px; letter-spacing: .08em; }
}

@media (max-width: 330px) {
  header nav { gap: 5px; padding: 6px 6px; }
  header [data-menu-open] { padding: 0 9px; }
  header .kn-lang { padding: 0 7px; letter-spacing: .06em; }
  header [data-head-book] { padding: 0 9px; font-size: 10px; letter-spacing: .04em; }
}

/* Sous 300 px (Galaxy Fold replié, zoom d'affichage poussé), la pastille des
   langues et le bouton de réservation ne tiennent plus ensemble. On garde le
   bouton dans l'entête et on s'appuie sur le menu plein écran, où le
   sélecteur de langue reste parfaitement lisible. L'exigence §11 bis est
   respectée : chaque page garde bien son sélecteur, accessible en un geste. */
/* (La règle qui effaçait le sélecteur de langue sous 300 px a été retirée :
   le bouton de réservation ayant quitté l'entête, la place ne manque plus.) */

/* --------------------------------------------------------------------------
   Guides : le tableau passe en liste sous 700 px

   Six colonnes derrière une barre de défilement horizontale, sur un
   téléphone, ne se lisent pas : on ne voit jamais l'en-tête et la ligne en
   même temps. Chaque ligne devient donc un bloc, et chaque cellule porte le
   nom de sa colonne (`data-col`, posé au moment de la conversion).
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .kn-tableau thead,
  .kn-tableau tbody,
  .kn-tableau tr,
  .kn-tableau th,
  .kn-tableau td { display: block; }
  /* En colonne : hors du mode tableau, `caption-side` ne joue plus et la
     légende repasserait en tête, sur une colonne large d'un mot. */
  .kn-tableau { display: flex; flex-direction: column; min-width: 0; }
  .kn-tableau tbody { order: 0; }
  .kn-tableau caption { order: 1; width: auto; }
  .kn-tableau thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .kn-tableau tbody tr { padding: 8px 0 16px; }
  .kn-tableau tbody th {
    padding: 10px 16px 8px;
    font-size: 17.5px;
    letter-spacing: -.01em;
  }
  .kn-tableau tbody td {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 16px;
  }
  .kn-tableau tbody td::before {
    content: attr(data-col);
    flex: 0 0 auto;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgb(110, 112, 70);
  }
  .kn-tableau caption { padding: 14px 16px 0; }
}

/* --------------------------------------------------------------------------
   Guides : le sommaire passe au-dessus du texte sous 1 000 px

   La grille de l'article tombe à une colonne : laissé après le corps, le
   sommaire n'arrivait qu'une fois l'article lu, c'est-à-dire jamais.
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
  .kn-article-grid { display: flex; flex-direction: column; }
  .kn-toc { order: -1; position: static; }
  .kn-toc ol { gap: 10px; }
}

/* ==========================================================================
   Ajouts de la reconstruction du 2026-11-05 (voir _outils/build.py)
   ========================================================================== */

/* Le titre de la fenêtre de réservation est devenu un <p> (il précédait le <h1>
   de chaque page) : il garde la graisse qu'il avait en <h2>. */
.kn-resa-titre { font-weight: 700; }

/* --------------------------------------------------------------------------
   Sans JavaScript (§8, §13) : ce que pilotait le défilement reste lisible.
   -------------------------------------------------------------------------- */
/* Diaporama des chambres : sans --p calculé, la première vignette et sa
   légende s'affichent, au lieu d'une petite image sans texte. */
.no-js #chambres > [data-track] { --p: .3 !important; }
/* Piste « Autour du lodge » : elle ne coulisse plus, elle défile au doigt. */
.no-js #autour [data-track] { height: auto !important; }
.no-js [data-autour-pin] { position: static !important; height: auto !important; overflow-x: auto; }
.no-js [data-rail] { transform: none !important; }
/* FAQ : toutes les réponses à la suite, au lieu de la seule première
   (elles sont superposées dans une même case de grille, sous un bloc collant). */
.no-js :has(> [data-a]) { position: static !important; }
.no-js [data-a] { position: static !important; grid-area: auto !important; opacity: 1 !important;
  transform: none !important; pointer-events: auto !important; margin-bottom: 1.2em; }
.no-js [data-num] { display: none; }


/* Comparateur jour / nuit (galerie) : à la souris, le clic partait sur l'image,
   que le navigateur se mettait à « glisser » comme un fichier ; le geste était
   annulé et le curseur ne suivait plus. Les images ne captent plus le pointeur,
   et le défilement vertical reste possible au doigt. */
[data-compare] { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
[data-compare] img { pointer-events: none; -webkit-user-drag: none; }

/* --------------------------------------------------------------------------
   Liens de suite entre les pages (« Voir les chambres → »)
   Discrets, dans le ton des surtitres : terracotta sur fond clair, sable sur
   fond sombre. Un paragraphe à part, pour que le client puisse le modifier.
   -------------------------------------------------------------------------- */
.kn-suite-page { flex: 1 1 100%; margin: clamp(20px, 3vh, 32px) 0 0; }
.kn-suite-page a {
  display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 5px; border-bottom: 1px solid currentColor;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.3;
  color: var(--kn-terracotta);
  transition: gap .35s var(--kn-ease), color .35s var(--kn-ease);
}
.kn-suite-page a:hover { gap: 16px; color: var(--kn-olive); }
.kn-suite-page--clair a { color: var(--kn-sable); }
.kn-suite-page--clair a:hover { color: var(--kn-creme); }

/* Guides : encart « partenaires à venir » et lignes qui l'annoncent. */
.article-body .kn-a-venir {
  max-width: 68ch; margin: clamp(24px, 3.5vh, 36px) 0;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.8vw, 30px);
  border-left: 3px solid var(--kn-terracotta); border-radius: 0 14px 14px 0;
  background: rgba(164, 74, 43, .07);
}
.article-body .kn-bientot { color: var(--kn-olive-clair); font-style: italic; }

/* --------------------------------------------------------------------------
   Mobile : une seule colonne partout (2026-11-05)
   Les blocs en deux ou trois colonnes donnaient des cases de 130 à 170 px de
   large : texte minuscule, images réduites à des vignettes.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Chiffres clés (accueil, chambres, restaurant, piscine, Haapiti) : une ligne
     par chiffre, l'intitulé à gauche, la valeur à droite. */
  .k071, .k181, .k321 { grid-template-columns: 1fr; gap: 0; }
  .k072, .k182, .k322 { display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; padding: 14px 0; }
  .k215 { flex-direction: column; gap: 14px; }

  /* Accueil, « La table » : les quatre moments de la journée l'un sous l'autre,
     et les deux images en pile. */
  [data-svc] { flex: 1 1 100%; }
  .k094 { flex-direction: column; height: auto; }
  .k095, .k096 { flex: none; height: auto; aspect-ratio: 4 / 3; }

  /* Accueil, « Accès » : le texte de chaque étape passe sous son titre. */
  .k136 { flex-basis: 100%; max-width: none; }

  /* Galeries (chambres et page galerie) : une photo par ligne. */
  [data-gallery-grid] { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .k368, .k370 { grid-area: auto; aspect-ratio: 4 / 3; }

  /* Haapiti, comparatif : chaque critère devient un bloc, les deux réponses
     l'une sous l'autre avec leur intitulé (ajouté dans le HTML, masqué en bureau). */
  .k305 { display: none; }
  .k309 { grid-template-columns: 1fr; padding: 10px 0; }
  .k310 { padding: 8px 0 4px; font-size: 1.15em; }
  .k311, .k312 { padding: 10px 14px; }
  .kn-col-mobile { display: block; margin-bottom: 3px; font-size: 10.5px; letter-spacing: .16em;
    text-transform: uppercase; color: rgb(157, 125, 42); }
  .k312 .kn-col-mobile { color: var(--kn-terracotta); }

  /* Lignes « libellé : valeur » (tarifs, horaires, accès, l'essentiel) : la valeur
     passe sous son libellé au lieu de s'écraser dans une demi-colonne. */
  .k223, .k225, .k266, .k420, .k450 { flex-direction: column; align-items: flex-start; gap: 4px; }
  .k224 { order: -1; }   /* chambres : le libellé est écrit après la valeur */
  .k224, .k267, .k421 { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
  .k268, .k422, .k451 { text-align: left; max-width: none; }
}
.kn-col-mobile { display: none; }

/* --------------------------------------------------------------------------
   Barre « Réserver un séjour » collée en bas (mobile)
   Elle s'efface au-dessus du haut de page, des sections animées au défilement
   (diaporama des chambres, piste horizontale) et du bandeau « Réserver » :
   elle y cachait le texte, ou faisait doublon. Le JS pose la classe.
   -------------------------------------------------------------------------- */
.kn-resa-bas { transition: transform .45s var(--kn-ease), opacity .3s var(--kn-ease); }
.kn-resa-bas--cache { transform: translateY(110%); opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------------------
   Bandeau défilant « Réserver un séjour »
   Calque à part (translate3d) pour que le défilement reste fluide sur iPhone,
   et un peu plus rapide sur mobile, où le texte est plus petit.
   -------------------------------------------------------------------------- */
@keyframes kn-marq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
[data-marq] { animation-name: kn-marq !important; will-change: transform; backface-visibility: hidden; }
@media (max-width: 700px) { [data-marq] { animation-duration: 14s !important; } }