/* ============================================
   CHARTE GRAPHIQUE — DISPENSAIRE FRANÇAIS
   Couleurs : #176B85 (teal) / #87C1CD (clair)
   Polices : Myriad Pro (corps) / Mangal (titres)
   ============================================ */

/* --- Polices --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  /* Myriad Pro n'est pas disponible sur Google Fonts — on utilise Noto Sans comme substitut proche */
  --font-body: 'Noto Sans', 'Myriad Pro', system-ui, sans-serif;
  --font-headings: 'Noto Sans', 'Mangal', system-ui, sans-serif;
}

/* --- Couleur d'accent principale --- */
/* Ghost utilise --ghost-accent-color pour les boutons et liens.
   La couleur est configurée dans Admin > Design & Branding > Accent color.
   Mettre #176B85 dans l'interface Ghost suffit pour les boutons. */

/* --- Couleur bouton CTA hero (override mauve → teal) --- */
.bg-brand,
[class*="bg-brand"] {
  background-color: #176B85 !important;
}

.text-brand,
[class*="text-brand"] {
  color: #176B85 !important;
}

.border-brand,
[class*="border-brand"] {
  border-color: #176B85 !important;
}

.hover\:bg-brand:hover {
  background-color: #176B85 !important;
}

.hover\:text-brand:hover {
  color: #176B85 !important;
}

.focus-within\:border-brand:focus-within {
  border-color: #176B85 !important;
}

/* --- Liens dans le contenu --- */
.ghost-content a:not([class*=kg-],[class*=btn]) {
  text-decoration-color: #176B85;
}

.ghost-content a:not([class*=kg-],[class*=btn]):hover {
  color: #176B85;
}

/* --- Titres en teal --- */
h1, h2, h3 {
  color: #176B85;
}

/* --- Couleur accent sur les blockquotes --- */
.ghost-content blockquote {
  border-inline-start-color: #176B85;
}

/* --- Bouton "Voir toutes les actualités" --- */
.bg-bgr-reverse {
  background-color: #176B85;
}
.text-typ-reverse {
  color: #ffffff;
}

/* --- Footer : fond sombre (le fond est aussi posé en inline dans footer.hbs) --- */
[data-footer] {
  background-color: #0D3D52;
}

/* --- Barre de progression --- */
[data-progress-bar]::-webkit-progress-value,
[data-progress-bar]::-moz-progress-bar {
  background: #176B85;
}

/* --- Slider bullets actifs --- */
.glide__bullet--active[data-glide-dir] {
  background-color: #176B85;
}

/* --- Texte boutons hero --- */
.bg-brand,
.bg-brand span,
a.bg-brand,
a.bg-brand span,
[class*="bg-brand"],
[class*="bg-brand"] span {
  color: #ffffff !important;
}

/* --- Bouton contour hero : texte teal, hover texte blanc --- */
.border-brand.bg-transparent {
  color: #176B85 !important;
}
.border-brand.bg-transparent:hover {
  color: #ffffff !important;
  background-color: #176B85 !important;
}

/* --- Forcer couleur texte sur tous les liens/boutons teal --- */
a[class*="bg-brand"],
a[class*="bg-brand"] * {
  color: #ffffff !important;
}

/* ============================================
   BOUTONS — TEXTE BLANC FORCÉ
   ============================================ */

/* Bouton plein teal — texte blanc */
a.bg-brand,
button.bg-brand,
.bg-brand {
  color: #ffffff !important;
  background-color: #176B85 !important;
}

a.bg-brand span,
button.bg-brand span,
.bg-brand span {
  color: #ffffff !important;
}

/* Bouton contour — texte teal par défaut, blanc au hover */
a[style*="border"],
.border-2.border-brand {
  color: #176B85 !important;
}

/* Surcharge Ghost accent color partout */
[style*="--ghost-accent-color"] a,
.text-brand-contrast {
  color: #ffffff !important;
}

/* Ciblage direct hero CTA */
[data-hero] a[class*="bg-brand"],
[data-hero] a[class*="bg-brand"] span {
  color: #ffffff !important;
}

[data-hero] a[class*="border-brand"] {
  color: #176B85 !important;
}

[data-hero] a[class*="border-brand"]:hover {
  color: #ffffff !important;
}

/* ============================================
   BOUTONS NATIFS GHOST — TEAL + TEXTE BLANC
   ============================================ */

/* Bouton Ghost natif (kg-btn) */
.kg-btn,
.kg-btn-accent,
a.kg-btn,
a.kg-btn-accent {
  background-color: #176B85 !important;
  color: #ffffff !important;
  border-color: #176B85 !important;
}

.kg-btn *,
.kg-btn-accent * {
  color: #ffffff !important;
}

/* Bouton dans les blocs callout */
.kg-callout-card .kg-btn {
  background-color: #176B85 !important;
  color: #ffffff !important;
}

/* Tous les boutons avec style inline background teal */
a[style*="background:#176B85"],
a[style*="background: #176B85"] {
  color: #ffffff !important;
}

a[style*="background:#176B85"] *,
a[style*="background: #176B85"] * {
  color: #ffffff !important;
}

/* Supprimer espace vide section About sur homepage */
[data-about] {
  display: none !important;
}

/* --- Animation pulse CTA "Faire un don" --- */
@keyframes pulse-don {
  0%   { box-shadow: 0 0 0 0 rgba(235,183,12,0.5); }
  60%  { box-shadow: 0 0 0 7px rgba(235,183,12,0); }
  100% { box-shadow: 0 0 0 0 rgba(235,183,12,0); }
}

/* ============================================
   FOOTER — GRILLE RESPONSIVE
   (remplace la grille inline non-responsive)
   ============================================ */
.df-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1.8fr;
  gap: 24px;
  padding: 2.5rem 0;
}
@media (max-width: 900px) {
  .df-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}
@media (max-width: 560px) {
  .df-footer-grid { grid-template-columns: 1fr; gap: 24px; padding: 2rem 0; }
}

/* ============================================
   NEWSLETTER FOOTER — retour visuel
   Ghost pose .loading / .success / .error sur le <form data-members-form>
   ============================================ */
.df-newsletter-form .df-nl-msg { display: none; }
.df-newsletter-form.success .df-nl-ok { display: block; }
.df-newsletter-form.error .df-nl-err { display: block; }
.df-newsletter-form .df-nl-loading { display: none; }
.df-newsletter-form.loading .df-nl-loading { display: inline; }
.df-newsletter-form.loading .df-nl-label { display: none; }

/* ============================================
   SÉLECTEUR DE LANGUE FR / EN  (2026-09-12)
   Classes maison : le build Tailwind du thème n'est pas rejoué
   (pas de node_modules), donc aucune classe utilitaire nouvelle
   n'existerait dans app.css. Tout est défini ici.
   ============================================ */

.df-lang-flag {
  flex-shrink: 0;
  display: block;
  width: 21px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* --- Variante entête (dropdown, desktop uniquement) --- */
.df-lang--dropdown { position: relative; display: none; }
@media (min-width: 768px) { .df-lang--dropdown { display: block; } }

.df-lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
  background: transparent;
  border: 1px solid #dce8ed;
  border-radius: 0.5rem;
  cursor: pointer;
}
.df-lang-toggle:hover { background: #f5fafb; }
.df-lang-toggle .icon { width: 18px; height: 18px; }

.df-lang-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  min-width: 10rem;
  margin: 0.375rem 0 0;
  padding: 0.375rem;
  flex-direction: column;
  gap: 0.125rem;
  list-style: none;
  background: #ffffff;
  border: 1px solid #dce8ed;
  border-radius: 0.5rem;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.28);
}
.df-lang-menu.is-open { display: flex; }

.df-lang-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.375rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
a.df-lang-item:hover { background: #f5fafb; }
.df-lang-item--current { background: #eef7f9; font-weight: 600; }

/* --- Variante menu mobile (les deux langues côte à côte) --- */
.df-lang--inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.df-lang-label { color: #666; }
.df-lang--inline a.df-lang-item { border: 1px solid #dce8ed; }

.df-lang-mobile-row {
  padding-bottom: 1rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #dce8ed;
}