/* =========================================================
   1. VARIABLES ET RÉINITIALISATION
   ========================================================= */
:root {
  --navy: #263747;
  --blue: #34495e;
  --blue-light: #4d6b86;
  --accent: #3498db;
  --white: #ffffff;
  --off-white: #f4f6f8;
  --ink: #18222c;
  --muted: #65717c;
  --border: #dce3e8;
  --shadow: 0 18px 45px rgba(38, 55, 71, 0.12);
  --radius: 12px;
  --font-title: "Cinzel", serif;
  --font-body: "Montserrat", sans-serif;
  --font-arabic: "Cairo", sans-serif;
     --heading-font: "Zen Dots", sans-serif;
    --body-font: "Montserrat", sans-serif;
    --arabic-font: "Cairo", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--off-white); font-family: var(--font-body); line-height: 1.7; }
button, input { font: inherit; }
button { border: 0; }
a { color: inherit; }
[hidden] { display: none !important; }

/* =========================================================
   2. ACCESSIBILITÉ ET MODE ARABE
   ========================================================= */
.skip-link { position: fixed; z-index: 9999; top: 12px; inset-inline-start: 12px; padding: 10px 16px; color: var(--navy); background: var(--white); border-radius: 6px; font-weight: 700; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
html[lang="ar"] body { font-family: var(--font-arabic); font-size: 1.04rem; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] .site-name { font-family: var(--font-arabic); letter-spacing: 0; }
html[dir="rtl"] .card-content, html[dir="rtl"] .hero-section { text-align: right; }

/* =========================================================
   3. EN-TÊTE
   ========================================================= */
.site-header { position: sticky; z-index: 1000; top: 0; display: flex; min-height: 86px; align-items: center; justify-content: space-between; gap: 24px; padding: 15px clamp(20px, 5vw, 70px); color: var(--white); background: rgba(52, 73, 94, .97); box-shadow: 0 8px 25px rgba(0, 0, 0, .12); backdrop-filter: blur(12px); }
.site-name { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-title); font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 700; text-decoration: none; text-transform: uppercase; }
.site-name i { color: #c9e7fa; }
.language-selector { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; }
.language-selector > i { margin-inline: 7px 4px; }
.language-button { min-width: 38px; min-height: 34px; padding: 5px 8px; color: var(--white); background: transparent; border-radius: 999px; font-size: .72rem; font-weight: 700; cursor: pointer; }
.language-button:hover, .language-button.is-active { color: var(--blue); background: var(--white); }

/* =========================================================
   4. HERO ET MESSAGE D'INFORMATION
   ========================================================= */
#catalogue { width: min(100% - 32px, 1400px); margin: 0 auto; }
.hero-section { margin: 36px 0 24px; padding: clamp(35px, 7vw, 80px); color: var(--white); background: var(--blue); border-radius: var(--radius); box-shadow: var(--shadow); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: #d3e7f4; font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero-section h1 { max-width: 980px; margin: 0; font-family: var(--font-title); font-size: clamp(2rem, 5vw, 4.3rem); line-height: 1.15; }
.hero-section > p:last-child { max-width: 850px; margin: 24px 0 0; color: #e3ebf0; font-size: clamp(1rem, 2vw, 1.15rem); }
.alert { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; padding: 17px 20px; color: var(--white); background: var(--blue-light); border-radius: var(--radius); }
.alert > i { font-size: 1.25rem; }
.alert p { display: flex; flex: 1; gap: 7px; margin: 0; }
.alert-close { display: grid; width: 38px; height: 38px; place-items: center; color: var(--white); background: rgba(255,255,255,.1); border-radius: 50%; cursor: pointer; }

/* =========================================================
   5. RECHERCHE ET FILTRES
   ========================================================= */
.catalog-tools { position: sticky; z-index: 100; top: 102px; margin-bottom: 28px; padding: 22px; background: rgba(255,255,255,.96); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.search-wrap { display: flex; align-items: center; gap: 20px; }
.search-field { display: flex; flex: 1; align-items: center; gap: 12px; min-height: 50px; padding: 0 17px; border: 1px solid var(--border); border-radius: 8px; background: var(--off-white); }
.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52,152,219,.13); }
.search-field i { color: var(--blue); }
.search-field input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }
.result-count { min-width: 105px; margin: 0; color: var(--muted); font-size: .85rem; font-weight: 600; text-align: end; }
.filter-buttons { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 17px; }
.filter-button { padding: 9px 15px; color: var(--blue); background: var(--off-white); border: 1px solid var(--border); border-radius: 999px; font-size: .78rem; font-weight: 700; cursor: pointer; transition: .2s ease; }
.filter-button:hover, .filter-button.is-active { color: var(--white); background: var(--blue); border-color: var(--blue); transform: translateY(-1px); }

/* =========================================================
   6. CARTES DU CATALOGUE
   ========================================================= */
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding-bottom: 75px; }
.item { min-width: 0; }
.item.is-hidden { display: none; }
.card-content { display: flex; height: 100%; min-height: 290px; flex-direction: column; padding: 27px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(52,73,94,.08); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-content:hover { border-color: #a9bbc9; transform: translateY(-5px); box-shadow: var(--shadow); }
.card-title { margin: 0 0 16px; color: var(--blue); font-family: var(--font-title); font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.35; }
.card-description { margin: 0; color: var(--muted); font-size: .92rem; }
.card-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 24px; }
.tag { display: inline-flex; padding: 6px 10px; color: var(--blue); background: #eaf0f4; border-radius: 999px; font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.tag.quantique, .tag.langage { color: #174f73; background: #dceffb; }
.tag.histoire { color: #684a16; background: #f7ecd6; }
.tag.ordinateur { color: #385126; background: #e4f0dc; }
.tag.entreprise { color: #5d376c; background: #eee0f3; }
.empty-state { padding: 70px 20px 100px; color: var(--muted); text-align: center; }
.empty-state i { color: var(--blue); font-size: 3rem; }

/* =========================================================
   7. PIED DE PAGE
   ========================================================= */
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 110px; padding: 25px clamp(20px, 5vw, 70px); color: var(--white); background: var(--navy); }
.site-footer p { margin: 0; }
.site-footer a { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; text-decoration: none; }

/* =========================================================
   8. RESPONSIVE
   ========================================================= */
@media (max-width: 1050px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .catalog-tools { position: static; } }
@media (max-width: 680px) {
  .site-header, .site-footer { align-items: center; flex-direction: column; text-align: center; }
  .site-header { position: relative; padding-block: 20px; }
  #catalogue { width: min(100% - 20px, 1400px); }
  .hero-section { margin-top: 10px; }
  .search-wrap { align-items: stretch; flex-direction: column; gap: 10px; }
  .result-count { text-align: start; }
  .filter-buttons { flex-wrap: nowrap; padding-bottom: 6px; overflow-x: auto; }
  .filter-button { flex: 0 0 auto; }
  .catalog-grid { grid-template-columns: 1fr; }
  .alert p { flex-direction: column; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }