/* ── Hero ─────────────────────────────────────────────── */
.hero {
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

.hero.hero-landing {
    min-height: auto;
    padding: 2rem 1rem 2rem;
}

.hero.hero-suggestions {
    padding-bottom: 2rem;
}

.hero-suggestions .subtitle {
    margin-bottom: 0;
}

/* ── Autour de moi : carte plein écran ─────────────────── */
/* 56px = hauteur du header sticky (cf. .site-header-inner) : la carte occupe tout le reste du
   viewport, pas de scroll de page — seule la carte elle-même se déplace/zoome. */
.autour-fullmap-page {
    position: relative;
    height: calc(100vh - 56px);
    width: 100%;
}

/* Ciblé par id plutôt que par classe : maplibre-gl.css (chargé après home.css) définit lui-même
   .maplibregl-map { position: relative } sur ce même conteneur (classe ajoutée par MapLibre à
   l'initialisation) — à spécificité égale, cette règle chargée plus tard l'emporterait sur
   .autour-fullmap et ferait perdre le position:absolute nécessaire à inset:0. Sans contexte
   d'empilement propre, les contrôles MapLibre (zoom, attribution — z-index internes élevés)
   passeraient aussi au-dessus du header sticky (z-index 150, cf. .site-header) une fois la carte
   défilée sous celui-ci : même traitement que .site-header, isolation + position confinent ces
   z-index à l'intérieur de la carte. */
#autour-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    isolation: isolate;
}

.autour-overlay {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 360px;
}

.autour-overlay-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.16);
}

/* Bouton flottant qui replie/déplie .autour-overlay sur mobile (cf. media query plus bas) : sur
   desktop il reste caché, la carte de recherche est toujours visible et il y a la place pour elle. */
.autour-overlay-toggle {
    display: none;
}

.autour-overlay-close {
    display: none;
}

.autour-overlay-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 0.9rem;
}

.autour-controls {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.autour-geoloc-btn {
    background: #1a56db;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.autour-geoloc-btn:hover {
    background: #1345b5;
}

.autour-address-wrapper {
    position: relative;
}

.autour-address-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 0.3rem 0.3rem 0.3rem 1rem;
}

.autour-address-wrapper .autocomplete-item {
    text-align: left;
}

/* Jusqu'à 10 suggestions dans une carte flottante étroite : une hauteur max réduite garde le menu
   lisible, le défilement (hérité de .autocomplete-list) prend le relais au-delà. */
.autour-address-wrapper .autocomplete-list {
    max-height: 260px;
}

.autour-address-box .search-input {
    /* 16px minimum : sous ce seuil, Safari iOS zoome automatiquement au focus */
    font-size: 1rem;
    width: 100%;
}

.autour-address-btn {
    flex-shrink: 0;
    background: #1a56db;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}

.autour-address-btn:hover {
    background: #1345b5;
}

.autour-status {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #718096;
}

.autour-status:empty {
    display: none;
}

/* Popup MapLibre (cf. autour-de-moi.js) : contenu simple, pas besoin de surcharger grand-chose au
   thème par défaut de maplibre-gl.css, juste la taille de police pour rester cohérent avec le reste. */
.autour-popup-title {
    font-weight: 700;
    color: #1a202c;
    font-size: 0.92rem;
}

.autour-popup-meta {
    font-size: 0.82rem;
    color: #718096;
    margin-top: 2px;
}

.autour-popup-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: #1a56db;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

.autour-popup-link:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .autour-overlay {
        left: 0.75rem;
        right: 0.75rem;
        top: 0.75rem;
        max-width: none;
        /* Repliée par défaut sur mobile : la carte de recherche masquait près de la moitié de la
           carte (cf. .autour-overlay-toggle ci-dessous, qui la fait réapparaître). */
        display: none;
    }

    .autour-overlay.is-open {
        display: flex;
    }

    .autour-overlay-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 11;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        border: none;
        background: #1a56db;
        color: #fff;
        font-size: 1.2rem;
        box-shadow: 0 4px 16px rgba(0,0,0,0.18);
        cursor: pointer;
    }

    .autour-overlay-toggle.is-hidden {
        display: none;
    }

    .autour-overlay-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
        border: none;
        background: #f7fafc;
        color: #4a5568;
        font-size: 1.1rem;
        line-height: 1;
        cursor: pointer;
    }
}

/* Panneau liste : ouvert au clic sur un cluster ou sur un point regroupant plusieurs formations
   à la même adresse (cf. autour-de-moi.js) — la carte seule ne permet pas de distinguer des dizaines
   de formations superposées au même point, la liste comble ce manque. Glisse depuis la droite,
   au-dessus de la carte mais sous l'overlay de recherche (z-index inférieur, ils ne se chevauchent
   pas en pratique vu leurs positions respectives). */
.autour-list-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    width: 380px;
    max-width: 100%;
    background: #fff;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.autour-list-panel.is-open {
    transform: translateX(0);
}

.autour-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid #edf2f7;
}

.autour-list-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a202c;
    margin: 0;
}

.autour-list-close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: #f7fafc;
    color: #4a5568;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.autour-list-close:hover {
    background: #edf2f7;
}

.autour-list-hint {
    margin: 0;
    padding: 0 1.25rem;
    font-size: 0.8rem;
    color: #a0aec0;
}

.autour-list-hint:empty {
    display: none;
}

.autour-list-items {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    overflow-y: auto;
    flex: 1;
}

.autour-list-item {
    display: block;
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid #f7fafc;
    text-decoration: none;
    color: inherit;
}

.autour-list-item:hover {
    background: #f7fafc;
}

.autour-list-item-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: #1a56db;
}

.autour-list-item-meta {
    font-size: 0.78rem;
    color: #718096;
    margin-top: 2px;
}

@media (max-width: 640px) {
    .autour-list-panel {
        width: 100%;
        top: auto;
        height: 70vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }

    .autour-list-panel.is-open {
        transform: translateY(0);
    }
}

/* ── Hero éditorial (/articles) — masthead façon presse, distinct du hero
   de recherche standard (kicker + titre serif + filet en pied). ── */
.hero.hero-editorial {
    border-bottom: 3px solid #1a202c;
}

.hero-editorial-kicker {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1a56db;
    margin-bottom: 0.75rem;
}

.hero-editorial #hero-title {
    font-family: Georgia, 'Times New Roman', serif;
}

.hero-editorial-subtitle {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Barre de recherche façon presse : sobre, rectangulaire, typographie serif —
   tranche volontairement avec la pilule bleue arrondie du moteur standard
   (/formations, /metiers), pour que "Le Mag" ne ressemble pas à un simple
   formulaire de recherche produit. */
.hero-editorial .search-box {
    background: #fff;
    border: 1px solid #1a202c;
    border-radius: 4px;
    box-shadow: none;
    padding: 0.4rem 0.4rem 0.4rem 1.4rem;
}

.hero-editorial .search-box:focus-within {
    box-shadow: 0 6px 24px rgba(26,32,44,0.14);
}

.hero-editorial .search-input {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
    font-style: italic;
}

.hero-editorial .search-input::placeholder {
    font-style: italic;
    color: #a0aec0;
}

.hero-editorial .search-btn {
    background: #1a202c;
    border-radius: 3px;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
}

.hero-editorial .search-btn:hover {
    background: #000;
}

.hero-editorial .chip {
    border-radius: 3px;
}

.hero-content {
    text-align: center;
    max-width: 720px;
    width: 100%;
}

.logo {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

.hero-content h1 {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.orient-suggest-badge {
    display: inline-block;
    background: #e8edff;
    color: #1a56db;
    border-radius: 50px;
    padding: 0.3rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.subtitle {
    color: #4a5568;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.orient-recap {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a56db;
    margin-bottom: 0.75rem;
}

.orient-cta-btn {
    display: inline-block;
    background: #1a56db;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    padding: 0.85rem 2rem;
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(26,86,219,0.25);
    transition: background 0.2s, transform 0.15s;
}

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

/* ── Landing zones (accueil) ──────────────────────────── */
.zone-grid {
    max-width: 700px;
    width: 100%;
    margin: 1.75rem auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.zone-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 4px 20px rgba(26,86,219,0.08);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.zone-card:hover {
    box-shadow: 0 10px 32px rgba(26,86,219,0.16);
    transform: translateY(-3px);
}

.zone-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e8edff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
}

.zone-card-icon svg {
    width: 24px;
    height: 24px;
}

.zone-card h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.zone-card p {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.zone-card-cta {
    color: #1a56db;
    font-weight: 600;
    font-size: 0.9rem;
}

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

/* ── Quiz éclair (home) — cf. initQuizRapide() dans orientation-widget.js ─── */
.quiz-section {
    padding: 0 1rem 2.5rem;
}

.quiz-card {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(26,86,219,0.14);
    text-align: center;
}

.quiz-kicker {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1a56db;
    background: #e8edff;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.quiz-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 1.25rem;
}

.quiz-progress {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.quiz-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e2e8f0;
    transition: background 0.2s;
}

.quiz-dot.active {
    background: #1a56db;
}

.quiz-choices {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.quiz-result-lead {
    font-size: 1rem;
    color: #2d3748;
    margin-bottom: 1.25rem;
}

.quiz-result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.quiz-result-btn {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.2s, color 0.2s;
}

.quiz-result-primary {
    background: #1a56db;
    color: #fff;
}

.quiz-result-primary:hover {
    background: #1345b5;
}

.quiz-result-secondary {
    background: #f0f4f8;
    color: #2d3748;
}

.quiz-result-secondary:hover {
    background: #e2e8f0;
}

.quiz-result-hint {
    font-size: 0.78rem;
    color: #a0aec0;
    margin-top: 0.85rem;
}

.quiz-restart {
    display: block;
    margin: 1rem auto 0;
    background: none;
    border: none;
    color: #718096;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .quiz-card { padding: 1.5rem; }
}

/* ── Stats bar (home) ─────────────────────────────────── */
.home-stats {
    background: #fff;
    box-shadow: 0 4px 20px rgba(26,86,219,0.08);
    padding: 2rem 1rem;
}

.home-stats-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.home-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
}

.home-stat strong {
    font-size: 1.9rem;
    font-weight: 800;
    color: #1a56db;
}

.home-stat span {
    font-size: 0.85rem;
    color: #4a5568;
}

/* ── Sections génériques (home) ───────────────────────── */
.home-section {
    padding: 2rem 1rem;
}

.home-section-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* Fond légèrement teinté sur le bloc du milieu (IA) : ces 3 sections partagent exactement le même
   gabarit de carte, un simple filet ne suffit pas à les distinguer visuellement — l'alternance de
   fond évite qu'elles ne se lisent comme un seul bloc continu. */
.home-section-tinted {
    background: #f7fafc;
}

.home-section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a202c;
    text-align: center;
    margin-bottom: 2rem;
}

@media (max-width: 640px) {
    .home-section { padding: 1.5rem 1rem; }
    .home-section-title { margin-bottom: 1.25rem; }
}

/* ── Comment ça marche ─────────────────────────────────── */
.how-it-works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.how-step {
    background: #fff;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(26,86,219,0.06);
    text-align: center;
}

.how-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1a56db;
    color: #fff;
    font-weight: 700;
    margin-bottom: 1rem;
}

.how-step h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.how-step p {
    font-size: 0.9rem;
    color: #4a5568;
    line-height: 1.55;
}

/* ── Découvrez un métier en vidéo (home) ──────────────── */
.home-video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.home-video-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
}

.home-video-thumb {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 14px;
    overflow: hidden;
    background: #1a202c;
    box-shadow: 0 4px 20px rgba(26,86,219,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.home-video-card:hover .home-video-thumb {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(26,86,219,0.18);
}

.home-video-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: #1a56db;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    padding-left: 3px;
}

.home-video-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1a202c;
    text-align: center;
}

@media (max-width: 900px) {
    .home-video-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    /* Idem : carrousel horizontal au lieu d'empiler les 4 cartes vidéo verticalement. */
    .home-video-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
        margin: 0 -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .home-video-grid::-webkit-scrollbar { display: none; }
    .home-video-card {
        flex: 0 0 62%;
        scroll-snap-align: start;
    }
}

/* ── Métiers qui recrutent le plus (home) ─────────────── */
.home-tension-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.home-tension-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(26,86,219,0.07);
    transition: transform 0.2s, box-shadow 0.2s;
}

.home-tension-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(26,86,219,0.14);
}

.home-tension-icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-tension-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

/* Une couleur par thématique — cohérent avec les badges rouge/vert/bleu déjà
   utilisés ailleurs (guides) : recrutement = urgence, IA = sécurité, popularité = marque. */
.home-tension-icon--hire { background: #dc2626; }
.home-tension-icon--ai { background: #15803d; }
.home-tension-icon--popular { background: #1a56db; }

.home-tension-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.home-tension-label {
    font-weight: 700;
    color: #1a202c;
    font-size: 0.94rem;
    line-height: 1.3;
}

.home-tension-count {
    font-size: 0.83rem;
    color: #1a56db;
    font-weight: 600;
}

/* ── Métiers les moins touchés par l'IA (home) ────────── */
.home-ai-exposure-note {
    font-size: 0.8rem;
    color: #4a5568;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .home-tension-grid { grid-template-columns: repeat(2, 1fr); }
}

/* En dessous de 900px (donc aussi en mobile), on reste en grille 2 colonnes plutôt que de passer
   en carrousel horizontal (comme pour home-guides-grid/home-video-grid) : ce ne sont pas de longues
   listes à parcourir, 2 par ligne montre tout le contenu sans interaction supplémentaire. */
@media (max-width: 640px) {
    .home-tension-grid { gap: 0.75rem; }
    .home-tension-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
        padding: 0.9rem 1rem;
    }
}

/* ── Le Mag (home) ── bloc distinct, identité éditoriale (kicker + serif)
   reprise du masthead de /articles, pour que "Le Mag" se lise comme une
   marque à part plutôt qu'une simple section parmi d'autres sur la home. ── */
.home-mag-section {
    background: #1a202c;
    padding: 2.5rem;
}

.home-mag-header {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 2rem;
}

.home-mag-kicker {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #7c9dfa;
    margin-bottom: 0.75rem;
}

.home-mag-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.6rem;
}

.home-mag-subtitle {
    color: #cbd5e0;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

/* Les cartes gardent leur habillage clair même sur le fond sombre du bloc
   (contraste volontaire, comme des pages de mag qui tranchent sur la
   couverture) — pas besoin d'une variante "dark" de .home-article-card. */
.home-mag-section .home-article-all-link {
    color: #7c9dfa;
}

/* ── Zoom sur nos articles ── volontairement différent du bloc "métiers qui
   recrutent" juste au-dessus (2 colonnes au lieu de 3, carte horizontale avec
   pastille chiffrée au lieu d'un texte empilé) pour ne pas répéter deux fois
   le même motif visuel d'affilée. ── */
.home-article-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.home-article-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f7fafc;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}

.home-article-card:hover {
    background: #ebf2ff;
    transform: translateY(-3px);
}

.home-article-badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: #1a56db;
}

.home-article-badge svg {
    width: 1.7rem;
    height: 1.7rem;
}

.home-article-title {
    font-weight: 600;
    color: #1a202c;
    font-size: 0.92rem;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .home-article-grid { grid-template-columns: 1fr; }
}

.home-article-all-link {
    display: block;
    text-align: center;
    margin-top: 1.25rem;
    color: #1a56db;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
}

.home-article-all-link:hover {
    text-decoration: underline;
}

.home-guides-header {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 2rem;
}

.home-guides-kicker {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1a56db;
    margin-bottom: 0.75rem;
}

.home-guides-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a202c;
    margin: 0 0 0.6rem;
}

.home-guides-subtitle {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

.home-guides-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.home-guide-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(26,86,219,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.home-guide-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(26,86,219,0.16);
}

.home-guide-icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    background: #1a56db;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-guide-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.home-guide-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.home-guide-label {
    font-weight: 700;
    color: #1a202c;
    font-size: 0.92rem;
    line-height: 1.3;
}

.home-guide-arrow {
    font-size: 0.8rem;
    color: #1a56db;
    font-weight: 600;
}

@media (max-width: 900px) {
    .home-guides-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    /* Idem tension/vidéo : carrousel horizontal plutôt que 12 cartes empilées verticalement. */
    .home-guides-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
        margin: 0 -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .home-guides-grid::-webkit-scrollbar { display: none; }
    .home-guide-card {
        flex: 0 0 80%;
        scroll-snap-align: start;
    }
}

/* ── Promo Léa (home) ─────────────────────────────────── */
.lea-promo {
    background: linear-gradient(135deg, #1a56db 0%, #6c63ff 100%);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    color: #fff;
}

.lea-promo-text h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0.75rem 0;
}

.lea-promo-text p {
    max-width: 500px;
    margin: 0 auto 1.5rem;
    opacity: 0.92;
    line-height: 1.55;
}

.lea-promo-btn {
    background: #fff;
    color: #1a56db;
    border: none;
    border-radius: 50px;
    padding: 0.75rem 1.75rem;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s;
}

.lea-promo-btn:hover {
    background: #ebf2ff;
}

@media (max-width: 640px) {
    /* Défilement horizontal façon carrousel plutôt qu'un empilement vertical des 3 cartes,
       pour éviter d'allonger la page (même logique que .quick-filters plus bas). */
    .how-it-works-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
        margin: 0 -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .how-it-works-grid::-webkit-scrollbar { display: none; }
    .how-step {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
}

/* ── Favoris (bouton étoile, sans compte, stocké en localStorage) ─── */
.favori-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    color: #a0aec0;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, transform 0.1s;
}

.favori-toggle:hover {
    border-color: #1a56db;
    color: #1a56db;
}

.favori-toggle:active {
    transform: scale(0.92);
}

.favori-toggle.is-active {
    color: #f5a623;
    border-color: #f5a623;
}

/* Icône pleine/vide gérée en CSS via le contenu de deux spans, pas en JS : évite de manipuler le
   texte du bouton (et donc son aria-label) au clic. */
.favori-toggle .favori-icon-empty { display: inline; }
.favori-toggle .favori-icon-full { display: none; }
.favori-toggle.is-active .favori-icon-empty { display: none; }
.favori-toggle.is-active .favori-icon-full { display: inline; }

/* Positionnement du bouton favori quand il flotte au-dessus d'une carte de résultat cliquable. */
.card-favori-wrap {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
}

/* ── Comparateur (bouton "+", sans compte, stocké en localStorage) ── */
/* Même style que .favori-toggle par souci de cohérence visuelle, mais couleur active bleue (la
   couleur primaire du site) plutôt qu'orange, pour ne pas se confondre avec le bouton favori juste
   à côté sur la même carte. */
.compare-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    color: #a0aec0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, transform 0.1s;
}

.compare-toggle:hover {
    border-color: #1a56db;
    color: #1a56db;
}

.compare-toggle:active {
    transform: scale(0.92);
}

.compare-toggle.is-active {
    color: #fff;
    background: #1a56db;
    border-color: #1a56db;
}

.compare-toggle .compare-icon-off { display: inline; }
.compare-toggle .compare-icon-on { display: none; }
.compare-toggle.is-active .compare-icon-off { display: none; }
.compare-toggle.is-active .compare-icon-on { display: inline; }

/* Retour visuel quand le comparateur est déjà plein (cf. assets/scripts/compare.js, MAX formations) :
   le bouton refuse l'ajout, un petit tremblement le signale sans avoir besoin d'un message d'erreur. */
.compare-toggle.is-shake {
    animation: compare-shake 0.4s;
}

@keyframes compare-shake {
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* À gauche du bouton favori (lui-même à right: 0.75rem, cf. .card-favori-wrap ci-dessus) : les deux
   boutons flottent côte à côte au-dessus de la carte plutôt que de se superposer. */
.card-compare-wrap {
    position: absolute;
    top: 0.75rem;
    right: 3.5rem;
    z-index: 2;
}

/* ── Search box ───────────────────────────────────────── */
.search-wrapper {
    position: relative;
    margin-top: 2rem;
    margin-bottom: 1.25rem;
}

.search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 0.5rem 0.5rem 0.5rem 1.25rem;
    box-shadow: 0 8px 32px rgba(26,86,219,0.10);
    transition: box-shadow 0.2s;
}

.search-box:focus-within {
    box-shadow: 0 8px 40px rgba(26,86,219,0.18);
}

.search-icon {
    font-size: 1.15rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.05rem;
    background: transparent;
    color: #1a202c;
    min-width: 0;
}

.search-input::placeholder {
    color: #a0aec0;
}

.search-btn {
    background: #1a56db;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.search-btn:hover {
    background: #1345b5;
}

/* ── Autocomplete ─────────────────────────────────────── */
.autocomplete-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    list-style: none;
    overflow: hidden;
    z-index: 90;
    max-height: 420px;
    overflow-y: auto;
}

.autocomplete-list.hidden { display: none; }

.autocomplete-item {
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f4f8;
    transition: background 0.15s;
    text-align: left;
}

.autocomplete-item:last-child { border-bottom: none; }

.autocomplete-item:hover,
.autocomplete-item.active {
    background: #ebf2ff;
}

.autocomplete-item .ac-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a202c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete-item .ac-meta {
    font-size: 0.8rem;
    color: #718096;
    margin-top: 2px;
}

.autocomplete-item .ac-badge {
    display: inline-block;
    background: #e8edff;
    color: #1a56db;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 20px;
    margin-right: 5px;
}

/* ── Quick filters ────────────────────────────────────── */
.quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.filter-label {
    color: #718096;
    font-size: 0.9rem;
}

.chip {
    background: #fff;
    color: #1a56db;
    border: 1px solid #cbd8f5;
    border-radius: 50px;
    padding: 0.3rem 1rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s;
}

.chip:hover {
    background: #ebf2ff;
}

/* ── Loading ──────────────────────────────────────────── */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem;
    gap: 1rem;
    color: #718096;
}

.loading.hidden { display: none; }

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: #1a56db;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Bannière promo "Autour de moi" (accueil + /formations) ──────────────────────────────── */
.autour-promo-banner {
    max-width: 1100px;
    margin: 0 auto 0;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: #eef4ff;
    border: 1px solid #d6e4fb;
    border-radius: 14px;
}

/* Sur la home uniquement (templates/home/index.html.twig) : la bannière est suivie d'une autre
   section, contrairement à /formations où elle précède directement les résultats de recherche
   (qui gèrent déjà leur propre espacement). */
.autour-promo-banner-home {
    margin-bottom: 2rem;
}

.autour-promo-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.autour-promo-text strong {
    color: #1a202c;
    font-size: 0.95rem;
}

.autour-promo-text span {
    color: #4a5568;
    font-size: 0.85rem;
}

.autour-promo-btn {
    flex-shrink: 0;
    background: #1a56db;
    color: #fff;
    border-radius: 50px;
    padding: 0.55rem 1.2rem;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.autour-promo-btn:hover {
    background: #1345b5;
}

@media (max-width: 640px) {
    .autour-promo-banner {
        margin: 0 0.75rem 1rem;
        justify-content: center;
        text-align: center;
    }
}

/* ── Results ──────────────────────────────────────────── */
.results-section { padding: 2rem 1rem; }
.results-section.hidden { display: none; }

.results-container { max-width: 1100px; margin: 0 auto; }

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

.filters-toggle-btn {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d3748;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.filters-toggle-btn:hover {
    background: #f0f4f8;
    border-color: #1a56db;
    color: #1a56db;
}

.filters-toggle-btn.active {
    background: #1a202c;
    border-color: #1a202c;
    color: #fff;
}

.filters-count-badge {
    background: #1a56db;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.filters-count-badge.hidden { display: none; }

.filters-toggle-btn.active .filters-count-badge {
    background: #fff;
    color: #1a202c;
}

#results-count {
    font-size: 1rem;
    color: #4a5568;
    font-weight: 500;
}

.results-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

/* ── Barre de filtres : rattachée visuellement au bouton "Filtres" ──── */
.filters-toggle-wrap {
    position: relative;
}

.filters-bar {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: max-content;
    max-width: min(560px, 90vw);
    background: #1a202c;
    border: 1px solid #1a202c;
    border-radius: 14px;
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
    z-index: 96;
}

.filters-bar::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 1.4rem;
    border: 7px solid transparent;
    border-bottom-color: #1a202c;
}

.filters-bar.hidden { display: none; }

.filter-dropdown {
    position: relative;
}

.filter-dropdown-btn {
    background: #fff;
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d3748;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 240px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.filter-dropdown-btn span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-dropdown-btn:hover { background: #eef3ff; }
.filter-dropdown-btn.active { background: #1a56db; border-color: #1a56db; color: #fff; }

.filter-dropdown-caret {
    font-size: 0.7rem;
    flex-shrink: 0;
    opacity: 0.7;
}

.filter-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    max-width: 320px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    z-index: 95;
}

.filter-dropdown-panel.hidden { display: none; }

.filter-dropdown-option {
    background: none;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    color: #2d3748;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-align: left;
    width: 100%;
}

.filter-dropdown-option:hover { background: #f0f4f8; }
.filter-dropdown-option.active { background: #ebf2ff; color: #1a56db; font-weight: 600; }

.option-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #cbd5e0;
    flex-shrink: 0;
}

.filter-dropdown-option.active .option-radio {
    border-color: #1a56db;
    background: #1a56db;
    box-shadow: inset 0 0 0 3px #fff;
}

.option-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.option-count {
    font-size: 0.72rem;
    color: #a0aec0;
    flex-shrink: 0;
}

.filter-dropdown-option.active .option-count { color: #7ea6e8; }

/* ── Cards ────────────────────────────────────────────── */
.results-list { flex: 1; display: flex; flex-direction: column; gap: 1rem; }

.formation-card,
.metier-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    border: 1px solid #eef1f7;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
    min-height: 6.5rem;
}

.card-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e8edff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
}

.card-icon svg {
    width: 28px;
    height: 28px;
}

.card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Réserve la place du bouton favori (absolu, cf. .card-favori-wrap) : sans ça, un titre long
       sur 2 lignes passait derrière le bouton au lieu de s'arrêter avant. */
    padding-right: 2.75rem;
}

/* Les cartes formation ont deux boutons flottants (comparateur + favori, cf. .card-compare-wrap et
   .card-favori-wrap) contre un seul pour les métiers : il leur faut plus de marge réservée. */
.formation-card .card-body {
    padding-right: 6rem;
}

.formation-card:hover,
.metier-card:hover {
    box-shadow: 0 14px 30px rgba(26,86,219,0.12), 0 2px 8px rgba(15,23,42,0.05);
    transform: translateY(-3px);
    border-color: #dbe4f8;
}

.formation-card.clickable,
.metier-card.clickable {
    cursor: pointer;
}

.formation-card.clickable:focus-visible,
.metier-card.clickable:focus-visible {
    outline: 3px solid #1a56db;
    outline-offset: 2px;
}

.card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}

/* Les libellés ROME (m.libelle) ne sont jamais mis en forme côté PHP/JS : "capitalize"
   mettrait une majuscule à CHAQUE mot ("Conseiller De Vente En Pièces...") au lieu de
   la seule première lettre — on force la casse d'origine en minuscule puis on ne
   capitalise que la première lettre du libellé entier. */
.metier-card .card-title {
    text-transform: lowercase;
}

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

.card-session {
    display: inline-block;
    font-size: 0.72rem;
    background: #fef6e0;
    color: #92600a;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    font-weight: 700;
}

.card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-start;
    margin-top: auto;
    padding-top: 0.6rem;
}

.tag {
    font-size: 0.74rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
}

.tag-lieu { background: #ecfdf3; color: #15803d; }

.card-article-link {
    font-size: 0.74rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    background: #e8edff;
    color: #1a56db;
    text-decoration: none;
    transition: background 0.15s;
}

.card-article-link:hover {
    background: #d6e0ff;
}

/* ── Listes déroulantes de filtres, triées par ordre alphabétique côté JS —
   remplace, sur /formations, /metiers et /articles, l'ancien bouton "Filtres"
   à panneau déroulant (encore utilisé par /suggestions, cf. orientation-results.js,
   qui a ses propres styles .filter-dropdown* plus bas). Compact par nature (une
   seule ligne, quel que soit le nombre d'options), pas besoin de gérer le
   débordement. ── */
.filter-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.filter-select {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a5568;
    cursor: pointer;
    /* Un <select> se dimensionne sur sa PLUS LONGUE option, pas sur le texte affiché : certains
       type_formation dépassent 70 caractères et élargissaient toute la boîte. On plafonne la
       largeur et on tronque proprement — le menu déroulant, lui, reste en texte complet. */
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-select:hover {
    border-color: #1a202c;
}

.filter-select:disabled {
    color: #a0aec0;
    cursor: not-allowed;
}

/* ── Onglets (page /favoris) ──────────────────────────────── */
.favoris-tab {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #4a5568;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.favoris-tab:hover {
    border-color: #1a56db;
    color: #1a56db;
}

.favoris-tab.active {
    background: #1a56db;
    border-color: #1a56db;
    color: #fff;
}

.favoris-tab-count {
    opacity: 0.75;
    font-size: 0.85em;
}

/* ── /articles : liste façon sommaire de presse (titre serif + méta),
   volontairement différente des cartes encadrées .formation-card
   utilisées partout ailleurs (recherche formations, métiers, home). ── */
.article-preview-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.article-preview-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.article-preview-card:first-child {
    padding-top: 0;
}

/* Le titre est ce qui doit dominer la carte (demande explicite : "afficher
   surtout le titre") — méta réduite au minimum pour ne pas lui faire
   concurrence visuellement. */
.article-preview-headline {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.55rem;
    font-weight: 800;
    color: #1a202c;
    text-decoration: none;
    line-height: 1.3;
}

.article-preview-headline:hover {
    color: #1a56db;
}

/* N'affiche qu'un bout du chapeau (2 lignes max, coupé avec "…") : un aperçu, pas l'accroche
   entière — la carte doit rester scannable dans une liste de plusieurs dizaines d'articles. */
.article-preview-lead {
    margin: 0;
    font-size: 0.92rem;
    color: #4a5568;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-preview-meta {
    font-size: 0.78rem;
    color: #a0aec0;
}

/* ── Pagination ───────────────────────────────────────── */
.pagination-bottom {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem 0;
}

.page-btn {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s;
}

.page-btn:hover { background: #ebf2ff; border-color: #1a56db; color: #1a56db; }
.page-btn.active { background: #1a56db; color: #fff; border-color: #1a56db; font-weight: 700; }
.page-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
    /* Hero */
    .hero { min-height: auto; padding: 1.75rem 1rem 1.5rem; }

    /* Search box */
    .search-box { padding: 0.4rem 0.4rem 0.4rem 1rem; border-radius: 14px; }
    .search-btn { padding: 0.6rem 1rem; font-size: 0.9rem; }
    /* 16px minimum : sous ce seuil, Safari iOS zoome automatiquement au focus */
    .search-input { font-size: 1rem; }

    /* Quick filters : scroll horizontal */
    .quick-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .quick-filters::-webkit-scrollbar { display: none; }
    .filter-label { flex-shrink: 0; }
    .chip { flex-shrink: 0; }

    /* Results */
    .results-section { padding: 1rem 0.75rem; }
    .results-header { flex-direction: column; align-items: flex-start; }
    .results-layout { flex-direction: column; }

    /* Filtres : le panneau flottant déborde de l'écran en mobile, on repasse en bloc plein-largeur */
    .filters-toggle-wrap { position: static; width: 100%; }
    .filters-bar {
        position: static;
        width: 100%;
        max-width: none;
        margin-top: 0.6rem;
        box-sizing: border-box;
    }
    .filters-bar::before { display: none; }
    .filter-dropdown { width: 100%; }
    .filter-dropdown-btn { width: 100%; max-width: none; }
    .filter-dropdown-panel { left: 0; right: 0; max-width: none; width: auto; }

    /* Cards */
    .card-title { font-size: 0.95rem; }
    .formation-card,
    .metier-card { padding: 1rem; }

    /* Comparateur + favori côte à côte (cf. .card-compare-wrap/.card-favori-wrap) réservaient assez
       de largeur pour ne laisser presque plus de place au titre sur un écran étroit. Empilés
       verticalement au même endroit plutôt que côte à côte : un seul bouton en largeur à réserver,
       comme avant l'ajout du comparateur. */
    .card-compare-wrap { top: 0.75rem; right: 0.75rem; }
    .card-favori-wrap { top: 3.25rem; right: 0.75rem; }
    .formation-card .card-body { padding-right: 2.75rem; }

    /* Pagination */
    .page-btn { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
}

@media (max-width: 400px) {
    .search-btn { padding: 0.55rem 0.75rem; font-size: 0.85rem; }
}

/* ── No formations (état vide, ex: /favoris, /comparer) ──────── */
.no-formations {
    color: #718096;
    font-size: 0.9rem;
    padding: 1.5rem 0;
    text-align: center;
}
.no-formations a { color: #1a56db; }

/* ── Comparateur (cf. templates/home/comparer.html.twig) ─────── */
/* Défilement horizontal plutôt que de compresser les colonnes : à 4 formations, un tableau figé
   deviendrait illisible sur mobile — mieux vaut glisser que rétrécir. */
.compare-table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0;
}

/* width:auto (pas 100%) : avec 1-2 formations seulement, un tableau étiré à toute la largeur du
   conteneur laissait des colonnes exagérément larges avec beaucoup de vide — les colonnes se
   dimensionnent maintenant sur leur contenu (min/max-width ci-dessous), le tableau ne prend que la
   place dont il a réellement besoin. */
.compare-table {
    width: auto;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.compare-table th,
.compare-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}

/* Une valeur longue (nom d'établissement à rallonge...) doit passer à la ligne, pas étirer sa
   colonne au-delà de max-width : c'était la vraie cause du tableau qui débordait bien plus large
   que le conteneur, avec ou sans width:100% sur .compare-table (nowrap forçait chaque cellule sur
   une seule ligne quelle que soit sa longueur). */
.compare-table th:not(:first-child),
.compare-table td:not(:first-child) {
    max-width: 260px;
    white-space: normal;
    word-break: break-word;
}

/* Première colonne (libellé du critère, ex: "Taux d'accès") : jamais coupée par le défilement
   horizontal, contrairement aux colonnes de formations qui, elles, doivent pouvoir glisser. Toujours
   sur une seule ligne : ce sont des libellés courts et fixes, jamais de contenu variable en longueur. */
.compare-table th:first-child,
.compare-table td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    font-weight: 600;
    color: #4a5568;
    white-space: nowrap;
}

.compare-table thead th {
    vertical-align: top;
    min-width: 180px;
}

.compare-table thead th a {
    display: block;
    font-weight: 700;
    color: #1a202c;
    text-decoration: none;
    margin-bottom: 0.4rem;
}

.compare-table thead th a:hover {
    color: #1a56db;
}

/* N'apparaît que si au moins 2 formations sont comparées (cf. templates/home/comparer.html.twig) :
   sur mobile, la colonne suivante n'est qu'à moitié visible sans ce rappel qu'il y a plus à voir
   en glissant. */
.compare-swipe-hint {
    display: none;
    margin: 0 0 0.5rem;
    color: #718096;
    font-size: 0.82rem;
}

@media (max-width: 640px) {
    .compare-swipe-hint {
        display: block;
    }

    /* Une seule colonne de formation clairement visible à la fois plutôt qu'un aperçu partiel de
       deux colonnes tronquées — on glisse d'une formation à l'autre plutôt que de plisser les yeux
       sur un tableau entier compressé dans l'écran. scroll-snap fait atterrir le glissement
       proprement sur le début de chaque colonne plutôt qu'à un point arbitraire. */
    .compare-table-wrap {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    /* min-width ET max-width identiques : une largeur fixe, pas seulement un plancher — sinon un
       contenu long (cf. word-break plus haut) peut quand même repousser la colonne bien au-delà de
       78vw malgré le retour à la ligne autorisé. */
    .compare-table thead th,
    .compare-table th:not(:first-child),
    .compare-table td:not(:first-child) {
        min-width: 78vw;
        max-width: 78vw;
        scroll-snap-align: start;
    }

    /* La colonne des libellés n'a pas besoin d'être large : moins elle prend de place, plus il en
       reste pour la colonne de formation à côté (cf. min-width ci-dessus). */
    .compare-table th:first-child,
    .compare-table td:first-child {
        min-width: 0;
        max-width: 110px;
        font-size: 0.8rem;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
}

.compare-remove-btn {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    color: #a0aec0;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
}

.compare-remove-btn:hover {
    border-color: #c53030;
    color: #c53030;
}

/* Meilleure valeur d'une ligne (cf. templates/home/comparer.html.twig, ROWS[].highlight) : même
   vert que .badge-green ailleurs sur le site (formations "les plus accessibles" des guides), pour
   rester cohérent sur ce que "vert" signifie déjà sur le site plutôt qu'inventer un nouveau code
   couleur pour la même idée. */
.compare-table td.compare-best {
    background: #ecfdf3;
    color: #15803d;
    font-weight: 700;
}

/* Renvoie vers /formations plutôt qu'une recherche inline sur cette page (cf.
   templates/home/comparer.html.twig) : masqué une fois les MAX emplacements remplis. */
.compare-add-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: #1a56db;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

.compare-add-link:hover {
    text-decoration: underline;
}