# ================================================================
#  DivServices — PALETTE UNIQUE (CSS pur, aucun JavaScript)
#  Fichier : css/ds-palette.css  ·  charge en dernier sur chaque page
#  ----------------------------------------------------------------
#  C'est ICI qu'on change une couleur. Deux themes seulement :
#     html            -> theme CLAIR
#     html.dark       -> theme SOMBRE
#  Regle de survie : un texte ne doit jamais avoir la meme couleur
#  que son fond. Si tu changes un fond, verifie le texte juste apres.
# ================================================================

:root {
  /* --- Theme CLAIR (valeurs validees) --- */
  --ds-fond:        #eaf4fc;   /* fond general des pages          */
  --ds-sur:         #ffffff;   /* cartes, champs, blocs           */
  --ds-texte:       #16274b;   /* titres et texte principal       */
  --ds-texte-doux:  #44537a;   /* texte secondaire                */
  --ds-mention:     #5a6786;   /* petites mentions                */
  --ds-accent:      #3b6fd4;   /* bleu de marque                  */
  --ds-bordure:     #d9e3f5;   /* contours des cartes             */
  --ds-sombre:      #16274b;   /* bouton principal (fond)         */
  --ds-sombre-texte:#ffffff;   /* texte du bouton principal       */
  --ds-survol:      #22355e;   /* bouton principal au survol      */
}

html.dark {
  /* --- Theme SOMBRE --- */
  --ds-fond:        #0a1229;
  --ds-sur:         #142142;
  --ds-texte:       #eaf0ff;
  --ds-texte-doux:  #c9d4f5;
  --ds-mention:     #9dabd2;
  --ds-accent:      #60a5fa;
  --ds-bordure:     #22305f;
  --ds-sombre:      #ffffff;
  --ds-sombre-texte:#16274b;
  --ds-survol:      #dbe4f5;
}

/* ---------- 1. Surfaces de base ---------- */
body { background-color: var(--ds-fond) !important; color: var(--ds-texte) !important; }
.carte, .card, .bg-white { background-color: var(--ds-sur) !important; color: var(--ds-texte) !important; border-color: var(--ds-bordure); }

/* ---------- 2. Textes ---------- */
h1, h2, h3, h4, .titre { color: var(--ds-texte) !important; }
p, li, label, td, th, .texte { color: var(--ds-texte-doux) !important; }
.mention, .opacity-60, .opacity-65 { color: var(--ds-mention) !important; opacity: 1 !important; }
a { color: var(--ds-accent); }
.lien-nu { color: var(--ds-texte) !important; }
.accent, .text-ds-accent { color: var(--ds-accent) !important; }

/* ---------- 3. Boutons ---------- */
.btn-principal, .btn-menu-connexion {
  background-color: var(--ds-sombre) !important;
  color: var(--ds-sombre-texte) !important;
  border: 1px solid transparent;
}
.btn-principal:hover, .btn-menu-connexion:hover { background-color: var(--ds-survol) !important; color: var(--ds-sombre-texte) !important; }

.btn-secondaire { background-color: var(--ds-sur) !important; color: var(--ds-texte) !important; border: 1px solid var(--ds-bordure); }
.btn-secondaire:hover { background-color: color-mix(in srgb, var(--ds-accent) 12%, var(--ds-sur)) !important; }

/* Boutons toujours sur leur propre couleur (ne dependent pas du theme) */
.btn-offre-pro { background-image: linear-gradient(90deg,#1654d8,#3b82f6) !important; color: #ffffff !important; }
.btn-offre-pro * { color: #ffffff !important; }
.btn-offre-premium { background-image: linear-gradient(90deg,#f59e0b,#fbbf24) !important; color: #16274b !important; }
.btn-offre-premium * { color: #16274b !important; }

/* ---------- 4. Blocs a fond SOMBRE (identiques dans les 2 themes) ---------- */
.bloc-sombre { background-color: #16274b; color: #ffffff; }
.bloc-sombre h1, .bloc-sombre h2, .bloc-sombre h3, .bloc-sombre p, .bloc-sombre span, .bloc-sombre a { color: #ffffff !important; }
.bloc-sombre .btn-sur-blanc { background-color: #ffffff !important; color: #16274b !important; }
.bloc-sombre .btn-sur-blanc:hover { background-color: #e8eefb !important; }

/* ---------- 5. Champs ---------- */
input, select, textarea {
  background-color: var(--ds-sur) !important;
  color: var(--ds-texte) !important;
  border-color: var(--ds-bordure) !important;
}
input::placeholder, textarea::placeholder { color: var(--ds-mention) !important; }

/* ---------- 6. Mise au point et survol des liens ---------- */
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

/* ---------- 7. Fleche des liens du pied de page ---------- */
.lien-footer::before { content: '›'; opacity: 0; margin-right: 0; transition: opacity .2s, margin .2s; }
.lien-footer:hover::before { opacity: 1; margin-right: 6px; }