/* ==========================================================================
   06-BANDEAUX.CSS — Logo et bandeau de chaque page
   --------------------------------------------------------------------------
   Chaque page porte sur <body> un attribut data-bandeau="…" qui choisit
   une déclinaison du logo Weecount. Le bandeau (barre de navigation)
   reprend exactement la couleur de fond du logo, pour que le logo s'y
   fonde sans cadre visible.

   Pour changer la couleur d'une page : modifier data-bandeau dans son
   <body> ET l'image du logo (assets/img/logos/weecount-<couleur>.png).
   ========================================================================== */

/* --- Variables par déclinaison ------------------------------------------- */
/* fond    = couleur de fond du logo (reprise à l'identique)
   texte   = couleur des liens du bandeau (contraste vérifié ≥ 4.5:1)
   trait   = filet sous le lien actif / survolé (couleur secondaire du logo)
   btn-*   = bouton « diagnostic gratuit » du bandeau                        */

[data-bandeau="beige"] {
  --bandeau-fond: #FFFAE6; --bandeau-texte: #45341A; --bandeau-trait: #95926B;
  --bandeau-btn-fond: #45341A; --bandeau-btn-texte: #FFFAE6;
}
[data-bandeau="bleu-flash"] {
  --bandeau-fond: #5F9EA0; --bandeau-texte: #1B1B1B; --bandeau-trait: #FFFFFB;
  --bandeau-btn-fond: #1B1B1B; --bandeau-btn-texte: #FFFFFB;
}
[data-bandeau="marron"] {
  --bandeau-fond: #EBE4D5; --bandeau-texte: #043922; --bandeau-trait: #C36839;
  --bandeau-btn-fond: #043922; --bandeau-btn-texte: #EBE4D5;
}
[data-bandeau="orange-flash"] {
  --bandeau-fond: #FFB13B; --bandeau-texte: #170B46; --bandeau-trait: #7E46E2;
  --bandeau-btn-fond: #170B46; --bandeau-btn-texte: #FFB13B;
}
[data-bandeau="vert-adore"] {
  --bandeau-fond: #2F7751; --bandeau-texte: #FFFFFF; --bandeau-trait: #FFB469;
  --bandeau-btn-fond: #02260A; --bandeau-btn-texte: #FFB469;
}
[data-bandeau="vert"] {
  --bandeau-fond: #F0FFF0; --bandeau-texte: #1B1B1B; --bandeau-trait: #CD5C5C;
  --bandeau-btn-fond: #1B1B1B; --bandeau-btn-texte: #F0FFF0;
}
[data-bandeau="violet"] {
  --bandeau-fond: #0D274E; --bandeau-texte: #F0CDFF; --bandeau-trait: #954CED;
  --bandeau-btn-fond: #F0CDFF; --bandeau-btn-texte: #0D274E;
}


/* --- Application au bandeau ---------------------------------------------- */

[data-bandeau] .entete,
[data-bandeau] .barre-nav {
  background: var(--bandeau-fond);
  color: var(--bandeau-texte);
  border-bottom-color: transparent;
}

/* Barre haute (liens de service) : même fond, filet discret entre les deux. */
[data-bandeau] .barre-haute {
  background: var(--bandeau-fond);
  border-bottom: 1px solid color-mix(in srgb, var(--bandeau-texte) 18%, transparent);
}
[data-bandeau] .liens-service a,
[data-bandeau] .barre-haute-droite { color: var(--bandeau-texte); opacity: .8; }
[data-bandeau] .liens-service a:hover,
[data-bandeau] .liens-service a[aria-current="page"] { opacity: 1; text-decoration: underline; text-decoration-color: var(--bandeau-trait); text-underline-offset: 4px; }

[data-bandeau] .nav-principale a { color: var(--bandeau-texte); }
[data-bandeau] .nav-principale > ul > li > a::after { background: var(--bandeau-trait); height: 2px; }

[data-bandeau] .entete .bouton {
  --fond: var(--bandeau-btn-fond);
  --texte: var(--bandeau-btn-texte);
}
[data-bandeau] .entete .bouton:hover {
  background: transparent;
  border-color: var(--bandeau-texte);
  color: var(--bandeau-texte);
}

[data-bandeau] .bouton-menu span { background: var(--bandeau-texte); }

/* Menu mobile : même couleur que le bandeau, pour la continuité. */
[data-bandeau] .panneau-menu {
  background: var(--bandeau-fond);
  color: var(--bandeau-texte);
}
[data-bandeau] .panneau-menu a { color: var(--bandeau-texte); }


/* --- Logo image ---------------------------------------------------------- */

.marque-logo {
  display: block;
  height: 44px;
  width: auto;
}
@media (max-width: 640px) {
  .marque-logo { height: 36px; }
}