/* ============================================================
   CHARTE GRAPHIQUE HARMONYE — application globale
   Base neumorphique (#e7ebf0, #303943, #0072ff) déjà posée par
   user-extended.css. Ce fichier étend la charte aux modules
   restés hors charte : Login Form, fil d'Ariane, pagination,
   « Lire la suite », tags populaires, « Haut de page ».
   Style de référence : la barre glass de « Divers »
   (cf. glass-menu.css, mêmes dégradés et ombres).
   ============================================================ */

:root {
  --ch-fond: #e7ebf0;
  --ch-texte: #303943;
  --ch-accent: #0072ff;
  --ch-ombre-s: rgba(163, 177, 198, 0.6);   /* ombre sombre */
  --ch-ombre-c: rgba(255, 255, 255, 0.9);   /* ombre claire */
}

/* ============================================================
   1. POLICE POPPINS SUR TOUT LE SITE
   (les menus l'ont déjà via glass-menu.css ; le reste non)
   ============================================================ */
body,
.container-header,
.container-footer,
.sidebar-left,
.sidebar-right,
.com-content-article {
  font-family: 'Poppins', sans-serif !important;
}

/* ============================================================
   1 bis. COULEURS DE CONTENU — remplace les couleurs Cassiopeia
   par défaut (texte noir #171717, liens rouge #ce3c37) par la
   charte : texte #303943, liens #0072ff (bleu accent).
   S'applique aux articles, catégories, contact, recherche...
   ============================================================ */
body {
  color: var(--ch-texte) !important;
}

/* Couleurs Cassiopeia surchargées à la racine (utilisées par les
   titres, icônes, pagination...) */
:root {
  --body-color: var(--ch-texte);
  --link-color: var(--ch-accent);
  --link-hover-color: var(--ch-accent);
  --cassiopeia-color-primary: var(--ch-accent);
  --cassiopeia-color-link: var(--ch-accent);
  --cassiopeia-color-hover: var(--ch-accent);
}

/* Titres : couleur charte (au lieu du noir pur) + Poppins */
h1, h2, h3, h4, h5, h6,
.page-header h1, .page-header h2,
.com-content-article h1, .com-content-article h2,
.item-page h1 {
  color: var(--ch-texte) !important;
  font-family: 'Poppins', sans-serif !important;
}

/* Liens de contenu : bleu accent au lieu du rouge Cassiopeia */
a,
.com-content-article a,
.item-page a,
.com-content-category-blog a,
.com-content-article__body a,
main a:not(.btn) {
  color: var(--ch-accent) !important;
}
a:hover,
a:focus,
.com-content-article a:hover,
.item-page a:hover,
main a:not(.btn):hover {
  color: var(--ch-link-hover, var(--ch-accent)) !important;
  text-decoration: underline !important;
}

/* ============================================================
   9. CHAMPS DE FORMULAIRES GÉNÉRIQUES — neumorphisme partout
   (contact, recherche avancée, inscription, commentaires...)
   ============================================================ */
main .form-control,
main textarea.form-control,
main select.form-select,
.com-content-article__body .form-control,
.com-content-article__body textarea {
  background-color: var(--ch-fond) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: inset 4px 4px 8px var(--ch-ombre-s),
              inset -4px -4px 8px var(--ch-ombre-c) !important;
  color: var(--ch-texte) !important;
  font-family: 'Poppins', sans-serif !important;
  outline: none !important;
}
main .form-control:focus,
main textarea.form-control:focus,
main select.form-select:focus {
  box-shadow: inset 4px 4px 8px var(--ch-ombre-s),
              inset -4px -4px 8px var(--ch-ombre-c),
              0 0 0 2px rgba(0, 114, 255, .35) !important;
}

/* Boutons génériques de contenu (formulaire contact, etc.) */
main button[type="submit"],
main .btn.btn-primary {
  background-color: var(--ch-fond) !important;
  border: none !important;
  border-radius: 14px !important;
  color: var(--ch-accent) !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
  box-shadow: 6px 6px 12px var(--ch-ombre-s),
              -6px -6px 12px var(--ch-ombre-c) !important;
  transition: all .2s ease !important;
}
main button[type="submit"]:hover,
main .btn.btn-primary:hover {
  color: #ffffff !important;
  background-color: var(--ch-accent) !important;
  box-shadow: 0 6px 20px rgba(0, 114, 255, .35) !important;
}

/* ============================================================
   10. RÉSULTATS DE RECHERCHE (com_finder) — habillage des blocs
   ============================================================ */
.com-finder .result-title,
.finder .result-title {
  font-family: 'Poppins', sans-serif !important;
}
.com-finder .result-title a,
.finder .result-title a {
  color: var(--ch-accent) !important;
}
.com-finder .result,
.finder .result {
  font-family: 'Poppins', sans-serif !important;
  color: var(--ch-texte) !important;
}

/* Surlignage des termes recherchés : bleu clair charte (au lieu du jaune) */
mark,
.mark,
.finder mark {
  background-color: rgba(0, 114, 255, .15) !important;
  color: var(--ch-accent) !important;
  border-radius: 4px !important;
  padding: 0 3px !important;
  font-weight: 600 !important;
}

/* ============================================================
   2. ÉTIQUETTE « RECHERCHER » (blanche sur fond clair)
   ============================================================ */
.container-header .mod-finder label,
.container-header .finder label {
  color: var(--ch-texte) !important;
}

/* ============================================================
   3. LOGIN FORM — habillage glass identique à « Divers »
   ============================================================ */

/* Le formulaire complet reçoit l'habillage glass */
.sidebar-right .mod-login {
  position: relative;
  display: block;
  padding: 10px 14px;
  border-radius: 26px;
  background: linear-gradient(135deg, #e6e6e6, #bfbfbf);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow:
    inset -3px -3px 6px rgba(0, 0, 0, .25),
    inset 0 0 9px rgba(255, 255, 255, .3),
    inset 2px 4px 8px rgba(255, 255, 255, 1),
    inset -6px -12px 18px rgba(0, 0, 0, .25),
    0 6px 6px rgba(0, 0, 0, .35),
    0 2px 2px rgba(0, 0, 0, .55),
    6px 10px 8px rgba(0, 0, 0, .2);
}

/* Intérieur : on neutralise les espacements Bootstrap/Cassiopeia.
   Groupes input+icône sur UNE ligne (flex nowrap + gap). */
.sidebar-right .mod-login .form-group { margin: 0 0 10px 0; }
.sidebar-right .mod-login .input-group {
  padding: 0;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  background: transparent;
  border: 0;
}

/* Champs identifiant / mot de passe (neumorphisme creusé, charte) */
.sidebar-right .mod-login input.form-control {
  background-color: var(--ch-fond) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: inset 4px 4px 8px var(--ch-ombre-s),
              inset -4px -4px 8px var(--ch-ombre-c) !important;
  padding: 10px 15px !important;
  color: var(--ch-texte) !important;
  outline: none !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
}
/* Dans un groupe, le champ cède la place à son icône (pas de wrap) */
.sidebar-right .mod-login .input-group > input.form-control {
  flex: 1 1 1%;
  width: auto;
  min-width: 0;
}

/* Icônes de groupe (utilisateur) et bouton œil : pilules neumorphiques */
.sidebar-right .mod-login .input-group-text,
.sidebar-right .mod-login .input-password-toggle {
  background-color: var(--ch-fond) !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--ch-texte) !important;
  box-shadow: 4px 4px 8px var(--ch-ombre-s),
              -4px -4px 8px var(--ch-ombre-c) !important;
  cursor: pointer;
}

/* Case « Maintenir la connexion » : accent charte */
.sidebar-right .mod-login .form-check-input:checked {
  background-color: var(--ch-accent) !important;
  border-color: var(--ch-accent) !important;
}

/* Bouton CONNEXION : pilule neumorphique sortante */
.sidebar-right .mod-login button[type="submit"],
.sidebar-right .mod-login button.btn-primary {
  background-color: var(--ch-fond) !important;
  border: none !important;
  border-radius: 14px !important;
  color: var(--ch-accent) !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
  box-shadow: 6px 6px 12px var(--ch-ombre-s),
              -6px -6px 12px var(--ch-ombre-c) !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  padding: 10px 20px !important;
}

/* Survole : plein accent bleu (cohérent avec user-extended.css) */
.sidebar-right .mod-login button[type="submit"]:hover,
.sidebar-right .mod-login button.btn-primary:hover {
  color: #ffffff !important;
  background-color: var(--ch-accent) !important;
  box-shadow: 0 6px 20px rgba(0, 114, 255, .35) !important;
}

/* Liens « Mot de passe perdu ? » / « Identifiant perdu ? » */
.sidebar-right .mod-login ul.mod-login__options li a {
  color: var(--ch-texte) !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}
.sidebar-right .mod-login ul.mod-login__options li a:hover {
  color: var(--ch-accent) !important;
  text-decoration: underline !important;
}

/* ============================================================
   4. TAGS POPULAIRES (sidebar gauche « Filtrer par ingrédients »
   et tout mod_tagspopular) — même logique glass que « Divers »
   ============================================================ */
.sidebar-right .mod-tagspopular ul,
.sidebar-left .mod-tagspopular ul {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 26px;
  list-style: none;
  background: linear-gradient(135deg, #e6e6e6, #bfbfbf);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow:
    inset -3px -3px 6px rgba(0, 0, 0, .25),
    inset 0 0 9px rgba(255, 255, 255, .3),
    inset 2px 4px 8px rgba(255, 255, 255, 1),
    inset -6px -12px 18px rgba(0, 0, 0, .25),
    0 6px 6px rgba(0, 0, 0, .35),
    0 2px 2px rgba(0, 0, 0, .55),
    6px 10px 8px rgba(0, 0, 0, .2);
}

/* Items : pilules cliquables, sans puces */
.sidebar-right .mod-tagspopular ul > li,
.sidebar-left .mod-tagspopular ul > li {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  min-height: 44px;
  border-radius: 26px;
  list-style: none;
}
.sidebar-right .mod-tagspopular ul > li::before,
.sidebar-left .mod-tagspopular ul > li::before { content: none; }

.sidebar-right .mod-tagspopular ul > li > a,
.sidebar-left .mod-tagspopular ul > li > a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 26px;
  background: transparent;
  box-shadow: none;
  color: #777 !important;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color .35s, text-shadow .35s;
}

/* NÉON BLEU au survol, comme les menus */
.sidebar-right .mod-tagspopular ul > li:hover,
.sidebar-left .mod-tagspopular ul > li:hover,
.sidebar-right .mod-tagspopular ul > li:focus-within,
.sidebar-left .mod-tagspopular ul > li:focus-within {
  outline: 2px solid #00b3ff;
  outline-offset: 0;
  box-shadow: 0 0 6px rgba(0, 179, 255, .45);
}

.sidebar-right .mod-tagspopular ul > li > a:hover,
.sidebar-right .mod-tagspopular ul > li > a:focus-visible,
.sidebar-left .mod-tagspopular ul > li > a:hover,
.sidebar-left .mod-tagspopular ul > li > a:focus-visible {
  color: #000 !important;
  text-shadow:
    0 0 4px #ffffff,
    0 0 8px #00b3ff,
    0 0 16px #4dd2ff,
    0 0 28px #4dd2ff;
}

/* ============================================================
   5. FIL D'ARIANE — pilule neumorphique creusée
   ============================================================ */
nav[aria-label="Breadcrumbs"] .breadcrumb,
.breadcrumb {
  background-color: var(--ch-fond) !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  box-shadow: inset 4px 4px 8px var(--ch-ombre-s),
              inset -4px -4px 8px var(--ch-ombre-c) !important;
  font-family: 'Poppins', sans-serif !important;
}
.breadcrumb a,
.breadcrumb .mod-breadcrumbs__divider,
.breadcrumb .divider,
.breadcrumb li {
  color: var(--ch-texte) !important;
}

/* ============================================================
   6. « LIRE LA SUITE » + « HAUT DE PAGE » — pilules charte
   ============================================================ */
p.readmore .btn,
p.readmore a.btn,
.back-to-top {
  background-color: var(--ch-fond) !important;
  border: none !important;
  border-radius: 14px !important;
  color: var(--ch-accent) !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
  box-shadow: 6px 6px 12px var(--ch-ombre-s),
              -6px -6px 12px var(--ch-ombre-c) !important;
  transition: all .2s ease !important;
}

p.readmore .btn:hover,
p.readmore a.btn:hover,
.back-to-top:hover {
  color: #ffffff !important;
  background-color: var(--ch-accent) !important;
  box-shadow: 0 6px 20px rgba(0, 114, 255, .35) !important;
}

/* ============================================================
   7. PAGINATION — pilules neumorphiques, active en accent
   ============================================================ */
.pagination {
  --pagination-active-bg: var(--ch-accent);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: 'Poppins', sans-serif !important;
}
.pagination a,
.pagination span {
  background-color: var(--ch-fond) !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--ch-texte) !important;
  box-shadow: 4px 4px 8px var(--ch-ombre-s),
              -4px -4px 8px var(--ch-ombre-c) !important;
  padding: 6px 12px !important;
}
.pagination .active span,
.pagination li.active span {
  background-color: var(--ch-accent) !important;
  color: #fff !important;
}

/* ============================================================
   8. SOUS-CATÉGORIES DES VUES BLOG — titres, badges, boutons +/−
   (bloc .com-content-category-blog__children remonté avant les
   articles par le template)
   ============================================================ */

/* Titre du bloc « Sous-catégories » : discret, souligné accent */
.com-content-category-blog__children > .page-header,
.com-content-category-blog__children > h3 {
  font-family: 'Poppins', sans-serif !important;
  color: var(--ch-texte) !important;
  border-bottom: 2px solid var(--ch-accent) !important;
  padding-bottom: 6px !important;
}

/* Titres des sous-catégories (Afrique, Entrées...) : Poppins, couleur charte */
.com-content-category-blog__child .page-header.item-title,
.com-content-category-blog__child h3 {
  font-family: 'Poppins', sans-serif !important;
}
.com-content-category-blog__child .page-header.item-title > a {
  color: var(--ch-texte) !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}
.com-content-category-blog__child .page-header.item-title > a:hover,
.com-content-category-blog__child .page-header.item-title > a:focus {
  color: var(--ch-accent) !important;
}

/* Badge « Nombre d'articles : N » : petite pastille neumorphique discrète
   (remplace le badge bleu massif bg-info de Bootstrap) */
.com-content-category-blog__child .badge.bg-info {
  background-color: var(--ch-fond) !important;
  background-image: none !important;
  color: var(--ch-texte) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: inset 3px 3px 6px var(--ch-ombre-s),
              inset -3px -3px 6px var(--ch-ombre-c) !important;
  padding: 4px 12px !important;
  margin-left: 10px !important;
  vertical-align: middle !important;
}

/* Boutons « + » / « − » de dépliage : pilules neumorphiques accent */
.com-content-category-blog__child .page-header .btn.btn-sm {
  background-color: var(--ch-fond) !important;
  border: none !important;
  border-radius: 999px !important;
  color: var(--ch-accent) !important;
  font-weight: 700 !important;
  box-shadow: 3px 3px 6px var(--ch-ombre-s),
              -3px -3px 6px var(--ch-ombre-c) !important;
  transition: all .2s ease !important;
}
.com-content-category-blog__child .page-header .btn.btn-sm:hover,
.com-content-category-blog__child .page-header .btn.btn-sm:focus {
  background-color: var(--ch-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 114, 255, .35) !important;
}