/* -------------------- */
/* Fonts */
/* -------------------- */
@font-face { font-family: LemonMilkBoldItalic; src: url(font/LemonMilk/LEMONMILK-BoldItalic.otf); }
@font-face { font-family: LemonMilkRegular;     src: url(font/LemonMilk/LEMONMILK-Regular.otf); }
@font-face { font-family: LemonMilkLight;       src: url(font/LemonMilk/LEMONMILK-Light.otf); }
@font-face { font-family: LemonMilkLightItalic; src: url(font/LemonMilk/LEMONMILK-LightItalic.otf); }
@font-face { font-family: LemonMilkRegularItalic; src: url(font/LemonMilk/LEMONMILK-RegularItalic.otf); }
@font-face { font-family: LemonMilkBold;        src: url(font/LemonMilk/LEMONMILK-Bold.otf); }
@font-face { font-family: LemonMilkMedium;      src: url(font/LemonMilk/LEMONMILK-Medium.otf); }
@font-face { font-family: LemonMilkMediumItalic; src: url(font/LemonMilk/LEMONMILK-MediumItalic.otf); }
@font-face { font-family: NotoSansRegular;      src: url(font/NotoSans/NotoSans-Regular.ttf); }

/* -------------------- */
/* Font helpers */
/* -------------------- */
.fontTitle { margin-left: 5px; }
.fontLM { font-family: LemonMilkBoldItalic; }
.fontLMRegular { font-family: LemonMilkRegular; }
.fontLMLight { font-family: LemonMilkLight; }
.fontLMLightItalic { font-family: LemonMilkLightItalic; }
.fontLMRegularItalic { font-family: LemonMilkRegularItalic; }
.fontLMBold { font-family: LemonMilkBold; }
.textArticle { font-family: NotoSansRegular; margin-left: 5px; }
.fontC { text-align: center; display: block; margin: auto; }

.fontLMBold-Carousel {
  font-family: LemonMilkBold; font-size: 30px; background-color: rgba(0,0,0,0.2);
  display: inline-block; padding: 0 5px; transform: skewX(-9deg);
}
.fontLMLight-Carousel {
  font-family: LemonMilkLight; font-size: 15px; color: #000; background-color: rgba(0,0,0,0.2);
  display: inline-block; padding: 0 5px; transform: skewX(-9deg);
}
.fontLMstyle, .fontLMstyle2 {
  font-family: LemonMilkBoldItalic; font-size: 500px; color: #000; transform: rotate(90deg);
  position: absolute;
}
.fontLMstyle { margin-top: 300px; margin-left: -600px; }
.fontLMstyle2 { margin-top: 550px; margin-left: 900px; }

.titreArticleArchive { font-family: LemonMilkMediumItalic; font-size: 22px; color: #000; text-decoration: none; }
.titreArtArch { font-family: LemonMilkMedium; font-size: 20px; text-decoration: none; }



/* -------------------- */
/* Layout */
/* -------------------- */
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }
.page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
main.flex-grow-1 { flex-grow: 1; }
footer { margin-top: auto; }

.position-relative { position: relative; }

.sticky-header { position: sticky; top: 0; background: white; z-index: 100; box-sizing: border-box; margin: 0 -8px; width: calc(100% + 24px); }

/* Bordures arrondies neutralisées */
nav,
.dropdown-menu,
.alert,
.badge,
.btn,
.form-control,
.card,
.pagination .page-link,
img,
.modal-content,
.modal-header,
.rounded,
.rounded-pill,
.rounded-circle { border-radius: 0 !important; }

::before,
::after {
  border-radius: 0 !important;
  --bs-border-radius: 0 !important;
  --bs-border-radius-sm: 0 !important;
  --bs-border-radius-lg: 0 !important;
  --bs-border-radius-pill: 0 !important;
  --bs-border-radius-xl: 0 !important;
  --bs-border-radius-xxl: 0 !important;
}

.no-border-radius { border: none !important; border-radius: 0 !important; box-shadow: none !important; }

/* Inputs & selects */
select { -webkit-appearance: none; -webkit-border-radius: 0; }
select.form-select { border-radius: 0 !important; }
.form-control.ps-5 { padding-left: 2.5rem !important; }
.bi-search { pointer-events: none; font-size: 1rem; }

/* Suggestions (auteur) */
#auteurSuggestions div { padding: 8px; cursor: pointer; transition: background-color 0.2s ease-in-out; }
#auteurSuggestions div:hover { background-color: #d0d0d0; }

/* Tags / liens génériques */
.tag, a.removeAhref, a.no-style { text-decoration: none; }
a.removeAhref, a.no-style { color: inherit; }
a.removeAhref:hover, a.no-style:hover { color: inherit; text-decoration: none; }
.social { color: #000; text-decoration: none; }

/* Images & figures */
.img-fluid { width: 1270px; }
.img-container { width: 100%; height: 200px; overflow: hidden; }
.img-container img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
@media (min-width: 768px) { .bd-placeholder-img-lg { font-size: 3.5rem; } }

/* Text helpers */
.nav { margin-left: -20px; }
.text-lightgray { color: #ccc !important; }

/* Synopsis spacing */
.synopsis-paragraph { margin-top: 0.3em; margin-bottom: 0.3em; line-height: 1.4; }
dd.synopsis { line-height: 1.3; }
dd.synopsis br { line-height: 1; }

/* Skew utilities */
.badge { display: inline-block; transform: skewX(-9deg); }
.badge > * { display: inline-block; transform: skewX(9deg); }
.skew-arrow { display: inline-block; transform: skewX(-9deg); }

/* Cards / rows */
.card-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.card-row .card { flex: 0 0 auto; width: 18rem; }

/* Title + flag */
.title-with-flag { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.flag-fr { width: 28px; height: auto; border: 1px solid black; box-sizing: border-box; vertical-align: top; }

/* -------------------- */
/* Navbar & Dropdown */
/* -------------------- */
.navbar { z-index: 1050; position: relative; }

.navbar .nav-link, .navbar .dropdown-item { font-weight: 500; }

.navbar-nav .nav-link {  white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.1s, border-bottom-color 0.1s; }
.navbar-nav .nav-link:hover { color: #f0f0f0; border-bottom-color: #f0f0f0; }
.navbar-nav .nav-link.active-link { color: #fff; border-bottom-color: #fff; }

/*
  Si vous souhaitez un accent plus fort sur la page courante :
  .nav-link[aria-current="page"] { color:#fff !important; font-weight:700; }
*/

/* Dropdown */
.dropdown-menu .dropdown-header { font-size: 1rem; font-weight: 500; margin-bottom: 0.5rem; color: #fff; }
.dropdown-menu .dropdown-item { font-weight: 500; line-height: 1.5; color: #ccc; }
.dropdown-menu .dropdown-item:hover { background-color: rgba(255,255,255,0.1); }
.dropdown-menu .active-dropdown { color: #fff; font-weight: 500; background-color: transparent; }

/* Toggler */
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* -------------------- */
/* Pagination */
/* -------------------- */
.pagination { justify-content: center; flex-wrap: nowrap; }
.pagination .page-link { color: #000; }
.pagination .page-link:hover { color: #343a40; }
.pagination .page-item.active .page-link { background-color: #000 !important; border-color: #000 !important; color: #fff !important; pointer-events: none; }
.pagination-disabled > .page-link { background-color: #e0e0e0 !important; color: #6c757d !important; pointer-events: none; border-color: #ced4da; opacity: 1; }

@media (max-width: 576px) {
  .pagination .page-item .page-link { font-size: 0.8rem; padding: 0.25rem 0.5rem; }
}

/* -------------------- */
/* Modals / Images */
/* -------------------- */
#imageModal img { width: 100%; height: auto; object-fit: contain; max-height: 90vh; }
.btn-close { z-index: 1055; }
.modal-content > button.btn { width: auto; max-width: 100%; display: inline-block; margin: 0 auto 10px; position: relative; left: auto; }

/* -------------------- */
/* Carousel */
/* -------------------- */
.carousel-wrapper { position: relative; }
.carousel-container { display: flex; overflow-x: auto; flex-wrap: nowrap; gap: 0.75rem; scroll-behavior: smooth; padding: 0.5rem; scrollbar-width: none; }

/* -------------------- */
/* Tags (badges cliquables) */
/* -------------------- */
.tag-badge { cursor: pointer; transition: background-color 0.2s, color 0.2s; font-weight: 700; }
.tag-badge:not(.active) { background-color: #e0e0e0; color: #000; }
.tag-badge.active { color: #fff; font-weight: 700; }

/* -------------------- */
/* Thème sombre */
/* -------------------- */
[data-bs-theme="dark"] #auteurSuggestions div:hover { background-color: #555555; }
[data-bs-theme="dark"] header.bg-dark { background-color: #000 !important; }
[data-bs-theme="dark"] footer.bg-dark { background-color: #000 !important; }
[data-bs-theme="dark"] .image-wrapper { background-color: #212529; }
[data-bs-theme="dark"] .page-item:not(.active) .page-link { color: #fff; background-color: transparent; border: 1px solid #444; }
[data-bs-theme="dark"] .page-item.active .page-link { color: #000 !important; background-color: #fff !important; border-color: #444 !important; }
[data-bs-theme="dark"] .page-item.disabled .page-link { color: #6c757d !important; background-color: #2c2c2c !important; border-color: #444 !important; cursor: not-allowed; opacity: 0.65; }
[data-bs-theme="dark"] #button.btn-dark { background-color: #000 !important; color: #fff !important; border-color: #000 !important; }
[data-bs-theme="dark"] #button.btn-dark:hover { background-color: #111 !important; border-color: #111 !important; }
[data-bs-theme="dark"] .tag-badge:not(.active) { background-color: rgba(255,255,255,0.15); color: #adadad; }
[data-bs-theme="dark"] .tag-badge.active { background-color: #000 !important; color: #fff !important; }
[data-bs-theme="dark"] .sticky-header { background-color: #212529; }
[data-bs-theme="dark"] .iconsSB { color:#fff; }

[data-bs-theme="dark"] .pagination .page-item.active .page-link { font-weight: bold; color: #000 !important; background: #fff; border: none !important; padding: 0.375rem 0.75rem; }

/* === Bouton recherche === */
.search-btn { border: none !important; color: #fff !important; }
.search-btn .search-icon { color: #fff !important; }

[data-bs-theme="dark"] .search-btn { background-color: #fff !important; color: #000 !important; }
[data-bs-theme="dark"] .search-btn .search-icon { color: #000 !important; }

/* -------------------- */
/* Bouton thème (toggle) */
/* -------------------- */
.theme-toggle { appearance: none; width: 50px; height: 26px; background-color: #ddd; border-radius: 50px; position: relative; cursor: pointer; outline: none; transition: background-color 0.3s ease-in-out; }
.theme-toggle::before { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: transform 0.3s ease-in-out, content 0.3s ease-in-out; background: transparent; }
.theme-toggle::after { font-family: "bootstrap-icons"; content: "\f5a2"; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: transform 0.3s ease-in-out, content 0.3s ease-in-out; }
.theme-toggle:checked { background-color: #333; }
.theme-toggle:checked::before { transform: translateX(24px); }
.theme-toggle:checked::after { content: "\f495"; transform: translateX(24px); }

/* -------------------- */
/* Utilitaires / divers */
/* -------------------- */
.iconsSB { color:#000; }
#comment-alert p:last-child { margin-bottom: 0; }

/* -------------------- */
/* Navbar : responsive */
/* -------------------- */
@media (max-width: 767.98px) { #navbarCollapse { padding: 0.5rem 1rem; }
  .navbar-nav .nav-link { display: inline-block; padding: 0.5rem 0; }
  .navbar-nav .dropdown-menu { position: static !important; transform: none !important; margin: 0 auto; text-align: center; }
}

@media (min-width: 768px) and (max-width: 900px) {
  .navbar-nav { gap: 0.5rem !important; }
  .navbar-nav .nav-link { font-size: 0.9rem; padding-left: 0.4rem; padding-right: 0.4rem; }
}

.pagination .page-link { background: none !important; border: none !important; color: inherit !important; padding: 0.375rem 0.75rem; box-shadow: none !important; }
.pagination .page-item.active .page-link { font-weight: bold; color: #ffffff !important; background: #000; border: none !important; padding: 0.375rem 0.75rem; }
.pagination .page-item.disabled .page-link { color: #6c757d !important; background: none !important; border: none !important; pointer-events: none; }

.testArticle { position: relative; text-align: center; }
.testArticleText { position: absolute; font-size: 14px; bottom: 0px; left: 15px; margin-right: 15px; color: #fff; background-color: rgba(0, 0, 0, 0.7); padding: 3px; padding-left: 8px; padding-right: 8px; text-align: left; transform: skewX(-9deg); }