/* ============================================================
   Cassiopeia Archeo — Charte graphique Institut d'Archeologie
   Universite d'Alger 2  |  Template enfant de Cassiopeia
   chargé automatiquement via l'asset template.user (user.css)

--- Thème "MARINE DAI + PLAT" (charte DAINST.ORG) ---
   Marine primaire      #00305D   (header, footer, boutons, liens) — DAI
   Marine profond       #002A4E   (survol, titres) — DAI
   Bleu appuis          #164194   (liens, accents, liserés) — DAI
   Liseré bleu clair    #DCE7F2   (bandes décoratives)
   Fond page            #FFFFFF   (fond de page)
   Fond soutenu         #F2F5F8   (fonds accentués)
   Filets               #DDE3EA   (bordures, traits)
   Titres               #002A4E   (titres, accents forts)
   Texte corps          #333333   (texte principal)
   Texte secondaire     #6B7280   (texte muted)
   Texte clair          #FFFFFF   (texte sur fond sombre)

   Accents inspirés de DAINST.ORG (Institut archéologique allemand) :
   Marine #00305D / #002A4E (en-tête, pied, boutons), bleu #164194.

   Polices inspirées de DAINST.ORG : titres Montserrat (proche Geometria)
   + corps Source Sans 3 (proche Source Sans Pro), chargées en Webfont
   (googleapis) — DAI utilise Geometria / Source Sans Pro / Noto Sans.

   Cohérence FR/AR : les variables CSS sont partagées ; le bloc
   "html[dir='rtl']" plus bas ajuste uniquement l'alignement et
   les marges, sans changer la palette (charte identique en FR/AR).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&family=Amiri:wght@400;700&family=Noto+Naskh+Arabic:wght@400;600;700&display=swap');

:root {
  /* Palette DAI (DAINST.ORG) — bleu marine, plat, sobre, professionnel */
  --archeo-ink:        #002A4E;  /* marine profond (titres, accents) */
  --archeo-ink-soft:   #164194;  /* bleu DAI liens/appuis */
  --archeo-mauve:      #00305D;  /* primaire (en-tête, boutons, footer) */
  --archeo-mauve-hi:   #164194;  /* variante claire */
  --archeo-hover:      #002A4E;  /* survol */
  --archeo-mauve-lite: #DCE7F2;  /* liserés déco */
  --archeo-lavande:    #FFFFFF;  /* fond de page */
  --archeo-lavande-2:  #F2F5F8;  /* fond soutenu */
  --archeo-line:       #DDE3EA;  /* bordures, filets */
  --archeo-text:       #333333;  /* corps de texte */
  --archeo-muted:      #6B7280;  /* texte secondaire */
  --archeo-light:      #FFFFFF;  /* texte clair sur fond sombre */

  /* Surcharge des variables natives Cassiopeia */
  --cassiopeia-color-primary: var(--archeo-mauve);
  --cassiopeia-color-hover: var(--archeo-hover);
  --cassiopeia-color-link: var(--archeo-mauve-hi);
  --link-color: var(--archeo-mauve-hi);
  --link-hover-color: var(--archeo-hover);
  --cassiopeia-color-brand: var(--archeo-light);
  --cassiopeia-font-family-headings: "Montserrat", "Source Sans 3", system-ui, sans-serif;
  --cassiopeia-font-family-body: "Source Sans 3", "Roboto", system-ui, sans-serif;
  --hue: 210;
  --template-bg-light: var(--archeo-lavande);
  --template-special-color: var(--archeo-ink);

  /* Accents institutionnels DAI */
  --archeo-navy:      #00305D;  /* marine DAI — barre supérieure */
  --archeo-navy-soft: #164194;  /* bleu DAI — liens/appuis */
  --archeo-accent:    #164194;  /* accent bleu — nav active, dots */
  --archeo-cyan:      #5B8DC9;  /* bleu — touches décoratives */
  --archeo-ink-grey:  #2B333F;
  --archeo-grey-soft: #F2F5F8;
  --archeo-grey-line: #DEE2E6;
}

body {
  background-color: var(--archeo-lavande);
  background-image: none;
  color: var(--archeo-text);
  font-family: var(--cassiopeia-font-family-body);
}

/* ---------- Tête de page / header ---------- */
.container-header,
.site-header {
  background: #00305d;
  color: var(--archeo-light);
  border-bottom: 4px solid var(--archeo-mauve-lite);
  box-shadow: 0 4px 18px rgba(0, 48, 93, 0.25);
  position: sticky;
  top: 0;
  z-index: 1020;
}

.container-header .navbar-brand,
.site-header .navbar-brand {
  color: var(--archeo-light);
}

.container-header .navbar-brand .site-description {
  color: var(--archeo-lavande);
}

/* Barre supérieure institutionnelle (inspiration DAI : encres marine/jaune) */
.container-topbar {
  background: var(--archeo-navy);
  color: #fff;
  border-bottom: 3px solid var(--archeo-accent);
}
.container-topbar a {
  color: #fff;
}
.container-topbar a:hover {
  color: var(--archeo-accent);
}

/* Navigation principale */
.container-nav,
.site-nav .navbar {
  background: transparent;
}

.navbar-nav > li.nav-item > a.nav-link,
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .metismenu .mm-link {
  color: var(--archeo-light);
  font-family: var(--cassiopeia-font-family-headings);
  font-weight: 500;
}
.navbar-nav > li.nav-item > a.nav-link:hover,
.navbar-nav > li.nav-item > a.nav-link:focus,
.container-header .mod-menu > li > a:hover {
  color: var(--archeo-mauve-lite);
  background: rgba(255, 255, 255, 0.08);
}
.navbar-nav > li.nav-item.active > a.nav-link,
.container-header .mod-menu > li.active > a {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--archeo-accent);
}

/* Sous-menus (dropdown) */
.container-header .mod-menu .parent > ul,
.container-header .metismenu .mm-collapse {
  color: var(--archeo-text);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 48, 93, 0.18);
}
.container-header .mod-menu .parent > ul a,
.container-header .mod-menu .parent > ul span,
.container-header .metismenu .mm-collapse a {
  color: var(--archeo-ink);
}
.container-header .mod-menu .parent > ul a:hover,
.container-header .metismenu .mm-collapse a:hover {
  color: var(--archeo-hover);
}

/* ---------- Hero (accueil) ---------- */
.archeo-hero {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #00305d;
}
.archeo-hero img {
  display: block;
  width: 100%;
  height: auto;
}
.container-banner .archeo-hero {
  border-bottom: 4px solid var(--archeo-mauve-lite);
}

/* ---------- Typographie ---------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--archeo-ink);
  font-family: var(--cassiopeia-font-family-headings);
  font-weight: 700;
}
a {
  color: var(--archeo-link-color, var(--archeo-mauve-hi));
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--archeo-link-hover-color, var(--archeo-hover));
}

/* ---------- Composants (boutons, cartes, listes) ---------- */
.btn-primary,
.mod-finder__search-submit,
button[type="submit"] {
  background-color: var(--archeo-mauve);
  border-color: var(--archeo-mauve);
  color: var(--archeo-light);
  border-radius: 999px;
  font-family: var(--cassiopeia-font-family-headings);
  font-weight: 600;
}
.btn-primary:hover,
.mod-finder__search-submit:hover,
button[type="submit"]:hover {
  background-color: var(--archeo-hover);
  border-color: var(--archeo-hover);
  color: #fff;
}

/* Barre de titres de modules */
.module-title,
.container-lg h2 span,
.container-1 h2 span,
.container-2 h2 span,
.card-header {
  border-bottom: 3px solid var(--archeo-mauve);
  color: var(--archeo-ink);
  background-color: var(--archeo-lavande);
  font-family: var(--cassiopeia-font-family-headings);
  font-weight: 600;
}

/* Badges & puces deco */
.com-content-category__title,
.blog .page-header,
.item-page h2::after,
.blog .items-leading h2::after {
  color: var(--archeo-ink);
}

/* ---------- Cartouches / boites ---------- */
.article-item,
.com-content-article,
.blog .card,
.sidebar-right .mod,
.card {
  background: #fff;
  border: 1px solid var(--archeo-line);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 48, 93, 0.06);
}

/* Informations d'article (métadonnées) */
.article-info,
.article-info dd {
  color: var(--archeo-muted);
  font-size: 0.875rem;
}

/* Catégorie (badge) */
.category-name a {
  display: inline-block;
  background-color: var(--archeo-mauve);
  color: #fff !important;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--cassiopeia-font-family-headings);
}
.category-name a:hover {
  background-color: var(--archeo-hover);
  text-decoration: none;
}

/* ---------- Pied de page ---------- */
.container-footer,
.site-footer {
  background: #00305d;
  color: var(--archeo-light);
  border-top: 4px solid var(--archeo-mauve-lite);
}
.container-footer a {
  color: var(--archeo-lavande);
}
.container-footer a:hover {
  color: #fff;
}

/* ---------- Fil d'Ariane ---------- */
.breadcrumb {
  background: transparent;
  color: var(--archeo-muted);
}
.breadcrumb a {
  color: var(--archeo-mauve-hi);
}

/* ---------- Pagination ---------- */
.pagination .page-link {
  color: var(--archeo-mauve-hi);
  border-radius: 999px;
}
.pagination .active > .page-link {
  background-color: var(--archeo-mauve);
  border-color: var(--archeo-mauve);
  color: #fff;
}

/* ---------- Recherche (Smart Search) ---------- */
.mod-finder__search-submit,
button[type="submit"] {
  background-color: var(--archeo-mauve);
  border-color: var(--archeo-mauve);
}

/* ============================================================
   RTL (arabe)
   ============================================================ */
html[dir="rtl"] body {
  text-align: right;
}
html[dir="rtl"] .archeo-hero {
  background: #00305d;
}

/* ============================================================
   POLICE ARABE — académique & moderne (Amiri + Noto Naskh Arabic)
   Amiri (classique universitaire, proche du naskh d'édition) pour
   les titres ; Noto Naskh Arabic (lisible, contemporaine) pour le
   corps de texte. Repli local : Sakkal Majalla, Segoe UI, Tahoma.
   ============================================================ */
html[dir="rtl"] body,
html[lang*="ar"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button,
html[dir="rtl"] .mod-finder__search-input {
  font-family: "Noto Naskh Arabic", "Amiri", "Sakkal Majalla", "Segoe UI", "Tahoma", sans-serif;
  letter-spacing: 0;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .module-title,
html[dir="rtl"] .navbar-brand,
html[dir="rtl"] .container-header .mod-menu > li > a,
html[dir="rtl"] .container-header .mod-menu > li > span,
html[dir="rtl"] .navbar-nav > li.nav-item > a.nav-link,
html[dir="rtl"] .category-name a,
html[dir="rtl"] .article-info,
html[dir="rtl"] .breadcrumb {
  font-family: "Amiri", "Noto Naskh Arabic", "Sakkal Majalla", serif;
  letter-spacing: 0;
}

/* ============================================================
   Responsive — petit écran
   ============================================================ */
@media (max-width: 767.98px) {
  .navbar-nav > li.nav-item > a.nav-link {
    padding: 0.6rem 0.75rem;
  }
  .archeo-hero img {
    height: auto;
  }
}
@media (max-width: 575.98px) {
  :root {
    --archeo-text: #333333;
  }
  body {
    font-size: 0.94rem;
  }
}

/* ============================================================
   POLISH — Phase 6.2 (restitutions affinées, esba.dz adapté)
   ============================================================ */

/* 1) Force la palette malgré le bloc :root inline de l'index.php
      (déclaré plus tard dans la page). :root:root gagne en
      spécificité (0,2,0) sur :root (0,1,0). */
:root:root {
  --archeo-link-color: var(--archeo-mauve-hi);
  --archeo-link-hover-color: var(--archeo-hover);
  --hue: 210;
  --template-bg-light: var(--archeo-lavande);
  --template-text-dark: #333333;
  --template-text-light: #ffffff;
  --template-link-color: var(--archeo-mauve-hi);
  --template-special-color: var(--archeo-ink);
}

/* 2) Micro-interactions & défilement */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}
::selection {
  background: var(--archeo-mauve);
  color: #fff;
}
a:focus-visible,
.nav-link:focus-visible,
.mod-menu > li > a:focus-visible {
  outline: 2px solid var(--archeo-mauve-lite);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 3) Barre supérieure (sélecteur de langue) */
.container-topbar {
  background: rgba(0, 48, 93, 0.32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.container-topbar .mod-languages__list {
  gap: 0.55rem;
  align-items: center;
}
.container-topbar .mod-languages__list li {
  line-height: 1;
}
.container-topbar .mod-languages__list img {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.container-topbar .lang-active a {
  outline: 2px solid var(--archeo-mauve-lite);
  border-radius: 3px;
  outline-offset: 2px;
}

/* 4) Logo : léger halo mauve au lieu du gris d'origine */
.navbar-brand .logo {
  filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.35));
}

/* 5) Navigation : trait animé sous les liens du header */
.container-header .navbar-nav > li.nav-item > a.nav-link {
  position: relative;
}
.container-header .navbar-nav > li.nav-item > a.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 5px;
  height: 2px;
  background: var(--archeo-mauve-lite);
  border-radius: 2px;
  transition: right 0.25s ease;
}
.container-header .navbar-nav > li.nav-item > a.nav-link:hover::after,
.container-header .navbar-nav > li.nav-item.active > a.nav-link::after {
  right: 0;
}

/* 6) Champ de recherche : pilule mauve */
.container-search .form-control,
.mod-finder__search-input {
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: #fff;
  color: var(--archeo-ink);
  border-radius: 999px;
  padding: 0.32rem 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.container-search .form-control:focus,
.mod-finder__search-input:focus {
  border-color: var(--archeo-mauve-lite);
  box-shadow: 0 0 0 0.2rem rgba(22, 65, 148, 0.22);
}

/* 7) Menu latéral (sidebar) : liens aérés + état actif en pilule mauve */
.sidebar-right .mod-menu {
  padding: 0.15rem;
  gap: 0.15rem;
}
.sidebar-right .mod-menu > li > a {
  display: block;
  padding: 0.5rem 0.9rem;
  margin: 0.12rem 0;
  border-radius: 10px;
  color: var(--archeo-ink);
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sidebar-right .mod-menu > li > a:hover {
  background: var(--archeo-lavande);
  color: var(--archeo-hover);
  border-left-color: var(--archeo-mauve);
  text-decoration: none;
}
.sidebar-right .mod-menu > li.current.active > a,
.sidebar-right .mod-menu > li.active > a {
  background: var(--archeo-mauve);
  color: #fff;
  border-left-color: #fff;
}

/* 8) Cartes d'articles : léger survol */
.blog .blog-item,
.com-content__article {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.blog .blog-item:hover,
.com-content__article:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 48, 93, 0.12);
}
.item-title a {
  color: var(--archeo-ink);
}
.item-title a:hover {
  color: var(--archeo-hover);
}

/* 9) Métadonnées d'article : séparées par un filet */
.article-info {
  gap: 0.35rem 1rem;
  border-bottom: 1px dashed var(--archeo-line);
  padding-bottom: 0.55rem;
  margin-bottom: 1rem;
}
.article-info dd {
  margin-bottom: 0;
}

/* 10) Liens "Lire la suite" / liste des autres articles */
.items-more .com-content-blog__links {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.items-more .com-content-blog__link a {
  display: inline-block;
  background: var(--archeo-lavande);
  border: 1px solid var(--archeo-line);
  border-radius: 999px;
  padding: 0.4rem 1.05rem;
  margin: 0.18rem 0.25rem 0.18rem 0;
  color: var(--archeo-mauve-hi);
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}
.items-more .com-content-blog__link a:hover {
  background: var(--archeo-mauve);
  color: #fff;
  text-decoration: none;
}

/* 11) Fil d'Ariane : pastille blanche */
.mod-breadcrumbs__wrapper {
  background: #fff;
  border: 1px solid var(--archeo-line);
  border-radius: 12px;
}

/* 12) Bouton secondaire & focus des formulaires */
.btn-secondary {
  background: #fff;
  border: 2px solid var(--archeo-mauve) !important;
  color: var(--archeo-mauve) !important;
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--cassiopeia-font-family-headings);
}
.btn-secondary:hover {
  background: var(--archeo-mauve) !important;
  color: #fff !important;
}
.form-control:focus {
  border-color: var(--archeo-mauve);
  box-shadow: 0 0 0 0.2rem rgba(22, 65, 148, 0.18);
}

/* 13) Accès rapides (top-a) : tuiles mauve cliquables */
.archeo-quick-title {
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
}
.archeo-quick-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  padding: 0;
  margin: 0;
}
.archeo-quick-list li a {
  display: block;
  text-align: center;
  padding: 0.55rem 0.8rem;
  background: #00305d;
  color: #fff;
  border-radius: 12px;
  font-weight: 600;
  font-family: var(--cassiopeia-font-family-headings);
  box-shadow: 0 4px 12px rgba(0, 48, 93, 0.2);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.archeo-quick-list li a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 48, 93, 0.3);
  text-decoration: none;
}

/* 14) Pied de page : centré, aéré */
.container-footer {
  text-align: center;
}
.container-footer .grid-child {
  padding: 1.8rem 1rem;
}
.container-footer p {
  margin-bottom: 0.4rem;
}
.container-footer a {
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 15) Tableaux : filets mauves doux */
.table {
  --bs-table-border-color: var(--archeo-line);
  --bs-table-hover-bg: var(--archeo-lavande);
  border-radius: 12px;
  overflow: hidden;
}

/* 16) Adaptations RTL de la passe 6.2 */
html[dir="rtl"] .sidebar-right .mod-menu > li > a {
  border-left: 0;
  border-right: 3px solid transparent;
}
html[dir="rtl"] .sidebar-right .mod-menu > li > a:hover {
  border-left-color: transparent;
  border-right-color: var(--archeo-mauve);
}
html[dir="rtl"] .sidebar-right .mod-menu > li.current.active > a,
html[dir="rtl"] .sidebar-right .mod-menu > li.active > a {
  border-left-color: transparent;
  border-right-color: #fff;
}
html[dir="rtl"] .container-header .navbar-nav > li.nav-item > a.nav-link::after {
  left: auto;
  right: 0;
}
html[dir="rtl"] .items-more .com-content-blog__link a {
  margin: 0.18rem 0 0.18rem 0.25rem;
}

/* ============================================================
   EFFETS — Phase 6.3 (micro-interactions, transitions soignées)
   ============================================================ */

/* -- Animation d'entrée de la zone principale -- */
@keyframes archeoFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* -- Hero : zoom doux et continu (Ken Burns) -- */
.archeo-hero img {
  animation: archeoZoom 18s ease-in-out infinite alternate;
  transform-origin: 50% 45%;
  will-change: transform;
}
@keyframes archeoZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.05) translateX(0.6%); }
}

/* -- Zone principale : légère apparition -- */
main {
  animation: archeoFadeUp 0.45s ease-out both;
}

/* -- Base : transitions homogènes sur les éléments interactifs -- */
.btn,
.page-link,
.nav-link,
.mod-menu > li > a,
.breadcrumb a,
.item-title a,
.pagination .page-link {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

/* -- Boutons : reflet balayé + levée au survol + appui au clic -- */
.btn-primary,
.btn-secondary,
.mod-finder__search-submit,
button[type="submit"] {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn-primary::after,
.btn-secondary::after,
.mod-finder__search-submit::after,
button[type="submit"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: none;
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.btn-primary:hover::after,
.btn-secondary:hover::after,
.mod-finder__search-submit:hover::after,
button[type="submit"]:hover::after {
  left: 130%;
}
.btn-primary:hover,
.mod-finder__search-submit:hover,
button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 48, 93, 0.35);
}
.btn-primary:active,
.btn-secondary:active,
button[type="submit"]:active {
  transform: translateY(0) scale(0.97);
}

/* -- Liens du contenu : soulignement animé (au lieu du trait statique) -- */
.item-content a[href],
.com-content-article a[href] {
  background-image: linear-gradient(var(--archeo-mauve), var(--archeo-mauve));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  text-decoration: none;
  transition: background-size 0.28s ease, color 0.2s ease;
}
.item-content a[href]:hover,
.com-content-article a[href]:hover {
  background-size: 100% 2px;
  text-decoration: none;
}
.item-content a.category-name,
.com-content-article a[class*="btn"] {
  background-image: none;
  text-decoration: none;
}

/* -- Titres d'articles : transition douce + très léger décalage -- */
.item-title a {
  transition: color 0.2s ease;
}
.blog .blog-item:hover .item-title a,
.com-content__article:hover .item-title a {
  color: var(--archeo-hover);
}

/* -- Cartes : lift + halo (renforcement de la passe 6.2) -- */
.blog .blog-item,
.com-content__article,
.top-a .card,
.sidebar-right .card {
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.28s ease;
}
.blog .blog-item:hover,
.com-content__article:hover,
.top-a .card:hover {
  transform: translateY(-4px);
  border-color: var(--archeo-mauve-lite);
  box-shadow: 0 14px 30px rgba(0, 48, 93, 0.16), 0 0 0 3px rgba(22, 65, 148, 0.06);
}

/* -- Soulignement de navigation : courbe plus douce (renforcement) -- */
.container-header .navbar-nav > li.nav-item > a.nav-link::after {
  transition: right 0.32s cubic-bezier(0.4, 0, 0.2, 1), left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- Logo : léger zoom au survol -- */
.navbar-brand .logo {
  transition: transform 0.3s ease, filter 0.3s ease;
}
.navbar-brand:hover .logo {
  transform: scale(1.03);
  filter: drop-shadow(0 4px 10px rgba(255, 255, 255, 0.5));
}

/* -- Drapeaux (choix de langue) : zoom au survol -- */
.container-topbar .mod-languages__list img {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.container-topbar .mod-languages__list li a:hover img {
  transform: scale(1.18);
}

/* -- Menu latéral : glissement vers le lien survolé (LTR) -- */
.sidebar-right .mod-menu > li > a {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.sidebar-right .mod-menu > li > a:hover {
  transform: translateX(3px);
}
html[dir="rtl"] .sidebar-right .mod-menu > li > a:hover {
  transform: translateX(-3px);
}

/* -- Tuiles "Accès rapides" : lift + scale, et retour à l'appui -- */
.archeo-quick-list li a {
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.22s ease;
}
.archeo-quick-list li a:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 48, 93, 0.35);
}
.archeo-quick-list li a:active {
  transform: translateY(0) scale(0.97);
}

/* -- Liens "Lire la suite" : micro-lift au survol -- */
.items-more .com-content-blog__link a {
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.items-more .com-content-blog__link a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 48, 93, 0.25);
}

/* -- Pagination : pastille qui se soulève au survol -- */
.pagination .page-link:hover {
  background: var(--archeo-lavande);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 48, 93, 0.16);
}

/* -- Fil d'Ariane : transition couleur -- */
.mod-breadcrumbs__wrapper .breadcrumb a {
  transition: color 0.2s ease;
}
.mod-breadcrumbs__wrapper .breadcrumb a:hover {
  color: var(--archeo-hover);
}

/* -- RTL : sens du soulignement animé des liens -- */
html[dir="rtl"] .item-content a[href],
html[dir="rtl"] .com-content-article a[href] {
  background-position: 100% 100%;
}

/* -- Accessibilité : désactive les animations si demandé -- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   LOGO ROND & DESIGN — Phase 6.4 (sceau officiel en médaillon)
   ============================================================ */

/* -- Header : le sceau rond (logo-univ-alger2.png) devient un
      médaillon blanc cerclé, bien lisible sur le dégradé mauve -- */
.container-header .navbar-brand .brand-logo img,
.site-header .navbar-brand .brand-logo img {
  height: 58px;
  width: 58px;
  max-width: none;
  border-radius: 50%;
  object-fit: contain;
  object-position: center;
  background: #fff;
  padding: 3px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 6px 16px rgba(0, 48, 93, 0.4);
  animation: archeoLogoPulse 4.5s ease-in-out infinite;
}
@keyframes archeoLogoPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 6px 16px rgba(0, 48, 93, 0.4); }
  50%      { box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.85), 0 0 22px rgba(167, 139, 250, 0.6); }
}
.container-header .navbar-brand:hover .brand-logo img,
.site-header .navbar-brand:hover .brand-logo img {
  transform: scale(1.06);
}
@media (max-width: 575.98px) {
  .container-header .navbar-brand .brand-logo img,
  .site-header .navbar-brand .brand-logo img {
    height: 50px;
    width: 50px;
  }
}

/* -- Badges de catégorie : dégradé + micro-lift -- */
.category-name a {
  background: var(--archeo-mauve);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.category-name a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 48, 93, 0.3);
}

/* -- Images d'articles : cadre arrondi + zoom interne au survol -- */
.com-content-article .item-image,
.blog .item-image,
.item-image {
  overflow: hidden;
  border-radius: 12px;
}
.com-content-article .item-image img,
.blog .item-image img {
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.com-content-article:hover .item-image img,
.blog .blog-item:hover .item-image img {
  transform: scale(1.06);
}

/* -- Cartes : liseré dégradé qui apparaît au survol -- */
.blog .card,
.top-a .card,
.sidebar-right .card {
  position: relative;
}
.blog .card::before,
.top-a .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: var(--archeo-mauve);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.blog .card:hover::before,
.top-a .card:hover::before {
  opacity: 1;
}

/* -- Hero : léger voile dégradé en bas pour la profondeur -- */
.archeo-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 48, 93, 0) 55%, rgba(0, 48, 93, 0.35) 100%);
  pointer-events: none;
}

/* -- Titres du contenu : filet décoratif discret -- */
.com-content-article h2::before,
.blog .items-leading h2::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 1.1em;
  margin-inline-end: 0.4rem;
  border-radius: 3px;
  vertical-align: text-bottom;
  background: var(--archeo-mauve);
}

/* ============================================================
   CARROUSEL ACTUALITÉS — Phase 7 (défilement de photos, vert officiel)
   ============================================================ */

.archeo-carousel {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-bottom: 4px solid var(--archeo-mauve);
  box-shadow: 0 6px 20px rgba(0, 48, 93, 0.22);
  border-radius: 0 0 16px 16px;
  background: #00305d;
}
.archeo-carousel__track {
  position: relative;
  height: 360px;
}
.archeo-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.archeo-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
}
.archeo-carousel__link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.archeo-carousel__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 5.5s ease-out;
}
.archeo-carousel__slide.is-active .archeo-carousel__img {
  transform: scale(1.07);
}
.archeo-carousel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 48, 93, 0.05) 35%, rgba(0, 48, 93, 0.78) 92%);
  pointer-events: none;
}
.archeo-carousel__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 6.5rem 1.5rem 1.6rem;
  text-align: left;
}
html[dir="rtl"] .archeo-carousel__caption {
  text-align: right;
  padding: 1.4rem 1.6rem 1.5rem 6.5rem;
}
.archeo-carousel__title {
  margin: 0 0 0.3rem;
  color: #fff;
  font-family: var(--cassiopeia-font-family-headings);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.archeo-carousel__sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.archeo-carousel__link:hover .archeo-carousel__title {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.archeo-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--archeo-ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.archeo-carousel__btn:hover {
  background: var(--archeo-mauve);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}
.archeo-carousel__prev { left: 14px; }
.archeo-carousel__next { right: 14px; }
html[dir="rtl"] .archeo-carousel__prev { left: auto; right: 14px; }
html[dir="rtl"] .archeo-carousel__next { right: auto; left: 14px; }
.archeo-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.6rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  z-index: 5;
}
.archeo-carousel__dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.archeo-carousel__dot.is-active,
.archeo-carousel__dot:hover {
  background: var(--archeo-accent);
  transform: scale(1.3);
}
@media (max-width: 767.98px) {
  .archeo-carousel__track { height: 240px; }
  .archeo-carousel__title { font-size: 1.1rem; }
  .archeo-carousel__sub { font-size: 0.85rem; }
  .archeo-carousel__caption { padding: 1rem 4rem 1.1rem 1rem; }
  html[dir="rtl"] .archeo-carousel__caption { padding: 1rem 1rem 1.1rem 4rem; }
  .archeo-carousel__btn { width: 36px; height: 36px; font-size: 1rem; }
}

/* ============================================================
   BANDEAU DÉFILANT ACTUALITÉS — Phase 8 (effet <marquee> moderne)
   Deux images "simulation" défilent en boucle sur les pages
   Actualités (EN id=13, AR id=56). Boucle CSS fluide, sans saut,
   pause au survol, sens inversé en RTL.
   ============================================================ */
.archeo-marquee {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.5rem;
  padding: 0.8rem 0.5rem;
  background: var(--archeo-navy);
  border-top: 3px solid var(--archeo-accent);
  border-bottom: 3px solid var(--archeo-accent);
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0, 48, 93, 0.3);
}
.archeo-marquee__view {
  overflow: hidden;
}
.archeo-marquee__track {
  display: flex;
  width: max-content;
  animation: archeoMarquee 28s linear infinite;
  will-change: transform;
}
html[dir="rtl"] .archeo-marquee__track {
  animation-direction: reverse;
}
.archeo-marquee:hover .archeo-marquee__track,
.archeo-marquee:focus-within .archeo-marquee__track {
  animation-play-state: paused;
}
@keyframes archeoMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.archeo-marquee__item {
  display: block;
  width: 280px;
  height: 122px;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0.55rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  flex: 0 0 auto;
}
.archeo-marquee__item svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Accessibilité : coupe l'animation si demandé */
@media (prefers-reduced-motion: reduce) {
  .archeo-marquee__track {
    animation: none;
  }
}

/* ============================================================
   PHASE 9 — Charte DAI appliquée : plat, sobre, professionnel.
   Page Actualités (EN 13 / AR 56) : colonne sous-catégories
   (gauche EN / droite AR) + liste sobres "titre + date".
   ============================================================ */

/* Donjon/extension de fond vierge, sans dégradé */
body,
.module-container,
.com-container {
  background-image: none;
}

/* En-tête / pied : marine plat DAI, bandes fines bleues */
.container-header,
.site-header {
  box-shadow: none;
  border-bottom: 3px solid #164194;
}
.container-footer,
.site-footer {
  background: #002a4e;
  border-top: 3px solid #164194;
  box-shadow: none;
}

/* Marquee : bandeau plat (pas de dégradé) */
.archeo-marquee {
  background: #00305d;
}

/* Rappels plats pour les composants restants */
.archeo-quick-list li a {
  background: #00305d;
  box-shadow: none;
}
.archeo-hero {
  background: #00305d;
  box-shadow: none;
}
.archeo-carousel {
  background: #00305d;
  border-bottom: 4px solid #164194;
}

/* Liens : bleu DAI */
a {
  color: #164194;
}
a:hover {
  color: #00305d;
}

/* Boutons primaires : marine plat */
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.mod-finder__search-submit,
button[type="submit"] {
  background-color: #00305d;
  border-color: #164194;
  box-shadow: none;
}

/* Titres : marine profond + fine bande bleue sous les modules */
h1, h2, h3, h4 {
  color: #002a4e;
}
.module-title,
.sidebar .module-title,
.mod-custom .module-title {
  color: #002a4e;
  border-bottom: 3px solid #164194;
}
.card-header {
  border-bottom: 3px solid #164194;
}

/* Cartes / articles : bords fins neutres, ombres douces */
.card,
.blog-item,
.com-content-category-blog__item {
  border: 1px solid #DDE3EA;
  box-shadow: 0 2px 6px rgba(0, 48, 93, 0.08);
}

/* ------------------------------------------------------------
   PAGE ACTUALITÉS : layout 2 colonnes (sidebar + liste)
   ------------------------------------------------------------ */
.archeo-news-wrap {
  display: flex;
  gap: 2.25rem;
  align-items: flex-start;
}

.archeo-news-side {
  flex: 0 0 250px;
  min-width: 210px;
  padding: 1.25rem 1.15rem;
  background: #F2F5F8;
  border: 1px solid #DDE3EA;
  border-top: 3px solid #164194;
}

.archeo-news-side__title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #002a4e;
  padding-bottom: 0.55rem;
  margin: 0 0 1rem;
  border-bottom: 3px solid #164194;
}

.archeo-news-side ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.archeo-news-side li + li {
  margin-top: 2px;
}
.archeo-news-side a {
  display: block;
  padding: 0.55rem 0.8rem;
  font-size: 0.95rem;
  color: #00305d;
  text-decoration: none;
  border-inline-start: 3px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.archeo-news-side a:hover,
.archeo-news-side a:focus {
  color: #164194;
  background: #E8F0F8;
  border-inline-start-color: #164194;
}
.archeo-news-side a.is-active {
  color: #FFFFFF;
  background: #00305d;
  border-inline-start-color: #164194;
}

.archeo-news-main {
  flex: 1 1 auto;
  min-width: 0;
}

.archeo-news-page-title {
  margin: 0 0 1.1rem;
}

/* Liste sobre : une ligne = titre + date */
.archeo-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.archeo-news-item {
  padding: 0.9rem 0;
  border-bottom: 1px solid #E3E9F0;
}
.archeo-news-item:first-child {
  padding-top: 0;
}
.archeo-news-title {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
  color: #00305d;
  text-decoration: none;
}
.archeo-news-title:hover {
  color: #164194;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.archeo-news-date {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.83rem;
  color: #6B7280;
}

/* Sidebar = 1er enfant en DOM ; flex la place à gauche en LTR
   (ordre 2 en RTL => visuellement à droite en arabe). */
html[dir="ltr"] .archeo-news-side { order: 1; }
html[dir="ltr"] .archeo-news-main { order: 2; }
html[dir="rtl"] .archeo-news-side { order: 2; }
html[dir="rtl"] .archeo-news-main { order: 1; }

/* Mobile : empilement sidebar au-dessus de la liste */
@media (max-width: 767.98px) {
  .archeo-news-wrap {
    flex-direction: column;
    gap: 1.25rem;
  }
  .archeo-news-side {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
  html[dir="ltr"] .archeo-news-side,
  html[dir="rtl"] .archeo-news-side {
    order: 0;
  }
}

/* ============================================================
   Bannière patrimoine AR/EN — montage 5 sites archéologiques
   Affichée via index.php (template enfant) sous la navbar,
   pages arabes et anglaises uniquement.
   ============================================================ */
.archeo-heritage {
  position: relative;
  width: 100%;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow: hidden;
  background: #1a2f5e;
}
.archeo-heritage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 47, 94, 0.28) 0%, rgba(26, 47, 94, 0.82) 100%);
}
.archeo-heritage__col {
  position: relative;
  overflow: hidden;
}
.archeo-heritage__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transition: transform 0.6s ease;
  will-change: transform;
}
.archeo-heritage__col:hover .archeo-heritage__bg {
  transform: scale(1.05);
}
.archeo-heritage__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 2;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.archeo-heritage__col:hover .archeo-heritage__name {
  opacity: 1;
  transform: none;
}
.archeo-heritage__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  text-align: center;
  pointer-events: none;
}
.archeo-heritage__title {
  margin: 0 0 16px;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  line-height: 1.3;
}
.archeo-heritage__btn {
  display: inline-block;
  padding: 10px 28px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  background: #1a2f5e;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: background 0.3s ease, color 0.3s ease;
  pointer-events: auto;
}
.archeo-heritage__btn:hover {
  background: #fff;
  color: #1a2f5e;
  text-decoration: none;
}
@media (max-width: 991.98px) {
  .archeo-heritage {
    height: 180px;
  }
  .archeo-heritage__title {
    font-size: 1.3rem;
    margin-bottom: 10px;
  }
  .archeo-heritage__btn {
    padding: 7px 18px;
    font-size: 0.9rem;
  }
  .archeo-heritage__name {
    font-size: 0.85rem;
    bottom: 8px;
  }
}
@media (max-width: 575.98px) {
  .archeo-heritage {
    grid-template-columns: repeat(3, 1fr);
    height: 200px;
  }
  .archeo-heritage__col:nth-child(n + 4) {
    display: none;
  }
}

/* ============================================================
   Sélecteur de langue du header — fond bleu identique au header
   (var(--archeo-mauve) = #00305D). Portée topbar uniquement ;
   menu, logo et contenu ne sont pas touchés.
   ============================================================ */
.container-topbar .mod-languages ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.container-topbar .mod-languages li {
  display: inline-block;
  margin-left: 0.35rem;
  vertical-align: middle;
}
html[dir="rtl"] .container-topbar .mod-languages li {
  margin-left: 0;
  margin-right: 0.35rem;
}
.container-topbar .mod-languages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  background: var(--archeo-mauve); /* #00305D = fond du header */
  border: 1px solid var(--archeo-mauve);
  border-radius: 5px;
  line-height: 0;
  text-decoration: none;
  transition: background 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.container-topbar .mod-languages a:hover,
.container-topbar .mod-languages a:focus-visible {
  background: #24407a;
  border-color: #24407a;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12), 0 2px 10px rgba(0, 0, 0, 0.3);
  filter: brightness(1.08);
}
.container-topbar .mod-languages img {
  display: block;
  max-width: none;
  width: auto;
  height: auto;
}
.container-topbar .mod-languages li.lang-active a {
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.4);
}