/* ==========================================================================
   Faciliteam : styles custom (complète theme.json)
   Variables disponibles : --wp--preset--color--{slug}, --wp--preset--font-family--{slug}
   ========================================================================== */

/* Sur-titre / eyebrow : Roboto Condensed majuscules, bleu primaire */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	font-size: 13.5px;
	color: var(--wp--preset--color--blue);
}

/* Carte : fond blanc, bordure fine, rayon, ombre douce, survol qui soulève */
.is-style-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-92);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--40);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.is-style-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(10, 22, 40, 0.10);
	border-color: var(--wp--preset--color--blue);
}

/* Bouton contour clair : pour les fonds sombres (hero, CTA, bloc sombre) */
.wp-block-button.is-style-outline-light .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
	border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--wp--preset--color--white);
}

/* FAQ : bloc Details natif en accordéon (carte + carré "+" -> croix), maquette */
.is-style-faq {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-92);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 40px -24px rgba(10, 22, 40, 0.18);
}
.is-style-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 26px;
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 700;
	font-size: 17.5px;
	line-height: 21.88px;
	letter-spacing: -0.35px;
	color: var(--wp--preset--color--navy);
}
.is-style-faq summary::-webkit-details-marker { display: none; }

/* Le signe : chevron qui pivote */
.is-style-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	margin-right: 6px;
	border-right: 2px solid var(--wp--preset--color--blue-mariner);
	border-bottom: 2px solid var(--wp--preset--color--blue-mariner);
	transform: rotate(45deg);            /* pointe vers le bas */
	transition: transform .25s ease;
}
/* Ouvert : chevron pointe vers le haut */
.is-style-faq[open] summary::after {
	transform: rotate(-135deg);
}

/* Réponse */
.is-style-faq > :not(summary) { padding-left: 26px; padding-right: 26px; }
.is-style-faq > :not(summary):last-child { padding-bottom: 24px; }
.is-style-faq p {
	margin: 0 0 11px;
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 400;
	font-size: 16px;
	line-height: 25.5px;
	color: var(--wp--preset--color--navy);
}
.is-style-faq p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Section Compétences : carrousel de logos (maquette desktop V2)
   Le sur-titre utilise .is-style-eyebrow et le h2 hérite des styles globaux
   (Roboto 700, 40px, navy, interlettrage -0.8px) : aucune surcharge de titre.
   ========================================================================== */
.faciliteam-competences {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding-block: 77px;
	background: var(--wp--preset--color--white);
	border-top: 1px solid var(--wp--preset--color--grey-92);
	border-bottom: 1px solid var(--wp--preset--color--grey-92);
}
.faciliteam-competences__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	max-width: 760px;
	margin-inline: auto;
}

/* Piste pleine largeur, fondu sur les bords */
.faciliteam-logos {
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* La galerie native devient la piste défilante (clone JS pour la boucle) */
.faciliteam-logos .wp-block-gallery.faciliteam-logos-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px;
	width: max-content;
	margin: 0;
	padding: 0;
	animation: faciliteam-marquee 30s linear infinite;
}
.faciliteam-logos:hover .wp-block-gallery.faciliteam-logos-track { animation-play-state: paused; }

/* Chaque logo = carte blanche arrondie (Component 8) */
.faciliteam-logos .wp-block-image {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 184px;
	height: 88px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 19px 27px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-92);
	border-radius: 14px;
}
.faciliteam-logos .wp-block-image img {
	max-height: 46px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

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

/* Accessibilité : on respecte "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
	.faciliteam-logos .wp-block-gallery.faciliteam-logos-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
	}
	.faciliteam-logos { -webkit-mask-image: none; mask-image: none; }
}

/* Accessibilité : focus clavier visible */
:where(a, button, summary, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}

/* ==========================================================================
   Hero accueil : reproduction fidèle de la maquette Figma
   ========================================================================== */
.faciliteam-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #0A1628 0%, #0C1D3A 45%, #0B4A9E 100%);
	padding: 92px 120px 104px;
	color: #fff;
}
.faciliteam-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(120% 70% at 50% 50%, rgba(143, 179, 232, 0.18) 0%, rgba(143, 179, 232, 0) 42%);
}
.faciliteam-hero__wrap {
	position: relative;
	max-width: 1200px;
	margin-inline: auto;
	align-items: center;
}
.faciliteam-hero p { margin: 0; }
.faciliteam-hero .wp-block-column > * + * { margin-top: 14px; }

/* CTA hero : turquoise logo (conforme maquette, différent du bouton bleu standard) */
.fac-hero-cta .wp-block-button__link {
	background: #2EAAE1;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	padding: 17px 29px;
	border-radius: 14px;
	box-shadow: 0 8px 22px -10px rgba(30, 111, 217, 0.6);
}
.fac-hero-cta .wp-block-button__link:hover { background: #1F93C7; }

/* --- Visuel orbital --- */
.fac-orbital { position: relative; width: 100%; min-height: 440px; }
.fac-orbital .ring {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	border: 1px dashed #2EAAE1; border-radius: 50%; opacity: 0.55;
}
.fac-orbital .r1 { width: 200px; height: 200px; }
.fac-orbital .r2 { width: 320px; height: 320px; }
.fac-orbital .r3 { width: 440px; height: 440px; }
.fac-orbital .r4 { width: 520px; height: 520px; opacity: 0.3; }
.fac-orbital .spin {
	position: absolute; top: 50%; left: 50%; width: 320px; height: 320px;
	margin: -160px 0 0 -160px; animation: fac-spin 14s linear infinite;
}
.fac-orbital .dot {
	position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
	background: #2EAAE1; border-radius: 6px; box-shadow: 0 0 14px 0 rgba(110, 168, 240, 0.8);
}
@keyframes fac-spin { to { transform: rotate(360deg); } }
.fac-core {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 132px; height: 132px; display: flex; align-items: center; justify-content: center;
	border-radius: 30px; background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(7px);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
}
.fac-core .ic {
	width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(131deg, #0B4A9E 6%, #2EAAE1 100%);
}
.fac-card {
	position: absolute; display: flex; gap: 11px; align-items: center;
	background: #fff; color: #0A1628; padding: 13px 15px; border-radius: 14px;
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.4);
	font-weight: 700; font-size: 15px; white-space: nowrap;
	animation: fac-float 6s ease-in-out infinite;
}
.fac-card .ci { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fac-card svg { width: 18px; height: 18px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes fac-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.fac-card.c-info { top: 14px; left: 24px; animation-delay: 0s; }
.fac-card.c-cloud { top: 128px; right: -8px; animation-delay: 1s; }
.fac-card.c-audit { bottom: 120px; right: 14px; animation-delay: 1.5s; }
.fac-card.c-conseil { bottom: 86px; left: 0; animation-delay: 2s; }
.fac-card.c-mat { bottom: -6px; left: 38%; animation-delay: 0.5s; }
.ci-green { background: rgba(74, 222, 128, 0.15); } .ci-green svg { stroke: #16A34A; }
.ci-blue { background: rgba(30, 111, 217, 0.12); } .ci-blue svg { stroke: #1E6FD9; }
.ci-light { background: rgba(110, 168, 240, 0.16); } .ci-light svg { stroke: #1E6FD9; }

@media (max-width: 980px) {
	.faciliteam-hero { padding: 56px 24px 64px; }
	.faciliteam-hero .wp-block-column { flex-basis: 100% !important; }
	.fac-orbital { display: none; }
}

/* ==========================================================================
   Header & Footer : reproduction fidèle de la maquette
   ========================================================================== */
/* Header : barre blanche, bordure basse. NON sticky (défile avec la page). */
.wp-site-blocks > header.wp-block-template-part {
	position: static;
	background: #FFFFFF;
	border-bottom: 1px solid #EEF2F7;
}
/* Navigation : Roboto Medium 16px navy, sans soulignage */
.fac-nav .wp-block-navigation-item__content {
	color: #0A1628;
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
}
.fac-nav .wp-block-navigation-item__content:hover { color: #125BA9; }
/* Téléphone : pilule contour Mariner */
.fac-phone-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid #125BA9;
	color: #125BA9;
	font-weight: 700;
	font-size: 16px;
	padding: 11px 17px;
	border-radius: 12px;
	text-decoration: none;
	white-space: nowrap;
}
.fac-phone-link svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* CTA header : turquoise (conforme maquette) */
.fac-header-cta .wp-block-button__link {
	background: #2EAAE1;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	border-radius: 12px;
	padding: 12px 19px;
	box-shadow: 0 8px 22px -10px rgba(30, 111, 217, 0.6);
}
.fac-header-cta .wp-block-button__link:hover { background: #1F93C7; }

/* Footer : liens blancs sans soulignage */
.fac-footer a { color: #FFFFFF; text-decoration: none; }
.fac-footer a:hover { color: #8FB3E8; }
.fac-footer-bottom, .fac-footer-bottom p, .fac-footer-bottom a { color: #DBE2EC; }
/* Barre LinkedIn : fond blanc, bordure Mariner, texte Mariner */
.fac-linkedin-bar { background: #fff; border: 1px solid #125BA9; }
.fac-linkedin-bar p { color: #125BA9; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.fac-linkedin-bar a { text-decoration: none; }

/* ==========================================================================
   Section Preuve sociale : carrousel de témoignages (CPT Pods)
   ========================================================================== */
.fac-temoignages { position: relative; width: 100%; }

.fac-temoignages-track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 12px 2px;
	scrollbar-width: none;            /* Firefox */
}
.fac-temoignages-track::-webkit-scrollbar { display: none; }  /* Chrome / Safari */

.fac-temoignage-card {
	flex: 0 0 calc((100% - 24px) / 2);   /* 2 cartes visibles, comme la maquette */
	scroll-snap-align: start;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 305px;
	padding: 35px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-92);
	border-radius: 16px;
}

.fac-temoignage-qmark {
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 700;
	font-size: 56px;
	line-height: 28px;
	height: 28px;
	color: var(--wp--preset--color--azur);
}
.fac-temoignage-stars {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 2px;
	color: var(--wp--preset--color--amber);
}
.fac-temoignage-body {
	margin: 0;
	flex: 1 1 auto;
	font-family: var(--wp--preset--font-family--roboto);
	font-style: italic;
	font-weight: 400;
	font-size: 16px;
	line-height: 26.4px;
	color: var(--wp--preset--color--navy);
}
.fac-temoignage-who {
	margin: 0;
	padding-top: 19px;
	border-top: 1px solid var(--wp--preset--color--grey-95);
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: var(--wp--preset--color--navy);
}

/* Flèches de navigation */
.fac-temoignages-nav { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.fac-temoignages-nav button {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 24px; line-height: 1;
	color: var(--wp--preset--color--blue-mariner);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-92);
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fac-temoignages-nav button:hover {
	background: var(--wp--preset--color--blue-mariner);
	color: #fff;
	border-color: var(--wp--preset--color--blue-mariner);
}

@media (max-width: 781px) {
	.fac-temoignage-card { flex-basis: 88%; }   /* 1 carte visible sur mobile */
}

/* ==========================================================================
   Pages collées : aucun espace au-dessus du header ni sous la dernière section
   ========================================================================== */
.wp-site-blocks { padding-top: 0; padding-bottom: 0; }

/* Supprime les marges blockGap entre header / contenu / footer */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > main,
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
.wp-site-blocks > main { margin-block-end: 0; padding-block: 0; }

/* La première et la dernière section ne poussent pas le haut/bas de page */
.wp-block-post-content > :first-child { margin-block-start: 0; }
.wp-block-post-content > :last-child { margin-block-end: 0; }

/* ==========================================================================
   Section "Faciliteam en chiffres" : empilement en colonne sur mobile
   (desktop strictement inchangé : 4 colonnes via styles inline du panneau)
   ========================================================================== */
@media (max-width: 781px) {
	.fac-stats-panel { grid-template-columns: 1fr !important; }
	.fac-stats-panel > div { border-right: none !important; border-bottom: 1px solid #E3E8F0 !important; }
	.fac-stats-panel > div:last-child { border-bottom: none !important; }
}

/* ==========================================================================
   Page « Pourquoi Faciliteam » : pictos des cartes convictions + trait timeline
   (purement additif, n'altère aucun style existant)
   ========================================================================== */

/* Glyphe centré dans la pastille azur (pastille posée en inline dans le contenu) */
.fac-icon { position: relative; }
.fac-icon::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 26px; height: 26px; background: #125BA9;
	-webkit-mask: center / 26px no-repeat; mask: center / 26px no-repeat;
}
.fac-icon--talk::after   { -webkit-mask-image: var(--ic-talk);   mask-image: var(--ic-talk); }
.fac-icon--eye::after    { -webkit-mask-image: var(--ic-eye);    mask-image: var(--ic-eye); }
.fac-icon--users::after  { -webkit-mask-image: var(--ic-users);  mask-image: var(--ic-users); }

:root {
	--ic-talk: 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' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
	--ic-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 12C2 12 5 5 12 5C19 5 22 12 22 12C22 12 19 19 12 19C5 19 2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--ic-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* Trait horizontal reliant les étapes 1·2·3 (desktop uniquement ; masqué quand les colonnes s'empilent) */
@media (min-width: 782px) {
	.fac-method-steps { position: relative; }
	.fac-method-steps::before {
		content: ""; position: absolute; top: 27px; left: 27px; right: 29%;
		height: 1px; background: #E3E8F0; z-index: 0;
	}
}

/* Pastille icône des sous-blocs « Notre méthode » (m-ic) */
.fac-mic {
	position: relative;
	display: inline-flex;
	width: 48px; height: 48px;
	border-radius: 12px;
	background: rgba(46, 170, 225, 0.2);
}
.fac-mic::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 24px; height: 24px; background: #125BA9;
	-webkit-mask: center / 24px no-repeat; mask: center / 24px no-repeat;
}
.fac-mic--monitor::after  { -webkit-mask-image: var(--ic-monitor);  mask-image: var(--ic-monitor); }
.fac-mic--calendar::after { -webkit-mask-image: var(--ic-calendar); mask-image: var(--ic-calendar); }
.fac-mic--eye::after      { -webkit-mask-image: var(--ic-eye);      mask-image: var(--ic-eye); }

/* Liste à coches (remplace les puces par une coche bleue) */
.fac-check-list { list-style: none; padding-left: 0; margin-left: 0; }
.fac-check-list li { position: relative; padding-left: 30px; }
.fac-check-list li::marker { content: ""; }
.fac-check-list li::before {
	content: ""; position: absolute; left: 0; top: 4px;
	width: 18px; height: 18px; background: #2EAAE1;
	-webkit-mask: center / 18px no-repeat; mask: center / 18px no-repeat;
	-webkit-mask-image: var(--ic-check); mask-image: var(--ic-check);
}

:root {
	--ic-monitor: 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' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
	--ic-calendar: 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' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
	--ic-check: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   En-tête responsive : barre mobile + menu glissant (≤ 900px)
   Conforme à la maquette V2 accueil-mobile (header 61:6859, menu 61:8208).
   ========================================================================== */

/* Actions mobile masquées en desktop */
.fac-header-actions-mobile { display: none; align-items: center; gap: 12px; }

/* Bouton téléphone (picto) mobile */
.fac-phone-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid #C3D4EC; border-radius: 12px;
	color: #125BA9; background: #fff;
}
.fac-phone-btn svg { width: 20px; height: 20px; }

/* Burger */
.fac-burger {
	display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
	width: 44px; height: 44px; padding: 11px;
	background: none; border: 0; cursor: pointer;
}
.fac-burger span { display: block; width: 100%; height: 2px; background: #0A1628; border-radius: 2px; }

/* Fond assombri + panneau : cachés au-dessus du breakpoint */
.fac-mobile-backdrop, .fac-mobile-panel { display: none; }

@media (max-width: 900px) {
	/* On masque la nav et les actions desktop, on montre les actions mobile */
	.fac-nav-desktop, .fac-header-actions-desktop { display: none !important; }
	.fac-header-actions-mobile { display: flex; }

	/* Le panneau off-canvas (translaté hors écran à droite) ne doit pas créer
	   de scroll horizontal sur mobile (quirk iOS Safari). */
	html, body { overflow-x: hidden; }

	.fac-mobile-backdrop {
		display: block; position: fixed; inset: 0;
		background: rgba(10, 22, 40, 0.5);
		opacity: 0; visibility: hidden; transition: opacity .25s ease;
		z-index: 998;
	}
	.fac-mobile-backdrop.is-open { opacity: 1; visibility: visible; }

	.fac-mobile-panel {
		display: flex; flex-direction: column;
		position: fixed; top: 0; right: 0;
		height: 100vh; height: 100dvh; width: min(360px, 86vw);
		padding: 16px 22px 24px;
		background: #fff; box-shadow: -12px 0 40px rgba(10, 22, 40, 0.18);
		transform: translateX(100%); transition: transform .3s ease;
		z-index: 999; overflow-x: hidden; overflow-y: auto;
	}
	.fac-mobile-panel.is-open { transform: translateX(0); }
}

/* En-tête du panneau (logo + fermer) */
.fac-mobile-panel__top {
	padding-bottom: 16px; margin-bottom: 6px;
	border-bottom: 1px solid #EEF2F7;
}
.fac-close {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	background: #F7F9FC; border: 1px solid #E3E8F0; border-radius: 10px;
	cursor: pointer; flex: 0 0 auto;
}
.fac-close svg { width: 18px; height: 18px; }

/* Menu vertical dans le panneau */
.fac-nav-mobile { width: 100%; }
.fac-nav-mobile .wp-block-navigation__container { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
.fac-nav-mobile .wp-block-navigation-item { width: 100%; border-bottom: 1px solid #F1F4F9; }

/* Item avec sous-menu : libellé + chevron sur UNE ligne, sous-menu replié en dessous.
   Marche que le menu utilise openSubmenusOnClick (un seul bouton) ou non (lien + bouton bascule). */
.fac-nav-mobile .wp-block-navigation-item.has-child,
.fac-nav-mobile .wp-block-navigation-submenu {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.fac-nav-mobile .wp-block-navigation-item__content {
	width: 100%;
	padding: 16px 2px; font-weight: 700; font-size: 17px; color: #0A1628;
}

/* Bascule de sous-menu : libellé pleine largeur, libellé à gauche, chevron en bout de ligne à droite.
   On cible le bouton qu'il porte la classe __toggle (openSubmenusOnClick) ou __content (has-child). */
.fac-nav-mobile .wp-block-navigation-submenu__toggle,
.fac-nav-mobile .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	display: flex !important; width: 100% !important; flex: 1 1 100% !important;
	align-items: center; justify-content: space-between;
}
/* Chevron maison pointant vers le BAS, en bout de ligne (caret natif masqué) */
.fac-nav-mobile .wp-block-navigation__submenu-icon { display: none !important; }
.fac-nav-mobile .wp-block-navigation-submenu__toggle::after,
.fac-nav-mobile .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
	content: ""; display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-left: 8px; margin-top: -4px;
	border-right: 2px solid #125BA9; border-bottom: 2px solid #125BA9;
	transform: rotate(45deg);
}

/* Sous-menu : passe à la ligne, pleine largeur, en dessous, sans boîte, indenté */
.fac-nav-mobile .wp-block-navigation__submenu-container {
	flex-basis: 100% !important; width: 100% !important; min-width: 0 !important;
	position: static !important; left: auto !important; top: auto !important; transform: none !important;
	border: 0 !important; box-shadow: none !important; background: transparent !important;
	padding-left: 14px !important;
}
.fac-nav-mobile .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-weight: 500; font-size: 15.5px; padding: 12px 2px; color: #4D5A6E;
}

/* Pied du panneau (téléphone + CTA), poussé en bas */
.fac-mobile-panel__foot { margin-top: auto; padding-top: 18px; }

/* Téléphone en bouton bloc (pied de panneau) */
.fac-phone-link--block {
	box-sizing: border-box; max-width: 100%;
	display: flex; align-items: center; justify-content: center; gap: 9px;
	width: 100%; padding: 14px 18px;
	border: 1px solid #125BA9; border-radius: 12px;
	color: #125BA9; font-weight: 700; font-size: 16px; text-decoration: none;
}
.fac-phone-link--block svg { width: 17px; height: 17px; }

/* CTA pleine largeur dans le panneau */
.fac-cta-block, .fac-cta-block .wp-block-button__link { width: 100%; }

/* ==========================================================================
   AJOUT 2026-08-03 : visuel orbital du hero affiché aussi en tablette et mobile
   --------------------------------------------------------------------------
   Jusqu'ici le visuel était masqué sous 980px (« .fac-orbital { display: none } »
   dans la media query plus haut) : ses anneaux montent à 520px de diamètre et
   les 7 cartes flottantes sont positionnées en absolu pour une colonne large,
   donc il débordait.

   Principe : on ne touche à aucune règle existante. Ce bloc vient après dans
   le fichier, donc à spécificité égale c'est lui qui s'applique. Le desktop
   (> 980px) n'est atteint par aucune de ces règles et reste strictement
   identique.

   Approche : on garde le coeur de l'illustration (anneaux + noyau + point en
   orbite), redimensionné pour tenir dans la largeur disponible, et on laisse
   les 7 cartes flottantes au desktop. En dessous de 980px la colonne fait au
   mieux ~340px de large : les libellés (« Infogérance et maintenance »,
   « Téléphonie et Internet ») s'y chevaucheraient sur les anneaux. Le contenu
   de ces cartes est de toute façon repris juste en dessous dans la section
   « Nos services ».

   Diamètres vérifiés au rendu le 2026-08-03 : 382px dans une colonne de 700px,
   292px dans une colonne de 342px (mobile 390px). Aucun débordement, aucun
   défilement horizontal introduit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Palier unique : tout ce qui est sous 980px
   --------------------------------------------------------------------------
   La composition est figée à 342px de large et centrée (max-width +
   margin-inline). Conséquence : le rendu est identique en tablette et en
   mobile, calibré une seule fois. Vérifié sans aucun chevauchement ni
   débordement dans des colonnes de 342px, 500px et 720px.

   Disposition des 7 cartes autour du cercle :
       [Infogérance]              [Cybersécurité]
       [Téléphonie]                [Cloud]
                    ( cercle )
       [Conseils]                  [Audit]
                   [Matériel]

   Les !important sont nécessaires : les cartes « c-tel » et « c-cyber »,
   ajoutées directement dans la page, portent leurs offsets en style inline
   (left:-16px, right:-20px), qui priment sinon sur une règle de feuille.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.fac-orbital {
		display: block;
		min-height: 340px;
		max-width: 342px;
		margin-inline: auto;
		/* Une fois les colonnes empilées, la première rangée de cartes venait
		   coller le bouton d'appel à l'action (écart mesuré : 0 px).
		   Palier « 4 · L » de l'échelle du thème.
		   !important obligatoire : la mise en page de WordPress applique
		   « margin-block-start: 0 » au premier enfant d'une colonne, et cette
		   règle prime sinon (vérifié au rendu : 0 px sans, 40 px avec). */
		margin-top: var(--wp--preset--spacing--50, 40px) !important;
	}

	/* Anneaux, orbite et noyau réduits pour dégager la place des cartes */
	.fac-orbital .r1 { width: 84px; height: 84px; }
	.fac-orbital .r2 { width: 132px; height: 132px; }
	.fac-orbital .r3 { width: 176px; height: 176px; }
	.fac-orbital .r4 { width: 210px; height: 210px; }

	.fac-orbital .spin {
		width: 132px;
		height: 132px;
		margin: -66px 0 0 -66px;
	}
	.fac-orbital .dot {
		width: 9px;
		height: 9px;
		top: -4.5px;
		margin-left: -4.5px;
	}

	.fac-core { width: 68px; height: 68px; border-radius: 16px; }
	.fac-core .ic { width: 34px; height: 34px; border-radius: 9px; }
	/* Le SVG du noyau porte ses dimensions en style inline : d'où !important. */
	.fac-core .ic svg { width: 20px !important; height: 20px !important; }

	/* Cartes compactes : le libellé passe sur deux lignes plutôt que de forcer
	   la largeur (le nowrap du desktop ferait déborder « Infogérance et
	   maintenance » hors de l'écran). */
	.fac-card {
		box-sizing: border-box;
		max-width: 152px;
		padding: 6px 9px;
		gap: 6px;
		border-radius: 9px;
		font-size: 10.5px;
		line-height: 1.25;
		white-space: normal;
	}
	.fac-card .ci { width: 22px; height: 22px; border-radius: 6px; }
	.fac-card svg { width: 12px; height: 12px; }

	/* Quatre rangées régulières (0 / 100 / 200 / 300), le cercle en fond.
	   Tout est calé en « top » : avec des valeurs mixtes top/bottom, le rendu
	   dépendait de la hauteur du conteneur et laissait un trou sous la
	   troisième rangée, « Matériel » se retrouvant isolé loin en bas. */
	.fac-card.c-info    { top: 0 !important;     left: 0 !important;  right: auto !important; bottom: auto !important; }
	.fac-card.c-cyber   { top: 0 !important;     right: 0 !important; left: auto !important;  bottom: auto !important; }
	.fac-card.c-tel     { top: 100px !important; left: 0 !important;  right: auto !important; bottom: auto !important; }
	.fac-card.c-cloud   { top: 100px !important; right: 0 !important; left: auto !important;  bottom: auto !important; }
	.fac-card.c-conseil { top: 200px !important; left: 0 !important;  right: auto !important; bottom: auto !important; }
	.fac-card.c-audit   { top: 200px !important; right: 0 !important; left: auto !important;  bottom: auto !important; }
	.fac-card.c-mat     { top: 300px !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%); }
}

/* Accessibilité : sur les tailles où l'on vient d'activer le visuel, on
   respecte « réduire les animations ». Rotation et flottement s'arrêtent, la
   composition reste lisible. Le desktop n'est pas concerné (inchangé). */
@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
	.fac-orbital .spin { animation: none; }
	.fac-card { animation: none; }
}

/* ==========================================================================
   AJOUT 2026-08-03 : support du motif « Illustration orbitale (cartes
   éditables) », qui remplace le bloc HTML par des blocs Gutenberg natifs
   --------------------------------------------------------------------------
   Purement additif : ces règles ne servent qu'au nouveau markup. Tant que la
   page utilise encore le bloc HTML, aucune n'a d'effet visible.
   ========================================================================== */

/* --- Positions des deux cartes ajoutées après coup ------------------------
   Dans le bloc HTML, « c-tel » et « c-cyber » portaient leurs coordonnées en
   style inline (top/left/right + animation-delay). Les blocs natifs n'ont pas
   ces styles : on les rétablit ici, aux valeurs exactes relevées sur la page.
   -------------------------------------------------------------------------- */
.fac-card.c-tel   { top: 84px;  left: -16px; animation-delay: 2.5s; }
.fac-card.c-cyber { top: 210px; right: -20px; animation-delay: 3s; }

/* --- Mise en forme du markup natif ---------------------------------------
   Le bloc Groupe et le bloc Paragraphe apportent leurs propres marges et
   espacements : on les neutralise pour retrouver la carte d'origine.
   -------------------------------------------------------------------------- */
.fac-card.wp-block-group { gap: 11px; }
.fac-card .fac-card-label { margin: 0; }
.fac-card .wp-block-image { margin: 0; }
.fac-card .wp-block-image img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	display: block;
}

/* --- Taille de l'icône dans la pastille ----------------------------------
   Les icônes du motif sont des images (SVG en data-URI, reprenant les tracés
   de la version HTML) : elles se remplacent depuis la médiathèque, il faut
   donc borner leur taille quelle que soit la source déposée.
   -------------------------------------------------------------------------- */
.fac-card .wp-block-image img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	display: block;
}
@media (max-width: 980px) {
	.fac-card .wp-block-image img { width: 12px; height: 12px; }
}

/* Le motif natif enveloppe le décor dans un conteneur : il ne doit occuper
   aucune place, les anneaux restent positionnés par rapport à .fac-orbital. */
.fac-orbital-decor { position: static; }