/* 
==========================================================================
Modale de citation (Magnific Popup) + fallback single-citations.php
========================================================================== 
*/

/* --- Overlay clair plutôt que le fond noir par défaut de Magnific --- */
.citation-modal-popup.mfp-bg {background: rgba(255, 255, 255, 0.92); opacity: 1;}
.citation-modal-popup .mfp-content {max-width: 900px; margin: 40px auto;}

/* --- Contenu partagé (modale ET single-citations.php) --- */
.citation-modal {position: relative; background: transparent; padding: 80px 40px 60px; display: flex; flex-direction: row; min-height: 400px;}
.citation-modal-sidecolumn {width: 100px;}
.citation-modal-maincolumn {width: 85%;}
.citation-modal-popup .citation-modal {box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);}
.citation-modal-date {display:flex; flex-direction:column; color: var(--text-main-nav-active-color); font-weight:700; font-size:1.6rem; line-height:1.2; margin-bottom:12px; font-family: 'BricolageGrotesque24pt-SemiBold';}
.citation-modal-title {font-size: 1.6rem; margin: 0 0 6px; line-height: 1.17em; font-family: 'BricolageGrotesque24pt-Regular';}
.citation-modal-related {color: var(--text-main-nav-active-color); font-style: italic; font-size: 0.95rem; margin-bottom: 24px;}
.citation-modal-related span + span { margin-left: 12px;}
.citation-modal-content { font-size: 1rem; line-height: 1.6;}
.citation-modal-content p {font-family:'BBBReadMe-Regular'; font-size:1em; line-height:1.4em; margin: 1.4em 0 0 0;}
.citation-modal-picture {margin: 1.4em 0 0 0;}

/* --- Bouton fermer (dans la modale Ajax) --- */
.citation-modal-popup .citation-modal-close { position:absolute; top:10px; left:40px; right:auto; border:none; cursor:pointer;
background-image: url(../images/croix.svg); background-repeat:no-repeat; background-size:contain; display:flex; width:40px; height:40px; justify-content:center; align-items:center;}

/* --- Flèches précédent/suivant (galerie Magnific) --- */
.citation-modal-popup .mfp-arrow { position: fixed; top: 50%; margin-top: 0; transform: translateY(-50%); opacity: 1; width: auto; height: auto; color:var(--text-main-nav-active-color); background: none;}
.citation-modal-popup .mfp-arrow::before, .citation-modal-popup .mfp-arrow::after {display: none; border: none;}
.citation-modal-popup .mfp-arrow-left {left: 20px;}
.citation-modal-popup .mfp-arrow-right {right: 20px;}

/* --- Flèches par défaut de Magnific : masquées, on utilise nos propres déclencheurs (#citation-modal-sidecolumn-prev / -next) à la place --- */
.citation-modal-popup .mfp-arrow {display: none;}

/* --- Déclencheurs prev/next intégrés aux colonnes latérales --- */
#citation-modal-sidecolumn-next {display: flex; justify-content: flex-end;}
.citation-modal-sidecolumn-nav {position: sticky; top: 50%; transform: translateY(-50%); cursor: pointer; user-select: none;}
.citation-modal-sidecolumn-nav:hover {opacity: 0.7;}
.citation-modal-arrow-icon {display: block; width: 28px;  height: auto; pointer-events: none; /* le clic doit toujours atteindre le div parent */}

/* --- Responsive --- */
@media (max-width: 1119px) {
    .citation-modal-popup .citation-modal-close {left:4px;}
	.citation-modal-date {font-size:1.2rem; line-height:1.2; margin-bottom:12px;}
    .citation-modal-title {font-size:1.4rem; margin:0 0 6px; line-height:1em;}
    .citation-modal-picture {margin: 1em 0 0 0;}
    .citation-modal-content p {font-size:.9em; line-height:1.3em; margin:1.2em 0 0 0;}
}

/* 
==========================================================================
Fallback : single-citations.php (accès direct, sans JS)
========================================================================== 
*/
.citation-single .container {position: relative; max-width: 900px; margin: 0 auto; padding: 60px 20px;}
.citation-single .citation-modal-close {display: inline-block; position: static; font-size: 1.8rem; color: #111; text-decoration: none; margin-bottom: 20px;}
.citation-single .citation-modal {padding: 0;}
.citation-single-nav {display: flex; justify-content: space-between; margin-top: 40px;}
.citation-single-nav a {color: var(--text-main-nav-active-color); font-size: 1.4rem; text-decoration: none;}

@media (max-width: 990px) {
    .citation-modal {padding: 80px 10px 40px;}
    .citation-modal-sidecolumn {width:40px;}
}