/*
Theme Name:   ZAA Block
Theme URI:    https://www.zaa.cc
Description:  Thème block autonome de ZAA.CC (design reproduit de l'ancien thème unicon). Balisage Schema.org (JSON-LD) sans plugin : Organization + LocalBusiness sur tout le site, et un champ JSON-LD personnalisé par contenu.
Author:       ZAA.CC
Author URI:   https://www.zaa.cc
Version:      1.5.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain:  zaa-block
*/
/* 
   VARIABLES
 */
:root {
	--zaa-header-h: 70px;
	--zaa-noir:#000000;
	--zaa-blanc:#ffffff;
	--zaa-rouge: #850100;
	--zaa-rougeclair: #ac0100;
  --zaa-bleu: #2b4451;
}

/* 
   GÉNÉRAL — règles globales et utilitaires
 */

/* Les ancres (#a-propos, #equipe) ne se cachent pas sous l'entête fixe. */
html {
	scroll-padding-top: var(--zaa-header-h);
}
main {
  margin-top: var(--zaa-header-h);
}
.invisible, .hidden {
  opacity: 0;
  line-height: 0;
  line-height: 0 !IMPORTANT;
  margin: 0 !important;
  padding: 0 !important;
}
h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height:1.3;
}

:root :where(.home .is-layout-constrained) > * {
    margin-block-start: 0;
}
.text-center { text-align: center !important; }
/* Texte caché visuellement, lisible par les lecteurs d'écran. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Titres de section (.page-title) --- */
.page-title {
  border: 2px solid var(--zaa-noir);
  display: inline-flex;
  margin-bottom: 3%;
  background: rgba(255, 255, 255, 0.6);
  align-items: center;
}
.page-title > h2, .page-title > h1 {
  margin: 0;
  text-transform: uppercase;
  font-size: var(--wp--preset--font-size--x-large);
}
.page-title h2, .page-title h1 {
  float: left;
  border-right: 2px solid #000;
  padding: 7px 22px 7px 22px;
}
.page-title > h2, .page-title > h1, .page-title > i {
  display: block;
}
.page-title > h2 a, .page-title > h1 a {
  color: var(--zaa-noir);
  text-decoration: none !important;
}

.page-title > h2 a:hover, .page-title > h1 a:hover {
  color: var(--zaa-rougeclair);
}
.page-title i {
  float: right;
  font-size: 2.0625rem;
  margin: auto 6px auto 9px;
}
.page-title.text-white h2 {
  border-right-color: #fff;
}
.page-title.text-white h2 a:hover {
  color: var(--zaa-blanc);
}
@media only screen and (max-width: 1199px) {
  .page-title {
    display: inline-flex;
    flex-basis: fit-content;
  }
  .page-title i {
    float: none;
    flex-basis: 35px;
    align-self: center;
  }
  .page-title h2, .page-title h1 { float: none; }
}
@media only screen and (max-width: 767px) {
  .page-title h2, .page-title h1 {
    font-size: var(--wp--preset--font-size--regular);
    text-wrap: nowrap;
  }

  .page-title i {
    margin: 0px 6px 0px 9px;
  }

}


.text-white { color: #fff; border-color: #fff !important; }
.text-white a, .page-title > h2.text-white a { color: #fff; }
.text-white a:hover, .page-title > h2.text-white a:hover { color: #000; }
.page-title.text-white { background:transparent; }

.typcn {
  line-height: 1;
  width: 1em;
  height: 1em;
}

/* Conteneur centré pour les titres de section */
.zaa-section-title { text-align: center; }
.zaa-section-title h1,
.zaa-section-title h2 {
  white-space: nowrap;
}
/* --- Bouton générique noir  hover blanc (.btn) --- */
.btn, a.btn {
  background-color: var(--zaa-noir);
  color: var(--zaa-blanc);
  padding: 18px 28px 18px 28px;
  display: inline-block;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 2px;
  cursor: pointer;
  border: 1px solid var(--zaa-noir);
  border-radius: 0;
  text-decoration: none !important;
}
.btn:hover, .btn:active, .btn:focus-visible,
a.btn:hover, a.btn:active, a.btn:focus-visible {
  background-color: var(--zaa-blanc);
  color: var(--zaa-noir);
  border: 1px solid var(--zaa-noir);
}

/* --- Bouton générique blanc hover noir (.btn) --- */
.wpcf7-form .wpcf7-submit, .zaa-btn a, a.wp-block-read-more {
  background-color: var(--zaa-blanc);
  color: var(--zaa-noir);
  padding: 18px 28px 18px 28px;
  display: inline-block;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 2px;
  cursor: pointer;
  border: 1px solid var(--zaa-noir);
  border-radius: 0;
  text-decoration: none !important;
}
.wpcf7-form .wpcf7-submit:hover, .zaa-btn a:hover, a.wp-block-read-more:hover {
  background-color: var(--zaa-noir);
  color: var(--zaa-blanc);
  border: 1px solid var(--zaa-noir);
}

/* =========================================================================
   LIENS — repos : soulignement fin 1px ; survol : la ligne se redessine
   de gauche à droite (animation). Navigation principale : sans soulignement.
   NOTE cascade : ce bloc doit rester AVANT les sections ENTÊTE et PIED DE
   PAGE — leurs exceptions (même spécificité) gagnent par ordre d'apparition.
   ========================================================================= */
a:not(.btn, .wp-block-button__link, .zaa-btn a, .sharebox a, .social-icons a, figure a, .project-btn-holder a) {
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	text-underline-offset: 6px;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .35s ease, color .2s ease;
}
a:not(.btn, .wp-block-button__link, .zaa-btn a, .sharebox a, .social-icons a, figure a, .project-btn-holder a) {
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	text-underline-offset: 6px;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
}
/* Pas de ligne animée ni de soulignement sur les liens-images, icônes
   et boutons. */
figure a,
.social-icons a,
.zaa-social a,
.zaa-clients-set a,
.portfolio-filters a,
.wp-block-post-featured-image a,
.project-btn-holder a,
.zaa-cta-buttons a,
.site-header .autres-langues a,
.sharebox a,
.wp-block-search a {
	background-image: none;
	text-decoration: none;
}

/* =========================================================================
   ENTÊTE (.site-header) — fixe, fond noir opaque, hauteur minimale
   ========================================================================= */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: var(--zaa-noir);
	min-height: var(--zaa-header-h);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.site-header > .wp-block-group {
	min-height: var(--zaa-header-h);
}
/* Connecté : la barre d'admin WordPress (fixe, 32px ; 46px sous 782px) recouvre
   l'entête fixe et rogne le logo. On décale l'entête d'autant pour retrouver
   l'affichage déconnecté (le reste du contenu est déjà décalé par le
   html{margin-top} ajouté par WordPress). */
.admin-bar .site-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* Logo, menu, icônes en blanc sur le fond foncé. */
.site-header,
.site-header a,
.site-header .wp-block-navigation,
.site-header .wp-block-navigation a {
	color: #fff;
}
.site-header a {
	text-decoration: none;
}
.site-header svg {
	fill: currentColor;
}

/* --- Logo (bloc Image généré par le pattern site-logo) --- */
header .site-logo {
  margin-top: 5px;
}
header svg.site-logo {
  fill:var(--zaa-blanc);
}
header a:hover svg.site-logo {
  fill:var(--zaa-rougeclair);
}
header figure.site-logo {
	margin: 10px 0;
}
.site-logo a,
.footer-logo a {
	display: inline-block;
	position: relative;
	background-image: none;
	text-decoration: none;
}
.zaa-inline-logo {
	line-height: 0;
}
.zaa-inline-logo--footer {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.zaa-inline-logo__link {
	color: var(--zaa-blanc);
}
.zaa-inline-logo__base,
.zaa-inline-logo__fill,
.zaa-inline-logo svg {
	display: block;
}
.zaa-inline-logo--header svg {
	width: 110px;
	height: auto;
}
.zaa-inline-logo--footer svg {
	width: 300px;
	max-width: 100%;
	height: auto;
}
.zaa-inline-logo__fill {
	position: absolute;
	inset: 0;
	color: var(--zaa-rougeclair);
	clip-path: inset(0 100% 0 0);
	pointer-events: none;
	transition: clip-path .35s ease;
}
.zaa-inline-logo__link:hover .zaa-inline-logo__fill,
.zaa-inline-logo__link:focus-visible .zaa-inline-logo__fill {
	clip-path: inset(0 0 0 0);
}

/* --- Navigation principale --- */
/* Survol : la couleur passe au rouge (la ligne animée vient du bloc LIENS). */
header nav ul li.wp-block-navigation-item a.wp-block-navigation-item__content:hover {
  color: var(--zaa-rougeclair);
}
/* Pas de soulignement au repos + un peu d'air sous les items. Items en
   majuscules (cohérent avec les titres). */
.site-header .wp-block-navigation a {
	text-decoration: none;
	padding-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
/* Menu mobile : WordPress ne bascule en hamburger que sous 600px (seuil du
   bloc Navigation, code en dur) -- trop bas pour nos 8 items + recherche.
   On etend la bascule jusqu'a 1023px. */
@media (min-width: 600px) and (max-width: 1023px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}
/* Bouton hamburger et panneau ouvert : blanc sur fond noir. */
.site-header .wp-block-navigation__responsive-container-open {
	color: #fff;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--zaa-noir);
}

/* --- Icône de fermeture de l'overlay : on masque le « X » SVG natif de
   WordPress et on affiche l'icône Typicons injectée (typcn-delete-outline). --- */
.site-header .wp-block-navigation__responsive-container-close svg {
	display: none;
}
.site-header .wp-block-navigation__responsive-container-close .typcn {
	font-size: 2.25rem;
	line-height: 1;
	color: var(--zaa-blanc);
}
.site-header .wp-block-navigation__responsive-container-close:hover .typcn {
	color: var(--zaa-rougeclair);
}

/* --- Logo dans le panneau du menu ouvert : au-dessus des coordonnées, centré
   (le panneau .zaa-menu-footer n'est lui-même visible que menu ouvert). --- */
.zaa-menu-footer .zaa-menu-logo {
	display: inline-block;
	margin: 0 0 1.25rem;
	line-height: 0;
}
.zaa-menu-footer .zaa-menu-logo img {
	max-width: 60%;
	height: auto;
}

/* --- Pied du menu mobile (« panneau complet ») : coordonnées + icônes
   sociales greffés en JS dans l'overlay. Masqué par défaut (donc invisible sur
   desktop où le menu est en ligne) ; affiché seulement quand l'overlay est
   ouvert. --- */
.zaa-menu-footer {
	display: none;
  
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .zaa-menu-footer {
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 3rem auto 0;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	text-align: center;
}
.zaa-menu-footer__contact {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.9;
	text-transform: none;
	letter-spacing: 0;
  font-family: var(--wp--preset--font-family--vollkorn);
  font-style: italic;
  font-weight: normal;
}
.zaa-menu-footer__intro {
	display: block;
	margin-bottom: 0.4rem;
}
.zaa-menu-footer__contact a {
	display: block;
	color: var(--zaa-blanc);
	text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-transform: none !important;

}
.zaa-menu-footer__contact a:hover {
	color: var(--zaa-rougeclair);
}
/* Icônes : fond transparent + glyphes blancs (comme au pied de page), sans le
   pavé blanc de la variante de base ni le trait décoratif. */
.zaa-menu-footer .social-icons {
	margin-top: 0;
}
.zaa-menu-footer .social-icons ul {
	background-color: transparent;
}
.zaa-menu-footer .social-icons a i,
.zaa-menu-footer .social-icons a .zaa-svg-icon {
	color: var(--zaa-blanc);
}
.zaa-menu-footer .social-icons a:hover i,
.zaa-menu-footer .social-icons a:hover .zaa-svg-icon {
	color: var(--zaa-rougeclair);
}
.zaa-menu-footer .social-icons .line {
	display: none;
}

/* Item ACTIF : soulignement rouge persistant (meme position que la ligne
   animee du survol). */
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation a[aria-current="page"] {
	background-image: linear-gradient(var(--zaa-rougeclair), var(--zaa-rougeclair));
	background-size: 100% 1px;
}

/* --- Lien « Autres langues » (sorti du bloc navigation : un shortcode dans
   wp:navigation est un enfant invalide pour l'éditeur) --- */
.site-header .autres-langues a {
	display: inline-flex;
	align-items: center;
	color: #fff;
	text-decoration: none;
}
.site-header .autres-langues svg {
	fill: currentColor;
	width: 16px;
	height: 16px;
}
.site-header .autres-langues a:hover {
	color: var(--zaa-rougeclair);
}
.site-header .autres-langues .translate-text {
	display: none;
}

/* --- Recherche de l'entête : loupe + overlay plein écran (style unicon) --- */
.zaa-search {
	display: inline-flex;
	align-items: center;
}
.zaa-search-toggle,
.zaa-search-close,
.zaa-search-submit {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: inherit;
	line-height: 1;
}
.zaa-search-toggle {
	font-size: var(--wp--preset--font-size--regular);
	color: #fff;
	transition: color .2s ease;
	display: inline-flex;
	/* Même compensation que les items du menu (padding-bas 6px). */
	padding-bottom: 6px;
}
.zaa-search-toggle:hover,
.zaa-search-toggle:focus-visible {
	color: var(--zaa-rougeclair);
}
.zaa-search .search-icon {
	display: block;
	width: 24px;
	height: 24px;
	fill: currentColor;
}
.zaa-search-submit .search-icon {
    height: 1.6em;
    width: 1.6em;
    padding-bottom: 0.2em;
}

/* L'overlay couvre tout l'écran, fond noir translucide, champ géant centré. */
.zaa-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8vw;
	background: rgba(0, 0, 0, 0.96);
	opacity: 0;
	transition: opacity .35s ease;
}
.zaa-search-overlay.is-open {
	opacity: 1;
}
.zaa-search-overlay[hidden] {
	display: none;
}
body.zaa-search-locked {
	overflow: hidden;
}
.zaa-search-close {
	position: absolute;
	top: 28px;
	right: 5vw;
	font-size: 2.5rem;
	color: #bbb;
	transition: color .2s ease, transform .2s ease;
}
.zaa-search-close:hover,
.zaa-search-close:focus-visible {
	color: #fff;
	transform: rotate(90deg);
}
.zaa-search-form {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 1140px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}
.zaa-search-input {
	flex: 1;
	background: transparent;
	border: 0;
	color: #fff;
	font-family: 'Vollkorn', Georgia, serif;
	font-size: clamp(1.75rem, 6vw, 3.25rem);
	font-weight: 300;
	padding: 0 0 14px;
	-webkit-font-smoothing: antialiased;
}
.zaa-search-input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
.zaa-search-input:focus {
	outline: none;
}
.zaa-search-submit {
	color: #fff;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	padding-bottom: 14px;
	transition: color .2s ease;
}
.zaa-search-submit:hover,
.zaa-search-submit:focus-visible {
	color: var(--zaa-rougeclair);
}

/* =========================================================================
   PIED DE PAGE & COPYRIGHT (.site-footer)
   ========================================================================= */
footer {
  margin-top:0;
}
   .site-footer {
	background-color: var(--zaa-noir);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.site-footer p {
	font-weight: 400;
}

/* Liens du pied : blancs, rouges au survol (le soulignement fin au repos
   vient du bloc LIENS). */
.site-footer a {
    color: var(--zaa-blanc);
}
.site-footer a:hover {
  color: var(--zaa-rougeclair);
}

/* --- Menu du pied (Vollkorn italique, séparateurs « / ») --- */
.site-footer nav, .site-footer nav ul, .site-footer nav ul li, .site-footer nav ul li a{
  font-family: 'Vollkorn', sans-serif;
  font-weight: 400;
  font-style: italic;
}
.site-footer nav ul li a.wp-block-navigation-item__content:hover {
    color: var(--zaa-rougeclair);
}
.site-footer nav ul li::after {
    content: " / ";
    color: var(--zaa-blanc);
    padding-left: 14px;
}
.site-footer nav ul li:last-of-type::after {
  content: none;
}

/* --- Icônes sociales : variante sur fond noir (la base, partagée avec
   À propos et Équipe, est dans la section ACCUEIL) --- */
  .site-footer .social-icons {
    margin-top:50px;
  }
.site-footer .social-icons a:hover,
.site-footer .social-icons a:focus {
	text-decoration: none;
}
.site-footer .social-icons ul {
  background-color: var(--zaa-noir);
}
.site-footer .social-icons a i {
  color: var(--zaa-blanc);
}
.site-footer .social-icons .line {
    height: 2px;
    z-index: 1;
    position: relative;
    bottom: 33px;
    margin: 0px auto;
    background-color: var(--zaa-blanc);
    margin-bottom: 41px;
    width: 41%;
}

/* --- Logo du pied (bloc Image généré par le pattern footer-logo) --- */
.site-footer figure.footer-logo {
	margin: 0 auto;
}

/* --- Anciennes icônes .zaa-social (utilitaire conservé) --- */
.zaa-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .35rem;
}
.zaa-social a {
	display: inline-flex;
	color: #fff;
	font-size: 2.5rem;
	line-height: 1;
	transition: opacity .2s ease, transform .2s ease;
}
.zaa-social a:hover,
.zaa-social a:focus {
	opacity: .7;
	transform: translateY(-2px);
}

/* --- Barre de copyright : pleine largeur --- */
.site-footer .wp-block-group:last-child {
  max-width: 100vw;
}

/* =========================================================================
   ACCUEIL — reproduction du design unicon en blocs
   ========================================================================= */

/***** STATS SECTION *****/
.stat-upper {
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  padding: 22px;
}
.stat-upper h1 {
  font-size: 5em;
}
/* <p class="stat-number"> stylé comme l'ancien <h1>
   (un seul vrai h1 par page = meilleure sémantique GEO) */
.stat-upper .stat-number {
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
  font-size: 5em;
  line-height: 1.2;
  margin: 0;
}
.stat-lower {
  background: url('img/box-top.png') no-repeat;
  background-size: contain;
  text-align: center;
}
.stat-lower i {
  position: relative;
  bottom: 20px;
  font-size: 3.5em;
}
.stat {
  text-align: center;
}
.stat span {
  font-size: 1.3em;
  font-style: italic;
}

/***** ABOUT SECTION *****/
.about-section { text-align: justify; }
.about-section p {
  font-size: 1em;
  line-height: 1.4;
  -webkit-columns: 2;
  -moz-column-count: 2;
  column-count: 2;
  text-align: justify;
  margin-bottom: 66px;
}
@media only screen and (max-width: 768px) {
  .about-section p {
    -webkit-columns: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}
.about-section p:first-letter {
  float: left;
  font-size: 4.6875rem;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

/***** TEAM SECTION *****/
#equipe .wp-block-columns {
  align-items: flex-start;
}
.team-member-holder {
  border: 1px solid #000;
  margin-bottom: 60px !important;
}
#equipe .team-member-holder {
  display: flex;
  flex-direction: column;
  min-height: 455px;
}
.team-member-holder h3 {
  margin-top: 11px;
  margin-bottom: 11px;
  padding-left: 11px;
  padding-right: 11px;
  font-size: var(--wp--preset--font-size--large);
}
.team-member-holder .hr {
  width: 20%;
  height: 2px;
  background-color: var(--zaa-rouge);
  margin: 0px auto 15px;
}
.team-member-holder span {
  font-style: italic;
}
.team-member-holder .social-icons {
  position: relative;
  top: 33px;
}
.team-member-holder .team-content {
  padding: 11px 11px 0px 11px;
}
#equipe .team-member-holder .team-content {
  /* bouton poussé en bas de la fiche ; les réseaux (juste après) suivent et
     restent collés sous le bouton → bouton + réseaux alignés en bas. */
  margin-top: auto;
}
.team-member-holder img {
  display: block;
  width: 100%;
  height: auto;
}
/* « En savoir plus » en <details> natif (sans jQuery) */
.team-details summary {
  list-style: none;
  cursor: pointer;
}
.team-details[open] summary {
  display: none;
}
.team-details summary::-webkit-details-marker { display: none; }
.team-details .team-bio {
  text-align: left;
  padding-top: 17px;
}
.team-close {
  display: block;
  width: 48px;
  height: 48px;
  margin: 22px auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--zaa-noir);
  cursor: pointer;
  line-height: 1;
  text-align: center;
}
.team-close i {
  display: block;
  font-size: 2.375rem;
  line-height: 48px;
}
.team-close:hover,
.team-close:focus-visible {
  color: var(--zaa-rouge);
}
@media only screen and (max-width: 781px) {
  #equipe .team-member-holder {
    min-height: 0;
  }

  #equipe .team-member-holder .team-content {
    margin-top: 0;
  }
}
summary.btn {
  text-transform: uppercase;
}
.close-project {
  text-align: center;
  font-size: 2.375rem;
  margin-top: 22px;
  cursor: pointer;
  margin-bottom: 22px;
}

/* --- Section Équipe dynamique (shortcode [zaa_equipe], CPT « equipe ») ---
   Grille PLEINE LARGEUR (déborde du conteneur contraint) qui s'adapte au nombre
   de membres. < 1024px : fiches empilées 100% + accordéon natif. ≥ 1024px :
   grille multi-colonnes et la bio s'ouvre dans un pop-up (team-modal.js). */
.zaa-equipe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  /* stretch = chaque fiche remplit la hauteur de sa rangée → fiches d'égale
     hauteur quand elles partagent une rangée (le flex-column interne + le
     margin-top:auto du bouton collent « Voir » en bas). */
  align-items: stretch;
}
.zaa-equipe-grid .team-member-holder { margin-bottom: 0 !important; }
.zaa-equipe-card .zaa-equipe-photo img { display: block; width: 100%; height: auto; }
/* Espacement resserré entre nom / trait / position / bouton (sinon « étiré »). */
#equipe .zaa-equipe-card h3 { margin: 10px 0 15px; }

#equipe .zaa-equipe-card .equipe-position { display: block; margin-bottom: 15px; }
#equipe .zaa-equipe-card .team-content { padding-top: 4px; }
@media (min-width: 1024px) {
  /* Desktop : grille multi-colonnes PLEINE LARGEUR (déborde du conteneur
     contraint). Le plein-écran est réservé au desktop — sur mobile/tablette la
     grille reste dans la largeur normale (sinon décalage horizontal). */
  .zaa-equipe-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    /* On suit la largeur du CONTENEUR (jamais 100vw, qui inclut la barre de
       défilement → débordement de ~39px). Même correctif que le carrousel
       clients. La section #equipe étant déjà pleine largeur (align:full), la
       grille reste large, sans déborder. */
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0 5vw;
    box-sizing: border-box;
  }
  /* Desktop : pas d'accordéon — le bouton ouvre le pop-up (la bio est masquée
     ici mais reste dans le DOM pour le GEO ; team-modal.js la clone). */
  .zaa-equipe-card .team-bio { display: none; }
}

/* --- Pop-up Équipe (≥ 1024px, monté par team-modal.js) --- */
.zaa-equipe-modal[hidden] { display: none; }
.zaa-equipe-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 20px;
}
.zaa-equipe-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.zaa-equipe-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--zaa-noir);
}
.zaa-equipe-modal__close {
  position: absolute;
  top: 0px;
  right: -11px;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--zaa-blanc);
  cursor: pointer;
  line-height: 1;
}
.zaa-equipe-modal__close i { font-size: 2rem; }
.zaa-equipe-modal__close:hover,
.zaa-equipe-modal__close:focus-visible { color: var(--zaa-rouge); }
.zaa-equipe-modal__tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--zaa-noir);
  padding-right: 52px; /* place pour le X */
  background-color:transparent;
}
.zaa-equipe-modal__tab {
  padding: 12px 18px;
  background-color:var(--zaa-blanc);
  border: 0;
  border-right: 1px solid #ddd;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--zaa-noir);
  cursor: pointer;
}
.zaa-equipe-modal__tab.is-active {
  background: var(--zaa-noir);
  color: var(--zaa-blanc);
}
.zaa-equipe-modal__panels { overflow-y: auto; background-color:var(--zaa-blanc); }
.zaa-equipe-modal__panel { display: none; }
.zaa-equipe-modal__panel.is-active {
  display: flex;
  gap: 30px;
  padding: 30px;
}
.zaa-equipe-modal__left {
  flex: 0 0 33%;
  text-align: center;
  border: 1px solid var(--zaa-noir);
}
.zaa-equipe-modal__left h3 {
  margin: 14px 0 6px;
  font-size: var(--wp--preset--font-size--large);
}
.zaa-equipe-modal__left .equipe-position { font-style: italic; }
.zaa-equipe-modal__left .social-icons { margin-top: 0; position: relative;
    bottom: -30px;}
.zaa-equipe-modal__photo img { display: block; width: 100%; height: auto; }
.zaa-equipe-modal__right { flex: 1; text-align: left; }
.zaa-equipe-modal__right p { margin: 0 0 1em; }
body.zaa-modal-open { overflow: hidden; }
@media (max-width: 1023px) {
  /* Sécurité : jamais de pop-up sous 1024px (l'accordéon prend le relais). */
  .zaa-equipe-modal { display: none !important; }
}
@media (max-width: 600px) {
  .zaa-equipe-modal__panel.is-active { flex-direction: column; }
  .zaa-equipe-modal__left { flex-basis: auto; }
}

/* =========================================================================
   TÉMOIGNAGES (page À propos) — diaporama d'extraits cliquables + pop-up du
   témoignage complet (flèches précédent/suivant). Réutilise .zaa-slider-arrow.
   ========================================================================= */
.zaa-testimonials {
  position: relative;
  max-width: 760px;
  margin: 30px auto 0;
  padding: 10px 64px; /* place pour les flèches */
  box-sizing: border-box;
}
.zaa-testimonials-slides {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Toutes les diapos empilées dans la même cellule de grille → la hauteur du
     diaporama = la diapo la plus haute, donc elle ne change jamais (pas de saut
     d'une citation à l'autre). */
  display: grid;
}
.zaa-testimonial-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .4s ease;
}
.zaa-testimonial-slide.is-active { visibility: visible; opacity: 1; }
.zaa-testimonial-open {
  display: block;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: center;
}
.zaa-testimonial-quote {
  display: block;
  margin-bottom: 16px;
  font-family: var(--wp--preset--font-family--vollkorn);
  font-size: var(--wp--preset--font-size--large);
  font-style: italic;
  line-height: 1.5;
}
.zaa-testimonial-quote::before { content: '\00AB\00A0'; }
.zaa-testimonial-quote::after  { content: '\00A0\00BB'; }
.zaa-testimonial-open:hover .zaa-testimonial-quote,
.zaa-testimonial-open:focus-visible .zaa-testimonial-quote { color: var(--zaa-rougeclair); }
.zaa-testimonial-author {
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: var(--wp--preset--font-size--x-small);
}
.zaa-testimonials-prev { left: 0; }
.zaa-testimonials-next { right: 0; }
/* Mobile : flèches collées aux bords de l'écran (marge négative = padding latéral
   global du conteneur), et moins de réserve latérale → plus de place au texte. */
@media (max-width: 781px) {
  .zaa-testimonials { padding-left: 44px; padding-right: 44px; }
  .zaa-testimonials-prev { left: calc(-1 * var(--wp--style--root--padding-left, clamp(30px, 5vw, 50px))); }
  .zaa-testimonials-next { right: calc(-1 * var(--wp--style--root--padding-right, clamp(30px, 5vw, 50px))); }
}

/* Variante fond sombre : [zaa_testimonials class="text-white"] → textes blancs
   et flèches inversées (bordure + chevron blancs ; au survol, fond blanc /
   chevron noir). N'affecte QUE le diaporama (le pop-up reste sur fond blanc). */
.zaa-testimonials.text-white .zaa-testimonial-quote,
.zaa-testimonials.text-white .zaa-testimonial-author { color: var(--zaa-blanc); }
.zaa-testimonials.text-white .zaa-slider-arrow {
  background: transparent;
  border-color: var(--zaa-blanc);
  color: var(--zaa-blanc);
}
.zaa-testimonials.text-white .zaa-slider-arrow:hover,
.zaa-testimonials.text-white .zaa-slider-arrow:focus-visible {
  background: var(--zaa-blanc);
  border-color: var(--zaa-blanc);
  color: var(--zaa-noir);
}

/* Pop-up du témoignage complet */
.zaa-testimonial-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px; /* espace flèches ↔ fiche (les flèches flanquent le dialogue) */
  padding: 5vh 20px;
}
.zaa-testimonial-modal[hidden] { display: none; }
.zaa-testimonial-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.zaa-testimonial-modal__dialog {
  position: relative;
  z-index: 1;
  /* flex-item : rétrécit pour laisser la place aux flèches qui le flanquent. */
  flex: 0 1 680px;
  min-width: 0;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--zaa-blanc);
  border: 1px solid var(--zaa-noir);
  padding: 48px 44px;
  text-align: center;
}
.zaa-testimonial-modal__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--zaa-noir);
  cursor: pointer;
  line-height: 1;
}
.zaa-testimonial-modal__close i { font-size: 2rem; }
.zaa-testimonial-modal__close:hover,
.zaa-testimonial-modal__close:focus-visible { color: var(--zaa-rouge); }
.zaa-testimonial-modal__content {
  text-align: left;
  font-family: var(--wp--preset--font-family--vollkorn);
  font-size: var(--wp--preset--font-size--regular);
  line-height: 1.6;
}
.zaa-testimonial-modal__content p { margin: 0 0 1em; }
.zaa-testimonial-modal__content p:last-child { margin-bottom: 0; }
.zaa-testimonial-modal__author {
  display: block;
  margin-top: 22px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight:500;
}
/* Flèches du pop-up : flex-items collés de part et d'autre de la fiche (et non
   aux bords de l'écran). On annule le position:absolute de .zaa-slider-arrow. */
.zaa-testimonial-modal .zaa-slider-arrow {
  position: static;
  transform: none;
  flex: 0 0 auto;
}
.zaa-testimonial-modal__prev { order: -1; }
.zaa-testimonial-modal__next { order: 1; }
@media (max-width: 600px) {
  .zaa-testimonials { padding-left: 44px; padding-right: 44px; }
  /* Pop-up plus serré sur mobile pour laisser de la place à la fiche. */
  .zaa-testimonial-modal { gap: 6px; padding-left: 6px; padding-right: 6px; }
  .zaa-testimonial-modal .zaa-slider-arrow { width: 44px; height: 44px; }
  .zaa-testimonial-modal__dialog { padding: 40px 18px; }
}

/***** SERVICES SECTION *****/
.services .service {
  margin-top: 30px;
  margin-bottom: 20px;
}
.services .page-title, .services .page-title h3 {
  border-color: #000;
}
.white.services .page-title, .white.services .page-title h3 {
  border-color: #fff;
}
.service {
  max-width: 90%;
  margin: 0px auto;
}
.service-title {
  width: 100%;
  padding: 0;
}
.service-title h3 {
  padding-left: 11px;
  padding-right: 11px;
  padding-bottom:11px;
  margin-bottom:0;
  font-size: var(--wp--preset--font-size--large);
}
.white .service-title h3 {
    color: var(--zaa-blanc);
}
.service-top {
  background: url('img/box-top-black.png') no-repeat;
  background-size: contain;
  text-align: center;
  margin-bottom: -24px;
}
.white .service-top {
  background: url('img/box-top.png') no-repeat;
  background-size: contain;
}
.service-top i {
  font-size: 4.125rem;
  color: var(--zaa-rouge);
  display: block;
  margin: 0px auto;
  position: relative;
  bottom: 31px;
}
.white .service-top i {
  color: var(--zaa-blanc);
}
.service-container {
  border-left: 2px solid var(--zaa-noir);
  border-right: 2px solid var(--zaa-noir);
  border-bottom: 2px solid var(--zaa-noir);
  position: relative;
  z-index: 1;
}
.white .service-container {
  border-left: 2px solid var(--zaa-blanc);
  border-right: 2px solid var(--zaa-blanc);
  border-bottom: 2px solid var(--zaa-blanc);
  position: relative;
  z-index: 1;
  color: var(--zaa-blanc);
}
.bottom-service {
  margin-top: 60px;
}
.bottom-service .service-container {
  border-bottom: none;
  border-top: 1px solid var(--zaa-noir);
  padding-bottom: 44px;
  padding-top: 34px;
  padding-left: 10px;
  padding-right: 10px;
}
.white.bottom-service .service-container {
  border-top: 2px solid var(--zaa-blanc);
}
/* Accueil : les boites de service d'une meme rangee prennent la meme hauteur
   sur desktop ; l'icone des bottom-service reste collee en bas. */
@media (min-width: 782px) {
  .zaa-bg-services .wp-block-column { display: flex; }
  .zaa-bg-services .service { flex: 1; display: flex; flex-direction: column; }
  .zaa-bg-services .service .service-container { flex: 1; }
}
.service-container p {
  padding: 0px 22px 22px 22px;
}
.bottom-service .service-container p {
  margin-bottom: 0px;
  padding-bottom: 0;
}
/* Page Services : l'alternance boîte/texte est parfaite sur desktop. Sur mobile,
   les colonnes s'empilent dans l'ordre du code — donc pour « Identité visuelle »
   et « Applications mobiles » (texte d'abord), la boîte-icône tombe en dessous.
   On force la colonne qui CONTIENT la boîte (.top-service) en premier, quel que
   soit son ordre dans le code. S'applique à toutes les sections, FR comme EN. */
@media (max-width: 781px) {
  .zaa-service-detail .wp-block-column:has(.top-service) {
    order: -1;
  }
}

/* --- Section promo (.divider-hero) --- */
.divider-hero {
  font-size: 2rem;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .divider-hero {
    font-size: var(--wp--preset--font-size--large);
    line-height: 1.25;
  }
}
/* Le H1 (bon pour le GEO) garde l'apparence du texte courant d'origine. */
.divider-hero h1 {
  font: inherit;
  color: inherit;
  margin: 0 0 1em;
}
.divider-hero p { margin: 0; }

/* Hero pleine largeur : l'image passe derrière l'entête fixe transparente. */
.zaa-hero img {
  display: block;
  width: 100%;
  height: auto;
}



/* --- Image promo (appareils) : centrée dans son conteneur --- */
.zaa-promo-img img {
  margin-inline: auto;
}

/* --- Sections à fond image (services = parallax, chiffres = statique) --- */
.zaa-bg-services {
  background-image: url('/wp-content/uploads/carre-rouge.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (hover: none) {
  /* background-attachment:fixed est bogué sur mobile */
  .zaa-bg-services { background-attachment: scroll; }
}
.zaa-bg-chiffres {
  background-image: url('/wp-content/uploads/2023/06/bois3-fonce.jpg');
  background-size: cover;
  background-position: center;
}

/* --- Intro projets --- */
.texte-intro {
  margin-bottom: 0px;
  font-size: var(--wp--preset--font-size--large);
  font-style: italic;
}

/* --- Filtres du portfolio --- */
.portfolio-filters ul {
  list-style: none;
  margin: 30px 0 40px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.portfolio-filters ul li {
  margin-right: 22px;
  margin-bottom: 10px;
}
.portfolio-filters ul li a {
  margin-right: 10px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 18px 28px 18px 28px;
  display: inline-block;
  font-family: var(--wp--preset--font-family--montserrat);
    font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 2px;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
}
@media only screen and (max-width: 768px) {
  .portfolio-filters ul li a { padding: 12px 22px 12px 22px; }
}
.portfolio-filters ul li a.active, .portfolio-filters ul li a:hover {
    background: var(--wp--preset--color--black);
    color: #fff !important;
    border: 1px solid #000;
    font-weight: 400;
}

/* --- Grille du portfolio (Query Loop) --- */
.zaa-portfolio .wp-block-post-template {
  gap: 2em;
}
/* Grilles de portfolio en pleine largeur (Projets + Projets similaires) :
   garder la gouttière latérale standard (40px), pas du bord à bord. */
.wp-block-query.alignfull.zaa-portfolio,
.zaa-related {
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .wp-block-query.alignfull.zaa-portfolio,
  .zaa-related { padding-left: 20px; padding-right: 20px; }
}
.zaa-portfolio .wp-block-post {
  margin-bottom: 50px;
}
/* Mobile : les projets s'empilent (le grid genere par WP est fige a 3 colonnes). */
@media (max-width: 781px) {
  .zaa-portfolio .wp-block-post-template {
    grid-template-columns: 1fr;
  }
}
.portfolio-item {
  border: 1px solid #000;
  text-align: center;
  background: #fff;
  /* Colonne flex : permet d'épingler le bouton au bas de la carte, même
     quand les titres ont des hauteurs différentes (cartes de hauteur égale
     dans la grille). */
  display: flex;
  flex-direction: column;
}
.portfolio-item h2 a, .portfolio-item h3 a {
  text-decoration: none !important;
}
/* Accueil & page Projets : la cellule de grille est le <li.wp-block-post> et
   .portfolio-item en est l'enfant — on l'étire à la hauteur de la cellule pour
   que toutes les cartes d'une même RANGÉE aient la même hauteur (la grille
   étire déjà chaque cellule à la plus haute de sa rangée). Le bouton « Voir »
   reste collé en bas grâce au flex column ci-dessus. Sur single-portfolio,
   .portfolio-item EST déjà la cellule de grille : rien à faire. */
.zaa-portfolio .wp-block-post-template > .wp-block-post {
  display: flex;
}
.zaa-portfolio .wp-block-post-template > .wp-block-post > .portfolio-item {
  flex: 1;
}
.portfolio-item a { text-decoration: none; }
.portfolio-item .wp-block-post-featured-image {
  margin: 0;
  position: relative;
  /* Cadre 16:9 fixe (1200×675). Toute image y entre ENTIÈRE (object-fit:contain
     ci-dessous) — jamais recadrée ; les images hors ratio sont centrées sur fond
     blanc. Masque aussi le débordement du zoom au survol. */
  aspect-ratio: 1200 / 675;
  background: var(--zaa-blanc, #fff);
  overflow: hidden;
}
/* Le <a> (isLink) remplit le cadre 16:9 et CENTRE l'image (flex). L'image garde
   sa taille naturelle : réduite si trop grande, JAMAIS agrandie — pas de flou
   sur les petites images SPIP basse résolution. */
.portfolio-item .wp-block-post-featured-image a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.portfolio-item .wp-block-post-featured-image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  transition: transform .4s ease;
}
/* Survol : l'image grossit à 120% (remplace l'ancien overlay rouge + « + »). */
.portfolio-item .wp-block-post-featured-image a:hover img,
.portfolio-item .wp-block-post-featured-image a:focus-visible img {
  transform: scale(1.2);
}

/* ----- Vidéo / balado (champ ACF video_url) -----
   Remplace l'image à la une dans les grilles/archives et devient la 1re diapo
   du diaporama single-portfolio. Lecteur responsive. */
.zaa-media { width: 100%; }
.zaa-media--video video,
.zaa-media--audio audio { display: block; width: 100%; }
.zaa-media--embed iframe,
.zaa-media--embed video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
/* Dans une grille : le média entre ENTIER dans le cadre 16:9 (contain). */
.portfolio-item .wp-block-post-featured-image .zaa-media,
.entry-image .zaa-media { height: 100%; }
.portfolio-item .wp-block-post-featured-image .zaa-media--video video,
.entry-image .zaa-media--video video { width: 100%; height: 100%; object-fit: contain; background: #000; aspect-ratio: auto; }
.portfolio-item .wp-block-post-featured-image .zaa-media--embed iframe,
.entry-image .zaa-media--embed iframe { width: 100%; height: 100%; aspect-ratio: auto; }
/* Diapo vidéo du diaporama single-portfolio. */
.zaa-slide--video { background: #000; display: flex; align-items: center; justify-content: center; }
.zaa-slide--video .zaa-media { width: 100%; }
.zaa-slide--video video { width: 100%; max-height: 70vh; object-fit: contain; background: #000; }
.portfolio-item .wp-block-post-title {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 10px 22px 0;
  margin: 0 0 22px;
}
.portfolio-item .wp-block-post-title a { color: #000; }
.portfolio-item .wp-block-post-title a:hover { color: var(--zaa-rougeclair); }
.portfolio-item hr.hr {
  height: 2px;
  background-color:var(--zaa-rouge);
  width: 40px;
  margin: 0 auto 22px;
  border: none;
}
.portfolio-item .portfolio-terms {
  font-style: italic;
  padding-left: 22px;
  padding-right: 22px;
}
.portfolio-item .portfolio-terms a { color: inherit; }
.portfolio-item .portfolio-terms a:hover { color: var(--zaa-rouge); }
.portfolio-item .project-btn-holder {
  padding: 2px 33px;
  background-color: #fff;
  position: relative;
  z-index: 2;
  top: 28px;
  display: block;
  width: fit-content;
  /* top auto = poussé en bas de la carte (flex) ; gauche/droite auto = centré. */
  margin: auto auto 0;
}
.portfolio-item .project-btn-holder a {
  color: #000;
  background: none;
  border: 1px solid #000;
  padding: 18px 28px;
  display: inline-block;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.portfolio-item .project-btn-holder a:hover {
  color: #fff;
  background: #000;
}
/* Item masqué par le filtre JS */
.zaa-portfolio .wp-block-post.zaa-filtered-out {
  display: none;
}
.single-portfolio h1.wp-block-post-title {
  text-align: center;
}
/* --- Icônes sociales (base partagée : À propos, Équipe ; la variante
   sur fond noir est dans la section PIED DE PAGE) --- */
.social-icons {
  text-align: center;
}
.social-icons ul {
  margin: 0px;
  list-style: none;
  overflow: hidden;
  display: inline-block;
  z-index: 2;
  position: relative;
  background-color: var(--zaa-blanc);
  padding: 0px 11px 0px 11px;
}
.social-icons ul li {
  float: left;
  margin-right: 0px;
}
.social-icons ul li:last-child {
  margin-right: 0px;
}
.social-icons ul li i {
  color: var(--zaa-noir);
  font-size: 2.25rem;
}
.social-icons a i:hover {
  color: var(--zaa-rougeclair);
}
/* Icône SVG (Messenger) traitée comme un glyphe typicon : même gabarit que les
   icônes (2.25rem), couleur héritée via currentColor, survol rouge. Le blanc
   du pied de page et le rouge au survol suivent les mêmes règles que les <i>. */
.social-icons ul li .zaa-svg-icon {
  /* Même boîte que les glyphes <i> (2.25rem) ; la taille VISUELLE de l'artwork
     se règle via le padding du viewBox du SVG (viewBox="-7 -7 64 64"). inline-block
     + vertical-align:middle → se centre comme un glyphe inline. */
  display: inline-block;
  vertical-align: middle;
  width: 2.25rem;
  height: 2.25rem;
  fill: currentColor;
  color: var(--zaa-noir);
}
.site-footer .social-icons a .zaa-svg-icon {
  color: var(--zaa-blanc);
}
.social-icons a:hover .zaa-svg-icon,
.social-icons a:focus .zaa-svg-icon {
  color: var(--zaa-rougeclair);
}

/* ----- Icône Messenger ajoutée à Typicons (hors police) -----
   Typicons est une police d'icônes : on ne peut pas y ajouter un glyphe sans
   logiciel de fonte + régénération du .woff/.ttf. On crée donc la classe
   « typcn-messenger » via un MASQUE SVG : elle se comporte comme n'importe quel
   Typicon (taille en em, couleur héritée via currentColor) et fonctionne partout
   où l'on écrit <i class="typcn typcn-messenger">, y compris le select ACF. */
.typcn-messenger:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-7%20-7%2064%2064'%3E%3Cpath%20d='M25,5.3333c11.2118,0,19.6667,8.1324,19.6667,18.9167s-8.4548,18.9167-19.6667,18.9167c-2.0063,0-3.9655-.259-5.8159-.7677-.6357-.1757-1.2924-.2649-1.9515-.2649-1.0227,0-2.0163.2089-2.9585.6236l-.4524.1997c-.1806-1.8157-1.0464-3.5252-2.4154-4.746-3.9162-3.5023-6.0729-8.4606-6.0729-13.9614C5.3333,13.4657,13.7882,5.3333,25,5.3333M25,0C10.9168,0,0,10.3164,0,24.25c0,7.2889,2.9864,13.5863,7.8509,17.9368.4086.3643.6549.8771.6719,1.4247l.1364,4.4477c.0346,1.1266.9659,1.9408,1.998,1.9408.2673,0,.5414-.0546.8083-.1726l4.9624-2.1906c.2553-.1124.5292-.1693.8043-.1693.178,0,.3565.0239.5307.072,2.281.6271,4.7079.9605,7.237.9605,14.0832,0,25-10.3157,25-24.25S39.0832,0,25,0h0Z'/%3E%3Cpath%20d='M31.788,31.2307l8.704-13.4518c.8753-1.3521-.7458-2.9258-2.0714-2.0114l-9.0861,6.2671c-.3063.2116-.7098.2173-1.0218.0152l-8.0643-5.2175c-.6826-.4414-1.5939-.2463-2.0353.4363l-8.7047,13.4524c-.8753,1.3521.7458,2.9258,2.0713,2.0113l9.088-6.2677c.3063-.2116.7098-.2173,1.0224-.0152l8.063,5.2175c.6827.4414,1.5939.2463,2.0354-.4363h-.0006Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-7%20-7%2064%2064'%3E%3Cpath%20d='M25,5.3333c11.2118,0,19.6667,8.1324,19.6667,18.9167s-8.4548,18.9167-19.6667,18.9167c-2.0063,0-3.9655-.259-5.8159-.7677-.6357-.1757-1.2924-.2649-1.9515-.2649-1.0227,0-2.0163.2089-2.9585.6236l-.4524.1997c-.1806-1.8157-1.0464-3.5252-2.4154-4.746-3.9162-3.5023-6.0729-8.4606-6.0729-13.9614C5.3333,13.4657,13.7882,5.3333,25,5.3333M25,0C10.9168,0,0,10.3164,0,24.25c0,7.2889,2.9864,13.5863,7.8509,17.9368.4086.3643.6549.8771.6719,1.4247l.1364,4.4477c.0346,1.1266.9659,1.9408,1.998,1.9408.2673,0,.5414-.0546.8083-.1726l4.9624-2.1906c.2553-.1124.5292-.1693.8043-.1693.178,0,.3565.0239.5307.072,2.281.6271,4.7079.9605,7.237.9605,14.0832,0,25-10.3157,25-24.25S39.0832,0,25,0h0Z'/%3E%3Cpath%20d='M31.788,31.2307l8.704-13.4518c.8753-1.3521-.7458-2.9258-2.0714-2.0114l-9.0861,6.2671c-.3063.2116-.7098.2173-1.0218.0152l-8.0643-5.2175c-.6826-.4414-1.5939-.2463-2.0353.4363l-8.7047,13.4524c-.8753,1.3521.7458,2.9258,2.0713,2.0113l9.088-6.2677c.3063-.2116.7098-.2173,1.0224-.0152l8.063,5.2175c.6827.4414,1.5939.2463,2.0354-.4363h-.0006Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.social-icons .line {
  height: 2px;
  background-color: var(--zaa-noir);
  width: 40%;
  z-index: 1;
  position: relative;
  bottom: 29px;
  margin: 0px auto;
}
.social-icons a[href*="twitter"] .typcn:before {
  content: '\e0f8';
}
.social-icons a[href*="linkedin"] .typcn::before {
  content: '\e0f0'; /* '' */
}
.social-icons a[href*="facebook"] .typcn:before {
  content: '\e0e4';
}
.social-icons a[href*="youtube"] .typcn:before {
  content: '\e0fc'; /* '' */
}
.social-icons a[href*="feed"] .typcn:before, .social-icons a[href*="rss"] .typcn:before {
  content: '\e0dc';
}
.social-icons a[href*="behance"] .typcn:before {
  content: '\e09c'; /* '' */
}
.social-icons a[href*="instagram"] .typcn:before {
  content: '\e0ec'; /* '' */
}
.social-icons a[href*="m.me"] .typcn:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("css/zaa-messenger.svg") center / contain no-repeat;
  mask: url("css/zaa-messenger.svg") center / contain no-repeat;
}




/* --- Clients : défilement continu (remplace le carrousel owl) --- */
.zaa-clients-marquee {
  overflow: hidden;
  /* On suit la largeur du CONTENEUR (jamais 100vw) : le carrousel ne peut donc
     pas déborder de la page, quelle que soit la marge/padding de la section.
     overflow:hidden masque la piste qui défile. Pour un rendu pleine largeur,
     placer le shortcode dans une section align:full sans padding latéral. */
  width: 100%;
  max-width: 100%;
  margin: 26px 0 0;
}
.zaa-clients-track {
  display: flex;
  width: max-content;
  animation: zaa-marquee 180s linear infinite;
}
.zaa-clients-set {
  display: flex;
  align-items: center;
  gap: 66px;
  padding-right: 66px;
}
.zaa-clients-set img {
  height: 82px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
/* Liens cliquables alignés dans la piste. */
.zaa-clients-set a {
	display: inline-flex;
	align-items: center;
}
@keyframes zaa-marquee {
  to { transform: translateX(-50%); }
}
.zaa-clients-marquee:hover .zaa-clients-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .zaa-clients-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
  }
  .zaa-clients-set { flex-wrap: wrap; justify-content: center; }
}

/* =========================================================================
   PAGES INTERNES — titlebar, blog, portfolio détail, témoignages
   ========================================================================= */

/* --- Titlebar (#fulltitle de l'ancien thème) --- */


.zaa-titlebar {
  text-align: center;
  background: #fff;
  padding-top: 25px; /* d'abord en attribut de bloc : déplacé ici pour la validité de l'éditeur */
}
.zaa-titlebar p {
    margin: 0;
}
.zaa-titlebar .page-title h1,
.zaa-titlebar .page-title .title-h1 {
  font-size: var(--wp--preset--font-size--xx-large);
}
.zaa-section-title .page-title a {
  text-decoration: none;
}
/* Variante lien de section (singles) : .title-h1 stylé comme un h1 */
.page-title .title-h1 {
  float: left;
  border-right: 2px solid #000;
  padding: 7px 22px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 700;
}
.page-title .title-h1 a {
  color: var(--zaa-noir);
  text-decoration: none;
}
.page-title .title-h1 a:hover {
  color: var(--zaa-rougeclair);
}
/* Sans icône : pas de bordure orpheline */
.page-title h1:last-child,
.page-title h2:last-child {
  border-right: none;
}

/* --- Champ de recherche inline (archives + résultats) : champ bordé + bouton
   loupe noir, à la manière du widget de recherche de l'ancien thème. --- */
.zaa-search-field .wp-block-search__inside-wrapper {
  border: 2px solid var(--zaa-noir);
  border-radius: 0;
}
.zaa-search-field .wp-block-search__input {
  border: 0;
  border-radius: 0;
  background: #fff;
  padding: 12px 16px;
  font-family: 'Vollkorn', Georgia, serif;
  font-size: var(--wp--preset--font-size--regular);
  color: var(--zaa-noir);
}
.zaa-search-field .wp-block-search__input:focus {
  outline: none;
}
.zaa-search-field .wp-block-search__button {
  background: var(--zaa-noir);
  color: #fff;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
}
.zaa-search-field .wp-block-search__button:hover {
  background: var(--zaa-rougeclair);
}
.zaa-search-field .wp-block-search__button svg {
  fill: currentColor;
  width: 20px;
  height: 20px;
}

/* --- Liste d'articles (archives, recherche, blog) ---
   Comme le site d'origine : image pleine largeur au-dessus, texte dessous. */
.zaa-blog-list .zaa-entry {
  margin-bottom: 60px;
}
.zaa-entry .wp-block-post-featured-image {
  margin: 0 0 22px;
}
.zaa-entry .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
}
.zaa-entry .wp-block-post-title {
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 6px;
}
.zaa-entry .wp-block-post-title a {
  color: var(--zaa-rougeclair);
  text-decoration: none;
}
.zaa-entry .wp-block-post-title a:hover {
  color: var(--zaa-noir);
}
.zaa-entry .wp-block-post-excerpt__more-link {
  color: var(--zaa-rougeclair);
  /* Le cœur WP force display:inline-block ; la ligne animée (background calé
     au bas de la boîte) tombe alors 1-2px plus bas que le soulignement (calé
     sur la base du texte). On repasse en inline pour aligner les deux. */
  display: inline;
}

/* --- Métadonnées d'article (date / auteur / catégories) --- */
.entry-meta {
  font-weight: 400;
  font-size: var(--wp--preset--font-size--small);
  text-transform: none;
  color: var(--zaa-noir);
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.entry-meta > *:not(:last-child)::after {
  content: ' / ';
  color: var(--zaa-noir);
  padding-left: 6px;
}
.entry-meta a {
  color: var(--zaa-rougeclair);
  text-decoration: none;
}
.entry-meta a:hover {
  color: var(--zaa-noir);
}

/* --- Pagination (Query Loop) --- */
.zaa-blog-list .wp-block-query-pagination a {
  background: var(--zaa-blanc);
  border:1px solid var(--zaa-noir);
  color: var(--zaa-noir);
  font-weight: 400;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: var(--wp--preset--font-size--small);
  padding: 10px 16px;
  text-decoration: none;
  text-transform: uppercase;
}
.zaa-blog-list .wp-block-query-pagination a:hover {
  background: var(--zaa-noir);
  color: var(--zaa-blanc);
}
.zaa-blog-list .wp-block-query-pagination-numbers .current {
  background: var(--zaa-noir);
  border:1px solid var(--zaa-noir);
  color: var(--zaa-blanc);
  font-weight: 400;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: var(--wp--preset--font-size--small);
  padding: 10px 16px;
}

/* --- Article seul (single) --- */
.zaa-single .wp-block-post-title {
  font-size: var(--wp--preset--font-size--xx-large);
  line-height: 1.4;
  margin: 0 0 10px;
}
.zaa-single .wp-block-post-featured-image {
  margin: 20px 0;
}

/* --- Barre latérale du blog --- */

.zaa-sidebar .wp-block-heading {
  font-size: 1em;
  letter-spacing: 2px;
  margin-bottom: 11px;
}
.zaa-sidebar .wp-block-search__inside-wrapper {
  border: 1px solid var(--zaa-noir);
  border-radius: 0;
}
.zaa-sidebar .wp-block-search__input {
  border: 0;
  border-radius: 0;
  padding: 10px 12px;
}
.zaa-sidebar .wp-block-search__button {
  background: var(--zaa-noir);
  color: #fff;
  border: 1px solid var(--zaa-noir);
  border-radius: 0;
  margin: 0;
  padding: 0 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zaa-sidebar .wp-block-search__button:hover {
  background: var(--zaa-blanc);
}

.zaa-sidebar .wp-block-search__button svg {
  fill: currentColor;
  width: 20px;
  height: 20px;
}
.zaa-sidebar .wp-block-search__button:hover svg {
  fill: var(--zaa-noir);
}
.zaa-sidebar .wp-block-latest-posts li a,
.zaa-sidebar .wp-block-categories li a {
  color: var(--zaa-rougeclair);
  text-decoration: none;
}
/* Espacement plus généreux entre chaque « dernière nouvelle » du sidebar. */
.zaa-sidebar .wp-block-latest-posts li {
  margin-bottom: 16px;
}
.zaa-sidebar .wp-block-latest-posts li:last-child {
  margin-bottom: 0;
}
.zaa-sidebar .wp-block-latest-posts li a:hover,
.zaa-sidebar .wp-block-categories li a:hover {
  color: var(--zaa-noir);
}
@media (max-width: 781px) {
  .zaa-sidebar {
    display:none;
  }
}

/* --- Détail d'un projet (single portfolio) --- */

/* Ces règles ne visent QUE le projet courant (enfants directs) : sinon elles
   débordent sur la grille « projets reliés » imbriquée dans .portfolio-detail. */
.portfolio-detail > .wp-block-post-featured-image {
  margin: 0;
}
.portfolio-detail-description {
  text-align: center;
}
.portfolio-detail > .portfolio-terms {
  text-align: center;
  font-style: italic;
  margin: 20px 0;
}
.portfolio-detail > .portfolio-terms a {
  color: var(--zaa-rougeclair);
  text-decoration: none;
}

/* --- Diaporama du projet (shortcode [zaa_portfolio_gallery]) ---
   Toutes les images ont la MÊME HAUTEUR (largeurs variables acceptées) :
   hauteur fixe sur le cadre, image en height:100%/width:auto, centrée, le
   débordement éventuel est masqué. Transition en fondu entre les vues. */
.zaa-slider {
  position: relative;
  /* Cadre 16:9 (1200×675) ; chaque diapo (image OU vidéo) y entre ENTIÈRE. */
  aspect-ratio: 1200 / 675;
  margin: 0 auto;
  background: var(--zaa-blanc);
  overflow: visible;
}
.zaa-slides {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.zaa-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.zaa-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.zaa-slide-img {
  display: block;
  /* Taille naturelle, centrée par le flex de .zaa-slide : réduite si trop
     grande, jamais agrandie (les petites images restent nettes). */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.zaa-slider-nav {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
/* Flèches : carré, bordure 1px, chevron noir mince. Survol : fond + bordure
   noirs, chevron blanc. Hauteur calée sur celle des boutons (.btn). */
.zaa-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--zaa-blanc);
  border: 1px solid var(--zaa-noir);
  border-radius: 0;
  color: var(--zaa-noir);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.zaa-slider-prev { left: 16px; }
.zaa-slider-next { right: 16px; }
.zaa-slider-arrow:hover,
.zaa-slider-arrow:focus-visible {
  background: var(--zaa-noir);
  border-color: var(--zaa-noir);
  color: var(--zaa-blanc);
}
.zaa-slider-arrow .zaa-chevron {
  display: block;
  width: 26px;
  height: 26px;
}
/* Mobile : le diaporama reste pleine largeur (fond blanc = fond de page), mais
   l'IMAGE reçoit la même marge latérale que le texte (= padding global de la
   page). Les flèches deviennent des barres de la largeur de cette marge, logées
   À CÔTÉ de l'image (dans la marge) — elles ne la couvrent donc plus. */
@media (max-width: 781px) {
  .zaa-slide {
    padding-left: var(--wp--style--root--padding-left, clamp(30px, 5vw, 50px));
    padding-right: var(--wp--style--root--padding-right, clamp(30px, 5vw, 50px));
  }
  .zaa-slider-arrow {
    width: var(--wp--style--root--padding-left, clamp(30px, 5vw, 50px));
    height: 56px;
  }
  .zaa-slider-arrow .zaa-chevron { width: 18px; height: 18px; }
  .zaa-slider-prev { left: 0; }
  .zaa-slider-next { right: 0; }
}
/* Desktop : le diaporama ne dépasse pas la hauteur de l'écran moins l'entête ET
   le bandeau de titre (~210px). On limite la largeur pour qu'en 16:9 la hauteur
   tienne dans la fenêtre ; il reste centré. Ajuster « 210px » au besoin. */
@media (min-width: 782px) {
  .zaa-slider {
    width: min(100%, calc((100vh - 210px) * 1200 / 675));
  }
  .zaa-slider.has-nav {
    --zaa-slider-arrow-offset: clamp(22px, 3vw, 42px);
  }
  .zaa-slider.has-nav .zaa-slider-prev {
    left: calc(-54px - var(--zaa-slider-arrow-offset));
  }
  .zaa-slider.has-nav .zaa-slider-next {
    right: calc(-54px - var(--zaa-slider-arrow-offset));
  }
}

/* --- Navigation précédent / suivant --- */
.zaa-post-navigation {
  border-top: 0.5px solid var(--zaa-noir);
  margin-top: 30px;
  padding-top: 22px;
}
.zaa-post-navigation a {
  color: var(--zaa-noir);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.zaa-post-navigation a:hover {
  color: var(--zaa-rougeclair);
}

/* --- Ligne du temps (page À propos / About) : [zaa_timeline] --- */
.zaa-timeline {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  position: relative;
}
/* Ligne verticale derrière les médaillons (centrée sur 64px → 31px). */
.zaa-timeline::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--zaa-noir);
}
.zaa-timeline-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
}
.zaa-timeline-media {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--zaa-blanc);
  border: 2px solid var(--zaa-noir);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  text-decoration: none;
}
.zaa-timeline-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
/* Photos (sources carrées) affichées en ROND via la pastille, et qui
   grossissent au survol — comme les pastilles fondation/prix. */
.zaa-timeline-media:hover img {
  transform: scale(1.12);
}
/* Filet de sécurité : si un wrapper externe (ex. plugin Meta Field Block,
   « .value img { height:auto } », spécificité 0,2,1) écrase le remplissage, on
   regagne la cascade en 0,2,2 sur les seuls médaillons-photos (un <a>), sans
   toucher la fondation (<span>). */
.zaa-timeline a.zaa-timeline-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Prix (★) : pastille pleine rouge. Fondation (✦) : pastille pleine noire. */
.zaa-timeline-media--award {
  background: var(--zaa-rougeclair);
  border-color: var(--zaa-rougeclair);
  color: var(--zaa-blanc);
  font-size: 28px;
  line-height: 1;
}
.zaa-timeline-media--foundation {
  background: var(--zaa-blanc);
  border-color: var(--zaa-noir);
}
.zaa-timeline-media--foundation img {
  /* Logo centré dans la pastille, agrandi mais sans être rogné par le cercle. */
  width: 70%;
  height: 70%;
  object-fit: contain;
}
.zaa-timeline-initiale {
  color: var(--zaa-rougeclair);
  font-weight: 700;
  font-size: 24px;
}
.zaa-timeline-text {
  flex: 1;
}
.zaa-timeline-year {
  font-weight: 700;
  margin-right: 6px;
}
.zaa-timeline-text a {
  color: var(--zaa-noir);
  text-decoration: underline;
}
.zaa-timeline-text a:hover {
  color: var(--zaa-rougeclair);
}
/* Desktop : ligne du temps HORIZONTALE (pleine largeur), pastille au-dessus du
   texte. Sous 782px (mobile/tablette) elle reste verticale (règles de base). */
@media (min-width: 782px) {
  .zaa-timeline {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .zaa-timeline::before {
    left: 0;
    right: 0;
    top: 31px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .zaa-timeline-item {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 0 10px;
  }
  .zaa-timeline-year {
    display: block;
    margin: 0 0 4px;
  }
}
/* Mobile/tablette (verticale) : marge latérale standard de 40px (le timeline
   est dans un conteneur pleine largeur sans padding sur À propos). On utilise
   la MARGE (pas le padding) pour décaler aussi le trait vertical ::before et
   garder son alignement avec les médaillons. */
@media (max-width: 781px) {
  .zaa-timeline {
    margin-left: 40px;
    margin-right: 40px;
  }
}
@media (max-width: 600px) {
  .zaa-timeline-media { flex-basis: 48px; width: 48px; height: 48px; }
  .zaa-timeline-media--award { font-size: 22px; }
  .zaa-timeline-media--foundation { font-size: 20px; }
  .zaa-timeline-initiale { font-size: 18px; }
  .zaa-timeline::before { left: 23px; }
  .zaa-timeline-item { gap: 14px; }
}

/* --- Témoignages --- */
.zaa-testimonial {
  border: 1px solid #000;
  padding: 33px;
  margin-bottom: 33px;
  text-align: center;
}
.zaa-testimonial .wp-block-post-content {
  font-size: var(--wp--preset--font-size--large);
  font-style: italic;
  line-height: 1.5;
}
.zaa-testimonial .wp-block-post-title {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 17px 0 0;
}
.zaa-testimonial .wp-block-post-title::before {
  content: '— ';
}

/* --- FAQ (accordéon natif + balisage FAQPage) --- */
.zaa-faq-section {
  background: url("img/dirt_bg_light.jpg") center / cover no-repeat;
}
.zaa-faq {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.zaa-faq details {
  border: 1px solid #000;
  margin-bottom: 11px;
  background-color:rgba(255, 255, 255, 0.6);
}
.zaa-faq summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--montserrat);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--regular);
  padding: 16px 50px 16px 22px;
  position: relative;
}
.zaa-faq summary::-webkit-details-marker { display: none; }
/* Indicateur +/- dessiné en CSS : deux barres épaisses (3px). Fermé = « + »
   (barre horizontale + barre verticale) ; ouvert = « - » (la verticale pivote
   sur l'horizontale). */
.zaa-faq summary::before,
.zaa-faq summary::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 50%;
  width: 16px;
  height: 3px;
  background-color: currentColor;
  transition: transform .2s ease, background-color .2s ease;
}
.zaa-faq summary::before { transform: translateY(-50%); }              /* barre horizontale */
.zaa-faq summary::after  { transform: translateY(-50%) rotate(90deg); } /* barre verticale → forme le + */
.zaa-faq details[open] summary::after { transform: translateY(-50%) rotate(0deg); } /* ouvert : - */
/* Au survol, les barres passent au rouge accent. */
.zaa-faq summary:hover::before,
.zaa-faq summary:hover::after,
.zaa-faq summary:focus-visible::before,
.zaa-faq summary:focus-visible::after {
  background-color: var(--zaa-rouge);
}
/* FAQ d'accueil (HTML brut, pattern faq.php) : réponse dans .zaa-faq-answer. */
.zaa-faq .zaa-faq-answer { padding: 0 22px 16px; }
/* FAQ par post (blocs Détails natifs) : aligner le contenu sous le résumé. */
.zaa-faq .wp-block-details > :not(summary) {
  padding-left: 22px;
  padding-right: 22px;
}
.zaa-faq .wp-block-details > :not(summary):last-child {
  padding-bottom: 16px;
}

/* --- Bloc Vers (Poésie) — variante « Accent » (fond rouge, texte blanc) ---
   Défini ici (et non en inline_style de register_block_style) pour un
   chargement garanti côté public ET dans l'éditeur (via add_editor_style). */
.wp-block-verse.is-style-accent {
  background-color: var(--wp--preset--color--accent);
  color: #fff;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}
.wp-block-verse.is-style-accent a { color: #fff; }

/* =========================================================================
   PAGE SERVICES — sections de service en alternance (box icône + détail)
   ========================================================================= */

/* Séparateur court rouge sous les titres de section (signature visuelle). */
hr {
  	background: var(--zaa-rouge);
}
hr.zaa-sep {
	width: 60px;
	height: 3px;
	background: var(--zaa-rouge);
	border: none;
	margin: 11px 0 22px;
  margin-left:0 !important;
}
hr.zaa-sep-centre {
	width: 60px;
	height: 3px;
	background: var(--zaa-rouge);
	border: none;
	margin: 11px auto 22px;
}


.zaa-service-detail h2 {
	margin-top: 0;
}
.zaa-service-detail ul {
	padding-left: 22px;
	margin: 0 0 22px;
}
.zaa-service-detail ul li {
	margin-bottom: 8px;
}
.zaa-service-detail ul li::marker {
	color: var(--zaa-rouge);
}
/* Sur la page Services (fond blanc), le titre des box redevient noir
   (l'accueil garde le blanc pour le fond parallax). */
.zaa-service-detail .service-title h3 {
	color: var(--zaa-noir);
}
/* La box icône reste visible pendant la lecture des longues sections. */
.zaa-service-detail .service {
	position: sticky;
	top: calc(var(--zaa-header-h) + 22px);
}

/* Bande photo « passion » : appel à l'action sur image plein écran. */
.zaa-bg-passion {
	background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('/wp-content/uploads/zaacc-passion-led-us-here.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
@media (hover: none) {
	.zaa-bg-passion { background-attachment: scroll; }
}
.zaa-bg-passion h2,
.zaa-bg-passion p {
	color: #fff;
}

/* Paire de boutons d'appel à l'action (sur fond photo ou clair). */
.zaa-cta-buttons {
	display: flex;
	gap: 22px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 33px;
}
.zaa-cta-buttons .btn:hover {
	border-color: #fff;
}

/* =========================================================================
   FORMULAIRES CF7 — style du site : bordures noires nettes, Vollkorn,
   bouton .btn déjà stylé. Le groupe radio « etoile » devient une notation
   par étoiles (CSS seulement, la définition CF7 reste inchangée).
   ========================================================================= */

.wpcf7-form p {
	margin-bottom: 22px;
}

/* Champs texte / courriel / textarea */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 2px solid var(--zaa-noir);
	border-radius: 0;
	background: #fff;
	padding: 14px 16px;
	font-family: 'Vollkorn', Georgia, serif;
	font-size: var(--wp--preset--font-size--regular);
	color: var(--zaa-noir);
}
.wpcf7-form textarea {
	min-height: 180px;
	resize: vertical;
}
.wpcf7-form ::placeholder {
	color: #767676;
	font-style: italic;
	opacity: 1;
}
.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible {
	outline: 1px solid var(--zaa-rougeclair);
	border-color: var(--zaa-rougeclair);
}

/* Bouton : .btn fait déjà le style noir/blanc ; on espace du textarea. */
.wpcf7-form .wpcf7-submit {
	margin-top: 11px;
}

/* --- Notation par étoiles (groupe radio .etoile) ---
   Les chiffres 1-5 sont masqués et remplacés par des étoiles. Grâce à
   :has(), l'étoile cochée ET toutes celles d'avant sont pleines (rouge) ;
   même logique en survol pour prévisualiser sa note. */
.wpcf7-form .etoile {
	display: inline-flex;
	gap: 6px;
}
.wpcf7-form .etoile .wpcf7-list-item {
	margin: 0;
}
.wpcf7-form .etoile label {
	cursor: pointer;
}
.wpcf7-form .etoile input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.wpcf7-form .etoile .wpcf7-list-item-label {
	font-size: 0; /* masque le chiffre */
}
.wpcf7-form .etoile .wpcf7-list-item-label::before {
	content: '☆';
	font-size: 2.5rem;
	line-height: 1;
	color: var(--zaa-noir);
	transition: color .15s ease, transform .15s ease;
	display: inline-block;
}
/* Étoiles pleines : l'item coché + tous ceux qui le précèdent. */
.wpcf7-form .etoile .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label::before,
.wpcf7-form .etoile .wpcf7-list-item:has(~ .wpcf7-list-item input:checked) .wpcf7-list-item-label::before {
	content: '★';
	color: var(--zaa-rouge);
}
/* Prévisualisation au survol : prime sur l'état coché. */
.wpcf7-form .etoile:hover .wpcf7-list-item .wpcf7-list-item-label::before {
	content: '☆';
	color: var(--zaa-noir);
}
.wpcf7-form .etoile .wpcf7-list-item:hover .wpcf7-list-item-label::before,
.wpcf7-form .etoile .wpcf7-list-item:has(~ .wpcf7-list-item:hover) .wpcf7-list-item-label::before {
	content: '★' !important;
	color: var(--zaa-rougeclair) !important;
}
.wpcf7-form .etoile .wpcf7-list-item:hover .wpcf7-list-item-label::before {
	transform: scale(1.15);
}
/* Focus clavier visible sur l'étoile active. */
.wpcf7-form .etoile .wpcf7-list-item:has(input:focus-visible) .wpcf7-list-item-label::before {
	outline: 2px solid var(--zaa-rougeclair);
	outline-offset: 3px;
}

/* --- Messages de validation et de réponse CF7 --- */
.wpcf7-form .wpcf7-not-valid {
	border-color: var(--zaa-rouge);
}
.wpcf7-form .wpcf7-not-valid-tip {
	color: var(--zaa-rouge);
	font-size: 0.9em;
	margin-top: 6px;
}
.wpcf7 .wpcf7-response-output {
	margin: 22px 0 0;
	padding: 14px 22px;
	border: 2px solid var(--zaa-noir);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--small);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--zaa-rouge);
	color: var(--zaa-rouge);
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: #2b4451;
	color: #2b4451;
}

/*-----------------------------------------------------------------------------------*/
/* Complianz - Banner */
/*-----------------------------------------------------------------------------------*/
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  font-weight: 400 !important;
  letter-spacing: 2px;
  font-size: var(--wp--preset--font-size--x-small) !important;
}
.cmplz-cookiebanner .cmplz-links .cmplz-link {
  font-size: var(--wp--preset--font-size--x-small) !important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
  color: #fff !important;
}
.cmplz-cookiebanner .cmplz-links.cmplz-documents {
  grid-row-start: 4;
}
/* Adjust if needed */
#cmplz-cookiebanner {
  padding: 1.75em;
  font-size: var(--wp--preset--font-size--x-small);
  min-width: 376px;
}
/* From Stacked to Inline */
@media (max-width: 768px) {
  .cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row;
  }
}
/* Complianz - Cookie page */
#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode {
  font-size: unset;
  margin-top: unset;
  max-width: unset;
  text-justify: unset;
}
#cmplz-document p, .editor-styles-wrapper .cmplz-unlinked-mode p, #cmplz-document li, .editor-styles-wrapper .cmplz-unlinked-mode li, #cmplz-document td, .editor-styles-wrapper .cmplz-unlinked-mode td {
  font-size: unset;
  margin-top: unset;
}
#cmplz-cookies-overview .cmplz-dropdown p, #cmplz-document .cmplz-dropdown p, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown p, #cmplz-cookies-overview .cmplz-dropdown a, #cmplz-document .cmplz-dropdown a, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown a {
  font-size: unset;
}
#cmplz-document h2, .editor-styles-wrapper .cmplz-unlinked-mode h2, #cmplz-document h3, .editor-styles-wrapper .cmplz-unlinked-mode h3 {
  font-size: unset;
  text-align: unset;
  margin-top: unset;
  padding-bottom: unset;
}
#cmplz-document h2, .editor-styles-wrapper .cmplz-unlinked-mode h2 {
  font-size: var(--wp--preset--font-size--x-large);
  text-transform: uppercase;
}
#cmplz-cookies-overview .cmplz-dropdown summary h3, #cmplz-document .cmplz-dropdown summary h3, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary h3 {
  font-size: unset;
}
#cmplz-manage-consent .cmplz-manage-consent {
text-transform:uppercase;
border-radius: 0;
border:1px solid var(--zaa-blanc);
font-weight:400;
font-size:var(--wp--preset--font-size--x-small);
font-family: var(--wp--preset--font-family--montserrat) !important;
}
#cmplz-manage-consent .cmplz-manage-consent:focus {
    background:#fff !important;
    color:#000 !important;
}
.cmplz-cookiebanner .cmplz-message, .cmplz-cookiebanner .cmplz-title {
    font-style: normal;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    text-transform: uppercase;
    font-family: var(--wp--preset--font-family--montserrat);
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
    background-color: var(--cmplz_button_accept_text_color);
    border: 1px solid var(--cmplz_button_accept_text_color);
    color: var(--cmplz_button_accept_background_color);
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
    background-color: var(--cmplz_button_deny_text_color);
    border: 1px solid var(--cmplz_button_deny_text_color);
    color: var(--cmplz_button_deny_background_color);
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover {
    background-color: var(--cmplz_button_settings_text_color);
    border: 1px solid var(--cmplz_button_settings_text_color);
    color: var(--cmplz_button_settings_background_color);
}
#back-to-top {
  right: 0;
}

/* =========================================================================
   PARTAGE SOCIAL (shortcode [zaa_sharebox]) — barre de boutons sous l'article
   ========================================================================= */
.sharebox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 50px 0 30px;
  padding-top: 22px;
  border-top: 0.5px solid var(--zaa-noir);
}
.sharebox-label {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: var(--wp--preset--font-size--x-small);
}
.sharebox ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sharebox a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: var(--wp--preset--font-size--x-small);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--zaa-noir);
  border: 1px solid var(--zaa-blanc);
  padding: 8px 6px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sharebox a:hover,
.sharebox a:focus-visible {
  background: var(--zaa-noir);
  border-color: var(--zaa-noir);
  color: #fff;
}
.sharebox a .share-icon {
  display: inline-flex;
  align-items: center;
}
.sharebox a .share-icon svg {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  display: block;
}

/* Image à la une des pages (page.html) : pleine largeur, sous l'entête. */
.zaa-page-hero {
  margin: 0;
}
.zaa-page-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Projets reliés (single-portfolio) : même grille 3 colonnes que le portfolio. */
.zaa-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2em;
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
}
@media (max-width: 781px) {
  .zaa-related-grid { grid-template-columns: 1fr; }
}

/* Exemples d'infolettres : cartes de même hauteur dans les articles. */
.zaa-newsletter-examples {
  align-items: stretch;
}
.zaa-newsletter-examples > .wp-block-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(20px, 3vw, 32px);
  text-align: center;
}
.zaa-newsletter-examples h3 {
  margin-top: 0;
}
.zaa-newsletter-examples .wp-block-image {
  margin-top: 0;
}
.zaa-newsletter-examples .wp-block-image img {
  max-height: 150px;
  object-fit: contain;
}
.zaa-newsletter-examples p {
  margin-top: auto;
  text-align: center;
}
.zaa-sep-centrer {
  width: 72px;
  margin-left: auto;
  margin-right: auto;
}