/* ============================================================
   COMPOSANTS D'INTERFACE PARTAGÉS (pages « application »)
   ------------------------------------------------------------
   Utilisé par : /kickoff/, /admin/, /contrat/devis&contrat/,
   /contrat/quittance/, /contrat/bail/, /running/.

   À charger APRÈS assets/css/theme.css : toutes les couleurs
   proviennent des tokens de thème, ces composants suivent donc
   automatiquement le mode clair comme le mode sombre.
   ============================================================ */

/* ---------- Décor de fond ---------- */
.animate-blob { animation: nm-blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
@keyframes nm-blob {
	0%   { transform: translate(0px, 0px) scale(1); }
	33%  { transform: translate(30px, -50px) scale(1.1); }
	66%  { transform: translate(-20px, 20px) scale(0.9); }
	100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes nm-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: nm-fade-in .5s ease-out forwards; }

/* ---------- Cartes ---------- */
.glass-card { border-radius: 1.5rem; position: relative; z-index: 2; }

/* ---------- Champs de formulaire ---------- */
.input-premium,
.textarea-premium,
.select-premium {
	background: rgb(var(--t-dark-950));
	border: 1px solid rgb(var(--t-hairline) / calc(var(--t-hairline-alpha) * 2.5));
	color: rgb(var(--t-white));
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	width: 100%;
	transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
	font-size: 0.95rem;
	font-family: 'Inter', system-ui, sans-serif;
	position: relative;
}
.textarea-premium { min-height: 120px; resize: vertical; }
.input-premium::placeholder,
.textarea-premium::placeholder { color: rgb(var(--t-slate-500)); }
.input-premium:focus,
.textarea-premium:focus,
.select-premium:focus {
	border-color: rgb(var(--t-accent-400));
	outline: none;
	box-shadow: 0 0 0 3px rgb(var(--t-accent-400) / 0.15);
}
.input-premium:disabled,
.select-premium:disabled { opacity: .55; cursor: not-allowed; }

/* Flèche du <select> lisible dans les deux thèmes */
.select-premium {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, rgb(var(--t-slate-400)) 50%),
	                  linear-gradient(135deg, rgb(var(--t-slate-400)) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

.label-premium {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: rgb(var(--t-slate-400));
	margin-bottom: 0.35rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------- Titres de section ---------- */
.section-title {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: rgb(var(--t-white));
	border-bottom: 1px solid rgb(var(--t-hairline) / calc(var(--t-hairline-alpha) * 2));
	padding-bottom: 0.5rem;
	margin-top: 2rem;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.section-title:first-child, .section-title.mt-0 { margin-top: 0; }
.section-title i { color: rgb(var(--t-accent-400)); }

/* ---------- Cases à cocher ---------- */
.chk-label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
	border: 1px solid transparent;
}
.chk-label:hover {
	background: rgb(var(--t-slate-500) / 0.08);
	border-color: rgb(var(--t-hairline) / calc(var(--t-hairline-alpha) * 2));
}
.chk-input {
	accent-color: rgb(var(--t-accent-400));
	width: 1.1rem; height: 1.1rem; margin-top: 2px;
	flex-shrink: 0;
}

/* ---------- Boutons ---------- */
.btn-primary {
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	padding: .85rem 1.4rem; border-radius: .85rem;
	background: rgb(var(--t-accent-400));
	color: rgb(var(--t-dark-950));
	font-weight: 700; font-size: .9rem;
	transition: filter .2s ease, transform .2s ease, opacity .2s ease;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-ghost {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .7rem 1.1rem; border-radius: .8rem;
	border: 1px solid rgb(var(--t-hairline) / calc(var(--t-hairline-alpha) * 2.5));
	background: rgb(var(--t-slate-500) / .06);
	color: rgb(var(--t-slate-300));
	font-weight: 600; font-size: .82rem;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-ghost:hover { background: rgb(var(--t-slate-500) / .14); color: rgb(var(--t-white)); }

.btn-danger { color: rgb(var(--t-red-400)); }
.btn-danger:hover { background: rgb(var(--t-red-500) / .12); color: rgb(var(--t-red-500)); }

/* ---------- Barre d'action fixe (mobile) ---------- */
.sticky-action-bar {
	position: fixed; bottom: 0; left: 0; right: 0;
	padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
	background: rgb(var(--t-dark-950) / 0.92);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-top: 1px solid rgb(var(--t-hairline) / calc(var(--t-hairline-alpha) * 2.5));
	z-index: 60;
	display: flex; justify-content: center; gap: 1rem;
}

/* ---------- Écran de garde des pages sécurisées ---------- */
#auth-loader {
	position: fixed; inset: 0; z-index: 200;
	background: rgb(var(--t-dark-950));
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; padding: 1.5rem;
}
#secure-content { display: none; }

/* ---------- Tableaux ---------- */
.nm-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.nm-table th {
	text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
	color: rgb(var(--t-slate-500)); font-weight: 700;
	padding: .7rem .8rem; white-space: nowrap;
	border-bottom: 1px solid rgb(var(--t-hairline) / calc(var(--t-hairline-alpha) * 2.5));
}
.nm-table td {
	padding: .8rem;
	border-bottom: 1px solid rgb(var(--t-hairline) / var(--t-hairline-alpha));
	color: rgb(var(--t-slate-300));
	vertical-align: top;
}
.nm-table tbody tr:hover { background: rgb(var(--t-slate-500) / .06); }

/* Colonne d'actions toujours visible, même quand le tableau défile
   horizontalement sur petit écran (ex. liste des demandes en admin). */
.nm-table-actions-col {
	position: sticky; right: 0;
	background: rgb(var(--t-dark-900));
	box-shadow: -8px 0 10px -8px rgb(0 0 0 / .35);
}

/* ---------- Sélecteur de statut (liste des demandes) ---------- */
.nm-status-select {
	appearance: none;
	display: block; width: 100%; max-width: 140px;
	padding: .3rem 1.6rem .3rem .6rem;
	border-radius: .5rem;
	font-size: .7rem; font-weight: 700;
	color: rgb(var(--t-slate-300));
	background-color: rgb(var(--t-dark-950));
	border: 1px solid rgb(var(--t-hairline) / calc(var(--t-hairline-alpha) * 2.5));
	background-image: linear-gradient(45deg, transparent 50%, rgb(var(--t-slate-500)) 50%),
	                  linear-gradient(135deg, rgb(var(--t-slate-500)) 50%, transparent 50%);
	background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer; transition: border-color .2s ease;
}
.nm-status-select:hover { border-color: rgb(var(--t-accent-400) / .5); }
.nm-status-select--nouveau  { color: rgb(var(--t-accent-400));  border-color: rgb(var(--t-accent-400) / .45); }
.nm-status-select--traite   { color: rgb(var(--t-blue-400));    border-color: rgb(var(--t-blue-400) / .45); }
.nm-status-select--converti { color: rgb(var(--t-emerald-400)); border-color: rgb(var(--t-emerald-400) / .45); }
.nm-status-select--perdu    { color: rgb(var(--t-slate-500)); }

/* ---------- Badges d'état ---------- */
.nm-badge {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .2rem .6rem; border-radius: 999px;
	font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
	white-space: nowrap;
}
.nm-badge--neutral { background: rgb(var(--t-slate-500) / .15); color: rgb(var(--t-slate-400)); }
.nm-badge--info    { background: rgb(var(--t-blue-500) / .15);  color: rgb(var(--t-blue-400)); }
.nm-badge--ok      { background: rgb(var(--t-emerald-500) / .15); color: rgb(var(--t-emerald-400)); }
.nm-badge--warn    { background: rgb(var(--t-amber-500) / .18); color: rgb(var(--t-amber-400)); }
.nm-badge--danger  { background: rgb(var(--t-red-500) / .15);   color: rgb(var(--t-red-400)); }
.nm-badge--accent  { background: rgb(var(--t-accent-400) / .15); color: rgb(var(--t-accent-400)); }


/* ============================================================
   COMPOSANTS PARTAGÉS ACCUEIL ↔ OFFRE CLUB
   (sélection de packs, formules de suivi, interventions,
    animation de survol, aperçus agrandis)
   ============================================================ */

.interactive-hover { transition: all .3s cubic-bezier(.4, 0, .2, 1); }
.interactive-hover:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: var(--t-elevation);
	border-color: rgb(var(--t-accent-400) / .3);
}

/* --- Bascule mensuel / annuel --- */
.billing-cycle-pills {
	border: 1px solid rgb(var(--t-hairline) / calc(var(--t-hairline-alpha) * 2));
	background: rgb(var(--t-slate-500) / .08);
}
.billing-cycle-pill {
	appearance: none; border: none; background: transparent;
	color: rgb(var(--t-slate-400));
	font-weight: 700; font-size: 12px; line-height: 1;
	padding: 9px 16px; border-radius: 9999px;
	cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
/* ⚠️ Bug corrigé le 17/09/2026 : l'ancien sélecteur de survol
   `.billing-cycle-pill:hover:not(:disabled)` était PLUS spécifique que
   `.active`. Juste après un clic, la souris étant encore sur la pastille,
   le gris du survol écrasait le bleu : « la couleur bleue n'apparaît pas
   forcément ». Le survol ne concerne plus que la pastille inactive. */
.billing-cycle-pill:not(.active):not(:disabled):hover { color: rgb(var(--t-slate-200)); background: rgb(var(--t-slate-500) / .12); }
.billing-cycle-pill.active,
.billing-cycle-pill.active:hover,
.billing-cycle-pill.active:focus {
	background: rgb(var(--t-blue-500)); color: #fff;
	box-shadow: 0 4px 14px rgb(var(--t-blue-500) / .35);
}
.billing-cycle-pill:disabled { pointer-events: none; }

/* Le libellé « — le plus avantageux » vit sur deux fonds très différents :
   clair quand la pastille est au repos, bleu plein quand elle est active.
   Le vert du thème (rgb 5 150 105 en clair) devient illisible sur ce bleu :
   on bascule donc sur un jaune clair dès que la pastille est active.
   Ne PAS remettre `text-emerald-400` en dur dans le HTML. */
/* Mise à jour 17/09/2026 : le jaune clair sur bleu jugé peu élégant.
   Le libellé devient une petite étiquette : verte au repos, blanche
   translucide (verre dépoli) quand la pastille est active. */
.billing-cycle-pill__hint {
	display: inline-flex; align-items: center;
	margin-left: .35rem !important; padding: 3px 7px; border-radius: 9999px;
	font-size: 10px; font-weight: 700; letter-spacing: .01em;
	color: rgb(var(--t-emerald-400)); background: rgb(var(--t-emerald-400) / .12);
	transition: background-color .2s ease, color .2s ease;
}
.billing-cycle-pill.active .billing-cycle-pill__hint {
	color: #fff; background: rgb(255 255 255 / .2);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28);
}

/* --- Cartes de suivi sélectionnées --- */
.serenity-selected-card {
	border-color: rgb(var(--t-blue-400)) !important;
	box-shadow: 0 0 30px rgb(var(--t-blue-400) / .18) !important;
	transform: translateY(-3px) scale(1.01);
}

/* --- Boutons Sérénité du formulaire --- */
.serenity-btn {
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
	border: 1px solid rgb(var(--t-blue-500) / .25);
	background: rgb(var(--t-blue-500) / .06);
}
.serenity-btn.active {
	background: rgb(var(--t-blue-500) / .18);
	border-color: rgb(var(--t-blue-500));
	box-shadow: 0 0 20px rgb(var(--t-blue-500) / .2);
}
.serenity-btn.active-plus {
	background: rgb(var(--t-indigo-500) / .18);
	border-color: rgb(var(--t-indigo-500));
	box-shadow: 0 0 20px rgb(var(--t-indigo-500) / .2);
}

/* --- Situation & interventions --- */
.request-type-btn { transition: all .25s ease; cursor: pointer; }
.request-type-btn.active-request-type {
	border-color: rgb(var(--t-accent-400)) !important;
	background: rgb(var(--t-accent-400) / .1) !important;
	box-shadow: 0 0 15px rgb(var(--t-accent-400) / .15);
}
.intervention-btn { transition: all .25s ease; cursor: pointer; }
.intervention-btn.active-intervention {
	background-color: rgb(var(--t-accent-400)) !important;
	border-color: rgb(var(--t-accent-400)) !important;
	box-shadow: 0 0 15px rgb(var(--t-accent-400) / .3);
}
.intervention-btn.active-intervention span { color: rgb(var(--t-dark-950)) !important; }

/* --- Titre de section de formulaire --- */
.form-section-title {
	color: rgb(var(--t-accent-400)); font-size: .8rem; text-transform: uppercase;
	letter-spacing: .05em; font-weight: 700; margin-bottom: .5rem;
	display: flex; align-items: center; gap: .5rem;
}

/* --- Calendrier --- */
.date-btn.active-date {
	background-color: rgb(var(--t-accent-400)) !important;
	border-color: rgb(var(--t-accent-400)) !important;
	transform: scale(1.05);
}
.date-btn.active-date span { color: rgb(var(--t-dark-950)) !important; }
/* 29/09/2026 — Créneau horaire choisi : sur smartphone, l'état :hover reste
   « collé » après le toucher, et hover:text-accent-400 rendait l'heure
   invisible (texte accent sur fond accent). L'état sélectionné gagne toujours. */
.time-btn.is-selected,
.time-btn.is-selected:hover {
	background-color: rgb(var(--t-accent-400)) !important;
	border-color: rgb(var(--t-accent-400)) !important;
	color: rgb(var(--t-dark-950)) !important;
}

/* ============================================================
   MODULES CLUB — cartes sélectionnables et miniatures
   ============================================================ */
.club-card { transition: all .3s cubic-bezier(.4, 0, .2, 1); }
.club-card.is-selected {
	border-color: rgb(var(--t-accent-400)) !important;
	background: rgb(var(--t-accent-400) / .07);
	box-shadow: 0 0 0 1px rgb(var(--t-accent-400) / .3);
}
.club-card__toggle.is-on {
	background: rgb(var(--t-accent-400));
	color: rgb(var(--t-dark-950));
	border-color: rgb(var(--t-accent-400));
}

.club-option {
	transition: all .25s cubic-bezier(.4, 0, .2, 1);
	border: 1px solid rgb(var(--t-hairline) / calc(var(--t-hairline-alpha) * 2.5));
	cursor: pointer;
}
.club-option:hover { border-color: rgb(var(--t-accent-400) / .5); }
.club-option.selected {
	border-color: rgb(var(--t-accent-400));
	background: rgb(var(--t-accent-400) / .10);
	box-shadow: 0 0 0 1px rgb(var(--t-accent-400) / .25);
}
.club-option.selected .club-option__box {
	background: rgb(var(--t-accent-400));
	border-color: rgb(var(--t-accent-400));
}
.club-option.selected .club-option__box i { opacity: 1; transform: scale(1); }

/* Miniatures d'aperçu */
.club-thumb {
	width: 62px; height: 44px; border-radius: 8px; overflow: hidden;
	border: 1px solid rgb(var(--t-hairline) / calc(var(--t-hairline-alpha) * 3));
	background: rgb(var(--t-dark-950));
	transition: transform .2s ease, border-color .2s ease;
	flex-shrink: 0; padding: 0; cursor: zoom-in;
}
.club-thumb:hover { transform: scale(1.08); border-color: rgb(var(--t-accent-400)); }
.club-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Aperçu agrandi */
#club-lightbox {
	position: fixed; inset: 0; z-index: 120;
	background: rgb(2 6 23 / .92);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	display: flex; align-items: center; justify-content: center; gap: 12px;
	padding: 24px;
	opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
#club-lightbox.is-open { opacity: 1; pointer-events: auto; }
.club-lightbox__figure { margin: 0; max-width: min(1100px, 88vw); text-align: center; }
.club-lightbox__figure img {
	max-width: 100%; max-height: 76vh; border-radius: 12px; display: block;
	box-shadow: 0 30px 80px -20px rgb(0 0 0 / .7);
}
.club-lightbox__figure figcaption { margin-top: 14px; color: #cbd5e1; font-size: 13px; }
.club-lightbox__close {
	position: absolute; top: 18px; right: 18px;
	width: 42px; height: 42px; border-radius: 999px;
	background: rgb(255 255 255 / .12); color: #fff; font-size: 20px;
	display: flex; align-items: center; justify-content: center;
	transition: background-color .2s ease;
}
.club-lightbox__close:hover { background: rgb(255 255 255 / .25); }
.club-lightbox__nav {
	width: 46px; height: 46px; border-radius: 999px; flex-shrink: 0;
	background: rgb(255 255 255 / .12); color: #fff; font-size: 20px;
	display: flex; align-items: center; justify-content: center;
	transition: background-color .2s ease;
}
.club-lightbox__nav:hover { background: rgb(255 255 255 / .25); }
@media (max-width: 640px) {
	.club-lightbox__nav { position: absolute; bottom: 24px; }
	.club-lightbox__nav--prev { left: 24px; }
	.club-lightbox__nav--next { right: 24px; }
}

/* ============================================================
   RÉVÉLATION AU DÉFILEMENT (accueil + offre club)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: all .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Étapes du parcours : elles arrivent l'une après l'autre. */
.funnel-step { transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease, border-color .3s ease; }
.funnel-step:hover { transform: translateY(-4px); box-shadow: var(--t-elevation); border-color: rgb(var(--t-accent-400) / .35); }
.funnel-step:hover .funnel-step__num {
	background: rgb(var(--t-accent-400));
	color: rgb(var(--t-dark-950));
	transform: scale(1.08);
}
.funnel-step__num { transition: background-color .3s ease, color .3s ease, transform .3s ease; }

/* ---------- Utilitaire lecteur d'écran ---------- */
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* ============================================================
   AJOUTS DU 17/09/2026
   ============================================================ */

/* ---------- Infobulle design (délais indicatifs, mois offert…) ----------
   Usage : <span class="nm-tip" tabindex="0" data-tip="Texte">…</span>
   Survol à la souris, focus au clavier, toucher sur mobile (tabindex).
   `.nm-tip--start` ancre la bulle à gauche (élément collé au bord gauche). */
.nm-tip { position: relative; display: inline-flex; align-items: center; gap: .3rem; cursor: help; outline: none; }
.nm-tip__icon { opacity: .7; font-size: 12px; transition: opacity .2s ease; }
.nm-tip:hover .nm-tip__icon, .nm-tip:focus .nm-tip__icon { opacity: 1; }
.nm-tip::after {
	content: attr(data-tip);
	position: absolute; left: 50%; bottom: calc(100% + 10px);
	width: max-content; max-width: min(260px, 78vw);
	padding: 10px 12px; border-radius: 12px;
	background: rgb(var(--t-dark-950) / .97); color: rgb(var(--t-slate-200));
	border: 1px solid rgb(var(--t-accent-400) / .25);
	box-shadow: var(--t-elevation), 0 10px 30px rgb(0 0 0 / .18);
	font-size: 11.5px; font-weight: 500; line-height: 1.45; letter-spacing: normal;
	text-transform: none; text-align: left; white-space: normal;
	opacity: 0; pointer-events: none; z-index: 60;
	transform: translate(-50%, 6px); transition: opacity .2s ease, transform .2s ease;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nm-tip::before {
	content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px);
	width: 10px; height: 10px; transform: translate(-50%, 6px) rotate(45deg);
	background: rgb(var(--t-dark-950) / .97);
	border-right: 1px solid rgb(var(--t-accent-400) / .25);
	border-bottom: 1px solid rgb(var(--t-accent-400) / .25);
	opacity: 0; pointer-events: none; z-index: 61; transition: opacity .2s ease, transform .2s ease;
}
.nm-tip--start::after { left: -6px; transform: translate(0, 6px); }
.nm-tip--start::before { left: 12px; }
.nm-tip:hover::after, .nm-tip:focus::after, .nm-tip:focus-within::after { opacity: 1; transform: translate(-50%, 0); }
.nm-tip:hover::before, .nm-tip:focus::before, .nm-tip:focus-within::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }
.nm-tip--start:hover::after, .nm-tip--start:focus::after, .nm-tip--start:focus-within::after { transform: translate(0, 0); }

/* Étiquette « +1 mois offert » à côté de « 2 mois offerts » */
.gift-extra {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 2px 8px; border-radius: 9999px;
	font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
	color: rgb(var(--t-accent-400)); background: rgb(var(--t-accent-400) / .1);
	border: 1px dashed rgb(var(--t-accent-400) / .45);
}

/* ---------- Cartes de packs : alignement ordinateur / compact mobile ----------
   Sur ordinateur (4 colonnes), les hauteurs minimales et les lignes
   « fantômes » alignent les rubriques d'une carte à l'autre (réglage de
   Nathan). En dessous de 1024 px, les cartes ne sont plus côte à côte :
   ces réservations d'espace créaient de grands vides. On les neutralise. */
@media (max-width: 1023.98px) {
	#services .pricing-card [class*="min-h-"] { min-height: 0 !important; }
	#services .pricing-card [aria-hidden="true"].invisible { display: none !important; }
	#services .pricing-card > .relative > div { margin-bottom: .5rem; }
	#services .pricing-card ul { margin-bottom: 1.25rem; }
	#services .pricing-card ul.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem; }
	#services .pricing-card { padding: 1.5rem; }
}

/* ---------- Tuiles : même animation au survol partout ---------- */
.hover-tile { transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease, border-color .3s ease, background-color .3s ease; }
.hover-tile:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: var(--t-elevation);
	border-color: rgb(var(--t-accent-400) / .3);
}
.hover-tile i { transition: transform .3s ease; }
.hover-tile:hover i { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) {
	.hover-tile, .interactive-hover { transition: none; }
	.hover-tile:hover, .interactive-hover:hover { transform: none; }
}

/* ---------- Étape en cours d'un parcours ---------- */
.funnel-step.is-current {
	border-color: rgb(var(--t-accent-400) / .55) !important;
	background: linear-gradient(135deg, rgb(var(--t-accent-400) / .10), transparent 70%);
	box-shadow: 0 0 0 1px rgb(var(--t-accent-400) / .15), 0 12px 30px rgb(var(--t-accent-400) / .10);
}
.funnel-step.is-current .funnel-step__num { background: rgb(var(--t-accent-400)); color: rgb(var(--t-dark-950)); }
.funnel-step__here {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
	color: rgb(var(--t-accent-400)); background: rgb(var(--t-accent-400) / .12);
	border-radius: 9999px; padding: 2px 8px; margin-bottom: 4px;
}
.funnel-step__free {
	display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
	font-size: 10px; font-weight: 700; color: rgb(var(--t-emerald-400));
}

/* ---------- Bordure animée « point d'équilibre » ----------
   Remplace l'ancien carré de 2 500 px en rotation (tracé irrégulier dans
   les angles, bord qui « saute ») par un dégradé conique animé via une
   propriété CSS enregistrée : vitesse constante, épaisseur régulière. */
@property --eq-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.eq-frame {
	position: relative; border-radius: 1.25rem; padding: 1.5px;
	background: conic-gradient(from var(--eq-angle),
		rgb(var(--t-emerald-400) / .18) 0deg,
		rgb(var(--t-emerald-400) / .18) 220deg,
		rgb(var(--t-emerald-400) / .9) 300deg,
		rgb(var(--t-accent-400)) 330deg,
		rgb(var(--t-emerald-400) / .18) 360deg);
	box-shadow: 0 0 28px rgb(var(--t-emerald-400) / .12);
	animation: eq-spin 6s linear infinite;
}
.eq-frame > .eq-frame__inner { border-radius: calc(1.25rem - 1.5px); }
@keyframes eq-spin { to { --eq-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .eq-frame { animation: none; } }

/* ---------- Aperçu des réalisations (partagé accueil / club) ---------- */
.project-frame-container.mobile-active .iframe-overlay { opacity: 0 !important; pointer-events: none; }
.project-frame-container.mobile-active .project-iframe iframe { pointer-events: auto !important; }
.project-frame-container.mobile-active .project-iframe { filter: grayscale(0) !important; }
.project-frame-container.mobile-active .hint-overlay { display: none !important; }
.skeleton { background: rgb(var(--t-slate-500) / 0.10); animation: pulse-skeleton 1.5s infinite ease-in-out; }
@keyframes pulse-skeleton { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } }

/* ---------- Total estimé : deux montants, deux couleurs ---------- */
.total-split { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.total-split__plus { font-size: 20px; line-height: 1; font-weight: 700; color: rgb(var(--t-blue-400)); letter-spacing: -.01em; }
.total-legend { display: flex; flex-direction: column; gap: 4px; font-size: 11px; line-height: 1.35; color: rgb(var(--t-slate-400)); }
.total-legend__row { display: flex; align-items: flex-start; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.total-legend__dot { width: 8px; height: 8px; border-radius: 9999px; margin-top: 4px; flex-shrink: 0; }

/* Éléments réservés à l’administrateur (facture rapide, impression des flyers) */
.admin-only.hidden { display: none !important; }