/* Sticky CTA mobile : le bouton gauche existant de la boite a outils, fixe en bas d'ecran. */

/*
 * Paragraphes du contenu : plus d'air entre eux (Astra impose 0.8em en inline,
 * d'ou le selecteur avec body pour passer devant).
 */
body .entry-content p,
body .ast-archive-description p {
	margin-bottom: 1.5rem;
}

/*
 * Champ de recherche : remonte dans la barre d'en-tete en position absolue.
 * La barre "below header" ne prend donc plus de hauteur propre.
 */
#masthead {
	position: relative;
}

/* Les #masthead sont necessaires : astra-addon est charge apres ce fichier. */
#masthead .ast-below-header-wrap {
	position: absolute;
	top: 8px;
	right: 24px;
	left: auto;
	z-index: 5;
	width: auto;
	height: auto;
	min-height: 0;
	background: transparent;
}

#masthead .ast-below-header,
#masthead .ast-below-header .ast-container,
#masthead .ast-below-header-section-wrap,
#masthead .below-header-user-select,
#masthead .user-select {
	width: auto;
	max-width: none;
	height: auto;
	min-height: 0;
	line-height: normal;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

#masthead .ast-below-header .search-form {
	width: 217px;
	margin: 0;
}

#masthead .ast-below-header .search-form .search-field {
	width: 100%;
}

/* Desktop : la navigation descend d'1rem pour laisser la place au champ de recherche. */
@media (min-width: 921px) {
	#masthead.header-main-layout-1 .main-navigation {
		margin-top: 1rem;
	}
}

/* Mobile : dans la rangee du logo, a gauche du burger (le logo est reduit pour liberer la place). */
@media (max-width: 920px) {
	#masthead .ast-below-header-wrap {
		/*
		 * Absolu, cale depuis le HAUT de #masthead (et non 50%) : le bloc reste
		 * dans la rangee du logo meme quand le menu mobile deplie l'en-tete.
		 * La barre d'admin decale deja #masthead : aucun calcul en plus.
		 */
		top: 26px;
		right: 68px;
		left: auto;
		transform: none;
	}

	#masthead .ast-below-header .search-form {
		width: 150px;
	}

	#masthead .site-branding .custom-logo {
		max-width: 140px;
		height: auto;
	}
}

/* Tableaux du contenu : defilement horizontal interne au lieu d'elargir la page. */
.tableWrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Boite a outils : le titre sur plusieurs lignes ne chevauche plus les boutons. */
#pub-boite-a-outils .boite-a-outils {
	height: auto;
	min-height: 35px;
}

/* Boite a outils : respiration au-dessus et en dessous. */
#pub-boite-a-outils,
#mob-pub-boite-a-outils {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* Boite a outils mobile : fond gris clair, titre centre. */
#mob-pub-boite-a-outils {
	display: flow-root;
	padding: 0 16px;
	background: #f4f4f4;
}

#mob-pub-boite-a-outils .mob-boite-a-outils {
	height: auto;
	min-height: 35px;
	text-align: center;
}

#mob-pub-boite-a-outils .mob-titre-boite-outils {
	display: block;
	float: none;
}

/*
 * Titre de la boite a outils, interligne resserre sous 920px.
 * Les deux variantes sont visees : une fenetre de bureau retrecie recoit la pub
 * "desktop" (.titre-boite-outils, 27px), seul un vrai mobile recoit .mob-*.
 */
@media (max-width: 920px) {
	#pub-boite-a-outils .titre-boite-outils,
	#mob-pub-boite-a-outils .mob-titre-boite-outils {
		display: block;
		float: none;
		line-height: 1.25;
	}
}

#mob-pub-boite-a-outils .mob-boite-a-outils-2 {
	margin-bottom: 0;
}

/*
 * Boutons 2 et 3 de la boite a outils : texte en gras et en #007991, sur tous les ecrans.
 * Les ID servent a passer devant style.css, charge apres ce fichier avec la meme specificite.
 */
#pub-boite-a-outils a[class*="lien-boite-a-outil-2"],
#pub-boite-a-outils a[class*="lien-boite-a-outil-3"],
#mob-pub-boite-a-outils a[class*="lien-boite-a-outil-2"],
#mob-pub-boite-a-outils a[class*="lien-boite-a-outil-3"] {
	color: #000000 !important;
	font-weight: bold;
}

/* Bouton 1 : meme graisse que les autres (texte blanc : son fond est deja #007991). */
#pub-boite-a-outils a[class*="lien-boite-a-outil-1"],
#mob-pub-boite-a-outils a[class*="lien-boite-a-outil-1"] {
	font-weight: bold;
}

/* Desktop : 3 boutons d'environ 30 %, sans plafond a 260px. */
@media (min-width: 768px) {
	#pub-boite-a-outils .bouton-boite > div {
		width: 30%;
		max-width: none;
		margin-left: 0;
	}
}

@media (max-width: 767px) {
	.bouton-boite > .sticky-cta,
	.mob-bouton-boite > .sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.6);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.1);
		transform: translateY(110%);
		visibility: hidden;
	}

	.sticky-cta--ready {
		transition: transform 0.35s ease, visibility 0s linear 0.35s;
	}

	.sticky-cta.is-visible {
		transform: translateY(0);
		visibility: visible;
		transition-delay: 0s;
	}

	.sticky-cta a,
	.sticky-cta a:hover {
		padding-top: 12px;
		padding-bottom: 12px;
		font-weight: bold;
	}

	/* Boutons 2 et 3 : moins de hauteur sur mobile. */
	#pub-boite-a-outils a[class*="lien-boite-a-outil-2"],
	#pub-boite-a-outils a[class*="lien-boite-a-outil-3"],
	#mob-pub-boite-a-outils a[class*="lien-boite-a-outil-2"],
	#mob-pub-boite-a-outils a[class*="lien-boite-a-outil-3"] {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	/* Les 2 boutons restants dans la boite : pleine largeur, l'un sous l'autre. */
	.bouton-boite:has(> .sticky-cta) {
		flex-direction: column;
	}

	.bouton-boite > .sticky-cta ~ div {
		width: 100%;
		max-width: none;
		margin-left: 0;
	}

	.bouton-boite > .sticky-cta ~ div ~ div {
		margin-top: 10px;
	}
}