/* ═══════════════════════════════════════════════════════════════
   Page « Cheman » — Corrections responsive (mobile)
   Château de Cheman
   Cible : 2 frises construites en Greenshift / wp:html
     1) Frise VERTICALE en zigzag      → classe .ma-timeline-row
     2) Frise HORIZONTALE (scroll)      → .cheman-frise-wrapper / .cheman-timeline-scroll
   Le CSS d'origine de la frise horizontale est inline (beaucoup de
   !important), donc on neutralise règle par règle avec !important.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1) FRISE VERTICALE EN ZIGZAG  (.ma-timeline-row)
   Desktop : 2 colonnes alternées + trait vertical central absolu.
   Mobile  : on empile proprement et on SUPPRIME le trait central
             + les petites branches diagonales (les conteneurs noirs
             1px × 100% positionnés en absolute left:50%).
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

	/* Les rows Greenshift passent en colonne : on s'assure que les
	   deux colonnes s'empilent et reprennent toute la largeur. */
	.ma-timeline-row {
		flex-direction: column !important;
		gap: 1.5rem !important;
		padding-top: 2.5rem !important;
		padding-bottom: 0 !important;
	}

	.ma-timeline-row > .wp-block-greenshift-blocks-row-column,
	.ma-timeline-row .gspb_row__col--6 {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		box-sizing: border-box !important;
	}

	/* L'image toujours AVANT le texte (ordre de lecture naturel),
	   peu importe le sens du zigzag desktop. */
	.ma-timeline-row .wp-block-greenshift-blocks-image {
		order: -1;
	}

	/* Le trait vertical central : conteneurs noirs 1px × 100% posés en
	   absolute left:50% translateX(-50%). Greenshift les style via une
	   <style> dédiée (PAS d'inline style=""), donc on cible par la classe
	   exacte gspb_container-gsbp-XXXX relevée dans le contenu de la page.
	   On les masque sur mobile (ils traversent le contenu empilé). */
	.gspb_container-gsbp-2214720,
	.gspb_container-gsbp-2cea9c8,
	.gspb_container-gsbp-9a41786,
	.gspb_container-gsbp-67d1cbd,
	.gspb_container-gsbp-9eee218,
	.gspb_container-gsbp-7872a5b,
	.gspb_container-gsbp-fee2a29,
	/* Branches diagonales (60px, rotateZ(-15), left:-80px) */
	.gspb_container-gsbp-55c5f8e,
	.gspb_container-gsbp-2224a2e,
	.gspb_container-gsbp-73c9de2,
	.gspb_container-gsbp-bb05faf,
	.gspb_container-gsbp-49cc348,
	.gspb_container-gsbp-d2b3c77,
	.gspb_container-gsbp-e2e6552 {
		display: none !important;
	}

	/* Recadrage des images empilées */
	.ma-timeline-row .wp-block-greenshift-blocks-image img {
		width: 100% !important;
		height: auto !important;
		border-radius: 6px;
	}

	/* Titres et textes : centrés et confortables une fois empilés */
	.ma-timeline-row .gspb_heading {
		text-align: center !important;
		font-size: 1.6rem !important;
		margin-top: 0.5rem !important;
	}
	.ma-timeline-row .gspb_text {
		text-align: left !important;
	}
}

/* Garde-fou anti-débordement horizontal sur toute la zone des frises
   verticales (les branches absolues peuvent créer un scroll latéral). */
@media (max-width: 991px) {
	.entry-content,
	.ct-container {
		overflow-x: hidden;
	}
}


/* ───────────────────────────────────────────────────────────────
   2) FRISE HORIZONTALE  (.cheman-frise-wrapper / .cheman-timeline-scroll)
   Desktop : scroll horizontal + vague SVG 14000px + cartes 700px,
             photos 580×400, décalage vertical ±250px, hauteur 800px.
   Mobile  : on convertit en EMPILEMENT VERTICAL classique.
             → flex en colonne, largeurs fluides, vague masquée,
               décalages annulés, hauteur auto, plus de drag-scroll.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

	/* Le wrapper : on libère la hauteur figée (800px) et le 100vw décalé */
	.cheman-frise-wrapper {
		height: auto !important;
		overflow: visible !important;
		width: 100% !important;
		left: auto !important;
		transform: none !important;
		padding: 2rem 0 !important;
	}

	/* La piste de scroll devient une colonne empilée, sans scroll horizontal */
	.cheman-timeline-scroll {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		height: auto !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
		padding: 0 1rem !important;
		cursor: default !important;
		gap: 2rem;
	}

	/* On masque la vague SVG (pensée pour un parcours horizontal) */
	.cheman-wave-container {
		display: none !important;
	}

	/* Chaque item : pleine largeur, sans décalage vertical zigzag */
	.cheman-item {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		margin-top: 0 !important;
	}
	.cheman-item:nth-child(even),
	.cheman-item:nth-child(odd) {
		margin-top: 0 !important;
	}

	/* Cartes : padding réduit, largeur fluide */
	.cheman-card {
		padding: 24px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
	.cheman-card h3 {
		font-size: 1.2rem !important;
		letter-spacing: 2px !important;
	}
	.cheman-card p,
	.cheman-quote-box {
		font-size: 16px !important;
		line-height: 1.7 !important;
		text-align: left !important;
	}

	/* Photos : largeur fluide, ratio conservé, plus de 580px figé */
	.cheman-photo-box {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 580 / 400;
		max-width: 100% !important;
		border-width: 4px !important;
	}
	.cheman-photo-box img {
		height: 100% !important;
	}

	/* Date tag : un peu plus compact */
	.cheman-date-tag {
		font-size: 1rem !important;
		padding: 8px 18px !important;
		margin-bottom: 18px !important;
	}
}

/* Très petits écrans : marges encore réduites */
@media (max-width: 480px) {
	.cheman-card { padding: 18px !important; }
	.cheman-frise-wrapper { padding: 1.5rem 0 !important; }
}