/* VoyaCompare — feuille de style
   Palette méditerranéenne : marine profond, azur, écume, et vert pour le meilleur prix. */

:root {
    --marine: #0e3a53;
    --marine-fonce: #092a3d;
    --azur: #1b98e0;
    --azur-clair: #e3f2fb;
    --ecume: #f3f7f9;
    --encre: #1d2b33;
    --gris: #5f7480;
    --vert: #168a5d;
    --vert-clair: #e2f5ec;
    --rouge: #c0392b;
    --blanc: #ffffff;
    --rayon: 12px;
    --ombre: 0 4px 18px rgba(14, 58, 83, .10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--ecume);
    color: var(--encre);
    line-height: 1.55;
}

/* ---------- Barre de navigation ---------- */
.topbar {
    background: var(--marine);
    color: var(--blanc);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px;
    flex-wrap: wrap;
    gap: 10px;
}
.logo {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--blanc);
    text-decoration: none;
    letter-spacing: -.5px;
}
.logo span { color: var(--azur); }
.topbar nav a {
    color: #cfe5f2;
    text-decoration: none;
    margin-left: 22px;
    font-weight: 600;
}
.topbar nav a:hover { color: var(--blanc); }
.nav-admin { opacity: .75; }

.container { max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; }

/* ---------- Accueil ---------- */
.hero { text-align: center; padding: 30px 0 36px; }
.hero h1 { font-size: 2.1rem; color: var(--marine); }
.hero h1 em { color: var(--azur); font-style: normal; }
.hero p { color: var(--gris); margin: 10px auto 22px; max-width: 560px; }

.searchbar {
    display: flex;
    gap: 10px;
    max-width: 680px;
    margin: 0 auto 26px;
    flex-wrap: wrap;
}
.searchbar input, .searchbar select {
    flex: 1 1 200px;
    padding: 12px 14px;
    border: 1px solid #c8d8e0;
    border-radius: var(--rayon);
    font-size: 1rem;
    background: var(--blanc);
}
.searchbar button {
    padding: 12px 24px;
    border: none;
    border-radius: var(--rayon);
    background: var(--azur);
    color: var(--blanc);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.searchbar button:hover { background: #137bb8; }

/* ---------- Cartes voyages ---------- */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 22px; }

.carte {
    background: var(--blanc);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.carte-visuel {
    font-size: 4rem;
    text-align: center;
    padding: 26px 0;
    background: linear-gradient(160deg, var(--azur-clair), #d2e9f7);
}
.carte-corps { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.carte h2 { font-size: 1.25rem; color: var(--marine); }
.carte h2 small { color: var(--gris); font-weight: 500; font-size: .85rem; }
.dates { color: var(--gris); font-size: .9rem; margin: 4px 0 8px; }
.desc { font-size: .93rem; flex: 1; }

.carte-prix {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e6eef2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.label-prix { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; color: var(--gris); }
.prix { font-size: 1.45rem; color: var(--vert); font-weight: 800; }
.par-pers { font-size: .8rem; color: var(--gris); }
.economie { display: block; font-size: .78rem; color: var(--vert); font-weight: 600; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-block;
    background: var(--azur);
    color: var(--blanc);
    text-decoration: none;
    border: none;
    padding: 11px 20px;
    border-radius: var(--rayon);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    text-align: center;
}
.btn:hover { background: #137bb8; }
.btn-secondaire { background: var(--blanc); color: var(--azur); border: 2px solid var(--azur); }
.btn-secondaire:hover { background: var(--azur-clair); }
.btn-danger { background: var(--blanc); color: var(--rouge); border: 2px solid var(--rouge); }
.btn-danger:hover { background: #fdecea; }
.btn-large { width: 100%; padding: 14px; font-size: 1.05rem; }

/* ---------- Page voyage / comparaison ---------- */
.fil { margin-bottom: 18px; }
.fil a { color: var(--azur); text-decoration: none; font-weight: 600; }

.fiche-voyage {
    display: flex;
    gap: 22px;
    align-items: center;
    background: var(--blanc);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 22px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.fiche-visuel { font-size: 3.4rem; }
.fiche-voyage h1, .titre-page { color: var(--marine); font-size: 1.7rem; }
.titre-page { margin-bottom: 18px; }
.titre-section { color: var(--marine); font-size: 1.15rem; margin: 26px 0 14px; }

.offres { display: flex; flex-direction: column; gap: 14px; }

.offre {
    position: relative;
    background: var(--blanc);
    border: 2px solid transparent;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.offre-meilleure {
    border-color: var(--vert);
    background: var(--vert-clair);
}
.badge {
    position: absolute;
    top: -12px;
    left: 18px;
    background: var(--vert);
    color: var(--blanc);
    font-size: .78rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
}
.badge-statique { position: static; display: inline-block; margin-top: 10px; }
.offre h3 { color: var(--marine); font-size: 1.1rem; }
.offre-infos p { font-size: .9rem; color: var(--gris); }
.places { font-weight: 600; }
.offre-action { text-align: right; }
.offre-action .prix { display: block; }
.offre-action .btn { margin-top: 8px; }

/* ---------- Réservation ---------- */
.resa { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: start; }
@media (max-width: 760px) { .resa { grid-template-columns: 1fr; } }

.resa-recap, .resa-form {
    background: var(--blanc);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 24px;
}
.resa-recap h1 { font-size: 1.4rem; color: var(--marine); }
.recap-liste { list-style: none; margin-top: 12px; }
.recap-liste li { padding: 6px 0; border-bottom: 1px dashed #e1ebef; font-size: .95rem; }
.alerte-prix {
    margin-top: 12px;
    background: #fff7e0;
    border: 1px solid #f0d27a;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .9rem;
}

.resa-form h2 { color: var(--marine); font-size: 1.2rem; margin-bottom: 14px; }
.resa-form label { display: block; margin-bottom: 14px; font-weight: 600; font-size: .92rem; }
.resa-form input, .resa-form select, .resa-form textarea {
    width: 100%;
    margin-top: 5px;
    padding: 11px 12px;
    border: 1px solid #c8d8e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
}
.total { font-size: 1.15rem; margin: 6px 0 16px; }
.total strong { color: var(--vert); font-size: 1.35rem; }
.form-etroit { max-width: 420px; }

.erreurs {
    background: #fdecea;
    border: 1px solid #e8b4ae;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    color: var(--rouge);
    font-size: .92rem;
}
.info {
    background: var(--vert-clair);
    border: 1px solid #a8dcc4;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 14px 0;
    color: var(--vert);
    font-weight: 600;
}
.vide { color: var(--gris); padding: 30px 0; text-align: center; }

/* ---------- Confirmation ---------- */
.confirmation { text-align: center; max-width: 620px; margin: 0 auto; }
.confirmation-icone {
    width: 64px; height: 64px;
    margin: 10px auto 16px;
    border-radius: 50%;
    background: var(--vert);
    color: var(--blanc);
    font-size: 2rem;
    line-height: 64px;
    font-weight: 800;
}
.confirmation h1 { color: var(--marine); }
.confirmation-carte {
    background: var(--blanc);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 22px;
    margin: 22px 0;
    text-align: left;
}
.confirmation-carte h2 { color: var(--marine); }

/* ---------- Mes réservations ---------- */
.resa-ligne {
    background: var(--blanc);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 18px 22px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.resa-annulee { opacity: .6; }
.resa-ligne-visuel { font-size: 2.4rem; }
.resa-ligne-infos { flex: 1; min-width: 230px; }
.resa-ligne-infos h2 { font-size: 1.1rem; color: var(--marine); }
.resa-ligne-infos h2 small { color: var(--gris); font-weight: 500; font-size: .8rem; }
.resa-ligne-infos p { font-size: .9rem; color: var(--gris); }
.resa-ligne-action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.statut { font-size: .8rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.statut-ok { background: var(--vert-clair); color: var(--vert); }
.statut-ko { background: #fdecea; color: var(--rouge); }

/* ---------- Administration ---------- */
.admin-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .admin-grille { grid-template-columns: 1fr; } }

.tableau {
    width: 100%;
    border-collapse: collapse;
    background: var(--blanc);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    overflow: hidden;
    font-size: .9rem;
}
.tableau th, .tableau td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef3f6; }
.tableau th { background: var(--marine); color: var(--blanc); }

/* ---------- Pour vous (recommandations) ---------- */
.reco-section {
    margin-bottom: 40px;
}
.reco-titre {
    font-size: 1.3rem;
    color: var(--marine);
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}
.reco-titre::before {
    content: '✦';
    color: var(--azur);
    font-size: 1rem;
}
.reco-sous {
    color: var(--gris);
    font-size: .88rem;
    margin: 4px 0 18px;
}
.reco-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.reco-carte {
    border: 2px solid var(--azur-clair);
    transition: border-color .18s, box-shadow .18s;
}
.reco-carte:hover {
    border-color: var(--azur);
    box-shadow: 0 6px 24px rgba(27, 152, 224, .18);
}
.reco-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--azur), #0a72b8);
    color: var(--blanc);
    font-size: .70rem;
    font-weight: 800;
    padding: 3px 11px;
    border-radius: 999px;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.reco-raison {
    font-size: .83rem;
    color: var(--azur);
    font-style: italic;
    margin: 4px 0 2px;
}
.section-label {
    font-size: 1.1rem;
    color: var(--gris);
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e1ebef;
    letter-spacing: .2px;
}

/* ---------- Pied de page ---------- */
.footer {
    text-align: center;
    color: var(--gris);
    font-size: .85rem;
    padding: 24px;
    border-top: 1px solid #e1ebef;
}