/* Composants partagés par tout l'espace client (connexion, popup, futur
   tableau de bord). Une seule fois ici plutôt que dupliqué dans le CSS
   personnalisé de chaque page/popup Elementor. */

.password-wrap {
	position: relative;
}
.eye-btn {
	position: absolute;
	top: 20px;
	right: 14px;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	color: #9CA3AF;
}
.eye-btn i {
	font-size: 22px;
}
.eye-btn:hover,
.eye-btn:focus {
	background: none;
	color: #9CA3AF;
}

/* --- Tooltip au survol (icônes "?" des cards de stats) ---
   Dans Elementor, sur le widget de l'icône :
   - Avancé > CSS Classes : sel-tooltip-icon
   - Avancé > Attributs (format clé|valeur) : data-tooltip|Ton texte ici
   Ajoute aussi la classe sel-tooltip-icon--end si l'icône est collée au
   bord droit de sa card (comme sur la maquette) pour éviter que le
   tooltip ne déborde à droite. */
.sel-tooltip-icon {
	position: relative;
	display: inline-flex;
	cursor: help;
}
.sel-tooltip-icon::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background: #1F2937;
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 400;
	font-family: "Poppins", sans-serif;
	padding: 8px 12px;
	border-radius: 6px;
	white-space: normal;
	width: max-content;
	max-width: 220px;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	z-index: 50;
}
.sel-tooltip-icon::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #1F2937;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	z-index: 50;
}
.sel-tooltip-icon:hover::after,
.sel-tooltip-icon:hover::before,
.sel-tooltip-icon:focus::after,
.sel-tooltip-icon:focus::before {
	opacity: 1;
	visibility: visible;
}
.sel-tooltip-icon--end::after {
	left: auto;
	right: 0;
	transform: none;
}
.sel-tooltip-icon--end::before {
	left: auto;
	right: 10px;
	transform: none;
}

/* --- Liste "Pages" (tableau de bord) ---
   Style par défaut sobre : à ajuster librement via le CSS personnalisé
   du widget HTML dans Elementor si besoin d'autre chose. */
.sel-pages-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #F3F4F6;
	font-size: 14px;
	font-family: "Poppins", sans-serif;
}
.sel-pages-row:last-child {
	border-bottom: none;
}
.sel-pages-name {
	color: #1F2937;
	font-weight: 500;
}
.sel-pages-views {
	color: #1F2937;
	font-weight: 600;
}
.sel-pages-percent {
	color: #9CA3AF;
	font-weight: 400;
	font-size: 13px;
}
.sel-pages-header {
	display: flex;
	justify-content: space-between;
	padding-bottom: 8px;
	margin-bottom: 4px;
	border-bottom: 2px solid #E5E7EB;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #9CA3AF;
	font-family: "Poppins", sans-serif;
}

/* --- Bouton "Afficher plus / Afficher moins" (listes Pages et Zones
   géographiques) --- */
.sel-voir-plus-btn {
	display: block;
	margin: 14px auto 0;
	padding: 8px 18px;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	background: #ffffff;
	color: #374151;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	font-family: "Poppins", sans-serif;
}
.sel-voir-plus-btn:hover {
	background: #F3F4F6;
	border-color: #D1D5DB;
}
.sel-lignes-extra {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.35s ease, opacity 0.3s ease;
}
.sel-lignes-extra.is-open {
	max-height: 1000px; /* large marge, jamais atteinte en pratique avec 6 lignes */
	opacity: 1;
}

/* --- "X option(s) sélectionnée(s)" (bloc panier Formules et options) --- */
.sel-options-nb-count {
	font-weight: 700;
	color: #007AFA;
}
.sel-options-nb-label {
	font-weight: 400;
	color: #687FAD;
}

/* --- Montant / suffixe du bloc TOTAL (mensualité actuelle, à venir,
   options ponctuelles) --- */
.sel-total-montant {
	font-weight: 600;
	font-size: 18px;
	color:#363636;
}
.sel-total-suffixe {
	font-weight: 500;
	font-size: 12px;
	margin-left: 4px;
}
.sel-total-bleu {
	color: #007AFA;
}
.sel-total-leger {
	font-weight: 400;
}

/* --- Légende des graphiques donut "Source de trafic" / "Appareils" --- */
.sel-donut-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: center;
	margin-top: 16px;
	font-family: "Poppins", sans-serif;
}
.sel-donut-legende-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #374151;
}
.sel-donut-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}

/* --- Tooltip HTML des graphiques donut (créé dynamiquement par app.js,
   positionné juste en dehors de l'anneau au survol d'une tranche) --- */
.sel-donut-tooltip {
	position: absolute;
	transform: translate(-50%, -50%);
	background: #1F2937;
	color: #ffffff;
	font-size: 12px;
	font-weight: 500;
	font-family: "Poppins", sans-serif;
	padding: 6px 10px;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.1s ease;
	z-index: 100;
}

/* --- Liste "Zones géographiques" (tableau de bord) --- */
.sel-geo-header,
.sel-geo-row {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: center;
	gap: 12px;
	font-family: "Poppins", sans-serif;
}
.sel-geo-header {
	padding-bottom: 8px;
	margin-bottom: 4px;
	border-bottom: 2px solid #E5E7EB;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #9CA3AF;
}
.sel-geo-row {
	padding: 10px 0;
	border-bottom: 1px solid #F3F4F6;
	font-size: 14px;
}
.sel-geo-row:last-child {
	border-bottom: none;
}
.sel-geo-pays {
	color: #1F2937;
	font-weight: 500;
}
.sel-geo-ville {
	color: #1F2937;
}
.sel-geo-visiteurs {
	text-align: right;
	font-weight: 600;
	color: #1F2937;
}
.sel-geo-percent {
	color: #9CA3AF;
	font-weight: 400;
	font-size: 13px;
}

/* --- Grisage pendant le rechargement (changement de période) ---
   Appliqué/retiré en JS sur les cards concernées, pour que le client voie
   que sa sélection a bien été prise en compte pendant l'appel réseau. */
.sel-stats-refreshing {
	opacity: 0.35;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

/* --- Overlay plein écran pendant un changement de période ---
   Créé/retiré dynamiquement par app.js (afficherOverlay/masquerOverlay). */
.sel-periode-overlay {
	position: fixed;
	inset: 0;
	background: rgba(17, 24, 39, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	animation: sel-perf-fade-in 0.15s ease;
}
.sel-periode-bars {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	height: 64px;
}
.sel-periode-bars span {
	display: block;
	width: 13px;
	height: 100%;
	background: #ffffff;
	border-radius: 5px;
	transform-origin: bottom;
	animation: sel-periode-bounce 0.9s ease-in-out infinite;
}
.sel-periode-bars span:nth-child(1) { animation-delay: 0s; }
.sel-periode-bars span:nth-child(2) { animation-delay: 0.15s; }
.sel-periode-bars span:nth-child(3) { animation-delay: 0.3s; }
@keyframes sel-periode-bounce {
	0%, 100% { transform: scaleY( 0.3 ); }
	50%      { transform: scaleY( 1 ); }
}

/* --- Panneau "Personnalisé" : calendrier double-mois relié +
   Appliquer/Annuler (mode range Flatpickr, showMonths: 2). Flottant
   au-dessus du contenu (ne pousse rien), ancré sous le select via le
   wrapper #sel-periode-wrap en position:relative. Largeur fixe : sans
   ça le calendrier se retrouve écrasé dans la colonne Elementor. --- */
#sel-periode-wrap {
	position: relative;
	display: inline-block;
}
.sel-periode-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(17, 24, 39, 0.35);
	z-index: 99998;
}
.sel-periode-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 99999;
	width: 580px;
	max-width: calc(100vw - 32px);
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	padding: 16px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	font-family: "Poppins", sans-serif;
}
.sel-periode-panel.is-visible {
	opacity: 1;
	pointer-events: auto;
}
.sel-periode-panel-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.sel-periode-panel-input {
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 14px;
	color: #1F2937;
	min-width: 150px;
	font-family: "Poppins", sans-serif;
}
.sel-periode-panel-sep {
	color: #9CA3AF;
}
.sel-periode-btn {
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
	font-family: "Poppins", sans-serif;
}
.sel-periode-btn--primary {
	background: #007AFA;
	color: #ffffff;
}
.sel-periode-btn--primary:hover {
	background: #006de1;
}
.sel-periode-btn--primary:disabled {
	background: #b2d7fd;
	cursor: not-allowed;
}
.sel-periode-btn--secondary {
	background: #ffffff;
	color: #007AFA;
	border-color: #007AFA;
}
.sel-periode-btn--secondary:hover {
	background: #cce4fe;
}

/* --- Bouton déclencheur unique (remplace le select natif) --- */
.sel-periode-trigger {
	display: inline-flex;
	align-items: center;
	padding: 7px 7px;
	border: 2px solid #EFEFEF;
	border-radius: 10px;
	background: #ffffff;
	font-size: 14px;
	font-weight: 500;
	color: #2B2B2B;
	cursor: pointer;
	transition: all .4s ease-in-out;
	font-family: "Poppins", sans-serif;
}
.sel-periode-trigger:hover {
	border-color: #007AFA;
	background-color: #007AFA;
}
.sel-periode-trigger svg {
	width: 15px;
	height: 14px;
	margin-right: 8px;
	fill: #6B7280;
	flex-shrink: 0;
	transition: all .4s ease-in-out;
}
.sel-periode-trigger:hover svg {
	fill: #ffffff;
}

.sel-periode-trigger::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 10px;
	border-right: 2px solid #6B7280;
	border-bottom: 2px solid #6B7280;
	transform: rotate(45deg) translateY(-2px);
	transition: all .4s ease-in-out;
}

.sel-periode-trigger:hover.sel-periode-trigger::after {
	border-right: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
}

/* --- Grille de presets sous le calendrier, dans le même panneau --- */
.sel-periode-presets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
}
.sel-periode-preset-btn {
	font-family: "Poppins", Sans-serif;
	padding: 10px 8px;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	background: #ffffff;
	color: #374151;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	text-align: center;
	transition: all .4s ease-in-out;
}
.sel-periode-preset-btn:hover {
	background: #007AFA;
	border-color: #007AFA;
	color:#ffffff;
}

/* --- Chevron réutilisable sur tous les <select> natifs (période, granularité,
   métriques du graphique) — indique qu'il y a une liste de choix --- */
.sel-chevron-select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234B5563' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 10px 6px !important;
	padding-right: 32px !important;
	cursor: pointer;
	flex-shrink: 0 !important; /* ne doit jamais être compressé par son conteneur flex */
}
/* Le "color" posé en JS sur le <select> (pour teinter le texte fermé) ne
   doit pas se transmettre par héritage aux <option> de la liste ouverte. */
.sel-chevron-select option {
	color: #1F2937 !important;
}

/* --- En-tête du graphique "Vue d'ensemble" : sélecteurs de métrique + granularité --- */
.sel-chart-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.sel-chart-metric-select {
	padding: 6px 30px 6px 12px;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	background-color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	font-family: "Poppins", sans-serif;
}
#sel-chart-granularite {
	margin-left: auto;
	padding: 6px 30px 6px 10px;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	font-size: 13px;
	color: #1F2937;
	background-color: #ffffff;
	font-family: "Poppins", sans-serif;
}

/* --- Un seul bleu pour toute la plage sélectionnée dans le calendrier
   (au lieu du bleu + gris par défaut de Flatpickr) --- */
/* --- Flèches précédent/suivant : par défaut, Flatpickr les fait
   complètement disparaître quand elles sont désactivées (ex. les deux
   à la fois si toute la période valide tient dans un seul mois, comme
   sur un site tout juste mis en ligne). Une flèche invisible donne
   l'impression d'un bug plutôt que d'une limite normale — on la garde
   donc visible, juste grisée et non cliquable. --- */
.sel-periode-panel .flatpickr-prev-month.flatpickr-disabled,
.sel-periode-panel .flatpickr-next-month.flatpickr-disabled {
	display: inline-flex !important;
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

.sel-periode-panel .flatpickr-day.selected,
.sel-periode-panel .flatpickr-day.startRange,
.sel-periode-panel .flatpickr-day.endRange {
	background: #007AFA;
	border-color: #007AFA;
	color: #ffffff;
}
.sel-periode-panel .flatpickr-day.inRange {
	background: #E0E7FF;
	border-color: #E0E7FF;
	box-shadow: -5px 0 0 #E0E7FF, 5px 0 0 #E0E7FF;
	color: #312E81;
}
.sel-periode-panel .flatpickr-day.selected.startRange + .endRange,
.sel-periode-panel .flatpickr-day.startRange.endRange {
	border-radius: 50px;
}

/* --- Compacte la grille Flatpickr pour tenir dans les 580px du panneau ---
   Flatpickr fixe des largeurs internes qui dépassent ce budget par défaut
   pour 2 mois côte à côte ; on force des cases plus petites. */
.sel-periode-panel .flatpickr-calendar,
.sel-periode-panel .flatpickr-innerContainer,
.sel-periode-panel .flatpickr-rContainer,
.sel-periode-panel .flatpickr-days,
.sel-periode-panel .dayContainer {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}
.sel-periode-panel span.flatpickr-day,
.sel-periode-panel span.flatpickr-weekday {
	flex: 0 0 32px !important;
	max-width: 32px !important;
}
.sel-periode-panel .flatpickr-day {
	height: 32px !important;
	line-height: 32px !important;
	font-size: 12px !important;
	margin: 0 !important;
}
.sel-periode-panel .flatpickr-weekday {
	font-size: 10px !important;
}
.sel-periode-panel .flatpickr-current-month {
	font-size: 13px !important;
	padding: 0 !important;
}
.sel-periode-panel .flatpickr-month {
	height: 32px !important;
}

/* --- Anneaux de score "Performances de votre site" (PageSpeed) ---
   --pct et --ring-color sont mis à jour en JS selon le score reçu
   (voir appliquerAnneau() dans app.js). Valeurs par défaut ci-dessous
   avant le premier chargement des données. */
.sel-perf-ring {
	--pct: 0;
	--ring-color: #E5E7EB;
	position: relative;
	width: 90px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	align-self: center;
	opacity: 0;
	transition: opacity 0.4s ease;
}
.sel-perf-ring.is-visible {
	opacity: 1;
}
.sel-perf-ring--lg {
	width: 140px;
	height: 140px;
}
.sel-perf-ring-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg); /* départ à midi plutôt qu'à 3h */
}
.sel-perf-ring-backdrop {
	fill: var(--ring-color);
	fill-opacity: 0.15;
}
.sel-perf-ring-track {
	fill: none;
	stroke: var(--ring-color);
	stroke-opacity: 0.15;
	stroke-width: 8;
}
.sel-perf-ring-fill {
	fill: none;
	stroke: var(--ring-color);
	stroke-width: 8;
	stroke-linecap: round; /* bouts arrondis, début et fin */
	stroke-dasharray: 282.7; /* circonférence pour r=45 (2 × π × 45) */
	stroke-dashoffset: calc(282.7 - (282.7 * var(--pct) / 100));
}
.sel-perf-ring-value {
	position: relative;
	z-index: 1;
	font-size: 22px;
	font-weight: 700;
	font-family: "Poppins", sans-serif;
	color: var(--ring-color); /* même couleur que l'anneau */
}
.sel-perf-ring--lg .sel-perf-ring-value {
	font-size: 34px;
}
.sel-perf-ring-suffix {
	font-size: 0.5em; /* relatif au chiffre principal, reste proportionné */
	font-weight: 700;
	opacity: 0.7;
}
.sel-perf-ring--lg .sel-perf-ring-track,
.sel-perf-ring--lg .sel-perf-ring-fill {
	stroke-width: 10; /* contour un peu plus épais, uniquement pour la note globale */
}

/* --- Badges "Excellent / À améliorer / Problèmes trouvés" ---
   Masqués par défaut (display:none inline dans le HTML), affichés par
   le JS une fois le score reçu — voir appliquerBadge() dans app.js. */
.sel-perf-badge {
	display: none;
	width: fit-content;
	margin: 8px auto 0;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	font-family: "Poppins", sans-serif;
	white-space: nowrap;
}
.sel-perf-badge--good {
	background: #DCFCE7;
	color: #16A34A;
}
.sel-perf-badge--average {
	background: #FEF3C7;
	color: #D97706;
}
.sel-perf-badge--poor {
	background: #FEE2E2;
	color: #DC2626;
}
#sel-perf-badge-global {
	background: none;
	padding: 0;
	margin: 12px auto 0;
	font-size: 21px;
	font-weight: 700;
	align-self: center;
	text-align: center;
}

button#sel-stats-geo-plus{
	width:100%;
	color:#5e5e5e;
	font-weight:500;
}

/* --- Traits de séparation entre les 4 scores (Performances / Accessibilité /
   Bonnes pratiques / Structure SEO) ---
   Ajoute l'ID "perf-scores-grid" au conteneur qui les regroupe (Avancé >
   CSS ID dans Elementor) pour que ce sélecteur s'applique. */
#perf-scores-grid > div {
	border-right: 1px solid #E5E7EB;
}
#perf-scores-grid > div:last-child {
	border-right: none;
}

/* --- Fond de la card "Score global" ---
   Dégradé bas → haut, du même vert/orange/rouge que la note (à 15%,
   via color-mix) vers du blanc pur. --ring-color est posé en JS sur cet
   élément précis (voir afficherResultat() dans app.js). */
#fond-moyenne {
	background: linear-gradient( to top, color-mix( in srgb, var(--ring-color, #E5E7EB) 15%, white ) 0%, #ffffff 100% );
	transition: background 0.4s ease;
}

/* --- Modal "Analyse en cours" (créée dynamiquement par app.js) --- */
.sel-perf-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(17, 24, 39, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	animation: sel-perf-fade-in 0.2s ease;
}
.sel-perf-modal {
	background: #fff;
	border-radius: 16px;
	padding: 40px 32px;
	max-width: 360px;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	font-family: "Poppins", sans-serif;
}
.sel-perf-modal h3 {
	margin: 20px 0 8px;
	font-size: 18px;
	color: #1F2937;
}
.sel-perf-modal p {
	margin: 0;
	font-size: 14px;
	color: #6B7280;
	line-height: 1.5;
}
.sel-perf-modal-spinner {
	width: 56px;
	height: 56px;
	margin: 0 auto;
	border-radius: 50%;
	border: 5px solid #E5E7EB;
	border-top-color: #3B82F6;
	animation: sel-perf-spin 0.9s linear infinite;
}
@keyframes sel-perf-spin {
	to { transform: rotate(360deg); }
}
@keyframes sel-perf-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* --- Carte "Demandes de contact" : la variation reste toujours blanche,
   jamais colorée en vert/rouge/gris (fond bleu de la card). Ajoute l'ID
   "sel-carte-contacts" sur le conteneur Elementor de cette card précise. */
#sel-carte-contacts [id$="-variation"] {
	color: #ffffff !important;
}

/* --- Description tronquée à 2 lignes sur les cards d'options ---
   "..." ajouté automatiquement par le navigateur si le texte dépasse. */
.sel-option-description {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- "TTC" / "TTC / mois" en retour à la ligne sous le prix --- */
.sel-option-prix-suffixe {
	display: inline-block;
	color: #2B2B2B;
	font-size: 14px;
	font-weight: 500;
	margin-left: 5px;
}

/* --- Card de formule active (page unique / multipages) ---
   Ajoutée en JS quand priceId === formule_actuelle_price_id.
   background en gradient (2× la même couleur) plutôt qu'une couleur
   simple : le réglage "Fond" natif d'Elementor sur le widget applique
   déjà un gradient avec plus de poids qu'une couleur plate ne suffirait
   pas à écraser. */
.sel-formule-actuelle {
	background: linear-gradient( 135deg, #FFFFFF 0%, #FFFFFF 100% ) !important;
	border: 2px solid #EFEFEF !important;
	box-shadow: none !important;
}
/* Tous les textes de la card active passent en gris, pour renforcer
   l'idée "déjà en cours" et faire ressortir l'autre formule par contraste. */
.sel-formule-actuelle,
.sel-formule-actuelle p,
.sel-formule-actuelle li,
.sel-formule-actuelle .sel-formule-nom,
.sel-formule-actuelle .sel-formule-prix,
.sel-formule-actuelle .sel-option-prix-suffixe,
.sel-formule-actuelle .elementor-button-text {
	color: #B1B1B1 !important;
}
.sel-formule-btn--desactive {
	cursor: not-allowed;
	pointer-events: none;
}
.sel-formule-btn--desactive .elementor-button {
	background-color: #EFEFEF !important;
	background-image: none !important; /* le dégradé du bouton de base recouvrait visuellement le background-color ci-dessus */
	border: 1px solid #BEBEBE !important; /* border-color seul ne suffit pas sans border-style/width définis ailleurs */
}

/* --- Loader plein popup pendant le changement de formule ---
   Recouvre tout .dialog-widget-content (en-tête, croix, texte compris),
   créé/retiré dynamiquement par app.js. Fond blanc + spinner pendant le
   chargement ; devient plein vert (succès) ou plein rouge (erreur) via
   les classes --succes/--erreur, avec un anneau et une icône blancs. --- */
.sel-formule-loader-overlay {
	position: absolute;
	inset: 0;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	border-radius: 12px;
	z-index: 10;
	transition: background-color 0.3s ease;
}
.sel-formule-loader-overlay--succes {
	background: #22C55E !important;
}
.sel-formule-loader-overlay--erreur {
	background: #EF4444 !important;
}
.sel-formule-loader-spinner {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 8px solid #E5E7EB;
	border-top-color: #007AFA;
	animation: sel-formule-spin 0.8s linear infinite;
}
@keyframes sel-formule-spin {
	to { transform: rotate(360deg); }
}

/* --- Loader sur #onglets-options pendant le peuplement des cards ---
   Masque le vrai contenu (déjà présent mais pas encore rempli, éviterait
   sinon un flash de "—" avant que les vraies données n'arrivent) et
   affiche un rond gris par-dessus, retiré une fois le chargement fini. */
.sel-onglets-chargement > *:not(.sel-onglets-loader) {
	visibility: hidden;
}
.sel-onglets-loader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 420px; /* cadre raisonnable plutôt que toute la hauteur du bloc (qui peut être très grande une fois les cards chargées) */
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	z-index: 5;
}
.sel-onglets-loader-spinner {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 8px solid #E5E7EB;
	border-top-color: #9CA3AF;
	animation: sel-formule-spin 0.8s linear infinite;
}
.sel-formule-loader-icone {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 4px solid #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	animation: sel-formule-pop 0.3s ease;
}
.sel-formule-loader-icone svg {
	width: 48px;
	height: 48px;
}
.sel-formule-loader-message {
	color: #ffffff;
	font-weight: 600;
	font-size: 20px;
	text-align: center;
	max-width: 80%;
}
@keyframes sel-formule-pop {
	from { transform: scale(0.5); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}

/* --- Masque la barre de défilement des popups Elementor ---
   Visible par défaut sur Windows (barre "classique", toujours affichée),
   invisible par défaut sur Mac (barre fine, seulement au survol) — pas un
   bug, juste une différence de rendu du système. Le scroll reste
   fonctionnel, seule la barre elle-même disparaît. */
.dialog-message {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* Edge legacy / IE */
}
.dialog-message::-webkit-scrollbar {
	display: none; /* Chrome, Edge moderne, Safari */
}

/* =========================================================
   "Demandes, messages & dépôts"
========================================================= */

/* --- Champ "Sujet" et textarea "Description" --- */
#sel-demande-sujet,
#sel-demande-description {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	border: 1px solid #E5E7EB;
	border-radius: 10px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	color: #1F2937;
	background: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#sel-demande-description {
	min-height: 120px;
	resize: vertical;
	line-height: 1.5;
	padding: 10px 10px 20px 10px;
}
#sel-demande-sujet::placeholder,
#sel-demande-description::placeholder {
	color: #9CA3AF;
}
#sel-demande-sujet:focus,
#sel-demande-description:focus {
	outline: none;
	border-color: #007AFA;
	box-shadow: 0 0 0 3px rgba(0, 122, 250, 0.12);
}
#sel-demande-sujet.sel-demande-champ--erreur,
#sel-demande-description.sel-demande-champ--erreur {
	border-color: #DC2626 !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
#sel-demande-compteur {
	font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #797979;
    width: 110px;
    position: absolute;
    right: 14px;
    top: -23px;
	text-align: right;
}

/* --- Loader plein cadre au clic sur "Envoyer" (façon WeTransfer/Smash) ---
   Remplace tout le contenu de #sel-demande-formulaire pendant l'envoi :
   cercle de progression bleu qui se remplit en temps réel, devient vert
   avec une coche au succès, ou rouge avec une croix + bouton de retour
   en cas d'échec. Les enfants originaux du conteneur sont juste masqués
   (display:none), pas détruits, pour être restaurés à l'identique. --- */
.sel-demande-loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 48px 24px;
	text-align: center;
}
.sel-demande-loader-cercle {
	position: relative;
	width: 120px;
	height: 120px;
}
.sel-demande-loader-cercle > svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}
.sel-demande-loader-track {
	fill: none;
	stroke: #E5E7EB;
	stroke-width: 8;
}
.sel-demande-loader-fill {
	fill: none;
	stroke: #007AFA;
	stroke-width: 8;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.2s ease, stroke 0.3s ease;
}
.sel-demande-loader-contenu {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sel-demande-loader-pourcentage {
	font-family: "Poppins", sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #1F2937;
}
.sel-demande-loader-icone {
	width: 105px;
	height: 105px;
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: sel-formule-pop 0.3s ease;
}
.sel-demande-loader--succes .sel-demande-loader-icone {
	background: #16A34A;
}
.sel-demande-loader--erreur .sel-demande-loader-icone {
	background: #DC2626;
}
.sel-demande-loader-icone svg {
	width: 52px;
	height: 52px;
}
.sel-demande-loader-titre {
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: #007afa;
	margin: 0;
}
.sel-demande-loader--succes .sel-demande-loader-fill {
	stroke: #16A34A;
}
.sel-demande-loader--succes .sel-demande-loader-titre {
	color: #16A34A;
}
.sel-demande-loader--erreur .sel-demande-loader-fill {
	stroke: #DC2626;
}
.sel-demande-loader--erreur .sel-demande-loader-titre {
	color: #DC2626;
}
/* --- État "Finalisation en cours…" : tout le fichier est déjà arrivé sur
   le site du client, qui le traite encore (pas d'octets restants à
   transférer, donc plus de pourcentage réel à afficher) — pulsation douce
   plutôt qu'un "99 %" figé qui donnerait l'impression d'un bug. --- */
.sel-demande-loader--finalisation .sel-demande-loader-fill,
.sel-demande-loader--finalisation .sel-demande-loader-titre {
	animation: sel-demande-pulse 1.1s ease-in-out infinite;
}
@keyframes sel-demande-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}
.sel-demande-loader-avertissement {
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	color: #8f949c;
	margin: 0;
}
.sel-demande-loader--erreur .sel-demande-loader-avertissement {
	color: #DC2626;
	max-width: 320px;
}
.sel-demande-loader-retour {
	margin-top: 4px;
	padding: 10px 20px;
	border-radius: 10px;
	border: 1px solid #E5E7EB;
	background: #ffffff;
	color: #374151;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}
.sel-demande-loader-retour:hover {
	background: #F3F4F6;
}

/* --- Bandeau d'avertissement au-dessus du bouton d'envoi --- */
.sel-demande-avertissement {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	margin-bottom: 12px;
	border-radius: 10px;
	background: #FEF3C7;
	color: #92400E;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	line-height: 1.4;
}

/* --- Bouton d'envoi pendant le transfert réel des fichiers : opacité +
   pointer-events plutôt que de dépendre de :disabled, qui n'a aucun effet
   visuel/fonctionnel sur un <a> (le rendu natif du widget Bouton Elementor
   peut être une ancre plutôt qu'un vrai <button>). --- */
.sel-demande-envoyer--chargement {
	opacity: 0.65;
	pointer-events: none;
	cursor: not-allowed;
}

/* --- Zone de dépôt de fichiers --- */
.sel-demande-zone-depot {
	cursor: pointer;
	box-sizing: border-box;
	min-height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	border: 2px dashed #D1D5DB;
	border-radius: 12px;
	background: #FAFAFA;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.sel-demande-zone-depot:hover {
	background: #F3F4F6;
	border-color: #9CA3AF;
}
.sel-demande-zone-depot--survol {
	background: #EFF6FF;
	border-color: #2563EB !important;
}
/* Si le widget HTML est laissé vide dans Elementor (pas d'icône/texte
   ajoutés à la main), on affiche un contenu par défaut — dès que du
   contenu réel est présent dans le <div>, cette règle ne s'applique plus. */
.sel-demande-zone-depot:empty::before {
	content: "Cliquez ou déposez vos fichiers ici (25 Mo max par fichier)";
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	color: #9CA3AF;
}
/* --- Liste des fichiers en grille 2 colonnes : gagne de la place quand
   il y en a beaucoup, plutôt qu'une longue colonne unique. --- */
#sel-demande-fichiers-liste {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
@media (max-width: 480px) {
	#sel-demande-fichiers-liste {
		grid-template-columns: 1fr; /* une seule colonne sur mobile étroit */
	}
}
.sel-demande-fichier-chip {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #F4F4F4;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
}
.sel-demande-fichier-ligne {
	display: flex;
	align-items: center;
	gap: 8px;
}
.sel-demande-fichier-nom {
	font-weight: 600;
	color: #1F2937;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 220px;
}
.sel-demande-fichier-statut {
	color: #6B7280;
	font-size: 12px;
	white-space: nowrap;
}
.sel-demande-fichier-chip--ok .sel-demande-fichier-statut {
	color: #16A34A;
	font-weight: 600;
}
.sel-demande-fichier-chip--erreur .sel-demande-fichier-statut {
	color: #DC2626;
	font-weight: 600;
	white-space: normal;
}
.sel-demande-fichier-retirer {
	margin-left: auto;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: #9CA3AF;
	flex-shrink: 0;
}

/* --- Tableau des demandes (lignes + accordéon) --- */
.sel-demandes-vide {
	color: #777777;
	padding: 24px 0;
	text-align: center;
}
.sel-demande-aucun-resultat {
	color: #777777;
	padding: 24px 0;
	text-align: center;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
}

/* --- Barre "Rechercher une demande…" + "Filtrer", au-dessus du tableau,
   alignée à droite. Même langage visuel que .sel-periode-trigger déjà
   utilisé ailleurs dans l'espace client. --- */
.sel-demande-filtres-barre {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.sel-demande-recherche-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}
#sel-demande-recherche {
	box-sizing: border-box;
	padding: 9px 35px 9px 10px;
	border: 1px solid #dbdbdb;
	border-radius: 10px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	color: #1F2937;
	min-width: 240px;
	transition: border-color 0.15s ease;
}
#sel-demande-recherche:focus {
	outline: none;
	border-color: #007AFA;
}
#sel-demande-recherche::placeholder {
	color: #2F2F2F;
}
.sel-demande-recherche-icone {
	position: absolute;
	right: 14px;
	width: 16px;
	height: 16px;
	color: #9CA3AF;
	pointer-events: none;
}
.sel-demande-filtre-wrap {
	position: relative;
}
.sel-demande-filtre-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid #dbdbdb;
	border-radius: 10px;
	background: #ffffff;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #2B2B2B;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.sel-demande-filtre-btn svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color:#016AFE;
}
.sel-demande-filtre-chevron {
	transition: transform 0.2s ease;
}
.sel-demande-filtre-btn:hover,
.sel-demande-filtre-btn--ouvert,
.sel-demande-filtre-btn--applique {
	border-color: #007AFA;
	color: #007AFA;
}
.sel-demande-filtre-btn:hover {
	background: #007AFA;
	color: #ffffff;
}
.sel-demande-filtre-btn:hover svg {
	color: #ffffff;
}
.sel-demande-filtre-btn--ouvert .sel-demande-filtre-chevron {
	transform: rotate(180deg);
}
.sel-demande-filtre-panel {
	display: none;
	flex-direction: column;
	gap: 4px;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 50;
	min-width: 170px;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
	padding: 8px;
}
.sel-demande-filtre-panel.is-visible {
	display: flex;
}
.sel-demande-filtre-panel label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px;
	border-radius: 6px;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	color: #374151;
	cursor: pointer;
}
.sel-demande-filtre-panel label:hover {
	background: #F3F4F6;
}
.sel-demande-filtre-panel input[type="checkbox"] {
	accent-color: #007AFA;
	cursor: pointer;
}

.sel-demande-row {
	box-shadow: 0 1px 0 0 #EDEDED;
	width: 100%;
}
.sel-demande-row-header {
	display: grid;
	grid-template-columns: 1fr 140px 160px 24px;
	align-items: center;
	gap: 16px;
	padding: 20px 10px;
	cursor: pointer;
	border-left: solid 1px #EDEDED;
    border-right: solid 1px #EDEDED;
	transition: all .3s ease-in-out;
}
.sel-demande-row-header:hover {
	background: #f6f7fc;
}
/* --- Ligne "active" : reste mise en avant tant que son échange est
   déplié en dessous, pour qu'on sache toujours à quelle ligne il se
   rattache — plus marqué qu'un simple survol. --- */
.sel-demande-row--ouverte .sel-demande-row-header,
.sel-demande-row--ouverte .sel-demande-row-header:hover {
	background: #f6f7fc;
}

/* --- En-tête de colonnes : même grille que .sel-demande-row-header pour
   un alignement parfait des libellés au-dessus des valeurs. --- */

.sel-demande-table-header {
	display: grid;
    grid-template-columns: 1fr 140px 160px 24px;
    align-items: center;
    gap: 16px;
    padding: 15px 15px 15px 15px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    letter-spacing: 0px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #5c6078;
    width: 100%;
    background-color: #f6f7fc;
    border-radius: 15px 15px 0px 0px;
	border-bottom: solid 1px #EDEDED;
}
/* --- "Charger plus de demandes" : chevron qui pivote selon l'état
   plié/déplié, même logique visuelle que le chevron d'accordéon des
   lignes juste au-dessus. --- */
#sel-demandes-liste:last-child{
	border-bottom:none!important;
}

.sel-demande-charger-plus {
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #007AFA;
    margin: 10px auto 0px auto;
    border-radius: 10px;
    border-left: none;
    border-right: none;
}
.sel-demande-charger-plus:hover {
	background: #ebf3fb;
}
.sel-demande-charger-plus .sel-demande-chevron {
	color: #007AFA;
}
.sel-demande-charger-plus--ouverte .sel-demande-chevron {
	transform: rotate(180deg);
}
.sel-demande-col-sujet {
	font-weight: 500;
	color: #494949;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: "Poppins", sans-serif;
}
.sel-demande-col-maj {
	font-family: "Poppins", sans-serif;
    color: #636B8A;
    font-size: 14px;
    font-weight: 500;
}
.sel-badge-statut {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.sel-badge-en-cours {
	background: #FEF3E2;
	color: #B45309;
}
.sel-badge-repondu {
	background: #E8F2FF;
	color: #1D4ED8;
}
.sel-badge-termine {
	background: #E7F7EC;
	color: #16A34A;
}
.sel-demande-chevron {
	color: #999999;
	transition: transform 0.2s ease;
	justify-self: end;
}
.sel-demande-row--ouverte .sel-demande-chevron {
	transform: rotate(180deg);
}
.sel-demande-row-detail {
	padding: 10px 10px 10px 10px;
	overflow: hidden;
	margin-bottom: 15px;
	border: solid 1px #ededed;
	border-radius: 0px 0px 15px 15px;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.sel-demande-fil-chargement,
.sel-demande-fil-erreur {
	color: #777777;
	padding: 16px 0;
	text-align: center;
}

/* --- Fil de messages, façon SMS --- */
.sel-demande-fil {
	overflow-y: auto;
	padding: 8px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sel-message {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	width: 80%;
}
.sel-message--admin {
	margin-left: auto;
	flex-direction: row-reverse;
}
.sel-message--client {
	margin-right: auto;
	flex-direction: row;
}
.sel-message-avatar {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: #E0E0E0;
	border-radius:100px!important;
}
.sel-message-avatar--svg {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	color: #999999;
}
.sel-message-avatar--svg svg {
	width: 100%;
	height: 100%;
}
.sel-message-bulle {
	padding: 10px 14px;
	border-radius: 16px;
	font-family: "Poppins", sans-serif;
    font-size: 15px;
	line-height: 1.5;
}
.sel-message--admin .sel-message-bulle {
	background: #F0F0F0;
	border-bottom-right-radius: 4px;
}
.sel-message--client .sel-message-bulle {
	background: #E8F2FF;
	border-bottom-left-radius: 4px;
}
.sel-message-bulle p {
	margin: 0 0 4px;
	white-space: pre-wrap;
}
.sel-message-fichiers {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 4px;
}
.sel-message-fichiers a {
	font-size: 13px;
}
.sel-message-date {
	display: block;
	font-size: 12px;
    color: #6c6c6c;
	text-align: right;
}

/* =========================================================
   Page "Paramètres" — Informations personnelles
========================================================= */
.sel-param-type-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.sel-param-type-legende {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	color: #6B7280;
}
.sel-param-type-options {
	display: inline-flex;
	gap: 8px;
}
.sel-param-type-options input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.sel-param-type-options label {
	display: inline-flex;
	align-items: center;
	padding: 8px 20px;
	border-radius: 999px;
	border: 1.5px solid #E5E7EB;
	background: #ffffff;
	color: #374151;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}
.sel-param-type-options input[type="radio"]:checked + label {
	background: #EFF6FF;
	border-color: #007AFA;
	color: #007AFA;
}
.sel-param-type-options input[type="radio"]:focus-visible + label {
	outline: 2px solid #007AFA;
	outline-offset: 2px;
}

.sel-param-champs-grille {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 20px;
}
@media (max-width: 640px) {
	.sel-param-champs-grille {
		grid-template-columns: 1fr;
	}
	.sel-param-champ--large {
		grid-column: auto;
	}
}
.sel-param-champ {
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
}
.sel-param-champ--large {
	grid-column: 1 / -1;
}
.sel-param-champ label {
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #374151;
}
.sel-param-requis {
	color: #DC2626;
	margin-left: 2px;
}
.sel-param-champ input[type="text"],
.sel-param-champ input[type="tel"],
.sel-param-champ input[type="email"],
.sel-param-champ select {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	border: 1px solid #E5E7EB;
	border-radius: 10px;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight:400;
	color: #4f4f4f;
	background: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sel-param-champ input::placeholder {
	color: #9CA3AF;
}
.sel-param-champ input:focus,
.sel-param-champ select:focus {
	outline: none;
	border-color: #007AFA;
	box-shadow: 0 0 0 3px rgba(0, 122, 250, 0.12);
}
.sel-param-champ input.sel-param-champ--erreur,
.sel-param-champ select.sel-param-champ--erreur {
	border-color: #DC2626 !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.sel-param-champ input:disabled,
.sel-param-champ select:disabled {
	background: #F3F4F6;
	color: #9CA3AF;
	border-color: #E5E7EB;
	cursor: not-allowed;
}
.sel-param-champ select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234B5563' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 10px 6px;
	padding-right: 34px;
	cursor: pointer;
}

.sel-param-champ--checkbox {
	justify-content: flex-end;
	padding-bottom: 11px;
}
.sel-param-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	color: #374151;
	cursor: pointer;
}
.sel-param-checkbox-label input[type="checkbox"] {
	accent-color: #007AFA;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.sel-param-siret-statut {
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	color: #6B7280;
	min-height: 14px;
}
.sel-param-siret-statut--ok {
	color: #16A34A;
}
.sel-param-siret-statut--erreur {
	color: #DC2626;
}

.sel-param-separateur {
	display: flex;
	align-items: center;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid #EDEDED;
}
.sel-param-separateur span {
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #6B7280;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* --- Liste de suggestions d'adresse (créée dynamiquement en JS, même
   principe que le configurateur) — le CSS est prêt en amont. --- */
.sel-param-champ--autocomplete {
	position: relative;
}
.sel-param-autocomplete-liste {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 40;
	margin-top: 4px;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
	max-height: 240px;
	overflow-y: auto;
}
.sel-param-autocomplete-liste.is-open {
	display: block;
}
.sel-param-autocomplete-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	cursor: pointer;
	font-family: "Poppins", sans-serif;
}
.sel-param-autocomplete-item:hover,
.sel-param-autocomplete-item.is-active {
	background: #F3F4F6;
}
.sel-param-autocomplete-main {
	font-size: 13px;
	color: #1F2937;
}
.sel-param-autocomplete-sub {
	font-size: 12px;
	color: #9CA3AF;
}

.sel-param-avertissement {
	margin-top: 18px;
	padding: 10px 14px;
	border-radius: 10px;
	background: #FEF3C7;
	color: #92400E;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	line-height: 1.4;
}

.sel-param-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 10px;
	flex-wrap: wrap;
}
.sel-param-btn-enregistrer {
	padding: 12px 24px;
	border: none;
	border-radius: 10px;
	background: #007AFA;
	color: #ffffff;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}
.sel-param-btn-enregistrer:hover {
	background: #006de1;
}
.sel-param-btn-enregistrer:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.sel-param-info-statut {
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 500;
}
.sel-param-info-statut--ok {
	color: #16A34A;
}
.sel-param-info-statut--erreur {
	color: #DC2626;
}
.sel-demande-reponse {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
.sel-demande-reponse-texte {
	flex: 1;
	min-height: 44px;
	max-height: 120px;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid #C1C1C1;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	resize: vertical;
}
.sel-demande-reponse-envoyer {
	padding: 0 20px;
	border-radius: 10px;
	border: none;
	background: #007AFA;
	color: #ffffff;
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
}
.sel-demande-reponse-envoyer:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* --- Spinner générique par currentColor, pour les boutons dont on ne
   connaît pas la couleur de fond à l'avance (contrairement à
   .btn-spinner, blanc fixe, pensé pour les boutons pleins bleus). Trois
   côtés de la couleur du texte du bouton, un côté transparent qui
   tourne — fonctionne sur n'importe quel bouton, plein ou en contour. */
.btn-spinner-inline {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	vertical-align: middle;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 0.75;
	animation: sel-spin 0.7s linear infinite;
}

/* =========================================================
   Page "Paramètres" — Préférences de communication
========================================================= */
.sel-comm-bloc {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.sel-comm-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.sel-comm-checkbox {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	cursor: pointer;
	margin-top: 2px;
}
.sel-comm-checkbox input[type="checkbox"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}
.sel-comm-checkbox-visuel {
	position: absolute;
	inset: 0;
	border: 1.5px solid #D1D5DB;
	border-radius: 6px;
	background: #ffffff;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.sel-comm-checkbox-visuel::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 7px;
	width: 5px;
	height: 10px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 0.1s ease;
}
.sel-comm-checkbox input[type="checkbox"]:checked + .sel-comm-checkbox-visuel {
	background: #007AFA;
	border-color: #007AFA;
}
.sel-comm-checkbox input[type="checkbox"]:checked + .sel-comm-checkbox-visuel::after {
	opacity: 1;
}
.sel-comm-checkbox input[type="checkbox"]:focus-visible + .sel-comm-checkbox-visuel {
	outline: 2px solid #007AFA;
	outline-offset: 2px;
}
.sel-comm-texte {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.sel-comm-titre {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #1F2937;
}
.sel-comm-description {
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #6B7280;
	line-height: 1.5;
}

/* =========================================================
   Calendrier "Personnalisé" — un seul mois sur téléphone
   (au-dessus de 764px, le mode 2 mois existant reste inchangé)
========================================================= */
@media (max-width: 764px) {
	.sel-periode-panel {
		/* position:fixed pour se détacher du bouton déclencheur (comme
		   avant) et occuper une largeur relative à l'écran entier.
		   Centrage par inset + margin:auto plutôt que par transform :
		   un transform sur cet ancêtre cassait le positionnement natif
		   du menu déroulant du mois (le navigateur calcule mal la
		   position de ces menus natifs à travers un ancêtre transformé
		   — c'est ce qui causait le badge "août" flottant au mauvais
		   endroit). */
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 90%;
		max-width: none;
		height: fit-content;
		max-height: calc(100vh - 32px);
		overflow-y: auto;
	}
	.sel-periode-panel .flatpickr-prev-month,
	.sel-periode-panel .flatpickr-next-month {
		padding: 6px;
	}
}


/* =========================================================
   Anti-zoom automatique iOS/mobile sur les champs de formulaire.
   Les navigateurs mobiles (Safari iOS en tête) zooment automatiquement
   sur tout champ dont la taille de police est < 16px au moment du
   focus, sans jamais dézoomer ensuite — l'utilisateur reste zoomé s'il
   ne sait pas qu'il doit le faire lui-même. En forçant 16px minimum
   sur tous les champs, le zoom ne se déclenche jamais.
   Volontairement large (types HTML génériques, pas une liste de
   classes) pour couvrir tout l'espace client, présent et à venir,
   plutôt que de devoir penser à l'ajouter à chaque nouveau champ.
========================================================= */
@media (max-width: 764px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="number"],
	input[type="date"],
	input[type="search"],
	textarea,
	select {
		font-size: 16px !important;
	}
}

/* =========================================================
   Bloc "Progression de la mise en place" (tableau de bord) — caché par
   défaut pour éviter le flash "apparaît puis disparaît" le temps que
   l'appel réseau confirme si le client a déjà acquitté cette étape.
   C'est le JS (voir app.js) qui le révèle explicitement s'il doit
   réellement s'afficher — jamais l'inverse.
========================================================= */
#sel-progression-block {
	display: none;
}

/* =========================================================
   Verrouillage visuel pendant la "Mise en place" — voir app.js pour la
   logique (mécanisme générique, classe sel-verrouille-si-en-construction
   à poser sur n'importe quel bloc, sur n'importe quelle page).
========================================================= */
.sel-verrouille{
  position:relative;
  filter:grayscale(1) opacity(0.6);
  cursor:not-allowed;
}

.sel-verrouille *{
  pointer-events:none !important;
}

.sel-verrouille-tooltip{
  position:fixed;
  display:none;
  background:#1A1D23;
  color:#fff;
  font-family:'Poppins',sans-serif;
  font-size:13px;
  padding:8px 12px;
  border-radius:8px;
  white-space:nowrap;
  pointer-events:none;
  z-index:9999;
}