/* ==========================================================================
   cal/css/coranique.css — calendrier coranique et éléments communs aux deux
   calendriers (23/10/2026). Chargée après cal-marques.css (config/site.php,
   module 'calendrier').
     - sélecteur « Luni-solaire / Coranique » (les deux calendriers) ;
     - ligne « Origine » de la légende, mention « (julien) », message d'erreur
       de date (les deux calendriers) ;
     - calendrier coranique : dizaines, jours « Jour 1 … Jour 10 », date
       luni-solaire sous le croissant, bloc court du Nassî'.
   Les mois inviolables et Ramadan reprennent les marques de cal-marques.css
   (cartouche doré, étoiles à 8, liseré de khatems, voile ivoire ; carmin).
   ========================================================================== */

:root {
  --cor-khatem: url("../../img/zellige/zl_khatem.svg");
}

/* --- Sélecteur des deux calendriers -------------------------------------- */
.cal-switch {
  display: flex; justify-content: center; margin: 0 auto 14px; gap: 0;
  width: max-content; max-width: 100%;
  border: 1px solid var(--ch-or, #b8902c); border-radius: 999px; padding: 3px;
  background: #fffdf7; box-shadow: 0 1px 3px rgba(80,60,20,.08), inset 0 0 0 1px rgba(255,255,255,.7);
}
.cal-switch-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 20px; border-radius: 999px;
  font-family: var(--ch-titre, 'Cinzel', serif); font-weight: 700; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ch-carmin, #7a0a0a); text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.cal-switch-btn::before {
  content: ""; width: 9px; height: 9px; flex: 0 0 9px; background: var(--cm-puce) center / contain no-repeat; opacity: .55;
}
.cal-switch-btn:hover { background: var(--ch-parchemin, #f5ecd7); color: var(--ch-carmin, #7a0a0a); text-decoration: none; }
.cal-switch-btn.active {
  background: linear-gradient(180deg, #8a0f0f 0%, var(--ch-carmin, #7a0a0a) 55%, var(--ch-carmin-fonce, #4f0505) 100%);
  color: var(--ch-or-clair, #ead49b); box-shadow: inset 0 0 0 1px rgba(234,212,155,.45);
}
.cal-switch-btn.active::before { opacity: 1; }
.cal-switch-btn:focus-visible { outline: 2px solid var(--ch-or, #b8902c); outline-offset: 2px; }
.cal-switch[dir="rtl"] .cal-switch-btn {
  font-family: var(--ch-arabe, 'Amiri', serif); font-size: 17px; letter-spacing: 0; text-transform: none; padding: 4px 20px 6px;
}

/* --- Légende : ligne « Origine » (pleine largeur), lien, médaillon --------- */
.cal-legende .cal-leg-origine { grid-column: 1 / -1; padding-top: 8px; border-top: 1px dashed var(--ch-filet, rgba(184,144,44,.45)); }
.cal-med-origine { background-image: var(--cor-khatem); width: 18px; height: 18px; }
.cal-leg-lien {
  white-space: nowrap; color: var(--ch-carmin, #7a0a0a); font-weight: 600;
  border-bottom: 1px solid var(--ch-or, #b8902c); text-decoration: none;
}
.cal-leg-lien::after { content: " \2192"; }
[dir="rtl"] .cal-leg-lien::after { content: " \2190"; }
.cal-leg-lien:hover { color: var(--ch-carmin-fonce, #4f0505); text-decoration: none; border-bottom-color: var(--ch-carmin, #7a0a0a); }

/* --- Dates juliennes, erreur de saisie ------------------------------------ */
.cal-julien { font-size: .78em; font-style: italic; opacity: .75; white-space: nowrap; }
.cal-erreur {
  margin: 0 0 12px; padding: 10px 16px; border: 1px solid var(--ch-carmin, #7a0a0a); border-inline-start-width: 4px;
  border-radius: 4px; background: #fdf4f0; color: var(--ch-carmin, #7a0a0a); font-size: 15px; line-height: 1.6;
}
.cal-erreur[dir="rtl"] { font-family: var(--ch-arabe, 'Amiri', serif); font-size: 18px; }

/* ==========================================================================
   Calendrier coranique
   ========================================================================== */
.cor-annee-info {
  margin: 12px 0 16px; text-align: center; font-family: var(--ch-texte, 'Lora', serif); font-style: italic;
  font-size: 15px; color: var(--ch-sepia, #4e3b28);
}
.cor-annee-info[dir="rtl"] { font-family: var(--ch-arabe, 'Amiri', serif); font-style: normal; font-size: 18px; }
.cor-legende .cal-legende-liste { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; }
.cor-leg-dizaine {
  background: #fffdf7; border: 1px solid var(--ch-or, #b8902c);
  background-image: linear-gradient(90deg, transparent 31%, var(--ch-or, #b8902c) 31%, var(--ch-or, #b8902c) 35%, transparent 35%, transparent 65%, var(--ch-or, #b8902c) 65%, var(--ch-or, #b8902c) 69%, transparent 69%);
}

/* Mois de 30 jours : hauteur libre (trois dizaines et deux lignes de dates). */
.cal-page .cor-month { height: auto; table-layout: fixed; }
.cor-month col.cor-c-jd { width: 23%; }
.cor-month col.cor-c-wd { width: 24%; }
.cor-month col.cor-c-dates { width: 53%; }
.cal-page .cor-month tr.cor-jour td { padding: 4px 5px; font-size: 14.5px; line-height: 1.3; }
.cal-page .cor-month td.cor-jd { font-family: var(--ch-texte, 'Lora', serif); font-weight: 600; color: var(--ch-carmin, #7a0a0a); white-space: nowrap; }
.cal-page .cor-month td.cor-wd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-page .cor-month td.cor-dates p { white-space: nowrap; }
/* Même hauteur de cartouche pour tous les mois (avec ou sans mention) : les dizaines restent alignées d'une carte à l'autre. */
.cal-page .cor-month .cal-cartouche { min-height: 50px; }
.cal-page .cor-month .nom-mois th, .cal-page .cor-month .ramadan th { padding: 10px 8px 17px !important; }
.cal-page .cor-month td.bg-today { color: #fff !important; }

/* Médaillons du jour (nouvel an coranique, luni-solaire, grégorien) : sous « Jour n ». */
.cor-meds { display: flex; justify-content: center; gap: 3px; margin-top: 2px; }
.cor-meds .cal-medaillon { margin: 0; width: 15px; height: 15px; vertical-align: 0; }
.cor-meds .cal-med-greg { width: 12px; height: 12px; margin-top: 1.5px; }

/* Date luni-solaire, sous la date grégorienne, après un petit croissant. */
.cor-luni {
  display: block; margin-top: 1px; font-size: 12px; font-style: italic; color: #7a6744; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cor-croissant {
  display: inline-block; width: 10px; height: 10px; margin-inline-end: 4px; vertical-align: -1px;
  background: var(--cm-croissant) center / contain no-repeat; filter: drop-shadow(0 0 .5px #8a6a1c);
}
.cal-page .bg-today .cor-luni { color: #f6e6c0; }

/* En-tête discret de chaque dizaine. */
.cal-page .cor-month tr.cor-dizaine td {
  padding: 5px 8px 4px !important; background: transparent !important;
  border-bottom: 1px solid rgba(184,144,44,.55) !important;
}
.cor-dizaine span {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ch-titre, 'Cinzel', serif); font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #8a6a1c;
}
.cor-dizaine span::before, .cor-dizaine span::after {
  content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(184,144,44,.7), transparent);
}
.cal-page .month-inviolable tr.cor-dizaine td { background: rgba(246,235,203,.55) !important; }
.cal-page .month-ramadan tr.cor-dizaine span { color: var(--ch-carmin, #7a0a0a); }

/* Jour demandé (?date=) */
.cal-page .cor-cible, .cal-page td.cor-cible { box-shadow: inset 0 0 0 2px var(--ch-or, #b8902c); background-color: #fff4d6 !important; }

/* --- Le Nassî' : bloc court de 5 ou 6 jours, hors dizaine ----------------- */
.cal-page .cor-nassi {
  display: block; height: auto; overflow: visible; margin: 0 0 14px; border-radius: 4px;
  box-shadow: 0 1px 3px rgba(80,60,20,.08);
}
.cal-page .cor-nassi-tete {
  position: relative; text-align: center; padding: 10px 8px 17px;
  background: linear-gradient(180deg, #fbf3da 0%, var(--cm-or-pale) 100%);
  color: var(--ch-carmin, #7a0a0a); border-bottom: 1px solid var(--ch-or, #b8902c);
  font-family: var(--ch-titre, 'Cinzel', serif); font-weight: 700; font-size: 15px; letter-spacing: .08em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.cal-page .cor-nassi-tete::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 9px;
  background: var(--cm-filet) center / auto 9px repeat-x; opacity: .9; pointer-events: none;
}
.cor-nassi-jours {
  list-style: none; margin: 0; padding: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.cor-nassi-jours > li { flex: 0 1 calc((100% - 50px) / 6); min-width: 0; }
.cor-nassi-jour {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 6px 8px;
  border: 1px solid rgba(184,144,44,.55); border-radius: 3px; background: rgba(255,253,246,.85);
  text-align: center; font-size: 14.5px; line-height: 1.35; color: #2e2410; position: relative;
}
.cor-nassi-jour::before {
  content: ""; position: absolute; top: 4px; inset-inline-start: 5px; width: 9px; height: 9px;
  background: var(--cm-puce) center / contain no-repeat; opacity: .8;
}
.cor-nassi-n { font-family: var(--ch-texte, 'Lora', serif); font-weight: 700; font-style: italic; color: var(--ch-carmin, #7a0a0a); }
.cor-nassi-jour .cor-luni { max-width: 100%; }
.cal-page .cor-nassi-jour.bg-info { background-color: rgba(212,175,55,.16) !important; }
.cal-page .cor-nassi-jour.bg-today { color: #fff !important; }
.cal-page .cor-nassi-jour.bg-today .cor-nassi-n { color: var(--ch-or-clair, #ead49b); }

/* --- Arabe (RTL) ---------------------------------------------------------- */
.cor-page [dir="rtl"] .cor-jd, .cor-page [dir="rtl"] .cor-dizaine span, .cor-nassi[dir="rtl"] .cor-nassi-n,
.cor-page [dir="rtl"] .cor-wd {
  font-family: var(--ch-arabe, 'Amiri', serif); letter-spacing: 0; text-transform: none;
}
.cor-page [dir="rtl"] .cor-jd { font-size: 17px; }
.cal-page.cor-page [dir="rtl"] .cor-month td.cor-wd, .cor-nassi[dir="rtl"] .cor-wd { font-size: 16.5px; }
.cor-page [dir="rtl"] .cor-dizaine span { font-size: 15px; }
.cor-nassi[dir="rtl"] .cor-nassi-tete { font-family: var(--ch-arabe, 'Amiri', serif); letter-spacing: 0; font-size: 19px; }
.cor-nassi[dir="rtl"] .cor-nassi-n { font-style: normal; font-size: 18px; }
.cor-page [dir="rtl"] .cor-luni { font-style: normal; font-size: 13px; }
.cor-page [dir="rtl"] .cor-croissant { transform: scaleX(-1); }

/* --- Écrans étroits ------------------------------------------------------- */
@media (max-width: 1200px) {
  .cor-legende .cal-legende-liste { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .cor-nassi-jours > li { flex-basis: calc((100% - 20px) / 3); }
  .cor-legende .cal-legende-liste { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cal-switch-btn { padding: 6px 13px; font-size: 11.5px; letter-spacing: .06em; }
  .cal-switch[dir="rtl"] .cal-switch-btn { font-size: 15.5px; padding: 3px 14px 5px; }
  .cor-annee-info { font-size: 13.5px; }
  .cor-nassi-jours { padding: 8px; gap: 6px; }
  .cor-nassi-jours > li { flex-basis: calc((100% - 6px) / 2); }
  .cor-nassi-jour { font-size: 13px; }
  .cal-page .cor-month td.cor-jd { width: 25%; }
  .cal-page .cor-month td.cor-wd { width: 24%; }
  .cor-luni { font-size: 11px; }
  .cal-years .cal-year-form .gr-input { width: 130px; }
}

@media print {
  .cal-switch, .cal-years { display: none; }
  .cal-page .cor-nassi-tete::after { display: none; }
}

/* --- Page « Méthode de calcul » : sections Origine et Calendrier coranique - */
.ui-cal-method .cal-explainer + .cal-explainer { margin-top: 22px; }
.ui-cal-method .cal-regle-julien {
  font-size: 15px !important; font-style: italic; color: var(--ch-sepia, #4e3b28) !important;
  padding-top: 10px; border-top: 1px dashed rgba(184,144,44,.5);
}
.ui-cal-method .cal-explainer[dir="rtl"] .cal-regle-julien { font-style: normal; font-size: 18px !important; }
.cor-ordre {
  list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.cor-ordre li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 7px 12px;
  background: #fffdf7; border: 1px solid rgba(184,144,44,.45); border-radius: 3px; font-size: 16px;
}
.cor-ordre-n {
  flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid var(--ch-or, #b8902c); color: var(--ch-carmin, #7a0a0a); font-weight: 700; font-size: 13px; background: #fff;
}
.cor-ordre-nom { font-weight: 600; color: var(--ch-encre, #231c14); }
.cor-ordre-tag {
  font-size: 12px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--ch-or, #b8902c); color: #6b4e14; background: #fbf3da;
}
.cor-ordre-tag-ram { border-color: var(--ch-carmin, #7a0a0a); color: var(--ch-carmin, #7a0a0a); background: #fdf4f0; }
.cor-ordre li.cor-ordre-inv { background: linear-gradient(180deg, #fbf3da, #f6ebcb); border-color: var(--ch-or, #b8902c); }
.cor-ordre li.cor-ordre-nassi { border-style: dashed; }
.cor-ordre li.cor-ordre-nassi .cor-ordre-nom { font-style: italic; color: var(--ch-carmin, #7a0a0a); }
.cor-ordre li.cor-ordre-ram { border-color: var(--ch-carmin, #7a0a0a); }
.cal-explainer[dir="rtl"] .cor-ordre li { font-family: var(--ch-arabe, 'Amiri', serif); font-size: 19px; }
.cal-explainer[dir="rtl"] .cor-ordre-tag { font-size: 14.5px; }
.cor-lien-cal { margin-top: 6px !important; }
.cor-lien-cal a { color: var(--ch-carmin, #7a0a0a); font-weight: 600; border-bottom: 1px solid var(--ch-or, #b8902c); text-decoration: none; }
@media (max-width: 560px) {
  .cor-ordre { grid-template-columns: 1fr; }
}