/* Styles partagés des widgets personnalisés AGCI */

/* ------------------------------------------------------------------
   Flèche AGCI — classe utilitaire pour les boutons Elementor
   ------------------------------------------------------------------
   Ajouter la classe « agci-btn-fleche » à un widget Bouton (Avancé >
   Classes CSS) : la flèche signature apparaît à droite du libellé,
   colorée par currentColor (elle suit la couleur du texte du bouton).
   Au survol, elle s'envole en diagonale haut-droite et revient depuis
   le bas-gauche — le débordement est masqué par le wrapper.
   Le tracé est exposé en variable pour tous les usages en masque CSS. */
:root {
	--agci-fleche: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2022%2022%22%3E%3Cpath%20d=%22M17.5574%2015.2887C17.5786%2015.2887%2017.9837%2015.046%2018.4575%2014.7493C18.9314%2014.4525%2019.3097%2014.192%2019.2984%2014.1704C19.287%2014.1488%2019.0595%2013.8415%2018.7927%2013.4876C18.2569%2012.7767%2017.7412%2011.8369%2017.5126%2011.1552C16.8004%209.03054%2017.1282%206.82426%2018.4208%205.04339L18.75%204.58989L18.1234%203.96327L17.4967%203.33661L17.0825%203.63179C14.3689%205.56571%2011.1164%205.34319%208.23279%203.02641C8.04451%202.87512%207.88352%202.75836%207.87501%202.76687C7.79664%202.84524%206.811%204.4568%206.81123%204.50615C6.8114%204.54184%206.98378%204.6878%207.19429%204.8304C9.52511%206.40968%2012.1919%206.92461%2014.2534%206.19354L14.7479%206.01818L7.87305%2012.918L3.52589%2017.281L4.79405%2018.5492L9.16829%2014.1908L16.0519%207.3323L15.8433%207.96937C15.3021%209.62206%2015.5238%2011.5807%2016.4756%2013.5554C16.7467%2014.118%2017.4772%2015.2883%2017.5574%2015.2887Z%22%20fill=%22black%22/%3E%3C/svg%3E");
	/* La même, jaune, en image de fond (pastille noire des survols de cartes) */
	--agci-fleche-jaune: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2022%2022%22%3E%3Cpath%20d=%22M17.5574%2015.2887C17.5786%2015.2887%2017.9837%2015.046%2018.4575%2014.7493C18.9314%2014.4525%2019.3097%2014.192%2019.2984%2014.1704C19.287%2014.1488%2019.0595%2013.8415%2018.7927%2013.4876C18.2569%2012.7767%2017.7412%2011.8369%2017.5126%2011.1552C16.8004%209.03054%2017.1282%206.82426%2018.4208%205.04339L18.75%204.58989L18.1234%203.96327L17.4967%203.33661L17.0825%203.63179C14.3689%205.56571%2011.1164%205.34319%208.23279%203.02641C8.04451%202.87512%207.88352%202.75836%207.87501%202.76687C7.79664%202.84524%206.811%204.4568%206.81123%204.50615C6.8114%204.54184%206.98378%204.6878%207.19429%204.8304C9.52511%206.40968%2012.1919%206.92461%2014.2534%206.19354L14.7479%206.01818L7.87305%2012.918L3.52589%2017.281L4.79405%2018.5492L9.16829%2014.1908L16.0519%207.3323L15.8433%207.96937C15.3021%209.62206%2015.5238%2011.5807%2016.4756%2013.5554C16.7467%2014.118%2017.4772%2015.2883%2017.5574%2015.2887Z%22%20fill=%22%23F3CC09%22/%3E%3C/svg%3E");
}

.agci-btn-fleche .elementor-button-content-wrapper {
	position: relative;
	overflow: hidden;
	padding-right: 23px;
}

.agci-btn-fleche .elementor-button-content-wrapper::before,
.agci-btn-fleche .elementor-button-content-wrapper::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background-color: currentColor;
	-webkit-mask: var(--agci-fleche) no-repeat center / contain;
	mask: var(--agci-fleche) no-repeat center / contain;
	transition:
		transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Au repos : la flèche « titulaire » (::after) en place, la remplaçante
   (::before) en attente hors champ, en bas à gauche. */
.agci-btn-fleche .elementor-button-content-wrapper::before {
	opacity: 0;
	transform: translate(-14px, 14px);
}

/* Au survol : la titulaire sort par le haut-droite, la remplaçante
   prend sa place — même trajectoire que la pointe de la flèche. */
.agci-btn-fleche .elementor-button:hover .elementor-button-content-wrapper::after,
.agci-btn-fleche .elementor-button:focus .elementor-button-content-wrapper::after {
	opacity: 0;
	transform: translate(14px, -14px);
}

.agci-btn-fleche .elementor-button:hover .elementor-button-content-wrapper::before,
.agci-btn-fleche .elementor-button:focus .elementor-button-content-wrapper::before {
	opacity: 1;
	transform: translate(0, 0);
}

/* ------------------------------------------------------------------
   Relais de flèche — pastilles et boutons des cartes
   ------------------------------------------------------------------
   Même principe que .agci-btn-fleche : au survol, la flèche en place
   s'échappe dans la direction qu'elle pointe et une seconde entre par
   le côté opposé. La flèche des pastilles est pivotée de 45° — elle
   pointe donc à droite et le relais est horizontal ; celle des boutons
   à libellé pointe en diagonale et s'envole en haut-droite.
   La remplaçante est un pseudo-élément masqué par --agci-fleche, peint
   en currentColor : elle suit la palette de la carte sans réglage. */
.agci-svc-cta-btn,
.agci-prest-cta-btn {
	position: relative;
	overflow: hidden;
}

.agci-svc-cta-btn {
	--agci-relais: 15px;
}

.agci-prest-cta-btn {
	--agci-relais: 14px;
}

.agci-svc-cta-btn::after,
.agci-prest-cta-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--agci-relais);
	height: var(--agci-relais);
	margin: calc(var(--agci-relais) / -2) 0 0 calc(var(--agci-relais) / -2);
	background-color: currentColor;
	-webkit-mask: var(--agci-fleche) no-repeat center / contain;
	mask: var(--agci-fleche) no-repeat center / contain;
	opacity: 0;
	transform: translateX(-18px) rotate(45deg);
}

.agci-svc-cta-btn svg,
.agci-prest-cta-btn svg,
.agci-svc-cta-btn::after,
.agci-prest-cta-btn::after {
	transition:
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.agci-svc-card:hover .agci-svc-cta-btn svg,
.agci-svc-cta:focus-visible .agci-svc-cta-btn svg,
.agci-prest-card:hover .agci-prest-cta-btn svg,
.agci-prest-cta:focus-visible .agci-prest-cta-btn svg {
	opacity: 0;
	transform: translateX(18px) rotate(45deg);
}

.agci-svc-card:hover .agci-svc-cta-btn::after,
.agci-svc-cta:focus-visible .agci-svc-cta-btn::after,
.agci-prest-card:hover .agci-prest-cta-btn::after,
.agci-prest-cta:focus-visible .agci-prest-cta-btn::after {
	opacity: 1;
	transform: translateX(0) rotate(45deg);
}

/* Bouton à libellé du bandeau jaune : flèche en diagonale, même relais. */
.agci-ss-cta-btn {
	overflow: hidden;
}

.agci-ss-cta-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 28px;
	width: 15px;
	height: 15px;
	margin-top: -7.5px;
	background-color: currentColor;
	-webkit-mask: var(--agci-fleche) no-repeat center / contain;
	mask: var(--agci-fleche) no-repeat center / contain;
	opacity: 0;
	transform: translate(-14px, 14px);
}

.agci-ss-cta-btn svg,
.agci-ss-cta-btn::after {
	transition:
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.agci-ss-cta-btn:hover svg,
.agci-ss-cta-btn:focus-visible svg {
	opacity: 0;
	transform: translate(14px, -14px);
}

.agci-ss-cta-btn:hover::after,
.agci-ss-cta-btn:focus-visible::after {
	opacity: 1;
	transform: translate(0, 0);
}

/* Accessibilité : pas d'envolée si l'utilisateur préfère moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
	.agci-btn-fleche .elementor-button-content-wrapper::before,
	.agci-btn-fleche .elementor-button-content-wrapper::after,
	.agci-svc-cta-btn svg,
	.agci-svc-cta-btn::after,
	.agci-prest-cta-btn svg,
	.agci-prest-cta-btn::after,
	.agci-ss-cta-btn svg,
	.agci-ss-cta-btn::after {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Survol des cartes d'articles — blog + accueil
   ------------------------------------------------------------------
   Sur la vignette : voile jaune translucide + pastille noire à flèche
   jaune qui pop au centre avec un léger rebond. S'applique aux
   vignettes de la page Blog / archives (.agci-archive-thumb) et de la
   section blog de l'accueil (.agci-blog-featured-media,
   .agci-blog-post-thumb) — toutes en position:relative + overflow:
   hidden, le survol est porté par le lien parent. */

/* Voile jaune */
.agci-archive-thumb::after,
.agci-blog-featured-media::after,
.agci-blog-post-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(243, 204, 9, 0.5);
	opacity: 0;
	transition: opacity 0.25s ease;
}

/* Pastille noire + flèche jaune (l'échelle est portée par une variable
   pour composer rebond et centrage) */
.agci-archive-thumb::before,
.agci-blog-featured-media::before,
.agci-blog-post-thumb::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: var(--agci-hover-pastille, 56px);
	height: var(--agci-hover-pastille, 56px);
	margin: calc(var(--agci-hover-pastille, 56px) / -2) 0 0 calc(var(--agci-hover-pastille, 56px) / -2);
	border-radius: 50%;
	background: #010101 var(--agci-fleche-jaune) no-repeat center / 45%;
	opacity: 0;
	transform: scale(0.2);
	transition:
		transform 0.45s cubic-bezier(0.34, 1.8, 0.45, 1),
		opacity 0.18s ease;
}

/* Pastille réduite sur les petites vignettes de la liste de l'accueil */
.agci-blog-post-thumb::before {
	--agci-hover-pastille: 42px;
}

.agci-archive-card:hover .agci-archive-thumb::after,
.agci-archive-featured:hover .agci-archive-thumb::after,
.agci-blog-featured:hover .agci-blog-featured-media::after,
.agci-blog-post:hover .agci-blog-post-thumb::after {
	opacity: 1;
}

.agci-archive-card:hover .agci-archive-thumb::before,
.agci-archive-featured:hover .agci-archive-thumb::before,
.agci-blog-featured:hover .agci-blog-featured-media::before,
.agci-blog-post:hover .agci-blog-post-thumb::before {
	opacity: 1;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.agci-archive-thumb::before,
	.agci-archive-thumb::after,
	.agci-blog-featured-media::before,
	.agci-blog-featured-media::after,
	.agci-blog-post-thumb::before,
	.agci-blog-post-thumb::after {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   CTA « bulle » — « Toutes les réalisations » / « Consulter le blog »
   ------------------------------------------------------------------
   Au repos : libellé + pastille noire à flèche jaune. Au survol : la
   pastille éclot en bulle jaune qui grandit depuis sa position et
   englobe tout le libellé (clippée par la pilule), pendant que la
   pastille s'efface et que la flèche bascule en noir.
   Les marges négatives compensent le padding interne : la mise en
   page au repos ne bouge pas d'un pixel. */
.agci-real-all,
.agci-blog-all {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 6px 6px 6px 18px;
	margin: -6px -6px -6px -18px;
	border-radius: 100px;
}

.agci-real-all::before,
.agci-blog-all::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	right: 6px;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	border-radius: 50%;
	background: #f3cc09;
	transform: scale(1);
	transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.agci-real-all:hover::before,
.agci-blog-all:hover::before {
	transform: scale(16);
}

/* Le reset de Hello Elementor (a:hover { color: #336 }) est plus spécifique
   que la classe seule : on réaffirme le noir au survol. */
.agci-real-all:hover,
.agci-blog-all:hover {
	color: #010101;
}

.agci-real-all-btn,
.agci-blog-all-btn {
	transition: background-color 0.3s ease;
}

.agci-real-all-btn svg path,
.agci-blog-all-btn svg path {
	transition: fill 0.3s ease;
}

.agci-real-all:hover .agci-real-all-btn,
.agci-blog-all:hover .agci-blog-all-btn {
	background: transparent;
}

.agci-real-all:hover .agci-real-all-btn svg path,
.agci-blog-all:hover .agci-blog-all-btn svg path {
	fill: #010101;
}

@media (prefers-reduced-motion: reduce) {
	.agci-real-all::before,
	.agci-blog-all::before {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Footer — colonnes de liens (widgets Text Editor)
   ------------------------------------------------------------------ */

/* Plusieurs blocs du footer ont une largeur fixe en px posée dans Elementor
   (1220px pour la grille, 880px pour le CTA) : sous cette largeur ils
   dépassaient leur parent et faisaient défiler toute la page horizontalement,
   sur l'ensemble du site. Les parents portent déjà leurs gouttières : borner
   les containers à la largeur disponible suffit, et couvre les blocs à venir. */
.elementor-location-footer .e-con {
	max-width: 100%;
}

.agci-fcol {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
}

.agci-fcol a {
	color: rgba(255, 255, 255, 0.6);
	font-family: "Albert Sans", sans-serif;
	font-weight: 500;
	font-size: 13.5px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.agci-fcol a:hover {
	color: #f3cc09;
}

/* ------------------------------------------------------------------
   Accueil — le hero tient dans la ligne de flottaison, marquee compris

   La carte du hero était figée à 1024px dans Elementor : avec le header
   (90px), la gouttière haute de la section (24px) et le bandeau de logos
   (74px), le premier écran réclamait 1212px. Aucun portable n'a ça — sur un
   1440x900 le bandeau tombait 400px sous la ligne de flottaison.

   On remplace la hauteur fixe par « ce qui reste sous le header », le
   décompte étant porté par --agci-hero-fold pour rester lisible. Le header
   est en position sticky mais RESTE DANS LE FLUX : il consomme donc bien sa
   hauteur, il ne recouvre pas le hero.

   C'est bien min-height et pas height : sur un écran très bas (un 1366x768
   n'offre que ~670px de viewport, pour un contenu de hero qui en réclame
   487), la carte reprend la main et déborde de quelques pixels plutôt que
   d'écraser le titre. Le repli est volontaire, dans ce sens-là.

   svh et non vh : sur mobile, vh se cale sur le viewport barre d'URL
   rétractée, donc trop grand au chargement — le marquee serait poussé hors
   champ précisément au moment où on veut le voir. La ligne en vh reste comme
   repli pour les navigateurs sans svh.
   ------------------------------------------------------------------ */
body.home {
	--agci-hero-fold: 188px; /* header 90 + gouttière section 24 + marquee 74 */
}

/* Sous 1024px le header passe en version compacte (71px). */
@media ( max-width: 1023px ) {
	body.home {
		--agci-hero-fold: 169px;
	}
}

/* Sous 768px la section retombe à 4px de gouttière haute. */
@media ( max-width: 767px ) {
	body.home {
		--agci-hero-fold: 149px;
	}
}

/* !important obligatoire : le CSS de page d'Elementor est plus spécifique
   (.elementor-59 .elementor-element.elementor-element-herocard1). */
body.home .elementor-element-herocard1 {
	min-height: calc(100vh - var(--agci-hero-fold)) !important;
	min-height: calc(100svh - var(--agci-hero-fold)) !important;
}

/* Écrans bas (le 1366x768 encore courant n'offre que ~670px de viewport) :
   là, ce n'est plus la hauteur disponible qui contraint mais le contenu du
   hero, qui réclame 487px avec les 56px de gouttière haute et basse de la
   carte. Les ramener à 32px rend les ~50px qui manquaient pour que le
   bandeau de logos reste au-dessus de la ligne de flottaison.
   Réservé au desktop : sous 768px la carte est déjà à 26/24px. */
@media ( min-width: 768px ) and ( max-height: 820px ) {
	body.home .elementor-element-herocard1 {
		--padding-top: 32px !important;
		--padding-bottom: 32px !important;
	}
}

/* Même logique sur les petits mobiles (un iPhone SE ne laisse qu'environ
   550px de svh une fois la barre d'URL déployée) : on récupère les 18px de
   gouttière qui manquaient. En dessous, c'est la hauteur du titre lui-même
   qui plafonne — le réduire serait un choix de maquette, pas de responsive.

   Le `html` en tête n'est pas décoratif : le bloc mobile général, plus bas
   dans cette feuille, pose --padding-top: 26px !important sur le même
   sélecteur. À spécificité égale c'est lui qui gagnerait, étant écrit après. */
@media ( max-width: 767px ) and ( max-height: 700px ) {
	html body.home .elementor-element-herocard1 {
		--padding-top: 16px !important;
		--padding-bottom: 16px !important;
	}
}

/* ------------------------------------------------------------------
   Hero — bandeau de logos défilant (placeholder ; animation à ajouter)

   Ciblé par la classe « agci-hero-marquee » posée sur le container (Avancé >
   Classes CSS) : le composant se pose ainsi sur n'importe quelle page — il
   était auparavant accroché à l'id d'élément du seul hero Services.
   ------------------------------------------------------------------ */
.agci-hero-marquee {
	overflow: hidden;
}

/* Bandeau pleine largeur : la section a un padding latéral de 24px pour
   insérer la carte ; on l'annule ici pour que le bandeau touche les bords. */
.agci-hero-marquee {
	width: calc(100% + 48px) !important;
	margin-left: -24px !important;
	margin-right: -24px !important;
}

/* Sous 768px — palier mobile d'Elementor — la section retombe à 12px de
   gouttière : compenser 24px ferait dépasser le bandeau de 12px à droite et
   défiler toute la page. Il reste donc dans les limites de son parent. */
@media ( max-width: 767px ) {
	.agci-hero-marquee {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Bandeau en Icon List : la <ul> devient la piste animée.
   PAS de gap flex (il casse la boucle) → margin-right sur chaque item,
   pour que translateX(-50%) tombe pile sur un jeu complet = sans couture. */
.agci-hero-marquee .elementor-icon-list-items {
	display: flex;
	align-items: center;
	width: max-content;
	margin: 0;
	padding: 0;
	animation: agci-marquee 32s linear infinite;
}

.agci-hero-marquee:hover .elementor-icon-list-items {
	animation-play-state: paused;
}

.agci-hero-marquee .elementor-icon-list-item {
	margin: 0 88px 0 0 !important;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

/* Carré placeholder devant chaque nom (pas d'icône FA) */
.agci-hero-marquee .elementor-icon-list-icon {
	display: none;
}

.agci-hero-marquee .elementor-icon-list-item::before {
	content: "";
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: #010101;
	opacity: 0.35;
	flex: none;
	margin-right: 10px;
}

.agci-hero-marquee .elementor-icon-list-text {
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: #010101;
	opacity: 0.35;
}

@keyframes agci-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------------
   À propos — badge pilule (carré jaune tourné + libellé) + glows ambiants
   ------------------------------------------------------------------ */
.agci-apropos-badge .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid rgba(1, 1, 1, 0.1);
	border-radius: 100px;
	padding: 9px 18px;
	line-height: 1;
}

.agci-apropos-badge .elementor-heading-title::before {
	content: "";
	width: 9px;
	height: 9px;
	background: #f3cc09;
	transform: rotate(45deg);
	display: inline-block;
	flex: none;
}

/* Glows jaunes ambiants (dégradés radiaux flous, non éditables — pure déco) */
.elementor-element-aproposec {
	position: relative;
	overflow: hidden;
}

.elementor-element-aproposec::before,
.elementor-element-aproposec::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.elementor-element-aproposec::before {
	top: -140px;
	right: 6%;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, rgba(243, 204, 9, 0.5) 0%, rgba(243, 204, 9, 0) 70%);
	filter: blur(90px);
}

.elementor-element-aproposec::after {
	bottom: -200px;
	left: -8%;
	width: 640px;
	height: 640px;
	background: radial-gradient(circle, rgba(243, 204, 9, 0.32) 0%, rgba(243, 204, 9, 0) 70%);
	filter: blur(110px);
}

/* Le contenu doit passer au-dessus des glows */
.elementor-element-aproposec > .elementor-container,
.elementor-element-aproposec > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------------
   Carrousel « Nos services » (widget AGCI — cartes à encoche)
   ------------------------------------------------------------------ */
.agci-services {
	padding: 120px 0 110px;
	background: #fff;
	overflow: hidden;
}

.agci-services-head {
	max-width: 1220px;
	margin: 0 auto 52px;
	padding: 0 40px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.agci-services-overline {
	display: block;
	font-family: "Albert Sans", sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: 0.45;
	margin-bottom: 14px;
}

.agci-services-title {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 34px;
	line-height: 1.2;
	max-width: 620px;
	color: #010101;
}

.agci-services-sub {
	margin: 20px 0 0;
	max-width: 420px;
	font-family: "Albert Sans", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 500;
	opacity: 0.7;
}

.agci-services-nav {
	display: flex;
	gap: 12px;
	flex: none;
}

.agci-svc-btn {
	width: 56px;
	height: 56px;
	border-radius: 100px;
	border: 1px solid rgba(1, 1, 1, 0.2);
	background: #fff;
	color: #010101;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.25s ease;
}

.agci-svc-btn:hover:not([disabled]) {
	background: #010101;
	color: #fff;
	border-color: #010101;
}

/* Le reset de Hello Elementor peint les <button> en rose (#c36) au focus :
   après un clic, la flèche restait rose. On neutralise en réaffirmant les
   couleurs du repos, avec un anneau jaune pour la navigation clavier. */
.agci-svc-btn:focus {
	background: #fff;
	color: #010101;
	border-color: rgba(1, 1, 1, 0.2);
}

.agci-svc-btn:focus-visible {
	outline: 2px solid #f3cc09;
	outline-offset: 2px;
}

.agci-svc-btn[disabled] {
	opacity: 0.3;
	cursor: default;
}

/* Flèche désactivée : le reset rose (button:hover) s'appliquait aussi au
   survol d'un bouton [disabled] — on fige les couleurs du repos. */
.agci-svc-btn[disabled]:hover,
.agci-svc-btn[disabled]:focus {
	background: #fff;
	color: #010101;
	border-color: rgba(1, 1, 1, 0.2);
}

.agci-svc-btn svg {
	width: 20px;
	height: 20px;
}

.agci-svc-prev svg {
	transform: rotate(225deg);
}

.agci-svc-next svg {
	transform: rotate(45deg);
}

/* Piste + carrousel */
.agci-services-viewport {
	padding-left: max(40px, calc((100vw - 1220px) / 2));
}

.agci-services-track {
	display: flex;
	gap: 24px;
	transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* Carte : l'encoche numérotée est un VRAI détourage. Le calque .agci-svc-clip
   (fond + contenu) est masqué — l'union de 7 dégradés dessine le rectangle
   moins l'encoche — et le numéro flotte donc sur le fond de la page, quel
   qu'il soit (l'ombre suit la forme via drop-shadow).
   La découpe compte TROIS rayons, comme la maquette :
     • 2 congés concaves (5 et 6) qui raccordent l'encoche aux bords haut/gauche ;
     • 1 angle rentrant convexe (7) au coin bas-droit de l'encoche — c'est lui
       qui manquait et donnait un angle vif « en L brut ».
   Tailles en variables pour le miroir et le responsive. */
.agci-svc-card {
	--svc-notch-w: 116px;
	--svc-notch-h: 78px;
	--svc-notch-r: 24px;
	position: relative;
	flex: none;
	width: min(980px, 72vw);
	min-height: 580px;
	display: flex;
}

.agci-svc-clip {
	flex: 1;
	min-width: 0;
	display: flex;
	border-radius: 0 20px 20px 20px;
	overflow: hidden;
	-webkit-mask:
		linear-gradient(#000 0 0) left calc(var(--svc-notch-w) + var(--svc-notch-r)) top 0 / calc(100% - var(--svc-notch-w) - var(--svc-notch-r)) 100% no-repeat,
		linear-gradient(#000 0 0) left 0 top calc(var(--svc-notch-h) + var(--svc-notch-r)) / 100% calc(100% - var(--svc-notch-h) - var(--svc-notch-r)) no-repeat,
		linear-gradient(#000 0 0) left var(--svc-notch-w) top var(--svc-notch-r) / var(--svc-notch-r) calc(100% - var(--svc-notch-r)) no-repeat,
		linear-gradient(#000 0 0) left var(--svc-notch-r) top var(--svc-notch-h) / calc(100% - var(--svc-notch-r)) var(--svc-notch-r) no-repeat,
		radial-gradient(circle at 100% 100%, #000 calc(var(--svc-notch-r) - 0.5px), rgba(0, 0, 0, 0) var(--svc-notch-r)) left var(--svc-notch-w) top 0 / var(--svc-notch-r) var(--svc-notch-r) no-repeat,
		radial-gradient(circle at 100% 100%, #000 calc(var(--svc-notch-r) - 0.5px), rgba(0, 0, 0, 0) var(--svc-notch-r)) left 0 top var(--svc-notch-h) / var(--svc-notch-r) var(--svc-notch-r) no-repeat,
		radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0) calc(var(--svc-notch-r) - 0.5px), #000 var(--svc-notch-r)) left calc(var(--svc-notch-w) - var(--svc-notch-r)) top calc(var(--svc-notch-h) - var(--svc-notch-r)) / var(--svc-notch-r) var(--svc-notch-r) no-repeat;
	mask:
		linear-gradient(#000 0 0) left calc(var(--svc-notch-w) + var(--svc-notch-r)) top 0 / calc(100% - var(--svc-notch-w) - var(--svc-notch-r)) 100% no-repeat,
		linear-gradient(#000 0 0) left 0 top calc(var(--svc-notch-h) + var(--svc-notch-r)) / 100% calc(100% - var(--svc-notch-h) - var(--svc-notch-r)) no-repeat,
		linear-gradient(#000 0 0) left var(--svc-notch-w) top var(--svc-notch-r) / var(--svc-notch-r) calc(100% - var(--svc-notch-r)) no-repeat,
		linear-gradient(#000 0 0) left var(--svc-notch-r) top var(--svc-notch-h) / calc(100% - var(--svc-notch-r)) var(--svc-notch-r) no-repeat,
		radial-gradient(circle at 100% 100%, #000 calc(var(--svc-notch-r) - 0.5px), rgba(0, 0, 0, 0) var(--svc-notch-r)) left var(--svc-notch-w) top 0 / var(--svc-notch-r) var(--svc-notch-r) no-repeat,
		radial-gradient(circle at 100% 100%, #000 calc(var(--svc-notch-r) - 0.5px), rgba(0, 0, 0, 0) var(--svc-notch-r)) left 0 top var(--svc-notch-h) / var(--svc-notch-r) var(--svc-notch-r) no-repeat,
		radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0) calc(var(--svc-notch-r) - 0.5px), #000 var(--svc-notch-r)) left calc(var(--svc-notch-w) - var(--svc-notch-r)) top calc(var(--svc-notch-h) - var(--svc-notch-r)) / var(--svc-notch-r) var(--svc-notch-r) no-repeat;
}

.agci-svc--dark {
	color: #fff;
}

.agci-svc--dark .agci-svc-clip {
	background: #010101;
}

.agci-svc--yellow {
	color: #010101;
}

.agci-svc--yellow .agci-svc-clip {
	background: #f3cc09;
}

.agci-svc--light {
	color: #010101;
}

.agci-svc--light .agci-svc-clip {
	background: #f4f4f2;
}

/* Encoche : plus aucun fond — juste le numéro, posé dans le détourage */
.agci-svc-notch {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--svc-notch-w);
	height: var(--svc-notch-h);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	pointer-events: none;
}

.agci-svc-num {
	font-family: "Krona One", sans-serif;
	font-size: 27px;
	color: #010101;
}

/* Corps texte */
.agci-svc-body {
	flex: 1;
	min-width: 0;
	padding: 118px 56px 44px;
	display: flex;
	flex-direction: column;
}

.agci-svc-title {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 27px;
	line-height: 1.25;
	letter-spacing: -0.5px;
	color: inherit;
}

.agci-svc-desc {
	margin: 18px 0 0;
	font-family: "Albert Sans", sans-serif;
	font-size: 15.5px;
	line-height: 1.65;
	font-weight: 500;
	max-width: 440px;
}

.agci-svc--dark .agci-svc-desc {
	color: rgba(255, 255, 255, 0.7);
}

.agci-svc--yellow .agci-svc-desc {
	color: rgba(1, 1, 1, 0.72);
}

.agci-svc--light .agci-svc-desc {
	color: rgba(1, 1, 1, 0.65);
}

/* Puces prestations */
.agci-svc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 40px;
}

.agci-svc-chip {
	display: inline-flex;
	align-items: center;
	font-family: "Albert Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: 100px;
	white-space: nowrap;
	text-decoration: none;
	color: inherit;
	border: 1px solid currentColor;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.agci-svc--dark .agci-svc-chip {
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.agci-svc--yellow .agci-svc-chip {
	border-color: rgba(1, 1, 1, 0.35);
	color: #010101;
}

.agci-svc--light .agci-svc-chip {
	border-color: rgba(1, 1, 1, 0.2);
	color: #010101;
}

.agci-svc--dark .agci-svc-chip:hover {
	background: #fff;
	color: #010101;
	border-color: #fff;
}

.agci-svc--yellow .agci-svc-chip:hover,
.agci-svc--light .agci-svc-chip:hover {
	background: #010101;
	color: #f3cc09;
	border-color: #010101;
}

/* Flèche révélée au survol de la puce */
.agci-svc-chip .chip-arr {
	width: 0;
	opacity: 0;
	margin-left: 0;
	overflow: hidden;
	display: inline-flex;
	transform: translateX(-5px);
	transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease,
		margin-left 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.agci-svc-chip:hover .chip-arr {
	width: 12px;
	opacity: 1;
	margin-left: 7px;
	transform: none;
}

.agci-svc-chip .chip-arr svg {
	width: 12px;
	height: 12px;
	transform: rotate(45deg);
}

/* Visuel (40% droite) */
.agci-svc-media {
	flex: none;
	width: 40%;
	position: relative;
}

.agci-svc-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.agci-svc-media-ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(140, 140, 138, 0.22);
	color: rgba(140, 140, 138, 0.9);
	font-family: "Albert Sans", sans-serif;
	font-size: 13px;
}

/* ---- Variante « rangées empilées » (page Services) ----------------------
   Mêmes cartes que le carrousel, en rangées pleine largeur alternées
   (visuel à droite puis à gauche, encoche miroir) + CTA « Découvrir … ». */
.agci-services--stack .agci-services-head {
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 64px;
}

.agci-services--stack .agci-services-title {
	max-width: none;
	font-size: 38px;
	letter-spacing: -1px;
}

.agci-services--stack .agci-services-sub {
	margin-left: auto;
	margin-right: auto;
	max-width: 480px;
	font-size: 15.5px;
}

.agci-services-stack {
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.agci-services--stack .agci-svc-card {
	width: 100%;
	min-height: 400px;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.agci-services--stack .agci-svc-card:hover {
	transform: translateY(-4px);
}

/* L'ombre en drop-shadow (pas box-shadow) : elle épouse le détourage,
   encoche comprise — sinon un halo rectangulaire trahirait la découpe. */
.agci-services--stack .agci-svc-clip {
	filter: drop-shadow(0 12px 15px rgba(1, 1, 1, 0.08));
	transition: filter 0.35s ease;
}

.agci-services--stack .agci-svc-card:hover .agci-svc-clip {
	filter: drop-shadow(0 20px 24px rgba(1, 1, 1, 0.12));
}

.agci-services--stack .agci-svc-body {
	padding: 118px 56px 48px;
	justify-content: center;
}

.agci-services--stack .agci-svc-title {
	font-size: 30px;
	letter-spacing: -0.6px;
}

.agci-services--stack .agci-svc-chips {
	margin-top: 28px;
	padding-top: 0;
}

.agci-services--stack .agci-svc-media {
	width: 42%;
	min-height: 340px;
}

/* Rangées paires en miroir : visuel à gauche, encoche (et masque) à droite */
.agci-services--stack .agci-svc-card:nth-child(even) .agci-svc-clip {
	flex-direction: row-reverse;
	border-radius: 20px 0 20px 20px;
	-webkit-mask:
		linear-gradient(#000 0 0) left 0 top 0 / calc(100% - var(--svc-notch-w) - var(--svc-notch-r)) 100% no-repeat,
		linear-gradient(#000 0 0) left 0 top calc(var(--svc-notch-h) + var(--svc-notch-r)) / 100% calc(100% - var(--svc-notch-h) - var(--svc-notch-r)) no-repeat,
		linear-gradient(#000 0 0) right var(--svc-notch-w) top var(--svc-notch-r) / var(--svc-notch-r) calc(100% - var(--svc-notch-r)) no-repeat,
		linear-gradient(#000 0 0) right var(--svc-notch-r) top var(--svc-notch-h) / calc(100% - var(--svc-notch-r)) var(--svc-notch-r) no-repeat,
		radial-gradient(circle at 0% 100%, #000 calc(var(--svc-notch-r) - 0.5px), rgba(0, 0, 0, 0) var(--svc-notch-r)) right var(--svc-notch-w) top 0 / var(--svc-notch-r) var(--svc-notch-r) no-repeat,
		radial-gradient(circle at 0% 100%, #000 calc(var(--svc-notch-r) - 0.5px), rgba(0, 0, 0, 0) var(--svc-notch-r)) right 0 top var(--svc-notch-h) / var(--svc-notch-r) var(--svc-notch-r) no-repeat,
		radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0) calc(var(--svc-notch-r) - 0.5px), #000 var(--svc-notch-r)) right calc(var(--svc-notch-w) - var(--svc-notch-r)) top calc(var(--svc-notch-h) - var(--svc-notch-r)) / var(--svc-notch-r) var(--svc-notch-r) no-repeat;
	mask:
		linear-gradient(#000 0 0) left 0 top 0 / calc(100% - var(--svc-notch-w) - var(--svc-notch-r)) 100% no-repeat,
		linear-gradient(#000 0 0) left 0 top calc(var(--svc-notch-h) + var(--svc-notch-r)) / 100% calc(100% - var(--svc-notch-h) - var(--svc-notch-r)) no-repeat,
		linear-gradient(#000 0 0) right var(--svc-notch-w) top var(--svc-notch-r) / var(--svc-notch-r) calc(100% - var(--svc-notch-r)) no-repeat,
		linear-gradient(#000 0 0) right var(--svc-notch-r) top var(--svc-notch-h) / calc(100% - var(--svc-notch-r)) var(--svc-notch-r) no-repeat,
		radial-gradient(circle at 0% 100%, #000 calc(var(--svc-notch-r) - 0.5px), rgba(0, 0, 0, 0) var(--svc-notch-r)) right var(--svc-notch-w) top 0 / var(--svc-notch-r) var(--svc-notch-r) no-repeat,
		radial-gradient(circle at 0% 100%, #000 calc(var(--svc-notch-r) - 0.5px), rgba(0, 0, 0, 0) var(--svc-notch-r)) right 0 top var(--svc-notch-h) / var(--svc-notch-r) var(--svc-notch-r) no-repeat,
		radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0) calc(var(--svc-notch-r) - 0.5px), #000 var(--svc-notch-r)) right calc(var(--svc-notch-w) - var(--svc-notch-r)) top calc(var(--svc-notch-h) - var(--svc-notch-r)) / var(--svc-notch-r) var(--svc-notch-r) no-repeat;
}

.agci-services--stack .agci-svc-card:nth-child(even) .agci-svc-notch {
	left: auto;
	right: 0;
}

/* CTA « Découvrir … » : libellé + pastille ronde à flèche */
.agci-svc-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 40px;
	align-self: flex-start;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	color: inherit;
}

/* Le reset Hello (a:hover) repeindrait le libellé : on fige par palette. */
.agci-svc--dark .agci-svc-cta,
.agci-svc--dark .agci-svc-cta:hover {
	color: #fff;
}

.agci-svc--yellow .agci-svc-cta,
.agci-svc--yellow .agci-svc-cta:hover,
.agci-svc--light .agci-svc-cta,
.agci-svc--light .agci-svc-cta:hover {
	color: #010101;
}

.agci-svc-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex: none;
}

.agci-svc--dark .agci-svc-cta-btn {
	background: #f3cc09;
	color: #010101;
}

.agci-svc--yellow .agci-svc-cta-btn,
.agci-svc--light .agci-svc-cta-btn {
	background: #010101;
	color: #f3cc09;
}

/* Le survol est le relais de flèche défini plus haut. */
.agci-svc-cta-btn svg {
	width: 15px;
	height: 15px;
	transform: rotate(45deg);
}

/* Responsive — rangées empilées : passage en colonne, visuel sous le texte */
@media ( max-width: 1024px ) {
	.agci-services-stack {
		padding: 0 24px;
	}
	.agci-services--stack .agci-svc-card {
		min-height: 0;
	}
	.agci-services--stack .agci-svc-clip,
	.agci-services--stack .agci-svc-card:nth-child(even) .agci-svc-clip {
		flex-direction: column;
	}
	.agci-services--stack .agci-svc-body {
		padding: 104px 32px 40px;
	}
	.agci-services--stack .agci-svc-media {
		width: 100%;
		min-height: 240px;
	}
}

@media ( max-width: 640px ) {
	.agci-services--stack .agci-services-head {
		margin-bottom: 44px;
	}
	.agci-services--stack .agci-services-title {
		font-size: 28px;
	}
	.agci-services--stack .agci-svc-body {
		padding: 88px 24px 36px;
	}
	.agci-services--stack .agci-svc-title {
		font-size: 24px;
	}
	.agci-services--stack .agci-svc-media {
		min-height: 200px;
	}
	.agci-svc-cta {
		margin-top: 32px;
	}
}

/* Responsive — commun aux deux dispositions : encoche réduite */
@media ( max-width: 800px ) {
	.agci-svc-card {
		--svc-notch-w: 96px;
		--svc-notch-h: 64px;
	}
	.agci-svc-num {
		font-size: 22px;
	}
}

/* Responsive — carrousel (accueil) : la carte passe en colonne, comme les
   autres sections de l'accueil, au lieu d'écraser texte et visuel côte à
   côte sur mobile. */
@media ( max-width: 800px ) {
	.agci-services {
		padding: 90px 0 80px;
	}
	.agci-services-head {
		padding: 0 24px;
		margin-bottom: 40px;
	}
	.agci-services--carousel .agci-services-viewport {
		padding-left: 24px;
	}
	.agci-services--carousel .agci-svc-card {
		width: min(480px, 84vw);
		min-height: 0;
	}
	.agci-services--carousel .agci-svc-clip {
		flex-direction: column;
	}
	.agci-services--carousel .agci-svc-body {
		padding: 88px 26px 34px;
	}
	.agci-services--carousel .agci-svc-title {
		font-size: 23px;
	}
	.agci-services--carousel .agci-svc-chips {
		padding-top: 28px;
	}
	.agci-services--carousel .agci-svc-media {
		width: 100%;
		min-height: 210px;
	}
	.agci-svc-btn {
		width: 48px;
		height: 48px;
	}
}

/* ------------------------------------------------------------------
   Prestations — sous-services (widget AGCI)
   ------------------------------------------------------------------
   Grille bento de cartes détaillées, utilisée sur les pages de service
   (Branding, Marketing Digital, Développement Web) pour développer les
   puces annoncées par le carrousel « Nos services ». Une carte peut
   passer en pleine largeur (--wide) : accroche et livrables se mettent
   alors sur deux colonnes, ce qui rythme la grille et évite l'orphelin
   quand le nombre de prestations est impair. */
/* Fond gris clair : les cartes blanches s'y détachent et la carte mise en
   avant (sombre ou jaune) tranche. Même place dans le rythme des pages de
   service que la grille « valeurs » de la page Agence. */
.agci-prest {
	padding: 110px 0 90px;
	background: #f4f4f2;
}

.agci-prest-inner {
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 40px;
}

.agci-prest-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 52px;
	flex-wrap: wrap;
}

.agci-prest-overline {
	display: block;
	font-family: "Albert Sans", sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: 0.45;
	margin-bottom: 14px;
	color: #010101;
}

.agci-prest-title {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 36px;
	line-height: 1.25;
	letter-spacing: -0.8px;
	color: #010101;
	max-width: 620px;
	text-wrap: balance;
}

.agci-prest-intro {
	margin: 0;
	max-width: 380px;
	font-family: "Albert Sans", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 500;
	color: rgba(1, 1, 1, 0.7);
}

.agci-prest-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.agci-prest-card {
	display: flex;
	flex-direction: column;
	padding: 38px 36px 34px;
	border-radius: 20px;
	border: 1px solid rgba(1, 1, 1, 0.1);
	background: #ffffff;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.agci-prest-card--wide {
	grid-column: 1 / -1;
}

.agci-prest-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px rgba(1, 1, 1, 0.09);
	border-color: rgba(1, 1, 1, 0.22);
}

/* Palettes */
.agci-prest--dark {
	background: #010101;
	border-color: #010101;
	color: #ffffff;
}

.agci-prest--dark:hover {
	border-color: #f3cc09;
	box-shadow: 0 18px 34px rgba(1, 1, 1, 0.22);
}

.agci-prest--yellow {
	background: #f3cc09;
	border-color: #f3cc09;
	color: #010101;
}

.agci-prest--yellow:hover {
	border-color: #010101;
	box-shadow: 0 18px 34px rgba(243, 204, 9, 0.35);
}

/* En-tête de carte : pastille numérotée + titre */
.agci-prest-card-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
}

.agci-prest-num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border-radius: 12px;
	background: #f3cc09;
	color: #010101;
	font-family: "Krona One", sans-serif;
	font-size: 16px;
	line-height: 1;
}

.agci-prest--yellow .agci-prest-num {
	background: #010101;
	color: #f3cc09;
}

.agci-prest-name {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.4px;
	color: inherit;
	text-wrap: balance;
}

.agci-prest-card--wide .agci-prest-name {
	font-size: 27px;
}

/* Corps : accroche + livrables (2 colonnes en pleine largeur) */
.agci-prest-body {
	flex: 1;
	min-width: 0;
}

.agci-prest-card--wide .agci-prest-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	align-items: start;
}

.agci-prest-desc {
	margin: 0;
	font-family: "Albert Sans", sans-serif;
	font-size: 15.5px;
	line-height: 1.65;
	font-weight: 500;
	color: rgba(1, 1, 1, 0.68);
}

.agci-prest--dark .agci-prest-desc {
	color: rgba(255, 255, 255, 0.7);
}

.agci-prest--yellow .agci-prest-desc {
	color: rgba(1, 1, 1, 0.75);
}

.agci-prest-list {
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Les livrables des blocs pleine largeur (le 1er et le 4e) tenaient sur une
   seule colonne dans la moitié droite de la carte : des libellés courts dans
   ~500px de large laissaient un grand vide à droite. Sur deux colonnes ils
   occupent la largeur disponible et la carte se resserre en hauteur.

   auto-fit plutôt qu'un nombre fixe : la liste repasse d'elle-même sur une
   colonne quand son conteneur descend sous ~430px, sans palier à écrire — et
   les deux blocs restent alignés puisqu'ils suivent la même règle. */
.agci-prest-card--wide .agci-prest-list {
	margin-top: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	column-gap: 26px;
	row-gap: 10px;
	align-content: start;
}

.agci-prest-list li {
	position: relative;
	padding-left: 20px;
	font-family: "Albert Sans", sans-serif;
	font-size: 14.5px;
	line-height: 1.5;
	font-weight: 600;
	color: inherit;
}

/* Puce carrée jaune — même vocabulaire que les dates du blog */
.agci-prest-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: #f3cc09;
}

.agci-prest--yellow .agci-prest-list li::before {
	background: #010101;
}

/* Lien de bas de carte : libellé + pastille ronde à flèche */
.agci-prest-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	align-self: flex-start;
	margin-top: 30px;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	text-decoration: none;
	color: inherit;
}

/* Le reset Hello (a:hover) repeindrait le libellé : on fige par palette. */
.agci-prest--light .agci-prest-cta,
.agci-prest--light .agci-prest-cta:hover,
.agci-prest--yellow .agci-prest-cta,
.agci-prest--yellow .agci-prest-cta:hover {
	color: #010101;
}

.agci-prest--dark .agci-prest-cta,
.agci-prest--dark .agci-prest-cta:hover {
	color: #ffffff;
}

.agci-prest-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	flex: none;
	background: #010101;
	color: #f3cc09;
}

.agci-prest--dark .agci-prest-cta-btn {
	background: #f3cc09;
	color: #010101;
}

.agci-prest--yellow .agci-prest-cta-btn {
	background: #010101;
	color: #f3cc09;
}

/* Le survol est le relais de flèche défini plus haut. */
.agci-prest-cta-btn svg {
	transform: rotate(45deg);
}

@media ( max-width: 900px ) {
	.agci-prest {
		padding: 80px 0 70px;
	}
	.agci-prest-title {
		font-size: 30px;
	}
	.agci-prest-grid {
		grid-template-columns: 1fr;
	}
	.agci-prest-card--wide .agci-prest-body {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.agci-prest-card--wide .agci-prest-list {
		margin-top: 22px;
	}
	.agci-prest-card--wide .agci-prest-name {
		font-size: 22px;
	}
}

@media ( max-width: 640px ) {
	.agci-prest-inner {
		padding: 0 24px;
	}
	.agci-prest-head {
		margin-bottom: 40px;
	}
	.agci-prest-title {
		font-size: 26px;
	}
	.agci-prest-card {
		padding: 30px 26px 28px;
	}
	.agci-prest-name,
	.agci-prest-card--wide .agci-prest-name {
		font-size: 20px;
	}
	.agci-prest-num {
		min-width: 38px;
		height: 38px;
		font-size: 14px;
	}
}

/* ------------------------------------------------------------------
   Page sous-service (widget AGCI) — méthode / livrables / confiance / FAQ
   ------------------------------------------------------------------
   Reprend la maquette « Stratégie Digitale » (desktop + mobile). Les deux
   animations au scroll (point de la frise, révélation mot à mot) vivent
   dans assets/js/agci-sous-service.js — le CSS ne grise jamais le texte
   de lui-même, pour rester lisible sans JS. */
.agci-ss-inner {
	max-width: 1140px;
	margin: 0 auto;
}

.agci-ss-overline {
	display: block;
	font-family: "Albert Sans", sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: 0.45;
	color: #010101;
}

.agci-ss-h2 {
	margin: 16px 0 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 1.2;
	letter-spacing: -1.5px;
	color: #010101;
}

.agci-ss-h2--center {
	font-size: 32px;
	letter-spacing: -1px;
	margin-top: 12px;
}

.agci-ss-hl {
	background: #f3cc09;
	padding: 0 10px;
	border-radius: 8px;
}

.agci-ss-center-head {
	text-align: center;
	margin-bottom: 44px;
}

/* ---- 1. Méthode : frise verticale ---- */
.agci-ss-meth {
	padding: 110px 40px 90px;
	background: #ffffff;
}

.agci-ss-meth-head {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: end;
	margin-bottom: 72px;
}

.agci-ss-meth-intro {
	margin: 0 0 6px;
	justify-self: end;
	max-width: 420px;
	font-family: "Albert Sans", sans-serif;
	font-size: 16px;
	line-height: 1.65;
	font-weight: 500;
	color: rgba(1, 1, 1, 0.7);
}

.agci-ss-frise {
	position: relative;
	margin-top: 8px;
}

.agci-ss-frise-line {
	position: absolute;
	left: 8px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: rgba(1, 1, 1, 0.1);
}

.agci-ss-frise-dot {
	position: absolute;
	left: -1px;
	top: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #f3cc09;
	box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(1, 1, 1, 0.08);
}

.agci-ss-step {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 56px;
	align-items: center;
	padding: 56px 0 56px 64px;
	border-bottom: 1px solid rgba(1, 1, 1, 0.08);
}

.agci-ss-step:last-of-type {
	border-bottom: none;
}

.agci-ss-step-title {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 29px;
	line-height: 1.2;
	letter-spacing: -1px;
	color: #010101;
}

.agci-ss-dot {
	color: #f3cc09;
}

.agci-ss-step-text {
	margin: 18px 0 0;
	max-width: 440px;
	font-family: "Albert Sans", sans-serif;
	font-size: 15.5px;
	line-height: 1.7;
	font-weight: 500;
	color: rgba(1, 1, 1, 0.7);
}

.agci-ss-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.agci-ss-chip {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 100px;
	border: 1px solid rgba(1, 1, 1, 0.18);
	font-family: "Albert Sans", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: #010101;
}

/* La maquette montre une illustration détourée sur fond sombre ; avec des
   photos, `cover` plein cadre rend mieux — le fond sombre reste le repli
   quand aucun visuel n'est renseigné. */
.agci-ss-step-illu {
	height: 250px;
	border-radius: 16px;
	overflow: hidden;
	background: #141414;
}

.agci-ss-step-illu img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Bandeau jaune « diagnostic offert » */
.agci-ss-cta {
	position: relative;
	overflow: hidden;
	margin-top: 72px;
	background: #f3cc09;
	color: #010101;
	border-radius: 12px;
	padding: 30px 40px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.agci-ss-cta-mark {
	position: absolute;
	top: 0;
	right: -8%;
	height: 100%;
	width: 60%;
	opacity: 0.1;
	pointer-events: none;
}

.agci-ss-cta-text {
	position: relative;
	margin: 0;
	flex: 1;
	min-width: 280px;
	font-family: "Albert Sans", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.agci-ss-cta-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	background: #010101;
	color: #f3cc09;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	padding: 14px 28px;
	border-radius: 100px;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.agci-ss-cta-btn:hover {
	transform: scale(1.04);
	color: #f3cc09;
}

/* ---- 2. Livrables : cartes qui s'empilent (sticky) ---- */
.agci-ss-deliv {
	padding: 90px 40px;
	background: #f4f4f2;
}

.agci-ss-stack {
	max-width: 820px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Chaque carte se colle un cran plus bas que la précédente : les suivantes
   viennent la recouvrir (elles sont après dans le DOM, donc au-dessus). */
.agci-ss-card {
	position: sticky;
	top: calc(110px + var(--agci-i) * 16px);
	background: #ffffff;
	border: 1px solid rgba(1, 1, 1, 0.08);
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(1, 1, 1, 0.06);
	padding: 52px 56px;
	min-height: 240px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.agci-ss-card-num {
	font-family: "Krona One", sans-serif;
	font-size: 13px;
	color: #c7a707;
	margin-bottom: 16px;
}

.agci-ss-card-title {
	font-family: "Krona One", sans-serif;
	font-size: 24px;
	letter-spacing: -0.5px;
	margin-bottom: 14px;
	color: #010101;
}

.agci-ss-card-text {
	margin: 0;
	max-width: 520px;
	font-family: "Albert Sans", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 500;
	color: rgba(1, 1, 1, 0.65);
}

/* ---- 3. Confiance : révélation mot à mot ---- */
.agci-ss-trust {
	padding: 0 40px 140px;
	background: #f4f4f2;
}

.agci-ss-trust-inner {
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}

.agci-ss-trust-text {
	margin: 30px 0 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 27px;
	line-height: 1.75;
	letter-spacing: -0.5px;
	color: #010101;
}

/* Le grisé n'existe que si le JS a découpé le texte en mots. */
.agci-ss-word {
	color: rgba(1, 1, 1, 0.14);
	transition: color 0.35s ease;
}

.agci-ss-word.is-on {
	color: #010101;
}

.agci-ss-trust-mark {
	display: block;
	margin: 56px auto 0;
}

/* ---- 4. FAQ ---- */
.agci-ss-faq {
	padding: 90px 40px;
	background: #ffffff;
}

.agci-ss-faq-inner {
	max-width: 760px;
	margin: 0 auto;
}

.agci-ss-faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.agci-ss-faq-item {
	background: #ffffff;
	border: 1px solid rgba(1, 1, 1, 0.08);
	border-radius: 12px;
	padding: 20px 26px;
}

.agci-ss-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 15.5px;
	color: #010101;
	list-style: none;
}

.agci-ss-faq-item summary::-webkit-details-marker {
	display: none;
}

/* Signe + qui bascule en − à l'ouverture */
.agci-ss-faq-sign {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #f3cc09;
}

.agci-ss-faq-sign::before,
.agci-ss-faq-sign::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 2px;
	margin: -1px 0 0 -5px;
	background: #010101;
	border-radius: 2px;
	transition: transform 0.25s ease;
}

.agci-ss-faq-sign::after {
	transform: rotate(90deg);
}

.agci-ss-faq-item[open] .agci-ss-faq-sign::after {
	transform: rotate(0deg);
}

.agci-ss-faq-item p {
	margin: 14px 0 0;
	font-family: "Albert Sans", sans-serif;
	font-size: 14.5px;
	line-height: 1.65;
	font-weight: 500;
	color: rgba(1, 1, 1, 0.7);
}

/* ---- Responsive (valeurs de la maquette mobile) ---- */
@media ( max-width: 900px ) {
	.agci-ss-meth {
		padding: 60px 24px 40px;
	}
	.agci-ss-meth-head {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-bottom: 24px;
	}
	.agci-ss-meth-intro {
		justify-self: start;
		max-width: none;
		font-size: 14.5px;
	}
	.agci-ss-h2 {
		font-size: 26px;
		letter-spacing: -0.8px;
		line-height: 1.3;
	}
	/* Plus de frise sur mobile : les temps s'enchaînent simplement. */
	.agci-ss-frise-line,
	.agci-ss-frise-dot {
		display: none;
	}
	.agci-ss-step {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 26px 0;
	}
	.agci-ss-step-title {
		font-size: 20px;
		letter-spacing: -0.5px;
	}
	.agci-ss-step-text {
		font-size: 13.5px;
		line-height: 1.65;
		max-width: none;
	}
	.agci-ss-chips {
		gap: 7px;
		margin-top: 16px;
	}
	.agci-ss-chip {
		padding: 7px 12px;
		font-size: 11.5px;
	}
	.agci-ss-step-illu {
		height: 190px;
		border-radius: 14px;
	}
	/* En colonne : sinon le texte se comprime en bande étroite à côté du
	   bouton, qui lui garde sa largeur (maquette mobile). */
	.agci-ss-cta {
		margin-top: 24px;
		border-radius: 14px;
		padding: 24px 22px;
		gap: 16px;
		flex-direction: column;
		align-items: flex-start;
	}
	.agci-ss-cta-mark {
		opacity: 0.09;
	}
	.agci-ss-cta-text {
		flex: none;
		width: 100%;
		min-width: 0;
		font-size: 15px;
		line-height: 1.5;
	}
	.agci-ss-cta-btn {
		font-size: 13.5px;
		padding: 13px 22px;
	}
	.agci-ss-deliv {
		padding: 56px 24px;
	}
	.agci-ss-center-head {
		margin-bottom: 26px;
	}
	.agci-ss-h2--center {
		font-size: 23px;
	}
	.agci-ss-card {
		top: calc(96px + var(--agci-i) * 12px);
		padding: 30px 24px;
		min-height: 0;
		border-radius: 16px;
	}
	.agci-ss-card-num {
		font-size: 12px;
		margin-bottom: 10px;
	}
	.agci-ss-card-title {
		font-size: 17px;
		margin-bottom: 8px;
	}
	.agci-ss-card-text {
		font-size: 13.5px;
	}
	.agci-ss-trust {
		padding: 0 26px 60px;
	}
	.agci-ss-trust-text {
		font-size: 17px;
		line-height: 1.85;
		letter-spacing: -0.3px;
		margin-top: 18px;
	}
	.agci-ss-trust-mark {
		width: 34px;
		height: 34px;
		margin-top: 34px;
	}
	.agci-ss-faq {
		padding: 56px 24px;
	}
	.agci-ss-faq-item {
		padding: 16px 18px;
	}
	.agci-ss-faq-item summary {
		font-size: 14px;
	}
	.agci-ss-faq-item p {
		font-size: 13px;
	}
}

/* ------------------------------------------------------------------
   Réalisations — grille bento (widget AGCI)
   ------------------------------------------------------------------ */
.agci-real {
	padding: 90px 40px;
	background: #f4f4f2;
}

.agci-real-inner {
	max-width: 1220px;
	margin: 0 auto;
}

.agci-real-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 48px;
	flex-wrap: wrap;
}

.agci-real-overline {
	display: block;
	font-family: "Albert Sans", sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: 0.45;
	margin-bottom: 14px;
}

.agci-real-title {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 34px;
	line-height: 1.2;
	color: #010101;
}

.agci-real-all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	flex: none;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

/* Survol : voir la section « CTA bulle » (partagée avec le blog). */

.agci-real-all-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #010101;
	flex: none;
}

.agci-real-all-btn svg {
	transform: rotate(45deg);
}

/* Grille : 1 grande carte + colonne empilée */
.agci-real-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.agci-real-stack {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
	height: 720px;
}

/* Carte */
.agci-real-card {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	background: #e7e7e4;
}

.agci-real-card--big {
	height: 720px;
}

.agci-real-img {
	position: absolute;
	inset: 0;
	/* !important : bat le reset Elementor « .elementor img { height:auto } »
	   qui, plus spécifique, laissait l'image à son ratio (gris en bas). */
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.agci-real-card:hover .agci-real-img {
	transform: scale(1.04);
}

.agci-real-ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(140, 140, 138, 0.18);
	color: rgba(140, 140, 138, 0.9);
	font-family: "Albert Sans", sans-serif;
	font-size: 13px;
}

.agci-real-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(1, 1, 1, 0.1) 0%, rgba(1, 1, 1, 0) 30%, rgba(1, 1, 1, 0.5) 100%);
	pointer-events: none;
}

.agci-real-brand {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: "Krona One", sans-serif;
	font-size: 19px;
	letter-spacing: 0.5px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.agci-real-card--big .agci-real-brand {
	font-size: 24px;
	letter-spacing: 1px;
}

.agci-real-metric {
	position: absolute;
	left: 20px;
	top: 14px;
	background: rgba(1, 1, 1, 0.75);
	color: #fff;
	font-family: "Albert Sans", sans-serif;
	font-size: 12px;
	font-weight: 800;
	padding: 6px 12px;
	border-radius: 100px;
	pointer-events: none;
}

.agci-real-card--big .agci-real-metric {
	top: 16px;
	font-size: 12.5px;
	padding: 7px 14px;
}

.agci-real-label {
	position: absolute;
	left: 20px;
	bottom: 14px;
	background: #f3cc09;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 100px;
	pointer-events: none;
}

.agci-real-card--big .agci-real-label {
	bottom: 16px;
}

.agci-real-arrow {
	position: absolute;
	right: 16px;
	bottom: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #010101;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.agci-real-card--big .agci-real-arrow {
	bottom: 14px;
}

/* Responsive : une colonne, hauteurs auto */
@media ( max-width: 800px ) {
	.agci-real-grid {
		grid-template-columns: 1fr;
	}
	.agci-real-card--big,
	.agci-real-stack {
		height: auto;
	}
	.agci-real-stack {
		grid-template-rows: auto;
	}
	.agci-real-card {
		aspect-ratio: 16 / 11;
	}
}

/* ------------------------------------------------------------------
   Témoignages — 3 cartes de citation + mur de logos (widget AGCI)
   ------------------------------------------------------------------ */
.agci-testi {
	padding: 100px 40px 80px;
	background: #fff;
}

.agci-testi-inner {
	max-width: 1220px;
	margin: 0 auto;
}

.agci-testi-head {
	text-align: center;
	margin-bottom: 52px;
}

.agci-testi-overline {
	display: block;
	font-family: "Albert Sans", sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: 0.45;
	margin-bottom: 14px;
}

.agci-testi-title {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 34px;
	line-height: 1.2;
	color: #010101;
}

.agci-testi-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
}

.agci-testi-card {
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	padding: 32px 30px;
	background: #fff;
	border: 1px solid rgba(1, 1, 1, 0.1);
	color: #010101;
}

.agci-testi-card--yellow {
	background: #f3cc09;
	border-color: #f3cc09;
}

.agci-testi-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.agci-testi-quote {
	font-family: "Krona One", sans-serif;
	font-size: 34px;
	line-height: 1;
}

/* Le libellé était à opacity .5 avec une flèche d'une autre couleur : deux
   gris différents côte à côte, illisibles, et sur la carte jaune la flèche
   blanche disparaissait carrément. Une seule couleur, assez contrastée pour
   se lire, et la flèche suit le texte. */
.agci-testi-case {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	font-family: "Albert Sans", sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.2px;
	color: rgba(1, 1, 1, 0.62);
	text-decoration: none;
	margin-top: 2px;
	transition: color 0.2s ease;
}

.agci-testi-case:hover,
.agci-testi-case:focus-visible {
	color: #010101;
}

.agci-testi-case svg {
	flex: none;
	color: inherit;
	transform: rotate(45deg);
}

/* Relais de flèche (voir la section en tête de fichier) : la flèche en place
   sort par la droite, la remplaçante entre par la gauche. */
.agci-testi-case::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	background-color: currentColor;
	-webkit-mask: var(--agci-fleche) no-repeat center / contain;
	mask: var(--agci-fleche) no-repeat center / contain;
	opacity: 0;
	transform: translateX(-16px) rotate(45deg);
}

.agci-testi-case svg,
.agci-testi-case::after {
	transition:
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.agci-testi-case:hover svg,
.agci-testi-case:focus-visible svg {
	opacity: 0;
	transform: translateX(16px) rotate(45deg);
}

.agci-testi-case:hover::after,
.agci-testi-case:focus-visible::after {
	opacity: 1;
	transform: translateX(0) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
	.agci-testi-case svg,
	.agci-testi-case::after {
		transition: none;
	}
}

.agci-testi-text {
	margin: 0 0 28px;
	font-family: "Albert Sans", sans-serif;
	font-size: 15px;
	line-height: 1.65;
	font-weight: 600;
	flex: 1;
}

.agci-testi-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	border-top: 1px solid rgba(1, 1, 1, 0.12);
	padding-top: 20px;
}

.agci-testi-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: hidden;
	flex: none;
	background: rgba(1, 1, 1, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Krona One", sans-serif;
	font-size: 15px;
	color: #010101;
}

.agci-testi-card--yellow .agci-testi-avatar {
	background: rgba(1, 1, 1, 0.12);
}

.agci-testi-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.agci-testi-author {
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	font-size: 14px;
}

.agci-testi-role {
	font-family: "Albert Sans", sans-serif;
	font-size: 12px;
	opacity: 0.65;
	font-weight: 500;
}

/* Mur de logos */
.agci-testi-logos {
	max-width: 1220px;
	margin: 80px auto 0;
	padding-top: 56px;
	border-top: 1px solid rgba(1, 1, 1, 0.08);
}

.agci-testi-logos-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 32px 24px;
	align-items: center;
}

.agci-testi-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	opacity: 0.4;
}

.agci-testi-logo-sq {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: #010101;
	display: inline-block;
	flex: none;
}

.agci-testi-logo-name {
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	color: #010101;
}

@media ( max-width: 900px ) {
	.agci-testi-grid {
		grid-template-columns: 1fr;
	}
	.agci-testi-logos-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ------------------------------------------------------------------
   Blog & actualités (widget AGCI — vedette + liste)
   ------------------------------------------------------------------ */
.agci-blog {
	padding: 40px 40px 100px;
	background: #fff;
}

.agci-blog-inner {
	max-width: 1220px;
	margin: 0 auto;
}

.agci-blog-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 48px;
	flex-wrap: wrap;
}

.agci-blog-overline {
	display: block;
	font-family: "Albert Sans", sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: 0.45;
	margin-bottom: 14px;
}

.agci-blog-title {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 34px;
	line-height: 1.2;
	color: #010101;
}

.agci-blog-all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	flex: none;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

/* Survol : voir la section « CTA bulle » (partagée avec les réalisations). */

.agci-blog-all-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #010101;
	flex: none;
}

.agci-blog-all-btn svg {
	transform: rotate(45deg);
}

/* Grille 2 colonnes */
.agci-blog-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.agci-blog-img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.agci-blog-ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(140, 140, 138, 0.18);
	color: rgba(140, 140, 138, 0.9);
	font-family: "Albert Sans", sans-serif;
	font-size: 13px;
}

/* Article vedette */
.agci-blog-featured {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: #010101;
}

.agci-blog-featured-media {
	position: relative;
	height: 310px;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 22px;
	background: #e7e7e4;
}

.agci-blog-featured:hover .agci-blog-img {
	transform: scale(1.04);
}

.agci-blog-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: #010101;
	color: #f3cc09;
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 7px 13px;
	border-radius: 100px;
	pointer-events: none;
}

.agci-blog-featured-date {
	font-family: "Albert Sans", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	opacity: 0.45;
	margin-bottom: 12px;
}

.agci-blog-featured-title {
	margin: 0 0 12px;
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	font-size: 23px;
	line-height: 1.3;
	letter-spacing: -0.3px;
}

.agci-blog-featured-excerpt {
	margin: 0 0 16px;
	font-family: "Albert Sans", sans-serif;
	font-size: 14.5px;
	line-height: 1.6;
	opacity: 0.65;
}

.agci-blog-more {
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Liste d'articles */
.agci-blog-list {
	display: flex;
	flex-direction: column;
}

.agci-blog-post {
	display: flex;
	gap: 20px;
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid rgba(1, 1, 1, 0.1);
	text-decoration: none;
	color: #010101;
}

.agci-blog-post:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.agci-blog-post-thumb {
	position: relative;
	width: 124px;
	height: 100px;
	border-radius: 12px;
	overflow: hidden;
	flex: none;
	background: #e7e7e4;
}

.agci-blog-post:hover .agci-blog-post-thumb .agci-blog-img {
	transform: scale(1.05);
}

.agci-blog-post-body {
	flex: 1;
}

.agci-blog-post-date {
	font-family: "Albert Sans", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	opacity: 0.45;
	margin-bottom: 7px;
}

.agci-blog-post-title {
	margin: 0 0 7px;
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	font-size: 15.5px;
	line-height: 1.35;
}

.agci-blog-post-excerpt {
	margin: 0;
	font-family: "Albert Sans", sans-serif;
	font-size: 13px;
	line-height: 1.55;
	opacity: 0.6;
}

/* Le passage en colonne unique se faisait à 800px : entre 800 et 1000, les
   deux colonnes de la grille tombaient à ~380px, dont 124 pris par la
   vignette et 20 par la gouttière — il ne restait que ~236px pour le titre et
   l'accroche, qui s'y cassaient sur cinq ou six lignes. Empilés, l'article à
   la une et les trois brèves retrouvent toute la largeur. */
@media ( max-width: 1000px ) {
	.agci-blog-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

/* Newsletter — pas de marges internes parasites sur les <p> (centrage net) */
.elementor-element-ftnewp01 p,
.elementor-element-ftnewt01 .elementor-widget-text-editor p {
	margin: 0;
}

/* Colonnes de liens du footer en Icon List — masque seulement les
   emplacements d'icône VIDES (garde la flèche « Retour en haut »). */
.elementor-location-footer .elementor-icon-list-icon:empty {
	display: none;
}
.elementor-location-footer .elementor-icon-list-item > a {
	transition: color 0.2s ease;
}

/* Barre légale (ftlegal1) en Icon List horizontale */
.elementor-element-ftlegal1 .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	justify-content: flex-end;
}
.elementor-element-ftlegal1 .elementor-icon-list-item {
	margin: 0 !important;
}

/* « Retour en haut » : texte bold blanc + flèche (se démarque des liens légaux) */
.elementor-element-ftlegal1 .elementor-icon-list-item a[href$="#top"] .elementor-icon-list-text {
	color: #fff;
	font-weight: 700;
}
.elementor-element-ftlegal1 .elementor-icon-list-item a[href$="#top"]:hover .elementor-icon-list-text {
	color: #f3cc09;
}
/* Flèche APRÈS le texte */
.elementor-element-ftlegal1 .elementor-icon-list-item a[href$="#top"] .elementor-icon-list-icon {
	order: 2;
	margin-left: 7px;
	margin-right: 0;
}

/* Liens légaux (barre du bas) */
.agci-flegal {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	flex-wrap: wrap;
}

.agci-flegal a {
	color: rgba(255, 255, 255, 0.5);
	font-family: "Albert Sans", sans-serif;
	font-weight: 500;
	font-size: 12px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.agci-flegal a:hover {
	color: #f3cc09;
}

/* Lien « Retour en haut » (fin de la barre légale) */
.agci-flegal a.agci-totop {
	color: #fff;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.agci-flegal a.agci-totop:hover {
	color: #f3cc09;
}

.agci-totop-arr {
	color: #f3cc09;
	font-weight: 700;
	line-height: 1;
}

/* Le motif AGCI du footer est désormais un widget Image d'Elementor
   (id « ftmotif1 »), éditable dans l'éditeur (position, taille, opacité). */

/* Champ e-mail newsletter en pilule, aligné sur le bouton */
.elementor-element-ftform01 input[type="email"] {
	border-radius: 100px !important;
	padding: 0 22px !important;
	min-height: 48px;
}

.elementor-element-ftform01 .elementor-button {
	min-height: 48px;
}

/* Bouton « S'inscrire » : le reset Hello (button:hover → texte blanc) le
   faisait blanchir au survol ; on réaffirme le noir. Le relais de flèche vient
   de la classe utilitaire .agci-btn-fleche posée sur le widget — flèche en
   place au repos et libellé fixe, comme les autres boutons du site. */
.elementor-element-ftform01 .elementor-button:hover,
.elementor-element-ftform01 .elementor-button:focus {
	color: #010101;
}

/* Newsletter : titre au-dessus, champ + bouton côte à côte sur toute la
   largeur. Le bascule doit intervenir dès 1100px — en dessous, le bloc n'a
   plus la place de tenir sur une ligne et le bouton (largeur fixe, libellé
   insécable) débordait du footer, ce qui faisait défiler la page entière.
   Les !important sont nécessaires : le CSS de page d'Elementor est plus
   spécifique (.elementor-19 .elementor-element.elementor-element-ftform01…). */
@media ( max-width: 1100px ) {
	.elementor-element-ftnews01 {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 14px;
	}

	.elementor-location-footer .elementor-element-ftform01 {
		width: 100% !important;
	}

	.elementor-element-ftform01 .elementor-form-fields-wrapper {
		flex-wrap: nowrap !important;
		gap: 8px;
	}

	.elementor-element-ftform01 .elementor-field-group {
		width: auto !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		padding: 0 !important;
	}

	.elementor-element-ftform01 .elementor-field-group.elementor-field-type-submit {
		flex: 0 0 auto !important;
	}

	.elementor-element-ftform01 input[type="email"] {
		width: 100% !important;
	}

	.elementor-element-ftform01 .elementor-button {
		white-space: nowrap;
	}
}

/* =========================================================================
   Navigation adaptative au scroll (header Theme Builder, post 16)
   -------------------------------------------------------------------------
   - En haut de page : la barre flotte, fond transparent, sans ombre.
   - Dès qu'on défile (classe .agci-header-scrolled ajoutée par le JS) : la
     barre se fige, gagne un fond blanc + une ombre douce et se compacte
     (padding réduit, logo légèrement plus petit).
   Repli sans JS : la barre reste dans le flux normal (fond blanc Elementor).
   ========================================================================= */

/* La barre suit le scroll. On isole le contexte d'empilement pour rester
   au-dessus du hero (herorow1 est en z-index:2). */
.elementor-location-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Le conteneur visible de la barre (agcihd01).
   - En haut de page : pleine largeur, fond transparent, sans arrondi (la barre
     est étalée : logo à gauche, menu, bouton à droite).
   - Au scroll : se transforme en pilule flottante compacte (voir plus bas).

   Pas de transition entre les deux états, et c'est délibéré : la largeur
   compacte est un « fit-content », qui n'est pas animable et bascule donc en
   une image. Faire fondre le fond et l'ombre sur 0,35 s pendant que la
   géométrie saute laissait le menu et le bouton flotter sans pilule derrière
   eux pendant un tiers de seconde — sur un hero sombre, du texte noir sur
   noir. La pilule compacte se pose maintenant d'un coup, et c'est son
   arrivée qui est animée (voir agciHeaderIn plus bas). */
.elementor-location-header .elementor-element-agcihd01 {
	background-color: transparent !important;
	box-shadow: 0 0 0 0 rgba(1, 1, 1, 0);
	border-radius: 0;
	/* Comme la maquette : le contenu (logo · menu · bouton) est regroupé sur
	   ~1400 px centrés au lieu d'être étalé sur toute la largeur de l'écran.
	   L'état compact au scroll reprend la main plus bas (fit-content). */
	max-width: 1400px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Le logo suit la bascule de la barre : sans ça il continuerait de rétrécir
   pendant que la pilule est déjà en place. */

/* --- État défilé : pilule flottante compacte, centrée -------------------
   La barre ne fait plus que la largeur de son contenu, se détache du haut et
   flotte au-dessus de la page (arrondi complet + ombre portée). */
.agci-header-scrolled .elementor-element-agcihd01 {
	width: -moz-fit-content !important;
	width: fit-content !important;
	max-width: calc(100% - 32px) !important;
	margin: 14px auto 0 !important;
	border-radius: 100px !important;
	background-color: #ffffff !important;
	box-shadow: 0 12px 34px rgba(1, 1, 1, 0.13);
	/* Padding compact : plus serré à droite (le bouton jaune porte son propre
	   rembourrage), plus d'air à gauche pour le logo. */
	--padding-top: 8px !important;
	--padding-bottom: 8px !important;
	--padding-left: 24px !important;
	--padding-right: 8px !important;
	/* Items resserrés (logo · menu · bouton). */
	--gap: 8px 24px !important;
	--column-gap: 24px !important;
	--row-gap: 8px !important;
	/* La pilule arrive par le haut, déjà peinte — comme la maquette. */
	animation: agciHeaderIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes agciHeaderIn {
	from {
		transform: translateY(-130%);
		opacity: 0.3;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.agci-header-scrolled .elementor-element-agcihd01 {
		animation: none;
	}
}

.agci-header-scrolled .elementor-element-agcihd02 img {
	width: 44px !important;
}

/* Menu mobile ouvert (burger) : garder un fond opaque même en haut de page,
   sinon le panneau déroulant flotterait sur du transparent. */
.elementor-location-header .elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu--dropdown,
.agci-header-menu-open .elementor-element-agcihd01 {
	background-color: #ffffff !important;
}

/* =========================================================================
   MÉGA-MENU SERVICES
   -------------------------------------------------------------------------
   Le menu WP porte l'arborescence complète (Services > 3 services > 12
   sous-services). Elle sert deux rendus :
   - mobile, le tiroir en cascade construit par agci-widgets.js à partir de
     ce DOM — les <ul> imbriqués doivent donc rester dans la page ;
   - desktop, le panneau injecté par inc/mega-menu.php dans le <li>.
   D'où le display:none sur les sous-menus natifs plutôt qu'un retrait.

   Le panneau montre les trois colonnes dépliées : sa hauteur ne dépend pas
   de ce qu'on survole, et les douze sous-services sont atteignables d'un
   seul geste. Placement en position: fixed centré sur la fenêtre (le JS cale
   le bord haut sous la barre, qui se compacte au scroll) ; sans JS, repli en
   absolu sous l'entrée de menu.
   ========================================================================= */

.elementor-location-header .elementor-nav-menu ul:not(.agci-mega-links),
.elementor-location-header .elementor-nav-menu .sub-arrow {
	display: none !important;
}

.elementor-nav-menu--main .agci-has-mega {
	position: relative;
}

.elementor-nav-menu--main .agci-has-mega > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.agci-mega-chevron {
	flex: none;
	transition: transform 0.25s ease;
}

.elementor-nav-menu--main .agci-has-mega.is-open .agci-mega-chevron,
.elementor-nav-menu--main .agci-has-mega:not(.agci-mega-js):hover .agci-mega-chevron,
.elementor-nav-menu--main .agci-has-mega:not(.agci-mega-js):focus-within .agci-mega-chevron {
	transform: rotate(180deg);
}

/* ---- Le panneau ---- */
.agci-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 120;
	width: min(1120px, calc(100vw - 40px));
	padding-top: 14px;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(8px);
	transition:
		opacity 0.22s ease,
		transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0.22s;
}

/* Placement piloté : centré sur la fenêtre, calé sous la barre. */
.agci-mega-js .agci-mega {
	position: fixed;
	top: var(--agci-mega-top, 92px);
}

.elementor-nav-menu--main .agci-has-mega.is-open .agci-mega,
.elementor-nav-menu--main .agci-has-mega:not(.agci-mega-js):hover .agci-mega,
.elementor-nav-menu--main .agci-has-mega:not(.agci-mega-js):focus-within .agci-mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition-delay: 0s;
}

.agci-mega-inner {
	background: #ffffff;
	border: 1px solid rgba(1, 1, 1, 0.07);
	border-radius: 22px;
	box-shadow: 0 34px 90px rgba(1, 1, 1, 0.22);
	overflow: hidden;
}

.agci-mega-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	padding: 8px 10px 14px;
}

.agci-mega-col {
	padding: 18px 22px 6px;
	min-width: 0;
}

/* ---- En-tête de colonne : le service lui-même ---- */
.agci-mega-head {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 8px 10px;
	margin: 0 -10px 6px;
	border-radius: 14px;
	text-decoration: none;
	transition: background-color 0.22s ease;
}

.agci-mega-head:hover,
.agci-mega-head:focus-visible {
	background: #f4f4f2;
}

.agci-mega-head-img {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	overflow: hidden;
	background: #f4f4f2;
}

.agci-mega-head-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.agci-mega-head-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Le reset Hello (a:hover) repeindrait les flèches, qui suivent currentColor. */
.agci-mega-head-title,
.agci-mega-head:hover .agci-mega-head-title {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 14.5px;
	line-height: 1.25;
	color: #010101;
}

.agci-mega-head-desc {
	font-family: "Albert Sans", sans-serif;
	font-weight: 500;
	/* 12 px à 45 % d'opacité : sous le seuil de lisibilité confortable. */
	font-size: 13.5px;
	line-height: 1.4;
	color: rgba(1, 1, 1, 0.62);
}

/* ---- Les sous-services ----
   Reset forcé : SmartMenus, qui pilote le menu Elementor, traite tout <ul>
   descendant comme un sous-menu déroulant — replié et sorti du flux
   (.sm ul { display: none; position: absolute }). Sans ça la colonne reste
   haute de zéro et les liens flottent sous le panneau. */
.agci-mega-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex !important;
	position: static !important;
	flex-direction: column;
	width: auto !important;
	min-width: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.agci-mega-links li {
	display: block;
	position: relative;
}

.agci-mega-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 10px 10px 12px;
	margin: 0 -10px 0 -12px;
	border-radius: 12px;
	font-family: "Albert Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.agci-mega-link,
.agci-mega-link:hover {
	color: rgba(1, 1, 1, 0.78);
}

/* Survol et page courante : la pastille claire suffit, rien ne se décale. */
.agci-mega-link:hover,
.agci-mega-link:focus-visible,
.agci-mega-link.is-current {
	background: #f4f4f2;
	color: #010101;
}

.agci-mega-head.is-current {
	background: #f4f4f2;
}

/* La flèche signature « surgit » : elle arrive de la gauche en rebondissant. */
.agci-mega .agci-mega-arr {
	flex: none;
	color: #010101;
	opacity: 0;
	transform: translateX(-6px) scale(0.5) rotate(45deg);
	transition:
		opacity 0.2s ease,
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.agci-mega-head:hover .agci-mega-arr,
.agci-mega-head:focus-visible .agci-mega-arr,
.agci-mega-link:hover .agci-mega-arr,
.agci-mega-link:focus-visible .agci-mega-arr,
.agci-mega-foot:hover .agci-mega-arr,
.agci-mega-foot:focus-visible .agci-mega-arr {
	opacity: 1;
	transform: translateX(0) scale(1) rotate(45deg);
}

/* ---- Pied : accroche + CTA ----
   Le bandeau portait une phrase unique et un CTA en simple texte jaune, qui
   ne se lisait pas comme un bouton. Désormais : marqueur ✦, titre + sous-titre
   hiérarchisés, et un vrai bouton pilule — le langage de CTA du reste du site. */
.agci-mega-foot {
	display: flex;
	align-items: center;
	gap: 18px;
	background: #010101;
	padding: 18px 32px;
	text-decoration: none;
	/* Filet jaune : détache le bandeau du panneau blanc au-dessus. */
	border-top: 2px solid #f3cc09;
	transition: background-color 0.22s ease;
}

.agci-mega-foot:hover {
	background: #161616;
}

/* Marqueur ✦ : reprend le séparateur des bandeaux défilants du site. */
.agci-mega-foot-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: rgba(243, 204, 9, 0.14);
	color: #f3cc09;
	font-size: 15px;
	line-height: 1;
}

.agci-mega-foot-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* Pousse le bouton à droite sans justify-content, qui écarterait aussi
	   le marqueur du texte. */
	margin-right: auto;
}

.agci-mega-foot-title {
	font-family: "Albert Sans", sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: #ffffff;
}

.agci-mega-foot-sub {
	font-family: "Albert Sans", sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.6);
}

/* Vrai bouton, pas un lien texte. */
.agci-mega-foot .agci-mega-foot-cta,
.agci-mega-foot:hover .agci-mega-foot-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
	padding: 12px 22px;
	border-radius: 100px;
	background: #f3cc09;
	font-family: "Albert Sans", sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #010101;
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.agci-mega-foot:hover .agci-mega-foot-cta,
.agci-mega-foot:focus-visible .agci-mega-foot-cta {
	transform: scale(1.04);
}

/* La flèche vit sur le bouton jaune : elle passe en noir. */
.agci-mega-foot .agci-mega-arr {
	color: #010101;
}

/* ...et elle est présente au repos, avec le relais de survol des pastilles
   « Découvrir … ». Le CTA du pied est un bouton, pas un lien de menu : il
   héritait de la règle « la flèche surgit au survol » écrite pour les liens du
   panneau, qui la laissait invisible tant qu'on ne le survolait pas.

   Le relais : la flèche en place file vers la droite — la direction qu'elle
   pointe, étant tournée de 45° — pendant qu'une seconde entre par la gauche.
   La remplaçante est un pseudo-élément masqué par --agci-fleche et peint en
   currentColor ; elle vit sur un span, une <svg> ne pouvant pas porter de
   ::after. Le débordement est masqué par la boîte de 14px. */
.agci-mega .agci-mega-cta-arr {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	flex: none;
	overflow: hidden;
}

.agci-mega .agci-mega-cta-arr .agci-mega-arr {
	opacity: 1;
	transform: translateX(0) rotate(45deg);
}

.agci-mega .agci-mega-cta-arr::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	background-color: currentColor;
	-webkit-mask: var(--agci-fleche) no-repeat center / contain;
	mask: var(--agci-fleche) no-repeat center / contain;
	opacity: 0;
	transform: translateX(-18px) rotate(45deg);
}

.agci-mega .agci-mega-cta-arr .agci-mega-arr,
.agci-mega .agci-mega-cta-arr::after {
	transition:
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Spécificité : la règle générique « au survol, la flèche du panneau
   apparaît » (.agci-mega-foot:hover .agci-mega-arr) doit être battue, sinon
   elle rallumerait la titulaire au moment où elle s'échappe. */
.agci-mega-foot:hover .agci-mega-cta-arr .agci-mega-arr,
.agci-mega-foot:focus-visible .agci-mega-cta-arr .agci-mega-arr {
	opacity: 0;
	transform: translateX(18px) rotate(45deg);
}

.agci-mega-foot:hover .agci-mega-cta-arr::after,
.agci-mega-foot:focus-visible .agci-mega-cta-arr::after {
	opacity: 1;
	transform: translateX(0) rotate(45deg);
}

@media ( prefers-reduced-motion: reduce ) {
	.agci-mega .agci-mega-cta-arr .agci-mega-arr,
	.agci-mega .agci-mega-cta-arr::after {
		transition: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.agci-mega-foot .agci-mega-foot-cta {
		transition: none;
	}
}

/* Entrée décalée d'une colonne à l'autre : le panneau se déplie de gauche à
   droite au lieu d'apparaître d'un bloc. */
.elementor-nav-menu--main .agci-has-mega.is-open .agci-mega-col,
.elementor-nav-menu--main .agci-has-mega:not(.agci-mega-js):hover .agci-mega-col {
	animation: agciMegaCol 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--agci-mega-i, 0) * 60ms);
}

@keyframes agciMegaCol {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Sous 1024 px Elementor bascule sur le burger : c'est le tiroir mobile qui
   prend le relais, le panneau n'a plus lieu d'être. */
@media ( max-width: 1024px ) {
	.agci-mega,
	.agci-mega-chevron {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.agci-mega,
	.agci-mega .agci-mega-arr {
		transition: none;
	}

	.elementor-nav-menu--main .agci-has-mega.is-open .agci-mega-col {
		animation: none;
	}
}
/* =========================================================================
   PAGE AGENCE (post 91)
   ========================================================================= */

/* Les heros des pages Agence (91) et Services (144) sont sombres : la barre
   transparente à texte sombre serait illisible. On force la pilule blanche
   dès le haut de page (au scroll, l'état compact reprend la main via
   .agci-header-scrolled). */
body.page-id-91 .elementor-location-header .elementor-element-agcihd01,
body.page-id-144 .elementor-location-header .elementor-element-agcihd01,
body.parent-pageid-146 .elementor-location-header .elementor-element-agcihd01,
body.parent-pageid-149 .elementor-location-header .elementor-element-agcihd01,
body.parent-pageid-150 .elementor-location-header .elementor-element-agcihd01 {
	background-color: #ffffff !important;
	border-radius: 22px !important;
}

/* Pas d'ombre portée sous la barre en haut de page : le contraste de la
   pilule blanche sur le hero sombre suffit à la détacher. L'ombre du
   défilement (.agci-header-scrolled) reste, elle, commune à tout le site. */

/* Sur-titre générique (Valeurs / Histoire / Méthode) */
.agci-overline .elementor-heading-title {
	font-family: "Albert Sans", sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: 0.45;
}

/* ---- Hero -------------------------------------------------------------- */
.agci-hero {
	background: #010101;
}

.agci-hero-badge .elementor-heading-title {
	display: inline-block;
	background: #f3cc09;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 9px 18px;
	border-radius: 100px;
	transform: rotate(-2deg);
}

.agci-hero-h1 .elementor-heading-title {
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 64px;
	line-height: 1.15;
	color: #fff;
	text-wrap: balance;
}

.agci-hero-h1 .hl {
	background: #f3cc09;
	color: #010101;
	padding: 0 16px;
	border-radius: 12px;
	display: inline-block;
	transform: rotate(-1.5deg);
}

.agci-hero-p .elementor-heading-title {
	color: rgba(255, 255, 255, 0.65);
	font-family: "Albert Sans", sans-serif;
	font-size: 18px;
	line-height: 1.65;
	font-weight: 500;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

/* Boutons du hero — styles communs sur les classes WIDGET (les classes de
   container comme .agci-hero-btns ne sont pas émises par Elementor ici). */
.agci-hero-btn1 .elementor-button,
.agci-hero-btn2 .elementor-button {
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
	padding: 16px 30px;
	border-radius: 100px;
	transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.agci-hero-btn1 .elementor-button {
	background: #f3cc09;
	color: #010101;
	box-shadow: 0 10px 26px rgba(243, 204, 9, 0.35);
}

.agci-hero-btn1 .elementor-button:hover {
	transform: scale(1.05);
	background: #f3cc09;
	color: #010101;
}

/* Hero JAUNE (pages catégorie) : le bouton et la note Google sont calibrés
   pour les heros sombres de Services et des sous-services. Tels quels sur du
   jaune, le bouton jaune et les étoiles jaunes disparaissent, et le libellé
   blanc de la note devient illisible. On inverse la charte : bouton noir à
   texte jaune, note en noir. La déclinaison sombre (.agci-services-hero)
   garde la sienne, d'où le :not(). */
.agci-blog-hero:not( .agci-services-hero ) .agci-hero-btn1 .elementor-button,
.agci-blog-hero:not( .agci-services-hero ) .agci-hero-btn1 .elementor-button:hover {
	background: #010101;
	color: #f3cc09;
	box-shadow: 0 10px 26px rgba(1, 1, 1, 0.22);
}

.agci-blog-hero:not( .agci-services-hero ) .agci-hero-stars .st,
.agci-blog-hero:not( .agci-services-hero ) .agci-hero-stars .sc {
	color: #010101;
}

.agci-blog-hero:not( .agci-services-hero ) .agci-hero-stars .st .sto {
	color: rgba(1, 1, 1, 0.25);
}

.agci-blog-hero:not( .agci-services-hero ) .agci-hero-stars .sn {
	color: rgba(1, 1, 1, 0.55);
}

.agci-hero-btn2 .elementor-button {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.agci-hero-btn2 .elementor-button:hover {
	border-color: #f3cc09;
	color: #f3cc09;
}

/* ---- Marquee (bande jaune inclinée, Icon List) -------------------------
   Le fond/padding sont posés en inline (réglages Elementor) sur le container ;
   ici on gère l'inclinaison, le débord et l'animation via la classe d'id. */
.elementor-element-agmarquee {
	overflow: hidden;
	/* scale généreux : la bande reste pleine largeur même inclinée sur de
	   larges écrans (les transforms ne créent pas de scroll horizontal). */
	transform: rotate(-1deg) scale(1.06);
	margin-top: -14px;
	border-bottom: 1px solid rgba(1, 1, 1, 0.08);
	position: relative;
	z-index: 2;
}

.elementor-element-agmarquee > .e-con-inner {
	overflow: hidden;
}

.elementor-element-agmarquee .elementor-icon-list-items {
	display: flex;
	align-items: center;
	width: max-content;
	margin: 0;
	padding: 0;
	animation: agci-marquee 26s linear infinite;
}

.elementor-element-agmarquee:hover .elementor-icon-list-items {
	animation-play-state: paused;
}

/* Items alternés mot / ✦ (le ✦ est un item à part entière → centré entre les
   mots par la marge uniforme). Espacement en margin-right sur l'ITEM (compté
   par le flex → width:max-content == scrollWidth) : le translateX -50% tombe
   pile sur un jeu (10 items = 5 mots + 5 ✦, dupliqués). Boucle sans couture. */
.elementor-element-agmarquee .elementor-icon-list-item {
	margin: 0 40px 0 0 !important;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.elementor-element-agmarquee .elementor-icon-list-icon {
	display: none;
}

.elementor-element-agmarquee .elementor-icon-list-text {
	font-family: "Krona One", sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	color: #010101;
}

/* ---- Valeurs (grille d'Icon Box natifs) -------------------------------- */
.agci-valeurs {
	background: #f4f4f2;
}

.agci-val-card {
	height: 100%;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

/* La carte = .elementor-icon-box-wrapper (icon-box n'a pas de
   .elementor-widget-container en sortie DOM optimisée). */
.agci-val-card .elementor-icon-box-wrapper {
	height: 100%;
	padding: 34px 28px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid rgba(1, 1, 1, 0.08);
	box-shadow: 0 12px 30px rgba(1, 1, 1, 0.08);
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.agci-val-card--dark .elementor-icon-box-wrapper {
	background: #010101;
}

.agci-val-card .elementor-icon-box-wrapper,
.agci-val-card .elementor-icon-box-icon,
.agci-val-card .elementor-icon-box-content {
	text-align: left !important;
}

.agci-val-card .elementor-icon-box-icon {
	margin: 0 !important;
}

.agci-val-card .elementor-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #010101;
	/* !important : Elementor recolore la bordure sur la couleur de l'icône
	   (règle par id d'élément plus prioritaire) → on impose le jaune charte. */
	border: 2px solid #f3cc09 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.agci-val-card .elementor-icon i,
.agci-val-card .elementor-icon svg {
	color: #fff;
	fill: #fff;
	font-size: 22px;
	width: 22px;
	height: 22px;
}

.agci-val-card .elementor-icon-box-title {
	margin: 20px 0 0;
}

.agci-val-card .elementor-icon-box-title,
.agci-val-card .elementor-icon-box-title span {
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	font-size: 19px;
	color: #010101;
}

.agci-val-card .elementor-icon-box-description {
	margin: 12px 0 0;
	font-family: "Albert Sans", sans-serif;
	font-size: 14px;
	line-height: 1.6;
	font-weight: 500;
	opacity: 0.7;
	color: #010101;
}

.agci-val-card--dark .elementor-icon-box-title,
.agci-val-card--dark .elementor-icon-box-title span,
.agci-val-card--dark .elementor-icon-box-description {
	color: #fff;
}

.agci-val-card--t1 { transform: rotate(-1.5deg); }
.agci-val-card--t2 { transform: rotate(1.2deg); }
.agci-val-card--t3 { transform: rotate(1.5deg); }
.agci-val-card--t4 { transform: rotate(-1.2deg); }

.agci-val-card:hover {
	transform: translateY(-8px) rotate(0deg) !important;
	box-shadow: 0 22px 46px rgba(1, 1, 1, 0.14) !important;
}

/* ---- Histoire (2 colonnes) --------------------------------------------- */
.elementor-element-aghistoire {
	align-items: center;
}

@media ( max-width: 900px ) {
	.elementor-element-aghistoire {
		grid-template-columns: 1fr !important;
	}
}

.agci-histoire-h2 .elementor-heading-title {
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 1.3;
	color: #010101;
}

.agci-histoire-h2 .hl2 {
	background: #f3cc09;
	padding: 0 10px;
	border-radius: 8px;
}

.agci-histoire-countrow {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.agci-histoire-count .elementor-heading-title {
	font-family: "Krona One", sans-serif;
	font-size: 72px;
	line-height: 1;
	color: #010101;
}

.agci-histoire-suffix .elementor-heading-title {
	font-family: "Krona One", sans-serif;
	font-size: 30px;
	color: #f3cc09;
}

.agci-histoire-since .elementor-heading-title {
	font-family: "Albert Sans", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: 0.5;
	color: #010101;
}

.agci-histoire-p .elementor-heading-title {
	font-family: "Albert Sans", sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color: rgba(1, 1, 1, 0.65);
	font-weight: 500;
}

.agci-histoire-chips .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.agci-histoire-chips .elementor-icon-list-item {
	margin: 0 !important;
	padding: 0 !important;
}

.agci-histoire-chips .elementor-icon-list-icon {
	display: none;
}

.agci-histoire-chips .elementor-icon-list-text {
	display: inline-block;
	font-family: "Albert Sans", sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 9px 16px;
	border-radius: 100px;
	background: transparent;
	color: #010101;
	border: 1px solid rgba(1, 1, 1, 0.22);
}

.agci-histoire-imgwrap {
	position: relative;
}

/* La cellule droite (grille) ne doit PAS s'étirer à la hauteur de la colonne
   texte : sinon sa hauteur > image et le badge « bottom » tombe sous la photo.
   align-self:center → hauteur = image + centrage vertical (comme la maquette).
   Ciblée par l'id d'élément (la classe de container n'est pas émise ici). */
.elementor-element-aghistR {
	align-self: center;
}

.agci-histoire-img {
	transform: rotate(2deg);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 56px rgba(1, 1, 1, 0.16);
}

.agci-histoire-img img {
	display: block;
	width: 100% !important;
	height: 460px !important;
	object-fit: cover;
}

.agci-histoire-badge1,
.agci-histoire-badge2 {
	position: absolute;
	z-index: 3;
}

.agci-histoire-badge1 {
	top: -22px;
	left: -22px;
	transform: rotate(-6deg);
}

.agci-histoire-badge2 {
	bottom: -18px;
	right: -14px;
	transform: rotate(4deg);
}

.agci-histoire-badge1 .elementor-heading-title,
.agci-histoire-badge2 .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	padding: 14px 22px;
	border-radius: 100px;
}

.agci-histoire-badge1 .elementor-heading-title {
	background: #010101;
	color: #f3cc09;
	font-family: "Krona One", sans-serif;
	box-shadow: 0 12px 28px rgba(1, 1, 1, 0.25);
}

.agci-histoire-badge2 .elementor-heading-title {
	background: #f3cc09;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	box-shadow: 0 12px 28px rgba(243, 204, 9, 0.4);
}

.agci-histoire-badge1 .elementor-heading-title::before,
.agci-histoire-badge2 .elementor-heading-title::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.agci-histoire-badge1 .elementor-heading-title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13 2L4 14h6l-1 8 9-12h-6l1-8z'/%3E%3C/svg%3E");
}

.agci-histoire-badge2 .elementor-heading-title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* ---- Équipe (widget custom agci-equipe) -------------------------------- */
.agci-team {
	padding: 110px 40px;
	background: #fff;
}

.agci-team-inner {
	max-width: 1220px;
	margin: 0 auto;
}

.agci-team-head {
	text-align: center;
	margin-bottom: 60px;
}

.agci-team-badge {
	display: inline-block;
	background: #010101;
	color: #f3cc09;
	font-family: "Albert Sans", sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 9px 18px;
	border-radius: 100px;
	margin-bottom: 20px;
	transform: rotate(2deg);
}

.agci-team-title {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 1.2;
	color: #010101;
}

.agci-team-sub {
	margin: 18px auto 0;
	max-width: 480px;
	font-family: "Albert Sans", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	opacity: 0.65;
	font-weight: 500;
}

.agci-team-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
}

.agci-team-card {
	display: flex;
	gap: 26px;
	background: #fff;
	border: 1px solid rgba(1, 1, 1, 0.09);
	border-radius: 16px;
	padding: 20px;
	min-height: 280px;
	box-shadow: 0 12px 32px rgba(1, 1, 1, 0.07);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.agci-team-card:nth-child(odd) { transform: rotate(-0.6deg); }
.agci-team-card:nth-child(even) { transform: rotate(0.6deg); }

.agci-team-card:hover {
	transform: translateY(-8px) rotate(0deg) !important;
	box-shadow: 0 26px 54px rgba(1, 1, 1, 0.16) !important;
}

.agci-team-photo {
	width: 230px;
	flex: none;
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	background: #f4f4f2;
}

.agci-team-img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	filter: grayscale(1);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.agci-team-card:hover .agci-team-img {
	transform: scale(1.05);
}

.agci-team-ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(140, 140, 138, 0.18);
	color: rgba(140, 140, 138, 0.9);
	font-family: "Albert Sans", sans-serif;
	font-size: 13px;
}

.agci-team-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(243, 204, 9, 0) 45%, rgba(243, 204, 9, 0.85) 100%);
	pointer-events: none;
}

.agci-team-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 6px 0;
	min-width: 0;
}

.agci-team-role {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #010101;
	color: #fff;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: 100px;
}

.agci-team-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #f3cc09;
	display: inline-block;
	flex: none;
}

.agci-team-name {
	margin: auto 0 0;
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	font-size: 26px;
	letter-spacing: -0.4px;
	color: #010101;
}

.agci-team-bio {
	margin: 10px 0 0;
	font-family: "Albert Sans", sans-serif;
	font-size: 14.5px;
	line-height: 1.6;
	opacity: 0.65;
	font-weight: 500;
}

.agci-team-social {
	display: flex;
	gap: 10px;
	margin-top: auto;
	padding-top: 22px;
}

.agci-team-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(1, 1, 1, 0.18);
	color: #010101;
	transition: all 0.25s ease;
}

.agci-team-ic:hover {
	background: #010101;
	color: #f3cc09;
	border-color: #010101;
}

.agci-team-cta {
	margin-top: 48px;
	text-align: center;
}

.agci-team-cta-pill {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: #f4f4f2;
	border-radius: 100px;
	padding: 12px 14px 12px 24px;
}

.agci-team-cta-txt {
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #010101;
}

.agci-team-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f3cc09;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 14px;
	padding: 11px 22px;
	border-radius: 100px;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.agci-team-cta-btn:hover {
	transform: scale(1.05);
}

/* Flèche noire sur le bouton jaune : en blanc elle se perdait sur le jaune. */
.agci-team-cta-btn svg {
	stroke: #010101;
}

@media ( max-width: 900px ) {
	.agci-team-grid {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 560px ) {
	.agci-team-card {
		flex-direction: column;
	}
	.agci-team-photo {
		width: 100%;
		height: 240px;
	}
}

/* ---- Méthode (grille d'étapes numérotées) ------------------------------ */
.agci-methode {
	background: #f4f4f2;
}

.agci-methode-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 52px;
	flex-wrap: wrap;
}

.agci-methode-h2 .elementor-heading-title {
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 34px;
	line-height: 1.25;
	color: #010101;
}

.agci-methode-intro .elementor-heading-title {
	max-width: 340px;
	font-family: "Albert Sans", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	opacity: 0.7;
	font-weight: 500;
	color: #010101;
}

/* Fond/bordure/ombre des cartes étapes = réglages Elementor inline (par
   container). Ici : la typographie (classes widget) + les 2 variantes du n°. */
.agci-step-num .elementor-heading-title {
	font-family: "Krona One", sans-serif;
	font-size: 36px;
	line-height: 1;
}

.agci-step-num--chip .elementor-heading-title {
	display: inline-block;
	color: #010101;
	background: #f3cc09;
	padding: 6px 12px;
	border-radius: 10px;
}

.agci-step-num--dark .elementor-heading-title {
	color: #f3cc09;
}

.agci-step-title .elementor-heading-title {
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	font-size: 18px;
}

.agci-step-desc .elementor-heading-title {
	font-family: "Albert Sans", sans-serif;
	font-size: 13.5px;
	line-height: 1.6;
	font-weight: 500;
}

@media ( max-width: 900px ) {
	.elementor-element-agvalgrid,
	.elementor-element-agmethgrid,
	.elementor-element-brmethgrid,
	.elementor-element-mdmethgrid,
	.elementor-element-dwmethgrid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media ( max-width: 560px ) {
	.elementor-element-agvalgrid,
	.elementor-element-agmethgrid,
	.elementor-element-brmethgrid,
	.elementor-element-mdmethgrid,
	.elementor-element-dwmethgrid {
		grid-template-columns: 1fr !important;
	}
}

/* =========================================================================
   PAGES DE SERVICE — Branding & Design (146), Marketing Digital,
   Développement Web. Même anatomie sur les trois : hero jaune (pattern
   Blog), bandeau ✦ (pattern Agence), prestations (widget agci-prestations),
   méthode (pattern Agence), réalisations. Seul le responsive du hero est
   ciblé ici (les règles Blog sont scellées sur les ids blhero*), avec un
   préfixe d'id par page : br / md / dw.
   ========================================================================= */
@media ( max-width: 900px ) {
	.elementor-element-brherorow,
	.elementor-element-mdherorow,
	.elementor-element-dwherorow {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.elementor-element-brheroleft,
	.elementor-element-brheroright,
	.elementor-element-mdheroleft,
	.elementor-element-mdheroright,
	.elementor-element-dwheroleft,
	.elementor-element-dwheroright {
		width: 100% !important;
	}
	.elementor-element-brheroh1 .elementor-heading-title,
	.elementor-element-mdheroh1 .elementor-heading-title,
	.elementor-element-dwheroh1 .elementor-heading-title {
		font-size: 36px !important;
	}
	.elementor-element-brherocard,
	.elementor-element-mdherocard,
	.elementor-element-dwherocard {
		min-height: 320px !important;
	}
	/* Illustration masquée : le paragraphe repasse sur fond jaune → noir */
	.elementor-element-brherop,
	.elementor-element-brherop p,
	.elementor-element-mdherop,
	.elementor-element-mdherop p,
	.elementor-element-dwherop,
	.elementor-element-dwherop p {
		color: #010101 !important;
	}
}

@media ( max-width: 640px ) {
	.elementor-element-brherocard,
	.elementor-element-mdherocard,
	.elementor-element-dwherocard {
		padding: 44px 28px 40px !important;
	}
	.elementor-element-brheroh1 .elementor-heading-title,
	.elementor-element-mdheroh1 .elementor-heading-title,
	.elementor-element-dwheroh1 .elementor-heading-title {
		font-size: 31px !important;
	}
}

/* =========================================================================
   PAGE CONTACT
   ========================================================================= */

/* --- Hero sombre : rayures diagonales + éclat en filigrane --------------- */
.agci-contact-hero {
	position: relative;
	overflow: hidden;
}

.agci-contact-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.6;
	background-image: repeating-linear-gradient(128deg, transparent 0 60px, rgba(243, 204, 9, 0.12) 60px 62px);
	pointer-events: none;
}

/* Il y avait ici un second motif : un carré de 280px de rayures découpé par un
   clip-path en zigzag, calé en bas à gauche. L'intention était un éclat en
   filigrane, mais le découpage recoupait les rayures en petits traits décalés
   qui se lisaient comme un défaut d'affichage, pas comme un motif. Retiré :
   les rayures diagonales du ::before portent déjà la texture du hero. */

.agci-contact-hero > * {
	position: relative;
	z-index: 1;
}

/* --- Fil d'ariane (Accueil ↗ Contact) ----------------------------------- */
.agci-breadcrumb p {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.agci-breadcrumb a {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	transition: color 0.2s ease;
}

.agci-breadcrumb a:hover {
	color: #f3cc09;
}

.agci-breadcrumb .agci-bc-cur {
	color: #f3cc09;
}

.agci-bc-arrow {
	display: inline-block;
	flex: none;
	width: 13px;
	height: 13px;
	background-color: #f3cc09;
	-webkit-mask: var(--agci-fleche) no-repeat center / contain;
	mask: var(--agci-fleche) no-repeat center / contain;
	transform: rotate(45deg);
}

/* --- Formulaire (widget Formulaire Elementor Pro) ------------------------ */
.agci-contact-form .elementor-field-textual {
	min-height: 54px;
	border-radius: 12px;
	border: 1px solid #e5e5e5;
	background: #fff;
	padding: 0 18px;
	font-family: "Albert Sans", sans-serif;
	font-size: 16px;
	color: #262626;
}

.agci-contact-form .elementor-field-textual::placeholder {
	color: #a3a3a3;
}

.agci-contact-form .elementor-field-textual:focus {
	border-color: #010101;
	box-shadow: none;
	outline: none;
}

.agci-contact-form textarea.elementor-field-textual {
	height: 150px;
	padding: 14px 18px;
	resize: none;
}

/* Choix « Votre projet concerne » : radios déguisés en pilules */
.agci-contact-form .elementor-field-type-radio .elementor-field-subgroup {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 2px;
}

.agci-contact-form .elementor-field-type-radio .elementor-field-option {
	position: relative;
}

.agci-contact-form .elementor-field-type-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.agci-contact-form .elementor-field-type-radio .elementor-field-option label {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border-radius: 100px;
	border: 1px solid #e5e5e5;
	background: #fff;
	color: #404040;
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.agci-contact-form .elementor-field-type-radio input[type="radio"]:checked + label {
	background: #f3cc09;
	border-color: #f3cc09;
	color: #010101;
}

.agci-contact-form .elementor-field-type-radio input[type="radio"]:focus-visible + label {
	outline: 2px solid #f3cc09;
	outline-offset: 2px;
}

/* Pièce jointe : zone en pointillés */
.agci-contact-form .elementor-field-type-upload {
	--agci-upload-h: 56px;
}

.agci-contact-form .elementor-field-type-upload input[type="file"] {
	width: 100%;
	height: var(--agci-upload-h);
	border: 1px dashed #d4d4d4;
	border-radius: 12px;
	background: #fff;
	padding: 0 18px;
	font-family: "Albert Sans", sans-serif;
	font-size: 15px;
	color: #737373;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.agci-contact-form .elementor-field-type-upload input[type="file"]:hover {
	border-color: #010101;
}

/* Le navigateur impose son bouton et son « No file chosen », en anglais et
   non traduisibles. Une fois le JS passé (classe posée sur le groupe), on
   masque ce rendu natif et on réaffiche l'état par-dessus : libellé de la
   maquette au repos, nom du fichier une fois choisi. Sans JS, l'input natif
   reste intact et pleinement utilisable. */
/* Astérisque des champs obligatoires. Elementor pose bien la classe
   .elementor-mark-required sur le groupe quand l'option « Marquer les champs
   requis » est activée, mais n'embarque aucune règle pour la rendre visible :
   c'est à la feuille du thème de dessiner le marqueur. En jaune de charte,
   comme les autres accents du formulaire.
   L'accessibilité ne repose pas dessus : Elementor pose aussi `required` sur
   les champs concernés, que les lecteurs d'écran annoncent. */
.agci-contact-form .elementor-mark-required .elementor-field-label::after {
	content: "*";
	margin-left: 3px;
	color: #f3cc09;
	font-weight: 700;
}

.agci-contact-form .agci-upload-ready {
	position: relative;
}

/* !important : la couleur des champs vient du CSS de page d'Elementor, dont le
   sélecteur (.elementor-92 .elementor-element.elementor-element-ctcform01
   .elementor-field-group .elementor-field) est bien plus spécifique. */
.agci-contact-form .agci-upload-ready input[type="file"] {
	color: transparent !important;
	padding-left: 48px;
}

.agci-contact-form .agci-upload-ready input[type="file"]::file-selector-button {
	display: none;
}

.agci-contact-form .agci-upload-ready::before,
.agci-contact-form .agci-upload-ready::after {
	position: absolute;
	bottom: 0;
	height: var(--agci-upload-h);
	pointer-events: none;
}

/* Trombone. Il était calé à 18px, l'inset du texte des autres champs — mais un
   glyphe d'icône remplit sa boîte bord à bord, là où une lettre garde son
   approche latérale : à 18px le trombone paraissait collé à la bordure.
   4px de plus le réalignent optiquement sur le texte des autres champs. */
.agci-contact-form .agci-upload-ready::before {
	content: "";
	left: 22px;
	width: 16px;
	background-color: #737373;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21.4 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21.4 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}

.agci-contact-form .agci-upload-ready::after {
	content: attr(data-agci-file);
	left: 48px;
	right: 18px;
	display: flex;
	align-items: center;
	font-family: "Albert Sans", sans-serif;
	font-size: 13.5px;
	color: #737373;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Un fichier est joint : on le signale par la couleur du texte de la charte. */
.agci-contact-form .agci-upload-ready.has-file::after {
	color: #010101;
	font-weight: 600;
}

.agci-contact-form .agci-upload-ready.has-file::before {
	background-color: #010101;
}

/* Bouton d'envoi : pilule jaune à largeur de contenu, calée à gauche.
   Le groupe submit d'Elementor est un flex qui étire son bouton sur toute
   la colonne → on neutralise l'étirement, pas seulement la largeur. */
.agci-contact-form .elementor-field-type-submit.e-form__buttons {
	align-items: flex-start;
	justify-content: flex-start;
}

.agci-contact-form .elementor-button[type="submit"] {
	width: auto;
	flex: 0 0 auto;
	align-self: flex-start;
	min-height: 56px;
	border: none;
	border-radius: 100px;
	background: #f3cc09;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 16px;
	padding: 0 32px;
}

/* Hover/focus : mêmes couleurs qu'au repos (texte ET flèche noirs) — le
   !important verrouille contre le reset Hello et les styles Elementor. */
.agci-contact-form .elementor-button[type="submit"]:hover,
.agci-contact-form .elementor-button[type="submit"]:focus {
	background: #f3cc09 !important;
	color: #010101 !important;
}

/* Message de succès : carte claire centrée */
.agci-contact-form .elementor-message.elementor-message-success {
	border: 1px solid #f0f0f0;
	background: #fafafa;
	border-radius: 16px;
	padding: 40px 32px;
	text-align: center;
	font-family: "Albert Sans", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #525252;
}

/* Note de confidentialité sous le bouton */
.agci-contact-note p {
	margin: 0;
	font-family: "Albert Sans", sans-serif;
	font-size: 13px;
	color: #a3a3a3;
}

/* Le lien vers la politique de confidentialité n'avait pas de style : il
   retombait sur le bleu-rouge par défaut du navigateur. On reprend la
   convention des liens de contenu du site (.agci-post-content a) : texte noir,
   soulignement jaune. */
.agci-contact-note a {
	color: #010101;
	text-decoration: underline;
	text-decoration-color: #f3cc09;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.agci-contact-note a:hover,
.agci-contact-note a:focus-visible {
	color: #010101;
	text-decoration-color: #010101;
}

/* --- Carte infos (adresses) --------------------------------------------- */
.agci-contact-infocard {
	position: relative;
	overflow: hidden;
}

.agci-contact-infocard::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.4;
	background-image: repeating-linear-gradient(128deg, transparent 0 40px, rgba(243, 204, 9, 0.14) 40px 42px);
	pointer-events: none;
}

.agci-contact-infocard > * {
	position: relative;
	z-index: 1;
}

.agci-info-city .elementor-heading-title {
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.2em;
	color: #f3cc09;
}

.agci-info-addr p {
	margin: 8px 0 0;
	font-family: "Albert Sans", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #fff;
}

.agci-info-links p {
	margin: 0 0 10px;
}

.agci-info-links a {
	font-family: "Albert Sans", sans-serif;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
	transition: color 0.2s ease;
}

.agci-info-links a:hover {
	color: #f3cc09;
}

/* --- Carte Leaflet (Aix / Marseille) -------------------------------------
   Avant l'init JS : grille + épingles factices en pseudo-éléments (état de
   chargement fidèle à la maquette). Dès que Leaflet monte (.agci-map-live),
   les pseudos s'effacent au profit de la vraie carte. */
.agci-contact-map {
	position: relative;
	overflow: hidden;
	background: #e8e8e8;
}

.agci-map-canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.agci-contact-map.agci-map-live::before,
.agci-contact-map.agci-map-live::after {
	display: none;
}

/* Épingle AGCI : disque jaune cerclé de sombre + halo pulsé */
.agci-map-pin-wrap {
	background: none;
	border: none;
}

.agci-map-pin {
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #f3cc09;
	border: 4px solid #262626;
	box-sizing: border-box;
}

.agci-map-pin::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid rgba(243, 204, 9, 0.7);
	animation: agci-pin-pulse 2s ease-out infinite;
	pointer-events: none;
}

@keyframes agci-pin-pulse {
	0% {
		transform: scale(0.6);
		opacity: 1;
	}
	100% {
		transform: scale(2.1);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.agci-map-pin::after {
		animation: none;
		display: none;
	}
}

/* Tooltip des bureaux : carte noire arrondie */
.leaflet-tooltip.agci-map-tip {
	background: #010101;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 8px 12px;
	font-family: "Albert Sans", sans-serif;
	font-size: 12.5px;
	line-height: 1.5;
	box-shadow: 0 10px 24px rgba(1, 1, 1, 0.25);
}

.leaflet-tooltip-top.agci-map-tip::before {
	border-top-color: #010101;
}

.agci-contact-map::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(#dcdcdc 1px, transparent 1px),
		linear-gradient(90deg, #dcdcdc 1px, transparent 1px);
	background-size: 38px 38px;
}

/* Deux épingles : disque jaune cerclé de sombre, dessinées en dégradés radiaux */
.agci-contact-map::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 33% 42%, #f3cc09 0 7px, #262626 7px 11px, transparent 11px),
		radial-gradient(circle at 66% 65%, #f3cc09 0 7px, #262626 7px 11px, transparent 11px);
}

.agci-map-label {
	position: absolute;
	left: 16px;
	bottom: 14px;
	z-index: 2;
	pointer-events: none;
}

.agci-map-label p {
	margin: 0;
	display: inline-block;
	font-family: "Albert Sans", sans-serif;
	font-size: 12px;
	color: #737373;
	background: rgba(255, 255, 255, 0.8);
	padding: 4px 10px;
	border-radius: 6px;
}

/* --- Responsive ---------------------------------------------------------- */
@media ( max-width: 1024px ) {
	.elementor-element-ctcbodysec {
		flex-direction: column !important;
	}
	.elementor-element-ctcsidecol {
		width: 100% !important;
	}
}

@media ( max-width: 900px ) {
	.elementor-element-ctcherorow {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.elementor-element-ctcheroleft,
	.elementor-element-ctcheroright {
		width: 100% !important;
	}
	.elementor-element-ctcheroh1 .elementor-heading-title {
		font-size: 36px !important;
	}
	.elementor-element-ctcbodysec {
		padding: 40px 24px !important;
	}
}

/* --- Mobile : valeurs de la maquette « Contact Mobile » -------------------
   Le hero garde son parti pris sombre et son libellé ; seules sa mise à
   l'échelle et la densité du formulaire sont reprises de la maquette. */
@media ( max-width: 640px ) {
	.elementor-element-ctcherosec {
		padding: 4px 12px 0 !important;
	}

	.agci-contact-hero {
		min-height: 0 !important;
		padding: 38px 22px 30px !important;
		border-radius: 22px !important;
	}

	/* 36px faisait éclater « On prend un café ? » sur quatre lignes. */
	.elementor-element-ctcheroh1 .elementor-heading-title {
		font-size: 26px !important;
		line-height: 1.15 !important;
	}

	.elementor-element-ctcherop,
	.elementor-element-ctcherop p {
		font-size: 13.5px !important;
		line-height: 1.6 !important;
	}

	.elementor-element-ctcbodysec {
		padding: 36px 22px 8px !important;
	}

	/* Champs : gabarit resserré (50px au lieu de 54). */
	.agci-contact-form .elementor-field-group > label {
		font-size: 13px;
	}

	.agci-contact-form .elementor-field-textual {
		min-height: 50px;
		padding: 0 16px;
		font-size: 15px;
	}

	.agci-contact-form textarea.elementor-field-textual {
		height: 130px;
		padding: 13px 16px;
	}

	.agci-contact-form .elementor-field-type-radio .elementor-field-option label {
		padding: 10px 16px;
		font-size: 13px;
	}

	/* La hauteur du champ pilote aussi la zone du libellé posé par-dessus :
	   elle se règle par la variable, pas par une hauteur en dur. */
	.agci-contact-form .elementor-field-type-upload {
		--agci-upload-h: 50px;
	}

	.agci-contact-form .elementor-field-type-upload input[type="file"] {
		padding: 0 16px;
		font-size: 13.5px;
	}

	.agci-contact-form .agci-upload-ready input[type="file"] {
		padding-left: 42px;
	}

	/* Le bouton prend toute la largeur : à 390px, une pilule calée à gauche
	   laisse un vide disgracieux à sa droite. */
	.agci-contact-form .elementor-field-type-submit.e-form__buttons {
		align-items: stretch;
	}

	.agci-contact-form .elementor-button[type="submit"] {
		width: 100%;
		align-self: stretch;
		min-height: 54px;
		font-size: 15px;
		justify-content: center;
	}

	.agci-contact-note,
	.agci-contact-note p {
		font-size: 12px;
		text-align: center;
	}

	.agci-contact-infocard {
		padding: 26px 24px;
	}

	/* La hauteur des containers Elementor passe par --height / --min-height ;
	   régler la seule hauteur ne suffit pas, le min l'emporterait. Ciblé par
	   l'id d'élément et forcé : le CSS de page d'Elementor pose ces variables
	   avec un sélecteur plus spécifique que la classe. */
	.elementor-element-ctcmapcrd {
		--height: 160px !important;
		--min-height: 160px !important;
	}
}


/* =========================================================================
   PAGE BLOG
   ========================================================================= */

/* --- Hero jaune : illustration AGCI en noir, fondue depuis la droite ----- */
.agci-blog-hero {
	position: relative;
	overflow: hidden;
}

.agci-blog-hero::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 70%;
	background: url("../img/illu-blanche-agci.svg") right center / cover no-repeat;
	filter: brightness(0);
	opacity: 0.9;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 30%, #000 55%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 30%, #000 55%);
	pointer-events: none;
}

/* Le chapeau de droite est passé en noir (il était blanc, illisible sur les
   zones jaunes du hero). Mais il se pose en partie sur le motif, lui aussi
   noir : à pleine opacité, les dernières lignes disparaissaient dedans. On
   descend l'opacité du motif sur la seule déclinaison jaune — les variantes
   sombres (Services, sous-services, pages légales) gardent la leur, leur
   texte étant blanc. */
.agci-blog-hero:not( .agci-services-hero )::before {
	opacity: 0.55;
}

/* Hero du blog : aplat jaune seul, sans décor. Le tracé y jouait contre le
   titre plutôt qu'avec lui — c'est le seul hero dont le titre déborde sur
   toute la largeur de la carte. Ciblé par id : les heros de catégorie, de
   même déclinaison jaune, gardent le leur sur grand écran.

   !important : un palier mobile plus bas dans cette feuille remet le motif en
   display:block pour toutes les déclinaisons jaunes, avec un sélecteur plus
   spécifique. Sans cela le tracé réapparaissait sur téléphone. */
.elementor-element-blherocard::before {
	display: none !important;
}

.agci-blog-hero > * {
	position: relative;
	z-index: 1;
}

/* Fil d'ariane : variante texte sombre sur fond jaune */
.agci-breadcrumb-dark a {
	color: rgba(1, 1, 1, 0.5);
}

.agci-breadcrumb-dark a:hover {
	color: #010101;
}

.agci-breadcrumb-dark .agci-bc-cur {
	color: #010101;
}

.agci-breadcrumb-dark .agci-bc-arrow {
	background-color: #010101;
}

/* --- Archive : structure générale ---------------------------------------- */
.agci-archive {
	padding: 56px 40px 80px;
	background: #fff;
}

.agci-archive-inner {
	max-width: 1220px;
	margin: 0 auto;
}

/* --- Têtes de section ----------------------------------------------------- */
.agci-archive-sechead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

/* Filet sous les têtes de catégorie (vue « Tous ») */
.agci-archive-sechead-line {
	border-bottom: 1px solid #ececec;
	padding-bottom: 18px;
}

.agci-archive-sectitle {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #010101;
}

.agci-archive-news .agci-archive-sectitle {
	font-size: 22px;
}

.agci-archive-secnote {
	font-family: "Albert Sans", sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #737373;
}

/* « Voir tout » : bouton reprenant le CTA bulle de l'accueil (le markup
   porte aussi les classes agci-blog-all / agci-blog-all-btn, qui apportent
   le style et l'éclosion de la bulle jaune au survol). */
.agci-archive-all {
	appearance: none;
	border: 0;
	background: none;
	cursor: pointer;
}

/* --- Cartes --------------------------------------------------------------- */
.agci-archive-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 12px;
	background: #f1f1f1;
}

.agci-archive-thumb img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.agci-archive-card:hover .agci-archive-thumb img,
.agci-archive-featured:hover .agci-archive-thumb img {
	transform: scale(1.05);
}

/* Pastille de catégorie, posée en haut à gauche de la vignette : les articles
   à la une sont sortis de leur rangée, ils perdent donc le titre de section
   qui renseignait leur sujet.

   Elle est enfant de la CARTE et non de la vignette, et se pose dessus en
   absolu — la vignette étant en haut de la carte, les deux coins supérieurs
   gauches coïncident. Ça lui permet de redevenir un élément de flux en mobile
   sur les cartes latérales, où la vignette tombe à 86px de large et ne peut
   plus accueillir un libellé comme « Marketing Digital ».

   z-index 3 : la vignette empile déjà un voile jaune (::after, z-index 1) et
   la pastille de survol (::before, z-index 2). Sans ça, la catégorie passerait
   dessous au survol. Le pavé jaune plein reste lisible par-dessus le voile,
   qui est translucide. */
.agci-archive-card,
.agci-archive-featured {
	position: relative;
}

.agci-archive-cattag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 100px;
	background: #f3cc09;
	font-family: "Albert Sans", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #010101;
}

.agci-archive-date {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-family: "Albert Sans", sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #737373;
}

/* Puce carrée jaune, signature de la maquette */
.agci-archive-date::before {
	content: "";
	width: 6px;
	height: 6px;
	background: #f3cc09;
	flex: none;
}

.agci-archive-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-decoration: none;
	color: #262626;
	min-width: 0;
}

.agci-archive-card .agci-archive-thumb {
	width: 100%;
	height: 170px;
}

.agci-archive-cardtitle {
	margin-top: 9px;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: #262626;
	transition: opacity 0.2s ease;
}

.agci-archive-card:hover .agci-archive-cardtitle {
	opacity: 0.65;
}

.agci-archive-excerpt {
	margin-top: 12px;
	font-family: "Albert Sans", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: #525252;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Nouveautés ----------------------------------------------------------- */
.agci-archive-news {
	margin-bottom: 88px;
}

.agci-archive-news-grid {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: 32px;
	align-items: start;
}

.agci-archive-featured {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-decoration: none;
	color: #262626;
	min-width: 0;
}

.agci-archive-featured-media {
	width: 100%;
	height: 300px;
	border-radius: 16px;
}

.agci-archive-featured .agci-archive-date {
	margin-top: 24px;
	font-size: 12.5px;
	gap: 9px;
}

.agci-archive-featured .agci-archive-date::before {
	width: 7px;
	height: 7px;
}

.agci-archive-featured-title {
	margin-top: 12px;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: #262626;
	transition: opacity 0.2s ease;
}

.agci-archive-featured:hover .agci-archive-featured-title {
	opacity: 0.65;
}

.agci-archive-featured .agci-archive-excerpt {
	font-size: 15.5px;
	line-height: 1.55;
}

.agci-archive-news-side {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.agci-archive-news-side .agci-archive-card .agci-archive-thumb {
	height: 165px;
	border-radius: 14px;
}

.agci-archive-news-side .agci-archive-cardtitle {
	font-size: 16.5px;
	line-height: 1.45;
}

/* --- Rangée de cartes d'une catégorie (vue « Tous ») ---------------------- */
.agci-archive-cat {
	margin-bottom: 72px;
}

.agci-archive-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* --- Vue catégorie : tous les articles, avec extraits --------------------- */
.agci-archive-catview-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.agci-archive-card-full .agci-archive-thumb {
	height: 200px;
}

.agci-archive-card-full .agci-archive-date {
	margin-top: 24px;
	font-size: 12.5px;
	gap: 9px;
}

.agci-archive-card-full .agci-archive-date::before {
	width: 7px;
	height: 7px;
}

.agci-archive-card-full .agci-archive-cardtitle {
	margin-top: 12px;
	font-size: 19px;
	line-height: 1.45;
}

/* --- Responsive ----------------------------------------------------------- */
@media ( max-width: 1024px ) {
	.agci-archive-row {
		grid-template-columns: repeat(2, 1fr);
	}
	.agci-archive-catview-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.agci-archive-news-grid {
		grid-template-columns: 1fr;
	}
	.agci-archive-news-side {
		flex-direction: row;
		gap: 24px;
	}
	.agci-archive-news-side .agci-archive-card {
		flex: 1;
	}
	.agci-archive-card .agci-archive-thumb,
	.agci-archive-card-full .agci-archive-thumb {
		height: 210px;
	}
	.agci-archive-featured-media {
		height: 340px;
	}
}

@media ( max-width: 640px ) {
	.agci-archive {
		padding: 12px 20px 64px;
	}
	.agci-archive-row,
	.agci-archive-catview-grid {
		grid-template-columns: 1fr;
	}
	.agci-archive-news-side {
		flex-direction: column;
	}
	.agci-archive-card .agci-archive-thumb,
	.agci-archive-card-full .agci-archive-thumb {
		height: 230px;
	}
	.agci-archive-news {
		margin-bottom: 56px;
	}
	.agci-archive-cat {
		margin-bottom: 48px;
	}
	.agci-archive-sechead {
		flex-wrap: wrap;
	}
}

/* --- Hero Blog : responsive ---------------------------------------------- */
@media ( max-width: 900px ) {
	.elementor-element-blherorow {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.elementor-element-blheroleft,
	.elementor-element-blheroright {
		width: 100% !important;
	}
	.elementor-element-blheroh1 .elementor-heading-title {
		font-size: 36px !important;
	}
	.elementor-element-blherocard {
		min-height: 320px !important;
	}
	.agci-blog-hero::before {
		display: none;
	}
	/* Colonne : le paragraphe repasse sur fond jaune → texte noir */
	.elementor-element-blherop,
	.elementor-element-blherop p {
		color: #010101 !important;
	}
}

/* =========================================================================
   PAGE SERVICES (post 144)
   ========================================================================= */

/* --- Hero sombre : déclinaison de .agci-blog-hero --------------------------
   L'illustration AGCI passe en jaune (le SVG blanc sert de masque à un fond
   #F3CC09) et un dégradé sombre venant de la gauche assoit la lisibilité. */
.agci-services-hero {
	background: #010101;
}

.agci-services-hero::before {
	background: #f3cc09;
	filter: none;
	opacity: 0.92;
	-webkit-mask: url("../img/illu-blanche-agci.svg") right center / cover no-repeat;
	mask: url("../img/illu-blanche-agci.svg") right center / cover no-repeat;
}

.agci-services-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(1, 1, 1, 0.9) 0%, rgba(1, 1, 1, 0.55) 55%, rgba(1, 1, 1, 0.25) 100%);
	pointer-events: none;
}

/* Note Google sous le CTA du hero */
.agci-hero-stars p {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-family: "Albert Sans", sans-serif;
}

.agci-hero-stars .st {
	color: #f3cc09;
	font-size: 14px;
	letter-spacing: 1px;
}

/* Reliquat d'étoiles au-delà de la note (cf. agci_avis_google_shortcode) :
   présentes pour que la rangée fasse toujours 5, mais en retrait. */
.agci-hero-stars .st .sto {
	color: rgba(255, 255, 255, 0.25);
}

.agci-hero-stars .sc {
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	font-weight: 600;
}

.agci-hero-stars .sn {
	color: rgba(255, 255, 255, 0.45);
	font-size: 13px;
	font-weight: 500;
}

/* --- Hero Services : responsive (même logique que le hero Blog) ---------- */
@media ( max-width: 900px ) {
	.elementor-element-svherorow {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.elementor-element-svheroleft,
	.elementor-element-svheroright {
		width: 100% !important;
	}
	.elementor-element-svheroh1 .elementor-heading-title {
		font-size: 36px !important;
	}
	.elementor-element-svherocard {
		min-height: 340px !important;
	}
	.agci-services-hero::before {
		display: none;
	}
}

@media ( max-width: 640px ) {
	.elementor-element-svherocard {
		padding: 44px 28px 40px !important;
	}
	.elementor-element-svheroh1 .elementor-heading-title {
		font-size: 31px !important;
	}
}

/* --- Hero Réalisations : responsive (même logique que le hero Services) --- */
@media ( max-width: 900px ) {
	.elementor-element-rxherorow {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.elementor-element-rxheroleft,
	.elementor-element-rxheroright {
		width: 100% !important;
	}
	.elementor-element-rxheroh1 .elementor-heading-title {
		font-size: 36px !important;
	}
	.elementor-element-rxherocard {
		min-height: 340px !important;
	}
	.agci-services-hero::before {
		display: none;
	}
}

@media ( max-width: 640px ) {
	.elementor-element-rxherocard {
		padding: 44px 28px 40px !important;
	}
	.elementor-element-rxheroh1 .elementor-heading-title {
		font-size: 31px !important;
	}
}

/* --- Heros de sous-service : palier tablette -----------------------------
   Même logique que le hero Réalisations juste au-dessus, qui sert de
   référence. Les 12 pages ayant été générées par clonage, elles n'avaient
   aucun palier propre : entre 768 et 900px les deux colonnes restaient côte
   à côte, ne laissant que ~350px à gauche. Le fil d'Ariane s'y cassait en
   trois lignes et le titre en autant de morceaux.

   Bornes explicites : sous 768px le hero est déjà empilé et porte ses
   propres réglages (gouttières et titre à 27px), qu'il ne faut pas écraser.

   Sélecteurs de structure plutôt que 36 identifiants — la rangée et ses deux
   colonnes, sur douze pages — puisque seule la carte porte une classe. */
@media ( min-width: 768px ) and ( max-width: 900px ) {
	.agci-ss-hero > .e-con {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	.agci-ss-hero > .e-con > .e-con {
		width: 100% !important;
	}

	.agci-ss-hero {
		min-height: 340px !important;
	}

	.agci-ss-hero .agci-hero-h1 .elementor-heading-title {
		font-size: 36px !important;
	}
}

/* --- Heros des pages légales : responsive ---------------------------------
   « Politique de confidentialité » est un titre long : il descend un cran
   plus bas que les autres heros pour tenir dans la carte. */
@media ( max-width: 900px ) {
	.elementor-element-mlherorow,
	.elementor-element-pcherorow {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.elementor-element-mlheroleft,
	.elementor-element-mlheroright,
	.elementor-element-pcheroleft,
	.elementor-element-pcheroright {
		width: 100% !important;
	}
	.elementor-element-mlheroh1 .elementor-heading-title,
	.elementor-element-pcheroh1 .elementor-heading-title {
		font-size: 32px !important;
	}
	.elementor-element-mlherocard,
	.elementor-element-pcherocard {
		min-height: 300px !important;
	}
}

@media ( max-width: 640px ) {
	.elementor-element-mlherocard,
	.elementor-element-pcherocard {
		padding: 44px 28px 40px !important;
	}
	.elementor-element-mlheroh1 .elementor-heading-title {
		font-size: 28px !important;
	}
	.elementor-element-pcheroh1 .elementor-heading-title {
		font-size: 24px !important;
	}
}

/* =========================================================================
   ARTICLE (single post — templates/single.php)
   ========================================================================= */

/* --- Hero jaune pleine largeur ------------------------------------------- */
.agci-single-hero {
	position: relative;
	background: #f3cc09;
	padding: 150px 24px 120px;
	overflow: hidden;
}

.agci-single-hero-motif {
	position: absolute;
	top: 0;
	right: -6%;
	height: 100%;
	width: auto;
	opacity: 0.5;
	pointer-events: none;
}

.agci-single-hero-inner {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

/* Fil d'ariane : .agci-breadcrumb porte tout le style (variante « dark » pour
   le fond jaune). Le hero de l'article est centré, la ligne flex doit donc
   l'être aussi — ailleurs le fil d'ariane est aligné à gauche. */
.agci-single-crumb p {
	justify-content: center;
}

.agci-single-title {
	margin: 22px 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 44px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #010101;
}

.agci-single-meta {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.agci-single-cat {
	background: #010101;
	color: #f3cc09;
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	padding: 7px 14px;
	border-radius: 16px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.agci-single-cat:hover {
	opacity: 0.75;
	color: #f3cc09;
}

.agci-single-date {
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #262626;
}

/* --- Visuel à cheval sur le hero ------------------------------------------ */
.agci-single-cover {
	max-width: 1000px;
	margin: -64px auto 0;
	padding: 0 64px;
	position: relative;
	z-index: 5;
}

.agci-single-cover-frame {
	height: 440px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
}

.agci-single-cover-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Mise en page : sidebar + article ------------------------------------- */
.agci-single-layout {
	max-width: 1120px;
	margin: 56px auto 0;
	padding: 0 64px;
	display: flex;
	gap: 56px;
	align-items: flex-start;
}

.agci-single-side {
	position: sticky;
	top: 88px;
	width: 236px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Sommaire */
.agci-single-toc {
	border: 1px solid #e5e5e5;
	border-radius: 14px;
	padding: 24px;
}

.agci-single-toc-title {
	font-family: "Krona One", sans-serif;
	font-size: 14px;
	letter-spacing: -0.02em;
	color: #010101;
}

.agci-single-toc-sep {
	height: 1px;
	background: #f0f0f0;
	margin: 16px 0;
}

.agci-single-toc-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.agci-single-toc-list a {
	display: flex;
	gap: 10px;
	font-family: "Albert Sans", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: #737373;
	text-decoration: none;
	transition: color 0.2s ease;
}

.agci-single-toc-chev {
	color: #d4d4d4;
	transition: color 0.2s ease;
	flex: none;
}

.agci-single-toc-list a:hover,
.agci-single-toc-list a.is-active {
	color: #010101;
	font-weight: 600;
}

.agci-single-toc-list a:hover .agci-single-toc-chev,
.agci-single-toc-list a.is-active .agci-single-toc-chev {
	color: #f3cc09;
}

/* Carte CTA noire */
.agci-single-cta {
	position: relative;
	background: #010101;
	border-radius: 14px;
	padding: 26px 24px;
	overflow: hidden;
}

.agci-single-cta-motif {
	position: absolute;
	top: -10%;
	right: -30%;
	height: 130%;
	width: auto;
	opacity: 0.12;
	pointer-events: none;
}

.agci-single-cta-in {
	position: relative;
}

.agci-single-cta-title {
	display: block;
	font-family: "Krona One", sans-serif;
	font-size: 16px;
	line-height: 1.45;
	letter-spacing: -0.02em;
	color: #fff;
}

.agci-single-cta-in p {
	font-family: "Albert Sans", sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
	margin: 12px 0 0;
}

.agci-single-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	background: #f3cc09;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	padding: 11px 20px;
	border-radius: 100px;
	text-decoration: none;
	transition: background 0.2s ease;
}

.agci-single-cta-btn:hover {
	background: #fff;
	color: #010101;
}

/* Partager */
.agci-single-share {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 4px;
}

.agci-single-share-label {
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #737373;
}

.agci-single-share-btns {
	display: flex;
	align-items: center;
	gap: 8px;
}

.agci-single-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 100px;
	background: #fff;
	border: 1px solid #e5e5e5;
	color: #404040;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.agci-single-share-btn svg {
	flex: none;
}

.agci-single-share-btn:hover,
.agci-single-share-btn:focus-visible {
	border-color: #f3cc09;
	background: #fff;
	color: #010101;
}

.agci-single-share-btn.is-copied {
	border-color: #f3cc09;
	background: #f3cc09;
	color: #010101;
}

/* --- Corps d'article ------------------------------------------------------ */
.agci-single-article {
	flex: 1;
	min-width: 0;
}

/* Barre « Résumer avec » */
.agci-single-ai {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0 0 40px;
}

.agci-single-ai-label {
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #a3a3a3;
	flex: none;
}

.agci-single-ai-chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.agci-single-ai-chips a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 100px;
	padding: 7px 15px 7px 8px;
	color: #262626;
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.agci-single-ai-chips a:hover {
	border-color: #f3cc09;
	box-shadow: 0 2px 8px rgba(1, 1, 1, 0.06);
}

.agci-single-ai-chips img {
	width: 20px;
	height: 20px;
	border-radius: 100px;
	object-fit: cover;
	flex: none;
}

/* Typographie du contenu (blocs Gutenberg) */
.agci-post-content {
	font-family: "Albert Sans", sans-serif;
	color: #404040;
}

.agci-post-content > p:first-child {
	font-size: 20px;
	line-height: 1.65;
	color: #262626;
	font-weight: 500;
	margin: 0 0 40px;
}

.agci-post-content p {
	font-size: 17px;
	line-height: 1.75;
	margin: 0 0 20px;
}

.agci-post-content h2 {
	scroll-margin-top: 100px;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 26px;
	letter-spacing: -0.02em;
	color: #010101;
	margin: 40px 0 20px;
}

/* Sous-titres : présents dans les pages légales (a, b, c…), pas dans les
   articles jusqu'ici. Krona One serait trop lourd à ce niveau. */
.agci-post-content h3 {
	scroll-margin-top: 100px;
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: 1.4;
	color: #010101;
	margin: 32px 0 14px;
}

.agci-post-content ul,
.agci-post-content ol {
	font-size: 17px;
	line-height: 1.8;
	margin: 0 0 36px;
	padding-left: 22px;
}

.agci-post-content li {
	margin-bottom: 6px;
}

.agci-post-content a {
	color: #010101;
	text-decoration: underline;
	text-decoration-color: #f3cc09;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.agci-post-content figure,
.agci-post-content .wp-block-image {
	margin: 36px 0 40px;
}

.agci-post-content figure img,
.agci-post-content .wp-block-image img {
	width: 100%;
	height: 340px;
	object-fit: cover;
	display: block;
	border-radius: 14px;
}

.agci-post-content figcaption {
	font-size: 13px;
	color: #a3a3a3;
	margin-top: 10px;
}

.agci-post-content blockquote,
.agci-post-content .wp-block-quote {
	position: relative;
	margin: 40px 0;
	padding: 32px 36px;
	background: #fafafa;
	border-left: 4px solid #f3cc09;
	border-radius: 0 14px 14px 0;
}

.agci-post-content blockquote p {
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: #262626;
	margin: 0 0 16px;
}

.agci-post-content blockquote cite {
	font-family: "Albert Sans", sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	color: #737373;
}

/* Encart auteur */
.agci-single-author {
	display: flex;
	gap: 22px;
	align-items: center;
	border-top: 1px solid #ececec;
	margin-top: 48px;
	padding: 36px 0 8px;
}

.agci-single-author-photo {
	display: block;
	width: 76px;
	height: 76px;
	border-radius: 100px;
	overflow: hidden;
	flex-shrink: 0;
	border: 3px solid #f3cc09;
}

.agci-single-author-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.agci-single-author-body {
	flex: 1;
	min-width: 0;
}

.agci-single-author-label {
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #a3a3a3;
}

.agci-single-author-line {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.agci-single-author-name {
	font-family: "Krona One", sans-serif;
	font-size: 16px;
	letter-spacing: -0.02em;
	color: #010101;
}

.agci-single-author-role {
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 13px;
	color: #737373;
}

.agci-single-author-body p {
	font-family: "Albert Sans", sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #525252;
	margin: 8px 0 0;
}

.agci-single-author-in {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 100px;
	border: 1px solid #e5e5e5;
	color: #262626;
	flex-shrink: 0;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.agci-single-author-in:hover {
	border-color: #f3cc09;
	color: #f3cc09;
}

/* --- Dans la même catégorie ----------------------------------------------- */
.agci-single-related {
	background: #fafafa;
	margin-top: 72px;
	padding: 64px 40px;
}

.agci-single-related-head {
	text-align: center;
	margin-bottom: 40px;
}

.agci-single-related-cat {
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #737373;
}

.agci-single-related-head h3 {
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 30px;
	letter-spacing: -0.02em;
	color: #010101;
	margin: 14px 0 0;
}

.agci-single-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	max-width: 1180px;
	margin: 0 auto;
}

/* Les cartes elles-mêmes sont celles de la page Blog (.agci-archive-card) :
   design et survol hérités, rien à redéclarer ici. Elles y font 170px de
   vignette pour une grille de 4 ; sur trois colonnes plus larges, on rend un
   peu de hauteur. */
.agci-single-related-grid .agci-archive-card .agci-archive-thumb {
	height: 200px;
}

/* --- Responsive ----------------------------------------------------------- */
@media ( max-width: 1024px ) {
	.agci-single-layout {
		flex-direction: column;
		gap: 40px;
		padding: 0 32px;
	}
	.agci-single-article {
		order: 1;
		width: 100%;
	}
	.agci-single-side {
		order: 2;
		position: static;
		width: 100%;
		max-width: 480px;
	}
	.agci-single-toc {
		display: none;
	}
	.agci-single-cover {
		padding: 0 32px;
	}
	.agci-single-cover-frame {
		height: 340px;
	}
	.agci-single-related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media ( max-width: 640px ) {
	.agci-single-hero {
		padding: 130px 20px 96px;
	}
	.agci-single-title {
		font-size: 27px;
		line-height: 1.3;
	}
	.agci-single-date {
		font-size: 12px;
	}
	.agci-single-cover {
		padding: 0 20px;
		margin-top: -48px;
	}
	.agci-single-cover-frame {
		height: 220px;
	}
	.agci-single-layout {
		padding: 0 20px;
		margin-top: 40px;
	}
	.agci-post-content > p:first-child {
		font-size: 18px;
	}
	.agci-post-content figure img,
	.agci-post-content .wp-block-image img {
		height: 220px;
	}
	.agci-post-content blockquote p {
		font-size: 18px;
	}
	.agci-single-author {
		flex-wrap: wrap;
	}
	.agci-single-related {
		padding: 48px 20px;
	}
	.agci-single-related-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   ARCHIVE DE CATÉGORIE (category.php) — déclinée de la page Blog
   ========================================================================= */

.agci-cathero-wrap {
	background: #fff;
	padding: 24px 24px 0;
}

/* Hérite de .agci-blog-hero (fond illustré + breadcrumb sombre). */
.agci-cathero {
	background: #f3cc09;
	border-radius: 28px;
	min-height: 340px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 20px;
	padding: 48px 60px 48px;
}

.agci-cathero-crumb {
	position: relative;
	z-index: 1;
}

.agci-cathero-title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -1px;
	color: #010101;
}

.agci-catarchive-body {
	padding-top: 0;
}

/* Barre sous le hero : retour au blog à gauche (CTA bulle, flèche vers
   l'arrière), compteur + description à droite. */
.agci-catarchive-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 36px 0 40px;
}

.agci-catarchive-meta {
	text-align: right;
}

.agci-catarchive-meta p {
	margin: 0;
	font-family: "Albert Sans", sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	color: #737373;
}

.agci-catarchive-bar .agci-blog-all {
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

/* La pastille passe à gauche du libellé : bulle et marges inversées (la
   marge négative gauche compense le padding → pastille alignée à la grille). */
.agci-catarchive-bar .agci-blog-all {
	padding: 6px 18px 6px 6px;
	margin: -6px -18px -6px -6px;
}

.agci-catarchive-bar .agci-blog-all::before {
	right: auto;
	left: 6px;
}

/* Flèche miroir : pointe vers la gauche (retour), symétrique du « Voir
   tout » qui pointe à droite. */
.agci-catarchive-back-btn svg {
	transform: rotate(-45deg) scaleX(-1);
}

/* Pagination */
.agci-catarchive-pagination {
	margin-top: 48px;
}

.agci-catarchive-pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.agci-catarchive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid #e5e5e5;
	border-radius: 100px;
	background: #fff;
	color: #404040;
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.agci-catarchive-pagination .page-numbers:hover {
	border-color: #262626;
}

.agci-catarchive-pagination .page-numbers.current {
	background: #262626;
	border-color: #262626;
	color: #fff;
}

.agci-catarchive-empty {
	font-family: "Albert Sans", sans-serif;
	font-size: 16px;
	color: #737373;
	text-align: center;
	padding: 24px 0 48px;
}

@media ( max-width: 900px ) {
	.agci-cathero {
		min-height: 260px;
		padding: 40px 28px 36px;
	}
	.agci-cathero-title {
		font-size: 32px;
	}
	/* Barre : lien et méta empilés, tout à gauche. */
	.agci-catarchive-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
	.agci-catarchive-meta {
		text-align: left;
	}
}

/* =========================================================================
   PAGE RÉALISATIONS (archive du CPT realisation)
   ========================================================================= */

.agci-realsx {
	padding: 56px 40px 90px;
	background: #fff;
}

.agci-realsx-inner {
	max-width: 1220px;
	margin: 0 auto;
}

/* --- Filtres par expertise ------------------------------------------------ */
.agci-realsx-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 34px;
}

.agci-realsx-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 100px;
	border: 1px solid #e5e5e5;
	background: #fff;
	font-family: "Albert Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	/* Le reset Hello repeint les liens en #c36 : on fige la palette AGCI. */
	color: #404040;
	text-decoration: none;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.agci-realsx-filter:hover,
.agci-realsx-filter:focus-visible {
	border-color: #010101;
	background: #fff;
	color: #010101;
}

.agci-realsx-filter.is-active,
.agci-realsx-filter.is-active:hover {
	background: #010101;
	border-color: #010101;
	color: #fff;
}

.agci-realsx-filter-n {
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 100px;
	background: #f4f4f2;
	color: #737373;
}

.agci-realsx-filter.is-active .agci-realsx-filter-n {
	background: #f3cc09;
	color: #010101;
}

/* --- Rangées bento --------------------------------------------------------
   Même grille que la section Réalisations de l'accueil ; le grand visuel
   change de côté d'une rangée à l'autre pour casser la répétition. */
.agci-realsx-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.agci-realsx-grid--flip > .agci-real-card--big {
	order: 2;
}

.agci-realsx-grid--solo {
	grid-template-columns: 1fr;
}

.agci-realsx-grid--solo .agci-real-card--big {
	height: 460px;
}

/* --- Pagination ----------------------------------------------------------- */
.agci-realsx-pager {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 44px;
}

.agci-realsx-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 100px;
	border: 1px solid #e5e5e5;
	background: #fff;
	font-family: "Albert Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #404040;
	text-decoration: none;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.agci-realsx-pager .page-numbers:hover {
	border-color: #010101;
	color: #010101;
}

.agci-realsx-pager .page-numbers.current {
	background: #f3cc09;
	border-color: #f3cc09;
	color: #010101;
}

.agci-realsx-empty {
	font-family: "Albert Sans", sans-serif;
	font-size: 16px;
	color: #737373;
	text-align: center;
	padding: 48px 0;
}

/* Pas de CTA en fin de page : celui du footer joue déjà ce rôle. */

/* --- Responsive ------------------------------------------------------------ */
@media ( max-width: 800px ) {
	.agci-realsx {
		padding: 40px 20px 64px;
	}
	/* La grille passe en colonne (règle partagée .agci-real-grid) : le flip
	   n'a plus de sens et remonterait la grande carte au mauvais endroit. */
	.agci-realsx-grid {
		grid-template-columns: 1fr;
	}
	.agci-realsx-grid--flip > .agci-real-card--big {
		order: 0;
	}
	.agci-realsx-grid .agci-real-card--big,
	.agci-realsx-grid .agci-real-stack {
		height: auto;
	}
	.agci-realsx-grid .agci-real-stack {
		grid-template-rows: auto;
	}
	.agci-realsx-grid .agci-real-card {
		aspect-ratio: 16 / 11;
	}
}

/* =========================================================================
   RÉALISATION (single realisation — étude de cas)
   ========================================================================= */

/* Respiration avant le footer, qui n'apporte aucune marge haute. Posée sur le
   conteneur plutôt que sur le dernier bloc : celui-ci varie selon les sections
   activées (navigation, témoignage, galerie…). */
.agci-cs {
	padding-bottom: 110px;
}

/* --- Hero sombre pleine largeur -------------------------------------------
   Même traitement que le hero de la page Services : l'illustration AGCI sert
   de masque à un aplat jaune, un dégradé venant de la gauche assoit le texte. */
.agci-cs-hero {
	position: relative;
	background: #010101;
	padding: 140px 24px 130px;
	overflow: hidden;
}

.agci-cs-hero::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 62%;
	background: #f3cc09;
	opacity: 0.92;
	-webkit-mask: url("../img/illu-blanche-agci.svg") right center / cover no-repeat;
	mask: url("../img/illu-blanche-agci.svg") right center / cover no-repeat;
	pointer-events: none;
}

.agci-cs-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(1, 1, 1, 0.94) 0%, rgba(1, 1, 1, 0.6) 58%, rgba(1, 1, 1, 0.25) 100%);
	pointer-events: none;
}

.agci-cs-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 64px;
}

/* Le fil d'ariane est celui du reste du site (.agci-breadcrumb, variante fond
   sombre) : rien à styler ici. */

.agci-cs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.agci-cs-tag {
	display: inline-flex;
	align-items: center;
	background: #f3cc09;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	padding: 8px 15px;
	border-radius: 100px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.agci-cs-tag:hover,
.agci-cs-tag:focus-visible {
	background: #fff;
	color: #010101;
}

.agci-cs-title {
	margin: 20px 0 0;
	max-width: 15ch;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 48px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
}

.agci-cs-lead {
	margin: 20px 0 0;
	max-width: 54ch;
	font-family: "Albert Sans", sans-serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

/* --- Visuel à cheval sur le hero ------------------------------------------ */
.agci-cs-cover {
	max-width: 1120px;
	margin: -80px auto 0;
	padding: 0 64px;
	position: relative;
	z-index: 5;
}

.agci-cs-cover-frame {
	height: 500px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
}

.agci-cs-cover-frame img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* --- Bandeau de résultats chiffrés ----------------------------------------- */
.agci-cs-kpis {
	padding: 0 24px;
	margin-top: 48px;
}

.agci-cs-kpis-inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 34px 40px;
	border-radius: 20px;
	background: #f4f4f2;
}

.agci-cs-kpis-label {
	display: block;
	margin-bottom: 22px;
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	font-size: 11.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #8c8c8a;
}

.agci-cs-kpis-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 28px;
}

.agci-cs-kpi {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-left: 18px;
	border-left: 3px solid #f3cc09;
}

.agci-cs-kpi-value {
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 1;
	color: #010101;
}

.agci-cs-kpi-label {
	font-family: "Albert Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	color: #737373;
}

/* --- Mise en page : fiche projet + récit ----------------------------------- */
.agci-cs-layout {
	max-width: 1120px;
	margin: 56px auto 0;
	padding: 0 64px;
	display: flex;
	gap: 56px;
	align-items: flex-start;
}

.agci-cs-side {
	position: sticky;
	top: 88px;
	width: 260px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.agci-cs-body {
	flex: 1;
	min-width: 0;
}

/* Fiche projet */
.agci-cs-facts {
	border: 1px solid #e5e5e5;
	border-radius: 14px;
	padding: 24px;
}

.agci-cs-facts-title {
	font-family: "Krona One", sans-serif;
	font-size: 14px;
	letter-spacing: -0.02em;
	color: #010101;
}

.agci-cs-facts-sep {
	height: 1px;
	background: #f0f0f0;
	margin: 16px 0;
}

.agci-cs-facts-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.agci-cs-facts-list div {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.agci-cs-facts-list dt {
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #a3a3a3;
}

.agci-cs-facts-list dd {
	margin: 0;
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.4;
	color: #010101;
}

.agci-cs-facts-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 20px;
}

.agci-cs-chip {
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1;
	padding: 7px 12px;
	border-radius: 100px;
	background: #f4f4f2;
	color: #404040;
}

.agci-cs-facts-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #010101;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.agci-cs-facts-link:hover,
.agci-cs-facts-link:focus-visible {
	color: #010101;
	opacity: 0.65;
}

.agci-cs-facts-link svg {
	transform: rotate(45deg);
}

/* Carte CTA noire (même gabarit que celle de l'article) */
.agci-cs-cta {
	position: relative;
	background: #010101;
	border-radius: 14px;
	padding: 26px 24px;
	overflow: hidden;
}

.agci-cs-cta-motif {
	position: absolute;
	top: -10%;
	right: -30%;
	height: 130%;
	width: auto;
	opacity: 0.12;
	pointer-events: none;
}

.agci-cs-cta-in {
	position: relative;
}

.agci-cs-cta-title {
	display: block;
	font-family: "Krona One", sans-serif;
	font-size: 16px;
	line-height: 1.45;
	letter-spacing: -0.02em;
	color: #fff;
}

.agci-cs-cta-in p {
	margin: 12px 0 0;
	font-family: "Albert Sans", sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.agci-cs-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	background: #f3cc09;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	padding: 11px 20px;
	border-radius: 100px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.agci-cs-cta-btn:hover,
.agci-cs-cta-btn:focus-visible {
	background: #fff;
	color: #010101;
}

/* --- Titres de section ------------------------------------------------------ */
.agci-cs-sectitle {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 26px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #010101;
}

/* --- Galerie ---------------------------------------------------------------- */
.agci-cs-gallery {
	padding: 80px 24px 0;
}

.agci-cs-gallery-inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 64px;
}

.agci-cs-gallery-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 28px;
}

.agci-cs-shot {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	background: #e7e7e4;
	aspect-ratio: 4 / 3;
}

.agci-cs-shot--wide {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 7;
}

.agci-cs-shot img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.agci-cs-shot:hover img {
	transform: scale(1.03);
}

/* --- Témoignage client ------------------------------------------------------ */
.agci-cs-quote {
	padding: 80px 24px 0;
}

.agci-cs-quote-inner {
	position: relative;
	max-width: 1120px;
	margin: 0 auto;
	padding: 52px 60px 48px;
	border-radius: 20px;
	background: #f3cc09;
}

/* Krona One n'embarque pas les guillemets français : le glyphe tombait en
   repli et se dessinait « >> ». Albert Sans les a. */
.agci-cs-quote-mark {
	display: block;
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	font-size: 64px;
	line-height: 0.7;
	color: rgba(1, 1, 1, 0.28);
}

.agci-cs-quote-text {
	margin: 18px 0 0;
	padding: 0;
	border: 0;
	max-width: 46ch;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: #010101;
}

.agci-cs-quote-who {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
}

.agci-cs-quote-name {
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	font-size: 14.5px;
	color: #010101;
}

.agci-cs-quote-role {
	font-family: "Albert Sans", sans-serif;
	font-weight: 500;
	font-size: 13.5px;
	color: rgba(1, 1, 1, 0.6);
}

/* --- Navigation projet précédent / suivant ----------------------------------
   Vignette du projet visé + libellé + titre ; la vignette passe à droite sur
   le lien « suivant » pour que la lecture suive le sens de la navigation. */
/* --- « Nos autres projets » : trois cartes en fin de réalisation ----------
   Remplace l'ancien couple précédent / suivant, qui laissait une carte seule
   dans une grille à deux colonnes sur la première et la dernière réalisation.
   ------------------------------------------------------------------------- */
.agci-cs-others {
	max-width: 1120px;
	margin: 96px auto 0;
	padding: 0 64px;
}

.agci-cs-others-head {
	margin-bottom: 28px;
	padding-bottom: 18px;
	border-bottom: 1px solid #e5e5e5;
}

/* Le lien vers l'archive est passé de l'en-tête au pied de la section : on
   parcourt les trois projets, puis on décide d'aller voir le reste. Centré,
   il se lit comme la suite naturelle de la grille plutôt que comme un
   raccourci posé à côté du titre. */
.agci-cs-others-foot {
	display: flex;
	justify-content: center;
	margin-top: 34px;
}

.agci-cs-others-title {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-size: 24px;
	letter-spacing: -0.02em;
	color: #010101;
}

/* Le lien « Toutes les réalisations » reprend le composant .agci-real-all de
   l'accueil (rond noir, flèche jaune, bulle qui se déploie au survol) : il n'a
   donc pas de style propre ici. La pastille maison qu'il y avait avant était
   jaune, comme la flèche — invisible. */

.agci-cs-others-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.agci-cs-other {
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.agci-cs-other-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	background: #e7e7e4;
}

.agci-cs-other-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.agci-cs-other:hover .agci-cs-other-thumb img,
.agci-cs-other:focus-visible .agci-cs-other-thumb img {
	transform: scale(1.06);
}

.agci-cs-other-client {
	margin-top: 14px;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #a3a3a3;
}

.agci-cs-other-title {
	margin-top: 6px;
	font-family: "Krona One", sans-serif;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: #010101;
}


/* --- Responsive -------------------------------------------------------------- */
@media ( max-width: 1000px ) {
	.agci-cs-layout {
		flex-direction: column;
		gap: 32px;
	}
	.agci-cs-side {
		position: static;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.agci-cs-facts,
	.agci-cs-cta {
		flex: 1 1 280px;
	}
}

@media ( max-width: 800px ) {
	.agci-cs-hero {
		padding: 110px 20px 90px;
	}
	.agci-cs-hero::before {
		width: 100%;
		opacity: 0.5;
	}
	/* Les gouttières de 64px passent du contenu interne au bloc de section :
	   sans ça le padding se cumulerait avec celui posé juste en dessous. */
	.agci-cs-hero-inner,
	.agci-cs-gallery-inner {
		padding-left: 0;
		padding-right: 0;
	}
	.agci-cs-cover,
	.agci-cs-kpis,
	.agci-cs-gallery,
	.agci-cs-quote,
	.agci-cs-layout,
	.agci-cs-others {
		padding-left: 20px;
		padding-right: 20px;
	}
	.agci-cs-title {
		font-size: 32px;
		max-width: none;
	}
	.agci-cs-cover {
		margin-top: -48px;
	}
	.agci-cs-cover-frame {
		height: 280px;
	}
	.agci-cs-kpis-inner,
	.agci-cs-quote-inner {
		padding: 28px 24px;
	}
	.agci-cs-quote-text {
		font-size: 18px;
	}
	.agci-cs-gallery-grid {
		grid-template-columns: 1fr;
	}
	.agci-cs-shot--wide {
		aspect-ratio: 4 / 3;
	}
	.agci-cs-others-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   MOBILE — header (pilule + menu plein écran) & page AGENCE (post 91)
   -------------------------------------------------------------------------
   Calé sur la maquette « Agence Mobile.dc.html » (cadre 440 px) :
     • header : pilule logo + burger noir à barres jaunes ; le menu horizontal
       et le panneau déroulant natifs d'Elementor sont remplacés par un
       panneau plein écran noir (construit en JS depuis le menu WP) ;
     • page Agence : hero resserré, sections à 22 px de marge, cartes équipe
       en rangées photo/texte, méthode en 2×2.
   Deux paliers : 1024 px (là où Elementor bascule sur le burger) pour le
   header, 767 px pour la page.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. HEADER — pilule compacte (≤ 1024 px, largeur d'apparition du burger)
   ------------------------------------------------------------------------- */
@media ( max-width: 1024px ) {

	/* Le bandeau incliné (marquee : rotate + scale) déborde volontairement à
	   droite pour rester pleine largeur une fois penché — d'où une barre de
	   défilement horizontale sur mobile. On rogne. `clip` — et non `hidden` —
	   ne crée PAS de conteneur de défilement : les éléments sticky continuent
	   de fonctionner.
	   Volontairement limité à Agence : sur les autres pages, un débordement
	   horizontal signale un vrai problème de mise en page qu'il vaut mieux
	   corriger que masquer. */
	body.page-id-91 [data-elementor-type="wp-page"] {
		overflow-x: clip;
	}

	/* La barre : pilule pleine largeur, logo à gauche / burger à droite.
	   Même géométrie en haut de page et au défilement (l'état compact
	   « fit-content » du desktop n'a pas de sens ici) — la pilule ne bouge
	   donc pas d'un pixel et seul son fond change : ici un fondu est sans
	   danger, et l'arrivée par le haut du desktop n'a pas lieu d'être. */
	.elementor-location-header .elementor-element-agcihd01,
	.elementor-location-header.agci-header-scrolled .elementor-element-agcihd01 {
		animation: none !important;
		transition: background-color 0.3s ease, box-shadow 0.3s ease;
		width: auto !important;
		max-width: none !important;
		margin: 12px 14px 0 !important;
		border-radius: 100px !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		--padding-top: 10px !important;
		--padding-bottom: 10px !important;
		--padding-left: 18px !important;
		--padding-right: 10px !important;
		--gap: 12px !important;
		--column-gap: 12px !important;
		--row-gap: 12px !important;
	}

	/* Sur Agence (91) et Services (144), le desktop force la pilule blanche dès
	   le haut de page à cause du hero sombre. En mobile le hero est une carte
	   encartée sur fond clair : la pilule reste transparente en haut de page et
	   ne devient blanche qu'au défilement (comme la maquette). */
	body.page-id-91 .elementor-location-header .elementor-element-agcihd01,
	body.page-id-144 .elementor-location-header .elementor-element-agcihd01 {
		background-color: transparent !important;
		border-radius: 100px !important;
		box-shadow: none;
	}

	body.page-id-91 .elementor-location-header.agci-header-scrolled .elementor-element-agcihd01,
	body.page-id-144 .elementor-location-header.agci-header-scrolled .elementor-element-agcihd01 {
		background-color: #ffffff !important;
		border-radius: 100px !important;
		box-shadow: 0 8px 26px rgba( 1, 1, 1, 0.1 );
	}

	/* Logo : 30 px, taille constante (pas de réduction au défilement). */
	.elementor-location-header .elementor-element-agcihd02,
	.agci-header-scrolled .elementor-element-agcihd02 {
		width: auto;
		flex: 0 0 auto;
	}

	.elementor-location-header .elementor-element-agcihd02 img,
	.agci-header-scrolled .elementor-element-agcihd02 img {
		width: 30px !important;
		height: auto;
	}

	/* Le widget menu ne garde plus que le burger. */
	.elementor-location-header .elementor-element-agcihd03 {
		width: auto !important;
		flex: 0 0 auto;
	}

	.elementor-location-header .elementor-nav-menu--main,
	.elementor-location-header .elementor-nav-menu--dropdown {
		display: none !important;
	}

	/* Burger de la maquette : pastille noire, deux barres jaunes inégales
	   alignées à droite (l'icône SVG d'Elementor est masquée). */
	.elementor-location-header .elementor-menu-toggle {
		display: flex !important;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		gap: 5px;
		width: auto;
		height: auto;
		padding: 15px 16px;
		border: none;
		border-radius: 100px;
		background-color: #010101 !important;
	}

	.elementor-location-header .elementor-menu-toggle svg,
	.elementor-location-header .elementor-menu-toggle i {
		display: none !important;
	}

	.elementor-location-header .elementor-menu-toggle::before,
	.elementor-location-header .elementor-menu-toggle::after {
		content: "";
		display: block;
		height: 2px;
		border-radius: 2px;
		background: #f3cc09;
	}

	.elementor-location-header .elementor-menu-toggle::before {
		width: 20px;
	}

	.elementor-location-header .elementor-menu-toggle::after {
		width: 13px;
	}

	/* Le CTA « Nous contacter » migre en pied du panneau plein écran. */
	.elementor-location-header .elementor-element-agcihd04 {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   2. MENU PLEIN ÉCRAN (.agci-mnav, construit par initMobileMenu)
   ------------------------------------------------------------------------- */
.agci-mnav {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	background: #010101;
	color: #fff;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.agci-mnav.is-open {
	visibility: visible;
	opacity: 1;
}

body.agci-mnav-open {
	overflow: hidden;
}

/* --- Barre du haut : logo blanc + fermeture ------------------------------ */
.agci-mnav-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 20px 10px;
	flex: none;
}

.agci-mnav-logo img {
	display: block;
	width: 30px;
	height: auto;
}

.agci-mnav-close {
	position: relative;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	background: none;
	cursor: pointer;
	padding: 0;
}

.agci-mnav-close::before,
.agci-mnav-close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 15px;
	height: 1.5px;
	margin: -1px 0 0 -7.5px;
	background: #fff;
	border-radius: 2px;
}

.agci-mnav-close::before {
	transform: rotate( 45deg );
}

.agci-mnav-close::after {
	transform: rotate( -45deg );
}

/* --- Panneaux (racine + sous-menus qui glissent) ------------------------- */
.agci-mnav-panels {
	position: relative;
	flex: 1;
	overflow: hidden;
}

.agci-mnav-panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	transition: transform 0.38s cubic-bezier( 0.22, 1, 0.36, 1 ), opacity 0.3s ease;
}

/* Contenu calé en haut, et non centré sur la hauteur : depuis que le
   sous-menu Services est déplié en fixe, la liste est trop longue pour être
   centrée sans risquer de dépasser sur les petits écrans. Le panneau défile
   au besoin plutôt que de rogner les dernières entrées. */
.agci-mnav-root {
	justify-content: flex-start;
	padding: 6px 26px 24px;
	gap: 2px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.agci-mnav-item {
	padding: 7px 0;
}

.agci-mnav.is-open .agci-mnav-item {
	animation: agci-mnav-in 0.4s ease both;
}

@keyframes agci-mnav-in {
	from {
		opacity: 0;
		transform: translateY( 14px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.agci-mnav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 13px 0;
	border: none;
	background: none;
	color: #fff;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

/* Le reset Hello repeint tout <button> au survol (fond #c36, texte blanc) :
   ces entrées sont des boutons, on réaffirme le fond transparent. */
.agci-mnav-link:hover,
.agci-mnav-link:focus,
.agci-mnav-link:focus-visible {
	background: none;
	color: #f3cc09;
}

/* Pastille jaune à flèche AGCI (entrées à sous-menu et têtes de groupe). */
.agci-mnav-arr {
	display: inline-flex;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background: #f3cc09;
}

.agci-mnav-arr::before {
	content: "";
	width: 14px;
	height: 14px;
	margin: auto;
	background-color: #010101;
	-webkit-mask: var( --agci-fleche ) no-repeat center / contain;
	mask: var( --agci-fleche ) no-repeat center / contain;
}

/* --- Accordéon des services -----------------------------------------------
   « Services » ne fait plus glisser un panneau : il déplie les trois rubriques
   sous l entrée. Le liseré à gauche les rattache visuellement au parent.

   La hauteur s anime par grid-template-rows 0fr → 1fr : pas de max-height
   arbitraire à maintenir, la course s ajuste au contenu réel. « hidden » ou
   « display:none » couperaient la transition — c est la doublure interne, en
   visibility, qui sort les liens du parcours clavier une fois repliée. */
/* Sous-menu de Services, déplié en fixe.

   C'était un accordéon à chevron : il fallait un geste pour découvrir trois
   entrées, et le libellé « Services » étant un <button>, la page Services
   elle-même n'était pas atteignable depuis le menu mobile. Les rubriques sont
   désormais toujours visibles, et le parent redevient un lien.

   Le liseré jaune à gauche les rattache visuellement à leur parent. */
.agci-mnav-sub {
	margin: 2px 0 6px;
	padding-left: 18px;
	border-left: 2px solid rgba( 243, 204, 9, 0.45 );
}

.agci-mnav-acc-link {
	display: block;
	padding: 9px 0;
	font-family: "Albert Sans", sans-serif;
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.35;
	color: rgba( 255, 255, 255, 0.78 );
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

.agci-mnav-acc-link:hover,
.agci-mnav-acc-link:focus-visible {
	color: #f3cc09;
	transform: translateX( 3px );
}


/* --- Pied : CTA + réseaux sociaux --------------------------------------- */
.agci-mnav-foot {
	flex: none;
	padding: 0 26px 34px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.agci-mnav-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	background: #f3cc09;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
	padding: 16px 24px;
	border-radius: 100px;
	text-decoration: none;
}

.agci-mnav-cta::after {
	content: "";
	width: 16px;
	height: 16px;
	background-color: #010101;
	-webkit-mask: var( --agci-fleche ) no-repeat center / contain;
	mask: var( --agci-fleche ) no-repeat center / contain;
}

.agci-mnav-soc {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

.agci-mnav-soc-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: #fff;
	opacity: 0.7;
}

.agci-mnav-soc-ic:hover {
	opacity: 1;
	color: #f3cc09;
}

.agci-mnav-soc-ic svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

@media ( prefers-reduced-motion: reduce ) {
	.agci-mnav,
	.agci-mnav-panel,
	.agci-mnav.is-open .agci-mnav-item {
		transition: none;
		animation: none;
	}
}

/* Au-delà du burger, le panneau n'a pas lieu d'être. */
@media ( min-width: 1025px ) {
	.agci-mnav {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   3. PAGE AGENCE (post 91) — palier téléphone
   ------------------------------------------------------------------------- */
@media ( max-width: 767px ) {

	/* ---- Hero : carte noire encartée ---------------------------------- */
	.elementor-element-agheroSec {
		--padding-top: 4px !important;
		--padding-bottom: 0px !important;
		--padding-left: 12px !important;
		--padding-right: 12px !important;
	}

	.elementor-element-agherocard {
		--padding-top: 44px !important;
		--padding-bottom: 40px !important;
		--padding-left: 22px !important;
		--padding-right: 22px !important;
		border-radius: 22px !important;
		/* La hauteur mini de 600 px (réglage Elementor) centrait le contenu et
		   laissait 100 px de vide sous le haut de la carte : sur mobile la carte
		   épouse son contenu, comme la maquette. */
		min-height: 0 !important;
	}

	.agci-hero-badge .elementor-heading-title {
		font-size: 9.5px;
		letter-spacing: 1.6px;
		padding: 8px 14px;
	}

	.agci-hero-h1 .elementor-heading-title {
		font-size: 32px;
		line-height: 1.2;
	}

	.agci-hero-h1 .hl {
		padding: 0 10px;
		border-radius: 10px;
	}

	.agci-hero-p .elementor-heading-title {
		font-size: 14px;
		line-height: 1.65;
	}

	/* Boutons empilés, pleine largeur. */
	.elementor-element-agherobtns {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px;
		width: 100%;
		--padding-top: 0px !important;
		--padding-bottom: 0px !important;
		--padding-left: 0px !important;
		--padding-right: 0px !important;
	}

	.agci-hero-btn1 .elementor-button,
	.agci-hero-btn2 .elementor-button {
		display: flex;
		justify-content: center;
		width: 100%;
		font-size: 14.5px;
		padding: 15px 24px;
	}

	/* ---- Marquee ------------------------------------------------------ */
	.elementor-element-agmarquee .elementor-icon-list-text {
		font-size: 14px;
	}

	.elementor-element-agmarquee .elementor-icon-list-item {
		margin-right: 22px !important;
	}

	/* ---- Sections : marges latérales de la maquette ------------------- */
	.elementor-element-agvaleurs,
	.elementor-element-aghistoire,
	.elementor-element-agmethode {
		--padding-left: 22px !important;
		--padding-right: 22px !important;
	}

	.agci-overline .elementor-heading-title {
		font-size: 10.5px;
		letter-spacing: 2.4px;
	}

	/* ---- Valeurs ------------------------------------------------------ */
	/* Ces trois-là ont une typographie réglée dans Elementor (règle par id
	   d'élément, plus prioritaire que nos classes) → !important obligatoire. */
	.elementor-element-agvaltitle .elementor-heading-title {
		font-size: 23px !important;
		line-height: 1.3 !important;
	}

	/* Comme la maquette : quatre cartes blanches, droites (pas d'alternance
	   sombre ni de rotation — illisible une fois empilées). */
	.agci-val-card--t1,
	.agci-val-card--t2,
	.agci-val-card--t3,
	.agci-val-card--t4 {
		transform: none;
	}

	.agci-val-card .elementor-icon-box-wrapper,
	.agci-val-card--dark .elementor-icon-box-wrapper {
		background: #fff;
		padding: 22px 20px;
		border-radius: 16px;
		box-shadow: 0 8px 22px rgba( 1, 1, 1, 0.06 );
	}

	.agci-val-card--dark .elementor-icon-box-title,
	.agci-val-card--dark .elementor-icon-box-title span,
	.agci-val-card--dark .elementor-icon-box-description {
		color: #010101;
	}

	/* Pastille d'icône : carré arrondi noir, icône jaune. */
	.agci-val-card .elementor-icon {
		width: 44px;
		height: 44px;
		border-radius: 12px;
		border: none !important;
	}

	.agci-val-card .elementor-icon i,
	.agci-val-card .elementor-icon svg {
		color: #f3cc09;
		fill: #f3cc09;
		font-size: 20px;
		width: 20px;
		height: 20px;
	}

	.agci-val-card .elementor-icon-box-title {
		margin-top: 14px;
	}

	.agci-val-card .elementor-icon-box-title,
	.agci-val-card .elementor-icon-box-title span {
		font-size: 16px;
	}

	.agci-val-card .elementor-icon-box-description {
		margin-top: 8px;
		font-size: 13px;
	}

	/* ---- Histoire ----------------------------------------------------- */
	.agci-histoire-h2 .elementor-heading-title {
		font-size: 21px;
		line-height: 1.35;
	}

	.agci-histoire-h2 .hl2 {
		padding: 0 6px;
		border-radius: 6px;
	}

	.agci-histoire-count .elementor-heading-title {
		font-size: 48px;
	}

	.agci-histoire-suffix .elementor-heading-title {
		font-size: 22px;
	}

	.agci-histoire-since .elementor-heading-title {
		font-size: 11px;
		letter-spacing: 1.5px;
	}

	.agci-histoire-p .elementor-heading-title {
		font-size: 13.5px;
		line-height: 1.7;
	}

	.agci-histoire-chips .elementor-icon-list-text {
		font-size: 11px;
		padding: 7px 12px;
	}

	.elementor-element-aghistR {
		margin-top: 28px;
	}

	.agci-histoire-img {
		transform: rotate( 1.5deg );
		border-radius: 14px;
		box-shadow: 0 16px 36px rgba( 1, 1, 1, 0.16 );
	}

	.agci-histoire-img img {
		height: 230px !important;
	}

	.agci-histoire-badge1 {
		top: -14px;
		left: -6px;
		transform: rotate( -5deg );
	}

	.agci-histoire-badge2 {
		bottom: -12px;
		right: -4px;
		transform: rotate( 3deg );
	}

	.agci-histoire-badge1 .elementor-heading-title,
	.agci-histoire-badge2 .elementor-heading-title {
		font-size: 11px;
		padding: 10px 16px;
		gap: 6px;
	}

	.agci-histoire-badge1 .elementor-heading-title::before,
	.agci-histoire-badge2 .elementor-heading-title::before {
		width: 11px;
		height: 11px;
	}

	/* ---- Équipe : rangées photo (110 px) + texte ---------------------- */
	.agci-team {
		padding: 48px 22px 44px;
	}

	.agci-team-head {
		margin-bottom: 24px;
	}

	.agci-team-badge {
		font-size: 9.5px;
		letter-spacing: 2px;
		padding: 8px 14px;
		margin-bottom: 14px;
	}

	.agci-team-title {
		font-size: 23px;
		line-height: 1.25;
	}

	.agci-team-sub {
		margin-top: 12px;
		font-size: 13px;
	}

	.agci-team-grid {
		gap: 12px;
	}

	.agci-team-card {
		flex-direction: row;
		align-items: stretch;
		gap: 14px;
		min-height: 0;
		padding: 14px;
		background: #f4f4f2;
		border-color: transparent;
		box-shadow: none;
		transform: none;
	}

	.agci-team-card:nth-child(odd),
	.agci-team-card:nth-child(even) {
		transform: none;
	}

	.agci-team-photo {
		width: 110px;
		height: auto;
		border-radius: 12px;
	}

	.agci-team-fade {
		background: linear-gradient( 180deg, rgba( 243, 204, 9, 0 ) 55%, rgba( 243, 204, 9, 0.8 ) 100% );
	}

	.agci-team-body {
		padding: 4px 0;
	}

	.agci-team-role {
		font-size: 10.5px;
		padding: 6px 12px;
	}

	.agci-team-dot {
		width: 6px;
		height: 6px;
	}

	.agci-team-name {
		margin: 10px 0 0;
		font-size: 17px;
		letter-spacing: -0.3px;
	}

	.agci-team-bio {
		margin-top: 6px;
		font-size: 12.5px;
		line-height: 1.55;
	}

	.agci-team-social {
		margin-top: 12px;
		padding-top: 0;
		gap: 8px;
	}

	.agci-team-ic {
		width: 32px;
		height: 32px;
	}

	.agci-team-cta {
		margin-top: 28px;
	}

	.agci-team-cta-pill {
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		padding: 12px 14px;
	}

	/* ---- Méthode : en-tête centré + grille 2×2 ------------------------ */
	/* La classe .agci-methode-head n'est pas émise en sortie DOM (container) :
	   on cible l'id d'élément. */
	.elementor-element-agmethhead {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center;
		--gap: 10px !important;
		--row-gap: 10px !important;
		margin-bottom: 24px;
	}

	.elementor-element-agmethheadL {
		align-items: center !important;
		text-align: center;
	}

	.agci-methode-h2 .elementor-heading-title {
		font-size: 23px;
		line-height: 1.3;
	}

	.agci-methode-intro .elementor-heading-title {
		max-width: none;
		font-size: 13px;
	}

	/* La règle générique passe les grilles à 1 colonne sous 560 px ; la
	   maquette garde les 4 étapes en 2×2 (cartes courtes, texte compact). */
	.elementor-element-agmethgrid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
		gap: 10px !important;
	}

	.elementor-element-agmeth1,
	.elementor-element-agmeth2,
	.elementor-element-agmeth3,
	.elementor-element-agmeth4 {
		--padding-top: 18px !important;
		--padding-bottom: 18px !important;
		--padding-left: 16px !important;
		--padding-right: 16px !important;
		--gap: 6px !important;
		--row-gap: 6px !important;
		border-radius: 16px !important;
	}

	/* Numéros : plus de pastille jaune, un simple chiffre Krona (or foncé
	   sur les cartes claires, jaune sur les sombres) — comme la maquette. */
	.agci-step-num .elementor-heading-title {
		font-size: 13px;
	}

	.agci-step-num--chip .elementor-heading-title {
		display: inline;
		background: none;
		padding: 0;
		color: #c7a707;
	}

	.agci-step-title .elementor-heading-title {
		font-family: "Krona One", sans-serif;
		font-weight: 400;
		/* Krona est large : en colonne de ~157 px, « On accompagne » ne tient
		   qu'à cette taille (et avec 16 px de rembourrage de carte). */
		font-size: 13.5px;
		line-height: 1.3;
	}

	.agci-step-desc .elementor-heading-title {
		font-size: 12.5px;
	}

	/* ---- Footer ------------------------------------------------------- */
	.elementor-element-ftwrap01 {
		--padding-top: 60px !important;
		--padding-bottom: 10px !important;
		--padding-left: 10px !important;
		--padding-right: 10px !important;
	}

	.elementor-element-ftdark01 {
		--padding-left: 16px !important;
		--padding-right: 16px !important;
		--padding-bottom: 0px !important;
		/* Le « N » en filigrane est calibré pour une largeur de bureau : réduit
		   à la largeur d'un téléphone il ne se lit plus comme un motif, juste
		   comme une salissure derrière le texte. */
		background-image: none !important;
	}

	.elementor-element-ftcta001 {
		--padding-top: 40px !important;
		--padding-bottom: 36px !important;
		--padding-left: 20px !important;
		--padding-right: 20px !important;
	}

	.elementor-element-ftctah01 .elementor-heading-title {
		font-size: 20px !important;
		line-height: 1.35 !important;
	}

	.elementor-element-ftctap01 {
		font-size: 13px !important;
		line-height: 1.6 !important;
	}

	/* Colonnes de liens : bloc identité en pleine largeur, puis 2 colonnes. */
	.elementor-element-ftgrid01 {
		flex-wrap: wrap;
		gap: 22px 24px;
		--padding-top: 32px !important;
		--padding-bottom: 20px !important;
	}

	/* Bloc identité : logo et baseline côte à côte, réseaux sur leur ligne.
	   Empilés, les trois éléments mangeaient une hauteur d'écran pour trois
	   lignes de contenu. */
	.elementor-element-ftcol001 {
		width: 100% !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 14px;
		row-gap: 14px;
	}

	.elementor-element-ftlogo01 {
		flex: none;
	}

	/* La marge basse de 18px du widget (posée par le CSS de page d'Elementor,
	   en `margin` raccourci) décalait la baseline vers le haut : l'alignement
	   flex se calcule sur la boîte MARGE, pas sur la boîte de bordure — le
	   texte se retrouvait 9px plus haut que le logo. Elle n'a plus d'objet ici,
	   la ligne étant horizontale. */
	.elementor-element-ftdesc01 {
		flex: 1;
		min-width: 0;
		margin-bottom: 0 !important;
	}

	/* La baseline traînait la marge basse par défaut de son <p> : 15px de vide
	   sous le texte, à l'intérieur de la boîte du widget. En centrant les deux
	   blocs, c'est cette boîte-là qui se centrait — le texte, lui, paraissait
	   remonté par rapport au logo. Sans cette marge, les deux se centrent
	   réellement l'un sur l'autre. */
	.elementor-element-ftdesc01 p {
		margin: 0;
	}

	.elementor-element-ftsoc001 {
		flex-basis: 100%;
	}

	/* Le widget occupe toute la ligne : sans consigne, Elementor centre ses
	   icônes, qui se retrouvaient décalées par rapport au logo au-dessus.
	   L'alignement se joue par `text-align` posé sur le WIDGET par le CSS de
	   page (et la classe e-grid-align-center), pas sur le conteneur interne —
	   d'où le !important, le sélecteur d'Elementor étant plus spécifique. */
	.elementor-element-ftsoc001 {
		text-align: left !important;
	}

	.elementor-element-ftsoc001 .elementor-social-icons-wrapper {
		justify-content: flex-start;
		margin-bottom: 0;
	}

	.elementor-element-ftcol002,
	.elementor-element-ftcol003 {
		width: calc( 50% - 12px ) !important;
	}

	/* Ressources en pleine largeur, liens sur une ligne qui se remplit : le
	   libellé « Guide agence packaging » se coupait en deux dans une demi-
	   colonne. Les entrées à venir se rangeront à sa suite. */
	.elementor-element-ftcol004 {
		width: 100% !important;
	}

	.elementor-element-ftc4l001 .elementor-icon-list-items {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px 22px;
	}

	.elementor-element-ftnews01 {
		--padding-top: 4px !important;
		min-height: 0 !important;
	}

	.elementor-element-ftnewh01 .elementor-heading-title {
		font-size: 15px !important;
		line-height: 1.4 !important;
	}

	/* Newsletter : champ et bouton calibrés pour le bureau, trop gros ici —
	   le libellé du bouton frôlait le bord du champ. */
	.elementor-element-ftform01 input[type="email"],
	.elementor-element-ftform01 .elementor-button {
		font-size: 13.5px !important;
	}

	.elementor-element-ftform01 input[type="email"] {
		padding: 0 18px !important;
	}

	/* Barre légale : empilée à gauche, avec de l'air autour — elle terminait le
	   footer collée au bord. */
	.elementor-element-ftbot001 {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px;
		--padding-top: 18px !important;
		--padding-bottom: 26px !important;
	}

	/* Un lien légal par ligne : sur une seule ligne ils se répartissaient sur
	   deux rangs, « Retour en haut » se retrouvant seul en bas à gauche.

	   « Retour en haut » est sorti du flux et calé en bas à droite : il se pose
	   ainsi sur la ligne du dernier lien légal, quel que soit leur nombre. Un
	   placement en grille aurait demandé de coder le numéro de rangée, donc de
	   le corriger à chaque lien ajouté. */
	.elementor-element-ftlegal1 {
		width: 100%;
	}

	.elementor-element-ftlegal1 .elementor-icon-list-items {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 9px;
	}

	.elementor-element-ftlegal1 .elementor-icon-list-item:last-child {
		position: absolute;
		right: 0;
		bottom: 0;
	}
}

/* -------------------------------------------------------------------------
   4. PAGE BLOG (post 120) — palier téléphone
   -------------------------------------------------------------------------
   Maquette « Blog Mobile.dc.html ». Deux changements de structure :
     • les 2 articles secondaires de la section vedette passent en rangées
       vignette 86×70 + texte (au lieu de cartes pleine largeur empilées) ;
     • chaque rangée de catégorie devient un carrousel à défilement
       horizontal de cartes de 180 px — c'est ce qui fait passer la page de
       ~9 700 px de haut à quelque chose de parcourable au pouce.
   ------------------------------------------------------------------------- */
@media ( max-width: 767px ) {

	/* ---- Hero jaune --------------------------------------------------- */
	.elementor-element-blheroSec {
		--padding-top: 4px !important;
		--padding-bottom: 0px !important;
		--padding-left: 12px !important;
		--padding-right: 12px !important;
	}

	.elementor-element-blherocard {
		--padding-top: 38px !important;
		--padding-bottom: 30px !important;
		--padding-left: 22px !important;
		--padding-right: 22px !important;
		border-radius: 22px !important;
		min-height: 0 !important;
	}

	/* La maquette garde l'illustration AGCI sur mobile (la règle 900 px la
	   masquait) : plus étroite et décalée à droite pour ne pas passer sous
	   le texte. */
	/* :not(.agci-services-hero) — le hero Services partage la classe mais son
	   ::before est un masque jaune, volontairement masqué sur mobile. */
	.agci-blog-hero:not( .agci-services-hero )::before {
		display: block;
		width: 62%;
		right: -4%;
		/* `contain` et non `cover` : en 366×236 le cadrage cover agrandissait le
		   tracé au point de barrer le titre. */
		background-size: contain;
		opacity: 0.22;
	}

	.elementor-element-blherocard .agci-breadcrumb p {
		font-size: 10px;
		letter-spacing: 1.8px;
		gap: 9px;
	}

	.elementor-element-blheroh1 .elementor-heading-title {
		font-size: 28px !important;
		line-height: 1.15;
	}

	.elementor-element-blherop,
	.elementor-element-blherop p {
		font-size: 13.5px !important;
		line-height: 1.6;
		max-width: 280px;
		color: rgba( 1, 1, 1, 0.75 ) !important;
	}

	/* ---- Archive : les sections portent elles-mêmes leur gouttière, pour
	   que les carrousels de catégorie puissent filer jusqu'aux bords ---- */
	/* Gouttière retirée UNIQUEMENT sur la page Blog : le widget .agci-archive
	   sert aussi aux archives de catégorie, où les cartes doivent garder leur
	   marge (elles ne défilent pas horizontalement). */
	body.page-id-120 .agci-archive {
		padding: 12px 0 40px;
	}

	.agci-archive-news {
		padding: 24px 22px 0;
		margin-bottom: 34px;
	}

	.agci-archive-sechead {
		gap: 14px;
		margin-bottom: 18px;
	}

	.agci-archive-news .agci-archive-sectitle {
		font-size: 18px;
	}

	.agci-archive-sectitle {
		font-size: 16px;
	}

	.agci-archive-secnote {
		font-size: 12.5px;
		text-align: right;
	}

	/* ---- Section vedette : 1 grande carte + 2 rangées compactes -------- */
	.agci-archive-news-grid {
		gap: 20px;
	}

	.agci-archive-featured-media {
		height: 190px;
		border-radius: 14px;
	}

	.agci-archive-featured .agci-archive-date {
		margin-top: 12px;
		font-size: 10px;
		letter-spacing: 1.2px;
		gap: 7px;
	}

	.agci-archive-featured .agci-archive-date::before {
		width: 5px;
		height: 5px;
	}

	.agci-archive-featured-title {
		margin-top: 7px;
		font-size: 16px;
		line-height: 1.45;
	}

	.agci-archive-featured .agci-archive-excerpt {
		margin-top: 8px;
		font-size: 13px;
		line-height: 1.5;
	}

	/* Rangée vignette + texte. Le markup de la carte est plat (vignette,
	   date, titre en frères) : une grille 2 colonnes / 2 lignes place la
	   vignette à cheval sur les deux lignes, sans wrapper supplémentaire. */
	.agci-archive-news-side {
		gap: 0;
	}

	.agci-archive-news-side .agci-archive-card {
		display: grid;
		grid-template-columns: 86px minmax( 0, 1fr );
		column-gap: 13px;
		align-items: center;
		padding: 13px 0;
		border-top: 1px solid rgba( 1, 1, 1, 0.08 );
	}

	.agci-archive-news-side .agci-archive-card .agci-archive-thumb {
		grid-column: 1;
		grid-row: 1 / 3;
		width: 86px;
		height: 70px;
		border-radius: 10px;
	}

	.agci-archive-news-side .agci-archive-card .agci-archive-date {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		align-self: end;
		margin-top: 0;
		font-size: 10px;
		letter-spacing: 1px;
		gap: 6px;
	}

	/* La vignette est tombée à 86px de large : une pastille posée dessus en
	   déborderait dès que la catégorie dépasse trois lettres (« Marketing
	   Digital » passait sur deux lignes, hors de l'image). Elle rejoint donc
	   la grille, à l'autre bout de la ligne de date. */
	.agci-archive-news-side .agci-archive-card .agci-archive-cattag {
		position: static;
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		align-self: end;
		padding: 2px 8px;
		font-size: 9.5px;
	}

	.agci-archive-news-side .agci-archive-card .agci-archive-date::before {
		width: 5px;
		height: 5px;
	}

	.agci-archive-news-side .agci-archive-cardtitle {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		margin-top: 5px;
		font-family: "Albert Sans", sans-serif;
		font-weight: 800;
		font-size: 13.5px;
		line-height: 1.4;
		letter-spacing: 0;
	}

	/* ---- Rangées de catégorie : carrousel horizontal ------------------- */
	.agci-archive-cat {
		margin-bottom: 34px;
	}

	.agci-archive-cat > .agci-archive-sechead {
		padding: 0 22px 12px;
		margin-bottom: 14px;
		flex-wrap: wrap;
	}

	/* Le CTA bulle « Nos autres articles … » compacté pour tenir à côté du
	   nom de catégorie. */
	.agci-archive-cat .agci-blog-all {
		font-size: 11.5px;
		gap: 8px;
	}

	.agci-archive-cat .agci-blog-all-btn {
		width: 24px;
		height: 24px;
	}

	/* La bulle jaune (::before) doit rester pile sous la pastille au repos,
	   sinon elle dépasse en anneau autour d'elle. */
	.agci-archive-cat .agci-blog-all::before {
		width: 24px;
		height: 24px;
		margin-top: -12px;
	}

	.agci-archive-cat .agci-blog-all-btn svg {
		width: 11px;
		height: 11px;
	}

	.agci-archive-cat .agci-archive-row {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		padding: 2px 22px 6px;
	}

	.agci-archive-cat .agci-archive-row::-webkit-scrollbar {
		display: none;
	}

	.agci-archive-cat .agci-archive-row .agci-archive-card {
		width: 180px;
		flex: none;
		scroll-snap-align: start;
	}

	.agci-archive-cat .agci-archive-row .agci-archive-thumb {
		width: 100%;
		height: 115px;
	}

	.agci-archive-cat .agci-archive-row .agci-archive-date {
		margin-top: 10px;
		font-size: 9.5px;
		letter-spacing: 1px;
		gap: 6px;
	}

	.agci-archive-cat .agci-archive-row .agci-archive-date::before {
		width: 5px;
		height: 5px;
	}

	.agci-archive-cat .agci-archive-row .agci-archive-cardtitle {
		margin-top: 7px;
		font-size: 12.5px;
		line-height: 1.5;
	}
}

/* -------------------------------------------------------------------------
   5. ARTICLE (single post) — palier téléphone
   -------------------------------------------------------------------------
   Maquette « Article Mobile.dc.html » : le hero jaune pleine largeur laisse
   place à un en-tête BLANC centré (fil d'ariane, titre, pastille catégorie,
   date) suivi du visuel — le visuel ne chevauche donc plus le hero.
   ------------------------------------------------------------------------- */
@media ( max-width: 767px ) {

	/* ---- En-tête blanc centré ----------------------------------------- */
	.agci-single-hero {
		background: #fff;
		padding: 14px 22px 0;
		text-align: center;
	}

	/* Le motif AGCI n'a plus de fond jaune où s'imprimer (et débordait). */
	.agci-single-hero-motif {
		display: none;
	}

	/* Le style est porté par .agci-breadcrumb p : cibler le conteneur ne
	   suffirait pas, sa taille de police est déclarée, donc non héritée. */
	.agci-single-crumb p {
		font-size: 10.5px;
		gap: 7px;
	}

	.agci-single-title {
		margin: 16px 0 14px;
		font-size: 22px;
		line-height: 1.35;
	}

	/* Pastille catégorie au-dessus de la date, comme la maquette. */
	.agci-single-meta {
		flex-direction: column;
		gap: 10px;
	}

	.agci-single-cat {
		font-size: 12px;
		padding: 4px 13px;
	}

	.agci-single-date {
		font-size: 11.5px;
		letter-spacing: 0.12em;
	}

	/* Le visuel suit l'en-tête au lieu de le chevaucher. */
	.agci-single-cover {
		padding: 0 22px;
		margin-top: 22px;
	}

	.agci-single-cover-frame {
		height: 200px;
		border-radius: 14px;
		box-shadow: 0 18px 44px rgba( 0, 0, 0, 0.15 );
	}

	.agci-single-layout {
		padding: 0 22px;
		margin-top: 28px;
		gap: 24px;
	}

	/* ---- Barre « Résumer avec » : défilement horizontal, pas de retour
	   à la ligne (5 chips = 2 lignes et demie sinon) ------------------- */
	.agci-single-ai {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 9px;
		margin-bottom: 24px;
		padding-bottom: 6px;
	}

	.agci-single-ai::-webkit-scrollbar {
		display: none;
	}

	.agci-single-ai-label {
		font-size: 10.5px;
	}

	.agci-single-ai-chips {
		flex-wrap: nowrap;
		gap: 9px;
	}

	.agci-single-ai-chips a {
		flex: none;
		font-size: 12.5px;
		padding: 6px 13px 6px 7px;
	}

	.agci-single-ai-chips img {
		width: 18px;
		height: 18px;
	}

	/* ---- Corps d'article ---------------------------------------------- */
	.agci-post-content > p:first-child {
		font-size: 16px;
		line-height: 1.65;
		margin-bottom: 28px;
	}

	.agci-post-content p,
	.agci-post-content ul,
	.agci-post-content ol {
		font-size: 14.5px;
		line-height: 1.75;
	}

	.agci-post-content ul,
	.agci-post-content ol {
		line-height: 1.8;
		margin-bottom: 24px;
		padding-left: 20px;
	}

	.agci-post-content h2 {
		font-size: 18px;
		margin: 28px 0 14px;
	}

	.agci-post-content figure img,
	.agci-post-content .wp-block-image img {
		height: 190px;
	}

	.agci-post-content figcaption {
		font-size: 11.5px;
	}

	.agci-post-content blockquote p {
		font-size: 15px;
		line-height: 1.6;
	}

	/* ---- Auteur : photo 58 px, bloc aligné en haut -------------------- */
	.agci-single-author {
		align-items: flex-start;
		gap: 14px;
		margin-top: 32px;
		padding-top: 24px;
	}

	.agci-single-author-photo {
		width: 58px;
		height: 58px;
	}

	.agci-single-author-label {
		font-size: 10px;
	}

	.agci-single-author-line {
		gap: 4px 10px;
		margin-top: 4px;
	}

	.agci-single-author-name {
		font-size: 14px;
	}

	.agci-single-author-role {
		font-size: 12px;
	}

	.agci-single-author-body p {
		font-size: 12.5px;
	}

	.agci-single-author-in {
		width: 36px;
		height: 36px;
	}

	/* ---- Partage puis CTA (ordre de la maquette) ---------------------- */
	.agci-single-side {
		max-width: none;
		gap: 20px;
	}

	.agci-single-share {
		order: 1;
	}

	.agci-single-cta {
		order: 2;
		padding: 24px 22px;
		border-radius: 14px;
	}

	.agci-single-cta-title {
		font-size: 15px;
		line-height: 1.45;
	}

	.agci-single-cta-in p {
		font-size: 12.5px;
	}

	.agci-single-cta-btn {
		font-size: 12.5px;
		padding: 11px 18px;
	}

	.agci-single-share-label {
		font-size: 10.5px;
	}

	.agci-single-share-btn {
		width: 32px;
		height: 32px;
	}

	/* ---- Dans la même catégorie --------------------------------------- */
	.agci-single-related {
		padding: 36px 22px 44px;
	}

	.agci-single-related-head {
		margin-bottom: 22px;
	}

	.agci-single-related-cat {
		font-size: 11px;
	}

	.agci-single-related-head h3 {
		font-size: 19px;
		margin-top: 10px;
	}

	.agci-single-related-grid {
		gap: 14px;
	}

	/* Les cartes sont celles du blog : seule la hauteur de vignette, propre à
	   cette grille, se règle ici. Le reste suit .agci-archive-card. */
	.agci-single-related-grid .agci-archive-card .agci-archive-thumb {
		height: 150px;
	}
}

/* -------------------------------------------------------------------------
   6. ACCUEIL (post 59) — palier téléphone
   -------------------------------------------------------------------------
   Maquette « Accueil Mobile.dc.html » (cadre 440 px). Trois changements de
   structure, le reste n'est qu'une mise à l'échelle :
     • le hero passe en carte de 560 px avec un double dégradé — le titre en
       52 px débordait de l'écran et l'image sans voile rendait le texte
       illisible ;
     • le carrousel de services devient trois cartes empilées, sans visuel :
       sur un écran de 400 px un carrousel de cartes en 84 vw ne montre
       qu'une expertise sur trois, alors que la page en promet trois ;
     • les témoignages passent en défilement horizontal aimanté (une carte
       par écran) : la maquette met une carte unique à flèches, le glissement
       natif rend le même service sans bouton de 34 px à viser.
   ------------------------------------------------------------------------- */
@media ( max-width: 767px ) {

	/* ---- Hero : carte encartée, texte en bas ------------------------- */
	body.home .elementor-element-herosec1 {
		--padding-top: 4px !important;
		--padding-right: 12px !important;
		--padding-bottom: 0px !important;
		--padding-left: 12px !important;
	}

	/* Plus de min-height ici : la hauteur vient de --agci-hero-fold, plus haut,
	   pour que le bandeau de logos reste visible au premier écran. Le 560px
	   fixe qui était posé ici le repoussait dessous sur les petits mobiles. */
	body.home .elementor-element-herocard1 {
		--padding-top: 26px !important;
		--padding-right: 22px !important;
		--padding-bottom: 24px !important;
		--padding-left: 22px !important;
		border-radius: 22px !important;
	}

	/* Le dégradé d'Elementor est réglé pour le format paysage : sur un écran
	   étroit il laisse le texte sur des zones claires de la photo. On le
	   double d'un voile bas, comme la maquette. */
	body.home .elementor-element-herocard1::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background:
			linear-gradient(200deg, rgba(1, 1, 1, 0) 20%, rgba(1, 1, 1, 0.85) 85%),
			linear-gradient(0deg, rgba(1, 1, 1, 0.6) 0%, rgba(1, 1, 1, 0) 50%),
			rgba(1, 1, 1, 0.2);
	}

	/* Les marges du bloc ci-dessous suffisent : l'écart du conteneur s'y
	   ajouterait et le texte occuperait toute la carte, jusque sur les
	   zones claires de la photo. */
	body.home .elementor-element-herocontent {
		width: 100% !important;
		--gap: 0px !important;
		--row-gap: 0px !important;
		--column-gap: 0px !important;
	}

	body.home .elementor-element-herobadge .elementor-heading-title {
		font-size: 10px !important;
		letter-spacing: 2.4px !important;
		line-height: 1.4;
	}

	body.home .elementor-element-heroh1 .elementor-heading-title {
		font-size: 29px !important;
		line-height: 1.2 !important;
		margin-top: 14px;
	}

	body.home .elementor-element-herop1 {
		font-size: 14.5px !important;
		margin-top: 14px;
	}

	/* Bouton principal pleine largeur, lien secondaire dessous. */
	body.home .elementor-element-herobtns1 {
		--flex-direction: column !important;
		--align-items: stretch !important;
		--gap: 10px !important;
		--row-gap: 10px !important;
		--column-gap: 10px !important;
		margin-top: 22px !important;
	}

	body.home .elementor-element-herobtn1 .elementor-button {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	body.home .elementor-element-herobtn2 .elementor-button {
		font-size: 13.5px !important;
	}

	/* ---- Bandeau de logos défilant ----------------------------------- */
	body.home .agci-hero-marquee {
		--padding-top: 0px !important;
		--padding-bottom: 0px !important;
	}

	body.home .agci-hero-marquee .elementor-icon-list-item {
		opacity: 0.35;
	}

	body.home .agci-hero-marquee .elementor-icon-list-text {
		font-size: 13.5px !important;
	}

	/* ---- À propos ---------------------------------------------------- */
	body.home .elementor-element-aproposec {
		--padding-top: 44px !important;
		--padding-right: 22px !important;
		--padding-bottom: 48px !important;
		--padding-left: 22px !important;
	}

	body.home .elementor-element-aprolead .elementor-heading-title {
		font-size: 18.5px !important;
		line-height: 1.6 !important;
		letter-spacing: -0.2px;
	}

	/* Les trois chiffres tiennent sur une ligne : empilés, ils poussaient
	   la section à deux écrans de haut pour trois nombres. */
	body.home .elementor-element-aprostats {
		--e-con-grid-template-columns: repeat(3, 1fr) !important;
		--grid-auto-flow: row !important;
		--gap: 14px !important;
		--column-gap: 14px !important;
		--row-gap: 14px !important;
	}

	body.home .elementor-element-aprostats .elementor-heading-title {
		font-size: 21px !important;
		line-height: 1 !important;
	}

	body.home .elementor-element-aprolab1 .elementor-heading-title,
	body.home .elementor-element-aprolab2 .elementor-heading-title,
	body.home .elementor-element-aprolab3 .elementor-heading-title {
		font-size: 11px !important;
		line-height: 1.35 !important;
	}

	/* ---- Services : trois cartes empilées, sans visuel ---------------- */
	.agci-services--carousel .agci-services-nav {
		display: none;
	}

	.agci-services--carousel .agci-services-viewport {
		padding: 0 12px;
		overflow: visible;
	}

	/* Le JS du carrousel translate la piste : on la neutralise, sinon la
	   colonne partirait hors écran au premier clic sur une flèche. */
	.agci-services--carousel .agci-services-track {
		flex-direction: column;
		gap: 10px;
		transform: none !important;
	}

	.agci-services--carousel .agci-svc-card {
		--svc-notch-w: 72px;
		--svc-notch-h: 46px;
		--svc-notch-r: 18px;
		width: 100%;
		min-height: 248px;
	}

	.agci-services--carousel .agci-svc-body {
		padding: 68px 20px 22px;
	}

	.agci-services--carousel .agci-svc-title {
		font-size: 16.5px;
		margin-bottom: 12px;
	}

	.agci-services--carousel .agci-svc-desc {
		font-size: 13.5px;
	}

	.agci-services--carousel .agci-svc-chips {
		padding-top: 16px;
		gap: 7px;
	}

	.agci-services--carousel .agci-svc-chip {
		font-size: 11.5px;
		padding: 7px 13px;
		letter-spacing: 0.3px;
		text-transform: none;
	}

	.agci-services--carousel .agci-svc-media {
		display: none;
	}

	.agci-services--carousel .agci-svc-num {
		font-size: 16px;
	}

	/* ---- Témoignages : une carte par écran, au doigt ------------------ */
	.agci-testi-grid {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin: 0 -22px;
		padding: 0 22px;
	}

	.agci-testi-grid::-webkit-scrollbar {
		display: none;
	}

	.agci-testi-card {
		flex: none;
		/* Un bout de la carte suivante dépasse : c'est ce qui signale qu'on
		   peut glisser, sans avoir à ajouter des points ou des flèches. */
		width: 84%;
		scroll-snap-align: center;
		border-radius: 18px;
		padding: 26px 24px;
	}

	.agci-testi-text {
		font-size: 14px;
		margin-bottom: 20px;
	}

	/* ---- Mur de logos : trois colonnes -------------------------------- */
	.agci-testi-logos-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 18px 10px;
	}

	.agci-testi-logo-name {
		font-size: 11.5px;
	}

	/* Les noms sont en nowrap : sans min-width, une cellule de grille prend la
	   largeur de son texte et pousse la page (« Cave de Provence », « Provence
	   Habitat »…). On borne la cellule ; l'ellipse sert de filet.

	   Contenu calé à gauche et non centré : des noms de longueurs très
	   différentes, centrés dans leur cellule, ne s'alignent sur rien et se
	   lisent comme un nuage. À gauche, les colonnes se répondent. */
	.agci-testi-logo {
		min-width: 0;
		justify-content: flex-start;
	}

	.agci-testi-logo-name {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.agci-testi-logo-sq {
		width: 13px;
		height: 13px;
	}

	/* ---- Blog : vedette puis rangées vignette + titre ------------------ */
	.agci-blog-featured-media {
		height: 190px;
	}

	.agci-blog-featured-title {
		font-size: 16.5px;
	}

	.agci-blog-post {
		gap: 14px;
		padding: 14px 0;
	}

	.agci-blog-post-thumb {
		width: 86px;
		height: 72px;
		flex: none;
	}

	.agci-blog-post-title {
		font-size: 13.5px;
		line-height: 1.4;
	}

	/* L'accroche double la hauteur de chaque rangée pour un texte tronqué
	   à trois mots : la date et le titre suffisent à choisir. */
	.agci-blog-post-excerpt {
		display: none;
	}
}

/* =========================================================================
   COCON SÉMANTIQUE (widget agci-cocon — page pilier « Guide agence packaging »)
   -------------------------------------------------------------------------
   Maquette « Cocon sémantique Agence packaging.dc.html » : un sommaire en
   pilules ancrées, puis une carte grise par question principale — numéro
   ajouré, lien pilier à pastille, et la liste des articles satellites sur
   deux colonnes avec deux niveaux de profondeur.
   ========================================================================= */

.agci-cocon {
	background: #fff;
	padding: 64px 40px 100px;
}

.agci-cocon-inner {
	max-width: 1120px;
	margin: 0 auto;
}

/* --- Sommaire ------------------------------------------------------------- */
.agci-cocon-tochead {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.agci-cocon-toclabel {
	font-family: "Albert Sans", sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: 0.45;
}

.agci-cocon-tocnote {
	font-family: "Albert Sans", sans-serif;
	font-size: 13px;
	font-weight: 600;
	opacity: 0.4;
}

.agci-cocon-toc {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.agci-cocon-tocitem {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;
	border: 1px solid rgba(1, 1, 1, 0.15);
	border-radius: 100px;
	font-family: "Albert Sans", sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	color: rgba(1, 1, 1, 0.6);
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.agci-cocon-tocitem:hover,
.agci-cocon-tocitem:focus-visible {
	color: #010101;
	border-color: #010101;
}

.agci-cocon-tocnum {
	font-family: "Krona One", sans-serif;
	font-size: 12px;
	color: #010101;
}

/* --- Cartes de question --------------------------------------------------- */
.agci-cocon-clusters {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 40px;
}

.agci-cocon-cluster {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	background: #f4f4f2;
	border-radius: 20px;
	padding: 44px 48px;
	/* Le header collant ne doit pas recouvrir le titre après un saut d'ancre. */
	scroll-margin-top: 100px;
}

/* Numéro ajouré : rempli jaune, contour sombre. */
.agci-cocon-num {
	font-family: "Krona One", sans-serif;
	font-size: 40px;
	line-height: 1;
	color: #f3cc09;
	-webkit-text-stroke: 1px rgba(1, 1, 1, 0.85);
}

/* --- Lien pilier ---------------------------------------------------------- */
.agci-cocon-lead {
	display: inline-flex;
	align-items: flex-start;
	gap: 14px;
	text-decoration: none;
	color: #010101;
}

.agci-cocon-leadtitle {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 23px;
	line-height: 1.3;
	letter-spacing: -0.4px;
	max-width: 760px;
	color: #010101;
}

.agci-cocon-leadbtn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-top: 2px;
	border-radius: 50%;
	background: #010101;
}

/* La flèche s'envole en diagonale au survol (même geste que les CTA du site). */
.agci-cocon-leadbtn .agci-cocon-arr {
	transform: rotate(45deg);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.agci-cocon-lead:hover .agci-cocon-arr,
.agci-cocon-lead:focus-visible .agci-cocon-arr {
	transform: rotate(45deg) translate(3px, -3px);
}

/* --- Articles satellites -------------------------------------------------- */
.agci-cocon-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 40px;
	margin-top: 26px;
	padding-top: 26px;
	border-top: 1px solid rgba(1, 1, 1, 0.1);
}

.agci-cocon-link {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 11px 0;
	font-family: "Albert Sans", sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.45;
	color: rgba(1, 1, 1, 0.85);
	text-decoration: none;
	transition: color 0.2s ease;
}

/* Niveau 2 : indenté, plus petit, plus clair. */
.agci-cocon-link--sub {
	padding-left: 22px;
	font-size: 13.5px;
	font-weight: 500;
	color: rgba(1, 1, 1, 0.55);
}

.agci-cocon-dot {
	flex: none;
	width: 7px;
	height: 7px;
	margin-top: 7px;
	border-radius: 50%;
	background: #010101;
	transition: background 0.2s ease, transform 0.2s ease;
}

.agci-cocon-link--sub .agci-cocon-dot {
	width: 5px;
	height: 5px;
	background: rgba(1, 1, 1, 0.3);
}

.agci-cocon-link:hover,
.agci-cocon-link:focus-visible {
	color: #010101;
}

.agci-cocon-link:hover .agci-cocon-dot,
.agci-cocon-link:focus-visible .agci-cocon-dot {
	background: #f3cc09;
	transform: scale(1.5);
}

@media ( prefers-reduced-motion: reduce ) {
	.agci-cocon-leadbtn .agci-cocon-arr,
	.agci-cocon-dot {
		transition: none;
	}
}

/* --- Responsive ----------------------------------------------------------- */
@media ( max-width: 1024px ) {
	.agci-cocon {
		padding: 48px 32px 72px;
	}
	.agci-cocon-cluster {
		padding: 36px 32px;
		gap: 20px;
	}
	.agci-cocon-links {
		grid-template-columns: 1fr;
		gap: 0 0;
	}
}

@media ( max-width: 767px ) {
	.agci-cocon {
		padding: 36px 22px 56px;
	}
	.agci-cocon-tochead {
		gap: 10px;
		margin-bottom: 16px;
	}
	.agci-cocon-toclabel {
		font-size: 10.5px;
		letter-spacing: 2.4px;
	}
	.agci-cocon-tocnote {
		font-size: 12px;
	}
	.agci-cocon-toc {
		gap: 8px;
	}
	.agci-cocon-tocitem {
		padding: 9px 14px;
		font-size: 12px;
		gap: 7px;
	}
	.agci-cocon-tocnum {
		font-size: 10.5px;
	}
	.agci-cocon-clusters {
		gap: 14px;
		margin-top: 28px;
	}
	/* Le numéro passe au-dessus du titre : en colonne de 64 px il volait la
	   moitié de la largeur utile. */
	.agci-cocon-cluster {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 24px 20px 20px;
		border-radius: 16px;
	}
	.agci-cocon-num {
		font-size: 28px;
	}
	.agci-cocon-lead {
		gap: 12px;
	}
	.agci-cocon-leadtitle {
		font-size: 16px;
		line-height: 1.35;
	}
	.agci-cocon-leadbtn {
		width: 28px;
		height: 28px;
	}
	.agci-cocon-leadbtn .agci-cocon-arr {
		width: 12px;
		height: 12px;
	}
	.agci-cocon-links {
		margin-top: 18px;
		padding-top: 18px;
	}
	.agci-cocon-link {
		padding: 9px 0;
		font-size: 13.5px;
		gap: 10px;
	}
	.agci-cocon-link--sub {
		padding-left: 16px;
		font-size: 12.5px;
	}
	.agci-cocon-dot {
		margin-top: 6px;
	}
}

/* --- Hero du guide (ids gphero*) : responsive ------------------------------
   Même logique que les heros Blog / Services, qui sont câblés sur leurs
   propres ids d'élément — les règles ne se transposent pas toutes seules. */
@media ( max-width: 900px ) {
	.elementor-element-gpherorow {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.elementor-element-gpheroleft,
	.elementor-element-gpheroright {
		width: 100% !important;
	}
	.elementor-element-gpheroh1 .elementor-heading-title {
		font-size: 34px !important;
		letter-spacing: -0.5px;
	}
	.elementor-element-gpherocard {
		min-height: 340px !important;
	}
}

@media ( max-width: 767px ) {
	.elementor-element-gpheroSec {
		--padding-top: 4px !important;
		--padding-bottom: 0px !important;
		--padding-left: 12px !important;
		--padding-right: 12px !important;
	}
	.elementor-element-gpherocard {
		--padding-top: 38px !important;
		--padding-bottom: 30px !important;
		--padding-left: 22px !important;
		--padding-right: 22px !important;
		border-radius: 22px !important;
		min-height: 0 !important;
	}
	.elementor-element-gpheroh1 .elementor-heading-title {
		font-size: 24px !important;
		line-height: 1.2;
		letter-spacing: -0.3px;
	}
	.elementor-element-gpherop,
	.elementor-element-gpherop p {
		font-size: 13.5px !important;
		line-height: 1.6;
	}
	/* Fil d'ariane à 3 niveaux : il doit pouvoir passer à la ligne. */
	.agci-breadcrumb p {
		flex-wrap: wrap;
		gap: 8px;
		font-size: 10px;
		letter-spacing: 1.8px;
	}
}

/* Fil d'ariane — niveau intermédiaire non cliquable (ex. « Ressources ») :
   sans classe il héritait du noir, invisible sur les heros sombres. On lui
   donne la même teinte atténuée que les liens, dans les deux variantes. */
.agci-breadcrumb p > span:not( .agci-bc-arrow ):not( .agci-bc-cur ) {
	color: rgba( 255, 255, 255, 0.55 );
}

.agci-breadcrumb-dark p > span:not( .agci-bc-arrow ):not( .agci-bc-cur ) {
	color: rgba( 1, 1, 1, 0.5 );
}

/* =========================================================================
   PAGE 404 (widget agci-404 — template Theme Builder « AGCI - 404 »)
   -------------------------------------------------------------------------
   Carte sombre encartée : le code d'erreur en filigrane ajouré, le message,
   un champ de recherche et des raccourcis — puis les derniers articles pour
   ne pas laisser le visiteur en cul-de-sac.
   ========================================================================= */

.agci-404 {
	background: #fff;
	padding: 24px 24px 100px;
}

.agci-404-inner {
	max-width: 1220px;
	margin: 0 auto;
}

/* --- Carte sombre --------------------------------------------------------- */
.agci-404-card {
	position: relative;
	overflow: hidden;
	background: #010101;
	border-radius: 28px;
	padding: 96px 60px 88px;
	text-align: center;
}

/* Code d'erreur en filigrane : contour clair, pas de remplissage. */
.agci-404-code {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -58%);
	font-family: "Krona One", sans-serif;
	font-size: 300px;
	line-height: 1;
	letter-spacing: 10px;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.13);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

.agci-404-content {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.agci-404-badge {
	display: inline-block;
	background: #f3cc09;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 9px 18px;
	border-radius: 100px;
	transform: rotate(-2deg);
}

.agci-404-title {
	margin: 24px 0 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 44px;
	line-height: 1.2;
	letter-spacing: -1px;
	color: #fff;
	text-wrap: balance;
}

.agci-404-text {
	margin: 18px 0 0;
	font-family: "Albert Sans", sans-serif;
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.65);
	max-width: 560px;
}

/* --- Recherche ------------------------------------------------------------ */
.agci-404-search {
	display: flex;
	gap: 10px;
	width: 100%;
	max-width: 520px;
	margin-top: 36px;
}

.agci-404-field {
	flex: 1 1 0%;
	min-width: 0;
	height: 54px;
	/* WebKit ignore border-radius sur input[type=search] sans reset d'apparence.
	   Et le kit Elementor impose sa bordure grise + rayon 3px aux champs de
	   formulaire avec une spécificité supérieure → !important, comme pour le
	   champ newsletter du footer. */
	-webkit-appearance: none;
	appearance: none;
	border: none !important;
	border-radius: 100px !important;
	padding: 0 24px !important;
	font-family: "Albert Sans", sans-serif;
	font-size: 15px;
	background: #fff;
	color: #262626;
	outline: none;
}

.agci-404-field::placeholder {
	color: rgba(1, 1, 1, 0.4);
}

.agci-404-field:focus-visible {
	box-shadow: 0 0 0 3px rgba(243, 204, 9, 0.6);
}

.agci-404-submit {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
	height: 54px;
	padding: 0 26px;
	border: none;
	border-radius: 100px;
	background: #f3cc09;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.agci-404-submit:hover,
.agci-404-submit:focus-visible {
	transform: scale(1.04);
	color: #010101;
}

/* --- Raccourcis ----------------------------------------------------------- */
.agci-404-linkslabel {
	margin-top: 40px;
	font-family: "Albert Sans", sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

.agci-404-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}

.agci-404-pill {
	display: inline-flex;
	align-items: center;
	padding: 11px 20px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 100px;
	font-family: "Albert Sans", sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.agci-404-pill:hover,
.agci-404-pill:focus-visible {
	background: #f3cc09;
	border-color: #f3cc09;
	color: #010101;
}

/* --- Derniers articles ---------------------------------------------------- */
.agci-404-posts {
	margin-top: 72px;
}

.agci-404-postshead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.agci-404-poststitle {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #010101;
}

.agci-404-postgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

@media ( prefers-reduced-motion: reduce ) {
	.agci-404-submit,
	.agci-404-pill {
		transition: none;
	}
}

/* --- Responsive ----------------------------------------------------------- */
@media ( max-width: 1024px ) {
	.agci-404 {
		padding: 24px 20px 72px;
	}
	.agci-404-card {
		padding: 72px 40px 64px;
	}
	.agci-404-code {
		font-size: 220px;
	}
	.agci-404-title {
		font-size: 34px;
	}
	.agci-404-postgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media ( max-width: 767px ) {
	.agci-404 {
		padding: 4px 12px 56px;
	}
	.agci-404-card {
		padding: 48px 22px 44px;
		border-radius: 22px;
	}
	.agci-404-code {
		font-size: 140px;
		letter-spacing: 4px;
		-webkit-text-stroke-width: 1.5px;
	}
	.agci-404-badge {
		font-size: 9.5px;
		letter-spacing: 2px;
		padding: 8px 14px;
	}
	.agci-404-title {
		margin-top: 18px;
		font-size: 24px;
		line-height: 1.25;
		letter-spacing: -0.3px;
	}
	.agci-404-text {
		margin-top: 14px;
		font-size: 14px;
	}
	/* Champ au-dessus du bouton : côte à côte, il ne reste rien pour saisir. */
	.agci-404-search {
		flex-direction: column;
		gap: 10px;
		margin-top: 26px;
	}
	.agci-404-field,
	.agci-404-submit {
		/* En colonne, le  du champ s'applique à la HAUTEUR et
		   écrasait le height : le champ tombait à 18 px. */
		flex: none;
		height: 48px;
		width: 100%;
	}
	.agci-404-submit {
		justify-content: center;
	}
	.agci-404-linkslabel {
		margin-top: 30px;
		font-size: 10px;
		letter-spacing: 2.4px;
	}
	.agci-404-links {
		gap: 8px;
	}
	.agci-404-pill {
		padding: 9px 15px;
		font-size: 12.5px;
	}
	.agci-404-posts {
		margin-top: 48px;
	}
	.agci-404-poststitle {
		font-size: 19px;
	}
	.agci-404-postgrid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

/* =========================================================================
   RÉSULTATS DE RECHERCHE (widget agci-search — template « AGCI - Recherche »)
   -------------------------------------------------------------------------
   En-tête avec le terme surligné + champ pour affiner, puis les résultats en
   rangées vignette / type / titre / extrait. La pagination réutilise celle de
   l'archive de catégorie (.agci-catarchive-pagination).
   ========================================================================= */

.agci-search {
	background: #fff;
	padding: 72px 40px 96px;
}

.agci-search-inner {
	max-width: 920px;
	margin: 0 auto;
}

/* --- En-tête -------------------------------------------------------------- */
.agci-search-over {
	display: block;
	font-family: "Albert Sans", sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: 0.45;
	margin-bottom: 12px;
}

.agci-search-title {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #010101;
}

.agci-search-term {
	display: inline-block;
	background: #f3cc09;
	color: #010101;
	padding: 0 12px;
	border-radius: 10px;
	transform: rotate(-1deg);
}

.agci-search-count {
	margin: 14px 0 0;
	font-family: "Albert Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #737373;
}

/* --- Champ d'affinage ----------------------------------------------------- */
.agci-searchform {
	display: flex;
	gap: 10px;
	margin-top: 28px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba( 1, 1, 1, 0.1 );
}

.agci-searchform-field {
	flex: 1 1 0%;
	min-width: 0;
	height: 52px;
	/* Même contrainte que le champ de la 404 : reset d'apparence pour que le
	   rayon s'applique, et !important face au kit Elementor. */
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid rgba( 1, 1, 1, 0.15 ) !important;
	border-radius: 100px !important;
	padding: 0 22px !important;
	font-family: "Albert Sans", sans-serif;
	font-size: 15px;
	background: #fff;
	color: #262626;
	outline: none;
}

.agci-searchform-field::placeholder {
	color: rgba( 1, 1, 1, 0.4 );
}

.agci-searchform-field:focus-visible {
	border-color: #010101 !important;
}

.agci-searchform-submit {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
	height: 52px;
	padding: 0 26px;
	border: none;
	border-radius: 100px;
	background: #f3cc09;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.agci-searchform-submit:hover,
.agci-searchform-submit:focus-visible {
	transform: scale( 1.04 );
	color: #010101;
}

/* --- Résultats ------------------------------------------------------------ */
.agci-search-list {
	display: flex;
	flex-direction: column;
}

.agci-search-item {
	display: grid;
	grid-template-columns: 120px minmax( 0, 1fr ) 34px;
	align-items: center;
	gap: 22px;
	padding: 24px 0;
	border-bottom: 1px solid rgba( 1, 1, 1, 0.1 );
	text-decoration: none;
	color: #010101;
}

/* Sans vignette : le texte récupère la colonne. */
.agci-search-item--nothumb {
	grid-template-columns: minmax( 0, 1fr ) 34px;
}

.agci-search-thumb {
	display: block;
	width: 120px;
	height: 88px;
	border-radius: 12px;
	overflow: hidden;
	background: #f1f1f1;
}

.agci-search-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.agci-search-item:hover .agci-search-thumb img {
	transform: scale( 1.06 );
}

.agci-search-body {
	min-width: 0;
}

.agci-search-type {
	display: inline-block;
	font-family: "Albert Sans", sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #737373;
	margin-bottom: 6px;
}

.agci-search-itemtitle {
	display: block;
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: 1.4;
	color: #010101;
	transition: color 0.2s ease;
}

.agci-search-item:hover .agci-search-itemtitle {
	color: #c7a707;
}

.agci-search-excerpt {
	display: block;
	margin-top: 6px;
	font-family: "Albert Sans", sans-serif;
	font-size: 14px;
	line-height: 1.55;
	font-weight: 500;
	color: rgba( 1, 1, 1, 0.6 );
}

/* Pastille de flèche, révélée au survol de la rangée. */
.agci-search-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #010101;
	opacity: 0;
	transform: translateX( -6px );
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.agci-search-item:hover .agci-search-go,
.agci-search-item:focus-visible .agci-search-go {
	opacity: 1;
	transform: none;
}

.agci-search-go svg {
	transform: rotate( 45deg );
}

/* --- Aucun résultat ------------------------------------------------------- */
.agci-search-empty {
	padding: 48px 0 8px;
}

.agci-search-emptytitle {
	display: block;
	font-family: "Krona One", sans-serif;
	font-size: 22px;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: #010101;
}

.agci-search-emptytext {
	margin: 14px 0 0;
	max-width: 520px;
	font-family: "Albert Sans", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 500;
	color: rgba( 1, 1, 1, 0.6 );
}

.agci-search-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.agci-search-pill {
	display: inline-flex;
	align-items: center;
	padding: 11px 20px;
	border: 1px solid rgba( 1, 1, 1, 0.18 );
	border-radius: 100px;
	font-family: "Albert Sans", sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: #010101;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.agci-search-pill:hover,
.agci-search-pill:focus-visible {
	background: #010101;
	border-color: #010101;
	color: #f3cc09;
}

@media ( prefers-reduced-motion: reduce ) {
	.agci-search-go,
	.agci-search-thumb img,
	.agci-searchform-submit {
		transition: none;
	}
}

/* --- Responsive ----------------------------------------------------------- */
@media ( max-width: 767px ) {
	.agci-search {
		padding: 40px 22px 64px;
	}
	.agci-search-over {
		font-size: 10.5px;
		letter-spacing: 2.4px;
	}
	.agci-search-title {
		font-size: 22px;
	}
	.agci-search-term {
		padding: 0 8px;
		border-radius: 8px;
	}
	.agci-search-count {
		font-size: 13px;
	}
	/* Champ au-dessus du bouton — et flex: none, sinon la base 0 % s'applique
	   à la hauteur une fois le formulaire en colonne. */
	.agci-searchform {
		flex-direction: column;
		gap: 10px;
		margin-top: 22px;
		padding-bottom: 24px;
	}
	.agci-searchform-field,
	.agci-searchform-submit {
		flex: none;
		height: 48px;
		width: 100%;
	}
	.agci-searchform-submit {
		justify-content: center;
	}
	.agci-search-item,
	.agci-search-item--nothumb {
		grid-template-columns: 86px minmax( 0, 1fr );
		gap: 14px;
		padding: 18px 0;
	}
	.agci-search-item--nothumb {
		grid-template-columns: minmax( 0, 1fr );
	}
	.agci-search-thumb {
		width: 86px;
		height: 70px;
		border-radius: 10px;
	}
	.agci-search-itemtitle {
		font-size: 15px;
	}
	.agci-search-excerpt {
		font-size: 12.5px;
		/* Deux lignes suffisent sur mobile. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	/* La pastille de flèche n'a pas de survol au doigt. */
	.agci-search-go {
		display: none;
	}
	.agci-search-empty {
		padding: 32px 0 0;
	}
	.agci-search-emptytitle {
		font-size: 18px;
	}
	.agci-search-emptytext {
		font-size: 13.5px;
	}
	.agci-search-pill {
		padding: 9px 16px;
		font-size: 12.5px;
	}
}

/* =========================================================================
   PAGE AUTEUR (widget agci-author — template « AGCI - Auteur »)
   -------------------------------------------------------------------------
   Carte d'identité de l'auteur (photo, rôle, bio, repères, domaines, lien
   vérifiable) puis ses articles. Les cartes réutilisent .agci-archive-card
   de la page Blog, la pagination celle de l'archive de catégorie.
   ========================================================================= */

.agci-author {
	background: #fff;
	padding: 72px 40px 96px;
}

.agci-author-inner {
	max-width: 1120px;
	margin: 0 auto;
}

/* --- Carte d'identité ----------------------------------------------------- */
.agci-author-card {
	display: grid;
	grid-template-columns: 152px minmax( 0, 1fr );
	gap: 40px;
	align-items: start;
	background: #f4f4f2;
	border-radius: 24px;
	padding: 44px 48px;
}

.agci-author-photo {
	display: block;
	width: 152px;
	height: 152px;
	border-radius: 50%;
	overflow: hidden;
	border: 4px solid #f3cc09;
	background: #e8e8e6;
}

.agci-author-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale( 1 );
}

.agci-author-over {
	display: block;
	font-family: "Albert Sans", sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: 0.45;
	margin-bottom: 10px;
}

.agci-author-name {
	margin: 0;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #010101;
}

.agci-author-role {
	display: inline-flex;
	align-items: center;
	margin-top: 12px;
	background: #010101;
	color: #fff;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	padding: 7px 14px;
	border-radius: 100px;
}

.agci-author-bio {
	margin: 18px 0 0;
	max-width: 640px;
	font-family: "Albert Sans", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	font-weight: 500;
	color: rgba( 1, 1, 1, 0.68 );
}

/* --- Repères -------------------------------------------------------------- */
.agci-author-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	font-family: "Albert Sans", sans-serif;
	font-size: 13.5px;
	font-weight: 500;
	color: rgba( 1, 1, 1, 0.6 );
}

.agci-author-stats li {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
}

.agci-author-stats strong {
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 17px;
	color: #010101;
}

/* --- Domaines d'expertise -------------------------------------------------- */
.agci-author-topics {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.agci-author-topicslabel {
	font-family: "Albert Sans", sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: 0.45;
	margin-right: 4px;
}

.agci-author-topic {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border: 1px solid rgba( 1, 1, 1, 0.18 );
	border-radius: 100px;
	font-family: "Albert Sans", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba( 1, 1, 1, 0.75 );
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.agci-author-topic:hover,
.agci-author-topic:focus-visible {
	background: #010101;
	border-color: #010101;
	color: #f3cc09;
}

/* --- Lien vérifiable ------------------------------------------------------- */
.agci-author-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 24px;
	background: #f3cc09;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 22px;
	border-radius: 100px;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.agci-author-link:hover,
.agci-author-link:focus-visible {
	transform: scale( 1.04 );
	color: #010101;
}

/* --- Articles -------------------------------------------------------------- */
.agci-author-posts {
	margin-top: 64px;
}

.agci-author-poststitle {
	margin: 0 0 28px;
	font-family: "Krona One", sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #010101;
}

.agci-author-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 32px;
}

.agci-author-empty {
	margin: 0;
	font-family: "Albert Sans", sans-serif;
	font-size: 15px;
	color: rgba( 1, 1, 1, 0.6 );
	font-weight: 500;
}

@media ( prefers-reduced-motion: reduce ) {
	.agci-author-link,
	.agci-author-topic {
		transition: none;
	}
}

/* --- Responsive ------------------------------------------------------------ */
@media ( max-width: 1024px ) {
	.agci-author {
		padding: 48px 24px 72px;
	}
	.agci-author-card {
		padding: 36px 32px;
		gap: 28px;
	}
	.agci-author-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 24px;
	}
}

@media ( max-width: 767px ) {
	.agci-author {
		padding: 32px 22px 56px;
	}
	/* La photo passe au-dessus : en colonne de 152 px elle mangeait la moitié
	   de la largeur utile. */
	.agci-author-card {
		grid-template-columns: minmax( 0, 1fr );
		gap: 18px;
		padding: 26px 22px 28px;
		border-radius: 20px;
	}
	.agci-author-photo {
		width: 96px;
		height: 96px;
		border-width: 3px;
	}
	.agci-author-over {
		font-size: 10px;
		letter-spacing: 2.4px;
		margin-bottom: 8px;
	}
	.agci-author-name {
		font-size: 23px;
	}
	.agci-author-role {
		margin-top: 10px;
		font-size: 11.5px;
		padding: 6px 12px;
	}
	.agci-author-bio {
		margin-top: 14px;
		font-size: 14px;
		line-height: 1.65;
	}
	.agci-author-stats {
		gap: 8px 20px;
		margin-top: 18px;
		font-size: 12.5px;
	}
	.agci-author-stats strong {
		font-size: 15px;
	}
	.agci-author-topics {
		margin-top: 18px;
		gap: 7px;
	}
	.agci-author-topicslabel {
		font-size: 10px;
		width: 100%;
	}
	.agci-author-topic {
		padding: 7px 12px;
		font-size: 11.5px;
	}
	.agci-author-link {
		margin-top: 20px;
		font-size: 13px;
		padding: 11px 18px;
	}
	.agci-author-posts {
		margin-top: 40px;
	}
	.agci-author-poststitle {
		margin-bottom: 20px;
		font-size: 19px;
	}
	.agci-author-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

/* =========================================================================
   Bouton flottant « Prendre un rendez-vous »
   -------------------------------------------------------------------------
   Pilule jaune fixée en bas à droite, sur tout le site. Escamotée par défaut :
   elle ne remonte que lorsque l'utilisateur scrolle vers le haut, et redescend
   hors cadre dès qu'il repart vers le bas (classe .is-visible posée par le JS).
   Sans JavaScript la règle .no-js la laisse simplement affichée.
   ========================================================================= */
.agci-rdv {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 10px 20px 10px 10px;
	border-radius: 100px;
	background: #f3cc09;
	color: #010101;
	font-family: "Albert Sans", sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 14px 34px rgba(1, 1, 1, 0.22);
	/* Escamotage : hors cadre + invisible, et surtout non cliquable tant que
	   le bouton n'est pas remonté. */
	transform: translateY(calc(100% + 24px));
	opacity: 0;
	pointer-events: none;
	transition:
		transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.28s ease,
		background-color 0.25s ease,
		color 0.25s ease;
}

.agci-rdv.is-visible {
	transform: none;
	opacity: 1;
	pointer-events: auto;
}

.agci-rdv:hover,
.agci-rdv:focus-visible {
	background: #010101;
	color: #f3cc09;
}

.agci-rdv-avatar {
	display: block;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #010101;
	background: #fff;
	transition: border-color 0.25s ease;
}

.agci-rdv:hover .agci-rdv-avatar,
.agci-rdv:focus-visible .agci-rdv-avatar {
	border-color: #f3cc09;
}

.agci-rdv-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* Flèche : relais identique aux autres boutons de la charte — elle s'envole
   en haut-droite et une seconde entre par le bas-gauche. */
.agci-rdv-arrow {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	flex: none;
	overflow: hidden;
}

.agci-rdv-arrow svg {
	transition:
		transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.agci-rdv-arrow::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask: var(--agci-fleche) no-repeat center / contain;
	mask: var(--agci-fleche) no-repeat center / contain;
	opacity: 0;
	transform: translate(-13px, 13px);
	transition:
		transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.agci-rdv:hover .agci-rdv-arrow svg,
.agci-rdv:focus-visible .agci-rdv-arrow svg {
	opacity: 0;
	transform: translate(13px, -13px);
}

.agci-rdv:hover .agci-rdv-arrow::after,
.agci-rdv:focus-visible .agci-rdv-arrow::after {
	opacity: 1;
	transform: none;
}

/* --- Mobile ---------------------------------------------------------------
   Gabarit réduit et marges resserrées : la pilule doit rester lisible sans
   masquer le contenu ni la barre système. */
@media ( max-width: 640px ) {
	.agci-rdv {
		right: 14px;
		bottom: 14px;
		gap: 9px;
		padding: 8px 16px 8px 8px;
		font-size: 13px;
		box-shadow: 0 10px 26px rgba(1, 1, 1, 0.26);
	}

	.agci-rdv-avatar {
		width: 28px;
		height: 28px;
	}
}

/* Sous 380px le libellé complet ne tient plus à côté du contenu : on ne garde
   que l'avatar et la flèche, la cible reste largement assez grande. */
@media ( max-width: 380px ) {
	.agci-rdv {
		padding: 8px 14px 8px 8px;
	}

	.agci-rdv-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.agci-rdv,
	.agci-rdv-arrow svg,
	.agci-rdv-arrow::after {
		transition: none;
	}
}

/* Nom de l'auteur cliquable (byline du hero + bloc auteur) : il mène à la
   page auteur. Sobre — c'est une mention, pas un appel à l'action. */
.agci-single-authorlink,
a.agci-single-author-name {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

/* Le soulignement porte sur le NOM seul : sur le byline, le lien contient
   aussi la photo, et le trait courait dessous. */
a.agci-single-author-name,
.agci-single-authorlink > span {
	border-bottom: 1px solid rgba( 1, 1, 1, 0.25 );
	transition: border-color 0.2s ease;
}

.agci-single-authorlink:hover,
.agci-single-authorlink:focus-visible,
a.agci-single-author-name:hover,
a.agci-single-author-name:focus-visible {
	color: #010101;
}

.agci-single-authorlink:hover > span,
.agci-single-authorlink:focus-visible > span,
a.agci-single-author-name:hover,
a.agci-single-author-name:focus-visible {
	border-color: #010101;
}

/* Avis Google du footer — widget Trustindex (shortcode « ftavis01 », layout
   badge 56 / jeu « dark-background »), posé sous les réseaux sociaux.

   Le plugin rend son markup dans un <template> hydraté côté client par
   loader.js. Le <pre> qui porte ce template reçoit normalement un
   style="display: none" du plugin, mais wp_kses le retire au passage : sans la
   règle ci-dessous, un bloc vide s'intercale dans la colonne. */
.agci-footer-avis pre.ti-widget {
	display: none;
}

/* Le plugin réserve 15px sous le widget pour ses layouts en liste ; ici la
   carte est le dernier élément de la colonne, la marge fait double emploi avec
   l'espacement du container. */
.elementor-location-footer .agci-footer-avis .ti-widget.ti-goog .ti-widget-container {
	margin-bottom: 0;
}

/* Le plugin livre un bloc plein (#191919, coins 12px, padding 20px) qui empile
   logo / étoiles / nombre d'avis sur trois lignes : trop lourd à côté des
   icônes sociales détourées juste au-dessus. On le remet à plat sur une seule
   ligne, sans cadre ni fond — la mention se pose directement sur le footer,
   dans le même registre que la baseline et les icônes de la colonne.

   Deux précautions de cascade, sans quoi rien ne prend :
   1. la feuille du plugin est injectée par loader.js APRÈS agci-widgets.css,
      donc à spécificité égale c'est elle qui gagne — d'où le préfixe
      .elementor-location-footer qui fait passer ces sélecteurs devant ;
   2. le plugin force le fond en !important
      (.ti-widget.ti-goog > .ti-widget-container > .ti-header), il faut donc
      répondre en !important sur cette propriété. L'épaisseur de bordure, elle,
      est déjà forcée à 0 par cette même règle : rien à neutraliser.

   .ti-header est le <a> ; son unique enfant .ti-fade-container hérite de sa
   direction (flex-direction: inherit) et porte donc les gouttières. */
.elementor-location-footer .agci-footer-avis .ti-widget.ti-goog .ti-header {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	max-width: 100%;
	padding: 0;
	background-color: transparent !important;
	transition: opacity 0.2s ease;
}

/* Les gouttières demandent !important : le plugin neutralise row-gap et
   column-gap sur TOUS les descendants de .ti-widget-container. */
.elementor-location-footer .agci-footer-avis .ti-widget.ti-goog .ti-fade-container {
	align-items: center;
	column-gap: 11px !important;
	row-gap: 6px !important;
}

/* Logo Google ramené à l'échelle du texte du footer : sorti de la boîte du
   plugin il occupe 110x35px, calibrage d'un widget pleine largeur.

   Deux contraintes dictent la forme de cette règle :
   — on vise .ti-logo-fb et non `img`, parce que loader.js sert d'abord un
     élément personnalisé <trustindex-image> qu'il ne remplace par un <img>
     qu'à l'entrée dans le viewport ; seule la classe est commune aux deux ;
   — au remplacement, loader.js pose un style INLINE en !important
     (width: 110px !important; height: 35px !important). Une feuille de style
     ne peut pas passer devant, quelle que soit sa spécificité : on ne
     redéfinit donc pas width/height, on les plafonne avec max-width et
     max-height, que l'inline ne renseigne pas. */
.elementor-location-footer .agci-footer-avis .ti-widget.ti-goog .ti-large-logo {
	height: auto;
	margin-bottom: 0 !important;
}

.elementor-location-footer .agci-footer-avis .ti-widget.ti-goog .ti-large-logo .ti-logo-fb {
	display: block !important;
	max-width: 56px !important;
	max-height: 16px !important;
	object-fit: contain !important;
	object-position: left center !important;
}

.elementor-location-footer .agci-footer-avis .ti-widget.ti-goog .ti-stars {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin-top: 0;
}

.elementor-location-footer .agci-footer-avis .ti-widget.ti-goog .ti-stars .ti-star {
	width: 15px !important;
	height: 15px !important;
	margin-right: 2px !important;
}

/* La note est la seule accroche du bloc. La pastille noire du plugin
   disparaît sur le fond #010101 du footer : on la sort en jaune de charte,
   sans fond — plus net à cette taille qu'un badge de 15px de haut. */
.elementor-location-footer .agci-footer-avis .ti-widget.ti-goog .ti-rating {
	top: 0;
	margin-right: 8px;
	padding: 0;
	background-color: transparent;
	color: #f3cc09;
	font-size: 15px;
	font-weight: 700;
}

.elementor-location-footer .agci-footer-avis .ti-widget.ti-goog .ti-text {
	flex: 0 0 auto;
	margin-top: 0;
	color: #ffffff;
	font-size: 14px;
}

.elementor-location-footer .agci-footer-avis .ti-widget.ti-goog .ti-text strong {
	font-weight: 500;
}

/* Au survol, le plugin remplit la carte en #0c0c0c et la soulève de 5px. Le
   site ne translate rien au survol, et il n'y a plus ni fond ni filet à
   éclairer : on se contente d'un léger retrait d'opacité. */
.elementor-location-footer .agci-footer-avis .ti-widget.ti-goog a.ti-header:hover,
.elementor-location-footer .agci-footer-avis .ti-widget.ti-goog a.ti-header:focus-visible {
	background-color: transparent !important;
	opacity: 0.75;
	transform: none;
}

.elementor-location-footer .agci-footer-avis .ti-widget.ti-goog a.ti-header:focus-visible {
	outline: 2px solid #f3cc09;
	outline-offset: 3px;
}

/* Mur de logos : sous 400px, trois colonnes obligeraient à tronquer les noms
   les plus longs. On revient à deux, comme au palier tablette. */
@media ( max-width: 400px ) {
	.agci-testi-logos-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ------------------------------------------------------------------
   Hero de l'accueil — titre : mise à l'échelle continue
   ------------------------------------------------------------------
   « communication. » est un mot insécable de 14 signes en Krona One : il fixe
   à lui seul la largeur minimale du titre (~10,7 px par px de corps). Deux
   zones le faisaient déborder de sa colonne, sans scroll de page (le hero est
   en overflow:hidden) mais avec un texte tronqué à l'écran :

   - de 768 à 1024px, la mise en page reste sur deux colonnes et la colonne de
     texte se resserre, alors que le corps était encore figé à 52px ;
   - sous ~430px, le palier mobile de 29px devient à son tour trop grand.

   Le clamp() suit la largeur disponible au lieu d'empiler les paliers. */
@media ( min-width: 768px ) {
	body.home .elementor-element-heroh1 .elementor-heading-title {
		font-size: clamp( 30px, 4vw, 52px ) !important;
	}
}

@media ( max-width: 430px ) {
	body.home .elementor-element-heroh1 .elementor-heading-title {
		font-size: clamp( 18px, 6vw, 29px ) !important;
	}
}

/* --- Byline de l'article : photo de l'auteur à côté de son nom ------------- */
.agci-single-authorlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Le lien reste dans le flux de la ligne « date · Par … ». */
	vertical-align: middle;
}

/* Sélecteur volontairement appuyé : Elementor pose un `.elementor img
   { border-radius: 0 }` plus spécifique que la classe seule. */
.agci-single img.agci-single-byline-photo {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	flex: none;
}

/* --- Fil d'ariane de l'article : il porte maintenant catégorie + titre ------
   Beaucoup plus long qu'avant : il doit pouvoir passer à la ligne, et le
   titre courant reste lisible sans capitales ni interlettrage forcés. */
.agci-single-crumb p {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 6px;
}

.agci-single-crumb .agci-bc-cur {
	text-transform: none;
	letter-spacing: 0.02em;
	font-weight: 700;
}

/* --- Page auteur : logo LinkedIn dans le bouton --------------------------- */
.agci-author-linkicon {
	flex: none;
}

@media ( max-width: 767px ) {
	.agci-single img.agci-single-byline-photo {
		width: 22px;
		height: 22px;
	}
	.agci-single-crumb p {
		row-gap: 4px;
	}
}

/* =========================================================================
   RETOURS MOBILE — lot du 2026-07-29
   -------------------------------------------------------------------------
   Regroupés ici plutôt qu'insérés dans les blocs mobiles existants : ces
   règles répondent à une passe de relecture précise, les garder ensemble
   permet de les relire — ou de les défaire — d'un bloc. Elles arrivent après
   les règles historiques, donc l'emportent à spécificité égale.
   ========================================================================= */
@media ( max-width: 767px ) {

	/* ---- Titres de hero sans règle mobile ----------------------------------
	   Les 12 sous-services, les CGU et la politique de cookies ont été créés
	   par clonage après coup : ils n'avaient hérité d'aucun palier, et leur
	   titre sortait de l'écran. La classe est posée sur le widget. */
	.agci-hero-h1 .elementor-heading-title {
		font-size: 27px !important;
		line-height: 1.2 !important;
		letter-spacing: -0.5px !important;
		overflow-wrap: break-word;
	}

	/* ---- Heros de sous-service : gouttières resserrées ---------------------
	   Ils gardaient les 60px latéraux et les 430px de hauteur minimale du
	   bureau : sur un écran de téléphone, le contenu était comprimé au centre
	   d'une carte très aérée. La classe est posée sur les 12 cartes. */
	.agci-ss-hero {
		min-height: 0 !important;
		--padding-top: 30px !important;
		--padding-right: 24px !important;
		--padding-bottom: 30px !important;
		--padding-left: 24px !important;
	}

	/* ---- Heros de catégorie : plus de forme graphique ----------------------
	   Le tracé se lisait bien en pleine largeur ; réduit à un écran de
	   téléphone il devient une tache derrière le titre. Ciblé par id pour ne
	   pas toucher au hero du blog, qui garde le sien. */
	.elementor-element-brherocard::before,
	.elementor-element-mdherocard::before,
	.elementor-element-dwherocard::before {
		display: none !important;
	}

	/* ---- Respiration des sections -----------------------------------------
	   110px de gouttière verticale sont calibrés pour le bureau : sur mobile
	   ils créent des trous entre les sections. « Notre méthode » était la
	   plus marquée, elle est seule à porter du padding sur sa page. */
	.elementor-element-brmeth,
	.elementor-element-mdmeth,
	.elementor-element-dwmeth {
		--padding-top: 48px !important;
		--padding-bottom: 48px !important;
	}

	.elementor-element-agvaleurs,
	.elementor-element-aghistoire,
	.elementor-element-agmethode {
		--padding-top: 48px !important;
		--padding-bottom: 48px !important;
	}

	/* ---- Cartes d'étapes (Notre méthode / Simple, carré, efficace) ---------
	   Le palier mobile réduisait le numéro à 13px et supprimait sa pastille
	   jaune. Retour à un vrai numéro et à la pastille, qui donne le rythme
	   pair/impair de la maquette. */
	.agci-step-num .elementor-heading-title {
		font-size: 28px;
	}

	.agci-step-num--chip .elementor-heading-title {
		display: inline-block;
		background: #f3cc09;
		color: #010101;
		padding: 4px 10px;
		border-radius: 9px;
	}

	.agci-step-title .elementor-heading-title {
		font-size: 17px;
	}

	/* Une carte par ligne : à deux colonnes, le numéro agrandi et sa pastille
	   ne laissaient plus la place au titre. Les grilles des pages catégorie
	   sont des grid containers Elementor réglés sur 4 colonnes, sans palier
	   mobile — elles ont donc besoin de la même consigne. */
	.elementor-element-agmethgrid,
	.elementor-element-brmethgrid,
	.elementor-element-mdmethgrid,
	.elementor-element-dwmethgrid {
		grid-template-columns: minmax( 0, 1fr ) !important;
		gap: 12px !important;
	}

	/* ---- Sous-service : les trois temps ------------------------------------
	   La frise (trait + point qui suit le défilement) est masquée sur mobile.
	   On en garde le point jaune, en puce devant chaque temps, pour que la
	   suite des étapes reste lisible comme une progression. */
	.agci-ss-step-title::before {
		content: "";
		display: inline-block;
		width: 11px;
		height: 11px;
		margin-right: 10px;
		border-radius: 50%;
		background: #f3cc09;
		vertical-align: middle;
		position: relative;
		top: -2px;
	}

	/* ---- Blog : rangées de catégorie ---------------------------------------
	   La rangée défilait horizontalement en laissant la 2e carte coupée, ce
	   qui se lit comme un défaut plutôt que comme une invitation à glisser.
	   Deux cartes entières, côte à côte, et on s'arrête là — les suivantes
	   restent accessibles par « Nos autres articles ». */
	.agci-archive-cat .agci-archive-row {
		display: grid !important;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 14px;
		overflow-x: visible;
		padding: 2px 0 6px;
	}

	.agci-archive-cat .agci-archive-row .agci-archive-card:nth-child( n + 3 ) {
		display: none;
	}

	/* Les cartes gardaient la largeur fixe de 180px héritée du carrousel, alors
	   que les colonnes de la grille en font 178 : chacune débordait de 2px, et
	   la rangée finissait 2px plus à droite que le titre de section au-dessus.
	   C'est l'asymétrie visible entre la marge de gauche et celle de droite. */
	.agci-archive-cat .agci-archive-row .agci-archive-card {
		width: auto;
		flex: initial;
	}

	/* Le lien « Nos autres articles … » passe SOUS les cartes, aligné à droite.
	   Dans l'en-tête il repoussait le titre dès qu'il ne tenait plus à côté —
	   c'est-à-dire dès que le nom de catégorie fait plus d'un mot.

	   display:contents sur l'en-tête : sa boîte disparaît, ses deux enfants
	   deviennent enfants de la section, et on peut donc les ordonner de part
	   et d'autre de la rangée. Le filet que portait l'en-tête descend sur le
	   titre, qui le porte désormais seul.

	   Ciblé sur .agci-archive-cat : la section « À la une » a le même en-tête
	   mais pas de lien, elle garde le sien intact. */
	.agci-archive-cat {
		display: flex;
		flex-direction: column;
	}

	.agci-archive-cat > .agci-archive-sechead {
		display: contents;
	}

	/* Le retrait latéral de 22px de l'en-tête était calé sur l'ancien
	   carrousel ; la rangée étant devenue une grille sans retrait, il décalait
	   le titre par rapport aux cartes. Il disparaît avec la boîte. */
	.agci-archive-cat .agci-archive-sectitle {
		padding-bottom: 12px;
		margin-bottom: 14px;
		border-bottom: 1px solid #ececec;
	}

	.agci-archive-cat .agci-archive-all {
		order: 1;
		align-self: flex-end;
		margin-top: 18px;
	}
}

/* =========================================================================
   TITRES DE HERO SUR ÉCRANS ÉTROITS
   -------------------------------------------------------------------------
   Krona One est une fonte large et le français a des mots longs :
   « Développement » mesure 312px à 31px, pour 286px d'espace utile dans la
   carte à 390px de large. Le titre sortait donc du cadre sur la page
   Développement Web, et « Nos Réalisations » faisait de même sous 340px.

   Deux paliers étroits suffisent à les contenir. Ils s'ajoutent aux paliers
   existants (900 et 640px) plutôt que de les remplacer : la taille de la
   maquette est conservée partout où elle tient.
   ========================================================================= */
@media ( max-width: 430px ) {
	.elementor-element-brheroh1 .elementor-heading-title,
	.elementor-element-mdheroh1 .elementor-heading-title,
	.elementor-element-dwheroh1 .elementor-heading-title,
	.elementor-element-svheroh1 .elementor-heading-title,
	.elementor-element-rxheroh1 .elementor-heading-title {
		font-size: 26px !important;
	}
}

@media ( max-width: 360px ) {
	.elementor-element-brheroh1 .elementor-heading-title,
	.elementor-element-mdheroh1 .elementor-heading-title,
	.elementor-element-dwheroh1 .elementor-heading-title,
	.elementor-element-svheroh1 .elementor-heading-title,
	.elementor-element-rxheroh1 .elementor-heading-title {
		font-size: 21px !important;
	}
}

/* Garde-fou : un libellé plus long que prévu se coupera plutôt que de bleeder
   hors de la carte. Le cas ne devrait pas se produire avec les paliers
   ci-dessus, mais un titre saisi dans l'éditeur n'est pas sous notre
   contrôle. */
@media ( max-width: 767px ) {
	.agci-blog-hero .elementor-widget-heading .elementor-heading-title {
		overflow-wrap: break-word;
	}
}

/* Écrans très étroits (320px : iPhone SE de 1re génération, écran de
   couverture des pliables). Deux titres secondaires y débordaient encore de
   leur carte, toujours à cause de « Développement » : celui des cartes de la
   page Services et celui des étapes de méthode. */
@media ( max-width: 360px ) {
	/* Le titre est dimensionné par disposition (.agci-services--stack et
	   --carousel), sélecteurs plus spécifiques que la classe seule : il faut
	   les reprendre tous les deux plutôt que de cibler .agci-svc-title. */
	.agci-services--stack .agci-svc-title,
	.agci-services--carousel .agci-svc-title {
		font-size: 21px;
	}

	.agci-step-title .elementor-heading-title {
		font-size: 15px;
	}
}