/*
 * Résidu CSS des blocs de page (tools/page_blocks.py) — ce que le schéma des
 * Global Classes ne sait pas exprimer.
 *
 * Le prototype utilise QUATRE fonds de section (154 `section`, 80 `mesh`,
 * 56 `section-cream`, 30 `section-blue`). La chaîne n'en connaissait que deux,
 * ce qui produisait 50 fonds faux sur les 26 pages générées en lot.
 *   - plain  -> .mist-v4-section        (fond de page, rien à poser)
 *   - mesh   -> .mist-v4-section-mesh   (déjà dans mist-home-events.css)
 *   - cream  -> .mist-v4-section-cream  (couleur plate : portée par le kit)
 *   - blue   -> .mist-v4-section-blue   (multi-couches : ici)
 *
 * Rappel de spécificité : les global classes sortent en `.elementor .<label>`
 * (0,2,0). Tout override doit donc être préfixé `.elementor` pour atteindre 0,3,0.
 */

/* Fond « bleu brume » : deux gradients radiaux au-dessus de la couleur plate
   posée par le kit (--blue-mist #F2F0F9). Identique à `.section-blue` du DS. */
.elementor .mist-v4-section-blue {
	background:
		radial-gradient(60% 80% at 12% 12%, rgba(166, 157, 205, 0.30), transparent 60%),
		radial-gradient(55% 70% at 92% 28%, rgba(62, 73, 130, 0.10), transparent 62%),
		#f2f0f9;
}

/* ------------------------------------------------- FRISE CHRONOLOGIQUE */

/* Rendue en div-blocks (ol/li hors enum atomique). Le trait vertical et les
   pastilles passent par des pseudo-éléments, et `border-left-*` est refusé par
   le schéma des global classes (vérifié : il ressort en `0px none`) — donc ici.
   Rappel : les global classes sortent en `.elementor .<label>` (0,2,0), on
   préfixe `.elementor` pour atteindre 0,3,0. */
.elementor .mist-v4-timeline {
	position: relative;
}

.elementor .mist-v4-timeline::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: linear-gradient(var(--blue-soft), var(--orange-soft));
}

.elementor .mist-v4-tl-item {
	position: relative;
	padding: 0 0 24px 34px;
}

.elementor .mist-v4-timeline > .mist-v4-tl-item:last-child {
	padding-bottom: 0;
}

/* `.e-con::before` est en position:absolute chez Elementor mais sort du flux :
   on le repositionne explicitement (même piège que la puce des badges). */
.elementor .mist-v4-tl-item::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 2px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--blue);
}

/* La dernière entrée = le présent : pastille orange, comme dans le prototype. */
.elementor .mist-v4-timeline > .mist-v4-tl-item:last-child::before {
	border-color: var(--orange);
}

/* Respiration entre le titre de la carte et la première date. */
.elementor .mist-v4-timeline { margin-top: 18px; }

/* ------------------------------------------------ IMAGE PLEINE LARGEUR */

/* `e-image` impose max-width:100% : sans cette levée, l'image ne remplit pas
   le cadre. `max-width:none` est par ailleurs refusé par le schéma du kit. */
.elementor .mist-v4-figure-img { max-width: none; }

/* Ratio et dégradé de la légende (non exprimables en global class). */
.elementor .mist-v4-figure { aspect-ratio: 21 / 9; min-height: 188px; }

.elementor .mist-v4-figure-cap {
	background: linear-gradient(transparent, rgba(31, 36, 68, .82));
	margin: 0;
}

/* ------------------------------------- CENTRAGE ET CARTE DE MISE EN AVANT */

/* Les div-blocks atomiques sont en flex/block : le centrage doit porter sur
   l'axe transversal ET sur le texte. */
.elementor .mist-v4-center { margin-left: auto; margin-right: auto; }
.elementor .mist-v4-center > * { text-align: center; }
.elementor .mist-v4-row.mist-v4-center { justify-content: center; }
.elementor .mist-v4-badges.mist-v4-center { justify-content: center; }

/* Carte bleue de fin de grille : dégradé de marque, texte clair. */
.elementor .mist-v4-card-blue {
	background:
		radial-gradient(55% 90% at 85% 15%, rgba(111, 191, 138, .22), transparent 60%),
		radial-gradient(50% 80% at 8% 95%, rgba(233, 78, 27, .18), transparent 60%),
		linear-gradient(135deg, #3E4982, #2A3265);
}
.elementor .mist-v4-card-blue .mist-v4-eyebrow { color: #ffd9b0; }
.elementor .mist-v4-card-blue .mist-v4-quote-text { color: #fff; font-size: 19px; line-height: 1.4; margin: 14px 0 0; }
.elementor .mist-v4-card-blue a { margin-top: 22px; align-self: flex-start; }

/* --------------------------------------------- BLOC FIDÈLE (Mist_Bloc) */

/* Le HTML de la maquette devient enfant d'un conteneur Elementor, qui est en
   flex. Un média avec `aspect-ratio` mais sans largeur contrainte se met alors
   à dimensionner sa LARGEUR depuis sa hauteur (188px × 21/9 = 439px), d'où un
   débordement horizontal en mobile. On rétablit un comportement de bloc. */
.elementor .elementor-widget-mist_bloc,
.elementor .elementor-widget-mist_bloc > .elementor-widget-container { width: 100%; }

.elementor .elementor-widget-mist_bloc > .elementor-widget-container > section { width: 100%; }

.elementor .elementor-widget-mist_bloc figure,
.elementor .elementor-widget-mist_bloc #mist-map,
.elementor .elementor-widget-mist_bloc #finder-map { width: 100%; max-width: 100%; }

/* Attribution Leaflet : elle peut dépasser sur les petits écrans. */
.elementor .elementor-widget-mist_bloc .leaflet-control-container { max-width: 100%; overflow: hidden; }

/* --- Page d'article (gabarit unique, contenu WordPress) ------------------- */
.mist-article-wrap{max-width:760px}
.mist-article-retour{display:inline-block;margin-bottom:18px}
.mist-article-titre{margin:14px 0 0}
.mist-article-chapo{margin-top:16px}
.mist-article-meta{margin-top:10px}
.mist-article-media{padding-top:0;padding-bottom:0}
.mist-article-photo{width:100%;height:auto;border-radius:var(--r-l);display:block}
.mist-article-corps{padding-top:28px}
.mist-article-corps p{margin:0 0 16px}
.mist-article-corps h2{font-size:var(--fs-h3);margin:28px 0 12px}
.mist-article-corps h3{font-size:var(--fs-h4);margin:22px 0 10px}
.mist-article-corps ul,.mist-article-corps ol{margin:0 0 16px 22px}
.mist-article-corps li{margin-bottom:6px}
.mist-article-cta{text-align:center}
.mist-article-cta-actions{margin-top:20px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* --- Page d'un evenement (fiche depuis le CPT) --------------------------- */
.mist-evt-wrap{max-width:760px}
.mist-evt-retour{display:inline-block;margin-bottom:18px}
.mist-evt-titre{margin:14px 0 0}
.mist-evt-date{margin-top:16px}
.mist-evt-h2{margin-bottom:18px}
.mist-evt-ligne{display:grid;grid-template-columns:170px 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.mist-evt-ligne:first-child{border-top:0;padding-top:0}
.mist-evt-cle{font-family:var(--display);color:var(--ink)}
.mist-evt-val{color:var(--muted)}
.mist-evt-actions{margin-top:22px}
.mist-evt-corps p{margin:0 0 16px}
@media (max-width:600px){.mist-evt-ligne{grid-template-columns:1fr;gap:2px}}

/* --- Grille tarifaire (sections sur mesure) ------------------------------ */
/* Le zebrage passe par le CSS et non par un style en ligne : ainsi toutes les
   lignes du tableau sont identiques, donc reconnues comme une LISTE editable. */
.mist-tarifs tbody tr{border-top:1px solid var(--line)}
.mist-tarifs tbody tr:nth-child(even){background:var(--bg-soft)}
.mist-tarifs td:nth-child(2),.mist-tarifs th:nth-child(2),
.mist-tarifs td:nth-child(3),.mist-tarifs th:nth-child(3){white-space:nowrap;width:1%}
@media (max-width:700px){
  .mist-tarifs td,.mist-tarifs th{padding:12px 14px}
  .mist-tarifs caption{padding:14px 14px 0}
}

/* Attribution Leaflet : sur mobile elle ne se replie pas et provoque 83px de
   defilement horizontal (defaut present aussi dans la maquette). Le critere de
   recette est overflowX = 0 : on le corrige plutot que de le reproduire. */
.leaflet-container{max-width:100%}
.leaflet-control-attribution{max-width:100%;white-space:normal;box-sizing:border-box}