/* =====================================================
   FLY — Design system
   Bleu corporate (confiance) + accent chaud (CTA)
   ===================================================== */

:root {
    --fly-primary: #0a3d62;      /* bleu profond corporate */
    --fly-primary-600: #0c4b78;
    --fly-primary-700: #082f4d;
    --fly-secondary: #1e88a8;    /* bleu-sarcelle */
    --fly-accent: #f39c12;       /* orange chaud — CTA */
    --fly-accent-600: #e08e0b;
    --fly-success: #2ecc71;
    --fly-dark: #0b2233;
    --fly-light: #f5f8fb;
    --fly-muted: #6b7c8c;
    --fly-radius: 14px;
    --fly-shadow: 0 10px 30px rgba(10, 61, 98, 0.10);
    --fly-shadow-sm: 0 4px 14px rgba(10, 61, 98, 0.08);
}

* { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #243746;
    background: #fff;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Poppins', 'Inter', sans-serif;
    color: var(--fly-primary);
}

a { text-decoration: none; }

/* ---------- Boutons ---------- */
.btn-accent {
    background: var(--fly-accent);
    border-color: var(--fly-accent);
    color: #fff;
    font-weight: 600;
}
.btn-accent:hover { background: var(--fly-accent-600); border-color: var(--fly-accent-600); color: #fff; }

.btn-primary {
    background: var(--fly-primary);
    border-color: var(--fly-primary);
}
.btn-primary:hover { background: var(--fly-primary-600); border-color: var(--fly-primary-600); }

.btn-outline-light-fly {
    border: 1.5px solid rgba(255,255,255,.7);
    color: #fff;
    font-weight: 600;
}
.btn-outline-light-fly:hover { background: #fff; color: var(--fly-primary); }

/* ---------- Navbar ---------- */
.fly-navbar {
    background: var(--fly-primary);
    box-shadow: 0 2px 14px rgba(0,0,0,.12);
}
.fly-navbar .navbar-brand { font-size: 1.5rem; color: #fff; }
.brand-dot { color: var(--fly-accent); }
.fly-navbar .nav-link { color: rgba(255,255,255,.85); font-weight: 500; padding-inline: .9rem; }
.fly-navbar .nav-link:hover,
.fly-navbar .nav-link.active { color: #fff; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    background:
        linear-gradient(120deg, rgba(8,47,77,.92) 0%, rgba(10,61,98,.82) 45%, rgba(30,136,168,.75) 100%),
        url('https://images.unsplash.com/photo-1517935706615-2717063c2225?auto=format&fit=crop&w=1600&q=80') center/cover;
    color: #fff;
    padding: 5.5rem 0 6rem;
}
.hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.15; }
.hero .lead { color: rgba(255,255,255,.9); font-size: 1.15rem; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
    padding: .35rem .9rem; border-radius: 50px; font-size: .85rem; font-weight: 500;
}

/* ---------- Cartes génériques ---------- */
.fly-card {
    border: 1px solid #eef2f6;
    border-radius: var(--fly-radius);
    box-shadow: var(--fly-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
    background: #fff;
    height: 100%;
}
.fly-card:hover { transform: translateY(-5px); box-shadow: var(--fly-shadow); }

.section { padding: 4.5rem 0; }
.section-light { background: var(--fly-light); }
.eyebrow {
    color: var(--fly-accent); font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; font-size: .8rem;
}

/* ---------- Destinations ---------- */
.destination-card {
    position: relative; border-radius: var(--fly-radius); overflow: hidden;
    min-height: 240px; display: flex; align-items: flex-end; color: #fff;
    box-shadow: var(--fly-shadow-sm);
}
.destination-card::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,34,51,0) 30%, rgba(8,34,51,.85) 100%);
    z-index: 1;
}
.destination-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.destination-card:hover img { transform: scale(1.08); }
.destination-card .dc-body { position: relative; z-index: 2; padding: 1.25rem; width: 100%; }
.destination-card .dc-body h4 { color: #fff; margin: 0; }

/* ---------- Secteurs ---------- */
.sector-tile {
    display: block; text-align: center; padding: 1.6rem 1rem;
    border-radius: var(--fly-radius); background: #fff; border: 1px solid #eef2f6;
    color: var(--fly-primary); transition: all .2s ease; height: 100%;
}
.sector-tile:hover { background: var(--fly-primary); color: #fff; transform: translateY(-4px); }
.sector-tile:hover .sector-ico { color: var(--fly-accent); }
.sector-ico { font-size: 2.2rem; color: var(--fly-secondary); display: block; margin-bottom: .6rem; }

/* ---------- Offres ---------- */
.offre-card { border-left: 4px solid var(--fly-accent); }
.offre-meta { font-size: .85rem; color: var(--fly-muted); }
.badge-soft {
    background: rgba(30,136,168,.12); color: var(--fly-secondary);
    font-weight: 600; padding: .35em .7em; border-radius: 6px;
}
.badge-contrat { background: rgba(243,156,18,.15); color: var(--fly-accent-600); font-weight: 600; }

/* Filtre des offres : barre latérale fixe pendant le défilement des résultats.
   height:auto annule le height:100% de .fly-card, qui empêchait le sticky de fonctionner. */
.offres-filtre {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    height: auto;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    z-index: 5;
}
@media (max-width: 991.98px) {
    /* En colonne unique, le filtre reprend le flux normal pour ne pas masquer les offres. */
    .offres-filtre { position: static; max-height: none; overflow: visible; }
}

/* ---------- Simulateur ---------- */
.simulator {
    background: #fff; border-radius: var(--fly-radius);
    box-shadow: var(--fly-shadow); padding: 1.75rem;
}
.simulator .step { display: none; }
.simulator .step.active { display: block; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sim-progress { height: 6px; border-radius: 50px; background: #e9eef3; overflow: hidden; }
.sim-progress > span { display: block; height: 100%; background: var(--fly-accent); transition: width .3s ease; }
.sim-option {
    cursor: pointer; border: 1.5px solid #e3e9ef; border-radius: 10px;
    padding: .8rem 1rem; transition: all .15s ease; font-weight: 500;
}
.sim-option:hover { border-color: var(--fly-secondary); }
.sim-option.selected { border-color: var(--fly-accent); background: rgba(243,156,18,.08); }

/* ---------- Étapes ---------- */
.step-number {
    width: 52px; height: 52px; border-radius: 50%; background: var(--fly-primary);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.25rem; font-family: 'Poppins',sans-serif;
}

/* ---------- Stats ---------- */
.stat-num { font-size: 2.4rem; font-weight: 700; color: var(--fly-accent); font-family: 'Poppins',sans-serif; }

/* ---------- Témoignages ---------- */
.testimonial { background:#fff; border-radius: var(--fly-radius); padding:1.5rem; box-shadow: var(--fly-shadow-sm); height:100%; }
.testimonial .stars { color: var(--fly-accent); }

/* ---------- Page header ---------- */
.page-header {
    background: linear-gradient(120deg, var(--fly-primary-700), var(--fly-primary) 60%, var(--fly-secondary));
    color: #fff; padding: 3.2rem 0;
}
.page-header h1 { color: #fff; }
.page-header .breadcrumb a { color: rgba(255,255,255,.8); }
.page-header .breadcrumb-item.active { color: rgba(255,255,255,.6); }

/* ---------- Footer ---------- */
.fly-footer { background: var(--fly-dark); color: rgba(255,255,255,.85); }
.fly-footer h5, .fly-footer h6 { color: #fff; }
.text-light-50 { color: rgba(255,255,255,.6) !important; }
.footer-links a { color: rgba(255,255,255,.7); display:inline-block; padding:.15rem 0; }
.footer-links a:hover { color: var(--fly-accent); }
.footer-social {
    width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:center; color:#fff;
}
.footer-social:hover { background: var(--fly-accent); color:#fff; }

/* ---------- Page Contact ---------- */
.contact-icon {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(243,156,18,.14); color: var(--fly-accent);
    font-size: 1.25rem; flex-shrink: 0;
}
.contact-quick .contact-icon { background: rgba(30,136,168,.12); color: var(--fly-secondary); }
.contact-quick a:hover { color: var(--fly-accent); }
.contact-social {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(30,136,168,.12); color: var(--fly-secondary);
    transition: all .2s ease;
}
.contact-social:hover { background: var(--fly-accent); color: #fff; }

/* Carte « formulaire » discrètement mise en avant + colonne info sur fond corporate */
.contact-form-card { border-top: 4px solid var(--fly-accent); }
.contact-aside {
    background: linear-gradient(150deg, var(--fly-primary-700), var(--fly-primary) 70%, var(--fly-secondary));
    color: #fff; border: none;
}
.contact-aside .contact-icon-light { background: rgba(255,255,255,.14); color: #fff; }
.contact-aside:hover { transform: none; box-shadow: var(--fly-shadow); }

/* ---------- Pages légales ---------- */
.legal-content h2 { font-size: 1.2rem; margin-top: 2.2rem; }
.legal-content h3 { font-size: 1.02rem; margin-top: 1.4rem; color: var(--fly-primary-600); }
.legal-content p, .legal-content li { color: #51606e; }
.legal-content ul { margin-bottom: 1rem; }
.legal-content .table { font-size: .92rem; }
.legal-meta { font-size: .85rem; color: var(--fly-muted); }
/* Champs à compléter par l'agence (surlignés pour être repérés en un coup d'œil) */
.legal-todo {
    background: #fff3cd;
    color: #7a5b00;
    padding: 0 .3rem;
    border-radius: 4px;
    font-style: normal;
    font-weight: 600;
    white-space: normal;
}

/* ---------- CTA band ---------- */
.cta-band {
    background: linear-gradient(120deg, var(--fly-accent), #e67e22);
    color:#fff; border-radius: var(--fly-radius);
}
.cta-band h2 { color:#fff; }

/* ---------- Admin ---------- */
.admin-sidebar { background: var(--fly-primary-700); min-height:100vh; }
.admin-sidebar a { color: rgba(255,255,255,.75); padding:.7rem 1.1rem; display:block; border-radius:8px; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(255,255,255,.1); color:#fff; }
.admin-stat { border-radius: var(--fly-radius); padding:1.4rem; color:#fff; }

/* ---------- Utils ---------- */
.object-cover { object-fit: cover; }

/* =========================================================
   AUDIT ANTI-DÉBORDEMENT (responsive / 5 passes front-end)
   ========================================================= */

/* 1. Aucune image ne dépasse son conteneur */
img { max-width: 100%; }

/* 2. Casser les très longues chaînes (titres, emails, URLs) */
h1, h2, h3, h4, h5, h6,
p, a, span, li, td, th, .badge, .badge-soft {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.fly-card, .testimonial, .simulator, .accordion-button { overflow-wrap: anywhere; }

/* 3. Images d'offres (vignette de carte + bannière de fiche) */
.offre-thumb {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}
.offre-banner {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: var(--fly-radius);
    display: block;
}

/* 4. Autoriser la troncature dans les conteneurs flex (sinon débordement) */
.offre-card,
.offre-card .flex-grow-1,
.destination-card .dc-body { min-width: 0; }

/* 5. Tables (admin) : casser emails/URLs, alignement vertical */
.table td, .table th {
    overflow-wrap: anywhere;
    vertical-align: middle;
}

/* 6. Liens de pied de page longs (emails) */
.footer-links li, .footer-links a { overflow-wrap: anywhere; }

/* 7. Champs de formulaire qui ne débordent jamais */
.form-control, .form-select { max-width: 100%; }

/* 8. Layout admin : la sidebar ne rétrécit pas, le contenu peut rétrécir */
.admin-sidebar { flex-shrink: 0; }
main { min-width: 0; }

/* 9. Badges qui peuvent passer à la ligne au lieu de pousser la mise en page */
.badge { white-space: normal; }

/* 10. Garde-fou : pas de scroll horizontal sur très petits écrans */
@media (max-width: 575.98px) {
    .page-header h1 { font-size: 1.5rem; }
    .hero { padding: 4rem 0; }
    .admin-sidebar { width: 200px !important; }
}