/* Palette inspirée du visuel */
:root{
  --cream:#f1f0e2;
  --olive:#d3d699;
  --brown:#664d37;
  --magenta:#84134f;

  /* Espacements */
  --outer-pad: clamp(14px, 4vmin, 40px);
  --card-pad: clamp(12px, 2.6vmin, 24px);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--brown);
  background: radial-gradient(60% 60% at 50% 40%, var(--cream) 0%, var(--cream) 45%, var(--olive) 100%);
  display:flex; align-items:center; justify-content:center;
  min-height: 100vh;              /* fallback */
  min-height: 100dvh;             /* viewport dynamique moderne */
  transition: opacity .5s ease;
  opacity:1;
}
.is-loading{opacity:0}

/* === IMAGE SANS DÉFORMATION, TOUJOURS ENTIÈREMENT VISIBLE === */
.logo{
  display:block;
  width:auto;           /* ratio naturel */
  height:auto;          /* ratio naturel */
  /* Limites largeur/hauteur pour éviter tout scroll (on déduit les paddings) */
  max-width: calc(94vw - 2*var(--outer-pad) - 2*var(--card-pad));
  max-height: calc(100vh - 2*var(--outer-pad) - 2*var(--card-pad));
  /* sur navigateurs modernes, dvh gère mieux la barre d’URL mobile */
}
@supports (height: 1dvh){
  .logo{
    max-height: calc(100dvh - 2*var(--outer-pad) - 2*var(--card-pad));
  }
}

/* Ajustement desktop : un peu plus d’air pour garantir 0 scroll */
@media (min-width: 1024px){
  .logo{
    max-height: calc(92vh - 2*var(--outer-pad) - 2*var(--card-pad));
  }
}

.logo{
  border-radius:16px;
  box-shadow: 0 8px 30px rgba(132,19,79,0.24);
}

/* Accessibilité / préférences */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}