/*
 * Small custom stylesheet for the static rebuild of sudm.fr.
 * Contains the tiny UAG "conditional extension" rules that WordPress used to
 * print inline on every page, plus a few small fixes needed because this is
 * now a static PHP site instead of a live WordPress/Elementor-style page
 * builder (no JS-rendered admin bar offset, no wp-admin bar, etc.).
 */

/* En-tête mobile vide (logo ET menu invisibles en dessous de 921px) : une
   balise </div> manquante dans header.php (voir ce fichier, juste après la
   barre d'en-tête desktop) imbriquait #ast-mobile-header À L'INTÉRIEUR de
   #ast-desktop-header au lieu d'être à côté — or #ast-desktop-header passe
   en display:none sur mobile, ce qui masquait donc tout ce qu'il contenait
   par erreur, logo et bouton de menu compris. Balise corrigée dans
   header.php ; les règles ci-dessous ne font que finir de remettre en forme
   la barre d'en-tête mobile (qui n'avait jamais eu l'occasion d'être testée
   puisqu'invisible), pas de contourner un vrai manque de CSS. */
@media (max-width: 921px) {
	#ast-mobile-header .main-header-bar {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		min-height: 64px;
		padding: 10px 20px;
	}
	#ast-mobile-header .ast-builder-grid-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	#ast-mobile-header .site-logo-img {
		display: block;
	}
	#ast-mobile-header .menu-toggle.main-header-menu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		color: #fff;
		width: 32px;
		height: 32px;
	}
	/* Liste de menu redondante, en double de celle du tiroir (voir footer.php,
	   #ast-mobile-popup) — l'en-tête mobile est de type "off-canvas" : le menu
	   ne doit s'afficher que dans ce tiroir, au clic sur le bouton ☰, jamais
	   déplié en ligne sous le logo. Restée invisible par coïncidence tant que
	   #ast-mobile-header était masqué par le bug de balise ci-dessus. */
	#ast-mobile-header > ul.ast-mobile-menu {
		display: none !important;
	}
}

/* Tiroir du menu mobile (clic sur le bouton ☰, voir footer.php #ast-mobile-popup) :
   aucune des feuilles de style récupérées depuis WordPress ne contient la moindre
   règle pour ".ast-mobile-popup-*" — ce composant (tiroir plein écran coulissant
   depuis la gauche) n'a jamais été exporté du tout lors de la conversion du site
   en HTML statique. Le JS (theme-interactions.js) ajoute/retire correctement les
   classes "active"/"show" au clic, mais sans CSS le tiroir reste réduit à une
   taille de 0×0 : il "s'ouvre" sans que rien ne soit visible à l'écran.
   Tout ce qui suit est donc écrit de zéro, pas une correction d'un oubli mineur. */
.ast-mobile-popup-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
	pointer-events: none;
}
.ast-mobile-popup-drawer.active,
.ast-mobile-popup-drawer.show {
	visibility: visible;
	pointer-events: auto;
}
.ast-mobile-popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba(9, 68, 79, 0.55);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.ast-mobile-popup-drawer.active .ast-mobile-popup-overlay,
.ast-mobile-popup-drawer.show .ast-mobile-popup-overlay {
	opacity: 1;
}
.ast-mobile-popup-inner {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 82%;
	max-width: 320px;
	background: var(--rp-paper, #faf8f4);
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
}
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
.ast-mobile-popup-drawer.show .ast-mobile-popup-inner {
	transform: translateX(0);
}
.ast-mobile-popup-header {
	display: flex;
	justify-content: flex-end;
	padding: 14px;
	flex-shrink: 0;
}
.menu-toggle-close {
	background: none;
	border: none;
	padding: 6px;
	cursor: pointer;
	color: var(--rp-ink, #09444f);
}
.ast-mobile-popup-content {
	padding: 0 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
/* Les deux blocs du tiroir (menu, réseaux sociaux) partagent tous les deux
   cette classe générique "ast-builder-layout-element ast-flex
   site-header-focus-item" posée par le constructeur de thème Astra — sans
   mise en page explicite, ils s'empilaient avec un espacement dû au hasard
   (margin par défaut du bouton supprimé plus haut). Chacun prend maintenant
   toute la largeur du tiroir, espacés régulièrement par le "gap" ci-dessus. */
.ast-mobile-popup-content > .ast-builder-layout-element.ast-flex.site-header-focus-item {
	width: 100%;
}
.ast-mobile-popup-content .main-header-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ast-mobile-popup-content .main-header-menu .menu-item {
	border-bottom: 1px solid var(--rp-mist, #e3ddd1);
}
.ast-mobile-popup-content .main-header-menu .menu-link {
	display: block;
	padding: 14px 4px;
	color: var(--rp-ink, #09444f);
	font-weight: 600;
	text-decoration: none;
}
.ast-mobile-popup-content .main-header-menu .current-menu-item .menu-link {
	color: var(--rp-accent, #197789);
}
.ast-mobile-popup-content .header-social-inner-wrap {
	display: flex;
	gap: 16px;
}
/* Chaque icône reçoit par ailleurs une marge gauche/droite d'environ 17px
   d'une règle introuvable dans les CSS récupérés de WordPress (sans doute
   encore une valeur par défaut liée au Customizer) : forcée à 0 pour ne pas
   s'additionner avec le "gap" ci-dessus et étaler les icônes sur toute la
   largeur du tiroir. */
.ast-mobile-popup-content .header-social-inner-wrap > a {
	margin: 0 !important;
}

/* Images des cartes "info-box" (ex: grille de services) : formats d'origine très différents selon
   la photo, donc on force un ratio identique avec recadrage automatique pour un rendu uniforme.
   !important nécessaire : page-accueil.css contient, pour certains blocs spécifiques (ex:
   .uagb-block-0113b02a), une règle générée par WordPress qui fige la largeur de l'image à sa
   taille d'origine en pixels (ex: 278px, la largeur de l'ancienne photo) — plus spécifique que
   la règle ci-dessous, elle l'emportait sinon et empêchait l'uniformité entre les cartes. */
.uagb-ifb-image-content img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Avatars des 3 témoignages clients (accueil, section "Nos clients disent
   de belles choses") : même souci que la grille de services ci-dessus —
   page-accueil.css fige chaque avatar à sa largeur d'origine en pixels (45,
   45 ou 46px selon la photo), et un seul des trois a un border-radius rond
   (les deux autres n'en ont pas, invisible seulement parce que leur image
   est déjà une photo pré-découpée en cercle). Uniformisé ici une bonne fois. */
.uagb-block-46356dd9 .wp-block-uagb-image__figure img {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	object-fit: cover;
}

/* Grille de services : réserve toujours la hauteur de 2 lignes pour le titre, que celui-ci
   tienne sur 1 ou 2 lignes, pour que la description commence toujours à la même hauteur. */
.uagb-block-ed2c2e06 .uagb-ifb-title {
	min-height: 2.6em;
}

/* Chaque carte de service a une taille fixe, indépendante des autres : elle ne s'étire plus
   pour s'adapter à sa voisine. Si une description est plus longue que l'espace prévu, elle
   est coupée proprement (… ) au lieu d'agrandir toute la ligne. */
.uagb-block-ed2c2e06>.uagb-container-inner-blocks-wrap>.wp-block-uagb-container {
	height: 500px;
	overflow: hidden;
}

.uagb-block-ed2c2e06 .uagb-ifb-desc {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Honeypot anti-spam : champ piège invisible pour un visiteur, mais souvent rempli par les robots */
.srfm-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Per-block inline layout rule WordPress printed directly in the page (core "layout" block support) */
.wp-container-core-columns-is-layout-28f84493 {
	flex-wrap: nowrap;
}

/* Originally WordPress' inline #uagb-style-conditional-extension */
@media (min-width: 1025px) {

	body .uag-hide-desktop.uagb-google-map__wrap,
	body .uag-hide-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {

	body .uag-hide-tab.uagb-google-map__wrap,
	body .uag-hide-tab {
		display: none !important;
	}
}

@media (max-width: 767px) {

	body .uag-hide-mob.uagb-google-map__wrap,
	body .uag-hide-mob {
		display: none !important;
	}
}

/* Ancienne règle : masquait le tiroir via une classe "ast-mobile-popup-active"
   que le vrai script Astra (theme-interactions.js) ne pose jamais — il
   ajoute/retire "active"/"show" directement sur #ast-mobile-popup, jamais sur
   le wrapper ni sur le body. Résultat : le tiroir restait caché en
   permanence, quel que soit l'état réel du menu. Plus besoin de masquer le
   wrapper séparément : #ast-mobile-popup gère déjà sa propre visibilité
   (visibility: hidden tant qu'il n'a pas la classe "active"/"show", voir
   plus haut dans ce fichier). */

/*
 * Hero banner for nos-produits.php.
 * The original WordPress page never had a designed title banner (it fell
 * back to the generic Astra .entry-header), unlike every other page which
 * uses a full-width background-image container with a centered white
 * heading. Rebuilt here using the exact same formula (overlay color/opacity,
 * padding) found in the other pages' per-page CSS, for visual consistency.
 */
/* ===== Bandeau "hero" (photo de fond + titre) =====
 * Commun à toutes les pages qui en ont un (nos-produits.php, projects.php).
 * Un seul endroit pour le padding/l'overlay/le style du titre : chaque page
 * ne fournit que son titre et sa photo de fond, via page_hero() (voir
 * page-hero.php, inclus par header.php).
 */
.page-hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-top: 180px;
	padding-bottom: 150px;
	padding-left: 32px;
	padding-right: 32px;
	background-size: cover;
	background-repeat: no-repeat;
}

.page-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #171717;
	opacity: 0.65;
}

.page-hero-inner {
	position: relative;
	max-width: min(100%, 1200px);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.page-hero-title {
	text-align: center;
	color: #ffffff;
	margin: 0;
}

.page-hero+.entry-content {
	margin-top: 40px;
}

/* Simple form field spacing fallback in case a SureForms stylesheet fails to load */
.srfm-form-container form.srfm-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.srfm-form-container form.srfm-form .srfm-block-single,
.srfm-form-container form.srfm-form .srfm-block-width-100,
.srfm-form-container form.srfm-form .srfm-submit-container {
	width: 100%;
}

/* Toast de confirmation/erreur après soumission d'un formulaire (home/contact/services) */
@keyframes srfm-toast-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes srfm-toast-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(16px);
	}
}

@keyframes srfm-toast-progress {
	from {
		width: 100%;
	}

	to {
		width: 0%;
	}
}

.srfm-toast {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: min(90vw, 420px);
	padding: 14px 40px 14px 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
	font-size: 0.92rem;
	line-height: 1.5;
	overflow: hidden;
	animation: srfm-toast-in 0.25s ease-out;
}

.srfm-toast.srfm-toast-out {
	animation: srfm-toast-out 0.2s ease-in forwards;
}

.srfm-toast-success {
	color: #0f5132;
	background-color: #d1e7dd;
	border-color: #a3cfbb;
}

.srfm-toast-error {
	color: #842029;
	background-color: #f8d7da;
	border-color: #f1aeb5;
}

.srfm-toast-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

.srfm-toast-icon svg {
	width: 20px;
	height: 20px;
}

.srfm-toast-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.srfm-toast-title {
	font-size: 0.95rem;
	font-weight: 700;
}

.srfm-toast-text {
	font-size: 0.86rem;
	opacity: 0.9;
}

.srfm-toast-close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: 0.5;
	padding: 2px 6px;
}

.srfm-toast-close:hover {
	opacity: 0.85;
}

.srfm-toast-track {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: rgba(0, 0, 0, 0.08);
}

.srfm-toast-progress {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: currentColor;
	opacity: 0.5;
	animation: srfm-toast-progress 5s linear forwards;
}

@media (max-width: 600px) {
	.srfm-toast {
		right: 12px;
		bottom: 12px;
		left: 12px;
		width: auto;
		padding: 12px 34px 12px 14px;
		font-size: 0.86rem;
	}
}

/* Témoignages clients (accueil) : désormais gérés depuis le backoffice
   (nombre illimité), 3 visibles à la fois comme à l'origine mais avec
   rotation automatique dès qu'il y en a plus de 3. Le style de carte (fond,
   ombre, padding) reprend celui que WordPress générait pour les 3
   témoignages d'origine (voir .uagb-block-1331aef3 dans page-accueil.css),
   repris ici en version générique puisque chaque nouveau témoignage n'a
   plus d'identifiant de bloc WordPress propre. */
.sudm-temoignages-carousel {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: min(100%, 1200px);
	margin: 0 auto;
	row-gap: 20px;
	column-gap: 20px;
}
.sudm-temoignage-slide {
	display: none;
	flex: 1 1 320px;
	max-width: 33%;
	height: 390px;
	box-shadow: 0px 0px 45px 0px rgba(230, 230, 230, 0.5);
	padding: 30px;
	background-color: var(--ast-global-color-5, #fff);
	flex-direction: column;
	align-items: center;
	text-align: center;
	row-gap: 20px;
	overflow: hidden;
	animation: sudm-temoignage-fade 0.5s ease;
}
.sudm-temoignage-slide.is-active {
	display: flex;
}
/* Photo de profil toujours centrée en haut de la carte, quelle que soit sa
   présence (vraie photo ou rond avec initiale). */
.sudm-temoignage-slide .wp-block-uagb-image__figure {
	display: flex;
	justify-content: center;
	width: 100%;
}
/* Étoiles à gauche, date à droite, sur une même ligne pleine largeur —
   contrairement au reste de la carte (centré), cette ligne-là ne l'est pas. */
.sudm-temoignage-note-date {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
/* Témoignage trop long : coupé proprement au lieu d'étirer sa carte plus
   haut que ses deux voisines affichées à côté (voir hauteur fixe ci-dessus).
   Le lien "Lire la suite" (affiché par le JS uniquement si le texte est
   réellement coupé) permet de le déplier en entier au clic — la carte
   grandit alors ponctuellement, sans affecter ses voisines. */
.sudm-temoignage-texte {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sudm-temoignage-date {
	color: var(--rp-grey, #6b7280);
	font-size: 0.8rem;
	margin: 0;
}
.sudm-temoignage-texte.is-deplie {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}
.sudm-temoignage-slide:has(.sudm-temoignage-texte.is-deplie) {
	height: auto;
}
.sudm-temoignage-lire-plus {
	display: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none;
	border: none;
	border-radius: 0;
	padding: 0;
	margin-top: 4px;
	color: var(--rp-accent, #197789);
	font-weight: 600;
	font-size: inherit;
	line-height: inherit;
	cursor: pointer;
	text-decoration: underline;
}
.sudm-temoignage-lire-plus:hover,
.sudm-temoignage-lire-plus:focus,
.sudm-temoignage-lire-plus:active {
	background: none !important;
	background-color: transparent !important;
	color: var(--rp-ink, #09444f);
}
.sudm-temoignage-lire-plus.is-visible {
	display: inline-block;
}
@keyframes sudm-temoignage-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.sudm-temoignage-avatar-vide {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--rp-ink, #09444f);
	color: #fff;
	font-weight: 600;
}
.sudm-temoignage-slide .uag-star {
	color: var(--rp-gold, #e8ad35);
}
@media (max-width: 768px) {
	.sudm-temoignage-slide {
		max-width: 100%;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sudm-temoignage-slide {
		animation: none;
	}
}