/* ==========================================================
FITZUNIVERSE — MON PROFIL (profile.html)
Repose sur css/base.css + dashboard.css : cette page partage
désormais la même coquille (sidebar/topbar) que le reste du
parcours authentifié — elle vivait avant sur son propre thème clair
dupliqué (auth.css), ce qui créait une rupture visuelle en pleine
navigation. dashboard.css fournit les tokens de coquille, la sidebar
et le topbar ; ce fichier ne contient plus que ce qui est réellement
propre au profil (nav de sections, formulaire, champs, chips…).

CE COMMENTAIRE SE FERMAIT TOUT SEUL (corrigé 2026-08-22), comme celui
de css/ai-suite.css : il abrégeait le préfixe des tokens de coquille
en le terminant par une étoile, immédiatement suivie de la barre
oblique du mot suivant. Les commentaires CSS ne s'imbriquent pas — la
première étoile-barre rencontrée ferme le bloc. Les trois lignes
suivantes se retrouvaient analysées comme du CSS et la règle placée
juste après était avalée par la récupération d'erreur.
Ne jamais faire figurer cette séquence dans un commentaire.
========================================================== */

/* ==========================================================
MISE EN PAGE DU PROFIL — nav collante + colonne formulaire
========================================================== */

.topbar-title p{

color:var(--text-light);

font-size:var(--fs-meta);

}

.profile-layout{

display:grid;

grid-template-columns:240px 1fr;

gap:32px;

align-items:start;

}

.profile-nav{

position:sticky;

top:calc(var(--topbar-height) + 24px);

display:flex;

flex-direction:column;

gap:2px;

padding:14px;

border-radius:var(--radius-lg);

/* Seule surface "verre" de la page — panneau flottant sticky,
donc justifie le glassmorphism ; les .profile-section répétées
plus bas restent en carte plate (règle "avec parcimonie" du
Design System 2.0). */
background:var(--glass);

border:1px solid var(--glass-border);

backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);

box-shadow:var(--shadow-xs);

}

.profile-nav-score{

display:flex;

align-items:center;

gap:12px;

padding:10px 8px 10px;

}

.profile-nav-score-ring{

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

width:44px;

height:44px;

border-radius:50%;

background:var(--gradient-primary);

color:#fff;

font-family:var(--font-display);

font-weight:800;

font-size:.85rem;

}

.profile-nav-score-label{

font-size:.76rem;

color:var(--text-light);

line-height:1.4;

}

.profile-nav-score-hint{

font-size:.72rem;

line-height:1.5;

color:var(--text-muted);

padding:0 8px 14px;

margin-bottom:8px;

border-bottom:1px solid var(--border-color);

}

.profile-nav-score-hint a{

font-weight:700;

/* Corrigé le 2026-08-23. Le commentaire d'origine justifiait
--accent-100 par un « panneau verre sombre » : ce panneau est
clair depuis longtemps — mesuré rgba(255,255,255,.72). Sur ce
fond-là, ce lavande très pâle tombait à 1,18:1. Le lien était
invisible, et rien ne le signalait puisque le raisonnement écrit
juste au-dessus paraissait solide.

--amber-700 est la valeur de l'échelle prévue pour du texte :
5,8:1 sur blanc, et c'est désormais la couleur des liens de tout
l'espace. */
color:var(--amber-700);

text-decoration:underline;

}

.section-nav-item{

display:flex;

align-items:center;

gap:10px;

padding:10px 10px;

border-radius:var(--radius-md);

color:var(--text-light);

font-weight:600;

font-size:.86rem;

transition:var(--transition);

cursor:pointer;

}

.section-nav-item:hover{

background:var(--background-alt);

color:var(--text-color);

}

.section-nav-item.is-active{

/* Ambre plutôt que bleu : dans l'espace étudiant, l'ambre est
désormais la couleur de ce qui est actif ou cliquable (voir la
section 11 de css/app-shell.css). */
background:rgba(233,163,25,.20);

/* Encre et non blanc. L'ancien fond était un bleu à 22 % — assez
sombre pour porter du blanc. Le lavis ambre, lui, est CLAIR :
mesuré au pixel, du blanc dessus tombe à 1,17:1. C'est le piège
d'un changement de teinte à opacité égale — la lisibilité ne suit
pas la couleur. */
color:var(--text-color);

font-weight:700;

}

.section-nav-item-check{

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

width:20px;

height:20px;

border-radius:50%;

border:1.5px solid var(--border-color);

color:transparent;

font-size:.7rem;

transition:var(--transition);

}

.section-nav-item-check i,
.section-nav-item-check svg{

width:12px;

height:12px;

}

.section-nav-item.is-complete .section-nav-item-check{

background:var(--success);

border-color:var(--success);

color:#fff;

}

/* ==========================================================
SECTIONS DU FORMULAIRE
========================================================== */

.profile-form{

display:flex;

flex-direction:column;

gap:24px;

}

.profile-section{

scroll-margin-top:calc(var(--topbar-height) + 20px);

padding:28px 30px;

border-radius:var(--radius-lg);

background:var(--background);

border:1px solid var(--border-color);

box-shadow:var(--shadow-xs);

}

.profile-section-heading{

display:flex;

align-items:flex-start;

gap:14px;

margin-bottom:22px;

}

/* Pastille supprimée le 2026-08-22 — règle « Icônes » de
DESIGN_SYSTEM.md : aucun conteneur derrière une icône. L'icône
porte elle-même la couleur, et cette couleur signifie quelque
chose. Le fond, la taille fixe et le rayon ont été retirés ;
la mise en page (flex, marges) reste. */
.profile-section-icon i,
.profile-section-icon svg{ width:22px; height:22px; }

.profile-section-heading h2{

font-size:1.1rem;

font-weight:800;

color:var(--text-color);

margin-bottom:4px;

}

.field-hint{

display:flex;

align-items:flex-start;

gap:6px;

color:var(--text-light);

font-size:.84rem;

line-height:1.55;

}

.field-hint i,
.field-hint svg{

flex-shrink:0;

width:14px;

height:14px;

margin-top:2px;

color:var(--accent-color);

}

.field-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:18px 20px;

}

.field-grid.cols-3{

grid-template-columns:repeat(auto-fit,minmax(160px,1fr));

}

.field-full{

grid-column:1 / -1;

}

/* Le champ .input-wrap/.input-group vivait dans auth.css, partagé
avec login/signup — profile.html ne charge plus auth.css depuis la
migration vers la coquille sombre de dashboard.css (voir en-tête de
fichier), donc la recette du champ de base vit ici désormais, avec
les compléments select/textarea qui n'existaient pas sur les pages
de connexion. */

.input-group{

margin-bottom:20px;

}

.input-group label{

display:block;

margin-bottom:8px;

font-weight:600;

font-size:.86rem;

color:var(--text-color);

}

.input-wrap{

position:relative;

display:flex;

align-items:center;

}

.input-wrap input{

width:100%;

padding:14px 16px;

border:1.5px solid var(--border-color);

border-radius:var(--radius-md);

font-family:inherit;   /* était "Inter" en dur (corrigé le 2026-08-23) */

font-size:.96rem;

color:var(--text-color);

background:var(--background);

transition:border-color .25s var(--ease-premium), box-shadow .25s var(--ease-premium);

}

.input-wrap input:focus{

outline:none;

border-color:var(--primary-color);

box-shadow:0 0 0 4px rgba(233,163,25,.22);

}

.input-wrap input::placeholder{

color:var(--text-muted);

}

.input-wrap select,
.input-wrap textarea{

width:100%;

padding:14px 16px;

border:1.5px solid var(--border-color);

border-radius:var(--radius-md);

font-family:inherit;   /* était "Inter" en dur (corrigé le 2026-08-23) */

font-size:.94rem;

color:var(--text-color);

background:var(--background);

transition:border-color .25s var(--ease-premium), box-shadow .25s var(--ease-premium);

}

.input-wrap textarea{

resize:vertical;

min-height:88px;

line-height:1.55;

}

.input-wrap select:focus,
.input-wrap textarea:focus{

outline:none;

border-color:var(--primary-color);

box-shadow:0 0 0 4px rgba(233,163,25,.22);

}

.input-wrap input[readonly]{

background:var(--background-soft);

color:var(--text-light);

cursor:not-allowed;

}

/* ==========================================================
BLOCS CONDITIONNELS (nouveau bachelier / étudiant en cours)
========================================================== */

.status-toggle{

display:flex;

gap:10px;

margin-bottom:20px;

flex-wrap:wrap;

}

.status-toggle-option{

flex:1;

min-width:180px;

display:flex;

align-items:center;

gap:10px;

padding:14px 16px;

border-radius:var(--radius-md);

border:1.5px solid var(--border-color);

cursor:pointer;

transition:var(--transition);

}

.status-toggle-option:hover{

border-color:var(--primary-color);

}

.status-toggle-option.is-selected{

border-color:var(--primary-color);

background:var(--background-light);

}

.status-toggle-option input{

accent-color:var(--primary-color);

width:16px;

height:16px;

}

.status-toggle-option span{

font-weight:600;

font-size:.88rem;

color:var(--text-color);

}

.conditional-fields{

padding-top:4px;

}

.conditional-fields[hidden]{

display:none;

}

/* ==========================================================
CHIPS (langues autres, pays, continents...)
========================================================== */

.chip-select{

display:flex;

flex-wrap:wrap;

gap:8px;

}

.chip{

display:inline-flex;

align-items:center;

gap:6px;

padding:8px 16px;

border-radius:var(--radius-full);

border:1.5px solid var(--border-color);

background:var(--background);

color:var(--text-light);

font-weight:600;

font-size:.84rem;

cursor:pointer;

transition:var(--transition);

}

.chip:hover{

border-color:var(--primary-color);

color:var(--primary-color);

}

.chip[aria-pressed="true"]{

border-color:var(--primary-color);

background:var(--gradient-primary);

color:#fff;

}

/* ==========================================================
LANGUES — sélecteur CECRL segmenté
========================================================== */

.language-row{

display:flex;

align-items:center;

justify-content:space-between;

gap:16px;

padding:14px 0;

border-bottom:1px solid var(--border-color);

flex-wrap:wrap;

}

.language-row:last-child{

border-bottom:none;

}

.language-row-label{

font-weight:700;

font-size:.9rem;

color:var(--text-color);

min-width:110px;

}

.cecrl-picker{

display:inline-flex;

border-radius:var(--radius-full);

border:1.5px solid var(--border-color);

overflow:hidden;

}

.cecrl-picker button{

padding:8px 13px;

border:none;

background:var(--background);

color:var(--text-light);

font-weight:700;

font-size:.78rem;

cursor:pointer;

border-right:1px solid var(--border-color);

transition:var(--transition);

}

.cecrl-picker button:last-child{

border-right:none;

}

.cecrl-picker button:hover{

color:var(--primary-color);

}

.cecrl-picker button[aria-pressed="true"]{

background:var(--gradient-primary);

color:#fff;

}

.language-other-row{

display:flex;

gap:10px;

align-items:center;

padding-top:14px;

flex-wrap:wrap;

}

.language-other-row input[type="text"]{

flex:1;

min-width:160px;

padding:10px 14px;

border:1.5px solid var(--border-color);

border-radius:var(--radius-md);

font-family:inherit;   /* était "Inter" en dur (corrigé le 2026-08-23) */

font-size:.88rem;

color:var(--text-color);

}

/* ==========================================================
DOCUMENTS DISPONIBLES — cases à cocher en cartes
========================================================== */

.doc-check-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(160px,1fr));

gap:12px;

}

.doc-check-card{

display:flex;

align-items:center;

gap:10px;

padding:14px 16px;

border-radius:var(--radius-md);

border:1.5px solid var(--border-color);

cursor:pointer;

transition:var(--transition);

}

.doc-check-card:hover{

border-color:var(--primary-color);

}

.doc-check-card.is-checked{

border-color:var(--primary-color);

background:var(--background-light);

}

.doc-check-card input{

accent-color:var(--primary-color);

width:16px;

height:16px;

flex-shrink:0;

}

.doc-check-card i,
.doc-check-card svg{

flex-shrink:0;

width:18px;

height:18px;

color:var(--primary-color);

}

.doc-check-card span{

font-weight:600;

font-size:.86rem;

color:var(--text-color);

}

/* ==========================================================
CASES SIMPLES (financement, préférences)
========================================================== */

.checkbox-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:10px 20px;

}

.checkbox-row{

display:flex;

align-items:center;

gap:10px;

font-size:.88rem;

color:var(--text-color);

font-weight:600;

cursor:pointer;

}

.checkbox-row input{

accent-color:var(--primary-color);

width:16px;

height:16px;

}

/* Les anciens .radio-row (rond du système) sont devenus des .fitz-choice
(css/base.css) — lot FINITIONS-VISUELLES, 2026-09-11. */

/* ==========================================================
ENREGISTREMENT FINAL — dans le flux, tout en bas
==========================================================
Lot FINITIONS-VISUELLES (2026-09-11). L'ancienne .profile-save-bar
était collante (sticky, bottom:20px) sur un fond sombre flouté : elle
flottait sur les champs pendant toute la saisie. Ce bloc vit à la fin
du formulaire, comme un dernier paragraphe : rien ne recouvre jamais
un champ, et le backdrop-filter (famille des défauts WebKit du lot
DEUX-MOTEURS) a disparu avec elle. */

.profile-save-final{

display:flex;

flex-direction:column;

align-items:flex-start;

gap:14px;

padding:22px 24px;

margin-top:4px;

border-radius:var(--radius-lg);

background:var(--background-soft);

border:1px solid var(--border-color);

}

.profile-save-note{

margin:0;

color:var(--text-light);

font-size:.84rem;

line-height:1.55;

}

.btn-profile-save{

position:relative;

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 28px;

border:none;

border-radius:var(--radius-md);

background:var(--gradient-primary);

color:#fff;

font-family:inherit;   /* était "Inter" en dur (corrigé le 2026-08-23) */

font-weight:700;

font-size:.94rem;

cursor:pointer;

transition:transform .25s var(--ease-premium), box-shadow .25s var(--ease-premium);

white-space:nowrap;

}

.btn-profile-save:hover{

transform:translateY(-2px);

box-shadow:var(--shadow-md);

}

.btn-profile-save:disabled{

opacity:.65;

cursor:not-allowed;

transform:none;

box-shadow:none;

}

.btn-loading::after{

content:"";

width:16px;

height:16px;

border:3px solid rgba(255,255,255,.4);

border-top:3px solid #fff;

border-radius:50%;

animation:profileBtnSpin .7s linear infinite;

}

@keyframes profileBtnSpin{

100%{ transform:rotate(360deg); }

}

.save-toast{

position:fixed;

bottom:24px;

right:24px;

z-index:200;

display:flex;

align-items:center;

gap:10px;

padding:14px 20px;

border-radius:var(--radius-md);

background:#211D18;

color:#fff;

font-size:.86rem;

font-weight:600;

box-shadow:var(--shadow-lg);

opacity:0;

transform:translateY(10px);

pointer-events:none;

transition:opacity .3s var(--ease-premium), transform .3s var(--ease-premium);

}

.save-toast.is-visible{

opacity:1;

transform:translateY(0);

pointer-events:auto;

}

.save-toast i,
.save-toast svg{

width:16px;

height:16px;

color:var(--success);

}

/* ==========================================================
RESPONSIVE — TABLETTE (768–1023px)
========================================================== */

@media(max-width:1023px){

.profile-layout{

grid-template-columns:1fr;

}

.profile-nav{

position:static;

flex-direction:row;

overflow-x:auto;

gap:6px;

}

.profile-nav-score,
.profile-nav-score-hint{

display:none;

}

.section-nav-item{

flex-shrink:0;

}

}

/* ==========================================================
RESPONSIVE — MOBILE (< 768px)
========================================================== */

@media(max-width:767px){

.content{

padding:24px 18px 100px;

}

.profile-section{

padding:22px 18px;

}

.profile-save-final{

align-items:stretch;

}

.btn-profile-save{

justify-content:center;

}

}

/* ==========================================================
ETAT DE CHARGEMENT (SKELETON)
==========================================================
Classe CSS prête à l'emploi pour le score de complétion
(#navScoreValue / .profile-nav-score-ring) pendant le chargement
du profil depuis Firestore. Pas encore branchée côté profile.js
(hors périmètre de cette passe couleurs) : à appliquer/retirer via
classList quand le profil est chargé. */

/* ==========================================================
TÉLÉPHONE INTERNATIONAL (2026-08-23)
==========================================================
Le sélecteur de pays et le numéro national forment UNE seule ligne
visuelle : deux champs collés, séparés par un simple filet, avec un
liseré de focus qui entoure l'ensemble. C'est un numéro, pas deux
informations — l'interface doit le dire.

La colonne du sélecteur est fixée à 168px plutôt que dimensionnée
sur son contenu : sans cela, elle change de largeur à chaque
sélection (« Mali » puis « République démocratique du Congo ») et
le champ du numéro sautille sous le curseur.

Voir js/phone-international.js pour ce qui est enregistré, et
js/phone-field.js pour le montage.
========================================================== */

/* .input-wrap est en display:flex avec align-items:center — le message
d'erreur ajouté à l'intérieur s'y plaçait donc À CÔTÉ du champ, sur
la même ligne, et poussait le numéro hors de sa colonne (constaté à
l'écran, pas en lisant le code). L'enveloppe qui contient un champ
téléphone passe en colonne : la rangée d'abord, le message dessous. */

.input-wrap:has(.tel-rangee){

flex-direction:column;

align-items:stretch;

}

.tel-rangee{

display:flex;

align-items:stretch;

width:100%;

border:1.5px solid var(--border-color);

border-radius:var(--radius-md);

background:var(--background);

transition:border-color .25s var(--ease-premium), box-shadow .25s var(--ease-premium);

overflow:hidden;

}

/* Le focus est porté par l'ENVELOPPE, pas par chacun des deux champs :
un liseré autour du seul sélecteur, alors que le curseur clignote
dans le champ voisin, désigne le mauvais élément. */
.tel-rangee:focus-within{

border-color:var(--primary-color);

box-shadow:0 0 0 4px rgba(233,163,25,.22);

}

.tel-rangee .tel-pays{

/* 148px et non 168 : le formulaire du profil est sur trois colonnes,
et une colonne fait environ 330px. Au-delà, il ne reste plus assez
de place au numéro lui-même — mesuré, le champ n'affichait que
« 6 71 ». La base reste fixe plutôt qu'adaptée au contenu : sans
cela la colonne changerait de largeur à chaque sélection
(« Mali », puis « République démocratique du Congo ») et le champ
du numéro sauterait sous le curseur. */
/* flex:0 0 — le sélecteur ne rétrécit JAMAIS. Mesuré avec une base
souple : c'est lui que le flex comprimait, jusqu'à afficher
« Cam… » à la place de « Cameroun ». Or c'est la seule chose que
l'étudiant doit pouvoir lire d'un coup d'œil pour vérifier que
l'indicatif est le bon. C'est au champ du numéro d'absorber la
contrainte (flex:1 1 0 plus bas), pas à l'étiquette du pays. */
flex:0 0 148px;

width:148px;

padding:14px 8px 14px 12px;

border:none;

border-right:1.5px solid var(--border-color);

border-radius:0;

background:var(--background-soft);

font-family:inherit;

/* .85rem et non .9 : à 148px de large, « Cameroun +237 » se faisait
tronquer sur l'indicatif. L'indicatif compte autant que le nom —
c'est lui que l'étudiant compare à ce qu'il connaît de son propre
numéro. Réduire d'un demi-point fait tenir les deux, et le
sélecteur n'est pas le texte que l'on lit longtemps. */
font-size:.85rem;

color:var(--text-light);

cursor:pointer;

/* Le nom du pays est tronqué plutôt que de forcer la colonne à
s'élargir : l'indicatif, lui, reste lisible dans la liste ouverte,
et c'est la liste qui sert à choisir. */
text-overflow:ellipsis;

}

.tel-rangee .tel-pays:focus{

outline:none;

}

.tel-rangee .tel-national{

/* base 0 : le numéro prend tout ce qui reste, et c'est lui qui cède
quand la colonne est étroite — un numéro tronqué à l'affichage
reste lisible au défilement, un pays tronqué ne se lit plus. */
flex:1 1 0;

min-width:0;   /* sans lui, un flex refuse de descendre sous son contenu */

padding:14px 16px;

border:none;

border-radius:0;

background:transparent;

font-family:inherit;

font-size:.96rem;

color:var(--text-color);

/* Les numéros se lisent par groupes de chiffres : un espacement
très légèrement ouvert aide l'œil à les regrouper, sans donner
l'air d'un champ de code à usage unique. */
letter-spacing:.01em;

}

.tel-rangee .tel-national:focus{

outline:none;

box-shadow:none;

}

.tel-rangee .tel-national.is-invalide{

color:var(--danger-700);

}

.tel-rangee:has(.is-invalide){

border-color:var(--danger);

}

.tel-rangee:has(.is-invalide):focus-within{

box-shadow:0 0 0 4px rgba(217,45,32,.12);

}

.tel-erreur{

margin-top:7px;

font-size:.84rem;

line-height:1.45;

color:var(--danger-700);

}

@media(max-width:520px){

/* Sous 520px, 168px de sélecteur ne laissent plus assez de place au
numéro : les deux champs passent l'un au-dessus de l'autre, et le
filet vertical devient horizontal. */
.tel-rangee{

flex-direction:column;

}

.tel-rangee .tel-pays{

flex:0 0 auto;

width:100%;

border-right:none;

border-bottom:1.5px solid var(--border-color);

}

}

/* Lot ACCEPTATION, partie 3 (2026-09-11) : le bandeau « Fitz a besoin de
ces informations pour choisir vos N universités » (?pour=fitz). Même
dessin que la ligne d'état de « Mes candidatures » (applications.css),
que cette page ne charge pas. */
.fitz-profil-bandeau{
display:flex;
align-items:flex-start;
flex-wrap:wrap;
gap:10px 14px;
margin:0 0 18px;
padding:12px 16px;
border:1px solid var(--border-color);
border-radius:var(--radius-md);
background:var(--background-alt);
font-weight:600;
color:var(--text-color);
line-height:1.5;
}
.fitz-profil-bandeau i,
.fitz-profil-bandeau svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; color:var(--amber-600); }

/* ==========================================================
LOT PROFIL-PAR-NIVEAU (2026-09-11) — le palier d'abord, puis seulement
ce qui s'applique. Le premier écran (#sec-depart), les 8 cartes de
palier, les mentions « Repris de votre diagnostic », la ligne d'état,
les boutons d'enregistrement par section.
========================================================== */

.profile-section--depart{
border-color:var(--amber-700);
}

.palier-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:10px;
}

/* .palier-grid .palier-option (0,2,0) et non .palier-option (0,1,0) :
« .input-group label » (profile.css) pose display:block sur tout label
de la grille — c'est CE qui posait l'icône SUR le texte dans la capture
de Charles (mesuré par le harnais : display:block, icône et texte à la
même abscisse). */
.palier-grid .palier-option{
position:relative;
display:flex;
align-items:center;
gap:10px;
min-width:0;
padding:12px 14px;
border-radius:var(--radius-md);
border:1.5px solid var(--border-color);
cursor:pointer;
transition:var(--transition);
}

.palier-option:hover{ border-color:var(--primary-color); }

.palier-option.is-selected{
border-color:var(--primary-color);
background:var(--background-light);
}

/* Lot FINITIONS-VISUELLES (2026-09-11) : plus de rond du système sur la
carte. L'input reste dans le DOM (radiogroup, clavier, lecteur
d'écran) mais sort du rendu ; le focus clavier se voit sur la carte
(.has-focus, posé par profile.js). */
.palier-option input{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

.palier-option.has-focus{
outline:2px solid var(--primary-color);
outline-offset:2px;
}

/* UNE icône, AVANT le texte, avec son espacement — jamais dessus. */
.palier-option > i,
.palier-option > svg{ width:18px; height:18px; flex-shrink:0; color:var(--amber-700); }

.palier-option-text{
flex:1 1 auto;
min-width:0;
font-weight:600;
font-size:.86rem;
color:var(--text-color);
line-height:1.3;
}

/* La coche : à droite, visible sur la carte choisie seulement. */
.palier-option-check{
display:none;
flex-shrink:0;
width:18px;
height:18px;
color:var(--primary-color);
}
.palier-option-check svg{ width:18px; height:18px; display:block; }
.palier-option.is-selected .palier-option-check{ display:inline-flex; }

.field-requis{
display:inline-block;
margin-left:6px;
padding:1px 7px;
border-radius:999px;
background:var(--background-alt);
color:var(--text-light);
font-size:.68rem;
font-weight:700;
letter-spacing:.02em;
vertical-align:middle;
}

.field-repris{
display:block;
margin-top:6px;
font-size:.74rem;
font-weight:600;
color:var(--amber-700);
}

.field-repris[hidden]{ display:none; }

.language-row--sans-niveau .language-row-label::after{
content:" — niveau à préciser";
font-size:.74rem;
font-weight:600;
color:var(--amber-700);
}

.section-facultative{
display:inline-block;
margin-left:8px;
padding:2px 8px;
border-radius:999px;
background:var(--background-alt);
color:var(--text-light);
font-family:var(--font-body);
font-size:.7rem;
font-weight:700;
vertical-align:middle;
}

.section-facultative[hidden]{ display:none; }

.section-nav-item.is-facultative > span:last-child{ color:var(--text-light); }

.profile-etat{
margin:0 8px 12px;
padding:10px 12px;
border-radius:var(--radius-md);
background:var(--background-alt);
font-size:.8rem;
font-weight:600;
line-height:1.45;
color:var(--text-color);
}

.profile-etat:empty{ display:none; }


.profile-section-actions{
display:flex;
justify-content:flex-end;
margin-top:18px;
padding-top:14px;
border-top:1px solid var(--border-color);
}

.btn-section-save{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 16px;
border-radius:999px;
border:1.5px solid var(--border-color);
background:transparent;
color:var(--text-color);
font-family:var(--font-body);
font-size:.82rem;
font-weight:700;
cursor:pointer;
transition:var(--transition);
}

.btn-section-save:hover{ border-color:var(--primary-color); }

.btn-section-save i,
.btn-section-save svg{ width:16px; height:16px; }

@media(max-width:1023px){
.palier-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media(max-width:520px){
.palier-grid{ grid-template-columns:1fr; }
.profile-section-actions{ justify-content:stretch; }
.btn-section-save{ width:100%; justify-content:center; }
}