/**
 * IORESKILL Onboarding — styles du parcours.
 *
 * Design system minimal, calme, centré sur la lisibilité.
 * Toutes les classes sont préfixées ioreskill- pour éviter tout conflit
 * avec le thème Eduma ou Tutor LMS.
 *
 * Compatible mobile : layout fluide jusqu'à 360px de large.
 */

/* ---------- Variables ---------- */
.ioreskill-signup,
.ioreskill-welcome,
.ioreskill-journey,
.ioreskill-complementary,
.ioreskill-card {
	--iore-primary: #1f3864;
	--iore-primary-hover: #2e4f8f;
	--iore-accent: #2e75b6;
	--iore-success: #2c7a3f;
	--iore-warning: #b66a00;
	--iore-error: #c0392b;
	--iore-text: #1f2937;
	--iore-text-muted: #6b7280;
	--iore-border: #e5e7eb;
	--iore-bg-soft: #f9fafb;
	--iore-bg-card: #ffffff;
	--iore-radius: 10px;
	--iore-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
	--iore-font: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	font-family: var(--iore-font);
	color: var(--iore-text);
	max-width: 720px;
	margin: 0 auto;
	padding: 1.5rem 1rem;
	line-height: 1.55;
}

/* ---------- Carte de base ---------- */
.ioreskill-card {
	background: var(--iore-bg-card);
	border: 1px solid var(--iore-border);
	border-radius: var(--iore-radius);
	box-shadow: var(--iore-shadow);
	padding: 2rem 1.5rem;
	margin-bottom: 1.5rem;
}

.ioreskill-card h1,
.ioreskill-card h2 {
	margin-top: 0;
	color: var(--iore-primary);
	font-weight: 700;
}

.ioreskill-card h1 { font-size: 1.6rem; }
.ioreskill-card h2 { font-size: 1.3rem; }
.ioreskill-card p { color: var(--iore-text); margin: 0.5em 0; }

.ioreskill-card--success { border-left: 4px solid var(--iore-success); }
.ioreskill-card--warning { border-left: 4px solid var(--iore-warning); }
.ioreskill-card--error   { border-left: 4px solid var(--iore-error); }
.ioreskill-card--info    { border-left: 4px solid var(--iore-accent); }

/* ---------- Boutons ---------- */
.ioreskill-button {
	display: inline-block;
	background: var(--iore-primary);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--iore-primary);
	border-radius: var(--iore-radius);
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, transform .05s ease, box-shadow .15s ease;
}
.ioreskill-button:hover {
	background: var(--iore-primary-hover);
	color: #fff;
	box-shadow: 0 4px 12px rgba(31,56,100,0.25);
}
.ioreskill-button:active { transform: translateY(1px); }
.ioreskill-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}
.ioreskill-button--ghost {
	background: transparent;
	color: var(--iore-primary);
	border-color: var(--iore-border);
}
.ioreskill-button--ghost:hover {
	background: var(--iore-bg-soft);
	color: var(--iore-primary);
	box-shadow: none;
}

/* ---------- Formulaires ---------- */
.ioreskill-form__part h2 {
	color: var(--iore-primary);
	margin-bottom: 0.25em;
}
.ioreskill-form__intro {
	color: var(--iore-text-muted);
	margin-top: 0;
	margin-bottom: 1.5em;
}
.ioreskill-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 480px) {
	.ioreskill-form__row { grid-template-columns: 1fr; }
}
.ioreskill-form__field {
	margin-bottom: 1.25rem;
}
.ioreskill-form__field label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.4rem;
	color: var(--iore-text);
}
.ioreskill-form__field .required { color: var(--iore-error); }

.ioreskill-form__field input[type="text"],
.ioreskill-form__field input[type="email"],
.ioreskill-form__field input[type="password"],
.ioreskill-form__field select {
	width: 100%;
	padding: 0.65rem 0.85rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--iore-text);
	background: #fff;
	border: 1px solid var(--iore-border);
	border-radius: var(--iore-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
.ioreskill-form__field input:focus,
.ioreskill-form__field select:focus {
	outline: 0;
	border-color: var(--iore-accent);
	box-shadow: 0 0 0 3px rgba(46,117,182,0.15);
}
.ioreskill-form__field--check label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--iore-text);
	cursor: pointer;
}
.ioreskill-form__field--check input[type="checkbox"] {
	margin-top: 4px;
	flex-shrink: 0;
}

.ioreskill-form__help {
	font-size: 0.8rem;
	color: var(--iore-text-muted);
	margin-top: 0.3rem;
}
.ioreskill-form__error {
	font-size: 0.85rem;
	color: var(--iore-error);
	margin-top: 0.3rem;
	min-height: 1.1em;
}
.ioreskill-form__global-error {
	background: #fdf2f2;
	color: var(--iore-error);
	padding: 0.75rem 1rem;
	border-radius: var(--iore-radius);
	border-left: 4px solid var(--iore-error);
	margin-bottom: 1rem;
}

/* Indicateur de force du mot de passe */
.ioreskill-form__strength {
	margin-top: 0.5rem;
	height: 6px;
	background: var(--iore-border);
	border-radius: 3px;
	overflow: hidden;
	position: relative;
}
.ioreskill-form__strength::after {
	content: '';
	display: block;
	height: 100%;
	width: var(--strength-pct, 0%);
	background: var(--strength-color, var(--iore-error));
	transition: width .2s ease, background-color .2s ease;
}
.ioreskill-form__strength-label {
	font-size: 0.8rem;
	margin-top: 0.25rem;
	color: var(--iore-text-muted);
}

.ioreskill-form__actions {
	margin-top: 1.5rem;
	display: flex;
	justify-content: flex-end;
}
.ioreskill-form__actions--split {
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

/* ---------- Journey explanation ---------- */
.ioreskill-journey h1 {
	color: var(--iore-primary);
	font-size: 1.8rem;
	margin-bottom: 0.3em;
}
.ioreskill-journey__intro {
	color: var(--iore-text-muted);
	margin-bottom: 2rem;
}
.ioreskill-journey__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-bottom: 2rem;
}
@media (max-width: 720px) {
	.ioreskill-journey__steps { grid-template-columns: 1fr; }
}
.ioreskill-journey__step {
	background: var(--iore-bg-card);
	border: 1px solid var(--iore-border);
	border-radius: var(--iore-radius);
	padding: 1.5rem 1.25rem;
	position: relative;
}
.ioreskill-journey__step-number {
	width: 32px;
	height: 32px;
	background: var(--iore-primary);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	margin-bottom: 0.75rem;
}
.ioreskill-journey__step h3 {
	color: var(--iore-primary);
	margin: 0 0 0.5em;
	font-size: 1.05rem;
}
.ioreskill-journey__step p {
	color: var(--iore-text);
	font-size: 0.92rem;
	margin: 0 0 1em;
}
.ioreskill-journey__step-time {
	display: inline-block;
	background: var(--iore-bg-soft);
	color: var(--iore-text-muted);
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
}

/* ---------- Welcome ---------- */
.ioreskill-welcome h1 {
	font-size: 2rem;
	color: var(--iore-primary);
}
.ioreskill-welcome__intro {
	font-size: 1.05rem;
	margin-bottom: 1.5em;
}

/* ---------- Complementary ---------- */
.ioreskill-complementary h1 {
	color: var(--iore-primary);
	font-size: 1.6rem;
	margin-bottom: 0.3em;
}
.ioreskill-complementary__intro {
	color: var(--iore-text-muted);
	margin-bottom: 1.5rem;
}

/* ---------- Helpers ---------- */
.ioreskill-help {
	font-size: 0.85rem;
	color: var(--iore-text-muted);
	font-style: italic;
}

/* ---------- Test engine (DISC + compétences) ---------- */
.ioreskill-disc-test,
.ioreskill-skills-test,
.ioreskill-disc-intro,
.ioreskill-skills-chooser {
	max-width: 760px;
	margin: 0 auto;
	padding: 1.5rem 1rem;
}

.ioreskill-test__header h2 {
	color: var(--iore-primary);
	margin-bottom: 1rem;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.ioreskill-test__progress {
	margin-bottom: 1.5rem;
}
.ioreskill-test__progress-bar {
	height: 6px;
	background: var(--iore-border);
	border-radius: 3px;
	overflow: hidden;
}
.ioreskill-test__progress-fill {
	height: 100%;
	background: var(--iore-accent);
	transition: width .25s ease;
}
.ioreskill-test__progress-text {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--iore-text-muted);
	text-align: right;
}

.ioreskill-test__statement {
	color: var(--iore-text);
	font-size: 1.15rem;
	font-weight: 600;
	margin: 1.5rem 0 1.5rem;
	line-height: 1.5;
}

.ioreskill-test__options {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.ioreskill-test__option {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1rem 1.1rem;
	background: var(--iore-bg-card);
	border: 1.5px solid var(--iore-border);
	border-radius: var(--iore-radius);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, transform .05s ease;
}
.ioreskill-test__option:hover {
	border-color: var(--iore-accent);
	background: var(--iore-bg-soft);
}
.ioreskill-test__option.is-selected {
	border-color: var(--iore-primary);
	background: rgba(31,56,100,0.04);
	box-shadow: 0 0 0 3px rgba(31,56,100,0.08);
}
.ioreskill-test__option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ioreskill-test__option-letter {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--iore-bg-soft);
	color: var(--iore-primary);
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.95rem;
	flex-shrink: 0;
}
.ioreskill-test__option.is-selected .ioreskill-test__option-letter {
	background: var(--iore-primary);
	color: #fff;
}
.ioreskill-test__option-text {
	flex: 1;
	padding-top: 4px;
	color: var(--iore-text);
}

.ioreskill-test__actions {
	margin-top: 2rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
.ioreskill-test__actions [data-prev] { margin-right: auto; }
.ioreskill-test__actions [data-next] { margin-left: auto; }

.ioreskill-test__error {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	background: #fdf2f2;
	color: var(--iore-error);
	border-left: 4px solid var(--iore-error);
	border-radius: var(--iore-radius);
	font-size: 0.9rem;
}

.ioreskill-test__submitting {
	margin-top: 2rem;
	text-align: center;
}

/* DISC intro */
.ioreskill-disc-intro__lead {
	font-size: 1.05rem;
	margin: 1rem 0 1.5rem;
}
.ioreskill-disc-intro__points {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 1.5rem 0;
}
@media (max-width: 600px) {
	.ioreskill-disc-intro__points { grid-template-columns: 1fr; }
}
.ioreskill-disc-intro__point {
	background: var(--iore-bg-soft);
	padding: 1rem;
	border-radius: var(--iore-radius);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.ioreskill-disc-intro__point strong {
	color: var(--iore-primary);
	font-size: 0.95rem;
}
.ioreskill-disc-intro__point span {
	color: var(--iore-text-muted);
	font-size: 0.85rem;
	line-height: 1.4;
}

/* Skills chooser */
.ioreskill-skills-chooser__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}
.ioreskill-skills-chooser__card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.25rem;
	background: var(--iore-bg-card);
	border: 1.5px solid var(--iore-border);
	border-radius: var(--iore-radius);
	color: var(--iore-text);
	text-decoration: none;
	transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.ioreskill-skills-chooser__card:hover {
	border-color: var(--iore-primary);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(31,56,100,0.08);
	color: var(--iore-text);
}
.ioreskill-skills-chooser__card h3 {
	color: var(--iore-primary);
	margin: 0;
	font-size: 1rem;
	line-height: 1.35;
}
.ioreskill-skills-chooser__count {
	font-size: 0.8rem;
	color: var(--iore-text-muted);
}

/* ---------- Dashboard ---------- */
.ioreskill-dashboard {
	max-width: 920px;
	margin: 0 auto;
	padding: 1.5rem 1rem;
}
.ioreskill-dashboard__header {
	margin-bottom: 2rem;
}
.ioreskill-dashboard__header h1 {
	color: var(--iore-primary);
	margin: 0 0 0.5rem;
	font-size: 1.9rem;
}
.ioreskill-dashboard__subtitle {
	color: var(--iore-text-muted);
	margin: 0;
	font-size: 1rem;
}
.ioreskill-dashboard__section {
	margin-bottom: 1.5rem;
}

/* --- Bloc DISC --- */
.ioreskill-disc-result {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 1.5rem;
	align-items: start;
	margin: 1.5rem 0;
}
@media (max-width: 720px) {
	.ioreskill-disc-result { grid-template-columns: 1fr; }
}
.ioreskill-disc-result__chart {
	background: var(--iore-bg-soft);
	border-radius: var(--iore-radius);
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ioreskill-disc-result__chart svg {
	width: 100%;
	max-width: 260px;
	height: auto;
}
.ioreskill-disc-result__primary {
	margin-bottom: 1.5rem;
}
.ioreskill-disc-result__secondary {
	padding-top: 1rem;
	border-top: 1px solid var(--iore-border);
}
.ioreskill-disc-result__label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	color: var(--iore-text-muted);
	font-weight: 600;
	margin-bottom: 0.25rem;
}
.ioreskill-disc-result__profile {
	display: block;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 0.35rem;
}
.ioreskill-disc-result__profile-small {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 0.3rem;
}
.ioreskill-disc-result__description {
	color: var(--iore-text);
	font-size: 0.93rem;
	margin: 0;
	line-height: 1.5;
}

.ioreskill-disc-result__scores {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem 1.5rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--iore-border);
}
@media (max-width: 500px) {
	.ioreskill-disc-result__scores { grid-template-columns: 1fr; }
}
.ioreskill-disc-score__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.4rem;
}
.ioreskill-disc-score__letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	font-size: 0.78rem;
	flex-shrink: 0;
}
.ioreskill-disc-score__name {
	flex: 1;
	font-size: 0.9rem;
	color: var(--iore-text);
}
.ioreskill-disc-score__value {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--iore-text-muted);
}
.ioreskill-disc-score__bar {
	height: 6px;
	background: var(--iore-border);
	border-radius: 3px;
	overflow: hidden;
}
.ioreskill-disc-score__bar-fill {
	height: 100%;
	border-radius: 3px;
	transition: width .4s ease;
}

/* --- Bloc Compétences --- */
.ioreskill-skills-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}
.ioreskill-skill-card {
	background: var(--iore-bg-card);
	border: 1.5px solid var(--iore-border);
	border-radius: var(--iore-radius);
	padding: 1.1rem 1.15rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.ioreskill-skill-card h3 {
	color: var(--iore-primary);
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.35;
	min-height: 2.6em;
}
.ioreskill-skill-card--tested {
	border-color: rgba(31,56,100,0.2);
}
.ioreskill-skill-card--untested {
	background: var(--iore-bg-soft);
}
.ioreskill-skill-card--untested h3 {
	color: var(--iore-text-muted);
}
.ioreskill-skill-card__status {
	font-size: 0.8rem;
	color: var(--iore-text-muted);
	margin: 0;
}
.ioreskill-skill-card__level {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0.2rem 0 0.3rem;
}
.ioreskill-skill-card__bar {
	height: 6px;
	background: var(--iore-border);
	border-radius: 3px;
	overflow: hidden;
}
.ioreskill-skill-card__bar-fill {
	height: 100%;
	border-radius: 3px;
	transition: width .4s ease;
}
.ioreskill-skill-card__score {
	font-size: 0.85rem;
	color: var(--iore-text-muted);
}
.ioreskill-skill-card__btn {
	align-self: flex-start;
	margin-top: 0.5rem;
	padding: 0.45rem 0.9rem;
	font-size: 0.85rem;
}
.ioreskill-skill-card__retake {
	font-size: 0.82rem;
	color: var(--iore-accent);
	text-decoration: none;
	margin-top: 0.3rem;
	align-self: flex-start;
}
.ioreskill-skill-card__retake:hover {
	text-decoration: underline;
}

/* --- Bloc actions --- */
.ioreskill-dashboard__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}

/* ---------- Dashboard : layout côte à côte ---------- */

/* Largeur max élargie sur grand écran pour profiter de l'espace */
@media (min-width: 1100px) {
	.ioreskill-dashboard { max-width: 1180px; }
}

/* Grille à 2 colonnes pour le bloc supérieur (DISC + Compétences) */
.ioreskill-dashboard__top-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}
@media (min-width: 900px) {
	.ioreskill-dashboard__top-grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: start;
	}
}

/* Quand le dashboard est en 2 colonnes, supprimer la marge inférieure de chaque section
   (le gap de la grille s'en occupe), et faire que chaque section remplisse la hauteur dispo */
.ioreskill-dashboard__top-grid > .ioreskill-dashboard__section {
	margin-bottom: 0;
}
.ioreskill-dashboard__top-grid > .ioreskill-dashboard__section > .ioreskill-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Dans la colonne DISC, repasser le bloc radar+texte en empilé vertical
   (la colonne est plus étroite que sur l'ancien plein écran) */
@media (min-width: 900px) {
	.ioreskill-disc-result {
		grid-template-columns: 1fr;
	}
	.ioreskill-disc-result__chart svg {
		max-width: 220px;
	}
}

/* Sur très grand écran, on peut se permettre de remettre le DISC en radar+texte côte à côte
   uniquement quand la fenêtre est suffisamment large */
@media (min-width: 1280px) {
	.ioreskill-disc-result {
		grid-template-columns: 240px 1fr;
	}
}

/* Cartes compétences : ajustement de la grille pour qu'elle s'adapte mieux dans la demi-colonne */
@media (min-width: 900px) {
	.ioreskill-dashboard__top-grid .ioreskill-skills-grid {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	}
}

/* ---------- Dashboard : élargissement pour grand écran ---------- */
/* Override : on permet au dashboard d'aller jusqu'à 1400px pour mieux exploiter 
   l'espace, en particulier pour la grille de recommandations en dessous */
@media (min-width: 1400px) {
	.ioreskill-dashboard { max-width: 1400px; }
}

/* ---------- Bloc "Objectif Projets" en haut du dashboard ---------- */
.ioreskill-project-access {
	margin-bottom: 1.5rem;
}
.ioreskill-project-access__card {
	position: relative;
	overflow: hidden;
}
.ioreskill-project-access__card.is-unlocked {
	background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 60%);
	border-color: rgba(39, 174, 96, 0.35);
}
.ioreskill-project-access__card.is-locked {
	background: linear-gradient(135deg, var(--iore-bg-soft, #f9fafb) 0%, #ffffff 60%);
}

.ioreskill-project-access__intro {
	margin-bottom: 1.25rem;
}
.ioreskill-project-access__eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--iore-text-muted, #6b7280);
	font-weight: 700;
	margin-bottom: 0.4rem;
}
.ioreskill-project-access__card h2 {
	margin: 0 0 0.5rem;
	font-size: 1.45rem;
	color: var(--iore-primary, #1f3864);
	line-height: 1.25;
}
.ioreskill-project-access__lead {
	margin: 0;
	color: var(--iore-text, #1f2937);
	font-size: 0.95rem;
	line-height: 1.55;
	max-width: 780px;
}

.ioreskill-project-access__status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.88rem;
	margin-bottom: 0.85rem;
}
.ioreskill-project-access__status--unlocked {
	background: rgba(39, 174, 96, 0.12);
	color: #1f6e35;
}
.ioreskill-project-access__status--locked {
	background: rgba(107, 114, 128, 0.12);
	color: #4b5563;
}

.ioreskill-project-access__progress {
	margin: 0.5rem 0 1rem;
	max-width: 520px;
}
.ioreskill-project-access__progress-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.4rem;
}
.ioreskill-project-access__progress-label {
	font-weight: 600;
	color: var(--iore-text, #1f2937);
	font-size: 0.92rem;
}
.ioreskill-project-access__progress-score {
	font-weight: 700;
	color: var(--iore-primary, #1f3864);
	font-size: 0.95rem;
}
.ioreskill-project-access__bar {
	height: 10px;
	background: var(--iore-border, #e5e7eb);
	border-radius: 999px;
	overflow: hidden;
}
.ioreskill-project-access__bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--iore-accent, #2e75b6), #27AE60);
	border-radius: 999px;
	transition: width .5s ease;
}
.ioreskill-project-access__progress-hint {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	color: var(--iore-text-muted, #6b7280);
}

.ioreskill-project-access__btn {
	margin-top: 0.25rem;
	display: inline-flex;
	align-items: center;
}
.ioreskill-project-access__btn--active {
	background: #27AE60;
	border-color: #27AE60;
	color: #fff;
	padding: 0.8rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
}
.ioreskill-project-access__btn--active:hover {
	background: #1f6e35;
	border-color: #1f6e35;
	color: #fff;
}
.ioreskill-project-access__btn--disabled {
	background: var(--iore-bg-soft, #f3f4f6);
	color: var(--iore-text-muted, #9ca3af);
	border: 1.5px solid var(--iore-border, #e5e7eb);
	cursor: not-allowed;
	padding: 0.8rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	opacity: 0.85;
}
.ioreskill-project-access__btn--disabled:hover {
	background: var(--iore-bg-soft, #f3f4f6);
	color: var(--iore-text-muted, #9ca3af);
}

.ioreskill-project-access__locked-hint {
	margin: 0.6rem 0 0;
	font-size: 0.82rem;
	color: var(--iore-text-muted, #6b7280);
	font-style: italic;
}
.ioreskill-project-access__multi {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: var(--iore-text-muted, #6b7280);
}

/* ============================================================
   Refonte ergonomique du dashboard (v0.5.1)
   ============================================================ */

/* ---- Bloc Objectif Projets : layout 2 colonnes ---- */
.ioreskill-project-access__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	align-items: center;
}
@media (min-width: 760px) {
	.ioreskill-project-access__layout {
		grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
		gap: 2rem;
	}
}
@media (min-width: 1100px) {
	.ioreskill-project-access__layout {
		grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
		gap: 2.5rem;
	}
}

.ioreskill-project-access__left {
	min-width: 0;
}
.ioreskill-project-access__right {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

/* La barre de progression doit occuper toute la largeur de la colonne droite */
.ioreskill-project-access__right .ioreskill-project-access__progress {
	max-width: none;
	margin: 0;
}

/* Le bouton aussi ; on retire le margin-top arbitraire */
.ioreskill-project-access__right .ioreskill-project-access__btn {
	margin-top: 0;
	align-self: stretch;
	justify-content: center;
	text-align: center;
}

/* Le hint et le multi ne mangent plus de marge en haut */
.ioreskill-project-access__right .ioreskill-project-access__locked-hint,
.ioreskill-project-access__right .ioreskill-project-access__multi {
	margin: 0;
	text-align: center;
}

/* ---- Bloc Compétences : 3 colonnes sur grand écran ---- */
@media (min-width: 900px) {
	.ioreskill-dashboard__top-grid .ioreskill-skills-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1280px) {
	.ioreskill-dashboard__top-grid .ioreskill-skills-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.85rem;
	}
}

/* Compacter légèrement les cartes compétences pour qu'elles tiennent en 3 colonnes */
@media (min-width: 1280px) {
	.ioreskill-skill-card {
		padding: 0.9rem 1rem;
	}
	.ioreskill-skill-card h3 {
		font-size: 0.92rem;
		min-height: auto;
	}
	.ioreskill-skill-card__level {
		font-size: 1rem;
	}
}

/* Mettre en avant visuellement les cartes testées (vs non testées) */
.ioreskill-skill-card--tested {
	background: linear-gradient(180deg, rgba(39,174,96,0.04) 0%, #fff 60%);
	border-color: rgba(39,174,96,0.35) !important;
}

/* ============================================================
   Livraison 7 (v0.6.0) — nouveaux composants
   ============================================================ */

/* ---- Onglets Connexion / Inscription sur /inscription/ ---- */
.ioreskill-auth-tabs {
	max-width: 640px;
	margin: 0 auto;
	padding: 1rem 0;
}
.ioreskill-auth-tabs__nav {
	display: flex;
	gap: 0.25rem;
	background: var(--iore-bg-soft, #f3f4f6);
	padding: 0.35rem;
	border-radius: 12px;
	margin-bottom: 1.5rem;
}
.ioreskill-auth-tabs__tab {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 0;
	background: transparent;
	color: var(--iore-text-muted, #6b7280);
	font-family: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s ease;
}
.ioreskill-auth-tabs__tab:hover {
	color: var(--iore-text, #1f2937);
}
.ioreskill-auth-tabs__tab.is-active {
	background: #fff;
	color: var(--iore-primary, #1f3864);
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.ioreskill-auth-tabs__panel {
	display: none;
	animation: iore-fade-in 0.2s ease-out;
}
.ioreskill-auth-tabs__panel.is-active {
	display: block;
}
@keyframes iore-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---- Écran "Connexion requise" ---- */
.ioreskill-login-required {
	max-width: 560px;
	margin: 2rem auto;
	padding: 0 1rem;
}
.ioreskill-login-required .ioreskill-card {
	text-align: center;
	padding: 2.5rem 2rem;
}
.ioreskill-login-required__icon {
	color: #27AE60;
	margin-bottom: 1rem;
	display: flex;
	justify-content: center;
}
.ioreskill-login-required h1 {
	margin: 0 0 0.75rem;
	color: var(--iore-primary, #1f3864);
	font-size: 1.75rem;
}
.ioreskill-login-required__lead {
	color: var(--iore-text, #1f2937);
	font-size: 1.05rem;
	line-height: 1.55;
	margin: 0 0 1.5rem;
}

/* ---- Refonte bienvenue (v0.6.0) ---- */
.ioreskill-welcome {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Hero (titre + info-cards) */
.ioreskill-welcome__hero { padding: 2rem; }
.ioreskill-welcome__title {
	font-size: 2rem;
	margin: 0 0 0.5rem;
	color: var(--iore-primary, #1f3864);
	line-height: 1.2;
}
.ioreskill-welcome__lead {
	font-size: 1.15rem;
	font-style: italic;
	color: var(--iore-accent, #2e75b6);
	margin: 0 0 1.25rem;
	font-weight: 500;
}
.ioreskill-welcome__intro {
	color: var(--iore-text, #1f2937);
	line-height: 1.6;
	margin: 0 0 0.75rem;
}
.ioreskill-welcome__intro:last-of-type {
	margin-bottom: 1.5rem;
}

/* 3 info-cards horizontales */
.ioreskill-welcome__info-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem;
	margin: 1.5rem 0;
}
@media (min-width: 720px) {
	.ioreskill-welcome__info-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}
.ioreskill-info-card {
	background: var(--iore-bg-soft, #f9fafb);
	border: 1px solid var(--iore-border, #e5e7eb);
	border-radius: 12px;
	padding: 1.15rem 1rem;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ioreskill-info-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.ioreskill-info-card__icon {
	font-size: 1.75rem;
	margin-bottom: 0.5rem;
	line-height: 1;
}
.ioreskill-info-card__title {
	font-weight: 700;
	color: var(--iore-primary, #1f3864);
	font-size: 0.95rem;
	margin-bottom: 0.25rem;
}
.ioreskill-info-card__desc {
	color: var(--iore-text-muted, #6b7280);
	font-size: 0.88rem;
}

/* Actions welcome (bouton principal + secondaire) */
.ioreskill-welcome__actions {
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-start;
	margin-top: 0.5rem;
}
.ioreskill-button--ghost {
	background: transparent;
	border: 1.5px solid var(--iore-border, #d1d5db);
	color: var(--iore-text, #1f2937);
}
.ioreskill-button--ghost:hover {
	background: var(--iore-bg-soft, #f3f4f6);
	color: var(--iore-primary, #1f3864);
}

/* Bloc "Pourquoi ce test" */
.ioreskill-welcome__section-title {
	font-size: 1.5rem;
	color: var(--iore-primary, #1f3864);
	margin: 0 0 1.25rem;
	scroll-margin-top: 100px; /* pour l'ancre depuis le bouton "En savoir plus" */
}
.ioreskill-welcome__why {
	padding: 2rem;
	scroll-margin-top: 100px;
}
.ioreskill-welcome__why-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 720px) {
	.ioreskill-welcome__why-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.ioreskill-why-card {
	background: linear-gradient(180deg, rgba(46,117,182,0.04) 0%, #fff 60%);
	border: 1px solid var(--iore-border, #e5e7eb);
	border-radius: 12px;
	padding: 1.25rem;
}
.ioreskill-why-card__icon {
	font-size: 1.75rem;
	margin-bottom: 0.5rem;
	line-height: 1;
}
.ioreskill-why-card__title {
	font-weight: 700;
	color: var(--iore-primary, #1f3864);
	margin-bottom: 0.5rem;
	font-size: 1.02rem;
}
.ioreskill-why-card__desc {
	color: var(--iore-text, #1f2937);
	font-size: 0.92rem;
	line-height: 1.55;
}

/* Message de confiance */
.ioreskill-welcome__trust {
	padding: 1.5rem;
	background: linear-gradient(135deg, rgba(39,174,96,0.06) 0%, #fff 70%);
	border: 1px solid rgba(39,174,96,0.25);
}
.ioreskill-welcome__trust-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}
.ioreskill-welcome__trust-icon {
	font-size: 1.5rem;
	line-height: 1;
}
.ioreskill-welcome__trust-title {
	margin: 0;
	color: #1f6e35;
	font-size: 1.1rem;
	font-weight: 700;
}
.ioreskill-welcome__trust-desc {
	color: var(--iore-text, #1f2937);
	margin: 0;
	line-height: 1.55;
}

/* Liste des 10 promesses */
.ioreskill-welcome__promises {
	padding: 1.75rem 2rem;
}
.ioreskill-welcome__promises-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.ioreskill-welcome__promises-icon {
	font-size: 1.5rem;
	line-height: 1;
}
.ioreskill-welcome__promises-title {
	margin: 0;
	color: var(--iore-primary, #1f3864);
	font-size: 1.15rem;
	font-weight: 700;
}
.ioreskill-welcome__promises-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
}
@media (min-width: 720px) {
	.ioreskill-welcome__promises-list {
		grid-template-columns: repeat(2, 1fr);
	}
}
.ioreskill-welcome__promises-list li {
	position: relative;
	padding: 0.5rem 0.5rem 0.5rem 1.75rem;
	color: var(--iore-text, #1f2937);
	line-height: 1.5;
	font-size: 0.95rem;
}
.ioreskill-welcome__promises-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.55rem;
	color: #27AE60;
	font-weight: 800;
	font-size: 1.1rem;
	line-height: 1;
}
.ioreskill-welcome__final-cta { justify-content: center; }

/* ---- Questions complémentaires : nouveau lead ---- */
.ioreskill-complementary__lead {
	font-size: 1.1rem;
	color: var(--iore-accent, #2e75b6);
	font-weight: 500;
	margin: -0.5rem 0 0.75rem;
	font-style: italic;
}

/* ---- Intro DISC : titre + sous-titre ---- */
.ioreskill-disc-intro__title {
	font-size: 1.8rem;
	color: var(--iore-primary, #1f3864);
	margin: 0 0 0.35rem;
}
.ioreskill-disc-intro__subtitle {
	font-size: 1.1rem;
	color: var(--iore-accent, #2e75b6);
	font-weight: 500;
	margin: 0 0 1.5rem;
}

/* ---- Test compétences : titre + sous-titre ---- */
.ioreskill-skills-chooser__title {
	font-size: 1.8rem;
	color: var(--iore-primary, #1f3864);
	margin: 0 0 0.35rem;
}
.ioreskill-skills-chooser__subtitle {
	font-size: 1.1rem;
	color: var(--iore-accent, #2e75b6);
	font-weight: 500;
	margin: 0 0 0.75rem;
}