/* ==========================================================================
   Kanoa Lodge — feuille de base
   La mise en page vient de css/layout.css, généré depuis la maquette validée.
   Ici : la charte, les règles imposées par MCD Builder, et le repli sans JS.
   ========================================================================== */

:root {
  --kn-creme:        #FBF0C8;
  --kn-olive:        #454728;
  --kn-terracotta:   #A44A2B;
  --kn-sable:        #EBB36E;
  --kn-olive-clair:  #6E7046;
  --kn-olive-fonce:  #2B2C18;
  --kn-or:           #9D7D2A;
  --kn-olive-nuit:   #1E2010;
  --kn-police-titre: 'Bricolage Grotesque', Georgia, serif;
  --kn-police-texte: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --kn-ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--kn-creme);
  color: var(--kn-olive);
  font-family: var(--kn-police-texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
main { display: block; }
a { color: var(--kn-terracotta); text-decoration: none; }
a:hover { color: var(--kn-olive); }
button { font-family: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--kn-terracotta);
  outline-offset: 3px;
}

/* Imposé par MCD Builder (§6) : sans height:auto, WP Rocket étire les logos. */
img { display: block; max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Sans JavaScript : rien d'essentiel ne reste masqué (§8, §13)
   -------------------------------------------------------------------------- */
.no-js [data-overlay] { display: none; }
.no-js [data-svc-copy],
.no-js [data-faq-body] { max-height: none !important; opacity: 1 !important; overflow: visible !important; }
.no-js [data-hero-shot]:not([data-i="0"]) { display: none; }
.no-js [data-hero-shot][data-i="0"],
.no-js [data-svc-img][data-i="0"],
.no-js [data-bg]:first-of-type,
.no-js [data-layer] { opacity: 1 !important; }
.no-js [data-lightbox] { display: none; }

/* Les états de départ d'animation ne s'appliquent que si le JS tourne (§8). */
.js [data-words] > span { opacity: 0; transform: translateY(.4em); will-change: opacity, transform; }

/* Le titre du hero est une exception : la spec §9 interdit d'y partir d'une
   opacité nulle, Google retardant alors la mesure du plus grand affichage.
   Les mots montent donc derrière un cache, sans jamais changer d'opacité. */
.js [data-hero-in][data-words] > span { opacity: 1; transform: none; }
/* Le cache est posé mot par mot, et non sur le titre entier : sur deux ou
   trois lignes, un cache unique ne masque que la dernière ligne. */
.js [data-hero-in][data-words] > span[data-cache] {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.js [data-hero-in][data-words] span[data-mot] { opacity: 1; transform: translateY(140%); }
/* 125 % et non 100 % : le cache descend de .12em sous la ligne pour laisser
   passer les jambages, et le haut des lettres dépassait de ces quelques
   pixels avant l'entrée. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-words] > span,
  .js [data-hero-in][data-words] span[data-mot] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Formulaire : états ajoutés par Contact Form 7
   -------------------------------------------------------------------------- */
.kn-consent { display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.5; color: rgba(251, 240, 200, .8); margin: 4px 0 18px; }
.kn-consent a { color: var(--kn-sable); }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-not-valid { border-color: #b3261e; }
.wpcf7-not-valid-tip { color: #e0796c; font-size: .85em; margin-top: .25em; display: block; }
.wpcf7-response-output { margin: 1em 0 0; padding: .75em 1em; border-radius: 10px; font-size: 13px; }
.wpcf7-form.sent .wpcf7-response-output { background: rgba(235, 179, 110, .15); color: var(--kn-sable); }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output { background: rgba(179, 38, 30, .15); color: #e0796c; }
.wpcf7-spinner { margin-left: .5em; }
.wpcf7-acceptance .wpcf7-list-item { margin: 0; }
/* CF7 enveloppe le formulaire dans un <div class="wpcf7"> : c'est cette
   enveloppe, et non le <form>, qui devient l'élément souple de la rangée.
   Elle reprend donc la base du formulaire de la maquette (flex: 1 1 420px). */
#formulaire .wpcf7 { flex: 1 1 420px; min-width: 0; }
/* CF7 enveloppe chaque champ dans un <span> : l'input n'est plus l'enfant
   étiré du <label>, il revient à sa largeur propre (size="40", cols="40") et
   débordait de sa colonne de 43 px. On lui rend la largeur de son enveloppe. */
#formulaire .wpcf7-form-control-wrap > input,
#formulaire .wpcf7-form-control-wrap > select,
#formulaire .wpcf7-form-control-wrap > textarea { width: 100%; }
/* La zone de réponse est posée dans la rangée du bas, à la place du témoin de
   la maquette : ni marge, ni la bordure bleue que CF7 lui donne. */
#formulaire .wpcf7-response-output { margin: 0; border: 0; padding: .75em 1em; }

/* --------------------------------------------------------------------------
   Pages légales et modèle d'article
   -------------------------------------------------------------------------- */
.kn-legal { max-width: 820px; margin-inline: auto;
  padding: clamp(130px, 20vh, 200px) clamp(20px, 5vw, 72px) clamp(60px, 10vh, 120px); }
.kn-legal h1 { font-family: var(--kn-police-titre); font-weight: 400;
  font-size: clamp(26px, 3.8vw, 58px); line-height: 1; letter-spacing: -.03em;
  margin-bottom: clamp(24px, 4vh, 44px); }
.kn-legal h2 { font-family: var(--kn-police-titre); font-weight: 400;
  font-size: clamp(19px, 2.2vw, 30px); line-height: 1.1; margin: clamp(28px, 4vh, 44px) 0 10px; }
.kn-legal p, .kn-legal li { font-size: clamp(14.5px, 1.25vw, 17px); line-height: 1.6; margin: 0 0 10px; }
.kn-legal ul { margin: 0 0 14px; padding-left: 20px; }

.kn-article-grid { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); max-width: 1280px; margin-inline: auto;
  padding: 0 clamp(20px, 5vw, 72px) clamp(60px, 10vh, 120px); }
@media (min-width: 1000px) { .kn-article-grid { grid-template-columns: minmax(0, 1fr) 260px; } }
.kn-toc { align-self: start; position: sticky; top: 100px; }
.kn-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kn-toc a { font-size: 13.5px; line-height: 1.45; color: var(--kn-olive-clair); }
.article-body > * + * { margin-top: 1em; }

/* --------------------------------------------------------------------------
   Sélecteur de langue (spec §11 bis)
   Mêmes dimensions que les boutons de la maquette ; l'état actif suit
   aria-current, pour qu'il change bien entre /fr et /en.
   -------------------------------------------------------------------------- */
.lang-switcher { display: flex; align-items: center; gap: 2px; }
/* Les libellés ne se laissent jamais écraser : sans cela, dans une rangée
   trop étroite, les liens tombaient à quelques pixels et il ne restait que
   le fond gris de la pastille. */
.lang-switcher .kn-lang, .kn-lang-menu .kn-lang { flex: 0 0 auto; }
.kn-lang {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 13px; border: 0; border-radius: 999px;
  background: transparent; color: var(--kn-olive);
  font-size: 11px; letter-spacing: .12em; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background .35s, color .35s;
}
.kn-lang:hover { background: rgba(69, 71, 40, .15); color: var(--kn-olive); }
.kn-lang[aria-current="true"] { background: var(--kn-olive); color: var(--kn-creme); }
.kn-lang[aria-current="true"]:hover { background: var(--kn-olive); color: var(--kn-creme); }

/* --------------------------------------------------------------------------
   Animations nommées de la maquette (bandeau défilant, etc.)
   -------------------------------------------------------------------------- */
@keyframes kn-spin{to{transform:rotate(360deg)}}
@keyframes kn-hint{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(9px);opacity:1}}
@keyframes cta-marq{to{transform:translateX(-50%)}}
@keyframes kn-blob{0%,100%{border-radius:58% 42% 47% 53%/43% 51% 49% 57%}33%{border-radius:44% 56% 62% 38%/55% 42% 58% 45%}66%{border-radius:51% 49% 38% 62%/60% 56% 44% 40%}}

/* --------------------------------------------------------------------------
   Menu plein écran : survol des liens
   La teinte est celle de la charte (terracotta), comme les autres liens.
   -------------------------------------------------------------------------- */
[data-overlay] [data-item],
[data-overlay] .kn-sub-link,
[data-overlay] a[href] {
  transition: color .3s var(--kn-ease), opacity .3s var(--kn-ease);
}
[data-overlay] [data-item]:hover,
[data-overlay] [data-item]:focus-visible,
[data-overlay] a[href]:hover,
[data-overlay] a[href]:focus-visible {
  color: var(--kn-terracotta);
}
[data-overlay] [data-chev] { display: inline-block; transition: transform .3s var(--kn-ease); }
[data-overlay] [data-item]:hover [data-chev] { transform: translateX(6px); }
.no-js [data-fill] { color: var(--kn-olive); -webkit-text-fill-color: currentColor; }

/* --------------------------------------------------------------------------
   Titres que l'export laissait sans animation : même apparition que les
   autres blocs révélés de la maquette. Visible sans JS (--in vaut 1).
   -------------------------------------------------------------------------- */
[data-reveal-auto] {
  opacity: var(--in, 1);
  transform: translateY(calc((1 - var(--in, 1)) * 16px));
  transition: opacity .6s var(--kn-ease), transform .7s var(--kn-ease);
}

/* --------------------------------------------------------------------------
   Loader de l'accueil
   Son effacement est une animation CSS, pas un geste du JS : si le script
   échoue ou n'est pas chargé, l'écran se retire quand même. Tout est fini
   en 1 s, plafond imposé par la spec §9.
   -------------------------------------------------------------------------- */
[data-loader] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 26px;
  background: var(--kn-olive);
  animation: kn-loader-sortie .55s var(--kn-ease) .45s forwards;
}
.no-js [data-loader] { display: none; }

[data-loader] img {
  width: clamp(116px, 17vw, 178px);
  height: auto;
}

/* la barre de progression : un trait sable qui se remplit en 0,45 s */
[data-loader] [data-loader-bar] {
  display: block;
  width: min(190px, 38vw);
  height: 2px;
  overflow: hidden;
  background: rgba(251, 240, 200, .2);
}
[data-loader] [data-loader-bar] > span {
  display: block;
  height: 100%;
  background: var(--kn-sable);
  transform: scaleX(0);
  transform-origin: left center;
  animation: kn-loader-barre .45s linear forwards;
}

@keyframes kn-loader-marque { to { opacity: 1; } }
@keyframes kn-loader-barre  { to { transform: scaleX(1); } }
@keyframes kn-loader-sortie {
  to { transform: translateY(-101%); visibility: hidden; }
}

/* Mouvement réduit : l'écran passe sans s'attarder. */
@media (prefers-reduced-motion: reduce) {
  [data-loader] { animation-delay: 0s !important; }
  [data-loader] img { opacity: 1; }
  [data-loader] [data-loader-bar] { display: none; }
}

/* --------------------------------------------------------------------------
   Sélecteur de langue du menu plein écran
   Le menu n'en avait aucun : sur mobile, où c'est le seul menu, on ne pouvait
   plus changer de langue. Même mécanique que celui de l'entête (des liens,
   l'état actif porté par aria-current), habillage adapté au menu.
   -------------------------------------------------------------------------- */
.kn-lang-menu {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 18px;
  padding: 0 4px;
  height: 40px;
  border-radius: 999px;
  background: rgba(69, 71, 40, .08);
  font-size: 11px;
  letter-spacing: .12em;
}
.kn-lang-menu .kn-lang {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--kn-olive-clair);
  text-decoration: none;
  transition: background .3s var(--kn-ease), color .3s var(--kn-ease);
}
.kn-lang-menu .kn-lang[aria-current="true"] {
  background: var(--kn-olive);
  color: var(--kn-creme);
}

/* --------------------------------------------------------------------------
   Fenêtre de réservation
   Elle est `hidden` dans le HTML : sans JS elle n'apparaît jamais, et les
   boutons « Réserver » continuent de mener au formulaire de contact.
   -------------------------------------------------------------------------- */
.kn-resa[hidden] { display: none; }
.kn-resa {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
}
.kn-resa-fond {
  position: absolute;
  inset: 0;
  background: rgba(30, 32, 16, .55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .4s var(--kn-ease);
}
.kn-resa[data-ouvert] .kn-resa-fond { opacity: 1; }

.kn-resa-boite {
  position: relative;
  width: min(740px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: clamp(26px, 4vw, 40px);
  border-radius: clamp(18px, 2.4vw, 26px);
  background: var(--kn-creme);
  box-shadow: 0 30px 80px -40px rgba(69, 71, 40, .8);
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .45s var(--kn-ease), transform .55s var(--kn-ease);
}
.kn-resa[data-ouvert] .kn-resa-boite { opacity: 1; transform: none; }

.kn-resa-fermer {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(69, 71, 40, .08);
  color: var(--kn-olive);
  font-size: 13px;
  cursor: pointer;
  transition: background .3s var(--kn-ease);
}
.kn-resa-fermer:hover { background: rgba(69, 71, 40, .16); }

.kn-resa-sur {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* même ocre que la charte, assombri : sur le crème de la fenêtre, le ton
     d'origine ne donnait qu'un contraste de 3,4 pour un texte de 11 px. */
  color: #80631B;
}
.kn-resa-titre {
  margin: 0 0 22px;
  font-family: var(--kn-police-titre);
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--kn-olive);
}

.kn-resa-form { display: grid; gap: 14px; }
/* Emplacement du calendrier : le code court viendra s'y substituer. */
.kn-resa-cal { display: block; }
.kn-resa-champ { display: grid; gap: 6px; }
.kn-resa-champ > span {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kn-olive-clair);
}
.kn-resa-champ input,
.kn-resa-champ select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(69, 71, 40, .24);
  border-radius: 12px;
  background: #fff;
  color: var(--kn-olive);
  font-family: var(--kn-police-texte);
  font-size: 15px;
}
.kn-resa-champ input:focus-visible,
.kn-resa-champ select:focus-visible {
  outline: 2px solid var(--kn-terracotta);
  outline-offset: 1px;
}

.kn-resa-envoi {
  margin-top: 6px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--kn-terracotta);
  color: var(--kn-creme);
  font-family: var(--kn-police-texte);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s var(--kn-ease);
}
.kn-resa-envoi:hover { background: #8d3e24; }

.kn-resa-note {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(69, 71, 40, .7);
}

/* Le sélecteur de langue du menu ne doit pas s'étirer sur toute la colonne. */
.kn-lang-menu { align-self: flex-start; }

/* La case de consentement est prévue pour le formulaire de contact, qui est
   sur fond sombre : son texte est crème. Dans la fenêtre de réservation, le
   fond est clair, il faut donc l'encre foncée. */
.kn-resa .kn-consent {
  margin: 0;
  color: rgba(69, 71, 40, .78);
}
.kn-resa .kn-consent a { color: var(--kn-terracotta); }
.kn-resa .kn-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--kn-terracotta);
}
.kn-resa .kn-consent label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Emplacement du calendrier des tarifs
   MCD Builder y place son calendrier, ouvert, au chargement. La hauteur est
   réservée d'avance (420 px, valeur donnée par la spec §12 ter) pour que la
   fenêtre ne sursaute pas quand il arrive.
   -------------------------------------------------------------------------- */
[data-mc-booking-calendar] {
  min-height: 420px;
  margin-bottom: 18px;
  border-radius: clamp(12px, 1.6vw, 18px);
  background: rgba(69, 71, 40, .05);
}

/* --------------------------------------------------------------------------
   La ligne de réservation : arrivée, départ, personnes, bouton
   -------------------------------------------------------------------------- */
.kn-resa-ligne {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: end;
}
/* les deux dates forment un seul bloc : c'est lui qui ouvre le calendrier */
.kn-resa-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  cursor: pointer;
}
/* la date s'affiche en toutes lettres (« 14 juillet ») : il faut la place */
.kn-resa-dates input { min-width: 9ch; cursor: pointer; }
.kn-resa-pax select { min-width: 92px; }
.kn-resa-ligne .kn-resa-pax { min-width: 108px; }
.kn-resa-ligne .kn-resa-envoi {
  margin-top: 0;
  height: 48px;
  padding: 0 26px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Barre de réservation collée en bas (mobile)
   Masquée par défaut : c'est la feuille des écrans étroits qui l'affiche.
   Elle passe sous le menu plein écran (80) et sous la fenêtre (120).
   -------------------------------------------------------------------------- */
.kn-resa-bas { display: none; }
.kn-resa-bas-lien {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 999px;
  background: var(--kn-terracotta);
  color: var(--kn-creme);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .3s var(--kn-ease);
}
.kn-resa-bas-lien:hover { background: #8d3e24; }

/* --------------------------------------------------------------------------
   Guides : la colonne de lecture

   Le corps d'un article est de la prose simple : MCD Builder le vide et y
   pose le texte écrit dans WordPress, qui ne connaît que `h2`, `h3`, `p`,
   `ul` et `table`. Tout ce qui est stylé ici l'est donc par la balise, et
   non par une classe : la mise en page survit à une modification faite dans
   l'éditeur. `kanoa.css` étant chargée AVANT `layout.css`, les règles passent
   par `.article-body` pour l'emporter sur les classes générées.
   -------------------------------------------------------------------------- */
.article-body {
  --kn-lire: clamp(16.5px, 1.2vw, 18.5px);
  --kn-interligne: 1.7;
  color: var(--kn-olive);
}
.article-body > * + * { margin-top: 0; }

.article-body h2 {
  margin: clamp(46px, 6.5vh, 84px) 0 clamp(14px, 2vh, 22px);
  font-family: var(--kn-police-titre); font-weight: 400;
  font-size: clamp(25px, 2.9vw, 38px); line-height: 1.06; letter-spacing: -.03em;
  color: var(--kn-olive); max-width: 24ch;
}
.article-body > h2:first-child { margin-top: 0; }
.article-body h3 {
  margin: clamp(28px, 3.8vh, 42px) 0 10px;
  font-family: var(--kn-police-titre); font-weight: 400;
  font-size: clamp(19px, 1.9vw, 25px); line-height: 1.1; letter-spacing: -.025em;
  color: var(--kn-terracotta);
}
/* Un filet au-dessus de chaque grand titre : sans les sections d'avant, rien
   ne marquait plus la coupure. */
.article-body h2:not(:first-child)::before {
  content: ""; display: block;
  margin-bottom: clamp(26px, 3.6vh, 46px);
  border-top: 1px solid rgba(69, 71, 40, .18);
  width: 100%;
}
.article-body p {
  margin: 0 0 .9em;
  /* Au-delà d'environ 68 signes, l'œil perd la ligne suivante. */
  max-width: 68ch;
  font-size: var(--kn-lire); line-height: var(--kn-interligne);
}
.article-body p:last-child { margin-bottom: 0; }
.article-body a { color: var(--kn-terracotta); text-decoration: underline;
  text-underline-offset: .18em; text-decoration-thickness: 1px; }

.article-body ul, .article-body ol { margin: 0 0 1em; padding: 0; max-width: 68ch; }
.article-body ul { list-style: none; }
.article-body ol { padding-left: 1.2em; }
.article-body li {
  padding: 13px 0; border-top: 1px solid rgba(69, 71, 40, .2);
  font-size: var(--kn-lire); line-height: 1.55;
}
.article-body ol li { border: 0; padding: 4px 0; }
.article-body li:last-child { border-bottom: 1px solid rgba(69, 71, 40, .2); }
.article-body ol li:last-child { border-bottom: 0; }

.article-body figure { margin: clamp(30px, 4.5vh, 54px) 0; }
.article-body figure img {
  display: block; width: 100%; height: auto;
  border-radius: clamp(12px, 1.6vw, 20px);
}
.article-body figcaption { margin-top: 10px; font-size: 13px; color: var(--kn-olive-clair); }
.kn-suite { font-size: var(--kn-lire); }

/* Encadré : il remplace la bande sombre pleine largeur, qui n'a plus de sens
   dans une colonne de 800 px. */
.kn-encadre {
  display: block;
  margin: clamp(34px, 5vh, 62px) 0;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: clamp(14px, 2vw, 22px);
  background: var(--kn-olive); color: var(--kn-creme);
}
.kn-encadre .kn-sur {
  margin: 0 0 12px; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--kn-sable);
}
.kn-encadre h2 {
  margin: 0 0 14px; color: var(--kn-creme); max-width: 20ch;
  font-size: clamp(22px, 2.5vw, 32px);
}
.kn-encadre h2::before { content: none; }
.kn-encadre p { color: rgba(251, 240, 200, .86); }
.kn-encadre p:last-of-type { color: var(--kn-sable); }

/* En-tête de l'article : le chapô y a été ramené, parce que le plugin ne
   cherche le chapeau que dans la section qui porte le `h1`. Posé ailleurs, il
   gardait le texte d'exemple du modèle sur tous les articles. */
.k460 .chapo {
  margin: clamp(24px, 3.4vh, 38px) 0 0;
  max-width: 52ch;
}

/* L'image d'en-tête touchait le premier paragraphe : l'espace venait de la
   section d'intro, qui a disparu avec l'ancien encadré du sommaire. */
.kn-article-grid { padding-top: clamp(40px, 7vh, 80px); }

/* FAQ d'un article. Le composant est dessiné pour une rangée de 1 280 px :
   dans la colonne de lecture, qui en fait 810, ses questions de 36 px
   tombaient sur trois lignes dans une colonne de 380. Tout est ramené à
   l'échelle de la colonne ; la position de la réponse suit la taille du
   numéro, d'où la variable. */
.article-body .k143 {
  --kn-faq-num: clamp(38px, 4.4vw, 62px);
  --kn-faq-ecart: clamp(12px, 2vh, 18px);
  gap: clamp(22px, 3vw, 44px);
}
.article-body .k144 { flex: 1 1 300px; }
.article-body .k150 { flex: 1 1 260px; }
.article-body .k145,
.article-body .k149 { padding: clamp(13px, 2vh, 19px) 0; gap: clamp(10px, 1.4vw, 18px); }
.article-body .k146 { font-size: 11px; }
.article-body .k147,
.article-body .k148 { font-size: clamp(17px, 1.75vw, 22px); line-height: 1.14; }
.article-body .k151 { font-size: var(--kn-faq-num); margin-bottom: var(--kn-faq-ecart); }
.article-body .k152,
.article-body .k153 { font-size: clamp(15.5px, 1.3vw, 17px); line-height: 1.6; max-width: 40ch; }
.article-body .k153 { top: calc(.8 * var(--kn-faq-num) + var(--kn-faq-ecart)); }

/* Bascule jour / nuit : le module pose `aria-pressed`, mais l'état coloré
   tenait sur deux classes figées (k191 pour l'actif, k192 pour l'autre). Le
   bouton « Jour » restait donc allumé en mode nuit. La couleur suit l'état. */
[data-mode-btn][aria-pressed="true"] {
  background: var(--kn-sable);
  color: var(--kn-olive-fonce);
}
[data-mode-btn][aria-pressed="false"] {
  background: transparent;
  color: rgba(251, 240, 200, .8);
}

/* Hauteur du panneau de réponse, sur toutes les FAQ du site.

   Les réponses se superposent en position absolue, et la hauteur du panneau
   tenait sur une hauteur minimale choisie à la main : la réponse la plus
   longue dépassait dès qu'on écrivait un peu plus, ou que la colonne se
   resserrait. Elles sont empilées dans une même cellule de grille — la
   rangée prend la hauteur de la plus grande, à n'importe quelle largeur.
   Le sélecteur passe par `.k143` : `kanoa.css` est chargée avant
   `layout.css` et perdrait sur `.k150` seul. */
.k143 .k150 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}
.k143 .k151 { grid-row: 1; }
.k143 .k152,
.k143 .k153 { grid-row: 2; grid-column: 1; position: static; top: auto; }

/* Sommaire de la colonne de droite. MCD Builder remplit la liste à partir
   des h2 / h3 du texte : la mise en forme doit donc tenir sur `ol` et `li`,
   jamais sur une classe posée à la main. */
.kn-toc {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(69, 71, 40, .22);
  border-radius: clamp(14px, 2vw, 20px);
}
.kn-toc-titre, .kn-toc > p:first-child {
  margin: 0 0 14px; font-weight: 500; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--kn-or);
}
.kn-toc ol ol { margin: 8px 0 0; padding-left: 14px; }
.kn-toc li { margin: 0; }
.kn-toc a { text-decoration: none; transition: color .3s var(--kn-ease); }
.kn-toc a:hover { color: var(--kn-terracotta); }

/* --------------------------------------------------------------------------
   Tableaux des guides
   Ils étaient dessinés avec des <div> en grille : rien n'y disait qu'une
   cellule appartenait à telle colonne, ni qu'une ligne était une ligne.
   Un lecteur d'écran y lisait une suite de mots, et les colonnes s'étaient
   décalées sans que rien ne le signale.
   -------------------------------------------------------------------------- */
.kn-tableau {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  text-align: left;
}
.kn-tableau caption {
  caption-side: bottom;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(69, 71, 40, .16);
  font-size: 13px;
  line-height: 1.55;
  color: rgb(110, 112, 70);
  text-align: left;
}
.kn-tableau th,
.kn-tableau td { padding: 15px 16px; vertical-align: top; }
.kn-tableau thead th {
  background: rgba(69, 71, 40, .08);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(110, 112, 70);
  white-space: nowrap;
}
.kn-tableau tbody tr { border-top: 1px solid rgba(69, 71, 40, .16); }
.kn-tableau tbody th,
.kn-tableau tbody td {
  font-weight: 400;
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  line-height: 1.45;
}
.kn-tableau tbody th { color: rgb(69, 71, 40); }
.kn-tableau tbody td { color: rgb(110, 112, 70); }
.kn-tableau td[data-col="Prestataire"],
.kn-tableau td[data-col="Prix"],
.kn-tableau td[data-col="Prix indicatif"] { color: rgb(164, 74, 43); }