/* ==========================================================================
   Alpibat-Services — compléments au theme.json
   Tout ce qui est couleur/typo/espacement de base est dans theme.json.
   Ici : composants (en-tête, étiquettes, cartes, chiffres, clients…).
   ========================================================================== */

:root {
	--alp-rouge-clair: #FF4D5E; /* rouge lisible sur fond sombre */
	--alp-header-h: 92px;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(h1, h2, h3, h4)[id], .alp-ancre { scroll-margin-top: calc(var(--alp-header-h) + 1rem); }
:focus-visible { outline: 2px solid var(--wp--preset--color--rouge); outline-offset: 3px; }
img { height: auto; }

/* --- Rythme vertical des sections ------------------------------------- */
/* Pas d'espace entre en-tête, contenu et pied de page (WordPress en ajoute un par défaut) */
.wp-site-blocks > * { margin-block-start: 0; }
.alp-main { padding-top: 0; padding-bottom: 0; }
.alp-main > .wp-block-post-content > * { margin-block-start: 0; }
.alp-band { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.alp-band--intro { padding-bottom: var(--wp--preset--spacing--40); }
.alp-band--suite { padding-top: 0; }
.alp-bordure { border-top: 1px solid var(--wp--preset--color--ligne); }

/* --- Étiquettes, chapô, lieu ------------------------------------------ */
.alp-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--etiquette);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rouge-fonce);
	margin-bottom: .6rem;
}
.alp-label a { color: inherit; text-decoration: none; }
/* Le chapô occupe toute la largeur de la colonne, comme le titre (choix validé le 22/09). */
.alp-chapo { font-size: var(--wp--preset--font-size--chapo); color: var(--wp--preset--color--encre-douce); line-height: 1.5; }
.alp-lieu {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--encre-douce);
	margin-top: .25rem;
}
.alp-lieu:empty { display: none; }
.alp-lieu::before { content: "↳ "; color: var(--wp--preset--color--rouge); }

/* Contextes sombres : couvertures et bandeaux « nuit » */
.has-nuit-background-color, .wp-block-cover { color: var(--wp--preset--color--surface); }
.has-nuit-background-color :where(h1, h2, h3, h4),
.wp-block-cover :where(h1, h2, h3, h4) { color: var(--wp--preset--color--blanc); }
.has-nuit-background-color .alp-label,
.wp-block-cover .alp-label { color: var(--alp-rouge-clair); }
.has-nuit-background-color .alp-chapo,
.wp-block-cover .alp-chapo { color: rgba(236, 238, 235, .85); }
.has-nuit-background-color a:where(:not(.wp-element-button)) { color: inherit; }

/* Mot mis en valeur dans un titre (surlignage « texte en couleur » de l'éditeur) */
:where(h1, h2) mark { background: none; }

/* --- En-tête -------------------------------------------------------------- */
/* L'en-tête reste visible au défilement. WordPress l'enveloppe dans un conteneur
 * de sa taille exacte : c'est ce conteneur qui doit être « collant », pas l'en-tête. */
.wp-site-blocks > :has(> .alp-header) { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > :has(> .alp-header) { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > :has(> .alp-header) { top: 0; } }
/* Le flou est porté par un calque (::before) et non par l'en-tête lui-même :
 * un backdrop-filter sur l'en-tête y enfermerait le menu mobile plein écran (position: fixed). */
.alp-header { position: relative; z-index: 0; background: transparent; border-bottom: 1px solid var(--wp--preset--color--ligne); }
.alp-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: rgba(230, 231, 228, .92);
	-webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.alp-header__inner { min-height: var(--alp-header-h); gap: 1.5rem; }
.alp-header__actions { gap: 1.75rem; }
.alp-logo img { width: auto; max-height: 74px; }
.alp-nav {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--etiquette);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.alp-nav a { text-decoration: none; }
.alp-nav .wp-block-navigation-item__content:hover,
.alp-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--rouge-fonce); }
.alp-nav .wp-block-navigation__container { gap: 1.6rem; }
.alp-header__tel .wp-block-button__link { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; white-space: nowrap; }
.alp-header__tel .wp-block-button__link::before {
	content: ""; flex: none; width: 15px; height: 15px; background: currentColor;
	-webkit-mask: var(--alp-icone-tel) center / contain no-repeat; mask: var(--alp-icone-tel) center / contain no-repeat;
}
/* Zone cliquable sur toute la hauteur de l'en-tête, pas seulement sur le texte */
.alp-nav .wp-block-navigation-item__content { white-space: nowrap; padding-block: 1.4rem; }
@media (max-width: 1100px) { .alp-nav .wp-block-navigation__container { gap: 1rem; } }
/* Écrans intermédiaires (tablettes) : menu resserré pour tenir sur une ligne */
@media (min-width: 600px) and (max-width: 960px) {
	.alp-nav { font-size: .66rem; letter-spacing: .06em; }
	.alp-nav .wp-block-navigation__container { gap: .75rem; }
	.alp-header__actions { gap: .9rem; }
	.alp-header__tel .wp-block-button__link { padding: .6rem .7rem; letter-spacing: .06em; font-size: .66rem; }
	.alp-logo img { max-height: 52px; }
}
@media (max-width: 600px) {
	:root { --alp-header-h: 64px; }
	.alp-logo img { max-height: 44px; }
	.alp-header__actions { gap: .9rem; }
	.alp-header__tel .wp-block-button__link { gap: .45rem; min-height: 44px; padding: 0 .8rem; font-size: .72rem; letter-spacing: .04em; }
}
/* Tablettes en portrait (600–781 px) : les 5 liens + le numéro ne laissent plus de place au logo,
   on garde donc le menu burger comme sur téléphone (WordPress l'arrête à 600 px par défaut) */
@media (min-width: 600px) and (max-width: 781px) {
	.alp-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.alp-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.alp-header__tel .wp-block-button__link { min-height: 44px; padding: 0 .9rem; font-size: .72rem; letter-spacing: .04em; }
	.alp-logo img { max-height: 56px; }
}
:root { --alp-icone-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
/* Menu mobile plein écran : fond sombre, grands liens séparés par des filets */
.alp-nav .wp-block-navigation__responsive-container.is-menu-open {
	/* !important : WordPress impose un fond blanc au menu ouvert avec une règle plus prioritaire */
	background-color: var(--wp--preset--color--nuit) !important; color: var(--wp--preset--color--surface) !important;
	padding: 1.25rem clamp(20px, 5vw, 64px) 2rem;
}
.alp-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4.5rem !important; align-items: stretch !important; }
.alp-nav .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; flex-direction: column; align-items: stretch !important; border-top: 1px solid rgba(255, 255, 255, .14); }
.alp-nav .is-menu-open .wp-block-navigation-item { width: 100%; align-items: stretch !important; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.alp-nav .is-menu-open .wp-block-navigation-item__content {
	display: flex !important; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 1.15rem 0 !important;
	font-family: var(--wp--preset--font-family--titre); font-size: 1.65rem; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase;
	color: var(--wp--preset--color--blanc) !important;
}
.alp-nav .is-menu-open .wp-block-navigation-item__content::after { content: "→"; font-family: var(--wp--preset--font-family--mono); font-size: 1rem; color: var(--alp-rouge-clair); }
.alp-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.alp-nav .is-menu-open .wp-block-navigation-item__content:hover { color: var(--alp-rouge-clair) !important; }
.alp-nav .is-menu-open .wp-block-navigation__responsive-container-close { top: 1.1rem; right: clamp(20px, 5vw, 64px); color: var(--wp--preset--color--blanc); }
.alp-nav .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }
.alp-nav .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }

/* --- En-tête photo (couverture) ----------------------------------------- */
.alp-hero { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.wp-block-cover.alignfull { padding-left: var(--wp--style--root--padding-left); padding-right: var(--wp--style--root--padding-right); }
body .alp-hero .wp-block-cover__inner-container > * { max-width: 900px; margin-left: 0 !important; }
.alp-hero h1 { margin: .4rem 0 1.4rem; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.alp-hero h1 mark { color: var(--alp-rouge-clair) !important; }
.alp-hero .alp-chapo { max-width: 52ch; }
.alp-hero--page { min-height: 52vh !important; }
/* En-têtes photo des pages : le texte s'aligne sur la colonne de 1200 px, comme le reste du contenu */
.alp-hero--page.wp-block-cover .wp-block-cover__inner-container { width: 100% !important; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; }
.alp-hero--page h1 { font-size: var(--wp--preset--font-size--titre-2); }

/* Accueil : texte à droite, dégradé qui laisse voir les cordistes à gauche */
.alp-hero--droite .wp-block-cover__inner-container { max-width: 570px; }
body .alp-hero--droite .wp-block-cover__inner-container > * { max-width: 570px; }
/* 4,05rem max : « DIAGNOSTIQUER, » est le mot le plus long et doit tenir dans la colonne de 570 px */
.alp-hero--droite h1 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); }
.alp-hero--droite .wp-block-cover__background {
	background: linear-gradient(90deg, rgba(16, 19, 21, .05) 0%, rgba(16, 19, 21, .30) 38%, rgba(16, 19, 21, .86) 72%) !important;
	opacity: 1 !important;
}
@media (max-width: 781px) {
	.alp-hero--droite .wp-block-cover__background { background: linear-gradient(180deg, rgba(16, 19, 21, .10) 0%, rgba(16, 19, 21, .88) 58%) !important; }
	.alp-hero--droite .wp-block-cover__inner-container { max-width: none; }
	/* Vidéo sur mobile : on laisse voir la scène (le haut), le texte se resserre en bas */
	.alp-hero--video { min-height: calc(100svh - var(--alp-header-h)) !important; }
	.alp-hero--video .wp-block-cover__background { background: linear-gradient(180deg, rgba(16, 19, 21, 0) 0%, rgba(16, 19, 21, 0) 38%, rgba(16, 19, 21, .88) 68%) !important; }
	.alp-hero--video .alp-label, .alp-hero--video .alp-chapo { display: none; }
	.alp-hero--video h1 { margin-bottom: 1.1rem; }
	.alp-hero--video .wp-block-buttons { flex-wrap: nowrap; gap: .6rem; }
	.alp-hero--video .wp-block-button .wp-block-button__link { padding: .85rem .8rem; letter-spacing: .06em; font-size: .7rem; white-space: nowrap; }
	.alp-hero--video .alp-hero__legende { margin-top: 1rem; }
}

/* Vidéo d'en-tête : légende de la scène */
.alp-hero__legende {
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--etiquette);
	letter-spacing: .1em; text-transform: uppercase; color: rgba(236, 238, 235, .75); margin-top: 1.4rem;
}
.alp-hero__legende::before { content: "▶ "; color: var(--alp-rouge-clair); }
.alp-hero--video .wp-block-cover__video-background { background: var(--wp--preset--color--nuit); }

/* Boutons pleins et « contour » : exactement la même hauteur.
 * WordPress impose au style contour sa propre marge intérieure (plus petite) :
 * on remet la même partout, et une bordure de 1 px (transparente sur les boutons pleins). */
.wp-block-button .wp-block-button__link { border: 1px solid transparent; }
.wp-block-button.is-style-outline > .wp-block-button__link { padding: .95rem 1.4rem; border: 1px solid currentColor; }

/* Boutons « contour » sur fond sombre */
.has-nuit-background-color .is-style-outline .wp-block-button__link,
.wp-block-cover .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--blanc); border-color: rgba(255, 255, 255, .55); }
.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--encre); color: var(--wp--preset--color--blanc); border-color: var(--wp--preset--color--encre); }
.has-nuit-background-color .is-style-outline .wp-block-button__link:hover,
.wp-block-cover .is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--blanc); color: var(--wp--preset--color--nuit); }

/* --- Listes : lignes séparées par un filet, trait rouge en repère (remplace les puces) --- */
.wp-block-post-content ul.wp-block-list:not(.alp-departements) {
	list-style: none; padding: 0; margin: 1.25rem 0 0; border-top: 1px solid var(--wp--preset--color--ligne);
}
.wp-block-post-content ul.wp-block-list:not(.alp-departements) > li {
	position: relative; margin: 0; padding: .8rem 0 .8rem 2rem; border-bottom: 1px solid var(--wp--preset--color--ligne);
	line-height: 1.45;
}
.wp-block-post-content ul.wp-block-list:not(.alp-departements) > li::before {
	content: ""; position: absolute; left: 0; top: calc(.8rem + .72em); width: 14px; height: 2px;
	background: var(--wp--preset--color--rouge); transition: width .25s ease;
}
.wp-block-post-content ul.wp-block-list:not(.alp-departements) > li:hover::before { width: 22px; }
/* Sur fond sombre */
.has-nuit-background-color ul.wp-block-list > li { border-color: rgba(255, 255, 255, .14); }

/* --- Cartes des familles de prestations ------------------------------- */
.alp-cartes { gap: 2px !important; background: var(--wp--preset--color--ligne); border: 1px solid var(--wp--preset--color--ligne); }
.alp-carte { background: var(--wp--preset--color--surface); padding: 0 0 1.5rem; margin: 0 !important; display: flex; flex-direction: column; }
.alp-carte .wp-block-image { margin: 0 0 1.25rem; overflow: hidden; }
.alp-carte .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.alp-carte:hover .wp-block-image img { transform: scale(1.04); }
.alp-carte > :not(.wp-block-image) { padding-left: 1.4rem; padding-right: 1.4rem; }
.alp-carte h3 { margin: 0 0 .5rem; }
.alp-carte p { margin: 0; color: var(--wp--preset--color--encre-douce); font-size: var(--wp--preset--font-size--petit); }
.alp-carte .alp-carte__lien { margin-top: auto; padding-top: 1rem; }
.alp-carte__lien a {
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--etiquette);
	letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--rouge-fonce);
}
.alp-carte__lien a::after { content: " →"; }

/* --- Prestations détaillées ---------------------------------------------- */
.alp-prestation { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); border-top: 1px solid var(--wp--preset--color--ligne); }
.alp-prestation .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.alp-num { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--rouge-fonce); font-size: var(--wp--preset--font-size--etiquette); letter-spacing: .14em; }

/* --- Chiffres clés -------------------------------------------------------- */
.alp-chiffre {
	font-family: var(--wp--preset--font-family--titre);
	font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em;
	color: var(--wp--preset--color--blanc); margin-bottom: .4rem;
}
.alp-chiffres .wp-block-column { border-left: 1px solid rgba(255, 255, 255, .15); padding-left: 1.5rem; }

/* --- Clients : bandeau qui défile ------------------------------------------ */
.alp-defilement {
	overflow: hidden; margin-top: 2rem; padding: .5rem 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.alp-defilement__piste { display: flex; width: max-content; animation: alp-defile 90s linear infinite; }
.alp-defilement:hover .alp-defilement__piste { animation-play-state: paused; }
.alp-defilement__lot { display: flex; align-items: center; gap: 3.5rem; padding-right: 3.5rem; flex: 0 0 auto; }
.alp-defilement .wp-block-image { margin: 0; flex: 0 0 auto; height: 64px; display: flex; align-items: center; }
.alp-defilement img {
	max-height: 50px; max-width: 150px; width: auto; height: auto; object-fit: contain;
	filter: grayscale(1) contrast(1.05); opacity: .72; transition: filter .3s, opacity .3s;
}
.alp-defilement img:hover { filter: none; opacity: 1; }
/* Logos carrés : toute la hauteur de la rangée, sinon ils font deux fois moins
   que les logos en longueur. La classe est posée par le thème, d'après la
   définition réelle du fichier (voir alpibat_marque_logos_carres). */
.alp-defilement img.alp-logo-haut { max-height: 64px; }
@keyframes alp-defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.alp-defilement { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.alp-defilement__piste { animation: none; }
	.alp-defilement__lot[aria-hidden] { display: none; }
}
/* Éditeur : une rangée simple, sans animation */
.editor-styles-wrapper .alp-defilement { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }

/* --- Fiches chantier ----------------------------------------------------- */
/* Colonne de lecture courte : au-delà de ~70 caractères par ligne, l'œil perd le fil
   et ne suit plus au-delà de 600 px vers la droite (F-pattern). Les photos, elles,
   gardent toute la largeur. */
/* Le conteneur fait 1200 px pour laisser respirer la galerie : on recale le texte à gauche,
   sinon WordPress le centre et il ne s'aligne plus avec le titre du chantier. */
/* Hiérarchie : le chapô fait 1,4 fois la taille du texte courant et il est plus contrasté,
   pas plus clair. Même largeur de colonne pour les deux, sinon le chapô revient à la ligne
   avant le reste et donne l'impression d'un bug. */
.alp-chantier-intro { gap: 4rem; margin-bottom: 0; }
.alp-chantier-intro .alp-chapo {
	margin: 0; font-size: clamp(1.25rem, 1rem + .8vw, 1.5rem); line-height: 1.35;
	color: var(--wp--preset--color--encre);
}
.alp-chantier-intro p:not(.alp-chapo) { font-size: 1.0625rem; line-height: 1.65; max-width: 40rem; }
.alp-chantier-intro p + p { margin-top: 1.35rem; }
/* Un filet rouge court sous le chapô, comme repère de lecture */
.alp-chantier-intro .wp-block-column:first-child .alp-chapo::after {
	content: ""; display: block; width: 48px; height: 3px; margin-top: 1.5rem;
	background: var(--wp--preset--color--rouge);
}
@media (max-width: 781px) {
	.alp-chantier-intro { gap: 1.75rem; }
}
.single-realisation .wp-block-post-content > p { max-width: 40rem; margin-left: 0 !important; font-size: 1.0625rem; }
.single-realisation .wp-block-post-content > * + * { margin-top: 1.35rem; }
.single-realisation .wp-block-post-content > .wp-block-gallery,
.single-realisation .wp-block-post-content > .wp-block-image { margin-top: 2.75rem; }

/* Galerie : photos recadrées au même format, quelle que soit leur orientation d'origine. */
.alp-galerie-chantier.wp-block-gallery { gap: 1rem; }
/* On neutralise le recadrage en flex du cœur de WordPress (qui laissait des photos à hauteur nulle)
   et on impose nous-mêmes un format 4/3 identique pour toutes. */
.wp-block-gallery.has-nested-images.alp-galerie-chantier figure.wp-block-image { display: block; }
.wp-block-gallery.has-nested-images.alp-galerie-chantier figure.wp-block-image img {
	display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; flex: none;
}
/* Légendes sous la photo et non en surimpression (la règle du cœur de WordPress est plus forte,
   d'où le sélecteur long). */
.wp-block-gallery.has-nested-images.alp-galerie-chantier figure.wp-block-image figcaption {
	position: static; background: none; max-width: none; margin: 0; color: var(--wp--preset--color--encre-douce);
	font-family: var(--wp--preset--font-family--texte); font-size: .8125rem; line-height: 1.45;
	text-align: left; padding: .6rem 0 0; overflow: visible; text-overflow: clip; white-space: normal;
}

/* Photo seule dans une fiche : on plafonne la hauteur des clichés verticaux du téléphone. */
/* WordPress met le <figure> d'une image en display:flex. L'image, devenue élément
   flex, est alors étirée sur toute la largeur du conteneur, et le plafond de hauteur
   ci-dessous la comprime : une photo verticale sortait en 760 × 560 au lieu de 420 × 560.
   align-self l'empêche de s'étirer. Invisible sur les photos horizontales (2 % d'écart),
   dévastateur sur les verticales (81 %). */
.single-realisation .wp-block-post-content > .wp-block-image img {
	max-height: 560px; width: auto; align-self: flex-start;
}
.single-realisation .wp-block-post-content > .wp-block-image figcaption {
	color: var(--wp--preset--color--encre-douce); font-size: .8125rem; padding-top: .6rem;
}

/* Navigation entre chantiers */
.alp-chantier-nav { padding-block: var(--wp--preset--spacing--40); }
.alp-chantier-nav__liens { gap: 1.5rem; width: 100%; }
.alp-chantier-nav a {
	font-family: var(--wp--preset--font-family--mono); font-size: .75rem; letter-spacing: .08em;
	text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--encre);
}
.alp-chantier-nav a:hover { color: var(--wp--preset--color--rouge-fonce); }
.alp-chantier-nav .post-navigation-link-previous a::before { content: ""; }
.alp-chantier-nav__tous { margin: 0; }
.alp-chantier-nav__tous a { color: var(--wp--preset--color--rouge-fonce); }
@media (max-width: 600px) {
	.alp-chantier-nav__liens { flex-direction: column; align-items: flex-start !important; gap: .75rem; }
	/* Sur téléphone, deux photos par ligne puis une seule orpheline : on empile. */
	.alp-galerie-chantier.wp-block-gallery .wp-block-image { width: 100% !important; }
}

/* Pagination de la liste des chantiers */
.alp-pagination { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--ligne); gap: 1rem; }
.alp-pagination a, .alp-pagination .page-numbers {
	font-family: var(--wp--preset--font-family--mono); font-size: .75rem; letter-spacing: .08em;
	text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--encre);
}
.alp-pagination a:hover { color: var(--wp--preset--color--rouge-fonce); }
.alp-pagination .current { color: var(--wp--preset--color--rouge); font-weight: 700; }
.alp-pagination .wp-block-query-pagination-numbers { display: flex; gap: .75rem; }

/* --- Réalisations (grille) ---------------------------------------------- */
.alp-realisations .wp-block-post-template { gap: 2rem 1.5rem; }
.alp-realisations .wp-block-post-featured-image { margin-bottom: 1rem; overflow: hidden; }
.alp-realisations .wp-block-post-featured-image img { transition: transform .6s ease; }
.alp-realisations li:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.alp-realisations .wp-block-post-terms { margin-bottom: .3rem; }
.alp-realisations .wp-block-post-title { font-size: var(--wp--preset--font-size--titre-3); margin: 0; }
.alp-realisations .wp-block-post-title a { text-decoration: none; }
.alp-realisations .wp-block-post-title a:hover { color: var(--wp--preset--color--rouge-fonce); }
.alp-titre-chantier { font-size: var(--wp--preset--font-size--titre-2) !important; }
.alp-chantier-photo img { width: 100%; }

/* --- Zone d'intervention (page Société) ---------------------------------- */
.alp-departements { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.alp-departements li {
	display: inline-flex; align-items: center; gap: .55rem; margin: 0; padding: .6rem .95rem;
	background: var(--wp--preset--color--blanc); border: 1px solid var(--wp--preset--color--ligne);
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--etiquette); letter-spacing: .08em; text-transform: uppercase;
}
.alp-departements li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--rouge); flex: none; }
.alp-departements li:last-child { background: transparent; border-style: dashed; color: var(--wp--preset--color--encre-douce); }
.alp-departements li:last-child::before { background: var(--wp--preset--color--encre-douce); }
.alp-carte-zone { margin: 0; }
.alp-carte-zone img { width: 100%; height: auto; display: block; }

/* --- Pour qui nous intervenons -------------------------------------------- */
.alp-cibles { gap: 2rem 1.5rem !important; margin-top: 2rem; }
.alp-cible { border-top: 2px solid var(--wp--preset--color--encre); padding-top: 1.1rem; transition: border-color .25s; }
.alp-cible:hover { border-top-color: var(--wp--preset--color--rouge); }
.alp-cible .alp-num { margin: 0 0 .9rem; }
.alp-cible h3 { font-size: 1.15rem; line-height: 1.2; margin: 0 0 .6rem; }
.alp-cible p:last-child { margin: 0; font-size: var(--wp--preset--font-size--petit); color: var(--wp--preset--color--encre-douce); }

/* --- Galerie ------------------------------------------------------------------ */
.alp-galerie.wp-block-gallery img { aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Contact ----------------------------------------------------------------- */
.alp-coord p { margin: 0 0 .25rem; }
/* Adhésion FFB (page Société) */
.alp-adherent { gap: 1.1rem; align-items: center !important; margin-top: 1.75rem !important; padding-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--ligne); }
.alp-adherent .wp-block-image { flex: none; margin: 0; }
.alp-adherent img { width: 84px; height: auto; }
.alp-adherent p { margin: 0; }
.alp-coord .alp-label:not(:first-child) { margin-top: 1.75rem !important; }
.alp-coord .alp-gros { font-family: var(--wp--preset--font-family--titre); font-size: var(--wp--preset--font-size--titre-3); font-weight: 700; }
.alp-coord .alp-gros a { text-decoration: none; }
.alp-adresse a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s; }
.alp-adresse a:hover { background-size: 100% 1px; }
.alp-lien-ext { margin-top: .5rem; }
.alp-lien-ext a {
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--etiquette);
	letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--rouge-fonce);
}
.alp-lien-ext a::after { content: " ↗"; }
.alp-lien-ext a:hover { text-decoration: underline; }
.alp-encadre { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--ligne); padding: 1.5rem 1.75rem; }

/* Colonne de droite de la page contact : une photo d'équipe et deux phrases de réassurance,
   plutôt qu'une liste d'étiquettes. */
.alp-coord .wp-block-image { margin: 0 0 2rem; }
.alp-coord .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.alp-coord p strong { color: var(--wp--preset--color--encre); }
.alp-coord .alp-gros { margin-bottom: 1.25rem !important; }
.alp-coord .alp-adresse { margin-top: 1.75rem !important; }

/* --- Reportages vidéo (chargement différé) ------------------------------- */
.alp-reportages { gap: 1.5rem; margin-top: 2rem; }
.alp-reportage { margin: 0; }
.alp-reportage__ouvrir {
	position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
	background: var(--wp--preset--color--nuit); border-radius: 4px; overflow: hidden; line-height: 0;
}
.alp-reportage__ouvrir img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity .25s, transform .4s; }
.alp-reportage__ouvrir:hover img { opacity: .85; transform: scale(1.03); }
.alp-reportage__play {
	position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%;
	background: var(--wp--preset--color--rouge); display: grid; place-items: center;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .35); transition: transform .25s;
}
.alp-reportage__play::before { content: ""; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.alp-reportage__ouvrir:hover .alp-reportage__play { transform: scale(1.08); }
.alp-reportage__duree {
	position: absolute; right: .6rem; bottom: .6rem; padding: .2rem .5rem; border-radius: 3px;
	background: rgba(0, 0, 0, .75); color: #fff; font-family: var(--wp--preset--font-family--mono); font-size: .7rem; line-height: 1.4;
}
.alp-reportage__ouvrir:focus-visible { outline: 3px solid var(--wp--preset--color--rouge); outline-offset: 3px; }
.alp-reportage figcaption { padding-top: .7rem; font-size: .95rem; line-height: 1.45; color: var(--wp--preset--color--encre); }
.alp-reportage iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 4px; display: block; }

/* Sections texte + photo : la photo remplit toute la hauteur de la colonne de texte,
   sinon elle flotte avec du vide au-dessus et en dessous dès que le texte s'allonge.
   Les pages Prestations gardent leur format 4/3 imposé, d'où le :not(). */
@media (min-width: 782px) {
	/* Les colonnes sont centrées verticalement par défaut : celle qui ne contient
	   qu'une photo doit au contraire s'étirer sur toute la hauteur. */
	.alp-band .wp-block-columns > .wp-block-column:has(> .wp-block-image:only-child:not(.alp-carte-zone)) { align-self: stretch; }
	.alp-band .wp-block-columns > .wp-block-column > .wp-block-image:only-child:not(.alp-carte-zone) { height: 100%; margin: 0; }
	.alp-band .wp-block-columns > .wp-block-column > .wp-block-image:only-child:not(.alp-carte-zone) img {
		height: 100%; width: 100%; object-fit: cover; border-radius: 4px;
	}
}

/* --- Avis Google --------------------------------------------------------- */
.alp-avis-grille { gap: 1.5rem; margin-top: 2rem; }
.alp-avis { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--ligne); border-radius: 4px; padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .75rem; }
.alp-avis__etoiles { margin: 0 !important; color: #E8A33D; font-size: 1.05rem; letter-spacing: .12em; }
.alp-avis__texte { margin: 0 !important; font-size: 1rem; line-height: 1.6; }
.alp-avis__auteur { margin: auto 0 0 !important; font-size: var(--wp--preset--font-size--petit); color: var(--wp--preset--color--encre-douce); }
.alp-avis__auteur strong { color: var(--wp--preset--color--encre); }

/* Chapô isolé sous un bandeau photo (page Prestations) */
.alp-band--chapo { padding-top: var(--wp--preset--spacing--40); padding-bottom: 0; }
.alp-band--chapo .alp-chapo { max-width: 68ch; }

/* --- Formulaire de devis ------------------------------------------------ */
/* Une seule colonne : l'œil descend sans se demander si le champ suivant est à droite
   ou en dessous, et le formulaire se remplit plus vite (études d'ergonomie de formulaires). */
.alp-form { max-width: 34rem; }
.alp-form__grille { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.alp-form__champ { margin: 0; display: flex; flex-direction: column; gap: .45rem; }
/* Libellés dans la police du texte, en écriture normale : les capitales monospace
   donnaient au formulaire un air de gabarit technique. */
.alp-form label {
	font-family: var(--wp--preset--font-family--texte); font-size: 1rem; font-weight: 500;
	letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--encre);
}
.alp-form__aide { text-transform: none; letter-spacing: 0; font-family: var(--wp--preset--font-family--texte); color: var(--wp--preset--color--encre-douce); }
.alp-form input:not([type=file]):not([type=checkbox]), .alp-form select, .alp-form textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 1.0625rem; color: var(--wp--preset--color--encre);
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--ligne); border-radius: 4px;
	padding: .85rem 1rem; min-height: 52px; transition: border-color .15s, background-color .15s;
}
.alp-form input:hover, .alp-form select:hover, .alp-form textarea:hover { border-color: var(--wp--preset--color--encre-douce); }
.alp-form textarea { min-height: 150px; resize: vertical; }
/* Liste déroulante : flèche dessinée, écartée du bord, texte aligné sur les autres champs */
.alp-form select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	padding-right: 2.75rem; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23171A19' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px;
}
.alp-form input:focus, .alp-form select:focus, .alp-form textarea:focus { outline: 2px solid var(--wp--preset--color--rouge); outline-offset: 1px; border-color: var(--wp--preset--color--rouge); background: var(--wp--preset--color--blanc); }
.alp-form__rgpd { font-size: var(--wp--preset--font-size--petit); color: var(--wp--preset--color--encre-douce); margin: 2rem 0 0 !important; padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--ligne); }
/* Le dépliant, dernier élément de la grille, a déjà un filet en bas : sans ça, deux
   traits se suivaient à 20 px d'écart. */
.alp-form__grille:has(.alp-form__plus) + .alp-form__rgpd { border-top: 0; padding-top: 0; margin-top: 1.25rem !important; }
.alp-form__envoi { margin: 1.5rem 0 0 !important; }
.alp-form__envoi .wp-element-button { border: 0; cursor: pointer; }
.alp-form__facultatif { text-transform: none; letter-spacing: 0; font-family: var(--wp--preset--font-family--texte); color: var(--wp--preset--color--encre-douce); font-size: .8rem; margin-left: .35rem; }
.alp-form__champ .alp-form__aide { display: block; margin: .15rem 0 0; font-size: .85rem; }
/* Champs facultatifs repliés : la page contact tenait sur deux écrans, elle tient
   maintenant sur un seul. Les études de formulaires recommandent justement de masquer
   le facultatif derrière un lien plutôt que de l'afficher d'emblée. */
.alp-form__paire { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 600px) { .alp-form__paire { grid-template-columns: 1fr; } }
/* Page contact : titre compact, pour que le formulaire tienne sur un écran */
.page-contact .alp-band--intro h1 { font-size: var(--wp--preset--font-size--titre-2); }
.page-contact .alp-band--intro { padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--30); }
.page-contact .alp-band--intro .alp-chapo { max-width: 62ch; margin-left: 0 !important; }
.page-contact .alp-form__grille { gap: 1.15rem; }
.page-contact .alp-form input:not([type=file]), .page-contact .alp-form select { min-height: 48px; }
.page-contact .alp-form textarea { min-height: 104px; }
.page-contact .alp-form__rgpd { margin-top: 1.25rem !important; padding-top: 1rem; }
.page-contact .alp-form__envoi { margin-top: 1.1rem !important; }

.alp-form__plus { border-top: 1px solid var(--wp--preset--color--ligne); border-bottom: 1px solid var(--wp--preset--color--ligne); padding: .25rem 0; }
.alp-form__plus > summary {
	cursor: pointer; list-style: none; padding: .75rem 0; font-size: 1rem; font-weight: 500;
	color: var(--wp--preset--color--rouge-fonce); display: flex; align-items: center; gap: .5rem;
}
.alp-form__plus > summary::-webkit-details-marker { display: none; }
.alp-form__plus > summary::before { content: "+"; font-family: var(--wp--preset--font-family--mono); font-size: 1.1rem; line-height: 1; }
.alp-form__plus[open] > summary::before { content: "–"; }
.alp-form__plus > summary:hover { color: var(--wp--preset--color--rouge); }
.alp-form__plus .alp-form__champ { margin-bottom: 1.25rem; }
.alp-form textarea { min-height: 120px; }

/* Zone de dépôt des photos (remplace le bouton natif du navigateur) */
.alp-fichiers { position: relative; }
.alp-fichiers input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.alp-fichiers__zone {
	display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 4px;
	background: var(--wp--preset--color--surface); border: 1px dashed var(--wp--preset--color--ligne);
	transition: border-color .2s, background-color .2s;
}
.alp-fichiers__icone { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--wp--preset--color--fond); color: var(--wp--preset--color--rouge-fonce); }
.alp-fichiers__textes { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.alp-fichiers__titre { font-family: var(--wp--preset--font-family--texte); font-size: 1rem; font-weight: 500; color: var(--wp--preset--color--encre); }
.alp-fichiers__sous { font-size: var(--wp--preset--font-size--petit); color: var(--wp--preset--color--encre-douce); }
.alp-fichiers:hover .alp-fichiers__zone, .alp-fichiers.is-survol .alp-fichiers__zone { border-color: var(--wp--preset--color--rouge); background: #FFF7F7; }
.alp-fichiers input:focus-visible + .alp-fichiers__zone { outline: 2px solid var(--wp--preset--color--rouge); outline-offset: 2px; }
.alp-fichiers.is-rempli .alp-fichiers__zone { border-style: solid; border-color: var(--wp--preset--color--encre); }
.alp-fichiers.is-rempli .alp-fichiers__icone { background: var(--wp--preset--color--rouge); color: var(--wp--preset--color--blanc); }
.alp-fichiers__liste { margin: .4rem 0 0; font-size: var(--wp--preset--font-size--petit); color: var(--wp--preset--color--encre); overflow-wrap: anywhere; }
.alp-fichiers__liste:empty { display: none; }
.alp-fichiers__liste.is-erreur { color: var(--wp--preset--color--rouge-fonce); }
.alp-form__piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alp-form__msg { padding: 1rem 1.25rem; margin-bottom: 1.25rem; border-left: 3px solid; }
.alp-form__msg--ok { background: #E7F2EA; border-color: #2E7D46; color: #173D23; }
.alp-form__msg--err { background: #FBE9EA; border-color: var(--wp--preset--color--rouge); color: #5E0A12; }
.alp-form-apercu { background: var(--wp--preset--color--surface); border: 1px dashed var(--wp--preset--color--encre-douce); padding: 1.25rem 1.5rem; }
@media (max-width: 600px) { .alp-form__grille { grid-template-columns: 1fr; } }

/* --- Pied de page ------------------------------------------------------------ */
.alp-footer { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--40); }
.alp-footer a { color: inherit; text-decoration: none; }
.alp-footer a:hover { color: var(--wp--preset--color--blanc); text-decoration: underline; }
.alp-wordmark { font-family: var(--wp--preset--font-family--titre); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; text-transform: uppercase; color: var(--wp--preset--color--blanc); margin-bottom: .2rem; }
.alp-footer__txt { color: rgba(236, 238, 235, .72); font-size: var(--wp--preset--font-size--petit); line-height: 1.8; }
/* Signature discrète, alignée à droite de la ligne légale */
.alp-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }
.alp-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(236, 238, 235, .3); }
.alp-credit a:hover { color: var(--wp--preset--color--blanc); border-bottom-color: var(--wp--preset--color--blanc); }
.alp-coeur { color: var(--alp-rouge-clair, #FF4757); font-size: 1.1em; line-height: 1; vertical-align: -.05em; }
.alp-footer__legal { margin-top: var(--wp--preset--spacing--50); padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .12); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--etiquette); letter-spacing: .08em; color: rgba(236, 238, 235, .55); }

/* --- Mobile ----------------------------------------------------------------- */
@media (max-width: 781px) {
	.alp-chiffres .wp-block-column { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 1rem; }
	.alp-hero { min-height: 72vh !important; }
}

/* --- Éditeur : garder la même lecture que sur le site ----------------------- */
.editor-styles-wrapper .alp-header { position: static; }