/* ===== Polices auto-hébergées (RGPD : plus de requête vers Google Fonts) =====
 * Sous-ensembles latin + latin-ext (français, dont œ). Graisses auditées et minimales :
 * Roboto 400/700 (corps + gras) ; Ubuntu 500/700 (titres + navigation). Sans italique
 * (faux-italique synthétisé par le navigateur sur les rares textes en italique). */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/roboto-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/roboto-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/roboto-700-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/roboto-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ubuntu-500-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ubuntu-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/ubuntu-700-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/ubuntu-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* La navigation reprend la police des titres (Ubuntu) : une famille de moins à charger. */
:root { --nav-font: var(--heading-font); }
/* Ubuntu n'a pas de graisse 600 (celle du thème) : 600 arrondirait à 700, trop gras.
   On force les liens du menu sur 500 (graisse bien chargée). */
.navmenu a,
.navmenu a:focus { font-weight: 500; }

/*
 * Feuille de style Personarium.
 *
 * Ce fichier ne contient que ce qui n'est pas déjà fourni par le thème Academica Pro
 * (Bootstrap 5 + composants Academica). Tout ici est spécifique à l'application :
 * passation de questions, barres de scores, certificat, codes couleur DISC, etc.
 *
 * Les variables CSS utilisées sont celles d'Academica :
 *   --accent-color, --heading-color, --surface-color, --default-color.
 */

/* ===== Nuance d'un profil affichée à la suite du nom principal =====
 * Quand le résolveur de profil détecte un second profil pertinent (axe serré sur
 * Persona 16, ratio top2/top1 élevé sur DISC/RIASEC, etc.), on l'expose inline à
 * la suite du nom principal, séparé par " / ". Même police que le contexte, taille
 * réduite, légèrement grisé. Utilisé dans le h1 des pages de résultat ET dans la
 * liste des tests passés sur le compte. */
.profile-nuance {
	font-size: 0.8em;
	font-weight: 600;
	opacity: 0.7;
}

/* ===== Page de résultat : section des scores plus compacte =====
 * Le thème Academica applique `padding: 60px 0` à TOUTES les balises <section>
 * (sélecteur "section, .section"). Sur les pages de résultat ça produit deux
 * couches de padding cumulées : la section-wrapper et le <section class="scores">
 * du partial. Réductions ciblées des deux côtés. */
#result-scores,
#account-result-scores {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
/* Sections "Autres profils possibles" et "Partagez votre résultat" sur les pages
 * de résultat : leurs paddings 60px se cumulaient avec ceux du <section> interne
 * des partials et créaient ~180px de blanc entre deux blocs. Réduction à 2rem. */
#result-other-profiles,
#account-result-other-profiles,
#result-cta,
#account-result-share {
	padding-top: 2rem;
	padding-bottom: 2rem;
}
section.scores,
section.profiles-overview {
	padding: 0;
	/* Le thème applique `overflow: clip` à toutes les balises <section>, ce qui
	 * coupe les ombres portées des .profile-tile au ras du bord. On rétablit
	 * la visibilité des débordements — les ombres ont alors la place de se
	 * diffuser dans le padding du <section> parent. */
	overflow: visible;
}
/* Page /legal : chaque sous-section ("À propos", "Éditeur", "Données personnelles"…)
 * est une balise <section> imbriquée. Le thème lui applique son `padding: 60px 0`
 * qui se cumule entre sections — d'où ~170px de blanc entre deux blocs de texte.
 * On annule, les marges Bootstrap `mb-5` (48px) suffisent à les espacer. */
#legal-content section {
	padding: 0;
}

/* ===== Bouton CTA principal (style Academica "btn-main") hors hero =====
 * Le thème ne définit `.btn-main` qu'à l'intérieur de `.hero .hero-actions`. Cette
 * règle moins spécifique fournit le même look (pilule verte, arrondi, ombre douce)
 * partout ailleurs : CTA de présentation, CTA de profil, etc. Quand un `.btn-main`
 * se trouve dans le hero, la règle plus spécifique du thème l'emporte naturellement. */
.btn-main {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 14px 32px;
	background: var(--accent-color);
	color: var(--contrast-color);
	border-radius: 50px;
	font-weight: 600;
	font-size: 1rem;
	box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 62%);
	transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	text-decoration: none;
}
.btn-main i {
	font-size: 1.2rem;
	transition: transform 0.3s;
}
.btn-main:hover {
	color: var(--contrast-color);
	transform: translateY(-2px);
	box-shadow: 0 12px 34px color-mix(in srgb, var(--accent-color), transparent 52%);
}
.btn-main:hover i {
	transform: translateX(3px);
}

/* Variante secondaire de .btn-main : même forme (pilule arrondie, padding,
 * typographie, ombre, animation), mais en tonalité grise au lieu du vert d'accent.
 * Pour des actions secondaires qui doivent rester visuellement subordonnées au CTA
 * principal sans perdre le langage de bouton premium (ex. "Recommencer depuis le début"
 * à côté de "Reprendre où j'en étais"). */
.btn-soft {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 14px 32px;
	background: #6c757d;
	color: #ffffff;
	border-radius: 50px;
	font-weight: 600;
	font-size: 1rem;
	box-shadow: 0 8px 28px color-mix(in srgb, #6c757d, transparent 62%);
	transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	text-decoration: none;
	border: none;
}
.btn-soft i {
	font-size: 1.2rem;
	transition: transform 0.3s;
}
.btn-soft:hover {
	background: #5a6268;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 12px 34px color-mix(in srgb, #6c757d, transparent 52%);
}

/* ===== Page de passation : échappatoire discrète sous la question =====
 * Le layout focus n'a ni header ni footer. Ce lien remplace la navigation : il
 * permet de quitter le test à mi-parcours. La passation reste en session, donc
 * revenir à la page de présentation propose automatiquement de reprendre. */
.test-quit {
	margin-top: 3rem;
	text-align: center;
	font-size: 0.92rem;
}
.test-quit-link {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	color: color-mix(in srgb, var(--default-color, #2a2a2a), transparent 40%);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}
.test-quit-link:hover {
	color: var(--accent-color, #2a2a2a);
	border-bottom-style: solid;
}
.test-quit-link i {
	font-size: 1.1rem;
}
.test-quit-hint {
	display: block;
	margin-top: 0.4rem;
	color: color-mix(in srgb, var(--default-color, #2a2a2a), transparent 55%);
	font-size: 0.85rem;
	font-style: italic;
}

/* ===== Pages de résultat : carte CTA "Partagez votre résultat" =====
 * À la fin d'une page de résultat se trouve un CTA (voir le certificat / créer un
 * compte). Précédemment la section était `.section.accent-background` (verte pleine
 * largeur), ce qui la rendait visuellement indistinguable du footer du layout (lui
 * aussi vert pleine largeur) — l'utilisateur avait l'impression d'avoir atteint le
 * pied de page. La carte délimitée règle ce problème : fond teinté accent, coins
 * arrondis, ombre douce, sur fond de page neutre — clairement du contenu de page,
 * clairement séparée du footer. */
.result-cta-card {
	background: color-mix(in srgb, var(--accent-color), white 85%);
	border-radius: 16px;
	padding: 2.5rem 2rem;
	box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color, #000), transparent 92%);
}
.result-cta-card h2 {
	margin-top: 0;
}

/* ===== Page "Mon compte" : encart "Test en cours" =====
 * Boîte arrondie placée au-dessus de la liste des tests passés. Fond teinté avec
 * la couleur d'accent du thème (vert très clair), bordure gauche colorée, ombre
 * douce. Auto-contenue : plus besoin du fond gris pleine-largeur de la section. */
.in-progress-card {
	background: color-mix(in srgb, var(--accent-color), white 90%);
	border-left: 4px solid var(--accent-color);
	border-radius: 12px;
	padding: 1.5rem 1.75rem;
	box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color, #000), transparent 92%);
}
.in-progress-card-title {
	margin: 0 0 0.5rem 0;
	font-size: 1.25rem;
}
.in-progress-card-text {
	margin-bottom: 1rem;
}

/* ===== Page de présentation : reprise / recommencement ===== */
.test-resume-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 2rem;
}
.inline-form { display: inline; margin: 0; }

/* ===== Disclaimer optionnel (tests non validés psychométriquement) ===== */
.test-disclaimer {
	border-left: 3px solid #ccc;
	padding: 0.5rem 0.75rem;
	margin: 1rem 0 2rem;
	color: #666;
	font-style: italic;
}

/* ===== Sections de profil sous forme de cards =====
 * Chaque <section class="profile-section"> d'un template de profil (Description,
 * Forces, Défis, Clés…) est rendu comme une boîte avec ombre et bordure subtile,
 * pour un rendu plus qualitatif que de simples paragraphes empilés. */
.profile-section {
	background: #fff;
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.25rem;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.profile-section:last-child {
	margin-bottom: 0;
}
.profile-section h3 {
	margin-top: 0;
	margin-bottom: 0.75rem;
	color: var(--heading-color, #1a1a1a);
	font-size: 1.15rem;
}
.profile-section ul {
	margin-bottom: 0;
}
.profile-section p:last-child {
	margin-bottom: 0;
}

/* ===== Page de résultat : encart d'influence de l'aile (Ennéagramme) ===== */
.profile-wing {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px dashed #ccc;
}
.profile-wing h3 { margin-top: 0; }

/* Titre rappelant le nom du profil avant chaque description, en cas de co-dominance
   (plusieurs profils principaux co-égaux empilés). Un trait sépare chaque profil. */
.codominant-profile-title {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid #e3e3e3;
	font-size: 1.5rem;
}
.codominant-profile-title:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Espace au-dessus du titre d'une rubrique de tests (à partir de la 2ᵉ), pour la
   détacher des cartes de la catégorie précédente. Homepage + page /test. */
.category-spacer {
	margin-top: 4rem;
}
/* Décalage de défilement pour que l'ancre /test#cat-xxx ne passe pas sous le header. */
.category-anchor {
	scroll-margin-top: 6rem;
}
/* Encart « + N autres tests » affiché en homepage quand une rubrique compte plus de
   3 tests : occupe une case de la grille et renvoie vers l'ancre de la page /test. */
.category-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 180px;
	padding: 2rem;
	text-align: center;
	text-decoration: none;
	color: #555;
	background: #f7faf8;
	border: 2px dashed #cdd5d0;
	border-radius: 0.5rem;
	transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.category-more:hover {
	border-color: var(--accent-color, #198754);
	background: #eef5f0;
	color: #333;
}
.category-more i {
	font-size: 1.9rem;
	margin-bottom: 0.6rem;
	color: var(--accent-color, #198754);
}
.category-more p {
	margin: 0 0 0.9rem;
}

/* ===== Page de résultat : encart "Nuance" (profil secondaire) ===== */
.profile-secondary {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	background: #f5f6f8;
	border-left: 4px solid var(--accent-color, #198754);
	border-radius: 0 4px 4px 0;
}
.profile-secondary h3 { margin-top: 0; }
.profile-secondary p:last-child { margin-bottom: 0; }

/* ===== Tuiles de profils (partial profiles-list.tpl) =====
 * Inspirées de la section "Course Categories" d'Academica Pro : icône colorée
 * à gauche, contenu au centre, flèche qui apparaît au hover à droite. */
.profile-tile {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-radius: 16px;
	background: var(--surface-color, #fff);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	overflow: hidden;
}
.profile-tile::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--accent-color, #198754);
	border-radius: 16px 0 0 16px;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.profile-tile:hover,
.profile-tile:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
	text-decoration: none;
	color: inherit;
}
.profile-tile:hover::before,
.profile-tile:focus-visible::before {
	opacity: 1;
}
.profile-tile .tile-icon {
	width: 56px;
	height: 56px;
	min-width: 56px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--accent-color, #198754), color-mix(in srgb, var(--accent-color, #198754), #000 25%));
	transition: transform 0.3s ease;
}
.profile-tile:hover .tile-icon {
	transform: scale(1.08);
}
.profile-tile .tile-icon i {
	font-size: 1.5rem;
	color: #fff;
}
.profile-tile .tile-body {
	flex: 1;
	min-width: 0;
}
.profile-tile .tile-body h5 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
	color: var(--heading-color);
	line-height: 1.3;
}
.profile-tile .tile-body p {
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--default-color, #2a2a2a), transparent 30%);
	margin: 0;
	line-height: 1.4;
}
.profile-tile .tile-arrow {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.05);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.profile-tile:hover .tile-arrow {
	opacity: 1;
	transform: translateX(0);
}
.profile-tile .tile-arrow i {
	font-size: 1rem;
	color: var(--heading-color);
}
/* Annotation "(rouge)" / "(jaune)" / etc. à côté du nom du profil sur DISC. */
.profile-tile-color {
	font-weight: 400;
	font-size: 0.85em;
	color: color-mix(in srgb, var(--default-color, #2a2a2a), transparent 35%);
	margin-left: 0.3em;
}

/* DISC : chaque tuile prend la couleur de son type (--disc-color est défini par
 * les classes .disc-color-D / -I / -S / -C). Fond teinté très clair, barre
 * latérale colorée toujours visible, icône au dégradé du type. */
.profile-tile.disc-color-D,
.profile-tile.disc-color-I,
.profile-tile.disc-color-S,
.profile-tile.disc-color-C {
	background: color-mix(in srgb, var(--disc-color), white 90%);
	border-left: 4px solid var(--disc-color);
}
.profile-tile.disc-color-D::before,
.profile-tile.disc-color-I::before,
.profile-tile.disc-color-S::before,
.profile-tile.disc-color-C::before {
	background: var(--disc-color);
	opacity: 1; /* la barre latérale reste visible en permanence sur DISC */
}
.profile-tile.disc-color-D .tile-icon,
.profile-tile.disc-color-I .tile-icon,
.profile-tile.disc-color-S .tile-icon,
.profile-tile.disc-color-C .tile-icon {
	background: linear-gradient(135deg, var(--disc-color), color-mix(in srgb, var(--disc-color), #000 22%));
}
.profile-tile.disc-color-D:hover,
.profile-tile.disc-color-I:hover,
.profile-tile.disc-color-S:hover,
.profile-tile.disc-color-C:hover {
	background: color-mix(in srgb, var(--disc-color), white 85%);
}

/* ===== Liste des résultats sur /compte/ =====
 * Layout en flex : titre + date à gauche, lien "Effacer" à droite ; la rangée
 * des actions de partage (certificat, LinkedIn) coule sur toute la largeur en-dessous. */
.result-list-item {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	padding: 1rem 0;
	border-bottom: 1px solid #e3e3e3;
}
.result-list-item:last-child {
	border-bottom: none;
}
.result-list-item .result-main {
	flex: 1 1 auto;
	min-width: 0; /* permet à un titre long de wrapper plutôt que pousser le bouton effacer */
}
.result-list-item .result-delete {
	flex: 0 0 auto;
	margin-left: 1rem;
}
.result-list-item .result-extras {
	flex: 0 0 100%;
}
/* Lien "Effacer" : visuellement discret (texte gris), virant au rouge au hover —
 * action destructive donc on signale clairement le risque sur survol. */
.btn-delete-link {
	background: none;
	border: none;
	padding: 0;
	color: #888;
	cursor: pointer;
	font-size: 0.9em;
	text-decoration: none;
}
.btn-delete-link:hover,
.btn-delete-link:focus {
	color: #c0392b;
	text-decoration: underline;
}

/* ===== DISC : codes couleur des 4 types (Marston / convention moderne) ===== */
.disc-color-D { --disc-color: #e74c3c; }
.disc-color-I { --disc-color: #f39c12; }
.disc-color-S { --disc-color: #27ae60; }
.disc-color-C { --disc-color: #2980b9; }

.disc-result-title {
	border-left: 6px solid var(--disc-color);
	padding-left: 1rem;
}
.disc-color-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.9rem;
	border: 2px solid var(--disc-color);
	border-radius: 1.5rem;
	margin: 0.25rem 0 1rem;
	color: var(--disc-color);
	font-weight: bold;
}
.disc-color-swatch {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--disc-color);
}
/* Barres de score DISC : chaque ligne porte sa couleur via --disc-color sur l'élément <li>. */
.score-bars--disc .score-fill {
	background: var(--disc-color, var(--accent-color, #198754));
}

/* ===== Page de passation ===== */
.test-progress { font-size: 0.875rem; margin: 0 0 0.25rem; }
.test-progress-bar { width: 100%; height: 6px; }
.question-text {
	font-size: 1.25rem;
	margin: 2rem 0;
	text-align: center;
}

/* Icône "?" et panneau de clarification optionnel sur une question.
 * Visible uniquement quand le champ 'hint' est défini sur l'item. */
.question-hint-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	margin-left: 0.4em;
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 50%;
	background: #fff;
	color: #666;
	font: inherit;
	font-size: 0.85rem;
	font-weight: bold;
	line-height: 1;
	cursor: pointer;
	vertical-align: middle;
}
.question-hint-toggle:hover,
.question-hint-toggle:focus-visible {
	border-color: var(--accent-color, #198754);
	color: var(--accent-color, #198754);
}
.question-hint {
	max-width: 36rem;
	margin: 0.5rem auto 1.5rem;
	padding: 0.75rem 1rem;
	background: #f5f6f8;
	border-left: 3px solid var(--accent-color, #198754);
	border-radius: 0 4px 4px 0;
	color: #555;
	font-size: 0.95rem;
	font-style: italic;
}

/* Barre de progression du délai d'attente avant déblocage des boutons Likert. */
.delay-progress {
	width: 100%;
	height: 4px;
	background: #eee;
	border-radius: 2px;
	margin: 1.5rem 0 2rem;
	overflow: hidden;
}
.delay-progress-bar {
	width: 0;
	height: 100%;
	background: var(--accent-color, #198754);
}
.delay-progress.active .delay-progress-bar {
	width: 100%;
	transition: width var(--delay) linear;
}

/* Échelle Likert : 5 boutons en ligne sur desktop, en colonne sur mobile. */
.likert-scale {
	border: 0; padding: 0; margin: 0 0 2rem;
	display: grid; gap: 0.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 600px) {
	.likert-scale { grid-template-columns: repeat(5, 1fr); }
}
._likert-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.75rem 0.5rem;
	min-height: 4rem;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 0.25rem;
	cursor: pointer;
	font: inherit;
	font-size: 0.9rem;
	text-align: center;
	transition: border-color 0.2s, background 0.2s, transform 0.1s;
}
._likert-btn:not(.is-locked):hover {
	border-color: var(--accent-color, #198754);
	background: #f7faf8;
}
._likert-btn:not(.is-locked):active {
	transform: translateY(1px);
}
/* Verrou pendant le délai d'attente. On évite l'attribut natif `disabled` : iOS
   WebKit ne réévalue pas son état de rendu/hit-test quand on le retire par JS hors
   geste utilisateur (le bouton reste grisé et non cliquable). Un verrou par classe
   + pointer-events est, lui, recalculé correctement au retrait de la classe. */
._likert-btn.is-locked {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap;
}

/* ===== Scores ===== */
/* Le UL définit la grille avec une colonne label en max-content (largeur du plus
 * long label), une colonne barre extensible, et une colonne valeur en auto. Chaque
 * LI réutilise ces colonnes via subgrid pour rester aligné verticalement avec les
 * autres lignes — quel que soit la longueur du nom du type. */
.scores { margin: 1.5rem 0; }
.score-bars {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: max-content 1fr auto;
	column-gap: 0.75rem;
	row-gap: 0.35rem;
}
.score-bars li {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
	align-items: center;
}
.score-bar {
	background: #c9cdd4;
	height: 14px;
	border-radius: 7px;
	overflow: hidden;
	min-width: 4em;
}
.score-fill {
	height: 100%;
	background: var(--accent-color, #198754);
}
.score-value { text-align: right; font-variant-numeric: tabular-nums; }
/* Force chaque label de score sur une seule ligne pour que la colonne max-content du
 * grid dimensionne correctement la première colonne au plus long nom. */
.score-label,
.pole-label,
.axis-label {
	white-space: nowrap;
}
.score-axes { list-style: none; padding: 0; }
.score-axes > li {
	display: grid;
	grid-template-columns: max-content 1fr auto;
	column-gap: 0.75rem;
	row-gap: 0.35rem;
	margin-bottom: 1.25rem;
}
.axis-label {
	grid-column: 1 / -1;
	font-weight: bold;
}
.pole-row {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
	align-items: center;
}

/* ===== Certificat ===== */
.certificate-page {
	border: 2px solid var(--accent-color, #198754);
	border-radius: 8px;
	padding: 2rem;
	margin: 0;
	background: #fff;
}
#certificate-page {
	padding-top: 0;
}
.certificate-header {
	text-align: center;
	border-bottom: 1px solid #eee;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}
section.certificate-body {
	padding: 0;
}
.cert-issuer {
	color: var(--accent-color, #198754);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0;
}
.cert-meta dt { font-weight: bold; margin-top: 0.5rem; }
.cert-meta dd { margin-left: 1rem; }
.certificate-actions { margin-top: 1.5rem; text-align: center; }
.certificate-footer {
	margin-top: 1.5rem;
	text-align: center;
	color: #888;
}
.certificate-footer a { color: inherit; }

/* Certificat : page-title allégé (pas de fil d'Ariane, juste l'émetteur + h1 — pas
 * besoin de 80px+80px de padding cumulés du thème par défaut). */
.page-title.cert-title {
	padding-top: 1rem;
}
.page-title.cert-title .heading {
	padding: 1.5rem 0;
}

/* Ligne "Test réalisé : XXX" en tête du corps du certificat. */
.cert-test {
	margin-bottom: 0.5rem;
}

/* Sur le certificat, les <section class="profile-section"> ne sont pas affichées
 * comme des cards : elles s'enchaînent en flux éditorial, séparées par un trait
 * horizontal — rendu plus proche d'un document classique, mieux adapté au format
 * "certificat à imprimer ou à partager". La même règle de séparateur s'applique
 * à la section .profile-wing pour rester cohérent. */
.certificate-page .profile-section {
	background: transparent;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.certificate-page .profile-content > section + section {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	padding-top: 1.5rem;
	margin-top: 1.5rem;
}

/* ===== Affichage Ikigai (vue venn4) ===== */
/* Espace entre les deux groupes de barres (cercles puis zones). */
.ikigai-group-title {
	margin-top: 2.5rem;
}
/* Encart mis en avant : score d'ikigai + explication. */
.ikigai-score-box {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-top: 2.5rem;
	padding: 1.25rem 1.5rem;
	background: #eef5f0;
	border-left: 5px solid var(--accent-color, #198754);
	border-radius: 0 0.5rem 0.5rem 0;
}
.ikigai-score-value {
	flex: 0 0 auto;
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--accent-color, #198754);
}
.ikigai-score-text h3 { margin: 0 0 0.4rem; }
.ikigai-score-text p:last-child { margin-bottom: 0; }
/* Encart mis en avant : pièce manquante (ton ambré « à renforcer »). */
.ikigai-missing-box {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	background: #fdf6ec;
	border-left: 4px solid #d99a3a;
	border-radius: 0 0.5rem 0.5rem 0;
}
.ikigai-missing-box h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.ikigai-missing-box p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
	.ikigai-score-box { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}
/* Diagramme SVG à 4 cercles (desktop) ; repli en barres (mobile). */
.ikigai-diagram { display: none; }
.ikigai-svg { width: 100%; max-width: 680px; height: auto; display: block; margin: 0.5rem auto 0; }
/* Tailles de police en unités SVG (attribut font-size dans le markup) pour qu'elles
   suivent l'échelle du diagramme ; ici uniquement graisse et couleur. */
.ikigai-svg-label text { font-weight: 600; }
.ikigai-svg-pct { font-weight: 800; }
.ikigai-svg-center { font-weight: 700; }
.ikigai-svg-center-pct { font-weight: 800; fill: var(--accent-color, #198754); }
@media (min-width: 600px) {
	.ikigai-diagram { display: block; }
	.ikigai-circle-bars { display: none; }
}

/* ===== Affichage quadrant (plan 2D : attachement, orientation régulatrice…) ===== */
.quadrant-diagram { display: none; }
.quadrant-svg { width: 100%; max-width: 460px; height: auto; display: block; margin: 0.5rem auto 0; }
.quadrant-cell text { font-size: 15px; font-weight: 700; }
.quadrant-axis text { font-size: 11px; }
.quadrant-axis-label { font-size: 13px; font-weight: 600; fill: #6b7280; }
.quadrant-marker text { font-size: 12px; font-weight: 700; }
/* Valeurs chiffrées toujours visibles ; centrées sous le plan sur desktop. */
.quadrant-values { margin-top: 1rem; max-width: 460px; margin-left: auto; margin-right: auto; }
@media (min-width: 600px) {
	.quadrant-diagram { display: block; }
}

/* ===== Affichage radar (tests dimensionnels : RIASEC, Big Five, HEXACO…) ===== */
.radar-diagram { display: none; }
.radar-svg { width: 100%; max-width: 620px; height: auto; display: block; margin: 0.5rem auto 0; }
.radar-grid { fill: none; stroke: #e2e6ea; }
.radar-spoke { stroke: #e8ebee; }
.radar-area { fill: rgba(25, 135, 84, 0.18); stroke: var(--accent-color, #198754); stroke-width: 2; }
.radar-dot { fill: var(--accent-color, #198754); }
/* Tailles de police en unités SVG (attribut font-size) pour suivre l'échelle du radar ;
   ici uniquement graisse et couleur. */
.radar-label { font-weight: 600; fill: #444; }
.radar-pct { font-weight: 800; fill: var(--accent-color, #198754); }
@media (min-width: 600px) {
	.radar-diagram { display: block; }
	.radar-bars { display: none; }
}

/* ===== Roue DISC ===== */
.disc-wheel-diagram { display: none; }
.disc-wheel-svg { width: 100%; max-width: 480px; height: auto; display: block; margin: 0.5rem auto 0; }
.disc-wheel-ring { fill: none; stroke: #e8ebee; }
.disc-wheel-label { font-weight: 700; }
.disc-wheel-pct { font-weight: 800; }
@media (min-width: 600px) {
	.disc-wheel-diagram { display: block; }
	.disc-wheel-bars { display: none; }
}

/* ===== Cercle Ennéagramme ===== */
.enneagram-diagram { display: none; }
.enneagram-svg { width: 100%; max-width: 820px; height: auto; display: block; margin: 0.5rem auto 0; }
.ennea-ring { fill: none; stroke: #d7dbe0; }
.ennea-line { fill: none; stroke: #c8cdd3; stroke-width: 1; }
.ennea-dot { fill: var(--accent-color, #198754); }
.ennea-label { font-weight: 800; fill: #333; }
.ennea-pct { font-weight: 600; fill: #198754; }
@media (min-width: 600px) {
	.enneagram-diagram { display: block; }
	.enneagram-bars { display: none; }
}

/* ===== Affichage « deux triades » (Triade sombre & lumineuse) ===== */
/* Couleurs : lumière = vert d'accent ; ombre = ardoise/violet sobre (pas de rouge
   agressif — ce ne sont pas des « mauvais » scores, juste l'autre versant). */
.two-triads .triad-title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 1.5rem 0 0.6rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.two-triads .triad-title::before {
	content: "";
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	display: inline-block;
}
.triad-title--light::before { background: var(--accent-color, #198754); }
.triad-title--dark::before  { background: #6b5b95; }
.triad-bars--light .score-fill { background: var(--accent-color, #198754); }
.triad-bars--dark .score-fill  { background: #6b5b95; }

/* Curseur d'équilibre : piste dégradée ombre (gauche) → lumière (droite). */
.balance-gauge { max-width: 540px; margin: 0.5rem auto 0.5rem; }
.balance-poles {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	font-size: 0.9rem;
	margin-bottom: 0.35rem;
}
.balance-pole--dark  { color: #6b5b95; }
.balance-pole--light { color: var(--accent-color, #198754); }
.balance-track {
	position: relative;
	height: 12px;
	border-radius: 7px;
	background: linear-gradient(to right, #6b5b95, #c9cdd4 50%, var(--accent-color, #198754));
}
.balance-mid {
	position: absolute;
	left: 50%;
	top: -3px;
	bottom: -3px;
	width: 2px;
	background: #fff;
	transform: translateX(-50%);
}
.balance-marker {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #333;
	transform: translate(-50%, -50%);
}

/* ===== Légende explicative des critères (sous le graphique de résultat) ===== */
.criteria-legend {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid #e6e9ed;
}
.criteria-legend h2 { font-size: 1.15rem; margin-bottom: 0.75rem; }
.legend-subtitle { font-size: 1rem; font-weight: 700; margin: 1.25rem 0 0.5rem; }
.legend-list { margin: 0; }
.legend-list dt { font-weight: 700; }
.legend-list dd { margin: 0 0 0.6rem; color: #555; }
@media (min-width: 700px) {
	.legend-list {
		display: grid;
		grid-template-columns: max-content 1fr;
		column-gap: 1.25rem;
		row-gap: 0.45rem;
		align-items: baseline;
	}
	.legend-list dt { white-space: nowrap; }
	.legend-list dd { margin-bottom: 0; }
}

/* ===== Affichage facettes (Big Five 120) : dimension + 6 sous-barres ===== */
.facet-group { margin-bottom: 1.75rem; }
.facet-group:last-child { margin-bottom: 0; }
.facet-dimension .score-label { font-weight: 700; font-size: 1.05rem; }
.facet-item .score-label { padding-left: 1.5rem; font-size: 0.9rem; color: #555; }
.facet-item .score-fill { opacity: 0.6; }

/* ===== Bandeau d'installation PWA =====
 * Masqué par défaut. Le JS ajoute .pwa-banner--show quand beforeinstallprompt est capté,
 * mais l'affichage effectif est réservé aux écrans tactiles (téléphone/tablette) : sur
 * desktop, l'icône d'installation de la barre d'adresse suffit. */
.pwa-banner { display: none; }
.pwa-banner--show { display: none; }
@media (hover: none) and (pointer: coarse) {
	.pwa-banner--show {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.75rem;
		margin: 1.25rem 0;
		padding: 0.85rem 1.1rem;
		background: color-mix(in srgb, var(--accent-color, #198754), #fff 90%);
		border: 1px solid color-mix(in srgb, var(--accent-color, #198754), #fff 65%);
		border-radius: 0.7rem;
	}
}
.pwa-banner__icon { color: var(--accent-color, #198754); font-size: 1.4rem; line-height: 1; }
.pwa-banner__text { flex: 1 1 12rem; margin: 0; color: #2a2a2a; font-weight: 700; }
/* .btn-main est pensé pour des <a> : sur un <button> natif il reste la bordure et le
   fond par défaut du navigateur. On réinitialise ce chrome natif. */
.pwa-banner__btn {
	white-space: nowrap;
	border: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}