/*
 * CSS de la Capsule — desktop-first (capsule-desktop-v2.html), avec repli
 * mobile (capsule-generique-v2.html, référence d'origine) sous la media
 * query ~820px. --accent/--accent-2/--text-color sont injectées en style
 * inline par single-capsule.php (couleurs du pro) ; les valeurs
 * ci-dessous ne servent que de repli.
 *
 * Structure d'une face (voir templates/faces/*.php) : .swiper-slide >
 * .face > .face__left + .face__right. Desktop : grille 2 colonnes,
 * centrées verticalement. Mobile : 1 colonne (.face reste en grid, la
 * media query ne change que grid-template-columns), .face__left puis
 * .face__right dans l'ordre du DOM — sauf la face Identité, réordonnée
 * en mobile (voir [data-face="identite"] plus bas) pour garder l'ordre
 * "présentation avant bouton Appeler" déjà en place avant la v2 desktop.
 */

.capsule {
	--accent: #22D3EE; --accent-2: #0EA5C4; --text-color: #F5F1EA;
	/* Retour propriétaire, 28 août 2026 : même demande que pour Mon
	   espace (edit-office.css), appliquée aux slides — --text-mut/
	   --text-dim ne sont JAMAIS injectées par single-capsule.php (voir
	   commentaire en tête de fichier : seules --accent/--accent-2/
	   --text-color le sont, depuis l'onglet Couleurs). Elles pilotent le
	   texte secondaire fixe des faces (bio, localisation, SIRET,
	   horaires, libellés Contact...) — passées à blanc, sans toucher aux
	   trois variables réellement personnalisables. */
	--bg: #0F1115; --bg-2: #15181F; --text-mut: #fff; --text-dim: #fff;
	--glass: rgba(255, 255, 255, 0.05); --glass-line: rgba(255, 255, 255, 0.13);
	--fd: 'Space Grotesk', system-ui, sans-serif; --fb: 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html:has(body.mavipro-capsule-page) { height: 100%; }

body.mavipro-capsule-page {
	background: #08090C;
	font-family: 'Inter', system-ui, sans-serif;
	height: 100vh;
	display: grid;
	place-items: center;
	padding: 28px;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

.capsule {
	width: 100%; max-width: 1100px; height: min(88vh, 720px);
	position: relative; border-radius: 28px; overflow: hidden;
	background: var(--bg); color: var(--text-color);
	border: 1px solid var(--glass-line);
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65);
	font-family: var(--fb);
}

.capsule__halo {
	position: absolute; top: -100px; right: -100px; width: 360px; height: 360px;
	border-radius: 50%; background: radial-gradient(circle, var(--accent), transparent 68%);
	opacity: .20; filter: blur(60px); pointer-events: none; z-index: 0;
}
.capsule__halo2 {
	position: absolute; bottom: -120px; left: -100px; width: 320px; height: 320px;
	border-radius: 50%; background: radial-gradient(circle, var(--accent-2), transparent 70%);
	opacity: .12; filter: blur(60px); pointer-events: none; z-index: 0;
}

.capsule__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: 1.1rem; line-height: 1; text-decoration: none;
	display: grid; place-items: center;
}
.capsule__close:hover { border-color: var(--accent); }

/* Repère de marque, juste à gauche de la croix de fermeture (retour
   propriétaire, 27 août 2026, affiné deux fois le même jour : d'abord
   en haut à gauche, puis centré, puis ici — accolé à la croix plutôt
   que dans le coin opposé). Même hauteur/style de "pastille" que le
   bouton fermer, mais purement décoratif et volontairement discret
   (opacité réduite) : ne doit jamais rivaliser avec le logo du pro.
   Couleurs fixes de la marque Captao (pas var(--accent), qui change
   par Capsule) — cohérent avec le logo de l'accueil (voir
   .mavipro-home-nav__mark, assets/css/accueil.css), jamais teinté par
   l'ambiance choisie par le pro. `right` calculé à partir de celui de
   .capsule__close (.9rem) + sa largeur (34px) + un petit espace : à
   resynchroniser à la main si .capsule__close change un jour. */
/* Couleurs volontairement fixes (pas var(--text-color)/var(--accent)) :
   c'est le logo du SITE Captao, pas un élément de la charte du pro — il
   ne doit jamais suivre sa personnalisation "couleur du texte" dans Mon
   espace (retour propriétaire, 28 août 2026 : "Capt" héritait à tort de
   var(--text-color) ici, seul "ao" avait déjà une couleur fixe). */
.capsule__brand {
	position: absolute; top: .9rem; right: calc(.9rem + 34px + .5rem); z-index: 20;
	display: flex; align-items: center; height: 34px; padding: 0 .8rem; border-radius: 100px;
	border: 1px solid var(--glass-line); background: rgba(15, 17, 21, 0.6); backdrop-filter: blur(8px);
	font-family: var(--fd); font-size: .74rem; font-weight: 600; color: #E5E7EB;
	opacity: .6; pointer-events: none;
}
.capsule__brand-mark {
	width: 9px; height: 12px; border-radius: 6px; margin-right: .4rem;
	background: linear-gradient(160deg, #67E8F9, #3B82F6);
}
.capsule__brand span { color: #22D3EE; }

.capsule .swiper { width: 100%; height: 100%; position: relative; z-index: 1; }

/* ZÉRO SCROLL : chaque slide remplit la hauteur, le padding vit sur .face__left/.face__right */
.capsule .swiper-slide { padding: 0; display: flex; overflow: hidden; }

/* grid-template-rows:100% : sans ça, la ligne unique de la grille se
   dimensionne à la hauteur naturelle du contenu (auto), pas à la hauteur
   de la carte — align-items:center centrait alors chaque colonne dans
   cette ligne trop petite (contenu collé en haut, pas vraiment centré
   dans la face). Avec 100%, la ligne occupe toute la hauteur de .face,
   et le centrage vertical (ici et dans .face__left/.face__right) porte
   enfin sur toute la hauteur réelle de la carte. */
.face { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; width: 100%; height: 100%; align-items: center; gap: 0; }
.face__left { padding: 3.5rem 3rem; display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; }
.face__right { padding: 2.2rem 3rem 2.2rem 0; display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; height: 100%; }

.eyebrow {
	font-family: var(--fd); font-size: .72rem; font-weight: 500; letter-spacing: .24em;
	text-transform: uppercase; color: var(--accent); margin-bottom: 1rem;
	display: flex; align-items: center; gap: .5rem; flex: none;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); }

/* text-overflow:clip (au lieu de ellipsis, valeur par défaut de
   -webkit-line-clamp) : coupe net, sans "…" — les limites de saisie
   (voir edit-form.php/fields-capsule.php) empêchent déjà normalement
   d'atteindre cette coupe, ce filet de sécurité ne doit pas ajouter de
   points de suspension si jamais il se déclenche quand même (retour
   propriétaire, 30 juillet 2026). */
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; line-height: 1.45; }
.clamp-9 { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; line-height: 1.6; }

/* IDENTITÉ */
.id__avatar {
	width: 136px; height: 136px; border-radius: 32px; border: 1px solid var(--glass-line);
	background: linear-gradient(150deg, var(--accent), var(--accent-2));
	display: grid; place-items: center; font-size: 3.4rem; margin-bottom: 1.2rem;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); flex: none; overflow: hidden;
}
/* Filet de sécurité en plus du maxlength=40 du champ (fields-capsule.php /
   edit-form.php) : à 2.6rem, un nom d'entreprise long peut quand même
   dépasser 2 lignes selon les caractères — retour propriétaire, 30
   juillet 2026 ("design parfait, zéro scroll" pour tous les champs). */
.id__name { font-family: var(--fd); font-size: 2.6rem; font-weight: 700; line-height: 1.03; letter-spacing: -0.02em; margin-bottom: .5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; }
.id__job { font-family: var(--fd); font-size: 1.05rem; color: var(--accent); font-weight: 500; }
.id__loc { font-size: .95rem; color: var(--text-mut); display: flex; align-items: center; gap: .35rem; margin: .4rem 0 .6rem; }
.id__siret { font-size: .8rem; color: var(--text-dim); margin-bottom: 1rem; }
.id__siret b { color: var(--text-mut); font-weight: 500; }
.id__bio { font-size: 1rem; color: var(--text-mut); font-weight: 300; line-height: 1.6; }
/* Retour propriétaire, 29 août 2026 : texte ET icône du bouton Appeler
   toujours blancs, quelle que soit la couleur d'ambiance choisie par le
   pro (auparavant #0F1115, calculé pour rester sombre sur le dégradé
   --accent/--accent-2 — volontairement abandonné ici, sur demande
   directe). L'icône est un SVG (currentColor), pas l'émoji 📞 d'origine
   : un émoji a ses propres couleurs figées par la plateforme, aucune
   propriété CSS ne peut le forcer en blanc. */
.id__call {
	margin-top: 1.4rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .95rem 2rem; border-radius: 100px; font-family: var(--fd); font-size: .98rem; font-weight: 600;
	text-decoration: none; background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; flex: none;
	width: fit-content;
}
.id__call svg, .ct__call svg { width: 18px; height: 18px; flex: none; }
/* Appeler + WhatsApp côte à côte (seulement si un numéro WhatsApp est renseigné) */
.id__actions { display: flex; gap: .6rem; margin-top: 1.4rem; flex: none; }
.id__actions .id__call { flex: 1; margin-top: 0; width: auto; }
.id__share {
	flex: none; width: 52px; height: 52px; border-radius: 50%; padding: 0;
	display: grid; place-items: center; background: var(--glass); border: 1px solid var(--glass-line);
	color: var(--text-color); cursor: pointer;
}
.id__share svg { width: 20px; height: 20px; }
.id__share:hover { border-color: var(--accent); color: var(--accent); }
.id__share { position: relative; }
.id__share.is-copied::after {
	content: "Lien copié !"; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
	background: var(--accent); color: #0F1115; font-family: var(--fb); font-size: .72rem; font-weight: 600;
	padding: .3rem .6rem; border-radius: 100px; white-space: nowrap; pointer-events: none;
}

/* SERVICES */
.s-title { font-family: var(--fd); font-size: 2rem; font-weight: 600; letter-spacing: -0.01em; flex: none; line-height: 1.1; }
.s-subtext { font-size: .98rem; color: var(--text-mut); font-weight: 300; margin: .8rem 0 0; flex: none; line-height: 1.55; }
.svc { display: flex; flex-direction: column; gap: .55rem; width: 100%; }
.svc__item { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-line); flex: none; }
.svc__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 10px var(--accent); }
.svc__txt { font-size: .95rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: clip; }

/* VISUEL — diaporama */
.real-swiper { border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-line); height: 100%; max-height: 520px; width: 100%; position: relative; }
.real-swiper .swiper-slide { padding: 0; }
.real__photo { width: 100%; height: 100%; background: #0a0c10; }
.real__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.real-count {
	position: absolute; top: 12px; right: 12px; z-index: 5; background: rgba(15, 17, 21, 0.7);
	backdrop-filter: blur(6px); border: 1px solid var(--glass-line); border-radius: 100px;
	padding: .3rem .8rem; font-family: var(--fd); font-size: .76rem; color: var(--text-color);
}
.real-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 34px; height: 56px;
	border: none; background: rgba(15, 17, 21, 0.4); backdrop-filter: blur(4px); color: #fff;
	cursor: pointer; font-size: 1.6rem; line-height: 1; display: grid; place-items: center; font-family: var(--fd);
}
.real-arrow--prev { left: 0; border-radius: 0 10px 10px 0; }
.real-arrow--next { right: 0; border-radius: 10px 0 0 10px; }

/* MÉDIA (vidéo / visite) */
.media__frame { height: 100%; max-height: 520px; width: 100%; border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-line); background: #000; position: relative; display: flex; }
.media__frame iframe { width: 100%; height: 100%; border: 0; }
.media__frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.media__ph {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .8rem; background: linear-gradient(160deg, var(--bg-2), #0a0c10); color: var(--text-mut);
	cursor: pointer; text-align: center; padding: 1.5rem;
}
.media__play { width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(120deg, var(--accent), var(--accent-2)); display: grid; place-items: center; font-size: 1.7rem; color: #0F1115; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.media__ph small { font-size: .82rem; color: var(--text-dim); }

/* CONTACT */
.ct { display: flex; flex-direction: column; gap: .5rem; width: 100%; }
.ct__row { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .9rem; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-line); flex: none; }
.ct__ic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-line); color: var(--accent); font-size: .95rem; }
.ct__l { font-size: .64rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .1rem; }
.ct__v { font-size: .9rem; font-weight: 500; }
/* Site web cliquable, ouvre un nouvel onglet (retour propriétaire, 28
   août 2026) — reprend la même couleur que le texte normal par défaut
   (pas un lien bleu classique du navigateur), le soulignement au survol
   suffit à indiquer que c'est cliquable. */
.ct__site-link { color: inherit; text-decoration: none; }
.ct__site-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.ct__itineraire { display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; font-family: var(--fd); font-size: .78rem; font-weight: 500; text-decoration: none; color: var(--accent); }
.ct__itineraire:hover { text-decoration: underline; }
/* .hours-wrap contient __icon (masqué en desktop, visible en mobile pour
   matcher les autres .ct__row à icône) + __body (les 2 vrais enfants —
   titre + liste — via display:contents en desktop pour rester des enfants
   flex directs de .hours-wrap ; redevient une vraie boîte en mobile). */
.hours-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hours-wrap__icon { display: none; }
.hours-wrap__body { display: contents; }
.ct-hours-title { font-family: var(--fd); font-size: 1rem; color: var(--text-color); margin-bottom: .7rem; font-weight: 600; text-align: center; }
.hours { display: flex; flex-direction: column; gap: .15rem; width: 100%; max-width: 340px; margin: 0 auto; align-items: center; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 14px; padding: 1.1rem 1.4rem; }
.hours__row { display: flex; justify-content: center; gap: 1rem; font-size: .82rem; padding: .15rem 0; }
.hours__day { color: var(--text-mut); min-width: 80px; text-align: right; }
.hours__val { text-align: left; color: var(--text-color); min-width: 150px; }
.hours__val.closed { color: var(--text-dim); font-style: italic; }
/* Simple lien texte (icône + phrase), pas un bouton — le pro colle
   n'importe quel lien (Planity, son propre formulaire...), ce n'est pas
   une action au même niveau qu'Appeler/Écrire (retour propriétaire, 29
   juillet 2026). Absente du DOM si vide (voir face-contact.php) : aucun
   espace/décalage résiduel, .face__right reste centré sur son contenu. */
.ct__reservation {
	display: flex; align-items: center; justify-content: center; gap: .5rem;
	margin-top: 1.6rem; font-family: var(--fd); font-size: .88rem; font-weight: 500;
	text-decoration: none; color: var(--accent);
}
.ct__reservation:hover { text-decoration: underline; }
.socials { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.social { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--glass-line); color: var(--text-color); font-size: .8rem; text-decoration: none; }
.social:hover { border-color: var(--accent); }
/* Vrais logos de marque en SVG — retour propriétaire, 29 août 2026, voir
   capsule-render-helpers.php/live-preview.js. */
.social svg { width: 16px; height: 16px; }

/* Couleurs officielles de chaque réseau (retour propriétaire, 29 août
   2026) — fixes, pas var(--accent) : ce sont des logos de marque, même
   raison que .ct__whatsapp plus haut (garde sa couleur quel que soit le
   thème choisi par le pro). border transparente : pas de liseré --glass-line
   à conserver une fois la pastille en couleur pleine. */
.social--facebook { background: #1877F2; border-color: transparent; color: #fff; }
.social--instagram { background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5); border-color: transparent; color: #fff; }
.social--tiktok { background: #000; border-color: transparent; color: #fff; }
.social--linkedin { background: #0A66C2; border-color: transparent; color: #fff; }
.social--pinterest { background: #E60023; border-color: transparent; color: #fff; }
.social--facebook:hover, .social--instagram:hover, .social--tiktok:hover, .social--linkedin:hover, .social--pinterest:hover { filter: brightness(1.1); }
/* flex (pas grid) : WhatsApp est une petite icône ronde à largeur fixe,
   Appeler/Écrire se partagent le reste — évite que 3 boutons pleine
   largeur se serrent quand WhatsApp est renseigné. */
.ct__actions { display: flex; gap: .6rem; margin-top: 1rem; flex: none; }
/* Texte/icône blancs — même choix et même raison que .id__call ci-dessus. */
.ct__call { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem; border-radius: 100px; font-family: var(--fd); font-size: .92rem; font-weight: 600; text-decoration: none; background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; }
.ct__call--ghost { background: var(--glass); border: 1px solid var(--glass-line); color: var(--text-color); }
/* Couleur officielle WhatsApp fixe (pas var(--accent)) : c'est un logo
   de marque, il garde son vert quel que soit le thème de couleur choisi
   par le pro (retour propriétaire, 13 août 2026). */
.ct__whatsapp {
	flex: none; width: 48px; height: 48px; border-radius: 50%;
	display: grid; place-items: center; background: #25D366; border: none;
	color: #fff; text-decoration: none;
}
.ct__whatsapp svg { width: 22px; height: 22px; }
.ct__whatsapp:hover { filter: brightness(1.08); }

.capsule .swiper-pagination-bullet { background: var(--glass-line); opacity: 1; width: 8px; height: 8px; transition: all .3s; }
.capsule .swiper-pagination-bullet-active { background: var(--accent); width: 24px; border-radius: 4px; }
#capsuleSwiper > .swiper-pagination { bottom: 1.3rem !important; }
.nav-arrows { position: absolute; bottom: 1.1rem; right: 1.4rem; z-index: 10; display: flex; gap: .5rem; }
.nav-arrows button { width: 42px; height: 42px; 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: 1.1rem; display: grid; place-items: center; }
.nav-arrows button:hover { border-color: var(--accent); }

/* ===================== MOBILE (~820px et moins) ===================== */
@media (max-width: 820px) {

	body.mavipro-capsule-page { height: auto; min-height: 100vh; padding: 20px; overflow: visible; }

	.capsule { max-width: 420px; height: min(86vh, 760px); }

	/* Halos dimensionnés pour la carte desktop (1100px) — sur la petite
	   carte mobile (420px) ils débordaient largement du cadre visible et
	   changeaient tout le rendu de fond de chaque face. On revient aux
	   proportions d'origine (mobile v1) pour le halo principal, et on
	   réduit le second halo dans les mêmes proportions. */
	.capsule__halo { top: -80px; right: -80px; width: 280px; height: 280px; opacity: .22; filter: blur(50px); }
	.capsule__halo2 { bottom: -70px; left: -70px; width: 220px; height: 220px; opacity: .12; filter: blur(40px); }

	/* Repli mobile = capsule-generique-v2-2.html à l'identique : .face,
	   .face__left et .face__right (introduits pour la grille 2 colonnes
	   desktop) disparaissent du rendu via display:contents — leurs
	   enfants (avatar, titres, listes, galerie, média, horaires...)
	   redeviennent des enfants flex DIRECTS de .swiper-slide, exactement
	   comme dans la v1 mobile d'origine, avec le même CSS (padding sur
	   .swiper-slide, flex:1/min-height:0 sur le bloc variable de chaque
	   face). display:contents ne retire l'élément QUE du rendu, pas du
	   DOM : les sélecteurs [data-face] et > continuent de fonctionner. */
	.capsule .swiper-slide { padding: 1.7rem 1.5rem 4rem; display: flex; flex-direction: column; overflow: hidden; }
	.face, .face__left, .face__right { display: contents; }

	/* Identité : la présentation doit rester AVANT le bouton Appeler
	   (ordre d'origine, décision du propriétaire), alors que le DOM
	   place .face__left (bouton) avant .face__right (présentation) pour
	   la 2 colonnes desktop. Une fois les wrappers aplatis, tous les
	   éléments de la face sont des enfants flex directs de .swiper-slide
	   : `order` sur le SEUL bloc .id__actions (pas .id__call) suffit à le
	   repousser après la bio, sans toucher à la position de l'avatar/nom/
	   métier/ville/SIRET. L'eyebrow "Présentation" (ajoutée pour le
	   desktop, absente de la v1 mobile) est masquée.
	   Piège corrigé (retour propriétaire, 28 août 2026) : l'ancienne
	   règle appliquait aussi order:1 à .id__call directement — sans
	   effet tant qu'Appeler ET WhatsApp partageaient tous deux cette
	   classe (ordre relatif conservé), mais dès que WhatsApp est passé à
	   .ct__whatsapp (style Contact), Appeler s'est retrouvé seul avec
	   order:1 et repoussé après Partager/l'icône d'installation (qui
	   restent à order:0 par défaut) — visuellement Appeler passait en
	   dernier au lieu de rester premier. .id__actions étant un vrai
	   conteneur flex (pas display:contents), `order` sur .id__call agit
	   ici sur l'ordre DANS la rangée, pas sur la position du bloc entier
	   parmi les enfants de la face — seul .id__actions doit le porter. */
	[data-face="identite"] .face__right > .eyebrow { display: none; }
	[data-face="identite"] .id__actions { order: 1; }

	.eyebrow { font-size: .68rem; margin-bottom: .8rem; }
	.eyebrow::before { width: 22px; }

	.clamp-9 { -webkit-line-clamp: 7; line-height: 1.5; }

	.id__avatar { width: 112px; height: 112px; border-radius: 28px; font-size: 2.9rem; margin-bottom: .9rem; }
	.id__name { font-size: 1.6rem; margin-bottom: .35rem; }
	.id__job { font-size: .85rem; }
	.id__loc { font-size: .82rem; margin: .25rem 0 .5rem; }
	.id__siret { font-size: .72rem; margin-bottom: .7rem; }
	/* La bio occupe l'espace restant (flex:1) et centre son propre texte
	   dedans (display:flex + align-items:center) — au lieu de rester
	   collée en haut sous le SIRET avec un grand vide avant le bouton
	   Appeler, qui reste ancré en bas via margin-top:auto (retour
	   propriétaire, 30 juillet 2026 — même schéma que la face Contact). */
	.id__bio { font-size: .9rem; flex: 1; min-height: 0; display: flex; align-items: center; }
	.id__call { margin-top: auto; padding: .85rem; font-size: .92rem; width: 100%; }
	.id__actions { gap: .6rem; margin-top: auto; }
	.id__actions .id__call { margin-top: 0; }

	.s-title { font-size: 1.4rem; }
	.s-subtext { font-size: .85rem; margin: .45rem 0 .9rem; }
	.svc { gap: .5rem; flex: 1; min-height: 0; }
	.svc__item { padding: .7rem .9rem; }
	.svc__txt { font-size: .9rem; }

	.real-swiper { margin-top: .9rem; flex: 1; min-height: 0; }
	.real-count { top: 10px; right: 10px; padding: .25rem .7rem; font-size: .72rem; }
	.real-arrow { width: 30px; height: 50px; font-size: 1.5rem; }

	.media__frame { margin-top: .9rem; flex: 1; min-height: 0; }
	.media__play { width: 60px; height: 60px; font-size: 1.5rem; }

	/* flex:1 étirait .ct pour occuper tout l'espace vertical restant,
	   poussant .hours-wrap (juste après dans le flux, hors du flex
	   étiré) loin en dessous — grand vide entre Réseaux et Horaires sur
	   les Capsules à contenu court (bug remonté par le propriétaire,
	   29 juillet 2026). .ct se dimensionne maintenant sur son contenu. */
	.ct { gap: .45rem; margin-top: .6rem; flex: none; }
	.ct__row { padding: .6rem .8rem; }
	.ct__ic { width: 32px; height: 32px; border-radius: 9px; font-size: .9rem; }
	.ct__l { font-size: .62rem; }
	.ct__v { font-size: .84rem; }

	/* Horaires : .hours-wrap redevient une vraie boîte (icône 🕐 à gauche +
	   corps à droite), pour ressembler à .ct__row exactement comme dans
	   la v1 mobile — au lieu du bloc encadré/centré du desktop. Ordre
	   voulu : adresse/site/réseaux, PUIS horaires, PUIS boutons d'action
	   (ordre d'origine) — .ct__actions passe après via `order`. */
	[data-face="contact"] .ct__actions { order: 1; }
	.hours-wrap {
		flex-direction: row; align-items: flex-start; gap: .75rem; width: auto;
		padding: .6rem .8rem; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-line);
		margin-top: .45rem; flex: none;
	}
	.hours-wrap__icon {
		display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; flex: none;
		background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-line); color: var(--accent); font-size: .9rem;
	}
	.hours-wrap__body { display: block; flex: 1; min-width: 0; }
	.ct-hours-title { font-family: var(--fb); font-size: .62rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .1rem; font-weight: 400; text-align: left; }
	.hours { gap: .05rem; max-width: none; width: 100%; align-items: stretch; background: none; border: none; border-radius: 0; padding: 0; }
	.hours__row { justify-content: space-between; gap: .6rem; font-size: .74rem; padding: 0; }
	.hours__day { min-width: 68px; text-align: left; }
	.hours__val { text-align: right; min-width: 0; }
	.socials { gap: .4rem; margin-top: .25rem; }
	.social { width: 24px; height: 24px; border-radius: 7px; font-size: .7rem; }
	/* margin-top:auto (au lieu d'une valeur fixe) absorbe tout l'espace
	   vertical restant du flex column : les boutons restent collés en
	   bas de la face quel que soit le contenu au-dessus, sans recréer de
	   vide au milieu (voir le correctif .ct juste au-dessus). */
	.ct__actions { gap: .5rem; margin-top: auto; }
	.ct__call { padding: .8rem; font-size: .9rem; }
	.ct__reservation { margin-top: 1.1rem; font-size: .85rem; }
	.ct__whatsapp { width: 44px; height: 44px; font-size: 1.15rem; }
	.ct__whatsapp svg { width: 20px; height: 20px; }

	.capsule .swiper-pagination-bullet { width: 7px; height: 7px; }
	.capsule .swiper-pagination-bullet-active { width: 22px; }
	#capsuleSwiper > .swiper-pagination { bottom: 1.2rem !important; }
	.nav-arrows { bottom: .9rem; right: 1.1rem; }
	.nav-arrows button { width: 36px; height: 36px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.capsule .swiper-pagination-bullet { transition: none; }
}