/* ==========================================================================
   Abu Omar archive theme
   Port of the SPIP skeleton "abu_omar_skel" (css/hannaws_base.css + font.css)
   onto Bootstrap 5.3. Bootstrap handles the grid / RTL; this file carries the
   look of the old site: black banner header, warm off-white panels,
   Noto Naskh Arabic body text and Cairo headings.
   ========================================================================== */

/* ---------- fonts (self-hosted, copied from the old skeleton's polices/) ---------- */
@font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/noto-naskh-arabic-v36-arabic_latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/noto-naskh-arabic-v36-arabic_latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/noto-naskh-arabic-v36-arabic_latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/noto-naskh-arabic-v36-arabic_latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/Cairo-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/Cairo-Regular.woff2') format('woff2'); }

/* ---------- design tokens ---------- */
:root {
  --ao-black: #000;
  --ao-maroon: maroon;
  --ao-red: red;
  --ao-page: whitesmoke;
  --ao-panel: #f4f1ed;          /* .wrapper */
  --ao-aside: #f5f3ef;          /* .aside   */
  --ao-crumb: #f5f4ef;          /* .arbo    */
  --ao-nav: #2d2d2d;            /* .topnav  */
  --ao-nav-active: #5a9475;
  --ao-link: navy;
  --ao-text: #222;
  --ao-muted: #555;
  --ao-gold-1: #d4af37;
  --ao-gold-2: #b8941f;

  --bs-body-font-family: 'Noto Naskh Arabic', 'Times New Roman', serif;
  --bs-body-line-height: 1.75;
  --bs-body-color: var(--ao-text);
  --bs-body-bg: var(--ao-page);
  --bs-link-color: var(--ao-link);
  --bs-link-color-rgb: 0, 0, 128;
  --bs-link-hover-color: var(--ao-maroon);
  --bs-link-hover-color-rgb: 128, 0, 0;
}

body { font-size: 1.05rem; }
.ao-text-justify { text-align: justify; }
.visually-hidden-focusable:focus { background: #fff; padding: .5rem 1rem; z-index: 2000; }

/* ---------- page frame ---------- */
.ao-page {
  background: var(--ao-page);
  border: 1px solid #ccc;
  padding: .5rem;
  margin-block: .75rem;
}

/* language strip above the header (inclure/lang-menu) */
.ao-langbar { font-size: .95rem; padding: .25rem .5rem; color: var(--ao-muted); }
.ao-langbar a { color: var(--ao-link); text-decoration: none; }
.ao-langbar a:hover { text-decoration: underline; }
.ao-langbar .current { font-weight: 700; color: var(--ao-text); }

/* ---------- header (inclure/header -> .hanna_banner) ---------- */
.ao-header {
  background: var(--ao-black);
  border: 1px solid var(--ao-maroon);
  text-align: center;
  padding: 1rem .5rem .5rem;
}
.ao-banner { color: #fff; text-decoration: none; display: inline-block; }
.ao-banner:hover { color: #fff; }
.ao-banner__name {
  font-family: 'Cairo', sans-serif; font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
  margin-bottom: 1.1rem;
  text-shadow: 2px 2px var(--ao-red);
}
.ao-banner__tagline {
  font-family: 'Cairo', sans-serif; font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.3rem);
  margin-bottom: .9rem;
}
.ao-banner__goal {
  font-family: 'Cairo', sans-serif; font-weight: 400;
  font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
  margin-bottom: .6rem;
}

/* ---------- top navigation under the header (.topnav) ---------- */
.ao-topnav { background: var(--ao-nav); padding: .25rem; }
.ao-topnav .nav-link {
  color: #f0f0f0; font-weight: 700; font-size: 1.05rem;
  padding: .55rem 1rem;
}
.ao-topnav .nav-link:hover, .ao-topnav .nav-link:focus-visible { background: #dcdcdc; color: #000; }
.ao-topnav .nav-link.active { background: var(--ao-nav-active); color: #fff; }
.ao-topnav .navbar-toggler { border-color: rgba(255,255,255,.5); }
.ao-topnav .navbar-toggler-icon { filter: invert(1); }

/* ---------- main area (main / .wrapper / .content / .aside) ---------- */
.ao-main { background: #fff; padding: .5rem; }
.ao-content { background: #fff; padding: .5rem; }
.ao-aside { background: var(--ao-aside); padding: .8rem; height: 100%; }

/* breadcrumbs (.arbo) */
.ao-crumbs {
  background: var(--ao-crumb); color: #3d3c3a;
  border: 1px double #ddd; padding: .6rem; margin-bottom: 1rem;
  font-size: .95rem;
}
.ao-crumbs .breadcrumb { margin: 0; }
.ao-crumbs a, .ao-crumbs a:visited { color: var(--ao-link); }
.ao-crumbs .breadcrumb-item + .breadcrumb-item::before { content: "›"; }

/* section / article heading (.cartouche) */
.ao-cartouche { margin-bottom: 1rem; }
.ao-title {
  font-family: 'Cairo', sans-serif; font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
  line-height: 1.5; margin: .25rem 0 .5rem;
}
.ao-subtitle { margin-top: .5rem; color: var(--ao-muted); font-size: 1.1rem; }
.ao-meta { color: var(--ao-muted); font-size: .9rem; }

/* home introduction (descriptif du site) */
.ao-intro { text-align: center; margin-bottom: 1.5rem; }
.ao-intro .spip-figure img { border: 1px solid #ccc; padding: 3px; background: #fff; }

/* ---------- article lists (teasers) ---------- */
.ao-teaser { padding-block: .25rem; }
.ao-teaser + .ao-teaser { border-top: 1px solid #ddd; margin-top: .75rem; padding-top: 1rem; }
.ao-teaser__title { font-size: 1.2rem; font-weight: 700; margin-bottom: .3rem; }
.ao-teaser__title a { color: var(--ao-text); text-decoration: none; }
.ao-teaser__title a:hover { color: var(--ao-maroon); text-decoration: underline; }
.ao-teaser__intro { text-align: justify; margin-bottom: .25rem; }
.ao-readmore {
  display: inline-block;
  background: #dcdcdc; border: 1px solid #999;
  padding: .2rem .6rem; margin: .5rem 0;
  color: #000; text-decoration: none; font-size: .95rem;
}
.ao-readmore:hover { background: #000; color: #fff; }

/* sub-sections block on a section page */
.ao-subsections { background: var(--ao-panel); border: 1px solid #e3ddd4; padding: .75rem 1rem; margin-bottom: 1.25rem; }
.ao-subsections h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; }
.ao-subsections ul { margin: 0; padding-inline-start: 1.2rem; }

/* pagination (.pagination / .articles-total) */
.ao-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.ao-total { background: var(--ao-panel); border: 1px solid #ccc; color: #333; padding: .25rem .6rem; }
.ao-pager .pagination { margin: 0; --bs-pagination-color: #333; --bs-pagination-bg: var(--ao-panel);
  --bs-pagination-border-color: #ccc; --bs-pagination-active-bg: #000; --bs-pagination-active-border-color: #000;
  --bs-pagination-hover-color: #000; --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(0,0,0,.15); }

/* ---------- sidebar ---------- */
.ao-block + .ao-block { margin-top: 1.5rem; }
.ao-block__title {
  font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 1.1rem;
  border-bottom: 2px solid #000; padding-bottom: .35rem; margin-bottom: .6rem;
}
.ao-sections { list-style: none; margin: 0; padding: 0; }
.ao-sections li { border-bottom: 1px dotted #bbb; }
.ao-sections a { display: block; padding: .45rem .25rem; color: #000; text-decoration: none; }
.ao-sections a:hover { background: #fff; color: var(--ao-maroon); }
.ao-sections a.active { font-weight: 700; color: var(--ao-maroon); }
.ao-sections ul { list-style: none; padding-inline-start: 1rem; margin: 0; }
.ao-sections ul li { border-bottom: 0; }
.ao-sections ul a { padding: .25rem .25rem; font-size: .95rem; }
.ao-same-section { list-style: none; padding: 0; margin: 0; }
.ao-same-section li { padding: .3rem 0; border-bottom: 1px dotted #ccc; }
.ao-same-section a { color: #000; text-decoration: none; }
.ao-same-section a:hover, .ao-same-section a.active { color: var(--ao-maroon); text-decoration: underline; }

/* search box (formulaires/recherche.html) */
.ao-search {
  display: flex; flex-direction: column; gap: .5rem;
  background: #f9f7f4; border: 1px solid #000; border-radius: 4px; padding: 1rem;
}
.ao-search label { font-weight: 600; color: #000; }
.ao-search .form-control { border: 2px solid #000; border-radius: 3px; }
.ao-search .form-control:focus { box-shadow: 0 0 0 .2rem rgba(212,175,55,.35); border-color: #000; }
.ao-search .btn-search {
  background: linear-gradient(135deg, #2e2c2a, #7a7471);
  color: #f8f6f0; border: 2px solid #ccc; border-radius: 3px; font-weight: 500;
  transition: all .3s ease;
}
.ao-search .btn-search:hover, .ao-search .btn-search:focus-visible {
  background: linear-gradient(135deg, var(--ao-gold-1), var(--ao-gold-2)); color: #2c1810;
}

/* ---------- footer ---------- */
.ao-footer { background: var(--ao-black); color: #fff; text-align: center; padding: 1rem; }
.ao-footer p { margin: .25rem; }
.ao-footer a { color: #fff; }
.ao-footer a:hover { color: var(--ao-gold-1); }
.ao-backtotop {
  position: fixed; inset-inline-end: 1rem; bottom: 1rem; z-index: 1030;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: #000; color: #fff; border: 1px solid #666;
  display: none; align-items: center; justify-content: center; font-size: 1.25rem;
}
.ao-backtotop.show { display: flex; }

/* ---------- article body: output of the SPIP -> HTML migration ---------- */
.ao-body { text-align: justify; overflow-wrap: break-word; }
.ao-body::after { content: ""; display: table; clear: both; }
.ao-body img { max-width: 100%; height: auto; }
.ao-body .spip-img.spip-left  { float: left;  margin: .3rem 1.25rem .75rem 0; max-width: 45%; }
.ao-body .spip-img.spip-right { float: right; margin: .3rem 0 .75rem 1.25rem; max-width: 45%; }
.ao-body .spip-figure { margin: 1rem auto; text-align: center; clear: both; }
.ao-body .spip-center { display: block; margin-inline: auto; }
.ao-body blockquote.spip-quote {
  border-inline-start: 4px solid var(--ao-maroon); background: var(--ao-panel);
  padding: .75rem 1rem; margin: 1rem 0;
}
.ao-body .spip-intertitre { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 .75rem; }
.ao-body .spip-table td { vertical-align: top; text-align: center; }
.ao-body .spip-video { margin: 1rem auto; max-width: 720px; }
.ao-body .spip-audio, .ao-attachments audio { width: 100%; max-width: 480px; display: block; margin: .75rem auto; }
.ao-body .spip-doc { margin: .75rem 0; }
.spip-doc-link { font-weight: 600; text-decoration: none; }
.spip-doc-link:hover { text-decoration: underline; }
.spip-doc-icon {
  display: inline-block; min-width: 2.6rem; padding: .05rem .3rem; margin-inline-end: .3rem;
  background: var(--ao-maroon); color: #fff; font: 700 .7rem/1.5 system-ui, sans-serif;
  text-align: center; border-radius: 3px; vertical-align: middle;
}
.spip-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin: 1rem 0; }
.spip-gallery-item { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid #ccc; background: #fff; }
.spip-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.spip-gallery-item:hover img { transform: scale(1.05); }
.ao-attachments { border-top: 1px solid #ddd; margin-top: 1.5rem; padding-top: 1rem; }
.ao-attachments h2 { font-size: 1.1rem; font-weight: 700; }

/* gallery viewer (Bootstrap modal) */
#aoLightbox .modal-content { background: #111; color: #eee; border: 0; }
#aoLightbox img { max-height: 80vh; width: auto; max-width: 100%; }
#aoLightbox .btn-close { filter: invert(1); }

/* contact form */
.ao-contact { max-width: 560px; margin-inline: auto; background: #f9f9f9; padding: 1rem; border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1); }
.ao-contact .btn-dark { width: 100%; }
.ao-contact .hp-field { position: absolute; inset-inline-start: -9999px; }

/* ---------- responsive: aside drops below the content (as the old @media 767px rule) ---------- */
@media (max-width: 991.98px) {
  .ao-aside { margin-top: 1rem; height: auto; }
  .ao-body .spip-img.spip-left, .ao-body .spip-img.spip-right { float: none; display: block; margin: 1rem auto; max-width: 100%; }
}
@media print {
  .ao-langbar, .ao-topnav, .ao-aside, .ao-footer, .ao-backtotop { display: none !important; }
  .ao-page { border: 0; }
}