/* Reasonances — feuille commune.
   Le design est en styles en ligne (voir le design system) : ce fichier ne porte
   que ce qui ne peut pas l'être — fontes, keyframes, resets, bascule mobile. */

/* --- Fontes : Bunny Fonts (miroir européen de la même bibliothèque).
       Serveurs en UE, aucune donnée transmise à Google, aucun cookie.
       Alternative : héberger les fichiers soi-même -> @import "fonts-local.css";
       (voir DEPLOY.md) --- */
@import url("https://fonts.bunny.net/css?family=dm-sans:300,300i,400,400i,500|newsreader:200,200i,300,300i,400,400i,500&display=swap");

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #FAF7F1;
  color: #1C2A29;
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

* { box-sizing: border-box; }

a { color: #216B68; text-decoration: none; }
a:hover { color: #35837F; }

p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; }

img { max-width: 100%; }

::selection { background: #CFE3DE; }

:focus-visible {
  outline: 2px solid #216B68;
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Bascule desktop / mobile à 860 px.
       Les deux versions sont dans le DOM : meilleur pour l'indexation. --- */
[data-only="desktop"], [data-only="mobile"] { display: contents; }
@media (max-width: 860px) {
  [data-only="desktop"] { display: none !important; }
  [data-nw] { white-space: normal !important; }
}
@media (min-width: 861px) {
  [data-only="mobile"] { display: none !important; }
}

/* --- Animations de la marque.
       Portées telles quelles depuis la maquette : toute divergence ici
       casse silencieusement une animation du site. --- */
@keyframes rzPulse {
  0%   { transform: scale(.55); opacity: 0; }
  18%  { opacity: .55; }
  100% { transform: scale(1.75); opacity: 0; }
}
@keyframes rzRipple {
  0%   { transform: translate(-50%, -50%) scale(.1); opacity: .5; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@keyframes rzDrop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(9px); }
}
@keyframes rzFloat {
  0%, 100% { transform: translate(0, 0); }
  30%      { transform: translate(-4px, -11px); }
  62%      { transform: translate(5px, -5px); }
}
@keyframes rzNudgeR {
  0%, 100% { transform: translateX(0); opacity: .45; }
  50%      { transform: translateX(7px); opacity: 1; }
}
@keyframes rzNudgeL {
  0%, 100% { transform: translateX(0); opacity: .45; }
  50%      { transform: translateX(-7px); opacity: 1; }
}
@keyframes rzCue {
  0%, 100% { transform: translateY(0); opacity: .35; }
  50%      { transform: translateY(7px); opacity: .9; }
}

/* --- Apparition au défilement : état de départ posé par le JS.
       Sans JS, le contenu reste visible. --- */
.rz-reveal { opacity: 0; transform: translateY(24px); }
.rz-in {
  opacity: 1;
  transform: none;
  transition: opacity 900ms cubic-bezier(.22,.61,.36,1), transform 900ms cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .rz-reveal { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
}

/* --- Impression : on retire les décors --- */
@media print {
  nav, [data-ripple] svg, .rz-nav-toggle { display: none !important; }
  body { background: #fff; }
}