/* Thème « clairière » : illustration de ciel en pixel art, panneaux cousus façon Animal Crossing,
   vert menthe → turquoise → bleu. Ciel de jour en thème clair, ciel de nuit étoilé en thème sombre. */

@font-face {
  font-family: "Fredoka";
  src: url("fonts/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --fond: #eef7f4;
  --surface: #ffffff;
  --surface-2: #e6f5f1;
  --encre: #1d3a44;
  --encre-douce: #567680;
  --menthe: #00a868;
  --menthe-vif: #00e68a;
  --turquoise: #0095b6;
  --bleu: #0067e0;
  --colline: #9fe0bd;
  --pointilles: #9fd6c6;
  --ombre: rgba(29, 58, 68, 0.12);
  --etoiles: 0;
  --bouton-texte: #08322a;
  --rouge: #d9534f;
  --sol: #1f3b45;
  --sur-sol: #cfe7e3;
  --verre: rgba(255, 255, 255, 0.8);
  --voile: transparent;
  --filtre-ciel: none;
  --halo-jiji: none;
  --ombre-sol: rgba(29, 58, 68, 0.18);
  --particule: #ffffff;
  --particule-halo: rgba(255, 255, 255, 0.55);
  --particule-max: 0.75;
  --police-titre: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --police-texte: "Nunito", "Segoe UI", system-ui, sans-serif;
  --police-code: ui-monospace, "Cascadia Code", Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0c1824;
    --surface: #142839;
    --surface-2: #183347;
    --encre: #e3f3f0;
    --encre-douce: #9cbcc4;
    --menthe: #33e6a2;
    --menthe-vif: #33e6a2;
    --turquoise: #40c9e8;
    --bleu: #66adff;
    --colline: #1d5646;
    --pointilles: #2c5466;
    --ombre: rgba(0, 0, 0, 0.4);
    --etoiles: 1;
    --bouton-texte: #062820;
    --rouge: #ff7b72;
    --sol: #0e2028;
    --sur-sol: #a9c8cf;
    --verre: rgba(16, 34, 50, 0.78);
    --voile: linear-gradient(180deg, rgba(6, 14, 38, 0.55), rgba(6, 14, 38, 0.25));
    --filtre-ciel: brightness(0.55) saturate(0.85) hue-rotate(-12deg);
    --halo-jiji: drop-shadow(0 0 1px rgba(255, 246, 210, 0.35)) drop-shadow(0 0 5px rgba(255, 246, 210, 0.15));
    --ombre-sol: rgba(0, 0, 0, 0.35);
    --particule: #e6ff9a;
    --particule-halo: rgba(206, 255, 110, 0.85);
    --particule-max: 1;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--sol);
}

body {
  margin: 0;
  background: var(--sol);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 1.05rem;
  line-height: 1.6;
}

h1,
h2 {
  margin: 0;
  font-family: var(--police-titre);
  text-wrap: balance;
}

code {
  font-family: var(--police-code);
}

:focus-visible {
  outline: 3px solid var(--menthe-vif);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ===== Le ciel (en-tête) =====
   L'illustration remplit l'en-tête, calée par le bas : colline et herbes toujours visibles.
   Le bas de l'image finit sur la couleur --sol, reprise par le reste de la page. */
.ciel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--sol);
  padding-inline: 16px;
  padding-block: 3rem clamp(11rem, 24vw, 17rem);
  text-align: center;
}

.ciel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("background.png") center bottom / cover no-repeat;
  image-rendering: pixelated;
  filter: var(--filtre-ciel);
}

.ciel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--voile);
}

/* Étoiles (la nuit seulement) */
.etoiles {
  position: absolute;
  inset: 0 0 45% 0;
  z-index: -1;
  opacity: var(--etoiles);
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 32%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 26%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 36%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 44%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 42%, #fff 50%, transparent 51%);
}

.etoiles::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 24%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 8%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 69% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 83% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 28%, #fff 50%, transparent 51%);
  animation: scintille 3.5s ease-in-out infinite alternate;
}

@keyframes scintille {
  from { opacity: 0.15; }
  to { opacity: 1; }
}

/* Graines de pissenlit le jour, lucioles la nuit */
.lucioles {
  position: absolute;
  inset: 50% 0 0 0;
  z-index: -1;
  pointer-events: none;
}

.lucioles i {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--particule);
  box-shadow: 0 0 7px var(--particule-halo);
  opacity: 0;
  animation: voltige 11s ease-in-out infinite;
}

.lucioles i:nth-child(1) { left: 8%; top: 40%; animation-delay: 0s; }
.lucioles i:nth-child(2) { left: 21%; top: 62%; animation-delay: -3s; animation-duration: 13s; }
.lucioles i:nth-child(3) { left: 37%; top: 48%; animation-delay: -6s; }
.lucioles i:nth-child(4) { left: 58%; top: 70%; animation-delay: -1.5s; animation-duration: 14s; }
.lucioles i:nth-child(5) { left: 72%; top: 44%; animation-delay: -8s; }
.lucioles i:nth-child(6) { left: 86%; top: 60%; animation-delay: -4.5s; animation-duration: 12s; }
.lucioles i:nth-child(7) { left: 94%; top: 36%; animation-delay: -10s; }

@keyframes voltige {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: var(--particule-max); }
  50% { transform: translate(16px, -26px); }
  80% { opacity: var(--particule-max); }
  100% { transform: translate(-8px, -48px); opacity: 0; }
}

/* Panneau de verre dépoli : garde le titre lisible sur le ciel */
.panneau-ciel {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.8rem 1.5rem 1.6rem;
  border-radius: 30px;
  background: var(--verre);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 14px 34px var(--ombre);
  animation: arrivee 0.9s ease-out both;
}

@keyframes arrivee {
  from { transform: translateY(14px); }
  to { transform: none; }
}

/* Jiji, sans cadre, avec une ombre ovale au sol comme un sprite de jeu */
.jiji {
  display: grid;
  justify-items: center;
}

.jiji::after {
  content: "";
  width: 96px;
  height: 10px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--ombre-sol);
}

.jiji img {
  width: 128px;
  height: auto;
  image-rendering: pixelated;
  filter: var(--halo-jiji);
}

/* Voyant en bulle de dialogue */
.bulle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: var(--surface);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 6px 16px var(--ombre);
}

.bulle::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  margin-left: -7px;
  border: 7px solid transparent;
  border-top-color: var(--surface);
  border-bottom: 0;
}

.voyant {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--encre-douce);
}

.bulle[data-etat="en-ligne"] .voyant {
  background: var(--menthe-vif);
  animation: pulse 2.4s ease-out infinite;
}

.bulle[data-etat="hors-ligne"] .voyant {
  background: var(--rouge);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--menthe-vif) 60%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

h1 {
  font-size: clamp(2.3rem, 7vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  background: linear-gradient(90deg, var(--menthe), var(--turquoise), var(--bleu));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.accroche {
  margin: 0;
  color: var(--encre-douce);
  font-size: 1.15rem;
}

/* Adresse à copier, façon ticket */
.billet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  padding: 0.5rem;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 8px 20px var(--ombre);
}

.billet code {
  padding: 0.35rem 0.9rem;
  border: 2px dashed var(--pointilles);
  border-radius: 12px;
  font-size: 1.1rem;
  color: var(--encre);
}

.bouton {
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  background: linear-gradient(180deg, var(--menthe-vif), var(--menthe));
  color: var(--bouton-texte);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--menthe) 70%, #000 30%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bouton:hover {
  transform: translateY(-1px);
}

.bouton:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--menthe) 70%, #000 30%);
}

/* ===== Le sol (corps de page) ===== */
.sol {
  background: var(--sol);
  padding-inline: 16px;
  padding-block: 2.2rem 2.5rem;
}

.grille {
  max-width: 52rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.6rem 1.25rem;
}

/* Panneaux cousus avec onglet */
.panneau {
  position: relative;
  min-width: 0;
  padding: 1.6rem 1.4rem 1.3rem;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 8px 20px var(--ombre);
}

.panneau::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px dashed var(--pointilles);
  border-radius: 16px;
  pointer-events: none;
}

.panneau.large {
  grid-column: 1 / -1;
}

.onglet {
  position: absolute;
  top: -14px;
  left: 1.4rem;
  margin: 0;
  padding: 0.2rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--menthe), var(--turquoise));
  color: var(--bouton-texte);
  font-size: 0.95rem;
  font-weight: 600;
}

.panneau ol,
.panneau ul {
  margin: 0.4rem 0 0;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.45rem;
}

.panneau li::marker {
  color: var(--menthe);
  font-family: var(--police-titre);
  font-weight: 700;
}

.feuilles {
  list-style: none;
  padding-left: 0 !important;
}

.feuilles li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.5rem;
  align-items: start;
}

.feuilles svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.25rem;
  fill: var(--menthe);
}

/* Tuiles « Le monde » */
.atouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.9rem;
  margin-top: 0.6rem;
}

.atout {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.7rem;
  align-items: center;
  padding: 0.7rem;
  border-radius: 16px;
  background: var(--surface-2);
}

.pastille {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--surface);
}

.atout svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: var(--turquoise);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.atout:hover svg {
  animation: frisson 0.5s ease-in-out;
}

@keyframes frisson {
  25% { transform: rotate(-9deg); }
  75% { transform: rotate(9deg); }
}

.atout strong {
  display: block;
  font-family: var(--police-titre);
  font-weight: 600;
}

.atout span {
  display: block;
  font-size: 0.88rem;
  color: var(--encre-douce);
  line-height: 1.35;
}

/* Liens */
.liens {
  max-width: 52rem;
  margin: 1.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

.lien {
  display: grid;
  gap: 0.1rem;
  padding: 0.9rem 1.2rem;
  border-radius: 18px;
  background: var(--surface);
  text-decoration: none;
  color: var(--encre);
  box-shadow: 0 6px 0 var(--colline), 0 10px 20px var(--ombre);
  transition: transform 0.15s ease;
}

.lien:hover {
  transform: translateY(-3px);
}

.lien strong {
  font-family: var(--police-titre);
  font-weight: 600;
  color: var(--turquoise);
}

.lien span {
  font-size: 0.88rem;
  color: var(--encre-douce);
}

footer {
  background: var(--sol);
  padding-inline: 16px;
  padding-block: 0 2.5rem;
  text-align: center;
  color: var(--sur-sol);
  font-size: 0.85rem;
}

footer p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}