/* ==========================================================
FitzUniverse — LES CHAMPS GUIDÉS (lot R3, 2026-09-17)

L'habillage des deux composants de js/champs-guides.js : les pastilles
d'exemples et le champ à suggestions. Une seule feuille, chargée par
l'espace préinscription (la route) et par « Mon profil » — sinon deux
recettes auraient divergé, comme les dix géométries de champ que l'audit
du 2026-09-13 a trouvées dans le site.

Elle ne suppose qu'une chose de la page qui la charge : les tokens de
couleur du design system (css/base.css). Sur les pages de l'espace
étudiant, css/journey-shell.css les remappe en papier chaud — les
composants suivent, sans une ligne de plus.

Aucune classe n'existe seulement dans un @media (test icone-btn 3).
========================================================== */

/* ---------- Les pastilles d'exemples ---------- */
/* UNE SEULE LIGNE, QUI DÉFILE — partout, pas seulement sur téléphone.
Constaté à l'écran le 2026-09-17 : dans une colonne de grille (« Mon
profil » en pose trois sur un écran large), des pastilles qui passent à
la ligne tombent à raison d'UNE PAR RANGÉE et repoussent la question
suivante d'un demi-écran. Une rangée qui défile garde la hauteur du
formulaire stable quelle que soit la largeur de la colonne. */
.fitz-chips{
display:flex;
flex-wrap:nowrap;
gap:6px;
margin-top:8px;
overflow-x:auto;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
/* Le dernier centimètre s'estompe : c'est ce qui dit « ça continue ». */
mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.fitz-chips::-webkit-scrollbar{
display:none;
}

.fitz-chip{
flex:0 0 auto;
}

/* Le mot qui ouvre la rangée — ce n'est pas un bouton, et il ne doit pas
en avoir l'air : sans lui, « Lycée public » sous un champ où l'on vient
d'écrire le nom de son lycée ressemble à une seconde réponse. */
.fitz-chips-lead{
flex:0 0 auto;
align-self:center;
padding-right:2px;
font-size:.72rem;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
color:var(--text-light);
white-space:nowrap;
user-select:none;
}

.fitz-chip{
min-height:34px;
padding:6px 12px;
border-radius:var(--radius-full, 999px);
border:1px solid var(--border-color);
background:var(--background-light, #F7F1E3);
color:var(--text-light);
font:inherit;
font-size:.82rem;
font-weight:600;
line-height:1.2;
cursor:pointer;
transition:border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.fitz-chip:hover{
border-color:var(--amber-600);
color:var(--text-color);
transform:translateY(-1px);
}

.fitz-chip:focus-visible{
outline:2px solid var(--amber-700);
outline-offset:2px;
}

.fitz-chip.is-choisie{
background:var(--amber-600);
border-color:var(--amber-600);
color:#FDF9EF;
}

/* ---------- Le champ à suggestions ---------- */
.fitz-suggest{
position:relative;
}

.fitz-suggest-liste{
position:absolute;
left:0;
right:0;
top:calc(100% + 6px);
z-index:30;
margin:0;
padding:6px;
list-style:none;
max-height:264px;
overflow-y:auto;
border:1px solid var(--border-color);
border-radius:14px;
background:#FFFDF8;
box-shadow:0 18px 40px -16px rgba(33,29,24,.35);
}

.fitz-suggest-liste li{
padding:10px 12px;
border-radius:9px;
font-size:.93rem;
line-height:1.3;
cursor:pointer;
}

.fitz-suggest-liste li:hover,
.fitz-suggest-liste li.is-actif{
background:var(--background-soft, #F3EBDA);
color:var(--text-color);
}

/* ---------- Téléphone ---------- */
@media (max-width:640px){

/* La rangée mord la marge de la carte : on voit qu'elle continue. */
.fitz-chips{
margin-right:-16px;
padding-right:16px;
}

.fitz-suggest-liste{
max-height:220px;
}

}