/* Le Refuge, « la veillée » : toute la page se passe dans la forêt du soir, jusqu'au coin du feu.
   Contrastes WCAG AA vérifiés (texte crème sur fonds sombres, encre sur parchemin et bois clair).
   Animations lentes, coupées par prefers-reduced-motion ou par le bouton de la barre (classe html.calm). */
:root {
  --forest: #13201a;
  --forest-deep: #0f1914;
  --cream: #f6ecd4;
  --cream-soft: #e9dcc0;
  --ink: #2b1d10;
  --wood: #7a5230;
  --wood-dark: #3f2715;
  --wood-line: #5e3d22;
  --lantern: #ffd27a;
  --leaf: #c9e3a8;
  --green: #3f7d3b;
  --green-hover: #346b33;
  --green-edge: #1c3a1b;
}

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

[hidden] {
  display: none !important;
}

/* Ciel du soir au fil du défilement : le dégradé couvre toute la hauteur du document,
   du crépuscule violet en haut à la nuit bleu profond en bas (les étoiles viennent du canvas). */
html {
  scroll-behavior: auto;
  scroll-padding-top: 4.5rem;
  background: linear-gradient(to bottom, #2e2142 0%, #2a2148 22%, #1f1e40 45%, #151a36 70%, #0b1226 100%) #0b1226;
}

body {
  margin: 0;
  color: var(--cream);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.65;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.75rem;
  letter-spacing: .01em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}

/* Trois petites lanternes sous chaque titre */
h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 6px;
  margin-top: .6rem;
  background: linear-gradient(90deg, var(--lantern) 0 10px, transparent 10px 16px, var(--lantern) 16px 26px, transparent 26px 32px, var(--lantern) 32px 42px);
}

h3 {
  font-size: 1.15rem;
  margin-bottom: .5rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--lantern);
  text-underline-offset: .15em;
}

/* Focus : jaune lanterne sur fond sombre, encre sur fond clair (≥ 3:1 dans les deux cas) */
:focus-visible {
  outline: 3px solid var(--lantern);
  outline-offset: 3px;
}

.parchment :focus-visible,
details :focus-visible,
.door :focus-visible {
  outline-color: var(--ink);
}

/* Lien d'évitement */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip:focus {
  position: fixed;
  left: .75rem;
  top: .75rem;
  z-index: 30;
  padding: .6rem 1rem;
  background: var(--forest-deep);
  color: var(--cream);
  border: 2px solid var(--lantern);
}

/* Boutons façon jeu pixel : coins en escalier, relief en bas */
.btn {
  display: inline-block;
  padding: .85rem 1.6rem;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  border: 0;
  box-shadow:
    0 -3px 0 var(--green-edge),
    0 3px 0 var(--green-edge),
    -3px 0 0 var(--green-edge),
    3px 0 0 var(--green-edge),
    inset 0 -4px 0 rgba(0, 0, 0, .22),
    inset 0 3px 0 rgba(255, 255, 255, .18),
    0 9px 0 rgba(0, 0, 0, .35);
  transition: transform .2s ease, background-color .2s ease;
}

.btn:hover {
  background: var(--green-hover);
  transform: translateY(2px);
}

.btn-small {
  padding: .4rem 1rem;
  font-size: 1rem;
  box-shadow:
    0 -2px 0 var(--green-edge),
    0 2px 0 var(--green-edge),
    -2px 0 0 var(--green-edge),
    2px 0 0 var(--green-edge),
    inset 0 -3px 0 rgba(0, 0, 0, .22);
}

/* Barre du haut */
.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  height: 56px;
  padding: 0 1rem;
  background: rgba(15, 25, 20, .94);
  border-bottom: 3px solid var(--wood-dark);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--cream);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.brand img {
  display: block;
  image-rendering: pixelated;
}

.bar-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 40px;
  min-width: 40px;
  padding: .3rem .7rem;
  font: inherit;
  font-size: .9rem;
  color: var(--cream);
  background: transparent;
  border: 2px solid #a08058;
  cursor: pointer;
}

.motion-toggle:hover {
  border-color: var(--lantern);
}

.motion-toggle[aria-pressed="true"] .motion-icon {
  opacity: .55;
}

.motion-icon {
  flex: none;
  image-rendering: pixelated;
}

/* Canvas plein écran : étoiles et lucioles, derrière le contenu */
.sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ---------- Accueil ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  justify-content: center;
  min-height: calc(100svh - 56px);
  /* l'illustration occupe le bas ; le haut prolonge son ciel */
  padding: 2rem 1.25rem 330px;
  background: linear-gradient(to bottom, #3a2a50 0%, #6a4f80 45%, #946e93 100%);
  color: #fff;
  text-align: center;
}

/* Calque de l'illustration : la scène garde le ratio 1376×768 et reproduit un « cover »
   (unités de conteneur), donc les halos, la fumée et la bulle restent calés sur l'image. */
.hero-bg {
  --sh: 560px;
  --fx: .66;
  position: absolute;
  inset: 0;
  z-index: -1;
  container-type: size;
  overflow: hidden;
}

.scene {
  --w: max(calc(var(--sh) * 1.7917), 100cqw);
  position: absolute;
  bottom: 0;
  left: clamp(calc(100cqw - var(--w)), calc(50cqw - var(--w) * var(--fx)), 0px);
  width: var(--w);
  height: calc(var(--w) * .5581);
  background: url(/img/bg-forest.jpg?v=db86d4fe) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  translate: 0 var(--parallax, 0px);
}

/* Prolonge le ciel de l'illustration au-dessus d'elle (mobile, tablette) */
.scene::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1200px;
  background: linear-gradient(to bottom, #3a2a50, #6a4f80 70%, #946e93);
}

/* Voile sombre derrière le texte : sur mobile et tablette il suit le bloc de texte (quelle que soit sa hauteur),
   sur bureau c'est un dégradé depuis la gauche */
.hero-inner::before {
  content: "";
  position: absolute;
  inset: -2rem -50vw -4.5rem;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(22, 15, 32, .6) 0, rgba(22, 15, 32, .72) 3rem, rgba(22, 15, 32, .72) calc(100% - 4.5rem), rgba(22, 15, 32, 0));
}

/* Buissons au premier plan : transition vers la forêt de la section suivante */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  background: url(/img/bushes.svg?v=db86d4fe) 0 100% / 240px 30px repeat-x;
  image-rendering: pixelated;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: 40rem;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}

.hero h1 {
  font-size: 1.9rem;
}

.lead {
  font-size: 1.15rem;
  margin-bottom: 2rem;
}

.count {
  margin: 1.1rem 0 0;
  font-size: .95rem;
}

.hero .count {
  color: #fff;
}

/* Halos des lanternes et des fenêtres (positions en % de l'illustration) */
.glow {
  position: absolute;
  width: 7%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 220, 130, .6), rgba(255, 170, 70, .2) 55%, rgba(255, 170, 70, 0));
  mix-blend-mode: screen;
  animation: breathe 5.5s ease-in-out infinite alternate;
}

.glow.win {
  width: 9%;
  background: radial-gradient(closest-side, rgba(255, 200, 110, .45), rgba(255, 160, 60, .14) 60%, rgba(255, 160, 60, 0));
  animation-duration: 7s;
}

.g1 { left: 18.9%; top: 36.3%; }
.g2 { left: 6%; top: 63%; animation-delay: -1.5s; }
.g3 { left: 19.4%; top: 58.4%; animation-delay: -3s; }
.g4 { left: 46%; top: 61.8%; animation-delay: -4.2s; }
.g5 { left: 62.9%; top: 59.1%; animation-delay: -2.2s; }
.g6 { left: 90.1%; top: 43.2%; animation-delay: -.8s; }
.g7 { left: 75.3%; top: 52.7%; }
.g8 { left: 84.6%; top: 63.4%; animation-delay: -3.5s; }
.g9 { left: 75.9%; top: 66.3%; animation-delay: -5s; }

@keyframes breathe {
  from { opacity: .55; scale: .9; }
  to { opacity: 1; scale: 1.08; }
}

/* Fumée de la cheminée : carrés pixel qui montent et s'estompent.
   Sans animation, ils restent figés en panache. */
.smoke {
  position: absolute;
  left: 82.6%;
  top: 40%;
  width: .75%;
  aspect-ratio: 1;
  background: #d9cfd6;
  opacity: .5;
  animation: smoke 8s linear infinite;
}

.s1 { translate: 40% -250%; }
.s2 { translate: 120% -520%; opacity: .4; animation-delay: -1.6s; }
.s3 { translate: 60% -800%; opacity: .3; animation-delay: -3.2s; }
.s4 { translate: 200% -1080%; opacity: .2; animation-delay: -4.8s; }
.s5 { translate: 140% -1350%; opacity: .12; animation-delay: -6.4s; }

@keyframes smoke {
  0% { translate: 0 0; scale: .8; opacity: 0; }
  12% { opacity: .6; }
  50% { translate: 150% -700%; scale: 1.3; }
  100% { translate: 60% -1500%; scale: 1.9; opacity: 0; }
}

/* Lucioles de l'accueil */
.fly {
  position: absolute;
  width: .35%;
  aspect-ratio: 1;
  background: #fff3a6;
  box-shadow: 0 0 6px 3px rgba(230, 255, 140, .55);
  opacity: .8;
  animation: drift 11s ease-in-out infinite alternate, glimmer 4s ease-in-out infinite alternate;
}

.f1 { left: 10%; top: 72%; }
.f2 { left: 30%; top: 66%; animation-duration: 13s, 5s; animation-delay: -4s, -1s; }
.f3 { left: 52%; top: 74%; animation-duration: 9s, 4.5s; animation-delay: -2s, -2s; }
.f4 { left: 70%; top: 70%; animation-duration: 12s, 3.8s; animation-delay: -6s, -.5s; }
.f5 { left: 93%; top: 68%; animation-duration: 14s, 5.5s; animation-delay: -1s, -3s; }
.f6 { left: 40%; top: 50%; animation-duration: 15s, 4.2s; animation-delay: -8s, -1.5s; }

@keyframes drift {
  0% { translate: 0 0; }
  33% { translate: 400% -350%; }
  66% { translate: -250% -600%; }
  100% { translate: 300% -150%; }
}

@keyframes glimmer {
  from { opacity: .25; }
  to { opacity: .95; }
}

/* Bulle de Ficus (pixel art : coins en escalier, petite queue vers sa tête) */
.bubble {
  position: absolute;
  left: 62.8%;
  top: 60.5%;
  margin: 0;
  padding: .45rem .8rem;
  translate: -18% calc(-100% - 18px);
  white-space: nowrap;
  font-size: clamp(.85rem, 1.05vw, 1.05rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
  background: #fffaf0;
  text-shadow: none;
  box-shadow:
    0 -3px 0 var(--ink),
    0 3px 0 var(--ink),
    -3px 0 0 var(--ink),
    3px 0 0 var(--ink);
  animation: pop .7s 1.2s both, bob 4.5s 2s ease-in-out infinite alternate;
}

/* queue en escalier : deux marches qui se resserrent vers la tête */
.bubble::before,
.bubble::after {
  content: "";
  position: absolute;
  background: #fffaf0;
}

.bubble::before {
  left: 14px;
  top: 100%;
  width: 15px;
  height: 6px;
  box-shadow: -3px 0 0 var(--ink), 3px 0 0 var(--ink);
}

.bubble::after {
  left: 17px;
  top: calc(100% + 6px);
  width: 6px;
  height: 6px;
  box-shadow: -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink);
}

@keyframes pop {
  from { opacity: 0; scale: .6; }
  to { opacity: 1; scale: 1; }
}

@keyframes bob {
  from { margin-top: 0; }
  to { margin-top: -6px; }
}

/* ---------- Sections ---------- */
.section {
  position: relative;
  padding: 3.5rem 1.25rem;
}

.section > * {
  max-width: 42rem;
  margin-inline: auto;
}

/* Sous-bois : vert très sombre et chaud, lueurs de lanternes */
.forest {
  background:
    radial-gradient(ellipse 40% 35% at 6% 22%, rgba(255, 190, 90, .09), transparent),
    radial-gradient(ellipse 40% 35% at 94% 30%, rgba(255, 190, 90, .08), transparent),
    linear-gradient(90deg, transparent 2%, #182a20 2% calc(2% + 28px), transparent 0) 0 0 / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 13%, #16261d 13% calc(13% + 20px), transparent 0) 0 0 / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 84%, #16261d 84% calc(84% + 20px), transparent 0) 0 0 / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 95%, #182a20 95% calc(95% + 28px), transparent 0) 0 0 / 100% 100% no-repeat,
    var(--forest);
}

/* Lisière d'arbres qui monte depuis la clairière précédente */
.forest::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 120px;
  max-width: none;
  background: url(/img/treeline.svg?v=db86d4fe) 0 100% / 384px 120px repeat-x;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Juste après l'accueil, ce sont les buissons de l'illustration qui font la transition */
.hero + .forest::before {
  display: none;
}

/* Lanternes suspendues dans le sous-bois (grands écrans) */
.deco-lantern {
  display: none;
  position: absolute;
  top: 6rem;
  width: 30px;
  height: 36px;
  background: url(/img/lantern.svg?v=db86d4fe) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  transform-origin: 50% -3rem;
  animation: swing 6s ease-in-out infinite alternate;
}

.deco-lantern::before {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 100%;
  width: 2px;
  height: 3rem;
  background: #3a2a1c;
}

.deco-lantern::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 60%;
  width: 180px;
  height: 180px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 200, 100, .32), rgba(255, 170, 70, .08) 60%, transparent);
  animation: breathe 5s ease-in-out infinite alternate;
}

.l-left { left: 6%; }
.l-right { right: 7%; top: 9rem; animation-delay: -3s; }

@keyframes swing {
  from { rotate: -3deg; }
  to { rotate: 3deg; }
}

/* Parchemin : encre sombre sur papier, rouleaux en haut et en bas */
.parchment {
  position: relative;
  padding: 2.25rem 1.5rem 1.5rem;
  color: var(--ink);
  background: radial-gradient(ellipse at center, #f7ecd2 45%, #ead39f 100%);
  box-shadow:
    0 -4px 0 #b68a4f,
    0 4px 0 #b68a4f,
    -4px 0 0 #b68a4f,
    4px 0 0 #b68a4f,
    0 14px 0 rgba(0, 0, 0, .3);
}

.parchment::before,
.parchment::after {
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  height: 14px;
  background: linear-gradient(#e2c48e 0 4px, #c9a368 4px 10px, #a57c45 10px);
  box-shadow: 0 0 0 3px #5e3d22;
}

.parchment::before {
  top: -14px;
}

.parchment::after {
  bottom: -14px;
}

.parchment h1,
.parchment h2 {
  color: #4a2f1a;
  text-shadow: none;
}

.parchment h2::after,
.parchment h1::after {
  background: linear-gradient(90deg, #a5642a 0 10px, transparent 10px 16px, #a5642a 16px 26px, transparent 26px 32px, #a5642a 32px 42px);
}

.parchment p:last-child {
  margin-bottom: 0;
}

.parchment a {
  color: #2f5a2e;
}

/* Étapes : chemin de pierres numérotées */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 2rem auto 0;
  padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 4.5rem;
  padding-bottom: 2rem;
  min-height: 3rem;
}

.steps li:nth-child(2) {
  margin-left: 1.25rem;
}

.steps li:nth-child(3) {
  margin-left: 2.5rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -.2rem;
  width: 3.2rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: #1f1b16;
  background: linear-gradient(#c3c0b2 0 30%, #a4a194 30% 80%, #85827a 80%);
  box-shadow:
    0 -4px 0 #4b4a42,
    0 4px 0 #4b4a42,
    -4px 0 0 #4b4a42,
    4px 0 0 #4b4a42,
    0 10px 0 rgba(0, 0, 0, .35);
}

/* petits cailloux entre les pierres */
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 3.4rem;
  bottom: .2rem;
  width: 8px;
  background: repeating-linear-gradient(to bottom, #8d8a7c 0 8px, transparent 8px 18px);
  opacity: .8;
}

.steps strong {
  display: block;
}

/* Cartes : panneaux de bois cloués */
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.75rem;
}

.section > .cards {
  max-width: 66rem;
}

.card {
  padding: 1.5rem 1.4rem 1.6rem;
  color: var(--cream);
  background:
    linear-gradient(#2b1b10, #2b1b10) 10px 10px / 6px 6px no-repeat,
    linear-gradient(#2b1b10, #2b1b10) calc(100% - 10px) 10px / 6px 6px no-repeat,
    linear-gradient(#2b1b10, #2b1b10) 10px calc(100% - 10px) / 6px 6px no-repeat,
    linear-gradient(#2b1b10, #2b1b10) calc(100% - 10px) calc(100% - 10px) / 6px 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(to bottom, var(--wood) 0 38px, var(--wood-line) 38px 42px);
  box-shadow:
    0 -4px 0 var(--wood-dark),
    0 4px 0 var(--wood-dark),
    -4px 0 0 var(--wood-dark),
    4px 0 0 var(--wood-dark),
    0 12px 0 rgba(0, 0, 0, .35);
  transition: transform .4s ease;
}

.card:hover {
  transform: translateY(-4px);
}

.card h3 {
  text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}

.card p {
  margin: 0;
  font-size: 1rem;
  color: var(--cream-soft);
}

.card img {
  display: block;
  width: 96px;
  height: 96px;
  margin: -.5rem 0 .5rem -.4rem;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35));
}

/* Scènes illustrées (jardin, salle à manger, coin du feu) : l'illustration couvre toute la section, opaque
   (ni étoiles ni lucioles du canvas) ; --top / --bottom réservent les bandes de transition (feuillage, rondins, poutres). */
.section.scenic {
  --top: 0px;
  --bottom: 0px;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--top) + 1.5rem) 1.25rem calc(var(--bottom) + 2rem);
  background: var(--forest);
}

.scenic::before,
.scenic::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  max-width: none;
  image-rendering: pixelated;
  pointer-events: none;
}

.scenic::before {
  top: 0;
  height: var(--top);
}

.scenic::after {
  bottom: 0;
  height: var(--bottom);
}

/* La scène garde le ratio 1376×768 et reproduit un « cover » (unités de conteneur, comme l'accueil) ;
   --fx / --fy choisissent le point de l'image gardé au centre, les lueurs restent calées en % de l'image. */
.view {
  --fx: .5;
  --fy: .5;
  position: absolute;
  inset: calc(var(--top) - 8px) 0 calc(var(--bottom) - 4px);
  z-index: 0;
  max-width: none;
  container-type: size;
  overflow: hidden;
}

.view-scene {
  --w: max(100cqw, calc(100cqh * 1.7917));
  --h: calc(var(--w) * .5581);
  position: absolute;
  left: clamp(calc(100cqw - var(--w)), calc(50cqw - var(--w) * var(--fx)), 0px);
  top: clamp(calc(100cqh - var(--h)), calc(50cqh - var(--h) * var(--fy)), 0px);
  width: var(--w);
  height: var(--h);
  background: 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}

.view span {
  pointer-events: none;
}

/* particules pixel art dessinées par js/scenes.js, calées sur l'image */
.scene-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}

/* lumières douces ajoutées sur les illustrations (halos en % de l'image) */
.hearth,
.spill,
.moonlight,
.doorway,
.patio,
.pendant,
.tablelight,
.night-door,
.candle {
  position: absolute;
  translate: -50% -50%;
  border-radius: 50%;
}

/* ---------- Le jardin : on arrive par le chemin, sous la lune, jusqu'à la porte ouverte ---------- */
.section.garden {
  --top: 96px;
  --bottom: 48px;
  min-height: 860px;
}

/* haut : le feuillage de la forêt d'avant ; bas : la haie devant le mur de la cabane */
.garden::before {
  background: url(/img/canopy.svg?v=db86d4fe) 0 0 / 384px 96px repeat-x;
}

.garden::after {
  background: url(/img/bushes.svg?v=db86d4fe) 0 100% / 384px 48px repeat-x;
}

.garden .view {
  --fx: .7;
  --fy: .55;
  inset: 0;
}

.garden .view-scene {
  background-image: url(/img/garden.jpg?v=db86d4fe);
}

/* halo de la lune, très lent */
.moonlight {
  left: 66.3%;
  top: 14.6%;
  width: 24%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(215, 228, 255, .22), rgba(170, 195, 255, .08) 60%, rgba(170, 195, 255, 0));
  animation: breathe 11s ease-in-out infinite alternate;
}

/* la cuisine éclairée par la porte ouverte, et sa lumière sur les dalles */
.doorway {
  left: 14%;
  top: 48%;
  width: 30%;
  aspect-ratio: .62;
  background: radial-gradient(closest-side, rgba(255, 196, 110, .3), rgba(255, 160, 70, .1) 60%, rgba(255, 160, 70, 0));
  animation: hearth 9s ease-in-out infinite;
}

.patio {
  left: 20%;
  top: 92%;
  width: 46%;
  aspect-ratio: 3.4;
  background: radial-gradient(closest-side, rgba(255, 180, 90, .3), rgba(255, 150, 60, 0));
  animation: hearth 11s ease-in-out -3s infinite;
}

.garden .glow {
  width: 5%;
}

/* lanterne de l'arbre, guirlande au-dessus de la barrière, petites lampes du chemin */
.garden .j1 { width: 6.5%; }

.j1 { left: 46.2%; top: 38.1%; }
.j2 { left: 62.6%; top: 46.7%; animation-delay: -1.4s; }
.j3 { left: 69.4%; top: 49.5%; animation-delay: -2.9s; }
.j4 { left: 75.2%; top: 47.2%; animation-delay: -4.3s; }

.garden .lamp {
  width: 3.6%;
  animation-duration: 6.5s;
}

.k1 { left: 68.9%; top: 73.1%; animation-delay: -.7s; }
.k2 { left: 75.2%; top: 68.9%; animation-delay: -3.1s; }
.k3 { left: 88.9%; top: 74.2%; animation-delay: -1.9s; }
.k4 { left: 85.2%; top: 80.5%; animation-delay: -4.6s; }

/* Le texte sur un panneau de nuit translucide et chaud, bordé de pierres ; les étapes y forment le chemin */
.garden-copy {
  position: relative;
  z-index: 1;
  padding: 1.75rem 1.4rem 1.25rem;
  background: rgba(22, 14, 9, .8);
  box-shadow:
    0 -4px 0 #4b4a42,
    0 4px 0 #4b4a42,
    -4px 0 0 #4b4a42,
    4px 0 0 #4b4a42,
    0 12px 0 rgba(0, 0, 0, .3);
}

.garden-copy strong {
  color: #ffe1a0;
}

/* ---------- La salle à manger : autour de la table commune ---------- */
.section.dining {
  --top: 96px;
  min-height: 900px;
  text-align: center;
}

/* haut : le mur de rondins vu du jardin, puis la poutre du linteau (avec son ombre sur l'intérieur) */
.dining::before {
  background:
    linear-gradient(#2a1a10 0 4px, #c9965f 4px 8px, #9a6a3d 8px 18px, #6e4727 18px 22px, #2a1a10 22px 26px, rgba(20, 10, 4, .45) 26px) 0 64px / 100% 32px no-repeat,
    linear-gradient(rgba(14, 22, 30, .45), rgba(14, 22, 30, .25)) 0 0 / 100% 64px no-repeat,
    url(/img/cabin-wall.svg?v=db86d4fe) 0 0 / 256px 64px repeat-x;
}

.dining .view {
  --fx: .5;
  --fy: .45;
}

.dining .view-scene {
  background-image: url(/img/dining.jpg?v=db86d4fe);
}

/* suspension en cuivre : l'ampoule et la flaque de lumière sur la table respirent lentement */
.pendant {
  left: 52.7%;
  top: 21.3%;
  width: 18%;
  aspect-ratio: 1.5;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .5), rgba(255, 170, 80, .14) 55%, rgba(255, 170, 80, 0));
  animation: breathe 8s ease-in-out infinite alternate;
}

.tablelight {
  left: 50%;
  top: 60%;
  width: 50%;
  aspect-ratio: 2.4;
  background: radial-gradient(closest-side, rgba(255, 190, 100, .26), rgba(255, 160, 70, .08) 60%, rgba(255, 160, 70, 0));
  animation: breathe 8s ease-in-out -4s infinite alternate;
}

/* clair de lune bleuté à travers la porte vitrée de gauche */
.night-door {
  left: 18.5%;
  top: 46%;
  width: 20%;
  aspect-ratio: .5;
  background: radial-gradient(closest-side, rgba(150, 185, 255, .16), rgba(150, 185, 255, 0));
  animation: breathe 12s ease-in-out infinite alternate;
}

/* bougies des appliques : un vacillement doux, jamais de clignotement */
.candle {
  width: 8%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 215, 130, .55), rgba(255, 160, 60, .16) 55%, rgba(255, 160, 60, 0));
  mix-blend-mode: screen;
  animation: candle 4.5s ease-in-out infinite;
}

.c1 { left: 6.8%; top: 23.1%; }
.c2 { left: 32.3%; top: 27.6%; animation-duration: 5.3s; animation-delay: -2s; }

@keyframes candle {
  0%, 100% { opacity: .82; scale: 1; }
  18% { opacity: .95; scale: 1.03; }
  37% { opacity: .86; scale: .98; }
  58% { opacity: 1; scale: 1.04; }
  79% { opacity: .9; scale: 1; }
}

.dining h2 {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 18px rgba(20, 10, 4, .9);
}

.dining h2::after {
  margin-inline: auto;
}

.dining .cards {
  position: relative;
  z-index: 1;
  text-align: left;
}

/* ---------- Le coin du feu : on passe de la salle à manger au salon sous une seule poutre ---------- */
.section.values {
  --top: 120px;
  --bottom: 116px;
  min-height: 920px;
  text-align: center;
}

/* haut : feuillage de la section d'avant, rondins, poutre (avec son ombre portée sur l'intérieur) */
.values::before {
  background:
    url(/img/canopy.svg?v=db86d4fe) 0 0 / 384px 96px repeat-x,
    linear-gradient(rgba(14, 22, 30, .5), rgba(14, 22, 30, .3)) 0 24px / 100% 64px no-repeat,
    linear-gradient(#2a1a10 0 4px, #c9965f 4px 8px, #9a6a3d 8px 18px, #6e4727 18px 22px, #2a1a10 22px 26px, rgba(20, 10, 4, .45) 26px) 0 88px / 100% 32px no-repeat,
    url(/img/cabin-wall.svg?v=db86d4fe) 0 24px / 256px 64px repeat-x;
}

/* après la salle à manger : seulement la poutre commune aux deux pièces */
.dining + .values {
  --top: 32px;
}

.dining + .values::before {
  background: linear-gradient(#2a1a10 0 4px, #c9965f 4px 8px, #9a6a3d 8px 18px, #6e4727 18px 22px, #2a1a10 22px 26px, rgba(20, 10, 4, .45) 26px) 0 0 / 100% 32px no-repeat;
}

/* bas : poutre du seuil, rondins, pierres de fondation et buissons du sous-bois */
.values::after {
  background:
    url(/img/bushes.svg?v=db86d4fe) 0 100% / 240px 30px repeat-x,
    url(/img/cabin-stones.svg?v=db86d4fe) 0 100% / 96px 28px repeat-x,
    linear-gradient(#2a1a10 0 4px, #c9965f 4px 8px, #9a6a3d 8px 18px, #6e4727 18px 22px, #2a1a10 22px 26px) 0 0 / 100% 24px no-repeat,
    linear-gradient(rgba(14, 22, 30, .3), rgba(14, 22, 30, .55)) 0 24px / 100% 92px no-repeat,
    url(/img/cabin-wall.svg?v=db86d4fe) 0 24px / 256px 64px repeat-x;
}

.values + .forest::before {
  display: none;
}

.values .view {
  --fx: .3;
  --fy: .62;
}

.values .view-scene {
  background-image: url(/img/interior.jpg?v=db86d4fe);
}

/* montants du chambranle (grands écrans) */
.values .view::after {
  content: "";
  position: absolute;
  inset: 0;
  display: none;
  background:
    linear-gradient(90deg, #2a1a10 0 4px, #9a6a3d 4px 14px, #c9965f 14px 18px, #6e4727 18px 24px, #2a1a10 24px 28px, rgba(20, 10, 4, .4) 28px 36px, transparent 36px) 0 0 / 50% 100% no-repeat,
    linear-gradient(270deg, #2a1a10 0 4px, #6e4727 4px 10px, #9a6a3d 10px 24px, #2a1a10 24px 28px, rgba(20, 10, 4, .4) 28px 36px, transparent 36px) 100% 0 / 50% 100% no-repeat;
}

/* foyer : lueur qui vacille lentement, sans jamais clignoter */
.hearth {
  left: 26.6%;
  top: 68%;
  width: 30%;
  aspect-ratio: 1.15;
  background: radial-gradient(closest-side, rgba(255, 190, 90, .5), rgba(255, 130, 40, .18) 55%, rgba(255, 120, 40, 0));
  animation: hearth 5s ease-in-out infinite;
}

/* lumière du feu sur le tapis */
.spill {
  left: 31%;
  top: 90%;
  width: 52%;
  aspect-ratio: 3.2;
  background: radial-gradient(closest-side, rgba(255, 160, 70, .32), rgba(255, 130, 50, 0));
  animation: hearth 7s ease-in-out -2s infinite;
}

@keyframes hearth {
  0%, 100% { opacity: .78; scale: 1; }
  22% { opacity: .92; scale: 1.03; }
  41% { opacity: .82; scale: .99; }
  63% { opacity: 1; scale: 1.04; }
  81% { opacity: .86; scale: 1.01; }
}

.values .glow {
  width: 6%;
}

.i1 { left: 48.5%; top: 19.8%; }
.i2 { left: 47.6%; top: 38.4%; animation-delay: -1.8s; }
.i3 { left: 60.2%; top: 38.8%; animation-delay: -3.6s; }
.i4 { left: 75.2%; top: 26.4%; animation-delay: -2.7s; }
.i5 { left: 60.2%; top: 58.9%; animation-delay: -4.5s; }

/* Titre : la pénombre du plafond (voile brun chaud) le garde lisible ; l'enseigne et la note ont leur propre support */
.values-copy {
  position: relative;
  z-index: 1;
}

.values-copy::before {
  content: "";
  position: absolute;
  inset: calc(-1.5rem - 8px) -50vw auto;
  height: 11rem;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(24, 12, 5, .78) 5rem, rgba(24, 12, 5, 0));
  pointer-events: none;
}

.values h2::after {
  margin-inline: auto;
}

/* enseigne suspendue à la poutre (les cordes passent derrière elle) */
.sign {
  position: relative;
  max-width: 34rem;
  margin: 2.5rem auto 0;
  padding: 1.1rem 1.25rem;
  background:
    linear-gradient(#2b1b10, #2b1b10) 10px 50% / 6px 6px no-repeat,
    linear-gradient(#2b1b10, #2b1b10) calc(100% - 10px) 50% / 6px 6px no-repeat,
    repeating-linear-gradient(to bottom, #d1a46d 0 26px, #b4844f 26px 29px);
  box-shadow:
    0 -4px 0 var(--wood-dark),
    0 4px 0 var(--wood-dark),
    -4px 0 0 var(--wood-dark),
    4px 0 0 var(--wood-dark),
    0 12px 0 rgba(0, 0, 0, .35);
}

.sign::before,
.sign::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  width: 4px;
  height: 30rem;
  background: repeating-linear-gradient(to top, #a07a4c 0 6px, #7a5a34 6px 10px);
}

.sign::before {
  left: 18%;
}

.sign::after {
  right: 18%;
}

.trio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.5rem;
  margin: 0;
}

.trio span {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #24140a;
  text-shadow: 0 1px 0 rgba(255, 236, 200, .55);
}

/* la note : un petit parchemin roulé, suspendu sous l'enseigne par deux cordelettes */
.note {
  position: relative;
  max-width: 30rem;
  margin: calc(2rem + 14px) auto 0;
  padding: 1.1rem 1.4rem;
  color: var(--ink);
  background: radial-gradient(ellipse at center, #f7ecd2 45%, #ead39f 100%);
  box-shadow:
    -4px 0 0 #b68a4f,
    4px 0 0 #b68a4f,
    0 14px 0 rgba(0, 0, 0, .3);
}

.note::before,
.note::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  height: 12px;
  background: linear-gradient(#e2c48e 0 3px, #c9a368 3px 8px, #a57c45 8px);
  box-shadow: 0 0 0 3px #5e3d22;
}

.note::before {
  top: -12px;
}

.note::after {
  bottom: -12px;
}

.note p::before,
.note p::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 15px);
  width: 4px;
  height: calc(2rem - 4px);
  background: repeating-linear-gradient(to top, #a07a4c 0 6px, #7a5a34 6px 10px);
}

.note p::before {
  left: 22%;
}

.note p::after {
  right: 22%;
}

.values-text {
  margin: 0;
  font-size: 1.05rem;
}

/* FAQ : parchemins dépliables */
details {
  margin-bottom: 1.25rem;
  color: var(--ink);
  background: radial-gradient(ellipse at center, #f7ecd2 50%, #ecd7a8 100%);
  border-inline: 10px solid #c9a368;
  box-shadow:
    0 -4px 0 #5e3d22,
    0 4px 0 #5e3d22,
    -4px 0 0 #5e3d22,
    4px 0 0 #5e3d22,
    0 10px 0 rgba(0, 0, 0, .3);
}

summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  min-height: 44px;
  padding: .8rem 1rem;
  font-weight: 800;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "";
  flex: none;
  width: 10px;
  height: 12px;
  background: #8a5a2b;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: rotate .3s ease;
}

details[open] summary::before {
  rotate: 90deg;
}

details p {
  margin: 0;
  padding: 0 1.25rem 1.1rem 2.75rem;
}

/* Ouverture animée : le parchemin se déroule (hauteur animée là où le navigateur le permet,
   sinon ouverture instantanée), puis le texte apparaît en glissant. */
:root {
  interpolate-size: allow-keywords;
}

details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .45s ease, content-visibility .45s allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

details[open] p {
  animation: unroll .5s ease both;
}

@keyframes unroll {
  from { opacity: 0; translate: 0 -8px; }
}

details {
  transition: translate .25s ease;
}

details:hover {
  translate: 0 -2px;
}

summary {
  transition: color .2s ease;
}

summary:hover {
  color: #8a5a2b;
}

/* Apparition douce des blocs au défilement (classes posées par ambiance.js ; sans JS ou en mode calme, tout est visible) */
html.anim .reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity .8s ease, translate .8s ease;
}

html.anim .reveal.in {
  opacity: 1;
  translate: 0 0;
}

html.anim .cards .reveal:nth-child(2),
html.anim .steps .reveal:nth-child(2) { transition-delay: .12s; }
html.anim .cards .reveal:nth-child(3),
html.anim .steps .reveal:nth-child(3) { transition-delay: .24s; }
html.anim .cards .reveal:nth-child(4) { transition-delay: .36s; }

/* Fin de la FAQ : une dernière invitation, discrète */
.faq-join {
  margin-top: 2.5rem;
  /* place pour la lisière d'arbres du pied de page */
  margin-bottom: 100px;
  text-align: center;
}

.faq-join p {
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}

/* ---------- Pied de page : le sol de la forêt ---------- */
.foot {
  position: relative;
  padding: 1.5rem 1.25rem 2rem;
  background: var(--forest);
  color: var(--cream);
  text-align: center;
  font-size: 1rem;
}

.foot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 120px;
  background: url(/img/treeline.svg?v=db86d4fe) 50% 100% / 384px 120px repeat-x;
  image-rendering: pixelated;
  pointer-events: none;
}

.foot-plain::before {
  display: none;
}

.foot p {
  margin: 0;
}

/* Mentions légales : un parchemin dans le sous-bois */
.legal {
  margin-top: 190px;
  padding-bottom: 5rem;
}

.legal h2 {
  font-size: 1.3rem;
  margin-top: 1.5rem;
}

/* ---------- Grands écrans ---------- */
@media (min-width: 40rem) {
  .bar {
    padding: 0 1.5rem;
  }

  .section {
    padding: 4.5rem 1.5rem;
  }

  .parchment {
    padding: 2.75rem 2.5rem 2rem;
  }
}

@media (max-width: 39.99rem) {
  .motion-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .motion-toggle {
    padding: .3rem;
    justify-content: center;
  }
}

@media (min-width: 48rem) {
  .hero {
    padding-bottom: 380px;
  }

  .hero-bg {
    --sh: 680px;
    --fx: .62;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .lead {
    font-size: 1.25rem;
  }
}

/* Bureau : l'illustration couvre tout l'accueil, texte à gauche, Ficus et la cabane à droite */
@media (min-width: 64rem) {
  .hero {
    align-items: center;
    justify-content: flex-start;
    min-height: clamp(560px, calc(100svh - 56px), 1000px);
    padding: 4rem 6vw;
    text-align: left;
  }

  .hero-bg {
    --sh: 100cqh;
    --fx: .5;
  }

  .hero-inner::before {
    display: none;
  }

  .hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 14, 30, .82) 0, rgba(20, 14, 30, .76) 42%, rgba(20, 14, 30, 0) 62%);
  }

  .hero-inner {
    max-width: 34rem;
  }

  .hero h1 {
    font-size: 2.6rem;
  }

  .deco-lantern {
    display: block;
  }
}

/* Valeurs sur grand écran : la pièce entière, le texte sous la poutre au centre, le feu à gauche */
@media (min-width: 48rem) {
  .section.values {
    min-height: clamp(760px, min(calc(56vw + 236px), 100svh), 1080px);
  }

  .values .view::after {
    display: block;
  }

  .values .view {
    --fx: .5;
    --fy: .6;
  }
}

/* Jardin et salle à manger sur mobile et tablette : l'image garde une taille lisible (900 px de large au moins)
   en haut de la section, comme une fenêtre ouverte au-dessus du texte ; dessous, le sol prolonge l'illustration. */
@media (max-width: 63.99rem) {
  .garden .view {
    --fx: .66;
    inset: 40px 0 0;
    background: #141d17;
  }

  .garden .view-scene {
    --w: max(100cqw, 900px);
    top: 0;
  }

  .garden .view-scene::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    background: linear-gradient(rgba(20, 29, 23, 0), #141d17);
  }

  .garden-copy {
    margin-top: 240px;
  }
}

@media (max-width: 79.99rem) {
  /* le titre sous la poutre, sur l'ombre du plafond ; la pièce commence juste en dessous */
  .dining .view {
    background:
      linear-gradient(#1e120a, #1e120a) 0 0 / 100% 72px no-repeat,
      repeating-linear-gradient(to bottom, #2a190e 0 38px, #1f1209 38px 42px);
  }

  .dining .view-scene {
    --w: max(100cqw, 900px);
    top: 72px;
  }

  .dining .view-scene::before,
  .dining .view-scene::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
  }

  .dining .view-scene::before {
    top: 0;
    height: 12%;
    background: linear-gradient(#1e120a, rgba(30, 18, 10, 0));
  }

  .dining .view-scene::after {
    bottom: 0;
    height: 30%;
    background: linear-gradient(rgba(42, 25, 14, 0), #2a190e);
  }

  .dining .cards {
    margin-top: min(300px, calc(33vw + 40px));
  }
}

/* tablette : les quatre planches en deux rangées égales */
@media (min-width: 40rem) and (max-width: 79.99rem) {
  .dining .cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* Grand écran : le texte se range sur le côté le moins chargé de l'image
   (le panneau entre la porte et les lanternes, les planches à droite de la table) */
@media (min-width: 64rem) {
  .section.garden {
    min-height: clamp(760px, min(calc(56vw + 96px), 100svh), 1080px);
  }

  .garden .view {
    --fx: .5;
  }

  .garden-copy {
    max-width: max(31vw, 26rem);
    margin-left: calc(29vw - 1.5rem);
    padding: 2rem 1.75rem 1.25rem;
  }
}

@media (min-width: 80rem) {
  .section.dining {
    min-height: clamp(760px, min(calc(56vw + 96px), 100svh), 1080px);
  }

  /* l'image s'aligne à gauche : les bougies et la porte restent visibles, les planches couvrent la droite */
  .dining .view {
    --fx: 0;
  }

  .dining h2,
  .dining .cards {
    max-width: 37vw;
    margin-left: auto;
    margin-right: calc(3vw - 1.5rem);
  }

  .dining .cards {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

/* ---------- Mouvement ---------- */
/* Sans JS : on suit la préférence système. Avec JS : html.anim / html.calm (bouton de la barre). */
@media (prefers-reduced-motion: reduce) {
  html:not(.anim) *,
  html:not(.anim) *::before,
  html:not(.anim) *::after {
    animation: none !important;
    transition: none !important;
  }
}

html.calm *,
html.calm *::before,
html.calm *::after {
  animation: none !important;
  transition: none !important;
}