/* ==========================================================
   style-ar.css — RTL (NETTOYÉ / UNIFIÉ)
   - Colonne desktop: 70% + max 140ch
   - Typo arabe: grosse & lisible
   - Titres centrés / contenu RTL
   - Poésie: spans + espace contrôlé
   ========================================================== */

/* =========================
   0) Fonts (optionnel)
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');

/* =========================
   1) Variables
   ========================= */
:root{
  /* Polices */
  --ar-font: "Dubai","Noto Naskh Arabic","Amiri","Tahoma","Segoe UI",sans-serif;

  /* Colonne (desktop) */
  --ar-col-width: 70%;
  --ar-col-max: 140ch;
  --ar-col-pad: 2ch;

  /* Texte courant (desktop) */
  --ar-p-size: 3.2rem;
  --ar-p-line: 2.05;
  --ar-p-weight: 700;

  /* Liens */
  --ar-link-size: 2rem;

  /* Titres page */
  --ar-title-main: clamp(3rem, 6vw, 5rem);
  --ar-title-sub: clamp(1.6rem, 3vw, 2.6rem);

  /* Poésie */
  --ar-poem-line: 1.75;
  --ar-verse-gap: 0.12em;
  --ar-strophe-gap: 1.25em;
  --ar-poem-align: right;

  /* Mobile */
  --ar-mobile-max: 95%;
  --ar-mobile-pad: 12px;
  --ar-p-size-mobile: clamp(34px, 5.6vw, 48px);
}

/* =========================
   2) Base RTL
   ========================= */
html[lang="ar"][dir="rtl"]{
  direction: rtl;
  unicode-bidi: plaintext;
  background: #fff;
  color: #111;
  font-family: var(--ar-font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[lang="ar"][dir="rtl"] body{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

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

/* =========================
   3) Colonne (main + section-inner)
   ========================= */
html[lang="ar"][dir="rtl"] main,
html[lang="ar"][dir="rtl"] .section-inner{
  width: var(--ar-col-width);
  max-width: var(--ar-col-max);
  margin: 0 auto;
  padding-inline: var(--ar-col-pad);
}

/* =========================
   4) Texte courant
   ========================= */
html[lang="ar"][dir="rtl"] p{
  font-size: var(--ar-p-size);
  line-height: var(--ar-p-line);
  font-weight: var(--ar-p-weight);
  text-align: right;
  text-align-last: right;
  margin: 0 0 1.15em 0;
  overflow-wrap: break-word;
  word-break: normal;
  word-spacing: 0.08em;
}

/* Liens */
html[lang="ar"][dir="rtl"] a{
  color: #000;
  text-decoration: none;
  font-size: var(--ar-link-size);
}

html[lang="ar"][dir="rtl"] a:hover{
  color: #e74c3c;
}

/* =========================
   5) Titres
   ========================= */
html[lang="ar"][dir="rtl"] h1,
html[lang="ar"][dir="rtl"] h2,
html[lang="ar"][dir="rtl"] h3,
html[lang="ar"][dir="rtl"] h4,
html[lang="ar"][dir="rtl"] h5,
html[lang="ar"][dir="rtl"] h6{
  font-family: var(--ar-font);
  text-align: right;
  line-height: 1.45;
  margin: 0 0 .8em 0;
}

/* Bloc titres de page */
html[lang="ar"][dir="rtl"] .titre-oeuvre{
  text-align: center;
  margin: 50px auto 0;
  font-family: var(--ar-font);
}

html[lang="ar"][dir="rtl"] .titre-principal{
  font-size: var(--ar-title-main);
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  margin: 0 0 14px 0;
  direction: rtl;
  unicode-bidi: isolate;
}

html[lang="ar"][dir="rtl"] .titre-genre{
  font-size: var(--ar-title-sub);
  font-weight: 600;
  opacity: .85;
  text-align: center;
  line-height: 1.35;
  margin: 0 0 2.2rem 0;
  letter-spacing: 0.08em;
}

/* =========================
   6) Poésie (spans)
   ========================= */
html[lang="ar"][dir="rtl"] .poeme{
  margin: 0;
  padding: 0;
}

html[lang="ar"][dir="rtl"] .poeme h1,
html[lang="ar"][dir="rtl"] .poeme h2,
html[lang="ar"][dir="rtl"] .poeme h3{
  text-align: var(--ar-poem-align);
  margin: 0 0 1rem 0;
  letter-spacing: 0.02em;
}

html[lang="ar"][dir="rtl"] .strophe{
  margin: 0 0 var(--ar-strophe-gap) 0;
  padding: 0;
  line-height: var(--ar-poem-line);
  text-align: var(--ar-poem-align);
}

html[lang="ar"][dir="rtl"] .strophe > span{
  display: block;
  font-size: 3rem;
  margin: var(--ar-verse-gap) 0;
}

html[lang="ar"][dir="rtl"] .strophe > span.espace{
  display: block;
  height: 1.4em;
  margin: 0;
}

html[lang="ar"][dir="rtl"] .titre-theme3,
html[lang="ar"][dir="rtl"] .titre-theme3b{
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.85;
  text-align: var(--ar-poem-align);
  margin: 0.12em 0;
}

html[lang="ar"][dir="rtl"] .titre-theme3b{
  margin-top: 1.2em;
}

/* =========================
   7) Images
   ========================= */
html[lang="ar"][dir="rtl"] img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

/* =========================
   8) Séparateurs
   ========================= */
.ligne-pleine{
  width: 100%;
  height: 4px;
  background-color: currentColor;
  margin: 40px 0;
  opacity: 0.6;
}

/* =========================
   9) Footer / logo
   ========================= */
html[lang="ar"][dir="rtl"] #fin{
  position: static !important;
  width: 100%;
  margin: 80px 0;
  padding: 24px 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[lang="ar"][dir="rtl"] #fin .neutre.centre2{
  display: flex;
  justify-content: center;
}

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

.ima-container,
.ima-container2,
.ima-container3{
  position: relative;
  display: block;
  width: 300px;
  height: 400px;
  margin: 0 auto;
  clear: both;
  background: transparent;
  box-shadow: none !important;
  filter: none !important;
}

.ima-container{ margin-bottom: 200px; }
.ima-container2{ margin-top: -50px; }
.ima-container3{
  margin-top: -10px;
  margin-bottom: 200px;
}

.ima-container::before,
.ima-container2::before,
.ima-container3::before{
  content: "";
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center 40px;
}

.ima-container::before{
  background-image: url('../source/img/logo-base-2028.png');
}

.ima-container2::before{
  background-image: url('../source/img/logo-base-2028.png');
}

.ima-container3::before{
  background-image: url('logo-base-2.png');
  background-color: black;
}

/* =========================
   10) Print
   ========================= */
@media print{
  .non-print{
    display: none !important;
  }
}

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

  html[lang="ar"][dir="rtl"] p{
    font-size: var(--ar-p-size-mobile) !important;
    line-height: 2.05 !important;
    font-weight: 700 !important;
  }

  html[lang="ar"][dir="rtl"] a{
    font-size: clamp(22px, 3.5vw, 28px) !important;
  }

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

/* le vers qui porte .espace crée un "gap" après lui */
html[lang="ar"][dir="rtl"] .strophe > span.espace{
  display: block;
  margin-bottom: 1.4em;
}

h1{
  font-size: 4rem;
  font-weight: 800;
}

html[lang="ar"] .poeme .strophe{
  line-height: 1.55;
}

img.visu-img{
  display: block;
  margin: 2rem auto;
  max-width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: all .25s ease;
}

/* état zoomé */
img.visu-img.is-zoomed{
  width: min(95vw, 1200px);
  max-width: none;
  cursor: zoom-out;
}