/* Trouvia: landing page only. One calm screen, one small block below the fold. */
.accueil { min-height: 100svh; display: flex; flex-direction: column; }
.accueil main { flex: 1; }

/* ---------- Hero: fills the first viewport under the header ---------- */
.hero {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; align-items: center;
  padding-top: clamp(20px, 5.5vh, 60px);
  overflow: clip;
}
.hero-copy { display: grid; justify-items: center; text-align: center; gap: clamp(14px, 2.6vh, 26px); position: relative; z-index: 1; }
.hero-logo { margin: 0; color: var(--ink); line-height: 0; }
.hero-logo svg, .hero-logo img { display: block; height: clamp(58px, 11vh, 108px); width: auto; max-width: min(78vw, 440px); }
.hero h1 {
  margin: 0; max-width: 21ch;
  font-size: clamp(1.55rem, 1.05rem + 2.3vw, 2.7rem); font-weight: 700; line-height: 1.14; letter-spacing: -.015em;
}
.hero h1 em, .quoi em {
  font-style: normal; text-decoration: underline; text-decoration-color: var(--yellow-deep);
  text-decoration-thickness: .13em; text-underline-offset: .12em; text-decoration-skip-ink: none;
}
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
.hero-cta .btn { min-height: 48px; }

.hero-art {
  position: relative; flex: 1 1 auto; align-self: stretch;
  min-height: clamp(200px, 34vh, 420px);
  margin-top: clamp(-8px, 1vh, 12px);
  pointer-events: none;
}
.hero-art::before {
  content: ""; position: absolute; left: 50%; bottom: 5%; translate: -50% 0;
  height: 60%; aspect-ratio: 2.7; max-width: 96%;
  border-radius: 50%; background: var(--surface-2);
  opacity: 0; transition: opacity .6s ease;
}
.hero-art.has-3d::before { opacity: 1; }
.hero-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.hero-art.has-3d canvas { opacity: 1; }
.hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity .4s ease, visibility 0s .4s; }
.hero-art.has-3d .hero-fallback { opacity: 0; visibility: hidden; }
.fb-water { fill: var(--surface-2); }
.fb-side { fill: light-dark(#0a3a2d, #0d4a3a); }
.fb-top { fill: light-dark(#1a7359, #22906f); stroke: var(--edge); stroke-width: 1.5; stroke-linejoin: round; }
.fb-pin-sh { fill: #000; opacity: .25; }
.fb-st text { font-family: var(--font-display); font-weight: 800; fill: var(--on-yellow); }
@media (prefers-reduced-motion: no-preference) {
  .fb-pin-in { transform-origin: 0 0; animation: fb-pop .6s calc(.3s + var(--i) * .09s) cubic-bezier(.2, 1.7, .4, 1) both; }
  .fb-st-in { animation: fb-float calc(6s + var(--i) * .9s) calc(var(--i) * -1.1s) ease-in-out infinite alternate; }
}
@keyframes fb-pop { from { transform: scale(0); } to { transform: none; } }
@keyframes fb-float { from { transform: translateY(-5px) rotate(-2deg); } to { transform: translateY(5px) rotate(2deg); } }

/* ---------- Below the fold: what the name means ---------- */
.quoi { padding-block: clamp(56px, 10vw, 112px) clamp(40px, 7vw, 80px); }
.quoi .wrap { max-width: 640px; }
.quoi h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem); margin-bottom: 1em; }
.quoi dl { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: clamp(16px, 4vw, 32px); }
.quoi dl > div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; padding: 14px 0; border-top: 1.5px solid var(--line); }
.quoi dl > div:last-child { border-bottom: 1.5px solid var(--line); }
.quoi dt { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.quoi dt small { font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: var(--muted); letter-spacing: 0; margin-left: .35em; }
.quoi dd { margin: 0; font-size: 1.08rem; }
.quoi dl > div:last-child dd { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.quoi .facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.quoi .facts li { font-family: var(--font-display); font-weight: 700; font-size: .92rem; padding: .32em .85em; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); }

/* ---------- Footer: one line and a few small links ---------- */
.site-footer.mini { margin-top: 0; padding: 22px 0 28px; font-size: .88rem; }
.site-footer.mini .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 28px; }
.site-footer.mini p { margin: 0; }
.site-footer.mini nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-footer.mini a { color: var(--muted); display: inline-block; padding: 6px 0; }
.site-footer.mini a:hover { color: var(--ink); }

/* Header on this page: mark and two toggles only. */
.accueil .site-header .tools { margin-left: auto; }
.accueil .site-header { border-bottom-color: transparent; }

@media (max-width: 480px) {
  .hero-cta { display: grid; grid-template-columns: 1fr; width: min(100%, 320px); }
  .quoi dl { grid-template-columns: 1fr; }
  .quoi dl > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-height: 560px) {
  .hero { padding-top: 14px; }
  .hero-art { min-height: 220px; }
}
/* The secondary button needs a visible outline on the dark background. */
.hero-cta .btn:not(.primary) { border-color: light-dark(#0e2019, #4a6b61); }

/* Coeurs animés du héros : les coups de coeur qui montent de la carte */
.hero-hearts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-hearts .hh { position: absolute; bottom: 18%; left: calc(14% + var(--i) * 11.500%); width: calc(30px + var(--i) * 4px); opacity: 0; animation: hh-rise calc(5.500s + var(--i) * .700s) ease-in infinite; animation-delay: calc(var(--i) * -1.300s); }
.hero-hearts .hh svg { display: block; width: 100%; height: auto; fill: var(--t-sale, #ff5a4e); stroke: var(--edge, #10231d); stroke-width: 1.600; stroke-linejoin: round; animation: hh-beat 1.100s ease-in-out infinite; transform-origin: 50% 60%; }
.hero-hearts .hh:nth-child(3n) svg { fill: var(--yellow, #ffd12e); }
@keyframes hh-rise { 0% { transform: translate(0, 0) rotate(-8deg) scale(.600); opacity: 0; } 12% { opacity: .950; } 70% { opacity: .800; } 100% { transform: translate(calc((var(--i) - 3) * 9px), -260px) rotate(10deg) scale(1.100); opacity: 0; } }
@keyframes hh-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.180); } 55% { transform: scale(.960); } }
@media (prefers-reduced-motion: reduce) { .hero-hearts .hh { animation: none; opacity: .850; bottom: calc(30% + var(--i) * 6%); } .hero-hearts .hh svg { animation: none; } }

/* « C’est quoi, Trouvia? » : version détaillée */
.quoi .plus { margin-top: 30px; }
.quoi .plus .intro { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1rem + .8vw, 1.4rem); line-height: 1.3; margin: 0 0 6px; text-wrap: balance; }
.quoi .plus h3 { font-size: 1.05rem; margin: 22px 0 4px; }
.quoi .plus p { margin: 0; font-size: 1.05rem; line-height: 1.55; }