/* ── Hero métier ──────────────────────────────────────────── */
.metier-hero {
    position: relative;
    background: linear-gradient(135deg, #1a56db 0%, #6c63ff 100%);
    padding: 2.5rem 1.5rem;
    color: #fff;
}

.metier-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.metier-domaine-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.metier-domaine-badge {
    display: inline-block;
    background: #e8edff;
    color: #1a56db;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ── Compétences clés / savoir-être : phrases longues, une liste à puces
   se lit mieux qu'un badge (pensé pour des mots courts comme un domaine) ── */
.skill-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.5rem 1.5rem;
}

.skill-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: #2d3748;
    line-height: 1.4;
}

.skill-item::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: 0.5rem;
    border-radius: 50%;
    background: #1a56db;
}

/* Savoir-être professionnels : couleur distincte des compétences techniques
   (bleu par défaut ci-dessus) pour bien séparer les deux listes au premier coup d'œil. */
.skill-item--savoir-etre::before {
    background: #6d28d9;
}

/* ── Contexte de travail : chips plus légers qu'un badge de domaine,
   pour des libellés parfois longs ("Port d'équipement de protection...").
   Une couleur distincte par catégorie (horaires, risques, lieux...) pour les
   différencier au premier coup d'œil dans une liste par ailleurs homogène. ── */
.context-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.context-chip {
    display: inline-block;
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.context-chip--aqua    { background: #e6fffa; color: #0f766e; border-color: #ccfbf1; }
.context-chip--orange  { background: #fff7ed; color: #c2410c; border-color: #ffedd5; }
.context-chip--amber   { background: #fffbea; color: #92400e; border-color: #fef3c7; }
.context-chip--green   { background: #ecfdf3; color: #15803d; border-color: #d1fae5; }
.context-chip--magenta { background: #fdf2f8; color: #be185d; border-color: #fce7f3; }
.context-chip--gray    { background: #f7fafc; color: #4a5568; border-color: #e2e8f0; }

/* libelle_metier n'est jamais mis en forme côté PHP : "capitalize" mettrait une
   majuscule à chaque mot au lieu de la seule première lettre du libellé. */
.metier-title {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    text-transform: lowercase;
}

.metier-title::first-letter {
    text-transform: uppercase;
}

.metier-subtitle {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 1rem;
}

.metier-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.metier-tag {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px;
    padding: 0.2rem 0.75rem;
    font-size: 0.8rem;
}

/* Positionné en absolu : le titre du métier prend souvent toute la largeur disponible et ferait
   passer le bouton à la ligne suivante s'il restait dans le flux flex (cf. .detail-hero-actions,
   même correctif sur la fiche formation). */
.metier-hero-actions {
    position: absolute;
    top: 2rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.btn-onisep {
    display: inline-block;
    background: #fff;
    color: #2d3748;
    padding: 0.65rem 1.25rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-onisep:hover { background: #f0f4f8; }

.btn-rome {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-rome:hover { background: rgba(255,255,255,0.25); }

/* ── Container ────────────────────────────────────────────── */
.metier-container {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.metier-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* ── ROME list ────────────────────────────────────────────── */
.rome-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rome-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.75rem;
    background: #f7fafc;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #2d3748;
}

.rome-label {
    font-weight: 500;
    color: #1a202c;
    text-decoration: none;
}

a.rome-label:hover {
    color: #1a56db;
    text-decoration: underline;
}

/* ── Marché du travail (tension / salaire) ────────────────── */
.marche-travail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 0.75rem;
}

.marche-travail-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: #f7fafc;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.marche-travail-stat strong {
    font-size: 1.3rem;
    color: #1a56db;
}

.marche-travail-stat span {
    font-size: 0.85rem;
    color: #2d3748;
}

.marche-travail-sub {
    font-size: 0.78rem;
    color: #718096;
}

.marche-travail-empty {
    font-size: 0.9rem;
    color: #718096;
    line-height: 1.5;
}


/* ── Formations pour accéder au métier ────────────────────── */
.related-formations-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.related-formation-card {
    display: flex;
    align-items: center;
    background: #f7fafc;
    border-radius: 10px;
    padding: 0.65rem 1rem;
    text-decoration: none;
    transition: background 0.15s;
}

.related-formation-card:hover {
    background: #ebf2ff;
}

.related-formation-title {
    font-weight: 600;
    color: #1a202c;
    font-size: 0.9rem;
}

/* ── Classements des guides d'admission ───────────────────── */
.guide-rank-card {
    justify-content: space-between;
    gap: 0.75rem;
}

/* .related-formation-card force déjà display:flex, ce qui l'emporterait sinon sur la règle
   [hidden] du navigateur (une simple classe d'auteur prime toujours sur le style user-agent) :
   sans ça, les formations révélées au clic sur "Voir plus" (cf. assets/scripts/guide-rankings.js)
   resteraient visibles dès le chargement de la page. */
.guide-rank-card[hidden] {
    display: none;
}

.guide-rank-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.guide-rank-number {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #e8edff;
    color: #1a56db;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-rank-title {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.guide-rank-etab {
    font-size: 0.78rem;
    color: #718096;
    font-weight: 400;
}

.detail-more-link {
    display: inline-block;
    color: #1a56db;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
}

.detail-more-link:hover {
    text-decoration: underline;
}

.detail-card-subtitle {
    font-size: 0.9rem;
    color: #718096;
    margin-bottom: 0.75rem;
}

/* ── Métiers similaires ───────────────────────────────────── */
.similar-metiers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.similar-metier-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: #f7fafc;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: background 0.15s;
}

.similar-metier-card:hover {
    background: #ebf2ff;
}

.similar-metier-label {
    font-weight: 600;
    color: #1a202c;
    text-transform: lowercase;
    font-size: 0.92rem;
}

.similar-metier-label::first-letter {
    text-transform: uppercase;
}

/* Les libellés de type_formation (guides d'admission) sont déjà correctement
   casés ("Formations des écoles d'ingénieurs") : ne pas toucher à leur casse. */
.similar-metier-label.guide-topic-label {
    text-transform: none;
}

.similar-metier-domaine {
    font-size: 0.78rem;
    color: #718096;
}

@media (max-width: 640px) {
    .similar-metiers-grid { grid-template-columns: 1fr; }
}

/* ── Formations count badge ───────────────────────────────── */
.formations-count {
    display: inline-block;
    background: #ebf2ff;
    color: #1a56db;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* ── Formation cards ──────────────────────────────────────── */
.metier-formations-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.metier-formation-card {
    display: block;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.metier-formation-card:hover {
    border-color: #1a56db;
    background: #fff;
    box-shadow: 0 2px 12px rgba(26, 86, 219, 0.1);
}

.mfc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    gap: 0.5rem;
}

.mfc-type {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #1a56db;
    letter-spacing: 0.04em;
}

.mfc-session {
    font-size: 0.7rem;
    background: #e2e8f0;
    color: #718096;
    padding: 1px 8px;
    border-radius: 20px;
}

.mfc-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a202c;
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.mfc-etablissement {
    font-size: 0.85rem;
    color: #4a5568;
    margin-bottom: 0.2rem;
}

.mfc-lieu {
    font-size: 0.8rem;
    color: #718096;
}

.mfc-badge {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    background: #fef3c7;
    color: #92400e;
    padding: 1px 8px;
    border-radius: 20px;
    font-weight: 600;
}

/* ── Pagination ───────────────────────────────────────────── */
.metier-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
    margin-top: 1.5rem;
}

/* ── Exposition à l'automatisation / IA ───────────────────── */
.ai-exposure-badge {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 0.75rem;
}

.ai-exposure-faible { background: #ecfdf3; color: #15803d; }
.ai-exposure-modérée { background: #fef6e0; color: #92600a; }
.ai-exposure-élevée { background: #fff0f0; color: #c53030; }

.ai-exposure-note {
    font-size: 0.9rem;
    color: #2d3748;
    margin-bottom: 0.75rem;
}

.ai-exposure-disclaimer {
    font-size: 0.78rem;
    color: #718096;
    line-height: 1.5;
    font-style: italic;
}

/* ── No formations ────────────────────────────────────────── */
.no-formations {
    color: #718096;
    font-size: 0.9rem;
    padding: 1.5rem 0;
    text-align: center;
}
.no-formations a { color: #1a56db; }

/* ── Vidéo métier ─────────────────────────────────────────── */
.metier-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* ratio 16:9 */
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.metier-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.metier-video-credit {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: #718096;
}

.metier-video-credit a {
    color: #1a56db;
}

.metier-video-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 1rem;
}

.metier-video-description {
    margin-top: 1rem;
    font-size: 0.92rem;
    color: #2d3748;
    line-height: 1.6;
    white-space: pre-line;
}

.metier-video-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    background: #1a56db;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.65rem 1.25rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(26,86,219,0.22);
    transition: background 0.15s, transform 0.15s;
}

.metier-video-cta:hover {
    background: #1345b5;
    transform: translateY(-1px);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .metier-hero-inner { flex-direction: column; }
    .metier-container { flex-direction: column; }
    .detail-sidebar { width: 100%; }
    /* Le bouton favori (position absolue) chevaucherait sinon le titre du métier à cette largeur. */
    .metier-hero-inner > div:first-child { padding-right: 3rem; }
    .metier-hero-actions { top: 1.75rem; right: 1rem; flex-direction: row; flex-wrap: wrap; }
    .favori-toggle-hero { width: 2.25rem; height: 2.25rem; font-size: 1.1rem; }
}