/* ══════════════════════════════════════════════════
   JobCollector — CSS Mobile-First
   ══════════════════════════════════════════════════ */

/* ─── Variables ─── */
:root {
    --color-primary: #4a6cb4;
    --color-primary-dark: #3b5998;
    --color-primary-light: #dce4f2;
    --color-secondary: #059669;
    --color-accent: #ffd437;
    --color-text: #000000;
    --color-text-light: #6B7280;
    --color-bg: #EDEEF1;
    --color-white: #FFFFFF;
    --color-border: #E5E7EB;
    --color-danger: #e7312d;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --radius: 8px;
    --radius-lg: 12px;
    --nav-bottom-height: 60px;
    --header-height: 56px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    min-height: 100vh;
    padding-bottom: var(--nav-bottom-height); /* espace pour la barre bottom mobile */
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

/* ─── Container ─── */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ─── Header ─── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-accent);
    border-bottom: none;
    height: var(--header-height);
    transition: box-shadow 0.3s;
}
.site-header.scrolled {
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.header-inner {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 12px;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-img { height: 36px; width: auto; }
.logo-text { font-weight: 700; font-size: 1.2rem; color: var(--color-primary); }
.nav-desktop { display: none; gap: 4px; }
.nav-link {
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 500;
    color: #000;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.nav-link:hover { background: rgba(0,0,0,0.08); color: #000; text-decoration: none; }
.nav-link.active { background: var(--color-primary); color: var(--color-white); }

/* ─── Main ─── */
.site-main { min-height: calc(100vh - var(--header-height) - var(--nav-bottom-height) - 80px); }

/* ─── Footer ─── */
.site-footer {
    text-align: center;
    padding: 24px 16px;
    font-size: 0.85rem;
    color: #000;
    background: var(--color-accent);
    border-top: none;
}
.footer-links a { color: #000; font-weight: 600; }
.footer-link-desktop { display: none; }
@media (min-width: 768px) { .footer-link-desktop { display: inline; } }

.footer-socials { display: flex; gap: 12px; justify-content: center; margin-top: 12px; margin-bottom: 12px; }
.social-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    color: #fff; text-decoration: none; transition: opacity .2s;
}
.social-icon:hover { opacity: .8; }
.social-facebook  { background: #1877F2; }
.social-youtube   { background: #FF0000; }
.social-whatsapp  { background: #25D366; }
.social-instagram { background: #E4405F; }
.social-linkedin  { background: #0A66C2; }
.social-tiktok    { background: #000000; }
.social-twitter   { background: #1DA1F2; }

/* ─── Bottom Navigation (mobile) ─── */
.nav-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--color-accent);
    border-top: none;
    display: flex;
    justify-content: space-around;
    height: var(--nav-bottom-height);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
}
.nav-bottom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 6px 0;
    color: #000;
    font-size: 0.65rem;
    font-weight: 500;
    transition: color 0.2s;
    text-decoration: none;
}
.nav-bottom-item:hover { text-decoration: none; color: var(--color-primary); }
.nav-bottom-item.active { color: var(--color-primary); font-weight: 700; }
.nav-icon { width: 22px; height: 22px; margin-bottom: 2px; }

/* ─── Cards ─── */
.card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-body { padding: 16px; }
.card-header { padding: 12px 16px; font-weight: 600; border-bottom: 1px solid var(--color-border); }

/* ─── Badges ─── */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
}
.badge-primary { background: var(--color-primary-light); color: var(--color-primary); }
.badge-secondary { background: #F3F4F6; color: var(--color-text-light); }
.badge-success { background: #D1FAE5; color: #065F46; }
.badge-formation { background: #FECACA; color: #991B1B; }
.badge-accent { background: #FEF3C7; color: #92400E; }

/* ─── Buttons ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); color: var(--color-white); text-decoration: none; }
.btn-outline {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary-light); text-decoration: none; }
.btn-block { width: 100%; }

/* ─── Form inputs ─── */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-weight: 500; font-size: 0.9rem; margin-bottom: 4px; }
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-white);
    transition: border-color 0.2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary-light);
}
.form-textarea { min-height: 100px; resize: vertical; }

/* ─── Search bar ─── */
.search-bar {
    position: relative;
}
.search-bar .form-input { padding-left: 40px; }
.search-bar .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-text-light);
}

/* ─── Filters (horizontal scrollable chips) ─── */
.filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.filter-chips::-webkit-scrollbar { display: none; }
.chip {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 99px;
    border: 1px solid var(--color-border);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-light);
    background: var(--color-white);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chip .legend-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.chip:hover, .chip.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.chip-secteur {
    border-style: dashed;
}
#filter-secteurs {
    margin-top: -4px;
}

/* ─── Exposant list grid ─── */
.exposant-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 0;
}
.exposant-card { display: flex; gap: 12px; padding: 12px; }
.exposant-logo {
    width: 80px;
    height: 80px;
    border-radius: var(--radius);
    object-fit: contain;
    background: #F3F4F6;
    flex-shrink: 0;
}
.exposant-logo-placeholder {
    width: 80px;
    height: 80px;
    border-radius: var(--radius);
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-primary);
}
.exposant-info { flex: 1; min-width: 0; }
.exposant-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: visible;
}
.exposant-name .badge-immersion {
    flex-shrink: 0;
    line-height: 0;
}
.exposant-meta { font-size: 0.8rem; color: var(--color-text-light); }
.exposant-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }

/* Stand badge on cards */
.exposant-stand-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-primary);
    color: #fff;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Category left border */
.exposant-card[data-cat-color] {
    border-left: 4px solid var(--cat-color, transparent);
}

/* Forum title banner */
.forum-banner {
    background: var(--color-danger);
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
@media (min-width: 768px) {
    .forum-banner { font-size: 2rem; }
}

/* ─── Favoris toggle ─── */
.btn-fav {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-text-light);
    transition: color 0.2s, transform 0.15s;
}
.btn-fav:hover, .btn-fav.is-fav { color: var(--color-danger); }
.btn-fav.is-fav svg { fill: currentColor; }
.btn-fav:active { transform: scale(1.2); }
.btn-fav svg { width: 20px; height: 20px; }

/* ─── Hero (accueil) ─── */
.hero {
    padding: 20px 16px;
    text-align: center;
    background: var(--color-accent);
    color: #000;
}
.hero h1 { font-size: 1.6rem; margin-bottom: 6px; }
.hero p { font-size: 0.95rem; opacity: 0.9; margin-bottom: 10px; }
.hero .badge { background: rgba(0,0,0,0.1); color: #000; font-size: 0.85rem; }
.hero-ml-logo { height: 60px; width: auto; margin-bottom: 10px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08)); }

/* ─── Stats bar ─── */
.stats-bar {
    padding: 16px 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.stat-card {
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px 8px;
    transition: all 0.2s;
    cursor: pointer;
}
.stat-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}
.stat-icon { font-size: 1.5rem; margin-bottom: 2px; line-height: 1; }
.stat-value { font-size: 1.3rem; font-weight: 700; color: var(--color-primary); }
.stat-label { font-size: 0.75rem; color: var(--color-text-light); }

/* ─── Category chips bar ─── */
.cat-chips-bar {
    padding: 12px 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}
.cat-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 99px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.cat-chip:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    text-decoration: none;
}
.cat-chip:hover .cat-chip-count { color: var(--color-white); }
.cat-chip-count {
    font-weight: 700;
    color: var(--color-primary);
    transition: color 0.2s;
}

/* ─── Teaser page ─── */
.teaser {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 32px 16px;
}
.teaser h1 { font-size: 1.8rem; margin-bottom: 12px; }
.teaser .teaser-text { font-size: 1.05rem; color: var(--color-text-light); max-width: 500px; margin-bottom: 24px; }

/* ─── Financeurs (teaser + footer + splash) ─── */
.teaser-financeurs { margin-top: 24px; background: #fff; border-radius: 10px; padding: 14px 24px 12px; }
.teaser-financeurs-label { display: block; font-size: 0.8rem; color: var(--color-text-light); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.teaser-financeurs-logos { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: center; }
.teaser-financeur-logo { height: 52px; width: auto; max-width: 130px; object-fit: contain; filter: grayscale(20%); transition: filter 0.2s; }
.teaser-financeur-logo:hover { filter: none; }

/* ─── Teaser V2 (countdown + stats) ─── */
.teaser-v2 {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 32px 16px; gap: 28px;
}
.teaser-v2-top {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.teaser-v2-info { max-width: 540px; }
.teaser-v2 h1 { font-size: 1.6rem; margin-bottom: 8px; }
.teaser-v2 .teaser-text { font-size: 1rem; color: var(--color-text-light); margin-bottom: 16px; }

/* Feature columns (Avant / Pendant) */
.teaser-features {
    display: flex; flex-direction: column; gap: 16px;
    width: 100%; max-width: 600px;
}
.teaser-feature-col {
    background: var(--color-white, #fff); border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 12px; padding: 18px 20px; text-align: left;
}
.teaser-feature-header {
    font-size: 1.05rem; font-weight: 800; margin-bottom: 10px;
    color: var(--color-primary, #4a6cb4);
}
.teaser-feature-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.teaser-feature-list li {
    font-size: 0.9rem; color: var(--color-text); line-height: 1.4;
    padding-left: 22px; position: relative;
}
.teaser-feature-list li::before {
    content: '✓'; position: absolute; left: 0; color: var(--color-secondary, #059669);
    font-weight: 700;
}

/* Countdown */
.countdown-container {
    background: linear-gradient(135deg, var(--color-primary, #1565C0) 0%, #1976D2 100%);
    color: #fff; border-radius: 14px; padding: 20px 24px;
    width: 100%; max-width: 440px;
    box-shadow: 0 4px 16px rgba(21,101,192,0.25);
}
.countdown-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; margin-bottom: 12px; }
.countdown-boxes { display: flex; justify-content: center; gap: 6px; align-items: center; }
.countdown-box { display: flex; flex-direction: column; align-items: center; min-width: 54px; }
.countdown-value {
    font-size: 2rem; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
    background: rgba(255,255,255,0.15); border-radius: 8px;
    padding: 8px 10px; min-width: 54px;
}
.countdown-unit { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; opacity: 0.8; }
.countdown-sep { font-size: 1.6rem; font-weight: 700; opacity: 0.5; padding-bottom: 16px; }
.countdown-done .countdown-label { font-size: 1.1rem; font-weight: 700; }

/* Opening notice */
.teaser-opening-notice {
    display: flex; align-items: center; gap: 12px;
    background: var(--color-danger, #e7312d);
    color: #fff; border-radius: 10px;
    padding: 14px 24px; font-size: 1.15rem; font-weight: 800;
    max-width: 500px; width: 100%;
}
.opening-icon {
    font-size: 1.6rem; flex-shrink: 0; line-height: 1;
    background: #fff; border-radius: 50%;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
}

/* Video lite-embed */
.teaser-video { width: 100%; max-width: 540px; }
.teaser-video-title {
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-light); margin-bottom: 10px;
}
.teaser-video-wrapper {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
    border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    cursor: pointer; background: #000;
}
.teaser-video-thumb { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: auto; min-height: 100%; object-fit: cover; }
.teaser-video-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background: none; border: none; cursor: pointer;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    transition: transform 0.2s;
}
.teaser-video-play:hover { transform: translate(-50%,-50%) scale(1.1); }

/* Stats grid */
.teaser-stats { width: 100%; max-width: 540px; }
.teaser-stats-title {
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-light); margin-bottom: 12px;
}
.teaser-stats-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.teaser-stat-card {
    background: var(--color-white, #fff); border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 10px; padding: 14px 10px; text-align: center;
    transition: box-shadow 0.2s;
}
.teaser-stat-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.teaser-stat-icon { font-size: 1.5rem; margin-bottom: 4px; }
.teaser-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--color-primary, #1565C0); line-height: 1.2; }
.teaser-stat-label { font-size: 0.75rem; color: var(--color-text-light); margin-top: 2px; }

/* Responsive teaser v2 */
@media (min-width: 768px) {
    .teaser-v2-top { flex-direction: row; text-align: left; gap: 24px; }
    .teaser-v2-info { text-align: left; }
    .teaser-stats-grid { grid-template-columns: repeat(4, 1fr); }
    .countdown-container { max-width: 500px; }
    .countdown-value { font-size: 2.4rem; min-width: 64px; padding: 10px 14px; }
    .teaser-video { max-width: 600px; }
    .teaser-opening-notice { max-width: 500px; }
    .teaser-features { flex-direction: row; max-width: 700px; }
    .teaser-feature-col { flex: 1; }
}
@media (max-width: 480px) {
    .teaser-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

.footer-financeurs { background: #fff; border-radius: 6px; padding: 8px 10px; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.footer-financeurs-label { display: block; font-size: 0.7rem; color: rgba(0,0,0,0.5); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; text-align: center; }
.footer-financeurs-logos { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; }
.footer-financeur-logo { height: 40px; width: auto; max-width: 110px; object-fit: contain; }
.footer-partenaires-row { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; justify-content: center; }
.footer-ml { flex-shrink: 0; }
.footer-ml-logo { height: 50px; width: auto; object-fit: contain; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.1)); transition: opacity 0.2s; }
.footer-ml-logo:hover { opacity: 0.8; }

.splash-financeurs { margin-top: 20px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: center; background: rgba(255,255,255,0.85); border-radius: 12px; padding: 14px 24px; animation: splashFadeInUp 0.7s 0.5s ease both; }
.splash-financeur-logo { height: 44px; width: auto; max-width: 120px; object-fit: contain; opacity: 0.85; }
.splash-ml-logo { height: 70px; width: auto; margin: 8px auto 4px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1)); animation: splashFadeInUp 0.7s 0.15s ease both; }

/* ─── Section ─── */
.section { padding: 24px 0; }
.section-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 16px; padding: 0 16px; }

/* ─── Detail page ─── */
.detail-header { padding: 20px 16px; background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.detail-header h1 { font-size: 1.3rem; }
.detail-section { padding: 16px; }
.detail-section h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 12px; color: var(--color-text); }

.offre-item {
    padding: 12px;
    border-left: 3px solid var(--color-primary);
    margin-bottom: 12px;
    background: var(--color-white);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.formation-item {
    padding: 12px;
    border-left: 3px solid var(--color-danger);
    margin-bottom: 12px;
    background: var(--color-white);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.offre-item h3, .formation-item h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; }
.offre-item .meta, .formation-item .meta { font-size: 0.8rem; color: var(--color-text-light); }

/* ─── Exposant detail redesign ─── */
.exp-hero {
    background: var(--color-accent);
    color: #000;
    padding: 20px 0 24px;
}
.exp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: rgba(0,0,0,0.6);
    margin-bottom: 16px;
    transition: color 0.2s;
}
.exp-back-link:hover { color: #000; text-decoration: none; }
.exp-hero-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.exp-hero-logo {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    min-width: 80px;
    border-radius: var(--radius-lg);
    object-fit: contain;
    background: var(--color-white);
    padding: 4px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.exp-hero-logo-placeholder {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    background: rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 1.8rem;
    color: #000;
}
.exp-hero-info { flex: 1; min-width: 0; }
.exp-hero h1 {
    font-size: 1.4rem;
    margin-bottom: 4px;
    color: #000;
    line-height: 1.3;
}
.exp-hero-sector {
    font-size: 0.88rem;
    color: rgba(0,0,0,0.6);
    margin: 0 0 8px;
}
.exp-hero-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.badge-stand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.1);
    color: #000;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 6px 14px;
}
.badge-stand:hover { background: rgba(0,0,0,0.18); text-decoration: none; }
.exp-hero-fav {
    color: rgba(0,0,0,0.5);
    flex-shrink: 0;
    margin-top: 4px;
}
.exp-hero-fav:hover, .exp-hero-fav.is-fav { color: var(--color-danger); }
.exp-hero-fav svg { width: 26px; height: 26px; }

/* Hero action buttons (stand/plan, site, tel, itinéraire) */
.exp-hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.exp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(0,0,0,0.08);
    color: #000;
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    position: relative;
}
.exp-action-btn:hover { background: rgba(0,0,0,0.15); text-decoration: none; color: #000; }
.exp-action-btn svg { flex-shrink: 0; }
.exp-action-plan { background: var(--color-primary); color: #fff; }
.exp-action-plan:hover { background: var(--color-primary); opacity: 0.85; color: #fff; }
@media (max-width: 480px) {
    .exp-hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .exp-action-plan { grid-column: 1 / -1; }
    .exp-action-btn { justify-content: center; padding: 10px 10px; font-size: 0.8rem; }
}
.exp-action-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.12);
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    color: #000;
    margin-left: 2px;
    transition: background 0.2s;
}
.exp-action-more:hover { background: rgba(0,0,0,0.25); }
.exp-action-secondary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.05);
    color: #000;
    border-radius: 99px;
    font-size: 0.8rem;
    text-decoration: none;
}
.exp-action-secondary:hover { background: rgba(0,0,0,0.12); text-decoration: none; color: #000; }
.hidden { display: none !important; }

/* Quick stats bar */
.exp-quick-stats {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.12);
}
.exp-quick-stat {
    font-size: 0.85rem;
    color: rgba(0,0,0,0.7);
}
.exp-quick-stat-icon { margin-right: 2px; }
.exp-quick-stat strong {
    color: #000;
    font-size: 1rem;
}

/* Hors forum notice */
.exp-hors-forum-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 20px;
    color: #664d03;
    font-size: 0.95rem;
    line-height: 1.5;
}
.exp-hors-forum-notice svg {
    flex-shrink: 0;
    color: #ffc107;
    margin-top: 2px;
}

/* Two-column layout */
.exp-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 0 40px;
}
.exp-main { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
.exp-sidebar { display: flex; flex-direction: column; gap: 16px; }

/* Card tweaks */
.exp-card { transition: box-shadow 0.2s; }
.exp-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}
.exp-card-header svg { color: var(--color-primary); flex-shrink: 0; }

/* Offres & formations redesign */
.exp-list-body { padding: 0; }
.exp-list-sep { border-top: 1px solid var(--color-border); }
.exp-offre-card { padding: 16px; }
.exp-offre-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 8px; color: var(--color-text); }
.exp-offre-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.exp-offre-details { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.exp-detail-line { font-size: 0.85rem; color: var(--color-text-light); }
.exp-offre-desc { font-size: 0.9rem; color: var(--color-text); margin-bottom: 8px; line-height: 1.5; }
.exp-offre-extra { font-size: 0.85rem; color: var(--color-text-light); margin-bottom: 4px; }
.exp-offre-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }

/* Photos exposant */
.exp-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.exp-photo { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; cursor: pointer; transition: transform 0.2s; }
.exp-photo:hover { transform: scale(1.03); }
.exp-photo.exp-photo-zoom { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; object-fit: contain; background: rgba(0,0,0,0.85); z-index: 10000; border-radius: 0; transform: none; cursor: zoom-out; }

/* Contact lines */
.exp-contact-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    margin-bottom: 8px;
}
.exp-contact-line:last-child { margin-bottom: 0; }
.exp-contact-line svg { color: var(--color-text-light); }

/* Tags */
.exp-tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.exp-tag-link { text-decoration: none; transition: opacity 0.2s; }
.exp-tag-link:hover { opacity: 0.8; text-decoration: none; }

/* Video responsive */
.exp-video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
}
.exp-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ─── Empty state ─── */
.empty-state {
    text-align: center;
    padding: 48px 16px;
    color: var(--color-text-light);
}
.empty-state svg { width: 48px; height: 48px; margin-bottom: 12px; opacity: 0.4; }

/* ─── No results (recherche) ─── */
.no-results { text-align: center; padding: 32px; color: var(--color-text-light); }

/* ═══════════════════════════════════════════════
   RESPONSIVE — Desktop (>= 768px)
   ═══════════════════════════════════════════════ */
@media (min-width: 768px) {
    :root {
        --nav-bottom-height: 0px; /* plus de barre bottom */
        --header-height: 64px;
    }
    body { padding-bottom: 0; }
    
    /* Header */
    .nav-desktop { display: flex; }
    .nav-bottom { display: none; }
    
    /* Container */
    .container { padding: 0 24px; }
    
    /* Hero */
    .hero { padding: 28px 24px; }
    .hero h1 { font-size: 2rem; }
    
    /* Exposants grid → 2 colonnes */
    .exposant-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    
    /* Exposant detail */
    .exp-layout { flex-direction: row; gap: 24px; }
    .exp-sidebar { width: 320px; flex-shrink: 0; position: sticky; top: calc(var(--header-height) + 20px); align-self: flex-start; }
    .exp-hero h1 { font-size: 1.8rem; }
    .exp-hero-logo, .exp-hero-logo-placeholder { width: 120px !important; height: 120px !important; max-width: 120px !important; min-width: 120px; }
    
    /* Stats */
    .stats-grid { gap: 16px; }
    .stat-card { padding: 18px 12px; }
    .stat-value { font-size: 1.5rem; }

    /* Teaser — poster plus grand, texte aligné à gauche */
    .teaser-content { justify-content: center !important; }
    .teaser-poster { max-height: 420px !important; max-width: 300px !important; }
    .teaser-content > div { text-align: left; }
}

@media (min-width: 1024px) {
    /* Exposants grid → 3 colonnes */
    .exposant-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════
   Plan interactif
   ══════════════════════════════════════════════════ */

.plan-page { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-height) - var(--nav-bottom-height)); }

/* Floor tabs (Accueil / Salle principale) */
.plan-floor-tabs { display: flex; gap: 6px; margin-top: 8px; }
.plan-floor-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border: 2px solid var(--color-border); border-radius: 24px;
    background: var(--color-white); color: var(--color-text); font-size: 0.88rem;
    font-weight: 600; cursor: pointer; font-family: var(--font); transition: all 0.2s;
}
.plan-floor-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.plan-floor-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.plan-floor-tab-icon { font-size: 1rem; }
.plan-floor-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: rgba(0,0,0,0.1); font-size: 0.72rem; font-weight: 700;
}
.plan-floor-tab.active .plan-floor-tab-count { background: rgba(255,255,255,0.25); }

/* Floor panel visibility */
.plan-floor-hidden { display: none !important; }

/* Atelier stand cards */
.plan-stand-card-atelier { cursor: default; }
.plan-stand-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-stand-sub { font-size: 0.78rem; color: var(--color-text-light); }
.badge-atelier { color: #f1c40f; }

/* Toolbar */
.plan-toolbar { background: var(--color-white); border-bottom: 1px solid var(--color-border); padding: 10px 0; position: sticky; top: var(--header-height); z-index: 50; }
.plan-toolbar-inner { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plan-search-wrap { flex: 1; min-width: 180px; position: relative; }
.plan-search-wrap .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-text-light); pointer-events: none; }
.plan-search-wrap .form-input { padding-left: 36px; width: 100%; }

/* Search dropdown (mobile) */
.plan-search-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 120;
    background: var(--color-white); border: 1px solid var(--color-border);
    border-top: none; border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 50vh; overflow-y: auto;
}
.plan-search-dropdown[hidden] { display: none; }
.psd-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    text-decoration: none; color: var(--color-text); border-bottom: 1px solid var(--color-border-light, #f0f0f0);
    transition: background 0.1s;
}
.psd-item:last-child { border-bottom: none; }
.psd-item:hover, .psd-item:active { background: var(--color-bg); text-decoration: none; }
.psd-stand {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-primary); color: #fff; font-weight: 700;
    font-size: 0.72rem; padding: 2px 8px; border-radius: 4px; min-width: 36px;
    text-align: center; flex-shrink: 0;
}
.psd-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.psd-info strong { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psd-meta { font-size: 0.75rem; color: var(--color-text-light); }
.psd-empty { padding: 16px; text-align: center; color: var(--color-text-light); font-size: 0.88rem; }
.psd-more { padding: 8px 14px; text-align: center; color: var(--color-text-light); font-size: 0.8rem; }

@media (min-width: 768px) {
    .plan-search-dropdown { display: none !important; }
}

.plan-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 14px; border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-white); color: var(--color-text); font-size: 0.85rem;
    cursor: pointer; white-space: nowrap; font-family: var(--font);
}
.plan-btn:hover { background: var(--color-bg); }

/* Filter toggle button (mobile) */
.plan-filters-toggle {
    display: none; align-items: center; gap: 6px;
    padding: 8px 14px; border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-white); color: var(--color-text); font-size: 0.85rem;
    cursor: pointer; white-space: nowrap; font-family: var(--font); transition: all 0.15s;
}
.plan-filters-toggle:hover { background: var(--color-bg); }
.plan-filters-toggle svg { flex-shrink: 0; }
.plan-filters-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--color-primary); color: #fff; font-size: 0.72rem; font-weight: 700;
}

/* Category & secteur filter chips */
.plan-filters { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.plan-filters-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.plan-filters-label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.03em; margin-right: 4px; flex-shrink: 0; }
.plan-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border: 1px solid var(--color-border); border-radius: 20px;
    background: var(--color-white); font-size: 0.82rem; cursor: pointer;
    font-family: var(--font); color: var(--color-text); transition: all 0.15s;
}
.plan-filter-chip:hover { background: var(--color-bg); }
.plan-filter-chip.active { border-color: var(--color-primary); background: var(--color-primary-light, #e8edf5); font-weight: 600; }
.legend-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* Bottom sheet (mobile filters) */
.plan-sheet-overlay {
    position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.4);
    opacity: 0; transition: opacity 0.25s;
}
.plan-sheet-overlay.visible { opacity: 1; }
.plan-sheet {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 201;
    background: var(--color-white); border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 80vh; display: flex; flex-direction: column;
}
.plan-sheet.open { transform: translateY(0); }
.plan-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 12px; border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.plan-sheet-title { font-size: 1.05rem; font-weight: 700; }
.plan-sheet-close {
    width: 32px; height: 32px; border: none; background: var(--color-bg);
    border-radius: 50%; font-size: 1.3rem; cursor: pointer; display: flex;
    align-items: center; justify-content: center; color: var(--color-text);
}
.plan-sheet-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.plan-sheet-section { margin-bottom: 20px; }
.plan-sheet-section:last-child { margin-bottom: 0; }
.plan-sheet-section-title { font-size: 0.85rem; font-weight: 600; color: var(--color-text-light); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.plan-sheet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-sheet-footer {
    display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}
.plan-sheet-reset {
    flex: 1; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-white); font-family: var(--font); font-size: 0.9rem;
    cursor: pointer; color: var(--color-text);
}
.plan-sheet-reset:hover { background: var(--color-bg); }
.plan-sheet-apply {
    flex: 2; padding: 10px; border: none; border-radius: var(--radius);
    background: var(--color-primary); color: #fff; font-family: var(--font);
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.plan-sheet-apply:hover { opacity: 0.9; }

/* Mobile: show toggle, hide desktop filters */
@media (max-width: 768px) {
    .plan-filters-toggle { display: inline-flex; }
    .plan-filters-desktop { display: none !important; }
}
/* Desktop: hide bottom sheet elements, horizontal scroll filters */
@media (min-width: 769px) {
    .plan-sheet, .plan-sheet-overlay { display: none !important; }
    .plan-toolbar { padding: 8px 0; }
    .plan-filters { gap: 4px; margin-top: 4px; }
    .plan-filters-scroll-wrap {
        display: flex; align-items: center; gap: 0; position: relative;
    }
    .plan-filters-group {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        scroll-behavior: smooth;
    }
    .plan-filters-group::-webkit-scrollbar { display: none; }
    .plan-filter-chip { padding: 3px 10px; font-size: 0.78rem; flex-shrink: 0; }
    .plan-filter-chip .legend-color { width: 8px; height: 8px; }
    .plan-scroll-arrow {
        display: flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; flex-shrink: 0;
        border: none; border-radius: 50%;
        background: var(--color-primary); color: #fff;
        font-size: 1.3rem; font-weight: 700; line-height: 1; cursor: pointer;
        transition: all 0.15s; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .plan-scroll-arrow:hover { background: var(--color-primary-dark, #3a5a9e); }
    .plan-scroll-arrow[hidden] { display: none; }
    .plan-scroll-left { margin-right: 6px; }
    .plan-scroll-right { margin-left: 6px; }
}
@media (max-width: 768px) {
    .plan-scroll-arrow { display: none; }
    .plan-filters-scroll-wrap { display: contents; }
}

/* Plan layout: SVG + liste côte à côte */
.plan-layout { display: flex; flex-direction: column; flex: 1; }

/* Plan container (inline SVG) */
.plan-container { position: relative; overflow: hidden; background: #fff; touch-action: none; }
.plan-viewport { width: 100%; cursor: grab; display: flex; align-items: center; justify-content: center; padding: 8px; }
.plan-viewport:active { cursor: grabbing; }
#plan-svg-inline, #plan-svg-accueil { max-width: 100%; height: auto; transform-origin: center center; transition: transform 0.1s ease-out; user-select: none; background: #fff; }
.plan-no-svg { display: flex; align-items: center; justify-content: center; min-height: 200px; background: var(--color-bg); }
.plan-no-svg-msg { text-align: center; color: var(--color-text-light); padding: 40px 20px; }
.plan-no-svg-msg svg { margin-bottom: 12px; opacity: 0.4; }
.plan-no-svg-msg p { font-size: 0.95rem; margin: 0; }

/* SVG stand interactive styles */
.plan-stand-shape { transition: fill-opacity 0.15s, stroke 0.15s; }
.plan-stand-group { cursor: pointer; }
.plan-stand-group foreignObject,
.plan-stand-group foreignObject * { pointer-events: none; }

/* Zoom controls */
.plan-zoom-controls { position: absolute; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 4px; z-index: 10; }
.plan-zoom-btn {
    width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-white); color: var(--color-text); font-size: 1.2rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm); font-family: var(--font);
}
.plan-zoom-btn:hover { background: var(--color-bg); }

/* Tooltip */
.plan-tooltip {
    position: absolute; z-index: 100; pointer-events: none;
    background: var(--color-white); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12));
    padding: 10px 14px; max-width: 280px; font-size: 0.85rem;
    font-family: var(--font); color: var(--color-text);
}
.plan-tooltip[hidden] { display: none; }
.tt-stand { font-weight: 700; font-size: 0.78rem; color: var(--color-text-light); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.tt-exposant { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.tt-exposant:last-child { margin-bottom: 0; }
.tt-exposant-info { flex: 1; min-width: 0; }
.tt-exposant strong { display: block; font-size: 0.88rem; }
.tt-cat { font-size: 0.78rem; color: var(--color-text-light); }
.tt-meta { display: flex; gap: 6px; margin-top: 2px; }
.tt-badge { font-size: 0.72rem; color: var(--color-secondary); font-weight: 600; padding: 1px 6px; background: var(--color-bg); border-radius: 10px; }
.tt-badge-f { color: var(--color-accent-dark, #b8860b); }
.tt-logo { width: 52px; height: 52px; object-fit: contain; border-radius: 4px; background: #f3f4f6; flex-shrink: 0; }

/* Stands list */
.plan-stands-list { padding: 16px; background: var(--color-white); }
.plan-stands-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; color: var(--color-text); }
.plan-zone-group { margin-bottom: 16px; }
.plan-zone-title {
    display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
    font-size: 0.92rem; font-weight: 600; color: var(--color-text);
}
.plan-zone-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.plan-zone-count { color: var(--color-text-light); font-weight: 400; font-size: 0.82rem; }
.plan-stands-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.plan-stand-card {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius);
    text-decoration: none; color: var(--color-text); font-size: 0.88rem; transition: background 0.15s, border-color 0.15s;
}
.plan-stand-card:hover { background: var(--color-bg); text-decoration: none; }
.plan-stand-card.empty { opacity: 0.45; pointer-events: none; }
.plan-stand-card.search-highlight { border-color: var(--color-accent); background: #fffde7; }
.plan-stand-code {
    display: inline-flex; align-items: center; justify-content: center;
    color: #FFF; font-weight: 700; font-size: 0.78rem;
    padding: 2px 8px; border-radius: 4px; min-width: 40px; text-align: center;
}
.plan-stand-name { flex: 1; }
.plan-stand-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 4px; background: #f3f4f6; flex-shrink: 0; }
.plan-stand-name.empty { color: var(--color-text-light); }
.plan-stand-badge { font-size: 0.72rem; color: var(--color-secondary); font-weight: 600; padding: 1px 6px; background: var(--color-bg); border-radius: 10px; }
.plan-stand-badge.badge-formation { color: var(--color-accent-dark, #b8860b); }

/* No results message */
.plan-no-results { padding: 24px 16px; text-align: center; color: var(--color-text-light); }
.plan-no-results p { margin: 0; font-size: 0.92rem; }

@media (min-width: 600px) {
    .plan-stands-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .plan-layout { flex-direction: row; flex: none; height: calc(100vh - var(--header-height) - 200px); max-height: calc(100vh - 260px); overflow: hidden; }
    .plan-container { flex: 3; min-height: 0; height: 100%; overflow: hidden; }
    .plan-viewport { height: 100%; overflow: auto; }
    #plan-svg-inline, #plan-svg-accueil { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
    .plan-stands-list { flex: 2; max-height: 100%; overflow-y: auto; border-left: 1px solid var(--color-border); }
    .plan-stands-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════
   "Préparer ma visite"
   ══════════════════════════════════════════════════ */

/* CTA block on accueil */
.preparer-cta {
    background: rgba(74, 108, 180, 0.08);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin: 0;
}
.preparer-cta h2 { font-size: 1.15rem; margin-bottom: 6px; }
.preparer-cta p { font-size: 0.92rem; color: var(--color-text-light); margin-bottom: 14px; line-height: 1.5; }
.preparer-cta .btn { font-size: 0.95rem; }

/* Page layout */
.preparer-page { padding-top: 16px; padding-bottom: 40px; }

.preparer-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 12px;
    transition: color 0.2s;
}
.preparer-back:hover { color: var(--color-primary); text-decoration: none; }

.preparer-header { margin-bottom: 24px; }
.preparer-header h1 { font-size: 1.5rem; margin-bottom: 8px; }
.preparer-header p { font-size: 0.95rem; color: var(--color-text-light); line-height: 1.5; }

/* Steps */
.preparer-step {
    border: none;
    padding: 0;
    margin: 0 0 24px 0;
}
.preparer-step-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--color-text);
}
.preparer-step-label small {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--color-text-light);
}
.preparer-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Chips */
.preparer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.preparer-chip {
    padding: 10px 16px;
    border-radius: 99px;
    border: 1px solid var(--color-border);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-white);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
    min-height: 44px;
    line-height: 1.3;
}
.preparer-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.preparer-chip.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* Submit area */
.preparer-submit-wrap {
    margin-top: 8px;
    margin-bottom: 32px;
}
.preparer-hint {
    font-size: 0.82rem;
    color: var(--color-text-light);
    text-align: center;
    margin-top: 8px;
}

/* Results */
.preparer-results { margin-top: 8px; }
.preparer-results-header {
    background: rgba(74, 108, 180, 0.08);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
}
.preparer-results-header h2 { font-size: 1.2rem; margin-bottom: 4px; }
.preparer-profil-recap { font-size: 0.88rem; color: var(--color-text-light); font-weight: 500; }

.preparer-section { margin-bottom: 20px; }
.preparer-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-primary-light);
}

.preparer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .preparer-page { max-width: 720px; margin: 0 auto; }
    .preparer-header h1 { font-size: 1.8rem; }
}

/* ─── Accordion (Infos pratiques) ─── */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.accordion-item {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.accordion-item:hover { box-shadow: var(--shadow-sm); }
.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: none;
    font-family: var(--font);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.2s;
}
.accordion-header:hover { background: rgba(0,0,0,0.02); }
.accordion-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-text-light);
    transition: transform 0.3s ease;
}
.accordion-item.open .accordion-chevron {
    transform: rotate(180deg);
}
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.accordion-body-inner {
    padding: 0 16px 16px;
}

/* ─── Timeline (Programme) ─── */
.timeline {
    position: relative;
    padding-left: 0;
}
.timeline-slot {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
}
.timeline-time {
    flex-shrink: 0;
    width: 80px;
    padding-top: 2px;
    position: relative;
}
.timeline-time::after {
    content: '';
    position: absolute;
    top: 28px;
    bottom: -24px;
    left: 39px;
    width: 2px;
    background: var(--color-border);
}
.timeline-slot:last-child .timeline-time::after { display: none; }
.timeline-time-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    white-space: nowrap;
}
.timeline-events {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.timeline-event {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: 14px 16px;
    transition: box-shadow 0.2s, transform 0.15s;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.timeline-event:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.timeline-event-img {
    width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius);
    flex-shrink: 0; background: var(--color-bg);
}
.timeline-event-body { flex: 1; min-width: 0; }
.timeline-event-type {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.timeline-event-stand {
    font-size: 0.75rem; font-weight: 600; color: var(--color-primary);
    background: var(--color-primary-light, #e8edf5); padding: 2px 8px;
    border-radius: 10px; text-decoration: none; white-space: nowrap;
}
.timeline-event-stand:hover { text-decoration: underline; }
.timeline-event-duration {
    font-size: 0.8rem;
    color: var(--color-text-light);
    font-weight: 500;
}
.timeline-event-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3;
}
.timeline-event-meta {
    font-size: 0.82rem;
    color: var(--color-text-light);
    margin-bottom: 2px;
}
.timeline-event-desc {
    font-size: 0.88rem;
    color: var(--color-text);
    margin-top: 8px;
    line-height: 1.5;
}

/* Timeline responsive mobile */
@media (max-width: 480px) {
    .timeline-slot { flex-direction: column; gap: 6px; }
    .timeline-time { width: auto; }
    .timeline-time::after { display: none; }
    .timeline-event-img { width: 60px; height: 60px; }
}

/* ─── Splash Screen ─── */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.6s ease;
}
.splash-screen.splash-hidden {
    opacity: 0;
    pointer-events: none;
}
.splash-screen.splash-none {
    display: none;
}
.splash-content {
    text-align: center;
    animation: splashFadeInUp 0.7s ease both;
}
.splash-logo {
    height: 90px;
    width: auto;
    margin: 0 auto 16px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12));
}
.splash-text {
    font-family: var(--font);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    display: block;
    margin-bottom: 12px;
}
.splash-tagline {
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 500;
    color: rgba(0,0,0,0.55);
    letter-spacing: 0.02em;
    animation: splashFadeInUp 0.7s 0.25s ease both;
}
@keyframes splashFadeInUp {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ─── Bouton Au hasard ─── */
.btn-hasard {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-accent);
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}
.btn-hasard:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: var(--shadow-md);
}
.btn-hasard:active {
    transform: scale(0.95) rotate(-10deg);
}

/* ─── Offres CTA (accueil) ─── */
.offres-highlight {
    padding: 0 0 8px;
}
.offres-cta {
    background: linear-gradient(135deg, var(--color-primary), #3b5998);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    color: var(--color-white);
    box-shadow: var(--shadow-lg);
    animation: offresSlideIn 0.5s ease both;
}
@keyframes offresSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.offres-cta-icon {
    font-size: 2.4rem;
    flex-shrink: 0;
}
.offres-cta-content {
    flex: 1;
    min-width: 200px;
}
.offres-cta-content h2 {
    font-size: 1.15rem;
    margin-bottom: 4px;
    color: var(--color-white);
}
.offres-cta-count {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-accent);
}
.offres-cta-content p {
    font-size: 0.88rem;
    opacity: 0.85;
    margin: 0;
    line-height: 1.4;
}
.offres-cta .btn {
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--color-accent);
    color: var(--color-primary-dark);
    font-weight: 700;
    border: none;
}
.offres-cta .btn:hover {
    background: var(--color-white);
    color: var(--color-primary);
}
@media (max-width: 480px) {
    .offres-cta { flex-direction: column; text-align: center; padding: 20px 16px; }
    .offres-cta .btn { width: 100%; }
}

/* ─── Form enhancements (partenaire) ─── */
.form-stack { display: flex; flex-direction: column; gap: 20px; }
.form-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px 16px 16px;
    background: var(--color-white);
}
.form-fieldset-legend {
    font-size: 1rem;
    font-weight: 700;
    padding: 0 8px;
    color: var(--color-primary);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; }
}
.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--color-text);
}
.form-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-family: var(--font);
    background: var(--color-white);
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(74,108,180,0.12);
}
.form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-family: var(--font);
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(74,108,180,0.12);
}
.form-group {
    margin-bottom: 12px;
}
.form-group:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════
   Satisfaction — Swipe Cards
   ══════════════════════════════════════════════════ */

.satisfaction-page {
    padding-top: 16px;
    padding-bottom: calc(var(--nav-bottom-height) + 24px);
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.satisfaction-header {
    text-align: center;
    margin-bottom: 16px;
}
.satisfaction-header h1 {
    font-size: 1.5rem;
    margin-bottom: 6px;
}
.satisfaction-header p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.4;
}

/* Progress */
.satisfaction-progress {
    text-align: center;
    margin-bottom: 20px;
}
.satisfaction-counter {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 8px;
}
.satisfaction-counter #sat-current {
    font-size: 1.1rem;
    color: var(--color-primary);
}
.satisfaction-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
}
.sat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background 0.3s, transform 0.3s;
}
.sat-dot.active {
    background: var(--color-primary);
    transform: scale(1.25);
}
.sat-dot.done {
    background: var(--color-secondary);
}
.sat-dot.done-no {
    background: var(--color-danger);
}

/* ─── Swipe Arena ─── */
.swipe-arena {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 380px;
    margin: 0 auto 20px;
    perspective: 800px;
}

/* ─── Card Stack ─── */
.swipe-card {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    will-change: transform, opacity;
    transition: box-shadow 0.2s;
    z-index: 1;
}
.swipe-card:active { cursor: grabbing; }
.swipe-card.top-card { z-index: 10; }
.swipe-card.next-card {
    z-index: 5;
    transform: scale(0.95) translateY(10px);
    opacity: 0.7;
    pointer-events: none;
}
.swipe-card.hidden-card {
    z-index: 1;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    pointer-events: none;
}

/* Glow feedback pendant le drag */
.swipe-card.dragging-yes {
    box-shadow: 0 0 30px rgba(5, 150, 105, 0.4), var(--shadow-lg);
}
.swipe-card.dragging-no {
    box-shadow: 0 0 30px rgba(231, 49, 45, 0.4), var(--shadow-lg);
}

/* Stamp YES/NO qui apparaît pendant le drag */
.swipe-card::before,
.swipe-card::after {
    position: absolute;
    top: 24px;
    font-size: 1.4rem;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 8px;
    border: 3px solid;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    z-index: 20;
}
.swipe-card::before {
    content: 'OUI ✓';
    right: 16px;
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    transform: rotate(12deg);
}
.swipe-card::after {
    content: 'NON ✕';
    left: 16px;
    color: var(--color-danger);
    border-color: var(--color-danger);
    transform: rotate(-12deg);
}
.swipe-card.dragging-yes::before { opacity: 1; }
.swipe-card.dragging-no::after { opacity: 1; }

/* Fly-off animation */
.swipe-card.fly-right {
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    transform: translateX(150%) rotate(25deg) !important;
    opacity: 0 !important;
}
.swipe-card.fly-left {
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    transform: translateX(-150%) rotate(-25deg) !important;
    opacity: 0 !important;
}
/* Snap-back */
.swipe-card.snap-back {
    transition: transform 0.3s ease;
}

/* Card content */
.swipe-card-emoji {
    font-size: 3rem;
    margin-bottom: 12px;
    line-height: 1;
}
.swipe-card-text {
    font-size: 1.25rem;
    text-align: center;
    line-height: 1.4;
    color: var(--color-text);
}
.swipe-hint {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 24px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-light);
    opacity: 0.5;
}
.swipe-hint-no { color: var(--color-danger); }
.swipe-hint-yes { color: var(--color-secondary); }

/* Special cards (emoji rating, commentaire) — no swipe */
.swipe-card-special {
    cursor: default;
    touch-action: auto;
}

/* ─── Emoji Rating ─── */
.emoji-rating {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}
.emoji-btn {
    font-size: 2.2rem;
    background: none;
    border: 3px solid transparent;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.emoji-btn:hover {
    transform: scale(1.15);
}
.emoji-btn:active {
    transform: scale(0.95);
}
.emoji-btn.selected {
    border-color: var(--color-accent);
    background: rgba(255, 212, 55, 0.15);
    transform: scale(1.2);
}

/* ─── Choice Cards (profil / motivation) ─── */
.choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 18px;
    width: 100%;
}
.choice-grid-compact {
    gap: 8px;
}
.choice-btn {
    padding: 10px 16px;
    border: 2px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-white);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, background 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.choice-grid-compact .choice-btn {
    padding: 8px 12px;
    font-size: 0.8rem;
}
.choice-btn:hover {
    border-color: var(--color-primary);
    transform: scale(1.04);
}
.choice-btn:active {
    transform: scale(0.96);
}
.choice-btn.selected {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
    transform: scale(1.06);
}

/* ─── Textarea commentaire ─── */
.satisfaction-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: var(--font);
    resize: none;
    margin-top: 16px;
    transition: border-color 0.2s;
}
.satisfaction-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}
.satisfaction-submit {
    margin-top: 16px;
    font-size: 1rem;
    padding: 14px 24px;
}

/* ─── Boutons Oui / Non ─── */
.swipe-buttons {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
}
.swipe-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-md);
    -webkit-tap-highlight-color: transparent;
}
.swipe-btn:active {
    transform: scale(0.9);
}
.swipe-btn-no {
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.swipe-btn-no:hover {
    background: var(--color-danger);
    color: var(--color-white);
    box-shadow: 0 0 20px rgba(231, 49, 45, 0.3);
}
.swipe-btn-yes {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}
.swipe-btn-yes:hover {
    background: var(--color-secondary);
    color: var(--color-white);
    box-shadow: 0 0 20px rgba(5, 150, 105, 0.3);
}
.swipe-btn-icon {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

/* ═══ Page Emploi ═══ */
.emploi-list { display: flex; flex-direction: column; gap: 20px; }
.emploi-exposant {
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.emploi-exposant-header {
    padding: 12px 16px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.emploi-exposant-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.emploi-exposant-link:hover { color: var(--color-primary); }
.emploi-exposant-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}
.emploi-offres { padding: 8px 16px; }
.emploi-offre-card {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}
.emploi-offre-card:last-child { border-bottom: none; }
.emploi-offre-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-primary);
}
.emploi-offre-meta {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-top: 2px;
}
.emploi-offre-desc {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-top: 4px;
    line-height: 1.4;
}

/* ═══ Formulaire contact ═══ */
.form-group { margin-bottom: 16px; }
.form-label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 4px;
}
textarea.form-input {
    resize: vertical;
    min-height: 100px;
}

/* ═══ Badge immersion (image) ═══ */
.badge-immersion {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: #FEF3C7;
    border-radius: 6px;
    vertical-align: middle;
}
.badge-immersion img {
    border-radius: 4px;
    height: 20px;
    width: auto;
    max-height: 20px;
}
.exp-hero-badges .badge-immersion img {
    height: 28px;
    max-height: 28px;
}

/* ─── Écran Merci ─── */
.satisfaction-thanks {
    text-align: center;
    padding: 60px 20px;
    width: 100%;
}
.thanks-animation {
    animation: thanksBounce 0.6s ease-out;
}
.thanks-emoji {
    font-size: 4rem;
    margin-bottom: 16px;
    animation: thanksShake 0.8s ease-in-out 0.4s;
}
.thanks-animation h2 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}
.thanks-animation p {
    color: var(--color-text-light);
    margin-bottom: 24px;
    font-size: 0.95rem;
}

@keyframes thanksBounce {
    0% { opacity: 0; transform: scale(0.5) translateY(40px); }
    60% { transform: scale(1.05) translateY(-5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes thanksShake {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-15deg); }
    40% { transform: rotate(15deg); }
    60% { transform: rotate(-10deg); }
    80% { transform: rotate(10deg); }
}

/* ─── Satisfaction CTA (accueil) ─── */
.satisfaction-cta {
    background: linear-gradient(135deg, var(--color-secondary), #047857);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--color-white);
}
.satisfaction-cta-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}
.satisfaction-cta-content h2 {
    font-size: 1.1rem;
    margin-bottom: 4px;
    color: var(--color-white);
}
.satisfaction-cta-content p {
    font-size: 0.85rem;
    opacity: 0.85;
    margin: 0;
    line-height: 1.4;
}
.satisfaction-cta .btn {
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--color-accent);
    color: #1a1a1a;
    font-weight: 700;
    border: none;
}
.satisfaction-cta .btn:hover {
    background: var(--color-white);
    color: var(--color-primary);
}
@media (max-width: 480px) {
    .satisfaction-cta { flex-direction: column; text-align: center; padding: 20px 16px; }
    .satisfaction-cta .btn { width: 100%; }
}

/* ─── Responsive adjustments ─── */
@media (min-width: 480px) {
    .swipe-arena {
        max-width: 360px;
        height: 380px;
    }
    .swipe-card-emoji { font-size: 3.5rem; }
    .swipe-card-text { font-size: 1.4rem; }
    .emoji-btn { width: 62px; height: 62px; font-size: 2.4rem; }
}