/* 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=nunito:300,300i,400,400i,500,600,700|newsreader:200,200i,300,300i,400,400i,500&display=swap");

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #F6F5F3;
  color: #253746;
  font-family: Nunito, system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

* { box-sizing: border-box; }

a { color: #387780; text-decoration: none; }
a:hover { color: #478E9A; }

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

img { max-width: 100%; }

::selection { background: #C8DEE1; }

:focus-visible {
  outline: 2px solid #387780;
  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; }
}

/* --- Navigation : bascule propre, plus haute que le reste du site.
   Les 5 liens tiennent sur une ligne à partir de ~1040 px seulement ;
   en dessous, le menu repliable prend le relais. --- */
@media (max-width: 1040px) {
  [data-nav="desktop"] { display: none !important; }
}
@media (min-width: 1041px) {
  [data-nav="mobile"], #rz-menu { 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);
}

/* --- Témoignages : défilement continu ---
   Une seule piste, dont le contenu est écrit deux fois : l'animation la décale
   de la moitié de sa largeur, donc la seconde série arrive exactement là où
   était la première. La boucle est invisible.
   Le défilement s'arrête au survol et au clavier — un texte qui bouge ne se
   lit pas. --- */
.rz-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rz-marquee-track {
  display: flex;
  width: max-content;
  gap: clamp(18px, 2vw, 26px);
  animation: rzMarquee 78s linear infinite;
}
.rz-marquee:hover .rz-marquee-track,
.rz-marquee:focus-within .rz-marquee-track { animation-play-state: paused; }

@keyframes rzMarquee {
  from { transform: translate3d(0, 0, 0); }
  /* La moitié de la piste = une série complète, plus l'espace qui la suit. */
  to   { transform: translate3d(calc(-50% - clamp(9px, 1vw, 13px)), 0, 0); }
}

/* Mouvement réduit : la piste devient un rail que l'on fait glisser soi-même.
   Le doublon est retiré du flux pour ne pas faire lire deux fois la même chose. */
@media (prefers-reduced-motion: reduce) {
  .rz-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .rz-marquee-track { animation: none; }
  .rz-marquee-track [data-clone] { display: none; }
}

@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; }
}

/* --- Trois cartes : 3 colonnes ou 1, jamais 2 + 1 orpheline --- */
@media (max-width: 860px) {
  .rz-trio { grid-template-columns: 1fr !important; }
}

/* Phrase sur une ligne (Collectif) : sort de sa colonne de 820 px pour tenir sur une ligne,
   centrée sur la page ; repasse sur plusieurs lignes quand l'écran est trop étroit. */
@media (min-width: 1000px) { [data-rz-oneline] { white-space: nowrap; } }