/* css/veronique-colors.css
   ==========================================================
   Surcharge couleurs du thème StartBootstrap (styles.css)
   Palette demandée (issue de veronique-olivier-1024.png) :
   - Vert  : #2E6754
   - Beige : #AC9E99
   - Bleu  : #244571

   Objectif :
   - Remplacer les couleurs "primary/secondary" du thème
   - Refaire les gradients (text-gradient / bg-gradient-primary-to-secondary)
   - Garder Bootstrap intact : on override proprement en fin de cascade
   ========================================================== */

:root{
  --vo-green: #2E6754;
  --vo-blue:  #244571;
  --vo-beige: #AC9E99;

  /* RGB utiles pour certains calculs Bootstrap */
  --vo-green-rgb: 46, 103, 84;
  --vo-blue-rgb:  36, 69, 113;
  --vo-beige-rgb: 172, 158, 153;

  /* On force l'intention "primary/secondary" via variables */
  --bs-primary: var(--vo-green);
  --bs-primary-rgb: var(--vo-green-rgb);

  --bs-secondary: var(--vo-blue);
  --bs-secondary-rgb: var(--vo-blue-rgb);

  /* Liens */
  --bs-link-color: var(--vo-blue);
  --bs-link-hover-color: var(--vo-green);
}

/* --------- Textes / liens --------- */
.text-primary{ color: var(--vo-green) !important; }
.text-secondary{ color: var(--vo-blue) !important; }

.link-primary,
a{ color: var(--vo-blue) !important; }
a:hover,
a:focus{ color: var(--vo-green) !important; }

/* --------- Fonds / badges / features --------- */
.bg-primary{ background-color: var(--vo-green) !important; }
.bg-secondary{ background-color: var(--vo-blue) !important; }

/* Teinte "light" plus chaude (beige très clair) */
.bg-light{
  background-color: rgba(var(--vo-beige-rgb), 0.16) !important;
}

/* --------- Boutons --------- */
.btn-primary{
  background-color: var(--vo-green) !important;
  border-color: var(--vo-green) !important;
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: #255645 !important; /* vert un peu plus sombre */
  border-color: #255645 !important;
}

.btn-outline-primary{
  color: var(--vo-green) !important;
  border-color: var(--vo-green) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background-color: var(--vo-green) !important;
  border-color: var(--vo-green) !important;
  color: #fff !important;
}

/* --------- Gradients du template --------- */
.bg-gradient-primary-to-secondary{
  background: linear-gradient(135deg, var(--vo-green) 0%, var(--vo-blue) 100%) !important;
}

/* Le template utilise un "text-gradient" (texte en dégradé) */
.text-gradient{
  background: linear-gradient(135deg, var(--vo-green) 0%, var(--vo-blue) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* --------- Petites touches cohérentes --------- */
.border-primary{ border-color: rgba(var(--vo-green-rgb), 0.35) !important; }
.border-secondary{ border-color: rgba(var(--vo-blue-rgb), 0.35) !important; }

.form-control:focus{
  border-color: rgba(var(--vo-green-rgb), 0.55) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--vo-green-rgb), .15) !important;
}
/* ==========================================================
   CONTRASTE BOUTONS (lisibilité WCAG)
   - On force une couleur de texte adaptée aux fonds
   ========================================================== */

/* Bouton principal : fond vert => texte blanc */
.btn-primary{
  background-color: var(--vo-green) !important;
  border-color: var(--vo-green) !important;
  color: #fff !important;               /* ✅ lisible */
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: #255645 !important; /* vert + sombre */
  border-color: #255645 !important;
  color: #fff !important;
}

/* Assure que les icônes/texte internes restent blancs */
.btn-primary *{ color: #fff !important; }

/* Bouton “dark” du thème : on le convertit en “bleu maison” lisible */
.btn-outline-dark{
  border-color: var(--vo-blue) !important;
  color: var(--vo-blue) !important;
}
.btn-outline-dark:hover,
.btn-outline-dark:focus{
  background-color: var(--vo-blue) !important;
  border-color: var(--vo-blue) !important;
  color: #fff !important;
}
.btn-outline-dark:hover *,
.btn-outline-dark:focus *{ color:#fff !important; }

/* Optionnel : bouton outline primary (vert) */
.btn-outline-primary{
  border-color: var(--vo-green) !important;
  color: var(--vo-green) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background-color: var(--vo-green) !important;
  border-color: var(--vo-green) !important;
  color:#fff !important;
}
.btn-outline-primary:hover *,
.btn-outline-primary:focus *{ color:#fff !important; }
/* ==========================================================
   BOUTONS : si fond plein -> texte blanc (Bootstrap 5 vars)
   ========================================================== */

/* Boutons “pleins” (fond coloré) : texte blanc en toutes circonstances */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-info,
.btn-dark{
  --bs-btn-color: #fff !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-disabled-color: #fff !important;

  color: #fff !important; /* sécurité */
}

/* Ton mapping palette */
.btn-primary{
  --bs-btn-bg: var(--vo-green) !important;
  --bs-btn-border-color: var(--vo-green) !important;
  --bs-btn-hover-bg: #255645 !important;
  --bs-btn-hover-border-color: #255645 !important;
  --bs-btn-active-bg: #1f4a3b !important;
  --bs-btn-active-border-color: #1f4a3b !important;
}

.btn-secondary{
  --bs-btn-bg: var(--vo-blue) !important;
  --bs-btn-border-color: var(--vo-blue) !important;
  --bs-btn-hover-bg: #1e3b61 !important;
  --bs-btn-hover-border-color: #1e3b61 !important;
  --bs-btn-active-bg: #18304f !important;
  --bs-btn-active-border-color: #18304f !important;
}

/* Sécurité : tout contenu dans le bouton reste blanc */
.btn-primary *,
.btn-secondary *,
.btn-success *,
.btn-danger *,
.btn-info *,
.btn-dark *{
  color: #fff !important;
}

/* Boutons outline : texte coloré par défaut, blanc au hover quand le fond devient plein */
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active{
  color:#fff !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active{
  color:#fff !important;
}
.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active{
  color:#fff !important;
}