/* =============================================================================
   01-BASE.CSS — Fondations transversales
   Reset léger (dans le cadre Divi), typographie de marque, conteneurs,
   utilitaires réutilisables (boutons, badges, titres de section) et animations
   discrètes au scroll. Chargé sur tout le site.
   ========================================================================== */

/* --- Box model : garanti sur nos composants (indépendant de Divi) ---------- */
.rkt-scope, .rkt-scope *, .rkt-scope *::before, .rkt-scope *::after,
.rkt-section, .rkt-section *, .rkt-section *::before, .rkt-section *::after,
.rkt-header, .rkt-header *, .rkt-footer, .rkt-footer * {
  box-sizing: border-box;
}

/* --- Périmètre : on préfixe tout par .rkt pour ne pas casser Divi ----------- */
.rkt-scope,
.rkt-section {
  font-family: var(--rkt-font-body);
  color: var(--rkt-ink);
  line-height: var(--rkt-lh-base);
}

/* --- Titres ----------------------------------------------------------------
   NB : scoping via :where() pour garder une spécificité FAIBLE (celle du seul
   sélecteur d'élément). Ainsi, n'importe quelle surcharge à classe unique
   (.rkt-hero__title, .rkt-pagehero__title, .rkt-footer__title, blanc sur fond
   sombre…) l'emporte, sans course à la spécificité. */
:where(.rkt-scope, .rkt-section) h1,
:where(.rkt-scope, .rkt-section) h2,
:where(.rkt-scope, .rkt-section) h3 {
  font-family: var(--rkt-font-title);
  color: var(--rkt-navy);
  line-height: var(--rkt-lh-tight);
  font-weight: 700;
  margin: 0 0 var(--rkt-space-sm);
}
.rkt-section h2 { font-size: var(--rkt-fs-h2); }
.rkt-section h3 { font-size: var(--rkt-fs-h3); }

.rkt-lead {
  font-size: var(--rkt-fs-lead);
  color: var(--rkt-muted);
}

/* --- Conteneur & sections -------------------------------------------------- */
.rkt-container {
  width: 100%;
  max-width: var(--rkt-container);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}
.rkt-section { padding-block: var(--rkt-section-y); }
.rkt-section--cream { background: var(--rkt-cream); }
.rkt-section--navy  { background: var(--rkt-navy); color: #fff; }
.rkt-section--navy h2, .rkt-section--navy h3 { color: #fff; }

/* --- En-tête de section (eyebrow + titre + intro) -------------------------- */
.rkt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rkt-font-title);
  font-weight: 600;
  font-size: var(--rkt-fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rkt-gold-bright);
  margin-bottom: var(--rkt-space-xs);
}
.rkt-eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--rkt-gold);
  display: inline-block;
}
.rkt-section-head { max-width: 720px; margin-bottom: var(--rkt-space-lg); }
.rkt-section-head--center { margin-inline: auto; text-align: center; }
.rkt-section-head--center .rkt-eyebrow { justify-content: center; }

/* --- Boutons --------------------------------------------------------------- */
.rkt-btn {
  --_bg: var(--rkt-navy);
  --_fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  font-family: var(--rkt-font-title);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  color: var(--_fg);
  background: var(--_bg);
  border: 2px solid var(--_bg);
  border-radius: var(--rkt-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--rkt-t-fast), box-shadow var(--rkt-t-fast), background var(--rkt-t-fast);
}
.rkt-btn:hover { transform: translateY(-2px); box-shadow: var(--rkt-shadow); }
.rkt-btn:focus-visible { outline: 3px solid var(--rkt-gold-bright); outline-offset: 3px; }

.rkt-btn--gold  { --_bg: var(--rkt-gold-bright); --_fg: var(--rkt-navy-deep); }
.rkt-btn--ghost { --_bg: transparent; --_fg: var(--rkt-navy); border-color: var(--rkt-navy); }
.rkt-btn--ghost:hover { background: var(--rkt-navy); color: #fff; }
.rkt-btn--wa    { --_bg: var(--rkt-whatsapp); --_fg: #fff; border-color: var(--rkt-whatsapp); }

/* --- Badges / puces catégorie ---------------------------------------------- */
.rkt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  font-size: var(--rkt-fs-small);
  font-weight: 600;
  color: var(--rkt-navy);
  background: var(--rkt-gold-soft);
  border-radius: var(--rkt-radius-pill);
}

/* --- Cartes (base réutilisable) -------------------------------------------- */
.rkt-card {
  background: #fff;
  border: 1px solid var(--rkt-line);
  border-radius: var(--rkt-radius);
  box-shadow: var(--rkt-shadow-sm);
  overflow: hidden;
  transition: transform var(--rkt-t), box-shadow var(--rkt-t);
}
.rkt-card:hover { transform: translateY(-6px); box-shadow: var(--rkt-shadow); }

/* --- Accessibilité --------------------------------------------------------- */
.rkt-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.rkt-scope a:focus-visible,
.rkt-section a:focus-visible { outline: 3px solid var(--rkt-gold-bright); outline-offset: 3px; }

/* --- Animations discrètes au scroll (activées par assets/js/rkt-main.js) ----
   Le masquage initial ne s'applique QUE si le JS est actif (classe .rkt-js
   posée très tôt dans le <head>). Ainsi, sans JavaScript — ou si l'observer
   échoue — le contenu reste visible : jamais de contenu bloqué en invisible. */
.rkt-js .rkt-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--rkt-ease), transform 0.7s var(--rkt-ease);
  will-change: opacity, transform;
}
.rkt-js .rkt-reveal.is-visible { opacity: 1; transform: none; }

/* Respect des préférences utilisateur (accessibilité) */
@media (prefers-reduced-motion: reduce) {
  .rkt-js .rkt-reveal { opacity: 1; transform: none; transition: none; }
  .rkt-btn:hover, .rkt-card:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}