/*
Theme Name: Promethys
Theme URI: https://promethys.com/
Author: Promethys Engineering
Description: Thème sur mesure de Promethys Engineering : bureau d'études en procédés gaz et liquides, ATEX et pression. Accueil avec le E du logo en fenêtre sur une image, images teintées au dégradé bleu de la marque, compteurs animés.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.1.5
License: GPLv2 or later
Text Domain: promethys
*/

/* ---------- En-tête : bandeau clair, menu en capitales espacées ---------- */
.promethys-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid #DCE6EE;
}
.admin-bar .promethys-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .promethys-header { top: 46px; } }

.promethys-header .wp-block-site-logo img,
.promethys-header .promethys-logo img { height: 44px; width: auto; }

.promethys-header .wp-block-navigation-item__content {
	padding-block: 0.4rem;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s, color 0.2s;
}
.promethys-header .wp-block-navigation-item__content:hover,
.promethys-header .current-menu-item > .wp-block-navigation-item__content,
.promethys-header .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--bleu);
	border-bottom-color: var(--wp--preset--color--bleu);
}
.promethys-header .wp-block-navigation__submenu-container {
	border: 1px solid #DCE6EE !important;
	padding: 0.5rem 0;
	min-width: 260px !important;
}
.promethys-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	font-size: 0.9375rem;
	padding: 0.5rem 1rem;
	border-bottom: 0;
}

/* ---------- Titres : largeur étendue, comme le lettrage du logo ---------- */
h1, h2, .wp-block-post-title, .promethys-display {
	font-stretch: 118%;
	letter-spacing: -0.01em;
}
h3, h4 { font-stretch: 108%; }

/* ---------- Le E du logo en fenêtre sur une image ---------- */
.promethys-e {
	aspect-ratio: 63.52 / 77.6;
	width: 100%;
	max-width: 520px;
	min-height: 0 !important;
	padding: 0 !important;
	-webkit-mask: url("assets/img/e-mask.svg") center / contain no-repeat;
	mask: url("assets/img/e-mask.svg") center / contain no-repeat;
	overflow: hidden;
}
.promethys-e .wp-block-cover__image-background {
	animation: promethys-derive 28s ease-in-out infinite alternate;
	transform-origin: 30% 60%;
}
@keyframes promethys-derive {
	from { transform: scale(1.02); }
	to { transform: scale(1.14) translate(-2%, -1%); }
}

.promethys-hero { align-items: center !important; }
.promethys-hero .promethys-e { margin-inline: 0; }
@media (max-width: 781px) {
	.promethys-hero .promethys-e { max-width: 240px; }
}

/* ---------- Les trois piliers : une barre du E au-dessus de chaque pilier ---------- */
.promethys-piliers > .wp-block-column {
	border-left: 1px solid #DCE6EE;
	padding-left: clamp(1rem, 2.5vw, 2rem);
}
.promethys-piliers > .wp-block-column:first-child { border-left: 0; padding-left: 0; }
.promethys-piliers h3::before {
	content: "";
	display: block;
	width: 56px;
	height: 10px;
	margin-bottom: 1.1rem;
	background: linear-gradient(90deg, #0396EF, #76C5F6);
}
@media (max-width: 781px) {
	.promethys-piliers > .wp-block-column { border-left: 0; padding-left: 0; }
}

/* ---------- Compteurs animés ---------- */
.compteurs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}
.compteur {
	font-size: clamp(3rem, 7vw, 5rem);
	font-weight: 800;
	font-stretch: 112%;
	line-height: 1;
	color: var(--wp--preset--color--bleu);
	font-variant-numeric: tabular-nums;
}
.compteur .plus { color: var(--wp--preset--color--encre); font-weight: 600; }
.compteur .unite { font-size: 0.6em; }
.compteur p {
	margin: 0.9rem 0 0;
	font-size: 1rem;
	font-weight: 500;
	font-stretch: 100%;
	color: var(--wp--preset--color--ardoise);
}
@media (max-width: 600px) { .compteurs { grid-template-columns: 1fr; } }

/* ---------- Images teintées et bandeaux ---------- */
.promethys-bandeau .wp-block-post-title { color: #fff; }
.promethys-realisation figcaption,
.promethys-legende {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.9);
}

/* ---------- Cartes de sous-pages (pages parentes) ---------- */
.promethys-cartes > .wp-block-column {
	border-top: 3px solid var(--wp--preset--color--bleu);
	padding-top: 1.25rem;
}

/* ---------- Pied de page ---------- */
.promethys-footer a { color: #fff; text-decoration: none; }
.promethys-footer a:hover { color: var(--wp--preset--color--ciel); text-decoration: underline; }
.promethys-footer .promethys-logo img { height: 40px; width: auto; }

/* ---------- Accessibilité ---------- */
:where(a, button, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--ciel);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.promethys-e .wp-block-cover__image-background { animation: none; }
	* { scroll-behavior: auto !important; }
}

/* Sections pleine largeur collées les unes aux autres sur les pages */
.wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }
.wp-block-post-content > .alignfull:first-child { margin-block-start: 0; }
.promethys-bandeau { background-color: var(--wp--preset--color--encre); }
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-cover.promethys-realisation .wp-block-cover__inner-container,
.wp-block-cover.promethys-bandeau .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: 1200px;
	margin-inline: auto !important;
}
.promethys-cartes h3 a { text-decoration: none; }
.promethys-cartes h3 a:hover { text-decoration: underline; }
.wp-block-post-content > h2 { margin-top: var(--wp--preset--spacing--50); }
.promethys-hero { gap: clamp(2rem, 6vw, 5rem) !important; }

/* Menu mobile ouvert : plein écran, entrées lisibles */
.promethys-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem clamp(1.25rem, 6vw, 2.5rem);
}
.promethys-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	gap: 1.1rem;
	padding-top: 3rem;
}
.promethys-header .is-menu-open .wp-block-navigation-item__content { font-size: 1rem; }
.promethys-header .is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	padding: 0.4rem 0 0 1rem !important;
	min-width: 0 !important;
}
.promethys-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.9375rem;
	padding: 0.3rem 0;
	color: var(--wp--preset--color--ardoise);
}
.promethys-header .is-menu-open .wp-block-navigation__responsive-container-content,
.promethys-header .is-menu-open .wp-block-navigation__container,
.promethys-header .is-menu-open .wp-block-navigation-item,
.promethys-header .is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	text-align: left;
}

/* =========================================================
   Version 1.1.0
   ========================================================= */

/* Le E accepte aussi une vidéo courte à la place de l'image */
.promethys-e .wp-block-cover__video-background {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.promethys-e video.wp-block-cover__video-background { animation: none; }

/* Espace avant le pied de page quand la page ne se termine pas par un bandeau plein écran */
.wp-block-post-content { padding-bottom: var(--wp--preset--spacing--60); }
.wp-block-post-content:has(> .alignfull:last-child) { padding-bottom: 0; }

/* Logos de certification, en bas à droite */
.promethys-logos {
	margin-top: var(--wp--preset--spacing--50) !important;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: center;
}
.promethys-logos .wp-block-image { margin: 0; }
.promethys-logos img {
	max-height: 84px;
	width: auto !important;
	height: auto;
	object-fit: contain;
}

/* Nos domaines d'activités */
.promethys-domaines {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1rem !important;
}
.promethys-domaines > p {
	margin: 0 !important;
	padding: 1.1rem 1.25rem;
	background: var(--wp--preset--color--brume);
	border-left: 4px solid var(--wp--preset--color--bleu);
	font-weight: 700;
	font-stretch: 108%;
	font-size: 1.125rem;
}

/* Formulaires Contact Form 7 */
.wpcf7 form { display: grid; gap: 1.1rem; max-width: 640px; }
.wpcf7 form > p { margin: 0; }
.wpcf7 label { display: block; font-weight: 600; font-size: 0.9375rem; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 0.35rem;
	padding: 0.75rem 0.9rem;
	font: inherit;
	font-weight: 400;
	color: var(--wp--preset--color--encre);
	background: #fff;
	border: 1px solid #B8C7D3;
	border-radius: 2px;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus { outline: 2px solid var(--wp--preset--color--bleu); outline-offset: 0; border-color: var(--wp--preset--color--bleu); }
.wpcf7 textarea { min-height: 9rem; resize: vertical; }
.wpcf7 .wpcf7-acceptance label { font-weight: 400; font-size: 0.875rem; display: flex; gap: 0.5rem; align-items: flex-start; }
.wpcf7 input[type="submit"] {
	justify-self: start;
	padding: 0.85rem 1.5rem;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--wp--preset--color--bleu);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--encre); }
.wpcf7 .wpcf7-not-valid-tip { font-size: 0.875rem; margin-top: 0.3rem; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: 0.9rem 1.1rem; border-radius: 2px; }
.promethys-rgpd { font-size: 0.8125rem; color: var(--wp--preset--color--ardoise); }

/* =========================================================
   Version 1.1.3 : bandeau de page sur téléphone et tablette
   ========================================================= */
/* Le bandeau garde sa hauteur de la version 1.1.0. Sur téléphone et tablette
   (jusqu'à 1199 px de large, tablettes en mode paysage comprises), l'image est
   cadrée sur sa partie droite, là où le script Promethys place la photo.
   Pour régler le cadrage : 100% = bord droit, 50% = centre, 0% = bord gauche. */
@media (max-width: 1199px) {
	.wp-block-cover.promethys-bandeau .wp-block-cover__image-background {
		object-position: var(--promethys-cadrage-mobile, 100%) 50% !important;
	}
	/* Le titre peut passer devant la partie claire de l'image : léger halo pour rester lisible. */
	.promethys-bandeau .wp-block-post-title {
		text-shadow: 0 1px 14px rgba(20, 32, 43, 0.55);
	}
}

/* =========================================================
   Version 1.1.5 : texte d'information aligné sur le formulaire
   ========================================================= */
/* Le texte sous les formulaires occupe toute la colonne de la page : il commence
   ainsi au même endroit que le formulaire et le bouton, au lieu d'être centré. */
.is-layout-constrained > .promethys-rgpd {
	max-width: var(--wp--style--global--content-size, 760px);
}