/* =========================================================
   SCROLLBAR-AR.CSS (RTL) — PARTIE 1
   - Variables
   - Base RTL
   - Scrollbar
   - Rail de lecture
   - Footer / logo
   - Responsive
   ========================================================= */


/* =========================
   1) VARIABLES GLOBALES
   ========================= */

:root {
  --mobile-gutter: 16px;

  /* Rail de lecture */
  --texte-max: 60ch;
  --texte-pad: 1.5rem;

  /* Rail mobile */
  --texte-max-mobile: 88ch;
  --texte-pad-mobile: 8px;

  /* Scrollbar */
  --sb-size: 20px;
  --sb-thumb: #ffd400;
  --sb-track: #ffffff;
  --sb-border: #000000;

  /* Lecture complémentaire */
  --lecture-max: 80ch;
  --lecture-pad: 2ch;
  --lecture-max-mobile: 100%;
  --lecture-pad-mobile: 1.2rem;
}


/* =========================
   2) BASE SAFE (pages arabes seulement)
   ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html[lang="ar"][dir="rtl"],
html[lang="ar"][dir="rtl"] body {
  direction: rtl;
  unicode-bidi: plaintext;
  overflow-x: hidden;
}


/* =========================
   3) SCROLLBAR (pages arabes)
   ========================= */

html[lang="ar"][dir="rtl"] body {
  scrollbar-width: auto;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

html[lang="ar"][dir="rtl"] ::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}

html[lang="ar"][dir="rtl"] ::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border: 5px solid var(--sb-border);
  border-radius: 12px;
}

html[lang="ar"][dir="rtl"] ::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-radius: 12px;
}


/* =========================
   4) RAIL DE LECTURE
   ========================= */

html[lang="ar"][dir="rtl"] .section-inner,
html[lang="ar"][dir="rtl"] main {
  width: min(100%, var(--texte-max));
  margin: 0 auto;
  padding-inline: var(--texte-pad);
}


/* =========================
   5) IMAGES / DESCRIPTION
   ========================= */

.image-description,
#image-description {
  direction: rtl;
  unicode-bidi: plaintext;
  max-width: 900px;
  margin: 15px auto 0;
  padding: 0 15px;
  text-align: right;
  line-height: 1.8;
}


/* =========================
   6) FOOTER / LOGO
   ========================= */

#fin {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 3rem 0;
  padding: 24px 0;
  overflow: visible;
}

#fin a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  line-height: 0;
  font-size: 0;
}

#fin .ima-container {
  display: block;
  width: 300px;
  height: 300px;
  background: url('/source/img/logo-base-2028.png') center 40px / contain no-repeat;
}

#fin .neutre.centre2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* =========================
   7) FIX LOGO FOOTER ARABE
   ========================= */

html[lang="ar"][dir="rtl"] #fin,
html[lang="ar"][dir="rtl"] #fin * {
  clip: auto !important;
  clip-path: none !important;
}

html[lang="ar"][dir="rtl"] #fin {
  position: relative !important;
  z-index: 9999 !important;
  overflow: visible !important;
}

html[lang="ar"][dir="rtl"] #fin .neutre.centre2 a {
  display: inline-block !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

html[lang="ar"][dir="rtl"] #fin .ima-container {
  display: block !important;
  width: 300px;
  height: 300px;
  background: url('/source/img/logo-base-2028.png') center / contain no-repeat !important;
}


/* =========================
   8) CENTRAGE BLOCS DE FIN
   ========================= */

.centered-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

p.suite {
  margin: 2rem auto;
  text-align: center;
}

p {
  margin: 1.5rem auto;
  font-size: 2rem;
  text-align: center;
}


/* =========================
   9) RESPONSIVE
   ========================= */

@media (max-width: 768px) {
  .section-inner,
  main {
    width: 100%;
    padding-inline: var(--mobile-gutter);
  }

  #fin .ima-container,
  html[lang="ar"][dir="rtl"] #fin .ima-container {
    width: 180px;
    height: 180px;
    background-position: center;
  }
}

@media (max-width: 700px) {
  html[lang="ar"][dir="rtl"] .section-inner,
  html[lang="ar"][dir="rtl"] main {
    width: min(100%, var(--texte-max-mobile));
    padding-inline: var(--texte-pad-mobile);
  }

  html[lang="ar"][dir="rtl"] p {
    font-size: 22px;
    line-height: 2.1;
    font-weight: 500;
  }
}

@media (max-width: 480px) {
  :root {
    --sb-size: 14px;
  }
}

/* =========================
   12) VARIABLES TEXTE ARABE
   ========================= */

:root {
  --ar-text-max: 100ch;
  --ar-text-pad: 2ch;
  --ar-font-size: 2em;

  --ar-text-max-mobile: 100%;
  --ar-text-pad-mobile: 1rem;
  --ar-font-size-mobile: 1.25rem;
}


/* =========================
   13) TEXTE ARABE
   ========================= */

html[lang="ar"][dir="rtl"] main {
  width: 100%;
  max-width: var(--ar-text-max);
  margin: 0 auto;
  padding-inline: var(--ar-text-pad);
}

html[lang="ar"][dir="rtl"] main p {
  margin: 0 0 1.2em 0;

  font-family: "Dubai", "Noto Naskh Arabic", "Amiri", serif;
  font-size: var(--ar-font-size);
  font-weight: 600;
  line-height: 2;

  text-align: right;
  text-align-last: right;
}


/* =========================
   14) IMAGE ZOOM
   ========================= */

#image1 {
  transform-origin: center center;
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
}

#image1.zoomed {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;

  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: auto !important;

  cursor: grab;
  touch-action: none;
  transform-origin: center center;
  will-change: transform;
}

#image1.zoomed:active {
  cursor: grabbing;
}

body.no-scroll {
  overflow: hidden !important;
}


/* =========================
   15) TITRES / TYPO
   ========================= */

.titre-principal,
.titre-genre {
  letter-spacing: normal;
  font-variant-ligatures: none;
}

html[lang="ar"][dir="rtl"] .section-inner {
  width: 100%;
  max-width: 120ch;
  margin: 0 auto;
  padding-inline: 1.25rem;
}

h2 {
  font-size: 3.5rem;
  font-weight: 600;
}


/* =========================
   16) TITRES DE PAGE (ARABES)
   ========================= */

.titre-oeuvre {
  margin: 0;
  text-align: center;
  font-family: var(--font-ar);
}

.titre-principal {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 800;
  margin-bottom: -0.3em;
}

.titre-genre {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  opacity: 0.85;
}

.page-header {
  margin-top: 120px;
}


/* =========================
   17) VERSION ARABE AMPLIFIÉE
   ========================= */

html[lang="ar"][dir="rtl"] main {
  width: 70%;
  max-width: 140ch !important;
  margin: 0 auto;
  padding-inline: 2ch;
}

html[lang="ar"][dir="rtl"] main p {
  margin: 0 0 1.2em 0;

  font-family: "Dubai", "Noto Naskh Arabic", "Amiri", serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 2;

  text-align: right;
  text-align-last: right;
}

.titre-genre {
  font-size: 3rem !important;
  font-weight: 600 !important;
}


/* =========================
   18) MOBILE — TEXTE ARABE
   ========================= */

@media (max-width: 768px) {
  html[lang="ar"][dir="rtl"] main {
    max-width: var(--ar-text-max-mobile);
    padding-inline: var(--ar-text-pad-mobile);
  }

  html[lang="ar"][dir="rtl"] main p {
    font-size: var(--ar-font-size-mobile);
    line-height: 1.9;
  }
}


/* =========================
   19) PATCH MOBILE — ARABE RTL
   ========================= */

@media (max-width: 768px) {
  html[lang="ar"][dir="rtl"] main,
  html[lang="ar"][dir="rtl"] .section-inner {
    width: 100% !important;
    max-width: 95% !important;
    margin: 0 auto !important;
    padding-inline: 12px !important;
  }

  html[lang="ar"][dir="rtl"] p {
    font-size: clamp(40px, 6vw, 52px) !important;
    font-weight: 700 !important;
    line-height: 2.1 !important;
    text-align: right !important;
    text-align-last: right !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  html[lang="ar"][dir="rtl"] .suite,
  html[lang="ar"][dir="rtl"] .suite a {
    font-size: clamp(34px, 5.2vw, 44px) !important;
    font-weight: 700 !important;
  }
}


/* =========================
   20) MOBILE — TITRES DE PAGE
   ========================= */

@media (max-width: 768px) {
  html[lang="ar"][dir="rtl"] main,
  html[lang="ar"][dir="rtl"] .section-inner {
    width: 100%;
    max-width: 96%;
    margin: 0 auto;
    padding-inline: 12px;
  }

  html[lang="ar"][dir="rtl"] p {
    font-size: clamp(26px, 4.8vw, 36px);
    font-weight: 700;
    line-height: 2;
    text-align: right;
    overflow-wrap: break-word;
  }

  html[lang="ar"][dir="rtl"] .suite,
  html[lang="ar"][dir="rtl"] .suite a {
    font-size: clamp(24px, 4.2vw, 34px);
    font-weight: 700;
  }
}