/**
 * ==============================================================================
 * Fichier	: assets/themes/ios/css/profile.css
 * @version	: 1.0.5 - 2026-05-16
 * ==============================================================================
 * Objectif :
 *	Styles frontend de la page profil utilisateur ModulR (user-profile.php).
 *
 * Historique des versions :
 *	- v1.0.0 – 2026-03-24 : 🎨 Externalisation du CSS inline depuis templates/frontend/user-profile.php
 *                           avec conservation du rendu existant.
 *	- v1.0.1 – 2026-04-08 : 🌍 Correction du rendu des puces de langues
 *                           + vraie puce ronde non compressée
 *                           + états sélection/focus plus lisibles
 *
 * Suggestions futures :
 *	- ♿ Ajouter une meilleure gestion du focus visible et des états clavier sur les onglets/cartes.
 *	- 📱 Rationaliser les breakpoints mobile pour réduire les surcharges et gagner en lisibilité.
 * ==============================================================================
 */

/* ==========================================================================
 * 🏷️ Corner stack : crédits + team
 * ========================================================================== */
.modulr-corner-stack{
	position:absolute;
	top: 16px;
	right: 16px;
	display:flex;
	flex-direction:column;
	gap: 8px;
	z-index: 2;
}
.modulr-pill{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 10px;
	border-radius: 999px;
	padding: 10px 16px;
	font-weight: 750;
	border: 1px solid rgba(37,99,235,.12);
	box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
	background: #f1f5ff;
	color:#1d4ed8;
	min-width: 195px;
	font-size: 1.02rem;
}
.modulr-pill--clickable{
	appearance: none;
	cursor: pointer;
	text-align: left;
	background: inherit;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.modulr-pill--clickable:hover,
.modulr-pill--clickable:focus{
	/* on neutralise tout hover/focus “noir” global */
	background: #e0e7ff;
	border-color: rgba(37,99,235,.28);
	box-shadow: 0 10px 24px rgba(2, 6, 23, 0.12);
	color:#1d4ed8;
}
.modulr-pill--team.modulr-pill--clickable:hover,
.modulr-pill--team.modulr-pill--clickable:focus{
	background:#d1fae5;
	border-color: rgba(34,197,94,.32);
	color:#0f766e;
}
.modulr-pill--clickable:focus-visible{
	outline: 2px solid rgba(37,99,235,.25);
	outline-offset: 3px;
}
.modulr-pill__label{
	display:inline-flex;
	align-items:center;
	gap: 10px;
	white-space:nowrap;
}
.modulr-pill__icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	line-height: 1;
	transform: translateY(0.5px);
	font-size: 1.1em;
}
.modulr-pill--credits .modulr-credits-count{
	font-size: 1.08em;
	letter-spacing: .01em;
}
.modulr-pill--credits{
	background: #eef2ff;
	border-color: rgba(37,99,235,.14);
}
.modulr-pill--team{
	background:#ecfdf5;
	border-color: rgba(34,197,94,.20);
	color:#0f766e;
	justify-content:flex-start;
}
.modulr-pill__star{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: #fde047; /* jaune */
	color:#92400e;
	box-shadow: 0 2px 6px rgba(0,0,0,.10);
	font-size: 14px;
	line-height: 1;
}

/* Sur mobile : le coin prend toute la largeur, sans chevaucher le header */
@media (max-width: 520px){
	.modulr-corner-stack{
		position: static;
		margin: 8px 0 10px;
		flex-direction: row;            /* côte à côte */
		justify-content: space-between; /* une seule ligne horizontale */
		align-items: center;
		gap: 10px;
 	}
	.modulr-pill{
		flex: 1 1 0;
		min-width: 0;
		justify-content:center;
	}
}

/* ==========================================================================
 * 🧭 Onglets
 * ========================================================================== */
.modulr-profile-tabpanel{ display:none; }
.modulr-profile-tabpanel.is-active{ display:block; }

.modulr-profile-tabs{
	display:flex;
	gap: 18px;
	padding: 6px 8px 0;
	border-top: 1px solid #f1f5f9;
	border-bottom: 1px solid #f1f5f9;
	margin-bottom: 16px;
}
.modulr-tab-btn{
	appearance:none;
	border:0;
	background: transparent;
	padding: 12px 0 12px;
	cursor:pointer;
	font-weight: 700;
	color:#64748b;
	position: relative;
}
.modulr-tab-btn:hover{
	color:#334155;
	background: transparent; /* éviter fond noir thème */
}
.modulr-tab-btn:focus,
.modulr-tab-btn:active{
	background: transparent; /* éviter fond noir thème */
	color:#334155;
}
.modulr-tab-btn:focus-visible{
	outline: 2px solid rgba(37,99,235,.25);
	outline-offset: 3px;
	border-radius: 10px;
}
.modulr-tab-btn.is-active{
	color:#2563eb;
}
.modulr-tab-btn.is-active::after{
	content:'';
	position:absolute;
	left:0; right:0; bottom:-1px;
	height: 2px;
	background:#2563eb;
	border-radius: 2px;
}

/* ==========================================================================
 * 📦 Panels
 * ========================================================================== */
.modulr-panel{
	background:#fbfdff;
	border: 1px solid #eef2f7;
	border-radius: 12px;
	padding: 20px 14px 14px;
	margin: 14px 0;
}
.modulr-panel__title{
	font-size: 1.6rem;
	font-weight: 400;
	display:flex;
	align-items:center;
	gap: 10px;
	margin-top: 0;
}
.modulr-panel__title--options{
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 8px;
}
.modulr-title-icoXXX{
	width: 28px;
	height: 28px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
.modulr-muted{ color:#94a3b8; margin: 0; }
.modulr-help{
	color:#64748b;
	font-weight: 600;
	margin: 0 0 10px;
}

/* ==========================================================================
 * ⚙️ Onglet Options
 * ========================================================================== */
.modulr-report-visual{
	display:flex;
	flex-direction:column;
	gap: 10px;
}
.modulr-report-visual__label{
	margin-top: 8px;
	font-weight: 800;
	color:#0f172a;
}
.modulr-report-visual__choices{
	display:flex;
	gap: 14px;
	flex-wrap:wrap;
}
/* Options Compte-Rendu (checkbox) */
.modulr-report-options{
	margin-top: 6px;
	display:flex;
	flex-direction:column;
	gap: 10px;
}
.modulr-report-options__label{
	font-weight: 800;
	color:#0f172a;
}
.modulr-check-line{
	display:flex;
	align-items:center;
	gap: 10px;
	color:#0f172a;
}
.modulr-visual-choice{
	display:flex;
	flex-direction:column;
	gap: 8px;
	align-items:flex-start;
	cursor:pointer;
	user-select:none;
	position: relative;
}
.modulr-visual-choice input[type="radio"]{
	/* radios invisibles mais accessibles (clavier / lecteur d'écran) */
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.modulr-visual-choice img{
	width:128px;
	height:128px;
	border-radius: 14px;
	border: 2px solid transparent;
	box-shadow: 0 6px 18px rgba(2, 6, 23, 0.10);
	transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease, opacity .18s ease;
}
.modulr-visual-choice input:checked + img{
	border-color:#2563eb;
	box-shadow: 0 0 0 3px rgba(37,99,235,.18), 0 10px 24px rgba(2, 6, 23, 0.12);
}
.modulr-visual-choice:hover img{
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(2, 6, 23, 0.12);
}
.modulr-visual-choice input:focus-visible + img{
	outline: 2px solid rgba(37,99,235,.25);
	outline-offset: 3px;
}

/* ==========================================================================
 * 🎯 Onglet Objectif
 * ========================================================================== */
.modulr-objective-desc.description{
	margin: 0 0 8px;
	color:#64748b;
	font-weight: 600;
	font-size: 0.85rem;
}
.modulr-panel--objective-goal .modulr-panel__title{
	margin-bottom: 10px;
}
.modulr-panel--objective-goal .modulr-objective-select{
	margin-top: 0;
	margin-bottom: 10px;
}

/* Mes objectifs */
.modulr-goal-row{
	display:flex;
	gap: 12px;
	align-items:center;
}
.modulr-goal-row__main{
	width: 100%;
	max-width: 500px;
}
.modulr-goal-row__img img{
	width:64px;height:64px;border-radius:10px;object-fit:cover;
	box-shadow: 0 6px 18px rgba(2, 6, 23, 0.10);
}
.modulr-goal-row__fallback{
	width:64px;height:64px;border-radius:10px;
	display:flex;align-items:center;justify-content:center;
	background:#f1f5f9;font-size: 22px;
}
.modulr-goal-row__top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 10px;
}
.modulr-goal-row__name{
	font-weight: 800;
	color:#0f172a;
}
.modulr-goal-row__pct{
	font-weight: 800;
	color:#2563eb;
}
.modulr-segbar{
	margin-top: 10px;
	display:flex;
	gap: 4px;
	max-width: 520px;
}
.modulr-seg{
	flex: 1 1 0;
	height: 12px;
	border-radius: 3px;
	background:#e5e7eb;
}
.modulr-seg.is-on{ background:#22c55e; }
.modulr-seg.is-on.is-warn{ background:#f59e0b; }

/* Badges row */
.modulr-badges-row{
	display:flex;
	gap: 14px;
	align-items:center;
	flex-wrap:wrap;
}
.modulr-badge img,
.modulr-badge.modulr-badge--all{
	width:64px;height:64px;border-radius:12px;object-fit:cover;
	box-shadow: 0 6px 18px rgba(2, 6, 23, 0.10);
}
.modulr-badge--all{
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none !important;
	background:#f8fafc;
	border: 1px dashed #cbd5e1;
	color:#0f172a !important; /* couleur stable (hover/focus/visited) */
	text-align:center;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.modulr-badge--all:visited,
.modulr-badge--all:hover,
.modulr-badge--all:focus,
.modulr-badge--all:active{
	color:#0f172a !important; /* ne change jamais */
	text-decoration:none !important;
}
.modulr-badge--all:hover,
.modulr-badge--all:focus{
	/* hover = bouton “cliquable” (sans changer la couleur du texte) */
	background:#e2e8f0;
	border-color:#94a3b8;
	box-shadow: 0 10px 24px rgba(2, 6, 23, 0.12);
	transform: translateY(-1px);
}
.modulr-badge--all:focus-visible{
	outline: 2px solid rgba(37,99,235,.25);
	outline-offset: 3px;
}
.modulr-badge--all__txt{
	/* texte centré, non gras, couleur stable */
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width: 100%;
	font-weight: 400;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: inherit !important;
}

/* Mon profil */
.modulr-account-line{
	display:flex;
	gap: 14px;
	align-items:center;
}
.modulr-account-line__avatar .modulr-user-avatar{
	width:96px;height:96px;border-radius:50%;
	box-shadow: 0 6px 18px rgba(2, 6, 23, 0.12);
}
.modulr-account-hello__title{ font-weight: 820; color:#0f172a; font-size: 1.25rem; line-height: 1.2; }
.modulr-account-hello__email{ color:#334155; font-weight: 650; margin-top: 6px; }

.modulr-avatar-card__head{
	display:flex;
	align-items:center;
	gap: 10px;
	margin-bottom: 6px;
}
.modulr-avatar-card__ico{
	width: 26px;
	height: 26px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius: 8px;
	background: transparent;
	border: none;
}
.modulr-avatar-card__title{
	font-weight: 800;
	color:#0f172a;
}
.modulr-avatar-card__desc{
	color:#64748b;
	font-weight: 600;
	font-size: .92rem;
	margin-bottom: 10px;
}

.modulr-form-grid{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 24px;
}
.modulr-form-field label{ display:block; font-weight:800; margin-bottom:6px; color:#0f172a; }
.modulr-form-field select{ width:100%; max-width:none; }
.modulr-form-field input{
	width:100%;
	max-width:none;
}
/* Toast inline : confirmation "Enregistré" (onglet Objectif) */
.save-status{
	display:inline-flex;
	align-items:center;
	gap: 8px;
	font-weight: 800;
	font-size: .92rem;
	line-height: 1;
	padding: 2px 10px;
	border-radius: 999px;
	border: 1px solid rgba(34,197,94,.25);
	background: rgba(236, 253, 245, .9);
	color:#0f766e;
	opacity: 0;
	transform: translateY(1px);
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none;
	white-space: nowrap;
}
.save-status.is-visible{
	opacity: 1;
	transform: translateY(0);
}
.save-status--error{
	border-color: rgba(245,158,11,.30);
	background: rgba(255, 247, 237, .95);
	color:#9a3412;
}
.save-status__check{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background:#22c55e;
	color:#fff;
	font-size: 12px;
	line-height: 1;
	box-shadow: 0 2px 6px rgba(2,6,23,.12);
}
.modulr-form-grid--identity{
	margin-top: 12px;
}
 
/* Notices (POST identité) */
.modulr-notice{
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid #e2e8f0;
	margin: 10px 0 12px;
	font-weight: 700;
}
.modulr-notice--success{ background:#ecfdf5; border-color: rgba(34,197,94,.25); color:#0f766e; }
.modulr-notice--error{ background:#fff7ed; border-color: rgba(245,158,11,.30); color:#9a3412; }


/* Fix global : ne jamais changer la couleur après visite */
.modulr-btn:visited{
	color: inherit;
}
.modulr-btn--primary{
	background: #007cba;
	border: none;
	color: #fff !important;
}
.modulr-btn--primary:hover,
.modulr-btn--primary:focus,
.modulr-btn--primary:visited{
	background: #006799;
	color: #fff !important;
}
.modulr-btn--secondary{
	background: transparent;
	border: 1px solid #ccd0d4;
	color: #000 !important;
}
.modulr-btn--secondary:hover,
.modulr-btn--secondary:focus{
	background: rgba(0,0,0,0.03);
	color: #000 !important;
}
.modulr-btn--secondary:visited{
	color: #000 !important;
}
.modulr-btn--soft{
	background:#ffffff;
	border-color:#dbe3ef;
	color:#0f172a;
}
.modulr-btn--soft:hover{ background:#f8fafc; }
.modulr-btn--soft:visited{ color:#0f172a; }



@media (max-width: 780px){
	.modulr-profile-tabs{ overflow:auto; }
	.modulr-form-grid{ grid-template-columns: 1fr; }
}



/* Bandeau d’information (admin -> vue d’un autre profil) */
.modulr-admin-view-notice{
    margin: -12px -12px 16px -12px;
    padding: 10px 12px;
    border-radius: 10px 10px 0 0;
    background: #fff8e5;
    color: #663c00;
    border: 1px solid #ffe8b3;
    font-size: .95rem;
}

.modulr-stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.modulr-stats-table th, .modulr-stats-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: center;
}
.modulr-stats-table td{
	/* cellules blanches pour bien ressortir */
	background: #fff;
}
.modulr-stats-table th{
	/* entête grisée conservée */
	background: #f3f4f6;
}
/* 📊 Mon historique */
.modulr-stats-table thead th{
	padding-top: 7px !important;
	padding-bottom: 7px !important;
	line-height: 1.1;
}
.modulr-stats-table tbody td{
	padding-top: 9px !important;
	padding-bottom: 9px !important;
	line-height: 1.1;
}

/* Tables WP (widefat/striped) : corps blanc, entête grisée */
table.widefat tbody td,
table.widefat tbody th{
	background: #fff;
}
table.widefat thead th{
	background: #f3f4f6;
}
table.widefat.striped > tbody > :nth-child(odd){
	background: #fff; /* on neutralise le gris alterné pour garder du blanc */
}
table.widefat.striped > tbody > :nth-child(even){
	background: #fff;
}

.modulr-earned-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 0;
	align-items: center;
}
.modulr-earned-badges img {
	display: inline-block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* 🎨 Effet hover sur les boutons du tableau Derniers quiz complétés */
.modulr-stats-table a.button:hover {
	background: #005177 !important; /* bleu bouton Voir */
	color: #fff !important;
	opacity: 0.95;
}
.modulr-stats-table a.button.replay-btn:hover {
	background: #368c3c !important; /* vert bouton Rejouer */
	color: #fff !important;
	opacity: 0.95;
}

/* Boutons "Voir / Rejouer" plus fins et colorés */
.modulr-action-btn{
	display:inline-flex;
	align-items:center;
	gap: 6px;
	padding: 6px 10px !important;
	border-radius: 8px !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(2,6,23,.10);
	font-weight: 700;
}
.modulr-action-btn--view{
	background: #007cba !important;
	color:#fff !important;
}
.modulr-action-btn--replay{
	background: #3aa54b !important;
	color:#fff !important;
}
.modulr-action-btn .dashicons{
	font-size: 16px;
	width: 16px;
	height: 16px;
	margin-top: 1px;
}

/* Ajout d'une surbrillance douce sur la section crédits lors de mise à jour */
.modulr-user-credits {
    padding: 0.2rem 0.4rem;
}
.modulr-pill--credits.flash {
    background: #FFD700;
    transition: background 1s ease;
}

.modulr-stats-table td:nth-child(2),
.modulr-stats-table td:nth-child(3),
.modulr-stats-table td:nth-child(4)
{	font-family: monospace;
	font-size: 0.9rem;
	padding-left: 6px;
	padding-right: 6px;
}

/* Mon historique */
.modulr-stats-table tbody td:first-child{
	font-size: 0.88rem; /* -2px environ selon base */
	font-family: inherit;
	text-align: left;
}

/* Score fusionné : trophée + score dessous */
.modulr-score-cell{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap: 4px;
	line-height: 1.05;
}
.modulr-score-trophy{
	font-size: 22px;
	line-height: 1;
}
.modulr-score-value{
	font-weight: 900;
	color:#0f172a;
}
.modulr-score-rate{
	font-weight: 700;
	color:#94a3b8;
	font-size: .85rem;
}

/* Bloc préférences */
.modulr-user-settings .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.modulr-user-settings .label {
    display:block;
    font-weight:600;
    margin-bottom:6px;
}
.modulr-user-settings select {
    width: 100%;
    max-width: none;
    min-width: 0;
}

/* Onglet "Derniers quiz complétés" */
.modulr-history-footer{
	text-align: right;
	margin: 12px 0 6px; /* 14px (padding carte) + 6px = 20px */
}

.modulr-objective-select {
	max-width: 100%;
	width: 100%;
	max-width: 400px;
}
.modulr-objective-line{
	display:flex;
	align-items:center;
	gap: 12px;
	flex-wrap: wrap;
}
.modulr-objective-line .label{
	margin: 0;
	white-space: nowrap;
}
.modulr-objective-line .modulr-objective-select{
	flex: 1 1 320px;
}

/* 🧩 Grille de domaines */
.modulr-domain-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 14px;
	margin: 0.5rem 0 0.75rem;
}
.modulr-domain-card {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 12px 10px 10px;
	background: #f8fafc;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.modulr-domain-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0,0,0,.06);
	background: #eff6ff;
	border-color: #bfdbfe;
}
.modulr-domain-card-icon {
	width: 72px;
	height: 72px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 8px;
	background: linear-gradient(135deg,#38bdf8,#22c55e);
	box-shadow: 0 3px 8px rgba(0,0,0,.12);
}
.modulr-domain-card-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.modulr-domain-generic-symbol {
	font-size: 2rem;
	color: #f9fafb;
}
.modulr-domain-card-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: #0f172a;
}
.modulr-domain-card.is-selected {
	border-color: #0284c7;
	background: #e0f2fe;
	box-shadow: 0 0 0 2px rgba(2,132,199,0.2);
}
.modulr-domain-card.is-dimmed {
	opacity: 0.45;
}

/* 🌍 Langues – cartes iOS */
.modulr-language-settings{
	display:flex;
	flex-direction:column;
	gap:18px;
}
.modulr-language-settings.is-saving{
	cursor: wait;
}

.modulr-language-settings.is-saving .modulr-language-flag-grid{
	pointer-events: none;
	opacity: .62;
	filter: saturate(.82);
}
.modulr-language-card{
	padding:14px 14px 16px;
	border:1px solid rgba(226,232,240,.92);
	border-radius:18px;
	background:
		radial-gradient(circle at top right, rgba(59,130,246,.08), transparent 34%),
		linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.92) 100%);
	box-shadow:
		0 14px 30px rgba(15,23,42,.07),
		inset 0 1px 0 rgba(255,255,255,.95);
}
.modulr-language-card > label{
	display:block;
	margin:0 0 12px;
	font-weight:900;
	color:#0f172a;
}
.modulr-language-card--quiz{
	max-width:300px;
}
.modulr-language-flag-grid{
	display:grid;
	gap:18px 24px;
	align-items:start;
}
.modulr-language-flag-grid--site{
	grid-template-columns: repeat(4, 1fr);
	max-width:560px;
}
.modulr-language-flag-grid--quiz{
	grid-template-columns: repeat(2, 1fr);
	max-width:268px;
}
.modulr-language-flag-choice{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:5px;
	cursor:pointer;
	user-select:none;
	text-align:center;
}
.modulr-language-flag-choice input{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	overflow:hidden;
}
.modulr-language-flag-choice__visual{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:80px;
	height:80px;
	padding:0 6px 0 6px;
	margin-left:10px;
	border-radius:18px;
	background:
		radial-gradient(circle at 50% 18%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.72) 28%, rgba(226,232,240,.22) 60%, rgba(15,23,42,.04) 100%),
		linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border:1px solid rgba(148,163,184,.34);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.95),
		inset 0 -8px 18px rgba(15,23,42,.035),
		0 10px 24px rgba(15,23,42,.10);
	transition:
		transform .22s cubic-bezier(.18,.9,.28,1.35),
		box-shadow .22s ease,
		border-color .22s ease,
		background .22s ease,
		filter .22s ease;
}
.modulr-language-flag-choice__visual::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	background:
		linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 34%),
		radial-gradient(circle at 50% 0%, rgba(255,255,255,.65), rgba(255,255,255,0) 56%);
	opacity:.55;
	pointer-events:none;
	z-index:1;
}
.modulr-language-flag-choice__visual::after{
	content:"";
	position:absolute;
	inset:-1px;
	border-radius:inherit;
	background:linear-gradient(135deg, rgba(34,197,94,.95), rgba(14,165,233,.62), rgba(255,255,255,.85), rgba(34,197,94,.95));
	opacity:0;
	pointer-events:none;
	z-index:0;
}
.modulr-language-flag-choice__img{
	display:block;
	width:80px;
	height:80px;
	object-fit:contain;
	transform-origin:center center;
	position:relative;
	z-index:2;
	filter:
		drop-shadow(0 8px 12px rgba(15,23,42,.13))
		drop-shadow(0 0 8px rgba(96,165,250,.12));
	transition:
		transform .24s cubic-bezier(.18,.9,.28,1.45),
		filter .22s ease;
}
.modulr-language-flag-choice__check{
	position:absolute;
	right:4px;
	bottom:4px;
	width:25px;
	height:25px;
	opacity:0;
	transform:scale(.72);
	transition:opacity .14s ease, transform .16s ease;
	z-index:4;
}
.modulr-language-flag-choice__label{
	display:block;
	font-weight:800;
	font-size:.78rem;
	line-height:1.25;
	color:#64748b;
	text-transform:uppercase;
	letter-spacing:.08em;
	max-width:104px;
	overflow-wrap:anywhere;
	text-align:center;
	align-self:center;
	min-height:1.25em;
	padding-top:10px;
}
.modulr-language-flag-choice input:checked ~ .modulr-language-flag-choice__label{
	color:#0f766e;
}
.modulr-language-flag-choice input:checked ~ .modulr-language-flag-choice__visual{
	border-color:rgba(34,197,94,.95);
	background:
		radial-gradient(circle at 50% 12%, rgba(255,255,255,1) 0%, rgba(236,253,245,.96) 34%, rgba(187,247,208,.26) 68%, rgba(14,165,233,.10) 100%),
		linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
	box-shadow:
		0 0 0 3px rgba(34,197,94,.22),
		0 0 0 7px rgba(34,197,94,.08),
		inset 0 1px 0 rgba(255,255,255,1),
		inset 0 -10px 20px rgba(34,197,94,.10),
		0 14px 30px rgba(15,23,42,.14),
		0 0 22px rgba(34,197,94,.24);
	filter:saturate(1.06);
	animation:modulrLanguageSelectedPop .22s cubic-bezier(.18,.9,.28,1.35);
}
.modulr-language-flag-choice input:checked ~ .modulr-language-flag-choice__visual::after{
	opacity:.26;
}
.modulr-language-flag-choice input:checked ~ .modulr-language-flag-choice__visual .modulr-language-flag-choice__check{
	opacity:1;
	transform:scale(1);
}
.modulr-language-flag-choice:focus-within .modulr-language-flag-choice__visual{
	outline:2px solid rgba(37,99,235,.25);
	outline-offset:3px;
}
@media (hover:hover){
	.modulr-language-flag-choice:hover .modulr-language-flag-choice__visual{
		transform:translateY(-4px) scale(1.045);
		box-shadow:
			inset 0 1px 0 rgba(255,255,255,.95),
			0 18px 34px rgba(15,23,42,.16);
	}
	.modulr-language-flag-choice:hover .modulr-language-flag-choice__img{
		transform:scale(1.10) translateY(-1px);
	}
	.modulr-language-flag-choice:active .modulr-language-flag-choice__visual{
		transform:translateY(-1px) scale(.98);
	}
}
@keyframes modulrLanguageSelectedPop{
	0%{ transform:scale(.96); }
	58%{ transform:scale(1.06); }
	100%{ transform:scale(1); }
}
@media (prefers-reduced-motion:reduce){
	.modulr-language-flag-choice__visual,
	.modulr-language-flag-choice__img,
	.modulr-language-flag-choice__check{
		animation:none;
	}
}

/* 📱 Mobile : passer la grille en une seule colonne pour que le <select> prenne 100% */
@media (max-width: 640px) {
	.modulr-user-settings .row { grid-template-columns: 1fr; }
	.modulr-goal-grid { grid-template-columns: 1fr; }
	.modulr-language-settings{ gap:14px; }
	.modulr-language-card{ padding:12px; }
	.modulr-language-card--quiz{ max-width:none; }
	.modulr-language-flag-grid--site { grid-template-columns: repeat(4, minmax(70px, 1fr)); gap:12px 10px; max-width:none; }
	.modulr-language-flag-grid--quiz { grid-template-columns: repeat(2, minmax(70px, 80px)); gap:12px 10px; max-width:180px; }
	.modulr-language-flag-choice{
		flex-direction:column;
		gap:5px;
		text-align:center;
	}
	.modulr-language-flag-choice__visual,
	.modulr-language-flag-choice__img { width:64px; height:64px; }
	.modulr-language-flag-choice__label{
		max-width:80px;
		font-size:.68rem;
		text-align:center;
	}
}