/*
 * Grille de Capsules (annuaire) — page autonome /annuaire/, voir
 * templates/annuaire.php + includes/annuaire.php et
 * brief-grille-capsules.md. Document HTML complet qui contourne le
 * thème actif (comme capsule.css/single-capsule.php) : imprévu
 * découvert en construisant cette étape, Hello Elementor n'est pas
 * installé sur staging (seul Twenty Twenty-Five l'est), un shortcode
 * inséré dans une page classique héritait donc du chrome du thème réel
 * et cassait le rendu — d'où cette page dédiée, jamais un simple
 * shortcode embarqué.
 *
 * Classes préfixées mavipro-caps- pour ne jamais entrer en collision
 * avec un thème/page builder — sauf le contenu des faces dans le
 * pop-up, qui réutilise volontairement .capsule / .eyebrow / .id-- /
 * .svc-- etc. déjà définis dans capsule.css (même rendu que la vraie
 * page Capsule, pas de CSS dupliqué).
 *
 * PIÈGE VÉCU : une version précédente de ce commentaire citait des noms
 * de classe séparés par un astérisque puis une barre oblique (comme
 * dans ".id__" suivi de l'étoile puis du slash). Cette paire de deux
 * caractères, où qu'elle apparaisse, ferme un commentaire CSS — même en
 * plein milieu d'une phrase. Le reste du commentaire (dont la vraie
 * règle body.mavipro-annuaire-page juste après) devenait alors du CSS
 * invalide, silencieusement ignoré par le navigateur : fond sombre
 * absent, aucune erreur visible nulle part. Trouvé uniquement en
 * inspectant le CSSOM réellement parsé (document.styleSheets) via un
 * navigateur headless, après avoir épuisé les pistes serveur (cache,
 * thème, spécificité). Ne jamais faire figurer cette paire de
 * caractères dans un commentaire CSS, même à l'intérieur d'un nom de
 * classe.
 */

/*
 * Variables déclarées sur .mavipro-caps-wrap ET .mavipro-caps-overlay
 * (pas seulement sur body.mavipro-annuaire-page) : le shortcode
 * [mavipro_capsules] est aussi utilisé ailleurs que sur la page dédiée
 * (ex. section "Explorer" de l'accueil, body.mavipro-accueil-page) —
 * piège vécu : les couleurs de vignettes (texte notamment) héritaient
 * silencieusement de la couleur de la face au lieu du blanc attendu,
 * faute de variables --mvc-* définies hors de /annuaire/.
 */
.mavipro-caps-wrap, .mavipro-caps-overlay {
	--mvc-cyan: #22D3EE; --mvc-cyan-soft: #67E8F9; --mvc-blue: #3B82F6; --mvc-blue-hi: #60A5FA;
	--mvc-white: #F2F6FF; --mvc-text: #E6EDFB; --mvc-text-mut: #93A2C4; --mvc-text-dim: #5E7099;
	--mvc-glass: rgba(255, 255, 255, 0.05); --mvc-glass-2: rgba(255, 255, 255, 0.08); --mvc-glass-line: rgba(255, 255, 255, 0.14);
	--mvc-fd: 'Space Grotesk', system-ui, sans-serif; --mvc-fb: 'Inter', system-ui, sans-serif;
	--mvc-ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --mvc-ease-glass: cubic-bezier(0.65, 0, 0.35, 1);
}

body.mavipro-annuaire-page {
	/* Même jeu de variables, redéclaré : le chrome de page (halos,
	   en-tête) est hors de .mavipro-caps-wrap et en a besoin aussi. */
	--mvc-cyan: #22D3EE; --mvc-cyan-soft: #67E8F9; --mvc-blue: #3B82F6; --mvc-blue-hi: #60A5FA;
	--mvc-white: #F2F6FF; --mvc-text: #E6EDFB; --mvc-text-mut: #93A2C4; --mvc-text-dim: #5E7099;
	--mvc-glass: rgba(255, 255, 255, 0.05); --mvc-glass-2: rgba(255, 255, 255, 0.08); --mvc-glass-line: rgba(255, 255, 255, 0.14);
	--mvc-fd: 'Space Grotesk', system-ui, sans-serif; --mvc-fb: 'Inter', system-ui, sans-serif;
	--mvc-ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --mvc-ease-glass: cubic-bezier(0.65, 0, 0.35, 1);

	background: #060B16; color: var(--mvc-text); font-family: var(--mvc-fb);
	min-height: 100vh; -webkit-font-smoothing: antialiased; margin: 0;
}

.mavipro-caps-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mavipro-caps-halo { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .4; }
.mavipro-caps-halo--1 { width: 560px; height: 560px; top: -140px; left: -100px; background: radial-gradient(circle, rgba(59, 130, 246, 0.5), transparent 62%); }
.mavipro-caps-halo--2 { width: 480px; height: 480px; bottom: -120px; right: -100px; background: radial-gradient(circle, rgba(34, 211, 238, 0.3), transparent 65%); }

.mavipro-caps-main { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 3rem 1.4rem 6rem; }
.mavipro-caps-back { display: inline-block; font-family: var(--mvc-fd); font-size: .85rem; font-weight: 500; color: var(--mvc-text-mut); margin-bottom: 1.6rem; }
.mavipro-caps-back:hover { color: var(--mvc-cyan-soft); }
.mavipro-caps-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.mavipro-caps-eyebrow { font-family: var(--mvc-fd); font-size: .76rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--mvc-cyan-soft); margin-bottom: 1rem; }
.mavipro-caps-head h1 { font-family: var(--mvc-fd); font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--mvc-white); letter-spacing: .06em; margin: 0; }
.mavipro-caps-head p { color: var(--mvc-text-mut); font-weight: 300; margin-top: 1rem; }
.mavipro-caps-demande-lead { font-size: 16px; }
.mavipro-caps-inscription-lead { font-size: 14px; margin-top: 0; margin-bottom: 1rem; }
.mavipro-caps-inline-link { color: var(--mvc-cyan); font-weight: 600; text-decoration: none; font-size: inherit; }
.mavipro-caps-inline-link:hover { text-decoration: underline; }

.mavipro-caps-wrap { font-family: var(--mvc-fb); color: var(--mvc-text); }
.mavipro-caps-wrap *, .mavipro-caps-wrap *::before, .mavipro-caps-wrap *::after,
.mavipro-caps-overlay *, .mavipro-caps-overlay *::before, .mavipro-caps-overlay *::after { box-sizing: border-box; }

/* --- Filtres --- */
.mavipro-caps-filters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; max-width: 900px; margin: 0 auto 2rem; }
@media (max-width: 700px) { .mavipro-caps-filters { grid-template-columns: 1fr; } }
.mavipro-caps-filter { display: flex; flex-direction: column; gap: .4rem; }
.mavipro-caps-filter label { font-family: var(--mvc-fd); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mvc-text-dim); }
.mavipro-caps-filter select, .mavipro-caps-searchbox input {
	width: 100%; height: 48px; font-family: var(--mvc-fb); font-size: .95rem; color: var(--mvc-text);
	background: var(--mvc-glass-2); border: 1px solid var(--mvc-glass-line); border-radius: 12px; padding: 0 .9rem; transition: border-color .3s;
}
.mavipro-caps-filter select:focus, .mavipro-caps-searchbox input:focus { outline: none; border-color: var(--mvc-cyan); }
.mavipro-caps-filter select option { background: #0E1626; }
.mavipro-caps-searchbox { position: relative; display: flex; align-items: center; height: 48px; }
.mavipro-caps-searchbox__ic { position: absolute; left: .85rem; font-size: .9rem; pointer-events: none; opacity: .7; }
.mavipro-caps-searchbox input { padding-left: 2.4rem; }

/* Compteur + réinitialisation, sur la même ligne (retour propriétaire,
   29 août 2026 : pas de moyen de réinitialiser les filtres jusqu'ici). */
.mavipro-caps-toolbar { max-width: 1140px; margin: 0 auto 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mavipro-caps-count { font-size: .85rem; color: var(--mvc-text-dim); font-family: var(--mvc-fd); letter-spacing: .05em; }
.mavipro-caps-reset { font-family: var(--mvc-fd); font-size: .82rem; font-weight: 500; color: var(--mvc-cyan-soft); text-decoration: none; }
.mavipro-caps-reset:hover { color: var(--mvc-cyan); text-decoration: underline; text-underline-offset: 2px; }
.mavipro-caps-empty { text-align: center; color: var(--mvc-text-mut); padding: 3rem; font-weight: 300; }

/* --- Pagination (paginate_links() core WordPress, classes .page-numbers) --- */
.mavipro-caps-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; }
.mavipro-caps-pagination .page-numbers {
	font-family: var(--mvc-fd); font-size: .88rem; font-weight: 500; min-width: 40px; height: 40px; padding: 0 .6rem;
	display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
	border: 1px solid var(--mvc-glass-line); background: var(--mvc-glass-2); color: var(--mvc-text-mut);
}
.mavipro-caps-pagination a.page-numbers:hover { border-color: var(--mvc-cyan); color: var(--mvc-white); }
.mavipro-caps-pagination .page-numbers.current { background: var(--mvc-cyan); border-color: var(--mvc-cyan); color: #04121b; }
.mavipro-caps-pagination .page-numbers.dots { background: transparent; border-color: transparent; }

/* --- Grille --- */
.mavipro-caps-field { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .mavipro-caps-field { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mavipro-caps-field { grid-template-columns: 1fr; } }

/* --- Pod (niveaux 1 et 2) --- */
.mavipro-caps-pod {
	position: relative; padding: 2rem 1.6rem 2.2rem; border-radius: 26px;
	background: linear-gradient(160deg, var(--mvc-glass-2), rgba(59, 130, 246, 0.03)); border: 1px solid var(--mvc-glass-line);
	backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.22);
	text-align: center; cursor: pointer; overflow: hidden; min-height: 370px;
	display: flex; flex-direction: column; align-items: center;
	transition: transform .6s var(--mvc-ease-soft), box-shadow .6s var(--mvc-ease-soft), border-color .6s var(--mvc-ease-soft);
}
.mavipro-caps-pod:hover { transform: translateY(-10px); box-shadow: 0 34px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(34, 211, 238, 0.28), 0 0 60px rgba(34, 211, 238, 0.10); }
.mavipro-caps-pod:focus-visible { outline: 2px solid var(--mvc-cyan); outline-offset: 3px; }
.mavipro-caps-pod.is-open { cursor: default; transform: none; }

.mavipro-caps-pod__close {
	position: absolute; top: 1rem; right: 1rem; z-index: 6; width: 30px; height: 30px; border-radius: 50%;
	border: 1px solid var(--mvc-glass-line); background: var(--mvc-glass); color: var(--mvc-text-mut); cursor: pointer;
	font-size: .9rem; display: none;
}
.mavipro-caps-pod.is-open .mavipro-caps-pod__close { display: grid; place-items: center; }

.mavipro-caps-pod__tag { font-family: var(--mvc-fd); font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--mvc-cyan-soft); transition: opacity .5s var(--mvc-ease-soft); }
.mavipro-caps-pod__name { font-family: var(--mvc-fd); font-size: 1.15rem; font-weight: 600; color: var(--mvc-white); margin-top: .2rem; letter-spacing: -0.01em; position: relative; z-index: 4; transition: opacity .5s var(--mvc-ease-soft); }
.mavipro-caps-pod__hint { margin-top: .5rem; font-size: .68rem; color: var(--mvc-text-dim); letter-spacing: .12em; text-transform: uppercase; position: relative; z-index: 4; transition: opacity .5s var(--mvc-ease-soft); }

/* Vrai lien vers la Capsule (maillage interne + crawl sans JS, voir
   includes/annuaire.php) — discret, coexiste avec l'aperçu en overlay.
   Rembourrage vertical (retour audit accessibilité, Lighthouse, 4 sept.
   2026) : zone cliquable trop petite sinon (simple ligne de texte). */
.mavipro-caps-pod__permalink { display: block; margin-top: .4rem; padding: .6rem 0; font-size: .72rem; color: var(--mvc-cyan-soft); position: relative; z-index: 4; transition: opacity .5s var(--mvc-ease-soft); }
.mavipro-caps-pod__permalink:hover { text-decoration: underline; }
.mavipro-caps-pod.is-open .mavipro-caps-pod__permalink { opacity: 0; pointer-events: none; }

.mavipro-caps-mini { position: relative; width: 108px; height: 150px; margin: 1.5rem auto; transition: opacity .5s var(--mvc-ease-soft), transform .8s var(--mvc-ease-glass); border-radius: 54px; overflow: hidden;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(59, 130, 246, 0.06)); border: 1px solid var(--mvc-glass-line);
	box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -20px 40px rgba(34, 211, 238, 0.14);
	display: grid; place-items: center;
}
.mavipro-caps-mini::after { content: ""; position: absolute; top: -30%; left: -40%; width: 50%; height: 160%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: rotate(10deg); }
/* object-fit + border/box-shadow en CSS (pas seulement en inline via
   wp_get_attachment_image) : filet de sécurité si le HTML de la miniature
   est un jour généré ailleurs sans le style inline. */
.mavipro-caps-mini img {
	width: 78px; height: 78px; border-radius: 50%; object-fit: cover; display: block;
	border: 1px solid rgba(255, 255, 255, 0.45);
}
.mavipro-caps-mini__fallback { font-family: var(--mvc-fd); font-size: 1.9rem; font-weight: 500; color: var(--mvc-white); z-index: 1; }
.mavipro-caps-pod.is-open .mavipro-caps-mini { opacity: .18; transform: scale(.78); }
.mavipro-caps-pod.is-open .mavipro-caps-pod__tag, .mavipro-caps-pod.is-open .mavipro-caps-pod__name, .mavipro-caps-pod.is-open .mavipro-caps-pod__hint { opacity: 0; }

/* --- Vignettes (niveau 2) --- */
.mavipro-caps-vignettes { position: absolute; inset: 0; pointer-events: none; }
.mavipro-caps-vig {
	position: absolute; left: 50%; top: 50%; width: 82px; padding: .6rem .4rem; border-radius: 15px;
	background: var(--mvc-glass-2); border: 1px solid var(--mvc-glass-line); backdrop-filter: blur(12px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
	display: flex; flex-direction: column; align-items: center; gap: .25rem;
	transform: translate(-50%, -50%) scale(.5); opacity: 0; transition: transform .7s var(--mvc-ease-glass), opacity .5s; cursor: pointer;
}
.mavipro-caps-vig svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.mavipro-caps-vig span { font-family: var(--mvc-fd); font-size: .62rem; font-weight: 500; color: var(--mvc-white); }
.mavipro-caps-vig--identite { color: var(--mvc-cyan-soft); } .mavipro-caps-vig--services { color: var(--mvc-blue-hi); } .mavipro-caps-vig--visuel { color: #A5B4FC; }
.mavipro-caps-vig--video { color: #F0ABFC; } .mavipro-caps-vig--visite { color: #6EE7B7; } .mavipro-caps-vig--contact { color: var(--mvc-white); }
.mavipro-caps-vig:hover, .mavipro-caps-vig:focus-visible { border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(34, 211, 238, 0.3); outline: none; }
.mavipro-caps-pod.is-open .mavipro-caps-vig { opacity: 1; pointer-events: auto; }

/* Dispositions selon le nombre de faces (4 : sans vidéo/visite ; 5 : une des deux ; 6 : les deux) */
.mavipro-caps-pod.faces-6.is-open .mavipro-caps-vig--identite { transform: translate(-50%, -50%) translate(-78px, -92px); }
.mavipro-caps-pod.faces-6.is-open .mavipro-caps-vig--services { transform: translate(-50%, -50%) translate(78px, -92px); }
.mavipro-caps-pod.faces-6.is-open .mavipro-caps-vig--visuel { transform: translate(-50%, -50%) translate(-78px, 0); }
.mavipro-caps-pod.faces-6.is-open .mavipro-caps-vig--video { transform: translate(-50%, -50%) translate(78px, 0); }
.mavipro-caps-pod.faces-6.is-open .mavipro-caps-vig--visite { transform: translate(-50%, -50%) translate(-78px, 92px); }
.mavipro-caps-pod.faces-6.is-open .mavipro-caps-vig--contact { transform: translate(-50%, -50%) translate(78px, 92px); }
.mavipro-caps-pod.faces-4.is-open .mavipro-caps-vig--identite { transform: translate(-50%, -50%) translate(-74px, -84px); }
.mavipro-caps-pod.faces-4.is-open .mavipro-caps-vig--services { transform: translate(-50%, -50%) translate(74px, -84px); }
.mavipro-caps-pod.faces-4.is-open .mavipro-caps-vig--visuel { transform: translate(-50%, -50%) translate(-74px, 84px); }
.mavipro-caps-pod.faces-4.is-open .mavipro-caps-vig--contact { transform: translate(-50%, -50%) translate(74px, 84px); }
/* 5 faces (vidéo XOR visite) : anneau à 3 niveaux comme le cas à 6, sans la ligne du bas côté manquant */
.mavipro-caps-pod.faces-5.is-open .mavipro-caps-vig--identite { transform: translate(-50%, -50%) translate(-78px, -92px); }
.mavipro-caps-pod.faces-5.is-open .mavipro-caps-vig--services { transform: translate(-50%, -50%) translate(78px, -92px); }
.mavipro-caps-pod.faces-5.is-open .mavipro-caps-vig--visuel { transform: translate(-50%, -50%) translate(-78px, 0); }
.mavipro-caps-pod.faces-5.is-open .mavipro-caps-vig--video { transform: translate(-50%, -50%) translate(78px, 0); }
.mavipro-caps-pod.faces-5.is-open .mavipro-caps-vig--visite { transform: translate(-50%, -50%) translate(78px, 0); }
.mavipro-caps-pod.faces-5.is-open .mavipro-caps-vig--contact { transform: translate(-50%, -50%) translate(0, 92px); }

@media (prefers-reduced-motion: reduce) {
	.mavipro-caps-pod, .mavipro-caps-mini, .mavipro-caps-pod__tag, .mavipro-caps-pod__name, .mavipro-caps-pod__hint, .mavipro-caps-vig { transition: none; }
}

/* --- Pop-up (niveau 3) : un seul dans le DOM, contenu injecté en JS --- */
/* Retour propriétaire, 29 août 2026 : sur iOS Safari, `inset:0` seul ne
   suit pas toujours le redimensionnement de la barre d'adresse qui se
   réduit automatiquement en cours d'interaction — un espace apparaissait
   en bas du popup, laissant voir la vraie page derrière (l'accueil, où
   ce popup est aussi utilisé pour la section Explorer). `100dvh`
   (hauteur de viewport DYNAMIQUE, iOS 15.4+) est justement conçue pour
   suivre ce changement en direct ; height:100vh en repli pour les
   navigateurs plus anciens qui ignorent dvh. */
.mavipro-caps-overlay {
	position: fixed; inset: 0; z-index: 100; background: rgba(4, 7, 14, 0.82); backdrop-filter: blur(10px);
	height: 100vh; height: 100dvh;
	display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .35s;
}
.mavipro-caps-overlay.is-visible { display: flex; opacity: 1; }
.mavipro-caps-overlay .capsule { transform: translateY(18px) scale(.98); transition: transform .4s var(--mvc-ease-soft); }
.mavipro-caps-overlay.is-visible .capsule { transform: none; }

.mavipro-caps-cap-close {
	position: absolute; top: .9rem; right: .9rem; z-index: 20; width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid var(--glass-line); background: rgba(15, 17, 21, 0.6); backdrop-filter: blur(8px);
	color: var(--text-color); cursor: pointer; font-size: 1rem; display: grid; place-items: center;
}

@media (prefers-reduced-motion: reduce) {
	.mavipro-caps-overlay, .mavipro-caps-overlay .capsule { transition: none; }
}