/* =============================================================================
   Reverchon'Digital — Couche de base (styles globaux)
   Valeurs par défaut des éléments + quelques utilitaires de marque. S'appuie
   sur les jetons. Les styles spécifiques aux pages vivent dans css/pages/.
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

a:where(:not(.btn)) {
  color: var(--text-brand);
  transition: color var(--dur-fast) var(--ease-standard);
}
a:where(:not(.btn)):hover { color: var(--brick-500); }

::selection { background: var(--brick-200); color: var(--brick-900); }

/* Barre de défilement discrète, accordée à la marque (WebKit). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-300);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: padding-box; }

/* Accessibilité : anneau de focus visible, jamais supprimé. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
input:focus, textarea:focus, select:focus { outline: none; }

/* ---- Utilitaires de marque ------------------------------------------- */

/* Sur-titre / eyebrow */
.rd-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Texte éditorial (serif) */
.rd-prose {
  font-family: var(--prose-font);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* Motif R de marque sur fond brique (bandeaux sombres, pieds de page) */
.rd-pattern-r {
  background-color: var(--brick-700);
  background-image: url('../img/background-r.png');
  background-size: 420px;
}

/* ---- Animations partagées -------------------------------------------- */
@keyframes rd-pop {
  0%   { opacity: 0; transform: translateY(14px) scale(.985); }
  100% { opacity: 1; transform: none; }
}
@keyframes rd-fade-soft { from { opacity: 0; } to { opacity: 1; } }
@keyframes rd-rail-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rd-bar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes rd-spin { to { transform: rotate(360deg); } }

.rd-animate-pop { animation: rd-pop .5s var(--ease-out) both; }

/* Micro-interaction de pression sur les boutons tactiles. */
.rd-press { transition: transform var(--dur-fast) var(--ease-spring); }
.rd-press:active { transform: scale(.97); }

/* Légère élévation au survol (cartes, lignes cliquables). */
.rd-lift { transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out); }
.rd-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Saut de focus accessibilité (lien d'évitement). */
.rd-skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink-900);
  color: var(--text-on-brand);
  border-radius: var(--radius-md);
}
.rd-skip-link:focus { left: 8px; }

/* Conteneur visuellement masqué mais lisible par les lecteurs d'écran. */
.rd-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}