/*
Theme Name:   Radiate Enfant
Description:  Thème enfant de Radiate pour le site des 25 km de Miquelon. Contient uniquement nos retouches : Radiate peut être mis à jour sans les perdre.
Template:     radiate
Version:      1.3.0
Text Domain:  radiate-enfant
*/

/* ------------------------------------------------------------
   Mise en page : page plus large, contenu sur fond blanc,
   pas de barre latérale, pas d'espace au-dessus du contenu.
   (reprend les retouches faites autrefois dans radiate/style.css)
   ------------------------------------------------------------ */
.inner-wrap {
	max-width: 1500px;
}

#primary {
	width: 80%;
	margin-right: 10%;
	float: right;
	background-color: #ffffff;
}

/* La barre latérale était retirée de tous les modèles de page :
   on la masque ici au lieu de modifier 7 fichiers PHP. */
#secondary {
	display: none;
}

#content {
	padding-top: 0;
}

/* Image d'en-tête affichée une seule fois (Radiate la répète en largeur). */
#parallax-bg {
	background-repeat: no-repeat !important;
}

/* Sur téléphone, le contenu prend toute la largeur
   (corrige un débordement de 10 % présent dans l'ancienne retouche). */
@media screen and (max-width: 768px) {
	#primary {
		float: none;
		width: 100%;
		margin-right: 0;
	}
}

/* ============================================================
   EN-TÊTE ET LISIBILITÉ (version 1.3.0)
   Hauteurs et cadrage de la photo : Apparence > Personnaliser >
   « Photo d'en-tête (thème enfant) ».
   --re-barre et --re-decalage sont mesurés par js/entete.js ;
   les valeurs ci-dessous ne servent qu'en attendant.
   ============================================================ */
:root {
	--re-barre: 129px;         /* hauteur de la barre titre + menu */
	--re-decalage: 0px;        /* barre d'administration WordPress, si connecté */
	--re-photo: 250px;         /* hauteur de la photo sous la barre (ordinateur) */
	--re-photo-mobile: 170px;  /* hauteur de la photo sous la barre (téléphone) */
	--re-cadrage: 50%;         /* 0 % = haut de la photo, 100 % = bas */
	--re-accent: #7a6c5c;      /* taupe foncé, lisible sur fond blanc */
}

/* 1. Hauteur de l'en-tête : barre + photo, au lieu de la hauteur réelle de l'image */
body #masthead {
	margin-bottom: calc(var(--re-barre) + var(--re-photo)) !important;
}

/* 2 et 3. Photo mise à l'échelle pour remplir le bandeau (ni rognage serré,
   ni bandes vides sur grand écran), placée sous la barre, cadrage réglable */
body #parallax-bg {
	bottom: auto;
	height: calc(var(--re-decalage) + var(--re-barre) + var(--re-photo));
	box-sizing: border-box;
	padding-top: calc(var(--re-decalage) + var(--re-barre));
	background-size: cover !important;
	background-origin: content-box !important;
	background-clip: content-box !important;
	background-position: center var(--re-cadrage) !important;
	background-repeat: no-repeat !important;
}

/* 7. « Lire la suite » en petit bouton bien visible */
#content .read-more-btn {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--re-accent);
	border-radius: 4px;
	color: var(--re-accent) !important;
	font-size: 14px;
	text-decoration: none !important;
	transition: background-color .2s, color .2s;
}

#content .read-more-btn:hover,
#content .read-more-btn:focus {
	background-color: var(--re-accent);
	color: #ffffff !important;
}

/* ---------- Téléphone et petite tablette ---------- */
@media screen and (max-width: 768px) {
	:root {
		--re-barre: 57px;
		--re-photo: var(--re-photo-mobile);
	}

	/* 4. Pas de parallaxe : la photo défile normalement avec la page */
	body #parallax-bg,
	body.admin-bar #parallax-bg {
		position: absolute;
		top: 0 !important;
	}

	/* 5. Barre compacte : titre sur une seule ligne */
	.header-wrap .site-branding {
		max-width: calc(100% - 70px);
		margin-right: 0;
	}

	.header-wrap .site-title {
		float: none;
		font-size: 20px;
		line-height: 56px;
		padding: 0 0 0 16px;
		margin: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.header-wrap #site-navigation {
		margin-top: 0;
	}

	.header-wrap .menu-toggle {
		margin: 8px 0 !important;
	}

	/* 8. Pas d'animation d'apparition : le contenu s'affiche tout de suite */
	.elementor-invisible {
		visibility: visible !important;
		opacity: 1 !important;
	}

	.elementor-element.animated {
		animation: none !important;
	}
}

/* Radiate fixe sa propre hauteur sous 600 px : on la remplace aussi */
@media screen and (max-width: 600px) {
	body #masthead {
		margin-bottom: calc(var(--re-barre) + var(--re-photo)) !important;
	}
}

/* Visiteurs qui ont demandé « réduire les animations » dans leur système */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible {
		visibility: visible !important;
		opacity: 1 !important;
	}

	.elementor-element.animated {
		animation: none !important;
	}
}