/* Ex couleurs.css */

:root {
  --hu-bg: #9E1A8B;     /* fond header */
  --hu-accent: #4D3E9A; /* cadre Curtis+Moore / boutons */
  --hu-white: #ffffff;
  --hu-camel: #C9A574;  /* nouveau : camel du logo */
  --hu-footer-btn: #A0522D;   /* ex: Rouge brique / terre cuite */
  --couleur-livre: #e53935;   /* Rouge */
  --couleur-video: #43a047;   /* Vert */
  --couleur-concept: #1e88e5; /* Bleu */
  --couleur-podcast: #8e24aa; /* Violet */
  --couleur-auteur: #ff9800;  /* Orange */
  --couleur-outil: #4caf50;  /* Vert */
  --couleur-categorie: #fb0a5a81;  
  --badge-bg-editeur: #005f99;   /* ton bleu custom */
  --badge-text-editeur: #ffffff; /* texte blanc */
  --badge-bg-categorie: #4D3E9A; /* cadre Curtis+Moore / boutons */
  --badge-text-categorie: #ffffff; /* texte blanc */
}

/* utiles */

.visually-hidden-focusable:active,
.visually-hidden-focusable:focus {
  position: static !important;
  width: auto; height: auto; clip: auto;
}


/* Polices */
body {
    font-family: 'Lato', 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif;
    background-color: #ffffff;
    color: #212529;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'neuton', sans-serif;
    font-weight: 700;
}

/* Barre supérieure */
.topbar {
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
}

.logo {
    font-weight: bold;
    font-size: 1.25rem;
    color: #c28b5d;
    text-decoration: none;
}

.bg-recherche {
  background-color: #f0f4f8;
}


/* Navigation */
.navbar-nav .nav-link {
    color: #212529;
    margin-left: 1rem;
}
.navbar-nav .nav-link:hover {
    color: #c28b5d;
}

/* Formulaire de recherche */
.search-form input {
    max-width: 200px;
}

/* Introduction */
.intro {
    background-color: #f8f9fa;
    font-style: italic;
}

/* Titre de section */
.section-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}


.featured-article {
    padding: 1rem;
    margin-bottom: 2rem;
}

/* Sidebar */
.sidebar-section {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

/* Pagination */
.pagination-nav .page-link {
    color: #212529;
    border: 1px solid #dee2e6;
}
.pagination-nav .page-link:hover {
    background-color: #c28b5d;
    color: #fff;
}


.logo-site{
  height: 32px;   /* ajuste selon ton header */
  width: auto;
}


.intro-pitch {
  background: #f8f9fa;        /* gris très clair */
  border-left: 4px solid var(--hu-accent);
  padding: 1rem 1.5rem;
  border-radius: .5rem;
  font-size: 1.15rem;
  color: #333;
}




/* HEADER */




.navbar-hu{
  background: var(--hu-bg);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.navbar-hu .navbar-brand{
  color: var(--hu-white) !important;
  font-weight: 700; /* même style que le titre */
}

/* Boutons thème */
.btn-hu{
  background: var(--hu-accent);
  color: var(--hu-white);
  border: none;
  font-weight: 700; /* gras comme le titre */
}
.btn-hu:hover,
.btn-hu:focus{
  filter: brightness(1.06);
  color: var(--hu-white);
}

/* Champ de recherche : léger polish */
.navbar-hu .form-control{
  border: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05);
  border-radius: .75rem;
}
.navbar-hu .form-control:focus{
  box-shadow: 0 0 0 .2rem rgba(77,62,154,.25); /* halo couleur accent */
}
.navbar-hu .bi-search{
  color: #3a3a3a;
}

/* Pied de page */
.footer {
    background-color: #212529;
    color: #ffffff;
    font-size: 0.9rem;
}
.footer a {
    color: #ffffff;
    text-decoration: underline;
}
.footer .credit {
    margin-top: 0.5rem;
    font-style: italic;
}


.footer-hu{
  background: var(--hu-bg);
  color: var(--hu-white);
  border-top: 4px solid rgba(255,255,255,.15);
}

.footer-hu a{
  color: var(--hu-white);
  text-decoration: none;
  font-weight: 600;            /* comme le titre/boutons */
}

.footer-hu a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-hu-camel{
  background: var(--hu-camel);
  color: var(--hu-white);
}
.footer-hu-camel a{
  color: var(--hu-white);
  font-weight: 600;
  text-decoration: none;
}
.footer-hu-camel a:hover{
  text-decoration: underline;
}

/* “puces” pour les liens du footer (rappel des boutons du header) */
.link-chip{
  background: var(--hu-footer-btn);
  color: var(--hu-white);
  padding: .25rem .6rem;
  border-radius: .5rem;
  font-weight: 700;            /* gras comme Hu‑Explore */
  display: inline-block;
}
.footer-hu .credit{ opacity:.9; font-weight:600; }



.date-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 10px;         /* espace au-dessus de la date */
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  color: #666;
  gap: 6px;
}

/*  s */

.liste_liens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}


.lien {
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 600;
    color: inherit;   
    display: inline-block;
}


.lien_auteur {
    border: 2px solid var(--couleur-auteur);
}

.lien_livre {
    border: 2px solid var(--couleur-livre);
}

.lien_categorie {
    border: 2px solid var(--couleur-categorie);
}

.tag {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: inline-block;
}



/* --- harmonisation des cards

/* Cartes & titres */
.card-hu{
  border: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  border-top: 4px solid var(--hu-accent);
}
.card-hu .card-title{
  color: var(--hu-accent);
  font-weight: 700;
  margin-bottom: .75rem;
}

/* Liens/texte dans l’article */
.article-hu a{ color: var(--hu-accent); text-decoration: underline; }
.article-hu a:hover{ text-decoration: none; }

.btn-outline-hu{
  background: transparent;
  color: var(--hu-accent);
  border: 1px solid var(--hu-accent);
  font-weight: 700;
}
.btn-outline-hu:hover{
  background: var(--hu-accent);
  color: var(--hu-white);
}

/* ex badge.css */
/* Badges : recherche et auteurs accueil */

/* Clamp pour résumés courts */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hover subtil sur les cartes */
.card-hover {
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 .35rem 1rem rgba(0,0,0,.08);
}
/*
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
*/


/* Limiter le résumé à 3 lignes */
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Limiter le résumé à 4 lignes */
.clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* ici tu limites à 2 lignes, tu peux mettre 3 ou 4 */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  max-width: 100%;         /* important */
}

.badge .card-title {
  white-space: normal;     /* autorise retour à la ligne */
  overflow: hidden;
}

/* Base : clamp multi-lignes + ellipsis, largeur contrainte par le flex parent */
.clamp-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
  -webkit-line-clamp: 2;   /* mobile par défaut : 2 lignes */
}

/* ≥ 576px (sm) : 3 lignes */
@media (min-width: 576px){
  .clamp-title{ -webkit-line-clamp: 3; }
}

/* ≥ 992px (lg) : 4 lignes */
@media (min-width: 992px){
  .clamp-title{ -webkit-line-clamp: 4; }
}

/* (Optionnel) si tu veux forcer la colonne texte à prendre la place dispo */
.badge .row{ width: 100%; }

.badge {
  border-radius: 0.5rem;
}


.badge-auteur h3, 
.badge-auteur h2, 
.badge-auteur h4, 
.badge-auteur span {
  word-wrap: break-word;  /* force la coupure */
  overflow-wrap: break-word;
  hyphens: auto;          /* ajoute un tiret si possible */
}

/* Couleurs spécifiques par nature */
.badge-livre {
  border: 2px solid var(--couleur-livre);
  box-shadow: 0 0 8px color-mix(in srgb, var(--couleur-livre) 20%, transparent);
}
.badge-video {
  border: 2px solid var(--couleur-video);
  box-shadow: 0 0 8px color-mix(in srgb, var(--couleur-video) 20%, transparent);
}
.badge-concept {
  border: 2px solid var(--couleur-concept);
  box-shadow: 0 0 8px color-mix(in srgb, var(--couleur-concept) 20%, transparent);
}
.badge-podcast {
  border: 2px solid var(--couleur-podcast);
  box-shadow: 0 0 8px color-mix(in srgb, var(--couleur-podcast) 20%, transparent);
}
.badge-auteur {
  border: 2px solid var(--couleur-auteur);
  box-shadow: 0 0 8px color-mix(in srgb, var(--couleur-auteur) 20%, transparent);
}
 
.badge-outil {
  border: 2px solid var(--couleur-outil);
  box-shadow: 0 0 8px color-mix(in srgb, var(--couleur-outil) 20%, transparent);
}

.badge-editeur {
  background-color: var(--badge-bg-editeur) !important;
  color: var(--badge-text-editeur) !important;
}

.badge-categorie {
  background-color: var(--badge-bg-categorie) !important;
  --bs-badge-color: var(--badge-bg-categorie) ;     /* surcharge la variable Bootstrap */
  color: var(--badge-text-categorie) !important;
  text-decoration: none;      /* enlève le soulignement des <a> */
}

.mini-outil-card {
  border-radius: 0.5rem;
  background-color: #f9f9f9;
}

.mini-outil-card img {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}


.mini-video-card {
  border-radius: 0.5rem;
  background-color: #f9f9f9;
}

.mini-video-card img {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}


/* Pagination — thème Hu */
.pagination-nav .pagination { gap: .25rem; }

.pagination-nav .page-link {
  border-radius: 999px;                    /* pilule */
  border: 1px solid color-mix(in srgb, var(--hu-accent) 25%, transparent);
  color: #212529;
  background: #fff;
  padding: .4rem .75rem;
  font-weight: 600;                        /* comme tes badges/boutons */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.pagination-nav .page-link:hover,
.pagination-nav .page-link:focus {
  background: var(--hu-camel);
  color: var(--hu-white);
  border-color: var(--hu-camel);
  text-decoration: none;
}

.pagination-nav .page-item.active .page-link {
  background: var(--hu-accent);
  border-color: var(--hu-accent);
  color: var(--hu-white);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--hu-accent) 25%, transparent);
}

.pagination-nav .page-item.disabled .page-link {
  color: #9aa0a6;
  background: #f8f9fa;
  border-color: #e9ecef;
  box-shadow: none;
  pointer-events: none;
}

/* Anneau d’accessibilité au clavier */
.pagination-nav .page-link:focus {
  outline: none;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--hu-accent) 28%, transparent);
}

/* Pour les liens internes/externes différents */
/* Pour tout le site, y compris la prose Markdown */
a.link-internal {
  /*--bg: color-mix(in srgb, var(--hu-accent) 12%, white);*/
  --bg: color-mix(in srgb, var(--hu-accent) 20%, var(--hu-white));
  background: var(--bg);
  color: #111;
  border-radius: 999px;
  padding: .1rem .5rem;
  text-decoration: none;
  font-weight: 600;
}
a.link-internal:hover { text-decoration: underline; }

a.link-external {
  --bg: color-mix(in srgb, var(--hu-camel) 30%, white);
  /*--bg: color-mix(in srgb, var(--badge-bg-editeur) 10%, white); */
  background: var(--bg);
  color: #111; /* var(--badge-text-editeur) ; */
  border-radius: 999px;
  padding: .1rem .5rem;
  text-decoration: none;
  font-weight: 600;
}
a.link-external::after {
  content: "↗";
  margin-left: .25rem;
  font-size: .9em;
}
a.link-external:hover { text-decoration: underline; }