/**
 * Roadloisirs — Overrides globaux
 *
 * Règles s'appliquant à l'ensemble du thème.
 * Pour les composants spécifiques, voir assets/css/components/
 * Pour les pages spécifiques, voir assets/css/pages/
 */

/* ============================================================
   BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--rl-font-primary);
  color: var(--rl-bleu-fonce);
  background-color: var(--rl-blanc);
}

/* Titres éditoriaux (sections maison) */
.editorial-title,
.section-title {
  font-family: var(--rl-font-editorial);
  font-weight: var(--rl-weight-bold);
}

/* Liens */
a {
  color: var(--rl-bleu-fonce);
  text-decoration: none;
}

a:hover {
  color: var(--rl-orange-fonce);
}

/* ============================================================
   UTILITAIRES ROADLOISIRS
   ============================================================ */

.rl-container {
  max-width: var(--rl-max-width);
  padding-inline: var(--rl-content-padding);
  margin-inline: auto;
}

/* Fond foncé (sections navy/footer) */
.rl-dark {
  background-color: var(--rl-bleu-fonce);
  color: var(--rl-blanc-2);
}

.rl-dark a {
  color: var(--rl-blanc-2);
}

.rl-dark a:hover {
  color: var(--rl-blanc);
}

/* ============================================================
   BOUTONS
   ============================================================ */

.btn-primary,
.btn.btn-primary {
  background-color: var(--rl-bleu-fonce);
  border-color: var(--rl-bleu-fonce);
  color: var(--rl-blanc);
  font-family: var(--rl-font-primary);
  font-weight: var(--rl-weight-bold);
  border-radius: var(--rl-border-radius);
}

.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--rl-orange);
  border-color: var(--rl-orange);
}

.btn-cta {
  background-color: var(--rl-orange);
  border-color: var(--rl-orange);
  color: var(--rl-blanc);
  font-family: var(--rl-font-primary);
  font-weight: var(--rl-weight-bold);
  border-radius: var(--rl-border-radius);
}

.btn-cta:hover {
  background-color: var(--rl-orange-hover);
  border-color: var(--rl-orange-hover);
  color: var(--rl-blanc);
}

/* ============================================================
   INPUTS / FORMULAIRES
   ============================================================ */

.form-control,
input[type="text"],
input[type="email"],
input[type="search"] {
  border: var(--rl-search-border);
  border-radius: var(--rl-border-radius);
  font-family: var(--rl-font-primary);
  color: var(--rl-bleu-fonce);
  background-color: var(--rl-blanc);
}

.form-control:focus {
  border-color: var(--rl-bleu-fonce);
  box-shadow: 0 0 0 2px var(--rl-bleu-fonce-20);
  outline: none;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */

.breadcrumb {
  font-family: var(--rl-font-primary);
  font-size: var(--rl-text-xs);
  color: var(--rl-bleu-fonce);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--rl-bleu-fonce-20);
}

/* ============================================================
   RESPONSIVE — Mobile first
   ============================================================ */

@media (max-width: 767.98px) {
  .rl-container {
    padding-inline: var(--rl-space-s);
  }
}

/* HiPay controller iframe — inline par défaut → crée une line-box de ~10px même à height:0 */
iframe[id^="hipay-controller"] {
  display: block;
}