/* Page d’un événement de l’agenda — d’après la maquette « agenda-evenement.dc.html ».
   Les blocs viennent des raccourcis de inc/evenement.php ; chacun disparaît quand son
   champ est vide, la mise en page se resserre d’elle-même. */

:root {
  --rq-evt-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C42543' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='1'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E");
  --rq-evt-horaires: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C42543' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --rq-evt-lieu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C42543' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
  --rq-evt-tarif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C42543' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
  --rq-evt-inscription: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C42543' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
  --rq-evt-acces: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C42543' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.5' r='1.8'/%3E%3Cpath d='M8 9h8M12 9v5l-3 7M12 14l3 7'/%3E%3C/svg%3E");
  /* Masques des deux boutons de la barre (le reste des icônes d’interface est dans style.css). */
  --rq-ico-agenda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='1'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M12 14v4M10 16h4'/%3E%3C/svg%3E");
  --rq-ico-epingle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

/* ---- Pavé date du bandeau ---- */
/* min-height : posé en élément flex du bandeau, le pavé se laisse écraser à la hauteur
   laissée par la colonne de gauche et son contenu déborde ; max-content le tient debout
   et fait grandir le bandeau.
   height: auto (04/10/2026, audit d’affichage) : la classe globale CrocoBuilder `rq-pave-date` impose
   height: 69px (format des tuiles de l’accueil). Chromium laissait min-height l’emporter, WebKit (Safari,
   iPhone, iPad) non : le pavé restait à 69 px, « SAMEDI » recouvrait le titre et le mois sortait du cadre. */
.rq-pave-date { display: flex; flex-direction: column; align-items: center; text-align: center; width: 150px; height: auto; min-height: max-content; background: var(--blanc); box-shadow: 0 18px 40px rgba(13, 26, 51, 0.3); }
.rq-pave-date__jour { width: 100%; padding: 8px 0; background: var(--degrade-rouge); color: var(--blanc); font-family: var(--font-alt); font-weight: 700; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; }
.rq-pave-date__quantieme { padding-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: 72px; line-height: 72px; color: var(--encre); }
.rq-pave-date__mois { padding-bottom: 14px; font-family: var(--font-alt); font-weight: 700; font-size: 16px; letter-spacing: 1.5px; color: var(--rouge); text-transform: uppercase; }

/* ---- Barre d’actions ---- */
.rq-evt-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.rq-evt-barre__etat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-family: var(--font-alt); font-weight: 700; font-size: 16px; color: var(--encre); }
.rq-evt-barre__delai { display: inline-flex; align-items: center; gap: 8px; }
.rq-evt-barre__delai::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #3F7D3A; }
.rq-evt-barre__delai--proche::before, .rq-evt-barre__delai--aujourdhui::before { background: var(--rouge); }
.rq-evt-barre__delai--passe::before { background: var(--gris-neutre); }
.rq-evt-barre__resume { color: var(--gris-texte); font-weight: 500; }
.rq-evt-barre__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rq-evt-barre__agenda, .rq-evt-barre__bouton { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: var(--radius-btn); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; }
.rq-evt-barre__agenda { background: var(--encre); border: 1.5px solid var(--encre); font-family: var(--font-display); font-size: 16px; color: var(--blanc); }
.rq-evt-barre__agenda::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask-image: var(--rq-ico-agenda); mask-image: var(--rq-ico-agenda); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.rq-evt-barre__agenda:hover { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.rq-evt-barre__bouton { border: 1.5px solid var(--encre); background: var(--blanc); font-family: var(--font-body); color: var(--encre); }
.rq-evt-barre__bouton::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.rq-evt-barre__bouton--itineraire::before { -webkit-mask-image: var(--rq-ico-epingle); mask-image: var(--rq-ico-epingle); }
.rq-evt-barre__bouton--partage::before { -webkit-mask-image: var(--rq-ico-partage); mask-image: var(--rq-ico-partage); }
.rq-evt-barre__bouton--imprimer::before { -webkit-mask-image: var(--rq-ico-imprimer); mask-image: var(--rq-ico-imprimer); }
.rq-evt-barre__bouton:hover { background: var(--encre); color: var(--blanc); }
.rq-evt-barre__bouton.est-fait { border-color: #2E7D4F; color: #2E7D4F; }
.rq-evt-barre__agenda:focus-visible, .rq-evt-barre__bouton:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }

/* ---- Grille des informations pratiques ---- */
.rq-evt-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-top: 1px solid var(--bordure); border-left: 1px solid var(--bordure); }
.rq-evt-info { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-right: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.rq-evt-info__icone { width: 26px; height: 26px; flex-shrink: 0; margin-top: 2px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.rq-evt-info--date .rq-evt-info__icone { background-image: var(--rq-evt-date); }
.rq-evt-info--horaires .rq-evt-info__icone { background-image: var(--rq-evt-horaires); }
.rq-evt-info--lieu .rq-evt-info__icone { background-image: var(--rq-evt-lieu); }
.rq-evt-info--tarif .rq-evt-info__icone { background-image: var(--rq-evt-tarif); }
.rq-evt-info--inscription .rq-evt-info__icone { background-image: var(--rq-evt-inscription); }
.rq-evt-info--acces .rq-evt-info__icone { background-image: var(--rq-evt-acces); }
.rq-evt-info__texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rq-evt-info__label { font-family: var(--font-alt); font-weight: 700; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gris-texte); }
.rq-evt-info__valeur { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 23px; color: var(--encre); }
a.rq-evt-info__valeur { text-decoration: underline; text-underline-offset: 3px; }
a.rq-evt-info__valeur:hover { color: var(--rouge); }
.rq-evt-info__detail { font-size: 15px; line-height: 20px; color: var(--gris-texte); }

/* ---- Encarts : document, organisateur, intempéries ---- */
.rq-evt-encart__label { font-family: var(--font-alt); font-weight: 700; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--encre); }
.rq-evt-document { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; background: var(--brume); }
.rq-evt-document__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rq-evt-document__nom { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--encre); }
.rq-evt-document__poids { font-size: 15px; color: var(--gris-texte); }
.rq-evt-document__lien { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; background: var(--encre); border-radius: var(--radius-btn); font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--blanc); text-decoration: none; }
.rq-evt-document__lien::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask-image: var(--rq-ico-fleche); mask-image: var(--rq-ico-fleche); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.rq-evt-document__lien:hover { background: var(--rouge); }
.rq-evt-encarts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.rq-evt-encart { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border: 1px solid var(--bordure); }
.rq-evt-encart__nom { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--encre); }
.rq-evt-encart a { font-weight: 700; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rq-evt-encart a:hover { color: var(--rouge); }
.rq-evt-encart__texte { font-size: 16px; line-height: 24px; color: var(--bleu-nuit); }

/* ---- Lieu : carte à une épingle, puis adresse et bouton ---- */
.rq-evt-lieu { display: flex; flex-direction: column; gap: 14px; }
.rq-evt-lieu__carte { height: 260px; background: var(--brume); border: 1px solid var(--bordure); }
.rq-evt-lieu__carte .leaflet-container { font-family: var(--font-body); }
/* L’épingle est posée par le script en divIcon : elle doit rester dessinée par le CSS du site. */
.rq-evt-lieu__pin-wrap { background: none; border: 0; }
.rq-evt-lieu__epingle { display: block; width: 30px; height: 30px; background: var(--rouge); border: 3px solid var(--blanc); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 4px 10px rgba(13, 26, 51, 0.35); }
.rq-evt-lieu__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.rq-evt-lieu__cartouche { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rq-evt-lieu__nom { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--encre); }
.rq-evt-lieu__adresse { font-size: 14px; color: var(--gris-texte); }
.rq-evt-lieu__cta { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1.5px solid var(--encre); border-radius: var(--radius-btn); font-weight: 700; font-size: 15px; color: var(--encre); text-decoration: none; }
.rq-evt-lieu__cta::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask-image: var(--rq-ico-fleche); mask-image: var(--rq-ico-fleche); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.rq-evt-lieu__cta:hover { background: var(--encre); color: var(--blanc); }

@media (max-width: 767px) {
  .rq-pave-date { width: 108px; }
  .rq-pave-date__quantieme { font-size: 48px; line-height: 50px; }
  .rq-pave-date__jour, .rq-pave-date__mois { font-size: 13px; letter-spacing: 1px; }
  .rq-evt-barre__agenda, .rq-evt-barre__bouton { flex: 1 1 auto; justify-content: center; }
  .rq-evt-lieu__carte { height: 200px; }
  .rq-evt-lieu__cta { flex: 1 1 auto; justify-content: center; }
}

/* ---- Impression d’un événement ----
   Une feuille à afficher ou à garder sous la main : titre, date, informations pratiques,
   affiche et texte. Le reste du site, la barre d’actions et la carte (illisible en noir
   et blanc, et l’adresse figure déjà dans les informations) ne s’impriment pas. */
@media print {
  .crocoblocks-theme-builder-location--header-location,
  .crocoblocks-theme-builder-location--footer-location,
  .cb-alerte_barre, .rq-sr-only,
  .cb-evt_hero_motif, .cb-evt_fil, .cb-evt_retour,
  .rq-evt-barre, .rq-evt-lieu, .rq-visuel__zoom,
  .cb-evt_barre_s, .cb-evt_derniers, .cb-evt_liens { display: none !important; }

  html, body { background: #fff !important; }
  .rq-conteneur { max-width: none !important; padding: 0 !important; }

  .cb-evt_hero { min-height: 0 !important; margin: 0 !important; background: none !important; }
  /* À l’impression la page fait 186 mm ≈ 703 px : c’est le palier « mobile » de CrocoBuilder
     qui s’applique et qui empile le bandeau. On rétablit la ligne titre + pavé date. */
  .cb-evt_hero_inner { padding: 0 0 5pt !important; gap: 6mm !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; }
  .cb-evt_hero_txt { gap: 3pt !important; }
  .cb-evt_titre { color: var(--encre) !important; font-size: 21pt !important; line-height: 1.12 !important; max-width: none !important; }
  .cb-evt_tag { background: none !important; border: 0.5pt solid var(--encre) !important; color: var(--encre) !important; height: auto !important; padding: 1pt 5pt !important; font-size: 8pt !important; }

  /* Le pavé date reste, en plus petit : c’est l’information qu’on cherche sur une affichette. */
  .rq-pave-date { width: 26mm !important; box-shadow: none !important; border: 0.3pt solid #bbb !important; }
  .rq-pave-date__jour { background: none !important; color: var(--encre) !important; padding: 2pt 0 !important; font-size: 8pt !important; border-bottom: 0.3pt solid #bbb !important; }
  .rq-pave-date__quantieme { font-size: 26pt !important; line-height: 1 !important; padding-top: 3pt !important; }
  .rq-pave-date__mois { font-size: 8pt !important; padding-bottom: 3pt !important; }

  .cb-evt_section { padding: 0 !important; }
  .cb-evt_grid { display: grid !important; grid-template-columns: 70mm minmax(0, 1fr) !important; gap: 8mm !important; align-items: start !important; }
  .cb-evt_affiche { position: static !important; max-width: none !important; }
  .cb-evt_col { gap: 6pt !important; }

  .rq-visuel { box-shadow: none !important; border: 0.3pt solid #bbb !important; }
  .rq-visuel__image { max-height: 120mm !important; object-fit: contain !important; }

  .cb-evt_chapo { font-size: 11pt !important; line-height: 1.3 !important; }
  /* En colonne étroite, trois cases côte à côte coupaient les noms de lieux en plein mot :
     sur le papier les informations passent en liste, une par ligne. */
  .rq-evt-infos { display: block !important; border: 0 !important; }
  .rq-evt-info { padding: 3pt 0 !important; gap: 5pt !important; border: 0 !important; border-bottom: 0.3pt solid #ddd !important; align-items: baseline !important; }
  .rq-evt-info__icone { width: 10pt !important; height: 10pt !important; margin: 0 !important; }
  .rq-evt-info__texte { flex-direction: row !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 2pt 6pt !important; }
  .rq-evt-info__label { font-size: 6.5pt !important; min-width: 17mm !important; }
  .rq-evt-info__valeur { font-size: 9.5pt !important; line-height: 1.25 !important; }
  .rq-evt-info__detail { font-size: 8pt !important; line-height: 1.25 !important; color: #555 !important; }

  .cb-evt_corps { font-size: 10pt !important; line-height: 1.45 !important; color: #000 !important; }
  .cb-evt_corps p { margin: 0 0 4.5pt !important; }
  .cb-evt_corps h2 { font-size: 13pt !important; line-height: 1.15 !important; margin: 7pt 0 3pt !important; }
  .cb-evt_corps a { color: #000 !important; }
  .cb-evt_corps a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 7pt; color: #555; word-break: break-all; }

  .rq-evt-document, .rq-evt-encart { padding: 5pt 7pt !important; border: 0.3pt solid #bbb !important; background: none !important; }
  .rq-evt-document__lien { display: none !important; }
  .rq-evt-encart__nom, .rq-evt-document__nom { font-size: 10pt !important; }
  .rq-evt-encart__texte, .rq-evt-encart a, .rq-evt-document__poids { font-size: 8.5pt !important; }
  .rq-evt-encarts { gap: 5pt !important; }

  p, li, h2, .rq-visuel, .rq-evt-info, .rq-evt-encart, .rq-evt-document { break-inside: avoid; }
  h2 { break-after: avoid; }
}


/* L'affiche suit la lecture du texte, souvent plus long qu'elle : plus de grand vide sous la photo (audit du 24/09/2026, fiche 1195). */
@media screen and (min-width: 1024px) {
  .cb-evt_affiche { position: sticky; top: calc(140px + var(--rq-alerte-h, 0px)); align-self: start; }
}

/* Sous 1024 px la page tient sur une colonne : le style « sticky » que porte l’élément dans le gabarit (toutes largeurs) faisait
   suivre l’affiche au défilement, par-dessus le texte, sur téléphone et tablette (audit mobile du 30/09/2026). */
@media screen and (max-width: 1023px) {
  .cb-evt_affiche { position: static !important; top: auto !important; }
}