/* =============================================================================
   Ajouts et corrections du thème Sirine.

   main.css n'est JAMAIS modifié : il vient du template ZenBlog. Tout ce qui est
   propre à ce site vit ici, pour rester intact si le template est mis à jour.

   L'or #D4AF37 était posé en style="" sur chaque lien de l'ancien site. Le
   remonter ici évite d'avoir à le répéter — et permet de changer la couleur en
   un seul endroit.
============================================================================= */

:root {
  --sirine-or: #D4AF37;

  /* Le violet de l'en-tete.
     Il n'est pas choisi au hasard : le violet dominant du logo a ete mesure,
     c'est #2b1f61. L'en-tete prend un ton VOLONTAIREMENT PLUS SOMBRE, sinon la
     pastille ronde du logo se fondrait dans le fond et disparaitrait. */
  --sirine-violet: #1b1444;
  --sirine-violet-logo: #2b1f61;
}

/* =============================================================================
   EN-TETE VIOLET

   main.css pose "--background-color: #f2f2f2" DANS la regle .header (et non au
   niveau de :root). C'est donc cette variable locale qu'il faut redefinir : la
   surcharger ailleurs n'aurait aucun effet.
============================================================================= */

.header {
  --background-color: var(--sirine-violet);
  border-bottom: 1px solid rgba(212, 175, 55, .35); /* un filet dore separe l'en-tete de la page */
}

/* --- Navigation et liens dorés ------------------------------------------- */

.navmenu a,
.navmenu a:focus,
.sirine-lien-or,
.sirine-titre-or {
  color: var(--sirine-or) !important;
}

/* Au survol, main.css bascule sur --nav-hover-color (#465367, un gris-bleu).
   Sur fond violet il devient presque invisible : on eclaircit vers le blanc. */
.navmenu a:hover,
.navmenu a:hover:focus {
  color: #ffffff !important;
}

.sirine-lien-or:hover {
  color: #b9962e !important;
}

.navmenu .current-menu-item > a,
.navmenu .current_page_item > a {
  font-weight: 600;
  color: #ffffff !important; /* la page courante se distingue par le blanc, pas par une nuance d'or */
}

/* --- Icones sociales et bouton du menu mobile ---------------------------- */

.header .header-social-links a,
.header .mobile-nav-toggle {
  color: var(--sirine-or) !important;
}

.header .header-social-links a:hover {
  color: #ffffff !important;
}

/* =============================================================================
   ★ MENU MOBILE

   main.css lui donne "--nav-mobile-background-color: #ffffff" tout en gardant
   les liens en or : de l'or sur du blanc, soit un contraste d'environ 2:1,
   illisible en plein soleil — et c'est precisement la situation d'un telephone.
   Ce defaut existait deja sur l'ancien site. On aligne le panneau mobile sur
   l'en-tete : or sur violet, environ 7:1.
============================================================================= */

@media (max-width: 1199px) {
  .navmenu ul {
    --nav-mobile-background-color: var(--sirine-violet);
    --nav-dropdown-background-color: var(--sirine-violet-logo);
    --nav-dropdown-color: var(--sirine-or);
    border-color: rgba(212, 175, 55, .35) !important;
  }

  .navmenu ul a,
  .navmenu ul a:focus {
    color: var(--sirine-or) !important;
  }

  .navmenu ul a:hover,
  .navmenu ul .active,
  .navmenu ul .active:focus {
    color: #ffffff !important;
  }
}

/* --- Le logo ne doit pas déborder de l'en-tête ---------------------------- */

/* =============================================================================
   ★ LE LOGO — pourquoi il paraissait invisible, et ce qui le règle

   Mesuré le 08-01 en échantillonnant le PNG :

       disque violet du logo   rgb(44, 32, 98)
       fond de l'en-tête       rgb(27, 20, 68)
       contraste               1,2 : 1     (1,0 = couleur identique)

   Et sur les 36 % de pixels opaques du fichier, 25 % sont ce disque contre
   seulement 11 % de lettrage clair. Autrement dit : LES DEUX TIERS DU LOGO SE
   CONFONDENT AVEC L'EN-TÊTE.

   ⚠️ C'est pour ça que l'agrandir seul ne suffisait pas — à 90 px il était déjà
   « à peine visible ». On agrandit DONC, mais on traite aussi la cause.

   La méthode retenue : `drop-shadow`, et non un fond derrière le logo (écarté
   par l'user). La différence est réelle :
     - un fond dessine un RECTANGLE ou un disque derrière l'image ;
     - `drop-shadow` suit le canal alpha du PNG, donc épouse exactement la forme
       du médaillon. Ce n'est pas un bloc posé derrière, c'est un halo qui
       détache le contour.
   Deux ombres superposées : un liseré doré serré qui dessine le bord, puis un
   halo plus large et très léger qui décolle l'ensemble du fond.
============================================================================= */

.header .logo img,
.header .custom-logo {
  height: 120px;             /* 56 -> 76 -> 96 -> 120 px */
  width: auto;
  max-width: 100%;
  filter:
    drop-shadow(0 0 1px rgba(212, 175, 55, .85))
    drop-shadow(0 0 10px rgba(212, 175, 55, .30));
}

/* main.css pose 10 px de marge haute et basse sur l'en-tête. On les supprime :
   le logo gagne 20 px de hauteur sans que la barre grandisse d'autant. */
.header {
  padding-top: 0;
  padding-bottom: 0;
}

/* Sur téléphone, l'en-tête doit rester compact : le logo ne doit pas manger
   la moitié de l'écran au défilement. */
@media (max-width: 767px) {
  .header .logo img,
  .header .custom-logo {
    height: 64px;
  }
}

/* =============================================================================
   ★ SÉPARER LES ENTRÉES DU MENU

   Les liens se touchaient : espace mesuré entre deux zones cliquables = 0 px.
   « من نحن » et « اتصل بنا » se lisaient donc comme un seul bloc — c'est
   exactement ce que l'user a signalé.

   Trois gestes, dans cet ordre d'importance :
     1. un filet vertical doré ENTRE les entrées — l'œil sait où l'une finit
     2. plus d'air autour de chaque libellé
     3. un fond arrondi au survol et sur la page courante, pour que chaque
        entrée se lise comme un bouton et non comme du texte

   On utilise `inset-inline-end` et non `right` : en RTL, la propriété logique
   place le filet du bon côté toute seule. Avec `right`, il faudrait inverser
   à la main le jour où le site passerait en français.
============================================================================= */

@media (min-width: 1200px) {
  .navmenu > ul {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .navmenu > ul > li {
    position: relative;
  }

  /* Le filet séparateur — discret : 1 px, or à 35 %, et 18 px de haut
     seulement, pour souligner sans découper l'en-tête. */
  .navmenu > ul > li:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-end: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: rgba(212, 175, 55, .35);
    pointer-events: none;
  }

  /* Uniquement de l'air autour du libellé. AUCUN fond, ni au survol ni sur la
     page courante (demande de l'user du 08-01) : le survol garde le simple
     passage au blanc de main.css, et la page courante reste marquée par le
     blanc + la graisse. La séparation est portée par le filet, pas par des
     pastilles colorées. */
  .navmenu > ul > li > a {
    padding-inline: 22px;      /* 15 -> 22 px */
  }

  /* ★ La dernière entrée était décentrée par rapport aux autres.
     Cause, dans main.css :  .navmenu li:last-child a { padding-right: 0 }
     C'est une hypothèse DE GAUCHE À DROITE : dans un menu latin, la dernière
     entrée est au bord droit et on colle son texte au bord du conteneur.
     En arabe elle est au bord GAUCHE — la règle lui retire donc la marge du
     mauvais côté, celle qui fait face aux autres entrées.
     Sa spécificité (0,2,2) battait la nôtre (0,1,3) ; on repasse devant avec
     (0,2,3) plutôt que d'employer !important. */
  .navmenu > ul > li:last-child > a {
    padding-inline: 22px;
  }
}

/* Sur téléphone le menu est une colonne : le filet doit être horizontal, entre
   les lignes, sinon il ne sépare rien. */
@media (max-width: 1199px) {
  .navmenu ul > li:not(:last-child) {
    border-bottom: 1px solid rgba(212, 175, 55, .2);
  }
}

/* --- Taille du menu : 14 -> 16 px sur ordinateur -------------------------- */

/* main.css pose 14 px au-dessus de 1200 px et 17 px en dessous : le menu est
   donc PLUS PETIT sur grand écran que sur téléphone, ce qui est l'inverse de
   l'attendu. On ne touche qu'au bloc ordinateur.

   Pourquoi 16 et pas 14 : l'arabe se lit plus petit que le latin à taille
   égale — lettres plus fines, points diacritiques. Les sites arabophones
   utilisent 16 à 18 px en navigation. */
@media (min-width: 1200px) {
  .navmenu a,
  .navmenu a:focus {
    font-size: 16px;
  }
}

/* =============================================================================
   ★ LE BOUTON « احجز استشارتك الآن »

   C'est le seul bouton du site qui amène des clientes, et il était illisible :
   texte doré #D4AF37 sur le fond gris #f0f0f0 de .contentmain, soit un
   contraste mesuré de 1,85:1 — très en dessous du minimum de 4,5:1. Exactement
   le défaut corrigé dans l'en-tête, resté sur l'élément qui compte le plus.

   ⚠️ Le défaut n'existait qu'AU REPOS. main.css lui donne une animation au
   survol (un cercle violet qui envahit le bouton, texte en blanc) parfaitement
   lisible, elle. Mais un bouton passe 99 % de son temps au repos.

   On le remplit donc en or avec du texte violet (7,5:1), ce qui laisse
   l'animation d'origine intacte et cohérente : or -> violet au survol.
============================================================================= */

#hero .contentmain button {
  background-color: var(--sirine-or);
  border-color: var(--sirine-or);
  color: var(--sirine-violet);
  box-shadow: 0 4px 14px rgba(212, 175, 55, .3);
}

#hero .contentmain button a,
#hero .contentmain button a.sirine-lien-or {
  color: var(--sirine-violet) !important;
  font-weight: 600;
  text-decoration: none;
}

/* Au survol, le cercle violet de main.css recouvre le bouton : le texte doit
   passer au blanc en même temps, sinon il devient violet sur violet. */
#hero .contentmain button:hover a,
#hero .contentmain button:hover a.sirine-lien-or {
  color: #ffffff !important;
}

/* =============================================================================
   ★ HIÉRARCHIE DES TITRES — elle était inversée

   Mesuré : titre de la page d'accueil 35 px, titres de section 40 px.
   L'œil allait donc sur « آخر الأخبار » avant le message de bienvenue.
   On rétablit l'ordre : le titre principal domine.
============================================================================= */

.hero h1 {
  font-size: 44px;
  line-height: 1.25;
}

.section-title h2 {
  font-size: 32px;
}

/* Les 100 px de marge au-dessus de chaque titre de section ne créaient pas du
   rythme, juste de l'écart. */
.section-title .section-title-container {
  margin-top: 60px;
}

@media (max-width: 767px) {
  .hero h1 { font-size: 30px; }
  .section-title h2 { font-size: 24px; }
  .section-title .section-title-container { margin-top: 40px; }
}

/* --- Cartes d'article ----------------------------------------------------- */

.sirine-carte {
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
  border-radius: 10px;
  height: 100%;
}

.sirine-carte-img {
  border-radius: 10px;
  width: 100%;
  height: 260px;
  object-fit: cover;   /* toutes les vignettes ont la même hauteur, quelle que
                          soit l'image envoyée : la grille reste régulière */
}

.sirine-carte-titre {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 15px;
  text-align: center;
}

.sirine-carte-extrait {
  text-align: right;
  opacity: .85;
}

/* =============================================================================
   ★ LE FIL D'ARIANE PASSE SOUS LE TITRE

   main.css place le titre et le fil d'ariane côte à côte
   (`d-lg-flex justify-content-between`) : titre à droite, chemin à gauche, sur
   la même ligne. Avec des titres d'articles longs — et ceux de Sirine le sont —
   les deux blocs ne s'alignent jamais proprement, et l'ensemble paraît
   décentré.

   On les empile : le titre occupe sa ligne, le chemin passe dessous. Plus
   aucun conflit de largeur, quelle que soit la longueur du titre.
   `!important` est nécessaire : les classes `d-lg-flex` de Bootstrap en
   portent un.
============================================================================= */

.page-title .container {
  display: block !important;
}

/* ★ Le titre était CENTRÉ alors que le fil d'ariane était à droite : mesuré,
   368 px de vide de chaque côté du texte. D'où l'impression de décalage — les
   deux lignes ne partaient pas du même bord.

   `start` et non `right` : c'est la propriété logique. En arabe elle vaut la
   droite, et elle resterait juste si le site passait un jour en français, sans
   qu'on ait à y revenir.

   ⚠️ Ce centrage est HÉRITÉ d'un ancêtre, il n'existe aucune règle qui vise
   `.page-title` (vérifié en parcourant toutes les feuilles de style). Le
   corriger ailleurs n'aurait donc rien donné. */
.page-title h1,
.page-title .breadcrumbs {
  text-align: start;
}

/* Le titre et le chemin étaient collés l'un à l'autre. On aère.

   ⚠️ `!important` est ici indispensable, et ce n'est pas de la facilité : les
   gabarits portent la classe Bootstrap `mb-lg-0` sur le <h1>, qui pose
   `margin-bottom: 0 !important` au-dessus de 992 px. Sans `!important` de notre
   côté, la marge était appliquée sur mobile et ignorée sur ordinateur — c'est
   exactement ce qu'on a mesuré : 0 px d'écart. La spécificité (0,1,1) contre
   (0,1,0) fait le reste. */
.page-title h1 {
  margin-bottom: 16px !important;
}

.page-title .breadcrumbs ol {
  margin: 0;
  padding: 0;
  justify-content: flex-start;   /* en RTL, `flex-start` = le bord droit */
}

.page-title .breadcrumbs {
  padding-bottom: 14px;
}

/* =============================================================================
   ★ LE PANNEAU D'ARTICLE ÉTAIT DÉCALÉ SUR L'ÉCRAN

   `single.php` place l'article dans une colonne `col-lg-9`, c'est-à-dire 75 %
   de la largeur — la place restante étant destinée à une barre latérale. Or il
   n'y en a pas : les articles récents sont DANS cette même colonne.

   Mesuré sur un écran de 1885 px : 625 px de vide à gauche contre 295 à droite,
   soit un panneau décalé de 165 px par rapport au centre.

   On ne l'élargit pas à 100 % — une ligne de texte de 1320 px est trop longue
   pour être lue confortablement. On garde la largeur et on CENTRE.

   `:only-child` dit exactement l'intention : on ne centre que si la colonne n'a
   aucune voisine. Le jour où une vraie barre latérale est ajoutée, la règle
   cesse d'agir toute seule — pas de surprise.
============================================================================= */

@media (min-width: 992px) {
  .row > .col-lg-9:only-child,
  .row > .col-lg-8:only-child,
  .row > .col-lg-10:only-child {
    margin-inline: auto;
  }
}

/* =============================================================================
   ★ GROUPES PAR CATÉGORIE dans la liste
============================================================================= */

.sirine-liste-groupe {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 4px 8px;
}

/* La première rubrique ne doit pas décoller du haut du panneau. */
.sirine-liste-groupe:first-child {
  padding-top: 4px;
}

.sirine-liste-groupe-titre {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--sirine-violet);
  opacity: .75;
  white-space: nowrap;
}

/* Le trait qui prolonge le libellé : il occupe l'espace restant, donc il
   s'adapte tout seul à la longueur du nom de catégorie. */
.sirine-liste-groupe::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    to left,
    rgba(212, 175, 55, .55),
    rgba(212, 175, 55, 0)
  );
}

/* Un groupe qui suit un autre n'a pas besoin du trait de séparation des
   articles juste au-dessus de lui. */
.sirine-liste-item + .sirine-liste-groupe {
  border-top: none;
}

/* =============================================================================
   ★ LISTE D'ARTICLES — présentations « liste »

   Les grandes cartes sur deux colonnes prennent beaucoup de hauteur : avec
   17 articles, la lecture se répartit sur 3 pages. Une liste en tient bien
   plus par écran, et se parcourt d'un coup d'œil.

   L'image se place AVANT le titre dans le HTML : en lecture de droite à
   gauche, elle apparaît donc à droite, c'est-à-dire en tête de ligne. On ne
   force aucun côté — c'est l'ordre du document qui décide, et il reste juste
   si le site changeait un jour de sens de lecture.
============================================================================= */

/* ★ Le contenu DOIT poser sur un panneau blanc.
   Sans lui il est transparent jusqu'au <body>, qui porte l'image étoilée
   violette : du texte violet foncé sur un fond violet foncé, donc illisible.
   C'est le même traitement que les pages d'article (.sirine-article) — sur ce
   site, le contenu se lit toujours sur une surface claire posée sur le ciel.

   Le panneau porte désormais sur le CONTENEUR et non sur la liste : il englobe
   les boutons de tri ET les groupes d'articles. */
.sirine-panneau {
  padding: 18px 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .12);
}

.sirine-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 575px) {
  .sirine-panneau { padding: 12px 14px; }
}

/* =============================================================================
   ★ BOUTONS DE TRI PAR CATÉGORIE

   Un clic remonte la catégorie choisie en tête ; les autres suivent, dans leur
   ordre d'origine. On NE MASQUE RIEN — c'est un tri, pas un filtre : tous les
   articles restent atteignables sans avoir à revenir en arrière.

   Les boutons sont générés à partir des catégories réellement présentes, donc
   la liste se met à jour toute seule quand Sirine en ajoute une.
============================================================================= */

/* Pas de trait sous la rangée de boutons : il coupait le panneau en deux et
   faisait doublon avec le trait de la première catégorie, juste en dessous.
   La séparation se joue ENTRE les boutons, comme dans le menu de l'en-tête. */
.sirine-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-bottom: 4px;
}

.sirine-filtre {
  position: relative;
  background: none;
  border: none;
  margin: 0;
  height: auto;             /* main.css impose 2.6em à tout <button> */
  line-height: 1.4;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sirine-violet);
  opacity: .7;
  cursor: pointer;
  border-radius: 8px;
  transition: opacity .2s ease, background-color .2s ease;
}

/* Le trait entre deux boutons — le même que dans le menu de l'en-tête.
   ⚠️ L'or y est posé à 35 % parce qu'il se détache sur le violet sombre. Ici le
   fond est BLANC : à 35 % le trait disparaissait. On monte à 65 % pour obtenir
   la même présence à l'œil — même intention, valeur adaptée au fond. */
.sirine-filtre:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: rgba(212, 175, 55, .65);
  pointer-events: none;
}

.sirine-filtre:hover {
  opacity: 1;
  background-color: rgba(212, 175, 55, .12);
}

/* La catégorie actuellement remontée. */
.sirine-filtre[aria-pressed="true"] {
  opacity: 1;
  background-color: rgba(212, 175, 55, .22);
}

/* main.css anime tout <button> avec un disque violet qui l'envahit au survol
   (`button:before`). Sur ces petits boutons de tri, l'effet est déplacé. */
.sirine-filtre::before {
  display: none;
}

/* Cible tactile : mesurés à 41 px, sous le minimum de 44 px pour un doigt.
   Même règle que les champs de formulaire et la pagination. */
@media (max-width: 767px) {
  .sirine-filtre {
    min-height: 44px;
  }
}

/* =============================================================================
   ★ LES 12 SIGNES, EN COLONNE, SUR LA PAGE D'UN SIGNE

   Avant : une simple suite de liens dorés, sans aucun repère — on ne savait pas
   quel signe on était en train de lire.

   Maintenant chaque signe est un bouton :
     - fond NEUTRE pour les onze autres, pour qu'on les voie tous ;
     - fond doré + liseré pour celui qu'on consulte.

   ⚠️ On ne se repose PAS sur la seule couleur pour dire « vous êtes ici » :
   l'attribut `aria-current="page"` porte la même information pour un lecteur
   d'écran, et le liseré ajoute un second signal visuel pour qui distingue mal
   les teintes.
============================================================================= */

.sirine-signes-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sirine-signe {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;              /* cible tactile */
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(27, 20, 68, .05);   /* le fond neutre */
  color: var(--sirine-violet);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.sirine-signe:hover {
  background: rgba(212, 175, 55, .16);
  color: var(--sirine-violet);
}

.sirine-signe--actif {
  background: rgba(212, 175, 55, .28);
  /* `box-shadow` en `inset` plutôt qu'une bordure : une bordure ajouterait
     3 px à la hauteur du bouton actif, qui deviendrait plus grand que les
     autres et ferait sauter la colonne. */
  box-shadow: inset 0 0 0 1.5px rgba(212, 175, 55, .75);
}

.sirine-signe-symbole {
  flex: 0 0 auto;
  width: 22px;
  text-align: center;
  font-size: 17px;
  color: var(--sirine-or);
  filter: brightness(.75);   /* l'or pur manque de contraste sur fond clair */
}

/* --- Le titre « الأبراج », au-dessus de la liste --------------------------- */

/* Il partageait le style des étiquettes de catégorie du blog (13 px, très
   discret), pensé pour se faire oublier au milieu d'une liste d'articles. Ici
   c'est le TITRE de la colonne : il doit s'annoncer.
   ⚠️ La règle est délibérément limitée à `.sirine-signes` — le style d'origine
   reste inchangé sur la page المدونة, où il convient. */
.sirine-signes .sirine-liste-groupe-titre {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 1;
}

.sirine-signes .sirine-liste-groupe {
  padding-bottom: 12px;
}

.sirine-signe--actif .sirine-signe-symbole {
  filter: brightness(.6);
}

/* --- « Articles récents », après un article ------------------------------- */

/* Le bloc est DANS le panneau blanc de l'article : il n'a donc pas besoin de sa
   propre surface, seulement d'un trait qui le sépare du texte qui précède. */
.sirine-recents {
  margin-top: 34px;
  padding-top: 6px;
  border-top: 1px solid rgba(27, 20, 68, .10);
}

/* --- Les groupes, réordonnables ------------------------------------------- */

.sirine-groupes {
  display: flex;
  flex-direction: column;
}

/* `order` plutôt qu'un déplacement dans le DOM : l'ordre du document reste
   intact, donc le contenu lu par un lecteur d'écran ou copié-collé ne change
   pas — seul l'affichage bouge. */
.sirine-groupe {
  order: 0;
}

.sirine-groupe.sirine-groupe--premier {
  order: -1;
}

.sirine-liste-item + .sirine-liste-item {
  border-top: 1px solid rgba(27, 20, 68, .10);
}

.sirine-liste-lien {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 10px;
  text-decoration: none;
  border-radius: 10px;
  transition: background-color .2s ease;
}

.sirine-liste-lien:hover {
  background-color: rgba(212, 175, 55, .10);
}

.sirine-liste-vignette {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(27, 20, 68, .05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sirine-liste-vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* toutes les vignettes ont la même taille, quelle que
                          soit l'image envoyée : la colonne reste alignée */
}

.sirine-liste-corps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;        /* sans ceci, un titre long refuse de se couper et fait
                          déborder la ligne */
}

.sirine-liste-titre {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--sirine-violet);
}

.sirine-liste-lien:hover .sirine-liste-titre {
  color: #6b4fa8;
}

.sirine-liste-meta {
  font-size: 13px;
  opacity: .65;
  color: var(--sirine-violet);
}

/* Sans vignette, le titre porte toute la ligne : on lui laisse plus d'air
   pour que la liste ne paraisse pas tassée. */
.sirine-liste--liste-texte .sirine-liste-lien {
  padding: 16px 10px;
}

@media (max-width: 575px) {
  .sirine-liste-vignette { width: 56px; height: 56px; }
  .sirine-liste-titre    { font-size: 16px; }
  .sirine-liste-lien     { gap: 12px; }
}

/* --- Article ------------------------------------------------------------- */

.sirine-article {
  background-color: #fff;
  padding: 50px;
}

@media (max-width: 768px) {
  .sirine-article { padding: 25px 15px; }
  .sirine-carte-img { height: 200px; }
}

/* Le contenu vient de l'éditeur : il doit rester lisible en RTL. */
.sirine-article .content {
  direction: rtl;
  text-align: right;
  line-height: 1.9;
}

.sirine-article .content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.sirine-symbole {
  color: var(--sirine-or);
  font-size: 1.4em;
  vertical-align: middle;
}

/* --- Pagination ----------------------------------------------------------- */
/* WordPress produit sa propre structure : on l'aligne sur le style Bootstrap
   qu'utilisait l'ancienne pagination.                                        */

.pagination,
.sirine-pagination {
  display: flex;
  justify-content: center;
  gap: .35rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* ★ La pagination était quasi invisible, et pour la même raison que tout le
   reste : de l'or (#D4AF37) sur du blanc, soit ~1,8:1. Sur une liste de
   17 articles répartis en 3 pages, c'est le seul moyen d'atteindre les
   articles plus anciens — il faut qu'on la voie.

   On inverse : texte violet foncé (contraste élevé sur blanc) et bordure
   dorée qui la signale. La page courante est remplie en or. */

.pagination .page-numbers,
.sirine-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;          /* cible tactile, comme les champs de formulaire */
  min-height: 44px;
  padding: .5rem .9rem;
  border: 1.5px solid rgba(212, 175, 55, .55);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  color: var(--sirine-violet);
  background: #fff;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.pagination .page-numbers.current,
.sirine-pagination .page-numbers.current {
  background: var(--sirine-or);
  border-color: var(--sirine-or);
  color: var(--sirine-violet);
}

.pagination .page-numbers:hover:not(.current),
.sirine-pagination .page-numbers:hover:not(.current) {
  background: var(--sirine-violet);
  border-color: var(--sirine-violet);
  color: #fff;
}

/* « Page 1 sur 3 » : WordPress l'affiche mais main.css ne le style pas. */
.pagination .screen-reader-text,
.sirine-pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* =============================================================================
   ★ FORMULAIRES — l'arabe s'écrit à droite, TOUJOURS

   Sur la capture, deux champs côte à côte étaient alignés à l'opposé l'un de
   l'autre : « الاسم الكامل » collé à droite, « البريد الإلكتروني » collé à
   gauche. Ce n'est pas une erreur du gabarit.

   Les navigateurs imposent d'eux-mêmes la direction latine (LTR) aux champs de
   type email, tel et url : ce sont des formats techniquement latins. Le libellé
   arabe hérite alors de cette direction et part à gauche.

   On sépare donc deux choses que le navigateur confond :
     - OU se place le texte  -> toujours à droite, sans exception
     - DANS QUEL SENS il se lit -> arabe pour le texte libre, latin pour une
       adresse e-mail ou un numéro (« sirine@gmail.com » doit rester lisible
       dans cet ordre, pas inversé)
============================================================================= */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
  text-align: right;
}

/* Texte libre : saisie en arabe. */
.wpcf7 input[type="text"],
.wpcf7 textarea,
.wpcf7 select {
  direction: rtl;
}

/* E-mail, téléphone, adresse web : la VALEUR garde l'ordre latin,
   seul son placement change. */
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"] {
  direction: ltr;
}

/* Messages de Contact Form 7 (erreur, confirmation, attente anti-spam). */
.wpcf7 .wpcf7-response-output,
.wpcf7 .wpcf7-not-valid-tip {
  direction: rtl;
  text-align: right;
}

/* --- Cibles tactiles sur téléphone ---------------------------------------
   Mesuré : les champs faisaient 38 px de haut et le bouton d'envoi 36 px.
   Le minimum recommandé pour un doigt est 44 px (Apple) — en dessous, on rate
   sa cible, et c'est le bouton d'envoi qui en souffre le plus.
   La taille du texte est déjà à 16 px, donc iOS ne zoome pas tout seul à la
   mise au point : ce piège-là est déjà évité, il ne faut pas la réduire. */

@media (max-width: 767px) {
  .wpcf7 input:not([type="hidden"]),
  .wpcf7 select,
  .wpcf7 button {
    min-height: 44px;
  }

  .wpcf7 input[type="submit"],
  .wpcf7 button[type="submit"] {
    min-height: 48px;
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* --- Grille du zodiaque : garder les cercles réguliers -------------------- */

.zodiac-item .circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =============================================================================
   ★★ GRILLE DU ZODIAQUE SUR PETIT ECRAN

   main.css la construit en dur, sans aucune media query :

       grid-template-columns: repeat(4, auto);   4 colonnes
       gap: 5px 100px;                           100 px entre chaque
       .circle { width: 90px; }

   Soit 4 x 90 + 3 x 100 = 660 px de large, plus 80 px de marge interieure.
   En dessous d'environ 740 px, ca ne rentre plus. Et comme la grille est
   centree, elle deborde des DEUX cotes a la fois — sans barre de defilement
   pour aller chercher ce qui depasse.

   Mesure sur un ecran de 375 px AVANT correction : la grille reclamait 660 px,
   depassait de 143 px de chaque cote, et **6 des 12 signes etaient hors ecran,
   invisibles et impossibles a toucher**. C'est ce qui "cassait" au zoom : selon
   le niveau de zoom, la largeur utile passe au-dessus ou en dessous du seuil.

   Le correctif ne fixe pas de nouvelles tailles au pixel pres — ce serait
   deplacer le probleme au prochain format de telephone. Les colonnes se
   partagent la largeur disponible (1fr) et le cercle suit la sienne : il ne
   PEUT plus deborder, quelle que soit la largeur de l'ecran.
============================================================================= */

@media (max-width: 991px) {
  .monthly-horoscope {
    padding: 40px 15px; /* au lieu de 60px 40px : 50 px de largeur utile regagnes */
  }

  .zodiac-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;  /* 3 rangees etaient imposees ; on laisse le nombre s'ajuster */
    gap: 20px 12px;            /* les 100 px de gouttiere sont intenables sur un telephone */
  }

  .zodiac-grid .circle {
    width: 100%;
    max-width: 90px;   /* jamais plus grand que la version d'origine */
    height: auto;
    aspect-ratio: 1 / 1; /* le cercle reste rond en retrecissant */
  }

  .zodiac-grid .circle img {
    width: 100%;
    height: auto;
  }
}

/* Tres petits ecrans : 3 colonnes plutot que 4.
   A 4 colonnes les cercles deviennent minuscules et les noms se coupent ;
   3 colonnes sur 4 rangees laissent de la place aux deux. */
@media (max-width: 420px) {
  .zodiac-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zodiac-item span {
    font-size: 14px;
  }
}